@weasel-js/svg 1.9.3 → 1.10.0

package/dist/index.js

@@ -1,8 +1,8 @@
-import { pathFromD, PATH_M, PATH_L, PATH_Z, boundsOfPath, resolveScreenLength, scriptMetricsFor, warmFonts, warmPaintKinds, isPaintKindKnown, solid, fillToBoundsFrame, getMarker, registerMarker, dwarn, unionAABB, createInsertOp, fillInPoseFrame, DEFAULT_SHAPE_FILL, pathInPoseFrame, DEFAULT_TEXT_STYLE, PathBuilder, resolveTextStyle, layoutRuns, resolveRuns, resolveAlign, PATH_C, PATH_Q, resolveRunFace, parseColor, rgbaToHex, resolveMarkerSize, getPaintKind } from '@weasel-js/core';
-import { identity, multiply, invert } from '@weasel-js/geom';
+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/parse.ts
+// src/types.ts
 var IDENTITY_MATRIX = identity();
 function applyMatrix(m, x, y) {
   return { x: m[0] * x + m[2] * y + m[4], y: m[1] * x + m[3] * y + m[5] };
@@ -96,130 +96,134 @@ function trimNumber(n) {
   return String(r);
 }
 
-// src/shapes.ts
-var KAPPA = 4 * (Math.sqrt(2) - 1) / 3;
-function isAxisAlignedScale(m, eps = 1e-9) {
-  return Math.abs(m[1]) < eps && Math.abs(m[2]) < eps;
-}
-function transformPath(path, m) {
-  if (isIdentity(m)) return path;
-  if (path.kind === "rect") {
-    if (isAxisAlignedScale(m)) {
-      const a = m[0], d = m[3], e = m[4], f = m[5];
-      let x = path.x * a + e;
-      let y = path.y * d + f;
-      let w = path.width * a;
-      let h = path.height * d;
-      if (w < 0) {
-        x += w;
-        w = -w;
-      }
-      if (h < 0) {
-        y += h;
-        h = -h;
-      }
-      return { kind: "rect", x, y, width: w, height: h };
-    }
-    return transformPath(rectToPolygon(path), m);
-  }
-  const xs = path.coords;
-  const out = new Float32Array(xs.length);
-  for (let i = 0; i < xs.length; i += 2) {
-    const p = applyMatrix(m, xs[i], xs[i + 1]);
-    out[i] = p.x;
-    out[i + 1] = p.y;
-  }
-  return {
-    kind: "polygon",
-    commands: new Uint8Array(path.commands),
-    coords: out,
-    fillRule: path.fillRule
-  };
-}
-function rectToPolygon(r) {
-  const b = new PathBuilder();
-  b.moveTo(r.x, r.y);
-  b.lineTo(r.x + r.width, r.y);
-  b.lineTo(r.x + r.width, r.y + r.height);
-  b.lineTo(r.x, r.y + r.height);
-  b.close();
-  return b.build();
-}
-function rectElementToPath(x, y, width2, height2, rx, ry, m = IDENTITY_MATRIX) {
-  if (rx <= 0 && ry <= 0) {
-    return transformPath({ kind: "rect", x, y, width: width2, height: height2 }, m);
-  }
-  const r = Math.min(Math.max(rx, ry), Math.min(width2, height2) / 2);
-  const r2 = Math.min(rx > 0 ? rx : r, ry > 0 ? ry : r, Math.min(width2, height2) / 2);
-  const rad = r2;
-  const k = KAPPA * rad;
-  const x2 = x + width2;
-  const y2 = y + height2;
-  const b = new PathBuilder();
-  b.moveTo(x + rad, y);
-  b.lineTo(x2 - rad, y);
-  b.curveTo(x2 - rad + k, y, x2, y + rad - k, x2, y + rad);
-  b.lineTo(x2, y2 - rad);
-  b.curveTo(x2, y2 - rad + k, x2 - rad + k, y2, x2 - rad, y2);
-  b.lineTo(x + rad, y2);
-  b.curveTo(x + rad - k, y2, x, y2 - rad + k, x, y2 - rad);
-  b.lineTo(x, y + rad);
-  b.curveTo(x, y + rad - k, x + rad - k, y, x + rad, y);
-  b.close();
-  return transformPath(b.build(), m);
+// src/absoluteUnits.ts
+var ABSOLUTE_PX = Object.assign(/* @__PURE__ */ Object.create(null), {
+  px: 1,
+  in: 96,
+  cm: 96 / 2.54,
+  mm: 96 / 25.4,
+  q: 96 / 101.6,
+  pt: 96 / 72,
+  pc: 16
+});
+
+// src/fontSize.ts
+var DEFAULT_FONT_SIZE = 16;
+var EMS = Object.assign(/* @__PURE__ */ Object.create(null), { em: 1, ex: 0.5 });
+function emsPer(unit) {
+  return EMS[unit.toLowerCase()];
+}
+var KEYWORD_PX = Object.assign(/* @__PURE__ */ Object.create(null), {
+  "xx-small": 9,
+  "x-small": 10,
+  small: 13,
+  medium: DEFAULT_FONT_SIZE,
+  large: 18,
+  "x-large": 24,
+  "xx-large": 32,
+  "xxx-large": 48
+});
+var KEYWORD_SCALE = Object.assign(/* @__PURE__ */ Object.create(null), {
+  larger: 1.2,
+  smaller: 1 / 1.2
+});
+function fontSizeKeyword(raw) {
+  const word = raw.trim().toLowerCase();
+  const size = KEYWORD_PX[word];
+  if (size != null) return { size };
+  const scale = KEYWORD_SCALE[word];
+  return scale == null ? void 0 : { scale };
+}
+var NUMBER = "[-+]?(?:\\d+\\.?\\d*|\\.\\d+)(?:e[-+]?\\d+)?";
+var DIMENSION = new RegExp(`^\\s*(${NUMBER})\\s*([a-z%]*)\\s*$`, "i");
+var FONT_RELATIVE = new RegExp(`(?<![\\w.])(${NUMBER})(em|ex)(?![\\w%])`, "gi");
+var LENGTH_PROPERTIES = ["stroke-width", "stroke-dasharray", "letter-spacing"];
+function computedFontSize(raw, parentSize) {
+  const word = fontSizeKeyword(raw);
+  if (word) return "size" in word ? word.size : word.scale * parentSize;
+  const m = DIMENSION.exec(raw);
+  if (!m) return void 0;
+  const n = Number(m[1]);
+  const unit = m[2].toLowerCase();
+  if (unit === "") return n;
+  if (unit === "%") return n / 100 * parentSize;
+  const ems = emsPer(unit);
+  if (ems != null) return n * ems * parentSize;
+  const scale = ABSOLUTE_PX[unit];
+  return scale == null ? void 0 : n * scale;
+}
+function fontSizeOf(style) {
+  const raw = style["font-size"];
+  if (raw == null) return DEFAULT_FONT_SIZE;
+  const size = computedFontSize(raw, DEFAULT_FONT_SIZE);
+  if (size != null) return size;
+  const n = parseFloat(raw);
+  return Number.isFinite(n) ? n : DEFAULT_FONT_SIZE;
+}
+function computeFontRelative(style, parentSize) {
+  const raw = style["font-size"];
+  if (raw != null && (/(?:%|em|ex)\s*$/i.test(raw) || fontSizeKeyword(raw))) {
+    const size2 = computedFontSize(raw, parentSize);
+    if (size2 != null) style["font-size"] = String(size2);
+  }
+  const size = fontSizeOf(style);
+  for (const prop of LENGTH_PROPERTIES) {
+    const value = style[prop];
+    if (value == null) continue;
+    style[prop] = value.replace(FONT_RELATIVE, (_, n, unit) => String(Number(n) * EMS[unit.toLowerCase()] * size));
+  }
+}
+function scaleLength(v, scale) {
+  return typeof v === "number" ? v * scale : v;
+}
+function scaleStroke(stroke, scale) {
+  const { width: width2 } = stroke;
+  if (scale === 1 || typeof width2 === "object") return stroke;
+  const out = { ...stroke };
+  if (width2 !== void 0) out.width = width2 * scale;
+  if (out.dash) out.dash = out.dash.map((n) => n * scale);
+  return out;
 }
-function ellipseToPath(cx, cy, rx, ry, m = IDENTITY_MATRIX) {
-  const kx = KAPPA * rx;
-  const ky = KAPPA * ry;
-  const b = new PathBuilder();
-  b.moveTo(cx + rx, cy);
-  b.curveTo(cx + rx, cy + ky, cx + kx, cy + ry, cx, cy + ry);
-  b.curveTo(cx - kx, cy + ry, cx - rx, cy + ky, cx - rx, cy);
-  b.curveTo(cx - rx, cy - ky, cx - kx, cy - ry, cx, cy - ry);
-  b.curveTo(cx + kx, cy - ry, cx + rx, cy - ky, cx + rx, cy);
-  b.close();
-  return transformPath(b.build(), m);
+function scaleRuns(runs, scale) {
+  return runs.map((r) => {
+    const out = { ...r };
+    if (out.fontSize !== void 0) out.fontSize = scaleLength(out.fontSize, scale);
+    if (out.letterSpacing !== void 0) out.letterSpacing = scaleLength(out.letterSpacing, scale);
+    if (out.stroke) out.stroke = scaleStroke(out.stroke, scale);
+    return out;
+  });
 }
-function circleToPath(cx, cy, r, m = IDENTITY_MATRIX) {
-  return ellipseToPath(cx, cy, r, r, m);
+function scaleTextStyle(style, scale) {
+  const out = { ...style };
+  out.fontSize = scaleLength(out.fontSize ?? resolveTextStyle(out).fontSize, scale);
+  if (out.letterSpacing !== void 0) out.letterSpacing = scaleLength(out.letterSpacing, scale);
+  return out;
 }
-function lineToPath(x1, y1, x2, y2, m = IDENTITY_MATRIX) {
-  const b = new PathBuilder();
-  b.moveTo(x1, y1);
-  b.lineTo(x2, y2);
-  return transformPath(b.build(), m);
+
+// src/paintThroughMatrix.ts
+function uniformScaleOf(m) {
+  return Math.sqrt(Math.abs(m[0] * m[3] - m[1] * m[2]));
 }
-function parsePoints(raw) {
-  const out = [];
-  const nums = raw.match(/[-+]?(?:\d*\.\d+|\d+\.?)(?:[eE][-+]?\d+)?/g);
-  if (!nums) return out;
-  for (let i = 0; i + 1 < nums.length; i += 2) {
-    out.push({ x: parseFloat(nums[i]), y: parseFloat(nums[i + 1]) });
-  }
-  return out;
+function isNonUniform(m) {
+  const [a, b, c, d] = m;
+  const n = Math.hypot(a, b, c, d);
+  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 polylineToPath(points, m = IDENTITY_MATRIX) {
-  if (points.length === 0) {
-    return { kind: "polygon", commands: new Uint8Array(), coords: new Float32Array(), fillRule: "nonzero" };
+function fillThroughMatrix(fill, m) {
+  if (!("units" in fill) || fill.units !== "world" && fill.units !== "local") return fill;
+  const at = (p) => applyMatrix(m, p.x, p.y);
+  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) };
   }
-  const b = new PathBuilder();
-  b.moveTo(points[0].x, points[0].y);
-  for (let i = 1; i < points.length; i++) b.lineTo(points[i].x, points[i].y);
-  return transformPath(b.build(), m);
+  if (fill.kind === "conic-gradient") return { ...fill, center: at(fill.center) };
+  return fill;
 }
-function polygonToPath(points, m = IDENTITY_MATRIX) {
-  if (points.length === 0) {
-    return { kind: "polygon", commands: new Uint8Array(), coords: new Float32Array(), fillRule: "nonzero" };
-  }
-  const b = new PathBuilder();
-  b.moveTo(points[0].x, points[0].y);
-  for (let i = 1; i < points.length; i++) b.lineTo(points[i].x, points[i].y);
-  b.close();
-  return transformPath(b.build(), m);
+function paintThroughMatrix(paint, m) {
+  return paint.kind === "gradient" ? { ...paint, paint: fillThroughMatrix(paint.paint, m) } : paint;
 }
-function anchorOffset(style, width2) {
-  const edge = resolveAlign(style?.align ?? "left", style?.direction ?? "ltr");
-  return edge === "center" ? width2 / 2 : edge === "right" ? width2 : 0;
+function strokeThroughMatrix(stroke, m) {
+  return { ...scaleStroke(stroke, uniformScaleOf(m)), paint: paintThroughMatrix(stroke.paint, m) };
 }
 
 // src/cssScan.ts
@@ -417,15 +421,6 @@ var DEFAULT_MEDIA_ENVIRONMENT = {
   color: 8,
   monochrome: 0
 };
-var ABSOLUTE_PX = {
-  px: 1,
-  in: 96,
-  cm: 96 / 2.54,
-  mm: 96 / 25.4,
-  q: 96 / 101.6,
-  pt: 96 / 72,
-  pc: 16
-};
 function absoluteLength(raw) {
   const m = raw == null ? null : /^\s*([+-]?(?:\d+\.?\d*|\.\d+)(?:e[+-]?\d+)?)\s*([a-z]*)\s*$/i.exec(raw);
   if (!m) return void 0;
@@ -640,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();
@@ -670,21 +765,28 @@ function parsePaintAttr(raw) {
 
 // src/properties.ts
 var TEXT_TRANSFORMS = /* @__PURE__ */ new Set(["none", "uppercase", "lowercase", "capitalize"]);
-var DIMENSION = /^([+-]?(?:\d+\.?\d*|\.\d+)(?:e[+-]?\d+)?)([a-z%]*)$/i;
+var DIMENSION2 = /^([+-]?(?:\d+\.?\d*|\.\d+)(?:e[+-]?\d+)?)([a-z%]*)$/i;
 function dimension(v) {
-  const m = DIMENSION.exec(v);
+  const m = DIMENSION2.exec(v);
   return m ? { n: Number(m[1]), unit: m[2].toLowerCase() } : void 0;
 }
 var clamp01 = (n) => n < 0 ? 0 : n > 1 ? 1 : n;
-var length = (native, coercedAs) => (v, warn, prop) => {
+function pxPer(unit, fontSize) {
+  if (unit === "") return 1;
+  const ems = emsPer(unit);
+  return ems != null ? ems * fontSize : ABSOLUTE_PX[unit];
+}
+var length = (native, coercedAs) => (v, warn, prop, fontSize) => {
   const d = dimension(v);
   if (!d) return void 0;
-  if (d.unit && !native.includes(d.unit)) {
+  const scale = native === "px" ? pxPer(d.unit, fontSize) : emsPer(d.unit);
+  if (scale != null) return d.n * scale;
+  if (d.unit) {
     warn(`${prop} "${v}" uses unit "${d.unit}", which is not converted; treated as ${d.n} ${coercedAs}`);
   }
   return d.n;
 };
-var worldLength = length(["px"], "world units");
+var worldLength = length("px", "world units");
 var keyword2 = (...words) => (v) => words.includes(v) ? v : void 0;
 var isCurrentColor = (v) => v.toLowerCase() === "currentcolor";
 function readPaint(v) {
@@ -722,16 +824,17 @@ function readLinejoin(v, warn) {
   warn(`unsupported stroke-linejoin: ${v}`);
   return void 0;
 }
-function readDashArray(v, warn) {
+function readDashArray(v, warn, _prop, fontSize) {
   if (v === "none" || v === "") return null;
   const nums = [];
   for (const t of v.split(/[\s,]+/).filter(Boolean)) {
     const d = dimension(t);
-    if (!d || d.unit !== "" && d.unit !== "px" || d.n < 0) {
+    const scale = d && pxPer(d.unit, fontSize);
+    if (!d || scale == null || d.n < 0) {
       warn(`unrecognized stroke-dasharray: ${v}`);
       return void 0;
     }
-    nums.push(d.n);
+    nums.push(d.n * scale);
   }
   return nums.length % 2 === 1 ? [...nums, ...nums] : nums;
 }
@@ -744,10 +847,14 @@ function readMiterLimit(v, warn) {
 function readColor(v) {
   return isCurrentColor(v) || parsePaintAttr(v)?.kind === "solid" ? v : void 0;
 }
-function readFontSize(v, warn, prop) {
+function readFontSize(v, warn, prop, fontSize) {
+  const word = fontSizeKeyword(v);
+  if (word) return "size" in word ? { fontSize: word.size } : { fontScale: word.scale };
   const d = dimension(v);
   if (d?.unit === "%") return { fontScale: d.n / 100 };
-  const n = worldLength(v, warn, prop);
+  const ems = d && emsPer(d.unit);
+  if (d && ems != null) return { fontScale: d.n * ems };
+  const n = worldLength(v, warn, prop, fontSize);
   return n == null ? void 0 : { fontSize: n };
 }
 function readFontWeight(v) {
@@ -763,8 +870,8 @@ function readFontStyle(v, warn) {
   }
   return void 0;
 }
-function readLetterSpacing(v, warn, prop) {
-  return v === "normal" ? null : worldLength(v, warn, prop);
+function readLetterSpacing(v, warn, prop, fontSize) {
+  return v === "normal" ? null : worldLength(v, warn, prop, fontSize);
 }
 function readDecoration(v, warn) {
   const out = {};
@@ -788,17 +895,22 @@ function readTextTransform(v) {
   const t = v.toLowerCase();
   return TEXT_TRANSFORMS.has(t) ? t : void 0;
 }
-var emLength = length(["em"], "em");
+var emLength = length("em", "em");
 function readBaselineShift(v, warn, prop) {
   const k = v.toLowerCase();
   if (k === "super" || k === "sub") return { script: k };
   if (k === "baseline") return {};
   const d = dimension(v);
   if (d?.unit === "%") return d.n === 0 ? {} : { baselineShift: d.n / 100 };
-  const n = emLength(v, warn, prop);
+  const n = emLength(v, warn, prop, DEFAULT_FONT_SIZE);
   if (n == null) return void 0;
   return n === 0 ? {} : { baselineShift: n };
 }
+function readClipRef(v) {
+  if (v === "none") return "none";
+  const ref = /^url\(\s*["']?#([^)\s"']+)["']?\s*\)$/.exec(v);
+  return ref ? { id: ref[1] } : void 0;
+}
 var inherited = (read) => ({ inherits: true, read });
 var own = (read) => ({ inherits: false, read });
 var PROPERTIES = {
@@ -830,16 +942,19 @@ var PROPERTIES = {
   "stop-color": own(readSolidColor),
   "stop-opacity": own(readRatio),
   "baseline-shift": own(readBaselineShift),
-  "vector-effect": own(keyword2("none", "non-scaling-stroke"))
+  "vector-effect": own(keyword2("none", "non-scaling-stroke")),
+  "clip-path": own(readClipRef),
+  "display": own(keyword2("none", "inline")),
+  "visibility": inherited(keyword2("visible", "hidden", "collapse"))
 };
 var INHERITED_PROPERTIES = Object.keys(PROPERTIES).filter((p) => PROPERTIES[p].inherits);
 var silent = () => {
 };
-function readProperty(prop, raw, warn = silent) {
+function readProperty(prop, raw, warn = silent, fontSize = DEFAULT_FONT_SIZE) {
   if (raw == null) return void 0;
   const v = raw.trim();
   if (v === "inherit") return void 0;
-  return PROPERTIES[prop].read(v, warn, prop);
+  return PROPERTIES[prop].read(v, warn, prop, fontSize);
 }
 function isPropertyName(prop) {
   return Object.prototype.hasOwnProperty.call(PROPERTIES, prop);
@@ -873,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;
@@ -1029,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);
       }
@@ -1037,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 } : {}
+          });
         }
       }
     }
@@ -1057,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) };
@@ -1103,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));
@@ -1128,6 +1196,7 @@ function deriveStyle(parent, el) {
     if (!next) next = { ...parent };
     next[prop] = own2;
   }
+  if (next) computeFontRelative(next, fontSizeOf(parent));
   return next ?? parent;
 }
 function resolveCurrentColor(raw, style) {
@@ -1136,18 +1205,86 @@ function resolveCurrentColor(raw, style) {
   const color = readProperty("color", style["color"]);
   return color == null || color.toLowerCase() === "currentcolor" ? "#000000" : color;
 }
-function ownValue(el, prop, warn) {
-  return readProperty(prop, ownProp(el, prop), warn);
+function ownValue(el, prop, warn, fontSize) {
+  return readProperty(prop, ownProp(el, prop), warn, fontSize);
 }
 function styleValue(style, prop, warn) {
   return readProperty(prop, style[prop], warn);
 }
 
-// src/elements.ts
-function collectElementsByTag(root, tags) {
-  const out = /* @__PURE__ */ new Map();
-  const consider = (el) => {
-    if (!tags.has(el.tagName.toLowerCase())) return;
+// src/xmlEscape.ts
+var LINE_BREAK_CONTROLS = /[\u000B\u000C]/g;
+var NOT_XML_CHAR = /[\u0000-\u0008\u000E-\u001F￾￿]|[\uD800-\uDBFF](?![\uDC00-\uDFFF])|(?<![\uD800-\uDBFF])[\uDC00-\uDFFF]/g;
+function xmlChars(s) {
+  return s.replace(LINE_BREAK_CONTROLS, "\n").replace(NOT_XML_CHAR, "");
+}
+function escapeAttr(s) {
+  return xmlChars(s).replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/\t/g, "&#9;").replace(/\n/g, "&#10;").replace(/\r/g, "&#13;");
+}
+function escapeText(s) {
+  return xmlChars(s).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/\r/g, "&#13;");
+}
+
+// src/styleAt.ts
+function styleAt(el) {
+  const chain = [];
+  for (let e = el; e; e = e.parentElement) chain.unshift(e);
+  return chain.reduce((style, e) => deriveStyle(style, e), EMPTY_STYLE);
+}
+
+// src/lengths.ts
+var LENGTH = /^\s*([-+]?(?:\d*\.\d+|\d+\.?)(?:[eE][-+]?\d+)?)\s*([a-z%]*)\s*$/i;
+function viewportOf(el) {
+  for (let e = el.parentElement; e; e = e.parentElement) {
+    if (e.tagName.toLowerCase() !== "svg") continue;
+    const box = (e.getAttribute("viewBox") ?? "").trim().split(/[\s,]+/).map(Number);
+    if (box.length === 4 && box.every(Number.isFinite)) return { width: box[2], height: box[3] };
+    const w = LENGTH.exec(e.getAttribute("width") ?? "");
+    const h = LENGTH.exec(e.getAttribute("height") ?? "");
+    if (w && h && w[2] !== "%" && h[2] !== "%") return { width: userUnits(w), height: userUnits(h) };
+    return void 0;
+  }
+  return void 0;
+}
+function userUnits(m) {
+  return Number(m[1]) * (ABSOLUTE_PX[m[2].toLowerCase()] ?? 1);
+}
+function readLength(el, name, axis, fallback, onWarn) {
+  return resolveLength(el.getAttribute(name), el, name, axis, fallback, onWarn);
+}
+function resolveLength(raw, el, name, axis, fallback, onWarn) {
+  if (raw == null) return fallback;
+  const m = LENGTH.exec(raw);
+  if (!m) {
+    const n2 = parseFloat(raw);
+    return Number.isFinite(n2) ? n2 : fallback;
+  }
+  const n = Number(m[1]);
+  const unit = m[2].toLowerCase();
+  if (unit === "") return n;
+  const scale = ABSOLUTE_PX[unit];
+  if (scale != null) return n * scale;
+  const ems = emsPer(unit);
+  if (ems != null) return n * ems * fontSizeOf(styleAt(el));
+  const tag = el.tagName.toLowerCase();
+  if (unit !== "%") {
+    onWarn(`<${tag} ${name}="${raw}"> unit "${unit}" is not converted; read as ${n}`);
+    return n;
+  }
+  const view = viewportOf(el);
+  if (!view) {
+    onWarn(`<${tag} ${name}="${raw}"> has no viewport to be a percentage of; read as ${n}`);
+    return n;
+  }
+  const of = axis === "x" ? view.width : axis === "y" ? view.height : Math.sqrt((view.width * view.width + view.height * view.height) / 2);
+  return n / 100 * of;
+}
+
+// src/elements.ts
+function collectElementsByTag(root, tags) {
+  const out = /* @__PURE__ */ new Map();
+  const consider = (el) => {
+    if (!tags.has(el.tagName.toLowerCase())) return;
     const id = el.getAttribute("id");
     if (id && !out.has(id)) out.set(id, el);
   };
@@ -1158,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 };
@@ -1189,7 +1323,7 @@ function patternXml(id, paint, onWarn) {
 function tilePreviewSvg(spec, background) {
   const geometry = tileGeometry(spec);
   const s = trimNumber(geometry.size);
-  const bg = background ? `<rect width="${s}" height="${s}" fill="${background}"/>` : "";
+  const bg = background ? `<rect width="${s}" height="${s}" fill="${escapeAttr(background)}"/>` : "";
   return `<svg xmlns="http://www.w3.org/2000/svg" width="${s}" height="${s}" viewBox="0 0 ${s} ${s}">${bg}${geometry.shapes.map(shapeXml).join("")}</svg>`;
 }
 function tilePreviewCssUrl(spec, background) {
@@ -1200,14 +1334,14 @@ function shapeXml(shape) {
     case "line":
       return `<line x1="${trimNumber(shape.x1)}" y1="${trimNumber(shape.y1)}" x2="${trimNumber(shape.x2)}" y2="${trimNumber(shape.y2)}" stroke="${shape.color}" stroke-width="${trimNumber(shape.width)}"/>`;
     case "circle":
-      return `<circle cx="${trimNumber(shape.cx)}" cy="${trimNumber(shape.cy)}" r="${trimNumber(shape.r)}" fill="${shape.color}"/>`;
+      return `<circle cx="${trimNumber(shape.cx)}" cy="${trimNumber(shape.cy)}" r="${trimNumber(shape.r)}" fill="${escapeAttr(shape.color)}"/>`;
     case "ellipse": {
       const deg = shape.rotation * 180 / Math.PI;
       const transform = deg === 0 ? "" : ` transform="rotate(${trimNumber(deg)} ${trimNumber(shape.cx)} ${trimNumber(shape.cy)})"`;
-      return `<ellipse cx="${trimNumber(shape.cx)}" cy="${trimNumber(shape.cy)}" rx="${trimNumber(shape.rx)}" ry="${trimNumber(shape.ry)}" fill="${shape.color}"${transform}/>`;
+      return `<ellipse cx="${trimNumber(shape.cx)}" cy="${trimNumber(shape.cy)}" rx="${trimNumber(shape.rx)}" ry="${trimNumber(shape.ry)}" fill="${escapeAttr(shape.color)}"${transform}/>`;
     }
     case "rect":
-      return `<rect x="${trimNumber(shape.x)}" y="${trimNumber(shape.y)}" width="${trimNumber(shape.width)}" height="${trimNumber(shape.height)}" fill="${shape.color}"/>`;
+      return `<rect x="${trimNumber(shape.x)}" y="${trimNumber(shape.y)}" width="${trimNumber(shape.width)}" height="${trimNumber(shape.height)}" fill="${escapeAttr(shape.color)}"/>`;
     default:
       return "";
   }
@@ -1234,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;
   }
@@ -1242,14 +1376,11 @@ 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;
 }
-function escapeAttr(s) {
-  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
-}
 function serializePathD(path) {
   if (path.kind === "rect") {
     const { x, y, width: width2, height: height2 } = path;
@@ -1288,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) {
@@ -1383,7 +1514,7 @@ function readStops(el, onWarn) {
     const colorAttr = ownProp(c, "stop-color") ?? "#000000";
     const parsed = readProperty("stop-color", colorAttr, onWarn);
     if (parsed) {
-      const alpha = ownValue(c, "stop-opacity") ?? parsed.alpha;
+      const alpha = (ownValue(c, "stop-opacity") ?? 1) * parsed.alpha;
       stops.push({ offset, color: alpha < 1 ? applyAlpha(parsed.color, alpha) : parsed.color });
     } else {
       onWarn?.(`gradient stop has unrecognized stop-color: ${colorAttr}`);
@@ -1410,41 +1541,61 @@ function num(raw, fallback) {
   const n = parseRatio(raw);
   return Number.isFinite(n) ? n : fallback;
 }
+function warnUnmodeled(el, elements, onWarn) {
+  for (const name of ["fx", "fy", "fr"]) {
+    if (inheritedAttr(el, elements, name) != null) {
+      onWarn?.(`gradient ${name} is not modeled; the gradient is centered on its cx, cy`);
+      break;
+    }
+  }
+  const spread = inheritedAttr(el, elements, "spreadMethod");
+  if (spread === "reflect" || spread === "repeat") {
+    onWarn?.(`spreadMethod="${spread}" is not modeled; the gradient pads`);
+  }
+}
+function coord(el, elements, name, axis, fraction, units, onWarn) {
+  const raw = inheritedAttr(el, elements, name);
+  if (units === "bounds") return num(raw, fraction);
+  if (raw != null) return resolveLength(raw, el, name, axis, fraction, onWarn ?? (() => {
+  }));
+  let unresolved = false;
+  const v = resolveLength(`${fraction * 100}%`, el, name, axis, fraction, () => {
+    unresolved = true;
+  });
+  return unresolved ? fraction : v;
+}
 function readLinearGradient(el, elements, onWarn) {
   warnGradientTransform(el, elements, onWarn);
+  warnUnmodeled(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",
-    from: {
-      x: num(inheritedAttr(el, elements, "x1"), 0),
-      y: num(inheritedAttr(el, elements, "y1"), 0)
-    },
-    to: {
-      x: num(inheritedAttr(el, elements, "x2"), 1),
-      y: num(inheritedAttr(el, elements, "y2"), 0)
-    },
+    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),
-    units: readGradientUnits(el, elements),
+    units,
     interpolate: readInterpolate(el, elements)
   };
 }
 function readRadialGradient(el, elements, onWarn) {
   warnGradientTransform(el, elements, onWarn);
+  warnUnmodeled(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",
-    center: {
-      x: num(inheritedAttr(el, elements, "cx"), 0.5),
-      y: num(inheritedAttr(el, elements, "cy"), 0.5)
-    },
-    radius: num(inheritedAttr(el, elements, "r"), 0.5),
+    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),
-    units: readGradientUnits(el, elements),
+    units,
     interpolate: readInterpolate(el, elements)
   };
 }
 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)
@@ -1475,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 } : {}
@@ -1499,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;
@@ -1518,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}. */
@@ -1579,56 +1730,57 @@ function writesInset(entry) {
   return entry !== void 0 && !entry.toSvg && (entry.inset ?? 0) !== 0;
 }
 function defaultMarkerXml(id, entry, onWarn, key, size) {
-  const unit = size === void 0 ? 1 : resolveMarkerSize({ key: key ?? id, size }, 1);
-  const path = entry.path({ size: unit, stroke: { paint: { fill: "solid", color: "#000" } } });
+  const name = key ?? id;
+  const unit = size === void 0 ? 1 : resolveMarkerSize({ key: name, size }, 1);
+  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"` : "";
   const orient = typeof entry.orient === "number" ? trimNumber(entry.orient * 180 / Math.PI) : "auto-start-reverse";
-  const units = size === void 0 ? 'markerUnits="strokeWidth" markerWidth="8" markerHeight="8"' : `markerUnits="userSpaceOnUse" markerWidth="${trimNumber(8 * unit)}" markerHeight="${trimNumber(8 * unit)}" ${WEASEL_NS_PREFIX}:key="${key}" ${WEASEL_NS_PREFIX}:size="${typeof size === "number" ? trimNumber(size) : `${trimNumber(size.px)}px`}"`;
+  const units = size === void 0 ? 'markerUnits="strokeWidth" markerWidth="8" markerHeight="8"' : `markerUnits="userSpaceOnUse" markerWidth="${trimNumber(8 * unit)}" markerHeight="${trimNumber(8 * unit)}" ${WEASEL_NS_PREFIX}:key="${escapeAttr(name)}" ${WEASEL_NS_PREFIX}:size="${typeof size === "number" ? trimNumber(size) : `${trimNumber(size.px)}px`}"`;
   const inset = writesInset(entry) ? ` ${WEASEL_NS_PREFIX}:inset="${trimNumber(entry.inset)}"` : "";
   return `<marker id="${id}" ${units}${inset} refX="0" refY="0" orient="${orient}" overflow="visible"><path d="${d}" ${fill}${outline}/></marker>`;
 }
 function markerPaintAttrs(attr, paint, id, onWarn) {
   if (paint === "none") return `${attr}="none"`;
   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;
@@ -1639,10 +1791,81 @@ function stopXml(s) {
     const alpha = parseInt(m[2], 16) / 255;
     return `<stop offset="${trimNumber(s.offset)}" stop-color="#${m[1].toLowerCase()}" stop-opacity="${trimNumber(alpha)}"/>`;
   }
-  return `<stop offset="${trimNumber(s.offset)}" stop-color="${s.color}"/>`;
+  return `<stop offset="${trimNumber(s.offset)}" stop-color="${escapeAttr(s.color)}"/>`;
+}
+var KAPPA = 4 * (Math.sqrt(2) - 1) / 3;
+function rectElementToPath(x, y, width2, height2, rx, ry, m = IDENTITY_MATRIX) {
+  if (rx <= 0 && ry <= 0) {
+    return transformPath({ kind: "rect", x, y, width: width2, height: height2 }, m);
+  }
+  const r = Math.min(Math.max(rx, ry), Math.min(width2, height2) / 2);
+  const r2 = Math.min(rx > 0 ? rx : r, ry > 0 ? ry : r, Math.min(width2, height2) / 2);
+  const rad = r2;
+  const k = KAPPA * rad;
+  const x2 = x + width2;
+  const y2 = y + height2;
+  const b = new PathBuilder();
+  b.moveTo(x + rad, y);
+  b.lineTo(x2 - rad, y);
+  b.curveTo(x2 - rad + k, y, x2, y + rad - k, x2, y + rad);
+  b.lineTo(x2, y2 - rad);
+  b.curveTo(x2, y2 - rad + k, x2 - rad + k, y2, x2 - rad, y2);
+  b.lineTo(x + rad, y2);
+  b.curveTo(x + rad - k, y2, x, y2 - rad + k, x, y2 - rad);
+  b.lineTo(x, y + rad);
+  b.curveTo(x, y + rad - k, x + rad - k, y, x + rad, y);
+  b.close();
+  return transformPath(b.build(), m);
+}
+function ellipseToPath(cx, cy, rx, ry, m = IDENTITY_MATRIX) {
+  const kx = KAPPA * rx;
+  const ky = KAPPA * ry;
+  const b = new PathBuilder();
+  b.moveTo(cx + rx, cy);
+  b.curveTo(cx + rx, cy + ky, cx + kx, cy + ry, cx, cy + ry);
+  b.curveTo(cx - kx, cy + ry, cx - rx, cy + ky, cx - rx, cy);
+  b.curveTo(cx - rx, cy - ky, cx - kx, cy - ry, cx, cy - ry);
+  b.curveTo(cx + kx, cy - ry, cx + rx, cy - ky, cx + rx, cy);
+  b.close();
+  return transformPath(b.build(), m);
+}
+function circleToPath(cx, cy, r, m = IDENTITY_MATRIX) {
+  return ellipseToPath(cx, cy, r, r, m);
+}
+function lineToPath(x1, y1, x2, y2, m = IDENTITY_MATRIX) {
+  const b = new PathBuilder();
+  b.moveTo(x1, y1);
+  b.lineTo(x2, y2);
+  return transformPath(b.build(), m);
+}
+function parsePoints(raw) {
+  const out = [];
+  const nums = raw.match(/[-+]?(?:\d*\.\d+|\d+\.?)(?:[eE][-+]?\d+)?/g);
+  if (!nums) return out;
+  for (let i = 0; i + 1 < nums.length; i += 2) {
+    out.push({ x: parseFloat(nums[i]), y: parseFloat(nums[i + 1]) });
+  }
+  return out;
+}
+function polylineToPath(points, m = IDENTITY_MATRIX) {
+  if (points.length === 0) {
+    return { kind: "polygon", commands: new Uint8Array(), coords: new Float32Array(), fillRule: "nonzero" };
+  }
+  const b = new PathBuilder();
+  b.moveTo(points[0].x, points[0].y);
+  for (let i = 1; i < points.length; i++) b.lineTo(points[i].x, points[i].y);
+  return transformPath(b.build(), m);
+}
+function polygonToPath(points, m = IDENTITY_MATRIX) {
+  if (points.length === 0) {
+    return { kind: "polygon", commands: new Uint8Array(), coords: new Float32Array(), fillRule: "nonzero" };
+  }
+  const b = new PathBuilder();
+  b.moveTo(points[0].x, points[0].y);
+  for (let i = 1; i < points.length; i++) b.lineTo(points[i].x, points[i].y);
+  b.close();
+  return transformPath(b.build(), m);
 }
-
-// src/parse.ts
 var SUPPORTED_LEAF_TAGS = /* @__PURE__ */ new Set([
   "rect",
   "circle",
@@ -1652,7 +1875,6 @@ var SUPPORTED_LEAF_TAGS = /* @__PURE__ */ new Set([
   "polygon",
   "path"
 ]);
-var SUPPORTED_GROUP_TAGS = /* @__PURE__ */ new Set(["g", "svg"]);
 var IGNORED_TAGS = /* @__PURE__ */ new Set([
   "defs",
   "lineargradient",
@@ -1665,310 +1887,17 @@ var IGNORED_TAGS = /* @__PURE__ */ new Set([
   "metadata",
   "style"
 ]);
-function parseSvg(svg, opts = {}) {
-  const warnings = [];
-  const onWarn = (m) => {
-    warnings.push(m);
-  };
-  let doc;
-  try {
-    doc = new DOMParser().parseFromString(svg, "image/svg+xml");
-  } catch (e) {
-    return { nodes: [], warnings: [`failed to parse SVG: ${e.message}`] };
-  }
-  const errEl = doc.getElementsByTagName("parsererror")[0];
-  if (errEl) {
-    return { nodes: [], warnings: [`SVG parse error: ${errEl.textContent ?? "unknown"}`] };
-  }
-  const root = doc.documentElement;
-  if (!root || root.tagName.toLowerCase() !== "svg") {
-    return { nodes: [], warnings: ["root element is not <svg>"] };
-  }
-  bindStylesheets(doc, mediaEnvironmentFor(root, opts.media), onWarn);
-  const namespaces = opts.namespaces ?? {};
-  const uriToPrefix = /* @__PURE__ */ new Map();
-  for (const [prefix, uri] of Object.entries(namespaces)) {
-    uriToPrefix.set(uri, prefix);
-  }
-  const documentMeta = collectDocumentMeta(root, uriToPrefix);
-  const gradients = collectGradients(root, onWarn);
-  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 markers = ingestMarkers(root, nodes, gradients, onWarn);
-  const result = { nodes, warnings };
-  if (markers.length > 0) result.markers = markers;
-  if (documentMeta) result.documentMeta = documentMeta;
-  const viewBox = parseViewBoxAttr(root.getAttribute("viewBox"));
-  if (viewBox) result.viewBox = viewBox;
-  const width2 = parseRootLength(root.getAttribute("width"), "width", onWarn);
-  if (width2 != null) result.width = width2;
-  const height2 = parseRootLength(root.getAttribute("height"), "height", onWarn);
-  if (height2 != null) result.height = height2;
-  for (let i = 0; i < root.children.length; i++) {
-    const c = root.children[i];
-    if (c.tagName.toLowerCase() === "title") {
-      result.title = c.textContent ?? "";
-      break;
-    }
-  }
-  return result;
-}
-function parseViewBoxAttr(raw) {
-  if (raw == null) return void 0;
-  const parts = raw.trim().split(/[\s,]+/).filter(Boolean);
-  if (parts.length !== 4) return void 0;
-  const nums = parts.map(parseFloat);
-  if (nums.some((n) => !Number.isFinite(n))) return void 0;
-  return { x: nums[0], y: nums[1], width: nums[2], height: nums[3] };
-}
-function parseRootLength(raw, name, onWarn) {
-  if (raw == null) return void 0;
-  const n = parseFloat(raw);
-  if (!Number.isFinite(n)) return void 0;
-  const unit = /^\s*[-+]?[\d.eE+-]+\s*([a-z%]+)\s*$/i.exec(raw)?.[1];
-  if (unit) onWarn(`<svg ${name}="${raw}"> unit "${unit}" is not converted; read as ${n}`);
-  return n;
-}
-function collectDocumentMeta(root, uriToPrefix) {
-  if (uriToPrefix.size === 0) return void 0;
-  const meta = {};
-  for (let i = 0; i < root.attributes.length; i++) {
-    const a = root.attributes[i];
-    if (!a.namespaceURI) continue;
-    const prefix = uriToPrefix.get(a.namespaceURI);
-    if (!prefix) continue;
-    const bucket = meta[prefix] ??= {};
-    (bucket.attrs ??= {})[a.localName] = a.value;
-  }
-  for (let i = 0; i < root.children.length; i++) {
-    const c = root.children[i];
-    if (!c.namespaceURI) continue;
-    const prefix = uriToPrefix.get(c.namespaceURI);
-    if (!prefix) continue;
-    const bucket = meta[prefix] ??= {};
-    const elements = bucket.elements ??= {};
-    const list = elements[c.localName] ??= [];
-    list.push(collectNamespacedElement(c, uriToPrefix));
-  }
-  return Object.keys(meta).length > 0 ? meta : void 0;
-}
-function collectNamespacedElement(el, uriToPrefix) {
-  const result = { attrs: {} };
-  for (let i = 0; i < el.attributes.length; i++) {
-    const a = el.attributes[i];
-    if (a.name.startsWith("xmlns")) continue;
-    result.attrs[a.localName] = a.value;
-  }
-  let hasChildElements = false;
-  for (let i = 0; i < el.children.length; i++) {
-    const c = el.children[i];
-    if (!c.namespaceURI) continue;
-    const prefix = uriToPrefix.get(c.namespaceURI);
-    if (!prefix) continue;
-    hasChildElements = true;
-    const children = result.children ??= {};
-    const list = children[c.localName] ??= [];
-    list.push(collectNamespacedElement(c, uriToPrefix));
-  }
-  if (!hasChildElements && el.textContent != null && el.textContent.trim() !== "") {
-    result.text = el.textContent;
-  }
-  return result;
-}
-function collectElementMeta(el, uriToPrefix) {
-  if (uriToPrefix.size === 0) return void 0;
-  const meta = {};
-  for (let i = 0; i < el.attributes.length; i++) {
-    const a = el.attributes[i];
-    if (!a.namespaceURI) continue;
-    const prefix = uriToPrefix.get(a.namespaceURI);
-    if (!prefix) continue;
-    const bucket = meta[prefix] ??= {};
-    (bucket.attrs ??= {})[a.localName] = a.value;
-  }
-  for (let i = 0; i < el.children.length; i++) {
-    const c = el.children[i];
-    if (!c.namespaceURI) continue;
-    const prefix = uriToPrefix.get(c.namespaceURI);
-    if (!prefix) continue;
-    const bucket = meta[prefix] ??= {};
-    const elements = bucket.elements ??= {};
-    const list = elements[c.localName] ??= [];
-    list.push(collectNamespacedElement(c, uriToPrefix));
-  }
-  return Object.keys(meta).length > 0 ? meta : void 0;
-}
-function collectClipPaths(root, onWarn) {
-  const out = /* @__PURE__ */ new Map();
-  for (const [id, el] of collectElementsByTag(root, /* @__PURE__ */ new Set(["clippath"]))) {
-    const units = el.getAttribute("clipPathUnits");
-    if (units && units !== "userSpaceOnUse") {
-      onWarn(`<clipPath id="${id}"> uses clipPathUnits="${units}", which is not modeled`);
-      continue;
-    }
-    const shapes = [];
-    for (let i = 0; i < el.children.length; i++) {
-      if (SUPPORTED_LEAF_TAGS.has(el.children[i].tagName.toLowerCase())) shapes.push(el.children[i]);
-    }
-    if (shapes.length !== 1) {
-      onWarn(
-        `<clipPath id="${id}"> holds ${shapes.length} shapes the kit can lower; only a single-shape clip is modeled, so it clips nothing`
-      );
-      continue;
-    }
-    const shape = shapes[0];
-    const local = parseTransform(shape.getAttribute("transform"), onWarn);
-    const path = lowerLeaf(shape, shape.tagName.toLowerCase(), local, onWarn);
-    if (path) out.set(id, path);
-  }
-  return out;
-}
-function clipFor(el, ctm, clips, onWarn) {
-  const attr = el.getAttribute("clip-path");
-  if (!attr || attr === "none") return void 0;
-  const ref = /^url\(\s*#([^)\s]+)\s*\)$/.exec(attr.trim());
-  if (!ref) {
-    onWarn(`clip-path="${attr}" is not a url(#id) reference; the clip is dropped`);
-    return void 0;
-  }
-  const path = clips.get(ref[1]);
-  if (!path) {
-    onWarn(`clip-path references #${ref[1]}, which no <clipPath> in the document defines`);
-    return void 0;
-  }
-  return transformPath(path, ctm);
-}
-function parseChildren(parent, ctm, style, gradients, clips, onWarn, uriToPrefix) {
-  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);
-    }
-  }
-  return out;
-}
-function parseElement(el, ctm, style, gradients, clips, onWarn, uriToPrefix) {
-  const tag = el.tagName.toLowerCase();
-  if (IGNORED_TAGS.has(tag)) return null;
-  if (tag === "g" && el.hasAttribute("data-weasel-image")) {
-    const image = parseCroppedImage(el, ctm, onWarn);
-    if (image) {
-      const meta2 = collectElementMeta(el, uriToPrefix);
-      if (meta2) image.meta = meta2;
-      return image;
-    }
-  }
-  if (tag === "g") {
-    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 opacity2 = ownValue(el, "opacity");
-    const group = { kind: "group", children };
-    const clip = clipFor(el, childCtm, clips, onWarn);
-    if (clip) group.clip = clip;
-    if (opacity2 != null) group.opacity = opacity2;
-    const meta2 = collectElementMeta(el, uriToPrefix);
-    if (meta2) group.meta = meta2;
-    return group;
-  }
-  if (SUPPORTED_GROUP_TAGS.has(tag)) {
-    const childStyle = deriveStyle(style, el);
-    const x = parseFloat(el.getAttribute("x") ?? "0");
-    const y = parseFloat(el.getAttribute("y") ?? "0");
-    const offset = [1, 0, 0, 1, Number.isFinite(x) ? x : 0, Number.isFinite(y) ? y : 0];
-    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);
-  }
-  if (tag === "text") {
-    const textNode = parseTextElement(el, ctm, style, gradients, onWarn);
-    if (textNode && !Array.isArray(textNode) && textNode.kind === "text") {
-      const meta2 = collectElementMeta(el, uriToPrefix);
-      if (meta2) textNode.meta = meta2;
-    }
-    return textNode;
-  }
-  if (tag === "image") {
-    const imageNode = parseImageElement(el, ctm, onWarn);
-    if (imageNode) {
-      const meta2 = collectElementMeta(el, uriToPrefix);
-      if (meta2) imageNode.meta = meta2;
-    }
-    return imageNode;
-  }
-  if (!SUPPORTED_LEAF_TAGS.has(tag)) {
-    onWarn(`unsupported element: <${el.tagName}>`);
-    return null;
-  }
-  const localTransform = parseTransform(el.getAttribute("transform"), onWarn);
-  let path = lowerLeaf(el, tag, ctm, onWarn);
-  if (!path) return null;
-  let rotation;
-  if (!isIdentity(localTransform)) {
-    const worldLocal = rebaseTransform(ctm, localTransform);
-    const bounds = pathAabb(path);
-    const cx = bounds.x + bounds.width / 2;
-    const cy = bounds.y + bounds.height / 2;
-    const angle = worldLocal && decomposeRotation(worldLocal, cx, cy);
-    if (!worldLocal) {
-      onWarn("leaf transform sits under a singular parent transform; dropped");
-    } else if (angle != null) {
-      rotation = angle;
-    } else {
-      path = transformPath(path, worldLocal);
-      const rotComp = rotationComponent(worldLocal);
-      if (Math.abs(rotComp) > 1e-4) {
-        onWarn(`leaf transform has a rotational component that can't be cleanly stored as rotation; baked into geometry (may not round-trip identically)`);
-      }
-    }
-  }
-  const leafStyle = deriveStyle(style, el);
-  const fill = readPaint2(leafStyle, "fill", "#000000", gradients, onWarn);
-  const stroke = readStroke(leafStyle, gradients, onWarn, isNonScalingStroke(el));
-  const opacity = ownValue(el, "opacity");
-  if (styleValue(leafStyle, "fill-rule") === "evenodd" && path.kind === "polygon") {
-    path = { ...path, fillRule: "evenodd" };
-  }
-  const node = { kind: "path", path, fill };
-  if (stroke) node.stroke = stroke;
-  if (opacity != null) node.opacity = opacity;
-  if (rotation != null) node.rotation = rotation;
-  if (tag === "line" && (leafStyle["fill"] ?? null) == null) {
-    node.fill = { kind: "none" };
-  }
-  const meta = collectElementMeta(el, uriToPrefix);
-  if (meta) node.meta = meta;
-  return node;
-}
 function lowerLeaf(el, tag, m, onWarn) {
-  const num2 = (name, fallback = 0) => {
-    const v = el.getAttribute(name);
-    if (v == null) return fallback;
-    const n = parseFloat(v);
-    return Number.isFinite(n) ? n : fallback;
-  };
+  const x = (name) => readLength(el, name, "x", 0, onWarn);
+  const y = (name) => readLength(el, name, "y", 0, onWarn);
+  const r = (name) => readLength(el, name, "other", 0, onWarn);
   if (tag === "rect") {
-    const x = num2("x", 0);
-    const y = num2("y", 0);
-    const w = num2("width", 0);
-    const h = num2("height", 0);
-    const rx = num2("rx", 0);
-    const ry = num2("ry", 0);
-    return rectElementToPath(x, y, w, h, rx, ry, m);
-  }
-  if (tag === "circle") return circleToPath(num2("cx"), num2("cy"), num2("r"), m);
-  if (tag === "ellipse") return ellipseToPath(num2("cx"), num2("cy"), num2("rx"), num2("ry"), m);
-  if (tag === "line") return lineToPath(num2("x1"), num2("y1"), num2("x2"), num2("y2"), m);
-  if (tag === "polyline") return polylineToPath(parsePoints(el.getAttribute("points") ?? ""), m);
+    return rectElementToPath(x("x"), y("y"), x("width"), y("height"), x("rx"), y("ry"), m);
+  }
+  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 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") ?? "";
@@ -1982,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;
@@ -2006,12 +1938,59 @@ function polygonToRectIfAxisAligned(p) {
   if (width2 === 0 || height2 === 0) return null;
   return { kind: "rect", x, y, width: width2, height: height2 };
 }
-function pathAabb(path) {
-  if (path.kind === "rect") {
-    return { x: path.x, y: path.y, width: path.width, height: path.height };
+
+// src/viewBox.ts
+function parseViewBoxAttr(raw) {
+  if (raw == null) return void 0;
+  const parts = raw.trim().split(/[\s,]+/).filter(Boolean);
+  if (parts.length !== 4) return void 0;
+  const nums = parts.map(parseFloat);
+  if (nums.some((n) => !Number.isFinite(n))) return void 0;
+  return { x: nums[0], y: nums[1], width: nums[2], height: nums[3] };
+}
+function collectClipPaths(root, onWarn) {
+  const out = /* @__PURE__ */ new Map();
+  for (const [id, el] of collectElementsByTag(root, /* @__PURE__ */ new Set(["clippath"]))) {
+    const units = el.getAttribute("clipPathUnits");
+    if (units && units !== "userSpaceOnUse") {
+      onWarn(`<clipPath id="${id}"> uses clipPathUnits="${units}", which is not modeled`);
+      continue;
+    }
+    const shapes = [];
+    for (let i = 0; i < el.children.length; i++) {
+      if (SUPPORTED_LEAF_TAGS.has(el.children[i].tagName.toLowerCase())) shapes.push(el.children[i]);
+    }
+    if (shapes.length !== 1) {
+      onWarn(
+        `<clipPath id="${id}"> holds ${shapes.length} shapes the kit can lower; only a single-shape clip is modeled, so it clips nothing`
+      );
+      continue;
+    }
+    const shape = shapes[0];
+    const local = parseTransform(shape.getAttribute("transform"), onWarn);
+    const path = lowerLeaf(shape, shape.tagName.toLowerCase(), local, onWarn);
+    if (path) out.set(id, path);
+  }
+  return out;
+}
+function clipFor(el, ctm, clips, onWarn) {
+  const raw = ownProp(el, "clip-path");
+  if (raw == null) return void 0;
+  const ref = readProperty("clip-path", raw);
+  if (ref === "none") return void 0;
+  if (!ref) {
+    onWarn(`clip-path="${raw}" is not a url(#id) reference; the clip is dropped`);
+    return void 0;
   }
-  return boundsOfPath(path);
+  const path = clips.get(ref.id);
+  if (!path) {
+    onWarn(`clip-path references #${ref.id}, which no <clipPath> in the document defines`);
+    return void 0;
+  }
+  return transformPath(path, ctm);
 }
+
+// src/readPaint.ts
 function readPaint2(style, attr, defaultColor, gradients, onWarn) {
   const raw = resolveCurrentColor(style[attr] ?? null, style);
   const opacity = styleValue(style, `${attr}-opacity`, onWarn);
@@ -2089,11 +2068,11 @@ var STROKE_KEYS = [
 function isNonScalingStroke(el) {
   return ownValue(el, "vector-effect") === "non-scaling-stroke";
 }
-function ownStrokeStyle(el) {
+function ownStrokeStyle(el, computed) {
   const out = {};
   for (const k of STROKE_KEYS) {
     const v = ownProp(el, k);
-    if (v != null) out[k] = v;
+    if (v != null) out[k] = v === "inherit" ? v : computed[k];
   }
   return out;
 }
@@ -2103,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;
   }
@@ -2117,6 +2096,92 @@ function coreStroke(stroke) {
   if (stroke.markerEnd) out.markerEnd = stroke.markerEnd;
   return out;
 }
+var near = (v, target) => Math.abs(v - target) <= 1e-9;
+function placeBox(box, m, stretch) {
+  const [a, b, c, d] = m;
+  const scale = Math.sqrt(Math.abs(a * d - b * c));
+  const eps = 1e-4 * Math.hypot(a, b, c, d);
+  const uniform = Math.abs(a - d) <= eps;
+  if (Math.abs(b) <= eps && Math.abs(c) <= eps && (stretch || uniform && a > 0)) {
+    const p0 = applyMatrix(m, box.x, box.y);
+    const p1 = applyMatrix(m, box.x + box.width, box.y + box.height);
+    return {
+      x: Math.min(p0.x, p1.x),
+      y: Math.min(p0.y, p1.y),
+      width: Math.abs(p1.x - p0.x),
+      height: Math.abs(p1.y - p0.y),
+      rotation: 0,
+      scale,
+      flipX: a < 0,
+      flipY: d < 0
+    };
+  }
+  const p = Math.hypot(a, b);
+  const q = (a * c + b * d) / p;
+  const r = (a * d - b * c) / p;
+  const settle = (v) => Math.abs(v - 1) <= 1e-5 ? 1 : v;
+  const sx = settle(stretch ? p : scale);
+  const sy = settle(stretch ? Math.abs(r) : scale);
+  const flipY = stretch && r < 0;
+  const ry = flipY ? -sy : sy;
+  const linear = [p / sx, 0, q / ry, r / ry];
+  const center = applyMatrix(m, box.x + box.width / 2, box.y + box.height / 2);
+  const width2 = box.width * sx;
+  const height2 = box.height * sy;
+  const placed = {
+    x: center.x - width2 / 2,
+    y: center.y - height2 / 2,
+    width: width2,
+    height: height2,
+    rotation: Math.atan2(b, a),
+    scale: settle(scale),
+    flipX: false,
+    flipY
+  };
+  if (!near(linear[0], 1) || !near(linear[2], 0) || !near(linear[3], 1)) placed.transform = linear;
+  return placed;
+}
+function placeNode(node, tag, m, stretch, onWarn) {
+  if (isIdentity(m)) return 1;
+  const cx = node.x + node.width / 2;
+  const cy = node.y + node.height / 2;
+  if (!invert(m)) {
+    onWarn(`<${tag}> sits under a singular transform; kept its size`);
+    const center = applyMatrix(m, cx, cy);
+    node.x = center.x - node.width / 2;
+    node.y = center.y - node.height / 2;
+    return 1;
+  }
+  const turn = decomposeRotation(m, cx, cy);
+  if (turn != null) {
+    node.rotation = turn;
+    return 1;
+  }
+  const placed = placeBox(node, m, stretch);
+  node.x = placed.x;
+  node.y = placed.y;
+  node.width = placed.width;
+  node.height = placed.height;
+  if (Math.abs(placed.rotation) > 1e-9) node.rotation = placed.rotation;
+  if (placed.flipX) node.flipX = !node.flipX;
+  if (placed.flipY) node.flipY = !node.flipY;
+  if (placed.transform) node.transform = placed.transform;
+  return placed.scale;
+}
+function boxTransformAttr(node) {
+  if (poseLinearOf(node)) {
+    const frame = poseFrameOf(node);
+    const m = frame && formatMatrix(frame);
+    return m ? `transform="${m}"` : null;
+  }
+  if (!node.rotation) return null;
+  const cx = node.x + node.width / 2;
+  const cy = node.y + node.height / 2;
+  const deg = node.rotation * 180 / Math.PI;
+  return `transform="rotate(${trimNumber(deg)} ${trimNumber(cx)} ${trimNumber(cy)})"`;
+}
+
+// src/readImage.ts
 var XLINK_NS2 = "http://www.w3.org/1999/xlink";
 function parseImageElement(el, ctm, onWarn) {
   const href = imageHref(el);
@@ -2134,45 +2199,15 @@ function imageHref(el) {
   return el.getAttribute("href") ?? el.getAttributeNS(XLINK_NS2, "href") ?? el.getAttribute("xlink:href");
 }
 function imageNodeAt(boxEl, ownerEl, href, ctm, onWarn) {
-  const num2 = (raw, fallback) => {
-    if (raw == null) return fallback;
-    const n = parseFloat(raw);
-    return Number.isFinite(n) ? n : fallback;
-  };
-  const rawX = num2(boxEl.getAttribute("x"), 0);
-  const rawY = num2(boxEl.getAttribute("y"), 0);
-  const rawW = num2(boxEl.getAttribute("width"), 0);
-  const rawH = num2(boxEl.getAttribute("height"), 0);
-  const px = (x, y) => [ctm[0] * x + ctm[2] * y + ctm[4], ctm[1] * x + ctm[3] * y + ctm[5]];
-  const [x0, y0] = px(rawX, rawY);
-  const [x1, y1] = px(rawX + rawW, rawY + rawH);
-  const node = {
-    kind: "image",
-    href,
-    x: Math.min(x0, x1),
-    y: Math.min(y0, y1),
-    width: Math.abs(x1 - x0),
-    height: Math.abs(y1 - y0)
-  };
+  const rawX = readLength(boxEl, "x", "x", 0, onWarn);
+  const rawY = readLength(boxEl, "y", "y", 0, onWarn);
+  const rawW = readLength(boxEl, "width", "x", 0, onWarn);
+  const rawH = readLength(boxEl, "height", "y", 0, onWarn);
+  const node = { kind: "image", href, x: rawX, y: rawY, width: rawW, height: rawH };
   const opacity = ownValue(ownerEl, "opacity");
   if (opacity != null) node.opacity = opacity;
   const localTransform = parseTransform(ownerEl.getAttribute("transform"), onWarn);
-  if (!isIdentity(localTransform)) {
-    const worldLocal = rebaseTransform(ctm, localTransform);
-    const cx = node.x + node.width / 2;
-    const cy = node.y + node.height / 2;
-    const angle = worldLocal && decomposeRotation(worldLocal, cx, cy);
-    if (!worldLocal) {
-      onWarn("<image> transform sits under a singular parent transform; dropped");
-    } else if (angle != null) {
-      node.rotation = angle;
-    } else {
-      const rotComp = rotationComponent(worldLocal);
-      if (Math.abs(rotComp) > 1e-4) {
-        onWarn("<image> transform has a rotational component that can't be cleanly stored as rotation; dropped (may not round-trip identically)");
-      }
-    }
-  }
+  placeNode(node, "image", multiply(ctm, localTransform), true, onWarn);
   return node;
 }
 function parseCroppedImage(g, ctm, onWarn) {
@@ -2186,10 +2221,102 @@ function parseCroppedImage(g, ctm, onWarn) {
     node.source = source;
   }
   const flip = parseTransform(img.getAttribute("transform"), onWarn);
-  if (flip[0] < 0) node.flipX = true;
-  if (flip[3] < 0) node.flipY = true;
+  if (flip[0] < 0) toggle(node, "flipX");
+  if (flip[3] < 0) toggle(node, "flipY");
   return node;
 }
+function toggle(node, key) {
+  if (node[key]) delete node[key];
+  else node[key] = true;
+}
+function svgDirection(style, text) {
+  return paragraphDirection(text, style?.direction ?? "auto");
+}
+function anchorOffset(style, width2, text) {
+  const edge = resolveAlign(style?.align ?? "left", svgDirection(style, text));
+  return edge === "center" ? width2 / 2 : edge === "right" ? width2 : 0;
+}
+
+// src/tspanLines.ts
+var DEFAULT_LINE_HEIGHT = 1.2;
+var LineTracker = class {
+  constructor(text, onWarn) {
+    this.onWarn = onWarn;
+    this.y = text.getAttribute("y");
+    this.at = readLength(text, "y", "y", 0, onWarn);
+  }
+  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 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) {
+  const tag = el.tagName.toLowerCase();
+  for (const name of ["x", "y"]) {
+    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"]) {
+    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) {
+  const out = [];
+  let breaks = 0;
+  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);
+      breaks = 0;
+    }
+    if (out.length > 0) breaks++;
+  }
+  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) {
   for (let e = el; e; e = e.parentElement) {
@@ -2233,12 +2360,39 @@ function laidOutWidth(runs, style, plain) {
     maxWidth: Infinity,
     lineHeight: resolved.lineHeight,
     align: resolved.align,
-    direction: resolved.direction
+    direction: resolved.direction,
+    tabSize: resolved.tabSize
   });
   if (bounds.width > 0) return bounds.width;
   const longest = plain.split("\n").reduce((max, line) => Math.max(max, line.length), 0);
   return longest * resolved.fontSize * ESTIMATED_GLYPH_ADVANCE_EM;
 }
+function placeTextNode(node, m, onWarn) {
+  const cx = node.x + node.width / 2;
+  const cy = node.y + node.height / 2;
+  const scale = placeNode(node, "text", m, false, onWarn);
+  const inBox = [
+    scale,
+    0,
+    0,
+    scale,
+    node.x + node.width / 2 - scale * cx,
+    node.y + node.height / 2 - scale * cy
+  ];
+  if (isIdentity(inBox)) return;
+  if (Math.abs(scale - 1) > 1e-9) {
+    node.style = scaleTextStyle(node.style, scale);
+    if (node.runs) node.runs = scaleRuns(node.runs, scale);
+    if (node.stroke) node.stroke = scaleStroke(node.stroke, scale);
+  }
+  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: mapFillPaint(r.fill, (p) => fillThroughMatrix(p, inBox)) } : r);
+  }
+}
 function parseTextElement(el, ctm, style, gradients, onWarn) {
   const num2 = (raw, fallback) => {
     if (raw == null) return fallback;
@@ -2246,41 +2400,48 @@ function parseTextElement(el, ctm, style, gradients, onWarn) {
     return Number.isFinite(n) ? n : fallback;
   };
   const localTransform = parseTransform(el.getAttribute("transform"), onWarn);
-  const m = ctm;
-  const rawX = num2(el.getAttribute("x"), 0);
-  const rawY = num2(el.getAttribute("y"), 0);
-  const ax = m[0] * rawX + m[2] * rawY + m[4];
-  const ay = m[1] * rawX + m[3] * rawY + m[5];
+  warnUnreadPositions(el, onWarn);
+  const ax = readLength(el, "x", "x", 0, onWarn);
+  const ay = readLength(el, "y", "y", 0, onWarn);
   const leafStyle = deriveStyle(style, el);
   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 runs = [];
+  const runLines = [[]];
+  const tracker = new LineTracker(el, onWarn);
+  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;
-      runs.push({ text: t, ...inheritedShift });
+      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) runs.push({ text: t, ...inheritedShift });
+        if (t) push({ text: t, ...inheritedShift });
         continue;
       }
-      const run = readTspanRun(sp, gradients, leafStyle, onWarn);
-      runs.push(run);
+      warnUnreadPositions(sp, onWarn);
+      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)) collapseRunWhitespace(runs);
+  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);
@@ -2289,7 +2450,7 @@ function parseTextElement(el, ctm, style, gradients, onWarn) {
   const opacity = ownValue(el, "opacity");
   const node = {
     kind: "text",
-    x: ax - anchorOffset(textStyle, width2),
+    x: ax - anchorOffset(textStyle, width2, plain),
     y: topY,
     width: width2,
     height: height2,
@@ -2299,30 +2460,20 @@ function parseTextElement(el, ctm, style, gradients, onWarn) {
     (r) => Object.entries(r).some(([k, v]) => k !== "text" && v !== void 0)
   );
   if (hasStyling) node.runs = runs;
+  if (textStyle.direction === void 0 && !el.hasAttribute("data-weasel-width")) {
+    textStyle.direction = "ltr";
+  }
   if (el.getAttribute("data-weasel-wrap") === "true") textStyle.wrap = true;
   if (el.getAttribute("data-weasel-align") === "justify") textStyle.align = "justify";
+  const tabSize = Number(el.getAttribute("data-weasel-tab-size") ?? NaN);
+  if (Number.isFinite(tabSize)) textStyle.tabSize = tabSize;
   const va = el.getAttribute("data-weasel-vertical-align");
   if (va === "center" || va === "bottom") node.verticalAlign = va;
   if (Object.keys(textStyle).length > 0) node.style = textStyle;
   if (textPaint.fill !== void 0) node.fill = textPaint.fill;
   if (textPaint.stroke != null) node.stroke = textPaint.stroke;
   if (opacity != null) node.opacity = opacity;
-  if (!isIdentity(localTransform)) {
-    const worldLocal = rebaseTransform(ctm, localTransform);
-    const cx = node.x + node.width / 2;
-    const cy = node.y + node.height / 2;
-    const angle = worldLocal && decomposeRotation(worldLocal, cx, cy);
-    if (!worldLocal) {
-      onWarn("<text> transform sits under a singular parent transform; dropped");
-    } else if (angle != null) {
-      node.rotation = angle;
-    } else {
-      const rotComp = rotationComponent(worldLocal);
-      if (Math.abs(rotComp) > 1e-4) {
-        onWarn(`<text> transform has a rotational component that can't be cleanly stored as rotation; dropped (may not round-trip identically)`);
-      }
-    }
-  }
+  placeTextNode(node, multiply(ctm, localTransform), onWarn);
   return node;
 }
 function readTspanRun(el, gradients, style, onWarn) {
@@ -2338,7 +2489,8 @@ function readTspanRun(el, gradients, style, onWarn) {
   const size = ownValue(el, "font-size", onWarn);
   if (size?.fontSize != null) run.fontSize = size.fontSize;
   if (size?.fontScale != null) run.fontScale = size.fontScale;
-  const ls = ownValue(el, "letter-spacing", onWarn);
+  const tspanStyle = deriveStyle(style, el);
+  const ls = ownValue(el, "letter-spacing", onWarn, fontSizeOf(tspanStyle));
   if (ls != null) run.letterSpacing = ls;
   const shift = ownValue(el, "baseline-shift", onWarn);
   if (shift?.script != null) run.script = shift.script;
@@ -2351,19 +2503,20 @@ function readTspanRun(el, gradients, style, onWarn) {
   if (transform) run.textTransform = transform;
   const variant = ownValue(el, "font-variant", onWarn);
   if (variant) run.fontVariantCaps = variant;
-  const tspanStyle = deriveStyle(style, el);
   const fillAttr = resolveCurrentColor(ownProp(el, "fill"), tspanStyle);
   if (fillAttr) {
     const parsed = readProperty("fill", fillAttr);
-    if (parsed?.kind === "solid") {
-      run.fill = { fill: "solid", color: parsed.color };
+    if (parsed?.kind === "none") {
+      run.fill = null;
+    } else if (parsed?.kind === "solid") {
+      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), gradients, onWarn, isNonScalingStroke(el)));
+  const stroke = coreStroke(readStroke(ownStrokeStyle(el, tspanStyle), gradients, onWarn, isNonScalingStroke(el)));
   if (stroke) run.stroke = stroke;
   return run;
 }
@@ -2371,17 +2524,14 @@ function readTextStyle(style, onWarn) {
   const out = {};
   const size = styleValue(style, "font-size", onWarn);
   if (size?.fontSize != null) out.fontSize = size.fontSize;
-  else if (size?.fontScale != null) {
-    onWarn(`font-size "${style["font-size"]}" on <text> is resolved against the 16px default`);
-    out.fontSize = 16 * size.fontScale;
-  }
   const ff = styleValue(style, "font-family", onWarn);
   if (ff) out.fontFamily = ff;
   const fw = styleValue(style, "font-weight", onWarn);
   if (fw != null) out.fontWeight = fw;
   const fs = styleValue(style, "font-style", onWarn);
   if (fs) out.fontStyle = fs;
-  if (styleValue(style, "direction") === "rtl") out.direction = "rtl";
+  const direction = styleValue(style, "direction");
+  if (direction === "rtl" || direction === "ltr") out.direction = direction;
   const ltr = out.direction !== "rtl";
   const anchor = styleValue(style, "text-anchor") ?? (ltr ? void 0 : "start");
   if (anchor === "start") out.align = ltr ? "left" : "right";
@@ -2405,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;
@@ -2492,11 +2642,6 @@ function markerInsetAttr(el) {
   const n = parseFloat(weaselAttr(el, "inset") ?? "");
   return Number.isFinite(n) && n > 0 ? n : 0;
 }
-function styleAt(el) {
-  const chain = [];
-  for (let e = el; e; e = e.parentElement) chain.unshift(e);
-  return chain.reduce((style, e) => deriveStyle(style, e), EMPTY_STYLE);
-}
 function markerRef(raw, lo, span) {
   const v = raw?.trim();
   if (v === "left" || v === "top") return lo;
@@ -2638,56 +2783,275 @@ function markerEntryFrom(el, id, role, strokeWidth, gradients, onWarn) {
     inset
   };
 }
-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)}`;
+
+// src/parse.ts
+var SUPPORTED_GROUP_TAGS = /* @__PURE__ */ new Set(["g", "svg"]);
+function parseSvg(svg, opts = {}) {
+  const warnings = [];
+  const onWarn = (m) => {
+    warnings.push(m);
+  };
+  let doc;
+  try {
+    doc = new DOMParser().parseFromString(svg, "image/svg+xml");
+  } catch (e) {
+    return { nodes: [], warnings: [`failed to parse SVG: ${e.message}`] };
+  }
+  const errEl = doc.getElementsByTagName("parsererror")[0];
+  if (errEl) {
+    return { nodes: [], warnings: [`SVG parse error: ${errEl.textContent ?? "unknown"}`] };
+  }
+  const root = doc.documentElement;
+  if (!root || root.tagName.toLowerCase() !== "svg") {
+    return { nodes: [], warnings: ["root element is not <svg>"] };
+  }
+  bindStylesheets(doc, mediaEnvironmentFor(root, opts.media), onWarn);
   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}"`);
+  const uriToPrefix = /* @__PURE__ */ new Map();
+  for (const [prefix, uri] of Object.entries(namespaces)) {
+    uriToPrefix.set(uri, prefix);
+  }
+  const documentMeta = collectDocumentMeta(root, uriToPrefix);
+  const gradients = collectGradients(root, onWarn);
+  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, opts.keepHidden === true);
+  const markers = ingestMarkers(root, nodes, gradients, onWarn);
+  const result = { nodes, warnings };
+  if (markers.length > 0) result.markers = markers;
+  if (documentMeta) result.documentMeta = documentMeta;
+  const viewBox = parseViewBoxAttr(root.getAttribute("viewBox"));
+  if (viewBox) result.viewBox = viewBox;
+  const width2 = parseRootLength(root.getAttribute("width"), "width", fontSizeOf(rootStyle), onWarn);
+  if (width2 != null) result.width = width2;
+  const height2 = parseRootLength(root.getAttribute("height"), "height", fontSizeOf(rootStyle), onWarn);
+  if (height2 != null) result.height = height2;
+  for (let i = 0; i < root.children.length; i++) {
+    const c = root.children[i];
+    if (c.tagName.toLowerCase() === "title") {
+      result.title = c.textContent ?? "";
+      break;
+    }
+  }
+  return result;
+}
+function parseRootLength(raw, name, fontSize, onWarn) {
+  if (raw == null) return void 0;
+  const n = parseFloat(raw);
+  if (!Number.isFinite(n)) return void 0;
+  const unit = /^\s*[-+]?(?:\d*\.\d+|\d+\.?)(?:[eE][-+]?\d+)?\s*([a-z%]+)\s*$/i.exec(raw)?.[1];
+  const scale = unit && ABSOLUTE_PX[unit.toLowerCase()];
+  if (scale) return n * scale;
+  const ems = unit && emsPer(unit);
+  if (ems) return n * ems * fontSize;
+  if (unit) onWarn(`<svg ${name}="${raw}"> unit "${unit}" is not converted; read as ${n}`);
+  return n;
+}
+function collectDocumentMeta(root, uriToPrefix) {
+  if (uriToPrefix.size === 0) return void 0;
+  const meta = {};
+  for (let i = 0; i < root.attributes.length; i++) {
+    const a = root.attributes[i];
+    if (!a.namespaceURI) continue;
+    const prefix = uriToPrefix.get(a.namespaceURI);
+    if (!prefix) continue;
+    const bucket = meta[prefix] ??= {};
+    (bucket.attrs ??= {})[a.localName] = a.value;
+  }
+  for (let i = 0; i < root.children.length; i++) {
+    const c = root.children[i];
+    if (!c.namespaceURI) continue;
+    const prefix = uriToPrefix.get(c.namespaceURI);
+    if (!prefix) continue;
+    const bucket = meta[prefix] ??= {};
+    const elements = bucket.elements ??= {};
+    const list = elements[c.localName] ??= [];
+    list.push(collectNamespacedElement(c, uriToPrefix));
+  }
+  return Object.keys(meta).length > 0 ? meta : void 0;
+}
+function collectNamespacedElement(el, uriToPrefix) {
+  const result = { attrs: {} };
+  for (let i = 0; i < el.attributes.length; i++) {
+    const a = el.attributes[i];
+    if (a.name.startsWith("xmlns")) continue;
+    result.attrs[a.localName] = a.value;
+  }
+  let hasChildElements = false;
+  for (let i = 0; i < el.children.length; i++) {
+    const c = el.children[i];
+    if (!c.namespaceURI) continue;
+    const prefix = uriToPrefix.get(c.namespaceURI);
+    if (!prefix) continue;
+    hasChildElements = true;
+    const children = result.children ??= {};
+    const list = children[c.localName] ??= [];
+    list.push(collectNamespacedElement(c, uriToPrefix));
+  }
+  if (!hasChildElements && el.textContent != null && el.textContent.trim() !== "") {
+    result.text = el.textContent;
+  }
+  return result;
+}
+function collectElementMeta(el, uriToPrefix) {
+  if (uriToPrefix.size === 0) return void 0;
+  const meta = {};
+  for (let i = 0; i < el.attributes.length; i++) {
+    const a = el.attributes[i];
+    if (!a.namespaceURI) continue;
+    const prefix = uriToPrefix.get(a.namespaceURI);
+    if (!prefix) continue;
+    const bucket = meta[prefix] ??= {};
+    (bucket.attrs ??= {})[a.localName] = a.value;
+  }
+  for (let i = 0; i < el.children.length; i++) {
+    const c = el.children[i];
+    if (!c.namespaceURI) continue;
+    const prefix = uriToPrefix.get(c.namespaceURI);
+    if (!prefix) continue;
+    const bucket = meta[prefix] ??= {};
+    const elements = bucket.elements ??= {};
+    const list = elements[c.localName] ??= [];
+    list.push(collectNamespacedElement(c, uriToPrefix));
+  }
+  return Object.keys(meta).length > 0 ? meta : void 0;
+}
+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 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, keepHidden) {
+  const tag = el.tagName.toLowerCase();
+  if (IGNORED_TAGS.has(tag)) return null;
+  if (tag === "g" && el.hasAttribute("data-weasel-image")) {
+    const image = parseCroppedImage(el, ctm, onWarn);
+    if (image) {
+      const meta2 = collectElementMeta(el, uriToPrefix);
+      if (meta2) image.meta = meta2;
+      return image;
+    }
+  }
+  const clipRaw = tag === "g" ? null : ownProp(el, "clip-path");
+  if (clipRaw != null && readProperty("clip-path", clipRaw) !== "none") {
+    onWarn(`clip-path on <${tag}> is not modeled; only a <g> clips, so it is drawn unclipped`);
+  }
+  if (tag === "g") {
+    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, keepHidden);
+    const opacity2 = ownValue(el, "opacity");
+    const group = { kind: "group", children };
+    const clip = clipFor(el, childCtm, clips, onWarn);
+    if (clip) group.clip = clip;
+    if (opacity2 != null) group.opacity = opacity2;
+    const meta2 = collectElementMeta(el, uriToPrefix);
+    if (meta2) group.meta = meta2;
+    return group;
+  }
+  if (SUPPORTED_GROUP_TAGS.has(tag)) {
+    const childStyle = deriveStyle(style, el);
+    const x = parseFloat(el.getAttribute("x") ?? "0");
+    const y = parseFloat(el.getAttribute("y") ?? "0");
+    const offset = [1, 0, 0, 1, Number.isFinite(x) ? x : 0, Number.isFinite(y) ? y : 0];
+    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, keepHidden);
   }
-  for (const [prefix, uri] of Object.entries(namespaces)) {
-    rootAttrs.push(`xmlns:${prefix}="${escapeAttr2(uri)}"`);
+  if (tag === "text") {
+    const textNode = parseTextElement(el, ctm, style, gradients, onWarn);
+    if (textNode && !Array.isArray(textNode) && textNode.kind === "text") {
+      const meta2 = collectElementMeta(el, uriToPrefix);
+      if (meta2) textNode.meta = meta2;
+    }
+    return textNode;
   }
-  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}="${escapeAttr2(value)}"`);
-      }
+  if (tag === "image") {
+    const imageNode = parseImageElement(el, ctm, onWarn);
+    if (imageNode) {
+      const meta2 = collectElementMeta(el, uriToPrefix);
+      if (meta2) imageNode.meta = meta2;
     }
+    return imageNode;
   }
-  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);
+  if (!SUPPORTED_LEAF_TAGS.has(tag)) {
+    onWarn(`unsupported element: <${el.tagName}>`);
+    return null;
+  }
+  const localTransform = parseTransform(el.getAttribute("transform"), onWarn);
+  let path = lowerLeaf(el, tag, ctm, onWarn);
+  if (!path) return null;
+  let rotation;
+  let baked = ctm;
+  if (!isIdentity(localTransform)) {
+    const worldLocal = rebaseTransform(ctm, localTransform);
+    const bounds = boundsOfPath(path);
+    const cx = bounds.x + bounds.width / 2;
+    const cy = bounds.y + bounds.height / 2;
+    const angle = worldLocal && decomposeRotation(worldLocal, cx, cy);
+    if (!worldLocal) {
+      onWarn("leaf transform sits under a singular parent transform; dropped");
+    } else if (angle != null) {
+      rotation = angle;
+    } else {
+      path = transformPath(path, worldLocal);
+      baked = multiply(ctm, localTransform);
+      const rotComp = rotationComponent(worldLocal);
+      if (Math.abs(rotComp) > 1e-4) {
+        onWarn(`leaf transform has a rotational component that can't be cleanly stored as rotation; baked into geometry (may not round-trip identically)`);
       }
     }
   }
-  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>`;
+  const leafStyle = deriveStyle(style, el);
+  const fill = paintThroughMatrix(readPaint2(leafStyle, "fill", "#000000", gradients, onWarn), baked);
+  const ownStroke = readStroke(leafStyle, gradients, onWarn, isNonScalingStroke(el));
+  const stroke = ownStroke && strokeThroughMatrix(ownStroke, baked);
+  if (stroke && typeof stroke.width === "number" && isNonUniform(baked)) {
+    onWarn(`<${tag}> stroke sits under a skew or non-uniform scale; its width takes the uniform part only`);
+  }
+  const opacity = ownValue(el, "opacity");
+  if (styleValue(leafStyle, "fill-rule") === "evenodd" && path.kind === "polygon") {
+    path = { ...path, fillRule: "evenodd" };
+  }
+  const node = { kind: "path", path, fill };
+  if (stroke) node.stroke = stroke;
+  if (opacity != null) node.opacity = opacity;
+  if (rotation != null) node.rotation = rotation;
+  if (tag === "line" && (leafStyle["fill"] ?? null) == null) {
+    node.fill = { kind: "none" };
+  }
+  const meta = collectElementMeta(el, uriToPrefix);
+  if (meta) node.meta = meta;
+  return node;
 }
+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";
+}
+
+// src/metaXml.ts
 function namespacedElementXml(prefix, localName2, el) {
   const attrs = [];
   for (const [name, value] of Object.entries(el.attrs)) {
-    attrs.push(`${name}="${escapeAttr2(value)}"`);
+    attrs.push(`${name}="${escapeAttr(value)}"`);
   }
   const head = attrs.length > 0 ? `<${prefix}:${localName2} ${attrs.join(" ")}>` : `<${prefix}:${localName2}>`;
   let body = "";
@@ -2707,7 +3071,7 @@ function metaAttrsXml(meta, namespaces) {
     const bucket = meta[prefix];
     if (!bucket?.attrs) continue;
     for (const [name, value] of Object.entries(bucket.attrs)) {
-      parts.push(`${prefix}:${name}="${escapeAttr2(value)}"`);
+      parts.push(`${prefix}:${name}="${escapeAttr(value)}"`);
     }
   }
   return parts.length > 0 ? ` ${parts.join(" ")}` : "";
@@ -2724,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") {
@@ -2734,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;
@@ -2754,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") {
@@ -2770,15 +3291,11 @@ function imageXml(node, namespaces) {
   if (node.opacity != null && node.opacity !== 1) {
     outer.push(`opacity="${trimNumber(node.opacity)}"`);
   }
-  if (node.rotation != null && node.rotation !== 0) {
-    const cx = node.x + node.width / 2;
-    const cy = node.y + node.height / 2;
-    const deg = node.rotation * 180 / Math.PI;
-    outer.push(`transform="rotate(${trimNumber(deg)} ${trimNumber(cx)} ${trimNumber(cy)})"`);
-  }
+  const frame = boxTransformAttr(node);
+  if (frame) outer.push(frame);
   const metaAttrs = metaAttrsXml(node.meta, namespaces);
   const metaEls = metaElementsXml(node.meta, namespaces);
-  const href = `href="${escapeAttr2(node.href)}"`;
+  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>`;
@@ -2839,7 +3356,7 @@ function pathXml(node, registry, namespaces, warn) {
 }
 function paintAttrs(paint, name, registry, includeOpacity = true) {
   if (paint.kind === "none") return [`${name}="none"`];
-  const out = [`${name}="${paint.kind === "solid" ? paint.color : registry.ref(paint.paint)}"`];
+  const out = [`${name}="${paint.kind === "solid" ? escapeAttr(paint.color) : registry.ref(paint.paint)}"`];
   if (includeOpacity) out.push(...opacityAttr(`${name}-opacity`, svgPaintOpacity(paint)));
   return out;
 }
@@ -2860,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 ? 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}"`);
@@ -2912,44 +3429,9 @@ 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 local = 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))}"`,
+    `x="${trimNumber(node.x + anchorOffset(node.style, node.width, node.text))}"`,
     `y="${trimNumber(node.y)}"`,
     `dominant-baseline="text-before-edge"`,
     // The runs model stores real line breaks; SVG's default whitespace
