@kestack/web-platform 0.0.0-stage → 0.0.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"outline.js","names":[],"sources":["../../../../../src/recipes/kabuki-devtools/scene/layout/outline.ts"],"sourcesContent":["import { curve } from './shapes.ts';\nimport type { Box, Branch, Label, Laid, Line } from './shapes.ts';\n\n/*\n * An outline, top to bottom, like a tree of files: one box under another,\n * each child indented under its parent, the root's top-left at 0, 0.\n *\n * 1. Rows    each box on its own row, in order.\n * 2. Groups  children led to by the same thing sit under one label row,\n *            indented once more; the rest straight under their parent.\n * 3. Lines   down a spine from each box, then across to each child or label.\n */\n\nconst INDENT = 28;\nconst GAP = 10;\nconst LABEL = 20;\n/** Where on a box its line arrives: level with its name. */\nconst ARRIVE = 21;\n\nexport const outline = (root: Branch): Laid => {\n  const boxes = new Map<string, Box>();\n  const lines: Line[] = [];\n  const labels: Label[] = [];\n  let y = 0;\n\n  const visit = (branch: Branch, x: number, depth: number, parent?: string) => {\n    // 1. Rows\n    boxes.set(branch.id, {\n      x,\n      y,\n      width: branch.width,\n      height: branch.height,\n      depth,\n      ...(parent ? { parent } : {}),\n    });\n    const spine = { x: x + 14, y: y + branch.height };\n    y += branch.height + GAP;\n\n    // 2. Groups\n    let group:\n      | { readonly via: string; readonly spine: { x: number; y: number } }\n      | undefined;\n    for (const { via, branch: child } of branch.children) {\n      if (via && via !== group?.via) {\n        const labelX = x + INDENT;\n        labels.push({\n          id: `${branch.id}:${via}`,\n          owner: branch.id,\n          text: via,\n          x: labelX,\n          y: y + LABEL / 2,\n          align: 'start',\n        });\n        lines.push({\n          id: `${branch.id}->${via}`,\n          from: branch.id,\n          to: branch.id,\n          via,\n          d: curve(spine, { x: labelX - 4, y: y + LABEL / 2 }, 'across'),\n        });\n        group = { via, spine: { x: labelX + 6, y: y + LABEL } };\n        y += LABEL + GAP / 2;\n      }\n      if (!via) group = undefined;\n      const from = group && via ? group.spine : spine;\n      const childX = from.x + INDENT - 14;\n      // 3. Lines\n      lines.push({\n        id: `${branch.id}->${child.id}`,\n        from: branch.id,\n        to: child.id,\n        ...(via ? { via } : {}),\n        d: curve(from, { x: childX, y: y + ARRIVE }, 'across'),\n      });\n      visit(child, childX, depth + 1, branch.id);\n    }\n  };\n  visit(root, 0, 0);\n  return { boxes, lines, labels };\n};\n"],"mappings":";;AAaA,MAAM,SAAS;AACf,MAAM,MAAM;AACZ,MAAM,QAAQ;;AAEd,MAAM,SAAS;AAEf,MAAa,WAAW,SAAuB;CAC7C,MAAM,wBAAQ,IAAI,IAAiB;CACnC,MAAM,QAAgB,CAAC;CACvB,MAAM,SAAkB,CAAC;CACzB,IAAI,IAAI;CAER,MAAM,SAAS,QAAgB,GAAW,OAAe,WAAoB;EAE3E,MAAM,IAAI,OAAO,IAAI;GACnB;GACA;GACA,OAAO,OAAO;GACd,QAAQ,OAAO;GACf;GACA,GAAI,SAAS,EAAE,OAAO,IAAI,CAAC;EAC7B,CAAC;EACD,MAAM,QAAQ;GAAE,GAAG,IAAI;GAAI,GAAG,IAAI,OAAO;EAAO;EAChD,KAAK,OAAO,SAAS;EAGrB,IAAI;EAGJ,KAAK,MAAM,EAAE,KAAK,QAAQ,WAAW,OAAO,UAAU;GACpD,IAAI,OAAO,QAAQ,OAAO,KAAK;IAC7B,MAAM,SAAS,IAAI;IACnB,OAAO,KAAK;KACV,IAAI,GAAG,OAAO,GAAG,GAAG;KACpB,OAAO,OAAO;KACd,MAAM;KACN,GAAG;KACH,GAAG,IAAI,QAAQ;KACf,OAAO;IACT,CAAC;IACD,MAAM,KAAK;KACT,IAAI,GAAG,OAAO,GAAG,IAAI;KACrB,MAAM,OAAO;KACb,IAAI,OAAO;KACX;KACA,GAAG,MAAM,OAAO;MAAE,GAAG,SAAS;MAAG,GAAG,IAAI,QAAQ;KAAE,GAAG,QAAQ;IAC/D,CAAC;IACD,QAAQ;KAAE;KAAK,OAAO;MAAE,GAAG,SAAS;MAAG,GAAG,IAAI;KAAM;IAAE;IACtD,KAAK;GACP;GACA,IAAI,CAAC,KAAK,QAAQ,KAAA;GAClB,MAAM,OAAO,SAAS,MAAM,MAAM,QAAQ;GAC1C,MAAM,SAAS,KAAK,IAAI,SAAS;GAEjC,MAAM,KAAK;IACT,IAAI,GAAG,OAAO,GAAG,IAAI,MAAM;IAC3B,MAAM,OAAO;IACb,IAAI,MAAM;IACV,GAAI,MAAM,EAAE,IAAI,IAAI,CAAC;IACrB,GAAG,MAAM,MAAM;KAAE,GAAG;KAAQ,GAAG,IAAI;IAAO,GAAG,QAAQ;GACvD,CAAC;GACD,MAAM,OAAO,QAAQ,QAAQ,GAAG,OAAO,EAAE;EAC3C;CACF;CACA,MAAM,MAAM,GAAG,CAAC;CAChB,OAAO;EAAE;EAAO;EAAO;CAAO;AAChC"}

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

