npm - font-lab - Versions diffs - 0.1.0 - Mend

font-lab 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (32) hide show

package/README.md +281 -0
package/analyze.mjs +19 -0
package/analyzer.mjs +431 -0
package/apply-test.mjs +131 -0
package/apply.mjs +22 -0
package/bundle-skill.mjs +20 -0
package/catalog-build.mjs +126 -0
package/catalog.mjs +79 -0
package/codegen.mjs +399 -0
package/curate.mjs +27 -0
package/curator.mjs +92 -0
package/engine.mjs +343 -0
package/font-lab.mjs +129 -0
package/gen-catalog.mjs +32 -0
package/init-test.mjs +52 -0
package/init.mjs +38 -0
package/install.mjs +188 -0
package/loop-test.mjs +119 -0
package/m3-test.mjs +255 -0
package/m4-test.mjs +92 -0
package/m5-test.mjs +142 -0
package/m6-test.mjs +119 -0
package/mcp.mjs +228 -0
package/package.json +79 -0
package/rewire-test.mjs +79 -0
package/rewire.mjs +25 -0
package/screenshot-demo.mjs +42 -0
package/screenshots.mjs +30 -0
package/select.mjs +36 -0
package/skill/font-lab/SKILL.md +75 -0
package/templates/font-lab-panel.tsx +293 -0
package/undo.mjs +19 -0

package/rewire-test.mjs ADDED Viewed

@@ -0,0 +1,79 @@
+// rewire verification — a Jack-shaped project (Tailwind v4 @theme inline + a hand-written
+// `h1 { font-family: var(--font-display) }`) has a DEAD display role; `rewire` points that raw
+// usage at the published leaf var so it renders, leaves @theme alone, clears the dead flag,
+// and is byte-for-byte reversible. Offline.
+import { analyzeProject } from "./analyzer.mjs";
+import { rewireCoverage, undo } from "./codegen.mjs";
+import { writeFileSync, mkdirSync, rmSync, readFileSync } from "node:fs";
+import { fileURLToPath } from "node:url";
+import path from "node:path";
+const HERE = fileURLToPath(new URL("./", import.meta.url));
+const OUT = HERE + "out/";
+const TMP = HERE + ".rewire-tmp/";
+mkdirSync(OUT, { recursive: true });
+const results = [];
+const assert = (n, c, e = "") => { results.push({ name: n, pass: !!c }); console.log((c ? "PASS" : "FAIL").padEnd(5), n, e && !c ? `(${e})` : ""); };
+const LAYOUT = `import { Bricolage_Grotesque, Hanken_Grotesk } from "next/font/google";
+const bricolage = Bricolage_Grotesque({ subsets: ["latin"], variable: "--font-bricolage" });
+const hanken = Hanken_Grotesk({ subsets: ["latin"], variable: "--font-hanken" });
+export default function RootLayout({ children }) {
+  return (<html lang="en"><body className={\`\${bricolage.variable} \${hanken.variable} font-sans\`}>{children}</body></html>);
+}
+`;
+const GLOBALS = `@import "tailwindcss";
+@theme inline {
+  --font-display: var(--font-bricolage), ui-sans-serif, system-ui, sans-serif;
+  --font-sans: var(--font-hanken), ui-sans-serif, system-ui, sans-serif;
+}
+@layer base {
+  h1, h2, h3 { font-family: var(--font-display); }
+  body { @apply bg-white; }
+}
+`;
+const PKG = JSON.stringify({ dependencies: { next: "^15", react: "^19", tailwindcss: "^4.2.0" }, devDependencies: { "@tailwindcss/postcss": "^4" } }, null, 2);
+try {
+  rmSync(TMP, { recursive: true, force: true });
+  const dir = path.join(TMP, "proj");
+  mkdirSync(path.join(dir, "app"), { recursive: true });
+  writeFileSync(path.join(dir, "package.json"), PKG);
+  writeFileSync(path.join(dir, "app/layout.tsx"), LAYOUT);
+  writeFileSync(path.join(dir, "app/globals.css"), GLOBALS);
+  const cssPath = path.join(dir, "app/globals.css");
+  const orig = readFileSync(cssPath, "utf8");
+  const before = analyzeProject(dir);
+  assert("analyzer flags display as dead", before.coverage.deadRoles.includes("display"), before.coverage.deadRoles.join(","));
+  assert("analyzer does NOT flag body (uses utility)", !before.coverage.deadRoles.includes("body"));
+  const r = rewireCoverage(dir);
+  const css = readFileSync(cssPath, "utf8");
+  assert("rewire reports display fixed", r.rewired.some((x) => x.role === "display" && x.to === "--font-bricolage"), JSON.stringify(r.rewired));
+  assert("base rule now uses the leaf var", /h1, h2, h3 \{ font-family: var\(--font-bricolage\); \}/.test(css), css.match(/h1[^}]*}/)?.[0]);
+  assert("@theme definition left intact", /--font-display: var\(--font-bricolage\)/.test(css));
+  assert("did not touch body / --font-sans", /--font-sans: var\(--font-hanken\)/.test(css));
+  const after = analyzeProject(dir);
+  assert("dead flag cleared after rewire", !after.coverage.deadRoles.includes("display"), after.coverage.deadRoles.join(","));
+  undo(dir);
+  assert("undo restores globals byte-identical", readFileSync(cssPath, "utf8") === orig);
+  // no-op when there's nothing dead
+  const r2 = rewireCoverage(dir);
+  assert("re-rewire after undo finds the dead role again", r2.rewired.length >= 1);
+} finally {
+  rmSync(TMP, { recursive: true, force: true });
+}
+const failed = results.filter((r) => !r.pass);
+writeFileSync(OUT + "rewire-report.json", JSON.stringify({ results }, null, 2));
+console.log(`\nrewire: ${results.length - failed.length}/${results.length} assertions passed`);
+if (failed.length) { console.error("FAILED:", failed.map((f) => f.name).join(", ")); process.exit(5); }
+console.log("rewire PASS");

