@weasel-js/svg 1.6.1 → 1.7.1

package/dist/index.js

@@ -1,4 +1,4 @@
-import { pathFromD, PATH_M, PATH_L, PATH_Z, boundsOfPath, resolveScreenLength, SCRIPT_METRICS, dwarn, getMarker, registerMarker, createInsertOp, PathBuilder, parseColor, rgbaToHex, resolveTextStyle, layoutRuns, resolveRuns, resolveAlign, PATH_C, PATH_Q, solid, fillToBoundsFrame, getPaintKind } from '@weasel-js/core';
+import { pathFromD, PATH_M, PATH_L, PATH_Z, boundsOfPath, resolveScreenLength, scriptMetricsFor, warmFonts, warmPaintKinds, isPaintKindKnown, solid, fillToBoundsFrame, getMarker, registerMarker, dwarn, unionAABB, createInsertOp, fillInPoseFrame, DEFAULT_SHAPE_FILL, pathInPoseFrame, DEFAULT_TEXT_STYLE, PathBuilder, resolveTextStyle, layoutRuns, resolveRuns, resolveAlign, PATH_C, PATH_Q, resolveRunFace, parseColor, rgbaToHex, resolveMarkerSize, getPaintKind } from '@weasel-js/core';
 import { identity, multiply, invert } from '@weasel-js/geom';
 import { tileGeometry } from '@weasel-js/core/patterns-builtin';
 
@@ -145,16 +145,16 @@ function rectToPolygon(r) {
   b.close();
   return b.build();
 }
