partforge 0.97.0 → 0.98.0

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

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

@@ -17,6 +17,7 @@
 // path, not the panel.
 import { attachInfo } from "../info.js";
 import { IMAGE_ALLOW_DEFAULT, imageSourceAllowed } from "../../image-source.js";
+import { mountDrop } from "./file-drop.js";
 
 function el(tag, className, text) {
   const node = document.createElement(tag);
@@ -53,7 +54,7 @@ function paintPreview(img, source) {
   }
 }
 
-export function makeImage(node, params, { onChange, onCommit, info, imageCatalog } = {}) {
+export function makeImage(node, params, { onChange, onCommit, info, imageCatalog, onAssetUpload } = {}) {
   const allow = Array.isArray(node.allow) && node.allow.length ? node.allow : IMAGE_ALLOW_DEFAULT;
   const wrap = el("div", "slider");
   const row = el("div", "row");
@@ -98,7 +99,13 @@ export function makeImage(node, params, { onChange, onCommit, info, imageCatalog
     });
     paintField();
     wrap.append(field);
-    return { el: wrap, sync: paintField };
+
+    const drop = mountDrop("image", {
+      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", "image-btn");
@@ -154,7 +161,14 @@ export function makeImage(node, params, { onChange, onCommit, info, imageCatalog
     picker = openImagePicker?.({ node, params, allow, imageCatalog, anchor: wrap, onPicked: () => { paint(); onChange?.(); onCommit?.(); } }) ?? null;
   });
 
-  return { el: wrap, sync: paint, dispose: () => { picker?.close(); picker = null; } };
+  const drop = mountDrop("image", { 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 image-picker.js, which widgets/index.js imports for the side

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

@@ -6,6 +6,7 @@ import { makeCheckbox } from "./checkbox.js";
 import { makeSelect, makeRadio } from "./select.js";
 import { makeFont } from "./font.js";
 import { makeImage } from "./image.js";
+import { makeVector } from "./vector.js";
 // Side-effect imports: font-picker.js / image-picker.js call setFontPicker() /
 // setImagePicker() at module scope, so each widget's button finds a picker to
 // open. They live HERE and not in font.js/image.js because the dependency has
@@ -25,4 +26,5 @@ export const WIDGET_FACTORIES = {
   radio: makeRadio,
   font: makeFont,
   image: makeImage,
+  vector: makeVector,
 };

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

@@ -0,0 +1,77 @@
+// The `type: "vector"` control. Its VALUE is vector artwork — either a URL
+// string (the same grammar `PartDefinition.vectors` already accepts) or the
+// PARSED partforge-vector document object a drop/paste conversion produces
+// (see file-drop.js's vector-kind handling and vectors.js's `asParsedFile`,
+// "the in-tree form" — a source that IS the parsed contents of its file
+// rather than a way to reach its bytes). `vectorsFor` (vectors.js) is what
+// lets a `type: "vector"` control drive the artwork: a part declares
+// `vectors: (p) => ({ name: p.art })` and this control writes `p.art`.
+//
+// Unlike font.js/image.js there is NO catalog provider for artwork — no
+// `vectorCatalog` exists (see the design doc's "no vector catalog provider"
+// note) — so this control has exactly ONE rendering: a URL field plus a
+// drop target. There is no picker button and nothing here degrades from a
+// richer form; this IS the whole control.
+//
+// Main-thread only: the real SVG -> partforge-vector conversion (paper.js)
+// runs inside `makeFileDrop` -> the registry's "vector" convert thunk,
+// never here.
+import { attachInfo } from "../info.js";
+import { VECTOR_ALLOW_DEFAULT, vectorSourceAllowed } from "../../vector-source.js";
+import { mountDrop } from "./file-drop.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 isBytes = (v) => v instanceof ArrayBuffer || ArrayBuffer.isView(v);
+// A dropped/pasted SVG with no `onAssetUpload` host hook lands as the PARSED
+// document object (task-9 addendum, Ruling D) — an opaque value with nothing
+// a text field can show, the same rule image.js/font.js apply to a
+// byte-valued param.
+const isOpaque = (v) => isBytes(v) || (v != null && typeof v === "object");
+
+export function makeVector(node, params, { onChange, onCommit, info, onAssetUpload } = {}) {
+  const allow = Array.isArray(node.allow) && node.allow.length ? node.allow : VECTOR_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);
+
+  // The 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. Mirrors widgets/image.js's/font.js's own field.
+  const field = document.createElement("input");
+  field.type = "text";
+  field.className = "text-input";
+  const paintField = () => {
+    const v = params[node.key];
+    // A parsed document (or bytes) cannot round-trip through a text field —
+    // show an honest placeholder instead, and leave the field free to type a
+    // replacement URL over it.
+    field.value = isOpaque(v) ? "" : String(v ?? "");
+    field.placeholder = isOpaque(v) ? "Uploaded artwork" : "";
+    field.classList.remove("warn");
+  };
+  field.addEventListener("change", () => {
+    if (!vectorSourceAllowed(field.value, allow)) { field.classList.add("warn"); return; }
+    field.classList.remove("warn");
+    params[node.key] = field.value;
+    onChange?.();
+    onCommit?.();
+  });
+  paintField();
+  wrap.append(field);
+
+  const drop = mountDrop("vector", {
+    params, node, onAssetUpload, onChange, onCommit, onRender: paintField,
+  });
+  wrap.append(drop.el, drop.errorEl);
+
+  return { el: wrap, sync: paintField, dispose: () => drop.dispose() };
+}