@weasel-js/svg 1.11.1 → 1.13.0-rc.0

package/dist/index.js

@@ -1,6 +1,6 @@
 import { identity, multiply, pathToD, invert, splitByClosure, fillsOpenSubpaths, rotateAboutPoint, hasOpenSubpath, splitSubpaths } from '@weasel-js/geom';
 export { pathToD as serializePathD } from '@weasel-js/geom';
-import { isTileKind, boundsOfPath, transformPath, isSolidPaint, warmFonts, warmPaintKinds, isPaintKindKnown, solid, fillToBoundsFrame, getMarker, registerMarker, dwarn, unionAABB, createInsertOp, fillInPoseFrame, pathThroughPoseFrame, DEFAULT_SHAPE_FILL, pathInPoseFrame, poseLinearOf, poseFrameOf, DEFAULT_TEXT_STYLE, resolveScreenLength, pathFromD, isPatternPaint, resolveTextStyle, strokeToPath, toRuns, resolveRunFace, parseColor, rgbaToHex, layoutRuns, resolveRuns, resolveAlign, PathBuilder, PATH_M, PATH_L, PATH_Z, scaleVertexWidth, getPaintKind, resolveMarkerSize, paragraphDirection, scriptMetricsFor, vertexHalfWidths, isTilePaint, tileSpecOf } from '@weasel-js/core';
+import { isTileKind, boundsOfPath, transformPath, isSolidPaint, warmFonts, warmPaintKinds, isPaintKindKnown, solid, fillToBoundsFrame, getMarker, registerMarker, dwarn, unionAABB, createInsertOp, fillInPoseFrame, resolveStroke, pathThroughPoseFrame, resolveFill, pathInPoseFrame, poseLinearOf, poseFrameOf, INHERIT, clipOutline, resolveScreenLength, pathFromD, isPatternPaint, resolveTextStyle, strokeToPath, toRuns, resolveRunFace, DEFAULT_TEXT_FILL, parseColor, rgbaToHex, layoutRuns, resolveRuns, resolveAlign, PathBuilder, PATH_M, PATH_L, PATH_Z, scaleVertexWidth, getPaintKind, resolveMarkerSize, paragraphDirection, scriptMetricsFor, vertexHalfWidths, isTilePaint, tileSpecOf } from '@weasel-js/core';
 import { tileGeometry } from '@weasel-js/core/patterns-builtin';
 
 // src/types.ts
@@ -3024,6 +3024,32 @@ function markerEntryFrom(el, id, role, strokeWidth, gradients, onWarn) {
   };
 }
 
