@panphora/bevel 0.1.0

package/examples/components/reference/selected/coverage.json

@@ -0,0 +1,413 @@
+{
+  "seat": "selected",
+  "phase": "static",
+  "components": [
+    {
+      "id": "modal",
+      "source": "parent",
+      "states": [
+        "form",
+        "prompt",
+        "confirm",
+        "long"
+      ],
+      "file": "components/modal.html",
+      "behavior": "static",
+      "feedback": ""
+    },
+    {
+      "id": "popover-menu",
+      "source": "fable",
+      "states": [
+        "open",
+        "closed"
+      ],
+      "file": "components/popover-menu.html",
+      "behavior": "static",
+      "feedback": ""
+    },
+    {
+      "id": "drawer",
+      "source": "fable",
+      "states": [
+        "open",
+        "long",
+        "closed"
+      ],
+      "file": "components/drawer.html",
+      "behavior": "static",
+      "feedback": "Yes but use the close X in the top right from Parent"
+    },
+    {
+      "id": "popconfirm",
+      "source": "fable",
+      "states": [
+        "open",
+        "confirmed",
+        "closed"
+      ],
+      "file": "components/popconfirm.html",
+      "behavior": "static",
+      "feedback": ""
+    },
+    {
+      "id": "combobox",
+      "source": "fable",
+      "states": [
+        "open",
+        "closed",
+        "filtered",
+        "empty"
+      ],
+      "file": "components/combobox.html",
+      "behavior": "static",
+      "feedback": ""
+    },
+    {
+      "id": "multi-select-picker",
+      "source": "fable",
+      "states": [
+        "selected",
+        "open",
+        "empty"
+      ],
+      "file": "components/multi-select-picker.html",
+      "behavior": "static",
+      "feedback": ""
+    },
+    {
+      "id": "selectable-cards",
+      "source": "fable",
+      "states": [
+        "radio",
+        "checkbox"
+      ],
+      "file": "components/selectable-cards.html",
+      "behavior": "static",
+      "feedback": ""
+    },
+    {
+      "id": "upload-dropzone",
+      "source": "parent",
+      "states": [
+        "empty",
+        "queue",
+        "error",
+        "crop"
+      ],
+      "file": "components/upload-dropzone.html",
+      "behavior": "static",
+      "feedback": ""
+    },
+    {
+      "id": "inline-edit",
+      "source": "fable",
+      "states": [
+        "resting",
+        "editing",
+        "error",
+        "saved"
+      ],
+      "file": "components/inline-edit.html",
+      "behavior": "static",
+      "feedback": ""
+    },
+    {
+      "id": "settings-rows",
+      "source": "fable",
+      "states": [
+        "default",
+        "disabled"
+      ],
+      "file": "components/settings-rows.html",
+      "behavior": "static",
+      "feedback": ""
+    },
+    {
+      "id": "form-error-summary",
+      "source": "fable",
+      "states": [
+        "errors",
+        "corrected"
+      ],
+      "file": "components/form-error-summary.html",
+      "behavior": "static",
+      "feedback": "But make the bullet points wrap below the \"Two things need your attention.\" line"
+    },
+    {
+      "id": "split-button",
+      "source": "fable",
+      "states": [
+        "inset",
+        "inset-open",
+        "disabled"
+      ],
+      "file": "components/split-button.html",
+      "behavior": "static",
+      "feedback": ""
+    },
+    {
+      "id": "sidebar-nav",
+      "source": "fable",
+      "states": [
+        "expanded",
+        "compact"
+      ],
+      "file": "components/sidebar-nav.html",
+      "behavior": "static",
+      "feedback": ""
+    },
+    {
+      "id": "app-toolbar",
+      "source": "fable",
+      "states": [
+        "default",
+        "overflow"
+      ],
+      "file": "components/app-toolbar.html",
+      "behavior": "static",
+      "feedback": ""
+    },
+    {
+      "id": "breadcrumbs",
+      "source": "fable",
+      "states": [
+        "short",
+        "long"
+      ],
+      "file": "components/breadcrumbs.html",
+      "behavior": "static",
+      "feedback": ""
+    },
+    {
+      "id": "pagination",
+      "source": "fable",
+      "states": [
+        "first",
+        "middle",
+        "last"
+      ],
+      "file": "components/pagination.html",
+      "behavior": "static",
+      "feedback": ""
+    },
+    {
+      "id": "tree-view",
+      "source": "fable",
+      "states": [
+        "expanded",
+        "empty"
+      ],
+      "file": "components/tree-view.html",
+      "behavior": "static",
+      "feedback": ""
+    },
+    {
+      "id": "wizard-shell",
+      "source": "fable",
+      "states": [
+        "current",
+        "error",
+        "complete"
+      ],
+      "file": "components/wizard-shell.html",
+      "behavior": "static",
+      "feedback": "But remove the faint yellow border from selected square"
+    },
+    {
+      "id": "toast-stack",
+      "source": "fable",
+      "states": [
+        "stack",
+        "success",
+        "error"
+      ],
+      "file": "components/toast-stack.html",
+      "behavior": "static",
+      "feedback": "But try again icon should be mirrored horizontally otherwise it looks like undo instead of proceed forward/apply again"
+    },
+    {
+      "id": "persistent-action-banner",
+      "source": "parent",
+      "states": [
+        "offline",
+        "resolved"
+      ],
+      "file": "components/persistent-action-banner.html",
+      "behavior": "static",
+      "feedback": ""
+    },
+    {
+      "id": "save-status-indicator",
+      "source": "parent",
+      "states": [
+        "saved"
+      ],
+      "file": "components/save-status-indicator.html",
+      "behavior": "static",
+      "feedback": ""
+    },
+    {
+      "id": "code-block",
+      "source": "fable",
+      "states": [
+        "default",
+        "wrapped"
+      ],
+      "file": "components/code-block.html",
+      "behavior": "static",
+      "feedback": ""
+    },
+    {
+      "id": "diff-view",
+      "source": "fable",
+      "states": [
+        "unified",
+        "split"
+      ],
+      "file": "components/diff-view.html",
+      "behavior": "static",
+      "feedback": ""
+    },
+    {
+      "id": "activity-feed",
+      "source": "fable",
+      "states": [
+        "recent",
+        "expanded"
+      ],
+      "file": "components/activity-feed.html",
+      "behavior": "static",
+      "feedback": ""
+    },
+    {
+      "id": "stat-tiles",
+      "source": "fable",
+      "states": [
+        "default",
+        "zero"
+      ],
+      "file": "components/stat-tiles.html",
+      "behavior": "static",
+      "feedback": "But remove the double horizontal lines, just have one horiz line on top and one on bottom"
+    },
+    {
+      "id": "avatar-group",
+      "source": "fable",
+      "states": [
+        "group",
+        "fallback"
+      ],
+      "file": "components/avatar-group.html",
+      "behavior": "static",
+      "feedback": "but fix it so the online square is not cut off and the left dotted border of the 3 more is also not cut off: /Users/davidmiranda/Desktop/screenshot-2026-09-08-at-1-29-22-pm.jpg"
+    },
+    {
+      "id": "small-charts",
+      "source": "fable",
+      "states": [
+        "bars",
+        "line",
+        "spark"
+      ],
+      "file": "components/small-charts.html",
+      "behavior": "static",
+      "feedback": ""
+    },
+    {
+      "id": "filter-builder",
+      "source": "fable",
+      "states": [
+        "applied",
+        "empty"
+      ],
+      "file": "components/filter-builder.html",
+      "behavior": "static",
+      "feedback": ""
+    },
+    {
+      "id": "column-manager",
+      "source": "fable",
+      "states": [
+        "default",
+        "reordered"
+      ],
+      "file": "components/column-manager.html",
+      "behavior": "static",
+      "feedback": ""
+    },
+    {
+      "id": "editable-grid-cells",
+      "source": "fable",
+      "states": [
+        "idle",
+        "editing",
+        "error"
+      ],
+      "file": "components/editable-grid-cells.html",
+      "behavior": "static",
+      "feedback": ""
+    },
+    {
+      "id": "split-panes",
+      "source": "fable",
+      "states": [
+        "list-detail",
+        "editor-preview"
+      ],
+      "file": "components/split-panes.html",
+      "behavior": "static",
+      "feedback": ""
+    },
+    {
+      "id": "rich-text-toolbar",
+      "source": "fable",
+      "states": [
+        "toolbar",
+        "menu",
+        "link",
+        "floating"
+      ],
+      "file": "components/rich-text-toolbar.html",
+      "behavior": "static",
+      "feedback": ""
+    },
+    {
+      "id": "kanban-board",
+      "source": "fable",
+      "states": [
+        "default",
+        "empty",
+        "selected"
+      ],
+      "file": "components/kanban-board.html",
+      "behavior": "static",
+      "feedback": ""
+    }
+  ],
+  "contexts": [
+    {
+      "id": "context-hypercms",
+      "source": "fable",
+      "states": [
+        "default",
+        "error"
+      ],
+      "file": "components/context-hypercms.html",
+      "behavior": "static",
+      "feedback": ""
+    },
+    {
+      "id": "context-quickcrop",
+      "source": "parent",
+      "states": [
+        "locked",
+        "free"
+      ],
+      "file": "components/context-quickcrop.html",
+      "behavior": "static",
+      "feedback": ""
+    }
+  ],
+  "pending": []
+}

