{
  "id": "fitting-room-returns",
  "name": "Return Setup",
  "theme": "fitting-room",
  "category": "Settings & Forms",
  "description": "Configuring returns, where every setting is expressed in days and the rail preview at the foot shows what those settings do to a real item.",
  "layout": "Ruled setting rows with mono day fields, then a live rail preview that redraws the current items under the chosen defaults.",
  "modules": [
    {
      "key": "head",
      "name": "Settings header",
      "html": "\n<header class=\"sh\"><span class=\"k\">Account · returns</span><h1>How your rail behaves</h1><p>These defaults apply to anything you take out from now on. Items already on the rail keep the terms they went out under.</p></header>"
    },
    {
      "key": "rows",
      "name": "Setting rows",
      "html": "\n<section class=\"st\">\n<div class=\"rw\"><span>Default rental length</span><span class=\"ct\"><input class=\"mn\" value=\"14\"><em>nights</em></span></div>\n<div class=\"rw\"><span>Remind me before an item is due</span><span class=\"ct\"><input class=\"mn\" value=\"3\"><em>days</em></span></div>\n<div class=\"rw\"><span>Auto-extend if I have a free slot</span><span class=\"ct\"><span class=\"tog\"><i></i></span></span></div>\n<div class=\"rw\"><span>Grace period before late nights are charged</span><span class=\"ct\"><input class=\"mn\" value=\"3\"><em>days</em></span></div>\n<div class=\"rw\"><span>Collection day</span><span class=\"ct\"><span class=\"dpick\"><span class=\"d\">M</span><span class=\"d on\">T</span><span class=\"d\">W</span><span class=\"d on\">T</span><span class=\"d\">F</span><span class=\"d\">S</span><span class=\"d\">S</span></span></span></div>\n</section>"
    },
    {
      "key": "preview",
      "name": "Rail preview",
      "html": "\n<section class=\"pv\"><span class=\"k\">Your rail under these settings</span><div class=\"rail\"><span class=\"today\" style=\"left:21.4%\"></span><div class=\"dy\"><span class=\"dn\">09</span></div><div class=\"dy\"><span class=\"dn\">10</span></div><div class=\"dy\"><span class=\"dn\">11</span></div><div class=\"dy\"><span class=\"dn\">12</span></div><div class=\"dy\"><span class=\"dn\">13</span></div><div class=\"dy\"><span class=\"dn\">14</span></div><div class=\"dy\"><span class=\"dn\">15</span></div><div class=\"dy\"><span class=\"dn\">16</span></div><div class=\"dy\"><span class=\"dn\">17</span></div><div class=\"dy\"><span class=\"dn\">18</span></div><div class=\"dy\"><span class=\"dn\">19</span></div><div class=\"dy\"><span class=\"dn\">20</span></div><div class=\"dy\"><span class=\"dn\">21</span></div><div class=\"dy\"><span class=\"dn\">22</span></div></div><div class=\"blocks\"><span class=\"bk late\" style=\"left:0;width:14%;top:0\">Overcoat · in grace until 12 Mar</span><span class=\"bk\" style=\"left:28.5%;width:14%;top:32px\">Silk shirt</span><span class=\"bk\" style=\"left:42.8%;width:21%;top:0\">Trousers</span><span class=\"bk\" style=\"left:57.1%;width:14%;top:64px\">Knit dress</span></div></section>"
    },
    {
      "key": "save",
      "name": "Save bar",
      "html": "\n<footer class=\"sv\"><p>Changing the grace period does not change what you already owe on the overcoat.</p><button class=\"pri\">Save settings</button></footer>"
    }
  ],
  "moduleCount": 4,
  "reorderable": true,
  "meta": {
    "id": "fitting-room-returns",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-09-02T01:37:40+09:00",
    "updatedAt": "2026-09-02T01:37:40+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/fitting-room-returns.json",
  "structure": "Ruled setting rows with mono day fields, then a live rail preview that redraws the current items under the chosen defaults.",
  "html": "<div class=\"dz dz-fitting-room-returns\" data-design=\"fitting-room-returns\" data-theme=\"fitting-room\">\n<section class=\"dz-mod\" data-mod=\"head\" aria-label=\"Settings header\">\n<header class=\"sh\"><span class=\"k\">Account · returns</span><h1>How your rail behaves</h1><p>These defaults apply to anything you take out from now on. Items already on the rail keep the terms they went out under.</p></header></section>\n<section class=\"dz-mod\" data-mod=\"rows\" aria-label=\"Setting rows\">\n<section class=\"st\">\n<div class=\"rw\"><span>Default rental length</span><span class=\"ct\"><input class=\"mn\" value=\"14\"><em>nights</em></span></div>\n<div class=\"rw\"><span>Remind me before an item is due</span><span class=\"ct\"><input class=\"mn\" value=\"3\"><em>days</em></span></div>\n<div class=\"rw\"><span>Auto-extend if I have a free slot</span><span class=\"ct\"><span class=\"tog\"><i></i></span></span></div>\n<div class=\"rw\"><span>Grace period before late nights are charged</span><span class=\"ct\"><input class=\"mn\" value=\"3\"><em>days</em></span></div>\n<div class=\"rw\"><span>Collection day</span><span class=\"ct\"><span class=\"dpick\"><span class=\"d\">M</span><span class=\"d on\">T</span><span class=\"d\">W</span><span class=\"d on\">T</span><span class=\"d\">F</span><span class=\"d\">S</span><span class=\"d\">S</span></span></span></div>\n</section></section>\n<section class=\"dz-mod\" data-mod=\"preview\" aria-label=\"Rail preview\">\n<section class=\"pv\"><span class=\"k\">Your rail under these settings</span><div class=\"rail\"><span class=\"today\" style=\"left:21.4%\"></span><div class=\"dy\"><span class=\"dn\">09</span></div><div class=\"dy\"><span class=\"dn\">10</span></div><div class=\"dy\"><span class=\"dn\">11</span></div><div class=\"dy\"><span class=\"dn\">12</span></div><div class=\"dy\"><span class=\"dn\">13</span></div><div class=\"dy\"><span class=\"dn\">14</span></div><div class=\"dy\"><span class=\"dn\">15</span></div><div class=\"dy\"><span class=\"dn\">16</span></div><div class=\"dy\"><span class=\"dn\">17</span></div><div class=\"dy\"><span class=\"dn\">18</span></div><div class=\"dy\"><span class=\"dn\">19</span></div><div class=\"dy\"><span class=\"dn\">20</span></div><div class=\"dy\"><span class=\"dn\">21</span></div><div class=\"dy\"><span class=\"dn\">22</span></div></div><div class=\"blocks\"><span class=\"bk late\" style=\"left:0;width:14%;top:0\">Overcoat · in grace until 12 Mar</span><span class=\"bk\" style=\"left:28.5%;width:14%;top:32px\">Silk shirt</span><span class=\"bk\" style=\"left:42.8%;width:21%;top:0\">Trousers</span><span class=\"bk\" style=\"left:57.1%;width:14%;top:64px\">Knit dress</span></div></section></section>\n<section class=\"dz-mod\" data-mod=\"save\" aria-label=\"Save bar\">\n<footer class=\"sv\"><p>Changing the grace period does not change what you already owe on the overcoat.</p><button class=\"pri\">Save settings</button></footer></section>\n</div>",
  "css": "\n.dz-fitting-room-returns { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 28px; max-width: 820px; }\n.dz-fitting-room-returns .k { text-transform: uppercase; letter-spacing: .15em; font-size: 10.5px; font-weight: 600; color: var(--muted-foreground); display: block; margin-bottom: 10px; }\n.dz-fitting-room-returns .mn { font-family: var(--pv-mono); font-size: 13px; }\n.dz-fitting-room-returns h1 { font-family: var(--pv-display); font-weight: 500; font-size: 32px; line-height: 1.18; letter-spacing: -.012em; margin: 0 0 10px; }\n.dz-fitting-room-returns .sh p { margin: 0 0 24px; font-size: 14.5px; line-height: 1.6; color: var(--muted-foreground); max-width: 62ch; }\n.dz-fitting-room-returns .rw { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--border); font-size: 15px; }\n.dz-fitting-room-returns .ct { display: flex; align-items: center; gap: 10px; }\n.dz-fitting-room-returns .ct input { width: 64px; background: var(--card); border: 1px solid var(--border); border-radius: 4px; color: var(--foreground); font: inherit; font-family: var(--pv-mono); font-size: 13px; padding: 8px 10px; text-align: center; }\n.dz-fitting-room-returns .ct input:focus { outline: none; border-color: var(--primary); }\n.dz-fitting-room-returns em { text-transform: uppercase; letter-spacing: .15em; font-size: 10.5px; font-weight: 600; font-style: normal; color: var(--muted-foreground); }\n.dz-fitting-room-returns .tog { display: inline-flex; width: 44px; height: 24px; border-radius: 9999px; background: var(--secondary); border: 1px solid var(--border); padding: 3px; }\n.dz-fitting-room-returns .tog i { width: 16px; height: 16px; border-radius: 9999px; background: var(--muted-foreground); }\n.dz-fitting-room-returns .dpick { display: flex; gap: 5px; }\n.dz-fitting-room-returns .d { width: 30px; height: 30px; display: grid; place-items: center; text-transform: uppercase; letter-spacing: .15em; font-size: 10.5px; font-weight: 600; border: 1px solid var(--border); border-radius: 4px; color: var(--muted-foreground); }\n.dz-fitting-room-returns .d.on { border-color: var(--primary); color: var(--primary); }\n.dz-fitting-room-returns .pv { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--border); }\n\n.dz-fitting-room-returns .rail { display: grid; grid-template-columns: repeat(14, 1fr); border-bottom: 1px solid var(--border); position: relative; }\n.dz-fitting-room-returns .rail .dy { padding: 8px 0 12px; text-align: center; border-right: 1px solid var(--border); }\n.dz-fitting-room-returns .rail .dy:last-child { border-right: 0; }\n.dz-fitting-room-returns .rail .di { text-transform: uppercase; letter-spacing: .15em; font-size: 10.5px; font-weight: 600; color: var(--muted-foreground); display: block; }\n.dz-fitting-room-returns .rail .dn { font-family: var(--pv-mono); font-size: 13px; display: block; margin-top: 4px; }\n.dz-fitting-room-returns .rail .today { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--accent); }\n.dz-fitting-room-returns .blocks { position: relative; height: 96px; margin-top: 8px; }\n.dz-fitting-room-returns .bk { position: absolute; height: 26px; background: var(--primary); color: var(--primary-foreground); border-radius: 4px; font-family: var(--pv-mono); font-size: 13px; font-size: 11px; display: flex; align-items: center; padding: 0 8px; overflow: hidden; white-space: nowrap; }\n.dz-fitting-room-returns .bk.late { background: var(--destructive); color: var(--primary-foreground); }\n.dz-fitting-room-returns .sv { display: flex; align-items: center; gap: 20px; margin-top: 24px; }\n.dz-fitting-room-returns .sv p { margin: 0; font-size: 13.5px; color: var(--muted-foreground); }\n.dz-fitting-room-returns .pri { margin-left: auto; background: var(--primary); color: var(--primary-foreground); border: 0; border-radius: 4px; padding: 12px 22px; font: inherit; font-size: 14.5px; cursor: pointer; }\n@media (prefers-reduced-motion: reduce) { .dz-fitting-room-returns *, .dz-fitting-room-returns *::before, .dz-fitting-room-returns *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }\n",
  "requiredTheme": "/api/v1/themes/fitting-room.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Frank+Ruhl+Libre:wght@400;500;600;700&family=Be+Vietnam+Pro:wght@400;500;600;700&family=M+PLUS+1+Code:wght@400;500;600;700&display=swap"
}