@kestack/web-platform 0.0.0-stage → 0.0.0

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

@@ -0,0 +1,22 @@
+//#region src/recipes/kabuki-devtools/map/link/link.d.ts
+export declare function Link({ d, lit, shown, from, custom, still }: {
+  readonly d: string;
+  readonly lit: boolean;
+  /** How much of it shows: less when it is out of focus. */
+  readonly shown?: number;
+  /** The line it grows from and shrinks back to, from the Map as it is then: a point on the card it hangs from. */
+  readonly from?: (now: unknown) => string | undefined;
+  /** The Map as it is now, handed to `from`. */
+  readonly custom?: unknown;
+  readonly still?: boolean | null;
+}): import("react").JSX.Element;
+export declare function Via({ text, x, y, align, lit, shown }: {
+  readonly text: string;
+  readonly x: number;
+  readonly y: number;
+  readonly align: 'middle' | 'start';
+  readonly lit: boolean;
+  readonly shown?: number;
+}): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=link.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"link.d.ts","names":[],"sources":["../../../../../src/recipes/kabuki-devtools/map/link/link.tsx"],"mappings":";wBAiBgB,OACd,GACA,KACA,OACA,MACA,QACA;WAES;WACA;;WAEA;;WAEA,QAAQ;;WAER;WACA;oBACV,IAAA;wBAgCe,MACd,MACA,GACA,GACA,OACA,KACA;WAES;WACA;WACA;WACA;WACA;WACA;oBACV,IAAA"}

