@kestack/web-platform 0.0.0-stage → 0.0.1

package/dist/recipes/kabuki-devtools/map/node/node.js

@@ -0,0 +1,251 @@
+import { cn } from "../../../../components/lib/utils.js";
+import { ink } from "../../ink/ink.js";
+import { CARD } from "../../scene/nodes.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Box, Boxes, ChevronLeft, ChevronRight, RefreshCw } from "lucide-react";
+//#region src/recipes/kabuki-devtools/map/node/node.tsx
+/** The most dots a Worker's row shows; more are counted. */
+const DOTS = 6;
+const FADE = "transition-[color,background-color,border-color,box-shadow] duration-200";
+const RAISED = "0 1px 2px rgb(0 0 0 / 0.06), 0 4px 10px rgb(0 0 0 / 0.07), 0 12px 28px -8px rgb(0 0 0 / 0.12)";
+const GOT = `0 0 0 4px ${ink("message-soft")}, 0 10px 32px -6px color-mix(in oklch, ${ink("message")} 45%, transparent)`;
+const dotTone = (key) => key.status === "running" ? ink("running") : key.status === "failed" ? ink("failed") : key.status === "finished" ? "var(--muted-foreground)" : ink("lit");
+function Node({ node, picked, part, sentBy, got = false, onPick, onChoose }) {
+	const { lit, many } = node;
+	const card = cn("absolute inset-0 rounded-xl border", FADE, lit ? "bg-card" : "bg-background/60 border-dashed");
+	const edge = got ? ink("message") : picked ? ink("lit") : lit ? ink("line-lit") : ink("dim");
+	const total = node.instances.length;
+	const at = node.chosen ? node.instances.indexOf(node.chosen) : -1;
+	const step = (by) => onChoose?.(node.instances[(at + by + total) % total].id);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "absolute top-0 left-0 cursor-default",
+		style: {
+			width: node.width,
+			height: node.height
+		},
+		onClick: () => onPick(picked && !part ? null : void 0),
+		children: [
+			many && /* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				className: cn(card, "translate-x-[5px] translate-y-[5px]"),
+				style: {
+					borderColor: lit ? ink("line-lit") : ink("dim"),
+					boxShadow: lit ? RAISED : void 0
+				}
+			}),
+			/* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				className: card,
+				style: {
+					borderColor: edge,
+					borderWidth: got ? 1.5 : void 0,
+					boxShadow: got ? `${GOT}, ${RAISED}` : lit && !many ? RAISED : void 0
+				}
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "relative flex h-full flex-col",
+				style: { padding: CARD.pad },
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex shrink-0 items-center gap-1",
+						children: [/* @__PURE__ */ jsxs("button", {
+							type: "button",
+							"aria-pressed": picked && !part,
+							className: cn("flex min-w-0 flex-1 items-center gap-2 rounded-md text-left outline-none focus-visible:ring-2", FADE),
+							style: {
+								height: CARD.header,
+								color: lit ? ink("lit") : ink("dim")
+							},
+							children: [
+								many ? /* @__PURE__ */ jsx(Boxes, { className: "size-3.5 shrink-0 opacity-70" }) : /* @__PURE__ */ jsx(Box, { className: "size-3.5 shrink-0 opacity-70" }),
+								/* @__PURE__ */ jsx("span", {
+									className: "min-w-0 flex-1 truncate text-[13px] font-semibold",
+									children: node.name
+								}),
+								many && total === 0 && /* @__PURE__ */ jsx("span", {
+									className: "text-muted-foreground font-mono text-[11px] tabular-nums",
+									children: "×0"
+								})
+							]
+						}), many && total > 0 && /* @__PURE__ */ jsx(Switcher, {
+							label: node.chosen?.key ?? "",
+							at,
+							total,
+							onStep: step
+						})]
+					}),
+					node.states && /* @__PURE__ */ jsx("div", {
+						className: "flex flex-col",
+						style: { marginTop: CARD.gap },
+						children: node.states.map((line, index) => /* @__PURE__ */ jsx("div", {
+							className: "flex items-center gap-3",
+							style: { height: CARD.line },
+							children: line.map((option) => /* @__PURE__ */ jsx(Option, {
+								option,
+								lit,
+								many,
+								active: many ? node.chosen?.state._tag === option.tag : option.count > 0,
+								picked: part !== void 0 && "state" in part && part.state === option.tag,
+								onPick: () => onPick({ state: option.tag })
+							}, option.tag))
+						}, index))
+					}),
+					node.workers.length > 0 && /* @__PURE__ */ jsx("div", {
+						className: "flex flex-col",
+						style: { marginTop: CARD.gap },
+						children: node.workers.map((row) => /* @__PURE__ */ jsx(Row, {
+							row,
+							sent: sentBy === row.name,
+							picked: part !== void 0 && "worker" in part && part.worker === row.name,
+							onPick: () => onPick({ worker: row.name })
+						}, row.name))
+					})
+				]
+			})
+		]
+	});
+}
+function Option({ option, lit, many, active, picked, onPick }) {
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		onClick: (event) => {
+			event.stopPropagation();
+			onPick();
+		},
+		"aria-pressed": picked,
+		"aria-label": `State ${option.tag}${many ? `, ${option.count} in it` : active ? ", active" : ""}`,
+		className: cn("flex items-center gap-1.5 rounded-sm text-[11.5px] whitespace-nowrap outline-none focus-visible:ring-2", FADE, picked && "underline decoration-2 underline-offset-4"),
+		style: {
+			color: active ? ink("lit") : lit ? "var(--muted-foreground)" : ink("dim"),
+			textDecorationColor: ink("message")
+		},
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: cn("grid size-2.5 shrink-0 place-items-center rounded-full border-[1.5px]", FADE),
+				style: { borderColor: active ? ink("active") : lit ? ink("line-lit") : ink("dim") },
+				children: /* @__PURE__ */ jsx("span", {
+					className: "size-1 rounded-full transition-[opacity,scale] duration-200",
+					style: {
+						backgroundColor: ink("active"),
+						opacity: active ? 1 : 0,
+						scale: active ? 1 : .4
+					}
+				})
+			}),
+			option.tag,
+			many && /* @__PURE__ */ jsx("span", {
+				className: "text-muted-foreground tabular-nums",
+				children: option.count
+			})
+		]
+	});
+}
+/** Which of a place of many's Instances shows, and a step to the one before or after. */
+function Switcher({ label, at, total, onStep }) {
+	const arrow = "text-muted-foreground hover:text-foreground hover:bg-muted grid size-5 shrink-0 place-items-center rounded transition-colors duration-150 outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-30";
+	return /* @__PURE__ */ jsxs("span", {
+		className: "flex shrink-0 items-center gap-0.5",
+		children: [
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: arrow,
+				onClick: (event) => {
+					event.stopPropagation();
+					onStep(-1);
+				},
+				disabled: total < 2,
+				"aria-label": "The Instance before",
+				children: /* @__PURE__ */ jsx(ChevronLeft, { className: "size-3" })
+			}),
+			/* @__PURE__ */ jsxs("span", {
+				className: "flex max-w-24 min-w-0 items-baseline gap-1 text-[11px]",
+				"aria-live": "polite",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "truncate font-mono",
+					title: label,
+					children: label
+				}), /* @__PURE__ */ jsxs("span", {
+					className: "text-muted-foreground shrink-0 tabular-nums",
+					children: [
+						at + 1,
+						"/",
+						total
+					]
+				})]
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: arrow,
+				onClick: (event) => {
+					event.stopPropagation();
+					onStep(1);
+				},
+				disabled: total < 2,
+				"aria-label": "The Instance after",
+				children: /* @__PURE__ */ jsx(ChevronRight, { className: "size-3" })
+			})
+		]
+	});
+}
+function Row({ row, sent, picked, onPick }) {
+	const on = row.keys.length > 0;
+	const shown = row.keys.slice(0, DOTS);
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		onClick: (event) => {
+			event.stopPropagation();
+			onPick();
+		},
+		"aria-pressed": picked,
+		"aria-label": `Worker ${row.name}, ${on ? `${row.keys.length} running` : "off"}`,
+		className: cn("-mx-1.5 flex items-center gap-2 rounded-md px-1.5 text-left outline-none focus-visible:ring-2", FADE, picked && "bg-muted"),
+		style: {
+			height: CARD.row,
+			backgroundColor: sent ? ink("message-soft") : void 0,
+			color: on ? ink("lit") : ink("dim")
+		},
+		children: [
+			/* @__PURE__ */ jsx(RefreshCw, {
+				className: "size-3 shrink-0",
+				style: {
+					color: sent ? ink("message") : void 0,
+					opacity: .7
+				}
+			}),
+			/* @__PURE__ */ jsxs("span", {
+				className: "min-w-0 flex-1 truncate font-mono text-[11px]",
+				children: [row.name, row.state && /* @__PURE__ */ jsxs("span", {
+					className: "text-muted-foreground font-sans",
+					children: [
+						" ",
+						"· in ",
+						row.state
+					]
+				})]
+			}),
+			on ? /* @__PURE__ */ jsxs("span", {
+				className: "flex items-center gap-1",
+				children: [shown.map((key) => /* @__PURE__ */ jsx(Dot, {
+					tone: dotTone(key),
+					breathes: key.status === "running"
+				}, key.id)), /* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground ml-0.5 font-mono text-[10.5px] tabular-nums",
+					children: row.keys.length
+				})]
+			}) : /* @__PURE__ */ jsx("span", {
+				className: "text-[10.5px]",
+				children: "off"
+			})
+		]
+	});
+}
+function Dot({ tone, breathes }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("size-1.5 rounded-full", breathes && "motion-safe:animate-pulse"),
+		style: { backgroundColor: tone }
+	});
+}
+//#endregion
+export { Node };
+
+//# sourceMappingURL=node.js.map

