@weasel-js/svg 1.1.0 → 1.3.0-pre.0

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { Path, FillStyle, StyledRun, TextStyle, TilePatternSpec, IngestCtx } from '@weasel-js/core';
+import { Path, FillStyle, StyledRun, TextStyle, Stroke, TilePatternSpec, IngestCtx } from '@weasel-js/core';
 
 /**
  * Public types for `@weasel-js/svg`. The package exposes a flat,
@@ -86,6 +86,10 @@ interface SvgStroke {
      * attribute may render with longer miters than the source SVG intended.
      */
     miterLimit?: number;
+    /** `marker-start` / `marker-mid` / `marker-end`, as the bare `url(#id)` key. */
+    markerStart?: string;
+    markerMid?: string;
+    markerEnd?: string;
 }
 /**
  * Leaf node: a path geometry plus fill/stroke. All other v1 shapes
@@ -155,8 +159,16 @@ interface SvgTextNode {
     text: string;
     /** Optional per-range styling — same shape as `TextPose.runs`. */
     runs?: StyledRun[];
-    /** Node-wide style. Defaults applied at render time via `resolveTextStyle`. */
+    /** Node-wide typography. Defaults applied at render time via `resolveTextStyle`. */
     style?: TextStyle;
+    /**
+     * Node-wide glyph paint, the `FillStyle` / `Stroke` a kit text node holds
+     * in `data.fill` / `data.stroke`. Not `SvgPaint`, which is the path
+     * nodes' shape — a text paint reaches the renderer through the runs, and
+     * `StyledRun.fill` / `.stroke` override these per range.
+     */
+    fill?: FillStyle;
+    stroke?: Stroke;
     /** Element-level opacity (`opacity="..."`), 0..1. */
     opacity?: number;
     /** Element-level rotation in **radians**, pivoting around the unrotated
@@ -358,6 +370,14 @@ type SvgSceneDraft = {
     pose: DraftPose;
     data: Record<string, unknown>;
 };
+/** Lower an `SvgStroke` onto the leaf's `data.stroke`.
+ *
+ *  Everything the SVG carried — paint, width, cap, join, dash, miter limit,
+ *  opacity — lands on the one `Stroke` `data.stroke` takes. The paint is
+ *  normalized to the leaf's own box the same way a fill is, so a
+ *  `userSpaceOnUse` gradient survives the fit-clamp and the drop-point
+ *  placement. */
+declare function strokeDataFromSvg(stroke: SvgStroke | undefined, box: SvgDraftBounds): Stroke | undefined;
 /**
  * Walk an `SvgNode[]` tree and emit a flat, parent-before-child list of
  * {@link SvgSceneDraft}s. Each `<g>` becomes a container whose pose is the
@@ -373,4 +393,4 @@ declare function svgNodesToKitDrafts(nodes: readonly SvgNode[], nextId: () => st
  */
 declare function unpackSvgFiles(files: File[], ctx: IngestCtx): Promise<void>;
 
-export { IDENTITY_MATRIX, type Matrix, type NamespaceMeta, type NamespacedElement, type ParseOptions, type ParseResult, type SerializeOptions, type SvgDraftBounds, type SvgGroupNode, type SvgImageNode, type SvgNode, type SvgPaint, type SvgPathNode, type SvgSceneDraft, type SvgStroke, type SvgTextNode, UNBOUNDED_TEXT_WIDTH, parseSvg, serializeSvg, svgNodesToKitDrafts, tilePreviewCssUrl, tilePreviewSvg, unpackSvgFiles };
+export { IDENTITY_MATRIX, type Matrix, type NamespaceMeta, type NamespacedElement, type ParseOptions, type ParseResult, type SerializeOptions, type SvgDraftBounds, type SvgGroupNode, type SvgImageNode, type SvgNode, type SvgPaint, type SvgPathNode, type SvgSceneDraft, type SvgStroke, type SvgTextNode, UNBOUNDED_TEXT_WIDTH, parseSvg, serializeSvg, strokeDataFromSvg, svgNodesToKitDrafts, tilePreviewCssUrl, tilePreviewSvg, unpackSvgFiles };

package/dist/index.js