package/rewire.mjs ADDED Viewed

@@ -0,0 +1,25 @@
+#!/usr/bin/env node
+// `font-lab rewire` — fix dead roles (a font declared but not actually rendered, e.g. a
+// heading rule that reads var(--font-display) under @theme inline). Points those raw usages
+// at the published leaf var so the font renders. Reversible via `font-lab undo`.
+//   node cli/rewire.mjs --project <dir>
+import path from "node:path";
+import { rewireCoverage } from "./codegen.mjs";
+const arg = (f, d) => { const i = process.argv.indexOf(f); return i !== -1 && process.argv[i + 1] ? process.argv[i + 1] : d; };
+const project = path.resolve(arg("--project", process.cwd()));
+try {
+  const r = rewireCoverage(project);
+  if (!r.rewired.length) {
+    console.log(`Font Lab — nothing to rewire (${r.note}).`);
+  } else {
+    console.log("Font Lab — rewired dead roles");
+    for (const x of r.rewired) console.log(`  ${x.role.padEnd(8)} var(${x.from}) → var(${x.to})  (${x.count}×)`);
+    console.log(`  edited  ${r.edited.join(", ")}`);
+    console.log(`  backup  ${r.backupDir}  →  \`font-lab undo\` to revert`);
+  }
+} catch (e) {
+  console.error("rewire failed:", e.message);
+  process.exit(1);
+}

package/screenshot-demo.mjs ADDED Viewed

@@ -0,0 +1,42 @@
+// Capture the loop visually: the current state vs a chosen direction, panel in view.
+// Usage: BASE_URL=http://localhost:4331 node cli/screenshot-demo.mjs
+import { chromium } from "playwright";
+import { mkdirSync } from "node:fs";
+import { fileURLToPath } from "node:url";
+const BASE = process.env.BASE_URL || process.argv[2] || "http://localhost:4331";
+const OUT = fileURLToPath(new URL("./out/", import.meta.url));
+mkdirSync(OUT, { recursive: true });
+const browser = await chromium.launch();
+const page = await browser.newPage({ viewport: { width: 1200, height: 1000 }, deviceScaleFactor: 2 });
+await page.goto(BASE + "/", { waitUntil: "domcontentloaded" });
+await page.evaluate(async () => {
+  await document.fonts.ready;
+  return true;
+});
+await page.waitForTimeout(600);
+await page.screenshot({ path: OUT + "loop-current.png" });
+await page.evaluate(() =>
+  document.getElementById("fontlab-panel-host").shadowRoot.querySelector('button[data-fl-id="modern-grotesque"]').click(),
+);
+await page.evaluate(async () => {
+  await document.fonts.ready;
+  return true;
+});
+await page.waitForTimeout(500);
+await page.screenshot({ path: OUT + "loop-modern-grotesque.png" });
+await page.evaluate(() =>
+  document.getElementById("fontlab-panel-host").shadowRoot.querySelector('button[data-fl-id="editorial-serif"]').click(),
+);
+await page.evaluate(async () => {
+  await document.fonts.ready;
+  return true;
+});
+await page.waitForTimeout(500);
+await page.screenshot({ path: OUT + "loop-editorial.png" });
+await browser.close();
+console.log("wrote loop-current / loop-editorial / loop-modern-grotesque .png to cli/out/");

