{
  "id": "depth-charge-console",
  "name": "Alarm Console",
  "theme": "depth-charge",
  "category": "App Shell",
  "description": "A three-pane alarm shell where the acknowledged and unacknowledged lists are physically separate, so nothing can be silenced by scrolling.",
  "layout": "A 72px system rail, an unacknowledged column that stays fixed at 340px, and the detail pane taking the rest, with a single accept bar spanning all three.",
  "modules": [
    {
      "key": "rail",
      "name": "System rail",
      "html": "\n<nav class=\"rl\"><a class=\"on\" href=\"#\"><b>ME</b><span>2</span></a><a href=\"#\"><b>AE</b><span>0</span></a><a href=\"#\"><b>FUEL</b><span>1</span></a><a href=\"#\"><b>BLG</b><span>0</span></a><a href=\"#\"><b>NAV</b><span>0</span></a><a href=\"#\"><b>CGO</b><span>3</span></a></nav>"
    },
    {
      "key": "unack",
      "name": "Unacknowledged",
      "html": "\n<section class=\"un\"><header><span class=\"k\">Unacknowledged</span><b class=\"ct\">6</b></header>\n<ol>\n  <li class=\"on a\"><span class=\"t\">14:01:44</span><b>ME fuel pressure low</b><span class=\"m\">2.1 bar · limit 2.5 · rising fault</span></li>\n  <li class=\"a\"><span class=\"t\">13:48:02</span><b>Primary filter differential</b><span class=\"m\">0.8 bar · limit 0.6</span></li>\n  <li class=\"w\"><span class=\"t\">13:12:19</span><b>Cargo hold 2 humidity</b><span class=\"m\">78% · limit 70%</span></li>\n  <li class=\"w\"><span class=\"t\">12:04:51</span><b>Cargo hold 3 humidity</b><span class=\"m\">74% · limit 70%</span></li>\n  <li class=\"w\"><span class=\"t\">11:41:08</span><b>Cargo lashing sensor 14</b><span class=\"m\">No signal for 40 min</span></li>\n  <li class=\"w\"><span class=\"t\">09:22:37</span><b>ME jacket water temp</b><span class=\"m\">88 °C · limit 85</span></li>\n</ol></section>"
    },
    {
      "key": "detail",
      "name": "Alarm detail",
      "html": "\n<section class=\"dt\"><header><span class=\"k\">ME · alarm 4412</span><h1>Fuel pressure low</h1></header>\n<div class=\"rdg\"><div><span class=\"k\">Now</span><b>2.1<i>bar</i></b></div><div><span class=\"k\">Limit</span><b>2.5<i>bar</i></b></div><div><span class=\"k\">Falling since</span><b>13:02</b></div><div><span class=\"k\">Rate</span><b>−0.4<i>bar/h</i></b></div></div>\n<div class=\"tl\"><span class=\"k\">Last hour</span><svg viewBox=\"0 0 480 90\" preserveAspectRatio=\"none\" aria-label=\"Fuel pressure last hour\"><line class=\"lim\" x1=\"0\" y1=\"34\" x2=\"480\" y2=\"34\"/><polyline class=\"ln\" points=\"0,20 60,24 120,22 180,30 240,36 300,46 360,56 420,64 480,70\"/></svg></div>\n<div class=\"ck\"><span class=\"k\">Checklist</span><ol><li>Confirm the reading against the local gauge at the engine.</li><li>Check the primary filter differential; 0.8 bar is already in alarm.</li><li>If the differential is high, change over to the standby filter before further investigation.</li><li>Log the changeover time in the engine room log.</li></ol></div></section>"
    },
    {
      "key": "accept",
      "name": "Accept bar",
      "html": "\n<footer class=\"ab\"><span class=\"m\">Accepting silences the audible alarm. It does not clear the condition.</span><button type=\"button\">Accept all</button><button type=\"button\" class=\"go\">Accept this</button></footer>"
    }
  ],
  "moduleCount": 4,
  "reorderable": false,
  "meta": {
    "id": "depth-charge-console",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-09-01T20:13:22+09:00",
    "updatedAt": "2026-09-01T20:13:22+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/depth-charge-console.json",
  "structure": "A 72px system rail, an unacknowledged column that stays fixed at 340px, and the detail pane taking the rest, with a single accept bar spanning all three.",
  "html": "<div class=\"dz dz-depth-charge-console\" data-design=\"depth-charge-console\" data-theme=\"depth-charge\">\n<section class=\"dz-mod\" data-mod=\"rail\" aria-label=\"System rail\">\n<nav class=\"rl\"><a class=\"on\" href=\"#\"><b>ME</b><span>2</span></a><a href=\"#\"><b>AE</b><span>0</span></a><a href=\"#\"><b>FUEL</b><span>1</span></a><a href=\"#\"><b>BLG</b><span>0</span></a><a href=\"#\"><b>NAV</b><span>0</span></a><a href=\"#\"><b>CGO</b><span>3</span></a></nav></section><section class=\"dz-mod\" data-mod=\"unack\" aria-label=\"Unacknowledged\">\n<section class=\"un\"><header><span class=\"k\">Unacknowledged</span><b class=\"ct\">6</b></header>\n<ol>\n  <li class=\"on a\"><span class=\"t\">14:01:44</span><b>ME fuel pressure low</b><span class=\"m\">2.1 bar · limit 2.5 · rising fault</span></li>\n  <li class=\"a\"><span class=\"t\">13:48:02</span><b>Primary filter differential</b><span class=\"m\">0.8 bar · limit 0.6</span></li>\n  <li class=\"w\"><span class=\"t\">13:12:19</span><b>Cargo hold 2 humidity</b><span class=\"m\">78% · limit 70%</span></li>\n  <li class=\"w\"><span class=\"t\">12:04:51</span><b>Cargo hold 3 humidity</b><span class=\"m\">74% · limit 70%</span></li>\n  <li class=\"w\"><span class=\"t\">11:41:08</span><b>Cargo lashing sensor 14</b><span class=\"m\">No signal for 40 min</span></li>\n  <li class=\"w\"><span class=\"t\">09:22:37</span><b>ME jacket water temp</b><span class=\"m\">88 °C · limit 85</span></li>\n</ol></section></section><section class=\"dz-mod\" data-mod=\"detail\" aria-label=\"Alarm detail\">\n<section class=\"dt\"><header><span class=\"k\">ME · alarm 4412</span><h1>Fuel pressure low</h1></header>\n<div class=\"rdg\"><div><span class=\"k\">Now</span><b>2.1<i>bar</i></b></div><div><span class=\"k\">Limit</span><b>2.5<i>bar</i></b></div><div><span class=\"k\">Falling since</span><b>13:02</b></div><div><span class=\"k\">Rate</span><b>−0.4<i>bar/h</i></b></div></div>\n<div class=\"tl\"><span class=\"k\">Last hour</span><svg viewBox=\"0 0 480 90\" preserveAspectRatio=\"none\" aria-label=\"Fuel pressure last hour\"><line class=\"lim\" x1=\"0\" y1=\"34\" x2=\"480\" y2=\"34\"/><polyline class=\"ln\" points=\"0,20 60,24 120,22 180,30 240,36 300,46 360,56 420,64 480,70\"/></svg></div>\n<div class=\"ck\"><span class=\"k\">Checklist</span><ol><li>Confirm the reading against the local gauge at the engine.</li><li>Check the primary filter differential; 0.8 bar is already in alarm.</li><li>If the differential is high, change over to the standby filter before further investigation.</li><li>Log the changeover time in the engine room log.</li></ol></div></section></section><section class=\"dz-mod\" data-mod=\"accept\" aria-label=\"Accept bar\">\n<footer class=\"ab\"><span class=\"m\">Accepting silences the audible alarm. It does not clear the condition.</span><button type=\"button\">Accept all</button><button type=\"button\" class=\"go\">Accept this</button></footer></section>\n</div>",
  "css": "\n.dz-depth-charge-console { background: var(--background); color: var(--foreground); font-family: var(--pv-body); display: grid; grid-template-columns: 72px 340px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 0; min-height: 540px; }\n.dz-depth-charge-console .rl { display: flex; flex-direction: column; background: var(--card); }\n.dz-depth-charge-console .rl a { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 12px 0; text-decoration: none; color: var(--muted-foreground); border-bottom: var(--pv-bw) solid var(--border); }\n.dz-depth-charge-console .rl b { font-family: var(--pv-display); font-size: 13px; font-weight: 600; }\n.dz-depth-charge-console .rl span { font-family: var(--pv-mono); font-feature-settings: \"tnum\" 1; font-size: 11px; }\n.dz-depth-charge-console .rl a.on { background: var(--primary); color: var(--primary-foreground); }\n.dz-depth-charge-console .un { padding: 14px 14px 14px 16px; overflow: auto; }\n.dz-depth-charge-console .un header { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 10px; }\n.dz-depth-charge-console .k { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-foreground); display: block; }\n.dz-depth-charge-console .ct { font-family: var(--pv-mono); font-feature-settings: \"tnum\" 1; font-size: 20px; color: var(--accent); }\n.dz-depth-charge-console .un ol { list-style: none; margin: 0; padding: 0; }\n.dz-depth-charge-console .un li { background: var(--card); border-radius: var(--pv-radius); display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 2px 10px; padding: 10px 12px; margin-bottom: 8px; border-left: 4px solid var(--muted); cursor: pointer; }\n.dz-depth-charge-console .un .a { border-left-color: var(--accent); }\n.dz-depth-charge-console .un .w { border-left-color: var(--primary); }\n.dz-depth-charge-console .un .on { outline: 2px solid var(--primary); outline-offset: -2px; }\n.dz-depth-charge-console .t { grid-row: 1 / 3; font-family: var(--pv-mono); font-feature-settings: \"tnum\" 1; font-size: 11px; color: var(--muted-foreground); padding-top: 2px; }\n.dz-depth-charge-console .un b { font-size: 13.5px; font-weight: 600; }\n.dz-depth-charge-console .m { font-size: 11.5px; line-height: 1.45; color: var(--muted-foreground); }\n.dz-depth-charge-console .dt { padding: 16px 22px 20px; overflow: auto; background: var(--card); }\n.dz-depth-charge-console .dt h1 { font-family: var(--pv-display); font-size: 30px; font-weight: 600; margin: 5px 0 18px; }\n.dz-depth-charge-console .rdg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px; }\n.dz-depth-charge-console .rdg div { background: var(--background); border-radius: var(--pv-radius-md); padding: 11px 14px; }\n.dz-depth-charge-console .rdg b { display: block; font-family: var(--pv-mono); font-feature-settings: \"tnum\" 1; font-size: 24px; margin-top: 4px; }\n.dz-depth-charge-console .rdg b i { font-size: 11px; font-style: normal; color: var(--muted-foreground); margin-left: 3px; }\n.dz-depth-charge-console .tl svg { width: 100%; height: 90px; display: block; margin-top: 8px; }\n.dz-depth-charge-console .lim { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 6 5; }\n.dz-depth-charge-console .ln { fill: none; stroke: var(--primary); stroke-width: 2.5; vector-effect: non-scaling-stroke; }\n.dz-depth-charge-console .ck { margin-top: 20px; }\n.dz-depth-charge-console .ck ol { margin: 8px 0 0; padding: 0 0 0 22px; }\n.dz-depth-charge-console .ck li { font-size: 14px; line-height: 1.55; color: var(--muted-foreground); padding: 4px 0; }\n.dz-depth-charge-console .ab { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; padding: 12px 22px; border-top: var(--pv-bw) solid var(--border); }\n.dz-depth-charge-console .ab .m { flex: 1; }\n.dz-depth-charge-console .ab button { font: inherit; font-size: 13.5px; background: transparent; color: var(--foreground); border: var(--pv-bw) solid var(--border); border-radius: var(--pv-radius-md); padding: 10px 20px; cursor: pointer; }\n.dz-depth-charge-console .go { background: var(--primary) !important; color: var(--primary-foreground) !important; border-color: var(--primary) !important; }\n@media (prefers-reduced-motion: reduce) { .dz-depth-charge-console *, .dz-depth-charge-console *::before, .dz-depth-charge-console *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }",
  "requiredTheme": "/api/v1/themes/depth-charge.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500;600;700&family=Titillium+Web:wght@400;500;600;700&family=Share+Tech+Mono:wght@400;500;600;700&display=swap"
}