@posthog/wizard 1.36.1 → 2.0.0

package/dist/src/ui/tui/flows.js

@@ -0,0 +1,82 @@
+/**
+ * Flow pipelines — declarative screen sequences for each wizard flow.
+ *
+ * Owns the Screen and Flow enums (re-exported by router.ts) to avoid
+ * circular imports between router ↔ flows.
+ *
+ * Each entry defines a screen, optional visibility predicate, and
+ * optional completion predicate. The router walks the active flow
+ * to resolve which screen to show.
+ */
+import { RunPhase } from '../../lib/wizard-session.js';
+// ── Screen + Flow enums ──────────────────────────────────────────────
+/** Screens that participate in linear flows */
+export var Screen;
+(function (Screen) {
+    Screen["Intro"] = "intro";
+    Screen["Setup"] = "setup";
+    Screen["Auth"] = "auth";
+    Screen["Run"] = "run";
+    Screen["Mcp"] = "mcp";
+    Screen["Outro"] = "outro";
+    Screen["McpAdd"] = "mcp-add";
+    Screen["McpRemove"] = "mcp-remove";
+})(Screen || (Screen = {}));
+/** Named flows the router can run */
+export var Flow;
+(function (Flow) {
+    Flow["Wizard"] = "wizard";
+    Flow["McpAdd"] = "mcp-add";
+    Flow["McpRemove"] = "mcp-remove";
+})(Flow || (Flow = {}));
+/**
+ * Check if the SetupScreen is needed (unresolved framework questions).
+ */
+function needsSetup(session) {
+    const config = session.frameworkConfig;
+    if (!config?.metadata.setup?.questions)
+        return false;
+    return config.metadata.setup.questions.some((q) => !(q.key in session.frameworkContext));
+}
+/** All flow pipelines. Add new screens by appending entries. */
+export const FLOWS = {
+    [Flow.Wizard]: [
+        {
+            screen: Screen.Intro,
+            isComplete: (s) => s.setupConfirmed,
+        },
+        {
+            screen: Screen.Setup,
+            show: needsSetup,
+            isComplete: (s) => !needsSetup(s),
+        },
+        {
+            screen: Screen.Auth,
+            isComplete: (s) => s.credentials !== null,
+        },
+        {
+            screen: Screen.Run,
+            isComplete: (s) => s.runPhase === RunPhase.Completed || s.runPhase === RunPhase.Error,
+        },
+        {
+            screen: Screen.Mcp,
+            isComplete: (s) => s.mcpComplete,
+        },
+        { screen: Screen.Outro },
+    ],
+    [Flow.McpAdd]: [
+        {
+            screen: Screen.McpAdd,
+            isComplete: (s) => s.mcpComplete,
+        },
+        { screen: Screen.Outro },
+    ],
+    [Flow.McpRemove]: [
+        {
+            screen: Screen.McpRemove,
+            isComplete: (s) => s.mcpComplete,
+        },
+        { screen: Screen.Outro },
+    ],
+};
+//# sourceMappingURL=flows.js.map

