@panphora/bevel 0.1.0

package/examples/components/reference/parent/base-parent.css

@@ -0,0 +1,416 @@
+@import url('../sources/richclay/richclay.css');
+html { min-height:100%; }
+body { margin:0; font:16px/1.5 var(--bevel-font-sans); color:var(--bevel-ink); background:var(--bevel-ground); }
+[hidden] { display:none !important; }
+button, a, input, select, textarea { -webkit-tap-highlight-color:transparent; }
+button { cursor:pointer; }
+button:disabled { cursor:default; }
+button:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline:2px solid var(--bevel-brass); outline-offset:3px; }
+a { color:inherit; text-underline-offset:3px; }
+svg { flex-shrink:0; vertical-align:middle; }
+h1,h2,h3,p { margin:0; }
+h1 { font:400 34px/1.08 var(--bevel-font-serif); letter-spacing:-.025em; }
+h2 { font:400 27px/1.15 var(--bevel-font-serif); letter-spacing:-.015em; }
+h3 { font-size:17px; line-height:1.3; }
+small { font-size:12px; }
+hr { border:0; border-top:1px solid var(--bevel-line); margin:10px 0; }
+kbd { font:11px var(--bevel-font-mono); color:var(--bevel-muted); border:1px solid var(--bevel-line-2); padding:2px 5px; }
+output:empty { display:none; }
+.reference-stage { padding:28px; min-height:530px; }
+.p-header { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:24px; padding-bottom:20px; border-bottom:1px solid var(--bevel-line-2); }
+.p-header p { margin-top:9px; color:var(--bevel-muted); font-size:14px; max-width:500px; }
+.p-eyebrow { font:10px/1.6 var(--bevel-font-mono); text-transform:uppercase; letter-spacing:.16em; color:var(--bevel-brass); margin-bottom:7px; }
+.p-caption { margin-top:18px; font:11px/1.55 var(--bevel-font-mono); color:var(--bevel-muted); }
+.p-muted { color:var(--bevel-muted); }
+.p-mono { font-family:var(--bevel-font-mono); font-size:.88em; }
+.p-small { font-size:13px; }
+.p-panel { padding:24px; background:var(--bevel-surface); border:1px solid var(--bevel-line-2); }
+.p-stack { display:grid; gap:18px; }
+.p-row { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
+.p-between { display:flex; justify-content:space-between; align-items:center; gap:14px; }
+.p-columns { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
+.p-field { display:grid; gap:7px; font-size:13px; font-weight:500; min-width:0; }
+.p-field small { color:var(--bevel-muted); font-weight:400; }
+.p-field input,.p-field textarea,.p-select { width:100%; min-width:0; }
+.p-select { padding:9px 34px 9px 11px; font:15px var(--bevel-font-sans); color:var(--bevel-ink); border:1px solid var(--bevel-line-2); background:var(--bevel-surface); border-radius:0; }
+.p-field:has([aria-invalid=true]) input { border-color:var(--bevel-ox); }
+.p-field:has([aria-invalid=true]) small { color:var(--bevel-ox); }
+.p-actions { display:flex; justify-content:flex-end; align-items:center; flex-wrap:wrap; gap:10px; margin-top:24px; padding-top:18px; border-top:1px solid var(--bevel-line); }
+.p-icon-button { width:33px; height:33px; display:inline-flex; align-items:center; justify-content:center; border:2px solid; border-color:var(--bevel-edge-hi) var(--bevel-edge-lo) var(--bevel-edge-lo) var(--bevel-edge-hi); background:var(--bevel-face); color:var(--bevel-ink); padding:0; }
+.p-icon-button[aria-pressed=true] { background:var(--bevel-face-in); border-color:var(--bevel-edge-in) var(--bevel-edge-in-hi) var(--bevel-edge-in-hi) var(--bevel-edge-in); }
+.p-badge { display:inline-flex; align-items:center; width:fit-content; padding:3px 7px; border:1px solid var(--bevel-line-2); font:10px/1.3 var(--bevel-font-mono); text-transform:uppercase; letter-spacing:.05em; }
+.p-badge.teal { color:var(--bevel-teal); background:var(--bevel-teal-soft); border-color:transparent; }
+.p-badge.ox { color:var(--bevel-ox); background:var(--bevel-ox-soft); border-color:transparent; }
+.p-badge.brass { color:var(--bevel-brass); background:var(--bevel-brass-soft); border-color:transparent; }
+.p-avatar { width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center; background:var(--bevel-sunk); color:var(--bevel-ink-2); font:12px var(--bevel-font-mono); border:1px solid var(--bevel-line-2); flex-shrink:0; }
+.p-avatar.small { width:28px; height:28px; font-size:10px; }
+.p-meta { padding:13px 0; border-bottom:1px solid var(--bevel-line); }
+.p-meta dt { font:10px var(--bevel-font-mono); color:var(--bevel-muted); text-transform:uppercase; letter-spacing:.08em; margin-bottom:4px; }
+.p-meta dd { margin:0; font-size:14px; }
+.p-scrim { padding:28px; min-height:430px; display:grid; place-items:center; background:light-dark(rgb(43 36 27 / .19),rgb(0 0 0 / .65)); position:relative; }
+.p-modal { width:min(100%,480px); border:2px solid var(--bevel-ink); background:var(--bevel-surface); padding:36px; position:relative; }
+.p-modal .p-eyebrow { margin-bottom:12px; }
+.p-modal h2 { font-size:31px; margin-bottom:12px; }
+.p-modal>p { color:var(--bevel-ink-2); font-size:14px; margin-bottom:20px; }
+.p-corner { position:absolute; top:0; right:0; width:44px; height:44px; padding:0; border:0; background:none; }
+.p-corner svg { width:100%; height:100%; }
+.corner-bg { fill:var(--bevel-line-2); }
+.corner-x { fill:var(--bevel-ink); }
+.p-scroll { max-height:215px; overflow:auto; padding-right:14px; scrollbar-color:var(--bevel-line-2) transparent; }
+.p-scroll p+p { margin-top:14px; }
+.p-drawer-stage { background:var(--bevel-sunk); border:1px solid var(--bevel-line-2); display:flex; justify-content:flex-end; min-height:450px; position:relative; overflow:hidden; }
+.p-drawer-ghost { flex:1; padding:26px 18px; color:var(--bevel-muted); opacity:.5; }
+.p-drawer { width:410px; max-width:100%; background:var(--bevel-surface); border-left:2px solid var(--bevel-ink); padding:27px; position:relative; }
+.p-drawer h2 { margin:8px 0 4px; }
+.p-menu-area { min-height:350px; padding:20px; background:var(--bevel-sunk); border:1px solid var(--bevel-line); }
+.p-menu { width:310px; max-width:100%; background:var(--bevel-surface); border:1px solid var(--bevel-line-2); padding:6px; margin-top:9px; }
+.p-menu-title { font:10px var(--bevel-font-mono); color:var(--bevel-muted); text-transform:uppercase; letter-spacing:.08em; padding:10px; }
+.p-menu button { display:flex; align-items:center; gap:10px; width:100%; padding:11px 10px; background:none; border:0; text-align:left; font:14px var(--bevel-font-sans); }
+.p-menu button span { flex:1; }
+.p-menu button:hover:not(:disabled),.p-menu button:focus-visible { background:var(--bevel-sunk); }
+.p-menu button:disabled { color:var(--bevel-faint); }
+.danger { color:var(--bevel-ox); }
+.p-menu-result { display:block; font-size:12px; color:var(--bevel-teal); padding:8px 10px; }
+.p-popconfirm { border:1px solid var(--bevel-line-2); background:var(--bevel-surface); padding:22px; max-width:350px; margin:10px 0; }
+.p-popconfirm p { font-size:14px; color:var(--bevel-muted); margin-top:9px; }
+.p-popconfirm .p-actions { margin-top:16px; padding-top:0; border:0; }
+.p-picker { width:430px; max-width:100%; }
+.p-search { display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--bevel-line-2); background:var(--bevel-surface); }
+.p-search input { background:none; border:0; outline:none; min-width:0; flex:1; font-size:15px; }
+.p-options { border:1px solid var(--bevel-line-2); border-top:0; padding:6px; background:var(--bevel-surface); }
+.p-option { display:flex; align-items:center; gap:12px; padding:11px; width:100%; background:none; border:0; text-align:left; }
+.p-option:hover,.p-option[aria-selected=true] { background:var(--bevel-sunk); }
+.p-option .p-person { flex:1; }
+.p-person strong { display:block; font-size:14px; font-weight:500; }
+.p-person small { color:var(--bevel-muted); }
+.p-picker-foot { font:10px var(--bevel-font-mono); color:var(--bevel-muted); padding:12px; border-top:1px solid var(--bevel-line); }
+.p-empty { text-align:center; padding:38px 18px; color:var(--bevel-muted); }
+.p-empty h3 { color:var(--bevel-ink); margin-bottom:6px; }
+.p-tag { display:inline-flex; gap:7px; align-items:center; padding:4px 8px; font-size:12px; background:var(--bevel-sunk); border:1px solid var(--bevel-line-2); }
+.p-tag button { border:0; background:none; padding:0; display:inline-flex; color:var(--bevel-muted); }
+.p-choice { display:flex; align-items:flex-start; gap:13px; padding:20px; background:var(--bevel-surface); border:1px solid var(--bevel-line-2); cursor:pointer; min-width:0; }
+.p-choice:has(:checked) { border-color:var(--bevel-brass); background:var(--bevel-brass-soft); }
+.p-choice:has(:disabled) { opacity:.5; cursor:default; }
+.p-choice strong { display:block; margin-bottom:7px; font-size:16px; }
+.p-choice p { font-size:13px; color:var(--bevel-muted); }
+.p-choice input { margin:4px 0 0; accent-color:var(--bevel-brass); }
+.p-choice .p-price { font:22px var(--bevel-font-mono); margin-top:16px; }
+.p-dropzone { text-align:center; border:1px dashed var(--bevel-muted); background:var(--bevel-surface); padding:32px 20px; }
+.p-dropzone>svg { margin-bottom:12px; color:var(--bevel-brass); }
+.p-dropzone p { margin:6px 0 18px; font-size:13px; color:var(--bevel-muted); }
+.p-upload-row { display:flex; align-items:center; gap:12px; padding:15px 0; border-bottom:1px solid var(--bevel-line); }
+.p-upload-row img { width:50px; height:44px; object-fit:cover; }
+.p-progress { display:block; height:4px; background:var(--bevel-line); margin-top:8px; }
+.p-progress span { display:block; height:100%; background:var(--bevel-brass); }
+.p-setting { display:flex; justify-content:space-between; align-items:center; gap:26px; padding:20px 0; border-bottom:1px solid var(--bevel-line); }
+.p-setting strong { display:block; font-size:15px; font-weight:500; }
+.p-setting p { font-size:13px; color:var(--bevel-muted); margin-top:4px; }
+.p-setting .p-select { width:130px; }
+.p-error-summary { padding:18px 20px; border-left:3px solid var(--bevel-ox); background:var(--bevel-ox-soft); margin-bottom:24px; }
+.p-error-summary h3 { color:var(--bevel-ox); font-size:16px; }
+.p-error-summary ul { margin:9px 0 0; padding-left:20px; font-size:13px; }
+.p-inline-value { display:flex; justify-content:space-between; align-items:center; gap:15px; padding:20px 0; border-bottom:1px solid var(--bevel-line); }
+.p-inline-value strong { font-weight:500; }
+.p-split-button { display:inline-flex; }
+.p-split-button>button+button { border-left-width:1px; }
+.p-app-shell { display:flex; border:1px solid var(--bevel-line-2); min-height:360px; background:var(--bevel-surface); }
+.p-sidebar { width:205px; flex-shrink:0; display:flex; flex-direction:column; background:var(--bevel-sunk); border-right:1px solid var(--bevel-line-2); }
+.p-sidebar.compact { width:72px; }
+.p-sidebar-brand { display:flex; gap:10px; align-items:center; padding:22px 18px; border-bottom:1px solid var(--bevel-line); }
+.p-sidebar-brand strong { font:20px var(--bevel-font-serif); }
+.p-sidebar-links { padding:18px 9px; flex:1; }
+.p-sidebar-links .p-eyebrow { padding-left:9px; }
+.p-nav-item { display:flex; align-items:center; gap:10px; width:100%; padding:11px 9px; border:0; background:none; text-align:left; color:var(--bevel-muted); font-size:13px; }
+.p-nav-item span { flex:1; }
+.p-nav-item small { font-family:var(--bevel-font-mono); }
+.p-nav-item.active { color:var(--bevel-ink); background:var(--bevel-surface); box-shadow:inset 2px 0 var(--bevel-brass); }
+.p-nav-item:hover { background:var(--bevel-surface); }
+.p-sidebar footer { display:flex; align-items:center; gap:9px; padding:15px; border-top:1px solid var(--bevel-line-2); font-size:12px; }
+.p-sidebar footer small { display:block; font-size:10px; color:var(--bevel-muted); }
+.p-sidebar-toggle { padding:0 15px 15px; }
+.p-app-content { padding:24px; min-width:0; flex:1; }
+.p-document-row { display:flex; align-items:center; gap:12px; padding:18px 0; border-bottom:1px solid var(--bevel-line); }
+.p-document-row>div { flex:1; min-width:0; }
+.p-document-row strong { font-size:14px; font-weight:500; }
+.p-document-row p { margin-top:3px; font-size:11px; color:var(--bevel-muted); }
+.p-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:10px; padding:14px; border-bottom:1px solid var(--bevel-line-2); background:var(--bevel-sunk); }
+.p-tool-group { display:flex; gap:5px; padding-right:10px; border-right:1px solid var(--bevel-line-2); }
+.p-toolbar-search { display:flex; align-items:center; gap:8px; flex:1; min-width:120px; }
+.p-toolbar-search input { width:100%; border:0; background:none; font-size:12px; min-width:0; }
+.p-toolbar-menu { margin:10px 14px 0 auto; width:225px; border:1px solid var(--bevel-line-2); padding:5px; }
+.p-toolbar-menu button { display:block; width:100%; padding:10px; border:0; background:none; text-align:left; font-size:13px; }
+.p-toolbar-menu button:hover { background:var(--bevel-sunk); }
+.p-breadcrumbs { display:flex; align-items:center; flex-wrap:wrap; gap:10px; font-size:12px; color:var(--bevel-muted); }
+.p-breadcrumbs a { display:inline-flex; gap:6px; align-items:center; text-decoration:none; }
+.p-breadcrumbs a:hover { text-decoration:underline; }
+.p-breadcrumbs [aria-current] { color:var(--bevel-ink); font-weight:500; }
+.p-pager { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; margin-top:24px; }
+.p-page-range { font:11px var(--bevel-font-mono); color:var(--bevel-muted); }
+.p-pager nav { display:flex; gap:7px; align-items:center; }
+.p-page { min-width:33px; height:33px; border:1px solid var(--bevel-line-2); background:var(--bevel-surface); font:12px var(--bevel-font-mono); }
+.p-page.active { background:var(--bevel-ink); color:var(--bevel-ground); border-color:var(--bevel-ink); }
+.p-pager-gap { color:var(--bevel-muted); font-size:12px; }
+.p-tree { border:1px solid var(--bevel-line-2); background:var(--bevel-surface); padding:8px; max-width:490px; }
+.p-tree-head { padding:14px 12px; border-bottom:1px solid var(--bevel-line); margin-bottom:8px; }
+.p-tree summary { padding:11px 10px; cursor:pointer; font-size:14px; }
+.p-tree summary svg { margin:0 7px; color:var(--bevel-muted); }
+.p-tree-children { margin-left:22px; border-left:1px solid var(--bevel-line); padding-left:8px; }
+.p-tree-leaf { display:flex; align-items:center; gap:9px; width:100%; border:0; background:none; text-align:left; padding:11px 12px; font-size:13px; }
+.p-tree-leaf span { flex:1; }
+.p-tree-leaf.selected { background:var(--bevel-brass-soft); color:var(--bevel-brass); }
+.p-tree-empty { padding:16px 35px; color:var(--bevel-muted); font-size:13px; }
+.p-wizard { display:grid; grid-template-columns:190px 1fr; background:var(--bevel-surface); border:1px solid var(--bevel-line-2); }
+.p-wizard-steps { border-right:1px solid var(--bevel-line); padding:24px 17px; }
+.p-wizard-step { display:flex; gap:10px; padding:0 0 27px; color:var(--bevel-muted); }
+.p-wizard-step>span { display:flex; align-items:center; justify-content:center; flex-shrink:0; width:22px; height:22px; border:1px solid var(--bevel-line-2); font:10px var(--bevel-font-mono); }
+.p-wizard-step strong { display:block; font-size:12px; font-weight:500; }
+.p-wizard-step small { font-size:10px; line-height:1.3; display:block; margin-top:4px; }
+.p-wizard-step.current { color:var(--bevel-ink); }
+.p-wizard-step.current>span { background:var(--bevel-ink); color:var(--bevel-ground); }
+.p-wizard-step.done { color:var(--bevel-teal); }
+.p-wizard-body { padding:27px; }
+.p-toast-stage { display:flex; flex-direction:column; align-items:flex-end; padding:22px; background:var(--bevel-sunk); border:1px solid var(--bevel-line); min-height:350px; gap:12px; }
+.p-toast { display:flex; align-items:flex-start; gap:12px; flex-wrap:wrap; width:425px; max-width:100%; padding:18px; background:var(--bevel-surface); border:1px solid var(--bevel-line-2); border-left:3px solid var(--bevel-brass); }
+.p-toast.success { border-left-color:var(--bevel-teal); }
+.p-toast.error { border-left-color:var(--bevel-ox); }
+.p-toast-icon { padding-top:1px; }
+.p-toast.success .p-toast-icon { color:var(--bevel-teal); }
+.p-toast.error .p-toast-icon { color:var(--bevel-ox); }
+.p-toast-body { flex:1; min-width:120px; }
+.p-toast h3 { font-size:14px; }
+.p-toast p { margin-top:5px; font-size:12px; color:var(--bevel-muted); }
+.p-toast .p-icon-button { width:24px; height:24px; border:0; background:none; color:var(--bevel-muted); }
+.p-text-action { padding:0; border:0; background:none; color:var(--bevel-ink); font-size:12px; text-decoration:underline; text-underline-offset:3px; margin-top:8px; }
+.p-banner { display:flex; align-items:flex-start; flex-wrap:wrap; gap:16px; padding:20px; background:var(--bevel-brass-soft); border-top:2px solid var(--bevel-brass); }
+.p-banner>div { flex:1; min-width:200px; }
+.p-banner>span { color:var(--bevel-brass); }
+.p-banner h3 { font-size:16px; }
+.p-banner p { margin-top:6px; font-size:13px; color:var(--bevel-ink-2); }
+.p-banner.resolved { background:var(--bevel-teal-soft); border-color:var(--bevel-teal); }
+.p-banner.resolved>span { color:var(--bevel-teal); }
+.p-save-status { display:flex; align-items:center; flex-wrap:wrap; gap:7px; font:10px var(--bevel-font-mono); color:var(--bevel-muted); }
+.p-save-status.saved { color:var(--bevel-teal); }
+.p-save-status.failed { color:var(--bevel-ox); }
+.p-save-status .p-text-action { margin:0; }
+.p-document-preview { margin:27px 0; padding:26px 0; border-top:1px solid var(--bevel-line); border-bottom:1px solid var(--bevel-line); }
+.p-document-preview h3 { font:25px var(--bevel-font-serif); }
+.p-document-preview p { margin-top:12px; font-size:14px; color:var(--bevel-muted); }
+.p-status-key { display:flex; gap:8px; flex-wrap:wrap; }
+.p-state-label { background:none; border:1px solid var(--bevel-line-2); padding:6px 12px; color:var(--bevel-muted); font:11px var(--bevel-font-mono); }
+.p-state-label.active { color:var(--bevel-ink); border-color:var(--bevel-muted); }
+.qc-stage { position:relative; overflow:hidden; line-height:0; min-width:0; }
+.qc-stage img { width:100%; display:block; }
+.qc-dim { position:absolute; inset:0; }
+.qc-box { position:absolute; left:25%; top:12%; width:50%; aspect-ratio:1; border:1px solid var(--bevel-ox-ink); box-shadow:0 0 0 1000px rgb(0 0 0 / .5); }
+.qc-box.free { left:8%; top:24%; width:82%; height:48%; aspect-ratio:auto; }
+.qc-handle { position:absolute; width:12px; height:12px; border:2px solid var(--bevel-ink); background:var(--bevel-ox-ink); }
+.qc-nw { left:-6px;top:-6px; }.qc-ne { right:-6px;top:-6px; }.qc-sw { left:-6px;bottom:-6px; }.qc-se { right:-6px;bottom:-6px; }
+.qc-rule { position:absolute; opacity:.6; background:var(--bevel-ox-ink); }
+.qc-rule.horizontal { width:100%;height:1px;left:0; }.qc-rule.vertical { width:1px;height:100%;top:0; }.qc-rule.horizontal.one { top:33.33%; }.qc-rule.horizontal.two { top:66.66%; }.qc-rule.vertical.one { left:33.33%; }.qc-rule.vertical.two { left:66.66%; }
+.p-crop-size { position:absolute; bottom:10px; right:10px; padding:7px; color:var(--bevel-ox-ink); background:rgb(0 0 0 / .65); font:10px var(--bevel-font-mono); }
+.p-code { margin:0; border:1px solid var(--bevel-line-2); background:var(--bevel-surface); }
+.p-code figcaption { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:15px; padding:14px 17px; border-bottom:1px solid var(--bevel-line-2); }
+.p-code figcaption>span { display:flex; gap:9px; align-items:center; font:12px var(--bevel-font-mono); }
+.p-code pre { margin:0; padding:22px 0; overflow:auto; font:12px/2.15 var(--bevel-font-mono); background:var(--bevel-sunk); }
+.p-code code { background:none; padding:0; font:inherit; }
+.p-code-line { display:inline-block; min-width:100%; padding:0 20px 0 48px; position:relative; }
+.p-code-line:before { content:attr(data-line); position:absolute;left:17px;color:var(--bevel-muted); }
+.p-code pre.wrapped { white-space:pre-wrap; overflow-wrap:anywhere; }
+.p-code footer { display:flex; justify-content:space-between; padding:10px 17px; font:10px var(--bevel-font-mono); color:var(--bevel-muted); border-top:1px solid var(--bevel-line); }
+.p-diff { border:1px solid var(--bevel-line-2); background:var(--bevel-surface); overflow:hidden; }
+.p-diff>header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; padding:13px 16px; font:12px var(--bevel-font-mono); }
+.p-diff-hunk { padding:9px 15px; color:var(--bevel-muted); background:var(--bevel-sunk); font:11px var(--bevel-font-mono); border-block:1px solid var(--bevel-line); }
+.p-diff-line { display:flex; gap:12px; padding:10px 12px; font:11px/1.6 var(--bevel-font-mono); }
+.p-diff-line>span:first-child { width:18px;text-align:right;color:var(--bevel-muted); }
+.p-diff-line code { font:inherit; min-width:0; overflow-wrap:anywhere; }
+.removed { background:var(--bevel-ox-soft); }
+.added { background:var(--bevel-teal-soft); }
+.removed mark { background:color-mix(in srgb,var(--bevel-ox) 22%,transparent);color:inherit; }
+.added mark { background:color-mix(in srgb,var(--bevel-teal) 25%,transparent);color:inherit; }
+.p-diff-split { display:grid;grid-template-columns:1fr 1fr; }
+.p-diff-split section+section { border-left:1px solid var(--bevel-line-2); }
+.p-diff-split h3 { font:10px var(--bevel-font-mono);text-transform:uppercase;padding:12px 16px;background:var(--bevel-sunk); }
+.p-diff-split p { padding:15px;font-size:13px; }
+.p-diff footer { padding:12px 16px;border-top:1px solid var(--bevel-line);font:10px var(--bevel-font-mono);color:var(--bevel-muted); }
+.p-event { display:flex;align-items:flex-start;gap:15px;padding:17px 0;border-bottom:1px solid var(--bevel-line); }
+.p-event>div { flex:1;min-width:0; }
+.p-event h3 { font:500 14px var(--bevel-font-sans); }
+.p-event p { font-size:12px;color:var(--bevel-muted);margin-top:5px; }
+.p-event time { font:10px var(--bevel-font-mono);color:var(--bevel-muted);padding-top:3px; }
+.p-stat-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:var(--bevel-surface);border:1px solid var(--bevel-line-2); }
+.p-stat { padding:25px 20px; }
+.p-stat+.p-stat { border-left:1px solid var(--bevel-line-2); }
+.p-stat strong { font:28px/1.4 var(--bevel-font-mono);letter-spacing:-.05em;display:block;margin:12px 0; }
+.p-stat p { font-size:11px;color:var(--bevel-muted); }
+.p-stat p.teal { color:var(--bevel-teal); }.p-stat p.ox { color:var(--bevel-ox); }
+.p-stat-support { margin-top:20px;padding:23px;display:flex;align-items:center;gap:20px;border:1px solid var(--bevel-line); }
+.p-stat-support>div { flex:1; }
+.p-stat-support .mini { width:230px; }
+.p-avatar-stack { display:flex;margin:30px 0;align-items:center;padding-left:4px; }
+.p-avatar-stack>* { margin-left:-4px;border:3px solid var(--bevel-surface); }
+.p-avatar-stack .p-avatar { width:44px;height:44px; }
+.p-avatar-wrap { position:relative; }
+.p-presence { position:absolute;right:0;bottom:0;width:9px;height:9px;background:var(--bevel-teal);border:2px solid var(--bevel-surface); }
+.p-avatar-photo { width:50px;height:50px;object-fit:cover; }
+.p-avatar-list { display:grid;gap:17px;border-top:1px solid var(--bevel-line);padding-top:23px; }
+.p-chart { display:block;width:100%;margin:23px 0 7px;overflow:visible; }
+.p-chart text { font:10px var(--bevel-font-mono);fill:var(--bevel-muted); }
+.chart-rule { stroke:var(--bevel-line);stroke-width:1; }
+.chart-bar { fill:var(--bevel-line-2); }.chart-bar.accent { fill:var(--bevel-brass); }
+.chart-line { stroke:var(--bevel-brass);fill:none;stroke-width:2;stroke-linejoin:miter; }
+.chart-point { fill:var(--bevel-surface);stroke:var(--bevel-brass);stroke-width:2; }
+.p-chart.mini { margin:0; }
+.p-chart-legend { display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font:10px var(--bevel-font-mono);color:var(--bevel-muted); }
+.p-chart-legend i { display:inline-block;width:7px;height:7px;background:var(--bevel-brass);margin-right:6px; }
+.p-spark-card { display:flex;align-items:center;gap:15px;margin:35px 0; }
+.p-spark-card .mini { flex:1;min-width:0; }
+.p-metric-number { font:36px var(--bevel-font-mono); }
+.p-table-scroll { overflow:auto; }
+.p-invoice-table { border-collapse:collapse;width:100%;font-size:12px;white-space:nowrap;background:var(--bevel-surface); }
+.p-invoice-table th { text-align:left;padding:13px 14px;font:10px var(--bevel-font-mono);text-transform:uppercase;letter-spacing:.07em;background:var(--bevel-sunk);border-bottom:1px solid var(--bevel-line-2);color:var(--bevel-muted); }
+.p-invoice-table td { padding:17px 14px;border-bottom:1px solid var(--bevel-line); }
+.p-invoice-table .number { text-align:right;font-family:var(--bevel-font-mono); }
+.p-invoice-table input { width:90px;padding:6px;border:1px solid var(--bevel-brass);background:var(--bevel-surface);font:12px var(--bevel-font-mono); }
+.p-invoice-table input[aria-invalid=true] { border-color:var(--bevel-ox);background:var(--bevel-ox-soft); }
+.p-rules { display:grid;gap:12px;margin-top:23px; }
+.p-filter-rule { display:grid;grid-template-columns:40px 1fr 1.25fr 1fr 33px;gap:8px;align-items:center; }
+.p-filter-rule .p-select { padding:8px;font-size:12px; }
+.p-filter-rule .bevel-input { padding:8px;font-size:12px;min-width:0;width:100%; }
+.p-rule-word { font:10px var(--bevel-font-mono);color:var(--bevel-muted); }
+.p-filter-summary { display:flex;gap:10px;padding:16px 20px;margin-top:16px;border:1px solid var(--bevel-line);font-size:12px;color:var(--bevel-muted); }
+.p-column-layout { display:grid;grid-template-columns:230px minmax(0,1fr);gap:16px; }
+.p-column-menu { padding:20px;background:var(--bevel-surface);border:1px solid var(--bevel-line-2); }
+.p-column-choice { display:flex;align-items:center;gap:8px;padding:13px 0;border-bottom:1px solid var(--bevel-line); }
+.p-column-choice .bevel-checkbox { flex:1;font-size:13px; }
+.p-grip { color:var(--bevel-muted); }
+.p-column-sample { min-width:0;border:1px solid var(--bevel-line-2); }
+.p-cell-footer { display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;padding:17px; }
+.p-cell-footer output { flex-basis:100%; }
+.p-split-panes { display:grid;grid-template-columns:minmax(0,var(--split)) 9px minmax(0,1fr);border:1px solid var(--bevel-line-2);background:var(--bevel-surface);min-height:305px; }
+.p-pane { padding:20px 15px;min-width:0;overflow:auto; }
+.p-pane:first-child { background:var(--bevel-sunk); }
+.p-pane-divider { display:flex;align-items:center;justify-content:center;color:var(--bevel-muted);background:var(--bevel-face);border-inline:1px solid var(--bevel-line-2);font-size:14px; }
+.p-pane-item { display:flex;gap:8px;align-items:center;margin:6px -6px;padding:11px 7px;font-size:12px; }
+.p-pane-item.active { background:var(--bevel-surface);border-left:2px solid var(--bevel-brass); }
+.p-pane pre { font:11px/1.7 var(--bevel-font-mono);white-space:pre-wrap;overflow-wrap:anywhere; }
+.p-pane-detail { padding:24px; }
+.p-pane-detail p { margin-top:14px;font-size:13px;color:var(--bevel-muted); }
+.p-pane-adjust { display:flex;gap:15px;align-items:center;flex-wrap:wrap;margin-top:18px;font:11px var(--bevel-font-mono);color:var(--bevel-muted); }
+.p-pane-adjust input { flex:1;min-width:100px;accent-color:var(--bevel-brass); }
+.p-richclay-demo { position:relative;--richclay-surface:var(--bevel-surface);--richclay-surface-alt:var(--bevel-sunk);--richclay-text:var(--bevel-ink);--richclay-muted:var(--bevel-muted);--richclay-border:var(--bevel-line-2);--richclay-accent:var(--bevel-brass);--richclay-accent-ink:var(--bevel-ground);--richclay-focus:var(--bevel-brass);--richclay-danger:var(--bevel-ox);--richclay-radius:0;--richclay-shadow:none; }
+.p-richclay-demo .richclay-toolbar { padding:9px;gap:5px;border-radius:0;border-color:var(--bevel-line-2);margin:0; }
+.p-richclay-demo .richclay-button { border:2px solid;border-color:var(--bevel-edge-hi) var(--bevel-edge-lo) var(--bevel-edge-lo) var(--bevel-edge-hi);background:var(--bevel-face);border-radius:0;font:14px var(--bevel-font-sans); }
+.p-richclay-demo .richclay-button[data-richclay-control=blockMenu] { padding:0 9px;gap:15px;font-size:12px; }
+.p-richclay-demo .richclay-button[aria-pressed=true] { background:var(--bevel-face-in);border-color:var(--bevel-edge-in) var(--bevel-edge-in-hi) var(--bevel-edge-in-hi) var(--bevel-edge-in);box-shadow:none;color:var(--bevel-ink); }
+.p-richclay-demo .richclay-button:disabled { opacity:.45; }
+.p-richclay-demo .richclay-separator { display:block;width:1px;height:24px;background:var(--bevel-line-2);margin:0 5px; }
+.p-richclay-demo .richclay-editor { padding:27px;border:1px solid var(--bevel-line-2);border-top:0;border-radius:0;min-height:220px;background:var(--bevel-surface); }
+.p-richclay-demo .richclay-editor h2,.p-richclay-demo .richclay-inline h2 { font:29px var(--bevel-font-serif); }
+.p-richclay-demo .richclay-editor p,.p-richclay-demo .richclay-inline p { font:15px/1.7 var(--bevel-font-sans);color:var(--bevel-ink-2); }
+.p-richclay-demo .richclay-editor a { color:var(--bevel-brass); }
+.p-richclay-demo .richclay-menu { position:relative;left:auto;top:auto;width:210px;margin:8px 0;background:var(--bevel-surface);border:1px solid var(--bevel-line-2);border-radius:0;box-shadow:none;padding:5px; }
+.p-richclay-demo .richclay-menu-item { display:block;border:0;background:none;width:100%;text-align:left;padding:10px;font-size:13px; }
+.p-richclay-demo .richclay-menu-item.is-active { background:var(--bevel-sunk); }
+.p-richclay-demo .richclay-dialog { border:1px solid var(--bevel-line-2);border-radius:0;background:var(--bevel-surface);padding:20px;margin-top:14px; }
+.p-richclay-demo .richclay-dialog label { display:grid;gap:6px;font-size:12px; }
+.p-richclay-demo .richclay-input { padding:10px;border:1px solid var(--bevel-line-2);border-radius:0;background:var(--bevel-surface); }
+.p-richclay-demo .richclay-primary,.p-richclay-demo .richclay-secondary { border-radius:0;font-size:13px; }
+.p-richclay-demo .richclay-float { position:relative;left:auto;top:auto;z-index:auto;width:fit-content;margin:0 0 16px 25px; }
+.p-richclay-demo .richclay-inline { border:1px dashed var(--bevel-brass);padding:25px;outline:0; }
+.p-kanban { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px; }
+.p-kanban-column { background:var(--bevel-sunk);border-top:2px solid var(--bevel-line-2);padding:12px;min-height:340px; }
+.p-kanban-column>header { display:flex;justify-content:space-between;align-items:center;padding:4px 0 14px; }
+.p-kanban-column>header h3 { font:12px var(--bevel-font-mono); }
+.p-kanban-column>header span { font:10px var(--bevel-font-mono);color:var(--bevel-muted); }
+.p-kanban-card { margin-bottom:11px;padding:14px;background:var(--bevel-surface);border:1px solid var(--bevel-line-2); }
+.p-kanban-card.selected { border-color:var(--bevel-brass);box-shadow:inset 0 2px var(--bevel-brass); }
+.p-kanban-card h4 { margin:14px 0 20px;font:500 14px/1.45 var(--bevel-font-sans); }
+.p-kanban-card footer { display:flex;align-items:center;justify-content:space-between; }
+.p-card-move { border:0;background:none;padding:5px;color:var(--bevel-muted); }
+.p-kanban-empty { text-align:center;padding:50px 0;font-size:12px;color:var(--bevel-muted); }
+.p-cms-context { display:grid;grid-template-columns:minmax(0,1fr) 330px;border:1px solid var(--bevel-line-2);background:var(--bevel-surface); }
+.p-cms-page { padding:28px 20px;background:var(--bevel-sunk); }
+.p-cms-page p { font-size:13px;color:var(--bevel-muted);margin-top:16px; }
+.p-cms-page img { display:block;width:100%;margin-top:24px; }
+.p-cms-context .hcms-shell { border-left:2px solid var(--bevel-ink);min-width:0; }
+.hcms-shell-body { padding:22px; }
+.hcms-shell-header { display:flex;justify-content:space-between;align-items:center;margin-bottom:22px; }
+.hcms-shell-eyebrow { font:9px var(--bevel-font-mono);color:var(--bevel-brass);text-transform:uppercase;letter-spacing:.1em;margin-bottom:5px; }
+.hcms-shell-title { font-size:25px; }
+.hcms-shell button { font:12px var(--bevel-font-sans);padding:6px 9px;border:2px solid;border-color:var(--bevel-edge-hi) var(--bevel-edge-lo) var(--bevel-edge-lo) var(--bevel-edge-hi);background:var(--bevel-face); }
+.hcms-shell button:disabled { opacity:.5; }
+.hcms-field { display:grid;gap:7px;margin-bottom:18px;min-width:0; }
+.hcms-label { font-size:11px;font-weight:500; }
+.hcms-shell textarea,.hcms-shell input { width:100%;min-width:0;font:13px/1.5 var(--bevel-font-sans);padding:8px;background:var(--bevel-surface);color:var(--bevel-ink);border:1px solid var(--bevel-line-2);border-radius:0; }
+.hcms-object,.hcms-array { border-top:1px solid var(--bevel-line-2);padding-top:17px;margin-bottom:18px; }
+.hcms-object-title,.hcms-array-title { font:10px var(--bevel-font-mono);text-transform:uppercase;letter-spacing:.05em;margin-bottom:14px;color:var(--bevel-muted); }
+.hcms-object-fields { border-left:1px solid var(--bevel-line-2);padding-left:13px; }
+.hcms-card { display:flex;gap:9px;padding:12px;background:var(--bevel-sunk);border:1px solid var(--bevel-line-2);margin-bottom:8px; }
+.hcms-drag-handle { color:var(--bevel-muted); }
+.hcms-card-body { min-width:0;flex:1; }
+.hcms-card .hcms-field { margin:0; }
+.hcms-card-controls { display:flex;justify-content:flex-end;margin-top:8px; }
+.hcms-upload figure { margin:0;position:relative; }
+.hcms-upload img { display:block;width:100%;height:110px;object-fit:cover; }
+.hcms-upload-clear { position:absolute;right:5px;top:5px; }
+.hcms-error,.hcms-shell-error { color:var(--bevel-ox);font-size:11px; }
+.hcms-shell-error { padding:10px;margin-bottom:18px;background:var(--bevel-ox-soft); }
+.hcms-shell-footer { border-top:1px solid var(--bevel-line-2);padding-top:15px;display:flex;justify-content:flex-end; }
+.p-crop-context { padding:20px;background:var(--bevel-sunk); }
+.p-crop-actions { display:flex;flex-wrap:wrap;align-items:center;gap:15px;margin-top:20px; }
+.qc-bar { display:flex;gap:8px;margin-left:auto; }
+.qc-btn { padding:6px 12px;font:13px var(--bevel-font-sans);border:2px solid;border-color:var(--bevel-edge-hi) var(--bevel-edge-lo) var(--bevel-edge-lo) var(--bevel-edge-hi);background:var(--bevel-face);border-radius:0; }
+.qc-btn-primary { background:var(--bevel-ink);color:var(--bevel-ground); }
+@media(max-width:500px) {
+  .reference-stage { padding:18px; }
+  h1 { font-size:29px; }
+  .p-header { gap:12px; }
+  .p-columns { grid-template-columns:1fr; }
+  .p-panel { padding:18px; }
+  .p-scrim { padding:14px; }
+  .p-modal { padding:27px 22px; }
+  .p-modal h2 { font-size:27px; }
+  .p-drawer-ghost { display:none; }
+  .p-setting { gap:14px; }
+  .p-sidebar { width:145px; }
+  .p-sidebar-brand { padding:16px 10px; }
+  .p-app-content { padding:20px 13px; }
+  .p-nav-item { font-size:12px;gap:6px; }
+  .p-sidebar footer { padding:12px 9px; }
+  .p-wizard { grid-template-columns:1fr; }
+  .p-wizard-steps { display:flex;gap:12px;border-right:0;border-bottom:1px solid var(--bevel-line);padding:16px; }
+  .p-wizard-step { padding:0;gap:6px;flex:1; }
+  .p-wizard-step small { display:none; }
+  .p-wizard-step strong { font-size:10px; }
+  .p-wizard-body { padding:20px; }
+  .p-toast-stage { padding:12px; }
+  .p-banner>div { min-width:150px; }
+  .p-stat-grid { grid-template-columns:1fr; }
+  .p-stat+.p-stat { border-left:0;border-top:1px solid var(--bevel-line-2); }
+  .p-stat { padding:19px; }
+  .p-stat strong { margin:5px 0;font-size:28px; }
+  .p-stat-support { flex-direction:column;align-items:stretch; }
+  .p-stat-support .mini { width:100%; }
+  .p-diff-split { grid-template-columns:1fr; }
+  .p-diff-split section+section { border-left:0;border-top:1px solid var(--bevel-line-2); }
+  .p-filter-rule { grid-template-columns:1fr 1fr 33px; }
+  .p-filter-rule .p-rule-word { grid-column:1/-1; }
+  .p-filter-rule input { grid-column:1/3; }
+  .p-filter-rule .p-icon-button { grid-column:3;grid-row:2/4; }
+  .p-column-layout { grid-template-columns:1fr; }
+  .p-pane-detail { padding:18px 12px; }
+  .p-pane-detail h2 { font-size:23px; }
+  .p-pane-item { font-size:10px; }
+  .p-pane { padding:16px 9px; }
+  .p-kanban { grid-template-columns:1fr; }
+  .p-kanban-column { min-height:150px; }
+  .p-cms-context { grid-template-columns:1fr; }
+  .p-cms-page { display:none; }
+  .p-cms-context .hcms-shell { border-left:0; }
+  .p-crop-context { padding:10px; }
+  .p-richclay-demo .richclay-float { margin-left:0; }
+}
+
+.p-menu-area > .p-menu { margin-left:auto; }
+.p-menu-area > .p-menu + div { text-align:right; }
+.p-popconfirm { margin-left:auto; }

