partforge 0.73.0 → 0.74.0

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) {