partforge 0.101.0 → 0.103.0

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

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

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

@@ -86,24 +86,47 @@ function el(tag, className, text) {
   return node;
 }
 
-export function makeFileDrop({ kind, onSource, onError, onAssetUpload }) {
+// `ambient` is for a control that already has a visible way in — the font
+// control's catalog button, say. A labelled drop zone under it would spend rail
+// height repeating the same offer, so the ambient form carries no hint, no click
+// target and no place in the tab order: it is an overlay that shows itself only
+// while a file is over it (see `.file-drop-ambient` in app.css). Dropping still
+// works, it is simply not advertised.
+//
+// The click path is dropped rather than hidden, deliberately: an invisible
+// overlay that still swallowed clicks would eat the button underneath it, which
+// is the one affordance ambient mode exists to protect.
+export function makeFileDrop({ kind, onSource, onError, onAssetUpload, ambient = false }) {
   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);
+  const wrap = el("div", ambient ? "file-drop file-drop-ambient" : "file-drop");
+  if (!ambient) {
+    wrap.tabIndex = 0;
+    wrap.setAttribute("role", "button");
+    // Two hints, swapped by CSS on `.has-thumb`. The empty-state one is the only
+    // thing in an empty tile; the replace one takes over once a preview fills it.
+    // Without the second, a tile showing a part's declared artwork — now the
+    // state a control OPENS in — carried no instruction at all, because the
+    // first is hidden the moment a thumbnail appears.
+    wrap.append(el("span", "file-drop-hint", `Drop ${row?.label ?? "a file"} here, or click to choose`));
+    wrap.append(el("span", "file-drop-hint file-drop-hint-replace", "Drop to replace, or click to choose"));
+  }
 
   // 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);
+  // Ambient mode has no click path, so it gets no input at all — an unused one
+  // would still be focusable in some browsers and would show up to a screen
+  // reader as a second, unlabelled file control.
+  let input = null;
+  if (!ambient) {
+    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
@@ -266,10 +289,15 @@ export function makeFileDrop({ kind, onSource, onError, onAssetUpload }) {
   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 });
+  // Click, keyboard and the input's own change only exist when there is an input
+  // to open — ambient mode is drop-and-paste only, so that the control's real
+  // button keeps every click.
+  if (input) {
+    wrap.addEventListener("click", onClick, { signal });
+    wrap.addEventListener("keydown", onKeydown, { signal });
+    input.addEventListener("change", onChange, { signal });
+  }
 
   return {
     el: wrap,
@@ -295,12 +323,13 @@ export function makeFileDrop({ kind, onSource, onError, onAssetUpload }) {
 // 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 }) {
+export function mountDrop(kind, { params, node, onAssetUpload, onChange, onCommit, onRender, ambient = false }) {
   const errorEl = el("div", "file-drop-error");
   errorEl.hidden = true;
 
   const drop = makeFileDrop({
     kind,
+    ambient,
     onAssetUpload,
     onSource: (source) => {
       errorEl.hidden = true;

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

@@ -86,7 +86,11 @@ export function makeFont(node, params, { onChange, onCommit, info, fontCatalog,
       onCommit?.();
     });
     paintField();
-    wrap.append(field);
+    // Same opt-in rule as image/vector: the URL box appears only for
+    // `sourceField: true`. This branch has no catalog button, so hiding it
+    // leaves the drop zone as the way in — which is why THIS branch keeps its
+    // labelled drop zone rather than going ambient like the catalog one below.
+    if (node.sourceField === true) wrap.append(field);
 
     const drop = mountDrop("font", {
       params, node, onAssetUpload, onChange, onCommit, onRender: paintField,
@@ -146,7 +150,11 @@ export function makeFont(node, params, { onChange, onCommit, info, fontCatalog,
     picker = openFontPicker?.({ node, params, allow, fontCatalog, anchor: wrap, onPicked: () => { paint(); onChange?.(); onCommit?.(); } }) ?? null;
   });
 
-  const drop = mountDrop("font", { params, node, onAssetUpload, onChange, onCommit, onRender: paint });
+  // Ambient: this branch already has the catalog button as its visible way in, so
+  // the drop covers the control invisibly and reveals itself only while a file is
+  // over it. The no-catalog branch above stays labelled — there, the drop zone is
+  // the only affordance and hiding it would strand the user.
+  const drop = mountDrop("font", { params, node, onAssetUpload, onChange, onCommit, onRender: paint, ambient: true });
   wrap.append(drop.el, drop.errorEl);
 
   return {

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

@@ -18,6 +18,7 @@
 import { attachInfo } from "../info.js";
 import { IMAGE_ALLOW_DEFAULT, imageSourceAllowed } from "../../image-source.js";
 import { mountDrop } from "./file-drop.js";
+import { declaredImageUrl } from "../declared-source.js";
 
 function el(tag, className, text) {
   const node = document.createElement(tag);
@@ -40,21 +41,70 @@ export function imageLabel(source) {
   return file || source;
 }
 
-// Point (or unpoint) the live preview. A byte-valued param has no URL to hand
-// the browser, so the image stays hidden rather than trying to render it or
-// showing a broken-image glyph — same rule an empty/unset value gets. `onerror`
-// covers the other broken-image case: a URL that 404s or that CORS refuses.
-function paintPreview(img, source) {
-  if (typeof source === "string" && source) {
+// An object URL is a real resource, not a string: the browser pins the blob
+// behind it until it is revoked, and a panel rebuild constructs a fresh widget
+// every time. This owns the whole lifetime — one live URL at a time, the old one
+// revoked before a new one replaces it, and everything released on dispose — so
+// no caller has to remember. Returns `null` for a value that needs no URL.
+function makeObjectUrlSlot() {
+  let current = null;
+  const release = () => {
+    if (current) URL.revokeObjectURL(current);
+    current = null;
+  };
+  return {
+    forBytes(source) {
+      release();
+      if (!isBytes(source)) return null;
+      // Always image/png: `imageToPng` is what produced these bytes, whatever the
+      // user dropped. The type matters — a Blob with none renders nothing.
+      current = URL.createObjectURL(new Blob([source], { type: "image/png" }));
+      return current;
+    },
+    dispose: release,
+  };
+}
+
+// Point (or unpoint) the live preview. A string source is used directly. Bytes —
+// the partforge-cloud sandbox path, where the converted PNG travels in the param
+// because that sandbox cannot fetch URLs — become an object URL, so the cloud
+// gets the same thumbnail as everyone else rather than a blank tile. `onerror`
+// still covers the remaining broken-image case: a URL that 404s or CORS refuses.
+// Resolved ONCE per paint, never per image: the catalog rendering shows the same
+// source in two <img>s, and asking the slot twice would revoke the URL it had
+// just handed the first one, leaving it pointing at a dead blob.
+function previewSrc(source, urls) {
+  return typeof source === "string" && source ? source : urls.forBytes(source);
+}
+
+// When the control's own param is empty, show what the PART is using: its
+// bundled default lives in the `images` declaration, which is the only place it
+// can live (the allow list passes only https, so a file:/dev URL cannot sit in
+// `defaults`). Resolving it is async — a Vite thunk has to be called — so the
+// tile paints empty first and fills in, and a source that never resolves simply
+// leaves it empty. `seq` guards against a slow resolve landing after a newer one.
+function paintDeclared(img, declaredSource, node, apply) {
+  if (!declaredSource) return;
+  const source = declaredSource("image", node.key);
+  if (source === undefined) return;
+  const seq = ++img._pfDeclaredSeq;
+  declaredImageUrl(source).then((url) => {
+    if (url && seq === img._pfDeclaredSeq) apply(url);
+  });
+}
+
+function applyPreview(img, src) {
+  if (src) {
     img.hidden = false;
-    img.src = source;
+    img.src = src;
   } else {
     img.hidden = true;
     img.removeAttribute("src");
   }
 }
 
-export function makeImage(node, params, { onChange, onCommit, info, imageCatalog, onAssetUpload } = {}) {
+export function makeImage(node, params, { onChange, onCommit, info, imageCatalog, onAssetUpload, declaredSource } = {}) {
+  const urls = makeObjectUrlSlot();   // one live preview URL per widget; see makeObjectUrlSlot
   const allow = Array.isArray(node.allow) && node.allow.length ? node.allow : IMAGE_ALLOW_DEFAULT;
   const wrap = el("div", "slider");
   const row = el("div", "row");
@@ -65,12 +115,12 @@ export function makeImage(node, params, { onChange, onCommit, info, imageCatalog
 
   const preview = document.createElement("img");
   preview.className = "image-preview";
+  preview._pfDeclaredSeq = 0;
   preview.alt = "";
   preview.hidden = true;
   // A URL that fails to load (404, CORS, revoked link) must degrade to hidden,
   // not the browser's broken-image glyph.
   preview.addEventListener("error", () => { preview.hidden = true; });
-  wrap.append(preview);
 
   if (!imageCatalog) {
     // Degraded path: a URL field. Unlike `text`, it does NOT write on every
@@ -88,7 +138,13 @@ export function makeImage(node, params, { onChange, onCommit, info, imageCatalog
       field.value = isBytes(v) ? "" : String(v ?? "");
       field.placeholder = isBytes(v) ? "Uploaded image" : "";
       field.classList.remove("warn");
-      paintPreview(preview, v);
+      const own = previewSrc(v, urls);
+      applyPreview(preview, own);
+      preview.parentElement?.classList.toggle("has-thumb", !preview.hidden);
+      if (!own) paintDeclared(preview, declaredSource, node, (url) => {
+        applyPreview(preview, url);
+        preview.parentElement?.classList.toggle("has-thumb", true);
+      });
     };
     field.addEventListener("change", () => {
       if (!imageSourceAllowed(field.value, allow)) { field.classList.add("warn"); return; }
@@ -98,14 +154,25 @@ export function makeImage(node, params, { onChange, onCommit, info, imageCatalog
       onCommit?.();
     });
     paintField();
-    wrap.append(field);
+    // The URL box is OFF unless `sourceField: true`. The tile is already preview,
+    // drop target and click-to-choose in one, so on a 288 px rail a fourth
+    // affordance for the same job is the one earning its space least. Typing a
+    // source by hand is the rarer intent — a host token or an https URL someone
+    // already has — so it is the part that becomes opt-in, rather than the one
+    // every part pays rail height for.
+    if (node.sourceField === true) wrap.append(field);
 
     const drop = mountDrop("image", {
       params, node, onAssetUpload, onChange, onCommit, onRender: paintField,
     });
+    // The tile IS the preview: dropping, clicking to choose, and showing what is
+    // currently selected become one box rather than three stacked ones.
+    // `has-thumb` swaps the dashed empty-state border for a solid frame.
+    drop.el.setAttribute("data-pf-thumb", "");
+    drop.el.prepend(preview);
     wrap.append(drop.el, drop.errorEl);
 
-    return { el: wrap, sync: paintField, dispose: () => drop.dispose() };
+    return { el: wrap, sync: paintField, dispose: () => { drop.dispose(); urls.dispose(); } };
   }
 
   const btn = el("button", "image-btn");
@@ -131,8 +198,15 @@ export function makeImage(node, params, { onChange, onCommit, info, imageCatalog
   const paint = () => {
     const src = params[node.key];
     const seq = ++paintSeq;
-    paintPreview(preview, src);
-    paintPreview(thumb, src);
+    const url = previewSrc(src, urls);
+    applyPreview(preview, url);
+    applyPreview(thumb, url);
+    preview.parentElement?.classList.toggle("has-thumb", !preview.hidden);
+    if (!url) paintDeclared(preview, declaredSource, node, (u) => {
+      applyPreview(preview, u);
+      applyPreview(thumb, u);
+      preview.parentElement?.classList.toggle("has-thumb", true);
+    });
     const show = ({ label: text, width, height }) => {
       if (seq !== paintSeq) return;                  // a newer paint already won
       iname.textContent = width && height ? `${text} (${width}×${height})` : text;
@@ -162,12 +236,16 @@ export function makeImage(node, params, { onChange, onCommit, info, imageCatalog
   });
 
   const drop = mountDrop("image", { params, node, onAssetUpload, onChange, onCommit, onRender: paint });
+  // Same merge as the degraded branch — the large preview lives in the drop tile;
+  // the catalog button keeps its own small thumb.
+  drop.el.setAttribute("data-pf-thumb", "");
+  drop.el.prepend(preview);
   wrap.append(drop.el, drop.errorEl);
 
   return {
     el: wrap,
     sync: paint,
-    dispose: () => { picker?.close(); picker = null; drop.dispose(); },
+    dispose: () => { picker?.close(); picker = null; drop.dispose(); urls.dispose(); },
   };
 }
 

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

@@ -0,0 +1,136 @@
+// A vector document -> a small inline <svg> preview, for the vector control's
+// thumbnail. MAIN-THREAD ONLY (it builds DOM), but deliberately free of any
+// heavy geometry import: `profile.js` is the one dependency and has no imports
+// of its own. Reaching for `vector-format.js`'s expander instead would pull in
+// contour-ops -> paper-bridge -> paper.js, ~1 MB of curve engine loaded on every
+// page that merely SHOWS a vector control, whether or not anyone drops a file.
+//
+// `tessellateContour` is the geometry's OWN tessellator, which matters more than
+// the saved bytes: a thumbnail that flattened curves its own way could show a
+// shape the kernel would not build. Arcs are the specific trap — the format
+// writes them as a point ON the arc, while SVG's `A` command wants radii and
+// sweep flags, so "just map it to A" is a second interpretation waiting to
+// diverge. At thumbnail size a tessellated arc is pixel-identical anyway.
+import { tessellateContour } from "../../geometry/profile.js";
+
+// Enough segments that a full circle reads as round at ~44 px, cheap enough that
+// a document with hundreds of contours still renders in one frame.
+const ARC_SEGS = 24;
+
+const SVG_NS = "http://www.w3.org/2000/svg";
+
+const finite = (n) => typeof n === "number" && Number.isFinite(n);
+const finitePoint = (p) => Array.isArray(p) && p.length >= 2 && finite(p[0]) && finite(p[1]);
+
+// The four contour kinds, reduced to a ring of points. The three primitives are
+// sugar the format defines by expansion; `toInternalDocument` normally does this,
+// but it lives behind the paper.js import described above — and these expansions
+// are four lines each, so the thumbnail does them directly rather than paying
+// that cost. `path` delegates to the canonical tessellator.
+function ring(contour) {
+  if (!contour || typeof contour !== "object") return null;
+  switch (contour.kind) {
+    case "circle": {
+      const { center: c, r } = contour;
+      if (!finitePoint(c) || !finite(r) || r <= 0) return null;
+      return Array.from({ length: ARC_SEGS }, (_, i) => {
+        const t = (i / ARC_SEGS) * Math.PI * 2;
+        return [c[0] + Math.cos(t) * r, c[1] + Math.sin(t) * r];
+      });
+    }
+    case "rect": {
+      const { center: c, width: w, height: h } = contour;
+      if (!finitePoint(c) || !finite(w) || !finite(h) || w <= 0 || h <= 0) return null;
+      const hw = w / 2, hh = h / 2;
+      // Corner radius is ignored: at thumbnail scale the rounding is sub-pixel,
+      // and squaring it off never changes what the shape reads as.
+      return [[c[0] - hw, c[1] - hh], [c[0] + hw, c[1] - hh], [c[0] + hw, c[1] + hh], [c[0] - hw, c[1] + hh]];
+    }
+    case "polygon":
+      return Array.isArray(contour.points) && contour.points.length >= 3
+        && contour.points.every(finitePoint) ? contour.points.map((p) => [p[0], p[1]]) : null;
+    case "path":
+    default: {
+      if (!finitePoint(contour.start) || !Array.isArray(contour.segments)) return null;
+      // The FILE format names an arc's midpoint `through`; the internal contour
+      // IR names it `via`, and that is what `tessellateContour` reads. A document
+      // read off disk or returned by `ingestSvg` therefore speaks `through`, and
+      // a segment with neither key is treated as a straight line — so skipping
+      // this rename does not fail loudly, it silently replaces every curve with
+      // its chord. A circle becomes a triangle, which looks like a rendering bug
+      // rather than a parsing one.
+      const segments = contour.segments.map((seg) =>
+        seg && seg.through && !seg.via ? { ...seg, via: seg.through } : seg);
+      const pts = tessellateContour({ ...contour, segments }, ARC_SEGS);
+      return Array.isArray(pts) && pts.length >= 3 && pts.every(finitePoint) ? pts : null;
+    }
+  }
+}
+
+// One subpath. Y is negated because the model frame is y-up and SVG is y-down;
+// the viewBox is negated to match, so the flip is a coordinate convention rather
+// than a transform the caller has to know about.
+const subpath = (pts) =>
+  `M ${pts.map(([x, y], i) => `${i ? "L " : ""}${+x.toFixed(3)} ${+(-y).toFixed(3)}`).join(" ")} Z`;
+
+/**
+ * Render a partforge-vector document as an inline <svg>, or return `null` when
+ * there is nothing renderable — an empty document, or one whose coordinates are
+ * not finite. Returning null rather than throwing keeps a malformed document
+ * from taking the control down with it; the caller falls back to a placeholder.
+ */
+export function vectorThumb(doc) {
+  const shapes = doc?.shapes;
+  if (!shapes || typeof shapes !== "object") return null;
+
+  // Every region from every shape lands in ONE path so `evenodd` composes them:
+  // a `subtract` shape's regions then cut the shapes they overlap, which is what
+  // the document means. The known limitation is that two overlapping regions of
+  // the SAME role also cancel — real composition is a boolean the panel has no
+  // business running. At preview size that trade is invisible, and a missing hole
+  // would be far more misleading than a rare cancelled overlap.
+  const subpaths = [];
+  let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+
+  for (const shape of Object.values(shapes)) {
+    // A shape is either an array of regions, or `{ role, regions }` — §2.3.
+    const regions = Array.isArray(shape) ? shape : shape?.regions;
+    if (!Array.isArray(regions)) continue;
+    for (const region of regions) {
+      for (const contour of [region?.outer, ...(region?.holes ?? [])]) {
+        if (contour === undefined) continue;
+        const pts = ring(contour);
+        if (!pts) return null;   // a bad coordinate anywhere means the preview would lie
+        for (const [x, y] of pts) {
+          if (x < minX) minX = x;
+          if (x > maxX) maxX = x;
+          if (y < minY) minY = y;
+          if (y > maxY) maxY = y;
+        }
+        subpaths.push(subpath(pts));
+      }
+    }
+  }
+  if (!subpaths.length) return null;
+
+  // `bbox` is optional and "recomputed when absent" (§2.1), so a hand-authored
+  // document routinely has none. Trusting it when present keeps the preview
+  // framed the way the document says it should be; deriving it otherwise is what
+  // makes an authored file previewable at all.
+  const b = doc.bbox;
+  const box = b && [b.minX, b.minY, b.maxX, b.maxY].every(finite)
+    ? b : { minX, minY, maxX, maxY };
+  const w = box.maxX - box.minX, h = box.maxY - box.minY;
+  if (!(w > 0) || !(h > 0)) return null;
+
+  const svg = document.createElementNS(SVG_NS, "svg");
+  svg.setAttribute("viewBox", `${+box.minX.toFixed(3)} ${+(-box.maxY).toFixed(3)} ${+w.toFixed(3)} ${+h.toFixed(3)}`);
+  svg.setAttribute("preserveAspectRatio", "xMidYMid meet");
+  svg.setAttribute("aria-hidden", "true");   // decorative; the control carries the label
+
+  const path = document.createElementNS(SVG_NS, "path");
+  path.setAttribute("d", subpaths.join(" "));
+  path.setAttribute("fill-rule", "evenodd");
+  svg.append(path);
+  return svg;
+}

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

@@ -19,6 +19,8 @@
 import { attachInfo } from "../info.js";
 import { VECTOR_ALLOW_DEFAULT, vectorSourceAllowed } from "../../vector-source.js";
 import { mountDrop } from "./file-drop.js";
+import { vectorThumb } from "./vector-thumb.js";
+import { declaredVectorDoc } from "../declared-source.js";
 
 function el(tag, className, text) {
   const node = document.createElement(tag);
@@ -34,7 +36,7 @@ const isBytes = (v) => v instanceof ArrayBuffer || ArrayBuffer.isView(v);
 // byte-valued param.
 const isOpaque = (v) => isBytes(v) || (v != null && typeof v === "object");
 
-export function makeVector(node, params, { onChange, onCommit, info, onAssetUpload } = {}) {
+export function makeVector(node, params, { onChange, onCommit, info, onAssetUpload, declaredSource } = {}) {
   const allow = Array.isArray(node.allow) && node.allow.length ? node.allow : VECTOR_ALLOW_DEFAULT;
   const wrap = el("div", "slider");
   const row = el("div", "row");
@@ -66,12 +68,53 @@ export function makeVector(node, params, { onChange, onCommit, info, onAssetUplo
     onCommit?.();
   });
   paintField();
-  wrap.append(field);
+  // The URL box is OFF unless `sourceField: true` — same reasoning as
+  // widgets/image.js: the tile already carries preview, drop and click-to-choose,
+  // and typing a source by hand is the rarer intent.
+  if (node.sourceField === true) wrap.append(field);
 
+  // The thumbnail IS the drop target. A vector param holds a parsed document, so
+  // there is no URL an <img> could point at — the artwork is drawn inline
+  // instead, and that tile is what a file is dropped on and what opens the file
+  // picker. One element doing all three keeps the rail's 300 px from carrying a
+  // preview, a drop zone and a button that all mean the same thing.
   const drop = mountDrop("vector", {
-    params, node, onAssetUpload, onChange, onCommit, onRender: paintField,
+    params, node, onAssetUpload, onChange, onCommit, onRender: () => { paintField(); paintThumb(); },
   });
-  wrap.append(drop.el, drop.errorEl);
+  const thumb = drop.el;
+  thumb.setAttribute("data-pf-thumb", "");
 
-  return { el: wrap, sync: paintField, dispose: () => drop.dispose() };
+  // `vectorThumb` returns null for a document it cannot draw — malformed, empty,
+  // or carrying a coordinate that is not finite — rather than throwing. The tile
+  // stays either way, because it is the drop target: losing it on a bad document
+  // would strand the user with no way to replace it.
+  let thumbSeq = 0;
+  function showThumb(doc) {
+    const art = thumb.querySelector("svg");
+    if (art) art.remove();
+    const svg = doc ? vectorThumb(doc) : null;
+    thumb.classList.toggle("has-thumb", !!svg);
+    if (svg) thumb.prepend(svg);
+  }
+  function paintThumb() {
+    const own = params[node.key];
+    const seq = ++thumbSeq;
+    if (isOpaque(own)) { showThumb(own); return; }
+    showThumb(null);
+    // Nothing in the param — fall back to what the PART declares, which is where
+    // a bundled default has to live (the allow list passes only https, so a
+    // file:/dev URL cannot sit in `defaults`). Unlike an image there is nothing
+    // to point at: the document must be fetched and parsed before it can be
+    // drawn, so this lands a tick or two later, and a source that never resolves
+    // just leaves the tile empty — it stays a drop target either way.
+    const source = declaredSource?.("vector", node.key);
+    if (source === undefined) return;
+    declaredVectorDoc(source).then((doc) => { if (doc && seq === thumbSeq) showThumb(doc); });
+  }
+  paintThumb();
+
+  wrap.append(thumb, drop.errorEl);
+
+  const sync = () => { paintField(); paintThumb(); };
+  return { el: wrap, sync, dispose: () => drop.dispose() };
 }