@walkeros/explorer 0.0.8 → 0.3.0

package/dist/index.d.cts

@@ -0,0 +1,1248 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Destination, WalkerOS, Mapping } from '@walkeros/core';
+import { RJSFSchema, UiSchema, WidgetProps, FieldProps } from '@rjsf/utils';
+import * as monaco_editor from 'monaco-editor';
+import { editor } from 'monaco-editor';
+import React, { FC, PropsWithChildren } from 'react';
+import { ClassValue } from 'clsx';
+import { Monaco } from '@monaco-editor/react';
+
+interface MappingDemoProps {
+    input?: string;
+    config?: string;
+    labelInput?: string;
+    labelConfig?: string;
+    labelOutput?: string;
+    fn?: (input: string, config: string) => Promise<string>;
+}
+/**
+ * MappingDemo - Interactive dual-editor component with Monaco Editor
+ *
+ * A generic component with two editable JSON editors and one output display.
+ * Requires a transformation function to process input+config into output.
+ *
+ * Props:
+ * - input: Initial JSON string for left editor (default: '{}')
+ * - config: Initial JSON string for middle editor (default: '{}')
+ * - labelInput: Label for input editor (default: "Input")
+ * - labelConfig: Label for config editor (default: "Config")
+ * - labelOutput: Label for output editor (default: "Output")
+ * - fn: Transformation function (input, config) => Promise<string> (required for output)
+ *
+ * Example:
+ * ```tsx
+ * <MappingDemo
+ *   input='{ "name": "example" }'
+ *   config='{ "transform": "uppercase" }'
+ *   labelInput="Data"
+ *   labelConfig="Rules"
+ *   labelOutput="Result"
+ *   fn={async (input, config) => {
+ *     const data = JSON.parse(input);
+ *     const rules = JSON.parse(config);
+ *     // Your transformation logic
+ *     return JSON.stringify(result, null, 2);
+ *   }}
+ * />
+ * ```
+ */
+declare function MappingDemo({ input: initialInput, config: initialConfig, labelInput, labelConfig, labelOutput, fn, }?: MappingDemoProps): react_jsx_runtime.JSX.Element;
+
+interface MappingCodeProps {
+    input: string;
+    config?: string;
+    labelInput?: string;
+    labelOutput?: string;
+}
+/**
+ * MappingCode - Specialized component for walkerOS mapping demonstrations
+ *
+ * Similar to LiveCode but specifically for mapping transformations.
+ * Shows input code and output result side-by-side with built-in mapping logic.
+ *
+ * Props:
+ * - input: Code string to execute (can use await getMappingEvent, getMappingValue)
+ * - config: Optional mapping configuration JSON
+ * - labelInput: Label for input editor (default: "Configuration")
+ * - labelOutput: Label for output display (default: "Result")
+ *
+ * Example:
+ * ```tsx
+ * <MappingCode
+ *   input={`await getMappingEvent(
+ *     { name: 'product view' },
+ *     {
+ *       product: {
+ *         view: { name: 'product_viewed' }
+ *       }
+ *     }
+ *   );`}
+ * />
+ * ```
+ */
+declare function MappingCode({ input: initialInput, config, labelInput, labelOutput, }: MappingCodeProps): react_jsx_runtime.JSX.Element;
+
+interface DestinationDemoProps {
+    destination: Destination.Instance;
+    event: WalkerOS.PartialEvent;
+    mapping?: Mapping.Rule | string;
+    settings?: unknown;
+    generic?: boolean;
+    labelEvent?: string;
+    labelMapping?: string;
+    labelOutput?: string;
+    fn?: (event: WalkerOS.Event, context: Destination.PushContext) => Promise<string>;
+}
+/**
+ * DestinationDemo - Interactive destination testing component
+ *
+ * Automatically captures destination.push() calls and displays the output.
+ * The component auto-detects the destination's env from destination.examples.env.push.
+ *
+ * Props:
+ * - destination: Destination instance with examples.env.push export
+ * - event: walkerOS event to process
+ * - mapping: Optional mapping rules
+ * - settings: Destination-specific settings
+ * - generic: If true, wraps mapping in { '*': { '*': mapping } }
+ * - labelEvent: Label for event panel (default: 'Event')
+ * - labelMapping: Label for mapping panel (default: 'Mapping')
+ * - labelOutput: Label for output panel (default: 'Result')
+ *
+ * Example:
+ * ```tsx
+ * import destinationPlausible from '@walkeros/web-destination-plausible';
+ * import { examples } from '@walkeros/web-destination-plausible';
+ * import { getEvent } from '@walkeros/core';
+ *
+ * const destination = { ...destinationPlausible, examples };
+ *
+ * <DestinationDemo
+ *   destination={destination}
+ *   event={getEvent('order complete')}
+ *   mapping={examples.mapping.purchase}
+ *   settings={{ domain: 'elbwalker.com' }}
+ *   generic={true}
+ * />
+ * ```
+ */
+declare function createCaptureFn(fnName: string, onCapture: (output: string) => void): (...args: unknown[]) => void;
+declare function DestinationDemo({ destination, event: initialEvent, mapping: initialMapping, settings, generic, labelEvent, labelMapping, labelOutput, fn, }: DestinationDemoProps): react_jsx_runtime.JSX.Element;
+
+interface DestinationInitDemoProps {
+    destination: Destination.Instance;
+    settings?: unknown;
+    labelSettings?: string;
+    labelOutput?: string;
+}
+/**
+ * DestinationInitDemo - Interactive destination initialization testing component
+ *
+ * Automatically captures destination.init() calls and displays the output.
+ * The component auto-detects the destination's env from destination.examples.env.init.
+ *
+ * Props:
+ * - destination: Destination instance with examples.env.init export
+ * - settings: Initial destination-specific settings
+ * - labelSettings: Label for settings panel (default: 'Settings')
+ * - labelOutput: Label for output panel (default: 'Result')
+ *
+ * Example:
+ * ```tsx
+ * import destinationGtag from '@walkeros/web-destination-gtag';
+ * import { examples } from '@walkeros/web-destination-gtag';
+ *
+ * const destination = { ...destinationGtag, examples };
+ *
+ * <DestinationInitDemo
+ *   destination={destination}
+ *   settings={{ ga4: { measurementId: 'G-XXXXXXXXXX' } }}
+ * />
+ * ```
+ */
+declare function DestinationInitDemo({ destination, settings: initialSettings, labelSettings, labelOutput, }: DestinationInitDemoProps): react_jsx_runtime.JSX.Element;
+
+interface DemoEnv extends Destination.BaseEnv {
+    elb: (output: string) => void;
+}
+type DestinationCode = Destination.Instance<Destination.Types<unknown, unknown, DemoEnv>>;
+/**
+ * Creates a gtag-style destination for demo purposes.
+ * Formats output as: gtag('event', 'event_name', { data })
+ */
+declare function createGtagDestination(): DestinationCode;
+/**
+ * Creates a Facebook Pixel-style destination for demo purposes.
+ * Formats output as: fbq('track', 'EventName', { data })
+ */
+declare function createFbqDestination(): DestinationCode;
+/**
+ * Creates a Plausible-style destination for demo purposes.
+ * Formats output as: plausible('event_name', { props: { data } })
+ */
+declare function createPlausibleDestination(): DestinationCode;
+
+interface PromotionPlaygroundProps {
+    initialHtml?: string;
+    initialCss?: string;
+    initialJs?: string;
+    initialMapping?: string;
+    labelCode?: string;
+    labelPreview?: string;
+    labelEvents?: string;
+    labelMapping?: string;
+    labelResult?: string;
+    destination?: DestinationCode;
+}
+/**
+ * PromotionPlayground - Full walkerOS demonstration with live code editing
+ *
+ * Shows the complete chain:
+ * 1. Code Editor - Edit HTML/CSS/JS with walkerOS data attributes
+ * 2. Preview - Live rendered output that captures real events
+ * 3. Events - Real events captured from preview interactions
+ * 4. Mapping - Apply transformations and see destination output
+ * 5. Result - Final destination function calls
+ */
+declare function PromotionPlayground({ initialHtml, initialCss, initialJs, initialMapping, labelCode, labelPreview, labelEvents, labelMapping, labelResult, destination, }: PromotionPlaygroundProps): react_jsx_runtime.JSX.Element;
+
+interface LiveCodeProps {
+    input: unknown;
+    config?: unknown;
+    output?: unknown;
+    options?: WalkerOS.AnyObject;
+    fn?: (input: unknown, config: unknown, log: (...args: unknown[]) => void, options?: WalkerOS.AnyObject) => Promise<void>;
+    fnName?: string;
+    labelInput?: string;
+    labelConfig?: string;
+    labelOutput?: string;
+    emptyText?: string;
+    disableInput?: boolean;
+    disableConfig?: boolean;
+    showQuotes?: boolean;
+    className?: string;
+}
+declare function LiveCode({ input: initInput, config: initConfig, output: initOutput, options, fn, fnName, labelInput, labelConfig, labelOutput, emptyText, disableInput, disableConfig, showQuotes, className, }: LiveCodeProps): react_jsx_runtime.JSX.Element;
+
+interface CollectorBoxProps {
+    event: string;
+    mapping: string;
+    destination: DestinationCode;
+    label?: string;
+    wordWrap?: boolean;
+}
+/**
+ * CollectorBox - Runs a collector with destination to transform events
+ *
+ * Takes raw event and mapping config, processes through collector pipeline,
+ * and displays the formatted destination output.
+ *
+ * @example
+ * <CollectorBox
+ *   event={JSON.stringify(event)}
+ *   mapping={mappingConfig}
+ *   destination={createGtagDestination()}
+ *   label="Result"
+ * />
+ */
+declare function CollectorBox({ event, mapping, destination, label, wordWrap, }: CollectorBoxProps): react_jsx_runtime.JSX.Element;
+
+interface BrowserBoxProps {
+    html?: string;
+    css?: string;
+    js?: string;
+    onHtmlChange?: (value: string) => void;
+    onCssChange?: (value: string) => void;
+    onJsChange?: (value: string) => void;
+    showPreview?: boolean;
+    label?: string;
+    className?: string;
+    initialTab?: 'preview' | 'html' | 'css' | 'js';
+    lineNumbers?: boolean;
+    wordWrap?: boolean;
+}
+/**
+ * BrowserBox - Code editor with HTML/CSS/JS toggle
+ *
+ * Displays code editor with button group to switch between HTML, CSS, and JavaScript.
+ * Only shows tabs for content that is provided.
+ *
+ * @example
+ * <BrowserBox
+ *   html={htmlCode}
+ *   css={cssCode}
+ *   onHtmlChange={setHtml}
+ *   onCssChange={setCss}
+ *   label="Code"
+ * />
+ */
+declare function BrowserBox({ html, css, js, onHtmlChange, onCssChange, onJsChange, showPreview, label, className, initialTab, lineNumbers, wordWrap, }: BrowserBoxProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Configuration Structure Definition
+ *
+ * Describes the SHAPE of a configuration object - what properties it has,
+ * how they should be edited, and how to build tree navigation.
+ *
+ * This is NOT the schema for values (that's JSON Schema).
+ * This IS the meta-schema that describes structure.
+ *
+ * Example:
+ * - DESTINATION_CONFIG_STRUCTURE describes Destination.Config shape
+ * - MAPPING_RULE_STRUCTURE describes Mapping.Rule shape
+ * - VALUE_CONFIG_MAP_STRUCTURE describes ValueConfig.map shape
+ */
+interface ConfigStructureDef {
+    /** Type of the root config */
+    type: 'object' | 'array' | 'primitive';
+    /** Human-readable title */
+    title?: string;
+    /** Description of this config type */
+    description?: string;
+    /** Default NodeType for overview (when path is empty) */
+    rootNodeType?: NodeType;
+    /** Property definitions */
+    properties?: Record<string, PropertyDef>;
+    /** Special structural patterns */
+    patterns?: {
+        /** Entity → Action hierarchy (e.g., mapping.{entity}.{action}) */
+        'entity-action'?: boolean;
+        /** Dynamic keys allowed (e.g., map.{any-key}) */
+        'dynamic-keys'?: boolean;
+    };
+}
+/**
+ * Property Definition
+ *
+ * Describes a single property within a config structure.
+ */
+interface PropertyDef {
+    /** Human-readable title */
+    title?: string;
+    /** Description of this property */
+    description?: string;
+    /** Explicit NodeType for editing this property */
+    nodeType?: NodeType;
+    /** Path to schema in schemas bundle (e.g., 'settings', 'mapping', 'id') */
+    schemaPath?: string;
+    /** How to build children for this property */
+    children?: ChildrenStrategy;
+    /** Nested structure definition (for complex properties) */
+    structure?: ConfigStructureDef;
+    /** Depth of this property in entity-action pattern */
+    depth?: number;
+}
+/**
+ * Children Building Strategy
+ *
+ * Determines how to build tree children for a property.
+ */
+type ChildrenStrategy = 'entity-action' | 'schema-driven' | 'value-driven' | 'none';
+
+/**
+ * Node types for different editing contexts
+ */
+type NodeType = 'entity' | 'rule' | 'name' | 'batch' | 'policy' | 'consent' | 'settings' | 'options' | 'validationOverview' | 'valueConfig' | 'valueType' | 'primitive' | 'map' | 'loop' | 'set' | 'value' | 'fn' | 'validate' | 'condition' | 'enum' | 'boolean' | 'key';
+
+interface NavigationState {
+    currentPath: string[];
+    nodeType: NodeType;
+    expandedPaths: string[][];
+}
+
+/**
+ * Config Editor Box
+ *
+ * Wrapper component that provides Code/Visual toggle.
+ * Persists navigation state when switching between views.
+ *
+ * @example
+ * <ConfigEditorBox
+ *   config={destinationConfig}
+ *   onChange={setConfig}
+ *   structure={DESTINATION_CONFIG_STRUCTURE}
+ *   schemas={metaSchemas}
+ *   label="Meta Pixel Configuration"
+ * />
+ */
+interface ConfigEditorBoxProps<T extends Record<string, unknown>> {
+    config: T;
+    onChange?: (config: T) => void;
+    structure: ConfigStructureDef;
+    schemas?: Record<string, RJSFSchema>;
+    sections?: Record<string, boolean>;
+    label?: string;
+    className?: string;
+    initialTab?: 'code' | 'visual';
+    resizable?: boolean;
+    showTree?: boolean;
+    showHeader?: boolean;
+    initialNavigationState?: NavigationState;
+    onNavigationStateChange?: (state: NavigationState) => void;
+}
+
+/**
+ * ConfigEditor - Generic Visual Configuration Editor
+ *
+ * A fully generic configuration editor that works at ANY depth with ANY config type.
+ * Uses structure definitions and schemas to provide appropriate editing UI.
+ *
+ * Key Features:
+ * - Works at any depth (full config or nested object)
+ * - Structure-driven (no hardcoded assumptions)
+ * - Schema-aware (validation, type hints, metadata)
+ * - Code/Visual toggle
+ * - Tree navigation
+ * - Validation with error overview
+ * - TypeScript generic for type safety
+ *
+ * @example
+ * // Full DestinationConfig
+ * <ConfigEditor
+ *   config={destinationConfig}
+ *   onChange={setConfig}
+ *   structure={DESTINATION_CONFIG_STRUCTURE}
+ *   schemas={metaSchemas}
+ *   label="Meta Pixel Configuration"
+ * />
+ *
+ * @example
+ * // Single Rule (deep nested)
+ * <ConfigEditor
+ *   config={pageViewRule}
+ *   onChange={setRule}
+ *   structure={MAPPING_RULE_STRUCTURE}
+ *   schemas={{ mapping: mappingSchema }}
+ *   label="Page View Rule"
+ *   showTree={false}
+ * />
+ *
+ * @example
+ * // Read-only (no onChange)
+ * <ConfigEditor
+ *   config={destinationConfig}
+ *   structure={DESTINATION_CONFIG_STRUCTURE}
+ *   initialTab="code"
+ * />
+ */
+declare function ConfigEditor<T extends Record<string, unknown>>(props: ConfigEditorBoxProps<T>): react_jsx_runtime.JSX.Element;
+
+interface CodeProps {
+    code: string;
+    language?: string;
+    onChange?: (code: string) => void;
+    disabled?: boolean;
+    lineNumbers?: boolean;
+    folding?: boolean;
+    wordWrap?: boolean;
+    className?: string;
+    beforeMount?: (monaco: typeof monaco_editor) => void;
+    onMount?: (editor: editor.IStandaloneCodeEditor) => void;
+    autoHeight?: boolean | {
+        min?: number;
+        max?: number;
+    };
+    fontSize?: number;
+    packages?: string[];
+}
+/**
+ * Code - Pure Monaco editor atom
+ *
+ * Height Management:
+ * Two modes controlled by `autoHeight` prop:
+ *
+ * 1. Default (autoHeight=false): height="100%" - fills parent container
+ *    - Uses flex: 1 + min-height: 0 for proper flex overflow containment
+ *    - Monaco set to height="100%" to fill container
+ *    - automaticLayout: true + ResizeObserver for reliable resize detection
+ *    - Use in Grid (equal heights) and Flex contexts (fill parent)
+ *
+ * 2. Auto-height (autoHeight=true): Dynamically sizes to content
+ *    - Uses Monaco's getContentHeight() API for accurate content measurement
+ *    - Respects min/max boundaries (default: 100-600px)
+ *    - Updates automatically when content changes
+ *    - Use in standalone contexts (docs) to eliminate blank space
+ *
+ * @example
+ * // Grid context - use default height="100%" for equal row heights
+ * <Grid columns={3}>
+ *   <CodeBox code={event} />
+ *   <CodeBox code={mapping} />
+ * </Grid>
+ *
+ * @example
+ * // Standalone context - use autoHeight to fit content
+ * <CodeBox
+ *   code={shortExample}
+ *   autoHeight={{ min: 100, max: 600 }}
+ * />
+ */
+declare function Code({ code, language, onChange, disabled, lineNumbers, folding, wordWrap, className, beforeMount, onMount, autoHeight, fontSize, packages, }: CodeProps): react_jsx_runtime.JSX.Element;
+
+interface CodeBoxProps extends CodeProps {
+    label?: string;
+    showCopy?: boolean;
+    showFormat?: boolean;
+    showHeader?: boolean;
+    height?: string | number;
+}
+/**
+ * CodeBox - Monaco editor wrapped in a Box with header and actions
+ *
+ * Molecule that combines Box + Code atom + toolbar actions.
+ * Use this when you need an editor with header, copy, and format buttons.
+ * Use Code atom directly when you need an editor without Box wrapper.
+ *
+ * Height Behavior:
+ *
+ * Three height modes:
+ * 1. Grid context: Equal row heights (250-450px), fills available space
+ * 2. Explicit height prop: Fixed height (e.g., height={600} or height="50vh")
+ * 3. Auto-height prop: Dynamically sizes to content (min-max boundaries)
+ *
+ * @example
+ * // Grid context - use default (no autoHeight) for equal row heights
+ * <Grid columns={3}>
+ *   <CodeBox code={event} label="Event" showCopy />
+ *   <CodeBox code={mapping} label="Mapping" showFormat />
+ *   <CodeBox code={output} label="Output" disabled />
+ * </Grid>
+ *
+ * @example
+ * // Standalone with auto-height - fits content, no blank space
+ * <CodeBox
+ *   code={setupCode}
+ *   label="Setup"
+ *   autoHeight={{ min: 100, max: 600 }}
+ *   disabled
+ * />
+ *
+ * @example
+ * // Explicit height override
+ * <CodeBox
+ *   code={largeConfig}
+ *   label="Configuration"
+ *   height={600}
+ *   showFormat
+ * />
+ */
+declare function CodeBox({ code, language, label, onChange, disabled, showCopy, showFormat, showHeader, height, className, autoHeight, ...codeProps }: CodeBoxProps): react_jsx_runtime.JSX.Element;
+
+type CodeSnippetProps = Omit<CodeBoxProps, 'label' | 'showHeader'>;
+/**
+ * CodeSnippet - Prominent code display for snippets
+ *
+ * Wraps CodeBox with larger font size and generous padding.
+ * Use this for showcasing code examples, one-liners, or small code blocks
+ * where you want the code to be more visually prominent than in a standard editor.
+ *
+ * Always renders without a header. Use CodeBox if you need a header.
+ *
+ * Default behavior:
+ * - Read-only (disabled=true)
+ * - Copy button enabled (showCopy=true)
+ * - Auto-height with sensible bounds (min: 20px, max: 600px)
+ *
+ * Reuses all CodeBox functionality:
+ * - Monaco Editor with syntax highlighting
+ * - Grid height management and auto-height modes
+ * - Copy button
+ * - Theme integration
+ *
+ * @example
+ * // Minimal usage - just code and language
+ * <CodeSnippet
+ *   code="import { elb } from '@walkeros/core';"
+ *   language="javascript"
+ * />
+ *
+ * @example
+ * // Override defaults if needed
+ * <CodeSnippet
+ *   code={editableCode}
+ *   language="javascript"
+ *   disabled={false}
+ *   showCopy={false}
+ *   autoHeight={{ min: 100, max: 800 }}
+ * />
+ */
+declare function CodeSnippet(props: CodeSnippetProps): react_jsx_runtime.JSX.Element;
+
+interface PropertyTableProps {
+    schema: RJSFSchema;
+    className?: string;
+}
+declare function PropertyTable({ schema, className }: PropertyTableProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Destination schema bundle for runtime provision
+ *
+ * Maps to Destination.Types<S, M, E> generic structure:
+ * - settings: JSON Schema for config-level Settings<T>
+ * - mapping: JSON Schema for rule-level Mapping<T> (settings inside rules)
+ * - data: JSON Schema for expected event data properties
+ *
+ * Used by ConfigEditor and related components to provide:
+ * - Type detection for editing panes
+ * - Validation for user input
+ * - Metadata (titles, descriptions, enums)
+ */
+interface DestinationSchemas {
+    /** Config-level settings schema (for Settings<T>) */
+    settings?: RJSFSchema;
+    /** Config-level settings UI schema */
+    settingsUi?: UiSchema;
+    /** Rule-level mapping settings schema (for Mapping<T>) */
+    mapping?: RJSFSchema;
+    /** Rule-level mapping settings UI schema */
+    mappingUi?: UiSchema;
+    /** Expected data properties schema for destination events */
+    data?: RJSFSchema;
+    /** Data properties UI schema */
+    dataUi?: UiSchema;
+}
+
+/**
+ * Structure Definition for Destination.Config
+ *
+ * Describes the shape of a full destination configuration:
+ * - settings: Destination-specific settings
+ * - mapping: Event mapping rules (entity → action hierarchy)
+ * - data: Global data transformations
+ * - policy: Processing policy rules
+ * - consent: Consent requirements
+ * - id, loadScript, queue, verbose: Config options
+ *
+ * This structure works with DestinationBox and ConfigEditor.
+ */
+declare const DESTINATION_CONFIG_STRUCTURE: ConfigStructureDef;
+
+/**
+ * Structure Definition for Mapping.Rule
+ *
+ * Describes the shape of a single mapping rule (e.g., mapping.page.view):
+ * - name: Event name override
+ * - batch: Batch size
+ * - settings: Rule-level settings
+ * - data: Data transformations
+ * - consent: Consent requirements
+ * - condition: Condition function
+ * - ignore: Ignore flag
+ *
+ * This structure enables editing individual rules with ConfigEditor.
+ */
+declare const MAPPING_RULE_STRUCTURE: ConfigStructureDef;
+
+interface PreviewProps {
+    html: string;
+    css?: string;
+    onEvent?: (event: WalkerOS.Event) => void;
+    label?: string;
+}
+/**
+ * Preview - HTML preview wrapped in a Box with highlight buttons
+ *
+ * Renders HTML in an isolated iframe with highlight buttons footer.
+ * When onEvent is provided, initializes walkerOS browser source in iframe.
+ *
+ * @example
+ * // Read-only preview
+ * <Preview html={html} css={css} label="Preview" />
+ *
+ * // Interactive preview with event capture
+ * <Preview html={html} css={css} onEvent={(event) => console.log(event)} label="Preview" />
+ */
+declare function Preview({ html, css, onEvent, label }: PreviewProps): react_jsx_runtime.JSX.Element;
+
+interface BoxProps {
+    header: string;
+    headerActions?: React.ReactNode;
+    footer?: React.ReactNode;
+    children: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+    minHeight?: number | string;
+    maxHeight?: number | string;
+    tiny?: boolean;
+    resizable?: boolean;
+    showHeader?: boolean;
+}
+/**
+ * Box - Container atom component
+ *
+ * Provides a consistent box container with header and content area.
+ * Used across all explorer components for consistent styling.
+ *
+ * Height behavior:
+ * - Default: minHeight 100px, grows as needed
+ * - tiny prop: sets minHeight to 100px explicitly
+ * - Custom minHeight/maxHeight: override defaults
+ * - In Grid: fills row height (equal heights per row)
+ *
+ * @example
+ * <Box header="Preview">
+ *   <Preview html={html} css={css} />
+ * </Box>
+ *
+ * @example
+ * <Box header="Code" minHeight={200} maxHeight={600}>
+ *   <CodeBox ... />
+ * </Box>
+ */
+declare function Box({ header, headerActions, footer, children, className, style, minHeight, maxHeight, tiny, resizable, showHeader, }: BoxProps): react_jsx_runtime.JSX.Element;
+
+interface GridProps {
+    children: React.ReactNode;
+    columns?: number;
+    minBoxWidth?: number | string;
+    gap?: number | string;
+    rowHeight?: 'auto' | 'equal' | 'synced' | number;
+    maxRowHeight?: number | string | 'none';
+    showScrollButtons?: boolean;
+    className?: string;
+}
+/**
+ * Grid - Horizontal scrolling layout component for arranging boxes
+ *
+ * Provides consistent grid layout for box components with horizontal
+ * scrolling when content exceeds available space. Boxes maintain minimum
+ * width and never wrap to new rows.
+ *
+ * @example
+ * // 5 boxes with default 350px minimum width
+ * <Grid columns={5}>
+ *   <CodeBox ... />
+ *   <CodeBox ... />
+ *   <CodeBox ... />
+ *   <CodeBox ... />
+ *   <CodeBox ... />
+ * </Grid>
+ *
+ * @example
+ * // Custom minimum box width
+ * <Grid columns={3} minBoxWidth={400}>
+ *   <BrowserBox ... />
+ *   <CodeBox ... />
+ *   <CodeBox ... />
+ * </Grid>
+ *
+ * @example
+ * // Custom row height
+ * <Grid columns={2} rowHeight={300}>
+ *   <CodeBox ... />
+ *   <CodeBox ... />
+ * </Grid>
+ *
+ * @example
+ * // Auto row height (no minimum)
+ * <Grid columns={3} rowHeight="auto">
+ *   <CodeBox ... />
+ * </Grid>
+ *
+ * @example
+ * // Unlimited row height (no max constraint)
+ * <Grid columns={2} maxRowHeight="none">
+ *   <PropertyTable ... />
+ *   <CodeBox ... />
+ * </Grid>
+ *
+ * @example
+ * // Custom max row height
+ * <Grid columns={2} maxRowHeight={800}>
+ *   <PropertyTable ... />
+ *   <CodeBox ... />
+ * </Grid>
+ */
+declare function Grid({ children, columns, minBoxWidth, gap, rowHeight, maxRowHeight, showScrollButtons, className, }: GridProps): react_jsx_runtime.JSX.Element;
+
+interface HeaderProps {
+    label: string;
+    children?: React.ReactNode;
+}
+declare function Header({ label, children }: HeaderProps): react_jsx_runtime.JSX.Element;
+
+interface FooterProps {
+    children: React.ReactNode;
+    className?: string;
+}
+/**
+ * Footer - Footer atom component for boxes
+ *
+ * Provides a fixed-height footer area at the bottom of a box.
+ * Pairs with Header component for consistent box structure.
+ *
+ * @example
+ * <Box header="Preview">
+ *   <Preview ... />
+ *   <Footer>
+ *     <ButtonGroup buttons={...} />
+ *   </Footer>
+ * </Box>
+ */
+declare function Footer({ children, className }: FooterProps): react_jsx_runtime.JSX.Element;
+
+interface ButtonProps {
+    active?: boolean;
+    onClick?: () => void;
+    children: React.ReactNode;
+    className?: string;
+}
+/**
+ * Button - Button component for headers and controls
+ *
+ * Used in button groups or standalone in headers.
+ * Follows atomic design principles as a base atom.
+ */
+declare function Button({ active, onClick, children, className, }: ButtonProps): react_jsx_runtime.JSX.Element;
+
+interface ButtonGroupProps {
+    buttons: Array<{
+        label: string;
+        value: string;
+        active?: boolean;
+    }>;
+    onButtonClick: (value: string) => void;
+    className?: string;
+}
+/**
+ * ButtonGroup - Segmented control for headers
+ *
+ * Displays multiple buttons in a grouped segmented control style.
+ * Commonly used for tab switching (HTML/CSS/JS, etc.)
+ */
+declare function ButtonGroup({ buttons, onButtonClick, className, }: ButtonGroupProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * MappingKeyWidget - RJSF widget for key property
+ *
+ * Manages the key property of ValueConfig - a string path to extract
+ * values from events (e.g., 'data.id', 'user.email', 'globals.currency').
+ *
+ * Features:
+ * - Simple text input for path entry
+ * - Helpful examples and common path patterns
+ * - Clean, focused interface for single property editing
+ *
+ * @example
+ * // In schema:
+ * const schema = {
+ *   type: 'object',
+ *   properties: {
+ *     key: {
+ *       type: 'string',
+ *       title: 'Key',
+ *       description: 'Extract value from event path'
+ *     }
+ *   }
+ * }
+ *
+ * @example
+ * // In uiSchema:
+ * const uiSchema = {
+ *   key: {
+ *     'ui:widget': 'mappingKey'
+ *   }
+ * }
+ */
+declare function MappingKeyWidget(props: WidgetProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * MappingKeyField - RJSF field wrapper for key property
+ *
+ * Bridges RJSF FieldProps to our custom MappingKeyWidget.
+ * Required because RJSF uses fields (not widgets) for custom field rendering.
+ *
+ * @example
+ * // Register in field registry:
+ * export const mappingFields: RegistryFieldsType = {
+ *   mappingKey: MappingKeyField,
+ * };
+ *
+ * @example
+ * // Use in uiSchema:
+ * const uiSchema = {
+ *   key: {
+ *     'ui:field': 'mappingKey'
+ *   }
+ * };
+ */
+declare function MappingKeyField(props: FieldProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Hint item definition
+ */
+interface HintItem {
+    code: string;
+    description: string;
+}
+/**
+ * PanelHints - Reusable hints component for panel views
+ *
+ * Displays a clean, modern hints box with code examples and descriptions.
+ * Used across all property panel views for consistency.
+ *
+ * Features:
+ * - Minimal design with subtle background
+ * - Code-first presentation
+ * - Clean typography
+ * - Theme-aware styling
+ *
+ * @example
+ * <PanelHints
+ *   title="Common patterns"
+ *   hints={[
+ *     { code: 'data.id', description: 'Product identifier' },
+ *     { code: 'user.email', description: 'User email address' }
+ *   ]}
+ * />
+ */
+interface PanelHintsProps {
+    title?: string;
+    hints: HintItem[];
+    className?: string;
+}
+declare function PanelHints({ title, hints, className, }: PanelHintsProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * MDXProvider - Makes components available in MDX files without explicit imports
+ *
+ * This provider wraps MDX content and injects React components for HTML elements.
+ * Components are automatically used when rendering markdown/MDX content.
+ *
+ * Key features:
+ * - No imports needed in MDX files
+ * - Consistent styling across all documentation
+ * - Theme-aware (respects data-theme attribute)
+ * - Automatic inline vs block code detection
+ *
+ * Available components (no import needed):
+ * - CodeBox: Monaco editor for code display (also auto-used for ```code blocks)
+ * - PropertyTable: Display schema-based property documentation
+ * - DestinationInitDemo: Interactive demo for destination initialization
+ * - DestinationDemo: Interactive demo for destination event processing
+ *
+ * @example
+ * // Wrap your app
+ * <MDXProvider>
+ *   <App />
+ * </MDXProvider>
+ *
+ * @example
+ * // Then in any .mdx file, no imports needed:
+ * # Documentation
+ *
+ * Inline `code` and markdown blocks:
+ * ```typescript
+ * const example = "Hello";
+ * ```
+ *
+ * Or use components directly:
+ * <CodeBox code="const x = 1;" language="javascript" />
+ * <PropertyTable schema={mySchema} />
+ */
+declare const MDXProvider: FC<PropsWithChildren>;
+
+interface MDXCodeProps {
+    className?: string;
+}
+/**
+ * MDXCode - Code component for MDX files
+ *
+ * Automatically detects and renders inline vs block code:
+ * - Inline code: `example` → <code className="elb-code-inline">
+ * - Block code: ```language\ncode\n``` → Uses CodeBox with Monaco editor
+ *
+ * Language detection:
+ * - Extracts language from className (e.g., "language-typescript")
+ * - Maps common MDX language names to Monaco language IDs
+ *
+ * Block code features (via CodeBox):
+ * - Full Monaco editor with syntax highlighting
+ * - Theme-aware (Palenight dark, VS Light)
+ * - Copy to clipboard button
+ * - Auto-height to fit content
+ * - Read-only mode
+ *
+ * @example
+ * // In MDX files (no import needed with MDXProvider):
+ * Inline `code` example
+ *
+ * ```typescript
+ * const block = "code";
+ * ```
+ */
+declare const MDXCode: FC<PropsWithChildren<MDXCodeProps>>;
+
+/**
+ * Utility function to merge class names with Tailwind CSS classes
+ * Uses clsx for conditional classes and tailwind-merge to handle conflicts
+ */
+declare function cn(...inputs: ClassValue[]): string;
+
+declare const palenightTheme: editor.IStandaloneThemeData;
+/**
+ * Register the palenight theme with Monaco Editor
+ * Call this function before creating any editor instances
+ */
+declare function registerPalenightTheme(monaco: typeof monaco_editor): void;
+
+declare const lighthouseTheme: editor.IStandaloneThemeData;
+/**
+ * Register the lighthouse theme with Monaco Editor
+ * Call this function before creating any editor instances
+ */
+declare function registerLighthouseTheme(monaco: typeof monaco_editor): void;
+
+/**
+ * TypeScript type definitions for walkerOS Explorer themes
+ *
+ * These types provide type-safe access to theme properties and enable
+ * programmatic theme customization.
+ */
+interface ExplorerTheme {
+    mode: 'light' | 'dark';
+    colors: {
+        text: string;
+        textLabel: string;
+        textButton: string;
+        textButtonHover: string;
+        textButtonActive: string;
+        textMuted: string;
+        textToggle: string;
+        textInput: string;
+        textPlaceholder: string;
+        bgBox: string;
+        bgHeader: string;
+        bgFooter: string;
+        bgButtonHover: string;
+        bgButtonActive: string;
+        bgButtonGroup: string;
+        bgInput: string;
+        bgInputHover: string;
+        bgCodeInline: string;
+        bgDropdown: string;
+        bgDropdownOptionHover: string;
+        bgDropdownOptionHighlighted: string;
+        borderBox: string;
+        borderHeader: string;
+        borderFooter: string;
+        borderButtonGroup: string;
+        borderInput: string;
+        borderInputFocus: string;
+        buttonPrimary: string;
+        buttonPrimaryHover: string;
+        buttonPrimaryText: string;
+        buttonDanger: string;
+        buttonDangerHover: string;
+        buttonDangerText: string;
+        statusEnabled: string;
+        statusDisabled: string;
+        statusWarning: string;
+        highlightPrimary: string;
+        highlightGlobals: string;
+        highlightContext: string;
+        highlightEntity: string;
+        highlightProperty: string;
+        highlightAction: string;
+        highlightBackground: string;
+        highlightText: string;
+        highlightHover: string;
+        highlightSeparator: string;
+    };
+    typography: {
+        fontFamily: string;
+        fontMono: string;
+        fontSize: {
+            base: string;
+            label: string;
+            toggle: string;
+            highlightButton: string;
+        };
+        fontWeight: {
+            normal: number;
+            semibold: number;
+        };
+        lineHeight: {
+            base: number;
+        };
+    };
+    spacing: {
+        header: string;
+        footer: string;
+        button: string;
+        buttonGroup: string;
+        gridGap: string;
+    };
+    radius: {
+        box: string;
+        button: string;
+        buttonGroup: string;
+        highlightButton: string;
+    };
+    shadows: {
+        buttonActive: string;
+        dropdown: string;
+    };
+    grid: {
+        minBoxWidth: string;
+        rowMinHeight: string;
+        rowMaxHeight: string;
+        boxMaxHeightMobile: string;
+    };
+    monaco: {
+        theme: string;
+        fontSize: string;
+        lineHeight: string;
+    };
+}
+
+/**
+ * Register all Monaco themes
+ * Convenience function for registering both themes at once
+ *
+ * @example
+ * ```typescript
+ * import { registerAllThemes } from '@walkeros/explorer';
+ * import * as monaco from 'monaco-editor';
+ *
+ * registerAllThemes(monaco);
+ * ```
+ */
+declare function registerAllThemes(monaco: typeof monaco_editor): void;
+
+/**
+ * Monaco Editor TypeScript Type Management
+ *
+ * This utility manages TypeScript type definitions in Monaco Editor for:
+ * 1. Static walkerOS core types (bundled at build time via Vite ?raw import)
+ * 2. Dynamic destination types (loaded on-the-fly when destinations are added)
+ * 3. Context-specific function signatures (condition, fn, validate)
+ *
+ * Architecture:
+ * - Uses monaco.languages.typescript.typescriptDefaults.addExtraLib()
+ * - Each type definition gets a unique file path (e.g., 'file:///destinations/gtag.d.ts')
+ * - Types can be added/removed dynamically without page reload
+ * - Core types are bundled for offline support and predictable versioning
+ */
+
+/**
+ * Load type definitions from a URL
+ *
+ * @param monaco - Monaco instance
+ * @param url - URL to .d.ts file
+ * @param uri - Optional custom URI (defaults to URL)
+ */
+declare function loadTypeLibraryFromURL(monaco: Monaco, url: string, uri?: string): Promise<boolean>;
+/**
+ * Options for loading package types dynamically
+ */
+interface LoadPackageTypesOptions {
+    /** Package name (e.g., '@walkeros/destination-gtag') */
+    package: string;
+    /** Version to load (e.g., '0.1.0', 'latest') */
+    version?: string;
+    /** CDN to use ('unpkg' or 'jsdelivr') */
+    cdn?: 'unpkg' | 'jsdelivr';
+    /** Path to .d.ts file within package (defaults to '/dist/index.d.ts') */
+    typesPath?: string;
+}
+interface LoadPackageTypesOptions {
+    package: string;
+    version?: string;
+}
+declare function loadPackageTypes(monaco: Monaco, options: LoadPackageTypesOptions): Promise<boolean>;
+/**
+ * Simple helper to register only walkerOS core types
+ *
+ * Use this for basic scenarios where you just need @walkeros/core types.
+ * For advanced usage (destinations, function contexts), use initializeMonacoTypes.
+ *
+ * @param monaco - Monaco editor instance
+ *
+ * @example
+ * ```typescript
+ * const handleBeforeMount = (monaco: Monaco) => {
+ *   registerWalkerOSTypes(monaco);
+ * };
+ * ```
+ */
+declare function registerWalkerOSTypes(monaco: Monaco): void;
+/**
+ * Initialize Monaco with walkerOS types (full setup)
+ *
+ * Call this once in CodeBox's beforeMount handler.
+ * Includes core types, TypeScript config, and default function context.
+ *
+ * @param monaco - Monaco editor instance
+ *
+ * @example
+ * ```typescript
+ * const handleBeforeMount = (monaco: Monaco) => {
+ *   initializeMonacoTypes(monaco);
+ * };
+ * ```
+ */
+declare function initializeMonacoTypes(monaco: Monaco): void;
+
+/**
+ * Formats captured function calls for display
+ *
+ * @param calls - Array of captured calls with path and args
+ * @param defaultMessage - Message to show when no calls captured
+ * @returns Formatted string of function calls
+ *
+ * @example
+ * formatCapturedCalls([
+ *   { path: ['window', 'gtag'], args: ['config', 'G-XXX'] }
+ * ])
+ * // Returns: "gtag('config', 'G-XXX');"
+ */
+declare function formatCapturedCalls(calls: Array<{
+    path: string[];
+    args: unknown[];
+}>, defaultMessage?: string): string;
+/**
+ * Creates a capture function for destination push method
+ * Uses walkerOS core mockEnv to intercept function calls
+ *
+ * @param destination - Destination instance with push method
+ * @param destinationEnv - Destination's exported env (usually examples.env.push)
+ * @returns Async function that executes push and returns formatted output
+ *
+ * @example
+ * import destinationGtag, { examples } from '@walkeros/web-destination-gtag';
+ * import { getEvent } from '@walkeros/core';
+ *
+ * const captureFn = captureDestinationPush(destinationGtag, examples.env.push);
+ *
+ * // Use in DestinationDemo
+ * <DestinationDemo
+ *   destination={destinationGtag}
+ *   event={getEvent('order complete')}
+ *   mapping={examples.mapping.purchase}
+ *   fn={captureFn}
+ * />
+ */
+declare function captureDestinationPush(destination: Destination.Instance, destinationEnv: unknown): (event: WalkerOS.Event, context: Destination.PushContext) => Promise<string>;
+/**
+ * Advanced: Creates a raw capture function that returns call data
+ * Use this when you need custom formatting or processing of calls
+ *
+ * @param destinationEnv - Destination's exported env
+ * @returns Function that returns both env and getCalls function
+ *
+ * @example
+ * const { env, getCalls } = createRawCapture(examples.env.push);
+ * await destination.init({ ...context, env });
+ * const calls = getCalls();
+ * // Process calls as needed
+ */
+declare function createRawCapture(destinationEnv: unknown): {
+    env: Record<string, unknown>;
+    getCalls: () => {
+        path: string[];
+        args: unknown[];
+    }[];
+};
+
+export { Box, type BoxProps, BrowserBox, type BrowserBoxProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, Code, CodeBox, type CodeBoxProps, 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, 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 };