@walkeros/explorer 4.7.2 → 4.8.0-next-1791496487198

package/dist/index.d.ts

@@ -1,40 +1,24 @@
 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 { Destination, WalkerOS, Flow, Collector } from '@walkeros/core';
+import React, { ReactNode, AriaAttributes, ReactElement, ButtonHTMLAttributes } from 'react';
 import * as monaco_editor from 'monaco-editor';
 import { editor } from 'monaco-editor';
 import { RJSFSchema } from '@rjsf/utils';
+import { SourceBrowser } from '@walkeros/web-source-browser';
 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;
     initialCss?: string;
     initialJs?: string;
     initialMapping?: string;
-    labelCode?: string;
     labelPreview?: string;
     labelEvents?: string;
     labelMapping?: string;
@@ -44,19 +28,33 @@ interface PromotionPlaygroundProps {
 /**
  * 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
+ * Shows the complete chain, one box each:
+ * 1. Preview - the live page, with HTML/CSS/JS tabs to edit it; captures real events
+ * 2. Events - the events the preview sent
+ * 3. Mapping - editable rules for the destination
+ * 4. Result - the destination call each event becomes
+ *
+ * One collector runs the flow: Preview binds a browser source to it, and its
+ * destinations fill the Events and Result boxes. Whatever fails says so in
+ * the box it concerns.
  */
-declare function PromotionPlayground({ initialHtml, initialCss, initialJs, initialMapping, labelCode, labelPreview, labelEvents, labelMapping, labelResult, destination: destinationProp, }: PromotionPlaygroundProps): react_jsx_runtime.JSX.Element;
+declare function PromotionPlayground({ initialHtml, initialCss, initialJs, initialMapping, labelPreview, labelEvents, labelMapping, labelResult, destination: destinationProp, }: PromotionPlaygroundProps): react_jsx_runtime.JSX.Element;
+
+interface PlaygroundProps {
+    eyebrow?: ReactNode;
+    title?: ReactNode;
+    lead?: ReactNode;
+}
+/**
+ * The walkerOS playground: a tagged component, the event it sends, the
+ * mapping and the vendor call it becomes, live.
+ *
+ * One real flow runs the chain. `startFlow` starts a collector with the
+ * browser source scoped to the preview's shadow root and the gtag destination
+ * with the editor's mapping. The destination's `window` is a stub that hands
+ * each gtag call to the Result panel instead of sending it to GA4.
+ */
+declare function Playground({ eyebrow, title, lead, }: PlaygroundProps): react_jsx_runtime.JSX.Element;
 
 interface LiveCodeProps {
     input: unknown;
@@ -68,6 +66,7 @@ interface LiveCodeProps {
     labelInput?: string;
     labelConfig?: string;
     labelOutput?: string;
+    /** Plain words in the empty Result box, such as why a run returns nothing. */
     emptyText?: string;
     disableInput?: boolean;
     disableConfig?: boolean;
@@ -77,7 +76,7 @@ interface LiveCodeProps {
     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. */
+     * shape). */
     outputLanguage?: string;
     /** Language for the Config panel. Defaults to `json`. Override when the
      * Config panel content is not JSON. */
@@ -85,29 +84,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;
@@ -330,6 +306,12 @@ interface CodeBoxProps extends Omit<CodeProps, 'code'> {
         errors: number;
         warnings: number;
     }) => void;
+    /** Plain words shown over the editor while `code` is empty, such as what fills it. */
+    placeholder?: string;
+    /** What failed for this box, shown above the editor with an icon and the word Error. */
+    error?: string;
+    /** `status` for input validation the reader is typing through; `alert` (default) otherwise. */
+    errorRole?: 'alert' | 'status';
     footer?: React.ReactNode;
     height?: string | number;
     style?: React.CSSProperties;
@@ -374,7 +356,7 @@ interface CodeBoxProps extends Omit<CodeProps, 'code'> {
  *   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;
+declare function CodeBox({ code, language, onChange, disabled, autoHeight, label, header, showHeader, tabs, activeTab: controlledActiveTab, onTabChange, defaultTab, showTrafficLights, showCopy, showFormat, showSettings, onValidationIssues, placeholder, error, errorRole, footer, height, style, className, ...codeProps }: CodeBoxProps): react_jsx_runtime.JSX.Element;
 
 interface CodeDiffBoxProps {
     original: string;
@@ -542,73 +524,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,16 +570,20 @@ 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;
     js?: string;
-    elb?: Elb.Fn;
+    /**
+     * The collector that captures the preview's events. Preview binds a browser
+     * source to its document through the collector's own source wiring, so
+     * every click and load event runs the collector's pipeline. Without it the
+     * preview only renders. The source is the preview's own, not one of the
+     * collector's `sources`: `walker consent` and `walker user` do not reach
+     * it, and the collector's status does not list it.
+     */
+    collector?: Collector.Instance;
+    /** The box's name; with `editable`, the name of its first tab. */
     label?: string;
     /**
      * Opt-in editor tabs. When true, the header shows a `tabs` ButtonGroup to
@@ -685,8 +604,8 @@ interface PreviewProps {
  * 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.
+ * With a collector, a walkerOS browser source captures the iframe's events
+ * into it; a source that fails to start says so in the box.
  *
  * Load semantics mirror a real browser: `load` triggers (and pageview) fire
  * once on the initial load and again only when the user clicks Reload. Editing
@@ -697,10 +616,62 @@ interface PreviewProps {
  * // 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" />
+ * // Interactive preview that captures events into a collector
+ * <Preview html={html} css={css} collector={collector} label="Preview" />
+ */
+declare function Preview({ html, css, js, collector, label, editable, initialTab, onHtmlChange, onCssChange, onJsChange, lineNumbers, wordWrap, }: PreviewProps): react_jsx_runtime.JSX.Element;
+
+interface ViewSourceProps extends AriaAttributes {
+    /** Exactly one element: the component whose HTML is shown. */
+    children: ReactElement;
+    /**
+     * The page's elb (the browser source's push). After an edit is applied, and
+     * after Reset brings the original back, ViewSource calls
+     * `elb('walker init', element)` so the new nodes get their triggers.
+     */
+    elb?: SourceBrowser.Push;
+    /**
+     * Lets the wrapped element fill a stretched grid or flex cell as it does
+     * unwrapped (cards in a grid row). The root and its content become
+     * one-column grids: an auto-height element fills the cell, its margins,
+     * own self-alignment and explicit height still apply, and its vertical
+     * margins stay inside the wrapper. Leave it off for an element centered
+     * with auto margins (a section with `mx-auto`), which a grid shrinks to
+     * fit.
+     */
+    stretch?: boolean;
+    className?: string;
+    id?: string;
+    [dataAttribute: `data-${string}`]: string | undefined;
+}
+/**
+ * ViewSource - shows a component's live HTML in place and lets you edit it.
+ *
+ * Wraps exactly one element and adds no frame of its own. A toggle at the
+ * top right switches between Visual and Code. Code shows the element's live
+ * HTML, formatted and editable, on a dark code surface; the code covers the
+ * element's visible box (its border box when it paints a background or
+ * border, else its content box inside the padding), and the toggle sits at
+ * that box's top right. Escape leaves the editor for the toggle.
+ * Back in Visual, a changed edit replaces the element as plain HTML (React
+ * handlers inside it are inactive) and `elb('walker init', element)`
+ * registers its triggers. Reset, an icon beside the toggle, mounts the
+ * original children again and registers theirs the same way.
+ *
+ * ViewSources nest: an outer snapshot shows the inner wrapped elements
+ * without their wrappers, and only the innermost hovered toolbar shows. An
+ * applied outer edit is plain HTML, so it has no inner wrappers until Reset.
+ *
+ * Wrap the outermost tagged element of a section, never an element inside one
+ * with a click action: a click on the toolbar bubbles to the wrapper's
+ * ancestors.
+ *
+ * @example
+ * <ViewSource elb={elb}>
+ *   <PromotionHero />
+ * </ViewSource>
  */
-declare function Preview({ html, css, js, elb, label, editable, initialTab, onHtmlChange, onCssChange, onJsChange, lineNumbers, wordWrap, }: PreviewProps): react_jsx_runtime.JSX.Element;
+declare function ViewSource({ children, elb, stretch, className, ...rest }: ViewSourceProps): react_jsx_runtime.JSX.Element;
 
 interface CodeDiffSummary {
     /** Count of hunks that exist only in modified (pure additions). */
@@ -730,7 +701,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 +714,8 @@ interface CodeStaticProps {
 }
 declare function CodeStatic({ code, language, className, }: CodeStaticProps): React.ReactElement;
 
+type Theme = 'dark' | 'light';
+
 interface BoxTab {
     id: string;
     label: string;
@@ -765,8 +739,17 @@ 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;
+    /** What failed in this box, shown above its content with an icon and the word Error. */
+    error?: string;
+    /**
+     * How the error is announced: `alert` (default) interrupts, for a failure;
+     * `status` waits, for input validation that changes as the reader types.
+     */
+    errorRole?: 'alert' | 'status';
 }
-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, error, errorRole, }: BoxProps): react_jsx_runtime.JSX.Element;
 
 interface GridProps {
     children: React.ReactNode;
@@ -776,6 +759,13 @@ interface GridProps {
      */
     columns?: number;
     minBoxWidth?: number | string;
+    /**
+     * Fixed box width in px: one row at every container width, scrolled
+     * sideways and snapping to each box. A box never grows past the row, so a
+     * narrow container still shows the edge of the next one. Overrides
+     * `columns` and `minBoxWidth`.
+     */
+    boxWidth?: number;
     gap?: number | string;
     rowHeight?: 'auto' | 'equal' | 'synced' | number;
     maxRowHeight?: number | string | 'none';
@@ -788,7 +778,8 @@ interface GridProps {
  * Provides consistent grid layout for box components with horizontal
  * scrolling when content exceeds available space. Boxes keep a minimum width.
  * By default all boxes share one row; `columns` sets the boxes per row and
- * wraps the rest. Narrow containers stack the boxes.
+ * wraps the rest. Narrow containers stack the boxes. `boxWidth` keeps one
+ * row of fixed-width boxes at every width instead.
  *
  * @example
  * // 5 boxes with default 350px minimum width
@@ -809,6 +800,15 @@ interface GridProps {
  * </Grid>
  *
  * @example
+ * // One row of 350px boxes, scrolled sideways on any screen
+ * <Grid boxWidth={350}>
+ *   <Preview ... />
+ *   <CodeBox ... />
+ *   <CodeBox ... />
+ *   <CodeBox ... />
+ * </Grid>
+ *
+ * @example
  * // Custom row height
  * <Grid columns={2} rowHeight={300}>
  *   <CodeBox ... />
@@ -835,7 +835,7 @@ interface GridProps {
  *   <CodeBox ... />
  * </Grid>
  */
-declare function Grid({ children, columns, minBoxWidth, gap, rowHeight, maxRowHeight, showScrollButtons, className, }: GridProps): react_jsx_runtime.JSX.Element;
+declare function Grid({ children, columns, minBoxWidth, boxWidth, gap, rowHeight, maxRowHeight, showScrollButtons, className, }: GridProps): react_jsx_runtime.JSX.Element;
 
 interface HeaderProps {
     label: string;
@@ -843,26 +843,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,33 +880,32 @@ 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;
+interface ToggleButtonOption {
+    label: string;
+    value: string;
 }
-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;
+interface ToggleButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'onChange' | 'onClick' | 'type' | 'value'> {
+    options: ToggleButtonOption[];
+    value: string;
+    onChange: (value: string) => void;
+    /**
+     * Which label the button shows: the option a click switches to (`next`,
+     * the default, so the label names the action) or the selected one
+     * (`current`, so the label names the state).
+     */
+    shows?: 'next' | 'current';
 }
 /**
- * Spinner - Loading indicator
- *
- * Pure UI component for showing loading state.
- * No internal state - controlled via parent.
- *
- * @example
- * <Spinner size="md" />
+ * ToggleButton - one button that switches between options. A click selects
+ * the next option after `value` (after the last, the first). By default it
+ * shows that next option, so its label names the action; with
+ * `shows="current"` it shows the selected one.
+ *
+ * Every label sits in the same grid cell and only one is visible, so the
+ * button always takes the longest label's width and never changes size. An
+ * `aria-label` should contain the shown word ("Show code" for "Code").
  */
-declare function Spinner({ size, className }: SpinnerProps): react_jsx_runtime.JSX.Element;
+declare function ToggleButton({ options, value, onChange, shows, className, ...rest }: ToggleButtonProps): react_jsx_runtime.JSX.Element;
 
 /**
  * Detect `@monaco-editor/loader`'s cancelation rejection.
@@ -995,242 +974,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>
- * );
- */
-declare function useDropdown(): UseDropdownReturn;
-
-declare const palenightTheme: editor.IStandaloneThemeData;
-/**
- * Register the palenight theme with Monaco Editor
- * Call this function before creating any editor instances
+ * Code surfaces are dark in both page themes, so Monaco (CodeBox) and Shiki
+ * (CodeView) share one theme, built from the design constants.
  */
-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 +1205,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, Playground, type PlaygroundProps, Preview, type PreviewProps, PromotionPlayground, type PromotionPlaygroundProps, PropertyTable, type PropertyTableProps, REFERENCE_PATTERNS, type RefKind, StepExample, type StepExampleProps, ToggleButton, type ToggleButtonProps, ViewSource, type ViewSourceProps, 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 };