@milesroxas/design-hub 0.0.0-stage → 0.1.1

package/dist/vercel/proxy.js

@@ -0,0 +1,238 @@
+// Vercel Routing Middleware (the project's proxy.ts, named in vercel.json as
+// proxy.entrypoint): the gate in front of every path of the deployed
+// prototypes, the review API included.
+// Two ways in, both signed cookies (server/session.ts):
+//
+//   the shared password   view only; the form posts back to the same URL and
+//                         keeps the hash through the redirect
+//   an invite link        /invite/<token> signs one person in, to comment as
+//                         themselves; a revoke or reissue ends it on their
+//                         next page load
+//
+// With GATE_PASSWORD or GATE_SECRET missing the gate fails closed (503).
+import { next } from '@vercel/functions';
+import { base64, sha256 } from '../core/bytes.js';
+import { escapeHtml } from '../core/html.js';
+import { deployedReview } from '../server/api.js';
+import { clearedCookie, GATE_COOKIE, gateTokenIsValid, issueGateToken, issuePersonToken, PERSON_COOKIE, passwordMatches, readCookie, readGate, readPersonToken, sameOrigin, sessionCookie, } from '../server/session.js';
+const DEFAULT_SITE_NAME = 'Prototypes';
+const WRONG_PASSWORD_DELAY_MS = 800;
+const MAX_PASSWORD_LENGTH = 256;
+const INVITE_PATH = /^\/invite\/([\w-]{20,100})\/?$/;
+// What the gate page itself loads, served before sign-in: the hub's face
+// (the Vite plugin emits it at this fixed path) and the favicon. Nothing else.
+export const GATE_FONT = '/_gate/geist.woff2';
+const GATE_ASSETS = new Set([GATE_FONT, '/favicon.svg']);
+// The gate page. CSS and JS are constants so their CSP hashes can be computed
+// once and the page carries no 'unsafe-inline'. The gate is hub chrome, so it
+// wears the hub's neutral system look (shell/system.css) inlined, never the
+// project's brand. Geist (latin, variable) is the one font, preloaded so the
+// first paint is already in it.
+const CSS = `
+@font-face{font-family:Geist;src:url(${GATE_FONT}) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
+:root{color-scheme:light;--bg:oklch(.985 0 0);--surface:oklch(1 0 0);--ink:oklch(.205 0 0);--ink-2:oklch(.371 0 0);--ink-3:oklch(.46 0 0);--ink-4:oklch(.54 0 0);--line:oklch(.87 0 0);--fill-hover:oklch(.97 0 0);--brand:oklch(.205 0 0);--brand-hover:oklch(.3 0 0);--on-brand:oklch(.985 0 0);--error:oklch(.505 .213 27.518);--error-line:oklch(.637 .237 25.331);--ring:0 0 0 2px oklch(1 0 0),0 0 0 4px oklch(.556 0 0);--ring-error:0 0 0 2px oklch(1 0 0),0 0 0 4px oklch(.637 .237 25.331);--shadow:0 1px 2px 0 oklch(0 0 0/.05);--raised:0 0 0 1px oklch(0 0 0/.06),0 1px 2px oklch(0 0 0/.05),0 12px 24px -8px oklch(0 0 0/.1);--ease-out:cubic-bezier(.23,1,.32,1);--ease-press:cubic-bezier(.33,1,.68,1);--ease-hover:cubic-bezier(.25,.46,.45,.94)}
+@media(prefers-color-scheme:dark){:root{color-scheme:dark;--bg:oklch(.145 0 0);--surface:oklch(.175 0 0);--ink:oklch(.985 0 0);--ink-2:oklch(.87 0 0);--ink-3:oklch(.72 0 0);--ink-4:oklch(.66 0 0);--line:oklch(.32 0 0);--fill-hover:oklch(.215 0 0);--brand:oklch(.985 0 0);--brand-hover:oklch(.87 0 0);--on-brand:oklch(.205 0 0);--error:oklch(.704 .191 22.216);--error-line:oklch(.704 .191 22.216);--ring:0 0 0 2px oklch(.175 0 0),0 0 0 4px oklch(.708 0 0);--ring-error:0 0 0 2px oklch(.175 0 0),0 0 0 4px oklch(.704 .191 22.216);--shadow:0 0 #0000;--raised:0 0 0 1px oklch(1 0 0/.09)}}
+*{box-sizing:border-box}
+html{height:100%;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
+body{margin:0;min-height:100%;display:grid;place-items:center;padding:max(24px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));background:var(--bg);color:var(--ink);font:14px/20px Geist,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;font-optical-sizing:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
+[hidden]{display:none!important}
+.gate{width:100%;max-width:360px;padding:32px;background:var(--surface);border-radius:12px;box-shadow:var(--raised);transition:opacity 240ms var(--ease-out),transform 240ms var(--ease-out)}
+@starting-style{.gate{opacity:0;transform:translateY(6px)}}
+h1{margin:0 0 4px;font-size:20px;line-height:28px;font-weight:600;letter-spacing:-.02em;text-wrap:balance}
+.hint{margin:0 0 24px;color:var(--ink-3);text-wrap:pretty}
+.hint strong{font-weight:500;color:var(--ink)}
+label{display:block;margin-bottom:6px;font-weight:500;color:var(--ink-2)}
+.field{position:relative}
+input{display:block;width:100%;height:40px;padding:0 44px 0 12px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--ink);box-shadow:var(--shadow);font:inherit;transition:border-color 120ms var(--ease-hover),box-shadow 120ms var(--ease-hover)}
+input:focus-visible{outline:2px solid transparent;outline-offset:2px;box-shadow:var(--ring),var(--shadow)}
+input[aria-invalid=true]{border-color:var(--error-line)}
+input[aria-invalid=true]:focus-visible{box-shadow:var(--ring-error),var(--shadow)}
+.toggle{position:absolute;top:4px;right:4px;width:32px;height:32px;display:grid;place-items:center;margin:0;padding:0;border:0;border-radius:2px;background:transparent;color:var(--ink-4);cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;transition:color 120ms var(--ease-hover),background-color 120ms var(--ease-hover)}
+.toggle::before{content:"";position:absolute;inset:-4px}
+.toggle svg{display:block}
+.toggle:focus-visible{outline:2px solid transparent;box-shadow:var(--ring)}
+.toggle:active{color:var(--ink-2)}
+.toggle[aria-pressed=true] .show,.toggle[aria-pressed=false] .hide{display:none}
+@media(hover:hover) and (pointer:fine){.toggle:hover{color:var(--ink-2);background:var(--fill-hover)}}
+.note{margin:8px 0 0;color:var(--ink-3)}
+.error{color:var(--error)}
+.go{display:block;width:100%;height:44px;margin-top:20px;border:0;border-radius:6px;background:var(--brand);color:var(--on-brand);font:inherit;font-weight:500;cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;box-shadow:var(--shadow);transition:background-color 120ms var(--ease-hover),transform 160ms var(--ease-press),opacity 120ms var(--ease-hover)}
+.go:focus-visible{outline:2px solid transparent;outline-offset:2px;box-shadow:var(--ring)}
+.go:active{transform:scale(.97)}
+form[data-busy] .go{opacity:.7;pointer-events:none}
+@media(hover:hover) and (pointer:fine){.go:hover{background:var(--brand-hover)}}
+@media(pointer:coarse){input{height:44px;font-size:16px}.toggle{width:36px;height:36px}}
+@media(max-width:400px){.gate{padding:24px}}
+@media(prefers-reduced-motion:reduce){.gate{transition:opacity 240ms var(--ease-out)}@starting-style{.gate{transform:none}}.go:active{transform:none}}
+`;
+// Keeps the hash route the visitor asked for (a form posts to its action
+// without the fragment), shows the password on request, and says when Caps
+// Lock is on. The toggle swallows pointerdown so the caret stays in the field.
+const JS = `var f=document.forms[0],p=document.getElementById('password'),t=document.getElementById('toggle'),c=document.getElementById('caps');
+if(location.hash){f.action=location.pathname+location.search+location.hash}
+t.addEventListener('pointerdown',function(e){e.preventDefault()});
+t.addEventListener('click',function(){var s=p.type==='password';p.type=s?'text':'password';t.setAttribute('aria-pressed',s);t.setAttribute('aria-label',s?'Hide password':'Show password')});
+function caps(e){if(e.getModifierState){c.hidden=!e.getModifierState('CapsLock')}}
+p.addEventListener('keydown',caps);p.addEventListener('keyup',caps);p.addEventListener('blur',function(){c.hidden=true});
+f.addEventListener('submit',function(){f.setAttribute('data-busy','')});
+addEventListener('pageshow',function(){f.removeAttribute('data-busy')});`;
+const EYE = '<svg class="show" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2.42 12.713c-.136-.215-.204-.323-.242-.49a1.173 1.173 0 0 1 0-.446c.038-.167.106-.274.242-.49C3.546 9.505 6.895 5 12 5s8.455 4.505 9.58 6.287c.137.215.205.323.243.49.029.125.029.322 0 .446-.038.167-.106.274-.242.49C20.454 14.495 17.105 19 12 19S3.545 14.495 2.42 12.713Z"/><path d="M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z"/></svg>' +
+    '<svg class="hide" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.743 5.092C11.149 5.032 11.569 5 12 5c5.105 0 8.455 4.505 9.58 6.287.137.215.205.323.243.49.029.125.029.322 0 .446-.038.167-.107.275-.244.492-.3.474-.757 1.141-1.363 1.865M6.724 6.715c-2.162 1.467-3.63 3.504-4.303 4.57-.137.216-.205.324-.243.49a1.173 1.173 0 0 0 0 .446c.038.167.106.274.242.49C3.546 14.495 6.895 19 12 19c2.059 0 3.832-.732 5.289-1.723M3 3l18 18M9.879 9.879a3 3 0 1 0 4.243 4.243"/></svg>';
+function shell(siteName, body, script) {
+    return `<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+<meta name="robots" content="noindex, nofollow">
+<meta name="color-scheme" content="light dark">
+<title>${escapeHtml(siteName)}</title>
+<link rel="icon" type="image/svg+xml" href="/favicon.svg">
+<link rel="preload" href="${GATE_FONT}" as="font" type="font/woff2" crossorigin>
+<style>${CSS}</style>
+</head>
+<body>
+<main class="gate">
+<h1>${escapeHtml(siteName)}</h1>
+${body}
+</main>
+${script ? `<script>${JS}</script>` : ''}
+</body>
+</html>
+`;
+}
+function passwordPage(siteName, failed) {
+    const error = failed
+        ? `<p id="err" class="note error" role="alert">That password didn’t match. Try again.</p>`
+        : '';
+    const invalid = failed ? ' aria-invalid="true" aria-describedby="err"' : '';
+    return shell(siteName, `<p class="hint">Use the password from the message that shared this link.</p>
+<form method="post" novalidate>
+<label for="password">Password</label>
+<div class="field">
+<input id="password" name="password" type="password" autocomplete="current-password" autocapitalize="off" autocorrect="off" spellcheck="false" required autofocus maxlength="${MAX_PASSWORD_LENGTH}"${invalid}>
+<button id="toggle" class="toggle" type="button" aria-pressed="false" aria-label="Show password" aria-controls="password">${EYE}</button>
+</div>
+<p id="caps" class="note" aria-live="polite" hidden>Caps Lock is on.</p>
+${error}
+<button class="go" type="submit">Open prototypes</button>
+</form>`, true);
+}
+// A GET shows who the link is for and a POST signs them in, so a mail
+// scanner that opens every link never uses the invite.
+function invitePage(siteName, person) {
+    if (!person)
+        return shell(siteName, `<p class="hint">This invite link has expired or was revoked. Ask whoever sent it for a new one.</p>`, false);
+    return shell(siteName, `<p class="hint">You’re invited to review as <strong>${escapeHtml(person.name)}</strong>, ${escapeHtml(person.team)}.</p>
+<form method="post"><button class="go" type="submit" autofocus>Continue</button></form>`, false);
+}
+// `design-hub dev` has no gate; the Vite plugin serves this at /_gate/ so the page can be reviewed.
+export async function gatePreview(failed, siteName = DEFAULT_SITE_NAME) {
+    return { html: passwordPage(siteName, failed), csp: (await csp()).withScript };
+}
+let cspPromise;
+function csp() {
+    cspPromise ??= Promise.all([sha256(CSS), sha256(JS)]).then(([css, js]) => {
+        const base = `default-src 'none'; style-src 'sha256-${base64(css)}'; font-src 'self'; img-src 'self'; form-action 'self'; base-uri 'none'; frame-ancestors 'none'`;
+        return {
+            withScript: `${base}; script-src 'sha256-${base64(js)}'`,
+            noScript: `${base}; script-src 'none'`,
+        };
+    });
+    return cspPromise;
+}
+const NO_STORE = 'no-store, max-age=0';
+function wantsHtml(request) {
+    const dest = request.headers.get('sec-fetch-dest');
+    if (dest)
+        return dest === 'document' || dest === 'iframe';
+    return (request.headers.get('accept') ?? '').includes('text/html');
+}
+async function htmlPage(request, status, html, script, cookie) {
+    const headers = new Headers({ 'cache-control': NO_STORE, 'x-robots-tag': 'noindex, nofollow' });
+    if (cookie)
+        headers.append('set-cookie', cookie);
+    if (!wantsHtml(request)) {
+        headers.set('content-type', 'text/plain; charset=utf-8');
+        return new Response(request.method === 'HEAD' ? null : 'Password required.', { status, headers });
+    }
+    const policy = await csp();
+    headers.set('content-type', 'text/html; charset=utf-8');
+    headers.set('content-security-policy', script ? policy.withScript : policy.noScript);
+    headers.set('referrer-policy', 'no-referrer');
+    return new Response(request.method === 'HEAD' ? null : html, { status, headers });
+}
+const plain = (status, text, extra = {}) => new Response(text, {
+    status,
+    headers: { 'cache-control': NO_STORE, 'content-type': 'text/plain; charset=utf-8', ...extra },
+});
+const redirect = (location, cookie) => new Response(null, { status: 303, headers: { location, 'cache-control': NO_STORE, 'set-cookie': cookie } });
+async function readPassword(request) {
+    if (!(request.headers.get('content-type') ?? '').startsWith('application/x-www-form-urlencoded'))
+        return null;
+    try {
+        const value = (await request.formData()).get('password');
+        return typeof value === 'string' && value.length <= MAX_PASSWORD_LENGTH ? value : null;
+    }
+    catch {
+        return null;
+    }
+}
+async function invite(siteName, request, token) {
+    const setup = deployedReview(process.env);
+    if ('error' in setup)
+        return plain(503, setup.error);
+    if (request.method === 'POST' && !sameOrigin(request))
+        return plain(403, 'Forbidden');
+    const person = await setup.review.acceptInvite(token);
+    if (request.method !== 'POST' || !person)
+        return htmlPage(request, person ? 200 : 404, invitePage(siteName, person), false);
+    const cookie = sessionCookie(PERSON_COOKIE, await issuePersonToken(setup.gate, { id: person.id, epoch: person.epoch }));
+    return redirect('/', cookie);
+}
+const pass = () => next({ headers: { 'cache-control': 'private, no-store' } });
+// The signature alone admits assets; a page load also asks the store, so a
+// revoke lands on the person's next navigation without a store read per asset.
+async function personSession(siteName, request, claim) {
+    if (!wantsHtml(request))
+        return pass();
+    const setup = deployedReview(process.env);
+    const current = 'error' in setup ? null : await setup.review.sessionPerson(claim.id, claim.epoch).catch(() => null);
+    if (current)
+        return pass();
+    return htmlPage(request, 401, passwordPage(siteName, false), true, clearedCookie(PERSON_COOKIE));
+}
+async function passwordPost(siteName, request, gate, url) {
+    if (!sameOrigin(request))
+        return plain(403, 'Forbidden');
+    const submitted = await readPassword(request);
+    if (submitted === null || !(await passwordMatches(gate, submitted))) {
+        await new Promise((resolve) => setTimeout(resolve, WRONG_PASSWORD_DELAY_MS));
+        return htmlPage(request, 401, passwordPage(siteName, true), true);
+    }
+    return redirect(url.pathname + url.search, sessionCookie(GATE_COOKIE, await issueGateToken(gate)));
+}
+/** The middleware a project's proxy.ts default-exports. */
+export function createProxy({ siteName = DEFAULT_SITE_NAME } = {}) {
+    return async function proxy(request) {
+        const gate = readGate(process.env);
+        if (!gate)
+            return plain(503, 'The prototype gate is not configured.');
+        const url = new URL(request.url);
+        const invited = url.pathname.match(INVITE_PATH);
+        if (invited && ['GET', 'HEAD', 'POST'].includes(request.method))
+            return invite(siteName, request, invited[1]);
+        if (GATE_ASSETS.has(url.pathname) && (request.method === 'GET' || request.method === 'HEAD'))
+            return next();
+        if (await gateTokenIsValid(gate, readCookie(request, GATE_COOKIE)))
+            return pass();
+        const claim = await readPersonToken(gate, readCookie(request, PERSON_COOKIE));
+        if (claim)
+            return personSession(siteName, request, claim);
+        if (request.method === 'GET' || request.method === 'HEAD')
+            return htmlPage(request, 401, passwordPage(siteName, false), true);
+        if (request.method === 'POST')
+            return passwordPost(siteName, request, gate, url);
+        return plain(405, 'Method not allowed', { allow: 'GET, HEAD, POST' });
+    };
+}

