@sagargupta1610/orrery 0.6.0 → 0.7.0

package/scripts/orrery.mjs

@@ -1,5 +1,5 @@
 #!/usr/bin/env node
-// orrery 0.6.0 (MIT). Generated from src/ by scripts/build.mjs; do not edit.
+// orrery 0.7.0 (MIT). Generated from src/ by scripts/build.mjs; do not edit.
 // Bundles yaml (ISC, Eemeli Aro). ELK (EPL-2.0) and resvg (MPL-2.0) load from ./vendor.
 import { createRequire as __sdwRequire } from "node:module";
 const require = __sdwRequire(import.meta.url);
@@ -50,24 +50,24 @@ var require_identity = __commonJS({
     var SCALAR = /* @__PURE__ */ Symbol.for("yaml.scalar");
     var SEQ = /* @__PURE__ */ Symbol.for("yaml.seq");
     var NODE_TYPE = /* @__PURE__ */ Symbol.for("yaml.node.type");
-    var isAlias = (node3) => !!node3 && typeof node3 === "object" && node3[NODE_TYPE] === ALIAS;
-    var isDocument = (node3) => !!node3 && typeof node3 === "object" && node3[NODE_TYPE] === DOC;
-    var isMap = (node3) => !!node3 && typeof node3 === "object" && node3[NODE_TYPE] === MAP;
-    var isPair = (node3) => !!node3 && typeof node3 === "object" && node3[NODE_TYPE] === PAIR;
-    var isScalar = (node3) => !!node3 && typeof node3 === "object" && node3[NODE_TYPE] === SCALAR;
-    var isSeq = (node3) => !!node3 && typeof node3 === "object" && node3[NODE_TYPE] === SEQ;
-    function isCollection(node3) {
-      if (node3 && typeof node3 === "object")
-        switch (node3[NODE_TYPE]) {
+    var isAlias = (node4) => !!node4 && typeof node4 === "object" && node4[NODE_TYPE] === ALIAS;
+    var isDocument = (node4) => !!node4 && typeof node4 === "object" && node4[NODE_TYPE] === DOC;
+    var isMap = (node4) => !!node4 && typeof node4 === "object" && node4[NODE_TYPE] === MAP;
+    var isPair = (node4) => !!node4 && typeof node4 === "object" && node4[NODE_TYPE] === PAIR;
+    var isScalar = (node4) => !!node4 && typeof node4 === "object" && node4[NODE_TYPE] === SCALAR;
+    var isSeq = (node4) => !!node4 && typeof node4 === "object" && node4[NODE_TYPE] === SEQ;
+    function isCollection(node4) {
+      if (node4 && typeof node4 === "object")
+        switch (node4[NODE_TYPE]) {
           case MAP:
           case SEQ:
             return true;
         }
       return false;
     }
-    function isNode(node3) {
-      if (node3 && typeof node3 === "object")
-        switch (node3[NODE_TYPE]) {
+    function isNode(node4) {
+      if (node4 && typeof node4 === "object")
+        switch (node4[NODE_TYPE]) {
           case ALIAS:
           case MAP:
           case SCALAR:
@@ -76,7 +76,7 @@ var require_identity = __commonJS({
         }
       return false;
     }
-    var hasAnchor = (node3) => (isScalar(node3) || isCollection(node3)) && !!node3.anchor;
+    var hasAnchor = (node4) => (isScalar(node4) || isCollection(node4)) && !!node4.anchor;
     exports.ALIAS = ALIAS;
     exports.DOC = DOC;
     exports.MAP = MAP;
@@ -104,98 +104,98 @@ var require_visit = __commonJS({
     var BREAK = /* @__PURE__ */ Symbol("break visit");
     var SKIP = /* @__PURE__ */ Symbol("skip children");
     var REMOVE = /* @__PURE__ */ Symbol("remove node");
-    function visit(node3, visitor) {
+    function visit(node4, visitor) {
       const visitor_ = initVisitor(visitor);
-      if (identity.isDocument(node3)) {
-        const cd = visit_(null, node3.contents, visitor_, Object.freeze([node3]));
+      if (identity.isDocument(node4)) {
+        const cd = visit_(null, node4.contents, visitor_, Object.freeze([node4]));
         if (cd === REMOVE)
-          node3.contents = null;
+          node4.contents = null;
       } else
-        visit_(null, node3, visitor_, Object.freeze([]));
+        visit_(null, node4, visitor_, Object.freeze([]));
     }
     visit.BREAK = BREAK;
     visit.SKIP = SKIP;
     visit.REMOVE = REMOVE;
-    function visit_(key, node3, visitor, path) {
-      const ctrl = callVisitor(key, node3, visitor, path);
+    function visit_(key, node4, visitor, path) {
+      const ctrl = callVisitor(key, node4, visitor, path);
       if (identity.isNode(ctrl) || identity.isPair(ctrl)) {
         replaceNode(key, path, ctrl);
         return visit_(key, ctrl, visitor, path);
       }
       if (typeof ctrl !== "symbol") {
-        if (identity.isCollection(node3)) {
-          path = Object.freeze(path.concat(node3));
-          for (let i = 0; i < node3.items.length; ++i) {
-            const ci = visit_(i, node3.items[i], visitor, path);
+        if (identity.isCollection(node4)) {
+          path = Object.freeze(path.concat(node4));
+          for (let i = 0; i < node4.items.length; ++i) {
+            const ci = visit_(i, node4.items[i], visitor, path);
             if (typeof ci === "number")
               i = ci - 1;
             else if (ci === BREAK)
               return BREAK;
             else if (ci === REMOVE) {
-              node3.items.splice(i, 1);
+              node4.items.splice(i, 1);
               i -= 1;
             }
           }
-        } else if (identity.isPair(node3)) {
-          path = Object.freeze(path.concat(node3));
-          const ck = visit_("key", node3.key, visitor, path);
+        } else if (identity.isPair(node4)) {
+          path = Object.freeze(path.concat(node4));
+          const ck = visit_("key", node4.key, visitor, path);
           if (ck === BREAK)
             return BREAK;
           else if (ck === REMOVE)
-            node3.key = null;
-          const cv = visit_("value", node3.value, visitor, path);
+            node4.key = null;
+          const cv = visit_("value", node4.value, visitor, path);
           if (cv === BREAK)
             return BREAK;
           else if (cv === REMOVE)
-            node3.value = null;
+            node4.value = null;
         }
       }
       return ctrl;
     }
-    async function visitAsync(node3, visitor) {
+    async function visitAsync(node4, visitor) {
       const visitor_ = initVisitor(visitor);
-      if (identity.isDocument(node3)) {
-        const cd = await visitAsync_(null, node3.contents, visitor_, Object.freeze([node3]));
+      if (identity.isDocument(node4)) {
+        const cd = await visitAsync_(null, node4.contents, visitor_, Object.freeze([node4]));
         if (cd === REMOVE)
-          node3.contents = null;
+          node4.contents = null;
       } else
-        await visitAsync_(null, node3, visitor_, Object.freeze([]));
+        await visitAsync_(null, node4, visitor_, Object.freeze([]));
     }
     visitAsync.BREAK = BREAK;
     visitAsync.SKIP = SKIP;
     visitAsync.REMOVE = REMOVE;
-    async function visitAsync_(key, node3, visitor, path) {
-      const ctrl = await callVisitor(key, node3, visitor, path);
+    async function visitAsync_(key, node4, visitor, path) {
+      const ctrl = await callVisitor(key, node4, visitor, path);
       if (identity.isNode(ctrl) || identity.isPair(ctrl)) {
         replaceNode(key, path, ctrl);
         return visitAsync_(key, ctrl, visitor, path);
       }
       if (typeof ctrl !== "symbol") {
-        if (identity.isCollection(node3)) {
-          path = Object.freeze(path.concat(node3));
-          for (let i = 0; i < node3.items.length; ++i) {
-            const ci = await visitAsync_(i, node3.items[i], visitor, path);
+        if (identity.isCollection(node4)) {
+          path = Object.freeze(path.concat(node4));
+          for (let i = 0; i < node4.items.length; ++i) {
+            const ci = await visitAsync_(i, node4.items[i], visitor, path);
             if (typeof ci === "number")
               i = ci - 1;
             else if (ci === BREAK)
               return BREAK;
             else if (ci === REMOVE) {
-              node3.items.splice(i, 1);
+              node4.items.splice(i, 1);
               i -= 1;
             }
           }
-        } else if (identity.isPair(node3)) {
-          path = Object.freeze(path.concat(node3));
-          const ck = await visitAsync_("key", node3.key, visitor, path);
+        } else if (identity.isPair(node4)) {
+          path = Object.freeze(path.concat(node4));
+          const ck = await visitAsync_("key", node4.key, visitor, path);
           if (ck === BREAK)
             return BREAK;
           else if (ck === REMOVE)
-            node3.key = null;
-          const cv = await visitAsync_("value", node3.value, visitor, path);
+            node4.key = null;
+          const cv = await visitAsync_("value", node4.value, visitor, path);
           if (cv === BREAK)
             return BREAK;
           else if (cv === REMOVE)
-            node3.value = null;
+            node4.value = null;
         }
       }
       return ctrl;
@@ -218,32 +218,32 @@ var require_visit = __commonJS({
       }
       return visitor;
     }
-    function callVisitor(key, node3, visitor, path) {
+    function callVisitor(key, node4, visitor, path) {
       if (typeof visitor === "function")
-        return visitor(key, node3, path);
-      if (identity.isMap(node3))
-        return visitor.Map?.(key, node3, path);
-      if (identity.isSeq(node3))
-        return visitor.Seq?.(key, node3, path);
-      if (identity.isPair(node3))
-        return visitor.Pair?.(key, node3, path);
-      if (identity.isScalar(node3))
-        return visitor.Scalar?.(key, node3, path);
-      if (identity.isAlias(node3))
-        return visitor.Alias?.(key, node3, path);
+        return visitor(key, node4, path);
+      if (identity.isMap(node4))
+        return visitor.Map?.(key, node4, path);
+      if (identity.isSeq(node4))
+        return visitor.Seq?.(key, node4, path);
+      if (identity.isPair(node4))
+        return visitor.Pair?.(key, node4, path);
+      if (identity.isScalar(node4))
+        return visitor.Scalar?.(key, node4, path);
+      if (identity.isAlias(node4))
+        return visitor.Alias?.(key, node4, path);
       return void 0;
     }
-    function replaceNode(key, path, node3) {
+    function replaceNode(key, path, node4) {
       const parent = path[path.length - 1];
       if (identity.isCollection(parent)) {
-        parent.items[key] = node3;
+        parent.items[key] = node4;
       } else if (identity.isPair(parent)) {
         if (key === "key")
-          parent.key = node3;
+          parent.key = node4;
         else
-          parent.value = node3;
+          parent.value = node4;
       } else if (identity.isDocument(parent)) {
-        parent.contents = node3;
+        parent.contents = node4;
       } else {
         const pt = identity.isAlias(parent) ? "alias" : "scalar";
         throw new Error(`Cannot replace node with ${pt} parent`);
@@ -403,9 +403,9 @@ var require_directives = __commonJS({
         let tagNames;
         if (doc && tagEntries.length > 0 && identity.isNode(doc.contents)) {
           const tags = {};
-          visit.visit(doc.contents, (_key, node3) => {
-            if (identity.isNode(node3) && node3.tag)
-              tags[node3.tag] = true;
+          visit.visit(doc.contents, (_key, node4) => {
+            if (identity.isNode(node4) && node4.tag)
+              tags[node4.tag] = true;
           });
           tagNames = Object.keys(tags);
         } else
@@ -442,9 +442,9 @@ var require_anchors = __commonJS({
     function anchorNames(root) {
       const anchors = /* @__PURE__ */ new Set();
       visit.visit(root, {
-        Value(_key, node3) {
-          if (node3.anchor)
-            anchors.add(node3.anchor);
+        Value(_key, node4) {
+          if (node4.anchor)
+            anchors.add(node4.anchor);
         }
       });
       return anchors;
@@ -648,20 +648,20 @@ var require_Alias = __commonJS({
         } else {
           nodes = [];
           visit.visit(doc, {
-            Node: (_key, node3) => {
-              if (identity.isAlias(node3) || identity.hasAnchor(node3))
-                nodes.push(node3);
+            Node: (_key, node4) => {
+              if (identity.isAlias(node4) || identity.hasAnchor(node4))
+                nodes.push(node4);
             }
           });
           if (ctx)
             ctx.aliasResolveCache = nodes;
         }
         let found = void 0;
-        for (const node3 of nodes) {
-          if (node3 === this)
+        for (const node4 of nodes) {
+          if (node4 === this)
             break;
-          if (node3.anchor === this.source)
-            found = node3;
+          if (node4.anchor === this.source)
+            found = node4;
         }
         if (found && ctx) {
           const { anchors: anchors2, doc: doc2, maxAliasCount } = ctx;
@@ -710,22 +710,22 @@ var require_Alias = __commonJS({
         return src;
       }
     };
-    function getAliasCount(doc, node3, anchors2) {
-      if (identity.isAlias(node3)) {
-        const source = node3.resolve(doc);
+    function getAliasCount(doc, node4, anchors2) {
+      if (identity.isAlias(node4)) {
+        const source = node4.resolve(doc);
         const anchor2 = anchors2 && source && anchors2.get(source);
         return anchor2 ? anchor2.count * anchor2.aliasCount : 0;
-      } else if (identity.isCollection(node3)) {
+      } else if (identity.isCollection(node4)) {
         let count = 0;
-        for (const item of node3.items) {
+        for (const item of node4.items) {
           const c = getAliasCount(doc, item, anchors2);
           if (c > count)
             count = c;
         }
         return count;
-      } else if (identity.isPair(node3)) {
-        const kc = getAliasCount(doc, node3.key, anchors2);
-        const vc = getAliasCount(doc, node3.value, anchors2);
+      } else if (identity.isPair(node4)) {
+        const kc = getAliasCount(doc, node4.key, anchors2);
+        const vc = getAliasCount(doc, node4.value, anchors2);
         return Math.max(kc, vc);
       }
       return 1;
@@ -815,10 +815,10 @@ var require_createNode = __commonJS({
           value = value.toJSON();
         }
         if (!value || typeof value !== "object") {
-          const node4 = new Scalar.Scalar(value);
+          const node5 = new Scalar.Scalar(value);
           if (ref)
-            ref.node = node4;
-          return node4;
+            ref.node = node5;
+          return node5;
         }
         tagObj = value instanceof Map ? schema[identity.MAP] : Symbol.iterator in Object(value) ? schema[identity.SEQ] : schema[identity.MAP];
       }
@@ -826,14 +826,14 @@ var require_createNode = __commonJS({
         onTagObj(tagObj);
         delete ctx.onTagObj;
       }
-      const node3 = tagObj?.createNode ? tagObj.createNode(ctx.schema, value, ctx) : typeof tagObj?.nodeClass?.from === "function" ? tagObj.nodeClass.from(ctx.schema, value, ctx) : new Scalar.Scalar(value);
+      const node4 = tagObj?.createNode ? tagObj.createNode(ctx.schema, value, ctx) : typeof tagObj?.nodeClass?.from === "function" ? tagObj.nodeClass.from(ctx.schema, value, ctx) : new Scalar.Scalar(value);
       if (tagName)
-        node3.tag = tagName;
+        node4.tag = tagName;
       else if (!tagObj.default)
-        node3.tag = tagObj.tag;
+        node4.tag = tagObj.tag;
       if (ref)
-        ref.node = node3;
-      return node3;
+        ref.node = node4;
+      return node4;
     }
     exports.createNode = createNode;
   }
@@ -903,10 +903,10 @@ var require_Collection = __commonJS({
           this.add(value);
         else {
           const [key, ...rest] = path;
-          const node3 = this.get(key, true);
-          if (identity.isCollection(node3))
-            node3.addIn(rest, value);
-          else if (node3 === void 0 && this.schema)
+          const node4 = this.get(key, true);
+          if (identity.isCollection(node4))
+            node4.addIn(rest, value);
+          else if (node4 === void 0 && this.schema)
             this.set(key, collectionFromPath(this.schema, rest, value));
           else
             throw new Error(`Expected YAML collection at ${key}. Remaining path: ${rest}`);
@@ -920,9 +920,9 @@ var require_Collection = __commonJS({
         const [key, ...rest] = path;
         if (rest.length === 0)
           return this.delete(key);
-        const node3 = this.get(key, true);
-        if (identity.isCollection(node3))
-          return node3.deleteIn(rest);
+        const node4 = this.get(key, true);
+        if (identity.isCollection(node4))
+          return node4.deleteIn(rest);
         else
           throw new Error(`Expected YAML collection at ${key}. Remaining path: ${rest}`);
       }
@@ -933,17 +933,17 @@ var require_Collection = __commonJS({
        */
       getIn(path, keepScalar) {
         const [key, ...rest] = path;
-        const node3 = this.get(key, true);
+        const node4 = this.get(key, true);
         if (rest.length === 0)
-          return !keepScalar && identity.isScalar(node3) ? node3.value : node3;
+          return !keepScalar && identity.isScalar(node4) ? node4.value : node4;
         else
-          return identity.isCollection(node3) ? node3.getIn(rest, keepScalar) : void 0;
+          return identity.isCollection(node4) ? node4.getIn(rest, keepScalar) : void 0;
       }
       hasAllNullValues(allowScalar) {
-        return this.items.every((node3) => {
-          if (!identity.isPair(node3))
+        return this.items.every((node4) => {
+          if (!identity.isPair(node4))
             return false;
-          const n3 = node3.value;
+          const n3 = node4.value;
           return n3 == null || allowScalar && identity.isScalar(n3) && n3.value == null && !n3.commentBefore && !n3.comment && !n3.tag;
         });
       }
@@ -954,8 +954,8 @@ var require_Collection = __commonJS({
         const [key, ...rest] = path;
         if (rest.length === 0)
           return this.has(key);
-        const node3 = this.get(key, true);
-        return identity.isCollection(node3) ? node3.hasIn(rest) : false;
+        const node4 = this.get(key, true);
+        return identity.isCollection(node4) ? node4.hasIn(rest) : false;
       }
       /**
        * Sets a value in this collection. For `!!set`, `value` needs to be a
@@ -966,10 +966,10 @@ var require_Collection = __commonJS({
         if (rest.length === 0) {
           this.set(key, value);
         } else {
-          const node3 = this.get(key, true);
-          if (identity.isCollection(node3))
-            node3.setIn(rest, value);
-          else if (node3 === void 0 && this.schema)
+          const node4 = this.get(key, true);
+          if (identity.isCollection(node4))
+            node4.setIn(rest, value);
+          else if (node4 === void 0 && this.schema)
             this.set(key, collectionFromPath(this.schema, rest, value));
           else
             throw new Error(`Expected YAML collection at ${key}. Remaining path: ${rest}`);
@@ -1495,16 +1495,16 @@ var require_stringify = __commonJS({
       }
       return tagObj;
     }
-    function stringifyProps(node3, tagObj, { anchors: anchors$1, doc }) {
+    function stringifyProps(node4, tagObj, { anchors: anchors$1, doc }) {
       if (!doc.directives)
         return "";
       const props = [];
-      const anchor2 = (identity.isScalar(node3) || identity.isCollection(node3)) && node3.anchor;
+      const anchor2 = (identity.isScalar(node4) || identity.isCollection(node4)) && node4.anchor;
       if (anchor2 && anchors.anchorIsValid(anchor2)) {
         anchors$1.add(anchor2);
         props.push(`&${anchor2}`);
       }
-      const tag = node3.tag ?? (tagObj.default ? null : tagObj.tag);
+      const tag = node4.tag ?? (tagObj.default ? null : tagObj.tag);
       if (tag)
         props.push(doc.directives.tagString(tag));
       return props.join(" ");
@@ -1526,15 +1526,15 @@ var require_stringify = __commonJS({
         }
       }
       let tagObj = void 0;
-      const node3 = identity.isNode(item) ? item : ctx.doc.createNode(item, { onTagObj: (o) => tagObj = o });
-      tagObj ?? (tagObj = getTagObject(ctx.doc.schema.tags, node3));
-      const props = stringifyProps(node3, tagObj, ctx);
+      const node4 = identity.isNode(item) ? item : ctx.doc.createNode(item, { onTagObj: (o) => tagObj = o });
+      tagObj ?? (tagObj = getTagObject(ctx.doc.schema.tags, node4));
+      const props = stringifyProps(node4, tagObj, ctx);
       if (props.length > 0)
         ctx.indentAtStart = (ctx.indentAtStart ?? 0) + props.length + 1;
-      const str = typeof tagObj.stringify === "function" ? tagObj.stringify(node3, ctx, onComment, onChompKeep) : identity.isScalar(node3) ? stringifyString.stringifyString(node3, ctx, onComment, onChompKeep) : node3.toString(ctx, onComment, onChompKeep);
+      const str = typeof tagObj.stringify === "function" ? tagObj.stringify(node4, ctx, onComment, onChompKeep) : identity.isScalar(node4) ? stringifyString.stringifyString(node4, ctx, onComment, onChompKeep) : node4.toString(ctx, onComment, onChompKeep);
       if (!props)
         return str;
-      return identity.isScalar(node3) || str[0] === "{" || str[0] === "[" ? `${props} ${str}` : `${props}
+      return identity.isScalar(node4) || str[0] === "{" || str[0] === "[" ? `${props} ${str}` : `${props}
 ${ctx.indent}${str}`;
     }
     exports.createStringifyContext = createStringifyContext;
@@ -1801,8 +1801,8 @@ var require_addPairToJSMap = __commonJS({
       if (identity.isNode(key) && ctx?.doc) {
         const strCtx = stringify2.createStringifyContext(ctx.doc, {});
         strCtx.anchors = /* @__PURE__ */ new Set();
-        for (const node3 of ctx.anchors.keys())
-          strCtx.anchors.add(node3.anchor);
+        for (const node4 of ctx.anchors.keys())
+          strCtx.anchors.add(node4.anchor);
         strCtx.inFlow = true;
         strCtx.inStringifyKey = true;
         const strKey = key.toString(strCtx);
@@ -2111,8 +2111,8 @@ var require_YAMLMap = __commonJS({
       }
       get(key, keepScalar) {
         const it = findPair(this.items, key);
-        const node3 = it?.value;
-        return (!keepScalar && identity.isScalar(node3) ? node3.value : node3) ?? void 0;
+        const node4 = it?.value;
+        return (!keepScalar && identity.isScalar(node4) ? node4.value : node4) ?? void 0;
       }
       has(key) {
         return !!findPair(this.items, key);
@@ -2425,9 +2425,9 @@ var require_float = __commonJS({
       format: "EXP",
       test: /^[-+]?(?:\.[0-9]+|[0-9]+(?:\.[0-9]*)?)[eE][-+]?[0-9]+$/,
       resolve: (str) => parseFloat(str),
-      stringify(node3) {
-        const num = Number(node3.value);
-        return isFinite(num) ? num.toExponential() : stringifyNumber.stringifyNumber(node3);
+      stringify(node4) {
+        const num = Number(node4.value);
+        return isFinite(num) ? num.toExponential() : stringifyNumber.stringifyNumber(node4);
       }
     };
     var float = {
@@ -2436,11 +2436,11 @@ var require_float = __commonJS({
       tag: "tag:yaml.org,2002:float",
       test: /^[-+]?(?:\.[0-9]+|[0-9]+\.[0-9]*)$/,
       resolve(str) {
-        const node3 = new Scalar.Scalar(parseFloat(str));
+        const node4 = new Scalar.Scalar(parseFloat(str));
         const dot = str.indexOf(".");
         if (dot !== -1 && str[str.length - 1] === "0")
-          node3.minFractionDigits = str.length - dot - 1;
-        return node3;
+          node4.minFractionDigits = str.length - dot - 1;
+        return node4;
       },
       stringify: stringifyNumber.stringifyNumber
     };
@@ -2457,11 +2457,11 @@ var require_int = __commonJS({
     var stringifyNumber = require_stringifyNumber();
     var intIdentify = (value) => typeof value === "bigint" || Number.isInteger(value);
     var intResolve = (str, offset, radix, { intAsBigInt }) => intAsBigInt ? BigInt(str) : parseInt(str.substring(offset), radix);
-    function intStringify(node3, radix, prefix) {
-      const { value } = node3;
+    function intStringify(node4, radix, prefix) {
+      const { value } = node4;
       if (intIdentify(value) && value >= 0)
         return prefix + value.toString(radix);
-      return stringifyNumber.stringifyNumber(node3);
+      return stringifyNumber.stringifyNumber(node4);
     }
     var intOct = {
       identify: (value) => intIdentify(value) && value >= 0,
@@ -2470,7 +2470,7 @@ var require_int = __commonJS({
       format: "OCT",
       test: /^0o[0-7]+$/,
       resolve: (str, _onError, opt) => intResolve(str, 2, 8, opt),
-      stringify: (node3) => intStringify(node3, 8, "0o")
+      stringify: (node4) => intStringify(node4, 8, "0o")
     };
     var int = {
       identify: intIdentify,
@@ -2487,7 +2487,7 @@ var require_int = __commonJS({
       format: "HEX",
       test: /^0x[0-9a-fA-F]+$/,
       resolve: (str, _onError, opt) => intResolve(str, 2, 16, opt),
-      stringify: (node3) => intStringify(node3, 16, "0x")
+      stringify: (node4) => intStringify(node4, 16, "0x")
     };
     exports.int = int;
     exports.intHex = intHex;
@@ -2865,9 +2865,9 @@ var require_float2 = __commonJS({
       format: "EXP",
       test: /^[-+]?(?:[0-9][0-9_]*)?(?:\.[0-9_]*)?[eE][-+]?[0-9]+$/,
       resolve: (str) => parseFloat(str.replace(/_/g, "")),
-      stringify(node3) {
-        const num = Number(node3.value);
-        return isFinite(num) ? num.toExponential() : stringifyNumber.stringifyNumber(node3);
+      stringify(node4) {
+        const num = Number(node4.value);
+        return isFinite(num) ? num.toExponential() : stringifyNumber.stringifyNumber(node4);
       }
     };
     var float = {
@@ -2876,14 +2876,14 @@ var require_float2 = __commonJS({
       tag: "tag:yaml.org,2002:float",
       test: /^[-+]?(?:[0-9][0-9_]*)?\.[0-9_]*$/,
       resolve(str) {
-        const node3 = new Scalar.Scalar(parseFloat(str.replace(/_/g, "")));
+        const node4 = new Scalar.Scalar(parseFloat(str.replace(/_/g, "")));
         const dot = str.indexOf(".");
         if (dot !== -1) {
           const f = str.substring(dot + 1).replace(/_/g, "");
           if (f[f.length - 1] === "0")
-            node3.minFractionDigits = f.length;
+            node4.minFractionDigits = f.length;
         }
-        return node3;
+        return node4;
       },
       stringify: stringifyNumber.stringifyNumber
     };
@@ -2922,13 +2922,13 @@ var require_int2 = __commonJS({
       const n3 = parseInt(str, radix);
       return sign === "-" ? -1 * n3 : n3;
     }
-    function intStringify(node3, radix, prefix) {
-      const { value } = node3;
+    function intStringify(node4, radix, prefix) {
+      const { value } = node4;
       if (intIdentify(value)) {
         const str = value.toString(radix);
         return value < 0 ? "-" + prefix + str.substr(1) : prefix + str;
       }
-      return stringifyNumber.stringifyNumber(node3);
+      return stringifyNumber.stringifyNumber(node4);
     }
     var intBin = {
       identify: intIdentify,
@@ -2937,7 +2937,7 @@ var require_int2 = __commonJS({
       format: "BIN",
       test: /^[-+]?0b[0-1_]+$/,
       resolve: (str, _onError, opt) => intResolve(str, 2, 2, opt),
-      stringify: (node3) => intStringify(node3, 2, "0b")
+      stringify: (node4) => intStringify(node4, 2, "0b")
     };
     var intOct = {
       identify: intIdentify,
@@ -2946,7 +2946,7 @@ var require_int2 = __commonJS({
       format: "OCT",
       test: /^[-+]?0[0-7_]+$/,
       resolve: (str, _onError, opt) => intResolve(str, 1, 8, opt),
-      stringify: (node3) => intStringify(node3, 8, "0")
+      stringify: (node4) => intStringify(node4, 8, "0")
     };
     var int = {
       identify: intIdentify,
@@ -2963,7 +2963,7 @@ var require_int2 = __commonJS({
       format: "HEX",
       test: /^[-+]?0x[0-9a-fA-F_]+$/,
       resolve: (str, _onError, opt) => intResolve(str, 2, 16, opt),
-      stringify: (node3) => intStringify(node3, 16, "0x")
+      stringify: (node4) => intStringify(node4, 16, "0x")
     };
     exports.int = int;
     exports.intBin = intBin;
@@ -3073,13 +3073,13 @@ var require_timestamp = __commonJS({
       const res = parts.replace(/_/g, "").split(":").reduce((res2, p) => res2 * num(60) + num(p), num(0));
       return sign === "-" ? num(-1) * res : res;
     }
-    function stringifySexagesimal(node3) {
-      let { value } = node3;
+    function stringifySexagesimal(node4) {
+      let { value } = node4;
       let num = (n3) => n3;
       if (typeof value === "bigint")
         num = (n3) => BigInt(n3);
       else if (isNaN(value) || !isFinite(value))
-        return stringifyNumber.stringifyNumber(node3);
+        return stringifyNumber.stringifyNumber(node4);
       let sign = "";
       if (value < 0) {
         sign = "-";
@@ -3490,13 +3490,13 @@ var require_Document = __commonJS({
        * `name` will be used as a prefix for a new unique anchor.
        * If `name` is undefined, the generated anchor will use 'a' as a prefix.
        */
-      createAlias(node3, name) {
-        if (!node3.anchor) {
+      createAlias(node4, name) {
+        if (!node4.anchor) {
           const prev = anchors.anchorNames(this);
-          node3.anchor = // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+          node4.anchor = // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
           !name || prev.has(name) ? anchors.findNewAnchor(name || "a", prev) : name;
         }
-        return new Alias.Alias(node3.anchor);
+        return new Alias.Alias(node4.anchor);
       }
       createNode(value, replacer, options) {
         let _replacer = void 0;
@@ -3528,11 +3528,11 @@ var require_Document = __commonJS({
           schema: this.schema,
           sourceObjects
         };
-        const node3 = createNode.createNode(value, tag, ctx);
-        if (flow && identity.isCollection(node3))
-          node3.flow = true;
+        const node4 = createNode.createNode(value, tag, ctx);
+        if (flow && identity.isCollection(node4))
+          node4.flow = true;
         setAnchors();
-        return node3;
+        return node4;
       }
       /**
        * Convert a key and a value into a `Pair` using the current schema,
@@ -4129,11 +4129,11 @@ var require_resolve_block_seq = __commonJS({
             continue;
           }
         }
-        const node3 = value ? composeNode(ctx, value, props, onError) : composeEmptyNode(ctx, props.end, start, null, props, onError);
+        const node4 = value ? composeNode(ctx, value, props, onError) : composeEmptyNode(ctx, props.end, start, null, props, onError);
         if (ctx.schema.compat)
           utilFlowIndentCheck.flowIndentCheck(bs.indent, value, onError);
-        offset = node3.range[2];
-        seq.items.push(node3);
+        offset = node4.range[2];
+        seq.items.push(node4);
       }
       seq.range = [bs.offset, offset, commentEnd ?? offset];
       return seq;
@@ -4418,13 +4418,13 @@ var require_compose_collection = __commonJS({
       }
       let tag = ctx.schema.tags.find((t) => t.tag === tagName && t.collection === expType);
       if (!tag) {
-        const kt = ctx.schema.knownTags[tagName];
-        if (kt?.collection === expType) {
-          ctx.schema.tags.push(Object.assign({}, kt, { default: false }));
-          tag = kt;
+        const kt2 = ctx.schema.knownTags[tagName];
+        if (kt2?.collection === expType) {
+          ctx.schema.tags.push(Object.assign({}, kt2, { default: false }));
+          tag = kt2;
         } else {
-          if (kt) {
-            onError(tagToken, "BAD_COLLECTION_TYPE", `${kt.tag} used for ${expType} collection, but expects ${kt.collection ?? "scalar"}`, true);
+          if (kt2) {
+            onError(tagToken, "BAD_COLLECTION_TYPE", `${kt2.tag} used for ${expType} collection, but expects ${kt2.collection ?? "scalar"}`, true);
           } else {
             onError(tagToken, "TAG_RESOLVE_FAILED", `Unresolved tag: ${tagName}`, true);
           }
@@ -4433,12 +4433,12 @@ var require_compose_collection = __commonJS({
       }
       const coll = resolveCollection(CN, ctx, token, onError, tagName, tag);
       const res = tag.resolve?.(coll, (msg) => onError(tagToken, "TAG_RESOLVE_FAILED", msg), ctx.options) ?? coll;
-      const node3 = identity.isNode(res) ? res : new Scalar.Scalar(res);
-      node3.range = coll.range;
-      node3.tag = tagName;
+      const node4 = identity.isNode(res) ? res : new Scalar.Scalar(res);
+      node4.range = coll.range;
+      node4.tag = tagName;
       if (tag?.format)
-        node3.format = tag.format;
-      return node3;
+        node4.format = tag.format;
+      return node4;
     }
     exports.composeCollection = composeCollection;
   }
@@ -4904,10 +4904,10 @@ var require_compose_scalar = __commonJS({
       for (const tag of matchWithTest)
         if (tag.test?.test(value))
           return tag;
-      const kt = schema.knownTags[tagName];
-      if (kt && !kt.collection) {
-        schema.tags.push(Object.assign({}, kt, { default: false, test: void 0 }));
-        return kt;
+      const kt2 = schema.knownTags[tagName];
+      if (kt2 && !kt2.collection) {
+        schema.tags.push(Object.assign({}, kt2, { default: false, test: void 0 }));
+        return kt2;
       }
       onError(tagToken, "TAG_RESOLVE_FAILED", `Unresolved tag: ${tagName}`, tagName !== "tag:yaml.org,2002:str");
       return schema[identity.SCALAR];
@@ -4973,11 +4973,11 @@ var require_compose_node = __commonJS({
     function composeNode(ctx, token, props, onError) {
       const atKey = ctx.atKey;
       const { spaceBefore, comment, anchor: anchor2, tag } = props;
-      let node3;
+      let node4;
       let isSrcToken = true;
       switch (token.type) {
         case "alias":
-          node3 = composeAlias(ctx, token, onError);
+          node4 = composeAlias(ctx, token, onError);
           if (anchor2 || tag)
             onError(token, "ALIAS_PROPS", "An alias node must not specify any properties");
           break;
@@ -4985,17 +4985,17 @@ var require_compose_node = __commonJS({
         case "single-quoted-scalar":
         case "double-quoted-scalar":
         case "block-scalar":
-          node3 = composeScalar.composeScalar(ctx, token, tag, onError);
+          node4 = composeScalar.composeScalar(ctx, token, tag, onError);
           if (anchor2)
-            node3.anchor = anchor2.source.substring(1);
+            node4.anchor = anchor2.source.substring(1);
           break;
         case "block-map":
         case "block-seq":
         case "flow-collection":
           try {
-            node3 = composeCollection.composeCollection(CN, ctx, token, props, onError);
+            node4 = composeCollection.composeCollection(CN, ctx, token, props, onError);
             if (anchor2)
-              node3.anchor = anchor2.source.substring(1);
+              node4.anchor = anchor2.source.substring(1);
           } catch (error) {
             const message = error instanceof Error ? error.message : String(error);
             onError(token, "RESOURCE_EXHAUSTION", message);
@@ -5007,24 +5007,24 @@ var require_compose_node = __commonJS({
           isSrcToken = false;
         }
       }
-      node3 ?? (node3 = composeEmptyNode(ctx, token.offset, void 0, null, props, onError));
-      if (anchor2 && node3.anchor === "")
+      node4 ?? (node4 = composeEmptyNode(ctx, token.offset, void 0, null, props, onError));
+      if (anchor2 && node4.anchor === "")
         onError(anchor2, "BAD_ALIAS", "Anchor cannot be an empty string");
-      if (atKey && ctx.options.stringKeys && (!identity.isScalar(node3) || typeof node3.value !== "string" || node3.tag && node3.tag !== "tag:yaml.org,2002:str")) {
+      if (atKey && ctx.options.stringKeys && (!identity.isScalar(node4) || typeof node4.value !== "string" || node4.tag && node4.tag !== "tag:yaml.org,2002:str")) {
         const msg = "With stringKeys, all keys must be strings";
         onError(tag ?? token, "NON_STRING_KEY", msg);
       }
       if (spaceBefore)
-        node3.spaceBefore = true;
+        node4.spaceBefore = true;
       if (comment) {
         if (token.type === "scalar" && token.source === "")
-          node3.comment = comment;
+          node4.comment = comment;
         else
-          node3.commentBefore = comment;
+          node4.commentBefore = comment;
       }
       if (ctx.options.keepSourceTokens && isSrcToken)
-        node3.srcToken = token;
-      return node3;
+        node4.srcToken = token;
+      return node4;
     }
     function composeEmptyNode(ctx, offset, before, pos, { spaceBefore, comment, anchor: anchor2, tag, end }, onError) {
       const token = {
@@ -5033,19 +5033,19 @@ var require_compose_node = __commonJS({
         indent: -1,
         source: ""
       };
-      const node3 = composeScalar.composeScalar(ctx, token, tag, onError);
+      const node4 = composeScalar.composeScalar(ctx, token, tag, onError);
       if (anchor2) {
-        node3.anchor = anchor2.source.substring(1);
-        if (node3.anchor === "")
+        node4.anchor = anchor2.source.substring(1);
+        if (node4.anchor === "")
           onError(anchor2, "BAD_ALIAS", "Anchor cannot be an empty string");
       }
       if (spaceBefore)
-        node3.spaceBefore = true;
+        node4.spaceBefore = true;
       if (comment) {
-        node3.comment = comment;
-        node3.range[2] = end;
+        node4.comment = comment;
+        node4.range[2] = end;
       }
-      return node3;
+      return node4;
     }
     function composeAlias({ options }, { offset, source, end }, onError) {
       const alias = new Alias.Alias(source.substring(1));
@@ -7537,7 +7537,7 @@ function fromOcticons(data) {
   return { prefix: "octicon", icons };
 }
 var loadedLibrary = (pack) => loaded.get(pack);
-function libraryIcon(set, name, mono = false) {
+function libraryIcon(set, name, mono2 = false) {
   const icon2 = set.icons[name] ?? set.icons[set.aliases?.[name]?.parent ?? ""];
   if (!icon2) return void 0;
   let body = icon2.body;
@@ -7548,7 +7548,7 @@ function libraryIcon(set, name, mono = false) {
       `$1sdwid_${id}`
     );
   }
-  if (mono) {
+  if (mono2) {
     body = body.replaceAll("currentColor", "{{c}}");
     if (!/\bfill="/.test(body) || !body.includes("{{c}}")) body = `<g fill="{{c}}">${body}</g>`;
   }
@@ -7783,6 +7783,18 @@ function suggestIcons(id, limit = 3) {
   for (const [, rid] of ranked) if (!close.includes(rid)) close.push(rid);
   return close.slice(0, limit);
 }
+var WHITE_PAINT = /(?:fill|stroke|stop-color)(?:="|:\s*)(?:#fff(?:fff)?\b|white\b)/i;
+var LIGHT_TILES = /* @__PURE__ */ new Set(["aws:group-aws-cloud", "aws:group-aws-cloud-logo"]);
+function iconTone(id, theme) {
+  const info = iconInfo(id);
+  if (!info) throw new Error(`unknown icon ${id}`);
+  const entry = packEntry(info);
+  if (entry.m || entry.k) return "mono";
+  if (LIGHT_TILES.has(info.id)) return "inverse";
+  if (info.pack === "k8s" || info.pack === "aws" && info.type !== "resource") return "glyph";
+  const body = theme === "dark" && entry.d ? entry.d : entry.b;
+  return WHITE_PAINT.test(body) ? "two" : "shape";
+}
 var libEntries = /* @__PURE__ */ new Map();
 function libraryEntry(info, lib) {
   const done = libEntries.get(info.id);
@@ -7832,7 +7844,14 @@ function renderIcon(id, instance, paint) {
   const entry = packEntry(info);
   let body = paint.theme === "dark" && entry.d ? entry.d : entry.b;
   body = body.replaceAll("sdwid", `${instance}-`);
-  if (entry.m) {
+  if (paint.mono && entry.m) body = body.replaceAll("{{c}}", paint.mono);
+  else if (paint.mono && entry.k) {
+    body = entry.b.replaceAll("sdwid", `${instance}-`).replace(
+      /(fill|stroke|stop-color)="(?:#(?:[0-9a-fA-F]{3}){1,2}|black)"/g,
+      `$1="${paint.mono}"`
+    );
+    body = `<g fill="${paint.mono}">${body}</g>`;
+  } else if (entry.m) {
     let color = paint.color ?? entry.col ?? paint.ink;
     if (contrast(color, paint.background) < 2.2) color = paint.ink;
     if (BLACK_OR_WHITE.has(info.id))
@@ -8198,8 +8217,8 @@ function checkScene(scene, model, opts = {}) {
       }
     }
   }
-  const labels = scene.edges.filter((e) => e.labelBox).map((e) => ({ e, box: e.labelBox }));
-  for (const { e, box } of labels) {
+  const labels2 = scene.edges.filter((e) => e.labelBox).map((e) => ({ e, box: e.labelBox }));
+  for (const { e, box } of labels2) {
     for (const nb of nodeBoxes) {
       if (overlaps(box, nb.foot, -1)) {
         warn(
@@ -8213,10 +8232,10 @@ function checkScene(scene, model, opts = {}) {
       }
     }
   }
-  for (let i = 0; i < labels.length; i++) {
-    for (let j = i + 1; j < labels.length; j++) {
-      const a = labels[i];
-      const b = labels[j];
+  for (let i = 0; i < labels2.length; i++) {
+    for (let j = i + 1; j < labels2.length; j++) {
+      const a = labels2[i];
+      const b = labels2[j];
       if (a && b && overlaps(a.box, b.box, -1)) {
         warn(
           "DG202",
@@ -8429,7 +8448,7 @@ function checkScene(scene, model, opts = {}) {
   }
   const hits = (p, b) => p.round ? circleHitsBox(p.box, b) : overlaps(p.box, b, -EPS);
   const pillFixes = (p) => p.round ? ["shorten the edge label next to it", "use layout: { spacing: loose }"] : ["shorten the badge text", "use layout: { spacing: loose }"];
-  const pillWarn = (p, over, subject, box) => warn("DG211", `${p.what} covers ${over}`, {
+  const pillWarn = (p, over2, subject, box) => warn("DG211", `${p.what} covers ${over2}`, {
     subject: { ...p.subject, ...subject },
     evidence: { badge: boxOf(p.box), over: boxOf(box) },
     fixes: pillFixes(p)
@@ -8640,55 +8659,76 @@ var THEME_TOKENS = {
 };
 var INK = "#0b1012";
 var PAPER = "#eef2f6";
+var BLUE = "#60a5fa";
+var DEEP = "#2563eb";
+var over = (fg, bg, alpha) => {
+  const tint = bg === INK ? BLUE : DEEP;
+  const busiest = mixHex(tint, mixHex(bg === INK ? "#ffffff" : INK, bg, 0.06), 0.14);
+  return ensureContrast(mixHex(fg, bg, alpha), busiest);
+};
 var STAGE_TOKENS = {
   dark: {
     name: "dark",
     background: INK,
-    text: "#e6edf3",
-    muted: mixHex("#e6edf3", INK, 0.68),
-    edge: mixHex("#ffffff", INK, 0.42),
-    edgeLabel: mixHex("#e6edf3", INK, 0.86),
-    surface: mixHex("#ffffff", INK, 0.05),
+    text: over("#ffffff", INK, 0.6),
+    muted: over("#ffffff", INK, 0.5),
+    edge: mixHex("#ffffff", INK, 0.25),
+    edgeLabel: over("#ffffff", INK, 0.55),
+    surface: INK,
     border: mixHex("#ffffff", INK, 0.16),
     zone: mixHex("#ffffff", INK, 0.03),
-    stepFill: INK,
-    stepText: "#e6edf3",
+    stepFill: BLUE,
+    stepText: INK,
     shadow: "#000000",
-    flow: "#60a5fa",
+    flow: BLUE,
     stage: {
+      line: "#ffffff",
       top: "#0e1a24",
-      tint: "#2563eb",
-      tintOpacity: 0.14,
-      dot: "#ffffff",
-      dotOpacity: 0.06,
-      wash: "#ffffff",
-      washOpacity: 0.035,
-      ring: "#60a5fa"
+      tile: INK,
+      tint: BLUE,
+      onTint: INK,
+      glyph: mixHex("#ffffff", INK, 0.55),
+      header: over(BLUE, INK, 0.85),
+      grid: 0.045,
+      panel: 0.03,
+      hair: 0.1,
+      frame: 0.16,
+      wire: 0.25,
+      arrow: 0.4,
+      wash: 0.12,
+      glow: 1
     }
   },
   light: {
     name: "light",
     background: PAPER,
-    text: "#1f2933",
-    muted: mixHex("#1f2933", PAPER, 0.74),
-    edge: mixHex("#0b1012", PAPER, 0.56),
-    edgeLabel: "#2b3640",
+    text: over(INK, PAPER, 0.66),
+    muted: over(INK, PAPER, 0.58),
+    edge: mixHex(INK, PAPER, 0.3),
+    edgeLabel: over(INK, PAPER, 0.62),
     surface: "#ffffff",
-    border: mixHex("#0b1012", PAPER, 0.16),
-    zone: mixHex("#ffffff", PAPER, 0.6),
-    stepFill: INK,
+    border: mixHex(INK, PAPER, 0.16),
+    zone: mixHex(INK, PAPER, 0.03),
+    stepFill: DEEP,
     stepText: "#ffffff",
     shadow: "#0f172a",
-    flow: "#2563eb",
+    flow: DEEP,
     stage: {
+      line: INK,
       top: "#ffffff",
-      tint: "#2563eb",
-      tintOpacity: 0.08,
-      dot: "#0b1012",
-      dotOpacity: 0.07,
-      wash: "#ffffff",
-      washOpacity: 0.7,
-      ring: "#2563eb"
+      tile: "#ffffff",
+      tint: DEEP,
+      onTint: "#ffffff",
+      glyph: mixHex(INK, "#ffffff", 0.6),
+      header: over(DEEP, PAPER, 0.9),
+      grid: 0.05,
+      panel: 0.025,
+      hair: 0.1,
+      frame: 0.16,
+      wire: 0.28,
+      arrow: 0.45,
+      wash: 0.08,
+      glow: 0.5
     }
   }
 };
@@ -8698,24 +8738,26 @@ function tokensFor(scene) {
 var FONT_STACK = "Inter, 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', Arial, sans-serif";
 
 // src/skins.ts
-function neutral(hex) {
-  const c = parseHex(hex);
-  if (!c) return false;
-  return Math.max(...c) - Math.min(...c) < 26;
-}
 function stageColors(scene) {
   const t = tokensFor(scene);
   const s = t.stage;
   if (!s) return scene;
-  const canvas = scene.background && scene.background !== "transparent" ? scene.background : t.background;
-  const washed = mixHex(s.wash, canvas, s.washOpacity);
+  const canvas2 = scene.background && scene.background !== "transparent" ? scene.background : t.background;
+  const panel = mixHex(s.line, canvas2, s.panel);
   for (const g of scene.groups) {
-    if (g.fill === "none" || !neutral(g.fill)) continue;
-    g.fill = washed;
-    const inner = g.inner && neutral(g.inner.fill);
-    if (g.inner && inner) g.inner.fill = washed;
-    g.wash = { color: s.wash, opacity: s.washOpacity, ...inner ? { inner: true } : {} };
-    g.labelColor = ensureContrast(g.labelColor, washed, 4.5);
+    g.fill = g.dash || g.overlay ? "none" : panel;
+    g.stroke = mixHex(s.line, canvas2, s.frame);
+    if (g.inner) g.inner.fill = panel;
+    g.labelColor = ensureContrast(g.depth === 0 ? s.header : t.text, panel);
+  }
+  for (const nd of scene.nodes) {
+    nd.ink = void 0;
+    nd.inkMuted = void 0;
+    if (nd.look !== "shape" || !nd.color) continue;
+    const lit2 = mixHex(nd.color, s.tile, 0.15);
+    const fill2 = mixHex(nd.color, canvas2, scene.theme === "dark" ? 0.16 : 0.1);
+    nd.ink = ensureContrast(ensureContrast(t.text, lit2), fill2);
+    nd.inkMuted = ensureContrast(ensureContrast(t.muted, lit2), fill2);
   }
   return scene;
 }
@@ -9473,14 +9515,14 @@ async function layout(model, opts = {}) {
   for (const n3 of model.nodes) {
     const g = nodeGeometry(n3, horizontal);
     nodeGeom.set(n3.id, g);
-    const node3 = {
+    const node4 = {
       id: n3.id,
       width: g.w,
       height: g.h,
       layoutOptions: { "elk.alignment": "CENTER" }
     };
     if (g.outside) {
-      node3.labels = [
+      node4.labels = [
         {
           id: `${n3.id}__label`,
           text: n3.label,
@@ -9488,8 +9530,8 @@ async function layout(model, opts = {}) {
           height: g.outside.h
         }
       ];
-      node3.layoutOptions = {
-        ...node3.layoutOptions,
+      node4.layoutOptions = {
+        ...node4.layoutOptions,
         "elk.nodeLabels.placement": "OUTSIDE V_BOTTOM H_CENTER",
         "elk.spacing.labelNode": "6"
       };
@@ -9500,8 +9542,8 @@ async function layout(model, opts = {}) {
       const pill = badgePill(n3.badge, anchor2);
       const overhang = Math.ceil(pill.x + pill.w - g.w);
       if (overhang > 0)
-        node3.labels = [
-          ...node3.labels ?? [],
+        node4.labels = [
+          ...node4.labels ?? [],
           {
             id: `${n3.id}__badge`,
             text: n3.badge,
@@ -9513,7 +9555,7 @@ async function layout(model, opts = {}) {
           }
         ];
     }
-    elkNodes.set(n3.id, node3);
+    elkNodes.set(n3.id, node4);
   }
   for (const grp of model.groups) groupGeom.set(grp.id, groupGeometry(grp));
   for (const grp of model.groups) {
@@ -9615,10 +9657,10 @@ async function layout(model, opts = {}) {
     }
     const stepW = e.step !== void 0 ? SIZES.step + 2 : 0;
     if (e.label || e.step !== void 0) {
-      const block = textBlock(e.label ?? "", SIZES.edgeLabel, SIZES.edgeLabelMax);
-      const w = Math.ceil((e.label ? block.width + 12 : 0) + stepW + (e.label && stepW ? 2 : 0));
-      const h = Math.ceil(Math.max(e.label ? block.height + 6 : 0, stepW ? SIZES.step : 0));
-      edgeLabels.set(e.id, { block, w, h, stepW });
+      const block2 = textBlock(e.label ?? "", SIZES.edgeLabel, SIZES.edgeLabelMax);
+      const w = Math.ceil((e.label ? block2.width + 12 : 0) + stepW + (e.label && stepW ? 2 : 0));
+      const h = Math.ceil(Math.max(e.label ? block2.height + 6 : 0, stepW ? SIZES.step : 0));
+      edgeLabels.set(e.id, { block: block2, w, h, stepW });
       elkEdge.labels = [
         {
           id: `${e.id}__label`,
@@ -9720,19 +9762,19 @@ async function layout(model, opts = {}) {
     const style2 = resolveGroupStyle(grp.type);
     if (!gg || !style2) return void 0;
     const strokeBase = grp.color ?? style2.stroke;
-    let stroke2 = strokeBase;
-    let fill = grp.fill === "none" ? "none" : grp.fill ?? style2.fill ?? "none";
-    if (overlay) fill = "none";
+    let stroke3 = strokeBase;
+    let fill2 = grp.fill === "none" ? "none" : grp.fill ?? style2.fill ?? "none";
+    if (overlay) fill2 = "none";
     const ink = style2.labelColor === "ink" || !style2.labelColor;
     let labelColor = grp.color ?? (ink ? t.text : style2.labelColor ?? t.text);
     if (theme === "dark") {
-      if (luminance(strokeBase) < 0.04) stroke2 = "#c9d1d9";
-      else if (contrast(strokeBase, t.background) < 2) stroke2 = mixHex(strokeBase, "#ffffff", 0.55);
-      if (fill !== "none") fill = mixHex(fill, t.background, 0.14);
+      if (luminance(strokeBase) < 0.04) stroke3 = "#c9d1d9";
+      else if (contrast(strokeBase, t.background) < 2) stroke3 = mixHex(strokeBase, "#ffffff", 0.55);
+      if (fill2 !== "none") fill2 = mixHex(fill2, t.background, 0.14);
       if (!grp.color && !ink && luminance(style2.labelColor ?? "#000000") < 0.04)
         labelColor = t.text;
     }
-    labelColor = ensureContrast(labelColor, fill === "none" ? t.background : fill, 4.5);
+    labelColor = ensureContrast(labelColor, fill2 === "none" ? t.background : fill2, 4.5);
     const L = gg.label;
     let iconBox;
     let labelX;
@@ -9806,8 +9848,8 @@ async function layout(model, opts = {}) {
       },
       iconBox,
       icon: gg.icon,
-      stroke: stroke2,
-      fill,
+      stroke: stroke3,
+      fill: fill2,
       labelColor,
       dash: grp.dashed === false ? void 0 : style2.dash ?? (grp.dashed ? "6 4" : void 0),
       strokeWidth: style2.strokeWidth,
@@ -9841,7 +9883,7 @@ async function layout(model, opts = {}) {
       w: round(el.width ?? 0),
       h: round(el.height ?? 0)
     };
-    const node3 = {
+    const node4 = {
       id: n3.id,
       look: n3.look,
       shape: n3.shape,
@@ -9864,31 +9906,31 @@ async function layout(model, opts = {}) {
     if (surface) {
       const ink = ensureContrast(t.text, surface, 4.5);
       const inkMuted = ensureContrast(t.muted, surface, 4.5);
-      if (ink !== t.text) node3.ink = ink;
-      if (inkMuted !== t.muted) node3.inkMuted = inkMuted;
+      if (ink !== t.text) node4.ink = ink;
+      if (inkMuted !== t.muted) node4.inkMuted = inkMuted;
     }
     const S = n3.iconSize;
     if (n3.look === "icon") {
       if (horizontal) {
-        node3.iconBox = { ...box };
+        node4.iconBox = { ...box };
         const lab = el.labels?.[0];
         const lx = lab?.x !== void 0 ? lab.x : box.x + (S - (g.outside?.w ?? 0)) / 2;
         const ly = lab?.y !== void 0 ? lab.y + top : box.y + S + 6;
         const ow = g.outside?.w ?? g.label.width;
-        node3.labelBox = {
+        node4.labelBox = {
           x: round(lx + (ow - g.label.width) / 2),
           y: round(ly),
           w: round(g.label.width),
           h: round(g.label.height)
         };
       } else {
-        node3.iconBox = {
+        node4.iconBox = {
           x: round(box.x + (box.w - S) / 2),
           y: box.y,
           w: S,
           h: S
         };
-        node3.labelBox = {
+        node4.labelBox = {
           x: round(box.x + (box.w - g.label.width) / 2),
           y: round(box.y + S + 6),
           w: round(g.label.width),
@@ -9896,9 +9938,9 @@ async function layout(model, opts = {}) {
         };
       }
       if (g.note) {
-        node3.noteBox = {
-          x: round(node3.labelBox.x + (g.label.width - g.note.width) / 2),
-          y: round(node3.labelBox.y + g.label.height + 2),
+        node4.noteBox = {
+          x: round(node4.labelBox.x + (g.label.width - g.note.width) / 2),
+          y: round(node4.labelBox.y + g.label.height + 2),
           w: round(g.note.width),
           h: round(g.note.height)
         };
@@ -9907,7 +9949,7 @@ async function layout(model, opts = {}) {
       const textH = g.label.height + (g.note ? g.note.height + 2 : 0);
       const ix = box.x + 16;
       if (n3.icon)
-        node3.iconBox = {
+        node4.iconBox = {
           x: round(ix),
           y: round(box.y + (box.h - S) / 2),
           w: S,
@@ -9915,14 +9957,14 @@ async function layout(model, opts = {}) {
         };
       const tx = n3.icon ? ix + S + 12 : box.x + 16;
       const ty = box.y + (box.h - textH) / 2;
-      node3.labelBox = {
+      node4.labelBox = {
         x: round(tx),
         y: round(ty),
         w: round(g.label.width),
         h: round(g.label.height)
       };
       if (g.note)
-        node3.noteBox = {
+        node4.noteBox = {
           x: round(tx),
           y: round(ty + g.label.height + 2),
           w: round(g.note.width),
@@ -9937,21 +9979,21 @@ async function layout(model, opts = {}) {
       const startX = box.x + (box.w - (textW + iconW)) / 2;
       const ty = box.y + extraTop + (innerH - textH) / 2;
       if (n3.icon)
-        node3.iconBox = {
+        node4.iconBox = {
           x: round(startX),
           y: round(ty + (textH - 20) / 2),
           w: 20,
           h: 20
         };
       const tx = startX + iconW;
-      node3.labelBox = {
+      node4.labelBox = {
         x: round(tx + (textW - g.label.width) / 2),
         y: round(ty),
         w: round(g.label.width),
         h: round(g.label.height)
       };
       if (g.note) {
-        node3.noteBox = {
+        node4.noteBox = {
           x: round(tx + (textW - g.note.width) / 2),
           y: round(ty + g.label.height + 2),
           w: round(g.note.width),
@@ -9960,8 +10002,8 @@ async function layout(model, opts = {}) {
       }
     }
     if (n3.badge)
-      node3.badgeBox = badgePill(n3.badge, node3.iconBox && n3.look === "icon" ? node3.iconBox : box);
-    nodes.push(node3);
+      node4.badgeBox = badgePill(n3.badge, node4.iconBox && n3.look === "icon" ? node4.iconBox : box);
+    nodes.push(node4);
   }
   for (const grp of model.groups) {
     if (!grp.around?.length) continue;
@@ -10120,10 +10162,10 @@ async function layout(model, opts = {}) {
   for (const e of model.edges) {
     const edge3 = edges.find((x) => x.id === e.id);
     if (!free(e) || !edge3 || !e.label && e.step === void 0) continue;
-    const block = textBlock(e.label ?? "", SIZES.edgeLabel, SIZES.edgeLabelMax);
+    const block2 = textBlock(e.label ?? "", SIZES.edgeLabel, SIZES.edgeLabelMax);
     const stepW = e.step !== void 0 ? SIZES.step + 2 : 0;
-    const w = Math.ceil((e.label ? block.width + 12 : 0) + stepW + (e.label && stepW ? 2 : 0));
-    const h = Math.ceil(Math.max(e.label ? block.height + 6 : 0, stepW ? SIZES.step : 0));
+    const w = Math.ceil((e.label ? block2.width + 12 : 0) + stepW + (e.label && stepW ? 2 : 0));
+    const h = Math.ceil(Math.max(e.label ? block2.height + 6 : 0, stepW ? SIZES.step : 0));
     const box = freeLabelBox(edge3.points, w, h, [
       ...footprints,
       ...edges.flatMap((x) => [x.labelBox, x.stepBox]),
@@ -10137,7 +10179,7 @@ async function layout(model, opts = {}) {
         h: SIZES.step
       };
     if (e.label) {
-      edge3.label = block;
+      edge3.label = block2;
       edge3.labelBox = {
         x: round(box.x + stepW + (stepW ? 2 : 0)),
         y: box.y,
@@ -10275,11 +10317,11 @@ async function layout(model, opts = {}) {
   }
   width = Math.ceil(width);
   height = Math.ceil(height);
-  let legend3;
+  let legend4;
   if (model.legend?.length) {
-    legend3 = placeLegend(model.legend, width, height);
-    width = Math.max(width, Math.ceil(legend3.box.w + SIZES.pad * 2));
-    height = Math.ceil(legend3.box.y + legend3.box.h + SIZES.pad);
+    legend4 = placeLegend(model.legend, width, height);
+    width = Math.max(width, Math.ceil(legend4.box.w + SIZES.pad * 2));
+    height = Math.ceil(legend4.box.y + legend4.box.h + SIZES.pad);
   }
   const scene = {
     width,
@@ -10298,7 +10340,7 @@ async function layout(model, opts = {}) {
     nodes,
     groups,
     edges,
-    legend: legend3,
+    legend: legend4,
     layoutFallback: fallback,
     description: describe(model)
   };
@@ -10350,8 +10392,8 @@ function fitIcons(scene) {
     if (w >= b.w - 0.01) continue;
     const x = round(b.x + (b.w - w) / 2);
     for (const e of scene.edges) {
-      const ends = [e.from === n3.id ? 0 : -1, e.to === n3.id ? e.points.length - 1 : -1];
-      for (const i of ends) {
+      const ends2 = [e.from === n3.id ? 0 : -1, e.to === n3.id ? e.points.length - 1 : -1];
+      for (const i of ends2) {
         const p = e.points[i];
         const next = e.points[i === 0 ? 1 : i - 1];
         if (!p || !next || Math.abs(next.y - p.y) > 0.5 || p.y < b.y || p.y > b.y + b.h) continue;
@@ -10383,7 +10425,7 @@ function stretchColumns(model, placed, edges) {
       box: { x: l.x ?? 0, y: l.y ?? 0, w: l.width, h: l.height }
     }))
   ]);
-  const labels = edges.flatMap(
+  const labels2 = edges.flatMap(
     (e) => (e.labels ?? []).map((l) => ({
       x: l.x ?? 0,
       y: l.y ?? 0,
@@ -10428,7 +10470,7 @@ function stretchColumns(model, placed, edges) {
         if (s.w < 0.5) return true;
         const hit = (o) => overlaps2(s, { x: o.x, y: o.y, w: o.w || 0.01, h: o.h || 0.01 });
         if (items.some((it) => !related(it.id, el.id) && hit(it.box))) return false;
-        if (labels.some(hit)) return false;
+        if (labels2.some(hit)) return false;
         return segments2.every(([p, q]) => {
           const [lo, hi] = [Math.min(p.x, q.x), Math.max(p.x, q.x)];
           const across = s.left ? lo <= s.x + 0.01 && hi > b.x + 0.5 : hi >= x1 - 0.01 && lo < s.x - 0.5;
@@ -10654,8 +10696,8 @@ function crossings(graph) {
     const s = e.sections?.[0];
     if (!s) return [];
     const pts = [s.startPoint, ...s.bendPoints ?? [], s.endPoint];
-    const ends = [nodeOf(e.sources[0]), nodeOf(e.targets[0])];
-    return [{ ends, segs: pts.slice(1).map((q, i) => [pts[i] ?? q, q]) }];
+    const ends2 = [nodeOf(e.sources[0]), nodeOf(e.targets[0])];
+    return [{ ends: ends2, segs: pts.slice(1).map((q, i) => [pts[i] ?? q, q]) }];
   });
   const cross = (a, b, c, d) => {
     const o = (p, q, r) => (q.x - p.x) * (r.y - p.y) - (q.y - p.y) * (r.x - p.x);
@@ -10724,6 +10766,674 @@ function describe(model) {
   return parts.join(" ").replace(/\s+/g, " ").trim();
 }
 
+// src/render/stage.ts
+var DISPLAY = 880;
+var MONO = "'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace";
+var ADVANCE = 0.6;
+var fill = (c, a = 1) => `fill="${c}"${a < 1 ? ` fill-opacity="${a}"` : ""}`;
+var stroke = (c, a, w) => `stroke="${c}"${a < 1 ? ` stroke-opacity="${a}"` : ""} stroke-width="${n(w)}"`;
+var rect = (b, rx, paint, extra = "") => `<rect x="${n(b.x)}" y="${n(b.y)}" width="${n(b.w)}" height="${n(b.h)}"${rx ? ` rx="${n(rx)}"` : ""} ${paint}${extra}/>`;
+var LABEL = { size: 11.5, weight: 700, caps: true, track: 0.08 };
+var NOTE = { size: 10, weight: 400, caps: false, track: 0 };
+var EDGE = { size: 9.5, weight: 700, caps: true, track: 0.06 };
+var HEADER = { size: 11, weight: 700, caps: true, track: 0.1 };
+var TITLE = { size: 18, weight: 700, caps: true, track: 0.06 };
+var SUBTITLE = { size: 11.5, weight: 400, caps: false, track: 0 };
+var KEY = { size: 9.5, weight: 700, caps: true, track: 0.06 };
+var DIGIT = { size: 13, weight: 700, caps: true, track: 0 };
+var chars = (s) => [...s].length;
+function monoWidth(s, f, size = f.size) {
+  const c = chars(s);
+  return c ? size * (c * (ADVANCE + f.track) - f.track) : 0;
+}
+function sizeFor(lines, f, room, min = 8) {
+  const widest = Math.max(1, ...lines.map(chars));
+  const size = (room + f.size * f.track) / (widest * (ADVANCE + f.track));
+  return Math.max(min, Math.floor(Math.min(f.size, size) * 4) / 4);
+}
+function common(fits, cap) {
+  if (!fits.length) return cap;
+  const sorted = [...fits].sort((a, b) => a - b);
+  return Math.min(cap, sorted[Math.floor(sorted.length * 0.2)] ?? cap);
+}
+function mono(lines, f, size, at, color, anchor2, extra = "") {
+  if (!lines.length) return "";
+  const track = f.track * size;
+  const x = at.x + (anchor2 === "middle" ? track / 2 : 0);
+  const drop = (f.caps ? 0.355 : 0.33) * size;
+  const spans = lines.map(
+    (line, i) => `<tspan x="${n(x)}" y="${n(at.y + (i + 0.5) * at.lead + drop)}">${esc(f.caps ? line.toUpperCase() : line)}</tspan>`
+  ).join("");
+  const spacing = track ? ` letter-spacing="${n(track)}"` : "";
+  const middle = anchor2 === "middle" ? ` text-anchor="middle"` : "";
+  return `<text font-size="${n(size)}" font-weight="${f.weight}"${spacing} fill="${color}"${middle}${extra}>${spans}</text>`;
+}
+function block(b, box, f, size, color, anchor2 = "middle", extra = "") {
+  const lead = b.lines.length ? box.h / b.lines.length : b.lead;
+  const x = anchor2 === "middle" ? box.x + box.w / 2 : box.x;
+  return mono(b.lines, f, size, { x, y: box.y, lead }, color, anchor2, extra);
+}
+var TONE_FIT = {
+  glyph: 0.86,
+  inverse: 0.86,
+  two: 0.62,
+  shape: 0.58,
+  mono: 0.6
+};
+var LIGHT = "0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0.8929 3.0038 0.3032 0 -2.604";
+var DARK = "0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  -0.8504 -2.8608 -0.2888 0 2.4";
+function toneFilter(ctx, tone, color) {
+  const key = `${tone}|${color}`;
+  let id = ctx.filters.get(key);
+  if (id) return id;
+  id = `${ctx.prefix}f${ctx.filters.size + 1}`;
+  ctx.filters.set(key, id);
+  const flood = `<feFlood flood-color="${color}"/>`;
+  const body = tone === "glyph" ? `<feColorMatrix type="matrix" values="${LIGHT}" result="a"/>${flood}<feComposite in2="a" operator="in"/>` : tone === "inverse" ? `<feColorMatrix type="matrix" values="${DARK}" result="a"/>${flood}<feComposite in2="a" operator="in"/><feComposite in2="SourceAlpha" operator="in"/>` : tone === "two" ? `<feColorMatrix type="matrix" values="${LIGHT}" result="a"/><feFlood flood-color="${color}" flood-opacity="0.4"/><feComposite in2="SourceAlpha" operator="in" result="base"/>${flood}<feComposite in2="a" operator="in" result="hi"/><feMerge><feMergeNode in="base"/><feMergeNode in="hi"/></feMerge>` : `${flood}<feComposite in2="SourceAlpha" operator="in"/>`;
+  ctx.defs.push(
+    `<filter id="${id}" x="-0.1" y="-0.1" width="1.2" height="1.2" color-interpolation-filters="sRGB">${body}</filter>`
+  );
+  return id;
+}
+function glyph(ctx, id, box, color, scale = 1) {
+  const tone = iconTone(id, ctx.t.name);
+  const size = Math.min(box.w, box.h) * TONE_FIT[tone] * scale;
+  const r = renderIcon(id, SYMBOL_ID, {
+    theme: ctx.t.name,
+    background: ctx.k.tile,
+    ink: color,
+    ...tone === "mono" ? { mono: color } : {}
+  });
+  let body = r.body;
+  if (tone === "mono") {
+    const weight = 1.5 * ctx.h * r.viewBox[2] / size;
+    body = body.replace(
+      /stroke-width="([\d.]+)"/g,
+      (m, w) => Number(w) > weight ? `stroke-width="${n(weight)}"` : m
+    );
+  }
+  const viewBox = r.viewBox.join(" ");
+  const key = `${viewBox}|${body}`;
+  let ref = ctx.symbols.get(key);
+  if (!ref) {
+    ref = `${ctx.prefix}s${ctx.symbols.size + 1}`;
+    ctx.symbols.set(key, ref);
+    ctx.defs.push(
+      `<symbol id="${ref}" viewBox="${viewBox}" overflow="visible">${body.replaceAll(`${SYMBOL_ID}-`, `${ref}-`)}</symbol>`
+    );
+  }
+  const paint = tone === "mono" ? "" : ` filter="url(#${toneFilter(ctx, tone, color)})"`;
+  const x = box.x + (box.w - size) / 2;
+  const y = box.y + (box.h - size) / 2;
+  return `<use href="#${ref}" x="${n(x)}" y="${n(y)}" width="${n(size)}" height="${n(size)}"${paint}/>`;
+}
+var GROUPS_ON = 0.35;
+var TILES_ON = 0.7;
+var STORY_AT = 1.25;
+var SPEED = 320;
+var PAUSE = 0.24;
+var HOLD_FOR = 0.9;
+var RAMP = 0.18;
+var FADE = 0.15;
+var COMET = 26;
+var HOLD = 0.9;
+var GONE = 0.94;
+var SIDE_FLOWS = 2;
+var EASE = "0.65 0 0.35 1";
+var ends = (e) => e.arrow === "start" ? [e.to, e.from] : [e.from, e.to];
+function longestPath(edges) {
+  const out = /* @__PURE__ */ new Map();
+  const starts = [];
+  for (const e of edges) {
+    const [a, b] = ends(e);
+    if (a === b) continue;
+    out.set(a, [...out.get(a) ?? [], e]);
+    if (!starts.includes(a)) starts.push(a);
+  }
+  const memo = /* @__PURE__ */ new Map();
+  const open = /* @__PURE__ */ new Set();
+  const from = (v) => {
+    const known = memo.get(v);
+    if (known) return known;
+    open.add(v);
+    let best2 = [];
+    for (const e of out.get(v) ?? []) {
+      const next = ends(e)[1];
+      if (open.has(next)) continue;
+      const path = [e, ...from(next)];
+      if (path.length > best2.length) best2 = path;
+    }
+    open.delete(v);
+    memo.set(v, best2);
+    return best2;
+  };
+  let best = [];
+  for (const v of starts) {
+    const path = from(v);
+    if (path.length > best.length) best = path;
+  }
+  return best;
+}
+function storyPlan(scene, h) {
+  const animated = scene.animate === "relay" || scene.animate === "packets";
+  const story = {
+    animated,
+    cycle: 0,
+    hold: 0,
+    gone: 0,
+    runs: /* @__PURE__ */ new Map(),
+    side: /* @__PURE__ */ new Map(),
+    badges: /* @__PURE__ */ new Map(),
+    focus: { x: scene.width * 0.6, y: scene.height * 0.45 }
+  };
+  const directed = scene.edges.filter((e) => e.arrow !== "none" && e.points.length > 1);
+  const travel = (e) => Math.min(1, Math.max(0.4, length(e.points) / h / SPEED));
+  const stepped = directed.filter((e) => e.step !== void 0);
+  let t = STORY_AT;
+  if (stepped.length) {
+    const steps = [...new Set(stepped.map((e) => e.step ?? 0))].sort((a, b) => a - b);
+    steps.forEach((step, i) => {
+      let took = 0;
+      for (const e of stepped.filter((x) => x.step === step)) {
+        const tr = travel(e);
+        const park = i < steps.length - 1 ? PAUSE : 0;
+        const runs = e.arrow === "both" ? [
+          { t0: t, t1: t + tr, reverse: false, park: PAUSE },
+          { t0: t + tr + PAUSE, t1: t + 2 * tr + PAUSE, reverse: true, park }
+        ] : [{ t0: t, t1: t + tr, reverse: e.arrow === "start", park }];
+        story.runs.set(e.id, runs);
+        story.badges.set(e.id, t);
+        took = Math.max(took, (runs[runs.length - 1]?.t1 ?? t) - t);
+      }
+      t += took + PAUSE;
+    });
+  } else {
+    const path = longestPath(directed);
+    path.forEach((e, i) => {
+      const tr = travel(e);
+      const park = i < path.length - 1 ? PAUSE : 0;
+      story.runs.set(e.id, [{ t0: t, t1: t + tr, reverse: e.arrow === "start", park }]);
+      t += tr + PAUSE;
+    });
+  }
+  const end = story.runs.size ? t - PAUSE : TILES_ON + RAMP;
+  story.hold = end + HOLD_FOR;
+  story.cycle = story.hold / HOLD;
+  story.gone = story.cycle * GONE;
+  const on = new Set(
+    scene.edges.filter((e) => story.runs.has(e.id)).flatMap((e) => [e.from, e.to])
+  );
+  const side = directed.filter((e) => !story.runs.has(e.id)).sort((a, b) => Number(on.has(b.from) || on.has(b.to)) - Number(on.has(a.from) || on.has(a.to))).slice(0, SIDE_FLOWS);
+  side.forEach((e, i) => {
+    const tr = travel(e);
+    const span = Math.max(0, end - STORY_AT);
+    const t0 = Math.min(STORY_AT + span * (0.45 + 0.3 * i), story.hold - 0.2 - tr);
+    story.side.set(e.id, {
+      t0: Math.max(STORY_AT, t0),
+      t1: Math.max(STORY_AT, t0) + tr,
+      reverse: e.arrow === "start",
+      park: 0
+    });
+  });
+  const pts = scene.edges.filter((e) => story.runs.has(e.id)).flatMap((e) => e.points);
+  if (pts.length) {
+    const xs = pts.map((p) => p.x);
+    const ys = pts.map((p) => p.y);
+    story.focus = {
+      x: (Math.min(...xs) + Math.max(...xs)) / 2,
+      y: (Math.min(...ys) + Math.max(...ys)) / 2
+    };
+  }
+  return story;
+}
+var loop = (ctx) => `dur="${secs(ctx.story.cycle)}" repeatCount="indefinite"`;
+var kt = (ctx, times) => keyTimes(times, ctx.story.cycle);
+function show(ctx, on, off) {
+  const { cycle } = ctx.story;
+  return `<animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="${kt(ctx, [0, on, on + RAMP, off - RAMP, off, cycle])}" ${loop(ctx)}/>`;
+}
+function lit(ctx, body, on, off = ctx.story.gone) {
+  if (!body) return "";
+  return ctx.story.animated ? `<g opacity="0">${body}${show(ctx, on, off)}</g>` : body;
+}
+function packet(ctx, d, run, color, r) {
+  const { cycle } = ctx.story;
+  const [a, b] = run.reverse ? ["1", "0"] : ["0", "1"];
+  const gone = run.t1 + run.park + FADE;
+  return `<circle r="${n(r)}" fill="${color}" opacity="0"><animateMotion path="${d}" ${loop(ctx)} calcMode="spline" keyPoints="${a};${a};${b};${b}" keyTimes="${kt(ctx, [0, run.t0, run.t1, cycle])}" keySplines="0 0 1 1;${EASE};0 0 1 1"/><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="${kt(ctx, [0, run.t0 - FADE, run.t0, gone - FADE, gone, cycle])}" ${loop(ctx)}/></circle>`;
+}
+function comet(ctx, d, run, color, len) {
+  const { cycle } = ctx.story;
+  const f = Math.min(0.5, COMET / Math.max(1, len / ctx.h));
+  const settle = run.t1 + f * (run.t1 - run.t0);
+  const offsets = run.reverse ? [-1, -1, 0, f, f] : [f, f, f - 1, -1, -1];
+  const times = kt(ctx, [0, run.t0, run.t1, settle, cycle]);
+  return `<path d="${d}" fill="none" ${stroke(color, 0.6, 2.4 * ctx.h)} pathLength="1" stroke-dasharray="${n(f)} 2" stroke-dashoffset="${n(offsets[0] ?? 0)}" opacity="0"><animate attributeName="stroke-dashoffset" values="${offsets.map(n).join(";")}" keyTimes="${times}" calcMode="spline" keySplines="0 0 1 1;${EASE};0 0 1 1;0 0 1 1" ${loop(ctx)}/><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="${kt(ctx, [0, run.t0, run.t0 + 0.01, settle, settle + 0.01, cycle])}" ${loop(ctx)}/></path>`;
+}
+function canvas(ctx) {
+  const { k, t, scene, h } = ctx;
+  if (scene.background === "transparent") return "";
+  const p = ctx.prefix;
+  const W = scene.width;
+  const H = scene.height;
+  const cell = 20 * h;
+  const { x: fx, y: fy } = ctx.story.focus;
+  const reach = Math.max(
+    ...[
+      [0, 0],
+      [W, 0],
+      [0, H],
+      [W, H]
+    ].map(([x = 0, y = 0]) => Math.hypot(x - fx, y - fy))
+  );
+  ctx.defs.push(
+    `<linearGradient id="${p}bg" x1="0" y1="0" x2="0.34" y2="0.94"><stop offset="0" stop-color="${k.top}"/><stop offset="0.6" stop-color="${t.background}"/></linearGradient><pattern id="${p}grid" width="${n(cell)}" height="${n(cell)}" patternUnits="userSpaceOnUse"><path d="M0 ${n(h / 2)}H${n(cell)}M${n(h / 2)} 0V${n(cell)}" fill="none" ${stroke(k.line, k.grid, h)}/></pattern><radialGradient id="${p}wash" gradientUnits="userSpaceOnUse" cx="${n(fx)}" cy="${n(fy)}" r="${n(reach * 0.6)}"><stop offset="0" stop-color="${k.tint}" stop-opacity="${k.wash}"/><stop offset="1" stop-color="${k.tint}" stop-opacity="0"/></radialGradient>`
+  );
+  const base = scene.background ?? `url(#${p}bg)`;
+  return `<rect width="${W}" height="${H}" fill="${base}"/><rect width="${W}" height="${H}" fill="url(#${p}grid)"/><rect width="${W}" height="${H}" fill="url(#${p}wash)"/>`;
+}
+function groupFrame(ctx, g) {
+  const { k, h } = ctx;
+  const dash = g.dash ? ` stroke-dasharray="${n(3 * h)} ${n(3 * h)}"` : "";
+  const rx = g.dash ? 0 : 2 * h;
+  const panel = !g.dash && g.depth < 2 ? fill(k.line, k.panel) : `fill="none"`;
+  const tint = g.depth === 0 ? fill(k.tint, (g.dash ? 0.04 : 0.03) * k.glow) : `fill="none"`;
+  const base = rect(g.box, rx, `${panel} ${stroke(k.line, k.frame, h)}`, dash);
+  const glow = rect(g.box, rx, `${tint} ${stroke(k.tint, g.dash ? 0.5 : 0.6, h)}`, dash);
+  return base + lit(ctx, glow, GROUPS_ON);
+}
+function crosses(a, b, box) {
+  let lo = 0;
+  let hi = 1;
+  const dx = b.x - a.x;
+  const dy = b.y - a.y;
+  const sides = [
+    [-dx, a.x - box.x],
+    [dx, box.x + box.w - a.x],
+    [-dy, a.y - box.y],
+    [dy, box.y + box.h - a.y]
+  ];
+  for (const [p, q] of sides) {
+    if (p === 0) {
+      if (q < 0) return false;
+      continue;
+    }
+    const r = q / p;
+    if (p < 0) lo = Math.max(lo, r);
+    else hi = Math.min(hi, r);
+    if (lo > hi) return false;
+  }
+  return true;
+}
+function groupHeader(ctx, g) {
+  const { k, h } = ctx;
+  const parts = [];
+  if (g.icon && g.iconBox) {
+    const b = g.iconBox;
+    if (b.w >= 28) {
+      parts.push(rect(b, 0, fill(k.line, k.frame)));
+      parts.push(glyph(ctx, g.icon, b, mixHex(k.line, k.tile, 0.7), 0.85));
+      parts.push(
+        lit(ctx, rect(b, 0, fill(k.tint)) + glyph(ctx, g.icon, b, k.onTint, 0.85), GROUPS_ON)
+      );
+    } else {
+      parts.push(glyph(ctx, g.icon, b, k.glyph, 1.5));
+      parts.push(lit(ctx, glyph(ctx, g.icon, b, k.tint, 1.5), GROUPS_ON));
+    }
+  }
+  if (g.label.lines.length) {
+    const b = g.labelBox;
+    const room = Math.max(b.w, g.box.x + g.box.w - b.x - 10 * h);
+    const size = sizeFor(g.label.lines, HEADER, room, 8.5);
+    const w = Math.max(...g.label.lines.map((l) => monoWidth(l, HEADER, size)));
+    const chip = { x: b.x - 4, y: b.y - 1, w: w + 8, h: b.h + 2 };
+    const crossed = ctx.scene.edges.some(
+      (e) => e.points.some((p, i) => {
+        const q = e.points[i + 1];
+        return q !== void 0 && crosses(p, q, chip);
+      })
+    );
+    if (crossed) parts.push(rect(chip, 3, fill(ctx.t.background)));
+    parts.push(block(g.label, b, HEADER, size, g.labelColor, "start"));
+  }
+  return parts.join("");
+}
+var ARROW_LEN = 6;
+var ARROW_HALF = 4;
+function chevron(ctx, tip, from, color, alpha) {
+  const len = ARROW_LEN * ctx.h;
+  const half = ARROW_HALF * ctx.h;
+  const d = Math.hypot(tip.x - from.x, tip.y - from.y) || 1;
+  const ux = (tip.x - from.x) / d;
+  const uy = (tip.y - from.y) / d;
+  const bx = tip.x - ux * len;
+  const by = tip.y - uy * len;
+  return `<path d="M${n(bx - uy * half)} ${n(by + ux * half)} L${n(tip.x)} ${n(tip.y)} L${n(bx + uy * half)} ${n(by - ux * half)}" fill="none" ${stroke(color, alpha, ctx.h)} stroke-linecap="round" stroke-linejoin="round"/>`;
+}
+function wireOf(ctx, e) {
+  const h = ctx.h;
+  let pts = e.points;
+  if (pts.length < 2) return void 0;
+  const end = e.arrow === "end" || e.arrow === "both";
+  const start = e.arrow === "start" || e.arrow === "both";
+  const spline = ctx.scene.routing === "spline" && (pts.length - 1) % 3 === 0 && pts.length > 2;
+  if (!spline) {
+    if (end) pts = trim(pts, true, h / 2);
+    if (start) pts = trim(pts, false, h / 2);
+  }
+  const width = e.line === "thick" ? 1.8 * h : h;
+  const dash = e.line === "dashed" ? ` stroke-dasharray="${n(4 * h)} ${n(3 * h)}"` : e.line === "dotted" ? ` stroke-dasharray="${n(h)} ${n(2.5 * h)}"` : "";
+  const o = e.points;
+  const last = o[o.length - 1];
+  const before = o[o.length - 2];
+  const first = o[0];
+  const second = o[1];
+  return {
+    d: edgePath(pts, ctx.scene.routing),
+    len: length(pts),
+    dash,
+    width,
+    heads: {
+      ...end && last && before ? { end: [last, before] } : {},
+      ...start && first && second ? { start: [first, second] } : {}
+    }
+  };
+}
+function edgeBase(ctx, e, w) {
+  const { k } = ctx;
+  const flow = ctx.scene.animate === "flow" ? ` class="sdw-flow${e.line === "solid" || e.line === "thick" ? " sdw-solid" : ""}"` : "";
+  const heads = [w.heads.end, w.heads.start].map((hd) => hd ? chevron(ctx, hd[0], hd[1], k.line, k.arrow) : "").join("");
+  return `<path d="${w.d}" fill="none" ${stroke(k.line, k.wire, w.width)} stroke-linecap="round" stroke-linejoin="round"${w.dash}${flow}/>${heads}`;
+}
+function edgeLit(ctx, e, w, runs) {
+  const { story, h } = ctx;
+  const color = e.color ?? ctx.k.tint;
+  const width = (e.line === "thick" ? 1.8 : 1.2) * h;
+  const first = runs[0];
+  if (!first) return "";
+  const parts = [];
+  const line = `<path d="${w.d}" fill="none" ${stroke(color, 0.5, width)} stroke-linecap="round" stroke-linejoin="round"${w.dash}/>`;
+  if (!story.animated) parts.push(line);
+  else {
+    const hide = first.reverse ? "-1" : "1";
+    const reveal = `<animate attributeName="stroke-dashoffset" values="${hide};${hide};0;0" keyTimes="${kt(ctx, [0, first.t0, first.t1, story.cycle])}" calcMode="spline" keySplines="0 0 1 1;${EASE};0 0 1 1" ${loop(ctx)}/>`;
+    const off = story.hold + RAMP;
+    if (w.dash) {
+      const id = `${ctx.prefix}m-${e.id}`;
+      ctx.defs.push(
+        `<mask id="${id}" maskUnits="userSpaceOnUse" x="0" y="0" width="${ctx.scene.width}" height="${ctx.scene.height}"><path d="${w.d}" fill="none" stroke="#ffffff" stroke-width="${n(width + 6 * h)}" pathLength="1" stroke-dasharray="1 1" stroke-dashoffset="${hide}">${reveal}</path></mask>`
+      );
+      parts.push(`<g mask="url(#${id})" opacity="0">${line}${show(ctx, first.t0, off)}</g>`);
+    } else {
+      parts.push(
+        `<path d="${w.d}" fill="none" ${stroke(color, 0.5, width)} stroke-linecap="round" stroke-linejoin="round" pathLength="1" stroke-dasharray="1 1" stroke-dashoffset="${hide}" opacity="0">${reveal}${show(ctx, first.t0, off)}</path>`
+      );
+    }
+  }
+  for (const run of runs) {
+    const hd = run.reverse ? w.heads.start : w.heads.end;
+    if (hd) parts.push(lit(ctx, chevron(ctx, hd[0], hd[1], color, 0.7), run.t1, story.hold + RAMP));
+  }
+  return parts.join("");
+}
+function edgeLabel(ctx, e) {
+  const { k, h, story } = ctx;
+  const parts = [];
+  const runs = story.runs.get(e.id);
+  const on = runs?.[0]?.t0 ?? 0;
+  if (e.labelBox && e.label?.lines.length) {
+    const b = e.labelBox;
+    const size = Math.min(ctx.sizes.edge, sizeFor(e.label.lines, EDGE, b.w - 8, 7));
+    const w = Math.max(b.w, ...e.label.lines.map((l) => monoWidth(l, EDGE, size) + 8));
+    const chip = { x: b.x + b.w / 2 - w / 2, y: b.y, w, h: b.h };
+    parts.push(rect(chip, 3, `${fill(k.tile)} ${stroke(k.line, k.hair, h)}`));
+    parts.push(block(e.label, b, EDGE, size, ctx.t.edgeLabel));
+    if (runs) {
+      const color = e.color ?? k.tint;
+      parts.push(
+        lit(
+          ctx,
+          rect(chip, 3, `${fill(k.tile)} ${stroke(color, 0.5, h)}`) + block(e.label, b, EDGE, size, color),
+          on,
+          story.hold + RAMP
+        )
+      );
+    }
+  }
+  if (e.stepBox && e.step !== void 0) {
+    const s = e.stepBox;
+    const cx = s.x + s.w / 2;
+    const cy = s.y + s.h / 2;
+    const r = s.w / 2;
+    const digit = (color, x, y) => mono(
+      [String(e.step)],
+      DIGIT,
+      Math.min(DIGIT.size, r),
+      { x, y: y - r, lead: 2 * r },
+      color,
+      "middle"
+    );
+    parts.push(
+      `<circle cx="${n(cx)}" cy="${n(cy)}" r="${n(r)}" ${fill(k.tile)} ${stroke(k.line, k.frame, h)}/>`
+    );
+    parts.push(digit(ctx.t.text, cx, cy));
+    const pop = `<circle r="${n(r)}" ${fill(e.color ?? k.tint)}/>${digit(k.onTint, 0, 0)}`;
+    const at = story.badges.get(e.id);
+    if (!story.animated) parts.push(`<g transform="translate(${n(cx)} ${n(cy)})">${pop}</g>`);
+    else if (at !== void 0) {
+      const times = kt(ctx, [0, at, at + RAMP, at + 2 * RAMP, story.hold, story.gone, story.cycle]);
+      parts.push(
+        `<g transform="translate(${n(cx)} ${n(cy)})"><g opacity="0">${pop}<animate attributeName="opacity" values="0;0;1;1;1;0;0" keyTimes="${times}" ${loop(ctx)}/><animateTransform attributeName="transform" type="scale" values="0.4;0.4;1.3;1;1;1;0.4" keyTimes="${times}" ${loop(ctx)}/></g></g>`
+      );
+    }
+  }
+  return parts.length ? `<g id="${ctx.prefix}el-${e.id}">${parts.join("")}</g>` : "";
+}
+function tile(ctx, nd, b) {
+  const { k, h } = ctx;
+  const rx = 0.17 * Math.min(b.w, b.h);
+  const tint = nd.color ?? k.tint;
+  return rect(b, rx, `${fill(k.tile)} ${stroke(k.line, k.frame, h)}`) + lit(ctx, rect(b, rx, `${fill(tint, 0.15)} ${stroke(tint, 0.65, h)}`), TILES_ON) + (nd.icon ? glyph(ctx, nd.icon, b, k.glyph) : "");
+}
+function badge(ctx, label, anchor2, placed) {
+  const { k, h } = ctx;
+  const size = 8.5;
+  const w = placed?.w ?? Math.max(18, monoWidth(label, KEY, size) + 10);
+  const bh = placed?.h ?? 16;
+  const b = {
+    x: placed?.x ?? anchor2.x + anchor2.w - w / 2 - 2,
+    y: placed?.y ?? anchor2.y - 7,
+    w: Math.max(w, monoWidth(label, KEY, size) + 10),
+    h: bh
+  };
+  return rect(b, bh / 2, `${fill(k.tile)} ${stroke(k.line, k.frame, h)}`) + mono([label], KEY, size, { x: b.x + b.w / 2, y: b.y, lead: bh }, ctx.t.edgeLabel, "middle");
+}
+function labels(ctx, nd, anchor2, room) {
+  const own = sizeFor(nd.label.lines, LABEL, room, 8);
+  const parts = [
+    block(
+      nd.label,
+      nd.labelBox,
+      LABEL,
+      Math.min(ctx.sizes.label, own),
+      nd.ink ?? ctx.t.text,
+      anchor2
+    )
+  ];
+  if (nd.note && nd.noteBox)
+    parts.push(
+      block(
+        nd.note,
+        nd.noteBox,
+        NOTE,
+        Math.min(ctx.sizes.note, sizeFor(nd.note.lines, NOTE, room, 8)),
+        nd.inkMuted ?? ctx.t.muted,
+        anchor2
+      )
+    );
+  return parts.join("");
+}
+function labelRoom(nd) {
+  if (nd.look === "card") return nd.box.x + nd.box.w - nd.labelBox.x - 10;
+  return Math.max(nd.labelBox.w, nd.look === "icon" ? nd.box.w : 0) + 14;
+}
+function node(ctx, nd) {
+  const { k, h } = ctx;
+  const parts = [];
+  const room = labelRoom(nd);
+  if (nd.look === "icon") {
+    if (nd.iconBox) parts.push(tile(ctx, nd, nd.iconBox));
+    parts.push(labels(ctx, nd, "middle", room));
+    if (nd.badge && nd.iconBox) parts.push(badge(ctx, nd.badge, nd.iconBox, nd.badgeBox));
+  } else if (nd.look === "card") {
+    const tint = nd.color ?? k.tint;
+    parts.push(rect(nd.box, 6, `${fill(k.tile)} ${stroke(k.line, k.frame, h)}`));
+    parts.push(lit(ctx, rect(nd.box, 6, `${fill(tint, 0.15)} ${stroke(tint, 0.65, h)}`), TILES_ON));
+    if (nd.icon && nd.iconBox) parts.push(tile(ctx, { ...nd, color: tint }, nd.iconBox));
+    parts.push(labels(ctx, nd, "start", room));
+    if (nd.badge) parts.push(badge(ctx, nd.badge, nd.box, nd.badgeBox));
+  } else {
+    const tint = nd.color ?? k.tint;
+    parts.push(
+      `<g ${fill(k.tile)} ${stroke(k.line, k.frame, h)}>${shapePath(nd.shape, nd.box)}</g>`
+    );
+    parts.push(
+      lit(
+        ctx,
+        `<g ${fill(tint, 0.15)} ${stroke(tint, 0.65, h)}>${shapePath(nd.shape, nd.box)}</g>`,
+        TILES_ON
+      )
+    );
+    if (nd.icon && nd.iconBox) parts.push(glyph(ctx, nd.icon, nd.iconBox, k.glyph, 1.5));
+    parts.push(labels(ctx, nd, "middle", room));
+    if (nd.badge) parts.push(badge(ctx, nd.badge, nd.box, nd.badgeBox));
+  }
+  const inner = parts.join("");
+  const body = nd.url ? `<a href="${esc(nd.url)}" xlink:href="${esc(nd.url)}" target="_blank">${inner}</a>` : inner;
+  return `<g id="${ctx.prefix}n-${nd.id}">${body}</g>`;
+}
+function legend(ctx) {
+  const l = ctx.scene.legend;
+  if (!l?.items.length) return "";
+  const { k, h } = ctx;
+  const parts = [rect(l.box, 6, `${fill(k.tile)} ${stroke(k.line, k.hair, h)}`)];
+  for (const item of l.items) {
+    const s = item.swatch;
+    const y = s.y + s.h / 2;
+    const dash = item.line === "dashed" ? ` stroke-dasharray="${n(4 * h)} ${n(3 * h)}"` : item.line === "dotted" ? ` stroke-dasharray="${n(h)} ${n(2.5 * h)}"` : "";
+    parts.push(
+      `<path d="M${n(s.x)} ${n(y)} H${n(s.x + s.w)}" fill="none" ${stroke(k.line, k.arrow, item.line === "thick" ? 1.8 * h : h)} stroke-linecap="round"${dash}/>`
+    );
+    const b = item.labelBox;
+    parts.push(
+      block(
+        item.label,
+        b,
+        KEY,
+        sizeFor(item.label.lines, KEY, l.box.x + l.box.w - b.x - 10, 7),
+        ctx.t.text,
+        "start"
+      )
+    );
+  }
+  return `<g id="${ctx.prefix}legend">${parts.join("")}</g>`;
+}
+function renderStage(scene, opts = {}) {
+  const t = tokensFor(scene);
+  const k = t.stage;
+  if (!k) throw new Error("renderStage needs the stage skin");
+  const prefix = opts.idPrefix ? `${opts.idPrefix.replace(/[^A-Za-z0-9_-]/g, "")}-` : "";
+  const h = 1 / Math.min(1, DISPLAY / Math.max(1, scene.width));
+  const ctx = {
+    t,
+    k,
+    prefix,
+    scene,
+    h,
+    story: storyPlan(scene, h),
+    sizes: {
+      label: common(
+        scene.nodes.map((nd) => sizeFor(nd.label.lines, LABEL, labelRoom(nd))),
+        LABEL.size
+      ),
+      note: common(
+        scene.nodes.flatMap((nd) => nd.note ? [sizeFor(nd.note.lines, NOTE, labelRoom(nd))] : []),
+        NOTE.size
+      ),
+      edge: common(
+        scene.edges.flatMap(
+          (e) => e.label && e.labelBox ? [sizeFor(e.label.lines, EDGE, e.labelBox.w - 8, 7)] : []
+        ),
+        EDGE.size
+      )
+    },
+    symbols: /* @__PURE__ */ new Map(),
+    filters: /* @__PURE__ */ new Map(),
+    defs: []
+  };
+  const { width: W, height: H } = scene;
+  const titleId = `${prefix}sdw-title`;
+  const descId = `${prefix}sdw-desc`;
+  const out = [];
+  out.push(
+    `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="${W}" height="${H}" viewBox="0 0 ${W} ${H}" role="img" aria-labelledby="${titleId} ${descId}" font-family="${esc(MONO)}">`
+  );
+  out.push(
+    `<title id="${titleId}">${esc(scene.title?.lines.join(" ") ?? "Architecture diagram")}</title>`
+  );
+  out.push(`<desc id="${descId}">${esc(scene.description)}</desc>`);
+  if (scene.animate === "flow") out.push(`<style>${FLOW_CSS}</style>`);
+  const defsAt = out.length;
+  out.push(canvas(ctx));
+  if (scene.title && scene.titleBox) {
+    const b = scene.titleBox;
+    const size = sizeFor(scene.title.lines, TITLE, W - b.x - 24, 11);
+    out.push(block(scene.title, b, TITLE, size, mixHex(k.line, t.background, 0.85), "start"));
+  }
+  if (scene.subtitle && scene.subtitleBox) {
+    const b = scene.subtitleBox;
+    const size = sizeFor(scene.subtitle.lines, SUBTITLE, W - b.x - 24, 9);
+    out.push(block(scene.subtitle, b, SUBTITLE, size, t.text, "start"));
+  }
+  for (const g of scene.groups) out.push(`<g id="${prefix}g-${g.id}">${groupFrame(ctx, g)}</g>`);
+  const wires = new Map(scene.edges.map((e) => [e.id, wireOf(ctx, e)]));
+  for (const e of scene.edges) {
+    const w = wires.get(e.id);
+    if (!w) continue;
+    const runs = ctx.story.runs.get(e.id);
+    out.push(
+      `<g id="${prefix}e-${e.id}">${edgeBase(ctx, e, w)}${runs ? edgeLit(ctx, e, w, runs) : ""}</g>`
+    );
+  }
+  for (const e of scene.edges) {
+    const label = edgeLabel(ctx, e);
+    if (label) out.push(label);
+  }
+  for (const g of scene.groups) {
+    const header = groupHeader(ctx, g);
+    if (header) out.push(`<g id="${prefix}gh-${g.id}">${header}</g>`);
+  }
+  for (const nd of scene.nodes) out.push(node(ctx, nd));
+  if (ctx.story.animated) {
+    const moving = [];
+    for (const e of scene.edges) {
+      const w = wires.get(e.id);
+      if (!w) continue;
+      const color = e.color ?? k.tint;
+      for (const run of ctx.story.runs.get(e.id) ?? [])
+        moving.push(comet(ctx, w.d, run, color, w.len), packet(ctx, w.d, run, color, 2.5 * h));
+      const side = ctx.story.side.get(e.id);
+      if (side) moving.push(packet(ctx, w.d, side, color, 2 * h));
+    }
+    if (moving.length) out.push(`<g id="${prefix}story">${moving.join("")}</g>`);
+  }
+  out.push(legend(ctx));
+  if (ctx.defs.length) out.splice(defsAt, 0, `<defs>${ctx.defs.join("")}</defs>`);
+  out.push("</svg>");
+  return `${out.filter(Boolean).join("\n")}
+`;
+}
+
 // src/render/svg.ts
 var ASCENT = 0.96875;
 var DESCENT = 0.2412;
@@ -10734,14 +11444,14 @@ var n = (v) => {
   const r = Math.round(v * 100) / 100;
   return Object.is(r, -0) ? "0" : String(r);
 };
-function text(block, box, color, anchor2 = "middle", extra = "") {
-  if (!block.lines.length) return "";
+function text(block2, box, color, anchor2 = "middle", extra = "") {
+  if (!block2.lines.length) return "";
   const x = anchor2 === "middle" ? box.x + box.w / 2 : box.x;
-  const first = box.y + (block.lead - block.size * (ASCENT + DESCENT)) / 2 + block.size * ASCENT;
-  const weight = block.weight === 600 ? ` font-weight="600"` : "";
-  const tspans = block.lines.map((line, i) => `<tspan x="${n(x)}" y="${n(first + i * block.lead)}">${esc(line)}</tspan>`).join("");
+  const first = box.y + (block2.lead - block2.size * (ASCENT + DESCENT)) / 2 + block2.size * ASCENT;
+  const weight = block2.weight === 600 ? ` font-weight="600"` : "";
+  const tspans = block2.lines.map((line, i) => `<tspan x="${n(x)}" y="${n(first + i * block2.lead)}">${esc(line)}</tspan>`).join("");
   const anchorAttr = anchor2 === "middle" ? ` text-anchor="middle"` : "";
-  return `<text font-size="${n(block.size)}"${weight} fill="${color}"${anchorAttr}${extra}>${tspans}</text>`;
+  return `<text font-size="${n(block2.size)}"${weight} fill="${color}"${anchorAttr}${extra}>${tspans}</text>`;
 }
 var SYMBOL_ID = "SDWSYM";
 function icon(ctx, id, box, color, background) {
@@ -10763,13 +11473,11 @@ function icon(ctx, id, box, color, background) {
   }
   return `<use href="#${ref}" x="${n(box.x)}" y="${n(box.y)}" width="${n(box.w)}" height="${n(box.h)}"/>`;
 }
-function groupFrame(g) {
+function groupFrame2(g) {
   const { box } = g;
   const dash = g.dash ? ` stroke-dasharray="${g.dash}"` : "";
-  const paint = (fill2, washed) => g.wash && washed ? `fill="${g.wash.color}" fill-opacity="${g.wash.opacity}"` : `fill="${fill2}"`;
-  const inner = g.inner ? `<rect x="${n(g.inner.box.x)}" y="${n(g.inner.box.y)}" width="${n(g.inner.box.w)}" height="${n(g.inner.box.h)}" rx="${Math.max(0, g.radius - 2)}" ${paint(g.inner.fill, g.wash?.inner)}/>` : "";
-  const fill = paint(g.fill, !!g.wash && !g.inner);
-  return `<rect x="${n(box.x)}" y="${n(box.y)}" width="${n(box.w)}" height="${n(box.h)}"${g.radius ? ` rx="${g.radius}"` : ""} ${fill} stroke="${g.stroke}" stroke-width="${g.strokeWidth}"${dash}/>${inner}`;
+  const inner = g.inner ? `<rect x="${n(g.inner.box.x)}" y="${n(g.inner.box.y)}" width="${n(g.inner.box.w)}" height="${n(g.inner.box.h)}" rx="${Math.max(0, g.radius - 2)}" fill="${g.inner.fill}"/>` : "";
+  return `<rect x="${n(box.x)}" y="${n(box.y)}" width="${n(box.w)}" height="${n(box.h)}"${g.radius ? ` rx="${g.radius}"` : ""} fill="${g.fill}" stroke="${g.stroke}" stroke-width="${g.strokeWidth}"${dash}/>${inner}`;
 }
 function surfaceBehind(ctx, g) {
   if (g.overlay) {
@@ -10789,7 +11497,7 @@ function surfaceBehind(ctx, g) {
   const bg = ctx.scene.background;
   return bg && bg !== "transparent" ? bg : ctx.t.background;
 }
-function groupHeader(ctx, g) {
+function groupHeader2(ctx, g) {
   const parts = [];
   const surface = surfaceBehind(ctx, g);
   if (g.label.lines.length) {
@@ -10874,14 +11582,14 @@ function arrowHead(tip, from, len, half, color, open = false, width = 1.5) {
   ];
   return `<path d="M${pts.map(([x, y]) => `${n(x ?? 0)} ${n(y ?? 0)}`).join(" L")} Z" fill="${color}"/>`;
 }
-function stroke(line) {
+function stroke2(line) {
   const width = line === "thick" ? 2.5 : 1.5;
   const dash = line === "dashed" ? ` stroke-dasharray="6 4"` : line === "dotted" ? ` stroke-dasharray="1.5 3.5" stroke-linecap="round"` : "";
   return { width, dash };
 }
 function edge(ctx, e, routing) {
   const color = e.color ?? ctx.t.edge;
-  const { width, dash } = stroke(e.line);
+  const { width, dash } = stroke2(e.line);
   const len = e.line === "thick" ? 11 : 9;
   const half = e.line === "thick" ? 5.5 : 4.5;
   let pts = e.points;
@@ -10913,16 +11621,16 @@ function edge(ctx, e, routing) {
   if (start && firstPt && second)
     parts.push(arrowHead(firstPt, second, len, half, color, open, width));
   if (beat) {
-    const lit = ctx.relay.color;
+    const lit2 = ctx.relay.color;
     const heads = [
-      end && last && beforeLast ? arrowHead(last, beforeLast, len, half, lit, open, width) : "",
-      start && firstPt && second ? arrowHead(firstPt, second, len, half, lit, open, width) : ""
+      end && last && beforeLast ? arrowHead(last, beforeLast, len, half, lit2, open, width) : "",
+      start && firstPt && second ? arrowHead(firstPt, second, len, half, lit2, open, width) : ""
     ].join("");
     parts.push(relayLine(ctx, e, d, heads, beat, width, dash));
   }
   return `<g id="${ctx.prefix}e-${e.id}">${parts.join("")}</g>`;
 }
-function edgeLabel(ctx, e) {
+function edgeLabel2(ctx, e) {
   if (e.points.length < 2) return "";
   const parts = [];
   if (e.labelBox && e.label) {
@@ -10939,18 +11647,16 @@ function edgeLabel(ctx, e) {
     const cy = s.y + s.h / 2;
     const motion = ctx.motion.get(e.id) ?? relayMotion(ctx, e.id);
     if (motion?.stepped) parts.push(ping(ctx, cx, cy, s.w / 2, motion));
-    parts.push(
-      `<circle cx="${n(cx)}" cy="${n(cy)}" r="${n(s.w / 2)}" fill="${ctx.t.stepFill}"${ring(ctx)}/>`
-    );
+    parts.push(`<circle cx="${n(cx)}" cy="${n(cy)}" r="${n(s.w / 2)}" fill="${ctx.t.stepFill}"/>`);
     parts.push(
       `<text x="${n(cx)}" y="${n(cy + 5)}" font-size="14" font-weight="700" fill="${ctx.t.stepText}" text-anchor="middle">${e.step}</text>`
     );
   }
   return parts.length ? `<g id="${ctx.prefix}el-${e.id}">${parts.join("")}</g>` : "";
 }
-var SPEED = 150;
+var SPEED2 = 150;
 var REST = 0.9;
-var FADE = 0.12;
+var FADE2 = 0.12;
 function length(points) {
   let total = 0;
   for (let i = 1; i < points.length; i++) {
@@ -10964,7 +11670,7 @@ function motionPlan(scene) {
   const plan = /* @__PURE__ */ new Map();
   if (scene.animate !== "packets") return plan;
   const moving = scene.edges.filter((e) => e.arrow !== "none" && e.points.length > 1);
-  const travel = (e) => Math.min(2.4, Math.max(0.6, length(e.points) / SPEED));
+  const travel = (e) => Math.min(2.4, Math.max(0.6, length(e.points) / SPEED2));
   const stepped = moving.filter((e) => e.step !== void 0);
   const steps = [...new Set(stepped.map((e) => e.step ?? 0))].sort((a, b) => a - b);
   const slot = (e) => travel(e) * (e.arrow === "both" ? 2 : 1);
@@ -11002,21 +11708,13 @@ function packets(ctx, e, d, m) {
   const { cycle, start, travel } = m;
   const one = (reverse, from, shift = 0) => {
     const end = from + travel;
-    const fadeIn = from === 0 ? [0, FADE] : [0, from, from + FADE];
+    const fadeIn = from === 0 ? [0, FADE2] : [0, from, from + FADE2];
     const opacity = from === 0 ? "0;1;1;0;0" : "0;0;1;1;0;0";
-    const fade = keyTimes([...fadeIn, end - FADE, end, cycle], cycle);
+    const fade = keyTimes([...fadeIn, end - FADE2, end, cycle], cycle);
     const at = keyTimes([0, from, end, cycle], cycle);
-    const dot = (lag, body) => {
-      const begin = m.begin - shift + lag;
-      const loop = `dur="${secs(cycle)}" repeatCount="indefinite"${begin ? ` begin="${secs(begin)}"` : ""}`;
-      return `<g opacity="0">${body}<animateMotion path="${d}" ${loop} calcMode="linear" keyPoints="${reverse ? "1;1;0;0" : "0;0;1;1"}" keyTimes="${at}"/><animate attributeName="opacity" values="${opacity}" keyTimes="${fade}" ${loop}/></g>`;
-    };
-    if (ctx.scene.skin === "stage")
-      return dot(0.1, `<circle r="${n(r * 0.5)}" fill="${color}" fill-opacity="0.3"/>`) + dot(0.05, `<circle r="${n(r * 0.72)}" fill="${color}" fill-opacity="0.55"/>`) + dot(0, `<circle r="${r}" fill="${color}"/>`);
-    return dot(
-      0,
-      `<circle r="${n(r * 2.3)}" fill="${color}" fill-opacity="0.22"/><circle r="${r}" fill="${color}"/>`
-    );
+    const begin = m.begin - shift;
+    const loop2 = `dur="${secs(cycle)}" repeatCount="indefinite"${begin ? ` begin="${secs(begin)}"` : ""}`;
+    return `<g opacity="0"><circle r="${n(r * 2.3)}" fill="${color}" fill-opacity="0.22"/><circle r="${r}" fill="${color}"/><animateMotion path="${d}" ${loop2} calcMode="linear" keyPoints="${reverse ? "1;1;0;0" : "0;0;1;1"}" keyTimes="${at}"/><animate attributeName="opacity" values="${opacity}" keyTimes="${fade}" ${loop2}/></g>`;
   };
   if (e.arrow === "both")
     return m.stepped ? one(false, start) + one(true, start + travel) : one(false, start) + one(true, start, cycle / 2);
@@ -11024,19 +11722,19 @@ function packets(ctx, e, d, m) {
 }
 function ping(ctx, cx, cy, r, m) {
   const at = keyTimes([0, Math.max(0, m.start - 0.01), m.start, m.start + 0.6, m.cycle], m.cycle);
-  const loop = `dur="${secs(m.cycle)}" repeatCount="indefinite"`;
-  return `<circle cx="${n(cx)}" cy="${n(cy)}" r="${n(r)}" fill="none" stroke="${ctx.t.flow}" stroke-width="2" opacity="0"><animate attributeName="r" values="${n(r)};${n(r)};${n(r)};${n(r + 8)};${n(r + 8)}" keyTimes="${at}" ${loop}/><animate attributeName="opacity" values="0;0;0.7;0;0" keyTimes="${at}" ${loop}/></circle>`;
+  const loop2 = `dur="${secs(m.cycle)}" repeatCount="indefinite"`;
+  return `<circle cx="${n(cx)}" cy="${n(cy)}" r="${n(r)}" fill="none" stroke="${ctx.t.flow}" stroke-width="2" opacity="0"><animate attributeName="r" values="${n(r)};${n(r)};${n(r)};${n(r + 8)};${n(r + 8)}" keyTimes="${at}" ${loop2}/><animate attributeName="opacity" values="0;0;0.7;0;0" keyTimes="${at}" ${loop2}/></circle>`;
 }
 var FIRST = 0.3;
 var BEAT = 0.55;
 var DRAW = 0.45;
-var HOLD = 1.2;
+var HOLD2 = 1.2;
 var END = 0.92;
-var GONE = 0.95;
+var GONE2 = 0.95;
 var MAX_BEATS = 8;
 function relayPlan(scene, t) {
   const relay = {
-    color: t.stage?.ring ?? t.flow,
+    color: t.flow,
     cycle: 0,
     edges: /* @__PURE__ */ new Map(),
     nodes: /* @__PURE__ */ new Map()
@@ -11078,7 +11776,7 @@ function relayPlan(scene, t) {
     const t0 = FIRST + b * BEAT;
     relay.edges.set(e.id, { t0, t1: t0 + DRAW, stepped: e.step !== void 0 });
   }
-  relay.cycle = Math.max(3, (FIRST + last * BEAT + DRAW + HOLD) / END);
+  relay.cycle = Math.max(3, (FIRST + last * BEAT + DRAW + HOLD2) / END);
   const nodes = new Set(scene.nodes.map((nd) => nd.id));
   const leaves = /* @__PURE__ */ new Map();
   for (const e of drawn) {
@@ -11096,37 +11794,29 @@ function relayMotion(ctx, id) {
 }
 function relayLine(ctx, e, d, heads, b, width, dash) {
   const { cycle, color } = ctx.relay;
-  const loop = `dur="${secs(cycle)}" repeatCount="indefinite"`;
-  const kt = (times) => keyTimes(times, cycle);
+  const loop2 = `dur="${secs(cycle)}" repeatCount="indefinite"`;
+  const kt2 = (times) => keyTimes(times, cycle);
   const end = END * cycle;
-  const gone = GONE * cycle;
+  const gone = GONE2 * cycle;
   const id = `${ctx.prefix}rm-${e.id}`;
   const reverse = e.arrow === "start";
   const hide = reverse ? "-1" : "1";
   ctx.defs.push(
-    `<mask id="${id}" maskUnits="userSpaceOnUse" x="0" y="0" width="${ctx.scene.width}" height="${ctx.scene.height}"><path d="${d}" fill="none" stroke="#ffffff" stroke-width="${n(width + 8)}" pathLength="1" stroke-dasharray="1 1" stroke-dashoffset="${hide}"><animate attributeName="stroke-dashoffset" values="${hide};${hide};0;0;${hide}" keyTimes="${kt([0, b.t0, b.t1, gone, cycle])}" ${loop}/></path></mask>`
+    `<mask id="${id}" maskUnits="userSpaceOnUse" x="0" y="0" width="${ctx.scene.width}" height="${ctx.scene.height}"><path d="${d}" fill="none" stroke="#ffffff" stroke-width="${n(width + 8)}" pathLength="1" stroke-dasharray="1 1" stroke-dashoffset="${hide}"><animate attributeName="stroke-dashoffset" values="${hide};${hide};0;0;${hide}" keyTimes="${kt2([0, b.t0, b.t1, gone, cycle])}" ${loop2}/></path></mask>`
   );
-  const show = (from) => `<animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="${kt([0, from, from + 0.05, end, gone, cycle])}" ${loop}/>`;
+  const show2 = (from) => `<animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="${kt2([0, from, from + 0.05, end, gone, cycle])}" ${loop2}/>`;
   const r = e.line === "thick" ? 3.6 : 3;
-  return `<g mask="url(#${id})" opacity="0"><path d="${d}" fill="none" stroke="${color}" stroke-width="${width}" stroke-linejoin="round"${dash}/>${show(b.t0)}</g>` + (heads ? `<g opacity="0">${heads}${show(b.t1)}</g>` : "") + `<circle r="${r}" fill="${color}" opacity="0"><animateMotion path="${d}" ${loop} calcMode="linear" keyPoints="${reverse ? "1;1;0;0" : "0;0;1;1"}" keyTimes="${kt([0, b.t0, b.t1, cycle])}"/><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="${kt([0, b.t0, b.t0 + 0.05, b.t1 - 0.05, b.t1, cycle])}" ${loop}/></circle>`;
+  return `<g mask="url(#${id})" opacity="0"><path d="${d}" fill="none" stroke="${color}" stroke-width="${width}" stroke-linejoin="round"${dash}/>${show2(b.t0)}</g>` + (heads ? `<g opacity="0">${heads}${show2(b.t1)}</g>` : "") + `<circle r="${r}" fill="${color}" opacity="0"><animateMotion path="${d}" ${loop2} calcMode="linear" keyPoints="${reverse ? "1;1;0;0" : "0;0;1;1"}" keyTimes="${kt2([0, b.t0, b.t1, cycle])}"/><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="${kt2([0, b.t0, b.t0 + 0.05, b.t1 - 0.05, b.t1, cycle])}" ${loop2}/></circle>`;
 }
 function plate(ctx, nd, at) {
   const { cycle, color } = ctx.relay;
   const icon2 = nd.look === "icon" && nd.iconBox ? nd.iconBox : void 0;
   const b = icon2 ?? nd.box;
   const pad = icon2 ? 7 : 4;
-  const loop = `dur="${secs(cycle)}" repeatCount="indefinite"`;
-  const times = keyTimes([0, at, at + 0.15, END * cycle, GONE * cycle, cycle], cycle);
-  return `<rect x="${n(b.x - pad)}" y="${n(b.y - pad)}" width="${n(b.w + 2 * pad)}" height="${n(b.h + 2 * pad)}" rx="${icon2 ? 10 : 12}" fill="${color}" fill-opacity="0.14" stroke="${color}" stroke-opacity="0.6" stroke-width="1" opacity="0"><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="${times}" ${loop}/></rect>`;
+  const loop2 = `dur="${secs(cycle)}" repeatCount="indefinite"`;
+  const times = keyTimes([0, at, at + 0.15, END * cycle, GONE2 * cycle, cycle], cycle);
+  return `<rect x="${n(b.x - pad)}" y="${n(b.y - pad)}" width="${n(b.w + 2 * pad)}" height="${n(b.h + 2 * pad)}" rx="${icon2 ? 10 : 12}" fill="${color}" fill-opacity="0.14" stroke="${color}" stroke-opacity="0.6" stroke-width="1" opacity="0"><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="${times}" ${loop2}/></rect>`;
 }
-function stageCanvas(ctx, W, H, s) {
-  const p = ctx.prefix;
-  ctx.defs.push(
-    `<linearGradient id="${p}bg" x1="0" y1="0" x2="0.36" y2="1"><stop offset="0" stop-color="${s.top}"/><stop offset="0.6" stop-color="${ctx.t.background}"/></linearGradient><radialGradient id="${p}tint" cx="0.88" cy="0.04" r="0.7"><stop offset="0" stop-color="${s.tint}" stop-opacity="${s.tintOpacity}"/><stop offset="1" stop-color="${s.tint}" stop-opacity="0"/></radialGradient><pattern id="${p}dots" width="16" height="16" patternUnits="userSpaceOnUse"><circle cx="8" cy="8" r="0.9" fill="${s.dot}" fill-opacity="${s.dotOpacity}"/></pattern>`
-  );
-  return `<rect width="${W}" height="${H}" fill="url(#${p}bg)"/><rect width="${W}" height="${H}" fill="url(#${p}dots)"/><rect width="${W}" height="${H}" fill="url(#${p}tint)"/>`;
-}
-var ring = (ctx) => ctx.t.stage ? ` stroke="${ctx.t.stage.ring}" stroke-width="1.5"` : "";
 function shapePath(shape, b) {
   const { x, y, w, h } = b;
   switch (shape) {
@@ -11170,26 +11860,26 @@ function shapePath(shape, b) {
       return `<rect x="${n(x)}" y="${n(y)}" width="${n(w)}" height="${n(h)}" rx="12"/>`;
   }
 }
-function badge(ctx, label, anchor2, placed) {
+function badge2(ctx, label, anchor2, placed) {
   const w = placed?.w ?? Math.max(18, 8 + label.length * 6.4);
   const h = placed?.h ?? 16;
   const x = placed?.x ?? anchor2.x + anchor2.w - w / 2 - 2;
   const y = placed?.y ?? anchor2.y - 7;
-  return `<rect x="${n(x)}" y="${n(y)}" width="${n(w)}" height="${n(h)}" rx="${n(h / 2)}" fill="${ctx.t.stepFill}"${ring(ctx)}/><text x="${n(x + w / 2)}" y="${n(y + h / 2 + 3.5)}" font-size="10" font-weight="600" fill="${ctx.t.stepText}" text-anchor="middle">${esc(label)}</text>`;
+  return `<rect x="${n(x)}" y="${n(y)}" width="${n(w)}" height="${n(h)}" rx="${n(h / 2)}" fill="${ctx.t.stepFill}"/><text x="${n(x + w / 2)}" y="${n(y + h / 2 + 3.5)}" font-size="10" font-weight="600" fill="${ctx.t.stepText}" text-anchor="middle">${esc(label)}</text>`;
 }
-function node(ctx, nd) {
+function node2(ctx, nd) {
   const parts = [];
   const bg = ctx.scene.background && ctx.scene.background !== "transparent" ? ctx.scene.background : ctx.t.background;
   if (nd.look === "icon") {
     if (nd.icon && nd.iconBox) parts.push(icon(ctx, nd.icon, nd.iconBox, nd.color));
     parts.push(text(nd.label, nd.labelBox, nd.ink ?? ctx.t.text));
     if (nd.note && nd.noteBox) parts.push(text(nd.note, nd.noteBox, nd.inkMuted ?? ctx.t.muted));
-    if (nd.badge && nd.iconBox) parts.push(badge(ctx, nd.badge, nd.iconBox, nd.badgeBox));
+    if (nd.badge && nd.iconBox) parts.push(badge2(ctx, nd.badge, nd.iconBox, nd.badgeBox));
   } else if (nd.look === "card") {
     const b = nd.box;
-    const stroke2 = nd.color ?? ctx.t.border;
+    const stroke3 = nd.color ?? ctx.t.border;
     parts.push(
-      `<rect x="${n(b.x)}" y="${n(b.y)}" width="${n(b.w)}" height="${n(b.h)}" rx="8" fill="${ctx.t.surface}" stroke="${stroke2}" stroke-width="1"/>`
+      `<rect x="${n(b.x)}" y="${n(b.y)}" width="${n(b.w)}" height="${n(b.h)}" rx="8" fill="${ctx.t.surface}" stroke="${stroke3}" stroke-width="1"/>`
     );
     if (nd.color) {
       parts.push(
@@ -11199,30 +11889,30 @@ function node(ctx, nd) {
     if (nd.icon && nd.iconBox) parts.push(icon(ctx, nd.icon, nd.iconBox, void 0, ctx.t.surface));
     parts.push(text(nd.label, nd.labelBox, ctx.t.text, "start"));
     if (nd.note && nd.noteBox) parts.push(text(nd.note, nd.noteBox, ctx.t.muted, "start"));
-    if (nd.badge) parts.push(badge(ctx, nd.badge, nd.box, nd.badgeBox));
+    if (nd.badge) parts.push(badge2(ctx, nd.badge, nd.box, nd.badgeBox));
   } else {
-    const stroke2 = nd.color ?? (ctx.t.name === "dark" ? "#6e7681" : "#8b95a1");
-    const fill = nd.color ? mixHex(nd.color, bg, ctx.t.name === "dark" ? 0.16 : 0.1) : ctx.t.surface;
+    const stroke3 = nd.color ?? (ctx.t.name === "dark" ? "#6e7681" : "#8b95a1");
+    const fill2 = nd.color ? mixHex(nd.color, bg, ctx.t.name === "dark" ? 0.16 : 0.1) : ctx.t.surface;
     parts.push(
-      `<g fill="${fill}" stroke="${stroke2}" stroke-width="1.25">${shapePath(nd.shape, nd.box)}</g>`
+      `<g fill="${fill2}" stroke="${stroke3}" stroke-width="1.25">${shapePath(nd.shape, nd.box)}</g>`
     );
-    if (nd.icon && nd.iconBox) parts.push(icon(ctx, nd.icon, nd.iconBox, nd.color, fill));
+    if (nd.icon && nd.iconBox) parts.push(icon(ctx, nd.icon, nd.iconBox, nd.color, fill2));
     parts.push(text(nd.label, nd.labelBox, nd.ink ?? ctx.t.text));
     if (nd.note && nd.noteBox) parts.push(text(nd.note, nd.noteBox, nd.inkMuted ?? ctx.t.muted));
-    if (nd.badge) parts.push(badge(ctx, nd.badge, nd.box, nd.badgeBox));
+    if (nd.badge) parts.push(badge2(ctx, nd.badge, nd.box, nd.badgeBox));
   }
   const inner = parts.join("");
   const body = nd.url ? `<a href="${esc(nd.url)}" xlink:href="${esc(nd.url)}" target="_blank">${inner}</a>` : inner;
   return `<g id="${ctx.prefix}n-${nd.id}">${body}</g>`;
 }
-function legend(ctx, l) {
+function legend2(ctx, l) {
   const b = l.box;
   const parts = [
     `<rect x="${n(b.x)}" y="${n(b.y)}" width="${n(b.w)}" height="${n(b.h)}" rx="6" fill="${ctx.t.surface}" stroke="${ctx.t.border}" stroke-width="1"/>`
   ];
   for (const item of l.items) {
     const s = item.swatch;
-    const { width, dash } = stroke(item.line);
+    const { width, dash } = stroke2(item.line);
     const y = s.y + s.h / 2;
     parts.push(
       `<path d="M${n(s.x)} ${n(y)} H${n(s.x + s.w)}" fill="none" stroke="${ctx.t.edge}" stroke-width="${width}"${dash}/>`
@@ -11233,6 +11923,7 @@ function legend(ctx, l) {
 }
 var FLOW_CSS = `@keyframes sdw-flow{to{stroke-dashoffset:-20}}.sdw-flow{animation:sdw-flow 1.1s linear infinite}.sdw-solid{stroke-dasharray:7 3}`;
 function renderSvg(scene, opts = {}) {
+  if (scene.skin === "stage") return renderStage(scene, opts);
   const t = tokensFor(scene);
   const prefix = opts.idPrefix ? `${opts.idPrefix.replace(/[^A-Za-z0-9_-]/g, "")}-` : "";
   const ctx = {
@@ -11257,29 +11948,28 @@ function renderSvg(scene, opts = {}) {
   out.push(`<desc id="${descId}">${esc(scene.description)}</desc>`);
   if (scene.animate === "flow") out.push(`<style>${FLOW_CSS}</style>`);
   const defsAt = out.length;
-  if (scene.background === void 0 && t.stage) out.push(stageCanvas(ctx, W, H, t.stage));
-  else if (scene.background !== "transparent") {
+  if (scene.background !== "transparent") {
     out.push(`<rect width="${W}" height="${H}" fill="${scene.background ?? t.background}"/>`);
   }
   if (scene.title && scene.titleBox) out.push(text(scene.title, scene.titleBox, t.text, "start"));
   if (scene.subtitle && scene.subtitleBox)
     out.push(text(scene.subtitle, scene.subtitleBox, t.muted, "start"));
-  for (const g of scene.groups) out.push(`<g id="${ctx.prefix}g-${g.id}">${groupFrame(g)}</g>`);
+  for (const g of scene.groups) out.push(`<g id="${ctx.prefix}g-${g.id}">${groupFrame2(g)}</g>`);
   for (const e of scene.edges) out.push(edge(ctx, e, scene.routing));
   for (const e of scene.edges) {
-    const label = edgeLabel(ctx, e);
+    const label = edgeLabel2(ctx, e);
     if (label) out.push(label);
   }
   for (const g of scene.groups) {
-    const header = groupHeader(ctx, g);
+    const header = groupHeader2(ctx, g);
     if (header) out.push(`<g id="${ctx.prefix}gh-${g.id}">${header}</g>`);
   }
   for (const nd of scene.nodes) {
     const at = ctx.relay.nodes.get(nd.id);
     if (at !== void 0) out.push(plate(ctx, nd, at));
   }
-  for (const nd of scene.nodes) out.push(node(ctx, nd));
-  if (scene.legend?.items.length) out.push(legend(ctx, scene.legend));
+  for (const nd of scene.nodes) out.push(node2(ctx, nd));
+  if (scene.legend?.items.length) out.push(legend2(ctx, scene.legend));
   if (ctx.defs.length) out.splice(defsAt, 0, `<defs>${ctx.defs.join("")}</defs>`);
   out.push("</svg>");
   return `${out.join("\n")}
@@ -11371,7 +12061,7 @@ var SHAPE_STYLE = {
   cloud: { ellipse: null, shape: "cloud" },
   stack: { rounded: 1, absoluteArcSize: 1, arcSize: 12, shadow: 0 }
 };
-function node2(ctx, nd) {
+function node3(ctx, nd) {
   const id = `n-${nd.id}`;
   const parent = cellParent(nd.parent);
   const value = htmlLabel(nd.label.lines, nd.note?.lines, nd.inkMuted ?? ctx.t.muted);
@@ -11444,15 +12134,15 @@ function node2(ctx, nd) {
     });
     geom = geometry(nd.box, nd.parent, ctx);
   } else {
-    const stroke2 = nd.color ?? (ctx.t.name === "dark" ? "#6e7681" : "#8b95a1");
-    const fill = nd.color ? mixHex(nd.color, bg, ctx.t.name === "dark" ? 0.16 : 0.1) : ctx.t.surface;
-    const img = nd.icon ? iconData(ctx, nd.icon, nd.color, fill) : void 0;
+    const stroke3 = nd.color ?? (ctx.t.name === "dark" ? "#6e7681" : "#8b95a1");
+    const fill2 = nd.color ? mixHex(nd.color, bg, ctx.t.name === "dark" ? 0.16 : 0.1) : ctx.t.surface;
+    const img = nd.icon ? iconData(ctx, nd.icon, nd.color, fill2) : void 0;
     s = style({
       ...SHAPE_STYLE[nd.shape],
       whiteSpace: "wrap",
       html: 1,
-      fillColor: fill,
-      strokeColor: stroke2,
+      fillColor: fill2,
+      strokeColor: stroke3,
       fontColor: ctx.t.text,
       fontSize: 13,
       fontStyle: 1,
@@ -11528,7 +12218,7 @@ function edge2(ctx, e, boxes) {
     );
   }
 }
-function legend2(ctx, l) {
+function legend3(ctx, l) {
   const { box } = l;
   const local = (b) => ({ ...b, x: b.x - box.x, y: b.y - box.y });
   ctx.cells.push(
@@ -11560,10 +12250,10 @@ function renderDrawio(scene, name = "Diagram") {
   const vertical = scene.direction === "down" || scene.direction === "up";
   for (const nd of scene.nodes) {
     boxes.set(nd.id, nd.look === "icon" && nd.iconBox && !vertical ? nd.iconBox : nd.box);
-    node2(ctx, nd);
+    node3(ctx, nd);
   }
   for (const e of scene.edges) edge2(ctx, e, boxes);
-  if (scene.legend?.items.length) legend2(ctx, scene.legend);
+  if (scene.legend?.items.length) legend3(ctx, scene.legend);
   const bg = scene.background === "transparent" ? "none" : scene.background ?? t.background;
   return [
     `<mxfile host="orrery" agent="orrery" type="device">`,
@@ -11693,9 +12383,12 @@ async function load2() {
 }
 var fonts;
 function fontBuffers(extra) {
-  fonts ??= ["Inter-Regular.ttf", "Inter-SemiBold.ttf"].map(
-    (f) => new Uint8Array(readFileSync4(join6(fontsDir, f)))
-  );
+  fonts ??= [
+    "Inter-Regular.ttf",
+    "Inter-SemiBold.ttf",
+    "GeistMono-Regular.ttf",
+    "GeistMono-Bold.ttf"
+  ].map((f) => new Uint8Array(readFileSync4(join6(fontsDir, f))));
   return [...fonts, ...extra.map((f) => new Uint8Array(readFileSync4(f)))];
 }
 async function renderPng(svg, opts = {}) {
@@ -12832,8 +13525,8 @@ function measureFlow(c, diagnostics) {
   }
   const unconnected = diagnostics.filter((d) => d.code === "DG208");
   for (const d of unconnected) {
-    const node3 = String(d.subject?.node ?? "");
-    add("flow.unconnected", "minor", node3 ? [node3] : [], { node: node3 }, d.message, d.fixes ?? [], 3);
+    const node4 = String(d.subject?.node ?? "");
+    add("flow.unconnected", "minor", node4 ? [node4] : [], { node: node4 }, d.message, d.fixes ?? [], 3);
   }
   Object.assign(m, {
     hiddenHeads: hidden,
@@ -13236,10 +13929,10 @@ function measureGrid(c) {
 }
 function textItems(scene) {
   const t = tokensFor(scene);
-  const canvas = scene.background && scene.background !== "transparent" ? scene.background : t.background;
+  const canvas2 = scene.background && scene.background !== "transparent" ? scene.background : t.background;
   const byDepth = [...scene.groups].sort((a, b) => a.depth - b.depth);
   const surfaceAt = (x, y) => {
-    let col = canvas;
+    let col = canvas2;
     for (const g of byDepth) {
       if (g.fill !== "none" && inBox(x, y, g.box)) col = g.fill;
       if (g.inner && inBox(x, y, g.inner.box)) col = g.inner.fill;
@@ -13264,7 +13957,7 @@ function textItems(scene) {
       const parent = cur.parent;
       cur = parent ? scene.groups.find((x) => x.id === parent) : void 0;
     }
-    return canvas;
+    return canvas2;
   };
   const out = [];
   const push = (id, what, fg, bgs, size, weight) => {
@@ -13274,14 +13967,14 @@ function textItems(scene) {
     out.push({ id, what, fg, bg, size, weight });
   };
   if (scene.title && scene.titleBox)
-    push("title", "title", t.text, [canvas], scene.title.size, scene.title.weight);
+    push("title", "title", t.text, [canvas2], scene.title.size, scene.title.weight);
   if (scene.subtitle && scene.subtitleBox)
-    push("subtitle", "subtitle", t.muted, [canvas], scene.subtitle.size, scene.subtitle.weight);
+    push("subtitle", "subtitle", t.muted, [canvas2], scene.subtitle.size, scene.subtitle.weight);
   for (const g of scene.groups)
     if (g.label.lines.length)
       push(g.id, "group label", g.labelColor, [behind(g)], g.label.size, g.label.weight);
   for (const n3 of scene.nodes) {
-    const shapeFill = n3.color ? mixHex(n3.color, canvas, scene.theme === "dark" ? 0.16 : 0.1) : t.surface;
+    const shapeFill = n3.color ? mixHex(n3.color, canvas2, scene.theme === "dark" ? 0.16 : 0.1) : t.surface;
     const under = (b) => n3.look === "card" ? [t.surface] : n3.look === "shape" ? [shapeFill] : samples(b);
     const ink = n3.look === "card" ? t.text : n3.ink ?? t.text;
     const muted = n3.look === "card" ? t.muted : n3.inkMuted ?? t.muted;
@@ -13403,26 +14096,26 @@ function measureQuality(c, scenes) {
       ["split into an overview and detail diagrams", "collapse repeated nodes and use badge: x3"],
       (n3 - 25) * 2
     );
-  for (const node3 of scene.nodes) {
-    if (node3.label.lines.length > 3)
+  for (const node4 of scene.nodes) {
+    if (node4.label.lines.length > 3)
       add(
         "quality.long-label",
         "minor",
-        [node3.id],
-        { lines: node3.label.lines.length },
-        `the label of "${node3.id}" wraps to ${node3.label.lines.length} lines`,
+        [node4.id],
+        { lines: node4.label.lines.length },
+        `the label of "${node4.id}" wraps to ${node4.label.lines.length} lines`,
         ["shorten the label and move detail into note"],
         3
       );
-    const text2 = c.model.nodes.find((x) => x.id === node3.id)?.label ?? "";
-    const broken = midWordBreak(text2, node3.label.lines);
+    const text2 = c.model.nodes.find((x) => x.id === node4.id)?.label ?? "";
+    const broken = midWordBreak(text2, node4.label.lines);
     if (broken)
       add(
         "quality.mid-word-break",
         "minor",
-        [node3.id],
+        [node4.id],
         { at: broken },
-        `the label of "${node3.id}" breaks mid-word at "${broken}"`,
+        `the label of "${node4.id}" breaks mid-word at "${broken}"`,
         ["use shorter words or a shorter label", "put a line break (\\n) where it should wrap"],
         3
       );
@@ -14012,18 +14705,42 @@ var OPS = [
   ["...", { line: "dotted", arrow: "none" }],
   ["--", { line: "solid", arrow: "none" }]
 ];
-var OP_RE = new RegExp(
-  [
-    "-\\[([^\\]]*)\\]->",
-    "--\\[([^\\]]*)\\]-->",
-    ...OPS.map(([op]) => {
-      const esc2 = op.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-      return /[<>]/.test(op) ? esc2 : `(?<=\\s)${esc2}(?=\\s)`;
-    })
-  ].join("|"),
-  "g"
-);
-var hasOperator = (s) => new RegExp(OP_RE.source).test(` ${s} `);
+var LABELED = [
+  ["-[", "]->", "solid"],
+  ["--[", "]-->", "dashed"]
+];
+var space = (c) => c !== void 0 && /\s/.test(c);
+function operatorAt(s, i) {
+  for (const [open, close, line] of LABELED) {
+    if (!s.startsWith(open, i)) continue;
+    const end = s.indexOf("]", i + open.length);
+    if (end >= 0 && s.startsWith(close, end))
+      return {
+        length: end + close.length - i,
+        op: { line, arrow: "end", label: s.slice(i + open.length, end).trim() }
+      };
+  }
+  for (const [text2, op] of OPS) {
+    if (!s.startsWith(text2, i)) continue;
+    if (/[<>]/.test(text2) || space(s[i - 1]) && space(s[i + text2.length]))
+      return { length: text2.length, op };
+  }
+  return void 0;
+}
+function operators(s) {
+  const found = [];
+  for (let i = 0; i < s.length; ) {
+    const hit = operatorAt(s, i);
+    if (!hit) {
+      i += 1;
+      continue;
+    }
+    found.push({ index: i, ...hit });
+    i += hit.length;
+  }
+  return found;
+}
+var hasOperator = (s) => operators(` ${s} `).length > 0;
 function labelColon(s) {
   let depth = 0;
   for (let i = 0; i < s.length; i++) {
@@ -14046,15 +14763,10 @@ function parseEdgeExpression(expr) {
   }
   const parts = [];
   let last = 0;
-  for (const m of body.matchAll(OP_RE)) {
+  for (const m of operators(body)) {
     parts.push(body.slice(last, m.index).trim());
-    if (m[1] !== void 0) parts.push({ line: "solid", arrow: "end", label: m[1].trim() });
-    else if (m[2] !== void 0) parts.push({ line: "dashed", arrow: "end", label: m[2].trim() });
-    else {
-      const op = OPS.find(([o]) => o === m[0])?.[1];
-      if (op) parts.push({ ...op });
-    }
-    last = (m.index ?? 0) + m[0].length;
+    parts.push({ ...m.op });
+    last = m.index + m.length;
   }
   parts.push(body.slice(last).trim());
   if (parts.length < 3) return `no arrow found in "${expr}" (use ->, -->, <->, -- ...)`;
@@ -14182,7 +14894,7 @@ function parseSpec(source, filename = "diagram.yaml") {
   const background = hexColor(raw.background, "background", "", { where: "background" }, [
     "transparent"
   ]);
-  const legend3 = [];
+  const legend4 = [];
   if (raw.legend !== void 0 && raw.legend !== null && !isObj(raw.legend)) {
     err("DG107", "legend must be a mapping of line style to meaning", {
       subject: { where: "legend" },
@@ -14205,7 +14917,7 @@ function parseSpec(source, filename = "diagram.yaml") {
           subject: { where: "legend", key },
           fixes: [`write ${line}: Asynchronous events`]
         });
-      } else legend3.push({ line, label });
+      } else legend4.push({ line, label });
     }
   }
   const entries = (value, what) => {
@@ -14284,7 +14996,7 @@ function parseSpec(source, filename = "diagram.yaml") {
     const color = hexColor(pick(g, "color", GROUP_SYNONYMS), "color", `group "${id}"`, {
       group: id
     });
-    const fill = hexColor(pick(g, "fill", GROUP_SYNONYMS), "fill", `group "${id}"`, { group: id }, [
+    const fill2 = hexColor(pick(g, "fill", GROUP_SYNONYMS), "fill", `group "${id}"`, { group: id }, [
       "none"
     ]);
     const dashed = pick(g, "dashed", GROUP_SYNONYMS);
@@ -14294,7 +15006,7 @@ function parseSpec(source, filename = "diagram.yaml") {
       label: str(pick(g, "label", GROUP_SYNONYMS)) ?? style2?.label ?? (style2 ? "" : id),
       parent: str(pick(g, "in", GROUP_SYNONYMS)),
       color,
-      fill,
+      fill: fill2,
       icon: icon2,
       dashed: typeof dashed === "boolean" ? dashed : void 0
     });
@@ -14603,7 +15315,7 @@ function parseSpec(source, filename = "diagram.yaml") {
     ...animate ? { animate } : {},
     skin,
     background: background === "transparent" ? "transparent" : background,
-    ...legend3.length ? { legend: legend3 } : {},
+    ...legend4.length ? { legend: legend4 } : {},
     nodes,
     groups,
     edges
@@ -14615,7 +15327,7 @@ function suggestIds(id, ids, kind) {
 }
 
 // src/cli.ts
-var VERSION = true ? "0.6.0" : "dev";
+var VERSION = true ? "0.7.0" : "dev";
 var HELP = `orrery ${VERSION}: architecture and system design diagrams with official icons
 
 Usage: