@weasel-js/svg 1.9.4 → 1.10.1

package/dist/index.js

@@ -1,5 +1,5 @@
-import { identity, multiply, invert } from '@weasel-js/geom';
-import { boundsOfPath, transformPath, resolveScreenLength, scriptMetricsFor, warmFonts, warmPaintKinds, isPaintKindKnown, solid, fillToBoundsFrame, getMarker, registerMarker, dwarn, unionAABB, createInsertOp, fillInPoseFrame, DEFAULT_SHAPE_FILL, pathInPoseFrame, DEFAULT_TEXT_STYLE, pathFromD, poseFrameOf, poseLinearOf, PATH_M, PATH_L, PATH_C, PATH_Q, PATH_Z, resolveAlign, paragraphDirection, resolveRunFace, resolveTextStyle, parseColor, rgbaToHex, layoutRuns, resolveRuns, PathBuilder, getPaintKind, resolveMarkerSize } from '@weasel-js/core';
+import { identity, multiply, invert, splitByClosure, fillsOpenSubpaths, rotateAboutPoint, hasOpenSubpath, splitSubpaths } from '@weasel-js/geom';
+import { isTileKind, boundsOfPath, transformPath, isSolidPaint, warmFonts, warmPaintKinds, isPaintKindKnown, solid, fillToBoundsFrame, getMarker, registerMarker, dwarn, unionAABB, createInsertOp, fillInPoseFrame, DEFAULT_SHAPE_FILL, pathInPoseFrame, poseLinearOf, poseFrameOf, pathThroughPoseFrame, DEFAULT_TEXT_STYLE, resolveScreenLength, pathFromD, isPatternPaint, resolveTextStyle, PATH_M, PATH_L, PATH_C, PATH_Q, PATH_Z, resolveRunFace, parseColor, rgbaToHex, layoutRuns, resolveRuns, resolveAlign, PathBuilder, getPaintKind, resolveMarkerSize, paragraphDirection, scriptMetricsFor, isTilePaint, tileSpecOf } from '@weasel-js/core';
 import { tileGeometry } from '@weasel-js/core/patterns-builtin';
 
 // src/types.ts
@@ -210,13 +210,13 @@ function isNonUniform(m) {
   return Math.abs(a * c + b * d) > 1e-4 * n * n || Math.abs(Math.hypot(a, b) - Math.hypot(c, d)) > 1e-4 * n;
 }
 function fillThroughMatrix(fill, m) {
-  if (!("units" in fill) || fill.units !== "world") return fill;
+  if (!("units" in fill) || fill.units !== "world" && fill.units !== "local") return fill;
   const at = (p) => applyMatrix(m, p.x, p.y);
-  if (fill.fill === "linear-gradient") return { ...fill, from: at(fill.from), to: at(fill.to) };
-  if (fill.fill === "radial-gradient") {
+  if (fill.kind === "linear-gradient") return { ...fill, from: at(fill.from), to: at(fill.to) };
+  if (fill.kind === "radial-gradient") {
     return { ...fill, center: at(fill.center), radius: fill.radius * uniformScaleOf(m) };
   }
-  if (fill.fill === "conic-gradient") return { ...fill, center: at(fill.center) };
+  if (fill.kind === "conic-gradient") return { ...fill, center: at(fill.center) };
   return fill;
 }
 function paintThroughMatrix(paint, m) {
@@ -635,6 +635,106 @@ function evaluateMediaQuery(list, env) {
     }
   });
 }