package/dist/src/ui/tui/flows.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flows.js","sourceRoot":"","sources":["../../../../src/ui/tui/flows.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,EAAsB,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAE3E,wEAAwE;AAExE,+CAA+C;AAC/C,MAAM,CAAN,IAAY,MASX;AATD,WAAY,MAAM;IAChB,yBAAe,CAAA;IACf,yBAAe,CAAA;IACf,uBAAa,CAAA;IACb,qBAAW,CAAA;IACX,qBAAW,CAAA;IACX,yBAAe,CAAA;IACf,4BAAkB,CAAA;IAClB,kCAAwB,CAAA;AAC1B,CAAC,EATW,MAAM,KAAN,MAAM,QASjB;AAED,qCAAqC;AACrC,MAAM,CAAN,IAAY,IAIX;AAJD,WAAY,IAAI;IACd,yBAAiB,CAAA;IACjB,0BAAkB,CAAA;IAClB,gCAAwB,CAAA;AAC1B,CAAC,EAJW,IAAI,KAAJ,IAAI,QAIf;AAaD;;GAEG;AACH,SAAS,UAAU,CAAC,OAAsB;IACxC,MAAM,MAAM,GAAG,OAAO,CAAC,eAAe,CAAC;IACvC,IAAI,CAAC,MAAM,EAAE,QAAQ,CAAC,KAAK,EAAE,SAAS;QAAE,OAAO,KAAK,CAAC;IAErD,OAAO,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,SAAS,CAAC,IAAI,CACzC,CAAC,CAAkB,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,OAAO,CAAC,gBAAgB,CAAC,CAC7D,CAAC;AACJ,CAAC;AAED,gEAAgE;AAChE,MAAM,CAAC,MAAM,KAAK,GAA8B;IAC9C,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE;QACb;YACE,MAAM,EAAE,MAAM,CAAC,KAAK;YACpB,UAAU,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc;SACpC;QACD;YACE,MAAM,EAAE,MAAM,CAAC,KAAK;YACpB,IAAI,EAAE,UAAU;YAChB,UAAU,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC;SAClC;QACD;YACE,MAAM,EAAE,MAAM,CAAC,IAAI;YACnB,UAAU,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,WAAW,KAAK,IAAI;SAC1C;QACD;YACE,MAAM,EAAE,MAAM,CAAC,GAAG;YAClB,UAAU,EAAE,CAAC,CAAC,EAAE,EAAE,CAChB,CAAC,CAAC,QAAQ,KAAK,QAAQ,CAAC,SAAS,IAAI,CAAC,CAAC,QAAQ,KAAK,QAAQ,CAAC,KAAK;SACrE;QACD;YACE,MAAM,EAAE,MAAM,CAAC,GAAG;YAClB,UAAU,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,WAAW;SACjC;QACD,EAAE,MAAM,EAAE,MAAM,CAAC,KAAK,EAAE;KACzB;IAED,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE;QACb;YACE,MAAM,EAAE,MAAM,CAAC,MAAM;YACrB,UAAU,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,WAAW;SACjC;QACD,EAAE,MAAM,EAAE,MAAM,CAAC,KAAK,EAAE;KACzB;IAED,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE;QAChB;YACE,MAAM,EAAE,MAAM,CAAC,SAAS;YACxB,UAAU,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,WAAW;SACjC;QACD,EAAE,MAAM,EAAE,MAAM,CAAC,KAAK,EAAE;KACzB;CACF,CAAC","sourcesContent":["/**\n * Flow pipelines — declarative screen sequences for each wizard flow.\n *\n * Owns the Screen and Flow enums (re-exported by router.ts) to avoid\n * circular imports between router ↔ flows.\n *\n * Each entry defines a screen, optional visibility predicate, and\n * optional completion predicate. The router walks the active flow\n * to resolve which screen to show.\n */\n\nimport { type WizardSession, RunPhase } from '../../lib/wizard-session.js';\n\n// ── Screen + Flow enums ──────────────────────────────────────────────\n\n/** Screens that participate in linear flows */\nexport enum Screen {\n  Intro = 'intro',\n  Setup = 'setup',\n  Auth = 'auth',\n  Run = 'run',\n  Mcp = 'mcp',\n  Outro = 'outro',\n  McpAdd = 'mcp-add',\n  McpRemove = 'mcp-remove',\n}\n\n/** Named flows the router can run */\nexport enum Flow {\n  Wizard = 'wizard',\n  McpAdd = 'mcp-add',\n  McpRemove = 'mcp-remove',\n}\n\n// ── Flow definitions ─────────────────────────────────────────────────\n\nexport interface FlowEntry {\n  /** Screen to show */\n  screen: Screen;\n  /** If provided, screen is skipped when this returns false. Omit = always show. */\n  show?: (session: WizardSession) => boolean;\n  /** If provided, screen is considered complete when this returns true. */\n  isComplete?: (session: WizardSession) => boolean;\n}\n\n/**\n * Check if the SetupScreen is needed (unresolved framework questions).\n */\nfunction needsSetup(session: WizardSession): boolean {\n  const config = session.frameworkConfig;\n  if (!config?.metadata.setup?.questions) return false;\n\n  return config.metadata.setup.questions.some(\n    (q: { key: string }) => !(q.key in session.frameworkContext),\n  );\n}\n\n/** All flow pipelines. Add new screens by appending entries. */\nexport const FLOWS: Record<Flow, FlowEntry[]> = {\n  [Flow.Wizard]: [\n    {\n      screen: Screen.Intro,\n      isComplete: (s) => s.setupConfirmed,\n    },\n    {\n      screen: Screen.Setup,\n      show: needsSetup,\n      isComplete: (s) => !needsSetup(s),\n    },\n    {\n      screen: Screen.Auth,\n      isComplete: (s) => s.credentials !== null,\n    },\n    {\n      screen: Screen.Run,\n      isComplete: (s) =>\n        s.runPhase === RunPhase.Completed || s.runPhase === RunPhase.Error,\n    },\n    {\n      screen: Screen.Mcp,\n      isComplete: (s) => s.mcpComplete,\n    },\n    { screen: Screen.Outro },\n  ],\n\n  [Flow.McpAdd]: [\n    {\n      screen: Screen.McpAdd,\n      isComplete: (s) => s.mcpComplete,\n    },\n    { screen: Screen.Outro },\n  ],\n\n  [Flow.McpRemove]: [\n    {\n      screen: Screen.McpRemove,\n      isComplete: (s) => s.mcpComplete,\n    },\n    { screen: Screen.Outro },\n  ],\n};\n"]}

package/dist/src/ui/tui/hooks/useStdoutDimensions.d.ts

@@ -0,0 +1,9 @@
+/**
+ * useStdoutDimensions — Returns [columns, rows] and re-renders on terminal resize.
+ *
+ * Ink's useStdout() does not subscribe to resize events, so layout only updates
+ * when something else causes a re-render. This hook listens to the stream's
+ * 'resize' event (Node TTY) and updates state so the component re-renders
+ * with the new dimensions.
+ */
+export declare function useStdoutDimensions(): [number, number];

package/dist/src/ui/tui/hooks/useStdoutDimensions.js

@@ -0,0 +1,37 @@
+/**
+ * useStdoutDimensions — Returns [columns, rows] and re-renders on terminal resize.
+ *
+ * Ink's useStdout() does not subscribe to resize events, so layout only updates
+ * when something else causes a re-render. This hook listens to the stream's
+ * 'resize' event (Node TTY) and updates state so the component re-renders
+ * with the new dimensions.
+ */
+import { useStdout } from 'ink';
+import { useState, useEffect } from 'react';
+export function useStdoutDimensions() {
+    const { stdout } = useStdout();
+    const [size, setSize] = useState(() => [
+        stdout.columns || 80,
+        stdout.rows || 24,
+    ]);
+    useEffect(() => {
+        const cols = stdout.columns || 80;
+        const rows = stdout.rows || 24;
+        setSize([cols, rows]);
+        const stream = stdout;
+        if (typeof stream.on !== 'function')
+            return;
+        const onResize = () => {
+            const c = stdout.columns || 80;
+            const r = stdout.rows || 24;
+            if (c > 0 && r > 0)
+                setSize([c, r]);
+        };
+        stream.on('resize', onResize);
+        return () => {
+            stream.off?.('resize', onResize);
+        };
+    }, [stdout]);
+    return size;
+}
+//# sourceMappingURL=useStdoutDimensions.js.map

