{
  "id": "ha-sensor-dashboard",
  "name": "Sensor Dashboard",
  "category": "smart-home",
  "tags": ["sensor", "environment", "monitor", "dashboard"],
  "description": "Grid of sensor readings with colored status indicators for home monitoring.",
  "triggers": ["sensor dashboard", "home sensors", "sensor grid", "environment monitor"],
  "defaultSize": { "w": 4, "h": 4 },
  "source": "function SensorDashboard() {\n  const [sensors, setSensors] = React.useState([\n    { name: 'Living Room Temp', value: '72.4 °F', icon: '🌡️', status: 'normal', color: '#10b981' },\n    { name: 'Bedroom Humidity', value: '48 %', icon: '💧', status: 'normal', color: '#3b82f6' },\n    { name: 'Front Door', value: 'Closed', icon: '🚪', status: 'normal', color: '#10b981' },\n    { name: 'Backyard Motion', value: 'Clear', icon: '🏃', status: 'normal', color: '#6b7280' },\n    { name: 'Air Quality', value: 'Good', icon: '🍃', status: 'normal', color: '#10b981' },\n    { name: 'Garage Door', value: 'Open', icon: '🚗', status: 'alert', color: '#ef4444' },\n    { name: 'Kitchen Leak', value: 'Dry', icon: '💦', status: 'normal', color: '#10b981' },\n    { name: 'Smoke Detector', value: 'Safe', icon: '🔥', status: 'normal', color: '#10b981' }\n  ]);\n\n  React.useEffect(() => {\n    const interval = setInterval(() => {\n      setSensors(prev => prev.map(s => {\n        if (s.name === 'Living Room Temp') {\n          const t = (70 + Math.random() * 5).toFixed(1);\n          return { ...s, value: t + ' °F' };\n        }\n        if (s.name === 'Bedroom Humidity') {\n          const h = Math.round(40 + Math.random() * 20);\n          return { ...s, value: h + ' %', color: h > 60 ? '#f59e0b' : '#3b82f6' };\n        }\n        return s;\n      }));\n    }, 8000);\n    return () => clearInterval(interval);\n  }, []);\n\n  return (\n    <div style={{ fontFamily: 'system-ui', background: '#111827', color: '#f3f4f6', width: '100%', height: '100%', padding: 16, borderRadius: 8, boxSizing: 'border-box' }}>\n      <div style={{ fontSize: 14, fontWeight: 600, marginBottom: 12, color: '#9ca3af' }}>Sensor Dashboard</div>\n      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, height: 'calc(100% - 32px)', overflow: 'auto' }}>\n        {sensors.map((s, i) => (\n          <div key={i} style={{ background: '#1f2937', borderRadius: 8, padding: 12, display: 'flex', alignItems: 'center', gap: 10, borderLeft: '4px solid ' + s.color }}>\n            <span style={{ fontSize: 22 }}>{s.icon}</span>\n            <div style={{ minWidth: 0 }}>\n              <div style={{ fontSize: 11, color: '#9ca3af', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{s.name}</div>\n              <div style={{ fontSize: 16, fontWeight: 700, color: s.color }}>{s.value}</div>\n            </div>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\nrender(<SensorDashboard/>);",
  "placeholders": [{ "name": "REPLACE_WITH_SENSOR_ENTITIES", "description": "Comma-separated sensor entity IDs to display", "default": "sensor.living_room_temp,sensor.bedroom_humidity,binary_sensor.front_door,binary_sensor.backyard_motion" }]
}