@walkeros/explorer 0.5.0 → 1.0.1

package/dist/components/molecules/code-box.d.ts

@@ -0,0 +1,69 @@
+import React from 'react';
+import { type CodeProps } from '../atoms/code';
+/**
+ * Tab with code content for CodeBox
+ */
+export interface CodeBoxTab {
+    id: string;
+    label: string;
+    code: string;
+    language?: string;
+}
+export 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;
+    footer?: React.ReactNode;
+    height?: string | number;
+    style?: React.CSSProperties;
+}
+/**
+ * CodeBox - Monaco editor wrapped in a Box with header and actions
+ *
+ * Molecule that combines Box + Code atom + toolbar actions.
+ * Use this when you need an editor with header, copy, and format buttons.
+ * Use Code atom directly when you need an editor without Box wrapper.
+ *
+ * Height Behavior:
+ *
+ * Three height modes:
+ * 1. Grid context: Equal row heights (250-450px), fills available space
+ * 2. Explicit height prop: Fixed height (e.g., height={600} or height="50vh")
+ * 3. Auto-height prop: Dynamically sizes to content (min-max boundaries)
+ *
+ * @example
+ * // Grid context - use default (no autoHeight) for equal row heights
+ * <Grid columns={3}>
+ *   <CodeBox code={event} label="Event" showCopy />
+ *   <CodeBox code={mapping} label="Mapping" showFormat />
+ *   <CodeBox code={output} label="Output" disabled />
+ * </Grid>
+ *
+ * @example
+ * // Standalone with auto-height - fits content, no blank space
+ * <CodeBox
+ *   code={setupCode}
+ *   label="Setup"
+ *   autoHeight={{ min: 100, max: 600 }}
+ *   disabled
+ * />
+ *
+ * @example
+ * // Explicit height override
+ * <CodeBox
+ *   code={largeConfig}
+ *   label="Configuration"
+ *   height={600}
+ *   showFormat
+ * />
+ */
+export 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): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=code-box.d.ts.map

package/dist/components/molecules/code-box.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-box.d.ts","sourceRoot":"","sources":["../../../src/components/molecules/code-box.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAErD,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,eAAe,CAAC;AAErD;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC;IAE3D,IAAI,CAAC,EAAE,MAAM,CAAC;IAGd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,OAAO,CAAC;IAGrB,IAAI,CAAC,EAAE,UAAU,EAAE,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,UAAU,CAAC,EAAE,MAAM,CAAC;IAGpB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAG5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IAGrB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,wBAAgB,OAAO,CAAC,EAEtB,IAAI,EACJ,QAAuB,EACvB,QAAQ,EACR,QAAgB,EAChB,UAAU,EAEV,KAAK,EACL,MAAM,EACN,UAAiB,EAEjB,IAAI,EACJ,SAAS,EAAE,mBAAmB,EAC9B,WAAW,EACX,UAAU,EAEV,iBAAyB,EAEzB,QAAgB,EAChB,UAAkB,EAElB,MAAM,EACN,MAAM,EACN,KAAK,EACL,SAAS,EACT,GAAG,SAAS,EACb,EAAE,YAAY,2CAiKd"}

package/dist/components/molecules/code-box.js