package/dist/src/ui/tui/hooks/useStdoutDimensions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useStdoutDimensions.js","sourceRoot":"","sources":["../../../../../src/ui/tui/hooks/useStdoutDimensions.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AAChC,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5C,MAAM,UAAU,mBAAmB;IACjC,MAAM,EAAE,MAAM,EAAE,GAAG,SAAS,EAAE,CAAC;IAC/B,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAmB,GAAG,EAAE,CAAC;QACvD,MAAM,CAAC,OAAO,IAAI,EAAE;QACpB,MAAM,CAAC,IAAI,IAAI,EAAE;KAClB,CAAC,CAAC;IAEH,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,IAAI,GAAG,MAAM,CAAC,OAAO,IAAI,EAAE,CAAC;QAClC,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,IAAI,EAAE,CAAC;QAC/B,OAAO,CAAC,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC;QAEtB,MAAM,MAAM,GAAG,MAEd,CAAC;QACF,IAAI,OAAO,MAAM,CAAC,EAAE,KAAK,UAAU;YAAE,OAAO;QAE5C,MAAM,QAAQ,GAAG,GAAG,EAAE;YACpB,MAAM,CAAC,GAAG,MAAM,CAAC,OAAO,IAAI,EAAE,CAAC;YAC/B,MAAM,CAAC,GAAG,MAAM,CAAC,IAAI,IAAI,EAAE,CAAC;YAC5B,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC;gBAAE,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;QACtC,CAAC,CAAC;QACF,MAAM,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;QAC9B,OAAO,GAAG,EAAE;YACV,MAAM,CAAC,GAAG,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;QACnC,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,OAAO,IAAI,CAAC;AACd,CAAC","sourcesContent":["/**\n * useStdoutDimensions — Returns [columns, rows] and re-renders on terminal resize.\n *\n * Ink's useStdout() does not subscribe to resize events, so layout only updates\n * when something else causes a re-render. This hook listens to the stream's\n * 'resize' event (Node TTY) and updates state so the component re-renders\n * with the new dimensions.\n */\n\nimport { useStdout } from 'ink';\nimport { useState, useEffect } from 'react';\n\nexport function useStdoutDimensions(): [number, number] {\n  const { stdout } = useStdout();\n  const [size, setSize] = useState<[number, number]>(() => [\n    stdout.columns || 80,\n    stdout.rows || 24,\n  ]);\n\n  useEffect(() => {\n    const cols = stdout.columns || 80;\n    const rows = stdout.rows || 24;\n    setSize([cols, rows]);\n\n    const stream = stdout as NodeJS.WriteStream & {\n      on?(event: string, fn: () => void): void;\n    };\n    if (typeof stream.on !== 'function') return;\n\n    const onResize = () => {\n      const c = stdout.columns || 80;\n      const r = stdout.rows || 24;\n      if (c > 0 && r > 0) setSize([c, r]);\n    };\n    stream.on('resize', onResize);\n    return () => {\n      stream.off?.('resize', onResize);\n    };\n  }, [stdout]);\n\n  return size;\n}\n"]}

package/dist/src/ui/tui/ink-ui.d.ts

@@ -0,0 +1,50 @@
+/**
+ * InkUI — Ink-backed implementation of WizardUI.
+ *
+ * Translates business logic calls into store setter calls.
+ * No direct session mutation. No imperative screen transitions.
+ * The router derives the active screen from session state.
+ */
+import type { WizardUI, SpinnerHandle } from '../wizard-ui.js';
+import type { WizardStore } from './store.js';
+export declare class InkUI implements WizardUI {
+    private store;
+    constructor(store: WizardStore);
+    intro(message: string): void;
+    outro(message: string): void;
+    setCredentials(credentials: {
+        accessToken: string;
+        projectApiKey: string;
+        host: string;
+        projectId: number;
+    }): void;
+    setDetectedFramework(label: string): void;
+    onEnterScreen(screen: string, fn: () => void): void;
+    setLoginUrl(url: string | null): void;
+    showServiceStatus(data: {
+        description: string;
+        statusPageUrl: string;
+    }): void;
+    showSettingsOverride(keys: string[], backupAndFix: () => boolean): Promise<void>;
+    startRun(): void;
+    cancel(message: string): void;
+    log: {
+        info: (message: string) => void;
+        warn: (message: string) => void;
+        error: (message: string) => void;
+        success: (message: string) => void;
+        step: (message: string) => void;
+    };
+    note(message: string): void;
+    spinner(): SpinnerHandle;
+    pushStatus(message: string): void;
+    syncTodos(todos: Array<{
+        content: string;
+        status: string;
+        activeForm?: string;
+    }>): void;
+    setEventPlan(events: Array<{
+        name: string;
+        description: string;
+    }>): void;
+}

package/dist/src/ui/tui/ink-ui.js

