@tryvitris/website-harness 0.0.0-stage → 0.1.0-beta.5

package/design-system/compositions/v2/clearwell-directory/components/study-clearwell-directory/styles.css

@@ -0,0 +1,3 @@
+.c-study-clearwell-directory{overflow-wrap:anywhere;max-width:100%;color:var(--color-text);font-family:var(--font-body)}.c-study-clearwell-directory h1,.c-study-clearwell-directory h2,.c-study-clearwell-directory h3{color:inherit;font-family:var(--font-display);font-weight:500}.c-study-clearwell-directory h1{font-size:clamp(2.6rem,6vw,6.5rem);line-height:1.06;letter-spacing:-.035em}.c-study-clearwell-directory h2{font-size:clamp(1.5rem,3vw,2.6rem);line-height:1.2}.c-study-clearwell-directory p,.c-study-clearwell-directory li{max-width:64ch;line-height:1.65}.c-study-clearwell-directory a{color:inherit;text-underline-offset:.2em}.c-study-clearwell-directory a:focus-visible,.c-study-clearwell-directory summary:focus-visible{outline:3px solid var(--color-focus);outline-offset:4px}.c-study-clearwell-directory nav{display:flex;gap:1.5rem;flex-wrap:wrap}.c-study-clearwell-directory nav a{display:inline-flex;align-items:center;min-height:44px}.c-study-clearwell-directory img,.c-study-clearwell-directory svg{max-width:100%;height:auto}.c-study-clearwell-directory .intro{font-size:clamp(1.2rem,2vw,1.7rem);max-width:44ch}.c-study-clearwell-directory .teaching{font-size:.85rem;max-width:70ch}.c-study-clearwell-directory footer{margin-top:5rem;padding-block:2rem;border-top:1px solid var(--color-border)}.c-study-clearwell-directory dl div{margin-bottom:1.5rem}.c-study-clearwell-directory dt{font-weight:700}.c-study-clearwell-directory dd{margin:.25rem 0 0}.c-study-clearwell-directory ol{padding-left:1.5rem}.c-study-clearwell-directory section{scroll-margin-top:2rem}
+.c-study-clearwell-directory {padding:2rem clamp(1rem,5vw,5rem)}.c-study-clearwell-directory header{border-bottom:3px solid var(--color-text);padding-bottom:1rem}.c-study-clearwell-directory .heading{padding:4rem 0 2rem}.c-study-clearwell-directory .choices{display:grid;grid-template-columns:1fr 1fr;gap:2rem}.c-study-clearwell-directory .choices>a{display:block;background:var(--color-surface-2);padding:2rem;text-decoration:none;border-left:6px solid var(--color-accent)}.c-study-clearwell-directory .choices span{text-decoration:underline}.c-study-clearwell-directory .preparation{margin:5rem 0;max-width:52rem}.c-study-clearwell-directory .detail{max-width:52rem;margin:4rem auto}.c-study-clearwell-directory .detail section{margin-top:4rem}@media(max-width:700px){.c-study-clearwell-directory .choices{grid-template-columns:1fr}.c-study-clearwell-directory .heading{padding-top:2rem}}
+.c-study-clearwell-directory .detail{max-width:none;display:grid;grid-template-columns:1fr 1fr;column-gap:5rem}.c-study-clearwell-directory .detail>h1,.c-study-clearwell-directory .detail>.intro,.c-study-clearwell-directory #monthly{grid-column:1/-1}.c-study-clearwell-directory .detail dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem;padding:2rem;background:var(--color-surface-2)}.c-study-clearwell-directory .detail>section{margin-top:2rem}@media(max-width:800px){.c-study-clearwell-directory .detail,.c-study-clearwell-directory .detail dl{display:block}}

package/design-system/compositions/v2/clearwell-directory/components/study-clearwell-directory/template.html

@@ -0,0 +1 @@
+<div class="c-study-clearwell-directory"><slot></slot></div>

package/design-system/compositions/v2/clearwell-directory/pages/detail/index.html

@@ -0,0 +1,5 @@
+---
+title: Clearwell / task directory Detail
+description: Start with the visitor’s bookkeeping decision; service choices lead before explanatory prose.
+---
+<study-clearwell-directory><header><nav aria-label="Primary"><a href="/">Clearwell</a><a href="/detail">How it works</a><a href="mailto:hello@example.test">Contact</a></nav></header><div class="detail"><h1>A month you can read.</h1><p class="intro">A clear sequence for handing over your records and understanding the result.</p><section id="monthly"><h2>Monthly support</h2><p>Reconciliation connects the transactions in your records with the monthly report. We agree the record format and handover date before work begins.</p><dl><div><dt>Included</dt><dd>Monthly reconciliation, monthly reporting and year-end handover.</dd></div><div><dt>Outside scope</dt><dd>Tax returns and investment advice.</dd></div><div><dt>First conversation</dt><dd>A sample of your records, the question you face and your reporting dates.</dd></div></dl></section><section id="handover"><h2>At year end</h2><p>Year-end handover organizes the records for your tax adviser. Tax returns and investment advice remain outside this service.</p></section><section><h2>Before a conversation</h2><ol><li>Bring a sample of your records.</li><li>Agree the scope together.</li><li>Set a monthly handover.</li></ol><a href="mailto:hello@example.test">Discuss your records</a></section></div><footer><p class="teaching">Fictional Vitris teaching study. No services are offered or customer outcomes implied.</p><p>Clearwell</p></footer></study-clearwell-directory>