@@ -0,0 +1,109 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useCallback } from 'react';
+import { Box } from '../atoms/box';
+import { Code } from '../atoms/code';
+/**
+ * CodeBox - Monaco editor wrapped in a Box with header and actions
+ *
+ * Molecule that combines Box + Code atom + toolbar actions.
+ * Use this when you need an editor with header, copy, and format buttons.
+ * Use Code atom directly when you need an editor without Box wrapper.
+ *
+ * Height Behavior:
+ *
+ * Three height modes:
+ * 1. Grid context: Equal row heights (250-450px), fills available space
+ * 2. Explicit height prop: Fixed height (e.g., height={600} or height="50vh")
+ * 3. Auto-height prop: Dynamically sizes to content (min-max boundaries)
+ *
+ * @example
+ * // Grid context - use default (no autoHeight) for equal row heights
+ * <Grid columns={3}>
+ *   <CodeBox code={event} label="Event" showCopy />
+ *   <CodeBox code={mapping} label="Mapping" showFormat />
+ *   <CodeBox code={output} label="Output" disabled />
+ * </Grid>
+ *
+ * @example
+ * // Standalone with auto-height - fits content, no blank space
+ * <CodeBox
+ *   code={setupCode}
+ *   label="Setup"
+ *   autoHeight={{ min: 100, max: 600 }}
+ *   disabled
+ * />
+ *
+ * @example
+ * // Explicit height override
+ * <CodeBox
+ *   code={largeConfig}
+ *   label="Configuration"
+ *   height={600}
+ *   showFormat
+ * />
+ */
+export function CodeBox({ 
+// Code props (single code mode)
+code, language = 'javascript', onChange, disabled = false, autoHeight, 
+// Header
+label, header, showHeader = true, 
+// Tabs with code content
+tabs, activeTab: controlledActiveTab, onTabChange, defaultTab, 
+// Visual
+showTrafficLights = false, 
+// Actions
+showCopy = false, showFormat = false, 
+// Layout
+footer, height, style, className, ...codeProps }) {
+    const [copied, setCopied] = useState(false);
+    // Track active tab for copy button (Box handles tab state, we just observe)
+    const [currentTabId, setCurrentTabId] = useState(controlledActiveTab ?? defaultTab ?? tabs?.[0]?.id ?? '');
+    // Update internal tracking when controlled prop changes
+    const effectiveTabId = controlledActiveTab ?? currentTabId;
+    // Wrap user's onTabChange to also update our tracking
+    const handleTabChange = useCallback((tabId) => {
+        setCurrentTabId(tabId);
+        onTabChange?.(tabId);
+    }, [onTabChange]);
+    // Get current code for copy/format buttons
+    const activeTabData = tabs?.find((t) => t.id === effectiveTabId);
+    const currentCode = activeTabData?.code ?? code ?? '';
+    const currentLanguage = activeTabData?.language ?? language;
+    // Use label as fallback for header (backward compat)
+    const boxHeader = header ?? label ?? 'Code';
+    const handleCopy = async () => {
+        try {
+            await navigator.clipboard.writeText(currentCode);
+            setCopied(true);
+            setTimeout(() => setCopied(false), 2000);
+        }
+        catch {
+            // Clipboard write failed silently
+        }
+    };
+    const handleFormat = () => {
+        if (!onChange || disabled || currentLanguage !== 'json')
+            return;
+        try {
+            const parsed = JSON.parse(currentCode);
+            const formatted = JSON.stringify(parsed, null, 2);
+            onChange(formatted);
+        }
+        catch (e) {
+            // Invalid JSON, do nothing
+        }
+    };
+    // Build header actions
+    const actions = (_jsxs(_Fragment, { children: [showFormat && !disabled && currentLanguage === 'json' && (_jsx("button", { className: "elb-explorer-btn", onClick: handleFormat, title: "Format JSON", children: _jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("polyline", { points: "16 18 22 12 16 6" }), _jsx("polyline", { points: "8 6 2 12 8 18" })] }) })), showCopy && (_jsx("button", { className: "elb-explorer-btn", onClick: handleCopy, title: copied ? 'Copied!' : 'Copy to clipboard', children: copied ? (_jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("polyline", { points: "20 6 9 17 4 12" }) })) : (_jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }), _jsx("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })] })) }))] }));
+    // Auto-height class for content-based sizing (Box handles gridContext)
+    const autoHeightClass = autoHeight ? 'elb-box--auto-height' : '';
+    const boxClassName = `${autoHeightClass} ${className || ''}`.trim();
+    // Convert CodeBoxTab[] to BoxTab[] with Code as content (Box handles rendering)
+    const boxTabs = tabs?.map((tab) => ({
+        id: tab.id,
+        label: tab.label,
+        content: (_jsx(Code, { code: tab.code, language: tab.language ?? language, onChange: onChange, disabled: disabled, autoHeight: autoHeight, ...codeProps })),
+    }));
+    return (_jsx(Box, { header: boxHeader, headerActions: actions, showHeader: showHeader, tabs: boxTabs, defaultTab: defaultTab, activeTab: controlledActiveTab, onTabChange: handleTabChange, showTrafficLights: showTrafficLights, footer: footer, height: height, style: style, className: boxClassName, children: !tabs && (_jsx(Code, { code: code ?? '', language: language, onChange: onChange, disabled: disabled, autoHeight: autoHeight, ...codeProps })) }));
+}
+//# sourceMappingURL=code-box.js.map

package/dist/components/molecules/code-box.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-box.js","sourceRoot":"","sources":["../../../src/components/molecules/code-box.tsx"],"names":[],"mappings":"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"}

package/dist/components/molecules/code-box.stories.d.ts

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { CodeBox } from './code-box';
+/**
+ * CodeBox - Monaco Editor wrapped in a Box component
+ *
+ * Combines the Code atom with Box container, providing header and toolbar actions.
+ * Supports copy to clipboard, JSON formatting, and flexible height modes.
+ */
+declare const meta: Meta<typeof CodeBox>;
+export default meta;
+type Story = StoryObj<typeof CodeBox>;
+/**
+ * Default CodeBox with JavaScript code
+ */
+export declare const Default: Story;
+/**
+ * Mac-style code window with traffic lights and filename tab
+ *
+ * Use this pattern for landing pages and documentation.
+ */
+export declare const WithTrafficLights: Story;
+/**
+ * CodeBox with multiple tabs - clicking tabs switches code content
+ */
+export declare const WithTabs: Story;
+/**
+ * CodeBox with traffic lights, tabs, and footer
+ */
+export declare const FullFeatured: Story;
+//# sourceMappingURL=code-box.stories.d.ts.map

package/dist/components/molecules/code-box.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-box.stories.d.ts","sourceRoot":"","sources":["../../../src/components/molecules/code-box.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAErC;;;;;GAKG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,OAAO,CAI9B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,OAAO,CAAC,CAAC;AAEtC;;GAEG;AACH,eAAO,MAAM,OAAO,EAAE,KAkBrB,CAAC;AAuBF;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAS/B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,QAAQ,EAAE,KAqCtB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,YAAY,EAAE,KAc1B,CAAC"}

package/dist/components/molecules/code-box.stories.js

@@ -0,0 +1,127 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CodeBox } from './code-box';
+/**
+ * CodeBox - Monaco Editor wrapped in a Box component
+ *
+ * Combines the Code atom with Box container, providing header and toolbar actions.
+ * Supports copy to clipboard, JSON formatting, and flexible height modes.
+ */
+const meta = {
+    component: CodeBox,
+    title: 'Molecules/CodeBox',
+    tags: ['autodocs'],
+};
+export default meta;
+/**
+ * Default CodeBox with JavaScript code
+ */
+export const Default = {
+    args: {
+        code: `const event = {
+  entity: 'product',
+  action: 'view',
+  data: {
+    id: 'P123',
+    name: 'Laptop',
+    price: 999
+  }
+};
+
+console.log('Event:', event);`,
+        language: 'javascript',
+        label: 'Code Editor',
+        showCopy: true,
+        showFormat: false,
+    },
+};
+const flowJsonCode = `{
+  "flows": {
+    "default": {
+      "sources": {
+        "browser": {
+          "package": "@walkeros/web-source-browser",
+          "config": { "settings": { "pageview": true } }
+        }
+      },
+      "destinations": {
+        "ga4": {
+          "package": "@walkeros/web-destination-gtag",
+          "config": {
+            "settings": { "ga4": { "measurementId": "G-XXX" } }
+          }
+        }
+      }
+    }
+  }
+}`;
+/**
+ * Mac-style code window with traffic lights and filename tab
+ *
+ * Use this pattern for landing pages and documentation.
+ */
+export const WithTrafficLights = {
+    args: {
+        code: flowJsonCode,
+        language: 'json',
+        showTrafficLights: true,
+        tabs: [{ id: 'file', label: 'flow.json', code: flowJsonCode }],
+        showCopy: true,
+        height: 400,
+    },
+};
+/**
+ * CodeBox with multiple tabs - clicking tabs switches code content
+ */
+export const WithTabs = {
+    args: {
+        tabs: [
+            {
+                id: 'config',
+                label: 'config.ts',
+                code: `export const config = {
+  tracking: true,
+  debug: false,
+  destinations: ['ga4', 'gtm']
+};`,
+                language: 'typescript',
+            },
+            {
+                id: 'index',
+                label: 'index.ts',
+                code: `import { config } from './config';
+import { elb } from '@walkeros/core';
+
+elb('walker run', config);`,
+                language: 'typescript',
+            },
+            {
+                id: 'types',
+                label: 'types.ts',
+                code: `export interface TrackingConfig {
+  tracking: boolean;
+  debug: boolean;
+  destinations: string[];
+}`,
+                language: 'typescript',
+            },
+        ],
+        defaultTab: 'config',
+        showCopy: true,
+        height: 300,
+    },
+};
+/**
+ * CodeBox with traffic lights, tabs, and footer
+ */
+export const FullFeatured = {
+    args: {
+        tabs: [
+            { id: 'flow', label: 'flow.json', code: flowJsonCode, language: 'json' },
+        ],
+        showTrafficLights: true,
+        showCopy: true,
+        footer: (_jsx("div", { style: { padding: '8px', fontSize: '12px', color: '#888' }, children: "Last saved: just now" })),
+        height: 450,
+    },
+};
+//# sourceMappingURL=code-box.stories.js.map

package/dist/components/molecules/code-box.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-box.stories.js","sourceRoot":"","sources":["../../../src/components/molecules/code-box.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAErC;;;;;GAKG;AACH,MAAM,IAAI,GAAyB;IACjC,SAAS,EAAE,OAAO;IAClB,KAAK,EAAE,mBAAmB;IAC1B,IAAI,EAAE,CAAC,UAAU,CAAC;CACnB,CAAC;AAEF,eAAe,IAAI,CAAC;AAGpB;;GAEG;AACH,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,IAAI,EAAE;;;;;;;;;;8BAUoB;QAC1B,QAAQ,EAAE,YAAY;QACtB,KAAK,EAAE,aAAa;QACpB,QAAQ,EAAE,IAAI;QACd,UAAU,EAAE,KAAK;KAClB;CACF,CAAC;AAEF,MAAM,YAAY,GAAG;;;;;;;;;;;;;;;;;;;EAmBnB,CAAC;AAEH;;;;GAIG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAU;IACtC,IAAI,EAAE;QACJ,IAAI,EAAE,YAAY;QAClB,QAAQ,EAAE,MAAM;QAChB,iBAAiB,EAAE,IAAI;QACvB,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,YAAY,EAAE,CAAC;QAC9D,QAAQ,EAAE,IAAI;QACd,MAAM,EAAE,GAAG;KACZ;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,IAAI,EAAE;QACJ,IAAI,EAAE;YACJ;gBACE,EAAE,EAAE,QAAQ;gBACZ,KAAK,EAAE,WAAW;gBAClB,IAAI,EAAE;;;;GAIX;gBACK,QAAQ,EAAE,YAAY;aACvB;YACD;gBACE,EAAE,EAAE,OAAO;gBACX,KAAK,EAAE,UAAU;gBACjB,IAAI,EAAE;;;2BAGa;gBACnB,QAAQ,EAAE,YAAY;aACvB;YACD;gBACE,EAAE,EAAE,OAAO;gBACX,KAAK,EAAE,UAAU;gBACjB,IAAI,EAAE;;;;EAIZ;gBACM,QAAQ,EAAE,YAAY;aACvB;SACF;QACD,UAAU,EAAE,QAAQ;QACpB,QAAQ,EAAE,IAAI;QACd,MAAM,EAAE,GAAG;KACZ;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,YAAY,GAAU;IACjC,IAAI,EAAE;QACJ,IAAI,EAAE;YACJ,EAAE,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,EAAE;SACzE;QACD,iBAAiB,EAAE,IAAI;QACvB,QAAQ,EAAE,IAAI;QACd,MAAM,EAAE,CACN,cAAK,KAAK,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,qCAEzD,CACP;QACD,MAAM,EAAE,GAAG;KACZ;CACF,CAAC"}

package/dist/components/molecules/code-snippet.d.ts

@@ -0,0 +1,58 @@
+import { type CodeBoxProps } from './code-box';
+export type CodeSnippetProps = Omit<CodeBoxProps, 'label' | 'showHeader'> & {
+    format?: boolean;
+};
+/**
+ * CodeSnippet - Prominent code display for snippets
+ *
+ * Wraps CodeBox with larger font size and generous padding.
+ * Use this for showcasing code examples, one-liners, or small code blocks
+ * where you want the code to be more visually prominent than in a standard editor.
+ *
+ * Always renders without a header. Use CodeBox if you need a header.
+ *
+ * Default behavior:
+ * - Read-only (disabled=true)
+ * - Copy button enabled (showCopy=true)
+ * - Auto-height with sensible bounds (min: 20px, max: 600px)
+ * - Auto-format on mount (format=true) - formats code once on initial load
+ *
+ * Auto-Formatting:
+ * - Enabled by default (format=true)
+ * - Runs once on component mount using Monaco's built-in formatters
+ * - Supports: JavaScript, TypeScript, JSON, HTML, CSS
+ * - Use format={false} to disable for special cases (pre-formatted code)
+ *
+ * Reuses all CodeBox functionality:
+ * - Monaco Editor with syntax highlighting
+ * - Grid height management and auto-height modes
+ * - Copy button
+ * - Theme integration
+ *
+ * @example
+ * // Minimal usage - code auto-formats on load
+ * <CodeSnippet
+ *   code="import { elb } from '@walkeros/core';"
+ *   language="javascript"
+ * />
+ *
+ * @example
+ * // Disable auto-formatting for pre-formatted code
+ * <CodeSnippet
+ *   code={alreadyFormattedCode}
+ *   language="javascript"
+ *   format={false}
+ * />
+ *
+ * @example
+ * // Override defaults if needed
+ * <CodeSnippet
+ *   code={editableCode}
+ *   language="javascript"
+ *   disabled={false}
+ *   showCopy={false}
+ *   autoHeight={{ min: 100, max: 800 }}
+ * />
+ */
+export declare function CodeSnippet(props: CodeSnippetProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=code-snippet.d.ts.map

package/dist/components/molecules/code-snippet.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-snippet.d.ts","sourceRoot":"","sources":["../../../src/components/molecules/code-snippet.tsx"],"names":[],"mappings":"AACA,OAAO,EAAW,KAAK,YAAY,EAAE,MAAM,YAAY,CAAC;AAGxD,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,YAAY,EAAE,OAAO,GAAG,YAAY,CAAC,GAAG;IAC1E,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmDG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CAqClD"}

package/dist/components/molecules/code-snippet.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { CodeBox } from './code-box';
+import { formatCode } from '../../utils/format-code';
+/**
+ * CodeSnippet - Prominent code display for snippets
+ *
+ * Wraps CodeBox with larger font size and generous padding.
+ * Use this for showcasing code examples, one-liners, or small code blocks
+ * where you want the code to be more visually prominent than in a standard editor.
+ *
+ * Always renders without a header. Use CodeBox if you need a header.
+ *
+ * Default behavior:
+ * - Read-only (disabled=true)
+ * - Copy button enabled (showCopy=true)
+ * - Auto-height with sensible bounds (min: 20px, max: 600px)
+ * - Auto-format on mount (format=true) - formats code once on initial load
+ *
+ * Auto-Formatting:
+ * - Enabled by default (format=true)
+ * - Runs once on component mount using Monaco's built-in formatters
+ * - Supports: JavaScript, TypeScript, JSON, HTML, CSS
+ * - Use format={false} to disable for special cases (pre-formatted code)
+ *
+ * Reuses all CodeBox functionality:
+ * - Monaco Editor with syntax highlighting
+ * - Grid height management and auto-height modes
+ * - Copy button
+ * - Theme integration
+ *
+ * @example
+ * // Minimal usage - code auto-formats on load
+ * <CodeSnippet
+ *   code="import { elb } from '@walkeros/core';"
+ *   language="javascript"
+ * />
+ *
+ * @example
+ * // Disable auto-formatting for pre-formatted code
+ * <CodeSnippet
+ *   code={alreadyFormattedCode}
+ *   language="javascript"
+ *   format={false}
+ * />
+ *
+ * @example
+ * // Override defaults if needed
+ * <CodeSnippet
+ *   code={editableCode}
+ *   language="javascript"
+ *   disabled={false}
+ *   showCopy={false}
+ *   autoHeight={{ min: 100, max: 800 }}
+ * />
+ */
+export function CodeSnippet(props) {
+    const { code, language = 'javascript', className, disabled = true, showCopy = true, autoHeight = { min: 20, max: 600 }, fontSize = 15, format = true, ...rest } = props;
+    const snippetClassName = `elb-code-snippet ${className || ''}`.trim();
+    const [formattedCode, setFormattedCode] = useState(code);
+    // Format code on mount
+    useEffect(() => {
+        if (format && code) {
+            formatCode(code, language).then(setFormattedCode);
+        }
+        else {
+            setFormattedCode(code);
+        }
+    }, [code, language, format]);
+    return (_jsx(CodeBox, { ...rest, code: formattedCode, language: language, className: snippetClassName, showHeader: false, disabled: disabled, showCopy: showCopy, autoHeight: autoHeight, fontSize: fontSize }));
+}
+//# sourceMappingURL=code-snippet.js.map

package/dist/components/molecules/code-snippet.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-snippet.js","sourceRoot":"","sources":["../../../src/components/molecules/code-snippet.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,OAAO,EAAqB,MAAM,YAAY,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAMrD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmDG;AACH,MAAM,UAAU,WAAW,CAAC,KAAuB;IACjD,MAAM,EACJ,IAAI,EACJ,QAAQ,GAAG,YAAY,EACvB,SAAS,EACT,QAAQ,GAAG,IAAI,EACf,QAAQ,GAAG,IAAI,EACf,UAAU,GAAG,EAAE,GAAG,EAAE,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,EAClC,QAAQ,GAAG,EAAE,EACb,MAAM,GAAG,IAAI,EACb,GAAG,IAAI,EACR,GAAG,KAAK,CAAC;IACV,MAAM,gBAAgB,GAAG,oBAAoB,SAAS,IAAI,EAAE,EAAE,CAAC,IAAI,EAAE,CAAC;IACtE,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAEzD,uBAAuB;IACvB,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,MAAM,IAAI,IAAI,EAAE,CAAC;YACnB,UAAU,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;QACpD,CAAC;aAAM,CAAC;YACN,gBAAgB,CAAC,IAAI,CAAC,CAAC;QACzB,CAAC;IACH,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAC;IAE7B,OAAO,CACL,KAAC,OAAO,OACF,IAAI,EACR,IAAI,EAAE,aAAa,EACnB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,gBAAgB,EAC3B,UAAU,EAAE,KAAK,EACjB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,QAAQ,GAClB,CACH,CAAC;AACJ,CAAC"}

package/dist/components/molecules/code-snippet.stories.d.ts

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { CodeSnippet } from './code-snippet';
+declare const meta: Meta<typeof CodeSnippet>;
+export default meta;
+type Story = StoryObj<typeof CodeSnippet>;
+export declare const OneLine: Story;
+export declare const MultiLine: Story;
+/**
+ * Auto-Formatting Demo - Badly formatted code gets auto-formatted on mount
+ */
+export declare const AutoFormatEnabled: Story;
+/**
+ * Disable Auto-Formatting - Keep code exactly as provided
+ */
+export declare const AutoFormatDisabled: Story;
+/**
+ * JSON Auto-Formatting - Badly formatted JSON gets auto-formatted
+ */
+export declare const JSONFormatting: Story;
+//# sourceMappingURL=code-snippet.stories.d.ts.map

package/dist/components/molecules/code-snippet.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-snippet.stories.d.ts","sourceRoot":"","sources":["../../../src/components/molecules/code-snippet.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,WAAW,CAUlC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAC;AAE1C,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAmBvB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAK/B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,kBAAkB,EAAE,KAMhC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,EAAE,KAK5B,CAAC"}

package/dist/components/molecules/code-snippet.stories.js

@@ -0,0 +1,68 @@
+import { CodeSnippet } from './code-snippet';
+const meta = {
+    title: 'Molecules/CodeSnippet',
+    component: CodeSnippet,
+    tags: ['autodocs'],
+    argTypes: {
+        language: {
+            control: 'select',
+            options: ['javascript', 'typescript', 'json', 'html', 'css'],
+        },
+    },
+};
+export default meta;
+export const OneLine = {
+    args: {
+        code: "import { getAttribute, sendWeb, sessionStart } from '@walkeros/web-core';",
+        language: 'javascript',
+    },
+};
+export const MultiLine = {
+    args: {
+        code: `export async function setupGA4Complete() {
+  const { collector, elb } = await startFlow({
+    destinations: {
+      gtag: {
+        ...destinationGtag,
+        config: {
+          settings: {
+            ga4: { measurementId: 'G-XXXXXXXXXX' },
+          },
+        },
+      },
+    },
+  });
+  return { collector, elb };
+}`,
+        language: 'javascript',
+    },
+};
+/**
+ * Auto-Formatting Demo - Badly formatted code gets auto-formatted on mount
+ */
+export const AutoFormatEnabled = {
+    args: {
+        code: `function example(){const x={a:1,b:2,c:3};if(x.a===1){return x.b+x.c;}return 0;}`,
+        language: 'javascript',
+    },
+};
+/**
+ * Disable Auto-Formatting - Keep code exactly as provided
+ */
+export const AutoFormatDisabled = {
+    args: {
+        code: `function example(){const x={a:1,b:2,c:3};if(x.a===1){return x.b+x.c;}return 0;}`,
+        language: 'javascript',
+        format: false,
+    },
+};
+/**
+ * JSON Auto-Formatting - Badly formatted JSON gets auto-formatted
+ */
+export const JSONFormatting = {
+    args: {
+        code: `{"entity":"product","action":"view","data":{"id":"P123","name":"Laptop","price":999},"context":{"stage":["shopping",1]}}`,
+        language: 'json',
+    },
+};
+//# sourceMappingURL=code-snippet.stories.js.map

package/dist/components/molecules/code-snippet.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-snippet.stories.js","sourceRoot":"","sources":["../../../src/components/molecules/code-snippet.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C,MAAM,IAAI,GAA6B;IACrC,KAAK,EAAE,uBAAuB;IAC9B,SAAS,EAAE,WAAW;IACtB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,QAAQ,EAAE;YACR,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,YAAY,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,CAAC;SAC7D;KACF;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAGpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,IAAI,EAAE,2EAA2E;QACjF,QAAQ,EAAE,YAAY;KACvB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAU;IAC9B,IAAI,EAAE;QACJ,IAAI,EAAE;;;;;;;;;;;;;;EAcR;QACE,QAAQ,EAAE,YAAY;KACvB;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAU;IACtC,IAAI,EAAE;QACJ,IAAI,EAAE,iFAAiF;QACvF,QAAQ,EAAE,YAAY;KACvB;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAU;IACvC,IAAI,EAAE;QACJ,IAAI,EAAE,iFAAiF;QACvF,QAAQ,EAAE,YAAY;QACtB,MAAM,EAAE,KAAK;KACd;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,cAAc,GAAU;IACnC,IAAI,EAAE;QACJ,IAAI,EAAE,0HAA0H;QAChI,QAAQ,EAAE,MAAM;KACjB;CACF,CAAC"}

package/dist/components/molecules/config-overview-pane.d.ts

@@ -0,0 +1,44 @@
+import type { UseMappingNavigationReturn } from '../../hooks/useMappingNavigation';
+import type { ConfigStructureDef } from '../../schemas/config-structures/types';
+import type { RJSFSchema } from '@rjsf/utils';
+/**
+ * Generic Config Overview Pane
+ *
+ * Shows all available properties from a structure definition as tiles.
+ * Works at any depth with any config type (DestinationConfig, Rule, etc.).
+ *
+ * Features:
+ * - Shows configured properties (with values)
+ * - Shows available properties (not yet set)
+ * - Uses structure definition for metadata (titles, descriptions)
+ * - Generic - works with any ConfigStructureDef
+ *
+ * @example
+ * // Full DestinationConfig
+ * <ConfigOverviewPane
+ *   config={destinationConfig}
+ *   structure={DESTINATION_CONFIG_STRUCTURE}
+ *   navigation={navigation}
+ * />
+ *
+ * @example
+ * // Single Rule
+ * <ConfigOverviewPane
+ *   config={ruleConfig}
+ *   structure={MAPPING_RULE_STRUCTURE}
+ *   navigation={navigation}
+ * />
+ */
+export interface ConfigOverviewPaneProps<T extends Record<string, unknown>> {
+    config: T;
+    structure: ConfigStructureDef;
+    navigation: UseMappingNavigationReturn;
+    schemas?: Record<string, RJSFSchema>;
+    className?: string;
+    /** Base path to prepend when navigating (e.g., ['mapping', 'page', 'view']) */
+    basePath?: string[];
+    /** Root structure for detectNodeType (defaults to structure if not provided) */
+    rootStructure?: ConfigStructureDef;
+}
+export declare function ConfigOverviewPane<T extends Record<string, unknown>>({ config, structure, navigation, schemas, className, basePath, rootStructure, }: ConfigOverviewPaneProps<T>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=config-overview-pane.d.ts.map

package/dist/components/molecules/config-overview-pane.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"config-overview-pane.d.ts","sourceRoot":"","sources":["../../../src/components/molecules/config-overview-pane.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,kCAAkC,CAAC;AACnF,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uCAAuC,CAAC;AAChF,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAK9C;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,MAAM,WAAW,uBAAuB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IACxE,MAAM,EAAE,CAAC,CAAC;IACV,SAAS,EAAE,kBAAkB,CAAC;IAC9B,UAAU,EAAE,0BAA0B,CAAC;IACvC,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB,gFAAgF;IAChF,aAAa,CAAC,EAAE,kBAAkB,CAAC;CACpC;AA0CD,wBAAgB,kBAAkB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,EACpE,MAAM,EACN,SAAS,EACT,UAAU,EACV,OAAO,EACP,SAAc,EACd,QAAa,EACb,aAAa,GACd,EAAE,uBAAuB,CAAC,CAAC,CAAC,2CAkH5B"}