@@ -0,0 +1,108 @@
+/**
+ * InkUI — Ink-backed implementation of WizardUI.
+ *
+ * Translates business logic calls into store setter calls.
+ * No direct session mutation. No imperative screen transitions.
+ * The router derives the active screen from session state.
+ */
+import { Overlay } from './router.js';
+import { RunPhase, OutroKind } from '../../lib/wizard-session.js';
+// Strip ANSI escape codes (chalk formatting) from strings
+// eslint-disable-next-line no-control-regex
+const ANSI_RE = /\x1b\[[0-9;]*m/g;
+function stripAnsi(s) {
+    return s.replace(ANSI_RE, '');
+}
+export class InkUI {
+    store;
+    constructor(store) {
+        this.store = store;
+    }
+    intro(message) {
+        this.store.pushStatus(message);
+    }
+    outro(message) {
+        this.store.pushStatus(stripAnsi(message));
+        if (!this.store.session.outroData) {
+            this.store.setOutroData({
+                kind: OutroKind.Success,
+                message: stripAnsi(message),
+            });
+        }
+        // Signal that the main work is done — router resolves to mcp or outro
+        if (this.store.session.runPhase === RunPhase.Running) {
+            this.store.setRunPhase(RunPhase.Completed);
+        }
+    }
+    setCredentials(credentials) {
+        this.store.setCredentials(credentials);
+    }
+    setDetectedFramework(label) {
+        this.store.setDetectedFramework(label);
+    }
+    onEnterScreen(screen, fn) {
+        this.store.onEnterScreen(screen, fn);
+    }
+    setLoginUrl(url) {
+        this.store.setLoginUrl(url);
+    }
+    showServiceStatus(data) {
+        this.store.setServiceStatus(data);
+        this.store.pushOverlay(Overlay.Outage);
+    }
+    showSettingsOverride(keys, backupAndFix) {
+        return this.store.showSettingsOverride(keys, backupAndFix);
+    }
+    startRun() {
+        this.store.setRunPhase(RunPhase.Running);
+    }
+    cancel(message) {
+        this.store.pushStatus(message);
+    }
+    log = {
+        info: (message) => {
+            this.store.pushStatus(message);
+        },
+        warn: (message) => {
+            this.store.pushStatus(message);
+        },
+        error: (message) => {
+            this.store.pushStatus(message);
+        },
+        success: (message) => {
+            this.store.pushStatus(message);
+        },
+        step: (message) => {
+            this.store.pushStatus(message);
+        },
+    };
+    note(message) {
+        this.store.pushStatus(message);
+    }
+    spinner() {
+        return {
+            start: (message) => {
+                if (message)
+                    this.store.pushStatus(message);
+            },
+            stop: (message) => {
+                if (message)
+                    this.store.pushStatus(message);
+            },
+            message: (msg) => {
+                if (msg)
+                    this.store.pushStatus(msg);
+            },
+        };
+    }
+    pushStatus(message) {
+        this.store.pushStatus(message);
+    }
+    syncTodos(todos) {
+        this.store.syncTodos(todos);
+    }
+    setEventPlan(events) {
+        this.store.setEventPlan(events);
+    }
+}
+//# sourceMappingURL=ink-ui.js.map

package/dist/src/ui/tui/ink-ui.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ink-ui.js","sourceRoot":"","sources":["../../../../src/ui/tui/ink-ui.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * InkUI — Ink-backed implementation of WizardUI.\n *\n * Translates business logic calls into store setter calls.\n * No direct session mutation. No imperative screen transitions.\n * The router derives the active screen from session state.\n */\n\nimport type { WizardUI, SpinnerHandle } from '../wizard-ui.js';\nimport type { WizardStore } from './store.js';\nimport { Overlay } from './router.js';\nimport { RunPhase, OutroKind } from '../../lib/wizard-session.js';\n\n// Strip ANSI escape codes (chalk formatting) from strings\n// eslint-disable-next-line no-control-regex\nconst ANSI_RE = /\\x1b\\[[0-9;]*m/g;\nfunction stripAnsi(s: string): string {\n  return s.replace(ANSI_RE, '');\n}\n\nexport class InkUI implements WizardUI {\n  constructor(private store: WizardStore) {}\n\n  intro(message: string): void {\n    this.store.pushStatus(message);\n  }\n\n  outro(message: string): void {\n    this.store.pushStatus(stripAnsi(message));\n\n    if (!this.store.session.outroData) {\n      this.store.setOutroData({\n        kind: OutroKind.Success,\n        message: stripAnsi(message),\n      });\n    }\n\n    // Signal that the main work is done — router resolves to mcp or outro\n    if (this.store.session.runPhase === RunPhase.Running) {\n      this.store.setRunPhase(RunPhase.Completed);\n    }\n  }\n\n  setCredentials(credentials: {\n    accessToken: string;\n    projectApiKey: string;\n    host: string;\n    projectId: number;\n  }): void {\n    this.store.setCredentials(credentials);\n  }\n\n  setDetectedFramework(label: string): void {\n    this.store.setDetectedFramework(label);\n  }\n\n  onEnterScreen(screen: string, fn: () => void): void {\n    this.store.onEnterScreen(\n      screen as Parameters<WizardStore['onEnterScreen']>[0],\n      fn,\n    );\n  }\n\n  setLoginUrl(url: string | null): void {\n    this.store.setLoginUrl(url);\n  }\n\n  showServiceStatus(data: {\n    description: string;\n    statusPageUrl: string;\n  }): void {\n    this.store.setServiceStatus(data);\n    this.store.pushOverlay(Overlay.Outage);\n  }\n\n  showSettingsOverride(\n    keys: string[],\n    backupAndFix: () => boolean,\n  ): Promise<void> {\n    return this.store.showSettingsOverride(keys, backupAndFix);\n  }\n\n  startRun(): void {\n    this.store.setRunPhase(RunPhase.Running);\n  }\n\n  cancel(message: string): void {\n    this.store.pushStatus(message);\n  }\n\n  log = {\n    info: (message: string): void => {\n      this.store.pushStatus(message);\n    },\n    warn: (message: string): void => {\n      this.store.pushStatus(message);\n    },\n    error: (message: string): void => {\n      this.store.pushStatus(message);\n    },\n    success: (message: string): void => {\n      this.store.pushStatus(message);\n    },\n    step: (message: string): void => {\n      this.store.pushStatus(message);\n    },\n  };\n\n  note(message: string): void {\n    this.store.pushStatus(message);\n  }\n\n  spinner(): SpinnerHandle {\n    return {\n      start: (message?: string) => {\n        if (message) this.store.pushStatus(message);\n      },\n      stop: (message?: string) => {\n        if (message) this.store.pushStatus(message);\n      },\n      message: (msg?: string) => {\n        if (msg) this.store.pushStatus(msg);\n      },\n    };\n  }\n\n  pushStatus(message: string): void {\n    this.store.pushStatus(message);\n  }\n\n  syncTodos(\n    todos: Array<{ content: string; status: string; activeForm?: string }>,\n  ): void {\n    this.store.syncTodos(todos);\n  }\n\n  setEventPlan(events: Array<{ name: string; description: string }>): void {\n    this.store.setEventPlan(events);\n  }\n}\n"]}

package/dist/src/ui/tui/package.json

@@ -0,0 +1 @@
+{"type": "module"}

package/dist/src/ui/tui/playground/PlaygroundApp.d.ts

@@ -0,0 +1,12 @@
+/**
+ * PlaygroundApp — Root component for the primitives playground.
+ *
+ * Two screens mirroring the real wizard flow:
+ *   intro → (press enter) → run (tabbed demo view)
+ */
+import type { WizardStore } from '../store.js';
+interface PlaygroundAppProps {
+    store: WizardStore;
+}
+export declare const PlaygroundApp: ({ store }: PlaygroundAppProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/ui/tui/playground/PlaygroundApp.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * PlaygroundApp — Root component for the primitives playground.
+ *
+ * Two screens mirroring the real wizard flow:
+ *   intro → (press enter) → run (tabbed demo view)
+ */
+import { ScreenContainer, TabContainer } from '../primitives/index.js';
+import { WelcomeDemo } from './demos/WelcomeDemo.js';
+import { LayoutDemo } from './demos/LayoutDemo.js';
+import { InputDemo } from './demos/InputDemo.js';
+import { ProgressDemo } from './demos/ProgressDemo.js';
+import { LogDemo } from './demos/LogDemo.js';
+import { RunScreenDemo } from './demos/RunScreenDemo.js';
+export const PlaygroundApp = ({ store }) => {
+    const tabs = [
+        { id: 'layout', label: 'Layout', component: _jsx(LayoutDemo, {}) },
+        { id: 'input', label: 'Input', component: _jsx(InputDemo, {}) },
+        { id: 'progress', label: 'Progress', component: _jsx(ProgressDemo, {}) },
+        { id: 'logs', label: 'Logs', component: _jsx(LogDemo, {}) },
+        {
+            id: 'run',
+            label: 'RunScreen',
+            component: _jsx(RunScreenDemo, { store: store }),
+        },
+    ];
+    return (_jsx(ScreenContainer, { store: store, screens: {
+            intro: _jsx(WelcomeDemo, { store: store }),
+            run: (_jsx(TabContainer, { tabs: tabs, statusMessage: "Primitives Playground \u2014 use arrow keys to switch tabs" })),
+        } }));
+};
+//# sourceMappingURL=PlaygroundApp.js.map

package/dist/src/ui/tui/playground/PlaygroundApp.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlaygroundApp.js","sourceRoot":"","sources":["../../../../../src/ui/tui/playground/PlaygroundApp.tsx"],"names":[],"mappings":";AAAA;;;;;GAKG;AAEH,OAAO,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAEvE,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAMzD,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAAE,KAAK,EAAsB,EAAE,EAAE;IAC7D,MAAM,IAAI,GAAG;QACX,EAAE,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAC,UAAU,KAAG,EAAE;QAC5D,EAAE,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,KAAC,SAAS,KAAG,EAAE;QACzD,EAAE,EAAE,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,KAAC,YAAY,KAAG,EAAE;QAClE,EAAE,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,KAAC,OAAO,KAAG,EAAE;QACrD;YACE,EAAE,EAAE,KAAK;YACT,KAAK,EAAE,WAAW;YAClB,SAAS,EAAE,KAAC,aAAa,IAAC,KAAK,EAAE,KAAK,GAAI;SAC3C;KACF,CAAC;IAEF,OAAO,CACL,KAAC,eAAe,IACd,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE;YACP,KAAK,EAAE,KAAC,WAAW,IAAC,KAAK,EAAE,KAAK,GAAI;YACpC,GAAG,EAAE,CACH,KAAC,YAAY,IACX,IAAI,EAAE,IAAI,EACV,aAAa,EAAC,4DAAuD,GACrE,CACH;SACF,GACD,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["/**\n * PlaygroundApp — Root component for the primitives playground.\n *\n * Two screens mirroring the real wizard flow:\n *   intro → (press enter) → run (tabbed demo view)\n */\n\nimport { ScreenContainer, TabContainer } from '../primitives/index.js';\nimport type { WizardStore } from '../store.js';\nimport { WelcomeDemo } from './demos/WelcomeDemo.js';\nimport { LayoutDemo } from './demos/LayoutDemo.js';\nimport { InputDemo } from './demos/InputDemo.js';\nimport { ProgressDemo } from './demos/ProgressDemo.js';\nimport { LogDemo } from './demos/LogDemo.js';\nimport { RunScreenDemo } from './demos/RunScreenDemo.js';\n\ninterface PlaygroundAppProps {\n  store: WizardStore;\n}\n\nexport const PlaygroundApp = ({ store }: PlaygroundAppProps) => {\n  const tabs = [\n    { id: 'layout', label: 'Layout', component: <LayoutDemo /> },\n    { id: 'input', label: 'Input', component: <InputDemo /> },\n    { id: 'progress', label: 'Progress', component: <ProgressDemo /> },\n    { id: 'logs', label: 'Logs', component: <LogDemo /> },\n    {\n      id: 'run',\n      label: 'RunScreen',\n      component: <RunScreenDemo store={store} />,\n    },\n  ];\n\n  return (\n    <ScreenContainer\n      store={store}\n      screens={{\n        intro: <WelcomeDemo store={store} />,\n        run: (\n          <TabContainer\n            tabs={tabs}\n            statusMessage=\"Primitives Playground — use arrow keys to switch tabs\"\n          />\n        ),\n      }}\n    />\n  );\n};\n"]}

package/dist/src/ui/tui/playground/demos/InputDemo.d.ts

@@ -0,0 +1,4 @@
+/**
+ * InputDemo — Demonstrates PickerMenu (single + multi) and ConfirmationInput.
+ */
+export declare const InputDemo: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/ui/tui/playground/demos/InputDemo.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * InputDemo — Demonstrates PickerMenu (single + multi) and ConfirmationInput.
+ */
+import { Box, Text } from 'ink';
+import { useState } from 'react';
+import { PickerMenu, ConfirmationInput } from '../../primitives/index.js';
+import { Colors } from '../../styles.js';
+var DemoStep;
+(function (DemoStep) {
+    DemoStep["Single"] = "single";
+    DemoStep["Multi"] = "multi";
+    DemoStep["Confirm"] = "confirm";
+    DemoStep["Done"] = "done";
+})(DemoStep || (DemoStep = {}));
+export const InputDemo = () => {
+    const [step, setStep] = useState(DemoStep.Single);
+    const [results, setResults] = useState([]);
+    if (step === DemoStep.Single) {
+        return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { bold: true, color: Colors.accent, children: "Input Demo \u2014 Single Select" }), _jsx(Box, { height: 1 }), _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(DemoStep.Multi);
+                    } })] }));
+    }
+    if (step === DemoStep.Multi) {
+        return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { bold: true, color: Colors.accent, children: "Input Demo \u2014 Multi Select" }), _jsx(Box, { height: 1 }), _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(DemoStep.Confirm);
+                    } })] }));
+    }
+    if (step === DemoStep.Confirm) {
+        return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { bold: true, color: Colors.accent, children: "Input Demo \u2014 Confirmation" }), _jsx(Box, { height: 1 }), _jsx(ConfirmationInput, { message: "Are you satisfied with your choices?", onConfirm: () => {
+                        setResults((prev) => [...prev, 'Confirmed: Yes']);
+                        setStep(DemoStep.Done);
+                    }, onCancel: () => {
+                        setResults((prev) => [...prev, 'Confirmed: No']);
+                        setStep(DemoStep.Done);
+                    } })] }));
+    }
+    // done
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { bold: true, color: Colors.accent, children: "Input Demo \u2014 Results" }), _jsx(Box, { height: 1 }), results.map((r, i) => (_jsxs(Text, { color: Colors.success, children: ['\u2714', " ", r] }, i))), _jsx(Box, { height: 1 }), _jsx(Text, { dimColor: true, children: "Switch away from this tab and back to restart." })] }));
+};
+//# sourceMappingURL=InputDemo.js.map

