@caffeinebounce/ui 0.62.2

package/dist/editor.d.cts

@@ -0,0 +1,89 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Editor } from 'grapesjs';
+
+/** Project types supported by the Studio SDK */
+type StudioProjectType = "web" | "email";
+/** Theme options for the editor */
+type StudioTheme = "light" | "dark";
+/** Block category configuration */
+interface StudioBlockCategory {
+    id: string;
+    label: string;
+    order?: number;
+    open?: boolean;
+}
+/** Custom block definition for the editor */
+interface StudioBlock {
+    id: string;
+    label: string;
+    category?: string;
+    content: string | {
+        type: string;
+        [key: string]: unknown;
+    };
+    media?: string;
+    attributes?: Record<string, string>;
+}
+/** Props for the StudioEditor component */
+interface StudioEditorProps {
+    /** Type of project - "web" for forms/pages, "email" for newsletters */
+    projectType?: StudioProjectType;
+    /** Initial HTML content to load in the editor (use for new content) */
+    initialContent?: string;
+    /** Initial project data to load (use for restoring saved projects) */
+    initialProject?: Record<string, unknown>;
+    /** Called when content changes */
+    onChange?: (html: string, css: string, json: unknown) => void;
+    /** Called when user explicitly saves */
+    onSave?: (data: {
+        html: string;
+        css: string;
+        json: unknown;
+    }) => void;
+    /** Editor theme - "light" or "dark". Defaults to "light" */
+    theme?: StudioTheme;
+    /** Custom blocks to add to the editor */
+    customBlocks?: StudioBlock[];
+    /** Custom block categories */
+    blockCategories?: StudioBlockCategory[];
+    /** Whether to show the pages panel (for multi-page projects) */
+    showPages?: boolean;
+    /** Whether to show the layers panel */
+    showLayers?: boolean;
+    /** Height of the editor container */
+    height?: string | number;
+    /** Additional CSS to inject into the canvas */
+    canvasStyles?: string;
+    /** License key - use "DEV_LICENSE_KEY" for localhost development */
+    licenseKey?: string;
+    /** Called when editor is ready */
+    onReady?: (editor: Editor) => void;
+    /** Custom storage configuration */
+    storage?: {
+        /** Storage type: "browser" for local, "self" for custom handlers, "cloud" for GrapesJS cloud, or false to disable */
+        type?: "browser" | "self" | "cloud" | false;
+        /** Autosave after this many changes (0 to disable) */
+        autosaveChanges?: number;
+        /** Autosave after this many milliseconds (0 to disable) */
+        autosaveIntervalMs?: number;
+    };
+    /** Unique key to identify this editor instance (used for storage isolation). Changing this forces a remount. */
+    editorKey?: string;
+    /** Start the editor in preview mode (hides panels, shows canvas only). Useful for read-only views. */
+    previewMode?: boolean;
+    /** Lock the editor in preview mode - prevents user from exiting preview. Used with previewMode. */
+    lockPreview?: boolean;
+    /** Initial device to select (e.g., "Desktop", "Mobile", "Tablet"). */
+    initialDevice?: string;
+    /** Called when user changes the device. Receives the device name. */
+    onDeviceChange?: (device: string) => void;
+    /** Enable verbose debug logging for editor initialization and canvas diagnostics. */
+    debug?: boolean;
+}
+/**
+ * StudioEditor component using GrapesJS Studio SDK.
+ * Production-ready visual editor with beautiful built-in UI.
+ */
+declare function StudioEditor({ projectType, initialContent, initialProject, onChange, onSave, theme, customBlocks, blockCategories: _blockCategories, showPages: _showPages, showLayers: _showLayers, height, canvasStyles, licenseKey, onReady, storage, editorKey, previewMode, lockPreview, initialDevice, onDeviceChange, debug, }: StudioEditorProps): react_jsx_runtime.JSX.Element;
+
+export { type StudioBlock, type StudioBlockCategory, StudioEditor, type StudioEditorProps, type StudioProjectType, type StudioTheme };

package/dist/editor.d.ts