package/examples/components/reference/parent/build.py

@@ -0,0 +1,148 @@
+from pathlib import Path
+from bs4 import BeautifulSoup
+from copy import deepcopy
+import json
+import re
+import shutil
+from kanban import kanban, icon
+
+ROOT = Path(__file__).resolve().parent.parent
+HERE = ROOT / 'parent'
+MANIFEST = json.loads((ROOT / 'manifest.json').read_text())
+FEEDBACK = {a['key']: a for a in json.loads((ROOT / 'feedback.json').read_text())['answers']}
+CLOSE_SVG = re.search(r'const DEFAULT_CLOSE_SVG = `([^`]+)`', (ROOT / 'sources/hyperclayjs/src/ui/theModal.js').read_text()).group(1)
+(ROOT / 'sources/diagonal-close.svg').write_text(CLOSE_SVG + '\n')
+
+def fragment(html):
+    return BeautifulSoup(html, 'html.parser')
+
+def replace_contents(node, html):
+    node.clear()
+    for child in list(fragment(html).contents):
+        node.append(child)
+
+def append_html(node, html):
+    for child in list(fragment(html).contents):
+        node.append(child)
+
+def close_button(node):
+    node['class'] = ['r-diagonal-close']
+    node['aria-label'] = 'Close details'
+    replace_contents(node, 'EXACT_DIAGONAL_CLOSE_SVG')
+
+def correct(soup, component):
+    key = component['id']
+    if key == 'modal':
+        for node in soup.select('.micromodal__close'):
+            replace_contents(node, 'EXACT_DIAGONAL_CLOSE_SVG')
+    elif key == 'drawer':
+        for panel in soup.select('.drawer-panel'):
+            node = panel.select_one('header button')
+            close_button(node)
+            panel.insert(0, node.extract())
+    elif key == 'split-button':
+        original = {s['data-ref-state']:deepcopy(s) for s in soup.select('[data-ref-state]')}
+        for s in soup.select('[data-ref-state]'): s.decompose()
+        for state in component['states']:
+            base = 'disabled' if state == 'disabled' else 'open' if 'open' in state else 'default'
+            s = deepcopy(original[base]);s['data-ref-state']=state
+            group = s.select_one('.p-split-button')
+            divider = 'inset' if 'inset' in state else 'line'
+            group['data-divider'] = divider
+            for button in group.select('button'):
+                button['class']=[c for c in button.get('class',[]) if c != 'bevel-button--primary']
+            label=fragment(f'<p class="r-split-label">{"Slight inset bevel" if divider=="inset" else "Single dark divider"}</p>')
+            s.select_one('.p-panel').insert(0,label)
+            soup.body.append(s)
+    elif key == 'sidebar-nav':
+        for rail in soup.select('.p-sidebar'):
+            toggle=rail.select_one('.p-sidebar-toggle')
+            if toggle: toggle.decompose()
+            compact='compact' in rail.get('class',[])
+            arrow='M20 12H4m6-6-6 6 6 6' if not compact else 'M4 12h16m-6-6 6 6-6 6'
+            append_html(rail.select_one('.p-sidebar-brand'), f'<button class="p-icon-button r-collapse" aria-label="{"Expand" if compact else "Collapse"} sidebar"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="{arrow}"/></svg></button>')
+            footer=rail.select_one('footer');footer['class']=['r-identity']
+            replace_contents(footer,'<span class="r-avatar" aria-label="Jules Park">JP</span><span><strong>Jules Park</strong><small>Owner</small></span>')
+    elif key == 'app-toolbar':
+        for toolbar in soup.select('.toolbar'):
+            for node in toolbar.select('button'):
+                label=node.get('aria-label','New note')
+                name={'New note':'plus','List view':'list','Grid view':'grid','More toolbar actions':'more'}[label]
+                node['class']=[c for c in node.get('class',[]) if c!='bevel-button--primary']
+                node['aria-label']=label;node['title']=label
+                replace_contents(node,icon(name,18))
+    elif key == 'wizard-shell':
+        for s in soup.select('[data-ref-state]'):
+            for i,step in enumerate(s.select('.wizard-step')):
+                step.select_one('b').string=str(i+1).zfill(2)
+    elif key == 'inline-edit':
+        for s in soup.select('[data-ref-state]'):
+            state=s['data-ref-state']
+            if state in ['editing','error']:
+                value=s.select_one('[data-inline-value]')
+                value.find_parent('label').replace_with(fragment('<h2 class="r-inline-name richclay-inline richclay-active richclay-focused" data-richclay-active="true" data-richclay-options="singleLine" aria-invalid="'+('true' if state=='error' else 'false')+'">'+('<span class="r-placeholder">Project name</span>' if state=='error' else 'Field notes')+'</h2>'))
+                note=s.select_one('.note')
+                if note:note.string='Edit the title in place.'
+                for label in s.select('.actions .bevel-button__label'):
+                    if label.get_text()=='Save name':label.string='Done'
+    return soup
+
+def saved():
+    return '''<section data-ref-state="saved"><main class="r-saved-page"><header><span class="p-eyebrow">NORTHSTAR STUDIO / FIELD NOTES</span><span class="p-badge">Draft</span></header><article><span class="p-eyebrow">FIELD NOTE / 001</span><h1>A place for good work.</h1><p>Keep the useful things close. Field notes brings the documents, decisions and small details of a project into one place.</p><p>A little room to think. A clear place to begin.</p></article><span class="r-saved-chip" role="status">Saved</span></main></section>'''
+
+def html_shell(name, key, content):
+    return fragment(f'<!doctype html><html lang="en" class="light"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>{name} · Parent</title></head><body data-component="{key}">{content}</body></html>')
+
+def clean(soup, component, seat):
+    for script in soup.select('script'):script.decompose()
+    for css in soup.select('link[rel="stylesheet"]'):css.decompose()
+    for selector in ['[data-part="reference-note"]','.local-result','output','.modal-reopen']:
+        for node in soup.select(selector):node.decompose()
+    for node in soup.select('[contenteditable]'):del node['contenteditable']
+    for node in soup.select('[data-ref-next]'):del node['data-ref-next']
+    replacements={
+      'Local fixture pagination':'Invoice pagination',
+      'Invoices / Local cell editing':'Invoices / Amount',
+      'Press Save to update this local example.':'Edit the title in place.',
+      'Invitations are simulated and are never sent.':'Only invited people can join this workspace.',
+      'Authored Richclay structure. Formatting controls simulate selected states; this is not an editing engine.':'',
+      'Choose the amount on INV-0432 to edit it here.':'Invoice amounts can be edited in place.',
+      'Expand folders or select a file. Reparenting is not enabled in this reference.':'',
+      'Working keyboard and range resizing · the grip is a visual reference':'',
+    }
+    for t in soup.find_all(string=True):
+        for old,new in replacements.items():
+            if old in str(t):t.replace_with(str(t).replace(old,new));break
+    for node in soup.select('.p-caption'):
+        if any(x in node.get_text().lower() for x in ['working','simulated','reference','local','supplied']):node.decompose()
+    for i,s in enumerate(soup.select('[data-ref-state]')):
+        s['inert']=''
+        if i:s['hidden']=''
+        elif s.has_attr('hidden'):del s['hidden']
+    soup.body['data-component']=component['id']
+    soup.body['data-reference-phase']='static'
+    soup.body['data-selected-source']=seat
+    soup.title.string=f"{component['name']} · Parent corrected · Bevel"
+    for href in ['../../baseline/bevel-fonts.css','../../baseline/bevel.css',f'../base-{seat}.css','../refinement.css']:
+        append_html(soup.head,f'<link rel="stylesheet" href="{href}">')
+    if component['id']=='kanban-board':append_html(soup.head,'<link rel="stylesheet" href="../kanban.css">')
+    append_html(soup.body,'<footer class="r-static-note">Static UI reference · Use the preview controls to compare states.</footer><script src="../../fixtures/static-host.js"></script>')
+    result=str(soup).replace('viewbox=','viewBox=').replace('preserveaspectratio=','preserveAspectRatio=').replace('gradientunits=','gradientUnits=').replace('markerwidth=','markerWidth=').replace('markerheight=','markerHeight=')
+    return result.replace('EXACT_DIAGONAL_CLOSE_SVG',CLOSE_SVG)
+
+for seat in ['parent','astra']:
+    shutil.copy2(ROOT/'originals'/seat/'reference.css',HERE/f'base-{seat}.css')
+coverage={'seat':'parent','phase':'static','components':[],'contexts':[]}
+for c in MANIFEST['components']+MANIFEST['contexts']:
+    key=c['id'];a=FEEDBACK.get(key)
+    seat=a['picked'][0] if a else ('astra' if key=='context-hypercms' else 'parent')
+    if seat=='iterate':seat='parent'
+    if key=='save-status-indicator':soup=html_shell(c['name'],key,saved())
+    elif key=='kanban-board':soup=html_shell(c['name'],key,''.join(f'<section data-ref-state="{s}">{kanban(s)}</section>' for s in c['states']))
+    else:soup=correct(fragment((ROOT/'originals'/seat/'components'/f'{key}.html').read_text()),c)
+    (HERE/'components'/f'{key}.html').write_text(clean(soup,c,seat))
+    coverage['components' if a else 'contexts'].append({'id':key,'states':c['states'],'source':seat if a and a['picked'][0]!='iterate' else 'new iteration','file':f'components/{key}.html','behavior':'static','feedback':a['comment'] if a else ''})
+(HERE/'coverage.json').write_text(json.dumps(coverage,indent=2)+'\n')
+links=''.join(f'<a href="components/{c["id"]}.html">{c["name"]}<small>{len(c["states"])} visual states</small></a>' for c in MANIFEST['components'])
+(HERE/'index.html').write_text('<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Parent corrected UI · Bevel</title><link rel="stylesheet" href="../baseline/bevel-fonts.css"><link rel="stylesheet" href="../baseline/bevel.css"><style>body{max-width:1000px;margin:40px auto;padding:24px;font:16px var(--bevel-font-sans)}h1{font:42px var(--bevel-font-serif)}nav{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:10px}a{border:1px solid var(--bevel-line-2);padding:16px;color:var(--bevel-ink);text-decoration:none}small{display:block;color:var(--bevel-muted);font:11px var(--bevel-font-mono);margin-top:8px}</style><h1>Bevel, shaped by your choices.</h1><p>33 corrected static components. Application behavior comes after visual selection.</p><nav>'+links+'</nav></html>')
+print('Parent: 33 static components, 2 preserved product contexts, '+str(sum(len(c['states']) for c in MANIFEST['components']))+' component states.')