package/dist/recipes/kabuki-devtools/map/node/node.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"node.js","names":[],"sources":["../../../../../src/recipes/kabuki-devtools/map/node/node.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { Box, Boxes, ChevronLeft, ChevronRight, RefreshCw } from 'lucide-react';\nimport { cn } from '../../../../components/lib/utils.ts';\nimport { ink } from '../../ink/index.ts';\nimport { CARD } from '../../scene/index.ts';\nimport type {\n  Placed,\n  StateOption,\n  WorkerKey,\n  WorkerRow,\n} from '../../scene/index.ts';\n\n/*\n * A Node: one card per place an Actor runs, at the size its Actor gives it,\n * so nothing on it ever moves or grows.\n *\n * 1. Header   the Actor's name; a place of keyed Children is a stack of two\n *             cards, and shows one Instance at a time: a switcher in its\n *             corner steps through them.\n * 2. States   one option per State, like a radio: the one its Instance is in\n *             is filled. A place of many fills the shown Instance's, and\n *             counts how many of all its Instances are in each.\n * 3. Workers  one row per Worker the Actor has, always there: one dot per key\n *             it runs now, a dot that breathes while it works, red where it\n *             failed, quiet where it finished. Away from the live app, a dot\n *             says only that it is on. A Worker with no key running reads off.\n *\n * A card where something runs stands up off the Map; one where nothing\n * does lies flat, dashed. The card the Step's Message went to wears its\n * colour, and the Worker that Sent it has its row lit. Only colours and\n * shadows change, and they fade. A right click folds what hangs below it.\n * A click anywhere on the card picks it; on a State, a Worker or the\n * switcher, picks that instead.\n */\n\n/** What part of a Node is picked. */\nexport type Part =\n  | { readonly state: string }\n  | { readonly worker: string }\n  | undefined;\n\n/** The most dots a Worker's row shows; more are counted. */\nconst DOTS = 6;\n\nconst FADE =\n  'transition-[color,background-color,border-color,box-shadow] duration-200';\n\nconst RAISED =\n  '0 1px 2px rgb(0 0 0 / 0.06), 0 4px 10px rgb(0 0 0 / 0.07), 0 12px 28px -8px rgb(0 0 0 / 0.12)';\nconst GOT = `0 0 0 4px ${ink('message-soft')}, 0 10px 32px -6px color-mix(in oklch, ${ink('message')} 45%, transparent)`;\n\nconst dotTone = (key: WorkerKey) =>\n  key.status === 'running'\n    ? ink('running')\n    : key.status === 'failed'\n      ? ink('failed')\n      : key.status === 'finished'\n        ? 'var(--muted-foreground)'\n        : ink('lit');\n\nexport function Node({\n  node,\n  picked,\n  part,\n  sentBy,\n  got = false,\n  onPick,\n  onChoose,\n}: {\n  readonly node: Placed;\n  /** The card is picked. */\n  readonly picked: boolean;\n  /** The part of it picked, if one is. */\n  readonly part: Part;\n  /** The Worker that Sent the Step's Message, if it is this Node's. */\n  readonly sentBy: string | undefined;\n  /** The Step's Message went to this card. */\n  readonly got?: boolean;\n  readonly onPick: (part: Part | null) => void;\n  /** Show another of a place of many's Instances. */\n  readonly onChoose?: (instance: string) => void;\n}) {\n  const { lit, many } = node;\n  const card = cn(\n    'absolute inset-0 rounded-xl border',\n    FADE,\n    lit ? 'bg-card' : 'bg-background/60 border-dashed',\n  );\n  const edge = got\n    ? ink('message')\n    : picked\n      ? ink('lit')\n      : lit\n        ? ink('line-lit')\n        : ink('dim');\n  const total = node.instances.length;\n  const at = node.chosen ? node.instances.indexOf(node.chosen) : -1;\n  const step = (by: number) =>\n    onChoose?.(node.instances[(at + by + total) % total]!.id);\n\n  return (\n    <div\n      className=\"absolute top-0 left-0 cursor-default\"\n      style={{ width: node.width, height: node.height }}\n      onClick={() => onPick(picked && !part ? null : undefined)}\n    >\n      {many && (\n        <span\n          aria-hidden\n          className={cn(card, 'translate-x-[5px] translate-y-[5px]')}\n          style={{\n            borderColor: lit ? ink('line-lit') : ink('dim'),\n            boxShadow: lit ? RAISED : undefined,\n          }}\n        />\n      )}\n      <span\n        aria-hidden\n        className={card}\n        style={{\n          borderColor: edge,\n          borderWidth: got ? 1.5 : undefined,\n          boxShadow: got\n            ? `${GOT}, ${RAISED}`\n            : lit && !many\n              ? RAISED\n              : undefined,\n        }}\n      />\n      <div\n        className=\"relative flex h-full flex-col\"\n        style={{ padding: CARD.pad }}\n      >\n        {/* 1. Header */}\n        <div className=\"flex shrink-0 items-center gap-1\">\n          <button\n            type=\"button\"\n            aria-pressed={picked && !part}\n            className={cn(\n              'flex min-w-0 flex-1 items-center gap-2 rounded-md text-left outline-none focus-visible:ring-2',\n              FADE,\n            )}\n            style={{\n              height: CARD.header,\n              color: lit ? ink('lit') : ink('dim'),\n            }}\n          >\n            {many ? (\n              <Boxes className=\"size-3.5 shrink-0 opacity-70\" />\n            ) : (\n              <Box className=\"size-3.5 shrink-0 opacity-70\" />\n            )}\n            <span className=\"min-w-0 flex-1 truncate text-[13px] font-semibold\">\n              {node.name}\n            </span>\n            {many && total === 0 && (\n              <span className=\"text-muted-foreground font-mono text-[11px] tabular-nums\">\n                ×0\n              </span>\n            )}\n          </button>\n          {many && total > 0 && (\n            <Switcher\n              label={node.chosen?.key ?? ''}\n              at={at}\n              total={total}\n              onStep={step}\n            />\n          )}\n        </div>\n\n        {/* 2. States */}\n        {node.states && (\n          <div className=\"flex flex-col\" style={{ marginTop: CARD.gap }}>\n            {node.states.map((line, index) => (\n              <div\n                key={index}\n                className=\"flex items-center gap-3\"\n                style={{ height: CARD.line }}\n              >\n                {line.map((option) => (\n                  <Option\n                    key={option.tag}\n                    option={option}\n                    lit={lit}\n                    many={many}\n                    active={\n                      many\n                        ? node.chosen?.state._tag === option.tag\n                        : option.count > 0\n                    }\n                    picked={\n                      part !== undefined &&\n                      'state' in part &&\n                      part.state === option.tag\n                    }\n                    onPick={() => onPick({ state: option.tag })}\n                  />\n                ))}\n              </div>\n            ))}\n          </div>\n        )}\n\n        {/* 3. Workers */}\n        {node.workers.length > 0 && (\n          <div className=\"flex flex-col\" style={{ marginTop: CARD.gap }}>\n            {node.workers.map((row) => (\n              <Row\n                key={row.name}\n                row={row}\n                sent={sentBy === row.name}\n                picked={\n                  part !== undefined &&\n                  'worker' in part &&\n                  part.worker === row.name\n                }\n                onPick={() => onPick({ worker: row.name })}\n              />\n            ))}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n\nfunction Option({\n  option,\n  lit,\n  many,\n  active,\n  picked,\n  onPick,\n}: {\n  readonly option: StateOption;\n  readonly lit: boolean;\n  readonly many: boolean;\n  /** The shown Instance is in it. */\n  readonly active: boolean;\n  readonly picked: boolean;\n  readonly onPick: () => void;\n}) {\n  return (\n    <button\n      type=\"button\"\n      onClick={(event) => {\n        event.stopPropagation();\n        onPick();\n      }}\n      aria-pressed={picked}\n      aria-label={`State ${option.tag}${many ? `, ${option.count} in it` : active ? ', active' : ''}`}\n      className={cn(\n        'flex items-center gap-1.5 rounded-sm text-[11.5px] whitespace-nowrap outline-none focus-visible:ring-2',\n        FADE,\n        picked && 'underline decoration-2 underline-offset-4',\n      )}\n      style={{\n        color: active\n          ? ink('lit')\n          : lit\n            ? 'var(--muted-foreground)'\n            : ink('dim'),\n        textDecorationColor: ink('message'),\n      }}\n    >\n      <span\n        className={cn(\n          'grid size-2.5 shrink-0 place-items-center rounded-full border-[1.5px]',\n          FADE,\n        )}\n        style={{\n          borderColor: active\n            ? ink('active')\n            : lit\n              ? ink('line-lit')\n              : ink('dim'),\n        }}\n      >\n        <span\n          className=\"size-1 rounded-full transition-[opacity,scale] duration-200\"\n          style={{\n            backgroundColor: ink('active'),\n            opacity: active ? 1 : 0,\n            scale: active ? 1 : 0.4,\n          }}\n        />\n      </span>\n      {option.tag}\n      {many && (\n        <span className=\"text-muted-foreground tabular-nums\">\n          {option.count}\n        </span>\n      )}\n    </button>\n  );\n}\n\n/** Which of a place of many's Instances shows, and a step to the one before or after. */\nfunction Switcher({\n  label,\n  at,\n  total,\n  onStep,\n}: {\n  /** The shown Instance's key. */\n  readonly label: string;\n  readonly at: number;\n  readonly total: number;\n  readonly onStep: (by: number) => void;\n}) {\n  const arrow =\n    'text-muted-foreground hover:text-foreground hover:bg-muted grid size-5 shrink-0 place-items-center rounded transition-colors duration-150 outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-30';\n  return (\n    <span className=\"flex shrink-0 items-center gap-0.5\">\n      <button\n        type=\"button\"\n        className={arrow}\n        onClick={(event) => {\n          event.stopPropagation();\n          onStep(-1);\n        }}\n        disabled={total < 2}\n        aria-label=\"The Instance before\"\n      >\n        <ChevronLeft className=\"size-3\" />\n      </button>\n      <span\n        className=\"flex max-w-24 min-w-0 items-baseline gap-1 text-[11px]\"\n        aria-live=\"polite\"\n      >\n        <span className=\"truncate font-mono\" title={label}>\n          {label}\n        </span>\n        <span className=\"text-muted-foreground shrink-0 tabular-nums\">\n          {at + 1}/{total}\n        </span>\n      </span>\n      <button\n        type=\"button\"\n        className={arrow}\n        onClick={(event) => {\n          event.stopPropagation();\n          onStep(1);\n        }}\n        disabled={total < 2}\n        aria-label=\"The Instance after\"\n      >\n        <ChevronRight className=\"size-3\" />\n      </button>\n    </span>\n  );\n}\n\nfunction Row({\n  row,\n  sent,\n  picked,\n  onPick,\n}: {\n  readonly row: WorkerRow;\n  readonly sent: boolean;\n  readonly picked: boolean;\n  readonly onPick: () => void;\n}) {\n  const on = row.keys.length > 0;\n  const shown = row.keys.slice(0, DOTS);\n  return (\n    <button\n      type=\"button\"\n      onClick={(event) => {\n        event.stopPropagation();\n        onPick();\n      }}\n      aria-pressed={picked}\n      aria-label={`Worker ${row.name}, ${on ? `${row.keys.length} running` : 'off'}`}\n      className={cn(\n        '-mx-1.5 flex items-center gap-2 rounded-md px-1.5 text-left outline-none focus-visible:ring-2',\n        FADE,\n        picked && 'bg-muted',\n      )}\n      style={{\n        height: CARD.row,\n        backgroundColor: sent ? ink('message-soft') : undefined,\n        color: on ? ink('lit') : ink('dim'),\n      }}\n    >\n      <RefreshCw\n        className=\"size-3 shrink-0\"\n        style={{ color: sent ? ink('message') : undefined, opacity: 0.7 }}\n      />\n      <span className=\"min-w-0 flex-1 truncate font-mono text-[11px]\">\n        {row.name}\n        {row.state && (\n          <span className=\"text-muted-foreground font-sans\">\n            {' '}\n            · in {row.state}\n          </span>\n        )}\n      </span>\n      {on ? (\n        <span className=\"flex items-center gap-1\">\n          {shown.map((key) => (\n            <Dot\n              key={key.id}\n              tone={dotTone(key)}\n              breathes={key.status === 'running'}\n            />\n          ))}\n          <span className=\"text-muted-foreground ml-0.5 font-mono text-[10.5px] tabular-nums\">\n            {row.keys.length}\n          </span>\n        </span>\n      ) : (\n        <span className=\"text-[10.5px]\">off</span>\n      )}\n    </button>\n  );\n}\n\nfunction Dot({\n  tone,\n  breathes,\n}: {\n  readonly tone: string;\n  readonly breathes: boolean;\n}): ReactNode {\n  return (\n    <span\n      className={cn(\n        'size-1.5 rounded-full',\n        breathes && 'motion-safe:animate-pulse',\n      )}\n      style={{ backgroundColor: tone }}\n    />\n  );\n}\n"],"mappings":"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"}

