@weasel-js/svg 1.12.0 → 1.13.0

package/README.md

@@ -105,13 +105,16 @@ drafts the kit's built-in path, text and image painters draw, and registers
 the document's markers. Containers carry no opacity, so an element or group
 `opacity` is multiplied into the paints of the leaves under it. `nextId` is
 handed the node each id is for, and `options.leaf` maps each leaf's kit data
-into data of your own shape, from the source node's metadata too.
+into data of your own shape, from the source node's metadata too. `options.mark`
+says which `<g>`s are marks with children, as the export's `mark` decorator
+tagged them.
 
 `svgNodesFromKit(scene)` goes the other way: containers become groups, and
 each leaf is written the way its painter draws it, with the pose baked into
 the geometry and box-relative paints resolved into that box. Hand
 `serializeSvg` the result. Options pick the roots, skip nodes (a hidden
-layer), replace a leaf's lowering or decorate a group. The per-leaf pieces are
+layer), replace a leaf's lowering, or decorate a group or a mark with children
+so the import can tell the two apart. The per-leaf pieces are
 public too: `svgLeafFromKit`, `svgPaintFromKit`, `svgStrokeFromKit`,
 `svgImageFromKit`.
 

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, Inherit, ImageNodeData, IngestCtx } from '@weasel-js/core';
+import { Path, Paint, ScreenLength, StrokeAlign, MarkerRef, VertexWidth, StrokeNib, StyledRun, TextStyle, TextVerticalAlign, Fill, Stroke, PoseLinear, MarkerEntry, TextPoseLayout, RenderNeeds, TilePatternSpec, IngestCtx, Inherit, ImageNodeData, NodeClip } from '@weasel-js/core';
 
 /**
  * Media Queries 4 evaluation against a fixed environment.
@@ -542,6 +542,19 @@ interface SupportsOptions {
  */
 declare function evaluateSupports(condition: string, opts?: SupportsOptions): boolean;
 
+/**
+ * Parse each file and insert its node tree, one undo step per file. Pass it
+ * as `<SceneCanvas ingestion={{ svg: { unpack: unpackSvgFiles } }}>`.
+ *
+ * Each file is fit-clamped to 90% of the visible viewport and centered on the
+ * drop point (or the viewport center), with later files cascading by a fixed
+ * offset. A multi-root file is wrapped in one container so it arrives as a
+ * single selectable unit. Content the file hides arrives hidden
+ * (`SceneNode.hidden`) rather than being left out. A file that fails to parse, or parses to nothing,
+ * is skipped with a `console.warn`.
+ */
+declare function unpackSvgFiles(files: File[], ctx: IngestCtx): Promise<void>;
+
 /**
  * The kit-to-SVG direction: scene leaves back to `SvgNode`s, the inverse of
  * `svgNodesToKitDrafts`. Each leaf is written as the built-in painter that
@@ -613,8 +626,11 @@ interface SvgKitTreeNode {
     /** The kit's `SceneNode.hidden`: written with `display="none"`, which
      *  `parseSvg(…, { keepHidden: true })` reads back as `hidden`. */
     hidden?: boolean;
-    /** A container's copies, as the kit's `ContainerNode.copiesFromPose`
-     *  draws them: each is written as a transformed group of its children. */
+    /** The kit's `SceneNode.clip`: `'outline'` writes the node's children
+     *  clipped to its outline, as core's `clipOutline` reads it. */
+    clip?: NodeClip;
+    /** The node's copies, as the kit's `SceneNode.copiesFromPose` draws them:
+     *  each is written as a transformed group of its children. */
     copiesFromPose?(pose: SvgKitPose, node: never): readonly Matrix[] | null;
 }
 /** The read side of a scene that {@link svgNodesFromKit} walks. A kit
@@ -635,14 +651,24 @@ interface SvgNodesFromKitOptions<TId extends string = string> {
      *  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`. */
+    /** Decorate the `<g>` written for a scene group, e.g. with `meta`. */
     group?(id: TId, group: SvgGroupNode): SvgGroupNode;