@@ -0,0 +1,57 @@
+//#region src/recipes/kabuki-devtools/scene/layout/shapes.d.ts
+/** One box to lay out, and what hangs below it, each marked with what led there, if anything did. */
+export interface Branch {
+  readonly id: string;
+  readonly width: number;
+  readonly height: number;
+  readonly children: ReadonlyArray<{
+    readonly via?: string;
+    readonly branch: Branch;
+  }>;
+}
+/** A box's place: its top-left corner. */
+export interface Box {
+  readonly x: number;
+  readonly y: number;
+  readonly width: number;
+  readonly height: number;
+  readonly depth: number;
+  readonly parent?: string;
+}
+/** A line from one box to one below it, as SVG path data. */
+export interface Line {
+  readonly id: string;
+  readonly from: string;
+  readonly to: string;
+  readonly via?: string;
+  readonly d: string;
+}
+/** What led from a box to some below it, written on their lines. */
+export interface Label {
+  readonly id: string;
+  readonly owner: string;
+  readonly text: string;
+  readonly x: number;
+  readonly y: number;
+  /** Centred on its point, or starting from it. */
+  readonly align: 'middle' | 'start';
+}
+export interface Laid {
+  readonly boxes: ReadonlyMap<string, Box>;
+  readonly lines: ReadonlyArray<Line>;
+  readonly labels: ReadonlyArray<Label>;
+}
+type Point = {
+  readonly x: number;
+  readonly y: number;
+};
+/**
+ * A smooth curve from one point to another, as one cubic Bézier: leaving
+ * straight down and arriving straight down, or down a spine then across.
+ * Every line is the same four points, so one can turn into another.
+ */
+export declare const curve: (from: Point, to: Point, first?: 'down' | 'across') => string;
+/** The point a share `t` of the way along a curve, to write on it. */
+export declare const along: (from: Point, to: Point, t: number, first?: 'down' | 'across') => Point;
+//#endregion
+//# sourceMappingURL=shapes.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"shapes.d.ts","names":[],"sources":["../../../../../src/recipes/kabuki-devtools/scene/layout/shapes.ts"],"mappings":";;iBAMiB;WACN;WACA;WACA;WACA,UAAU;aACR;aACA,QAAQ;;;;iBAKJ;WACN;WACA;WACA;WACA;WACA;WACA;;;iBAIM;WACN;WACA;WACA;WACA;WACA;;;iBAIM;WACN;WACA;WACA;WACA;WACA;;WAEA;;iBAGM;WACN,OAAO,oBAAoB;WAC3B,OAAO,cAAc;WACrB,QAAQ,cAAc;;KAG5B;WAAmB;WAAoB;;;;;;;qBAmB/B,QAAK,MACV,OAAK,IACP,OAAK;;qBAQE,QAAK,MACV,OAAK,IACP,OAAK,WACA,8BAER"}

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