package/design-system/compositions/v2/clearwell-directory/pages/index.html

@@ -0,0 +1,5 @@
+---
+title: Clearwell / task directory Home
+description: Start with the visitor’s bookkeeping decision; service choices lead before explanatory prose.
+---
+<study-clearwell-directory><header><nav aria-label="Primary"><a href="/">Clearwell</a><a href="/detail">How it works</a><a href="mailto:hello@example.test">Contact</a></nav></header><div class="heading"><p>Independent studios · bookkeeping</p><h1>What needs clearing up?</h1><p class="intro">Choose the records you want help understanding.</p></div><div class="choices"><a href="/detail#monthly"><h2>Keep the month clear</h2><p>Reconciliation and reporting</p><span>Explore monthly support →</span></a><a href="/detail#handover"><h2>Prepare the handover</h2><p>Organize the year-end records</p><span>Understand the handover →</span></a></div><section class="preparation"><h2>A small start, with a clear scope.</h2><p>Bring a sample of your records. We’ll agree the work together before setting a monthly handover.</p><a href="/detail">Read the process →</a></section><footer><p class="teaching">Fictional Vitris teaching study. No services are offered or customer outcomes implied.</p><p>Clearwell</p></footer></study-clearwell-directory>

package/design-system/compositions/v2/clearwell-directory/site.json

@@ -0,0 +1,7 @@
+{
+  "name": "Clearwell / task directory — fictional teaching study",
+  "slug": "clearwell-directory",
+  "motion": {
+    "strength": "off"
+  }
+}

package/design-system/compositions/v2/clearwell-directory/study.json