package/dist/recipes/kabuki-devtools/map/popup/index.d.ts

@@ -0,0 +1,2 @@
+import { Popup } from "./popup.js";
+export { Popup };

package/dist/recipes/kabuki-devtools/map/popup/index.js

@@ -0,0 +1,2 @@
+import { Popup } from "./popup.js";
+export { Popup };

package/dist/recipes/kabuki-devtools/map/popup/popup.d.ts

@@ -0,0 +1,12 @@
+import { Instance } from "@kestack/kabuki";
+//#region src/recipes/kabuki-devtools/map/popup/popup.d.ts
+export declare function Popup({ name, instances, picked, onPick }: {
+  /** The Actor's name. */
+  readonly name: string;
+  readonly instances: ReadonlyArray<Instance>;
+  /** The Instance picked. */
+  readonly picked: string | undefined;
+  readonly onPick: (instance: string) => void;
+}): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=popup.d.ts.map

package/dist/recipes/kabuki-devtools/map/popup/popup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"popup.d.ts","names":[],"sources":["../../../../../src/recipes/kabuki-devtools/map/popup/popup.tsx"],"mappings":";;wBAYgB,QACd,MACA,WACA,QACA;;WAGS;WACA,WAAW,cAAc;;WAEzB;WACA,SAAS;oBACnB,IAAA"}

