@kestack/web-platform 0.0.0-stage → 0.0.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"scene.js","names":[],"sources":["../../../../src/recipes/kabuki-devtools/scene/scene.ts"],"sourcesContent":["import type { ActorDefinition, Snapshot } from '@kestack/kabuki';\nimport { beatsOf } from './beats.ts';\nimport type { Beats, Said } from './beats.ts';\nimport { layout } from './layout/index.ts';\nimport type { Box, Branch, Kind } from './layout/index.ts';\nimport type { ActorNode, Item } from './nodes.ts';\nimport { treeOf } from './tree.ts';\nimport type { Statuses } from './tree.ts';\n\n/*\n * A Scene: everything the Map draws for one Step, placed. Pure.\n *\n * 1. Tree    the Nodes, from the Actors and the Step's Snapshot.\n * 2. Layout  a packed tree or an outline. Under a card, one small node per\n *            State that starts something: the State it is in holds what it\n *            starts; any other only names it, faded. What runs in every\n *            State hangs straight from the card. So a Transition moves the\n *            Map, and so does a fold: a folded card hides what hangs below\n *            it and names it, under itself.\n * 3. Light   a Node is lit while an Instance runs there; a line while both\n *            its ends are.\n * 4. Beats   what the Step's Message did, if it has one.\n */\n\nexport type Placed = ActorNode &\n  Box & {\n    readonly lit: boolean;\n    /** Folded: what hangs right below it, by name, and how many places hide below in all. */\n    readonly folded?: {\n      readonly names: ReadonlyArray<string>;\n      readonly hidden: number;\n    };\n  };\n\n/** The room a folded card's names take under it. */\nexport const FOLD = 30;\n\n/** A State node: one State of a card that starts something. */\nexport interface PlacedState extends Box {\n  readonly id: string;\n  /** The card it belongs to. */\n  readonly owner: string;\n  readonly tag: string;\n  /** The card's Instance is in it, so what it starts runs. */\n  readonly active: boolean;\n  readonly lit: boolean;\n  /** Not the one it is in: what it would start, by name, under it. */\n  readonly names?: ReadonlyArray<string>;\n}\n\n/** A State node's height, and its room for names when it is not the one. */\nexport const STATE = { height: 26, names: 22 } as const;\n\nconst stateWidth = (tag: string) => Math.max(72, 34 + tag.length * 7);\n\n/** The ID of a card's State node. */\nexport const stateId = (owner: string, tag: string) => `${owner}~${tag}`;\n\n/** The State a card's shown Instance is in. */\nconst currentOf = (node: ActorNode) =>\n  (node.many ? node.chosen : node.instances[0])?.state._tag;\n\nexport interface Scene {\n  readonly nodes: ReadonlyArray<Placed>;\n  readonly lines: ReadonlyArray<{\n    readonly id: string;\n    readonly from: string;\n    readonly to: string;\n    readonly d: string;\n    readonly lit: boolean;\n  }>;\n  readonly labels: ReadonlyArray<{\n    readonly id: string;\n    readonly owner: string;\n    readonly text: string;\n    readonly x: number;\n    readonly y: number;\n    readonly align: 'middle' | 'start';\n    readonly lit: boolean;\n  }>;\n  /** The State nodes. */\n  readonly states: ReadonlyArray<PlacedState>;\n  readonly beats: Beats | undefined;\n  /** Where every Node sits, by ID. */\n  readonly at: ReadonlyMap<string, Placed>;\n  /** The live app's Workers are laid over it. */\n  readonly live: boolean;\n}\n\nexport interface Shown {\n  readonly definition: ActorDefinition;\n  readonly snapshot: Snapshot;\n  /** The Step's Message; none for init. */\n  readonly said?: Said;\n  /** What the live app says of each Instance's Workers; none away from it. */\n  readonly statuses?: Statuses;\n  readonly layout?: Kind;\n  /** The Instance chosen at each place of many, by the place's ID. */\n  readonly chosen?: ReadonlyMap<string, string>;\n  /** The cards folded, by ID. */\n  readonly folded?: ReadonlySet<string>;\n}\n\nconst NOT_LIVE: Statuses = () => undefined;\n\nconst branchOf = (\n  { node, children }: Item,\n  folded: ReadonlySet<string>,\n): Branch => {\n  if (folded.has(node.id) && children.length)\n    return {\n      id: node.id,\n      width: node.width,\n      height: node.height + FOLD,\n      children: [],\n    };\n  const current = currentOf(node);\n  // Children by the State that starts them, in the order the States are written.\n  const byState = new Map<string, Item[]>();\n  for (const { via, item } of children)\n    if (via) byState.set(via, [...(byState.get(via) ?? []), item]);\n  const states = [...byState].map(([tag, items]): { branch: Branch } => ({\n    branch:\n      tag === current\n        ? {\n            id: stateId(node.id, tag),\n            width: stateWidth(tag),\n            height: STATE.height,\n            children: items.map((item) => ({ branch: branchOf(item, folded) })),\n          }\n        : {\n            id: stateId(node.id, tag),\n            width: stateWidth(tag),\n            height: STATE.height + STATE.names,\n            children: [],\n          },\n  }));\n  return {\n    id: node.id,\n    width: node.width,\n    height: node.height,\n    children: [\n      ...states,\n      ...children\n        .filter(({ via }) => !via)\n        .map(({ item }) => ({ branch: branchOf(item, folded) })),\n    ],\n  };\n};\n\n/** How many places hang below an Item, at any depth. */\nconst countBelow = (item: Item): number =>\n  item.children.reduce(\n    (sum, { item: child }) => sum + 1 + countBelow(child),\n    0,\n  );\n\nexport const sceneOf = ({\n  definition,\n  snapshot,\n  said,\n  statuses,\n  layout: kind = 'tree',\n  chosen,\n  folded = new Set(),\n}: Shown): Scene => {\n  // 1. Tree\n  const toward = said\n    ? [\n        said.envelope.destination,\n        ...('instance' in said.envelope.source\n          ? [said.envelope.source.instance]\n          : []),\n      ]\n    : [];\n  const { tree, find } = treeOf(\n    definition,\n    snapshot,\n    statuses ?? NOT_LIVE,\n    chosen,\n    toward,\n  );\n  const nodes = new Map<string, ActorNode>();\n  const items = new Map<string, Item>();\n  const parents = new Map<string, string>();\n  const collect = (item: Item) => {\n    nodes.set(item.node.id, item.node);\n    items.set(item.node.id, item);\n    for (const { item: child } of item.children) {\n      parents.set(child.node.id, item.node.id);\n      collect(child);\n    }\n  };\n  collect(tree);\n\n  // 2. Layout\n  const laid = layout(branchOf(tree, folded), kind);\n\n  // 3. Light\n  const states: PlacedState[] = [];\n  for (const [id, box] of laid.boxes) {\n    if (nodes.has(id)) continue;\n    const owner = box.parent!;\n    const node = nodes.get(owner)!;\n    const tag = id.slice(owner.length + 1);\n    const active = currentOf(node) === tag;\n    states.push({\n      ...box,\n      id,\n      owner,\n      tag,\n      active,\n      lit: active && node.instances.length > 0,\n      ...(active\n        ? {}\n        : {\n            height: STATE.height,\n            names: items\n              .get(owner)!\n              .children.filter(({ via }) => via === tag)\n              .map(({ item }) => item.node.name),\n          }),\n    });\n  }\n  const placed: Placed[] = [...laid.boxes].flatMap(([id, box]) => {\n    if (!nodes.has(id)) return [];\n    const node = nodes.get(id)!;\n    const item = items.get(id)!;\n    const fold =\n      folded.has(id) && item.children.length\n        ? {\n            folded: {\n              names: item.children.map(({ item: child }) => child.node.name),\n              hidden: countBelow(item),\n            },\n            height: box.height - FOLD,\n          }\n        : {};\n    return [{ ...node, ...box, lit: node.instances.length > 0, ...fold }];\n  });\n  const at = new Map(placed.map((node) => [node.id, node]));\n  const stateAt = new Map(states.map((state) => [state.id, state]));\n  const lit = (id: string) => (at.get(id) ?? stateAt.get(id))!.lit;\n\n  return {\n    nodes: placed,\n    states,\n    lines: laid.lines.map((line) => ({\n      id: line.id,\n      from: line.from,\n      to: line.to,\n      d: line.d,\n      lit: lit(line.from) && lit(line.to),\n    })),\n    labels: [],\n    // 4. Beats\n    // A Message into a folded card's subtree beats at the folded card.\n    beats:\n      said &&\n      beatsOf(said, (id) => {\n        let place = find(id);\n        while (place && !at.has(place)) place = parents.get(place);\n        return place;\n      }),\n    at,\n    live: statuses !== undefined,\n  };\n};\n"],"mappings":"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"}

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

