partforge 0.96.0 → 0.98.0

package/src/framework/oracle/verify.js

@@ -4,6 +4,7 @@ import { pairKey, CONTACT_EPS } from "./gaps.js";
 import { resolveProfile } from "./dfm-profiles.js";
 import { expandExpectations, partGatesMinWall } from "./gates.js";
 import { subPartReadKeys, relevanceHash, RELEVANT_ALL } from "../param-deps.js";
+import { byteAwareReplacer } from "../geometry/solid-hash.js";
 import { SUBPART_METRICS, VIEW_METRICS } from "../verify-metrics.js";
 
 // Re-exported for backwards compatibility: the registries moved to framework/ so
@@ -208,9 +209,13 @@ export function verify(kernel, part, { process, view, measureFn = defaultMeasure
   const expanded = expandExpectations(part);
   const needMinWall = partGatesMinWall(part, { process, expanded });
   const readKeys = subPartReadKeys(part, view, part.defaults);
+  // byteAwareReplacer on the RELEVANT_ALL branch too: an unattributable derive()
+  // still might read a byte-valued image param, and this memo key gates whether
+  // a case's geometry gets rebuilt or an earlier result reused (see the seeding
+  // block below) — the same collision the relevanceHash branch guards against.
   const signature = (params) =>
     readKeys === RELEVANT_ALL
-      ? JSON.stringify(params)
+      ? JSON.stringify(params, byteAwareReplacer)
       : [...readKeys.entries()].map(([name, keys]) => `${name}:${relevanceHash([...keys], params)}`).join("|");
 
   const memo = new Map();

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

@@ -0,0 +1,152 @@
+// The `type: "image"` picker: a takeover panel over the rail — a search box
+// above a thumbnail grid — reusing the `.picker`/`.pk-head`/`.pk-search`
+// scaffolding font-picker.js built, since a search-then-pick takeover is the
+// same shape for either asset kind. No variants pane: an image source has no
+// weight/style axis to drill into, so choosing IS committing.
+//
+// Main-thread only — it is DOM-heavy and is NOT part of the worker graph. It
+// draws thumbnails through plain `<img src>`, so the browser's own decoder does
+// the work; nothing here imports `png-decode.js`.
+import { setImagePicker } from "./widgets/image.js";
+import { imageSourceAllowed } from "../image-source.js";
+
+const SEARCH_LIMIT = 60;
+const SEARCH_DEBOUNCE_MS = 120;
+
+function el(tag, className, text) {
+  const node = document.createElement(tag);
+  if (className) node.className = className;
+  if (text != null) node.textContent = text;
+  return node;
+}
+
+// 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 —
+// alive forever, one more on every re-open. Only close() unregisters it.
+let openPicker = null;
+
+export function openImagePicker({ node, params, allow, imageCatalog, anchor, onPicked }) {
+  // Takeover: the picker covers the rail on desktop and the single visible pane
+  // below the narrow breakpoint, same as the font picker.
+  const host = anchor?.closest?.(".pf-rail") ?? anchor?.parentElement ?? document.body;
+  openPicker?.close();                                  // never two at once
+
+  let results = [];
+  let query = "";
+  let closed = false;
+  let searchSeq = 0;
+  let debounce = null;
+  let failed = false;
+
+  // ── DOM ─────────────────────────────────────────────────────────────────
+  const picker = el("div", "picker");
+  const head = el("div", "pk-head");
+  const titlebar = el("div", "pk-titlebar");
+  const closeBtn = el("button", "pk-x", "×");
+  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 images";
+  search.autocomplete = "off";
+  search.spellcheck = false;
+  head.append(titlebar, search);
+  const grid = el("div", "pk-img-grid");
+  const empty = el("p", "pk-empty");
+  empty.hidden = true;
+  picker.append(head, grid, empty);
+  host.append(picker);
+  search.focus?.();
+
+  // ── the grid ────────────────────────────────────────────────────────────
+  // Not virtualized like the font list: a search result page is bounded by
+  // SEARCH_LIMIT, so the DOM cost of every row existing at once stays small —
+  // no scroll-position bookkeeping to get wrong for what is, at most, one
+  // catalog page of thumbnails.
+  function render() {
+    if (closed) return;
+    grid.textContent = "";
+    // A catalog is host-supplied, not trusted — drop any asset the allowlist
+    // refuses, same rule the font picker applies to a family's variants.
+    const admissible = results.filter((a) => a && typeof a.url === "string" && imageSourceAllowed(a.url, allow));
+    for (const asset of admissible) {
+      const card = el("button", "pk-img-card");
+      card.type = "button";
+      card.dataset.sel = String(asset.url === params[node.key]);
+      const thumb = document.createElement("img");
+      thumb.className = "pk-img-thumb";
+      thumb.alt = "";
+      thumb.src = asset.thumbUrl || asset.url;
+      thumb.addEventListener("error", () => { thumb.hidden = true; });
+      const cap = el("span", "pk-img-cap", asset.label ?? "");
+      card.append(thumb, cap);
+      card.addEventListener("click", () => choose(asset));
+      grid.append(card);
+    }
+    empty.hidden = admissible.length > 0;
+    if (!admissible.length) {
+      empty.textContent = failed ? "The image catalog is unavailable."
+        : query.trim() ? `No images match "${query.trim()}".`
+        : "No images available.";
+    }
+  }
+
+  function choose(asset) {
+    params[node.key] = asset.url;
+    onPicked?.();
+    close();
+  }
+
+  function runSearch(q) {
+    const seq = ++searchSeq;
+    Promise.resolve()
+      .then(() => imageCatalog.search(q, { limit: SEARCH_LIMIT }))
+      .then((entries) => {
+        if (closed || seq !== searchSeq) return;        // a newer search already won
+        failed = false;
+        results = Array.isArray(entries) ? entries : [];
+        render();
+      })
+      .catch(() => {
+        if (closed || seq !== searchSeq) return;
+        failed = true;
+        results = [];
+        render();
+      });
+  }
+
+  search.addEventListener("input", () => {
+    query = search.value;
+    clearTimeout(debounce);
+    debounce = setTimeout(() => runSearch(query.trim()), SEARCH_DEBOUNCE_MS);
+  });
+
+  // ── closing ─────────────────────────────────────────────────────────────
+  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();
+    close();
+  }
+  document.addEventListener("keydown", onKey);
+  closeBtn.addEventListener("click", close);
+
+  runSearch("");
+  render();
+  openPicker = handle;
+  return handle;
+}
+
+setImagePicker(openImagePicker);

package/src/framework/panel/render.js

@@ -227,6 +227,8 @@ export function buildControls(root, parameters, params, onDirty, onCommit, opts
       onCommit: () => commit([node.key]),
       info,
       fontCatalog: opts.fontCatalog,
+      imageCatalog: opts.imageCatalog,
+      onAssetUpload: opts.onAssetUpload,
     });
     nodeEls.set(node.id, widget.el);
     if (node.key && !keyToId.has(node.key)) keyToId.set(node.key, node.id);

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

