altitude-design 0.2.1 → 0.3.1

package/dist/guidance/references/build/checks/settings-pattern.mjs

@@ -0,0 +1,73 @@
+// Settings pattern: every section is a region named by its heading; a row's label and description name and describe its
+// control; an apply-now switch hovers while its write is pending, lands with "Saved", and a failed write drops into a
+// trench, says so and puts the switch back; a read-only section disables its rows and says why; the danger zone is the
+// same height as the other sections with a critical rim; general fields join one draft that the SaveBar saves; deleting
+// needs the workspace's name typed into a stationary dialog. Run after a render of every preview (it opens
+// test/p-SettingsPattern-daylight.html); exits non-zero on a failure.
+import { chromium } from 'playwright-core';
+const browser = await chromium.launch(process.env.CHROME ? { executablePath: process.env.CHROME } : {});
+const T = new URL('../test/', import.meta.url).pathname;
+let pass = 0, fail = 0;
+const expect = (c, m) => { if (c) pass++; else { fail++; console.log('FAIL', m); } };
+const page = await browser.newPage({ viewport: { width: 960, height: 900 } });
+await page.goto(`file://${T}p-SettingsPattern-daylight.html`);
+await page.waitForTimeout(400);
+
+const regions = await page.evaluate(() => [...document.querySelectorAll('.alt-settings-section')].map((s) => document.getElementById(s.getAttribute('aria-labelledby')).textContent));
+expect(regions.join() === 'General,Notifications,Billing,Danger zone', `each section is named by its heading (${regions})`);
+const digest = page.getByRole('switch', { name: 'Weekly digest' });
+expect(await digest.count() === 1, 'the row label names its switch');
+expect(await digest.evaluate((b) => b.getAttribute('aria-describedby').split(' ').map((id) => document.getElementById(id).textContent).join()) === 'A summary of activity every Monday.', 'and the description describes it');
+
+const row = (name) => page.evaluate((name) => { const r = [...document.querySelectorAll('.alt-settings-row')].find((r) => r.querySelector('.alt-settings-label').textContent === name);
+  return { status: r.dataset.status, words: r.querySelector('.alt-settings-status').textContent, checked: r.querySelector('[role="switch"]')?.getAttribute('aria-checked') }; }, name);
+await digest.click();
+await page.waitForTimeout(450);
+let r = await row('Weekly digest');
+expect(r.status === 'pending' && r.words === 'Saving…' && r.checked === 'false', `an apply-now change hovers while it saves (${JSON.stringify(r)})`);
+expect(await page.evaluate(() => getComputedStyle(document.querySelector('.alt-settings-row[data-status="pending"]')).animationName) === 'alt-hover', 'it hovers');
+await page.waitForTimeout(800);
+r = await row('Weekly digest');
+expect(r.status === 'committed' && r.words === 'Saved' && r.checked === 'false', `then lands, saved (${JSON.stringify(r)})`);
+await page.getByRole('switch', { name: 'Make the next change fail' }).click();
+await page.getByRole('switch', { name: 'Mentions' }).click();
+await page.waitForTimeout(1300);
+r = await row('Mentions');
+expect(r.status === 'failed' && /Couldn’t save/.test(r.words) && r.checked === 'true', `a failed write drops, says so and is put back (${JSON.stringify(r)})`);
+await page.getByRole('switch', { name: 'Make the next change fail' }).click();
+
+const billing = await page.evaluate(() => { const s = document.getElementById('st-billing'), f = s.querySelector('fieldset');
+  return { disabled: s.querySelector('input').matches(':disabled'), reason: document.getElementById(f.getAttribute('aria-describedby')).textContent }; });
+expect(billing.disabled && /Only workspace owners/.test(billing.reason), `a read-only section disables its rows and says why (${JSON.stringify(billing)})`);
+const danger = await page.evaluate(() => { const d = document.getElementById('st-danger'), g = document.getElementById('st-general'), cs = getComputedStyle(d);
+  return { tone: d.dataset.tone, inset: /inset/.test(cs.boxShadow), same: cs.transform === getComputedStyle(g).transform && cs.zIndex === getComputedStyle(g).zIndex }; });
+expect(danger.tone === 'critical' && danger.inset && danger.same, `the danger zone has a critical rim at the same height (${JSON.stringify(danger)})`);
+
+await page.fill('#ws-name', 'Acme Labs');
+await page.waitForTimeout(900);
+expect(await page.locator('.alt-savebar[data-state="open"], .alt-savebar:not([data-state="closed"])').count() === 1, 'a changed field opens the SaveBar');
+await page.fill('#ws-url', 'Acme Labs');
+await page.getByRole('button', { name: 'Save changes' }).click();
+await page.waitForTimeout(300);
+expect(await page.evaluate(() => document.activeElement.closest('.alt-error-summary') !== null), 'an invalid save focuses the error summary');
+await page.fill('#ws-url', 'acme-labs');
+await page.getByRole('button', { name: 'Save changes' }).click();
+await page.waitForTimeout(1400);
+expect(await page.inputValue('#ws-name') === 'Acme Labs' && await page.evaluate(() => !document.querySelector('.alt-savebar') || document.querySelector('.alt-savebar').dataset.state === 'closed'), 'saving lowers the bar and keeps the values');
+
+await page.getByRole('button', { name: 'Delete workspace' }).click();
+await page.waitForTimeout(500);
+const dialog = page.getByRole('dialog', { name: 'Delete Acme workspace?' });
+expect(await dialog.count() === 1, 'deleting asks in a dialog');
+expect(await page.evaluate(() => !document.querySelector('[data-receded]')), 'the dialog is stationary: nothing behind it recedes');
+const confirm = dialog.getByRole('button', { name: 'Delete workspace' });
+expect(await confirm.isDisabled(), 'confirming waits for the name');
+await dialog.getByLabel('Type Acme to confirm').fill('Acme');
+expect(!(await confirm.isDisabled()), 'typing the name enables it');
+await confirm.click();
+await page.waitForTimeout(1300);
+expect(await page.getByRole('heading', { name: 'Workspace deleted' }).count() === 1, 'and only a completed delete says so');
+
+console.log(`Settings pattern: ${pass} passed, ${fail} failed`);
+if (fail) process.exitCode = 1;
+await browser.close();

package/dist/guidance/references/build/checks/sync-pattern.mjs