@@ -0,0 +1,244 @@
+{
+  "id": "clearwell-directory",
+  "revision": 1,
+  "title": "Clearwell / task directory",
+  "primaryFamily": "civic",
+  "assetMinimum": "none",
+  "fitSignals": [
+    "professional-service",
+    "type-content",
+    "real-copy",
+    "process",
+    "comparison",
+    "sparse-media",
+    "action"
+  ],
+  "visitorTasks": [
+    "Evaluate a practice",
+    "Understand a process"
+  ],
+  "organizingIdea": "Start with the visitor’s bookkeeping decision; service choices lead before explanatory prose.",
+  "brief": {
+    "fictional": true,
+    "facts": {
+      "name": "Clearwell",
+      "offer": "Bookkeeping for independent studios",
+      "scope": [
+        "Monthly reconciliation",
+        "Monthly reporting",
+        "Year-end handover"
+      ],
+      "excludes": [
+        "Tax returns",
+        "Investment advice"
+      ],
+      "process": [
+        "Bring a sample of your records",
+        "Agree scope together",
+        "Set a monthly handover"
+      ],
+      "contact": "hello@example.test",
+      "media": []
+    },
+    "factsHash": "a27aeea57fb381f20268557ae9c788abd1219ad30cc1b8b09c3177b633f782d5",
+    "mediaHash": "4f53cda18c2baa0c0354bb5f9a3ecbe5ed12ab4d8e11ba873c2f11161202b945"
+  },
+  "provenance": {
+    "content": "Original fictional teaching content authored for Vitris; never customer facts",
+    "media": "No imagery required",
+    "rights": "Original Vitris teaching source; customer reuse requires adapting facts"
+  },
+  "storyboard": {
+    "homepage": [
+      "What needs clearing up?",
+      "Keep the month clear",
+      "Prepare the handover",
+      "A small start, with a clear scope."
+    ],
+    "interior": [
+      "A month you can read.",
+      "Monthly support",
+      "At year end",
+      "Before a conversation"
+    ],
+    "mobile": "Content order is preserved; side navigation and supporting columns reflow into the document. No essential hover interactions."
+  },
+  "designDecisions": "Start with the visitor’s bookkeeping decision; service choices lead before explanatory prose.",
+  "lessonIds": [
+    "cmp-collection-structure",
+    "cmp-navigation",
+    "cmp-unequal-emphasis"
+  ],
+  "referenceIds": [
+    "gov-uk"
+  ],
+  "sourcePath": "clearwell-directory",
+  "homepage": "/",
+  "interior": "/detail",
+  "status": "compiled, automated checks passed, assistant visual review recorded; human preference pending",
+  "humanPreference": null,
+  "renderEvidence": [
+    {
+      "route": "/",
+      "viewport": {
+        "width": 1440,
+        "height": 900
+      },
+      "capturedAt": "2026-10-05T15:54:32.050Z",
+      "browser": "153.0.8010.12",
+      "preview": {
+        "path": "previews/clearwell-directory-home-1440.png",
+        "sha256": "87d3936eca6c20977ba4a5a6c16691d0e96f1c52dbc5537d21bf5e8f0ff0d5bd"
+      },
+      "compiledHash": "8017741066cfe8419fea6c635774f2917fc0c231693fac3618b419c1ef4a613a",
+      "automated": {
+        "errors": [],
+        "axeViolations": [],
+        "metrics": {
+          "overflow": false,
+          "h1": 1,
+          "brokenImages": [],
+          "internalLinks": [
+            "/",
+            "/detail",
+            "/detail#monthly",
+            "/detail#handover",
+            "/detail"
+          ]
+        },
+        "firstFocus": {
+          "tag": "A",
+          "text": "Skip to content",
+          "outline": "solid",
+          "width": "2px"
+        }
+      },
+      "visualReview": {
+        "assessor": "assistant",
+        "reviewedAt": "2026-10-05T16:08:16.889952+00:00",
+        "scope": "desktop/mobile full-page contact-sheet inspection; text hierarchy, reading order, overflow and matched-pair distinction",
+        "assessment": "Clear organization and readable narrow layout; no visual collision observed. Functional checks are automated, human preference is pending."
+      }
+    },
+    {
+      "route": "/",
+      "viewport": {
+        "width": 390,
+        "height": 844
+      },
+      "capturedAt": "2026-10-05T15:54:33.029Z",
+      "browser": "153.0.8010.12",
+      "preview": {
+        "path": "previews/clearwell-directory-home-390.png",
+        "sha256": "1d0f0bf4a0fd0bd0ccf306077a9062aeda56efa0495d148df1502615a11ed67e"
+      },
+      "compiledHash": "8017741066cfe8419fea6c635774f2917fc0c231693fac3618b419c1ef4a613a",
+      "automated": {
+        "errors": [],
+        "axeViolations": [],
+        "metrics": {
+          "overflow": false,
+          "h1": 1,
+          "brokenImages": [],
+          "internalLinks": [
+            "/",
+            "/detail",
+            "/detail#monthly",
+            "/detail#handover",
+            "/detail"
+          ]
+        },
+        "firstFocus": {
+          "tag": "A",
+          "text": "Skip to content",
+          "outline": "solid",
+          "width": "2px"
+        }
+      },
+      "visualReview": {
+        "assessor": "assistant",
+        "reviewedAt": "2026-10-05T16:08:16.889952+00:00",
+        "scope": "desktop/mobile full-page contact-sheet inspection; text hierarchy, reading order, overflow and matched-pair distinction",
+        "assessment": "Clear organization and readable narrow layout; no visual collision observed. Functional checks are automated, human preference is pending."
+      }
+    },
+    {
+      "route": "/detail",
+      "viewport": {
+        "width": 1440,
+        "height": 900
+      },
+      "capturedAt": "2026-10-05T15:54:34.048Z",
+      "browser": "153.0.8010.12",
+      "preview": {
+        "path": "previews/clearwell-directory-interior-1440.png",
+        "sha256": "5941cac13da2891565504e803fb74afae65119ce7898032c736eb7d3b70d954b"
+      },
+      "compiledHash": "da9297a73504f383348cedd14bc1f208638bfabae48bcd7560bd88ba53b69b33",
+      "automated": {
+        "errors": [],
+        "axeViolations": [],
+        "metrics": {
+          "overflow": false,
+          "h1": 1,
+          "brokenImages": [],
+          "internalLinks": [
+            "/",
+            "/detail"
+          ]
+        },
+        "firstFocus": {
+          "tag": "A",
+          "text": "Skip to content",
+          "outline": "solid",
+          "width": "2px"
+        }
+      },
+      "visualReview": {
+        "assessor": "assistant",
+        "reviewedAt": "2026-10-05T16:08:16.889952+00:00",
+        "scope": "desktop/mobile full-page contact-sheet inspection; text hierarchy, reading order, overflow and matched-pair distinction",
+        "assessment": "Clear organization and readable narrow layout; no visual collision observed. Functional checks are automated, human preference is pending."
+      }
+    },
+    {
+      "route": "/detail",
+      "viewport": {
+        "width": 390,
+        "height": 844
+      },
+      "capturedAt": "2026-10-05T15:54:35.016Z",
+      "browser": "153.0.8010.12",
+      "preview": {
+        "path": "previews/clearwell-directory-interior-390.png",
+        "sha256": "1a18a58c78c8d59b0569b73a9ec7f2e74f337a584b01738bb82c50fbe75f8899"
+      },
+      "compiledHash": "da9297a73504f383348cedd14bc1f208638bfabae48bcd7560bd88ba53b69b33",
+      "automated": {
+        "errors": [],
+        "axeViolations": [],
+        "metrics": {
+          "overflow": false,
+          "h1": 1,
+          "brokenImages": [],
+          "internalLinks": [
+            "/",
+            "/detail"
+          ]
+        },
+        "firstFocus": {
+          "tag": "A",
+          "text": "Skip to content",
+          "outline": "solid",
+          "width": "2px"
+        }
+      },
+      "visualReview": {
+        "assessor": "assistant",
+        "reviewedAt": "2026-10-05T16:08:16.889952+00:00",
+        "scope": "desktop/mobile full-page contact-sheet inspection; text hierarchy, reading order, overflow and matched-pair distinction",
+        "assessment": "Clear organization and readable narrow layout; no visual collision observed. Functional checks are automated, human preference is pending."
+      }
+    }
+  ]
+}

package/design-system/compositions/v2/clearwell-directory/theme/defaults.json

