@walkeros/explorer 0.5.0 → 1.0.1

package/dist/hooks/useMonacoHeight.js

@@ -0,0 +1,83 @@
+import { useState, useRef, useCallback } from 'react';
+/**
+ * Hook to automatically calculate Monaco Editor height based on content
+ *
+ * @param enabled - Whether to enable auto-height calculation
+ * @param minHeight - Minimum height in pixels (default: 100)
+ * @param maxHeight - Maximum height in pixels (default: 800)
+ * @param defaultHeight - Default height when not auto-sizing (default: 400)
+ *
+ * @returns [height, setEditor] - Current height and function to register editor instance
+ *
+ * @example
+ * const [height, setEditor] = useMonacoHeight({ enabled: autoHeight });
+ *
+ * <Editor
+ *   height={height}
+ *   onMount={(editor) => setEditor(editor)}
+ * />
+ */
+export function useMonacoHeight({ enabled = false, minHeight = 100, maxHeight = 800, defaultHeight = 400, onHeightChange, } = {}) {
+    const [height, setHeight] = useState(enabled ? minHeight : defaultHeight);
+    const editorRef = useRef(null);
+    const previousHeightRef = useRef(enabled ? minHeight : defaultHeight);
+    const updateTimeoutRef = useRef(null);
+    const updateHeight = useCallback(() => {
+        if (!enabled || !editorRef.current)
+            return;
+        try {
+            const monacoContentHeight = editorRef.current.getContentHeight();
+            const boundedMonacoHeight = Math.max(minHeight, Math.min(maxHeight, monacoContentHeight));
+            if (boundedMonacoHeight === previousHeightRef.current) {
+                return;
+            }
+            previousHeightRef.current = boundedMonacoHeight;
+            setHeight(boundedMonacoHeight);
+            if (onHeightChange) {
+                const HEADER_HEIGHT = 36;
+                const BORDER = 2;
+                const totalBoxHeight = boundedMonacoHeight + HEADER_HEIGHT + BORDER;
+                onHeightChange(totalBoxHeight);
+            }
+            // Note: We don't call editor.layout() here because Monaco's
+            // automaticLayout option handles layout updates automatically.
+            // Calling layout() here would create a feedback loop with
+            // onDidContentSizeChange, causing height to grow indefinitely.
+        }
+        catch (error) {
+            // Silently fail - editor might not be fully initialized
+        }
+    }, [enabled, minHeight, maxHeight, onHeightChange]);
+    const setEditor = useCallback((editor) => {
+        // Clean up previous timeout if it exists
+        if (updateTimeoutRef.current) {
+            clearTimeout(updateTimeoutRef.current);
+            updateTimeoutRef.current = null;
+        }
+        editorRef.current = editor;
+        if (!enabled || !editor) {
+            setHeight(defaultHeight);
+            previousHeightRef.current = defaultHeight;
+            return;
+        }
+        // Trigger initial height calculation
+        setTimeout(() => updateHeight(), 50);
+        // Listen for content changes with debouncing
+        const disposable = editor.onDidContentSizeChange(() => {
+            // Clear any pending update
+            if (updateTimeoutRef.current) {
+                clearTimeout(updateTimeoutRef.current);
+            }
+            // Debounce updates to prevent rapid-fire recalculations
+            updateTimeoutRef.current = setTimeout(() => {
+                updateHeight();
+                updateTimeoutRef.current = null;
+            }, 150);
+        });
+        // Store disposable for cleanup
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        editor.__heightDisposable = disposable;
+    }, [enabled, defaultHeight, updateHeight]);
+    return [height, setEditor];
+}
+//# sourceMappingURL=useMonacoHeight.js.map

package/dist/hooks/useMonacoHeight.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMonacoHeight.js","sourceRoot":"","sources":["../../src/hooks/useMonacoHeight.ts"],"names":[],"mappings":"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"}

package/dist/hooks/useTreeState.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Tree expand/collapse state management
+ *
+ * Manages which paths in a tree view are expanded or collapsed.
+ * This hook is UI-agnostic and can be used with any tree structure.
+ *
+ * @example
+ * const treeState = useTreeState(['']); // Root expanded by default
+ *
+ * // Check if expanded
+ * if (treeState.isExpanded(['product', 'view'])) { ... }
+ *
+ * // Toggle expansion
+ * treeState.togglePath(['product', 'view']);
+ *
+ * // Expand specific path
+ * treeState.expandPath(['product', 'view', 'data']);
+ *
+ * // Collapse specific path
+ * treeState.collapsePath(['product']);
+ */
+export declare function useTreeState(initialExpanded?: string[][]): {
+    expandedPaths: Set<string>;
+    isExpanded: (path: string[]) => boolean;
+    togglePath: (path: string[]) => void;
+    expandPath: (path: string[]) => void;
+    collapsePath: (path: string[]) => void;
+    expandAll: (allPaths: string[][]) => void;
+    collapseAll: () => void;
+};
+export type TreeState = ReturnType<typeof useTreeState>;
+//# sourceMappingURL=useTreeState.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useTreeState.d.ts","sourceRoot":"","sources":["../../src/hooks/useTreeState.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,YAAY,CAAC,eAAe,GAAE,MAAM,EAAE,EAAS;;uBASpD,MAAM,EAAE,KAAG,OAAO;uBAUW,MAAM,EAAE;uBAgBR,MAAM,EAAE;yBAYN,MAAM,EAAE;0BAYP,MAAM,EAAE,EAAE;;EAoBpD;AAED,MAAM,MAAM,SAAS,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC"}

