@kestack/web-platform 0.0.0-stage → 0.0.1

package/dist/recipes/gate-screens/gate-screens.js

@@ -0,0 +1,192 @@
+import { Button } from "../../components/ui/button.js";
+import { GoogleButton } from "../../components/ui/google-button.js";
+import { useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CircleAlert, LoaderCircle } from "lucide-react";
+//#region src/recipes/gate-screens/gate-screens.tsx
+/**
+* Every screen an app shows before an Account is open: checking who is
+* signed in, opening an Account, signing out, signed out (Google on the
+* cloud Backend, a name on the device Backend, and the way to the other),
+* and an Account that would not open. One card for all of them, so nothing
+* jumps between them. An Account Lost is the Account Lost recipe.
+*/
+function GateScreens(props) {
+	const { screen, title } = props;
+	switch (screen.kind) {
+		case "checking":
+		case "signingOut":
+		case "opening": return /* @__PURE__ */ jsx(Card, {
+			...props,
+			children: /* @__PURE__ */ jsxs("p", {
+				role: "status",
+				className: "flex h-10 items-center gap-2 text-sm text-muted-foreground",
+				children: [/* @__PURE__ */ jsx(LoaderCircle, {
+					className: "size-4 motion-safe:animate-spin",
+					"aria-hidden": "true"
+				}), screen.kind === "signingOut" ? "Signing out…" : screen.kind === "checking" ? "Checking who is signed in…" : `Opening ${screen.name}’s ${title}…`]
+			})
+		});
+		case "unopenable": return /* @__PURE__ */ jsx(Card, {
+			...props,
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "space-y-3",
+				children: [/* @__PURE__ */ jsxs("p", {
+					role: "alert",
+					className: "text-sm text-destructive",
+					children: [
+						"Couldn’t open ",
+						screen.name,
+						"’s ",
+						title,
+						" on this device."
+					]
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex gap-2",
+					children: [/* @__PURE__ */ jsx(Button, {
+						onClick: props.onRetry,
+						children: "Try again"
+					}), /* @__PURE__ */ jsxs(Button, {
+						variant: "outline",
+						onClick: props.onSignOut,
+						children: ["Sign out ", screen.name]
+					})]
+				})]
+			})
+		});
+		case "signedOut": return /* @__PURE__ */ jsx(SignedOut, {
+			...props,
+			unreachable: screen.unreachable
+		});
+	}
+}
+function SignedOut(props) {
+	if (props.backend === "device") return /* @__PURE__ */ jsx(Card, {
+		...props,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "space-y-3",
+			children: [/* @__PURE__ */ jsx(Button, {
+				onClick: () => void props.onSignIn(),
+				children: "Sign in"
+			}), /* @__PURE__ */ jsx(OtherBackend, {
+				...props,
+				to: "cloud"
+			})]
+		})
+	});
+	if (props.unreachable) return /* @__PURE__ */ jsx(Card, {
+		...props,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "space-y-3",
+			children: [
+				/* @__PURE__ */ jsx("p", {
+					role: "alert",
+					className: "text-sm text-destructive",
+					children: "Couldn’t reach the sign-in service."
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					variant: "outline",
+					onClick: props.onCheckAgain,
+					children: "Try again"
+				}),
+				props.hasDevice && /* @__PURE__ */ jsx(OtherBackend, {
+					...props,
+					to: "device"
+				})
+			]
+		})
+	});
+	return /* @__PURE__ */ jsx(Card, {
+		...props,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "space-y-3",
+			children: [/* @__PURE__ */ jsx(GoogleSignIn, { ...props }), props.hasDevice && /* @__PURE__ */ jsx(OtherBackend, {
+				...props,
+				to: "device"
+			})]
+		})
+	});
+}
+function OtherBackend(props) {
+	return /* @__PURE__ */ jsxs("p", {
+		className: "text-sm text-muted-foreground",
+		children: [
+			props.to === "device" ? `Or try ${props.title} on this device, without an account.` : "Or sign in with Google, to keep everything on every device.",
+			" ",
+			/* @__PURE__ */ jsx(Button, {
+				variant: "link",
+				className: "h-auto p-0",
+				onClick: () => props.onBackend(props.to),
+				children: props.to === "device" ? "Use this device" : "Use Google"
+			})
+		]
+	});
+}
+function GoogleSignIn(props) {
+	const [pending, setPending] = useState(false);
+	const [error, setError] = useState();
+	const { loginError, onLoginErrorShown } = props;
+	useEffect(() => {
+		if (loginError == null) return;
+		setError(loginError);
+		onLoginErrorShown?.();
+	}, [loginError, onLoginErrorShown]);
+	const start = async () => {
+		setPending(true);
+		setError(void 0);
+		try {
+			await props.onSignIn();
+		} catch {
+			setError("The sign-in service didn’t answer. Try again.");
+		} finally {
+			setPending(false);
+		}
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-3",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "w-fit",
+			children: /* @__PURE__ */ jsx(GoogleButton, {
+				theme: props.theme,
+				disabled: pending,
+				"aria-busy": pending || void 0,
+				onClick: () => void start()
+			})
+		}), error && /* @__PURE__ */ jsxs("p", {
+			role: "alert",
+			className: "flex items-start gap-1.5 text-sm text-destructive",
+			children: [/* @__PURE__ */ jsx(CircleAlert, {
+				className: "mt-0.5 size-4 shrink-0",
+				"aria-hidden": "true"
+			}), error]
+		})]
+	});
+}
+function Card(props) {
+	return /* @__PURE__ */ jsxs("main", {
+		className: "grid min-h-dvh place-items-center px-6 py-12",
+		children: [props.statusBar, /* @__PURE__ */ jsxs("section", {
+			className: "w-full max-w-sm space-y-8",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "space-y-4",
+				children: [props.mark, /* @__PURE__ */ jsxs("div", {
+					className: "space-y-2",
+					children: [/* @__PURE__ */ jsx("h1", {
+						className: "text-3xl font-semibold tracking-tight",
+						children: props.title
+					}), props.description && /* @__PURE__ */ jsx("p", {
+						className: "text-pretty text-muted-foreground",
+						children: props.description
+					})]
+				})]
+			}), /* @__PURE__ */ jsx("div", {
+				className: "min-h-10",
+				children: props.children
+			})]
+		})]
+	});
+}
+//#endregion
+export { GateScreens };
+
+//# sourceMappingURL=gate-screens.js.map