@@ -0,0 +1,16 @@
+{
+  "colorBg": "#ffffff",
+  "colorText": "#172b2b",
+  "colorMuted": "#3f5757",
+  "colorAccent": "#12645c",
+  "colorAccentText": "#ffffff",
+  "colorSurface": "#ffffff",
+  "colorSurface2": "#eaf4f0",
+  "colorBorder": "#9cb4ae",
+  "colorFocus": "#b43d15",
+  "fontBody": "ui-sans-serif, system-ui, sans-serif",
+  "fontDisplay": "ui-serif, Georgia, serif",
+  "radius": "0px",
+  "radiusLg": "0px",
+  "maxWidth": "1180px"
+}

package/design-system/compositions/v2/clearwell-letter/components/study-clearwell-letter/styles.css

@@ -0,0 +1,2 @@
+.c-study-clearwell-letter{overflow-wrap:anywhere;max-width:100%;color:var(--color-text);font-family:var(--font-body)}.c-study-clearwell-letter h1,.c-study-clearwell-letter h2,.c-study-clearwell-letter h3{color:inherit;font-family:var(--font-display);font-weight:500}.c-study-clearwell-letter h1{font-size:clamp(2.6rem,6vw,6.5rem);line-height:1.06;letter-spacing:-.035em}.c-study-clearwell-letter h2{font-size:clamp(1.5rem,3vw,2.6rem);line-height:1.2}.c-study-clearwell-letter p,.c-study-clearwell-letter li{max-width:64ch;line-height:1.65}.c-study-clearwell-letter a{color:inherit;text-underline-offset:.2em}.c-study-clearwell-letter a:focus-visible,.c-study-clearwell-letter summary:focus-visible{outline:3px solid var(--color-focus);outline-offset:4px}.c-study-clearwell-letter nav{display:flex;gap:1.5rem;flex-wrap:wrap}.c-study-clearwell-letter nav a{display:inline-flex;align-items:center;min-height:44px}.c-study-clearwell-letter img,.c-study-clearwell-letter svg{max-width:100%;height:auto}.c-study-clearwell-letter .intro{font-size:clamp(1.2rem,2vw,1.7rem);max-width:44ch}.c-study-clearwell-letter .teaching{font-size:.85rem;max-width:70ch}.c-study-clearwell-letter footer{margin-top:5rem;padding-block:2rem;border-top:1px solid var(--color-border)}.c-study-clearwell-letter dl div{margin-bottom:1.5rem}.c-study-clearwell-letter dt{font-weight:700}.c-study-clearwell-letter dd{margin:.25rem 0 0}.c-study-clearwell-letter ol{padding-left:1.5rem}.c-study-clearwell-letter section{scroll-margin-top:2rem}
+.c-study-clearwell-letter {padding:2rem clamp(1.2rem,5vw,5rem)}.c-study-clearwell-letter header{display:flex;justify-content:space-between;align-items:center;gap:1rem}.c-study-clearwell-letter .letter{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(15rem,.65fr);gap:6rem;margin:5rem auto 7rem;max-width:76rem}.c-study-clearwell-letter .letter article>p:not(.intro){font-family:var(--font-display);font-size:1.2rem}.c-study-clearwell-letter .letter aside{background:var(--color-surface-2);padding:2rem;align-self:start;margin-top:8rem}.c-study-clearwell-letter .letter h1{font-style:italic}.c-study-clearwell-letter .date{font: .8rem var(--font-body);letter-spacing:.1em;text-transform:uppercase}.c-study-clearwell-letter .reading{max-width:43rem;margin:5rem auto}.c-study-clearwell-letter .reading section{margin-top:4rem}.c-study-clearwell-letter .reading h1{font-style:italic}@media(max-width:800px){.c-study-clearwell-letter .letter{grid-template-columns:1fr;gap:2rem;margin:3rem 0}.c-study-clearwell-letter .letter aside{margin-top:0}.c-study-clearwell-letter header{align-items:start;flex-wrap:wrap}}

package/design-system/compositions/v2/clearwell-letter/components/study-clearwell-letter/template.html

@@ -0,0 +1 @@
+<div class="c-study-clearwell-letter"><slot></slot></div>

package/design-system/compositions/v2/clearwell-letter/pages/detail/index.html

@@ -0,0 +1,5 @@
+---
+title: Clearwell / working letter Detail
+description: A personal explanatory letter develops the responsibility relationship; an attached scope note supports comparison.
+---
+<study-clearwell-letter><header><a href="/">← Clearwell</a><a href="mailto:hello@example.test">Write to us</a></header><article class="reading"><h1>A month you can read.</h1><p class="intro">A clear sequence for handing over your records and understanding the result.</p><section id="monthly"><h2>Monthly support</h2><p>Reconciliation connects the transactions in your records with the monthly report. We agree the record format and handover date before work begins.</p><dl><div><dt>Included</dt><dd>Monthly reconciliation, monthly reporting and year-end handover.</dd></div><div><dt>Outside scope</dt><dd>Tax returns and investment advice.</dd></div><div><dt>First conversation</dt><dd>A sample of your records, the question you face and your reporting dates.</dd></div></dl></section><section id="handover"><h2>At year end</h2><p>Year-end handover organizes the records for your tax adviser. Tax returns and investment advice remain outside this service.</p></section><section><h2>Before a conversation</h2><ol><li>Bring a sample of your records.</li><li>Agree the scope together.</li><li>Set a monthly handover.</li></ol><a href="mailto:hello@example.test">Discuss your records</a></section></article><footer><p class="teaching">Fictional Vitris teaching study. No services are offered or customer outcomes implied.</p><p>Clearwell</p></footer></study-clearwell-letter>

