@panphora/bevel 0.1.0

package/examples/components/reference/fable/as-authored/kanban-completed.py

@@ -0,0 +1,212 @@
+"""Fable Kanban board. An independent composition for the Northstar Studio /
+Field notes project: broadsheet masthead, view tabs, filter chrome, an
+aggregate tape, four open lanes on the ground (no lane containers), dense
+sans cards, a blocking dependency drawn on both ends, and a task panel that
+pushes the board into a visibly scrollable strip. Static markup only."""
+
+PEOPLE = {'MC': ('Mira Chen', 'Designer'), 'AR': ('Alex Rivera', 'Developer'),
+          'SP': ('Sam Patel', 'Editor'), 'JP': ('Jules Park', 'Owner')}
+
+ICONS = {
+    'plus': 'M12 5v14M5 12h14',
+    'more': 'M5 12h1m5 0h1m5 0h1',
+    'search': 'M20 20l-4.5-4.5M17 10a7 7 0 1 1-14 0 7 7 0 0 1 14 0',
+    'filter': 'M3 5h18l-7 8v6l-4 2v-8Z',
+    'chevron': 'm6 9 6 6 6-6',
+    'check': 'm5 12 4 4L19 6',
+    'clock': 'M12 7v5l3 2M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0',
+    'comment': 'M4 4h16v12H9l-5 4V4Z',
+    'clip': 'm9 16 7-7a3 3 0 0 0-4-4l-7 7a5 5 0 0 0 7 7l8-8',
+    'flag': 'M5 21V4h13l-3 4 3 4H5',
+    'board': 'M3 4h5v16H3ZM10 4h5v11h-5ZM17 4h4v7h-4Z',
+    'list': 'M8 6h13M8 12h13M8 18h13M3 6h1M3 12h1M3 18h1',
+    'calendar': 'M4 5h16v16H4ZM4 10h16M8 2v6m8-6v6',
+    'timeline': 'M3 6h8M9 12h10M5 18h9',
+    'lock': 'M6 11h12v10H6ZM8 11V7a4 4 0 0 1 8 0v4',
+    'link': 'm10 14 4-4M9 15l-2 2a3 3 0 0 1-4-4l4-4a3 3 0 0 1 4 0m2 0 2-2a3 3 0 0 1 4 4l-4 4a3 3 0 0 1-4 0',
+    'close': 'm6 6 12 12M18 6 6 18',
+    'doc': 'M5 3h9l5 5v13H5ZM14 3v6h5',
+    'image': 'M3 5h18v14H3ZM3 15l5-5 4 4 3-3 6 6M16 9h1',
+    'share': 'M12 3v12m-4-8 4-4 4 4M5 14v6h14v-6',
+    'sort': 'M4 6h16M7 12h10M10 18h4',
+    'group': 'M3 4h7v7H3ZM14 4h7v7h-7ZM3 13h7v7H3ZM14 13h7v7h-7Z',
+    'arrow': 'M4 12h16m-6-6 6 6-6 6',
+    'blocked': 'M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18ZM5.6 5.6l12.8 12.8',
+    'expand': 'M4 4h6M4 4v6M20 20h-6m6 0v-6M4 20l6-6M20 4l-6 6',
+    'template': 'M4 4h16v5H4ZM4 12h7v8H4ZM14 12h6v8h-6Z',
+}
+
+
+from build_repairs import ICONS as REPAIR_ICONS
+ICONS.update(REPAIR_ICONS)
+
+def icon(name, size=16):
+    return (f'<svg width="{size}" height="{size}" viewBox="0 0 24 24" fill="none" stroke="currentColor" '
+            f'stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter" aria-hidden="true">'
+            f'<path d="{ICONS[name]}"/></svg>')
+
+
+def avatar(who, size=''):
+    name = PEOPLE[who][0]
+    return f'<span class="f-avatar {size}" data-who="{who}" aria-label="{name}" title="{name}">{who}</span>'
+
+
+def button(label, name=None, kind='', attrs=''):
+    cls = ('bevel-button ' + kind).strip()
+    inner = (icon(name, 15) if name else '') + f'<span class="bevel-button__label">{label}</span>'
+    return f'<button type="button" class="{cls}" {attrs}>{inner}</button>'
+
+
+TASKS = {
+    'backlog': [
+        dict(id='FN-109', title='Archive the 2025 field notes', labels=['editorial'], priority='normal', due='Sep 19', people=['SP'], comments=0, files=0),
+        dict(id='FN-110', title='Print-ready export for the field guide', labels=['engineering'], priority='normal', due='Sep 24', people=['AR'], check=(0, 3), comments=1, files=0),
+        dict(id='FN-111', title='Photograph the studio for the cover', labels=['design'], priority='normal', due='Sep 26', people=['MC'], comments=0, files=1),
+    ],
+    'next': [
+        dict(id='FN-101', title='Turn research into a field guide', labels=['editorial'], priority='high', due='Sep 10', people=['SP'], check=(2, 5), comments=3, files=2,
+             desc='A useful home for what we learned in the interviews.'),
+        dict(id='FN-102', title='Shape the cover story', labels=['design'], priority='normal', due='Sep 11', people=['MC', 'SP'], comments=2, files=1, cover=True),
+        dict(id='FN-103', title='Invite the next four collaborators', labels=['studio'], priority='normal', due='Sep 12', people=['JP'], check=(0, 4), comments=0, files=0),
+    ],
+    'progress': [
+        dict(id='FN-104', title='Make room for good work', labels=['design', 'launch'], priority='urgent', due='Today', due_kind='today', people=['MC', 'AR'], check=(3, 4), comments=8, files=3,
+             desc='Finish the new project experience. Keep the first step calm and easy to return to.', blocked_by='FN-105'),
+        dict(id='FN-105', title='Polish the document export', labels=['engineering'], priority='high', due='Sep 07', due_kind='overdue', people=['AR'], check=(1, 3), comments=4, files=0, blocks='FN-104'),
+        dict(id='FN-106', title='Give every empty state a voice', labels=['editorial'], priority='normal', due='Sep 09', people=['SP'], check=(2, 3), comments=1, files=0),
+    ],
+    'done': [
+        dict(id='FN-107', title='A calmer workspace navigation', labels=['design'], priority='normal', due='Sep 08', due_kind='done', people=['MC'], check=(4, 4), comments=5, files=2),
+        dict(id='FN-108', title='Write the first welcome', labels=['editorial'], priority='normal', due='Sep 07', due_kind='done', people=['SP', 'JP'], check=(3, 3), comments=2, files=0),
+    ],
+}
+
+LANES = [
+    ('backlog', 'Backlog', '', 'Ideas that are not scheduled yet.', 'Nothing waiting'),
+    ('next', 'Up next', '', 'Scheduled for this week.', 'Nothing scheduled'),
+    ('progress', 'In progress', 'WIP 3 / 3', 'Being worked on right now.', 'Nothing in progress'),
+    ('done', 'Done', 'This week', 'Finished and reviewed.', 'Nothing finished yet'),
+]
+
+LABEL_NAMES = {'design': 'Design', 'editorial': 'Editorial', 'engineering': 'Engineering', 'studio': 'Studio', 'launch': 'Launch'}
+
+
+def label(key):
+    return f'<span class="kb-label" data-label="{key}">{LABEL_NAMES[key]}</span>'
+
+
+def priority(p):
+    text = {'urgent': 'Urgent', 'high': 'High', 'normal': 'Normal'}[p]
+    return f'<span class="kb-priority" data-priority="{p}">{icon("flag", 11)}{text}</span>'
+
+
+def card(t, selected=False):
+    classes = ['kb-card']
+    if selected: classes.append('is-selected')
+    if t.get('due_kind') == 'done': classes.append('is-done')
+    if t.get('blocked_by'): classes.append('is-blocked')
+    parts = [f'<article class="{" ".join(classes)}" data-task="{t["id"]}" {"aria-current=true" if selected else ""}>']
+    if t.get('cover'):
+        parts.append('<figure class="kb-cover"><img src="../../fixtures/workspace.jpg" alt="The studio desk, a reference for the cover"><figcaption>Cover reference</figcaption></figure>')
+    parts.append(f'<div class="kb-card-top"><span class="kb-id">{t["id"]}</span>{priority(t["priority"])}</div>')
+    parts.append(f'<h3>{t["title"]}</h3>')
+    if t.get('desc'):
+        parts.append(f'<p class="kb-desc">{t["desc"]}</p>')
+    parts.append('<div class="kb-labels">' + ''.join(label(l) for l in t['labels']) + '</div>')
+    if t.get('blocked_by'):
+        parts.append(f'<div class="kb-dep is-blocked">{icon("lock", 12)}<span>Blocked by <b>{t["blocked_by"]}</b> · Font licensing</span></div>')
+    if t.get('blocks'):
+        parts.append(f'<div class="kb-dep">{icon("link", 12)}<span>Blocks <b>{t["blocks"]}</b> · Make room for good work</span></div>')
+    if t.get('check'):
+        done, total = t['check']
+        pct = round(done / total * 100)
+        parts.append(f'<div class="kb-check" aria-label="Checklist {done} of {total}"><i class="kb-check-bar"><b style="width:{pct}%"></b></i><span class="kb-check-count">{done}/{total}</span></div>')
+    kind = t.get('due_kind', '')
+    due_icon = 'check' if kind == 'done' else 'calendar'
+    meta = ''
+    if t['comments']: meta += f'<span>{icon("comment", 12)}{t["comments"]}</span>'
+    if t['files']: meta += f'<span>{icon("clip", 12)}{t["files"]}</span>'
+    parts.append(f'<footer class="kb-card-foot"><span class="kb-due" data-due="{kind}">{icon(due_icon, 12)}{t["due"]}</span><span class="kb-meta">{meta}</span><span class="kb-people">{"".join(avatar(p, "small") for p in t["people"])}</span></footer>')
+    parts.append('</article>')
+    return ''.join(parts)
+
+
+def lane(key, title, wip, blurb, empty_title, tasks, state):
+    empty = state == 'empty'
+    count = 0 if empty else len(tasks)
+    head = (f'<header class="kb-lane-head"><span class="kb-lane-mark" data-lane="{key}"></span><h2>{title}</h2>'
+            f'<span class="kb-count">{count}</span>'
+            + (f'<span class="kb-wip" data-full="{"true" if key == "progress" and not empty else "false"}">{wip}</span>' if wip and not empty else '')
+            + f'<button type="button" class="kb-icon" aria-label="Add a task to {title}">{icon("plus", 15)}</button></header>')
+    if empty:
+        cta = ''
+        if key == 'backlog':
+            cta = f'<div class="kb-empty-actions">{button("Add the first task", "plus", "bevel-button--small")}{button("Start from a template", "template", "bevel-button--small bevel-button--quiet")}</div>'
+        body = f'<div class="kb-lane-empty"><strong>{empty_title}</strong><p>{blurb}</p>{cta}</div>'
+    else:
+        body = ''.join(card(t, selected=(state == 'selected' and t['id'] == 'FN-104')) for t in tasks)
+        body += f'<button type="button" class="kb-add">{icon("plus", 13)}Add task</button>'
+    return f'<section class="kb-lane" data-lane="{key}" aria-label="{title}">{head}<div class="kb-lane-body">{body}</div></section>'
+
+
+def checklist_item(text, done):
+    return (f'<label class="bevel-checkbox bevel-checkbox--small kb-check-item"><input type="checkbox" class="bevel-sr-only" {"checked" if done else ""}>'
+            f'<span class="bevel-checkbox__box" aria-hidden="true"></span><span class="bevel-checkbox__label">{text}</span></label>')
+
+
+def panel():
+    return f'''<aside class="kb-panel" aria-label="Task FN-104">
+<header class="kb-panel-head"><span class="kb-id">FN-104</span><span class="kb-status" data-lane="progress">In progress {icon("chevron", 12)}</span><span class="kb-spacer"></span><button type="button" class="kb-icon" aria-label="Task options">{icon("more", 16)}</button><button type="button" class="kb-icon" aria-label="Close task">{icon("close", 16)}</button></header>
+<h2>Make room for good work</h2>
+<p class="kb-panel-lede">Finish the new project experience. Keep the first step calm, direct and easy to return to.</p>
+<dl class="kb-props">
+<dt>Assignees</dt><dd><span class="kb-people">{avatar("MC", "small")}{avatar("AR", "small")}</span>Mira Chen, Alex Rivera</dd>
+<dt>Priority</dt><dd>{priority("urgent")}</dd>
+<dt>Due</dt><dd><span class="kb-due" data-due="today">{icon("calendar", 12)}Today, Sep 08</span></dd>
+<dt>Labels</dt><dd class="kb-labels">{label("design")}{label("launch")}</dd>
+<dt>Estimate</dt><dd class="f-mono">3 days · 2 spent</dd>
+</dl>
+<section class="kb-panel-section"><h4>Checklist <b class="kb-check-count">3/4</b></h4><i class="kb-check-bar"><b style="width:75%"></b></i>
+{checklist_item("Set the project details", True)}{checklist_item("Check both colour modes", True)}{checklist_item("Review the compact layout", True)}{checklist_item("Get Jules’ final review", False)}
+</section>
+<section class="kb-panel-section"><h4>Blocked by <b class="kb-check-count">1</b></h4>
+<div class="kb-dep-row">{icon("lock", 14)}<div><b>FN-105</b> Polish the document export<small>In progress · Alex Rivera · <span class="kb-due" data-due="overdue">due Sep 07</span></small></div>{avatar("AR", "small")}</div>
+</section>
+<section class="kb-panel-section"><h4>Attachments <b class="kb-check-count">3</b></h4>
+<div class="kb-files"><a class="kb-file" href="#workspace"><img src="../../fixtures/workspace.jpg" alt=""><span>workspace.jpg<small>184 KB</small></span></a><a class="kb-file" href="#brief">{icon("doc", 18)}<span>project-brief.pdf<small>420 KB</small></span></a><a class="kb-file" href="#copy">{icon("doc", 18)}<span>welcome-copy.md<small>3 KB</small></span></a></div>
+</section>
+<section class="kb-panel-section"><h4>Activity <b class="kb-check-count">8</b></h4>
+<div class="kb-comment">{avatar("AR", "small")}<div><b>Alex Rivera <small>18 min ago</small></b><p>The new flow reads clearly. Ready for one last look at the copy.</p></div></div>
+<div class="kb-comment">{avatar("SP", "small")}<div><b>Sam Patel <small>2 h ago</small></b><p>Tightened the welcome line. It is on the card now.</p></div></div>
+<div class="kb-event"><span class="kb-event-dot"></span>Mira moved this from <b>Up next</b> to <b>In progress</b><small>Yesterday</small></div>
+<div class="kb-composer"><span>Leave a comment…</span><kbd>⌘ ↵</kbd></div>
+</section>
+<footer class="kb-panel-foot"><span class="f-mono">Created Sep 02 by Jules Park</span>{button("Open task", "expand", "bevel-button--small")}</footer>
+</aside>'''
+
+
+def kanban(state):
+    empty = state == 'empty'
+    total = 0 if empty else sum(len(v) for v in TASKS.values())
+    done = 0 if empty else len(TASKS['done'])
+    progress = 0 if empty else len(TASKS['progress'])
+    blocked = 0 if empty else 1
+    pct = 0 if empty else round(done / total * 100)
+    lanes = ''.join(lane(k, t, w, b, e, TASKS[k], state) for k, t, w, b, e in LANES)
+    tape = (f'<dl class="kb-tape"><div><dt>Open</dt><dd>{total - done}</dd></div><div><dt>In progress</dt><dd>{progress}<small>of 3</small></dd></div>'
+            f'<div><dt>Blocked</dt><dd data-tone="{"ox" if blocked else ""}">{blocked}</dd></div><div><dt>Done this week</dt><dd>{done}</dd></div>'
+            f'<div class="kb-tape-meter"><dt>Progress</dt><dd><i class="kb-check-bar"><b style="width:{pct}%"></b></i>{pct}%</dd></div></dl>')
+    filters = ('' if empty else f'<button type="button" class="kb-chip" aria-pressed="true">{icon("calendar", 13)}Due: this week{icon("close", 11)}</button>') + \
+        f'<button type="button" class="kb-chip">Assignee: anyone{icon("chevron", 12)}</button><button type="button" class="kb-chip">Label: all{icon("chevron", 12)}</button>'
+    hint = (f'<div class="kb-scroll-rail" aria-hidden="true"><b style="width:80%"></b></div>'
+            f'<p class="kb-scroll-hint">{icon("arrow", 12)}Four lanes. Scroll the board sideways for <b>Done</b>.</p>') if state == 'selected' else ''
+    empty_note = ('<div class="kb-empty-note"><strong>This board is empty.</strong> New tasks land in Backlog. Move them across the lanes as the work moves.</div>' if empty else '')
+    return f'''<main class="kb" data-state="{state}">
+<header class="kb-mast"><div class="kb-mast-title"><div class="kb-kicker">Northstar Studio<i>/</i>Project 004<i>/</i>Board</div><h1>Field notes</h1><p>Everything the studio is making for the field guide, in the order it will ship.</p></div>
+<div class="kb-mast-side"><div class="kb-team"><span class="kb-people">{"".join(avatar(p) for p in PEOPLE)}</span><small>4 people</small></div>{button("Share", "share")}{button("New task", "plus", "bevel-button--primary")}</div></header>
+<nav class="kb-views" aria-label="Views"><a href="#board" aria-current="page">{icon("board", 15)}Board<b>{total}</b></a><a href="#list">{icon("list", 15)}List</a><a href="#timeline">{icon("timeline", 15)}Timeline</a><a href="#calendar">{icon("calendar", 15)}Calendar</a><span class="kb-views-note">{icon("lock", 12)}Private · updated 10:42</span></nav>
+<div class="kb-tools"><label class="kb-search">{icon("search", 15)}<input type="search" placeholder="Search tasks" aria-label="Search tasks"><kbd>⌘ K</kbd></label>{filters}<span class="kb-spacer"></span><button type="button" class="kb-chip kb-chip-quiet">{icon("group", 13)}Group: status</button><button type="button" class="kb-chip kb-chip-quiet">{icon("sort", 13)}Sort: priority</button></div>
+{tape}{empty_note}
+<div class="kb-work {"has-panel" if state == "selected" else ""}"><div class="kb-board-wrap"><div class="kb-board" tabindex="0" aria-label="Board lanes">{lanes}</div>{hint}</div>{panel() if state == "selected" else ""}</div>
+<footer class="kb-foot"><span>{icon("board", 13)}Grouped by status · sorted by priority</span><span>{total} tasks · {done} done · 4 people</span></footer>
+</main>'''

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