@@ -0,0 +1,20 @@
+import { Item, WorkerStatus } from "./nodes.js";
+import { ActorDefinition, Snapshot } from "@kestack/kabuki";
+//#region src/recipes/kabuki-devtools/scene/tree.d.ts
+/** What the live app says of an Instance's Workers; nothing away from it. */
+export type Statuses = (instance: string) => ReadonlyArray<{
+  readonly name: string;
+  readonly key: string;
+  readonly status: Exclude<WorkerStatus, 'on'>;
+}> | undefined;
+export declare const treeOf: (root: ActorDefinition, snapshot: Snapshot, statuses: Statuses,
+/** The Instance chosen at a place of many, by the place's ID. */
+chosen?: ReadonlyMap<string, string>,
+/** Instances to choose first, unless one is chosen: the Message's ends. */
+toward?: ReadonlyArray<string>) => {
+  readonly tree: Item;
+  /** The Node an Instance, or one of its Worker keys, is drawn on. */
+  readonly find: (id: string) => string | undefined;
+};
+//#endregion
+//# sourceMappingURL=tree.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tree.d.ts","names":[],"sources":["../../../../src/recipes/kabuki-devtools/scene/tree.ts"],"mappings":";;;;YA4BY,YAAY,qBACpB;WACW;WACA;WACA,QAAQ,QAAQ;;qBAiBlB,SAAM,MACX,iBAAe,UACX,UAAQ,UACR,UAEF;;AAAA,SAAA,6BAEA;;AAAA,SAAA;WAEC,MAAM;;WAEN,OAAO"}

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

