{
  "id": "frost-signal-estate",
  "name": "Estate Shell",
  "theme": "frost-signal",
  "category": "App Shell",
  "description": "The navigation frame: a site tree whose every node carries its own in-range count, and a header that states the estate state in two numbers and nothing else.",
  "layout": "A 260px site tree, a content well, and a 44px header; the tree nodes carry state bars so a collapsed branch still reports whether anything inside it is out.",
  "modules": [
    {
      "key": "top",
      "name": "Estate header",
      "html": "\n<header class=\"tp\"><span class=\"lg\">Frost Signal</span><nav><a class=\"on\" href=\"#\">Estate</a><a href=\"#\">Excursions</a><a href=\"#\">Reports</a><a href=\"#\">Sensors</a></nav><span class=\"tot\"><b class=\"mn\">142</b> in range <b class=\"mn bad\">6</b> out</span></header>"
    },
    {
      "key": "tree",
      "name": "Site tree",
      "html": "\n<aside class=\"tr\"><span class=\"k\">Sites</span><ul>\n<li><a href=\"#\"><span class=\"bar ok\"></span>Clinic 1<b class=\"mn\">12</b></a></li>\n<li><a href=\"#\"><span class=\"bar ok\"></span>Clinic 2<b class=\"mn\">9</b></a></li>\n<li class=\"on\"><a href=\"#\"><span class=\"bar bad\"></span>Depot 3<b class=\"mn\">41</b></a></li>\n<li class=\"ch\"><a href=\"#\"><span class=\"bar bad\"></span>Kitchen walk-in<b class=\"mn\">1</b></a></li>\n<li class=\"ch\"><a href=\"#\"><span class=\"bar ok\"></span>Chill room A<b class=\"mn\">6</b></a></li>\n<li class=\"ch\"><a href=\"#\"><span class=\"bar ok\"></span>Chill room B<b class=\"mn\">6</b></a></li>\n<li><a href=\"#\"><span class=\"bar ok\"></span>Ward 7<b class=\"mn\">18</b></a></li>\n<li><a href=\"#\"><span class=\"bar bad\"></span>In transit<b class=\"mn\">68</b></a></li>\n</ul></aside>"
    },
    {
      "key": "well",
      "name": "Content well",
      "html": "\n<section class=\"wl\"><header class=\"wh\"><h1>Depot 3</h1><span class=\"mn\">41 sensors · 1 out of range · last poll 12s ago</span></header>\n<div class=\"gr\">\n<article class=\"cd out\"><span class=\"k\">Kitchen walk-in</span><p class=\"big\">9.6</p><span class=\"u\">°C · band 1.0—5.0</span><span class=\"st\"><i style=\"left:20%;right:55%\"></i><u style=\"left:88%\"></u></span></article>\n<article class=\"cd\"><span class=\"k\">Chill room A</span><p class=\"big\">3.2</p><span class=\"u\">°C · band 1.0—5.0</span><span class=\"st\"><i style=\"left:20%;right:20%\"></i><u style=\"left:44%\"></u></span></article>\n<article class=\"cd\"><span class=\"k\">Chill room B</span><p class=\"big\">4.4</p><span class=\"u\">°C · band 1.0—5.0</span><span class=\"st\"><i style=\"left:20%;right:20%\"></i><u style=\"left:62%\"></u></span></article>\n<article class=\"cd\"><span class=\"k\">Freezer 1</span><p class=\"big\">-19.8</p><span class=\"u\">°C · band -22—-16</span><span class=\"st\"><i style=\"left:18%;right:22%\"></i><u style=\"left:50%\"></u></span></article>\n</div></section>"
    }
  ],
  "moduleCount": 3,
  "reorderable": true,
  "meta": {
    "id": "frost-signal-estate",
    "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-estate.json",
  "structure": "A 260px site tree, a content well, and a 44px header; the tree nodes carry state bars so a collapsed branch still reports whether anything inside it is out.",
  "html": "<div class=\"dz dz-frost-signal-estate\" data-design=\"frost-signal-estate\" data-theme=\"frost-signal\">\n<section class=\"dz-mod\" data-mod=\"top\" aria-label=\"Estate header\">\n<header class=\"tp\"><span class=\"lg\">Frost Signal</span><nav><a class=\"on\" href=\"#\">Estate</a><a href=\"#\">Excursions</a><a href=\"#\">Reports</a><a href=\"#\">Sensors</a></nav><span class=\"tot\"><b class=\"mn\">142</b> in range <b class=\"mn bad\">6</b> out</span></header></section>\n<section class=\"dz-mod\" data-mod=\"tree\" aria-label=\"Site tree\">\n<aside class=\"tr\"><span class=\"k\">Sites</span><ul>\n<li><a href=\"#\"><span class=\"bar ok\"></span>Clinic 1<b class=\"mn\">12</b></a></li>\n<li><a href=\"#\"><span class=\"bar ok\"></span>Clinic 2<b class=\"mn\">9</b></a></li>\n<li class=\"on\"><a href=\"#\"><span class=\"bar bad\"></span>Depot 3<b class=\"mn\">41</b></a></li>\n<li class=\"ch\"><a href=\"#\"><span class=\"bar bad\"></span>Kitchen walk-in<b class=\"mn\">1</b></a></li>\n<li class=\"ch\"><a href=\"#\"><span class=\"bar ok\"></span>Chill room A<b class=\"mn\">6</b></a></li>\n<li class=\"ch\"><a href=\"#\"><span class=\"bar ok\"></span>Chill room B<b class=\"mn\">6</b></a></li>\n<li><a href=\"#\"><span class=\"bar ok\"></span>Ward 7<b class=\"mn\">18</b></a></li>\n<li><a href=\"#\"><span class=\"bar bad\"></span>In transit<b class=\"mn\">68</b></a></li>\n</ul></aside></section>\n<section class=\"dz-mod\" data-mod=\"well\" aria-label=\"Content well\">\n<section class=\"wl\"><header class=\"wh\"><h1>Depot 3</h1><span class=\"mn\">41 sensors · 1 out of range · last poll 12s ago</span></header>\n<div class=\"gr\">\n<article class=\"cd out\"><span class=\"k\">Kitchen walk-in</span><p class=\"big\">9.6</p><span class=\"u\">°C · band 1.0—5.0</span><span class=\"st\"><i style=\"left:20%;right:55%\"></i><u style=\"left:88%\"></u></span></article>\n<article class=\"cd\"><span class=\"k\">Chill room A</span><p class=\"big\">3.2</p><span class=\"u\">°C · band 1.0—5.0</span><span class=\"st\"><i style=\"left:20%;right:20%\"></i><u style=\"left:44%\"></u></span></article>\n<article class=\"cd\"><span class=\"k\">Chill room B</span><p class=\"big\">4.4</p><span class=\"u\">°C · band 1.0—5.0</span><span class=\"st\"><i style=\"left:20%;right:20%\"></i><u style=\"left:62%\"></u></span></article>\n<article class=\"cd\"><span class=\"k\">Freezer 1</span><p class=\"big\">-19.8</p><span class=\"u\">°C · band -22—-16</span><span class=\"st\"><i style=\"left:18%;right:22%\"></i><u style=\"left:50%\"></u></span></article>\n</div></section></section>\n</div>",
  "css": "\n.dz-frost-signal-estate { background: var(--background); color: var(--foreground); font-family: var(--pv-body); display: grid; grid-template-columns: 260px 1fr; grid-template-rows: auto 1fr; min-height: 620px; }\n.dz-frost-signal-estate .k { text-transform: uppercase; letter-spacing: .14em; font-size: 10.5px; font-weight: 700; color: var(--muted-foreground); }\n.dz-frost-signal-estate .mn { font-family: var(--pv-mono); font-weight: 500; }\n.dz-frost-signal-estate .tp { grid-column: 1 / -1; display: flex; align-items: center; gap: 26px; height: 52px; padding: 0 22px; border-bottom: 1px solid var(--border); background: var(--card); }\n.dz-frost-signal-estate .lg { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }\n.dz-frost-signal-estate .tp nav { display: flex; gap: 18px; }\n.dz-frost-signal-estate .tp a { color: var(--muted-foreground); text-decoration: none; font-size: 14px; padding-bottom: 2px; }\n.dz-frost-signal-estate .tp a.on { color: var(--foreground); border-bottom: 2px solid var(--primary); }\n.dz-frost-signal-estate .tot { margin-left: auto; font-size: 13px; color: var(--muted-foreground); }\n.dz-frost-signal-estate .tot b { color: var(--foreground); }\n.dz-frost-signal-estate .tot .bad { color: var(--destructive); }\n.dz-frost-signal-estate .tr { border-right: 1px solid var(--border); padding: 18px 14px; }\n.dz-frost-signal-estate .tr ul { list-style: none; margin: 10px 0 0; padding: 0; }\n.dz-frost-signal-estate .tr a { display: flex; align-items: center; gap: 10px; padding: 7px 8px; color: var(--foreground); text-decoration: none; font-size: 14px; border-radius: 3px; }\n.dz-frost-signal-estate .tr li.on > a { background: var(--secondary); }\n.dz-frost-signal-estate .tr li.ch a { padding-left: 24px; font-size: 13px; }\n.dz-frost-signal-estate .tr b { font-family: var(--pv-mono); font-weight: 500; margin-left: auto; color: var(--muted-foreground); font-size: 12px; }\n.dz-frost-signal-estate .bar { width: 4px; height: 16px; border-radius: 2px; background: var(--accent); flex: none; }\n.dz-frost-signal-estate .bar.bad { background: var(--destructive); }\n.dz-frost-signal-estate .wl { padding: 22px; }\n.dz-frost-signal-estate .wh { display: flex; align-items: baseline; gap: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--border); margin-bottom: 20px; }\n.dz-frost-signal-estate h1 { font-size: 30px; font-weight: 600; letter-spacing: -.012em; margin: 0; }\n.dz-frost-signal-estate .wh span { font-family: var(--pv-mono); font-weight: 500; font-size: 12.5px; color: var(--muted-foreground); }\n.dz-frost-signal-estate .gr { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }\n.dz-frost-signal-estate .cd { background: var(--card); border: 1px solid var(--border); border-top: 4px solid var(--accent); border-radius: 5px; padding: 16px; }\n.dz-frost-signal-estate .cd.out { border-top-color: var(--destructive); }\n.dz-frost-signal-estate .big { font-family: var(--pv-mono); font-weight: 500; font-size: 40px; line-height: 1; margin: 8px 0 4px; letter-spacing: -.03em; }\n.dz-frost-signal-estate .cd.out .big { color: var(--destructive); }\n.dz-frost-signal-estate .u { font-family: var(--pv-mono); font-weight: 500; font-size: 11.5px; color: var(--muted-foreground); display: block; margin-bottom: 12px; }\n\n.dz-frost-signal-estate .st { display: block; position: relative; height: 4px; background: var(--secondary); border-radius: 2px; width: 120px; }\n.dz-frost-signal-estate .st i { position: absolute; top: 0; bottom: 0; background: color-mix(in oklab, var(--accent) 45%, transparent); }\n.dz-frost-signal-estate .st u { position: absolute; top: -3px; width: 2px; height: 10px; background: var(--accent); }\n.dz-frost-signal-estate .out .st u { background: var(--destructive); }\n@media (prefers-reduced-motion: reduce) { .dz-frost-signal-estate *, .dz-frost-signal-estate *::before, .dz-frost-signal-estate *::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"
}