@posthog/wizard 2.9.1 → 2.10.0

package/dist/start-playground-B8qCLu7U.js

@@ -0,0 +1,1005 @@
+import { r as getBlockingServiceKeys } from "./readiness-Dn7eq8NE.js";
+import { _ as SplitView, a as HNViewer, b as Icons, c as EventPlanViewer, d as ConfirmationInput, f as GroupedPickerMenu, g as LoadingBox, h as ProgressList, i as LearnCard, l as LogViewer, m as PickerMenu, n as ServiceHealthList, o as TabContainer, r as TipsCard, s as ScreenContainer, t as McpScreen, u as ModalOverlay, v as CardLayout, x as WizardStore, y as Colors } from "./McpScreen-BmHapIaP.js";
+import * as fs$1 from "fs";
+import * as path$1 from "path";
+import * as os from "os";
+import { Box, Text, render, useInput } from "ink";
+import { createElement, useEffect, useRef, useState, useSyncExternalStore } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/ui/tui/playground/demos/WelcomeDemo.tsx
+/**
+* WelcomeDemo — Splash screen. Press enter to push the tabbed view.
+*/
+const WelcomeDemo = ({ store }) => {
+	useInput((_input, key) => {
+		if (key.return) store.completeSetup();
+	});
+	return /* @__PURE__ */ jsxs(Box, {
+		flexDirection: "column",
+		flexGrow: 1,
+		justifyContent: "center",
+		alignItems: "center",
+		children: [
+			/* @__PURE__ */ jsxs(Text, {
+				bold: true,
+				color: Colors.accent,
+				children: [Icons.diamond, " PostHog Setup Wizard layout primitives playground"]
+			}),
+			/* @__PURE__ */ jsx(Box, { height: 1 }),
+			/* @__PURE__ */ jsx(Text, { children: "Layout primitives for the PostHog Setup Wizard TUI." }),
+			/* @__PURE__ */ jsx(Text, {
+				dimColor: true,
+				children: "CardLayout, SplitView, TabContainer, ProgressList, and more."
+			}),
+			/* @__PURE__ */ jsx(Box, { height: 1 }),
+			/* @__PURE__ */ jsxs(Text, {
+				color: Colors.primary,
+				children: ["Press enter to continue ", Icons.triangleRight]
+			})
+		]
+	});
+};
+//#endregion
+//#region src/ui/tui/playground/demos/LayoutDemo.tsx
+/**
+* LayoutDemo — Demonstrates CardLayout + SplitView.
+* Cycles alignment enums with keyboard shortcuts.
+*/
+const hAligns = [
+	"flex-start",
+	"center",
+	"flex-end"
+];
+const vAligns = [
+	"flex-start",
+	"center",
+	"flex-end"
+];
+const hLabels = [
+	"Left",
+	"Center",
+	"Right"
+];
+const vLabels = [
+	"Top",
+	"Center",
+	"Bottom"
+];
+const LayoutDemo = () => {
+	const [hIdx, setHIdx] = useState(0);
+	const [vIdx, setVIdx] = useState(0);
+	useInput((input) => {
+		if (input === "h") setHIdx((i) => (i + 1) % hAligns.length);
+		if (input === "v") setVIdx((i) => (i + 1) % vAligns.length);
+	});
+	return /* @__PURE__ */ jsxs(Box, {
+		flexDirection: "column",
+		flexGrow: 1,
+		children: [
+			/* @__PURE__ */ jsx(Text, {
+				bold: true,
+				color: Colors.accent,
+				children: "Layout Demo"
+			}),
+			/* @__PURE__ */ jsxs(Text, {
+				dimColor: true,
+				children: [
+					"Press [h] to cycle hAlign (",
+					hLabels[hIdx],
+					"), [v] to cycle vAlign (",
+					vLabels[vIdx],
+					")"
+				]
+			}),
+			/* @__PURE__ */ jsx(Box, { height: 1 }),
+			/* @__PURE__ */ jsx(SplitView, {
+				left: /* @__PURE__ */ jsx(CardLayout, {
+					hAlign: hAligns[hIdx],
+					vAlign: vAligns[vIdx],
+					children: /* @__PURE__ */ jsx(Box, {
+						borderStyle: "single",
+						borderColor: Colors.primary,
+						paddingX: 1,
+						children: /* @__PURE__ */ jsx(Text, {
+							color: Colors.primary,
+							children: "Left Pane"
+						})
+					})
+				}),
+				right: /* @__PURE__ */ jsx(CardLayout, {
+					hAlign: "center",
+					vAlign: "center",
+					children: /* @__PURE__ */ jsx(Box, {
+						borderStyle: "single",
+						borderColor: Colors.accent,
+						paddingX: 1,
+						children: /* @__PURE__ */ jsx(Text, {
+							color: Colors.accent,
+							children: "Right Pane"
+						})
+					})
+				})
+			})
+		]
+	});
+};
+//#endregion
+//#region src/ui/tui/playground/demos/InputDemo.tsx
+/**
+* InputDemo — Demonstrates PickerMenu (single + multi) and ConfirmationInput.
+*/
+const InputDemo = () => {
+	const [step, setStep] = useState("single");
+	const [results, setResults] = useState([]);
+	if (step === "single") return /* @__PURE__ */ jsxs(Box, {
+		flexDirection: "column",
+		children: [
+			/* @__PURE__ */ jsx(Text, {
+				bold: true,
+				color: Colors.accent,
+				children: "Input Demo — Single Select"
+			}),
+			/* @__PURE__ */ jsx(Box, { height: 1 }),
+			/* @__PURE__ */ jsx(PickerMenu, {
+				message: "Pick a color",
+				options: [
+					{
+						label: "Red",
+						value: "red",
+						hint: "warm"
+					},
+					{
+						label: "Blue",
+						value: "blue",
+						hint: "cool"
+					},
+					{
+						label: "Green",
+						value: "green",
+						hint: "natural"
+					}
+				],
+				onSelect: (value) => {
+					setResults((prev) => [...prev, `Single: ${value}`]);
+					setStep("multi");
+				}
+			})
+		]
+	});
+	if (step === "multi") return /* @__PURE__ */ jsxs(Box, {
+		flexDirection: "column",
+		children: [
+			/* @__PURE__ */ jsx(Text, {
+				bold: true,
+				color: Colors.accent,
+				children: "Input Demo — Multi Select"
+			}),
+			/* @__PURE__ */ jsx(Box, { height: 1 }),
+			/* @__PURE__ */ jsx(PickerMenu, {
+				message: "Pick toppings",
+				mode: "multi",
+				options: [
+					{
+						label: "Cheese",
+						value: "cheese"
+					},
+					{
+						label: "Pepperoni",
+						value: "pepperoni"
+					},
+					{
+						label: "Mushrooms",
+						value: "mushrooms"
+					},
+					{
+						label: "Onions",
+						value: "onions"
+					}
+				],
+				onSelect: (values) => {
+					const arr = Array.isArray(values) ? values : [values];
+					setResults((prev) => [...prev, `Multi: ${arr.join(", ")}`]);
+					setStep("confirm");
+				}
+			})
+		]
+	});
+	if (step === "confirm") return /* @__PURE__ */ jsxs(Box, {
+		flexDirection: "column",
+		children: [
+			/* @__PURE__ */ jsx(Text, {
+				bold: true,
+				color: Colors.accent,
+				children: "Input Demo — Confirmation"
+			}),
+			/* @__PURE__ */ jsx(Box, { height: 1 }),
+			/* @__PURE__ */ jsx(ConfirmationInput, {
+				message: "Are you satisfied with your choices?",
+				onConfirm: () => {
+					setResults((prev) => [...prev, "Confirmed: Yes"]);
+					setStep("done");
+				},
+				onCancel: () => {
+					setResults((prev) => [...prev, "Confirmed: No"]);
+					setStep("done");
+				}
+			})
+		]
+	});
+	return /* @__PURE__ */ jsxs(Box, {
+		flexDirection: "column",
+		children: [
+			/* @__PURE__ */ jsx(Text, {
+				bold: true,
+				color: Colors.accent,
+				children: "Input Demo — Results"
+			}),
+			/* @__PURE__ */ jsx(Box, { height: 1 }),
+			results.map((r, i) => /* @__PURE__ */ jsxs(Text, {
+				color: Colors.success,
+				children: [
+					"✔",
+					" ",
+					r
+				]
+			}, i)),
+			/* @__PURE__ */ jsx(Box, { height: 1 }),
+			/* @__PURE__ */ jsx(Text, {
+				dimColor: true,
+				children: "Switch away from this tab and back to restart."
+			})
+		]
+	});
+};
+//#endregion
+//#region src/ui/tui/playground/demos/ProgressDemo.tsx
+/**
+* ProgressDemo — Demonstrates ProgressList + LoadingBox.
+* Auto-animates task progression through states.
+*/
+const INITIAL_ITEMS = [
+	{
+		label: "Detect framework",
+		activeForm: "Detecting framework",
+		status: "pending"
+	},
+	{
+		label: "Install dependencies",
+		activeForm: "Installing dependencies",
+		status: "pending"
+	},
+	{
+		label: "Configure PostHog",
+		activeForm: "Configuring PostHog",
+		status: "pending"
+	},
+	{
+		label: "Add analytics provider",
+		activeForm: "Adding analytics provider",
+		status: "pending"
+	},
+	{
+		label: "Verify setup",
+		activeForm: "Verifying setup",
+		status: "pending"
+	}
+];
+const ProgressDemo = () => {
+	const [items, setItems] = useState(INITIAL_ITEMS);
+	const [tick, setTick] = useState(0);
+	useEffect(() => {
+		const timer = setInterval(() => {
+			setTick((t) => t + 1);
+		}, 1500);
+		return () => clearInterval(timer);
+	}, []);
+	useEffect(() => {
+		const cycle = tick % (INITIAL_ITEMS.length + 2);
+		setItems(INITIAL_ITEMS.map((item, i) => {
+			if (i < cycle) return {
+				...item,
+				status: "completed"
+			};
+			if (i === cycle) return {
+				...item,
+				status: "in_progress"
+			};
+			return {
+				...item,
+				status: "pending"
+			};
+		}));
+	}, [tick]);
+	const allDone = items.every((i) => i.status === "completed");
+	return /* @__PURE__ */ jsxs(Box, {
+		flexDirection: "column",
+		flexGrow: 1,
+		children: [
+			/* @__PURE__ */ jsx(Text, {
+				bold: true,
+				color: Colors.accent,
+				children: "Progress Demo"
+			}),
+			/* @__PURE__ */ jsx(Text, {
+				dimColor: true,
+				children: "Tasks auto-advance every 1.5s (cycles continuously)"
+			}),
+			/* @__PURE__ */ jsx(Box, { height: 1 }),
+			/* @__PURE__ */ jsx(ProgressList, {
+				items,
+				title: "Setup in progress:"
+			}),
+			/* @__PURE__ */ jsx(Box, { height: 1 }),
+			!allDone && /* @__PURE__ */ jsx(LoadingBox, { message: "Working..." }),
+			allDone && /* @__PURE__ */ jsxs(Text, {
+				color: Colors.success,
+				bold: true,
+				children: ["✔", " All tasks complete! Restarting..."]
+			})
+		]
+	});
+};
+//#endregion
+//#region src/ui/tui/playground/demos/LogDemo.tsx
+/**
+* LogDemo — Demonstrates LogViewer.
+* Writes demo log lines to a temp file, then tails it.
+*/
+const DEMO_LOG_PATH = path$1.join(os.tmpdir(), "posthog-playground.log");
+const LOG_MESSAGES = [
+	"[info] Playground started",
+	"[info] Initializing demo components...",
+	"[debug] Loading primitives barrel export",
+	"[info] ScreenContainer mounted",
+	"[info] TabContainer initialized with 6 tabs",
+	"[debug] LayoutDemo: hAlign=Left, vAlign=Top",
+	"[info] NavigationDemo: screenStack depth = 1",
+	"[warn] TabDemo: arrow key conflict with outer container",
+	"[info] InputDemo: waiting for user selection",
+	"[info] ProgressDemo: tick 0, cycling tasks",
+	"[debug] LogViewer: watching file for changes",
+	"[info] All demos loaded successfully"
+];
+const LogDemo = () => {
+	const [ready, setReady] = useState(false);
+	useEffect(() => {
+		fs$1.writeFileSync(DEMO_LOG_PATH, LOG_MESSAGES.join("\n") + "\n");
+		setReady(true);
+		let lineNum = LOG_MESSAGES.length;
+		const timer = setInterval(() => {
+			lineNum++;
+			const msg = `[info] Demo log line #${lineNum} — ${(/* @__PURE__ */ new Date()).toISOString()}\n`;
+			fs$1.appendFileSync(DEMO_LOG_PATH, msg);
+		}, 2e3);
+		return () => {
+			clearInterval(timer);
+			try {
+				fs$1.unlinkSync(DEMO_LOG_PATH);
+			} catch {}
+		};
+	}, []);
+	return /* @__PURE__ */ jsxs(Box, {
+		flexDirection: "column",
+		flexGrow: 1,
+		children: [
+			/* @__PURE__ */ jsx(Text, {
+				bold: true,
+				color: Colors.accent,
+				children: "Log Demo"
+			}),
+			/* @__PURE__ */ jsxs(Text, {
+				dimColor: true,
+				children: [
+					"Tailing ",
+					DEMO_LOG_PATH,
+					" (new line every 2s)"
+				]
+			}),
+			/* @__PURE__ */ jsx(Box, { height: 1 }),
+			ready && /* @__PURE__ */ jsx(LogViewer, {
+				filePath: DEMO_LOG_PATH,
+				height: 15
+			})
+		]
+	});
+};
+//#endregion
+//#region src/ui/tui/playground/demos/RunScreenDemo.tsx
+/**
+* RunScreenDemo — Renders the real RunScreen with a mock store.
+* Tasks auto-advance every 1.5s. Discovered features (Stripe, LLM)
+* are pre-populated so conditional tips appear.
+*/
+const MOCK_TASKS = [
+	{
+		label: "Checking project structure and finding files for event tracking",
+		activeForm: "Checking project structure",
+		status: "pending",
+		done: false
+	},
+	{
+		label: "Verify PostHog dependencies",
+		activeForm: "Verifying PostHog dependencies",
+		status: "pending",
+		done: false
+	},
+	{
+		label: "Generate events plan (.posthog-events.json)",
+		activeForm: "Generating events plan",
+		status: "pending",
+		done: false
+	},
+	{
+		label: "Install posthog-js and posthog-node packages",
+		activeForm: "Installing packages",
+		status: "pending",
+		done: false
+	},
+	{
+		label: "Set up environment variables",
+		activeForm: "Setting up environment variables",
+		status: "pending",
+		done: false
+	},
+	{
+		label: "Create instrumentation-client.ts",
+		activeForm: "Creating instrumentation-client.ts",
+		status: "pending",
+		done: false
+	},
+	{
+		label: "Update next.config with rewrites",
+		activeForm: "Updating next.config",
+		status: "pending",
+		done: false
+	},
+	{
+		label: "Create posthog-server.ts",
+		activeForm: "Creating posthog-server.ts",
+		status: "pending",
+		done: false
+	},
+	{
+		label: "Add PostHog capture events to project files",
+		activeForm: "Adding capture events",
+		status: "pending",
+		done: false
+	}
+];
+const MOCK_EVENTS = [
+	{
+		name: "page_viewed",
+		description: "Fires when a user views any page"
+	},
+	{
+		name: "button_clicked",
+		description: "Fires when the CTA button is clicked"
+	},
+	{
+		name: "form_submitted",
+		description: "Fires when the contact form is submitted"
+	},
+	{
+		name: "signup_started",
+		description: "Fires when a user begins the signup flow"
+	}
+];
+const RunScreenDemo = ({ store }) => {
+	const tickRef = useRef(0);
+	const lastStatusRef = useRef("");
+	useEffect(() => {
+		store.addDiscoveredFeature("stripe");
+		store.addDiscoveredFeature("llm");
+		store.setEventPlan(MOCK_EVENTS);
+		store.pushStatus("Checking project structure.");
+		lastStatusRef.current = "Checking project structure.";
+		const initial = MOCK_TASKS.map((t, i) => i === 0 ? {
+			...t,
+			status: "in_progress"
+		} : t);
+		store.setTasks(initial);
+	}, []);
+	useEffect(() => {
+		const timer = setInterval(() => {
+			tickRef.current += 1;
+			const tick = tickRef.current;
+			const total = MOCK_TASKS.length;
+			const cycle = tick % (total + 3);
+			const tasks = MOCK_TASKS.map((t, i) => {
+				if (i < cycle) return {
+					...t,
+					status: "completed",
+					done: true
+				};
+				if (i === cycle) return {
+					...t,
+					status: "in_progress",
+					done: false
+				};
+				return {
+					...t,
+					status: "pending",
+					done: false
+				};
+			});
+			store.setTasks(tasks);
+			if (cycle < total) {
+				const msg = MOCK_TASKS[cycle].activeForm + "...";
+				if (msg !== lastStatusRef.current) {
+					store.pushStatus(msg);
+					lastStatusRef.current = msg;
+				}
+			}
+		}, 1500);
+		return () => clearInterval(timer);
+	}, []);
+	useSyncExternalStore((cb) => store.subscribe(cb), () => store.getSnapshot());
+	const progressItems = store.tasks.map((t) => ({
+		label: t.label,
+		activeForm: t.activeForm,
+		status: t.status
+	}));
+	const statuses = store.statusMessages.length > 0 ? store.statusMessages : void 0;
+	return /* @__PURE__ */ jsx(TabContainer, {
+		tabs: [
+			{
+				id: "status",
+				label: "Status",
+				component: /* @__PURE__ */ jsx(SplitView, {
+					left: store.learnCardComplete ? /* @__PURE__ */ jsx(TipsCard, { store }) : /* @__PURE__ */ jsx(LearnCard, {
+						store,
+						onComplete: () => store.setLearnCardComplete()
+					}),
+					right: /* @__PURE__ */ jsx(ProgressList, {
+						items: progressItems,
+						title: "Tasks"
+					})
+				})
+			},
+			...store.eventPlan.length > 0 ? [{
+				id: "events",
+				label: "Event plan",
+				component: /* @__PURE__ */ jsx(EventPlanViewer, { events: store.eventPlan })
+			}] : [],
+			{
+				id: "logs",
+				label: "Tail logs",
+				component: /* @__PURE__ */ jsx(LogViewer, { filePath: "/tmp/posthog-wizard.log" })
+			},
+			{
+				id: "hn",
+				label: "HN",
+				component: /* @__PURE__ */ jsx(HNViewer, {})
+			}
+		],
+		statusMessage: statuses,
+		expandableStatus: true,
+		store
+	});
+};
+//#endregion
+//#region src/ui/tui/playground/demos/HealthCheckDemo.tsx
+/**
+* HealthCheckDemo — Playground demo for health check UI components.
+*
+* Shows the ModalOverlay with ServiceHealthList, cycling through states:
+*   1. Checking (spinner) — 2 seconds
+*   2. Blocking outage modal (Anthropic down, npm degraded)
+*
+* Renders components directly (not HealthCheckScreen) to avoid useInput
+* conflicts with TabContainer's key handling.
+*/
+const HEALTHY = { status: "healthy" };
+const MOCK_HEALTH = {
+	anthropic: {
+		status: "down",
+		rawIndicator: "major"
+	},
+	posthogOverall: HEALTHY,
+	posthogComponents: { status: "healthy" },
+	github: HEALTHY,
+	npmOverall: {
+		status: "degraded",
+		rawIndicator: "minor"
+	},
+	npmComponents: {
+		status: "degraded",
+		degradedOrDownComponents: [{
+			name: "Registry API",
+			status: "degraded",
+			rawStatus: "degraded_performance"
+		}]
+	},
+	cloudflareOverall: HEALTHY,
+	cloudflareComponents: { status: "healthy" },
+	llmGateway: HEALTHY,
+	mcp: HEALTHY,
+	githubReleases: HEALTHY
+};
+const HealthCheckDemo = () => {
+	const [showOutage, setShowOutage] = useState(false);
+	useEffect(() => {
+		const timer = setTimeout(() => setShowOutage(true), 2e3);
+		return () => clearTimeout(timer);
+	}, []);
+	if (!showOutage) return /* @__PURE__ */ jsx(Box, {
+		flexDirection: "column",
+		flexGrow: 1,
+		alignItems: "center",
+		justifyContent: "center",
+		children: /* @__PURE__ */ jsx(LoadingBox, { message: "Checking service status..." })
+	});
+	const blockingKeys = getBlockingServiceKeys(MOCK_HEALTH);
+	return /* @__PURE__ */ jsxs(ModalOverlay, {
+		borderColor: "red",
+		title: `${Icons.warning} Ongoing service disruptions`,
+		width: 72,
+		footer: /* @__PURE__ */ jsx(Box, {
+			marginLeft: 2,
+			children: /* @__PURE__ */ jsx(Text, {
+				dimColor: true,
+				children: "Continue [Enter] / Exit [Esc] (disabled in playground)"
+			})
+		}),
+		children: [/* @__PURE__ */ jsxs(Box, {
+			flexDirection: "column",
+			marginBottom: 1,
+			children: [/* @__PURE__ */ jsx(Box, {
+				marginBottom: 1,
+				children: /* @__PURE__ */ jsxs(Text, { children: [
+					/* @__PURE__ */ jsx(Text, {
+						color: "red",
+						children: Icons.squareFilled
+					}),
+					/* @__PURE__ */ jsx(Text, {
+						dimColor: true,
+						children: " Down "
+					}),
+					/* @__PURE__ */ jsx(Text, {
+						color: "#DC9300",
+						children: Icons.squareFilled
+					}),
+					/* @__PURE__ */ jsx(Text, {
+						dimColor: true,
+						children: " Degraded"
+					})
+				] })
+			}), /* @__PURE__ */ jsx(ServiceHealthList, {
+				health: MOCK_HEALTH,
+				filterKeys: blockingKeys,
+				showHealthy: false
+			})]
+		}), /* @__PURE__ */ jsx(Text, {
+			dimColor: true,
+			children: "The wizard may not work reliably while services are affected."
+		})]
+	});
+};
+//#endregion
+//#region src/ui/tui/playground/demos/ModalDemo.tsx
+/**
+* ModalDemo — Playground demo for the ModalOverlay primitive.
+*
+* Shows several modal variants: info, warning, error, and one with feedback text.
+*/
+const ModalDemo = () => {
+	return /* @__PURE__ */ jsxs(Box, {
+		flexDirection: "column",
+		gap: 1,
+		flexGrow: 1,
+		children: [
+			/* @__PURE__ */ jsx(ModalOverlay, {
+				borderColor: "cyan",
+				title: "Info Modal",
+				width: 60,
+				children: /* @__PURE__ */ jsx(Text, { children: "A simple informational modal with default styling." })
+			}),
+			/* @__PURE__ */ jsx(ModalOverlay, {
+				borderColor: "#DC9300",
+				title: `${Icons.warning} Warning Modal`,
+				width: 60,
+				feedback: "Something needs your attention.",
+				children: /* @__PURE__ */ jsx(Text, { children: "This modal includes a feedback message shown in yellow." })
+			}),
+			/* @__PURE__ */ jsx(ModalOverlay, {
+				borderColor: "red",
+				title: `${Icons.warning} Error Modal`,
+				width: 60,
+				footer: /* @__PURE__ */ jsx(Box, {
+					marginLeft: 2,
+					children: /* @__PURE__ */ jsx(Text, {
+						dimColor: true,
+						children: "Continue [Enter] / Exit [Esc] (disabled in playground)"
+					})
+				}),
+				children: /* @__PURE__ */ jsx(Text, { children: "This modal has a footer section below a divider." })
+			})
+		]
+	});
+};
+//#endregion
+//#region src/ui/tui/playground/demos/McpDemo.tsx
+const MOCK_CLIENTS = [
+	{ name: "VS Code" },
+	{ name: "Cursor" },
+	{ name: "Windsurf" }
+];
+function createMockInstaller() {
+	return {
+		async detectClients() {
+			await new Promise((r) => setTimeout(r, 800));
+			return MOCK_CLIENTS;
+		},
+		async install(clientNames) {
+			await new Promise((r) => setTimeout(r, 1500));
+			return clientNames;
+		},
+		async remove() {
+			await new Promise((r) => setTimeout(r, 1e3));
+			return MOCK_CLIENTS.map((c) => c.name);
+		}
+	};
+}
+const McpDemo = ({ store }) => {
+	return /* @__PURE__ */ jsx(McpScreen, {
+		store,
+		installer: createMockInstaller(),
+		mode: "install"
+	});
+};
+//#endregion
+//#region src/ui/tui/playground/demos/KeyboardHintsDemo.tsx
+/**
+* KeyboardHintsDemo — Demonstrates the KeyboardHintsBar with all input types.
+*
+* Cycles through SinglePicker, MultiPicker, GroupedPicker, and Confirmation
+* so the user can see the hints bar update automatically for each component.
+* The bar appears at the bottom of the screen and dismisses 3s after the
+* first keypress, then reappears when the component changes.
+*/
+const STEP_LABELS = {
+	["single"]: "Single Select — hints: ↑↓ navigate, enter select",
+	["multi"]: "Multi Select — hints: ↑↓ navigate, space toggle, enter confirm",
+	["grouped"]: "Grouped Select — hints: ↑↓ navigate, space toggle, a toggle all, enter confirm",
+	["confirm"]: "Confirmation — hints: ←→ switch, enter confirm, esc cancel",
+	["done"]: "Done"
+};
+const KeyboardHintsDemo = () => {
+	const [step, setStep] = useState("single");
+	const [log, setLog] = useState([]);
+	const addLog = (msg) => setLog((prev) => [...prev.slice(-4), msg]);
+	if (step === "single") return /* @__PURE__ */ jsx(Wrapper, {
+		step,
+		log,
+		children: /* @__PURE__ */ jsx(PickerMenu, {
+			message: "Pick a framework",
+			options: [
+				{
+					label: "Next.js",
+					value: "next"
+				},
+				{
+					label: "React",
+					value: "react"
+				},
+				{
+					label: "Vue",
+					value: "vue"
+				},
+				{
+					label: "Svelte",
+					value: "svelte"
+				}
+			],
+			columns: 2,
+			onSelect: (v) => {
+				addLog(`Single: ${String(v)}`);
+				setStep("multi");
+			}
+		})
+	});
+	if (step === "multi") return /* @__PURE__ */ jsx(Wrapper, {
+		step,
+		log,
+		children: /* @__PURE__ */ jsx(PickerMenu, {
+			message: "Pick features to enable",
+			mode: "multi",
+			options: [
+				{
+					label: "Analytics",
+					value: "analytics"
+				},
+				{
+					label: "Session Replay",
+					value: "replay"
+				},
+				{
+					label: "Feature Flags",
+					value: "flags"
+				},
+				{
+					label: "Surveys",
+					value: "surveys"
+				}
+			],
+			onSelect: (values) => {
+				addLog(`Multi: ${(Array.isArray(values) ? values : [values]).join(", ")}`);
+				setStep("grouped");
+			}
+		})
+	});
+	if (step === "grouped") return /* @__PURE__ */ jsx(Wrapper, {
+		step,
+		log,
+		children: /* @__PURE__ */ jsx(GroupedPickerMenu, {
+			message: "Select integrations",
+			groups: {
+				Frontend: [{
+					label: "React SDK",
+					value: "react-sdk"
+				}, {
+					label: "Web Analytics",
+					value: "web-analytics"
+				}],
+				Backend: [{
+					label: "Node SDK",
+					value: "node-sdk"
+				}, {
+					label: "Python SDK",
+					value: "python-sdk"
+				}],
+				Tooling: [{
+					label: "MCP Server",
+					value: "mcp"
+				}, {
+					label: "CLI",
+					value: "cli"
+				}]
+			},
+			onSelect: (values) => {
+				addLog(`Grouped: ${values.join(", ")}`);
+				setStep("confirm");
+			}
+		})
+	});
+	if (step === "confirm") return /* @__PURE__ */ jsx(Wrapper, {
+		step,
+		log,
+		children: /* @__PURE__ */ jsx(ConfirmationInput, {
+			message: "Apply these settings?",
+			onConfirm: () => {
+				addLog("Confirmed!");
+				setStep("done");
+			},
+			onCancel: () => {
+				addLog("Cancelled");
+				setStep("done");
+			}
+		})
+	});
+	return /* @__PURE__ */ jsx(Wrapper, {
+		step,
+		log,
+		children: /* @__PURE__ */ jsx(Text, {
+			dimColor: true,
+			children: "All steps complete. Switch away from this tab and back to restart."
+		})
+	});
+};
+const Wrapper = ({ step, log, children }) => /* @__PURE__ */ jsxs(Box, {
+	flexDirection: "column",
+	children: [
+		/* @__PURE__ */ jsx(Text, {
+			bold: true,
+			color: Colors.accent,
+			children: "Keyboard Hints Demo"
+		}),
+		/* @__PURE__ */ jsx(Text, {
+			dimColor: true,
+			children: STEP_LABELS[step]
+		}),
+		/* @__PURE__ */ jsx(Box, { height: 1 }),
+		children,
+		log.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsx(Box, { height: 1 }),
+			/* @__PURE__ */ jsx(Text, {
+				dimColor: true,
+				children: "Log:"
+			}),
+			log.map((entry, i) => /* @__PURE__ */ jsxs(Text, {
+				color: Colors.muted,
+				children: [" ", entry]
+			}, i))
+		] })
+	]
+});
+//#endregion
+//#region src/ui/tui/playground/PlaygroundApp.tsx
+/**
+* PlaygroundApp — Root component for the primitives playground.
+*
+* Two screens mirroring the real wizard flow:
+*   intro → (press enter) → run (tabbed demo view)
+*/
+const PlaygroundApp = ({ store }) => {
+	return /* @__PURE__ */ jsx(ScreenContainer, {
+		store,
+		screens: {
+			intro: /* @__PURE__ */ jsx(WelcomeDemo, { store }),
+			run: /* @__PURE__ */ jsx(TabContainer, {
+				tabs: [
+					{
+						id: "layout",
+						label: "Layout",
+						component: /* @__PURE__ */ jsx(LayoutDemo, {})
+					},
+					{
+						id: "input",
+						label: "Input",
+						component: /* @__PURE__ */ jsx(InputDemo, {})
+					},
+					{
+						id: "progress",
+						label: "Progress",
+						component: /* @__PURE__ */ jsx(ProgressDemo, {})
+					},
+					{
+						id: "logs",
+						label: "Logs",
+						component: /* @__PURE__ */ jsx(LogDemo, {})
+					},
+					{
+						id: "run",
+						label: "RunScreen",
+						component: /* @__PURE__ */ jsx(RunScreenDemo, { store })
+					},
+					{
+						id: "health",
+						label: "HealthCheck",
+						component: /* @__PURE__ */ jsx(HealthCheckDemo, {})
+					},
+					{
+						id: "modal",
+						label: "Modal",
+						component: /* @__PURE__ */ jsx(ModalDemo, {})
+					},
+					{
+						id: "mcp",
+						label: "MCP",
+						component: /* @__PURE__ */ jsx(McpDemo, { store })
+					},
+					{
+						id: "hints",
+						label: "KeyHints",
+						component: /* @__PURE__ */ jsx(KeyboardHintsDemo, {})
+					}
+				],
+				statusMessage: "Primitives Playground — use arrow keys to switch tabs"
+			})
+		}
+	});
+};
+//#endregion
+//#region src/ui/tui/playground/start-playground.ts
+/**
+* start-playground.ts — Launches the TUI primitives playground.
+*/
+function startPlayground(version) {
+	const store = new WizardStore();
+	store.version = version;
+	store.setCredentials({
+		accessToken: "fake",
+		projectApiKey: "fake",
+		host: "https://app.posthog.com",
+		projectId: 0
+	});
+	const { unmount, waitUntilExit } = render(createElement(PlaygroundApp, { store }));
+	waitUntilExit().then(() => {
+		unmount();
+		process.exit(0);
+	});
+}
+//#endregion
+export { startPlayground };
+
+//# sourceMappingURL=start-playground-B8qCLu7U.js.map