@@ -0,0 +1,85 @@
+import { measure } from "./nodes.js";
+import { isMany } from "@kestack/kabuki";
+//#region src/recipes/kabuki-devtools/scene/tree.ts
+const SINGLE = "Single";
+const isStateless = (definition) => definition.states.length === 1 && definition.states[0] === SINGLE;
+/** An Instance ID without its key and how many times it was Invoked: its parent's ID and its slot. */
+const slotOf = (id) => id.replace(/(\[[^\]]*\])?#\d+$/, "");
+const asList = (held) => held === void 0 ? [] : isMany(held) ? held : [held];
+const treeOf = (root, snapshot, statuses, chosen = /* @__PURE__ */ new Map(), toward = []) => {
+	const drawnAt = /* @__PURE__ */ new Map();
+	/** One row per Worker the Actor has, each with the keys its Instances run now. */
+	const workers = (definition, instances, owner) => Object.entries(definition.workers).map(([name, worker]) => ({
+		name,
+		...worker.state === void 0 ? {} : { state: worker.state },
+		keys: instances.flatMap((instance) => {
+			if (worker.state !== void 0 && worker.state !== instance.state._tag) return [];
+			const live = statuses(instance.id);
+			const data = {
+				model: instance.model,
+				state: instance.state,
+				props: instance.props
+			};
+			return worker.keys(data).map((key) => {
+				const id = `${instance.id}~${name}#${key}`;
+				drawnAt.set(id, owner);
+				return {
+					id,
+					key,
+					instance,
+					status: live ? live.find((each) => each.name === name && each.key === key)?.status ?? "running" : "on"
+				};
+			});
+		})
+	}));
+	const actor = (definition, instances, id, many, above) => {
+		for (const instance of instances) drawnAt.set(instance.id, id);
+		const stateless = isStateless(definition);
+		const pick = many ? instances.find((each) => each.id === chosen.get(id)) ?? instances.find((each) => toward.some((to) => to === each.id || to.startsWith(`${each.id}/`))) ?? instances[0] : void 0;
+		const shown = many ? pick ? [pick] : [] : instances;
+		const size = measure(definition.name, many, stateless ? void 0 : definition.states, Object.keys(definition.workers));
+		const count = (tag) => instances.filter((each) => each.state._tag === tag).length;
+		const node = {
+			id,
+			name: definition.name,
+			many,
+			instances,
+			...pick ? { chosen: pick } : {},
+			...stateless ? {} : { states: size.lines.map((line) => line.map((tag) => ({
+				tag,
+				count: count(tag)
+			}))) },
+			workers: workers(definition, shown, id),
+			width: size.width,
+			height: size.height
+		};
+		if (instances.length === 0 && above.has(definition)) return {
+			node,
+			children: []
+		};
+		const below = new Set(above).add(definition);
+		/** The slots written in one State, or at the top, held by `holders`. */
+		const slots = (state, lasting, holders) => Object.entries(definition.children[state] ?? {}).filter(([name]) => definition.lasting.includes(name) === lasting).map(([name, held]) => {
+			const slot = `${id}>${name}`;
+			for (const holder of instances) drawnAt.set(`${holder.id}/${name}`, slot);
+			return actor(held.definition, holders.flatMap((holder) => asList(holder.children[name])), slot, held.many, below);
+		});
+		const byState = stateless ? slots(SINGLE, false, shown).map((item) => ({ item })) : definition.states.flatMap((tag) => slots(tag, false, shown.filter((each) => each.state._tag === tag)).map((item) => ({
+			via: tag,
+			item
+		})));
+		const lasting = slots(stateless ? SINGLE : definition.states[0], true, shown).map((item) => ({ item }));
+		return {
+			node,
+			children: [...byState, ...lasting]
+		};
+	};
+	return {
+		tree: actor(root, [snapshot], root.name, false, /* @__PURE__ */ new Set()),
+		find: (id) => drawnAt.get(id) ?? drawnAt.get(slotOf(id))
+	};
+};
+//#endregion
+export { treeOf };
+
+//# sourceMappingURL=tree.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tree.js","names":[],"sources":["../../../../src/recipes/kabuki-devtools/scene/tree.ts"],"sourcesContent":["import { isMany } from '@kestack/kabuki';\nimport type { ActorDefinition, Instance, Snapshot } from '@kestack/kabuki';\nimport { measure } from './nodes.ts';\nimport type { Item, WorkerKey, WorkerRow, WorkerStatus } from './nodes.ts';\n\n/*\n * The Map's tree: its shape from the Actors alone, what runs in it from one\n * Snapshot.\n *\n * One Node per place an Actor can run. Below it: the Children each of its\n * States Invokes, marked with that State, then the Children written at its\n * top. A dim Actor is drawn with everything below it, except an Actor\n * already above it, so a tree of itself ends.\n *\n * Every Node holds every Instance at its place now: one for a fixed Child,\n * any number for a slot of keyed Children. A slot of keyed Children shows\n * one of them, the chosen one: its States count every Instance but mark the\n * chosen one's, its Workers are the chosen one's, and only the chosen one's\n * Children hang below it, so every place below holds at most what one\n * Instance has. Unless another is chosen, it is the one on the way to the\n * Step's Message, or the first.\n *\n * Every Instance and Worker key is found at the Node it is drawn on, and an\n * Instance the Step stopped at its slot's Node, so a Message it Sent still\n * has somewhere to start.\n */\n\n/** What the live app says of an Instance's Workers; nothing away from it. */\nexport type Statuses = (instance: string) =>\n  | ReadonlyArray<{\n      readonly name: string;\n      readonly key: string;\n      readonly status: Exclude<WorkerStatus, 'on'>;\n    }>\n  | undefined;\n\nconst SINGLE = 'Single';\n\nconst isStateless = (definition: ActorDefinition) =>\n  definition.states.length === 1 && definition.states[0] === SINGLE;\n\n/** An Instance ID without its key and how many times it was Invoked: its parent's ID and its slot. */\nconst slotOf = (id: string) => id.replace(/(\\[[^\\]]*\\])?#\\d+$/, '');\n\nconst asList = (\n  held: Instance | ReadonlyArray<Instance> | undefined,\n): ReadonlyArray<Instance> =>\n  held === undefined ? [] : isMany(held) ? held : [held];\n\nexport const treeOf = (\n  root: ActorDefinition,\n  snapshot: Snapshot,\n  statuses: Statuses,\n  /** The Instance chosen at a place of many, by the place's ID. */\n  chosen: ReadonlyMap<string, string> = new Map(),\n  /** Instances to choose first, unless one is chosen: the Message's ends. */\n  toward: ReadonlyArray<string> = [],\n): {\n  readonly tree: Item;\n  /** The Node an Instance, or one of its Worker keys, is drawn on. */\n  readonly find: (id: string) => string | undefined;\n} => {\n  const drawnAt = new Map<string, string>();\n\n  /** One row per Worker the Actor has, each with the keys its Instances run now. */\n  const workers = (\n    definition: ActorDefinition,\n    instances: ReadonlyArray<Instance>,\n    owner: string,\n  ): ReadonlyArray<WorkerRow> =>\n    Object.entries(definition.workers).map(([name, worker]) => ({\n      name,\n      ...(worker.state === undefined ? {} : { state: worker.state }),\n      keys: instances.flatMap((instance) => {\n        if (worker.state !== undefined && worker.state !== instance.state._tag)\n          return [];\n        const live = statuses(instance.id);\n        const data = {\n          model: instance.model,\n          state: instance.state,\n          props: instance.props,\n        };\n        return worker.keys(data).map((key): WorkerKey => {\n          const id = `${instance.id}~${name}#${key}`;\n          drawnAt.set(id, owner);\n          return {\n            id,\n            key,\n            instance,\n            status: live\n              ? (live.find((each) => each.name === name && each.key === key)\n                  ?.status ?? 'running')\n              : 'on',\n          };\n        });\n      }),\n    }));\n\n  const actor = (\n    definition: ActorDefinition,\n    instances: ReadonlyArray<Instance>,\n    id: string,\n    many: boolean,\n    above: ReadonlySet<ActorDefinition>,\n  ): Item => {\n    for (const instance of instances) drawnAt.set(instance.id, id);\n    const stateless = isStateless(definition);\n    const pick = many\n      ? (instances.find((each) => each.id === chosen.get(id)) ??\n        instances.find((each) =>\n          toward.some((to) => to === each.id || to.startsWith(`${each.id}/`)),\n        ) ??\n        instances[0])\n      : undefined;\n    // What the card shows and what hangs below it: the chosen one's, at a place of many.\n    const shown = many ? (pick ? [pick] : []) : instances;\n    const size = measure(\n      definition.name,\n      many,\n      stateless ? undefined : definition.states,\n      Object.keys(definition.workers),\n    );\n    const count = (tag: string) =>\n      instances.filter((each) => each.state._tag === tag).length;\n    const node = {\n      id,\n      name: definition.name,\n      many,\n      instances,\n      ...(pick ? { chosen: pick } : {}),\n      ...(stateless\n        ? {}\n        : {\n            states: size.lines.map((line) =>\n              line.map((tag) => ({ tag, count: count(tag) })),\n            ),\n          }),\n      workers: workers(definition, shown, id),\n      width: size.width,\n      height: size.height,\n    };\n    // A dim Actor already above it would draw itself forever.\n    if (instances.length === 0 && above.has(definition))\n      return { node, children: [] };\n    const below = new Set(above).add(definition);\n\n    /** The slots written in one State, or at the top, held by `holders`. */\n    const slots = (\n      state: string,\n      lasting: boolean,\n      holders: ReadonlyArray<Instance>,\n    ) =>\n      Object.entries(definition.children[state] ?? {})\n        .filter(([name]) => definition.lasting.includes(name) === lasting)\n        .map(([name, held]) => {\n          const slot = `${id}>${name}`;\n          // An Instance this Step stopped is found at its slot.\n          for (const holder of instances)\n            drawnAt.set(`${holder.id}/${name}`, slot);\n          return actor(\n            held.definition,\n            holders.flatMap((holder) => asList(holder.children[name])),\n            slot,\n            held.many,\n            below,\n          );\n        });\n\n    const byState = stateless\n      ? slots(SINGLE, false, shown).map((item) => ({ item }))\n      : definition.states.flatMap((tag) =>\n          slots(\n            tag,\n            false,\n            shown.filter((each) => each.state._tag === tag),\n          ).map((item) => ({ via: tag, item })),\n        );\n    const lasting = slots(\n      stateless ? SINGLE : definition.states[0]!,\n      true,\n      shown,\n    ).map((item) => ({ item }));\n    return { node, children: [...byState, ...lasting] };\n  };\n\n  const tree = actor(root, [snapshot], root.name, false, new Set());\n  return {\n    tree,\n    find: (id) => drawnAt.get(id) ?? drawnAt.get(slotOf(id)),\n  };\n};\n"],"mappings":"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"}

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

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

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

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

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

