@weasel-js/svg 1.10.0 → 1.10.1

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 { isTileKind, boundsOfPath, transformPath, isSolidPaint, warmFonts, warmPaintKinds, isPaintKindKnown, solid, fillToBoundsFrame, getMarker, registerMarker, dwarn, unionAABB, createInsertOp, fillInPoseFrame, DEFAULT_SHAPE_FILL, pathInPoseFrame, poseLinearOf, poseFrameOf, pathThroughPoseFrame, DEFAULT_TEXT_STYLE, resolveScreenLength, pathFromD, isPatternPaint, resolveTextStyle, PATH_M, PATH_L, PATH_C, PATH_Q, PATH_Z, resolveRunFace, parseColor, rgbaToHex, layoutRuns, resolveRuns, resolveAlign, PathBuilder, getPaintKind, resolveMarkerSize, paragraphDirection, scriptMetricsFor, isTilePaint, tileSpecOf } from '@weasel-js/core';
 import { tileGeometry } from '@weasel-js/core/patterns-builtin';
 
 // src/types.ts
@@ -1548,9 +1548,9 @@ function warnUnmodeled(el, elements, onWarn) {
       break;
     }
   }
-  const spread = inheritedAttr(el, elements, "spreadMethod");
-  if (spread === "reflect" || spread === "repeat") {
-    onWarn?.(`spreadMethod="${spread}" is not modeled; the gradient pads`);
+  const spread2 = inheritedAttr(el, elements, "spreadMethod");
+  if (spread2 === "reflect" || spread2 === "repeat") {
+    onWarn?.(`spreadMethod="${spread2}" is not modeled; the gradient pads`);
   }
 }
 function coord(el, elements, name, axis, fraction, units, onWarn) {
@@ -2238,6 +2238,31 @@ function anchorOffset(style, width2, text) {
 }
 
 // src/tspanLines.ts
+var LINES_ATTR = "data-weasel-lines";
+var statesLines = (tspan) => tspan.hasAttribute(LINES_ATTR);
+function linesXml(pieces, x, pitch) {
+  let out = "";
+  let pending = 0;
+  let wrote = false;
+  const tspan = (attrs, text) => `<tspan${attrs.map((a) => ` ${a}`).join("")}>${escapeText(text)}</tspan>`;
+  const lineAttrs = () => {
+    if (pending === 0) return [];
+    const attrs = [`x="${trimNumber(x)}"`, `dy="${trimNumber(pending * pitch)}"`];
+    if (pending > 1 || !wrote) attrs.push(`${LINES_ATTR}="${pending}"`);
+    pending = 0;
+    return attrs;
+  };
+  for (const piece of pieces) {
+    piece.text.split(/[\n\u000B\u000C]/).forEach((line, i) => {
+      if (i > 0) pending++;
+      if (line === "") return;
+      const attrs = [...piece.attrs ?? [], ...lineAttrs()];
+      out += piece.attrs === null && attrs.length === 0 ? escapeText(line) : tspan(attrs, line);
+      wrote = true;
+    });
+  }
+  return pending > 0 ? out + tspan(lineAttrs(), "") : out;
+}
 var DEFAULT_LINE_HEIGHT = 1.2;
 var LineTracker = class {
   constructor(text, onWarn) {
@@ -2250,9 +2275,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 +2285,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));
+    const lines = Number.isInteger(stated) && stated > 0 ? stated : 1;
+    if (afterText && this.at > from) this.pitches.push((this.at - from) / lines);
+    return lines;
   }
   /**
    * The line height the lines were pitched at, as a multiple of `fontSize`:
@@ -2278,7 +2304,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,35 +2314,88 @@ function warnUnreadPositions(el, onWarn) {
     const raw = el.getAttribute(name)?.trim() ?? "";
     if (/[\s,]/.test(raw)) onWarn(`<${tag} ${name}="${raw}"> positions each glyph; only the first value is read`);
   }
-  for (const name of ["dx", "rotate"]) {
+  for (const name of tag === "tspan" ? ["rotate"] : ["dx", "rotate"]) {
     const raw = el.getAttribute(name)?.trim() ?? "";
     if (raw.split(/[\s,]+/).some((v) => parseFloat(v) !== 0 && v !== "")) {
       onWarn(`<${tag} ${name}="${raw}"> is not read; the glyphs keep their own advance and angle`);
     }
   }
 }
-function joinLines(lines) {
+function sameStyle(a, b) {
+  const style = (run) => JSON.stringify(
+    Object.entries(run).filter(([k, v]) => k !== "text" && v !== void 0).sort(([j], [k]) => j < k ? -1 : 1)
+  );
+  return style(a) === style(b);
+}
+function joinLines(lines, leading = 0) {
   const out = [];
-  let breaks = 0;
+  let breaks = leading;
   for (const line of lines) {
     if (line.length > 0) {
-      if (breaks > 0) line[0] = { ...line[0], text: "\n".repeat(breaks) + line[0].text };
-      out.push(...line);
+      const [first, ...rest] = line;
+      const head = breaks > 0 ? { ...first, text: "\n".repeat(breaks) + first.text } : first;
+      const last = out[out.length - 1];
+      if (breaks > 0 && last && sameStyle(last, head)) {
+        out[out.length - 1] = { ...last, text: last.text + head.text };
+      } else {
+        out.push(head);
+      }
+      out.push(...rest);
       breaks = 0;
     }
     if (out.length > 0) breaks++;
   }
   return out;
 }
-
-// src/fillPaint.ts
-function mapFillPaint(fill, f) {
-  if (!fill.paint) return fill;
-  const paint = f(fill.paint);
-  return paint === fill.paint ? fill : { ...fill, paint };
+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 +2432,15 @@ function collapseRunWhitespace(runs) {
     if (runs[i].text === "") runs.splice(i, 1);
   }
 }
+
+// src/fillPaint.ts
+function mapFillPaint(fill, f) {
+  if (!fill.paint) return fill;
+  const paint = f(fill.paint);
+  return paint === fill.paint ? fill : { ...fill, paint };
+}
+
+// src/readText.ts
 var ESTIMATED_GLYPH_ADVANCE_EM = 0.6;
 function laidOutWidth(runs, style, plain) {
   const resolved = resolveTextStyle(style);
@@ -2411,33 +2499,8 @@ function parseTextElement(el, ctm, style, gradients, onWarn) {
   const explicitTopAnchor = dominantBaseline === "text-before-edge" || dominantBaseline === "hanging";
   const topY = explicitTopAnchor ? ay : ay - fontSize;
   const inheritedShift = ownValue(el, "baseline-shift", onWarn) ?? {};
-  const runLines = [[]];
   const tracker = new LineTracker(el, 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);
   if (pitched !== void 0) textStyle.lineHeight = pitched;
@@ -2450,7 +2513,7 @@ function parseTextElement(el, ctm, style, gradients, onWarn) {
   const opacity = ownValue(el, "opacity");
   const node = {
     kind: "text",
-    x: ax - anchorOffset(textStyle, width2, plain),
+    x: ax + lead - anchorOffset(textStyle, width2, plain),
     y: topY,
     width: width2,
     height: height2,
@@ -2476,6 +2539,38 @@ function parseTextElement(el, ctm, style, gradients, onWarn) {
   placeTextNode(node, multiply(ctm, localTransform), onWarn);
   return node;
 }
+function readRuns(el, tracker, inheritedShift, letterSpacing, gradients, leafStyle, onWarn) {
+  const runLines = [[]];
+  let leading = 0;
+  let lead = 0;
+  const push = (run) => {
+    runLines[runLines.length - 1].push(run);
+  };
+  for (let i = 0; i < el.childNodes.length; i++) {
+    const child = el.childNodes[i];
+    if (child.nodeType === 3) {
+      const t = child.textContent ?? "";
+      if (!t) continue;
+      push({ text: t, ...inheritedShift });
+    } else if (child.nodeType === 1) {
+      const sp = child;
+      if (sp.tagName.toLowerCase() !== "tspan") {
+        onWarn(`<text> child <${sp.tagName}> not supported; flattening text content`);
+        const t = sp.textContent ?? "";
+        if (t) push({ text: t, ...inheritedShift });
+        continue;
+      }
+      warnUnreadPositions(sp, onWarn);
+      const afterText = runLines.some((line) => line.some((r) => r.text.trim() !== ""));
+      const lines = tracker.startsLine(sp, afterText);
+      if (runLines.length === 1 && runLines[0].length === 0 && statesLines(sp)) leading = lines;
+      else for (let n = 0; n < lines; n++) runLines.push([]);
+      lead += placeTspanRun(sp, readTspanRun(sp, gradients, leafStyle, onWarn), runLines, letterSpacing, onWarn);
+    }
+  }
+  if (!preservesSpace(el)) for (const line of runLines) collapseRunWhitespace(line);
+  return { runs: joinLines(runLines, leading), lead };
+}
 function readTspanRun(el, gradients, style, onWarn) {
   const text = el.textContent ?? "";
   const run = { text };
@@ -3132,25 +3227,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,6 +3276,200 @@ function withOpenSubpathsUnfilled(node) {
   if (node.meta) group.meta = node.meta;
   return group;
 }
+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 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 svgPaintOpacity(paint) {
+  if (paint.kind === "solid") return paint.opacity;
+  return paint.kind === "gradient" ? paint.paint.opacity : void 0;
+}
+function opacityAttr(name, v) {
+  return v != null && v !== 1 ? [`${name}="${trimNumber(v)}"`] : [];
+}
+function strokeWidthAttrs(width2) {
+  if (typeof width2 === "number") return [`stroke-width="${trimNumber(width2)}"`];
+  return [`stroke-width="${trimNumber(width2.px)}"`, 'vector-effect="non-scaling-stroke"'];
+}
+function coreStrokeAttrs(stroke, registry, warn) {
+  const paint = stroke?.paint;
+  if (!stroke || !paint) return [];
+  const width2 = stroke.width ?? 1;
+  if (!((typeof width2 === "object" ? width2.px : width2) > 0)) return [];
+  warnStrokeAlign(stroke.align, warn);
+  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}"`);
+  if (stroke.join) attrs.push(`stroke-linejoin="${stroke.join}"`);
+  if (stroke.dash && stroke.dash.length > 0) {
+    attrs.push(`stroke-dasharray="${stroke.dash.map(trimNumber).join(" ")}"`);
+  }
+  if (stroke.miterLimit != null) attrs.push(`stroke-miterlimit="${trimNumber(stroke.miterLimit)}"`);
+  for (const [field, attr] of [
+    ["markerStart", "marker-start"],
+    ["markerMid", "marker-mid"],
+    ["markerEnd", "marker-end"]
+  ]) {
+    const ref = stroke[field];
+    if (ref === void 0) continue;
+    const id = registry.markerId(ref);
+    if (id === void 0) continue;
+    attrs.push(`${attr}="url(#${id})"`);
+  }
+  return attrs;
+}
+function strokeAttrsFor(stroke, registry, warn) {
+  warnStrokeAlign(stroke.align, warn);
+  const attrs = paintAttrs(stroke.paint, "stroke", registry, false);
+  attrs.push(...strokeWidthAttrs(stroke.width));
+  attrs.push(...opacityAttr("stroke-opacity", stroke.opacity ?? svgPaintOpacity(stroke.paint)));
+  if (stroke.cap) {
+    attrs.push(`stroke-linecap="${stroke.cap}"`);
+  }
+  if (stroke.join) {
+    attrs.push(`stroke-linejoin="${stroke.join}"`);
+  }
+  if (stroke.dash && stroke.dash.length > 0) {
+    attrs.push(`stroke-dasharray="${stroke.dash.map(trimNumber).join(" ")}"`);
+  }
+  if (stroke.miterLimit != null) {
+    attrs.push(`stroke-miterlimit="${trimNumber(stroke.miterLimit)}"`);
+  }
+  for (const [field, attr] of [
+    ["markerStart", "marker-start"],
+    ["markerMid", "marker-mid"],
+    ["markerEnd", "marker-end"]
+  ]) {
+    const ref = stroke[field];
+    if (ref === void 0) continue;
+    const id = registry.markerId(ref);
+    if (id === void 0) continue;
+    attrs.push(`${attr}="url(#${id})"`);
+  }
+  return attrs;
+}
+function textXml(node, registry, namespaces, warn) {
+  const x = node.x + anchorOffset(node.style, node.width, node.text);
+  const attrs = [
+    `x="${trimNumber(x)}"`,
+    `y="${trimNumber(node.y)}"`,
+    `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)}"`
+  ];
+  const style = node.style;
+  if (style?.fontSize != null) attrs.push(`font-size="${trimNumber(resolveScreenLength(style.fontSize, 1))}"`);
+  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 = 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";
+    if (anchor !== "start") attrs.push(`text-anchor="${anchor}"`);
+    if (align === "justify") attrs.push('data-weasel-align="justify"');
+  }
+  if (style?.letterSpacing != null && style.letterSpacing !== 0) {
+    attrs.push(`letter-spacing="${trimNumber(resolveScreenLength(style.letterSpacing, 1))}"`);
+  }
+  const decoration = textDecorationValue(style?.underline, style?.strikethrough, style?.overline);
+  if (decoration) attrs.push(`text-decoration="${decoration}"`);
+  if (style?.script) attrs.push(`baseline-shift="${style.script}"`);
+  if (style?.textTransform && style.textTransform !== "none") {
+    attrs.push(`style="text-transform:${style.textTransform}"`);
+  }
+  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 (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 !== 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)}"`);
+  }
+  const frame = boxTransformAttr(node);
+  if (frame) attrs.push(frame);
+  const pieces = node.runs && node.runs.length > 0 ? node.runs.map((r) => ({ text: r.text, attrs: runAttrs(r, style, registry, warn) })) : [{ text: node.text, attrs: null }];
+  const resolved = resolveTextStyle(style);
+  const body = linesXml(pieces, x, resolved.fontSize * resolved.lineHeight);
+  const metaAttrs = metaAttrsXml(node.meta, namespaces);
+  const metaEls = metaElementsXml(node.meta, namespaces);
+  return `<text ${attrs.join(" ")}${metaAttrs}>${body}${metaEls}</text>`;
+}
+function scriptSizeFace(run, style) {
+  if (run.script == null || run.baselineShift == null) return void 0;
+  const face = resolveRunFace(run, resolveTextStyle(style));
+  return { family: face.fontFamily, weight: face.fontWeight, style: face.fontStyle };
+}
+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"`);
+  if (run.italic) attrs.push(`font-style="italic"`);
+  if (run.fontVariantCaps) attrs.push(`font-variant="${run.fontVariantCaps}"`);
+  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;
+  if (run.fontSize != null) attrs.push(`font-size="${trimNumber(resolveScreenLength(run.fontSize, 1))}"`);
+  else if (scale != null) attrs.push(`font-size="${trimNumber(scale * 100)}%"`);
+  if (run.baselineShift != null) {
+    attrs.push(`baseline-shift="${trimNumber(run.baselineShift * 100)}%"`);
+  } else if (run.script) {
+    attrs.push(`baseline-shift="${run.script}"`);
+  }
+  if (run.letterSpacing != null) {
+    attrs.push(`letter-spacing="${trimNumber(resolveScreenLength(run.letterSpacing, 1))}"`);
+  }
+  const runDecoration = textDecorationValue(run.underline, run.strikethrough, run.overline);
+  if (runDecoration) attrs.push(`text-decoration="${runDecoration}"`);
+  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}"`);
+  return attrs;
+}
+function textDecorationValue(underline, strikethrough, overline) {
+  const tokens = [];
+  if (underline) tokens.push("underline");
+  if (strikethrough) tokens.push("line-through");
+  if (overline) tokens.push("overline");
+  return tokens.length > 0 ? tokens.join(" ") : null;
+}
 
 // src/prettyXml.ts
 var TOKEN2 = /<(?:[^>"]|"[^"]*")*>|[^<]+/g;
@@ -3277,14 +3586,9 @@ 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);
+  const drawn = pathAsSvgDraws(node);
   return drawn.kind === "group" ? groupXml(drawn, registry, namespaces, warn) : pathXml(drawn, registry, namespaces, warn);
 }
-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 = [];
@@ -3354,188 +3658,6 @@ function pathXml(node, registry, namespaces, warn) {
   }
   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 svgPaintOpacity(paint) {
-  if (paint.kind === "solid") return paint.opacity;
-  return paint.kind === "gradient" ? paint.paint.opacity : void 0;
-}
-function opacityAttr(name, v) {
-  return v != null && v !== 1 ? [`${name}="${trimNumber(v)}"`] : [];
-}
-function strokeWidthAttrs(width2) {
-  if (typeof width2 === "number") return [`stroke-width="${trimNumber(width2)}"`];
-  return [`stroke-width="${trimNumber(width2.px)}"`, 'vector-effect="non-scaling-stroke"'];
-}
-function coreStrokeAttrs(stroke, registry, warn) {
-  const paint = stroke?.paint;
-  if (!stroke || !paint) return [];
-  const width2 = stroke.width ?? 1;
-  if (!((typeof width2 === "object" ? width2.px : width2) > 0)) return [];
-  warnStrokeAlign(stroke.align, warn);
-  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}"`);
-  if (stroke.join) attrs.push(`stroke-linejoin="${stroke.join}"`);
-  if (stroke.dash && stroke.dash.length > 0) {
-    attrs.push(`stroke-dasharray="${stroke.dash.map(trimNumber).join(" ")}"`);
-  }
-  if (stroke.miterLimit != null) attrs.push(`stroke-miterlimit="${trimNumber(stroke.miterLimit)}"`);
-  for (const [field, attr] of [
-    ["markerStart", "marker-start"],
-    ["markerMid", "marker-mid"],
-    ["markerEnd", "marker-end"]
-  ]) {
-    const ref = stroke[field];
-    if (ref === void 0) continue;
-    const id = registry.markerId(ref);
-    if (id === void 0) continue;
-    attrs.push(`${attr}="url(#${id})"`);
-  }
-  return attrs;
-}
-function strokeAttrsFor(stroke, registry, warn) {
-  warnStrokeAlign(stroke.align, warn);
-  const attrs = paintAttrs(stroke.paint, "stroke", registry, false);
-  attrs.push(...strokeWidthAttrs(stroke.width));
-  attrs.push(...opacityAttr("stroke-opacity", stroke.opacity ?? svgPaintOpacity(stroke.paint)));
-  if (stroke.cap) {
-    attrs.push(`stroke-linecap="${stroke.cap}"`);
-  }
-  if (stroke.join) {
-    attrs.push(`stroke-linejoin="${stroke.join}"`);
-  }
-  if (stroke.dash && stroke.dash.length > 0) {
-    attrs.push(`stroke-dasharray="${stroke.dash.map(trimNumber).join(" ")}"`);
-  }
-  if (stroke.miterLimit != null) {
-    attrs.push(`stroke-miterlimit="${trimNumber(stroke.miterLimit)}"`);
-  }
-  for (const [field, attr] of [
-    ["markerStart", "marker-start"],
-    ["markerMid", "marker-mid"],
-    ["markerEnd", "marker-end"]
-  ]) {
-    const ref = stroke[field];
-    if (ref === void 0) continue;
-    const id = registry.markerId(ref);
-    if (id === void 0) continue;
-    attrs.push(`${attr}="url(#${id})"`);
-  }
-  return attrs;
-}
-function textXml(node, registry, namespaces, warn) {
-  const attrs = [
-    `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
-    // handling would collapse them (and any indentation) away on re-import.
-    `xml:space="preserve"`,
-    `data-weasel-width="${trimNumber(node.width)}"`,
-    `data-weasel-height="${trimNumber(node.height)}"`
-  ];
-  const style = node.style;
-  if (style?.fontSize != null) attrs.push(`font-size="${trimNumber(resolveScreenLength(style.fontSize, 1))}"`);
-  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 = 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";
-    if (anchor !== "start") attrs.push(`text-anchor="${anchor}"`);
-    if (align === "justify") attrs.push('data-weasel-align="justify"');
-  }
-  if (style?.letterSpacing != null && style.letterSpacing !== 0) {
-    attrs.push(`letter-spacing="${trimNumber(resolveScreenLength(style.letterSpacing, 1))}"`);
-  }
-  const decoration = textDecorationValue(style?.underline, style?.strikethrough, style?.overline);
-  if (decoration) attrs.push(`text-decoration="${decoration}"`);
-  if (style?.script) attrs.push(`baseline-shift="${style.script}"`);
-  if (style?.textTransform && style.textTransform !== "none") {
-    attrs.push(`style="text-transform:${style.textTransform}"`);
-  }
-  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 (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 !== 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)}"`);
-  }
-  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);
-  return `<text ${attrs.join(" ")}${metaAttrs}>${body}${metaEls}</text>`;
-}
-function scriptSizeFace(run, style) {
-  if (run.script == null || run.baselineShift == null) return void 0;
-  const face = resolveRunFace(run, resolveTextStyle(style));
-  return { family: face.fontFamily, weight: face.fontWeight, style: face.fontStyle };
-}
-function runXml(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"`);
-  if (run.italic) attrs.push(`font-style="italic"`);
-  if (run.fontVariantCaps) attrs.push(`font-variant="${run.fontVariantCaps}"`);
-  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;
-  if (run.fontSize != null) attrs.push(`font-size="${trimNumber(resolveScreenLength(run.fontSize, 1))}"`);
-  else if (scale != null) attrs.push(`font-size="${trimNumber(scale * 100)}%"`);
-  if (run.baselineShift != null) {
-    attrs.push(`baseline-shift="${trimNumber(run.baselineShift * 100)}%"`);
-  } else if (run.script) {
-    attrs.push(`baseline-shift="${run.script}"`);
-  }
-  if (run.letterSpacing != null) {
-    attrs.push(`letter-spacing="${trimNumber(resolveScreenLength(run.letterSpacing, 1))}"`);
-  }
-  const runDecoration = textDecorationValue(run.underline, run.strikethrough, run.overline);
-  if (runDecoration) attrs.push(`text-decoration="${runDecoration}"`);
-  if (run.fill !== void 0) {
-    const paint = run.fill?.paint;
-    if (!paint) attrs.push('fill="none"');
-    else if (isSolidPaint(paint)) attrs.push(`fill="${escapeAttr(paint.color)}"`);
-    else attrs.push(`fill="${registry.ref(paint)}"`);
-  }
-  for (const a of coreStrokeAttrs(run.stroke, registry, warn)) attrs.push(a);
-  if (run.textTransform) attrs.push(`style="text-transform:${run.textTransform}"`);
-  const head = attrs.length > 0 ? `<tspan ${attrs.join(" ")}>` : "<tspan>";
-  return `${head}${escapeText(run.text)}</tspan>`;
-}
-function textDecorationValue(underline, strikethrough, overline) {
-  const tokens = [];
-  if (underline) tokens.push("underline");
-  if (strikethrough) tokens.push("line-through");
-  if (overline) tokens.push("overline");
-  return tokens.length > 0 ? tokens.join(" ") : null;
-}
 function svgNeeds(nodes) {
   const registry = new PaintServerRegistry();
   registerPaintServers(nodes, registry);
@@ -3892,14 +4014,25 @@ function svgNodesFromKit(tree, options = {}) {
     const node = tree.get(id);
     if (!node) return null;
     if (node.kind === "container") {
-      const children = [];
-      for (const c of tree.childrenOf(id)) {
-        const child = emit(c);
-        if (child) children.push(child);
+      const emitChildren = () => {
+        const children = [];
+        for (const c of tree.childrenOf(id)) {
+          const child = emit(c);
+          if (child) children.push(child);
+        }
+        return children;
+      };
+      const path = node.data?.path;
+      const clip = path ? pathThroughPoseFrame(pathInPoseFrame(path, node.pose), node.pose) : void 0;
+      const copies = node.copiesFromPose?.(node.pose, node) ?? [];
+      const content = () => ({ kind: "group", children: emitChildren(), ...clip ? { clip } : {} });
+      let g = content();
+      if (copies.length > 0) {
+        g = {
+          kind: "group",
+          children: [g, ...copies.map((transform) => ({ kind: "group", transform, children: [content()] }))]
+        };
       }
-      const g = { kind: "group", children };
-      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);