@@ -0,0 +1,89 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Editor } from 'grapesjs';
+
+/** Project types supported by the Studio SDK */
+type StudioProjectType = "web" | "email";
+/** Theme options for the editor */
+type StudioTheme = "light" | "dark";
+/** Block category configuration */
+interface StudioBlockCategory {
+    id: string;
+    label: string;
+    order?: number;
+    open?: boolean;
+}
+/** Custom block definition for the editor */
+interface StudioBlock {
+    id: string;
+    label: string;
+    category?: string;
+    content: string | {
+        type: string;
+        [key: string]: unknown;
+    };
+    media?: string;
+    attributes?: Record<string, string>;
+}
+/** Props for the StudioEditor component */
+interface StudioEditorProps {
+    /** Type of project - "web" for forms/pages, "email" for newsletters */
+    projectType?: StudioProjectType;
+    /** Initial HTML content to load in the editor (use for new content) */
+    initialContent?: string;
+    /** Initial project data to load (use for restoring saved projects) */
+    initialProject?: Record<string, unknown>;
+    /** Called when content changes */
+    onChange?: (html: string, css: string, json: unknown) => void;
+    /** Called when user explicitly saves */
+    onSave?: (data: {
+        html: string;
+        css: string;
+        json: unknown;
+    }) => void;
+    /** Editor theme - "light" or "dark". Defaults to "light" */
+    theme?: StudioTheme;
+    /** Custom blocks to add to the editor */
+    customBlocks?: StudioBlock[];
+    /** Custom block categories */
+    blockCategories?: StudioBlockCategory[];
+    /** Whether to show the pages panel (for multi-page projects) */
+    showPages?: boolean;
+    /** Whether to show the layers panel */
+    showLayers?: boolean;
+    /** Height of the editor container */
+    height?: string | number;
+    /** Additional CSS to inject into the canvas */
+    canvasStyles?: string;
+    /** License key - use "DEV_LICENSE_KEY" for localhost development */
+    licenseKey?: string;
+    /** Called when editor is ready */
+    onReady?: (editor: Editor) => void;
+    /** Custom storage configuration */
+    storage?: {
+        /** Storage type: "browser" for local, "self" for custom handlers, "cloud" for GrapesJS cloud, or false to disable */
+        type?: "browser" | "self" | "cloud" | false;
+        /** Autosave after this many changes (0 to disable) */
+        autosaveChanges?: number;
+        /** Autosave after this many milliseconds (0 to disable) */
+        autosaveIntervalMs?: number;
+    };
+    /** Unique key to identify this editor instance (used for storage isolation). Changing this forces a remount. */
+    editorKey?: string;
+    /** Start the editor in preview mode (hides panels, shows canvas only). Useful for read-only views. */
+    previewMode?: boolean;
+    /** Lock the editor in preview mode - prevents user from exiting preview. Used with previewMode. */
+    lockPreview?: boolean;
+    /** Initial device to select (e.g., "Desktop", "Mobile", "Tablet"). */
+    initialDevice?: string;
+    /** Called when user changes the device. Receives the device name. */
+    onDeviceChange?: (device: string) => void;
+    /** Enable verbose debug logging for editor initialization and canvas diagnostics. */
+    debug?: boolean;
+}
+/**
+ * StudioEditor component using GrapesJS Studio SDK.
+ * Production-ready visual editor with beautiful built-in UI.
+ */
+declare function StudioEditor({ projectType, initialContent, initialProject, onChange, onSave, theme, customBlocks, blockCategories: _blockCategories, showPages: _showPages, showLayers: _showLayers, height, canvasStyles, licenseKey, onReady, storage, editorKey, previewMode, lockPreview, initialDevice, onDeviceChange, debug, }: StudioEditorProps): react_jsx_runtime.JSX.Element;
+
+export { type StudioBlock, type StudioBlockCategory, StudioEditor, type StudioEditorProps, type StudioProjectType, type StudioTheme };

package/dist/editor.js

@@ -0,0 +1,10 @@
+'use strict';
+
+var chunk5RW4PYZ6_js = require('./chunk-5RW4PYZ6.js');
+
+
+
+Object.defineProperty(exports, "StudioEditor", {
+  enumerable: true,
+  get: function () { return chunk5RW4PYZ6_js.StudioEditor; }
+});

package/dist/editor.mjs

@@ -0,0 +1 @@
+export { StudioEditor } from './chunk-72JGQ7IJ.mjs';

package/dist/forms.d.cts