package/dist/src/ui/tui/playground/demos/InputDemo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputDemo.js","sourceRoot":"","sources":["../../../../../../src/ui/tui/playground/demos/InputDemo.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n * InputDemo — Demonstrates PickerMenu (single + multi) and ConfirmationInput.\n */\n\nimport { Box, Text } from 'ink';\nimport { useState } from 'react';\nimport { PickerMenu, ConfirmationInput } from '../../primitives/index.js';\nimport { Colors } from '../../styles.js';\n\nenum DemoStep {\n  Single = 'single',\n  Multi = 'multi',\n  Confirm = 'confirm',\n  Done = 'done',\n}\n\nexport const InputDemo = () => {\n  const [step, setStep] = useState<DemoStep>(DemoStep.Single);\n  const [results, setResults] = useState<string[]>([]);\n\n  if (step === DemoStep.Single) {\n    return (\n      <Box flexDirection=\"column\">\n        <Text bold color={Colors.accent}>\n          Input Demo — Single Select\n        </Text>\n        <Box height={1} />\n        <PickerMenu\n          message=\"Pick a color\"\n          options={[\n            { label: 'Red', value: 'red', hint: 'warm' },\n            { label: 'Blue', value: 'blue', hint: 'cool' },\n            { label: 'Green', value: 'green', hint: 'natural' },\n          ]}\n          onSelect={(value) => {\n            setResults((prev) => [...prev, `Single: ${value}`]);\n            setStep(DemoStep.Multi);\n          }}\n        />\n      </Box>\n    );\n  }\n\n  if (step === DemoStep.Multi) {\n    return (\n      <Box flexDirection=\"column\">\n        <Text bold color={Colors.accent}>\n          Input Demo — Multi Select\n        </Text>\n        <Box height={1} />\n        <PickerMenu\n          message=\"Pick toppings\"\n          mode=\"multi\"\n          options={[\n            { label: 'Cheese', value: 'cheese' },\n            { label: 'Pepperoni', value: 'pepperoni' },\n            { label: 'Mushrooms', value: 'mushrooms' },\n            { label: 'Onions', value: 'onions' },\n          ]}\n          onSelect={(values) => {\n            const arr = Array.isArray(values) ? values : [values];\n            setResults((prev) => [...prev, `Multi: ${arr.join(', ')}`]);\n            setStep(DemoStep.Confirm);\n          }}\n        />\n      </Box>\n    );\n  }\n\n  if (step === DemoStep.Confirm) {\n    return (\n      <Box flexDirection=\"column\">\n        <Text bold color={Colors.accent}>\n          Input Demo — Confirmation\n        </Text>\n        <Box height={1} />\n        <ConfirmationInput\n          message=\"Are you satisfied with your choices?\"\n          onConfirm={() => {\n            setResults((prev) => [...prev, 'Confirmed: Yes']);\n            setStep(DemoStep.Done);\n          }}\n          onCancel={() => {\n            setResults((prev) => [...prev, 'Confirmed: No']);\n            setStep(DemoStep.Done);\n          }}\n        />\n      </Box>\n    );\n  }\n\n  // done\n  return (\n    <Box flexDirection=\"column\">\n      <Text bold color={Colors.accent}>\n        Input Demo — Results\n      </Text>\n      <Box height={1} />\n      {results.map((r, i) => (\n        <Text key={i} color={Colors.success}>\n          {'\\u2714'} {r}\n        </Text>\n      ))}\n      <Box height={1} />\n      <Text dimColor>Switch away from this tab and back to restart.</Text>\n    </Box>\n  );\n};\n"]}

package/dist/src/ui/tui/playground/demos/LayoutDemo.d.ts

@@ -0,0 +1,5 @@
+/**
+ * LayoutDemo — Demonstrates CardLayout + SplitView.
+ * Cycles alignment enums with keyboard shortcuts.
+ */
+export declare const LayoutDemo: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/ui/tui/playground/demos/LayoutDemo.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * LayoutDemo — Demonstrates CardLayout + SplitView.
+ * Cycles alignment enums with keyboard shortcuts.
+ */
+import { Box, Text, useInput } from 'ink';
+import { useState } from 'react';
+import { CardLayout, SplitView } from '../../primitives/index.js';
+import { HAlign, VAlign, Colors } from '../../styles.js';
+const hAligns = [HAlign.Left, HAlign.Center, HAlign.Right];
+const vAligns = [VAlign.Top, VAlign.Center, VAlign.Bottom];
+const hLabels = ['Left', 'Center', 'Right'];
+const vLabels = ['Top', 'Center', 'Bottom'];
+export 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 (_jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [_jsx(Text, { bold: true, color: Colors.accent, children: "Layout Demo" }), _jsxs(Text, { dimColor: true, children: ["Press [h] to cycle hAlign (", hLabels[hIdx], "), [v] to cycle vAlign (", vLabels[vIdx], ")"] }), _jsx(Box, { height: 1 }), _jsx(SplitView, { left: _jsx(CardLayout, { hAlign: hAligns[hIdx], vAlign: vAligns[vIdx], children: _jsx(Box, { borderStyle: "single", borderColor: Colors.primary, paddingX: 1, children: _jsx(Text, { color: Colors.primary, children: "Left Pane" }) }) }), right: _jsx(CardLayout, { hAlign: HAlign.Center, vAlign: VAlign.Center, children: _jsx(Box, { borderStyle: "single", borderColor: Colors.accent, paddingX: 1, children: _jsx(Text, { color: Colors.accent, children: "Right Pane" }) }) }) })] }));
+};
+//# sourceMappingURL=LayoutDemo.js.map