@@ -0,0 +1,33 @@
+import { Tone } from "../ink/ink.js";
+import "../ink/index.js";
+import { ReactNode } from "react";
+//#region src/recipes/kabuki-devtools/sheet/sheet.d.ts
+export interface SheetFact {
+  readonly label: string;
+  readonly value: ReactNode;
+}
+export interface SheetRow {
+  readonly label: string;
+  readonly detail: string;
+  readonly tone: Tone;
+}
+export interface SheetSection {
+  readonly title: string;
+  readonly value: unknown;
+}
+export declare function Sheet({ kind, tone, title, facts, rows, sections, onClose }: {
+  /** What is picked: an Instance, a State, a Worker, the Message. */
+  readonly kind: string;
+  readonly tone?: Tone;
+  readonly title: string;
+  readonly facts?: ReadonlyArray<SheetFact>;
+  /** A short list, such as Workers, with its title. */
+  readonly rows?: {
+    readonly title: string;
+    readonly items: ReadonlyArray<SheetRow>;
+  };
+  readonly sections?: ReadonlyArray<SheetSection>;
+  readonly onClose: () => void;
+}): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=sheet.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sheet.d.ts","names":[],"sources":["../../../../src/recipes/kabuki-devtools/sheet/sheet.tsx"],"mappings":";;;;iBAsBiB;WACN;WACA,OAAO;;iBAGD;WACN;WACA;WACA,MAAM;;iBAGA;WACN;WACA;;wBAKK,QACd,MACA,MACA,OACA,OACA,MACA,UACA;;WAGS;WACA,OAAO;WACP;WACA,QAAQ,cAAc;;WAEtB;aACE;aACA,OAAO,cAAc;;WAEvB,WAAW,cAAc;WACzB;oBACV,IAAA"}

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

