@pokit/reporter-web 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Daniel Grant
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/adapter.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Web Reporter Adapter
+ *
+ * Implements the ReporterAdapter interface for web/React environments.
+ * Connects the EventBus to a ReporterStore for state management.
+ */
+import type { ReporterAdapter } from '@pokit/core';
+import type { ReporterStoreWithHandler } from './store';
+/**
+ * Create a web reporter adapter that pipes events to a store
+ *
+ * @param store - The reporter store (must be created with createReporterStore)
+ * @returns ReporterAdapter instance
+ *
+ * @example
+ * ```typescript
+ * import { createReporterStore, createWebReporterAdapter } from '@pokit/reporter-web';
+ * import { createEventBus } from '@pokit/core';
+ *
+ * const store = createReporterStore();
+ * const adapter = createWebReporterAdapter(store);
+ * const bus = createEventBus();
+ *
+ * const controller = adapter.start(bus);
+ *
+ * // Events emitted to the bus will update the store
+ * bus.emit({ type: 'root:start', appName: 'my-app' });
+ *
+ * // In React:
+ * // const state = useReporterState(store);
+ *
+ * // Cleanup
+ * controller.stop();
+ * ```
+ */
+export declare function createWebReporterAdapter(store: ReporterStoreWithHandler): ReporterAdapter;
+//# sourceMappingURL=adapter.d.ts.map

package/dist/adapter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"adapter.d.ts","sourceRoot":"","sources":["../src/adapter.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,eAAe,EAAuC,MAAM,aAAa,CAAC;AACxF,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAC;AAExD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,wBAAwB,CAAC,KAAK,EAAE,wBAAwB,GAAG,eAAe,CAmBzF"}

package/dist/adapter.js

@@ -0,0 +1,53 @@
+/**
+ * Web Reporter Adapter
+ *
+ * Implements the ReporterAdapter interface for web/React environments.
+ * Connects the EventBus to a ReporterStore for state management.
+ */
+/**
+ * Create a web reporter adapter that pipes events to a store
+ *
+ * @param store - The reporter store (must be created with createReporterStore)
+ * @returns ReporterAdapter instance
+ *
+ * @example
+ * ```typescript
+ * import { createReporterStore, createWebReporterAdapter } from '@pokit/reporter-web';
+ * import { createEventBus } from '@pokit/core';
+ *
+ * const store = createReporterStore();
+ * const adapter = createWebReporterAdapter(store);
+ * const bus = createEventBus();
+ *
+ * const controller = adapter.start(bus);
+ *
+ * // Events emitted to the bus will update the store
+ * bus.emit({ type: 'root:start', appName: 'my-app' });
+ *
+ * // In React:
+ * // const state = useReporterState(store);
+ *
+ * // Cleanup
+ * controller.stop();
+ * ```
+ */
+export function createWebReporterAdapter(store) {
+    return {
+        start(bus) {
+            let stopped = false;
+            const unsubscribe = bus.on((event) => {
+                if (stopped)
+                    return;
+                store._handleEvent(event);
+            });
+            return {
+                stop() {
+                    if (stopped)
+                        return;
+                    stopped = true;
+                    unsubscribe();
+                },
+            };
+        },
+    };
+}

package/dist/components/CommandBlock.d.ts