package/dist/src/ui/tui/playground/demos/LayoutDemo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutDemo.js","sourceRoot":"","sources":["../../../../../../src/ui/tui/playground/demos/LayoutDemo.tsx"],"names":[],"mappings":";AAAA;;;GAGG;AAEH,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,KAAK,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAClE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAEzD,MAAM,OAAO,GAAG,CAAC,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC;AAC3D,MAAM,OAAO,GAAG,CAAC,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;AAC3D,MAAM,OAAO,GAAG,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC;AAC5C,MAAM,OAAO,GAAG,CAAC,KAAK,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC;AAE5C,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,EAAE;IAC7B,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IACpC,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAEpC,QAAQ,CAAC,CAAC,KAAK,EAAE,EAAE;QACjB,IAAI,KAAK,KAAK,GAAG;YAAE,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC;QAC5D,IAAI,KAAK,KAAK,GAAG;YAAE,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC;IAC9D,CAAC,CAAC,CAAC;IAEH,OAAO,CACL,MAAC,GAAG,IAAC,aAAa,EAAC,QAAQ,EAAC,QAAQ,EAAE,CAAC,aACrC,KAAC,IAAI,IAAC,IAAI,QAAC,KAAK,EAAE,MAAM,CAAC,MAAM,4BAExB,EACP,MAAC,IAAI,IAAC,QAAQ,kDACgB,OAAO,CAAC,IAAI,CAAC,8BACxC,OAAO,CAAC,IAAI,CAAC,SACT,EACP,KAAC,GAAG,IAAC,MAAM,EAAE,CAAC,GAAI,EAClB,KAAC,SAAS,IACR,IAAI,EACF,KAAC,UAAU,IAAC,MAAM,EAAE,OAAO,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,OAAO,CAAC,IAAI,CAAC,YACtD,KAAC,GAAG,IAAC,WAAW,EAAC,QAAQ,EAAC,WAAW,EAAE,MAAM,CAAC,OAAO,EAAE,QAAQ,EAAE,CAAC,YAChE,KAAC,IAAI,IAAC,KAAK,EAAE,MAAM,CAAC,OAAO,0BAAkB,GACzC,GACK,EAEf,KAAK,EACH,KAAC,UAAU,IAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,MAAM,YACtD,KAAC,GAAG,IAAC,WAAW,EAAC,QAAQ,EAAC,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,QAAQ,EAAE,CAAC,YAC/D,KAAC,IAAI,IAAC,KAAK,EAAE,MAAM,CAAC,MAAM,2BAAmB,GACzC,GACK,GAEf,IACE,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["/**\n * LayoutDemo — Demonstrates CardLayout + SplitView.\n * Cycles alignment enums with keyboard shortcuts.\n */\n\nimport { Box, Text, useInput } from 'ink';\nimport { useState } from 'react';\nimport { CardLayout, SplitView } from '../../primitives/index.js';\nimport { HAlign, VAlign, Colors } from '../../styles.js';\n\nconst hAligns = [HAlign.Left, HAlign.Center, HAlign.Right];\nconst vAligns = [VAlign.Top, VAlign.Center, VAlign.Bottom];\nconst hLabels = ['Left', 'Center', 'Right'];\nconst vLabels = ['Top', 'Center', 'Bottom'];\n\nexport const LayoutDemo = () => {\n  const [hIdx, setHIdx] = useState(0);\n  const [vIdx, setVIdx] = useState(0);\n\n  useInput((input) => {\n    if (input === 'h') setHIdx((i) => (i + 1) % hAligns.length);\n    if (input === 'v') setVIdx((i) => (i + 1) % vAligns.length);\n  });\n\n  return (\n    <Box flexDirection=\"column\" flexGrow={1}>\n      <Text bold color={Colors.accent}>\n        Layout Demo\n      </Text>\n      <Text dimColor>\n        Press [h] to cycle hAlign ({hLabels[hIdx]}), [v] to cycle vAlign (\n        {vLabels[vIdx]})\n      </Text>\n      <Box height={1} />\n      <SplitView\n        left={\n          <CardLayout hAlign={hAligns[hIdx]} vAlign={vAligns[vIdx]}>\n            <Box borderStyle=\"single\" borderColor={Colors.primary} paddingX={1}>\n              <Text color={Colors.primary}>Left Pane</Text>\n            </Box>\n          </CardLayout>\n        }\n        right={\n          <CardLayout hAlign={HAlign.Center} vAlign={VAlign.Center}>\n            <Box borderStyle=\"single\" borderColor={Colors.accent} paddingX={1}>\n              <Text color={Colors.accent}>Right Pane</Text>\n            </Box>\n          </CardLayout>\n        }\n      />\n    </Box>\n  );\n};\n"]}