package/screenshots.mjs ADDED Viewed

@@ -0,0 +1,30 @@
+#!/usr/bin/env node
+// `font-lab-screenshots` — HEADLESS pick mode. Drive the live panel through each curated
+// direction and screenshot the running site, so a human with no live browser (web/cloud/phone)
+// can pick from images. Requires `font-lab init` done + your dev server running.
+//
+//   node screenshots.mjs --project <dir> --base http://localhost:3000 [--route /] [--out <dir>]
+import path from "node:path";
+import * as engine from "./engine.mjs";
+const arg = (f, d) => { const i = process.argv.indexOf(f); return i !== -1 && process.argv[i + 1] ? process.argv[i + 1] : d; };
+const project = path.resolve(arg("--project", process.cwd()));
+const baseUrl = arg("--base", arg("--base-url", "http://localhost:3000"));
+const out = arg("--out", undefined);
+const routes = arg("--route", "/").split(",");
+const rel = (p) => path.relative(process.cwd(), p) || ".";
+try {
+  const r = await engine.captureDirections(project, { baseUrl, outDir: out, routes });
+  console.log(`Font Lab — captured ${r.shots.length} preview(s) from ${r.baseUrl}${r.route} → ${rel(r.outDir)}`);
+  for (const s of r.shots) {
+    console.log(`  ${s.error ? "✗" : "✓"} ${s.id.padEnd(22)} ${s.error || rel(s.screenshot)}`);
+  }
+  console.log(`\n  Show these to the human, let them pick an id, then:`);
+  console.log(`    node select.mjs --project ${rel(project)} --direction <id>   &&   node apply.mjs --project ${rel(project)}`);
+  console.log(`\n  Prefer to flip live instead? ${r.live.note}`);
+} catch (e) {
+  console.error("screenshots failed:", e.message);
+  process.exit(1);
+}

package/select.mjs ADDED Viewed

@@ -0,0 +1,36 @@
+#!/usr/bin/env node
+// `font-lab-select` — record the human's pick by direction id (the HEADLESS path: no panel
+// click needed). Writes the same .font-lab/selection.json the live panel writes, so `apply`
+// ships it identically. Supports a mixed pick via per-role flags.
+//
+//   node select.mjs --project <dir> --direction <id>
+//   node select.mjs --project <dir> --direction <id> --display <id> --body <id> --mono <id>
+import path from "node:path";
+import * as engine from "./engine.mjs";
+const arg = (f, d) => { const i = process.argv.indexOf(f); return i !== -1 && process.argv[i + 1] ? process.argv[i + 1] : d; };
+const project = path.resolve(arg("--project", process.cwd()));
+const directionId = arg("--direction", arg("--id", undefined));
+const rel = (p) => path.relative(process.cwd(), p) || ".";
+if (!directionId) {
+  console.error("usage: font-lab-select --project <dir> --direction <id> [--display <id> --body <id> --mono <id>]");
+  process.exit(1);
+}
+const roles = {};
+for (const r of ["display", "body", "mono"]) {
+  const v = arg(`--${r}`, undefined);
+  if (v) roles[r] = v;
+}
+try {
+  const sel = engine.selectDirection(project, { directionId, roles: Object.keys(roles).length ? roles : undefined });
+  console.log(`Font Lab — recorded pick: ${sel.direction.name} (${sel.direction.vibe})`);
+  console.log(`  display ${sel.roles.display.family}   body ${sel.roles.body.family}   mono ${sel.roles.mono.family}`);
+  console.log(`  → ship it:  node apply.mjs --project ${rel(project)}   (reversible: node undo.mjs --project ${rel(project)})`);
+} catch (e) {
+  console.error("select failed:", e.message);
+  process.exit(1);
+}

package/skill/font-lab/SKILL.md ADDED Viewed