package/examples/components/reference/selected/gallery-build.mjs

@@ -0,0 +1,49 @@
+import fs from 'node:fs/promises';
+const root=new URL('../',import.meta.url).pathname.replace(/\/$/,'');
+const assetName='bevel-refinement-assets-20260908-110100';
+const revision=Date.now().toString(36);
+const assets=`/Users/davidmiranda/htmlfile/${assetName}`;
+const manifest=JSON.parse(await fs.readFile(`${root}/selected/manifest.json`));
+const coverage=JSON.parse(await fs.readFile(`${root}/selected/coverage.json`));
+const source=Object.fromEntries([...coverage.components,...coverage.contexts].map(c=>[c.id,c.source]));
+const changes={
+ drawer:'Fable’s drawer with Parent’s diagonal close corner.',
+ 'form-error-summary':'The two bullet points now sit below the attention heading.',
+ 'split-button':'Fable’s slight inset divider, in closed, open and disabled states.',
+ 'wizard-shell':'The active square keeps its contrast without the faint gold outline.',
+ 'toast-stack':'Try again points forward. Undo keeps its original direction.',
+ 'stat-tiles':'One horizontal rule above the metrics and one below.',
+ 'avatar-group':'The online square and the dotted overflow border are fully visible.'
+};
+const components=[...manifest.components.filter(c=>changes[c.id]),...manifest.components.filter(c=>!changes[c.id])];
+const title=s=>s.replaceAll('-',' ').replace(/^./,x=>x.toUpperCase());
+const card=c=>`<article class="sg-card" id="selected-${c.id}" data-component="${c.id}" clay="freeze"><header><div><small>${title(source[c.id])}${changes[c.id]?' · Corrected':''}</small><h2>${c.name}</h2></div><label>State <select data-state aria-label="${c.name} state">${c.states.map(s=>`<option value="${s}">${title(s)}</option>`).join('')}</select></label><button type="button" data-expand="${c.id}">Enlarge</button></header><a class="sg-full" data-open="selected" href="${assetName}/selected/components/${c.id}.html?theme=dark&state=${c.states[0]}" target="_blank" rel="noopener"><img loading="lazy" data-shot="selected" src="${assetName}/screenshots/selected/${c.id}-${c.states[0]}-dark.png" alt="Selected ${c.name}, ${c.states[0]}, dark theme"></a>${changes[c.id]?`<p class="sg-change">${changes[c.id]}</p>`:''}</article>`;
+const style=`<style>
+body.mirk-page.mirk-page--wide{max-width:1640px;padding:36px 32px}.sg-lead{max-width:960px}.sg-controls{position:sticky;top:0;z-index:10;display:flex;gap:16px;align-items:center;flex-wrap:wrap;padding:12px 16px;margin:24px 0;background:var(--mirk-bevel-bg);border:1px solid var(--mirk-input-border)}.sg-controls label,.sg-card label{display:flex;align-items:center;gap:8px}.sg-controls a{margin-left:auto}.sg-controls select,.sg-pair select,.sg-pair button,.sg-card select,.sg-card button,.sg-dialog button,.sg-dialog select{font:13px var(--bevel-font-sans,sans-serif);padding:6px 8px;background:var(--mirk-bevel-bg);color:var(--mirk-fg);border:1px solid var(--mirk-input-border);border-radius:0}.sg-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start}.sg-card{min-width:0;border:1px solid var(--mirk-input-border);scroll-margin-top:85px}.sg-card header{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:14px 16px;border-bottom:1px solid var(--mirk-input-border)}.sg-card header>div{margin-right:auto}.sg-card h2{font:21px var(--bevel-font-serif,serif);margin:3px 0 0}.sg-card small,.sg-card label{font-size:12px}.sg-card small{color:var(--mirk-mark-fg)}.sg-full,.sg-full img{display:block;width:100%;height:auto}.sg-change{font-size:13px;padding:12px 16px;margin:0;border-top:1px solid var(--mirk-input-border)}.sg-section-title{font-size:26px;margin:40px 0 20px}.sg-preserved{margin:30px 0;font-size:14px}.sg-preserved summary{cursor:pointer}.sg-dialog{box-sizing:border-box;width:calc(100vw - 32px);max-width:1580px;height:calc(100vh - 32px);max-height:none;padding:18px;border:2px solid var(--mirk-input-border);background:var(--mirk-bevel-bg);color:var(--mirk-fg)}.sg-dialog::backdrop{background:rgba(0,0,0,.65)}.sg-dialog-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}.sg-dialog-head h2{margin:0 auto 0 0;font-size:24px}.sg-live{display:grid;grid-template-columns:1fr;height:calc(100% - 56px);gap:14px}.sg-live[data-count="2"]{grid-template-columns:1fr 1fr}.sg-live section{display:flex;flex-direction:column;gap:8px;min-width:0;min-height:0}.sg-live iframe{width:100%;flex:1;min-height:0;border:1px solid var(--mirk-input-border);background:var(--mirk-bevel-bg)}.sg-live strong{font-size:13px}.sg-pair{margin:24px 0}.sg-pair .sg-grid{gap:18px}.sg-pair .sg-card header{font-size:14px}.sg-pair>header{display:flex;align-items:center;gap:14px;margin-bottom:14px}.sg-pair>header strong{margin-right:auto}.sg-pair img{display:block;width:100%;height:auto}.sg-pair p{font-size:14px;padding:0 16px}.hf-q-intro{scroll-margin-top:85px}.sg-caption{font-size:13px;color:var(--mirk-mark-fg)}a:focus-visible,button:focus-visible,select:focus-visible{outline:2px solid var(--mirk-accent);outline-offset:3px}
+@media(max-width:850px){body.mirk-page.mirk-page--wide{padding:24px 16px}.sg-grid{grid-template-columns:1fr}.sg-controls{position:relative}.sg-live[data-count="2"]{display:block;overflow:auto}.sg-live[data-count="2"] section{height:620px;margin-bottom:18px}.sg-card header{padding:12px}.sg-card header>div{width:100%}}
+</style>`;
+const script=`<script>document.addEventListener('DOMContentLoaded',()=>{
+const asset=${JSON.stringify(assetName)},revision=${JSON.stringify(revision)},mode=document.getElementById('sg-theme'),dialog=document.getElementById('sg-preview'),live=document.getElementById('sg-live'),liveState=document.getElementById('sg-live-state');let expanded=null,seats=[];
+const refresh=box=>{const id=box.dataset.component,state=box.querySelector('[data-state]').value;box.querySelectorAll('[data-shot]').forEach(img=>{img.src=asset+'/screenshots/'+img.dataset.shot+'/'+id+'-'+state+'-'+mode.value+'.png?v='+revision;img.alt=id+', '+img.dataset.shot+', '+state+', '+mode.value;});box.querySelectorAll('[data-open]').forEach(a=>a.href=asset+'/'+a.dataset.open+'/components/'+id+'.html?theme='+mode.value+'&state='+state);};
+const frames=()=>{live.replaceChildren();live.dataset.count=seats.length;for(const seat of seats){const section=document.createElement('section'),label=document.createElement('strong'),frame=document.createElement('iframe');label.textContent=seat==='selected'?'Selected reference':seat==='parent'?'Parent':'Fable';frame.title=label.textContent;frame.src=asset+'/'+seat+'/components/'+expanded+'.html?theme='+mode.value+'&state='+liveState.value+'&embed=1&v='+revision;frame.setAttribute('sandbox','allow-scripts allow-same-origin');section.append(label,frame);live.append(section);}};
+mode.value=document.documentElement.classList.contains('dark')?'dark':'light';document.querySelectorAll('[data-component]').forEach(refresh);
+mode.addEventListener('change',()=>{document.documentElement.classList.remove('light','dark');document.documentElement.classList.add(mode.value);document.querySelectorAll('[data-component]').forEach(refresh);});
+document.getElementById('sg-jump').addEventListener('change',e=>document.getElementById('selected-'+e.target.value).scrollIntoView({behavior:'smooth',block:'start'}));
+document.addEventListener('change',e=>{if(e.target.matches('[data-state]'))refresh(e.target.closest('[data-component]'));});
+document.addEventListener('click',e=>{const b=e.target.closest('[data-expand]');if(!b)return;const box=b.closest('[data-component]');expanded=box.dataset.component;seats=expanded==='kanban-board'?['parent','fable']:['selected'];liveState.replaceChildren();for(const option of box.querySelector('[data-state]').options)liveState.add(new Option(option.text,option.value));liveState.value=box.querySelector('[data-state]').value;document.getElementById('sg-preview-title').textContent=box.querySelector('h2,strong').textContent;frames();dialog.showModal();});
+liveState.addEventListener('change',frames);document.getElementById('sg-close').addEventListener('click',()=>dialog.close());dialog.addEventListener('close',()=>{live.replaceChildren();expanded=null;seats=[];});
+});</script>`;
+const withKanban=process.argv.includes('--kanban');
+const body=`${style}<div class="sg-lead" id="selected-purpose"><p><strong>Your selected static kit:</strong> 29 Fable components, 4 Parent components and Fable’s inset split-button divider. The seven corrected references appear first. Application behavior remains for the next phase.</p><p>Your submitted choices and all original designs are preserved.</p></div><nav class="sg-controls" id="selected-controls" clay="freeze" aria-label="Selected component controls"><label>Theme <select id="sg-theme"><option value="light">Warm light</option><option value="dark" selected>Warm dark</option></select></label><label>Component <select id="sg-jump">${manifest.components.map(c=>`<option value="${c.id}">${c.name}</option>`).join('')}</select></label>${withKanban?'<a href="#hf-intro-ui3-kanban-board">Compare the new Kanban designs ↓</a>':'<span class="sg-caption">All 33 visual choices are settled.</span>'}</nav><div class="sg-grid" id="selected-components">${components.map(card).join('')}</div><h2 class="sg-section-title">Product contexts</h2><p class="sg-caption">Static theme references for the existing HyperCMS and Quickcrop structures.</p><div class="sg-grid" id="selected-contexts">${manifest.contexts.map(card).join('')}</div><details class="sg-preserved"><summary>Preserved candidates</summary><p><a href="${assetName}/parent/index.html" target="_blank" rel="noopener">Parent refinement set ↗</a> · <a href="${assetName}/fable/index.html" target="_blank" rel="noopener">Fable refinement set ↗</a> · <a href="bevel-reference-assets-20260907-221500/parent/index.html" target="_blank" rel="noopener">Original Parent ↗</a> · <a href="bevel-reference-assets-20260907-221500/astra/index.html" target="_blank" rel="noopener">Original Astra ↗</a></p></details><dialog id="sg-preview" class="sg-dialog" clay="freeze" aria-labelledby="sg-preview-title"><div class="sg-dialog-head"><h2 id="sg-preview-title">Selected reference</h2><label>State <select id="sg-live-state"></select></label><button type="button" id="sg-close">Close preview</button></div><div class="sg-live" id="sg-live"></div></dialog>${script}`;
+const questions=[];
+if(withKanban){
+ const notes=JSON.parse(await fs.readFile(`${root}/selected/kanban-comparison.json`));
+ const intro=`<section class="sg-pair" id="selected-kanban-board" data-component="kanban-board" clay="freeze"><header><strong>Independent Kanban designs</strong><label>State <select data-state aria-label="Kanban preview state"><option value="default">Board</option><option value="empty">Empty</option><option value="selected">Selected task</option></select></label><button type="button" data-expand="kanban-board">Enlarge</button></header><div class="sg-grid">${['parent','fable'].map(seat=>`<article class="sg-card"><header>${title(seat)} <a data-open="${seat}" href="${assetName}/${seat}/components/kanban-board.html?theme=dark" target="_blank" rel="noopener">Full size ↗</a></header><img data-shot="${seat}" src="${assetName}/screenshots/${seat}/kanban-board-default-dark.png" alt="${seat} Kanban board, dark theme"><p>${notes[seat]}</p></article>`).join('')}</div></section>`;
+ questions.push({key:'ui3-kanban-board',label:'Kanban board',intro,question:'Which Kanban design should join the selected kit?',why:notes.reason,type:'radio',other:false,comment:true,options:[{key:'parent',label:'Parent',detail:notes.parent,recommended:notes.recommended==='parent'},{key:'fable',label:'Fable',detail:notes.fable,recommended:notes.recommended==='fable'},{key:'combine',label:'Combine parts',detail:'Name the parts to retain from each board.'},{key:'iterate',label:'Another iteration',detail:'Describe what the next board should change.'}]});
+}
+await fs.mkdir(assets,{recursive:true});
+for(const folder of ['baseline','fixtures','sources','parent','fable','selected'])await fs.cp(`${root}/${folder}`,`${assets}/${folder}`,{recursive:true});
+for(const seat of ['parent','fable','selected'])await fs.cp(`/Users/davidmiranda/Downloads/bevel/20260908-110100/${seat}`,`${assets}/screenshots/${seat}`,{recursive:true});
+const spec={title:'Bevel: your selected components',subtitle:`33 selected components · static UI${withKanban?' · Kanban comparison':''}`,slug:'bevel-component-comparison',topic:'bevel-selected-static-kit',wide:true,mode:'dark',body:body.replaceAll('.png"','.png?v='+revision+'"'),questions,notes:withKanban,notesPlaceholder:'Any further visual corrections to the selected components.'};
+await fs.writeFile(`${root}/selected/gallery-spec.json`,JSON.stringify(spec,null,2));
+console.log(`Prepared ${components.length} selected components and ${questions.length} open choices.`);

