{
  "id": "tonic-room-intake",
  "name": "Intake Form",
  "theme": "tonic-room",
  "category": "Settings & Forms",
  "description": "The medication list a pharmacist actually reads: one row per item with amount, frequency and duration as three separate inputs rather than one free-text field.",
  "layout": "A repeating three-cell row that mirrors the specification block used everywhere else, with a running interaction check pinned beneath it.",
  "modules": [
    {
      "key": "head",
      "name": "Intake header",
      "html": "\n<header class=\"ih\"><span class=\"k\">Step 2 of 4</span><h1>What are you already taking?</h1><p>Enter each item as a dose, not as a name. “Two puffs as needed” and “200 µg twice daily” are different facts and only one of them can be checked.</p></header>"
    },
    {
      "key": "rows",
      "name": "Medication rows",
      "html": "\n<section class=\"mr\">\n<div class=\"hd\"><span>Item</span><span>Amount</span><span>Frequency</span><span>Duration</span><span></span></div>\n<div class=\"rw\"><input class=\"nm\" value=\"Levothyroxine\"><input class=\"mn\" value=\"75 µg\"><input class=\"mn\" value=\"1× daily\"><input class=\"mn\" value=\"ongoing\"><button class=\"rm\">Remove</button></div>\n<div class=\"rw\"><input class=\"nm\" value=\"Bendroflumethiazide\"><input class=\"mn\" value=\"2.5 mg\"><input class=\"mn\" value=\"1× daily\"><input class=\"mn\" value=\"ongoing\"><button class=\"rm\">Remove</button></div>\n<div class=\"rw\"><input class=\"nm\" value=\"Cholecalciferol\"><input class=\"mn\" value=\"1000 IU\"><input class=\"mn\" value=\"1× daily\"><input class=\"mn\" value=\"90 days\"><button class=\"rm\">Remove</button></div>\n<button class=\"add\">Add another item</button>\n</section>"
    },
    {
      "key": "check",
      "name": "Interaction check",
      "html": "\n<section class=\"wn\"><span class=\"k\">One interaction found</span><p><b>Bendroflumethiazide</b> (a thiazide diuretic) with <b>Cholecalciferol</b> at 1000 IU or above can raise serum calcium. This does not stop the order; it holds it for a pharmacist to look at, and they will call you if it matters.</p></section>"
    },
    {
      "key": "next",
      "name": "Continue bar",
      "html": "\n<footer class=\"nb\"><span class=\"mn\">3 items · 1 held for review</span><button class=\"gh\">Back</button><button class=\"pri\">Continue</button></footer>"
    }
  ],
  "moduleCount": 4,
  "reorderable": true,
  "meta": {
    "id": "tonic-room-intake",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-09-02T01:09:36+09:00",
    "updatedAt": "2026-09-02T01:09:36+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/tonic-room-intake.json",
  "structure": "A repeating three-cell row that mirrors the specification block used everywhere else, with a running interaction check pinned beneath it.",
  "html": "<div class=\"dz dz-tonic-room-intake\" data-design=\"tonic-room-intake\" data-theme=\"tonic-room\">\n<section class=\"dz-mod\" data-mod=\"head\" aria-label=\"Intake header\">\n<header class=\"ih\"><span class=\"k\">Step 2 of 4</span><h1>What are you already taking?</h1><p>Enter each item as a dose, not as a name. “Two puffs as needed” and “200 µg twice daily” are different facts and only one of them can be checked.</p></header></section>\n<section class=\"dz-mod\" data-mod=\"rows\" aria-label=\"Medication rows\">\n<section class=\"mr\">\n<div class=\"hd\"><span>Item</span><span>Amount</span><span>Frequency</span><span>Duration</span><span></span></div>\n<div class=\"rw\"><input class=\"nm\" value=\"Levothyroxine\"><input class=\"mn\" value=\"75 µg\"><input class=\"mn\" value=\"1× daily\"><input class=\"mn\" value=\"ongoing\"><button class=\"rm\">Remove</button></div>\n<div class=\"rw\"><input class=\"nm\" value=\"Bendroflumethiazide\"><input class=\"mn\" value=\"2.5 mg\"><input class=\"mn\" value=\"1× daily\"><input class=\"mn\" value=\"ongoing\"><button class=\"rm\">Remove</button></div>\n<div class=\"rw\"><input class=\"nm\" value=\"Cholecalciferol\"><input class=\"mn\" value=\"1000 IU\"><input class=\"mn\" value=\"1× daily\"><input class=\"mn\" value=\"90 days\"><button class=\"rm\">Remove</button></div>\n<button class=\"add\">Add another item</button>\n</section></section>\n<section class=\"dz-mod\" data-mod=\"check\" aria-label=\"Interaction check\">\n<section class=\"wn\"><span class=\"k\">One interaction found</span><p><b>Bendroflumethiazide</b> (a thiazide diuretic) with <b>Cholecalciferol</b> at 1000 IU or above can raise serum calcium. This does not stop the order; it holds it for a pharmacist to look at, and they will call you if it matters.</p></section></section>\n<section class=\"dz-mod\" data-mod=\"next\" aria-label=\"Continue bar\">\n<footer class=\"nb\"><span class=\"mn\">3 items · 1 held for review</span><button class=\"gh\">Back</button><button class=\"pri\">Continue</button></footer></section>\n</div>",
  "css": "\n.dz-tonic-room-intake { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 28px; max-width: 980px; }\n.dz-tonic-room-intake .k { text-transform: uppercase; letter-spacing: .13em; font-size: 10.5px; font-weight: 700; color: var(--muted-foreground); }\n.dz-tonic-room-intake .mn { font-family: var(--pv-mono); }\n.dz-tonic-room-intake h1 { font-family: var(--pv-display); font-weight: 700; letter-spacing: -.02em; font-size: 32px; line-height: 1.18; margin: 6px 0 8px; }\n.dz-tonic-room-intake .ih p { margin: 0 0 24px; font-size: 15px; line-height: 1.62; color: var(--muted-foreground); max-width: 64ch; }\n.dz-tonic-room-intake .mr { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px; }\n.dz-tonic-room-intake .hd, .dz-tonic-room-intake .rw { display: grid; grid-template-columns: 1fr 130px 130px 130px 90px; gap: 12px; align-items: center; }\n.dz-tonic-room-intake .hd { text-transform: uppercase; letter-spacing: .13em; font-size: 10.5px; font-weight: 700; color: var(--muted-foreground); padding-bottom: 8px; border-bottom: 1px solid var(--border); }\n.dz-tonic-room-intake .rw { padding: 10px 0; border-bottom: 1px solid var(--border); }\n.dz-tonic-room-intake input { background: transparent; border: 1px solid transparent; border-radius: 8px; color: var(--foreground); font: inherit; font-size: 15px; padding: 8px 10px; }\n.dz-tonic-room-intake input:focus { outline: none; border-color: var(--primary); background: var(--background); }\n.dz-tonic-room-intake input.mn { font-family: var(--pv-mono); font-size: 13px; }\n.dz-tonic-room-intake .rm { background: transparent; border: 0; color: var(--muted-foreground); font: inherit; font-size: 13px; cursor: pointer; }\n.dz-tonic-room-intake .add { margin-top: 14px; background: transparent; border: 1px dashed var(--border); border-radius: 9999px; color: var(--primary); font: inherit; font-weight: 600; padding: 10px 18px; cursor: pointer; }\n.dz-tonic-room-intake .wn { margin-top: 24px; border-left: 3px solid var(--destructive); background: color-mix(in oklab, var(--destructive) 8%, transparent); padding: 14px 18px; border-radius: 0 10px 10px 0; }\n.dz-tonic-room-intake .wn p { margin: 6px 0 0; font-size: 15px; line-height: 1.62; }\n.dz-tonic-room-intake .nb { display: flex; align-items: center; gap: 12px; margin-top: 24px; }\n.dz-tonic-room-intake .nb .mn { font-size: 12.5px; color: var(--muted-foreground); margin-right: auto; }\n.dz-tonic-room-intake button.pri { background: var(--primary); color: var(--primary-foreground); border: 0; border-radius: 9999px; padding: 13px 24px; font: inherit; font-weight: 600; cursor: pointer; }\n.dz-tonic-room-intake button.gh { background: transparent; color: var(--primary); border: 1px solid var(--primary); border-radius: 9999px; padding: 13px 24px; font: inherit; font-weight: 600; cursor: pointer; }\n@media (prefers-reduced-motion: reduce) { .dz-tonic-room-intake *, .dz-tonic-room-intake *::before, .dz-tonic-room-intake *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }\n",
  "requiredTheme": "/api/v1/themes/tonic-room.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Gabarito:wght@400;500;600;700&family=Manrope:wght@400;500;600;700&family=Fira+Code:wght@400;500;600;700&display=swap"
}