package/dist/hooks/useTreeState.js

@@ -0,0 +1,94 @@
+import { useState, useCallback } from 'react';
+/**
+ * Tree expand/collapse state management
+ *
+ * Manages which paths in a tree view are expanded or collapsed.
+ * This hook is UI-agnostic and can be used with any tree structure.
+ *
+ * @example
+ * const treeState = useTreeState(['']); // Root expanded by default
+ *
+ * // Check if expanded
+ * if (treeState.isExpanded(['product', 'view'])) { ... }
+ *
+ * // Toggle expansion
+ * treeState.togglePath(['product', 'view']);
+ *
+ * // Expand specific path
+ * treeState.expandPath(['product', 'view', 'data']);
+ *
+ * // Collapse specific path
+ * treeState.collapsePath(['product']);
+ */
+export function useTreeState(initialExpanded = [[]]) {
+    const [expandedPaths, setExpandedPaths] = useState(() => {
+        return new Set(initialExpanded.map((path) => path.join('.')));
+    });
+    /**
+     * Check if a path is expanded
+     */
+    const isExpanded = useCallback((path) => {
+        const pathKey = path.join('.');
+        return expandedPaths.has(pathKey);
+    }, [expandedPaths]);
+    /**
+     * Toggle path expansion
+     */
+    const togglePath = useCallback((path) => {
+        const pathKey = path.join('.');
+        setExpandedPaths((prev) => {
+            const next = new Set(prev);
+            if (next.has(pathKey)) {
+                next.delete(pathKey);
+            }
+            else {
+                next.add(pathKey);
+            }
+            return next;
+        });
+    }, []);
+    /**
+     * Expand specific path
+     */
+    const expandPath = useCallback((path) => {
+        const pathKey = path.join('.');
+        setExpandedPaths((prev) => {
+            const next = new Set(prev);
+            next.add(pathKey);
+            return next;
+        });
+    }, []);
+    /**
+     * Collapse specific path
+     */
+    const collapsePath = useCallback((path) => {
+        const pathKey = path.join('.');
+        setExpandedPaths((prev) => {
+            const next = new Set(prev);
+            next.delete(pathKey);
+            return next;
+        });
+    }, []);
+    /**
+     * Expand all paths
+     */
+    const expandAll = useCallback((allPaths) => {
+        setExpandedPaths(new Set(allPaths.map((path) => path.join('.'))));
+    }, []);
+    /**
+     * Collapse all paths
+     */
+    const collapseAll = useCallback(() => {
+        setExpandedPaths(new Set());
+    }, []);
+    return {
+        expandedPaths,
+        isExpanded,
+        togglePath,
+        expandPath,
+        collapsePath,
+        expandAll,
+        collapseAll,
+    };
+}
+//# sourceMappingURL=useTreeState.js.map

package/dist/hooks/useTreeState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTreeState.js","sourceRoot":"","sources":["../../src/hooks/useTreeState.ts"],"names":[],"mappings":"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"}

package/dist/index.d.cts

@@ -1,9 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { Destination, WalkerOS, Mapping } from '@walkeros/core';
+import { Destination, WalkerOS, Mapping, Elb } from '@walkeros/core';
 import { RJSFSchema, UiSchema, WidgetProps, FieldProps } from '@rjsf/utils';
+import React, { ReactNode, FC, PropsWithChildren } from 'react';
 import * as monaco_editor from 'monaco-editor';
 import { editor } from 'monaco-editor';
-import React, { FC, PropsWithChildren } from 'react';
+export { Icon } from '@iconify/react';
 import { ClassValue } from 'clsx';
 import { Monaco } from '@monaco-editor/react';
 
@@ -203,8 +204,13 @@ interface PromotionPlaygroundProps {
  * 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, }: PromotionPlaygroundProps): react_jsx_runtime.JSX.Element;
+declare function PromotionPlayground({ initialHtml, initialCss, initialJs, initialMapping, labelCode, labelPreview, labelEvents, labelMapping, labelResult, destination: destinationProp, }: PromotionPlaygroundProps): react_jsx_runtime.JSX.Element;
 
 interface LiveCodeProps {
     input: unknown;
@@ -221,8 +227,11 @@ interface LiveCodeProps {
     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, }: LiveCodeProps): react_jsx_runtime.JSX.Element;
