canon-ds 0.1.0

package/lib/patterns/onboarding-page.mjs

@@ -0,0 +1,42 @@
+import { BTN, FIELD, INPUT, ICON, APP_CSS, AVATAR } from "./_app.mjs";
+const STEPS = (current) => `<ol class="cn-stepper" data-variant="number" aria-label="Setup progress" data-orientation="horizontal" data-size="md">${['Your details', 'Company', 'Invite team', 'Done'].map((s, i) => `<li class="cn-stepper__step" data-state="${i < current ? 'complete' : i === current ? 'current' : 'upcoming'}"${i === current ? ' aria-current="step"' : ''}><span class="cn-stepper__indicator">${i < current ? ICON.check.replace('cn-icon', 'cn-stepper__check') : i + 1}</span><span class="cn-stepper__content"><span class="cn-stepper__label">${s}</span></span>${i < 3 ? '<span class="cn-stepper__connector" aria-hidden="true"></span>' : ''}</li>`).join('')}</ol>`;
+const LOGO = `<span class="cn-onb__logo" aria-hidden="true"></span>`;
+const CARD = (title, text, body, step) => `<div class="cn-onb"><header class="cn-onb__head">${LOGO}<span class="cn-text-label-md">Lumen</span><span class="cn-text-body-sm cn-app__muted">Step ${step + 1} of 4</span></header><main class="cn-onb__main"><div class="cn-onb__card"><div class="cn-stack" data-gap="8">${STEPS(step)}<div class="cn-stack" data-gap="2"><h1 class="cn-text-heading-lg">${title}</h1><p class="cn-text-body-lg cn-app__muted">${text}</p></div>${body}</div></div></main></div>`;
+export const onboardingPage = {
+    name: 'Onboarding wizard',
+    slug: 'onboarding-page',
+    category: 'app-page',
+    description: 'First-run flow: a focused, single-column card with a step indicator, one question per step, a back/continue footer, and a finishing screen. Also as a split layout with a preview panel.',
+    rules: [
+        'No sidebar. A minimal header (logo, product name, "Step n of 4") and a centered 560px card with 32px padding.',
+        'The stepper at the top of the card shows 3–5 steps: complete (check), current (brand), upcoming (muted); never more than 5.',
+        'One question per step: heading-lg title, body-lg supporting text, then 1–4 fields (20px apart). Continue is the only primary button; Back is ghost on the left; "Skip for now" as a link when optional.',
+        'Invite step: repeatable email rows with a role select and an "Add another" link button; the primary reads "Send invites".',
+        'Finishing screen: success featured icon (outline circle), heading-lg, body-lg, one primary "Go to dashboard".',
+    ],
+    html: CARD('Tell us about you', 'This helps us personalize your workspace.', `<form class="cn-stack" data-gap="5">${FIELD('o-name', 'Full name', INPUT('o-name', 'Maya Chen'))}${FIELD('o-role', 'What best describes your role?', `<div class="cn-select" data-variant="default" data-size="md"><select class="cn-select__field" id="o-role" aria-label="Role"><option>Founder</option><option selected>Product</option><option>Design</option><option>Engineering</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>`)}${FIELD('o-team', 'Team size', `<div class="cn-segmented-control" data-size="md" data-variant="full" role="radiogroup" aria-label="Team size">${['Just me', '2–10', '11–50', '51+'].map((v, i) => `<button type="button" class="cn-segmented-control__item" role="radio" aria-checked="${i === 1}">${v}</button>`).join('')}</div>`)}<footer class="cn-onb__foot">${BTN('ghost', 'Back', 'lg')}${BTN('primary', 'Continue', 'lg')}</footer></form>`, 0),
+    variants: [
+        { title: 'Company step with logo upload', html: CARD('Set up your company', 'You can change these later in Settings.', `<form class="cn-stack" data-gap="5">${FIELD('o-company', 'Company name', INPUT('o-company', 'Lumen'))}${FIELD('o-url', 'Workspace URL', `<div class="cn-input" data-variant="default" data-size="md"><span class="cn-input__affix">app.lumen.co/</span><input class="cn-input__field" id="o-url" type="text" value="lumen"></div>`)}${FIELD('o-logo', 'Logo', `<div class="cn-row" data-gap="4"><span class="cn-avatar" data-size="xl" data-shape="square" data-tone="accent" data-status="none" role="img" aria-label="Logo preview"><span class="cn-avatar__fallback" aria-hidden="true">L</span></span><div class="cn-file-dropzone cn-flex-1" data-size="sm"><input class="cn-file-dropzone__input" type="file" aria-label="Upload logo"><span class="cn-file-dropzone__icon" aria-hidden="true">${ICON.copy}</span><span class="cn-file-dropzone__title"><strong>Click to upload</strong> or drag and drop</span><span class="cn-file-dropzone__hint">SVG or PNG, at least 256×256</span></div></div>`)}<footer class="cn-onb__foot">${BTN('ghost', 'Back', 'lg')}${BTN('primary', 'Continue', 'lg')}</footer></form>`, 1) },
+        { title: 'Invite team', html: CARD('Invite your team', 'Add the people you work with. They’ll get an email with a link.', `<form class="cn-stack" data-gap="4">${['daniel@lumen.co', 'sofia@lumen.co', ''].map((e, i) => `<div class="cn-onb__invite"><div class="cn-input cn-flex-1" data-variant="default" data-size="md">${ICON.inbox.replace('cn-icon', 'cn-input__icon')}<input class="cn-input__field" type="email" value="${e}" placeholder="name@company.com" aria-label="Email ${i + 1}"></div><div class="cn-select" data-variant="default" data-size="md"><select class="cn-select__field" aria-label="Role ${i + 1}"><option>Member</option><option${i === 0 ? ' selected' : ''}>Admin</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></div>`).join('')}${BTN('link-color', '+ Add another', 'md')}<footer class="cn-onb__foot">${BTN('ghost', 'Back', 'lg')}<div class="cn-row" data-gap="3" data-wrap>${BTN('link', 'Skip for now', 'lg')}${BTN('primary', 'Send invites', 'lg')}</div></footer></form>`, 2) },
+        { title: 'Done', html: `<div class="cn-onb"><header class="cn-onb__head">${LOGO}<span class="cn-text-label-md">Lumen</span><span class="cn-text-body-sm cn-app__muted">Step 4 of 4</span></header><main class="cn-onb__main"><div class="cn-onb__card cn-center"><div class="cn-stack cn-center" data-gap="6" data-align="center"><span class="cn-featured-icon" data-theme="outline" data-tone="success" data-size="lg" data-shape="circle">${ICON.check.replace('cn-icon', 'cn-featured-icon__icon')}</span><div class="cn-stack" data-gap="2"><h1 class="cn-text-heading-lg">You’re all set</h1><p class="cn-text-body-lg cn-app__muted">Your workspace is ready and 2 invites are on their way. You can add more people any time from Settings → Team.</p></div><div class="cn-row" data-gap="3" data-justify="center">${AVATAR('MC', 'Maya Chen', 'md', 'accent')}${AVATAR('DC', 'Daniel Costa', 'md', 'success')}${AVATAR('SA', 'Sofia Almeida', 'md', 'warning')}</div>${BTN('primary', 'Go to dashboard', 'lg')}</div></div></main></div>` },
+        { title: 'Split with live preview', html: `<div class="cn-onb cn-onb--split"><div class="cn-onb__side"><header class="cn-onb__head">${LOGO}<span class="cn-text-label-md">Lumen</span></header><main class="cn-onb__main"><div class="cn-onb__card cn-onb__card--flush"><div class="cn-stack" data-gap="8">${STEPS(1)}<div class="cn-stack" data-gap="2"><h1 class="cn-text-heading-lg">Choose your brand color</h1><p class="cn-text-body-lg cn-app__muted">It’s used for buttons, links and highlights across the product.</p></div><div class="cn-row" data-gap="3" data-wrap>${['brand.600', 'blue.600', 'green.600', 'amber.600', 'red.600', 'neutral.900'].map((c, i) => `<button type="button" class="cn-onb__swatch" style="background:var(--cn-${c.replace('.', '-')})" aria-label="${c}" aria-pressed="${i === 0}"></button>`).join('')}</div><footer class="cn-onb__foot">${BTN('ghost', 'Back', 'lg')}${BTN('primary', 'Continue', 'lg')}</footer></div></div></main></div><aside class="cn-onb__preview" aria-label="Preview"><div class="cn-card" data-variant="default" data-padding="md" style="width:360px"><div class="cn-card__body cn-stack" data-gap="4"><div class="cn-row" data-gap="3">${AVATAR('MC', 'Maya Chen', 'md', 'accent')}<div class="cn-stack" data-gap="0"><span class="cn-text-label-sm">Maya Chen</span><span class="cn-text-body-sm cn-app__muted">Product Manager</span></div></div><p class="cn-text-body-md cn-app__muted">Your primary button, links and selected states will use the color you pick.</p><div class="cn-row" data-gap="2">${BTN('outline', 'Secondary', 'md')}${BTN('primary', 'Primary', 'md')}</div></div></div></aside></div>` },
+    ],
+    css: `${APP_CSS}
+.cn-onb { min-height: 100vh; background-color: {color.bg-canvas}; display: flex; flex-direction: column; }
+.cn-onb__head { display: flex; align-items: center; gap: {space.3}; height: 64px; padding-inline: {space.8}; }
+.cn-onb__head > :last-child { margin-inline-start: auto; }
+.cn-onb__logo { width: 32px; height: 32px; border-radius: {radius.lg}; background-color: {color.bg-action}; }
+.cn-onb__main { flex: 1 1 auto; display: flex; align-items: flex-start; justify-content: center; padding: {space.10} {space.4} {space.16}; }
+.cn-onb__card { width: 100%; max-width: 560px; background-color: {color.bg-surface}; border: {border.width.thin} solid {color.border-default}; border-radius: {radius.2xl}; padding: {space.8}; box-shadow: {shadow.xs}; }
+.cn-onb__card--flush { border: 0; box-shadow: none; background: transparent; padding: 0; }
+.cn-onb__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: {space.3}; padding-top: {space.4}; border-top: {border.width.thin} solid {color.border-default}; margin-top: {space.2}; }
+.cn-onb__invite { display: flex; gap: {space.3}; }
+.cn-onb__invite > .cn-select { width: 140px; flex-shrink: 0; }
+.cn-onb__swatch { width: 40px; height: 40px; border-radius: {radius.full}; border: 0; cursor: pointer; box-shadow: 0 0 0 2px {color.bg-surface}; }
+.cn-onb__swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px {color.bg-surface}, 0 0 0 4px {color.border-action}; }
+.cn-onb--split { flex-direction: row; }
+.cn-onb__side { flex: 1 1 50%; display: flex; flex-direction: column; }
+.cn-onb__preview { flex: 1 1 50%; background-color: {color.bg-subtle}; display: flex; align-items: center; justify-content: center; padding: {space.16}; border-inline-start: {border.width.thin} solid {color.border-default}; }
+@media (max-width: {breakpoint.md}) { .cn-onb--split { flex-direction: column; } .cn-onb__preview { display: none; } .cn-onb__card { padding: {space.5}; } .cn-onb__head { padding-inline: {space.4}; } .cn-onb__invite { flex-direction: column; } .cn-onb__invite > .cn-input { flex: none; } .cn-onb__invite > .cn-select { width: 100%; } }`,
+    viewport: 'both',
+};

