@weasel-js/svg 1.11.1 → 1.12.0

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import { Affine } from '@weasel-js/geom';
 export { pathToD as serializePathD } from '@weasel-js/geom';
-import { Path, Paint, ScreenLength, StrokeAlign, MarkerRef, VertexWidth, StrokeNib, StyledRun, TextStyle, TextVerticalAlign, Fill, Stroke, PoseLinear, MarkerEntry, TextPoseLayout, RenderNeeds, TilePatternSpec, ImageNodeData, IngestCtx } from '@weasel-js/core';
+import { Path, Paint, ScreenLength, StrokeAlign, MarkerRef, VertexWidth, StrokeNib, StyledRun, TextStyle, TextVerticalAlign, Fill, Stroke, PoseLinear, MarkerEntry, TextPoseLayout, RenderNeeds, TilePatternSpec, Inherit, ImageNodeData, IngestCtx } from '@weasel-js/core';
 
 /**
  * Media Queries 4 evaluation against a fixed environment.
@@ -134,6 +134,17 @@ interface SvgStroke {
     vertexWidths?: VertexWidth[];
     nib?: StrokeNib;
 }
+/**
+ * Which of a node's paints its own element sets none of, so that it takes the
+ * paint of the enclosing `<g>` that does. Its `fill` and `stroke` still hold
+ * what that resolves to.
+ */
+interface SvgInherits {
+    fill?: true;
+    /** Set only when the element sets no `stroke-*` or `marker-*` property
+     *  either: the stroke is taken whole. */
+    stroke?: true;
+}
 /**
  * Leaf node: a path geometry plus fill/stroke. Other shapes (`<rect>`,
  * `<ellipse>`, etc.) are lowered to this on parse.
@@ -143,6 +154,7 @@ interface SvgPathNode {
     path: Path;
     fill: SvgPaint;
     stroke?: SvgStroke;
+    inherits?: SvgInherits;
     /** Element-level opacity (`opacity="..."`), 0..1. */
     opacity?: number;
     /** Element-level rotation in **radians**, pivoting around the AABB
@@ -172,6 +184,12 @@ interface SvgGroupNode {
      *  unions them and a `Path` holds one outline. */
     clip?: Path;
     opacity?: number;
+    /** The fill its children take when they set none — written as the group's
+     *  own `fill`. Absent when neither it nor an enclosing group sets one. */
+    fill?: SvgPaint;
+    /** As `fill`, for the stroke; absent too when the one in effect is none. */
+    stroke?: SvgStroke;
+    inherits?: SvgInherits;
     /** Kept by `ParseOptions.keepHidden` from content SVG does not render:
      *  `display="none"` here, or a leaf under `visibility="hidden"`. Written
      *  back as `display="none"`. */
