{
  "id": "frost-signal-console",
  "name": "Console",
  "theme": "frost-signal",
  "category": "Dashboard",
  "description": "The wall console: one row per sensor at 44px, each carrying a state bar, a mono reading, its band drawn as a strip, and a thirty-minute trace.",
  "layout": "A fixed 300px summary column on the left and a dense sensor list on the right; rows never expand, selecting one fills a 380px detail panel.",
  "modules": [
    {
      "key": "sum",
      "name": "Fleet summary",
      "html": "\n<aside class=\"sm\"><span class=\"k\">Estate</span><p class=\"big\">148</p><span class=\"k\">sensors reporting</span><div class=\"sp\"><div class=\"ok\"><span class=\"n\">142</span><span class=\"l\">in range</span></div><div class=\"bad\"><span class=\"n\">6</span><span class=\"l\">out of range</span></div></div><div class=\"ex\"><span class=\"k\">Longest excursion</span><p class=\"mn\">04:12:06</p><span class=\"l\">Kitchen walk-in · Depot 3</span></div></aside>"
    },
    {
      "key": "list",
      "name": "Sensor list",
      "html": "\n<section class=\"ls\"><header class=\"lh\"><span>Sensor</span><span>Reading</span><span>Band</span><span>Dwell</span><span>30 min</span></header>\n<div class=\"rw\"><span class=\"nm\">Vaccine fridge A · Clinic 1</span><span class=\"rd mn\">4.1 °C</span><span class=\"st\"><i style=\"left:20%;right:20%\"></i><u style=\"left:48%\"></u></span><span class=\"dw mn\">17d 04h</span><span class=\"tr\"><svg viewBox=\"0 0 120 20\" preserveAspectRatio=\"none\"><polyline points=\"0,12 20,11 40,13 60,10 80,12 100,11 120,12\"/></svg></span></div>\n<div class=\"rw\"><span class=\"nm\">Vaccine fridge B · Clinic 1</span><span class=\"rd mn\">3.8 °C</span><span class=\"st\"><i style=\"left:20%;right:20%\"></i><u style=\"left:40%\"></u></span><span class=\"dw mn\">9d 22h</span><span class=\"tr\"><svg viewBox=\"0 0 120 20\" preserveAspectRatio=\"none\"><polyline points=\"0,13 20,12 40,12 60,13 80,11 100,12 120,13\"/></svg></span></div>\n<div class=\"rw out\"><span class=\"nm\">Kitchen walk-in · Depot 3</span><span class=\"rd mn\">9.6 °C</span><span class=\"st\"><i style=\"left:20%;right:55%\"></i><u style=\"left:88%\"></u></span><span class=\"dw mn\">04h 12m</span><span class=\"tr\"><svg viewBox=\"0 0 120 20\" preserveAspectRatio=\"none\"><polyline points=\"0,13 20,12 40,9 60,6 80,4 100,3 120,3\"/></svg></span></div>\n<div class=\"rw\"><span class=\"nm\">Blood store · Ward 7</span><span class=\"rd mn\">-31.4 °C</span><span class=\"st\"><i style=\"left:15%;right:25%\"></i><u style=\"left:52%\"></u></span><span class=\"dw mn\">61d 08h</span><span class=\"tr\"><svg viewBox=\"0 0 120 20\" preserveAspectRatio=\"none\"><polyline points=\"0,11 20,12 40,11 60,11 80,12 100,11 120,11\"/></svg></span></div>\n<div class=\"rw out\"><span class=\"nm\">Reefer 8841 · in transit</span><span class=\"rd mn\">-14.2 °C</span><span class=\"st\"><i style=\"left:25%;right:20%\"></i><u style=\"left:14%\"></u></span><span class=\"dw mn\">00h 38m</span><span class=\"tr\"><svg viewBox=\"0 0 120 20\" preserveAspectRatio=\"none\"><polyline points=\"0,8 20,9 40,11 60,13 80,15 100,16 120,16\"/></svg></span></div>\n<div class=\"rw\"><span class=\"nm\">Ambient store · Depot 1</span><span class=\"rd mn\">18.9 °C</span><span class=\"st\"><i style=\"left:10%;right:10%\"></i><u style=\"left:56%\"></u></span><span class=\"dw mn\">122d 03h</span><span class=\"tr\"><svg viewBox=\"0 0 120 20\" preserveAspectRatio=\"none\"><polyline points=\"0,10 20,12 40,11 60,10 80,13 100,11 120,10\"/></svg></span></div>\n</section>"
    },
    {
      "key": "panel",
      "name": "Detail panel",
      "html": "\n<aside class=\"dp\"><span class=\"k\">Selected</span><h2>Kitchen walk-in</h2><p class=\"loc\">Depot 3 · sensor FS-0441</p><p class=\"big out\">9.6 <small>°C</small></p><div class=\"kv\"><span>Band</span><b class=\"mn\">1.0 — 5.0 °C</b></div><div class=\"kv\"><span>Out of range for</span><b class=\"mn\">04:12:06</b></div><div class=\"kv\"><span>Peak</span><b class=\"mn\">9.8 °C</b></div><div class=\"kv\"><span>Degree-minutes</span><b class=\"mn\">1,184</b></div><button class=\"ack\">Acknowledge</button></aside>"
    }
  ],
  "moduleCount": 3,
  "reorderable": true,
  "meta": {
    "id": "frost-signal-console",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-09-02T01:55:55+09:00",
    "updatedAt": "2026-09-02T01:55:55+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/frost-signal-console.json",
  "structure": "A fixed 300px summary column on the left and a dense sensor list on the right; rows never expand, selecting one fills a 380px detail panel.",
  "html": "<div class=\"dz dz-frost-signal-console\" data-design=\"frost-signal-console\" data-theme=\"frost-signal\">\n<section class=\"dz-mod\" data-mod=\"sum\" aria-label=\"Fleet summary\">\n<aside class=\"sm\"><span class=\"k\">Estate</span><p class=\"big\">148</p><span class=\"k\">sensors reporting</span><div class=\"sp\"><div class=\"ok\"><span class=\"n\">142</span><span class=\"l\">in range</span></div><div class=\"bad\"><span class=\"n\">6</span><span class=\"l\">out of range</span></div></div><div class=\"ex\"><span class=\"k\">Longest excursion</span><p class=\"mn\">04:12:06</p><span class=\"l\">Kitchen walk-in · Depot 3</span></div></aside></section>\n<section class=\"dz-mod\" data-mod=\"list\" aria-label=\"Sensor list\">\n<section class=\"ls\"><header class=\"lh\"><span>Sensor</span><span>Reading</span><span>Band</span><span>Dwell</span><span>30 min</span></header>\n<div class=\"rw\"><span class=\"nm\">Vaccine fridge A · Clinic 1</span><span class=\"rd mn\">4.1 °C</span><span class=\"st\"><i style=\"left:20%;right:20%\"></i><u style=\"left:48%\"></u></span><span class=\"dw mn\">17d 04h</span><span class=\"tr\"><svg viewBox=\"0 0 120 20\" preserveAspectRatio=\"none\"><polyline points=\"0,12 20,11 40,13 60,10 80,12 100,11 120,12\"/></svg></span></div>\n<div class=\"rw\"><span class=\"nm\">Vaccine fridge B · Clinic 1</span><span class=\"rd mn\">3.8 °C</span><span class=\"st\"><i style=\"left:20%;right:20%\"></i><u style=\"left:40%\"></u></span><span class=\"dw mn\">9d 22h</span><span class=\"tr\"><svg viewBox=\"0 0 120 20\" preserveAspectRatio=\"none\"><polyline points=\"0,13 20,12 40,12 60,13 80,11 100,12 120,13\"/></svg></span></div>\n<div class=\"rw out\"><span class=\"nm\">Kitchen walk-in · Depot 3</span><span class=\"rd mn\">9.6 °C</span><span class=\"st\"><i style=\"left:20%;right:55%\"></i><u style=\"left:88%\"></u></span><span class=\"dw mn\">04h 12m</span><span class=\"tr\"><svg viewBox=\"0 0 120 20\" preserveAspectRatio=\"none\"><polyline points=\"0,13 20,12 40,9 60,6 80,4 100,3 120,3\"/></svg></span></div>\n<div class=\"rw\"><span class=\"nm\">Blood store · Ward 7</span><span class=\"rd mn\">-31.4 °C</span><span class=\"st\"><i style=\"left:15%;right:25%\"></i><u style=\"left:52%\"></u></span><span class=\"dw mn\">61d 08h</span><span class=\"tr\"><svg viewBox=\"0 0 120 20\" preserveAspectRatio=\"none\"><polyline points=\"0,11 20,12 40,11 60,11 80,12 100,11 120,11\"/></svg></span></div>\n<div class=\"rw out\"><span class=\"nm\">Reefer 8841 · in transit</span><span class=\"rd mn\">-14.2 °C</span><span class=\"st\"><i style=\"left:25%;right:20%\"></i><u style=\"left:14%\"></u></span><span class=\"dw mn\">00h 38m</span><span class=\"tr\"><svg viewBox=\"0 0 120 20\" preserveAspectRatio=\"none\"><polyline points=\"0,8 20,9 40,11 60,13 80,15 100,16 120,16\"/></svg></span></div>\n<div class=\"rw\"><span class=\"nm\">Ambient store · Depot 1</span><span class=\"rd mn\">18.9 °C</span><span class=\"st\"><i style=\"left:10%;right:10%\"></i><u style=\"left:56%\"></u></span><span class=\"dw mn\">122d 03h</span><span class=\"tr\"><svg viewBox=\"0 0 120 20\" preserveAspectRatio=\"none\"><polyline points=\"0,10 20,12 40,11 60,10 80,13 100,11 120,10\"/></svg></span></div>\n</section></section>\n<section class=\"dz-mod\" data-mod=\"panel\" aria-label=\"Detail panel\">\n<aside class=\"dp\"><span class=\"k\">Selected</span><h2>Kitchen walk-in</h2><p class=\"loc\">Depot 3 · sensor FS-0441</p><p class=\"big out\">9.6 <small>°C</small></p><div class=\"kv\"><span>Band</span><b class=\"mn\">1.0 — 5.0 °C</b></div><div class=\"kv\"><span>Out of range for</span><b class=\"mn\">04:12:06</b></div><div class=\"kv\"><span>Peak</span><b class=\"mn\">9.8 °C</b></div><div class=\"kv\"><span>Degree-minutes</span><b class=\"mn\">1,184</b></div><button class=\"ack\">Acknowledge</button></aside></section>\n</div>",
  "css": "\n.dz-frost-signal-console { background: var(--background); color: var(--foreground); font-family: var(--pv-body); display: grid; grid-template-columns: 300px 1fr 380px; gap: 16px; padding: 26px; align-items: start; }\n.dz-frost-signal-console .k { text-transform: uppercase; letter-spacing: .14em; font-size: 10.5px; font-weight: 700; color: var(--muted-foreground); }\n.dz-frost-signal-console .mn { font-family: var(--pv-mono); font-weight: 500; }\n.dz-frost-signal-console .sm { background: var(--card); border: 1px solid var(--border); border-radius: 5px; padding: 18px; }\n.dz-frost-signal-console .big { font-family: var(--pv-mono); font-weight: 500; font-size: 56px; line-height: 1; margin: 6px 0 2px; letter-spacing: -.03em; }\n.dz-frost-signal-console .sp { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 18px 0; }\n.dz-frost-signal-console .sp > div { border-top: 4px solid var(--accent); padding-top: 8px; }\n.dz-frost-signal-console .sp .bad { border-top-color: var(--destructive); }\n.dz-frost-signal-console .sp .n { font-family: var(--pv-mono); font-weight: 500; font-size: 24px; display: block; }\n.dz-frost-signal-console .sp .l { text-transform: uppercase; letter-spacing: .14em; font-size: 10.5px; font-weight: 700; color: var(--muted-foreground); }\n.dz-frost-signal-console .ex { border-top: 1px solid var(--border); padding-top: 12px; }\n.dz-frost-signal-console .ex p { font-family: var(--pv-mono); font-weight: 500; font-size: 20px; margin: 4px 0; }\n.dz-frost-signal-console .ex .l { font-size: 13px; color: var(--muted-foreground); }\n.dz-frost-signal-console .ls { background: var(--card); border: 1px solid var(--border); border-radius: 5px; overflow: hidden; }\n.dz-frost-signal-console .lh, .dz-frost-signal-console .rw { display: grid; grid-template-columns: 1fr 92px 120px 92px 120px; gap: 16px; align-items: center; padding: 0 16px; }\n.dz-frost-signal-console .lh { text-transform: uppercase; letter-spacing: .14em; font-size: 10.5px; font-weight: 700; color: var(--muted-foreground); height: 34px; border-bottom: 1px solid var(--border); }\n.dz-frost-signal-console .rw { height: 44px; border-bottom: 1px solid var(--border); border-left: 4px solid var(--accent); }\n.dz-frost-signal-console .rw.out { border-left-color: var(--destructive); }\n.dz-frost-signal-console .nm { font-size: 14.5px; }\n.dz-frost-signal-console .rd { font-family: var(--pv-mono); font-weight: 500; font-size: 15px; }\n.dz-frost-signal-console .out .rd { color: var(--destructive); }\n.dz-frost-signal-console .dw { font-family: var(--pv-mono); font-weight: 500; font-size: 12.5px; color: var(--muted-foreground); }\n\n.dz-frost-signal-console .st { display: block; position: relative; height: 4px; background: var(--secondary); border-radius: 2px; width: 120px; }\n.dz-frost-signal-console .st i { position: absolute; top: 0; bottom: 0; background: color-mix(in oklab, var(--accent) 45%, transparent); }\n.dz-frost-signal-console .st u { position: absolute; top: -3px; width: 2px; height: 10px; background: var(--accent); }\n.dz-frost-signal-console .out .st u { background: var(--destructive); }\n.dz-frost-signal-console .tr svg { width: 120px; height: 20px; display: block; }\n.dz-frost-signal-console .tr polyline { fill: none; stroke: var(--accent); stroke-width: 1.5; }\n.dz-frost-signal-console .out .tr polyline { stroke: var(--destructive); }\n.dz-frost-signal-console .dp { background: var(--card); border: 1px solid var(--border); border-radius: 5px; padding: 18px; }\n.dz-frost-signal-console .dp h2 { font-size: 19px; font-weight: 600; margin: 6px 0 2px; }\n.dz-frost-signal-console .loc { font-family: var(--pv-mono); font-weight: 500; font-size: 12.5px; color: var(--muted-foreground); margin: 0 0 12px; }\n.dz-frost-signal-console .dp .big { font-size: 56px; }\n.dz-frost-signal-console .dp .big.out { color: var(--destructive); }\n.dz-frost-signal-console .dp small { font-size: 20px; }\n.dz-frost-signal-console .kv { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 13px; }\n.dz-frost-signal-console .kv span { color: var(--muted-foreground); }\n.dz-frost-signal-console .kv b { font-family: var(--pv-mono); font-weight: 500; font-weight: 500; }\n.dz-frost-signal-console .ack { width: 100%; margin-top: 16px; background: var(--primary); color: var(--primary-foreground); border: 0; border-radius: 3px; padding: 10px; font: inherit; text-transform: uppercase; letter-spacing: .14em; font-size: 10.5px; font-weight: 700; cursor: pointer; }\n@media (prefers-reduced-motion: reduce) { .dz-frost-signal-console *, .dz-frost-signal-console *::before, .dz-frost-signal-console *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }\n",
  "requiredTheme": "/api/v1/themes/frost-signal.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Commissioner:wght@400;500;600;700&family=Azeret+Mono:wght@400;500;600;700&display=swap"
}