package/lib/patterns/permissions-page.mjs

@@ -0,0 +1,38 @@
+import { SIDEBAR, PAGE_HEADER, BTN, AVATAR, BADGE, ICON, APP_CSS, TABS, CARD_HEAD, CHECKBOX } from "./_app.mjs";
+const ROLES = ['Owner', 'Admin', 'Member', 'Viewer'];
+const PERMS = [['Workspace', 'Manage billing', [true, true, false, false]], ['Workspace', 'Invite and remove members', [true, true, false, false]], ['Workspace', 'Change roles', [true, false, false, false]], ['Projects', 'Create projects', [true, true, true, false]], ['Projects', 'Delete projects', [true, true, false, false]], ['Projects', 'Edit any task', [true, true, true, false]], ['Data', 'Export data', [true, true, false, false]], ['Data', 'View audit log', [true, true, false, false]], ['Integrations', 'Manage API keys', [true, true, false, false]], ['Integrations', 'Connect apps', [true, true, true, false]]];
+let last = '';
+const MATRIX = `<table class="cn-table cn-perm__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">Permission</th>${ROLES.map((r) => `<th class="cn-table__header-cell" scope="col" data-align="center"><div class="cn-stack cn-center" data-gap="1" data-align="center"><span>${r}</span><span class="cn-text-body-xs cn-app__muted">${[1, 3, 14, 6][ROLES.indexOf(r)]} people</span></div></th>`).join('')}</tr></thead><tbody class="cn-table__body">${PERMS.map(([group, p, vals]) => { const head = group !== last ? `<tr class="cn-table__row cn-perm__group"><td class="cn-table__cell" colspan="5">${group}</td></tr>` : ''; last = group; return head + `<tr class="cn-table__row"><td class="cn-table__cell"><span class="cn-text-body-sm">${p}</span></td>${vals.map((v, i) => `<td class="cn-table__cell" data-align="center">${i === 0 ? `<span class="cn-perm__lock" aria-label="Always on">${ICON.check}</span>` : CHECKBOX(`${p} for ${ROLES[i]}`, v)}</td>`).join('')}</tr>`; }).join('')}</tbody></table>`;
+export const permissionsPage = {
+    name: 'Roles and permissions',
+    slug: 'permissions-page',
+    category: 'app-page',
+    description: 'A roles × permissions matrix with grouped rows, a role detail with its members, and an API keys page.',
+    rules: [
+        'Matrix: permissions as rows grouped by area (group rows in bg-subtle, label-xs), roles as columns with the member count under the name; cells are checkboxes, the Owner column is locked (check icon, no control).',
+        'Changes are saved explicitly: a sticky footer with "Discard" and "Save changes" appears when anything changed.',
+        'Role detail: description, members list (avatar, name, email, remove) and an "Add members" primary; deleting a role requires moving its members first.',
+        'API keys: table with name, key prefix in code style, created, last used, and a Revoke ghost-danger action; new keys are shown once in a dialog with a copy button.',
+    ],
+    html: `<div class="cn-app">${SIDEBAR('Settings')}<main class="cn-app__main">${PAGE_HEADER('Roles and permissions', 'Control what each role can do across the workspace.', BTN('outline', 'New role', 'md', ICON.plus))}${TABS(['Permissions', 'Roles', 'API keys'], 0)}<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('Permission matrix', 'Owners always have every permission.', BTN('link-color', 'Learn about roles', 'sm'))}</div><div class="cn-card__body cn-app__card-body cn-app__card-body--flush" role="region" tabindex="0" aria-label="Scrollable table">${MATRIX}</div><footer class="cn-card__footer"><div class="cn-row" data-justify="between"><span class="cn-text-body-sm cn-app__muted">2 unsaved changes</span><div class="cn-row" data-gap="2">${BTN('outline', 'Discard', 'sm')}${BTN('primary', 'Save changes', 'sm')}</div></div></footer></section></main></div>`,
+    variants: [
+        { title: 'Role detail with members', html: `<div class="cn-app">${SIDEBAR('Settings')}<main class="cn-app__main">${PAGE_HEADER('Admin', 'Can manage members, billing and projects. Cannot change roles.', `${BTN('danger-outline', 'Delete role', 'md')}${BTN('primary', 'Add members', 'md', ICON.plus)}`, 'simple', `<div class="cn-page-header__crumbs"><nav class="cn-breadcrumb" data-size="sm" aria-label="Breadcrumb"><ol class="cn-breadcrumb__list"><li class="cn-breadcrumb__item"><a class="cn-breadcrumb__link" href="#">Roles</a></li><li class="cn-breadcrumb__separator" aria-hidden="true">${ICON.chevronRight}</li><li class="cn-breadcrumb__item"><span class="cn-breadcrumb__current" aria-current="page">Admin</span></li></ol></nav></div>`)}<div class="cn-grid" data-cols="3" data-gap="6"><section class="cn-card cn-app__span2 cn-app__table-card" data-variant="default" data-padding="none"><div class="cn-section-header" data-variant="card" data-divider="yes">${CARD_HEAD('Members', '', '', BADGE('3 people', 'accent'))}</div><div class="cn-card__body cn-app__card-body cn-app__card-body--flush" role="region" tabindex="0" aria-label="Role members"><ul class="cn-list cn-perm__members" data-density="default" data-variant="plain">${[['MC', 'Maya Chen', 'maya@lumen.co', 'accent'], ['AK', 'Aisha Khan', 'aisha@lumen.co', 'accent'], ['ER', 'Elena Rossi', 'elena@lumen.co', 'warning']].map(([i, n, e, tone]) => `<li class="cn-list__item"><span class="cn-list__leading">${AVATAR(i, n, 'md', tone)}</span><span class="cn-list__content"><span class="cn-list__title">${n}</span><span class="cn-list__description">${e}</span></span><span class="cn-list__trailing">${BTN('ghost', 'Change role', 'sm')}${BTN('danger-ghost', 'Remove', 'sm')}</span></li>`).join('')}</ul></div></section><section class="cn-card" data-variant="default" data-padding="none"><div class="cn-section-header" data-variant="card" data-divider="yes">${CARD_HEAD('Permissions', '')}</div><div class="cn-card__body cn-app__card-body"><ul class="cn-stack" data-gap="3">${PERMS.map(([g, p, v]) => `<li class="cn-row" data-gap="2" data-align="start"><span class="cn-perm__mini" data-on="${v[1]}" aria-hidden="true">${v[1] ? ICON.check : ICON.x}</span><span class="cn-text-body-sm${v[1] ? '' : ' cn-app__muted'}">${p}</span></li>`).join('')}</ul></div></section></div></main></div>` },
+        { title: 'API keys', html: `<div class="cn-app">${SIDEBAR('Settings')}<main class="cn-app__main">${PAGE_HEADER('API keys', 'Keys give full access to your workspace’s API. Keep them secret.', BTN('primary', 'Create key', 'md', ICON.plus))}${TABS(['Permissions', 'Roles', 'API keys'], 2)}<div class="cn-alert" data-tone="info" data-variant="soft" data-layout="inline" role="status"><span class="cn-alert__icon" aria-hidden="true">${ICON.info}</span><div class="cn-alert__content"><div class="cn-alert__title">Keys rotate automatically every 90 days</div><p class="cn-alert__description">You’ll get an email 7 days before a rotation. Change the schedule in Security settings.</p></div></div><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="default" data-variant="default"><thead class="cn-table__head"><tr class="cn-table__row"><th class="cn-table__header-cell" scope="col">Name</th><th class="cn-table__header-cell" scope="col">Key</th><th class="cn-table__header-cell" scope="col">Created by</th><th class="cn-table__header-cell" scope="col">Last used</th><th class="cn-table__header-cell" scope="col"><span class="cn-sr-only">Actions</span></th></tr></thead><tbody class="cn-table__body">${[['Production', 'lum_live_…8f2a', 'DC', 'Daniel Costa', 'success', '2 minutes ago', 'Active', 'success'], ['Staging', 'lum_test_…c91d', 'AK', 'Aisha Khan', 'accent', 'Yesterday', 'Active', 'success'], ['Zapier import', 'lum_live_…41bb', 'MC', 'Maya Chen', 'accent', '34 days ago', 'Unused', 'warning'], ['Legacy CRM sync', 'lum_live_…0e77', 'LF', 'Lucas Ferreira', 'info', 'Never', 'Revoked', 'neutral']].map(([n, k, i, who, tone, used, st, stone]) => `<tr class="cn-table__row"><td class="cn-table__cell"><div class="cn-stack" data-gap="0"><span class="cn-text-label-sm">${n}</span>${BADGE(st, stone, 'soft', true)}</div></td><td class="cn-table__cell"><code class="cn-code cn-perm__key" data-variant="inline" data-size="sm">${k}</code></td><td class="cn-table__cell"><div class="cn-row" data-gap="2">${AVATAR(i, who, 'xs', tone)}<span>${who}</span></div></td><td class="cn-table__cell">${used}</td><td class="cn-table__cell cn-table__actions"><div class="cn-row" data-gap="1" data-justify="end">${BTN('ghost', 'Copy', 'sm')}${st === 'Revoked' ? BTN('ghost', 'Delete', 'sm') : BTN('danger-ghost', 'Revoke', 'sm')}</div></td></tr>`).join('')}</tbody></table></div></section></main></div>` },
+    ],
+    css: `${APP_CSS}
+.cn-app__span2 { grid-column: span 2; min-width: 0; }
+.cn-perm__group .cn-table__cell { background-color: {color.bg-subtle}; font-size: {font.size.xs}; font-weight: {font.weight.semibold}; color: {color.fg-muted}; padding-block: {space.2}; }
+.cn-perm__table .cn-table__cell[data-align="center"], .cn-perm__table .cn-table__header-cell[data-align="center"] { text-align: center; }
+.cn-perm__table .cn-checkbox { justify-content: center; }
+.cn-perm__lock { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: {radius.sm}; background-color: {color.bg-muted}; color: {color.fg-muted}; }
+.cn-perm__lock .cn-icon, .cn-perm__mini .cn-icon { width: 14px; height: 14px; }
+.cn-perm__mini { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: {radius.full}; background-color: {color.bg-subtle}; color: {color.fg-subtle}; flex-shrink: 0; }
+.cn-perm__mini[data-on="true"] { background-color: {color.bg-success-subtle}; color: {color.fg-success}; }
+.cn-code.cn-perm__key { white-space: nowrap; overflow-wrap: normal; }
+@media (max-width: {breakpoint.md}) {
+  .cn-app__span2 { grid-column: auto; }
+  .cn-list.cn-perm__members .cn-list__item { flex-wrap: wrap; }
+  .cn-list.cn-perm__members .cn-list__trailing { flex-basis: 100%; justify-content: flex-start; }
+}`,
+    viewport: 'desktop',
+};