@@ -37,6 +37,8 @@ export const WIDGET_SPECS = [
   { 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: "image", kind: "control", fields: [...AUTHOR_COMMON, "allow"] },
+  { type: "vector", kind: "control", fields: [...AUTHOR_COMMON, "allow"] },
   { type: "readout", kind: "display", fields: ["type", "label", "description", "unit", "derivedKey", "hidden", "when", "whenFalse"] },
 ];
 
@@ -56,6 +58,8 @@ const AUTHOR_EXTRAS = {
   select: ["options"],
   radio: ["options"],
   font: ["allow", "preview"],
+  image: ["allow"],
+  vector: ["allow"],
 };
 const AUTHOR_FIELDS = new Map(Object.entries(AUTHOR_EXTRAS).map(
   ([type, extra]) => [type, [...AUTHOR_COMMON, ...extra]]));

package/src/framework/panel/widgets/file-drop.js

@@ -0,0 +1,321 @@
+// The shared drop target behind `type: "image"`, `type: "vector"` and
+// `type: "font"` (Tasks 6, 8, 9) — NOT itself a control. It owns no param key
+// and draws no label/row of its own; it turns a dropped, picked or pasted
+// file into either a host-stored source string or the converted artifact, and
+// hands that to `onSource`. Kind-agnostic for classification and upload: the
+// registry (`../../ingest/registry.js`) already knows what each kind accepts
+// and how to convert it, and `classify`/`convertFor`/the `onAssetUpload`
+// branch never look past `kind` as an opaque string.
+//
+// ONE named exception, in exactly two places, both explained where they
+// occur: `convertedArtifact` and the "no host hook" branch of `handle()`
+// both check `kind === "vector"` by name, because a vector's "no host hook"
+// delivery is the PARSED document object, not bytes like every other kind
+// (task-9 addendum, Ruling D) — that asymmetry has to live somewhere, and
+// singling it out here is more honest than pretending every kind still ends
+// up looking the same.
+//
+// `mountDrop` (bottom of this file) is the widget-facing half: wiring
+// `makeFileDrop`'s output to a control's own `params[node.key]` and error
+// surface is the same ~25 lines in widgets/image.js, widgets/font.js and
+// widgets/vector.js — two copies were defensible as deliberate mirroring
+// (Tasks 6, 8); a third (Task 9) is where a shared helper wins (task-9
+// addendum, Ruling L). All three widgets call it instead of keeping their own
+// `mountXDrop`/`makeDropError` pair.
+//
+// Before this file there was no drag-and-drop, file picker, or paste
+// affordance anywhere in the panel (design doc, "Evidence" §1) — this is new
+// code, not an extraction.
+//
+// MAIN-THREAD ONLY, like font.js/image.js: it reaches the real converters
+// (canvas decode for images, paper.js for vectors) only through the
+// registry's `convert` thunks, so a part with no such control never pays for
+// either, and neither is reachable from the geometry worker's import closure
+// (test/worker-layering.test.js walks the registry itself; this file adds
+// nothing new to that surface).
+import { classify, convertFor, rowFor } from "../../ingest/registry.js";
+
+// A generous but bounded cap, checked against `file.size` — BEFORE even
+// `file.arrayBuffer()` is called, let alone conversion — so an oversize file
+// is never read into memory just to be rejected. 25 MB comfortably covers a
+// photo, a font family file or a hand-drawn SVG; nothing this framework
+// ingests is legitimately bigger, and letting a bigger one through would
+// decode on the main thread with no progress UI. The design doc left the
+// exact number to this task (open item 2) — this is that pick.
+const MAX_BYTES = 25 * 1024 * 1024;
+
+const bytesLabel = (n) =>
+  n >= 1024 * 1024 ? `${(n / (1024 * 1024)).toFixed(1)} MB` : `${Math.ceil(n / 1024)} KB`;
+
+// media type -> a short human noun, for a refusal message naming what a file
+// actually IS (spec §5: "names what works"). Kept local and small: the
+// registry's own `label`s already read as sentences ("an image (PNG, JPG or
+// WebP)"), not nouns, so they are the wrong shape for "X is a ␣ file".
+const MEDIA_NOUN = {
+  "image/png": "PNG", "image/jpeg": "JPEG", "image/webp": "WebP", "image/svg+xml": "SVG",
+  "font/otf": "OTF", "font/ttf": "TTF", "font/woff2": "WOFF2",
+};
+
+// Compose the refusal message from a failed `classify()`. Two shapes, both
+// naming the actual file:
+// - the registry knows another slot that WOULD take it (`suggestKind`) ->
+//   name where it belongs, e.g. "logo.svg is artwork (SVG) ... try the
+//   Artwork control instead" — the exact case the registry's `suggestKind`
+//   exists for. Uses the row's own `name` (a display name, e.g. "Artwork"),
+//   never the internal `kind` key (e.g. "vector") — the key is an
+//   implementation detail the registry happens to use for lookups, not
+//   something a control is labelled.
+// - it knows only what THIS slot accepts — either the bytes are unrecognised,
+//   or they are a real, named format that just has no home anywhere (WOFF2)
+//   -> say what works, point nowhere.
+function refusalMessage(filename, kind, { mediaType, suggestKind }) {
+  const needLabel = rowFor(kind).label;
+  if (suggestKind) {
+    const haveRow = rowFor(suggestKind);
+    return `"${filename}" is ${haveRow.label} — this control accepts ${needLabel}. Try the ${haveRow.name} control instead.`;
+  }
+  const noun = mediaType && MEDIA_NOUN[mediaType];
+  const what = noun ? `a ${noun} file` : "not a file this control recognises";
+  return `"${filename}" is ${what} — this control accepts ${needLabel}.`;
+}
+
+function el(tag, className, text) {
+  const node = document.createElement(tag);
+  if (className) node.className = className;
+  if (text != null) node.textContent = text;
+  return node;
+}
+
+export function makeFileDrop({ kind, onSource, onError, onAssetUpload }) {
+  const row = rowFor(kind);
+  const wrap = el("div", "file-drop");
+  wrap.tabIndex = 0;
+  wrap.setAttribute("role", "button");
+  const hint = el("span", "file-drop-hint", `Drop ${row?.label ?? "a file"} here, or click to choose`);
+  wrap.append(hint);
+
+  // The click/keyboard path to the same handler a drop uses. Hidden rather
+  // than absent: a real `<input type="file">` is what gives this a native
+  // "Choose File" affordance and OS-level type filtering (`accept`), neither
+  // of which is worth hand-rolling.
+  const input = document.createElement("input");
+  input.type = "file";
+  input.className = "file-drop-input";
+  input.hidden = true;
+  if (row?.accepts?.length) input.accept = row.accepts.join(",");
+  wrap.append(input);
+
+  // The converted artifact from the most recently accepted drop — a Blob (or,
+  // for a `convert: null` kind like font, the original File, which already IS
+  // the artifact since nothing transforms it). Kept so a failed
+  // `onAssetUpload` can be retried without re-reading and re-converting the
+  // file the user already dropped: that reconvert — a canvas decode, a
+  // paper.js import — is the whole reason this exists rather than just
+  // re-deriving it from the DOM on retry.
+  let converted = null;
+
+  // One AbortController for every listener this widget adds (created here,
+  // ahead of `handle`, so `handle` can close over `signal` — see `stale()`
+  // below). `dispose()` is a single `abort()` rather than a hand-maintained
+  // list of pairs to get wrong. font-picker.js:49 explains why removal
+  // matters: a stray listener keeps this whole closure (and everything it
+  // closes over — `onSource`, `onAssetUpload`, eventually a live `params`)
+  // alive long after the panel that created it is gone.
+  const ac = new AbortController();
+  const { signal } = ac;
+
+  // `handle()` is a multi-await chain (read -> classify -> convert -> upload),
+  // and two things can happen while it's suspended: the widget can be
+  // disposed (a panel rebuild tore this control down), or a SECOND drop can
+  // land before the first finishes (a slow first file, a fast second one).
+  // Neither must be allowed to write into `converted` or fire `onSource`/
+  // `onError` after the fact — a disposed widget has no live closure to write
+  // into safely, and a superseded drop must not clobber the newer one's
+  // result (the user's most recent drop has to win). `generation` is bumped
+  // on every `handle()` call; `stale()` is true once either reason applies,
+  // and every callback site below is gated on it.
+  let generation = 0;
+
+  // The argument shape a converter wants differs by kind — imageToPng wants
+  // the Blob itself, ingestSvg wants the decoded SVG text — so this is the one
+  // place that looks past "kind" as an opaque string. A `convert: null` row
+  // (font) needs no call at all: the dropped file is already the artifact.
+  //
+  // Returns `{ blob, doc }`: `blob` is what an `onAssetUpload` host hook gets
+  // (a host uploads bytes, not a live object) and what `lastBlob()` retains
+  // for a retry; `doc` is set only for "vector", where it is the PARSED
+  // partforge-vector document `ingestSvg` already produced. `blob` still
+  // carries the JSON-serialized form for the upload path, but `handle()`
+  // below delivers `doc` — never the serialized bytes — to `onSource` when
+  // there is no host hook to upload to (task-9 addendum, Ruling D: the
+  // resolver already accepts an in-tree parsed object directly, so
+  // serializing it only for the resolver to re-parse would be pure waste).
+  async function convertedArtifact(file, mediaType) {
+    const convert = await convertFor(kind, mediaType);
+    if (!convert) return { blob: file, doc: undefined };
+    if (kind === "vector") {
+      const text = new TextDecoder("utf-8").decode(await file.arrayBuffer());
+      const doc = convert(text, { source: file.name });
+      return { blob: new Blob([JSON.stringify(doc)], { type: "application/json" }), doc };
+    }
+    return { blob: await convert(file), doc: undefined };
+  }
+
+  async function handle(file) {
+    const myGen = ++generation;
+    const stale = () => signal.aborted || myGen !== generation;
+
+    // Checked against `file.size` alone — no read yet — so an oversize file
+    // never gets fully buffered into memory just to be rejected.
+    if (file.size > MAX_BYTES) {
+      onError?.(`"${file.name}" is ${bytesLabel(file.size)} — over the ${bytesLabel(MAX_BYTES)} limit.`);
+      return;
+    }
+
+    const bytes = new Uint8Array(await file.arrayBuffer());
+    if (stale()) return;
+
+    const result = classify(bytes, kind);
+    if (!result.ok) {
+      onError?.(refusalMessage(file.name, kind, result));
+      return;
+    }
+
+    let artifact;
+    try {
+      artifact = await convertedArtifact(file, result.mediaType);
+    } catch (err) {
+      if (stale()) return;
+      // Names the file and the stage (spec §5) — a malformed SVG must not
+      // read as a partforge bug.
+      onError?.(`"${file.name}" could not be converted: ${err.message}`);
+      return;
+    }
+    if (stale()) return;             // a newer drop already won — don't clobber its `converted`
+    converted = artifact.blob; // retained from here on, success or not — see the field comment above
+
+    if (onAssetUpload) {
+      try {
+        const source = await onAssetUpload(artifact.blob, { kind, filename: file.name });
+        if (stale()) return;
+        // A host hook that resolves to anything but a non-empty string —
+        // `undefined`, an object, `""` — is a contract violation, not a
+        // source: writing it into the param would corrupt the part rather
+        // than fail loudly.
+        if (typeof source !== "string" || !source) {
+          onError?.(`"${file.name}" was converted, but the upload hook returned ${JSON.stringify(source)} instead of a source string.`);
+          return;
+        }
+        onSource?.(source);
+      } catch (err) {
+        if (stale()) return;
+        // The artifact stays in `converted` — a retry (the host re-driving
+        // onAssetUpload, e.g. from a "try again" button) costs a network
+        // call, not a reconvert.
+        onError?.(`"${file.name}" converted, but the upload failed: ${err.message}. Retry — it doesn't need reconverting.`);
+      }
+      return;
+    }
+
+    // No host hook. For "vector" the artifact IS the parsed document object —
+    // deliver that directly, never its serialized bytes (task-9 addendum,
+    // Ruling D; see `convertedArtifact` above).
+    if (kind === "vector") {
+      onSource?.(artifact.doc);
+      return;
+    }
+
+    // Every other kind: the bytes themselves are the param value. This is the
+    // path the partforge-cloud sandbox needs because it cannot fetch URLs —
+    // correct and expected, not a degraded fallback (see font.js/image.js's
+    // own byte-valued param handling for the downstream half of this).
+    const ab = await artifact.blob.arrayBuffer();
+    if (stale()) return;
+    onSource?.(ab);
+  }
+
+  async function handleFiles(files) {
+    const list = Array.from(files ?? []);
+    if (list.length === 0) return;
+    if (list.length > 1) {
+      // Silently dropping the rest would be worse than a one-line note
+      // (spec §5) — reported, but the first file still proceeds below.
+      onError?.(`${list.length} files were dropped — using only the first, "${list[0].name}".`);
+    }
+    await handle(list[0]);
+  }
+
+  const onDrop = (e) => {
+    e.preventDefault();
+    wrap.classList.remove("file-drop-over");
+    handleFiles(e.dataTransfer?.files);
+  };
+  const onDragOver = (e) => { e.preventDefault(); wrap.classList.add("file-drop-over"); };
+  const onDragLeave = () => wrap.classList.remove("file-drop-over");
+  const onClick = () => input.click();
+  const onKeydown = (e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); input.click(); } };
+  const onChange = () => { handleFiles(input.files); input.value = ""; }; // same file twice must still fire `change`
+  // Paste is the third affordance the feature exists to add (design doc,
+  // "Evidence" §1: "no drag-and-drop, file picker, or paste affordance
+  // anywhere in the panel") — a clipboard image/font/SVG lands the same way a
+  // drop does.
+  const onPaste = (e) => { if (e.clipboardData?.files?.length) handleFiles(e.clipboardData.files); };
+
+  // `ac`/`signal` were created above, ahead of `handle()` — every listener
+  // below shares the same one.
+  wrap.addEventListener("drop", onDrop, { signal });
+  wrap.addEventListener("dragover", onDragOver, { signal });
+  wrap.addEventListener("dragleave", onDragLeave, { signal });
+  wrap.addEventListener("click", onClick, { signal });
+  wrap.addEventListener("keydown", onKeydown, { signal });
+  wrap.addEventListener("paste", onPaste, { signal });
+  input.addEventListener("change", onChange, { signal });
+
+  return {
+    el: wrap,
+    dispose: () => ac.abort(),
+    lastBlob: () => converted,
+  };
+}
+
+// The widget-facing wiring: mounts a `makeFileDrop` for one control and binds
+// it to `params[node.key]`, including the control's own error surface (a
+// hidden-by-default line under the drop target, filled verbatim with
+// whatever `onError` composed — spec: "do not rewrite or wrap it; render
+// it"). Marks the drop element `data-pf-drop` (the tests select on it).
+//
+// `onRender` is the widget's own repaint (`paintField`/`paint`) — called
+// after a successful drop so the field/button reflects the new value
+// immediately, the same way a catalog picker's `onPicked` already does.
+// `onChange`/`onCommit` are then fired in that order, mirroring every other
+// widget's own edit path (render.js wires them: `onChange` marks the section
+// Custom and re-applies condition state, `onCommit` is the "the user finished
+// an interaction" signal that triggers a rebuild).
+//
+// Returns `{ el, errorEl, dispose }` rather than appending anything itself —
+// the caller still owns layout (where the drop target and error line sit
+// relative to the field/button), only the wiring is shared.
+export function mountDrop(kind, { params, node, onAssetUpload, onChange, onCommit, onRender }) {
+  const errorEl = el("div", "file-drop-error");
+  errorEl.hidden = true;
+
+  const drop = makeFileDrop({
+    kind,
+    onAssetUpload,
+    onSource: (source) => {
+      errorEl.hidden = true;
+      errorEl.textContent = "";
+      params[node.key] = source;
+      onRender?.();
+      onChange?.();
+      onCommit?.();
+    },
+    onError: (message) => {
+      errorEl.hidden = false;
+      errorEl.textContent = message;
+    },
+  });
+  drop.el.setAttribute("data-pf-drop", "");
+
+  return { el: drop.el, errorEl, dispose: () => drop.dispose() };
+}

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