@@ -0,0 +1,38 @@
+//#region src/recipes/kabuki-devtools/scene/layout/shapes.ts
+/** How far down a curve leaves and arrives straight: half the drop. */
+const controls = (from, to, first) => first === "down" ? [{
+	x: from.x,
+	y: from.y + (to.y - from.y) / 2
+}, {
+	x: to.x,
+	y: to.y - (to.y - from.y) / 2
+}] : [{
+	x: from.x,
+	y: to.y
+}, {
+	x: from.x + (to.x - from.x) / 3,
+	y: to.y
+}];
+/**
+* A smooth curve from one point to another, as one cubic Bézier: leaving
+* straight down and arriving straight down, or down a spine then across.
+* Every line is the same four points, so one can turn into another.
+*/
+const curve = (from, to, first = "down") => {
+	const [a, b] = controls(from, to, first);
+	return `M ${from.x} ${from.y} C ${a.x} ${a.y} ${b.x} ${b.y} ${to.x} ${to.y}`;
+};
+/** The point a share `t` of the way along a curve, to write on it. */
+const along = (from, to, t, first = "down") => {
+	const [a, b] = controls(from, to, first);
+	const u = 1 - t;
+	const at = (p, q, r, s) => u * u * u * p + 3 * u * u * t * q + 3 * u * t * t * r + t * t * t * s;
+	return {
+		x: at(from.x, a.x, b.x, to.x),
+		y: at(from.y, a.y, b.y, to.y)
+	};
+};
+//#endregion
+export { along, curve };
+
+//# sourceMappingURL=shapes.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"shapes.js","names":[],"sources":["../../../../../src/recipes/kabuki-devtools/scene/layout/shapes.ts"],"sourcesContent":["/*\n * What both layouts take and give: boxes in, placed boxes, lines and their\n * labels out. Pure, and knows nothing of what the boxes stand for.\n */\n\n/** One box to lay out, and what hangs below it, each marked with what led there, if anything did. */\nexport interface Branch {\n  readonly id: string;\n  readonly width: number;\n  readonly height: number;\n  readonly children: ReadonlyArray<{\n    readonly via?: string;\n    readonly branch: Branch;\n  }>;\n}\n\n/** A box's place: its top-left corner. */\nexport interface Box {\n  readonly x: number;\n  readonly y: number;\n  readonly width: number;\n  readonly height: number;\n  readonly depth: number;\n  readonly parent?: string;\n}\n\n/** A line from one box to one below it, as SVG path data. */\nexport interface Line {\n  readonly id: string;\n  readonly from: string;\n  readonly to: string;\n  readonly via?: string;\n  readonly d: string;\n}\n\n/** What led from a box to some below it, written on their lines. */\nexport interface Label {\n  readonly id: string;\n  readonly owner: string;\n  readonly text: string;\n  readonly x: number;\n  readonly y: number;\n  /** Centred on its point, or starting from it. */\n  readonly align: 'middle' | 'start';\n}\n\nexport interface Laid {\n  readonly boxes: ReadonlyMap<string, Box>;\n  readonly lines: ReadonlyArray<Line>;\n  readonly labels: ReadonlyArray<Label>;\n}\n\ntype Point = { readonly x: number; readonly y: number };\n\n/** How far down a curve leaves and arrives straight: half the drop. */\nconst controls = (from: Point, to: Point, first: 'down' | 'across') =>\n  first === 'down'\n    ? ([\n        { x: from.x, y: from.y + (to.y - from.y) / 2 },\n        { x: to.x, y: to.y - (to.y - from.y) / 2 },\n      ] as const)\n    : ([\n        { x: from.x, y: to.y },\n        { x: from.x + (to.x - from.x) / 3, y: to.y },\n      ] as const);\n\n/**\n * A smooth curve from one point to another, as one cubic Bézier: leaving\n * straight down and arriving straight down, or down a spine then across.\n * Every line is the same four points, so one can turn into another.\n */\nexport const curve = (\n  from: Point,\n  to: Point,\n  first: 'down' | 'across' = 'down',\n) => {\n  const [a, b] = controls(from, to, first);\n  return `M ${from.x} ${from.y} C ${a.x} ${a.y} ${b.x} ${b.y} ${to.x} ${to.y}`;\n};\n\n/** The point a share `t` of the way along a curve, to write on it. */\nexport const along = (\n  from: Point,\n  to: Point,\n  t: number,\n  first: 'down' | 'across' = 'down',\n): Point => {\n  const [a, b] = controls(from, to, first);\n  const u = 1 - t;\n  const at = (p: number, q: number, r: number, s: number) =>\n    u * u * u * p + 3 * u * u * t * q + 3 * u * t * t * r + t * t * t * s;\n  return { x: at(from.x, a.x, b.x, to.x), y: at(from.y, a.y, b.y, to.y) };\n};\n"],"mappings":";;AAuDA,MAAM,YAAY,MAAa,IAAW,UACxC,UAAU,SACL,CACC;CAAE,GAAG,KAAK;CAAG,GAAG,KAAK,KAAK,GAAG,IAAI,KAAK,KAAK;AAAE,GAC7C;CAAE,GAAG,GAAG;CAAG,GAAG,GAAG,KAAK,GAAG,IAAI,KAAK,KAAK;AAAE,CAC3C,IACC,CACC;CAAE,GAAG,KAAK;CAAG,GAAG,GAAG;AAAE,GACrB;CAAE,GAAG,KAAK,KAAK,GAAG,IAAI,KAAK,KAAK;CAAG,GAAG,GAAG;AAAE,CAC7C;;;;;;AAON,MAAa,SACX,MACA,IACA,QAA2B,WACxB;CACH,MAAM,CAAC,GAAG,KAAK,SAAS,MAAM,IAAI,KAAK;CACvC,OAAO,KAAK,KAAK,EAAE,GAAG,KAAK,EAAE,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,GAAG,EAAE,EAAE,GAAG,EAAE,EAAE,GAAG,GAAG,EAAE,GAAG,GAAG;AAC3E;;AAGA,MAAa,SACX,MACA,IACA,GACA,QAA2B,WACjB;CACV,MAAM,CAAC,GAAG,KAAK,SAAS,MAAM,IAAI,KAAK;CACvC,MAAM,IAAI,IAAI;CACd,MAAM,MAAM,GAAW,GAAW,GAAW,MAC3C,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI;CACtE,OAAO;EAAE,GAAG,GAAG,KAAK,GAAG,EAAE,GAAG,EAAE,GAAG,GAAG,CAAC;EAAG,GAAG,GAAG,KAAK,GAAG,EAAE,GAAG,EAAE,GAAG,GAAG,CAAC;CAAE;AACxE"}

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

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

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

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

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