package/lib/patterns/profile-page.mjs

@@ -0,0 +1,32 @@
+import { SIDEBAR, BTN, TABS, AVATAR, BADGE, ICON, APP_CSS, CARD, CARD_HEAD, STAT } from "./_app.mjs";
+const COVER = `<div class="cn-profile__cover"></div>`;
+const HEAD = `<header class="cn-profile__head"><div class="cn-profile__identity">${AVATAR('MC', 'Maya Chen', '2xl', 'accent', 'online')}<div class="cn-stack" data-gap="1"><h1 class="cn-text-heading-lg cn-row" data-gap="2">Maya Chen ${BADGE('Admin', 'accent')}</h1><p class="cn-text-body-lg cn-app__muted">Product Manager · Florianópolis, Brazil · Joined March 2024</p></div></div><div class="cn-row" data-gap="3">${BTN('outline', 'Message', 'md', ICON.inbox)}${BTN('primary', 'Edit profile', 'md')}</div></header>`;
+export const profilePage = {
+    name: 'Profile page',
+    slug: 'profile-page',
+    category: 'app-page',
+    description: 'A person or entity page: cover band, avatar + identity + actions, tabs, then a two-column body (about card + activity) or a stats row. Also the public/compact variants.',
+    rules: [
+        'Cover band 160px in bg-action-subtle (or an image), avatar 96px (2xl) overlapping it by half, identity block right of the avatar, actions right-aligned; one primary (Edit profile / Follow).',
+        'Tabs under the header: Overview, Activity, Projects, Settings.',
+        'Body: 2:1 grid — main column (about card with description-list, projects table/list) and side column (stats, teams, contact).',
+        'Never repeat the name in the page header; the identity block is the h1.',
+    ],
+    html: `<div class="cn-app">${SIDEBAR('Users')}<main class="cn-app__main cn-profile">${COVER}${HEAD}${TABS(['Overview', 'Activity', 'Projects', 'Settings'], 0)}<div class="cn-grid" data-cols="3" data-gap="6"><div class="cn-app__span2 cn-stack" data-gap="6">${CARD(CARD_HEAD('About'), `<dl class="cn-profile__dl"><div><dt>Email</dt><dd>maya@lumen.co</dd></div><div><dt>Role</dt><dd>Product Manager</dd></div><div><dt>Teams</dt><dd><div class="cn-row" data-gap="1">${BADGE('Product', 'info')}${BADGE('Design', 'accent')}${BADGE('Leadership')}</div></dd></div><div><dt>Time zone</dt><dd>GMT−3 · 14:22 local</dd></div><div><dt>Bio</dt><dd>I’m a product manager based in Florianópolis. I like building things that make people’s work easier.</dd></div></dl>`)}${CARD(CARD_HEAD('Recent projects', '', BTN('link-color', 'View all', 'sm')), `<ul class="cn-list" data-density="default" data-variant="plain">${[['Website redesign', 'Marketing · On track', 'success', 'On track'], ['Billing platform', 'Engineering · On track', 'success', 'On track'], ['Mobile app 2.0', 'Product · At risk', 'warning', 'At risk']].map(([t, d, tone, st]) => `<li class="cn-list__item"><span class="cn-list__content"><span class="cn-list__title">${t}</span><span class="cn-list__description">${d}</span></span><span class="cn-list__trailing">${BADGE(st, tone, 'soft', true)}</span></li>`).join('')}</ul>`)}</div><div class="cn-stack" data-gap="6"><div class="cn-grid" data-cols="1" data-gap="4">${STAT('Tasks completed', '128', '+12 this week', 'up', 'Last 30 days')}${STAT('Reviews', '24', '−3', 'down', 'Last 30 days')}</div>${CARD(CARD_HEAD('Works with'), `<div class="cn-stack" data-gap="3">${[['DC', 'Daniel Costa', 'Engineering', 'success'], ['SA', 'Sofia Almeida', 'Design', 'warning'], ['LF', 'Lucas Ferreira', 'Frontend', 'info']].map(([i, n, r, tone]) => `<div class="cn-row" data-gap="3">${AVATAR(i, n, 'sm', tone)}<div class="cn-stack" data-gap="0"><span class="cn-text-label-sm">${n}</span><span class="cn-text-body-sm cn-app__muted">${r}</span></div></div>`).join('')}</div>`)}</div></div></main></div>`,
+    variants: [
+        { title: 'Compact header with stats row', html: `<div class="cn-app">${SIDEBAR('Users', 'slim')}<main class="cn-app__main cn-profile">${HEAD.replace('2xl', 'xl').replace('cn-text-heading-lg', 'cn-text-heading-md')}<div class="cn-grid" data-cols="4" data-gap="6" data-keep>${STAT('Tasks completed', '128', '+12', 'up', 'This month')}${STAT('Open tasks', '9', '−2', 'down', 'This week')}${STAT('Reviews', '24', '+4', 'up', 'This month')}${STAT('Avg. response', '2h 10m', '−18%', 'down', 'Faster than last month')}</div>${TABS(['Overview', 'Activity', 'Projects'], 1, 'pill')}${CARD(CARD_HEAD('Activity', 'Last 7 days'), `<ul class="cn-list" data-density="compact" data-variant="plain">${[['Commented on Q3 roadmap review', '2 hours ago'], ['Closed 3 tasks in Billing platform', 'Yesterday'], ['Uploaded Brand assets v3', 'Yesterday'], ['Invited Elena Rossi to the workspace', 'Monday']].map(([t, d]) => `<li class="cn-list__item"><span class="cn-list__content"><span class="cn-list__title">${t}</span><span class="cn-list__description">${d}</span></span></li>`).join('')}</ul>`)}</main></div>` },
+    ],
+    css: `${APP_CSS}
+.cn-profile { gap: {space.6}; }
+.cn-profile__cover { height: 160px; border-radius: {radius.card}; background-color: {color.bg-action-subtle}; margin-bottom: -48px; }
+.cn-profile__head { display: flex; justify-content: space-between; align-items: flex-end; gap: {space.4}; flex-wrap: wrap; padding-inline: {space.6}; }
+.cn-profile__identity { display: flex; align-items: flex-end; gap: {space.5}; }
+.cn-profile__identity .cn-avatar { box-shadow: 0 0 0 4px {color.bg-canvas}; }
+.cn-profile__dl { display: grid; grid-template-columns: 160px 1fr; gap: {space.4} {space.6}; margin: 0; }
+.cn-profile__dl > div { display: contents; }
+.cn-profile__dl dt { font-size: {font.size.sm}; font-weight: {font.weight.medium}; color: {color.fg-muted}; }
+.cn-profile__dl dd { font-size: {font.size.sm}; color: {color.fg-default}; margin: 0; }
+.cn-app__span2 { grid-column: span 2; min-width: 0; }
+@media (max-width: {breakpoint.md}) { .cn-app__span2 { grid-column: auto; } .cn-profile__dl { grid-template-columns: 1fr; } .cn-profile__head { padding-inline: 0; } }`,
+    viewport: 'desktop',
+};