package/dist/recipes/kabuki-devtools/map/popup/popup.js

@@ -0,0 +1,72 @@
+import { cn } from "../../../../components/lib/utils.js";
+import { ink } from "../../ink/ink.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { motion, useReducedMotion } from "motion/react";
+//#region src/recipes/kabuki-devtools/map/popup/popup.tsx
+function Popup({ name, instances, picked, onPick }) {
+	const still = useReducedMotion();
+	const stateful = instances.some((each) => each.state._tag !== "Single");
+	return /* @__PURE__ */ jsxs(motion.div, {
+		className: "bg-popover text-popover-foreground flex max-h-80 w-64 flex-col overflow-hidden rounded-lg border shadow-[0_1px_2px_rgb(0_0_0/0.06),0_8px_24px_rgb(0_0_0/0.12)]",
+		initial: still ? false : {
+			opacity: 0,
+			x: -4
+		},
+		animate: {
+			opacity: 1,
+			x: 0
+		},
+		transition: {
+			duration: .14,
+			ease: [
+				.23,
+				1,
+				.32,
+				1
+			]
+		},
+		children: [
+			/* @__PURE__ */ jsxs("p", {
+				className: "border-b px-3 py-2 text-xs",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "font-semibold",
+						children: instances.length
+					}),
+					" ",
+					/* @__PURE__ */ jsxs("span", {
+						className: "text-muted-foreground",
+						children: [name, " Instances, by key"]
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "grid grid-cols-[1fr_auto] gap-x-3 px-3 pt-2 pb-1 text-[10px] font-medium tracking-wider text-muted-foreground uppercase",
+				children: [/* @__PURE__ */ jsx("span", { children: "Key" }), stateful && /* @__PURE__ */ jsx("span", { children: "State" })]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "min-h-0 overflow-y-auto overscroll-contain px-1 pb-1",
+				children: instances.map((instance) => /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					onClick: () => onPick(instance.id),
+					"aria-pressed": picked === instance.id,
+					className: cn("grid h-7 w-full grid-cols-[1fr_auto] items-center gap-x-3 rounded-md px-2 text-left text-xs transition-colors duration-100 outline-none", "hover:bg-muted focus-visible:bg-muted", picked === instance.id && "bg-muted"),
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "truncate font-mono",
+						children: instance.key ?? instance.id
+					}), stateful && /* @__PURE__ */ jsxs("span", {
+						className: "flex items-center gap-1.5",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "size-1.5 rounded-full",
+							style: { backgroundColor: ink("active") }
+						}), instance.state._tag]
+					})]
+				}, instance.id))
+			})
+		]
+	});
+}
+//#endregion
+export { Popup };
+
+//# sourceMappingURL=popup.js.map