@@ -2960,12 +3442,12 @@ function textXml(node, registry, namespaces, warn) {
   ];
   const style = node.style;
   if (style?.fontSize != null) attrs.push(`font-size="${trimNumber(resolveScreenLength(style.fontSize, 1))}"`);
-  if (style?.fontFamily) attrs.push(`font-family="${escapeAttr2(style.fontFamily)}"`);
-  if (style?.fontWeight != null) attrs.push(`font-weight="${String(style.fontWeight)}"`);
+  if (style?.fontFamily) attrs.push(`font-family="${escapeAttr(style.fontFamily)}"`);
+  if (style?.fontWeight != null) attrs.push(`font-weight="${escapeAttr(String(style.fontWeight))}"`);
   if (style?.fontStyle && style.fontStyle !== "normal") attrs.push(`font-style="${style.fontStyle}"`);
   if (style?.fontVariantCaps === "small-caps") attrs.push('font-variant="small-caps"');
-  const direction = style?.direction ?? "ltr";
-  if (direction === "rtl") attrs.push('direction="rtl"');
+  const direction = svgDirection(style, node.text);
+  if (direction === "rtl" || style?.direction === "ltr") attrs.push(`direction="${direction}"`);
   if (style?.align != null || direction === "rtl") {
     const align = style?.align ?? "left";
     const anchor = align === "center" ? "middle" : align === "start" || align === "justify" ? "start" : align === "end" ? "end" : align === "left" === (direction === "ltr") ? "start" : "end";
@@ -2985,26 +3467,25 @@ function textXml(node, registry, namespaces, warn) {
     attrs.push('data-weasel-wrap="true"');
     warn("text that wraps at its box width is written unwrapped: SVG text does not wrap, so other readers draw one line per hard break (weasel reads the wrap back)");
   }
+  if (style?.tabSize != null) attrs.push(`data-weasel-tab-size="${trimNumber(style.tabSize)}"`);
   if (node.verticalAlign && node.verticalAlign !== "top") {
     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 ? 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) {
     attrs.push(`opacity="${trimNumber(node.opacity)}"`);
   }
-  if (node.rotation != null && node.rotation !== 0) {
-    const cx = node.x + node.width / 2;
-    const cy = node.y + node.height / 2;
-    const deg = node.rotation * 180 / Math.PI;
-    attrs.push(`transform="rotate(${trimNumber(deg)} ${trimNumber(cx)} ${trimNumber(cy)})"`);
-  }
+  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 metaAttrs = metaAttrsXml(node.meta, namespaces);
   const metaEls = metaElementsXml(node.meta, namespaces);
@@ -3021,7 +3502,7 @@ function runXml(run, style, registry, warn) {
   else if (run.bold) attrs.push(`font-weight="700"`);
   if (run.italic) attrs.push(`font-style="italic"`);
   if (run.fontVariantCaps) attrs.push(`font-variant="${run.fontVariantCaps}"`);
-  if (run.fontFamily) attrs.push(`font-family="${escapeAttr2(run.fontFamily)}"`);
+  if (run.fontFamily) attrs.push(`font-family="${escapeAttr(run.fontFamily)}"`);
   const face = scriptSizeFace(run, style);
   const presetScale = face && run.script ? scriptMetricsFor(face.family, face.weight, face.style)[run.script].size : void 0;
   const scale = run.fontScale ?? presetScale;
@@ -3037,12 +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) {
-    if ("color" in run.fill) {
-      attrs.push(`fill="${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}"`);
@@ -3056,24 +3536,6 @@ function textDecorationValue(underline, strikethrough, overline) {
   if (overline) tokens.push("overline");
   return tokens.length > 0 ? tokens.join(" ") : null;
 }
-function escapeAttr2(s) {
-  return s.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;");
-}
-function escapeText(s) {
-  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
-}
-function pathBounds(path) {
-  if (path.kind === "rect") {
-    return {
-      minX: path.x,
-      minY: path.y,
-      maxX: path.x + path.width,
-      maxY: path.y + path.height
-    };
-  }
-  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);
@@ -3099,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) {
@@ -3109,10 +3587,6 @@ function readFileText(file) {
     reader.readAsText(file);
   });
 }
-var svgIdCounter = 0;
-function freshSvgNodeId() {
-  return `n${(svgIdCounter++).toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
-}
 function fillDataFromSvg(paint, box) {
   if (!paint) return void 0;
   if (paint.kind === "none") return null;
@@ -3121,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);
@@ -3156,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 } : {} };
@@ -3176,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) => {
@@ -3186,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)));
@@ -3194,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") {
@@ -3205,6 +3667,7 @@ function svgNodesToKitDrafts(input, nextId, options = {}) {
         height: n.height
       };
       if (n.rotation) pose2.rotation = n.rotation;
+      if (n.transform) pose2.transform = n.transform;
       const box = {
         x: pose2.x,
         y: pose2.y,
@@ -3219,13 +3682,14 @@ 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) } : {}
       });
     }
     if (n.kind === "image") {
       const pose2 = { x: n.x, y: n.y, width: n.width, height: n.height };
       if (n.rotation) pose2.rotation = n.rotation;
+      if (n.transform) pose2.transform = n.transform;
       return pushLeaf(n, parentId, pose2, {
         image: {
           src: n.href,
@@ -3236,35 +3700,36 @@ 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);
 }
-function scaleTextData(data, scale) {
-  if (scale === 1 || typeof data.text !== "string") return data;
-  const style = data.style ?? {};
-  const scaleSize = (v) => typeof v === "number" ? v * scale : v;
-  const runs = data.runs;
-  return {
-    ...data,
-    ...runs ? {
-      runs: runs.map((r) => r.fontSize !== void 0 ? { ...r, fontSize: scaleSize(r.fontSize) } : r)
-    } : {},
-    style: { ...style, fontSize: scaleSize(style.fontSize ?? resolveTextStyle(style).fontSize) }
-  };
+function scaleLeafData(data, scale) {
+  if (scale === 1) return data;
+  const out = { ...data };
+  if (out.stroke) out.stroke = scaleStroke(out.stroke, scale);
+  if (typeof out.text === "string") {
+    out.style = scaleTextStyle(out.style, scale);
+    if (out.runs) out.runs = scaleRuns(out.runs, scale);
+  }
+  return out;
 }
 async function unpackSvgFiles(files, ctx) {
   const layer = ctx.scene.layers[0]?.id ?? "default";
@@ -3274,17 +3739,17 @@ async function unpackSvgFiles(files, ctx) {
       const text = await readFileText(file);
       const parsed = parseSvg(text);
       for (const w of parsed.warnings) dwarn("ingest", `svg "${file.name}":`, w);
-      let drafts = svgNodesToKitDrafts(parsed, freshSvgNodeId);
+      let drafts = svgNodesToKitDrafts(parsed, () => ctx.scene.mintId());
       if (drafts.length === 0) {
         console.warn(`weasel ingest: svg "${file.name}" parsed to no drawable nodes`);
         continue;
       }
       const roots = drafts.filter((d) => d.parentId === null);
       if (roots.length > 1) {
-        const wrapperId = freshSvgNodeId();
+        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)
         ];
       }
@@ -3316,7 +3781,7 @@ async function unpackSvgFiles(files, ctx) {
             kind: d.kind,
             layer,
             pose: place(d.pose),
-            data: d.kind === "leaf" ? scaleTextData(d.data, scale) : {},
+            data: d.kind === "leaf" ? scaleLeafData(d.data, scale) : d.data,
             parent: d.parentId
           },
           label: "Insert SVG"
@@ -3331,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) };
@@ -3369,6 +3834,7 @@ function svgImageFromKit(image, pose) {
   if (image.flipY) node.flipY = true;
   if (image.opacity != null) node.opacity = image.opacity;
   if (pose.rotation) node.rotation = pose.rotation;
+  if (pose.transform) node.transform = pose.transform;
   return node;
 }
 function strokeInPoseFrame(stroke, box) {
@@ -3378,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) } : {}
   };
 }
@@ -3396,9 +3862,10 @@ 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;
     return node2;
   }
   if (!data.path) return null;
@@ -3407,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 = {}) {
@@ -3426,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);