@@ -0,0 +1,62 @@
+// Sync pattern: a change hovers as pending until the server acknowledges it, then lands, and the indicator says Saved
+// only then; offline, changes wait ("Waiting to sync"), the indicator counts them and nothing claims to be saved; going
+// online sends them; a conflict is counted by the indicator, which takes you to it, shows both versions (theirs with
+// their presence rim and name) and keeps the chosen one, saying what happened to the other; an expiring session asks in
+// a stationary dialog that Escape doesn't close and says the draft is kept. Run after a render of every preview (it opens
+// test/p-SyncPattern-daylight.html); exits non-zero on a failure.
+import { chromium } from 'playwright-core';
+const browser = await chromium.launch(process.env.CHROME ? { executablePath: process.env.CHROME } : {});
+const T = new URL('../test/', import.meta.url).pathname;
+let pass = 0, fail = 0;
+const expect = (c, m) => { if (c) pass++; else { fail++; console.log('FAIL', m); } };
+const page = await browser.newPage({ viewport: { width: 960, height: 800 } });
+await page.goto(`file://${T}p-SyncPattern-daylight.html`);
+await page.waitForTimeout(400);
+const indicator = () => page.evaluate(() => [...document.querySelectorAll('.alt-sync > :not(.alt-sr)')].map((n) => n.textContent).join(' '));
+const task = (name) => page.evaluate((name) => { const s = [...document.querySelectorAll('.sy-task')].find((t) => t.textContent.includes(name)); return { status: s.dataset.status || '', words: s.querySelector('.sy-state').textContent }; }, name);
+
+await page.getByText('Book the venue').click();
+await page.waitForTimeout(150);
+let t = await task('Book the venue');
+expect(t.status === 'pending' && t.words === 'Saving…' && !/Saved/.test(await indicator()), `a change is pending until acknowledged (${JSON.stringify(t)}, ${await indicator()})`);
+await page.waitForTimeout(800);
+t = await task('Book the venue');
+expect(t.status === 'committed' && /Saved/.test(await indicator()), `then lands, and only then is Saved said (${await indicator()})`);
+
+await page.getByRole('switch', { name: 'Online' }).click();
+await page.getByText('Send the press kit').click();
+await page.getByText('Draft the launch email').click();
+await page.waitForTimeout(1100);
+const a = await task('Send the press kit'), b = await task('Draft the launch email'), ind = await indicator();
+expect(a.status === 'pending' && b.status === 'pending' && a.words === 'Waiting to sync', `offline, changes wait (${JSON.stringify(a)})`);
+expect(/Offline/i.test(ind) && /2/.test(ind) && !/Saved/.test(ind), `the indicator counts them and claims nothing (${ind})`);
+await page.getByRole('switch', { name: 'Online' }).click();
+await page.waitForTimeout(900);
+expect((await task('Send the press kit')).status === 'committed' && (await task('Draft the launch email')).status === 'committed' && /Saved/.test(await indicator()), 'going online sends them');
+
+await page.getByRole('button', { name: 'Simulate a conflict' }).click();
+await page.waitForTimeout(300);
+expect(/1 conflict/.test(await indicator()), 'the indicator counts the conflict');
+await page.locator('.alt-sync').getByRole('button').last().click();
+await page.waitForTimeout(200);
+expect(await page.evaluate(() => document.activeElement.id) === 'sy-conflict-h', 'and takes you to it');
+const theirs = await page.evaluate(() => { const v = document.querySelector('.sy-version[data-presence]'); return { name: v.textContent, rim: getComputedStyle(v).boxShadow }; });
+expect(/Jane Park’s version/.test(theirs.name) && /inset/.test(theirs.rim), 'their version wears their presence rim and name');
+await page.getByRole('button', { name: 'Keep theirs' }).click();
+await page.waitForTimeout(300);
+expect(await page.evaluate(() => document.querySelector('.sy-brief').textContent) === 'Launch on 11 December, in Porto.' && /Yours is in the history/.test(await page.evaluate(() => document.querySelector('.sy-note').textContent)), 'the chosen version is kept, and the other is never silently dropped');
+
+await page.getByRole('button', { name: 'Simulate session expiry' }).click();
+await page.waitForTimeout(500);
+const dialog = page.getByRole('dialog', { name: 'Your session ends in 2 minutes' });
+expect(await dialog.count() === 1 && /kept on this device/.test(await dialog.textContent()), 'an expiring session asks, with the time in words, and keeps the draft');
+await page.keyboard.press('Escape');
+await page.waitForTimeout(300);
+expect(await dialog.count() === 1 && await page.locator('[data-receded]').count() === 0, 'it is stationary and Escape doesn’t dismiss it');
+await dialog.getByRole('button', { name: 'Stay signed in' }).click();
+await page.waitForTimeout(400);
+expect(await page.getByRole('dialog').count() === 0, 'Stay signed in closes it');
+
+console.log(`Sync pattern: ${pass} passed, ${fail} failed`);
+if (fail) process.exitCode = 1;
+await browser.close();

package/dist/guidance/references/build/checks/tells-lint.mjs