package/examples/components/reference/parent/components/activity-feed.html

@@ -0,0 +1,2 @@
+<!DOCTYPE html>
+<html data-theme="light" lang="en"><head><meta charset="utf-8"/><meta content="width=device-width,initial-scale=1" name="viewport"/><title>Activity feed · Parent corrected · Bevel</title><link href="../../baseline/bevel-fonts.css" rel="stylesheet"/><link href="../../baseline/bevel.css" rel="stylesheet"/><link href="../base-astra.css" rel="stylesheet"/><link href="../refinement.css" rel="stylesheet"/></head><body data-component="activity-feed" data-reference-phase="static" data-selected-source="astra"><section data-ref-state="recent" inert=""><div class="specimen"><header data-part="heading"><div class="eyebrow">NORTHSTAR STUDIO / FIELD NOTES</div><h1>The work, as it happens.</h1><p>Small changes add up to something good.</p></header><div class="eyebrow">TODAY / SEPTEMBER 07</div><div class="timeline"><article class="event"><span class="avatar">MC</span><p><strong>Mira Chen</strong> updated <strong>A place for good work</strong></p><time>10:42</time><p class="muted" style="font-size:12px;margin-top:8px">Clarified the introduction and added the field guide.</p></article><article class="event"><span class="avatar">AR</span><p><strong>Alex Rivera</strong> joined <strong>Field notes</strong></p><time>10:18</time><p class="muted" style="font-size:12px;margin-top:8px">Invited by Jules Park.</p></article><article class="event"><span class="avatar">SP</span><p><strong>Sam Patel</strong> added <strong>workspace.jpg</strong></p><time>09:56</time><p class="muted" style="font-size:12px;margin-top:8px">Project cover · 184 KB</p></article></div><button class="bevel-button bevel-button--quiet" type="button"><span class="bevel-button__label">Show yesterday</span></button></div></section><section data-ref-state="expanded" hidden="" inert=""><div class="specimen"><header data-part="heading"><div class="eyebrow">NORTHSTAR STUDIO / FIELD NOTES</div><h1>The work, as it happens.</h1><p>Small changes add up to something good.</p></header><div class="eyebrow">TODAY / SEPTEMBER 07</div><div class="timeline"><article class="event"><span class="avatar">MC</span><p><strong>Mira Chen</strong> updated <strong>A place for good work</strong></p><time>10:42</time><p class="muted" style="font-size:12px;margin-top:8px">Clarified the introduction and added the field guide.</p></article><article class="event"><span class="avatar">AR</span><p><strong>Alex Rivera</strong> joined <strong>Field notes</strong></p><time>10:18</time><p class="muted" style="font-size:12px;margin-top:8px">Invited by Jules Park.</p></article><article class="event"><span class="avatar">SP</span><p><strong>Sam Patel</strong> added <strong>workspace.jpg</strong></p><time>09:56</time><p class="muted" style="font-size:12px;margin-top:8px">Project cover · 184 KB</p></article></div><div class="eyebrow">YESTERDAY / SEPTEMBER 06</div><div class="timeline"><article class="event"><span class="avatar alt">JP</span><p><strong>Jules Park</strong> created <strong>Field notes</strong></p><time>16:32</time></article></div></div></section><footer class="r-static-note">Static UI reference · Use the preview controls to compare states.</footer><script src="../../fixtures/static-host.js"></script></body></html>