@@ -0,0 +1,146 @@
+import { along, curve } from "./shapes.js";
+//#region src/recipes/kabuki-devtools/scene/layout/tree.ts
+const GAP = 36;
+const DROP = 64;
+/** More leaves than this stack in a column. */
+const LEAVES = 4;
+const STACK_GAP = 32;
+const INDENT = 22;
+/** Deep enough that a stack keeps its column clear all the way down. */
+const DEEP = 64;
+const isStack = (branch) => branch.children.length > LEAVES && branch.children.every(({ branch: child }) => child.children.length === 0);
+const packedTree = (root) => {
+	const tallest = [];
+	const measure = (branch, depth, stacked) => {
+		if (!stacked) tallest[depth] = Math.max(tallest[depth] ?? 0, branch.height);
+		const stack = isStack(branch);
+		for (const { branch: child } of branch.children) measure(child, depth + 1, stack);
+	};
+	measure(root, 0, false);
+	const top = [0];
+	for (let depth = 1; depth <= tallest.length; depth++) top[depth] = top[depth - 1] + tallest[depth - 1] + DROP;
+	const shapes = /* @__PURE__ */ new Map();
+	const shape = (branch) => {
+		const half = branch.width / 2;
+		if (isStack(branch)) {
+			for (const { branch: child } of branch.children) shape(child);
+			const column = Math.max(...branch.children.map(({ branch: child }) => child.width));
+			const start = -half + INDENT;
+			const made = {
+				left: [-half, ...Array(DEEP).fill(start - INDENT)],
+				right: [half, ...Array(DEEP).fill(Math.max(half, start + column))],
+				offsets: branch.children.map(() => start),
+				stacked: true
+			};
+			shapes.set(branch.id, made);
+			return made;
+		}
+		const children = branch.children.map(({ branch: child }) => shape(child));
+		const offsets = [];
+		const left = [];
+		const right = [];
+		children.forEach((child, index) => {
+			let at = 0;
+			if (index > 0) {
+				for (let depth = 0; depth < child.left.length; depth++) if (right[depth] !== void 0) at = Math.max(at, right[depth] - child.left[depth] + GAP);
+			}
+			offsets.push(at);
+			child.left.forEach((edge, depth) => {
+				left[depth] = Math.min(left[depth] ?? Infinity, edge + at);
+				right[depth] = Math.max(right[depth] ?? -Infinity, child.right[depth] + at);
+			});
+		});
+		const centre = children.length ? (offsets[0] + offsets.at(-1)) / 2 : 0;
+		const made = {
+			left: [-half, ...left.map((edge) => edge - centre)],
+			right: [half, ...right.map((edge) => edge - centre)],
+			offsets: offsets.map((offset) => offset - centre),
+			stacked: false
+		};
+		shapes.set(branch.id, made);
+		return made;
+	};
+	shape(root);
+	const boxes = /* @__PURE__ */ new Map();
+	const lines = [];
+	const labels = [];
+	const place = (branch, centre, y, depth, parent) => {
+		const box = {
+			x: centre - branch.width / 2,
+			y,
+			width: branch.width,
+			height: branch.height,
+			depth,
+			...parent ? { parent } : {}
+		};
+		boxes.set(branch.id, box);
+		const { offsets, stacked } = shapes.get(branch.id);
+		const bottom = {
+			x: centre,
+			y: y + branch.height
+		};
+		let below = top[depth + 1] ?? y + branch.height + DROP;
+		branch.children.forEach(({ via, branch: child }, index) => {
+			if (stacked) {
+				const left = centre + offsets[index];
+				const spine = left - INDENT / 2;
+				place(child, left + child.width / 2, below, depth + 1, branch.id);
+				lines.push({
+					id: `${branch.id}->${child.id}`,
+					from: branch.id,
+					to: child.id,
+					...via ? { via } : {},
+					d: curve({
+						x: spine,
+						y: bottom.y
+					}, {
+						x: left,
+						y: below + 16
+					}, "across")
+				});
+				if (via) labels.push({
+					id: `${branch.id}->${child.id}:via`,
+					owner: branch.id,
+					text: via,
+					x: left,
+					y: below - 9,
+					align: "start"
+				});
+				below += child.height + STACK_GAP;
+				return;
+			}
+			const at = centre + offsets[index];
+			place(child, at, below, depth + 1, branch.id);
+			lines.push({
+				id: `${branch.id}->${child.id}`,
+				from: branch.id,
+				to: child.id,
+				...via ? { via } : {},
+				d: curve(bottom, {
+					x: at,
+					y: below
+				})
+			});
+			if (via) labels.push({
+				id: `${branch.id}->${child.id}:via`,
+				owner: branch.id,
+				text: via,
+				...along(bottom, {
+					x: at,
+					y: below
+				}, .78),
+				align: "middle"
+			});
+		});
+	};
+	place(root, 0, 0, 0);
+	return {
+		boxes,
+		lines,
+		labels
+	};
+};
+//#endregion
+export { packedTree };
+
+//# sourceMappingURL=tree.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tree.js","names":[],"sources":["../../../../../src/recipes/kabuki-devtools/scene/layout/tree.ts"],"sourcesContent":["import { along, curve } from './shapes.ts';\nimport type { Box, Branch, Label, Laid, Line } from './shapes.ts';\n\n/*\n * A packed tree, top-down: every row of boxes at one height, the root's top\n * centre at 0, 0.\n *\n * 1. Rows     each depth as tall as its tallest box.\n * 2. Pack     each subtree slides left until, at some depth, it would touch\n *             the one before it: so a subtree tucks under its neighbour's\n *             empty space, and a parent sits centred over its children.\n * 3. Stack    more than a few boxes with nothing below them hang in one\n *             column, down a spine, instead of one long row.\n * 4. Lines    a smooth curve down from each box to each below it, the label of\n *             what led there on the last stretch.\n */\n\nconst GAP = 36;\nconst DROP = 64;\n/** More leaves than this stack in a column. */\nconst LEAVES = 4;\nconst STACK_GAP = 32;\nconst INDENT = 22;\n/** Deep enough that a stack keeps its column clear all the way down. */\nconst DEEP = 64;\n\ninterface Shape {\n  /** The left and right edge at each depth below and including this box, from its centre. */\n  readonly left: number[];\n  readonly right: number[];\n  /** Each child's centre from this box's centre, or its left edge in a stack. */\n  readonly offsets: number[];\n  readonly stacked: boolean;\n}\n\nconst isStack = (branch: Branch) =>\n  branch.children.length > LEAVES &&\n  branch.children.every(({ branch: child }) => child.children.length === 0);\n\nexport const packedTree = (root: Branch): Laid => {\n  // 1. Rows\n  const tallest: number[] = [];\n  const measure = (branch: Branch, depth: number, stacked: boolean) => {\n    if (!stacked) tallest[depth] = Math.max(tallest[depth] ?? 0, branch.height);\n    const stack = isStack(branch);\n    for (const { branch: child } of branch.children)\n      measure(child, depth + 1, stack);\n  };\n  measure(root, 0, false);\n  const top: number[] = [0];\n  for (let depth = 1; depth <= tallest.length; depth++)\n    top[depth] = top[depth - 1]! + tallest[depth - 1]! + DROP;\n\n  // 2. Pack, and 3. Stack\n  const shapes = new Map<string, Shape>();\n  const shape = (branch: Branch): Shape => {\n    const half = branch.width / 2;\n    if (isStack(branch)) {\n      // A stacked leaf is placed like any box, so it needs a shape too.\n      for (const { branch: child } of branch.children) shape(child);\n      const column = Math.max(\n        ...branch.children.map(({ branch: child }) => child.width),\n      );\n      const start = -half + INDENT;\n      const made: Shape = {\n        left: [-half, ...Array<number>(DEEP).fill(start - INDENT)],\n        right: [\n          half,\n          ...Array<number>(DEEP).fill(Math.max(half, start + column)),\n        ],\n        offsets: branch.children.map(() => start),\n        stacked: true,\n      };\n      shapes.set(branch.id, made);\n      return made;\n    }\n    const children = branch.children.map(({ branch: child }) => shape(child));\n    const offsets: number[] = [];\n    const left: number[] = [];\n    const right: number[] = [];\n    children.forEach((child, index) => {\n      let at = 0;\n      if (index > 0)\n        for (let depth = 0; depth < child.left.length; depth++)\n          if (right[depth] !== undefined)\n            at = Math.max(at, right[depth]! - child.left[depth]! + GAP);\n      offsets.push(at);\n      child.left.forEach((edge, depth) => {\n        left[depth] = Math.min(left[depth] ?? Infinity, edge + at);\n        right[depth] = Math.max(\n          right[depth] ?? -Infinity,\n          child.right[depth]! + at,\n        );\n      });\n    });\n    const centre = children.length ? (offsets[0]! + offsets.at(-1)!) / 2 : 0;\n    const made: Shape = {\n      left: [-half, ...left.map((edge) => edge - centre)],\n      right: [half, ...right.map((edge) => edge - centre)],\n      offsets: offsets.map((offset) => offset - centre),\n      stacked: false,\n    };\n    shapes.set(branch.id, made);\n    return made;\n  };\n  shape(root);\n\n  // 4. Lines\n  const boxes = new Map<string, Box>();\n  const lines: Line[] = [];\n  const labels: Label[] = [];\n  const place = (\n    branch: Branch,\n    centre: number,\n    y: number,\n    depth: number,\n    parent?: string,\n  ) => {\n    const box: Box = {\n      x: centre - branch.width / 2,\n      y,\n      width: branch.width,\n      height: branch.height,\n      depth,\n      ...(parent ? { parent } : {}),\n    };\n    boxes.set(branch.id, box);\n    const { offsets, stacked } = shapes.get(branch.id)!;\n    const bottom = { x: centre, y: y + branch.height };\n    let below = top[depth + 1] ?? y + branch.height + DROP;\n    branch.children.forEach(({ via, branch: child }, index) => {\n      if (stacked) {\n        const left = centre + offsets[index]!;\n        const spine = left - INDENT / 2;\n        place(child, left + child.width / 2, below, depth + 1, branch.id);\n        lines.push({\n          id: `${branch.id}->${child.id}`,\n          from: branch.id,\n          to: child.id,\n          ...(via ? { via } : {}),\n          d: curve(\n            { x: spine, y: bottom.y },\n            { x: left, y: below + 16 },\n            'across',\n          ),\n        });\n        if (via)\n          labels.push({\n            id: `${branch.id}->${child.id}:via`,\n            owner: branch.id,\n            text: via,\n            x: left,\n            y: below - 9,\n            align: 'start',\n          });\n        below += child.height + STACK_GAP;\n        return;\n      }\n      const at = centre + offsets[index]!;\n      place(child, at, below, depth + 1, branch.id);\n      lines.push({\n        id: `${branch.id}->${child.id}`,\n        from: branch.id,\n        to: child.id,\n        ...(via ? { via } : {}),\n        d: curve(bottom, { x: at, y: below }),\n      });\n      if (via)\n        labels.push({\n          id: `${branch.id}->${child.id}:via`,\n          owner: branch.id,\n          text: via,\n          // On the curve, most of the way down, where it runs nearly straight.\n          ...along(bottom, { x: at, y: below }, 0.78),\n          align: 'middle',\n        });\n    });\n  };\n  place(root, 0, 0, 0);\n  return { boxes, lines, labels };\n};\n"],"mappings":"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"}

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

