{
  "id": "radiograph-viewer",
  "name": "Viewer",
  "theme": "radiograph",
  "category": "App Shell",
  "description": "The single-pane reading view: the study takes everything except a 280px rail, and every tool in that rail is an icon with its current value flush right.",
  "layout": "A two-region split — image area at 60% minimum and a fixed 280px rail — with a four-corner mono overlay and a filmstrip inside the rail, not under the image.",
  "modules": [
    {
      "key": "image",
      "name": "Study pane",
      "html": "\n<section class=\"im\"><img src=\"{{ART scan}}\" alt=\"{{ARTALT scan}}\"><div class=\"ov\"><span class=\"tl\">ANON-44182<br>CT CHEST W/O<br>SER 3 · IMG 118/240</span><span class=\"tr\">A<br>SUPINE</span><span class=\"bl\">W 1500 · L -600<br>LUNG</span><span class=\"br\">10 mm<br>2026-03-12 07:44</span></div><div class=\"chip\">42.1 mm</div></section>"
    },
    {
      "key": "rail",
      "name": "Tool rail",
      "html": "\n<aside class=\"rl\"><span class=\"k\">Window</span><div class=\"tool on\"><i></i><span>Lung</span><b>1500 / −600</b></div><div class=\"tool\"><i></i><span>Soft tissue</span><b>400 / 40</b></div><div class=\"tool\"><i></i><span>Bone</span><b>2000 / 400</b></div>\n<span class=\"k\">Measure</span><div class=\"tool\"><i class=\"d\"></i><span>Distance</span><b>42.1 mm</b></div><div class=\"tool\"><i class=\"c\"></i><span>Ellipse HU</span><b>−812</b></div><div class=\"tool\"><i></i><span>Angle</span><b>—</b></div>\n<span class=\"k\">Series</span><div class=\"strip\"><figure><img src=\"{{ART scan}}\" alt=\"{{ARTALT scan}}\"><span class=\"mn\">1</span></figure><figure class=\"on\"><img src=\"{{ART lightbox}}\" alt=\"{{ARTALT lightbox}}\"><span class=\"mn\">3</span></figure><figure><img src=\"{{ART console}}\" alt=\"{{ARTALT console}}\"><span class=\"mn\">4</span></figure><figure><img src=\"{{ART corridor}}\" alt=\"{{ARTALT corridor}}\"><span class=\"mn\">7</span></figure></div></aside>"
    },
    {
      "key": "bar",
      "name": "Study bar",
      "html": "\n<header class=\"hb\"><span class=\"lg\">Radiograph</span><span class=\"mn\">ANON-44182 · CT CHEST WITHOUT CONTRAST · 240 IMAGES</span><span class=\"rd\">Unreported</span></header>"
    }
  ],
  "moduleCount": 3,
  "reorderable": true,
  "meta": {
    "id": "radiograph-viewer",
    "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-viewer.json",
  "structure": "A two-region split — image area at 60% minimum and a fixed 280px rail — with a four-corner mono overlay and a filmstrip inside the rail, not under the image.",
  "html": "<div class=\"dz dz-radiograph-viewer\" data-design=\"radiograph-viewer\" data-theme=\"radiograph\">\n<section class=\"dz-mod\" data-mod=\"image\" aria-label=\"Study pane\">\n<section class=\"im\"><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>CT CHEST W/O<br>SER 3 · IMG 118/240</span><span class=\"tr\">A<br>SUPINE</span><span class=\"bl\">W 1500 · L -600<br>LUNG</span><span class=\"br\">10 mm<br>2026-03-12 07:44</span></div><div class=\"chip\">42.1 mm</div></section></section>\n<section class=\"dz-mod\" data-mod=\"rail\" aria-label=\"Tool rail\">\n<aside class=\"rl\"><span class=\"k\">Window</span><div class=\"tool on\"><i></i><span>Lung</span><b>1500 / −600</b></div><div class=\"tool\"><i></i><span>Soft tissue</span><b>400 / 40</b></div><div class=\"tool\"><i></i><span>Bone</span><b>2000 / 400</b></div>\n<span class=\"k\">Measure</span><div class=\"tool\"><i class=\"d\"></i><span>Distance</span><b>42.1 mm</b></div><div class=\"tool\"><i class=\"c\"></i><span>Ellipse HU</span><b>−812</b></div><div class=\"tool\"><i></i><span>Angle</span><b>—</b></div>\n<span class=\"k\">Series</span><div class=\"strip\"><figure><img src=\"https://designlookbook.dev/assets/img/radiograph-scan.webp\" alt=\"The bore of a scanner lit from inside\"><span class=\"mn\">1</span></figure><figure class=\"on\"><img src=\"https://designlookbook.dev/assets/img/radiograph-lightbox.webp\" alt=\"The even glow of an empty viewing panel\"><span class=\"mn\">3</span></figure><figure><img src=\"https://designlookbook.dev/assets/img/radiograph-console.webp\" alt=\"A dim console desk with two dark screens and a purple cast\"><span class=\"mn\">4</span></figure><figure><img src=\"https://designlookbook.dev/assets/img/radiograph-corridor.webp\" alt=\"A hospital corridor at night with cyan floor light\"><span class=\"mn\">7</span></figure></div></aside></section>\n<section class=\"dz-mod\" data-mod=\"bar\" aria-label=\"Study bar\">\n<header class=\"hb\"><span class=\"lg\">Radiograph</span><span class=\"mn\">ANON-44182 · CT CHEST WITHOUT CONTRAST · 240 IMAGES</span><span class=\"rd\">Unreported</span></header></section>\n</div>",
  "css": "\n.dz-radiograph-viewer { background: var(--background); color: var(--foreground); font-family: var(--pv-body); display: grid; grid-template-columns: 1fr 280px; grid-template-rows: auto 1fr; min-height: 620px; }\n.dz-radiograph-viewer .mn { font-family: var(--pv-mono); font-size: 12px; letter-spacing: .01em; }\n.dz-radiograph-viewer .hb { grid-column: 1 / -1; display: flex; align-items: center; gap: 20px; height: 44px; padding: 0 16px; border-bottom: 1px solid var(--border); background: var(--card); }\n.dz-radiograph-viewer .lg { font-size: 15px; font-weight: 600; }\n.dz-radiograph-viewer .hb .mn { color: var(--muted-foreground); }\n.dz-radiograph-viewer .rd { text-transform: uppercase; letter-spacing: .14em; font-size: 10px; font-weight: 600; color: var(--accent); margin-left: auto; }\n.dz-radiograph-viewer .im { position: relative; background: var(--secondary); overflow: hidden; }\n.dz-radiograph-viewer .im img { width: 100%; height: 100%; object-fit: cover; display: block; filter: var(--img-filter); }\n\n.dz-radiograph-viewer .ov { position: absolute; inset: 0; pointer-events: none; }\n.dz-radiograph-viewer .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-viewer .ov .tl { top: 10px; left: 12px; }\n.dz-radiograph-viewer .ov .tr { top: 10px; right: 12px; text-align: right; }\n.dz-radiograph-viewer .ov .bl { bottom: 10px; left: 12px; }\n.dz-radiograph-viewer .ov .br { bottom: 10px; right: 12px; text-align: right; }\n.dz-radiograph-viewer .chip { position: absolute; left: 38%; top: 44%; background: var(--accent); color: var(--accent-foreground); font-family: var(--pv-mono); font-size: 12px; letter-spacing: .01em; border-radius: 3px; padding: 4px 8px; }\n\n.dz-radiograph-viewer .rl { width: 280px; background: var(--card); border-left: 1px solid var(--border); padding: 14px 12px; box-sizing: border-box; }\n.dz-radiograph-viewer .rl .k { text-transform: uppercase; letter-spacing: .14em; font-size: 10px; font-weight: 600; color: var(--muted-foreground); display: block; margin: 16px 0 8px; }\n.dz-radiograph-viewer .rl .k:first-child { margin-top: 0; }\n.dz-radiograph-viewer .tool { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 10px; border-radius: 3px; }\n.dz-radiograph-viewer .tool.on { background: var(--primary); color: var(--primary-foreground); }\n.dz-radiograph-viewer .tool i { width: 20px; height: 20px; border: 2px solid currentColor; border-radius: 3px; display: block; flex: none; }\n.dz-radiograph-viewer .tool i.c { border-radius: 9999px; }\n.dz-radiograph-viewer .tool i.d { transform: rotate(45deg); border-radius: 0; }\n.dz-radiograph-viewer .tool b { font-family: var(--pv-mono); font-size: 12px; letter-spacing: .01em; margin-left: auto; font-weight: 400; }\n.dz-radiograph-viewer .tool span { font-size: 13px; }\n.dz-radiograph-viewer .strip { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }\n.dz-radiograph-viewer .strip figure { margin: 0; position: relative; }\n.dz-radiograph-viewer .strip img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; border: 1px solid var(--border); border-radius: 3px; filter: var(--img-filter); }\n.dz-radiograph-viewer .strip .on img { border-color: var(--primary); border-width: 2px; }\n.dz-radiograph-viewer .strip .mn { position: absolute; left: 5px; bottom: 5px; color: var(--primary-foreground); }\n@media (prefers-reduced-motion: reduce) { .dz-radiograph-viewer *, .dz-radiograph-viewer *::before, .dz-radiograph-viewer *::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"
}