package/dist/src/ui/tui/playground/demos/LogDemo.d.ts

@@ -0,0 +1,5 @@
+/**
+ * LogDemo — Demonstrates LogViewer.
+ * Writes demo log lines to a temp file, then tails it.
+ */
+export declare const LogDemo: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/ui/tui/playground/demos/LogDemo.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * LogDemo — Demonstrates LogViewer.
+ * Writes demo log lines to a temp file, then tails it.
+ */
+import { Box, Text } from 'ink';
+import { useEffect, useState } from 'react';
+import * as fs from 'fs';
+import * as path from 'path';
+import * as os from 'os';
+import { LogViewer } from '../../primitives/index.js';
+import { Colors } from '../../styles.js';
+const DEMO_LOG_PATH = path.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',
+];
+export const LogDemo = () => {
+    const [ready, setReady] = useState(false);
+    useEffect(() => {
+        // Write initial log content
+        fs.writeFileSync(DEMO_LOG_PATH, LOG_MESSAGES.join('\n') + '\n');
+        setReady(true);
+        // Append lines periodically
+        let lineNum = LOG_MESSAGES.length;
+        const timer = setInterval(() => {
+            lineNum++;
+            const msg = `[info] Demo log line #${lineNum} — ${new Date().toISOString()}\n`;
+            fs.appendFileSync(DEMO_LOG_PATH, msg);
+        }, 2000);
+        return () => {
+            clearInterval(timer);
+            try {
+                fs.unlinkSync(DEMO_LOG_PATH);
+            }
+            catch {
+                // ignore
+            }
+        };
+    }, []);
+    return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [_jsx(Text, { bold: true, color: Colors.accent, children: "Log Demo" }), _jsxs(Text, { dimColor: true, children: ["Tailing ", DEMO_LOG_PATH, " (new line every 2s)"] }), _jsx(Box, { height: 1 }), ready && _jsx(LogViewer, { filePath: DEMO_LOG_PATH, height: 15 })] }));
+};
+//# sourceMappingURL=LogDemo.js.map