package/lib/patterns/settings-page.mjs

@@ -0,0 +1,24 @@
+import { SIDEBAR, PAGE_HEADER, BTN, TABS, INPUT, TEAM_TABLE, PAGINATION, BADGE, CARD_HEAD, ICON, APP_CSS, CHECKBOX } from "./_app.mjs";
+const row = (label, hint, control) => `<div class="cn-app__form-row"><div class="cn-app__form-label"><span>${label}</span><span>${hint}</span></div><div class="cn-stack" data-gap="4">${control}</div></div>`;
+const HEADER = (tab) => `${PAGE_HEADER('Settings', 'Manage your account settings and preferences.', `${BTN('outline', 'Cancel', 'md')}${BTN('primary', 'Save changes', 'md')}`)}${TABS(['My details', 'Profile', 'Password', 'Team', 'Plan', 'Billing', 'Notifications', 'Integrations'], tab)}`;
+export const settingsPage = {
+    name: 'Settings page',
+    slug: 'settings-page',
+    category: 'app-page',
+    description: 'Account and workspace settings: page header + tabs, then sections laid out as label-column / control-column rows separated by hairlines, with the actions at the end. Variants: profile form, team, plan & billing, notifications.',
+    rules: [
+        'Tabs under the page header select the settings area; the content is a single 1024px-max column.',
+        'Each setting is a row: left column 280px with a semibold label and a one-line hint; right column the control(s), max 512px. Rows separated by 20px padding and a hairline.',
+        'Section header (heading-sm + description + actions) at the top of each area; the save actions repeat at the bottom of long forms.',
+        'Destructive actions (delete account) sit in their own last section with a danger-outline button.',
+        'Team: section header with count badge, a table with checkbox, avatar, status, role, email and actions, then pagination.',
+    ],
+    html: `<div class="cn-app">${SIDEBAR('Settings')}<main class="cn-app__main">${HEADER(1)}<div class="cn-stack" data-gap="0" style="max-width:1024px"><div class="cn-section-header" data-variant="default" data-divider="yes">${CARD_HEAD('Personal info', 'Update your photo and personal details here.', `${BTN('outline', 'Cancel', 'sm')}${BTN('primary', 'Save', 'sm')}`)}</div>${row('Name', 'Shown on your profile and in mentions.', `<div class="cn-grid" data-cols="2" data-gap="4" data-keep>${INPUT('s-first', 'Maya')}${INPUT('s-last', 'Chen')}</div>`)}${row('Email address', 'Used for sign-in and notifications.', INPUT('s-email', 'maya@lumen.co', 'email', '', ICON.inbox))}${row('Your photo', 'This will be displayed on your profile.', `<div class="cn-row" data-gap="5" data-align="start"><span class="cn-avatar" data-size="2xl" data-shape="circle" data-tone="accent" data-status="none" role="img" aria-label="Maya Chen"><span class="cn-avatar__fallback" aria-hidden="true">MC</span></span><div class="cn-file-dropzone cn-flex-1" data-size="sm"><input class="cn-file-dropzone__input" type="file" aria-label="Upload photo"><span class="cn-file-dropzone__icon" aria-hidden="true">${ICON.copy}</span><span class="cn-file-dropzone__title"><strong>Click to upload</strong> or drag and drop</span><span class="cn-file-dropzone__hint">SVG, PNG, JPG or GIF (max. 800×400px)</span></div></div>`)}${row('Role', 'Your title inside the workspace.', INPUT('s-role', 'Product Manager'))}${row('Country', 'Where you are based, for tax and time zone.', `<div class="cn-select" data-variant="default" data-size="md"><select class="cn-select__field" id="s-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>`)}${row('Bio', 'Write a short introduction.', `<div class="cn-textarea" data-size="md" data-resize="vertical"><textarea class="cn-textarea__field" rows="4" aria-label="Bio">I’m a product manager based in Florianópolis. I like building things that make people’s work easier.</textarea></div><span class="cn-text-body-sm cn-app__muted">275 characters left</span>`)}<div class="cn-app__form-actions">${BTN('outline', 'Cancel', 'md')}${BTN('primary', 'Save changes', 'md')}</div></div></main></div>`,
+    variants: [
+        { title: 'Team', html: `<div class="cn-app">${SIDEBAR('Settings')}<main class="cn-app__main">${HEADER(3)}<div class="cn-stack" data-gap="6"><div class="cn-section-header" data-variant="with-badge" data-divider="yes">${CARD_HEAD('Team members', 'Manage your team members and their account permissions here.', `${BTN('outline', 'Download CSV', 'md')}${BTN('primary', 'Add team member', 'md', ICON.plus)}`, BADGE('100 users', 'accent'))}</div><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">${TEAM_TABLE()}</div><footer class="cn-card__footer">${PAGINATION}</footer></section></div></main></div>` },
+        { title: 'Plan and billing', html: `<div class="cn-app">${SIDEBAR('Settings')}<main class="cn-app__main">${HEADER(4)}<div class="cn-stack" data-gap="8" style="max-width:1024px"><div class="cn-section-header" data-variant="default" data-divider="yes">${CARD_HEAD('Account plans', 'Pick an account plan that fits your workflow.', BTN('outline', 'Compare plans', 'sm'))}</div><div class="cn-grid" data-cols="3" data-gap="6">${[['Basic plan', '$10', 'Includes up to 10 users, 20GB individual data and access to all features.', false], ['Business plan', '$20', 'Includes up to 20 users, 40GB individual data and priority support.', true], ['Enterprise plan', '$40', 'Unlimited users, unlimited data and personalised service.', false]].map(([n, p, d, cur]) => `<section class="cn-card" data-variant="default" data-padding="md"${cur ? ' data-selected' : ''}><div class="cn-card__body cn-app__plan"><div class="cn-row" data-justify="between" data-align="start"><div class="cn-stack" data-gap="1"><span class="cn-text-heading-xs">${n}</span><span class="cn-text-body-sm cn-app__muted">${d}</span></div>${cur ? BADGE('Current', 'accent') : ''}</div><span class="cn-text-heading-lg">${p}<span class="cn-text-body-sm cn-app__muted"> per month</span></span>${cur ? BTN('outline', 'Manage plan', 'md') : BTN('primary', 'Upgrade', 'md')}</div></section>`).join('')}</div><div class="cn-section-header" data-variant="default" data-divider="yes">${CARD_HEAD('Billing and invoicing', 'Pick an account plan that fits your workflow.', `${BTN('outline', 'Download all', 'sm')}`)}</div><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="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">Billing 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"><span class="cn-sr-only">Actions</span></th></tr></thead><tbody class="cn-table__body">${['Dec 2026', 'Nov 2026', 'Oct 2026', 'Sep 2026'].map((m, i) => `<tr class="cn-table__row"><td class="cn-table__cell"><span class="cn-text-label-sm">Invoice #${1084 - i} – ${m}</span></td><td class="cn-table__cell">${m}</td><td class="cn-table__cell">${BADGE('Paid', 'success', 'soft', true)}</td><td class="cn-table__cell" data-align="right">USD $20.00</td><td class="cn-table__cell cn-table__actions">${BTN('link-color', 'Download', 'sm')}</td></tr>`).join('')}</tbody></table></div></section></div></main></div>` },
+        { title: 'Notifications', html: `<div class="cn-app">${SIDEBAR('Settings')}<main class="cn-app__main">${HEADER(6)}<div class="cn-stack" data-gap="0" style="max-width:1024px"><div class="cn-section-header" data-variant="default" data-divider="yes">${CARD_HEAD('Notification settings', 'We may still send you important notifications about your account outside of your notification settings.')}</div>${[['Comments', 'These are notifications for comments on your posts and replies to your comments.'], ['Tags', 'These are notifications for when someone tags you in a comment, post or story.'], ['Reminders', 'These are notifications to remind you of updates you might have missed.'], ['More activity about you', 'These are notifications for posts on your profile, likes and other reactions.']].map(([l, h]) => row(l, h, `<label class="cn-switch" data-size="sm"><input class="cn-switch__input" type="checkbox" role="switch" checked><span class="cn-switch__track" aria-hidden="true"><span class="cn-switch__thumb"></span></span><span class="cn-switch__label">Push</span></label><label class="cn-switch" data-size="sm"><input class="cn-switch__input" type="checkbox" role="switch" checked><span class="cn-switch__track" aria-hidden="true"><span class="cn-switch__thumb"></span></span><span class="cn-switch__label">Email</span></label><label class="cn-switch" data-size="sm"><input class="cn-switch__input" type="checkbox" role="switch"><span class="cn-switch__track" aria-hidden="true"><span class="cn-switch__thumb"></span></span><span class="cn-switch__label">SMS</span></label>`)).join('')}<div class="cn-app__form-row"><div class="cn-app__form-label"><span>Danger zone</span><span>Permanently delete your account and all data.</span></div><div class="cn-stack" data-gap="3" data-align="start">${CHECKBOX('I understand this cannot be undone')}${BTN('danger-outline', 'Delete account', 'md')}</div></div></div></main></div>` },
+    ],
+    css: APP_CSS,
+    viewport: 'desktop',
+};

package/lib/project.mjs

@@ -0,0 +1,28 @@
+import { existsSync, readFileSync, realpathSync } from 'node:fs';
+import { dirname, isAbsolute, join, relative, resolve, sep } from 'node:path';
+import { sourcePath } from "./design-files.mjs";
+const CONFIG = '.canon/project.json';
+/** Discover a project from any working directory below it. */
+export function findProject(from) {
+    let root = resolve(from);
+    while (true) {
+        const path = join(root, CONFIG);
+        if (existsSync(path)) {
+            const canonical = realpathSync(root);
+            sourcePath(canonical, join(canonical, CONFIG), 'file');
+            const config = JSON.parse(readFileSync(path, 'utf8'));
+            if (config?.version !== 1 || typeof config.design !== 'string' || !config.design || isAbsolute(config.design) || config.design.includes('\\') || config.design.includes('\0')) {
+                throw new Error(`Invalid Canon project configuration: ${path}`);
+            }
+            return { root: canonical, design: resolve(canonical, config.design) };
+        }
+        const parent = dirname(root);
+        if (parent === root)
+            return undefined;
+        root = parent;
+    }
+}
+export function projectWrite(root, design) {
+    const config = { version: 1, design: relative(root, design).split(sep).join('/') || '.' };
+    return { root, path: join(root, CONFIG), content: Buffer.from(JSON.stringify(config, null, 2) + '\n') };
+}

package/lib/serve.mjs

@@ -0,0 +1,279 @@
+import { createServer } from 'node:http';
+import { readFileSync, statSync, realpathSync, mkdtempSync, rmSync } from 'node:fs';
+import { basename, join, resolve, relative, extname } from 'node:path';
+import { tmpdir } from 'node:os';
+import { validateSystem } from "./system.mjs";
+import { HttpError, requireValue, record, identifier, validateMeta, contained, sourcePath, loadSource, installFiles } from "./design-files.mjs";
+import { buildSystem } from "./build.mjs";
+import { compareSpecs } from "./components/index.mjs";
+import { comparePatterns } from "./patterns/index.mjs";
+import { getCanonPackage } from "./distribution.mjs";
+import { referenceWrites } from "./install.mjs";
+import { findProject } from "./project.mjs";
+const TYPES = { '.html': 'text/html; charset=utf-8', '.css': 'text/css; charset=utf-8', '.js': 'text/javascript', '.json': 'application/json', '.md': 'text/markdown; charset=utf-8', '.tsx': 'text/plain; charset=utf-8', '.svg': 'image/svg+xml' };
+const MAX_BODY_BYTES = 8 * 1024 * 1024;
+function checkRequest(req) {
+    const port = req.socket.localPort;
+    const hosts = ['localhost', '127.0.0.1', '[::1]'].map((hostname) => `${hostname}:${port}`);
+    if (port === 80)
+        hosts.push('localhost', '127.0.0.1', '[::1]');
+    const host = req.headers.host?.toLowerCase();
+    const hostCount = req.rawHeaders.filter((_, index) => index % 2 === 0 && req.rawHeaders[index].toLowerCase() === 'host').length;
+    if (!host || hostCount !== 1 || !hosts.includes(host))
+        throw new HttpError(403, 'Host must address this local Studio server');
+    if (req.headers.origin !== undefined && req.headers.origin !== `http://${host}`)
+        throw new HttpError(403, 'Origin must match this Studio server');
+}
+function readBody(req) {
+    if (!/^application\/json(?:\s*;|\s*$)/i.test(req.headers['content-type'] ?? ''))
+        throw new HttpError(415, 'Save requires application/json');
+    if (Number(req.headers['content-length'] ?? 0) > MAX_BODY_BYTES)
+        throw new HttpError(413, 'Save body exceeds 8 MiB');
+    return new Promise((resolveBody, reject) => {
+        let chunks = [];
+        let size = 0;
+        let done = false;
+        const fail = (error) => { if (!done) {
+            done = true;
+            chunks = [];
+            reject(error);
+        } };
+        req.on('error', fail);
+        req.on('aborted', () => fail(new HttpError(400, 'Save request was interrupted')));
+        req.on('data', (chunk) => {
+            if (done)
+                return;
+            size += chunk.length;
+            if (size > MAX_BODY_BYTES) {
+                fail(new HttpError(413, 'Save body exceeds 8 MiB'));
+                return;
+            }
+            chunks.push(chunk);
+        });
+        req.on('end', () => {
+            if (done)
+                return;
+            done = true;
+            try {
+                resolveBody(JSON.parse(Buffer.concat(chunks).toString('utf8')));
+            }
+            catch {
+                reject(new HttpError(400, 'Save body is not valid JSON'));
+            }
+        });
+    });
+}
+function validateBody(value) {
+    const body = record(value, 'Save body');
+    for (const key of Object.keys(body))
+        requireValue(['meta', 'tokens', 'components', 'patterns'].includes(key), `Unknown save field: ${key}`);
+    for (const field of ['meta', 'tokens'])
+        if (field in body)
+            record(body[field], field);
+    for (const collection of ['components', 'patterns']) {
+        if (!(collection in body))
+            continue;
+        for (const [slug, value] of Object.entries(record(body[collection], collection))) {
+            identifier(slug, `${collection} key`);
+            const spec = record(value, `${collection}.${slug}`);
+            requireValue(spec.slug === slug, `${collection}.${slug}.slug must match its key`);
+        }
+    }
+    return body;
+}
+async function saveSource(body, designRoot, outputRoot, projectRoot) {
+    const trial = loadSource(designRoot);
+    if (body.meta !== undefined)
+        trial.meta = body.meta;
+    if (body.tokens !== undefined)
+        trial.tokens = body.tokens;
+    for (const [slug, spec] of Object.entries(body.components ?? {})) {
+        const index = trial.components.findIndex((component) => component.slug === slug);
+        if (index === -1)
+            trial.components.push(spec);
+        else
+            trial.components[index] = spec;
+    }
+    for (const [slug, pattern] of Object.entries(body.patterns ?? {})) {
+        const index = trial.patterns.findIndex((item) => item.slug === slug);
+        if (index === -1)
+            trial.patterns.push(pattern);
+        else
+            trial.patterns[index] = pattern;
+    }
+    validateMeta(trial.meta, designRoot, outputRoot);
+    for (const item of [...trial.components, ...trial.patterns])
+        identifier(item.slug, 'Design slug');
+    trial.components.sort(compareSpecs);
+    trial.patterns.sort(comparePatterns);
+    sourcePath(designRoot, outputRoot, 'directory');
+    try {
+        const validation = validateSystem(trial);
+        if (validation.errors.length)
+            throw new Error(validation.errors.slice(0, 5).join('; '));
+    }
+    catch (error) {
+        throw new HttpError(422, error.message);
+    }
+    const stage = mkdtempSync(join(tmpdir(), 'canon-studio-save-'));
+    try {
+        // Generation can fail after producing files; build away from the live source/output.
+        let result;
+        try {
+            result = await buildSystem(trial, stage);
+        }
+        catch (error) {
+            throw new HttpError(422, error.message);
+        }
+        const writes = result.files.map((file) => {
+            contained(result.outDir, file);
+            contained(realpathSync(result.outDir), realpathSync(file));
+            return { path: join(outputRoot, relative(result.outDir, file)), content: readFileSync(file) };
+        });
+        const sourceWrite = (rel, value) => writes.push({ path: join(designRoot, rel), content: Buffer.from(JSON.stringify(value, null, 2) + '\n') });
+        if (body.meta !== undefined)
+            sourceWrite('system.json', body.meta);
+        if (body.tokens !== undefined)
+            sourceWrite('tokens.json', body.tokens);
+        for (const [slug, spec] of Object.entries(body.components ?? {}))
+            sourceWrite(`components/${slug}.json`, spec);
+        for (const [slug, pattern] of Object.entries(body.patterns ?? {}))
+            sourceWrite(`patterns/${slug}.json`, pattern);
+        if (projectRoot)
+            writes.push(...referenceWrites(trial, designRoot, projectRoot, result.outDir));
+        // Publish the revision after source and references so MCP can load a complete save.
+        const manifest = writes.findIndex(write => write.path === join(outputRoot, 'canon.lock.json'));
+        if (manifest >= 0)
+            writes.push(...writes.splice(manifest, 1));
+        // Recheck after the asynchronous build before committing to the project.
+        loadSource(designRoot);
+        sourcePath(designRoot, outputRoot, 'directory');
+        installFiles(designRoot, writes);
+        return { ok: true, built: result.files.length, referencesUpdated: Boolean(projectRoot), warnings: result.warnings };
+    }
+    finally {
+        rmSync(stage, { recursive: true, force: true });
+    }
+}
+function json(res, status, body) {
+    res.writeHead(status, { 'content-type': 'application/json; charset=utf-8', 'cache-control': 'no-store' });
+    res.end(JSON.stringify(body));
+}
+export function serve(dir, port = 4600, designDir, opts = {}) {
+    return new Promise((resolveServe, reject) => {
+        const outputRoot = realpathSync(resolve(dir));
+        const designRoot = designDir ? realpathSync(resolve(designDir)) : undefined;
+        const projectRoot = opts.projectRoot ? realpathSync(resolve(opts.projectRoot)) : undefined;
+        const checkProject = () => {
+            if (!projectRoot)
+                return;
+            const project = findProject(projectRoot);
+            requireValue(project?.root === projectRoot && project.design === designRoot, 'This project no longer points to this Studio design; reopen its Studio');
+        };
+        checkProject();
+        if (designRoot) {
+            contained(designRoot, outputRoot);
+            requireValue(designRoot !== outputRoot, 'Studio output must be a separate directory within the design directory');
+        }
+        let saving = false;
+        const server = createServer(async (req, res) => {
+            res.setHeader('x-content-type-options', 'nosniff');
+            try {
+                checkRequest(req);
+                let url;
+                try {
+                    url = decodeURIComponent((req.url ?? '/').split('?')[0]);
+                }
+                catch {
+                    throw new HttpError(400, 'Malformed request URL');
+                }
+                requireValue(url.startsWith('/') && !url.startsWith('//') && !url.includes('\0') && !url.includes('\\'), 'Malformed request URL');
+                if (url === '/api/project') {
+                    if (req.method !== 'GET')
+                        throw new HttpError(405, 'Use GET for /api/project');
+                    checkProject();
+                    json(res, 200, { connected: Boolean(projectRoot), name: projectRoot ? basename(projectRoot) : undefined });
+                    return;
+                }
+                if (designRoot && url === '/api/system') {
+                    if (req.method !== 'GET')
+                        throw new HttpError(405, 'Use GET for /api/system');
+                    json(res, 200, loadSource(designRoot));
+                    return;
+                }
+                if (designRoot && url === '/api/save') {
+                    if (req.method !== 'POST')
+                        throw new HttpError(405, 'Use POST for /api/save');
+                    checkProject();
+                    const body = validateBody(await readBody(req));
+                    if (saving)
+                        throw new HttpError(409, 'A save is already in progress; retry when it finishes');
+                    saving = true;
+                    try {
+                        const result = await saveSource(body, designRoot, outputRoot, projectRoot);
+                        json(res, 200, result);
+                        console.log(`saved → rebuilt ${result.built} files`);
+                    }
+                    finally {
+                        saving = false;
+                    }
+                    return;
+                }
+                if (req.method !== 'GET' && req.method !== 'HEAD')
+                    throw new HttpError(405, 'Use GET or HEAD for static files');
+                if (url === '/setup') {
+                    res.writeHead(302, { location: '/docs.html#primeiro-projeto', 'cache-control': 'no-store', 'content-length': '0' });
+                    res.end();
+                    return;
+                }
+                if (url === '/canon-package.tgz') {
+                    const content = await getCanonPackage();
+                    res.writeHead(200, {
+                        'content-type': 'application/gzip', 'content-disposition': 'attachment; filename="canon-package.tgz"',
+                        'content-length': content.byteLength, 'cache-control': 'no-store',
+                    });
+                    res.end(req.method === 'HEAD' ? undefined : content);
+                    return;
+                }
+                let file = resolve(outputRoot, url === '/' ? 'preview.html' : `.${url}`);
+                contained(outputRoot, file);
+                file = realpathSync(file);
+                contained(outputRoot, file);
+                if (statSync(file).isDirectory()) {
+                    file = realpathSync(join(file, 'index.html'));
+                    contained(outputRoot, file);
+                }
+                if (!statSync(file).isFile())
+                    throw new HttpError(404, 'File not found');
+                const content = readFileSync(file);
+                res.writeHead(200, { 'content-type': TYPES[extname(file)] ?? 'application/octet-stream', 'cache-control': 'no-store' });
+                res.end(req.method === 'HEAD' ? undefined : content);
+            }
+            catch (error) {
+                const code = error.code;
+                const status = error instanceof HttpError ? error.status : code === 'ENOENT' || code === 'ENOTDIR' ? 404 : code === 'EACCES' || code === 'EPERM' ? 403 : 500;
+                if (!req.complete) {
+                    res.setHeader('connection', 'close');
+                    req.resume();
+                }
+                if (!res.destroyed)
+                    json(res, status, { ok: false, error: error instanceof Error ? error.message : 'Studio request failed' });
+            }
+        });
+        server.requestTimeout = 30_000;
+        server.headersTimeout = 10_000;
+        const stop = () => server.close();
+        const cleanup = () => process.off('SIGINT', stop);
+        server.once('error', (error) => { cleanup(); reject(error); });
+        server.once('close', () => { cleanup(); resolveServe(); });
+        process.once('SIGINT', stop);
+        server.listen(port, '127.0.0.1', () => {
+            const address = server.address();
+            console.log(`canon studio → http://127.0.0.1:${address.port}/  (serving ${dir}${designDir ? ', saving to ' + designDir : ''})`);
+            if (opts.open) {
+                import("./open.mjs").then(({ openBrowser }) => openBrowser(`http://127.0.0.1:${address.port}/`))
+                    .catch(error => console.error(`Studio is ready; could not open a browser: ${error.message}`));
+            }
+        });
+    });
+}