@@ -0,0 +1,129 @@
+import { cn } from "../../../components/lib/utils.js";
+import { ink } from "../ink/ink.js";
+import { JsonTree } from "../../../components/viewers/json/json-tree.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { motion, useReducedMotion } from "motion/react";
+import { X } from "lucide-react";
+//#region src/recipes/kabuki-devtools/sheet/sheet.tsx
+const OUT = [
+	.23,
+	1,
+	.32,
+	1
+];
+function Sheet({ kind, tone = "lit", title, facts = [], rows, sections = [], onClose }) {
+	const still = useReducedMotion();
+	return /* @__PURE__ */ jsx(motion.section, {
+		"aria-label": `${kind} ${title}`,
+		className: cn("bg-background absolute inset-x-0 bottom-0 z-30 flex max-h-[65%] flex-col overflow-hidden border-t @3xl:max-h-72", "rounded-t-xl shadow-[0_-1px_2px_rgb(0_0_0/0.04),0_-8px_24px_rgb(0_0_0/0.08)]", "@3xl:relative @3xl:z-auto @3xl:shrink-0 @3xl:rounded-none @3xl:shadow-none"),
+		initial: still ? false : { height: 0 },
+		animate: { height: "auto" },
+		exit: still ? {
+			height: 0,
+			transition: { duration: 0 }
+		} : {
+			height: 0,
+			transition: {
+				duration: .12,
+				ease: "easeIn"
+			}
+		},
+		transition: {
+			duration: .18,
+			ease: OUT
+		},
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex min-h-0 flex-1 flex-col",
+			children: [/* @__PURE__ */ jsxs("header", {
+				className: "flex shrink-0 items-center gap-3 px-4 pt-3 pb-2",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "min-w-0 flex-1",
+					children: [/* @__PURE__ */ jsx("p", {
+						className: "text-[10.5px] font-medium tracking-wider uppercase",
+						style: { color: ink(tone) },
+						children: kind
+					}), /* @__PURE__ */ jsx("h2", {
+						className: "truncate text-sm font-semibold",
+						children: title
+					})]
+				}), /* @__PURE__ */ jsx("button", {
+					type: "button",
+					"aria-label": "Close",
+					onClick: onClose,
+					className: "text-muted-foreground hover:text-foreground hover:bg-muted grid size-8 shrink-0 place-items-center rounded-md transition-colors duration-150 outline-none focus-visible:ring-2 [&_svg]:size-4",
+					children: /* @__PURE__ */ jsx(X, {})
+				})]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto overscroll-contain px-4 pb-4 @3xl:flex-row @3xl:gap-6 @3xl:overflow-x-auto @3xl:overflow-y-hidden",
+				children: [(facts.length > 0 || rows) && /* @__PURE__ */ jsxs("div", {
+					className: "flex shrink-0 flex-col gap-4 @3xl:w-64 @3xl:overflow-y-auto",
+					children: [facts.length > 0 && /* @__PURE__ */ jsx("dl", {
+						className: "grid grid-cols-[auto_1fr] gap-x-4 gap-y-1.5 text-xs",
+						children: facts.map((fact) => /* @__PURE__ */ jsxs("div", {
+							className: "contents",
+							children: [/* @__PURE__ */ jsx("dt", {
+								className: "text-muted-foreground",
+								children: fact.label
+							}), /* @__PURE__ */ jsx("dd", {
+								className: "min-w-0 truncate font-mono text-[11.5px]",
+								children: fact.value
+							})]
+						}, fact.label))
+					}), rows && /* @__PURE__ */ jsx(Part, {
+						title: rows.title,
+						children: rows.items.length === 0 ? /* @__PURE__ */ jsx("p", {
+							className: "text-muted-foreground text-xs",
+							children: "None running."
+						}) : /* @__PURE__ */ jsx("ul", {
+							className: "flex flex-col gap-1",
+							children: rows.items.map((row) => /* @__PURE__ */ jsxs("li", {
+								className: "flex items-center gap-2 text-xs",
+								children: [
+									/* @__PURE__ */ jsx("span", {
+										className: "size-1.5 shrink-0 rounded-full",
+										style: { backgroundColor: ink(row.tone) }
+									}),
+									/* @__PURE__ */ jsx("span", {
+										className: "min-w-0 flex-1 truncate font-mono text-[11.5px]",
+										children: row.label
+									}),
+									/* @__PURE__ */ jsx("span", {
+										className: "text-muted-foreground",
+										children: row.detail
+									})
+								]
+							}, row.label))
+						})
+					})]
+				}), sections.map((section) => /* @__PURE__ */ jsx(Part, {
+					title: section.title,
+					className: "@3xl:w-80 @3xl:shrink-0 @3xl:overflow-y-auto",
+					children: section.value !== null && typeof section.value === "object" ? /* @__PURE__ */ jsx("div", {
+						className: "bg-muted/40 rounded-lg border p-2",
+						children: /* @__PURE__ */ jsx(JsonTree, {
+							value: section.value,
+							collapsed: 2,
+							tone: "syntax"
+						})
+					}) : /* @__PURE__ */ jsx("p", {
+						className: "font-mono text-xs",
+						children: JSON.stringify(section.value) ?? "nothing"
+					})
+				}, section.title))]
+			})]
+		})
+	});
+}
+function Part({ title, className, children }) {
+	return /* @__PURE__ */ jsxs("section", {
+		className: cn("flex flex-col gap-1.5", className),
+		children: [/* @__PURE__ */ jsx("h3", {
+			className: "text-muted-foreground text-[10.5px] font-medium tracking-wider uppercase",
+			children: title
+		}), children]
+	});
+}
+//#endregion
+export { Sheet };
+
+//# sourceMappingURL=sheet.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sheet.js","names":[],"sources":["../../../../src/recipes/kabuki-devtools/sheet/sheet.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { motion, useReducedMotion } from 'motion/react';\nimport { X } from 'lucide-react';\nimport { cn } from '../../../components/lib/utils.ts';\nimport { JsonTree } from '../../../components/viewers/json/index.ts';\nimport { ink } from '../ink/index.ts';\nimport type { Tone } from '../ink/index.ts';\n\n/*\n * The Sheet: the data of what is picked, along the bottom of the Inspector.\n *\n * 1. Open   it grows up from the bottom, quickly, and shrinks away when\n *           closed. Picking something else changes what it says in place:\n *           it never closes and opens again.\n * 2. Fit    on a wide Inspector it is a section of its own under the Map,\n *           what is picked on its left and each value in a column beside\n *           it; on a narrow one it is a drawer over the Map, the full width,\n *           everything stacked.\n * 3. Read   what it is and its name, a few facts, a list such as its\n *           Workers, then each value as a tree.\n */\n\nexport interface SheetFact {\n  readonly label: string;\n  readonly value: ReactNode;\n}\n\nexport interface SheetRow {\n  readonly label: string;\n  readonly detail: string;\n  readonly tone: Tone;\n}\n\nexport interface SheetSection {\n  readonly title: string;\n  readonly value: unknown;\n}\n\nconst OUT = [0.23, 1, 0.32, 1] as const;\n\nexport function Sheet({\n  kind,\n  tone = 'lit',\n  title,\n  facts = [],\n  rows,\n  sections = [],\n  onClose,\n}: {\n  /** What is picked: an Instance, a State, a Worker, the Message. */\n  readonly kind: string;\n  readonly tone?: Tone;\n  readonly title: string;\n  readonly facts?: ReadonlyArray<SheetFact>;\n  /** A short list, such as Workers, with its title. */\n  readonly rows?: {\n    readonly title: string;\n    readonly items: ReadonlyArray<SheetRow>;\n  };\n  readonly sections?: ReadonlyArray<SheetSection>;\n  readonly onClose: () => void;\n}) {\n  const still = useReducedMotion();\n  return (\n    // 1. Open\n    <motion.section\n      aria-label={`${kind} ${title}`}\n      className={cn(\n        // 2. Fit: a drawer over the Map when narrow, a section under it when wide.\n        'bg-background absolute inset-x-0 bottom-0 z-30 flex max-h-[65%] flex-col overflow-hidden border-t @3xl:max-h-72',\n        'rounded-t-xl shadow-[0_-1px_2px_rgb(0_0_0/0.04),0_-8px_24px_rgb(0_0_0/0.08)]',\n        '@3xl:relative @3xl:z-auto @3xl:shrink-0 @3xl:rounded-none @3xl:shadow-none',\n      )}\n      initial={still ? false : { height: 0 }}\n      animate={{ height: 'auto' }}\n      exit={\n        still\n          ? { height: 0, transition: { duration: 0 } }\n          : { height: 0, transition: { duration: 0.12, ease: 'easeIn' } }\n      }\n      transition={{ duration: 0.18, ease: OUT }}\n    >\n      <div className=\"flex min-h-0 flex-1 flex-col\">\n        {/* 3. Read: what it is */}\n        <header className=\"flex shrink-0 items-center gap-3 px-4 pt-3 pb-2\">\n          <div className=\"min-w-0 flex-1\">\n            <p\n              className=\"text-[10.5px] font-medium tracking-wider uppercase\"\n              style={{ color: ink(tone) }}\n            >\n              {kind}\n            </p>\n            <h2 className=\"truncate text-sm font-semibold\">{title}</h2>\n          </div>\n          <button\n            type=\"button\"\n            aria-label=\"Close\"\n            onClick={onClose}\n            className=\"text-muted-foreground hover:text-foreground hover:bg-muted grid size-8 shrink-0 place-items-center rounded-md transition-colors duration-150 outline-none focus-visible:ring-2 [&_svg]:size-4\"\n          >\n            <X />\n          </button>\n        </header>\n\n        <div className=\"flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto overscroll-contain px-4 pb-4 @3xl:flex-row @3xl:gap-6 @3xl:overflow-x-auto @3xl:overflow-y-hidden\">\n          {(facts.length > 0 || rows) && (\n            <div className=\"flex shrink-0 flex-col gap-4 @3xl:w-64 @3xl:overflow-y-auto\">\n              {facts.length > 0 && (\n                <dl className=\"grid grid-cols-[auto_1fr] gap-x-4 gap-y-1.5 text-xs\">\n                  {facts.map((fact) => (\n                    <div key={fact.label} className=\"contents\">\n                      <dt className=\"text-muted-foreground\">{fact.label}</dt>\n                      <dd className=\"min-w-0 truncate font-mono text-[11.5px]\">\n                        {fact.value}\n                      </dd>\n                    </div>\n                  ))}\n                </dl>\n              )}\n              {rows && (\n                <Part title={rows.title}>\n                  {rows.items.length === 0 ? (\n                    <p className=\"text-muted-foreground text-xs\">\n                      None running.\n                    </p>\n                  ) : (\n                    <ul className=\"flex flex-col gap-1\">\n                      {rows.items.map((row) => (\n                        <li\n                          key={row.label}\n                          className=\"flex items-center gap-2 text-xs\"\n                        >\n                          <span\n                            className=\"size-1.5 shrink-0 rounded-full\"\n                            style={{ backgroundColor: ink(row.tone) }}\n                          />\n                          <span className=\"min-w-0 flex-1 truncate font-mono text-[11.5px]\">\n                            {row.label}\n                          </span>\n                          <span className=\"text-muted-foreground\">\n                            {row.detail}\n                          </span>\n                        </li>\n                      ))}\n                    </ul>\n                  )}\n                </Part>\n              )}\n            </div>\n          )}\n\n          {/* 3. Read: each value */}\n          {sections.map((section) => (\n            <Part\n              key={section.title}\n              title={section.title}\n              className=\"@3xl:w-80 @3xl:shrink-0 @3xl:overflow-y-auto\"\n            >\n              {section.value !== null && typeof section.value === 'object' ? (\n                <div className=\"bg-muted/40 rounded-lg border p-2\">\n                  <JsonTree value={section.value} collapsed={2} tone=\"syntax\" />\n                </div>\n              ) : (\n                <p className=\"font-mono text-xs\">\n                  {JSON.stringify(section.value) ?? 'nothing'}\n                </p>\n              )}\n            </Part>\n          ))}\n        </div>\n      </div>\n    </motion.section>\n  );\n}\n\nfunction Part({\n  title,\n  className,\n  children,\n}: {\n  readonly title: string;\n  readonly className?: string;\n  readonly children: ReactNode;\n}) {\n  return (\n    <section className={cn('flex flex-col gap-1.5', className)}>\n      <h3 className=\"text-muted-foreground text-[10.5px] font-medium tracking-wider uppercase\">\n        {title}\n      </h3>\n      {children}\n    </section>\n  );\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+import { Timeline, TimelineBranch, TimelineStep } from "./timeline.js";
+export { Timeline, type TimelineBranch, type TimelineStep };

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

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

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

