@walkeros/explorer 3.3.1 → 3.4.0

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { Destination, WalkerOS, Mapping, Elb } from '@walkeros/core';
+import { Destination, WalkerOS, Elb } from '@walkeros/core';
 import React, { ReactNode, FC, PropsWithChildren, RefObject } from 'react';
 import * as monaco_editor from 'monaco-editor';
 import { editor } from 'monaco-editor';
@@ -8,88 +8,6 @@ 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;
-    include?: string[];
-    generic?: boolean;
-    initFirst?: 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, include, generic, initFirst, 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;
 }
@@ -157,8 +75,14 @@ interface LiveCodeProps {
     language?: string;
     format?: boolean;
     rowHeight?: 'auto' | 'equal' | 'synced' | number;
+    /** Language for the Result panel. Defaults to json (the typical output
+     * shape). Set to `javascript` when emptyText includes `//` comments. */
+    outputLanguage?: string;
+    /** Language for the Config panel. Defaults to `json`. Override when the
+     * Config panel content is not JSON. */
+    configLanguage?: string;
 }
-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;
+declare function LiveCode({ input: initInput, config: initConfig, output: initOutput, options, fn, fnName, labelInput, labelConfig, labelOutput, emptyText, disableInput, disableConfig, showQuotes, className, language, format, rowHeight, outputLanguage, configLanguage, }: LiveCodeProps): react_jsx_runtime.JSX.Element;
 
 interface CollectorBoxProps {
     event: string;
@@ -217,10 +141,12 @@ declare function BrowserBox({ html, css, js, onHtmlChange, onCssChange, onJsChan
 interface FlowItem {
     icon: ReactNode;
     label: string;
+    link?: string;
 }
 interface FlowSection {
     title: string;
     items: FlowItem[];
+    moreLink?: string;
 }
 interface FlowColumn {
     title: string;
@@ -635,6 +561,52 @@ declare function DropdownItem({ children, onClick, disabled, variant, className,
  */
 declare function DropdownDivider({ className }: DropdownDividerProps): react_jsx_runtime.JSX.Element;
 
+/**
+ * Tab with code content for CodeView
+ */
+interface CodeViewTab {
+    id: string;
+    label: string;
+    code: string;
+    language?: string;
+}
+interface CodeViewProps {
+    code?: string;
+    language?: string;
+    tabs?: CodeViewTab[];
+    activeTab?: string;
+    onTabChange?: (id: string) => void;
+    defaultTab?: string;
+    label?: string;
+    header?: string;
+    showHeader?: boolean;
+    showTrafficLights?: boolean;
+    showCopy?: boolean;
+    footer?: React.ReactNode;
+    height?: string | number;
+    className?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * CodeView - Read-only code rendered with the same visual chrome as CodeBox.
+ *
+ * Composes Box + CodeStatic. Use for non-interactive code blocks where Monaco
+ * would be overkill but you want visual parity with `<CodeBox disabled>`.
+ *
+ * @example
+ * <CodeView code={snippet} language="typescript" label="Setup" />
+ *
+ * @example
+ * <CodeView
+ *   tabs={[
+ *     { id: 'js', label: 'JavaScript', code: jsCode, language: 'javascript' },
+ *     { id: 'ts', label: 'TypeScript', code: tsCode, language: 'typescript' },
+ *   ]}
+ *   showTrafficLights
+ * />
+ */
+declare function CodeView({ code, language, tabs, activeTab: controlledActiveTab, onTabChange, defaultTab, label, header, showHeader, showTrafficLights, showCopy, footer, height, className, style, }: CodeViewProps): react_jsx_runtime.JSX.Element;
+
 interface PreviewProps {
     html: string;
     css?: string;
@@ -657,6 +629,15 @@ interface PreviewProps {
  */
 declare function Preview({ html, css, elb, label, }: PreviewProps): react_jsx_runtime.JSX.Element;
 
+interface CodeStaticProps {
+    code: string;
+    language?: string;
+    className?: string;
+    /** Force theme. If omitted, auto-detected from <html> data-theme / class. */
+    theme?: 'light' | 'dark';
+}
+declare function CodeStatic({ code, language, className, theme, }: CodeStaticProps): React.ReactElement;
+
 interface BoxTab {
     id: string;
     label: string;
@@ -832,6 +813,26 @@ interface SpinnerProps {
  */
 declare function Spinner({ size, className }: SpinnerProps): react_jsx_runtime.JSX.Element;
 
+/**
+ * Detect `@monaco-editor/loader`'s cancelation rejection.
+ *
+ * When a component using `<CodeBox>` unmounts before Monaco's loader promise
+ * settles (React strict-mode double-mount, route change, Fast Refresh),
+ * `@monaco-editor/loader`'s `makeCancelable` wrapper calls `.cancel()` and
+ * the wrapped promise rejects with `{type: 'cancelation', msg: 'operation
+ * is manually canceled'}`. The rejection lives inside `@monaco-editor/react`
+ * and is not catchable from userland, so consumers suppress it via a
+ * `window.addEventListener('unhandledrejection', ...)` filter (canonical
+ * workaround, see https://github.com/suren-atoyan/monaco-react/issues/440).
+ *
+ * webpack-dev-server's runtime overlay hooks rejections independently and
+ * wraps the reason in `new Error(reason, { cause: reason })`, so the same
+ * identity check must walk `.cause` too.
+ *
+ * This predicate handles both shapes (raw reason and wrapping Error).
+ */
+declare function isMonacoCancellation(value: unknown): boolean;
+
 /**
  * MDXProvider - Makes components available in MDX files without explicit imports
  *
@@ -847,8 +848,6 @@ declare function Spinner({ size, className }: SpinnerProps): react_jsx_runtime.J
  * 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
@@ -1103,14 +1102,6 @@ interface LoadPackageTypesOptions {
     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>;
 /**
@@ -1148,9 +1139,12 @@ declare function initializeMonacoTypes(monaco: Monaco): void;
 
 /**
  * Generate a unique model path for a Code instance.
+ * Extension matches the language so Monaco's TypeScript worker treats `.tsx`
+ * files as TSX, `.ts` files as TS, etc. Without this, all snippets live on
+ * `.json` paths and TypeScript diagnostics misbehave.
  * Used as the `path` prop for @monaco-editor/react Editor.
  */
-declare function generateModelPath(): string;
+declare function generateModelPath(language?: string): string;
 /**
  * Register a JSON schema for a specific model path.
  * Triggers a global setDiagnosticsOptions update.
@@ -1276,65 +1270,4 @@ declare function validateWalkerOSReferences(text: string, context: Partial<Intel
  */
 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 };
+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, CodeStatic, type CodeStaticProps, CodeView, type CodeViewProps, type CodeViewTab, CollectorBox, type CollectorBoxProps, 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, cn, createFbqDestination, createGtagDestination, createPlausibleDestination, disposeWalkerOSProviders, enrichFlowConfigSchema, enrichSchema, extractFlowIntelliSenseContext, findWalkerOSReferences, generateModelPath, getEnrichedContractSchema, getVariablesSchema, initializeMonacoTypes, isMonacoCancellation, lighthouseTheme, loadPackageTypes, loadTypeLibraryFromURL, palenightTheme, registerAllThemes, registerJsonSchema, registerLighthouseTheme, registerPalenightTheme, registerWalkerOSDecorationStyles, registerWalkerOSProviders, registerWalkerOSTypes, removeIntelliSenseContext, setIntelliSenseContext, unregisterJsonSchema, useDropdown, validateWalkerOSReferences };