@@ -1,13 +1,22 @@
-// 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.
+// The `type: "font"` control. Its VALUE is a font source — either a source
+// string (the same grammar `PartDefinition.fonts` already accepts) or raw
+// font bytes (an ArrayBuffer/typed array): the partforge-cloud sandbox cannot
+// fetch URLs, so it puts the bytes straight in the param (font-source.js now
+// accepts that shape). Everything downstream (presets, undo, the params hash,
+// `when`) works with either shape, 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.
+// Two renderings, mirroring widgets/image.js. 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.
+//
+// Fonts are the "used as-is" kind: the ingest registry's `font` row has
+// `convert: null` (a TTF/OTF is validated, never converted), so unlike
+// image.js/svg there is no converter to warm up here — see makeFont's own
+// note below.
 import { attachInfo } from "../info.js";
 import { FONT_ALLOW_DEFAULT, fontSourceAllowed } from "../../font-source.js";
+import { mountDrop } from "./file-drop.js";
 
 function el(tag, className, text) {
   const node = document.createElement(tag);
@@ -16,6 +25,8 @@ function el(tag, className, text) {
   return node;
 }
 
+const isBytes = (v) => v instanceof ArrayBuffer || ArrayBuffer.isView(v);
+
 const WEIGHTS = { 100: "Thin", 200: "ExtraLight", 300: "Light", 400: "Regular", 500: "Medium",
                   600: "SemiBold", 700: "Bold", 800: "ExtraBold", 900: "Black" };
 export const variantLabel = (v) => {
@@ -41,7 +52,7 @@ export function fontLabel(source) {
   return { family, variant: m ? m[2] : null };
 }
 
-export function makeFont(node, params, { onChange, onCommit, info, fontCatalog } = {}) {
+export function makeFont(node, params, { onChange, onCommit, info, fontCatalog, onAssetUpload } = {}) {
   const allow = Array.isArray(node.allow) && node.allow.length ? node.allow : FONT_ALLOW_DEFAULT;
   const wrap = el("div", "slider");
   const row = el("div", "row");
@@ -57,7 +68,16 @@ export function makeFont(node, params, { onChange, onCommit, info, fontCatalog }
     const field = document.createElement("input");
     field.type = "text";
     field.className = "text-input";
-    field.value = String(params[node.key] ?? "");
+    const paintField = () => {
+      const v = params[node.key];
+      // Bytes cannot round-trip through a text field — `String(arrayBuffer)`
+      // is "[object ArrayBuffer]", not a value anyone typed. Show an honest
+      // placeholder instead of that, and leave the field free to type a
+      // replacement URL over it. Mirrors widgets/image.js's paintField.
+      field.value = isBytes(v) ? "" : String(v ?? "");
+      field.placeholder = isBytes(v) ? "Uploaded font" : "";
+      field.classList.remove("warn");
+    };
     field.addEventListener("change", () => {
       if (!fontSourceAllowed(field.value, allow)) { field.classList.add("warn"); return; }
       field.classList.remove("warn");
@@ -65,8 +85,15 @@ export function makeFont(node, params, { onChange, onCommit, info, fontCatalog }
       onChange?.();
       onCommit?.();
     });
+    paintField();
     wrap.append(field);
-    return { el: wrap, sync: () => { field.value = String(params[node.key] ?? ""); field.classList.remove("warn"); } };
+
+    const drop = mountDrop("font", {
+      params, node, onAssetUpload, onChange, onCommit, onRender: paintField,
+    });
+    wrap.append(drop.el, drop.errorEl);
+
+    return { el: wrap, sync: paintField, dispose: () => drop.dispose() };
   }
 
   const btn = el("button", "font-btn");
@@ -83,6 +110,11 @@ export function makeFont(node, params, { onChange, onCommit, info, fontCatalog }
   // 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.
+  //
+  // A byte-valued param (the cloud sandbox path, dropped or uploaded) has no
+  // filename to derive a label from — `fontLabel` would print "—" for it, so
+  // it is special-cased to an honest "Uploaded font" instead, the same rule
+  // widgets/image.js applies for a byte-valued image.
   let paintSeq = 0;
   const paint = () => {
     const src = params[node.key];
@@ -93,7 +125,7 @@ export function makeFont(node, params, { onChange, onCommit, info, fontCatalog }
       fvar.textContent = variantLabel(variant);
       fname.style.fontFamily = `"${family}", var(--pf-sans)`;
     };
-    show(fontLabel(src));
+    show(isBytes(src) ? { family: "Uploaded font", variant: null } : fontLabel(src));
     if (typeof fontCatalog.describe !== "function") return;
     Promise.resolve()
       .then(() => fontCatalog.describe(src))
@@ -114,7 +146,14 @@ export function makeFont(node, params, { onChange, onCommit, info, fontCatalog }
     picker = openFontPicker?.({ node, params, allow, fontCatalog, anchor: wrap, onPicked: () => { paint(); onChange?.(); onCommit?.(); } }) ?? null;
   });
 
-  return { el: wrap, sync: paint, dispose: () => { picker?.close(); picker = null; } };
+  const drop = mountDrop("font", { params, node, onAssetUpload, onChange, onCommit, onRender: paint });
+  wrap.append(drop.el, drop.errorEl);
+
+  return {
+    el: wrap,
+    sync: paint,
+    dispose: () => { picker?.close(); picker = null; drop.dispose(); },
+  };
 }
 
 // Assigned by font-picker.js, which widgets/index.js imports for the side