@weasel-js/svg 1.10.0 → 1.11.0

package/dist/index.js

@@ -1,5 +1,5 @@
-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 { identity, multiply, invert, splitByClosure, fillsOpenSubpaths, rotateAboutPoint, hasOpenSubpath, splitSubpaths } from '@weasel-js/geom';
+import { resolveCorners, PATH_M, PATH_L, PATH_C, PATH_Q, PATH_Z, isTileKind, boundsOfPath, transformPath, isSolidPaint, warmFonts, warmPaintKinds, isPaintKindKnown, solid, fillToBoundsFrame, getMarker, registerMarker, dwarn, unionAABB, createInsertOp, fillInPoseFrame, pathThroughPoseFrame, DEFAULT_SHAPE_FILL, pathInPoseFrame, poseLinearOf, poseFrameOf, DEFAULT_TEXT_STYLE, resolveScreenLength, pathFromD, isPatternPaint, resolveTextStyle, strokeToPath, toRuns, resolveRunFace, parseColor, rgbaToHex, layoutRuns, resolveRuns, resolveAlign, PathBuilder, scaleVertexWidth, getPaintKind, resolveMarkerSize, paragraphDirection, scriptMetricsFor, vertexHalfWidths, isTilePaint, tileSpecOf } from '@weasel-js/core';
 import { tileGeometry } from '@weasel-js/core/patterns-builtin';
 
 // src/types.ts
@@ -177,9 +177,11 @@ 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 };
+  const { width: width2, vertexWidths } = stroke;
+  if (scale === 1) return stroke;
+  const scaledVertices = vertexWidths ? { vertexWidths: vertexWidths.map((n) => scaleVertexWidth(n, scale)) } : {};
+  if (typeof width2 === "object") return vertexWidths ? { ...stroke, ...scaledVertices } : stroke;
+  const out = { ...stroke, ...scaledVertices };
   if (width2 !== void 0) out.width = width2 * scale;
   if (out.dash) out.dash = out.dash.map((n) => n * scale);
   return out;
