@walkeros/explorer 0.3.1 → 1.0.0

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"}

package/dist/components/molecules/config-overview-pane.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { BaseMappingPane } from '../atoms/base-mapping-pane';
+import { RuleTile } from '../atoms/config-tile';
+import { detectNodeType } from '../../utils/type-detector';
+/**
+ * Get status badge for a property value
+ */
+function getPropertyStatus(value) {
+    if (value === undefined || value === null) {
+        return { enabled: false, text: 'Not set' };
+    }
+    if (typeof value === 'boolean') {
+        return value
+            ? { enabled: true, text: 'Enabled', variant: 'success' }
+            : { enabled: false, text: 'Disabled' };
+    }
+    if (typeof value === 'string' || typeof value === 'number') {
+        return { enabled: true, text: String(value) };
+    }
+    if (typeof value === 'object') {
+        if (Array.isArray(value)) {
+            return { enabled: true, text: `${value.length} items` };
+        }
+        const keys = Object.keys(value);
+        return { enabled: true, text: `${keys.length} properties` };
+    }
+    return { enabled: true, text: 'Set' };
+}
+export function ConfigOverviewPane({ config, structure, navigation, schemas, className = '', basePath = [], rootStructure, }) {
+    if (!structure.properties) {
+        return (_jsx(BaseMappingPane, { title: structure.title || 'Configuration', description: structure.description, navigation: navigation, className: className, children: _jsx("div", { className: "elb-mapping-rule-section", children: _jsx("p", { children: "No properties defined in structure." }) }) }));
+    }
+    // Get all property keys from structure
+    const propertyKeys = Object.keys(structure.properties);
+    // Separate configured vs available
+    const configuredProperties = [];
+    const availableProperties = [];
+    propertyKeys.forEach((key) => {
+        const propertyDef = structure.properties[key];
+        const value = config[key];
+        const propertyInfo = {
+            key,
+            title: propertyDef.title || capitalize(key),
+            description: propertyDef.description,
+            value,
+        };
+        if (value !== undefined) {
+            configuredProperties.push(propertyInfo);
+        }
+        else {
+            availableProperties.push(propertyInfo);
+        }
+    });
+    const handlePropertyClick = (property) => {
+        const fullPath = [...basePath, property.key];
+        const detectionStructure = rootStructure || structure;
+        const nodeType = detectNodeType(property.value, fullPath, detectionStructure, schemas);
+        navigation.openTab(fullPath, nodeType);
+    };
+    return (_jsxs(BaseMappingPane, { title: structure.title || 'Configuration', description: structure.description, navigation: navigation, className: className, children: [configuredProperties.length > 0 && (_jsxs("div", { className: "elb-mapping-rule-section", children: [_jsx("h3", { className: "elb-mapping-rule-section-title", children: "Configured" }), _jsx("div", { className: "elb-mapping-rule-section-grid", children: configuredProperties.map((property) => (_jsx(RuleTile, { label: property.title, description: property.description, status: getPropertyStatus(property.value), onClick: () => handlePropertyClick(property) }, property.key))) })] })), availableProperties.length > 0 && (_jsxs("div", { className: "elb-mapping-rule-section", children: [_jsx("h3", { className: "elb-mapping-rule-section-title", children: "Available" }), _jsx("div", { className: "elb-mapping-rule-section-grid", children: availableProperties.map((property) => (_jsx(RuleTile, { label: property.title, description: property.description, status: { enabled: false, text: 'Not set' }, onClick: () => handlePropertyClick(property) }, property.key))) })] })), configuredProperties.length === 0 &&
+                availableProperties.length === 0 && (_jsx("div", { className: "elb-mapping-rule-section", children: _jsxs("div", { style: {
+                        padding: '40px 20px',
+                        textAlign: 'center',
+                        color: 'var(--color-text-muted)',
+                    }, children: [_jsx("div", { style: { fontSize: '48px', marginBottom: '16px' }, children: "\uD83D\uDCE6" }), _jsx("div", { style: { fontSize: '16px', fontWeight: 500 }, children: "No properties available" }), _jsx("div", { style: { fontSize: '14px', marginTop: '8px' }, children: "This configuration has no properties defined." })] }) }))] }));
+}
+/**
+ * Capitalize first letter
+ */
+function capitalize(str) {
+    if (!str)
+        return str;
+    return str.charAt(0).toUpperCase() + str.slice(1);
+}
+//# sourceMappingURL=config-overview-pane.js.map

package/dist/components/molecules/config-overview-pane.js.map

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

package/dist/components/molecules/config-tree-sidebar.d.ts

@@ -0,0 +1,46 @@
+import type { ConfigTreeNode } from '../../utils/generic-tree-builder';
+/**
+ * Config Tree Sidebar - Shows full destination config structure
+ *
+ * Displays hierarchical structure of destination configuration:
+ * - Settings
+ * - Mapping (entities → actions)
+ * - Data
+ * - Policy
+ * - Consent
+ * - Options
+ *
+ * This is a pure presentation component - all state management
+ * should be handled by the parent component.
+ *
+ * Features:
+ * - Hierarchical tree display
+ * - Expand/collapse controls
+ * - Click to navigate with proper NodeType
+ * - Visual indication of current path
+ * - Add action buttons for entities
+ *
+ * @example
+ * <ConfigTreeSidebar
+ *   tree={buildConfigTree(config, schemas, sections)}
+ *   currentPath={['settings']}
+ *   expandedPaths={expandedPathsSet}
+ *   visible={true}
+ *   onToggle={(path) => togglePath(path)}
+ *   onNavigate={(path) => navigate(path)}
+ * />
+ */
+export interface ConfigTreeSidebarProps {
+    tree: ConfigTreeNode[];
+    currentPath: string[];
+    expandedPaths: Set<string>;
+    visible: boolean;
+    onToggle: (path: string[]) => void;
+    onNavigate: (path: string[]) => void;
+    onAddAction?: (entity: string, action: string) => void;
+    onAddEntity?: (entity: string) => void;
+    onClose?: () => void;
+    className?: string;
+}
+export declare function ConfigTreeSidebar({ tree, currentPath, expandedPaths, visible, onToggle, onNavigate, onAddAction, onAddEntity, onClose, className, }: ConfigTreeSidebarProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=config-tree-sidebar.d.ts.map

package/dist/components/molecules/config-tree-sidebar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"config-tree-sidebar.d.ts","sourceRoot":"","sources":["../../../src/components/molecules/config-tree-sidebar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAC;AA4OvE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,MAAM,WAAW,sBAAsB;IACrC,IAAI,EAAE,cAAc,EAAE,CAAC;IACvB,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,aAAa,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC3B,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACnC,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACrC,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACvD,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,iBAAiB,CAAC,EAChC,IAAI,EACJ,WAAW,EACX,aAAa,EACb,OAAO,EACP,QAAQ,EACR,UAAU,EACV,WAAW,EACX,WAAW,EACX,OAAO,EACP,SAAc,GACf,EAAE,sBAAsB,kDAkKxB"}