@@ -0,0 +1,142 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { LucideIcon } from 'lucide-react';
+import { ReactNode } from 'react';
+
+/**
+ * Step validation status for progress indicator styling
+ */
+type StepStatus = "not-started" | "in-progress" | "incomplete" | "complete" | "error";
+/**
+ * A single step definition for the FormWizard
+ */
+interface FormWizardStep {
+    /** Unique identifier for the step */
+    id: string;
+    /** Display label for the step */
+    label: string;
+    /** Icon component from lucide-react */
+    icon: LucideIcon;
+}
+/**
+ * Style configuration returned for a step based on its status
+ */
+interface StepStatusStyles {
+    /** Border/background classes for the icon circle */
+    border: string;
+    /** Text color classes for the label */
+    text: string;
+    /** The icon element to render */
+    icon: ReactNode;
+    /** Optional tooltip message (for error/incomplete states) */
+    tooltip: string | null;
+}
+/**
+ * Function type for computing step status
+ */
+type GetStepStatus = (stepIndex: number) => StepStatus;
+/**
+ * Function type for computing step tooltip content
+ */
+type GetStepTooltip = (stepIndex: number, status: StepStatus) => string | null;
+/**
+ * Props for the FormWizard component
+ */
+interface FormWizardProps<T = unknown> {
+    /** Array of step definitions */
+    steps: FormWizardStep[];
+    /** Current active step index (0-based) */
+    currentStep: number;
+    /** Callback when step changes */
+    onStepChange: (stepIndex: number) => void;
+    /** Function to compute the status of each step */
+    getStepStatus: GetStepStatus;
+    /** Optional function to get tooltip content for a step */
+    getStepTooltip?: GetStepTooltip;
+    /** Enable keyboard navigation with Alt/Option+Arrow keys */
+    enableKeyboardNavigation?: boolean;
+    /** Scope keyboard navigation to elements with role="dialog" */
+    scopeToDialog?: boolean;
+    /** Callback when Escape is pressed (for cancel functionality) */
+    onCancel?: () => void;
+    /** Callback when Cmd/Ctrl+Enter is pressed (for submit functionality) */
+    onSubmit?: () => void;
+    /** Callback when Ctrl+Shift+R is pressed (for reset functionality) */
+    onReset?: () => void;
+    /**
+     * CSS selector for the element to auto-focus when the wizard mounts.
+     * Useful for focusing the first input field in a dialog.
+     * @example 'input[name="name"]' or '[role="dialog"] input:first-of-type'
+     */
+    autoFocusSelector?: string;
+    /**
+     * Key to use for localStorage persistence.
+     * If provided, form data will be automatically saved to localStorage.
+     */
+    persistKey?: string;
+    /** The form data to persist (required if persistKey is provided) */
+    formData?: T;
+    /** Callback when data is restored from storage */
+    onDataRestored?: (data: T) => void;
+    /** The step content to render */
+    children: ReactNode;
+    /** Additional class name for the container */
+    className?: string;
+}
+/**
+ * FormWizard provides a multi-step form interface with:
+ * - Step progress indicator with icons and animated connectors
+ * - Step validation status styling (not-started, in-progress, incomplete, complete, error)
+ * - Tooltips for steps with errors or incomplete status
+ * - Optional keyboard navigation (Alt/Option+Arrow keys)
+ *
+ * This component handles the step navigation and progress display,
+ * while the actual form fields and validation logic are provided by the parent.
+ *
+ * @example
+ * ```tsx
+ * <FormWizard
+ *   steps={[
+ *     { id: "basic", label: "Basic Info", icon: Building2 },
+ *     { id: "details", label: "Details", icon: FileText },
+ *   ]}
+ *   currentStep={currentStep}
+ *   onStepChange={setCurrentStep}
+ *   getStepStatus={(index) => stepStatuses[index]}
+ *   getStepTooltip={(index, status) =>
+ *     status === "error" ? "Missing required fields" : null
+ *   }
+ *   enableKeyboardNavigation
+ *   onCancel={() => setDialogOpen(false)}
+ *   onSubmit={handleFormSubmit}
+ * >
+ *   {currentStep === 0 && <BasicInfoFields />}
+ *   {currentStep === 1 && <DetailsFields />}
+ * </FormWizard>
+ * ```
+ */
+declare function FormWizard<T = unknown>({ steps, currentStep, onStepChange, getStepStatus, getStepTooltip, enableKeyboardNavigation, scopeToDialog, onCancel, onSubmit, onReset, autoFocusSelector, persistKey, formData, onDataRestored, children, className, }: FormWizardProps<T>): react_jsx_runtime.JSX.Element;
+/**
+ * Context for navigation controls - allows children to trigger navigation
+ */
+interface FormWizardNavigation {
+    /** Go to the next step */
+    goNext: () => void;
+    /** Go to the previous step */
+    goBack: () => void;
+    /** Go to a specific step */
+    goToStep: (index: number) => void;
+    /** Whether currently on the first step */
+    isFirstStep: boolean;
+    /** Whether currently on the last step */
+    isLastStep: boolean;
+    /** Current step index */
+    currentStep: number;
+    /** Total number of steps */
+    totalSteps: number;
+}
+/**
+ * Hook-compatible helper to create navigation handlers
+ */
+declare function useFormWizardNavigation(currentStep: number, totalSteps: number, onStepChange: (step: number) => void): FormWizardNavigation;
+
+export { FormWizard, type FormWizardNavigation, type FormWizardProps, type FormWizardStep, type GetStepStatus, type GetStepTooltip, type StepStatus, type StepStatusStyles, useFormWizardNavigation };