@@ -0,0 +1,67 @@
+import { Instance } from "@kestack/kabuki";
+//#region src/recipes/kabuki-devtools/scene/nodes.d.ts
+/** Whether a Worker key is running, finished or failed; `on` away from the live app, where only its Condition is known. */
+export type WorkerStatus = 'running' | 'finished' | 'failed' | 'on';
+/** One Worker key a Condition names now. */
+export interface WorkerKey {
+  /** Unique on the Map. */
+  readonly id: string;
+  /** `''` for the one Worker of a kind other than `each`. */
+  readonly key: string;
+  readonly instance: Instance;
+  readonly status: WorkerStatus;
+}
+/** One Worker an Actor has, written at its top or in one State, and the keys it runs now. */
+export interface WorkerRow {
+  readonly name: string;
+  /** The State it is written in; none at the top. */
+  readonly state?: string;
+  readonly keys: ReadonlyArray<WorkerKey>;
+}
+/** One State an Actor can be in, and how many of its Instances are in it. */
+export interface StateOption {
+  readonly tag: string;
+  readonly count: number;
+}
+export interface ActorNode {
+  readonly id: string;
+  readonly name: string;
+  /** A slot of keyed Children: one card for many Instances, showing one at a time. */
+  readonly many: boolean;
+  /** Every Instance at this place, under the Instances chosen above it. */
+  readonly instances: ReadonlyArray<Instance>;
+  /** The Instance a place of many shows: its State, its Workers, and what hangs below it. */
+  readonly chosen?: Instance;
+  /** Its States, in lines as the card draws them; none for an Actor without States. */
+  readonly states?: ReadonlyArray<ReadonlyArray<StateOption>>;
+  readonly workers: ReadonlyArray<WorkerRow>;
+  /** Its size, from the Actor alone. */
+  readonly width: number;
+  readonly height: number;
+}
+/** A Node with what hangs below it, each by the State that Invokes it, if one does. */
+export interface Item {
+  readonly node: ActorNode;
+  readonly children: ReadonlyArray<{
+    readonly via?: string;
+    readonly item: Item;
+  }>;
+}
+/** The card's measures, shared by the layout and the drawing so they always agree. */
+export declare const CARD: {
+  readonly pad: 10;
+  readonly header: 22;
+  readonly line: 22;
+  readonly row: 22;
+  readonly gap: 6;
+  readonly min: 168;
+  readonly max: 264;
+};
+/** A card's size and the lines its States fall into, from its Actor alone. */
+export declare const measure: (name: string, many: boolean, states: ReadonlyArray<string> | undefined, workers: ReadonlyArray<string>) => {
+  width: number;
+  height: number;
+  lines: string[][];
+};
+//#endregion
+//# sourceMappingURL=nodes.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nodes.d.ts","names":[],"sources":["../../../../src/recipes/kabuki-devtools/scene/nodes.ts"],"mappings":";;;YAcY;;iBAGK;;WAEN;;WAEA;WACA,UAAU;WACV,QAAQ;;;iBAIF;WACN;;WAEA;WACA,MAAM,cAAc;;;iBAId;WACN;WACA;;iBAGM;WACN;WACA;;WAEA;;WAEA,WAAW,cAAc;;WAEzB,SAAS;;WAET,SAAS,cAAc,cAAc;WACrC,SAAS,cAAc;;WAEvB;WACA;;;iBAIM;WACN,MAAM;WACN,UAAU;aACR;aACA,MAAM;;;;qBAKN;WACX;WACA;WACA;WACA;WACA;WACA;WACA;;;qBAOW,UAAO,cACN,eACC,QACL,mCAAiC,SAChC"}

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