package/dist/vite/kit.d.ts

@@ -0,0 +1,4 @@
+import type { Plugin } from 'vite';
+/** The file `@kit/<rest>` names in the first of `dirs` that has it, or null. */
+export declare function findKitFile(dirs: string[], rest: string): string | null;
+export declare function kitResolver(projectKit: string, packageKit: string): Plugin;

package/dist/vite/kit.js

@@ -0,0 +1,35 @@
+/// <reference types="node" />
+// `@kit/<name>` is the project's kit/ first and this package's kit/ second,
+// so a project forks a kit piece by copying the file into kit/ under the same
+// name and changing the copy: every import of it, the hub's included, then
+// takes the project's. `@milesroxas/design-hub/kit/<name>` always means the package's
+// copy, for a project file that extends it (kit/icons.ts adds glyphs to the base set).
+import { existsSync, statSync } from 'node:fs';
+import { join } from 'node:path';
+const KIT_PREFIX = '@kit/';
+const PACKAGE_PREFIX = '@milesroxas/design-hub/kit/';
+const CANDIDATES = ['', '.ts', '.tsx', '.css', '.json', '/index.ts', '/index.tsx'];
+const isFile = (path) => existsSync(path) && statSync(path).isFile();
+/** The file `@kit/<rest>` names in the first of `dirs` that has it, or null. */
+export function findKitFile(dirs, rest) {
+    for (const dir of dirs)
+        for (const ext of CANDIDATES) {
+            const path = join(dir, rest + ext);
+            if (isFile(path))
+                return path;
+        }
+    return null;
+}
+export function kitResolver(projectKit, packageKit) {
+    return {
+        name: 'design-hub-kit',
+        enforce: 'pre',
+        resolveId(id) {
+            if (id.startsWith(KIT_PREFIX))
+                return findKitFile([projectKit, packageKit], id.slice(KIT_PREFIX.length));
+            if (id.startsWith(PACKAGE_PREFIX))
+                return findKitFile([packageKit], id.slice(PACKAGE_PREFIX.length));
+            return null;
+        },
+    };
+}