package/dist/src/ui/tui/playground/demos/LogDemo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LogDemo.js","sourceRoot":"","sources":["../../../../../../src/ui/tui/playground/demos/LogDemo.tsx"],"names":[],"mappings":";AAAA;;;GAGG;AAEH,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAChC,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,KAAK,EAAE,MAAM,IAAI,CAAC;AACzB,OAAO,KAAK,IAAI,MAAM,MAAM,CAAC;AAC7B,OAAO,KAAK,EAAE,MAAM,IAAI,CAAC;AACzB,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAEzC,MAAM,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,MAAM,EAAE,EAAE,wBAAwB,CAAC,CAAC;AAEvE,MAAM,YAAY,GAAG;IACnB,2BAA2B;IAC3B,wCAAwC;IACxC,0CAA0C;IAC1C,gCAAgC;IAChC,6CAA6C;IAC7C,6CAA6C;IAC7C,8CAA8C;IAC9C,yDAAyD;IACzD,8CAA8C;IAC9C,4CAA4C;IAC5C,8CAA8C;IAC9C,sCAAsC;CACvC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,GAAG,EAAE;IAC1B,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE1C,SAAS,CAAC,GAAG,EAAE;QACb,4BAA4B;QAC5B,EAAE,CAAC,aAAa,CAAC,aAAa,EAAE,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,CAAC;QAChE,QAAQ,CAAC,IAAI,CAAC,CAAC;QAEf,4BAA4B;QAC5B,IAAI,OAAO,GAAG,YAAY,CAAC,MAAM,CAAC;QAClC,MAAM,KAAK,GAAG,WAAW,CAAC,GAAG,EAAE;YAC7B,OAAO,EAAE,CAAC;YACV,MAAM,GAAG,GAAG,yBAAyB,OAAO,MAAM,IAAI,IAAI,EAAE,CAAC,WAAW,EAAE,IAAI,CAAC;YAC/E,EAAE,CAAC,cAAc,CAAC,aAAa,EAAE,GAAG,CAAC,CAAC;QACxC,CAAC,EAAE,IAAI,CAAC,CAAC;QAET,OAAO,GAAG,EAAE;YACV,aAAa,CAAC,KAAK,CAAC,CAAC;YACrB,IAAI,CAAC;gBACH,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC;YAC/B,CAAC;YAAC,MAAM,CAAC;gBACP,SAAS;YACX,CAAC;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,MAAC,GAAG,IAAC,aAAa,EAAC,QAAQ,EAAC,QAAQ,EAAE,CAAC,aACrC,KAAC,IAAI,IAAC,IAAI,QAAC,KAAK,EAAE,MAAM,CAAC,MAAM,yBAExB,EACP,MAAC,IAAI,IAAC,QAAQ,+BAAU,aAAa,4BAA4B,EACjE,KAAC,GAAG,IAAC,MAAM,EAAE,CAAC,GAAI,EACjB,KAAK,IAAI,KAAC,SAAS,IAAC,QAAQ,EAAE,aAAa,EAAE,MAAM,EAAE,EAAE,GAAI,IACxD,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["/**\n * LogDemo — Demonstrates LogViewer.\n * Writes demo log lines to a temp file, then tails it.\n */\n\nimport { Box, Text } from 'ink';\nimport { useEffect, useState } from 'react';\nimport * as fs from 'fs';\nimport * as path from 'path';\nimport * as os from 'os';\nimport { LogViewer } from '../../primitives/index.js';\nimport { Colors } from '../../styles.js';\n\nconst DEMO_LOG_PATH = path.join(os.tmpdir(), 'posthog-playground.log');\n\nconst LOG_MESSAGES = [\n  '[info] Playground started',\n  '[info] Initializing demo components...',\n  '[debug] Loading primitives barrel export',\n  '[info] ScreenContainer mounted',\n  '[info] TabContainer initialized with 6 tabs',\n  '[debug] LayoutDemo: hAlign=Left, vAlign=Top',\n  '[info] NavigationDemo: screenStack depth = 1',\n  '[warn] TabDemo: arrow key conflict with outer container',\n  '[info] InputDemo: waiting for user selection',\n  '[info] ProgressDemo: tick 0, cycling tasks',\n  '[debug] LogViewer: watching file for changes',\n  '[info] All demos loaded successfully',\n];\n\nexport const LogDemo = () => {\n  const [ready, setReady] = useState(false);\n\n  useEffect(() => {\n    // Write initial log content\n    fs.writeFileSync(DEMO_LOG_PATH, LOG_MESSAGES.join('\\n') + '\\n');\n    setReady(true);\n\n    // Append lines periodically\n    let lineNum = LOG_MESSAGES.length;\n    const timer = setInterval(() => {\n      lineNum++;\n      const msg = `[info] Demo log line #${lineNum} — ${new Date().toISOString()}\\n`;\n      fs.appendFileSync(DEMO_LOG_PATH, msg);\n    }, 2000);\n\n    return () => {\n      clearInterval(timer);\n      try {\n        fs.unlinkSync(DEMO_LOG_PATH);\n      } catch {\n        // ignore\n      }\n    };\n  }, []);\n\n  return (\n    <Box flexDirection=\"column\" flexGrow={1}>\n      <Text bold color={Colors.accent}>\n        Log Demo\n      </Text>\n      <Text dimColor>Tailing {DEMO_LOG_PATH} (new line every 2s)</Text>\n      <Box height={1} />\n      {ready && <LogViewer filePath={DEMO_LOG_PATH} height={15} />}\n    </Box>\n  );\n};\n"]}

package/dist/src/ui/tui/playground/demos/ProgressDemo.d.ts

@@ -0,0 +1,5 @@
+/**
+ * ProgressDemo — Demonstrates ProgressList + LoadingBox.
+ * Auto-animates task progression through states.
+ */
+export declare const ProgressDemo: () => import("react/jsx-runtime").JSX.Element;