{
  "id": "stock-tracker",
  "name": "Stock Tracker",
  "category": "finance",
  "tags": ["stock", "finance", "tracker", "price", "market", "AAPL", "TSLA"],
  "description": "Live stock price tracker with chart and key metrics for any ticker symbol.",
  "triggers": ["stock tracker", "price tracker", "stock price", "AAPL", "TSLA", "track stock", "stock chart"],
  "defaultSize": { "w": 6, "h": 5 },
  "source": "function StockTracker() {\n  const [symbol, setSymbol] = React.useState('REPLACE_WITH_SYMBOL');\n  const [data, setData] = React.useState(null);\n  const [loading, setLoading] = React.useState(false);\n\n  React.useEffect(() => {\n    if (!symbol) return;\n    setLoading(true);\n    fetch(`https://query1.finance.yahoo.com/v8/finance/chart/${symbol}?interval=1d&range=1mo`)\n      .then(r => r.json())\n      .then(d => {\n        setData(d.chart?.result?.[0]); setLoading(false);\n      })\n      .catch(() => setLoading(false));\n  }, [symbol]);\n\n  const prices = data?.indicators?.quote?.[0]?.close?.filter(Boolean) || [];\n  const min = Math.min(...prices);\n  const max = Math.max(...prices);\n  const current = prices[prices.length - 1];\n  const prev = prices[prices.length - 2];\n  const change = current && prev ? ((current - prev) / prev * 100).toFixed(2) : '0.00';\n\n  return (\n    <div style={{padding:16,fontFamily:'system-ui',height:'100%',display:'flex',flexDirection:'column'}}>\n      <div style={{display:'flex',gap:8,marginBottom:12}}>\n        <input value={symbol} onChange={e=>setSymbol(e.target.value.toUpperCase())}\n          style={{flex:1,padding:'8px 12px',borderRadius:8,border:'1px solid #ccc',fontSize:14}}\n          placeholder=\"Enter ticker (e.g. AAPL)\"/>\n        <button onClick={()=>setSymbol(symbol)}\n          style={{padding:'8px 16px',borderRadius:8,background:'#007AFF',color:'#fff',border:'none',cursor:'pointer'}}>\n          Search\n        </button>\n      </div>\n      {loading && <div style={{textAlign:'center',color:'#888'}}>Loading…</div>}\n      {data && (\n        <div style={{flex:1,display:'flex',flexDirection:'column'}}>\n          <div style={{display:'flex',justifyContent:'space-between',alignItems:'baseline',marginBottom:12}}>\n            <span style={{fontSize:24,fontWeight:700}}>${current?.toFixed(2)}</span>\n            <span style={{fontSize:16,color:change>=0?'#34C759':'#FF3B30',fontWeight:600}}>\n              {change>=0?'+':''}{change}%\n            </span>\n          </div>\n          <div style={{flex:1,display:'flex',alignItems:'flex-end',gap:2}}>\n            {prices.map((p,i)=>{\n              const h = max===min?50:((p-min)/(max-min))*100;\n              return (\n                <div key={i} style={{flex:1,height:`${h}%`,background:i===prices.length-1?'#007AFF':'#007AFF40',borderRadius:2,minHeight:4}}/>\n              );\n            })}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\nrender(<StockTracker/>);",
  "placeholders": [
    { "name": "REPLACE_WITH_SYMBOL", "description": "Stock ticker symbol to track", "default": "AAPL" }
  ]
}