{
  "id": "drafting-room-viewer",
  "name": "Drawing Viewer",
  "theme": "drafting-room",
  "category": "App Shell",
  "description": "A viewer frame where revision clouds are real objects in a list, so a reviewer can walk the changes rather than hunt for them on the sheet.",
  "layout": "A 200px layer rail, a dimensioned drawing pane, and a revision list; the pane keeps its 32px margin and the title block sits inside it.",
  "modules": [
    {
      "key": "layers",
      "name": "Layer rail",
      "html": "\n<nav class=\"lr\"><span class=\"brand\">Drafting Room</span>\n<span class=\"k\">Sheet</span><b class=\"sh n\">KD2-A-204 · Rev C</b>\n<span class=\"k\">Layers</span>\n<ul><li><label><input type=\"checkbox\" checked> Grid</label></li><li><label><input type=\"checkbox\" checked> Structure</label></li><li><label><input type=\"checkbox\" checked> Partitions</label></li><li><label><input type=\"checkbox\"> Services</label></li><li><label><input type=\"checkbox\" checked> Dimensions</label></li><li><label><input type=\"checkbox\" checked> Revision clouds</label></li></ul>\n<span class=\"k\">Scale</span><div class=\"sg\"><button type=\"button\">1:100</button><button type=\"button\" class=\"on\">1:50</button><button type=\"button\">1:20</button></div></nav>"
    },
    {
      "key": "pane",
      "name": "Drawing pane",
      "html": "\n<section class=\"dp\"><figure><img src=\"{{ART hero}}\" alt=\"{{ARTALT hero}}\"><span class=\"cloud c1\"><i>1</i></span><span class=\"cloud c2\"><i>2</i></span></figure>\n<div class=\"dim\"><span>18,400 mm</span></div>\n<footer class=\"tb\"><div><span class=\"k\">Project</span><b>Kilcarn Depot</b></div><div><span class=\"k\">Sheet</span><b class=\"n\">KD2-A-204</b></div><div><span class=\"k\">Rev</span><b class=\"n\">C</b></div></footer></section>"
    },
    {
      "key": "revs",
      "name": "Revision list",
      "html": "\n<aside class=\"rv\"><span class=\"k\">Revision C · 2 clouds</span>\n<ol>\n  <li><i class=\"tag\">1</i><div><b>Grid F/4 — column moved 300 mm east</b><span class=\"n\">Instruction AI-041 · 09.06.26</span><p>Clash with the incoming duct at high level. Structural have confirmed the transfer beam is unaffected.</p></div></li>\n  <li><i class=\"tag\">2</i><div><b>Store 04 — door swing reversed</b><span class=\"n\">Instruction AI-042 · 09.06.26</span><p>Fire strategy requires escape in the direction of travel. No change to the ironmongery schedule.</p></div></li>\n</ol>\n<div class=\"ac\"><button type=\"button\" class=\"pri\">Mark reviewed</button><button type=\"button\" class=\"sec\">Raise a query</button></div></aside>"
    }
  ],
  "moduleCount": 3,
  "reorderable": false,
  "meta": {
    "id": "drafting-room-viewer",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-09-01T23:51:44+09:00",
    "updatedAt": "2026-09-01T23:51:44+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/drafting-room-viewer.json",
  "structure": "A 200px layer rail, a dimensioned drawing pane, and a revision list; the pane keeps its 32px margin and the title block sits inside it.",
  "html": "<div class=\"dz dz-drafting-room-viewer\" data-design=\"drafting-room-viewer\" data-theme=\"drafting-room\">\n<section class=\"dz-mod\" data-mod=\"layers\" aria-label=\"Layer rail\">\n<nav class=\"lr\"><span class=\"brand\">Drafting Room</span>\n<span class=\"k\">Sheet</span><b class=\"sh n\">KD2-A-204 · Rev C</b>\n<span class=\"k\">Layers</span>\n<ul><li><label><input type=\"checkbox\" checked> Grid</label></li><li><label><input type=\"checkbox\" checked> Structure</label></li><li><label><input type=\"checkbox\" checked> Partitions</label></li><li><label><input type=\"checkbox\"> Services</label></li><li><label><input type=\"checkbox\" checked> Dimensions</label></li><li><label><input type=\"checkbox\" checked> Revision clouds</label></li></ul>\n<span class=\"k\">Scale</span><div class=\"sg\"><button type=\"button\">1:100</button><button type=\"button\" class=\"on\">1:50</button><button type=\"button\">1:20</button></div></nav></section><section class=\"dz-mod\" data-mod=\"pane\" aria-label=\"Drawing pane\">\n<section class=\"dp\"><figure><img src=\"https://designlookbook.dev/assets/img/drafting-room-hero.webp\" alt=\"A large blueprint unrolled across a drafting table\"><span class=\"cloud c1\"><i>1</i></span><span class=\"cloud c2\"><i>2</i></span></figure>\n<div class=\"dim\"><span>18,400 mm</span></div>\n<footer class=\"tb\"><div><span class=\"k\">Project</span><b>Kilcarn Depot</b></div><div><span class=\"k\">Sheet</span><b class=\"n\">KD2-A-204</b></div><div><span class=\"k\">Rev</span><b class=\"n\">C</b></div></footer></section></section><section class=\"dz-mod\" data-mod=\"revs\" aria-label=\"Revision list\">\n<aside class=\"rv\"><span class=\"k\">Revision C · 2 clouds</span>\n<ol>\n  <li><i class=\"tag\">1</i><div><b>Grid F/4 — column moved 300 mm east</b><span class=\"n\">Instruction AI-041 · 09.06.26</span><p>Clash with the incoming duct at high level. Structural have confirmed the transfer beam is unaffected.</p></div></li>\n  <li><i class=\"tag\">2</i><div><b>Store 04 — door swing reversed</b><span class=\"n\">Instruction AI-042 · 09.06.26</span><p>Fire strategy requires escape in the direction of travel. No change to the ironmongery schedule.</p></div></li>\n</ol>\n<div class=\"ac\"><button type=\"button\" class=\"pri\">Mark reviewed</button><button type=\"button\" class=\"sec\">Raise a query</button></div></aside></section>\n</div>",
  "css": "\n.dz-drafting-room-viewer { background: var(--background); color: var(--foreground); font-family: var(--pv-body); display: grid; grid-template-columns: 200px 1fr 320px; min-height: 640px; }\n.dz-drafting-room-viewer .k { text-transform: uppercase; letter-spacing: .18em; font-size: 10px; font-weight: 600; color: var(--muted-foreground); display: block; }\n.dz-drafting-room-viewer .n { font-family: var(--pv-mono); font-variant-numeric: tabular-nums; font-size: 12px; }\n.dz-drafting-room-viewer .lr { border-right: 1px solid var(--primary); padding: 20px 16px; }\n.dz-drafting-room-viewer .brand { font-family: var(--pv-display); font-weight: 600; letter-spacing: -.02em; font-size: 18px; display: block; margin-bottom: 20px; }\n.dz-drafting-room-viewer .sh { display: block; font-size: 13px; margin: 4px 0 20px; }\n.dz-drafting-room-viewer .lr ul { list-style: none; margin: 8px 0 20px; padding: 0; }\n.dz-drafting-room-viewer .lr label { display: flex; gap: 9px; align-items: center; font-size: 13px; padding: 5px 0; }\n.dz-drafting-room-viewer .sg { display: flex; gap: 4px; margin-top: 8px; }\n.dz-drafting-room-viewer .sg button { font-family: var(--pv-mono); font-variant-numeric: tabular-nums; font-size: 12px; padding: 6px 10px; background: transparent; border: 1px solid var(--border); color: var(--foreground); cursor: pointer; border-radius: 0; }\n.dz-drafting-room-viewer .sg button.on { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); }\n.dz-drafting-room-viewer .dp { padding: 32px; border-right: 1px solid var(--primary); }\n.dz-drafting-room-viewer .dp figure { margin: 0; position: relative; border: 1px solid var(--primary); }\n.dz-drafting-room-viewer .dp img { width: 100%; height: 380px; object-fit: cover; display: block; filter: var(--img-filter); }\n.dz-drafting-room-viewer .cloud { position: absolute; border: 2px dashed var(--accent); }\n.dz-drafting-room-viewer .c1 { left: 18%; top: 22%; width: 150px; height: 96px; }\n.dz-drafting-room-viewer .c2 { right: 14%; bottom: 18%; width: 120px; height: 80px; }\n.dz-drafting-room-viewer .cloud i { position: absolute; top: -11px; left: -11px; width: 22px; height: 22px; font-family: var(--pv-mono); font-variant-numeric: tabular-nums; font-size: 12px; font-style: normal; display: grid; place-items: center; background: var(--accent); color: var(--accent-foreground); clip-path: polygon(50% 0, 100% 100%, 0 100%); padding-top: 6px; }\n.dz-drafting-room-viewer .dim { position: relative; height: 22px; margin-top: 8px;\n  background: linear-gradient(var(--primary), var(--primary)) center/100% 1px no-repeat; }\n.dz-drafting-room-viewer .dim::before, .dz-drafting-room-viewer .dim::after { content: \"\"; position: absolute; top: 0; bottom: 0; width: 1px; background: var(--primary); opacity: .55; }\n.dz-drafting-room-viewer .dim::before { left: 0; }\n.dz-drafting-room-viewer .dim::after { right: 0; }\n.dz-drafting-room-viewer .dim span { position: absolute; left: 50%; top: 2px; transform: translateX(-50%); background: var(--background); padding: 0 10px; font-family: var(--pv-mono); font-variant-numeric: tabular-nums; font-size: 12px; color: var(--primary); }\n.dz-drafting-room-viewer .tb { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--primary); margin-top: 16px; margin-left: auto; width: 380px; }\n.dz-drafting-room-viewer .tb div { padding: 8px 12px; border-right: 1px solid var(--border); }\n.dz-drafting-room-viewer .tb div:last-child { border-right: 0; }\n.dz-drafting-room-viewer .tb b { font-size: 13px; }\n.dz-drafting-room-viewer .rv { padding: 24px 20px; }\n.dz-drafting-room-viewer .rv ol { list-style: none; margin: 12px 0 20px; padding: 0; }\n.dz-drafting-room-viewer .rv li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; padding: 14px 0; border-top: 1px solid var(--border); }\n.dz-drafting-room-viewer .tag { font-family: var(--pv-mono); font-variant-numeric: tabular-nums; font-size: 12px; font-style: normal; width: 24px; height: 24px; display: grid; place-items: center; background: var(--accent); color: var(--accent-foreground); clip-path: polygon(50% 0, 100% 100%, 0 100%); padding-top: 7px; }\n.dz-drafting-room-viewer .rv b { display: block; font-size: 14px; }\n.dz-drafting-room-viewer .rv span { color: var(--muted-foreground); }\n.dz-drafting-room-viewer .rv p { margin: 7px 0 0; font-size: 12.5px; line-height: 1.55; }\n.dz-drafting-room-viewer .ac { display: flex; gap: 10px; }\n.dz-drafting-room-viewer button { font: inherit; text-transform: uppercase; letter-spacing: .18em; font-size: 10px; font-weight: 600; color: var(--muted-foreground); padding: 11px 16px; border-radius: 0; cursor: pointer; }\n.dz-drafting-room-viewer .pri { background: var(--primary); color: var(--primary-foreground); border: 0; }\n.dz-drafting-room-viewer .sec { background: transparent; color: var(--foreground); border: 1px solid var(--border); }\n",
  "requiredTheme": "/api/v1/themes/drafting-room.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Saira:wght@400;500;600;700&family=Be+Vietnam+Pro:wght@400;500;600;700&family=Fira+Code:wght@400;500;600;700&display=swap"
}