@walkeros/explorer 1.0.2 → 2.1.0

package/dist/components/molecules/split-button.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"split-button.stories.js","sourceRoot":"","sources":["../../../src/components/molecules/split-button.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C;;;;;GAKG;AACH,MAAM,IAAI,GAA6B;IACrC,SAAS,EAAE,WAAW;IACtB,KAAK,EAAE,uBAAuB;IAC9B,IAAI,EAAE,CAAC,UAAU,CAAC;CACnB,CAAC;AAEF,eAAe,IAAI,CAAC;AAGpB;;GAEG;AACH,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,QAAQ,EAAE,QAAQ;QAClB,OAAO,EAAE,GAAG,EAAE,GAAE,CAAC;KAClB;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,WAAW,GAAU;IAChC,IAAI,EAAE;QACJ,QAAQ,EAAE,QAAQ;QAClB,OAAO,EAAE,GAAG,EAAE,GAAE,CAAC;QACjB,OAAO,EAAE;YACP;gBACE,GAAG,EAAE,UAAU;gBACf,KAAK,EAAE,uBAAuB;gBAC9B,OAAO,EAAE,GAAG,EAAE,GAAE,CAAC;aAClB;YACD;gBACE,GAAG,EAAE,QAAQ;gBACb,KAAK,EAAE,cAAc;gBACrB,OAAO,EAAE,GAAG,EAAE,GAAE,CAAC;aAClB;SACF;KACF;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,QAAQ,EAAE,QAAQ;QAClB,OAAO,EAAE,GAAG,EAAE,GAAE,CAAC;QACjB,OAAO,EAAE,IAAI;QACb,WAAW,EAAE,cAAc;QAC3B,OAAO,EAAE;YACP,EAAE,GAAG,EAAE,UAAU,EAAE,KAAK,EAAE,uBAAuB,EAAE,OAAO,EAAE,GAAG,EAAE,GAAE,CAAC,EAAE;SACvE;KACF;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,IAAI,EAAE;QACJ,QAAQ,EAAE,QAAQ;QAClB,OAAO,EAAE,GAAG,EAAE,GAAE,CAAC;QACjB,QAAQ,EAAE,IAAI;QACd,OAAO,EAAE;YACP,EAAE,GAAG,EAAE,UAAU,EAAE,KAAK,EAAE,uBAAuB,EAAE,OAAO,EAAE,GAAG,EAAE,GAAE,CAAC,EAAE;SACvE;KACF;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GAAU;IAClC,IAAI,EAAE;QACJ,QAAQ,EAAE,mBAAmB;QAC7B,OAAO,EAAE,GAAG,EAAE,GAAE,CAAC;QACjB,OAAO,EAAE,QAAQ;QACjB,OAAO,EAAE;YACP;gBACE,GAAG,EAAE,UAAU;gBACf,KAAK,EAAE,yBAAyB;gBAChC,OAAO,EAAE,GAAG,EAAE,GAAE,CAAC;aAClB;SACF;KACF;CACF,CAAC"}

package/dist/hooks/useDropdown.d.ts

@@ -0,0 +1,34 @@
+import type { RefObject } from 'react';
+export interface UseDropdownReturn {
+    /** Whether dropdown is currently open */
+    isOpen: boolean;
+    /** Toggle dropdown open/closed */
+    toggle: () => void;
+    /** Open the dropdown */
+    open: () => void;
+    /** Close the dropdown */
+    close: () => void;
+    /** Ref to attach to the container element for click-outside detection */
+    containerRef: RefObject<HTMLDivElement | null>;
+}
+/**
+ * useDropdown - Manages dropdown open/close state with click-outside and keyboard handling
+ *
+ * Provides:
+ * - Open/close state management
+ * - Click-outside detection to close
+ * - Escape key handling to close
+ *
+ * @example
+ * const { isOpen, toggle, close, containerRef } = useDropdown();
+ *
+ * return (
+ *   <div ref={containerRef}>
+ *     <Dropdown isOpen={isOpen} onToggle={toggle}>
+ *       ...
+ *     </Dropdown>
+ *   </div>
+ * );
+ */
+export declare function useDropdown(): UseDropdownReturn;
+//# sourceMappingURL=useDropdown.d.ts.map