@@ -0,0 +1,39 @@
+//#region src/recipes/kabuki-devtools/scene/nodes.ts
+/** The card's measures, shared by the layout and the drawing so they always agree. */
+const CARD = {
+	pad: 10,
+	header: 22,
+	line: 22,
+	row: 22,
+	gap: 6,
+	min: 168,
+	max: 264
+};
+const optionWidth = (tag, many) => 16 + tag.length * 6.6 + (many ? 22 : 0) + 12;
+/** A card's size and the lines its States fall into, from its Actor alone. */
+const measure = (name, many, states, workers) => {
+	const header = 24 + name.length * 7.4 + (many ? 92 : 0);
+	const rows = workers.reduce((widest, worker) => Math.max(widest, 16 + worker.length * 6.8 + 72), 0);
+	const inner = Math.min(CARD.max - CARD.pad * 2, Math.max(CARD.min - CARD.pad * 2, header, rows));
+	const lines = [];
+	let used = Infinity;
+	for (const tag of states ?? []) {
+		const width = optionWidth(tag, many);
+		if (used + width > inner) {
+			lines.push([]);
+			used = 0;
+		}
+		lines.at(-1).push(tag);
+		used += width;
+	}
+	const height = CARD.pad * 2 + CARD.header + (lines.length ? CARD.gap + lines.length * CARD.line : 0) + (workers.length ? CARD.gap + workers.length * CARD.row : 0);
+	return {
+		width: inner + CARD.pad * 2,
+		height,
+		lines
+	};
+};
+//#endregion
+export { CARD, measure };
+
+//# sourceMappingURL=nodes.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nodes.js","names":[],"sources":["../../../../src/recipes/kabuki-devtools/scene/nodes.ts"],"sourcesContent":["import type { Instance } from '@kestack/kabuki';\n\n/*\n * What the Map is made of, before it is laid out: one Node per place an\n * Actor can run, standing for every Instance there now.\n *\n * A Node is a card: its Actor's name, the States it can be in, as options,\n * and the Workers written in it, as rows. All three come from the Actor,\n * never the data, so a card's size never changes and the Map never moves:\n * the Snapshot only says how many Instances run there, which State each is\n * in, and which Worker keys run now.\n */\n\n/** Whether a Worker key is running, finished or failed; `on` away from the live app, where only its Condition is known. */\nexport type WorkerStatus = 'running' | 'finished' | 'failed' | 'on';\n\n/** One Worker key a Condition names now. */\nexport interface WorkerKey {\n  /** Unique on the Map. */\n  readonly id: string;\n  /** `''` for the one Worker of a kind other than `each`. */\n  readonly key: string;\n  readonly instance: Instance;\n  readonly status: WorkerStatus;\n}\n\n/** One Worker an Actor has, written at its top or in one State, and the keys it runs now. */\nexport interface WorkerRow {\n  readonly name: string;\n  /** The State it is written in; none at the top. */\n  readonly state?: string;\n  readonly keys: ReadonlyArray<WorkerKey>;\n}\n\n/** One State an Actor can be in, and how many of its Instances are in it. */\nexport interface StateOption {\n  readonly tag: string;\n  readonly count: number;\n}\n\nexport interface ActorNode {\n  readonly id: string;\n  readonly name: string;\n  /** A slot of keyed Children: one card for many Instances, showing one at a time. */\n  readonly many: boolean;\n  /** Every Instance at this place, under the Instances chosen above it. */\n  readonly instances: ReadonlyArray<Instance>;\n  /** The Instance a place of many shows: its State, its Workers, and what hangs below it. */\n  readonly chosen?: Instance;\n  /** Its States, in lines as the card draws them; none for an Actor without States. */\n  readonly states?: ReadonlyArray<ReadonlyArray<StateOption>>;\n  readonly workers: ReadonlyArray<WorkerRow>;\n  /** Its size, from the Actor alone. */\n  readonly width: number;\n  readonly height: number;\n}\n\n/** A Node with what hangs below it, each by the State that Invokes it, if one does. */\nexport interface Item {\n  readonly node: ActorNode;\n  readonly children: ReadonlyArray<{\n    readonly via?: string;\n    readonly item: Item;\n  }>;\n}\n\n/** The card's measures, shared by the layout and the drawing so they always agree. */\nexport const CARD = {\n  pad: 10,\n  header: 22,\n  line: 22,\n  row: 22,\n  gap: 6,\n  min: 168,\n  max: 264,\n} as const;\n\nconst optionWidth = (tag: string, many: boolean) =>\n  10 + 6 + tag.length * 6.6 + (many ? 22 : 0) + 12;\n\n/** A card's size and the lines its States fall into, from its Actor alone. */\nexport const measure = (\n  name: string,\n  many: boolean,\n  states: ReadonlyArray<string> | undefined,\n  workers: ReadonlyArray<string>,\n) => {\n  // A place of many has a switcher in its header.\n  const header = 16 + 8 + name.length * 7.4 + (many ? 92 : 0);\n  const rows = workers.reduce(\n    (widest, worker) => Math.max(widest, 16 + worker.length * 6.8 + 72),\n    0,\n  );\n  const inner = Math.min(\n    CARD.max - CARD.pad * 2,\n    Math.max(CARD.min - CARD.pad * 2, header, rows),\n  );\n  // States wrap into as many lines as they need inside the card's width.\n  const lines: string[][] = [];\n  let used = Infinity;\n  for (const tag of states ?? []) {\n    const width = optionWidth(tag, many);\n    if (used + width > inner) {\n      lines.push([]);\n      used = 0;\n    }\n    lines.at(-1)!.push(tag);\n    used += width;\n  }\n  const height =\n    CARD.pad * 2 +\n    CARD.header +\n    (lines.length ? CARD.gap + lines.length * CARD.line : 0) +\n    (workers.length ? CARD.gap + workers.length * CARD.row : 0);\n  return { width: inner + CARD.pad * 2, height, lines };\n};\n"],"mappings":";;AAmEA,MAAa,OAAO;CAClB,KAAK;CACL,QAAQ;CACR,MAAM;CACN,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;AACP;AAEA,MAAM,eAAe,KAAa,SAChC,KAAS,IAAI,SAAS,OAAO,OAAO,KAAK,KAAK;;AAGhD,MAAa,WACX,MACA,MACA,QACA,YACG;CAEH,MAAM,SAAS,KAAS,KAAK,SAAS,OAAO,OAAO,KAAK;CACzD,MAAM,OAAO,QAAQ,QAClB,QAAQ,WAAW,KAAK,IAAI,QAAQ,KAAK,OAAO,SAAS,MAAM,EAAE,GAClE,CACF;CACA,MAAM,QAAQ,KAAK,IACjB,KAAK,MAAM,KAAK,MAAM,GACtB,KAAK,IAAI,KAAK,MAAM,KAAK,MAAM,GAAG,QAAQ,IAAI,CAChD;CAEA,MAAM,QAAoB,CAAC;CAC3B,IAAI,OAAO;CACX,KAAK,MAAM,OAAO,UAAU,CAAC,GAAG;EAC9B,MAAM,QAAQ,YAAY,KAAK,IAAI;EACnC,IAAI,OAAO,QAAQ,OAAO;GACxB,MAAM,KAAK,CAAC,CAAC;GACb,OAAO;EACT;EACA,MAAM,GAAG,EAAE,CAAC,CAAE,KAAK,GAAG;EACtB,QAAQ;CACV;CACA,MAAM,SACJ,KAAK,MAAM,IACX,KAAK,UACJ,MAAM,SAAS,KAAK,MAAM,MAAM,SAAS,KAAK,OAAO,MACrD,QAAQ,SAAS,KAAK,MAAM,QAAQ,SAAS,KAAK,MAAM;CAC3D,OAAO;EAAE,OAAO,QAAQ,KAAK,MAAM;EAAG;EAAQ;CAAM;AACtD"}

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

