{
  "id": "reed-bed-console",
  "name": "Catchment Shell",
  "theme": "reed-bed",
  "category": "App Shell",
  "description": "The working frame: a catchment tree on the left, ruled content in the middle, and a filter panel that is the only element in the system allowed a shadow.",
  "layout": "A 240px catchment tree, a ruled content area, and a filter panel overlaying from the right with the system’s single permitted shadow.",
  "modules": [
    {
      "key": "top",
      "name": "Application bar",
      "html": "\n<header class=\"tp\"><span class=\"lg\">Reed Bed</span><nav><a class=\"on\" href=\"#\">Catchments</a><a href=\"#\">Samples</a><a href=\"#\">Returns</a><a href=\"#\">Consents</a></nav><span class=\"usr\">Dr H. Aldwyn</span></header>"
    },
    {
      "key": "tree",
      "name": "Catchment tree",
      "html": "\n<aside class=\"tr\"><span class=\"k\">Catchments</span><ul>\n<li class=\"on\"><a href=\"#\">Kilcarn Water<b class=\"mn\">34</b></a></li>\n<li class=\"ch\"><a href=\"#\">Upper reach<b class=\"mn\">11</b></a></li>\n<li class=\"ch\"><a href=\"#\">Mill reach<b class=\"mn\">14</b></a></li>\n<li class=\"ch\"><a href=\"#\">Estuary<b class=\"mn\">9</b></a></li>\n<li><a href=\"#\">Aughrim<b class=\"mn\">22</b></a></li>\n<li><a href=\"#\">Beech Hollow<b class=\"mn\">8</b></a></li>\n<li><a href=\"#\">Coastal bathing<b class=\"mn\">17</b></a></li>\n</ul></aside>"
    },
    {
      "key": "body",
      "name": "Ruled content",
      "html": "\n<section class=\"bd\"><header class=\"bh\"><h1>Mill reach</h1><span class=\"mn\">14 sites · 2 open exceedances</span><button class=\"fb\">Filters</button></header>\n<div class=\"rw\"><span class=\"nm\">Mill Weir</span><span class=\"lv\"><span class=\"tk\"><i class=\"bd2\" style=\"left:0;right:38%\"></i><u class=\"mk\" style=\"left:36%\"></u></span><b class=\"fig\">22.7</b><em class=\"un\">mg/l NO₃</em></span><span class=\"dt2 mn\">12 Mar 06:20</span></div>\n<div class=\"rw\"><span class=\"nm\">Mill Pool</span><span class=\"lv\"><span class=\"tk\"><i class=\"bd2\" style=\"left:0;right:38%\"></i><u class=\"mk\" style=\"left:41%\"></u></span><b class=\"fig\">25.8</b><em class=\"un\">mg/l NO₃</em></span><span class=\"dt2 mn\">12 Mar 06:24</span></div>\n<div class=\"rw over\"><span class=\"nm\">Ford Lane outfall</span><span class=\"lv\"><span class=\"tk\"><i class=\"bd2\" style=\"left:0;right:38%\"></i><u class=\"mk\" style=\"left:81%\"></u></span><b class=\"fig\">51.4</b><em class=\"un\">mg/l NO₃</em></span><span class=\"dt2 mn\">12 Mar 06:31</span></div>\n<div class=\"rw\"><span class=\"nm\">Sluice head</span><span class=\"lv\"><span class=\"tk\"><i class=\"bd2\" style=\"left:0;right:38%\"></i><u class=\"mk\" style=\"left:29%\"></u></span><b class=\"fig\">18.4</b><em class=\"un\">mg/l NO₃</em></span><span class=\"dt2 mn\">12 Mar 06:38</span></div>\n</section>"
    },
    {
      "key": "panel",
      "name": "Filter panel",
      "html": "\n<aside class=\"fp\"><span class=\"k\">Filters</span><div class=\"fg\"><span class=\"k\">Determinand</span><label><input type=\"checkbox\" checked> Nitrate</label><label><input type=\"checkbox\"> Orthophosphate</label><label><input type=\"checkbox\"> Turbidity</label></div><div class=\"fg\"><span class=\"k\">Show</span><label><input type=\"checkbox\" checked> Exceedances only within band context</label><label><input type=\"checkbox\" checked> Include provisional results</label></div><button class=\"ap\">Apply</button></aside>"
    }
  ],
  "moduleCount": 4,
  "reorderable": true,
  "meta": {
    "id": "reed-bed-console",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-09-02T01:12:17+09:00",
    "updatedAt": "2026-09-02T01:12:17+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/reed-bed-console.json",
  "structure": "A 240px catchment tree, a ruled content area, and a filter panel overlaying from the right with the system’s single permitted shadow.",
  "html": "<div class=\"dz dz-reed-bed-console\" data-design=\"reed-bed-console\" data-theme=\"reed-bed\">\n<section class=\"dz-mod\" data-mod=\"top\" aria-label=\"Application bar\">\n<header class=\"tp\"><span class=\"lg\">Reed Bed</span><nav><a class=\"on\" href=\"#\">Catchments</a><a href=\"#\">Samples</a><a href=\"#\">Returns</a><a href=\"#\">Consents</a></nav><span class=\"usr\">Dr H. Aldwyn</span></header></section>\n<section class=\"dz-mod\" data-mod=\"tree\" aria-label=\"Catchment tree\">\n<aside class=\"tr\"><span class=\"k\">Catchments</span><ul>\n<li class=\"on\"><a href=\"#\">Kilcarn Water<b class=\"mn\">34</b></a></li>\n<li class=\"ch\"><a href=\"#\">Upper reach<b class=\"mn\">11</b></a></li>\n<li class=\"ch\"><a href=\"#\">Mill reach<b class=\"mn\">14</b></a></li>\n<li class=\"ch\"><a href=\"#\">Estuary<b class=\"mn\">9</b></a></li>\n<li><a href=\"#\">Aughrim<b class=\"mn\">22</b></a></li>\n<li><a href=\"#\">Beech Hollow<b class=\"mn\">8</b></a></li>\n<li><a href=\"#\">Coastal bathing<b class=\"mn\">17</b></a></li>\n</ul></aside></section>\n<section class=\"dz-mod\" data-mod=\"body\" aria-label=\"Ruled content\">\n<section class=\"bd\"><header class=\"bh\"><h1>Mill reach</h1><span class=\"mn\">14 sites · 2 open exceedances</span><button class=\"fb\">Filters</button></header>\n<div class=\"rw\"><span class=\"nm\">Mill Weir</span><span class=\"lv\"><span class=\"tk\"><i class=\"bd2\" style=\"left:0;right:38%\"></i><u class=\"mk\" style=\"left:36%\"></u></span><b class=\"fig\">22.7</b><em class=\"un\">mg/l NO₃</em></span><span class=\"dt2 mn\">12 Mar 06:20</span></div>\n<div class=\"rw\"><span class=\"nm\">Mill Pool</span><span class=\"lv\"><span class=\"tk\"><i class=\"bd2\" style=\"left:0;right:38%\"></i><u class=\"mk\" style=\"left:41%\"></u></span><b class=\"fig\">25.8</b><em class=\"un\">mg/l NO₃</em></span><span class=\"dt2 mn\">12 Mar 06:24</span></div>\n<div class=\"rw over\"><span class=\"nm\">Ford Lane outfall</span><span class=\"lv\"><span class=\"tk\"><i class=\"bd2\" style=\"left:0;right:38%\"></i><u class=\"mk\" style=\"left:81%\"></u></span><b class=\"fig\">51.4</b><em class=\"un\">mg/l NO₃</em></span><span class=\"dt2 mn\">12 Mar 06:31</span></div>\n<div class=\"rw\"><span class=\"nm\">Sluice head</span><span class=\"lv\"><span class=\"tk\"><i class=\"bd2\" style=\"left:0;right:38%\"></i><u class=\"mk\" style=\"left:29%\"></u></span><b class=\"fig\">18.4</b><em class=\"un\">mg/l NO₃</em></span><span class=\"dt2 mn\">12 Mar 06:38</span></div>\n</section></section>\n<section class=\"dz-mod\" data-mod=\"panel\" aria-label=\"Filter panel\">\n<aside class=\"fp\"><span class=\"k\">Filters</span><div class=\"fg\"><span class=\"k\">Determinand</span><label><input type=\"checkbox\" checked> Nitrate</label><label><input type=\"checkbox\"> Orthophosphate</label><label><input type=\"checkbox\"> Turbidity</label></div><div class=\"fg\"><span class=\"k\">Show</span><label><input type=\"checkbox\" checked> Exceedances only within band context</label><label><input type=\"checkbox\" checked> Include provisional results</label></div><button class=\"ap\">Apply</button></aside></section>\n</div>",
  "css": "\n.dz-reed-bed-console { background: var(--background); color: var(--foreground); font-family: var(--pv-body); display: grid; grid-template-columns: 240px 1fr 300px; grid-template-rows: auto 1fr; min-height: 620px; position: relative; }\n.dz-reed-bed-console .k { text-transform: uppercase; letter-spacing: .15em; font-size: 10.5px; font-weight: 600; color: var(--muted-foreground); }\n.dz-reed-bed-console .mn { font-family: var(--pv-mono); font-size: 12.5px; }\n.dz-reed-bed-console .tp { grid-column: 1 / -1; display: flex; align-items: center; gap: 26px; height: 52px; padding: 0 24px; border-bottom: 1px solid var(--border); background: var(--card); }\n.dz-reed-bed-console .lg { font-family: var(--pv-display); font-weight: 600; font-size: 19px; }\n.dz-reed-bed-console .tp nav { display: flex; gap: 18px; }\n.dz-reed-bed-console .tp a { color: var(--muted-foreground); text-decoration: none; font-size: 14px; padding-bottom: 2px; }\n.dz-reed-bed-console .tp a.on { color: var(--foreground); border-bottom: 2px solid var(--primary); }\n.dz-reed-bed-console .usr { font-family: var(--pv-mono); font-size: 12.5px; color: var(--muted-foreground); margin-left: auto; }\n.dz-reed-bed-console .tr { border-right: 1px solid var(--border); padding: 18px 14px; }\n.dz-reed-bed-console .tr ul { list-style: none; margin: 10px 0 0; padding: 0; }\n.dz-reed-bed-console .tr a { display: flex; padding: 6px 8px; color: var(--foreground); text-decoration: none; font-size: 14px; border-radius: 2px; }\n.dz-reed-bed-console .tr li.on > a { background: var(--secondary); }\n.dz-reed-bed-console .tr li.ch a { padding-left: 22px; font-size: 13px; }\n.dz-reed-bed-console .tr b { margin-left: auto; color: var(--muted-foreground); font-weight: 400; }\n.dz-reed-bed-console .bd { padding: 20px 24px; }\n.dz-reed-bed-console .bh { display: flex; align-items: baseline; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }\n.dz-reed-bed-console h1 { font-family: var(--pv-display); font-weight: 600; font-size: 29px; margin: 0; }\n.dz-reed-bed-console .bh .mn { color: var(--muted-foreground); }\n.dz-reed-bed-console .fb { margin-left: auto; background: transparent; border: 1px solid var(--border); border-radius: 2px; color: var(--foreground); font: inherit; font-size: 13px; padding: 7px 14px; cursor: pointer; }\n.dz-reed-bed-console .rw { display: grid; grid-template-columns: 1fr 300px 140px; gap: 16px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--border); }\n.dz-reed-bed-console .nm { font-size: 14.5px; }\n.dz-reed-bed-console .dt2 { color: var(--muted-foreground); }\n\n.dz-reed-bed-console .lv { display: flex; align-items: center; gap: 10px; }\n.dz-reed-bed-console .tk { position: relative; width: 140px; height: 6px; background: var(--secondary); border-radius: 3px; }\n.dz-reed-bed-console .bd2 { position: absolute; top: 0; bottom: 0; background: color-mix(in oklab, var(--accent) 30%, transparent); border-radius: 3px; }\n.dz-reed-bed-console .mk { position: absolute; top: -4px; width: 3px; height: 14px; background: var(--accent); border-radius: 1px; }\n.dz-reed-bed-console .over .mk { background: var(--destructive); }\n.dz-reed-bed-console .fig { font-family: var(--pv-mono); font-size: 12.5px; }\n.dz-reed-bed-console .over .fig { color: var(--destructive); }\n.dz-reed-bed-console .un { font-size: 13px; color: var(--muted-foreground); }\n.dz-reed-bed-console .fp { border-left: 1px solid var(--border); background: var(--card); padding: 18px 16px; box-shadow: -14px 0 34px -20px color-mix(in oklab, var(--foreground) 55%, transparent); }\n.dz-reed-bed-console .fg { margin-top: 18px; }\n.dz-reed-bed-console .fg .k { display: block; margin-bottom: 8px; }\n.dz-reed-bed-console .fg label { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; line-height: 1.5; padding: 5px 0; }\n.dz-reed-bed-console .ap { width: 100%; margin-top: 20px; background: var(--primary); color: var(--primary-foreground); border: 0; border-radius: 2px; padding: 10px; font: inherit; cursor: pointer; }\n@media (prefers-reduced-motion: reduce) { .dz-reed-bed-console *, .dz-reed-bed-console *::before, .dz-reed-bed-console *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }\n",
  "requiredTheme": "/api/v1/themes/reed-bed.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Petrona:wght@400;500;600;700&family=Asap:wght@400;500;600;700&family=Cousine:wght@400;500;600;700&display=swap"
}