package/dist/recipes/kabuki-devtools/map/link/link.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 } from "motion/react";
+//#region src/recipes/kabuki-devtools/map/link/link.tsx
+function Link({ d, lit, shown = 1, from, custom, still = false }) {
+	const move = still ? { duration: 0 } : {
+		duration: .42,
+		ease: [
+			.32,
+			.72,
+			0,
+			1
+		]
+	};
+	return /* @__PURE__ */ jsx(motion.path, {
+		fill: "none",
+		strokeWidth: lit ? 1.5 : 1,
+		strokeDasharray: lit ? void 0 : "3 4",
+		variants: {
+			away: (now) => ({
+				d: from?.(now) ?? d,
+				opacity: 0,
+				transition: still ? { duration: 0 } : {
+					duration: .3,
+					ease: [
+						.65,
+						0,
+						.35,
+						1
+					]
+				}
+			}),
+			here: {
+				d,
+				opacity: shown,
+				transition: move
+			}
+		},
+		custom,
+		initial: "away",
+		animate: "here",
+		exit: "away",
+		style: {
+			stroke: lit ? ink("line-lit") : ink("line"),
+			transition: "stroke 200ms ease"
+		}
+	});
+}
+function Via({ text, x, y, align, lit, shown = 1 }) {
+	return /* @__PURE__ */ jsxs("span", {
+		className: cn("bg-background pointer-events-none absolute flex h-4 -translate-y-1/2 items-center gap-1 rounded-full px-1.5 text-[10px] whitespace-nowrap", align === "middle" && "-translate-x-1/2"),
+		style: {
+			left: x,
+			top: y,
+			opacity: shown,
+			color: lit ? ink("lit") : ink("dim"),
+			transition: "color 200ms ease, opacity 150ms ease, left 420ms cubic-bezier(0.32, 0.72, 0, 1), top 420ms cubic-bezier(0.32, 0.72, 0, 1)"
+		},
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "size-1.5 rounded-full border transition-colors duration-200",
+			style: {
+				borderColor: lit ? ink("active") : ink("dim"),
+				backgroundColor: lit ? ink("active") : "transparent"
+			}
+		}), text]
+	});
+}
+//#endregion
+export { Link, Via };
+
+//# sourceMappingURL=link.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"link.js","names":[],"sources":["../../../../../src/recipes/kabuki-devtools/map/link/link.tsx"],"sourcesContent":["import { motion } from 'motion/react';\nimport { cn } from '../../../../components/lib/utils.ts';\nimport { ink } from '../../ink/index.ts';\n\n/*\n * The lines of the Map, and what is written on them.\n *\n * 1. Link  a line from a Node to one below it, laid out already: solid and\n *          darker to something lit, dashed and faint to something dim.\n * 2. Via   the State that leads down a line, as a small option on it: filled\n *          while an Instance is in that State.\n *\n * Both all but fade out of focus. A line grows out of the card it hangs\n * from when what it leads to unfolds, and draws back into it on a fold.\n */\n\n// 1. Link\nexport function Link({\n  d,\n  lit,\n  shown = 1,\n  from,\n  custom,\n  still = false,\n}: {\n  readonly d: string;\n  readonly lit: boolean;\n  /** How much of it shows: less when it is out of focus. */\n  readonly shown?: number;\n  /** The line it grows from and shrinks back to, from the Map as it is then: a point on the card it hangs from. */\n  readonly from?: (now: unknown) => string | undefined;\n  /** The Map as it is now, handed to `from`. */\n  readonly custom?: unknown;\n  readonly still?: boolean | null;\n}) {\n  const move = still\n    ? { duration: 0 }\n    : ({ duration: 0.42, ease: [0.32, 0.72, 0, 1] } as const);\n  return (\n    <motion.path\n      fill=\"none\"\n      strokeWidth={lit ? 1.5 : 1}\n      strokeDasharray={lit ? undefined : '3 4'}\n      variants={{\n        away: (now: unknown) => ({\n          d: from?.(now) ?? d,\n          opacity: 0,\n          transition: still\n            ? { duration: 0 }\n            : { duration: 0.3, ease: [0.65, 0, 0.35, 1] },\n        }),\n        here: { d, opacity: shown, transition: move },\n      }}\n      custom={custom}\n      initial=\"away\"\n      animate=\"here\"\n      exit=\"away\"\n      style={{\n        stroke: lit ? ink('line-lit') : ink('line'),\n        transition: 'stroke 200ms ease',\n      }}\n    />\n  );\n}\n\n// 2. Via\nexport function Via({\n  text,\n  x,\n  y,\n  align,\n  lit,\n  shown = 1,\n}: {\n  readonly text: string;\n  readonly x: number;\n  readonly y: number;\n  readonly align: 'middle' | 'start';\n  readonly lit: boolean;\n  readonly shown?: number;\n}) {\n  return (\n    <span\n      className={cn(\n        'bg-background pointer-events-none absolute flex h-4 -translate-y-1/2 items-center gap-1 rounded-full px-1.5 text-[10px] whitespace-nowrap',\n        align === 'middle' && '-translate-x-1/2',\n      )}\n      style={{\n        left: x,\n        top: y,\n        opacity: shown,\n        color: lit ? ink('lit') : ink('dim'),\n        transition:\n          'color 200ms ease, opacity 150ms ease, left 420ms cubic-bezier(0.32, 0.72, 0, 1), top 420ms cubic-bezier(0.32, 0.72, 0, 1)',\n      }}\n    >\n      <span\n        className=\"size-1.5 rounded-full border transition-colors duration-200\"\n        style={{\n          borderColor: lit ? ink('active') : ink('dim'),\n          backgroundColor: lit ? ink('active') : 'transparent',\n        }}\n      />\n      {text}\n    </span>\n  );\n}\n"],"mappings":";;;;;AAiBA,SAAgB,KAAK,EACnB,GACA,KACA,QAAQ,GACR,MACA,QACA,QAAQ,SAWP;CACD,MAAM,OAAO,QACT,EAAE,UAAU,EAAE,IACb;EAAE,UAAU;EAAM,MAAM;GAAC;GAAM;GAAM;GAAG;EAAC;CAAE;CAChD,OACE,oBAAC,OAAO,MAAR;EACE,MAAK;EACL,aAAa,MAAM,MAAM;EACzB,iBAAiB,MAAM,KAAA,IAAY;EACnC,UAAU;GACR,OAAO,SAAkB;IACvB,GAAG,OAAO,GAAG,KAAK;IAClB,SAAS;IACT,YAAY,QACR,EAAE,UAAU,EAAE,IACd;KAAE,UAAU;KAAK,MAAM;MAAC;MAAM;MAAG;MAAM;KAAC;IAAE;GAChD;GACA,MAAM;IAAE;IAAG,SAAS;IAAO,YAAY;GAAK;EAC9C;EACQ;EACR,SAAQ;EACR,SAAQ;EACR,MAAK;EACL,OAAO;GACL,QAAQ,MAAM,IAAI,UAAU,IAAI,IAAI,MAAM;GAC1C,YAAY;EACd;CACD,CAAA;AAEL;AAGA,SAAgB,IAAI,EAClB,MACA,GACA,GACA,OACA,KACA,QAAQ,KAQP;CACD,OACE,qBAAC,QAAD;EACE,WAAW,GACT,6IACA,UAAU,YAAY,kBACxB;EACA,OAAO;GACL,MAAM;GACN,KAAK;GACL,SAAS;GACT,OAAO,MAAM,IAAI,KAAK,IAAI,IAAI,KAAK;GACnC,YACE;EACJ;EAZF,UAAA,CAcE,oBAAC,QAAD;GACE,WAAU;GACV,OAAO;IACL,aAAa,MAAM,IAAI,QAAQ,IAAI,IAAI,KAAK;IAC5C,iBAAiB,MAAM,IAAI,QAAQ,IAAI;GACzC;EACD,CAAA,GACA,IACG;;AAEV"}

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

@@ -0,0 +1,26 @@
+import { Scene } from "../scene/scene.js";
+import "../scene/index.js";
+import { Part } from "./node/node.js";
+import "./node/index.js";
+//#region src/recipes/kabuki-devtools/map/map.d.ts
+/** What a pick is: a card, maybe a part of it or one of its Instances; or the Step's Message. */
+export type Pick = {
+  readonly node: string;
+  readonly part?: Part;
+  readonly instance?: string;
+} | {
+  readonly message: true;
+};
+export declare function AppMap({ scene, picked, onPick, onChoose, onFold, dotted }: {
+  readonly scene: Scene;
+  readonly picked: Pick | undefined;
+  readonly onPick: (pick: Pick | undefined) => void;
+  /** Show another Instance at a place of many. */
+  readonly onChoose: (place: string, instance: string) => void;
+  /** Fold or unfold what hangs below a card. */
+  readonly onFold: (place: string) => void;
+  /** Dots under the Map. On by default. */
+  readonly dotted?: boolean;
+}): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=map.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"map.d.ts","names":[],"sources":["../../../../src/recipes/kabuki-devtools/map/map.tsx"],"mappings":";;;;;;YA0CY;WAEG;WACA,OAAO;WACP;;WAEA;;wBAiGC,SACd,OACA,QACA,QACA,UACA,QACA;WAES,OAAO;WACP,QAAQ;WACR,SAAS,MAAM;;WAEf,WAAW,eAAe;;WAE1B,SAAS;;WAET;oBACV,IAAA"}

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

