{
  "id": "field-survey-dispatch",
  "name": "Dispatch Shell",
  "theme": "field-survey",
  "category": "App Shell",
  "description": "A dispatch frame with a 2px active border and instant state changes, because an eased transition suggests something is being considered and here things either are or are not.",
  "layout": "A 210px sector rail, an addressable queue grid and a unit detail cell; the active region carries a 2px frame and everything else 1px.",
  "modules": [
    {
      "key": "rail",
      "name": "Sector rail",
      "html": "\n<nav class=\"sr\"><span class=\"brand\">Field Survey</span>\n<span class=\"k\">Sectors</span>\n<ul><li><a href=\"#\">Sector 1 <b class=\"n\">4</b></a></li><li><a href=\"#\">Sector 2 <b class=\"n\">9</b></a></li><li class=\"on\"><a href=\"#\">Sector 3 <b class=\"n\">18</b></a></li><li><a href=\"#\">Sector 4 <b class=\"n\">0</b></a></li></ul>\n<span class=\"k\">Resource</span>\n<ul><li><a href=\"#\">Available <b class=\"n\">6</b></a></li><li><a href=\"#\">Standing by <b class=\"n\">2</b></a></li><li><a href=\"#\">Out of service <b class=\"n\">1</b></a></li></ul>\n<div class=\"cl\"><span class=\"k\">Clock</span><span class=\"n big\">09:14:22</span></div></nav>"
    },
    {
      "key": "queue",
      "name": "Task queue",
      "html": "\n<section class=\"tq\"><header><span class=\"rf\">BQ-01</span><h2>Unassigned tasks</h2><span class=\"ct n\">7 waiting</span></header>\n<ol>\n  <li class=\"pri2\"><span class=\"pr\">P1</span><div><b>Evacuation — Riverside Row 14 to 22</b><span class=\"n\">NH 2044 2298 · reported 08:51</span></div><button type=\"button\">Assign</button></li>\n  <li class=\"pri2\"><span class=\"pr\">P1</span><div><b>Pump request — Marsh Lane basement</b><span class=\"n\">NH 2032 2311 · reported 08:44</span></div><button type=\"button\">Assign</button></li>\n  <li><span class=\"pr p2\">P2</span><div><b>Sandbag resupply — Mill Bridge</b><span class=\"n\">NH 2018 2340 · reported 07:44</span></div><button type=\"button\">Assign</button></li>\n  <li><span class=\"pr p2\">P2</span><div><b>Welfare check — Kilcarn Terrace</b><span class=\"n\">NH 1988 2360 · reported 07:20</span></div><button type=\"button\">Assign</button></li>\n  <li><span class=\"pr p3\">P3</span><div><b>Road closure signage — Beckton Way</b><span class=\"n\">NH 2002 2380 · reported 06:58</span></div><button type=\"button\">Assign</button></li>\n</ol></section>"
    },
    {
      "key": "detail",
      "name": "Unit detail",
      "html": "\n<aside class=\"ud\"><header><span class=\"rf\">BQ-02</span><h2>R-118</h2></header>\n<dl>\n  <div><dt>Type</dt><dd>Boat crew, 4 personnel</dd></div>\n  <div><dt>Grid</dt><dd class=\"n\">NH 2044 2298</dd></div>\n  <div><dt>Committed</dt><dd class=\"n\">06:40</dd></div>\n  <div><dt>On task</dt><dd class=\"n\">02:34</dd></div>\n  <div><dt>Fuel</dt><dd class=\"n\">68%</dd></div>\n  <div><dt>Relief due</dt><dd class=\"n\">12:40</dd></div>\n</dl>\n<div class=\"mk\"><span class=\"k\">Marked</span><p>Access via Riverside Row is impassable below the bridge. Crews are going in from the north end only.</p><span class=\"by\">Ops 2 · 08:52</span></div>\n<div class=\"ac\"><button type=\"button\" class=\"pri\">Assign next P1</button><button type=\"button\" class=\"sec\">Stand down</button></div></aside>"
    }
  ],
  "moduleCount": 3,
  "reorderable": false,
  "meta": {
    "id": "field-survey-dispatch",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-09-01T23:58:03+09:00",
    "updatedAt": "2026-09-01T23:58:03+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/field-survey-dispatch.json",
  "structure": "A 210px sector rail, an addressable queue grid and a unit detail cell; the active region carries a 2px frame and everything else 1px.",
  "html": "<div class=\"dz dz-field-survey-dispatch\" data-design=\"field-survey-dispatch\" data-theme=\"field-survey\">\n<section class=\"dz-mod\" data-mod=\"rail\" aria-label=\"Sector rail\">\n<nav class=\"sr\"><span class=\"brand\">Field Survey</span>\n<span class=\"k\">Sectors</span>\n<ul><li><a href=\"#\">Sector 1 <b class=\"n\">4</b></a></li><li><a href=\"#\">Sector 2 <b class=\"n\">9</b></a></li><li class=\"on\"><a href=\"#\">Sector 3 <b class=\"n\">18</b></a></li><li><a href=\"#\">Sector 4 <b class=\"n\">0</b></a></li></ul>\n<span class=\"k\">Resource</span>\n<ul><li><a href=\"#\">Available <b class=\"n\">6</b></a></li><li><a href=\"#\">Standing by <b class=\"n\">2</b></a></li><li><a href=\"#\">Out of service <b class=\"n\">1</b></a></li></ul>\n<div class=\"cl\"><span class=\"k\">Clock</span><span class=\"n big\">09:14:22</span></div></nav></section><section class=\"dz-mod\" data-mod=\"queue\" aria-label=\"Task queue\">\n<section class=\"tq\"><header><span class=\"rf\">BQ-01</span><h2>Unassigned tasks</h2><span class=\"ct n\">7 waiting</span></header>\n<ol>\n  <li class=\"pri2\"><span class=\"pr\">P1</span><div><b>Evacuation — Riverside Row 14 to 22</b><span class=\"n\">NH 2044 2298 · reported 08:51</span></div><button type=\"button\">Assign</button></li>\n  <li class=\"pri2\"><span class=\"pr\">P1</span><div><b>Pump request — Marsh Lane basement</b><span class=\"n\">NH 2032 2311 · reported 08:44</span></div><button type=\"button\">Assign</button></li>\n  <li><span class=\"pr p2\">P2</span><div><b>Sandbag resupply — Mill Bridge</b><span class=\"n\">NH 2018 2340 · reported 07:44</span></div><button type=\"button\">Assign</button></li>\n  <li><span class=\"pr p2\">P2</span><div><b>Welfare check — Kilcarn Terrace</b><span class=\"n\">NH 1988 2360 · reported 07:20</span></div><button type=\"button\">Assign</button></li>\n  <li><span class=\"pr p3\">P3</span><div><b>Road closure signage — Beckton Way</b><span class=\"n\">NH 2002 2380 · reported 06:58</span></div><button type=\"button\">Assign</button></li>\n</ol></section></section><section class=\"dz-mod\" data-mod=\"detail\" aria-label=\"Unit detail\">\n<aside class=\"ud\"><header><span class=\"rf\">BQ-02</span><h2>R-118</h2></header>\n<dl>\n  <div><dt>Type</dt><dd>Boat crew, 4 personnel</dd></div>\n  <div><dt>Grid</dt><dd class=\"n\">NH 2044 2298</dd></div>\n  <div><dt>Committed</dt><dd class=\"n\">06:40</dd></div>\n  <div><dt>On task</dt><dd class=\"n\">02:34</dd></div>\n  <div><dt>Fuel</dt><dd class=\"n\">68%</dd></div>\n  <div><dt>Relief due</dt><dd class=\"n\">12:40</dd></div>\n</dl>\n<div class=\"mk\"><span class=\"k\">Marked</span><p>Access via Riverside Row is impassable below the bridge. Crews are going in from the north end only.</p><span class=\"by\">Ops 2 · 08:52</span></div>\n<div class=\"ac\"><button type=\"button\" class=\"pri\">Assign next P1</button><button type=\"button\" class=\"sec\">Stand down</button></div></aside></section>\n</div>",
  "css": "\n.dz-field-survey-dispatch { background: var(--background); color: var(--foreground); font-family: var(--pv-body); display: grid; grid-template-columns: 210px 1fr 300px; min-height: 640px; }\n.dz-field-survey-dispatch .rf { font-family: var(--pv-mono); font-size: 11px; letter-spacing: .02em; color: var(--muted-foreground); display: block; }\n.dz-field-survey-dispatch .k { text-transform: uppercase; letter-spacing: .2em; font-size: 10px; font-weight: 600; color: var(--muted-foreground); display: block; }\n.dz-field-survey-dispatch .n { font-family: var(--pv-mono); font-variant-numeric: tabular-nums; letter-spacing: .02em; font-size: 12.5px; }\n.dz-field-survey-dispatch .sr { border-right: 1px solid var(--border); padding: 20px 16px; }\n.dz-field-survey-dispatch .brand { font-family: var(--pv-display); text-transform: uppercase; font-weight: 600; letter-spacing: .01em; font-size: 23px; display: block; margin-bottom: 20px; }\n.dz-field-survey-dispatch .sr ul { list-style: none; margin: 8px 0 20px; padding: 0; }\n.dz-field-survey-dispatch .sr a { display: flex; justify-content: space-between; padding: 8px 0; text-decoration: none; color: var(--foreground); font-size: 13.5px; border-bottom: 1px solid var(--border); }\n.dz-field-survey-dispatch .sr li.on a { color: var(--primary); font-weight: 600; }\n.dz-field-survey-dispatch .big { font-size: 22px; display: block; margin-top: 5px; }\n.dz-field-survey-dispatch .tq { border: 2px solid var(--primary); margin: 16px; padding: 16px; }\n.dz-field-survey-dispatch .tq header, .dz-field-survey-dispatch .ud header { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }\n.dz-field-survey-dispatch h2 { font-family: var(--pv-display); text-transform: uppercase; font-weight: 600; letter-spacing: .01em; font-size: 23px; margin: 0; }\n.dz-field-survey-dispatch .ct { margin-left: auto; }\n.dz-field-survey-dispatch .tq ol { list-style: none; margin: 0; padding: 0; }\n.dz-field-survey-dispatch .tq li { display: grid; grid-template-columns: 40px 1fr auto; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--border); }\n.dz-field-survey-dispatch .pr { text-transform: uppercase; letter-spacing: .2em; font-size: 10px; font-weight: 600; color: var(--muted-foreground); border: 2px solid var(--border); text-align: center; padding: 5px 0; }\n.dz-field-survey-dispatch .pri2 .pr { background: var(--destructive); color: var(--destructive-foreground); border-color: var(--destructive); }\n.dz-field-survey-dispatch .p2 { border-color: var(--primary); color: var(--primary); }\n.dz-field-survey-dispatch .tq b { display: block; font-size: 14px; }\n.dz-field-survey-dispatch .tq span:not(.pr) { font-family: var(--pv-mono); font-size: 11px; letter-spacing: .02em; color: var(--muted-foreground); }\n.dz-field-survey-dispatch .tq button { text-transform: uppercase; letter-spacing: .2em; font-size: 10px; font-weight: 600; color: var(--muted-foreground); font-family: var(--pv-body); background: transparent; border: 1px solid var(--border); color: var(--foreground); padding: 8px 14px; cursor: pointer; }\n.dz-field-survey-dispatch .ud { border-left: 1px solid var(--border); padding: 16px; }\n.dz-field-survey-dispatch dl { margin: 0 0 18px; }\n.dz-field-survey-dispatch dl div { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; }\n.dz-field-survey-dispatch dt { text-transform: uppercase; letter-spacing: .2em; font-size: 10px; font-weight: 600; color: var(--muted-foreground); margin: 0; }\n.dz-field-survey-dispatch dd { margin: 0; }\n.dz-field-survey-dispatch .mk { border-left: 3px solid var(--accent); padding-left: 12px; margin-bottom: 18px; }\n.dz-field-survey-dispatch .mk p { margin: 6px 0 5px; font-size: 13px; line-height: 1.5; }\n.dz-field-survey-dispatch .by { text-transform: uppercase; letter-spacing: .2em; font-size: 10px; font-weight: 600; color: var(--muted-foreground); }\n.dz-field-survey-dispatch .ac { display: grid; gap: 8px; }\n.dz-field-survey-dispatch button { font: inherit; text-transform: uppercase; letter-spacing: .2em; font-size: 10px; font-weight: 600; color: var(--muted-foreground); font-family: var(--pv-body); padding: 12px; cursor: pointer; }\n.dz-field-survey-dispatch .pri { background: var(--primary); color: var(--primary-foreground); border: 0; }\n.dz-field-survey-dispatch .sec { background: transparent; color: var(--foreground); border: 2px solid var(--border); }\n",
  "requiredTheme": "/api/v1/themes/field-survey.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@400;500;600;700&family=Work+Sans:wght@400;500;600;700&family=Noto+Sans+Mono:wght@400;500;600;700&display=swap"
}