package/dist/recipes/gate-screens/gate-screens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gate-screens.js","names":[],"sources":["../../../src/recipes/gate-screens/gate-screens.tsx"],"sourcesContent":["import { CircleAlert, LoaderCircle } from 'lucide-react';\nimport { type ReactNode, useEffect, useState } from 'react';\n\nimport { Button } from '#components/ui/button';\nimport { GoogleButton } from '#components/ui/google-button';\n\n/** What stands in for an app while no Account is open, one per state. */\nexport type GateScreen =\n  | { kind: 'checking' }\n  | { kind: 'signingOut' }\n  | { kind: 'opening'; name: string }\n  | { kind: 'signedOut'; unreachable: boolean }\n  | { kind: 'unopenable'; name: string };\n\nexport interface GateScreensProps {\n  /** The app's name, as every screen titles it. */\n  title: string;\n  /** One line on what the app is for. */\n  description?: string;\n  /** The app's mark, above its name. */\n  mark?: ReactNode;\n  /** Whatever colors the status bar, such as the Theme's strip. */\n  statusBar?: ReactNode;\n  /** For the Google button. */\n  theme: 'light' | 'dark';\n  screen: GateScreen;\n  /** The Backend running, and whether the app has a device Backend to\n   * offer. */\n  backend: 'cloud' | 'device' | null;\n  hasDevice: boolean;\n  /** Why the last sign-in came back with nobody, shown once. */\n  loginError?: string | null;\n  onLoginErrorShown?: () => void;\n  onSignIn: () => Promise<void> | void;\n  onCheckAgain: () => void;\n  onRetry: () => void;\n  onSignOut: () => void;\n  onBackend: (backend: 'cloud' | 'device') => void;\n}\n\n/**\n * Every screen an app shows before an Account is open: checking who is\n * signed in, opening an Account, signing out, signed out (Google on the\n * cloud Backend, a name on the device Backend, and the way to the other),\n * and an Account that would not open. One card for all of them, so nothing\n * jumps between them. An Account Lost is the Account Lost recipe.\n */\nexport function GateScreens(props: GateScreensProps) {\n  const { screen, title } = props;\n  switch (screen.kind) {\n    case 'checking':\n    case 'signingOut':\n    case 'opening':\n      return (\n        <Card {...props}>\n          <p\n            role=\"status\"\n            className=\"flex h-10 items-center gap-2 text-sm text-muted-foreground\"\n          >\n            <LoaderCircle\n              className=\"size-4 motion-safe:animate-spin\"\n              aria-hidden=\"true\"\n            />\n            {screen.kind === 'signingOut'\n              ? 'Signing out…'\n              : screen.kind === 'checking'\n                ? 'Checking who is signed in…'\n                : `Opening ${screen.name}’s ${title}…`}\n          </p>\n        </Card>\n      );\n    case 'unopenable':\n      return (\n        <Card {...props}>\n          <div className=\"space-y-3\">\n            <p role=\"alert\" className=\"text-sm text-destructive\">\n              Couldn’t open {screen.name}’s {title} on this device.\n            </p>\n            <div className=\"flex gap-2\">\n              <Button onClick={props.onRetry}>Try again</Button>\n              <Button variant=\"outline\" onClick={props.onSignOut}>\n                Sign out {screen.name}\n              </Button>\n            </div>\n          </div>\n        </Card>\n      );\n    case 'signedOut':\n      return <SignedOut {...props} unreachable={screen.unreachable} />;\n  }\n}\n\nfunction SignedOut(props: GateScreensProps & { unreachable: boolean }) {\n  if (props.backend === 'device') {\n    return (\n      <Card {...props}>\n        <div className=\"space-y-3\">\n          <Button onClick={() => void props.onSignIn()}>Sign in</Button>\n          <OtherBackend {...props} to=\"cloud\" />\n        </div>\n      </Card>\n    );\n  }\n  if (props.unreachable) {\n    return (\n      <Card {...props}>\n        <div className=\"space-y-3\">\n          <p role=\"alert\" className=\"text-sm text-destructive\">\n            Couldn’t reach the sign-in service.\n          </p>\n          <Button variant=\"outline\" onClick={props.onCheckAgain}>\n            Try again\n          </Button>\n          {props.hasDevice && <OtherBackend {...props} to=\"device\" />}\n        </div>\n      </Card>\n    );\n  }\n  return (\n    <Card {...props}>\n      <div className=\"space-y-3\">\n        <GoogleSignIn {...props} />\n        {props.hasDevice && <OtherBackend {...props} to=\"device\" />}\n      </div>\n    </Card>\n  );\n}\n\n// The way from one Backend to the other.\nfunction OtherBackend(props: GateScreensProps & { to: 'device' | 'cloud' }) {\n  return (\n    <p className=\"text-sm text-muted-foreground\">\n      {props.to === 'device'\n        ? `Or try ${props.title} on this device, without an account.`\n        : 'Or sign in with Google, to keep everything on every device.'}{' '}\n      <Button\n        variant=\"link\"\n        className=\"h-auto p-0\"\n        onClick={() => props.onBackend(props.to)}\n      >\n        {props.to === 'device' ? 'Use this device' : 'Use Google'}\n      </Button>\n    </p>\n  );\n}\n\nfunction GoogleSignIn(props: GateScreensProps) {\n  const [pending, setPending] = useState(false);\n  const [error, setError] = useState<string>();\n  const { loginError, onLoginErrorShown } = props;\n  // The error a sign-in came back with, shown once.\n  useEffect(() => {\n    if (loginError == null) return;\n    setError(loginError);\n    onLoginErrorShown?.();\n  }, [loginError, onLoginErrorShown]);\n  const start = async () => {\n    setPending(true);\n    setError(undefined);\n    try {\n      await props.onSignIn();\n    } catch {\n      setError('The sign-in service didn’t answer. Try again.');\n    } finally {\n      setPending(false);\n    }\n  };\n  return (\n    <div className=\"space-y-3\">\n      <div className=\"w-fit\">\n        <GoogleButton\n          theme={props.theme}\n          disabled={pending}\n          aria-busy={pending || undefined}\n          onClick={() => void start()}\n        />\n      </div>\n      {error && (\n        <p\n          role=\"alert\"\n          className=\"flex items-start gap-1.5 text-sm text-destructive\"\n        >\n          <CircleAlert className=\"mt-0.5 size-4 shrink-0\" aria-hidden=\"true\" />\n          {error}\n        </p>\n      )}\n    </div>\n  );\n}\n\nfunction Card(props: GateScreensProps & { children: ReactNode }) {\n  return (\n    <main className=\"grid min-h-dvh place-items-center px-6 py-12\">\n      {props.statusBar}\n      <section className=\"w-full max-w-sm space-y-8\">\n        <div className=\"space-y-4\">\n          {props.mark}\n          <div className=\"space-y-2\">\n            <h1 className=\"text-3xl font-semibold tracking-tight\">\n              {props.title}\n            </h1>\n            {props.description && (\n              <p className=\"text-pretty text-muted-foreground\">\n                {props.description}\n              </p>\n            )}\n          </div>\n        </div>\n        <div className=\"min-h-10\">{props.children}</div>\n      </section>\n    </main>\n  );\n}\n"],"mappings":"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"}

package/dist/recipes/gate-screens/index.d.ts

@@ -0,0 +1,2 @@
+import { GateScreen, GateScreens, GateScreensProps } from "./gate-screens.js";
+export { type GateScreen, GateScreens, type GateScreensProps };

package/dist/recipes/gate-screens/index.js

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

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

@@ -0,0 +1,2 @@
+import { Inspector, KabukiDevtools } from "./kabuki-devtools.js";
+export { Inspector, KabukiDevtools };

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

@@ -0,0 +1,2 @@
+import { Inspector, KabukiDevtools } from "./kabuki-devtools.js";
+export { Inspector, KabukiDevtools };

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

@@ -0,0 +1,2 @@
+import { INK, TONE_NAMES, Tone, ink } from "./ink.js";
+export { INK, TONE_NAMES, type Tone, ink };

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

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

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

@@ -0,0 +1,37 @@
+import { CSSProperties } from "react";
+//#region src/recipes/kabuki-devtools/ink/ink.d.ts
+/** Everything the Map colours, by what it means. */
+declare const TONES: {
+  /** What runs, or the State an Instance is in. */
+  readonly lit: 'var(--foreground)';
+  /** What only could run. */
+  readonly dim: 'color-mix(in oklch, var(--foreground) 32%, transparent)';
+  /** A Link to something dim. */
+  readonly line: 'color-mix(in oklch, var(--foreground) 14%, transparent)';
+  /** A Link to something lit. */
+  readonly 'line-lit': 'color-mix(in oklch, var(--foreground) 42%, transparent)';
+  /** The State an Instance is in. */
+  readonly active: 'var(--positive)';
+  readonly 'active-soft': 'light-dark(oklch(0.95 0.045 145), oklch(0.32 0.07 145))';
+  /** A Worker at work. */
+  readonly running: 'light-dark(oklch(0.58 0.12 205), oklch(0.78 0.11 205))';
+  /** A Worker that failed. */
+  readonly failed: 'var(--destructive)';
+  /** The Step's Message: its Send and its Request. */
+  readonly message: 'light-dark(oklch(0.55 0.2 262), oklch(0.74 0.14 262))';
+  readonly 'message-soft': 'light-dark(oklch(0.95 0.03 262), oklch(0.3 0.07 262))';
+  /** A Command the Step's Update asked for. */
+  readonly command: 'light-dark(oklch(0.62 0.15 60), oklch(0.8 0.13 70))';
+  readonly 'command-soft': 'light-dark(oklch(0.96 0.04 70), oklch(0.32 0.06 65))';
+  /** Its dot grid. */
+  readonly grain: 'color-mix(in oklch, var(--foreground) 9%, transparent)';
+};
+export type Tone = keyof typeof TONES;
+/** The custom properties to set on the Inspector, once. */
+export declare const INK: CSSProperties;
+/** A tone, as a CSS value to use anywhere below the Inspector. */
+export declare const ink: (tone: Tone) => string;
+/** Every tone, for a swatch. */
+export declare const TONE_NAMES: ReadonlyArray<Tone>;
+//#endregion
+//# sourceMappingURL=ink.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ink.d.ts","names":[],"sources":["../../../../src/recipes/kabuki-devtools/ink/ink.ts"],"mappings":";;;cAeM;;WAEJ;;WAEA;;WAEA;;WAEA;;WAEA;WACA;;WAEA;;WAEA;;WAEA;WACA;;WAEA;WACA;;WAEA;;YAGU,oBAAoB;;qBAGnB,KAER;;qBAGQ,MAAG,MAAU;;qBAGb,YAAmC,cAAc"}

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

@@ -0,0 +1,37 @@
+//#region src/recipes/kabuki-devtools/ink/ink.ts
+/** Everything the Map colours, by what it means. */
+const TONES = {
+	/** What runs, or the State an Instance is in. */
+	lit: "var(--foreground)",
+	/** What only could run. */
+	dim: "color-mix(in oklch, var(--foreground) 32%, transparent)",
+	/** A Link to something dim. */
+	line: "color-mix(in oklch, var(--foreground) 14%, transparent)",
+	/** A Link to something lit. */
+	"line-lit": "color-mix(in oklch, var(--foreground) 42%, transparent)",
+	/** The State an Instance is in. */
+	active: "var(--positive)",
+	"active-soft": "light-dark(oklch(0.95 0.045 145), oklch(0.32 0.07 145))",
+	/** A Worker at work. */
+	running: "light-dark(oklch(0.58 0.12 205), oklch(0.78 0.11 205))",
+	/** A Worker that failed. */
+	failed: "var(--destructive)",
+	/** The Step's Message: its Send and its Request. */
+	message: "light-dark(oklch(0.55 0.2 262), oklch(0.74 0.14 262))",
+	"message-soft": "light-dark(oklch(0.95 0.03 262), oklch(0.3 0.07 262))",
+	/** A Command the Step's Update asked for. */
+	command: "light-dark(oklch(0.62 0.15 60), oklch(0.8 0.13 70))",
+	"command-soft": "light-dark(oklch(0.96 0.04 70), oklch(0.32 0.06 65))",
+	/** Its dot grid. */
+	grain: "color-mix(in oklch, var(--foreground) 9%, transparent)"
+};
+/** The custom properties to set on the Inspector, once. */
+const INK = Object.fromEntries(Object.entries(TONES).map(([tone, value]) => [`--kabuki-${tone}`, value]));
+/** A tone, as a CSS value to use anywhere below the Inspector. */
+const ink = (tone) => `var(--kabuki-${tone})`;
+/** Every tone, for a swatch. */
+const TONE_NAMES = Object.keys(TONES);
+//#endregion
+export { INK, TONE_NAMES, ink };
+
+//# sourceMappingURL=ink.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ink.js","names":[],"sources":["../../../../src/recipes/kabuki-devtools/ink/ink.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\n\n/*\n * The Inspector's colours: one name per thing the Map shows, each a CSS\n * custom property set once on the Inspector and read everywhere below it.\n *\n * Built on the Theme: lit is the foreground, dim and lines are the\n * foreground thinned, active is the Theme's positive and failed its\n * destructive. The three it lacks, running, message and command, are written\n * here in OKLCH as `light-dark()` pairs, so they follow the Theme's\n * `color-scheme` with no class of their own: darker and more vivid on a\n * light ground, lighter and calmer on a dark one.\n */\n\n/** Everything the Map colours, by what it means. */\nconst TONES = {\n  /** What runs, or the State an Instance is in. */\n  lit: 'var(--foreground)',\n  /** What only could run. */\n  dim: 'color-mix(in oklch, var(--foreground) 32%, transparent)',\n  /** A Link to something dim. */\n  line: 'color-mix(in oklch, var(--foreground) 14%, transparent)',\n  /** A Link to something lit. */\n  'line-lit': 'color-mix(in oklch, var(--foreground) 42%, transparent)',\n  /** The State an Instance is in. */\n  active: 'var(--positive)',\n  'active-soft': 'light-dark(oklch(0.95 0.045 145), oklch(0.32 0.07 145))',\n  /** A Worker at work. */\n  running: 'light-dark(oklch(0.58 0.12 205), oklch(0.78 0.11 205))',\n  /** A Worker that failed. */\n  failed: 'var(--destructive)',\n  /** The Step's Message: its Send and its Request. */\n  message: 'light-dark(oklch(0.55 0.2 262), oklch(0.74 0.14 262))',\n  'message-soft': 'light-dark(oklch(0.95 0.03 262), oklch(0.3 0.07 262))',\n  /** A Command the Step's Update asked for. */\n  command: 'light-dark(oklch(0.62 0.15 60), oklch(0.8 0.13 70))',\n  'command-soft': 'light-dark(oklch(0.96 0.04 70), oklch(0.32 0.06 65))',\n  /** Its dot grid. */\n  grain: 'color-mix(in oklch, var(--foreground) 9%, transparent)',\n} as const;\n\nexport type Tone = keyof typeof TONES;\n\n/** The custom properties to set on the Inspector, once. */\nexport const INK = Object.fromEntries(\n  Object.entries(TONES).map(([tone, value]) => [`--kabuki-${tone}`, value]),\n) as CSSProperties;\n\n/** A tone, as a CSS value to use anywhere below the Inspector. */\nexport const ink = (tone: Tone) => `var(--kabuki-${tone})`;\n\n/** Every tone, for a swatch. */\nexport const TONE_NAMES = Object.keys(TONES) as ReadonlyArray<Tone>;\n"],"mappings":";;AAeA,MAAM,QAAQ;;CAEZ,KAAK;;CAEL,KAAK;;CAEL,MAAM;;CAEN,YAAY;;CAEZ,QAAQ;CACR,eAAe;;CAEf,SAAS;;CAET,QAAQ;;CAER,SAAS;CACT,gBAAgB;;CAEhB,SAAS;CACT,gBAAgB;;CAEhB,OAAO;AACT;;AAKA,MAAa,MAAM,OAAO,YACxB,OAAO,QAAQ,KAAK,CAAC,CAAC,KAAK,CAAC,MAAM,WAAW,CAAC,YAAY,QAAQ,KAAK,CAAC,CAC1E;;AAGA,MAAa,OAAO,SAAe,gBAAgB,KAAK;;AAGxD,MAAa,aAAa,OAAO,KAAK,KAAK"}

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

@@ -0,0 +1,40 @@
+import { Said } from "./scene/beats.js";
+import { Kind } from "./scene/layout/layout.js";
+import { sceneOf } from "./scene/scene.js";
+import "./scene/index.js";
+import { Timeline } from "./timeline/timeline.js";
+import { ComponentProps } from "react";
+import { ActorDefinition, Snapshot } from "@kestack/kabuki";
+import { AppRuntime } from "@kestack/kabuki/react";
+//#region src/recipes/kabuki-devtools/kabuki-devtools.d.ts
+type Statuses = NonNullable<Parameters<typeof sceneOf>[0]['statuses']>;
+export declare function KabukiDevtools({ runtime, layout, dotted, className }: {
+  /** The running app: `App.useRuntime()`. */
+  readonly runtime: AppRuntime;
+  /** How the Map is laid out: a packed tree, or an outline. */
+  readonly layout?: Kind;
+  /** Dots under the Map. On by default; off, a background given by `className` shows through. */
+  readonly dotted?: boolean;
+  /** Classes for its root, merged over its own: a see-through background over the app. */
+  readonly className?: string;
+}): import("react").JSX.Element;
+export declare function Inspector({ definition, step, statuses, layout, timeline, dotted, className }: {
+  /** The root Actor's definition. */
+  readonly definition: ActorDefinition;
+  /** The Step shown: its Snapshot, and the Message that made it; none for init. */
+  readonly step: {
+    readonly snapshot: Snapshot;
+    readonly said?: Said;
+  };
+  /** What the live app says of each Instance's Workers, while the Step shown is live. */
+  readonly statuses?: Statuses;
+  /** How the Map is laid out: a packed tree, or an outline. */
+  readonly layout?: Kind;
+  readonly timeline: ComponentProps<typeof Timeline>;
+  /** Dots under the Map. On by default. */
+  readonly dotted?: boolean;
+  /** Classes for its root, merged over its own. */
+  readonly className?: string;
+}): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=kabuki-devtools.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"kabuki-devtools.d.ts","names":[],"sources":["../../../src/recipes/kabuki-devtools/kabuki-devtools.tsx"],"mappings":";;;;;;;;;KA0CK,WAAW,YAAY,kBAAkB;wBAe9B,iBACd,SACA,QACA,QACA;;WAGS,SAAS;;WAET,SAAS;;WAET;;WAEA;oBACV,IAAA;wBAqEe,YACd,YACA,MACA,UACA,QACA,UACA,QACA;;WAGS,YAAY;;WAEZ;aAAiB,UAAU;aAAmB,OAAO;;;WAErD,WAAW;;WAEX,SAAS;WACT,UAAU,sBAAsB;;WAEhC;;WAEA;oBACV,IAAA"}

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