@@ -0,0 +1,164 @@
+// The tells of generated interfaces that are certain from source text (Distinctiveness, #320). Every `lint` tell in
+// project/tells.json has a rule here, and every rule names a tell there, so the two can't drift apart.
+// Scans the components' sources and styles, the previews, the tokens, the landing page and the example apps. No browser, no network.
+//   node checks/tells-lint.mjs              exits non-zero on a finding
+//   node checks/tells-lint.mjs --json       the findings as JSON
+//   node checks/tells-lint.mjs --self-test  only the rules' own test (it also runs first on every scan): each catches its
+//                                          example and passes its counter-example
+// An intentional exception is a comment on the line, or the line above: `tells-ignore: <id> <reason>`.
+import { readFileSync, readdirSync } from 'node:fs';
+import { fileURLToPath } from 'node:url';
+import { join, relative } from 'node:path';
+
+const root = fileURLToPath(new URL('../../', import.meta.url));
+const args = process.argv.slice(2);
+
+/* ── colour helpers ── */
+const hexRe = /#(?:[0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})\b/gi;
+function hsl(hex) {
+  let h = hex.slice(1);
+  if (h.length <= 4) h = [...h].map((c) => c + c).join('');
+  const [r, g, b] = [0, 2, 4].map((i) => parseInt(h.slice(i, i + 2), 16) / 255);
+  const a = h.length === 8 ? parseInt(h.slice(6, 8), 16) / 255 : 1;
+  const max = Math.max(r, g, b), min = Math.min(r, g, b), l = (max + min) / 2, d = max - min;
+  const s = d === 0 ? 0 : d / (1 - Math.abs(2 * l - 1));
+  let hue = 0;
+  if (d) hue = max === r ? ((g - b) / d) % 6 : max === g ? (b - r) / d + 2 : (r - g) / d + 4;
+  return { h: (hue * 60 + 360) % 360, s, l, a };
+}
+const isPurple = (hex) => { const c = hsl(hex); return c.s > 0.3 && c.h >= 250 && c.h <= 300; };
+const MEANING = /var\(--(?:accent|positive|caution|critical|data-|presence-)[\w-]*\)/;
+const loud = (color) => MEANING.test(color) || (color.match(hexRe) ?? []).some((h) => { const c = hsl(h); return c.a > 0.15 && (c.s > 0.35 || c.l > 0.7); });
+
+// Tailwind's default palette, a sample of the values generators reach for most. Extend it as reviews find more.
+const KIT_HEX = ['#3b82f6', '#2563eb', '#1d4ed8', '#6366f1', '#4f46e5', '#8b5cf6', '#7c3aed', '#a855f7', '#9333ea', '#ec4899', '#db2777', '#be185d',
+  '#f43f5e', '#ef4444', '#dc2626', '#f97316', '#ea580c', '#c2410c', '#f59e0b', '#eab308', '#22c55e', '#16a34a', '#10b981', '#059669', '#14b8a6',
+  '#0d9488', '#06b6d4', '#0ea5e9', '#0f172a', '#1e293b', '#64748b', '#111827', '#18181b'];
+const KIT_CLASS = /\b(?:bg|text|border|from|via|to|ring|fill|stroke)-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-\d{2,3}\b/;
+
+/* ── font helpers ── */
+const familyDecl = /(?:font-family:|--font-[\w-]+:|"(?:sans|mono|display)":)\s*([^;}\n]+)/;
+const firstFamily = (line) => { const m = line.match(familyDecl); return m ? m[1].split(',')[0].replace(/[\\"']/g, '').trim().toLowerCase() : null; };
+const DEFAULT_FONTS = ['inter', 'roboto', 'arial', 'helvetica', 'helvetica neue'];
+// TY5: a family is loaded if a Google Fonts import or an @font-face in the scanned files names it, or it's a system or
+// generic family. Filled in once the files are known (below).
+const LOADED = new Set(['system-ui', '-apple-system', 'blinkmacsystemfont', 'segoe ui', 'ui-sans-serif', 'ui-serif', 'ui-monospace', 'sf mono', 'sfmono-regular',
+  'menlo', 'consolas', 'monaco', 'sans-serif', 'serif', 'monospace', 'cursive', 'inherit', 'initial', 'unset', 'currentcolor']);
+const loaders = (text) => [...[...text.matchAll(/fonts\.googleapis\.com\/css2?\?[^'")\s]*/g)].flatMap((m) => [...m[0].matchAll(/family=([^:&]+)/g)].map((f) => decodeURIComponent(f[1]).replace(/\+/g, ' ').toLowerCase())),
+  ...[...text.matchAll(/@font-face\s*{[^}]*font-family:\s*["']?([^;"']+)/g)].map((m) => m[1].trim().toLowerCase())];
+const unloaded = (l) => { const f = firstFamily(l); return !!f && !f.startsWith('var(') && !LOADED.has(f); };
+const TASTEFUL_FONTS = ['space grotesk', 'geist', 'instrument serif', 'fraunces'];
+
+/* ── shadow and border helpers ── */
+const layers = (value) => { const out = []; let depth = 0, cur = ''; for (const ch of value) { if (ch === '(') depth++; if (ch === ')') depth--; if (ch === ',' && !depth) { out.push(cur); cur = ''; } else cur += ch; } out.push(cur); return out; };
+function glow(line) {
+  const m = line.match(/(?:box-shadow|text-shadow):\s*([^;}]+)/) ?? line.match(/drop-shadow\(([^)]*\)?[^)]*)\)/);
+  if (!m) return false;
+  return layers(m[1]).some((layer) => {
+    if (/\binset\b/.test(layer)) return false;
+    const lengths = layer.replace(/var\([^)]*\)|rgba?\([^)]*\)|#[0-9a-f]+/gi, ' ').trim().split(/\s+/).filter((x) => /^-?\d*\.?\d+(px)?$/.test(x)).map(parseFloat);
+    return (lengths[2] ?? 0) >= 8 && loud(layer);
+  });
+}
+function stripe(line) {
+  const m = line.match(/border-(?:left|top|inline-start|block-start)(?:-color)?:\s*([^;}]+)/);
+  if (!m) return false;
+  const width = +(m[1].match(/(\d*\.?\d+)px/)?.[1] ?? 2);
+  return width >= 2 && loud(m[1]);
+}
+function bounce(line) {
+  return [...line.matchAll(/cubic-bezier\(([^)]+)\)/g)].some((m) => { const [, y1, , y2] = m[1].split(',').map(Number); return [y1, y2].some((y) => y > 1.05 || y < -0.05); });
+}
+
+/* ── the rules, by tell id ── */
+const CSS = /\.(css|txt|tsx|ts)$/, MARKUP = /\.(txt|tsx)$/, ALL = /./;
+const rules = [
+  { id: 'CO1', files: ALL, test: (l) => /\b(?:from|via|to|bg|text|border|ring)-(?:indigo|violet|purple)-\d{2,3}\b/.test(l) || (/gradient\(/.test(l) && (l.match(hexRe) ?? []).some(isPurple)),
+    bad: 'background: linear-gradient(90deg, #6d28d9, #3b82f6);', good: 'background: linear-gradient(to bottom, #ffffff0f, #00000008);' },
+  { id: 'CO2', files: CSS, test: (l) => /background-clip:\s*text/.test(l), bad: '-webkit-background-clip: text;', good: 'background-clip: padding-box;' },
+  { id: 'CO6', files: CSS, test: glow, bad: 'box-shadow: 0 0 24px 4px var(--accent);', good: 'box-shadow: inset 0 1px 0 #ffffff12, 0 2px 6px -1px var(--alt-cast);' },
+  { id: 'CO8', files: ALL, test: (l) => KIT_CLASS.test(l) || KIT_HEX.some((h) => l.toLowerCase().includes(h)), bad: "{ hex: '#c2410c' }", good: "{ hex: '#2a6f9e' }" },
+  { id: 'TY1', files: ALL, test: (l) => DEFAULT_FONTS.includes(firstFamily(l)), bad: 'font-family: Inter, system-ui, sans-serif;', good: 'font-family: var(--font-sans);' },
+  { id: 'TY2', files: ALL, test: (l) => TASTEFUL_FONTS.includes(firstFamily(l)), bad: '--font-display: "Space Grotesk", sans-serif;', good: '--font-display: "Instrument Sans", sans-serif;' },
+  { id: 'TY5', files: ALL, test: unloaded, bad: '--font-display: "Recoleta", serif;', good: '--font-sans: "Instrument Sans", system-ui, sans-serif;' },
+  { id: 'TY4', files: CSS, test: (l) => /text-transform:\s*uppercase/.test(l), bad: '.kicker { text-transform: uppercase; letter-spacing: 0.06em; }', good: '.label { text-transform: none; }' },
+  { id: 'LA8', files: MARKUP, test: (l) => /<(?:span|p|div|small|strong)\b[^>]*>\s*0[1-9]\.?\s*<\//.test(l), bad: '<span className="step">02</span>', good: '<span className="step">Two</span>' },
+  { id: 'CM2', files: CSS, test: (l) => /backdrop-filter:(?!\s*none)/.test(l), bad: '.panel { backdrop-filter: blur(12px); }', good: '.panel { backdrop-filter: none; }' },
+  { id: 'CM3', files: CSS, test: stripe, bad: '.card { border-left: 4px solid var(--accent); }', good: '.cell { border-left: 1px solid var(--line); }' },
+  { id: 'CM5', files: MARKUP, test: (l) => /\b(?:BorderBeam|ShimmerButton|Meteors|Spotlight|AuroraBackground|BackgroundBeams|SparklesCore|Marquee)\b/.test(l), bad: '<BorderBeam size={250} />', good: '<Card>' },
+  { id: 'CM8', files: ALL, test: (l) => /#(?:ff5f57|febc2e|28c840|ffbd2e|27c93f)\b/i.test(l), bad: '.dot-red { background: #ff5f57; }', good: '.dot { background: var(--line); }' },
+  { id: 'MO1', files: ALL, test: (l) => /animation-timeline:\s*view\(|@keyframes\s+fade-?(?:in-?)?up\b/i.test(l), bad: '@keyframes fadeInUp { from { opacity: 0 } }', good: '@keyframes alt-rise { from { opacity: 0 } }' },
+  { id: 'MO2', files: ALL, test: bounce, bad: 'transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);', good: 'transition: transform 160ms cubic-bezier(0.2, 0.9, 0.25, 1);' },
+  { id: 'MO3', files: ALL, test: (l) => /count-?up/i.test(l), bad: '<CountUp end={1200} />', good: '<FormattedNumber value={1200} />' },
+  { id: 'IC1', files: MARKUP, test: (l) => /\p{Emoji_Presentation}|️/u.test(l), bad: '<Button>🚀 Launch</Button>', good: '<Button>Launch</Button>' },
+  { id: 'IC2', files: ALL, test: (l) => /sparkle/i.test(l), bad: '<SparkleIcon />', good: '<InfoIcon />' },
+  { id: 'CP1', files: MARKUP, test: (l) => /\b(?:seamless(?:ly)?|supercharge[sd]?|unleash(?:es|ed)?|empower(?:s|ed|ing)?|effortless(?:ly)?|revolutioni[sz]e[sd]?|game-?changer|next-level|cutting-edge|world-class)\b/i.test(l),
+    bad: 'Seamlessly sync your files', good: 'Sync your files' },
+  { id: 'CP2', files: MARKUP, test: (l) => /Welcome back!|Something went wrong|\bOops\b|>\s*(?:OK|Submit)\s*</.test(l), bad: '<Button>Submit</Button>', good: '<Button>Send invite</Button>' },
+  { id: 'CP3', files: MARKUP, test: (l) => /<(Button|Link|a)\b[^>]*>[^<]*(?:→|->)\s*<\/\1>/.test(l), bad: '<Button>Get started →</Button>', good: '<Button>Create workspace</Button>' },
+  { id: 'CP5', files: MARKUP, test: (l) => /<(Button|Link|a)\b[^>]*>\s*(?:Learn more|Read more|Click here|See more|More|Here)\s*<\/\1>/i.test(l), bad: '<Link href="/pricing">Learn more</Link>', good: '<Link href="/pricing">Compare plans</Link>' },
+  { id: 'CP4', files: MARKUP, test: (l) => /\bAI-powered\b/i.test(l), bad: 'The AI-powered inbox for modern teams', good: 'Sort your inbox by who is waiting' },
+  { id: 'CN1', files: /\.css$/, test: (l) => /(?:^|[{;\s])font-family:(?!\s*(?:var\(|inherit|initial|unset))/.test(l) && !/^\s*--/.test(l), bad: '.title { font-family: "Fraunces", serif; }', good: '.title { font-family: var(--font-sans); }' },
+];
+
+// Exceptions in files that can't hold a comment.
+const EXCEPTIONS = [
+  { file: 'project/tokens.json', id: 'MO2', includes: '"cubic-bezier(0.3, 1.3, 0.45, 1)"', reason: 'ease-settle: a documented 2–3% overshoot on thumbs and indicators (Motion), not a bounce.' },
+];
+
+/* ── which files ── */
+const walk = (dir, re) => readdirSync(join(root, dir), { withFileTypes: true }).flatMap((e) => e.isDirectory() ? walk(join(dir, e.name), re) : re.test(e.name) ? [join(dir, e.name)] : []);
+const files = [
+  'project/components/bundle.css', 'build/previews.txt', 'project/tokens.json',
+  ...walk('project/components/src', /\.(ts|tsx)$/), ...walk('site', /\.(ts|tsx|css)$/), ...walk('examples/apps', /\.(ts|tsx|css)$/),
+];
+
+for (const f of files) for (const name of loaders(readFileSync(join(root, f), 'utf8'))) LOADED.add(name);
+
+function scan(file, text) {
+  const lines = text.split('\n'), found = [];
+  lines.forEach((line, i) => {
+    for (const rule of rules) {
+      if (!rule.files.test(file) && !(file.endsWith('.json') && /^(MO2|TY1|TY2|TY5)$/.test(rule.id))) continue;
+      if (!rule.test(line)) continue;
+      const ignored = (s) => new RegExp(`tells-ignore:\\s*(?:[A-Z]{2}\\d+,\\s*)*${rule.id}\\s+[A-Za-z]`).test(s ?? '');
+      if (ignored(line) || ignored(lines[i - 1])) continue;
+      if (EXCEPTIONS.some((e) => e.file === file && e.id === rule.id && line.includes(e.includes))) continue;
+      found.push({ id: rule.id, file, line: i + 1, text: line.trim().slice(0, 140) });
+    }
+  });
+  return found;
+}
+
+/* ── the catalog and the rules agree ── */
+const catalog = JSON.parse(readFileSync(join(root, 'project/tells.json'), 'utf8')).tells;
+const lintIds = catalog.filter((t) => t.detect === 'lint').map((t) => t.id);
+const problems = [];
+for (const r of rules) if (!catalog.some((t) => t.id === r.id)) problems.push(`rule ${r.id} names no tell in project/tells.json`);
+  else if (!lintIds.includes(r.id)) problems.push(`rule ${r.id}: tells.json says ${r.id} is detected by ${catalog.find((t) => t.id === r.id).detect}, not lint`);
+for (const id of lintIds) if (!rules.some((r) => r.id === id)) problems.push(`tells.json lists ${id} as lint, but no rule checks it`);
+
+// The rules test themselves on every run, so a broken pattern fails instead of passing everything.
+{
+  for (const r of rules) {
+    if (!r.test(r.bad)) problems.push(`${r.id}: missed its own example: ${r.bad}`);
+    if (r.test(r.good)) problems.push(`${r.id}: flagged a line it should pass: ${r.good}`);
+  }
+  if (scan('site/x.css', '.k { text-transform: uppercase; } /* tells-ignore: TY4 a printed label */').length !== 0) problems.push('tells-ignore with a reason was not honoured');
+  if (scan('site/x.css', '.k { text-transform: uppercase; } /* tells-ignore: TY4 */').length !== 1) problems.push('tells-ignore without a reason must not suppress');
+  if (args.includes('--self-test')) {
+    if (problems.length) { console.error(problems.join('\n')); process.exit(1); }
+    console.log(`tells-lint self-test: ${rules.length} rules, each catches its example and passes its counter-example`);
+    process.exit(0);
+  }
+}
+
+const findings = problems.length ? [] : files.flatMap((f) => scan(f, readFileSync(join(root, f), 'utf8')));
+if (args.includes('--json')) console.log(JSON.stringify({ problems, findings }, null, 2));
+else {
+  for (const p of problems) console.error(`tells-lint: ${p}`);
+  for (const f of findings) console.error(`${f.id}  ${relative(root, join(root, f.file))}:${f.line}  ${f.text}`);
+  if (!problems.length && !findings.length) console.log(`tells-lint: ${files.length} files, ${rules.length} rules, no tells (project/tells.json, Distinctiveness)`);
+  else if (findings.length) console.error(`\n${findings.length} finding(s). Fix them, or mark an intentional one with \`tells-ignore: <id> <reason>\` (see project/Distinctiveness.md).`);
+}
+process.exit(problems.length || findings.length ? 1 : 0);

package/dist/guidance/references/build/fixtures/pattern-workflows.tsx

@@ -0,0 +1,83 @@
+/** Runnable compositions. Import PatternWorkflows inside one AltitudeProvider.
+ * This controlled in-memory service demonstrates behavior, not server durability or authorization.
+ * Replace the adapters with your application operations and retain their accepted-result contracts.
+ */
+import * as React from 'react';
+import { Button, Field, Input, Dialog, ErrorSummary, WorkflowStatus, useEditRecord, useAsyncCollection,
+  useConsequentialAction, useReviewSubmit } from 'altitude-design';
+import type { EditRecordResult } from 'altitude-design';
+type RecordValue = { name: string };
+export function EditRecordExample({ initialValue, save }: { initialValue: RecordValue; save: (value: RecordValue) => Promise<EditRecordResult<RecordValue>> }) {
+  const form = useEditRecord({ initialValue, save, validationMode: 'submit', validate: value => value.name.trim() ? {} : { name: 'Enter a name.' } });
+  const [left, setLeft] = React.useState(false);
+  const id = React.useId();
+  if (left) return <p>You left the editor.</p>;
+  return <section aria-label="Edit record"><h2>Edit workspace</h2><form noValidate onSubmit={event => { event.preventDefault(); void form.submit(); }}>
+    <ErrorSummary errors={form.errors.name ? [{ id, label: 'Workspace name', message: form.errors.name }] : []} focusKey={form.submitCount} />
+    <Field label="Workspace name" error={form.errors.name}><Input id={id} value={form.draft.name} onChange={event => form.setField('name', event.target.value)} onBlur={() => form.validateField('name')} /></Field>
+    <Button type="submit" loading={form.phase === 'submitting'}>Save changes</Button>
+    <Button type="button" disabled={form.phase === 'submitting'} onClick={async () => { if (await form.requestLeave('cancel', () => window.confirm('Discard your unsaved changes?'))) setLeft(true); }}>Cancel editing</Button>
+  </form><WorkflowStatus>{form.status}</WorkflowStatus></section>;
+}
+export function AsyncCollectionExample({ load }: { load: (query: string, context: { signal: AbortSignal }) => Promise<readonly { id: string; name: string }[]> }) {
+  const collection = useAsyncCollection({ initialQuery: '', load, getKey: item => item.id, isFiltered: query => !!query, selection: 'preserve' });
+  return <section aria-label="Search records"><h2>Records</h2>
+    <Field label="Search records"><Input value={collection.query} onChange={event => collection.setQuery(event.target.value)} /></Field>
+    <Button onClick={collection.reset}>Reset search</Button><Button onClick={collection.refresh}>Refresh records</Button>
+    <WorkflowStatus>{collection.status}</WorkflowStatus>
+    {collection.phase === 'failed' && <Button onClick={collection.refresh}>Retry loading</Button>}
+    <ul aria-busy={collection.phase === 'loading' || collection.phase === 'refreshing'}>{collection.items.map(item => <li key={item.id}>
+      <label><input type="checkbox" checked={collection.selectedKeys.has(item.id)} onChange={() => collection.toggleSelection(item.id)} />{item.name}</label>
+    </li>)}</ul><p>{collection.selectedKeys.size} selected, including records outside this view.</p><Button onClick={collection.clearSelection}>Clear selection</Button>
+  </section>;
+}
+export function ConsequentialActionExample({ remove, restore }: { remove: () => Promise<{ ok: true; value: string } | { ok: false; error: string }>;
+  restore: (id: string) => Promise<{ ok: true } | { ok: false; error: string }> }) {
+  const fallback = React.useRef<HTMLHeadingElement>(null);
+  const action = useConsequentialAction({ target: 'Draft proposal', consequence: 'Move Draft proposal to trash. You can restore it here.',
+    requiresConfirmation: true, execute: remove, undo: restore, focusFallback: () => fallback.current });
+  const open = ['confirming', 'pending'].includes(action.phase) || (action.phase === 'failed' && !action.canUndo);
+  return <section><h2 ref={fallback} tabIndex={-1}>Manage proposal</h2>
+    {action.phase !== 'succeeded' && <Button onClick={action.request}>Delete Draft proposal</Button>}
+    <Dialog open={open} returnFocus={() => fallback.current} title={`Delete ${action.target}?`} description={action.consequence} dismissible={action.phase !== 'pending'}
+      onOpenChange={next => { if (!next) action.cancel(); }} footer={<>
+        <Button disabled={action.phase === 'pending'} onClick={action.cancel}>Keep proposal</Button>
+        <Button variant="danger" loading={action.phase === 'pending'} onClick={action.phase === 'failed' ? action.retry : action.confirm}>Delete proposal</Button>
+      </>}><p>{action.error || 'Review the target before continuing.'}</p></Dialog>
+    <WorkflowStatus>{action.status}</WorkflowStatus>
+    {action.canUndo && <Button onClick={action.undo}>Restore proposal</Button>}
+    {action.phase === 'failed' && action.canUndo && <Button onClick={action.retry}>Retry restoration</Button>}
+  </section>;
+}
+export function ReviewSubmitExample({ send }: { send: (draft: RecordValue) => Promise<{ ok: true; receipt: { reference: string } } | { ok: false; error: string }> }) {
+  const form = useReviewSubmit({ initialValue: { name: '' }, validate: value => value.name.trim() ? {} : { name: 'Enter a name.' }, submit: send });
+  const id = React.useId();
+  const heading = React.useRef<HTMLHeadingElement>(null);
+  const previousPhase = React.useRef(form.phase);
+  React.useEffect(() => {
+    if (previousPhase.current !== form.phase) {
+      if (form.phase === 'editing') document.getElementById(id)?.focus();
+      else if (form.phase === 'review' || form.phase === 'complete') heading.current?.focus();
+      previousPhase.current = form.phase;
+    }
+  }, [form.phase, id]);
+  return <section aria-label="Review and send"><h2 ref={heading} tabIndex={-1}>{form.phase === 'editing' ? 'Your answers' : form.phase === 'complete' ? 'Request received' : 'Review your answers'}</h2><p>Step {form.phase === 'editing' ? '1 of 2: Your answers' : form.phase === 'complete' ? '2 of 2: Complete' : '2 of 2: Review your answers'}</p>
+    {form.phase === 'editing' ? <form noValidate onSubmit={event => { event.preventDefault(); form.review(); }}><ErrorSummary errors={form.errors.name ? [{ id, label: 'Your name', message: form.errors.name }] : []} focusKey={form.submitCount} />
+      <Field label="Your name" error={form.errors.name}><Input id={id} value={form.draft.name} onChange={event => form.setField('name', event.target.value)} /></Field>
+      <Button type="submit">Review answers</Button></form> : form.phase === 'complete' ? <p>Confirmation: {form.receipt?.reference}</p> : <>
+      <dl><dt>Your name</dt><dd>{form.draft.name}</dd></dl>
+      <Button disabled={form.phase === 'submitting'} onClick={form.correct}>Correct your answers</Button><Button loading={form.phase === 'submitting'} onClick={form.submit}>Send request</Button>
+    </>}<WorkflowStatus>{form.status}</WorkflowStatus></section>;
+}
+export function PatternWorkflows() {
+  const data = React.useRef({ record: { name: 'Northwind' }, proposal: true, submissions: [] as RecordValue[] });
+  const fail = React.useRef(false);
+  const delay = () => new Promise<void>((resolve, reject) => setTimeout(() => { if (fail.current) { fail.current = false; reject(Error('Controlled failure')); } else resolve(); }, 350));
+  return <main><h1>Workflow examples</h1><p>This demo stores records in memory; reloading resets its data.</p>
+    <Button onClick={() => { fail.current = true; }}>Fail the next operation</Button>
+    <EditRecordExample initialValue={data.current.record} save={async value => { await delay(); data.current.record = { name: value.name.trim() }; return { ok: true, value: data.current.record }; }} />
+    <AsyncCollectionExample load={async query => { await delay(); return [{id:'workspace',name:data.current.record.name}].filter(item => item.name.toLowerCase().includes(query.toLowerCase())); }} />
+    <ConsequentialActionExample remove={async () => { await delay(); data.current.proposal = false; return {ok:true,value:'proposal'}; }} restore={async () => { await delay(); data.current.proposal = true; return {ok:true}; }} />
+    <ReviewSubmitExample send={async value => { await delay(); data.current.submissions.push(value); return {ok:true,receipt:{reference:`Request ${data.current.submissions.length}`}}; }} />
+  </main>;
+}

package/dist/guidance/references/build/fixtures/patterns/agent-action.jsx

@@ -0,0 +1,60 @@
+// Agent action pattern (project/framework/patterns/agent-action.md): a person asks, the agent shows its steps, and each
+// step's state maps to one reading: planned is an imprint, running is raised, awaiting approval is Proposed (raised, not
+// pending), approved and executing hovers as pending, done lands, failed sinks with Retry, rejected lies flush. A
+// reversible step runs without asking and offers Undo; sending email asks; deleting for good asks in a stationary
+// dialog. Everything the agent changed carries provenance.
+// The lines between the preview markers are its "AgentActionPattern" preview (scripts/pattern-previews.mjs copies them);
+// build/checks/pattern-types.mjs type-checks this file against the public declarations and fails if the two differ.
+import * as React from 'react';
+import * as A from 'altitude-design';
+// preview:start
+const wait = (ms) => new Promise((r) => setTimeout(r, ms));
+function App() {
+  const [failNext, setFailNext] = React.useState(false);
+  const fail = React.useRef(false); fail.current = failNext;
+  const [search, setSearch] = React.useState(/** @type {'running' | 'done' | 'failed'} */ ('running'));
+  const [archive, setArchive] = React.useState(/** @type {'planned' | 'running' | 'done'} */ ('planned'));
+  const [undone, setUndone] = React.useState(false);
+  const [email, setEmail] = React.useState(/** @type {A.ConfirmationState} */ ('requested'));
+  const [purge, setPurge] = React.useState(/** @type {A.ConfirmationState} */ ('requested'));
+  const runSearch = async () => { setSearch('running'); await wait(900); if (fail.current) { setFailNext(false); setSearch('failed'); return; } setSearch('done'); setArchive('running'); await wait(800); setArchive('done'); };
+  const restart = () => { setArchive('planned'); setUndone(false); setEmail('requested'); setPurge('requested'); void runSearch(); };
+  React.useEffect(() => { void runSearch(); }, []);
+  const resolve = async (set, ok) => { set('running'); await wait(900); set(ok ? 'done' : 'failed'); };
+  const stepFor = (c) => (c === 'requested' ? 'awaiting-approval' : c === 'running' || c === 'approved' ? 'running' : c === 'failed' ? 'failed' : 'done');
+  const ready = archive === 'done';
+  return (
+    <main className="ag-page">
+      <div className="ag-ask"><span className="ag-who">You asked</span><p>Clean up leads nobody has touched since July, and tell their owners.</p></div>
+      <div className="ag-demo"><A.Switch label="Make the next step fail" checked={failNext} onCheckedChange={setFailNext} /><A.Button size="sm" onClick={restart}>Run again</A.Button></div>
+      <A.Trace aria-label="Assistant run: clean up stale leads">
+        <A.TraceStep title="Find leads untouched since July" status={search} duration={search === 'done' ? 900 : undefined}
+          error={search === 'failed' ? 'The CRM didn’t answer in time. Nothing was changed.' : undefined} onRetry={search === 'failed' ? runSearch : undefined}>
+          <A.TraceToolCall name="search_leads" input={{ untouchedSince: '2026-07-01', limit: 50 }} output={search === 'done' ? { found: 4 } : undefined} />
+        </A.TraceStep>
+        <A.TraceStep title="Archive 4 stale leads" status={archive}>
+          {archive === 'done' && <div className="ag-receipt"><span role="status">{undone ? 'Archive undone. The 4 leads are back.' : '4 leads archived. You can undo this for 30 days.'}</span>
+            {!undone && <A.Button size="sm" variant="ghost" onClick={() => setUndone(true)}>Undo archive</A.Button>}</div>}
+        </A.TraceStep>
+        <A.TraceStep title={email === 'rejected' ? 'Didn’t email the lead owners' : 'Email 3 lead owners'} status={ready ? stepFor(email) : 'planned'}>
+          {ready && <A.Confirmation state={email} title="Email 3 lead owners" requestedBy="The assistant" resolvedBy="Maya Chen"
+            consequence="Theo Marsh, Ines Duarte and Sam Okafor will get an email listing the leads that were archived."
+            approveLabel="Send 3 emails" rejectLabel="Don’t send" runningLabel="Sending…" doneLabel="3 emails sent" failedLabel="The emails weren’t sent."
+            onApprove={() => resolve(setEmail, !fail.current)} onReject={() => setEmail('rejected')} onRetry={() => resolve(setEmail, true)} />}
+        </A.TraceStep>
+        <A.TraceStep title="Delete the “Summer import” list for good" status={ready && email !== 'requested' ? stepFor(purge) : 'planned'}>
+          {ready && email !== 'requested' && <A.Confirmation state={purge} escalate="dialog" title="Delete the “Summer import” list" resolvedBy="Maya Chen"
+            consequence="The list and its 212 rows are deleted permanently. Leads in it stay; only the list goes."
+            approveLabel="Delete list" rejectLabel="Keep the list" runningLabel="Deleting…" doneLabel="List deleted"
+            onApprove={() => resolve(setPurge, true)} onReject={() => setPurge('rejected')} />}
+        </A.TraceStep>
+      </A.Trace>
+      {email === 'done' && <section className="ag-record" aria-labelledby="ag-rec-h"><h3 id="ag-rec-h" className="ag-sub">Northwind Traders</h3>
+        <p className="ag-line">Status: Archived <A.AILabel subject="Change" model="Opus 5.5" reviewedBy="Maya Chen" generatedAt="2026-10-30T09:00:00Z" /></p>
+        <p className="ag-muted">Archived by the assistant, approved by Maya Chen.</p>
+      </section>}
+    </main>
+  );
+}
+// preview:end
+export default App;

package/dist/guidance/references/build/fixtures/patterns/app-skeleton.jsx

@@ -0,0 +1,94 @@
+// App skeleton: a starting point for a SaaS app, with the parts composed the way Altitude intends. The shell is on the
+// ground; each view has one primary action in its PageHeader; a list page filters, pages and selects in a DataTable; a
+// record opens in a Sheet with a PropertyList; settings are rows saved with the SaveBar. Copy it and replace the data.
+// The lines between the preview markers are the "AppSkeleton" preview (scripts/pattern-previews.mjs copies them);
+// build/checks/pattern-types.mjs type-checks this file against the public declarations and fails if the two differ.
+// preview-name: AppSkeleton
+import * as React from 'react';
+import * as A from 'altitude-design';
+// preview:start
+const I = ({ d }) => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d={d} /></svg>;
+const ICONS = { customers: 'M16 19v-1a4 4 0 0 0-8 0v1M12 11a3 3 0 1 0 0-6 3 3 0 0 0 0 6', reports: 'M5 20V10M12 20V4M19 20v-7', settings: 'M4 7h10M18 7h2M4 17h4M12 17h8M14 5v4M8 15v4' };
+const PLANS = [{ value: 'Free', label: 'Free' }, { value: 'Pro', label: 'Pro' }, { value: 'Business', label: 'Business' }];
+const PEOPLE = ['Ada Lovelace', 'Grace Hopper', 'Alan Turing', 'Katherine Johnson', 'Hedy Lamarr', 'Edsger Dijkstra', 'Barbara Liskov', 'Donald Knuth', 'Margaret Hamilton', 'Ken Thompson', 'Radia Perlman', 'Tim Berners-Lee'];
+const SEED = PEOPLE.map((name, i) => ({ id: 'c' + i, name, email: name.split(' ')[0].toLowerCase() + '@example.com', plan: PLANS[i % 3].value, seats: 3 + ((i * 7) % 40) }));
+const FIELDS = /** @type {A.FilterField[]} */ ([{ key: 'plan', label: 'Plan', type: 'enum', options: PLANS }, { key: 'name', label: 'Name', type: 'text' }]);
+const matches = (row, f) => f.value === undefined || f.value === '' || (f.operator === 'is' ? row[f.field] === f.value : f.operator === 'is not' ? row[f.field] !== f.value
+  : f.operator === 'contains' ? String(row[f.field]).toLowerCase().includes(String(f.value).toLowerCase()) : !String(row[f.field]).toLowerCase().includes(String(f.value).toLowerCase()));
+function Customers() {
+  const [rows, setRows] = React.useState(SEED);
+  const [filters, setFilters] = React.useState(/** @type {A.Filter[]} */ ([]));
+  const [page, setPage] = React.useState(1);
+  const [selected, setSelected] = React.useState(/** @type {string[]} */ ([]));
+  const [open, setOpen] = React.useState(/** @type {string | null} */ (null));
+  const shown = rows.filter((r) => filters.every((f) => matches(r, f)));
+  const pageCount = Math.max(1, Math.ceil(shown.length / 5));
+  const record = rows.find((r) => r.id === open);
+  const save = (key) => async (value) => { await new Promise((r) => setTimeout(r, 400)); setRows((l) => l.map((r) => (r.id === open ? { ...r, [key]: value } : r))); return /** @type {const} */ ({ ok: true, value }); };
+  return <>
+    <A.PageHeader primary={<A.Button variant="primary">Add customer</A.Button>} actions={<A.Button variant="secondary">Export</A.Button>}>
+      <A.PageHeaderTitle>Customers</A.PageHeaderTitle><A.PageHeaderDescription>{rows.length} customers on every plan.</A.PageHeaderDescription>
+    </A.PageHeader>
+    <div className="sk-body">
+      <A.FilterBar aria-label="Filter customers" fields={FIELDS} value={filters} onValueChange={(f) => { setFilters(f); setPage(1); }} resultCount={shown.length} />
+      <A.DataTable aria-label="Customers" noun="customers" rows={shown.slice((page - 1) * 5, page * 5)} getRowId={(r) => r.id} getRowLabel={(r) => r.name}
+        selectable selected={selected} onSelectedChange={setSelected} matchingTotal={shown.length}
+        actions={(ids) => <A.Button size="sm" variant="secondary" onClick={() => setSelected([])}>Email {ids.length}</A.Button>}
+        onRowClick={(r) => setOpen(r.id)} empty="No customers match these filters."
+        columns={[{ key: 'name', header: 'Name' }, { key: 'email', header: 'Email' }, { key: 'plan', header: 'Plan', cell: (r) => <A.Badge>{r.plan}</A.Badge> }, { key: 'seats', header: 'Seats', align: 'end' }]}
+        pagination={{ page, pageCount, total: shown.length, onPageChange: setPage, noun: 'customers' }} />
+    </div>
+    <A.Sheet open={!!record} onOpenChange={(o) => { if (!o) setOpen(null); }} size="md">
+      {record && <>
+        <A.SheetHeader><A.SheetTitle>{record.name}</A.SheetTitle><A.SheetDescription>{record.email}</A.SheetDescription></A.SheetHeader>
+        <A.PropertyList aria-label={`${record.name}’s details`}>
+          <A.PropertyListItem label="Plan" value={record.plan} commit="on-choose" onSave={save('plan')} editor={(c) => <A.Select {...c} items={PLANS} />} />
+          <A.PropertyListItem label="Seats" value={String(record.seats)} onSave={save('seats')} validate={(v) => (/^\d+$/.test(v) ? undefined : 'Enter a whole number.')} />
+          <A.PropertyListItem label="Email" value={record.email} />
+        </A.PropertyList>
+      </>}
+    </A.Sheet>
+  </>;
+}
+function Settings() {
+  const general = A.useEditRecord({ initialValue: { name: 'Acme', url: 'acme' }, validationMode: 'submit',
+    validate: (d) => (d.name.trim() ? {} : { name: 'Enter a workspace name.' }), save: async (d) => { await new Promise((r) => setTimeout(r, 600)); return { ok: true, value: d }; } });
+  const [digest, setDigest] = React.useState(true);
+  return <>
+    <A.PageHeader><A.PageHeaderTitle>Settings</A.PageHeaderTitle><A.PageHeaderDescription>Changes to the workspace are saved together.</A.PageHeaderDescription></A.PageHeader>
+    <div className="sk-body">
+      <A.SettingsSection title="Workspace">
+        <A.SettingsRow label="Workspace name" error={general.errors.name}><A.Input value={general.draft.name} onChange={(e) => general.setField('name', e.target.value)} /></A.SettingsRow>
+        <A.SettingsRow label="Workspace URL" description={'altitude.app/' + general.draft.url}><A.Input value={general.draft.url} onChange={(e) => general.setField('url', e.target.value)} /></A.SettingsRow>
+      </A.SettingsSection>
+      <A.SettingsSection title="Notifications" description="Applies as soon as you change it.">
+        <A.SettingsRow label="Weekly digest" description="A summary every Monday."><A.Switch checked={digest} onCheckedChange={setDigest} /></A.SettingsRow>
+      </A.SettingsSection>
+    </div>
+    <A.SaveBar record={general} />
+  </>;
+}
+function App() {
+  const [at, setAt] = React.useState('customers');
+  const item = (key, label) => <A.SidebarMenuItem key={key}>
+    <A.SidebarMenuButton href={'#/' + key} current={at === key} icon={<I d={ICONS[key]} />} onClick={(e) => { e.preventDefault(); setAt(key); }}>{label}</A.SidebarMenuButton>
+  </A.SidebarMenuItem>;
+  return (
+    <div className="sk-frame">
+      <A.AppShell
+        sidebar={<A.Sidebar>
+          <A.SidebarHeader><span className="sk-ws"><A.Avatar name="Acme" size={24} /><span className="alt-sidebar-text">Acme</span></span></A.SidebarHeader>
+          <A.SidebarContent><A.SidebarGroup label="Workspace"><A.SidebarMenu>{item('customers', 'Customers')}{item('reports', 'Reports')}{item('settings', 'Settings')}</A.SidebarMenu></A.SidebarGroup></A.SidebarContent>
+          <A.SidebarFooter><A.SidebarMenu><A.SidebarMenuItem><A.SidebarMenuButton href="#/me" icon={<A.Avatar name="Maya Chen" size={20} />}>Maya Chen</A.SidebarMenuButton></A.SidebarMenuItem></A.SidebarMenu></A.SidebarFooter>
+        </A.Sidebar>}
+        topBar={<A.Button variant="secondary" size="sm" className="sk-search">Search… <A.Kbd>⌘K</A.Kbd></A.Button>}>
+        {at === 'customers' ? <Customers /> : at === 'settings' ? <Settings /> : <>
+          <A.PageHeader><A.PageHeaderTitle>Reports</A.PageHeaderTitle></A.PageHeader>
+          <div className="sk-body"><A.EmptyState title="No reports yet" description="Reports you save appear here." action={<A.Button variant="primary">Create a report</A.Button>} /></div>
+        </>}
+      </A.AppShell>
+    </div>
+  );
+}
+// preview:end
+export default App;