@@ -0,0 +1,207 @@
+"""Fable Kanban board. An independent composition for the Northstar Studio /
+Field notes project: broadsheet masthead, view tabs, filter chrome, an
+aggregate tape, four open lanes on the ground (no lane containers), dense
+sans cards, a blocking dependency drawn on both ends, and a task panel that
+pushes the board into a visibly scrollable strip. Static markup only."""
+
+PEOPLE = {'MC': ('Mira Chen', 'Designer'), 'AR': ('Alex Rivera', 'Developer'),
+          'SP': ('Sam Patel', 'Editor'), 'JP': ('Jules Park', 'Owner')}
+
+ICONS = {
+    'plus': 'M12 5v14M5 12h14',
+    'more': 'M5 12h1m5 0h1m5 0h1',
+    'search': 'M20 20l-4.5-4.5M17 10a7 7 0 1 1-14 0 7 7 0 0 1 14 0',
+    'filter': 'M3 5h18l-7 8v6l-4 2v-8Z',
+    'chevron': 'm6 9 6 6 6-6',
+    'check': 'm5 12 4 4L19 6',
+    'clock': 'M12 7v5l3 2M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0',
+    'comment': 'M4 4h16v12H9l-5 4V4Z',
+    'clip': 'm9 16 7-7a3 3 0 0 0-4-4l-7 7a5 5 0 0 0 7 7l8-8',
+    'flag': 'M5 21V4h13l-3 4 3 4H5',
+    'board': 'M3 4h5v16H3ZM10 4h5v11h-5ZM17 4h4v7h-4Z',
+    'list': 'M8 6h13M8 12h13M8 18h13M3 6h1M3 12h1M3 18h1',
+    'calendar': 'M4 5h16v16H4ZM4 10h16M8 2v6m8-6v6',
+    'timeline': 'M3 6h8M9 12h10M5 18h9',
+    'lock': 'M6 11h12v10H6ZM8 11V7a4 4 0 0 1 8 0v4',
+    'link': 'm10 14 4-4M9 15l-2 2a3 3 0 0 1-4-4l4-4a3 3 0 0 1 4 0m2 0 2-2a3 3 0 0 1 4 4l-4 4a3 3 0 0 1-4 0',
+    'close': 'm6 6 12 12M18 6 6 18',
+    'doc': 'M5 3h9l5 5v13H5ZM14 3v6h5',
+    'image': 'M3 5h18v14H3ZM3 15l5-5 4 4 3-3 6 6M16 9h1',
+    'share': 'M12 3v12m-4-8 4-4 4 4M5 14v6h14v-6',
+    'sort': 'M4 6h16M7 12h10M10 18h4',
+    'group': 'M3 4h7v7H3ZM14 4h7v7h-7ZM3 13h7v7H3ZM14 13h7v7h-7Z',
+    'arrow': 'M4 12h16m-6-6 6 6-6 6',
+    'blocked': 'M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18ZM5.6 5.6l12.8 12.8',
+    'expand': 'M4 4h6M4 4v6M20 20h-6m6 0v-6M4 20l6-6M20 4l-6 6',
+    'template': 'M4 4h16v5H4ZM4 12h7v8H4ZM14 12h6v8h-6Z',
+}
+
+
+def icon(name, size=16):
+    return (f'<svg width="{size}" height="{size}" viewBox="0 0 24 24" fill="none" stroke="currentColor" '
+            f'stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter" aria-hidden="true">'
+            f'<path d="{ICONS[name]}"/></svg>')
+
+
+def avatar(who, size=''):
+    name = PEOPLE[who][0]
+    return f'<span class="f-avatar {size}" data-who="{who}" aria-label="{name}" title="{name}">{who}</span>'
+
+
+def button(label, name=None, kind='', attrs=''):
+    cls = ('bevel-button ' + kind).strip()
+    inner = (icon(name, 15) if name else '') + f'<span class="bevel-button__label">{label}</span>'
+    return f'<button type="button" class="{cls}" {attrs}>{inner}</button>'
+
+
+TASKS = {
+    'backlog': [
+        dict(id='FN-109', title='Archive the 2025 field notes', labels=['editorial'], priority='normal', due='Sep 19', people=['SP'], comments=0, files=0),
+        dict(id='FN-110', title='Print-ready export for the field guide', labels=['engineering'], priority='normal', due='Sep 24', people=['AR'], check=(0, 3), comments=1, files=0),
+        dict(id='FN-111', title='Photograph the studio for the cover', labels=['design'], priority='normal', due='Sep 26', people=['MC'], comments=0, files=1),
+    ],
+    'next': [
+        dict(id='FN-101', title='Turn research into a field guide', labels=['editorial'], priority='high', due='Sep 10', people=['SP'], check=(2, 5), comments=3, files=2,
+             desc='A useful home for what we learned in the interviews.'),
+        dict(id='FN-102', title='Shape the cover story', labels=['design'], priority='normal', due='Sep 11', people=['MC', 'SP'], comments=2, files=1, cover=True),
+        dict(id='FN-103', title='Invite the next four collaborators', labels=['studio'], priority='normal', due='Sep 12', people=['JP'], check=(0, 4), comments=0, files=0),
+    ],
+    'progress': [
+        dict(id='FN-104', title='Make room for good work', labels=['design', 'launch'], priority='urgent', due='Today', due_kind='today', people=['MC', 'AR'], check=(3, 4), comments=8, files=3,
+             desc='Finish the new project experience. Keep the first step calm and easy to return to.', blocked_by='FN-105'),
+        dict(id='FN-105', title='Polish the document export', labels=['engineering'], priority='high', due='Sep 07', due_kind='overdue', people=['AR'], check=(1, 3), comments=4, files=0, blocks='FN-104'),
+        dict(id='FN-106', title='Give every empty state a voice', labels=['editorial'], priority='normal', due='Sep 09', people=['SP'], check=(2, 3), comments=1, files=0),
+    ],
+    'done': [
+        dict(id='FN-107', title='A calmer workspace navigation', labels=['design'], priority='normal', due='Sep 08', due_kind='done', people=['MC'], check=(4, 4), comments=5, files=2),
+        dict(id='FN-108', title='Write the first welcome', labels=['editorial'], priority='normal', due='Sep 07', due_kind='done', people=['SP', 'JP'], check=(3, 3), comments=2, files=0),
+    ],
+}
+
+LANES = [
+    ('backlog', 'Backlog', '', 'Ideas that are not scheduled yet.', 'Nothing waiting'),
+    ('next', 'Up next', '', 'Scheduled for this week.', 'Nothing scheduled'),
+    ('progress', 'In progress', 'WIP 3 / 3', 'Being worked on right now.', 'Nothing in progress'),
+    ('done', 'Done', 'This week', 'Finished and reviewed.', 'Nothing finished yet'),
+]
+
+LABEL_NAMES = {'design': 'Design', 'editorial': 'Editorial', 'engineering': 'Engineering', 'studio': 'Studio', 'launch': 'Launch'}
+
+
+def label(key):
+    return f'<span class="kb-label" data-label="{key}">{LABEL_NAMES[key]}</span>'
+
+
+def priority(p):
+    text = {'urgent': 'Urgent', 'high': 'High', 'normal': 'Normal'}[p]
+    return f'<span class="kb-priority" data-priority="{p}">{icon("flag", 11)}{text}</span>'
+
+
+def card(t, selected=False):
+    classes = ['kb-card']
+    if selected: classes.append('is-selected')
+    if t.get('due_kind') == 'done': classes.append('is-done')
+    if t.get('blocked_by'): classes.append('is-blocked')
+    parts = [f'<article class="{" ".join(classes)}" data-task="{t["id"]}" {"aria-current=true" if selected else ""}>']
+    if t.get('cover'):
+        parts.append('<figure class="kb-cover"><img src="../../fixtures/workspace.jpg" alt="The studio desk, a reference for the cover"><figcaption>Cover reference</figcaption></figure>')
+    parts.append(f'<div class="kb-card-top"><span class="kb-id">{t["id"]}</span>{priority(t["priority"])}</div>')
+    parts.append(f'<h3>{t["title"]}</h3>')
+    if t.get('desc'):
+        parts.append(f'<p class="kb-desc">{t["desc"]}</p>')
+    parts.append('<div class="kb-labels">' + ''.join(label(l) for l in t['labels']) + '</div>')
+    if t.get('blocked_by'):
+        parts.append(f'<div class="kb-dep is-blocked">{icon("lock", 12)}<span>Blocked by <b>{t["blocked_by"]}</b> · Font licensing</span></div>')
+    if t.get('blocks'):
+        parts.append(f'<div class="kb-dep">{icon("link", 12)}<span>Blocks <b>{t["blocks"]}</b> · Make room for good work</span></div>')
+    if t.get('check'):
+        done, total = t['check']
+        pct = round(done / total * 100)
+        parts.append(f'<div class="kb-check" aria-label="Checklist {done} of {total}"><i class="kb-check-bar"><b style="width:{pct}%"></b></i><span class="kb-check-count">{done}/{total}</span></div>')
+    kind = t.get('due_kind', '')
+    due_icon = 'check' if kind == 'done' else 'calendar'
+    meta = ''
+    if t['comments']: meta += f'<span>{icon("comment", 12)}{t["comments"]}</span>'
+    if t['files']: meta += f'<span>{icon("clip", 12)}{t["files"]}</span>'
+    parts.append(f'<footer class="kb-card-foot"><span class="kb-due" data-due="{kind}">{icon(due_icon, 12)}{t["due"]}</span><span class="kb-meta">{meta}</span><span class="kb-people">{"".join(avatar(p, "small") for p in t["people"])}</span></footer>')
+    parts.append('</article>')
+    return ''.join(parts)
+
+
+def lane(key, title, wip, blurb, empty_title, tasks, state):
+    empty = state == 'empty'
+    count = 0 if empty else len(tasks)
+    head = (f'<header class="kb-lane-head"><span class="kb-lane-mark" data-lane="{key}"></span><h2>{title}</h2>'
+            f'<span class="kb-count">{count}</span>'
+            + (f'<span class="kb-wip" data-full="{"true" if key == "progress" and not empty else "false"}">{wip}</span>' if wip and not empty else '')
+            + f'<button type="button" class="kb-icon" aria-label="Add a task to {title}">{icon("plus", 15)}</button></header>')
+    if empty:
+        cta = ''
+        if key == 'backlog':
+            cta = f'<div class="kb-empty-actions">{button("Add the first task", "plus", "bevel-button--small")}{button("Start from a template", "template", "bevel-button--small bevel-button--quiet")}</div>'
+        body = f'<div class="kb-lane-empty"><strong>{empty_title}</strong><p>{blurb}</p>{cta}</div>'
+    else:
+        body = ''.join(card(t, selected=(state == 'selected' and t['id'] == 'FN-104')) for t in tasks)
+        body += f'<button type="button" class="kb-add">{icon("plus", 13)}Add task</button>'
+    return f'<section class="kb-lane" data-lane="{key}" aria-label="{title}">{head}<div class="kb-lane-body">{body}</div></section>'
+
+
+def checklist_item(text, done):
+    return (f'<label class="bevel-checkbox bevel-checkbox--small kb-check-item"><input type="checkbox" class="bevel-sr-only" {"checked" if done else ""}>'
+            f'<span class="bevel-checkbox__box" aria-hidden="true"></span><span class="bevel-checkbox__label">{text}</span></label>')
+
+
+def panel():
+    return f'''<aside class="kb-panel" aria-label="Task FN-104">
+<header class="kb-panel-head"><span class="kb-id">FN-104</span><span class="kb-status" data-lane="progress">In progress {icon("chevron", 12)}</span><span class="kb-spacer"></span><button type="button" class="kb-icon" aria-label="Task options">{icon("more", 16)}</button><button type="button" class="kb-icon" aria-label="Close task">{icon("close", 16)}</button></header>
+<h2>Make room for good work</h2>
+<p class="kb-panel-lede">Finish the new project experience. Keep the first step calm, direct and easy to return to.</p>
+<dl class="kb-props">
+<dt>Assignees</dt><dd><span class="kb-people">{avatar("MC", "small")}{avatar("AR", "small")}</span>Mira Chen, Alex Rivera</dd>
+<dt>Priority</dt><dd>{priority("urgent")}</dd>
+<dt>Due</dt><dd><span class="kb-due" data-due="today">{icon("calendar", 12)}Today, Sep 08</span></dd>
+<dt>Labels</dt><dd class="kb-labels">{label("design")}{label("launch")}</dd>
+<dt>Estimate</dt><dd class="f-mono">3 days · 2 spent</dd>
+</dl>
+<section class="kb-panel-section"><h4>Checklist <b class="kb-check-count">3/4</b></h4><i class="kb-check-bar"><b style="width:75%"></b></i>
+{checklist_item("Set the project details", True)}{checklist_item("Check both colour modes", True)}{checklist_item("Review the compact layout", True)}{checklist_item("Get Jules’ final review", False)}
+</section>
+<section class="kb-panel-section"><h4>Blocked by <b class="kb-check-count">1</b></h4>
+<div class="kb-dep-row">{icon("lock", 14)}<div><b>FN-105</b> Polish the document export<small>In progress · Alex Rivera · <span class="kb-due" data-due="overdue">due Sep 07</span></small></div>{avatar("AR", "small")}</div>
+</section>
+<section class="kb-panel-section"><h4>Attachments <b class="kb-check-count">3</b></h4>
+<div class="kb-files"><a class="kb-file" href="#workspace"><img src="../../fixtures/workspace.jpg" alt=""><span>workspace.jpg<small>184 KB</small></span></a><a class="kb-file" href="#brief">{icon("doc", 18)}<span>project-brief.pdf<small>420 KB</small></span></a><a class="kb-file" href="#copy">{icon("doc", 18)}<span>welcome-copy.md<small>3 KB</small></span></a></div>
+</section>
+<section class="kb-panel-section"><h4>Activity <b class="kb-check-count">8</b></h4>
+<div class="kb-comment">{avatar("AR", "small")}<div><b>Alex Rivera <small>18 min ago</small></b><p>The new flow reads clearly. Ready for one last look at the copy.</p></div></div>
+<div class="kb-comment">{avatar("SP", "small")}<div><b>Sam Patel <small>2 h ago</small></b><p>Tightened the welcome line. It is on the card now.</p></div></div>
+<div class="kb-event"><span class="kb-event-dot"></span>Mira moved this from <b>Up next</b> to <b>In progress</b><small>Yesterday</small></div>
+<div class="kb-composer"><span>Leave a comment…</span><kbd>⌘ ↵</kbd></div>
+</section>
+<footer class="kb-panel-foot"><span class="f-mono">Created Sep 02 by Jules Park</span>{button("Open task", "expand", "bevel-button--small")}</footer>
+</aside>'''
+
+
+def kanban(state):
+    empty = state == 'empty'
+    total = 0 if empty else sum(len(v) for v in TASKS.values())
+    done = 0 if empty else len(TASKS['done'])
+    progress = 0 if empty else len(TASKS['progress'])
+    blocked = 0 if empty else 1
+    pct = 0 if empty else round(done / total * 100)
+    lanes = ''.join(lane(k, t, w, b, e, TASKS[k], state) for k, t, w, b, e in LANES)
+    tape = (f'<dl class="kb-tape"><div><dt>Open</dt><dd>{total - done}</dd></div><div><dt>In progress</dt><dd>{progress}<small>of 3</small></dd></div>'
+            f'<div><dt>Blocked</dt><dd data-tone="{"ox" if blocked else ""}">{blocked}</dd></div><div><dt>Done this week</dt><dd>{done}</dd></div>'
+            f'<div class="kb-tape-meter"><dt>Progress</dt><dd><i class="kb-check-bar"><b style="width:{pct}%"></b></i>{pct}%</dd></div></dl>')
+    filters = ('' if empty else f'<button type="button" class="kb-chip" aria-pressed="true">{icon("calendar", 13)}Due: this week{icon("close", 11)}</button>') + \
+        f'<button type="button" class="kb-chip">Assignee: anyone{icon("chevron", 12)}</button><button type="button" class="kb-chip">Label: all{icon("chevron", 12)}</button>'
+    empty_note = ('<div class="kb-empty-note"><strong>This board is empty.</strong> New tasks land in Backlog. Move them across the lanes as the work moves.</div>' if empty else '')
+    return f'''<main class="kb" data-state="{state}">
+<header class="kb-mast"><div class="kb-mast-title"><div class="kb-kicker">Northstar Studio<i>/</i>Project 004<i>/</i>Board</div><h1>Field notes</h1><p>Everything the studio is making for the field guide, in the order it will ship.</p></div>
+<div class="kb-mast-side"><div class="kb-team"><span class="kb-people">{"".join(avatar(p) for p in PEOPLE)}</span><small>4 people</small></div>{button("Share", "share")}{button("New task", "plus", "bevel-button--primary")}</div></header>
+<nav class="kb-views" aria-label="Views"><a href="#board" aria-current="page">{icon("board", 15)}Board<b>{total}</b></a><a href="#list">{icon("list", 15)}List</a><a href="#timeline">{icon("timeline", 15)}Timeline</a><a href="#calendar">{icon("calendar", 15)}Calendar</a><span class="kb-views-note">{icon("lock", 12)}Private · updated 10:42</span></nav>
+<div class="kb-tools"><label class="kb-search">{icon("search", 15)}<input type="search" placeholder="Search tasks" aria-label="Search tasks"><kbd>⌘ K</kbd></label>{filters}<span class="kb-spacer"></span><button type="button" class="kb-chip kb-chip-quiet">{icon("group", 13)}Group: status</button><button type="button" class="kb-chip kb-chip-quiet">{icon("sort", 13)}Sort: priority</button></div>
+{tape}{empty_note}
+<div class="kb-work {"has-panel" if state == "selected" else ""}"><div class="kb-board" tabindex="0" aria-label="Board lanes">{lanes}</div>{panel() if state == "selected" else ""}</div>
+<footer class="kb-foot"><span>{icon("board", 13)}Grouped by status · sorted by priority</span><span>{total} tasks · {done} done · 4 people</span></footer>
+</main>'''

