@weasel-js/svg 1.10.1 → 1.11.1

package/dist/index.js

@@ -1,5 +1,6 @@
-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 { identity, multiply, pathToD, invert, splitByClosure, fillsOpenSubpaths, rotateAboutPoint, hasOpenSubpath, splitSubpaths } from '@weasel-js/geom';
+export { pathToD as serializePathD } from '@weasel-js/geom';
+import { 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, PATH_M, PATH_L, PATH_Z, 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 +178,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,39 +1384,6 @@ 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) {
-  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`;
-  }
-  const cmds = path.commands;
-  const xs = path.coords;
-  const out = [];
-  let ci = 0;
-  for (let i = 0; i < cmds.length; i++) {
-    const c = cmds[i];
-    if (c === PATH_M) {
-      out.push(`M${trimNumber(xs[ci])} ${trimNumber(xs[ci + 1])}`);
-      ci += 2;
-    } else if (c === PATH_L) {
-      out.push(`L${trimNumber(xs[ci])} ${trimNumber(xs[ci + 1])}`);
-      ci += 2;
-    } else if (c === PATH_C) {
-      out.push(
-        `C${trimNumber(xs[ci])} ${trimNumber(xs[ci + 1])} ${trimNumber(xs[ci + 2])} ${trimNumber(xs[ci + 3])} ${trimNumber(xs[ci + 4])} ${trimNumber(xs[ci + 5])}`
-      );
-      ci += 6;
-    } else if (c === PATH_Q) {
-      out.push(
-        `Q${trimNumber(xs[ci])} ${trimNumber(xs[ci + 1])} ${trimNumber(xs[ci + 2])} ${trimNumber(xs[ci + 3])}`
-      );
-      ci += 4;
-    } else if (c === PATH_Z) {
-      out.push("Z");
-    }
-  }
-  return out.join("");
-}
 
 // src/gradients.ts
 var WEASEL_NS = "urn:weasel-js:svg";
@@ -1719,7 +1689,7 @@ var PaintServerRegistry = class {
     }
     for (const path of this.clips) {
       parts.push(
-        `<clipPath id="${this.clipIds.get(path)}"><path d="${serializePathD(path)}"/></clipPath>`
+        `<clipPath id="${this.clipIds.get(path)}"><path d="${pathToD(path)}"/></clipPath>`
       );
     }
     parts.push("</defs>");
@@ -1733,7 +1703,7 @@ function defaultMarkerXml(id, entry, onWarn, key, size) {
   const name = key ?? id;
   const unit = size === void 0 ? 1 : resolveMarkerSize({ key: name, size }, 1);
   const path = entry.path({ size: unit, stroke: { paint: { kind: "solid", color: "#000" } } });
-  const d = serializePathD(path);
+  const d = pathToD(path);
   const fill = markerPaintAttrs("fill", entry.fill, id, onWarn);
   const outline = entry.outline ? ` ${markerPaintAttrs("stroke", entry.outline.paint, id, onWarn)} stroke-width="${trimNumber(entry.outline.width * unit)}" stroke-linecap="round" stroke-linejoin="round"` : "";
   const orient = typeof entry.orient === "number" ? trimNumber(entry.orient * 180 / Math.PI) : "auto-start-reverse";
@@ -2096,6 +2066,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="${pathToD(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;
@@ -2239,6 +2300,7 @@ 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 = "";
@@ -2286,9 +2348,9 @@ var LineTracker = class {
     const dy = readLength(tspan, "dy", "y", 0, this.onWarn);
     this.at = (y != null ? readLength(tspan, "y", "y", from, this.onWarn) : from) + dy;
     if (!tspan.hasAttribute("x") || !(movedY || dy !== 0)) return 0;
-    const stated = Number(tspan.getAttribute(LINES_ATTR));
-    const lines = Number.isInteger(stated) && stated > 0 ? stated : 1;
-    if (afterText && this.at > from) this.pitches.push((this.at - from) / lines);
+    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;
   }
   /**
@@ -2308,13 +2370,17 @@ var LineTracker = class {
     return Math.abs(lineHeight - DEFAULT_LINE_HEIGHT) < 1e-6 ? void 0 : lineHeight;
   }
 };
+var holdsOnlyText = (el) => !Array.from(el.childNodes).some(
+  (child) => child.nodeType === 1
+  /* ELEMENT_NODE */
+);
 function warnUnreadPositions(el, onWarn) {
   const tag = el.tagName.toLowerCase();
   for (const name of ["x", "y"]) {
     const raw = el.getAttribute(name)?.trim() ?? "";
     if (/[\s,]/.test(raw)) onWarn(`<${tag} ${name}="${raw}"> positions each glyph; only the first value is read`);
   }
-  for (const name of tag === "tspan" ? ["rotate"] : ["dx", "rotate"]) {
+  for (const name of tag === "tspan" || holdsOnlyText(el) ? ["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`);
@@ -2347,6 +2413,76 @@ function joinLines(lines, leading = 0) {
   }
   return out;
 }