package/design-system/compositions/v2/clearwell-letter/pages/index.html

@@ -0,0 +1,5 @@
+---
+title: Clearwell / working letter Home
+description: A personal explanatory letter develops the responsibility relationship; an attached scope note supports comparison.
+---
+<study-clearwell-letter><header><p><a href="/">Clearwell</a> / studio bookkeeping</p><a href="/detail">Scope & process</a></header><div class="letter"><article><p class="date">A note for independent studios</p><h1>Let’s make sense<br>of the month.</h1><p class="intro">Your records should help you understand your studio.</p><p>Clearwell brings monthly reconciliation, monthly reporting and year-end handover into one agreed scope. The first step is a sample of the records you already keep.</p><p>We start by agreeing what needs attention, what belongs elsewhere and when the handover will happen.</p><p>Clear work begins with clear responsibilities.</p><a href="mailto:hello@example.test">Write about your records →</a></article><aside aria-label="Scope note"><h2>The scope note</h2><dl><div><dt>Included</dt><dd>Monthly reconciliation, monthly reporting and year-end handover.</dd></div><div><dt>Outside scope</dt><dd>Tax returns and investment advice.</dd></div><div><dt>First conversation</dt><dd>A sample of your records, the question you face and your reporting dates.</dd></div></dl><a href="/detail">Read the full process</a></aside></div><footer><p class="teaching">Fictional Vitris teaching study. No services are offered or customer outcomes implied.</p><p>Clearwell</p></footer></study-clearwell-letter>

package/design-system/compositions/v2/clearwell-letter/site.json

@@ -0,0 +1,7 @@
+{
+  "name": "Clearwell / working letter — fictional teaching study",
+  "slug": "clearwell-letter",
+  "motion": {
+    "strength": "off"
+  }
+}

package/design-system/compositions/v2/clearwell-letter/study.json

