@walkeros/explorer 3.0.1 → 3.0.2

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

@@ -0,0 +1,300 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { schemas } from '@walkeros/core/dev';
+import { CodeBox } from './code-box';
+import { enrichFlowConfigSchema } from '../../utils/monaco-schema-flow-config';
+import { getEnrichedContractSchema } from '../../utils/monaco-schema-contract';
+import { getVariablesSchema } from '../../utils/monaco-schema-variables';
+/**
+ * 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 JSON Schema IntelliSense
+ *
+ * Demonstrates JSON validation, autocomplete, and hover docs
+ * powered by a JSON Schema passed via the `jsonSchema` prop.
+ */
+export const WithJsonSchema = {
+    render: () => {
+        const [code, setCode] = useState(JSON.stringify({ version: 1, flows: {} }, null, 2));
+        return (_jsx(CodeBox, { code: code, onChange: setCode, language: "json", label: "Flow Config (with IntelliSense)", showFormat: true, jsonSchema: {
+                $schema: 'http://json-schema.org/draft-07/schema#',
+                type: 'object',
+                properties: {
+                    version: {
+                        type: 'number',
+                        description: 'Flow configuration version',
+                        enum: [1, 2],
+                    },
+                    flows: {
+                        type: 'object',
+                        description: 'Named flow configurations',
+                        additionalProperties: {
+                            type: 'object',
+                            properties: {
+                                web: { type: 'object', description: 'Web platform config' },
+                                server: {
+                                    type: 'object',
+                                    description: 'Server platform config',
+                                },
+                            },
+                        },
+                    },
+                },
+                required: ['version', 'flows'],
+            } }));
+    },
+};
+/**
+ * CodeBox with settings toggle
+ *
+ * Click the gear icon to toggle line numbers, minimap, and word wrap.
+ */
+export const WithSettings = {
+    render: () => {
+        const [code, setCode] = useState(JSON.stringify({
+            version: 1,
+            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' } },
+                                mapping: {
+                                    'page view': { name: 'page_view' },
+                                    'product view': {
+                                        name: 'view_item',
+                                        data: { map: { id: 'items.0.item_id' } },
+                                    },
+                                },
+                            },
+                        },
+                    },
+                },
+            },
+        }, null, 2));
+        return (_jsx(CodeBox, { code: code, onChange: setCode, language: "json", label: "Flow Config", showFormat: true, showSettings: true, height: 500 }));
+    },
+};
+// ============================================================
+// IntelliSense Stories
+// ============================================================
+/**
+ * Enriched Flow.Config schema with defaultSnippets and markdownDescription
+ *
+ * Uses the real Flow.Config JSON Schema from @walkeros/core, enriched with
+ * Monaco-specific extensions (snippets, markdown hover docs).
+ *
+ * **How to verify:** Place cursor inside `{}` after `"flows":`, press
+ * Ctrl+Space — autocomplete shows property suggestions from the schema.
+ */
+export const EnrichedFlowConfig = {
+    render: () => {
+        const [code, setCode] = useState(JSON.stringify({ version: 1, flows: {} }, null, 2));
+        return (_jsx(CodeBox, { code: code, onChange: setCode, language: "json", label: "Flow Config (Enriched Schema)", showFormat: true, jsonSchema: enrichFlowConfigSchema(schemas.configJsonSchema), height: 400 }));
+    },
+};
+/**
+ * Contract schema with entity/action snippets
+ *
+ * **How to verify:** Autocomplete inside entities shows entity snippet;
+ * hover on properties shows markdown descriptions.
+ */
+export const EnrichedContract = {
+    render: () => {
+        const [code, setCode] = useState(JSON.stringify({ $tagging: 1 }, null, 2));
+        return (_jsx(CodeBox, { code: code, onChange: setCode, language: "json", label: "Data Contract", showFormat: true, jsonSchema: getEnrichedContractSchema(), height: 400 }));
+    },
+};
+/**
+ * Variables schema with `$var.` interpolation docs
+ *
+ * **How to verify:** Autocomplete shows "Add string variable",
+ * "Add boolean variable", "Add number variable" snippets.
+ */
+export const VariablesEditor = {
+    render: () => {
+        const [code, setCode] = useState(JSON.stringify({ measurementId: 'G-XXXXXXXXXX', debug: false }, null, 2));
+        return (_jsx(CodeBox, { code: code, onChange: setCode, language: "json", label: "Variables", showFormat: true, jsonSchema: getVariablesSchema(), height: 300 }));
+    },
+};
+/**
+ * Visual coloring of `$var.`, `$def.`, `$secret.`, `$env.`, `$code:` references
+ *
+ * Decorations are applied automatically for JSON content. Each reference type
+ * is colored differently: variables=cyan italic, definitions=green italic,
+ * secrets/env=amber italic, code=purple.
+ *
+ * **How to verify:** Each reference value should be colored differently
+ * in the editor.
+ */
+export const ReferenceDecorations = {
+    render: () => {
+        const [code, setCode] = useState(JSON.stringify({
+            measurementId: '$var.gaId',
+            apiKey: '$secret.apiKey',
+            endpoint: '$env.API_URL',
+            transform: '$def.cleanEvent',
+            code: '$code:myFunction',
+        }, null, 2));
+        return (_jsx(CodeBox, { code: code, onChange: setCode, language: "json", label: "Reference Decorations", showFormat: true, height: 300 }));
+    },
+};
+/**
+ * Dynamic Flow Context — self-referencing IntelliSense
+ *
+ * Edit the flow JSON and variables/definitions you define become immediately
+ * available as `$var.` and `$def.` completions in the same editor.
+ *
+ * **How to verify:**
+ * - Add a variable in the `"variables"` section (e.g., `"myVar": "hello"`)
+ * - Scroll down to a destination config and type `$var.` — your new variable appears
+ * - Rename or delete the variable — completions update instantly
+ * - `$var.nonExistent` gets a warning marker
+ */
+export const DynamicFlowContext = {
+    name: 'Dynamic Flow Context',
+    render: () => {
+        const [code, setCode] = useState(JSON.stringify({
+            version: 1,
+            variables: { gaId: 'G-XXXXXXXXXX', debug: false },
+            definitions: { cleanEvent: { filter: true } },
+            flows: {
+                default: {
+                    web: {},
+                    sources: {
+                        browser: { package: '@walkeros/web-source-browser' },
+                    },
+                    destinations: {
+                        ga4: {
+                            package: '@walkeros/web-destination-gtag',
+                            config: {
+                                settings: {
+                                    ga4: { measurementId: '$var.gaId' },
+                                    missing: '$var.nonExistent',
+                                },
+                            },
+                        },
+                    },
+                },
+            },
+        }, null, 2));
+        const validation = schemas.validateFlowConfig(code);
+        return (_jsx(CodeBox, { code: code, onChange: setCode, language: "json", label: "Flow Config (Dynamic Validation)", showFormat: true, jsonSchema: enrichFlowConfigSchema(schemas.configJsonSchema), validate: schemas.validateFlowConfig, intellisenseContext: validation.context, onValidationIssues: (counts) => console.log('Validation:', counts), height: 500 }));
+    },
+};
+//# 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":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAC7C,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,sBAAsB,EAAE,MAAM,uCAAuC,CAAC;AAC/E,OAAO,EAAE,yBAAyB,EAAE,MAAM,oCAAoC,CAAC;AAC/E,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AAEzE;;;;;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;;;;;GAKG;AACH,MAAM,CAAC,MAAM,cAAc,GAAU;IACnC,MAAM,EAAE,GAAG,EAAE;QACX,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAC9B,IAAI,CAAC,SAAS,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,CAAC,CAAC,CACnD,CAAC;QACF,OAAO,CACL,KAAC,OAAO,IACN,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,OAAO,EACjB,QAAQ,EAAC,MAAM,EACf,KAAK,EAAC,iCAAiC,EACvC,UAAU,QACV,UAAU,EAAE;gBACV,OAAO,EAAE,yCAAyC;gBAClD,IAAI,EAAE,QAAQ;gBACd,UAAU,EAAE;oBACV,OAAO,EAAE;wBACP,IAAI,EAAE,QAAQ;wBACd,WAAW,EAAE,4BAA4B;wBACzC,IAAI,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;qBACb;oBACD,KAAK,EAAE;wBACL,IAAI,EAAE,QAAQ;wBACd,WAAW,EAAE,2BAA2B;wBACxC,oBAAoB,EAAE;4BACpB,IAAI,EAAE,QAAQ;4BACd,UAAU,EAAE;gCACV,GAAG,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,qBAAqB,EAAE;gCAC3D,MAAM,EAAE;oCACN,IAAI,EAAE,QAAQ;oCACd,WAAW,EAAE,wBAAwB;iCACtC;6BACF;yBACF;qBACF;iBACF;gBACD,QAAQ,EAAE,CAAC,SAAS,EAAE,OAAO,CAAC;aAC/B,GACD,CACH,CAAC;IACJ,CAAC;CACF,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,YAAY,GAAU;IACjC,MAAM,EAAE,GAAG,EAAE;QACX,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAC9B,IAAI,CAAC,SAAS,CACZ;YACE,OAAO,EAAE,CAAC;YACV,KAAK,EAAE;gBACL,OAAO,EAAE;oBACP,OAAO,EAAE;wBACP,OAAO,EAAE;4BACP,OAAO,EAAE,8BAA8B;4BACvC,MAAM,EAAE,EAAE,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE;yBACzC;qBACF;oBACD,YAAY,EAAE;wBACZ,GAAG,EAAE;4BACH,OAAO,EAAE,gCAAgC;4BACzC,MAAM,EAAE;gCACN,QAAQ,EAAE,EAAE,GAAG,EAAE,EAAE,aAAa,EAAE,OAAO,EAAE,EAAE;gCAC7C,OAAO,EAAE;oCACP,WAAW,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE;oCAClC,cAAc,EAAE;wCACd,IAAI,EAAE,WAAW;wCACjB,IAAI,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,EAAE,iBAAiB,EAAE,EAAE;qCACzC;iCACF;6BACF;yBACF;qBACF;iBACF;aACF;SACF,EACD,IAAI,EACJ,CAAC,CACF,CACF,CAAC;QACF,OAAO,CACL,KAAC,OAAO,IACN,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,OAAO,EACjB,QAAQ,EAAC,MAAM,EACf,KAAK,EAAC,aAAa,EACnB,UAAU,QACV,YAAY,QACZ,MAAM,EAAE,GAAG,GACX,CACH,CAAC;IACJ,CAAC;CACF,CAAC;AAEF,+DAA+D;AAC/D,uBAAuB;AACvB,+DAA+D;AAE/D;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAU;IACvC,MAAM,EAAE,GAAG,EAAE;QACX,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAC9B,IAAI,CAAC,SAAS,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,CAAC,CAAC,CACnD,CAAC;QACF,OAAO,CACL,KAAC,OAAO,IACN,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,OAAO,EACjB,QAAQ,EAAC,MAAM,EACf,KAAK,EAAC,+BAA+B,EACrC,UAAU,QACV,UAAU,EAAE,sBAAsB,CAChC,OAAO,CAAC,gBAA2C,CACpD,EACD,MAAM,EAAE,GAAG,GACX,CACH,CAAC;IACJ,CAAC;CACF,CAAC;AAEF;;;;;GAKG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAU;IACrC,MAAM,EAAE,GAAG,EAAE;QACX,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC;QAC3E,OAAO,CACL,KAAC,OAAO,IACN,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,OAAO,EACjB,QAAQ,EAAC,MAAM,EACf,KAAK,EAAC,eAAe,EACrB,UAAU,QACV,UAAU,EAAE,yBAAyB,EAAE,EACvC,MAAM,EAAE,GAAG,GACX,CACH,CAAC;IACJ,CAAC;CACF,CAAC;AAEF;;;;;GAKG;AACH,MAAM,CAAC,MAAM,eAAe,GAAU;IACpC,MAAM,EAAE,GAAG,EAAE;QACX,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAC9B,IAAI,CAAC,SAAS,CAAC,EAAE,aAAa,EAAE,cAAc,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,CAAC,CAAC,CACzE,CAAC;QACF,OAAO,CACL,KAAC,OAAO,IACN,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,OAAO,EACjB,QAAQ,EAAC,MAAM,EACf,KAAK,EAAC,WAAW,EACjB,UAAU,QACV,UAAU,EAAE,kBAAkB,EAAE,EAChC,MAAM,EAAE,GAAG,GACX,CACH,CAAC;IACJ,CAAC;CACF,CAAC;AAEF;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAU;IACzC,MAAM,EAAE,GAAG,EAAE;QACX,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAC9B,IAAI,CAAC,SAAS,CACZ;YACE,aAAa,EAAE,WAAW;YAC1B,MAAM,EAAE,gBAAgB;YACxB,QAAQ,EAAE,cAAc;YACxB,SAAS,EAAE,iBAAiB;YAC5B,IAAI,EAAE,kBAAkB;SACzB,EACD,IAAI,EACJ,CAAC,CACF,CACF,CAAC;QACF,OAAO,CACL,KAAC,OAAO,IACN,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,OAAO,EACjB,QAAQ,EAAC,MAAM,EACf,KAAK,EAAC,uBAAuB,EAC7B,UAAU,QACV,MAAM,EAAE,GAAG,GACX,CACH,CAAC;IACJ,CAAC;CACF,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAU;IACvC,IAAI,EAAE,sBAAsB;IAC5B,MAAM,EAAE,GAAG,EAAE;QACX,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAC9B,IAAI,CAAC,SAAS,CACZ;YACE,OAAO,EAAE,CAAC;YACV,SAAS,EAAE,EAAE,IAAI,EAAE,cAAc,EAAE,KAAK,EAAE,KAAK,EAAE;YACjD,WAAW,EAAE,EAAE,UAAU,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,EAAE;YAC7C,KAAK,EAAE;gBACL,OAAO,EAAE;oBACP,GAAG,EAAE,EAAE;oBACP,OAAO,EAAE;wBACP,OAAO,EAAE,EAAE,OAAO,EAAE,8BAA8B,EAAE;qBACrD;oBACD,YAAY,EAAE;wBACZ,GAAG,EAAE;4BACH,OAAO,EAAE,gCAAgC;4BACzC,MAAM,EAAE;gCACN,QAAQ,EAAE;oCACR,GAAG,EAAE,EAAE,aAAa,EAAE,WAAW,EAAE;oCACnC,OAAO,EAAE,kBAAkB;iCAC5B;6BACF;yBACF;qBACF;iBACF;aACF;SACF,EACD,IAAI,EACJ,CAAC,CACF,CACF,CAAC;QAEF,MAAM,UAAU,GAAG,OAAO,CAAC,kBAAkB,CAAC,IAAI,CAAC,CAAC;QAEpD,OAAO,CACL,KAAC,OAAO,IACN,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,OAAO,EACjB,QAAQ,EAAC,MAAM,EACf,KAAK,EAAC,kCAAkC,EACxC,UAAU,QACV,UAAU,EAAE,sBAAsB,CAChC,OAAO,CAAC,gBAA2C,CACpD,EACD,QAAQ,EAAE,OAAO,CAAC,kBAAkB,EACpC,mBAAmB,EAAE,UAAU,CAAC,OAAO,EACvC,kBAAkB,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,aAAa,EAAE,MAAM,CAAC,EAClE,MAAM,EAAE,GAAG,GACX,CACH,CAAC;IACJ,CAAC;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,23 @@
+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;
+/**
+ * JSON Auto-Formatting - Badly formatted JSON gets auto-formatted
+ */
+export declare const JSONFormatting: Story;
+/**
+ * Bare Object Formatting - JS object literals without assignment
+ *
+ * This is common in docs where event results are shown as plain objects.
+ * Previously these were not indented because Prettier couldn't parse them.
+ */
+export declare const BareObjectFormatting: 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,cAAc,EAAE,KAK5B,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,oBAAoB,EAAE,KAsBlC,CAAC"}

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