@@ -1381,7 +1383,8 @@ function readPattern(el, onWarn) {
   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 serializePathD(path) {
+function serializePathD(given) {
+  const path = resolveCorners(given);
   if (path.kind === "rect") {
     const { x, y, width: width2, height: height2 } = path;
     return `M${trimNumber(x)} ${trimNumber(y)}h${trimNumber(width2)}v${trimNumber(height2)}h${trimNumber(-width2)}Z`;
@@ -1548,9 +1551,9 @@ function warnUnmodeled(el, elements, onWarn) {
       break;
     }
   }
-  const spread = inheritedAttr(el, elements, "spreadMethod");
-  if (spread === "reflect" || spread === "repeat") {
-    onWarn?.(`spreadMethod="${spread}" is not modeled; the gradient pads`);
+  const spread2 = inheritedAttr(el, elements, "spreadMethod");
+  if (spread2 === "reflect" || spread2 === "repeat") {
+    onWarn?.(`spreadMethod="${spread2}" is not modeled; the gradient pads`);
   }
 }
 function coord(el, elements, name, axis, fraction, units, onWarn) {
@@ -2096,6 +2099,97 @@ function coreStroke(stroke) {
   if (stroke.markerEnd) out.markerEnd = stroke.markerEnd;
   return out;
 }
+var VERTEX_WIDTHS = "vertex-widths";
+var NIB = "nib";
+var WIDTH = "stroke-width";
+var ROLE = "role";
+var OUTLINE = "stroke-outline";
+var GROUP = "stroke-group";
+var MARKER_ATTR = /^(marker-(?:start|mid|end))=/;
+var UNSET = "-";
+var SIDES = "/";
+function attrOf(el, name) {
+  return el.getAttributeNS(WEASEL_NS, name) ?? el.getAttribute(`${WEASEL_NS_PREFIX}:${name}`);
+}
+function hasVariableWidth(stroke) {
+  return (stroke?.vertexWidths?.length ?? 0) > 0 || stroke?.nib !== void 0;
+}
+function writesVariableWidth(nodes) {
+  return nodes.some((n) => n.kind === "group" ? writesVariableWidth(n.children) : n.kind === "path" && hasVariableWidth(n.stroke));
+}
+function widthToken(entry) {
+  const { left, right } = vertexHalfWidths(entry, NaN);
+  const side = (v) => Number.isNaN(v) ? UNSET : trimNumber(v);
+  if (typeof entry === "number") return Number.isNaN(left) ? UNSET : trimNumber(left + right);
+  return Number.isNaN(left) && Number.isNaN(right) ? UNSET : `${side(left)}${SIDES}${side(right)}`;
+}
+function widthOfToken(token) {
+  const side = (v) => v === UNSET ? NaN : Number(v);
+  if (!token.includes(SIDES)) return side(token);
+  const [left, right] = token.split(SIDES);
+  return { left: side(left), right: side(right) };
+}
+function variableWidthAttrs(stroke, strokeAttrs) {
+  const width2 = typeof stroke.width === "number" ? stroke.width : stroke.width.px;
+  const out = [
+    ...strokeAttrs.map((a) => a.startsWith("stroke-width=") ? 'stroke-width="0"' : MARKER_ATTR.test(a) ? `${WEASEL_NS_PREFIX}:${a}` : a),
+    `${WEASEL_NS_PREFIX}:${WIDTH}="${trimNumber(width2)}"`
+  ];
+  if (stroke.vertexWidths?.length) {
+    const list = stroke.vertexWidths.map(widthToken).join(" ");
+    out.push(`${WEASEL_NS_PREFIX}:${VERTEX_WIDTHS}="${list}"`);
+  }
+  if (stroke.nib) {
+    out.push(`${WEASEL_NS_PREFIX}:${NIB}="${String(stroke.nib.angle)} ${String(stroke.nib.ratio)}"`);
+  }
+  return out;
+}
+function strokeOutlineXml(path, stroke, fillAttrs, transform) {
+  const kit = {
+    width: stroke.width,
+    ...stroke.vertexWidths ? { vertexWidths: stroke.vertexWidths } : {},
+    ...stroke.nib ? { nib: stroke.nib } : {},
+    ...stroke.cap ? { cap: stroke.cap } : {},
+    ...stroke.join ? { join: stroke.join } : {},
+    ...stroke.dash ? { dash: stroke.dash } : {},
+    ...stroke.miterLimit != null ? { miterLimit: stroke.miterLimit } : {},
+    ...stroke.align ? { align: stroke.align } : {},
+    ...stroke.markerStart ? { markerStart: stroke.markerStart } : {},
+    ...stroke.markerMid ? { markerMid: stroke.markerMid } : {},
+    ...stroke.markerEnd ? { markerEnd: stroke.markerEnd } : {}
+  };
+  const outline = strokeToPath(path, kit);
+  const attrs = [`d="${serializePathD(outline)}"`, ...fillAttrs, 'stroke="none"'];
+  if (transform) attrs.push(transform);
+  attrs.push(`${WEASEL_NS_PREFIX}:${ROLE}="${OUTLINE}"`);
+  return `<path ${attrs.join(" ")}/>`;
+}
+function strokeGroupXml(opacity, inner) {
+  return `<g ${opacity} ${WEASEL_NS_PREFIX}:${ROLE}="${GROUP}">${inner}</g>`;
+}
+function unwrapStrokeGroup(el, node) {
+  if (attrOf(el, ROLE) !== GROUP || !node || Array.isArray(node) || node.kind !== "group") return node;
+  const [only] = node.children;
+  if (node.children.length !== 1 || only.kind !== "path") return node;
+  return node.opacity != null ? { ...only, opacity: node.opacity * (only.opacity ?? 1) } : only;
+}
+function isStrokeOutline(el) {
+  return attrOf(el, ROLE) === OUTLINE;
+}
+function withVariableWidth(el, stroke) {
+  const width2 = parseFloat(attrOf(el, WIDTH) ?? "");
+  if (!stroke || !Number.isFinite(width2)) return stroke;
+  const out = { ...stroke, width: typeof stroke.width === "number" ? width2 : { px: width2 } };
+  const list = attrOf(el, VERTEX_WIDTHS);
+  if (list) out.vertexWidths = list.trim().split(/\s+/).map(widthOfToken);
+  const [angle, ratio] = (attrOf(el, NIB) ?? "").trim().split(/\s+/).map(Number);
+  if (Number.isFinite(angle) && Number.isFinite(ratio)) out.nib = { angle, ratio };
+  for (const [attr, field] of [["marker-start", "markerStart"], ["marker-mid", "markerMid"], ["marker-end", "markerEnd"]]) {
+    const id = /^url\(\s*#([^)\s]+)\s*\)$/.exec(attrOf(el, attr)?.trim() ?? "")?.[1];
+    if (id) out[field] = id;
+  }
+  return out;
+}
 var near = (v, target) => Math.abs(v - target) <= 1e-9;
 function placeBox(box, m, stretch) {
   const [a, b, c, d] = m;
@@ -2238,6 +2332,32 @@ function anchorOffset(style, width2, text) {
 }
 
 // src/tspanLines.ts
+var LINES_ATTR = "data-weasel-lines";
+var LINE_HEIGHT_ATTR = "data-weasel-line-height";
+var statesLines = (tspan) => tspan.hasAttribute(LINES_ATTR);
+function linesXml(pieces, x, pitch) {
+  let out = "";
+  let pending = 0;
+  let wrote = false;
+  const tspan = (attrs, text) => `<tspan${attrs.map((a) => ` ${a}`).join("")}>${escapeText(text)}</tspan>`;
+  const lineAttrs = () => {
+    if (pending === 0) return [];
+    const attrs = [`x="${trimNumber(x)}"`, `dy="${trimNumber(pending * pitch)}"`];
+    if (pending > 1 || !wrote) attrs.push(`${LINES_ATTR}="${pending}"`);
+    pending = 0;
+    return attrs;
+  };
+  for (const piece of pieces) {
+    piece.text.split(/[\n\u000B\u000C]/).forEach((line, i) => {
+      if (i > 0) pending++;
+      if (line === "") return;
+      const attrs = [...piece.attrs ?? [], ...lineAttrs()];
+      out += piece.attrs === null && attrs.length === 0 ? escapeText(line) : tspan(attrs, line);
+      wrote = true;
+    });
+  }
+  return pending > 0 ? out + tspan(lineAttrs(), "") : out;
+}
 var DEFAULT_LINE_HEIGHT = 1.2;
 var LineTracker = class {
   constructor(text, onWarn) {
@@ -2250,9 +2370,9 @@ var LineTracker = class {
   /** 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. */
+  /** How many lines down `tspan` opens a new line, or 0 when it stays on the
+   *  current one. Call once per tspan, in order. `afterText` is whether any
+   *  text precedes it: the first line's own placement is not a pitch. */
   startsLine(tspan, afterText) {
     const y = tspan.getAttribute("y");
     const movedY = y != null && y !== this.y;
@@ -2260,10 +2380,11 @@ var LineTracker = class {
     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;
+    if (!tspan.hasAttribute("x") || !(movedY || dy !== 0)) return 0;
+    const stated = Number(tspan.getAttribute(LINES_ATTR) ?? NaN);
+    const lines = Number.isInteger(stated) && stated >= 0 ? stated : 1;
+    if (afterText && lines > 0 && this.at > from) this.pitches.push((this.at - from) / lines);
+    return lines;
   }
   /**
    * The line height the lines were pitched at, as a multiple of `fontSize`:
@@ -2278,7 +2399,7 @@ var LineTracker = class {
     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;
+    const lineHeight = Math.round(mean / fontSize * 1e6) / 1e6;
     return Math.abs(lineHeight - DEFAULT_LINE_HEIGHT) < 1e-6 ? void 0 : lineHeight;
   }
 };
@@ -2288,20 +2409,33 @@ function warnUnreadPositions(el, onWarn) {
     const raw = el.getAttribute(name)?.trim() ?? "";
     if (/[\s,]/.test(raw)) onWarn(`<${tag} ${name}="${raw}"> positions each glyph; only the first value is read`);
   }
-  for (const name of ["dx", "rotate"]) {
+  for (const name of tag === "tspan" ? ["rotate"] : ["dx", "rotate"]) {
     const raw = el.getAttribute(name)?.trim() ?? "";
     if (raw.split(/[\s,]+/).some((v) => parseFloat(v) !== 0 && v !== "")) {
       onWarn(`<${tag} ${name}="${raw}"> is not read; the glyphs keep their own advance and angle`);
     }
   }
 }
-function joinLines(lines) {
+function sameStyle(a, b) {
+  const style = (run) => JSON.stringify(
+    Object.entries(run).filter(([k, v]) => k !== "text" && v !== void 0).sort(([j], [k]) => j < k ? -1 : 1)
+  );
+  return style(a) === style(b);
+}
+function joinLines(lines, leading = 0) {
   const out = [];
-  let breaks = 0;
+  let breaks = leading;
   for (const line of lines) {
     if (line.length > 0) {
-      if (breaks > 0) line[0] = { ...line[0], text: "\n".repeat(breaks) + line[0].text };
-      out.push(...line);
+      const [first, ...rest] = line;
+      const head = breaks > 0 ? { ...first, text: "\n".repeat(breaks) + first.text } : first;
+      const last = out[out.length - 1];
+      if (breaks > 0 && last && sameStyle(last, head)) {
+        out[out.length - 1] = { ...last, text: last.text + head.text };
+      } else {
+        out.push(head);
+      }
+      out.push(...rest);
       breaks = 0;
     }
     if (out.length > 0) breaks++;
@@ -2309,14 +2443,124 @@ function joinLines(lines) {
   return out;
 }
 
-// src/fillPaint.ts
-function mapFillPaint(fill, f) {
-  if (!fill.paint) return fill;
-  const paint = f(fill.paint);
-  return paint === fill.paint ? fill : { ...fill, paint };
+// src/laidLines.ts
+var LAID_ATTR = "data-weasel-layout";
+function layoutMeasured(layout, text) {
+  return layout.laid.bounds.width > 0 || text.trim() === "";
+}
+function anchorX(cells, { anchor, rtl }) {
+  const left = Math.min(...cells.map((c) => c.x));
+  const right = Math.max(...cells.map((c) => c.x + c.advance));
+  if (anchor === "middle") return (left + right) / 2;
+  return anchor === "start" === !rtl ? left : right;
+}
+function wordStarts(text, start, end) {
+  const out = [start];
+  for (let i = start + 1; i < end; i++) {
+    if (!/\s/.test(text[i]) && /\s/.test(text[i - 1])) out.push(i);
+  }
+  return out;
+}
+function rangeXml(pieces, offsets, start, end, lead) {
+  let out = "";
+  let first = true;
+  pieces.forEach((piece, k) => {
+    const from = Math.max(start, offsets[k]);
+    const to = Math.min(end, offsets[k] + piece.text.length);
+    if (from >= to) return;
+    const text = piece.text.slice(from - offsets[k], to - offsets[k]);
+    const attrs = [...piece.attrs ?? [], ...first ? lead : []];
+    first = false;
+    out += piece.attrs === null && attrs.length === 0 ? escapeText(text) : `<tspan${attrs.map((a) => ` ${a}`).join("")}>${escapeText(text)}</tspan>`;
+  });
+  return out;
+}
+var HARD_BREAKS = /\r\n|[\n\v\f\r\u0085\u2028\u2029]/g;
+var breaksIn = (text) => text.match(HARD_BREAKS)?.length ?? 0;
+function laidLinesXml(pieces, layout, anchor) {
+  const text = pieces.map((p) => p.text).join("");
+  const offsets = [];
+  pieces.reduce((at, p) => {
+    offsets.push(at);
+    return at + p.text.length;
+  }, 0);
+  const px = (x) => `x="${trimNumber(layout.x + x)}"`;
+  const py = (line) => `y="${trimNumber(layout.y + line.baselineY)}"`;
+  let out = "";
+  let wrote = false;
+  let prevEnd = 0;
+  const count = (lines) => {
+    const stated = lines !== 1 || !wrote ? [`${LINES_ATTR}="${lines}"`] : [];
+    wrote = true;
+    return stated;
+  };
+  for (const line of layout.laid.lines) {
+    if (line.cells.length === 0) continue;
+    const start = Math.min(...line.cells.map((c) => c.srcIndex));
+    const stepped = breaksIn(text.slice(prevEnd, start));
+    prevEnd = line.srcEnd;
+    const starts = line.justified ? wordStarts(text, start, line.srcEnd) : [start];
+    starts.forEach((from, k) => {
+      const to = starts[k + 1] ?? line.srcEnd;
+      const cells = line.cells.filter((c) => c.srcIndex >= from && c.srcIndex < to);
+      const lead = [px(anchorX(cells, anchor)), ...k === 0 ? [py(line), ...count(stepped)] : []];
+      out += rangeXml(pieces, offsets, from, to, lead);
+    });
+  }
+  const trailing = breaksIn(text.slice(prevEnd));
+  const last = layout.laid.lines[layout.laid.lines.length - 1];
+  if (trailing > 0 && last) out += `<tspan ${[px(last.x0), py(last), ...count(trailing)].join(" ")}></tspan>`;
+  return out;
+}
+var COLLAPSIBLE = /^\s|\s$|\s\s|[\n\t\r]/;
+function readDx(el, onWarn) {
+  const raw = el.getAttribute("dx")?.trim();
+  if (!raw) return null;
+  const values = raw.split(/[\s,]+/).map((v) => resolveLength(v, el, "dx", "x", 0, onWarn));
+  return values.some((v) => v !== 0) ? values : null;
+}
+var spacingOf = (run, inherited2) => resolveScreenLength(run.letterSpacing ?? inherited2 ?? 0, 1);
+function spread(run, extra, inherited2) {
+  const base = spacingOf(run, inherited2);
+  const out = [];
+  let last;
+  Array.from(run.text).forEach((glyph, i) => {
+    const more = extra[i] ?? 0;
+    if (out.length > 0 && more === last) out[out.length - 1].text += glyph;
+    else out.push(more === 0 ? { ...run, text: glyph } : { ...run, text: glyph, letterSpacing: base + more });
+    last = more;
+  });
+  return out;
+}
+function placeTspanRun(tspan, run, lines, inherited2, onWarn) {
+  const line = lines[lines.length - 1];
+  const dx = readDx(tspan, onWarn);
+  if (!dx) {
+    line.push(run);
+    return 0;
+  }
+  const raw = tspan.getAttribute("dx");
+  if (COLLAPSIBLE.test(run.text)) {
+    onWarn(`<tspan dx="${raw}"> is not read: its text has white space SVG collapses, which moves the glyphs the list names`);
+    line.push(run);
+    return 0;
+  }
+  let lead = 0;
+  let before = line.length - 1;
+  while (before >= 0 && line[before].text === "") before--;
+  if (dx[0] !== 0 && before >= 0) {
+    const glyphs = Array.from(line[before].text);
+    line.splice(before, 1, ...spread(line[before], [...glyphs.slice(1).map(() => 0), dx[0]], inherited2));
+  } else if (dx[0] !== 0 && lines.length === 1) {
+    lead = dx[0];
+  } else if (dx[0] !== 0) {
+    onWarn(`<tspan dx="${raw}"> opens a line; the line starts at the box edge, and the rest of the list is read`);
+  }
+  line.push(...spread(run, dx.slice(1), inherited2));
+  return lead;
 }
 
-// src/readText.ts
+// src/textWhitespace.ts
 var XML_NS = "http://www.w3.org/XML/1998/namespace";
 function preservesSpace(el) {
   for (let e = el; e; e = e.parentElement) {
@@ -2353,6 +2597,15 @@ function collapseRunWhitespace(runs) {
     if (runs[i].text === "") runs.splice(i, 1);
   }
 }
+
+// src/fillPaint.ts
+function mapFillPaint(fill, f) {
+  if (!fill.paint) return fill;
+  const paint = f(fill.paint);
+  return paint === fill.paint ? fill : { ...fill, paint };
+}
+
+// src/readText.ts
 var ESTIMATED_GLYPH_ADVANCE_EM = 0.6;
 function laidOutWidth(runs, style, plain) {
   const resolved = resolveTextStyle(style);
@@ -2367,6 +2620,10 @@ function laidOutWidth(runs, style, plain) {
   const longest = plain.split("\n").reduce((max, line) => Math.max(max, line.length), 0);
   return longest * resolved.fontSize * ESTIMATED_GLYPH_ADVANCE_EM;
 }
+function numberAttr(el, name) {
+  const n = parseFloat(el.getAttribute(name) ?? "");
+  return Number.isFinite(n) ? n : void 0;
+}
 function placeTextNode(node, m, onWarn) {
   const cx = node.x + node.width / 2;
   const cy = node.y + node.height / 2;
@@ -2408,38 +2665,14 @@ function parseTextElement(el, ctm, style, gradients, onWarn) {
   const textPaint = readTextPaint(leafStyle, gradients, onWarn, isNonScalingStroke(el));
   const fontSize = resolveScreenLength(textStyle.fontSize ?? 16, 1);
   const dominantBaseline = el.getAttribute("dominant-baseline");
-  const explicitTopAnchor = dominantBaseline === "text-before-edge" || dominantBaseline === "hanging";
+  const laid = el.hasAttribute(LAID_ATTR);
+  const explicitTopAnchor = laid || dominantBaseline === "text-before-edge" || dominantBaseline === "hanging";
   const topY = explicitTopAnchor ? ay : ay - fontSize;
   const inheritedShift = ownValue(el, "baseline-shift", onWarn) ?? {};
-  const runLines = [[]];
   const tracker = new LineTracker(el, 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;
-      push({ text: t, ...inheritedShift });
-    } else if (child.nodeType === 1) {
-      const sp = child;
-      if (sp.tagName.toLowerCase() !== "tspan") {
-        onWarn(`<text> child <${sp.tagName}> not supported; flattening text content`);
-        const t = sp.textContent ?? "";
-        if (t) push({ text: t, ...inheritedShift });
-        continue;
-      }
-      warnUnreadPositions(sp, onWarn);
-      const afterText = runLines.some((line) => line.some((r) => r.text.trim() !== ""));
-      if (tracker.startsLine(sp, afterText)) runLines.push([]);
-      push(readTspanRun(sp, gradients, leafStyle, onWarn));
-    }
-  }
-  if (!preservesSpace(el)) for (const line of runLines) collapseRunWhitespace(line);
-  const runs = joinLines(runLines);
+  const { runs, lead } = readRuns(el, tracker, inheritedShift, textStyle.letterSpacing, gradients, leafStyle, onWarn);
   const plain = runs.map((r) => r.text).join("");
-  const pitched = tracker.lineHeight(fontSize);
+  const pitched = laid ? numberAttr(el, LINE_HEIGHT_ATTR) : 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);
@@ -2450,7 +2683,7 @@ function parseTextElement(el, ctm, style, gradients, onWarn) {
   const opacity = ownValue(el, "opacity");
   const node = {
     kind: "text",
-    x: ax - anchorOffset(textStyle, width2, plain),
+    x: ax + lead - anchorOffset(textStyle, width2, plain),
     y: topY,
     width: width2,
     height: height2,
@@ -2476,6 +2709,38 @@ function parseTextElement(el, ctm, style, gradients, onWarn) {
   placeTextNode(node, multiply(ctm, localTransform), onWarn);
   return node;
 }
+function readRuns(el, tracker, inheritedShift, letterSpacing, gradients, leafStyle, onWarn) {
+  const runLines = [[]];
+  let leading = 0;
+  let lead = 0;
+  const push = (run) => {
+    runLines[runLines.length - 1].push(run);
+  };
+  for (let i = 0; i < el.childNodes.length; i++) {
+    const child = el.childNodes[i];
+    if (child.nodeType === 3) {
+      const t = child.textContent ?? "";
+      if (!t) continue;
+      push({ text: t, ...inheritedShift });
+    } else if (child.nodeType === 1) {
+      const sp = child;
+      if (sp.tagName.toLowerCase() !== "tspan") {
+        onWarn(`<text> child <${sp.tagName}> not supported; flattening text content`);
+        const t = sp.textContent ?? "";
+        if (t) push({ text: t, ...inheritedShift });
+        continue;
+      }
+      warnUnreadPositions(sp, onWarn);
+      const afterText = runLines.some((line) => line.some((r) => r.text.trim() !== ""));
+      const lines = tracker.startsLine(sp, afterText);
+      if (runLines.length === 1 && runLines[0].length === 0 && statesLines(sp)) leading = lines;
+      else for (let n = 0; n < lines; n++) runLines.push([]);
+      lead += placeTspanRun(sp, readTspanRun(sp, gradients, leafStyle, onWarn), runLines, letterSpacing, onWarn);
+    }
+  }
+  if (!preservesSpace(el)) for (const line of runLines) collapseRunWhitespace(line);
+  return { runs: joinLines(runLines, leading), lead };
+}
 function readTspanRun(el, gradients, style, onWarn) {
   const text = el.textContent ?? "";
   const run = { text };
@@ -2922,10 +3187,10 @@ function parseChildren(parent, ctm, style, gradients, clips, onWarn, uriToPrefix
   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;
+    if (ns && ns !== "http://www.w3.org/2000/svg" || isStrokeOutline(el)) continue;
     const hidden = isHiddenElement(el, style);
     if (hidden && !keepHidden) continue;
-    const node = parseElement(el, ctm, style, gradients, clips, onWarn, uriToPrefix, keepHidden);
+    const node = unwrapStrokeGroup(el, 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;
@@ -3018,7 +3283,7 @@ function parseElement(el, ctm, style, gradients, clips, onWarn, uriToPrefix, kee
   }
   const leafStyle = deriveStyle(style, el);
   const fill = paintThroughMatrix(readPaint2(leafStyle, "fill", "#000000", gradients, onWarn), baked);
-  const ownStroke = readStroke(leafStyle, gradients, onWarn, isNonScalingStroke(el));
+  const ownStroke = withVariableWidth(el, 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`);
@@ -3132,25 +3397,45 @@ function pathBounds(path) {
 
 // src/openSubpathFill.ts
 var capsEnds = (stroke) => stroke?.markerStart !== void 0 || stroke?.markerEnd !== void 0;
+var marked = (stroke) => capsEnds(stroke) || stroke?.markerMid !== void 0;
 function withoutEndMarkers(stroke) {
   const { markerStart: _start, markerEnd: _end, ...rest } = stroke;
   return rest;
 }
-function withOpenSubpathsUnfilled(node) {
-  const path = node.path;
-  if (path.kind !== "polygon" || node.fill.kind === "none" || fillsOpenSubpaths(path)) return node;
+var closedStroke = (stroke) => stroke && capsEnds(stroke) ? withoutEndMarkers(stroke) : stroke;
+var isClosed = (part) => splitByClosure(part).open === null;
+function samePath(a, b) {
+  if (a === b) return true;
+  return a.commands.length === b.commands.length && a.coords.length === b.coords.length && a.commands.every((c, i) => c === b.commands[i]) && a.coords.every((v, i) => v === b.coords[i]);
+}
+function strokeParts(path, stroke, filled, closed, open) {
+  const none = { kind: "none" };
+  const subs = marked(stroke) ? splitSubpaths(path) : [];
+  if (subs.length > 1) {
+    return subs.map((sub) => ({ path: sub, fill: none, stroke: isClosed(sub) ? closedStroke(stroke) : stroke }));
+  }
+  if (closed && open && filled === closed) {
+    return [{ path: closed, fill: none, stroke: closedStroke(stroke) }, { path: open, fill: none, stroke }];
+  }
+  return [{ path, fill: none, stroke: open ? stroke : closedStroke(stroke) }];
+}
+function pathAsSvgDraws(node) {
+  const { path, fill, stroke } = node;
+  if (path.kind !== "polygon") return capsEnds(stroke) ? { ...node, stroke: closedStroke(stroke) } : node;
+  if (path.commands.length === 0) return node;
   const { closed, open } = splitByClosure(path);
-  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 filled = fill.kind === "none" ? null : fillsOpenSubpaths(path) ? path : closed;
+  const parts = strokeParts(path, stroke, filled, closed, open);
+  const pieces = filled ? withFill(parts, filled, fill) : parts;
+  if (pieces.length === 1) {
+    const only = pieces[0];
+    if (only.fill === fill && only.stroke === stroke) return node;
+    const { stroke: _stroke, ...rest } = node;
+    return { ...rest, fill: only.fill, ...only.stroke ? { stroke: only.stroke } : {} };
+  }
   const group = {
     kind: "group",
-    children: [
-      ...closed ? [piece(closed, fill, stroke && withoutEndMarkers(stroke))] : [],
-      ...opens.map((part) => piece(part, { kind: "none" }))
-    ]
+    children: pieces.map((p) => ({ kind: "path", path: p.path, fill: p.fill, ...p.stroke ? { stroke: p.stroke } : {} }))
   };
   if (node.rotation != null && node.rotation !== 0) {
     const b = pathBounds(path);
@@ -3161,205 +3446,28 @@ function withOpenSubpathsUnfilled(node) {
   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") {
-      if (n.clip) registry.clipId(n.clip);
-      registerPaintServers(n.children, registry);
-    } else if (n.kind === "path") {
-      if (n.fill.kind === "gradient") registry.register(n.fill.paint);
-      if (n.stroke && n.stroke.paint.kind === "gradient") registry.register(n.stroke.paint.paint);
-      registerMarkers(n.stroke, registry);
-    } else if (n.kind === "text") {
-      registerTextPaint(n.fill?.paint, registry);
-      registerTextPaint(n.stroke?.paint, registry);
-      registerMarkers(n.stroke, registry);
-      for (const run of n.runs ?? []) {
-        registerTextPaint(run.fill?.paint, registry);
-        registerTextPaint(run.stroke?.paint, registry);
-      }
-    }
-  }
-}
-function registerTextPaint(paint, registry) {
-  if (paint && !isSolidPaint(paint)) registry.register(paint);
-}
-function registerMarkers(stroke, registry) {
-  if (!stroke) return;
-  for (const ref of [stroke.markerStart, stroke.markerMid, stroke.markerEnd]) {
-    if (ref !== void 0) registry.markerId(ref);
-  }
-}
-function nodeXml(node, registry, namespaces, warn) {
-  const xml = kindXml(node, registry, namespaces, warn);
-  return node.hidden ? xml.replace(/^<[\w:]+/, (open) => `${open} display="none"`) : xml;
-}
-function kindXml(node, registry, namespaces, warn) {
-  if (node.kind === "group") return groupXml(node, registry, namespaces, warn);
-  if (node.kind === "text") return textXml(node, registry, namespaces, warn);
-  if (node.kind === "image") return imageXml(node, namespaces);
-  const drawn = withOpenSubpathsUnfilled(node);
-  return drawn.kind === "group" ? groupXml(drawn, registry, namespaces, warn) : pathXml(drawn, registry, namespaces, warn);
+function withFill(parts, filled, fill) {
+  const host = parts.findIndex((p) => samePath(p.path, filled));
+  if (host < 0) return [{ path: filled, fill, stroke: void 0 }, ...parts];
+  return [{ ...parts[host], fill }, ...parts.filter((_, i) => i !== host)];
 }
 function warnStrokeAlign(align, warn) {
   if (align && align !== "center") {
     warn(`a stroke aligned "${align}" of its edge is written centered: SVG has no stroke alignment`);
   }
 }
-function imageXml(node, namespaces) {
-  const box = `x="${trimNumber(node.x)}" y="${trimNumber(node.y)}" width="${trimNumber(node.width)}" height="${trimNumber(node.height)}"`;
-  const outer = [];
-  if (node.opacity != null && node.opacity !== 1) {
-    outer.push(`opacity="${trimNumber(node.opacity)}"`);
-  }
-  const frame = boxTransformAttr(node);
-  if (frame) outer.push(frame);
-  const metaAttrs = metaAttrsXml(node.meta, namespaces);
-  const metaEls = metaElementsXml(node.meta, namespaces);
-  const href = `href="${escapeAttr(node.href)}"`;
-  if (!node.source && !node.flipX && !node.flipY) {
-    const attrs = [href, box, 'preserveAspectRatio="none"', ...outer].join(" ");
-    if (metaEls) return `<image ${attrs}${metaAttrs}>${metaEls}</image>`;
-    return `<image ${attrs}${metaAttrs}/>`;
-  }
-  const src = node.source ?? { x: 0, y: 0, width: 1, height: 1 };
-  const viewBox = [src.x, src.y, src.width, src.height].map(trimNumber).join(" ");
-  const flip = node.flipX || node.flipY ? ` transform="matrix(${node.flipX ? -1 : 1} 0 0 ${node.flipY ? -1 : 1} ${trimNumber(node.flipX ? 2 * src.x + src.width : 0)} ${trimNumber(node.flipY ? 2 * src.y + src.height : 0)})"` : "";
-  const head = ['<g data-weasel-image="true"', ...outer].join(" ");
-  return `${head}${metaAttrs}><svg ${box} viewBox="${viewBox}" preserveAspectRatio="none"><image ${href} x="0" y="0" width="1" height="1" preserveAspectRatio="none"${flip}/></svg>${metaEls}</g>`;
-}
-function groupXml(node, registry, namespaces, warn) {
-  const attrs = [];
-  if (node.transform) {
-    const m = formatMatrix(node.transform);
-    if (m) attrs.push(`transform="${m}"`);
-  }
-  if (node.clip) {
-    attrs.push(`clip-path="url(#${registry.clipId(node.clip)})"`);
-  }
-  if (node.opacity != null && node.opacity !== 1) {
-    attrs.push(`opacity="${trimNumber(node.opacity)}"`);
-  }
-  const metaAttrs = metaAttrsXml(node.meta, namespaces);
-  const head = attrs.length > 0 ? `<g ${attrs.join(" ")}${metaAttrs}>` : `<g${metaAttrs}>`;
-  const body = node.children.map((c) => nodeXml(c, registry, namespaces, warn)).join("");
-  return `${head}${body}${metaElementsXml(node.meta, namespaces)}</g>`;
-}
-function pathXml(node, registry, namespaces, warn) {
-  const attrs = [`d="${serializePathD(node.path)}"`];
-  const fillAttrs = paintAttrs(node.fill, "fill", registry);
-  for (const a of fillAttrs) attrs.push(a);
-  if (node.path.kind === "polygon" && node.path.fillRule === "evenodd") {
-    attrs.push(`fill-rule="evenodd"`);
-  }
-  if (node.stroke) {
-    const strokeAttrs = strokeAttrsFor(node.stroke, registry, warn);
-    for (const a of strokeAttrs) attrs.push(a);
-  } else {
-    attrs.push('stroke="none"');
-  }
-  if (node.opacity != null && node.opacity !== 1) {
-    attrs.push(`opacity="${trimNumber(node.opacity)}"`);
-  }
-  if (node.rotation != null && node.rotation !== 0) {
-    const b = pathBounds(node.path);
-    const cx = b.minX + (b.maxX - b.minX) / 2;
-    const cy = b.minY + (b.maxY - b.minY) / 2;
-    const deg = node.rotation * 180 / Math.PI;
-    attrs.push(`transform="rotate(${trimNumber(deg)} ${trimNumber(cx)} ${trimNumber(cy)})"`);
-  }
-  const metaAttrs = metaAttrsXml(node.meta, namespaces);
-  const metaEls = metaElementsXml(node.meta, namespaces);
-  if (metaEls) {
-    return `<path ${attrs.join(" ")}${metaAttrs}>${metaEls}</path>`;
-  }
-  return `<path ${attrs.join(" ")}${metaAttrs}/>`;
-}
 function paintAttrs(paint, name, registry, includeOpacity = true) {
   if (paint.kind === "none") return [`${name}="none"`];
   const out = [`${name}="${paint.kind === "solid" ? escapeAttr(paint.color) : registry.ref(paint.paint)}"`];
   if (includeOpacity) out.push(...opacityAttr(`${name}-opacity`, svgPaintOpacity(paint)));
   return out;
 }
+function strokePaintAsFillAttrs(stroke, registry) {
+  return [
+    ...paintAttrs(stroke.paint, "fill", registry, false),
+    ...opacityAttr("fill-opacity", stroke.opacity ?? svgPaintOpacity(stroke.paint))
+  ];
+}
 function svgPaintOpacity(paint) {
   if (paint.kind === "solid") return paint.opacity;
   return paint.kind === "gradient" ? paint.paint.opacity : void 0;
@@ -3429,13 +3537,15 @@ function strokeAttrsFor(stroke, registry, warn) {
   }
   return attrs;
 }
-function textXml(node, registry, namespaces, warn) {
+function textXml(node, registry, namespaces, warn, given) {
+  const layout = given && layoutMeasured(given, node.text) ? given : null;
+  const x = node.x + anchorOffset(node.style, node.width, node.text);
   const attrs = [
-    `x="${trimNumber(node.x + anchorOffset(node.style, node.width, node.text))}"`,
+    `x="${trimNumber(x)}"`,
     `y="${trimNumber(node.y)}"`,
-    `dominant-baseline="text-before-edge"`,
-    // The runs model stores real line breaks; SVG's default whitespace
-    // handling would collapse them (and any indentation) away on re-import.
+    layout ? `${LAID_ATTR}="lines"` : `dominant-baseline="text-before-edge"`,
+    // SVG's default whitespace handling would collapse indentation and runs
+    // of spaces away on re-import.
     `xml:space="preserve"`,
     `data-weasel-width="${trimNumber(node.width)}"`,
     `data-weasel-height="${trimNumber(node.height)}"`
@@ -3448,9 +3558,10 @@ function textXml(node, registry, namespaces, warn) {
   if (style?.fontVariantCaps === "small-caps") attrs.push('font-variant="small-caps"');
   const direction = svgDirection(style, node.text);
   if (direction === "rtl" || style?.direction === "ltr") attrs.push(`direction="${direction}"`);
+  let anchor = "start";
   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";
+    anchor = align === "center" ? "middle" : align === "start" || align === "justify" ? "start" : align === "end" ? "end" : align === "left" === (direction === "ltr") ? "start" : "end";
     if (anchor !== "start") attrs.push(`text-anchor="${anchor}"`);
     if (align === "justify") attrs.push('data-weasel-align="justify"');
   }
@@ -3465,13 +3576,14 @@ function textXml(node, registry, namespaces, warn) {
   }
   if (style?.wrap) {
     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 (!layout) 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 (!layout) 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 (layout && style?.lineHeight != null) attrs.push(`${LINE_HEIGHT_ATTR}="${trimNumber(style.lineHeight)}"`);
   if (node.fill !== void 0) {
     const paint = node.fill?.paint;
     if (!paint) attrs.push('fill="none"');
@@ -3486,7 +3598,9 @@ function textXml(node, registry, namespaces, warn) {
   }
   const frame = boxTransformAttr(node);
   if (frame) attrs.push(frame);
-  const body = node.runs && node.runs.length > 0 ? node.runs.map((r) => runXml(r, style, registry, warn)).join("") : escapeText(node.text);
+  const pieces = node.runs && node.runs.length > 0 ? node.runs.map((r) => ({ text: r.text, attrs: runAttrs(r, style, registry, warn) })) : [{ text: node.text, attrs: null }];
+  const resolved = resolveTextStyle(style);
+  const body = layout ? laidLinesXml(pieces, layout, { anchor, rtl: direction === "rtl" }) : linesXml(pieces, x, resolved.fontSize * resolved.lineHeight);
   const metaAttrs = metaAttrsXml(node.meta, namespaces);
   const metaEls = metaElementsXml(node.meta, namespaces);
   return `<text ${attrs.join(" ")}${metaAttrs}>${body}${metaEls}</text>`;
@@ -3496,7 +3610,7 @@ function scriptSizeFace(run, style) {
   const face = resolveRunFace(run, resolveTextStyle(style));
   return { family: face.fontFamily, weight: face.fontWeight, style: face.fontStyle };
 }
-function runXml(run, style, registry, warn) {
+function runAttrs(run, style, registry, warn) {
   const attrs = [];
   if (run.fontWeight != null) attrs.push(`font-weight="${run.fontWeight}"`);
   else if (run.bold) attrs.push(`font-weight="700"`);
@@ -3526,8 +3640,7 @@ function runXml(run, style, registry, warn) {
   }
   for (const a of coreStrokeAttrs(run.stroke, registry, warn)) attrs.push(a);
   if (run.textTransform) attrs.push(`style="text-transform:${run.textTransform}"`);
-  const head = attrs.length > 0 ? `<tspan ${attrs.join(" ")}>` : "<tspan>";
-  return `${head}${escapeText(run.text)}</tspan>`;
+  return attrs;
 }
 function textDecorationValue(underline, strikethrough, overline) {
   const tokens = [];
@@ -3536,17 +3649,212 @@ function textDecorationValue(underline, strikethrough, overline) {
   if (overline) tokens.push("overline");
   return tokens.length > 0 ? tokens.join(" ") : null;
 }
-function svgNeeds(nodes) {
+
+// 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() || writesVariableWidth(nodes)) && 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, opts.textLayout)).join("");
+  const titleXml = opts.title && opts.title.length > 0 ? `<title>${escapeText(opts.title)}</title>` : "";
+  const xml = `<svg ${rootAttrs.join(" ")}>${titleXml}${defsXml}${docMetaXml}${bodyXml}</svg>`;
+  return opts.pretty ? prettyXml(xml) : xml;
+}
+function registerPaintServers(nodes, registry) {
+  for (const n of nodes) {
+    if (n.kind === "group") {
+      if (n.clip) registry.clipId(n.clip);
+      registerPaintServers(n.children, registry);
+    } else if (n.kind === "path") {
+      if (n.fill.kind === "gradient") registry.register(n.fill.paint);
+      if (n.stroke && n.stroke.paint.kind === "gradient") registry.register(n.stroke.paint.paint);
+      registerMarkers(n.stroke, registry);
+    } else if (n.kind === "text") {
+      registerTextPaint(n.fill?.paint, registry);
+      registerTextPaint(n.stroke?.paint, registry);
+      registerMarkers(n.stroke, registry);
+      for (const run of n.runs ?? []) {
+        registerTextPaint(run.fill?.paint, registry);
+        registerTextPaint(run.stroke?.paint, registry);
+      }
+    }
+  }
+}
+function registerTextPaint(paint, registry) {
+  if (paint && !isSolidPaint(paint)) registry.register(paint);
+}
+function registerMarkers(stroke, registry) {
+  if (!stroke) return;
+  for (const ref of [stroke.markerStart, stroke.markerMid, stroke.markerEnd]) {
+    if (ref !== void 0) registry.markerId(ref);
+  }
+}
+function nodeXml(node, registry, namespaces, warn, layoutOf) {
+  const xml = kindXml(node, registry, namespaces, warn, layoutOf);
+  if (!node.hidden) return xml;
+  return xml.replace(/^<[\w:]+/, (open) => `${open} display="none"`).replace(/<path (?=[^>]*:role="stroke-outline")/, '<path display="none" ');
+}
+function kindXml(node, registry, namespaces, warn, layoutOf) {
+  if (node.kind === "group") return groupXml(node, registry, namespaces, warn, layoutOf);
+  if (node.kind === "text") return textXml(node, registry, namespaces, warn, layoutOf?.(node));
+  if (node.kind === "image") return imageXml(node, namespaces);
+  const drawn = pathAsSvgDraws(node);
+  return drawn.kind === "group" ? groupXml(drawn, registry, namespaces, warn, layoutOf) : pathXml(drawn, registry, namespaces, warn);
+}
+function imageXml(node, namespaces) {
+  const box = `x="${trimNumber(node.x)}" y="${trimNumber(node.y)}" width="${trimNumber(node.width)}" height="${trimNumber(node.height)}"`;
+  const outer = [];
+  if (node.opacity != null && node.opacity !== 1) {
+    outer.push(`opacity="${trimNumber(node.opacity)}"`);
+  }
+  const frame = boxTransformAttr(node);
+  if (frame) outer.push(frame);
+  const metaAttrs = metaAttrsXml(node.meta, namespaces);
+  const metaEls = metaElementsXml(node.meta, namespaces);
+  const href = `href="${escapeAttr(node.href)}"`;
+  if (!node.source && !node.flipX && !node.flipY) {
+    const attrs = [href, box, 'preserveAspectRatio="none"', ...outer].join(" ");
+    if (metaEls) return `<image ${attrs}${metaAttrs}>${metaEls}</image>`;
+    return `<image ${attrs}${metaAttrs}/>`;
+  }
+  const src = node.source ?? { x: 0, y: 0, width: 1, height: 1 };
+  const viewBox = [src.x, src.y, src.width, src.height].map(trimNumber).join(" ");
+  const flip = node.flipX || node.flipY ? ` transform="matrix(${node.flipX ? -1 : 1} 0 0 ${node.flipY ? -1 : 1} ${trimNumber(node.flipX ? 2 * src.x + src.width : 0)} ${trimNumber(node.flipY ? 2 * src.y + src.height : 0)})"` : "";
+  const head = ['<g data-weasel-image="true"', ...outer].join(" ");
+  return `${head}${metaAttrs}><svg ${box} viewBox="${viewBox}" preserveAspectRatio="none"><image ${href} x="0" y="0" width="1" height="1" preserveAspectRatio="none"${flip}/></svg>${metaEls}</g>`;
+}
+function groupXml(node, registry, namespaces, warn, layoutOf) {
+  const attrs = [];
+  if (node.transform) {
+    const m = formatMatrix(node.transform);
+    if (m) attrs.push(`transform="${m}"`);
+  }
+  if (node.clip) {
+    attrs.push(`clip-path="url(#${registry.clipId(node.clip)})"`);
+  }
+  if (node.opacity != null && node.opacity !== 1) {
+    attrs.push(`opacity="${trimNumber(node.opacity)}"`);
+  }
+  const metaAttrs = metaAttrsXml(node.meta, namespaces);
+  const head = attrs.length > 0 ? `<g ${attrs.join(" ")}${metaAttrs}>` : `<g${metaAttrs}>`;
+  const body = node.children.map((c) => nodeXml(c, registry, namespaces, warn, layoutOf)).join("");
+  return `${head}${body}${metaElementsXml(node.meta, namespaces)}</g>`;
+}
+function pathXml(node, registry, namespaces, warn) {
+  const attrs = [`d="${serializePathD(node.path)}"`];
+  const fillAttrs = paintAttrs(node.fill, "fill", registry);
+  for (const a of fillAttrs) attrs.push(a);
+  if (node.path.kind === "polygon" && node.path.fillRule === "evenodd") {
+    attrs.push(`fill-rule="evenodd"`);
+  }
+  const varies = hasVariableWidth(node.stroke);
+  if (node.stroke) {
+    const strokeAttrs = strokeAttrsFor(node.stroke, registry, varies ? () => {
+    } : warn);
+    for (const a of varies ? variableWidthAttrs(node.stroke, strokeAttrs) : strokeAttrs) attrs.push(a);
+  } else {
+    attrs.push('stroke="none"');
+  }
+  const opacity = node.opacity != null && node.opacity !== 1 ? `opacity="${trimNumber(node.opacity)}"` : null;
+  if (opacity && !varies) attrs.push(opacity);
+  const transform = rotationAttr(node);
+  if (transform) attrs.push(transform);
+  const metaAttrs = metaAttrsXml(node.meta, namespaces);
+  const metaEls = metaElementsXml(node.meta, namespaces);
+  const xml = metaEls ? `<path ${attrs.join(" ")}${metaAttrs}>${metaEls}</path>` : `<path ${attrs.join(" ")}${metaAttrs}/>`;
+  if (!varies) return xml;
+  const both = xml + strokeOutlineXml(node.path, node.stroke, strokePaintAsFillAttrs(node.stroke, registry), transform);
+  return opacity ? strokeGroupXml(opacity, both) : both;
+}
+function rotationAttr(node) {
+  if (node.rotation == null || node.rotation === 0) return null;
+  const b = pathBounds(node.path);
+  const cx = b.minX + (b.maxX - b.minX) / 2;
+  const cy = b.minY + (b.maxY - b.minY) / 2;
+  const deg = node.rotation * 180 / Math.PI;
+  return `transform="rotate(${trimNumber(deg)} ${trimNumber(cx)} ${trimNumber(cy)})"`;
+}
+function svgNeeds(nodes, opts = {}) {
   const registry = new PaintServerRegistry();
   registerPaintServers(nodes, registry);
   const fonts = /* @__PURE__ */ new Map();
+  const add = (face) => fonts.set(`${face.family}|${face.weight}|${face.style}`, face);
   const walk = (list) => {
     for (const n of list) {
       if (n.kind === "group") walk(n.children);
       else if (n.kind === "text") {
+        if (opts.textLayout) layoutFaces(n).forEach(add);
         for (const run of n.runs ?? []) {
           const face = scriptSizeFace(run, n.style);
-          if (face) fonts.set(`${face.family}|${face.weight}|${face.style}`, face);
+          if (face) add(face);
         }
       }
     }
@@ -3554,8 +3862,15 @@ function svgNeeds(nodes) {
   walk(nodes);
   return { fonts: [...fonts.values()], paintKinds: registry.paintKinds() };
 }
-function warmSvg(nodes) {
-  const needs = svgNeeds(nodes);
+function layoutFaces(node) {
+  const style = resolveTextStyle(node.style);
+  return toRuns(node.runs && node.runs.length > 0 ? node.runs : node.text).map((run) => {
+    const face = resolveRunFace(run, style);
+    return { family: face.fontFamily, weight: face.fontWeight, style: face.fontStyle };
+  });
+}
+function warmSvg(nodes, opts = {}) {
+  const needs = svgNeeds(nodes, opts);
   return Promise.all([
     warmFonts(needs.fonts),
     warmPaintKinds(needs.paintKinds.filter(isPaintKindKnown))
@@ -3608,7 +3923,9 @@ function strokeDataFromSvg(stroke, box) {
     ...stroke.miterLimit !== void 0 ? { miterLimit: stroke.miterLimit } : {},
     ...stroke.markerStart !== void 0 ? { markerStart: stroke.markerStart } : {},
     ...stroke.markerMid !== void 0 ? { markerMid: stroke.markerMid } : {},
-    ...stroke.markerEnd !== void 0 ? { markerEnd: stroke.markerEnd } : {}
+    ...stroke.markerEnd !== void 0 ? { markerEnd: stroke.markerEnd } : {},
+    ...stroke.vertexWidths !== void 0 ? { vertexWidths: stroke.vertexWidths } : {},
+    ...stroke.nib !== void 0 ? { nib: stroke.nib } : {}
   };
 }
 function fillInBoxFrame(fill, box) {
@@ -3651,9 +3968,12 @@ function svgNodesToKitDrafts(input, nextId, options = {}) {
         ...n.hidden ? { hidden: true } : {}
       };
       drafts.push(draft);
+      const at = drafts.length - 1;
       const acc = unionAABB(n.children.map((c) => visit(c, draft.id, k)));
       if (!acc) {
-        drafts.splice(drafts.indexOf(draft), 1);
+        const kept = drafts.length > at + 1 || (options.keepEmpty?.(n) ?? false);
+        if (!kept) drafts.splice(at, 1);
+        else if (n.clip) draft.pose = boxOfPath(n.clip);
         return null;
       }
       draft.pose = n.clip ? boxOfPath(n.clip) : acc;
@@ -3737,7 +4057,7 @@ async function unpackSvgFiles(files, ctx) {
   for (const file of files) {
     try {
       const text = await readFileText(file);
-      const parsed = parseSvg(text);
+      const parsed = parseSvg(text, { keepHidden: true });
       for (const w of parsed.warnings) dwarn("ingest", `svg "${file.name}":`, w);
       let drafts = svgNodesToKitDrafts(parsed, () => ctx.scene.mintId());
       if (drafts.length === 0) {
@@ -3782,7 +4102,8 @@ async function unpackSvgFiles(files, ctx) {
             layer,
             pose: place(d.pose),
             data: d.kind === "leaf" ? scaleLeafData(d.data, scale) : d.data,
-            parent: d.parentId
+            parent: d.parentId,
+            ...d.hidden ? { hidden: true } : {}
           },
           label: "Insert SVG"
         })
@@ -3817,7 +4138,9 @@ function svgStrokeFromKit(stroke, box) {
     ...stroke.align !== void 0 ? { align: stroke.align } : {},
     ...stroke.markerStart !== void 0 ? { markerStart: stroke.markerStart } : {},
     ...stroke.markerMid !== void 0 ? { markerMid: stroke.markerMid } : {},
-    ...stroke.markerEnd !== void 0 ? { markerEnd: stroke.markerEnd } : {}
+    ...stroke.markerEnd !== void 0 ? { markerEnd: stroke.markerEnd } : {},
+    ...stroke.vertexWidths?.length ? { vertexWidths: stroke.vertexWidths } : {},
+    ...stroke.nib ? { nib: stroke.nib } : {}
   };
 }
 function svgImageFromKit(image, pose) {
@@ -3851,22 +4174,12 @@ function runInPoseFrame(run, box) {
 function svgLeafFromKit(data, pose) {
   if (data.image) return svgImageFromKit(data.image, pose);
   if (data.text != null) {
-    const node2 = {
-      kind: "text",
-      x: pose.x,
-      y: pose.y,
-      width: pose.width,
-      height: pose.height,
-      text: data.text
-    };
-    if (data.style) node2.style = data.style;
-    if (data.runs) node2.runs = data.runs.map((r) => runInPoseFrame(r, pose));
-    if (data.verticalAlign) node2.verticalAlign = data.verticalAlign;
-    if (data.fill !== void 0) node2.fill = data.fill && 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;
+    const text = svgTextFromKit({ ...data, text: data.text }, pose);
+    const boxPath = { kind: "rect", x: pose.x, y: pose.y, width: pose.width, height: pose.height };
+    const clip = data.overflow === "clip" ? { clip: pathThroughPoseFrame(boxPath, pose) } : {};
+    if (!data.background?.paint) return clip.clip ? { kind: "group", children: [text], ...clip } : text;
+    const box = svgLeafFromKit({ path: boxPath, fill: data.background }, pose);
+    return { kind: "group", children: [box, text], ...clip };
   }
   if (!data.path) return null;
   const stroke = svgStrokeFromKit(data.stroke, pose);
@@ -3885,21 +4198,53 @@ function svgLeafFromKit(data, pose) {
   } else if (pose.rotation) node.rotation = pose.rotation;
   return node;
 }
+function svgTextFromKit(data, pose) {
+  const pad = Math.max(0, Math.min(data.padding ?? 0, pose.width / 2, pose.height / 2));
+  const node = {
+    kind: "text",
+    x: pose.x + pad,
+    y: pose.y + pad,
+    width: pose.width - 2 * pad,
+    height: pose.height - 2 * pad,
+    text: data.text
+  };
+  if (data.style) node.style = data.style;
+  if (data.runs) node.runs = data.runs.map((r) => runInPoseFrame(r, pose));
+  if (data.verticalAlign) node.verticalAlign = data.verticalAlign;
+  if (data.fill !== void 0) node.fill = data.fill && mapFillPaint(data.fill, (p) => fillInPoseFrame(p, pose));
+  if (data.stroke) node.stroke = strokeInPoseFrame(data.stroke, pose);
+  if (pose.rotation) node.rotation = pose.rotation;
+  if (pose.transform) node.transform = pose.transform;
+  return node;
+}
 function svgNodesFromKit(tree, options = {}) {
   const { include, leaf, group } = options;
   const emit = (id) => {
-    if (include && !include(id)) return null;
     const node = tree.get(id);
-    if (!node) return null;
+    const out2 = node && (!include || include(id)) ? lower(id, node) : null;
+    return out2 && node?.hidden === true ? { ...out2, hidden: true } : out2;
+  };
+  const lower = (id, node) => {
     if (node.kind === "container") {
-      const children = [];
-      for (const c of tree.childrenOf(id)) {
-        const child = emit(c);
-        if (child) children.push(child);
+      const emitChildren = () => {
+        const children = [];
+        for (const c of tree.childrenOf(id)) {
+          const child = emit(c);
+          if (child) children.push(child);
+        }
+        return children;
+      };
+      const path = node.data?.path;
+      const clip = path ? pathThroughPoseFrame(pathInPoseFrame(path, node.pose), node.pose) : void 0;
+      const copies = node.copiesFromPose?.(node.pose, node) ?? [];
+      const content = () => ({ kind: "group", children: emitChildren(), ...clip ? { clip } : {} });
+      let g = content();
+      if (copies.length > 0) {
+        g = {
+          kind: "group",
+          children: [g, ...copies.map((transform) => ({ kind: "group", transform, children: [content()] }))]
+        };
       }
-      const g = { kind: "group", children };
-      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);
@@ -3912,6 +4257,6 @@ function svgNodesFromKit(tree, options = {}) {
   return out;
 }
 
-export { DEFAULT_MEDIA_ENVIRONMENT, IDENTITY_MATRIX, evaluateMediaQuery, evaluateSupports, fillDataFromSvg, nativeSvgKind, nativeSvgSpace, parseSvg, serializeSvg, strokeDataFromSvg, svgImageFromKit, svgLeafFromKit, svgNeeds, svgNodesFromKit, svgNodesToKitDrafts, svgPaintFromKit, svgStrokeFromKit, tilePreviewCssUrl, tilePreviewSvg, unpackSvgFiles, warmSvg };
+export { DEFAULT_MEDIA_ENVIRONMENT, IDENTITY_MATRIX, evaluateMediaQuery, evaluateSupports, fillDataFromSvg, nativeSvgKind, nativeSvgSpace, parseSvg, serializePathD, serializeSvg, strokeDataFromSvg, svgImageFromKit, svgLeafFromKit, svgNeeds, svgNodesFromKit, svgNodesToKitDrafts, svgPaintFromKit, svgStrokeFromKit, tilePreviewCssUrl, tilePreviewSvg, unpackSvgFiles, warmSvg };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map