@weasel-js/svg 1.6.0 → 1.7.0

package/dist/index.js

@@ -1,4 +1,4 @@
-import { pathFromD, PATH_M, PATH_L, PATH_Z, boundsOfPath, resolveScreenLength, SCRIPT_METRICS, dwarn, getMarker, registerMarker, createInsertOp, PathBuilder, parseColor, rgbaToHex, resolveTextStyle, layoutRuns, resolveRuns, resolveAlign, PATH_C, PATH_Q, solid, fillToBoundsFrame, getPaintKind } from '@weasel-js/core';
+import { pathFromD, PATH_M, PATH_L, PATH_Z, boundsOfPath, resolveScreenLength, SCRIPT_METRICS, solid, fillToBoundsFrame, getMarker, registerMarker, dwarn, unionAABB, createInsertOp, fillInPoseFrame, DEFAULT_SHAPE_FILL, pathInPoseFrame, DEFAULT_TEXT_STYLE, PathBuilder, parseColor, rgbaToHex, resolveTextStyle, layoutRuns, resolveRuns, resolveAlign, PATH_C, PATH_Q, resolveMarkerSize, getPaintKind } from '@weasel-js/core';
 import { identity, multiply, invert } from '@weasel-js/geom';
 import { tileGeometry } from '@weasel-js/core/patterns-builtin';
 