@@ -0,0 +1,87 @@
+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',
+    },
+};
+/**
+ * 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',
+    },
+};
+/**
+ * Bare Object Formatting - JS object literals without assignment
+ *
+ * This is common in docs where event results are shown as plain objects.
+ * Previously these were not indented because Prettier couldn't parse them.
+ */
+export const BareObjectFormatting = {
+    args: {
+        code: `{
+name: 'promotion view',
+data: {
+name: 'Setting up tracking easily',
+category: 'analytics',
+},
+context: {
+test: ['engagement', 0]
+},
+globals: {
+language: 'en'
+},
+nested: [],
+consent: { functional: true },
+trigger: 'visible',
+entity: 'promotion',
+action: 'view',
+}`,
+        language: 'javascript',
+    },
+};
+//# 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,cAAc,GAAU;IACnC,IAAI,EAAE;QACJ,IAAI,EAAE,0HAA0H;QAChI,QAAQ,EAAE,MAAM;KACjB;CACF,CAAC;AAEF;;;;;GAKG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAU;IACzC,IAAI,EAAE;QACJ,IAAI,EAAE;;;;;;;;;;;;;;;;;EAiBR;QACE,QAAQ,EAAE,YAAY;KACvB;CACF,CAAC"}

package/dist/components/molecules/dropdown.d.ts