@@ -0,0 +1,25 @@
+//#region src/recipes/kabuki-devtools/timeline/timeline.d.ts
+export interface TimelineStep {
+  readonly id: string;
+  readonly label: string;
+}
+export interface TimelineBranch {
+  readonly id: string;
+  readonly label: string;
+}
+export declare function Timeline({ steps, shown, live, onShow, onLive, branches, branch, onBranch }: {
+  /** Every Step on the Branch in view, init first. */
+  readonly steps: ReadonlyArray<TimelineStep>;
+  /** The place of the Step shown. */
+  readonly shown: number;
+  /** Showing the Head of the running app. */
+  readonly live: boolean;
+  readonly onShow: (index: number) => void;
+  readonly onLive: () => void;
+  readonly branches?: ReadonlyArray<TimelineBranch>;
+  /** The Branch in view. */
+  readonly branch?: string;
+  readonly onBranch?: (id: string) => void;
+}): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=timeline.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"timeline.d.ts","names":[],"sources":["../../../../src/recipes/kabuki-devtools/timeline/timeline.tsx"],"mappings":";iBAgBiB;WACN;WACA;;iBAGM;WACN;WACA;;wBAGK,WACd,OACA,OACA,MACA,QACA,QACA,UACA,QACA;;WAGS,OAAO,cAAc;;WAErB;;WAEA;WACA,SAAS;WACT;WACA,WAAW,cAAc;;WAEzB;WACA,YAAY;oBACtB,IAAA"}

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

