@walkeros/explorer 3.0.0-next-1773236214827 → 3.0.0

package/dist/index.d.ts

@@ -1,69 +1,1338 @@
-export { DestinationDemo, createCaptureFn, } from './components/demos/DestinationDemo';
-export { DestinationInitDemo } from './components/demos/DestinationInitDemo';
-export { PromotionPlayground } from './components/demos/PromotionPlayground';
-export type { DestinationDemoProps } from './components/demos/DestinationDemo';
-export type { DestinationInitDemoProps } from './components/demos/DestinationInitDemo';
-export type { PromotionPlaygroundProps } from './components/demos/PromotionPlayground';
-export { DestinationDemo as DestinationPush } from './components/demos/DestinationDemo';
-export { DestinationInitDemo as DestinationInit } from './components/demos/DestinationInitDemo';
-export { LiveCode } from './components/organisms/live-code';
-export { CollectorBox } from './components/organisms/collector-box';
-export { BrowserBox } from './components/organisms/browser-box';
-export type { LiveCodeProps } from './components/organisms/live-code';
-export type { CollectorBoxProps } from './components/organisms/collector-box';
-export type { BrowserBoxProps } from './components/organisms/browser-box';
-export { ArchitectureFlow } from './components/molecules/architecture-flow';
-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 { Dropdown, DropdownItem, DropdownDivider, } from './components/molecules/dropdown';
-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 type { DropdownProps, DropdownItemProps, DropdownDividerProps, } from './components/molecules/dropdown';
-export { Preview } from './components/molecules/preview';
-export type { PreviewProps } from './components/molecules/preview';
-export { Code } from './components/atoms/code';
-export { Box } from './components/atoms/box';
-export { Grid } from './components/atoms/grid';
-export { Header } from './components/atoms/header';
-export { Footer } from './components/atoms/footer';
-export { Button } from './components/atoms/button';
-export { ButtonGroup } from './components/atoms/button-group';
-export { ButtonLink } from './components/atoms/button-link';
-export { Spinner } from './components/atoms/spinner';
-export { Icon } from './components/atoms/icons';
-export type { CodeProps } from './components/atoms/code';
-export type { BoxProps, BoxTab } from './components/atoms/box';
-export type { GridProps } from './components/atoms/grid';
-export type { HeaderProps } from './components/atoms/header';
-export type { FooterProps } from './components/atoms/footer';
-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 { SpinnerProps } from './components/atoms/spinner';
-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 { enrichSchema, type MonacoSchemaExtension, } from './utils/monaco-schema-enrichment';
-export { enrichFlowConfigSchema } from './utils/monaco-schema-flow-config';
-export { getEnrichedContractSchema } from './utils/monaco-schema-contract';
-export { getVariablesSchema } from './utils/monaco-schema-variables';
-export { findWalkerOSReferences, applyWalkerOSDecorations, registerWalkerOSDecorationStyles, REFERENCE_PATTERNS, } from './utils/monaco-walkeros-decorations';
-export type { IntelliSenseContext, PackageInfo } from './types/intellisense';
-export { registerWalkerOSProviders, disposeWalkerOSProviders, setIntelliSenseContext, removeIntelliSenseContext, } from './utils/monaco-walkeros-providers';
-export { validateWalkerOSReferences } from './utils/monaco-walkeros-markers';
-export { extractFlowIntelliSenseContext } from './utils/monaco-intellisense-flow-extractor';
-export { createGtagDestination, createFbqDestination, createPlausibleDestination, } from './helpers/destinations';
-export { captureDestinationPush, formatCapturedCalls, createRawCapture, } from './helpers/capture';
-//# sourceMappingURL=index.d.ts.map
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Destination, WalkerOS, Mapping, Elb } from '@walkeros/core';
+import React, { ReactNode, FC, PropsWithChildren, RefObject } from 'react';
+import * as monaco_editor from 'monaco-editor';
+import { editor } from 'monaco-editor';
+import { RJSFSchema } from '@rjsf/utils';
+export { Icon } from '@iconify/react';
+import { ClassValue } from 'clsx';
+import { Monaco } from '@monaco-editor/react';
+
+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
+ *
+ * Uses a single unified collector flow:
+ * - PromotionPlayground owns the collector with destinations
+ * - Preview initializes browser source using parent's elb
+ * - Events flow through one collector to all destinations
+ */
+declare function PromotionPlayground({ initialHtml, initialCss, initialJs, initialMapping, labelCode, labelPreview, labelEvents, labelMapping, labelResult, destination: destinationProp, }: 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;
+    language?: string;
+    format?: boolean;
+    rowHeight?: 'auto' | 'equal' | 'synced' | number;
+}
+declare function LiveCode({ input: initInput, config: initConfig, output: initOutput, options, fn, fnName, labelInput, labelConfig, labelOutput, emptyText, disableInput, disableConfig, showQuotes, className, language, format, rowHeight, }: 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;
+
+interface FlowItem {
+    icon: ReactNode;
+    label: string;
+}
+interface FlowSection {
+    title: string;
+    items: FlowItem[];
+}
+interface FlowColumn {
+    title: string;
+    sections: FlowSection[];
+}
+interface ArchitectureFlowProps {
+    sources: FlowColumn;
+    center: ReactNode;
+    centerTitle?: string;
+    destinations: FlowColumn;
+    arrowRight?: ReactNode;
+    arrowDown?: ReactNode;
+    className?: string;
+}
+declare function ArchitectureFlow({ sources, center, centerTitle, destinations, arrowRight, arrowDown, className, }: ArchitectureFlowProps): react_jsx_runtime.JSX.Element;
+
+interface PackageInfo {
+    package: string;
+    shortName: string;
+    type: 'source' | 'destination' | 'transformer';
+    platform: 'web' | 'server';
+    description?: string;
+}
+interface IntelliSenseContext {
+    /** Variable names and values from the flow's `variables` section */
+    variables?: Record<string, string | number | boolean>;
+    /** Definition names from the flow's `definitions` section */
+    definitions?: Record<string, unknown>;
+    /** Secret names available in the project (values are NOT included) */
+    secrets?: string[];
+    /** Step names from the current flow config, by type */
+    stepNames?: {
+        sources?: string[];
+        destinations?: string[];
+        transformers?: string[];
+    };
+    /** Contract entities and their actions */
+    contract?: Array<{
+        entity: string;
+        actions: string[];
+    }>;
+    /** Raw contract object for $contract completions and mapping hints */
+    contractRaw?: Record<string, unknown>;
+    /** Available packages for autocomplete */
+    packages?: PackageInfo[];
+    /** Current platform context (web or server) */
+    platform?: 'web' | 'server';
+}
+
+interface CodeProps {
+    code: string;
+    language?: string;
+    onChange?: (code: string) => void;
+    disabled?: boolean;
+    lineNumbers?: boolean;
+    minimap?: 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[];
+    sticky?: boolean;
+    ide?: boolean;
+    /** JSON Schema (Draft 7) for validation and IntelliSense in JSON mode */
+    jsonSchema?: Record<string, unknown>;
+    /** Context data for dynamic IntelliSense (variable names, secrets, etc.) */
+    intellisenseContext?: IntelliSenseContext;
+    /** Validation function — called on content change, results rendered as Monaco markers */
+    validate?: (code: string) => {
+        valid: boolean;
+        errors: Array<{
+            message: string;
+            severity: 'error' | 'warning';
+            line: number;
+            column: number;
+            endLine?: number;
+            endColumn?: number;
+        }>;
+        warnings: Array<{
+            message: string;
+            severity: 'error' | 'warning';
+            line: number;
+            column: number;
+            endLine?: number;
+            endColumn?: number;
+        }>;
+    };
+    /** Callback when Monaco marker counts change */
+    onMarkerCounts?: (info: {
+        errors: number;
+        warnings: number;
+        markers: Array<{
+            message: string;
+            severity: 'error' | 'warning';
+            line: number;
+            column: number;
+        }>;
+    }) => void;
+}
+/**
+ * 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, minimap, folding, wordWrap, className, beforeMount, onMount, autoHeight, fontSize, packages, sticky, ide, jsonSchema, intellisenseContext, validate, onMarkerCounts, }: CodeProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Tab with code content for CodeBox
+ */
+interface CodeBoxTab {
+    id: string;
+    label: string;
+    code: string;
+    language?: string;
+}
+interface CodeBoxProps extends Omit<CodeProps, 'code'> {
+    code?: string;
+    label?: string;
+    header?: string;
+    showHeader?: boolean;
+    tabs?: CodeBoxTab[];
+    activeTab?: string;
+    onTabChange?: (id: string) => void;
+    defaultTab?: string;
+    showTrafficLights?: boolean;
+    showCopy?: boolean;
+    showFormat?: boolean;
+    showSettings?: boolean;
+    /** Callback when validation issues change. Use to disable Save when errors > 0. */
+    onValidationIssues?: (counts: {
+        errors: number;
+        warnings: number;
+    }) => void;
+    footer?: React.ReactNode;
+    height?: string | number;
+    style?: React.CSSProperties;
+}
+/**
+ * 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, onChange, disabled, autoHeight, label, header, showHeader, tabs, activeTab: controlledActiveTab, onTabChange, defaultTab, showTrafficLights, showCopy, showFormat, showSettings, onValidationIssues, footer, height, style, className, ...codeProps }: CodeBoxProps): react_jsx_runtime.JSX.Element;
+
+type CodeSnippetProps = Omit<CodeBoxProps, 'label' | 'showHeader'> & {
+    format?: boolean;
+};
+/**
+ * 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)
+ * - Auto-format on mount (format=true) - formats code once on initial load
+ *
+ * Auto-Formatting:
+ * - Enabled by default (format=true)
+ * - Runs once on component mount using Monaco's built-in formatters
+ * - Supports: JavaScript, TypeScript, JSON, HTML, CSS
+ * - Use format={false} to disable for special cases (pre-formatted code)
+ *
+ * Reuses all CodeBox functionality:
+ * - Monaco Editor with syntax highlighting
+ * - Grid height management and auto-height modes
+ * - Copy button
+ * - Theme integration
+ *
+ * @example
+ * // Minimal usage - code auto-formats on load
+ * <CodeSnippet
+ *   code="import { elb } from '@walkeros/core';"
+ *   language="javascript"
+ * />
+ *
+ * @example
+ * // Disable auto-formatting for pre-formatted code
+ * <CodeSnippet
+ *   code={alreadyFormattedCode}
+ *   language="javascript"
+ *   format={false}
+ * />
+ *
+ * @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;
+
+type FlowMarkerPosition = 'source' | 'source-left' | 'source-right' | 'collector' | 'collector-left' | 'collector-right' | 'destination' | 'destination-left' | 'destination-right' | `source-${string}` | `source-${string}-left` | `source-${string}-right` | `destination-${string}` | `destination-${string}-left` | `destination-${string}-right` | `pre-${string}` | `pre-${string}-left` | `pre-${string}-right` | `post-${string}` | `post-${string}-left` | `post-${string}-right` | 'stage-before' | 'stage-before-right' | 'stage-after' | 'stage-after-left' | 'incoming' | 'outgoing' | 'source-collector' | 'collector-destination' | `source-${string}-pre` | `source-${string}-collector` | `pre-${string}-next` | 'pre-collector' | 'collector-post' | `post-${string}-next` | `post-destination-${string}` | 'before-source' | 'destination-after';
+interface FlowMarker {
+    position: FlowMarkerPosition;
+    /** ID displayed inside the marker dot. Default: array index + 1 */
+    id?: string;
+    /** Legend text. If provided, marker appears in legend below diagram */
+    text?: string;
+}
+interface FlowStageConfig {
+    /** Iconify icon name to display before the label (e.g., 'simple-icons:google-analytics') */
+    icon?: string;
+    label?: string;
+    text?: React.ReactNode;
+    description?: React.ReactNode;
+    highlight?: boolean;
+    /** Makes box clickable. undefined = default URL, false = not clickable, string = custom URL */
+    link?: false | string;
+}
+interface FlowSourceConfig extends FlowStageConfig {
+    /** Name of pre-transformer to connect to. Omit to connect directly to collector. */
+    next?: string;
+}
+interface FlowTransformerConfig extends FlowStageConfig {
+    /** Name of next transformer in chain. Omit to connect to collector (pre) or destination (post). */
+    next?: string;
+}
+interface FlowDestinationConfig extends FlowStageConfig {
+    /** Name of post-transformer to receive from. Omit to receive directly from collector. */
+    before?: string;
+    /** Optional: stage after this destination (e.g., external platform). Overrides shared stageAfter. */
+    after?: FlowStageConfig;
+}
+interface FlowLayoutConfig {
+    labelSize: number;
+    labelWeight: string;
+    textSize: number;
+    textWeight: string;
+    boxHeight: number;
+    descriptionSize: number;
+}
+interface FlowMapProps {
+    /** Optional: stage before source (e.g., "Browser") */
+    stageBefore?: FlowStageConfig;
+    /** Sources with named keys. Each source can specify `next` to connect to a pre-transformer. */
+    sources?: Record<string, FlowSourceConfig>;
+    /** Pre-transformers between sources and collector. Chain via `next` property. */
+    preTransformers?: Record<string, FlowTransformerConfig>;
+    /** Optional: customize collector stage */
+    collector?: FlowStageConfig;
+    /** Post-transformers between collector and destinations. */
+    postTransformers?: Record<string, FlowTransformerConfig>;
+    /** Destinations with named keys. Each destination can specify `before` to receive from a post-transformer. */
+    destinations?: Record<string, FlowDestinationConfig>;
+    /** Optional: stage after destination (e.g., "gtag") */
+    stageAfter?: FlowStageConfig;
+    /** Optional: title above diagram */
+    title?: string;
+    /** Optional: layout configuration */
+    layout?: FlowLayoutConfig;
+    /** Optional: height of stage boxes (default: 50) */
+    boxHeight?: number;
+    /** Optional: height of description area below boxes (default: 30) */
+    descriptionHeight?: number;
+    /** Optional: additional CSS class */
+    className?: string;
+    /** Optional: array of markers to display */
+    markers?: FlowMarker[];
+    /** Optional: show two arrows per connection (forward → and return ←) with parallel offset */
+    withReturn?: boolean;
+}
+declare function FlowMap({ stageBefore, sources, preTransformers, collector, postTransformers, destinations, stageAfter, title, layout, boxHeight: boxHeightProp, descriptionHeight: descriptionHeightProp, markers, className, withReturn, }: FlowMapProps): React.ReactElement;
+
+interface PropertyTableProps {
+    schema: RJSFSchema;
+    className?: string;
+}
+declare function PropertyTable({ schema, className }: PropertyTableProps): 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 PreviewProps {
+    html: string;
+    css?: string;
+    elb?: Elb.Fn;
+    label?: string;
+}
+/**
+ * Preview - HTML preview wrapped in a Box with highlight buttons
+ *
+ * Renders HTML in an isolated iframe with highlight buttons footer.
+ * When elb is provided, initializes walkerOS browser source in iframe
+ * that pushes events to the parent collector.
+ *
+ * @example
+ * // Read-only preview
+ * <Preview html={html} css={css} label="Preview" />
+ *
+ * // Interactive preview with event capture (elb from parent collector)
+ * <Preview html={html} css={css} elb={elb} label="Preview" />
+ */
+declare function Preview({ html, css, elb, label, }: PreviewProps): react_jsx_runtime.JSX.Element;
+
+interface BoxTab {
+    id: string;
+    label: string;
+    content?: React.ReactNode;
+}
+interface BoxProps {
+    header?: string;
+    headerActions?: React.ReactNode;
+    footer?: React.ReactNode;
+    children?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+    height?: number | string;
+    minHeight?: number | string;
+    maxHeight?: number | string;
+    tiny?: boolean;
+    resizable?: boolean;
+    showHeader?: boolean;
+    tabs?: BoxTab[];
+    activeTab?: string;
+    onTabChange?: (id: string) => void;
+    defaultTab?: string;
+    showTrafficLights?: boolean;
+}
+declare function Box({ header, headerActions, footer, children, className, style, height, minHeight, maxHeight, tiny, resizable, showHeader, tabs, activeTab: controlledActiveTab, onTabChange, defaultTab, showTrafficLights, }: 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;
+
+interface ButtonLinkProps {
+    variant?: 'default' | 'primary' | 'secondary';
+    size?: 'md' | 'lg';
+    href?: string;
+    onClick?: () => void;
+    children: React.ReactNode;
+    className?: string;
+    disabled?: boolean;
+}
+declare function ButtonLink({ variant, size, href, onClick, children, className, disabled, }: ButtonLinkProps): 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;
+
+/**
+ * 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;
+
+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
+ * 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;
+
+/**
+ * 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;
+
+interface MonacoSchemaExtension {
+    defaultSnippets?: Array<{
+        label: string;
+        description?: string;
+        markdownDescription?: string;
+        body?: unknown;
+        bodyText?: string;
+    }>;
+    markdownDescription?: string;
+    enumDescriptions?: string[];
+    markdownEnumDescriptions?: string[];
+    deprecationMessage?: string;
+    errorMessage?: string;
+    patternErrorMessage?: string;
+    doNotSuggest?: boolean;
+    suggestSortText?: string;
+}
+type EnrichmentMap = Record<string, MonacoSchemaExtension>;
+/**
+ * Deep-merges Monaco-specific JSON Schema extensions into a base schema.
+ * Keys in the enrichment map are dot-paths (e.g., 'properties.sources').
+ * Empty string '' targets the root. Does not mutate the original.
+ */
+declare function enrichSchema(baseSchema: Record<string, unknown>, enrichments: EnrichmentMap): Record<string, unknown>;
+
+type AnySchema$2 = Record<string, any>;
+/**
+ * Takes the base Flow.Config JSON Schema (from @walkeros/core z.toJSONSchema())
+ * and returns an enriched version with Monaco-specific extensions.
+ *
+ * The actual schema uses anyOf[0] at the top level.
+ */
+declare function enrichFlowConfigSchema(baseSchema: AnySchema$2): AnySchema$2;
+
+type AnySchema$1 = Record<string, any>;
+/**
+ * Returns an enriched JSON Schema for the walkerOS Contract editor.
+ * Structure: { $tagging: number, entity: { action: JSONSchema } }
+ */
+declare function getEnrichedContractSchema(): AnySchema$1;
+
+type AnySchema = Record<string, any>;
+declare function getVariablesSchema(): AnySchema;
+
+type ReferenceType = 'variable' | 'definition' | 'secret' | 'env' | 'code';
+interface WalkerOSReference {
+    type: ReferenceType;
+    name: string;
+    startIndex: number;
+    endIndex: number;
+}
+declare const REFERENCE_PATTERNS: Array<{
+    type: ReferenceType;
+    regex: RegExp;
+    className: string;
+}>;
+/**
+ * Find all walkerOS reference patterns in text.
+ * Used for both decorations and validation.
+ */
+declare function findWalkerOSReferences(text: string): WalkerOSReference[];
+/**
+ * Apply walkerOS reference decorations to a Monaco editor.
+ * Returns a cleanup function.
+ */
+declare function applyWalkerOSDecorations(editorInstance: editor.IStandaloneCodeEditor): () => void;
+/**
+ * Register CSS styles for walkerOS reference decorations.
+ * Call once on app init.
+ */
+declare function registerWalkerOSDecorationStyles(): void;
+
+/**
+ * Update the IntelliSense context for a specific editor model.
+ */
+declare function setIntelliSenseContext(modelPath: string, context: IntelliSenseContext): void;
+/**
+ * Remove context when editor unmounts.
+ */
+declare function removeIntelliSenseContext(modelPath: string): void;
+/**
+ * Register the walkerOS CompletionItemProvider and HoverProvider for JSON.
+ * Call once on app initialization. Safe to call multiple times (idempotent).
+ */
+declare function registerWalkerOSProviders(monaco: typeof monaco_editor): void;
+/**
+ * Dispose all registered providers. Call on app teardown.
+ */
+declare function disposeWalkerOSProviders(): void;
+
+interface ValidationIssue {
+    message: string;
+    severity: 'error' | 'warning' | 'info';
+    startIndex: number;
+    endIndex: number;
+}
+/**
+ * Validate walkerOS references in JSON text against the current context.
+ * Returns issues for dangling references and invalid cross-references.
+ */
+declare function validateWalkerOSReferences(text: string, context: Partial<IntelliSenseContext>): ValidationIssue[];
+
+/**
+ * Extract IntelliSense context from a Flow.Config JSON string.
+ *
+ * Parses the JSON, walks config → settings → steps, and collects
+ * all discoverable variables, definitions, step names, packages,
+ * platform, and contract entities.
+ *
+ * Returns `{}` for invalid JSON or non-Flow structures.
+ * Pure function — no side effects, no state.
+ */
+declare function extractFlowIntelliSenseContext(json: string): Partial<IntelliSenseContext>;
+
+/**
+ * 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 { 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, DestinationDemo, type DestinationDemoProps, DestinationInitDemo as DestinationInit, DestinationInitDemo, type DestinationInitDemoProps, DestinationDemo as DestinationPush, Dropdown, DropdownDivider, type DropdownDividerProps, DropdownItem, type DropdownItemProps, type DropdownProps, type ExplorerTheme, type FlowColumn, type FlowItem, FlowMap, type FlowMapProps, type FlowSection, type FlowStageConfig, Footer, type FooterProps, Grid, type GridProps, Header, type HeaderProps, type IntelliSenseContext, LiveCode, type LiveCodeProps, type LoadPackageTypesOptions, MDXCode, MDXProvider, type MonacoSchemaExtension, type PackageInfo, Preview, type PreviewProps, PromotionPlayground, type PromotionPlaygroundProps, PropertyTable, type PropertyTableProps, REFERENCE_PATTERNS, Spinner, type SpinnerProps, type UseDropdownReturn, applyWalkerOSDecorations, captureDestinationPush, cn, createCaptureFn, createFbqDestination, createGtagDestination, createPlausibleDestination, createRawCapture, disposeWalkerOSProviders, enrichFlowConfigSchema, enrichSchema, extractFlowIntelliSenseContext, findWalkerOSReferences, formatCapturedCalls, generateModelPath, getEnrichedContractSchema, getVariablesSchema, initializeMonacoTypes, lighthouseTheme, loadPackageTypes, loadTypeLibraryFromURL, palenightTheme, registerAllThemes, registerJsonSchema, registerLighthouseTheme, registerPalenightTheme, registerWalkerOSDecorationStyles, registerWalkerOSProviders, registerWalkerOSTypes, removeIntelliSenseContext, setIntelliSenseContext, unregisterJsonSchema, useDropdown, validateWalkerOSReferences };