+    /** Decorate the `<g>` written for a mark with children, so a reader can
+     *  tell it from a group: `svgNodesToKitDrafts`'s `mark` option reads one
+     *  back. Given, the `<g>` holds the mark's own element, then one `<g>` of its
+     *  children carrying the mark's clip, then a transformed `<g>` of that for
+     *  each copy; a mark whose children are all left out holds its own element
+     *  alone. Not called for a mark whose own element is itself a group, or that
+     *  draws nothing. */
+    mark?(id: TId, group: SvgGroupNode): SvgGroupNode;
 }
 /**
- * Walk a scene's container tree into `SvgNode`s ready for `serializeSvg`:
- * every `container` becomes a group of its children, in z-order, and every
- * leaf goes through {@link svgLeafFromKit} unless `options.leaf` says
- * otherwise. A hidden node is written hidden, with its subtree as it is.
+ * Walk a scene's tree into `SvgNode`s ready for `serializeSvg`: a group
+ * becomes a `<g>` of its children, in z-order, drawing nothing of its own; a
+ * mark is written by {@link svgLeafFromKit} unless `options.leaf` says
+ * otherwise, and a mark with children is a `<g>` holding that element and then
+ * its children, or one `<g>` of them when `options.mark` decorates it. 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
@@ -666,30 +692,45 @@ type SvgDraftPose = SvgDraftBounds & {
     transform?: PoseLinear;
 };
 
+/**
+ * Parse an SVG file into **native scene nodes** — path/text leaves under
+ * containers that mirror the source `<g>` structure — instead of the default
+ * single embedded-image node.
+ *
+ * Leaf data targets the kit's built-in painters. Poses are absolute AABBs, and
+ * the renderer rebases stored geometry into the pose box, so placement and
+ * fit-clamping operate on poses alone and never rewrite path coordinates.
+ * Stroke widths, dashes, font sizes, and letter spacing live in data, so
+ * they take the clamp separately.
+ */
+
 /**
  * One node the unpack wants the scene to materialize, in parent-before-child
  * order (a draft's `parentId` always names an earlier draft, or `null` for
  * roots). `hidden` is the source node's, for the caller to map onto whatever
  * it hides a node with.
  *
- * A container's `data` is empty unless its `<g>` is clipped. A scene container
- * clips to what its painter draws, so a clipped one holds the clip as an
- * unpainted path, `{ path, fill: null }`, and its `pose` is the clip's box
- * rather than its children's.
+ * A group's `data` is empty unless its `<g>` is clipped. A clipped one declares
+ * `clip: 'outline'` and holds the clip as an unpainted path,
+ * `{ path, fill: null }`, which is the outline a group clips to; its `pose` is
+ * the clip's box rather than its children's. A mark declares a clip only when
+ * it is read from a `<g>` `options.mark` claims.
  */
 type SvgSceneDraft<TData = Record<string, unknown>> = {
-    kind: 'container';
+    kind: 'group';
     id: string;
     parentId: string | null;
     pose: SvgDraftPose;
     data: SvgKitLeafData;
+    clip?: NodeClip;
     hidden?: true;
 } | {
-    kind: 'leaf';
+    kind: 'mark';
     id: string;
     parentId: string | null;
     pose: SvgDraftPose;
     data: TData;
+    clip?: NodeClip;
     hidden?: true;
 };
 /** A leaf `SvgNode`: everything but a group. */
@@ -707,6 +748,14 @@ interface SvgNodesToKitDraftsOptions<TData> {
      *  whose metadata means something with no children under it. It is drafted
      *  with its clip's box, or a zero box at the origin. */
     keepEmpty?(source: SvgGroupNode): boolean;
+    /** Whether a `<g>` is a mark with children, as `svgNodesFromKit`'s `mark`
+     *  option writes one: its first element is drafted as the mark, the
+     *  children of the `<g>` after it as the mark's, hidden where that `<g>` is,
+     *  with its clip as the mark's `clip: 'outline'`, and anything after that,
+     *  such as baked copies, as the mark's further children. A clip on the
+     *  claimed `<g>` itself clips the mark as a group around it. A `<g>` whose
+     *  first element is a group, or whose second is not, is a group. */
+    mark?(source: SvgGroupNode): boolean;
 }
 /** Lower an `SvgPaint` onto the paint of the `kit:path` painter's
  *  `data.fill` — a `Paint`, or `null` for SVG's `fill="none"` (the painter
@@ -736,17 +785,5 @@ declare function strokeDataFromSvg(stroke: SvgStroke | undefined, box: SvgDraftB
  * data; a group whose leaves it all leaves out is dropped like an empty one.
  */
 declare function svgNodesToKitDrafts<TData = Record<string, unknown>>(input: ParseResult | readonly SvgNode[], nextId: (source: SvgNode) => string, options?: SvgNodesToKitDraftsOptions<TData>): SvgSceneDraft<TData>[];
-/**
- * Parse each file and insert its node tree, one undo step per file. Pass it
- * as `<SceneCanvas ingestion={{ svg: { unpack: unpackSvgFiles } }}>`.
- *
- * Each file is fit-clamped to 90% of the visible viewport and centered on the
- * drop point (or the viewport center), with later files cascading by a fixed
- * offset. A multi-root file is wrapped in one container so it arrives as a
- * single selectable unit. Content the file hides arrives hidden
- * (`SceneNode.hidden`) rather than being left out. A file that fails to parse, or parses to nothing,
- * is skipped with a `console.warn`.
- */
-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 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, 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 { 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
@@ -3971,16 +3971,6 @@ function groupTakes(group, takes, k) {
   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) {
-  return new Promise((resolve, reject) => {
-    const reader = new FileReader();
-    reader.onload = () => resolve(String(reader.result ?? ""));
-    reader.onerror = () => reject(reader.error);
-    reader.readAsText(file);
-  });
-}
 function fillDataFromSvg(paint, box) {
   if (!paint) return void 0;
   if (paint.kind === "none") return null;
@@ -4032,19 +4022,25 @@ 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, 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);
@@ -4060,60 +4056,95 @@ function svgNodesToKitDrafts(input, nextId, options = {}) {
       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 ? 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)) } : {},
-        // `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 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,
-      ...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 c of more) poses.push(visit(c, under, k, inner));
+    return unionAABB(poses);
   };
   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);
@@ -4129,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 };
@@ -4157,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)
         ];
       }
@@ -4189,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"
@@ -4308,42 +4350,51 @@ function svgTextFromKit(data, pose) {
   return node;
 }
 function svgNodesFromKit(tree, options = {}) {
-  const { include, leaf, group } = options;
+  const { include, leaf, group, mark } = options;
   const emit = (id, up) => {
     const node = tree.get(id);
     const out2 = node && (!include || include(id)) ? lower(id, node, up) : null;
     return out2 && node?.hidden === true ? { ...out2, hidden: true } : out2;
   };
   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, below);
-          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(), ...groupPaintFromKit(own2, below, node.pose) };
-      if (copies.length > 0) {
-        g = {
-          kind: "group",
-          children: [g, ...copies.map((transform) => ({ kind: "group", transform, children: [content()] }))]
-        };
+    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;
     }
-    const data = node.data ?? {};
-    return markInherits(leaf ? leaf(id, node, up) : svgLeafFromKit(resolvedData(data, up), node.pose), data, up);
+    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) {