package/examples/components/reference/fable/base-astra.css

@@ -0,0 +1,17 @@
+[hidden]{display:none!important}*{box-sizing:border-box}body{font-size:15px;line-height:1.5}button{cursor:pointer}button:disabled{cursor:not-allowed}h1,h2,h3,p{margin:0}h1,h2,h3{font-family:var(--bevel-font-serif);font-weight:400;line-height:1.1}h1{font-size:38px;letter-spacing:-.025em}h2{font-size:30px}h3{font-size:23px}a{color:var(--bevel-brass);text-underline-offset:3px}small,.muted{color:var(--bevel-muted)}small{font-size:12px}.mono,.eyebrow,kbd,time{font-family:var(--bevel-font-mono)}.eyebrow{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--bevel-muted);margin-bottom:12px}.specimen{padding:34px 38px;min-height:580px;position:relative}.specimen>header{margin-bottom:30px}.specimen>header p{color:var(--bevel-muted);margin-top:10px;max-width:490px}.row{display:flex;align-items:center;gap:12px}.between{justify-content:space-between}.wrap{flex-wrap:wrap}.stack{display:grid;gap:16px}.spacer{flex:1}.rule{border-top:1px solid var(--bevel-line);padding-top:18px;margin-top:20px}.panel{border:1px solid var(--bevel-line-2);background:var(--bevel-surface)}.pad{padding:24px}.well{background:var(--bevel-sunk);padding:18px}.note{font-size:12px;color:var(--bevel-muted);margin-top:20px}.actions{display:flex;justify-content:flex-end;gap:10px;align-items:center;flex-wrap:wrap;margin-top:24px}.bevel-button{font-size:14px;padding:6px 13px}.bevel-input,.bevel-select__field{font-size:15px}.field{display:grid;gap:7px;font-size:13px;font-weight:500}.field small{font-weight:400}.cols{display:grid;grid-template-columns:1fr 1fr;gap:18px}.tag{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--bevel-line-2);padding:3px 8px;font-size:12px;background:var(--bevel-sunk)}.tag button{padding:0;border:0;background:none;color:var(--bevel-muted);font-size:17px}.badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;padding:3px 7px;background:var(--bevel-brass-soft);color:var(--bevel-brass)}.good{color:var(--bevel-teal)}.bad{color:var(--bevel-ox)}.badge.good{background:var(--bevel-teal-soft)}.badge.bad{background:var(--bevel-ox-soft)}.notice{padding:14px 17px;background:var(--bevel-brass-soft);border-left:3px solid var(--bevel-brass);font-size:13px}.notice.error{background:var(--bevel-ox-soft);border-color:var(--bevel-ox);color:var(--bevel-ox)}.notice.success{background:var(--bevel-teal-soft);border-color:var(--bevel-teal);color:var(--bevel-teal)}.invalid{border-color:var(--bevel-ox)!important}.avatar{width:35px;height:35px;display:inline-grid;place-items:center;background:var(--bevel-brass-soft);color:var(--bevel-brass);font-family:var(--bevel-font-mono);font-size:11px;flex-shrink:0;border:1px solid var(--bevel-line-2)}.avatar.alt{background:var(--bevel-teal-soft);color:var(--bevel-teal)}.person{display:flex;align-items:center;gap:12px}.person strong{display:block;font-weight:500}.person small{display:block}.listrow{padding:13px 0;border-bottom:1px solid var(--bevel-line);display:flex;align-items:center;gap:12px}.listrow:last-child{border-bottom:0}.overlay-scene{background:var(--bevel-sunk);display:grid;place-items:center;min-height:580px;padding:35px 28px}.micromodal__container{position:relative;border:2px solid light-dark(#fff,#ECEAF2);outline:1px solid var(--bevel-line-2);background:var(--bevel-surface);max-width:490px;width:100%;box-shadow:var(--bevel-shadow)}.micromodal__inner{padding:38px 40px 30px}.micromodal__heading{font-size:34px;margin-bottom:12px}.micromodal__content>p{color:var(--bevel-muted);margin-bottom:22px}.micromodal__close{position:absolute;right:-2px;top:-2px;width:32px;height:32px;background:var(--bevel-ink);border:2px solid light-dark(#fff,#ECEAF2);color:var(--bevel-ground);padding:7px}.micromodal__close svg{width:14px;height:14px;display:block}.micromodal__buttons{border-top:1px solid var(--bevel-line);padding-top:22px;margin-top:26px;display:flex;gap:9px;justify-content:flex-end;flex-wrap:wrap}.scroll-copy{max-height:210px;overflow:auto;padding-right:14px}.scroll-copy p{margin:12px 0;color:var(--bevel-muted)}.menu{width:280px;padding:7px;background:var(--bevel-surface);border:1px solid var(--bevel-line-2);box-shadow:var(--bevel-shadow)}.menu button{display:flex;width:100%;align-items:center;gap:12px;border:0;background:none;padding:9px 12px;text-align:left;font-size:14px;color:var(--bevel-ink)}.menu button:hover{background:var(--bevel-sunk)}.menu button:disabled{color:var(--bevel-faint)}.menu button.danger{color:var(--bevel-ox)}.menu kbd{margin-left:auto;font-size:10px;color:var(--bevel-muted)}.menu hr{border:0;border-top:1px solid var(--bevel-line);margin:5px}.menu-title{padding:8px 12px;font:10px var(--bevel-font-mono);color:var(--bevel-muted);letter-spacing:.08em}.anchor-stage{position:relative;min-height:360px;padding:24px;background:var(--bevel-sunk)}.anchor-stage .menu{margin-top:7px}.drawer-scene{padding:0;display:grid;grid-template-columns:1fr minmax(320px,440px);background:var(--bevel-sunk)}.drawer-underlay{padding:35px 22px;color:var(--bevel-muted)}.drawer-panel{height:580px;border-left:1px solid var(--bevel-line-2);background:var(--bevel-surface);display:flex;flex-direction:column}.drawer-panel header{padding:30px 28px 22px;border-bottom:1px solid var(--bevel-line)}.drawer-panel main{padding:24px 28px;overflow:auto;flex:1}.drawer-panel footer{padding:18px 28px;border-top:1px solid var(--bevel-line)}.detail-grid{display:grid;grid-template-columns:90px 1fr;gap:17px;font-size:13px}.detail-grid dt{color:var(--bevel-muted)}.detail-grid dd{margin:0}.popconfirm{position:relative;width:330px;max-width:100%;margin-top:12px;padding:22px;background:var(--bevel-surface);border:1px solid var(--bevel-line-2)}.popconfirm:before{content:'';position:absolute;top:-6px;left:30px;width:10px;height:10px;transform:rotate(45deg);background:var(--bevel-surface);border-top:1px solid var(--bevel-line-2);border-left:1px solid var(--bevel-line-2)}.picker{max-width:460px;margin:auto}.picker-options{border:1px solid var(--bevel-line-2);border-top:0;background:var(--bevel-surface);padding:6px}.option{display:flex;align-items:center;gap:12px;padding:10px 12px;background:none;border:0;text-align:left;width:100%;color:var(--bevel-ink)}.option:hover,.option.selected{background:var(--bevel-sunk)}.option .tick{margin-left:auto;color:var(--bevel-brass)}.choice{display:flex;gap:15px;padding:22px;border:1px solid var(--bevel-line-2);cursor:pointer;background:var(--bevel-surface)}.choice:has(:checked){border-color:var(--bevel-brass);background:var(--bevel-brass-soft)}.choice:has(:disabled){opacity:.5;cursor:not-allowed}.choice strong{display:block;font-size:16px}.choice p{font-size:13px;color:var(--bevel-muted);margin:7px 0}.choice input{margin-top:4px}.dropzone{display:grid;place-items:center;text-align:center;padding:44px 25px;border:1px dashed var(--bevel-faint);background:var(--bevel-surface)}.drop-icon{font:40px var(--bevel-font-serif);margin-bottom:12px}.dropzone p{color:var(--bevel-muted);font-size:13px;margin:10px 0 20px}.image-thumb{width:70px;height:56px;object-fit:cover}.progress{height:4px;background:var(--bevel-line);margin-top:11px}.progress span{display:block;height:100%;background:var(--bevel-brass)}.qc-stage{position:relative;line-height:0;overflow:hidden;background:#11131e}.qc-stage>img{width:100%;height:280px;object-fit:cover;display:block}.qc-dim{position:absolute;inset:0;background:rgba(0,0,0,.48);clip-path:polygon(0 0,100% 0,100% 100%,0 100%,0 0,15% 20%,15% 80%,85% 80%,85% 20%,15% 20%)}.qc-box{position:absolute;left:15%;top:20%;width:70%;height:60%;outline:1px solid white}.qc-box:before,.qc-box:after{content:'';position:absolute;inset:33.333% 0;border-top:1px solid #ffffff80;border-bottom:1px solid #ffffff80}.qc-box:after{inset:0 33.333%;border:0;border-left:1px solid #ffffff80;border-right:1px solid #ffffff80}.qc-handle{position:absolute;width:9px;height:9px;background:white}.qc-nw{left:-4px;top:-4px}.qc-ne{right:-4px;top:-4px}.qc-sw{left:-4px;bottom:-4px}.qc-se{right:-4px;bottom:-4px}.qc-bar{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}.setting{display:grid;grid-template-columns:1fr 180px;gap:25px;padding:23px 0;border-bottom:1px solid var(--bevel-line);align-items:center}.setting p{font-size:13px;color:var(--bevel-muted);margin-top:5px}.settings-disabled{opacity:.6}.inline-title{padding:22px 0;border-top:1px solid var(--bevel-line);border-bottom:1px solid var(--bevel-line);margin-top:26px}.sidebar-layout{display:grid;grid-template-columns:225px 1fr;min-height:580px}.sidebar{background:var(--bevel-surface);border-right:1px solid var(--bevel-line-2);padding:25px 16px;display:flex;flex-direction:column;gap:25px}.navitem{display:flex;gap:12px;align-items:center;padding:9px 10px;background:none;border:0;color:var(--bevel-muted);width:100%;text-align:left}.navitem.active{background:var(--bevel-brass-soft);color:var(--bevel-ink);border-left:2px solid var(--bevel-brass)}.navitem .count{margin-left:auto;font:11px var(--bevel-font-mono)}.sidebar-content{padding:38px 26px}.sidebar-compact{grid-template-columns:66px 1fr}.sidebar-compact .sidebar{padding:25px 8px}.sidebar-compact .navitem{justify-content:center;padding:10px 6px}.toolbar{padding:12px;border:1px solid var(--bevel-line-2);display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--bevel-surface)}.toolbar .bevel-input{width:170px}.toolbar-sep{height:26px;border-left:1px solid var(--bevel-line-2)}.breadcrumb{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:13px;padding:14px 0;border-bottom:1px solid var(--bevel-line)}.breadcrumb span{color:var(--bevel-faint)}.breadcrumb strong{font-weight:500}.pagination{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.pagination .bevel-button{min-width:35px;padding:5px 9px}.pagination .current{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)}table{border-collapse:collapse;width:100%;font-size:13px}th{text-align:left;font-weight:500;color:var(--bevel-muted);font-size:11px;text-transform:uppercase;letter-spacing:.055em;padding:13px 12px;background:var(--bevel-sunk)}td{padding:15px 12px;border-bottom:1px solid var(--bevel-line)}td.numeric{text-align:right;font-family:var(--bevel-font-mono);white-space:nowrap}.table-scroll{overflow:auto}.tree{font-size:14px}.tree details{margin-left:20px}.tree>details{margin-left:0}.tree summary{padding:10px;cursor:pointer}.tree button{display:block;margin-left:27px;border:0;padding:9px 12px;width:calc(100% - 27px);text-align:left;background:none;color:var(--bevel-ink)}.tree button.selected{background:var(--bevel-brass-soft);border-left:2px solid var(--bevel-brass)}.wizard{display:grid;grid-template-columns:170px 1fr;gap:30px}.wizard-steps{border-right:1px solid var(--bevel-line);padding-right:20px}.wizard-step{padding:0 0 28px;color:var(--bevel-muted);font-size:13px}.wizard-step b{display:block;font-family:var(--bevel-font-mono);margin-bottom:8px;color:var(--bevel-brass)}.wizard-step.current{color:var(--bevel-ink);font-weight:600}.toast-space{background:var(--bevel-sunk);padding:25px;display:grid;gap:12px;max-width:560px;margin:auto}.toast{display:flex;align-items:flex-start;gap:13px;background:var(--bevel-surface);border:1px solid var(--bevel-line-2);border-left:3px solid var(--bevel-teal);padding:16px}.toast.error{border-left-color:var(--bevel-ox)}.toast.action{border-left-color:var(--bevel-brass)}.toast p{font-size:13px;color:var(--bevel-muted);margin-top:3px}.toast .close{border:0;background:none;color:var(--bevel-muted);font-size:18px}.save-dot{display:inline-block;width:7px;height:7px;background:currentColor;margin-right:7px}.code-shell{border:1px solid var(--bevel-line-2);background:var(--bevel-surface)}.code-head{display:flex;gap:12px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--bevel-line);font:12px var(--bevel-font-mono);flex-wrap:wrap}.code-lines{margin:0;padding:20px 20px 20px 48px;overflow:auto;font:12px/2 var(--bevel-font-mono);color:var(--bevel-ink-2);white-space:pre}.code-lines li{padding-left:12px}.code-lines li::marker{color:var(--bevel-faint)}.code-lines.wrap-code{white-space:pre-wrap;overflow-wrap:anywhere}.syntax{color:var(--bevel-teal)}.diff-line{font:12px/2 var(--bevel-font-mono);padding:3px 15px;overflow-wrap:anywhere}.diff-line.add{background:var(--bevel-teal-soft);color:var(--bevel-teal)}.diff-line.remove{background:var(--bevel-ox-soft);color:var(--bevel-ox)}.diff-line mark{color:inherit;background:color-mix(in srgb,currentColor 15%,transparent)}.diff-split{display:grid;grid-template-columns:1fr 1fr}.diff-split>div+div{border-left:1px solid var(--bevel-line)}.timeline{margin-left:16px;border-left:1px solid var(--bevel-line-2);padding-left:27px}.event{position:relative;padding-bottom:24px}.event .avatar{position:absolute;left:-45px;top:0;width:33px;height:33px;border:4px solid var(--bevel-ground)}.event p{font-size:14px}.event time{font-size:10px;color:var(--bevel-muted);display:block;margin-top:5px}.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--bevel-line-2);border-bottom:1px solid var(--bevel-line-2)}.stat{padding:26px 20px}.stat+.stat{border-left:1px solid var(--bevel-line)}.stat-value{font:34px var(--bevel-font-mono);letter-spacing:-.06em;margin:14px 0}.stat small{font:11px var(--bevel-font-mono)}.sparkline{height:42px;width:100%;margin-top:24px;color:var(--bevel-brass)}.chart{width:100%;height:auto;color:var(--bevel-brass);overflow:visible}.chart text{fill:var(--bevel-muted);font:11px var(--bevel-font-mono)}.chart .grid{stroke:var(--bevel-line)}.chart .data{fill:var(--bevel-brass)}.chart .line{fill:none;stroke:var(--bevel-brass);stroke-width:3}.avatar-pile{display:flex;padding-left:7px}.avatar-pile .avatar{margin-left:-7px;width:44px;height:44px;border:3px solid var(--bevel-surface)}.avatar img{width:100%;height:100%;object-fit:cover}.filters{display:grid;gap:12px}.filter-row{display:grid;grid-template-columns:40px 1fr 1fr 1.1fr 30px;gap:8px;align-items:center}.filter-row .bevel-select__field{font-size:13px;padding:7px}.filter-row>span{font:10px var(--bevel-font-mono);color:var(--bevel-muted)}.icon-button{border:0;background:none;font-size:17px;color:var(--bevel-muted);padding:4px}.column-item{display:flex;align-items:center;gap:12px;padding:12px;border-bottom:1px solid var(--bevel-line)}.column-item label{flex:1}.split-work{display:grid;grid-template-columns:230px 8px 1fr;min-height:360px;border:1px solid var(--bevel-line-2)}.split-list{padding:10px;background:var(--bevel-sunk)}.split-list button{border:0;background:none;width:100%;padding:16px 12px;text-align:left;color:var(--bevel-ink);border-bottom:1px solid var(--bevel-line)}.split-list button.selected{background:var(--bevel-surface);border-left:2px solid var(--bevel-brass)}.divider{background:var(--bevel-line);display:grid;place-items:center;color:var(--bevel-faint);font-size:11px}.split-detail{padding:28px;min-width:0}.richclay-toolbar{display:flex;align-items:center;gap:3px;flex-wrap:wrap;padding:8px;background:var(--bevel-sunk);border:1px solid var(--bevel-line-2);position:relative}.richclay-button{min-width:31px;min-height:32px;background:var(--bevel-face);border:2px solid;border-color:var(--bevel-edge-hi) var(--bevel-edge-lo) var(--bevel-edge-lo) var(--bevel-edge-hi);padding:3px 7px;color:var(--bevel-ink);font-size:14px}.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)}.richclay-separator{height:22px;border-left:1px solid var(--bevel-line-2);margin:0 6px}.richclay-menu-wrap{position:relative}.richclay-menu{position:absolute;z-index:3;top:40px;left:0;width:200px;background:var(--bevel-surface);border:1px solid var(--bevel-line-2);padding:7px}.richclay-menu-item{display:block;background:none;border:0;width:100%;padding:9px;text-align:left;color:var(--bevel-ink)}.richclay-menu-item:hover{background:var(--bevel-sunk)}.richclay-editor{padding:30px;background:var(--bevel-surface);border:1px solid var(--bevel-line-2);border-top:0;min-height:240px}.richclay-editor p{margin:15px 0;color:var(--bevel-ink-2);line-height:1.75}.richclay-editor blockquote{border-left:2px solid var(--bevel-brass);margin:22px 0;padding-left:20px;font-family:var(--bevel-font-serif);font-size:22px}.richclay-link-dialog{border:1px solid var(--bevel-line-2);padding:18px;background:var(--bevel-surface);max-width:410px;margin-top:14px}.kanban{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.kanban-column{background:var(--bevel-sunk);padding:12px;min-height:320px}.kanban-column>header{display:flex;justify-content:space-between;font-size:12px;font-weight:500;padding:3px 0 14px}.kanban-card{padding:16px 13px;background:var(--bevel-surface);border:1px solid var(--bevel-line-2);margin-bottom:10px;font-size:14px}.kanban-card.selected{border:2px solid var(--bevel-brass);padding:15px 12px}.kanban-card .tag{font-size:10px;padding:2px 5px;margin-bottom:12px}.kanban-card footer{margin-top:20px;display:flex;align-items:center;justify-content:space-between}.kanban-card .avatar{width:25px;height:25px;font-size:9px}.empty-column{border:1px dashed var(--bevel-line-2);padding:25px 10px;text-align:center;color:var(--bevel-muted);font-size:12px}.hcms-context{display:grid;grid-template-columns:1fr 355px;padding:0;min-height:720px}.hcms-preview{padding:38px 25px;background:var(--bevel-sunk)}.hcms-preview img{width:100%;height:130px;object-fit:cover;margin:22px 0}.hcms-shell{background:var(--bevel-surface);border-left:1px solid var(--bevel-line-2);height:720px;overflow:auto}.hcms-shell-body{padding:24px}.hcms-shell-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:24px}.hcms-shell-title{font-size:30px}.hcms-shell-eyebrow{font:10px var(--bevel-font-mono);color:var(--bevel-muted);margin-bottom:10px}.hcms-form{display:grid;gap:18px}.hcms-field{display:grid;gap:7px;font-size:12px}.hcms-field textarea{font-size:13px;min-height:38px;padding:8px;resize:vertical}.hcms-object{padding-top:18px;border-top:1px solid var(--bevel-line)}.hcms-object-title,.hcms-array-title{font:13px var(--bevel-font-sans);font-weight:600;margin-bottom:12px}.hcms-object-fields{padding-left:14px;border-left:1px solid var(--bevel-line-2);display:grid;gap:12px}.hcms-array-items{display:grid;gap:8px}.hcms-card{border:1px solid var(--bevel-line-2);padding:12px;display:flex;gap:10px;background:var(--bevel-sunk)}.hcms-card-body{flex:1;min-width:0}.hcms-card-fields{display:grid;gap:10px}.hcms-card-controls{text-align:right}.hcms-error{color:var(--bevel-ox);font-size:12px}.hcms-upload img{width:90px;height:64px;object-fit:cover}.hcms-shell-footer{margin-top:20px;padding-top:20px;border-top:1px solid var(--bevel-line)}.index-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;background:var(--bevel-line);border:1px solid var(--bevel-line)}.index-grid a{padding:22px;background:var(--bevel-surface);text-decoration:none;color:var(--bevel-ink)}.index-grid a:hover{background:var(--bevel-brass-soft)}.index-grid strong{display:block;font-family:var(--bevel-font-serif);font-size:23px;margin:6px 0}.local-result:empty{display:none}.local-result{font-size:12px;color:var(--bevel-teal);padding-top:12px}
+@media(max-width:520px){.specimen{padding:26px 20px;min-height:580px}h1{font-size:32px}.cols{grid-template-columns:1fr}.overlay-scene{padding:25px 18px}.micromodal__inner{padding:34px 25px 25px}.micromodal__heading{font-size:29px}.drawer-scene{padding:0;grid-template-columns:1fr}.drawer-underlay{display:none}.drawer-panel{border-left:0}.setting{grid-template-columns:1fr;gap:12px;padding:18px 0}.setting>label,.setting>button,.setting>select{justify-self:start}.sidebar-layout{grid-template-columns:170px 1fr}.sidebar-content{padding:28px 18px}.sidebar-compact{grid-template-columns:62px 1fr}.sidebar-content h1{font-size:27px}.wizard{grid-template-columns:1fr;gap:15px}.wizard-steps{display:flex;border:0;border-bottom:1px solid var(--bevel-line);gap:20px}.wizard-step{padding-bottom:16px;font-size:11px}.wizard-step b{margin-bottom:4px}.stat-grid{grid-template-columns:1fr}.stat{padding:18px 0}.stat+.stat{border-left:0;border-top:1px solid var(--bevel-line)}.stat-value{margin:6px 0;font-size:30px}.stat .sparkline{display:none}.stat{display:grid;grid-template-columns:1fr 1fr;align-items:center}.stat>small{grid-column:2}.filter-row{grid-template-columns:28px 1fr 1fr 25px;gap:5px}.filter-row>input{grid-column:2/4}.filter-row>button{grid-column:4;grid-row:1/3}.filter-row .bevel-select__field{font-size:11px;padding-left:5px;padding-right:20px}.split-work{grid-template-columns:120px 5px 1fr}.split-detail{padding:20px 15px}.split-detail h2{font-size:25px}.split-list{padding:5px}.split-list button{padding:14px 8px;font-size:12px}.richclay-editor{padding:22px}.kanban{overflow-x:auto;grid-template-columns:repeat(3,185px);padding-bottom:12px}.hcms-context{padding:0;grid-template-columns:1fr}.hcms-preview{display:none}.hcms-shell{border:0;width:100%;height:720px}.diff-split{grid-template-columns:1fr}.diff-split>div+div{border:0;border-top:1px solid var(--bevel-line)}.qc-stage>img{height:230px}.pad{padding:20px}.anchor-stage{padding:20px}.menu{max-width:100%}.toast-space{padding:15px}.toolbar .bevel-input{width:100%}}
+body[data-component="tree-view"] .tree summary{padding:7px 10px}body[data-component="tree-view"] .tree button{padding:7px 12px}body[data-component="tree-view"] .specimen>header{margin-bottom:22px}
+body[data-component="toast-stack"] .specimen>header{margin-bottom:22px}body[data-component="toast-stack"] .toast-space{padding:16px;gap:9px}body[data-component="toast-stack"] .toast{padding:12px}body[data-component="toast-stack"] .toast .bevel-button{padding:2px 8px;margin-top:4px}body[data-component="toast-stack"] .actions{margin-top:18px}
+body[data-component="column-manager"] .panel .pad{padding:16px 20px}body[data-component="column-manager"] .panel h2{font-size:26px}body[data-component="column-manager"] .panel .note{margin-top:8px}body[data-component="column-manager"] .column-item{padding:8px 12px}body[data-component="column-manager"] .column-item .bevel-button{padding:2px 7px;font-size:12px}
+body[data-component="filter-builder"] .specimen{padding-top:28px;padding-bottom:26px}body[data-component="filter-builder"] .specimen>header{margin-bottom:20px}body[data-component="filter-builder"] .panel.pad{padding:18px}body[data-component="filter-builder"] td{padding:10px 12px}body[data-component="filter-builder"] .actions{margin-top:16px}
+body[data-component="upload-dropzone"] [data-ref-state="crop"] .qc-stage>img{height:235px}
+body[data-component="rich-text-toolbar"] .richclay-link-dialog{position:absolute;z-index:4;top:247px;right:56px;width:365px;box-shadow:var(--bevel-shadow)}body[data-component="rich-text-toolbar"] [data-ref-state="link"] .richclay-editor{min-height:290px}body[data-component="rich-text-toolbar"] [data-ref-state="floating"] .richclay-editor{padding:23px}body[data-component="rich-text-toolbar"] .richclay-editor p{font-size:14px;line-height:1.65}
+@media(max-width:520px){body[data-component="rich-text-toolbar"] .richclay-link-dialog{top:265px;right:30px;width:calc(100% - 60px)}body[data-component="rich-text-toolbar"] .richclay-editor{padding:20px}body[data-component="rich-text-toolbar"] .richclay-editor blockquote{font-size:19px;margin:16px 0}body[data-component="rich-text-toolbar"] [data-ref-state="floating"] .specimen>header{margin-bottom:18px}body[data-component="wizard-shell"] .specimen>header{margin-bottom:20px}body[data-component="wizard-shell"] .wizard-step small{display:none!important}body[data-component="wizard-shell"] .wizard .actions{margin-top:18px}body[data-component="pagination"] td{padding:10px 8px}body[data-component="selectable-cards"] .choice{padding:17px}body[data-component="selectable-cards"] .specimen>header{margin-bottom:20px}}
+.hcms-shell-body{padding:22px}.hcms-shell-header{margin-bottom:18px}.hcms-form{gap:13px}.hcms-field{gap:5px}.hcms-field textarea{min-height:32px;padding:5px 8px;font-size:12px;line-height:1.6}.hcms-object{padding-top:13px}.hcms-object-fields{gap:10px}.hcms-card{position:relative;padding:11px}.hcms-card-controls{position:absolute;top:3px;right:4px}.hcms-card-controls .bevel-button{font-size:10px;padding:0 5px}.hcms-upload img{height:51px;width:78px}.hcms-shell-footer{margin-top:15px;padding-top:15px}.hcms-shell-error{margin-bottom:12px}
+.choice{width:100%;position:relative}.option.bevel-checkbox{width:100%;align-items:center}.column-item .bevel-checkbox{align-items:center}.setting .bevel-toggle{justify-self:end}@media(max-width:520px){.setting .bevel-toggle{justify-self:start}}
+.choice{padding:18px 22px}.choice:has(:disabled){opacity:.75}
+
+.qc-stage[data-crop-ratio="16/9"]{container-type:inline-size;--crop-width:min(70cqw,350px);--crop-height:calc(var(--crop-width) * 9 / 16);--crop-left:calc((100cqw - var(--crop-width)) / 2);--crop-top:calc((100% - var(--crop-height)) / 2)}
+.qc-stage[data-crop-ratio="16/9"] .qc-box{left:var(--crop-left);top:var(--crop-top);width:var(--crop-width);height:var(--crop-height);aspect-ratio:16/9}
+.qc-stage[data-crop-ratio="16/9"] .qc-dim{clip-path:polygon(0 0,100% 0,100% 100%,0 100%,0 0,var(--crop-left) var(--crop-top),var(--crop-left) calc(var(--crop-top) + var(--crop-height)),calc(var(--crop-left) + var(--crop-width)) calc(var(--crop-top) + var(--crop-height)),calc(var(--crop-left) + var(--crop-width)) var(--crop-top),var(--crop-left) var(--crop-top))}
+.option strong{display:block;font-weight:500}.option small{display:block}