package/dist/forms.d.ts

@@ -0,0 +1,142 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { LucideIcon } from 'lucide-react';
+import { ReactNode } from 'react';
+
+/**
+ * Step validation status for progress indicator styling
+ */
+type StepStatus = "not-started" | "in-progress" | "incomplete" | "complete" | "error";
+/**
+ * A single step definition for the FormWizard
+ */
+interface FormWizardStep {
+    /** Unique identifier for the step */
+    id: string;
+    /** Display label for the step */
+    label: string;
+    /** Icon component from lucide-react */
+    icon: LucideIcon;
+}
+/**
+ * Style configuration returned for a step based on its status
+ */
+interface StepStatusStyles {
+    /** Border/background classes for the icon circle */
+    border: string;
+    /** Text color classes for the label */
+    text: string;
+    /** The icon element to render */
+    icon: ReactNode;
+    /** Optional tooltip message (for error/incomplete states) */
+    tooltip: string | null;
+}
+/**
+ * Function type for computing step status
+ */
+type GetStepStatus = (stepIndex: number) => StepStatus;
+/**
+ * Function type for computing step tooltip content
+ */
+type GetStepTooltip = (stepIndex: number, status: StepStatus) => string | null;
+/**
+ * Props for the FormWizard component
+ */
+interface FormWizardProps<T = unknown> {
+    /** Array of step definitions */
+    steps: FormWizardStep[];
+    /** Current active step index (0-based) */
+    currentStep: number;
+    /** Callback when step changes */
+    onStepChange: (stepIndex: number) => void;
+    /** Function to compute the status of each step */
+    getStepStatus: GetStepStatus;
+    /** Optional function to get tooltip content for a step */
+    getStepTooltip?: GetStepTooltip;
+    /** Enable keyboard navigation with Alt/Option+Arrow keys */
+    enableKeyboardNavigation?: boolean;
+    /** Scope keyboard navigation to elements with role="dialog" */
+    scopeToDialog?: boolean;
+    /** Callback when Escape is pressed (for cancel functionality) */
+    onCancel?: () => void;
+    /** Callback when Cmd/Ctrl+Enter is pressed (for submit functionality) */
+    onSubmit?: () => void;
+    /** Callback when Ctrl+Shift+R is pressed (for reset functionality) */
+    onReset?: () => void;
+    /**
+     * CSS selector for the element to auto-focus when the wizard mounts.
+     * Useful for focusing the first input field in a dialog.
+     * @example 'input[name="name"]' or '[role="dialog"] input:first-of-type'
+     */
+    autoFocusSelector?: string;
+    /**
+     * Key to use for localStorage persistence.
+     * If provided, form data will be automatically saved to localStorage.
+     */
+    persistKey?: string;
+    /** The form data to persist (required if persistKey is provided) */
+    formData?: T;
+    /** Callback when data is restored from storage */
+    onDataRestored?: (data: T) => void;
+    /** The step content to render */
+    children: ReactNode;
+    /** Additional class name for the container */
+    className?: string;
+}
+/**
+ * FormWizard provides a multi-step form interface with:
+ * - Step progress indicator with icons and animated connectors
+ * - Step validation status styling (not-started, in-progress, incomplete, complete, error)
+ * - Tooltips for steps with errors or incomplete status
+ * - Optional keyboard navigation (Alt/Option+Arrow keys)
+ *
+ * This component handles the step navigation and progress display,
+ * while the actual form fields and validation logic are provided by the parent.
+ *
+ * @example
+ * ```tsx
+ * <FormWizard
+ *   steps={[
+ *     { id: "basic", label: "Basic Info", icon: Building2 },
+ *     { id: "details", label: "Details", icon: FileText },
+ *   ]}
+ *   currentStep={currentStep}
+ *   onStepChange={setCurrentStep}
+ *   getStepStatus={(index) => stepStatuses[index]}
+ *   getStepTooltip={(index, status) =>
+ *     status === "error" ? "Missing required fields" : null
+ *   }
+ *   enableKeyboardNavigation
+ *   onCancel={() => setDialogOpen(false)}
+ *   onSubmit={handleFormSubmit}
+ * >
+ *   {currentStep === 0 && <BasicInfoFields />}
+ *   {currentStep === 1 && <DetailsFields />}
+ * </FormWizard>
+ * ```
+ */
+declare function FormWizard<T = unknown>({ steps, currentStep, onStepChange, getStepStatus, getStepTooltip, enableKeyboardNavigation, scopeToDialog, onCancel, onSubmit, onReset, autoFocusSelector, persistKey, formData, onDataRestored, children, className, }: FormWizardProps<T>): react_jsx_runtime.JSX.Element;
+/**
+ * Context for navigation controls - allows children to trigger navigation
+ */
+interface FormWizardNavigation {
+    /** Go to the next step */
+    goNext: () => void;
+    /** Go to the previous step */
+    goBack: () => void;
+    /** Go to a specific step */
+    goToStep: (index: number) => void;
+    /** Whether currently on the first step */
+    isFirstStep: boolean;
+    /** Whether currently on the last step */
+    isLastStep: boolean;
+    /** Current step index */
+    currentStep: number;
+    /** Total number of steps */
+    totalSteps: number;
+}
+/**
+ * Hook-compatible helper to create navigation handlers
+ */
+declare function useFormWizardNavigation(currentStep: number, totalSteps: number, onStepChange: (step: number) => void): FormWizardNavigation;
+
+export { FormWizard, type FormWizardNavigation, type FormWizardProps, type FormWizardStep, type GetStepStatus, type GetStepTooltip, type StepStatus, type StepStatusStyles, useFormWizardNavigation };

