@kestack/web-platform 0.0.0-stage → 0.0.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"kabuki-devtools.js","names":[],"sources":["../../../src/recipes/kabuki-devtools/kabuki-devtools.tsx"],"sourcesContent":["import { useMemo, useRef, useState } from 'react';\nimport type { ComponentProps } from 'react';\nimport { AnimatePresence } from 'motion/react';\nimport { handle, isRestore } from '@kestack/kabuki';\nimport type {\n  ActorDefinition,\n  Entry,\n  Instance,\n  Snapshot,\n} from '@kestack/kabuki';\nimport type { AppRuntime } from '@kestack/kabuki/react';\nimport { cn } from '#lib/utils';\nimport { INK } from './ink/index.ts';\nimport type { Tone } from './ink/index.ts';\nimport { AppMap } from './map/index.ts';\nimport type { Pick } from './map/index.ts';\nimport { sceneOf } from './scene/index.ts';\nimport type {\n  Kind,\n  Placed,\n  Said,\n  Scene,\n  WorkerKey,\n  WorkerStatus,\n} from './scene/index.ts';\nimport { Sheet } from './sheet/index.ts';\nimport { Timeline } from './timeline/index.ts';\n\n/*\n * The Inspector: the Step shown, drawn as a Map, with the Sheet and the\n * Timeline under it. It fills whatever holds it, and lays itself out by its\n * own width, not the screen's.\n *\n * 1. Scene     the Map of the Step shown, from the Actors and its Snapshot,\n *              with the live app's Workers laid over it when it is live.\n * 2. Pick      a card, a State or Worker on it, one of its Instances, or the\n *              Step's Message; a pick gone from the Step shown closes the\n *              Sheet.\n * 3. Sheet     what is picked, taken apart.\n * 4. Timeline  which Step is shown, and whether it is live.\n */\n\ntype Statuses = NonNullable<Parameters<typeof sceneOf>[0]['statuses']>;\n\n/*\n * The Kabuki devtools: the Inspector on a running app, from its\n * runtime (`App.useRuntime()`). It fills whatever holds it.\n *\n * 1. Steps     init, then every entry on the Branch shown: the Head's, or\n *              the one a Step shown from another Branch is on.\n * 2. Step      the Step shown is the app's own: picking one on the Timeline\n *              Time Travels the app, and going live comes back to the Head.\n *              Its Snapshot is replayed from the History; the Commands its\n *              Message asked for are worked out again from the Step before,\n *              once each.\n * 3. Workers   live and running, what each Instance's Workers are doing.\n */\nexport function KabukiDevtools({\n  runtime,\n  layout,\n  dotted,\n  className,\n}: {\n  /** The running app: `App.useRuntime()`. */\n  readonly runtime: AppRuntime;\n  /** How the Map is laid out: a packed tree, or an outline. */\n  readonly layout?: Kind;\n  /** Dots under the Map. On by default; off, a background given by `className` shows through. */\n  readonly dotted?: boolean;\n  /** Classes for its root, merged over its own: a see-through background over the app. */\n  readonly className?: string;\n}) {\n  const { history, branch, shown, running } = runtime;\n  const definition = history.actor.definition;\n\n  // 1. Steps\n  const steps =\n    typeof shown === 'number' && !branch.some((entry) => entry.id === shown)\n      ? history.branch(shown)\n      : branch;\n  const live = shown === null;\n  const at =\n    shown === null\n      ? steps.length\n      : shown === 'init'\n        ? 0\n        : steps.findIndex((entry) => entry.id === shown) + 1;\n  const entry = at === 0 ? undefined : steps[at - 1];\n\n  // 2. Step\n  // By the entry itself, not its id: ids start again in another runtime, or\n  // once the History is cleared.\n  const asked = useRef(new WeakMap<Entry, ReadonlyArray<unknown>>());\n  const commandsOf = (of: Entry) => {\n    const known = asked.current.get(of);\n    if (known) return known;\n    const commands = isRestore(of.message)\n      ? []\n      : handle(definition, history.snapshotAt(of.parent), of).commands;\n    asked.current.set(of, commands);\n    return commands;\n  };\n  const step = useMemo(\n    () => ({\n      snapshot: history.snapshotAt(entry?.id ?? null),\n      ...(entry\n        ? { said: { envelope: entry, commands: commandsOf(entry) } }\n        : {}),\n    }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- an entry never changes once written.\n    [history, entry],\n  );\n\n  return (\n    <Inspector\n      definition={definition}\n      step={step}\n      {...(layout ? { layout } : {})}\n      {...(className ? { className } : {})}\n      {...(dotted === undefined ? {} : { dotted })}\n      // 3. Workers\n      {...(live && running ? { statuses: runtime.workers } : {})}\n      timeline={{\n        steps: [\n          { id: 'init', label: 'init' },\n          ...steps.map((each) => ({\n            id: `${each.id}`,\n            label: each.message._tag,\n          })),\n        ],\n        shown: at,\n        live,\n        onShow: (index) =>\n          runtime.show(index === 0 ? 'init' : steps[index - 1]!.id),\n        onLive: () => runtime.show(null),\n      }}\n    />\n  );\n}\n\nexport function Inspector({\n  definition,\n  step,\n  statuses,\n  layout,\n  timeline,\n  dotted,\n  className,\n}: {\n  /** The root Actor's definition. */\n  readonly definition: ActorDefinition;\n  /** The Step shown: its Snapshot, and the Message that made it; none for init. */\n  readonly step: { readonly snapshot: Snapshot; readonly said?: Said };\n  /** What the live app says of each Instance's Workers, while the Step shown is live. */\n  readonly statuses?: Statuses;\n  /** How the Map is laid out: a packed tree, or an outline. */\n  readonly layout?: Kind;\n  readonly timeline: ComponentProps<typeof Timeline>;\n  /** Dots under the Map. On by default. */\n  readonly dotted?: boolean;\n  /** Classes for its root, merged over its own. */\n  readonly className?: string;\n}) {\n  const [picked, setPicked] = useState<Pick | undefined>(undefined);\n  const [chosen, setChosen] = useState<ReadonlyMap<string, string>>(\n    () => new Map(),\n  );\n  const [folded, setFolded] = useState<ReadonlySet<string>>(() => new Set());\n\n  // 1. Scene\n  const scene = useMemo(\n    () =>\n      sceneOf({\n        definition,\n        snapshot: step.snapshot,\n        ...(step.said ? { said: step.said } : {}),\n        ...(statuses ? { statuses } : {}),\n        ...(layout ? { layout } : {}),\n        chosen,\n        folded,\n      }),\n    [definition, step, statuses, layout, chosen, folded],\n  );\n\n  // 2. Pick and 3. Sheet\n  const sheet = picked && sheetOf(scene, picked);\n\n  return (\n    <div\n      className={cn(\n        '@container bg-background text-foreground relative flex h-full w-full flex-col overflow-clip',\n        className,\n      )}\n      style={INK}\n    >\n      <div className=\"relative flex min-h-0 flex-1 flex-col\">\n        <div className=\"relative min-h-0 flex-1\">\n          <AppMap\n            scene={scene}\n            {...(dotted === undefined ? {} : { dotted })}\n            picked={sheet ? picked : undefined}\n            onPick={setPicked}\n            onChoose={(place, instance) =>\n              setChosen((was) => new Map(was).set(place, instance))\n            }\n            onFold={(place) =>\n              setFolded((was) => {\n                const next = new Set(was);\n                if (!next.delete(place)) next.add(place);\n                return next;\n              })\n            }\n          />\n        </div>\n        <AnimatePresence>\n          {sheet && (\n            <Sheet\n              key=\"sheet\"\n              {...sheet}\n              onClose={() => setPicked(undefined)}\n            />\n          )}\n        </AnimatePresence>\n      </div>\n      {/* 4. Timeline */}\n      <Timeline {...timeline} />\n    </div>\n  );\n}\n\ntype SheetOf = Omit<ComponentProps<typeof Sheet>, 'onClose'>;\n\nconst dataOf = ({ _tag, ...data }: { readonly _tag: string }) => data;\nconst hasFields = (value: object) => Object.keys(value).length > 0;\nconst isEmpty = (value: unknown) =>\n  value !== null && typeof value === 'object' && !hasFields(value);\n\nconst TONE: Record<WorkerStatus, Tone> = {\n  running: 'running',\n  finished: 'dim',\n  failed: 'failed',\n  on: 'lit',\n};\n\nconst keyName = (name: string, key: WorkerKey) =>\n  key.key === '' ? name : `${name}#${key.key}`;\n\n/** Who Sent the Message, in words. */\nconst fromOf = ({ source, send }: NonNullable<Scene['beats']>) => {\n  switch (source.kind) {\n    case 'view':\n      return 'its View';\n    case 'command':\n      return `Command ${send?.by ?? source.name}`;\n    case 'worker':\n      return `Worker ${send?.by ?? source.name}`;\n    case 'provide':\n      return 'what it Provides';\n    case 'outside':\n      return 'outside the app';\n    case 'restore':\n      return 'a Restore';\n  }\n};\n\n/** What the Sheet shows of a pick, or nothing if it is not in this Step. */\nconst sheetOf = (scene: Scene, pick: Pick): SheetOf | undefined => {\n  if ('message' in pick) {\n    const beats = scene.beats;\n    if (!beats) return undefined;\n    return {\n      kind: 'Message',\n      tone: 'message',\n      title: beats.tag,\n      facts: [\n        {\n          label: 'To',\n          value: beats.to ? scene.at.get(beats.to)!.name : 'dropped',\n        },\n        { label: 'From', value: fromOf(beats) },\n        { label: 'Time', value: `${(beats.at / 1000).toFixed(2)}s` },\n      ],\n      sections: [\n        { title: 'Payload', value: beats.payload },\n        ...(beats.commands.length\n          ? [{ title: 'Commands asked for', value: beats.commands }]\n          : []),\n      ],\n    };\n  }\n\n  const node = scene.at.get(pick.node);\n  if (!node) return undefined;\n  const { part } = pick;\n  if (part && 'worker' in part)\n    return workerSheet(node, part.worker, scene.live);\n  if (part && 'state' in part) return stateSheet(node, part.state);\n\n  const one =\n    pick.instance !== undefined\n      ? node.instances.find((each) => each.id === pick.instance)\n      : !node.many\n        ? node.instances[0]\n        : undefined;\n  if (one) return instanceSheet(node.name, one);\n  if (node.instances.length === 0)\n    return {\n      kind: 'Actor',\n      tone: 'dim',\n      title: node.name,\n      facts: [{ label: 'Running', value: 'no Instance here at this Step' }],\n    };\n  return {\n    kind: 'Actor',\n    title: node.name,\n    facts: [\n      { label: 'Instances', value: node.instances.length },\n      ...(node.states\n        ? [\n            {\n              label: 'In each State',\n              value: node.states\n                .flat()\n                .map((option) => `${option.tag} ${option.count}`)\n                .join(' · '),\n            },\n          ]\n        : []),\n    ],\n  };\n};\n\n/** One Instance taken apart. */\nconst instanceSheet = (name: string, instance: Instance): SheetOf => {\n  const state = dataOf(instance.state);\n  return {\n    kind: 'Instance',\n    title: instance.key === undefined ? name : `${name}#${instance.key}`,\n    facts: [\n      { label: 'ID', value: instance.id },\n      ...(instance.state._tag === 'Single'\n        ? []\n        : [{ label: 'State', value: instance.state._tag }]),\n      ...(instance.key === undefined\n        ? []\n        : [{ label: 'Key', value: instance.key }]),\n    ],\n    sections: [\n      ...(isEmpty(instance.model)\n        ? []\n        : [{ title: 'Model', value: instance.model }]),\n      ...(hasFields(state)\n        ? [{ title: `State ${instance.state._tag}`, value: state }]\n        : []),\n      ...(instance.props === undefined\n        ? []\n        : [{ title: 'Props', value: instance.props }]),\n    ],\n  };\n};\n\n/** One State of a card: which Instances are in it, and its data if one is. */\nconst stateSheet = (node: Placed, tag: string): SheetOf => {\n  const inIt = node.instances.filter((each) => each.state._tag === tag);\n  const data = !node.many && inIt[0] ? dataOf(inIt[0].state) : {};\n  return {\n    kind: 'State',\n    tone: inIt.length ? 'active' : 'dim',\n    title: tag,\n    facts: [\n      { label: 'Of', value: node.name },\n      node.many\n        ? { label: 'Instances in it', value: inIt.length }\n        : {\n            label: 'Active',\n            value: inIt.length\n              ? 'yes'\n              : node.instances[0]\n                ? `no, it is in ${node.instances[0].state._tag}`\n                : 'not running at this Step',\n          },\n    ],\n    sections: hasFields(data) ? [{ title: 'Data', value: data }] : [],\n  };\n};\n\n/** One Worker of a card: where it is written, and each key it runs now. */\nconst workerSheet = (node: Placed, name: string, live: boolean): SheetOf => {\n  const row = node.workers.find((each) => each.name === name);\n  const keys = row?.keys ?? [];\n  return {\n    kind: 'Worker',\n    tone: keys.some((each) => each.status === 'failed')\n      ? 'failed'\n      : keys.length\n        ? 'running'\n        : 'dim',\n    title: name,\n    facts: [\n      { label: 'Of', value: node.name },\n      {\n        label: 'Written',\n        value: row?.state ? `in ${row.state}` : 'at its top',\n      },\n      { label: 'Keys on', value: keys.length || 'none' },\n    ],\n    rows: {\n      title: live ? 'Keys, live' : 'Keys on at this Step',\n      items: keys.map((key) => ({\n        label:\n          key.instance.key === undefined\n            ? keyName(name, key)\n            : `${keyName(name, key)} · ${key.instance.key}`,\n        detail: key.status,\n        tone: TONE[key.status],\n      })),\n    },\n  };\n};\n"],"mappings":"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"}

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