package/dist/recipes/kabuki-devtools/map/popup/popup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popup.js","names":[],"sources":["../../../../../src/recipes/kabuki-devtools/map/popup/popup.tsx"],"sourcesContent":["import { motion, useReducedMotion } from 'motion/react';\nimport type { Instance } from '@kestack/kabuki';\nimport { cn } from '../../../../components/lib/utils.ts';\nimport { ink } from '../../ink/index.ts';\n\n/*\n * The Popup: the Instances at a picked place of keyed Children, as a table\n * opened beside its card, over the Map, so the Map never moves to show it.\n * One row per Instance: its key, and the State it is in, drawn as the card\n * draws States. A row picks its Instance. It scrolls on its own.\n */\n\nexport function Popup({\n  name,\n  instances,\n  picked,\n  onPick,\n}: {\n  /** The Actor's name. */\n  readonly name: string;\n  readonly instances: ReadonlyArray<Instance>;\n  /** The Instance picked. */\n  readonly picked: string | undefined;\n  readonly onPick: (instance: string) => void;\n}) {\n  const still = useReducedMotion();\n  const stateful = instances.some((each) => each.state._tag !== 'Single');\n  return (\n    <motion.div\n      className=\"bg-popover text-popover-foreground flex max-h-80 w-64 flex-col overflow-hidden rounded-lg border shadow-[0_1px_2px_rgb(0_0_0/0.06),0_8px_24px_rgb(0_0_0/0.12)]\"\n      initial={still ? false : { opacity: 0, x: -4 }}\n      animate={{ opacity: 1, x: 0 }}\n      transition={{ duration: 0.14, ease: [0.23, 1, 0.32, 1] }}\n    >\n      <p className=\"border-b px-3 py-2 text-xs\">\n        <span className=\"font-semibold\">{instances.length}</span>{' '}\n        <span className=\"text-muted-foreground\">{name} Instances, by key</span>\n      </p>\n      <div className=\"grid grid-cols-[1fr_auto] gap-x-3 px-3 pt-2 pb-1 text-[10px] font-medium tracking-wider text-muted-foreground uppercase\">\n        <span>Key</span>\n        {stateful && <span>State</span>}\n      </div>\n      <div className=\"min-h-0 overflow-y-auto overscroll-contain px-1 pb-1\">\n        {instances.map((instance) => (\n          <button\n            key={instance.id}\n            type=\"button\"\n            onClick={() => onPick(instance.id)}\n            aria-pressed={picked === instance.id}\n            className={cn(\n              'grid h-7 w-full grid-cols-[1fr_auto] items-center gap-x-3 rounded-md px-2 text-left text-xs transition-colors duration-100 outline-none',\n              'hover:bg-muted focus-visible:bg-muted',\n              picked === instance.id && 'bg-muted',\n            )}\n          >\n            <span className=\"truncate font-mono\">\n              {instance.key ?? instance.id}\n            </span>\n            {stateful && (\n              <span className=\"flex items-center gap-1.5\">\n                <span\n                  className=\"size-1.5 rounded-full\"\n                  style={{ backgroundColor: ink('active') }}\n                />\n                {instance.state._tag}\n              </span>\n            )}\n          </button>\n        ))}\n      </div>\n    </motion.div>\n  );\n}\n"],"mappings":";;;;;AAYA,SAAgB,MAAM,EACpB,MACA,WACA,QACA,UAQC;CACD,MAAM,QAAQ,iBAAiB;CAC/B,MAAM,WAAW,UAAU,MAAM,SAAS,KAAK,MAAM,SAAS,QAAQ;CACtE,OACE,qBAAC,OAAO,KAAR;EACE,WAAU;EACV,SAAS,QAAQ,QAAQ;GAAE,SAAS;GAAG,GAAG;EAAG;EAC7C,SAAS;GAAE,SAAS;GAAG,GAAG;EAAE;EAC5B,YAAY;GAAE,UAAU;GAAM,MAAM;IAAC;IAAM;IAAG;IAAM;GAAC;EAAE;EAJzD,UAAA;GAME,qBAAC,KAAD;IAAG,WAAU;IAAb,UAAA;KACE,oBAAC,QAAD;MAAM,WAAU;MAAiB,UAAA,UAAU;KAAa,CAAA;KAAE;KAC1D,qBAAC,QAAD;MAAM,WAAU;MAAhB,UAAA,CAAyC,MAAK,oBAAwB;;IACrE;;GACH,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,oBAAC,QAAD,EAAA,UAAM,MAAS,CAAA,GACd,YAAY,oBAAC,QAAD,EAAA,UAAM,QAAW,CAAA,CAC3B;;GACL,oBAAC,OAAD;IAAK,WAAU;IACZ,UAAA,UAAU,KAAK,aACd,qBAAC,UAAD;KAEE,MAAK;KACL,eAAe,OAAO,SAAS,EAAE;KACjC,gBAAc,WAAW,SAAS;KAClC,WAAW,GACT,2IACA,yCACA,WAAW,SAAS,MAAM,UAC5B;KATF,UAAA,CAWE,oBAAC,QAAD;MAAM,WAAU;MACb,UAAA,SAAS,OAAO,SAAS;KACtB,CAAA,GACL,YACC,qBAAC,QAAD;MAAM,WAAU;MAAhB,UAAA,CACE,oBAAC,QAAD;OACE,WAAU;OACV,OAAO,EAAE,iBAAiB,IAAI,QAAQ,EAAE;MACzC,CAAA,GACA,SAAS,MAAM,IACZ;KAEF,CAAA,CAAA;IAtBD,GAAA,SAAS,EAsBR,CACT;GACE,CAAA;EACK;;AAEhB"}