package/dist/vite/markdown.d.ts

@@ -0,0 +1,2 @@
+import type { Plugin } from 'vite';
+export declare function markdownDocs(): Plugin;

package/dist/vite/markdown.js

@@ -0,0 +1,212 @@
+/// <reference types="node" />
+import { readFileSync } from 'node:fs';
+import { dirname, resolve } from 'node:path';
+import { Marked } from 'marked';
+import { frontmatter } from '../core/frontmatter.js';
+import { escapeHtml } from '../core/html.js';
+import { imageSize } from '../core/image.js';
+// `import { html, title, toc, meta } from './x.md?doc'` compiles a Markdown
+// document at build time: the frontmatter, the first H1 as the title, a table
+// of contents, and the body as HTML. Every image becomes a Vite import, so it
+// ships hashed and carries its pixel size, and GitHub alerts become callouts.
+// Links to other Markdown files lose their href: nothing serves them here.
+// A paragraph that starts with `Controls → …` is a click path: each piece is
+// one press in the prototype panel, in order, and the last is the one you set.
+const SUFFIX = '?doc';
+const ALERT = /^\[!(NOTE|TIP|IMPORTANT|WARNING|CAUTION)\]\s*/i;
+export function markdownDocs() {
+    return {
+        name: 'markdown-docs',
+        enforce: 'pre',
+        load(id) {
+            if (!id.endsWith(SUFFIX))
+                return null;
+            const file = id.slice(0, -SUFFIX.length);
+            this.addWatchFile(file);
+            return compile(readFileSync(file, 'utf8'), file);
+        },
+    };
+}
+const IMG = '\u0000';
+function compile(source, file) {
+    const { data, body } = frontmatter(source);
+    const ids = new Map();
+    const slug = (text) => {
+        const base = text
+            .toLowerCase()
+            .replace(/[^\p{L}\p{N}\s-]/gu, '')
+            .trim()
+            .replace(/\s+/g, '-') || 'section';
+        const n = ids.get(base) ?? 0;
+        ids.set(base, n + 1);
+        return n ? `${base}-${n}` : base;
+    };
+    const toc = [];
+    const images = [];
+    let title = '';
+    const md = new Marked({
+        gfm: true,
+        renderer: {
+            heading({ tokens, depth, text }) {
+                const id = slug(text);
+                if (depth === 2 || depth === 3)
+                    toc.push({ id, text, depth });
+                return `<h${depth} id="${id}">${this.parser.parseInline(tokens)}</h${depth}>\n`;
+            },
+            paragraph({ tokens }) {
+                const path = clickPath(tokens, (t) => this.parser.parseInline(t));
+                if (path)
+                    return path;
+                if (tokens.length === 1 && tokens[0].type === 'image')
+                    return this.parser.parseInline(tokens);
+                return `<p>${this.parser.parseInline(tokens)}</p>\n`;
+            },
+            tablecell(token) {
+                const path = clickPath(token.tokens, (t) => this.parser.parseInline(t));
+                const tag = token.header ? 'th' : 'td';
+                const open = token.align ? `<${tag} align="${token.align}">` : `<${tag}>`;
+                const inner = path ?? this.parser.parseInline(token.tokens);
+                return `${open}${inner}</${tag}>`;
+            },
+            image({ href, text }) {
+                const n = images.push(href) - 1;
+                const size = imageSizeOf(resolve(dirname(file), href));
+                const dims = size ? ` width="${size.width}" height="${size.height}"` : '';
+                const loading = n === 0 ? 'eager' : 'lazy';
+                return (`<figure class="doc-figure"><img src="${IMG}${n}${IMG}" alt=""${dims} loading="${loading}" decoding="async">` +
+                    `<figcaption>${escapeHtml(text)} <a href="${IMG}${n}${IMG}" target="_blank" rel="noreferrer">Full size</a></figcaption></figure>\n`);
+            },
+            link({ href, tokens }) {
+                const inner = this.parser.parseInline(tokens);
+                if (/\.md(#|$)/.test(href))
+                    return inner;
+                const external = /^https?:/.test(href) ? ' target="_blank" rel="noreferrer"' : '';
+                return `<a href="${escapeHtml(href)}"${external}>${inner}</a>`;
+            },
+            blockquote(token) {
+                const kind = token.alert;
+                const inner = this.parser.parse(token.tokens);
+                if (!kind)
+                    return `<blockquote>${inner}</blockquote>\n`;
+                const label = kind[0].toUpperCase() + kind.slice(1);
+                return `<aside class="doc-callout" data-kind="${kind}"><p class="doc-callout-kind">${label}</p>${inner}</aside>\n`;
+            },
+        },
+    });
+    const tokens = md.lexer(body);
+    const at = tokens.findIndex((t) => t.type === 'heading' && t.depth === 1);
+    if (at >= 0) {
+        title = tokens[at].text;
+        tokens.splice(at, 1);
+    }
+    for (const t of tokens)
+        if (t.type === 'blockquote')
+            markAlert(t);
+    const html = md
+        .parser(tokens)
+        .replace(/<table>/g, '<div class="doc-table"><table>')
+        .replace(/<\/table>/g, '</table></div>');
+    const imports = images.map((href, n) => `import img${n} from ${JSON.stringify(relative(href))};`);
+    const parts = html.split(IMG).map((part, i) => (i % 2 ? `img${part}` : JSON.stringify(part)));
+    return [
+        ...imports,
+        `export const meta = ${JSON.stringify(data)};`,
+        `export const title = ${JSON.stringify(title)};`,
+        `export const toc = ${JSON.stringify(toc)};`,
+        `export const html = ${parts.join(' + ')};`,
+    ].join('\n');
+}
+const relative = (href) => (href.startsWith('.') || href.startsWith('/') ? href : `./${href}`);
+// `Controls → Review → **Reset to the comps**` on its own line. A sentence may
+// follow the last step after `. `. Anything that does not start at Controls
+// stays prose, so an arrow in a sentence is not a path. The first step is the
+// closed panel's button: DialKit's sliders glyph, not the word.
+const PATH_TOKEN = new Set(['text', 'strong', 'em', 'codespan', 'escape']);
+/** The inline tokens split at each ` → `, one list per step, and how many arrows there were. */
+function splitSteps(tokens) {
+    const steps = [[]];
+    let arrows = 0;
+    for (const token of tokens) {
+        if (token.type !== 'text') {
+            steps.at(-1)?.push(token);
+            continue;
+        }
+        const parts = token.text.split(' → ');
+        arrows += parts.length - 1;
+        parts.forEach((part, i) => {
+            if (i > 0)
+                steps.push([]);
+            if (part)
+                steps.at(-1)?.push({ type: 'text', raw: part, text: part });
+        });
+    }
+    return { steps, arrows };
+}
+/** A sentence after the last step (`… → **dark**. Then reload.`) comes off the step and reads as prose. */
+function peelFollow(last) {
+    const tail = last.at(-1);
+    if (tail?.type !== 'text')
+        return [];
+    const peeled = tail.text.match(/^([\s\S]*?)\.\s+(\S[\s\S]*)$/);
+    if (!peeled)
+        return [];
+    if (peeled[1])
+        tail.text = peeled[1];
+    else
+        last.pop();
+    return [{ type: 'text', raw: peeled[2], text: peeled[2] }];
+}
+function clickPath(tokens, inline) {
+    if (!tokens.length || tokens.some((t) => !PATH_TOKEN.has(t.type)))
+        return null;
+    const { steps, arrows } = splitSteps(tokens);
+    if (arrows < 1 || steps.some((step) => step.length === 0) || plain(steps[0]) !== 'Controls')
+        return null;
+    const last = steps[steps.length - 1];
+    const follow = peelFollow(last);
+    if (!last.length)
+        return null;
+    const items = steps
+        .map((step, i) => `<li>${i === 0 ? CONTROLS_MARK : `<span>${inline(step)}</span>`}</li>`)
+        .join('');
+    const after = follow.length ? `<p class="doc-path-follow">${inline(follow)}</p>` : '';
+    return `<ol class="doc-path" aria-label="Click in order">${items}</ol>${after}\n`;
+}
+// The closed Controls button, from DialKit's ICON_PANEL (viewBox 0 0 16 16).
+const CONTROLS_MARK = '<span class="doc-path-open"><svg viewBox="0 0 16 16" width="16" height="16" fill="none" aria-hidden="true" focusable="false">' +
+    '<path opacity="0.5" fill="currentColor" d="M6.84766 11.75C6.78583 11.9899 6.75 12.2408 6.75 12.5C6.75 12.7592 6.78583 13.0101 6.84766 13.25H2C1.58579 13.25 1.25 12.9142 1.25 12.5C1.25 12.0858 1.58579 11.75 2 11.75H6.84766ZM14 11.75C14.4142 11.75 14.75 12.0858 14.75 12.5C14.75 12.9142 14.4142 13.25 14 13.25H12.6523C12.7142 13.0101 12.75 12.7592 12.75 12.5C12.75 12.2408 12.7142 11.9899 12.6523 11.75H14ZM3.09766 7.25C3.03583 7.48994 3 7.74075 3 8C3 8.25925 3.03583 8.51006 3.09766 8.75H2C1.58579 8.75 1.25 8.41421 1.25 8C1.25 7.58579 1.58579 7.25 2 7.25H3.09766ZM14 7.25C14.4142 7.25 14.75 7.58579 14.75 8C14.75 8.41421 14.4142 8.75 14 8.75H8.90234C8.96417 8.51006 9 8.25925 9 8C9 7.74075 8.96417 7.48994 8.90234 7.25H14ZM7.59766 2.75C7.53583 2.98994 7.5 3.24075 7.5 3.5C7.5 3.75925 7.53583 4.01006 7.59766 4.25H2C1.58579 4.25 1.25 3.91421 1.25 3.5C1.25 3.08579 1.58579 2.75 2 2.75H7.59766ZM14 2.75C14.4142 2.75 14.75 3.08579 14.75 3.5C14.75 3.91421 14.4142 4.25 14 4.25H13.4023C13.4642 4.01006 13.5 3.75925 13.5 3.5C13.5 3.24075 13.4642 2.98994 13.4023 2.75H14Z"/>' +
+    '<circle cx="6" cy="8" r="0.998596" fill="currentColor" stroke="currentColor" stroke-width="1.25"/>' +
+    '<circle cx="10.4999" cy="3.5" r="0.998657" fill="currentColor" stroke="currentColor" stroke-width="1.25"/>' +
+    '<circle cx="9.75015" cy="12.5" r="0.997986" fill="currentColor" stroke="currentColor" stroke-width="1.25"/>' +
+    '</svg><span class="doc-path-name">Controls</span></span>';
+const plain = (tokens) => tokens
+    .map((t) => ('text' in t ? t.text : ''))
+    .join('')
+    .trim();
+// `> [!NOTE]` on the first line of a quote makes it a callout of that kind.
+function markAlert(quote) {
+    const first = quote.tokens[0];
+    if (first?.type !== 'paragraph')
+        return;
+    const para = first;
+    const lead = para.tokens[0];
+    if (lead?.type !== 'text' || !ALERT.test(lead.text))
+        return;
+    quote.alert = lead.text.match(ALERT)[1].toLowerCase();
+    lead.text = lead.text.replace(ALERT, '');
+    lead.raw = lead.raw.replace(ALERT, '');
+    para.text = para.text.replace(ALERT, '');
+    if (!lead.text)
+        para.tokens.shift();
+    if (!para.tokens.length)
+        quote.tokens.shift();
+}
+function imageSizeOf(path) {
+    try {
+        return imageSize(readFileSync(path));
+    }
+    catch {
+        // A missing image fails the build at its Vite import, which names the file; here it only goes unsized.
+        return null;
+    }
+}

package/dist/vite/plugin.d.ts

@@ -0,0 +1,15 @@
+import type { InlineConfig, PluginOption } from 'vite';
+export type HubOptions = {
+    /** The project: the folder with prototypes/, kit/ and docs/. */
+    root: string;
+};
+/** Every plugin the hub needs, for a project that writes its own vite.config.ts. */
+export declare function designHub({ root }: HubOptions): PluginOption[];
+/**
+ * The whole config `design-hub dev` and `design-hub build` run on. One port per
+ * project: Conductor's per-workspace port when it runs us, else the PORT
+ * `design-hub bootstrap` wrote to .env. strictPort refuses a taken port rather
+ * than drifting to the next one, because a fallback silently serves the wrong
+ * project. A build needs no port, so Vercel builds without a .env.
+ */
+export declare function hubConfig({ root }: HubOptions, command: 'serve' | 'build'): InlineConfig;

package/dist/vite/plugin.js

@@ -0,0 +1,84 @@
+/// <reference types="node" />
+// The Vite side of the hub. `design-hub dev` and `design-hub build` run Vite
+// on this config: the hub's own index.html as the root, the project's
+// prototypes reached through the registry module, the project's kit/ in
+// front of the package's, the review API in dev, and the gate's font emitted
+// where the gate serves it. A project keeps no vite.config.ts; one that wants
+// its own can import `designHub` from '@milesroxas/design-hub/vite'.
+import { readFileSync } from 'node:fs';
+import { createRequire } from 'node:module';
+import { dirname, join } from 'node:path';
+import react from '@vitejs/plugin-react';
+import { devReview } from '../server/dev.js';
+import { devPort, readEnv } from '../server/env.js';
+import { PACKAGE, PACKAGE_KIT, SHELL } from '../server/paths.js';
+import { GATE_FONT, gatePreview } from '../vercel/proxy.js';
+import { kitResolver } from './kit.js';
+import { markdownDocs } from './markdown.js';
+import { registry } from './registry.js';
+const require = createRequire(import.meta.url);
+// The password page loads before sign-in, so it cannot reach the hashed
+// bundle. Its font goes out at the one fixed path the gate lets through.
+// `design-hub dev` has no gate, so there /_gate/ previews the page (?failed
+// shows the wrong-password state).
+const gateFontFile = () => join(dirname(require.resolve('@fontsource-variable/geist')), 'files', 'geist-latin-wght-normal.woff2');
+function gateFont() {
+    return {
+        name: 'design-hub-gate-font',
+        generateBundle() {
+            this.emitFile({ type: 'asset', fileName: GATE_FONT.slice(1), source: readFileSync(gateFontFile()) });
+        },
+        configureServer(server) {
+            server.middlewares.use(async (req, res, nextMiddleware) => {
+                const url = new URL(req.url ?? '/', 'http://dev');
+                if (url.pathname === GATE_FONT) {
+                    res.setHeader('content-type', 'font/woff2');
+                    res.end(readFileSync(gateFontFile()));
+                    return;
+                }
+                if (url.pathname !== '/_gate/')
+                    return nextMiddleware();
+                const page = await gatePreview(url.searchParams.has('failed'));
+                res.setHeader('content-type', 'text/html; charset=utf-8');
+                res.setHeader('content-security-policy', page.csp);
+                res.end(page.html);
+            });
+        },
+    };
+}
+/** Every plugin the hub needs, for a project that writes its own vite.config.ts. */
+export function designHub({ root }) {
+    return [
+        react(),
+        kitResolver(join(root, 'kit'), PACKAGE_KIT),
+        registry(root),
+        markdownDocs(),
+        devReview(),
+        gateFont(),
+    ];
+}
+/**
+ * The whole config `design-hub dev` and `design-hub build` run on. One port per
+ * project: Conductor's per-workspace port when it runs us, else the PORT
+ * `design-hub bootstrap` wrote to .env. strictPort refuses a taken port rather
+ * than drifting to the next one, because a fallback silently serves the wrong
+ * project. A build needs no port, so Vercel builds without a .env.
+ */
+export function hubConfig({ root }, command) {
+    const port = devPort(readEnv(root));
+    if (command === 'serve' && port === undefined)
+        throw new Error('PORT is not set. Run `design-hub bootstrap` once to pick a free port and write it to .env.');
+    return {
+        configFile: false,
+        root: SHELL,
+        publicDir: join(SHELL, 'public'),
+        envDir: root,
+        cacheDir: join(root, 'node_modules', '.vite'),
+        plugins: designHub({ root }),
+        resolve: { dedupe: ['react', 'react-dom'] },
+        optimizeDeps: { entries: [join(SHELL, 'index.html'), join(root, 'prototypes', '*', 'index.tsx')] },
+        server: { port, strictPort: true, fs: { allow: [root, PACKAGE] } },
+        preview: port === undefined ? undefined : { port, strictPort: true },
+        build: { outDir: join(root, 'dist'), emptyOutDir: true },
+    };
+}

package/dist/vite/registry.d.ts

@@ -0,0 +1,7 @@
+import type { Plugin } from 'vite';
+/** The prototype folders: kebab-case, with a README. `guide` is the walkthrough route, never a prototype. */
+export declare const prototypeSlugs: (prototypes: string) => string[];
+/** The features with a walkthrough at docs/sprints/<feature>/guide.md. */
+export declare const guideFeatures: (sprints: string) => string[];
+export declare function registrySource(root: string): string;
+export declare function registry(root: string): Plugin;