@@ -1,4 +1,4 @@
-import { pathFromD, PATH_M, PATH_L, PATH_Z, boundsOfPath, dwarn, createInsertOp, PathBuilder, parseColor, rgbaToHex, PATH_C, PATH_Q, resolveTextStyle, fillToBoundsFrame } from '@weasel-js/core';
+import { pathFromD, PATH_M, PATH_L, PATH_Z, boundsOfPath, getMarker, SCRIPT_METRICS, dwarn, createInsertOp, PathBuilder, parseColor, rgbaToHex, PATH_C, PATH_Q, resolveStrokeWidth, solid, fillToBoundsFrame, resolveTextStyle, getPaintKind } from '@weasel-js/core';
 import { tileGeometry } from '@weasel-js/core/patterns-builtin';
 
 // src/parse.ts
@@ -354,6 +354,39 @@ function readPattern(el, onWarn) {
 function escapeAttr(s) {
   return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
 }
+function serializePathD(path) {
+  if (path.kind === "rect") {
+    const { x, y, width, height } = path;
+    return `M${trimNumber(x)} ${trimNumber(y)}h${trimNumber(width)}v${trimNumber(height)}h${trimNumber(-width)}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 GRADIENT_TAGS = /* @__PURE__ */ new Set(["lineargradient", "radialgradient"]);
@@ -376,7 +409,7 @@ function warnUnsupportedDefsChildren(svg, onWarn) {
     for (let i = 0; i < root.children.length; i++) {
       const child = root.children[i];
       const tag = child.tagName.toLowerCase();
-      if (GRADIENT_TAGS.has(tag) || tag === "pattern") continue;
+      if (GRADIENT_TAGS.has(tag) || tag === "pattern" || tag === "marker") continue;
       onWarn(`unsupported <defs> child: <${child.tagName}>`);
     }
   }
@@ -478,6 +511,13 @@ var PaintServerRegistry = class {
   byPaint = /* @__PURE__ */ new Map();
   order = [];
   counter = 0;
+  // Marker keys referenced by any stroke, in first-use order. The `<defs>`
+  // id is the marker key itself, not a minted counter id: `parseSvg` reads a
+  // `marker-end="url(#id)"` fragment back as the marker key directly (it
+  // never inspects the `<marker>` element), so a synthetic id would come
+  // back unresolvable and warn on round-trip.
+  markerKeys = [];
+  markerKeySet = /* @__PURE__ */ new Set();
   register(paint) {
     const existing = this.byPaint.get(paint);
     if (existing) return existing;
@@ -486,20 +526,50 @@ var PaintServerRegistry = class {
     this.order.push(paint);
     return id;
   }
-  /** Emit `<defs>...</defs>` XML for every registered paint server. */
+  /** The `<defs>` id for a marker key — the key itself, minting nothing.
+   *  `undefined` when nothing is registered under `key`, so a caller emits no
+   *  attribute at all rather than a `url(#…)` pointing at a def that will
+   *  never be written. */
+  markerId(key) {
+    if (getMarker(key) === void 0) return void 0;
+    if (!this.markerKeySet.has(key)) {
+      this.markerKeySet.add(key);
+      this.markerKeys.push(key);
+    }
+    return key;
+  }
+  /** Emit `<defs>...</defs>` XML for every registered paint server and marker. */
   toDefsXml(onWarn) {
-    if (this.order.length === 0) return "";
+    if (this.order.length === 0 && this.markerKeys.length === 0) return "";
     const parts = ["<defs>"];
     for (const paint of this.order) {
-      const id = this.byPaint.get(paint);
-      parts.push(
-        paint.fill === "pattern" ? patternXml(id, paint, onWarn) : gradientXml(id, paint)
-      );
+      parts.push(paintServerXml(this.byPaint.get(paint), paint, onWarn));
+    }
+    for (const key of this.markerKeys) {
+      const entry = getMarker(key);
+      if (!entry) continue;
+      parts.push(entry.toSvg ? entry.toSvg(key, entry) : defaultMarkerXml(key, entry));
     }
     parts.push("</defs>");
     return parts.join("");
   }
 };
+function defaultMarkerXml(id, entry) {
+  const path = entry.path({ size: 1, stroke: { paint: { fill: "solid", color: "#000" } } });
+  const d = serializePathD(path);
+  const fill = entry.fill === "none" ? "none" : "context-stroke";
+  const outline = entry.outline ? ` stroke="context-stroke" stroke-width="${entry.outline.width}" stroke-linecap="round" stroke-linejoin="round"` : "";
+  return `<marker id="${id}" markerUnits="strokeWidth" markerWidth="8" markerHeight="8" refX="0" refY="0" orient="auto" overflow="visible"><path d="${d}" fill="${fill}"${outline}/></marker>`;
+}
+function paintServerXml(id, paint, onWarn) {
+  if (paint.fill === "pattern") return patternXml(id, paint, onWarn);
+  const builtin = gradientXml(id, paint);
+  if (builtin) return builtin;
+  const custom = getPaintKind(paint.fill)?.toSvg?.(id, paint);
+  if (custom) return custom;
+  onWarn?.(`${paint.fill} fill has no vector form \u2014 omitted from <defs>`);
+  return "";
+}
 function gradientUnitsAttr(units) {
   return units === "bounds" ? "objectBoundingBox" : "userSpaceOnUse";
 }
@@ -536,6 +606,9 @@ var INHERITABLE = [
   "stroke-linejoin",
   "stroke-dasharray",
   "stroke-miterlimit",
+  "marker-start",
+  "marker-mid",
+  "marker-end",
   "color",
   "font-size",
   "font-family",
@@ -543,7 +616,8 @@ var INHERITABLE = [
   "font-style",
   "text-anchor",
   "letter-spacing",
-  "text-decoration"
+  "text-decoration",
+  "direction"
 ];
 function readStyleProp(el, prop) {
   const style = el.getAttribute("style");
@@ -588,6 +662,7 @@ var IGNORED_TAGS = /* @__PURE__ */ new Set([
   "lineargradient",
   "radialgradient",
   "pattern",
+  "marker",
   "title",
   "desc",
   "metadata"
@@ -953,8 +1028,28 @@ function readStroke(style, gradients, onWarn) {
     if (Number.isFinite(m) && m >= 1) stroke.miterLimit = m;
     else onWarn(`unrecognized stroke-miterlimit: ${miterAttr}`);
   }
+  for (const [attr, field] of [
+    ["marker-start", "markerStart"],
+    ["marker-mid", "markerMid"],
+    ["marker-end", "markerEnd"]
+  ]) {
+    const id = parseMarkerRef(style[attr] ?? null);
+    if (id === void 0) continue;
+    if (getMarker(id) === void 0) {
+      onWarn(`${attr} references a marker this kit has no entry for: #${id}`);
+      continue;
+    }
+    stroke[field] = id;
+  }
   return stroke;
 }
+function parseMarkerRef(raw) {
+  if (!raw) return void 0;
+  const v = raw.trim();
+  if (v === "" || v === "none") return void 0;
+  const m = /^url\(\s*#([^)\s]+)\s*\)/.exec(v);
+  return m ? m[1] : void 0;
+}
 var STROKE_KEYS = [
   "stroke",
   "stroke-width",
@@ -962,7 +1057,10 @@ var STROKE_KEYS = [
   "stroke-linecap",
   "stroke-linejoin",
   "stroke-dasharray",
-  "stroke-miterlimit"
+  "stroke-miterlimit",
+  "marker-start",
+  "marker-mid",
+  "marker-end"
 ];
 function ownStrokeStyle(el) {
   const out = {};
@@ -987,6 +1085,9 @@ function coreStroke(stroke) {
   if (stroke.join) out.join = stroke.join;
   if (stroke.dash) out.dash = stroke.dash;
   if (stroke.miterLimit != null) out.miterLimit = stroke.miterLimit;
+  if (stroke.markerStart) out.markerStart = stroke.markerStart;
+  if (stroke.markerMid) out.markerMid = stroke.markerMid;
+  if (stroke.markerEnd) out.markerEnd = stroke.markerEnd;
   return out;
 }
 function parseDashArray(s) {
@@ -1024,8 +1125,31 @@ function parseTextDecoration(raw) {
   const out = {};
   if (tokens.includes("underline")) out.underline = true;
   if (tokens.includes("line-through")) out.strikethrough = true;
+  if (tokens.includes("overline")) out.overline = true;
   return out;
 }
+function parseBaselineShift(raw, onWarn) {
+  const keyword = raw.trim().toLowerCase();
+  if (keyword === "super" || keyword === "sub") return { script: keyword };
+  const n = parseFloat(raw);
+  if (!Number.isFinite(n)) return {};
+  const unit = /^-?[\d.]+([a-z%]+)$/i.exec(raw.trim())?.[1]?.toLowerCase();
+  if (unit === "%") return { baselineShift: n / 100 };
+  if (unit && unit !== "em") {
+    onWarn(`baseline-shift "${raw}" uses unit "${unit}", which is not converted; treated as ${n} em`);
+  }
+  return n === 0 ? {} : { baselineShift: n };
+}
+function parseRunFontSize(raw, onWarn) {
+  const n = parseFloat(raw);
+  if (!Number.isFinite(n)) return {};
+  const unit = /^-?[\d.]+([a-z%]+)$/i.exec(raw.trim())?.[1]?.toLowerCase();
+  if (unit === "%") return { fontScale: n / 100 };
+  if (unit && unit !== "px") {
+    onWarn(`font-size "${raw}" uses unit "${unit}", which is not converted; treated as ${n} world units`);
+  }
+  return { fontSize: n };
+}
 var XLINK_NS2 = "http://www.w3.org/1999/xlink";
 function parseImageElement(el, ctm, onWarn) {
   const href = el.getAttribute("href") ?? el.getAttributeNS(XLINK_NS2, "href") ?? el.getAttribute("xlink:href");
@@ -1124,7 +1248,8 @@ function parseTextElement(el, ctm, style, gradients, onWarn) {
   const ax = m[0] * rawX + m[2] * rawY + m[4];
   const ay = m[1] * rawX + m[3] * rawY + m[5];
   const leafStyle = deriveStyle(style, el);
-  const textStyle = readTextStyle(leafStyle, gradients, onWarn);
+  const textStyle = readTextStyle(leafStyle, onWarn);
+  const textPaint = readTextPaint(leafStyle, gradients, onWarn);
   const fontSize = textStyle.fontSize ?? 16;
   const lineHeight = textStyle.lineHeight ?? 1.2;
   const dominantBaseline = el.getAttribute("dominant-baseline");
@@ -1170,6 +1295,8 @@ function parseTextElement(el, ctm, style, gradients, onWarn) {
   );
   if (hasStyling) node.runs = runs;
   if (Object.keys(textStyle).length > 0) node.style = textStyle;
+  if (textPaint.fill != null) node.fill = textPaint.fill;
+  if (textPaint.stroke != null) node.stroke = textPaint.stroke;
   if (opacity != null) node.opacity = opacity;
   if (!isIdentity(localTransform)) {
     const worldLocal = rebaseTransform(ctm, localTransform);
@@ -1198,17 +1325,25 @@ function readTspanRun(el, gradients, style, onWarn) {
   if (ff) run.fontFamily = ff;
   const sz = ownProp(el, "font-size");
   if (sz != null) {
-    const n = parseFloat(sz);
-    if (Number.isFinite(n)) run.fontSize = n;
+    const size = parseRunFontSize(sz, onWarn);
+    if (size.fontSize != null) run.fontSize = size.fontSize;
+    if (size.fontScale != null) run.fontScale = size.fontScale;
   }
   const ls = ownProp(el, "letter-spacing");
   if (ls != null) {
     const n = parseLetterSpacing(ls, onWarn);
     if (n != null) run.letterSpacing = n;
   }
+  const bs = ownProp(el, "baseline-shift");
+  if (bs != null) {
+    const shift = parseBaselineShift(bs, onWarn);
+    if (shift.script != null) run.script = shift.script;
+    if (shift.baselineShift != null) run.baselineShift = shift.baselineShift;
+  }
   const decoration = parseTextDecoration(ownProp(el, "text-decoration"));
   if (decoration.underline) run.underline = true;
   if (decoration.strikethrough) run.strikethrough = true;
+  if (decoration.overline) run.overline = true;
   const tspanStyle = deriveStyle(style, el);
   const fillAttr = resolveCurrentColor(ownProp(el, "fill"), tspanStyle);
   if (fillAttr) {
@@ -1224,7 +1359,7 @@ function readTspanRun(el, gradients, style, onWarn) {
   if (stroke) run.stroke = stroke;
   return run;
 }
-function readTextStyle(style, gradients, onWarn) {
+function readTextStyle(style, onWarn) {
   const out = {};
   const sz = style["font-size"];
   if (sz != null) {
@@ -1240,10 +1375,12 @@ function readTextStyle(style, gradients, onWarn) {
   }
   const fs = style["font-style"];
   if (fs === "italic" || fs === "normal") out.fontStyle = fs;
-  const anchor = style["text-anchor"];
-  if (anchor === "start") out.align = "left";
+  if (style["direction"] === "rtl") out.direction = "rtl";
+  const ltr = out.direction !== "rtl";
+  const anchor = style["text-anchor"] ?? (ltr ? void 0 : "start");
+  if (anchor === "start") out.align = ltr ? "left" : "right";
   else if (anchor === "middle") out.align = "center";
-  else if (anchor === "end") out.align = "right";
+  else if (anchor === "end") out.align = ltr ? "right" : "left";
   const ls = style["letter-spacing"];
   if (ls != null) {
     const n = parseLetterSpacing(ls, onWarn);
@@ -1252,6 +1389,11 @@ function readTextStyle(style, gradients, onWarn) {
   const decoration = parseTextDecoration(style["text-decoration"] ?? null);
   if (decoration.underline) out.underline = true;
   if (decoration.strikethrough) out.strikethrough = true;
+  if (decoration.overline) out.overline = true;
+  return out;
+}
+function readTextPaint(style, gradients, onWarn) {
+  const out = {};
   const fillRaw = resolveCurrentColor(style["fill"] ?? null, style);
   if (fillRaw) {
     const parsed = parsePaintAttr(fillRaw);
@@ -1266,41 +1408,6 @@ function readTextStyle(style, gradients, onWarn) {
   if (stroke) out.stroke = stroke;
   return out;
 }
-function serializePathD(path) {
-  if (path.kind === "rect") {
-    const { x, y, width, height } = path;
-    return `M${trimNumber(x)} ${trimNumber(y)}h${trimNumber(width)}v${trimNumber(height)}h${trimNumber(-width)}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/serialize.ts
 function serializeSvg(nodes, opts = {}) {
   const registry = new PaintServerRegistry();
   registerPaintServers(nodes, registry);
@@ -1385,9 +1492,11 @@ function registerPaintServers(nodes, 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.style?.fill, registry);
-      registerTextPaint(n.style?.stroke?.paint, registry);
+      registerTextPaint(n.fill, registry);
+      registerTextPaint(n.stroke?.paint, registry);
+      registerMarkers(n.stroke, registry);
       for (const run of n.runs ?? []) {
         registerTextPaint(run.fill, registry);
         registerTextPaint(run.stroke?.paint, registry);
@@ -1398,6 +1507,18 @@ function registerPaintServers(nodes, registry) {
 function registerTextPaint(paint, registry) {
   if (paint && !("color" in paint)) registry.register(paint);
 }
+function markerKeyOfRef(ref) {
+  if (typeof ref === "string") return ref;
+  if (ref && typeof ref === "object" && "key" in ref) return String(ref.key);
+  return void 0;
+}
+function registerMarkers(stroke, registry) {
+  if (!stroke) return;
+  for (const ref of [stroke.markerStart, stroke.markerMid, stroke.markerEnd]) {
+    const key = markerKeyOfRef(ref);
+    if (key) registry.markerId(key);
+  }
+}
 function nodeXml(node, registry, namespaces) {
   if (node.kind === "group") return groupXml(node, registry, namespaces);
   if (node.kind === "text") return textXml(node, registry, namespaces);
@@ -1485,7 +1606,7 @@ function paintAttrs(paint, name, registry, includeOpacity = true) {
 }
 function coreStrokeAttrs(stroke, registry) {
   if (!stroke) return [];
-  const width = stroke.width ?? 1;
+  const width = resolveStrokeWidth(stroke.width ?? 1, 1);
   if (!(width > 0)) return [];
   const attrs = [];
   if ("color" in stroke.paint) {
@@ -1503,6 +1624,18 @@ function coreStrokeAttrs(stroke, registry) {
     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 key = typeof ref === "string" ? ref : ref.key;
+    const id = registry.markerId(key);
+    if (id === void 0) continue;
+    attrs.push(`${attr}="url(#${id})"`);
+  }
   return attrs;
 }
 function strokeAttrsFor(stroke, registry) {
@@ -1524,6 +1657,17 @@ function strokeAttrsFor(stroke, registry) {
   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 computeBounds(nodes) {
@@ -1577,27 +1721,30 @@ function textXml(node, registry, namespaces) {
   if (style?.fontFamily) attrs.push(`font-family="${escapeAttr2(style.fontFamily)}"`);
   if (style?.fontWeight != null) attrs.push(`font-weight="${String(style.fontWeight)}"`);
   if (style?.fontStyle && style.fontStyle !== "normal") attrs.push(`font-style="${style.fontStyle}"`);
-  if (style?.align && style.align !== "left") {
-    const anchor = style.align === "center" ? "middle" : "end";
-    attrs.push(`text-anchor="${anchor}"`);
+  const direction = style?.direction ?? "ltr";
+  if (direction === "rtl") attrs.push('direction="rtl"');
+  if (style?.align != null || direction === "rtl") {
+    const align = style?.align ?? "left";
+    const anchor = align === "center" ? "middle" : align === "start" ? "start" : align === "end" ? "end" : align === "left" === (direction === "ltr") ? "start" : "end";
+    if (anchor !== "start") attrs.push(`text-anchor="${anchor}"`);
   }
   if (style?.letterSpacing != null && style.letterSpacing !== 0) {
     attrs.push(`letter-spacing="${trimNumber(style.letterSpacing)}"`);
   }
-  const decoration = textDecorationValue(style?.underline, style?.strikethrough);
+  const decoration = textDecorationValue(style?.underline, style?.strikethrough, style?.overline);
   if (decoration) attrs.push(`text-decoration="${decoration}"`);
-  if (style?.fill) {
-    if ("color" in style.fill) {
-      attrs.push(`fill="${style.fill.color}"`);
-      if (style.fill.opacity != null && style.fill.opacity !== 1) {
-        attrs.push(`fill-opacity="${trimNumber(style.fill.opacity)}"`);
+  if (node.fill) {
+    if ("color" in node.fill) {
+      attrs.push(`fill="${node.fill.color}"`);
+      if (node.fill.opacity != null && node.fill.opacity !== 1) {
+        attrs.push(`fill-opacity="${trimNumber(node.fill.opacity)}"`);
       }
     } else {
-      const id = registry.register(style.fill);
+      const id = registry.register(node.fill);
       attrs.push(`fill="url(#${id})"`);
     }
   }
-  for (const a of coreStrokeAttrs(style?.stroke, registry)) attrs.push(a);
+  for (const a of coreStrokeAttrs(node.stroke, registry)) attrs.push(a);
   if (node.opacity != null && node.opacity !== 1) {
     attrs.push(`opacity="${trimNumber(node.opacity)}"`);
   }
@@ -1617,11 +1764,19 @@ function runXml(run, registry) {
   if (run.bold) attrs.push(`font-weight="700"`);
   if (run.italic) attrs.push(`font-style="italic"`);
   if (run.fontFamily) attrs.push(`font-family="${escapeAttr2(run.fontFamily)}"`);
+  const presetScale = run.script != null && run.baselineShift != null ? SCRIPT_METRICS[run.script].size : void 0;
+  const scale = run.fontScale ?? presetScale;
   if (run.fontSize != null) attrs.push(`font-size="${trimNumber(run.fontSize)}"`);
+  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(run.letterSpacing)}"`);
   }
-  const runDecoration = textDecorationValue(run.underline, run.strikethrough);
+  const runDecoration = textDecorationValue(run.underline, run.strikethrough, run.overline);
   if (runDecoration) attrs.push(`text-decoration="${runDecoration}"`);
   if (run.fill) {
     if ("color" in run.fill) {
@@ -1635,10 +1790,11 @@ function runXml(run, registry) {
   const head = attrs.length > 0 ? `<tspan ${attrs.join(" ")}>` : "<tspan>";
   return `${head}${escapeText(run.text)}</tspan>`;
 }
-function textDecorationValue(underline, strikethrough) {
+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 escapeAttr2(s) {
@@ -1661,7 +1817,6 @@ function pathBounds(path) {
 }
 var CASCADE_OFFSET_PX = 24;
 var VIEWPORT_FIT = 0.9;
-var GRADIENT_FALLBACK = "#888888";
 function readFileText(file) {
   return new Promise((resolve, reject) => {
     const reader = new FileReader();
@@ -1676,18 +1831,27 @@ function freshSvgNodeId() {
 }
 function fillFromPaint(paint, box) {
   if (!paint) return void 0;
-  if (paint.kind === "none") return "none";
-  if (paint.kind === "solid") return paint.color;
+  if (paint.kind === "none") return null;
+  if (paint.kind === "solid") return solid(paint.color);
   const g = paint.paint;
   const units = "units" in g ? g.units : void 0;
   return units === "world" ? fillToBoundsFrame(g, box) : g;
 }
-function strokeColorFromPaint(paint) {
-  if (!paint) return void 0;
-  if (paint.kind === "none") return "none";
-  if (paint.kind === "solid") return paint.color;
-  dwarn("ingest", `svg unpack: gradient stroke flattened to ${GRADIENT_FALLBACK}`);
-  return GRADIENT_FALLBACK;
+function strokeDataFromSvg(stroke, box) {
+  if (!stroke || stroke.paint.kind === "none") return void 0;
+  const paint = fillFromPaint(stroke.paint, box);
+  if (paint === void 0 || paint === null) return void 0;
+  return {
+    paint: stroke.opacity !== void 0 ? { ...paint, opacity: stroke.opacity } : paint,
+    width: stroke.width,
+    ...stroke.cap !== void 0 ? { cap: stroke.cap } : {},
+    ...stroke.join !== void 0 ? { join: stroke.join } : {},
+    ...stroke.dash !== void 0 ? { dash: stroke.dash } : {},
+    ...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 } : {}
+  };
 }
 function svgNodesToKitDrafts(nodes, nextId) {
   const drafts = [];
@@ -1750,7 +1914,7 @@ function svgNodesToKitDrafts(nodes, nextId) {
     const pose = { x: b.x, y: b.y, width: b.width, height: b.height };
     if (n.rotation) pose.rotation = n.rotation;
     const fill = fillFromPaint(n.fill, b);
-    const stroke = n.stroke ? strokeColorFromPaint(n.stroke.paint) : void 0;
+    const strokeFromSvg = strokeDataFromSvg(n.stroke, b);
     drafts.push({
       kind: "leaf",
       id: nextId(),
@@ -1759,7 +1923,7 @@ function svgNodesToKitDrafts(nodes, nextId) {
       data: {
         path: n.path,
         ...fill !== void 0 ? { fill } : {},
-        ...stroke !== void 0 && stroke !== "none" ? { stroke, strokeWidth: n.stroke.width } : {}
+        ...strokeFromSvg !== void 0 ? { stroke: strokeFromSvg } : {}
       }
     });
     return pose;
@@ -1853,6 +2017,6 @@ async function unpackSvgFiles(files, ctx) {
   }
 }
 
-export { IDENTITY_MATRIX, UNBOUNDED_TEXT_WIDTH, parseSvg, serializeSvg, svgNodesToKitDrafts, tilePreviewCssUrl, tilePreviewSvg, unpackSvgFiles };
+export { IDENTITY_MATRIX, UNBOUNDED_TEXT_WIDTH, parseSvg, serializeSvg, strokeDataFromSvg, svgNodesToKitDrafts, tilePreviewCssUrl, tilePreviewSvg, unpackSvgFiles };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map