@@ -0,0 +1,279 @@
+import { cn } from "../../components/lib/utils.js";
+import { INK } from "./ink/ink.js";
+import { sceneOf } from "./scene/scene.js";
+import { AppMap } from "./map/map.js";
+import { Sheet } from "./sheet/sheet.js";
+import { Timeline } from "./timeline/timeline.js";
+import { useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AnimatePresence } from "motion/react";
+import { handle, isRestore } from "@kestack/kabuki";
+//#region src/recipes/kabuki-devtools/kabuki-devtools.tsx
+function KabukiDevtools({ runtime, layout, dotted, className }) {
+	const { history, branch, shown, running } = runtime;
+	const definition = history.actor.definition;
+	const steps = typeof shown === "number" && !branch.some((entry) => entry.id === shown) ? history.branch(shown) : branch;
+	const live = shown === null;
+	const at = shown === null ? steps.length : shown === "init" ? 0 : steps.findIndex((entry) => entry.id === shown) + 1;
+	const entry = at === 0 ? void 0 : steps[at - 1];
+	const asked = useRef(/* @__PURE__ */ new WeakMap());
+	const commandsOf = (of) => {
+		const known = asked.current.get(of);
+		if (known) return known;
+		const commands = isRestore(of.message) ? [] : handle(definition, history.snapshotAt(of.parent), of).commands;
+		asked.current.set(of, commands);
+		return commands;
+	};
+	const step = useMemo(() => ({
+		snapshot: history.snapshotAt(entry?.id ?? null),
+		...entry ? { said: {
+			envelope: entry,
+			commands: commandsOf(entry)
+		} } : {}
+	}), [history, entry]);
+	return /* @__PURE__ */ jsx(Inspector, {
+		definition,
+		step,
+		...layout ? { layout } : {},
+		...className ? { className } : {},
+		...dotted === void 0 ? {} : { dotted },
+		...live && running ? { statuses: runtime.workers } : {},
+		timeline: {
+			steps: [{
+				id: "init",
+				label: "init"
+			}, ...steps.map((each) => ({
+				id: `${each.id}`,
+				label: each.message._tag
+			}))],
+			shown: at,
+			live,
+			onShow: (index) => runtime.show(index === 0 ? "init" : steps[index - 1].id),
+			onLive: () => runtime.show(null)
+		}
+	});
+}
+function Inspector({ definition, step, statuses, layout, timeline, dotted, className }) {
+	const [picked, setPicked] = useState(void 0);
+	const [chosen, setChosen] = useState(() => /* @__PURE__ */ new Map());
+	const [folded, setFolded] = useState(() => /* @__PURE__ */ new Set());
+	const scene = useMemo(() => sceneOf({
+		definition,
+		snapshot: step.snapshot,
+		...step.said ? { said: step.said } : {},
+		...statuses ? { statuses } : {},
+		...layout ? { layout } : {},
+		chosen,
+		folded
+	}), [
+		definition,
+		step,
+		statuses,
+		layout,
+		chosen,
+		folded
+	]);
+	const sheet = picked && sheetOf(scene, picked);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("@container bg-background text-foreground relative flex h-full w-full flex-col overflow-clip", className),
+		style: INK,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "relative flex min-h-0 flex-1 flex-col",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "relative min-h-0 flex-1",
+				children: /* @__PURE__ */ jsx(AppMap, {
+					scene,
+					...dotted === void 0 ? {} : { dotted },
+					picked: sheet ? picked : void 0,
+					onPick: setPicked,
+					onChoose: (place, instance) => setChosen((was) => new Map(was).set(place, instance)),
+					onFold: (place) => setFolded((was) => {
+						const next = new Set(was);
+						if (!next.delete(place)) next.add(place);
+						return next;
+					})
+				})
+			}), /* @__PURE__ */ jsx(AnimatePresence, { children: sheet && /* @__PURE__ */ jsx(Sheet, {
+				...sheet,
+				onClose: () => setPicked(void 0)
+			}, "sheet") })]
+		}), /* @__PURE__ */ jsx(Timeline, { ...timeline })]
+	});
+}
+const dataOf = ({ _tag, ...data }) => data;
+const hasFields = (value) => Object.keys(value).length > 0;
+const isEmpty = (value) => value !== null && typeof value === "object" && !hasFields(value);
+const TONE = {
+	running: "running",
+	finished: "dim",
+	failed: "failed",
+	on: "lit"
+};
+const keyName = (name, key) => key.key === "" ? name : `${name}#${key.key}`;
+/** Who Sent the Message, in words. */
+const fromOf = ({ source, send }) => {
+	switch (source.kind) {
+		case "view": return "its View";
+		case "command": return `Command ${send?.by ?? source.name}`;
+		case "worker": return `Worker ${send?.by ?? source.name}`;
+		case "provide": return "what it Provides";
+		case "outside": return "outside the app";
+		case "restore": return "a Restore";
+	}
+};
+/** What the Sheet shows of a pick, or nothing if it is not in this Step. */
+const sheetOf = (scene, pick) => {
+	if ("message" in pick) {
+		const beats = scene.beats;
+		if (!beats) return void 0;
+		return {
+			kind: "Message",
+			tone: "message",
+			title: beats.tag,
+			facts: [
+				{
+					label: "To",
+					value: beats.to ? scene.at.get(beats.to).name : "dropped"
+				},
+				{
+					label: "From",
+					value: fromOf(beats)
+				},
+				{
+					label: "Time",
+					value: `${(beats.at / 1e3).toFixed(2)}s`
+				}
+			],
+			sections: [{
+				title: "Payload",
+				value: beats.payload
+			}, ...beats.commands.length ? [{
+				title: "Commands asked for",
+				value: beats.commands
+			}] : []]
+		};
+	}
+	const node = scene.at.get(pick.node);
+	if (!node) return void 0;
+	const { part } = pick;
+	if (part && "worker" in part) return workerSheet(node, part.worker, scene.live);
+	if (part && "state" in part) return stateSheet(node, part.state);
+	const one = pick.instance !== void 0 ? node.instances.find((each) => each.id === pick.instance) : !node.many ? node.instances[0] : void 0;
+	if (one) return instanceSheet(node.name, one);
+	if (node.instances.length === 0) return {
+		kind: "Actor",
+		tone: "dim",
+		title: node.name,
+		facts: [{
+			label: "Running",
+			value: "no Instance here at this Step"
+		}]
+	};
+	return {
+		kind: "Actor",
+		title: node.name,
+		facts: [{
+			label: "Instances",
+			value: node.instances.length
+		}, ...node.states ? [{
+			label: "In each State",
+			value: node.states.flat().map((option) => `${option.tag} ${option.count}`).join(" · ")
+		}] : []]
+	};
+};
+/** One Instance taken apart. */
+const instanceSheet = (name, instance) => {
+	const state = dataOf(instance.state);
+	return {
+		kind: "Instance",
+		title: instance.key === void 0 ? name : `${name}#${instance.key}`,
+		facts: [
+			{
+				label: "ID",
+				value: instance.id
+			},
+			...instance.state._tag === "Single" ? [] : [{
+				label: "State",
+				value: instance.state._tag
+			}],
+			...instance.key === void 0 ? [] : [{
+				label: "Key",
+				value: instance.key
+			}]
+		],
+		sections: [
+			...isEmpty(instance.model) ? [] : [{
+				title: "Model",
+				value: instance.model
+			}],
+			...hasFields(state) ? [{
+				title: `State ${instance.state._tag}`,
+				value: state
+			}] : [],
+			...instance.props === void 0 ? [] : [{
+				title: "Props",
+				value: instance.props
+			}]
+		]
+	};
+};
+/** One State of a card: which Instances are in it, and its data if one is. */
+const stateSheet = (node, tag) => {
+	const inIt = node.instances.filter((each) => each.state._tag === tag);
+	const data = !node.many && inIt[0] ? dataOf(inIt[0].state) : {};
+	return {
+		kind: "State",
+		tone: inIt.length ? "active" : "dim",
+		title: tag,
+		facts: [{
+			label: "Of",
+			value: node.name
+		}, node.many ? {
+			label: "Instances in it",
+			value: inIt.length
+		} : {
+			label: "Active",
+			value: inIt.length ? "yes" : node.instances[0] ? `no, it is in ${node.instances[0].state._tag}` : "not running at this Step"
+		}],
+		sections: hasFields(data) ? [{
+			title: "Data",
+			value: data
+		}] : []
+	};
+};
+/** One Worker of a card: where it is written, and each key it runs now. */
+const workerSheet = (node, name, live) => {
+	const row = node.workers.find((each) => each.name === name);
+	const keys = row?.keys ?? [];
+	return {
+		kind: "Worker",
+		tone: keys.some((each) => each.status === "failed") ? "failed" : keys.length ? "running" : "dim",
+		title: name,
+		facts: [
+			{
+				label: "Of",
+				value: node.name
+			},
+			{
+				label: "Written",
+				value: row?.state ? `in ${row.state}` : "at its top"
+			},
+			{
+				label: "Keys on",
+				value: keys.length || "none"
+			}
+		],
+		rows: {
+			title: live ? "Keys, live" : "Keys on at this Step",
+			items: keys.map((key) => ({
+				label: key.instance.key === void 0 ? keyName(name, key) : `${keyName(name, key)} · ${key.instance.key}`,
+				detail: key.status,
+				tone: TONE[key.status]
+			}))
+		}
+	};
+};
+//#endregion
+export { Inspector, KabukiDevtools };
+
+//# sourceMappingURL=kabuki-devtools.js.map