{
  "id": "depth-charge-limits",
  "name": "Limit Editor",
  "theme": "depth-charge",
  "category": "Settings & Forms",
  "description": "A limit editor where every threshold you type is drawn onto a live histogram of the last month, so an impossible limit is visible before you save it.",
  "layout": "A 560px form column beside a sticky histogram panel that redraws the proposed limit as a line, with the affected-alarm count as the last row of the form.",
  "modules": [
    {
      "key": "head",
      "name": "Header",
      "html": "\n<header class=\"hd\"><span class=\"k\">ME · fuel system</span><h1>Fuel pressure limits</h1><p>Limits apply to this vessel only. Fleet defaults are set by the technical superintendent.</p></header>"
    },
    {
      "key": "form",
      "name": "Limit form",
      "html": "\n<form class=\"fm\">\n  <label><span class=\"k\">Low warning</span><div class=\"ip\"><input type=\"text\" value=\"2.8\"><em>bar</em></div></label>\n  <label><span class=\"k\">Low alarm</span><div class=\"ip\"><input type=\"text\" value=\"2.5\"><em>bar</em></div></label>\n  <label><span class=\"k\">Low shutdown</span><div class=\"ip\"><input type=\"text\" value=\"1.8\"><em>bar</em></div></label>\n  <label><span class=\"k\">Delay before alarm</span><div class=\"ip\"><input type=\"text\" value=\"30\"><em>s</em></div></label>\n  <label class=\"ck\"><input type=\"checkbox\" checked><span>Suppress while the engine is stopped</span></label>\n  <label class=\"ck\"><input type=\"checkbox\"><span>Escalate to shore if unacknowledged for 10 minutes</span></label>\n</form>"
    },
    {
      "key": "hist",
      "name": "Histogram",
      "html": "\n<aside class=\"hs\"><span class=\"k\">Observed, last 30 days</span>\n<div class=\"bars\"><i style=\"--h:4%\"></i><i style=\"--h:8%\"></i><i style=\"--h:16%\"></i><i style=\"--h:34%\"></i><i style=\"--h:62%\"></i><i style=\"--h:88%\"></i><i style=\"--h:100%\"></i><i style=\"--h:82%\"></i><i style=\"--h:54%\"></i><i style=\"--h:28%\"></i><i style=\"--h:12%\"></i><i style=\"--h:5%\"></i>\n  <span class=\"lim\" style=\"--x:22%\"></span><span class=\"lim2\" style=\"--x:14%\"></span></div>\n<footer><span class=\"m\">1.5</span><span class=\"m\">bar</span><span class=\"m\">4.5</span></footer>\n<div class=\"cnt\"><span class=\"k\">With these limits</span><b>14</b><span class=\"m\">alarms would have fired in the last 30 days. The current limits produced 6.</span></div></aside>"
    },
    {
      "key": "save",
      "name": "Save bar",
      "html": "\n<footer class=\"sv\"><span class=\"m\">Changing a shutdown limit requires the chief engineer's confirmation at the next watch handover.</span><button type=\"button\">Discard</button><button type=\"button\" class=\"go\">Save limits</button></footer>"
    }
  ],
  "moduleCount": 4,
  "reorderable": false,
  "meta": {
    "id": "depth-charge-limits",
    "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-limits.json",
  "structure": "A 560px form column beside a sticky histogram panel that redraws the proposed limit as a line, with the affected-alarm count as the last row of the form.",
  "html": "<div class=\"dz dz-depth-charge-limits\" data-design=\"depth-charge-limits\" data-theme=\"depth-charge\">\n<section class=\"dz-mod\" data-mod=\"head\" aria-label=\"Header\">\n<header class=\"hd\"><span class=\"k\">ME · fuel system</span><h1>Fuel pressure limits</h1><p>Limits apply to this vessel only. Fleet defaults are set by the technical superintendent.</p></header></section><section class=\"dz-mod\" data-mod=\"form\" aria-label=\"Limit form\">\n<form class=\"fm\">\n  <label><span class=\"k\">Low warning</span><div class=\"ip\"><input type=\"text\" value=\"2.8\"><em>bar</em></div></label>\n  <label><span class=\"k\">Low alarm</span><div class=\"ip\"><input type=\"text\" value=\"2.5\"><em>bar</em></div></label>\n  <label><span class=\"k\">Low shutdown</span><div class=\"ip\"><input type=\"text\" value=\"1.8\"><em>bar</em></div></label>\n  <label><span class=\"k\">Delay before alarm</span><div class=\"ip\"><input type=\"text\" value=\"30\"><em>s</em></div></label>\n  <label class=\"ck\"><input type=\"checkbox\" checked><span>Suppress while the engine is stopped</span></label>\n  <label class=\"ck\"><input type=\"checkbox\"><span>Escalate to shore if unacknowledged for 10 minutes</span></label>\n</form></section><section class=\"dz-mod\" data-mod=\"hist\" aria-label=\"Histogram\">\n<aside class=\"hs\"><span class=\"k\">Observed, last 30 days</span>\n<div class=\"bars\"><i style=\"--h:4%\"></i><i style=\"--h:8%\"></i><i style=\"--h:16%\"></i><i style=\"--h:34%\"></i><i style=\"--h:62%\"></i><i style=\"--h:88%\"></i><i style=\"--h:100%\"></i><i style=\"--h:82%\"></i><i style=\"--h:54%\"></i><i style=\"--h:28%\"></i><i style=\"--h:12%\"></i><i style=\"--h:5%\"></i>\n  <span class=\"lim\" style=\"--x:22%\"></span><span class=\"lim2\" style=\"--x:14%\"></span></div>\n<footer><span class=\"m\">1.5</span><span class=\"m\">bar</span><span class=\"m\">4.5</span></footer>\n<div class=\"cnt\"><span class=\"k\">With these limits</span><b>14</b><span class=\"m\">alarms would have fired in the last 30 days. The current limits produced 6.</span></div></aside></section><section class=\"dz-mod\" data-mod=\"save\" aria-label=\"Save bar\">\n<footer class=\"sv\"><span class=\"m\">Changing a shutdown limit requires the chief engineer's confirmation at the next watch handover.</span><button type=\"button\">Discard</button><button type=\"button\" class=\"go\">Save limits</button></footer></section>\n</div>",
  "css": "\n.dz-depth-charge-limits { background: var(--background); color: var(--foreground); font-family: var(--pv-body); display: grid; grid-template-columns: minmax(0, 560px) 320px; justify-content: center; column-gap: 26px; padding: 24px 24px 24px; align-content: start; }\n.dz-depth-charge-limits .hd { grid-column: 1 / 2; margin-bottom: 18px; }\n.dz-depth-charge-limits .k { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-foreground); display: block; }\n.dz-depth-charge-limits .hd h1 { font-family: var(--pv-display); font-size: 32px; font-weight: 600; margin: 6px 0 8px; }\n.dz-depth-charge-limits .hd p { font-size: 14px; color: var(--muted-foreground); margin: 0; }\n.dz-depth-charge-limits .fm { grid-column: 1 / 2; display: flex; flex-direction: column; gap: 14px; }\n.dz-depth-charge-limits label { display: flex; flex-direction: column; gap: 7px; }\n.dz-depth-charge-limits .ip { display: flex; align-items: center; gap: 10px; background: var(--card); border-radius: var(--pv-radius); padding: 4px 14px 4px 4px; }\n.dz-depth-charge-limits .ip input { font: inherit; font-family: var(--pv-mono); font-feature-settings: \"tnum\" 1; font-size: 18px; background: var(--background); color: var(--foreground); border: 0; border-radius: var(--pv-radius-sm); padding: 10px 12px; width: 120px; }\n.dz-depth-charge-limits .ip input:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }\n.dz-depth-charge-limits .ip em { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-foreground); font-style: normal; }\n.dz-depth-charge-limits .ck { flex-direction: row; align-items: center; gap: 11px; font-size: 14px; color: var(--muted-foreground); }\n.dz-depth-charge-limits .ck input { width: 16px; height: 16px; accent-color: var(--primary); }\n.dz-depth-charge-limits .hs { grid-column: 2 / 3; grid-row: 1 / 3; background: var(--card); border-radius: var(--pv-radius); padding: 16px 18px 18px; align-self: start; position: sticky; top: 20px; }\n.dz-depth-charge-limits .bars { position: relative; display: flex; align-items: flex-end; gap: 4px; height: 130px; margin: 12px 0 6px; }\n.dz-depth-charge-limits .bars i { flex: 1; height: var(--h); background: color-mix(in srgb, var(--primary) 38%, transparent); border-radius: 2px 2px 0 0; display: block; }\n.dz-depth-charge-limits .lim { position: absolute; left: var(--x); top: -6px; bottom: 0; width: 2px; background: var(--accent); }\n.dz-depth-charge-limits .lim2 { position: absolute; left: var(--x); top: -6px; bottom: 0; width: 2px; background: var(--destructive); }\n.dz-depth-charge-limits .hs footer { display: flex; justify-content: space-between; }\n.dz-depth-charge-limits .m { font-size: 11.5px; line-height: 1.5; color: var(--muted-foreground); }\n.dz-depth-charge-limits .cnt { margin-top: 16px; padding-top: 14px; border-top: var(--pv-bw) solid var(--border); }\n.dz-depth-charge-limits .cnt b { display: block; font-family: var(--pv-mono); font-feature-settings: \"tnum\" 1; font-size: 34px; color: var(--accent); margin: 4px 0 4px; }\n.dz-depth-charge-limits .sv { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; margin-top: 22px; padding-top: 16px; border-top: var(--pv-bw) solid var(--border); }\n.dz-depth-charge-limits .sv .m { flex: 1; }\n.dz-depth-charge-limits .sv button { font: inherit; font-size: 14px; background: transparent; color: var(--foreground); border: var(--pv-bw) solid var(--border); border-radius: var(--pv-radius-md); padding: 11px 22px; cursor: pointer; }\n.dz-depth-charge-limits .go { background: var(--primary) !important; color: var(--primary-foreground) !important; border-color: var(--primary) !important; }\n@media (prefers-reduced-motion: reduce) { .dz-depth-charge-limits *, .dz-depth-charge-limits *::before, .dz-depth-charge-limits *::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"
}