partforge 0.73.1 → 0.74.0

package/bin/cli.js

@@ -9,6 +9,7 @@ import { pathToFileURL } from "node:url";
 import { resolve, dirname } from "node:path";
 import { writeFileSync, mkdirSync } from "node:fs";
 import { detectBackend } from "../src/framework/backend-select.js";
+import { fontsFor } from "../src/framework/fonts.js";
 import { viewAnimations, evaluate, cueAt } from "../src/framework/animation.js";
 import { bootOcctKernel } from "../src/testing/occt.js";
 import { bootManifoldKernel } from "../src/testing/manifold.js";
@@ -78,9 +79,13 @@ async function loadPart(partPath, usage) {
 
 // Pass the part's declared fonts through, mirroring the worker path (jobs.js) —
 // otherwise a part using a named font builds in the browser but dies headlessly
-// with `text2d: unknown font …`.
-const bootKernel = (part) => {
-  const opts = { fonts: part.fonts, imports: part.imports };
+// with `text2d: unknown font …`. A function-form `fonts` is resolved against
+// the CLI's base params; see "CLI limitation" in the design doc — a verify case
+// or animation frame that CHANGES the font param still builds with the
+// base-params face, because the kernel is booted once.
+const bootKernel = (part, params = {}) => {
+  const p = { ...(part.defaults ?? {}), ...params };
+  const opts = { fonts: fontsFor(part, p), imports: part.imports };
   const backend = process.env.PARTFORGE_BACKEND || detectBackend(part); // env: crash()'s NEEDS_OCCT retry
   return backend === "occt" ? bootOcctKernel(opts) : bootManifoldKernel(opts);
 };
@@ -238,7 +243,7 @@ const commands = {
         anim = byView.get(animView).find((x) => x.name === flags.animation);
       }
 
-      const kernel = await bootKernel(part);
+      const kernel = await bootKernel(part, baseParams);
 
       if (anim === null) {
         const files = await renderViews(kernel, part, view, { views, out: outDir, params: baseParams });

package/docs/AUTHORING-PARTS.md

@@ -72,7 +72,7 @@ export default {
   meta: { title, units, background? },     // title string; units e.g. "mm"; background = 0xRRGGBB scene colour
   parameters,                              // the control-panel schema (array of sections — see below)
   defaults,                                // flat { paramKey: value } — seeds params + control values
-  fonts?,                                  // { name: source } — fonts a part's k.text2d() needs; framework preloads before build (see below)
+  fonts?,                                  // { name: source } — or (p) => ({ name: source }) when a control drives the typeface
   imports?,                                // { name: source } — STEP/STL/3MF files a part's k.import() needs; same preload timing as fonts (see below)
   derive?,                                 // (p) => d, or { group: (p, d) => {…}, … } — dependent values computed once per build
   parts: {                                 // named sub-parts; each builds ONE solid
@@ -631,6 +631,7 @@ Every control accepts `key`, `type`, `label`, `description`, `hidden`, `when` an
 | `"checkbox"` | an on/off box: ticked writes `on`, cleared writes `0` | `on` (default `1`) |
 | `"select"` | a dropdown | `options` |
 | `"radio"` | a segmented button row | `options` |
+| `"font"` | a typeface picker, or a URL field with no catalog | `allow`, `preview` |
 
 Numeric controls always show the number box: drag the slider *or* type an exact
 value. Typed values may be finer than `step` and clamp to `[min, max]` on commit.
@@ -645,6 +646,32 @@ each entry is both value and label — or the long form
 types, `12` is not `"12"`). An option's `description` surfaces as a hover tooltip
 on that one option, not as a ⓘ popover.
 
+**`allow` and `preview`** (font) configure the typeface control. `allow` lists the
+source kinds a **param-supplied** value may use — what the picker writes, or what
+arrives in a share link:
+
+| value | accepts |
+|---|---|
+| `"https"` | any `https:` URL. **The default** — omitting `allow` means `["https"]` |
+| `"gstatic"` | `https://fonts.gstatic.com` only (hostname-exact: a lookalike host is refused) |
+| `"asset"` | a `pfc-asset://` token — a font the host has stored for this part |
+
+Name as many as apply (`allow: ["gstatic", "asset"]`); anything unnamed is refused,
+which is how `http:`, `file:`, `data:` and `blob:` are closed off. The check is
+deliberately narrow — **it applies only to values that arrive as params.** A source
+you write into `fonts` yourself is code, not user input, and stays unrestricted:
+`fonts: { label: "https://cdn.example.com/Courier-Prime.ttf" }` keeps working
+whatever `allow` says. A refused param falls back to `defaults[key]`, and the build
+carries a warning naming the key rather than failing (lint's `font-source-scheme`
+catches the case where that default is itself refused). `allow` gates what the
+**picker fetches** too: a family whose files it refuses is dropped from the list
+rather than offered, and neither that family's name-preview face nor its weight
+samples are ever requested.
+
+`preview` is the sample string the picker's weight list renders each face in — set
+it when the generic sample shows the wrong glyphs (`preview: "0123456789"` for a
+part that letters digits). Defaults to `Hamburgefonstiv 0123`.
+
 **`"readout"` is not a control.** It has no `key`, never writes `params`, and can
 never be a preset target. It displays one output of `derive()`, named by
 `derivedKey`, refreshed on every parameter change; `unit` is appended to numeric
@@ -1318,6 +1345,24 @@ fonts: {
 
 Reference a font by name: `k.text2d("text", { font: "heading" })`. Omit the `font` option to use the bundled **Roboto** (Regular, SIL OFL 1.1) default.
 
+**Making the typeface a parameter.** Give `fonts` a function of params instead of a
+static object, and a `type: "font"` control can drive which face `text2d` uses —
+`src/parts/nameplate.js` is the reference:
+
+```js
+{ key: "face", type: "font", label: "Typeface" },   // in `parameters`
+fonts: (p) => (p.face ? { face: p.face } : {}),     // a function, not a static map
+k.text2d(p.label, { font: "face" }),                // only when p.face is set
+```
+
+An empty `face` declares nothing — `fonts` returns `{}`, and `text2d` falls back to
+the bundled Roboto — so the part still builds with no network access. A part with a
+fixed typeface needs none of this: a plain `{ name: source }` object is fine.
+
+The control's `allow` list bounds what a picked — or share-link-supplied — value may
+be, and defaults to `["https"]`; see the control-types table above. It does **not**
+constrain sources you declare yourself.
+
 **Build-time & curve semantics:**
 
 `text2d` is a **build-time operation** (not `derive()`), and **the curve representation differs by backend:**
@@ -1548,6 +1593,18 @@ returns instead:
 Pass `onDownload({ data, filename, mime })` to `mount()` to receive the exported bytes
 yourself (e.g. to download from a different origin) instead of partforge's own DOM download.
 
+- `fontCatalog` — a provider backing every `type: "font"` control in the part:
+
+  - `search(query, { limit }) → Promise<FontFamily[]>`, where a `FontFamily` is
+    `{ id, family, category, variants: [{ variant, label, url, bytes }],
+    menuUrl }`. `url` is what the picker writes into `params`; `menuUrl` is a
+    name-only subset used to draw the list row.
+  - `describe(source) → { family, variant } | null` — optional reverse lookup so
+    the closed control can name a face whose URL carries a hashed filename.
+
+  partforge ships no provider — a host supplies one, and without it every font
+  control renders as a URL field.
+
 **Showcase capture (the mount handle).** The handle can also render the user's *current*
 framing offscreen at a resolution independent of the window size and devicePixelRatio —
 for gallery/preview images, where grabbing the live canvas would be capped at the viewer
@@ -1983,6 +2040,15 @@ runtime authority for those cases), `reference-unknown` (a sub-part's
 `refVolumeDeltaPct`, `refBboxDelta` — but the sub-part declares no `reference`,
 so the deviation gate always reports status "skip") (warning).
 
+**Font controls** — `font-control-not-in-fonts` (a `type: "font"` control's
+`key` is not read by a function-form `fonts` — a static `fonts` object or a
+missing `fonts` field both provably can't depend on a param, so the picker
+changes a param and nothing else happens; the message names which of the two
+it is) (error); `font-source-scheme` (`defaults` holds a value for a font
+control that the control's own `allow` list would refuse — at build time it's
+swapped for `defaults[key]`, i.e. itself, so the part boots with no usable
+font; use a source `allow` accepts, or widen `allow`) (warning).
+
 A rule that itself throws yields an `internal-rule-error` **warning** and the run
 continues: `lintPart` never throws and never blocks a part because of a linter bug.
 
@@ -2135,6 +2201,14 @@ unverified.
 `">=[x,y,z]"` where `*` skips an axis. The parser is strict — a malformed assertion
 fails loudly.
 
+**A part whose typeface is a parameter needs band assertions, not points.** Glyph
+advance widths differ by family, so a `text2d` sub-part's `bbox`/`volume` shifts with
+the picked face even when every other param is unchanged. Write `verify` bounds wide
+enough to hold across the fonts your `allow` list admits (a range, or `<=`/`>=`,
+rather than exact equality). `verify` runs against `defaults`, which is stable — the
+nameplate ships `face: ""` (the bundled Roboto), so its own `verify` cases don't
+need this, but a part whose default already names a specific face does.
+
 ```js
 verify: { expect: {
   stand: { boundsMin: ">=[0,0,0]", centerOfMass: "<=[*,*,25]" },   // sits in +octant, mass kept low

package/docs/KERNEL-CONTRACT.md

@@ -463,7 +463,9 @@ sub-part and attaches `warnings: [{part, message}]` to the `meshes` /
 `capture-meshes` result when any were recorded, so a host can tell its user (or its
 agent) that the part on screen is missing a feature it asked for. A skipped op still
 console.warns as before; the channel is additive. Hosts that ignore the field see
-exactly the old behavior.
+exactly the old behavior. The same array also carries *job-level* notices that
+belong to no single sub-part — currently a font source refused by its control's
+`allow` list — as entries with `part: null`.
 
 ## Shape2D (2-D booleans)
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "partforge",
-  "version": "0.73.1",
+  "version": "0.74.0",
   "description": "Turn a declarative part definition into a parametric-CAD web app (three.js + Manifold/Replicad). Requires a Vite-based consumer.",
   "type": "module",
   "license": "MIT",

package/src/framework/app.css

@@ -198,6 +198,19 @@ textarea.text-input { min-height: 64px; resize: vertical; }
 .text-input:focus { outline: none; border-color: var(--pf-accent);
   box-shadow: 0 0 0 3px color-mix(in oklab, var(--pf-accent) 35%, transparent); }
 
+/* the `type: "font"` control — a button that shows the current face IN it */
+.font-btn { width: 100%; display: flex; align-items: center; gap: 8px; text-align: left; cursor: pointer;
+  background: var(--pf-input-bg); color: var(--pf-text-strong);
+  border: 1px solid var(--pf-border); border-radius: var(--pf-radius-control); padding: 7px 9px; }
+.font-btn:hover { border-color: color-mix(in oklab, var(--pf-accent) 45%, var(--pf-border)); }
+.font-btn:focus-visible { outline: none; border-color: var(--pf-accent);
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--pf-accent) 35%, transparent); }
+.font-btn .fname { flex: 1; min-width: 0; font-size: 15px; line-height: 1.25;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.font-btn .fvar { flex: none; font: 10px/1 var(--pf-mono); color: var(--pf-muted); }
+.font-btn .caret { flex: none; opacity: .5; }
+.text-input.warn { border-color: var(--pf-err); color: var(--pf-err); }
+
 /* crafted range slider — hairline track + CAD-blue handle (the panel's signature control) */
 input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 18px; margin: 0; background: transparent; cursor: pointer; }
 input[type="range"]::-webkit-slider-runnable-track { height: 3px; border-radius: 2px; background: var(--pf-border); }
@@ -750,3 +763,102 @@ button.action:focus-visible, .adv-toggle:focus-visible, .sec-title:focus-visible
   100% { outline: 3px solid transparent; }
 }
 @media (prefers-reduced-motion: reduce) { .pf-param-flash { animation: none; } }
+
+/* ---- the `type: "font"` picker -------------------------------------------
+   A TAKEOVER panel: it covers the rail on desktop and the single visible pane
+   below the narrow breakpoint, rather than expanding inline under the control.
+   Choosing a typeface is a browse task, not a slider nudge — it earns the whole
+   surface, and one layout for both widths removes a mode from the widget.
+   Ported from spike/font-picker.html; the sizes, timings and densities here
+   were settled against that running build (design spec §6). */
+
+/* The rail is the picker's containing block; nothing else in it is positioned. */
+.pf-rail { position: relative; }
+
+/* `position: absolute` is what places the takeover — and, just as load-bearing,
+   what makes .picker a POSITIONED box for the panes below, which are inset: 0
+   against it. Without that, the variants pane escapes the picker and fills the
+   rail (an hour of the spike went to exactly this). */
+.picker {
+  position: absolute; inset: 0; z-index: 20;
+  display: flex; flex-direction: column;
+  background: var(--pf-surface); color: var(--pf-text);
+}
+
+.pk-head { flex: none; padding: 10px var(--pf-rail-pad) 8px;
+  border-bottom: 1px solid var(--pf-border); background: var(--pf-surface); }
+.pk-titlebar { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
+.pk-titlebar b { flex: 1; min-width: 0; font: 600 11px/1 var(--pf-sans);
+  letter-spacing: .04em; text-transform: uppercase; color: var(--pf-muted);
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.pk-x { border: 0; background: transparent; color: var(--pf-muted); cursor: pointer;
+  padding: 2px 4px; font-size: 15px; line-height: 1; }
+.pk-x:hover { color: var(--pf-text); }
+
+.pk-search { width: 100%; font: 12px/1.4 var(--pf-mono); background: var(--pf-input-bg);
+  color: var(--pf-text-strong); border: 1px solid var(--pf-border);
+  border-radius: var(--pf-radius-control); padding: 6px 8px 6px 26px;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Ccircle cx='5' cy='5' r='3.4' fill='none' stroke='%238b8b94' stroke-width='1.3'/%3E%3Cpath d='M7.6 7.6 L10.5 10.5' stroke='%238b8b94' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E");
+  background-repeat: no-repeat; background-position: 8px center; }
+.pk-search:focus { outline: none; border-color: var(--pf-accent);
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--pf-accent) 35%, transparent); }
+
+/* The virtualized list: .pk-spacer carries the full scroll height and each row
+   is absolutely placed at translateY(i * 44px). */
+.pk-list { flex: 1; overflow-y: auto; overscroll-behavior: contain; position: relative; }
+.pk-spacer { position: relative; width: 100%; }
+.pk-row { position: absolute; left: 0; right: 0; display: flex; align-items: center; gap: 8px;
+  padding: 0 var(--pf-rail-pad); cursor: pointer;
+  border-bottom: 1px solid color-mix(in oklab, var(--pf-border) 45%, transparent); }
+.pk-row:hover { background: var(--pf-surface-2); }
+.pk-row.sel { background: var(--pf-accent-soft); box-shadow: inset 2px 0 0 var(--pf-accent); }
+.pk-main { flex: 1; min-width: 0; }
+/* 16px, and the row height is reserved by the virtualizer, so a face arriving
+   late swaps glyphs in place instead of shifting the list. */
+.pk-face { font-size: 16px; line-height: 1.15; color: var(--pf-text-strong);
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.pk-sub { font: 9px/1.3 var(--pf-mono); color: var(--pf-hint);
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.pk-meta { flex: none; font: 9px/1 var(--pf-mono); color: var(--pf-hint); }
+/* A row whose own face has not arrived yet reads as pending rather than wrong. */
+.pk-row.loading .pk-face { opacity: .38; }
+
+/* Two panes sliding inside .pk-panes: browse, then that family's weights. The
+   footer sits BELOW this box rather than under it, so Done stays reachable from
+   either pane — picking a weight never has to exit to commit. */
+.pk-panes { position: relative; flex: 1; min-height: 0; overflow: hidden; }
+.pk-pane { position: absolute; inset: 0; display: flex; flex-direction: column;
+  background: var(--pf-surface);
+  transition: transform .26s cubic-bezier(.4, 0, .2, 1), opacity .26s ease; }
+.pk-pane[data-pane="variants"] { transform: translateX(100%); opacity: 0; pointer-events: none; }
+.picker.at-variants .pk-pane[data-pane="browse"] { transform: translateX(-22%); opacity: .3; pointer-events: none; }
+.picker.at-variants .pk-pane[data-pane="variants"] { transform: translateX(0); opacity: 1; pointer-events: auto; }
+@media (prefers-reduced-motion: reduce) { .pk-pane { transition: none; } }
+
+.pk-back { display: flex; align-items: center; gap: 6px; border: 0; background: transparent;
+  color: var(--pf-muted); font: 10px/1 var(--pf-mono); cursor: pointer; padding: 0 0 8px; }
+.pk-back:hover { color: var(--pf-text); }
+.pk-vlist { flex: 1; overflow-y: auto; padding: 4px var(--pf-rail-pad) 12px; }
+.vrow { display: flex; align-items: baseline; gap: 8px; width: 100%; text-align: left; cursor: pointer;
+  background: transparent; border: 0;
+  border-bottom: 1px solid color-mix(in oklab, var(--pf-border) 45%, transparent);
+  padding: 9px 0; color: var(--pf-text-strong); }
+.vrow:hover { background: var(--pf-surface-2); }
+.vrow.on, .vrow.on .vlabel { color: var(--pf-accent); }
+.vrow .vsample { flex: 1; min-width: 0; font-size: 16px;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.vrow .vlabel { flex: none; font: 10px/1 var(--pf-mono); color: var(--pf-muted); }
+
+.pk-hint { flex: none; padding: 7px var(--pf-rail-pad) 0; font: 9px/1.4 var(--pf-mono); color: var(--pf-hint); }
+.pk-empty { margin: 0; padding: 22px var(--pf-rail-pad); font: 11px/1.6 var(--pf-mono); color: var(--pf-hint); }
+
+.pk-foot { flex: none; display: flex; align-items: center; gap: 10px;
+  padding: 9px var(--pf-rail-pad); border-top: 1px solid var(--pf-border); background: var(--pf-surface); }
+.pk-sel { flex: 1; min-width: 0; font: 10px/1.4 var(--pf-mono); color: var(--pf-hint);
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.pk-sel b { font-weight: 500; color: var(--pf-text-2); }
+.pk-done { flex: none; border: 0; border-radius: var(--pf-radius-control); cursor: pointer;
+  background: var(--pf-accent); color: var(--pf-on-accent); font: 11px/1 var(--pf-mono);
+  letter-spacing: .04em; padding: 8px 17px; }
+.pk-done:hover { filter: brightness(1.09); }
+.picker :where(button, input):focus-visible { outline: 2px solid var(--pf-accent); outline-offset: 2px; }

package/src/framework/font-source.js

@@ -0,0 +1,70 @@
+// What a PARAM-supplied font source may be. Author-declared `fonts` sources are
+// code and get no restriction (see the design doc §4); this file exists only
+// for the other case — a value that arrived in `params`, which on a shared link
+// is attacker-controlled text that would otherwise become a fetch URL.
+//
+// DOM-free and node:-free: jobs.js (worker graph) and the panel both import it.
+
+export const FONT_ALLOW_DEFAULT = ["https"];
+
+// The "unset" font source. An empty value declares NO font — the documented way
+// to opt out of a typeface, after which text2d falls back to the bundled Roboto.
+// It is never a source to fetch, and never a source to refuse: fontSourceAllowed
+// rejects "" under every allow list (new URL("") throws), so a site that forgets
+// this reads "unset" as "disallowed" and warns on every build of a part whose
+// font control is simply blank. Spelled once here because three sites have to
+// agree on it — the allow check, the pre-resolve filter, and lint's default
+// check — and the two bugs this rule has already caused were both a site that
+// had drifted from the others.
+export const isNoFontSource = (v) => v === undefined || v === null || v === "";
+
+const GSTATIC_HOST = "fonts.gstatic.com";
+const ASSET_SCHEME = "pfc-asset:";
+
+// Parse once; an unparseable string is refused rather than guessed at.
+function parse(source) {
+  try { return new URL(source); } catch { return null; }
+}
+
+export function fontSourceAllowed(source, allow = FONT_ALLOW_DEFAULT) {
+  if (typeof source !== "string") return false;   // bytes/thunks are never param-supplied
+  const u = parse(source);
+  if (!u) return false;
+  for (const kind of allow) {
+    // hostname, not host or a suffix test: `fonts.gstatic.com.evil.test` must
+    // not pass, and neither must a userinfo trick like `https://fonts.gstatic.com@evil.test/`
+    // (URL parsing puts `evil.test` in hostname, which is exactly why this
+    // compares the parsed hostname rather than the raw string).
+    if (kind === "gstatic" && u.protocol === "https:" && u.hostname === GSTATIC_HOST) return true;
+    if (kind === "https" && u.protocol === "https:") return true;
+    if (kind === "asset" && u.protocol === ASSET_SCHEME) return true;
+  }
+  return false;
+}
+
+// paramKey → allow list, for every `type: "font"` control in the authored tree —
+// new-shape (`controls`, including nested `group`s) AND legacy-shape
+// (`advanced`/`toggles`/`features`, where panel/legacy.js desugars a
+// descriptor's `control:` field to `type:` — see legacy.js's `toControl`).
+// Missing the legacy arrays here would leave a `{key, control:"font"}`
+// descriptor with no entry in the returned map, and jobs.js's check only
+// looks at keys present in the map — so a legacy-declared font control would
+// get silently unrestricted. Walk is deliberately tolerant of any of these
+// arrays being absent or malformed; it must never throw on an existing part.
+export function fontControlAllows(part) {
+  const out = new Map();
+  const visit = (nodes) => {
+    for (const n of nodes ?? []) {
+      if (!n || typeof n !== "object") continue;
+      if (Array.isArray(n.controls)) visit(n.controls);
+      if (Array.isArray(n.advanced)) visit(n.advanced);
+      if (Array.isArray(n.toggles)) visit(n.toggles);
+      if (Array.isArray(n.features)) visit(n.features);
+      if ((n.type === "font" || n.control === "font") && typeof n.key === "string") {
+        out.set(n.key, Array.isArray(n.allow) && n.allow.length ? n.allow : FONT_ALLOW_DEFAULT);
+      }
+    }
+  };
+  visit(part?.parameters);
+  return out;
+}

package/src/framework/fonts.js

@@ -13,6 +13,21 @@ const resolveOne = makeAssetResolver(
   "resolveFonts: a font source must be bytes, a URL, or a thunk returning one",
 );
 
+// `fonts` may be a plain { name: source } map, or a function of the resolved
+// params — the second form is what lets a `type: "font"` control drive the
+// typeface. Resolving it needs `p`, which is why this is a separate step from
+// resolveFonts rather than folded into it.
+export function fontsFor(part, p) {
+  const decl = part?.fonts;
+  return typeof decl === "function" ? decl(p) : decl;
+}
+
 export async function resolveFonts(fontsDecl) {
+  // A function reaching here means a caller passed `part.fonts` raw. It cannot
+  // be resolved without params, and silently returning an empty map would show
+  // up much later as `text2d: unknown font "…"`.
+  if (typeof fontsDecl === "function") {
+    throw new Error("resolveFonts: `fonts` is a function of params — resolve it with fontsFor(part, p) first");
+  }
   return resolveDecl(fontsDecl, resolveOne);
 }

package/src/framework/jobs.js

@@ -4,7 +4,8 @@
 // kernel-bound module back.
 import { meshTo3MF } from "./geometry/threemf.js";
 import { exportablePartNames } from "./export-select.js";
-import { resolveFonts } from "./fonts.js";
+import { fontControlAllows, fontSourceAllowed, isNoFontSource } from "./font-source.js";
+import { fontsFor, resolveFonts } from "./fonts.js";
 import { normalizeOpentype, parseFont } from "./geometry/opentype-interop.js";
 import { ensureImports, resolveImports } from "./imports.js";
 import { safeName } from "./safe-name.js";
@@ -98,25 +99,106 @@ export async function handle(kernel, part, msg, post, opts = {}) {
   const label = (name) => part.parts[name].label ?? name;
   const exportName = (name) => part.parts[name].export?.name ?? name;
 
+  // Warnings this job raised before any sub-part was built — a refused font
+  // source, today. They ride the result's `warnings` (below) rather than only a
+  // progress phase, which the next busy chip overwrites milliseconds later: a
+  // tampered share link must leave a notice that is still readable once the
+  // build has landed. `part: null` because these belong to the job, not to any
+  // one sub-part.
+  const jobWarnings = [];
   try {
-    // Preload any part-declared fonts into the kernel before building — once per
-    // font name; a lazy dynamic import because this is async context (unlike the
-    // synchronous kernel-front), so it doesn't cost sync callers anything. The
-    // namespace shape differs between bundler and Node resolution (a bare
-    // `.default` here is undefined in every browser bundle) — normalize it.
+    // Params first: the fonts declaration may be a function of them, and a
+    // throwing derive() should surface before a font download rather than
+    // after one. Still inside the try, so that throw posts an error the UI can
+    // show instead of killing the worker turn silently (an endless spinner).
+    //
+    // The font-source check runs as resolveParams' sanitize hook, not after it:
+    // rewriting p[key] afterwards would leave derive() — and therefore `d`, and
+    // therefore the geometry — holding the refused value while build() saw the
+    // default.
+    const { p, d } = resolveParams(part, msg.params, (params) => {
+      // A param bound to a `type: "font"` control is user input — on a shared
+      // link it is arbitrary attacker-supplied text that `fonts: (p) => …` would
+      // turn into a fetch URL. Refuse out-of-`allow` values back to the part's
+      // own default rather than failing the build: a bad link should show the
+      // part, not an error page.
+      for (const [key, allow] of fontControlAllows(part)) {
+        const v = params[key];
+        if (isNoFontSource(v) || fontSourceAllowed(v, allow)) continue;
+        const message = `font source for "${key}" is not allowed — using the default`;
+        onProgress(message);          // the live chip…
+        jobWarnings.push({ part: null, message });   // …and the durable record
+        params[key] = part.defaults?.[key];
+      }
+    });
+    // Preload any part-declared fonts into the kernel before building. A lazy
+    // dynamic import because this is async context (unlike the synchronous
+    // kernel-front), so it doesn't cost sync callers anything. The namespace
+    // shape differs between bundler and Node resolution (a bare `.default`
+    // here is undefined in every browser bundle) — normalize it.
+    const fontsDecl = fontsFor(part, p);
+    // A nullish/empty source means "no font declared" for that name, not an
+    // error — e.g. `fonts: (p) => ({ face: p.face })` when p.face ended up
+    // undefined because the refusal above had no default to fall back to, or
+    // because the author simply left it unset. text2d falls back to the
+    // bundled Roboto for a name with no declared source. Passing it through
+    // to resolveFonts would throw ("must be bytes, a URL, or a thunk…"),
+    // producing exactly the error-page outcome the refusal above exists to
+    // avoid. Drop it here, centrally, rather than teaching resolveFonts about
+    // "empty is fine" (it still must error on a *present* source of the wrong
+    // shape — that's a real authoring bug). The progress note is what keeps a
+    // genuine typo (a name that never resolves) visible instead of silently
+    // swallowed.
+    const fontsToResolve = fontsDecl && Object.fromEntries(
+      Object.entries(fontsDecl).filter(([name, src]) => {
+        if (!isNoFontSource(src)) return true;
+        onProgress(`no font source declared for "${name}" — skipping`);
+        return false;
+      }),
+    );
+    // Gated on the part DECLARING `fonts` at all, not on this job having one to
+    // resolve — the prune below has to run on the empty declaration too, and a
+    // part with no `fonts` field must not touch the map (a host or test harness
+    // may have seeded kernel._fonts directly, e.g. bootManifoldKernel({ fonts })).
     if (part.fonts && kernel._fonts) {
-      const opentype = normalizeOpentype(await import("opentype.js"));
-      const bufs = await resolveFonts(part.fonts);
-      for (const [name, buf] of bufs) if (!kernel._fonts.has(name)) kernel._fonts.set(name, parseFont(opentype, buf, name));
+      const declared = fontsToResolve ?? {};
+      if (Object.keys(declared).length) {
+        onProgress("resolving fonts");
+        const opentype = normalizeOpentype(await import("opentype.js"));
+        const bufs = await resolveFonts(declared);
+        // Keyed on the SOURCE, not the name. A name is not a font identity: one
+        // worker outlives many parts (worker-rebind) and, once a font can come
+        // from a param, many picks — all of which reuse the same declared name.
+        // The old `if (!_fonts.has(name))` made the first bytes ever seen under a
+        // name permanent for the life of the worker.
+        //
+        // The source, not the resolved buffer: the two agree only because the
+        // resolver's own memo is unbounded and hands back the identical object
+        // every time. Key on that and this memo silently degrades to per-fetch
+        // identity — a re-parse per build — the day eviction is added there.
+        kernel._fontsBySource ??= new Map();
+        for (const [name, buf] of bufs) {
+          const source = declared[name];
+          let font = kernel._fontsBySource.get(source);
+          if (!font) { font = parseFont(opentype, buf, name); kernel._fontsBySource.set(source, font); }
+          kernel._fonts.set(name, font);
+        }
+      }
+      // Drop every name this build's declaration does not supply. `_fonts` is
+      // the kernel's, and the kernel outlives the job: without this, a face the
+      // user picked and then CLEARED stays registered under its old name, and an
+      // unconditional `k.text2d(s, { font: "face" })` goes on rendering it
+      // instead of falling back — the stale-registration bug of spec §5, one
+      // step narrower and just as silent.
+      for (const name of [...kernel._fonts.keys()]) {
+        if (!Object.hasOwn(declared, name)) kernel._fonts.delete(name);
+      }
     }
     // Register this part's declared imports on the kernel running this job — the
     // import-asset sibling of the fonts preload above. See ensureImports for the
     // lazy-error policy that keeps a STEP import inert until a build actually
     // calls k.import on it.
     if (part.imports) await ensureImports(kernel, part.imports, opts.importMeshes ?? null);
-    // Inside the try so a throwing derive posts an error the UI can show,
-    // instead of killing the worker turn silently (an endless spinner).
-    const { p, d } = resolveParams(part, msg.params);
     // Local shorthand over the shared helper: kernel/part/view/p/d are fixed per job.
     const posed = (name, purpose, prog) => buildPosed(kernel, part, name, { purpose, view: msg.view, p, d, onProgress: prog });
     // Explicit selection (headless exportParts) overrides view-derived selection.
@@ -136,7 +218,7 @@ export async function handle(kernel, part, msg, post, opts = {}) {
       // first so a previous job's stragglers (an oracle build, an export) cannot be
       // misattributed to this build's first sub-part.
       kernel.takeBuildWarnings?.();
-      const warnings = [];
+      const warnings = [...jobWarnings];   // job-level notices ride along with the per-sub-part ones
       kernel.resetCacheStats?.(); // count hits/misses for just this job
       for (const [i, name] of msg.subparts.entries()) {
         if (useCache) kernel.beginSubPart?.(name); // open the per-sub-part cache round
@@ -171,7 +253,7 @@ export async function handle(kernel, part, msg, post, opts = {}) {
       const useCache = msg.cache !== false;
       const meshes = [];
       kernel.takeBuildWarnings?.(); // discard a previous job's stragglers (same as generate)
-      const warnings = [];
+      const warnings = [...jobWarnings];
       for (const name of msg.subparts) {
         if (useCache) kernel.beginSubPart?.(name);
         try {

package/src/framework/lint/index.js

@@ -16,8 +16,9 @@ import { VERIFY_RULES, resolveExpect } from "./rules-verify.js";
 import { ANIMATION_RULES } from "./rules-animations.js";
 import { PLACE_RULES } from "./rules-place.js";
 import { IMPORT_RULES } from "./rules-imports.js";
+import { FONT_RULES } from "./rules-fonts.js";
 
-export const RULES = [...SHAPE_RULES, ...SCHEMA_RULES, ...BUILD_RULES, ...VERIFY_RULES, ...ANIMATION_RULES, ...PLACE_RULES, ...IMPORT_RULES];
+export const RULES = [...SHAPE_RULES, ...SCHEMA_RULES, ...BUILD_RULES, ...VERIFY_RULES, ...ANIMATION_RULES, ...PLACE_RULES, ...IMPORT_RULES, ...FONT_RULES];
 
 // Every rule runs inside a guard. lintPart is called on a user-facing hosted path
 // (partforge-cloud's sandbox), and a linter that takes down the preview it exists to

package/src/framework/lint/rules-fonts.js

@@ -0,0 +1,45 @@
+// Group 8 — font-control well-formedness. Both conditions here are silent
+// failures at runtime rather than errors: a picker bound to a key no `fonts`
+// declaration reads changes a param and nothing else (the typeface never
+// moves), and a default outside its own `allow` list is swapped for… itself,
+// which is to say the part boots with no font at all.
+//
+// Detecting "does the fonts function read this key?" without executing the
+// function is impossible in general, so the rule asks the cheaper, honest
+// question: is `fonts` a function at all? A static `fonts` provably cannot
+// depend on a param.
+import { err, warn } from "./finding.js";
+import { fontControlAllows, fontSourceAllowed, isNoFontSource } from "../font-source.js";
+
+export const FONT_RULES = [
+  {
+    id: "font-control-not-in-fonts",
+    run: ({ part }) => {
+      const controls = fontControlAllows(part);
+      if (controls.size === 0 || typeof part?.fonts === "function") return [];
+      return [...controls.keys()].map((key) => err("font-control-not-in-fonts",
+        `control "${key}" is a font picker, but this part's \`fonts\` is ${part?.fonts ? "a static object" : "missing"} — the picked value is never resolved.`,
+        `Declare fonts as a function of params, e.g. fonts: (p) => ({ ${key}: p.${key} }), and reference it with k.text2d(str, { font: "${key}" }).`,
+        "fonts"));
+    },
+  },
+  {
+    id: "font-source-scheme",
+    run: ({ part }) => {
+      const out = [];
+      for (const [key, allow] of fontControlAllows(part)) {
+        const v = part?.defaults?.[key];
+        // An empty source declares nothing (jobs.js filters exactly these out
+        // before resolveFonts, and text2d falls back to the bundled Roboto),
+        // which is a legitimate way to author an optional typeface — not a
+        // source the allow list is refusing.
+        if (isNoFontSource(v) || fontSourceAllowed(v, allow)) continue;
+        out.push(warn("font-source-scheme",
+          `defaults.${key} is "${String(v).slice(0, 120)}", which control "${key}" would refuse (allow: ${allow.join(", ")}).`,
+          `Use a source the allow list accepts, or widen \`allow\` on the control. At build time this value is replaced by defaults.${key}, so as written the part has no usable font.`,
+          "defaults"));
+      }
+      return out;
+    },
+  },
+];

package/src/framework/mount.js

@@ -247,6 +247,7 @@ function createCleanupStack() {
 // exactly once here — submodules take element refs and never query the document.
 // `container`/`controls` remain as deprecated aliases for elements.viewer/.controls.
 export function mount(part, { createWorker, elements = {}, onBuild, onPick, onDownload, onViewChange, onParamsCommit, onAnnotationSend,
+                              fontCatalog,
                               annotateSend = "viewbar",
                               container: legacyContainer, controls: legacyControls } = {}) {
   // --- element resolution (the only getElementById calls in the framework, save the ?pickserver client's optional #viewbar lookup) ----
@@ -835,7 +836,8 @@ export function mount(part, { createWorker, elements = {}, onBuild, onPick, onDo
       onParamChange();
     }, onParamsCommit
       ? (changed) => onParamsCommit({ changed, params: { ...params } })
-      : undefined);
+      : undefined,
+      { fontCatalog });
     cleanup.defer(() => panel.dispose());
     panelRef = panel;
     const updateRelevance = () => {

package/src/framework/panel/font-picker.js

@@ -0,0 +1,400 @@
+// The `type: "font"` picker: a takeover panel over the rail with two sliding
+// panes (families, then that family's weights) and a shared footer.
+//
+// Main-thread only — it is DOM-heavy and is NOT part of the worker graph.
+// It draws list rows in each family's own face by loading Google's name-only
+// `menuUrl` subset through a FontFace, which is why a row costs a few KB and
+// not the whole family.
+//
+// Ported from spike/font-picker.html, whose layout and interaction were settled
+// against a running build over the real 1,942-family catalog (spec §6). The
+// spike's own data path — a bundled catalog.json plus the Google CSS API — does
+// NOT come along: here the families arrive from the host's `fontCatalog` and
+// every face is a `FontFace` over a URL that catalog handed us.
+import { fontLabel, variantLabel, setFontPicker } from "./widgets/font.js";
+import { fontSourceAllowed } from "../font-source.js";
+
+const ROW_H = 44;                  // comfortable density (spec §6)
+const OVERSCAN = 4;                // rows rendered above/below the viewport
+const SEARCH_LIMIT = 200;
+const SEARCH_DEBOUNCE_MS = 120;
+const SAMPLE = "Hamburgefonstiv 0123";   // the default variant-pane sample; `preview` overrides it
+// A variants pane can hold 18 weights; auto-loading every real face for a CJK
+// family would be tens of megabytes on one click. Past this, the sample line
+// falls back to the panel font with the weight synthesized.
+const VARIANT_FACE_MAX_BYTES = 1_500_000;
+
+function el(tag, className, text) {
+  const node = document.createElement(tag);
+  if (className) node.className = className;
+  if (text != null) node.textContent = text;
+  return node;
+}
+
+// Family names come from the host and land in a `font-family` declaration, so
+// strip the two characters that could end the quoted string early.
+const faceStack = (...names) =>
+  [...names.map((n) => `"${String(n).replace(/["\\]/g, "")}"`), "var(--pf-sans)"].join(", ");
+
+const kbLabel = (bytes) => (Number.isFinite(bytes) ? `${Math.round(bytes / 1024)}K` : "");
+
+// The face a row advertises, and the one a click lands on when the user has no
+// standing weight preference. Kept separate from `pickVariant` so the row's
+// size caption does not change under the user as they audition weights.
+const listVariant = (f) =>
+  f.variants.find((v) => v.variant === "400" || v.variant === "regular") ?? f.variants[0];
+
+// At most one picker is open at a time, and the previous one has to be CLOSED
+// rather than merely detached: its `keydown` listener lives on `document`, so
+// dropping the element off the DOM leaves the handler — and the whole closure,
+// up to 200 admitted families — alive forever, one more on every re-open.
+// Only close() unregisters it, so every path that supersedes a picker goes
+// through here.
+let openPicker = null;
+
+export function openFontPicker({ node, params, allow, fontCatalog, anchor, onPicked }) {
+  // Takeover: the picker covers the rail on desktop and the single visible pane
+  // below the narrow breakpoint. One layout for both widths (spec §6).
+  const host = anchor?.closest?.(".pf-rail") ?? anchor?.parentElement ?? document.body;
+  openPicker?.close();                                  // never two at once
+
+  // ── state ───────────────────────────────────────────────────────────────
+  // The author's `preview` string, when they set one. A part lettered in digits,
+  // or in a script "Hamburgefonstiv" cannot even render, is auditioned against
+  // the wrong glyphs by the generic sample — which is the whole point of the
+  // field (spec §1). Blank or non-string falls back to the default.
+  const sampleText = typeof node.preview === "string" && node.preview.trim() ? node.preview : SAMPLE;
+  let results = [];          // what the catalog last returned…
+  let resultsQuery = "";     // …for this query
+  let query = "";            // what is in the box right now
+  let rows = [];             // what the list is showing
+  let closed = false;
+  let searchSeq = 0;
+  let debounce = null;
+  let failed = false;
+  // The value alone cannot name a live-picked face (a gstatic filename is a
+  // content hash), so start from `fontLabel` and sharpen it the moment the
+  // catalog hands us a family whose variant URL is this exact value.
+  const initial = fontLabel(params[node.key]);
+  let selFamily = initial.family;
+  let selVariant = initial.variant ?? "400";
+  let selBytes = null;
+  let openFamily = null;     // the family the variants pane is showing
+
+  const faceRequested = new Set();   // families whose menu face we have asked for
+  // …and the ones we are no longer waiting on: arrived, or definitively failed.
+  // A row is dimmed while its face is PENDING; a 404 is settled, not pending,
+  // so it goes back to full strength in the panel font rather than staying grey.
+  const faceSettled = new Set();
+  const variantFaces = new Set();    // variant URLs already loaded
+
+  // ── DOM ─────────────────────────────────────────────────────────────────
+  const picker = el("div", "picker");
+  const panes = el("div", "pk-panes");
+
+  const browse = el("div", "pk-pane");
+  browse.dataset.pane = "browse";
+  const head = el("div", "pk-head");
+  const titlebar = el("div", "pk-titlebar");
+  const closeBtn = el("button", "pk-x", "\u00d7");
+  closeBtn.type = "button";
+  closeBtn.title = "Close";
+  titlebar.append(el("b", "", node.label ?? node.key), closeBtn);
+  const search = document.createElement("input");
+  search.className = "pk-search";
+  search.type = "text";
+  search.placeholder = "Search fonts";
+  search.autocomplete = "off";
+  search.spellcheck = false;
+  head.append(titlebar, search);
+  const hint = el("div", "pk-hint");
+  hint.hidden = true;
+  const list = el("div", "pk-list");
+  const spacer = el("div", "pk-spacer");
+  const empty = el("p", "pk-empty");
+  empty.hidden = true;
+  list.append(spacer, empty);
+  browse.append(head, hint, list);
+
+  const variants = el("div", "pk-pane");
+  variants.dataset.pane = "variants";
+  const vhead = el("div", "pk-head");
+  const back = el("button", "pk-back", "\u2190 all families");
+  back.type = "button";
+  const vtitlebar = el("div", "pk-titlebar");
+  const vtitle = el("b");
+  vtitlebar.append(vtitle);
+  vhead.append(back, vtitlebar);
+  const vlist = el("div", "pk-vlist");
+  variants.append(vhead, vlist);
+
+  panes.append(browse, variants);
+
+  // The footer sits BELOW the sliding pane box, not inside it, so Done stays
+  // reachable from either pane — picking a weight never has to exit to commit.
+  const foot = el("div", "pk-foot");
+  const sel = el("span", "pk-sel");
+  const done = el("button", "pk-done", "Done");
+  done.type = "button";
+  foot.append(sel, done);
+
+  picker.append(panes, foot);
+  host.append(picker);
+  paintSel();
+  search.focus?.();
+
+  // ── faces ───────────────────────────────────────────────────────────────
+  // happy-dom (and any non-browser host) may not implement FontFace at all; a
+  // missing one must degrade to un-styled rows, never throw.
+  const canLoadFaces = () => typeof FontFace === "function" && typeof document.fonts?.add === "function";
+
+  function settle(family) {
+    faceSettled.add(family);
+    if (closed) return;
+    for (const row of spacer.children) {
+      if (row.dataset.family === family) row.classList.remove("loading");
+    }
+  }
+
+  function requestFaces(families) {
+    if (!canLoadFaces()) return;
+    for (const f of families) {
+      if (faceRequested.has(f.family)) continue;
+      faceRequested.add(f.family);
+      // The menu file is fetched, so it goes through the same allowlist as the
+      // value itself — a catalog is host-supplied, not trusted.
+      if (!f.menuUrl || !fontSourceAllowed(f.menuUrl, allow)) { settle(f.family); continue; }
+      let face;
+      try { face = new FontFace(f.family, `url(${f.menuUrl})`); } catch { settle(f.family); continue; }
+      face.load()
+        .then((loaded) => { document.fonts.add(loaded); })
+        .catch(() => { /* a family that will not load stays in the panel font */ })
+        .then(() => settle(f.family));
+    }
+  }
+
+  // The variants pane needs the REAL weights — the menu subset carries only the
+  // family name's glyphs at one weight, so it cannot show what 700 looks like.
+  // Each face is registered under `<family> <variant>` so the weights do not
+  // collide with each other or with the menu face.
+  function requestVariantFace(family, v) {
+    if (!canLoadFaces()) return;
+    if (variantFaces.has(v.url) || !fontSourceAllowed(v.url, allow)) return;
+    if (Number.isFinite(v.bytes) && v.bytes > VARIANT_FACE_MAX_BYTES) return;
+    variantFaces.add(v.url);
+    let face;
+    try { face = new FontFace(`${family} ${v.variant}`, `url(${v.url})`); } catch { return; }
+    face.load().then((loaded) => document.fonts.add(loaded)).catch(() => {});
+  }
+
+  // ── the list ────────────────────────────────────────────────────────────
+  // Reconcile by (index, family, selected) — index ALONE is wrong: after a
+  // search the same index holds a different family, and an index-keyed row
+  // keeps rendering the old one. The spike paid a screenshot to find this.
+  const rowKey = (i, f) => `${i}|${f.family}|${f.family === selFamily ? 1 : 0}`;
+
+  function rowEl(i, f) {
+    const row = el("div", "pk-row" + (f.family === selFamily ? " sel" : ""));
+    row.dataset.i = String(i);
+    row.dataset.key = rowKey(i, f);
+    row.dataset.family = f.family;
+    if (canLoadFaces() && !faceSettled.has(f.family)) row.classList.add("loading");
+    const main = el("div", "pk-main");
+    const face = el("div", "pk-face", f.family);
+    face.style.fontFamily = faceStack(f.family);
+    const n = f.variants.length;
+    main.append(face, el("div", "pk-sub", `${n} style${n === 1 ? "" : "s"} · ${f.category ?? "—"}`));
+    row.append(main, el("div", "pk-meta", kbLabel(listVariant(f)?.bytes)));
+    row.addEventListener("click", () => choose(f));
+    return row;
+  }
+
+  function render() {
+    if (closed) return;
+    spacer.style.height = `${rows.length * ROW_H}px`;
+    const top = list.scrollTop || 0;
+    const vh = list.clientHeight || 360;
+    const first = Math.max(0, Math.floor(top / ROW_H) - OVERSCAN);
+    const last = Math.min(rows.length, Math.ceil((top + vh) / ROW_H) + OVERSCAN);
+
+    const wanted = new Map();
+    for (let i = first; i < last; i++) wanted.set(i, rows[i]);
+    requestFaces([...wanted.values()]);
+
+    for (const node_ of [...spacer.children]) {
+      const i = Number(node_.dataset.i);
+      if (!wanted.has(i) || node_.dataset.key !== rowKey(i, wanted.get(i))) node_.remove();
+      else wanted.delete(i);
+    }
+    for (const [i, f] of wanted) spacer.append(rowEl(i, f));
+    for (const node_ of spacer.children) {
+      node_.style.height = `${ROW_H}px`;
+      node_.style.transform = `translateY(${Number(node_.dataset.i) * ROW_H}px)`;
+    }
+
+    empty.hidden = rows.length > 0;
+    if (!rows.length) {
+      empty.textContent = failed ? "The font catalog is unavailable."
+        : query.trim() ? `No families match "${query.trim()}".`
+        : "No families available.";
+    }
+    hint.hidden = !query.trim() || !rows.length;
+    if (!hint.hidden) hint.textContent = `${rows.length.toLocaleString()} match${rows.length === 1 ? "" : "es"}`;
+  }
+
+  // Drop variants the allowlist refuses, and drop a family left with none — the
+  // UI half of the font-source check. A family we cannot legally write must not
+  // be offered, not merely fail on click.
+  function admissible(entries) {
+    const out = [];
+    for (const f of entries ?? []) {
+      if (!f || typeof f.family !== "string" || !Array.isArray(f.variants)) continue;
+      const ok = f.variants.filter((v) => v && fontSourceAllowed(v.url, allow));
+      if (!ok.length) continue;
+      out.push({ ...f, variants: ok });
+      if (!selBytes) {
+        const hit = ok.find((v) => v.url === params[node.key]);
+        if (hit) { selFamily = f.family; selVariant = hit.variant; selBytes = hit.bytes; paintSel(); }
+      }
+    }
+    return out;
+  }
+
+  // While the user is typing ahead of the catalog, narrow what is already in
+  // hand rather than blanking the list; once the catalog has answered for this
+  // exact query, show precisely what it returned (its matching may be fuzzier
+  // than a substring test, and second-guessing it would drop real hits).
+  function recompute() {
+    // Compare TRIMMED against trimmed: runSearch stores the trimmed query, so a
+    // trailing space would otherwise never match and the list would stay stuck
+    // on the client-side narrowing instead of showing the catalog's answer.
+    const q = query.trim();
+    rows = resultsQuery === q || !q
+      ? results
+      : results.filter((f) => f.family.toLowerCase().includes(q.toLowerCase()));
+    render();
+  }
+
+  function runSearch(q) {
+    const seq = ++searchSeq;
+    Promise.resolve()
+      .then(() => fontCatalog.search(q, { limit: SEARCH_LIMIT }))
+      .then((entries) => {
+        if (closed || seq !== searchSeq) return;         // a newer search already won
+        failed = false;
+        results = admissible(entries);
+        resultsQuery = q;
+        recompute();
+      })
+      .catch(() => {
+        if (closed || seq !== searchSeq) return;
+        failed = true;
+        results = [];
+        resultsQuery = q;
+        recompute();
+      });
+  }
+
+  search.addEventListener("input", () => {
+    query = search.value;
+    list.scrollTop = 0;                                  // a new query starts at the top
+    recompute();                                         // instant, from what we hold
+    clearTimeout(debounce);
+    debounce = setTimeout(() => runSearch(query.trim()), SEARCH_DEBOUNCE_MS);
+  });
+  list.addEventListener("scroll", render);
+
+  // ── choosing ────────────────────────────────────────────────────────────
+  const pickVariant = (f) =>
+    f.variants.find((v) => v.variant === selVariant) ?? listVariant(f);
+
+  function choose(f) {
+    commit(f, pickVariant(f));
+    // 1,036 of the 1,942 catalog families ship a single face. Stepping into a
+    // one-row weight list you immediately back out of is pure friction, so for
+    // those the row click IS the selection and the list stays put (spec §6).
+    if (f.variants.length > 1) openVariants(f);
+  }
+
+  function commit(f, v) {
+    if (!v) return;
+    params[node.key] = v.url;
+    selFamily = f.family;
+    selVariant = v.variant;
+    selBytes = v.bytes;
+    onPicked?.();
+    paintSel();
+    paintVariantRows();
+    render();
+  }
+
+  function paintSel() {
+    sel.textContent = "";
+    const strong = el("b", "", selFamily);
+    const rest = ` · ${variantLabel(selVariant)}` + (selBytes ? ` · ${kbLabel(selBytes)}` : "");
+    sel.append(strong, document.createTextNode(rest));
+  }
+
+  function openVariants(f) {
+    openFamily = f;
+    vtitle.textContent = f.family;
+    vlist.textContent = "";
+    for (const v of f.variants) {
+      const b = el("button", "vrow" + (v.variant === selVariant ? " on" : ""));
+      b.type = "button";
+      b.dataset.v = v.variant;
+      const sample = el("span", "vsample", sampleText);
+      sample.style.fontFamily = faceStack(`${f.family} ${v.variant}`, f.family);
+      sample.style.fontWeight = String(v.variant).replace(/i$/, "") || "400";
+      sample.style.fontStyle = /i$/.test(String(v.variant)) ? "italic" : "normal";
+      b.append(sample, el("span", "vlabel", v.label ?? variantLabel(v.variant)));
+      // Commit WITHOUT leaving — you audition weights against the live
+      // geometry, so committing and navigating are separate actions (spec §6).
+      b.addEventListener("click", () => commit(f, v));
+      requestVariantFace(f.family, v);
+      vlist.append(b);
+    }
+    vlist.scrollTop = 0;
+    picker.classList.add("at-variants");
+  }
+
+  // Repaint which weight is current without rebuilding the list — the pane
+  // stays put while you audition, so the rows must not be torn down under you.
+  function paintVariantRows() {
+    if (openFamily?.family !== selFamily) return;
+    for (const b of vlist.children) b.classList.toggle("on", b.dataset.v === selVariant);
+  }
+
+  const leaveVariants = () => { openFamily = null; picker.classList.remove("at-variants"); render(); };
+  back.addEventListener("click", leaveVariants);
+
+  // ── closing ─────────────────────────────────────────────────────────────
+  // Named here so close() can clear the module-level handle; `close` is a
+  // hoisted function declaration, so this captures it.
+  const handle = { close };
+
+  function close() {
+    if (closed) return;                                  // idempotent
+    closed = true;
+    clearTimeout(debounce);
+    document.removeEventListener("keydown", onKey);
+    picker.remove();
+    if (openPicker === handle) openPicker = null;
+  }
+  function onKey(ev) {
+    if (ev.key !== "Escape") return;
+    ev.stopPropagation();
+    if (picker.classList.contains("at-variants")) leaveVariants();
+    else close();
+  }
+  document.addEventListener("keydown", onKey);
+  closeBtn.addEventListener("click", close);
+  done.addEventListener("click", close);
+
+  runSearch("");
+  render();
+  openPicker = handle;
+  return handle;
+}
+
+setFontPicker(openFontPicker);

package/src/framework/panel/render.js

@@ -24,7 +24,7 @@ function indexNodes(nodes, map) {
   }
 }
 
-export function buildControls(root, parameters, params, onDirty, onCommit) {
+export function buildControls(root, parameters, params, onDirty, onCommit, opts = {}) {
   const info = createInfoPopover();
   const tree = buildTree(desugar(parameters));
 
@@ -34,6 +34,7 @@ export function buildControls(root, parameters, params, onDirty, onCommit) {
   const syncFns = [];             // { key, sync } for every widget
   const rawSyncs = new Map();     // sectionId -> [{ key, sync }] for preset application
   const widgetSyncs = new Map();  // id -> the RAW widget sync (no markCustom)
+  const disposers = [];           // widget teardown — a font picker lives OUTSIDE root
   const nodeById = new Map();     // id -> node, for the reveal re-sync
   const lastVisible = new Map();  // id -> previous `visible`, to detect a reveal
   const lastDisabled = new Map(); // id -> previous `disabled`, to skip a no-op input pass
@@ -225,10 +226,12 @@ export function buildControls(root, parameters, params, onDirty, onCommit) {
       onChange: () => { markCustom(); onEdit(); },
       onCommit: () => commit([node.key]),
       info,
+      fontCatalog: opts.fontCatalog,
     });
     nodeEls.set(node.id, widget.el);
     if (node.key && !keyToId.has(node.key)) keyToId.set(node.key, node.id);
     widgetSyncs.set(node.id, widget.sync);
+    if (widget.dispose) disposers.push(widget.dispose);
     container.append(widget.el);
 
     // The raw sync is what a PRESET application uses — it must not mark itself
@@ -351,6 +354,8 @@ export function buildControls(root, parameters, params, onDirty, onCommit) {
       }
       return true;
     },
-    dispose: () => { info.dispose(); root.replaceChildren(); },
+    // replaceChildren() only reaches what is INSIDE root; a widget that parked
+    // DOM (or a document-level listener) elsewhere has to be told to let go.
+    dispose: () => { info.dispose(); for (const d of disposers) d(); root.replaceChildren(); },
   };
 }

package/src/framework/panel/widget-specs.js

@@ -36,6 +36,7 @@ export const WIDGET_SPECS = [
   { type: "checkbox", kind: "control", fields: LEGACY_TOGGLE },
   { type: "select", kind: "control", fields: [...AUTHOR_COMMON, "options"] },
   { type: "radio", kind: "control", fields: [...AUTHOR_COMMON, "options"] },
+  { type: "font", kind: "control", fields: [...AUTHOR_COMMON, "allow", "preview"] },
   { type: "readout", kind: "display", fields: ["type", "label", "description", "unit", "derivedKey", "hidden", "when", "whenFalse"] },
 ];
 
@@ -54,6 +55,7 @@ const AUTHOR_EXTRAS = {
   checkbox: ["on"],
   select: ["options"],
   radio: ["options"],
+  font: ["allow", "preview"],
 };
 const AUTHOR_FIELDS = new Map(Object.entries(AUTHOR_EXTRAS).map(
   ([type, extra]) => [type, [...AUTHOR_COMMON, ...extra]]));

package/src/framework/panel/widgets/font.js

@@ -0,0 +1,125 @@
+// The `type: "font"` control. Its VALUE is a font source string — the same
+// grammar `PartDefinition.fonts` already accepts — so everything downstream
+// (presets, undo, the params hash, `when`) works with no special case.
+//
+// Two renderings. With a host-supplied `fontCatalog` it is a button showing the
+// current face IN that face, opening the picker. Without one it degrades to a
+// URL text field, so a standalone partforge app (which ships no catalog) still
+// exposes the parameter.
+import { attachInfo } from "../info.js";
+import { FONT_ALLOW_DEFAULT, fontSourceAllowed } from "../../font-source.js";
+
+function el(tag, className, text) {
+  const node = document.createElement(tag);
+  if (className) node.className = className;
+  if (text != null) node.textContent = text;
+  return node;
+}
+
+const WEIGHTS = { 100: "Thin", 200: "ExtraLight", 300: "Light", 400: "Regular", 500: "Medium",
+                  600: "SemiBold", 700: "Bold", 800: "ExtraBold", 900: "Black" };
+export const variantLabel = (v) => {
+  if (!v) return "Regular";
+  const w = String(v).replace(/i$/, ""), italic = /i$/.test(String(v));
+  return `${WEIGHTS[w] ?? w}${italic ? " Italic" : ""}`;
+};
+
+// A source string → something human. Cloud's fetch_web_font stores files as
+// `<family-slug>[-<variant>].ttf`, so the filename round-trips the label for
+// free on the vendored path; a bare URL falls back to its filename stem.
+export function fontLabel(source) {
+  if (typeof source !== "string" || !source) return { family: "—", variant: null };
+  let path = source;
+  try { path = new URL(source).pathname; } catch { /* not a URL — use the raw string */ }
+  const file = path.split("/").filter(Boolean).pop() ?? source;
+  const stem = file.replace(/\.(ttf|otf)$/i, "");
+  const m = /^(.*)-(\d{3}i?|italic)$/i.exec(stem);
+  const slug = m ? m[1] : stem;
+  const family = slug.split("-").filter(Boolean)
+    .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
+    .join(" ") || "—";
+  return { family, variant: m ? m[2] : null };
+}
+
+export function makeFont(node, params, { onChange, onCommit, info, fontCatalog } = {}) {
+  const allow = Array.isArray(node.allow) && node.allow.length ? node.allow : FONT_ALLOW_DEFAULT;
+  const wrap = el("div", "slider");
+  const row = el("div", "row");
+  const label = el("label", "", node.label ?? node.key);
+  attachInfo(label, node.description, info);
+  row.append(label);
+  wrap.append(row);
+
+  if (!fontCatalog) {
+    // Degraded path: a URL field. Unlike `text`, it does NOT write on every
+    // keystroke — a half-typed URL is a guaranteed failed fetch, and the
+    // rebuild loop would chase every one of them.
+    const field = document.createElement("input");
+    field.type = "text";
+    field.className = "text-input";
+    field.value = String(params[node.key] ?? "");
+    field.addEventListener("change", () => {
+      if (!fontSourceAllowed(field.value, allow)) { field.classList.add("warn"); return; }
+      field.classList.remove("warn");
+      params[node.key] = field.value;
+      onChange?.();
+      onCommit?.();
+    });
+    wrap.append(field);
+    return { el: wrap, sync: () => { field.value = String(params[node.key] ?? ""); field.classList.remove("warn"); } };
+  }
+
+  const btn = el("button", "font-btn");
+  btn.type = "button";
+  const fname = el("span", "fname");
+  const fvar = el("span", "fvar");
+  btn.append(fname, fvar);
+  btn.insertAdjacentHTML("beforeend",
+    '<svg class="caret" width="8" height="7" viewBox="0 0 8 7" aria-hidden="true"><polygon points="0,0 8,0 4,7" fill="currentColor"/></svg>');
+  wrap.append(btn);
+
+  // The value alone cannot name a live-picked face: a gstatic filename is a
+  // content hash. Ask the catalog first (it holds the reverse lookup), and fall
+  // back to the filename — which is right for a vendored `<family>-<variant>.ttf`
+  // and merely ugly for a hash. `describe` is optional and may be async, so the
+  // label is painted twice: filename immediately, catalog answer when it lands.
+  let paintSeq = 0;
+  const paint = () => {
+    const src = params[node.key];
+    const seq = ++paintSeq;
+    const show = ({ family, variant }) => {
+      if (seq !== paintSeq) return;                  // a newer paint already won
+      fname.textContent = family;
+      fvar.textContent = variantLabel(variant);
+      fname.style.fontFamily = `"${family}", var(--pf-sans)`;
+    };
+    show(fontLabel(src));
+    if (typeof fontCatalog.describe !== "function") return;
+    Promise.resolve()
+      .then(() => fontCatalog.describe(src))
+      .then((d) => { if (d?.family) show(d); })
+      .catch(() => { /* a failed lookup keeps the filename label */ });
+  };
+  paint();
+
+  // The picker registers itself through setFontPicker (see below); with no
+  // picker in the bundle the button is inert rather than broken.
+  //
+  // The handle is kept because the picker is a TAKEOVER: it appends itself to
+  // the rail, outside the panel root, so tearing the panel down does not take it
+  // with it. Without dispose() the element — and the `document` keydown listener
+  // that only close() unhooks — would outlive the panel holding a stale `params`.
+  let picker = null;
+  btn.addEventListener("click", () => {
+    picker = openFontPicker?.({ node, params, allow, fontCatalog, anchor: wrap, onPicked: () => { paint(); onChange?.(); onCommit?.(); } }) ?? null;
+  });
+
+  return { el: wrap, sync: paint, dispose: () => { picker?.close(); picker = null; } };
+}
+
+// Assigned by font-picker.js, which widgets/index.js imports for the side
+// effect. Kept
+// as a mutable binding rather than a static import so this file stays usable —
+// and testable — without dragging the whole picker in.
+export let openFontPicker = null;
+export const setFontPicker = (fn) => { openFontPicker = fn; };

package/src/framework/panel/widgets/index.js

@@ -4,6 +4,13 @@ import { makeNumeric } from "./numeric.js";
 import { makeText } from "./text.js";
 import { makeCheckbox } from "./checkbox.js";
 import { makeSelect, makeRadio } from "./select.js";
+import { makeFont } from "./font.js";
+// Side-effect import: font-picker.js calls setFontPicker() at module scope, so
+// the font widget's button finds a picker to open. It lives HERE and not in
+// font.js because the dependency has to run picker → widget and never back —
+// font.js must stay importable (and testable) without dragging the whole
+// DOM-heavy picker in. See the note at the bottom of font.js.
+import "../font-picker.js";
 
 export const WIDGET_FACTORIES = {
   slider: makeNumeric,
@@ -13,4 +20,5 @@ export const WIDGET_FACTORIES = {
   checkbox: makeCheckbox,
   select: makeSelect,
   radio: makeRadio,
+  font: makeFont,
 };

package/src/framework/part-model.js

@@ -32,8 +32,16 @@ export function exportSubParts(part, view, params) {
 
 // Resolve a part's effective params + derived values for a build: the user's params
 // layered over the part defaults, and derive() run once over the result.
-export function resolveParams(part, params) {
+//
+// `sanitize(p)` is an optional hook that may rewrite the layered params IN PLACE —
+// the seam a caller uses to refuse an untrusted value before it means anything.
+// It runs BEFORE resolveDerived deliberately: derive() must see exactly the params
+// build() will see, or a refused value still reaches the geometry through `d`.
+// A hook rather than a second copy of this function in the caller, so "resolve a
+// part's params" keeps one definition.
+export function resolveParams(part, params, sanitize) {
   const p = { ...part.defaults, ...params };
+  sanitize?.(p);
   return { p, d: resolveDerived(part, p) };
 }
 

package/src/parts/nameplate.js

@@ -23,6 +23,15 @@ export default {
           description: "Grow (>0, bolder) or shrink (<0, thinner) the letters with a **Shape2D offset** — the same operation used for print clearance. Large negative values collapse thin strokes, so the letters hold at their thinnest valid size rather than breaking." },
       ],
     },
+    {
+      id: "typeface",
+      title: "Typeface",
+      description: "The face the lettering is cut in. Falls back to the bundled Roboto when left as the default.",
+      controls: [
+        { key: "face", type: "font", label: "Typeface",
+          description: "Any face the host's font catalog offers. Without a catalog this is a URL field — a direct link to a `.ttf` or `.otf` that allows cross-origin requests." },
+      ],
+    },
     {
       id: "plate",
       title: "Plate",
@@ -45,14 +54,19 @@ export default {
       ],
     },
   ],
-  defaults: { label: "PARTFORGE\nv0.20", size: 8, depth: 1.2, stroke: 0, margin: 4, corner: 3, thickness: 3, engrave: 0 },
+  defaults: { label: "PARTFORGE\nv0.20", size: 8, depth: 1.2, stroke: 0, margin: 4, corner: 3, thickness: 3, engrave: 0, face: "" },
+  // A function of params, not a static map — that is what makes `face` a
+  // parameter rather than a constant. An empty value declares nothing, and
+  // text2d falls back to the bundled Roboto.
+  fonts: (p) => (p.face ? { face: p.face } : {}),
   parts: {
     plate: {
       label: "Nameplate",
       views: ["plate"],
       export: { name: "nameplate" },
       build: (k, p) => {
-        let text = k.text2d(p.label, { size: p.size, align: "center", valign: "middle", lineHeight: p.size * 1.7 });
+        let text = k.text2d(p.label, { size: p.size, align: "center", valign: "middle",
+          lineHeight: p.size * 1.7, ...(p.face ? { font: "face" } : {}) });
         // Shape2D offset on the lettering: grow (>0, bolder) or shrink (<0, thinner). Guard
         // against a shrink that collapses thin strokes — keep the un-offset letters if so.
         if (p.stroke !== 0) {