{
  "id": "meter-room-shell",
  "name": "Building Shell",
  "theme": "meter-room",
  "category": "App Shell",
  "description": "The navigation frame where the meter tree carries live values in Geist Mono and the declared scale for the current unit is stated in the header.",
  "layout": "A 260px meter tree with mono values, a content well of uniform tiles, and a header that names the fixed ceiling rather than hiding it in settings.",
  "modules": [
    {
      "key": "bar",
      "name": "Top bar",
      "html": "\n<header class=\"bb\"><span class=\"lg\">Meter Room</span><nav><a class=\"on\" href=\"#\">Wall</a><a href=\"#\">Compare</a><a href=\"#\">Reports</a><a href=\"#\">Tariffs</a></nav><span class=\"sc mn\">SCALE FOR kW · 0—250 · DECLARED IN THEME</span></header>"
    },
    {
      "key": "tree",
      "name": "Meter tree",
      "html": "\n<aside class=\"tr\"><span class=\"k\">Meters</span>\n<div class=\"gp\">Block A</div>\n<a class=\"on\" href=\"#\"><span>Main incomer</span><b>184 kW</b></a>\n<a href=\"#\"><span>Lighting</span><b>31 kW</b></a>\n<a href=\"#\"><span>Small power</span><b>28 kW</b></a>\n<div class=\"gp\">Block B</div>\n<a href=\"#\"><span>Main incomer</span><b>92 kW</b></a>\n<a href=\"#\"><span>Kitchen ring</span><b class=\"bad\">268 kW</b></a>\n<div class=\"gp\">Plant</div>\n<a href=\"#\"><span>Chiller</span><b>96 kW</b></a>\n<a href=\"#\"><span>AHU 1—4</span><b>42 kW</b></a>\n<a href=\"#\"><span>Server room</span><b>44 kW</b></a>\n<div class=\"gp\">Gas</div>\n<a href=\"#\"><span>Boiler house</span><b>310 kW</b></a>\n</aside>"
    },
    {
      "key": "well",
      "name": "Content well",
      "html": "\n<section class=\"wl\"><header class=\"wh\"><h1>Block A · main incomer</h1><span class=\"mn\">MPAN 1900011234567 · CT RATIO 400/5 · POLLED 30s AGO</span></header>\n<div class=\"gd\"><article class=\"tl\"><span class=\"k\">Now</span><p class=\"big\">184<small>kW</small></p></article><article class=\"tl\"><span class=\"k\">Today</span><p class=\"big\">2,411<small>kWh</small></p></article><article class=\"tl\"><span class=\"k\">Peak today</span><p class=\"big\">201<small>kW</small></p></article><article class=\"tl\"><span class=\"k\">Load factor</span><p class=\"big\">0.55</p></article></div>\n<article class=\"tl wide\"><span class=\"k\">24 hours, fixed scale 0—250 kW</span><div class=\"row\"><div class=\"yl\"><span>250</span><span>125</span><span>0</span></div><div class=\"ch\"><span class=\"gl\" style=\"top:50%\"></span><svg viewBox=\"0 0 400 96\" preserveAspectRatio=\"none\"><polyline points=\"0,54 50,50 100,42 150,32 200,24 250,28 300,36 350,46 400,50\"/></svg></div></div><div class=\"ax\"><span>00:00</span><span>06:00</span><span>12:00</span><span>18:00</span><span>24:00</span></div></article></section>"
    }
  ],
  "moduleCount": 3,
  "reorderable": true,
  "meta": {
    "id": "meter-room-shell",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-09-02T01:44:43+09:00",
    "updatedAt": "2026-09-02T01:44:43+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/meter-room-shell.json",
  "structure": "A 260px meter tree with mono values, a content well of uniform tiles, and a header that names the fixed ceiling rather than hiding it in settings.",
  "html": "<div class=\"dz dz-meter-room-shell\" data-design=\"meter-room-shell\" data-theme=\"meter-room\">\n<section class=\"dz-mod\" data-mod=\"bar\" aria-label=\"Top bar\">\n<header class=\"bb\"><span class=\"lg\">Meter Room</span><nav><a class=\"on\" href=\"#\">Wall</a><a href=\"#\">Compare</a><a href=\"#\">Reports</a><a href=\"#\">Tariffs</a></nav><span class=\"sc mn\">SCALE FOR kW · 0—250 · DECLARED IN THEME</span></header></section>\n<section class=\"dz-mod\" data-mod=\"tree\" aria-label=\"Meter tree\">\n<aside class=\"tr\"><span class=\"k\">Meters</span>\n<div class=\"gp\">Block A</div>\n<a class=\"on\" href=\"#\"><span>Main incomer</span><b>184 kW</b></a>\n<a href=\"#\"><span>Lighting</span><b>31 kW</b></a>\n<a href=\"#\"><span>Small power</span><b>28 kW</b></a>\n<div class=\"gp\">Block B</div>\n<a href=\"#\"><span>Main incomer</span><b>92 kW</b></a>\n<a href=\"#\"><span>Kitchen ring</span><b class=\"bad\">268 kW</b></a>\n<div class=\"gp\">Plant</div>\n<a href=\"#\"><span>Chiller</span><b>96 kW</b></a>\n<a href=\"#\"><span>AHU 1—4</span><b>42 kW</b></a>\n<a href=\"#\"><span>Server room</span><b>44 kW</b></a>\n<div class=\"gp\">Gas</div>\n<a href=\"#\"><span>Boiler house</span><b>310 kW</b></a>\n</aside></section>\n<section class=\"dz-mod\" data-mod=\"well\" aria-label=\"Content well\">\n<section class=\"wl\"><header class=\"wh\"><h1>Block A · main incomer</h1><span class=\"mn\">MPAN 1900011234567 · CT RATIO 400/5 · POLLED 30s AGO</span></header>\n<div class=\"gd\"><article class=\"tl\"><span class=\"k\">Now</span><p class=\"big\">184<small>kW</small></p></article><article class=\"tl\"><span class=\"k\">Today</span><p class=\"big\">2,411<small>kWh</small></p></article><article class=\"tl\"><span class=\"k\">Peak today</span><p class=\"big\">201<small>kW</small></p></article><article class=\"tl\"><span class=\"k\">Load factor</span><p class=\"big\">0.55</p></article></div>\n<article class=\"tl wide\"><span class=\"k\">24 hours, fixed scale 0—250 kW</span><div class=\"row\"><div class=\"yl\"><span>250</span><span>125</span><span>0</span></div><div class=\"ch\"><span class=\"gl\" style=\"top:50%\"></span><svg viewBox=\"0 0 400 96\" preserveAspectRatio=\"none\"><polyline points=\"0,54 50,50 100,42 150,32 200,24 250,28 300,36 350,46 400,50\"/></svg></div></div><div class=\"ax\"><span>00:00</span><span>06:00</span><span>12:00</span><span>18:00</span><span>24:00</span></div></article></section></section>\n</div>",
  "css": "\n.dz-meter-room-shell { 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: 600px; }\n.dz-meter-room-shell .k { text-transform: uppercase; letter-spacing: .14em; font-size: 10px; font-weight: 600; color: var(--muted-foreground); display: block; }\n.dz-meter-room-shell .mn { font-family: var(--pv-mono); font-size: 12.5px; letter-spacing: .01em; }\n.dz-meter-room-shell .bb { grid-column: 1 / -1; display: flex; align-items: center; gap: 22px; height: 50px; padding: 0 22px; border-bottom: 1px solid var(--border); background: var(--card); }\n.dz-meter-room-shell .lg { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }\n.dz-meter-room-shell .bb nav { display: flex; gap: 16px; }\n.dz-meter-room-shell .bb a { text-transform: uppercase; letter-spacing: .14em; font-size: 10px; font-weight: 600; color: var(--muted-foreground); text-decoration: none; padding-bottom: 3px; }\n.dz-meter-room-shell .bb a.on { color: var(--primary); border-bottom: 2px solid var(--primary); }\n.dz-meter-room-shell .sc { color: var(--muted-foreground); margin-left: auto; font-size: 10px; text-transform: uppercase; letter-spacing: .14em; font-size: 10px; font-weight: 600; }\n.dz-meter-room-shell .tr { border-right: 1px solid var(--border); padding: 16px 12px; }\n.dz-meter-room-shell .tr a { display: flex; gap: 10px; padding: 7px 8px; color: var(--foreground); text-decoration: none; font-size: 13.5px; border-radius: 3px; }\n.dz-meter-room-shell .tr a.on { background: var(--secondary); }\n.dz-meter-room-shell .tr b { font-family: var(--pv-mono); font-size: 12.5px; letter-spacing: .01em; margin-left: auto; font-weight: 400; font-size: 12px; }\n.dz-meter-room-shell .bad { color: var(--accent); }\n.dz-meter-room-shell .gp { text-transform: uppercase; letter-spacing: .14em; font-size: 10px; font-weight: 600; color: var(--primary); padding: 14px 0 6px; }\n.dz-meter-room-shell .wl { padding: 18px 22px; }\n.dz-meter-room-shell .wh { display: flex; align-items: baseline; gap: 18px; padding-bottom: 12px; border-bottom: 1px solid var(--border); margin-bottom: 14px; }\n.dz-meter-room-shell h1 { font-size: 29px; font-weight: 600; letter-spacing: -.012em; margin: 0; }\n.dz-meter-room-shell .wh .mn { color: var(--muted-foreground); font-size: 10.5px; text-transform: uppercase; letter-spacing: .14em; font-size: 10px; font-weight: 600; }\n.dz-meter-room-shell .gd { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 14px; }\n.dz-meter-room-shell .tl { background: var(--card); border: 1px solid var(--border); border-radius: 4px; padding: 16px; }\n.dz-meter-room-shell .big { font-family: var(--pv-mono); font-size: 12.5px; letter-spacing: .01em; font-size: 54px; line-height: 1; margin: 10px 0 0; letter-spacing: -.03em; }\n.dz-meter-room-shell .big small { font-size: 18px; margin-left: 4px; color: var(--muted-foreground); }\n.dz-meter-room-shell .row { display: grid; grid-template-columns: 30px 1fr; gap: 8px; margin-top: 12px; }\n\n.dz-meter-room-shell .ch { position: relative; height: 96px; border-left: 1px solid var(--border); border-bottom: 1px solid var(--border); }\n.dz-meter-room-shell .ch .gl { position: absolute; left: 0; right: 0; border-top: 1px dashed color-mix(in oklab, var(--muted-foreground) 40%, transparent); }\n.dz-meter-room-shell .ch svg { position: absolute; inset: 0; width: 100%; height: 100%; }\n.dz-meter-room-shell .ch polyline { fill: none; stroke: var(--primary); stroke-width: 1.5; vector-effect: non-scaling-stroke; }\n.dz-meter-room-shell .ch polyline.clip { stroke: var(--accent); stroke-width: 3; }\n.dz-meter-room-shell .ch .cap { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--accent); }\n.dz-meter-room-shell .ax { display: flex; justify-content: space-between; font-family: var(--pv-mono); font-size: 12.5px; letter-spacing: .01em; font-size: 10px; color: var(--muted-foreground); margin-top: 5px; }\n.dz-meter-room-shell .yl { font-family: var(--pv-mono); font-size: 12.5px; letter-spacing: .01em; font-size: 10px; color: var(--muted-foreground); display: flex; flex-direction: column; justify-content: space-between; height: 96px; text-align: right; }\n@media (prefers-reduced-motion: reduce) { .dz-meter-room-shell *, .dz-meter-room-shell *::before, .dz-meter-room-shell *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }\n",
  "requiredTheme": "/api/v1/themes/meter-room.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Familjen+Grotesk:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600;700&display=swap"
}