package/dist/hooks/useDropdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDropdown.d.ts","sourceRoot":"","sources":["../../src/hooks/useDropdown.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,iBAAiB;IAChC,yCAAyC;IACzC,MAAM,EAAE,OAAO,CAAC;IAChB,kCAAkC;IAClC,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,wBAAwB;IACxB,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,yBAAyB;IACzB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,yEAAyE;IACzE,YAAY,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;CAChD;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,WAAW,IAAI,iBAAiB,CAsD/C"}

package/dist/hooks/useDropdown.js

@@ -0,0 +1,66 @@
+import { useState, useRef, useEffect, useCallback } from 'react';
+/**
+ * useDropdown - Manages dropdown open/close state with click-outside and keyboard handling
+ *
+ * Provides:
+ * - Open/close state management
+ * - Click-outside detection to close
+ * - Escape key handling to close
+ *
+ * @example
+ * const { isOpen, toggle, close, containerRef } = useDropdown();
+ *
+ * return (
+ *   <div ref={containerRef}>
+ *     <Dropdown isOpen={isOpen} onToggle={toggle}>
+ *       ...
+ *     </Dropdown>
+ *   </div>
+ * );
+ */
+export function useDropdown() {
+    const [isOpen, setIsOpen] = useState(false);
+    const containerRef = useRef(null);
+    const toggle = useCallback(() => {
+        setIsOpen((prev) => !prev);
+    }, []);
+    const open = useCallback(() => {
+        setIsOpen(true);
+    }, []);
+    const close = useCallback(() => {
+        setIsOpen(false);
+    }, []);
+    // Close on click outside
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        function handleClickOutside(event) {
+            if (containerRef.current &&
+                !containerRef.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        }
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, [isOpen]);
+    // Close on Escape key
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        function handleEscape(event) {
+            if (event.key === 'Escape') {
+                setIsOpen(false);
+            }
+        }
+        document.addEventListener('keydown', handleEscape);
+        return () => document.removeEventListener('keydown', handleEscape);
+    }, [isOpen]);
+    return {
+        isOpen,
+        toggle,
+        open,
+        close,
+        containerRef,
+    };
+}
+//# sourceMappingURL=useDropdown.js.map

package/dist/hooks/useDropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDropdown.js","sourceRoot":"","sources":["../../src/hooks/useDropdown.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAgBjE;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,UAAU,WAAW;IACzB,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5C,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAElD,MAAM,MAAM,GAAG,WAAW,CAAC,GAAG,EAAE;QAC9B,SAAS,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC;IAC7B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,IAAI,GAAG,WAAW,CAAC,GAAG,EAAE;QAC5B,SAAS,CAAC,IAAI,CAAC,CAAC;IAClB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,KAAK,GAAG,WAAW,CAAC,GAAG,EAAE;QAC7B,SAAS,CAAC,KAAK,CAAC,CAAC;IACnB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,yBAAyB;IACzB,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,MAAM;YAAE,OAAO;QAEpB,SAAS,kBAAkB,CAAC,KAAiB;YAC3C,IACE,YAAY,CAAC,OAAO;gBACpB,CAAC,YAAY,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,EACpD,CAAC;gBACD,SAAS,CAAC,KAAK,CAAC,CAAC;YACnB,CAAC;QACH,CAAC;QAED,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAC;QAC3D,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAC;IAC7E,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,sBAAsB;IACtB,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,MAAM;YAAE,OAAO;QAEpB,SAAS,YAAY,CAAC,KAAoB;YACxC,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;gBAC3B,SAAS,CAAC,KAAK,CAAC,CAAC;YACnB,CAAC;QACH,CAAC;QAED,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC;QACnD,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC;IACrE,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,OAAO;QACL,MAAM;QACN,MAAM;QACN,IAAI;QACJ,KAAK;QACL,YAAY;KACb,CAAC;AACJ,CAAC"}

package/dist/index.d.cts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { Destination, WalkerOS, Mapping, Elb } from '@walkeros/core';
 import { RJSFSchema, UiSchema, WidgetProps, FieldProps } from '@rjsf/utils';
-import React, { ReactNode, FC, PropsWithChildren } from 'react';
+import React, { ReactNode, FormEvent, FC, PropsWithChildren, RefObject } from 'react';
 import * as monaco_editor from 'monaco-editor';
 import { editor } from 'monaco-editor';
 export { Icon } from '@iconify/react';