+
+// 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();
@@ -2375,8 +2511,9 @@ function placeTspanRun(tspan, run, lines, inherited2, onWarn) {
     return 0;
   }
   const raw = tspan.getAttribute("dx");
+  const tag = tspan.tagName.toLowerCase();
   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`);
+    onWarn(`<${tag} dx="${raw}"> is not read: its text has white space SVG collapses, which moves the glyphs the list names`);
     line.push(run);
     return 0;
   }
@@ -2389,7 +2526,7 @@ function placeTspanRun(tspan, run, lines, inherited2, onWarn) {
   } 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`);
+    onWarn(`<${tag} 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;
@@ -2455,6 +2592,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;
@@ -2496,13 +2637,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 tracker = new LineTracker(el, onWarn);
   const { runs, lead } = readRuns(el, tracker, inheritedShift, textStyle.letterSpacing, gradients, leafStyle, onWarn);
   const plain = runs.map((r) => r.text).join("");
-  const pitched = tracker.lineHeight(fontSize);
+  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);
@@ -2546,7 +2688,10 @@ function readRuns(el, tracker, inheritedShift, letterSpacing, gradients, leafSty
   const push = (run) => {
     runLines[runLines.length - 1].push(run);
   };
-  for (let i = 0; i < el.childNodes.length; i++) {
+  if (holdsOnlyText(el) && el.hasAttribute("dx")) {
+    const t = el.textContent ?? "";
+    if (t) lead = placeTspanRun(el, { text: t, ...inheritedShift }, runLines, letterSpacing, onWarn);
+  } else for (let i = 0; i < el.childNodes.length; i++) {
     const child = el.childNodes[i];
     if (child.nodeType === 3) {
       const t = child.textContent ?? "";
@@ -3017,10 +3162,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;
@@ -3113,7 +3258,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`);
@@ -3292,6 +3437,12 @@ function paintAttrs(paint, name, registry, includeOpacity = true) {
   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;
@@ -3361,12 +3512,13 @@ 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(x)}"`,
     `y="${trimNumber(node.y)}"`,
-    `dominant-baseline="text-before-edge"`,
+    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"`,
@@ -3381,9 +3533,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"');
   }
@@ -3398,13 +3551,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"');
@@ -3421,7 +3575,7 @@ function textXml(node, registry, namespaces, warn) {
   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 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>`;
@@ -3518,7 +3672,7 @@ function serializeSvg(nodes, opts = {}) {
   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) {
+  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)) {
@@ -3544,7 +3698,7 @@ function serializeSvg(nodes, opts = {}) {
     said.add(m);
     opts.onWarn(m);
   };
-  const bodyXml = nodes.map((n) => nodeXml(n, registry, namespaces, warn)).join("");
+  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;
@@ -3578,16 +3732,17 @@ function registerMarkers(stroke, registry) {
     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 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) {
-  if (node.kind === "group") return groupXml(node, registry, namespaces, warn);
-  if (node.kind === "text") return textXml(node, registry, namespaces, warn);
+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) : pathXml(drawn, registry, namespaces, warn);
+  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)}"`;
@@ -3611,7 +3766,7 @@ function imageXml(node, namespaces) {
   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) {
+function groupXml(node, registry, namespaces, warn, layoutOf) {
   const attrs = [];
   if (node.transform) {
     const m = formatMatrix(node.transform);
@@ -3625,50 +3780,56 @@ function groupXml(node, registry, namespaces, warn) {
   }
   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("");
+  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 attrs = [`d="${pathToD(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, warn);
-    for (const a of strokeAttrs) attrs.push(a);
+    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"');
   }
-  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 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);
-  if (metaEls) {
-    return `<path ${attrs.join(" ")}${metaAttrs}>${metaEls}</path>`;
-  }
-  return `<path ${attrs.join(" ")}${metaAttrs}/>`;
+  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) {
+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);
         }
       }
     }
@@ -3676,8 +3837,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))
@@ -3730,7 +3898,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) {
@@ -3773,9 +3943,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;
@@ -3859,7 +4032,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) {
@@ -3904,7 +4077,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"
         })
@@ -3939,7 +4113,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) {
@@ -3973,22 +4149,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);
@@ -4007,12 +4173,33 @@ 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 emitChildren = () => {
         const children = [];
@@ -4045,6 +4232,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, escapeAttr, escapeText, evaluateMediaQuery, evaluateSupports, fillDataFromSvg, nativeSvgKind, nativeSvgSpace, parseSvg, serializeSvg, strokeDataFromSvg, svgImageFromKit, svgLeafFromKit, svgNeeds, svgNodesFromKit, svgNodesToKitDrafts, svgPaintFromKit, svgStrokeFromKit, tilePreviewCssUrl, tilePreviewSvg, unpackSvgFiles, warmSvg };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map