package/examples/components/reference/parent/components/app-toolbar.html

@@ -0,0 +1,2 @@
+<!DOCTYPE html>
+<html data-theme="light" lang="en"><head><meta charset="utf-8"/><meta content="width=device-width,initial-scale=1" name="viewport"/><title>App toolbar · Parent corrected · Bevel</title><link href="../../baseline/bevel-fonts.css" rel="stylesheet"/><link href="../../baseline/bevel.css" rel="stylesheet"/><link href="../base-astra.css" rel="stylesheet"/><link href="../refinement.css" rel="stylesheet"/></head><body data-component="app-toolbar" data-reference-phase="static" data-selected-source="astra"><section data-ref-state="default" inert=""><div class="specimen"><header data-part="heading"><div class="eyebrow">NORTHSTAR STUDIO / FIELD NOTES</div><h1>The tools, close at hand.</h1><p>Field notes / Documents</p></header><div class="toolbar" data-part="toolbar"><button aria-label="New note" class="bevel-button" data-action="New note prepared locally." title="New note" type="button"><svg aria-hidden="true" fill="none" height="18" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="18"><path d="M12 5v14M5 12h14"></path></svg></button><span class="toolbar-sep"></span><button aria-label="List view" aria-pressed="true" class="bevel-button" data-toggle="" title="List view" type="button"><svg aria-hidden="true" fill="none" height="18" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="18"><path d="M8 5h13M8 12h13M8 19h13M3 5h1M3 12h1M3 19h1"></path></svg></button><button aria-label="Grid view" aria-pressed="false" class="bevel-button" data-toggle="" title="Grid view" type="button"><svg aria-hidden="true" fill="none" height="18" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="18"><path d="M3 3h7v7H3ZM14 3h7v7h-7ZM3 14h7v7H3ZM14 14h7v7h-7Z"></path></svg></button><div class="spacer"></div><input aria-label="Search notes" class="bevel-input bevel-input--small" placeholder="Search notes…" type="search"/><button aria-label="More toolbar actions" class="bevel-button" title="More toolbar actions" type="button"><svg aria-hidden="true" fill="none" height="18" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="18"><path d="M5 12h1m5 0h1m5 0h1"></path></svg></button></div><div class="rule row between"><strong>All documents</strong><span class="mono muted" style="font-size:11px">12 NOTES</span></div><div class="listrow"><span>▤</span><div><strong>A place for good work</strong><br/><small>Mira Chen · Edited today</small></div></div><div class="listrow"><span>▤</span><div><strong>The field guide</strong><br/><small>Sam Patel · Edited yesterday</small></div></div></div></section><section data-ref-state="overflow" hidden="" inert=""><div class="specimen"><header data-part="heading"><div class="eyebrow">NORTHSTAR STUDIO / FIELD NOTES</div><h1>The tools, close at hand.</h1><p>Field notes / Documents</p></header><div class="toolbar" data-part="toolbar"><button aria-label="New note" class="bevel-button" data-action="New note prepared locally." title="New note" type="button"><svg aria-hidden="true" fill="none" height="18" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="18"><path d="M12 5v14M5 12h14"></path></svg></button><span class="toolbar-sep"></span><button aria-label="List view" aria-pressed="true" class="bevel-button" data-toggle="" title="List view" type="button"><svg aria-hidden="true" fill="none" height="18" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="18"><path d="M8 5h13M8 12h13M8 19h13M3 5h1M3 12h1M3 19h1"></path></svg></button><button aria-label="Grid view" aria-pressed="false" class="bevel-button" data-toggle="" title="Grid view" type="button"><svg aria-hidden="true" fill="none" height="18" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="18"><path d="M3 3h7v7H3ZM14 3h7v7h-7ZM3 14h7v7H3ZM14 14h7v7h-7Z"></path></svg></button><div class="spacer"></div><input aria-label="Search notes" class="bevel-input bevel-input--small" placeholder="Search notes…" type="search"/><button aria-label="More toolbar actions" class="bevel-button" title="More toolbar actions" type="button"><svg aria-hidden="true" fill="none" height="18" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="18"><path d="M5 12h1m5 0h1m5 0h1"></path></svg></button></div><div style="display:flex;justify-content:flex-end;margin-top:6px"><div class="menu"><button data-action="Sort by last edited selected locally">Sort by last edited</button><button data-action="Show archived selected locally">Show archived</button><button data-action="Export selection selected locally">Export selection</button></div></div></div></section><footer class="r-static-note">Static UI reference · Use the preview controls to compare states.</footer><script src="../../fixtures/static-host.js"></script></body></html>