@@ -0,0 +1,362 @@
+import { ink } from "../ink/ink.js";
+import { STATE } from "../scene/scene.js";
+import { Beat } from "./beat/beat.js";
+import { Canvas, ITEM, OWN } from "./canvas/canvas.js";
+import { Link, Via } from "./link/link.js";
+import { Node } from "./node/node.js";
+import { Popup } from "./popup/popup.js";
+import { createElement, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AnimatePresence, animate, motion, useReducedMotion } from "motion/react";
+import { ChevronDown } from "lucide-react";
+//#region src/recipes/kabuki-devtools/map/map.tsx
+/** How much of what is out of focus still shows. */
+const FADED = .16;
+/** A glide to a new place. */
+const MOVE = {
+	duration: .42,
+	ease: [
+		.32,
+		.72,
+		0,
+		1
+	]
+};
+/** Folding into a card. */
+const FOLDING = {
+	duration: .3,
+	ease: [
+		.65,
+		0,
+		.35,
+		1
+	]
+};
+/** What a node gone from the Map shrinks into, or one new to it grows out of: the nearest thing above it still on it. */
+const anchorOf = (now, parents, id) => {
+	for (let up = parents.get(id); up; up = parents.get(up)) {
+		const spot = now.get(up);
+		if (spot) return spot;
+	}
+};
+/** Where on the anchor a node shrinks to: the middle of its bottom edge. */
+const tuck = (now, parents, id, spot) => {
+	const anchor = anchorOf(now, parents, id);
+	return anchor ? {
+		x: anchor.x + anchor.width / 2 - spot.width / 2,
+		y: anchor.y + anchor.height - spot.height / 2
+	} : {
+		x: spot.x,
+		y: spot.y
+	};
+};
+/** A line drawn down to nothing at the anchor of what it leads to. */
+const pinched = (now, parents, to) => {
+	const anchor = anchorOf(now, parents, to);
+	if (!anchor) return void 0;
+	const x = anchor.x + anchor.width / 2;
+	const y = anchor.y + anchor.height;
+	return `M ${x} ${y} C ${x} ${y} ${x} ${y} ${x} ${y}`;
+};
+/** A no-op, shown: a short shake. */
+const shake = (element, still) => {
+	if (!element) return;
+	if (still) animate(element, { opacity: [
+		1,
+		.6,
+		1
+	] }, { duration: .3 });
+	else animate(element, { x: [
+		0,
+		-6,
+		6,
+		-4,
+		4,
+		-2,
+		0
+	] }, {
+		duration: .42,
+		ease: "easeInOut"
+	});
+};
+const boundsOf = (scene) => [...scene.nodes, ...scene.states].reduce((bounds, node) => ({
+	left: Math.min(bounds.left, node.x),
+	right: Math.max(bounds.right, node.x + node.width),
+	top: Math.min(bounds.top, node.y),
+	bottom: Math.max(bounds.bottom, node.y + node.height + ("folded" in node && node.folded ? 30 : 0) + ("names" in node && node.names ? STATE.names : 0))
+}), {
+	left: 0,
+	right: 0,
+	top: 0,
+	bottom: 0
+});
+/** The card picked, its way up to the root, and the cards right below it, through its State nodes. */
+const focusOf = (scene, parents, id) => {
+	if (!id || !scene.at.has(id)) return void 0;
+	const lit = /* @__PURE__ */ new Set([id]);
+	for (let up = parents.get(id); up; up = parents.get(up)) lit.add(up);
+	const below = (of) => [...scene.nodes, ...scene.states].filter((each) => parents.get(each.id) === of);
+	for (const child of below(id)) {
+		lit.add(child.id);
+		if (!scene.at.has(child.id)) for (const grand of below(child.id)) lit.add(grand.id);
+	}
+	return lit;
+};
+function AppMap({ scene, picked, onPick, onChoose, onFold, dotted }) {
+	const hasBelow = new Set(scene.lines.map((line) => line.from));
+	const { at, beats } = scene;
+	const still = useReducedMotion();
+	const pickedNode = picked && "node" in picked ? picked : void 0;
+	const spots = new Map([...scene.nodes, ...scene.states].map((each) => [each.id, each]));
+	const parents = useRef(/* @__PURE__ */ new Map()).current;
+	for (const node of scene.nodes) if (node.parent) parents.set(node.id, node.parent);
+	for (const state of scene.states) parents.set(state.id, state.owner);
+	const focus = focusOf(scene, parents, pickedNode?.node);
+	const shows = (id) => !focus || id !== void 0 && focus.has(id) ? 1 : FADED;
+	const holder = pickedNode ? at.get(pickedNode.node) : void 0;
+	const popup = holder?.many && holder.instances.length > 0 ? holder : void 0;
+	return /* @__PURE__ */ jsxs(Canvas, {
+		bounds: boundsOf(scene),
+		label: "Map of the app",
+		onTap: () => onPick(void 0),
+		...dotted === void 0 ? {} : { dotted },
+		children: [
+			/* @__PURE__ */ jsx("svg", {
+				className: "absolute top-0 left-0 overflow-visible",
+				width: 1,
+				height: 1,
+				"aria-hidden": true,
+				children: /* @__PURE__ */ jsx(AnimatePresence, {
+					custom: spots,
+					initial: false,
+					children: scene.lines.map((line) => /* @__PURE__ */ jsx(Link, {
+						d: line.d,
+						lit: line.lit,
+						shown: Math.min(shows(line.from), shows(line.to)),
+						from: (now) => pinched(now, parents, line.to),
+						custom: spots,
+						still
+					}, line.id))
+				})
+			}),
+			/* @__PURE__ */ jsx(AnimatePresence, {
+				initial: false,
+				children: scene.labels.map((label) => /* @__PURE__ */ jsx(motion.div, {
+					initial: { opacity: 0 },
+					animate: {
+						opacity: 1,
+						transition: { delay: still ? 0 : .2 }
+					},
+					exit: {
+						opacity: 0,
+						transition: { duration: .1 }
+					},
+					children: /* @__PURE__ */ jsx(Via, {
+						...label,
+						shown: shows(label.owner)
+					})
+				}, label.id))
+			}),
+			/* @__PURE__ */ jsxs(AnimatePresence, {
+				custom: spots,
+				initial: false,
+				children: [scene.states.map((state) => /* @__PURE__ */ createElement(motion.div, {
+					...ITEM,
+					key: state.id,
+					className: "absolute top-0 left-0",
+					custom: spots,
+					variants: {
+						away: (now) => ({
+							...tuck(now, parents, state.id, state),
+							opacity: 0,
+							scale: .6,
+							transition: still ? { duration: 0 } : FOLDING
+						}),
+						here: {
+							x: state.x,
+							y: state.y,
+							opacity: shows(state.id),
+							scale: 1,
+							transition: still ? { duration: 0 } : MOVE
+						}
+					},
+					initial: "away",
+					animate: "here",
+					exit: "away",
+					onContextMenu: (event) => shake(event.currentTarget.firstElementChild, still)
+				}, /* @__PURE__ */ jsx(StateNode, { state }))), scene.nodes.map((node) => {
+					const isPicked = pickedNode?.node === node.id;
+					return /* @__PURE__ */ createElement(motion.div, {
+						...ITEM,
+						key: node.id,
+						className: "absolute top-0 left-0",
+						custom: spots,
+						variants: {
+							away: (now) => ({
+								...tuck(now, parents, node.id, node),
+								opacity: 0,
+								scale: .6,
+								transition: still ? { duration: 0 } : FOLDING
+							}),
+							here: {
+								x: node.x,
+								y: node.y,
+								opacity: shows(node.id),
+								scale: 1,
+								transition: still ? { duration: 0 } : MOVE
+							}
+						},
+						initial: "away",
+						animate: "here",
+						exit: "away",
+						onContextMenu: (event) => {
+							event.preventDefault();
+							if (node.folded || hasBelow.has(node.id)) onFold(node.id);
+							else shake(event.currentTarget.querySelector("[data-shake]"), still);
+						},
+						style: { zIndex: isPicked ? 10 : void 0 }
+					}, /* @__PURE__ */ jsx(AnimatePresence, { children: node.folded && /* @__PURE__ */ jsx(motion.div, {
+						initial: {
+							opacity: 0,
+							y: -4
+						},
+						animate: {
+							opacity: 1,
+							y: 0,
+							transition: {
+								delay: still ? 0 : .22,
+								duration: .2
+							}
+						},
+						exit: {
+							opacity: 0,
+							transition: { duration: .1 }
+						},
+						children: /* @__PURE__ */ jsx(Folded, {
+							folded: node.folded,
+							width: node.width,
+							top: node.height,
+							onUnfold: () => onFold(node.id)
+						})
+					}, "folded") }), /* @__PURE__ */ jsx("div", {
+						"data-shake": true,
+						children: /* @__PURE__ */ jsx(Node, {
+							node,
+							picked: isPicked,
+							part: isPicked ? pickedNode?.part : void 0,
+							got: beats?.to === node.id,
+							onChoose: (instance) => onChoose(node.id, instance),
+							sentBy: beats?.send?.at === node.id ? beats.send.worker : void 0,
+							onPick: (part) => onPick(part === null ? void 0 : {
+								node: node.id,
+								...part ? { part } : {}
+							})
+						})
+					}));
+				})]
+			}),
+			beats && beats.to !== popup?.id && /* @__PURE__ */ jsx("div", {
+				...ITEM,
+				className: "absolute top-0 left-0 z-20",
+				style: {
+					opacity: Math.max(shows(beats.to), shows(beats.send?.at)),
+					transition: "opacity 150ms ease"
+				},
+				children: /* @__PURE__ */ jsx(Beat, {
+					beats,
+					where: (id) => at.get(id),
+					onPick: () => onPick({ message: true })
+				}, beats.key)
+			}),
+			popup && /* @__PURE__ */ createElement("div", {
+				...OWN,
+				...ITEM,
+				key: popup.id,
+				className: "absolute top-0 left-0 z-30",
+				style: { transform: `translate(${popup.x + popup.width + 12}px, ${popup.y}px)` }
+			}, /* @__PURE__ */ jsx(Popup, {
+				name: popup.name,
+				instances: popup.instances,
+				picked: pickedNode?.instance,
+				onPick: (instance) => {
+					onChoose(popup.id, instance);
+					onPick({
+						node: popup.id,
+						instance
+					});
+				}
+			}))
+		]
+	});
+}
+/** What a folded card hides, named under it: one click unfolds it. */
+function Folded({ folded, width, top, onUnfold }) {
+	const shown = folded.names.slice(0, 3);
+	const more = folded.hidden - shown.length;
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		onClick: onUnfold,
+		title: "Unfold",
+		className: "text-muted-foreground hover:text-foreground absolute flex items-center justify-center gap-1 text-[11px] transition-colors duration-150 outline-none focus-visible:ring-2",
+		style: {
+			top: top + 8,
+			left: 0,
+			width
+		},
+		children: [
+			/* @__PURE__ */ jsx(ChevronDown, { className: "size-3 shrink-0" }),
+			shown.map((name, index) => /* @__PURE__ */ jsx("span", {
+				className: "bg-background max-w-20 truncate rounded-md border border-dashed px-1.5 py-0.5",
+				children: name
+			}, `${name}-${index}`)),
+			more > 0 && /* @__PURE__ */ jsxs("span", {
+				className: "shrink-0 tabular-nums",
+				children: ["+", more]
+			})
+		]
+	});
+}
+/** One State of a card that starts something: lit and holding what it starts while the card is in it; faded and naming it otherwise. */
+function StateNode({ state }) {
+	return /* @__PURE__ */ jsxs("div", {
+		style: { width: state.width },
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center justify-center gap-1.5 rounded-full border px-2.5 text-[11.5px] whitespace-nowrap transition-[color,border-color,box-shadow,background-color] duration-200",
+			style: {
+				height: STATE.height,
+				...state.lit ? {
+					backgroundColor: ink("active-soft"),
+					borderColor: `color-mix(in oklch, ${ink("active")} 45%, transparent)`,
+					color: ink("lit"),
+					boxShadow: "0 1px 2px rgb(0 0 0 / 0.06), 0 4px 10px rgb(0 0 0 / 0.06)"
+				} : {
+					borderStyle: "dashed",
+					borderColor: ink("dim"),
+					color: ink("dim")
+				}
+			},
+			title: state.active ? `In ${state.tag}: what hangs below runs` : `Not in ${state.tag}: it would start ${state.names?.join(", ")}`,
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "size-1.5 shrink-0 rounded-full border",
+				style: {
+					borderColor: state.lit ? ink("active") : ink("dim"),
+					backgroundColor: state.lit ? ink("active") : "transparent"
+				}
+			}), /* @__PURE__ */ jsx("span", {
+				className: state.lit ? "font-medium" : void 0,
+				children: state.tag
+			})]
+		}), state.names && /* @__PURE__ */ jsx("p", {
+			className: "truncate text-center text-[10.5px]",
+			style: {
+				color: ink("dim"),
+				lineHeight: `${STATE.names}px`
+			},
+			children: state.names.join(", ")
+		})]
+	});
+}
+//#endregion
+export { AppMap };
+
+//# sourceMappingURL=map.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"map.js","names":[],"sources":["../../../../src/recipes/kabuki-devtools/map/map.tsx"],"sourcesContent":["import { useRef } from 'react';\nimport { ChevronDown } from 'lucide-react';\nimport {\n  AnimatePresence,\n  animate,\n  motion,\n  useReducedMotion,\n} from 'motion/react';\nimport { ink } from '../ink/index.ts';\nimport { FOLD, STATE } from '../scene/index.ts';\nimport type { Placed, PlacedState, Scene } from '../scene/index.ts';\nimport { Beat } from './beat/index.ts';\nimport { Canvas, ITEM, OWN } from './canvas/index.ts';\nimport type { Bounds } from './canvas/index.ts';\nimport { Link, Via } from './link/index.ts';\nimport { Node } from './node/index.ts';\nimport type { Part } from './node/index.ts';\nimport { Popup } from './popup/index.ts';\n\n/*\n * The Map: one Scene drawn on a Canvas. Cards move only when what hangs\n * below one changes: a Transition, or a fold.\n *\n * 1. Lines   under everything.\n * 2. Cards   one per place, its States and Workers on it; under it, a small\n *            node per State that starts something, the one it is in lit and\n *            holding what it starts, any other faded and naming it.\n * 3. Beats   over the cards, for each new Message.\n * 4. Focus   a picked card stays bright with its way up to the root and the\n *            cards right below it; the rest all but fades. A tap on the empty\n *            Map lets go.\n * 5. Popup   beside a picked place of keyed Children, its Instances, to pick\n *            one.\n * 6. Fold    a right click on a card folds what hangs below it into one\n *            row of names under it; a click on them, or another right\n *            click, unfolds it. What folds, or what a Transition stops,\n *            shrinks into what it hung from; what unfolds or starts grows\n *            out of it; the rest glides to its new place. Anything with\n *            nothing to fold shakes.\n */\n\n/** What a pick is: a card, maybe a part of it or one of its Instances; or the Step's Message. */\nexport type Pick =\n  | {\n      readonly node: string;\n      readonly part?: Part;\n      readonly instance?: string;\n    }\n  | { readonly message: true };\n\n/** How much of what is out of focus still shows. */\nconst FADED = 0.16;\n\n/** A glide to a new place. */\nconst MOVE = { duration: 0.42, ease: [0.32, 0.72, 0, 1] } as const;\n/** Folding into a card. */\nconst FOLDING = { duration: 0.3, ease: [0.65, 0, 0.35, 1] } as const;\n\n/** Anything placed on the Map: a card or a State node. */\ninterface Spot {\n  readonly x: number;\n  readonly y: number;\n  readonly width: number;\n  readonly height: number;\n}\ntype Spots = ReadonlyMap<string, Spot>;\n\n/** What everything hung from, ever: what is gone still knows where it hung. */\ntype Parents = ReadonlyMap<string, string>;\n\n/** What a node gone from the Map shrinks into, or one new to it grows out of: the nearest thing above it still on it. */\nconst anchorOf = (now: Spots, parents: Parents, id: string) => {\n  for (let up = parents.get(id); up; up = parents.get(up)) {\n    const spot = now.get(up);\n    if (spot) return spot;\n  }\n  return undefined;\n};\n\n/** Where on the anchor a node shrinks to: the middle of its bottom edge. */\nconst tuck = (now: Spots, parents: Parents, id: string, spot: Spot) => {\n  const anchor = anchorOf(now, parents, id);\n  return anchor\n    ? {\n        x: anchor.x + anchor.width / 2 - spot.width / 2,\n        y: anchor.y + anchor.height - spot.height / 2,\n      }\n    : { x: spot.x, y: spot.y };\n};\n\n/** A line drawn down to nothing at the anchor of what it leads to. */\nconst pinched = (now: Spots, parents: Parents, to: string) => {\n  const anchor = anchorOf(now, parents, to);\n  if (!anchor) return undefined;\n  const x = anchor.x + anchor.width / 2;\n  const y = anchor.y + anchor.height;\n  return `M ${x} ${y} C ${x} ${y} ${x} ${y} ${x} ${y}`;\n};\n\n/** A no-op, shown: a short shake. */\nconst shake = (element: Element | null, still: boolean | null) => {\n  if (!element) return;\n  if (still) animate(element, { opacity: [1, 0.6, 1] }, { duration: 0.3 });\n  else\n    animate(\n      element,\n      { x: [0, -6, 6, -4, 4, -2, 0] },\n      { duration: 0.42, ease: 'easeInOut' },\n    );\n};\n\nconst boundsOf = (scene: Scene): Bounds =>\n  [...scene.nodes, ...scene.states].reduce(\n    (bounds, node) => ({\n      left: Math.min(bounds.left, node.x),\n      right: Math.max(bounds.right, node.x + node.width),\n      top: Math.min(bounds.top, node.y),\n      bottom: Math.max(\n        bounds.bottom,\n        node.y +\n          node.height +\n          ('folded' in node && node.folded ? FOLD : 0) +\n          ('names' in node && node.names ? STATE.names : 0),\n      ),\n    }),\n    { left: 0, right: 0, top: 0, bottom: 0 },\n  );\n\n/** The card picked, its way up to the root, and the cards right below it, through its State nodes. */\nconst focusOf = (scene: Scene, parents: Parents, id: string | undefined) => {\n  if (!id || !scene.at.has(id)) return undefined;\n  const lit = new Set<string>([id]);\n  for (let up = parents.get(id); up; up = parents.get(up)) lit.add(up);\n  const below = (of: string) =>\n    [...scene.nodes, ...scene.states].filter(\n      (each) => parents.get(each.id) === of,\n    );\n  for (const child of below(id)) {\n    lit.add(child.id);\n    if (!scene.at.has(child.id))\n      for (const grand of below(child.id)) lit.add(grand.id);\n  }\n  return lit;\n};\n\nexport function AppMap({\n  scene,\n  picked,\n  onPick,\n  onChoose,\n  onFold,\n  dotted,\n}: {\n  readonly scene: Scene;\n  readonly picked: Pick | undefined;\n  readonly onPick: (pick: Pick | undefined) => void;\n  /** Show another Instance at a place of many. */\n  readonly onChoose: (place: string, instance: string) => void;\n  /** Fold or unfold what hangs below a card. */\n  readonly onFold: (place: string) => void;\n  /** Dots under the Map. On by default. */\n  readonly dotted?: boolean;\n}) {\n  const hasBelow = new Set(scene.lines.map((line) => line.from));\n  const { at, beats } = scene;\n  const still = useReducedMotion();\n  const pickedNode = picked && 'node' in picked ? picked : undefined;\n\n  // Where everything is now, and what everything ever hung from.\n  const spots: Spots = new Map<string, Spot>(\n    [...scene.nodes, ...scene.states].map((each) => [each.id, each]),\n  );\n  const parents = useRef(new Map<string, string>()).current;\n  for (const node of scene.nodes)\n    if (node.parent) parents.set(node.id, node.parent);\n  for (const state of scene.states) parents.set(state.id, state.owner);\n\n  // 4. Focus\n  const focus = focusOf(scene, parents, pickedNode?.node);\n  const shows = (id: string | undefined) =>\n    !focus || (id !== undefined && focus.has(id)) ? 1 : FADED;\n\n  // 5. Popup\n  const holder = pickedNode ? at.get(pickedNode.node) : undefined;\n  const popup =\n    holder?.many && holder.instances.length > 0 ? holder : undefined;\n\n  return (\n    <Canvas\n      bounds={boundsOf(scene)}\n      label=\"Map of the app\"\n      onTap={() => onPick(undefined)}\n      {...(dotted === undefined ? {} : { dotted })}\n    >\n      {/* 1. Lines */}\n      <svg\n        className=\"absolute top-0 left-0 overflow-visible\"\n        width={1}\n        height={1}\n        aria-hidden\n      >\n        <AnimatePresence custom={spots} initial={false}>\n          {scene.lines.map((line) => (\n            <Link\n              key={line.id}\n              d={line.d}\n              lit={line.lit}\n              shown={Math.min(shows(line.from), shows(line.to))}\n              from={(now) => pinched(now as Spots, parents, line.to)}\n              custom={spots}\n              still={still}\n            />\n          ))}\n        </AnimatePresence>\n      </svg>\n      <AnimatePresence initial={false}>\n        {scene.labels.map((label) => (\n          <motion.div\n            key={label.id}\n            initial={{ opacity: 0 }}\n            animate={{ opacity: 1, transition: { delay: still ? 0 : 0.2 } }}\n            exit={{ opacity: 0, transition: { duration: 0.1 } }}\n          >\n            <Via {...label} shown={shows(label.owner)} />\n          </motion.div>\n        ))}\n      </AnimatePresence>\n\n      {/* 2. Cards */}\n      <AnimatePresence custom={spots} initial={false}>\n        {scene.states.map((state) => (\n          <motion.div\n            {...ITEM}\n            key={state.id}\n            className=\"absolute top-0 left-0\"\n            custom={spots}\n            variants={{\n              away: (now: Spots) => ({\n                ...tuck(now, parents, state.id, state),\n                opacity: 0,\n                scale: 0.6,\n                transition: still ? { duration: 0 } : FOLDING,\n              }),\n              here: {\n                x: state.x,\n                y: state.y,\n                opacity: shows(state.id),\n                scale: 1,\n                transition: still ? { duration: 0 } : MOVE,\n              },\n            }}\n            initial=\"away\"\n            animate=\"here\"\n            exit=\"away\"\n            onContextMenu={(event) =>\n              shake(event.currentTarget.firstElementChild, still)\n            }\n          >\n            <StateNode state={state} />\n          </motion.div>\n        ))}\n        {scene.nodes.map((node) => {\n          const isPicked = pickedNode?.node === node.id;\n          return (\n            <motion.div\n              {...ITEM}\n              key={node.id}\n              className=\"absolute top-0 left-0\"\n              custom={spots}\n              variants={{\n                away: (now: Spots) => ({\n                  ...tuck(now, parents, node.id, node),\n                  opacity: 0,\n                  scale: 0.6,\n                  transition: still ? { duration: 0 } : FOLDING,\n                }),\n                here: {\n                  x: node.x,\n                  y: node.y,\n                  opacity: shows(node.id),\n                  scale: 1,\n                  transition: still ? { duration: 0 } : MOVE,\n                },\n              }}\n              initial=\"away\"\n              animate=\"here\"\n              exit=\"away\"\n              onContextMenu={(event) => {\n                event.preventDefault();\n                if (node.folded || hasBelow.has(node.id)) onFold(node.id);\n                else\n                  shake(\n                    event.currentTarget.querySelector('[data-shake]'),\n                    still,\n                  );\n              }}\n              style={{ zIndex: isPicked ? 10 : undefined }}\n            >\n              <AnimatePresence>\n                {node.folded && (\n                  <motion.div\n                    key=\"folded\"\n                    initial={{ opacity: 0, y: -4 }}\n                    animate={{\n                      opacity: 1,\n                      y: 0,\n                      transition: { delay: still ? 0 : 0.22, duration: 0.2 },\n                    }}\n                    exit={{ opacity: 0, transition: { duration: 0.1 } }}\n                  >\n                    <Folded\n                      folded={node.folded}\n                      width={node.width}\n                      top={node.height}\n                      onUnfold={() => onFold(node.id)}\n                    />\n                  </motion.div>\n                )}\n              </AnimatePresence>\n              <div data-shake>\n                <Node\n                  node={node}\n                  picked={isPicked}\n                  part={isPicked ? pickedNode?.part : undefined}\n                  got={beats?.to === node.id}\n                  onChoose={(instance) => onChoose(node.id, instance)}\n                  sentBy={\n                    beats?.send?.at === node.id ? beats.send.worker : undefined\n                  }\n                  onPick={(part) =>\n                    onPick(\n                      part === null\n                        ? undefined\n                        : { node: node.id, ...(part ? { part } : {}) },\n                    )\n                  }\n                />\n              </div>\n            </motion.div>\n          );\n        })}\n      </AnimatePresence>\n\n      {/* 3. Beats, over every card, the picked one too */}\n      {beats && beats.to !== popup?.id && (\n        <div\n          {...ITEM}\n          className=\"absolute top-0 left-0 z-20\"\n          style={{\n            opacity: Math.max(shows(beats.to), shows(beats.send?.at)),\n            transition: 'opacity 150ms ease',\n          }}\n        >\n          <Beat\n            key={beats.key}\n            beats={beats}\n            where={(id) => at.get(id)}\n            onPick={() => onPick({ message: true })}\n          />\n        </div>\n      )}\n\n      {/* 5. Popup */}\n      {popup && (\n        <div\n          {...OWN}\n          {...ITEM}\n          key={popup.id}\n          className=\"absolute top-0 left-0 z-30\"\n          style={{\n            transform: `translate(${popup.x + popup.width + 12}px, ${popup.y}px)`,\n          }}\n        >\n          <Popup\n            name={popup.name}\n            instances={popup.instances}\n            picked={pickedNode?.instance}\n            onPick={(instance) => {\n              onChoose(popup.id, instance);\n              onPick({ node: popup.id, instance });\n            }}\n          />\n        </div>\n      )}\n    </Canvas>\n  );\n}\n\n/** What a folded card hides, named under it: one click unfolds it. */\nfunction Folded({\n  folded,\n  width,\n  top,\n  onUnfold,\n}: {\n  readonly folded: NonNullable<Placed['folded']>;\n  readonly width: number;\n  readonly top: number;\n  readonly onUnfold: () => void;\n}) {\n  const shown = folded.names.slice(0, 3);\n  const more = folded.hidden - shown.length;\n  return (\n    <button\n      type=\"button\"\n      onClick={onUnfold}\n      title=\"Unfold\"\n      className=\"text-muted-foreground hover:text-foreground absolute flex items-center justify-center gap-1 text-[11px] transition-colors duration-150 outline-none focus-visible:ring-2\"\n      style={{ top: top + 8, left: 0, width }}\n    >\n      <ChevronDown className=\"size-3 shrink-0\" />\n      {shown.map((name, index) => (\n        <span\n          key={`${name}-${index}`}\n          className=\"bg-background max-w-20 truncate rounded-md border border-dashed px-1.5 py-0.5\"\n        >\n          {name}\n        </span>\n      ))}\n      {more > 0 && <span className=\"shrink-0 tabular-nums\">+{more}</span>}\n    </button>\n  );\n}\n\n/** One State of a card that starts something: lit and holding what it starts while the card is in it; faded and naming it otherwise. */\nfunction StateNode({ state }: { readonly state: PlacedState }) {\n  return (\n    <div style={{ width: state.width }}>\n      <div\n        className=\"flex items-center justify-center gap-1.5 rounded-full border px-2.5 text-[11.5px] whitespace-nowrap transition-[color,border-color,box-shadow,background-color] duration-200\"\n        style={{\n          height: STATE.height,\n          ...(state.lit\n            ? {\n                backgroundColor: ink('active-soft'),\n                borderColor: `color-mix(in oklch, ${ink('active')} 45%, transparent)`,\n                color: ink('lit'),\n                boxShadow:\n                  '0 1px 2px rgb(0 0 0 / 0.06), 0 4px 10px rgb(0 0 0 / 0.06)',\n              }\n            : {\n                borderStyle: 'dashed',\n                borderColor: ink('dim'),\n                color: ink('dim'),\n              }),\n        }}\n        title={\n          state.active\n            ? `In ${state.tag}: what hangs below runs`\n            : `Not in ${state.tag}: it would start ${state.names?.join(', ')}`\n        }\n      >\n        <span\n          className=\"size-1.5 shrink-0 rounded-full border\"\n          style={{\n            borderColor: state.lit ? ink('active') : ink('dim'),\n            backgroundColor: state.lit ? ink('active') : 'transparent',\n          }}\n        />\n        <span className={state.lit ? 'font-medium' : undefined}>\n          {state.tag}\n        </span>\n      </div>\n      {state.names && (\n        <p\n          className=\"truncate text-center text-[10.5px]\"\n          style={{ color: ink('dim'), lineHeight: `${STATE.names}px` }}\n        >\n          {state.names.join(', ')}\n        </p>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+import { Node, Part } from "./node.js";
+export { Node, type Part };

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

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

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