@@ -0,0 +1,13 @@
+import { Beats } from "../../scene/beats.js";
+import { Placed } from "../../scene/scene.js";
+import "../../scene/index.js";
+//#region src/recipes/kabuki-devtools/map/beat/beat.d.ts
+export declare function Beat({ beats, where, onPick }: {
+  readonly beats: Beats;
+  /** Where a card is drawn. */
+  readonly where: (id: string) => Placed | undefined;
+  /** Open the Message. */
+  readonly onPick: () => void;
+}): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=beat.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"beat.d.ts","names":[],"sources":["../../../../../src/recipes/kabuki-devtools/map/beat/beat.tsx"],"mappings":";;;;wBAgEgB,OACd,OACA,OACA;WAES,OAAO;;WAEP,QAAQ,eAAe;;WAEvB;oBACV,IAAA"}

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

@@ -0,0 +1,223 @@
+import { ink } from "../../ink/ink.js";
+import { CARD } from "../../scene/nodes.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { motion, useReducedMotion } from "motion/react";
+import { ArrowUpRight, Zap } from "lucide-react";
+//#region src/recipes/kabuki-devtools/map/beat/beat.tsx
+/** In from a card's right edge. */
+const INSET = 10;
+const OUT = [
+	.23,
+	1,
+	.32,
+	1
+];
+/** The cards' glide to a new place, which everything here rides with. */
+const MOVE = {
+	duration: .42,
+	ease: [
+		.32,
+		.72,
+		0,
+		1
+	]
+};
+/** Where on a card's right edge its name is, or one of its Worker's rows. */
+const edgeAt = (card, worker) => {
+	const name = card.y + CARD.pad + CARD.header / 2;
+	const index = worker ? card.workers.findIndex((row) => row.name === worker) : -1;
+	const states = card.states ? CARD.gap + card.states.length * CARD.line : 0;
+	return {
+		x: card.x + card.width,
+		y: index < 0 ? name : card.y + CARD.pad + CARD.header + states + CARD.gap + index * CARD.row + CARD.row / 2
+	};
+};
+/** From what Sent it to the name of the card it went to, out to the right. */
+const arrowOf = (from, to) => {
+	const side = Math.max(from.x, to.x) + (Math.abs(from.y - to.y) < 80 ? 30 : 52);
+	return `M ${from.x + 3} ${from.y} C ${side} ${from.y}, ${side} ${to.y}, ${to.x + 9} ${to.y}`;
+};
+function Beat({ beats, where, onPick }) {
+	const still = useReducedMotion();
+	const target = beats.to ? where(beats.to) : void 0;
+	const sent = beats.send ? where(beats.send.at) : void 0;
+	const from = beats.request ? where(beats.request.from) : void 0;
+	const anchor = target ? {
+		right: target.x + target.width,
+		top: target.y,
+		bottom: target.y + target.height
+	} : sent && {
+		right: sent.x + sent.width,
+		top: sent.y,
+		bottom: sent.y + sent.height
+	};
+	const start = sent && edgeAt(sent, beats.send?.worker);
+	const end = target && edgeAt(target);
+	const arrow = start && end && (start.x !== end.x || start.y !== end.y) ? {
+		start,
+		d: arrowOf(start, end)
+	} : void 0;
+	const landing = still ? 0 : arrow ? .3 : 0;
+	const enter = (delay) => still ? { initial: false } : {
+		initial: {
+			opacity: 0,
+			scale: .92
+		},
+		animate: {
+			opacity: 1,
+			scale: 1
+		},
+		transition: {
+			duration: .2,
+			ease: OUT,
+			delay
+		}
+	};
+	const ride = still ? { duration: 0 } : MOVE;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "pointer-events-none absolute top-0 left-0",
+		children: [arrow && /* @__PURE__ */ jsxs("svg", {
+			className: "absolute top-0 left-0 overflow-visible",
+			width: 1,
+			height: 1,
+			"aria-hidden": true,
+			children: [
+				/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("marker", {
+					id: `kabuki-arrow-${beats.key}`,
+					viewBox: "0 0 8 8",
+					refX: "6",
+					refY: "4",
+					markerWidth: "7",
+					markerHeight: "7",
+					orient: "auto-start-reverse",
+					children: /* @__PURE__ */ jsx("path", {
+						d: "M 0 0 L 8 4 L 0 8 z",
+						style: { fill: ink("message") }
+					})
+				}) }),
+				/* @__PURE__ */ jsx(motion.circle, {
+					r: 3,
+					style: { fill: ink("message") },
+					initial: {
+						cx: arrow.start.x,
+						cy: arrow.start.y,
+						scale: still ? 1 : 0
+					},
+					animate: {
+						cx: arrow.start.x,
+						cy: arrow.start.y,
+						scale: 1
+					},
+					transition: {
+						cx: ride,
+						cy: ride,
+						scale: {
+							duration: .15,
+							ease: OUT
+						}
+					}
+				}),
+				/* @__PURE__ */ jsx(motion.path, {
+					fill: "none",
+					strokeWidth: 1.75,
+					strokeLinecap: "round",
+					style: { stroke: ink("message") },
+					markerEnd: `url(#kabuki-arrow-${beats.key})`,
+					initial: {
+						d: arrow.d,
+						pathLength: still ? 1 : 0
+					},
+					animate: {
+						d: arrow.d,
+						pathLength: 1
+					},
+					transition: {
+						d: ride,
+						pathLength: {
+							duration: .45,
+							ease: OUT,
+							delay: .05
+						}
+					}
+				})
+			]
+		}), anchor && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(motion.div, {
+			className: "absolute top-0 left-0",
+			initial: {
+				x: anchor.right - INSET,
+				y: anchor.top
+			},
+			animate: {
+				x: anchor.right - INSET,
+				y: anchor.top
+			},
+			transition: ride,
+			children: /* @__PURE__ */ jsxs(motion.button, {
+				type: "button",
+				onClick: onPick,
+				className: "pointer-events-auto flex h-[22px] origin-right items-center gap-1.5 rounded-full border pr-2.5 pl-2 text-[11px] whitespace-nowrap shadow-xs outline-none focus-visible:ring-2",
+				style: {
+					translate: "-100% -50%",
+					backgroundColor: ink("message-soft"),
+					borderColor: `color-mix(in oklch, ${ink("message")} 30%, transparent)`
+				},
+				...enter(landing),
+				children: [
+					from ? /* @__PURE__ */ jsx(ArrowUpRight, {
+						className: "size-3",
+						style: { color: ink("message") }
+					}) : /* @__PURE__ */ jsx("span", {
+						className: "size-1.5 rounded-full",
+						style: { backgroundColor: ink("message") }
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "font-medium",
+						style: { color: ink("message") },
+						children: beats.tag
+					}),
+					beats.send && /* @__PURE__ */ jsxs("span", {
+						className: "text-muted-foreground",
+						children: [
+							from ? "asked by" : "from",
+							" ",
+							beats.send.by
+						]
+					}),
+					!beats.to && /* @__PURE__ */ jsx("span", {
+						className: "text-muted-foreground",
+						children: "· dropped"
+					})
+				]
+			})
+		}), beats.commands.length > 0 && /* @__PURE__ */ jsx(motion.div, {
+			className: "absolute top-0 left-0",
+			initial: {
+				x: anchor.right - INSET,
+				y: anchor.bottom
+			},
+			animate: {
+				x: anchor.right - INSET,
+				y: anchor.bottom
+			},
+			transition: ride,
+			children: /* @__PURE__ */ jsx("div", {
+				className: "flex flex-row-reverse gap-1",
+				style: { translate: "-100% -50%" },
+				children: beats.commands.map((command, index) => /* @__PURE__ */ jsxs(motion.span, {
+					className: "flex h-5 origin-top items-center gap-1 rounded-full border px-2 font-mono text-[10.5px] whitespace-nowrap",
+					style: {
+						backgroundColor: ink("command-soft"),
+						borderColor: `color-mix(in oklch, ${ink("command")} 35%, transparent)`,
+						color: ink("command")
+					},
+					...enter(landing + .12 + index * .05),
+					children: [/* @__PURE__ */ jsx(Zap, { className: "size-2.5" }), command.name]
+				}, `${command.name}-${index}`))
+			})
+		})] })]
+	});
+}
+//#endregion
+export { Beat };
+
+//# sourceMappingURL=beat.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"beat.js","names":[],"sources":["../../../../../src/recipes/kabuki-devtools/map/beat/beat.tsx"],"sourcesContent":["import { motion, useReducedMotion } from 'motion/react';\nimport { ArrowUpRight, Zap } from 'lucide-react';\nimport { ink } from '../../ink/index.ts';\nimport { CARD } from '../../scene/index.ts';\nimport type { Beats, Placed } from '../../scene/index.ts';\n\n/*\n * The Beats of a Step, laid over the Map, played again for each new Message.\n *\n * 1. Send     the Message's tag sits on the top edge of the card it went\n *             to, with who Sent it. A Worker that Sent it has its row lit.\n * 2. Arrow    an arrow draws itself from exactly what Sent it, the Worker's\n *             row or the Sender's name, out to the right and into the name\n *             of the card it went to: across cards for a Request, a small\n *             loop for a Worker Sending to its own Instance.\n * 3. Command  one chip per Command the Update asked for, on the card's\n *             bottom edge.\n *\n * Each sits on its own card's edges, so it never covers another card.\n *\n * The arrow draws itself, the tag lands as it arrives, the Commands after.\n * When the cards move, a fold say, all of it glides with them. With reduced\n * motion it is simply there.\n */\n\n/** In from a card's right edge. */\nconst INSET = 10;\n\nconst OUT = [0.23, 1, 0.32, 1] as const;\n/** The cards' glide to a new place, which everything here rides with. */\nconst MOVE = { duration: 0.42, ease: [0.32, 0.72, 0, 1] } as const;\n\n/** Where on a card's right edge its name is, or one of its Worker's rows. */\nconst edgeAt = (card: Placed, worker?: string) => {\n  const name = card.y + CARD.pad + CARD.header / 2;\n  const index = worker\n    ? card.workers.findIndex((row) => row.name === worker)\n    : -1;\n  const states = card.states ? CARD.gap + card.states.length * CARD.line : 0;\n  return {\n    x: card.x + card.width,\n    y:\n      index < 0\n        ? name\n        : card.y +\n          CARD.pad +\n          CARD.header +\n          states +\n          CARD.gap +\n          index * CARD.row +\n          CARD.row / 2,\n  };\n};\n\n/** From what Sent it to the name of the card it went to, out to the right. */\nconst arrowOf = (\n  from: { x: number; y: number },\n  to: { x: number; y: number },\n) => {\n  const side =\n    Math.max(from.x, to.x) + (Math.abs(from.y - to.y) < 80 ? 30 : 52);\n  return `M ${from.x + 3} ${from.y} C ${side} ${from.y}, ${side} ${to.y}, ${to.x + 9} ${to.y}`;\n};\n\nexport function Beat({\n  beats,\n  where,\n  onPick,\n}: {\n  readonly beats: Beats;\n  /** Where a card is drawn. */\n  readonly where: (id: string) => Placed | undefined;\n  /** Open the Message. */\n  readonly onPick: () => void;\n}) {\n  const still = useReducedMotion();\n  const target = beats.to ? where(beats.to) : undefined;\n  const sent = beats.send ? where(beats.send.at) : undefined;\n  const from = beats.request ? where(beats.request.from) : undefined;\n  const anchor = target\n    ? {\n        right: target.x + target.width,\n        top: target.y,\n        bottom: target.y + target.height,\n      }\n    : sent && {\n        right: sent.x + sent.width,\n        top: sent.y,\n        bottom: sent.y + sent.height,\n      };\n  // An arrow wherever its start is not already the name it ends at.\n  const start = sent && edgeAt(sent, beats.send?.worker);\n  const end = target && edgeAt(target);\n  const arrow =\n    start && end && (start.x !== end.x || start.y !== end.y)\n      ? { start, d: arrowOf(start, end) }\n      : undefined;\n  // The arrow draws itself; the tag lands as it arrives; the Commands after.\n  const landing = still ? 0 : arrow ? 0.3 : 0;\n  const enter = (delay: number) =>\n    still\n      ? { initial: false as const }\n      : {\n          initial: { opacity: 0, scale: 0.92 },\n          animate: { opacity: 1, scale: 1 },\n          transition: { duration: 0.2, ease: OUT, delay },\n        };\n  // Everything rides with the cards when the Map moves.\n  const ride = still ? { duration: 0 } : MOVE;\n\n  return (\n    <div className=\"pointer-events-none absolute top-0 left-0\">\n      {/* 2. Arrow */}\n      {arrow && (\n        <svg\n          className=\"absolute top-0 left-0 overflow-visible\"\n          width={1}\n          height={1}\n          aria-hidden\n        >\n          <defs>\n            <marker\n              id={`kabuki-arrow-${beats.key}`}\n              viewBox=\"0 0 8 8\"\n              refX=\"6\"\n              refY=\"4\"\n              markerWidth=\"7\"\n              markerHeight=\"7\"\n              orient=\"auto-start-reverse\"\n            >\n              <path d=\"M 0 0 L 8 4 L 0 8 z\" style={{ fill: ink('message') }} />\n            </marker>\n          </defs>\n          <motion.circle\n            r={3}\n            style={{ fill: ink('message') }}\n            initial={{\n              cx: arrow.start.x,\n              cy: arrow.start.y,\n              scale: still ? 1 : 0,\n            }}\n            animate={{ cx: arrow.start.x, cy: arrow.start.y, scale: 1 }}\n            transition={{\n              cx: ride,\n              cy: ride,\n              scale: { duration: 0.15, ease: OUT },\n            }}\n          />\n          <motion.path\n            fill=\"none\"\n            strokeWidth={1.75}\n            strokeLinecap=\"round\"\n            style={{ stroke: ink('message') }}\n            markerEnd={`url(#kabuki-arrow-${beats.key})`}\n            initial={{ d: arrow.d, pathLength: still ? 1 : 0 }}\n            animate={{ d: arrow.d, pathLength: 1 }}\n            transition={{\n              d: ride,\n              pathLength: { duration: 0.45, ease: OUT, delay: 0.05 },\n            }}\n          />\n        </svg>\n      )}\n\n      {anchor && (\n        <>\n          <motion.div\n            className=\"absolute top-0 left-0\"\n            initial={{ x: anchor.right - INSET, y: anchor.top }}\n            animate={{ x: anchor.right - INSET, y: anchor.top }}\n            transition={ride}\n          >\n            {/* 1. Send */}\n            <motion.button\n              type=\"button\"\n              onClick={onPick}\n              className=\"pointer-events-auto flex h-[22px] origin-right items-center gap-1.5 rounded-full border pr-2.5 pl-2 text-[11px] whitespace-nowrap shadow-xs outline-none focus-visible:ring-2\"\n              style={{\n                translate: '-100% -50%',\n                backgroundColor: ink('message-soft'),\n                borderColor: `color-mix(in oklch, ${ink('message')} 30%, transparent)`,\n              }}\n              {...enter(landing)}\n            >\n              {from ? (\n                <ArrowUpRight\n                  className=\"size-3\"\n                  style={{ color: ink('message') }}\n                />\n              ) : (\n                <span\n                  className=\"size-1.5 rounded-full\"\n                  style={{ backgroundColor: ink('message') }}\n                />\n              )}\n              <span className=\"font-medium\" style={{ color: ink('message') }}>\n                {beats.tag}\n              </span>\n              {beats.send && (\n                <span className=\"text-muted-foreground\">\n                  {from ? 'asked by' : 'from'} {beats.send.by}\n                </span>\n              )}\n              {!beats.to && (\n                <span className=\"text-muted-foreground\">· dropped</span>\n              )}\n            </motion.button>\n          </motion.div>\n          {beats.commands.length > 0 && (\n            <motion.div\n              className=\"absolute top-0 left-0\"\n              initial={{ x: anchor.right - INSET, y: anchor.bottom }}\n              animate={{ x: anchor.right - INSET, y: anchor.bottom }}\n              transition={ride}\n            >\n              <div\n                className=\"flex flex-row-reverse gap-1\"\n                style={{ translate: '-100% -50%' }}\n              >\n                {/* 3. Command */}\n                {beats.commands.map((command, index) => (\n                  <motion.span\n                    key={`${command.name}-${index}`}\n                    className=\"flex h-5 origin-top items-center gap-1 rounded-full border px-2 font-mono text-[10.5px] whitespace-nowrap\"\n                    style={{\n                      backgroundColor: ink('command-soft'),\n                      borderColor: `color-mix(in oklch, ${ink('command')} 35%, transparent)`,\n                      color: ink('command'),\n                    }}\n                    {...enter(landing + 0.12 + index * 0.05)}\n                  >\n                    <Zap className=\"size-2.5\" />\n                    {command.name}\n                  </motion.span>\n                ))}\n              </div>\n            </motion.div>\n          )}\n        </>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AA0BA,MAAM,QAAQ;AAEd,MAAM,MAAM;CAAC;CAAM;CAAG;CAAM;AAAC;;AAE7B,MAAM,OAAO;CAAE,UAAU;CAAM,MAAM;EAAC;EAAM;EAAM;EAAG;CAAC;AAAE;;AAGxD,MAAM,UAAU,MAAc,WAAoB;CAChD,MAAM,OAAO,KAAK,IAAI,KAAK,MAAM,KAAK,SAAS;CAC/C,MAAM,QAAQ,SACV,KAAK,QAAQ,WAAW,QAAQ,IAAI,SAAS,MAAM,IACnD;CACJ,MAAM,SAAS,KAAK,SAAS,KAAK,MAAM,KAAK,OAAO,SAAS,KAAK,OAAO;CACzE,OAAO;EACL,GAAG,KAAK,IAAI,KAAK;EACjB,GACE,QAAQ,IACJ,OACA,KAAK,IACL,KAAK,MACL,KAAK,SACL,SACA,KAAK,MACL,QAAQ,KAAK,MACb,KAAK,MAAM;CACnB;AACF;;AAGA,MAAM,WACJ,MACA,OACG;CACH,MAAM,OACJ,KAAK,IAAI,KAAK,GAAG,GAAG,CAAC,KAAK,KAAK,IAAI,KAAK,IAAI,GAAG,CAAC,IAAI,KAAK,KAAK;CAChE,OAAO,KAAK,KAAK,IAAI,EAAE,GAAG,KAAK,EAAE,KAAK,KAAK,GAAG,KAAK,EAAE,IAAI,KAAK,GAAG,GAAG,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,GAAG;AAC3F;AAEA,SAAgB,KAAK,EACnB,OACA,OACA,UAOC;CACD,MAAM,QAAQ,iBAAiB;CAC/B,MAAM,SAAS,MAAM,KAAK,MAAM,MAAM,EAAE,IAAI,KAAA;CAC5C,MAAM,OAAO,MAAM,OAAO,MAAM,MAAM,KAAK,EAAE,IAAI,KAAA;CACjD,MAAM,OAAO,MAAM,UAAU,MAAM,MAAM,QAAQ,IAAI,IAAI,KAAA;CACzD,MAAM,SAAS,SACX;EACE,OAAO,OAAO,IAAI,OAAO;EACzB,KAAK,OAAO;EACZ,QAAQ,OAAO,IAAI,OAAO;CAC5B,IACA,QAAQ;EACN,OAAO,KAAK,IAAI,KAAK;EACrB,KAAK,KAAK;EACV,QAAQ,KAAK,IAAI,KAAK;CACxB;CAEJ,MAAM,QAAQ,QAAQ,OAAO,MAAM,MAAM,MAAM,MAAM;CACrD,MAAM,MAAM,UAAU,OAAO,MAAM;CACnC,MAAM,QACJ,SAAS,QAAQ,MAAM,MAAM,IAAI,KAAK,MAAM,MAAM,IAAI,KAClD;EAAE;EAAO,GAAG,QAAQ,OAAO,GAAG;CAAE,IAChC,KAAA;CAEN,MAAM,UAAU,QAAQ,IAAI,QAAQ,KAAM;CAC1C,MAAM,SAAS,UACb,QACI,EAAE,SAAS,MAAe,IAC1B;EACE,SAAS;GAAE,SAAS;GAAG,OAAO;EAAK;EACnC,SAAS;GAAE,SAAS;GAAG,OAAO;EAAE;EAChC,YAAY;GAAE,UAAU;GAAK,MAAM;GAAK;EAAM;CAChD;CAEN,MAAM,OAAO,QAAQ,EAAE,UAAU,EAAE,IAAI;CAEvC,OACE,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CAEG,SACC,qBAAC,OAAD;GACE,WAAU;GACV,OAAO;GACP,QAAQ;GACR,eAAA;GAJF,UAAA;IAME,oBAAC,QAAD,EAAA,UACE,oBAAC,UAAD;KACE,IAAI,gBAAgB,MAAM;KAC1B,SAAQ;KACR,MAAK;KACL,MAAK;KACL,aAAY;KACZ,cAAa;KACb,QAAO;KAEP,UAAA,oBAAC,QAAD;MAAM,GAAE;MAAsB,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE;KAAI,CAAA;IAC1D,CAAA,EACJ,CAAA;IACN,oBAAC,OAAO,QAAR;KACE,GAAG;KACH,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE;KAC9B,SAAS;MACP,IAAI,MAAM,MAAM;MAChB,IAAI,MAAM,MAAM;MAChB,OAAO,QAAQ,IAAI;KACrB;KACA,SAAS;MAAE,IAAI,MAAM,MAAM;MAAG,IAAI,MAAM,MAAM;MAAG,OAAO;KAAE;KAC1D,YAAY;MACV,IAAI;MACJ,IAAI;MACJ,OAAO;OAAE,UAAU;OAAM,MAAM;MAAI;KACrC;IACD,CAAA;IACD,oBAAC,OAAO,MAAR;KACE,MAAK;KACL,aAAa;KACb,eAAc;KACd,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE;KAChC,WAAW,qBAAqB,MAAM,IAAI;KAC1C,SAAS;MAAE,GAAG,MAAM;MAAG,YAAY,QAAQ,IAAI;KAAE;KACjD,SAAS;MAAE,GAAG,MAAM;MAAG,YAAY;KAAE;KACrC,YAAY;MACV,GAAG;MACH,YAAY;OAAE,UAAU;OAAM,MAAM;OAAK,OAAO;MAAK;KACvD;IACD,CAAA;GACE;EAGN,CAAA,GAAA,UACC,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,OAAO,KAAR;GACE,WAAU;GACV,SAAS;IAAE,GAAG,OAAO,QAAQ;IAAO,GAAG,OAAO;GAAI;GAClD,SAAS;IAAE,GAAG,OAAO,QAAQ;IAAO,GAAG,OAAO;GAAI;GAClD,YAAY;GAGZ,UAAA,qBAAC,OAAO,QAAR;IACE,MAAK;IACL,SAAS;IACT,WAAU;IACV,OAAO;KACL,WAAW;KACX,iBAAiB,IAAI,cAAc;KACnC,aAAa,uBAAuB,IAAI,SAAS,EAAE;IACrD;IACA,GAAI,MAAM,OAAO;IATnB,UAAA;KAWG,OACC,oBAAC,cAAD;MACE,WAAU;MACV,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE;KAChC,CAAA,IAED,oBAAC,QAAD;MACE,WAAU;MACV,OAAO,EAAE,iBAAiB,IAAI,SAAS,EAAE;KAC1C,CAAA;KAEH,oBAAC,QAAD;MAAM,WAAU;MAAc,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE;MAC1D,UAAA,MAAM;KACH,CAAA;KACL,MAAM,QACL,qBAAC,QAAD;MAAM,WAAU;MAAhB,UAAA;OACG,OAAO,aAAa;OAAO;OAAE,MAAM,KAAK;MACrC;;KAEP,CAAC,MAAM,MACN,oBAAC,QAAD;MAAM,WAAU;MAAwB,UAAA;KAAe,CAAA;IAE5C;;EACL,CAAA,GACX,MAAM,SAAS,SAAS,KACvB,oBAAC,OAAO,KAAR;GACE,WAAU;GACV,SAAS;IAAE,GAAG,OAAO,QAAQ;IAAO,GAAG,OAAO;GAAO;GACrD,SAAS;IAAE,GAAG,OAAO,QAAQ;IAAO,GAAG,OAAO;GAAO;GACrD,YAAY;GAEZ,UAAA,oBAAC,OAAD;IACE,WAAU;IACV,OAAO,EAAE,WAAW,aAAa;IAGhC,UAAA,MAAM,SAAS,KAAK,SAAS,UAC5B,qBAAC,OAAO,MAAR;KAEE,WAAU;KACV,OAAO;MACL,iBAAiB,IAAI,cAAc;MACnC,aAAa,uBAAuB,IAAI,SAAS,EAAE;MACnD,OAAO,IAAI,SAAS;KACtB;KACA,GAAI,MAAM,UAAU,MAAO,QAAQ,GAAI;KARzC,UAAA,CAUE,oBAAC,KAAD,EAAK,WAAU,WAAY,CAAA,GAC1B,QAAQ,IACE;IAXN,GAAA,GAAG,QAAQ,KAAK,GAAG,OAWb,CACd;GACE,CAAA;EACK,CAAA,CAEd,EAAA,CAAA,CAED;;AAET"}

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

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

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

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

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