package/dist/recipes/kabuki-devtools/scene/beats.d.ts

@@ -0,0 +1,36 @@
+import { Envelope, Source } from "@kestack/kabuki";
+//#region src/recipes/kabuki-devtools/scene/beats.d.ts
+/** A Step's Message, with what its Update asked for. */
+export interface Said {
+  readonly envelope: Envelope;
+  readonly commands: ReadonlyArray<unknown>;
+}
+export interface Beats {
+  /** New for each Message, so its Beats play again. */
+  readonly key: string;
+  readonly tag: string;
+  readonly payload: object;
+  readonly at: number;
+  readonly source: Source;
+  /** The Node the Message went to; none for a Message that was dropped. */
+  readonly to: string | undefined;
+  readonly send: {
+    readonly at: string;
+    readonly by: string;
+    /** The Worker that Sent it, by name: its row on the Node, there even once its key ended. */
+    readonly worker?: string;
+  } | undefined;
+  readonly request: {
+    readonly from: string;
+    readonly to: string;
+  } | undefined;
+  readonly commands: ReadonlyArray<{
+    readonly name: string;
+    readonly args: unknown;
+  }>;
+}
+export declare const beatsOf: ({ envelope, commands }: Said,
+/** The Node an Instance, or one of its Workers, is drawn at. */
+find: (id: string) => string | undefined) => Beats;
+//#endregion
+//# sourceMappingURL=beats.d.ts.map

package/dist/recipes/kabuki-devtools/scene/beats.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"beats.d.ts","names":[],"sources":["../../../../src/recipes/kabuki-devtools/scene/beats.ts"],"mappings":";;;iBAciB;WACN,UAAU;WACV,UAAU;;iBAGJ;;WAEN;WACA;WACA;WACA;WACA,QAAQ;;WAER;WACA;aAEM;aACA;;aAEA;;WAGN;aAAoB;aAAuB;;WAC3C,UAAU;aACR;aACA;;;qBAuBA,YAAO,UAAA,YACM,MAElB;;AAAA,OAAC,sCACN"}

package/dist/recipes/kabuki-devtools/scene/beats.js

@@ -0,0 +1,46 @@
+//#region src/recipes/kabuki-devtools/scene/beats.ts
+const byOf = (source) => {
+	switch (source.kind) {
+		case "view": return "View";
+		case "command": return source.name;
+		case "worker": return source.key === void 0 ? source.name : `${source.name}#${source.key}`;
+		case "provide": return "Provides";
+		case "outside": return "Outside";
+		case "restore": return "Restore";
+	}
+};
+const beatsOf = ({ envelope, commands }, find) => {
+	const { destination, message, source, at } = envelope;
+	const { _tag, ...payload } = message;
+	const to = find(destination);
+	const from = "instance" in source ? find(source.instance) : void 0;
+	const key = source.kind === "worker" ? `~${source.name}#${source.key ?? ""}` : "";
+	const sentAt = (source.kind === "worker" ? find(`${source.instance}${key}`) : void 0) ?? from ?? to;
+	const request = from && to && from !== to ? {
+		from,
+		to
+	} : void 0;
+	const asked = commands.flatMap((command) => command && typeof command === "object" && "name" in command ? [{
+		name: String(command.name),
+		args: command.args
+	}] : []);
+	return {
+		key: `${at}:${destination}:${_tag}`,
+		tag: _tag,
+		payload,
+		at,
+		source,
+		to,
+		send: sentAt ? {
+			at: sentAt,
+			by: byOf(source),
+			...source.kind === "worker" ? { worker: source.name } : {}
+		} : void 0,
+		request,
+		commands: asked
+	};
+};
+//#endregion
+export { beatsOf };
+
+//# sourceMappingURL=beats.js.map