@@ -0,0 +1,68 @@
+import React from 'react';
+export 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;
+}
+export 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;
+}
+export 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>
+ */
+export declare function Dropdown({ trigger, isOpen, onToggle, children, align, ariaLabel, className, }: DropdownProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * DropdownItem - Menu item within a dropdown
+ *
+ * @example
+ * <DropdownItem onClick={handleClick}>Action</DropdownItem>
+ */
+export declare function DropdownItem({ children, onClick, disabled, variant, className, }: DropdownItemProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * DropdownDivider - Visual separator between menu items
+ *
+ * @example
+ * <DropdownDivider />
+ */
+export declare function DropdownDivider({ className }: DropdownDividerProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=dropdown.d.ts.map

package/dist/components/molecules/dropdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../../src/components/molecules/dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,aAAa;IAC5B,2CAA2C;IAC3C,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,4CAA4C;IAC5C,MAAM,EAAE,OAAO,CAAC;IAChB,qBAAqB;IACrB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,uBAAuB;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,mCAAmC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,iBAAiB;IAChC,mBAAmB;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,oBAAoB;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB;IACrB,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC/B,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,oBAAoB;IACnC,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,QAAQ,CAAC,EACvB,OAAO,EACP,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,KAAc,EACd,SAAS,EACT,SAAc,GACf,EAAE,aAAa,2CA8Bf;AAED;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,OAAO,EACP,QAAgB,EAChB,OAAmB,EACnB,SAAc,GACf,EAAE,iBAAiB,2CAYnB;AAED;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,EAAE,SAAc,EAAE,EAAE,oBAAoB,2CAOvE"}