@@ -0,0 +1,78 @@
+import { ActorNode } from "./nodes.js";
+import { Beats, Said } from "./beats.js";
+import { Box } from "./layout/shapes.js";
+import { Kind } from "./layout/layout.js";
+import { Statuses } from "./tree.js";
+import { ActorDefinition, Snapshot } from "@kestack/kabuki";
+//#region src/recipes/kabuki-devtools/scene/scene.d.ts
+export type Placed = ActorNode & Box & {
+  readonly lit: boolean;
+  /** Folded: what hangs right below it, by name, and how many places hide below in all. */
+  readonly folded?: {
+    readonly names: ReadonlyArray<string>;
+    readonly hidden: number;
+  };
+};
+/** The room a folded card's names take under it. */
+export declare const FOLD = 30;
+/** A State node: one State of a card that starts something. */
+export interface PlacedState extends Box {
+  readonly id: string;
+  /** The card it belongs to. */
+  readonly owner: string;
+  readonly tag: string;
+  /** The card's Instance is in it, so what it starts runs. */
+  readonly active: boolean;
+  readonly lit: boolean;
+  /** Not the one it is in: what it would start, by name, under it. */
+  readonly names?: ReadonlyArray<string>;
+}
+/** A State node's height, and its room for names when it is not the one. */
+export declare const STATE: {
+  readonly height: 26;
+  readonly names: 22;
+};
+/** The ID of a card's State node. */
+export declare const stateId: (owner: string, tag: string) => string;
+export interface Scene {
+  readonly nodes: ReadonlyArray<Placed>;
+  readonly lines: ReadonlyArray<{
+    readonly id: string;
+    readonly from: string;
+    readonly to: string;
+    readonly d: string;
+    readonly lit: boolean;
+  }>;
+  readonly labels: ReadonlyArray<{
+    readonly id: string;
+    readonly owner: string;
+    readonly text: string;
+    readonly x: number;
+    readonly y: number;
+    readonly align: 'middle' | 'start';
+    readonly lit: boolean;
+  }>;
+  /** The State nodes. */
+  readonly states: ReadonlyArray<PlacedState>;
+  readonly beats: Beats | undefined;
+  /** Where every Node sits, by ID. */
+  readonly at: ReadonlyMap<string, Placed>;
+  /** The live app's Workers are laid over it. */
+  readonly live: boolean;
+}
+export interface Shown {
+  readonly definition: ActorDefinition;
+  readonly snapshot: Snapshot;
+  /** The Step's Message; none for init. */
+  readonly said?: Said;
+  /** What the live app says of each Instance's Workers; none away from it. */
+  readonly statuses?: Statuses;
+  readonly layout?: Kind;
+  /** The Instance chosen at each place of many, by the place's ID. */
+  readonly chosen?: ReadonlyMap<string, string>;
+  /** The cards folded, by ID. */
+  readonly folded?: ReadonlySet<string>;
+}
+export declare const sceneOf: ({ definition, snapshot, said, statuses, layout: kind, chosen, folded }: Shown) => Scene;
+//#endregion
+//# sourceMappingURL=scene.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"scene.d.ts","names":[],"sources":["../../../../src/recipes/kabuki-devtools/scene/scene.ts"],"mappings":";;;;;;;YAwBY,SAAS,YACnB;WACW;;WAEA;aACE,OAAO;aACP;;;;qBAKF;;iBAGI,oBAAoB;WAC1B;;WAEA;WACA;;WAEA;WACA;;WAEA,QAAQ;;;qBAIN;WAAU;WAAY;;;qBAKtB,UAAO,eAAiB;iBAMpB;WACN,OAAO,cAAc;WACrB,OAAO;aACL;aACA;aACA;aACA;aACA;;WAEF,QAAQ;aACN;aACA;aACA;aACA;aACA;aACA;aACA;;;WAGF,QAAQ,cAAc;WACtB,OAAO;;WAEP,IAAI,oBAAoB;;WAExB;;iBAGM;WACN,YAAY;WACZ,UAAU;;WAEV,OAAO;;WAEP,WAAW;WACX,SAAS;;WAET,SAAS;;WAET,SAAS;;qBAyDP,YAAO,YAAA,UAAA,MAAA,UAAA,QAAA,MAAA,QAAA,UAQjB,UAAQ"}

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

