stitch2 0.0.0-stage → 0.7.2

package/dist/setup.js

@@ -0,0 +1,214 @@
+/**
+ * Sets a project up for stitch2 in one step, for people and agents alike:
+ *   stitch2 setup [--name "My app" --primary "#2F6FEB" [init options]] [--prefix ma] [--skills-dir .agents/skills,…]
+ * Links stitch2's skills into the agent's skills folder(s), writes stitch2.config.json, a screen template, a
+ * component catalog and a few starter components (light-DOM custom elements on DESIGN.md's tokens), and, with
+ * --name and --primary, DESIGN.md and its tokens. Existing files are never overwritten, so it is safe to re-run.
+ */
+import { execFileSync } from 'node:child_process';
+import { existsSync, mkdirSync, readdirSync, symlinkSync, writeFileSync } from 'node:fs';
+import { basename, dirname, join, relative, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { CONFIG_FILE, CONFIG_NAME, config as current } from './config.js';
+import { parseArgs } from './init.js';
+const args = parseArgs(process.argv.slice(2));
+const str = (k) => (typeof args[k] === 'string' ? args[k] : undefined);
+const project = process.cwd();
+const pkg = fileURLToPath(new URL('..', import.meta.url));
+const cli = fileURLToPath(new URL(`./cli${import.meta.url.endsWith('.ts') ? '.ts' : '.js'}`, import.meta.url));
+const done = [];
+const skipped = [];
+/** Writes a file unless it exists; records which. */
+function write(file, content) {
+    const path = resolve(project, file);
+    if (existsSync(path))
+        return skipped.push(file);
+    mkdirSync(dirname(path), { recursive: true });
+    writeFileSync(path, content);
+    done.push(file);
+}
+/** Two letters from the product name ("Acme Fit" → af), so custom elements read <af-button>. */
+function prefixFrom(name) {
+    const words = name.toLowerCase().match(/[a-z][a-z0-9]*/g) ?? [];
+    const p = words.length > 1 ? words.map((w) => w[0]).join('').slice(0, 3) : (words[0] ?? '').slice(0, 2);
+    return p.length >= 2 ? p : 'ui';
+}
+const name = str('name') ?? (CONFIG_FILE ? current.name : basename(project));
+const prefix = CONFIG_FILE ? current.prefix : (str('prefix') ?? prefixFrom(name));
+const design = CONFIG_FILE ? current.designDir : 'design';
+// 1. Skills: linked, so they update with the package.
+const skillDirs = (str('skills-dir') ?? '.agents/skills').split(',').map((d) => d.trim()).filter(Boolean);
+const skills = readdirSync(join(pkg, 'skills'));
+const linked = [];
+for (const dir of skillDirs) {
+    mkdirSync(resolve(project, dir), { recursive: true });
+    for (const s of skills) {
+        const at = join(dir, s);
+        linked.push(at);
+        if (existsSync(resolve(project, at))) {
+            skipped.push(at);
+            continue;
+        }
+        symlinkSync(relative(resolve(project, dir), join(pkg, 'skills', s)), resolve(project, at), 'dir');
+        done.push(`${at} → stitch2/skills/${s}`);
+    }
+}
+// 2. The config.
+const schema = relative(project, join(pkg, 'config.schema.json'));
+write(CONFIG_NAME, `${JSON.stringify({
+    ...(schema.startsWith('node_modules') ? { $schema: `./${schema}` } : {}),
+    name: `${name} design lab`,
+    designDir: design,
+    screenDirs: ['screens'],
+    catalogDir: 'screens/components',
+    prefix,
+    order: [],
+    skills: linked.filter((s) => s.startsWith(skillDirs[0])),
+}, null, 2)}\n`);
+// 3. Screen template, catalog and starter components.
+const head = (title, extra) => `<!doctype html>
+<html lang="en" data-theme="dark">
+<head>
+${extra}<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<meta name="${prefix}-frame-width" content="390" />
+<title>${name} — ${title}</title>
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet" />
+<script src="https://cdn.tailwindcss.com"></script>
+<script src="/tailwind.tokens.js"></script>
+<link rel="stylesheet" href="/tokens.css" />
+<script src="/components/${prefix}.js" defer></script>
+</head>
+`;
+write(join(design, 'screens/_template.html'), `${head('Screen name', `<meta name="${prefix}-screen" content="screen-name" />\n<meta name="${prefix}-device" content="mobile" />\n<meta name="${prefix}-status" content="draft" />\n`)}<!--
+  Template for ${name} screens. Copy it to ${design}/screens/<screen>/<device>-v<N>.html and set the ${prefix}-* meta
+  tags (desktop: ${prefix}-device desktop and ${prefix}-frame-width 1280); status draft while you work, review when
+  done. Files starting with _ are not shown on the canvas. Build with the components in the catalog
+  (${design}/screens/components/catalog.html: header, section, card, row, button, chip); write plain markup only for what no component covers, with token
+  classes (bg-background/surface/raised, border-border, text-text/text-muted, bg-primary, rounded-btn/card) and one
+  .type-<level> class per text element. Fonts: load the families DESIGN.md names.
+-->
+<body class="bg-background font-sans text-text antialiased">
+  <main class="mx-auto max-w-[390px] px-4 pb-24 pt-6">
+    <${prefix}-header title="Title"></${prefix}-header>
+  </main>
+</body>
+</html>
+`);
+write(join(design, 'screens/components/catalog.html'), `${head('Components', '')}<!-- The component catalog: every shared element and its variants. Screens use these elements and never rebuild
+     them by hand; to change one, edit ${design}/components/${prefix}.js and look here. -->
+<body class="bg-background font-sans text-text antialiased">
+  <main class="mx-auto max-w-[390px] px-4 pb-24 pt-6">
+    <${prefix}-header title="Components" meta="${name}"><${prefix}-button variant="secondary">Action</${prefix}-button></${prefix}-header>
+    <${prefix}-section label="Buttons">
+      <${prefix}-button full>Primary</${prefix}-button>
+      <${prefix}-button variant="secondary" full>Secondary</${prefix}-button>
+      <${prefix}-button variant="ghost" full>Ghost</${prefix}-button>
+    </${prefix}-section>
+    <${prefix}-section label="Chips">
+      <div class="flex flex-wrap gap-2"><${prefix}-chip selected>Selected</${prefix}-chip><${prefix}-chip>Chip</${prefix}-chip></div>
+    </${prefix}-section>
+    <${prefix}-section label="Card">
+      <${prefix}-card><p class="type-title-card text-text">Card title</p><p class="mt-1 type-body text-text-muted">Supporting text in a card.</p></${prefix}-card>
+    </${prefix}-section>
+    <${prefix}-section label="Rows in a list card">
+      <${prefix}-card list>
+        <${prefix}-row name="A row" meta="With a meta line" chevron></${prefix}-row>
+        <${prefix}-row name="Another row" value="42"></${prefix}-row>
+      </${prefix}-card>
+    </${prefix}-section>
+  </main>
+</body>
+</html>
+`);
+write(join(design, `components/${prefix}.js`), `// ${name}'s starter components for the design screens: light-DOM custom elements on DESIGN.md's tokens (the
+// classes come from tailwind.tokens.js and tokens.css). Each marks its root data-${prefix}="<name>", which stitch2's
+// checks and compare read. Extend them, or replace this file with your app's own components (stitch2 elements).
+const P = '${prefix}'
+const esc = (v) => String(v ?? '').replace(/[&<>"]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' })[c])
+const flag = (el, a) => el.hasAttribute(a) && el.getAttribute(a) !== 'false'
+const focus = 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary'
+const chevron =
+  '<svg class="size-4 shrink-0 text-text-muted" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="m9 18 6-6-6-6"/></svg>'
+
+/** Defines <P-name>: render(el) returns the markup; the element's own children go into [data-slot]. */
+function define(name, render) {
+  customElements.define(
+    \`\${P}-\${name}\`,
+    class extends HTMLElement {
+      connectedCallback() {
+        // Children are parsed after the opening tag: render once the document is complete.
+        if (document.readyState === 'loading') {
+          document.addEventListener('DOMContentLoaded', () => this.connectedCallback(), { once: true })
+          return
+        }
+        if (this.dataset.rendered) return
+        this.dataset.rendered = '1'
+        const kids = [...this.childNodes]
+        this.style.display = 'contents'
+        this.innerHTML = render(this)
+        const root = this.firstElementChild
+        root?.setAttribute(\`data-\${P}\`, name)
+        const slot = this.querySelector('[data-slot]')
+        if (slot) slot.append(...kids)
+      }
+    },
+  )
+}
+
+define(
+  'header',
+  (el) => \`<header class="mb-6 flex items-start justify-between gap-3"><div class="min-w-0">\${
+    el.getAttribute('meta') ? \`<p class="type-meta text-text-muted">\${esc(el.getAttribute('meta'))}</p>\` : ''
+  }<h1 class="truncate type-title-screen text-text">\${esc(el.getAttribute('title'))}</h1></div><div data-slot class="flex shrink-0 items-center gap-2"></div></header>\`,
+)
+define(
+  'section',
+  (el) =>
+    \`<section class="mb-6"><h2 class="mb-2 type-label-caps text-text-muted">\${esc(el.getAttribute('label'))}</h2><div data-slot class="flex flex-col gap-3"></div></section>\`,
+)
+define('button', (el) => {
+  const look = {
+    primary: 'bg-primary text-on-primary hover:bg-primary-pressed',
+    secondary: 'bg-raised text-text hover:bg-border',
+    ghost: 'text-text-muted hover:text-text',
+  }[el.getAttribute('variant') ?? 'primary']
+  return \`<button type="button" data-slot class="inline-flex h-12 items-center justify-center gap-2 whitespace-nowrap rounded-btn px-5 type-label-button \${look} \${flag(el, 'full') ? 'w-full' : ''} \${focus}"></button>\`
+})
+define('chip', (el) => {
+  const on = flag(el, 'selected')
+  return \`<button type="button" aria-pressed="\${on}" data-slot class="inline-flex h-8 items-center rounded-full px-3 type-label-chip \${on ? 'bg-primary-wash text-primary' : 'bg-raised text-text-muted hover:text-text'} \${focus}"></button>\`
+})
+define(
+  'card',
+  (el) =>
+    \`<div data-slot class="rounded-card border border-border bg-surface \${flag(el, 'list') ? 'overflow-hidden [&>*+*>*]:border-t [&>*+*>*]:border-border' : 'p-4'}"></div>\`,
+)
+define(
+  'row',
+  (el) => \`<div class="flex min-h-16 items-center gap-3 px-4 py-3"><span class="block min-w-0 flex-1"><span class="block truncate type-body-strong text-text">\${esc(el.getAttribute('name'))}</span>\${
+    el.getAttribute('meta') ? \`<span class="block truncate type-meta text-text-muted">\${esc(el.getAttribute('meta'))}</span>\` : ''
+  }</span>\${el.getAttribute('value') ? \`<span class="shrink-0 type-body-strong text-text">\${esc(el.getAttribute('value'))}</span>\` : ''}\${flag(el, 'chevron') ? chevron : ''}<span data-slot class="contents"></span></div>\`,
+)
+`);
+// 4. DESIGN.md and tokens, through the commands themselves (they read the config just written).
+const run = (cmd, more = []) => execFileSync(process.execPath, [cli, cmd, ...more], { cwd: project, stdio: 'inherit' });
+const designMd = join(project, design, 'DESIGN.md');
+if (!existsSync(designMd) && str('primary')) {
+    const pass = Object.entries(args)
+        .filter(([k]) => !['prefix', 'skills-dir'].includes(k))
+        .flatMap(([k, v]) => (v === true ? [`--${k}`] : [`--${k}`, v]));
+    run('init', pass.includes('--name') ? pass : ['--name', name, ...pass]);
+}
+if (existsSync(designMd))
+    run('tokens');
+console.log(`\nstitch2 setup (${prefix}-* elements, design in ${design}/)`);
+for (const f of done)
+    console.log(`  wrote  ${f}`);
+for (const f of skipped)
+    console.log(`  kept   ${f}`);
+console.log(existsSync(designMd)
+    ? '\nnext: stitch2 canvas, then draft screens from the template (the stitch2 skill has the workflow)'
+    : '\nnext: stitch2 init --name "…" --primary "#rrggbb" (or stitch2 extract <url>), then stitch2 tokens and stitch2 canvas');

package/dist/tokens.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/tokens.js

@@ -0,0 +1,128 @@
+/**
+ * Design tokens for lab screens, generated from design/DESIGN.md's front matter (the DESIGN.md format Stitch
+ * and Google's design.md linter use), plus Material 3 colour roles from one seed with Google's
+ * material-color-utilities (settings in tokens.config.json next to DESIGN.md).
+ * Writes tokens.css (colour variables, dark by default and [data-theme=light], and one .type-<level>
+ * class per typography level) and tailwind.tokens.js (a Tailwind CDN config using the variables).
+ * Usage: stitch2 tokens
+ */
+import { readFileSync, writeFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { argbFromHex, Hct, hexFromArgb, MaterialDynamicColors, SchemeContent, SchemeExpressive, SchemeFidelity, SchemeFruitSalad, SchemeMonochrome, SchemeNeutral, SchemeRainbow, SchemeTonalSpot, SchemeVibrant, } from '@material/material-color-utilities';
+import { config as lab } from './config.js';
+import { readDesign } from './design-md.js';
+import { writeExports } from './exports.js';
+import { ROOT } from './screens.js';
+const SCHEMES = {
+    fidelity: SchemeFidelity,
+    tonal_spot: SchemeTonalSpot,
+    vibrant: SchemeVibrant,
+    expressive: SchemeExpressive,
+    content: SchemeContent,
+    neutral: SchemeNeutral,
+    monochrome: SchemeMonochrome,
+    rainbow: SchemeRainbow,
+    fruit_salad: SchemeFruitSalad,
+};
+const config = JSON.parse(readFileSync(join(ROOT, 'tokens.config.json'), 'utf8'));
+const Scheme = SCHEMES[config.scheme];
+if (!Scheme)
+    throw new Error(`unknown scheme "${config.scheme}"; use one of ${Object.keys(SCHEMES).join(', ')}`);
+const design = readDesign();
+const seed = design.colors[config.seed] ?? config.seed;
+const source = Hct.fromInt(argbFromHex(seed));
+/** Every Material role for one mode, keyed like "primary-container". */
+function roles(dark) {
+    const scheme = new Scheme(source, dark, config.contrast ?? 0);
+    const out = {};
+    // The roles are static DynamicColor properties of MaterialDynamicColors (0.3.x).
+    const all = Object.values(MaterialDynamicColors).filter((c) => typeof c === 'object' && c !== null && 'getArgb' in c && 'name' in c);
+    for (const color of all) {
+        if (color.name.endsWith('_palette_key_color'))
+            continue;
+        out[color.name.replaceAll('_', '-')] = hexFromArgb(color.getArgb(scheme));
+    }
+    return out;
+}
+// DESIGN.md colours: plain names are the dark theme, light-<name> overrides them in the light theme.
+const dark = {};
+const light = {};
+for (const [name, value] of Object.entries(design.colors)) {
+    // "primary" is often an alias ("{colors.ember}"); keep it only when it is a colour of its own.
+    if (name === 'primary' && Object.entries(design.colors).some(([k, v]) => k !== name && v === value))
+        continue;
+    if (name.startsWith('light-'))
+        light[name.slice(6)] = value;
+    else
+        dark[name] = value;
+}
+for (const name of Object.keys(dark))
+    light[name] ??= dark[name];
+const vars = (selector, palette, md) => [
+    `${selector} {`,
+    ...Object.entries(palette).map(([k, v]) => `  --${lab.prefix}-${k}: ${v};`),
+    ...Object.entries(md).map(([k, v]) => `  --md-${k}: ${v};`),
+    '}',
+].join('\n');
+// Scripts without case or with joined letters: no tracking, no caps, and room for tall marks.
+const UNCASED = ['ar', 'zh', 'ko', 'th', 'hi'].map((l) => `:lang(${l})`);
+const FALLBACK = '"Noto Sans Arabic", "Noto Sans Thai", "Noto Sans Devanagari", "PingFang SC", "Noto Sans SC", "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif';
+const typeDecls = {};
+const typeRules = Object.entries(design.typography).map(([name, t]) => {
+    const fallback = `var(--${lab.prefix}-font-${/mono/i.test(t.fontFamily ?? '') ? 'mono' : 'sans'}-fallback)`;
+    const decl = [
+        `font: ${t.fontWeight} ${t.fontSize}/${t.lineHeight} "${t.fontFamily}", ${fallback}`,
+        `letter-spacing: ${t.letterSpacing ?? '0em'}`,
+        t.fontFeature ? `font-feature-settings: ${t.fontFeature}` : '',
+        name.endsWith('-caps') ? 'text-transform: uppercase' : '',
+    ].filter(Boolean);
+    typeDecls[name] = decl;
+    return `.type-${name} { ${decl.join('; ')}; }`;
+});
+const typeCss = [
+    ...typeRules,
+    `${UNCASED.map((l) => `${l} [class*="type-"], [class*="type-"]${l}`).join(', ')} { letter-spacing: 0; text-transform: none; }`,
+    `${['th', 'hi'].map((l) => `:lang(${l}) [class*="type-"]`).join(', ')} { line-height: 1.5; }`,
+];
+const md = { dark: roles(true), light: roles(false) };
+const header = `/* Generated by stitch2 tokens from DESIGN.md (Material roles: seed ${seed}, ${config.scheme}). Do not edit. */`;
+writeFileSync(join(ROOT, 'tokens.css'), [
+    header,
+    vars(":root, [data-theme='dark']", dark, md.dark),
+    vars("[data-theme='light']", light, md.light),
+    ":root { color-scheme: dark; } [data-theme='light'] { color-scheme: light; }",
+    `:root { --${lab.prefix}-font-sans-fallback: ${FALLBACK}; --${lab.prefix}-font-mono-fallback: ui-monospace, monospace; }`,
+    '/* Typography levels: one class sets family, size, line height, weight, tracking and figures. */',
+    typeCss.join('\n'),
+    '',
+].join('\n\n'));
+const colors = Object.fromEntries(Object.keys(dark).map((k) => [k, `var(--${lab.prefix}-${k})`]));
+colors.md = Object.fromEntries(Object.keys(md.dark).map((k) => [k, `var(--md-${k})`]));
+const families = Object.values(design.typography).map((t) => t.fontFamily ?? '');
+const tailwind = {
+    darkMode: ['selector', "[data-theme='dark']"],
+    theme: {
+        extend: {
+            colors,
+            borderRadius: design.rounded,
+            spacing: design.spacing,
+            fontFamily: {
+                sans: [families.find((f) => !/mono/i.test(f)) ?? 'Geist', 'system-ui', 'sans-serif'],
+                mono: [families.find((f) => /mono/i.test(f)) ?? 'Geist Mono', 'ui-monospace', 'monospace'],
+            },
+        },
+    },
+};
+writeFileSync(join(ROOT, 'tailwind.tokens.js'), `${header.replace('/*', '//').replace(' */', '')}\n// Load after the Tailwind CDN script: bg-floor, text-chalk, bg-ember, rounded-card, p-lg, font-mono, bg-md-primary-container. Text styles: the .type-<level> classes in tokens.css.\ntailwind.config = ${JSON.stringify(tailwind, null, 2)}\n`);
+const exported = writeExports({
+    design,
+    dark,
+    light,
+    type: typeDecls,
+    root: {
+        [`${lab.prefix}-font-sans-fallback`]: FALLBACK,
+        [`${lab.prefix}-font-mono-fallback`]: 'ui-monospace, monospace',
+    },
+    header: `/* Generated by stitch2 tokens from DESIGN.md. Do not edit: change DESIGN.md and run stitch2 tokens. */`,
+});
+console.log(`tokens: ${Object.keys(dark).length} colours, ${typeRules.length} type levels, ${Object.keys(md.dark).length} Material roles (${config.scheme}, seed ${seed})${exported.length ? `; exported ${exported.join(', ')}` : ''}`);

package/dist/type.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/type.js

@@ -0,0 +1,60 @@
+/**
+ * Typography audit: renders each screen and lists every distinct text style it uses (family, size, line
+ * height, weight, tracking, colour, case), how often, a sample, and which DESIGN.md type level it matches
+ * ("—" when none). Use it to compare type systems (Stitch versus hand-made screens) and to find stray styles.
+ * Usage: stitch2 type [path filter…] [--json]   (--json writes design/type-audit.json)
+ */
+import { writeFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { chromium } from '@playwright/test';
+import { typeLevels } from './design-md.js';
+import { listScreens, ROOT } from './screens.js';
+import { startServer } from './serve.js';
+import { collectText, matchLevel } from './typecheck.js';
+const key = (t) => `${t.family} ${t.size}/${Math.round(t.lineHeight)} w${t.weight}${t.tracking ? ` ${(t.tracking / t.size).toFixed(3)}em` : ''}${t.upper ? ' CAPS' : ''} ${t.color}`;
+const args = process.argv.slice(2);
+const filters = args.filter((a) => !a.startsWith('--'));
+const screens = listScreens().filter((s) => !filters.length || filters.some((f) => s.path.includes(f)));
+const levels = typeLevels();
+const server = await startServer(0);
+const browser = await chromium.launch();
+const page = await browser.newPage({ viewport: { width: 390, height: 844 } });
+const report = {};
+for (const s of screens) {
+    await page.setViewportSize({ width: s.width, height: 844 });
+    await page
+        .goto(`http://127.0.0.1:${server.port}/${s.path}`, { waitUntil: 'networkidle', timeout: 30_000 })
+        .catch(() => { });
+    await page.waitForTimeout(600);
+    const styles = new Map();
+    for (const t of await page.evaluate(collectText)) {
+        const k = key(t);
+        const hit = styles.get(k);
+        if (hit)
+            hit.count++;
+        else
+            styles.set(k, {
+                key: k,
+                level: matchLevel(levels, t)?.name ?? '—',
+                count: 1,
+                numeric: t.numeric,
+                sample: t.text,
+                item: t,
+            });
+    }
+    report[s.path] = [...styles.values()].sort((a, b) => b.item.size - a.item.size || b.item.weight - a.item.weight);
+}
+await browser.close();
+server.close();
+if (args.includes('--json'))
+    writeFileSync(join(ROOT, 'type-audit.json'), `${JSON.stringify(report, null, 2)}\n`);
+const uniq = (xs) => [...new Set(xs)];
+for (const [path, styles] of Object.entries(report)) {
+    const texts = styles.reduce((n, s) => n + s.count, 0);
+    const onScale = styles.filter((s) => s.level !== '—').reduce((n, s) => n + s.count, 0);
+    console.log(`\n${path}: ${styles.length} styles, ${Math.round((onScale / texts) * 100)}% of text on the scale; sizes ${uniq(styles.map((s) => s.item.size)).join('/')}, weights ${uniq(styles.map((s) => s.item.weight))
+        .sort()
+        .join('/')}, colours ${uniq(styles.map((s) => s.item.color)).length}`);
+    for (const s of styles)
+        console.log(`  ${String(s.count).padStart(3)}×  ${s.level.padEnd(14)} ${s.key.padEnd(52)} ${s.numeric ? '#' : ' '} “${s.sample}”`);
+}

package/dist/typecheck.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Typography checks shared by check and type: collects every rendered text style in a page and compares it
+ * with DESIGN.md's type levels.
+ */
+import type { Level } from './design-md.ts';
+export interface Issue {
+    severity: 'error' | 'warning';
+    type: string;
+    message: string;
+    selector: string;
+    text: string;
+}
+export interface TextItem {
+    selector: string;
+    text: string;
+    family: string;
+    mono: boolean;
+    size: number;
+    weight: number;
+    /** px */
+    lineHeight: number;
+    /** px */
+    tracking: number;
+    color: string;
+    upper: boolean;
+    numeric: boolean;
+    lines: number;
+}
+/** Runs in the page. Plain JS on purpose: Playwright sends its source to the browser. */
+export declare function collectText(): TextItem[];
+/** The type level a rendered style matches, if any. Line height only matters for text that can wrap. */
+export declare function matchLevel(levels: Level[], t: TextItem): Level | undefined;
+export declare function nearestLevel(levels: Level[], t: TextItem): Level;
+/** Typography issues for one screen: off-scale styles, cramped wrapped text, untracked caps, mono decimals. */
+export declare function typeIssues(levels: Level[], items: TextItem[]): Issue[];

package/dist/typecheck.js

@@ -0,0 +1,112 @@
+/** Runs in the page. Plain JS on purpose: Playwright sends its source to the browser. */
+export function collectText() {
+    const sel = (el) => {
+        const parts = [];
+        for (let e = el; e && e !== document.body && parts.length < 6; e = e.parentElement) {
+            if (e.id) {
+                parts.unshift(`#${CSS.escape(e.id)}`);
+                break;
+            }
+            let p = e.tagName.toLowerCase();
+            const same = e.parentElement
+                ? [...e.parentElement.children].filter((c) => c.tagName === e.tagName)
+                : [];
+            if (same.length > 1)
+                p += `:nth-of-type(${same.indexOf(e) + 1})`;
+            parts.unshift(p);
+        }
+        return parts.join(' > ');
+    };
+    const hex = (n) => Math.round(n).toString(16).padStart(2, '0');
+    const out = [];
+    for (const el of document.body.querySelectorAll('*')) {
+        const nodes = [...el.childNodes].filter((n) => n.nodeType === 3 && n.textContent.trim());
+        if (!nodes.length || el.closest('script,style,svg,[aria-hidden="true"]'))
+            continue;
+        const cs = getComputedStyle(el);
+        // Icon fonts (Material Symbols) render ligature words as glyphs: not text.
+        if (/material|symbols|icons/i.test(cs.fontFamily) || cs.visibility === 'hidden')
+            continue;
+        const r = el.getBoundingClientRect();
+        if (!r.width || !r.height)
+            continue;
+        let opacity = 1;
+        for (let e = el; e; e = e.parentElement)
+            opacity *= Number(getComputedStyle(e).opacity);
+        if (opacity < 0.05)
+            continue;
+        const own = nodes.map((n) => n.textContent.trim()).join(' ');
+        const size = Number.parseFloat(cs.fontSize);
+        const lineHeight = cs.lineHeight === 'normal' ? size * 1.2 : Number.parseFloat(cs.lineHeight);
+        // Lines: line boxes whose middles are more than half a line apart.
+        const mids = [];
+        for (const n of nodes) {
+            const range = document.createRange();
+            range.selectNodeContents(n);
+            for (const q of range.getClientRects())
+                if (q.width > 1)
+                    mids.push(q.top + q.height / 2);
+        }
+        mids.sort((a, b) => a - b);
+        const lines = mids.filter((m, i) => i === 0 || m - mids[i - 1] > lineHeight / 2).length;
+        const m = cs.color.match(/[\d.]+/g).map(Number);
+        const alpha = (m[3] ?? 1) * opacity;
+        out.push({
+            selector: sel(el),
+            text: own.slice(0, 40),
+            family: cs.fontFamily.split(',')[0].replaceAll(/["']/g, '').trim(),
+            mono: /mono/i.test(cs.fontFamily.split(',')[0]),
+            size,
+            weight: Number(cs.fontWeight),
+            lineHeight,
+            tracking: cs.letterSpacing === 'normal' ? 0 : Number.parseFloat(cs.letterSpacing),
+            color: `#${hex(m[0])}${hex(m[1])}${hex(m[2])}${alpha < 0.99 ? ` ${Math.round(alpha * 100)}%` : ''}`,
+            // Set in capitals: uppercased by CSS, or typed in capitals (6+ letters, so "RPE" and "PR" don't count).
+            upper: cs.textTransform === 'uppercase' ||
+                (own === own.toUpperCase() && own.replace(/[^A-Z]/g, '').length >= 6),
+            numeric: /^[\d\s.,:×x+\-−–/%]+[a-z]{0,4}$/i.test(own) && /\d/.test(own),
+            lines,
+        });
+    }
+    return out;
+}
+/** The type level a rendered style matches, if any. Line height only matters for text that can wrap. */
+export function matchLevel(levels, t) {
+    return levels.find((l) => l.mono === t.mono &&
+        Math.abs(l.size - t.size) < 0.5 &&
+        l.weight === t.weight &&
+        Math.abs(l.tracking - t.tracking) <= 0.012 * t.size + 0.05 &&
+        Math.abs(l.lineHeight - t.lineHeight) < 1.5);
+}
+export function nearestLevel(levels, t) {
+    const score = (l) => Math.abs(l.size - t.size) * 2 + Math.abs(l.weight - t.weight) / 100 + (l.mono === t.mono ? 0 : 3);
+    return [...levels].sort((a, b) => score(a) - score(b))[0];
+}
+const describe = (t) => `${t.mono ? 'mono ' : ''}${t.size}/${Math.round(t.lineHeight)} ${t.weight}${t.tracking ? ` ${(t.tracking / t.size).toFixed(2)}em` : ''}`;
+const describeLevel = (l) => `${l.name} (${l.mono ? 'mono ' : ''}${l.size}/${l.lineHeight} ${l.weight}${l.tracking ? ` ${(l.tracking / l.size).toFixed(2)}em` : ''})`;
+/** Typography issues for one screen: off-scale styles, cramped wrapped text, untracked caps, mono decimals. */
+export function typeIssues(levels, items) {
+    const out = [];
+    const seen = new Set();
+    const push = (severity, type, t, message) => {
+        if (out.filter((i) => i.type === type).length >= 10)
+            return;
+        out.push({ severity, type, message, selector: t.selector, text: t.text });
+    };
+    for (const t of items) {
+        if (levels.length && !matchLevel(levels, t)) {
+            const key = describe(t);
+            if (!seen.has(key)) {
+                seen.add(key);
+                push('warning', 'type-scale', t, `Off the type scale: ${key}; nearest level ${describeLevel(nearestLevel(levels, t))}`);
+            }
+        }
+        if (t.lines > 1 && t.lineHeight < t.size * 1.15)
+            push('error', 'type-leading', t, `Wrapped text with cramped line height (${Math.round(t.lineHeight)}px for ${t.size}px type)`);
+        if (t.upper && t.text.length > 2 && t.tracking < 0.03 * t.size)
+            push('warning', 'type-caps', t, 'Capitals without letter-spacing (use label-caps, +0.06em)');
+        if (t.mono && t.size >= 18 && /\d[.,:]\d/.test(t.text))
+            push('warning', 'type-mono-number', t, 'Large number in a monospace font: its point, comma or colon gets a full-width gap; use Geist with tabular figures');
+    }
+    return out;
+}

package/package.json

@@ -1,6 +1,55 @@
 {
   "name": "stitch2",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.7.2",
+  "description": "A design canvas, layout and type checks, component consistency and screen versioning for agent-built UI, on Google's DESIGN.md format.",
+  "license": "MIT",
+  "author": "ifokeev",
+  "homepage": "https://github.com/ifokeev/stitch2#readme",
+  "bugs": {
+    "url": "https://github.com/ifokeev/stitch2/issues"
+  },
+  "type": "module",
+  "bin": {
+    "stitch2": "dist/cli.js"
+  },
+  "exports": {
+    "./elements": {
+      "types": "./dist/elements.d.ts",
+      "default": "./dist/elements.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "skills",
+    "config.schema.json",
+    "README.md",
+    "LICENSE"
+  ],
+  "engines": {
+    "node": ">=24"
+  },
+  "dependencies": {
+    "@google/design.md": "0.4.0",
+    "@material/material-color-utilities": "0.3.0",
+    "@playwright/test": "1.63.0",
+    "yaml": "2.9.1",
+    "esbuild": "0.28.2"
+  },
+  "keywords": [
+    "design",
+    "design-system",
+    "design-md",
+    "agents",
+    "skills",
+    "canvas",
+    "ui",
+    "stitch",
+    "playwright"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ifokeev/stitch2.git"
+  },
+  "packageManager": "pnpm@10.32.1"
+}