{
  "id": "trip-planner",
  "name": "Trip Planner",
  "category": "vehicle",
  "tags": ["trip", "travel", "route", "planner", "drive", "mileage"],
  "description": "Simple trip planner with distance, fuel cost, and time estimates.",
  "triggers": ["trip planner", "route planner", "drive planner", "road trip", "trip cost"],
  "defaultSize": { "w": 5, "h": 4 },
  "source": "function TripPlanner() {\n  const [from, setFrom] = React.useState('REPLACE_WITH_ORIGIN');\n  const [to, setTo] = React.useState('REPLACE_WITH_DESTINATION');\n  const [mpg, setMpg] = React.useState(30);\n  const [gasPrice, setGasPrice] = React.useState(3.50);\n\n  // Mock distance calculation\n  const distance = from && to ? Math.abs(from.length - to.length) * 15 + 50 : 0;\n  const gallons = distance / mpg;\n  const cost = gallons * gasPrice;\n  const hours = distance / 60;\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}}>Trip Planner</div>\n      <div style={{display:'flex',flexDirection:'column',gap:8,marginBottom:12}}>\n        <input value={from} onChange={e=>setFrom(e.target.value)}\n          style={{padding:'8px 12px',borderRadius:8,border:'1px solid #ccc',fontSize:14}} placeholder=\"From…\"/>\n        <input value={to} onChange={e=>setTo(e.target.value)}\n          style={{padding:'8px 12px',borderRadius:8,border:'1px solid #ccc',fontSize:14}} placeholder=\"To…\"/>\n      </div>\n      <div style={{display:'flex',gap:8,marginBottom:12}}>\n        <div style={{flex:1}}>\n          <div style={{fontSize:11,color:'#888',marginBottom:4}}>MPG</div>\n          <input type=\"number\" value={mpg} onChange={e=>setMpg(Number(e.target.value))}\n            style={{width:'100%',padding:'8px',borderRadius:8,border:'1px solid #ccc',fontSize:14}}/>\n        </div>\n        <div style={{flex:1}}>\n          <div style={{fontSize:11,color:'#888',marginBottom:4}}>Gas $/gal</div>\n          <input type=\"number\" step=\"0.01\" value={gasPrice} onChange={e=>setGasPrice(Number(e.target.value))}\n            style={{width:'100%',padding:'8px',borderRadius:8,border:'1px solid #ccc',fontSize:14}}/>\n        </div>\n      </div>\n      {distance > 0 && (\n        <div style={{background:'#f5f5f5',borderRadius:12,padding:16,marginTop:'auto'}}>\n          <div style={{display:'flex',justifyContent:'space-between',marginBottom:8}}>\n            <span style={{color:'#888'}}>Distance</span>\n            <span style={{fontWeight:600}}>{distance} mi</span>\n          </div>\n          <div style={{display:'flex',justifyContent:'space-between',marginBottom:8}}>\n            <span style={{color:'#888'}}>Est. Time</span>\n            <span style={{fontWeight:600}}>{Math.floor(hours)}h {Math.round((hours%1)*60)}m</span>\n          </div>\n          <div style={{display:'flex',justifyContent:'space-between'}}>\n            <span style={{color:'#888'}}>Fuel Cost</span>\n            <span style={{fontWeight:600,color:'#007AFF'}}>${cost.toFixed(2)}</span>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\nrender(<TripPlanner/>);",
  "placeholders": [
    { "name": "REPLACE_WITH_ORIGIN", "description": "Starting location", "default": "San Francisco" },
    { "name": "REPLACE_WITH_DESTINATION", "description": "Destination", "default": "Los Angeles" }
  ]
}