{
  "id": "harbour-crane-equipment",
  "name": "Equipment Setup",
  "theme": "harbour-crane",
  "category": "Settings & Forms",
  "description": "Configuring a crane, where every control is a 2px-bordered uppercase block and the tile heights stay quantised even when a section has less to say.",
  "layout": "A two-column form of 2u tiles; sections that need less content keep their unit height rather than shrinking, so the page never reflows on edit.",
  "modules": [
    {
      "key": "head",
      "name": "Equipment header",
      "html": "\n<header class=\"eh\"><span class=\"k\">Equipment</span><h1>CRANE CR4</h1><span class=\"st\">IN SERVICE · SHIFT B</span></header>"
    },
    {
      "key": "left",
      "name": "Capability tiles",
      "html": "\n<article class=\"tile u2\"><span class=\"k\">Safe working load</span><div class=\"fr\"><input class=\"mn\" value=\"65\"><em>TONNES UNDER SPREADER</em></div><div class=\"fr\"><input class=\"mn\" value=\"85\"><em>TONNES UNDER HOOK</em></div></article>\n<article class=\"tile u2\"><span class=\"k\">Outreach</span><div class=\"fr\"><input class=\"mn\" value=\"22\"><em>CONTAINERS ACROSS</em></div><div class=\"fr\"><input class=\"mn\" value=\"52\"><em>METRES FROM RAIL</em></div></article>\n<article class=\"tile u2\"><span class=\"k\">Wind limits</span><div class=\"fr\"><input class=\"mn\" value=\"20\"><em>M/S SUSPEND LOADING</em></div><div class=\"fr\"><input class=\"mn\" value=\"28\"><em>M/S STOW AND PIN</em></div></article>"
    },
    {
      "key": "right",
      "name": "Assignment tiles",
      "html": "\n<article class=\"tile u2\"><span class=\"k\">Berth assignment</span><div class=\"pick\"><span class=\"eq on\">BERTH 1</span><span class=\"eq on\">BERTH 2</span><span class=\"eq\">BERTH 3</span><span class=\"eq\">BERTH 4</span></div><p class=\"cut\">TWIN-LIFT ENABLED · TANDEM DISABLED</p></article>\n<article class=\"tile u2\"><span class=\"k\">Spreader</span><div class=\"pick\"><span class=\"eq on\">20FT</span><span class=\"eq on\">40FT</span><span class=\"eq on\">45FT</span><span class=\"eq\">TWIN 20</span></div><p class=\"cut\">TWISTLOCK SENSOR REPLACED 04 MAR</p></article>\n<article class=\"tile u2\"><span class=\"k\">Operator pool</span><div class=\"pick\"><span class=\"eq on\">ADEYEMI K</span><span class=\"eq on\">DOYLE M</span><span class=\"eq on\">NKEMDIRIM O</span></div><p class=\"cut\">THREE CERTIFIED · MINIMUM TWO PER SHIFT</p></article>"
    },
    {
      "key": "save",
      "name": "Save bar",
      "html": "\n<footer class=\"sv\"><span class=\"cut\">CHANGES APPLY AT THE NEXT SHIFT BOUNDARY, NOT IMMEDIATELY</span><button class=\"gh\">DISCARD</button><button class=\"pri\">SAVE EQUIPMENT</button></footer>"
    }
  ],
  "moduleCount": 4,
  "reorderable": true,
  "meta": {
    "id": "harbour-crane-equipment",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-09-02T01:18:55+09:00",
    "updatedAt": "2026-09-02T01:18:55+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/harbour-crane-equipment.json",
  "structure": "A two-column form of 2u tiles; sections that need less content keep their unit height rather than shrinking, so the page never reflows on edit.",
  "html": "<div class=\"dz dz-harbour-crane-equipment\" data-design=\"harbour-crane-equipment\" data-theme=\"harbour-crane\">\n<section class=\"dz-mod\" data-mod=\"head\" aria-label=\"Equipment header\">\n<header class=\"eh\"><span class=\"k\">Equipment</span><h1>CRANE CR4</h1><span class=\"st\">IN SERVICE · SHIFT B</span></header></section>\n<section class=\"dz-mod\" data-mod=\"left\" aria-label=\"Capability tiles\">\n<article class=\"tile u2\"><span class=\"k\">Safe working load</span><div class=\"fr\"><input class=\"mn\" value=\"65\"><em>TONNES UNDER SPREADER</em></div><div class=\"fr\"><input class=\"mn\" value=\"85\"><em>TONNES UNDER HOOK</em></div></article>\n<article class=\"tile u2\"><span class=\"k\">Outreach</span><div class=\"fr\"><input class=\"mn\" value=\"22\"><em>CONTAINERS ACROSS</em></div><div class=\"fr\"><input class=\"mn\" value=\"52\"><em>METRES FROM RAIL</em></div></article>\n<article class=\"tile u2\"><span class=\"k\">Wind limits</span><div class=\"fr\"><input class=\"mn\" value=\"20\"><em>M/S SUSPEND LOADING</em></div><div class=\"fr\"><input class=\"mn\" value=\"28\"><em>M/S STOW AND PIN</em></div></article></section>\n<section class=\"dz-mod\" data-mod=\"right\" aria-label=\"Assignment tiles\">\n<article class=\"tile u2\"><span class=\"k\">Berth assignment</span><div class=\"pick\"><span class=\"eq on\">BERTH 1</span><span class=\"eq on\">BERTH 2</span><span class=\"eq\">BERTH 3</span><span class=\"eq\">BERTH 4</span></div><p class=\"cut\">TWIN-LIFT ENABLED · TANDEM DISABLED</p></article>\n<article class=\"tile u2\"><span class=\"k\">Spreader</span><div class=\"pick\"><span class=\"eq on\">20FT</span><span class=\"eq on\">40FT</span><span class=\"eq on\">45FT</span><span class=\"eq\">TWIN 20</span></div><p class=\"cut\">TWISTLOCK SENSOR REPLACED 04 MAR</p></article>\n<article class=\"tile u2\"><span class=\"k\">Operator pool</span><div class=\"pick\"><span class=\"eq on\">ADEYEMI K</span><span class=\"eq on\">DOYLE M</span><span class=\"eq on\">NKEMDIRIM O</span></div><p class=\"cut\">THREE CERTIFIED · MINIMUM TWO PER SHIFT</p></article></section>\n<section class=\"dz-mod\" data-mod=\"save\" aria-label=\"Save bar\">\n<footer class=\"sv\"><span class=\"cut\">CHANGES APPLY AT THE NEXT SHIFT BOUNDARY, NOT IMMEDIATELY</span><button class=\"gh\">DISCARD</button><button class=\"pri\">SAVE EQUIPMENT</button></footer></section>\n</div>",
  "css": "\n.dz-harbour-crane-equipment { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-content: start; }\n.dz-harbour-crane-equipment .k { text-transform: uppercase; letter-spacing: .12em; font-size: 10.5px; font-weight: 700; color: var(--muted-foreground); display: block; }\n.dz-harbour-crane-equipment .eh { grid-column: 1 / -1; display: flex; align-items: flex-end; gap: 20px; padding-bottom: 12px; border-bottom: 2px solid var(--border); }\n.dz-harbour-crane-equipment h1 { font-family: var(--pv-display); font-weight: 700; letter-spacing: -.01em; text-transform: uppercase; letter-spacing: .12em; font-size: 10.5px; font-weight: 700; font-size: 30px; margin: 4px 0 0; }\n.dz-harbour-crane-equipment .st { font-family: var(--pv-mono); font-weight: 500; letter-spacing: .02em; text-transform: uppercase; letter-spacing: .12em; font-size: 10.5px; font-weight: 700; color: var(--accent); margin-left: auto; }\n\n.dz-harbour-crane-equipment .tile { background: var(--card); border: 2px solid var(--border); border-radius: 2px; padding: 14px; overflow: hidden; }\n.dz-harbour-crane-equipment .u1 { height: 88px; }\n.dz-harbour-crane-equipment .u2 { height: 184px; }\n.dz-harbour-crane-equipment .u4 { height: 376px; }\n.dz-harbour-crane-equipment .tile .k { text-transform: uppercase; letter-spacing: .12em; font-size: 10.5px; font-weight: 700; color: var(--muted-foreground); display: block; }\n.dz-harbour-crane-equipment .cut { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--pv-mono); font-weight: 500; letter-spacing: .02em; }\n.dz-harbour-crane-equipment .fr { display: flex; align-items: center; gap: 10px; margin-top: 12px; }\n.dz-harbour-crane-equipment .fr input { width: 92px; background: var(--background); border: 2px solid var(--border); border-radius: 2px; color: var(--foreground); font: inherit; font-family: var(--pv-mono); font-weight: 500; letter-spacing: .02em; font-size: 18px; padding: 7px 10px; }\n.dz-harbour-crane-equipment .fr input:focus { outline: none; border-color: var(--primary); }\n.dz-harbour-crane-equipment em { text-transform: uppercase; letter-spacing: .12em; font-size: 10.5px; font-weight: 700; font-style: normal; color: var(--muted-foreground); }\n.dz-harbour-crane-equipment .pick { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0; }\n.dz-harbour-crane-equipment .eq { font-family: var(--pv-mono); font-weight: 500; letter-spacing: .02em; text-transform: uppercase; letter-spacing: .12em; font-size: 10.5px; font-weight: 700; border: 2px solid var(--border); border-radius: 2px; padding: 6px 10px; color: var(--muted-foreground); }\n.dz-harbour-crane-equipment .eq.on { border-color: var(--primary); background: var(--primary); color: var(--primary-foreground); }\n.dz-harbour-crane-equipment .cut { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--pv-mono); font-weight: 500; letter-spacing: .02em; font-size: 11px; color: var(--muted-foreground); margin: 0; }\n.dz-harbour-crane-equipment .sv { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; padding-top: 12px; border-top: 2px solid var(--border); }\n.dz-harbour-crane-equipment .sv .cut { margin-right: auto; }\n.dz-harbour-crane-equipment .pri { background: var(--primary); color: var(--primary-foreground); border: 0; border-radius: 2px; padding: 10px 18px; font: inherit; text-transform: uppercase; letter-spacing: .12em; font-size: 10.5px; font-weight: 700; cursor: pointer; }\n.dz-harbour-crane-equipment .gh { background: transparent; color: var(--foreground); border: 2px solid var(--border); border-radius: 2px; padding: 10px 18px; font: inherit; text-transform: uppercase; letter-spacing: .12em; font-size: 10.5px; font-weight: 700; cursor: pointer; }\n@media (prefers-reduced-motion: reduce) { .dz-harbour-crane-equipment *, .dz-harbour-crane-equipment *::before, .dz-harbour-crane-equipment *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }\n",
  "requiredTheme": "/api/v1/themes/harbour-crane.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Archivo+Narrow:wght@400;500;600;700&family=Barlow:wght@400;500;600;700&family=Source+Code+Pro:wght@400;500;600;700&display=swap"
}