@weasel-js/svg 1.9.4 → 1.10.0

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, fillsOpenSubpaths, splitByClosure, splitSubpaths, rotateAboutPoint, hasOpenSubpath } from '@weasel-js/geom';
+import { isTileKind, boundsOfPath, transformPath, isSolidPaint, resolveScreenLength, scriptMetricsFor, warmFonts, warmPaintKinds, isPaintKindKnown, solid, fillToBoundsFrame, getMarker, registerMarker, dwarn, unionAABB, createInsertOp, fillInPoseFrame, DEFAULT_SHAPE_FILL, pathInPoseFrame, poseLinearOf, poseFrameOf, pathThroughPoseFrame, DEFAULT_TEXT_STYLE, pathFromD, isPatternPaint, PATH_M, PATH_L, PATH_C, PATH_Q, PATH_Z, resolveAlign, paragraphDirection, resolveRunFace, resolveTextStyle, parseColor, rgbaToHex, layoutRuns, resolveRuns, PathBuilder, getPaintKind, resolveMarkerSize, 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) {
@@ -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,48 @@ function anchorOffset(style, width2, text) {
 }
 
 // src/tspanLines.ts
+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 = [];
+  /** Whether `tspan` opens a new line. 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;
+    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")) return false;
-    const dy = parseFloat(tspan.getAttribute("dy") ?? "");
-    return movedY || Number.isFinite(dy) && dy !== 0;
+    const starts = movedY || dy !== 0;
+    if (starts && afterText && this.at > from) this.pitches.push(this.at - from);
+    return starts;
+  }
+  /**
+   * 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 = mean / fontSize;
+    return Math.abs(lineHeight - DEFAULT_LINE_HEIGHT) < 1e-6 ? void 0 : lineHeight;
   }
 };
 function warnUnreadPositions(el, onWarn) {
@@ -2229,6 +2309,13 @@ function joinLines(lines) {
   return out;
 }
 
+// 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 XML_NS = "http://www.w3.org/XML/1998/namespace";
 function preservesSpace(el) {
@@ -2298,12 +2385,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,13 +2407,12 @@ 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 tracker = new LineTracker(el, onWarn);
   const push = (run) => {
     runLines[runLines.length - 1].push(run);
   };
@@ -2345,13 +2431,17 @@ function parseTextElement(el, ctm, style, gradients, onWarn) {
         continue;
       }
       warnUnreadPositions(sp, onWarn);
-      if (tracker.startsLine(sp)) runLines.push([]);
+      const afterText = runLines.some((line) => line.some((r) => r.text.trim() !== ""));
+      if (tracker.startsLine(sp, afterText)) runLines.push([]);
       push(readTspanRun(sp, gradients, leafStyle, onWarn));
     }
   }
   if (!preservesSpace(el)) for (const line of runLines) collapseRunWhitespace(line);
   const runs = joinLines(runLines);
   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);
@@ -2419,11 +2509,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 +2555,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 +2816,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 +2917,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 +2952,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 +2970,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,56 +3038,16 @@ 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)}"`);
-  }
-  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)}"`);
-      }
-    }
-  }
-  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>`;
-}
+
+// src/metaXml.ts
 function namespacedElementXml(prefix, localName2, el) {
   const attrs = [];
   for (const [name, value] of Object.entries(el.attrs)) {
@@ -3039,6 +3088,158 @@ function metaElementsXml(meta, namespaces) {
   }
   return out;
 }
+function computeBounds(nodes) {
+  let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+  const visit = (n, ctm) => {
+    if (n.hidden) return;
+    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 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;
+function withoutEndMarkers(stroke) {
+  const { markerStart: _start, markerEnd: _end, ...rest } = stroke;
+  return rest;
+}
+function withOpenSubpathsUnfilled(node) {
+  const path = node.path;
+  if (path.kind !== "polygon" || node.fill.kind === "none" || fillsOpenSubpaths(path)) return node;
+  const { closed, open } = splitByClosure(path);
+  if (!open) return node;
+  const { fill, stroke } = node;
+  const opens = capsEnds(stroke) ? splitSubpaths(open) : [open];
+  if (!closed && opens.length === 1) return { ...node, fill: { kind: "none" } };
+  const piece = (part, paint, line = stroke) => ({ kind: "path", path: part, fill: paint, ...line ? { stroke: line } : {} });
+  const group = {
+    kind: "group",
+    children: [
+      ...closed ? [piece(closed, fill, stroke && withoutEndMarkers(stroke))] : [],
+      ...opens.map((part) => piece(part, { kind: "none" }))
+    ]
+  };
+  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;
+}
+
+// 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") {
@@ -3049,18 +3250,18 @@ function registerPaintServers(nodes, registry) {
       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.fill?.paint, registry);
       registerTextPaint(n.stroke?.paint, registry);
       registerMarkers(n.stroke, registry);
       for (const run of n.runs ?? []) {
-        registerTextPaint(run.fill, registry);
+        registerTextPaint(run.fill?.paint, registry);
         registerTextPaint(run.stroke?.paint, registry);
       }
     }
   }
 }
 function registerTextPaint(paint, registry) {
-  if (paint && !("color" in paint)) registry.register(paint);
+  if (paint && !isSolidPaint(paint)) registry.register(paint);
 }
 function registerMarkers(stroke, registry) {
   if (!stroke) return;
@@ -3069,10 +3270,15 @@ function registerMarkers(stroke, registry) {
   }
 }
 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);
-  return pathXml(node, registry, namespaces, warn);
+  const drawn = withOpenSubpathsUnfilled(node);
+  return drawn.kind === "group" ? groupXml(drawn, registry, namespaces, warn) : pathXml(drawn, registry, namespaces, warn);
 }
 function warnStrokeAlign(align, warn) {
   if (align && align !== "center") {
@@ -3171,7 +3377,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,42 +3429,6 @@ 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 attrs = [
     `x="${trimNumber(node.x + anchorOffset(node.style, node.width, node.text))}"`,
@@ -3302,11 +3472,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) {
@@ -3346,13 +3518,11 @@ 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}"`);
@@ -3366,10 +3536,6 @@ 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 };
-}
 function svgNeeds(nodes) {
   const registry = new PaintServerRegistry();
   registerPaintServers(nodes, registry);
@@ -3395,6 +3561,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 +3595,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 +3616,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 +3636,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 +3646,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 +3656,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 +3682,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 +3700,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 +3749,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 +3781,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 +3796,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 +3844,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 +3862,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 +3874,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 = {}) {
@@ -3719,6 +3898,8 @@ function svgNodesFromKit(tree, options = {}) {
         if (child) children.push(child);
       }
       const g = { kind: "group", children };
+      const clip = node.data?.path;
+      if (clip) g.clip = pathThroughPoseFrame(pathInPoseFrame(clip, node.pose), node.pose);
       return group ? group(id, g) : g;
     }
     return leaf ? leaf(id, node) : svgLeafFromKit(node.data, node.pose);