package/dist/forms.js

@@ -0,0 +1,24 @@
+'use strict';
+
+var chunkMPZFPU4X_js = require('./chunk-MPZFPU4X.js');
+require('./chunk-ESZ7CBA2.js');
+require('./chunk-UM7WMXIU.js');
+require('./chunk-WOITB4JL.js');
+require('./chunk-RBUYW6QQ.js');
+require('./chunk-6TGV2DNP.js');
+require('./chunk-J6OLBSZR.js');
+require('./chunk-SORWLKOK.js');
+require('./chunk-DQWHYBV2.js');
+require('./chunk-Q256HRYD.js');
+require('./chunk-ADIDI7AJ.js');
+
+
+
+Object.defineProperty(exports, "FormWizard", {
+  enumerable: true,
+  get: function () { return chunkMPZFPU4X_js.FormWizard; }
+});
+Object.defineProperty(exports, "useFormWizardNavigation", {
+  enumerable: true,
+  get: function () { return chunkMPZFPU4X_js.useFormWizardNavigation; }
+});

package/dist/forms.mjs

@@ -0,0 +1,11 @@
+export { FormWizard, useFormWizardNavigation } from './chunk-YSLD2HLP.mjs';
+import './chunk-KB7UXIQZ.mjs';
+import './chunk-7DHKQODW.mjs';
+import './chunk-6BUBNZPG.mjs';
+import './chunk-G5TQWWQA.mjs';
+import './chunk-VBD4Q5LL.mjs';
+import './chunk-OFQLWSUR.mjs';
+import './chunk-YKZEKJMZ.mjs';
+import './chunk-STEP6C4C.mjs';
+import './chunk-MHZXUOGN.mjs';
+import './chunk-IMKLN273.mjs';