@panphora/bevel 0.1.0

package/examples/components/reference/fable/as-authored/build.py

@@ -0,0 +1,858 @@
+"""Fable seat build. Reads the parent's corrected static components (read-only
+input), applies Fable's structural refinements with BeautifulSoup, links
+fable.css, and writes components/, index.html and coverage.json.
+
+    python3 build.py
+"""
+from pathlib import Path
+from bs4 import BeautifulSoup
+import json
+from kanban import kanban, icon, avatar, button
+
+ROOT = Path(__file__).resolve().parent.parent
+HERE = ROOT / 'fable'
+PARENT = ROOT / 'parent' / 'components'
+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 = (ROOT / 'sources/diagonal-close.svg').read_text().strip()
+CLOSE_TOKEN = 'EXACT_DIAGONAL_CLOSE_SVG'
+
+
+def frag(html):
+    return BeautifulSoup(html, 'html.parser')
+
+
+def replace_contents(node, html):
+    node.clear()
+    for child in list(frag(html).contents):
+        node.append(child)
+
+
+def replace_with(node, html):
+    new = list(frag(html).contents)
+    for child in new:
+        node.insert_before(child)
+    node.decompose()
+
+
+def append_html(node, html):
+    for child in list(frag(html).contents):
+        node.append(child)
+
+
+def prepend_html(node, html):
+    for child in reversed(list(frag(html).contents)):
+        node.insert(0, child)
+
+
+def set_label(btn, text):
+    span = btn.select_one('.bevel-button__label')
+    if span: span.string = text
+
+
+def icon_button(name, label, extra='', size=16, pressed=None):
+    p = f' aria-pressed="{pressed}"' if pressed is not None else ''
+    return f'<button type="button" class="f-icon-button {extra}" aria-label="{label}" title="{label}"{p}>{icon(name, size)}</button>'
+
+
+INVOICE_ROWS = [('INV-0431', 'Juniper Health', '$1,240.00', 'Paid', 'good'), ('INV-0432', 'Northstar Studio', '$3,200.00', 'Overdue', 'bad'),
+                ('INV-0433', 'Maple House', '$860.00', 'Sent', ''), ('INV-0434', 'Juniper Health', '$410.00', 'Due soon', '')]
+
+
+def invoice_table(amount_cell=None):
+    rows = ''
+    for inv, client, amount, status, tone in INVOICE_ROWS:
+        cell = amount_cell if (amount_cell and inv == 'INV-0432') else f'<td class="numeric">{amount}</td>'
+        rows += f'<tr><td class="mono">{inv}</td><td>{client}</td>{cell}<td><span class="badge {tone}">{status}</span></td></tr>'
+    return f'<div class="table-scroll"><table><thead><tr><th>Invoice</th><th>Client</th><th style="text-align:right">Amount</th><th>Status</th></tr></thead><tbody>{rows}</tbody></table></div>'
+
+
+CODE_LINES = [
+    '<span class="tk-tag">&lt;article</span> <span class="tk-attr">class</span>=<span class="tk-str">"field-note"</span><span class="tk-tag">&gt;</span>',
+    '  <span class="tk-tag">&lt;h1&gt;</span>A place for good work<span class="tk-tag">&lt;/h1&gt;</span>',
+    '  <span class="tk-tag">&lt;p</span> <span class="tk-attr">data-description</span>=<span class="tk-str">"Documents, decisions and the small details that make a project feel like home"</span><span class="tk-tag">&gt;</span>Keep the useful things close.<span class="tk-tag">&lt;/p&gt;</span>',
+    '<span class="tk-tag">&lt;/article&gt;</span>',
+]
+
+
+def refine(soup, key):
+    states = {s['data-ref-state']: s for s in soup.select('[data-ref-state]')}
+
+    if key == 'modal':
+        for node in soup.select('.micromodal__close'):
+            replace_contents(node, CLOSE_TOKEN)
+        for h in soup.select('.micromodal__container .well'):
+            replace_with(h, f'<div class="f-archive-card">{icon("doc", 22)}<div><strong>Field notes</strong><small>12 documents · 4 collaborators · last edited today</small></div><span class="badge">Active</span></div>')
+        for sc in soup.select('.scroll-copy'):
+            sc['class'] = ['scroll-copy', 'f-scroll-copy']
+            sc.insert_after(frag('<div class="f-scroll-hint">Scroll to read the rest</div>'))
+
+    elif key == 'popover-menu':
+        for btn in soup.select('.anchor-stage .row > button'):
+            replace_with(btn, icon_button('more', 'Project actions', 'f-menu-trigger', 18) .replace('<button ', f'<button aria-expanded="{btn.get("aria-expanded","false")}" '))
+        names = {'Open project': 'external', 'Rename': 'pencil', 'Duplicate': 'copy', 'Move to workspace': 'arrow', 'Archive project': 'archive'}
+        for item in soup.select('.menu button'):
+            glyph = item.select_one('span')
+            text = ''.join(t for t in item.find_all(string=True, recursive=False)).strip()
+            if glyph: replace_contents(glyph, icon(names.get(text, 'doc'), 15))
+            kbd = item.select_one('kbd')
+            if kbd and not kbd.get_text().strip(): kbd.decompose()
+        for menu in soup.select('.menu'):
+            title = menu.select_one('.menu-title')
+            if title: title.string = 'Field notes · Project'
+        for st in soup.select('[data-ref-state="closed"] .anchor-stage'):
+            append_html(st, '<p class="f-anchor-note">Press the actions button to open the project menu.</p>')
+
+    elif key == 'drawer':
+        for panel in soup.select('.drawer-panel'):
+            close = panel.select_one('.r-diagonal-close')
+            replace_contents(close, CLOSE_TOKEN)
+            amount_row = panel.select_one('header .row.between[style]')
+            if amount_row:
+                del amount_row['style']
+                amount_row['class'] = ['f-drawer-amount']
+        for dl in soup.select('.detail-grid'):
+            dl['class'] = ['detail-grid', 'f-detail-grid']
+        for under in soup.select('.drawer-underlay'):
+            replace_contents(under, '<div class="eyebrow">Workspace</div><h2>Invoices</h2><p class="note">4 records · Northstar Studio</p>'
+                             '<div class="f-underlay-row"><span class="mono">INV-0431</span><span>Juniper Health</span></div>'
+                             '<div class="f-underlay-row is-open"><span class="mono">INV-0432</span><span>Northstar Studio</span></div>'
+                             '<div class="f-underlay-row"><span class="mono">INV-0433</span><span>Maple House</span></div>'
+                             '<div class="f-underlay-row"><span class="mono">INV-0434</span><span>Juniper Health</span></div>')
+        for h3 in soup.select('.drawer-panel main h3'):
+            replace_with(h3, '<div class="eyebrow">Activity</div>')
+        closed = states['closed']
+        btn = closed.select_one('.specimen > .bevel-button')
+        if btn:
+            replace_with(btn, f'<div class="rule row between wrap"><small>Choose a record to open its details.</small>{button("View INV-0432", "external")}</div>')
+
+    elif key == 'popconfirm':
+        for st, sec in states.items():
+            trigger = sec.select_one('.p-between .p-icon-button')
+            if trigger:
+                replace_with(trigger, icon_button('trash', 'Remove document', 'f-popconfirm-trigger', 17).replace('<button ', f'<button aria-expanded="{"true" if st == "open" else "false"}" '))
+        for pc in soup.select('.p-popconfirm'):
+            head = pc.select_one('.p-row')
+            head['class'] = ['f-popconfirm-head']
+            svg = head.select_one('svg')
+            if svg: replace_with(svg, icon('warning', 18))
+            set_label(pc.select_one('.bevel-button--danger'), 'Remove')
+        for row in soup.select('[data-ref-state="confirmed"] .p-row[style]'):
+            replace_with(row, f'<div class="f-status-line good">{icon("check", 16)}<span><strong>Document moved to the archive.</strong> Field notes is no longer in this project.</span>{button("Undo", None, "bevel-button--small")}</div>')
+        for p in soup.select('[data-ref-state="closed"] p[style]'):
+            replace_with(p, '<div class="f-status-line"><span>Everything is up to date.</span></div>')
+
+    elif key == 'combobox':
+        colors = {'MC': 'MC', 'AR': 'AR', 'SP': 'SP', 'JP': 'JP'}
+        for opt in soup.select('.p-option'):
+            av = opt.select_one('.p-avatar')
+            if av:
+                av['class'] = ['f-avatar', 'small']
+                av['data-who'] = av.get_text().strip()
+        for opt in soup.select('[data-ref-state="filtered"] .p-option:not([hidden]) strong'):
+            opt.string = ''
+            append_html(opt, '<mark>Mi</mark>ra Chen')
+        for search in soup.select('.p-search'):
+            btn = search.select_one('.p-icon-button')
+            expanded = search.select_one('input').get('aria-expanded', 'false')
+            replace_with(btn, icon_button('chevron', 'Open choices', 'f-combo-toggle', 15).replace('<button ', f'<button aria-expanded="{expanded}" '))
+            search['class'] = ['p-search', 'f-search']
+            if expanded == 'true': search['class'].append('is-open')
+        closed = states['closed'].select_one('.f-search')
+        closed.select_one('svg').replace_with(frag(avatar('MC', 'small')))
+        for e in soup.select('.p-empty'):
+            e['class'] = ['p-empty', 'f-empty']
+            prepend_html(e, icon('search', 22))
+            e.select_one('p').string = 'No member matches “Taylor”. Check the spelling or invite them.'
+        for foot in soup.select('.p-picker-foot'):
+            foot.string = '4 members in Northstar Studio · ↑↓ to move, ↵ to choose'
+
+    elif key == 'multi-select-picker':
+        tone = {'Design': 'design', 'Editorial': 'editorial', 'Engineering': 'engineering', 'Research': 'research'}
+        for tag in soup.select('.p-tag'):
+            tag['class'] = ['p-tag', 'f-tag']
+            tag['data-label'] = tone[tag['data-tag']]
+            btn = tag.select_one('button')
+            svg = btn.select_one('svg')
+            if svg: replace_with(svg, icon('close', 11))
+        for opt in soup.select('.p-option'):
+            lbl = opt.select_one('.bevel-checkbox')
+            name = lbl.select_one('span:last-child').get_text()
+            lbl.select_one('span:last-child').insert_before(frag(f'<i class="f-label-dot" data-label="{tone[name]}"></i>'))
+        for act in soup.select('[data-ref-state="selected"] .p-actions'):
+            act.decompose()
+        for panel in soup.select('.p-panel[style]'):
+            panel['class'] = ['f-tag-field']
+            del panel['style']
+        for sec_key in ['open', 'empty']:
+            field = states[sec_key].select_one('.f-tag-field')
+            field['class'].append('is-open')
+        for wrap in soup.select('.f-tag-field + div:not([hidden])'):
+            wrap['class'] = ['f-tag-popover']
+        for ph in soup.select('[data-tag-placeholder]'):
+            ph.string = 'Type to find a label'
+        for e in soup.select('[data-ref-state="empty"] .p-empty'):
+            e['class'] = ['p-empty', 'f-empty']
+            e.select_one('h3').string = 'No label called “Finance”'
+            e.select_one('p').string = 'Try Design, Editorial or Research, or make a new one.'
+            append_html(e, button('Create “Finance”', 'plus', 'bevel-button--small'))
+        for foot in soup.select('.p-picker-foot'):
+            n = foot.select_one('[data-tag-count]').get_text()
+            foot.string = ''
+            append_html(foot, f'<span data-tag-count="">{n}</span> of 4 labels selected')
+
+    elif key == 'selectable-cards':
+        for ch in soup.select('.choice'):
+            badge = ch.select_one('.badge')
+            if badge and badge.get_text().strip() == 'Recommended': badge['class'] = ['badge', 'accent']
+            if badge and badge.get_text().strip() == 'Unavailable':
+                prepend_html(badge, icon('lock', 10))
+        for st in soup.select('[data-ref-state="checkbox"] .specimen > header p'):
+            st.string = 'Bring the right disciplines into the conversation. Choose as many as you need.'
+
+    elif key == 'upload-dropzone':
+        for dz in soup.select('.p-dropzone'):
+            svg = dz.select_one(':scope > svg')
+            if svg: replace_with(svg, icon('upload', 26))
+        for sec in ['queue', 'error', 'crop']:
+            dz = states[sec].select_one('.p-dropzone')
+            dz['class'] = ['p-dropzone', 'is-compact']
+        for row in soup.select('.p-upload-row'):
+            row['class'] = ['p-upload-row', 'f-upload-row']
+            svg = row.select_one(':scope > svg')
+            if svg and svg.get('height') == '26': replace_with(svg, f'<span class="f-file-icon">{icon("doc", 20)}</span>')
+            check = row.select_one(':scope > svg[height="18"]')
+            if check: replace_with(check, f'<span class="f-file-state good">{icon("check", 14)}Ready</span>')
+            pct = row.select_one('.p-badge')
+            if pct: pct['class'] = ['f-file-pct']
+            retry = row.select_one('.bevel-button')
+            if retry:
+                replace_with(retry, f'<span class="f-file-actions"><span class="f-file-state bad">{icon("warning", 14)}Failed</span>{button("Retry", "undo", "bevel-button--small")}</span>')
+                row.select_one('p').string = '184 KB · The connection dropped at 68%'
+        for st in states['queue'].select('.p-upload-row p'):
+            if 'Uploading' in st.get_text(): st.string = '184 KB · Uploading'
+        crop_head = states['crop'].select_one('.p-between[style]')
+        if crop_head:
+            del crop_head['style']
+            crop_head['class'] = ['p-between', 'f-crop-head']
+            crop_head.select_one('.p-badge').string = '1:1 · 800 × 800'
+        for act in states['crop'].select('.p-actions'):
+            set_label(act.select_one('.bevel-button--primary'), 'Use this crop')
+            set_label(act.select_one('.bevel-button:not(.bevel-button--primary)'), 'Cancel')
+
+    elif key == 'inline-edit':
+        for wrap in soup.select('.specimen > div[style]'):
+            del wrap['style']
+            wrap['class'] = ['f-inline-wrap']
+        for sec in ['editing', 'error']:
+            h2 = states[sec].select_one('.r-inline-name')
+            h2.insert_before(frag('<div class="f-inline-hint"><span class="eyebrow">Project name</span><span class="f-keys"><kbd>↵</kbd> save <kbd>esc</kbd> cancel</span></div>'))
+            states[sec].select_one('.f-inline-wrap > .eyebrow').decompose()
+            note = states[sec].select_one('.note')
+            if note: note.decompose()
+        err = states['error'].select_one('p.bad')
+        if err:
+            replace_with(err, f'<p class="f-field-error">{icon("warning", 13)}Give this project a name before saving.</p>')
+        saved = states['saved'].select_one('.note')
+        if saved:
+            replace_with(saved, f'<p class="f-status-line good f-inline-saved">{icon("check", 14)}<span>Saved at 10:42</span></p>')
+        for st in soup.select('[data-ref-state="resting"] .note'):
+            st.string = 'The name appears on every document in the project.'
+
+    elif key == 'settings-rows':
+        for s in soup.select('.setting'):
+            s['class'] = ['setting', 'f-setting']
+        for note in soup.select('[data-ref-state="disabled"] .note'):
+            replace_with(note, f'<p class="f-status-line f-locked">{icon("lock", 14)}<span>Only the workspace owner can change these settings.</span></p>')
+        for sd in soup.select('.settings-disabled'):
+            sd['class'] = ['settings-disabled', 'f-settings-disabled']
+
+    elif key == 'form-error-summary':
+        errors = states['errors']
+        notice = errors.select_one('.notice.error')
+        notice['class'] = ['notice', 'error', 'f-error-summary']
+        prepend_html(notice, icon('warning', 18))
+        ul = notice.select_one('ul')
+        del ul['style']
+        stack = errors.select_one('.stack[style]')
+        replace_contents(stack, f'''<label class="field f-field is-invalid">Project name<input aria-invalid="true" class="bevel-input" id="e-name" value="" placeholder="e.g. Field notes"><small class="f-field-error">{icon("warning", 13)}A project name is required.</small></label>
+<label class="field f-field is-invalid">Invite a collaborator<input aria-invalid="true" class="bevel-input" id="e-email" value="mira@"><small class="f-field-error">{icon("warning", 13)}Enter an address like mira@example.test.</small></label>''')
+        del stack['style']
+        for act in soup.select('.actions'):
+            replace_contents(act, button('Cancel') + button('Create project', None, 'bevel-button--primary'))
+        corrected = states['corrected']
+        notice = corrected.select_one('.notice.success')
+        notice['class'] = ['notice', 'success', 'f-error-summary']
+        replace_contents(notice, f'{icon("check", 18)}<div><strong>Everything looks good.</strong><span>Both fields are complete. Your project is ready to create.</span></div>')
+        stack = corrected.select_one('.stack[style]')
+        del stack['style']
+        stack['class'] = ['stack', 'f-form-stack']
+        for lb in stack.select('label.field'): lb['class'] = ['field', 'f-field']
+
+    elif key == 'split-button':
+        for group in soup.select('.p-split-button'):
+            main = group.select_one('.bevel-button')
+            main['class'] = ['bevel-button']
+            prepend_html(main.select_one('.bevel-button__label'), icon('doc', 15))
+            caret = group.select_one('.p-icon-button')
+            caret['class'] = ['f-split-caret']
+            svg = caret.select_one('svg')
+            replace_with(svg, icon('chevron', 15))
+            sec = group.find_parent('section')
+            if 'open' in sec['data-ref-state']:
+                caret['aria-expanded'] = 'true'
+        for menu in soup.select('.p-menu'):
+            del menu['style']
+            menu['class'] = ['p-menu', 'f-split-menu']
+            names = ['pdf', 'html', 'markdown']
+            for i, item in enumerate(menu.select('button')):
+                svg = item.select_one('svg')
+                replace_with(svg, icon('doc', 16))
+                if item.select_one('svg + span + svg'):
+                    replace_with(item.select_one('svg + span + svg'), icon('check', 14))
+                    item['aria-checked'] = 'true'
+        for lab in soup.select('.r-split-label'):
+            text = lab.get_text()
+            lab.string = ''
+            append_html(lab, f'<span class="f-variant">{"A" if "dark" in text else "B"}</span>{text}')
+        for p in soup.select('.p-panel > p.p-small[style]'):
+            del p['style']
+            p['class'] = ['p-small', 'p-muted', 'f-split-note']
+
+    elif key == 'sidebar-nav':
+        for rail in soup.select('.p-sidebar'):
+            compact = 'compact' in rail.get('class', [])
+            btn = rail.select_one('.r-collapse')
+            replace_with(btn, icon_button('collapse-right' if compact else 'collapse-left', 'Expand sidebar' if compact else 'Collapse sidebar', 'r-collapse', 15))
+            av = rail.select_one('.r-avatar')
+            av['class'] = ['f-avatar']
+            av['data-who'] = 'JP'
+            foot = rail.select_one('footer.r-identity')
+            append_html(foot, f'<button type="button" class="f-identity-more" aria-label="Account menu">{icon("chevron", 13)}</button>')
+        for item in soup.select('.p-nav-item'):
+            small = item.select_one('small')
+            if small: small['class'] = ['f-count']
+        for content in soup.select('.p-app-content'):
+            p = content.select_one('p[style]')
+            if p: del p['style']
+            for row in content.select('.p-document-row'):
+                row['class'] = ['p-document-row', 'f-doc-row']
+                svg = row.select_one(':scope > svg:last-child')
+                if svg: replace_with(svg, icon('chevron-right', 13))
+
+    elif key == 'app-toolbar':
+        for toolbar in soup.select('.toolbar'):
+            toolbar['class'] = ['toolbar', 'f-toolbar']
+            for sep in toolbar.select('.toolbar-sep'): sep.decompose()
+            btns = toolbar.select('button')
+            groups = {'New note': ('plus', 'f-toolbar-new'), 'List view': ('list', ''), 'Grid view': ('board', ''), 'More toolbar actions': ('more', 'f-toolbar-more')}
+            new_html = ''
+            seg = ''
+            for b in btns:
+                label = b.get('aria-label')
+                name, extra = groups[label]
+                pressed = b.get('aria-pressed')
+                html = icon_button(name, label, extra, 17, pressed)
+                if label in ('List view', 'Grid view'):
+                    seg += html
+                elif label == 'New note':
+                    new_html += html
+            search = toolbar.select_one('input')
+            search_html = f'<label class="f-toolbar-search">{icon("search", 15)}<input type="search" class="bevel-input bevel-input--small" placeholder="Search notes" aria-label="Search notes"><kbd>/</kbd></label>'
+            expanded = 'true' if toolbar.find_parent('section')['data-ref-state'] == 'overflow' else 'false'
+            more_html = icon_button('more', 'More actions', 'f-toolbar-more', 17).replace('<button ', f'<button aria-expanded="{expanded}" ')
+            replace_contents(toolbar, f'{new_html}<span class="f-toolbar-sep"></span><div class="bevel-seg f-toolbar-seg" role="group" aria-label="Layout">{seg}</div><span class="f-toolbar-sep"></span>{button("Filter", "filter")}<span class="spacer"></span>{search_html}{more_html}')
+        for row in soup.select('.listrow'):
+            glyph = row.select_one(':scope > span')
+            if glyph: replace_with(glyph, f'<span class="f-file-icon">{icon("doc", 18)}</span>')
+        for menu in soup.select('[data-ref-state="overflow"] .menu'):
+            menu['class'] = ['menu', 'f-overflow-menu']
+            icons = ['sort', 'archive', 'share']
+            for i, item in enumerate(menu.select('button')):
+                text = item.get_text()
+                replace_contents(item, f'<span>{icon(icons[i], 15)}</span>{text}')
+            wrap = menu.parent
+            if wrap.get('style'):
+                del wrap['style']
+                wrap['class'] = ['f-overflow-anchor']
+
+    elif key == 'breadcrumbs':
+        for nav in soup.select('.breadcrumb'):
+            nav['class'] = ['breadcrumb', 'f-breadcrumb']
+            links = nav.select('a')
+            for sep in nav.select('span[aria-hidden]'):
+                replace_contents(sep, icon('chevron-right', 12))
+            if len(links) > 3:
+                for a in links[1:-1]:
+                    a['class'] = ['f-crumb-mid']
+                    sep = a.find_next_sibling('span')
+                    if sep: sep['class'] = ['f-crumb-mid']
+                links[0].find_next_sibling('span').insert_after(frag(f'<button type="button" class="f-crumb-more" aria-label="Show full path">…</button><span aria-hidden="true" class="f-crumb-more-sep">{icon("chevron-right", 12)}</span>'))
+        for row in soup.select('.rule.row'):
+            av = row.select_one('.avatar')
+            av['class'] = ['f-avatar']
+            av['data-who'] = 'MC'
+
+    elif key == 'pagination':
+        for nav in soup.select('.pagination'):
+            nav['class'] = ['pagination', 'f-pagination']
+            for b in nav.select('button'):
+                lab = b.get('aria-label', '')
+                if lab == 'Previous page': replace_contents(b, icon('chevron-left', 15))
+                elif lab == 'Next page': replace_contents(b, icon('chevron-right', 15))
+            for gap in nav.select('span.muted'):
+                del gap['style']
+                gap['class'] = ['f-page-gap']
+        for note in soup.select('.note'):
+            note.string = note.get_text().split('·')[0].strip()
+        for row in soup.select('.rule.row.between.wrap'):
+            row['class'] = ['rule', 'row', 'between', 'wrap', 'f-pager-row']
+
+    elif key == 'tree-view':
+        for summ in soup.select('.p-tree summary'):
+            svg = summ.select_one('svg')
+            replace_with(svg, f'<i class="f-tree-caret">{icon("chevron-right", 12)}</i>{icon("folder", 16)}')
+        for leaf in soup.select('.p-tree-leaf'):
+            svg = leaf.select_one('svg')
+            replace_with(svg, icon('doc', 15))
+        for badge in soup.select('.p-tree .p-badge'):
+            if badge.get_text().strip() == 'Open': badge['class'] = ['p-badge', 'f-tree-open']
+        for empty in soup.select('.p-tree-empty'):
+            replace_contents(empty, f'{icon("folder", 14)}No documents here yet.')
+        for head in soup.select('.p-tree-head .p-badge'):
+            head.string = '12 files · 4 folders'
+
+    elif key == 'wizard-shell':
+        for st, sec in states.items():
+            steps = sec.select('.wizard-step')
+            for i, step in enumerate(steps):
+                b = step.select_one('b')
+                small = step.select_one('small')
+                label = small.get_text().strip() if small else ''
+                state = 'done' if label == 'Complete' else 'current' if label == 'Current step' else 'next'
+                step['data-step'] = state
+                step['class'] = ['wizard-step'] + (['current'] if state == 'current' else [])
+                if state == 'done':
+                    replace_contents(b, icon('check', 13))
+                    b['aria-label'] = f'Step {i+1} complete'
+                if small:
+                    del small['style']
+                    small['class'] = ['f-step-note']
+            wz = sec.select_one('.wizard')
+            wz['class'] = ['wizard', 'f-wizard']
+        for p in soup.select('.wizard p.muted[style]'):
+            del p['style']
+            p['class'] = ['muted', 'f-wizard-lede']
+        for sel in soup.select('.wizard div[style="margin-top:16px"]'):
+            del sel['style']
+            replace_with(sel, f'<label class="field" style="margin-top:16px">Role{str(sel.select_one(".bevel-select"))}</label>')
+        err = states['error'].select_one('p.bad')
+        if err: replace_with(err, f'<p class="f-field-error">{icon("warning", 13)}Enter a complete email address, like mira@example.test.</p>')
+        for badge in states['complete'].select('.badge.good'):
+            replace_contents(badge, f'{icon("check", 11)}Setup complete')
+        well = states['complete'].select_one('.well')
+        if well:
+            replace_with(well, f'<div class="f-archive-card">{icon("folder", 22)}<div><strong>Field notes</strong><small>Northstar Studio · Private project · 1 collaborator invited</small></div><span class="badge good">Ready</span></div>')
+
+    elif key == 'toast-stack':
+        for stage in soup.select('.p-toast-stage'):
+            stage['class'] = ['p-toast-stage', 'f-toast-stage']
+        for toast in soup.select('.p-toast'):
+            toast['class'] = toast.get('class', []) + ['f-toast']
+            close = toast.select_one('.p-icon-button')
+            close['class'] = ['f-toast-close']
+            replace_contents(close, icon('close', 14))
+            action = toast.select_one('.p-text-action')
+            if action:
+                text = action.get_text()
+                replace_with(action, button(text, 'undo' if text == 'Undo' else 'undo', 'bevel-button--small f-toast-action'))
+            ic = toast.select_one('.p-toast-icon svg')
+            kind = 'success' if 'success' in toast['class'] else 'error' if 'error' in toast['class'] else 'note'
+            replace_with(ic, icon({'success': 'check', 'error': 'warning', 'note': 'archive'}[kind], 16))
+
+    elif key == 'persistent-action-banner':
+        for banner in soup.select('.p-banner'):
+            banner['class'] = banner.get('class', []) + ['f-banner']
+            svg = banner.select_one(':scope > span > svg')
+            resolved = 'resolved' in banner['class']
+            replace_with(svg, icon('check' if resolved else 'offline', 20))
+            btn = banner.select_one('.bevel-button')
+            if resolved:
+                replace_with(btn, f'<span class="f-banner-actions">{button("Dismiss", None, "bevel-button--small")}</span>')
+            else:
+                replace_with(btn, f'<span class="f-banner-actions">{button("Retry connection", "undo", "bevel-button--small")}<span class="f-banner-meta">Last synced 10:42 · 3 changes waiting</span></span>')
+        for panel in soup.select('.p-panel[style]'):
+            del panel['style']
+            panel['class'] = ['p-panel', 'f-banner-page']
+
+    elif key == 'save-status-indicator':
+        chip = soup.select_one('.r-saved-chip')
+        replace_contents(chip, f'{icon("check", 12)}Saved')
+
+    elif key == 'code-block':
+        for shell in soup.select('.code-shell'):
+            shell['class'] = ['code-shell', 'f-code']
+            head = shell.select_one('.code-head')
+            wrapped = 'wrap-code' in shell.select_one('.code-lines').get('class', [])
+            replace_contents(head, f'<span class="f-code-name">{icon("doc", 15)}field-note.html</span><span class="badge">HTML</span><span class="f-code-meta">4 lines</span><span class="spacer"></span>'
+                             + button('Wrap', 'wrap', 'bevel-button--small', f'aria-pressed="{"true" if wrapped else "false"}"') + button('Copy', 'copy', 'bevel-button--small'))
+            ol = shell.select_one('.code-lines')
+            ol['class'] = ['code-lines', 'f-code-lines'] + (['wrap-code'] if wrapped else [])
+            replace_contents(ol, ''.join(f'<li><code>{line}</code></li>' for line in CODE_LINES))
+        for note in soup.select('.note'):
+            note.string = 'Copy takes the whole file. Wrap keeps long attribute lines in view.'
+
+    elif key == 'diff-view':
+        for diff in soup.select('.p-diff'):
+            diff['class'] = ['p-diff', 'f-diff']
+            head = diff.select_one(':scope > header')
+            svg = head.select_one('svg')
+            if svg: replace_with(svg, icon('doc', 15))
+            btn = head.select_one('.bevel-button')
+            split = 'Unified' in btn.get_text()
+            replace_with(btn, f'<div class="bevel-seg f-diff-seg" role="group" aria-label="Layout">{button("Unified", None, "", "aria-pressed=" + ("false" if split else "true"))}{button("Split", None, "", "aria-pressed=" + ("true" if split else "false"))}</div>')
+        for line in soup.select('.p-diff-line'):
+            line['class'] = line.get('class', []) + ['f-diff-line']
+        split = states['split'].select_one('.p-diff-split')
+        replace_with(split, '''<div class="f-diff-split"><section><h3>Before <small>field-note.html @ 1,4</small></h3>
+<div class="p-diff-line f-diff-line"><span>1</span><span> </span><code>&lt;article class="field-note"&gt;</code></div>
+<div class="p-diff-line f-diff-line removed"><span>2</span><span>−</span><code>&lt;h1&gt;A place for <mark>ideas</mark>&lt;/h1&gt;</code></div>
+<div class="p-diff-line f-diff-line removed"><span>3</span><span>−</span><code>&lt;p&gt;Keep <mark>everything</mark> close.&lt;/p&gt;</code></div>
+<div class="p-diff-line f-diff-line"><span>4</span><span> </span><code>&lt;/article&gt;</code></div></section>
+<section><h3>After <small>field-note.html @ 1,4</small></h3>
+<div class="p-diff-line f-diff-line"><span>1</span><span> </span><code>&lt;article class="field-note"&gt;</code></div>
+<div class="p-diff-line f-diff-line added"><span>2</span><span>+</span><code>&lt;h1&gt;A place for <mark>good work</mark>&lt;/h1&gt;</code></div>
+<div class="p-diff-line f-diff-line added"><span>3</span><span>+</span><code>&lt;p&gt;Keep <mark>the useful things</mark> close.&lt;/p&gt;</code></div>
+<div class="p-diff-line f-diff-line"><span>4</span><span> </span><code>&lt;/article&gt;</code></div></section></div>''')
+
+    elif key == 'activity-feed':
+        verbs = {'updated': 'pencil', 'joined': 'user', 'added': 'image', 'created': 'plus'}
+        for ev in soup.select('.event'):
+            ev['class'] = ['event', 'f-event']
+            av = ev.select_one('.avatar')
+            who = av.get_text().strip()
+            av['class'] = ['f-avatar']
+            av['data-who'] = who
+            p = ev.select_one('p')
+            time = ev.select_one('time')
+            detail = ev.select_one('p.muted')
+            verb = [t for t in p.find_all(string=True, recursive=False) if t.strip()]
+            verb_word = verb[0].strip() if verb else ''
+            head = f'<div class="f-event-head">{str(p)}<time>{time.get_text()}</time></div>'
+            body = f'<p class="f-event-detail">{detail.get_text()}</p>' if detail else ''
+            replace_contents(ev, f'{str(av)}<div class="f-event-body">{head}{body}</div>')
+            ev['data-verb'] = verbs.get(verb_word, 'doc')
+        for eb in soup.select('.specimen > .eyebrow'):
+            eb['class'] = ['eyebrow', 'f-day']
+        for btn in soup.select('[data-ref-state="recent"] .bevel-button--quiet'):
+            replace_with(btn, button('Show yesterday', 'chevron', 'bevel-button--small f-show-more'))
+
+    elif key == 'stat-tiles':
+        sparks = ['0,36 26,29 53,33 80,16 106,20 133,5 160,10', '0,30 26,30 53,22 80,22 106,14 133,14 160,6', '0,20 26,28 53,24 80,14 106,18 133,8 160,4']
+        deltas = [('good', 'up', '18% this week'), ('good', 'up', '3 this week'), ('bad', 'up', '2 more than last week')]
+        for st, sec in states.items():
+            tiles = sec.select('.stat')
+            for i, tile in enumerate(tiles):
+                small = tile.select_one('small')
+                tone, arrow, text = deltas[i]
+                if st == 'default':
+                    replace_with(small, f'<small class="f-delta {tone}">{icon("arrow-" + arrow, 12)}{text}</small>')
+                    svg = tile.select_one('svg.sparkline')
+                    svg['viewBox'] = '0 0 160 42'
+                    replace_contents(svg, f'<polyline fill="none" points="{sparks[i]}" stroke="currentColor" stroke-width="2"/><circle cx="160" cy="{sparks[i].split()[-1].split(",")[1]}" r="3" fill="currentColor"/><line stroke="var(--bevel-line)" x1="0" x2="160" y1="41" y2="41"/>')
+                else:
+                    replace_with(small, '<small class="f-delta">No activity yet</small>')
+                    sp = tile.select_one('.sparkline')
+                    replace_with(sp, '<svg class="sparkline f-spark-flat" viewBox="0 0 160 42" aria-hidden="true"><line stroke="var(--bevel-line-2)" stroke-dasharray="2 4" x1="0" x2="160" y1="30" y2="30"/></svg>')
+                tile.select_one('.eyebrow')['class'] = ['eyebrow', 'f-stat-label']
+        for row in soup.select('.row.between.rule'):
+            row['class'] = ['row', 'between', 'rule', 'f-stat-foot']
+        for p in soup.select('[data-ref-state="zero"] .specimen > header p'):
+            p.string = 'Nothing to count yet. Numbers appear after the first document.'
+
+    elif key == 'avatar-group':
+        for stack in soup.select('.p-avatar-stack'):
+            stack['class'] = ['p-avatar-stack', 'f-avatar-stack']
+            for av in stack.select('.p-avatar'):
+                text = av.get_text().strip()
+                if text.startswith('+'):
+                    av['class'] = ['f-avatar', 'f-avatar-more']
+                else:
+                    av['class'] = ['f-avatar']
+                    av['data-who'] = text
+        for lst in soup.select('.p-avatar-list'):
+            lst['class'] = ['p-avatar-list', 'f-avatar-list']
+            for row in lst.select('.p-row'):
+                av = row.select_one('.p-avatar')
+                av['class'] = ['f-avatar']
+                av['data-who'] = av.get_text().strip()
+                if av['data-who'] == 'MC':
+                    row.select_one('p').string = ''
+                    append_html(row.select_one('p'), '<i class="f-presence-dot"></i>Online now · Designer')
+            append_html(lst, f'<div class="p-row f-avatar-list-more"><span class="f-avatar f-avatar-more">+3</span><div><strong class="p-small">Jules Park, Priya Nair and Tomas Berg</strong><p class="p-small p-muted">Owner, Researcher, Producer</p></div></div>')
+        for p in soup.select('.p-between p[style]'):
+            del p['style']
+
+    elif key == 'small-charts':
+        for chart in soup.select('svg.chart'):
+            chart['class'] = ['chart', 'f-chart']
+        spark_state = states['spark']
+        row = spark_state.select_one('.row[style]')
+        replace_with(row, '''<div class="f-spark-row"><div class="f-spark-figure"><div class="stat-value">162</div><small class="f-delta good">''' + icon('arrow-up', 12) + '''18% this week</small></div>
+<div class="f-spark-body"><svg aria-label="Views by day, rising through the week" class="sparkline f-sparkline" viewBox="0 0 160 42" preserveAspectRatio="none"><polyline fill="none" points="0,36 26,29 53,33 80,16 106,20 133,5 160,10" stroke="currentColor" stroke-width="2"/><circle cx="133" cy="5" r="3" fill="currentColor"/><line stroke="var(--bevel-line)" x1="0" x2="160" y1="41" y2="41"/></svg>
+<div class="f-spark-days"><span><b>12</b>Mon</span><span><b>18</b>Tue</span><span><b>14</b>Wed</span><span><b>28</b>Thu</span><span><b>24</b>Fri</span><span class="is-peak"><b>35</b>Sat</span><span><b>31</b>Sun</span></div></div></div>''')
+        for r in spark_state.select('.rule.row.between'):
+            if 'MON 12' in r.get_text(): r.decompose()
+        for legend in soup.select('.rule.row.between'):
+            sw = legend.select_one('span[style]')
+            if sw: replace_with(sw, '<i class="f-swatch"></i>')
+            legend['class'] = ['rule', 'row', 'between', 'f-chart-legend']
+
+    elif key == 'filter-builder':
+        for row in soup.select('.filter-row'):
+            row['class'] = ['filter-row', 'f-filter-row']
+            word = row.select_one(':scope > span')
+            word['class'] = ['f-rule-word']
+            rm = row.select_one('.icon-button')
+            replace_with(rm, icon_button('close', 'Remove rule', 'f-rule-remove', 14))
+        for act in soup.select('.actions'):
+            add = act.select_one('[data-add-rule]')
+            replace_contents(add, icon('plus', 14) + '<span class="bevel-button__label">Add rule</span>')
+            set_label(act.select_one('.bevel-button--primary'), 'Apply filters')
+        for p in soup.select('[data-ref-state="empty"] .filters p'):
+            replace_with(p, f'<div class="f-empty-rules">{icon("filter", 18)}<span>No conditions yet. Start with a field, then a comparison.</span></div>')
+        for eb in soup.select('.rule > .eyebrow'):
+            eb['class'] = ['eyebrow', 'f-result-label']
+
+    elif key == 'column-manager':
+        for item in soup.select('.column-item'):
+            item['class'] = ['column-item', 'f-column-item']
+            grip = item.select_one(':scope > span.muted')
+            replace_with(grip, f'<span class="f-grip" aria-hidden="true">{icon("grip", 14)}</span>')
+            for b in item.select('.bevel-button'):
+                lab = b.get('aria-label', '')
+                b['class'] = ['f-icon-button', 'f-order-btn']
+                replace_contents(b, icon('chevron-up' if 'up' in lab else 'chevron-down', 14))
+            n = item.select_one('span.mono')
+            if n:
+                del n['style']
+                n['class'] = ['f-order-n']
+        for st, sec in states.items():
+            if st == 'reordered':
+                items = sec.select('.f-column-item')
+                items[1]['class'].append('is-moved')
+                n = items[1].select_one('.f-order-n')
+                replace_with(n, '<span class="f-order-n is-moved">2<i>moved</i></span>')
+            wrap = sec.select_one('.panel[style]')
+            del wrap['style']
+            wrap['class'] = ['panel', 'f-column-panel']
+            head = wrap.select_one('.pad[style]')
+            del head['style']
+            head['class'] = ['pad', 'f-column-head']
+            foot = wrap.select_one(':scope > .pad:last-child')
+            foot['class'] = ['pad', 'f-column-foot']
+            replace_contents(foot, f'{icon("lock", 13)}<small>Invoice stays pinned as the record identifier.</small><span class="spacer"></span><small class="f-order-summary">{"4 of 5 shown" }</small>')
+
+    elif key == 'editable-grid-cells':
+        for st, sec in states.items():
+            scroll = sec.select_one('.table-scroll')
+            if st == 'idle':
+                cell = '<td class="numeric f-cell is-editable"><button type="button" class="f-cell-button"><span>$3,200.00</span>' + icon('pencil', 12) + '</button></td>'
+            elif st == 'editing':
+                cell = ('<td class="numeric f-cell is-editing"><span class="f-cell-editor"><span class="f-cell-prefix">$</span><input aria-label="Amount for INV-0432" class="f-cell-input" value="3200.00">'
+                        + icon_button('check', 'Save amount', 'f-cell-ok', 13) + icon_button('close', 'Cancel', 'f-cell-cancel', 13) + '</span></td>')
+            else:
+                cell = ('<td class="numeric f-cell is-editing is-invalid"><span class="f-cell-editor"><span class="f-cell-prefix">$</span><input aria-invalid="true" aria-label="Amount for INV-0432" class="f-cell-input" value="three thousand">'
+                        + icon_button('check', 'Save amount', 'f-cell-ok', 13) + icon_button('close', 'Cancel', 'f-cell-cancel', 13) + f'</span><small class="f-cell-error">{icon("warning", 12)}Enter a number, like 3200</small></td>')
+            replace_with(scroll, invoice_table(cell).replace('<table>', '<table class="f-grid-table">'))
+            rows = sec.select('tbody tr')
+            if st != 'idle': rows[1]['class'] = ['is-editing-row']
+            act = sec.select_one('.actions')
+            if act:
+                replace_with(act, f'<p class="note f-edit-note">{icon("pencil", 12)}Editing INV-0432 · Amount. <kbd>↵</kbd> saves, <kbd>esc</kbd> cancels.</p>')
+        for note in soup.select('[data-ref-state="idle"] .note'):
+            replace_contents(note, f'{icon("pencil", 12)}Amounts can be edited in place. Choose a value to change it.')
+            note['class'] = ['note', 'f-edit-note']
+
+    elif key == 'split-panes':
+        for sp in soup.select('.p-split-panes'):
+            sp['class'] = ['p-split-panes', 'f-split-panes']
+            div = sp.select_one('.p-pane-divider')
+            replace_contents(div, icon('grip', 14))
+            for item in sp.select('.p-pane-item'):
+                svg = item.select_one('svg')
+                replace_with(svg, icon('doc', 15))
+            pre = sp.select_one('pre')
+            if pre:
+                replace_contents(pre, '<span class="tk-tag">&lt;article&gt;</span>\n  <span class="tk-tag">&lt;h1&gt;</span>Field notes<span class="tk-tag">&lt;/h1&gt;</span>\n  <span class="tk-tag">&lt;p&gt;</span>Keep the useful\n  things close.<span class="tk-tag">&lt;/p&gt;</span>\n<span class="tk-tag">&lt;/article&gt;</span>')
+        for lab in soup.select('.p-pane-adjust'):
+            state = lab.find_parent('section')['data-ref-state']
+            replace_with(lab, f'<p class="p-pane-adjust f-pane-caption">{icon("grip", 12)}{"List 32% · minimum 25% · drag the divider" if state == "list-detail" else "Source 46% · minimum 25% · drag the divider"}</p>')
+        for sp in states['list-detail'].select('.f-split-panes'):
+            sp['style'] = '--split:32%'
+        for row in soup.select('.p-pane-detail .p-row[style]'):
+            del row['style']
+            row['class'] = ['p-row', 'f-pane-byline']
+            av = row.select_one('.p-avatar')
+            av['class'] = ['f-avatar', 'small']
+            av['data-who'] = 'MC'
+
+    elif key == 'rich-text-toolbar':
+        names = {'link': 'link', 'unorderedList': 'list', 'undo': 'undo'}
+        for tb in soup.select('.richclay-toolbar'):
+            tb['class'] = ['richclay-toolbar', 'f-rt-toolbar']
+            block = tb.select_one('[data-richclay-control="blockMenu"]')
+            replace_contents(block, f'<span>Paragraph</span>{icon("chevron", 13)}')
+            for ctrl, name in names.items():
+                b = tb.select_one(f'[data-richclay-control="{ctrl}"]')
+                if b: replace_contents(b, icon(name, 15))
+        for menu in soup.select('.richclay-menu'):
+            menu['class'] = ['richclay-menu', 'f-rt-menu']
+            for item in menu.select('.richclay-menu-item'):
+                text = item.get_text()
+                cls = {'Paragraph': 'f-rt-p', 'Heading 1': 'f-rt-h1', 'Heading 2': 'f-rt-h2', 'Quote': 'f-rt-q'}[text]
+                replace_contents(item, f'<span class="{cls}">{text}</span>' + (icon('check', 13) if item.get('aria-checked') == 'true' else ''))
+        for ed in soup.select('.richclay-editor'):
+            ed['class'] = ['richclay-editor', 'f-rt-editor']
+        link_state = states['link']
+        dlg = link_state.select_one('.richclay-link-dialog')
+        editor = link_state.select_one('.f-rt-editor')
+        a = editor.select_one('a')
+        a['class'] = ['is-editing']
+        dlg.extract()
+        dlg['class'] = ['richclay-dialog', 'f-rt-link']
+        replace_contents(dlg, f'<div class="f-rt-link-head">{icon("link", 14)}<span class="eyebrow">Edit link</span><span class="f-keys"><kbd>esc</kbd> close</span></div>'
+                         '<label class="field">URL<input class="bevel-input bevel-input--small" type="text" value="https://example.test/field-guide"></label>'
+                         '<label class="field">Text<input class="bevel-input bevel-input--small" type="text" value="Read the field guide"></label>'
+                         f'<div class="f-rt-link-actions">{button("Remove link", "unlink", "bevel-button--small bevel-button--quiet")}<span class="spacer"></span>{button("Cancel", None, "bevel-button--small")}{button("Apply", None, "bevel-button--small bevel-button--primary")}</div>')
+        a.insert_after(dlg)
+        floating = states['floating']
+        wrap = floating.select_one('.specimen > div[style]')
+        editor = wrap.select_one('.f-rt-editor')
+        editor.extract()
+        replace_with(wrap, str(editor))
+        editor = floating.select_one('.f-rt-editor')
+        editor['class'].append('is-floating')
+        p = editor.select_one('p')
+        mark = p.select_one('mark')
+        del mark['style']
+        mark['class'] = ['f-selection']
+        p.insert_before(frag(f'<div class="richclay-float f-rt-float" role="toolbar" aria-label="Selection formatting">'
+                             f'<button class="richclay-button" aria-pressed="true" aria-label="Bold"><b>B</b></button><button class="richclay-button" aria-pressed="false" aria-label="Italic"><i>I</i></button>'
+                             f'<button class="richclay-button" aria-pressed="false" aria-label="Underline"><u>U</u></button><button class="richclay-button" aria-pressed="false" aria-label="Strikethrough"><s>S</s></button>'
+                             f'<span class="richclay-separator"></span><button class="richclay-button" aria-label="Edit link">{icon("link", 15)}</button><button class="richclay-button" aria-label="Highlight">{icon("highlight", 15)}</button></div>'))
+        for note in soup.select('.specimen > p.note'):
+            note.decompose()
+        for hp in soup.select('.specimen > header p'):
+            hp.string = 'Richclay formatting, in the Bevel material.'
+
+    elif key == 'context-hypercms':
+        for close in soup.select('[data-hcms-action="close"]'):
+            replace_with(close, icon_button('close', 'Close inspector', 'f-hcms-close', 15))
+        for err in soup.select('.hcms-shell-error'):
+            err['class'] = err.get('class', []) + ['f-error-summary']
+            if not err.has_attr('hidden'):
+                text = err.get_text()
+                replace_contents(err, f'{icon("warning", 16)}<div><strong>{text}</strong></div>')
+        for e in soup.select('.hcms-error:not([hidden])'):
+            if e.get_text().strip():
+                text = e.get_text()
+                replace_contents(e, f'{icon("warning", 12)}{text}')
+                e['class'] = ['hcms-error', 'f-field-error']
+        for card in soup.select('.hcms-card'):
+            handle = card.select_one('.hcms-drag-handle')
+            replace_contents(handle, icon('grip', 13))
+        for up in soup.select('.hcms-upload .row'):
+            up['class'] = ['row', 'f-hcms-upload']
+        for rule in soup.select('.hcms-preview .rule'):
+            replace_contents(rule, f'<div class="f-hcms-byline">{avatar("MC", "small")}<small>Mira Chen · edited 10:42</small></div>')
+        for h3 in soup.select('.hcms-array-title'):
+            small = h3.select_one('small')
+            if small: small['class'] = ['f-count']
+
+    elif key == 'context-quickcrop':
+        for modal in soup.select('.p-modal'):
+            modal['class'] = ['p-modal', 'f-crop-modal']
+            del modal['style']
+            corner = modal.select_one('.p-corner')
+            replace_with(corner, f'<button aria-label="Close dialog" class="micromodal__close" type="button">{CLOSE_TOKEN}</button>')
+            head = modal.select_one('.p-between[style]')
+            del head['style']
+            head['class'] = ['p-between', 'f-crop-head']
+            h2 = head.select_one('h2')
+            del h2['style']
+        for act in soup.select('.p-crop-actions'):
+            state = act.find_parent('section')['data-ref-state']
+            seg = act.select_one('.p-row')
+            replace_with(seg, f'<div class="bevel-seg f-crop-seg" role="group" aria-label="Aspect ratio">{button("1:1", None, "", "aria-pressed=" + ("true" if state == "locked" else "false"))}{button("Free", None, "", "aria-pressed=" + ("true" if state == "free" else "false"))}</div>')
+            note = act.select_one('.p-small')
+            replace_contents(note, (icon('lock', 12) + 'Aspect ratio locked') if state == 'locked' else (icon('expand', 12) + 'Any proportion'))
+            note['class'] = ['p-small', 'p-muted', 'f-crop-note']
+            bar = act.select_one('.qc-bar')
+            replace_contents(bar, button('Reset', 'undo', 'bevel-button--small') + button('Use image', None, 'bevel-button--small bevel-button--primary'))
+    return soup
+
+
+def shell(name, key, content):
+    return frag(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} · Fable</title></head><body data-component="{key}">{content}</body></html>')
+
+
+SAVED_PAGE = '''<section data-ref-state="saved"><main class="r-saved-page f-saved-page"><header><span class="eyebrow">Northstar Studio / Field notes</span><span class="f-saved-meta"><span class="badge">Draft</span><span class="mono muted">Edited 10:42</span></span></header><article><span class="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 finish(soup, component, source):
+    for css in soup.select('link[rel="stylesheet"]'):
+        css.decompose()
+    for script in soup.select('script'):
+        script.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.html['class'] = ['light']
+    if soup.html.has_attr('data-theme'): del soup.html['data-theme']
+    soup.body['data-component'] = component['id']
+    soup.body['data-reference-phase'] = 'static'
+    soup.body['data-selected-source'] = source
+    soup.body['data-seat'] = 'fable'
+    soup.title.string = f"{component['name']} · Fable · Bevel"
+    base = 'parent' if source == 'parent' else 'astra'
+    for href in ['../../baseline/bevel-fonts.css', '../../baseline/bevel.css', f'../base-{base}.css', '../fable.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">')
+    for old in soup.select('.r-static-note'):
+        old.decompose()
+    append_html(soup.body, '<footer class="r-static-note">Static UI reference · Fable seat · Use the preview controls to compare states.</footer><script src="../../fixtures/static-host.js"></script>')
+    html = str(soup)
+    for attr in ['viewBox', 'preserveAspectRatio', 'gradientUnits', 'markerWidth', 'markerHeight']:
+        html = html.replace(attr.lower() + '=', attr + '=')
+    return html.replace(CLOSE_TOKEN, CLOSE_SVG)
+
+
+coverage = {'seat': 'fable', 'phase': 'static', 'components': [], 'contexts': []}
+for c in MANIFEST['components'] + MANIFEST['contexts']:
+    key = c['id']
+    a = FEEDBACK.get(key)
+    picked = a['picked'][0] if a else None
+    source = 'parent' if picked in ('parent', 'iterate') or key == 'context-quickcrop' else 'astra'
+    if key == 'save-status-indicator':
+        soup = shell(c['name'], key, SAVED_PAGE)
+    elif key == 'kanban-board':
+        soup = shell(c['name'], key, ''.join(f'<section data-ref-state="{s}">{kanban(s)}</section>' for s in c['states']))
+    else:
+        soup = refine(frag((PARENT / f'{key}.html').read_text()), key)
+    (HERE / 'components' / f'{key}.html').write_text(finish(soup, c, source))
+    coverage['components' if a else 'contexts'].append({
+        'id': key, 'states': c['states'], 'source': 'fable iteration' if picked == 'iterate' else f'{source} selection, Fable refinement',
+        '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"><strong>{c["name"]}</strong><small>{c["family"]} · {len(c["states"])} states</small></a>' for c in MANIFEST['components'])
+contexts = ''.join(f'<a href="components/{c["id"]}.html"><strong>{c["name"]}</strong><small>context · {len(c["states"])} states</small></a>' for c in MANIFEST['contexts'])
+(HERE / 'index.html').write_text(f'''<!doctype html><html lang="en" class="light"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Fable seat · Bevel components</title>
+<link rel="stylesheet" href="../baseline/bevel-fonts.css"><link rel="stylesheet" href="../baseline/bevel.css">
+<style>body{{max-width:1040px;margin:40px auto;padding:24px;font:15px/1.5 var(--bevel-font-sans)}}.kicker{{font:11px var(--bevel-font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--bevel-brass);margin-bottom:12px}}h1{{font:400 42px/1.05 var(--bevel-font-serif);letter-spacing:-.02em;margin:0 0 12px}}p{{color:var(--bevel-ink-2);max-width:60ch;margin:0 0 28px}}h2{{font:400 22px var(--bevel-font-serif);margin:36px 0 12px}}nav{{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1px;background:var(--bevel-line-2);border:1px solid var(--bevel-line-2)}}a{{display:block;padding:16px 18px;background:var(--bevel-surface);color:var(--bevel-ink);text-decoration:none}}a:hover{{background:var(--bevel-sunk)}}strong{{display:block;font-weight:500}}small{{display:block;color:var(--bevel-muted);font:11px var(--bevel-font-mono);margin-top:6px}}.foot{{margin-top:32px;font:11px var(--bevel-font-mono);color:var(--bevel-muted)}}</style>
+<div class="kicker">Bevel · Fable seat · Static refinement</div><h1>Every component, one more pass.</h1><p>Thirty-three static components and two product contexts, built from the selected references and refined for proportion, contrast and detail. Open any component and use the preview controls to switch states and colour modes.</p>
+<h2>Components</h2><nav>{links}</nav><h2>Contexts</h2><nav>{contexts}</nav><p class="foot">Regenerate with <code>python3 build.py</code>. Notes in IMPROVEMENTS.md.</p></html>''')
+print(f"Fable: {len(coverage['components'])} components, {len(coverage['contexts'])} contexts, {sum(len(c['states']) for c in MANIFEST['components'])} component states.")