@@ -0,0 +1,122 @@
+import { cn } from "../../../components/lib/utils.js";
+import { ink } from "../ink/ink.js";
+import { useEffect, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronLeft, ChevronRight, GitBranch } from "lucide-react";
+//#region src/recipes/kabuki-devtools/timeline/timeline.tsx
+function Timeline({ steps, shown, live, onShow, onLive, branches = [], branch, onBranch }) {
+	const track = useRef(null);
+	useEffect(() => {
+		track.current?.querySelector("[aria-current=\"step\"]")?.scrollIntoView({
+			block: "nearest",
+			inline: "nearest"
+		});
+	}, [shown]);
+	const step = steps[shown];
+	const last = steps.length - 1;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "bg-background/90 flex h-14 shrink-0 items-center gap-2 border-t px-2 backdrop-blur-sm @md:gap-3 @md:px-3",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex",
+				children: [/* @__PURE__ */ jsx(Press, {
+					label: "Step back",
+					disabled: shown <= 0,
+					onClick: () => onShow(shown - 1),
+					children: /* @__PURE__ */ jsx(ChevronLeft, {})
+				}), /* @__PURE__ */ jsx(Press, {
+					label: "Step on",
+					disabled: shown >= last,
+					onClick: () => onShow(shown + 1),
+					children: /* @__PURE__ */ jsx(ChevronRight, {})
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				ref: track,
+				role: "list",
+				"aria-label": "Steps",
+				className: "flex h-full min-w-0 flex-1 items-center gap-[3px] overflow-x-auto px-1 [scrollbar-width:none]",
+				children: steps.map((each, index) => /* @__PURE__ */ jsx("button", {
+					type: "button",
+					role: "listitem",
+					title: `${index === 0 ? "init" : `${index}. ${each.label}`}`,
+					"aria-label": index === 0 ? "init" : `Step ${index}, ${each.label}`,
+					"aria-current": index === shown ? "step" : void 0,
+					onClick: () => onShow(index),
+					className: "group grid h-8 w-2.5 shrink-0 place-items-center outline-none",
+					children: /* @__PURE__ */ jsx("span", {
+						className: cn("w-[3px] rounded-full transition-[height,background-color] duration-150", index === shown ? "h-6" : "group-hover:bg-foreground/50 h-3 group-focus-visible:h-5"),
+						style: { backgroundColor: index === shown ? ink("message") : index < shown ? ink("line-lit") : ink("line") }
+					})
+				}, each.id))
+			}),
+			step && /* @__PURE__ */ jsxs("div", {
+				className: "hidden min-w-0 flex-col items-end leading-tight @md:flex",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "truncate text-xs font-medium",
+					children: shown === 0 ? "init" : step.label
+				}), /* @__PURE__ */ jsxs("span", {
+					className: "text-muted-foreground text-[10.5px] tabular-nums",
+					children: [
+						shown,
+						" of ",
+						last
+					]
+				})]
+			}),
+			branches.length > 1 && onBranch && /* @__PURE__ */ jsxs("label", {
+				className: "text-muted-foreground hover:text-foreground relative flex h-9 items-center gap-1.5 rounded-md border px-2 text-xs transition-colors duration-150 focus-within:ring-2",
+				children: [
+					/* @__PURE__ */ jsx(GitBranch, { className: "size-3.5" }),
+					/* @__PURE__ */ jsx("span", {
+						className: "sr-only",
+						children: "Branch in view"
+					}),
+					/* @__PURE__ */ jsx("select", {
+						value: branch,
+						onChange: (event) => onBranch(event.target.value),
+						className: "bg-transparent outline-none",
+						children: branches.map((each) => /* @__PURE__ */ jsx("option", {
+							value: each.id,
+							children: each.label
+						}, each.id))
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("button", {
+				type: "button",
+				onClick: onLive,
+				disabled: live,
+				className: cn("flex h-9 items-center gap-2 rounded-md border px-3 text-xs font-medium transition-[background-color,color,scale] duration-150 outline-none focus-visible:ring-2 active:scale-[0.97]", live ? "text-foreground cursor-default" : "text-muted-foreground hover:bg-muted hover:text-foreground"),
+				children: [/* @__PURE__ */ jsxs("span", {
+					className: "relative grid size-2 place-items-center",
+					children: [live && /* @__PURE__ */ jsx("span", {
+						className: "absolute inset-0 animate-ping rounded-full opacity-60 motion-reduce:hidden",
+						style: { backgroundColor: ink("active") }
+					}), /* @__PURE__ */ jsx("span", {
+						className: "size-2 rounded-full border",
+						style: live ? {
+							backgroundColor: ink("active"),
+							borderColor: ink("active")
+						} : { borderColor: "currentColor" }
+					})]
+				}), live ? "Live" : "Go live"]
+			})
+		]
+	});
+}
+function Press({ label, disabled, onClick, children }) {
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"aria-label": label,
+		title: label,
+		disabled,
+		onClick,
+		className: "text-muted-foreground hover:text-foreground hover:bg-muted grid size-9 place-items-center rounded-md transition-colors duration-150 outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-40 [&_svg]:size-4",
+		children
+	});
+}
+//#endregion
+export { Timeline };
+
+//# sourceMappingURL=timeline.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"timeline.js","names":[],"sources":["../../../../src/recipes/kabuki-devtools/timeline/timeline.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport { ChevronLeft, ChevronRight, GitBranch } from 'lucide-react';\nimport { cn } from '../../../components/lib/utils.ts';\nimport { ink } from '../ink/index.ts';\n\n/*\n * The Timeline: the bar under the Map for picking the Step shown.\n *\n * 1. Step    one step back or on.\n * 2. Track   one tick per Step on the Branch in view, init first; the one\n *            shown stands taller, and stays scrolled into view.\n * 3. Read    the Step shown: its place and its Message, once there is room.\n * 4. Branch  bring another Branch into view, when there is more than one.\n * 5. Live    back to the Head, or the sign that it is there.\n */\n\nexport interface TimelineStep {\n  readonly id: string;\n  readonly label: string;\n}\n\nexport interface TimelineBranch {\n  readonly id: string;\n  readonly label: string;\n}\n\nexport function Timeline({\n  steps,\n  shown,\n  live,\n  onShow,\n  onLive,\n  branches = [],\n  branch,\n  onBranch,\n}: {\n  /** Every Step on the Branch in view, init first. */\n  readonly steps: ReadonlyArray<TimelineStep>;\n  /** The place of the Step shown. */\n  readonly shown: number;\n  /** Showing the Head of the running app. */\n  readonly live: boolean;\n  readonly onShow: (index: number) => void;\n  readonly onLive: () => void;\n  readonly branches?: ReadonlyArray<TimelineBranch>;\n  /** The Branch in view. */\n  readonly branch?: string;\n  readonly onBranch?: (id: string) => void;\n}) {\n  const track = useRef<HTMLDivElement>(null);\n  useEffect(() => {\n    track.current\n      ?.querySelector<HTMLElement>('[aria-current=\"step\"]')\n      ?.scrollIntoView({ block: 'nearest', inline: 'nearest' });\n  }, [shown]);\n\n  const step = steps[shown];\n  const last = steps.length - 1;\n\n  return (\n    <div className=\"bg-background/90 flex h-14 shrink-0 items-center gap-2 border-t px-2 backdrop-blur-sm @md:gap-3 @md:px-3\">\n      {/* 1. Step */}\n      <div className=\"flex\">\n        <Press\n          label=\"Step back\"\n          disabled={shown <= 0}\n          onClick={() => onShow(shown - 1)}\n        >\n          <ChevronLeft />\n        </Press>\n        <Press\n          label=\"Step on\"\n          disabled={shown >= last}\n          onClick={() => onShow(shown + 1)}\n        >\n          <ChevronRight />\n        </Press>\n      </div>\n\n      {/* 2. Track */}\n      <div\n        ref={track}\n        role=\"list\"\n        aria-label=\"Steps\"\n        className=\"flex h-full min-w-0 flex-1 items-center gap-[3px] overflow-x-auto px-1 [scrollbar-width:none]\"\n      >\n        {steps.map((each, index) => (\n          <button\n            key={each.id}\n            type=\"button\"\n            role=\"listitem\"\n            title={`${index === 0 ? 'init' : `${index}. ${each.label}`}`}\n            aria-label={index === 0 ? 'init' : `Step ${index}, ${each.label}`}\n            aria-current={index === shown ? 'step' : undefined}\n            onClick={() => onShow(index)}\n            className=\"group grid h-8 w-2.5 shrink-0 place-items-center outline-none\"\n          >\n            <span\n              className={cn(\n                'w-[3px] rounded-full transition-[height,background-color] duration-150',\n                index === shown\n                  ? 'h-6'\n                  : 'group-hover:bg-foreground/50 h-3 group-focus-visible:h-5',\n              )}\n              style={{\n                backgroundColor:\n                  index === shown\n                    ? ink('message')\n                    : index < shown\n                      ? ink('line-lit')\n                      : ink('line'),\n              }}\n            />\n          </button>\n        ))}\n      </div>\n\n      {/* 3. Read */}\n      {step && (\n        <div className=\"hidden min-w-0 flex-col items-end leading-tight @md:flex\">\n          <span className=\"truncate text-xs font-medium\">\n            {shown === 0 ? 'init' : step.label}\n          </span>\n          <span className=\"text-muted-foreground text-[10.5px] tabular-nums\">\n            {shown} of {last}\n          </span>\n        </div>\n      )}\n\n      {/* 4. Branch */}\n      {branches.length > 1 && onBranch && (\n        <label className=\"text-muted-foreground hover:text-foreground relative flex h-9 items-center gap-1.5 rounded-md border px-2 text-xs transition-colors duration-150 focus-within:ring-2\">\n          <GitBranch className=\"size-3.5\" />\n          <span className=\"sr-only\">Branch in view</span>\n          <select\n            value={branch}\n            onChange={(event) => onBranch(event.target.value)}\n            className=\"bg-transparent outline-none\"\n          >\n            {branches.map((each) => (\n              <option key={each.id} value={each.id}>\n                {each.label}\n              </option>\n            ))}\n          </select>\n        </label>\n      )}\n\n      {/* 5. Live */}\n      <button\n        type=\"button\"\n        onClick={onLive}\n        disabled={live}\n        className={cn(\n          'flex h-9 items-center gap-2 rounded-md border px-3 text-xs font-medium transition-[background-color,color,scale] duration-150 outline-none focus-visible:ring-2 active:scale-[0.97]',\n          live\n            ? 'text-foreground cursor-default'\n            : 'text-muted-foreground hover:bg-muted hover:text-foreground',\n        )}\n      >\n        <span className=\"relative grid size-2 place-items-center\">\n          {live && (\n            <span\n              className=\"absolute inset-0 animate-ping rounded-full opacity-60 motion-reduce:hidden\"\n              style={{ backgroundColor: ink('active') }}\n            />\n          )}\n          <span\n            className=\"size-2 rounded-full border\"\n            style={\n              live\n                ? { backgroundColor: ink('active'), borderColor: ink('active') }\n                : { borderColor: 'currentColor' }\n            }\n          />\n        </span>\n        {live ? 'Live' : 'Go live'}\n      </button>\n    </div>\n  );\n}\n\nfunction Press({\n  label,\n  disabled,\n  onClick,\n  children,\n}: {\n  readonly label: string;\n  readonly disabled: boolean;\n  readonly onClick: () => void;\n  readonly children: React.ReactNode;\n}) {\n  return (\n    <button\n      type=\"button\"\n      aria-label={label}\n      title={label}\n      disabled={disabled}\n      onClick={onClick}\n      className=\"text-muted-foreground hover:text-foreground hover:bg-muted grid size-9 place-items-center rounded-md transition-colors duration-150 outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-40 [&_svg]:size-4\"\n    >\n      {children}\n    </button>\n  );\n}\n"],"mappings":"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"}

