{
  "id": "harbour-crane-yard",
  "name": "Yard",
  "theme": "harbour-crane",
  "category": "Dashboard",
  "description": "The operations screen: a four-column tile field where the yard map holds the fixed top-left 4u slot and every other tile is one of three heights.",
  "layout": "Four columns of 12px-gutter tiles quantised to 88, 184 and 376px; the map spans two columns at 4u in the top-left and never moves.",
  "modules": [
    {
      "key": "bar",
      "name": "Operations bar",
      "html": "\n<header class=\"ob\"><span class=\"lg\">HARBOUR CRANE</span><nav><a class=\"on\" href=\"#\">Yard</a><a href=\"#\">Moves</a><a href=\"#\">Vessels</a><a href=\"#\">Gate</a></nav><span class=\"sh\">Shift B · 06:00–18:00 · K. Adeyemi</span></header>"
    },
    {
      "key": "map",
      "name": "Yard map tile",
      "html": "\n<article class=\"tile u4 map\"><span class=\"k\">Yard map · Terminal 2</span><div class=\"bays\"><span class=\"by f\"></span><span class=\"by f\"></span><span class=\"by\"></span><span class=\"by f\"></span><span class=\"by f\"></span><span class=\"by f\"></span><span class=\"by\"></span><span class=\"by\"></span><span class=\"by f\"></span><span class=\"by f\"></span><span class=\"by f\"></span><span class=\"by f\"></span><span class=\"by\"></span><span class=\"by f\"></span><span class=\"by f\"></span><span class=\"by\"></span><span class=\"by f\"></span><span class=\"by f\"></span><span class=\"by f\"></span><span class=\"by\"></span><span class=\"by f\"></span><span class=\"by f\"></span><span class=\"by hot\"></span><span class=\"by f\"></span><span class=\"by\"></span><span class=\"by f\"></span><span class=\"by f\"></span><span class=\"by f\"></span><span class=\"by f\"></span><span class=\"by\"></span><span class=\"by f\"></span><span class=\"by f\"></span></div><p class=\"mn\">BAY 01—32 · ROW A—F · TIER 1—5 · 74% OCCUPIED</p></article>"
    },
    {
      "key": "stats",
      "name": "Figure tiles",
      "html": "\n<article class=\"tile u2\"><span class=\"k\">Moves this hour</span><p class=\"big\">184</p><span class=\"k\">target 200</span></article>\n<article class=\"tile u2\"><span class=\"k\">Gate queue</span><p class=\"big\">12</p><span class=\"k\">avg wait 8 min</span></article>\n<article class=\"tile u1\"><span class=\"k\">Cranes working</span><p class=\"mid\">6 / 8</p></article>\n<article class=\"tile u1\"><span class=\"k\">Reefer alarms</span><p class=\"mid bad\">2</p></article>\n<article class=\"tile u1\"><span class=\"k\">Yard occupancy</span><p class=\"mid\">74%</p></article>\n<article class=\"tile u1\"><span class=\"k\">Hold containers</span><p class=\"mid\">31</p></article>"
    },
    {
      "key": "queue",
      "name": "Move queue tile",
      "html": "\n<article class=\"tile u4 q\"><span class=\"k\">Move queue</span><div class=\"rows\">\n<div class=\"rw on\"><span class=\"cn\">MSCU <b>442891</b> <em>7</em></span><span class=\"cut\">BAY 23 ROW C TIER 3 → QUAY 2</span><span class=\"mn\">CR4</span></div>\n<div class=\"rw\"><span class=\"cn\">TGHU <b>903117</b> <em>2</em></span><span class=\"cut\">BAY 08 ROW A TIER 1 → BAY 19 ROW D TIER 2</span><span class=\"mn\">CR1</span></div>\n<div class=\"rw\"><span class=\"cn\">CMAU <b>551340</b> <em>9</em></span><span class=\"cut\">QUAY 1 → BAY 31 ROW B TIER 4</span><span class=\"mn\">CR6</span></div>\n<div class=\"rw\"><span class=\"cn\">HLXU <b>228064</b> <em>4</em></span><span class=\"cut\">BAY 12 ROW E TIER 2 → GATE 3</span><span class=\"mn\">RS2</span></div>\n<div class=\"rw\"><span class=\"cn\">OOLU <b>771925</b> <em>1</em></span><span class=\"cut\">BAY 27 ROW F TIER 5 → BAY 27 ROW F TIER 3</span><span class=\"mn\">CR4</span></div>\n<div class=\"rw\"><span class=\"cn\">MAEU <b>604488</b> <em>6</em></span><span class=\"cut\">QUAY 2 → BAY 04 ROW A TIER 1</span><span class=\"mn\">CR3</span></div>\n<div class=\"rw\"><span class=\"cn\">SEGU <b>119673</b> <em>8</em></span><span class=\"cut\">BAY 30 ROW C TIER 2 → REEFER PLUG 14</span><span class=\"mn\">RS1</span></div>\n</div></article>"
    }
  ],
  "moduleCount": 4,
  "reorderable": true,
  "meta": {
    "id": "harbour-crane-yard",
    "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-yard.json",
  "structure": "Four columns of 12px-gutter tiles quantised to 88, 184 and 376px; the map spans two columns at 4u in the top-left and never moves.",
  "html": "<div class=\"dz dz-harbour-crane-yard\" data-design=\"harbour-crane-yard\" data-theme=\"harbour-crane\">\n<section class=\"dz-mod\" data-mod=\"bar\" aria-label=\"Operations bar\">\n<header class=\"ob\"><span class=\"lg\">HARBOUR CRANE</span><nav><a class=\"on\" href=\"#\">Yard</a><a href=\"#\">Moves</a><a href=\"#\">Vessels</a><a href=\"#\">Gate</a></nav><span class=\"sh\">Shift B · 06:00–18:00 · K. Adeyemi</span></header></section>\n<section class=\"dz-mod\" data-mod=\"map\" aria-label=\"Yard map tile\">\n<article class=\"tile u4 map\"><span class=\"k\">Yard map · Terminal 2</span><div class=\"bays\"><span class=\"by f\"></span><span class=\"by f\"></span><span class=\"by\"></span><span class=\"by f\"></span><span class=\"by f\"></span><span class=\"by f\"></span><span class=\"by\"></span><span class=\"by\"></span><span class=\"by f\"></span><span class=\"by f\"></span><span class=\"by f\"></span><span class=\"by f\"></span><span class=\"by\"></span><span class=\"by f\"></span><span class=\"by f\"></span><span class=\"by\"></span><span class=\"by f\"></span><span class=\"by f\"></span><span class=\"by f\"></span><span class=\"by\"></span><span class=\"by f\"></span><span class=\"by f\"></span><span class=\"by hot\"></span><span class=\"by f\"></span><span class=\"by\"></span><span class=\"by f\"></span><span class=\"by f\"></span><span class=\"by f\"></span><span class=\"by f\"></span><span class=\"by\"></span><span class=\"by f\"></span><span class=\"by f\"></span></div><p class=\"mn\">BAY 01—32 · ROW A—F · TIER 1—5 · 74% OCCUPIED</p></article></section>\n<section class=\"dz-mod\" data-mod=\"stats\" aria-label=\"Figure tiles\">\n<article class=\"tile u2\"><span class=\"k\">Moves this hour</span><p class=\"big\">184</p><span class=\"k\">target 200</span></article>\n<article class=\"tile u2\"><span class=\"k\">Gate queue</span><p class=\"big\">12</p><span class=\"k\">avg wait 8 min</span></article>\n<article class=\"tile u1\"><span class=\"k\">Cranes working</span><p class=\"mid\">6 / 8</p></article>\n<article class=\"tile u1\"><span class=\"k\">Reefer alarms</span><p class=\"mid bad\">2</p></article>\n<article class=\"tile u1\"><span class=\"k\">Yard occupancy</span><p class=\"mid\">74%</p></article>\n<article class=\"tile u1\"><span class=\"k\">Hold containers</span><p class=\"mid\">31</p></article></section>\n<section class=\"dz-mod\" data-mod=\"queue\" aria-label=\"Move queue tile\">\n<article class=\"tile u4 q\"><span class=\"k\">Move queue</span><div class=\"rows\">\n<div class=\"rw on\"><span class=\"cn\">MSCU <b>442891</b> <em>7</em></span><span class=\"cut\">BAY 23 ROW C TIER 3 → QUAY 2</span><span class=\"mn\">CR4</span></div>\n<div class=\"rw\"><span class=\"cn\">TGHU <b>903117</b> <em>2</em></span><span class=\"cut\">BAY 08 ROW A TIER 1 → BAY 19 ROW D TIER 2</span><span class=\"mn\">CR1</span></div>\n<div class=\"rw\"><span class=\"cn\">CMAU <b>551340</b> <em>9</em></span><span class=\"cut\">QUAY 1 → BAY 31 ROW B TIER 4</span><span class=\"mn\">CR6</span></div>\n<div class=\"rw\"><span class=\"cn\">HLXU <b>228064</b> <em>4</em></span><span class=\"cut\">BAY 12 ROW E TIER 2 → GATE 3</span><span class=\"mn\">RS2</span></div>\n<div class=\"rw\"><span class=\"cn\">OOLU <b>771925</b> <em>1</em></span><span class=\"cut\">BAY 27 ROW F TIER 5 → BAY 27 ROW F TIER 3</span><span class=\"mn\">CR4</span></div>\n<div class=\"rw\"><span class=\"cn\">MAEU <b>604488</b> <em>6</em></span><span class=\"cut\">QUAY 2 → BAY 04 ROW A TIER 1</span><span class=\"mn\">CR3</span></div>\n<div class=\"rw\"><span class=\"cn\">SEGU <b>119673</b> <em>8</em></span><span class=\"cut\">BAY 30 ROW C TIER 2 → REEFER PLUG 14</span><span class=\"mn\">RS1</span></div>\n</div></article></section>\n</div>",
  "css": "\n.dz-harbour-crane-yard { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 20px; }\n.dz-harbour-crane-yard .ob { display: flex; align-items: center; gap: 24px; height: 44px; margin-bottom: 12px; }\n.dz-harbour-crane-yard .lg { font-family: var(--pv-display); font-weight: 700; letter-spacing: -.01em; font-size: 19px; text-transform: uppercase; letter-spacing: .12em; font-size: 10.5px; font-weight: 700; font-size: 15px; }\n.dz-harbour-crane-yard .ob nav { display: flex; gap: 16px; }\n.dz-harbour-crane-yard .ob a { text-transform: uppercase; letter-spacing: .12em; font-size: 10.5px; font-weight: 700; color: var(--muted-foreground); text-decoration: none; padding-bottom: 3px; }\n.dz-harbour-crane-yard .ob a.on { color: var(--primary); border-bottom: 2px solid var(--primary); }\n.dz-harbour-crane-yard .sh { font-family: var(--pv-mono); font-weight: 500; letter-spacing: .02em; font-size: 12.5px; color: var(--muted-foreground); margin-left: auto; }\n.dz-harbour-crane-yard .grid { display: grid; }\n.dz-harbour-crane-yard { --dummy: 0; }\n.dz-harbour-crane-yard .tile, .dz-harbour-crane-yard .ob { box-sizing: border-box; }\n.dz-harbour-crane-yard .ob { grid-column: 1 / -1; }\n.dz-harbour-crane-yard > .tile:first-of-type { grid-column: span 2; }\n.dz-harbour-crane-yard { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; align-content: start; }\n\n.dz-harbour-crane-yard .tile { background: var(--card); border: 2px solid var(--border); border-radius: 2px; padding: 14px; overflow: hidden; }\n.dz-harbour-crane-yard .u1 { height: 88px; }\n.dz-harbour-crane-yard .u2 { height: 184px; }\n.dz-harbour-crane-yard .u4 { height: 376px; }\n.dz-harbour-crane-yard .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-yard .cut { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--pv-mono); font-weight: 500; letter-spacing: .02em; }\n.dz-harbour-crane-yard .map .bays { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; margin: 12px 0; }\n.dz-harbour-crane-yard .by { height: 30px; border: 2px solid var(--border); border-radius: 2px; }\n.dz-harbour-crane-yard .by.f { background: color-mix(in oklab, var(--primary) 55%, transparent); border-color: var(--primary); }\n.dz-harbour-crane-yard .by.hot { background: var(--destructive); border-color: var(--destructive); }\n.dz-harbour-crane-yard .mn { font-family: var(--pv-mono); font-weight: 500; letter-spacing: .02em; font-size: 11px; color: var(--muted-foreground); margin: 0; }\n.dz-harbour-crane-yard .big { font-family: var(--pv-mono); font-weight: 500; letter-spacing: .02em; font-size: 52px; line-height: 1; margin: 10px 0 6px; letter-spacing: -.03em; }\n.dz-harbour-crane-yard .mid { font-family: var(--pv-mono); font-weight: 500; letter-spacing: .02em; font-size: 30px; line-height: 1; margin: 8px 0 0; }\n.dz-harbour-crane-yard .bad { color: var(--destructive); }\n.dz-harbour-crane-yard .q { grid-column: span 2; }\n.dz-harbour-crane-yard .rows { margin-top: 10px; }\n.dz-harbour-crane-yard .rw { display: grid; grid-template-columns: 190px 1fr 44px; gap: 10px; align-items: center; height: 32px; border-bottom: 1px solid var(--border); text-transform: uppercase; letter-spacing: .12em; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; }\n.dz-harbour-crane-yard .rw.on { border-left: 3px solid var(--primary); padding-left: 7px; margin-left: -10px; }\n.dz-harbour-crane-yard .cn { font-family: var(--pv-mono); font-weight: 500; letter-spacing: .02em; font-size: 12px; }\n.dz-harbour-crane-yard .cn b { font-weight: 500; }\n.dz-harbour-crane-yard .cn em { color: var(--accent); font-style: normal; }\n.dz-harbour-crane-yard .rw .cut { font-size: 11px; color: var(--muted-foreground); }\n.dz-harbour-crane-yard .rw .mn { font-size: 11px; }\n@media (prefers-reduced-motion: reduce) { .dz-harbour-crane-yard *, .dz-harbour-crane-yard *::before, .dz-harbour-crane-yard *::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"
}