package/examples/components/reference/selected/gallery-spec.json

@@ -0,0 +1,12 @@
+{
+  "title": "Bevel: your selected components",
+  "subtitle": "33 selected components · static UI",
+  "slug": "bevel-component-comparison",
+  "topic": "bevel-selected-static-kit",
+  "wide": true,
+  "mode": "dark",
+  "body": "<style>\nbody.mirk-page.mirk-page--wide{max-width:1640px;padding:36px 32px}.sg-lead{max-width:960px}.sg-controls{position:sticky;top:0;z-index:10;display:flex;gap:16px;align-items:center;flex-wrap:wrap;padding:12px 16px;margin:24px 0;background:var(--mirk-bevel-bg);border:1px solid var(--mirk-input-border)}.sg-controls label,.sg-card label{display:flex;align-items:center;gap:8px}.sg-controls a{margin-left:auto}.sg-controls select,.sg-pair select,.sg-pair button,.sg-card select,.sg-card button,.sg-dialog button,.sg-dialog select{font:13px var(--bevel-font-sans,sans-serif);padding:6px 8px;background:var(--mirk-bevel-bg);color:var(--mirk-fg);border:1px solid var(--mirk-input-border);border-radius:0}.sg-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start}.sg-card{min-width:0;border:1px solid var(--mirk-input-border);scroll-margin-top:85px}.sg-card header{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:14px 16px;border-bottom:1px solid var(--mirk-input-border)}.sg-card header>div{margin-right:auto}.sg-card h2{font:21px var(--bevel-font-serif,serif);margin:3px 0 0}.sg-card small,.sg-card label{font-size:12px}.sg-card small{color:var(--mirk-mark-fg)}.sg-full,.sg-full img{display:block;width:100%;height:auto}.sg-change{font-size:13px;padding:12px 16px;margin:0;border-top:1px solid var(--mirk-input-border)}.sg-section-title{font-size:26px;margin:40px 0 20px}.sg-preserved{margin:30px 0;font-size:14px}.sg-preserved summary{cursor:pointer}.sg-dialog{box-sizing:border-box;width:calc(100vw - 32px);max-width:1580px;height:calc(100vh - 32px);max-height:none;padding:18px;border:2px solid var(--mirk-input-border);background:var(--mirk-bevel-bg);color:var(--mirk-fg)}.sg-dialog::backdrop{background:rgba(0,0,0,.65)}.sg-dialog-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}.sg-dialog-head h2{margin:0 auto 0 0;font-size:24px}.sg-live{display:grid;grid-template-columns:1fr;height:calc(100% - 56px);gap:14px}.sg-live[data-count=\"2\"]{grid-template-columns:1fr 1fr}.sg-live section{display:flex;flex-direction:column;gap:8px;min-width:0;min-height:0}.sg-live iframe{width:100%;flex:1;min-height:0;border:1px solid var(--mirk-input-border);background:var(--mirk-bevel-bg)}.sg-live strong{font-size:13px}.sg-pair{margin:24px 0}.sg-pair .sg-grid{gap:18px}.sg-pair .sg-card header{font-size:14px}.sg-pair>header{display:flex;align-items:center;gap:14px;margin-bottom:14px}.sg-pair>header strong{margin-right:auto}.sg-pair img{display:block;width:100%;height:auto}.sg-pair p{font-size:14px;padding:0 16px}.hf-q-intro{scroll-margin-top:85px}.sg-caption{font-size:13px;color:var(--mirk-mark-fg)}a:focus-visible,button:focus-visible,select:focus-visible{outline:2px solid var(--mirk-accent);outline-offset:3px}\n@media(max-width:850px){body.mirk-page.mirk-page--wide{padding:24px 16px}.sg-grid{grid-template-columns:1fr}.sg-controls{position:relative}.sg-live[data-count=\"2\"]{display:block;overflow:auto}.sg-live[data-count=\"2\"] section{height:620px;margin-bottom:18px}.sg-card header{padding:12px}.sg-card header>div{width:100%}}\n</style><div class=\"sg-lead\" id=\"selected-purpose\"><p><strong>Your selected static kit:</strong> 29 Fable components, 4 Parent components and Fable’s inset split-button divider. The seven corrected references appear first. Application behavior remains for the next phase.</p><p>Your submitted choices and all original designs are preserved.</p></div><nav class=\"sg-controls\" id=\"selected-controls\" clay=\"freeze\" aria-label=\"Selected component controls\"><label>Theme <select id=\"sg-theme\"><option value=\"light\">Warm light</option><option value=\"dark\" selected>Warm dark</option></select></label><label>Component <select id=\"sg-jump\"><option value=\"modal\">Modal</option><option value=\"popover-menu\">Popover menu</option><option value=\"drawer\">Drawer</option><option value=\"popconfirm\">Popconfirm</option><option value=\"combobox\">Combobox</option><option value=\"multi-select-picker\">Multi-select picker</option><option value=\"selectable-cards\">Selectable cards</option><option value=\"upload-dropzone\">Upload dropzone</option><option value=\"inline-edit\">Inline edit</option><option value=\"settings-rows\">Settings rows</option><option value=\"form-error-summary\">Form error summary</option><option value=\"split-button\">Split button</option><option value=\"sidebar-nav\">Sidebar nav</option><option value=\"app-toolbar\">App toolbar</option><option value=\"breadcrumbs\">Breadcrumbs</option><option value=\"pagination\">Pagination</option><option value=\"tree-view\">Tree view</option><option value=\"wizard-shell\">Wizard shell</option><option value=\"toast-stack\">Toast stack</option><option value=\"persistent-action-banner\">Persistent action banner</option><option value=\"save-status-indicator\">Save-status indicator</option><option value=\"code-block\">Code block</option><option value=\"diff-view\">Diff view</option><option value=\"activity-feed\">Activity feed</option><option value=\"stat-tiles\">Stat tiles</option><option value=\"avatar-group\">Avatar group</option><option value=\"small-charts\">Small charts</option><option value=\"filter-builder\">Filter builder</option><option value=\"column-manager\">Column manager</option><option value=\"editable-grid-cells\">Editable grid cells</option><option value=\"split-panes\">Split panes</option><option value=\"rich-text-toolbar\">Rich text toolbar</option><option value=\"kanban-board\">Kanban board</option></select></label><span class=\"sg-caption\">All 33 visual choices are settled.</span></nav><div class=\"sg-grid\" id=\"selected-components\"><article class=\"sg-card\" id=\"selected-drawer\" data-component=\"drawer\" clay=\"freeze\"><header><div><small>Fable · Corrected</small><h2>Drawer</h2></div><label>State <select data-state aria-label=\"Drawer state\"><option value=\"open\">Open</option><option value=\"long\">Long</option><option value=\"closed\">Closed</option></select></label><button type=\"button\" data-expand=\"drawer\">Enlarge</button></header><a class=\"sg-full\" data-open=\"selected\" href=\"bevel-refinement-assets-20260908-110100/selected/components/drawer.html?theme=dark&state=open\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" data-shot=\"selected\" src=\"bevel-refinement-assets-20260908-110100/screenshots/selected/drawer-open-dark.png?v=mtszgbl0\" alt=\"Selected Drawer, open, dark theme\"></a><p class=\"sg-change\">Fable’s drawer with Parent’s diagonal close corner.</p></article><article class=\"sg-card\" id=\"selected-form-error-summary\" data-component=\"form-error-summary\" clay=\"freeze\"><header><div><small>Fable · Corrected</small><h2>Form error summary</h2></div><label>State <select data-state aria-label=\"Form error summary state\"><option value=\"errors\">Errors</option><option value=\"corrected\">Corrected</option></select></label><button type=\"button\" data-expand=\"form-error-summary\">Enlarge</button></header><a class=\"sg-full\" data-open=\"selected\" href=\"bevel-refinement-assets-20260908-110100/selected/components/form-error-summary.html?theme=dark&state=errors\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" data-shot=\"selected\" src=\"bevel-refinement-assets-20260908-110100/screenshots/selected/form-error-summary-errors-dark.png?v=mtszgbl0\" alt=\"Selected Form error summary, errors, dark theme\"></a><p class=\"sg-change\">The two bullet points now sit below the attention heading.</p></article><article class=\"sg-card\" id=\"selected-split-button\" data-component=\"split-button\" clay=\"freeze\"><header><div><small>Fable · Corrected</small><h2>Split button</h2></div><label>State <select data-state aria-label=\"Split button state\"><option value=\"inset\">Inset</option><option value=\"inset-open\">Inset open</option><option value=\"disabled\">Disabled</option></select></label><button type=\"button\" data-expand=\"split-button\">Enlarge</button></header><a class=\"sg-full\" data-open=\"selected\" href=\"bevel-refinement-assets-20260908-110100/selected/components/split-button.html?theme=dark&state=inset\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" data-shot=\"selected\" src=\"bevel-refinement-assets-20260908-110100/screenshots/selected/split-button-inset-dark.png?v=mtszgbl0\" alt=\"Selected Split button, inset, dark theme\"></a><p class=\"sg-change\">Fable’s slight inset divider, in closed, open and disabled states.</p></article><article class=\"sg-card\" id=\"selected-wizard-shell\" data-component=\"wizard-shell\" clay=\"freeze\"><header><div><small>Fable · Corrected</small><h2>Wizard shell</h2></div><label>State <select data-state aria-label=\"Wizard shell state\"><option value=\"current\">Current</option><option value=\"error\">Error</option><option value=\"complete\">Complete</option></select></label><button type=\"button\" data-expand=\"wizard-shell\">Enlarge</button></header><a class=\"sg-full\" data-open=\"selected\" href=\"bevel-refinement-assets-20260908-110100/selected/components/wizard-shell.html?theme=dark&state=current\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" data-shot=\"selected\" src=\"bevel-refinement-assets-20260908-110100/screenshots/selected/wizard-shell-current-dark.png?v=mtszgbl0\" alt=\"Selected Wizard shell, current, dark theme\"></a><p class=\"sg-change\">The active square keeps its contrast without the faint gold outline.</p></article><article class=\"sg-card\" id=\"selected-toast-stack\" data-component=\"toast-stack\" clay=\"freeze\"><header><div><small>Fable · Corrected</small><h2>Toast stack</h2></div><label>State <select data-state aria-label=\"Toast stack state\"><option value=\"stack\">Stack</option><option value=\"success\">Success</option><option value=\"error\">Error</option></select></label><button type=\"button\" data-expand=\"toast-stack\">Enlarge</button></header><a class=\"sg-full\" data-open=\"selected\" href=\"bevel-refinement-assets-20260908-110100/selected/components/toast-stack.html?theme=dark&state=stack\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" data-shot=\"selected\" src=\"bevel-refinement-assets-20260908-110100/screenshots/selected/toast-stack-stack-dark.png?v=mtszgbl0\" alt=\"Selected Toast stack, stack, dark theme\"></a><p class=\"sg-change\">Try again points forward. Undo keeps its original direction.</p></article><article class=\"sg-card\" id=\"selected-stat-tiles\" data-component=\"stat-tiles\" clay=\"freeze\"><header><div><small>Fable · Corrected</small><h2>Stat tiles</h2></div><label>State <select data-state aria-label=\"Stat tiles state\"><option value=\"default\">Default</option><option value=\"zero\">Zero</option></select></label><button type=\"button\" data-expand=\"stat-tiles\">Enlarge</button></header><a class=\"sg-full\" data-open=\"selected\" href=\"bevel-refinement-assets-20260908-110100/selected/components/stat-tiles.html?theme=dark&state=default\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" data-shot=\"selected\" src=\"bevel-refinement-assets-20260908-110100/screenshots/selected/stat-tiles-default-dark.png?v=mtszgbl0\" alt=\"Selected Stat tiles, default, dark theme\"></a><p class=\"sg-change\">One horizontal rule above the metrics and one below.</p></article><article class=\"sg-card\" id=\"selected-avatar-group\" data-component=\"avatar-group\" clay=\"freeze\"><header><div><small>Fable · Corrected</small><h2>Avatar group</h2></div><label>State <select data-state aria-label=\"Avatar group state\"><option value=\"group\">Group</option><option value=\"fallback\">Fallback</option></select></label><button type=\"button\" data-expand=\"avatar-group\">Enlarge</button></header><a class=\"sg-full\" data-open=\"selected\" href=\"bevel-refinement-assets-20260908-110100/selected/components/avatar-group.html?theme=dark&state=group\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" data-shot=\"selected\" src=\"bevel-refinement-assets-20260908-110100/screenshots/selected/avatar-group-group-dark.png?v=mtszgbl0\" alt=\"Selected Avatar group, group, dark theme\"></a><p class=\"sg-change\">The online square and the dotted overflow border are fully visible.</p></article><article class=\"sg-card\" id=\"selected-modal\" data-component=\"modal\" clay=\"freeze\"><header><div><small>Parent</small><h2>Modal</h2></div><label>State <select data-state aria-label=\"Modal state\"><option value=\"form\">Form</option><option value=\"prompt\">Prompt</option><option value=\"confirm\">Confirm</option><option value=\"long\">Long</option></select></label><button type=\"button\" data-expand=\"modal\">Enlarge</button></header><a class=\"sg-full\" data-open=\"selected\" href=\"bevel-refinement-assets-20260908-110100/selected/components/modal.html?theme=dark&state=form\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" data-shot=\"selected\" src=\"bevel-refinement-assets-20260908-110100/screenshots/selected/modal-form-dark.png?v=mtszgbl0\" alt=\"Selected Modal, form, dark theme\"></a></article><article class=\"sg-card\" id=\"selected-popover-menu\" data-component=\"popover-menu\" clay=\"freeze\"><header><div><small>Fable</small><h2>Popover menu</h2></div><label>State <select data-state aria-label=\"Popover menu state\"><option value=\"open\">Open</option><option value=\"closed\">Closed</option></select></label><button type=\"button\" data-expand=\"popover-menu\">Enlarge</button></header><a class=\"sg-full\" data-open=\"selected\" href=\"bevel-refinement-assets-20260908-110100/selected/components/popover-menu.html?theme=dark&state=open\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" data-shot=\"selected\" src=\"bevel-refinement-assets-20260908-110100/screenshots/selected/popover-menu-open-dark.png?v=mtszgbl0\" alt=\"Selected Popover menu, open, dark theme\"></a></article><article class=\"sg-card\" id=\"selected-popconfirm\" data-component=\"popconfirm\" clay=\"freeze\"><header><div><small>Fable</small><h2>Popconfirm</h2></div><label>State <select data-state aria-label=\"Popconfirm state\"><option value=\"open\">Open</option><option value=\"confirmed\">Confirmed</option><option value=\"closed\">Closed</option></select></label><button type=\"button\" data-expand=\"popconfirm\">Enlarge</button></header><a class=\"sg-full\" data-open=\"selected\" href=\"bevel-refinement-assets-20260908-110100/selected/components/popconfirm.html?theme=dark&state=open\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" data-shot=\"selected\" src=\"bevel-refinement-assets-20260908-110100/screenshots/selected/popconfirm-open-dark.png?v=mtszgbl0\" alt=\"Selected Popconfirm, open, dark theme\"></a></article><article class=\"sg-card\" id=\"selected-combobox\" data-component=\"combobox\" clay=\"freeze\"><header><div><small>Fable</small><h2>Combobox</h2></div><label>State <select data-state aria-label=\"Combobox state\"><option value=\"open\">Open</option><option value=\"closed\">Closed</option><option value=\"filtered\">Filtered</option><option value=\"empty\">Empty</option></select></label><button type=\"button\" data-expand=\"combobox\">Enlarge</button></header><a class=\"sg-full\" data-open=\"selected\" href=\"bevel-refinement-assets-20260908-110100/selected/components/combobox.html?theme=dark&state=open\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" data-shot=\"selected\" src=\"bevel-refinement-assets-20260908-110100/screenshots/selected/combobox-open-dark.png?v=mtszgbl0\" alt=\"Selected Combobox, open, dark theme\"></a></article><article class=\"sg-card\" id=\"selected-multi-select-picker\" data-component=\"multi-select-picker\" clay=\"freeze\"><header><div><small>Fable</small><h2>Multi-select picker</h2></div><label>State <select data-state aria-label=\"Multi-select picker state\"><option value=\"selected\">Selected</option><option value=\"open\">Open</option><option value=\"empty\">Empty</option></select></label><button type=\"button\" data-expand=\"multi-select-picker\">Enlarge</button></header><a class=\"sg-full\" data-open=\"selected\" href=\"bevel-refinement-assets-20260908-110100/selected/components/multi-select-picker.html?theme=dark&state=selected\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" data-shot=\"selected\" src=\"bevel-refinement-assets-20260908-110100/screenshots/selected/multi-select-picker-selected-dark.png?v=mtszgbl0\" alt=\"Selected Multi-select picker, selected, dark theme\"></a></article><article class=\"sg-card\" id=\"selected-selectable-cards\" data-component=\"selectable-cards\" clay=\"freeze\"><header><div><small>Fable</small><h2>Selectable cards</h2></div><label>State <select data-state aria-label=\"Selectable cards state\"><option value=\"radio\">Radio</option><option value=\"checkbox\">Checkbox</option></select></label><button type=\"button\" data-expand=\"selectable-cards\">Enlarge</button></header><a class=\"sg-full\" data-open=\"selected\" href=\"bevel-refinement-assets-20260908-110100/selected/components/selectable-cards.html?theme=dark&state=radio\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" data-shot=\"selected\" src=\"bevel-refinement-assets-20260908-110100/screenshots/selected/selectable-cards-radio-dark.png?v=mtszgbl0\" alt=\"Selected Selectable cards, radio, dark theme\"></a></article><article class=\"sg-card\" id=\"selected-upload-dropzone\" data-component=\"upload-dropzone\" clay=\"freeze\"><header><div><small>Parent</small><h2>Upload dropzone</h2></div><label>State <select data-state aria-label=\"Upload dropzone state\"><option value=\"empty\">Empty</option><option value=\"queue\">Queue</option><option value=\"error\">Error</option><option value=\"crop\">Crop</option></select></label><button type=\"button\" data-expand=\"upload-dropzone\">Enlarge</button></header><a class=\"sg-full\" data-open=\"selected\" href=\"bevel-refinement-assets-20260908-110100/selected/components/upload-dropzone.html?theme=dark&state=empty\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" data-shot=\"selected\" src=\"bevel-refinement-assets-20260908-110100/screenshots/selected/upload-dropzone-empty-dark.png?v=mtszgbl0\" alt=\"Selected Upload dropzone, empty, dark theme\"></a></article><article class=\"sg-card\" id=\"selected-inline-edit\" data-component=\"inline-edit\" clay=\"freeze\"><header><div><small>Fable</small><h2>Inline edit</h2></div><label>State <select data-state aria-label=\"Inline edit state\"><option value=\"resting\">Resting</option><option value=\"editing\">Editing</option><option value=\"error\">Error</option><option value=\"saved\">Saved</option></select></label><button type=\"button\" data-expand=\"inline-edit\">Enlarge</button></header><a class=\"sg-full\" data-open=\"selected\" href=\"bevel-refinement-assets-20260908-110100/selected/components/inline-edit.html?theme=dark&state=resting\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" data-shot=\"selected\" src=\"bevel-refinement-assets-20260908-110100/screenshots/selected/inline-edit-resting-dark.png?v=mtszgbl0\" alt=\"Selected Inline edit, resting, dark theme\"></a></article><article class=\"sg-card\" id=\"selected-settings-rows\" data-component=\"settings-rows\" clay=\"freeze\"><header><div><small>Fable</small><h2>Settings rows</h2></div><label>State <select data-state aria-label=\"Settings rows state\"><option value=\"default\">Default</option><option value=\"disabled\">Disabled</option></select></label><button type=\"button\" data-expand=\"settings-rows\">Enlarge</button></header><a class=\"sg-full\" data-open=\"selected\" href=\"bevel-refinement-assets-20260908-110100/selected/components/settings-rows.html?theme=dark&state=default\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" data-shot=\"selected\" src=\"bevel-refinement-assets-20260908-110100/screenshots/selected/settings-rows-default-dark.png?v=mtszgbl0\" alt=\"Selected Settings rows, default, dark theme\"></a></article><article class=\"sg-card\" id=\"selected-sidebar-nav\" data-component=\"sidebar-nav\" clay=\"freeze\"><header><div><small>Fable</small><h2>Sidebar nav</h2></div><label>State <select data-state aria-label=\"Sidebar nav state\"><option value=\"expanded\">Expanded</option><option value=\"compact\">Compact</option></select></label><button type=\"button\" data-expand=\"sidebar-nav\">Enlarge</button></header><a class=\"sg-full\" data-open=\"selected\" href=\"bevel-refinement-assets-20260908-110100/selected/components/sidebar-nav.html?theme=dark&state=expanded\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" data-shot=\"selected\" src=\"bevel-refinement-assets-20260908-110100/screenshots/selected/sidebar-nav-expanded-dark.png?v=mtszgbl0\" alt=\"Selected Sidebar nav, expanded, dark theme\"></a></article><article class=\"sg-card\" id=\"selected-app-toolbar\" data-component=\"app-toolbar\" clay=\"freeze\"><header><div><small>Fable</small><h2>App toolbar</h2></div><label>State <select data-state aria-label=\"App toolbar state\"><option value=\"default\">Default</option><option value=\"overflow\">Overflow</option></select></label><button type=\"button\" data-expand=\"app-toolbar\">Enlarge</button></header><a class=\"sg-full\" data-open=\"selected\" href=\"bevel-refinement-assets-20260908-110100/selected/components/app-toolbar.html?theme=dark&state=default\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" data-shot=\"selected\" src=\"bevel-refinement-assets-20260908-110100/screenshots/selected/app-toolbar-default-dark.png?v=mtszgbl0\" alt=\"Selected App toolbar, default, dark theme\"></a></article><article class=\"sg-card\" id=\"selected-breadcrumbs\" data-component=\"breadcrumbs\" clay=\"freeze\"><header><div><small>Fable</small><h2>Breadcrumbs</h2></div><label>State <select data-state aria-label=\"Breadcrumbs state\"><option value=\"short\">Short</option><option value=\"long\">Long</option></select></label><button type=\"button\" data-expand=\"breadcrumbs\">Enlarge</button></header><a class=\"sg-full\" data-open=\"selected\" href=\"bevel-refinement-assets-20260908-110100/selected/components/breadcrumbs.html?theme=dark&state=short\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" data-shot=\"selected\" src=\"bevel-refinement-assets-20260908-110100/screenshots/selected/breadcrumbs-short-dark.png?v=mtszgbl0\" alt=\"Selected Breadcrumbs, short, dark theme\"></a></article><article class=\"sg-card\" id=\"selected-pagination\" data-component=\"pagination\" clay=\"freeze\"><header><div><small>Fable</small><h2>Pagination</h2></div><label>State <select data-state aria-label=\"Pagination state\"><option value=\"first\">First</option><option value=\"middle\">Middle</option><option value=\"last\">Last</option></select></label><button type=\"button\" data-expand=\"pagination\">Enlarge</button></header><a class=\"sg-full\" data-open=\"selected\" href=\"bevel-refinement-assets-20260908-110100/selected/components/pagination.html?theme=dark&state=first\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" data-shot=\"selected\" src=\"bevel-refinement-assets-20260908-110100/screenshots/selected/pagination-first-dark.png?v=mtszgbl0\" alt=\"Selected Pagination, first, dark theme\"></a></article><article class=\"sg-card\" id=\"selected-tree-view\" data-component=\"tree-view\" clay=\"freeze\"><header><div><small>Fable</small><h2>Tree view</h2></div><label>State <select data-state aria-label=\"Tree view state\"><option value=\"expanded\">Expanded</option><option value=\"empty\">Empty</option></select></label><button type=\"button\" data-expand=\"tree-view\">Enlarge</button></header><a class=\"sg-full\" data-open=\"selected\" href=\"bevel-refinement-assets-20260908-110100/selected/components/tree-view.html?theme=dark&state=expanded\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" data-shot=\"selected\" src=\"bevel-refinement-assets-20260908-110100/screenshots/selected/tree-view-expanded-dark.png?v=mtszgbl0\" alt=\"Selected Tree view, expanded, dark theme\"></a></article><article class=\"sg-card\" id=\"selected-persistent-action-banner\" data-component=\"persistent-action-banner\" clay=\"freeze\"><header><div><small>Parent</small><h2>Persistent action banner</h2></div><label>State <select data-state aria-label=\"Persistent action banner state\"><option value=\"offline\">Offline</option><option value=\"resolved\">Resolved</option></select></label><button type=\"button\" data-expand=\"persistent-action-banner\">Enlarge</button></header><a class=\"sg-full\" data-open=\"selected\" href=\"bevel-refinement-assets-20260908-110100/selected/components/persistent-action-banner.html?theme=dark&state=offline\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" data-shot=\"selected\" src=\"bevel-refinement-assets-20260908-110100/screenshots/selected/persistent-action-banner-offline-dark.png?v=mtszgbl0\" alt=\"Selected Persistent action banner, offline, dark theme\"></a></article><article class=\"sg-card\" id=\"selected-save-status-indicator\" data-component=\"save-status-indicator\" clay=\"freeze\"><header><div><small>Parent</small><h2>Save-status indicator</h2></div><label>State <select data-state aria-label=\"Save-status indicator state\"><option value=\"saved\">Saved</option></select></label><button type=\"button\" data-expand=\"save-status-indicator\">Enlarge</button></header><a class=\"sg-full\" data-open=\"selected\" href=\"bevel-refinement-assets-20260908-110100/selected/components/save-status-indicator.html?theme=dark&state=saved\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" data-shot=\"selected\" src=\"bevel-refinement-assets-20260908-110100/screenshots/selected/save-status-indicator-saved-dark.png?v=mtszgbl0\" alt=\"Selected Save-status indicator, saved, dark theme\"></a></article><article class=\"sg-card\" id=\"selected-code-block\" data-component=\"code-block\" clay=\"freeze\"><header><div><small>Fable</small><h2>Code block</h2></div><label>State <select data-state aria-label=\"Code block state\"><option value=\"default\">Default</option><option value=\"wrapped\">Wrapped</option></select></label><button type=\"button\" data-expand=\"code-block\">Enlarge</button></header><a class=\"sg-full\" data-open=\"selected\" href=\"bevel-refinement-assets-20260908-110100/selected/components/code-block.html?theme=dark&state=default\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" data-shot=\"selected\" src=\"bevel-refinement-assets-20260908-110100/screenshots/selected/code-block-default-dark.png?v=mtszgbl0\" alt=\"Selected Code block, default, dark theme\"></a></article><article class=\"sg-card\" id=\"selected-diff-view\" data-component=\"diff-view\" clay=\"freeze\"><header><div><small>Fable</small><h2>Diff view</h2></div><label>State <select data-state aria-label=\"Diff view state\"><option value=\"unified\">Unified</option><option value=\"split\">Split</option></select></label><button type=\"button\" data-expand=\"diff-view\">Enlarge</button></header><a class=\"sg-full\" data-open=\"selected\" href=\"bevel-refinement-assets-20260908-110100/selected/components/diff-view.html?theme=dark&state=unified\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" data-shot=\"selected\" src=\"bevel-refinement-assets-20260908-110100/screenshots/selected/diff-view-unified-dark.png?v=mtszgbl0\" alt=\"Selected Diff view, unified, dark theme\"></a></article><article class=\"sg-card\" id=\"selected-activity-feed\" data-component=\"activity-feed\" clay=\"freeze\"><header><div><small>Fable</small><h2>Activity feed</h2></div><label>State <select data-state aria-label=\"Activity feed state\"><option value=\"recent\">Recent</option><option value=\"expanded\">Expanded</option></select></label><button type=\"button\" data-expand=\"activity-feed\">Enlarge</button></header><a class=\"sg-full\" data-open=\"selected\" href=\"bevel-refinement-assets-20260908-110100/selected/components/activity-feed.html?theme=dark&state=recent\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" data-shot=\"selected\" src=\"bevel-refinement-assets-20260908-110100/screenshots/selected/activity-feed-recent-dark.png?v=mtszgbl0\" alt=\"Selected Activity feed, recent, dark theme\"></a></article><article class=\"sg-card\" id=\"selected-small-charts\" data-component=\"small-charts\" clay=\"freeze\"><header><div><small>Fable</small><h2>Small charts</h2></div><label>State <select data-state aria-label=\"Small charts state\"><option value=\"bars\">Bars</option><option value=\"line\">Line</option><option value=\"spark\">Spark</option></select></label><button type=\"button\" data-expand=\"small-charts\">Enlarge</button></header><a class=\"sg-full\" data-open=\"selected\" href=\"bevel-refinement-assets-20260908-110100/selected/components/small-charts.html?theme=dark&state=bars\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" data-shot=\"selected\" src=\"bevel-refinement-assets-20260908-110100/screenshots/selected/small-charts-bars-dark.png?v=mtszgbl0\" alt=\"Selected Small charts, bars, dark theme\"></a></article><article class=\"sg-card\" id=\"selected-filter-builder\" data-component=\"filter-builder\" clay=\"freeze\"><header><div><small>Fable</small><h2>Filter builder</h2></div><label>State <select data-state aria-label=\"Filter builder state\"><option value=\"applied\">Applied</option><option value=\"empty\">Empty</option></select></label><button type=\"button\" data-expand=\"filter-builder\">Enlarge</button></header><a class=\"sg-full\" data-open=\"selected\" href=\"bevel-refinement-assets-20260908-110100/selected/components/filter-builder.html?theme=dark&state=applied\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" data-shot=\"selected\" src=\"bevel-refinement-assets-20260908-110100/screenshots/selected/filter-builder-applied-dark.png?v=mtszgbl0\" alt=\"Selected Filter builder, applied, dark theme\"></a></article><article class=\"sg-card\" id=\"selected-column-manager\" data-component=\"column-manager\" clay=\"freeze\"><header><div><small>Fable</small><h2>Column manager</h2></div><label>State <select data-state aria-label=\"Column manager state\"><option value=\"default\">Default</option><option value=\"reordered\">Reordered</option></select></label><button type=\"button\" data-expand=\"column-manager\">Enlarge</button></header><a class=\"sg-full\" data-open=\"selected\" href=\"bevel-refinement-assets-20260908-110100/selected/components/column-manager.html?theme=dark&state=default\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" data-shot=\"selected\" src=\"bevel-refinement-assets-20260908-110100/screenshots/selected/column-manager-default-dark.png?v=mtszgbl0\" alt=\"Selected Column manager, default, dark theme\"></a></article><article class=\"sg-card\" id=\"selected-editable-grid-cells\" data-component=\"editable-grid-cells\" clay=\"freeze\"><header><div><small>Fable</small><h2>Editable grid cells</h2></div><label>State <select data-state aria-label=\"Editable grid cells state\"><option value=\"idle\">Idle</option><option value=\"editing\">Editing</option><option value=\"error\">Error</option></select></label><button type=\"button\" data-expand=\"editable-grid-cells\">Enlarge</button></header><a class=\"sg-full\" data-open=\"selected\" href=\"bevel-refinement-assets-20260908-110100/selected/components/editable-grid-cells.html?theme=dark&state=idle\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" data-shot=\"selected\" src=\"bevel-refinement-assets-20260908-110100/screenshots/selected/editable-grid-cells-idle-dark.png?v=mtszgbl0\" alt=\"Selected Editable grid cells, idle, dark theme\"></a></article><article class=\"sg-card\" id=\"selected-split-panes\" data-component=\"split-panes\" clay=\"freeze\"><header><div><small>Fable</small><h2>Split panes</h2></div><label>State <select data-state aria-label=\"Split panes state\"><option value=\"list-detail\">List detail</option><option value=\"editor-preview\">Editor preview</option></select></label><button type=\"button\" data-expand=\"split-panes\">Enlarge</button></header><a class=\"sg-full\" data-open=\"selected\" href=\"bevel-refinement-assets-20260908-110100/selected/components/split-panes.html?theme=dark&state=list-detail\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" data-shot=\"selected\" src=\"bevel-refinement-assets-20260908-110100/screenshots/selected/split-panes-list-detail-dark.png?v=mtszgbl0\" alt=\"Selected Split panes, list-detail, dark theme\"></a></article><article class=\"sg-card\" id=\"selected-rich-text-toolbar\" data-component=\"rich-text-toolbar\" clay=\"freeze\"><header><div><small>Fable</small><h2>Rich text toolbar</h2></div><label>State <select data-state aria-label=\"Rich text toolbar state\"><option value=\"toolbar\">Toolbar</option><option value=\"menu\">Menu</option><option value=\"link\">Link</option><option value=\"floating\">Floating</option></select></label><button type=\"button\" data-expand=\"rich-text-toolbar\">Enlarge</button></header><a class=\"sg-full\" data-open=\"selected\" href=\"bevel-refinement-assets-20260908-110100/selected/components/rich-text-toolbar.html?theme=dark&state=toolbar\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" data-shot=\"selected\" src=\"bevel-refinement-assets-20260908-110100/screenshots/selected/rich-text-toolbar-toolbar-dark.png?v=mtszgbl0\" alt=\"Selected Rich text toolbar, toolbar, dark theme\"></a></article><article class=\"sg-card\" id=\"selected-kanban-board\" data-component=\"kanban-board\" clay=\"freeze\"><header><div><small>Fable</small><h2>Kanban board</h2></div><label>State <select data-state aria-label=\"Kanban board state\"><option value=\"default\">Default</option><option value=\"empty\">Empty</option><option value=\"selected\">Selected</option></select></label><button type=\"button\" data-expand=\"kanban-board\">Enlarge</button></header><a class=\"sg-full\" data-open=\"selected\" href=\"bevel-refinement-assets-20260908-110100/selected/components/kanban-board.html?theme=dark&state=default\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" data-shot=\"selected\" src=\"bevel-refinement-assets-20260908-110100/screenshots/selected/kanban-board-default-dark.png?v=mtszgbl0\" alt=\"Selected Kanban board, default, dark theme\"></a></article></div><h2 class=\"sg-section-title\">Product contexts</h2><p class=\"sg-caption\">Static theme references for the existing HyperCMS and Quickcrop structures.</p><div class=\"sg-grid\" id=\"selected-contexts\"><article class=\"sg-card\" id=\"selected-context-hypercms\" data-component=\"context-hypercms\" clay=\"freeze\"><header><div><small>Fable</small><h2>HyperCMS inspector</h2></div><label>State <select data-state aria-label=\"HyperCMS inspector state\"><option value=\"default\">Default</option><option value=\"error\">Error</option></select></label><button type=\"button\" data-expand=\"context-hypercms\">Enlarge</button></header><a class=\"sg-full\" data-open=\"selected\" href=\"bevel-refinement-assets-20260908-110100/selected/components/context-hypercms.html?theme=dark&state=default\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" data-shot=\"selected\" src=\"bevel-refinement-assets-20260908-110100/screenshots/selected/context-hypercms-default-dark.png?v=mtszgbl0\" alt=\"Selected HyperCMS inspector, default, dark theme\"></a></article><article class=\"sg-card\" id=\"selected-context-quickcrop\" data-component=\"context-quickcrop\" clay=\"freeze\"><header><div><small>Parent</small><h2>Quickcrop upload and crop</h2></div><label>State <select data-state aria-label=\"Quickcrop upload and crop state\"><option value=\"locked\">Locked</option><option value=\"free\">Free</option></select></label><button type=\"button\" data-expand=\"context-quickcrop\">Enlarge</button></header><a class=\"sg-full\" data-open=\"selected\" href=\"bevel-refinement-assets-20260908-110100/selected/components/context-quickcrop.html?theme=dark&state=locked\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" data-shot=\"selected\" src=\"bevel-refinement-assets-20260908-110100/screenshots/selected/context-quickcrop-locked-dark.png?v=mtszgbl0\" alt=\"Selected Quickcrop upload and crop, locked, dark theme\"></a></article></div><details class=\"sg-preserved\"><summary>Preserved candidates</summary><p><a href=\"bevel-refinement-assets-20260908-110100/parent/index.html\" target=\"_blank\" rel=\"noopener\">Parent refinement set ↗</a> · <a href=\"bevel-refinement-assets-20260908-110100/fable/index.html\" target=\"_blank\" rel=\"noopener\">Fable refinement set ↗</a> · <a href=\"bevel-reference-assets-20260907-221500/parent/index.html\" target=\"_blank\" rel=\"noopener\">Original Parent ↗</a> · <a href=\"bevel-reference-assets-20260907-221500/astra/index.html\" target=\"_blank\" rel=\"noopener\">Original Astra ↗</a></p></details><dialog id=\"sg-preview\" class=\"sg-dialog\" clay=\"freeze\" aria-labelledby=\"sg-preview-title\"><div class=\"sg-dialog-head\"><h2 id=\"sg-preview-title\">Selected reference</h2><label>State <select id=\"sg-live-state\"></select></label><button type=\"button\" id=\"sg-close\">Close preview</button></div><div class=\"sg-live\" id=\"sg-live\"></div></dialog><script>document.addEventListener('DOMContentLoaded',()=>{\nconst asset=\"bevel-refinement-assets-20260908-110100\",revision=\"mtszgbl0\",mode=document.getElementById('sg-theme'),dialog=document.getElementById('sg-preview'),live=document.getElementById('sg-live'),liveState=document.getElementById('sg-live-state');let expanded=null,seats=[];\nconst refresh=box=>{const id=box.dataset.component,state=box.querySelector('[data-state]').value;box.querySelectorAll('[data-shot]').forEach(img=>{img.src=asset+'/screenshots/'+img.dataset.shot+'/'+id+'-'+state+'-'+mode.value+'.png?v='+revision;img.alt=id+', '+img.dataset.shot+', '+state+', '+mode.value;});box.querySelectorAll('[data-open]').forEach(a=>a.href=asset+'/'+a.dataset.open+'/components/'+id+'.html?theme='+mode.value+'&state='+state);};\nconst frames=()=>{live.replaceChildren();live.dataset.count=seats.length;for(const seat of seats){const section=document.createElement('section'),label=document.createElement('strong'),frame=document.createElement('iframe');label.textContent=seat==='selected'?'Selected reference':seat==='parent'?'Parent':'Fable';frame.title=label.textContent;frame.src=asset+'/'+seat+'/components/'+expanded+'.html?theme='+mode.value+'&state='+liveState.value+'&embed=1&v='+revision;frame.setAttribute('sandbox','allow-scripts allow-same-origin');section.append(label,frame);live.append(section);}};\nmode.value=document.documentElement.classList.contains('dark')?'dark':'light';document.querySelectorAll('[data-component]').forEach(refresh);\nmode.addEventListener('change',()=>{document.documentElement.classList.remove('light','dark');document.documentElement.classList.add(mode.value);document.querySelectorAll('[data-component]').forEach(refresh);});\ndocument.getElementById('sg-jump').addEventListener('change',e=>document.getElementById('selected-'+e.target.value).scrollIntoView({behavior:'smooth',block:'start'}));\ndocument.addEventListener('change',e=>{if(e.target.matches('[data-state]'))refresh(e.target.closest('[data-component]'));});\ndocument.addEventListener('click',e=>{const b=e.target.closest('[data-expand]');if(!b)return;const box=b.closest('[data-component]');expanded=box.dataset.component;seats=expanded==='kanban-board'?['parent','fable']:['selected'];liveState.replaceChildren();for(const option of box.querySelector('[data-state]').options)liveState.add(new Option(option.text,option.value));liveState.value=box.querySelector('[data-state]').value;document.getElementById('sg-preview-title').textContent=box.querySelector('h2,strong').textContent;frames();dialog.showModal();});\nliveState.addEventListener('change',frames);document.getElementById('sg-close').addEventListener('click',()=>dialog.close());dialog.addEventListener('close',()=>{live.replaceChildren();expanded=null;seats=[];});\n});</script>",
+  "questions": [],
+  "notes": false,
+  "notesPlaceholder": "Any further visual corrections to the selected components."
+}

