{
  "id": "craft-zine-editor-desk",
  "name": "Editor Desk",
  "theme": "craft-zine",
  "category": "App Shell",
  "description": "A three-pane editing shell where the middle pane is a queue of submissions and the right pane is the piece itself, still set in the reading face.",
  "layout": "Rail / queue / reader at 160px / 260px / rest; the queue rows carry a status bar in the accent and the reader keeps the same 60-character measure as the printed page.",
  "modules": [
    {
      "key": "rail",
      "name": "Section rail",
      "html": "\n<nav class=\"rail\">\n  <span class=\"rail-brand\">Offcut</span>\n  <a href=\"#\" class=\"on\">Inbox <b>12</b></a>\n  <a href=\"#\">Assigned <b>4</b></a>\n  <a href=\"#\">In edit <b>3</b></a>\n  <a href=\"#\">Scheduled</a>\n  <a href=\"#\">Archive</a>\n  <span class=\"rail-foot\">Issue 12 closes in 9 days</span>\n</nav>"
    },
    {
      "key": "queue",
      "name": "Submission queue",
      "html": "\n<div class=\"queue\">\n  <div class=\"queue-head\">Inbox<span>12</span></div>\n  <ul>\n    <li class=\"on\"><h4>The jig drawer</h4><p>P. Sandhu · 1,900 words</p><span class=\"st st-new\">New</span></li>\n    <li><h4>Second press, first year</h4><p>J. Wold · 3,100 words</p><span class=\"st st-read\">Reading</span></li>\n    <li><h4>On slow ink</h4><p>M. Kerr · 800 words</p><span class=\"st st-new\">New</span></li>\n    <li><h4>What the bindery hears</h4><p>C. Doe · 2,400 words</p><span class=\"st st-hold\">Held</span></li>\n  </ul>\n</div>"
    },
    {
      "key": "reader",
      "name": "Reader pane",
      "html": "\n<article class=\"reader\">\n  <div class=\"reader-bar\"><span>Submission 041</span><div><button type=\"button\">Hold</button><button type=\"button\" class=\"pri\">Assign</button></div></div>\n  <h1>The jig drawer</h1>\n  <p class=\"meta\">Priya Sandhu · submitted 4 March · 1,900 words</p>\n  <p>Every workshop has a drawer nobody photographs. It holds the jigs — the small wooden and steel things made to hold one part at one angle for one job that happened once.</p>\n  <p>They are the most specific objects in the building. A jig is a frozen decision. It says: this is exactly how far, this is exactly how square, and we are not going to relitigate it.</p>\n  <p>I asked eleven makers to open theirs. Nobody refused, and everybody apologised for the mess.</p>\n</article>"
    }
  ],
  "moduleCount": 3,
  "reorderable": true,
  "meta": {
    "id": "craft-zine-editor-desk",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-08-29T18:14:56+09:00",
    "updatedAt": "2026-08-29T18:14:56+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/craft-zine-editor-desk.json",
  "structure": "Rail / queue / reader at 160px / 260px / rest; the queue rows carry a status bar in the accent and the reader keeps the same 60-character measure as the printed page.",
  "html": "<div class=\"dz dz-craft-zine-editor-desk\" data-design=\"craft-zine-editor-desk\" data-theme=\"craft-zine\">\n<section class=\"dz-mod\" data-mod=\"rail\" aria-label=\"Section rail\">\n<nav class=\"rail\">\n  <span class=\"rail-brand\">Offcut</span>\n  <a href=\"#\" class=\"on\">Inbox <b>12</b></a>\n  <a href=\"#\">Assigned <b>4</b></a>\n  <a href=\"#\">In edit <b>3</b></a>\n  <a href=\"#\">Scheduled</a>\n  <a href=\"#\">Archive</a>\n  <span class=\"rail-foot\">Issue 12 closes in 9 days</span>\n</nav></section>\n<section class=\"dz-mod\" data-mod=\"queue\" aria-label=\"Submission queue\">\n<div class=\"queue\">\n  <div class=\"queue-head\">Inbox<span>12</span></div>\n  <ul>\n    <li class=\"on\"><h4>The jig drawer</h4><p>P. Sandhu · 1,900 words</p><span class=\"st st-new\">New</span></li>\n    <li><h4>Second press, first year</h4><p>J. Wold · 3,100 words</p><span class=\"st st-read\">Reading</span></li>\n    <li><h4>On slow ink</h4><p>M. Kerr · 800 words</p><span class=\"st st-new\">New</span></li>\n    <li><h4>What the bindery hears</h4><p>C. Doe · 2,400 words</p><span class=\"st st-hold\">Held</span></li>\n  </ul>\n</div></section>\n<section class=\"dz-mod\" data-mod=\"reader\" aria-label=\"Reader pane\">\n<article class=\"reader\">\n  <div class=\"reader-bar\"><span>Submission 041</span><div><button type=\"button\">Hold</button><button type=\"button\" class=\"pri\">Assign</button></div></div>\n  <h1>The jig drawer</h1>\n  <p class=\"meta\">Priya Sandhu · submitted 4 March · 1,900 words</p>\n  <p>Every workshop has a drawer nobody photographs. It holds the jigs — the small wooden and steel things made to hold one part at one angle for one job that happened once.</p>\n  <p>They are the most specific objects in the building. A jig is a frozen decision. It says: this is exactly how far, this is exactly how square, and we are not going to relitigate it.</p>\n  <p>I asked eleven makers to open theirs. Nobody refused, and everybody apologised for the mess.</p>\n</article></section>\n</div>",
  "css": "\n.dz-craft-zine-editor-desk { background: var(--background); color: var(--foreground); font-family: var(--pv-body); display: grid; grid-template-columns: 160px 260px minmax(0, 1fr); min-height: 540px; }\n.dz-craft-zine-editor-desk .rail { background: var(--foreground); color: var(--background); padding: 20px 16px; display: flex; flex-direction: column; gap: 2px; }\n.dz-craft-zine-editor-desk .rail-brand { font-family: var(--pv-display); font-size: 19px; font-weight: 800; letter-spacing: -.03em; margin-bottom: 18px; }\n.dz-craft-zine-editor-desk .rail a { display: flex; justify-content: space-between; font-size: 13.5px; color: inherit; text-decoration: none; padding: 7px 9px; opacity: .72; border-left: 3px solid transparent; transition: opacity var(--dur) var(--ease), border-color var(--dur) var(--ease); }\n.dz-craft-zine-editor-desk .rail a:hover { opacity: 1; }\n.dz-craft-zine-editor-desk .rail a.on { opacity: 1; border-left-color: var(--primary); background: color-mix(in srgb, var(--background) 12%, transparent); }\n.dz-craft-zine-editor-desk .rail a b { font-family: var(--pv-mono); font-weight: 400; opacity: .7; }\n.dz-craft-zine-editor-desk .rail-foot { margin-top: auto; font-size: 11px; opacity: .6; line-height: 1.4; }\n.dz-craft-zine-editor-desk .queue { border-right: var(--pv-bw) solid var(--border); background: var(--muted); }\n.dz-craft-zine-editor-desk .queue-head { display: flex; justify-content: space-between; padding: 14px 16px; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-foreground); border-bottom: var(--pv-bw) solid var(--border); }\n.dz-craft-zine-editor-desk .queue ul { list-style: none; margin: 0; padding: 0; }\n.dz-craft-zine-editor-desk .queue li { padding: 12px 16px; border-bottom: var(--pv-bw) solid var(--border); cursor: pointer; border-left: 3px solid transparent; transition: background var(--dur) var(--ease); }\n.dz-craft-zine-editor-desk .queue li:hover { background: var(--card); }\n.dz-craft-zine-editor-desk .queue li.on { background: var(--card); border-left-color: var(--primary); }\n.dz-craft-zine-editor-desk .queue h4 { font-family: var(--pv-display); font-size: 14.5px; margin: 0 0 3px; letter-spacing: -.015em; }\n.dz-craft-zine-editor-desk .queue p { margin: 0 0 6px; font-size: 11.5px; color: var(--muted-foreground); }\n.dz-craft-zine-editor-desk .st { font-family: var(--pv-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; padding: 2px 6px; }\n.dz-craft-zine-editor-desk .st-new { background: var(--primary); color: var(--primary-foreground); }\n.dz-craft-zine-editor-desk .st-read { background: var(--secondary); color: var(--secondary-foreground); }\n.dz-craft-zine-editor-desk .st-hold { border: var(--pv-bw) solid var(--border); color: var(--muted-foreground); }\n.dz-craft-zine-editor-desk .reader { padding: 20px 34px 30px; max-width: 42rem; }\n.dz-craft-zine-editor-desk .reader-bar { display: flex; align-items: center; justify-content: space-between; padding-bottom: 12px; border-bottom: var(--pv-bw) solid var(--border); font-family: var(--pv-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-foreground); }\n.dz-craft-zine-editor-desk .reader-bar div { display: flex; gap: 8px; }\n.dz-craft-zine-editor-desk .reader-bar button { font: inherit; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; padding: 6px 12px; border: var(--pv-bw) solid var(--border); background: var(--card); color: var(--foreground); border-radius: var(--pv-radius-sm); cursor: pointer; }\n.dz-craft-zine-editor-desk .reader-bar .pri { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); }\n.dz-craft-zine-editor-desk .reader h1 { font-family: var(--pv-display); font-size: 32px; letter-spacing: -.035em; font-weight: 800; margin: 20px 0 6px; }\n.dz-craft-zine-editor-desk .reader .meta { margin: 0 0 20px; font-size: 12px; color: var(--muted-foreground); }\n.dz-craft-zine-editor-desk .reader p { font-size: 15.5px; line-height: 1.72; margin: 0 0 14px; }\n@media (prefers-reduced-motion: reduce) { .dz-craft-zine-editor-desk *, .dz-craft-zine-editor-desk *::before, .dz-craft-zine-editor-desk *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }",
  "requiredTheme": "/api/v1/themes/craft-zine.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@400;500;600;700&family=Public+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap"
}