{
  "id": "harbour-crane-shell",
  "name": "Terminal Shell",
  "theme": "harbour-crane",
  "category": "App Shell",
  "description": "The navigation frame with a dispatch drawer sliding over the tile field — the one element in the system permitted a shadow, because it genuinely overlays.",
  "layout": "An uppercase top bar, a 4-column tile field beneath, and a 380px dispatch drawer overlaying from the right with the system’s only shadow.",
  "modules": [
    {
      "key": "bar",
      "name": "Top bar",
      "html": "\n<header class=\"ob\"><span class=\"lg\">HARBOUR CRANE</span><nav><a href=\"#\">Yard</a><a class=\"on\" href=\"#\">Moves</a><a href=\"#\">Vessels</a><a href=\"#\">Gate</a></nav><button class=\"dsp\">Dispatch</button></header>"
    },
    {
      "key": "field",
      "name": "Tile field",
      "html": "\n<section class=\"fl\"><article class=\"tile u2\"><span class=\"k\">Crane CR4</span><p class=\"big\">41</p><span class=\"k\">moves this shift</span></article><article class=\"tile u2\"><span class=\"k\">Crane CR1</span><p class=\"big\">38</p><span class=\"k\">moves this shift</span></article><article class=\"tile u2\"><span class=\"k\">Crane CR6</span><p class=\"big\">29</p><span class=\"k\">moves this shift</span></article><article class=\"tile u2\"><span class=\"k\">Reach stackers</span><p class=\"big\">76</p><span class=\"k\">moves this shift</span></article>\n<article class=\"tile u1\"><span class=\"k\">Vessel</span><p class=\"cut mid2\">MV KESTREL BAY — BERTH 2</p></article><article class=\"tile u1\"><span class=\"k\">ETD</span><p class=\"mid2\">18:40</p></article><article class=\"tile u1\"><span class=\"k\">To load</span><p class=\"mid2\">318</p></article><article class=\"tile u1\"><span class=\"k\">Loaded</span><p class=\"mid2\">204</p></article></section>"
    },
    {
      "key": "drawer",
      "name": "Dispatch drawer",
      "html": "\n<aside class=\"dw\"><span class=\"k\">Dispatch move</span><div class=\"fld\"><span class=\"k\">Container</span><input class=\"mn\" value=\"MSCU 442891 7\"></div><div class=\"fld\"><span class=\"k\">From</span><input class=\"mn\" value=\"BAY 23 ROW C TIER 3\"></div><div class=\"fld\"><span class=\"k\">To</span><input class=\"mn\" value=\"QUAY 2\"></div><div class=\"fld\"><span class=\"k\">Equipment</span><div class=\"pick\"><span class=\"eq on\">CR4</span><span class=\"eq\">CR1</span><span class=\"eq\">CR6</span><span class=\"eq\">RS1</span><span class=\"eq\">RS2</span></div></div><button class=\"pri\">Dispatch to CR4</button><button class=\"gh\">Cancel</button></aside>"
    }
  ],
  "moduleCount": 3,
  "reorderable": true,
  "meta": {
    "id": "harbour-crane-shell",
    "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-shell.json",
  "structure": "An uppercase top bar, a 4-column tile field beneath, and a 380px dispatch drawer overlaying from the right with the system’s only shadow.",
  "html": "<div class=\"dz dz-harbour-crane-shell\" data-design=\"harbour-crane-shell\" data-theme=\"harbour-crane\">\n<section class=\"dz-mod\" data-mod=\"bar\" aria-label=\"Top bar\">\n<header class=\"ob\"><span class=\"lg\">HARBOUR CRANE</span><nav><a href=\"#\">Yard</a><a class=\"on\" href=\"#\">Moves</a><a href=\"#\">Vessels</a><a href=\"#\">Gate</a></nav><button class=\"dsp\">Dispatch</button></header></section>\n<section class=\"dz-mod\" data-mod=\"field\" aria-label=\"Tile field\">\n<section class=\"fl\"><article class=\"tile u2\"><span class=\"k\">Crane CR4</span><p class=\"big\">41</p><span class=\"k\">moves this shift</span></article><article class=\"tile u2\"><span class=\"k\">Crane CR1</span><p class=\"big\">38</p><span class=\"k\">moves this shift</span></article><article class=\"tile u2\"><span class=\"k\">Crane CR6</span><p class=\"big\">29</p><span class=\"k\">moves this shift</span></article><article class=\"tile u2\"><span class=\"k\">Reach stackers</span><p class=\"big\">76</p><span class=\"k\">moves this shift</span></article>\n<article class=\"tile u1\"><span class=\"k\">Vessel</span><p class=\"cut mid2\">MV KESTREL BAY — BERTH 2</p></article><article class=\"tile u1\"><span class=\"k\">ETD</span><p class=\"mid2\">18:40</p></article><article class=\"tile u1\"><span class=\"k\">To load</span><p class=\"mid2\">318</p></article><article class=\"tile u1\"><span class=\"k\">Loaded</span><p class=\"mid2\">204</p></article></section></section>\n<section class=\"dz-mod\" data-mod=\"drawer\" aria-label=\"Dispatch drawer\">\n<aside class=\"dw\"><span class=\"k\">Dispatch move</span><div class=\"fld\"><span class=\"k\">Container</span><input class=\"mn\" value=\"MSCU 442891 7\"></div><div class=\"fld\"><span class=\"k\">From</span><input class=\"mn\" value=\"BAY 23 ROW C TIER 3\"></div><div class=\"fld\"><span class=\"k\">To</span><input class=\"mn\" value=\"QUAY 2\"></div><div class=\"fld\"><span class=\"k\">Equipment</span><div class=\"pick\"><span class=\"eq on\">CR4</span><span class=\"eq\">CR1</span><span class=\"eq\">CR6</span><span class=\"eq\">RS1</span><span class=\"eq\">RS2</span></div></div><button class=\"pri\">Dispatch to CR4</button><button class=\"gh\">Cancel</button></aside></section>\n</div>",
  "css": "\n.dz-harbour-crane-shell { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 20px; position: relative; min-height: 560px; }\n.dz-harbour-crane-shell .ob { display: flex; align-items: center; gap: 24px; height: 44px; margin-bottom: 12px; }\n.dz-harbour-crane-shell .lg { 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: 15px; }\n.dz-harbour-crane-shell .ob nav { display: flex; gap: 16px; }\n.dz-harbour-crane-shell .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-shell .ob a.on { color: var(--primary); border-bottom: 2px solid var(--primary); }\n.dz-harbour-crane-shell .dsp { margin-left: auto; 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-shell .fl { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-right: 392px; }\n\n.dz-harbour-crane-shell .tile { background: var(--card); border: 2px solid var(--border); border-radius: 2px; padding: 14px; overflow: hidden; }\n.dz-harbour-crane-shell .u1 { height: 88px; }\n.dz-harbour-crane-shell .u2 { height: 184px; }\n.dz-harbour-crane-shell .u4 { height: 376px; }\n.dz-harbour-crane-shell .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-shell .cut { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--pv-mono); font-weight: 500; letter-spacing: .02em; }\n.dz-harbour-crane-shell .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-shell .mid2 { font-family: var(--pv-mono); font-weight: 500; letter-spacing: .02em; font-size: 20px; line-height: 1; margin: 10px 0 0; }\n.dz-harbour-crane-shell .dw { position: absolute; top: 76px; right: 20px; width: 380px; background: var(--card); border: 2px solid var(--primary); border-radius: 2px; padding: 18px; box-shadow: -18px 0 44px -22px color-mix(in oklab, var(--foreground) 70%, transparent); }\n.dz-harbour-crane-shell .dw .k { text-transform: uppercase; letter-spacing: .12em; font-size: 10.5px; font-weight: 700; color: var(--muted-foreground); display: block; }\n.dz-harbour-crane-shell .fld { margin-top: 16px; }\n.dz-harbour-crane-shell .fld input { display: block; width: 100%; box-sizing: border-box; margin-top: 6px; 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: 14px; padding: 9px 10px; }\n.dz-harbour-crane-shell .fld input:focus { outline: none; border-color: var(--primary); }\n.dz-harbour-crane-shell .pick { display: flex; gap: 6px; margin-top: 8px; }\n.dz-harbour-crane-shell .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: 7px 10px; color: var(--muted-foreground); }\n.dz-harbour-crane-shell .eq.on { border-color: var(--primary); background: var(--primary); color: var(--primary-foreground); }\n.dz-harbour-crane-shell .pri { width: 100%; margin-top: 20px; background: var(--primary); color: var(--primary-foreground); border: 0; border-radius: 2px; padding: 11px; font: inherit; text-transform: uppercase; letter-spacing: .12em; font-size: 10.5px; font-weight: 700; cursor: pointer; }\n.dz-harbour-crane-shell .gh { width: 100%; margin-top: 8px; background: transparent; color: var(--foreground); border: 2px solid var(--border); border-radius: 2px; padding: 11px; 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-shell *, .dz-harbour-crane-shell *::before, .dz-harbour-crane-shell *::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"
}