{
  "id": "world-clock",
  "name": "World Clock",
  "category": "utilities",
  "tags": ["clock", "time", "world", "timezone", "cities"],
  "description": "Display current time across multiple world cities.",
  "triggers": ["world clock", "timezone", "time zones", "city time", "global clock"],
  "defaultSize": { "w": 5, "h": 4 },
  "source": "function WorldClock() {\n  const [now, setNow] = React.useState(new Date());\n  const [cities, setCities] = React.useState([\n    {name:'REPLACE_WITH_CITY_1',tz:'REPLACE_WITH_TZ_1'},\n    {name:'London',tz:'Europe/London'},\n    {name:'Tokyo',tz:'Asia/Tokyo'},\n    {name:'Sydney',tz:'Australia/Sydney'}\n  ]);\n\n  React.useEffect(()=>{\n    const id = setInterval(()=>setNow(new Date()),1000);\n    return ()=>clearInterval(id);\n  },[]);\n\n  const fmt = (tz)=>{\n    try{return new Intl.DateTimeFormat('en',{timeZone:tz,hour:'2-digit',minute:'2-digit',second:'2-digit',hour12:false}).format(now);}\n    catch{return '--:--:--';}\n  };\n  const date = (tz)=>{\n    try{return new Intl.DateTimeFormat('en',{timeZone:tz,weekday:'short',month:'short',day:'numeric'}).format(now);}\n    catch{return '';}\n  };\n\n  return (\n    <div style={{padding:16,fontFamily:'system-ui',height:'100%',display:'flex',flexDirection:'column'}}>\n      <div style={{fontSize:18,fontWeight:700,marginBottom:12}}>World Clock</div>\n      <div style={{flex:1,overflow:'auto',display:'flex',flexDirection:'column',gap:8}}>\n        {cities.map((c,i)=> (\n          <div key={i} style={{display:'flex',justifyContent:'space-between',alignItems:'center',padding:10,background:'#f5f5f5',borderRadius:10}}>\n            <div>\n              <div style={{fontSize:14,fontWeight:600}}>{c.name}</div>\n              <div style={{fontSize:11,color:'#888'}}>{date(c.tz)}</div>\n            </div>\n            <div style={{fontSize:22,fontWeight:200,fontVariantNumeric:'tabular-nums'}}>\n              {fmt(c.tz)}\n            </div>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\nrender(<WorldClock/>);",
  "placeholders": [
    { "name": "REPLACE_WITH_CITY_1", "description": "First city name", "default": "New York" },
    { "name": "REPLACE_WITH_TZ_1", "description": "First city timezone", "default": "America/New_York" }
  ]
}