package/dist/recipes/kabuki-devtools/scene/beats.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"beats.js","names":[],"sources":["../../../../src/recipes/kabuki-devtools/scene/beats.ts"],"sourcesContent":["import type { Envelope, Source } from '@kestack/kabuki';\n\n/*\n * The Beats of a Step: what its Message did, read from its Envelope and the\n * Commands its Update asked for, never from the Snapshot before it.\n *\n * 1. Send     where it was Sent from: the Node of the Instance that Sent it,\n *             and the Worker that did, if one did, by its row there. An\n *             Instance the Message stopped is found at its slot's Node.\n * 2. Request  an Instance asking another, up the tree, for a change.\n * 3. Command  every Command the Update asked for.\n */\n\n/** A Step's Message, with what its Update asked for. */\nexport interface Said {\n  readonly envelope: Envelope;\n  readonly commands: ReadonlyArray<unknown>;\n}\n\nexport interface Beats {\n  /** New for each Message, so its Beats play again. */\n  readonly key: string;\n  readonly tag: string;\n  readonly payload: object;\n  readonly at: number;\n  readonly source: Source;\n  /** The Node the Message went to; none for a Message that was dropped. */\n  readonly to: string | undefined;\n  readonly send:\n    | {\n        readonly at: string;\n        readonly by: string;\n        /** The Worker that Sent it, by name: its row on the Node, there even once its key ended. */\n        readonly worker?: string;\n      }\n    | undefined;\n  readonly request: { readonly from: string; readonly to: string } | undefined;\n  readonly commands: ReadonlyArray<{\n    readonly name: string;\n    readonly args: unknown;\n  }>;\n}\n\nconst byOf = (source: Source): string => {\n  switch (source.kind) {\n    case 'view':\n      return 'View';\n    case 'command':\n      return source.name;\n    case 'worker':\n      return source.key === undefined\n        ? source.name\n        : `${source.name}#${source.key}`;\n    case 'provide':\n      return 'Provides';\n    case 'outside':\n      return 'Outside';\n    case 'restore':\n      return 'Restore';\n  }\n};\n\nexport const beatsOf = (\n  { envelope, commands }: Said,\n  /** The Node an Instance, or one of its Workers, is drawn at. */\n  find: (id: string) => string | undefined,\n): Beats => {\n  const { destination, message, source, at } = envelope;\n  const { _tag, ...payload } = message as { readonly _tag: string };\n  const to = find(destination);\n  const from = 'instance' in source ? find(source.instance) : undefined;\n  const key =\n    source.kind === 'worker' ? `~${source.name}#${source.key ?? ''}` : '';\n  const worker =\n    source.kind === 'worker' ? find(`${source.instance}${key}`) : undefined;\n\n  // 1. Send\n  const sentAt = worker ?? from ?? to;\n  // 2. Request\n  const request = from && to && from !== to ? { from, to } : undefined;\n  // 3. Command\n  const asked = commands.flatMap((command) =>\n    command && typeof command === 'object' && 'name' in command\n      ? [\n          {\n            name: String(command.name),\n            args: (command as { args?: unknown }).args,\n          },\n        ]\n      : [],\n  );\n\n  return {\n    key: `${at}:${destination}:${_tag}`,\n    tag: _tag,\n    payload,\n    at,\n    source,\n    to,\n    send: sentAt\n      ? {\n          at: sentAt,\n          by: byOf(source),\n          ...(source.kind === 'worker' ? { worker: source.name } : {}),\n        }\n      : undefined,\n    request,\n    commands: asked,\n  };\n};\n"],"mappings":";AA2CA,MAAM,QAAQ,WAA2B;CACvC,QAAQ,OAAO,MAAf;EACE,KAAK,QACH,OAAO;EACT,KAAK,WACH,OAAO,OAAO;EAChB,KAAK,UACH,OAAO,OAAO,QAAQ,KAAA,IAClB,OAAO,OACP,GAAG,OAAO,KAAK,GAAG,OAAO;EAC/B,KAAK,WACH,OAAO;EACT,KAAK,WACH,OAAO;EACT,KAAK,WACH,OAAO;CACX;AACF;AAEA,MAAa,WACX,EAAE,UAAU,YAEZ,SACU;CACV,MAAM,EAAE,aAAa,SAAS,QAAQ,OAAO;CAC7C,MAAM,EAAE,MAAM,GAAG,YAAY;CAC7B,MAAM,KAAK,KAAK,WAAW;CAC3B,MAAM,OAAO,cAAc,SAAS,KAAK,OAAO,QAAQ,IAAI,KAAA;CAC5D,MAAM,MACJ,OAAO,SAAS,WAAW,IAAI,OAAO,KAAK,GAAG,OAAO,OAAO,OAAO;CAKrE,MAAM,UAHJ,OAAO,SAAS,WAAW,KAAK,GAAG,OAAO,WAAW,KAAK,IAAI,KAAA,MAGvC,QAAQ;CAEjC,MAAM,UAAU,QAAQ,MAAM,SAAS,KAAK;EAAE;EAAM;CAAG,IAAI,KAAA;CAE3D,MAAM,QAAQ,SAAS,SAAS,YAC9B,WAAW,OAAO,YAAY,YAAY,UAAU,UAChD,CACE;EACE,MAAM,OAAO,QAAQ,IAAI;EACzB,MAAO,QAA+B;CACxC,CACF,IACA,CAAC,CACP;CAEA,OAAO;EACL,KAAK,GAAG,GAAG,GAAG,YAAY,GAAG;EAC7B,KAAK;EACL;EACA;EACA;EACA;EACA,MAAM,SACF;GACE,IAAI;GACJ,IAAI,KAAK,MAAM;GACf,GAAI,OAAO,SAAS,WAAW,EAAE,QAAQ,OAAO,KAAK,IAAI,CAAC;EAC5D,IACA,KAAA;EACJ;EACA,UAAU;CACZ;AACF"}

package/dist/recipes/kabuki-devtools/scene/index.d.ts

@@ -0,0 +1,5 @@
+import { CARD, StateOption, WorkerKey, WorkerRow, WorkerStatus } from "./nodes.js";
+import { Beats, Said } from "./beats.js";
+import { Kind } from "./layout/layout.js";
+import { FOLD, Placed, PlacedState, STATE, Scene, sceneOf, stateId } from "./scene.js";
+export { type Beats, CARD, FOLD, type Kind, type Placed, type PlacedState, STATE, type Said, type Scene, type StateOption, type WorkerKey, type WorkerRow, type WorkerStatus, sceneOf, stateId };