@@ -682,13 +682,18 @@ function serializePathD(path) {
 // src/gradients.ts
 var WEASEL_NS = "urn:weasel-js:svg";
 var WEASEL_NS_PREFIX = "wzl";
-function hasNativeSvgForm(paint) {
-  const kind = paint.fill ?? "solid";
+function nativeSvgKind(kind) {
   return kind === "solid" || kind === "linear-gradient" || kind === "radial-gradient" || kind === "pattern";
 }
+function hasNativeSvgForm(paint) {
+  return nativeSvgKind(paint.fill ?? "solid");
+}
 var INTERPOLATE_SPACES = /* @__PURE__ */ new Set(["rgb", "oklab", "oklch"]);
+function nativeSvgSpace(space) {
+  return !space || space === "rgb";
+}
 function interpolateAttr(space) {
-  if (!space || space === "rgb") return "";
+  if (nativeSvgSpace(space)) return "";
   return ` ${WEASEL_NS_PREFIX}:interpolate="${space}"`;
 }
 function readInterpolate(el, elements) {
@@ -698,7 +703,7 @@ function readInterpolate(el, elements) {
 }
 function usesInterpolateAttr(paint) {
   const space = paint.interpolate;
-  return space != null && space !== "rgb" && INTERPOLATE_SPACES.has(space);
+  return !nativeSvgSpace(space) && INTERPOLATE_SPACES.has(space);
 }
 function localName(tag) {
   const i = tag.indexOf(":");
@@ -773,8 +778,8 @@ function readStops(el, onWarn) {
     const colorAttr = ownProp(c, "stop-color") ?? "#000000";
     const parsed = parsePaintAttr(colorAttr);
     if (parsed && parsed.kind === "solid") {
-      const opacityAttr = ownProp(c, "stop-opacity");
-      const own = opacityAttr != null ? parseRatio(opacityAttr) : NaN;
+      const opacityAttr2 = ownProp(c, "stop-opacity");
+      const own = opacityAttr2 != null ? parseRatio(opacityAttr2) : NaN;
       const alpha = Number.isFinite(own) ? own : parsed.alpha;
       stops.push({ offset, color: alpha < 1 ? applyAlpha(parsed.color, alpha) : parsed.color });
     } else {
@@ -877,12 +882,13 @@ var PaintServerRegistry = class {
   byPaint = /* @__PURE__ */ new Map();
   order = [];
   counter = 0;
-  // Marker keys referenced by any stroke, in first-use order. The `<defs>`
-  // id is the marker key itself, not a minted counter id: `parseSvg` reads a
-  // `marker-end="url(#id)"` fragment back as the marker key directly when the
-  // registry knows it, so a synthetic id would come back as a stranger.
-  markerKeys = [];
-  markerKeySet = /* @__PURE__ */ new Set();
+  // Marker defs referenced by any stroke, by `<defs>` id in first-use order.
+  // An unsized reference's id is the marker key itself, not a minted counter
+  // id: `parseSvg` reads a `marker-end="url(#id)"` fragment back as the marker
+  // key directly when the registry knows it, so a synthetic id would come
+  // back as a stranger. A sized one gets a def of its own, stamped with its
+  // key and size so the parser can read the reference back whole.
+  markers = /* @__PURE__ */ new Map();
   // Clip paths, in first-use order. Identity, not value: two groups clipped by
   // equal outlines get a def each, which costs bytes and misleads nobody.
   clips = [];
@@ -910,19 +916,19 @@ var PaintServerRegistry = class {
   /** Whether any registered paint serializes outside SVG's own vocabulary, so
    *  the root has to declare {@link WEASEL_NS}. */
   usesPrivateNamespace() {
-    return this.order.some((paint) => !hasNativeSvgForm(paint) || usesInterpolateAttr(paint));
+    return this.order.some((paint) => !hasNativeSvgForm(paint) || usesInterpolateAttr(paint)) || [...this.markers.values()].some((m) => m.size !== void 0 || writesInset(getMarker(m.key)));
   }
-  /** The `<defs>` id for a marker key — the key itself, minting nothing.
-   *  `undefined` when nothing is registered under `key`, so a caller emits no
-   *  attribute at all rather than a `url(#…)` pointing at a def that will
-   *  never be written. */
-  markerId(key) {
+  /** The `<defs>` id for a marker reference — the key itself when it has no
+   *  size, else the key suffixed with the size. `undefined` when nothing is
+   *  registered under the key, so a caller emits no attribute at all rather
+   *  than a `url(#…)` pointing at a def that will never be written. */
+  markerId(ref) {
+    const key = typeof ref === "string" ? ref : ref.key;
+    const size = typeof ref === "string" ? void 0 : ref.size;
     if (getMarker(key) === void 0) return void 0;
-    if (!this.markerKeySet.has(key)) {
-      this.markerKeySet.add(key);
-      this.markerKeys.push(key);
-    }
-    return key;
+    const id = size === void 0 ? key : `${key}-s${typeof size === "number" ? trimNumber(size) : `${trimNumber(size.px)}px`}`;
+    if (!this.markers.has(id)) this.markers.set(id, size === void 0 ? { key } : { key, size });
+    return id;
   }
   /** Mint (or recall) the `<defs>` id for a clip outline. */
   clipId(path) {
@@ -936,17 +942,22 @@ var PaintServerRegistry = class {
   /** Emit `<defs>...</defs>` XML for every registered paint server, marker
    *  and clip path. */
   toDefsXml(onWarn) {
-    if (this.order.length === 0 && this.markerKeys.length === 0 && this.clips.length === 0) {
+    if (this.order.length === 0 && this.markers.size === 0 && this.clips.length === 0) {
       return "";
     }
     const parts = ["<defs>"];
     for (const paint of this.order) {
       parts.push(paintServerXml(this.byPaint.get(paint), paint, onWarn));
     }
-    for (const key of this.markerKeys) {
+    for (const [id, { key, size }] of this.markers) {
       const entry = getMarker(key);
       if (!entry) continue;
-      parts.push(entry.toSvg ? entry.toSvg(key, entry) : defaultMarkerXml(key, entry, onWarn));
+      if (entry.toSvg) {
+        if (size !== void 0) onWarn?.(`marker "${key}" writes its own <marker> def, which cannot carry a reference's size; written at its own size`);
+        parts.push(entry.toSvg(id, entry));
+      } else {
+        parts.push(defaultMarkerXml(id, entry, onWarn, key, size));
+      }
     }
     for (const path of this.clips) {
       parts.push(
@@ -957,13 +968,19 @@ var PaintServerRegistry = class {
     return parts.join("");
   }
 };
-function defaultMarkerXml(id, entry, onWarn) {
-  const path = entry.path({ size: 1, stroke: { paint: { fill: "solid", color: "#000" } } });
+function writesInset(entry) {
+  return entry !== void 0 && !entry.toSvg && (entry.inset ?? 0) !== 0;
+}
+function defaultMarkerXml(id, entry, onWarn, key, size) {
+  const unit = size === void 0 ? 1 : resolveMarkerSize({ key: key ?? id, size }, 1);
+  const path = entry.path({ size: unit, stroke: { paint: { fill: "solid", color: "#000" } } });
   const d = serializePathD(path);
   const fill = markerPaintAttrs("fill", entry.fill, id, onWarn);
-  const outline = entry.outline ? ` ${markerPaintAttrs("stroke", entry.outline.paint, id, onWarn)} stroke-width="${trimNumber(entry.outline.width)}" stroke-linecap="round" stroke-linejoin="round"` : "";
+  const outline = entry.outline ? ` ${markerPaintAttrs("stroke", entry.outline.paint, id, onWarn)} stroke-width="${trimNumber(entry.outline.width * unit)}" stroke-linecap="round" stroke-linejoin="round"` : "";
   const orient = typeof entry.orient === "number" ? trimNumber(entry.orient * 180 / Math.PI) : "auto-start-reverse";
-  return `<marker id="${id}" markerUnits="strokeWidth" markerWidth="8" markerHeight="8" refX="0" refY="0" orient="${orient}" overflow="visible"><path d="${d}" ${fill}${outline}/></marker>`;
+  const units = size === void 0 ? 'markerUnits="strokeWidth" markerWidth="8" markerHeight="8"' : `markerUnits="userSpaceOnUse" markerWidth="${trimNumber(8 * unit)}" markerHeight="${trimNumber(8 * unit)}" ${WEASEL_NS_PREFIX}:key="${key}" ${WEASEL_NS_PREFIX}:size="${typeof size === "number" ? trimNumber(size) : `${trimNumber(size.px)}px`}"`;
+  const inset = writesInset(entry) ? ` ${WEASEL_NS_PREFIX}:inset="${trimNumber(entry.inset)}"` : "";
+  return `<marker id="${id}" ${units}${inset} refX="0" refY="0" orient="${orient}" overflow="visible"><path d="${d}" ${fill}${outline}/></marker>`;
 }
 function markerPaintAttrs(attr, paint, id, onWarn) {
   if (paint === "none") return `${attr}="none"`;
@@ -1415,7 +1432,7 @@ function readPaint(style, attr, defaultColor, gradients, onWarn) {
       onWarn(`${attr} references unknown gradient #${parsed.id}`);
       return { kind: "solid", color: defaultColor };
     }
-    return { kind: "gradient", paint };
+    return { kind: "gradient", paint: opacity != null ? { ...paint, opacity } : paint };
   }
   const out = { kind: "solid", color: parsed.color };
   const a = opacity ?? (parsed.alpha < 1 ? parsed.alpha : void 0);
@@ -1923,6 +1940,16 @@ function ingestMarkers(root, nodes, gradients, onWarn) {
         delete stroke[field];
         continue;
       }
+      const sized = sizedMarkerRef(el);
+      if (sized) {
+        if (getMarker(sized.key) === void 0 && !minted.has(sized.key)) {
+          const entry2 = markerEntryFrom(el, id, role, resolveMarkerSize(sized, 1), gradients, onWarn);
+          minted.set(sized.key, entry2 && { ...entry2, id: sized.key });
+        }
+        if (minted.get(sized.key) === null) delete stroke[field];
+        else stroke[field] = sized;
+        continue;
+      }
       const cacheKey = `${id}\0${role}\0${w}`;
       if (!minted.has(cacheKey)) minted.set(cacheKey, markerEntryFrom(el, id, role, w, gradients, onWarn));
       const entry = minted.get(cacheKey);
@@ -1945,6 +1972,22 @@ function ingestMarkers(root, nodes, gradients, onWarn) {
   for (const entry of minted.values()) if (entry) out.set(entry.id, entry);
   return [...out.values()];
 }
+function weaselAttr(el, name) {
+  return el.getAttributeNS(WEASEL_NS, name) ?? el.getAttribute(`${WEASEL_NS_PREFIX}:${name}`);
+}
+function sizedMarkerRef(el) {
+  const key = weaselAttr(el, "key");
+  const raw = weaselAttr(el, "size")?.trim();
+  if (!key || !raw) return void 0;
+  const px = raw.endsWith("px");
+  const n = parseFloat(px ? raw.slice(0, -2) : raw);
+  if (!Number.isFinite(n) || n <= 0) return void 0;
+  return { key, size: px ? { px: n } : n };
+}
+function markerInsetAttr(el) {
+  const n = parseFloat(weaselAttr(el, "inset") ?? "");
+  return Number.isFinite(n) && n > 0 ? n : 0;
+}
 function styleAt(el) {
   const chain = [];
   for (let e = el; e; e = e.parentElement) chain.unshift(e);
@@ -2066,6 +2109,7 @@ function markerEntryFrom(el, id, role, strokeWidth, gradients, onWarn) {
     pi += p.path.coords.length;
   }
   const fillRule = parts[0].path.fillRule ?? "nonzero";
+  const inset = markerInsetAttr(el);
   const round = (v) => Math.round(v * 1e4) / 1e4 + 0;
   const hash = shortHash(JSON.stringify([
     Array.from(commands),
@@ -2073,11 +2117,13 @@ function markerEntryFrom(el, id, role, strokeWidth, gradients, onWarn) {
     fillRule,
     fill,
     outline,
-    typeof orient === "number" ? round(orient) : orient
+    typeof orient === "number" ? round(orient) : orient,
+    ...inset !== 0 ? [round(inset)] : []
   ]));
   const key = id.endsWith(`-${hash}`) ? id : `${id}-${hash}`;
   return {
     id: key,
+    reads: [],
     path: ({ size }) => {
       const scaled = new Float32Array(coords.length);
       for (let i = 0; i < coords.length; i++) scaled[i] = coords[i] * size;
@@ -2086,7 +2132,7 @@ function markerEntryFrom(el, id, role, strokeWidth, gradients, onWarn) {
     fill,
     outline,
     orient,
-    inset: 0
+    inset
   };
 }
 function serializeSvg(nodes, opts = {}) {
@@ -2198,16 +2244,10 @@ function registerPaintServers(nodes, registry) {
 function registerTextPaint(paint, registry) {
   if (paint && !("color" in paint)) registry.register(paint);
 }
-function markerKeyOfRef(ref) {
-  if (typeof ref === "string") return ref;
-  if (ref && typeof ref === "object" && "key" in ref) return String(ref.key);
-  return void 0;
-}
 function registerMarkers(stroke, registry) {
   if (!stroke) return;
   for (const ref of [stroke.markerStart, stroke.markerMid, stroke.markerEnd]) {
-    const key = markerKeyOfRef(ref);
-    if (key) registry.markerId(key);
+    if (ref !== void 0) registry.markerId(ref);
   }
 }
 function nodeXml(node, registry, namespaces, warn) {
@@ -2296,14 +2336,16 @@ function pathXml(node, registry, namespaces, warn) {
 }
 function paintAttrs(paint, name, registry, includeOpacity = true) {
   if (paint.kind === "none") return [`${name}="none"`];
-  if (paint.kind === "solid") {
-    const out = [`${name}="${paint.color}"`];
-    if (includeOpacity && paint.opacity != null && paint.opacity !== 1) {
-      out.push(`${name}-opacity="${trimNumber(paint.opacity)}"`);
-    }
-    return out;
-  }
-  return [`${name}="${registry.ref(paint.paint)}"`];
+  const out = [`${name}="${paint.kind === "solid" ? paint.color : registry.ref(paint.paint)}"`];
+  if (includeOpacity) out.push(...opacityAttr(`${name}-opacity`, svgPaintOpacity(paint)));
+  return out;
+}
+function svgPaintOpacity(paint) {
+  if (paint.kind === "solid") return paint.opacity;
+  return paint.kind === "gradient" ? paint.paint.opacity : void 0;
+}
+function opacityAttr(name, v) {
+  return v != null && v !== 1 ? [`${name}="${trimNumber(v)}"`] : [];
 }
 function strokeWidthAttrs(width) {
   if (typeof width === "number") return [`stroke-width="${trimNumber(width)}"`];
@@ -2315,15 +2357,8 @@ function coreStrokeAttrs(stroke, registry, warn) {
   const width = stroke.width ?? 1;
   if (!((typeof width === "object" ? width.px : width) > 0)) return [];
   warnStrokeAlign(stroke.align, warn);
-  const attrs = [];
-  if ("color" in paint) {
-    attrs.push(`stroke="${paint.color}"`);
-    if (paint.opacity != null && paint.opacity !== 1) {
-      attrs.push(`stroke-opacity="${trimNumber(paint.opacity)}"`);
-    }
-  } else {
-    attrs.push(`stroke="${registry.ref(paint)}"`);
-  }
+  const attrs = [`stroke="${"color" in paint ? paint.color : registry.ref(paint)}"`];
+  attrs.push(...opacityAttr("stroke-opacity", paint.opacity));
   attrs.push(...strokeWidthAttrs(width));
   if (stroke.cap) attrs.push(`stroke-linecap="${stroke.cap}"`);
   if (stroke.join) attrs.push(`stroke-linejoin="${stroke.join}"`);
@@ -2338,8 +2373,7 @@ function coreStrokeAttrs(stroke, registry, warn) {
   ]) {
     const ref = stroke[field];
     if (ref === void 0) continue;
-    const key = typeof ref === "string" ? ref : ref.key;
-    const id = registry.markerId(key);
+    const id = registry.markerId(ref);
     if (id === void 0) continue;
     attrs.push(`${attr}="url(#${id})"`);
   }
@@ -2349,10 +2383,7 @@ function strokeAttrsFor(stroke, registry, warn) {
   warnStrokeAlign(stroke.align, warn);
   const attrs = paintAttrs(stroke.paint, "stroke", registry, false);
   attrs.push(...strokeWidthAttrs(stroke.width));
-  const opacity = stroke.opacity ?? (stroke.paint.kind === "solid" ? stroke.paint.opacity : void 0);
-  if (opacity != null && opacity !== 1) {
-    attrs.push(`stroke-opacity="${trimNumber(opacity)}"`);
-  }
+  attrs.push(...opacityAttr("stroke-opacity", stroke.opacity ?? svgPaintOpacity(stroke.paint)));
   if (stroke.cap) {
     attrs.push(`stroke-linecap="${stroke.cap}"`);
   }
@@ -2441,6 +2472,7 @@ function textXml(node, registry, namespaces, warn) {
   }
   const decoration = textDecorationValue(style?.underline, style?.strikethrough, style?.overline);
   if (decoration) attrs.push(`text-decoration="${decoration}"`);
+  if (style?.script) attrs.push(`baseline-shift="${style.script}"`);
   if (style?.textTransform && style.textTransform !== "none") {
     attrs.push(`style="text-transform:${style.textTransform}"`);
   }
@@ -2455,14 +2487,8 @@ function textXml(node, registry, namespaces, warn) {
   if (node.fill === null) {
     attrs.push('fill="none"');
   } else if (node.fill) {
-    if ("color" in node.fill) {
-      attrs.push(`fill="${node.fill.color}"`);
-      if (node.fill.opacity != null && node.fill.opacity !== 1) {
-        attrs.push(`fill-opacity="${trimNumber(node.fill.opacity)}"`);
-      }
-    } else {
-      attrs.push(`fill="${registry.ref(node.fill)}"`);
-    }
+    attrs.push(`fill="${"color" in node.fill ? node.fill.color : registry.ref(node.fill)}"`);
+    attrs.push(...opacityAttr("fill-opacity", node.fill.opacity));
   }
   for (const a of coreStrokeAttrs(node.stroke, registry, warn)) attrs.push(a);
   if (node.opacity != null && node.opacity !== 1) {
@@ -2549,17 +2575,31 @@ var svgIdCounter = 0;
 function freshSvgNodeId() {
   return `n${(svgIdCounter++).toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
 }
-function fillFromPaint(paint, box) {
+function fillDataFromSvg(paint, box) {
   if (!paint) return void 0;
   if (paint.kind === "none") return null;
-  if (paint.kind === "solid") return solid(paint.color);
-  const g = paint.paint;
-  const units = "units" in g ? g.units : void 0;
-  return units === "world" ? fillToBoundsFrame(g, box) : g;
+  if (paint.kind === "solid") {
+    return paint.opacity != null ? { ...solid(paint.color), opacity: paint.opacity } : solid(paint.color);
+  }
+  return fillInBoxFrame(paint.paint, box);
+}
+function fadeFill(fill, k) {
+  return k === 1 ? fill : { ...fill, opacity: (fill.opacity ?? 1) * k };
+}
+function fadeStroke(stroke, k) {
+  return k === 1 || !stroke.paint ? stroke : { ...stroke, paint: fadeFill(stroke.paint, k) };
+}
+function fadeRun(run, k) {
+  if (k === 1 || !run.fill && !run.stroke) return run;
+  return {
+    ...run,
+    ...run.fill ? { fill: fadeFill(run.fill, k) } : {},
+    ...run.stroke ? { stroke: fadeStroke(run.stroke, k) } : {}
+  };
 }
 function strokeDataFromSvg(stroke, box) {
   if (!stroke || stroke.paint.kind === "none") return void 0;
-  const paint = fillFromPaint(stroke.paint, box);
+  const paint = fillDataFromSvg(stroke.paint, box);
   if (paint === void 0 || paint === null) return void 0;
   return {
     paint: stroke.opacity !== void 0 ? { ...paint, opacity: stroke.opacity } : paint,
@@ -2573,22 +2613,6 @@ function strokeDataFromSvg(stroke, box) {
     ...stroke.markerEnd !== void 0 ? { markerEnd: stroke.markerEnd } : {}
   };
 }
-function svgImageFromKit(image, pose) {
-  const node = {
-    kind: "image",
-    href: image.src,
-    x: pose.x,
-    y: pose.y,
-    width: pose.width,
-    height: pose.height
-  };
-  if (image.source) node.source = { ...image.source };
-  if (image.flipX) node.flipX = true;
-  if (image.flipY) node.flipY = true;
-  if (image.opacity != null) node.opacity = image.opacity;
-  if (pose.rotation) node.rotation = pose.rotation;
-  return node;
-}
 function fillInBoxFrame(fill, box) {
   const units = "units" in fill ? fill.units : void 0;
   return units === "world" ? fillToBoundsFrame(fill, box) : fill;
@@ -2604,28 +2628,36 @@ function strokeInBoxFrame(stroke, box) {
   const paint = fillInBoxFrame(stroke.paint, box);
   return paint === stroke.paint ? stroke : { ...stroke, paint };
 }
-function svgNodesToKitDrafts(nodes, nextId) {
+function svgNodesToKitDrafts(input, nextId, options = {}) {
+  const nodes = isNodeList(input) ? input : input.nodes;
+  if (!isNodeList(input)) {
+    for (const m of input.markers ?? []) if (getMarker(m.id) === void 0) registerMarker(m);
+  }
   const drafts = [];
-  const visit = (n, parentId) => {
+  const pushLeaf = (source, parentId, pose, data) => {
+    const id = nextId(source);
+    const out = options.leaf ? options.leaf(id, { pose, data }, source) : data;
+    if (out === null) return null;
+    drafts.push({ kind: "leaf", id, parentId, pose, data: out });
+    return pose;
+  };
+  const visit = (n, parentId, inherited) => {
+    const k = inherited * (n.opacity ?? 1);
     if (n.kind === "group") {
       const draft = {
         kind: "container",
-        id: nextId(),
+        id: nextId(n),
         parentId,
         pose: { x: 0, y: 0, width: 0, height: 0 }
       };
       drafts.push(draft);
-      let acc = null;
-      for (const c of n.children) {
-        const b2 = visit(c, draft.id);
-        if (b2) acc = acc ? unionRect(acc, b2) : b2;
-      }
+      const acc = unionAABB(n.children.map((c) => visit(c, draft.id, k)));
       if (!acc) {
         drafts.splice(drafts.indexOf(draft), 1);
         return null;
       }
       draft.pose = acc;
-      return acc;
+      return draft.pose;
     }
     if (n.kind === "text") {
       const pose2 = {
@@ -2641,65 +2673,48 @@ function svgNodesToKitDrafts(nodes, nextId) {
         width: pose2.width,
         height: pose2.height
       };
-      drafts.push({
-        kind: "leaf",
-        id: nextId(),
-        parentId,
-        pose: pose2,
-        data: {
-          text: n.text,
-          ...n.style ? { style: n.style } : {},
-          ...n.verticalAlign ? { verticalAlign: n.verticalAlign } : {},
-          ...n.runs ? { runs: n.runs.map((r) => runInBoxFrame(r, box)) } : {},
-          // `!== undefined`, not a truthiness test: `null` is the document
-          // saying `fill="none"`, and absent takes the painter's default.
-          ...n.fill !== void 0 ? { fill: n.fill === null ? null : fillInBoxFrame(n.fill, box) } : {},
-          ...n.stroke !== void 0 ? { stroke: strokeInBoxFrame(n.stroke, box) } : {}
-        }
+      const fill2 = n.fill === void 0 && k !== 1 ? DEFAULT_TEXT_STYLE.fill : n.fill;
+      return pushLeaf(n, parentId, pose2, {
+        text: n.text,
+        ...n.style ? { style: n.style } : {},
+        ...n.verticalAlign ? { verticalAlign: n.verticalAlign } : {},
+        ...n.runs ? { runs: n.runs.map((r) => fadeRun(runInBoxFrame(r, box), k)) } : {},
+        // `!== undefined`, not a truthiness test: `null` is the document
+        // saying `fill="none"`, and absent takes the painter's default.
+        ...fill2 !== void 0 ? { fill: fill2 === null ? null : fadeFill(fillInBoxFrame(fill2, box), k) } : {},
+        ...n.stroke !== void 0 ? { stroke: fadeStroke(strokeInBoxFrame(n.stroke, box), k) } : {}
       });
-      return pose2;
     }
     if (n.kind === "image") {
       const pose2 = { x: n.x, y: n.y, width: n.width, height: n.height };
       if (n.rotation) pose2.rotation = n.rotation;
-      drafts.push({
-        kind: "leaf",
-        id: nextId(),
-        parentId,
-        pose: pose2,
-        data: {
-          image: {
-            src: n.href,
-            ...n.opacity != null ? { opacity: n.opacity } : {},
-            ...n.source ? { source: { ...n.source } } : {},
-            ...n.flipX ? { flipX: true } : {},
-            ...n.flipY ? { flipY: true } : {}
-          }
+      return pushLeaf(n, parentId, pose2, {
+        image: {
+          src: n.href,
+          ...k !== 1 ? { opacity: k } : {},
+          ...n.source ? { source: { ...n.source } } : {},
+          ...n.flipX ? { flipX: true } : {},
+          ...n.flipY ? { flipY: true } : {}
         }
       });
-      return pose2;
     }
     const b = n.path.kind === "rect" ? { x: n.path.x, y: n.path.y, width: n.path.width, height: n.path.height } : boundsOfPath(n.path);
     const pose = { x: b.x, y: b.y, width: b.width, height: b.height };
     if (n.rotation) pose.rotation = n.rotation;
-    const fill = fillFromPaint(n.fill, b);
+    const fill = fillDataFromSvg(n.fill, b);
     const strokeFromSvg = strokeDataFromSvg(n.stroke, b);
-    drafts.push({
-      kind: "leaf",
-      id: nextId(),
-      parentId,
-      pose,
-      data: {
-        path: n.path,
-        ...fill !== void 0 ? { fill } : {},
-        ...strokeFromSvg !== void 0 ? { stroke: strokeFromSvg } : {}
-      }
+    return pushLeaf(n, parentId, pose, {
+      path: n.path,
+      ...fill !== void 0 ? { fill: fill && fadeFill(fill, k) } : {},
+      ...strokeFromSvg !== void 0 ? { stroke: fadeStroke(strokeFromSvg, k) } : {}
     });
-    return pose;
   };
-  for (const n of nodes) visit(n, null);
+  for (const n of nodes) visit(n, null, 1);
   return drafts;
 }
+function isNodeList(input) {
+  return Array.isArray(input);
+}
 function scaleTextData(data, scale) {
   if (scale === 1 || typeof data.text !== "string") return data;
   const style = data.style ?? {};
@@ -2713,13 +2728,6 @@ function scaleTextData(data, scale) {
     style: { ...style, fontSize: scaleSize(style.fontSize ?? resolveTextStyle(style).fontSize) }
   };
 }
-function unionRect(a, b) {
-  const minX = Math.min(a.x, b.x);
-  const minY = Math.min(a.y, b.y);
-  const maxX = Math.max(a.x + a.width, b.x + b.width);
-  const maxY = Math.max(a.y + a.height, b.y + b.height);
-  return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
-}
 async function unpackSvgFiles(files, ctx) {
   const layer = ctx.scene.layers[0]?.id ?? "default";
   let index = 0;
@@ -2728,8 +2736,7 @@ async function unpackSvgFiles(files, ctx) {
       const text = await readFileText(file);
       const parsed = parseSvg(text);
       for (const w of parsed.warnings) dwarn("ingest", `svg "${file.name}":`, w);
-      for (const m of parsed.markers ?? []) if (getMarker(m.id) === void 0) registerMarker(m);
-      let drafts = svgNodesToKitDrafts(parsed.nodes, freshSvgNodeId);
+      let drafts = svgNodesToKitDrafts(parsed, freshSvgNodeId);
       if (drafts.length === 0) {
         console.warn(`weasel ingest: svg "${file.name}" parsed to no drawable nodes`);
         continue;
@@ -2737,13 +2744,13 @@ async function unpackSvgFiles(files, ctx) {
       const roots = drafts.filter((d) => d.parentId === null);
       if (roots.length > 1) {
         const wrapperId = freshSvgNodeId();
-        const union2 = roots.map((d) => d.pose).reduce(unionRect);
+        const union2 = unionAABB(roots.map((d) => d.pose));
         drafts = [
           { kind: "container", id: wrapperId, parentId: null, pose: union2 },
           ...drafts.map((d) => d.parentId === null ? { ...d, parentId: wrapperId } : d)
         ];
       }
-      const union = drafts.filter((d) => d.parentId === null).map((d) => d.pose).reduce(unionRect);
+      const union = unionAABB(drafts.filter((d) => d.parentId === null).map((d) => d.pose));
       const view = ctx.viewportWorldRect();
       const scale = Math.min(
         1,
@@ -2784,7 +2791,115 @@ async function unpackSvgFiles(files, ctx) {
     }
   }
 }
+function svgPaintFromKit(fill, box) {
+  if (fill === null) return { kind: "none" };
+  if (fill.fill === void 0 || fill.fill === "solid") {
+    return { kind: "solid", color: fill.color, ...fill.opacity != null ? { opacity: fill.opacity } : {} };
+  }
+  return { kind: "gradient", paint: fillInPoseFrame(fill, box) };
+}
+function svgStrokeFromKit(stroke, box) {
+  if (!stroke?.paint) return void 0;
+  const width = stroke.width ?? 1;
+  if (!((typeof width === "object" ? width.px : width) > 0)) return void 0;
+  const opacity = stroke.paint.opacity;
+  return {
+    paint: svgPaintFromKit(stroke.paint, box),
+    width,
+    ...opacity != null ? { opacity } : {},
+    ...stroke.cap !== void 0 ? { cap: stroke.cap } : {},
+    ...stroke.join !== void 0 ? { join: stroke.join } : {},
+    ...stroke.dash !== void 0 ? { dash: stroke.dash } : {},
+    ...stroke.miterLimit !== void 0 ? { miterLimit: stroke.miterLimit } : {},
+    ...stroke.align !== void 0 ? { align: stroke.align } : {},
+    ...stroke.markerStart !== void 0 ? { markerStart: stroke.markerStart } : {},
+    ...stroke.markerMid !== void 0 ? { markerMid: stroke.markerMid } : {},
+    ...stroke.markerEnd !== void 0 ? { markerEnd: stroke.markerEnd } : {}
+  };
+}
+function svgImageFromKit(image, pose) {
+  const node = {
+    kind: "image",
+    href: image.src,
+    x: pose.x,
+    y: pose.y,
+    width: pose.width,
+    height: pose.height
+  };
+  if (image.source) node.source = { ...image.source };
+  if (image.flipX) node.flipX = true;
+  if (image.flipY) node.flipY = true;
+  if (image.opacity != null) node.opacity = image.opacity;
+  if (pose.rotation) node.rotation = pose.rotation;
+  return node;
+}
+function strokeInPoseFrame(stroke, box) {
+  return stroke.paint ? { ...stroke, paint: fillInPoseFrame(stroke.paint, box) } : stroke;
+}
+function runInPoseFrame(run, box) {
+  if (!run.fill && !run.stroke) return run;
+  return {
+    ...run,
+    ...run.fill ? { fill: fillInPoseFrame(run.fill, box) } : {},
+    ...run.stroke ? { stroke: strokeInPoseFrame(run.stroke, box) } : {}
+  };
+}
+function svgLeafFromKit(data, pose) {
+  if (data.image) return svgImageFromKit(data.image, pose);
+  if (data.text != null) {
+    const node2 = {
+      kind: "text",
+      x: pose.x,
+      y: pose.y,
+      width: pose.width,
+      height: pose.height,
+      text: data.text
+    };
+    if (data.style) node2.style = data.style;
+    if (data.runs) node2.runs = data.runs.map((r) => runInPoseFrame(r, pose));
+    if (data.verticalAlign) node2.verticalAlign = data.verticalAlign;
+    if (data.fill !== void 0) node2.fill = data.fill && fillInPoseFrame(data.fill, pose);
+    if (data.stroke) node2.stroke = strokeInPoseFrame(data.stroke, pose);
+    if (pose.rotation) node2.rotation = pose.rotation;
+    return node2;
+  }
+  if (!data.path) return null;
+  const stroke = svgStrokeFromKit(data.stroke, pose);
+  const fill = data.fill !== void 0 ? data.fill : stroke ? null : DEFAULT_SHAPE_FILL;
+  const node = {
+    kind: "path",
+    path: pathInPoseFrame(data.path, pose),
+    fill: svgPaintFromKit(fill, pose)
+  };
+  if (stroke) node.stroke = stroke;
+  if (pose.rotation) node.rotation = pose.rotation;
+  return node;
+}
+function svgNodesFromKit(tree, options = {}) {
+  const { include, leaf, group } = options;
+  const emit = (id) => {
+    if (include && !include(id)) return null;
+    const node = tree.get(id);
+    if (!node) return null;
+    if (node.kind === "container") {
+      const children = [];
+      for (const c of tree.childrenOf(id)) {
+        const child = emit(c);
+        if (child) children.push(child);
+      }
+      const g = { kind: "group", children };
+      return group ? group(id, g) : g;
+    }
+    return leaf ? leaf(id, node) : svgLeafFromKit(node.data, node.pose);
+  };
+  const out = [];
+  for (const id of options.roots ?? tree.roots) {
+    const n = emit(id);
+    if (n) out.push(n);
+  }
+  return out;
+}
 
-export { IDENTITY_MATRIX, parseSvg, serializeSvg, strokeDataFromSvg, svgImageFromKit, svgNodesToKitDrafts, tilePreviewCssUrl, tilePreviewSvg, unpackSvgFiles };
+export { IDENTITY_MATRIX, fillDataFromSvg, nativeSvgKind, nativeSvgSpace, parseSvg, serializeSvg, strokeDataFromSvg, svgImageFromKit, svgLeafFromKit, svgNodesFromKit, svgNodesToKitDrafts, svgPaintFromKit, svgStrokeFromKit, tilePreviewCssUrl, tilePreviewSvg, unpackSvgFiles };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map