@@ -465,6 +465,7 @@ interface CodeProps {
     onChange?: (code: string) => void;
     disabled?: boolean;
     lineNumbers?: boolean;
+    minimap?: boolean;
     folding?: boolean;
     wordWrap?: boolean;
     className?: string;
@@ -478,6 +479,8 @@ interface CodeProps {
     packages?: string[];
     sticky?: boolean;
     ide?: boolean;
+    /** JSON Schema (Draft 7) for validation and IntelliSense in JSON mode */
+    jsonSchema?: Record<string, unknown>;
 }
 /**
  * Code - Pure Monaco editor atom
@@ -511,7 +514,7 @@ interface CodeProps {
  *   autoHeight={{ min: 100, max: 600 }}
  * />
  */
-declare function Code({ code, language, onChange, disabled, lineNumbers, folding, wordWrap, className, beforeMount, onMount, autoHeight, fontSize, packages, sticky, ide, }: CodeProps): react_jsx_runtime.JSX.Element;
+declare function Code({ code, language, onChange, disabled, lineNumbers, minimap, folding, wordWrap, className, beforeMount, onMount, autoHeight, fontSize, packages, sticky, ide, jsonSchema, }: CodeProps): react_jsx_runtime.JSX.Element;
 
 /**
  * Tab with code content for CodeBox
@@ -534,6 +537,7 @@ interface CodeBoxProps extends Omit<CodeProps, 'code'> {
     showTrafficLights?: boolean;
     showCopy?: boolean;
     showFormat?: boolean;
+    showSettings?: boolean;
     footer?: React.ReactNode;
     height?: string | number;
     style?: React.CSSProperties;
@@ -578,7 +582,7 @@ interface CodeBoxProps extends Omit<CodeProps, 'code'> {
  *   showFormat
  * />
  */
-declare function CodeBox({ code, language, onChange, disabled, autoHeight, label, header, showHeader, tabs, activeTab: controlledActiveTab, onTabChange, defaultTab, showTrafficLights, showCopy, showFormat, footer, height, style, className, ...codeProps }: CodeBoxProps): react_jsx_runtime.JSX.Element;
+declare function CodeBox({ code, language, onChange, disabled, autoHeight, label, header, showHeader, tabs, activeTab: controlledActiveTab, onTabChange, defaultTab, showTrafficLights, showCopy, showFormat, showSettings, footer, height, style, className, ...codeProps }: CodeBoxProps): react_jsx_runtime.JSX.Element;
 
 type CodeSnippetProps = Omit<CodeBoxProps, 'label' | 'showHeader'> & {
     format?: boolean;
@@ -715,6 +719,192 @@ interface PropertyTableProps {
 }
 declare function PropertyTable({ schema, className }: PropertyTableProps): react_jsx_runtime.JSX.Element;
 
+interface FormCardProps {
+    /** Card content */
+    children: React.ReactNode;
+    /** Card title */
+    title?: string;
+    /** Card subtitle */
+    subtitle?: string;
+    /** Footer content */
+    footer?: React.ReactNode;
+    /** Maximum width */
+    maxWidth?: 'sm' | 'md' | 'lg' | 'full';
+    /** Additional CSS class */
+    className?: string;
+}
+/**
+ * FormCard - Container for form-based content
+ *
+ * Pure UI component for centered form layouts.
+ * Typically used for auth pages, settings, etc.
+ *
+ * @example
+ * <FormCard title="Sign in" maxWidth="sm">
+ *   <form>...</form>
+ * </FormCard>
+ */
+declare function FormCard({ children, title, subtitle, footer, maxWidth, className, }: FormCardProps): react_jsx_runtime.JSX.Element;
+
+interface DropdownProps {
+    /** Trigger element (button, link, etc.) */
+    trigger: React.ReactNode;
+    /** Whether dropdown is open (controlled) */
+    isOpen: boolean;
+    /** Toggle handler */
+    onToggle: () => void;
+    /** Dropdown content */
+    children: React.ReactNode;
+    /** Alignment of dropdown panel */
+    align?: 'left' | 'right';
+    /** ARIA label for accessibility */
+    ariaLabel?: string;
+    /** Additional CSS class */
+    className?: string;
+}
+interface DropdownItemProps {
+    /** Item content */
+    children: React.ReactNode;
+    /** Click handler */
+    onClick?: () => void;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Visual variant */
+    variant?: 'default' | 'danger';
+    /** Additional CSS class */
+    className?: string;
+}
+interface DropdownDividerProps {
+    /** Additional CSS class */
+    className?: string;
+}
+/**
+ * Dropdown - Generic dropdown container (UI only)
+ *
+ * Pure UI component for dropdown menus.
+ * Click-outside and keyboard handling should be implemented in the parent
+ * via hooks like useDropdown.
+ *
+ * @example
+ * <Dropdown
+ *   trigger={<button>Menu</button>}
+ *   isOpen={isOpen}
+ *   onToggle={toggle}
+ *   align="right"
+ * >
+ *   <DropdownItem onClick={handleAction}>Action</DropdownItem>
+ *   <DropdownDivider />
+ *   <DropdownItem onClick={handleLogout} variant="danger">Logout</DropdownItem>
+ * </Dropdown>
+ */
+declare function Dropdown({ trigger, isOpen, onToggle, children, align, ariaLabel, className, }: DropdownProps): react_jsx_runtime.JSX.Element;
+/**
+ * DropdownItem - Menu item within a dropdown
+ *
+ * @example
+ * <DropdownItem onClick={handleClick}>Action</DropdownItem>
+ */
+declare function DropdownItem({ children, onClick, disabled, variant, className, }: DropdownItemProps): react_jsx_runtime.JSX.Element;
+/**
+ * DropdownDivider - Visual separator between menu items
+ *
+ * @example
+ * <DropdownDivider />
+ */
+declare function DropdownDivider({ className }: DropdownDividerProps): react_jsx_runtime.JSX.Element;
+
+interface ConfigFormCardProps {
+    /** Current config value (JSON/code string) */
+    config: string;
+    /** Config change handler */
+    onConfigChange: (value: string) => void;
+    /** Form submit handler */
+    onSubmit: (e: FormEvent) => void;
+    /** Loading state */
+    loading?: boolean;
+    /** Error message (null if no error) */
+    error?: string | null;
+    /** Card title (default: "Configuration") */
+    title?: string;
+    /** Textarea label (default: "Configuration (JSON)") */
+    label?: string;
+    /** Submit button text (default: "Submit") */
+    submitText?: string;
+    /** Loading button text (default: "Processing...") */
+    loadingText?: string;
+    /** Number of textarea rows (default: 20) */
+    rows?: number;
+    /** Card max width */
+    maxWidth?: 'sm' | 'md' | 'lg' | 'full';
+    /** Additional CSS class */
+    className?: string;
+}
+/**
+ * ConfigFormCard - Form for JSON/code configuration input (pure UI)
+ *
+ * Displays a textarea for entering configuration with submit button.
+ * Business logic (validation, API calls) is handled via callbacks.
+ *
+ * @example
+ * const { config, setConfig, loading, error, handleSubmit } = useBundleForm(); // App hook
+ *
+ * <ConfigFormCard
+ *   config={config}
+ *   onConfigChange={setConfig}
+ *   onSubmit={handleSubmit}
+ *   loading={loading}
+ *   error={error}
+ *   title="Bundle Configuration"
+ *   label="Flow Configuration (JSON)"
+ *   submitText="Bundle"
+ *   loadingText="Bundling..."
+ * />
+ */
+declare function ConfigFormCard({ config, onConfigChange, onSubmit, loading, error, title, label, submitText, loadingText, rows, maxWidth, className, }: ConfigFormCardProps): react_jsx_runtime.JSX.Element;
+
+interface SplitButtonAction {
+    key: string;
+    label: string;
+    onClick: () => void;
+    disabled?: boolean;
+}
+interface SplitButtonProps {
+    children: React.ReactNode;
+    onClick: () => void;
+    actions?: SplitButtonAction[];
+    variant?: 'primary' | 'default' | 'danger';
+    loading?: boolean;
+    loadingText?: string;
+    disabled?: boolean;
+    className?: string;
+}
+/**
+ * SplitButton - Primary button with dropdown actions
+ *
+ * Generic molecule: primary button + dropdown arrow.
+ * Click-outside and Escape to close.
+ */
+declare function SplitButton({ children, onClick, actions, variant, loading, loadingText, disabled, className, }: SplitButtonProps): react_jsx_runtime.JSX.Element;
+
+interface FlowSelectorFlow {
+    name: string;
+    platform?: 'web' | 'server';
+    deploymentStatus?: string | null;
+}
+interface FlowSelectorProps {
+    flows: FlowSelectorFlow[];
+    selectedFlow: string;
+    onSelectFlow: (name: string) => void;
+    className?: string;
+}
+/**
+ * FlowSelector - Tab bar for selecting named flows
+ *
+ * Shows tabs with status dots for each named flow.
+ * Returns null when there is only one flow or none.
+ */
+declare function FlowSelector({ flows, selectedFlow, onSelectFlow, className, }: FlowSelectorProps): react_jsx_runtime.JSX.Element | null;
+
 /**
  * Destination schema bundle for runtime provision
  *
@@ -1045,6 +1235,195 @@ interface PanelHintsProps {
 }
 declare function PanelHints({ title, hints, className, }: PanelHintsProps): react_jsx_runtime.JSX.Element;
 
+interface SpinnerProps {
+    /** Size of the spinner */
+    size?: 'sm' | 'md' | 'lg';
+    /** Additional CSS class */
+    className?: string;
+}
+/**
+ * Spinner - Loading indicator
+ *
+ * Pure UI component for showing loading state.
+ * No internal state - controlled via parent.
+ *
+ * @example
+ * <Spinner size="md" />
+ */
+declare function Spinner({ size, className }: SpinnerProps): react_jsx_runtime.JSX.Element;
+
+interface AlertProps {
+    /** Alert content */
+    children: React.ReactNode;
+    /** Optional title */
+    title?: string;
+    /** Visual variant */
+    variant: 'error' | 'success' | 'warning' | 'info';
+    /** ARIA role */
+    role?: 'alert' | 'status';
+    /** Additional CSS class */
+    className?: string;
+}
+/**
+ * Alert - Feedback message component
+ *
+ * Pure UI component for displaying error, success, warning, or info messages.
+ * No internal state - controlled via parent.
+ *
+ * @example
+ * <Alert variant="error">Something went wrong</Alert>
+ *
+ * @example
+ * <Alert variant="success" title="Check your email">
+ *   We sent a magic link to your inbox.
+ * </Alert>
+ */
+declare function Alert({ children, title, variant, role, className, }: AlertProps): react_jsx_runtime.JSX.Element;
+
+interface FormFieldProps {
+    /** Form field content (input, textarea, etc.) */
+    children: React.ReactNode;
+    /** Field label */
+    label?: string;
+    /** HTML id for the input (links label to input) */
+    htmlFor?: string;
+    /** Error message to display */
+    error?: string;
+    /** Whether the field is required */
+    required?: boolean;
+    /** Additional CSS class */
+    className?: string;
+}
+/**
+ * FormField - Label + input + error wrapper
+ *
+ * Pure UI component for consistent form field layout.
+ * Wraps input elements with label and error message.
+ *
+ * @example
+ * <FormField label="Email" htmlFor="email" error={errors.email}>
+ *   <input id="email" type="email" />
+ * </FormField>
+ */
+declare function FormField({ children, label, htmlFor, error, required, className, }: FormFieldProps): react_jsx_runtime.JSX.Element;
+
+interface FormInputProps {
+    /** Current value (controlled) */
+    value: string;
+    /** Change handler */
+    onChange: (value: string) => void;
+    /** Field label */
+    label?: string;
+    /** Input type */
+    type?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url';
+    /** Placeholder text */
+    placeholder?: string;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Autofocus on mount */
+    autoFocus?: boolean;
+    /** Autocomplete attribute */
+    autoComplete?: string;
+    /** Required field */
+    required?: boolean;
+    /** Error state (boolean shows error style, string shows error message) */
+    error?: boolean | string;
+    /** HTML id (auto-generated if not provided) */
+    id?: string;
+    /** Additional CSS class */
+    className?: string;
+}
+/**
+ * FormInput - Text input with label and error support
+ *
+ * Pure UI component for single-line text inputs.
+ * Fully controlled - all state managed by parent.
+ *
+ * @example
+ * <FormInput
+ *   label="Email"
+ *   type="email"
+ *   value={email}
+ *   onChange={setEmail}
+ *   error={emailError}
+ * />
+ */
+declare function FormInput({ value, onChange, label, type, placeholder, disabled, autoFocus, autoComplete, required, error, id, className, }: FormInputProps): react_jsx_runtime.JSX.Element;
+
+interface FormTextareaProps {
+    /** Current value (controlled) */
+    value: string;
+    /** Change handler */
+    onChange: (value: string) => void;
+    /** Field label */
+    label?: string;
+    /** Number of visible rows */
+    rows?: number;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Spellcheck enabled */
+    spellCheck?: boolean;
+    /** Required field */
+    required?: boolean;
+    /** Error state (boolean shows error style, string shows error message) */
+    error?: boolean | string;
+    /** HTML id (auto-generated if not provided) */
+    id?: string;
+    /** Additional CSS class */
+    className?: string;
+}
+/**
+ * FormTextarea - Multi-line text input with label and error support
+ *
+ * Pure UI component for multi-line text inputs.
+ * Fully controlled - all state managed by parent.
+ *
+ * @example
+ * <FormTextarea
+ *   label="Configuration"
+ *   value={config}
+ *   onChange={setConfig}
+ *   rows={15}
+ *   spellCheck={false}
+ * />
+ */
+declare function FormTextarea({ value, onChange, label, rows, placeholder, disabled, spellCheck, required, error, id, className, }: FormTextareaProps): react_jsx_runtime.JSX.Element;
+
+interface SubmitButtonProps {
+    /** Button content */
+    children: React.ReactNode;
+    /** Text to show when loading */
+    loadingText?: string;
+    /** Loading state */
+    loading?: boolean;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Visual variant */
+    variant?: 'primary' | 'default' | 'danger';
+    /** Full width button */
+    fullWidth?: boolean;
+    /** Button type */
+    type?: 'submit' | 'button';
+    /** Click handler (for type="button") */
+    onClick?: () => void;
+    /** Additional CSS class */
+    className?: string;
+}
+/**
+ * SubmitButton - Form submit button with loading state
+ *
+ * Pure UI component for form submissions.
+ * Shows spinner and loading text when loading=true.
+ *
+ * @example
+ * <SubmitButton loading={isSubmitting} loadingText="Saving...">
+ *   Save
+ * </SubmitButton>
+ */
+declare function SubmitButton({ children, loadingText, loading, disabled, variant, fullWidth, type, onClick, className, }: SubmitButtonProps): react_jsx_runtime.JSX.Element;
+
 /**
  * MDXProvider - Makes components available in MDX files without explicit imports
  *
@@ -1121,6 +1500,39 @@ declare const MDXCode: FC<PropsWithChildren<MDXCodeProps>>;
  */
 declare function cn(...inputs: ClassValue[]): string;
 
+interface UseDropdownReturn {
+    /** Whether dropdown is currently open */
+    isOpen: boolean;
+    /** Toggle dropdown open/closed */
+    toggle: () => void;
+    /** Open the dropdown */
+    open: () => void;
+    /** Close the dropdown */
+    close: () => void;
+    /** Ref to attach to the container element for click-outside detection */
+    containerRef: RefObject<HTMLDivElement | null>;
+}
+/**
+ * useDropdown - Manages dropdown open/close state with click-outside and keyboard handling
+ *
+ * Provides:
+ * - Open/close state management
+ * - Click-outside detection to close
+ * - Escape key handling to close
+ *
+ * @example
+ * const { isOpen, toggle, close, containerRef } = useDropdown();
+ *
+ * return (
+ *   <div ref={containerRef}>
+ *     <Dropdown isOpen={isOpen} onToggle={toggle}>
+ *       ...
+ *     </Dropdown>
+ *   </div>
+ * );
+ */
+declare function useDropdown(): UseDropdownReturn;
+
 declare const palenightTheme: editor.IStandaloneThemeData;
 /**
  * Register the palenight theme with Monaco Editor
@@ -1326,6 +1738,22 @@ declare function registerWalkerOSTypes(monaco: Monaco): void;
  */
 declare function initializeMonacoTypes(monaco: Monaco): void;
 
+/**
+ * Generate a unique model path for a Code instance.
+ * Used as the `path` prop for @monaco-editor/react Editor.
+ */
+declare function generateModelPath(): string;
+/**
+ * Register a JSON schema for a specific model path.
+ * Triggers a global setDiagnosticsOptions update.
+ */
+declare function registerJsonSchema(modelPath: string, schema: Record<string, unknown>): void;
+/**
+ * Unregister a JSON schema when a Code instance unmounts.
+ * Triggers a global setDiagnosticsOptions update.
+ */
+declare function unregisterJsonSchema(modelPath: string): void;
+
 /**
  * Formats captured function calls for display
  *
@@ -1387,4 +1815,4 @@ declare function createRawCapture(destinationEnv: unknown): {
     }[];
 };
 
-export { ArchitectureFlow, type ArchitectureFlowProps, Box, type BoxProps, type BoxTab, BrowserBox, type BrowserBoxProps, Button, ButtonGroup, type ButtonGroupProps, ButtonLink, type ButtonLinkProps, type ButtonProps, Code, CodeBox, type CodeBoxProps, type CodeBoxTab, type CodeProps, CodeSnippet, type CodeSnippetProps, CollectorBox, type CollectorBoxProps, ConfigEditor, type ConfigEditorBoxProps, DESTINATION_CONFIG_STRUCTURE, DestinationDemo, type DestinationDemoProps, DestinationInitDemo as DestinationInit, DestinationInitDemo, type DestinationInitDemoProps, DestinationDemo as DestinationPush, type DestinationSchemas, type ExplorerTheme, type FlowColumn, type FlowItem, FlowMap, type FlowMapProps, type FlowSection, type FlowStageConfig, Footer, type FooterProps, Grid, type GridProps, Header, type HeaderProps, type HintItem, LiveCode, type LiveCodeProps, type LoadPackageTypesOptions, MAPPING_RULE_STRUCTURE, MDXCode, MDXProvider, MappingCode, type MappingCodeProps, MappingDemo, type MappingDemoProps, MappingKeyField, MappingKeyWidget, PanelHints, type PanelHintsProps, Preview, type PreviewProps, PromotionPlayground, type PromotionPlaygroundProps, PropertyTable, type PropertyTableProps, captureDestinationPush, cn, createCaptureFn, createFbqDestination, createGtagDestination, createPlausibleDestination, createRawCapture, formatCapturedCalls, initializeMonacoTypes, lighthouseTheme, loadPackageTypes, loadTypeLibraryFromURL, palenightTheme, registerAllThemes, registerLighthouseTheme, registerPalenightTheme, registerWalkerOSTypes };
+export { Alert, type AlertProps, ArchitectureFlow, type ArchitectureFlowProps, Box, type BoxProps, type BoxTab, BrowserBox, type BrowserBoxProps, Button, ButtonGroup, type ButtonGroupProps, ButtonLink, type ButtonLinkProps, type ButtonProps, Code, CodeBox, type CodeBoxProps, type CodeBoxTab, type CodeProps, CodeSnippet, type CodeSnippetProps, CollectorBox, type CollectorBoxProps, ConfigEditor, type ConfigEditorBoxProps, ConfigFormCard, type ConfigFormCardProps, DESTINATION_CONFIG_STRUCTURE, DestinationDemo, type DestinationDemoProps, DestinationInitDemo as DestinationInit, DestinationInitDemo, type DestinationInitDemoProps, DestinationDemo as DestinationPush, type DestinationSchemas, Dropdown, DropdownDivider, type DropdownDividerProps, DropdownItem, type DropdownItemProps, type DropdownProps, type ExplorerTheme, type FlowColumn, type FlowItem, FlowMap, type FlowMapProps, type FlowSection, FlowSelector, type FlowSelectorFlow, type FlowSelectorProps, type FlowStageConfig, Footer, type FooterProps, FormCard, type FormCardProps, FormField, type FormFieldProps, FormInput, type FormInputProps, FormTextarea, type FormTextareaProps, Grid, type GridProps, Header, type HeaderProps, type HintItem, LiveCode, type LiveCodeProps, type LoadPackageTypesOptions, MAPPING_RULE_STRUCTURE, MDXCode, MDXProvider, MappingCode, type MappingCodeProps, MappingDemo, type MappingDemoProps, MappingKeyField, MappingKeyWidget, PanelHints, type PanelHintsProps, Preview, type PreviewProps, PromotionPlayground, type PromotionPlaygroundProps, PropertyTable, type PropertyTableProps, Spinner, type SpinnerProps, SplitButton, type SplitButtonAction, type SplitButtonProps, SubmitButton, type SubmitButtonProps, type UseDropdownReturn, captureDestinationPush, cn, createCaptureFn, createFbqDestination, createGtagDestination, createPlausibleDestination, createRawCapture, formatCapturedCalls, generateModelPath, initializeMonacoTypes, lighthouseTheme, loadPackageTypes, loadTypeLibraryFromURL, palenightTheme, registerAllThemes, registerJsonSchema, registerLighthouseTheme, registerPalenightTheme, registerWalkerOSTypes, unregisterJsonSchema, useDropdown };

package/dist/index.d.ts

@@ -23,11 +23,21 @@ export { CodeBox } from './components/molecules/code-box';
 export { CodeSnippet } from './components/molecules/code-snippet';
 export { FlowMap } from './components/molecules/flow-map';
 export { PropertyTable } from './components/molecules/property-table';
+export { FormCard } from './components/molecules/form-card';
+export { Dropdown, DropdownItem, DropdownDivider, } from './components/molecules/dropdown';
+export { ConfigFormCard } from './components/molecules/config-form-card';
 export type { ArchitectureFlowProps, FlowColumn, FlowSection, FlowItem, } from './components/molecules/architecture-flow';
 export type { CodeBoxProps, CodeBoxTab } from './components/molecules/code-box';
 export type { CodeSnippetProps } from './components/molecules/code-snippet';
 export type { FlowMapProps, FlowStageConfig, } from './components/molecules/flow-map';
 export type { PropertyTableProps } from './components/molecules/property-table';
+export { SplitButton } from './components/molecules/split-button';
+export type { SplitButtonProps, SplitButtonAction, } from './components/molecules/split-button';
+export { FlowSelector } from './components/molecules/flow-selector';
+export type { FlowSelectorProps, FlowSelectorFlow, } from './components/molecules/flow-selector';
+export type { FormCardProps } from './components/molecules/form-card';
+export type { DropdownProps, DropdownItemProps, DropdownDividerProps, } from './components/molecules/dropdown';
+export type { ConfigFormCardProps } from './components/molecules/config-form-card';
 export type { DestinationSchemas } from './types/schemas';
 export { DESTINATION_CONFIG_STRUCTURE, MAPPING_RULE_STRUCTURE, } from './schemas/config-structures';
 export { Preview } from './components/molecules/preview';
@@ -43,6 +53,12 @@ export { ButtonLink } from './components/atoms/button-link';
 export { MappingKeyWidget } from './components/atoms/mapping-key';
 export { MappingKeyField } from './components/atoms/mapping-key-field';
 export { PanelHints } from './components/atoms/panel-hints';
+export { Spinner } from './components/atoms/spinner';
+export { Alert } from './components/atoms/alert';
+export { FormField } from './components/atoms/form-field';
+export { FormInput } from './components/atoms/form-input';
+export { FormTextarea } from './components/atoms/form-textarea';
+export { SubmitButton } from './components/atoms/submit-button';
 export { Icon } from './components/atoms/icons';
 export type { CodeProps } from './components/atoms/code';
 export type { BoxProps, BoxTab } from './components/atoms/box';
@@ -53,13 +69,22 @@ export type { ButtonProps } from './components/atoms/button';
 export type { ButtonGroupProps } from './components/atoms/button-group';
 export type { ButtonLinkProps } from './components/atoms/button-link';
 export type { PanelHintsProps, HintItem } from './components/atoms/panel-hints';
+export type { SpinnerProps } from './components/atoms/spinner';
+export type { AlertProps } from './components/atoms/alert';
+export type { FormFieldProps } from './components/atoms/form-field';
+export type { FormInputProps } from './components/atoms/form-input';
+export type { FormTextareaProps } from './components/atoms/form-textarea';
+export type { SubmitButtonProps } from './components/atoms/submit-button';
 export { MDXProvider } from './providers/MDXProvider';
 export { MDXCode } from './components/atoms/mdx-code';
 export { cn } from './lib/utils';
+export { useDropdown } from './hooks/useDropdown';
+export type { UseDropdownReturn } from './hooks/useDropdown';
 export { palenightTheme, lighthouseTheme, registerPalenightTheme, registerLighthouseTheme, registerAllThemes, } from './themes';
 export type { ExplorerTheme } from './themes';
 export { registerWalkerOSTypes, initializeMonacoTypes, loadPackageTypes, loadTypeLibraryFromURL, } from './utils/monaco-types';
 export type { LoadPackageTypesOptions } from './utils/monaco-types';
+export { registerJsonSchema, unregisterJsonSchema, generateModelPath, } from './utils/monaco-json-schema';
 export { createGtagDestination, createFbqDestination, createPlausibleDestination, } from './helpers/destinations';
 export { captureDestinationPush, formatCapturedCalls, createRawCapture, } from './helpers/capture';
 //# sourceMappingURL=index.d.ts.map