@@ -0,0 +1,75 @@
+---
+name: font-lab
+description: >-
+  Use when a user wants to choose, change, compare, or improve the FONTS / typography of
+  their Next.js + Tailwind app ("pick a font", "these fonts look generic/AI-generated",
+  "make the headings nicer", "what typeface should I use", "change the font"). Font Lab shows
+  the user tasteful, ready-to-ship font directions rendered live on their OWN running site,
+  lets the human pick, then ships the exact next/font + Tailwind code — reversibly. The human
+  keeps the taste decision; you do the typing.
+---
+# Font Lab
+A decision surface for typography. AI removed the labor of implementing fonts but deleted the
+**moment of choice** — and taste only happens at the moment of choice. Font Lab re-inserts it:
+the human picks from a curated set rendered on their real site, and you ship what they chose,
+byte-for-byte. **You never auto-pick a font for the user.** Your job is to curate the menu and
+ship the order.
+## The loop
+Use the `font-lab` MCP tools (or the CLIs in `cli/`) in this order:
+1. **Analyze** — `font_lab_analyze({ projectDir })`. Learn the current fonts, wiring, and any
+   coverage warnings. Do this first. If it reports the project is out-of-branch (not App
+   Router + Tailwind v4 + CSS-variable wiring), tell the user what's missing instead of
+   pushing ahead.
+2. **Decide the menu** — two ways, your call:
+   - **Default (free):** `font_lab_curate({ projectDir, vibe? })` → ~5 tasteful directions.
+   - **Take the wheel:** when the user asked for something specific, `font_lab_list_catalog({ role, tag })`
+     to browse, then `font_lab_compose_directions({ directions: [...] })` to build your own.
+     Every family must be a catalog member — that's what keeps preview == ship.
+   Mix freely: start from `curate`, swap a direction or two with composed ones.
+3. **Set up the preview** — `font_lab_init({ projectDir, vibe? })`. This self-hosts the
+   fonts, installs the dev panel, and mounts it (dev-only). If `analyze` flagged a dead role and
+   the user wants it to change, also call `font_lab_rewire_dead_roles({ projectDir })`.
+   (Already initialized and just changing the options? `font_lab_prepare_preview` rebuilds the
+   bundles without re-mounting.)
+4. **The choosing moment** — pick the path that fits where you're running. Start the dev server
+   in the background first (`<dev command>`); note its URL (e.g. `http://localhost:3000`).
+   - **Live (best — when the human has a real browser on this machine):** you're in a local
+     terminal / IDE (Mac or Linux terminal, VS Code, Cursor, the Claude Code IDE extension).
+     Also start the pick endpoint (`node cli/font-lab.mjs --project <dir>`), then tell the human
+     to open their site and flip the panel (← →, `↑↓`+`[ ]` to mix, `B` for before/after) and
+     **pick one**. Read the pick with `font_lab_read_pick` (poll until it returns a selection).
+   - **Headless (when there's NO live browser for the human — a web/cloud session, or they're on
+     a phone):** call `font_lab_screenshot_directions({ projectDir, baseUrl })`. It drives the
+     real panel and screenshots the site in each direction (faithful to what ships). **Show those
+     images to the human** and ask them to pick an id. Record it with
+     `font_lab_select({ projectDir, directionId })` (supports a mixed pick via `roles`). You are
+     still only preparing the menu — **the human makes the call.**
+   Always offer the live escape hatch: if the screenshots aren't enough and the human wants to
+   flip/mix/compare themselves, give them `font_lab_live_instructions({ projectDir })` —
+   ready-to-run commands to launch the full editor locally (works in any terminal / IDE / Cursor).
+5. **Ship it** — once a selection exists (from either path), `font_lab_apply({ projectDir })`.
+   Reversible via `font_lab_undo`; remove the panel scaffolding with `font_lab_uninit`.
+## Rules
+- **The human picks.** Never choose the final font yourself. Prepare options; let them decide.
+- **Catalog-only.** Compose freely, but only from catalog fonts — preview fidelity and the
+  CLS-safe ship both depend on it. `compose_directions` enforces this and suggests alternates.
+- **Be honest about coverage.** If `analyze` flags a dead role (a font declared but not actually
+  rendered, common with Tailwind v4 `@theme inline` + raw `var(--font-*)`), tell the user a
+  swap there won't be visible until it's rewired — don't pretend it worked. Offer
+  `font_lab_rewire_dead_roles` to fix it (points the raw usage at the published leaf var so the
+  font renders); it's reversible via `font_lab_undo`.
+- **Reversible.** Every apply backs up first; offer `undo` if they don't love it.
+- **Headless needs Chromium.** `font_lab_screenshot_directions` uses Playwright (present in Claude
+  Code on the web; elsewhere `npm i -D playwright && npx playwright install chromium`). If it isn't
+  available, don't fake a pick — hand the human `font_lab_live_instructions` and let them choose in
+  a real browser. The live, local path is always the highest-fidelity option.

package/templates/font-lab-panel.tsx ADDED Viewed