@@ -0,0 +1,236 @@
+{
+  "id": "clearwell-letter",
+  "revision": 1,
+  "title": "Clearwell / working letter",
+  "primaryFamily": "text-first",
+  "assetMinimum": "none",
+  "fitSignals": [
+    "professional-service",
+    "type-content",
+    "real-copy",
+    "process",
+    "comparison",
+    "sparse-media",
+    "action"
+  ],
+  "visitorTasks": [
+    "Evaluate a practice",
+    "Understand a process"
+  ],
+  "organizingIdea": "A personal explanatory letter develops the responsibility relationship; an attached scope note supports comparison.",
+  "brief": {
+    "fictional": true,
+    "facts": {
+      "name": "Clearwell",
+      "offer": "Bookkeeping for independent studios",
+      "scope": [
+        "Monthly reconciliation",
+        "Monthly reporting",
+        "Year-end handover"
+      ],
+      "excludes": [
+        "Tax returns",
+        "Investment advice"
+      ],
+      "process": [
+        "Bring a sample of your records",
+        "Agree scope together",
+        "Set a monthly handover"
+      ],
+      "contact": "hello@example.test",
+      "media": []
+    },
+    "factsHash": "a27aeea57fb381f20268557ae9c788abd1219ad30cc1b8b09c3177b633f782d5",
+    "mediaHash": "4f53cda18c2baa0c0354bb5f9a3ecbe5ed12ab4d8e11ba873c2f11161202b945"
+  },
+  "provenance": {
+    "content": "Original fictional teaching content authored for Vitris; never customer facts",
+    "media": "No imagery required",
+    "rights": "Original Vitris teaching source; customer reuse requires adapting facts"
+  },
+  "storyboard": {
+    "homepage": [
+      "Let’s make senseof the month.",
+      "The scope note"
+    ],
+    "interior": [
+      "A month you can read.",
+      "Monthly support",
+      "At year end",
+      "Before a conversation"
+    ],
+    "mobile": "Content order is preserved; side navigation and supporting columns reflow into the document. No essential hover interactions."
+  },
+  "designDecisions": "A personal explanatory letter develops the responsibility relationship; an attached scope note supports comparison.",
+  "lessonIds": [
+    "cmp-type-roles",
+    "cmp-page-rhythm",
+    "cmp-sparse-media"
+  ],
+  "referenceIds": [
+    "gov-uk"
+  ],
+  "sourcePath": "clearwell-letter",
+  "homepage": "/",
+  "interior": "/detail",
+  "status": "compiled, automated checks passed, assistant visual review recorded; human preference pending",
+  "humanPreference": null,
+  "renderEvidence": [
+    {
+      "route": "/",
+      "viewport": {
+        "width": 1440,
+        "height": 900
+      },
+      "capturedAt": "2026-10-05T15:53:13.575Z",
+      "browser": "153.0.8010.12",
+      "preview": {
+        "path": "previews/clearwell-letter-home-1440.png",
+        "sha256": "d32fcd28eb0c63b8fc3e798752ae9b1614410cbfb36bb2d6944a06813e15b6c5"
+      },
+      "compiledHash": "7dfa963fc571965b983f088234cb2ba4da4ae291271aecd71d70c216f39a3f9e",
+      "automated": {
+        "errors": [],
+        "axeViolations": [],
+        "metrics": {
+          "overflow": false,
+          "h1": 1,
+          "brokenImages": [],
+          "internalLinks": [
+            "/",
+            "/detail",
+            "/detail"
+          ]
+        },
+        "firstFocus": {
+          "tag": "A",
+          "text": "Skip to content",
+          "outline": "solid",
+          "width": "2px"
+        }
+      },
+      "visualReview": {
+        "assessor": "assistant",
+        "reviewedAt": "2026-10-05T16:08:16.890952+00:00",
+        "scope": "desktop/mobile full-page contact-sheet inspection; text hierarchy, reading order, overflow and matched-pair distinction",
+        "assessment": "Clear organization and readable narrow layout; no visual collision observed. Functional checks are automated, human preference is pending."
+      }
+    },
+    {
+      "route": "/",
+      "viewport": {
+        "width": 390,
+        "height": 844
+      },
+      "capturedAt": "2026-10-05T15:53:14.622Z",
+      "browser": "153.0.8010.12",
+      "preview": {
+        "path": "previews/clearwell-letter-home-390.png",
+        "sha256": "b55ad3915a88c22306d0d834b51cf1a6a4bae3d891b61af2e3d031c5c9c216f2"
+      },
+      "compiledHash": "7dfa963fc571965b983f088234cb2ba4da4ae291271aecd71d70c216f39a3f9e",
+      "automated": {
+        "errors": [],
+        "axeViolations": [],
+        "metrics": {
+          "overflow": false,
+          "h1": 1,
+          "brokenImages": [],
+          "internalLinks": [
+            "/",
+            "/detail",
+            "/detail"
+          ]
+        },
+        "firstFocus": {
+          "tag": "A",
+          "text": "Skip to content",
+          "outline": "solid",
+          "width": "2px"
+        }
+      },
+      "visualReview": {
+        "assessor": "assistant",
+        "reviewedAt": "2026-10-05T16:08:16.890952+00:00",
+        "scope": "desktop/mobile full-page contact-sheet inspection; text hierarchy, reading order, overflow and matched-pair distinction",
+        "assessment": "Clear organization and readable narrow layout; no visual collision observed. Functional checks are automated, human preference is pending."
+      }
+    },
+    {
+      "route": "/detail",
+      "viewport": {
+        "width": 1440,
+        "height": 900
+      },
+      "capturedAt": "2026-10-05T15:53:15.720Z",
+      "browser": "153.0.8010.12",
+      "preview": {
+        "path": "previews/clearwell-letter-interior-1440.png",
+        "sha256": "5d5a7eeb2e01b74a381c42a4b6e75702db848306d9e6d146d7c3bfea4e29b94c"
+      },
+      "compiledHash": "f910fb4536f582d97d039789ee344a1a623108f01ffdea060d76d0945983dbaa",
+      "automated": {
+        "errors": [],
+        "axeViolations": [],
+        "metrics": {
+          "overflow": false,
+          "h1": 1,
+          "brokenImages": [],
+          "internalLinks": [
+            "/"
+          ]
+        },
+        "firstFocus": {
+          "tag": "A",
+          "text": "Skip to content",
+          "outline": "solid",
+          "width": "2px"
+        }
+      },
+      "visualReview": {
+        "assessor": "assistant",
+        "reviewedAt": "2026-10-05T16:08:16.890952+00:00",
+        "scope": "desktop/mobile full-page contact-sheet inspection; text hierarchy, reading order, overflow and matched-pair distinction",
+        "assessment": "Clear organization and readable narrow layout; no visual collision observed. Functional checks are automated, human preference is pending."
+      }
+    },
+    {
+      "route": "/detail",
+      "viewport": {
+        "width": 390,
+        "height": 844
+      },
+      "capturedAt": "2026-10-05T15:53:16.750Z",
+      "browser": "153.0.8010.12",
+      "preview": {
+        "path": "previews/clearwell-letter-interior-390.png",
+        "sha256": "e3954d607bf5eff2200f67ff9b42d833731ec1b5236e9c1b94de655986f0a786"
+      },
+      "compiledHash": "f910fb4536f582d97d039789ee344a1a623108f01ffdea060d76d0945983dbaa",
+      "automated": {
+        "errors": [],
+        "axeViolations": [],
+        "metrics": {
+          "overflow": false,
+          "h1": 1,
+          "brokenImages": [],
+          "internalLinks": [
+            "/"
+          ]
+        },
+        "firstFocus": {
+          "tag": "A",
+          "text": "Skip to content",
+          "outline": "solid",
+          "width": "2px"
+        }
+      },
+      "visualReview": {
+        "assessor": "assistant",
+        "reviewedAt": "2026-10-05T16:08:16.890952+00:00",
+        "scope": "desktop/mobile full-page contact-sheet inspection; text hierarchy, reading order, overflow and matched-pair distinction",
+        "assessment": "Clear organization and readable narrow layout; no visual collision observed. Functional checks are automated, human preference is pending."
+      }
+    }
+  ]
+}

package/design-system/compositions/v2/clearwell-letter/theme/defaults.json