-function rectElementToPath(x, y, width, height, rx, ry, m = IDENTITY_MATRIX) {
+function rectElementToPath(x, y, width2, height2, rx, ry, m = IDENTITY_MATRIX) {
   if (rx <= 0 && ry <= 0) {
-    return transformPath({ kind: "rect", x, y, width, height }, m);
+    return transformPath({ kind: "rect", x, y, width: width2, height: height2 }, m);
   }
-  const r = Math.min(Math.max(rx, ry), Math.min(width, height) / 2);
-  const r2 = Math.min(rx > 0 ? rx : r, ry > 0 ? ry : r, Math.min(width, height) / 2);
+  const r = Math.min(Math.max(rx, ry), Math.min(width2, height2) / 2);
+  const r2 = Math.min(rx > 0 ? rx : r, ry > 0 ? ry : r, Math.min(width2, height2) / 2);
   const rad = r2;
   const k = KAPPA * rad;
-  const x2 = x + width;
-  const y2 = y + height;
+  const x2 = x + width2;
+  const y2 = y + height2;
   const b = new PathBuilder();
   b.moveTo(x + rad, y);
   b.lineTo(x2 - rad, y);
@@ -217,65 +217,12 @@ function polygonToPath(points, m = IDENTITY_MATRIX) {
   b.close();
   return transformPath(b.build(), m);
 }
-function anchorOffset(style, width) {
+function anchorOffset(style, width2) {
   const edge = resolveAlign(style?.align ?? "left", style?.direction ?? "ltr");
-  return edge === "center" ? width / 2 : edge === "right" ? width : 0;
-}
-function parsePaintAttr(raw) {
-  if (raw == null) return null;
-  const s = raw.trim();
-  if (s === "") return null;
-  if (s === "none") return { kind: "none" };
-  if (s === "currentColor" || s === "currentcolor") {
-    return { kind: "solid", color: "#000000", alpha: 1 };
-  }
-  const urlMatch = /^url\(\s*#([^)\s]+)\s*\)(.*)$/.exec(s);
-  if (urlMatch) {
-    const out = { kind: "ref", id: urlMatch[1] };
-    const rest = urlMatch[2].trim();
-    if (rest !== "" && rest !== "none") {
-      const fallback = parsePaintAttr(rest);
-      if (fallback?.kind === "solid") {
-        out.fallback = { color: fallback.color, alpha: fallback.alpha };
-      }
-    }
-    return out;
-  }
-  try {
-    const [r, g, b, a] = parseColor(s);
-    return { kind: "solid", color: rgbaToHex([r, g, b]), alpha: a };
-  } catch {
-    return null;
-  }
+  return edge === "center" ? width2 / 2 : edge === "right" ? width2 : 0;
 }
 
-// src/cascade.ts
-var EMPTY_STYLE = {};
-var INHERITABLE = [
-  "fill",
-  "fill-opacity",
-  "fill-rule",
-  "stroke",
-  "stroke-width",
-  "stroke-opacity",
-  "stroke-linecap",
-  "stroke-linejoin",
-  "stroke-dasharray",
-  "stroke-miterlimit",
-  "marker-start",
-  "marker-mid",
-  "marker-end",
-  "color",
-  "font-size",
-  "font-family",
-  "font-weight",
-  "font-style",
-  "text-anchor",
-  "letter-spacing",
-  "text-decoration",
-  "direction",
-  "text-transform"
-];
+// src/cssScan.ts
 function skipString(s, i) {
   const q = s[i];
   for (let j = i + 1; j < s.length; j++) {
@@ -350,26 +297,21 @@ var IMPORTANT = /!\s*important\s*$/i;
 function parseDeclarations(block) {
   const out = [];
   for (const part of splitTopLevel(stripComments(block), ";", true)) {
-    const colon = part.indexOf(":");
-    if (colon < 0) continue;
-    const prop = part.slice(0, colon).trim().toLowerCase();
-    if (!PROP_NAME.test(prop)) continue;
-    let value = part.slice(colon + 1).trim();
-    const important = IMPORTANT.test(value);
-    if (important) value = value.replace(IMPORTANT, "").trim();
-    if (!value) continue;
-    out.push({ prop, value, important });
+    const d = parseDeclaration(part);
+    if (d) out.push(d);
   }
   return out;
 }
-function identEnd(s, i) {
-  while (i < s.length) {
-    const ch = s[i];
-    if (ch === "\\") i += 2;
-    else if (/[\w-]/.test(ch) || ch.charCodeAt(0) > 127) i++;
-    else break;
-  }
-  return i;
+function parseDeclaration(text) {
+  const colon = text.indexOf(":");
+  if (colon < 0) return null;
+  const prop = text.slice(0, colon).trim().toLowerCase();
+  if (!PROP_NAME.test(prop)) return null;
+  let value = text.slice(colon + 1).trim();
+  const important = IMPORTANT.test(value);
+  if (important) value = value.replace(IMPORTANT, "").trim();
+  if (!value) return null;
+  return { prop, value, important };
 }
 function parenEnd(s, i) {
   let depth = 0;
@@ -385,6 +327,561 @@ function parenEnd(s, i) {
   }
   return s.length;
 }
+
+// src/condition.ts
+var ConditionSyntaxError = class extends Error {
+};
+var triNot = (a) => a == null ? null : !a;
+var triAnd = (a, b) => a === false || b === false ? false : a == null || b == null ? null : true;
+var triOr = (a, b) => a === true || b === true ? true : a == null || b == null ? null : false;
+var WS = /\s/;
+var IDENT = /^-?[a-zA-Z_][\w-]*/;
+function skipWs(p) {
+  while (p.i < p.s.length && WS.test(p.s[p.i])) p.i++;
+}
+function keyword(p, word) {
+  const end = p.i + word.length;
+  if (p.s.slice(p.i, end).toLowerCase() !== word) return false;
+  if (end >= p.s.length || !WS.test(p.s[end])) return false;
+  p.i = end;
+  return true;
+}
+function evaluateCondition(s, leaves, allowOr = true) {
+  const p = { s, i: 0 };
+  const r = condition(p, leaves, allowOr);
+  skipWs(p);
+  if (p.i < s.length) throw new ConditionSyntaxError(`unexpected "${s.slice(p.i)}"`);
+  return r;
+}
+function condition(p, leaves, allowOr) {
+  skipWs(p);
+  if (keyword(p, "not")) return triNot(inParens(p, leaves));
+  let r = inParens(p, leaves);
+  let op = null;
+  for (; ; ) {
+    const save = p.i;
+    skipWs(p);
+    if (p.i >= p.s.length) {
+      p.i = save;
+      return r;
+    }
+    const next = keyword(p, "and") ? "and" : keyword(p, "or") ? "or" : null;
+    if (!next || op && next !== op || next === "or" && !allowOr) {
+      throw new ConditionSyntaxError(`unexpected "${p.s.slice(p.i)}"`);
+    }
+    op = next;
+    const rhs = inParens(p, leaves);
+    r = op === "and" ? triAnd(r, rhs) : triOr(r, rhs);
+  }
+}
+function looksLikeCondition(inner) {
+  const t = inner.trimStart();
+  return t.startsWith("(") || /^not\s/i.test(t) || /^-?[a-zA-Z_][\w-]*\(/.test(t);
+}
+function inParens(p, leaves) {
+  skipWs(p);
+  const start = p.i;
+  let name = null;
+  if (p.s[p.i] !== "(") {
+    const m = IDENT.exec(p.s.slice(p.i));
+    if (!m || p.s[p.i + m[0].length] !== "(") throw new ConditionSyntaxError(`expected "(" at "${p.s.slice(p.i)}"`);
+    name = m[0].toLowerCase();
+    p.i += m[0].length;
+  }
+  const end = parenEnd(p.s, p.i);
+  if (p.s[end - 1] !== ")") throw new ConditionSyntaxError(`unbalanced "${p.s.slice(start)}"`);
+  const inner = p.s.slice(p.i + 1, end - 1);
+  p.i = end;
+  if (name != null) return leaves.fn(name, inner);
+  if (looksLikeCondition(inner)) {
+    try {
+      return evaluateCondition(inner, leaves);
+    } catch (e) {
+      if (!(e instanceof ConditionSyntaxError)) throw e;
+    }
+  }
+  return leaves.paren(inner);
+}
+
+// src/media.ts
+var DEFAULT_MEDIA_ENVIRONMENT = {
+  type: "screen",
+  width: 300,
+  height: 150,
+  resolution: 1,
+  prefersColorScheme: "light",
+  prefersReducedMotion: "no-preference",
+  hover: "none",
+  pointer: "none",
+  update: "none",
+  color: 8,
+  monochrome: 0
+};
+var ABSOLUTE_PX = {
+  px: 1,
+  in: 96,
+  cm: 96 / 2.54,
+  mm: 96 / 25.4,
+  q: 96 / 101.6,
+  pt: 96 / 72,
+  pc: 16
+};
+function absoluteLength(raw) {
+  const m = raw == null ? null : /^\s*([+-]?(?:\d+\.?\d*|\.\d+)(?:e[+-]?\d+)?)\s*([a-z]*)\s*$/i.exec(raw);
+  if (!m) return void 0;
+  const scale = ABSOLUTE_PX[m[2].toLowerCase() || "px"];
+  const n = parseFloat(m[1]) * (scale ?? NaN);
+  return Number.isFinite(n) && n >= 0 ? n : void 0;
+}
+function mediaEnvironmentFor(root, overrides = {}) {
+  let width2 = absoluteLength(root.getAttribute("width"));
+  let height2 = absoluteLength(root.getAttribute("height"));
+  const vb = (root.getAttribute("viewBox") ?? "").trim().split(/[\s,]+/).map(Number);
+  if (vb.length === 4 && vb.every(Number.isFinite) && vb[2] > 0 && vb[3] > 0) {
+    const [, , w, h] = vb;
+    if (width2 == null && height2 == null) {
+      width2 = w;
+      height2 = h;
+    } else if (width2 == null) width2 = height2 * (w / h);
+    else if (height2 == null) height2 = width2 * (h / w);
+  }
+  return {
+    ...DEFAULT_MEDIA_ENVIRONMENT,
+    width: width2 ?? DEFAULT_MEDIA_ENVIRONMENT.width,
+    height: height2 ?? DEFAULT_MEDIA_ENVIRONMENT.height,
+    ...overrides
+  };
+}
+var TOKEN = /\s*(?:([+-]?(?:\d+\.?\d*|\.\d+)(?:e[+-]?\d+)?)([a-z%]*)|(-?[a-z_][\w-]*)|(<=|>=|<|>|=)|(:)|(\/))/iy;
+function tokenize(s) {
+  const out = [];
+  TOKEN.lastIndex = 0;
+  while (TOKEN.lastIndex < s.length) {
+    if (/^\s*$/.test(s.slice(TOKEN.lastIndex))) break;
+    const m = TOKEN.exec(s);
+    if (!m) return null;
+    if (m[1] != null) out.push({ k: "num", v: parseFloat(m[1]), unit: m[2].toLowerCase() });
+    else if (m[3] != null) out.push({ k: "ident", v: m[3].toLowerCase() });
+    else if (m[4] != null) out.push({ k: "op", v: m[4] });
+    else if (m[5] != null) out.push({ k: ":" });
+    else out.push({ k: "/" });
+  }
+  return out;
+}
+var width = (e) => e.width;
+var height = (e) => e.height;
+var aspect = (e) => e.width / e.height;
+var hover = { kind: "discrete", values: ["none", "hover"], off: "none", get: (e) => e.hover };
+var pointer = { kind: "discrete", values: ["none", "coarse", "fine"], off: "none", get: (e) => e.pointer };
+var FEATURES = {
+  "width": { kind: "range", type: "length", get: width },
+  "height": { kind: "range", type: "length", get: height },
+  "device-width": { kind: "range", type: "length", get: width },
+  "device-height": { kind: "range", type: "length", get: height },
+  "aspect-ratio": { kind: "range", type: "ratio", get: aspect },
+  "device-aspect-ratio": { kind: "range", type: "ratio", get: aspect },
+  "resolution": { kind: "range", type: "resolution", get: (e) => e.resolution },
+  "color": { kind: "range", type: "integer", get: (e) => e.color },
+  "monochrome": { kind: "range", type: "integer", get: (e) => e.monochrome },
+  "orientation": {
+    kind: "discrete",
+    values: ["portrait", "landscape"],
+    get: (e) => e.height >= e.width ? "portrait" : "landscape"
+  },
+  "prefers-color-scheme": { kind: "discrete", values: ["light", "dark"], get: (e) => e.prefersColorScheme },
+  "prefers-reduced-motion": {
+    kind: "discrete",
+    values: ["no-preference", "reduce"],
+    off: "no-preference",
+    get: (e) => e.prefersReducedMotion
+  },
+  "update": { kind: "discrete", values: ["none", "slow", "fast"], off: "none", get: (e) => e.update },
+  "hover": hover,
+  "any-hover": hover,
+  "pointer": pointer,
+  "any-pointer": pointer
+};
+var FONT_PX = 16;
+function lengthPx(v, unit, env) {
+  if (unit === "") return v === 0 ? 0 : null;
+  const abs = ABSOLUTE_PX[unit];
+  if (abs != null) return v * abs;
+  switch (unit) {
+    case "em":
+    case "rem":
+      return v * FONT_PX;
+    case "ex":
+    case "ch":
+      return v * FONT_PX / 2;
+    case "vw":
+      return v * env.width / 100;
+    case "vh":
+      return v * env.height / 100;
+    case "vmin":
+      return v * Math.min(env.width, env.height) / 100;
+    case "vmax":
+      return v * Math.max(env.width, env.height) / 100;
+    default:
+      return null;
+  }
+}
+var DPPX = { dppx: 1, x: 1, dpi: 1 / 96, dpcm: 2.54 / 96 };
+function rangeValue(toks, type, env) {
+  const [a, b, c] = toks;
+  if (type === "ratio") {
+    if (toks.length === 1 && a.k === "num" && a.unit === "" && a.v >= 0) return a.v;
+    if (toks.length === 3 && a.k === "num" && b.k === "/" && c.k === "num" && a.unit === "" && c.unit === "" && a.v >= 0 && c.v > 0) return a.v / c.v;
+    return null;
+  }
+  if (toks.length !== 1 || a.k !== "num") return null;
+  if (type === "length") return lengthPx(a.v, a.unit, env);
+  if (type === "resolution") return DPPX[a.unit] != null ? a.v * DPPX[a.unit] : null;
+  return a.unit === "" && Number.isInteger(a.v) ? a.v : null;
+}
+function close(a, b) {
+  return Math.abs(a - b) <= 1e-9 * Math.max(1, Math.abs(a), Math.abs(b));
+}
+function compare(a, op, b) {
+  switch (op) {
+    case "=":
+      return close(a, b);
+    case "<":
+      return a < b && !close(a, b);
+    case "<=":
+      return a < b || close(a, b);
+    case ">":
+      return a > b && !close(a, b);
+    default:
+      return a > b || close(a, b);
+  }
+}
+var FLIP = { "<": ">", "<=": ">=", ">": "<", ">=": "<=", "=": "=" };
+function evaluateFeature(inner, env) {
+  const toks = tokenize(inner);
+  if (!toks || toks.length === 0) return null;
+  const first = toks[0];
+  if (toks.length === 1) {
+    if (first.k !== "ident") return null;
+    const f = FEATURES[first.v];
+    if (!f) return null;
+    return f.kind === "range" ? f.get(env) !== 0 : f.get(env) !== f.off;
+  }
+  if (first.k === "ident" && toks[1].k === ":") {
+    const prefix = /^(min|max)-/.exec(first.v)?.[1];
+    const f = FEATURES[prefix ? first.v.slice(4) : first.v];
+    if (!f) return null;
+    const rest = toks.slice(2);
+    if (f.kind === "discrete") {
+      if (prefix || rest.length !== 1 || rest[0].k !== "ident" || !f.values.includes(rest[0].v)) return null;
+      return f.get(env) === rest[0].v;
+    }
+    const v = rangeValue(rest, f.type, env);
+    if (v == null) return null;
+    return compare(f.get(env), prefix === "min" ? ">=" : prefix === "max" ? "<=" : "=", v);
+  }
+  const segments = [[]];
+  const ops = [];
+  for (const t of toks) {
+    if (t.k === "op") {
+      ops.push(t.v);
+      segments.push([]);
+    } else segments[segments.length - 1].push(t);
+  }
+  if (segments.some((s) => s.length === 0)) return null;
+  const featureAt = (s) => s.length === 1 && s[0].k === "ident" ? FEATURES[s[0].v] : void 0;
+  if (ops.length === 1) {
+    const [lhs, rhs] = segments;
+    const named = featureAt(lhs) ?? featureAt(rhs);
+    if (!named) return null;
+    if (named.kind !== "range") return null;
+    const nameFirst = featureAt(lhs) != null;
+    const v = rangeValue(nameFirst ? rhs : lhs, named.type, env);
+    if (v == null) return null;
+    return nameFirst ? compare(named.get(env), ops[0], v) : compare(named.get(env), FLIP[ops[0]], v);
+  }
+  if (ops.length === 2) {
+    const f = featureAt(segments[1]);
+    if (!f || f.kind !== "range") return null;
+    const lt = ops.every((o) => o === "<" || o === "<=");
+    const gt = ops.every((o) => o === ">" || o === ">=");
+    if (!lt && !gt) return null;
+    const lo = rangeValue(segments[0], f.type, env);
+    const hi = rangeValue(segments[2], f.type, env);
+    if (lo == null || hi == null) return null;
+    const x = f.get(env);
+    return compare(lo, ops[0], x) && compare(x, ops[1], hi);
+  }
+  return null;
+}
+var RESERVED_TYPES = /* @__PURE__ */ new Set(["not", "and", "or", "only", "layer"]);
+var TYPED_QUERY = /^(?:(not|only)\s+)?(-?[a-z_][\w-]*)(?:\s+and\s+([\s\S]+))?$/;
+function evaluateQuery(query, env) {
+  const leaves = {
+    paren: (inner) => evaluateFeature(inner, env),
+    fn: () => null
+  };
+  if (/^(?:\(|not\s+\(|-?[a-z_][\w-]*\()/.test(query)) return evaluateCondition(query, leaves);
+  const m = TYPED_QUERY.exec(query);
+  if (!m || RESERVED_TYPES.has(m[2])) throw new ConditionSyntaxError(`invalid media query "${query}"`);
+  const typed = triAnd(m[2] === "all" || m[2] === env.type, m[3] ? evaluateCondition(m[3], leaves, false) : true);
+  return m[1] === "not" ? triNot(typed) : typed;
+}
+function evaluateMediaQuery(list, env) {
+  const src = list.trim().toLowerCase();
+  if (src === "") return true;
+  return splitTopLevel(src, ",").some((raw) => {
+    const query = raw.trim();
+    if (query === "") return false;
+    try {
+      return evaluateQuery(query, env) === true;
+    } catch (e) {
+      if (e instanceof ConditionSyntaxError) return false;
+      throw e;
+    }
+  });
+}
+function parsePaintAttr(raw) {
+  if (raw == null) return null;
+  const s = raw.trim();
+  if (s === "") return null;
+  if (s === "none") return { kind: "none" };
+  if (s.toLowerCase() === "currentcolor") {
+    return { kind: "solid", color: "#000000", alpha: 1 };
+  }
+  const urlMatch = /^url\(\s*#([^)\s]+)\s*\)(.*)$/.exec(s);
+  if (urlMatch) {
+    const out = { kind: "ref", id: urlMatch[1] };
+    const rest = urlMatch[2].trim();
+    if (rest !== "" && rest !== "none") {
+      const fallback = parsePaintAttr(rest);
+      if (fallback?.kind === "solid") {
+        out.fallback = { color: fallback.color, alpha: fallback.alpha };
+      }
+    }
+    return out;
+  }
+  try {
+    const [r, g, b, a] = parseColor(s);
+    return { kind: "solid", color: rgbaToHex([r, g, b]), alpha: a };
+  } catch {
+    return null;
+  }
+}
+
+// src/properties.ts
+var TEXT_TRANSFORMS = /* @__PURE__ */ new Set(["none", "uppercase", "lowercase", "capitalize"]);
+var DIMENSION = /^([+-]?(?:\d+\.?\d*|\.\d+)(?:e[+-]?\d+)?)([a-z%]*)$/i;
+function dimension(v) {
+  const m = DIMENSION.exec(v);
+  return m ? { n: Number(m[1]), unit: m[2].toLowerCase() } : void 0;
+}
+var clamp01 = (n) => n < 0 ? 0 : n > 1 ? 1 : n;
+var length = (native, coercedAs) => (v, warn, prop) => {
+  const d = dimension(v);
+  if (!d) return void 0;
+  if (d.unit && !native.includes(d.unit)) {
+    warn(`${prop} "${v}" uses unit "${d.unit}", which is not converted; treated as ${d.n} ${coercedAs}`);
+  }
+  return d.n;
+};
+var worldLength = length(["px"], "world units");
+var keyword2 = (...words) => (v) => words.includes(v) ? v : void 0;
+var isCurrentColor = (v) => v.toLowerCase() === "currentcolor";
+function readPaint(v) {
+  if (v === "context-fill") return { kind: "context", of: "fill" };
+  if (v === "context-stroke") return { kind: "context", of: "stroke" };
+  return parsePaintAttr(v) ?? void 0;
+}
+function readRatio(v) {
+  const d = dimension(v);
+  if (!d || d.unit !== "" && d.unit !== "%") return void 0;
+  return clamp01(d.unit === "%" ? d.n / 100 : d.n);
+}
+function readSolidColor(v, warn, prop) {
+  const parsed = parsePaintAttr(v);
+  if (parsed?.kind !== "solid") return void 0;
+  if (isCurrentColor(v)) warn(`${prop}="${v}" is read as black; it is not resolved against color`);
+  return parsed;
+}
+function readMarkerRef(v) {
+  if (v === "none") return null;
+  return /^url\(\s*#([^)\s]+)\s*\)$/.exec(v)?.[1];
+}
+function readLinecap(v, warn) {
+  const cap = keyword2("butt", "round", "square")(v);
+  if (!cap) warn(`unsupported stroke-linecap: ${v}`);
+  return cap;
+}
+function readLinejoin(v, warn) {
+  const join = keyword2("miter", "round", "bevel")(v);
+  if (join) return join;
+  if (v === "arcs" || v === "miter-clip") {
+    warn(`stroke-linejoin "${v}" not supported; falling back to miter`);
+    return "miter";
+  }
+  warn(`unsupported stroke-linejoin: ${v}`);
+  return void 0;
+}
+function readDashArray(v, warn) {
+  if (v === "none" || v === "") return null;
+  const nums = [];
+  for (const t of v.split(/[\s,]+/).filter(Boolean)) {
+    const d = dimension(t);
+    if (!d || d.unit !== "" && d.unit !== "px" || d.n < 0) {
+      warn(`unrecognized stroke-dasharray: ${v}`);
+      return void 0;
+    }
+    nums.push(d.n);
+  }
+  return nums.length % 2 === 1 ? [...nums, ...nums] : nums;
+}
+function readMiterLimit(v, warn) {
+  const d = dimension(v);
+  if (d && d.unit === "" && d.n >= 1) return d.n;
+  warn(`unrecognized stroke-miterlimit: ${v}`);
+  return void 0;
+}
+function readColor(v) {
+  return isCurrentColor(v) || parsePaintAttr(v)?.kind === "solid" ? v : void 0;
+}
+function readFontSize(v, warn, prop) {
+  const d = dimension(v);
+  if (d?.unit === "%") return { fontScale: d.n / 100 };
+  const n = worldLength(v, warn, prop);
+  return n == null ? void 0 : { fontSize: n };
+}
+function readFontWeight(v) {
+  if (v === "normal" || v === "bold" || v === "bolder") return v;
+  const d = dimension(v);
+  return d && d.unit === "" && d.n >= 1 && d.n <= 1e3 ? d.n : void 0;
+}
+function readFontStyle(v, warn) {
+  if (v === "normal" || v === "italic") return v;
+  if (v === "oblique") {
+    warn('font-style "oblique" is read as italic');
+    return "italic";
+  }
+  return void 0;
+}
+function readLetterSpacing(v, warn, prop) {
+  return v === "normal" ? null : worldLength(v, warn, prop);
+}
+function readDecoration(v, warn) {
+  const out = {};
+  for (const t of v.toLowerCase().split(/\s+/)) {
+    if (t === "underline") out.underline = true;
+    else if (t === "line-through") out.strikethrough = true;
+    else if (t === "overline") out.overline = true;
+    else if (t !== "none" && t !== "blink") warn(`text-decoration "${v}": "${t}" is not modeled; dropped`);
+  }
+  return out;
+}
+function readFontVariant(v, warn) {
+  let out;
+  for (const t of v.toLowerCase().split(/\s+/)) {
+    if (t === "small-caps" || t === "normal") out = t;
+    else if (t) warn(`font-variant "${v}": "${t}" is not modeled; dropped`);
+  }
+  return out;
+}
+function readTextTransform(v) {
+  const t = v.toLowerCase();
+  return TEXT_TRANSFORMS.has(t) ? t : void 0;
+}
+var emLength = length(["em"], "em");
+function readBaselineShift(v, warn, prop) {
+  const k = v.toLowerCase();
+  if (k === "super" || k === "sub") return { script: k };
+  if (k === "baseline") return {};
+  const d = dimension(v);
+  if (d?.unit === "%") return d.n === 0 ? {} : { baselineShift: d.n / 100 };
+  const n = emLength(v, warn, prop);
+  if (n == null) return void 0;
+  return n === 0 ? {} : { baselineShift: n };
+}
+var inherited = (read) => ({ inherits: true, read });
+var own = (read) => ({ inherits: false, read });
+var PROPERTIES = {
+  "fill": inherited(readPaint),
+  "fill-opacity": inherited(readRatio),
+  "fill-rule": inherited(keyword2("nonzero", "evenodd")),
+  "stroke": inherited(readPaint),
+  "stroke-width": inherited(worldLength),
+  "stroke-opacity": inherited(readRatio),
+  "stroke-linecap": inherited(readLinecap),
+  "stroke-linejoin": inherited(readLinejoin),
+  "stroke-dasharray": inherited(readDashArray),
+  "stroke-miterlimit": inherited(readMiterLimit),
+  "marker-start": inherited(readMarkerRef),
+  "marker-mid": inherited(readMarkerRef),
+  "marker-end": inherited(readMarkerRef),
+  "color": inherited(readColor),
+  "font-size": inherited(readFontSize),
+  "font-family": inherited((v) => v.length > 0 ? v : void 0),
+  "font-weight": inherited(readFontWeight),
+  "font-style": inherited(readFontStyle),
+  "text-anchor": inherited(keyword2("start", "middle", "end")),
+  "letter-spacing": inherited(readLetterSpacing),
+  "text-decoration": inherited(readDecoration),
+  "direction": inherited(keyword2("ltr", "rtl")),
+  "text-transform": inherited(readTextTransform),
+  "font-variant": inherited(readFontVariant),
+  "opacity": own(readRatio),
+  "stop-color": own(readSolidColor),
+  "stop-opacity": own(readRatio),
+  "baseline-shift": own(readBaselineShift),
+  "vector-effect": own(keyword2("none", "non-scaling-stroke"))
+};
+var INHERITED_PROPERTIES = Object.keys(PROPERTIES).filter((p) => PROPERTIES[p].inherits);
+var silent = () => {
+};
+function readProperty(prop, raw, warn = silent) {
+  if (raw == null) return void 0;
+  const v = raw.trim();
+  if (v === "inherit") return void 0;
+  return PROPERTIES[prop].read(v, warn, prop);
+}
+function isPropertyName(prop) {
+  return Object.prototype.hasOwnProperty.call(PROPERTIES, prop);
+}
+function isDeclarationHonored(prop, value) {
+  const name = prop.toLowerCase();
+  if (!isPropertyName(name)) return false;
+  const v = value.trim();
+  if (v === "inherit") return PROPERTIES[name].inherits;
+  let warned = false;
+  return readProperty(name, v, () => {
+    warned = true;
+  }) !== void 0 && !warned;
+}
+
+// src/supports.ts
+function evaluateSupports(condition2, opts = {}) {
+  try {
+    return evaluateCondition(condition2, {
+      paren: (inner) => {
+        const d = parseDeclaration(inner);
+        return d != null && isDeclarationHonored(d.prop, d.value);
+      },
+      fn: (name, args) => name === "selector" && (opts.selector?.(args) ?? false)
+    }) === true;
+  } catch (e) {
+    if (e instanceof ConditionSyntaxError) return false;
+    throw e;
+  }
+}
+
+// src/cascade.ts
+var EMPTY_STYLE = {};
+function identEnd(s, i) {
+  while (i < s.length) {
+    const ch = s[i];
+    if (ch === "\\") i += 2;
+    else if (/[\w-]/.test(ch) || ch.charCodeAt(0) > 127) i++;
+    else break;
+  }
+  return i;
+}
 var LEGACY_PSEUDO_ELEMENTS = /* @__PURE__ */ new Set(["before", "after", "first-line", "first-letter"]);
 var MAX_ARG_PSEUDOS = /* @__PURE__ */ new Set(["not", "is", "matches", "-webkit-any", "has"]);
 function compareSpecificity(a, b) {
@@ -444,19 +941,76 @@ function specificity(selector) {
   }
   return [a, b, c];
 }
-function parseStylesheet(text, firstOrder = 0) {
+var CascadeLayers = class {
+  children = /* @__PURE__ */ new Map();
+  anonymous = 0;
+  /** Declare `name` (possibly dotted) inside `parent`, keeping any earlier position; returns its full name. */
+  declare(parent, name) {
+    let full = parent;
+    for (const segment of name.split(".")) {
+      const child = full ? `${full}.${segment}` : segment;
+      const siblings = this.children.get(full) ?? [];
+      if (!siblings.includes(child)) {
+        siblings.push(child);
+        this.children.set(full, siblings);
+      }
+      full = child;
+    }
+    return full;
+  }
+  /** A fresh layer inside `parent` that nothing can reopen. */
+  declareAnonymous(parent) {
+    return this.declare(parent, `\0${this.anonymous++}`);
+  }
+  /**
+   * Each layer's rank for normal declarations, higher winning: a layer's
+   * sublayers rank below its own rules, in declaration order, and unlayered
+   * rules (`''`) rank above every layer.
+   */
+  ranks() {
+    const out = /* @__PURE__ */ new Map();
+    const visit = (name) => {
+      for (const child of this.children.get(name) ?? []) visit(child);
+      out.set(name, out.size);
+    };
+    visit("");
+    return out;
+  }
+};
+function parseStylesheet(text, firstOrder = 0, ctx = {}, layers = new CascadeLayers()) {
   const src = stripComments(text).replace(/<!\[CDATA\[|\]\]>|<!--|-->/g, " ");
   const rules = [];
-  let order = firstOrder;
-  let i = 0;
-  let preludeStart = 0;
-  while (i < src.length) {
+  parseRuleList(src, 0, src.length, "", ctx, rules, { order: firstOrder, importsAllowed: true, layers });
+  return rules;
+}
+var IDENT2 = "-?[a-zA-Z_\\u0080-\\uffff][\\w\\u0080-\\uffff-]*";
+var LAYER_NAME = new RegExp(`^${IDENT2}(?:\\.${IDENT2})*$`);
+function layerNames(prelude) {
+  if (!prelude.trim()) return [];
+  const names = splitTopLevel(prelude, ",").map((n) => n.trim());
+  return names.every((n) => LAYER_NAME.test(n)) ? names : null;
+}
+var AT_RULE = /^@([\w-]+)\s*([\s\S]*)$/;
+function parseRuleList(src, from, to, layer, ctx, rules, state) {
+  let i = from;
+  let preludeStart = from;
+  while (i < to) {
     const ch = src[i];
     if (ch === '"' || ch === "'") {
       i = skipString(src, i);
       continue;
     }
     if (ch === ";") {
+      const text = src.slice(preludeStart, i).trim();
+      const statement = AT_RULE.exec(text);
+      const name = statement?.[1].toLowerCase();
+      if (name === "import" && state.importsAllowed) {
+        ctx.onWarn?.(`@import ${statement?.[2]} is not fetched; its rules do not apply`);
+      } else if (name === "layer") {
+        for (const n of layerNames(statement?.[2] ?? "") ?? []) state.layers.declare(layer, n);
+      } else if (text && name !== "charset") {
+        state.importsAllowed = false;
+      }
       i++;
       preludeStart = i;
       continue;
@@ -466,41 +1020,77 @@ function parseStylesheet(text, firstOrder = 0) {
       continue;
     }
     const prelude = src.slice(preludeStart, i).trim();
-    const end = skipBlock(src, i);
-    if (!prelude.startsWith("@") && prelude) {
+    const end = Math.min(skipBlock(src, i), to);
+    const at = AT_RULE.exec(prelude);
+    state.importsAllowed = false;
+    if (at) {
+      const name = at[1].toLowerCase();
+      const names = name === "layer" ? layerNames(at[2]) : null;
+      if (names && names.length <= 1) {
+        const inner = names.length ? state.layers.declare(layer, names[0]) : state.layers.declareAnonymous(layer);
+        parseRuleList(src, i + 1, end - 1, inner, ctx, rules, state);
+      } else if (conditionHolds(name, at[2], ctx)) {
+        parseRuleList(src, i + 1, end - 1, layer, ctx, rules, state);
+      }
+    } else if (prelude) {
       const declarations = parseDeclarations(src.slice(i + 1, end - 1));
       for (const raw of splitTopLevel(prelude, ",")) {
         const selector = raw.trim();
         if (selector) {
-          rules.push({ selector, declarations, specificity: specificity(selector), order: order++ });
+          rules.push({ selector, declarations, specificity: specificity(selector), order: state.order++, layer });
         }
       }
     }
     i = end;
     preludeStart = end;
   }
-  return rules;
 }
-function appliesAsCss(style) {
+function conditionHolds(name, condition2, ctx) {
+  if (name === "media") return evaluateMediaQuery(condition2, ctx.media ?? DEFAULT_MEDIA_ENVIRONMENT);
+  if (name === "supports") return evaluateSupports(condition2, { selector: ctx.selector });
+  return false;
+}
+function appliesAsCss(style, ctx) {
   const type = style.getAttribute("type")?.trim().toLowerCase();
   if (type && type !== "text/css") return false;
-  const media = style.getAttribute("media")?.trim().toLowerCase();
-  if (!media) return true;
-  return media.split(",").some((m) => m.trim() === "all" || m.trim() === "screen");
+  return evaluateMediaQuery(style.getAttribute("media") ?? "", ctx.media ?? DEFAULT_MEDIA_ENVIRONMENT);
 }
 var sheetCache = /* @__PURE__ */ new WeakMap();
+function bindStylesheets(doc, media, onWarn) {
+  sheetCache.set(doc, collectRules(doc, media, onWarn));
+}
 function documentRules(doc) {
   const cached = sheetCache.get(doc);
   if (cached) return cached;
+  const root = doc.documentElement;
+  const rules = collectRules(doc, root ? mediaEnvironmentFor(root) : DEFAULT_MEDIA_ENVIRONMENT);
+  sheetCache.set(doc, rules);
+  return rules;
+}
+function collectRules(doc, media, onWarn) {
+  const ctx = { media, onWarn, selector: (s) => isValidSelector(doc, s) };
+  const layers = new CascadeLayers();
   const rules = [];
   const styles = doc.getElementsByTagNameNS("*", "style");
   for (let i = 0; i < styles.length; i++) {
-    if (!appliesAsCss(styles[i])) continue;
-    rules.push(...parseStylesheet(styles[i].textContent ?? "", rules.length));
+    if (!appliesAsCss(styles[i], ctx)) continue;
+    rules.push(...parseStylesheet(styles[i].textContent ?? "", rules.length, ctx, layers));
+  }
+  const ranks = layers.ranks();
+  return rules.map((r) => ({ ...r, rank: ranks.get(r.layer) ?? 0 })).sort((x, y) => x.rank - y.rank || compareCascade(x, y));
+}
+function compareCascade(x, y) {
+  return compareSpecificity(x.specificity, y.specificity) || x.order - y.order;
+}
+function isValidSelector(doc, selector) {
+  const root = doc.documentElement;
+  if (!root || !selector.trim()) return false;
+  try {
+    root.matches(selector);
+    return true;
+  } catch {
+    return false;
   }
-  rules.sort((x, y) => compareSpecificity(x.specificity, y.specificity) || x.order - y.order);
-  sheetCache.set(doc, rules);
-  return rules;
 }
 function matches(el, selector) {
   try {
@@ -517,8 +1107,9 @@ function authorDeclarations(el) {
   const matched = rules.filter((r) => matches(el, r.selector));
   const inline = parseDeclarations(el.getAttribute("style") ?? "");
   const out = /* @__PURE__ */ new Map();
-  for (const important of [false, true]) {
-    for (const r of matched) {
+  const importantOrder = [...matched].sort((x, y) => y.rank - x.rank || compareCascade(x, y));
+  for (const [important, ordered] of [[false, matched], [true, importantOrder]]) {
+    for (const r of ordered) {
       for (const d of r.declarations) if (d.important === important) out.set(d.prop, d.value);
     }
     for (const d of inline) if (d.important === important) out.set(d.prop, d.value);
@@ -531,18 +1122,25 @@ function ownProp(el, prop) {
 }
 function deriveStyle(parent, el) {
   let next = null;
-  for (const prop of INHERITABLE) {
-    const own = ownProp(el, prop);
-    if (own == null || own === "inherit") continue;
+  for (const prop of INHERITED_PROPERTIES) {
+    const own2 = ownProp(el, prop);
+    if (own2 == null || own2 === "inherit" || prop === "color" && own2.trim().toLowerCase() === "currentcolor") continue;
     if (!next) next = { ...parent };
-    next[prop] = own;
+    next[prop] = own2;
   }
   return next ?? parent;
 }
 function resolveCurrentColor(raw, style) {
   if (raw == null) return null;
-  if (raw.trim().toLowerCase() === "currentcolor") return style["color"] ?? "#000000";
-  return raw;
+  if (raw.trim().toLowerCase() !== "currentcolor") return raw;
+  const color = readProperty("color", style["color"]);
+  return color == null || color.toLowerCase() === "currentcolor" ? "#000000" : color;
+}
+function ownValue(el, prop, warn) {
+  return readProperty(prop, ownProp(el, prop), warn);
+}
+function styleValue(style, prop, warn) {
+  return readProperty(prop, style[prop], warn);
 }
 
 // src/elements.ts
@@ -578,7 +1176,11 @@ function patternXml(id, paint, onWarn) {
     `width="${trimNumber(geometry.size)}"`,
     `height="${trimNumber(geometry.size)}"`
   ];
-  if (origin.x !== 0 || origin.y !== 0) {
+  const [a, b, c, d] = paint.transform ?? [1, 0, 0, 1];
+  const placement = formatMatrix([a, b, c, d, origin.x, origin.y]);
+  if (paint.transform && !isIdentity([a, b, c, d, 0, 0]) && placement) {
+    attrs.push(`patternTransform="${placement}"`);
+  } else if (origin.x !== 0 || origin.y !== 0) {
     attrs.push(`x="${trimNumber(origin.x)}"`, `y="${trimNumber(origin.y)}"`);
   }
   attrs.push(`data-weasel-tile="${escapeAttr(JSON.stringify(spec))}"`);
@@ -638,8 +1240,11 @@ function readPattern(el, onWarn) {
   }
   const x = parseFloat(el.getAttribute("x") ?? "0");
   const y = parseFloat(el.getAttribute("y") ?? "0");
+  const m = parseTransform(el.getAttribute("patternTransform"), onWarn);
+  const origin = applyMatrix(m, x, y);
   const paint = { fill: "pattern", pattern: spec };
-  if (x !== 0 || y !== 0) paint.origin = { x, y };
+  if (origin.x !== 0 || origin.y !== 0) paint.origin = origin;
+  if (!isIdentity([m[0], m[1], m[2], m[3], 0, 0])) paint.transform = [m[0], m[1], m[2], m[3]];
   return paint;
 }
 function escapeAttr(s) {
@@ -647,8 +1252,8 @@ function escapeAttr(s) {
 }
 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 { 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;
@@ -682,13 +1287,18 @@ function serializePathD(path) {
 // src/gradients.ts
 var WEASEL_NS = "urn:weasel-js:svg";
 var WEASEL_NS_PREFIX = "wzl";
-function hasNativeSvgForm(paint) {
-  const kind = paint.fill ?? "solid";
+function nativeSvgKind(kind) {
   return kind === "solid" || kind === "linear-gradient" || kind === "radial-gradient" || kind === "pattern";
 }
+function hasNativeSvgForm(paint) {
+  return nativeSvgKind(paint.fill ?? "solid");
+}
 var INTERPOLATE_SPACES = /* @__PURE__ */ new Set(["rgb", "oklab", "oklch"]);
+function nativeSvgSpace(space) {
+  return !space || space === "rgb";
+}
 function interpolateAttr(space) {
-  if (!space || space === "rgb") return "";
+  if (nativeSvgSpace(space)) return "";
   return ` ${WEASEL_NS_PREFIX}:interpolate="${space}"`;
 }
 function readInterpolate(el, elements) {
@@ -698,7 +1308,7 @@ function readInterpolate(el, elements) {
 }
 function usesInterpolateAttr(paint) {
   const space = paint.interpolate;
-  return space != null && space !== "rgb" && INTERPOLATE_SPACES.has(space);
+  return !nativeSvgSpace(space) && INTERPOLATE_SPACES.has(space);
 }
 function localName(tag) {
   const i = tag.indexOf(":");
@@ -751,11 +1361,11 @@ function inheritedAttr(el, elements, name, seen = /* @__PURE__ */ new Set()) {
   return inheritedAttr(ref, elements, name, seen);
 }
 function inheritedStops(el, elements, onWarn, seen = /* @__PURE__ */ new Set()) {
-  const own = readStops(el, onWarn);
-  if (own.length > 0) return own;
+  const own2 = readStops(el, onWarn);
+  if (own2.length > 0) return own2;
   seen.add(el);
   const ref = hrefTarget(el, elements);
-  if (!ref || seen.has(ref)) return own;
+  if (!ref || seen.has(ref)) return own2;
   return inheritedStops(ref, elements, onWarn, seen);
 }
 function parseRatio(raw) {
@@ -771,11 +1381,9 @@ function readStops(el, onWarn) {
     const offsetRaw = parseRatio(c.getAttribute("offset") ?? "0");
     const offset = Number.isFinite(offsetRaw) ? offsetRaw : 0;
     const colorAttr = ownProp(c, "stop-color") ?? "#000000";
-    const parsed = parsePaintAttr(colorAttr);
-    if (parsed && parsed.kind === "solid") {
-      const opacityAttr = ownProp(c, "stop-opacity");
-      const own = opacityAttr != null ? parseRatio(opacityAttr) : NaN;
-      const alpha = Number.isFinite(own) ? own : parsed.alpha;
+    const parsed = readProperty("stop-color", colorAttr, onWarn);
+    if (parsed) {
+      const alpha = ownValue(c, "stop-opacity") ?? parsed.alpha;
       stops.push({ offset, color: alpha < 1 ? applyAlpha(parsed.color, alpha) : parsed.color });
     } else {
       onWarn?.(`gradient stop has unrecognized stop-color: ${colorAttr}`);
@@ -877,12 +1485,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 when the
-  // registry knows it, so a synthetic id would come back as a stranger.
-  markerKeys = [];
-  markerKeySet = /* @__PURE__ */ new Set();
+  // Marker defs referenced by any stroke, by `<defs>` id in first-use order.
+  // An unsized reference's 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 when the registry knows it, so a synthetic id would come
+  // back as a stranger. A sized one gets a def of its own, stamped with its
+  // key and size so the parser can read the reference back whole.
+  markers = /* @__PURE__ */ new Map();
   // Clip paths, in first-use order. Identity, not value: two groups clipped by
   // equal outlines get a def each, which costs bytes and misleads nobody.
   clips = [];
@@ -907,22 +1516,26 @@ var PaintServerRegistry = class {
     if (hasNativeSvgForm(paint)) return `url(#${id})`;
     return `url(#${id}) ${paintFallback(paint)}`;
   }
+  /** The paint kind of each registered paint, once, in first-use order. */
+  paintKinds() {
+    return [...new Set(this.order.map((paint) => paint.fill ?? "solid"))];
+  }
   /** Whether any registered paint serializes outside SVG's own vocabulary, so
    *  the root has to declare {@link WEASEL_NS}. */
   usesPrivateNamespace() {
-    return this.order.some((paint) => !hasNativeSvgForm(paint) || usesInterpolateAttr(paint));
+    return this.order.some((paint) => !hasNativeSvgForm(paint) || usesInterpolateAttr(paint)) || [...this.markers.values()].some((m) => m.size !== void 0 || writesInset(getMarker(m.key)));
   }
-  /** 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) {
+  /** The `<defs>` id for a marker reference — the key itself when it has no
+   *  size, else the key suffixed with the size. `undefined` when nothing is
+   *  registered under the key, so a caller emits no attribute at all rather
+   *  than a `url(#…)` pointing at a def that will never be written. */
+  markerId(ref) {
+    const key = typeof ref === "string" ? ref : ref.key;
+    const size = typeof ref === "string" ? void 0 : ref.size;
     if (getMarker(key) === void 0) return void 0;
-    if (!this.markerKeySet.has(key)) {
-      this.markerKeySet.add(key);
-      this.markerKeys.push(key);
-    }
-    return key;
+    const id = size === void 0 ? key : `${key}-s${typeof size === "number" ? trimNumber(size) : `${trimNumber(size.px)}px`}`;
+    if (!this.markers.has(id)) this.markers.set(id, size === void 0 ? { key } : { key, size });
+    return id;
   }
   /** Mint (or recall) the `<defs>` id for a clip outline. */
   clipId(path) {
@@ -936,17 +1549,22 @@ var PaintServerRegistry = class {
   /** Emit `<defs>...</defs>` XML for every registered paint server, marker
    *  and clip path. */
   toDefsXml(onWarn) {
-    if (this.order.length === 0 && this.markerKeys.length === 0 && this.clips.length === 0) {
+    if (this.order.length === 0 && this.markers.size === 0 && this.clips.length === 0) {
       return "";
     }
     const parts = ["<defs>"];
     for (const paint of this.order) {
       parts.push(paintServerXml(this.byPaint.get(paint), paint, onWarn));
     }
-    for (const key of this.markerKeys) {
+    for (const [id, { key, size }] of this.markers) {
       const entry = getMarker(key);
       if (!entry) continue;
-      parts.push(entry.toSvg ? entry.toSvg(key, entry) : defaultMarkerXml(key, entry, onWarn));
+      if (entry.toSvg) {
+        if (size !== void 0) onWarn?.(`marker "${key}" writes its own <marker> def, which cannot carry a reference's size; written at its own size`);
+        parts.push(entry.toSvg(id, entry));
+      } else {
+        parts.push(defaultMarkerXml(id, entry, onWarn, key, size));
+      }
     }
     for (const path of this.clips) {
       parts.push(
@@ -957,13 +1575,19 @@ var PaintServerRegistry = class {
     return parts.join("");
   }
 };
-function defaultMarkerXml(id, entry, onWarn) {
-  const path = entry.path({ size: 1, stroke: { paint: { fill: "solid", color: "#000" } } });
+function writesInset(entry) {
+  return entry !== void 0 && !entry.toSvg && (entry.inset ?? 0) !== 0;
+}
+function defaultMarkerXml(id, entry, onWarn, key, size) {
+  const unit = size === void 0 ? 1 : resolveMarkerSize({ key: key ?? id, size }, 1);
+  const path = entry.path({ size: unit, stroke: { paint: { fill: "solid", color: "#000" } } });
   const d = serializePathD(path);
   const fill = markerPaintAttrs("fill", entry.fill, id, onWarn);
-  const outline = entry.outline ? ` ${markerPaintAttrs("stroke", entry.outline.paint, id, onWarn)} stroke-width="${trimNumber(entry.outline.width)}" stroke-linecap="round" stroke-linejoin="round"` : "";
+  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";
-  return `<marker id="${id}" markerUnits="strokeWidth" markerWidth="8" markerHeight="8" refX="0" refY="0" orient="${orient}" overflow="visible"><path d="${d}" ${fill}${outline}/></marker>`;
+  const units = size === void 0 ? 'markerUnits="strokeWidth" markerWidth="8" markerHeight="8"' : `markerUnits="userSpaceOnUse" markerWidth="${trimNumber(8 * unit)}" markerHeight="${trimNumber(8 * unit)}" ${WEASEL_NS_PREFIX}:key="${key}" ${WEASEL_NS_PREFIX}:size="${typeof size === "number" ? trimNumber(size) : `${trimNumber(size.px)}px`}"`;
+  const inset = writesInset(entry) ? ` ${WEASEL_NS_PREFIX}:inset="${trimNumber(entry.inset)}"` : "";
+  return `<marker id="${id}" ${units}${inset} refX="0" refY="0" orient="${orient}" overflow="visible"><path d="${d}" ${fill}${outline}/></marker>`;
 }
 function markerPaintAttrs(attr, paint, id, onWarn) {
   if (paint === "none") return `${attr}="none"`;
@@ -978,9 +1602,10 @@ 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);
+  const kind = getPaintKind(paint.fill);
+  const custom = kind?.toSvg?.(id, paint);
   if (custom) return custom;
-  onWarn?.(`${paint.fill} fill has no vector form \u2014 omitted from <defs>`);
+  onWarn?.(kind ? `${paint.fill} fill has no vector form \u2014 omitted from <defs>` : `${paint.fill} fill is not registered \u2014 omitted from <defs>; a kind loaded on demand needs \`await warmSvg(nodes)\` before a synchronous export`);
   return "";
 }
 function gradientUnitsAttr(units) {
@@ -1059,6 +1684,7 @@ function parseSvg(svg, opts = {}) {
   if (!root || root.tagName.toLowerCase() !== "svg") {
     return { nodes: [], warnings: ["root element is not <svg>"] };
   }
+  bindStylesheets(doc, mediaEnvironmentFor(root, opts.media), onWarn);
   const namespaces = opts.namespaces ?? {};
   const uriToPrefix = /* @__PURE__ */ new Map();
   for (const [prefix, uri] of Object.entries(namespaces)) {
@@ -1076,10 +1702,10 @@ function parseSvg(svg, opts = {}) {
   if (documentMeta) result.documentMeta = documentMeta;
   const viewBox = parseViewBoxAttr(root.getAttribute("viewBox"));
   if (viewBox) result.viewBox = viewBox;
-  const width = parseRootLength(root.getAttribute("width"), "width", onWarn);
-  if (width != null) result.width = width;
-  const height = parseRootLength(root.getAttribute("height"), "height", onWarn);
-  if (height != null) result.height = height;
+  const width2 = parseRootLength(root.getAttribute("width"), "width", onWarn);
+  if (width2 != null) result.width = width2;
+  const height2 = parseRootLength(root.getAttribute("height"), "height", onWarn);
+  if (height2 != null) result.height = height2;
   for (let i = 0; i < root.children.length; i++) {
     const c = root.children[i];
     if (c.tagName.toLowerCase() === "title") {
@@ -1244,7 +1870,7 @@ function parseElement(el, ctm, style, gradients, clips, onWarn, uriToPrefix) {
     const childCtm = multiply(ctm, local);
     const childStyle = deriveStyle(style, el);
     const children = parseChildren(el, childCtm, childStyle, gradients, clips, onWarn, uriToPrefix);
-    const opacity2 = readOpacityAttr(el, "opacity");
+    const opacity2 = ownValue(el, "opacity");
     const group = { kind: "group", children };
     const clip = clipFor(el, childCtm, clips, onWarn);
     if (clip) group.clip = clip;
@@ -1306,11 +1932,10 @@ function parseElement(el, ctm, style, gradients, clips, onWarn, uriToPrefix) {
     }
   }
   const leafStyle = deriveStyle(style, el);
-  const fill = readPaint(leafStyle, "fill", "#000000", gradients, onWarn);
+  const fill = readPaint2(leafStyle, "fill", "#000000", gradients, onWarn);
   const stroke = readStroke(leafStyle, gradients, onWarn, isNonScalingStroke(el));
-  const opacity = readOpacityAttr(el, "opacity");
-  const fillRuleRaw = leafStyle["fill-rule"] ?? null;
-  if (fillRuleRaw === "evenodd" && path.kind === "polygon") {
+  const opacity = ownValue(el, "opacity");
+  if (styleValue(leafStyle, "fill-rule") === "evenodd" && path.kind === "polygon") {
     path = { ...path, fillRule: "evenodd" };
   }
   const node = { kind: "path", path, fill };
@@ -1376,10 +2001,10 @@ function polygonToRectIfAxisAligned(p) {
   if (y0 !== y1 || x1 !== x2 || y2 !== y3 || x3 !== x0) return null;
   const x = Math.min(x0, x1);
   const y = Math.min(y0, y2);
-  const width = Math.abs(x1 - x0);
-  const height = Math.abs(y2 - y1);
-  if (width === 0 || height === 0) return null;
-  return { kind: "rect", x, y, width, height };
+  const width2 = Math.abs(x1 - x0);
+  const height2 = Math.abs(y2 - y1);
+  if (width2 === 0 || height2 === 0) return null;
+  return { kind: "rect", x, y, width: width2, height: height2 };
 }
 function pathAabb(path) {
   if (path.kind === "rect") {
@@ -1387,22 +2012,21 @@ function pathAabb(path) {
   }
   return boundsOfPath(path);
 }
-function readPaint(style, attr, defaultColor, gradients, onWarn) {
+function readPaint2(style, attr, defaultColor, gradients, onWarn) {
   const raw = resolveCurrentColor(style[attr] ?? null, style);
-  const opacityRaw = style[`${attr}-opacity`] ?? null;
-  const opacity = opacityRaw != null ? clamp01(parseFloat(opacityRaw)) : void 0;
+  const opacity = styleValue(style, `${attr}-opacity`, onWarn);
   if (raw == null) {
     if (attr === "stroke") return { kind: "none" };
     const out2 = { kind: "solid", color: defaultColor };
     if (opacity != null) out2.opacity = opacity;
     return out2;
   }
-  const parsed = parsePaintAttr(raw);
+  const parsed = readProperty(attr, raw, onWarn);
   if (!parsed) {
     onWarn(`unrecognized ${attr} value: ${raw}`);
     return { kind: "solid", color: defaultColor };
   }
-  if (parsed.kind === "none") return { kind: "none" };
+  if (parsed.kind === "none" || parsed.kind === "context") return { kind: "none" };
   if (parsed.kind === "ref") {
     const paint = gradients.get(parsed.id);
     if (!paint) {
@@ -1415,7 +2039,7 @@ function readPaint(style, attr, defaultColor, gradients, onWarn) {
       onWarn(`${attr} references unknown gradient #${parsed.id}`);
       return { kind: "solid", color: defaultColor };
     }
-    return { kind: "gradient", paint };
+    return { kind: "gradient", paint: opacity != null ? { ...paint, opacity } : paint };
   }
   const out = { kind: "solid", color: parsed.color };
   const a = opacity ?? (parsed.alpha < 1 ? parsed.alpha : void 0);
@@ -1426,59 +2050,30 @@ function readStroke(style, gradients, onWarn, nonScaling = false) {
   const inheritedStroke = style["stroke"] ?? null;
   const inheritedWidth = style["stroke-width"] ?? null;
   if (inheritedStroke == null && inheritedWidth == null) return void 0;
-  const paint = readPaint(style, "stroke", "#000000", gradients, onWarn);
+  const paint = readPaint2(style, "stroke", "#000000", gradients, onWarn);
   if (paint.kind === "none") return void 0;
-  const n = inheritedWidth != null ? parseFloat(inheritedWidth) : 1;
+  const n = styleValue(style, "stroke-width", onWarn) ?? 1;
   const stroke = { paint, width: nonScaling ? { px: n } : n };
-  const opacityRaw = style["stroke-opacity"] ?? null;
-  if (opacityRaw != null) {
-    const a = clamp01(parseFloat(opacityRaw));
-    if (Number.isFinite(a)) stroke.opacity = a;
-  }
-  const cap = style["stroke-linecap"] ?? null;
-  if (cap === "butt" || cap === "round" || cap === "square") {
-    stroke.cap = cap;
-  } else if (cap != null) {
-    onWarn(`unsupported stroke-linecap: ${cap}`);
-  }
-  const join = style["stroke-linejoin"] ?? null;
-  if (join === "miter" || join === "round" || join === "bevel") {
-    stroke.join = join;
-  } else if (join === "arcs" || join === "miter-clip") {
-    onWarn(`stroke-linejoin "${join}" not supported; falling back to miter`);
-    stroke.join = "miter";
-  } else if (join != null) {
-    onWarn(`unsupported stroke-linejoin: ${join}`);
-  }
-  const dashAttr = style["stroke-dasharray"] ?? null;
-  if (dashAttr != null && dashAttr.trim() !== "" && dashAttr.trim() !== "none") {
-    const parsed = parseDashArray(dashAttr);
-    if (parsed) stroke.dash = parsed;
-    else onWarn(`unrecognized stroke-dasharray: ${dashAttr}`);
-  }
-  const miterAttr = style["stroke-miterlimit"] ?? null;
-  if (miterAttr != null) {
-    const m = parseFloat(miterAttr);
-    if (Number.isFinite(m) && m >= 1) stroke.miterLimit = m;
-    else onWarn(`unrecognized stroke-miterlimit: ${miterAttr}`);
-  }
+  const opacity = styleValue(style, "stroke-opacity", onWarn);
+  if (opacity != null) stroke.opacity = opacity;
+  const cap = styleValue(style, "stroke-linecap", onWarn);
+  if (cap) stroke.cap = cap;
+  const join = styleValue(style, "stroke-linejoin", onWarn);
+  if (join) stroke.join = join;
+  const dash = styleValue(style, "stroke-dasharray", onWarn);
+  if (dash) stroke.dash = dash;
+  const miterLimit = styleValue(style, "stroke-miterlimit", onWarn);
+  if (miterLimit != null) stroke.miterLimit = miterLimit;
   for (const [attr, field] of [
     ["marker-start", "markerStart"],
     ["marker-mid", "markerMid"],
     ["marker-end", "markerEnd"]
   ]) {
-    const id = parseMarkerRef(style[attr] ?? null);
-    if (id !== void 0) stroke[field] = id;
+    const id = styleValue(style, attr, onWarn);
+    if (id) 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",
@@ -1492,7 +2087,7 @@ var STROKE_KEYS = [
   "marker-end"
 ];
 function isNonScalingStroke(el) {
-  return ownProp(el, "vector-effect") === "non-scaling-stroke";
+  return ownValue(el, "vector-effect") === "non-scaling-stroke";
 }
 function ownStrokeStyle(el) {
   const out = {};
@@ -1522,66 +2117,6 @@ function coreStroke(stroke) {
   if (stroke.markerEnd) out.markerEnd = stroke.markerEnd;
   return out;
 }
-function parseDashArray(s) {
-  const tokens = s.trim().split(/[\s,]+/).filter(Boolean);
-  if (tokens.length === 0) return null;
-  const nums = [];
-  for (const t of tokens) {
-    const n = parseFloat(t);
-    if (!Number.isFinite(n) || n < 0) return null;
-    nums.push(n);
-  }
-  return nums.length % 2 === 1 ? [...nums, ...nums] : nums;
-}
-function readOpacityAttr(el, name) {
-  const raw = ownProp(el, name);
-  if (raw == null) return void 0;
-  const n = parseFloat(raw);
-  return Number.isFinite(n) ? clamp01(n) : void 0;
-}
-function clamp01(n) {
-  return n < 0 ? 0 : n > 1 ? 1 : n;
-}
-function parseLetterSpacing(raw, onWarn) {
-  const n = parseFloat(raw);
-  if (!Number.isFinite(n)) return void 0;
-  const unit = /^-?[\d.]+([a-z%]+)$/i.exec(raw.trim())?.[1]?.toLowerCase();
-  if (unit && unit !== "px") {
-    onWarn(`letter-spacing "${raw}" uses unit "${unit}", which is not converted; treated as ${n} world units`);
-  }
-  return n;
-}
-function parseTextDecoration(raw) {
-  if (raw == null) return {};
-  const tokens = raw.trim().toLowerCase().split(/\s+/);
-  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 = imageHref(el);
@@ -1619,7 +2154,7 @@ function imageNodeAt(boxEl, ownerEl, href, ctm, onWarn) {
     width: Math.abs(x1 - x0),
     height: Math.abs(y1 - y0)
   };
-  const opacity = readOpacityAttr(ownerEl, "opacity");
+  const opacity = ownValue(ownerEl, "opacity");
   if (opacity != null) node.opacity = opacity;
   const localTransform = parseTransform(ownerEl.getAttribute("transform"), onWarn);
   if (!isIdentity(localTransform)) {
@@ -1724,8 +2259,7 @@ function parseTextElement(el, ctm, style, gradients, onWarn) {
   const dominantBaseline = el.getAttribute("dominant-baseline");
   const explicitTopAnchor = dominantBaseline === "text-before-edge" || dominantBaseline === "hanging";
   const topY = explicitTopAnchor ? ay : ay - fontSize;
-  const ownShift = ownProp(el, "baseline-shift");
-  const inheritedShift = ownShift != null ? parseBaselineShift(ownShift, onWarn) : {};
+  const inheritedShift = ownValue(el, "baseline-shift", onWarn) ?? {};
   const runs = [];
   for (let i = 0; i < el.childNodes.length; i++) {
     const child = el.childNodes[i];
@@ -1749,16 +2283,16 @@ function parseTextElement(el, ctm, style, gradients, onWarn) {
   const plain = runs.map((r) => r.text).join("");
   const dataW = num2(el.getAttribute("data-weasel-width"), NaN);
   const dataH = num2(el.getAttribute("data-weasel-height"), NaN);
-  const width = Number.isFinite(dataW) ? dataW : laidOutWidth(runs, textStyle, plain);
+  const width2 = Number.isFinite(dataW) ? dataW : laidOutWidth(runs, textStyle, plain);
   const lines = (plain.match(/\n/g)?.length ?? 0) + 1;
-  const height = Number.isFinite(dataH) ? dataH : fontSize * lineHeight * lines;
-  const opacity = readOpacityAttr(el, "opacity");
+  const height2 = Number.isFinite(dataH) ? dataH : fontSize * lineHeight * lines;
+  const opacity = ownValue(el, "opacity");
   const node = {
     kind: "text",
-    x: ax - anchorOffset(textStyle, width),
+    x: ax - anchorOffset(textStyle, width2),
     y: topY,
-    width,
-    height,
+    width: width2,
+    height: height2,
     text: plain
   };
   const hasStyling = runs.some(
@@ -1766,6 +2300,7 @@ function parseTextElement(el, ctm, style, gradients, onWarn) {
   );
   if (hasStyling) node.runs = runs;
   if (el.getAttribute("data-weasel-wrap") === "true") textStyle.wrap = true;
+  if (el.getAttribute("data-weasel-align") === "justify") textStyle.align = "justify";
   const va = el.getAttribute("data-weasel-vertical-align");
   if (va === "center" || va === "bottom") node.verticalAlign = va;
   if (Object.keys(textStyle).length > 0) node.style = textStyle;
@@ -1790,47 +2325,36 @@ function parseTextElement(el, ctm, style, gradients, onWarn) {
   }
   return node;
 }
-var TEXT_TRANSFORMS = /* @__PURE__ */ new Set(["none", "uppercase", "lowercase", "capitalize"]);
-function parseTextTransform(raw) {
-  const v = raw?.trim().toLowerCase();
-  return v !== void 0 && TEXT_TRANSFORMS.has(v) ? v : void 0;
-}
 function readTspanRun(el, gradients, style, onWarn) {
   const text = el.textContent ?? "";
   const run = { text };
-  const fw = ownProp(el, "font-weight");
-  if (fw === "bold" || fw === "700" || fw === "bolder") run.bold = true;
-  const fs = ownProp(el, "font-style");
-  if (fs === "italic" || fs === "oblique") run.italic = true;
-  const ff = ownProp(el, "font-family");
+  const fw = ownValue(el, "font-weight", onWarn);
+  if (fw === "bold" || fw === "bolder" || fw === 700) run.bold = true;
+  else if (fw === "normal") run.fontWeight = 400;
+  else if (typeof fw === "number") run.fontWeight = fw;
+  if (ownValue(el, "font-style", onWarn) === "italic") run.italic = true;
+  const ff = ownValue(el, "font-family", onWarn);
   if (ff) run.fontFamily = ff;
-  const sz = ownProp(el, "font-size");
-  if (sz != null) {
-    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 transform = parseTextTransform(ownProp(el, "text-transform"));
+  const size = ownValue(el, "font-size", onWarn);
+  if (size?.fontSize != null) run.fontSize = size.fontSize;
+  if (size?.fontScale != null) run.fontScale = size.fontScale;
+  const ls = ownValue(el, "letter-spacing", onWarn);
+  if (ls != null) run.letterSpacing = ls;
+  const shift = ownValue(el, "baseline-shift", onWarn);
+  if (shift?.script != null) run.script = shift.script;
+  if (shift?.baselineShift != null) run.baselineShift = shift.baselineShift;
+  const decoration = ownValue(el, "text-decoration", onWarn);
+  if (decoration?.underline) run.underline = true;
+  if (decoration?.strikethrough) run.strikethrough = true;
+  if (decoration?.overline) run.overline = true;
+  const transform = ownValue(el, "text-transform", onWarn);
   if (transform) run.textTransform = transform;
+  const variant = ownValue(el, "font-variant", onWarn);
+  if (variant) run.fontVariantCaps = variant;
   const tspanStyle = deriveStyle(style, el);
   const fillAttr = resolveCurrentColor(ownProp(el, "fill"), tspanStyle);
   if (fillAttr) {
-    const parsed = parsePaintAttr(fillAttr);
+    const parsed = readProperty("fill", fillAttr);
     if (parsed?.kind === "solid") {
       run.fill = { fill: "solid", color: parsed.color };
     } else if (parsed?.kind === "ref") {
@@ -1845,44 +2369,41 @@ function readTspanRun(el, gradients, style, onWarn) {
 }
 function readTextStyle(style, onWarn) {
   const out = {};
-  const sz = style["font-size"];
-  if (sz != null) {
-    const n = parseFloat(sz);
-    if (Number.isFinite(n)) out.fontSize = n;
+  const size = styleValue(style, "font-size", onWarn);
+  if (size?.fontSize != null) out.fontSize = size.fontSize;
+  else if (size?.fontScale != null) {
+    onWarn(`font-size "${style["font-size"]}" on <text> is resolved against the 16px default`);
+    out.fontSize = 16 * size.fontScale;
   }
-  const ff = style["font-family"];
+  const ff = styleValue(style, "font-family", onWarn);
   if (ff) out.fontFamily = ff;
-  const fw = style["font-weight"];
-  if (fw != null) {
-    const n = parseFloat(fw);
-    out.fontWeight = Number.isFinite(n) ? n : fw;
-  }
-  const fs = style["font-style"];
-  if (fs === "italic" || fs === "normal") out.fontStyle = fs;
-  if (style["direction"] === "rtl") out.direction = "rtl";
+  const fw = styleValue(style, "font-weight", onWarn);
+  if (fw != null) out.fontWeight = fw;
+  const fs = styleValue(style, "font-style", onWarn);
+  if (fs) out.fontStyle = fs;
+  if (styleValue(style, "direction") === "rtl") out.direction = "rtl";
   const ltr = out.direction !== "rtl";
-  const anchor = style["text-anchor"] ?? (ltr ? void 0 : "start");
+  const anchor = styleValue(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 = ltr ? "right" : "left";
-  const ls = style["letter-spacing"];
-  if (ls != null) {
-    const n = parseLetterSpacing(ls, onWarn);
-    if (n != null) out.letterSpacing = n;
-  }
-  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;
-  const transform = parseTextTransform(style["text-transform"] ?? null);
+  const ls = styleValue(style, "letter-spacing", onWarn);
+  if (ls != null) out.letterSpacing = ls;
+  const decoration = styleValue(style, "text-decoration", onWarn);
+  if (decoration?.underline) out.underline = true;
+  if (decoration?.strikethrough) out.strikethrough = true;
+  if (decoration?.overline) out.overline = true;
+  const transform = styleValue(style, "text-transform", onWarn);
   if (transform && transform !== "none") out.textTransform = transform;
+  const variant = styleValue(style, "font-variant", onWarn);
+  if (variant === "small-caps") out.fontVariantCaps = variant;
   return out;
 }
 function readTextPaint(style, gradients, onWarn, nonScalingStroke = false) {
   const out = {};
   const fillRaw = resolveCurrentColor(style["fill"] ?? null, style);
   if (fillRaw) {
-    const parsed = parsePaintAttr(fillRaw);
+    const parsed = readProperty("fill", fillRaw);
     if (parsed?.kind === "solid") {
       out.fill = { fill: "solid", color: parsed.color };
     } else if (parsed?.kind === "ref") {
@@ -1912,8 +2433,8 @@ function ingestMarkers(root, nodes, gradients, onWarn) {
     if (id && !defs.has(id)) defs.set(id, all[i]);
   }
   const minted = /* @__PURE__ */ new Map();
-  const resolve = (stroke, width) => {
-    const w = width === void 0 ? 1 : typeof width === "number" ? width : width.px;
+  const resolve = (stroke, width2) => {
+    const w = width2 === void 0 ? 1 : typeof width2 === "number" ? width2 : width2.px;
     for (const [field, role, attr] of MARKER_FIELDS) {
       const id = stroke[field];
       if (typeof id !== "string" || getMarker(id) !== void 0) continue;
@@ -1923,6 +2444,16 @@ function ingestMarkers(root, nodes, gradients, onWarn) {
         delete stroke[field];
         continue;
       }
+      const sized = sizedMarkerRef(el);
+      if (sized) {
+        if (getMarker(sized.key) === void 0 && !minted.has(sized.key)) {
+          const entry2 = markerEntryFrom(el, id, role, resolveMarkerSize(sized, 1), gradients, onWarn);
+          minted.set(sized.key, entry2 && { ...entry2, id: sized.key });
+        }
+        if (minted.get(sized.key) === null) delete stroke[field];
+        else stroke[field] = sized;
+        continue;
+      }
       const cacheKey = `${id}\0${role}\0${w}`;
       if (!minted.has(cacheKey)) minted.set(cacheKey, markerEntryFrom(el, id, role, w, gradients, onWarn));
       const entry = minted.get(cacheKey);
@@ -1945,6 +2476,22 @@ function ingestMarkers(root, nodes, gradients, onWarn) {
   for (const entry of minted.values()) if (entry) out.set(entry.id, entry);
   return [...out.values()];
 }
+function weaselAttr(el, name) {
+  return el.getAttributeNS(WEASEL_NS, name) ?? el.getAttribute(`${WEASEL_NS_PREFIX}:${name}`);
+}
+function sizedMarkerRef(el) {
+  const key = weaselAttr(el, "key");
+  const raw = weaselAttr(el, "size")?.trim();
+  if (!key || !raw) return void 0;
+  const px = raw.endsWith("px");
+  const n = parseFloat(px ? raw.slice(0, -2) : raw);
+  if (!Number.isFinite(n) || n <= 0) return void 0;
+  return { key, size: px ? { px: n } : n };
+}
+function markerInsetAttr(el) {
+  const n = parseFloat(weaselAttr(el, "inset") ?? "");
+  return Number.isFinite(n) && n > 0 ? n : 0;
+}
 function styleAt(el) {
   const chain = [];
   for (let e = el; e; e = e.parentElement) chain.unshift(e);
@@ -1970,13 +2517,12 @@ function markerOrient(raw) {
   return { orient: rad, reverseAtStart: false };
 }
 function markerPaint(style, attr, gradients, onWarn) {
-  const raw = style[attr]?.trim();
-  if (raw === "context-stroke") return "line";
-  if (raw === "context-fill") {
-    onWarn(`a marker's ${attr}="context-fill" is read as the line's stroke paint`);
+  const context = readProperty(attr, style[attr]);
+  if (context?.kind === "context") {
+    if (context.of === "fill") onWarn(`a marker's ${attr}="context-fill" is read as the line's stroke paint`);
     return "line";
   }
-  const paint = readPaint(style, attr, "#000000", gradients, onWarn);
+  const paint = readPaint2(style, attr, "#000000", gradients, onWarn);
   if (paint.kind === "none") return "none";
   if (paint.kind === "gradient") return paint.paint;
   return paint.opacity != null ? { ...solid(paint.color), opacity: paint.opacity } : solid(paint.color);
@@ -2066,6 +2612,7 @@ function markerEntryFrom(el, id, role, strokeWidth, gradients, onWarn) {
     pi += p.path.coords.length;
   }
   const fillRule = parts[0].path.fillRule ?? "nonzero";
+  const inset = markerInsetAttr(el);
   const round = (v) => Math.round(v * 1e4) / 1e4 + 0;
   const hash = shortHash(JSON.stringify([
     Array.from(commands),
@@ -2073,11 +2620,13 @@ function markerEntryFrom(el, id, role, strokeWidth, gradients, onWarn) {
     fillRule,
     fill,
     outline,
-    typeof orient === "number" ? round(orient) : orient
+    typeof orient === "number" ? round(orient) : orient,
+    ...inset !== 0 ? [round(inset)] : []
   ]));
   const key = id.endsWith(`-${hash}`) ? id : `${id}-${hash}`;
   return {
     id: key,
+    reads: [],
     path: ({ size }) => {
       const scaled = new Float32Array(coords.length);
       for (let i = 0; i < coords.length; i++) scaled[i] = coords[i] * size;
@@ -2086,7 +2635,7 @@ function markerEntryFrom(el, id, role, strokeWidth, gradients, onWarn) {
     fill,
     outline,
     orient,
-    inset: 0
+    inset
   };
 }
 function serializeSvg(nodes, opts = {}) {
@@ -2198,16 +2747,10 @@ 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);
+    if (ref !== void 0) registry.markerId(ref);
   }
 }
 function nodeXml(node, registry, namespaces, warn) {
@@ -2296,35 +2839,30 @@ function pathXml(node, registry, namespaces, warn) {
 }
 function paintAttrs(paint, name, registry, includeOpacity = true) {
   if (paint.kind === "none") return [`${name}="none"`];
-  if (paint.kind === "solid") {
-    const out = [`${name}="${paint.color}"`];
-    if (includeOpacity && paint.opacity != null && paint.opacity !== 1) {
-      out.push(`${name}-opacity="${trimNumber(paint.opacity)}"`);
-    }
-    return out;
-  }
-  return [`${name}="${registry.ref(paint.paint)}"`];
+  const out = [`${name}="${paint.kind === "solid" ? 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 strokeWidthAttrs(width) {
-  if (typeof width === "number") return [`stroke-width="${trimNumber(width)}"`];
-  return [`stroke-width="${trimNumber(width.px)}"`, 'vector-effect="non-scaling-stroke"'];
+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 width = stroke.width ?? 1;
-  if (!((typeof width === "object" ? width.px : width) > 0)) return [];
+  const width2 = stroke.width ?? 1;
+  if (!((typeof width2 === "object" ? width2.px : width2) > 0)) return [];
   warnStrokeAlign(stroke.align, warn);
-  const attrs = [];
-  if ("color" in paint) {
-    attrs.push(`stroke="${paint.color}"`);
-    if (paint.opacity != null && paint.opacity !== 1) {
-      attrs.push(`stroke-opacity="${trimNumber(paint.opacity)}"`);
-    }
-  } else {
-    attrs.push(`stroke="${registry.ref(paint)}"`);
-  }
-  attrs.push(...strokeWidthAttrs(width));
+  const attrs = [`stroke="${"color" in paint ? 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) {
@@ -2338,8 +2876,7 @@ function coreStrokeAttrs(stroke, registry, warn) {
   ]) {
     const ref = stroke[field];
     if (ref === void 0) continue;
-    const key = typeof ref === "string" ? ref : ref.key;
-    const id = registry.markerId(key);
+    const id = registry.markerId(ref);
     if (id === void 0) continue;
     attrs.push(`${attr}="url(#${id})"`);
   }
@@ -2349,10 +2886,7 @@ function strokeAttrsFor(stroke, registry, warn) {
   warnStrokeAlign(stroke.align, warn);
   const attrs = paintAttrs(stroke.paint, "stroke", registry, false);
   attrs.push(...strokeWidthAttrs(stroke.width));
-  const opacity = stroke.opacity ?? (stroke.paint.kind === "solid" ? stroke.paint.opacity : void 0);
-  if (opacity != null && opacity !== 1) {
-    attrs.push(`stroke-opacity="${trimNumber(opacity)}"`);
-  }
+  attrs.push(...opacityAttr("stroke-opacity", stroke.opacity ?? svgPaintOpacity(stroke.paint)));
   if (stroke.cap) {
     attrs.push(`stroke-linecap="${stroke.cap}"`);
   }
@@ -2429,18 +2963,21 @@ function textXml(node, registry, namespaces, warn) {
   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?.fontVariantCaps === "small-caps") attrs.push('font-variant="small-caps"');
   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";
+    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}"`);
   }
@@ -2455,14 +2992,8 @@ function textXml(node, registry, namespaces, warn) {
   if (node.fill === null) {
     attrs.push('fill="none"');
   } else 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 {
-      attrs.push(`fill="${registry.ref(node.fill)}"`);
-    }
+    attrs.push(`fill="${"color" in node.fill ? node.fill.color : registry.ref(node.fill)}"`);
+    attrs.push(...opacityAttr("fill-opacity", node.fill.opacity));
   }
   for (const a of coreStrokeAttrs(node.stroke, registry, warn)) attrs.push(a);
   if (node.opacity != null && node.opacity !== 1) {
@@ -2474,17 +3005,25 @@ function textXml(node, registry, namespaces, warn) {
     const deg = node.rotation * 180 / Math.PI;
     attrs.push(`transform="rotate(${trimNumber(deg)} ${trimNumber(cx)} ${trimNumber(cy)})"`);
   }
-  const body = node.runs && node.runs.length > 0 ? node.runs.map((r) => runXml(r, registry, warn)).join("") : escapeText(node.text);
+  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 runXml(run, registry, warn) {
+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.bold) attrs.push(`font-weight="700"`);
+  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="${escapeAttr2(run.fontFamily)}"`);
-  const presetScale = run.script != null && run.baselineShift != null ? SCRIPT_METRICS[run.script].size : void 0;
+  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)}%"`);
@@ -2535,6 +3074,31 @@ function pathBounds(path) {
   const b = boundsOfPath(path);
   return { minX: b.x, minY: b.y, maxX: b.x + b.width, maxY: b.y + b.height };
 }
+function svgNeeds(nodes) {
+  const registry = new PaintServerRegistry();
+  registerPaintServers(nodes, registry);
+  const fonts = /* @__PURE__ */ new Map();
+  const walk = (list) => {
+    for (const n of list) {
+      if (n.kind === "group") walk(n.children);
+      else if (n.kind === "text") {
+        for (const run of n.runs ?? []) {
+          const face = scriptSizeFace(run, n.style);
+          if (face) fonts.set(`${face.family}|${face.weight}|${face.style}`, face);
+        }
+      }
+    }
+  };
+  walk(nodes);
+  return { fonts: [...fonts.values()], paintKinds: registry.paintKinds() };
+}
+function warmSvg(nodes) {
+  const needs = svgNeeds(nodes);
+  return Promise.all([
+    warmFonts(needs.fonts),
+    warmPaintKinds(needs.paintKinds.filter(isPaintKindKnown))
+  ]).then(() => void 0);
+}
 var CASCADE_OFFSET_PX = 24;
 var VIEWPORT_FIT = 0.9;
 function readFileText(file) {
@@ -2549,17 +3113,31 @@ var svgIdCounter = 0;
 function freshSvgNodeId() {
   return `n${(svgIdCounter++).toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
 }
-function fillFromPaint(paint, box) {
+function fillDataFromSvg(paint, box) {
   if (!paint) return void 0;
   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;
+  if (paint.kind === "solid") {
+    return paint.opacity != null ? { ...solid(paint.color), opacity: paint.opacity } : solid(paint.color);
+  }
+  return fillInBoxFrame(paint.paint, box);
+}
+function fadeFill(fill, k) {
+  return k === 1 ? fill : { ...fill, opacity: (fill.opacity ?? 1) * k };
+}
+function fadeStroke(stroke, k) {
+  return k === 1 || !stroke.paint ? stroke : { ...stroke, paint: fadeFill(stroke.paint, k) };
+}
+function fadeRun(run, k) {
+  if (k === 1 || !run.fill && !run.stroke) return run;
+  return {
+    ...run,
+    ...run.fill ? { fill: fadeFill(run.fill, k) } : {},
+    ...run.stroke ? { stroke: fadeStroke(run.stroke, k) } : {}
+  };
 }
 function strokeDataFromSvg(stroke, box) {
   if (!stroke || stroke.paint.kind === "none") return void 0;
-  const paint = fillFromPaint(stroke.paint, box);
+  const paint = fillDataFromSvg(stroke.paint, box);
   if (paint === void 0 || paint === null) return void 0;
   return {
     paint: stroke.opacity !== void 0 ? { ...paint, opacity: stroke.opacity } : paint,
@@ -2573,22 +3151,6 @@ function strokeDataFromSvg(stroke, box) {
     ...stroke.markerEnd !== void 0 ? { markerEnd: stroke.markerEnd } : {}
   };
 }
-function svgImageFromKit(image, pose) {
-  const node = {
-    kind: "image",
-    href: image.src,
-    x: pose.x,
-    y: pose.y,
-    width: pose.width,
-    height: pose.height
-  };
-  if (image.source) node.source = { ...image.source };
-  if (image.flipX) node.flipX = true;
-  if (image.flipY) node.flipY = true;
-  if (image.opacity != null) node.opacity = image.opacity;
-  if (pose.rotation) node.rotation = pose.rotation;
-  return node;
-}
 function fillInBoxFrame(fill, box) {
   const units = "units" in fill ? fill.units : void 0;
   return units === "world" ? fillToBoundsFrame(fill, box) : fill;
@@ -2604,28 +3166,36 @@ function strokeInBoxFrame(stroke, box) {
   const paint = fillInBoxFrame(stroke.paint, box);
   return paint === stroke.paint ? stroke : { ...stroke, paint };
 }
-function svgNodesToKitDrafts(nodes, nextId) {
+function svgNodesToKitDrafts(input, nextId, options = {}) {
+  const nodes = isNodeList(input) ? input : input.nodes;
+  if (!isNodeList(input)) {
+    for (const m of input.markers ?? []) if (getMarker(m.id) === void 0) registerMarker(m);
+  }
   const drafts = [];
-  const visit = (n, parentId) => {
+  const pushLeaf = (source, parentId, pose, data) => {
+    const id = nextId(source);
+    const out = options.leaf ? options.leaf(id, { pose, data }, source) : data;
+    if (out === null) return null;
+    drafts.push({ kind: "leaf", id, parentId, pose, data: out });
+    return pose;
+  };
+  const visit = (n, parentId, inherited2) => {
+    const k = inherited2 * (n.opacity ?? 1);
     if (n.kind === "group") {
       const draft = {
         kind: "container",
-        id: nextId(),
+        id: nextId(n),
         parentId,
         pose: { x: 0, y: 0, width: 0, height: 0 }
       };
       drafts.push(draft);
-      let acc = null;
-      for (const c of n.children) {
-        const b2 = visit(c, draft.id);
-        if (b2) acc = acc ? unionRect(acc, b2) : b2;
-      }
+      const acc = unionAABB(n.children.map((c) => visit(c, draft.id, k)));
       if (!acc) {
         drafts.splice(drafts.indexOf(draft), 1);
         return null;
       }
       draft.pose = acc;
-      return acc;
+      return draft.pose;
     }
     if (n.kind === "text") {
       const pose2 = {
@@ -2641,65 +3211,48 @@ function svgNodesToKitDrafts(nodes, nextId) {
         width: pose2.width,
         height: pose2.height
       };
-      drafts.push({
-        kind: "leaf",
-        id: nextId(),
-        parentId,
-        pose: pose2,
-        data: {
-          text: n.text,
-          ...n.style ? { style: n.style } : {},
-          ...n.verticalAlign ? { verticalAlign: n.verticalAlign } : {},
-          ...n.runs ? { runs: n.runs.map((r) => runInBoxFrame(r, box)) } : {},
-          // `!== undefined`, not a truthiness test: `null` is the document
-          // saying `fill="none"`, and absent takes the painter's default.
-          ...n.fill !== void 0 ? { fill: n.fill === null ? null : fillInBoxFrame(n.fill, box) } : {},
-          ...n.stroke !== void 0 ? { stroke: strokeInBoxFrame(n.stroke, box) } : {}
-        }
+      const fill2 = n.fill === void 0 && k !== 1 ? DEFAULT_TEXT_STYLE.fill : n.fill;
+      return pushLeaf(n, parentId, pose2, {
+        text: n.text,
+        ...n.style ? { style: n.style } : {},
+        ...n.verticalAlign ? { verticalAlign: n.verticalAlign } : {},
+        ...n.runs ? { runs: n.runs.map((r) => fadeRun(runInBoxFrame(r, box), k)) } : {},
+        // `!== undefined`, not a truthiness test: `null` is the document
+        // saying `fill="none"`, and absent takes the painter's default.
+        ...fill2 !== void 0 ? { fill: fill2 === null ? null : fadeFill(fillInBoxFrame(fill2, box), k) } : {},
+        ...n.stroke !== void 0 ? { stroke: fadeStroke(strokeInBoxFrame(n.stroke, box), k) } : {}
       });
-      return pose2;
     }
     if (n.kind === "image") {
       const pose2 = { x: n.x, y: n.y, width: n.width, height: n.height };
       if (n.rotation) pose2.rotation = n.rotation;
-      drafts.push({
-        kind: "leaf",
-        id: nextId(),
-        parentId,
-        pose: pose2,
-        data: {
-          image: {
-            src: n.href,
-            ...n.opacity != null ? { opacity: n.opacity } : {},
-            ...n.source ? { source: { ...n.source } } : {},
-            ...n.flipX ? { flipX: true } : {},
-            ...n.flipY ? { flipY: true } : {}
-          }
+      return pushLeaf(n, parentId, pose2, {
+        image: {
+          src: n.href,
+          ...k !== 1 ? { opacity: k } : {},
+          ...n.source ? { source: { ...n.source } } : {},
+          ...n.flipX ? { flipX: true } : {},
+          ...n.flipY ? { flipY: true } : {}
         }
       });
-      return pose2;
     }
     const b = n.path.kind === "rect" ? { x: n.path.x, y: n.path.y, width: n.path.width, height: n.path.height } : boundsOfPath(n.path);
     const 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 fill = fillDataFromSvg(n.fill, b);
     const strokeFromSvg = strokeDataFromSvg(n.stroke, b);
-    drafts.push({
-      kind: "leaf",
-      id: nextId(),
-      parentId,
-      pose,
-      data: {
-        path: n.path,
-        ...fill !== void 0 ? { fill } : {},
-        ...strokeFromSvg !== void 0 ? { stroke: strokeFromSvg } : {}
-      }
+    return pushLeaf(n, parentId, pose, {
+      path: n.path,
+      ...fill !== void 0 ? { fill: fill && fadeFill(fill, k) } : {},
+      ...strokeFromSvg !== void 0 ? { stroke: fadeStroke(strokeFromSvg, k) } : {}
     });
-    return pose;
   };
-  for (const n of nodes) visit(n, null);
+  for (const n of nodes) visit(n, null, 1);
   return drafts;
 }
+function isNodeList(input) {
+  return Array.isArray(input);
+}
 function scaleTextData(data, scale) {
   if (scale === 1 || typeof data.text !== "string") return data;
   const style = data.style ?? {};
@@ -2713,13 +3266,6 @@ function scaleTextData(data, scale) {
     style: { ...style, fontSize: scaleSize(style.fontSize ?? resolveTextStyle(style).fontSize) }
   };
 }
-function unionRect(a, b) {
-  const minX = Math.min(a.x, b.x);
-  const minY = Math.min(a.y, b.y);
-  const maxX = Math.max(a.x + a.width, b.x + b.width);
-  const maxY = Math.max(a.y + a.height, b.y + b.height);
-  return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
-}
 async function unpackSvgFiles(files, ctx) {
   const layer = ctx.scene.layers[0]?.id ?? "default";
   let index = 0;
@@ -2728,8 +3274,7 @@ async function unpackSvgFiles(files, ctx) {
       const text = await readFileText(file);
       const parsed = parseSvg(text);
       for (const w of parsed.warnings) dwarn("ingest", `svg "${file.name}":`, w);
-      for (const m of parsed.markers ?? []) if (getMarker(m.id) === void 0) registerMarker(m);
-      let drafts = svgNodesToKitDrafts(parsed.nodes, freshSvgNodeId);
+      let drafts = svgNodesToKitDrafts(parsed, freshSvgNodeId);
       if (drafts.length === 0) {
         console.warn(`weasel ingest: svg "${file.name}" parsed to no drawable nodes`);
         continue;
@@ -2737,13 +3282,13 @@ async function unpackSvgFiles(files, ctx) {
       const roots = drafts.filter((d) => d.parentId === null);
       if (roots.length > 1) {
         const wrapperId = freshSvgNodeId();
-        const union2 = roots.map((d) => d.pose).reduce(unionRect);
+        const union2 = unionAABB(roots.map((d) => d.pose));
         drafts = [
           { kind: "container", id: wrapperId, parentId: null, pose: union2 },
           ...drafts.map((d) => d.parentId === null ? { ...d, parentId: wrapperId } : d)
         ];
       }
-      const union = drafts.filter((d) => d.parentId === null).map((d) => d.pose).reduce(unionRect);
+      const union = unionAABB(drafts.filter((d) => d.parentId === null).map((d) => d.pose));
       const view = ctx.viewportWorldRect();
       const scale = Math.min(
         1,
@@ -2784,7 +3329,115 @@ async function unpackSvgFiles(files, ctx) {
     }
   }
 }
+function svgPaintFromKit(fill, box) {
+  if (fill === null) return { kind: "none" };
+  if (fill.fill === void 0 || fill.fill === "solid") {
+    return { kind: "solid", color: fill.color, ...fill.opacity != null ? { opacity: fill.opacity } : {} };
+  }
+  return { kind: "gradient", paint: fillInPoseFrame(fill, box) };
+}
+function svgStrokeFromKit(stroke, box) {
+  if (!stroke?.paint) return void 0;
+  const width2 = stroke.width ?? 1;
+  if (!((typeof width2 === "object" ? width2.px : width2) > 0)) return void 0;
+  const opacity = stroke.paint.opacity;
+  return {
+    paint: svgPaintFromKit(stroke.paint, box),
+    width: width2,
+    ...opacity != null ? { opacity } : {},
+    ...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.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 } : {}
+  };
+}
+function svgImageFromKit(image, pose) {
+  const node = {
+    kind: "image",
+    href: image.src,
+    x: pose.x,
+    y: pose.y,
+    width: pose.width,
+    height: pose.height
+  };
+  if (image.source) node.source = { ...image.source };
+  if (image.flipX) node.flipX = true;
+  if (image.flipY) node.flipY = true;
+  if (image.opacity != null) node.opacity = image.opacity;
+  if (pose.rotation) node.rotation = pose.rotation;
+  return node;
+}
+function strokeInPoseFrame(stroke, box) {
+  return stroke.paint ? { ...stroke, paint: fillInPoseFrame(stroke.paint, box) } : stroke;
+}
+function runInPoseFrame(run, box) {
+  if (!run.fill && !run.stroke) return run;
+  return {
+    ...run,
+    ...run.fill ? { fill: fillInPoseFrame(run.fill, box) } : {},
+    ...run.stroke ? { stroke: strokeInPoseFrame(run.stroke, 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 && fillInPoseFrame(data.fill, pose);
+    if (data.stroke) node2.stroke = strokeInPoseFrame(data.stroke, pose);
+    if (pose.rotation) node2.rotation = pose.rotation;
+    return node2;
+  }
+  if (!data.path) return null;
+  const stroke = svgStrokeFromKit(data.stroke, pose);
+  const fill = data.fill !== void 0 ? data.fill : stroke ? null : DEFAULT_SHAPE_FILL;
+  const node = {
+    kind: "path",
+    path: pathInPoseFrame(data.path, pose),
+    fill: svgPaintFromKit(fill, pose)
+  };
+  if (stroke) node.stroke = stroke;
+  if (pose.rotation) node.rotation = pose.rotation;
+  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;
+    if (node.kind === "container") {
+      const children = [];
+      for (const c of tree.childrenOf(id)) {
+        const child = emit(c);
+        if (child) children.push(child);
+      }
+      const g = { kind: "group", children };
+      return group ? group(id, g) : g;
+    }
+    return leaf ? leaf(id, node) : svgLeafFromKit(node.data, node.pose);
+  };
+  const out = [];
+  for (const id of options.roots ?? tree.roots) {
+    const n = emit(id);
+    if (n) out.push(n);
+  }
+  return out;
+}
 
-export { IDENTITY_MATRIX, parseSvg, serializeSvg, strokeDataFromSvg, svgImageFromKit, svgNodesToKitDrafts, tilePreviewCssUrl, tilePreviewSvg, unpackSvgFiles };
+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 };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map