@@ -0,0 +1,128 @@
+import { beatsOf } from "./beats.js";
+import { layout } from "./layout/layout.js";
+import { treeOf } from "./tree.js";
+//#region src/recipes/kabuki-devtools/scene/scene.ts
+/** The room a folded card's names take under it. */
+const FOLD = 30;
+/** A State node's height, and its room for names when it is not the one. */
+const STATE = {
+	height: 26,
+	names: 22
+};
+const stateWidth = (tag) => Math.max(72, 34 + tag.length * 7);
+/** The ID of a card's State node. */
+const stateId = (owner, tag) => `${owner}~${tag}`;
+/** The State a card's shown Instance is in. */
+const currentOf = (node) => (node.many ? node.chosen : node.instances[0])?.state._tag;
+const NOT_LIVE = () => void 0;
+const branchOf = ({ node, children }, folded) => {
+	if (folded.has(node.id) && children.length) return {
+		id: node.id,
+		width: node.width,
+		height: node.height + 30,
+		children: []
+	};
+	const current = currentOf(node);
+	const byState = /* @__PURE__ */ new Map();
+	for (const { via, item } of children) if (via) byState.set(via, [...byState.get(via) ?? [], item]);
+	const states = [...byState].map(([tag, items]) => ({ branch: tag === current ? {
+		id: stateId(node.id, tag),
+		width: stateWidth(tag),
+		height: STATE.height,
+		children: items.map((item) => ({ branch: branchOf(item, folded) }))
+	} : {
+		id: stateId(node.id, tag),
+		width: stateWidth(tag),
+		height: STATE.height + STATE.names,
+		children: []
+	} }));
+	return {
+		id: node.id,
+		width: node.width,
+		height: node.height,
+		children: [...states, ...children.filter(({ via }) => !via).map(({ item }) => ({ branch: branchOf(item, folded) }))]
+	};
+};
+/** How many places hang below an Item, at any depth. */
+const countBelow = (item) => item.children.reduce((sum, { item: child }) => sum + 1 + countBelow(child), 0);
+const sceneOf = ({ definition, snapshot, said, statuses, layout: kind = "tree", chosen, folded = /* @__PURE__ */ new Set() }) => {
+	const toward = said ? [said.envelope.destination, ..."instance" in said.envelope.source ? [said.envelope.source.instance] : []] : [];
+	const { tree, find } = treeOf(definition, snapshot, statuses ?? NOT_LIVE, chosen, toward);
+	const nodes = /* @__PURE__ */ new Map();
+	const items = /* @__PURE__ */ new Map();
+	const parents = /* @__PURE__ */ new Map();
+	const collect = (item) => {
+		nodes.set(item.node.id, item.node);
+		items.set(item.node.id, item);
+		for (const { item: child } of item.children) {
+			parents.set(child.node.id, item.node.id);
+			collect(child);
+		}
+	};
+	collect(tree);
+	const laid = layout(branchOf(tree, folded), kind);
+	const states = [];
+	for (const [id, box] of laid.boxes) {
+		if (nodes.has(id)) continue;
+		const owner = box.parent;
+		const node = nodes.get(owner);
+		const tag = id.slice(owner.length + 1);
+		const active = currentOf(node) === tag;
+		states.push({
+			...box,
+			id,
+			owner,
+			tag,
+			active,
+			lit: active && node.instances.length > 0,
+			...active ? {} : {
+				height: STATE.height,
+				names: items.get(owner).children.filter(({ via }) => via === tag).map(({ item }) => item.node.name)
+			}
+		});
+	}
+	const placed = [...laid.boxes].flatMap(([id, box]) => {
+		if (!nodes.has(id)) return [];
+		const node = nodes.get(id);
+		const item = items.get(id);
+		const fold = folded.has(id) && item.children.length ? {
+			folded: {
+				names: item.children.map(({ item: child }) => child.node.name),
+				hidden: countBelow(item)
+			},
+			height: box.height - 30
+		} : {};
+		return [{
+			...node,
+			...box,
+			lit: node.instances.length > 0,
+			...fold
+		}];
+	});
+	const at = new Map(placed.map((node) => [node.id, node]));
+	const stateAt = new Map(states.map((state) => [state.id, state]));
+	const lit = (id) => (at.get(id) ?? stateAt.get(id)).lit;
+	return {
+		nodes: placed,
+		states,
+		lines: laid.lines.map((line) => ({
+			id: line.id,
+			from: line.from,
+			to: line.to,
+			d: line.d,
+			lit: lit(line.from) && lit(line.to)
+		})),
+		labels: [],
+		beats: said && beatsOf(said, (id) => {
+			let place = find(id);
+			while (place && !at.has(place)) place = parents.get(place);
+			return place;
+		}),
+		at,
+		live: statuses !== void 0
+	};
+};
+//#endregion
+export { FOLD, STATE, sceneOf, stateId };
+
+//# sourceMappingURL=scene.js.map