@walkeros/explorer 4.7.2 → 4.8.0-next-1791441510508

package/dist/index.d.ts

@@ -1,33 +1,17 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { Destination, WalkerOS, Flow, Elb } from '@walkeros/core';
-import React, { ReactNode, FC, PropsWithChildren, RefObject } from 'react';
+import React, { ReactNode } from 'react';
 import * as monaco_editor from 'monaco-editor';
 import { editor } from 'monaco-editor';
 import { RJSFSchema } from '@rjsf/utils';
 import { Monaco } from '@monaco-editor/react';
 export { Monaco } from '@monaco-editor/react';
 export { Icon } from '@iconify/react';
-import { ClassValue } from 'clsx';
 
 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;
@@ -85,29 +69,6 @@ interface LiveCodeProps {
 }
 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;
-    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;
@@ -542,73 +503,6 @@ interface StepExampleProps {
  */
 declare function StepExample({ example, className }: StepExampleProps): 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;
-
 /**
  * Tab with code content for CodeView
  */
@@ -655,11 +549,6 @@ interface CodeViewProps {
  */
 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;
 
-/**
- * Minimal "product add" example shown when a browser-source step provides no
- * HTML of its own. Demonstrates an entity with a click:add action.
- */
-declare const DEFAULT_FALLBACK_HTML = "<div data-elb=\"product\" data-elbaction=\"click:add\"><button data-elb-product=\"name:Example;price:9.99\">Add to cart</button></div>";
 interface PreviewProps {
     html?: string;
     css?: string;
@@ -730,7 +619,8 @@ interface CodeDiffProps {
 /**
  * CodeDiff — read-only Monaco DiffEditor atom.
  *
- * Generic: diffs any Monaco-supported language. Theme follows [data-theme].
+ * Generic: diffs any Monaco-supported language. A dark island in both page
+ * themes, like every code surface.
  * Use <CodeDiffBox> for the full chrome (header, summary, toggle, copy).
  */
 declare function CodeDiff({ original, modified, language, height, renderSideBySide, onSummaryChange, beforeMount, onMount, className, }: CodeDiffProps): react_jsx_runtime.JSX.Element;
@@ -742,6 +632,8 @@ interface CodeStaticProps {
 }
 declare function CodeStatic({ code, language, className, }: CodeStaticProps): React.ReactElement;
 
+type Theme = 'dark' | 'light';
+
 interface BoxTab {
     id: string;
     label: string;
@@ -765,8 +657,10 @@ interface BoxProps {
     onTabChange?: (id: string) => void;
     defaultTab?: string;
     showTrafficLights?: boolean;
+    /** Pins the box to one theme, whatever the page theme (a dark island). */
+    theme?: Theme;
 }
-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;
+declare function Box({ header, headerActions, footer, children, className, style, height, minHeight, maxHeight, tiny, resizable, showHeader, tabs, activeTab: controlledActiveTab, onTabChange, defaultTab, showTrafficLights, theme, }: BoxProps): react_jsx_runtime.JSX.Element;
 
 interface GridProps {
     children: React.ReactNode;
@@ -843,26 +737,6 @@ interface HeaderProps {
 }
 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;
@@ -900,34 +774,6 @@ interface ButtonGroupProps {
  */
 declare function ButtonGroup({ buttons, onButtonClick, className, variant, }: 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;
-
 /**
  * Detect `@monaco-editor/loader`'s cancelation rejection.
  *
@@ -995,242 +841,33 @@ declare function allowedRefKinds(nodeType: IntelliSenseContext['nodeType'], subP
 declare function getJsonPathAtOffset(json: string, offset: number): string[];
 
 /**
- * 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
- *
- * @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
+ * The one code theme of walkerOS Explorer
  *
- * 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>
- * );
+ * Code surfaces are dark in both page themes, so Monaco (CodeBox) and Shiki
+ * (CodeView) share one theme, built from the design constants.
  */
-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;
+/** Monaco `defineTheme` key and Shiki theme name of the code theme. */
+declare const ELB_THEME_DARK = "elbTheme-dark";
+/** The part of the Monaco API that registering a theme needs. */
+interface MonacoThemeRegistry {
+    editor: {
+        defineTheme(themeName: string, themeData: editor.IStandaloneThemeData): void;
     };
 }
-
 /**
- * Register all Monaco themes
- * Convenience function for registering both themes at once
+ * Register the code theme with Monaco. Call it before the first editor
+ * mounts; Code and CodeDiff do so in their `beforeMount`.
  *
  * @example
  * ```typescript
- * import { registerAllThemes } from '@walkeros/explorer';
- * import * as monaco from 'monaco-editor';
+ * import { registerTheme, ELB_THEME_DARK } from '@walkeros/explorer';
  *
- * registerAllThemes(monaco);
+ * registerTheme(monaco);
+ * monaco.editor.setTheme(ELB_THEME_DARK);
  * ```
  */
-declare function registerAllThemes(monaco: typeof monaco_editor): void;
+declare function registerTheme(monaco: MonacoThemeRegistry): void;
 
 /**
  * Monaco Editor TypeScript Type Management
@@ -1435,4 +1072,4 @@ declare function validateWalkerOSReferences(text: string, context: Partial<Intel
  */
 declare function extractFlowIntelliSenseContext(json: string): Partial<IntelliSenseContext>;
 
-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, CodeDiff, CodeDiffBox, type CodeDiffBoxProps, type CodeDiffProps, type CodeDiffSummary, type CodeProps, CodeSnippet, type CodeSnippetProps, CodeStatic, type CodeStaticProps, CodeView, type CodeViewProps, type CodeViewTab, CollectorBox, type CollectorBoxProps, type CompletionEntry, DEFAULT_FALLBACK_HTML, 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, type RefKind, Spinner, type SpinnerProps, StepExample, type StepExampleProps, type UseDropdownReturn, allowedRefKinds, applyWalkerOSDecorations, cn, createFbqDestination, createGtagDestination, createPlausibleDestination, disposeWalkerOSProviders, enrichFlowConfigSchema, enrichSchema, extractFlowIntelliSenseContext, findWalkerOSReferences, generateModelPath, getContractCompletions, getEnrichedContractSchema, getEnvCompletions, getFlowCompletions, getJsonPathAtOffset, getMappingPathCompletions, getSecretCompletions, getStoreCompletions, getVariableCompletions, getVariablesSchema, initializeMonacoTypes, isMonacoCancellation, lighthouseTheme, loadPackageTypes, loadTypeLibraryFromURL, palenightTheme, registerAllThemes, registerJsonSchema, registerLighthouseTheme, registerPalenightTheme, registerWalkerOSDecorationStyles, registerWalkerOSProviders, registerWalkerOSTypes, removeIntelliSenseContext, resolveTypesUrl, setIntelliSenseContext, setPackageTypesBaseUrl, unregisterJsonSchema, useDropdown, validateWalkerOSReferences };
+export { ArchitectureFlow, type ArchitectureFlowProps, Box, type BoxProps, type BoxTab, BrowserBox, type BrowserBoxProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, Code, CodeBox, type CodeBoxProps, type CodeBoxTab, CodeDiff, CodeDiffBox, type CodeDiffBoxProps, type CodeDiffProps, type CodeDiffSummary, type CodeProps, CodeSnippet, type CodeSnippetProps, CodeStatic, type CodeStaticProps, CodeView, type CodeViewProps, type CodeViewTab, type CompletionEntry, ELB_THEME_DARK, type FlowColumn, type FlowItem, FlowMap, type FlowMapProps, type FlowSection, type FlowStageConfig, Grid, type GridProps, Header, type HeaderProps, type IntelliSenseContext, LiveCode, type LiveCodeProps, type LoadPackageTypesOptions, type MonacoSchemaExtension, type PackageInfo, Preview, type PreviewProps, PromotionPlayground, type PromotionPlaygroundProps, PropertyTable, type PropertyTableProps, REFERENCE_PATTERNS, type RefKind, StepExample, type StepExampleProps, allowedRefKinds, applyWalkerOSDecorations, disposeWalkerOSProviders, enrichFlowConfigSchema, enrichSchema, extractFlowIntelliSenseContext, findWalkerOSReferences, generateModelPath, getContractCompletions, getEnrichedContractSchema, getEnvCompletions, getFlowCompletions, getJsonPathAtOffset, getMappingPathCompletions, getSecretCompletions, getStoreCompletions, getVariableCompletions, getVariablesSchema, initializeMonacoTypes, isMonacoCancellation, loadPackageTypes, loadTypeLibraryFromURL, registerJsonSchema, registerTheme, registerWalkerOSDecorationStyles, registerWalkerOSProviders, registerWalkerOSTypes, removeIntelliSenseContext, resolveTypesUrl, setIntelliSenseContext, setPackageTypesBaseUrl, unregisterJsonSchema, validateWalkerOSReferences };