{
  "id": "quiet-clinic-messages",
  "name": "Secure Messages",
  "theme": "quiet-clinic",
  "category": "App Shell",
  "description": "A message thread that states the expected reply time at the top and marks clearly which messages came from a clinician versus an administrator.",
  "layout": "Two panes at 300px/1fr; the thread is not a chat bubble stream but stacked labelled blocks with generous spacing, and the composer states the reply expectation again.",
  "modules": [
    {
      "key": "list",
      "name": "Thread list",
      "html": "\n<aside class=\"tl\">\n  <div class=\"tl-h\"><h2>Messages</h2><button type=\"button\">New</button></div>\n  <ul>\n    <li class=\"on\"><b>About my inhaler</b><span>Dr Sandhu · 2 days ago</span><em>Replied</em></li>\n    <li><b>Repeat prescription query</b><span>Reception · 1 week ago</span><em>Closed</em></li>\n    <li><b>Changing my address</b><span>Reception · 3 weeks ago</span><em>Closed</em></li>\n  </ul>\n</aside>"
    },
    {
      "key": "thread",
      "name": "Message thread",
      "html": "\n<section class=\"th\">\n  <header class=\"th-h\"><h1>About my inhaler</h1><p>Started 10 July · replies usually within 2 working days</p></header>\n  <div class=\"msgs\">\n    <article class=\"me\"><header><b>You</b><time>10 July, 14:02</time></header><p>I have been using the brown inhaler every morning since the appointment but I am not sure I am doing it right. Is there a way to check?</p></article>\n    <article class=\"them\"><header><b>Sara Halvorsen</b><span class=\"role\">Respiratory nurse</span><time>11 July, 09:14</time></header><p>Very common and worth checking. I run a technique clinic on Tuesdays — ten minutes, no referral needed. Would you like me to book you in?</p></article>\n    <article class=\"me\"><header><b>You</b><time>11 July, 19:40</time></header><p>Yes please, any Tuesday works.</p></article>\n    <article class=\"them\"><header><b>Sara Halvorsen</b><span class=\"role\">Respiratory nurse</span><time>12 July, 08:30</time></header><p>Booked for Tuesday 22 July at 11:00, ground floor room 2. Bring the inhaler you actually use, not a spare.</p></article>\n  </div>\n</section>"
    },
    {
      "key": "composer",
      "name": "Reply composer",
      "html": "\n<footer class=\"cp\"><label for=\"qc-ms-r\">Reply</label><textarea id=\"qc-ms-r\" rows=\"3\" placeholder=\"Type your message\"></textarea><div class=\"cp-b\"><span>Not monitored out of hours. For urgent help call 111.</span><button type=\"button\">Send</button></div></footer>"
    }
  ],
  "moduleCount": 3,
  "reorderable": false,
  "meta": {
    "id": "quiet-clinic-messages",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-08-29T18:59:53+09:00",
    "updatedAt": "2026-08-29T18:59:53+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/quiet-clinic-messages.json",
  "structure": "Two panes at 300px/1fr; the thread is not a chat bubble stream but stacked labelled blocks with generous spacing, and the composer states the reply expectation again.",
  "html": "<div class=\"dz dz-quiet-clinic-messages\" data-design=\"quiet-clinic-messages\" data-theme=\"quiet-clinic\">\n<section class=\"dz-mod\" data-mod=\"list\" aria-label=\"Thread list\">\n<aside class=\"tl\">\n  <div class=\"tl-h\"><h2>Messages</h2><button type=\"button\">New</button></div>\n  <ul>\n    <li class=\"on\"><b>About my inhaler</b><span>Dr Sandhu · 2 days ago</span><em>Replied</em></li>\n    <li><b>Repeat prescription query</b><span>Reception · 1 week ago</span><em>Closed</em></li>\n    <li><b>Changing my address</b><span>Reception · 3 weeks ago</span><em>Closed</em></li>\n  </ul>\n</aside></section><section class=\"dz-mod\" data-mod=\"thread\" aria-label=\"Message thread\">\n<section class=\"th\">\n  <header class=\"th-h\"><h1>About my inhaler</h1><p>Started 10 July · replies usually within 2 working days</p></header>\n  <div class=\"msgs\">\n    <article class=\"me\"><header><b>You</b><time>10 July, 14:02</time></header><p>I have been using the brown inhaler every morning since the appointment but I am not sure I am doing it right. Is there a way to check?</p></article>\n    <article class=\"them\"><header><b>Sara Halvorsen</b><span class=\"role\">Respiratory nurse</span><time>11 July, 09:14</time></header><p>Very common and worth checking. I run a technique clinic on Tuesdays — ten minutes, no referral needed. Would you like me to book you in?</p></article>\n    <article class=\"me\"><header><b>You</b><time>11 July, 19:40</time></header><p>Yes please, any Tuesday works.</p></article>\n    <article class=\"them\"><header><b>Sara Halvorsen</b><span class=\"role\">Respiratory nurse</span><time>12 July, 08:30</time></header><p>Booked for Tuesday 22 July at 11:00, ground floor room 2. Bring the inhaler you actually use, not a spare.</p></article>\n  </div>\n</section></section><section class=\"dz-mod\" data-mod=\"composer\" aria-label=\"Reply composer\">\n<footer class=\"cp\"><label for=\"qc-ms-r\">Reply</label><textarea id=\"qc-ms-r\" rows=\"3\" placeholder=\"Type your message\"></textarea><div class=\"cp-b\"><span>Not monitored out of hours. For urgent help call 111.</span><button type=\"button\">Send</button></div></footer></section>\n</div>",
  "css": "\n.dz-quiet-clinic-messages { background: var(--background); color: var(--foreground); font-family: var(--pv-body); display: grid; grid-template-columns: 300px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; min-height: 540px; }\n.dz-quiet-clinic-messages .tl { grid-row: 1 / -1; background: var(--muted); padding: 20px 18px; }\n.dz-quiet-clinic-messages .tl-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }\n.dz-quiet-clinic-messages .tl-h h2 { font-size: 20px; font-weight: 700; margin: 0; }\n.dz-quiet-clinic-messages .tl-h button { font: inherit; font-size: 15px; min-height: 48px; padding: 0 20px; border: 0; border-radius: var(--pv-radius); background: var(--primary); color: var(--primary-foreground); cursor: pointer; }\n.dz-quiet-clinic-messages .tl ul { list-style: none; margin: 0; padding: 0; }\n.dz-quiet-clinic-messages .tl li { padding: 14px 16px; border-radius: var(--pv-radius); cursor: pointer; margin-bottom: 6px; transition: background var(--dur) var(--ease); }\n.dz-quiet-clinic-messages .tl li:hover { background: var(--background); }\n.dz-quiet-clinic-messages .tl li.on { background: var(--card); box-shadow: 0 2px 10px color-mix(in srgb, var(--foreground) 8%, transparent); }\n.dz-quiet-clinic-messages .tl b { display: block; font-size: 16.5px; font-weight: 600; }\n.dz-quiet-clinic-messages .tl span { display: block; margin: 3px 0 6px; font-size: 14px; color: var(--muted-foreground); }\n.dz-quiet-clinic-messages .tl em { font-style: normal; font-size: 13.5px; color: var(--primary); }\n.dz-quiet-clinic-messages .th { padding: 22px 30px 10px; overflow-y: auto; }\n.dz-quiet-clinic-messages .th-h { padding-bottom: 16px; border-bottom: var(--pv-bw) solid var(--border); margin-bottom: 8px; }\n.dz-quiet-clinic-messages .th-h h1 { font-size: 26px; font-weight: 700; margin: 0 0 4px; }\n.dz-quiet-clinic-messages .th-h p { margin: 0; font-size: 15px; color: var(--muted-foreground); }\n.dz-quiet-clinic-messages .msgs article { padding: 20px 0; border-bottom: var(--pv-bw) solid var(--border); max-width: 60ch; }\n.dz-quiet-clinic-messages .msgs header { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }\n.dz-quiet-clinic-messages .msgs b { font-size: 16.5px; font-weight: 700; }\n.dz-quiet-clinic-messages .role { font-size: 14px; color: var(--primary); }\n.dz-quiet-clinic-messages .msgs time { margin-left: auto; font-size: 14px; color: var(--muted-foreground); }\n.dz-quiet-clinic-messages .msgs p { margin: 0; font-size: 17px; line-height: 1.72; }\n.dz-quiet-clinic-messages .msgs .me { padding-left: 0; }\n.dz-quiet-clinic-messages .msgs .them { border-left: 4px solid var(--primary); padding-left: 18px; }\n.dz-quiet-clinic-messages .cp { padding: 16px 30px 20px; background: var(--card); border-top: var(--pv-bw) solid var(--border); }\n.dz-quiet-clinic-messages .cp label { display: block; font-size: 16px; font-weight: 600; margin-bottom: 8px; }\n.dz-quiet-clinic-messages .cp textarea { width: 100%; font: inherit; font-size: 17px; line-height: 1.6; padding: 14px 16px; border: 2px solid var(--border); border-radius: var(--pv-radius); background: var(--background); color: var(--foreground); resize: vertical; }\n.dz-quiet-clinic-messages .cp textarea:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }\n.dz-quiet-clinic-messages .cp-b { display: flex; align-items: center; gap: 20px; margin-top: 12px; }\n.dz-quiet-clinic-messages .cp-b span { font-size: 14.5px; color: var(--muted-foreground); }\n.dz-quiet-clinic-messages .cp-b button { margin-left: auto; font: inherit; font-size: 16px; font-weight: 600; min-height: 52px; padding: 0 30px; border: 0; border-radius: var(--pv-radius); background: var(--primary); color: var(--primary-foreground); cursor: pointer; transition: opacity var(--dur) var(--ease); }\n.dz-quiet-clinic-messages .cp-b button:hover { opacity: .9; }\n@media (prefers-reduced-motion: reduce) { .dz-quiet-clinic-messages *, .dz-quiet-clinic-messages *::before, .dz-quiet-clinic-messages *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }",
  "requiredTheme": "/api/v1/themes/quiet-clinic.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap"
}