{
  "id": "chancery-lane-drafting",
  "name": "Drafting Desk",
  "theme": "chancery-lane",
  "category": "App Shell",
  "description": "The working shell: a clause tree on the left, the locked document column in the middle, and the same 120px rail on the right that the reading view uses.",
  "layout": "Three regions — a 240px clause tree, the 68ch column, the 120px rail — with the middle column identical in width to every other screen in the system.",
  "modules": [
    {
      "key": "chrome",
      "name": "Application bar",
      "html": "\n<header class=\"ap\"><span class=\"lg\">Chancery</span><nav><a class=\"on\" href=\"#\">Draft</a><a href=\"#\">Compare</a><a href=\"#\">Execute</a><a href=\"#\">Archive</a></nav><span class=\"st\">ARD-MSA-0072 · locked by you</span></header>"
    },
    {
      "key": "tree",
      "name": "Clause tree",
      "html": "\n<nav class=\"tr\"><span class=\"k\">Clauses</span><ul>\n<li><a href=\"#\"><b>1.</b> Definitions</a></li>\n<li><a href=\"#\"><b>2.</b> Term</a></li>\n<li><a href=\"#\"><b>3.</b> Services</a></li>\n<li class=\"on\"><a href=\"#\"><b>4.</b> Fees and Payment</a></li>\n<li class=\"ch\"><a href=\"#\"><b>4.1</b> Invoicing</a></li>\n<li class=\"ch\"><a href=\"#\"><b>4.2</b> Increases</a></li>\n<li><a href=\"#\"><b>5.</b> Warranties</a></li>\n<li><a href=\"#\"><b>6.</b> Limitation of Liability</a></li>\n<li><a href=\"#\"><b>7.</b> Termination</a></li>\n</ul></nav>"
    },
    {
      "key": "edit",
      "name": "Editing column",
      "html": "\n<div class=\"doc\"><div class=\"bd\">\n<section class=\"cl\"><span class=\"no\">4.</span><h2>Fees and Payment</h2></section>\n<section class=\"cl foc\"><span class=\"no\">4.1</span><p contenteditable=\"false\">The Client shall pay the Charges set out in Schedule 2 within thirty (30) days of the date of a correctly rendered invoice.<span class=\"cur\"></span></p></section>\n<section class=\"cl\"><span class=\"no\">4.2</span><p>The Supplier may increase the Charges once in any twelve (12) month period on not less than sixty (60) days' written notice.</p></section>\n</div><aside class=\"rl\"><div class=\"mk\"><span class=\"c\">Editing</span><span class=\"l\">4.1</span></div></aside></div>"
    },
    {
      "key": "foot",
      "name": "Status foot",
      "html": "\n<footer class=\"ft\"><span>68ch measure · locked</span><span>Autosaved 12:04</span><span class=\"ok\">Balanced · 0 unresolved defined terms</span></footer>"
    }
  ],
  "moduleCount": 4,
  "reorderable": true,
  "meta": {
    "id": "chancery-lane-drafting",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-09-02T01:04:39+09:00",
    "updatedAt": "2026-09-02T01:04:39+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/chancery-lane-drafting.json",
  "structure": "Three regions — a 240px clause tree, the 68ch column, the 120px rail — with the middle column identical in width to every other screen in the system.",
  "html": "<div class=\"dz dz-chancery-lane-drafting\" data-design=\"chancery-lane-drafting\" data-theme=\"chancery-lane\">\n<section class=\"dz-mod\" data-mod=\"chrome\" aria-label=\"Application bar\">\n<header class=\"ap\"><span class=\"lg\">Chancery</span><nav><a class=\"on\" href=\"#\">Draft</a><a href=\"#\">Compare</a><a href=\"#\">Execute</a><a href=\"#\">Archive</a></nav><span class=\"st\">ARD-MSA-0072 · locked by you</span></header></section>\n<section class=\"dz-mod\" data-mod=\"tree\" aria-label=\"Clause tree\">\n<nav class=\"tr\"><span class=\"k\">Clauses</span><ul>\n<li><a href=\"#\"><b>1.</b> Definitions</a></li>\n<li><a href=\"#\"><b>2.</b> Term</a></li>\n<li><a href=\"#\"><b>3.</b> Services</a></li>\n<li class=\"on\"><a href=\"#\"><b>4.</b> Fees and Payment</a></li>\n<li class=\"ch\"><a href=\"#\"><b>4.1</b> Invoicing</a></li>\n<li class=\"ch\"><a href=\"#\"><b>4.2</b> Increases</a></li>\n<li><a href=\"#\"><b>5.</b> Warranties</a></li>\n<li><a href=\"#\"><b>6.</b> Limitation of Liability</a></li>\n<li><a href=\"#\"><b>7.</b> Termination</a></li>\n</ul></nav></section>\n<section class=\"dz-mod\" data-mod=\"edit\" aria-label=\"Editing column\">\n<div class=\"doc\"><div class=\"bd\">\n<section class=\"cl\"><span class=\"no\">4.</span><h2>Fees and Payment</h2></section>\n<section class=\"cl foc\"><span class=\"no\">4.1</span><p contenteditable=\"false\">The Client shall pay the Charges set out in Schedule 2 within thirty (30) days of the date of a correctly rendered invoice.<span class=\"cur\"></span></p></section>\n<section class=\"cl\"><span class=\"no\">4.2</span><p>The Supplier may increase the Charges once in any twelve (12) month period on not less than sixty (60) days' written notice.</p></section>\n</div><aside class=\"rl\"><div class=\"mk\"><span class=\"c\">Editing</span><span class=\"l\">4.1</span></div></aside></div></section>\n<section class=\"dz-mod\" data-mod=\"foot\" aria-label=\"Status foot\">\n<footer class=\"ft\"><span>68ch measure · locked</span><span>Autosaved 12:04</span><span class=\"ok\">Balanced · 0 unresolved defined terms</span></footer></section>\n</div>",
  "css": "\n.dz-chancery-lane-drafting { background: var(--background); color: var(--foreground); font-family: var(--pv-body); display: grid; grid-template-rows: auto 1fr auto; min-height: 640px; }\n.dz-chancery-lane-drafting .k { text-transform: uppercase; letter-spacing: .16em; font-size: 10.5px; font-weight: 600; color: var(--muted-foreground); }\n.dz-chancery-lane-drafting .ap { display: flex; align-items: center; gap: 26px; padding: 12px 32px; border-bottom: 1px solid var(--border); background: var(--card); }\n.dz-chancery-lane-drafting .lg { font-family: var(--pv-display); font-weight: 600; font-size: 20px; }\n.dz-chancery-lane-drafting .ap nav { display: flex; gap: 18px; }\n.dz-chancery-lane-drafting .ap a { color: var(--muted-foreground); text-decoration: none; font-size: 14px; padding-bottom: 2px; }\n.dz-chancery-lane-drafting .ap a.on { color: var(--foreground); border-bottom: 2px solid var(--primary); }\n.dz-chancery-lane-drafting .st { font-family: var(--pv-mono); font-size: 12.5px; color: var(--muted-foreground); margin-left: auto; }\n.dz-chancery-lane-drafting .bd2 { display: contents; }\n.dz-chancery-lane-drafting > .tr { grid-row: 2; }\n.dz-chancery-lane-drafting .tr { width: 240px; border-right: 1px solid var(--border); padding: 20px 16px; position: absolute; }\n.dz-chancery-lane-drafting { position: relative; }\n.dz-chancery-lane-drafting .tr ul { list-style: none; margin: 10px 0 0; padding: 0; }\n.dz-chancery-lane-drafting .tr li { margin-bottom: 2px; }\n.dz-chancery-lane-drafting .tr a { display: block; padding: 5px 8px; color: var(--foreground); text-decoration: none; font-size: 14px; border-radius: 2px; }\n.dz-chancery-lane-drafting .tr b { font-family: var(--pv-mono); font-size: 12.5px; color: var(--muted-foreground); font-weight: 400; margin-right: 8px; }\n.dz-chancery-lane-drafting .tr li.ch a { padding-left: 26px; }\n.dz-chancery-lane-drafting .tr li.on a { background: var(--secondary); }\n.dz-chancery-lane-drafting .doc { display: grid; grid-template-columns: minmax(0, 68ch) 120px; gap: 26px; }\n.dz-chancery-lane-drafting .doc { margin: 24px 32px 24px 272px; max-width: calc(68ch + 146px); }\n.dz-chancery-lane-drafting .cl { display: grid; grid-template-columns: 52px 1fr; align-items: baseline; margin-bottom: 16px; }\n.dz-chancery-lane-drafting .no { font-family: var(--pv-mono); font-size: 12.5px; color: var(--muted-foreground); }\n.dz-chancery-lane-drafting .cl h2 { font-family: var(--pv-display); font-weight: 600; font-size: 20px; margin: 0; }\n.dz-chancery-lane-drafting .cl p { margin: 0; font-size: 16px; line-height: 1.7; }\n.dz-chancery-lane-drafting .foc { border-left: 2px solid var(--accent); margin-left: -14px; padding-left: 12px; }\n.dz-chancery-lane-drafting .cur { display: inline-block; width: 1px; height: 1em; background: var(--primary); vertical-align: text-bottom; margin-left: 1px; }\n.dz-chancery-lane-drafting .rl { border-left: 1px solid var(--border); padding-left: 14px; }\n.dz-chancery-lane-drafting .mk .c { font-family: var(--pv-mono); font-size: 12.5px; display: block; color: var(--accent); }\n.dz-chancery-lane-drafting .mk .l { text-transform: uppercase; letter-spacing: .16em; font-size: 10.5px; font-weight: 600; color: var(--muted-foreground); }\n.dz-chancery-lane-drafting .ft { display: flex; gap: 26px; padding: 10px 32px; border-top: 1px solid var(--border); font-family: var(--pv-mono); font-size: 12.5px; color: var(--muted-foreground); }\n.dz-chancery-lane-drafting .ok { margin-left: auto; }\n@media (prefers-reduced-motion: reduce) { .dz-chancery-lane-drafting *, .dz-chancery-lane-drafting *::before, .dz-chancery-lane-drafting *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }\n",
  "requiredTheme": "/api/v1/themes/chancery-lane.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Faustina:wght@400;500;600;700&family=Anonymous+Pro:wght@400;500;600;700&display=swap"
}