{
  "id": "harbour-crane-lookup",
  "name": "Container Lookup",
  "theme": "harbour-crane",
  "category": "Search & Browse",
  "description": "Container search where the eleven-character number is the interface: the check digit is set in accent, and results are fixed-height rows that truncate.",
  "layout": "A large mono search field, a row of uppercase filter chips, and a fixed 32px result table with the check digit highlighted in every ID.",
  "modules": [
    {
      "key": "q",
      "name": "Lookup field",
      "html": "\n<header class=\"lq\"><span class=\"k\">Container lookup</span><input class=\"big\" value=\"MSCU 442891 7\"><p class=\"hint mn\">11 CHARACTERS · OWNER CODE, SERIAL, CHECK DIGIT · CHECK DIGIT SHOWN IN AMBER</p></header>"
    },
    {
      "key": "chips",
      "name": "Filter chips",
      "html": "\n<section class=\"cp\"><span class=\"ch on\">ALL</span><span class=\"ch\">IN YARD</span><span class=\"ch\">ON VESSEL</span><span class=\"ch\">GATED OUT</span><span class=\"ch\">HOLD</span><span class=\"ch\">REEFER</span><span class=\"ch\">HAZARDOUS</span></section>"
    },
    {
      "key": "results",
      "name": "Result rows",
      "html": "\n<section class=\"tb\"><div class=\"hd\"><span>Container</span><span>Type</span><span>Position</span><span>Status</span><span>Vessel</span><span>Consignee</span></div>\n<div class=\"rw on\"><span class=\"cn\">MSCU <b>442891</b> <em>7</em></span><span class=\"mn\">40HC</span><span class=\"mn\">B23 C 3</span><span class=\"mn\">IN YARD</span><span class=\"cut\">MV KESTREL BAY</span><span class=\"cut\">ARDEN HOLDINGS LIMITED</span></div>\n<div class=\"rw\"><span class=\"cn\">MSCU <b>442904</b> <em>3</em></span><span class=\"mn\">40HC</span><span class=\"mn\">B23 C 4</span><span class=\"mn\">IN YARD</span><span class=\"cut\">MV KESTREL BAY</span><span class=\"cut\">ARDEN HOLDINGS LIMITED</span></div>\n<div class=\"rw\"><span class=\"cn\">MSCU <b>442918</b> <em>1</em></span><span class=\"mn\">20GP</span><span class=\"mn\">B08 A 1</span><span class=\"mn\">HOLD</span><span class=\"cut\">—</span><span class=\"cut\">PELLEW AND COMPANY (CUSTOMS HOLD, DOCUMENTATION)</span></div>\n<div class=\"rw\"><span class=\"cn\">MSCU <b>443077</b> <em>9</em></span><span class=\"mn\">40RF</span><span class=\"mn\">PLUG 14</span><span class=\"mn\">REEFER</span><span class=\"cut\">MV OSPREY</span><span class=\"cut\">KILCARN COLD STORE</span></div>\n<div class=\"rw\"><span class=\"cn\">MSCU <b>443112</b> <em>5</em></span><span class=\"mn\">40HC</span><span class=\"mn\">—</span><span class=\"mn\">GATED OUT</span><span class=\"cut\">—</span><span class=\"cut\">NENDRUM DEVELOPMENTS</span></div>\n</section>"
    },
    {
      "key": "detail",
      "name": "Selected detail",
      "html": "\n<footer class=\"dt\"><article class=\"tile u2\"><span class=\"k\">Selected</span><p class=\"cn big2\">MSCU <b>442891</b> <em>7</em></p><p class=\"cut\">BAY 23 ROW C TIER 3 · 40HC · 24,180 KG</p></article><article class=\"tile u2\"><span class=\"k\">Next move</span><p class=\"big2\">CR4</p><span class=\"k\">to quay 2, queued position 1</span></article><article class=\"tile u2\"><span class=\"k\">Dwell</span><p class=\"big2\">4d 06h</p><span class=\"k\">free until 16 mar</span></article></footer>"
    }
  ],
  "moduleCount": 4,
  "reorderable": true,
  "meta": {
    "id": "harbour-crane-lookup",
    "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-lookup.json",
  "structure": "A large mono search field, a row of uppercase filter chips, and a fixed 32px result table with the check digit highlighted in every ID.",
  "html": "<div class=\"dz dz-harbour-crane-lookup\" data-design=\"harbour-crane-lookup\" data-theme=\"harbour-crane\">\n<section class=\"dz-mod\" data-mod=\"q\" aria-label=\"Lookup field\">\n<header class=\"lq\"><span class=\"k\">Container lookup</span><input class=\"big\" value=\"MSCU 442891 7\"><p class=\"hint mn\">11 CHARACTERS · OWNER CODE, SERIAL, CHECK DIGIT · CHECK DIGIT SHOWN IN AMBER</p></header></section>\n<section class=\"dz-mod\" data-mod=\"chips\" aria-label=\"Filter chips\">\n<section class=\"cp\"><span class=\"ch on\">ALL</span><span class=\"ch\">IN YARD</span><span class=\"ch\">ON VESSEL</span><span class=\"ch\">GATED OUT</span><span class=\"ch\">HOLD</span><span class=\"ch\">REEFER</span><span class=\"ch\">HAZARDOUS</span></section></section>\n<section class=\"dz-mod\" data-mod=\"results\" aria-label=\"Result rows\">\n<section class=\"tb\"><div class=\"hd\"><span>Container</span><span>Type</span><span>Position</span><span>Status</span><span>Vessel</span><span>Consignee</span></div>\n<div class=\"rw on\"><span class=\"cn\">MSCU <b>442891</b> <em>7</em></span><span class=\"mn\">40HC</span><span class=\"mn\">B23 C 3</span><span class=\"mn\">IN YARD</span><span class=\"cut\">MV KESTREL BAY</span><span class=\"cut\">ARDEN HOLDINGS LIMITED</span></div>\n<div class=\"rw\"><span class=\"cn\">MSCU <b>442904</b> <em>3</em></span><span class=\"mn\">40HC</span><span class=\"mn\">B23 C 4</span><span class=\"mn\">IN YARD</span><span class=\"cut\">MV KESTREL BAY</span><span class=\"cut\">ARDEN HOLDINGS LIMITED</span></div>\n<div class=\"rw\"><span class=\"cn\">MSCU <b>442918</b> <em>1</em></span><span class=\"mn\">20GP</span><span class=\"mn\">B08 A 1</span><span class=\"mn\">HOLD</span><span class=\"cut\">—</span><span class=\"cut\">PELLEW AND COMPANY (CUSTOMS HOLD, DOCUMENTATION)</span></div>\n<div class=\"rw\"><span class=\"cn\">MSCU <b>443077</b> <em>9</em></span><span class=\"mn\">40RF</span><span class=\"mn\">PLUG 14</span><span class=\"mn\">REEFER</span><span class=\"cut\">MV OSPREY</span><span class=\"cut\">KILCARN COLD STORE</span></div>\n<div class=\"rw\"><span class=\"cn\">MSCU <b>443112</b> <em>5</em></span><span class=\"mn\">40HC</span><span class=\"mn\">—</span><span class=\"mn\">GATED OUT</span><span class=\"cut\">—</span><span class=\"cut\">NENDRUM DEVELOPMENTS</span></div>\n</section></section>\n<section class=\"dz-mod\" data-mod=\"detail\" aria-label=\"Selected detail\">\n<footer class=\"dt\"><article class=\"tile u2\"><span class=\"k\">Selected</span><p class=\"cn big2\">MSCU <b>442891</b> <em>7</em></p><p class=\"cut\">BAY 23 ROW C TIER 3 · 40HC · 24,180 KG</p></article><article class=\"tile u2\"><span class=\"k\">Next move</span><p class=\"big2\">CR4</p><span class=\"k\">to quay 2, queued position 1</span></article><article class=\"tile u2\"><span class=\"k\">Dwell</span><p class=\"big2\">4d 06h</p><span class=\"k\">free until 16 mar</span></article></footer></section>\n</div>",
  "css": "\n.dz-harbour-crane-lookup { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 20px; }\n.dz-harbour-crane-lookup .k { text-transform: uppercase; letter-spacing: .12em; font-size: 10.5px; font-weight: 700; color: var(--muted-foreground); display: block; }\n.dz-harbour-crane-lookup .mn { font-family: var(--pv-mono); font-weight: 500; letter-spacing: .02em; font-size: 12px; }\n.dz-harbour-crane-lookup .lq { margin-bottom: 14px; }\n.dz-harbour-crane-lookup .lq .big { display: block; width: 100%; max-width: 560px; box-sizing: border-box; margin-top: 8px; background: var(--card); 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: 30px; padding: 12px 14px; }\n.dz-harbour-crane-lookup .lq .big:focus { outline: none; border-color: var(--primary); }\n.dz-harbour-crane-lookup .hint { font-size: 10.5px; color: var(--muted-foreground); margin: 8px 0 0; text-transform: uppercase; letter-spacing: .12em; font-size: 10.5px; font-weight: 700; }\n.dz-harbour-crane-lookup .cp { display: flex; gap: 8px; margin-bottom: 14px; }\n.dz-harbour-crane-lookup .ch { text-transform: uppercase; letter-spacing: .12em; font-size: 10.5px; font-weight: 700; border: 2px solid var(--border); border-radius: 2px; padding: 7px 12px; color: var(--muted-foreground); }\n.dz-harbour-crane-lookup .ch.on { border-color: var(--primary); background: var(--primary); color: var(--primary-foreground); }\n.dz-harbour-crane-lookup .tb .hd, .dz-harbour-crane-lookup .tb .rw { display: grid; grid-template-columns: 200px 70px 100px 100px 180px 1fr; gap: 12px; align-items: center; }\n.dz-harbour-crane-lookup .tb .hd { text-transform: uppercase; letter-spacing: .12em; font-size: 10.5px; font-weight: 700; color: var(--muted-foreground); height: 32px; border-bottom: 2px solid var(--border); }\n.dz-harbour-crane-lookup .tb .rw { height: 32px; border-bottom: 1px solid var(--border); }\n.dz-harbour-crane-lookup .tb .rw.on { background: color-mix(in oklab, var(--primary) 16%, transparent); }\n.dz-harbour-crane-lookup .cn { font-family: var(--pv-mono); font-weight: 500; letter-spacing: .02em; font-size: 12.5px; }\n.dz-harbour-crane-lookup .cn em { color: var(--accent); font-style: normal; }\n.dz-harbour-crane-lookup .cut { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--pv-mono); font-weight: 500; letter-spacing: .02em; font-size: 11.5px; color: var(--muted-foreground); }\n.dz-harbour-crane-lookup .dt { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 14px; }\n\n.dz-harbour-crane-lookup .tile { background: var(--card); border: 2px solid var(--border); border-radius: 2px; padding: 14px; overflow: hidden; }\n.dz-harbour-crane-lookup .u1 { height: 88px; }\n.dz-harbour-crane-lookup .u2 { height: 184px; }\n.dz-harbour-crane-lookup .u4 { height: 376px; }\n.dz-harbour-crane-lookup .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-lookup .cut { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--pv-mono); font-weight: 500; letter-spacing: .02em; }\n.dz-harbour-crane-lookup .big2 { font-family: var(--pv-mono); font-weight: 500; letter-spacing: .02em; font-size: 30px; line-height: 1; margin: 12px 0 8px; letter-spacing: -.02em; }\n@media (prefers-reduced-motion: reduce) { .dz-harbour-crane-lookup *, .dz-harbour-crane-lookup *::before, .dz-harbour-crane-lookup *::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"
}