@@ -0,0 +1,25 @@
+import { Placed } from "../../scene/scene.js";
+import "../../scene/index.js";
+//#region src/recipes/kabuki-devtools/map/node/node.d.ts
+/** What part of a Node is picked. */
+export type Part = {
+  readonly state: string;
+} | {
+  readonly worker: string;
+} | undefined;
+export declare function Node({ node, picked, part, sentBy, got, onPick, onChoose }: {
+  readonly node: Placed;
+  /** The card is picked. */
+  readonly picked: boolean;
+  /** The part of it picked, if one is. */
+  readonly part: Part;
+  /** The Worker that Sent the Step's Message, if it is this Node's. */
+  readonly sentBy: string | undefined;
+  /** The Step's Message went to this card. */
+  readonly got?: boolean;
+  readonly onPick: (part: Part | null) => void;
+  /** Show another of a place of many's Instances. */
+  readonly onChoose?: (instance: string) => void;
+}): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=node.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"node.d.ts","names":[],"sources":["../../../../../src/recipes/kabuki-devtools/map/node/node.tsx"],"mappings":";;;;YAoCY;WACG;;WACA;;wBAsBC,OACd,MACA,QACA,MACA,QACA,KACA,QACA;WAES,MAAM;;WAEN;;WAEA,MAAM;;WAEN;;WAEA;WACA,SAAS,MAAM;;WAEf,YAAY;oBACtB,IAAA"}