+// src/groupPaint.ts
+var NO_GROUP_PAINT = { fill: false, stroke: false };
+var STROKE_PROPS = INHERITED_PROPERTIES.filter((p) => p.startsWith("stroke") || p.startsWith("marker"));
+var sets = (el, prop) => {
+  const v = ownProp(el, prop);
+  return v != null && v.trim() !== "inherit";
+};
+var setsFill = (el) => sets(el, "fill");
+var setsStroke = (el) => STROKE_PROPS.some((p) => sets(el, p));
+function viewportPaintFrom(el, from) {
+  return { fill: from.fill && !setsFill(el), stroke: from.stroke && !setsStroke(el) };
+}
+function inheritsFrom(el, from) {
+  const fill = from.fill && !setsFill(el);
+  const stroke = from.stroke && !setsStroke(el);
+  return fill || stroke ? { inherits: { ...fill ? { fill: true } : {}, ...stroke ? { stroke: true } : {} } } : {};
+}
+function groupPaint(el, from, style, ctm, gradients, onWarn) {
+  const children = { fill: from.fill || setsFill(el), stroke: from.stroke || setsStroke(el) };
+  const paint = {};
+  if (children.fill) paint.fill = paintThroughMatrix(readPaint2(style, "fill", "#000000", gradients, onWarn), ctm);
+  const stroke = children.stroke ? readStroke(style, gradients, onWarn) : void 0;
+  if (stroke) paint.stroke = strokeThroughMatrix(stroke, ctm);
+  return { paint: { ...paint, ...inheritsFrom(el, from) }, children };
+}
+
 // src/parse.ts
 var SUPPORTED_GROUP_TAGS = /* @__PURE__ */ new Set(["g", "svg"]);
 function parseSvg(svg, opts = {}) {
@@ -3056,7 +3082,7 @@ function parseSvg(svg, opts = {}) {
   for (const [id, paint] of collectPatterns(root, onWarn)) gradients.set(id, paint);
   const rootStyle = deriveStyle(EMPTY_STYLE, root);
   const clips = collectClipPaths(root, onWarn);
-  const nodes = parseChildren(root, IDENTITY_MATRIX, rootStyle, gradients, clips, onWarn, uriToPrefix, opts.keepHidden === true);
+  const nodes = parseChildren(root, IDENTITY_MATRIX, rootStyle, NO_GROUP_PAINT, gradients, clips, onWarn, uriToPrefix, opts.keepHidden === true);
   const markers = ingestMarkers(root, nodes, gradients, onWarn);
   const result = { nodes, warnings };
   if (markers.length > 0) result.markers = markers;
@@ -3157,7 +3183,7 @@ function collectElementMeta(el, uriToPrefix) {
   }
   return Object.keys(meta).length > 0 ? meta : void 0;
 }
-function parseChildren(parent, ctm, style, gradients, clips, onWarn, uriToPrefix, keepHidden) {
+function parseChildren(parent, ctm, style, from, gradients, clips, onWarn, uriToPrefix, keepHidden) {
   const out = [];
   for (let i = 0; i < parent.children.length; i++) {
     const el = parent.children[i];
@@ -3165,7 +3191,7 @@ function parseChildren(parent, ctm, style, gradients, clips, onWarn, uriToPrefix
     if (ns && ns !== "http://www.w3.org/2000/svg" || isStrokeOutline(el)) continue;
     const hidden = isHiddenElement(el, style);
     if (hidden && !keepHidden) continue;
-    const node = unwrapStrokeGroup(el, parseElement(el, ctm, style, gradients, clips, onWarn, uriToPrefix, keepHidden));
+    const node = unwrapStrokeGroup(el, parseElement(el, ctm, style, from, gradients, clips, onWarn, uriToPrefix, keepHidden));
     if (!node) continue;
     const parsed = Array.isArray(node) ? node : [node];
     if (hidden) for (const n of parsed) n.hidden = true;
@@ -3173,7 +3199,7 @@ function parseChildren(parent, ctm, style, gradients, clips, onWarn, uriToPrefix
   }
   return out;
 }
-function parseElement(el, ctm, style, gradients, clips, onWarn, uriToPrefix, keepHidden) {
+function parseElement(el, ctm, style, from, gradients, clips, onWarn, uriToPrefix, keepHidden) {
   const tag = el.tagName.toLowerCase();
   if (IGNORED_TAGS.has(tag)) return null;
   if (tag === "g" && el.hasAttribute("data-weasel-image")) {
@@ -3188,20 +3214,7 @@ function parseElement(el, ctm, style, gradients, clips, onWarn, uriToPrefix, kee
   if (clipRaw != null && readProperty("clip-path", clipRaw) !== "none") {
     onWarn(`clip-path on <${tag}> is not modeled; only a <g> clips, so it is drawn unclipped`);
   }
-  if (tag === "g") {
-    const local = parseTransform(el.getAttribute("transform"), onWarn);
-    const childCtm = multiply(ctm, local);
-    const childStyle = deriveStyle(style, el);
-    const children = parseChildren(el, childCtm, childStyle, gradients, clips, onWarn, uriToPrefix, keepHidden);
-    const opacity2 = ownValue(el, "opacity");
-    const group = { kind: "group", children };
-    const clip = clipFor(el, childCtm, clips, onWarn);
-    if (clip) group.clip = clip;
-    if (opacity2 != null) group.opacity = opacity2;
-    const meta2 = collectElementMeta(el, uriToPrefix);
-    if (meta2) group.meta = meta2;
-    return group;
-  }
+  if (tag === "g") return parseGroup(el, ctm, style, from, gradients, clips, onWarn, uriToPrefix, keepHidden);
   if (SUPPORTED_GROUP_TAGS.has(tag)) {
     const childStyle = deriveStyle(style, el);
     const x = parseFloat(el.getAttribute("x") ?? "0");
@@ -3210,13 +3223,14 @@ function parseElement(el, ctm, style, gradients, clips, onWarn, uriToPrefix, kee
     if (el.hasAttribute("viewBox")) {
       onWarn("nested <svg> viewBox is not modeled; its children are not rescaled");
     }
-    return parseChildren(el, multiply(ctm, offset), childStyle, gradients, clips, onWarn, uriToPrefix, keepHidden);
+    return parseChildren(el, multiply(ctm, offset), childStyle, viewportPaintFrom(el, from), gradients, clips, onWarn, uriToPrefix, keepHidden);
   }
   if (tag === "text") {
     const textNode = parseTextElement(el, ctm, style, gradients, onWarn);
     if (textNode && !Array.isArray(textNode) && textNode.kind === "text") {
       const meta2 = collectElementMeta(el, uriToPrefix);
       if (meta2) textNode.meta = meta2;
+      Object.assign(textNode, inheritsFrom(el, from));
     }
     return textNode;
   }
@@ -3271,6 +3285,7 @@ function parseElement(el, ctm, style, gradients, clips, onWarn, uriToPrefix, kee
   if (stroke) node.stroke = stroke;
   if (opacity != null) node.opacity = opacity;
   if (rotation != null) node.rotation = rotation;
+  Object.assign(node, inheritsFrom(el, from));
   if (tag === "line" && (leafStyle["fill"] ?? null) == null) {
     node.fill = { kind: "none" };
   }
@@ -3278,6 +3293,20 @@ function parseElement(el, ctm, style, gradients, clips, onWarn, uriToPrefix, kee
   if (meta) node.meta = meta;
   return node;
 }
+function parseGroup(el, ctm, style, from, gradients, clips, onWarn, uriToPrefix, keepHidden) {
+  const childCtm = multiply(ctm, parseTransform(el.getAttribute("transform"), onWarn));
+  const childStyle = deriveStyle(style, el);
+  const paint = groupPaint(el, from, childStyle, childCtm, gradients, onWarn);
+  const children = parseChildren(el, childCtm, childStyle, paint.children, gradients, clips, onWarn, uriToPrefix, keepHidden);
+  const opacity = ownValue(el, "opacity");
+  const group = { kind: "group", children, ...paint.paint };
+  const clip = clipFor(el, childCtm, clips, onWarn);
+  if (clip) group.clip = clip;
+  if (opacity != null) group.opacity = opacity;
+  const meta = collectElementMeta(el, uriToPrefix);
+  if (meta) group.meta = meta;
+  return group;
+}
 function isHiddenElement(el, style) {
   const tag = el.tagName.toLowerCase();
   if (IGNORED_TAGS.has(tag)) return false;
@@ -3512,6 +3541,61 @@ function strokeAttrsFor(stroke, registry, warn) {
   }
   return attrs;
 }
+
+// src/groupPaintXml.ts
+var FILL_ATTRS = ["fill", "fill-opacity"];
+var STROKE_ATTRS = [
+  "stroke",
+  "stroke-width",
+  "stroke-opacity",
+  "stroke-linecap",
+  "stroke-linejoin",
+  "stroke-dasharray",
+  "stroke-dashoffset",
+  "stroke-miterlimit",
+  "marker-start",
+  "marker-mid",
+  "marker-end"
+];
+var INITIAL = {
+  "fill": "#000000",
+  "fill-opacity": "1",
+  "stroke": "none",
+  "stroke-width": "1",
+  "stroke-opacity": "1",
+  "stroke-linecap": "butt",
+  "stroke-linejoin": "miter",
+  "stroke-dasharray": "none",
+  "stroke-dashoffset": "0",
+  "stroke-miterlimit": "4",
+  "marker-start": "none",
+  "marker-mid": "none",
+  "marker-end": "none"
+};
+function groupPaintAttrs(node, registry, warn) {
+  const out = [];
+  if (node.fill && !node.inherits?.fill) out.push(...paintAttrs(node.fill, "fill", registry));
+  if (node.stroke && !node.inherits?.stroke) out.push(...strokeAttrsFor(node.stroke, registry, warn));
+  return out;
+}
+function attrNames(attrs) {
+  return attrs.map((a) => a.slice(0, a.indexOf("=")));
+}
+var START_TAG = /<(path|text)\b([^>]*?)(\/?)>/g;
+var ATTR = /\s([\w:-]+)="[^"]*"/g;
+function fitLeafXml(xml, inherits, painted) {
+  if (painted.size === 0 && !inherits) return xml;
+  const dropped = /* @__PURE__ */ new Set([...inherits?.fill ? FILL_ATTRS : [], ...inherits?.stroke ? STROKE_ATTRS : []]);
+  let first = true;
+  return xml.replace(START_TAG, (_tag, name, body, close2) => {
+    let attrs = body;
+    if (first) attrs = attrs.replace(ATTR, (whole, n) => dropped.has(n) ? "" : whole);
+    first = false;
+    const has = new Set([...attrs.matchAll(ATTR)].map((m) => m[1]));
+    const resets = [...painted].filter((n) => !has.has(n) && !dropped.has(n) && n in INITIAL);
+    return `<${name}${attrs}${resets.map((n) => ` ${n}="${INITIAL[n]}"`).join("")}${close2}>`;
+  });
+}
 function textXml(node, registry, namespaces, warn, given) {
   const layout = given && layoutMeasured(given, node.text) ? given : null;
   const x = node.x + anchorOffset(node.style, node.width, node.text);
@@ -3665,6 +3749,7 @@ function prettyXml(xml) {
 }
 
 // src/serialize.ts
+var NOTHING_PAINTED = /* @__PURE__ */ new Set();
 function serializeSvg(nodes, opts = {}) {
   const registry = new PaintServerRegistry();
   registerPaintServers(nodes, registry);
@@ -3707,6 +3792,8 @@ function registerPaintServers(nodes, registry) {
   for (const n of nodes) {
     if (n.kind === "group") {
       if (n.clip) registry.clipId(n.clip);
+      if (n.fill?.kind === "gradient" && !n.inherits?.fill) registry.register(n.fill.paint);
+      if (n.stroke?.paint.kind === "gradient" && !n.inherits?.stroke) registry.register(n.stroke.paint.paint);
       registerPaintServers(n.children, registry);
     } else if (n.kind === "path") {
       if (n.fill.kind === "gradient") registry.register(n.fill.paint);
@@ -3732,17 +3819,18 @@ function registerMarkers(stroke, registry) {
     if (ref !== void 0) registry.markerId(ref);
   }
 }
-function nodeXml(node, registry, namespaces, warn, layoutOf) {
-  const xml = kindXml(node, registry, namespaces, warn, layoutOf);
+function nodeXml(node, registry, namespaces, warn, layoutOf, painted = NOTHING_PAINTED) {
+  const kind = kindXml(node, registry, namespaces, warn, layoutOf, painted);
+  const xml = node.kind === "path" || node.kind === "text" ? fitLeafXml(kind, node.inherits, painted) : kind;
   if (!node.hidden) return xml;
   return xml.replace(/^<[\w:]+/, (open) => `${open} display="none"`).replace(/<path (?=[^>]*:role="stroke-outline")/, '<path display="none" ');
 }
-function kindXml(node, registry, namespaces, warn, layoutOf) {
-  if (node.kind === "group") return groupXml(node, registry, namespaces, warn, layoutOf);
+function kindXml(node, registry, namespaces, warn, layoutOf, painted) {
+  if (node.kind === "group") return groupXml(node, registry, namespaces, warn, layoutOf, painted);
   if (node.kind === "text") return textXml(node, registry, namespaces, warn, layoutOf?.(node));
   if (node.kind === "image") return imageXml(node, namespaces);
   const drawn = pathAsSvgDraws(node);
-  return drawn.kind === "group" ? groupXml(drawn, registry, namespaces, warn, layoutOf) : pathXml(drawn, registry, namespaces, warn);
+  return drawn.kind === "group" ? groupXml(drawn, registry, namespaces, warn, layoutOf, painted) : pathXml(drawn, registry, namespaces, warn);
 }
 function imageXml(node, namespaces) {
   const box = `x="${trimNumber(node.x)}" y="${trimNumber(node.y)}" width="${trimNumber(node.width)}" height="${trimNumber(node.height)}"`;
@@ -3766,8 +3854,11 @@ function imageXml(node, namespaces) {
   const head = ['<g data-weasel-image="true"', ...outer].join(" ");
   return `${head}${metaAttrs}><svg ${box} viewBox="${viewBox}" preserveAspectRatio="none"><image ${href} x="0" y="0" width="1" height="1" preserveAspectRatio="none"${flip}/></svg>${metaEls}</g>`;
 }
-function groupXml(node, registry, namespaces, warn, layoutOf) {
+function groupXml(node, registry, namespaces, warn, layoutOf, painted = NOTHING_PAINTED) {
   const attrs = [];
+  const paint = groupPaintAttrs(node, registry, warn);
+  for (const a of paint) attrs.push(a);
+  const below = paint.length === 0 ? painted : /* @__PURE__ */ new Set([...painted, ...attrNames(paint)]);
   if (node.transform) {
     const m = formatMatrix(node.transform);
     if (m) attrs.push(`transform="${m}"`);
@@ -3780,7 +3871,7 @@ function groupXml(node, registry, namespaces, warn, layoutOf) {
   }
   const metaAttrs = metaAttrsXml(node.meta, namespaces);
   const head = attrs.length > 0 ? `<g ${attrs.join(" ")}${metaAttrs}>` : `<g${metaAttrs}>`;
-  const body = node.children.map((c) => nodeXml(c, registry, namespaces, warn, layoutOf)).join("");
+  const body = node.children.map((c) => nodeXml(c, registry, namespaces, warn, layoutOf, below)).join("");
   return `${head}${body}${metaElementsXml(node.meta, namespaces)}</g>`;
 }
 function pathXml(node, registry, namespaces, warn) {
@@ -3867,15 +3958,18 @@ function fadeRun(run, k) {
     ...run.stroke ? { stroke: fadeStroke(run.stroke, k) } : {}
   };
 }
-var CASCADE_OFFSET_PX = 24;
-var VIEWPORT_FIT = 0.9;
-function readFileText(file) {
-  return new Promise((resolve, reject) => {
-    const reader = new FileReader();
-    reader.onload = () => resolve(String(reader.result ?? ""));
-    reader.onerror = () => reject(reader.error);
-    reader.readAsText(file);
-  });
+
+// src/draftTakes.ts
+var NO_TAKES = {};
+function takesOf(n, from, k) {
+  const inherits = n.kind === "path" || n.kind === "text" || n.kind === "group" ? n.inherits : void 0;
+  return { fill: inherits?.fill === true && from.fill === k, stroke: inherits?.stroke === true && from.stroke === k };
+}
+var solidOrNone = (p) => p === void 0 || p.kind === "solid" || p.kind === "none";
+function groupTakes(group, takes, k) {
+  const fill = group.inherits?.fill ? takes.fill : solidOrNone(group.fill);
+  const stroke = group.inherits?.stroke ? takes.stroke : solidOrNone(group.stroke?.paint);
+  return { ...fill ? { fill: k } : {}, ...stroke ? { stroke: k } : {} };
 }
 function fillDataFromSvg(paint, box) {
   if (!paint) return void 0;
@@ -3928,23 +4022,30 @@ function svgNodesToKitDrafts(input, nextId, options = {}) {
     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, ...source.hidden ? { hidden: true } : {} });
+    drafts.push({ kind: "mark", id, parentId, pose, data: out, ...source.hidden ? { hidden: true } : {} });
     return pose;
   };
-  const visit = (n, parentId, inherited2) => {
+  const visit = (n, parentId, inherited2, from) => {
     const k = inherited2 * (n.opacity ?? 1);
+    const takes = takesOf(n, from, k);
     if (n.kind === "group") {
+      const [own2, kids, ...more] = n.children;
+      if (own2 && own2.kind !== "group" && (kids === void 0 || kids.kind === "group") && options.mark?.(n)) {
+        if (n.clip) return visit(clippingGroup(n), parentId, inherited2, from);
+        return visitMark(n, own2, kids, more, parentId, k, takes);
+      }
       const draft = {
-        kind: "container",
+        kind: "group",
         id: nextId(n),
         parentId,
         pose: { x: 0, y: 0, width: 0, height: 0 },
         data: n.clip ? { path: n.clip, fill: null } : {},
+        ...n.clip ? { clip: "outline" } : {},
         ...n.hidden ? { hidden: true } : {}
       };
       drafts.push(draft);
       const at = drafts.length - 1;
-      const acc = unionAABB(n.children.map((c) => visit(c, draft.id, k)));
+      const acc = unionAABB(n.children.map((c) => visit(c, draft.id, k, groupTakes(n, takes, k))));
       if (!acc) {
         const kept = drafts.length > at + 1 || (options.keepEmpty?.(n) ?? false);
         if (!kept) drafts.splice(at, 1);
@@ -3952,63 +4053,106 @@ function svgNodesToKitDrafts(input, nextId, options = {}) {
         return null;
       }
       draft.pose = n.clip ? boxOfPath(n.clip) : acc;
+      Object.assign(draft.data, containerPaint(n, takes, draft.pose, k));
       return draft.pose;
     }
-    if (n.kind === "text") {
-      const pose2 = {
-        x: n.x,
-        y: n.y,
-        width: n.width,
-        height: n.height
-      };
-      if (n.rotation) pose2.rotation = n.rotation;
-      if (n.transform) pose2.transform = n.transform;
-      const box = {
-        x: pose2.x,
-        y: pose2.y,
-        width: pose2.width,
-        height: pose2.height
-      };
-      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 && mapFillPaint(fill2, (p) => fadeFill(fillInBoxFrame(p, box), k)) } : {},
-        ...n.stroke !== void 0 ? { stroke: fadeStroke(strokeInBoxFrame(n.stroke, box), k) } : {}
-      });
-    }
-    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;
-      if (n.transform) pose2.transform = n.transform;
-      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 } : {}
-        }
-      });
+    const { pose, data } = leafDraft(n, takes, k);
+    return pushLeaf(n, parentId, pose, data);
+  };
+  const visitMark = (n, own2, kids, more, parentId, k, takes) => {
+    const inner = groupTakes(n, takes, k);
+    const pose = visit(own2, parentId, k, inner);
+    const mark = pose === null ? null : drafts.at(-1);
+    const under = mark?.id ?? parentId;
+    if (mark && n.hidden) mark.hidden = true;
+    if (mark && kids?.clip) mark.clip = "outline";
+    const poses = [pose];
+    if (kids) {
+      const at = drafts.length;
+      const kk = k * (kids.opacity ?? 1);
+      const below = groupTakes(kids, takesOf(kids, inner, kk), kk);
+      for (const c of kids.children) poses.push(visit(c, under, kk, below));
+      if (kids.hidden) {
+        for (const d of drafts.slice(at)) if (d.parentId === under) d.hidden = true;
+      }
     }
-    const b = boxOfPath(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 = fillDataFromSvg(n.fill, b);
-    const strokeFromSvg = strokeDataFromSvg(n.stroke, b);
-    return pushLeaf(n, parentId, pose, {
-      path: n.path,
-      ...fill !== void 0 ? { fill: fill && { paint: fadeFill(fill, k) } } : {},
-      ...strokeFromSvg !== void 0 ? { stroke: fadeStroke(strokeFromSvg, k) } : {}
-    });
+    for (const c of more) poses.push(visit(c, under, k, inner));
+    return unionAABB(poses);
   };
-  for (const n of nodes) visit(n, null, 1);
+  for (const n of nodes) visit(n, null, 1, NO_TAKES);
   return drafts;
 }
+function leafDraft(n, takes, k) {
+  if (n.kind === "text") {
+    const pose2 = {
+      x: n.x,
+      y: n.y,
+      width: n.width,
+      height: n.height
+    };
+    if (n.rotation) pose2.rotation = n.rotation;
+    if (n.transform) pose2.transform = n.transform;
+    const box = {
+      x: pose2.x,
+      y: pose2.y,
+      width: pose2.width,
+      height: pose2.height
+    };
+    const fill2 = n.fill === void 0 ? DEFAULT_TEXT_FILL : n.fill;
+    return { pose: pose2, data: {
+      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)) } : {},
+      // `null` is the document saying `fill="none"`.
+      ...takes.fill ? { fill: INHERIT } : { fill: fill2 && mapFillPaint(fill2, (p) => fadeFill(fillInBoxFrame(p, box), k)) },
+      ...takes.stroke ? { stroke: INHERIT } : n.stroke !== void 0 ? { stroke: fadeStroke(strokeInBoxFrame(n.stroke, box), k) } : {}
+    } };
+  }
+  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;
+    if (n.transform) pose2.transform = n.transform;
+    return { pose: pose2, data: {
+      image: {
+        src: n.href,
+        ...k !== 1 ? { opacity: k } : {},
+        ...n.source ? { source: { ...n.source } } : {},
+        ...n.flipX ? { flipX: true } : {},
+        ...n.flipY ? { flipY: true } : {}
+      }
+    } };
+  }
+  const b = boxOfPath(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 = fillDataFromSvg(n.fill, b);
+  const strokeFromSvg = strokeDataFromSvg(n.stroke, b);
+  return { pose, data: {
+    path: n.path,
+    ...takes.fill ? { fill: INHERIT } : fill !== void 0 ? { fill: fill && { paint: fadeFill(fill, k) } } : {},
+    ...takes.stroke ? { stroke: INHERIT } : strokeFromSvg !== void 0 ? { stroke: fadeStroke(strokeFromSvg, k) } : {}
+  } };
+}
+function clippingGroup(n) {
+  const { clip, ...unclipped } = n;
+  return {
+    kind: "group",
+    clip,
+    children: [unclipped],
+    ...n.fill ? { fill: n.fill } : {},
+    ...n.stroke ? { stroke: n.stroke } : {},
+    ...n.inherits ? { inherits: n.inherits } : {}
+  };
+}
+function containerPaint(n, takes, box, k) {
+  const fill = fillDataFromSvg(n.fill, box);
+  const stroke = strokeDataFromSvg(n.stroke, box);
+  return {
+    ...takes.fill ? { fill: INHERIT } : fill ? { fill: { paint: fadeFill(fill, k) } } : {},
+    ...takes.stroke ? { stroke: INHERIT } : stroke ? { stroke: fadeStroke(stroke, k) } : {}
+  };
+}
 function boxOfPath(path) {
   const b = boundsOfPath(path);
   return { x: b.x, y: b.y, width: b.width, height: b.height };
@@ -4016,6 +4160,16 @@ function boxOfPath(path) {
 function isNodeList(input) {
   return Array.isArray(input);
 }
+var CASCADE_OFFSET_PX = 24;
+var VIEWPORT_FIT = 0.9;
+function readFileText(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(String(reader.result ?? ""));
+    reader.onerror = () => reject(reader.error);
+    reader.readAsText(file);
+  });
+}
 function scaleLeafData(data, scale) {
   if (scale === 1) return data;
   const out = { ...data };
@@ -4044,7 +4198,7 @@ async function unpackSvgFiles(files, ctx) {
         const wrapperId = ctx.scene.mintId();
         const union2 = unionAABB(roots.map((d) => d.pose));
         drafts = [
-          { kind: "container", id: wrapperId, parentId: null, pose: union2, data: {} },
+          { kind: "group", id: wrapperId, parentId: null, pose: union2, data: {} },
           ...drafts.map((d) => d.parentId === null ? { ...d, parentId: wrapperId } : d)
         ];
       }
@@ -4076,8 +4230,9 @@ async function unpackSvgFiles(files, ctx) {
             kind: d.kind,
             layer,
             pose: place(d.pose),
-            data: d.kind === "leaf" ? scaleLeafData(d.data, scale) : d.data,
+            data: d.kind === "mark" ? scaleLeafData(d.data, scale) : d.data,
             parent: d.parentId,
+            ...d.clip ? { clip: d.clip } : {},
             ...d.hidden ? { hidden: true } : {}
           },
           label: "Insert SVG"
@@ -4097,8 +4252,9 @@ function svgPaintFromKit(fill, box) {
   }
   return { kind: "gradient", paint: fillInPoseFrame(fill, box) };
 }
-function svgStrokeFromKit(stroke, box) {
-  if (!stroke?.paint) return void 0;
+function svgStrokeFromKit(raw, box) {
+  const stroke = resolveStroke(raw);
+  if (!stroke) return void 0;
   const width2 = stroke.width ?? 1;
   if (!((typeof width2 === "object" ? width2.px : width2) > 0)) return void 0;
   const opacity = stroke.paint.opacity;
@@ -4152,17 +4308,16 @@ function svgLeafFromKit(data, pose) {
     const text = svgTextFromKit({ ...data, text: data.text }, pose);
     const boxPath = { kind: "rect", x: pose.x, y: pose.y, width: pose.width, height: pose.height };
     const clip = data.overflow === "clip" ? { clip: pathThroughPoseFrame(boxPath, pose) } : {};
-    if (!data.background?.paint) return clip.clip ? { kind: "group", children: [text], ...clip } : text;
+    if (!resolveFill(data.background)) return clip.clip ? { kind: "group", children: [text], ...clip } : text;
     const box = svgLeafFromKit({ path: boxPath, fill: data.background }, pose);
     return { kind: "group", children: [box, text], ...clip };
   }
   if (!data.path) return null;
-  const stroke = svgStrokeFromKit(data.stroke, pose);
-  const fill = data.fill !== void 0 ? data.fill : stroke ? null : DEFAULT_SHAPE_FILL;
+  const stroke = svgStrokeFromKit(resolveStroke(data.stroke), pose);
   const node = {
     kind: "path",
     path: pathInPoseFrame(data.path, pose),
-    fill: svgPaintFromKit(fill?.paint ?? null, pose)
+    fill: svgPaintFromKit(resolveFill(data.fill)?.paint ?? null, pose)
   };
   if (stroke) node.stroke = stroke;
   const frame = poseLinearOf(pose) && poseFrameOf(pose);
@@ -4186,52 +4341,96 @@ function svgTextFromKit(data, pose) {
   if (data.style) node.style = data.style;
   if (data.runs) node.runs = data.runs.map((r) => runInPoseFrame(r, pose));
   if (data.verticalAlign) node.verticalAlign = data.verticalAlign;
-  if (data.fill !== void 0) node.fill = data.fill && mapFillPaint(data.fill, (p) => fillInPoseFrame(p, pose));
-  if (data.stroke) node.stroke = strokeInPoseFrame(data.stroke, pose);
+  const fill = resolveFill(data.fill);
+  node.fill = fill && mapFillPaint(fill, (p) => fillInPoseFrame(p, pose));
+  const stroke = resolveStroke(data.stroke);
+  if (stroke) node.stroke = strokeInPoseFrame(stroke, pose);
   if (pose.rotation) node.rotation = pose.rotation;
   if (pose.transform) node.transform = pose.transform;
   return node;
 }
 function svgNodesFromKit(tree, options = {}) {
-  const { include, leaf, group } = options;
-  const emit = (id) => {
+  const { include, leaf, group, mark } = options;
+  const emit = (id, up) => {
     const node = tree.get(id);
-    const out2 = node && (!include || include(id)) ? lower(id, node) : null;
+    const out2 = node && (!include || include(id)) ? lower(id, node, up) : null;
     return out2 && node?.hidden === true ? { ...out2, hidden: true } : out2;
   };
-  const lower = (id, node) => {
-    if (node.kind === "container") {
-      const emitChildren = () => {
-        const children = [];
-        for (const c of tree.childrenOf(id)) {
-          const child = emit(c);
-          if (child) children.push(child);
-        }
-        return children;
-      };
-      const path = node.data?.path;
-      const clip = path ? pathThroughPoseFrame(pathInPoseFrame(path, node.pose), node.pose) : void 0;
-      const copies = node.copiesFromPose?.(node.pose, node) ?? [];
-      const content = () => ({ kind: "group", children: emitChildren(), ...clip ? { clip } : {} });
-      let g = content();
-      if (copies.length > 0) {
-        g = {
-          kind: "group",
-          children: [g, ...copies.map((transform) => ({ kind: "group", transform, children: [content()] }))]
-        };
+  const lower = (id, node, up) => {
+    const own2 = node.data;
+    const isGroup = node.kind === "group";
+    const self = isGroup ? null : markInherits(
+      leaf ? leaf(id, node, up) : svgLeafFromKit(resolvedData(own2 ?? {}, up), node.pose),
+      own2 ?? {},
+      up
+    );
+    const kids = tree.childrenOf(id);
+    if (!isGroup && kids.length === 0) return self;
+    const below = {
+      fill: own2?.fill === INHERIT ? up.fill : resolveFill(own2?.fill),
+      stroke: own2?.stroke === INHERIT ? up.stroke : resolveStroke(own2?.stroke)
+    };
+    const emitChildren = () => {
+      const children = [];
+      for (const c of kids) {
+        const child = emit(c, below);
+        if (child) children.push(child);
       }
+      return children;
+    };
+    const clip = node.clip === "outline" ? clipOutline(node, node.pose) ?? void 0 : void 0;
+    const copies = node.copiesFromPose?.(node.pose, node) ?? [];
+    const content = () => ({ kind: "group", children: emitChildren(), ...clip ? { clip } : {} });
+    const paint = groupPaintFromKit(own2, below, node.pose);
+    const copied = () => copies.map((transform) => ({ kind: "group", transform, children: [content()] }));
+    const withCopies = (g) => copies.length === 0 ? g : { kind: "group", children: [g, ...copied()] };
+    if (isGroup) {
+      const g = withCopies({ ...content(), ...paint });
       return group ? group(id, g) : g;
     }
-    return leaf ? leaf(id, node) : svgLeafFromKit(node.data, node.pose);
+    if (mark && self && self.kind !== "group") {
+      const kids2 = content();
+      return mark(id, { kind: "group", children: kids2.children.length === 0 ? [self] : [self, kids2, ...copied()], ...paint });
+    }
+    const inner = withCopies(content());
+    const parts = clip || copies.length > 0 ? [inner] : inner.children;
+    return { kind: "group", children: self ? [self, ...parts] : parts, ...paint };
   };
   const out = [];
   for (const id of options.roots ?? tree.roots) {
-    const n = emit(id);
+    const n = emit(id, NO_UP_PAINT);
     if (n) out.push(n);
   }
   return out;
 }
+var NO_UP_PAINT = { fill: null, stroke: null };
+var carries = (p) => p != null && isSolidPaint(p.paint);
+function groupPaintFromKit(own2, below, pose) {
+  const out = {};
+  if (below.fill?.paint) out.fill = svgPaintFromKit(below.fill.paint, pose);
+  const stroke = svgStrokeFromKit(below.stroke, pose);
+  if (stroke) out.stroke = stroke;
+  const fill = own2?.fill === INHERIT && carries(below.fill);
+  const strokes = own2?.stroke === INHERIT && carries(below.stroke);
+  if (fill || strokes) out.inherits = { ...fill ? { fill: true } : {}, ...strokes ? { stroke: true } : {} };
+  return out;
+}
+function resolvedData(data, up) {
+  if (data.fill !== INHERIT && data.stroke !== INHERIT) return data;
+  return {
+    ...data,
+    ...data.fill === INHERIT ? { fill: up.fill } : {},
+    ...data.stroke === INHERIT ? { stroke: up.stroke } : {}
+  };
+}
+function markInherits(out, data, up) {
+  if (out === null || out.kind !== "path" && out.kind !== "text") return out;
+  const fill = data.fill === INHERIT && carries(up.fill);
+  const stroke = data.stroke === INHERIT && carries(up.stroke);
+  if (fill || stroke) out.inherits = { ...fill ? { fill: true } : {}, ...stroke ? { stroke: true } : {} };
+  return out;
+}
 
-export { DEFAULT_MEDIA_ENVIRONMENT, IDENTITY_MATRIX, escapeAttr, escapeText, evaluateMediaQuery, evaluateSupports, fillDataFromSvg, nativeSvgKind, nativeSvgSpace, parseSvg, serializeSvg, strokeDataFromSvg, svgImageFromKit, svgLeafFromKit, svgNeeds, svgNodesFromKit, svgNodesToKitDrafts, svgPaintFromKit, svgStrokeFromKit, tilePreviewCssUrl, tilePreviewSvg, unpackSvgFiles, warmSvg };
+export { DEFAULT_MEDIA_ENVIRONMENT, IDENTITY_MATRIX, compareSpecificity, escapeAttr, escapeText, evaluateMediaQuery, evaluateSupports, fillDataFromSvg, nativeSvgKind, nativeSvgSpace, parseSvg, serializeSvg, specificity, splitTopLevel, strokeDataFromSvg, svgImageFromKit, svgLeafFromKit, svgNeeds, svgNodesFromKit, svgNodesToKitDrafts, svgPaintFromKit, svgStrokeFromKit, tilePreviewCssUrl, tilePreviewSvg, unpackSvgFiles, warmSvg };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map