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

package/bin/chunks/chunk-DSS2U2OM.js

@@ -0,0 +1,115 @@
+// src/agent/theme-picker-styles.ts
+var PICKER_STYLES = String.raw`
+*{box-sizing:border-box}[hidden]{display:none!important}:root{color-scheme:light;--ink:#242832;--muted:#626773;--line:#dadddf;--paper:#fff;--ground:#f3f4f6;--blue:#294dd5}body{margin:0;background:var(--ground);color:var(--ink);font:14px/1.5 Inter,Arial,sans-serif}button,input,textarea,select{font:inherit;color:inherit}button,a,summary{touch-action:manipulation}button,select,input[type=search],.file{min-height:44px}button{cursor:pointer;border:1px solid var(--line);border-radius:8px;background:white;padding:9px 13px}button:hover{background:#eceff9;border-color:#b7bfda}button:disabled{opacity:.5;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.preview:focus-visible,.file:focus-within{outline:3px solid var(--blue);outline-offset:3px}a{color:inherit}.primary{background:var(--ink);color:white;border-color:var(--ink)}.primary:hover{background:#394153}.small{font-size:12px;color:var(--muted)}h1,h2,h3,p{margin:0}h1{font-size:clamp(25px,3vw,36px);font-weight:600;line-height:1.2;letter-spacing:-.04em}h2{font-size:22px;letter-spacing:-.025em}h3{font-size:20px;letter-spacing:-.02em}.topbar{height:54px;border-bottom:1px solid var(--line);padding:0 28px;display:flex;align-items:center;justify-content:space-between;background:white}.wordmark{font-size:12px;font-weight:700;letter-spacing:.14em}.wrap{max-width:1580px;margin:auto;padding:24px 28px}.intro{display:flex;align-items:center;justify-content:space-between;gap:22px;margin-bottom:16px}.intro p{max-width:500px;color:var(--muted);font-size:13px}.brandbar{display:flex;align-items:center;gap:12px;background:white;border:1px solid var(--line);border-radius:10px;padding:10px 14px;min-height:66px;margin-bottom:18px}.brandbar img{max-width:140px;max-height:36px;object-fit:contain}.brandbar strong{font-size:13px;overflow-wrap:anywhere;min-width:0}.palette{display:flex;gap:5px}.palette span{width:16px;height:16px;border:1px solid #9297a2;border-radius:50%}.brandcontrols{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}.brandcontrols select{max-width:200px}.brandbar select,.controls select,.controls input{background:white;border:1px solid var(--line);border-radius:7px;padding:9px 11px;min-width:0}.gallery-layout{display:grid;grid-template-columns:210px minmax(0,1fr);gap:24px;align-items:start}.filters{position:sticky;top:16px;max-height:calc(100dvh - 32px);overflow:auto;padding-right:12px;scrollbar-width:thin}.filters h2{font-size:15px;margin:0 0 14px}.filters fieldset{border:0;padding:0;margin:0 0 20px;min-width:0}.filters legend{font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;margin-bottom:7px}.filters label{min-height:44px;display:flex;align-items:flex-start;gap:8px;padding:6px 0;font-size:12px;cursor:pointer}.filters input{accent-color:var(--blue);width:16px;height:16px;flex:none;margin:2px 0 0}.filters small{margin-left:auto;color:var(--muted)}.filters .family-description{font-size:11px;color:var(--muted);margin:6px 0 12px}.filters .clear{width:100%}.filtersclose,#filterbutton,.filterbackdrop{display:none}.collection-entry{display:flex;gap:6px;margin-bottom:12px}.collection-entry button{font-size:12px}.collection-entry [aria-pressed=true]{background:var(--ink);color:white}.cardfoot .affinities{font-size:10px;min-height:0;margin-bottom:12px;color:#555b69}.controls{display:flex;gap:10px;flex-wrap:wrap;align-items:end;margin-bottom:14px}.controls label{display:flex;flex-direction:column;gap:4px;font-size:11px;color:var(--muted)}.controls .searchlabel{flex:1 1 220px}.controls input{width:100%}.controls select{max-width:190px}.resultbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px;font-size:12px;color:var(--muted)}.resultbar button{min-height:32px;padding:5px 8px;font-size:12px}.group{margin-bottom:28px}.group>h2{font-size:17px;margin:8px 0 14px}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.card{background:white;border:1px solid var(--line);border-radius:12px;overflow:hidden;min-width:0;box-shadow:0 3px 12px #24283205}.card[data-selected=true]{outline:3px solid var(--blue);outline-offset:3px}.cardhead{padding:16px 18px 12px;display:flex;align-items:start;justify-content:space-between;gap:10px}.cardhead .small{font-size:10px;margin-bottom:3px}.save{min-width:44px;padding:8px;font-size:19px}.save[aria-pressed=true]{background:#edf0ff;color:#2444c8}.previewtools{display:flex;justify-content:space-between;align-items:center;gap:6px;padding:5px 12px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:10px;color:var(--muted);background:#fafbfc}.exitpreview{font-size:11px;padding:4px 8px;min-height:44px}.preview{height:440px;position:relative;background:#e4e7ec;overflow:hidden;isolation:isolate}.preview iframe,.canvas iframe{position:absolute;top:0;border:0;background:white;transform-origin:0 0}.preview.inactive iframe{pointer-events:none}.preview.inactive:after{content:'Tap Scroll preview to explore';position:absolute;inset:auto 15px 15px;background:var(--ink);color:white;padding:10px;text-align:center;pointer-events:none;border-radius:6px;font-size:12px}.loadstate{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;gap:12px;padding:20px;background:#e4e7ec;color:var(--ink);font-size:13px;flex-wrap:wrap}.loadstate.error{background:#fff2e8}.loadstate p{width:100%;text-align:center}.placeholder{padding:25px;color:var(--muted);font-size:12px}.cardfoot{padding:14px 18px 17px}.cardfoot p{font-size:12px;color:var(--muted);margin-bottom:12px;min-height:36px}.actions{display:flex;gap:8px;flex-wrap:wrap}.actions button{font-size:12px}.comparepick{min-height:44px;margin-left:auto;display:flex;align-items:center;gap:6px;font-size:11px}.empty{background:white;border:1px dashed #a7aebb;border-radius:12px;padding:42px;text-align:center}.empty p{margin:10px 0 18px;color:var(--muted)}.draft{margin:32px 0 0 234px;background:white;border:1px solid var(--line);border-radius:12px;padding:24px;max-width:900px}.draft h2{margin-bottom:10px}.draft label{display:block;margin:18px 0 7px;font-size:13px;font-weight:600}textarea{width:100%;min-height:110px;padding:12px;border:1px solid #a8aebb;border-radius:8px;resize:vertical}.submitrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:16px 0 10px}.status{min-height:24px;font-size:13px;color:#294637}.portable{border-top:1px solid var(--line);margin-top:18px;padding-top:10px}.portable summary{cursor:pointer;padding:10px 0;min-height:44px;font-size:12px}.file{position:relative;display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:8px;padding:9px 13px;margin:0!important;font-weight:400!important;font-size:12px}.file input{position:absolute;inset:0;opacity:0;width:100%}#copytext{margin-top:12px;font:12px monospace}footer{padding:24px 0 90px;font-size:11px;color:var(--muted)}.skip{position:absolute;top:-80px;left:15px;background:white;padding:12px;z-index:20}.skip:focus{top:12px}.shortlist{position:fixed;bottom:14px;left:50%;transform:translateX(-50%);width:min(1050px,calc(100% - 28px));background:#242832f5;color:white;box-shadow:0 6px 32px #1116;z-index:4;border-radius:12px;padding:10px 14px;display:flex;align-items:center;gap:12px}.shortlist .names{flex:1;display:flex;gap:5px;flex-wrap:wrap;font-size:11px}.shortlist button{font-size:12px;min-height:38px}.shortlist .names button{min-height:44px;background:#ffffff15;color:white;border-color:#ffffff35;padding:4px 7px;min-height:44px}.shortlist .small{color:#cbd0dc}.notice{font-size:12px;color:#a02d20;min-height:18px}dialog{border:1px solid #cbd0dc;border-radius:12px;padding:0;width:min(1510px,96vw);height:94dvh;max-height:94dvh;background:var(--ground);color:var(--ink);overflow:hidden}dialog[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto}dialog::backdrop{background:#161e30bb}.detailtop{padding:12px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:9px;flex-wrap:wrap;background:white}.detailtop h2{font-size:20px;margin-right:auto}.toggles{display:flex;gap:3px}.toggles button{padding:7px 10px;font-size:12px}.toggles button[aria-pressed=true]{background:var(--ink);color:white}.detailtop a{font-size:12px}.detailbody{display:grid;grid-template-columns:minmax(0,1fr) 250px;min-height:0}.canvas{min-height:0;width:100%;position:relative;overflow:hidden;background:#e4e7ec}.guidance{overflow:auto;padding:20px;background:white;border-left:1px solid var(--line);font-size:12px}.guidance h3{font-size:14px;margin:0 0 8px}.guidance p{margin:0 0 20px;color:var(--muted)}.detailbottom{padding:10px 16px;background:white;border-top:1px solid var(--line);display:flex;align-items:center;gap:14px;font-size:12px}.detailbottom .small{margin-left:auto}#saved{margin-top:12px}select{max-width:100%}.comparebody{padding:14px;overflow:auto;min-height:0}.comparecolumns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.comparecolumn{min-width:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:white}.comparecolumn h3{font-size:17px;padding:12px}.comparecolumn .canvas{height:52dvh;min-height:280px}.comparecolumn dl{display:grid;grid-template-columns:85px 1fr;gap:8px;padding:14px;margin:0;font-size:11px}.comparecolumn dt{font-weight:600}.comparecolumn dd{margin:0;color:var(--muted)}.comparecolumn .jump{padding:7px 12px;display:flex;gap:5px;border-bottom:1px solid var(--line)}.jump button{min-height:44px;padding:4px 9px;font-size:11px}.comparecandidate{padding:6px 14px;font-size:12px;background:#fff;border-top:1px solid var(--line);display:flex;gap:10px;align-items:center}.comparecandidate select{padding:8px;border:1px solid var(--line);border-radius:7px}.comparetabs{display:none}.family-samples{display:flex;gap:4px;margin:5px 0 10px}.family-samples img{width:54px;height:42px;object-fit:cover;object-position:top;border:1px solid var(--line);border-radius:3px}
+@media(max-width:1320px){.gallery-layout{grid-template-columns:1fr}.filters{display:none;position:fixed;z-index:12;inset:0 auto 0 0;width:min(330px,90vw);max-height:100dvh;background:white;padding:24px;box-shadow:0 0 40px #1114}.filters.open{display:block}.filterbackdrop.open{display:block;position:fixed;inset:0;background:#161e3066;z-index:11;border:0;border-radius:0}.filtersclose,#filterbutton{display:block}.filtersclose{float:right}.draft{margin-left:0}.preview{height:460px}}
+@media(max-width:900px){.detailbody{grid-template-columns:minmax(0,1fr)}.guidance{display:none}.intro{align-items:start;flex-direction:column;gap:8px}.intro p{max-width:100%}.brandbar{flex-wrap:wrap}.brandcontrols{margin-left:0;flex:1 1 100%}.comparecolumns{grid-template-columns:1fr}.comparecolumn[data-visible=false]{display:none}.comparetabs{display:flex;gap:5px}.comparecandidate{flex-wrap:wrap}}
+@media(max-width:768px){.topbar{padding:0 16px}.topbar .small{display:none}.wrap{padding:18px 16px}.grid{grid-template-columns:1fr;gap:18px}.controls{gap:8px}.controls label{flex:1 1 115px}.controls .searchlabel{flex-basis:100%}.controls select{max-width:100%;width:100%}.preview{height:400px}.cardfoot p{min-height:0}.brandbar img{max-width:120px}.brandbar strong{flex:1 1 100%;order:2}.brandbar .palette{margin-left:auto}.brandcontrols{order:3}.draft{padding:20px}.detailtop{padding:9px;gap:6px}.detailtop h2{font-size:18px;flex:1 1 65%}.detailtop button{font-size:11px;padding:7px 9px}.detailtop a{font-size:11px}.detailbottom{padding:9px;font-size:11px}.detailbottom .small{display:none}dialog{width:98vw;height:98dvh;max-height:98dvh}.shortlist{align-items:start;flex-wrap:wrap;gap:7px}.shortlist .names{flex-basis:70%}.shortlist strong{font-size:12px}.shortlist>.small{display:none}.comparecolumn .canvas{height:50dvh}.brandcontrols select{max-width:100%}.brandcontrols label{min-width:0;flex:1}.comparecandidate label{width:100%}}
+.filterchips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:15px}.filterchips button{font-size:11px;min-height:32px;padding:5px 8px;background:#e7ecfa}.filters details>summary{min-height:44px;cursor:pointer;font-size:12px;padding:10px 0}.filters details fieldset{margin-top:14px}#filterdrawer{margin:0;width:min(330px,90vw);height:100dvh;max-height:100dvh;border-radius:0;display:none}#filterdrawer[open]{display:block}#filterdrawer .filters{display:block;width:100%;position:static;max-height:100%;box-shadow:none}
+@media(max-width:900px){.detailbody{display:block;overflow:auto}.detailbody>.canvas{height:65dvh;min-height:300px}.guidance{display:block;border-left:0;border-top:1px solid var(--line);padding:20px}.guidance p{max-width:65ch}.comparetabs{position:sticky;top:-14px;background:var(--ground);padding:8px 0;z-index:2}}
+@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
+/* Five-page catalog: one direction per broad row, bounded live canvases. */
+.wrap{max-width:1600px}.gallery-layout{display:block}.filters{display:none}.filtersclose,#filterbutton{display:block}.filters.open{display:block}.grid{display:flex;flex-direction:column;gap:30px}.card{display:grid;grid-template-columns:260px minmax(0,1fr);padding:24px;gap:26px;border-radius:8px;box-shadow:none}.cardmeta{min-width:0}.cardhead{padding:0;gap:8px}.cardhead h3{font-size:24px;line-height:1.15;margin:8px 0 0;letter-spacing:-.035em}.cardhead .small{font-size:10px;line-height:1.5}.cardfoot{padding:18px 0 0}.cardfoot p{font-size:13px;line-height:1.65;min-height:0;margin:10px 0 15px}.demo-business{display:block;font-size:12px;color:#373d4b}.cardfoot .affinities{font-size:11px;color:#626a78}.actions{gap:7px}.actions button{font-size:12px}.comparepick{margin-left:0;flex-basis:100%}.page-overview{min-width:0}.page-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.page-tile{min-width:0;border:1px solid #e2e5eb;border-radius:6px;overflow:hidden;background:#fafbfc}.thumbnail-button{display:block;padding:0;border:0;border-radius:0;width:100%;aspect-ratio:1.6;background:#eceef2;overflow:hidden;position:relative}.thumbnail-button img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}.thumbnail-button:hover img{filter:brightness(.96)}.thumb-fallback{display:flex;align-items:center;justify-content:center;height:100%;padding:24px;font-size:12px;color:#626a78}.tile-caption{padding:9px 11px;display:flex;align-items:center;justify-content:space-between;gap:8px;background:white}.tile-caption strong{font-size:11px;font-weight:600;line-height:1.4;overflow-wrap:anywhere}.tile-caption button{font-size:10px;min-height:36px;padding:5px 8px;white-space:nowrap}.full-site-tile{border:1px solid #d2d8e3;border-radius:6px;background:#f1f3f7;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;color:#303847;font-size:14px;font-weight:600;min-height:160px;text-decoration:none}.full-site-tile:hover{background:#e6eaf1}.row-page-select{display:none}.card>.previewtools,.card>.preview{grid-column:1/-1}.card>.previewtools{border:1px solid var(--line);margin-bottom:-26px;border-radius:6px 6px 0 0;padding:6px 15px;font-size:12px}.card>.preview{height:590px;border:1px solid var(--line);border-top:0;border-radius:0 0 6px 6px}.card>.preview[hidden],.card>.previewtools[hidden]{display:none}.draft{margin:32px 0 0;max-width:1100px}.controls{padding:16px 0;border-bottom:1px solid var(--line)}.intro{margin-bottom:20px}.intro p{max-width:62ch}.collection-entry{margin-top:24px}.comparecolumns{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}#detailpage,#comparepage{max-width:230px}.detailtop .toggles[aria-label=Specimen]{display:none}.filters .family-samples{display:none}#filterdrawer{width:min(780px,94vw);height:auto;max-height:92dvh;margin:auto;border-radius:10px}#filterdrawer .filters{padding:24px;overflow:auto}#filterdrawer #facets{display:grid;grid-template-columns:1fr 1fr;gap:25px}#filterdrawer .filtersclose{float:right}#filterdrawer .filters>h2{margin-bottom:20px}.filters .family-description{font-size:12px}.filters label{font-size:13px}.filters legend{font-size:14px}.filters input{min-width:16px}.filters .clear{margin-top:15px;width:auto}
+@media(max-width:1100px){.card{grid-template-columns:230px minmax(0,1fr);gap:20px;padding:20px}.page-tiles{gap:12px}.tile-caption{align-items:start;flex-direction:column}.card>.previewtools{margin-bottom:-20px}.full-site-tile{min-height:130px}}
+@media(max-width:768px){.card{display:block;padding:18px}.cardhead h3{font-size:26px}.cardfoot{padding-top:12px}.cardmeta .actions{margin-bottom:18px}.page-tiles{display:block}.page-tile[data-visible=false]{display:none}.tile-caption{flex-direction:row;align-items:center}.tile-caption strong{font-size:12px}.tile-caption button{min-height:44px;font-size:11px}.full-site-tile{margin-top:12px;min-height:64px}.row-page-select{display:block;width:100%;margin-bottom:12px}.thumbnail-button{aspect-ratio:1.2}.thumbnail-button img{object-fit:cover;object-position:top}.card>.previewtools{margin:18px 0 0}.card>.preview{height:520px}.comparecolumns{display:block}.comparecolumn[data-visible=false]{display:none}.comparetabs{display:flex}.controls label{flex-basis:130px}#filterdrawer #facets{grid-template-columns:1fr}#detailpage,#comparepage{max-width:100%;flex:1}.detailtop{align-content:start}.detailbody>.canvas{height:68dvh}.intro h1{font-size:34px}}
+`;
+
+// src/agent/theme-picker-shell.ts
+var escapeHtml = (s) => s.replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c]);
+function renderThemePickerShell({ fontStyles, introHtml, collectionOptions, release, scriptHtml }) {
+  const toggles = (prefix) => `<div class="toggles" aria-label="Preview viewport"><button id="${prefix}desktop">Desktop</button><button id="${prefix}mobile">Mobile</button></div><div class="toggles" aria-label="Specimen"><button id="${prefix}story">Homepage</button><button id="${prefix}guide">Service detail</button></div><select id="${prefix || "detail"}page" aria-label="Page"></select><select id="${prefix || "detail"}palette" aria-label="Preview palette"><option value="brand">Your brand</option><option value="original">Original palette</option></select>`;
+  return `<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Vitris \u2014 visual directions</title><style>${fontStyles}${PICKER_STYLES}fieldset{min-inline-size:0;max-width:100%;box-sizing:border-box}fieldset select{width:100%;max-width:100%;min-width:0}fieldset textarea{max-width:100%;box-sizing:border-box}</style></head><body><a class="skip" href="#main">Skip to directions</a><header class="topbar"><span class="wordmark">VITRIS / DIRECTIONS</span><span class="small">A point of view for your business</span></header><main id="main" class="wrap"><div class="intro"><h1>Find your direction.</h1>${introHtml}</div><div class="brandbar"><div id="brandbar" style="display:contents"></div><div class="brandcontrols"><label><span class="small">Preview brand </span><select id="brandselect" aria-label="Preview brand"></select></label><label><span class="small">Palette </span><select id="palette"><option value="brand">Your brand</option><option value="original">Original palette</option></select></label></div></div><div class="gallery-layout"><button class="filterbackdrop" id="filterbackdrop" aria-label="Close filters" tabindex="-1"></button><aside id="filters" class="filters" aria-label="Filter directions"><button class="filtersclose" id="filtersclose">Done</button><h2>Discover</h2><div id="facets"></div><button class="clear" id="clearfilters">Clear filters</button></aside><section aria-label="Browse directions"><div class="collection-entry" aria-label="Start browsing"><button id="allentry">All directions</button><button id="localentry">Local Service Edit</button></div><div class="controls"><button id="filterbutton" aria-expanded="false" aria-controls="filters">Filters</button><label class="searchlabel">Search directions<input id="search" type="search" placeholder="Try plumber, calm, booking or no photos"></label><label>Collection<select id="collection">${collectionOptions}</select></label><label>Group by<select id="group"><option value="none">No grouping</option><option value="family">Family</option><option value="collection">Collection</option><option value="identity">Identity</option><option value="industry">Industry</option></select></label><label>Sort<select id="sort"><option value="curated">Curated order</option><option value="name">Name A\u2013Z</option><option value="new">New directions</option></select></label><label>Viewport<select id="cardviewport"><option value="desktop">Desktop</option><option value="mobile">Mobile</option></select></label><label>Archive<select id="archive"><option value="current">Current \xB7 ${escapeHtml(release)}</option><option value="2026-10-08.3">Archive \xB7 2026-10-08.3</option><option value="2026-10-08.2">Archive \xB7 2026-10-08.2</option><option value="2026-10-08.1">Archive \xB7 original eight</option></select></label></div><div class="resultbar"><span id="count" role="status" aria-live="polite"></span><button id="clearall">Reset browsing</button></div><div id="chips" class="filterchips" aria-label="Active filters"></div><div id="grid" aria-label="Visual directions"></div><div id="empty" class="empty" hidden><h2>No directions match yet.</h2><p>Try a broader phrase or clear a filter.</p><button id="emptyclear">Clear filters</button><button id="emptyquery">Clear search</button></div></section></div><section id="choice" class="draft"><h2>Your direction</h2><p id="draftlabel" class="small"></p><div id="saved"></div><label for="notes">Anything you want us to keep, change, or avoid?</label><textarea id="notes" maxlength="8000"></textarea><p class="small">Optional. Your exact words travel with your choice.</p><fieldset><legend>How should we adapt this direction?</legend><label>When your content does not fill a section<select id="adaptsections"><option value="">Choose an approach</option><option value="preserve-ask">Keep sections with fill-in prompts; ask before removing</option><option value="agent-decides">Let the agent decide which sections to keep</option></select></label><label>AI imagery<select id="adaptimages"><option value="">Choose an approach</option><option value="ask-each">Ask me about each proposed image</option><option value="no-ai">Use existing imagery and placeholders</option><option value="agent-decides">Let the agent propose and generate imagery</option></select></label><label>What should visitors feel, and which moments should stay?<textarea id="adaptpriorities" maxlength="8000" placeholder="For example: cinematic imagery, expressive transitions, project browsing and the full section rhythm"></textarea></label><p class="small">Your agent maps sections and content gaps before building, then shows the representative page for feedback.</p></fieldset><div class="submitrow"><button id="submit" class="primary" disabled>Use this direction</button><span id="mode" class="small"></span></div><p id="status" class="status" role="status" aria-live="polite"></p><details class="portable"><summary>Copy, export or import your choice</summary><p class="small">Copy or export to share with your agent. Import saves a valid choice.</p><div class="actions"><button id="copy" disabled>Copy choice for agent</button><button id="export" disabled>Export choice JSON</button><label class="file">Import and save choice<input id="import" type="file" accept="application/json" aria-label="Import and save choice JSON"></label></div><textarea id="copytext" readonly hidden aria-label="Choice JSON to copy"></textarea></details></section><footer>Visual guides leave room for your own pages, words and images. Preview actions are demonstrations. \xB7 Release ${escapeHtml(release)}</footer></main><div id="shortlist" class="shortlist" hidden><div><strong id="shortcount"></strong><div class="small">Saved for browsing</div></div><div id="shortnames" class="names"></div><button id="compareopen">Compare</button><button id="shortclear">Clear</button><span id="browsenotice" class="notice" role="status"></span></div><dialog id="filterdrawer" aria-label="Filter directions"></dialog><dialog id="detail" aria-labelledby="detailtitle"><div class="detailtop"><h2 id="detailtitle"></h2>${toggles("")}<a id="direct" target="_blank" rel="noopener">Full preview \u2197</a><button id="close" aria-label="Close direction details">Close \u2715</button></div><div class="detailbody"><div id="canvas" class="canvas"></div><aside class="guidance"><h3>What makes it different</h3><p id="principles"></p><h3>What your agent will keep</h3><p id="freedoms"></p><h3>Needs from you</h3><p id="assets"></p><h3>Works well when</h3><p id="fit"></p></aside></div><div class="detailbottom"><button id="choose" class="primary">Choose this direction</button><button id="detailsave">Save to shortlist</button><span class="small">Your website gets its own content and page architecture.</span></div></dialog><dialog id="comparison" aria-labelledby="comparetitle"><div class="detailtop"><h2 id="comparetitle">Compare directions</h2>${toggles("compare")}<button id="compareclose" aria-label="Close comparison">Close \u2715</button></div><div class="comparebody"><div id="comparetabs" class="comparetabs"></div><div id="comparecolumns" class="comparecolumns"></div></div><div class="comparecandidate"><label>Visible candidates <select id="compareleft" aria-label="First comparison direction"></select> <select id="compareright" aria-label="Second comparison direction"></select></label><span class="small">Each preview scrolls independently. Saving here does not choose a direction.</span></div></dialog>${scriptHtml}</body></html>`;
+}
+
+// src/agent/theme-picker-selection-runtime.ts
+var SELECTION_RUNTIME = String.raw`
+function payload(){if(pending)return pending;const m=model(),t=findTheme(selected,selectedRelease);if(!t)throw Error('Choose a direction first.');if(!$('adaptsections').value||!$('adaptimages').value)throw Error('Choose how to handle content gaps and AI imagery.');return pending={schemaVersion:1,siteId:m.brand.siteId,themeId:t.id,themeRelease:t.release,themeHash:t.hash,brandContextHash:m.brandHash,notes:$('notes').value,adaptation:{version:1,sections:$('adaptsections').value,aiImages:$('adaptimages').value,priorities:$('adaptpriorities').value},source:m.test?'test-simulation':'user-ui',operationId:crypto.randomUUID(),selectedAt:new Date().toISOString(),previousSelectionHash:m.previousSelectionHash};}
+function validate(p){const m=model(),t=findTheme(p.themeId,p.themeRelease);if(!t||p.siteId!==m.brand.siteId||p.brandContextHash!==m.brandHash||p.themeHash!==t.hash||p.schemaVersion!==1||typeof p.notes!=='string'||p.notes.length>8000)throw Error('Wrong site, unknown release/theme or stale preview. Refresh and retain your notes.');if(m.test&&p.source!=='test-simulation')throw Error('This demo accepts test choices only.');}
+async function submit(p){validate(p);if(!session||location.origin!==session.origin){setStatus('Portable mode: export or copy the choice for your agent. Nothing has been submitted.');return;}const res=await fetch('/api/selection',{method:'POST',headers:{'Content-Type':'application/json','X-Theme-Session':session.token},body:JSON.stringify(p)}),r=await res.json();if(!res.ok)throw Error(r.error||'Save failed.');model().previousSelectionHash=r.currentSelectionHash;model().current=r.current;pending=null;$('draftlabel').textContent='Saved: '+findTheme(r.current.themeId,r.current.themeRelease).name;setStatus('Choice saved. Your agent can continue on its next workflow invocation.');}
+$('submit').onclick=async()=>{try{$('submit').disabled=true;await submit(payload());}catch(e){setStatus(e.message+' Your draft is retained.');}finally{$('submit').disabled=!selected;}};
+$('copy').onclick=async()=>{try{const text=JSON.stringify(payload(),null,2);$('copytext').value=text;$('copytext').hidden=false;try{await navigator.clipboard.writeText(text);setStatus('Choice copied; copying does not submit.');}catch{$('copytext').focus();$('copytext').select();setStatus('Copy the JSON below for your agent.');}}catch(e){setStatus(e.message);}};
+$('export').onclick=()=>{try{const url=URL.createObjectURL(new Blob([JSON.stringify(payload(),null,2)],{type:'application/json'})),a=document.createElement('a');a.href=url;a.download='theme-choice-'+model().brand.siteId+'.json';a.click();setTimeout(()=>URL.revokeObjectURL(url),1000);}catch(e){setStatus(e.message);}};
+$('import').onchange=async e=>{try{const file=e.target.files[0];if(!file)return;if(file.size>32000)throw Error('Choice file is too large.');const p=JSON.parse(await file.text());validate(p);selected=p.themeId;selectedRelease=p.themeRelease;$('notes').value=p.notes;for(const [id,key] of [['adaptsections','sections'],['adaptimages','aiImages'],['adaptpriorities','priorities']])$(id).value=p.adaptation?.[key]||'';update();stash();pending=p;await submit(p);}catch(e){setStatus(e.message);}finally{e.target.value='';}};
+`;
+
+// src/agent/theme-picker-runtime.ts
+var PICKER_RUNTIME = String.raw`
+const $=id=>document.getElementById(id),allThemes=m=>[...m.themes,...m.archiveThemes],key=t=>t.release+':'+t.id;
+let brandIndex=0,selected=null,selectedRelease=null,pending=null,opened=null,lastFocus=null,galleryY=0,detailFrame=null;
+let example='story',viewport='desktop',compareExample='story',compareViewport='desktop',comparePair=[],compareTab=0;
+const cards=new Map(),frames=new Set(),positions=new Map(),demoMemory=new Map();let compareFrames=[];
+const model=()=>models[brandIndex],draftKey=()=> 'vitris-theme-draft:'+model().brand.siteId+':'+model().brandHash,browseKey=()=> 'vitris-theme-browse:v3:'+model().themes[0].release+':'+model().brand.siteId;
+const findTheme=(id,release)=>allThemes(model()).find(t=>t.id===id&&t.release===release),byKey=k=>allThemes(model()).find(t=>key(t)===k);
+const defaults=()=>({collection:'All directions',families:[],identities:[],industries:[],media:[],tasks:[],query:'',group:'none',sort:'curated',archive:'current',shortlist:[],compare:[],palette:'brand',viewport:innerWidth<768?'mobile':'desktop'});
+let browse=defaults();
+function sanitize(input){const b={...defaults(),...input},choices={collection:vocabulary.collections,group:['none','family','collection','identity','industry'],sort:['curated','name','new'],archive:['current',...new Set(model().archiveThemes.map(t=>t.release))],palette:['brand','original'],viewport:['desktop','mobile']};for(const [k,values] of Object.entries(choices))if(!values.includes(b[k]))b[k]=defaults()[k];for(const [k,values] of Object.entries({families:Object.keys(vocabulary.families),identities:vocabulary.identities,industries:vocabulary.industries||[],media:['none','light','photo-led'],tasks:['call','quote','appointment','understand work','inspection','estimate']}))b[k]=Array.isArray(b[k])?[...new Set(b[k].filter(x=>values.includes(x)))]:[];b.query=typeof b.query==='string'?b.query.slice(0,200):'';for(const k of ['shortlist','compare'])b[k]=Array.isArray(b[k])?[...new Set(b[k].filter(x=>byKey(x)))].slice(0,k==='shortlist'?6:3):[];b.compare=b.compare.filter(k=>b.shortlist.includes(k));return b;}
+function restoreBrowse(){let stored={};try{stored=JSON.parse(localStorage.getItem(browseKey())||'{}');}catch{}const params=new URLSearchParams(location.search);for(const k of Object.keys(defaults()))if(params.has(k))stored[k]=['families','identities','industries','media','tasks','shortlist','compare'].includes(k)?params.get(k).split('|'):params.get(k);browse=sanitize(stored);}
+function persist(){try{localStorage.setItem(browseKey(),JSON.stringify(browse));}catch{}if(location.protocol==='http:'||location.protocol==='https:'){const params=new URLSearchParams();for(const [k,v] of Object.entries(browse)){const value=Array.isArray(v)?v.join('|'):v;if(value&&JSON.stringify(v)!==JSON.stringify(defaults()[k]))params.set(k,value);}history.replaceState(null,'',location.pathname+(params.size?'?'+params:''));}}
+const setStatus=s=>{$('status').textContent=s;};
+function stash(){try{localStorage.setItem(draftKey(),JSON.stringify({selected,release:selectedRelease,notes:$('notes').value,adaptation:{sections:$('adaptsections').value,aiImages:$('adaptimages').value,priorities:$('adaptpriorities').value}}));}catch{}}
+function update(){const t=findTheme(selected,selectedRelease);$('draftlabel').textContent=t?'Draft: '+t.name+'. Submit to save.':'Choose a direction when you are ready. Nothing has been submitted.';for(const id of ['submit','copy','export'])$(id).disabled=!t;for(const c of cards.values()){const yes=c.theme.id===selected&&c.theme.release===selectedRelease;c.element.dataset.selected=String(yes);c.choose.setAttribute('aria-pressed',String(yes));c.choose.textContent=yes?'Chosen ✓':'Choose';}pending=null;}
+function choose(id,release){selected=id;selectedRelease=release;update();stash();setStatus('Draft updated. Your choice has not been submitted.');}
+const resourceFor=(t,ex,v)=>ex?t.resources[browse.palette]?.[ex]?.[v]:undefined;
+function resourceUrl(resource,nonce){if(resource.html){let html=resource.html;for(const [path,data] of Object.entries(offlineAssets))html=html.replaceAll(path,data);const url=URL.createObjectURL(new Blob([html],{type:'text/html'}));return {url:url+'#bridge='+nonce+'&parent='+encodeURIComponent(location.protocol==='file:'||location.origin==='null'?'*':location.origin),blob:url};}return {url:resource.url+'#bridge='+nonce+'&parent='+encodeURIComponent(location.protocol==='file:'||location.origin==='null'?'*':location.origin)};}
+function geometry(s){if(!s.frame)return;const rect=s.host.getBoundingClientRect(),card=s.host.classList.contains('preview'),width=s.viewport==='mobile'?390:Math.max(768,Math.floor(rect.width)),scale=Math.min(1,rect.width/width);if(!scale)return;s.frame.style.width=width+'px';s.frame.style.height=Math.max(200,rect.height/scale)+'px';s.frame.style.zoom=String(scale);s.frame.style.left=Math.floor(Math.max(0,(rect.width-width*scale)/2)/scale)+'px';}
+function dispose(s){if(!s)return;if(s.frame)positions.set(s.resource.id,s.atEnd?Number.MAX_SAFE_INTEGER:s.y||0);clearTimeout(s.timer);s.observer?.disconnect();s.frame?.remove();if(s.blob)URL.revokeObjectURL(s.blob);frames.delete(s);}
+function replaceState(old,fresh){if(detailFrame===old)detailFrame=fresh;for(const c of cards.values())if(c.state===old)c.state=fresh;compareFrames=compareFrames.map(s=>s===old?fresh:s);}
+function mount(host,t,ex,v){const resource=resourceFor(t,ex,v);if(!resource){host.dataset.ready='true';host.replaceChildren();const note=document.createElement('p');note.textContent='This direction has no matching page for that role. Choose another page. A different route was not substituted.';host.append(note);return null;}const nonce=crypto.randomUUID(),frame=document.createElement('iframe'),s={host,theme:t,resource,nonce,frame,viewport:v,y:positions.get(resource.id)||0,height:0,viewHeight:0};host.dataset.ready='false';host.replaceChildren();const status=document.createElement('div');status.className='loadstate';status.setAttribute('role','status');status.textContent='Loading '+t.name+'…';host.append(status);s.status=status;frame.setAttribute('sandbox','allow-scripts allow-downloads');frame.title=t.name+' '+(t.pages.find(p=>pageKey(p)===ex)?.label||ex)+' '+v+' scrollable preview';frame.style.opacity='0';host.append(frame);frames.add(s);geometry(s);s.observer=new ResizeObserver(()=>geometry(s));s.observer.observe(host);const src=resourceUrl(resource,nonce);s.blob=src.blob;frame.src=src.url;s.fail=message=>{if(!frames.has(s)||s.ready)return;status.replaceChildren();status.className='loadstate error';const p=document.createElement('p');p.textContent=message;const retry=document.createElement('button');retry.textContent='Retry preview';retry.onclick=()=>{dispose(s);replaceState(s,mount(host,t,ex,v));};const direct=document.createElement('a');direct.textContent='Open full preview';direct.href=src.blob||resource.url;direct.target='_blank';direct.rel='noopener';status.append(p,retry,direct);};frame.onerror=()=>s.fail('This preview could not be loaded.');s.timer=setTimeout(()=>s.fail('The preview did not produce visible content. Retry or open it directly.'),12000);return s;}
+function scrollFrame(s,y){if(!s?.frame||!Number.isFinite(y))return;s.y=Math.max(0,Math.min(y,s.ready?Math.max(0,s.height-s.viewHeight):y));s.atEnd=s.ready&&s.y>=s.height-s.viewHeight-1;positions.set(s.resource.id,s.atEnd?Number.MAX_SAFE_INTEGER:s.y);if(s.ready)s.frame.contentWindow.postMessage({channel:'vitris-specimen-v1',kind:'scroll-to',identity:s.resource.id,nonce:s.nonce,y},'*');}
+addEventListener('message',e=>{const m=e.data;if(!m||m.channel!=='vitris-specimen-v1')return;const s=[...frames].find(s=>e.source===s.frame.contentWindow&&m.nonce===s.nonce&&m.identity===s.resource.id);if(!s||!['null',location.origin].includes(e.origin))return;if(m.kind==='memory'){if(typeof m.key==='string')demoMemory.set(s.theme.id+':'+m.key,m.value);return;}if(m.kind==='navigate'){const pageId=m.pageId||m.role;if(!s.theme.pages.some(p=>(p.pageId||p.role)===pageId))return;if(s===detailFrame){example=pageId;drawDetail();}else if(compareFrames.includes(s)){compareExample=pageId;drawCompare();}else{const c=[...cards.values()].find(c=>c.state===s);c?.show(pageId,c.lastButton);}return;}if(m.kind==='error'){s.fail(m.message||'Preview content is unavailable.');return;}if(m.kind==='close'){if(s===detailFrame)$('detail').close();else if(compareFrames.includes(s))$('comparison').close();else [...cards.values()].find(c=>c.state===s)?.deactivate();return;}if(m.kind==='edge'){if(!s.host.classList.contains('preview')||!Number.isFinite(m.delta)||![0,1,2].includes(m.mode))return;scrollBy({top:m.delta*(m.mode===1?16:m.mode===2?innerHeight:1),behavior:'instant'});return;}if(!['ready','scroll','resize'].includes(m.kind)||![m.y,m.height,m.viewport].every(Number.isFinite)||m.height<=0||m.viewport<=0)return;const keepEnd=s.atEnd;s.height=m.height;s.viewHeight=m.viewport;if(m.kind==='resize'){if(keepEnd)scrollFrame(s,Number.MAX_SAFE_INTEGER);}else if(m.kind==='ready'){s.ready=true;clearTimeout(s.timer);s.status.hidden=true;s.frame.style.opacity='1';s.host.dataset.ready='true';scrollFrame(s,s.y);for(const [memKey,memValue] of demoMemory){const prefix=s.theme.id+':';if(memKey.startsWith(prefix))s.frame.contentWindow.postMessage({channel:'vitris-specimen-v1',kind:'memory',identity:s.resource.id,nonce:s.nonce,key:memKey.slice(prefix.length),value:memValue},'*');}}else{s.y=m.y;s.atEnd=m.y>=m.height-m.viewport-1;positions.set(s.resource.id,s.atEnd?Number.MAX_SAFE_INTEGER:m.y);}const c=[...cards.values()].find(c=>c.state===s);if(c)c.progress.textContent=Math.round(100*s.y/Math.max(1,s.height-s.viewHeight))+'%';});
+
+const visibleObserver=new IntersectionObserver(entries=>{for(const entry of entries){const c=[...cards.values()].find(c=>c.host===entry.target);if(c&&!entry.isIntersecting&&c.state&&!c.element.contains(document.activeElement))c.deactivate(false);}},{rootMargin:'300px 0px'});
+function button(text,action,cls){const b=document.createElement('button');b.textContent=text;b.onclick=action;if(cls)b.className=cls;return b;}
+function makeCard(t,archive){
+ const element=document.createElement('article');element.className='card';element.dataset.theme=t.id;element.dataset.release=t.release;element.setAttribute('role','listitem');
+ const meta=document.createElement('aside');meta.className='cardmeta';const head=document.createElement('div');head.className='cardhead';const title=document.createElement('div'),small=document.createElement('div');small.className='small';small.textContent=t.browse.family+' · '+t.browse.primaryIdentity+(t.browse.industry?' · '+t.browse.industry:'')+(t.pages?.some(p=>p.group==='Legal')?' · '+t.pageCount+' pages · '+(t.pageCount-t.pages.filter(p=>p.group==='Legal').length)+' substantive + '+t.pages.filter(p=>p.group==='Legal').length+' support':(t.pageCount>5?' · '+t.pageCount+' pages':''))+(t.audience?' · '+t.audience:'')+(t.browse.new?' · New':'');const h=document.createElement('h3');h.textContent=t.name;title.append(small,h);const save=button('☆',()=>toggleShort(t),'save');save.setAttribute('aria-label','Save '+t.name+' to shortlist');head.append(title,save);
+ const foot=document.createElement('div');foot.className='cardfoot';const business=document.createElement('strong');business.className='demo-business';business.textContent=t.business;const p=document.createElement('p');p.textContent=t.description;const affinities=document.createElement('p');affinities.className='affinities';affinities.textContent=t.browse.identities.join(' · ');const actions=document.createElement('div');actions.className='actions';const explore=button('Explore '+t.name,()=>openDetail(t,explore));const chooseButton=button('Choose',()=>choose(t.id,t.release));chooseButton.setAttribute('aria-label','Choose '+t.name);if(archive){chooseButton.disabled=true;chooseButton.title='Preserved for accepted historical choices.';}const label=document.createElement('label');label.className='comparepick';const check=document.createElement('input');check.type='checkbox';check.setAttribute('aria-label','Compare '+t.name);check.onchange=()=>toggleCompare(t,check.checked);label.append(check,'Compare');actions.append(explore,chooseButton,label);foot.append(business,p,affinities,actions);meta.append(head,foot);
+ const overview=document.createElement('div');overview.className='page-overview';const mobileSelect=document.createElement('select');mobileSelect.className='row-page-select';mobileSelect.setAttribute('aria-label',t.name+' page thumbnail');const tiles=document.createElement('div');tiles.className='page-tiles';
+ const top=document.createElement('div');top.className='previewtools';top.hidden=true;const hint=document.createElement('span'),progress=document.createElement('span');progress.textContent='0%';hint.append('Live scroll preview · ',progress);const exit=button('Return to gallery',null,'exitpreview');const host=document.createElement('div');host.className='preview';host.hidden=true;host.tabIndex=0;host.setAttribute('role','region');host.setAttribute('aria-label','Scroll '+t.name+' preview');top.append(hint,exit);
+ const c={element,theme:t,host,progress,choose:chooseButton,save,check,state:null,archive,role:pageKey(t.pages[0]),thumbs:[]};let active=false;
+ c.deactivate=(focus=true)=>{active=false;dispose(c.state);c.state=null;host.replaceChildren();host.hidden=true;top.hidden=true;if(focus){c.lastButton?.focus({preventScroll:true});if(Number.isFinite(c.galleryY))scrollTo({top:c.galleryY,behavior:'instant'});}};c.isActive=()=>active;
+ c.show=(role,focus)=>{for(const other of cards.values())if(other!==c&&other.state)other.deactivate(false);if(!active)c.galleryY=scrollY;c.role=role;c.lastButton=focus;active=true;host.hidden=false;top.hidden=false;dispose(c.state);c.state=mount(host,t,role,browse.viewport);c.syncThumbs();host.scrollIntoView({block:'center',behavior:'instant'});host.focus({preventScroll:true});};
+ c.syncThumbs=()=>{for(const item of c.thumbs){const r=resourceFor(t,item.role,browse.viewport);item.tile.dataset.visible=String(item.role===c.role);item.img.alt=t.name+' · '+item.label+' · '+(browse.palette==='brand'?model().brand.name:'Original palette');if(r.thumbnail){item.img.src=r.thumbnail;item.img.hidden=false;item.fallback.hidden=true;}else{item.img.hidden=true;item.fallback.hidden=false;}}mobileSelect.value=c.role;c.full.href=resourceFor(t,pageKey(t.pages[0]),browse.viewport).full;c.full.textContent=t.pageCount>5?'Explore all '+t.pageCount+' pages':archive?'Open preserved preview ↗':'Open full site ↗';if(!session){c.full.onclick=e=>{e.preventDefault();openDetail(t,c.full,pageKey(t.pages[0]));};}};
+ for(const page of t.pages.filter(p=>p.featured!==false).slice(0,t.pageCount>5?5:99)){const tile=document.createElement('section');tile.className='page-tile';tile.dataset.role=pageKey(page);const imageButton=button('',()=>openDetail(t,imageButton));imageButton.className='thumbnail-button';imageButton.setAttribute('aria-label','Explore '+t.name+' '+page.label);imageButton.onclick=()=>{openDetail(t,imageButton,pageKey(page));};const img=document.createElement('img');img.loading='lazy';img.decoding='async';img.width=480;img.height=300;const fallback=document.createElement('span');fallback.className='thumb-fallback';fallback.textContent='Open the live page';img.onerror=()=>{img.hidden=true;fallback.hidden=false;fallback.textContent='Live page available';};imageButton.append(img,fallback);const caption=document.createElement('div');caption.className='tile-caption';const text=document.createElement('strong');text.textContent=page.label;const scroll=button('Scroll preview',()=>c.show(pageKey(page),scroll));scroll.setAttribute('aria-label','Scroll '+t.name+' '+page.label);caption.append(text,scroll);tile.append(imageButton,caption);tiles.append(tile);c.thumbs.push({tile,img,fallback,role:pageKey(page),label:page.label});const option=document.createElement('option');option.value=pageKey(page);option.textContent=page.label;mobileSelect.append(option);}
+ for(const page of t.pages){if([...mobileSelect.options].some(o=>o.value===pageKey(page)))continue;const option=document.createElement('option');option.value=pageKey(page);option.textContent=page.label;mobileSelect.append(option);}const full=document.createElement('a');full.className='full-site-tile';full.target='_blank';full.rel='noopener';full.textContent=archive?'Open preserved preview ↗':'Open full site ↗';c.full=full;tiles.append(full);mobileSelect.onchange=()=>{c.role=mobileSelect.value;if(c.state)c.show(c.role,mobileSelect);else c.syncThumbs();};overview.append(mobileSelect,tiles);element.append(meta,overview,top,host);c.syncThumbs();exit.onclick=()=>c.deactivate();
+ host.onkeydown=e=>{const map={ArrowDown:80,ArrowUp:-80,PageDown:Math.max(250,(c.state?.viewHeight||600)*.85),PageUp:-Math.max(250,(c.state?.viewHeight||600)*.85),Home:0,End:Number.MAX_SAFE_INTEGER};if(e.key==='Escape'){e.preventDefault();c.deactivate();}else if(e.key in map){e.preventDefault();scrollFrame(c.state,e.key==='Home'||e.key==='End'?map[e.key]:(c.state?.y||0)+map[e.key]);}};
+ host.addEventListener('wheel',e=>{if(!active||e.ctrlKey||e.metaKey||Math.abs(e.deltaX)>Math.abs(e.deltaY)||!c.state?.ready)return;const s=c.state,delta=e.deltaY*(e.deltaMode===1?16:e.deltaMode===2?s.viewHeight:1);if((delta>0&&s.y<s.height-s.viewHeight-1)||(delta<0&&s.y>1)){e.preventDefault();scrollFrame(s,s.y+delta);}},{passive:false});return c;
+}
+function baseThemes(){return browse.archive==='current'?model().themes:model().archiveThemes.filter(t=>t.release===browse.archive);}
+function syncControls(){$('allentry').setAttribute('aria-pressed',String(browse.collection==='All directions'));$('localentry').setAttribute('aria-pressed',String(browse.collection==='Local Service Edit'));for(const [id,k] of Object.entries({collection:'collection',search:'query',group:'group',sort:'sort',archive:'archive',palette:'palette',cardviewport:'viewport'}))$(id).value=browse[k];for(const input of $('facets').querySelectorAll('input'))input.checked=browse[input.dataset.facet].includes(input.value);}
+// Some embedded browsers hit the focused outer control at fractional iframe edges.
+// Route only a real wheel whose pointer is visibly inside an active preview.
+// Keep focus untouched, and leave zoom, horizontal gestures and edge exit native.
+document.addEventListener('wheel',e=>{if(e.defaultPrevented||e.ctrlKey||e.metaKey||Math.abs(e.deltaX)>Math.abs(e.deltaY))return;for(const s of frames){if(!s.host.isConnected||!s.ready||!s.host.getClientRects().length)continue;const r=s.host.getBoundingClientRect();if(e.clientX<r.left||e.clientX>=r.right||e.clientY<r.top||e.clientY>=r.bottom)continue;const delta=e.deltaY*(e.deltaMode===1?16:e.deltaMode===2?s.viewHeight:1);if((delta>0&&s.y<s.height-s.viewHeight-1)||(delta<0&&s.y>1)){e.preventDefault();scrollFrame(s,s.y+delta);}break;}},{capture:true,passive:false});
+function applyFilter(){const result=browseResults(baseThemes(),browse);for(const c of cards.values())visibleObserver.unobserve(c.host);const fragment=document.createDocumentFragment();for(const g of result.groups){const section=document.createElement('section');section.className='group';if(g.name){const h=document.createElement('h2');h.textContent=g.name+' · '+g.themes.length;section.append(h);}const grid=document.createElement('div');grid.className='grid';grid.setAttribute('role','list');for(const t of g.themes)grid.append(cards.get(key(t)).element);section.append(grid);fragment.append(section);}$('grid').replaceChildren(fragment);const visible=new Set(result.visible.map(key));for(const [k,c] of cards)if(visible.has(k))visibleObserver.observe(c.host);else if(c.state){dispose(c.state);c.state=null;}$('count').textContent=result.visible.length+' of '+baseThemes().length+' directions'+(browse.query?' for “'+browse.query+'”':'');$('empty').hidden=!!result.visible.length;syncControls();syncFacetCounts();syncChips();syncShort();persist();}
+function syncChips(){$('chips').replaceChildren();const chips=[];if(browse.collection!=='All directions')chips.push(['Collection: '+browse.collection,()=>{browse.collection='All directions';applyFilter();}]);for(const k of ['industries','families','identities','media','tasks'])for(const value of browse[k])chips.push([value,()=>{browse[k]=browse[k].filter(x=>x!==value);applyFilter();}]);if(browse.query)chips.push(['Search: '+browse.query,()=>{browse.query='';applyFilter();}]);for(const [name,remove] of chips){const b=button(name+' ×',remove);b.setAttribute('aria-label','Remove '+name);$('chips').append(b);}if(!chips.length)$('chips').hidden=true;else $('chips').hidden=false;$('empty').querySelector('p').textContent='Current filters: '+(chips.map(c=>c[0]).join(' · ')||'none')+'. Try a broader phrase or remove a filter.';}
+function facetUI(){const specs=[['industries','Industry',vocabulary.industries||[]],['families','Family',Object.keys(vocabulary.families)],['identities','Identity',vocabulary.identities],['media','Images',['none','light','photo-led']],['tasks','Customer task',['call','quote','appointment','understand work','inspection','estimate']]];$('facets').replaceChildren();const advanced=document.createElement('details'),summary=document.createElement('summary');summary.textContent='More filters';advanced.append(summary);for(const [facet,name,values] of specs){const field=document.createElement('fieldset'),legend=document.createElement('legend');legend.textContent=name;field.append(legend);if(facet==='identities'){const explanation=document.createElement('p');explanation.className='family-description';explanation.textContent='How you want your business to feel.';field.append(explanation);}for(const value of values){const label=document.createElement('label'),input=document.createElement('input'),count=document.createElement('small');input.type='checkbox';input.value=value;input.dataset.facet=facet;input.onchange=()=>{browse[facet]=input.checked?[...browse[facet],value]:browse[facet].filter(x=>x!==value);applyFilter();};const display={none:'No photos needed',light:'A few images','photo-led':'Photography leads',call:'Phone enquiry',quote:'Request a quote',appointment:'Appointment / class','understand work':'Understand the work'};count.textContent=baseThemes().filter(t=>{if(facet==='families')return t.browse.family===value;if(facet==='media')return t.browse.media===value;if(facet==='industries')return (t.browse.industries||[t.browse.industry]).includes(value);return (t.browse[facet]||[]).includes(value);}).length;label.append(input,display[value]||value,count);field.append(label);if(facet==='families'){const d=document.createElement('p');d.className='family-description';d.textContent=vocabulary.families[value];field.append(d);if(browse.archive==='current'){const strip=document.createElement('div');strip.className='family-samples';strip.setAttribute('aria-label',value+' examples');for(const t of model().themes.filter(t=>t.browse.family===value&&vocabulary.samples[t.id]).slice(0,3)){const img=document.createElement('img');img.src=vocabulary.samples[t.id];img.alt=t.name+' original palette opening';img.title=t.name;strip.append(img);}field.append(strip);}}}if(['media','tasks'].includes(facet))advanced.append(field);else $('facets').append(field);}$('facets').append(advanced);}
+function notice(text){$('browsenotice').textContent=text;setTimeout(()=>{$('browsenotice').textContent='';},5000);}
+function syncFacetCounts(){for(const input of $('facets').querySelectorAll('input[data-facet]')){const facet=input.dataset.facet;const count=browseResults(baseThemes(),{...browse,[facet]:[input.value]}).visible.length;input.parentElement.querySelector('small').textContent=count;}}
+function toggleShort(t){const k=key(t);if(browse.shortlist.includes(k)){browse.shortlist=browse.shortlist.filter(x=>x!==k);browse.compare=browse.compare.filter(x=>x!==k);}else if(browse.shortlist.length<6)browse.shortlist.push(k);else notice('Your shortlist holds six directions. Remove one to add another.');syncShort();persist();}
+function toggleCompare(t,yes){const k=key(t);if(!yes)browse.compare=browse.compare.filter(x=>x!==k);else if(browse.compare.length>=3)notice('Compare up to three directions.');else if(!browse.shortlist.includes(k)&&browse.shortlist.length>=6)notice('Remove a shortlisted direction first.');else {if(!browse.shortlist.includes(k))browse.shortlist.push(k);browse.compare.push(k);}syncShort();persist();}
+function syncShort(){for(const [k,c] of cards){const saved=browse.shortlist.includes(k);c.save.textContent=saved?'★':'☆';c.save.setAttribute('aria-pressed',String(saved));c.check.checked=browse.compare.includes(k);}$('shortlist').hidden=!browse.shortlist.length;$('shortcount').textContent='Shortlist '+browse.shortlist.length+'/6';$('shortnames').replaceChildren();for(const k of browse.shortlist){const t=byKey(k);$('shortnames').append(button(t.name+' ×',()=>toggleShort(t)));}$('compareopen').textContent='Compare '+browse.compare.length+'/3';$('compareopen').disabled=browse.compare.length<2;if(opened)$('detailsave').textContent=browse.shortlist.includes(key(opened))?'Remove from shortlist':'Save to shortlist';}
+function render(){for(const c of cards.values()){visibleObserver.unobserve(c.host);dispose(c.state);}cards.clear();const m=model();restoreBrowse();selected=null;selectedRelease=null;$('notes').value='';for(const id of ['adaptsections','adaptimages','adaptpriorities'])$(id).value='';try{const draft=JSON.parse(localStorage.getItem(draftKey())||'null');if(draft){selected=draft.selected;selectedRelease=draft.release||m.current?.themeRelease||m.themes[0].release;$('notes').value=typeof draft.notes==='string'?draft.notes:'';for(const [id,key] of [['adaptsections','sections'],['adaptimages','aiImages'],['adaptpriorities','priorities']])$(id).value=draft.adaptation?.[key]||'';}else if(m.current){selected=m.current.themeId;selectedRelease=m.current.themeRelease;$('notes').value=m.current.notes;for(const [id,key] of [['adaptsections','sections'],['adaptimages','aiImages'],['adaptpriorities','priorities']])$(id).value=m.current.adaptation?.[key]||'';}}catch{}$('brandbar').replaceChildren();if(m.logo){const img=document.createElement('img');img.src=m.logo;img.alt=m.brand.name;$('brandbar').append(img);}const name=document.createElement('strong');name.textContent=m.brand.name;$('brandbar').append(name);const palette=document.createElement('div');palette.className='palette';palette.setAttribute('aria-label','Captured brand palette');for(const color of m.brand.colors.length?m.brand.colors:[{value:'#56636b'}]){const sw=document.createElement('span');sw.style.background=color.value;sw.title=color.value;palette.append(sw);}$('brandbar').append(palette);for(const [list,archive] of [[m.themes,false],[m.archiveThemes,true]])for(const t of list)cards.set(key(t),makeCard(t,archive));$('mode').textContent=m.test?'Local review demo · test choices only':'Your agent continues on its next workflow invocation.';$('saved').replaceChildren();if(m.current){const saved=findTheme(m.current.themeId,m.current.themeRelease);if(saved){const b=button('Saved direction: '+saved.name,()=>openDetail(saved,b));$('saved').append(b);}}facetUI();update();applyFilter();}
+function drawDetail(){dispose(detailFrame);syncPageOptions($('detailpage'),opened,example);example=$('detailpage').value;const resource=resourceFor(opened,example,viewport);$('direct').href=resource.full||resource.url||'#';$('direct').hidden=!!resource.html;for(const v of ['desktop','mobile'])$(v).setAttribute('aria-pressed',String(viewport===v));for(const ex of ['story','guide'])$(ex).setAttribute('aria-pressed',String(example===ex));$('detailpalette').value=browse.palette;detailFrame=mount($('canvas'),opened,example,viewport);}
+function pageKey(p){return p.pageId||p.role;}function syncPageOptions(select,t,value){select.replaceChildren();const grouped=t.pageCount>5,groups=new Map();for(const p of t.pages){const o=document.createElement('option');o.value=pageKey(p);o.textContent=p.label;if(grouped){let g=groups.get(p.group);if(!g){g=document.createElement('optgroup');g.label=p.group;groups.set(p.group,g);select.append(g);}g.append(o);}else select.append(o);}const keys=t.pages.map(pageKey);const guide=(t.id==='cleaning-clearline'?t.pages.find(p=>p.pageId==='deep-cleaning'):t.id==='electrical-current-and-craft'?t.pages.find(p=>p.pageId==='ev'):undefined)||t.pages.find(p=>p.pageId==='service-detail')||t.pages.find(p=>p.compareRole==='detail');const alias=value==='story'&&keys.includes('home')?'home':value==='guide'&&guide?pageKey(guide):'';select.value=keys.includes(value)?value:(alias&&keys.includes(alias)?alias:keys[0]);}
+$('detailpage').onchange=e=>{example=e.target.value;drawDetail();};$('comparepage').onchange=e=>{compareExample=e.target.value;drawCompare();};
+function openDetail(t,focus,role='story'){opened=t;lastFocus=focus;galleryY=scrollY;example=role;$('canvas').dataset.ready='false';viewport=browse.viewport;$('detailtitle').textContent=t.name;$('principles').textContent=t.description;$('freedoms').textContent=t.keep+' '+t.freedoms;$('assets').textContent=t.image;$('fit').textContent=t.browse.fit.join(' · ');$('guide').textContent=t.release==='2026-10-08.1'?'Field guide':'Service detail';$('choose').disabled=model().archiveThemes.includes(t);syncShort();$('detail').showModal();$('close').focus({preventScroll:true});requestAnimationFrame(()=>{if($('detail').open)drawDetail();});}
+// A native dialog close event is queued. Do not let it steal newer focus or clear a reopened canvas.
+function restoreGallery(dialog){const focused=document.activeElement;if(focused===document.body||dialog.contains(focused)||focused===lastFocus){lastFocus?.focus({preventScroll:true});scrollTo({top:galleryY,behavior:'instant'});}}
+$('close').onclick=()=>$('detail').close();$('detail').addEventListener('close',()=>{if($('detail').open)return;dispose(detailFrame);detailFrame=null;$('canvas').replaceChildren();restoreGallery($('detail'));});$('choose').onclick=()=>{choose(opened.id,opened.release);$('detail').close();$('choice').scrollIntoView({behavior:'instant'});$('notes').focus();};$('detailsave').onclick=()=>toggleShort(opened);for(const v of ['desktop','mobile'])$(v).onclick=()=>{viewport=v;drawDetail();};for(const ex of ['story','guide'])$(ex).onclick=()=>{example=ex;drawDetail();};
+function paletteChanged(mode){browse.palette=mode;syncControls();for(const c of cards.values()){c.syncThumbs();if(c.state)c.show(c.role,c.lastButton);}if($('detail').open)drawDetail();if($('comparison').open)drawCompare();persist();}
+$('detailpalette').onchange=e=>paletteChanged(e.target.value);$('palette').onchange=e=>paletteChanged(e.target.value);
+function drawCompare(){const first=byKey(comparePair[0]);if(first){syncPageOptions($('comparepage'),first,compareExample);compareExample=$('comparepage').value;}for(const s of compareFrames)dispose(s);compareFrames=[];$('comparecolumns').replaceChildren();$('comparetabs').replaceChildren();for(const v of ['desktop','mobile'])$('compare'+v).setAttribute('aria-pressed',String(compareViewport===v));for(const ex of ['story','guide'])$('compare'+ex).setAttribute('aria-pressed',String(compareExample===ex));$('comparepalette').value=browse.palette;comparePair.forEach((k,i)=>{const t=byKey(k);if(!t)return;const tab=button(t.name,()=>{compareTab=i;drawCompare();});tab.setAttribute('aria-pressed',String(compareTab===i));$('comparetabs').append(tab);const col=document.createElement('section');col.className='comparecolumn';col.dataset.visible=String(compareTab===i);const h=document.createElement('h3');h.textContent=t.name;const jump=document.createElement('div');jump.className='jump';const host=document.createElement('div');host.className='canvas';for(const [name,fraction] of [['Start',0],['Middle',.5],['End',1]])jump.append(button(name,()=>{const s=compareFrames.find(s=>s.host===host);if(s?.ready)scrollFrame(s,(s.height-s.viewHeight)*fraction);}));const dl=document.createElement('dl');for(const [name,value] of [['Personality',t.browse.identities.join(' · ')],['Structure',t.description],['Images',t.image],['Customer tasks',t.browse.tasks.join(' · ')]]){const dt=document.createElement('dt'),dd=document.createElement('dd');dt.textContent=name;dd.textContent=value;dl.append(dt,dd);}col.append(h,jump,host,dl);$('comparecolumns').append(col);requestAnimationFrame(()=>{if($('comparison').open&&host.isConnected&&getComputedStyle(col).display!=='none')compareFrames.push(mount(host,t,(()=>{const key=pageKey;if(t.pages.some(p=>key(p)===compareExample))return compareExample;if(compareExample==='story'&&t.pages.some(p=>key(p)==='home'))return 'home';if(compareExample==='guide'&&t.pages.some(p=>key(p)==='service-detail'))return 'service-detail';const source=byKey(comparePair[0]);const selected=source?.pages.find(p=>key(p)===compareExample);const match=selected?.compareRole&&t.pages.find(p=>p.compareRole===selected.compareRole&&(!['electrical-current-and-craft','cleaning-clearline'].includes(t.id)||p.featured));return match?key(match):null;})(),compareViewport));});});for(const [id,index] of [['compareleft',0],['compareright',1]]){$(id).replaceChildren();for(const k of browse.compare){const o=document.createElement('option');o.value=k;o.textContent=byKey(k).name;$(id).append(o);}$(id).value=comparePair[index];}}
+$('compareopen').onclick=()=>{lastFocus=$('compareopen');galleryY=scrollY;comparePair=browse.compare.slice(0,3);compareTab=0;compareViewport=browse.viewport;$('comparison').showModal();$('compareclose').focus();drawCompare();};$('compareclose').onclick=()=>$('comparison').close();$('comparison').addEventListener('close',()=>{if($('comparison').open)return;for(const s of compareFrames)dispose(s);compareFrames=[];$('comparecolumns').replaceChildren();restoreGallery($('comparison'));});for(const v of ['desktop','mobile'])$('compare'+v).onclick=()=>{compareViewport=v;drawCompare();};for(const ex of ['story','guide'])$('compare'+ex).onclick=()=>{compareExample=ex;drawCompare();};$('comparepalette').onchange=e=>paletteChanged(e.target.value);for(const [id,index] of [['compareleft',0],['compareright',1]])$(id).onchange=e=>{const next=e.target.value,other=1-index;if(comparePair[other]===next)comparePair[other]=comparePair[index];comparePair[index]=next;drawCompare();};
+function clearFilters(){for(const k of ['families','identities','industries','media','tasks'])browse[k]=[];browse.collection='All directions';applyFilter();}
+function closeFilters(){if($('filterdrawer').open)$('filterdrawer').close();}
+$('filterdrawer').addEventListener('close',()=>{if($('filterdrawer').open)return;const focused=document.activeElement,restore=focused===document.body||$('filterdrawer').contains(focused)||focused===$('filterbutton');$('filters').classList.remove('open');document.querySelector('.gallery-layout').prepend($('filters'));$('filterbutton').setAttribute('aria-expanded','false');if(restore)$('filterbutton').focus({preventScroll:true});});$('filterbutton').onclick=()=>{$('filterdrawer').append($('filters'));$('filters').classList.add('open');$('filterbutton').setAttribute('aria-expanded','true');$('filterdrawer').showModal();$('filtersclose').focus();};$('filtersclose').onclick=closeFilters;$('filterbackdrop').onclick=closeFilters;
+$('allentry').onclick=()=>{browse.collection='All directions';applyFilter();};$('localentry').onclick=()=>{browse.collection='Local Service Edit';applyFilter();};$('clearfilters').onclick=clearFilters;$('emptyclear').onclick=clearFilters;$('emptyquery').onclick=()=>{browse.query='';applyFilter();};$('clearall').onclick=()=>{const {shortlist,compare}=browse;browse={...defaults(),shortlist,compare};facetUI();applyFilter();};$('shortclear').onclick=()=>{browse.shortlist=[];browse.compare=[];syncShort();persist();};for(const id of ['notes','adaptsections','adaptimages','adaptpriorities'])$(id).oninput=()=>{pending=null;stash();};
+for(const [id,k] of Object.entries({collection:'collection',group:'group',sort:'sort',archive:'archive'}))$(id).onchange=e=>{browse[k]=e.target.value;if(id==='archive')facetUI();applyFilter();};$('search').oninput=e=>{browse.query=e.target.value;applyFilter();};$('cardviewport').onchange=e=>{browse.viewport=e.target.value;for(const c of cards.values()){c.syncThumbs();if(c.state){dispose(c.state);c.state=mount(c.host,c.theme,c.role,browse.viewport);}}persist();};
+` + SELECTION_RUNTIME + String.raw`
+models.forEach((m,i)=>{const o=document.createElement('option');o.value=String(i);o.textContent=m.brand.name;$('brandselect').append(o);});$('brandselect').hidden=models.length===1;$('brandselect').onchange=e=>{stash();brandIndex=Number(e.target.value);render();};render();
+`;
+
+export {
+  renderThemePickerShell,
+  PICKER_RUNTIME
+};