@@ -218,6 +236,7 @@ interface SvgTextNode {
      */
     fill?: Fill | null;
     stroke?: Stroke;
+    inherits?: SvgInherits;
     /** Element-level opacity (`opacity="..."`), 0..1. */
     opacity?: number;
     /** Element-level rotation in **radians**, pivoting around the unrotated
@@ -491,6 +510,21 @@ declare function tilePreviewSvg(spec: TilePatternSpec, background?: string): str
 /** `tilePreviewSvg` packed as a `url(...)` value for CSS `background-image`. */
 declare function tilePreviewCssUrl(spec: TilePatternSpec, background?: string): string;
 
+/** CSS Selectors 4 specificity. */
+/** A selector's specificity as (ids, classes, types). */
+type Specificity = readonly [number, number, number];
+/** Negative when `a` is less specific than `b`, positive when more, 0 when equal. */
+declare function compareSpecificity(a: Specificity, b: Specificity): number;
+/** CSS Selectors 4 specificity of one complex selector (no comma list). */
+declare function specificity(selector: string): Specificity;
+
+/**
+ * Split `s` on `sep` wherever it sits outside strings and (), [] nesting.
+ * With `dropBlocks`, a `{…}` block at depth zero is discarded along with the
+ * prelude before it, back to the previous separator.
+ */
+declare function splitTopLevel(s: string, sep: string, dropBlocks?: boolean): string[];
+
 /**
  * `@supports` evaluation. A declaration test asks whether this parser would
  * honor the declaration ({@link isDeclarationHonored}), not whether a browser
@@ -532,8 +566,9 @@ interface SvgKitPose {
  *  `svgNodesToKitDrafts` writes. */
 interface SvgKitLeafData {
     path?: Path;
-    fill?: Fill | null;
-    stroke?: Stroke | null;
+    /** `'inherit'` takes the enclosing container's. */
+    fill?: Fill | Inherit | null;
+    stroke?: Stroke | Inherit | null;
     text?: string;
     style?: TextStyle;
     runs?: readonly StyledRun[];
@@ -552,7 +587,7 @@ interface SvgKitLeafData {
 declare function svgPaintFromKit(fill: Paint | null, box: SvgKitPose): SvgPaint;
 /** A kit `Stroke` as an `SvgStroke` — the inverse of `strokeDataFromSvg`.
  *  One with no paint or no width draws nothing and is written as no stroke. */
-declare function svgStrokeFromKit(stroke: Stroke | null | undefined, box: SvgKitPose): SvgStroke | undefined;
+declare function svgStrokeFromKit(raw: Stroke | null | undefined, box: SvgKitPose): SvgStroke | undefined;
 /** Write a `kit:image` leaf as an `SvgImageNode` — the inverse of the image
  *  arm of `svgNodesToKitDrafts`. The pose is the image's box. */
 declare function svgImageFromKit(image: ImageNodeData['image'], pose: SvgKitPose): SvgImageNode;
@@ -562,10 +597,12 @@ declare function svgImageFromKit(image: ImageNodeData['image'], pose: SvgKitPose
  * draws. A text node with a `background` is a group: the box, then the text.
  * One that clips is a group clipped to its box as it is drawn, turned with it.
  *
- * A path with no `fill` takes `kit:path`'s fallback: the default shape fill
- * when it has no stroke, and no fill when it has one. Under a pose `transform`
- * its stroke width takes the uniform part of the stretch, as `parseSvg` reads
- * a stroke under a skewed element.
+ * An `'inherit'` fill or stroke is none here, with no container to read;
+ * {@link svgNodesFromKit} resolves it first.
+ *
+ * A fill or stroke that paints nothing is written `none`. Under a pose
+ * `transform` a stroke's width takes the uniform part of the stretch, as
+ * `parseSvg` reads a stroke under a skewed element.
  */
 declare function svgLeafFromKit(data: SvgKitLeafData, pose: SvgKitPose): SvgPathNode | SvgTextNode | SvgImageNode | SvgGroupNode | null;
 /** One node as {@link svgNodesFromKit} reads it. */
@@ -593,8 +630,11 @@ interface SvgNodesFromKitOptions<TId extends string = string> {
     roots?: readonly TId[];
     /** `false` leaves a node out, with everything under it — a hidden layer. */
     include?(id: TId): boolean;
-    /** Lower a leaf yourself; `null` leaves it out. Defaults to {@link svgLeafFromKit}. */
-    leaf?(id: TId, node: SvgKitTreeNode): SvgNode | null;
+    /** Lower a leaf yourself; `null` leaves it out. Defaults to {@link svgLeafFromKit}.
+     *  `inherited` is what the leaf's `'inherit'` fields resolve to; write those
+     *  as these, and the walk marks the result as inheriting where SVG's
+     *  cascade can carry them. */
+    leaf?(id: TId, node: SvgKitTreeNode, inherited: SvgKitInherited): SvgNode | null;
     /** Decorate the group written for a container, e.g. with `meta`. */
     group?(id: TId, group: SvgGroupNode): SvgGroupNode;
 }
@@ -605,6 +645,12 @@ interface SvgNodesFromKitOptions<TId extends string = string> {
  * otherwise. A hidden node is written hidden, with its subtree as it is.
  */
 declare function svgNodesFromKit<TId extends string>(tree: SvgKitTree<TId>, options?: SvgNodesFromKitOptions<TId>): SvgNode[];
+/** What a leaf's `'inherit'` fill and stroke resolve to — its nearest
+ *  enclosing container's; `null` for none. */
+interface SvgKitInherited {
+    fill: Fill | null;
+    stroke: Stroke | null;
+}
 
 /** Axis-aligned box, in the coordinate space of the SVG being unpacked. Used
  *  for the bounds a draft occupies before it becomes a scene node. */
@@ -703,4 +749,4 @@ declare function svgNodesToKitDrafts<TData = Record<string, unknown>>(input: Par
  */
 declare function unpackSvgFiles(files: File[], ctx: IngestCtx): Promise<void>;
 
-export { DEFAULT_MEDIA_ENVIRONMENT, IDENTITY_MATRIX, type Matrix, type NamespaceMeta, type NamespacedElement, type ParseOptions, type ParseResult, type SerializeOptions, type SupportsOptions, type SvgDraftBounds, type SvgDraftPose, type SvgGroupNode, type SvgImageNode, type SvgKitLeafData, type SvgKitPose, type SvgKitTree, type SvgKitTreeNode, type SvgLeafNode, type SvgMediaEnvironment, type SvgNode, type SvgNodesFromKitOptions, type SvgNodesToKitDraftsOptions, type SvgPaint, type SvgPathNode, type SvgSceneDraft, type SvgStroke, type SvgTextNode, 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, type Matrix, type NamespaceMeta, type NamespacedElement, type ParseOptions, type ParseResult, type SerializeOptions, type Specificity, type SupportsOptions, type SvgDraftBounds, type SvgDraftPose, type SvgGroupNode, type SvgImageNode, type SvgKitLeafData, type SvgKitPose, type SvgKitTree, type SvgKitTreeNode, type SvgLeafNode, type SvgMediaEnvironment, type SvgNode, type SvgNodesFromKitOptions, type SvgNodesToKitDraftsOptions, type SvgPaint, type SvgPathNode, type SvgSceneDraft, type SvgStroke, type SvgTextNode, compareSpecificity, escapeAttr, escapeText, evaluateMediaQuery, evaluateSupports, fillDataFromSvg, nativeSvgKind, nativeSvgSpace, parseSvg, serializeSvg, specificity, splitTopLevel, strokeDataFromSvg, svgImageFromKit, svgLeafFromKit, svgNeeds, svgNodesFromKit, svgNodesToKitDrafts, svgPaintFromKit, svgStrokeFromKit, tilePreviewCssUrl, tilePreviewSvg, unpackSvgFiles, warmSvg };

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, DEFAULT_TEXT_FILL, resolveScreenLength, pathFromD, isPatternPaint, resolveTextStyle, strokeToPath, toRuns, resolveRunFace, parseColor, rgbaToHex, layoutRuns, resolveRuns, resolveAlign, PathBuilder, PATH_M, PATH_L, PATH_Z, scaleVertexWidth, getPaintKind, resolveMarkerSize, paragraphDirection, scriptMetricsFor, vertexHalfWidths, isTilePaint, tileSpecOf } from '@weasel-js/core';
 import { tileGeometry } from '@weasel-js/core/patterns-builtin';
 
 // src/types.ts
@@ -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,6 +3958,19 @@ function fadeRun(run, k) {
     ...run.stroke ? { stroke: fadeStroke(run.stroke, k) } : {}
   };
 }
+
+// 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 } : {} };
+}
 var CASCADE_OFFSET_PX = 24;
 var VIEWPORT_FIT = 0.9;
 function readFileText(file) {
@@ -3931,8 +4035,9 @@ function svgNodesToKitDrafts(input, nextId, options = {}) {
     drafts.push({ kind: "leaf", 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 draft = {
         kind: "container",
@@ -3944,7 +4049,7 @@ function svgNodesToKitDrafts(input, nextId, options = {}) {
       };
       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,6 +4057,7 @@ 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") {
@@ -3969,16 +4075,15 @@ function svgNodesToKitDrafts(input, nextId, options = {}) {
         width: pose2.width,
         height: pose2.height
       };
-      const fill2 = n.fill === void 0 && k !== 1 ? DEFAULT_TEXT_STYLE.fill : n.fill;
+      const fill2 = n.fill === void 0 ? DEFAULT_TEXT_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) } : {}
+        // `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") {
@@ -4002,13 +4107,21 @@ function svgNodesToKitDrafts(input, nextId, options = {}) {
     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) } : {}
+      ...takes.fill ? { fill: INHERIT } : fill !== void 0 ? { fill: fill && { paint: fadeFill(fill, k) } } : {},
+      ...takes.stroke ? { stroke: INHERIT } : strokeFromSvg !== void 0 ? { stroke: fadeStroke(strokeFromSvg, k) } : {}
     });
   };
-  for (const n of nodes) visit(n, null, 1);
+  for (const n of nodes) visit(n, null, 1, NO_TAKES);
   return drafts;
 }
+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 };
@@ -4097,8 +4210,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 +4266,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,25 +4299,32 @@ 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 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) => {
+  const lower = (id, node, up) => {
     if (node.kind === "container") {
+      const own2 = node.data;
+      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 tree.childrenOf(id)) {
-          const child = emit(c);
+          const child = emit(c, below);
           if (child) children.push(child);
         }
         return children;
@@ -4213,7 +4333,7 @@ function svgNodesFromKit(tree, options = {}) {
       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();
+      let g = { ...content(), ...groupPaintFromKit(own2, below, node.pose) };
       if (copies.length > 0) {
         g = {
           kind: "group",
@@ -4222,16 +4342,44 @@ function svgNodesFromKit(tree, options = {}) {
       }
       return group ? group(id, g) : g;
     }
-    return leaf ? leaf(id, node) : svgLeafFromKit(node.data, node.pose);
+    const data = node.data ?? {};
+    return markInherits(leaf ? leaf(id, node, up) : svgLeafFromKit(resolvedData(data, up), node.pose), data, up);
   };
   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