+
+// src/container.ts
+function queryContainerOf(declared, media) {
+  const [shortNames, shortType] = (declared("container") ?? "").split("/").map((part) => part.trim());
+  const type = (declared("container-type") ?? shortType ?? "").trim().toLowerCase();
+  if (type !== "size" && type !== "inline-size") return null;
+  const names = (declared("container-name") ?? shortNames ?? "").trim().split(/\s+/).filter((n) => n !== "" && n.toLowerCase() !== "none");
+  return { names, type, width: media.width, height: media.height };
+}
+var NAME = /^(-?[a-zA-Z_\u0080-￿][\w\u0080-￿-]*)(?![\w(-])\s*/;
+var BLOCK_AXIS = /\b(?:height|block-size|aspect-ratio|orientation)\b/;
+var NOT_A_SIZE_FEATURE = /\b(?:device-|resolution|color|monochrome|prefers-|update|hover|pointer)/;
+function containerQueryHolds(prelude, container) {
+  if (!container) return false;
+  let condition2 = prelude.trim();
+  const named = NAME.exec(condition2);
+  if (named && named[1].toLowerCase() !== "not") {
+    if (!container.names.includes(named[1])) return false;
+    condition2 = condition2.slice(named[0].length);
+  }
+  condition2 = condition2.toLowerCase();
+  if (NOT_A_SIZE_FEATURE.test(condition2)) return false;
+  if (container.type === "inline-size" && BLOCK_AXIS.test(condition2)) return false;
+  const physical = condition2.replace(/\binline-size\b/g, "width").replace(/\bblock-size\b/g, "height");
+  return evaluateMediaQuery(physical, {
+    ...DEFAULT_MEDIA_ENVIRONMENT,
+    width: container.width,
+    height: container.height
+  });
+}
+
+// src/specificity.ts
+function identEnd(s, i) {
+  while (i < s.length) {
+    const ch = s[i];
+    if (ch === "\\") i += 2;
+    else if (/[\w-]/.test(ch) || ch.charCodeAt(0) > 127) i++;
+    else break;
+  }
+  return i;
+}
+var LEGACY_PSEUDO_ELEMENTS = /* @__PURE__ */ new Set(["before", "after", "first-line", "first-letter"]);
+var MAX_ARG_PSEUDOS = /* @__PURE__ */ new Set(["not", "is", "matches", "-webkit-any", "has"]);
+function compareSpecificity(a, b) {
+  return a[0] - b[0] || a[1] - b[1] || a[2] - b[2];
+}
+function maxSpecificity(list) {
+  let best = [0, 0, 0];
+  for (const sel of splitTopLevel(list, ",")) {
+    const s = specificity(sel);
+    if (compareSpecificity(s, best) > 0) best = s;
+  }
+  return best;
+}
+function specificity(selector) {
+  let a = 0, b = 0, c = 0;
+  const s = selector;
+  let i = 0;
+  while (i < s.length) {
+    const ch = s[i];
+    if (ch === "#") {
+      a++;
+      i = identEnd(s, i + 1);
+    } else if (ch === ".") {
+      b++;
+      i = identEnd(s, i + 1);
+    } else if (ch === "[") {
+      b++;
+      while (i < s.length && s[i] !== "]") {
+        i = s[i] === '"' || s[i] === "'" ? skipString(s, i) : i + 1;
+      }
+      i++;
+    } else if (ch === ":") {
+      const element = s[i + 1] === ":";
+      const nameStart = i + (element ? 2 : 1);
+      const nameEnd = identEnd(s, nameStart);
+      const name = s.slice(nameStart, nameEnd).toLowerCase();
+      let arg = null;
+      i = nameEnd;
+      if (s[i] === "(") {
+        const end = parenEnd(s, i);
+        arg = s.slice(i + 1, end - 1);
+        i = end;
+      }
+      if (element || LEGACY_PSEUDO_ELEMENTS.has(name)) c++;
+      else if (name === "where") ; else if (MAX_ARG_PSEUDOS.has(name) && arg != null) {
+        const m = maxSpecificity(arg);
+        a += m[0];
+        b += m[1];
+        c += m[2];
+      } else b++;
+    } else if (/[a-zA-Z_\\-]/.test(ch) || ch.charCodeAt(0) > 127) {
+      c++;
+      i = identEnd(s, i);
+    } else {
+      i++;
+    }
+  }
+  return [a, b, c];
+}
 function parsePaintAttr(raw) {
   if (raw == null) return null;
   const s = raw.trim();
@@ -888,74 +988,6 @@ function evaluateSupports(condition2, opts = {}) {
 
 // src/cascade.ts
 var EMPTY_STYLE = {};
-function identEnd(s, i) {
-  while (i < s.length) {
-    const ch = s[i];
-    if (ch === "\\") i += 2;
-    else if (/[\w-]/.test(ch) || ch.charCodeAt(0) > 127) i++;
-    else break;
-  }
-  return i;
-}
-var LEGACY_PSEUDO_ELEMENTS = /* @__PURE__ */ new Set(["before", "after", "first-line", "first-letter"]);
-var MAX_ARG_PSEUDOS = /* @__PURE__ */ new Set(["not", "is", "matches", "-webkit-any", "has"]);
-function compareSpecificity(a, b) {
-  return a[0] - b[0] || a[1] - b[1] || a[2] - b[2];
-}
-function maxSpecificity(list) {
-  let best = [0, 0, 0];
-  for (const sel of splitTopLevel(list, ",")) {
-    const s = specificity(sel);
-    if (compareSpecificity(s, best) > 0) best = s;
-  }
-  return best;
-}
-function specificity(selector) {
-  let a = 0, b = 0, c = 0;
-  const s = selector;
-  let i = 0;
-  while (i < s.length) {
-    const ch = s[i];
-    if (ch === "#") {
-      a++;
-      i = identEnd(s, i + 1);
-    } else if (ch === ".") {
-      b++;
-      i = identEnd(s, i + 1);
-    } else if (ch === "[") {
-      b++;
-      while (i < s.length && s[i] !== "]") {
-        i = s[i] === '"' || s[i] === "'" ? skipString(s, i) : i + 1;
-      }
-      i++;
-    } else if (ch === ":") {
-      const element = s[i + 1] === ":";
-      const nameStart = i + (element ? 2 : 1);
-      const nameEnd = identEnd(s, nameStart);
-      const name = s.slice(nameStart, nameEnd).toLowerCase();
-      let arg = null;
-      i = nameEnd;
-      if (s[i] === "(") {
-        const end = parenEnd(s, i);
-        arg = s.slice(i + 1, end - 1);
-        i = end;
-      }
-      if (element || LEGACY_PSEUDO_ELEMENTS.has(name)) c++;
-      else if (name === "where") ; else if (MAX_ARG_PSEUDOS.has(name) && arg != null) {
-        const m = maxSpecificity(arg);
-        a += m[0];
-        b += m[1];
-        c += m[2];
-      } else b++;
-    } else if (/[a-zA-Z_\\-]/.test(ch) || ch.charCodeAt(0) > 127) {
-      c++;
-      i = identEnd(s, i);
-    } else {
-      i++;
-    }
-  }
-  return [a, b, c];
-}
 var CascadeLayers = class {
   children = /* @__PURE__ */ new Map();
   anonymous = 0;
@@ -1044,6 +1076,11 @@ function parseRuleList(src, from, to, layer, ctx, rules, state) {
       if (names && names.length <= 1) {
         const inner = names.length ? state.layers.declare(layer, names[0]) : state.layers.declareAnonymous(layer);
         parseRuleList(src, i + 1, end - 1, inner, ctx, rules, state);
+      } else if (name === "container") {
+        const outer = state.containers;
+        state.containers = [...outer ?? [], at[2]];
+        parseRuleList(src, i + 1, end - 1, layer, ctx, rules, state);
+        state.containers = outer;
       } else if (conditionHolds(name, at[2], ctx)) {
         parseRuleList(src, i + 1, end - 1, layer, ctx, rules, state);
       }
@@ -1052,7 +1089,15 @@ function parseRuleList(src, from, to, layer, ctx, rules, state) {
       for (const raw of splitTopLevel(prelude, ",")) {
         const selector = raw.trim();
         if (selector) {
-          rules.push({ selector, declarations, specificity: specificity(selector), order: state.order++, layer });
+          const { containers } = state;
+          rules.push({
+            selector,
+            declarations,
+            specificity: specificity(selector),
+            order: state.order++,
+            layer,
+            ...containers ? { containers } : {}
+          });
         }
       }
     }
@@ -1072,15 +1117,23 @@ function appliesAsCss(style, ctx) {
 }
 var sheetCache = /* @__PURE__ */ new WeakMap();
 function bindStylesheets(doc, media, onWarn) {
-  sheetCache.set(doc, collectRules(doc, media, onWarn));
+  sheetCache.set(doc, { rules: collectRules(doc, media, onWarn), media });
 }
-function documentRules(doc) {
+function documentSheet(doc) {
   const cached = sheetCache.get(doc);
   if (cached) return cached;
   const root = doc.documentElement;
-  const rules = collectRules(doc, root ? mediaEnvironmentFor(root) : DEFAULT_MEDIA_ENVIRONMENT);
-  sheetCache.set(doc, rules);
-  return rules;
+  const media = root ? mediaEnvironmentFor(root) : DEFAULT_MEDIA_ENVIRONMENT;
+  const sheet = { rules: collectRules(doc, media), media };
+  sheetCache.set(doc, sheet);
+  return sheet;
+}
+function containersHold(el, containers, media) {
+  const root = el.ownerDocument?.documentElement;
+  if (!root || el === root) return false;
+  const declared = authorDeclarations(root);
+  const container = queryContainerOf((prop) => declared.get(prop), media);
+  return containers.every((prelude) => containerQueryHolds(prelude, container));
 }
 function collectRules(doc, media, onWarn) {
   const ctx = { media, onWarn, selector: (s) => isValidSelector(doc, s) };
@@ -1118,8 +1171,8 @@ var elementCache = /* @__PURE__ */ new WeakMap();
 function authorDeclarations(el) {
   const cached = elementCache.get(el);
   if (cached) return cached;
-  const rules = el.ownerDocument ? documentRules(el.ownerDocument) : [];
-  const matched = rules.filter((r) => matches(el, r.selector));
+  const sheet = el.ownerDocument && documentSheet(el.ownerDocument);
+  const matched = (sheet ? sheet.rules : []).filter((r) => matches(el, r.selector) && (!r.containers || containersHold(el, r.containers, sheet.media)));
   const inline = parseDeclarations(el.getAttribute("style") ?? "");
   const out = /* @__PURE__ */ new Map();
   const importantOrder = [...matched].sort((x, y) => y.rank - x.rank || compareCascade(x, y));
@@ -1242,15 +1295,12 @@ function collectElementsByTag(root, tags) {
 }
 
 // src/patterns.ts
-function patternSpecOf(paint) {
-  return "tile" in paint.pattern ? paint.pattern : null;
-}
 function patternXml(id, paint, onWarn) {
-  const spec = patternSpecOf(paint);
-  if (!spec) {
-    onWarn?.("pattern fill carries a TextureHandle, which has no vector form \u2014 omitted from <defs>");
+  if (!isTilePaint(paint)) {
+    onWarn?.("texture fill carries a TextureHandle, which has no vector form \u2014 omitted from <defs>");
     return "";
   }
+  const spec = tileSpecOf(paint);
   const geometry = tileGeometry(spec);
   const body = geometry.shapes.map(shapeXml).join("");
   const origin = paint.origin ?? { x: 0, y: 0 };
@@ -1318,7 +1368,7 @@ function readPattern(el, onWarn) {
     onWarn?.(`<pattern id="${el.getAttribute("id")}"> has malformed data-weasel-tile \u2014 dropped`);
     return null;
   }
-  if (typeof spec?.tile !== "string" || typeof spec?.color !== "string") {
+  if (!isTileKind(spec?.kind) || typeof spec?.color !== "string") {
     onWarn?.(`<pattern id="${el.getAttribute("id")}"> data-weasel-tile is not a tile spec \u2014 dropped`);
     return null;
   }
@@ -1326,7 +1376,7 @@ function readPattern(el, onWarn) {
   const y = parseFloat(el.getAttribute("y") ?? "0");
   const m = parseTransform(el.getAttribute("patternTransform"), onWarn);
   const origin = applyMatrix(m, x, y);
-  const paint = { fill: "pattern", pattern: spec };
+  const paint = { ...spec };
   if (origin.x !== 0 || origin.y !== 0) paint.origin = origin;
   if (!isIdentity([m[0], m[1], m[2], m[3], 0, 0])) paint.transform = [m[0], m[1], m[2], m[3]];
   return paint;
@@ -1369,10 +1419,10 @@ function serializePathD(path) {
 var WEASEL_NS = "urn:weasel-js:svg";
 var WEASEL_NS_PREFIX = "wzl";
 function nativeSvgKind(kind) {
-  return kind === "solid" || kind === "linear-gradient" || kind === "radial-gradient" || kind === "pattern";
+  return kind === "solid" || kind === "linear-gradient" || kind === "radial-gradient" || kind === "texture" || isTileKind(kind);
 }
 function hasNativeSvgForm(paint) {
-  return nativeSvgKind(paint.fill ?? "solid");
+  return nativeSvgKind(paint.kind ?? "solid");
 }
 var INTERPOLATE_SPACES = /* @__PURE__ */ new Set(["rgb", "oklab", "oklch"]);
 function nativeSvgSpace(space) {
@@ -1498,9 +1548,9 @@ function warnUnmodeled(el, elements, onWarn) {
       break;
     }
   }
-  const spread = inheritedAttr(el, elements, "spreadMethod");
-  if (spread === "reflect" || spread === "repeat") {
-    onWarn?.(`spreadMethod="${spread}" is not modeled; the gradient pads`);
+  const spread2 = inheritedAttr(el, elements, "spreadMethod");
+  if (spread2 === "reflect" || spread2 === "repeat") {
+    onWarn?.(`spreadMethod="${spread2}" is not modeled; the gradient pads`);
   }
 }
 function coord(el, elements, name, axis, fraction, units, onWarn) {
@@ -1520,7 +1570,7 @@ function readLinearGradient(el, elements, onWarn) {
   const units = readGradientUnits(el, elements);
   const at = (name, axis, fraction) => coord(el, elements, name, axis, fraction, units, onWarn);
   return {
-    fill: "linear-gradient",
+    kind: "linear-gradient",
     from: { x: at("x1", "x", 0), y: at("y1", "y", 0) },
     to: { x: at("x2", "x", 1), y: at("y2", "y", 0) },
     stops: inheritedStops(el, elements, onWarn),
@@ -1534,7 +1584,7 @@ function readRadialGradient(el, elements, onWarn) {
   const units = readGradientUnits(el, elements);
   const at = (name, axis, fraction) => coord(el, elements, name, axis, fraction, units, onWarn);
   return {
-    fill: "radial-gradient",
+    kind: "radial-gradient",
     center: { x: at("cx", "x", 0.5), y: at("cy", "y", 0.5) },
     radius: at("r", "other", 0.5),
     stops: inheritedStops(el, elements, onWarn),
@@ -1545,7 +1595,7 @@ function readRadialGradient(el, elements, onWarn) {
 function readConicGradient(el, elements, onWarn) {
   warnGradientTransform(el, elements, onWarn);
   return {
-    fill: "conic-gradient",
+    kind: "conic-gradient",
     center: {
       x: num(inheritedAttr(el, elements, "cx"), 0.5),
       y: num(inheritedAttr(el, elements, "cy"), 0.5)
@@ -1576,7 +1626,7 @@ function readMeshGradient(el, onWarn) {
   if (patches.length === 0) return null;
   const space = el.getAttribute("interpolate") ?? el.getAttributeNS(WEASEL_NS, "interpolate");
   return {
-    fill: "mesh-gradient",
+    kind: "mesh-gradient",
     patches,
     units: el.getAttribute("gradientUnits") === "objectBoundingBox" ? "bounds" : "world",
     ...space === "oklab" || space === "oklch" ? { interpolate: space } : {}
@@ -1600,7 +1650,7 @@ var PaintServerRegistry = class {
   register(paint) {
     const existing = this.byPaint.get(paint);
     if (existing) return existing;
-    const id = paint.fill === "pattern" ? `pat${this.counter++}` : `grad${this.counter++}`;
+    const id = isPatternPaint(paint) ? `pat${this.counter++}` : `grad${this.counter++}`;
     this.byPaint.set(paint, id);
     this.order.push(paint);
     return id;
@@ -1619,7 +1669,7 @@ var PaintServerRegistry = class {
   }
   /** The paint kind of each registered paint, once, in first-use order. */
   paintKinds() {
-    return [...new Set(this.order.map((paint) => paint.fill ?? "solid"))];
+    return [...new Set(this.order.map((paint) => paint.kind ?? "solid"))];
   }
   /** Whether any registered paint serializes outside SVG's own vocabulary, so
    *  the root has to declare {@link WEASEL_NS}. */
@@ -1682,7 +1732,7 @@ function writesInset(entry) {
 function defaultMarkerXml(id, entry, onWarn, key, size) {
   const name = key ?? id;
   const unit = size === void 0 ? 1 : resolveMarkerSize({ key: name, size }, 1);
-  const path = entry.path({ size: unit, stroke: { paint: { fill: "solid", color: "#000" } } });
+  const path = entry.path({ size: unit, stroke: { paint: { kind: "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 * unit)}" stroke-linecap="round" stroke-linejoin="round"` : "";
@@ -1694,43 +1744,43 @@ function defaultMarkerXml(id, entry, onWarn, key, size) {
 function markerPaintAttrs(attr, paint, id, onWarn) {
   if (paint === "none") return `${attr}="none"`;
   if (paint === void 0 || paint === "line") return `${attr}="context-stroke"`;
-  if ("color" in paint && (paint.fill === void 0 || paint.fill === "solid")) {
+  if ("color" in paint && (paint.kind === void 0 || paint.kind === "solid")) {
     return paint.opacity != null && paint.opacity !== 1 ? `${attr}="${paint.color}" ${attr}-opacity="${trimNumber(paint.opacity)}"` : `${attr}="${paint.color}"`;
   }
   onWarn?.(`marker "${id}" ${attr} is a paint server, which a <marker> def cannot reference here; written as the line's paint`);
   return `${attr}="context-stroke"`;
 }
 function paintServerXml(id, paint, onWarn) {
-  if (paint.fill === "pattern") return patternXml(id, paint, onWarn);
+  if (isPatternPaint(paint)) return patternXml(id, paint, onWarn);
   const builtin = gradientXml(id, paint);
   if (builtin) return builtin;
-  const kind = getPaintKind(paint.fill);
+  const kind = getPaintKind(paint.kind);
   const custom = kind?.toSvg?.(id, paint);
   if (custom) return custom;
-  onWarn?.(kind ? `${paint.fill} fill has no vector form \u2014 omitted from <defs>` : `${paint.fill} fill is not registered \u2014 omitted from <defs>; a kind loaded on demand needs \`await warmSvg(nodes)\` before a synchronous export`);
+  onWarn?.(kind ? `${paint.kind} fill has no vector form \u2014 omitted from <defs>` : `${paint.kind} fill is not registered \u2014 omitted from <defs>; a kind loaded on demand needs \`await warmSvg(nodes)\` before a synchronous export`);
   return "";
 }
 function gradientUnitsAttr(units) {
   return units === "bounds" ? "objectBoundingBox" : "userSpaceOnUse";
 }
 function gradientXml(id, paint) {
-  if (paint.fill === "linear-gradient") {
+  if (paint.kind === "linear-gradient") {
     const stops = paint.stops.map(stopXml).join("");
     return `<linearGradient id="${id}" gradientUnits="${gradientUnitsAttr(paint.units)}" x1="${trimNumber(paint.from.x)}" y1="${trimNumber(paint.from.y)}" x2="${trimNumber(paint.to.x)}" y2="${trimNumber(paint.to.y)}"${interpolateAttr(paint.interpolate)}>${stops}</linearGradient>`;
   }
-  if (paint.fill === "conic-gradient") {
+  if (paint.kind === "conic-gradient") {
     const stops = paint.stops.map(stopXml).join("");
     const P = WEASEL_NS_PREFIX;
     return `<${P}:conicGradient id="${id}" gradientUnits="${gradientUnitsAttr(paint.units)}" cx="${trimNumber(paint.center.x)}" cy="${trimNumber(paint.center.y)}" angle="${trimNumber(paint.angle)}"${interpolateAttr(paint.interpolate)}>${stops}</${P}:conicGradient>`;
   }
-  if (paint.fill === "radial-gradient") {
+  if (paint.kind === "radial-gradient") {
     const stops = paint.stops.map(stopXml).join("");
     return `<radialGradient id="${id}" gradientUnits="${gradientUnitsAttr(paint.units)}" cx="${trimNumber(paint.center.x)}" cy="${trimNumber(paint.center.y)}" r="${trimNumber(paint.radius)}"${interpolateAttr(paint.interpolate)}>${stops}</radialGradient>`;
   }
   return "";
 }
 function paintFallback(paint) {
-  const color = getPaintKind(paint.fill)?.colorOf(paint);
+  const color = getPaintKind(paint.kind)?.colorOf(paint);
   if (!color) return "none";
   const packed = /^#([0-9a-f]{6})[0-9a-f]{2}$/i.exec(color);
   return packed ? `#${packed[1].toLowerCase()}` : color;
@@ -1816,8 +1866,6 @@ function polygonToPath(points, m = IDENTITY_MATRIX) {
   b.close();
   return transformPath(b.build(), m);
 }
-
-// src/lowerLeaf.ts
 var SUPPORTED_LEAF_TAGS = /* @__PURE__ */ new Set([
   "rect",
   "circle",
@@ -1849,7 +1897,7 @@ function lowerLeaf(el, tag, m, onWarn) {
   if (tag === "circle") return circleToPath(x("cx"), y("cy"), r("r"), m);
   if (tag === "ellipse") return ellipseToPath(x("cx"), y("cy"), x("rx"), y("ry"), m);
   if (tag === "line") return lineToPath(x("x1"), y("y1"), x("x2"), y("y2"), m);
-  if (tag === "polyline") return polylineToPath(parsePoints(el.getAttribute("points") ?? ""), m);
+  if (tag === "polyline") return svgFilled(polylineToPath(parsePoints(el.getAttribute("points") ?? ""), m));
   if (tag === "polygon") return polygonToPath(parsePoints(el.getAttribute("points") ?? ""), m);
   if (tag === "path") {
     const d = el.getAttribute("d") ?? "";
@@ -1863,10 +1911,13 @@ function lowerLeaf(el, tag, m, onWarn) {
       const rect = polygonToRectIfAxisAligned(transformed);
       if (rect) return rect;
     }
-    return transformed;
+    return svgFilled(transformed);
   }
   return null;
 }
+function svgFilled(path) {
+  return hasOpenSubpath(path) ? { ...path, openFill: "close" } : path;
+}
 function polygonToRectIfAxisAligned(p) {
   const cmds = p.commands;
   if (cmds.length !== 5) return null;
@@ -2031,7 +2082,7 @@ function coreStroke(stroke) {
   if (stroke.paint.kind === "gradient") {
     paint = stroke.paint.paint;
   } else if (stroke.paint.kind === "solid") {
-    paint = stroke.paint.opacity != null ? { fill: "solid", color: stroke.paint.color, opacity: stroke.paint.opacity } : { fill: "solid", color: stroke.paint.color };
+    paint = stroke.paint.opacity != null ? { kind: "solid", color: stroke.paint.color, opacity: stroke.paint.opacity } : { kind: "solid", color: stroke.paint.color };
   } else {
     return void 0;
   }
@@ -2187,19 +2238,74 @@ function anchorOffset(style, width2, text) {
 }
 
 // src/tspanLines.ts
+var LINES_ATTR = "data-weasel-lines";
+var statesLines = (tspan) => tspan.hasAttribute(LINES_ATTR);
+function linesXml(pieces, x, pitch) {
+  let out = "";
+  let pending = 0;
+  let wrote = false;
+  const tspan = (attrs, text) => `<tspan${attrs.map((a) => ` ${a}`).join("")}>${escapeText(text)}</tspan>`;
+  const lineAttrs = () => {
+    if (pending === 0) return [];
+    const attrs = [`x="${trimNumber(x)}"`, `dy="${trimNumber(pending * pitch)}"`];
+    if (pending > 1 || !wrote) attrs.push(`${LINES_ATTR}="${pending}"`);
+    pending = 0;
+    return attrs;
+  };
+  for (const piece of pieces) {
+    piece.text.split(/[\n\u000B\u000C]/).forEach((line, i) => {
+      if (i > 0) pending++;
+      if (line === "") return;
+      const attrs = [...piece.attrs ?? [], ...lineAttrs()];
+      out += piece.attrs === null && attrs.length === 0 ? escapeText(line) : tspan(attrs, line);
+      wrote = true;
+    });
+  }
+  return pending > 0 ? out + tspan(lineAttrs(), "") : out;
+}
+var DEFAULT_LINE_HEIGHT = 1.2;
 var LineTracker = class {
-  y;
-  constructor(text) {
+  constructor(text, onWarn) {
+    this.onWarn = onWarn;
     this.y = text.getAttribute("y");
+    this.at = readLength(text, "y", "y", 0, onWarn);
   }
-  /** Whether `tspan` opens a new line. Call once per tspan, in order. */
-  startsLine(tspan) {
+  onWarn;
+  y;
+  /** Where the current line sits, in user units. */
+  at;
+  pitches = [];
+  /** How many lines down `tspan` opens a new line, or 0 when it stays on the
+   *  current one. Call once per tspan, in order. `afterText` is whether any
+   *  text precedes it: the first line's own placement is not a pitch. */
+  startsLine(tspan, afterText) {
     const y = tspan.getAttribute("y");
     const movedY = y != null && y !== this.y;
     if (y != null) this.y = y;
-    if (!tspan.hasAttribute("x")) return false;
-    const dy = parseFloat(tspan.getAttribute("dy") ?? "");
-    return movedY || Number.isFinite(dy) && dy !== 0;
+    const from = this.at;
+    const dy = readLength(tspan, "dy", "y", 0, this.onWarn);
+    this.at = (y != null ? readLength(tspan, "y", "y", from, this.onWarn) : from) + dy;
+    if (!tspan.hasAttribute("x") || !(movedY || dy !== 0)) return 0;
+    const stated = Number(tspan.getAttribute(LINES_ATTR));
+    const lines = Number.isInteger(stated) && stated > 0 ? stated : 1;
+    if (afterText && this.at > from) this.pitches.push((this.at - from) / lines);
+    return lines;
+  }
+  /**
+   * The line height the lines were pitched at, as a multiple of `fontSize`:
+   * `undefined` for a single line, or for lines at the default pitch. The
+   * model holds one line height, so uneven pitches give their mean, which
+   * keeps the block's height.
+   */
+  lineHeight(fontSize) {
+    const { pitches } = this;
+    if (pitches.length === 0 || !(fontSize > 0)) return void 0;
+    const mean = pitches.reduce((sum, p) => sum + p, 0) / pitches.length;
+    if (pitches.some((p) => Math.abs(p - mean) > 1e-3 * fontSize)) {
+      this.onWarn("<text> lines are pitched unevenly; they take the mean pitch as one line height");
+    }
+    const lineHeight = Math.round(mean / fontSize * 1e6) / 1e6;
+    return Math.abs(lineHeight - DEFAULT_LINE_HEIGHT) < 1e-6 ? void 0 : lineHeight;
   }
 };
 function warnUnreadPositions(el, onWarn) {
@@ -2208,28 +2314,88 @@ function warnUnreadPositions(el, onWarn) {
     const raw = el.getAttribute(name)?.trim() ?? "";
     if (/[\s,]/.test(raw)) onWarn(`<${tag} ${name}="${raw}"> positions each glyph; only the first value is read`);
   }
-  for (const name of ["dx", "rotate"]) {
+  for (const name of tag === "tspan" ? ["rotate"] : ["dx", "rotate"]) {
     const raw = el.getAttribute(name)?.trim() ?? "";
     if (raw.split(/[\s,]+/).some((v) => parseFloat(v) !== 0 && v !== "")) {
       onWarn(`<${tag} ${name}="${raw}"> is not read; the glyphs keep their own advance and angle`);
     }
   }
 }
-function joinLines(lines) {
+function sameStyle(a, b) {
+  const style = (run) => JSON.stringify(
+    Object.entries(run).filter(([k, v]) => k !== "text" && v !== void 0).sort(([j], [k]) => j < k ? -1 : 1)
+  );
+  return style(a) === style(b);
+}
+function joinLines(lines, leading = 0) {
   const out = [];
-  let breaks = 0;
+  let breaks = leading;
   for (const line of lines) {
     if (line.length > 0) {
-      if (breaks > 0) line[0] = { ...line[0], text: "\n".repeat(breaks) + line[0].text };
-      out.push(...line);
+      const [first, ...rest] = line;
+      const head = breaks > 0 ? { ...first, text: "\n".repeat(breaks) + first.text } : first;
+      const last = out[out.length - 1];
+      if (breaks > 0 && last && sameStyle(last, head)) {
+        out[out.length - 1] = { ...last, text: last.text + head.text };
+      } else {
+        out.push(head);
+      }
+      out.push(...rest);
       breaks = 0;
     }
     if (out.length > 0) breaks++;
   }
   return out;
 }
+var COLLAPSIBLE = /^\s|\s$|\s\s|[\n\t\r]/;
+function readDx(el, onWarn) {
+  const raw = el.getAttribute("dx")?.trim();
+  if (!raw) return null;
+  const values = raw.split(/[\s,]+/).map((v) => resolveLength(v, el, "dx", "x", 0, onWarn));
+  return values.some((v) => v !== 0) ? values : null;
+}
+var spacingOf = (run, inherited2) => resolveScreenLength(run.letterSpacing ?? inherited2 ?? 0, 1);
+function spread(run, extra, inherited2) {
+  const base = spacingOf(run, inherited2);
+  const out = [];
+  let last;
+  Array.from(run.text).forEach((glyph, i) => {
+    const more = extra[i] ?? 0;
+    if (out.length > 0 && more === last) out[out.length - 1].text += glyph;
+    else out.push(more === 0 ? { ...run, text: glyph } : { ...run, text: glyph, letterSpacing: base + more });
+    last = more;
+  });
+  return out;
+}
+function placeTspanRun(tspan, run, lines, inherited2, onWarn) {
+  const line = lines[lines.length - 1];
+  const dx = readDx(tspan, onWarn);
+  if (!dx) {
+    line.push(run);
+    return 0;
+  }
+  const raw = tspan.getAttribute("dx");
+  if (COLLAPSIBLE.test(run.text)) {
+    onWarn(`<tspan dx="${raw}"> is not read: its text has white space SVG collapses, which moves the glyphs the list names`);
+    line.push(run);
+    return 0;
+  }
+  let lead = 0;
+  let before = line.length - 1;
+  while (before >= 0 && line[before].text === "") before--;
+  if (dx[0] !== 0 && before >= 0) {
+    const glyphs = Array.from(line[before].text);
+    line.splice(before, 1, ...spread(line[before], [...glyphs.slice(1).map(() => 0), dx[0]], inherited2));
+  } else if (dx[0] !== 0 && lines.length === 1) {
+    lead = dx[0];
+  } else if (dx[0] !== 0) {
+    onWarn(`<tspan dx="${raw}"> opens a line; the line starts at the box edge, and the rest of the list is read`);
+  }
+  line.push(...spread(run, dx.slice(1), inherited2));
+  return lead;
+}
 
-// src/readText.ts
+// src/textWhitespace.ts
 var XML_NS = "http://www.w3.org/XML/1998/namespace";
 function preservesSpace(el) {
   for (let e = el; e; e = e.parentElement) {
@@ -2266,6 +2432,15 @@ function collapseRunWhitespace(runs) {
     if (runs[i].text === "") runs.splice(i, 1);
   }
 }
+
+// src/fillPaint.ts
+function mapFillPaint(fill, f) {
+  if (!fill.paint) return fill;
+  const paint = f(fill.paint);
+  return paint === fill.paint ? fill : { ...fill, paint };
+}
+
+// src/readText.ts
 var ESTIMATED_GLYPH_ADVANCE_EM = 0.6;
 function laidOutWidth(runs, style, plain) {
   const resolved = resolveTextStyle(style);
@@ -2298,12 +2473,12 @@ function placeTextNode(node, m, onWarn) {
     if (node.runs) node.runs = scaleRuns(node.runs, scale);
     if (node.stroke) node.stroke = scaleStroke(node.stroke, scale);
   }
-  if (node.fill) node.fill = fillThroughMatrix(node.fill, inBox);
+  if (node.fill) node.fill = mapFillPaint(node.fill, (p) => fillThroughMatrix(p, inBox));
   if (node.stroke?.paint) {
     node.stroke = { ...node.stroke, paint: fillThroughMatrix(node.stroke.paint, inBox) };
   }
   if (node.runs) {
-    node.runs = node.runs.map((r) => r.fill ? { ...r, fill: fillThroughMatrix(r.fill, inBox) } : r);
+    node.runs = node.runs.map((r) => r.fill ? { ...r, fill: mapFillPaint(r.fill, (p) => fillThroughMatrix(p, inBox)) } : r);
   }
 }
 function parseTextElement(el, ctm, style, gradients, onWarn) {
@@ -2320,38 +2495,16 @@ function parseTextElement(el, ctm, style, gradients, onWarn) {
   const textStyle = readTextStyle(leafStyle, onWarn);
   const textPaint = readTextPaint(leafStyle, gradients, onWarn, isNonScalingStroke(el));
   const fontSize = resolveScreenLength(textStyle.fontSize ?? 16, 1);
-  const lineHeight = textStyle.lineHeight ?? 1.2;
   const dominantBaseline = el.getAttribute("dominant-baseline");
   const explicitTopAnchor = dominantBaseline === "text-before-edge" || dominantBaseline === "hanging";
   const topY = explicitTopAnchor ? ay : ay - fontSize;
   const inheritedShift = ownValue(el, "baseline-shift", onWarn) ?? {};
-  const runLines = [[]];
-  const tracker = new LineTracker(el);
-  const push = (run) => {
-    runLines[runLines.length - 1].push(run);
-  };
-  for (let i = 0; i < el.childNodes.length; i++) {
-    const child = el.childNodes[i];
-    if (child.nodeType === 3) {
-      const t = child.textContent ?? "";
-      if (!t) continue;
-      push({ text: t, ...inheritedShift });
-    } else if (child.nodeType === 1) {
-      const sp = child;
-      if (sp.tagName.toLowerCase() !== "tspan") {
-        onWarn(`<text> child <${sp.tagName}> not supported; flattening text content`);
-        const t = sp.textContent ?? "";
-        if (t) push({ text: t, ...inheritedShift });
-        continue;
-      }
-      warnUnreadPositions(sp, onWarn);
-      if (tracker.startsLine(sp)) runLines.push([]);
-      push(readTspanRun(sp, gradients, leafStyle, onWarn));
-    }
-  }
-  if (!preservesSpace(el)) for (const line of runLines) collapseRunWhitespace(line);
-  const runs = joinLines(runLines);
+  const tracker = new LineTracker(el, onWarn);
+  const { runs, lead } = readRuns(el, tracker, inheritedShift, textStyle.letterSpacing, gradients, leafStyle, onWarn);
   const plain = runs.map((r) => r.text).join("");
+  const pitched = tracker.lineHeight(fontSize);
+  if (pitched !== void 0) textStyle.lineHeight = pitched;
+  const lineHeight = textStyle.lineHeight ?? DEFAULT_LINE_HEIGHT;
   const dataW = num2(el.getAttribute("data-weasel-width"), NaN);
   const dataH = num2(el.getAttribute("data-weasel-height"), NaN);
   const width2 = Number.isFinite(dataW) ? dataW : laidOutWidth(runs, textStyle, plain);
@@ -2360,7 +2513,7 @@ function parseTextElement(el, ctm, style, gradients, onWarn) {
   const opacity = ownValue(el, "opacity");
   const node = {
     kind: "text",
-    x: ax - anchorOffset(textStyle, width2, plain),
+    x: ax + lead - anchorOffset(textStyle, width2, plain),
     y: topY,
     width: width2,
     height: height2,
@@ -2386,6 +2539,38 @@ function parseTextElement(el, ctm, style, gradients, onWarn) {
   placeTextNode(node, multiply(ctm, localTransform), onWarn);
   return node;
 }
+function readRuns(el, tracker, inheritedShift, letterSpacing, gradients, leafStyle, onWarn) {
+  const runLines = [[]];
+  let leading = 0;
+  let lead = 0;
+  const push = (run) => {
+    runLines[runLines.length - 1].push(run);
+  };
+  for (let i = 0; i < el.childNodes.length; i++) {
+    const child = el.childNodes[i];
+    if (child.nodeType === 3) {
+      const t = child.textContent ?? "";
+      if (!t) continue;
+      push({ text: t, ...inheritedShift });
+    } else if (child.nodeType === 1) {
+      const sp = child;
+      if (sp.tagName.toLowerCase() !== "tspan") {
+        onWarn(`<text> child <${sp.tagName}> not supported; flattening text content`);
+        const t = sp.textContent ?? "";
+        if (t) push({ text: t, ...inheritedShift });
+        continue;
+      }
+      warnUnreadPositions(sp, onWarn);
+      const afterText = runLines.some((line) => line.some((r) => r.text.trim() !== ""));
+      const lines = tracker.startsLine(sp, afterText);
+      if (runLines.length === 1 && runLines[0].length === 0 && statesLines(sp)) leading = lines;
+      else for (let n = 0; n < lines; n++) runLines.push([]);
+      lead += placeTspanRun(sp, readTspanRun(sp, gradients, leafStyle, onWarn), runLines, letterSpacing, onWarn);
+    }
+  }
+  if (!preservesSpace(el)) for (const line of runLines) collapseRunWhitespace(line);
+  return { runs: joinLines(runLines, leading), lead };
+}
 function readTspanRun(el, gradients, style, onWarn) {
   const text = el.textContent ?? "";
   const run = { text };
@@ -2419,11 +2604,11 @@ function readTspanRun(el, gradients, style, onWarn) {
     if (parsed?.kind === "none") {
       run.fill = null;
     } else if (parsed?.kind === "solid") {
-      run.fill = { fill: "solid", color: parsed.color };
+      run.fill = { paint: { kind: "solid", color: parsed.color } };
     } else if (parsed?.kind === "ref") {
       const paint = gradients.get(parsed.id);
-      if (paint) run.fill = paint;
-      else if (parsed.fallback) run.fill = { fill: "solid", color: parsed.fallback.color };
+      if (paint) run.fill = { paint };
+      else if (parsed.fallback) run.fill = { paint: { kind: "solid", color: parsed.fallback.color } };
     }
   }
   const stroke = coreStroke(readStroke(ownStrokeStyle(el, tspanStyle), gradients, onWarn, isNonScalingStroke(el)));
@@ -2465,12 +2650,12 @@ function readTextPaint(style, gradients, onWarn, nonScalingStroke = false) {
   if (fillRaw) {
     const parsed = readProperty("fill", fillRaw);
     if (parsed?.kind === "solid") {
-      out.fill = { fill: "solid", color: parsed.color };
+      out.fill = { paint: { kind: "solid", color: parsed.color } };
     } else if (parsed?.kind === "ref") {
       const paint = gradients.get(parsed.id);
-      if (paint) out.fill = paint;
+      if (paint) out.fill = { paint };
       else if (parsed.fallback) {
-        out.fill = { fill: "solid", color: parsed.fallback.color };
+        out.fill = { paint: { kind: "solid", color: parsed.fallback.color } };
       }
     } else if (parsed?.kind === "none") {
       out.fill = null;
@@ -2726,7 +2911,7 @@ function parseSvg(svg, opts = {}) {
   for (const [id, paint] of collectPatterns(root, onWarn)) gradients.set(id, paint);
   const rootStyle = deriveStyle(EMPTY_STYLE, root);
   const clips = collectClipPaths(root, onWarn);
-  const nodes = parseChildren(root, IDENTITY_MATRIX, rootStyle, gradients, clips, onWarn, uriToPrefix);
+  const nodes = parseChildren(root, IDENTITY_MATRIX, rootStyle, gradients, clips, onWarn, uriToPrefix, opts.keepHidden === true);
   const markers = ingestMarkers(root, nodes, gradients, onWarn);
   const result = { nodes, warnings };
   if (markers.length > 0) result.markers = markers;
@@ -2827,26 +3012,25 @@ function collectElementMeta(el, uriToPrefix) {
   }
   return Object.keys(meta).length > 0 ? meta : void 0;
 }
-function parseChildren(parent, ctm, style, gradients, clips, onWarn, uriToPrefix) {
+function parseChildren(parent, ctm, style, gradients, clips, onWarn, uriToPrefix, keepHidden) {
   const out = [];
   for (let i = 0; i < parent.children.length; i++) {
     const el = parent.children[i];
     const ns = el.namespaceURI;
     if (ns && ns !== "http://www.w3.org/2000/svg") continue;
-    const node = parseElement(el, ctm, style, gradients, clips, onWarn, uriToPrefix);
-    if (node) {
-      if (Array.isArray(node)) out.push(...node);
-      else out.push(node);
-    }
+    const hidden = isHiddenElement(el, style);
+    if (hidden && !keepHidden) continue;
+    const node = parseElement(el, ctm, style, gradients, clips, onWarn, uriToPrefix, keepHidden);
+    if (!node) continue;
+    const parsed = Array.isArray(node) ? node : [node];
+    if (hidden) for (const n of parsed) n.hidden = true;
+    out.push(...parsed);
   }
   return out;
 }
-function parseElement(el, ctm, style, gradients, clips, onWarn, uriToPrefix) {
+function parseElement(el, ctm, style, gradients, clips, onWarn, uriToPrefix, keepHidden) {
   const tag = el.tagName.toLowerCase();
   if (IGNORED_TAGS.has(tag)) return null;
-  if (ownValue(el, "display") === "none") return null;
-  const containers = tag === "g" || SUPPORTED_GROUP_TAGS.has(tag);
-  if (!containers && isHidden(deriveStyle(style, el))) return null;
   if (tag === "g" && el.hasAttribute("data-weasel-image")) {
     const image = parseCroppedImage(el, ctm, onWarn);
     if (image) {
@@ -2863,7 +3047,7 @@ function parseElement(el, ctm, style, gradients, clips, onWarn, uriToPrefix) {
     const local = parseTransform(el.getAttribute("transform"), onWarn);
     const childCtm = multiply(ctm, local);
     const childStyle = deriveStyle(style, el);
-    const children = parseChildren(el, childCtm, childStyle, gradients, clips, onWarn, uriToPrefix);
+    const children = parseChildren(el, childCtm, childStyle, gradients, clips, onWarn, uriToPrefix, keepHidden);
     const opacity2 = ownValue(el, "opacity");
     const group = { kind: "group", children };
     const clip = clipFor(el, childCtm, clips, onWarn);
@@ -2881,7 +3065,7 @@ function parseElement(el, ctm, style, gradients, clips, onWarn, uriToPrefix) {
     if (el.hasAttribute("viewBox")) {
       onWarn("nested <svg> viewBox is not modeled; its children are not rescaled");
     }
-    return parseChildren(el, multiply(ctm, offset), childStyle, gradients, clips, onWarn, uriToPrefix);
+    return parseChildren(el, multiply(ctm, offset), childStyle, gradients, clips, onWarn, uriToPrefix, keepHidden);
   }
   if (tag === "text") {
     const textNode = parseTextElement(el, ctm, style, gradients, onWarn);
@@ -2949,69 +3133,29 @@ function parseElement(el, ctm, style, gradients, clips, onWarn, uriToPrefix) {
   if (meta) node.meta = meta;
   return node;
 }
-function isHidden(style) {
-  const v = styleValue(style, "visibility");
+function isHiddenElement(el, style) {
+  const tag = el.tagName.toLowerCase();
+  if (IGNORED_TAGS.has(tag)) return false;
+  if (ownValue(el, "display") === "none") return true;
+  if (SUPPORTED_GROUP_TAGS.has(tag)) return false;
+  const v = styleValue(deriveStyle(style, el), "visibility");
   return v === "hidden" || v === "collapse";
 }
-function serializeSvg(nodes, opts = {}) {
-  const registry = new PaintServerRegistry();
-  registerPaintServers(nodes, registry);
-  const bounds = opts.viewBox ?? computeBounds(nodes);
-  const vb = `${trimNumber(bounds.x)} ${trimNumber(bounds.y)} ${trimNumber(bounds.width)} ${trimNumber(bounds.height)}`;
-  const namespaces = opts.namespaces ?? {};
-  const rootAttrs = [`xmlns="http://www.w3.org/2000/svg"`];
-  if (registry.usesPrivateNamespace() && namespaces[WEASEL_NS_PREFIX] == null) {
-    rootAttrs.push(`xmlns:${WEASEL_NS_PREFIX}="${WEASEL_NS}"`);
-  }
-  for (const [prefix, uri] of Object.entries(namespaces)) {
-    rootAttrs.push(`xmlns:${prefix}="${escapeAttr(uri)}"`);
+
+// src/metaXml.ts
+function namespacedElementXml(prefix, localName2, el) {
+  const attrs = [];
+  for (const [name, value] of Object.entries(el.attrs)) {
+    attrs.push(`${name}="${escapeAttr(value)}"`);
   }
-  rootAttrs.push(`viewBox="${vb}"`);
-  if (opts.width != null) rootAttrs.push(`width="${trimNumber(opts.width)}"`);
-  if (opts.height != null) rootAttrs.push(`height="${trimNumber(opts.height)}"`);
-  if (opts.documentMeta) {
-    for (const prefix of Object.keys(namespaces)) {
-      const bucket = opts.documentMeta[prefix];
-      if (!bucket?.attrs) continue;
-      for (const [name, value] of Object.entries(bucket.attrs)) {
-        rootAttrs.push(`${prefix}:${name}="${escapeAttr(value)}"`);
-      }
+  const head = attrs.length > 0 ? `<${prefix}:${localName2} ${attrs.join(" ")}>` : `<${prefix}:${localName2}>`;
+  let body = "";
+  if (el.children) {
+    for (const [childName, list] of Object.entries(el.children)) {
+      for (const child of list) body += namespacedElementXml(prefix, childName, child);
     }
-  }
-  let docMetaXml = "";
-  if (opts.documentMeta) {
-    for (const prefix of Object.keys(namespaces)) {
-      const bucket = opts.documentMeta[prefix];
-      if (!bucket?.elements) continue;
-      for (const [localName2, list] of Object.entries(bucket.elements)) {
-        for (const el of list) docMetaXml += namespacedElementXml(prefix, localName2, el);
-      }
-    }
-  }
-  const defsXml = registry.toDefsXml(opts.onWarn);
-  const said = /* @__PURE__ */ new Set();
-  const warn = (m) => {
-    if (!opts.onWarn || said.has(m)) return;
-    said.add(m);
-    opts.onWarn(m);
-  };
-  const bodyXml = nodes.map((n) => nodeXml(n, registry, namespaces, warn)).join("");
-  const titleXml = opts.title && opts.title.length > 0 ? `<title>${escapeText(opts.title)}</title>` : "";
-  return `<svg ${rootAttrs.join(" ")}>${titleXml}${defsXml}${docMetaXml}${bodyXml}</svg>`;
-}
-function namespacedElementXml(prefix, localName2, el) {
-  const attrs = [];
-  for (const [name, value] of Object.entries(el.attrs)) {
-    attrs.push(`${name}="${escapeAttr(value)}"`);
-  }
-  const head = attrs.length > 0 ? `<${prefix}:${localName2} ${attrs.join(" ")}>` : `<${prefix}:${localName2}>`;
-  let body = "";
-  if (el.children) {
-    for (const [childName, list] of Object.entries(el.children)) {
-      for (const child of list) body += namespacedElementXml(prefix, childName, child);
-    }
-  } else if (el.text != null) {
-    body = escapeText(el.text);
+  } else if (el.text != null) {
+    body = escapeText(el.text);
   }
   return `${head}${body}</${prefix}:${localName2}>`;
 }
@@ -3039,115 +3183,109 @@ function metaElementsXml(meta, namespaces) {
   }
   return out;
 }
-function registerPaintServers(nodes, registry) {
-  for (const n of nodes) {
+function computeBounds(nodes) {
+  let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+  const visit = (n, ctm) => {
+    if (n.hidden) return;
     if (n.kind === "group") {
-      if (n.clip) registry.clipId(n.clip);
-      registerPaintServers(n.children, registry);
-    } else if (n.kind === "path") {
-      if (n.fill.kind === "gradient") registry.register(n.fill.paint);
-      if (n.stroke && n.stroke.paint.kind === "gradient") registry.register(n.stroke.paint.paint);
-      registerMarkers(n.stroke, registry);
-    } else if (n.kind === "text") {
-      registerTextPaint(n.fill, registry);
-      registerTextPaint(n.stroke?.paint, registry);
-      registerMarkers(n.stroke, registry);
-      for (const run of n.runs ?? []) {
-        registerTextPaint(run.fill, registry);
-        registerTextPaint(run.stroke?.paint, registry);
-      }
+      const childCtm = n.transform ? multiply(ctm, n.transform) : ctm;
+      n.children.forEach((c) => visit(c, childCtm));
+      return;
     }
+    const b = n.kind === "text" || n.kind === "image" ? { minX: n.x, minY: n.y, maxX: n.x + n.width, maxY: n.y + n.height } : pathBounds(n.path);
+    const frame = n.kind === "path" ? null : poseFrameOf(n);
+    const local = frame ? multiply(ctm, frame) : n.rotation ? rotateAboutCenter(ctm, b, n.rotation) : ctm;
+    for (const [x, y] of corners(b)) {
+      const px = local[0] * x + local[2] * y + local[4];
+      const py = local[1] * x + local[3] * y + local[5];
+      if (px < minX) minX = px;
+      if (py < minY) minY = py;
+      if (px > maxX) maxX = px;
+      if (py > maxY) maxY = py;
+    }
+  };
+  nodes.forEach((n) => visit(n, IDENTITY_MATRIX));
+  if (!Number.isFinite(minX)) {
+    return { x: 0, y: 0, width: 0, height: 0 };
   }
+  return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
 }
-function registerTextPaint(paint, registry) {
-  if (paint && !("color" in paint)) registry.register(paint);
+function corners(b) {
+  return [[b.minX, b.minY], [b.maxX, b.minY], [b.maxX, b.maxY], [b.minX, b.maxY]];
 }
-function registerMarkers(stroke, registry) {
-  if (!stroke) return;
-  for (const ref of [stroke.markerStart, stroke.markerMid, stroke.markerEnd]) {
-    if (ref !== void 0) registry.markerId(ref);
+function rotateAboutCenter(ctm, b, angle) {
+  const cx = (b.minX + b.maxX) / 2;
+  const cy = (b.minY + b.maxY) / 2;
+  const c = Math.cos(angle);
+  const s = Math.sin(angle);
+  return multiply(ctm, [c, s, -s, c, cx - cx * c + cy * s, cy - cx * s - cy * c]);
+}
+function pathBounds(path) {
+  const b = boundsOfPath(path);
+  return { minX: b.x, minY: b.y, maxX: b.x + b.width, maxY: b.y + b.height };
+}
+
+// src/openSubpathFill.ts
+var capsEnds = (stroke) => stroke?.markerStart !== void 0 || stroke?.markerEnd !== void 0;
+var marked = (stroke) => capsEnds(stroke) || stroke?.markerMid !== void 0;
+function withoutEndMarkers(stroke) {
+  const { markerStart: _start, markerEnd: _end, ...rest } = stroke;
+  return rest;
+}
+var closedStroke = (stroke) => stroke && capsEnds(stroke) ? withoutEndMarkers(stroke) : stroke;
+var isClosed = (part) => splitByClosure(part).open === null;
+function samePath(a, b) {
+  if (a === b) return true;
+  return a.commands.length === b.commands.length && a.coords.length === b.coords.length && a.commands.every((c, i) => c === b.commands[i]) && a.coords.every((v, i) => v === b.coords[i]);
+}
+function strokeParts(path, stroke, filled, closed, open) {
+  const none = { kind: "none" };
+  const subs = marked(stroke) ? splitSubpaths(path) : [];
+  if (subs.length > 1) {
+    return subs.map((sub) => ({ path: sub, fill: none, stroke: isClosed(sub) ? closedStroke(stroke) : stroke }));
+  }
+  if (closed && open && filled === closed) {
+    return [{ path: closed, fill: none, stroke: closedStroke(stroke) }, { path: open, fill: none, stroke }];
+  }
+  return [{ path, fill: none, stroke: open ? stroke : closedStroke(stroke) }];
+}
+function pathAsSvgDraws(node) {
+  const { path, fill, stroke } = node;
+  if (path.kind !== "polygon") return capsEnds(stroke) ? { ...node, stroke: closedStroke(stroke) } : node;
+  if (path.commands.length === 0) return node;
+  const { closed, open } = splitByClosure(path);
+  const filled = fill.kind === "none" ? null : fillsOpenSubpaths(path) ? path : closed;
+  const parts = strokeParts(path, stroke, filled, closed, open);
+  const pieces = filled ? withFill(parts, filled, fill) : parts;
+  if (pieces.length === 1) {
+    const only = pieces[0];
+    if (only.fill === fill && only.stroke === stroke) return node;
+    const { stroke: _stroke, ...rest } = node;
+    return { ...rest, fill: only.fill, ...only.stroke ? { stroke: only.stroke } : {} };
+  }
+  const group = {
+    kind: "group",
+    children: pieces.map((p) => ({ kind: "path", path: p.path, fill: p.fill, ...p.stroke ? { stroke: p.stroke } : {} }))
+  };
+  if (node.rotation != null && node.rotation !== 0) {
+    const b = pathBounds(path);
+    group.transform = rotateAboutPoint((b.minX + b.maxX) / 2, (b.minY + b.maxY) / 2, node.rotation);
   }
+  if (node.opacity != null) group.opacity = node.opacity;
+  if (node.hidden) group.hidden = true;
+  if (node.meta) group.meta = node.meta;
+  return group;
 }
-function nodeXml(node, registry, namespaces, warn) {
-  if (node.kind === "group") return groupXml(node, registry, namespaces, warn);
-  if (node.kind === "text") return textXml(node, registry, namespaces, warn);
-  if (node.kind === "image") return imageXml(node, namespaces);
-  return pathXml(node, registry, namespaces, warn);
+function withFill(parts, filled, fill) {
+  const host = parts.findIndex((p) => samePath(p.path, filled));
+  if (host < 0) return [{ path: filled, fill, stroke: void 0 }, ...parts];
+  return [{ ...parts[host], fill }, ...parts.filter((_, i) => i !== host)];
 }
 function warnStrokeAlign(align, warn) {
   if (align && align !== "center") {
     warn(`a stroke aligned "${align}" of its edge is written centered: SVG has no stroke alignment`);
   }
 }
-function imageXml(node, namespaces) {
-  const box = `x="${trimNumber(node.x)}" y="${trimNumber(node.y)}" width="${trimNumber(node.width)}" height="${trimNumber(node.height)}"`;
-  const outer = [];
-  if (node.opacity != null && node.opacity !== 1) {
-    outer.push(`opacity="${trimNumber(node.opacity)}"`);
-  }
-  const frame = boxTransformAttr(node);
-  if (frame) outer.push(frame);
-  const metaAttrs = metaAttrsXml(node.meta, namespaces);
-  const metaEls = metaElementsXml(node.meta, namespaces);
-  const href = `href="${escapeAttr(node.href)}"`;
-  if (!node.source && !node.flipX && !node.flipY) {
-    const attrs = [href, box, 'preserveAspectRatio="none"', ...outer].join(" ");
-    if (metaEls) return `<image ${attrs}${metaAttrs}>${metaEls}</image>`;
-    return `<image ${attrs}${metaAttrs}/>`;
-  }
-  const src = node.source ?? { x: 0, y: 0, width: 1, height: 1 };
-  const viewBox = [src.x, src.y, src.width, src.height].map(trimNumber).join(" ");
-  const flip = node.flipX || node.flipY ? ` transform="matrix(${node.flipX ? -1 : 1} 0 0 ${node.flipY ? -1 : 1} ${trimNumber(node.flipX ? 2 * src.x + src.width : 0)} ${trimNumber(node.flipY ? 2 * src.y + src.height : 0)})"` : "";
-  const head = ['<g data-weasel-image="true"', ...outer].join(" ");
-  return `${head}${metaAttrs}><svg ${box} viewBox="${viewBox}" preserveAspectRatio="none"><image ${href} x="0" y="0" width="1" height="1" preserveAspectRatio="none"${flip}/></svg>${metaEls}</g>`;
-}
-function groupXml(node, registry, namespaces, warn) {
-  const attrs = [];
-  if (node.transform) {
-    const m = formatMatrix(node.transform);
-    if (m) attrs.push(`transform="${m}"`);
-  }
-  if (node.clip) {
-    attrs.push(`clip-path="url(#${registry.clipId(node.clip)})"`);
-  }
-  if (node.opacity != null && node.opacity !== 1) {
-    attrs.push(`opacity="${trimNumber(node.opacity)}"`);
-  }
-  const metaAttrs = metaAttrsXml(node.meta, namespaces);
-  const head = attrs.length > 0 ? `<g ${attrs.join(" ")}${metaAttrs}>` : `<g${metaAttrs}>`;
-  const body = node.children.map((c) => nodeXml(c, registry, namespaces, warn)).join("");
-  return `${head}${body}${metaElementsXml(node.meta, namespaces)}</g>`;
-}
-function pathXml(node, registry, namespaces, warn) {
-  const attrs = [`d="${serializePathD(node.path)}"`];
-  const fillAttrs = paintAttrs(node.fill, "fill", registry);
-  for (const a of fillAttrs) attrs.push(a);
-  if (node.path.kind === "polygon" && node.path.fillRule === "evenodd") {
-    attrs.push(`fill-rule="evenodd"`);
-  }
-  if (node.stroke) {
-    const strokeAttrs = strokeAttrsFor(node.stroke, registry, warn);
-    for (const a of strokeAttrs) attrs.push(a);
-  } else {
-    attrs.push('stroke="none"');
-  }
-  if (node.opacity != null && node.opacity !== 1) {
-    attrs.push(`opacity="${trimNumber(node.opacity)}"`);
-  }
-  if (node.rotation != null && node.rotation !== 0) {
-    const b = pathBounds(node.path);
-    const cx = b.minX + (b.maxX - b.minX) / 2;
-    const cy = b.minY + (b.maxY - b.minY) / 2;
-    const deg = node.rotation * 180 / Math.PI;
-    attrs.push(`transform="rotate(${trimNumber(deg)} ${trimNumber(cx)} ${trimNumber(cy)})"`);
-  }
-  const metaAttrs = metaAttrsXml(node.meta, namespaces);
-  const metaEls = metaElementsXml(node.meta, namespaces);
-  if (metaEls) {
-    return `<path ${attrs.join(" ")}${metaAttrs}>${metaEls}</path>`;
-  }
-  return `<path ${attrs.join(" ")}${metaAttrs}/>`;
-}
 function paintAttrs(paint, name, registry, includeOpacity = true) {
   if (paint.kind === "none") return [`${name}="none"`];
   const out = [`${name}="${paint.kind === "solid" ? escapeAttr(paint.color) : registry.ref(paint.paint)}"`];
@@ -3171,7 +3309,7 @@ function coreStrokeAttrs(stroke, registry, warn) {
   const width2 = stroke.width ?? 1;
   if (!((typeof width2 === "object" ? width2.px : width2) > 0)) return [];
   warnStrokeAlign(stroke.align, warn);
-  const attrs = [`stroke="${"color" in paint ? escapeAttr(paint.color) : registry.ref(paint)}"`];
+  const attrs = [`stroke="${isSolidPaint(paint) ? escapeAttr(paint.color) : registry.ref(paint)}"`];
   attrs.push(...opacityAttr("stroke-opacity", paint.opacity));
   attrs.push(...strokeWidthAttrs(width2));
   if (stroke.cap) attrs.push(`stroke-linecap="${stroke.cap}"`);
@@ -3223,49 +3361,14 @@ function strokeAttrsFor(stroke, registry, warn) {
   }
   return attrs;
 }
-function computeBounds(nodes) {
-  let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
-  const visit = (n, ctm) => {
-    if (n.kind === "group") {
-      const childCtm = n.transform ? multiply(ctm, n.transform) : ctm;
-      n.children.forEach((c) => visit(c, childCtm));
-      return;
-    }
-    const b = n.kind === "text" || n.kind === "image" ? { minX: n.x, minY: n.y, maxX: n.x + n.width, maxY: n.y + n.height } : pathBounds(n.path);
-    const frame = n.kind === "path" ? null : poseFrameOf(n);
-    const local = frame ? multiply(ctm, frame) : n.rotation ? rotateAboutCenter(ctm, b, n.rotation) : ctm;
-    for (const [x, y] of corners(b)) {
-      const px = local[0] * x + local[2] * y + local[4];
-      const py = local[1] * x + local[3] * y + local[5];
-      if (px < minX) minX = px;
-      if (py < minY) minY = py;
-      if (px > maxX) maxX = px;
-      if (py > maxY) maxY = py;
-    }
-  };
-  nodes.forEach((n) => visit(n, IDENTITY_MATRIX));
-  if (!Number.isFinite(minX)) {
-    return { x: 0, y: 0, width: 0, height: 0 };
-  }
-  return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
-}
-function corners(b) {
-  return [[b.minX, b.minY], [b.maxX, b.minY], [b.maxX, b.maxY], [b.minX, b.maxY]];
-}
-function rotateAboutCenter(ctm, b, angle) {
-  const cx = (b.minX + b.maxX) / 2;
-  const cy = (b.minY + b.maxY) / 2;
-  const c = Math.cos(angle);
-  const s = Math.sin(angle);
-  return multiply(ctm, [c, s, -s, c, cx - cx * c + cy * s, cy - cx * s - cy * c]);
-}
 function textXml(node, registry, namespaces, warn) {
+  const x = node.x + anchorOffset(node.style, node.width, node.text);
   const attrs = [
-    `x="${trimNumber(node.x + anchorOffset(node.style, node.width, node.text))}"`,
+    `x="${trimNumber(x)}"`,
     `y="${trimNumber(node.y)}"`,
     `dominant-baseline="text-before-edge"`,
-    // The runs model stores real line breaks; SVG's default whitespace
-    // handling would collapse them (and any indentation) away on re-import.
+    // SVG's default whitespace handling would collapse indentation and runs
+    // of spaces away on re-import.
     `xml:space="preserve"`,
     `data-weasel-width="${trimNumber(node.width)}"`,
     `data-weasel-height="${trimNumber(node.height)}"`
@@ -3302,11 +3405,13 @@ function textXml(node, registry, namespaces, warn) {
     attrs.push(`data-weasel-vertical-align="${node.verticalAlign}"`);
     warn(`text aligned to the ${node.verticalAlign} of its box is written top-aligned: SVG text has no box, so other readers draw it at the top (weasel reads the alignment back)`);
   }
-  if (node.fill === null) {
-    attrs.push('fill="none"');
-  } else if (node.fill) {
-    attrs.push(`fill="${"color" in node.fill ? escapeAttr(node.fill.color) : registry.ref(node.fill)}"`);
-    attrs.push(...opacityAttr("fill-opacity", node.fill.opacity));
+  if (node.fill !== void 0) {
+    const paint = node.fill?.paint;
+    if (!paint) attrs.push('fill="none"');
+    else {
+      attrs.push(`fill="${isSolidPaint(paint) ? escapeAttr(paint.color) : registry.ref(paint)}"`);
+      attrs.push(...opacityAttr("fill-opacity", paint.opacity));
+    }
   }
   for (const a of coreStrokeAttrs(node.stroke, registry, warn)) attrs.push(a);
   if (node.opacity != null && node.opacity !== 1) {
@@ -3314,7 +3419,9 @@ function textXml(node, registry, namespaces, warn) {
   }
   const frame = boxTransformAttr(node);
   if (frame) attrs.push(frame);
-  const body = node.runs && node.runs.length > 0 ? node.runs.map((r) => runXml(r, style, registry, warn)).join("") : escapeText(node.text);
+  const pieces = node.runs && node.runs.length > 0 ? node.runs.map((r) => ({ text: r.text, attrs: runAttrs(r, style, registry, warn) })) : [{ text: node.text, attrs: null }];
+  const resolved = resolveTextStyle(style);
+  const body = linesXml(pieces, x, resolved.fontSize * resolved.lineHeight);
   const metaAttrs = metaAttrsXml(node.meta, namespaces);
   const metaEls = metaElementsXml(node.meta, namespaces);
   return `<text ${attrs.join(" ")}${metaAttrs}>${body}${metaEls}</text>`;
@@ -3324,7 +3431,7 @@ function scriptSizeFace(run, style) {
   const face = resolveRunFace(run, resolveTextStyle(style));
   return { family: face.fontFamily, weight: face.fontWeight, style: face.fontStyle };
 }
-function runXml(run, style, registry, warn) {
+function runAttrs(run, style, registry, warn) {
   const attrs = [];
   if (run.fontWeight != null) attrs.push(`font-weight="${run.fontWeight}"`);
   else if (run.bold) attrs.push(`font-weight="700"`);
@@ -3346,18 +3453,15 @@ function runXml(run, style, registry, warn) {
   }
   const runDecoration = textDecorationValue(run.underline, run.strikethrough, run.overline);
   if (runDecoration) attrs.push(`text-decoration="${runDecoration}"`);
-  if (run.fill === null) attrs.push('fill="none"');
-  else if (run.fill) {
-    if ("color" in run.fill) {
-      attrs.push(`fill="${escapeAttr(run.fill.color)}"`);
-    } else {
-      attrs.push(`fill="${registry.ref(run.fill)}"`);
-    }
+  if (run.fill !== void 0) {
+    const paint = run.fill?.paint;
+    if (!paint) attrs.push('fill="none"');
+    else if (isSolidPaint(paint)) attrs.push(`fill="${escapeAttr(paint.color)}"`);
+    else attrs.push(`fill="${registry.ref(paint)}"`);
   }
   for (const a of coreStrokeAttrs(run.stroke, registry, warn)) attrs.push(a);
   if (run.textTransform) attrs.push(`style="text-transform:${run.textTransform}"`);
-  const head = attrs.length > 0 ? `<tspan ${attrs.join(" ")}>` : "<tspan>";
-  return `${head}${escapeText(run.text)}</tspan>`;
+  return attrs;
 }
 function textDecorationValue(underline, strikethrough, overline) {
   const tokens = [];
@@ -3366,9 +3470,193 @@ function textDecorationValue(underline, strikethrough, overline) {
   if (overline) tokens.push("overline");
   return tokens.length > 0 ? tokens.join(" ") : null;
 }
-function pathBounds(path) {
-  const b = boundsOfPath(path);
-  return { minX: b.x, minY: b.y, maxX: b.x + b.width, maxY: b.y + b.height };
+
+// src/prettyXml.ts
+var TOKEN2 = /<(?:[^>"]|"[^"]*")*>|[^<]+/g;
+var isTag = (t) => t !== void 0 && t.startsWith("<");
+var isClose = (t) => t.startsWith("</");
+var isSelfClosing = (t) => t.endsWith("/>");
+var tagName = (t) => /^<\/?([^\s/>]+)/.exec(t)[1];
+function matchingClose(tokens, open) {
+  let depth = 0;
+  for (let i = open; i < tokens.length; i++) {
+    const t = tokens[i];
+    if (!isTag(t) || isSelfClosing(t)) continue;
+    depth += isClose(t) ? -1 : 1;
+    if (depth === 0) return i;
+  }
+  return tokens.length - 1;
+}
+function prettyXml(xml) {
+  const tokens = xml.match(TOKEN2) ?? [];
+  const lines = [];
+  let depth = 0;
+  for (let i = 0; i < tokens.length; i++) {
+    const t = tokens[i];
+    if (!isTag(t) || isSelfClosing(t)) {
+      lines.push("  ".repeat(depth) + t);
+    } else if (isClose(t)) {
+      depth--;
+      lines.push("  ".repeat(depth) + t);
+    } else if (tagName(t) === "text" || !isTag(tokens[i + 1])) {
+      const close2 = matchingClose(tokens, i);
+      lines.push("  ".repeat(depth) + tokens.slice(i, close2 + 1).join(""));
+      i = close2;
+    } else {
+      lines.push("  ".repeat(depth) + t);
+      depth++;
+    }
+  }
+  return lines.join("\n");
+}
+
+// src/serialize.ts
+function serializeSvg(nodes, opts = {}) {
+  const registry = new PaintServerRegistry();
+  registerPaintServers(nodes, registry);
+  const bounds = opts.viewBox ?? computeBounds(nodes);
+  const vb = `${trimNumber(bounds.x)} ${trimNumber(bounds.y)} ${trimNumber(bounds.width)} ${trimNumber(bounds.height)}`;
+  const namespaces = opts.namespaces ?? {};
+  const rootAttrs = [`xmlns="http://www.w3.org/2000/svg"`];
+  if (registry.usesPrivateNamespace() && namespaces[WEASEL_NS_PREFIX] == null) {
+    rootAttrs.push(`xmlns:${WEASEL_NS_PREFIX}="${WEASEL_NS}"`);
+  }
+  for (const [prefix, uri] of Object.entries(namespaces)) {
+    rootAttrs.push(`xmlns:${prefix}="${escapeAttr(uri)}"`);
+  }
+  rootAttrs.push(`viewBox="${vb}"`);
+  if (opts.width != null) rootAttrs.push(`width="${trimNumber(opts.width)}"`);
+  if (opts.height != null) rootAttrs.push(`height="${trimNumber(opts.height)}"`);
+  if (opts.documentMeta) {
+    for (const prefix of Object.keys(namespaces)) {
+      const bucket = opts.documentMeta[prefix];
+      if (!bucket?.attrs) continue;
+      for (const [name, value] of Object.entries(bucket.attrs)) {
+        rootAttrs.push(`${prefix}:${name}="${escapeAttr(value)}"`);
+      }
+    }
+  }
+  const docMetaXml = metaElementsXml(opts.documentMeta, namespaces);
+  const defsXml = registry.toDefsXml(opts.onWarn);
+  const said = /* @__PURE__ */ new Set();
+  const warn = (m) => {
+    if (!opts.onWarn || said.has(m)) return;
+    said.add(m);
+    opts.onWarn(m);
+  };
+  const bodyXml = nodes.map((n) => nodeXml(n, registry, namespaces, warn)).join("");
+  const titleXml = opts.title && opts.title.length > 0 ? `<title>${escapeText(opts.title)}</title>` : "";
+  const xml = `<svg ${rootAttrs.join(" ")}>${titleXml}${defsXml}${docMetaXml}${bodyXml}</svg>`;
+  return opts.pretty ? prettyXml(xml) : xml;
+}
+function registerPaintServers(nodes, registry) {
+  for (const n of nodes) {
+    if (n.kind === "group") {
+      if (n.clip) registry.clipId(n.clip);
+      registerPaintServers(n.children, registry);
+    } else if (n.kind === "path") {
+      if (n.fill.kind === "gradient") registry.register(n.fill.paint);
+      if (n.stroke && n.stroke.paint.kind === "gradient") registry.register(n.stroke.paint.paint);
+      registerMarkers(n.stroke, registry);
+    } else if (n.kind === "text") {
+      registerTextPaint(n.fill?.paint, registry);
+      registerTextPaint(n.stroke?.paint, registry);
+      registerMarkers(n.stroke, registry);
+      for (const run of n.runs ?? []) {
+        registerTextPaint(run.fill?.paint, registry);
+        registerTextPaint(run.stroke?.paint, registry);
+      }
+    }
+  }
+}
+function registerTextPaint(paint, registry) {
+  if (paint && !isSolidPaint(paint)) registry.register(paint);
+}
+function registerMarkers(stroke, registry) {
+  if (!stroke) return;
+  for (const ref of [stroke.markerStart, stroke.markerMid, stroke.markerEnd]) {
+    if (ref !== void 0) registry.markerId(ref);
+  }
+}
+function nodeXml(node, registry, namespaces, warn) {
+  const xml = kindXml(node, registry, namespaces, warn);
+  return node.hidden ? xml.replace(/^<[\w:]+/, (open) => `${open} display="none"`) : xml;
+}
+function kindXml(node, registry, namespaces, warn) {
+  if (node.kind === "group") return groupXml(node, registry, namespaces, warn);
+  if (node.kind === "text") return textXml(node, registry, namespaces, warn);
+  if (node.kind === "image") return imageXml(node, namespaces);
+  const drawn = pathAsSvgDraws(node);
+  return drawn.kind === "group" ? groupXml(drawn, registry, namespaces, warn) : pathXml(drawn, registry, namespaces, warn);
+}
+function imageXml(node, namespaces) {
+  const box = `x="${trimNumber(node.x)}" y="${trimNumber(node.y)}" width="${trimNumber(node.width)}" height="${trimNumber(node.height)}"`;
+  const outer = [];
+  if (node.opacity != null && node.opacity !== 1) {
+    outer.push(`opacity="${trimNumber(node.opacity)}"`);
+  }
+  const frame = boxTransformAttr(node);
+  if (frame) outer.push(frame);
+  const metaAttrs = metaAttrsXml(node.meta, namespaces);
+  const metaEls = metaElementsXml(node.meta, namespaces);
+  const href = `href="${escapeAttr(node.href)}"`;
+  if (!node.source && !node.flipX && !node.flipY) {
+    const attrs = [href, box, 'preserveAspectRatio="none"', ...outer].join(" ");
+    if (metaEls) return `<image ${attrs}${metaAttrs}>${metaEls}</image>`;
+    return `<image ${attrs}${metaAttrs}/>`;
+  }
+  const src = node.source ?? { x: 0, y: 0, width: 1, height: 1 };
+  const viewBox = [src.x, src.y, src.width, src.height].map(trimNumber).join(" ");
+  const flip = node.flipX || node.flipY ? ` transform="matrix(${node.flipX ? -1 : 1} 0 0 ${node.flipY ? -1 : 1} ${trimNumber(node.flipX ? 2 * src.x + src.width : 0)} ${trimNumber(node.flipY ? 2 * src.y + src.height : 0)})"` : "";
+  const head = ['<g data-weasel-image="true"', ...outer].join(" ");
+  return `${head}${metaAttrs}><svg ${box} viewBox="${viewBox}" preserveAspectRatio="none"><image ${href} x="0" y="0" width="1" height="1" preserveAspectRatio="none"${flip}/></svg>${metaEls}</g>`;
+}
+function groupXml(node, registry, namespaces, warn) {
+  const attrs = [];
+  if (node.transform) {
+    const m = formatMatrix(node.transform);
+    if (m) attrs.push(`transform="${m}"`);
+  }
+  if (node.clip) {
+    attrs.push(`clip-path="url(#${registry.clipId(node.clip)})"`);
+  }
+  if (node.opacity != null && node.opacity !== 1) {
+    attrs.push(`opacity="${trimNumber(node.opacity)}"`);
+  }
+  const metaAttrs = metaAttrsXml(node.meta, namespaces);
+  const head = attrs.length > 0 ? `<g ${attrs.join(" ")}${metaAttrs}>` : `<g${metaAttrs}>`;
+  const body = node.children.map((c) => nodeXml(c, registry, namespaces, warn)).join("");
+  return `${head}${body}${metaElementsXml(node.meta, namespaces)}</g>`;
+}
+function pathXml(node, registry, namespaces, warn) {
+  const attrs = [`d="${serializePathD(node.path)}"`];
+  const fillAttrs = paintAttrs(node.fill, "fill", registry);
+  for (const a of fillAttrs) attrs.push(a);
+  if (node.path.kind === "polygon" && node.path.fillRule === "evenodd") {
+    attrs.push(`fill-rule="evenodd"`);
+  }
+  if (node.stroke) {
+    const strokeAttrs = strokeAttrsFor(node.stroke, registry, warn);
+    for (const a of strokeAttrs) attrs.push(a);
+  } else {
+    attrs.push('stroke="none"');
+  }
+  if (node.opacity != null && node.opacity !== 1) {
+    attrs.push(`opacity="${trimNumber(node.opacity)}"`);
+  }
+  if (node.rotation != null && node.rotation !== 0) {
+    const b = pathBounds(node.path);
+    const cx = b.minX + (b.maxX - b.minX) / 2;
+    const cy = b.minY + (b.maxY - b.minY) / 2;
+    const deg = node.rotation * 180 / Math.PI;
+    attrs.push(`transform="rotate(${trimNumber(deg)} ${trimNumber(cx)} ${trimNumber(cy)})"`);
+  }
+  const metaAttrs = metaAttrsXml(node.meta, namespaces);
+  const metaEls = metaElementsXml(node.meta, namespaces);
+  if (metaEls) {
+    return `<path ${attrs.join(" ")}${metaAttrs}>${metaEls}</path>`;
+  }
+  return `<path ${attrs.join(" ")}${metaAttrs}/>`;
 }
 function svgNeeds(nodes) {
   const registry = new PaintServerRegistry();
@@ -3395,6 +3683,22 @@ function warmSvg(nodes) {
     warmPaintKinds(needs.paintKinds.filter(isPaintKindKnown))
   ]).then(() => void 0);
 }
+
+// src/fadePaint.ts
+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: mapFillPaint(run.fill, (p) => fadeFill(p, k)) } : {},
+    ...run.stroke ? { stroke: fadeStroke(run.stroke, k) } : {}
+  };
+}
 var CASCADE_OFFSET_PX = 24;
 var VIEWPORT_FIT = 0.9;
 function readFileText(file) {
@@ -3413,20 +3717,6 @@ function fillDataFromSvg(paint, box) {
   }
   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 = fillDataFromSvg(stroke.paint, box);
@@ -3448,7 +3738,7 @@ function fillInBoxFrame(fill, box) {
   return units === "world" ? fillToBoundsFrame(fill, box) : fill;
 }
 function runInBoxFrame(run, box) {
-  const fill = run.fill ? fillInBoxFrame(run.fill, box) : run.fill;
+  const fill = run.fill ? mapFillPaint(run.fill, (p) => fillInBoxFrame(p, box)) : run.fill;
   const stroke = run.stroke ? strokeInBoxFrame(run.stroke, box) : run.stroke;
   if (fill === run.fill && stroke === run.stroke) return run;
   return { ...run, ...fill ? { fill } : {}, ...stroke ? { stroke } : {} };
@@ -3468,7 +3758,7 @@ function svgNodesToKitDrafts(input, nextId, options = {}) {
     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 });
+    drafts.push({ kind: "leaf", id, parentId, pose, data: out, ...source.hidden ? { hidden: true } : {} });
     return pose;
   };
   const visit = (n, parentId, inherited2) => {
@@ -3478,7 +3768,9 @@ function svgNodesToKitDrafts(input, nextId, options = {}) {
         kind: "container",
         id: nextId(n),
         parentId,
-        pose: { x: 0, y: 0, width: 0, height: 0 }
+        pose: { x: 0, y: 0, width: 0, height: 0 },
+        data: n.clip ? { path: n.clip, fill: null } : {},
+        ...n.hidden ? { hidden: true } : {}
       };
       drafts.push(draft);
       const acc = unionAABB(n.children.map((c) => visit(c, draft.id, k)));
@@ -3486,7 +3778,7 @@ function svgNodesToKitDrafts(input, nextId, options = {}) {
         drafts.splice(drafts.indexOf(draft), 1);
         return null;
       }
-      draft.pose = acc;
+      draft.pose = n.clip ? boxOfPath(n.clip) : acc;
       return draft.pose;
     }
     if (n.kind === "text") {
@@ -3512,7 +3804,7 @@ function svgNodesToKitDrafts(input, nextId, options = {}) {
         ...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) } : {},
+        ...fill2 !== void 0 ? { fill: fill2 && mapFillPaint(fill2, (p) => fadeFill(fillInBoxFrame(p, box), k)) } : {},
         ...n.stroke !== void 0 ? { stroke: fadeStroke(strokeInBoxFrame(n.stroke, box), k) } : {}
       });
     }
@@ -3530,20 +3822,24 @@ function svgNodesToKitDrafts(input, nextId, options = {}) {
         }
       });
     }
-    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 b = boxOfPath(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 = fillDataFromSvg(n.fill, b);
     const strokeFromSvg = strokeDataFromSvg(n.stroke, b);
     return pushLeaf(n, parentId, pose, {
       path: n.path,
-      ...fill !== void 0 ? { fill: fill && fadeFill(fill, k) } : {},
+      ...fill !== void 0 ? { fill: fill && { paint: fadeFill(fill, k) } } : {},
       ...strokeFromSvg !== void 0 ? { stroke: fadeStroke(strokeFromSvg, k) } : {}
     });
   };
   for (const n of nodes) visit(n, null, 1);
   return drafts;
 }
+function boxOfPath(path) {
+  const b = boundsOfPath(path);
+  return { x: b.x, y: b.y, width: b.width, height: b.height };
+}
 function isNodeList(input) {
   return Array.isArray(input);
 }
@@ -3575,7 +3871,7 @@ async function unpackSvgFiles(files, ctx) {
         const wrapperId = ctx.scene.mintId();
         const union2 = unionAABB(roots.map((d) => d.pose));
         drafts = [
-          { kind: "container", id: wrapperId, parentId: null, pose: union2 },
+          { kind: "container", id: wrapperId, parentId: null, pose: union2, data: {} },
           ...drafts.map((d) => d.parentId === null ? { ...d, parentId: wrapperId } : d)
         ];
       }
@@ -3607,7 +3903,7 @@ async function unpackSvgFiles(files, ctx) {
             kind: d.kind,
             layer,
             pose: place(d.pose),
-            data: d.kind === "leaf" ? scaleLeafData(d.data, scale) : {},
+            data: d.kind === "leaf" ? scaleLeafData(d.data, scale) : d.data,
             parent: d.parentId
           },
           label: "Insert SVG"
@@ -3622,7 +3918,7 @@ async function unpackSvgFiles(files, ctx) {
 }
 function svgPaintFromKit(fill, box) {
   if (fill === null) return { kind: "none" };
-  if (fill.fill === void 0 || fill.fill === "solid") {
+  if (fill.kind === void 0 || fill.kind === "solid") {
     return { kind: "solid", color: fill.color, ...fill.opacity != null ? { opacity: fill.opacity } : {} };
   }
   return { kind: "gradient", paint: fillInPoseFrame(fill, box) };
@@ -3670,7 +3966,7 @@ function runInPoseFrame(run, box) {
   if (!run.fill && !run.stroke) return run;
   return {
     ...run,
-    ...run.fill ? { fill: fillInPoseFrame(run.fill, box) } : {},
+    ...run.fill ? { fill: mapFillPaint(run.fill, (p) => fillInPoseFrame(p, box)) } : {},
     ...run.stroke ? { stroke: strokeInPoseFrame(run.stroke, box) } : {}
   };
 }
@@ -3688,7 +3984,7 @@ function svgLeafFromKit(data, pose) {
     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.fill !== void 0) node2.fill = data.fill && mapFillPaint(data.fill, (p) => fillInPoseFrame(p, pose));
     if (data.stroke) node2.stroke = strokeInPoseFrame(data.stroke, pose);
     if (pose.rotation) node2.rotation = pose.rotation;
     if (pose.transform) node2.transform = pose.transform;
@@ -3700,10 +3996,15 @@ function svgLeafFromKit(data, pose) {
   const node = {
     kind: "path",
     path: pathInPoseFrame(data.path, pose),
-    fill: svgPaintFromKit(fill, pose)
+    fill: svgPaintFromKit(fill?.paint ?? null, pose)
   };
   if (stroke) node.stroke = stroke;
-  if (pose.rotation) node.rotation = pose.rotation;
+  const frame = poseLinearOf(pose) && poseFrameOf(pose);
+  if (frame) {
+    node.path = pathThroughPoseFrame(node.path, pose);
+    node.fill = paintThroughMatrix(node.fill, frame);
+    if (stroke) node.stroke = strokeThroughMatrix(stroke, frame);
+  } else if (pose.rotation) node.rotation = pose.rotation;
   return node;
 }
 function svgNodesFromKit(tree, options = {}) {
@@ -3713,12 +4014,25 @@ function svgNodesFromKit(tree, options = {}) {
     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 emitChildren = () => {
+        const children = [];
+        for (const c of tree.childrenOf(id)) {
+          const child = emit(c);
+          if (child) children.push(child);
+        }
+        return children;
+      };
+      const path = node.data?.path;
+      const clip = path ? pathThroughPoseFrame(pathInPoseFrame(path, node.pose), node.pose) : void 0;
+      const copies = node.copiesFromPose?.(node.pose, node) ?? [];
+      const content = () => ({ kind: "group", children: emitChildren(), ...clip ? { clip } : {} });
+      let g = content();
+      if (copies.length > 0) {
+        g = {
+          kind: "group",
+          children: [g, ...copies.map((transform) => ({ kind: "group", transform, children: [content()] }))]
+        };
       }
-      const g = { kind: "group", children };
       return group ? group(id, g) : g;
     }
     return leaf ? leaf(id, node) : svgLeafFromKit(node.data, node.pose);