+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;
@@ -427,6 +436,29 @@ interface ConfigEditorBoxProps<T extends Record<string, unknown>> {
  */
 declare function ConfigEditor<T extends Record<string, unknown>>(props: ConfigEditorBoxProps<T>): 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 CodeProps {
     code: string;
     language?: string;
@@ -444,6 +476,8 @@ interface CodeProps {
     };
     fontSize?: number;
     packages?: string[];
+    sticky?: boolean;
+    ide?: boolean;
 }
 /**
  * Code - Pure Monaco editor atom
@@ -477,14 +511,32 @@ interface CodeProps {
  *   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;
+declare function Code({ code, language, onChange, disabled, lineNumbers, folding, wordWrap, className, beforeMount, onMount, autoHeight, fontSize, packages, sticky, ide, }: CodeProps): react_jsx_runtime.JSX.Element;
 
-interface CodeBoxProps extends CodeProps {
+/**
+ * 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;
-    showHeader?: boolean;
+    footer?: React.ReactNode;
     height?: string | number;
+    style?: React.CSSProperties;
 }
 /**
  * CodeBox - Monaco editor wrapped in a Box with header and actions
@@ -526,7 +578,7 @@ interface CodeBoxProps extends CodeProps {
  *   showFormat
  * />
  */
-declare function CodeBox({ code, language, label, onChange, disabled, showCopy, showFormat, showHeader, height, className, autoHeight, ...codeProps }: CodeBoxProps): react_jsx_runtime.JSX.Element;
+declare function CodeBox({ code, language, onChange, disabled, autoHeight, label, header, showHeader, tabs, activeTab: controlledActiveTab, onTabChange, defaultTab, showTrafficLights, showCopy, showFormat, footer, height, style, className, ...codeProps }: CodeBoxProps): react_jsx_runtime.JSX.Element;
 
 type CodeSnippetProps = Omit<CodeBoxProps, 'label' | 'showHeader'> & {
     format?: boolean;
@@ -585,6 +637,78 @@ type CodeSnippetProps = Omit<CodeBoxProps, 'label' | 'showHeader'> & {
  */
 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;
@@ -653,60 +777,50 @@ declare const MAPPING_RULE_STRUCTURE: ConfigStructureDef;
 interface PreviewProps {
     html: string;
     css?: string;
-    onEvent?: (event: WalkerOS.Event) => void;
+    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 onEvent is provided, initializes walkerOS browser source in iframe.
+ * 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
- * <Preview html={html} css={css} onEvent={(event) => console.log(event)} 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, onEvent, label, }: PreviewProps): react_jsx_runtime.JSX.Element;
+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;
+    header?: string;
     headerActions?: React.ReactNode;
     footer?: React.ReactNode;
-    children: 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;
 }
-/**
- * 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;
+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;
@@ -1273,4 +1387,4 @@ declare function createRawCapture(destinationEnv: unknown): {
     }[];
 };
 
-export { Box, type BoxProps, BrowserBox, type BrowserBoxProps, Button, ButtonGroup, type ButtonGroupProps, ButtonLink, type ButtonLinkProps, 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 };
+export { ArchitectureFlow, type ArchitectureFlowProps, Box, type BoxProps, type BoxTab, BrowserBox, type BrowserBoxProps, Button, ButtonGroup, type ButtonGroupProps, ButtonLink, type ButtonLinkProps, type ButtonProps, Code, CodeBox, type CodeBoxProps, type CodeBoxTab, type CodeProps, CodeSnippet, type CodeSnippetProps, CollectorBox, type CollectorBoxProps, ConfigEditor, type ConfigEditorBoxProps, DESTINATION_CONFIG_STRUCTURE, DestinationDemo, type DestinationDemoProps, DestinationInitDemo as DestinationInit, DestinationInitDemo, type DestinationInitDemoProps, DestinationDemo as DestinationPush, type DestinationSchemas, type ExplorerTheme, type FlowColumn, type FlowItem, FlowMap, type FlowMapProps, type FlowSection, type FlowStageConfig, Footer, type FooterProps, Grid, type GridProps, Header, type HeaderProps, type HintItem, LiveCode, type LiveCodeProps, type LoadPackageTypesOptions, MAPPING_RULE_STRUCTURE, MDXCode, MDXProvider, MappingCode, type MappingCodeProps, MappingDemo, type MappingDemoProps, MappingKeyField, MappingKeyWidget, PanelHints, type PanelHintsProps, Preview, type PreviewProps, PromotionPlayground, type PromotionPlaygroundProps, PropertyTable, type PropertyTableProps, captureDestinationPush, cn, createCaptureFn, createFbqDestination, createGtagDestination, createPlausibleDestination, createRawCapture, formatCapturedCalls, initializeMonacoTypes, lighthouseTheme, loadPackageTypes, loadTypeLibraryFromURL, palenightTheme, registerAllThemes, registerLighthouseTheme, registerPalenightTheme, registerWalkerOSTypes };