package/examples/components/reference/selected/index.html

@@ -0,0 +1 @@
+<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Selected Bevel components</title><link rel="stylesheet" href="../baseline/bevel-fonts.css"><link rel="stylesheet" href="../baseline/bevel.css"><style>body{padding:32px;max-width:800px;margin:auto;font-family:var(--bevel-font-sans)}h1{font:38px var(--bevel-font-serif)}ul{columns:2;line-height:2}a{color:var(--bevel-brass)}@media(max-width:520px){ul{columns:1}}</style></head><body><h1>Selected Bevel components</h1><p>29 Fable designs and 4 Parent designs, with your requested corrections. These are static visual references.</p><p>All 33 visual choices are settled.</p><ul><li><a href="components/modal.html">Modal</a></li><li><a href="components/popover-menu.html">Popover menu</a></li><li><a href="components/drawer.html">Drawer</a></li><li><a href="components/popconfirm.html">Popconfirm</a></li><li><a href="components/combobox.html">Combobox</a></li><li><a href="components/multi-select-picker.html">Multi-select picker</a></li><li><a href="components/selectable-cards.html">Selectable cards</a></li><li><a href="components/upload-dropzone.html">Upload dropzone</a></li><li><a href="components/inline-edit.html">Inline edit</a></li><li><a href="components/settings-rows.html">Settings rows</a></li><li><a href="components/form-error-summary.html">Form error summary</a></li><li><a href="components/split-button.html">Split button</a></li><li><a href="components/sidebar-nav.html">Sidebar nav</a></li><li><a href="components/app-toolbar.html">App toolbar</a></li><li><a href="components/breadcrumbs.html">Breadcrumbs</a></li><li><a href="components/pagination.html">Pagination</a></li><li><a href="components/tree-view.html">Tree view</a></li><li><a href="components/wizard-shell.html">Wizard shell</a></li><li><a href="components/toast-stack.html">Toast stack</a></li><li><a href="components/persistent-action-banner.html">Persistent action banner</a></li><li><a href="components/save-status-indicator.html">Save-status indicator</a></li><li><a href="components/code-block.html">Code block</a></li><li><a href="components/diff-view.html">Diff view</a></li><li><a href="components/activity-feed.html">Activity feed</a></li><li><a href="components/stat-tiles.html">Stat tiles</a></li><li><a href="components/avatar-group.html">Avatar group</a></li><li><a href="components/small-charts.html">Small charts</a></li><li><a href="components/filter-builder.html">Filter builder</a></li><li><a href="components/column-manager.html">Column manager</a></li><li><a href="components/editable-grid-cells.html">Editable grid cells</a></li><li><a href="components/split-panes.html">Split panes</a></li><li><a href="components/rich-text-toolbar.html">Rich text toolbar</a></li><li><a href="components/kanban-board.html">Kanban board</a></li><li><a href="components/context-hypercms.html">HyperCMS inspector</a></li><li><a href="components/context-quickcrop.html">Quickcrop upload and crop</a></li></ul></body></html>

package/examples/components/reference/selected/kanban-comparison.json

@@ -0,0 +1,6 @@
+{
+  "parent": "An open three-column board with large serif task titles, generous card spacing and eight tasks. Priorities, checklists, a cover image and a task inspector give each item room.",
+  "fable": "A denser four-column board with a separate backlog, eleven tasks, a progress strip and explicit task dependencies. Smaller sans-serif card titles leave more room for labels, people and task detail.",
+  "recommended": "fable",
+  "reason": "My suggestion: Fable. Its clearer column hierarchy, compact cards and detailed inspector fit the visual direction you selected for the rest of the kit. Parent gives individual task titles more room. Both are static references."
+}