@@ -0,0 +1,35 @@
+/**
+ * CommandBlock - A headless component for displaying shell commands with output.
+ *
+ * CSS Variables Contract:
+ * - --tutorial-code-bg: Background color for command/output area
+ * - --tutorial-bg: Default background color
+ * - --tutorial-text: Primary text color
+ * - --tutorial-text-muted: Secondary/muted text color
+ * - --tutorial-border: Border color
+ * - --tutorial-action-bg: Action button background
+ * - --tutorial-action-hover: Action button hover background
+ *
+ * Data Attributes:
+ * - [data-status="idle|running|complete|failed"]: Command status for styling
+ */
+export type CommandBlockStatus = 'idle' | 'running' | 'complete' | 'failed';
+export type CommandBlockActionProps = {
+    onClick: () => void;
+    status: CommandBlockStatus;
+    disabled: boolean;
+};
+export type CommandBlockProps = {
+    /** Command to display */
+    command: string;
+    /** Current status of the command execution */
+    status: CommandBlockStatus;
+    /** Output lines from the command */
+    output?: string[];
+    /** Callback when run action is triggered (if no renderAction provided) */
+    onRun?: () => void;
+    /** Render prop for custom action button */
+    renderAction?: (props: CommandBlockActionProps) => React.ReactNode;
+};
+export declare function CommandBlock({ command, status, output, onRun, renderAction, }: CommandBlockProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=CommandBlock.d.ts.map

package/dist/components/CommandBlock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandBlock.d.ts","sourceRoot":"","sources":["../../src/components/CommandBlock.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,QAAQ,CAAC;AAE5E,MAAM,MAAM,uBAAuB,GAAG;IACpC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,EAAE,kBAAkB,CAAC;IAC3B,QAAQ,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,yBAAyB;IACzB,OAAO,EAAE,MAAM,CAAC;IAChB,8CAA8C;IAC9C,MAAM,EAAE,kBAAkB,CAAC;IAC3B,oCAAoC;IACpC,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,0EAA0E;IAC1E,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;IACnB,2CAA2C;IAC3C,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,uBAAuB,KAAK,KAAK,CAAC,SAAS,CAAC;CACpE,CAAC;AAEF,wBAAgB,YAAY,CAAC,EAC3B,OAAO,EACP,MAAM,EACN,MAAM,EACN,KAAK,EACL,YAAY,GACb,EAAE,iBAAiB,2CAkDnB"}

package/dist/components/CommandBlock.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function CommandBlock({ command, status, output, onRun, renderAction, }) {
+    const disabled = status === 'running';
+    const handleClick = () => {
+        if (!disabled && onRun) {
+            onRun();
+        }
+    };
+    const actionProps = {
+        onClick: handleClick,
+        status,
+        disabled,
+    };
+    return (_jsxs("div", { className: "command-block", "data-status": status, children: [_jsxs("div", { className: "command-block-command", children: [_jsx("span", { className: "command-block-prompt", children: "$" }), _jsx("span", { className: "command-block-text", children: command })] }), output && output.length > 0 && (_jsx("div", { className: "command-block-output", children: output.map((line, index) => (_jsx("div", { className: "command-block-output-line", children: line }, index))) })), (renderAction || onRun) && (_jsx("div", { className: "command-block-actions", children: renderAction ? (renderAction(actionProps)) : (_jsxs("button", { className: "command-block-action-button", onClick: handleClick, disabled: disabled, "data-status": status, children: [status === 'idle' && 'Run', status === 'running' && 'Running...', status === 'complete' && 'Run Again', status === 'failed' && 'Retry'] })) }))] }));
+}

package/dist/components/ContentBox.d.ts

@@ -0,0 +1,23 @@
+/**
+ * ContentBox - A headless container component for info/tip/warning content.
+ *
+ * CSS Variables Contract:
+ * - --tutorial-bg: Default background color
+ * - --tutorial-text: Primary text color
+ * - --tutorial-text-muted: Secondary/muted text color
+ * - --tutorial-border: Border color
+ *
+ * Data Attributes:
+ * - [data-variant="info|tip|warning"]: Content variant for styling
+ */
+export type ContentBoxVariant = 'info' | 'tip' | 'warning';
+export type ContentBoxProps = {
+    /** Visual variant of the content box */
+    variant: ContentBoxVariant;
+    /** Optional title for the content box */
+    title?: string;
+    /** Content to display inside the box */
+    children: React.ReactNode;
+};
+export declare function ContentBox({ variant, title, children }: ContentBoxProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ContentBox.d.ts.map

package/dist/components/ContentBox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContentBox.d.ts","sourceRoot":"","sources":["../../src/components/ContentBox.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,KAAK,GAAG,SAAS,CAAC;AAE3D,MAAM,MAAM,eAAe,GAAG;IAC5B,wCAAwC;IACxC,OAAO,EAAE,iBAAiB,CAAC;IAC3B,yCAAyC;IACzC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wCAAwC;IACxC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,wBAAgB,UAAU,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,eAAe,2CAOvE"}

package/dist/components/ContentBox.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function ContentBox({ variant, title, children }) {
+    return (_jsxs("div", { className: "content-box", "data-variant": variant, children: [title && _jsx("div", { className: "content-box-title", children: title }), _jsx("div", { className: "content-box-content", children: children })] }));
+}

package/dist/components/FilePreview.d.ts

@@ -0,0 +1,38 @@
+/**
+ * FilePreview - A headless component for displaying file content with action slot.
+ *
+ * CSS Variables Contract:
+ * - --tutorial-code-bg: Background color for code/file content area
+ * - --tutorial-bg: Default background color
+ * - --tutorial-text: Primary text color
+ * - --tutorial-text-muted: Secondary/muted text color
+ * - --tutorial-border: Border color
+ * - --tutorial-action-bg: Action button background
+ * - --tutorial-action-hover: Action button hover background
+ *
+ * Data Attributes:
+ * - [data-status="pending|creating|created"]: File status for styling
+ * - [data-language="..."]: Language hint for syntax highlighting
+ */
+export type FilePreviewStatus = 'pending' | 'creating' | 'created';
+export type FilePreviewActionProps = {
+    onClick: () => void;
+    status: FilePreviewStatus;
+    disabled: boolean;
+};
+export type FilePreviewProps = {
+    /** File path to display in header */
+    path: string;
+    /** File content to display */
+    content: string;
+    /** Language for syntax highlighting hint */
+    language?: string;
+    /** Current status of the file operation */
+    status: FilePreviewStatus;
+    /** Callback when action is triggered (if no renderAction provided) */
+    onAction?: () => void;
+    /** Render prop for custom action button */
+    renderAction?: (props: FilePreviewActionProps) => React.ReactNode;
+};
+export declare function FilePreview({ path, content, language, status, onAction, renderAction, }: FilePreviewProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=FilePreview.d.ts.map

package/dist/components/FilePreview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilePreview.d.ts","sourceRoot":"","sources":["../../src/components/FilePreview.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;AAEnE,MAAM,MAAM,sBAAsB,GAAG;IACnC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,EAAE,iBAAiB,CAAC;IAC1B,QAAQ,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,qCAAqC;IACrC,IAAI,EAAE,MAAM,CAAC;IACb,8BAA8B;IAC9B,OAAO,EAAE,MAAM,CAAC;IAChB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,2CAA2C;IAC3C,MAAM,EAAE,iBAAiB,CAAC;IAC1B,sEAAsE;IACtE,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,2CAA2C;IAC3C,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,sBAAsB,KAAK,KAAK,CAAC,SAAS,CAAC;CACnE,CAAC;AAEF,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,YAAY,GACb,EAAE,gBAAgB,2CAmDlB"}

package/dist/components/FilePreview.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function FilePreview({ path, content, language, status, onAction, renderAction, }) {
+    const disabled = status === 'creating' || status === 'created';
+    const handleClick = () => {
+        if (!disabled && onAction) {
+            onAction();
+        }
+    };
+    const actionProps = {
+        onClick: handleClick,
+        status,
+        disabled,
+    };
+    return (_jsxs("div", { className: "file-preview", "data-status": status, "data-language": language, children: [_jsxs("div", { className: "file-preview-header", children: [_jsx("span", { className: "file-preview-path", children: path }), language && (_jsx("span", { className: "file-preview-language", children: language }))] }), _jsx("div", { className: "file-preview-content", children: _jsx("pre", { className: "file-preview-code", children: _jsx("code", { children: content }) }) }), (renderAction || onAction) && (_jsx("div", { className: "file-preview-actions", children: renderAction ? (renderAction(actionProps)) : (_jsxs("button", { className: "file-preview-action-button", onClick: handleClick, disabled: disabled, "data-status": status, children: [status === 'pending' && 'Create', status === 'creating' && 'Creating...', status === 'created' && 'Created'] })) }))] }));
+}

package/dist/components/ProgressIndicator.d.ts

@@ -0,0 +1,21 @@
+/**
+ * ProgressIndicator - A headless component for displaying tutorial progress.
+ *
+ * CSS Variables Contract:
+ * - --tutorial-text: Primary text color
+ * - --tutorial-text-muted: Secondary/muted text color
+ *
+ * Data Attributes:
+ * - [data-progress]: Current progress ratio (0-1) as data attribute
+ * - [data-complete="true"]: When current equals total
+ */
+export type ProgressIndicatorProps = {
+    /** Current step number (1-indexed) */
+    current: number;
+    /** Total number of steps */
+    total: number;
+    /** Optional custom label (defaults to "Step X of Y") */
+    label?: string;
+};
+export declare function ProgressIndicator({ current, total, label, }: ProgressIndicatorProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ProgressIndicator.d.ts.map

package/dist/components/ProgressIndicator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressIndicator.d.ts","sourceRoot":"","sources":["../../src/components/ProgressIndicator.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,MAAM,MAAM,sBAAsB,GAAG;IACnC,sCAAsC;IACtC,OAAO,EAAE,MAAM,CAAC;IAChB,4BAA4B;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,wDAAwD;IACxD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,wBAAgB,iBAAiB,CAAC,EAChC,OAAO,EACP,KAAK,EACL,KAAK,GACN,EAAE,sBAAsB,2CAoBxB"}

package/dist/components/ProgressIndicator.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function ProgressIndicator({ current, total, label, }) {
+    const progress = total > 0 ? current / total : 0;
+    const isComplete = current >= total;
+    const displayLabel = label ?? `Step ${current} of ${total}`;
+    return (_jsxs("div", { className: "progress-indicator", "data-progress": progress.toFixed(2), "data-complete": isComplete ? 'true' : undefined, children: [_jsx("span", { className: "progress-indicator-label", children: displayLabel }), _jsx("div", { className: "progress-indicator-bar", children: _jsx("div", { className: "progress-indicator-fill", style: { width: `${progress * 100}%` } }) })] }));
+}

package/dist/components/TutorialStep.d.ts

@@ -0,0 +1,28 @@
+/**
+ * TutorialStep - A headless component for rendering tutorial step containers.
+ *
+ * CSS Variables Contract:
+ * - --tutorial-step-active: Background/border color for active step
+ * - --tutorial-step-complete: Background/border color for complete step
+ * - --tutorial-step-pending: Background/border color for pending step
+ * - --tutorial-bg: Default background color
+ * - --tutorial-text: Primary text color
+ * - --tutorial-text-muted: Secondary/muted text color
+ * - --tutorial-border: Border color
+ *
+ * Data Attributes:
+ * - [data-status="pending|active|complete"]: Step status for styling
+ */
+export type TutorialStepStatus = 'pending' | 'active' | 'complete';
+export type TutorialStepProps = {
+    /** Step number displayed in the header */
+    number: number;
+    /** Step title */
+    title: string;
+    /** Current status of the step */
+    status: TutorialStepStatus;
+    /** Step content */
+    children: React.ReactNode;
+};
+export declare function TutorialStep({ number, title, status, children, }: TutorialStepProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TutorialStep.d.ts.map

package/dist/components/TutorialStep.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TutorialStep.d.ts","sourceRoot":"","sources":["../../src/components/TutorialStep.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,QAAQ,GAAG,UAAU,CAAC;AAEnE,MAAM,MAAM,iBAAiB,GAAG;IAC9B,0CAA0C;IAC1C,MAAM,EAAE,MAAM,CAAC;IACf,iBAAiB;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,iCAAiC;IACjC,MAAM,EAAE,kBAAkB,CAAC;IAC3B,mBAAmB;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,wBAAgB,YAAY,CAAC,EAC3B,MAAM,EACN,KAAK,EACL,MAAM,EACN,QAAQ,GACT,EAAE,iBAAiB,2CAUnB"}

package/dist/components/TutorialStep.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function TutorialStep({ number, title, status, children, }) {
+    return (_jsxs("div", { className: "tutorial-step", "data-status": status, children: [_jsxs("div", { className: "tutorial-step-header", children: [_jsx("span", { className: "tutorial-step-number", children: number }), _jsx("span", { className: "tutorial-step-title", children: title })] }), _jsx("div", { className: "tutorial-step-content", children: children })] }));
+}

package/dist/components/index.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Tutorial Renderer Components
+ *
+ * Headless React components for rendering tutorial content.
+ * All components use CSS variables and data attributes for styling,
+ * allowing full customization by the consuming application.
+ *
+ * CSS Variables Contract:
+ * --tutorial-bg              Default background color
+ * --tutorial-step-active     Background/border for active step
+ * --tutorial-step-complete   Background/border for complete step
+ * --tutorial-step-pending    Background/border for pending step
+ * --tutorial-code-bg         Background for code/command blocks
+ * --tutorial-action-bg       Action button background
+ * --tutorial-action-hover    Action button hover background
+ * --tutorial-border          Border color
+ * --tutorial-text            Primary text color
+ * --tutorial-text-muted      Secondary/muted text color
+ */
+export { TutorialStep } from './TutorialStep';
+export type { TutorialStepProps, TutorialStepStatus, } from './TutorialStep';
+export { FilePreview } from './FilePreview';
+export type { FilePreviewProps, FilePreviewStatus, FilePreviewActionProps, } from './FilePreview';
+export { CommandBlock } from './CommandBlock';
+export type { CommandBlockProps, CommandBlockStatus, CommandBlockActionProps, } from './CommandBlock';
+export { ProgressIndicator } from './ProgressIndicator';
+export type { ProgressIndicatorProps } from './ProgressIndicator';
+export { ContentBox } from './ContentBox';
+export type { ContentBoxProps, ContentBoxVariant, } from './ContentBox';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AAGH,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,YAAY,EACV,iBAAiB,EACjB,kBAAkB,GACnB,MAAM,gBAAgB,CAAC;AAGxB,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EACV,gBAAgB,EAChB,iBAAiB,EACjB,sBAAsB,GACvB,MAAM,eAAe,CAAC;AAGvB,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,YAAY,EACV,iBAAiB,EACjB,kBAAkB,EAClB,uBAAuB,GACxB,MAAM,gBAAgB,CAAC;AAGxB,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,YAAY,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAGlE,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EACV,eAAe,EACf,iBAAiB,GAClB,MAAM,cAAc,CAAC"}

package/dist/components/index.js

@@ -0,0 +1,29 @@
+/**
+ * Tutorial Renderer Components
+ *
+ * Headless React components for rendering tutorial content.
+ * All components use CSS variables and data attributes for styling,
+ * allowing full customization by the consuming application.
+ *
+ * CSS Variables Contract:
+ * --tutorial-bg              Default background color
+ * --tutorial-step-active     Background/border for active step
+ * --tutorial-step-complete   Background/border for complete step
+ * --tutorial-step-pending    Background/border for pending step
+ * --tutorial-code-bg         Background for code/command blocks
+ * --tutorial-action-bg       Action button background
+ * --tutorial-action-hover    Action button hover background
+ * --tutorial-border          Border color
+ * --tutorial-text            Primary text color
+ * --tutorial-text-muted      Secondary/muted text color
+ */
+// TutorialStep
+export { TutorialStep } from './TutorialStep';
+// FilePreview
+export { FilePreview } from './FilePreview';
+// CommandBlock
+export { CommandBlock } from './CommandBlock';
+// ProgressIndicator
+export { ProgressIndicator } from './ProgressIndicator';
+// ContentBox
+export { ContentBox } from './ContentBox';

package/dist/hooks.d.ts

@@ -0,0 +1,94 @@
+/**
+ * Reporter Web React Hooks
+ *
+ * React hooks for subscribing to reporter state using useSyncExternalStore.
+ * Provides full state subscription and selective subscriptions for individual
+ * activities and groups.
+ */
+import type { ActivityId, GroupId } from '@pokit/core';
+import type { ReporterStore, ReporterState, ActivityState, GroupState } from './types';
+/**
+ * Subscribe to the full reporter state
+ *
+ * @param store - The reporter store
+ * @returns Current reporter state
+ *
+ * @example
+ * ```tsx
+ * const state = useReporterState(store);
+ * return <div>Status: {state.root.status}</div>;
+ * ```
+ */
+export declare function useReporterState(store: ReporterStore): ReporterState;
+/**
+ * Subscribe to a single activity by ID
+ * Returns undefined if activity doesn't exist
+ *
+ * @param store - The reporter store
+ * @param id - Activity ID to subscribe to
+ * @returns Activity state or undefined
+ *
+ * @example
+ * ```tsx
+ * const activity = useActivity(store, 'task-1');
+ * if (!activity) return null;
+ * return <div>{activity.label}: {activity.status}</div>;
+ * ```
+ */
+export declare function useActivity(store: ReporterStore, id: ActivityId): ActivityState | undefined;
+/**
+ * Subscribe to a single group by ID
+ * Returns undefined if group doesn't exist
+ *
+ * @param store - The reporter store
+ * @param id - Group ID to subscribe to
+ * @returns Group state or undefined
+ *
+ * @example
+ * ```tsx
+ * const group = useGroup(store, 'checks');
+ * if (!group) return null;
+ * return <div>{group.label} ({group.activityIds.length} tasks)</div>;
+ * ```
+ */
+export declare function useGroup(store: ReporterStore, id: GroupId): GroupState | undefined;
+/**
+ * Subscribe to root state only
+ * More efficient than useReporterState when you only need root info
+ *
+ * @param store - The reporter store
+ * @returns Root state
+ *
+ * @example
+ * ```tsx
+ * const root = useRootState(store);
+ * return <div>App: {root.appName} - {root.status}</div>;
+ * ```
+ */
+export declare function useRootState(store: ReporterStore): ReporterState['root'];
+/**
+ * Subscribe to logs
+ * Returns the full log array
+ *
+ * @param store - The reporter store
+ * @returns Array of log entries
+ *
+ * @example
+ * ```tsx
+ * const logs = useLogs(store);
+ * return (
+ *   <ul>
+ *     {logs.map(log => <li key={log.id}>{log.message}</li>)}
+ *   </ul>
+ * );
+ * ```
+ */
+export declare function useLogs(store: ReporterStore): ReporterState['logs'];
+/**
+ * Subscribe to suspended state
+ *
+ * @param store - The reporter store
+ * @returns Whether reporter is suspended
+ */
+export declare function useSuspended(store: ReporterStore): boolean;
+//# sourceMappingURL=hooks.d.ts.map

package/dist/hooks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../src/hooks.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,OAAO,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACvD,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAEvF;;;;;;;;;;;GAWG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,aAAa,GAAG,aAAa,CAEpE;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,aAAa,EAAE,EAAE,EAAE,UAAU,GAAG,aAAa,GAAG,SAAS,CAsC3F;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,EAAE,EAAE,EAAE,OAAO,GAAG,UAAU,GAAG,SAAS,CAsClF;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,aAAa,GAAG,aAAa,CAAC,MAAM,CAAC,CA0BxE;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,aAAa,GAAG,aAAa,CAAC,MAAM,CAAC,CA2BnE;AAED;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,aAAa,GAAG,OAAO,CAU1D"}