@@ -0,0 +1,29 @@
+import { ReactNode } from "react";
+//#region src/recipes/kabuki-devtools/map/canvas/canvas.d.ts
+export interface Bounds {
+  readonly left: number;
+  readonly right: number;
+  readonly top: number;
+  readonly bottom: number;
+}
+/** Spread on what handles its own presses and scrolls, such as a list that scrolls. */
+export declare const OWN: {
+  readonly 'data-canvas-own': '';
+};
+/** Spread on what is drawn, so a tap on it is not a tap on the surface. */
+export declare const ITEM: {
+  readonly 'data-canvas-item': '';
+};
+export declare function Canvas({ bounds, label, onTap, dotted, children }: {
+  /** What the drawing covers, for Fit. */
+  readonly bounds: Bounds;
+  readonly label: string;
+  /** Dots under the drawing; without them, whatever is behind shows through. */
+  readonly dotted?: boolean;
+  /** The surface was tapped, away from anything drawn. */
+  readonly onTap: () => void;
+  /** The drawing, its origin at 0, 0. */
+  readonly children: ReactNode;
+}): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=canvas.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"canvas.d.ts","names":[],"sources":["../../../../../src/recipes/kabuki-devtools/map/canvas/canvas.tsx"],"mappings":";;iBA6BiB;WACN;WACA;WACA;WACA;;;qBAaE;WAAQ;;;qBAKR;WAAS;;wBAON,SACd,QACA,OACA,OACA,QACA;;WAGS,QAAQ;WACR;;WAEA;;WAEA;;WAEA,UAAU;oBACpB,IAAA"}

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

