{
  "id": "radiograph-worklist",
  "name": "Worklist",
  "theme": "radiograph",
  "category": "Search & Browse",
  "description": "The reading list, kept dense at 13.5px with a thumbnail column that is genuinely square and priority shown as an accent chip rather than a red row.",
  "layout": "A filter strip, then a 32px-row worklist whose leftmost column is a 28px square thumbnail, with the selected study previewed at 60% on the right.",
  "modules": [
    {
      "key": "filters",
      "name": "Filter strip",
      "html": "\n<header class=\"fs\"><input value=\"unreported\"><span class=\"ch on\">Unreported</span><span class=\"ch\">Mine</span><span class=\"ch\">CT</span><span class=\"ch\">MR</span><span class=\"ch\">Plain film</span><span class=\"ct mn\">31 STUDIES · 6 URGENT</span></header>"
    },
    {
      "key": "list",
      "name": "Worklist rows",
      "html": "\n<section class=\"wl\"><div class=\"hd\"><span></span><span>Accession</span><span>Study</span><span>Acquired</span><span>Images</span><span>Priority</span></div>\n<div class=\"rw on\"><figure><img src=\"{{ART scan}}\" alt=\"{{ARTALT scan}}\"></figure><span class=\"mn\">ANON-44182</span><span>CT chest without contrast</span><span class=\"mn\">12 Mar 07:44</span><span class=\"mn\">240</span><span class=\"pr hot\">Urgent</span></div>\n<div class=\"rw\"><figure><img src=\"{{ART lightbox}}\" alt=\"{{ARTALT lightbox}}\"></figure><span class=\"mn\">ANON-44179</span><span>CT abdomen and pelvis</span><span class=\"mn\">12 Mar 07:12</span><span class=\"mn\">412</span><span class=\"pr\">Routine</span></div>\n<div class=\"rw\"><figure><img src=\"{{ART console}}\" alt=\"{{ARTALT console}}\"></figure><span class=\"mn\">ANON-44174</span><span>MR head without contrast</span><span class=\"mn\">12 Mar 06:38</span><span class=\"mn\">188</span><span class=\"pr hot\">Urgent</span></div>\n<div class=\"rw\"><figure><img src=\"{{ART corridor}}\" alt=\"{{ARTALT corridor}}\"></figure><span class=\"mn\">ANON-44170</span><span>Chest radiograph, PA</span><span class=\"mn\">12 Mar 06:02</span><span class=\"mn\">2</span><span class=\"pr\">Routine</span></div>\n<div class=\"rw\"><figure><img src=\"{{ART scan}}\" alt=\"{{ARTALT scan}}\"></figure><span class=\"mn\">ANON-44168</span><span>CT chest, follow-up</span><span class=\"mn\">11 Mar 22:51</span><span class=\"mn\">236</span><span class=\"pr\">Routine</span></div>\n</section>"
    },
    {
      "key": "preview",
      "name": "Selected preview",
      "html": "\n<aside class=\"pv\"><div class=\"pn\"><img src=\"{{ART scan}}\" alt=\"{{ARTALT scan}}\"><div class=\"ov\"><span class=\"tl\">ANON-44182<br>SER 3 · IMG 118</span><span class=\"br\">10 mm</span></div></div><div class=\"kv\"><span>Prior available</span><b>2025-09-04</b></div><div class=\"kv\"><span>Referrer</span><b>Respiratory</b></div><div class=\"kv\"><span>Question</span><b>Nodule follow-up</b></div><button class=\"pri\">Open study</button></aside>"
    }
  ],
  "moduleCount": 3,
  "reorderable": true,
  "meta": {
    "id": "radiograph-worklist",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-09-02T01:28:02+09:00",
    "updatedAt": "2026-09-02T01:28:02+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/radiograph-worklist.json",
  "structure": "A filter strip, then a 32px-row worklist whose leftmost column is a 28px square thumbnail, with the selected study previewed at 60% on the right.",
  "html": "<div class=\"dz dz-radiograph-worklist\" data-design=\"radiograph-worklist\" data-theme=\"radiograph\">\n<section class=\"dz-mod\" data-mod=\"filters\" aria-label=\"Filter strip\">\n<header class=\"fs\"><input value=\"unreported\"><span class=\"ch on\">Unreported</span><span class=\"ch\">Mine</span><span class=\"ch\">CT</span><span class=\"ch\">MR</span><span class=\"ch\">Plain film</span><span class=\"ct mn\">31 STUDIES · 6 URGENT</span></header></section>\n<section class=\"dz-mod\" data-mod=\"list\" aria-label=\"Worklist rows\">\n<section class=\"wl\"><div class=\"hd\"><span></span><span>Accession</span><span>Study</span><span>Acquired</span><span>Images</span><span>Priority</span></div>\n<div class=\"rw on\"><figure><img src=\"https://designlookbook.dev/assets/img/radiograph-scan.webp\" alt=\"The bore of a scanner lit from inside\"></figure><span class=\"mn\">ANON-44182</span><span>CT chest without contrast</span><span class=\"mn\">12 Mar 07:44</span><span class=\"mn\">240</span><span class=\"pr hot\">Urgent</span></div>\n<div class=\"rw\"><figure><img src=\"https://designlookbook.dev/assets/img/radiograph-lightbox.webp\" alt=\"The even glow of an empty viewing panel\"></figure><span class=\"mn\">ANON-44179</span><span>CT abdomen and pelvis</span><span class=\"mn\">12 Mar 07:12</span><span class=\"mn\">412</span><span class=\"pr\">Routine</span></div>\n<div class=\"rw\"><figure><img src=\"https://designlookbook.dev/assets/img/radiograph-console.webp\" alt=\"A dim console desk with two dark screens and a purple cast\"></figure><span class=\"mn\">ANON-44174</span><span>MR head without contrast</span><span class=\"mn\">12 Mar 06:38</span><span class=\"mn\">188</span><span class=\"pr hot\">Urgent</span></div>\n<div class=\"rw\"><figure><img src=\"https://designlookbook.dev/assets/img/radiograph-corridor.webp\" alt=\"A hospital corridor at night with cyan floor light\"></figure><span class=\"mn\">ANON-44170</span><span>Chest radiograph, PA</span><span class=\"mn\">12 Mar 06:02</span><span class=\"mn\">2</span><span class=\"pr\">Routine</span></div>\n<div class=\"rw\"><figure><img src=\"https://designlookbook.dev/assets/img/radiograph-scan.webp\" alt=\"The bore of a scanner lit from inside\"></figure><span class=\"mn\">ANON-44168</span><span>CT chest, follow-up</span><span class=\"mn\">11 Mar 22:51</span><span class=\"mn\">236</span><span class=\"pr\">Routine</span></div>\n</section></section>\n<section class=\"dz-mod\" data-mod=\"preview\" aria-label=\"Selected preview\">\n<aside class=\"pv\"><div class=\"pn\"><img src=\"https://designlookbook.dev/assets/img/radiograph-scan.webp\" alt=\"The bore of a scanner lit from inside\"><div class=\"ov\"><span class=\"tl\">ANON-44182<br>SER 3 · IMG 118</span><span class=\"br\">10 mm</span></div></div><div class=\"kv\"><span>Prior available</span><b>2025-09-04</b></div><div class=\"kv\"><span>Referrer</span><b>Respiratory</b></div><div class=\"kv\"><span>Question</span><b>Nodule follow-up</b></div><button class=\"pri\">Open study</button></aside></section>\n</div>",
  "css": "\n.dz-radiograph-worklist { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 16px; display: grid; grid-template-columns: 1fr 320px; gap: 16px; align-items: start; }\n.dz-radiograph-worklist .mn { font-family: var(--pv-mono); font-size: 12px; letter-spacing: .01em; }\n.dz-radiograph-worklist .fs { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }\n.dz-radiograph-worklist .fs input { width: 220px; background: var(--card); border: 1px solid var(--border); border-radius: 3px; color: var(--foreground); font: inherit; font-size: 13.5px; padding: 8px 10px; margin-right: 10px; }\n.dz-radiograph-worklist .fs input:focus { outline: none; border-color: var(--primary); }\n.dz-radiograph-worklist .ch { text-transform: uppercase; letter-spacing: .14em; font-size: 10px; font-weight: 600; border: 1px solid var(--border); border-radius: 3px; padding: 6px 10px; color: var(--muted-foreground); }\n.dz-radiograph-worklist .ch.on { border-color: var(--primary); background: var(--primary); color: var(--primary-foreground); }\n.dz-radiograph-worklist .ct { font-family: var(--pv-mono); font-size: 12px; letter-spacing: .01em; color: var(--muted-foreground); margin-left: auto; }\n.dz-radiograph-worklist .wl .hd, .dz-radiograph-worklist .wl .rw { display: grid; grid-template-columns: 34px 130px 1fr 130px 70px 90px; gap: 12px; align-items: center; }\n.dz-radiograph-worklist .wl .hd { text-transform: uppercase; letter-spacing: .14em; font-size: 10px; font-weight: 600; color: var(--muted-foreground); height: 30px; border-bottom: 1px solid var(--border); }\n.dz-radiograph-worklist .wl .rw { height: 38px; border-bottom: 1px solid var(--border); font-size: 13.5px; }\n.dz-radiograph-worklist .wl .rw.on { background: color-mix(in oklab, var(--primary) 20%, transparent); }\n.dz-radiograph-worklist .wl figure { margin: 0; }\n.dz-radiograph-worklist .wl figure img { width: 28px; height: 28px; object-fit: cover; display: block; border-radius: 3px; filter: var(--img-filter); }\n.dz-radiograph-worklist .pr { text-transform: uppercase; letter-spacing: .14em; font-size: 10px; font-weight: 600; color: var(--muted-foreground); }\n.dz-radiograph-worklist .pr.hot { background: var(--accent); color: var(--accent-foreground); border-radius: 3px; padding: 4px 8px; justify-self: start; }\n.dz-radiograph-worklist .pv { background: var(--card); border: 1px solid var(--border); border-radius: 4px; padding: 12px; }\n.dz-radiograph-worklist .pn { position: relative; background: var(--secondary); overflow: hidden; aspect-ratio: 1; border-radius: 3px; }\n.dz-radiograph-worklist .pn img { width: 100%; height: 100%; object-fit: cover; display: block; filter: var(--img-filter); }\n\n.dz-radiograph-worklist .ov { position: absolute; inset: 0; pointer-events: none; }\n.dz-radiograph-worklist .ov span { position: absolute; font-family: var(--pv-mono); font-size: 12px; letter-spacing: .01em; color: var(--primary-foreground); opacity: .82; line-height: 1.5; }\n.dz-radiograph-worklist .ov .tl { top: 10px; left: 12px; }\n.dz-radiograph-worklist .ov .tr { top: 10px; right: 12px; text-align: right; }\n.dz-radiograph-worklist .ov .bl { bottom: 10px; left: 12px; }\n.dz-radiograph-worklist .ov .br { bottom: 10px; right: 12px; text-align: right; }\n.dz-radiograph-worklist .kv { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 12.5px; }\n.dz-radiograph-worklist .kv span { color: var(--muted-foreground); }\n.dz-radiograph-worklist .kv b { font-family: var(--pv-mono); font-size: 12px; letter-spacing: .01em; font-weight: 400; }\n.dz-radiograph-worklist .pri { width: 100%; margin-top: 14px; background: var(--primary); color: var(--primary-foreground); border: 0; border-radius: 3px; padding: 10px; font: inherit; font-size: 13.5px; cursor: pointer; }\n@media (prefers-reduced-motion: reduce) { .dz-radiograph-worklist *, .dz-radiograph-worklist *::before, .dz-radiograph-worklist *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }\n",
  "requiredTheme": "/api/v1/themes/radiograph.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Geologica:wght@400;500;600;700&family=B612+Mono:wght@400;500;600;700&display=swap"
}