canon-ds 0.1.0

package/lib/mcp.mjs

@@ -0,0 +1,268 @@
+// Minimal MCP server over stdio (JSON-RPC 2.0, newline-delimited). Zero deps.
+import { createInterface } from 'node:readline';
+import { readFileSync, existsSync } from 'node:fs';
+import { join } from 'node:path';
+import { loadDesignDir } from "./system.mjs";
+import { indexTokens } from "./tokens/resolve.mjs";
+import { componentCss } from "./generators/css.mjs";
+import { lintSource, knownFromSystem } from "./lint.mjs";
+import { parseCssColor, distance } from './color.js';
+import { VERSION } from "./version.mjs";
+import { CATEGORY_LABEL } from "./components/index.mjs";
+import { sourceHash } from "./build-manifest.mjs";
+const sameRevision = (a, b) => a.path === b.path && a.content === b.content;
+function readRevision(designDir, out) {
+    const path = join(designDir, out || 'dist', 'canon.lock.json');
+    try {
+        return { path, content: readFileSync(path, 'utf8') };
+    }
+    catch (error) {
+        if (error.code === 'ENOENT')
+            return { path, content: null };
+        throw error;
+    }
+}
+function currentRevision(designDir) {
+    const meta = JSON.parse(readFileSync(join(designDir, 'system.json'), 'utf8'));
+    return readRevision(designDir, typeof meta.out === 'string' ? meta.out : 'dist');
+}
+export async function startMcp(designDir) {
+    let system = loadDesignDir(designDir);
+    let idx = indexTokens(system.tokens, system.meta.prefix);
+    let known = knownFromSystem(system, idx);
+    let revision = readRevision(designDir, system.meta.out || 'dist');
+    const reload = () => {
+        const nextSystem = loadDesignDir(designDir);
+        const nextIdx = indexTokens(nextSystem.tokens, nextSystem.meta.prefix);
+        const nextKnown = knownFromSystem(nextSystem, nextIdx);
+        const nextRevision = readRevision(designDir, nextSystem.meta.out || 'dist');
+        system = nextSystem;
+        idx = nextIdx;
+        known = nextKnown;
+        revision = nextRevision;
+    };
+    const refreshIfBuilt = () => {
+        let observed;
+        try {
+            observed = currentRevision(designDir);
+        }
+        catch (error) {
+            throw new Error(`Cannot refresh Canon MCP: ${error.message}`);
+        }
+        if (sameRevision(observed, revision))
+            return;
+        if (observed.content === null)
+            throw new Error(`Cannot refresh Canon MCP: build manifest is missing at ${observed.path}.`);
+        try {
+            const manifest = JSON.parse(observed.content);
+            if (manifest.manifestVersion !== 1 || typeof manifest.sourceHash !== 'string') {
+                throw new Error('build manifest is incomplete or uses an older format');
+            }
+            const nextSystem = loadDesignDir(designDir);
+            if (readRevision(designDir, nextSystem.meta.out || 'dist').path !== observed.path) {
+                throw new Error('design output path changed while refreshing');
+            }
+            if (sourceHash(nextSystem) !== manifest.sourceHash) {
+                throw new Error('design source does not match the latest build manifest');
+            }
+            const nextIdx = indexTokens(nextSystem.tokens, nextSystem.meta.prefix);
+            const nextKnown = knownFromSystem(nextSystem, nextIdx);
+            const confirmed = currentRevision(designDir);
+            if (!sameRevision(confirmed, observed))
+                throw new Error('build manifest changed while refreshing');
+            system = nextSystem;
+            idx = nextIdx;
+            known = nextKnown;
+            revision = confirmed;
+        }
+        catch (error) {
+            throw new Error(`Cannot refresh Canon MCP: ${error.message}`);
+        }
+    };
+    const distDir = () => join(designDir, system.meta.out || 'dist');
+    const p = () => system.meta.prefix;
+    const tools = [
+        { name: 'design_rules', description: 'The mandatory rules, art direction and workflow for producing UI in this project. Call this first.', inputSchema: { type: 'object', properties: {} } },
+        { name: 'list_components', description: 'List every component with class, category, props and when to use it.', inputSchema: { type: 'object', properties: { category: { type: 'string', description: 'Optional category filter: actions, forms, navigation, data-display, feedback, overlays, layout, typography, media' } } } },
+        { name: 'get_component', description: 'Full specification of one component: anatomy, props, states, exact markup examples, every CSS value, rules and accessibility. Use the slug (e.g. "button", "dialog").', inputSchema: { type: 'object', properties: { slug: { type: 'string' } }, required: ['slug'] } },
+        { name: 'get_css', description: 'The generated CSS for one component (or "tokens" / "all").', inputSchema: { type: 'object', properties: { slug: { type: 'string' } }, required: ['slug'] } },
+        { name: 'list_tokens', description: 'List tokens by group (color, font, type, space, radius, shadow, size, z, motion, breakpoint, opacity) with CSS variables and light/dark values.', inputSchema: { type: 'object', properties: { group: { type: 'string' } } } },
+        { name: 'get_token', description: 'Details for one token by reference ("color.bg-action", "space.4", "type.body-md.size") or CSS variable name.', inputSchema: { type: 'object', properties: { name: { type: 'string' } }, required: ['name'] } },
+        { name: 'suggest_token', description: 'Given a raw value (hex/rgb color, px size, shadow) and optionally the CSS property, return the tokens to use instead.', inputSchema: { type: 'object', properties: { value: { type: 'string' }, property: { type: 'string' } }, required: ['value'] } },
+        { name: 'search', description: 'Free-text search across components, patterns and tokens (names, descriptions, rules).', inputSchema: { type: 'object', properties: { query: { type: 'string' } }, required: ['query'] } },
+        { name: 'list_patterns', description: 'List layout/section/page patterns with their category and description.', inputSchema: { type: 'object', properties: { category: { type: 'string' } } } },
+        { name: 'get_pattern', description: 'Full HTML (primary + variants), rules and CSS for one pattern by slug.', inputSchema: { type: 'object', properties: { slug: { type: 'string' } }, required: ['slug'] } },
+        { name: 'lint_code', description: 'Lint a code snippet (CSS/TSX/HTML…) against the system: raw values, unknown classes, invalid prop values. Returns violations with suggested tokens.', inputSchema: { type: 'object', properties: { code: { type: 'string' }, filename: { type: 'string', description: 'e.g. Card.tsx or styles.css (drives the parser)' } }, required: ['code'] } },
+        { name: 'reload', description: 'Reload the design system from disk after `canon build`.', inputSchema: { type: 'object', properties: {} } },
+    ];
+    const text = (t) => ({ content: [{ type: 'text', text: t }] });
+    const tokenLine = (t) => `${t.ref}  ${t.cssVar} = ${t.light}${t.themed ? `  (dark ${t.dark})` : ''}${t.description ? `  — ${t.description}` : ''}`;
+    const call = async (name, args) => {
+        if (name !== 'reload')
+            refreshIfBuilt();
+        switch (name) {
+            case 'design_rules': {
+                const { agentsMd } = await import("./generators/agents.mjs");
+                return text(agentsMd(system) + `\nPrinciples:\n${system.meta.direction.principles.map((x) => `- ${x}`).join('\n')}\n\nNever:\n${system.meta.direction.never.map((x) => `- ${x}`).join('\n')}`);
+            }
+            case 'list_components': {
+                const cat = args.category;
+                const list = system.components.filter((c) => !cat || c.category === cat);
+                return text(list.map((c) => `- ${c.name} (.${p()}-${c.slug}) [${CATEGORY_LABEL[c.category]}] props: ${Object.entries(c.props).map(([k, v]) => `${k}=${v.values.join('|')}`).join(' ') || '—'}\n  ${c.usage}`).join('\n'));
+            }
+            case 'get_component': {
+                const c = system.components.find((x) => x.slug === args.slug || x.name.toLowerCase() === String(args.slug).toLowerCase());
+                if (!c)
+                    return text(`Unknown component "${args.slug}". Known: ${system.components.map((x) => x.slug).join(', ')}`);
+                const { designMd } = await import("./generators/designmd.mjs");
+                const full = designMd({ ...system, components: [c], patterns: [] }, idx);
+                const start = full.indexOf(`<a id="${c.slug}"></a>`);
+                const end = full.indexOf('## 4. Patterns');
+                return text(full.slice(start, end));
+            }
+            case 'get_css': {
+                if (args.slug === 'tokens')
+                    return text(readFileSync(join(distDir(), 'tokens.css'), 'utf8'));
+                if (args.slug === 'all')
+                    return text(readFileSync(join(distDir(), `${p()}.css`), 'utf8'));
+                const c = system.components.find((x) => x.slug === args.slug);
+                if (!c)
+                    return text(`Unknown component "${args.slug}"`);
+                return text(componentCss(c, idx, p(), true));
+            }
+            case 'list_tokens': {
+                const g = args.group;
+                return text([...idx.values()].filter((t) => !g || t.group === g || t.ref.startsWith(`{${g}`)).map(tokenLine).join('\n'));
+            }
+            case 'get_token': {
+                const n = String(args.name).replace(/^\{|\}$/g, '');
+                const t = idx.get(n) ?? [...idx.values()].find((x) => x.cssVar === n || x.cssVar === `--${n}`);
+                return text(t ? tokenLine(t) : `Unknown token ${n}`);
+            }
+            case 'suggest_token': {
+                const value = String(args.value).trim();
+                const prop = String(args.property ?? '');
+                const hex = parseCssColor(value);
+                if (hex) {
+                    const ranked = known.colors.map((c) => ({ c, d: distance(hex, c.hex) })).sort((a, b) => a.d - b.d);
+                    const sem = ranked.filter((r) => r.c.ref.includes('-color-')).slice(0, 5);
+                    const prim = ranked.filter((r) => !r.c.ref.includes('-color-')).slice(0, 3);
+                    return text(`For ${value} (${hex}):\nSemantic (prefer):\n${sem.map((r) => `- var(${r.c.ref}) ${r.c.hex} (Δ ${r.d.toFixed(3)})`).join('\n')}\nPrimitive:\n${prim.map((r) => `- var(${r.c.ref}) ${r.c.hex} (Δ ${r.d.toFixed(3)})`).join('\n')}`);
+                }
+                const m = value.match(/^(-?[\d.]+)(px|rem|em)?$/);
+                if (m) {
+                    const px = m[2] === 'rem' || m[2] === 'em' ? +m[1] * 16 : +m[1];
+                    const group = /radius/.test(prop) ? 'radius' : /font/.test(prop) ? 'font' : /height|width/.test(prop) ? 'size' : 'space';
+                    const ranked = known.dims.filter((d) => d.group === group).sort((a, b) => Math.abs(a.px - px) - Math.abs(b.px - px)).slice(0, 4);
+                    return text(`For ${value} on ${prop || 'spacing'}:\n${ranked.map((d) => `- var(${d.ref}) = ${d.px}px${d.px === px ? ' (exact)' : ''}`).join('\n')}`);
+                }
+                if (/shadow/.test(prop) || /px.*rgba?/.test(value))
+                    return text(`Shadows: ${Object.keys(system.tokens.shadow).map((k) => `var(--${p()}-shadow-${k})`).join(', ')} — xs on controls, sm resting cards (only on same-color canvas), md menus/popovers, lg dialogs/drawers, focus for rings.`);
+                return text(`No suggestion for "${value}". Provide a color (hex/rgb) or a length (px/rem) and the CSS property.`);
+            }
+            case 'search': {
+                const q = String(args.query).toLowerCase();
+                const hits = [];
+                for (const c of system.components) {
+                    const hay = [c.name, c.slug, c.description, c.usage, ...c.rules, ...Object.keys(c.props)].join(' ').toLowerCase();
+                    if (hay.includes(q))
+                        hits.push(`component ${c.slug}: ${c.description}`);
+                }
+                for (const pt of system.patterns)
+                    if ([pt.name, pt.slug, pt.description, ...pt.rules].join(' ').toLowerCase().includes(q))
+                        hits.push(`pattern ${pt.slug}: ${pt.description}`);
+                for (const t of idx.values())
+                    if ((t.ref + ' ' + (t.description ?? '')).toLowerCase().includes(q))
+                        hits.push(`token ${tokenLine(t)}`);
+                return text(hits.length ? hits.slice(0, 40).join('\n') : 'No matches.');
+            }
+            case 'list_patterns': {
+                const cat = args.category;
+                return text(system.patterns.filter((pt) => !cat || pt.category === cat).map((pt) => `- ${pt.slug} [${pt.category}] ${pt.name}: ${pt.description}${pt.variants?.length ? ` (${pt.variants.length} more layouts)` : ''}`).join('\n'));
+            }
+            case 'get_pattern': {
+                const pt = system.patterns.find((x) => x.slug === args.slug);
+                if (!pt)
+                    return text(`Unknown pattern "${args.slug}". Known: ${system.patterns.map((x) => x.slug).join(', ')}`);
+                const re = (s) => s.replace(/\bcn-/g, `${p()}-`);
+                return text(`# ${pt.name} [${pt.category}]\n${pt.description}\n\nRules:\n${pt.rules.map((r) => `- ${r}`).join('\n')}\n\n## Primary\n\`\`\`html\n${re(pt.html)}\n\`\`\`\n${(pt.variants ?? []).map((v) => `## ${v.title}\n${v.description ?? ''}\n\`\`\`html\n${re(v.html)}\n\`\`\``).join('\n')}${pt.css ? `\n## CSS (already in ${p()}.css)\n\`\`\`css\n${re(pt.css)}\n\`\`\`` : ''}`);
+            }
+            case 'lint_code': {
+                const vs = lintSource(known, String(args.filename ?? 'snippet.tsx'), String(args.code), { tailwind: system.meta.lint.tailwind });
+                return text(vs.length ? vs.map((v) => `${v.line}:${v.col} ${v.severity} ${v.rule}: ${v.message}${v.suggestion ? ` → ${v.suggestion}` : ''}\n    ${v.snippet}`).join('\n') : '✓ no violations');
+            }
+            case 'reload':
+                reload();
+                return text(`Reloaded ${system.meta.name}: ${system.components.length} components, ${idx.size} tokens.`);
+            default:
+                throw Object.assign(new Error(`Unknown tool ${name}`), { code: -32602 });
+        }
+    };
+    const resources = () => [
+        { uri: 'canon://DESIGN.md', name: 'DESIGN.md', mimeType: 'text/markdown', description: 'Full design system specification' },
+        { uri: 'canon://DESIGN.compact.md', name: 'DESIGN.compact.md', mimeType: 'text/markdown', description: 'Compact quick reference' },
+        { uri: 'canon://tokens.css', name: 'tokens.css', mimeType: 'text/css', description: 'All CSS custom properties' },
+    ];
+    const readResource = (uri) => {
+        refreshIfBuilt();
+        const file = uri.replace('canon://', '');
+        const path = join(distDir(), file);
+        if (!existsSync(path))
+            throw Object.assign(new Error(`Resource not built: run canon build (${path})`), { code: -32002 });
+        return { contents: [{ uri, mimeType: file.endsWith('.css') ? 'text/css' : 'text/markdown', text: readFileSync(path, 'utf8') }] };
+    };
+    const send = (msg) => process.stdout.write(JSON.stringify(msg) + '\n');
+    const rl = createInterface({ input: process.stdin, crlfDelay: Infinity });
+    rl.on('line', async (line) => {
+        if (!line.trim())
+            return;
+        let req;
+        try {
+            req = JSON.parse(line);
+        }
+        catch {
+            return;
+        }
+        const id = req.id;
+        const method = String(req.method);
+        const params = (req.params ?? {});
+        const reply = (result) => { if (id !== undefined)
+            send({ jsonrpc: '2.0', id, result }); };
+        const fail = (code, message) => { if (id !== undefined)
+            send({ jsonrpc: '2.0', id, error: { code, message } }); };
+        try {
+            switch (method) {
+                case 'initialize':
+                    reply({ protocolVersion: params.protocolVersion ?? '2025-06-18', capabilities: { tools: { listChanged: false }, resources: { listChanged: false } }, serverInfo: { name: 'canon', version: VERSION }, instructions: `Design system "${system.meta.name}". Call design_rules first, then get_component / get_pattern for exact markup, suggest_token for any raw value, lint_code before finishing.` });
+                    break;
+                case 'notifications/initialized':
+                case 'notifications/cancelled':
+                    break;
+                case 'ping':
+                    reply({});
+                    break;
+                case 'tools/list':
+                    reply({ tools });
+                    break;
+                case 'tools/call':
+                    reply(await call(String(params.name), (params.arguments ?? {})));
+                    break;
+                case 'resources/list':
+                    reply({ resources: resources() });
+                    break;
+                case 'resources/read':
+                    reply(readResource(String(params.uri)));
+                    break;
+                default:
+                    fail(-32601, `Method not found: ${method}`);
+            }
+        }
+        catch (e) {
+            const err = e;
+            fail(err.code ?? -32000, err.message);
+        }
+    });
+    rl.on('close', () => process.exit(0));
+    process.stderr.write(`canon mcp: ${system.meta.name} (${system.components.length} components, ${idx.size} tokens) on stdio\n`);
+    await new Promise(() => { });
+}

package/lib/open.mjs

@@ -0,0 +1,7 @@
+import { execFile } from 'node:child_process';
+import { promisify } from 'node:util';
+export async function openBrowser(url) {
+    const command = process.platform === 'darwin' ? 'open' : process.platform === 'win32' ? 'rundll32.exe' : 'xdg-open';
+    const args = process.platform === 'win32' ? ['url.dll,FileProtocolHandler', url] : [url];
+    await promisify(execFile)(command, args, { timeout: 10_000, windowsHide: true });
+}

package/lib/patterns/_app.mjs

@@ -0,0 +1,56 @@
+// Shared snippets for application page patterns.
+import { ICON } from "../components/_shared.mjs";
+export { ICON };
+export const IMG = (ratio = '16 / 9', attrs = '') => `<span class="cn-placeholder" style="aspect-ratio:${ratio}" role="img" aria-label="Placeholder image" ${attrs}><svg viewBox="0 0 160 90" preserveAspectRatio="none" aria-hidden="true"><rect width="160" height="90" fill="var(--cn-color-bg-muted)"/><path d="M0 90L160 0" stroke="var(--cn-color-border-strong)" stroke-width="1"/></svg></span>`;
+export const BTN = (variant, label, size = 'md', icon = '') => `<button type="button" class="cn-button" data-variant="${variant}" data-size="${size}">${icon ? icon.replace('cn-icon', 'cn-button__icon') : ''}<span class="cn-button__label">${label}</span></button>`;
+export const AVATAR = (i, n, size = 'md', tone = 'neutral', status = 'none') => `<span class="cn-avatar" data-size="${size}" data-shape="circle" data-tone="${tone}" data-status="${status}" role="img" aria-label="${n}"><span class="cn-avatar__fallback" aria-hidden="true">${i}</span>${status !== 'none' ? '<span class="cn-avatar__status"></span>' : ''}</span>`;
+export const BADGE = (text, tone = 'neutral', variant = 'soft', dot = false) => `<span class="cn-badge" data-tone="${tone}" data-variant="${variant}" data-size="sm">${dot ? '<span class="cn-badge__dot"></span>' : ''}${text}</span>`;
+const navItem = (label, icon, current = false, badge = '') => `<a href="#" class="cn-sidebar__item"${current ? ' aria-current="page"' : ''}>${icon.replace('cn-icon', 'cn-sidebar__icon')}<span class="cn-sidebar__label">${label}</span>${badge ? `<span class="cn-sidebar__badge">${badge}</span>` : ''}</a>`;
+export const SIDEBAR = (current = 'Dashboard', variant = 'simple', theme = 'light') => `<nav class="cn-sidebar" data-variant="${variant}" data-theme="${theme}" aria-label="Main"><div class="cn-sidebar__brand"><span class="cn-sidebar__logo" aria-hidden="true"></span><span class="cn-sidebar__brand-name">Lumen</span></div>${variant === 'slim' ? '' : `<div class="cn-sidebar__search cn-input" data-variant="default" data-size="md">${ICON.search.replace('cn-icon', 'cn-input__icon')}<input class="cn-input__field" type="search" placeholder="Search" aria-label="Search"></div>`}<div class="cn-sidebar__nav">${navItem('Home', ICON.home, current === 'Home')}${navItem('Dashboard', ICON.calendar, current === 'Dashboard')}${navItem('Projects', ICON.copy, current === 'Projects')}${navItem('Tasks', ICON.check, current === 'Tasks', '10')}${navItem('Reporting', ICON.inbox, current === 'Reporting')}${navItem('Users', ICON.user, current === 'Users')}</div><div class="cn-sidebar__footer">${navItem('Support', ICON.info)}${navItem('Settings', ICON.settings, current === 'Settings')}<div class="cn-sidebar__account"><span class="cn-sidebar__avatar" aria-hidden="true">MC</span><div class="cn-sidebar__account-text"><span class="cn-sidebar__name">Maya Chen</span><span class="cn-sidebar__email">maya@lumen.co</span></div><button type="button" class="cn-sidebar__account-action" aria-label="Log out">${ICON.external}</button></div></div></nav>`;
+export const PAGE_HEADER = (title, desc, actions, variant = 'simple', extra = '') => `<header class="cn-page-header" data-variant="${variant}" data-divider="yes">${extra}<div class="cn-page-header__content"><h1 class="cn-page-header__title">${title}</h1><p class="cn-page-header__description">${desc}</p></div><div class="cn-page-header__actions">${actions}</div></header>`;
+export const TABS = (items, active = 0, variant = 'underline') => `<div class="cn-tabs" data-variant="${variant}" data-size="md" role="tablist">${items.map((t, i) => `<button type="button" class="cn-tabs__tab" role="tab" aria-selected="${i === active}">${t}</button>`).join('')}</div>`;
+export const STAT = (label, value, delta, trend = 'up', desc = 'vs last month') => `<div class="cn-stat" data-size="md" data-variant="card" data-trend="${trend}"><div class="cn-stat__label">${label}</div><div class="cn-stat__value">${value}</div><div class="cn-stat__delta"><svg class="cn-stat__icon" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="${trend === 'down' ? 'M8 3v10M4 9l4 4 4-4' : trend === 'flat' ? 'M3 8h10' : 'M8 13V3M4 7l4-4 4 4'}"/></svg><span>${delta}</span></div><div class="cn-stat__description">${desc}</div></div>`;
+export const CHART = (h = 240) => `<svg class="cn-app__chart" viewBox="0 0 800 ${h}" preserveAspectRatio="none" role="img" aria-label="Line chart placeholder"><g class="cn-app__grid">${[0.2, 0.4, 0.6, 0.8].map((f) => `<line x1="0" x2="800" y1="${h * f}" y2="${h * f}"/>`).join('')}</g><path class="cn-app__area" d="M0 ${h * 0.75} C100 ${h * 0.7} 150 ${h * 0.5} 240 ${h * 0.55} S400 ${h * 0.3} 480 ${h * 0.35} S640 ${h * 0.15} 800 ${h * 0.2} V${h} H0 Z"/><path class="cn-app__line" d="M0 ${h * 0.75} C100 ${h * 0.7} 150 ${h * 0.5} 240 ${h * 0.55} S400 ${h * 0.3} 480 ${h * 0.35} S640 ${h * 0.15} 800 ${h * 0.2}"/></svg>`;
+export const BARS = (h = 240) => `<svg class="cn-app__chart" viewBox="0 0 800 ${h}" preserveAspectRatio="none" role="img" aria-label="Bar chart placeholder"><g class="cn-app__grid">${[0.25, 0.5, 0.75].map((f) => `<line x1="0" x2="800" y1="${h * f}" y2="${h * f}"/>`).join('')}</g>${[0.4, 0.55, 0.35, 0.7, 0.6, 0.8, 0.5, 0.9, 0.65, 0.75, 0.55, 0.85].map((v, i) => `<rect class="cn-app__bar" x="${i * 66 + 14}" width="40" y="${h - h * v}" height="${h * v}" rx="4"/>`).join('')}</svg>`;
+export const CARD = (header, body, footer = '') => `<section class="cn-card" data-variant="default" data-padding="none">${header ? `<div class="cn-section-header" data-variant="card" data-divider="yes">${header}</div>` : ''}<div class="cn-card__body cn-app__card-body">${body}</div>${footer ? `<footer class="cn-card__footer">${footer}</footer>` : ''}</section>`;
+export const CARD_HEAD = (title, desc = '', actions = '', badge = '') => `<div class="cn-section-header__content"><h2 class="cn-section-header__title">${title}${badge ? ` <span class="cn-section-header__badge">${badge}</span>` : ''}</h2>${desc ? `<p class="cn-section-header__description">${desc}</p>` : ''}</div>${actions ? `<div class="cn-section-header__actions">${actions}</div>` : ''}`;
+export const PEOPLE = [['MC', 'Maya Chen', 'maya@lumen.co', 'Product Manager', 'accent'], ['DC', 'Daniel Costa', 'daniel@lumen.co', 'Engineering', 'success'], ['SA', 'Sofia Almeida', 'sofia@lumen.co', 'Design', 'warning'], ['LF', 'Lucas Ferreira', 'lucas@lumen.co', 'Frontend', 'info'], ['AK', 'Aisha Khan', 'aisha@lumen.co', 'Backend', 'accent'], ['NB', 'Noah Berg', 'noah@lumen.co', 'Product Design', 'success']];
+export const CHECKBOX = (label = '', checked = false) => `<label class="cn-checkbox" data-size="sm"><input class="cn-checkbox__input" type="checkbox"${checked ? ' checked' : ''} aria-label="${label || 'Select row'}"><span class="cn-checkbox__control" aria-hidden="true"><svg class="cn-checkbox__indicator" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 8.5l3 3 7-7"/></svg></span>${label ? `<span class="cn-checkbox__label">${label}</span>` : ''}</label>`;
+export const TEAM_TABLE = (rows = PEOPLE, selectable = true) => `<table class="cn-table" data-density="default" data-variant="default" data-interactive><thead class="cn-table__head"><tr class="cn-table__row">${selectable ? `<th class="cn-table__header-cell" scope="col" style="width:48px">${CHECKBOX()}</th>` : ''}<th class="cn-table__header-cell" scope="col">Name</th><th class="cn-table__header-cell" scope="col">Status</th><th class="cn-table__header-cell" scope="col">Role</th><th class="cn-table__header-cell" scope="col">Email address</th><th class="cn-table__header-cell" scope="col">Teams</th><th class="cn-table__header-cell" scope="col"><span class="cn-sr-only">Actions</span></th></tr></thead><tbody class="cn-table__body">${rows.map(([i, n, e, r, t], k) => `<tr class="cn-table__row"${k === 1 ? ' data-selected' : ''}>${selectable ? `<td class="cn-table__cell">${CHECKBOX('', k === 1)}</td>` : ''}<td class="cn-table__cell"><div class="cn-row" data-gap="3">${AVATAR(i, n, 'sm', t)}<div class="cn-stack" data-gap="0"><span class="cn-text-label-sm">${n}</span><span class="cn-text-body-sm cn-app__muted">@${n.split(' ')[0].toLowerCase()}</span></div></div></td><td class="cn-table__cell">${BADGE(k % 3 === 2 ? 'Offline' : 'Active', k % 3 === 2 ? 'neutral' : 'success', 'soft', true)}</td><td class="cn-table__cell">${r}</td><td class="cn-table__cell">${e}</td><td class="cn-table__cell"><div class="cn-row" data-gap="1">${BADGE('Design', 'accent')}${BADGE('Product', 'info')}${k % 2 ? BADGE('+2') : ''}</div></td><td class="cn-table__cell cn-table__actions"><div class="cn-row" data-gap="1" data-justify="end">${BTN('ghost', 'Delete', 'sm')}${BTN('link-color', 'Edit', 'sm')}</div></td></tr>`).join('')}</tbody></table>`;
+export const PAGINATION = `<div class="cn-row" data-justify="between" data-gap="3"><span class="cn-text-body-sm cn-app__muted">Page 1 of 10</span><div class="cn-row" data-gap="2">${BTN('outline', 'Previous', 'sm')}${BTN('outline', 'Next', 'sm')}</div></div>`;
+export const FIELD = (id, label, control, helper = '', layout = 'vertical') => `<div class="cn-field" data-layout="${layout}" data-size="md"><label class="cn-field__label" for="${id}">${label}</label><div class="cn-field__control">${control}</div>${helper ? `<p class="cn-field__helper">${helper}</p>` : ''}</div>`;
+export const INPUT = (id, value = '', type = 'text', placeholder = '', icon = '') => `<div class="cn-input" data-variant="default" data-size="md">${icon ? icon.replace('cn-icon', 'cn-input__icon') : ''}<input class="cn-input__field" id="${id}" type="${type}"${value ? ` value="${value}"` : ''}${placeholder ? ` placeholder="${placeholder}"` : ''}></div>`;
+export const APP_CSS = `
+.cn-app { display: flex; min-height: 100vh; background-color: {color.bg-canvas}; }
+.cn-app__main { flex: 1 1 auto; min-width: 0; padding: {space.8}; display: flex; flex-direction: column; gap: {space.8}; }
+.cn-app__muted { color: {color.fg-muted}; }
+.cn-card[data-padding="none"] > .cn-app__card-body { padding: {space.6}; }
+.cn-card[data-padding="none"] > .cn-app__card-body--flush { padding: 0; overflow-x: auto; }
+.cn-app__chart { width: 100%; height: auto; display: block; }
+.cn-app__grid line { stroke: {color.border-subtle}; stroke-width: 1; }
+.cn-app__line { fill: none; stroke: {color.bg-action}; stroke-width: 2; }
+.cn-app__area { fill: {color.bg-action-subtle}; }
+.cn-app__bar { fill: {color.bg-action}; }
+.cn-app__bar:nth-child(even) { fill: {brand.300}; }
+.cn-app__table-card .cn-table { width: 100%; }
+.cn-app__table-card[data-padding="none"] > .cn-card__footer { padding: {space.3} {space.6}; }
+.cn-app__table-card > .cn-card__footer > .cn-row { flex-wrap: wrap; }
+.cn-app__legend { display: flex; gap: {space.4}; font-size: {font.size.sm}; color: {color.fg-muted}; }
+.cn-app__legend span::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px; background-color: {color.bg-action}; margin-inline-end: {space.2}; }
+.cn-app__legend span:nth-child(2)::before { background-color: {brand.300}; }
+.cn-app__drawer { width: 440px; flex-shrink: 0; border-inline-start: {border.width.thin} solid {color.border-default}; background-color: {color.bg-surface}; display: flex; flex-direction: column; }
+.cn-app__drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: {space.4}; padding: {space.6}; border-bottom: {border.width.thin} solid {color.border-default}; }
+.cn-app__drawer-body { padding: {space.6}; display: flex; flex-direction: column; gap: {space.6}; flex: 1 1 auto; }
+.cn-app__drawer-foot { display: flex; justify-content: flex-end; gap: {space.3}; padding: {space.4} {space.6}; border-top: {border.width.thin} solid {color.border-default}; }
+.cn-app__dl { display: grid; grid-template-columns: 1fr; gap: {space.4}; }
+.cn-app__dl dt { font-size: {font.size.sm}; font-weight: {font.weight.medium}; color: {color.fg-muted}; }
+.cn-app__dl dd { font-size: {font.size.sm}; color: {color.fg-default}; margin-top: {space.1}; }
+.cn-app__form-row { display: grid; grid-template-columns: 280px 1fr; gap: {space.8}; padding-block: {space.5}; border-bottom: {border.width.thin} solid {color.border-default}; }
+.cn-app__form-row > .cn-stack { max-width: 512px; }
+.cn-app__form-label { display: flex; flex-direction: column; gap: {space.1}; }
+.cn-app__form-label span:first-child { font-size: {font.size.sm}; font-weight: {font.weight.semibold}; color: {color.fg-default}; }
+.cn-app__form-label span:last-child { font-size: {font.size.sm}; color: {color.fg-muted}; }
+.cn-app__form-actions { display: flex; justify-content: flex-end; gap: {space.3}; padding-top: {space.5}; }
+.cn-app__plan { display: flex; flex-direction: column; gap: {space.4}; }
+@media (max-width: {breakpoint.lg}) { .cn-app .cn-sidebar { display: none; } .cn-app__drawer { display: none; } .cn-app__form-row { grid-template-columns: 1fr; gap: {space.3}; } }
+@media (max-width: {breakpoint.md}) { .cn-app__main { padding: {space.4}; gap: {space.6}; } }`;

package/lib/patterns/app-shell.mjs

@@ -0,0 +1,25 @@
+export const appShell = {
+    name: 'App shell',
+    slug: 'app-shell',
+    category: 'app-layout',
+    description: 'Top navigation bar with 4–5 tabs phrased as user questions, a page header (kicker + title + one primary action), and a content area with a max width. No left sidebar by default.',
+    rules: [
+        'Structure: <header class="cn-topbar"> → <main class="cn-page"> → <div class="cn-page__header"> + <div class="cn-page__body">.',
+        'Page header: kicker (mono uppercase) above the h1 (heading-xl). Actions on the right: at most one primary button plus ghost/outline buttons.',
+        'Content max width 1152px (size.container.xl), 24px side padding, 32px between page header and body.',
+        'Sections inside the body are separated by 32px (space.8); groups inside a section by 16px (space.4); rows inside a group by 8px (space.2).',
+        'Detail views open in a Drawer over the current list; do not navigate to a separate page for one item.',
+    ],
+    html: `<div class="cn-shell"><header class="cn-topbar"><div class="cn-topbar__inner"><a href="#" class="cn-topbar__brand">Vera</a><nav class="cn-tabs" data-variant="underline" data-size="md" aria-label="Main"><a class="cn-tabs__tab" href="#" aria-current="page">O que precisa de mim?</a><a class="cn-tabs__tab" href="#">A equipe está trabalhando?</a><a class="cn-tabs__tab" href="#">Onde cada pessoa está?</a><a class="cn-tabs__tab" href="#">Configurações</a></nav><div class="cn-topbar__actions"><span class="cn-avatar" data-size="sm" data-shape="circle"><span class="cn-avatar__fallback">MD</span></span></div></div></header><main class="cn-page"><div class="cn-page__header"><div><div class="cn-kicker" data-mark="square"><span class="cn-kicker__mark"></span>Hoje</div><h1 class="cn-page__title">O que precisa de mim?</h1><p class="cn-page__description">3 aprovações e 2 respostas aguardando.</p></div><div class="cn-page__actions"><button type="button" class="cn-button" data-variant="outline" data-size="md"><span class="cn-button__label">Exportar</span></button><button type="button" class="cn-button" data-variant="primary" data-size="md"><span class="cn-button__label">Nova busca</span></button></div></div><div class="cn-page__body"><section class="cn-card" data-variant="default" data-padding="md"><div class="cn-card__body cn-text-body-md">Content</div></section></div></main></div>`,
+    css: `
+.cn-shell { min-height: 100vh; background-color: {color.bg-canvas}; }
+.cn-page { width: 100%; max-width: {size.container.xl}; margin-inline: auto; padding: {space.8} {space.6} {space.16}; }
+.cn-page__header { display: flex; align-items: flex-end; justify-content: space-between; gap: {space.6}; margin-bottom: {space.8}; }
+.cn-page__title { font-family: {type.heading-xl.family}; font-size: {type.heading-xl.size}; font-weight: {type.heading-xl.weight}; line-height: {type.heading-xl.lineHeight}; letter-spacing: {type.heading-xl.letterSpacing}; margin-top: {space.2}; }
+.cn-page__description { font-size: {font.size.md}; color: {color.fg-muted}; margin-top: {space.2}; }
+.cn-page__actions { display: flex; align-items: center; gap: {space.2}; flex-shrink: 0; }
+.cn-page__body { display: flex; flex-direction: column; gap: {space.8}; }
+.cn-section { display: flex; flex-direction: column; gap: {space.4}; }
+.cn-section__header { display: flex; align-items: baseline; justify-content: space-between; gap: {space.4}; }
+@media (max-width: {breakpoint.md}) { .cn-page { padding-inline: {space.4}; } .cn-page__header { flex-direction: column; align-items: stretch; } }`,
+};

package/lib/patterns/audit-log.mjs

@@ -0,0 +1,37 @@
+import { SIDEBAR, PAGE_HEADER, BTN, AVATAR, BADGE, ICON, APP_CSS, PAGINATION, CARD_HEAD } from "./_app.mjs";
+const ROWS = [['MC', 'Maya Chen', 'accent', 'updated', 'Billing settings', 'Changed payment method to Visa •••• 4242', 'Today 09:41', 'settings', true], ['DC', 'Daniel Costa', 'success', 'deployed', 'Billing webhook v2', 'Production · 2 migrations', 'Today 08:20', 'deploy', false], ['System', 'System', 'neutral', 'rotated', 'API key lum_live_…8f2a', 'Scheduled rotation (90 days)', 'Today 03:00', 'security', false], ['SA', 'Sofia Almeida', 'warning', 'shared', 'Brand assets v3', 'With 8 people · view only', 'Yesterday 18:40', 'files', false], ['AK', 'Aisha Khan', 'accent', 'changed role', 'Elena Rossi', 'Member → Admin', 'Yesterday 16:12', 'members', true], ['LF', 'Lucas Ferreira', 'info', 'exported', 'Customers (2,420 rows)', 'CSV · 1.2 MB', 'Mon 11:05', 'data', false], ['NB', 'Noah Berg', 'success', 'signed in', 'New device', 'MacBook Pro · São Paulo', 'Mon 09:02', 'security', false]];
+const CAT = { settings: 'neutral', deploy: 'info', security: 'warning', files: 'accent', members: 'accent', data: 'neutral' };
+const FILTERS = `<div class="cn-row" data-justify="between" data-gap="3" data-wrap><div class="cn-row" data-gap="3" data-wrap><div class="cn-input" data-variant="default" data-size="md" style="width:280px">${ICON.search.replace('cn-icon', 'cn-input__icon')}<input class="cn-input__field" type="search" placeholder="Search events" aria-label="Search events"></div>${BTN('outline', 'Actor', 'md', ICON.chevronDown)}${BTN('outline', 'Category', 'md', ICON.chevronDown)}${BTN('outline', 'Last 7 days', 'md', ICON.calendar)}</div><div class="cn-row" data-gap="2"><span class="cn-text-body-sm cn-app__muted">1,204 events</span>${BTN('outline', 'Export', 'md', ICON.external)}</div></div>`;
+export const auditLog = {
+    name: 'Audit log and activity',
+    slug: 'audit-log',
+    category: 'app-page',
+    description: 'A chronological record of who did what: a dense table with actor, action, target and metadata and expandable detail rows; a timeline view; and a security-events variant with severity.',
+    rules: [
+        'Filters: search, actor, category and a date range on the left; count and Export on the right. Filters never hide the table.',
+        'Rows are compact (48px): actor (avatar xs + name), action in plain words, target in label-sm, a category badge, timestamp right-aligned in body-sm muted; important rows can expand to a detail block (key/value list) below the row.',
+        'Timeline variant groups by day with a vertical line and dots; the same fields, more room for descriptions.',
+        'Security events use severity badges (danger/warning/neutral) and a “Review” action; never color entire rows.',
+    ],
+    html: `<div class="cn-app">${SIDEBAR('Reporting')}<main class="cn-app__main">${PAGE_HEADER('Audit log', 'Every change in your workspace, kept for 400 days.', BTN('outline', 'Retention settings', 'md', ICON.settings))}${FILTERS}<section class="cn-card cn-app__table-card" data-variant="default" data-padding="none"><div class="cn-card__body cn-app__card-body cn-app__card-body--flush" role="region" tabindex="0" aria-label="Scrollable table"><table class="cn-table" data-density="compact" data-variant="default" data-interactive><thead class="cn-table__head"><tr class="cn-table__row"><th class="cn-table__header-cell" scope="col" style="width:32px"></th><th class="cn-table__header-cell" scope="col">Actor</th><th class="cn-table__header-cell" scope="col">Event</th><th class="cn-table__header-cell" scope="col">Category</th><th class="cn-table__header-cell" scope="col" data-align="right">When</th></tr></thead><tbody class="cn-table__body">${ROWS.map(([i, n, tone, a, t, d, w, cat, open]) => `<tr class="cn-table__row"${open ? ' data-selected' : ''}><td class="cn-table__cell"><button type="button" class="cn-audit__toggle" aria-expanded="${open}" aria-label="Details">${ICON.chevronRight}</button></td><td class="cn-table__cell"><div class="cn-row" data-gap="2">${n === 'System' ? `<span class="cn-audit__sys" aria-hidden="true">${ICON.settings}</span>` : AVATAR(i, n, 'xs', tone)}<span class="cn-text-label-sm">${n}</span></div></td><td class="cn-table__cell"><span class="cn-app__muted">${a}</span> <span class="cn-text-label-sm">${t}</span> <span class="cn-app__muted">· ${d}</span></td><td class="cn-table__cell">${BADGE(cat, CAT[cat])}</td><td class="cn-table__cell" data-align="right">${w}</td></tr>${open ? `<tr class="cn-table__row cn-audit__detail"><td class="cn-table__cell" colspan="5"><dl class="cn-audit__dl"><div><dt>Event ID</dt><dd><code class="cn-code" data-variant="inline" data-size="sm">evt_01J8Z3K2QWERTY</code></dd></div><div><dt>IP address</dt><dd>187.34.12.9 · Florianópolis, BR</dd></div><div><dt>User agent</dt><dd>Chrome 129 · macOS</dd></div><div><dt>Before → After</dt><dd>Mastercard •••• 0913 → Visa •••• 4242</dd></div></dl></td></tr>` : ''}`).join('')}</tbody></table></div><footer class="cn-card__footer">${PAGINATION}</footer></section></main></div>`,
+    variants: [
+        { title: 'Timeline view', html: `<div class="cn-app">${SIDEBAR('Reporting')}<main class="cn-app__main">${PAGE_HEADER('Activity', 'What your team did this week.', BTN('outline', 'Export', 'md', ICON.external))}${FILTERS}<div class="cn-stack" data-gap="8" style="max-width:800px">${[['Today', ROWS.slice(0, 3)], ['Yesterday', ROWS.slice(3, 5)], ['Monday', ROWS.slice(5)]].map(([day, rows]) => `<section class="cn-stack" data-gap="3"><h2 class="cn-text-label-sm cn-app__muted">${day}</h2><ol class="cn-audit__timeline">${rows.map(([i, n, tone, a, t, d, w, cat]) => `<li class="cn-audit__event"><span class="cn-audit__dot" data-tone="${CAT[cat]}" aria-hidden="true"></span><div class="cn-stack" data-gap="1"><div class="cn-row" data-gap="2" data-wrap>${n === 'System' ? '' : AVATAR(i, n, 'xs', tone)}<span class="cn-text-body-sm"><strong>${n}</strong> ${a} <strong>${t}</strong></span>${BADGE(cat, CAT[cat])}<span class="cn-text-body-xs cn-app__muted">${w.replace('Today ', '').replace('Yesterday ', '').replace('Mon ', '')}</span></div><span class="cn-text-body-sm cn-app__muted">${d}</span></div></li>`).join('')}</ol></section>`).join('')}</div></main></div>` },
+        { title: 'Security events with severity', html: `<div class="cn-app">${SIDEBAR('Settings')}<main class="cn-app__main">${PAGE_HEADER('Security events', 'Sign-ins, key rotations and permission changes.', `${BTN('outline', 'Configure alerts', 'md', ICON.settings)}${BTN('primary', 'Review all', 'md')}`)}<div class="cn-grid" data-cols="3" data-gap="6" data-keep>${[['Needs review', '3', 'danger'], ['New devices (7d)', '12', 'warning'], ['Key rotations (30d)', '4', 'neutral']].map(([l, v, tone]) => `<div class="cn-stat" data-size="md" data-variant="card" data-trend="flat"><div class="cn-stat__label">${l}</div><div class="cn-row" data-gap="3" data-align="end"><div class="cn-stat__value">${v}</div>${BADGE(tone === 'danger' ? 'Action needed' : tone === 'warning' ? 'Monitor' : 'Normal', tone)}</div></div>`).join('')}</div>${FILTERS.replace('Search events', 'Search security events')}<section class="cn-card cn-app__table-card" data-variant="default" data-padding="none"><div class="cn-section-header" data-variant="card" data-divider="yes">${CARD_HEAD('Events', '', '', BADGE('3 need review', 'danger'))}</div><div class="cn-card__body cn-app__card-body cn-app__card-body--flush" role="region" tabindex="0" aria-label="Scrollable table"><table class="cn-table" data-density="compact" data-variant="default"><thead class="cn-table__head"><tr class="cn-table__row"><th class="cn-table__header-cell" scope="col">Severity</th><th class="cn-table__header-cell" scope="col">Event</th><th class="cn-table__header-cell" scope="col">Actor</th><th class="cn-table__header-cell" scope="col" data-align="right">When</th><th class="cn-table__header-cell" scope="col"><span class="cn-sr-only">Actions</span></th></tr></thead><tbody class="cn-table__body">${[['High', 'danger', 'Sign-in from new country', 'Noah Berg · Lagos, NG', 'NB', 'success', '09:02'], ['High', 'danger', 'Role changed to Admin', 'Elena Rossi by Aisha Khan', 'AK', 'accent', 'Yesterday'], ['Medium', 'warning', 'API key created', 'lum_live_…c91d by Daniel Costa', 'DC', 'success', 'Mon'], ['Low', 'neutral', 'Scheduled key rotation', 'lum_live_…8f2a', 'S', 'neutral', 'Mon'], ['Low', 'neutral', 'Password changed', 'Sofia Almeida', 'SA', 'warning', 'Sun']].map(([sev, tone, ev, who, i, atone, w]) => `<tr class="cn-table__row"><td class="cn-table__cell">${BADGE(sev, tone, 'soft', true)}</td><td class="cn-table__cell"><span class="cn-text-label-sm">${ev}</span></td><td class="cn-table__cell"><div class="cn-row" data-gap="2">${AVATAR(i, who, 'xs', atone)}<span>${who}</span></div></td><td class="cn-table__cell" data-align="right">${w}</td><td class="cn-table__cell cn-table__actions">${tone === 'danger' ? BTN('outline', 'Review', 'sm') : BTN('ghost', 'Details', 'sm')}</td></tr>`).join('')}</tbody></table></div></section></main></div>` },
+    ],
+    css: `${APP_CSS}
+.cn-audit__toggle { appearance: none; border: 0; background: none; padding: 0; width: 24px; height: 24px; border-radius: {radius.sm}; color: {color.fg-subtle}; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
+.cn-audit__toggle[aria-expanded="true"] { transform: rotate(90deg); }
+.cn-audit__toggle .cn-icon { width: 16px; height: 16px; }
+.cn-audit__sys { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: {radius.full}; background-color: {color.bg-subtle}; color: {color.fg-subtle}; }
+.cn-audit__sys .cn-icon { width: 14px; height: 14px; }
+.cn-audit__detail .cn-table__cell { background-color: {color.bg-subtle}; padding-inline-start: 56px; }
+.cn-audit__dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: {space.4}; margin: 0; }
+.cn-audit__dl dt { font-size: {font.size.xs}; font-weight: {font.weight.medium}; color: {color.fg-subtle}; }
+.cn-audit__dl dd { font-size: {font.size.sm}; color: {color.fg-default}; margin-top: {space.1}; }
+.cn-audit__timeline { list-style: none; margin: 0; padding: 0 0 0 {space.6}; position: relative; display: flex; flex-direction: column; gap: {space.5}; border-inline-start: {border.width.thin} solid {color.border-default}; margin-inline-start: 6px; }
+.cn-audit__event { position: relative; }
+.cn-audit__dot { position: absolute; left: calc({space.6} * -1 - 6px); top: 4px; width: 11px; height: 11px; border-radius: {radius.full}; background-color: {color.border-strong}; box-shadow: 0 0 0 2px {color.bg-canvas}; }
+.cn-audit__dot[data-tone="accent"] { background-color: {color.bg-action}; } .cn-audit__dot[data-tone="info"] { background-color: {color.bg-info}; } .cn-audit__dot[data-tone="warning"] { background-color: {color.bg-warning}; }
+@media (max-width: {breakpoint.md}) { .cn-audit__dl { grid-template-columns: 1fr 1fr; } }`,
+    viewport: 'desktop',
+};

package/lib/patterns/auth-pages.mjs

@@ -0,0 +1,44 @@
+import { BTN, FIELD, INPUT, CHECKBOX, ICON, IMG } from "./_app.mjs";
+const LOGO = `<span class="cn-auth__logo" aria-hidden="true"></span>`;
+const GOOGLE = `<button type="button" class="cn-button" data-variant="outline" data-size="lg" style="width:100%"><svg class="cn-button__icon" viewBox="0 0 16 16" aria-hidden="true"><circle cx="8" cy="8" r="6.5" fill="none" stroke="currentColor" stroke-width="1.5"/><path d="M8 5v6M5 8h6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg><span class="cn-button__label">Sign in with Google</span></button>`;
+const LOGIN_FORM = `<form class="cn-stack" data-gap="5">${FIELD('l-email', 'Email', INPUT('l-email', '', 'email', 'Enter your email'))}${FIELD('l-pass', 'Password', INPUT('l-pass', '', 'password', '••••••••'))}<div class="cn-row" data-justify="between">${CHECKBOX('Remember for 30 days')}<a href="#" class="cn-link" data-variant="standalone">Forgot password</a></div><div class="cn-stack" data-gap="3">${BTN('primary', 'Sign in', 'lg').replace('class="cn-button"', 'class="cn-button" style="width:100%"')}${GOOGLE}</div></form><p class="cn-text-body-sm cn-auth__muted cn-center">Don’t have an account? <a href="#" class="cn-link" data-variant="standalone">Sign up</a></p>`;
+const SIGNUP_FORM = `<form class="cn-stack" data-gap="5">${FIELD('s-name', 'Name', INPUT('s-name', '', 'text', 'Enter your name'))}${FIELD('s-email', 'Email', INPUT('s-email', '', 'email', 'Enter your email'))}${FIELD('s-pass', 'Password', INPUT('s-pass', '', 'password', 'Create a password'), 'Must be at least 8 characters.')}<div class="cn-stack" data-gap="3">${BTN('primary', 'Get started', 'lg').replace('class="cn-button"', 'class="cn-button" style="width:100%"')}${GOOGLE.replace('Sign in with Google', 'Sign up with Google')}</div></form><p class="cn-text-body-sm cn-auth__muted cn-center">Already have an account? <a href="#" class="cn-link" data-variant="standalone">Log in</a></p>`;
+const head = (title, text) => `<div class="cn-stack cn-center" data-gap="3" data-align="center">${LOGO}<h1 class="cn-text-heading-lg">${title}</h1><p class="cn-text-body-lg cn-auth__muted">${text}</p></div>`;
+const FOOT = `<footer class="cn-auth__foot"><span class="cn-text-body-sm cn-auth__muted">© Lumen 2026</span><span class="cn-text-body-sm cn-auth__muted">help@lumen.co</span></footer>`;
+export const authPages = {
+    name: 'Auth and error pages',
+    slug: 'auth-pages',
+    category: 'shared-page',
+    description: 'Log in, sign up, forgot password, verification code and 404 — centered single-column cards (360px) or split with an image. Shared across every product.',
+    rules: [
+        'One column, 360px wide, centered vertically and horizontally; logo, heading-lg title, body-lg supporting text, then the form.',
+        'Form: fields 20px apart, full-width lg primary button, optional social button below it, then the switch link ("Don’t have an account?").',
+        'Split variant: form on the left inside a 1:1 split, image bleeding to the right edge, footer with copyright and support email.',
+        'Verification: 4 (or 6) 64px code inputs, 8px apart, with a resend link.',
+        '404: a brand-colored "404 error" kicker, display-lg title, body-xl text, two buttons (outline "Go back", primary "Take me home").',
+    ],
+    html: `<div class="cn-auth"><div class="cn-auth__card">${head('Log in to your account', 'Welcome back! Please enter your details.')}${LOGIN_FORM}</div></div>`,
+    variants: [
+        { title: 'Sign up', html: `<div class="cn-auth"><div class="cn-auth__card">${head('Create an account', 'Start your 30-day free trial.')}${SIGNUP_FORM}</div></div>` },
+        { title: 'Log in, split with image', html: `<div class="cn-auth cn-auth--split"><div class="cn-auth__side"><div class="cn-auth__card">${head('Welcome back', 'Please enter your details.').replace('cn-center', '').replace('data-align="center"', 'data-align="start"')}${LOGIN_FORM}</div>${FOOT}</div>${IMG('1 / 1', 'data-radius="none"')}</div>` },
+        { title: 'Forgot password', html: `<div class="cn-auth"><div class="cn-auth__card">${head('Forgot password?', 'No worries, we’ll send you reset instructions.')}<form class="cn-stack" data-gap="5">${FIELD('f-email', 'Email', INPUT('f-email', '', 'email', 'Enter your email'))}${BTN('primary', 'Reset password', 'lg').replace('class="cn-button"', 'class="cn-button" style="width:100%"')}</form><a href="#" class="cn-link cn-auth__back" data-variant="standalone">${ICON.arrow.replace('cn-icon', 'cn-link__icon cn-auth__back-icon')}Back to log in</a></div></div>` },
+        { title: 'Check your email (verification code)', html: `<div class="cn-auth"><div class="cn-auth__card">${head('Check your email', 'We sent a verification code to maya@lumen.co')}<form class="cn-stack" data-gap="6"><div class="cn-auth__code" role="group" aria-label="Verification code">${[0, 1, 2, 3].map((i) => `<input class="cn-auth__digit" type="text" inputmode="numeric" maxlength="1" aria-label="Digit ${i + 1}"${i < 2 ? ` value="${[7, 2][i]}"` : ''}>`).join('')}</div>${BTN('primary', 'Verify email', 'lg').replace('class="cn-button"', 'class="cn-button" style="width:100%"')}</form><p class="cn-text-body-sm cn-auth__muted cn-center">Didn’t receive the email? <a href="#" class="cn-link" data-variant="standalone">Click to resend</a></p><a href="#" class="cn-link cn-auth__back" data-variant="standalone">${ICON.arrow.replace('cn-icon', 'cn-link__icon cn-auth__back-icon')}Back to log in</a></div></div>` },
+        { title: '404', html: `<div class="cn-auth"><div class="cn-auth__card cn-auth__card--wide"><div class="cn-stack cn-center" data-gap="6" data-align="center"><div class="cn-kicker" data-tone="accent" data-size="md" data-mark="none"><span class="cn-kicker__mark"></span>404 error</div><h1 class="cn-text-display-lg">We can’t find that page</h1><p class="cn-text-body-xl cn-auth__muted">Sorry, the page you are looking for doesn’t exist or has been moved.</p><div class="cn-row" data-gap="3">${BTN('outline', 'Go back', 'xl')}${BTN('primary', 'Take me home', 'xl')}</div></div></div></div>` },
+    ],
+    css: `
+.cn-auth { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: {space.12} {space.4}; background-color: {color.bg-surface}; }
+.cn-auth__card { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: {space.8}; }
+.cn-auth__card--wide { max-width: 640px; }
+.cn-auth__logo { display: inline-block; width: 48px; height: 48px; border-radius: {radius.xl}; background-color: {color.bg-action}; margin-bottom: {space.3}; }
+.cn-auth__muted { color: {color.fg-muted}; }
+.cn-auth__back { align-self: center; display: inline-flex; align-items: center; gap: {space.1.5}; }
+.cn-auth__back-icon { transform: rotate(180deg); margin: 0; }
+.cn-auth__code { display: flex; gap: {space.2}; justify-content: center; }
+.cn-auth__digit { width: 64px; height: 64px; text-align: center; font-family: {font.family.sans}; font-size: {font.size.5xl}; font-weight: {font.weight.medium}; color: {color.fg-action}; border: {border.width.thin} solid {color.border-control}; border-radius: {radius.lg}; background-color: {color.bg-surface}; box-shadow: {shadow.xs}; }
+.cn-auth__digit:focus { outline: none; border-color: {color.border-action}; box-shadow: {shadow.focus}; }
+.cn-auth--split { display: grid; grid-template-columns: 1fr 1fr; padding: 0; min-height: 720px; }
+.cn-auth__side { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: {space.12} {space.8}; position: relative; }
+.cn-auth__foot { position: absolute; bottom: {space.8}; left: {space.8}; right: {space.8}; display: flex; flex-wrap: wrap; gap: {space.2} {space.6}; justify-content: space-between; }
+@media (max-width: {breakpoint.md}) { .cn-auth--split { grid-template-columns: 1fr; } .cn-auth--split > .cn-placeholder { display: none; } .cn-auth__foot { position: static; margin-top: {space.8}; } }`,
+    viewport: 'both',
+};

package/lib/patterns/billing-page.mjs

@@ -0,0 +1,39 @@
+import { SIDEBAR, PAGE_HEADER, BTN, TABS, BADGE, ICON, APP_CSS, CARD, CARD_HEAD, FIELD, INPUT } from "./_app.mjs";
+const PLAN = `<section class="cn-card" data-variant="default" data-padding="none"><div class="cn-section-header" data-variant="card" data-divider="yes">${CARD_HEAD('Business plan', 'Renews on 12 October 2026', `${BTN('outline', 'Change plan', 'sm')}`, BADGE('Monthly', 'accent'))}</div><div class="cn-card__body cn-app__card-body cn-stack" data-gap="4"><div class="cn-row" data-justify="between" data-align="end"><span class="cn-text-heading-lg">$20<span class="cn-text-body-md cn-app__muted"> per user / month</span></span><span class="cn-text-body-sm cn-app__muted">14 of 20 seats used</span></div><div class="cn-progress" data-size="sm" data-tone="action" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" aria-label="Seats used"><div class="cn-progress__track"><div class="cn-progress__indicator" style="width:70%"></div></div></div></div></section>`;
+const PAYMENT = `<section class="cn-card" data-variant="default" data-padding="none"><div class="cn-section-header" data-variant="card" data-divider="yes">${CARD_HEAD('Payment method', 'Change how you pay for your plan.', BTN('outline', 'Edit', 'sm'))}</div><div class="cn-card__body cn-app__card-body"><div class="cn-billing__card"><span class="cn-billing__brand" aria-hidden="true">VISA</span><div class="cn-stack cn-flex-1" data-gap="0"><span class="cn-text-label-sm">Visa ending in 4242</span><span class="cn-text-body-sm cn-app__muted">Expiry 06/2028 · billing@lumen.co</span></div>${BADGE('Default', 'neutral')}</div></div></section>`;
+const INVOICES = `<section class="cn-card cn-app__table-card" data-variant="default" data-padding="none"><div class="cn-section-header" data-variant="card" data-divider="yes">${CARD_HEAD('Billing history', 'Download invoices for your records.', BTN('outline', 'Download all', 'sm', ICON.external))}</div><div class="cn-card__body cn-app__card-body cn-app__card-body--flush" role="region" tabindex="0" aria-label="Scrollable table"><table class="cn-table" data-density="default" data-variant="default"><thead class="cn-table__head"><tr class="cn-table__row"><th class="cn-table__header-cell" scope="col">Invoice</th><th class="cn-table__header-cell" scope="col">Date</th><th class="cn-table__header-cell" scope="col">Status</th><th class="cn-table__header-cell" scope="col" data-align="right">Amount</th><th class="cn-table__header-cell" scope="col" data-align="right">Seats</th><th class="cn-table__header-cell" scope="col"><span class="cn-sr-only">Actions</span></th></tr></thead><tbody class="cn-table__body">${[['Sep 2026', 'Paid', 'success', '$280.00', 14], ['Aug 2026', 'Paid', 'success', '$260.00', 13], ['Jul 2026', 'Paid', 'success', '$240.00', 12], ['Jun 2026', 'Refunded', 'neutral', '$220.00', 11], ['May 2026', 'Failed', 'danger', '$220.00', 11]].map(([m, s, tone, a, n], i) => `<tr class="cn-table__row"><td class="cn-table__cell"><span class="cn-text-label-sm">Invoice #${2091 - i}</span></td><td class="cn-table__cell">${m}</td><td class="cn-table__cell">${BADGE(s, tone, 'soft', true)}</td><td class="cn-table__cell" data-align="right">${a}</td><td class="cn-table__cell" data-align="right">${n}</td><td class="cn-table__cell cn-table__actions">${BTN('link-color', 'Download', 'sm')}</td></tr>`).join('')}</tbody></table></div></section>`;
+export const billingPage = {
+    name: 'Billing and checkout',
+    slug: 'billing-page',
+    category: 'app-page',
+    description: 'Plan and usage, payment method, billing history; a plan change with a comparison; and a checkout form with an order summary.',
+    rules: [
+        'Billing page: plan card (name, renewal, price per seat, seat usage bar), payment method card (brand mark, last 4, expiry, Default badge), invoices table (number, date, status badge, amount right-aligned, download link).',
+        'Failed payments show a danger Alert at the top with a single "Update payment method" action.',
+        'Checkout: two columns — form (contact, card number with brand icon, expiry + CVC in a row, country) on the left, an order summary card on the right (line items, subtotal, tax, total in heading-md); the primary button names the amount ("Pay $280.00").',
+        'Never mask everything: show the last 4 digits and the brand; never ask for the CVC outside the payment step.',
+    ],
+    html: `<div class="cn-app">${SIDEBAR('Settings')}<main class="cn-app__main">${PAGE_HEADER('Billing', 'Manage your plan, payment method and invoices.', BTN('outline', 'Contact billing support', 'md'))}${TABS(['Plan', 'Usage', 'Invoices', 'Tax'], 0)}<div class="cn-alert" data-tone="danger" data-variant="soft" data-layout="inline" role="alert"><span class="cn-alert__icon" aria-hidden="true">${ICON.warning}</span><div class="cn-alert__content"><div class="cn-alert__title">Your last payment failed</div><p class="cn-alert__description">We couldn’t charge the Visa ending in 4242 on 12 September. Update your payment method to keep your plan active.</p><div class="cn-alert__actions">${BTN('link-color', 'Update payment method', 'sm')}</div></div></div><div class="cn-grid" data-cols="2" data-gap="6">${PLAN}${PAYMENT}</div>${INVOICES}</main></div>`,
+    variants: [
+        { title: 'Change plan', html: `<div class="cn-app">${SIDEBAR('Settings')}<main class="cn-app__main">${PAGE_HEADER('Change plan', 'Switch plans any time. Changes are prorated on your next invoice.', BTN('ghost', 'Back to billing', 'md'))}<div class="cn-segmented-control" data-size="md" data-variant="default" role="radiogroup" aria-label="Billing period" style="align-self:flex-start"><button type="button" class="cn-segmented-control__item" role="radio" aria-checked="true">Monthly</button><button type="button" class="cn-segmented-control__item" role="radio" aria-checked="false">Annual · save 20%</button></div><div class="cn-grid" data-cols="3" data-gap="6">${[['Basic', '$10', 'For small teams getting started.', ['Up to 10 users', 'Basic reporting', 'Email support'], false, false], ['Business', '$20', 'Your current plan.', ['Up to 20 users', 'Advanced reporting', 'Priority support', '200+ integrations'], true, false], ['Enterprise', '$40', 'Security, control and scale.', ['Unlimited users', 'Audit log', 'SSO / SAML', 'Dedicated manager'], false, true]].map(([n, p, d, items, cur, best]) => `<section class="cn-card cn-billing__plan" data-variant="default" data-padding="lg"${best ? ' data-selected' : ''}><div class="cn-card__body cn-stack" data-gap="5"><div class="cn-row" data-justify="between"><span class="cn-text-heading-sm">${n}</span>${cur ? BADGE('Current', 'accent') : best ? BADGE('Recommended', 'success') : ''}</div><span class="cn-text-heading-lg">${p}<span class="cn-text-body-sm cn-app__muted"> per user / month</span></span><span class="cn-text-body-sm cn-app__muted">${d}</span><ul class="cn-stack" data-gap="2">${items.map((it) => `<li class="cn-row" data-gap="2"><span class="cn-billing__tick">${ICON.check}</span><span class="cn-text-body-sm">${it}</span></li>`).join('')}</ul>${cur ? BTN('outline', 'Current plan', 'md') : BTN(best ? 'primary' : 'outline', 'Switch to ' + n, 'md')}</div></section>`).join('')}</div></main></div>` },
+        { title: 'Checkout', html: `<div class="cn-app">${SIDEBAR('Settings', 'slim')}<main class="cn-app__main">${PAGE_HEADER('Checkout', 'Upgrade to Enterprise · billed monthly', '')}<div class="cn-grid cn-billing__checkout" data-cols="3" data-gap="8"><form class="cn-app__span2 cn-stack" data-gap="8"><section class="cn-stack" data-gap="5"><h2 class="cn-text-heading-sm">Contact</h2>${FIELD('b-email', 'Email', INPUT('b-email', 'billing@lumen.co', 'email'))}</section><section class="cn-stack" data-gap="5"><h2 class="cn-text-heading-sm">Payment</h2>${FIELD('b-card', 'Card number', `<div class="cn-input" data-variant="default" data-size="md"><span class="cn-billing__brand cn-billing__brand--sm" aria-hidden="true">VISA</span><input class="cn-input__field" id="b-card" type="text" inputmode="numeric" placeholder="1234 1234 1234 1234"></div>`)}<div class="cn-grid" data-cols="2" data-gap="5" data-keep>${FIELD('b-exp', 'Expiry', INPUT('b-exp', '', 'text', 'MM / YY'))}${FIELD('b-cvc', 'CVC', INPUT('b-cvc', '', 'text', '123'))}</div>${FIELD('b-name', 'Name on card', INPUT('b-name', 'Maya Chen'))}${FIELD('b-country', 'Country', `<div class="cn-select" data-variant="default" data-size="md"><select class="cn-select__field" id="b-country" aria-label="Country"><option>Brazil</option><option selected>United States</option><option>Portugal</option></select><svg class="cn-select__chevron" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 6l4 4 4-4"/></svg></div>`)}</section></form><aside>${CARD(CARD_HEAD('Order summary'), `<div class="cn-stack" data-gap="4"><dl class="cn-billing__lines"><div><dt>Enterprise plan × 14 seats</dt><dd>$560.00</dd></div><div><dt>Credit from current plan</dt><dd>−$186.67</dd></div><div><dt>Tax (0%)</dt><dd>$0.00</dd></div><div class="cn-billing__total"><dt>Due today</dt><dd>$373.33</dd></div></dl><span class="cn-text-body-sm cn-app__muted">Then $560.00 on the 12th of each month. Cancel any time.</span>${BTN('primary', 'Pay $373.33', 'lg')}<span class="cn-text-body-xs cn-app__muted cn-center">Payments are processed securely. By paying you agree to the <a href="#" class="cn-link" data-variant="inline">terms</a>.</span></div>`)}</aside></div></main></div>` },
+    ],
+    css: `${APP_CSS}
+.cn-app__span2 { grid-column: span 2; min-width: 0; }
+.cn-billing__card { display: flex; align-items: center; gap: {space.4}; padding: {space.4}; border: {border.width.thin} solid {color.border-default}; border-radius: {radius.card}; }
+.cn-billing__brand { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 32px; border-radius: {radius.sm}; border: {border.width.thin} solid {color.border-default}; background-color: {color.bg-surface}; font-family: {font.family.sans}; font-size: 10px; font-weight: {font.weight.bold}; letter-spacing: 0.04em; color: {brand.700}; flex-shrink: 0; }
+.cn-billing__brand--sm { width: 34px; height: 22px; margin-inline-start: {space.3}; font-size: 8px; }
+.cn-billing__plan[data-selected] { border-color: {color.border-action}; box-shadow: 0 0 0 1px {color.border-action}; }
+.cn-billing__plan .cn-button { width: 100%; }
+.cn-billing__tick { display: inline-flex; color: {color.fg-success}; }
+.cn-billing__tick .cn-icon { width: 16px; height: 16px; }
+.cn-billing__lines { margin: 0; display: flex; flex-direction: column; gap: {space.3}; }
+.cn-billing__lines > div { display: flex; justify-content: space-between; gap: {space.4}; font-size: {font.size.sm}; color: {color.fg-muted}; }
+.cn-billing__lines dd { margin: 0; color: {color.fg-default}; font-variant-numeric: tabular-nums; }
+.cn-billing__total { padding-top: {space.3}; border-top: {border.width.thin} solid {color.border-default}; font-weight: {font.weight.semibold}; }
+.cn-billing__total dt, .cn-billing__total dd { color: {color.fg-default}; font-size: {font.size.lg}; }
+.cn-billing__checkout aside { position: sticky; top: {space.8}; }
+.cn-billing__checkout .cn-button { width: 100%; }
+@media (max-width: {breakpoint.md}) { .cn-app__span2 { grid-column: auto; } }`,
+    viewport: 'desktop',
+};