package/dist/recipes/kabuki-devtools/scene/index.js

@@ -0,0 +1,3 @@
+import { CARD } from "./nodes.js";
+import { FOLD, STATE, sceneOf, stateId } from "./scene.js";
+export { CARD, FOLD, STATE, sceneOf, stateId };

package/dist/recipes/kabuki-devtools/scene/layout/index.d.ts

@@ -0,0 +1,3 @@
+import { Box, Branch, Label, Laid, Line } from "./shapes.js";
+import { Kind, layout } from "./layout.js";
+export { type Box, type Branch, type Kind, type Label, type Laid, type Line, layout };

package/dist/recipes/kabuki-devtools/scene/layout/index.js

@@ -0,0 +1,2 @@
+import { layout } from "./layout.js";
+export { layout };

package/dist/recipes/kabuki-devtools/scene/layout/layout.d.ts

@@ -0,0 +1,6 @@
+import { Branch, Laid } from "./shapes.js";
+//#region src/recipes/kabuki-devtools/scene/layout/layout.d.ts
+export type Kind = 'tree' | 'outline';
+export declare const layout: (root: Branch, kind: Kind) => Laid;
+//#endregion
+//# sourceMappingURL=layout.d.ts.map

package/dist/recipes/kabuki-devtools/scene/layout/layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout.d.ts","names":[],"sources":["../../../../../src/recipes/kabuki-devtools/scene/layout/layout.ts"],"mappings":";;YAUY;qBAEC,SAAM,MAAU,QAAM,MAAQ,SAAO"}

package/dist/recipes/kabuki-devtools/scene/layout/layout.js

@@ -0,0 +1,8 @@
+import { outline } from "./outline.js";
+import { packedTree } from "./tree.js";
+//#region src/recipes/kabuki-devtools/scene/layout/layout.ts
+const layout = (root, kind) => kind === "tree" ? packedTree(root) : outline(root);
+//#endregion
+export { layout };
+
+//# sourceMappingURL=layout.js.map

package/dist/recipes/kabuki-devtools/scene/layout/layout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout.js","names":[],"sources":["../../../../../src/recipes/kabuki-devtools/scene/layout/layout.ts"],"sourcesContent":["import { outline } from './outline.ts';\nimport type { Branch, Laid } from './shapes.ts';\nimport { packedTree } from './tree.ts';\n\n/*\n * Laying a tree of boxes out, one of two ways: a packed tree, top-down, or\n * an outline, indented. Both are pure, depend on the boxes alone, and give\n * placed boxes, the lines between them, and the labels on those lines.\n */\n\nexport type Kind = 'tree' | 'outline';\n\nexport const layout = (root: Branch, kind: Kind): Laid =>\n  kind === 'tree' ? packedTree(root) : outline(root);\n"],"mappings":";;;AAYA,MAAa,UAAU,MAAc,SACnC,SAAS,SAAS,WAAW,IAAI,IAAI,QAAQ,IAAI"}

package/dist/recipes/kabuki-devtools/scene/layout/outline.d.ts

@@ -0,0 +1,5 @@
+import { Branch, Laid } from "./shapes.js";
+//#region src/recipes/kabuki-devtools/scene/layout/outline.d.ts
+export declare const outline: (root: Branch) => Laid;
+//#endregion
+//# sourceMappingURL=outline.d.ts.map

package/dist/recipes/kabuki-devtools/scene/layout/outline.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"outline.d.ts","names":[],"sources":["../../../../../src/recipes/kabuki-devtools/scene/layout/outline.ts"],"mappings":";;qBAmBa,UAAO,MAAU,WAAS"}

package/dist/recipes/kabuki-devtools/scene/layout/outline.js

@@ -0,0 +1,84 @@
+import { curve } from "./shapes.js";
+//#region src/recipes/kabuki-devtools/scene/layout/outline.ts
+const INDENT = 28;
+const GAP = 10;
+const LABEL = 20;
+/** Where on a box its line arrives: level with its name. */
+const ARRIVE = 21;
+const outline = (root) => {
+	const boxes = /* @__PURE__ */ new Map();
+	const lines = [];
+	const labels = [];
+	let y = 0;
+	const visit = (branch, x, depth, parent) => {
+		boxes.set(branch.id, {
+			x,
+			y,
+			width: branch.width,
+			height: branch.height,
+			depth,
+			...parent ? { parent } : {}
+		});
+		const spine = {
+			x: x + 14,
+			y: y + branch.height
+		};
+		y += branch.height + GAP;
+		let group;
+		for (const { via, branch: child } of branch.children) {
+			if (via && via !== group?.via) {
+				const labelX = x + INDENT;
+				labels.push({
+					id: `${branch.id}:${via}`,
+					owner: branch.id,
+					text: via,
+					x: labelX,
+					y: y + LABEL / 2,
+					align: "start"
+				});
+				lines.push({
+					id: `${branch.id}->${via}`,
+					from: branch.id,
+					to: branch.id,
+					via,
+					d: curve(spine, {
+						x: labelX - 4,
+						y: y + LABEL / 2
+					}, "across")
+				});
+				group = {
+					via,
+					spine: {
+						x: labelX + 6,
+						y: y + LABEL
+					}
+				};
+				y += 25;
+			}
+			if (!via) group = void 0;
+			const from = group && via ? group.spine : spine;
+			const childX = from.x + INDENT - 14;
+			lines.push({
+				id: `${branch.id}->${child.id}`,
+				from: branch.id,
+				to: child.id,
+				...via ? { via } : {},
+				d: curve(from, {
+					x: childX,
+					y: y + ARRIVE
+				}, "across")
+			});
+			visit(child, childX, depth + 1, branch.id);
+		}
+	};
+	visit(root, 0, 0);
+	return {
+		boxes,
+		lines,
+		labels
+	};
+};
+//#endregion
+export { outline };
+
+//# sourceMappingURL=outline.js.map