@@ -0,0 +1,16 @@
+{
+  "colorBg": "#fff9ee",
+  "colorText": "#302e28",
+  "colorMuted": "#595448",
+  "colorAccent": "#79381b",
+  "colorAccentText": "#ffffff",
+  "colorSurface": "#fff9ee",
+  "colorSurface2": "#f1ead9",
+  "colorBorder": "#9cb4ae",
+  "colorFocus": "#79381b",
+  "fontBody": "ui-sans-serif, system-ui, sans-serif",
+  "fontDisplay": "ui-serif, Georgia, serif",
+  "radius": "0px",
+  "radiusLg": "0px",
+  "maxWidth": "1180px"
+}

package/design-system/compositions/v2/dock-radio/components/study-dock-radio/styles.css

@@ -0,0 +1,2 @@
+.c-study-dock-radio{color:var(--color-text);font-family:var(--font-body);overflow-wrap:anywhere}.c-study-dock-radio h1,.c-study-dock-radio h2,.c-study-dock-radio h3{font-family:var(--font-display);color:inherit}.c-study-dock-radio p,.c-study-dock-radio li{line-height:1.6}.c-study-dock-radio a{color:inherit;text-underline-offset:.2em}.c-study-dock-radio a:focus-visible,.c-study-dock-radio summary:focus-visible{outline:3px solid var(--color-focus);outline-offset:4px}.c-study-dock-radio img,.c-study-dock-radio svg{max-width:100%;height:auto}.c-study-dock-radio table{border-collapse:collapse;width:100%}.c-study-dock-radio th,.c-study-dock-radio td{text-align:left;padding:.8rem;border-bottom:1px solid var(--color-border)}.c-study-dock-radio .teaching{font-size:.85rem;line-height:1.5}.c-study-dock-radio nav a{display:inline-flex;align-items:center;min-height:44px}
+.c-study-dock-radio .desktop{min-height:900px;padding:3rem 5%;background:repeating-linear-gradient(0deg,#99b6c0 0,#99b6c0 2px,#a7c5cf 2px,#a7c5cf 5px);color:var(--color-text)}.c-study-dock-radio .desk-title{display:flex;align-items:baseline;gap:3rem;flex-wrap:wrap}.c-study-dock-radio .desk-title h1{font:800 2rem ui-monospace,monospace;margin:0}.c-study-dock-radio .desk-title p{font-size:.9rem}.c-study-dock-radio .windows{display:grid;grid-template-columns:1.4fr 1fr;gap:3rem;align-items:start;margin:3rem 0}.c-study-dock-radio .window{background:var(--color-surface);border:3px solid var(--color-text);box-shadow:7px 7px 0 #607f8b}.c-study-dock-radio .window-title{background:var(--color-text);color:var(--color-bg);font:700 .85rem ui-monospace,monospace;padding:.8rem 1rem;display:flex;justify-content:space-between}.c-study-dock-radio .window-body{padding:2rem}.c-study-dock-radio svg{display:block;width:100%;max-width:40rem;margin:auto}.c-study-dock-radio h2{font-size:1.8rem}.c-study-dock-radio audio{display:block;width:100%;margin:1.5rem 0;min-height:54px}.c-study-dock-radio .window-body p{max-width:55ch}.c-study-dock-radio .window-body a{display:inline-block;min-height:44px;padding:.6rem 0}.c-study-dock-radio .guide-window{margin-top:4rem}.c-study-dock-radio .taskbar{display:flex;gap:2rem;flex-wrap:wrap;align-items:center;border:3px solid var(--color-text);padding:.8rem 1.2rem;background:var(--color-surface)}.c-study-dock-radio .taskbar span{margin-left:auto;font:.8rem ui-monospace,monospace}.c-study-dock-radio footer{margin-top:2rem;background:var(--color-surface);padding:1rem;border:1px solid var(--color-text)}.c-study-dock-radio .episode-desktop{display:grid;grid-template-columns:1.2fr 1fr;gap:3rem;align-items:start}.c-study-dock-radio .episode-desktop>.taskbar,.c-study-dock-radio .episode-desktop>footer{grid-column:1/3}.c-study-dock-radio .episode-window h1{font:700 2.6rem/1.1 ui-monospace,monospace;margin:0 0 2rem}.c-study-dock-radio .notes-window{margin-top:3rem}.c-study-dock-radio dt{font-size:.8rem;font-weight:700}.c-study-dock-radio dd{margin:.5rem 0 1.5rem}@media(max-width:700px){.c-study-dock-radio .desktop{min-height:0;padding:1.5rem 1rem}.c-study-dock-radio .desk-title{display:block}.c-study-dock-radio .windows,.c-study-dock-radio .episode-desktop{display:block;margin-top:2rem}.c-study-dock-radio .window{margin:2rem 0;box-shadow:4px 4px 0 #607f8b}.c-study-dock-radio .window-body{padding:1.2rem}.c-study-dock-radio .guide-window,.c-study-dock-radio .notes-window{margin-top:2rem}.c-study-dock-radio .taskbar{gap:1rem;padding:.8rem}.c-study-dock-radio .taskbar span{margin:0;font-size:.7rem}.c-study-dock-radio .episode-window h1{font-size:2rem}.c-study-dock-radio audio{margin:1rem 0}}

package/design-system/compositions/v2/dock-radio/components/study-dock-radio/template.html

@@ -0,0 +1 @@
+<div class="c-study-dock-radio"><slot></slot></div>

package/design-system/compositions/v2/dock-radio/media/teaching/original-tone-study.wav.provenance.json

@@ -0,0 +1,6 @@
+{
+  "source": "Original Python sine-wave synthesis in author-batch-four.py",
+  "externalSamples": false,
+  "durationSeconds": 8,
+  "rights": "Original Vitris teaching audio"
+}

package/design-system/compositions/v2/dock-radio/pages/detail/index.html

@@ -0,0 +1,5 @@
+---
+title: Dock Radio / listening desk Detail
+description: Desktop window chrome groups a functioning native player and guide; the episode interior develops original audio credits and notes without changing the listening metaphor.
+---
+<study-dock-radio><div class="desktop episode-desktop"><nav class="taskbar" aria-label="Episode"><a href="/">← Listening desk</a><a href="#notes">Recording notes</a></nav><section class="window episode-window"><div class="window-title">Episode 01 / original local audio</div><div class="window-body"><h1>Evening Interval</h1><svg viewBox="0 0 480 220" role="img" aria-label="Original cassette illustration"><rect x="10" y="10" width="460" height="200" rx="15" fill="#d6d4d0" stroke="#252943" stroke-width="4"/><rect x="35" y="30" width="410" height="85" fill="#fff8d7"/><text x="60" y="65" fill="#252943" font-size="22">EVENING INTERVAL</text><text x="60" y="95" fill="#252943" font-size="16">ORIGINAL / 8 SECOND TONE STUDY</text><rect x="95" y="125" width="290" height="55" rx="20" fill="#252943"/><g fill="#fff8d7"><circle cx="145" cy="152" r="19"/><circle cx="335" cy="152" r="19"/></g></svg><audio controls preload="metadata" aria-label="Evening Interval original tone study"><source src="/media/teaching/original-tone-study.wav" type="audio/wav">Your browser cannot play this original audio. <a href="/media/teaching/original-tone-study.wav">Open the tone study file</a>.</audio><p>Duration: eight seconds. Original synthesized tones, no external samples.</p></div></section><section class="window notes-window" id="notes"><div class="window-title">Recording notes</div><div class="window-body"><h2>A small interval.</h2><p>Eight changing tones create a short pause at the desk. Each tone fades at its edges so that the sequence can be heard as separate steps.</p><dl><div><dt>Source</dt><dd>Original sine-wave synthesis</dd></div><div><dt>Length</dt><dd>8 seconds</dd></div><div><dt>Use</dt><dd>Fictional teaching demonstration</dd></div></dl><p>No real artist, broadcast schedule or music catalogue is represented. A customer listening product needs its own cleared recordings and accurate credits.</p><a href="/">Return to the listening desk →</a></div></section><footer><p class="teaching">Original fictional Vitris teaching study. Names, offers, events and specifications are invented; no real customer evidence is supplied.</p></footer></div></study-dock-radio>

package/design-system/compositions/v2/dock-radio/pages/index.html

@@ -0,0 +1,5 @@
+---
+title: Dock Radio / listening desk Home
+description: Desktop window chrome groups a functioning native player and guide; the episode interior develops original audio credits and notes without changing the listening metaphor.
+---
+<study-dock-radio><div class="desktop"><div class="desk-title"><h1>DOCK RADIO</h1><p>A tiny fictional listening desk.</p></div><div class="windows"><section class="window player-window"><div class="window-title">Now on the desk <span aria-hidden="true">▣</span></div><div class="window-body"><svg viewBox="0 0 480 220" role="img" aria-label="Original cassette illustration"><rect x="10" y="10" width="460" height="200" rx="15" fill="#d6d4d0" stroke="#252943" stroke-width="4"/><rect x="35" y="30" width="410" height="85" fill="#fff8d7"/><text x="60" y="65" fill="#252943" font-size="22">EVENING INTERVAL</text><text x="60" y="95" fill="#252943" font-size="16">ORIGINAL / 8 SECOND TONE STUDY</text><rect x="95" y="125" width="290" height="55" rx="20" fill="#252943"/><g fill="#fff8d7"><circle cx="145" cy="152" r="19"/><circle cx="335" cy="152" r="19"/></g></svg><h2>Evening Interval</h2><p>Eight seconds of original synthesized tones.</p><audio controls preload="metadata" aria-label="Evening Interval original tone study"><source src="/media/teaching/original-tone-study.wav" type="audio/wav">Your browser cannot play this original audio. <a href="/media/teaching/original-tone-study.wav">Open the tone study file</a>.</audio><a href="/detail">Open episode notes →</a></div></section><section class="window guide-window"><div class="window-title">Desk guide</div><div class="window-body"><h2>Listen at your pace.</h2><p>Start, pause, seek and adjust volume using the native audio controls. Playback begins only when you choose it.</p><p>This is a local tone demonstration, not a live radio stream.</p><a href="/detail#notes">Read the recording notes</a></div></section></div><div class="taskbar"><a href="/">Desk</a><a href="/detail">Episode</a><span>LOCAL AUDIO / NO LIVE BROADCAST</span></div><footer><p class="teaching">Original fictional Vitris teaching study. Names, offers, events and specifications are invented; no real customer evidence is supplied.</p></footer></div></study-dock-radio>