@@ -0,0 +1,293 @@
+"use client";
+// Font Lab dev panel — portable build, installed by `font-lab init` into a real project.
+// Identical UX to the fixture panel (presets, mixed picks, before/after, pin, multi-route),
+// but it applies the swap through the analyzer's `wiring`: for each role it overrides the
+// project's OWN leaf next/font variable (e.g. --font-bricolage) on the element next/font uses
+// (<html> or <body>). That's what makes the live preview honest on any site — it moves the
+// exact variable that ship rewrites. A role with no wiring (a font the site doesn't route
+// through a variable) is shown as not-previewable rather than faked.
+//
+// Dev-only (mounted behind a NODE_ENV guard in layout). Shadow-DOM isolated.
+import { useEffect } from "react";
+import { catalogFontFaceCss, directions, replaces, target, wiring, type Direction } from "./catalog.generated";
+const ENDPOINT = "http://localhost:7777";
+const STORE_KEY = "fontlab.working.v1";
+const ROLES = ["display", "body", "mono"] as const;
+type Role = (typeof ROLES)[number];
+const LABEL: Record<Role, string> = { display: "Display", body: "Body", mono: "Mono" };
+type Cand = { family: string; stack: string; weights: number[] };
+const wir = (wiring || {}) as Partial<Record<Role, { var: string; el: string } | null>>;
+function candidatesFor(role: Role): Cand[] {
+  const seen = new Set<string>();
+  const out: Cand[] = [];
+  for (const d of directions) {
+    const r = d.roles[role];
+    if (!seen.has(r.family)) {
+      seen.add(r.family);
+      out.push({ family: r.family, stack: r.stack, weights: r.weights });
+    }
+  }
+  return out;
+}
+function currentLabel(): string {
+  const fams = [replaces?.display, replaces?.body].filter(Boolean) as string[];
+  const uniq = [...new Set(fams)];
+  return uniq.length ? `Current — ${uniq.join(" / ")}` : "Current";
+}
+export function FontLabDevPanel() {
+  useEffect(() => {
+    const root = document.documentElement;
+    const CANDS: Record<Role, Cand[]> = { display: candidatesFor("display"), body: candidatesFor("body"), mono: candidatesFor("mono") };
+    const elFor = (role: Role) => (wir[role]?.el === "body" ? document.body : document.documentElement);
+    const canSwap = (role: Role) => !!wir[role];
+    const FACE_ID = "fontlab-catalog-faces";
+    if (!document.getElementById(FACE_ID)) {
+      const styleEl = document.createElement("style");
+      styleEl.id = FACE_ID;
+      styleEl.textContent = catalogFontFaceCss;
+      document.head.appendChild(styleEl);
+    }
+    const entries = [{ id: "current", dir: null as Direction | null }, ...directions.map((d) => ({ id: d.id, dir: d }))];
+    const roleSel: Record<Role, number> = { display: -1, body: -1, mono: -1 };
+    let cursor = 0;
+    let focus: Role = "display";
+    let comparing = false;
+    const pins: (Record<Role, number> | null)[] = [null, null];
+    let showingPin: 0 | 1 | null = null;
+    const setRolesFromEntry = (i: number) => {
+      const e = entries[i];
+      for (const role of ROLES) {
+        if (!e.dir) roleSel[role] = -1;
+        else roleSel[role] = Math.max(0, CANDS[role].findIndex((c) => c.family === e.dir!.roles[role].family));
+      }
+    };
+    let restored = false;
+    try {
+      const saved = JSON.parse(sessionStorage.getItem(STORE_KEY) || "null");
+      if (saved && saved.roles && ROLES.some((role) => saved.roles[role])) {
+        for (const role of ROLES) {
+          const idx = saved.roles[role] ? CANDS[role].findIndex((c) => c.family === saved.roles[role]) : -1;
+          roleSel[role] = idx;
+        }
+        cursor = Math.max(0, entries.findIndex((e) => e.id === saved.cursorId));
+        restored = true;
+      }
+    } catch {}
+    const host = document.createElement("div");
+    host.id = "fontlab-panel-host";
+    host.style.cssText = "position:fixed;right:16px;bottom:16px;z-index:2147483647;";
+    document.body.appendChild(host);
+    const shadow = host.attachShadow({ mode: "open" });
+    shadow.innerHTML = `
+      <style>
+        :host { all: initial; }
+        .panel { font-family: ui-sans-serif, system-ui, sans-serif; background:#111114; color:#fff; border-radius:14px; padding:14px; width:288px; box-shadow:0 12px 40px rgba(0,0,0,.45); }
+        .title { font-size:11px; letter-spacing:.12em; text-transform:uppercase; opacity:.55; margin-bottom:9px; }
+        .chips { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:10px; }
+        .chip { padding:5px 8px; border:0; border-radius:7px; background:#27272a; color:#fff; font-size:11.5px; cursor:pointer; }
+        .chip[aria-pressed="true"] { background:#2563eb; }
+        .chip.cur[aria-pressed="true"] { background:#3f3f46; }
+        .roles { display:flex; flex-direction:column; gap:4px; margin-bottom:9px; }
+        .role { display:flex; align-items:center; gap:6px; background:#1c1c20; border-radius:8px; padding:4px 6px; }
+        .role[data-focus="true"] { outline:2px solid #2563eb; }
+        .role[data-off="true"] { opacity:.45; }
+        .role .lab { font-size:10px; text-transform:uppercase; letter-spacing:.08em; opacity:.5; width:48px; }
+        .role .fam { flex:1; font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
+        .role button { border:0; background:#3f3f46; color:#fff; border-radius:6px; width:22px; height:22px; cursor:pointer; font-size:13px; line-height:1; }
+        .role button:disabled { opacity:.3; cursor:not-allowed; }
+        .rationale { font-size:11px; line-height:1.4; opacity:.7; min-height:30px; margin:2px 2px 9px; }
+        .row { display:flex; gap:6px; align-items:center; }
+        .pick { flex:1; padding:9px 11px; border:0; border-radius:9px; background:#16a34a; color:#fff; font-size:13px; font-weight:600; cursor:pointer; }
+        .pick[disabled] { background:#3f3f46; color:#a1a1aa; cursor:not-allowed; }
+        .mini { padding:9px 9px; border:0; border-radius:9px; background:#27272a; color:#fff; font-size:12px; cursor:pointer; white-space:nowrap; }
+        .mini[aria-pressed="true"] { background:#a16207; }
+        .status { font-size:11px; opacity:.75; margin-top:8px; min-height:14px; }
+        .hint { font-size:9.5px; opacity:.4; margin-top:6px; line-height:1.5; }
+        kbd { background:#27272a; border-radius:3px; padding:0 3px; font-size:9px; }
+      </style>
+      <div class="panel" role="group" aria-label="Font Lab">
+        <div class="title">Font Lab · build your type</div>
+        <div class="chips" id="chips"></div>
+        <div class="roles" id="roles"></div>
+        <div class="rationale" id="rationale"></div>
+        <div class="row">
+          <button class="pick" data-fl-action="pick">Pick</button>
+          <button class="mini" data-fl-action="compare" title="Before / after (B)">⇄</button>
+          <button class="mini" data-fl-action="pin" title="Pin to compare (P)">📌</button>
+        </div>
+        <div class="status" id="status"></div>
+        <div class="hint"><kbd>← →</kbd> direction · <kbd>↑↓</kbd> role · <kbd>[ ]</kbd> swap · <kbd>B</kbd> before/after · <kbd>P</kbd>/<kbd>Space</kbd> pin · <kbd>↵</kbd> pick</div>
+      </div>`;
+    const chipsEl = shadow.getElementById("chips")!;
+    const rolesEl = shadow.getElementById("roles")!;
+    const rationaleEl = shadow.getElementById("rationale")!;
+    const statusEl = shadow.getElementById("status")!;
+    const pickBtn = shadow.querySelector<HTMLButtonElement>('[data-fl-action="pick"]')!;
+    const cmpBtn = shadow.querySelector<HTMLButtonElement>('[data-fl-action="compare"]')!;
+    const pinBtn = shadow.querySelector<HTMLButtonElement>('[data-fl-action="pin"]')!;
+    entries.forEach((e, i) => {
+      const b = document.createElement("button");
+      b.className = "chip" + (e.dir ? "" : " cur");
+      b.dataset.flId = e.id;
+      b.textContent = e.dir ? e.dir.name : "Current";
+      b.addEventListener("click", () => selectPreset(i));
+      chipsEl.appendChild(b);
+    });
+    const roleFamEls: Record<Role, HTMLElement> = {} as any;
+    const roleRowEls: Record<Role, HTMLElement> = {} as any;
+    for (const role of ROLES) {
+      const row = document.createElement("div");
+      row.className = "role";
+      row.dataset.role = role;
+      row.dataset.off = String(!canSwap(role));
+      row.innerHTML = `<span class="lab">${LABEL[role]}</span><span class="fam" data-fl-fam="${role}"></span>
+        <button data-fl-dec="${role}">‹</button><button data-fl-inc="${role}">›</button>`;
+      row.addEventListener("click", () => { focus = role; render(); });
+      row.querySelector(`[data-fl-dec="${role}"]`)!.addEventListener("click", (ev) => { ev.stopPropagation(); cycleRole(role, -1); });
+      row.querySelector(`[data-fl-inc="${role}"]`)!.addEventListener("click", (ev) => { ev.stopPropagation(); cycleRole(role, +1); });
+      rolesEl.appendChild(row);
+      roleFamEls[role] = row.querySelector(`[data-fl-fam="${role}"]`)!;
+      roleRowEls[role] = row;
+    }
+    const effRoles = (): Record<Role, number> => (showingPin !== null && pins[showingPin] ? pins[showingPin]! : roleSel);
+    function applyToPage() {
+      const er = effRoles();
+      for (const role of ROLES) {
+        if (!canSwap(role)) continue;
+        const idx = comparing ? -1 : er[role];
+        if (idx < 0) elFor(role).style.removeProperty(wir[role]!.var);
+        else elFor(role).style.setProperty(wir[role]!.var, CANDS[role][idx].stack);
+      }
+    }
+    const trioFamilies = (er = roleSel) => ROLES.map((role) => (er[role] < 0 ? null : CANDS[role][er[role]].family));
+    function matchedDirection(er = roleSel): Direction | null {
+      const fams = trioFamilies(er);
+      if (fams.some((f) => f === null)) return null;
+      return directions.find((d) => ROLES.every((role, i) => d.roles[role].family === fams[i])) || null;
+    }
+    function activeId(): string {
+      if (comparing) return "current";
+      const er = effRoles();
+      if (ROLES.every((role) => er[role] < 0)) return "current";
+      return matchedDirection(er)?.id ?? "mixed";
+    }
+    function persist() {
+      try {
+        const fams = trioFamilies(roleSel);
+        sessionStorage.setItem(STORE_KEY, JSON.stringify({ cursorId: entries[cursor]?.id, roles: { display: fams[0], body: fams[1], mono: fams[2] } }));
+      } catch {}
+    }
+    function render() {
+      applyToPage();
+      const id = activeId();
+      root.setAttribute("data-fontlab-active", id);
+      const onCurrent = ROLES.every((role) => roleSel[role] < 0);
+      chipsEl.querySelectorAll(".chip").forEach((c) => c.setAttribute("aria-pressed", String((c as HTMLElement).dataset.flId === id)));
+      for (const role of ROLES) {
+        const idx = roleSel[role];
+        roleFamEls[role].textContent = !canSwap(role) ? "— not wired —" : idx < 0 ? "— current —" : CANDS[role][idx].family;
+        roleRowEls[role].dataset.focus = String(role === focus);
+        roleRowEls[role].querySelectorAll("button").forEach((b) => ((b as HTMLButtonElement).disabled = onCurrent || !canSwap(role)));
+      }
+      const md = matchedDirection();
+      rationaleEl.textContent = comparing
+        ? `Before: ${currentLabel().replace(/^Current — /, "")}. Press B to flip back.`
+        : onCurrent
+          ? "Flip to a direction (→), then cycle any role to mix. Renders on your real site."
+          : md
+            ? md.rationale
+            : `Mixed — ${trioFamilies().filter(Boolean).join(" / ")}.`;
+      cmpBtn.setAttribute("aria-pressed", String(comparing));
+      const pinned = pins.filter(Boolean).length;
+      pinBtn.textContent = pinned ? `📌${pinned}` : "📌";
+      pinBtn.setAttribute("aria-pressed", String(showingPin !== null));
+      pickBtn.disabled = onCurrent && showingPin === null;
+      persist();
+    }
+    function selectPreset(i: number) { cursor = Math.max(0, Math.min(entries.length - 1, i)); comparing = false; showingPin = null; setRolesFromEntry(cursor); statusEl.textContent = ""; render(); }
+    function cycleRole(role: Role, dir: number) {
+      if (!canSwap(role) || ROLES.every((r) => roleSel[r] < 0)) return;
+      focus = role; comparing = false; showingPin = null;
+      const n = CANDS[role].length;
+      roleSel[role] = ((roleSel[role] < 0 ? 0 : roleSel[role]) + dir + n) % n;
+      statusEl.textContent = ""; render();
+    }
+    function moveFocus(dir: number) { focus = ROLES[(ROLES.indexOf(focus) + dir + ROLES.length) % ROLES.length]; render(); }
+    function toggleCompare() { if (ROLES.every((r) => roleSel[r] < 0)) return; comparing = !comparing; render(); }
+    function pin() {
+      if (ROLES.every((r) => roleSel[r] < 0)) return;
+      const slot = pins[0] === null ? 0 : pins[1] === null ? 1 : 0;
+      pins[slot] = { ...roleSel };
+      statusEl.textContent = `Pinned ${slot === 0 ? "A" : "B"}${pins[0] && pins[1] ? " — Space to compare" : ""}`; render();
+    }
+    function togglePins() { if (!(pins[0] && pins[1])) return; showingPin = showingPin === 0 ? 1 : 0; comparing = false; statusEl.textContent = `Showing ${showingPin === 0 ? "A" : "B"}`; render(); }
+    async function pick() {
+      const er = effRoles();
+      if (ROLES.every((role) => er[role] < 0)) { statusEl.textContent = "Flip to a direction first."; return; }
+      const roleObj = (role: Role) => {
+        const idx = er[role];
+        const c = idx < 0 ? null : CANDS[role][idx];
+        return c ? { family: c.family, source: "google", weights: c.weights } : { family: replaces?.[role] ?? null, source: "current", weights: [] };
+      };
+      const md = matchedDirection(er);
+      const fams = ROLES.map((r) => roleObj(r).family);
+      const direction = md
+        ? { id: md.id, name: md.name, vibe: md.vibe, rationale: md.rationale }
+        : { id: "mixed", name: "Mixed", vibe: "mixed", rationale: `Custom pairing — ${fams.filter(Boolean).join(" / ")}.` };
+      const selection = { version: 1, pickedAt: new Date().toISOString(), direction, roles: { display: roleObj("display"), body: roleObj("body"), mono: roleObj("mono") }, replaces, target };
+      statusEl.textContent = "Saving…";
+      try {
+        const res = await fetch(ENDPOINT + "/select", { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify(selection) });
+        statusEl.textContent = res.ok ? `Picked ✓ ${direction.name}` : `Error ${res.status}`;
+        root.setAttribute("data-fontlab-picked", direction.id);
+      } catch {
+        statusEl.textContent = "No endpoint on :7777 — run `font-lab`";
+      }
+    }
+    pickBtn.addEventListener("click", pick);
+    cmpBtn.addEventListener("click", toggleCompare);
+    pinBtn.addEventListener("click", pin);
+    const onKey = (e: KeyboardEvent) => {
+      const t = e.target as HTMLElement | null;
+      if (t && (t.tagName === "INPUT" || t.tagName === "TEXTAREA" || t.isContentEditable)) return;
+      const k = e.key;
+      if (k === "ArrowRight") { e.preventDefault(); selectPreset(cursor + 1); }
+      else if (k === "ArrowLeft") { e.preventDefault(); selectPreset(cursor - 1); }
+      else if (k === "ArrowDown") { e.preventDefault(); moveFocus(1); }
+      else if (k === "ArrowUp") { e.preventDefault(); moveFocus(-1); }
+      else if (k === "]") { e.preventDefault(); cycleRole(focus, 1); }
+      else if (k === "[") { e.preventDefault(); cycleRole(focus, -1); }
+      else if (k === "b" || k === "B") { e.preventDefault(); toggleCompare(); }
+      else if (k === "p" || k === "P") { e.preventDefault(); pin(); }
+      else if (k === " ") { e.preventDefault(); togglePins(); }
+      else if (k === "Enter") { e.preventDefault(); void pick(); }
+    };
+    document.addEventListener("keydown", onKey);
+    if (restored) render();
+    else selectPreset(0);
+    return () => { document.removeEventListener("keydown", onKey); host.remove(); };
+  }, []);
+  return null;
+}

package/undo.mjs ADDED Viewed

@@ -0,0 +1,19 @@
+#!/usr/bin/env node
+// `font-lab undo` — restore the files Font Lab last edited, from the backup-first snapshot.
+import path from "node:path";
+import { undo } from "./codegen.mjs";
+const arg = (f, d) => {
+  const i = process.argv.indexOf(f);
+  return i !== -1 && process.argv[i + 1] ? process.argv[i + 1] : d;
+};
+const project = path.resolve(arg("--project", process.cwd()));
+try {
+  const r = undo(project);
+  for (const w of r.warnings) console.warn(`  ! ${w}`);
+  console.log(`Font Lab — reverted ${r.runId}; restored ${r.restored.join(", ")}`);
+} catch (e) {
+  console.error("undo failed:", e.message);
+  process.exit(1);
+}