package/dist/recipes/key-bindings/index.d.ts

@@ -0,0 +1,2 @@
+import { BindingKeys, recorded } from "./key-bindings.js";
+export { BindingKeys, recorded };

package/dist/recipes/key-bindings/index.js

@@ -0,0 +1,2 @@
+import { BindingKeys, recorded } from "./key-bindings.js";
+export { BindingKeys, recorded };

package/dist/recipes/key-bindings/key-bindings.d.ts

@@ -0,0 +1,19 @@
+import { Binding, Shortcut } from "@kestack/use-keys";
+//#region src/recipes/key-bindings/key-bindings.d.ts
+/**
+ * One recorded key, as a Shortcut: Cmd on a Mac or Ctrl elsewhere becomes
+ * `mod`, so the key works on both.
+ */
+export declare const recorded: (name: string, held: ReadonlySet<string>) => Shortcut;
+/**
+ * A Binding's keys, step by step: `G` `G`, or `⌘` `K`. A hint shows only
+ * where there is a keyboard and Keys are on; `always` shows it anyway, as
+ * Settings lists every key.
+ */
+export declare function BindingKeys(props: {
+  readonly binding: Binding;
+  readonly always?: boolean;
+  readonly className?: string;
+}): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=key-bindings.d.ts.map

package/dist/recipes/key-bindings/key-bindings.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"key-bindings.d.ts","names":[],"sources":["../../../src/recipes/key-bindings/key-bindings.tsx"],"mappings":";;;;;;qBAaa,WAAQ,cAAgB,MAAQ,wBAAsB;;;;;;wBA0CnD,YAAY;WACjB,SAAS;WACT;WACA;oBACV,IAAA"}

package/dist/recipes/key-bindings/key-bindings.js

@@ -0,0 +1,61 @@
+import { cn } from "../../components/lib/utils.js";
+import { Kbd, KbdGroup } from "../../components/ui/kbd.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/recipes/key-bindings/key-bindings.tsx
+/** Whether this is an Apple device, where `mod` is Cmd. */
+const mac = () => typeof navigator !== "undefined" && /Mac|iPhone|iPad|iPod/.test(navigator.platform);
+/**
+* One recorded key, as a Shortcut: Cmd on a Mac or Ctrl elsewhere becomes
+* `mod`, so the key works on both.
+*/
+const recorded = (name, held) => {
+	const apple = mac();
+	return {
+		type: "shortcut",
+		key: name,
+		mod: held.has(apple ? "Meta" : "Control"),
+		ctrl: apple && held.has("Control"),
+		alt: held.has("Alt"),
+		shift: held.has("Shift") && /^[a-z]$|^[A-Z]/.test(name),
+		meta: !apple && held.has("Meta")
+	};
+};
+const KEY_NAMES = {
+	ArrowUp: "↑",
+	ArrowDown: "↓",
+	ArrowLeft: "←",
+	ArrowRight: "→",
+	Enter: "↵",
+	Escape: "Esc",
+	Space: "Space"
+};
+const labels = (step) => {
+	const apple = mac();
+	return [
+		step.mod !== false && (apple ? "⌘" : "Ctrl"),
+		step.ctrl !== false && (apple ? "⌃" : "Ctrl"),
+		step.alt !== false && (apple ? "⌥" : "Alt"),
+		step.shift !== false && "⇧",
+		step.meta !== false && (apple ? "⌘" : "Win"),
+		KEY_NAMES[step.key] ?? step.key.toUpperCase()
+	].filter((label) => label !== false);
+};
+/**
+* A Binding's keys, step by step: `G` `G`, or `⌘` `K`. A hint shows only
+* where there is a keyboard and Keys are on; `always` shows it anyway, as
+* Settings lists every key.
+*/
+function BindingKeys(props) {
+	const steps = props.binding.type === "shortcut" ? [props.binding] : props.binding.steps;
+	return /* @__PURE__ */ jsx(KbdGroup, {
+		className: cn("gap-0.5", props.always !== true && "hidden keys:inline-flex", props.className),
+		children: steps.map((step, i) => /* @__PURE__ */ jsx(KbdGroup, {
+			className: "gap-0.5",
+			children: labels(step).map((label) => /* @__PURE__ */ jsx(Kbd, { children: label }, label))
+		}, i))
+	});
+}
+//#endregion
+export { BindingKeys, recorded };
+
+//# sourceMappingURL=key-bindings.js.map