@@ -0,0 +1,221 @@
+import { ink } from "../../ink/ink.js";
+import { useEffect, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { animate, motion, useMotionValue } from "motion/react";
+import { Maximize, Minus, Plus } from "lucide-react";
+//#region src/recipes/kabuki-devtools/map/canvas/canvas.tsx
+const MIN = .25;
+const MAX = 2.5;
+/** Room above the root when the Map first opens too tall to fit, in pixels. */
+const TOP = 100;
+const SPRING = {
+	type: "spring",
+	duration: .45,
+	bounce: 0
+};
+const clamp = (scale) => Math.min(MAX, Math.max(MIN, scale));
+/** Spread on what handles its own presses and scrolls, such as a list that scrolls. */
+const OWN = { "data-canvas-own": "" };
+const isOwn = (target) => target instanceof Element && target.closest("[data-canvas-own]") !== null;
+/** Spread on what is drawn, so a tap on it is not a tap on the surface. */
+const ITEM = { "data-canvas-item": "" };
+const isItem = (target) => target instanceof Element && target.closest("[data-canvas-item]") !== null;
+/** How far a pointer may move and still tap. */
+const SLOP = 4;
+function Canvas({ bounds, label, onTap, dotted = true, children }) {
+	const surface = useRef(null);
+	const x = useMotionValue(0);
+	const y = useMotionValue(TOP);
+	const scale = useMotionValue(1);
+	/** Scale to `next` about a point on the surface. */
+	const zoomAt = (next, px, py, smooth = false) => {
+		const to = clamp(next);
+		const ratio = to / scale.get();
+		const nx = px - (px - x.get()) * ratio;
+		const ny = py - (py - y.get()) * ratio;
+		if (smooth) {
+			animate(scale, to, SPRING);
+			animate(x, nx, SPRING);
+			animate(y, ny, SPRING);
+		} else {
+			scale.set(to);
+			x.set(nx);
+			y.set(ny);
+		}
+	};
+	useEffect(() => {
+		const element = surface.current;
+		const width = element.clientWidth;
+		const height = element.clientHeight;
+		const fits = bounds.bottom - bounds.top <= height - 112;
+		scale.set(1);
+		x.set(width / 2 - (bounds.left + bounds.right) / 2);
+		y.set(fits ? height / 2 - (bounds.top + bounds.bottom) / 2 : TOP - bounds.top);
+	}, [
+		x,
+		y,
+		scale
+	]);
+	useEffect(() => {
+		const element = surface.current;
+		const onWheel = (event) => {
+			if (isOwn(event.target)) return;
+			event.preventDefault();
+			const box = element.getBoundingClientRect();
+			const rate = event.ctrlKey ? .01 : .002;
+			zoomAt(scale.get() * Math.exp(-event.deltaY * rate), event.clientX - box.left, event.clientY - box.top);
+		};
+		element.addEventListener("wheel", onWheel, { passive: false });
+		return () => element.removeEventListener("wheel", onWheel);
+	});
+	const pointers = useRef(/* @__PURE__ */ new Map());
+	/** The press so far: where it began, whether it became a drag, and whether it began on the bare surface. */
+	const press = useRef(void 0);
+	/** A drag just ended: the click it makes is not one. */
+	const dragged = useRef(false);
+	const pinch = useRef(void 0);
+	const spread = () => {
+		const [a, b] = [...pointers.current.values()];
+		return {
+			distance: Math.hypot(a.x - b.x, a.y - b.y),
+			mid: {
+				x: (a.x + b.x) / 2,
+				y: (a.y + b.y) / 2
+			}
+		};
+	};
+	const onPointerDown = (event) => {
+		if (event.button !== 0) return;
+		dragged.current = false;
+		pointers.current.set(event.pointerId, {
+			x: event.clientX,
+			y: event.clientY
+		});
+		if (pointers.current.size === 1) press.current = {
+			x: event.clientX,
+			y: event.clientY,
+			dragging: false,
+			bare: !isItem(event.target)
+		};
+		else {
+			if (press.current) press.current.dragging = true;
+			for (const id of pointers.current.keys()) event.currentTarget.setPointerCapture(id);
+			if (pointers.current.size === 2) pinch.current = {
+				distance: spread().distance,
+				scale: scale.get()
+			};
+		}
+	};
+	const onPointerMove = (event) => {
+		const was = pointers.current.get(event.pointerId);
+		if (!was) return;
+		const now = {
+			x: event.clientX,
+			y: event.clientY
+		};
+		const held = press.current;
+		if (held && !held.dragging) {
+			if (Math.hypot(now.x - held.x, now.y - held.y) < SLOP) return;
+			held.dragging = true;
+			event.currentTarget.setPointerCapture(event.pointerId);
+		}
+		if (pointers.current.size === 1) {
+			x.set(x.get() + now.x - was.x);
+			y.set(y.get() + now.y - was.y);
+		}
+		pointers.current.set(event.pointerId, now);
+		if (pointers.current.size === 2 && pinch.current) {
+			const { distance, mid } = spread();
+			const box = surface.current.getBoundingClientRect();
+			zoomAt(pinch.current.scale * distance / pinch.current.distance, mid.x - box.left, mid.y - box.top);
+		}
+	};
+	const onPointerUp = (event) => {
+		if (!pointers.current.delete(event.pointerId)) return;
+		if (pointers.current.size < 2) pinch.current = void 0;
+		if (pointers.current.size > 0) return;
+		const held = press.current;
+		press.current = void 0;
+		if (!held) return;
+		if (held.dragging) dragged.current = true;
+		else if (held.bare && event.type === "pointerup") onTap();
+	};
+	const onClickCapture = (event) => {
+		if (!dragged.current) return;
+		dragged.current = false;
+		event.stopPropagation();
+		event.preventDefault();
+	};
+	const zoomBy = (factor) => {
+		const element = surface.current;
+		zoomAt(scale.get() * factor, element.clientWidth / 2, element.clientHeight / 2, true);
+	};
+	const fit = () => {
+		const element = surface.current;
+		const width = bounds.right - bounds.left;
+		const height = bounds.bottom - bounds.top;
+		const to = clamp(Math.min(1.25, (element.clientWidth - 112) / Math.max(1, width), (element.clientHeight - 112) / Math.max(1, height)));
+		animate(scale, to, SPRING);
+		animate(x, element.clientWidth / 2 - (bounds.left + bounds.right) / 2 * to, SPRING);
+		animate(y, element.clientHeight / 2 - (bounds.top + bounds.bottom) / 2 * to, SPRING);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		ref: surface,
+		role: "application",
+		"aria-label": label,
+		className: "relative h-full w-full cursor-grab touch-none overflow-clip select-none active:cursor-grabbing",
+		style: dotted ? {
+			backgroundImage: `radial-gradient(${ink("grain")} 1px, transparent 1px)`,
+			backgroundSize: "20px 20px"
+		} : void 0,
+		onContextMenu: (event) => event.preventDefault(),
+		onPointerDown,
+		onClickCapture,
+		onPointerMove,
+		onPointerUp,
+		onPointerCancel: onPointerUp,
+		children: [/* @__PURE__ */ jsx(motion.div, {
+			className: "absolute top-0 left-0 origin-top-left",
+			style: {
+				x,
+				y,
+				scale
+			},
+			children
+		}), /* @__PURE__ */ jsxs("div", {
+			...ITEM,
+			className: "bg-background/85 absolute top-3 right-3 flex flex-col overflow-hidden rounded-lg border shadow-xs backdrop-blur-sm",
+			children: [
+				/* @__PURE__ */ jsx(Control, {
+					label: "Zoom in",
+					onClick: () => zoomBy(1.25),
+					children: /* @__PURE__ */ jsx(Plus, {})
+				}),
+				/* @__PURE__ */ jsx(Control, {
+					label: "Zoom out",
+					onClick: () => zoomBy(.8),
+					children: /* @__PURE__ */ jsx(Minus, {})
+				}),
+				/* @__PURE__ */ jsx(Control, {
+					label: "Fit everything",
+					onClick: fit,
+					children: /* @__PURE__ */ jsx(Maximize, {})
+				})
+			]
+		})]
+	});
+}
+function Control({ label, onClick, children }) {
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"aria-label": label,
+		title: label,
+		onClick,
+		className: "text-muted-foreground hover:text-foreground hover:bg-muted focus-visible:ring-ring grid size-9 place-items-center transition-colors duration-150 outline-none focus-visible:ring-2 focus-visible:ring-inset [&_svg]:size-4",
+		children
+	});
+}
+//#endregion
+export { Canvas, ITEM, OWN };
+
+//# sourceMappingURL=canvas.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"canvas.js","names":[],"sources":["../../../../../src/recipes/kabuki-devtools/map/canvas/canvas.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport type { ReactNode } from 'react';\nimport { animate, motion, useMotionValue } from 'motion/react';\nimport { Maximize, Minus, Plus } from 'lucide-react';\nimport { ink } from '../../ink/index.ts';\n\n/*\n * A surface to pan and zoom a drawing on, sized by whatever holds it. Knows\n * nothing of what it draws.\n *\n * 1. Place   at 100%, never zoomed in: centred if the whole drawing fits,\n *            else centred across with its top a little below the surface's,\n *            running down. From then on it stays where the reader leaves\n *            it: the surface never moves by itself.\n * 2. Pan     drag with a finger or the pointer, from anywhere, over what is\n *            drawn too: a press becomes a drag once it moves, and the click\n *            it would have made is swallowed. A press that stays put clicks\n *            what it is on.\n * 3. Zoom    scroll, pinch, or the buttons; always about a point, so what\n *            is under it stays there.\n * 4. Fit     the whole drawing in view, on demand.\n * 5. Tap     a tap on the surface itself, not on anything drawn (marked\n *            `ITEM`), says so.\n *            A right click never opens the browser's menu here.\n *\n * What is drawn marked `OWN` handles its own scrolls: the surface leaves\n * them alone.\n */\n\nexport interface Bounds {\n  readonly left: number;\n  readonly right: number;\n  readonly top: number;\n  readonly bottom: number;\n}\n\nconst MIN = 0.25;\nconst MAX = 2.5;\nconst PAD = 56;\n/** Room above the root when the Map first opens too tall to fit, in pixels. */\nconst TOP = 100;\nconst SPRING = { type: 'spring', duration: 0.45, bounce: 0 } as const;\n\nconst clamp = (scale: number) => Math.min(MAX, Math.max(MIN, scale));\n\n/** Spread on what handles its own presses and scrolls, such as a list that scrolls. */\nexport const OWN = { 'data-canvas-own': '' } as const;\nconst isOwn = (target: EventTarget | null) =>\n  target instanceof Element && target.closest('[data-canvas-own]') !== null;\n\n/** Spread on what is drawn, so a tap on it is not a tap on the surface. */\nexport const ITEM = { 'data-canvas-item': '' } as const;\nconst isItem = (target: EventTarget | null) =>\n  target instanceof Element && target.closest('[data-canvas-item]') !== null;\n\n/** How far a pointer may move and still tap. */\nconst SLOP = 4;\n\nexport function Canvas({\n  bounds,\n  label,\n  onTap,\n  dotted = true,\n  children,\n}: {\n  /** What the drawing covers, for Fit. */\n  readonly bounds: Bounds;\n  readonly label: string;\n  /** Dots under the drawing; without them, whatever is behind shows through. */\n  readonly dotted?: boolean;\n  /** The surface was tapped, away from anything drawn. */\n  readonly onTap: () => void;\n  /** The drawing, its origin at 0, 0. */\n  readonly children: ReactNode;\n}) {\n  const surface = useRef<HTMLDivElement>(null);\n  const x = useMotionValue(0);\n  const y = useMotionValue(TOP);\n  const scale = useMotionValue(1);\n\n  /** Scale to `next` about a point on the surface. */\n  const zoomAt = (next: number, px: number, py: number, smooth = false) => {\n    const to = clamp(next);\n    const ratio = to / scale.get();\n    const nx = px - (px - x.get()) * ratio;\n    const ny = py - (py - y.get()) * ratio;\n    if (smooth) {\n      animate(scale, to, SPRING);\n      animate(x, nx, SPRING);\n      animate(y, ny, SPRING);\n    } else {\n      scale.set(to);\n      x.set(nx);\n      y.set(ny);\n    }\n  };\n\n  // 1. Place, once, from the drawing as it first is.\n  useEffect(() => {\n    const element = surface.current!;\n    const width = element.clientWidth;\n    const height = element.clientHeight;\n    const fits = bounds.bottom - bounds.top <= height - PAD * 2;\n    scale.set(1);\n    x.set(width / 2 - (bounds.left + bounds.right) / 2);\n    y.set(\n      fits ? height / 2 - (bounds.top + bounds.bottom) / 2 : TOP - bounds.top,\n    );\n    // oxlint-disable-next-line react-hooks/exhaustive-deps -- placed once, where the drawing first is; later it stays where the reader leaves it.\n  }, [x, y, scale]);\n\n  // 3. Zoom, from the wheel: a passive listener could not stop the page scrolling.\n  useEffect(() => {\n    const element = surface.current!;\n    const onWheel = (event: WheelEvent) => {\n      if (isOwn(event.target)) return;\n      event.preventDefault();\n      const box = element.getBoundingClientRect();\n      // A trackpad's pinch comes as a wheel with Ctrl, in much smaller steps.\n      const rate = event.ctrlKey ? 0.01 : 0.002;\n      zoomAt(\n        scale.get() * Math.exp(-event.deltaY * rate),\n        event.clientX - box.left,\n        event.clientY - box.top,\n      );\n    };\n    element.addEventListener('wheel', onWheel, { passive: false });\n    return () => element.removeEventListener('wheel', onWheel);\n  });\n\n  // 2. Pan and 3. Zoom, from fingers and the pointer.\n  const pointers = useRef(new Map<number, { x: number; y: number }>());\n  /** The press so far: where it began, whether it became a drag, and whether it began on the bare surface. */\n  const press = useRef<\n    { x: number; y: number; dragging: boolean; bare: boolean } | undefined\n  >(undefined);\n  /** A drag just ended: the click it makes is not one. */\n  const dragged = useRef(false);\n  const pinch = useRef<{ distance: number; scale: number } | undefined>(\n    undefined,\n  );\n  const spread = () => {\n    const [a, b] = [...pointers.current.values()];\n    return {\n      distance: Math.hypot(a!.x - b!.x, a!.y - b!.y),\n      mid: { x: (a!.x + b!.x) / 2, y: (a!.y + b!.y) / 2 },\n    };\n  };\n\n  const onPointerDown = (event: React.PointerEvent) => {\n    // Only the main button pans: a right click is the card's.\n    if (event.button !== 0) return;\n    dragged.current = false;\n    pointers.current.set(event.pointerId, {\n      x: event.clientX,\n      y: event.clientY,\n    });\n    if (pointers.current.size === 1)\n      press.current = {\n        x: event.clientX,\n        y: event.clientY,\n        dragging: false,\n        bare: !isItem(event.target),\n      };\n    else {\n      // A second finger: a pinch, never a click.\n      if (press.current) press.current.dragging = true;\n      for (const id of pointers.current.keys())\n        event.currentTarget.setPointerCapture(id);\n      if (pointers.current.size === 2)\n        pinch.current = { distance: spread().distance, scale: scale.get() };\n    }\n  };\n  const onPointerMove = (event: React.PointerEvent) => {\n    const was = pointers.current.get(event.pointerId);\n    if (!was) return;\n    const now = { x: event.clientX, y: event.clientY };\n    const held = press.current;\n    if (held && !held.dragging) {\n      // Still a click until it moves far enough.\n      if (Math.hypot(now.x - held.x, now.y - held.y) < SLOP) return;\n      held.dragging = true;\n      event.currentTarget.setPointerCapture(event.pointerId);\n    }\n    if (pointers.current.size === 1) {\n      x.set(x.get() + now.x - was.x);\n      y.set(y.get() + now.y - was.y);\n    }\n    pointers.current.set(event.pointerId, now);\n    if (pointers.current.size === 2 && pinch.current) {\n      const { distance, mid } = spread();\n      const box = surface.current!.getBoundingClientRect();\n      zoomAt(\n        (pinch.current.scale * distance) / pinch.current.distance,\n        mid.x - box.left,\n        mid.y - box.top,\n      );\n    }\n  };\n  const onPointerUp = (event: React.PointerEvent) => {\n    if (!pointers.current.delete(event.pointerId)) return;\n    if (pointers.current.size < 2) pinch.current = undefined;\n    if (pointers.current.size > 0) return;\n    const held = press.current;\n    press.current = undefined;\n    if (!held) return;\n    if (held.dragging) dragged.current = true;\n    // 5. Tap\n    else if (held.bare && event.type === 'pointerup') onTap();\n  };\n  const onClickCapture = (event: React.MouseEvent) => {\n    if (!dragged.current) return;\n    dragged.current = false;\n    event.stopPropagation();\n    event.preventDefault();\n  };\n\n  const zoomBy = (factor: number) => {\n    const element = surface.current!;\n    zoomAt(\n      scale.get() * factor,\n      element.clientWidth / 2,\n      element.clientHeight / 2,\n      true,\n    );\n  };\n\n  // 4. Fit\n  const fit = () => {\n    const element = surface.current!;\n    const width = bounds.right - bounds.left;\n    const height = bounds.bottom - bounds.top;\n    const to = clamp(\n      Math.min(\n        1.25,\n        (element.clientWidth - PAD * 2) / Math.max(1, width),\n        (element.clientHeight - PAD * 2) / Math.max(1, height),\n      ),\n    );\n    animate(scale, to, SPRING);\n    animate(\n      x,\n      element.clientWidth / 2 - ((bounds.left + bounds.right) / 2) * to,\n      SPRING,\n    );\n    animate(\n      y,\n      element.clientHeight / 2 - ((bounds.top + bounds.bottom) / 2) * to,\n      SPRING,\n    );\n  };\n\n  return (\n    <div\n      ref={surface}\n      role=\"application\"\n      aria-label={label}\n      // Clipped, never hidden: a hidden overflow still scrolls to whatever takes focus, and the drawing would jump.\n      className=\"relative h-full w-full cursor-grab touch-none overflow-clip select-none active:cursor-grabbing\"\n      style={\n        dotted\n          ? {\n              backgroundImage: `radial-gradient(${ink('grain')} 1px, transparent 1px)`,\n              backgroundSize: '20px 20px',\n            }\n          : undefined\n      }\n      // No browser menu anywhere on the Map: a right click is the Map's own.\n      onContextMenu={(event) => event.preventDefault()}\n      onPointerDown={onPointerDown}\n      onClickCapture={onClickCapture}\n      onPointerMove={onPointerMove}\n      onPointerUp={onPointerUp}\n      onPointerCancel={onPointerUp}\n    >\n      <motion.div\n        className=\"absolute top-0 left-0 origin-top-left\"\n        style={{ x, y, scale }}\n      >\n        {children}\n      </motion.div>\n      <div\n        {...ITEM}\n        className=\"bg-background/85 absolute top-3 right-3 flex flex-col overflow-hidden rounded-lg border shadow-xs backdrop-blur-sm\"\n      >\n        <Control label=\"Zoom in\" onClick={() => zoomBy(1.25)}>\n          <Plus />\n        </Control>\n        <Control label=\"Zoom out\" onClick={() => zoomBy(0.8)}>\n          <Minus />\n        </Control>\n        <Control label=\"Fit everything\" onClick={fit}>\n          <Maximize />\n        </Control>\n      </div>\n    </div>\n  );\n}\n\nfunction Control({\n  label,\n  onClick,\n  children,\n}: {\n  readonly label: string;\n  readonly onClick: () => void;\n  readonly children: ReactNode;\n}) {\n  return (\n    <button\n      type=\"button\"\n      aria-label={label}\n      title={label}\n      onClick={onClick}\n      className=\"text-muted-foreground hover:text-foreground hover:bg-muted focus-visible:ring-ring grid size-9 place-items-center transition-colors duration-150 outline-none focus-visible:ring-2 focus-visible:ring-inset [&_svg]:size-4\"\n    >\n      {children}\n    </button>\n  );\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+import { Bounds, Canvas, ITEM, OWN } from "./canvas.js";
+export { type Bounds, Canvas, ITEM, OWN };

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

@@ -0,0 +1,2 @@
+import { Canvas, ITEM, OWN } from "./canvas.js";
+export { Canvas, ITEM, OWN };

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

@@ -0,0 +1,2 @@
+import { AppMap, Pick } from "./map.js";
+export { AppMap, type Pick };

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

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

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

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

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

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