{
  "id": "frost-signal-bands",
  "name": "Band Editor",
  "theme": "frost-signal",
  "category": "Settings & Forms",
  "description": "Setting a sensor’s permitted range, where the form is the strip: dragging the two handles is the input and the mono numbers beside them follow.",
  "layout": "A wide range strip acting as the primary control with paired mono fields beneath, then escalation rules as ruled rows rather than a nested card stack.",
  "modules": [
    {
      "key": "head",
      "name": "Sensor identity",
      "html": "\n<header class=\"hd\"><span class=\"k\">Sensor FS-0441</span><h1>Kitchen walk-in · Depot 3</h1><p class=\"sub\">Changes take effect at the next poll. Historic excursions are not recalculated against a new band.</p></header>"
    },
    {
      "key": "band",
      "name": "Band control",
      "html": "\n<section class=\"bc\"><span class=\"k\">Permitted range</span><div class=\"wide\"><span class=\"sc\"><span>-5</span><span>0</span><span>5</span><span>10</span><span>15</span></span><div class=\"tk\"><div class=\"fill\" style=\"left:25%;right:45%\"></div><span class=\"hd1\" style=\"left:25%\"></span><span class=\"hd1\" style=\"left:55%\"></span><span class=\"now\" style=\"left:78%\"></span></div></div><div class=\"pair\"><label><span class=\"k\">Minimum</span><input class=\"mn\" value=\"1.0\"><em>°C</em></label><label><span class=\"k\">Maximum</span><input class=\"mn\" value=\"5.0\"><em>°C</em></label><label><span class=\"k\">Current</span><input class=\"mn out\" value=\"9.6\" readonly><em>°C</em></label></div></section>"
    },
    {
      "key": "rules",
      "name": "Escalation rules",
      "html": "\n<section class=\"rl\"><span class=\"k\">Escalation</span>\n<div class=\"rw\"><span>Raise an alert after</span><span class=\"ct\"><input class=\"mn\" value=\"5\"><em>minutes out of band</em></span></div>\n<div class=\"rw\"><span>Escalate to on-call after</span><span class=\"ct\"><input class=\"mn\" value=\"15\"><em>minutes unacknowledged</em></span></div>\n<div class=\"rw\"><span>Quarantine stock at</span><span class=\"ct\"><input class=\"mn\" value=\"600\"><em>degree-minutes</em></span></div>\n<div class=\"rw\"><span>Suppress during defrost cycle</span><span class=\"ct\"><span class=\"tog on\"><i></i></span></span></div>\n<div class=\"rw\"><span>Notify by SMS as well as push</span><span class=\"ct\"><span class=\"tog\"><i></i></span></span></div>\n</section>"
    },
    {
      "key": "save",
      "name": "Save bar",
      "html": "\n<footer class=\"sv\"><span class=\"wn\">This sensor is currently out of range. Widening the band will close the open excursion without a disposition.</span><button class=\"gh\">Discard</button><button class=\"pri\">Save band</button></footer>"
    }
  ],
  "moduleCount": 4,
  "reorderable": true,
  "meta": {
    "id": "frost-signal-bands",
    "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-bands.json",
  "structure": "A wide range strip acting as the primary control with paired mono fields beneath, then escalation rules as ruled rows rather than a nested card stack.",
  "html": "<div class=\"dz dz-frost-signal-bands\" data-design=\"frost-signal-bands\" data-theme=\"frost-signal\">\n<section class=\"dz-mod\" data-mod=\"head\" aria-label=\"Sensor identity\">\n<header class=\"hd\"><span class=\"k\">Sensor FS-0441</span><h1>Kitchen walk-in · Depot 3</h1><p class=\"sub\">Changes take effect at the next poll. Historic excursions are not recalculated against a new band.</p></header></section>\n<section class=\"dz-mod\" data-mod=\"band\" aria-label=\"Band control\">\n<section class=\"bc\"><span class=\"k\">Permitted range</span><div class=\"wide\"><span class=\"sc\"><span>-5</span><span>0</span><span>5</span><span>10</span><span>15</span></span><div class=\"tk\"><div class=\"fill\" style=\"left:25%;right:45%\"></div><span class=\"hd1\" style=\"left:25%\"></span><span class=\"hd1\" style=\"left:55%\"></span><span class=\"now\" style=\"left:78%\"></span></div></div><div class=\"pair\"><label><span class=\"k\">Minimum</span><input class=\"mn\" value=\"1.0\"><em>°C</em></label><label><span class=\"k\">Maximum</span><input class=\"mn\" value=\"5.0\"><em>°C</em></label><label><span class=\"k\">Current</span><input class=\"mn out\" value=\"9.6\" readonly><em>°C</em></label></div></section></section>\n<section class=\"dz-mod\" data-mod=\"rules\" aria-label=\"Escalation rules\">\n<section class=\"rl\"><span class=\"k\">Escalation</span>\n<div class=\"rw\"><span>Raise an alert after</span><span class=\"ct\"><input class=\"mn\" value=\"5\"><em>minutes out of band</em></span></div>\n<div class=\"rw\"><span>Escalate to on-call after</span><span class=\"ct\"><input class=\"mn\" value=\"15\"><em>minutes unacknowledged</em></span></div>\n<div class=\"rw\"><span>Quarantine stock at</span><span class=\"ct\"><input class=\"mn\" value=\"600\"><em>degree-minutes</em></span></div>\n<div class=\"rw\"><span>Suppress during defrost cycle</span><span class=\"ct\"><span class=\"tog on\"><i></i></span></span></div>\n<div class=\"rw\"><span>Notify by SMS as well as push</span><span class=\"ct\"><span class=\"tog\"><i></i></span></span></div>\n</section></section>\n<section class=\"dz-mod\" data-mod=\"save\" aria-label=\"Save bar\">\n<footer class=\"sv\"><span class=\"wn\">This sensor is currently out of range. Widening the band will close the open excursion without a disposition.</span><button class=\"gh\">Discard</button><button class=\"pri\">Save band</button></footer></section>\n</div>",
  "css": "\n.dz-frost-signal-bands { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 26px; max-width: 900px; }\n.dz-frost-signal-bands .k { text-transform: uppercase; letter-spacing: .14em; font-size: 10.5px; font-weight: 700; color: var(--muted-foreground); }\n.dz-frost-signal-bands .mn { font-family: var(--pv-mono); font-weight: 500; }\n.dz-frost-signal-bands .hd { padding-bottom: 16px; border-bottom: 1px solid var(--border); margin-bottom: 24px; }\n.dz-frost-signal-bands h1 { font-size: 30px; font-weight: 600; letter-spacing: -.012em; margin: 6px 0 6px; }\n.dz-frost-signal-bands .sub { margin: 0; font-size: 14.5px; line-height: 1.58; color: var(--muted-foreground); max-width: 66ch; }\n.dz-frost-signal-bands .wide { margin: 14px 0 20px; }\n.dz-frost-signal-bands .sc { display: flex; justify-content: space-between; font-family: var(--pv-mono); font-weight: 500; font-size: 11px; color: var(--muted-foreground); margin-bottom: 6px; }\n.dz-frost-signal-bands .tk { position: relative; height: 8px; background: var(--secondary); border-radius: 4px; }\n.dz-frost-signal-bands .fill { position: absolute; top: 0; bottom: 0; background: color-mix(in oklab, var(--accent) 45%, transparent); border-radius: 4px; }\n.dz-frost-signal-bands .hd1 { position: absolute; top: -5px; width: 4px; height: 18px; background: var(--accent); border-radius: 2px; }\n.dz-frost-signal-bands .now { position: absolute; top: -8px; width: 2px; height: 24px; background: var(--destructive); }\n.dz-frost-signal-bands .pair { display: grid; grid-template-columns: repeat(3, 200px); gap: 20px; }\n.dz-frost-signal-bands label { display: block; }\n.dz-frost-signal-bands .pair input { display: block; width: 120px; background: var(--card); border: 1px solid var(--border); border-radius: 3px; color: var(--foreground); font: inherit; font-family: var(--pv-mono); font-weight: 500; font-size: 18px; padding: 8px 10px; margin-top: 6px; }\n.dz-frost-signal-bands .pair input:focus { outline: none; border-color: var(--primary); }\n.dz-frost-signal-bands .pair .out { color: var(--destructive); border-color: var(--destructive); }\n.dz-frost-signal-bands em { font-family: var(--pv-mono); font-weight: 500; font-style: normal; font-size: 12px; color: var(--muted-foreground); margin-left: 8px; }\n.dz-frost-signal-bands .rl { margin-top: 28px; }\n.dz-frost-signal-bands .rw { display: flex; align-items: center; justify-content: space-between; height: 44px; border-bottom: 1px solid var(--border); font-size: 14.5px; }\n.dz-frost-signal-bands .ct { display: flex; align-items: center; }\n.dz-frost-signal-bands .rw input { width: 64px; background: var(--card); border: 1px solid var(--border); border-radius: 3px; color: var(--foreground); font: inherit; font-family: var(--pv-mono); font-weight: 500; padding: 5px 8px; }\n.dz-frost-signal-bands .rw input:focus { outline: none; border-color: var(--primary); }\n.dz-frost-signal-bands .tog { display: inline-flex; width: 40px; height: 22px; border-radius: 9999px; background: var(--secondary); padding: 3px; border: 1px solid var(--border); }\n.dz-frost-signal-bands .tog i { width: 14px; height: 14px; border-radius: 9999px; background: var(--muted-foreground); }\n.dz-frost-signal-bands .tog.on { background: color-mix(in oklab, var(--accent) 30%, transparent); }\n.dz-frost-signal-bands .tog.on i { background: var(--accent); margin-left: auto; }\n.dz-frost-signal-bands .sv { display: flex; align-items: center; gap: 16px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border); }\n.dz-frost-signal-bands .wn { font-size: 13px; color: var(--destructive); max-width: 60ch; }\n.dz-frost-signal-bands .pri { background: var(--primary); color: var(--primary-foreground); border: 0; border-radius: 3px; padding: 10px 16px; font: inherit; text-transform: uppercase; letter-spacing: .14em; font-size: 10.5px; font-weight: 700; cursor: pointer; }\n.dz-frost-signal-bands .gh { background: transparent; color: var(--foreground); border: 1px solid var(--border); border-radius: 3px; padding: 10px 16px; font: inherit; text-transform: uppercase; letter-spacing: .14em; font-size: 10.5px; font-weight: 700; cursor: pointer; margin-left: auto; }\n@media (prefers-reduced-motion: reduce) { .dz-frost-signal-bands *, .dz-frost-signal-bands *::before, .dz-frost-signal-bands *::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"
}