@walkeros/explorer 3.0.0 → 3.0.2

package/dist/components/demos/DestinationDemo.stories.js

@@ -0,0 +1,53 @@
+import { DestinationDemo } from './DestinationDemo';
+import { captureDestinationPush } from '../../helpers/capture';
+import { getEvent } from '@walkeros/core';
+import destinationGtag from '@walkeros/web-destination-gtag';
+import * as examples from '@walkeros/web-destination-gtag/examples';
+/**
+ * DestinationDemo - Interactive destination testing component
+ *
+ * Tests destination implementations with real walkerOS events.
+ * Automatically captures destination.push() calls and displays output.
+ * Perfect for testing and debugging destination configurations.
+ */
+const meta = {
+    component: DestinationDemo,
+    title: 'Demos/DestinationDemo',
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'fullscreen',
+    },
+};
+export default meta;
+// Create documentation gtag destination with examples
+// Cast to generic Destination.Instance to avoid type conflicts with specific gtag types
+const documentationGtag = {
+    ...destinationGtag,
+    examples,
+};
+/**
+ * Default destination demo with gtag GA4 purchase event
+ */
+export const Default = {
+    args: {
+        destination: documentationGtag,
+        event: getEvent('order complete', {
+            data: {
+                id: 'T12345',
+                total: 99.99,
+                taxes: 9.0,
+                shipping: 5.99,
+                currency: 'EUR',
+            },
+        }),
+        mapping: examples.step.purchase.mapping,
+        settings: {
+            ga4: {
+                measurementId: 'G-XXXXXXXXXX',
+            },
+        },
+        generic: true,
+        fn: captureDestinationPush(documentationGtag, examples?.env?.push),
+    },
+};
+//# sourceMappingURL=DestinationDemo.stories.js.map

package/dist/components/demos/DestinationDemo.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DestinationDemo.stories.js","sourceRoot":"","sources":["../../../src/components/demos/DestinationDemo.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,sBAAsB,EAAE,MAAM,uBAAuB,CAAC;AAC/D,OAAO,EAAE,QAAQ,EAAkC,MAAM,gBAAgB,CAAC;AAC1E,OAAO,eAAe,MAAM,gCAAgC,CAAC;AAC7D,OAAO,KAAK,QAAQ,MAAM,yCAAyC,CAAC;AAEpE;;;;;;GAMG;AACH,MAAM,IAAI,GAAiC;IACzC,SAAS,EAAE,eAAe;IAC1B,KAAK,EAAE,uBAAuB;IAC9B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,MAAM,EAAE,YAAY;KACrB;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAGpB,sDAAsD;AACtD,wFAAwF;AACxF,MAAM,iBAAiB,GAAG;IACxB,GAAG,eAAe;IAClB,QAAQ;CAC0D,CAAC;AAErE;;GAEG;AACH,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,WAAW,EAAE,iBAAiB;QAC9B,KAAK,EAAE,QAAQ,CAAC,gBAAgB,EAAE;YAChC,IAAI,EAAE;gBACJ,EAAE,EAAE,QAAQ;gBACZ,KAAK,EAAE,KAAK;gBACZ,KAAK,EAAE,GAAG;gBACV,QAAQ,EAAE,IAAI;gBACd,QAAQ,EAAE,KAAK;aAChB;SACF,CAAC;QACF,OAAO,EAAE,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAuB;QACvD,QAAQ,EAAE;YACR,GAAG,EAAE;gBACH,aAAa,EAAE,cAAc;aAC9B;SACF;QACD,OAAO,EAAE,IAAI;QACb,EAAE,EAAE,sBAAsB,CAAC,iBAAiB,EAAE,QAAQ,EAAE,GAAG,EAAE,IAAI,CAAC;KACnE;CACF,CAAC"}

package/dist/components/demos/DestinationInitDemo.d.ts

@@ -0,0 +1,34 @@
+import type { Destination } from '@walkeros/core';
+export interface DestinationInitDemoProps {
+    destination: Destination.Instance;
+    settings?: unknown;
+    labelSettings?: string;
+    labelOutput?: string;
+}
+/**
+ * DestinationInitDemo - Interactive destination initialization testing component
+ *
+ * Automatically captures destination.init() calls and displays the output.
+ * The component auto-detects the destination's env from destination.examples.env.init.
+ *
+ * Props:
+ * - destination: Destination instance with examples.env.init export
+ * - settings: Initial destination-specific settings
+ * - labelSettings: Label for settings panel (default: 'Settings')
+ * - labelOutput: Label for output panel (default: 'Result')
+ *
+ * Example:
+ * ```tsx
+ * import destinationGtag from '@walkeros/web-destination-gtag';
+ * import { examples } from '@walkeros/web-destination-gtag';
+ *
+ * const destination = { ...destinationGtag, examples };
+ *
+ * <DestinationInitDemo
+ *   destination={destination}
+ *   settings={{ ga4: { measurementId: 'G-XXXXXXXXXX' } }}
+ * />
+ * ```
+ */
+export declare function DestinationInitDemo({ destination, settings: initialSettings, labelSettings, labelOutput, }: DestinationInitDemoProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DestinationInitDemo.d.ts.map

package/dist/components/demos/DestinationInitDemo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DestinationInitDemo.d.ts","sourceRoot":"","sources":["../../../src/components/demos/DestinationInitDemo.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAOlD,MAAM,WAAW,wBAAwB;IACvC,WAAW,EAAE,WAAW,CAAC,QAAQ,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,WAAW,EACX,QAAQ,EAAE,eAAoB,EAC9B,aAA0B,EAC1B,WAAsB,GACvB,EAAE,wBAAwB,2CAyE1B"}

package/dist/components/demos/DestinationInitDemo.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback, useEffect } from 'react';
+import { tryCatchAsync } from '@walkeros/core';
+import { startFlow } from '@walkeros/collector';
+import { CodeBox } from '../molecules/code-box';
+import { Grid } from '../atoms/grid';
+import { captureDestinationInit } from '../../helpers/capture';
+/**
+ * DestinationInitDemo - Interactive destination initialization testing component
+ *
+ * Automatically captures destination.init() calls and displays the output.
+ * The component auto-detects the destination's env from destination.examples.env.init.
+ *
+ * Props:
+ * - destination: Destination instance with examples.env.init export
+ * - settings: Initial destination-specific settings
+ * - labelSettings: Label for settings panel (default: 'Settings')
+ * - labelOutput: Label for output panel (default: 'Result')
+ *
+ * Example:
+ * ```tsx
+ * import destinationGtag from '@walkeros/web-destination-gtag';
+ * import { examples } from '@walkeros/web-destination-gtag';
+ *
+ * const destination = { ...destinationGtag, examples };
+ *
+ * <DestinationInitDemo
+ *   destination={destination}
+ *   settings={{ ga4: { measurementId: 'G-XXXXXXXXXX' } }}
+ * />
+ * ```
+ */
+export function DestinationInitDemo({ destination, settings: initialSettings = {}, labelSettings = 'Settings', labelOutput = 'Result', }) {
+    const [settingsInput, setSettingsInput] = useState(typeof initialSettings === 'string'
+        ? initialSettings
+        : JSON.stringify(initialSettings, null, 2));
+    const [output, setOutput] = useState('');
+    const executeInit = useCallback(async () => {
+        await tryCatchAsync(async () => {
+            const settingsData = JSON.parse(settingsInput);
+            // Build config
+            const config = {
+                settings: settingsData,
+            };
+            // Create minimal collector
+            const { collector } = await startFlow({});
+            // Build context for destination.init()
+            const context = {
+                id: 'demo',
+                collector,
+                config,
+                env: destination.env || {},
+                logger: collector.logger,
+            };
+            if (!destination.init) {
+                setOutput('No init method defined for this destination');
+                return;
+            }
+            // Auto-detect destination.examples.env.init (for init method)
+            const destinationEnv = destination.examples?.env?.init;
+            // Use captureDestinationInit to automatically capture output
+            const captureFn = captureDestinationInit(destination, destinationEnv);
+            const result = await captureFn(context);
+            setOutput(result);
+        }, (error) => setOutput(`Error: ${error}`))();
+    }, [settingsInput, destination]);
+    useEffect(() => {
+        const timeoutId = setTimeout(executeInit, 500);
+        return () => clearTimeout(timeoutId);
+    }, [executeInit]);
+    return (_jsxs(Grid, { columns: 2, rowHeight: "synced", children: [_jsx(CodeBox, { label: labelSettings, code: settingsInput, onChange: setSettingsInput, language: "json", showFormat: true, autoHeight: true }), _jsx(CodeBox, { label: labelOutput, code: output, disabled: true, language: "javascript", autoHeight: true })] }));
+}
+//# sourceMappingURL=DestinationInitDemo.js.map

package/dist/components/demos/DestinationInitDemo.js.map

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

package/dist/components/demos/DestinationInitDemo.stories.d.ts

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { DestinationInitDemo } from './DestinationInitDemo';
+/**
+ * DestinationInitDemo - Interactive destination initialization testing
+ *
+ * Tests destination.init() methods with configuration settings.
+ * Automatically captures initialization calls and displays output.
+ * Perfect for testing destination setup and configuration.
+ */
+declare const meta: Meta<typeof DestinationInitDemo>;
+export default meta;
+type Story = StoryObj<typeof DestinationInitDemo>;
+/**
+ * Default destination initialization demo with gtag GA4 settings
+ */
+export declare const Default: Story;
+//# sourceMappingURL=DestinationInitDemo.stories.d.ts.map

package/dist/components/demos/DestinationInitDemo.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DestinationInitDemo.stories.d.ts","sourceRoot":"","sources":["../../../src/components/demos/DestinationInitDemo.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAK5D;;;;;;GAMG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,mBAAmB,CAO1C,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,mBAAmB,CAAC,CAAC;AASlD;;GAEG;AACH,eAAO,MAAM,OAAO,EAAE,KASrB,CAAC"}

package/dist/components/demos/DestinationInitDemo.stories.js

@@ -0,0 +1,39 @@
+import { DestinationInitDemo } from './DestinationInitDemo';
+import destinationGtag from '@walkeros/web-destination-gtag';
+import * as examples from '@walkeros/web-destination-gtag/examples';
+/**
+ * DestinationInitDemo - Interactive destination initialization testing
+ *
+ * Tests destination.init() methods with configuration settings.
+ * Automatically captures initialization calls and displays output.
+ * Perfect for testing destination setup and configuration.
+ */
+const meta = {
+    component: DestinationInitDemo,
+    title: 'Demos/DestinationInitDemo',
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'fullscreen',
+    },
+};
+export default meta;
+// Create documentation gtag destination with examples
+// Cast to generic Destination.Instance to avoid type conflicts with specific gtag types
+const documentationGtag = {
+    ...destinationGtag,
+    examples,
+};
+/**
+ * Default destination initialization demo with gtag GA4 settings
+ */
+export const Default = {
+    args: {
+        destination: documentationGtag,
+        settings: {
+            ga4: {
+                measurementId: 'G-XXXXXXXXXX',
+            },
+        },
+    },
+};
+//# sourceMappingURL=DestinationInitDemo.stories.js.map

package/dist/components/demos/DestinationInitDemo.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DestinationInitDemo.stories.js","sourceRoot":"","sources":["../../../src/components/demos/DestinationInitDemo.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAE5D,OAAO,eAAe,MAAM,gCAAgC,CAAC;AAC7D,OAAO,KAAK,QAAQ,MAAM,yCAAyC,CAAC;AAEpE;;;;;;GAMG;AACH,MAAM,IAAI,GAAqC;IAC7C,SAAS,EAAE,mBAAmB;IAC9B,KAAK,EAAE,2BAA2B;IAClC,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,MAAM,EAAE,YAAY;KACrB;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAGpB,sDAAsD;AACtD,wFAAwF;AACxF,MAAM,iBAAiB,GAAG;IACxB,GAAG,eAAe;IAClB,QAAQ;CAC0D,CAAC;AAErE;;GAEG;AACH,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,WAAW,EAAE,iBAAiB;QAC9B,QAAQ,EAAE;YACR,GAAG,EAAE;gBACH,aAAa,EAAE,cAAc;aAC9B;SACF;KACF;CACF,CAAC"}

package/dist/components/demos/PromotionPlayground.d.ts

@@ -0,0 +1,30 @@
+import { type DestinationCode } from '../../helpers/destinations';
+export interface PromotionPlaygroundProps {
+    initialHtml?: string;
+    initialCss?: string;
+    initialJs?: string;
+    initialMapping?: string;
+    labelCode?: string;
+    labelPreview?: string;
+    labelEvents?: string;
+    labelMapping?: string;
+    labelResult?: string;
+    destination?: DestinationCode;
+}
+/**
+ * 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
+ */
+export declare function PromotionPlayground({ initialHtml, initialCss, initialJs, initialMapping, labelCode, labelPreview, labelEvents, labelMapping, labelResult, destination: destinationProp, }: PromotionPlaygroundProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=PromotionPlayground.d.ts.map

package/dist/components/demos/PromotionPlayground.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PromotionPlayground.d.ts","sourceRoot":"","sources":["../../../src/components/demos/PromotionPlayground.tsx"],"names":[],"mappings":"AAaA,OAAO,EAEL,KAAK,eAAe,EACrB,MAAM,4BAA4B,CAAC;AAEpC,MAAM,WAAW,wBAAwB;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,eAAe,CAAC;CAC/B;AA2PD;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,WAAyB,EACzB,UAAuB,EACvB,SAAc,EACd,cAA+B,EAC/B,SAAkB,EAClB,YAAwB,EACxB,WAAsB,EACtB,YAAwB,EACxB,WAAsB,EACtB,WAAW,EAAE,eAAe,GAC7B,EAAE,wBAAwB,2CAiK1B"}

package/dist/components/demos/PromotionPlayground.js

@@ -0,0 +1,366 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useRef, useCallback, useMemo, } from 'react';
+import { startFlow } from '@walkeros/collector';
+import { Grid } from '../atoms/grid';
+import { Preview } from '../molecules/preview';
+import { BrowserBox } from '../organisms/browser-box';
+import { CodeBox } from '../molecules/code-box';
+import { createGtagDestination, } from '../../helpers/destinations';
+const defaultHtml = `<div
+  data-elb="product"
+  data-elbaction="load:view"
+  data-elbcontext="stage:inspire"
+  class="product-card"
+>
+  <figure class="product-figure">
+    <div class="product-badge-container">
+      <div data-elb-product="badge:delicious" class="product-badge">delicious</div>
+    </div>
+  </figure>
+  <div class="product-body">
+    <h3 data-elb-product="name:#innerText" class="product-title">
+      Everyday Ruck Snack
+    </h3>
+    <div class="form-control">
+      <label class="form-label">Taste</label>
+      <select
+        data-elb-product="taste:#value"
+        class="form-select"
+      >
+        <option value="sweet">Sweet</option>
+        <option value="spicy">Spicy</option>
+      </select>
+    </div>
+    <p data-elb-product="price:2.50" class="product-price">
+      € 2.50 <span data-elb-product="old_price:3.14" class="product-old-price">€ 3.14</span>
+    </p>
+    <div data-elbcontext="stage:hooked" class="product-actions">
+      <button
+        data-elbaction="click:save"
+        class="btn btn-secondary"
+      >
+        Maybe later
+      </button>
+      <button
+        data-elbaction="click:add"
+        class="btn btn-primary"
+      >
+        Add to Cart
+      </button>
+    </div>
+  </div>
+</div>`;
+const defaultCss = `* {
+  box-sizing: border-box;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+}
+
+.product-card {
+  width: 100%;
+  max-width: 400px;
+  margin: 0 auto;
+  background: #ffffff;
+  border-radius: 16px;
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  overflow: hidden;
+}
+
+.product-figure {
+  position: relative;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 160px;
+  background:
+    linear-gradient(135deg, rgba(243, 244, 246, 0.9) 0%, rgba(229, 231, 235, 0.9) 100%),
+    repeating-linear-gradient(
+      45deg,
+      #f9fafb,
+      #f9fafb 10px,
+      #f3f4f6 10px,
+      #f3f4f6 20px
+    );
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.product-figure::before {
+  content: '🍟';
+  font-size: 8rem;
+  opacity: 0.8;
+}
+
+.product-badge-container {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+}
+
+.product-badge {
+  background: #01b5e2;
+  color: white;
+  padding: 0.25rem 0.75rem;
+  border-radius: 9999px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.025em;
+}
+
+.product-body {
+  padding: 1.5rem;
+}
+
+.product-title {
+  font-size: 1.125rem;
+  font-weight: 700;
+  margin: 0 0 1rem 0;
+  color: #111827;
+}
+
+.form-control {
+  margin-bottom: 1rem;
+}
+
+.form-label {
+  display: block;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #6b7280;
+  margin-bottom: 0.5rem;
+}
+
+.form-select {
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid #d1d5db;
+  border-radius: 8px;
+  font-size: 0.875rem;
+  color: #111827;
+  background: white;
+  cursor: pointer;
+  transition: border-color 0.2s;
+}
+
+.form-select:hover {
+  border-color: #9ca3af;
+}
+
+.form-select:focus {
+  outline: none;
+  border-color: #01b5e2;
+  box-shadow: 0 0 0 3px rgba(1, 181, 226, 0.1);
+}
+
+.product-price {
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: #111827;
+  margin: 0 0 1rem 0;
+}
+
+.product-old-price {
+  font-size: 1rem;
+  font-weight: 400;
+  color: #9ca3af;
+  text-decoration: line-through;
+  margin-left: 0.5rem;
+}
+
+.product-actions {
+  display: flex;
+  justify-content: space-between;
+  gap: 0.5rem;
+}
+
+.btn {
+  flex: 1;
+  padding: 0.75rem 1rem;
+  border: none;
+  border-radius: 8px;
+  font-size: 0.875rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s;
+  text-align: center;
+}
+
+.btn:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+
+.btn:active {
+  transform: translateY(0);
+}
+
+.btn-primary {
+  background: #01b5e2;
+  color: white;
+}
+
+.btn-primary:hover {
+  background: #0195b8;
+}
+
+.btn-secondary {
+  background: #ffffff;
+  color: #01b5e2;
+  border: 1px solid #01b5e2;
+}
+
+.btn-secondary:hover {
+  background: #01b5e2;
+  color: #ffffff;
+}`;
+const defaultMapping = `{
+  "product": {
+    "view": {
+      "name": "view_item",
+      "data": {
+        "map": {
+          "event": "name",
+          "price": "data.price",
+          "stage": "context.stage.0"
+        }
+      }
+    },
+    "add": {
+      "name": "add_to_cart",
+      "data": {
+        "map": {
+          "event": "event",
+          "price": "data.price",
+          "user": {
+            "consent": { "marketing": true },
+            "key": "user.session"
+          },
+          "isSale": {
+            "fn": "(e) => !!e.data.old_price"
+          }
+        }
+      }
+    },
+    "save": {
+      "data": {
+        "map": {
+          "event": "event",
+          "data": "data"
+        }
+      }
+    }
+  }
+}`;
+/**
+ * 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
+ */
+export function PromotionPlayground({ initialHtml = defaultHtml, initialCss = defaultCss, initialJs = '', initialMapping = defaultMapping, labelCode = 'Code', labelPreview = 'Preview', labelEvents = 'Events', labelMapping = 'Mapping', labelResult = 'Result', destination: destinationProp, }) {
+    // Memoize destination to prevent useEffect re-runs on every render
+    // Default prop values create new objects each render, breaking effect dependencies
+    const destination = useMemo(() => destinationProp ?? createGtagDestination(), [destinationProp]);
+    const [html, setHtml] = useState(initialHtml);
+    const [css, setCss] = useState(initialCss);
+    const [js, setJs] = useState(initialJs);
+    const [mappingInput, setMappingInput] = useState(initialMapping);
+    const [eventJson, setEventJson] = useState('// Click elements in the preview to see events');
+    const [outputString, setOutputString] = useState('// Click elements in the preview to see function call');
+    const collectorRef = useRef(null);
+    const elbRef = useRef(null);
+    const lastEventRef = useRef(null);
+    const [isReady, setIsReady] = useState(false);
+    // Initialize collector once on mount
+    useEffect(() => {
+        let mounted = true;
+        const init = async () => {
+            try {
+                const parsedMapping = JSON.parse(initialMapping);
+                const { collector, elb } = await startFlow({
+                    destinations: {
+                        // Capture raw events for display in Events column
+                        rawCapture: {
+                            code: {
+                                type: 'rawCapture',
+                                config: {},
+                                push: async (event) => {
+                                    if (!mounted)
+                                        return;
+                                    lastEventRef.current = event;
+                                    setEventJson(JSON.stringify(event, null, 2));
+                                },
+                            },
+                        },
+                        // Transform and display formatted output in Result column
+                        gtag: {
+                            code: destination,
+                            config: {
+                                mapping: parsedMapping,
+                            },
+                            env: {
+                                elb: (output) => {
+                                    if (!mounted)
+                                        return;
+                                    setOutputString(output);
+                                },
+                            },
+                        },
+                    },
+                    consent: { functional: true, marketing: true },
+                    user: { session: 'playground' },
+                });
+                if (!mounted)
+                    return;
+                collectorRef.current = collector;
+                elbRef.current = elb;
+                setIsReady(true);
+            }
+            catch {
+                // Initialization failed - component will show placeholder
+            }
+        };
+        init();
+        return () => {
+            mounted = false;
+            // Cleanup collector
+            if (collectorRef.current) {
+                // Sources cleanup would happen here if needed
+            }
+        };
+    }, [initialMapping, destination]);
+    // Handle mapping changes - update collector destination config
+    const handleMappingChange = useCallback((newMapping) => {
+        setMappingInput(newMapping);
+        // Debounced update to collector
+        const timeoutId = setTimeout(() => {
+            try {
+                const parsed = JSON.parse(newMapping);
+                // Update destination config directly
+                if (collectorRef.current?.destinations?.gtag?.config) {
+                    collectorRef.current.destinations.gtag.config.mapping = parsed;
+                }
+                // Re-process last event to update Result column
+                if (lastEventRef.current && collectorRef.current) {
+                    collectorRef.current.push(lastEventRef.current);
+                }
+            }
+            catch {
+                // Invalid JSON - don't update
+            }
+        }, 500);
+        return () => clearTimeout(timeoutId);
+    }, []);
+    return (_jsxs(Grid, { columns: 5, rowHeight: 600, children: [_jsx(BrowserBox, { label: labelCode, html: html, css: css, js: js, onHtmlChange: setHtml, onCssChange: setCss, onJsChange: setJs, showPreview: false, initialTab: "html", lineNumbers: false, wordWrap: true }), _jsx(Preview, { label: labelPreview, html: html, css: css, elb: isReady ? (elbRef.current ?? undefined) : undefined }), _jsx(CodeBox, { label: labelEvents, code: eventJson, onChange: setEventJson, language: "json", wordWrap: true }), _jsx(CodeBox, { label: labelMapping, code: mappingInput, onChange: handleMappingChange, language: "json", wordWrap: true }), _jsx(CodeBox, { label: labelResult, code: outputString, language: "javascript", disabled: true, wordWrap: true })] }));
+}
+//# sourceMappingURL=PromotionPlayground.js.map

package/dist/components/demos/PromotionPlayground.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PromotionPlayground.js","sourceRoot":"","sources":["../../../src/components/demos/PromotionPlayground.tsx"],"names":[],"mappings":";AAAA,OAAc,EACZ,QAAQ,EACR,SAAS,EACT,MAAM,EACN,WAAW,EACX,OAAO,GACR,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAChD,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACrC,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAChD,OAAO,EACL,qBAAqB,GAEtB,MAAM,4BAA4B,CAAC;AAepC,MAAM,WAAW,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA2Cb,CAAC;AAER,MAAM,UAAU,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmKjB,CAAC;AAEH,MAAM,cAAc,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqCrB,CAAC;AAEH;;;;;;;;;;;;;;GAcG;AACH,MAAM,UAAU,mBAAmB,CAAC,EAClC,WAAW,GAAG,WAAW,EACzB,UAAU,GAAG,UAAU,EACvB,SAAS,GAAG,EAAE,EACd,cAAc,GAAG,cAAc,EAC/B,SAAS,GAAG,MAAM,EAClB,YAAY,GAAG,SAAS,EACxB,WAAW,GAAG,QAAQ,EACtB,YAAY,GAAG,SAAS,EACxB,WAAW,GAAG,QAAQ,EACtB,WAAW,EAAE,eAAe,GACH;IACzB,mEAAmE;IACnE,mFAAmF;IACnF,MAAM,WAAW,GAAG,OAAO,CACzB,GAAG,EAAE,CAAC,eAAe,IAAI,qBAAqB,EAAE,EAChD,CAAC,eAAe,CAAC,CAClB,CAAC;IACF,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,WAAW,CAAC,CAAC;IAC9C,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,GAAG,QAAQ,CAAC,UAAU,CAAC,CAAC;IAC3C,MAAM,CAAC,EAAE,EAAE,KAAK,CAAC,GAAG,QAAQ,CAAC,SAAS,CAAC,CAAC;IACxC,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,cAAc,CAAC,CAAC;IACjE,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CACxC,gDAAgD,CACjD,CAAC;IACF,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAC9C,uDAAuD,CACxD,CAAC;IAEF,MAAM,YAAY,GAAG,MAAM,CAA4B,IAAI,CAAC,CAAC;IAC7D,MAAM,MAAM,GAAG,MAAM,CAAgB,IAAI,CAAC,CAAC;IAC3C,MAAM,YAAY,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IACzD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE9C,qCAAqC;IACrC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,OAAO,GAAG,IAAI,CAAC;QAEnB,MAAM,IAAI,GAAG,KAAK,IAAI,EAAE;YACtB,IAAI,CAAC;gBACH,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC;gBAEjD,MAAM,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,MAAM,SAAS,CAAC;oBACzC,YAAY,EAAE;wBACZ,kDAAkD;wBAClD,UAAU,EAAE;4BACV,IAAI,EAAE;gCACJ,IAAI,EAAE,YAAY;gCAClB,MAAM,EAAE,EAAE;gCACV,IAAI,EAAE,KAAK,EAAE,KAAqB,EAAE,EAAE;oCACpC,IAAI,CAAC,OAAO;wCAAE,OAAO;oCACrB,YAAY,CAAC,OAAO,GAAG,KAAK,CAAC;oCAC7B,YAAY,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC;gCAC/C,CAAC;6BACF;yBACF;wBACD,0DAA0D;wBAC1D,IAAI,EAAE;4BACJ,IAAI,EAAE,WAAW;4BACjB,MAAM,EAAE;gCACN,OAAO,EAAE,aAAa;6BACvB;4BACD,GAAG,EAAE;gCACH,GAAG,EAAE,CAAC,MAAc,EAAE,EAAE;oCACtB,IAAI,CAAC,OAAO;wCAAE,OAAO;oCACrB,eAAe,CAAC,MAAM,CAAC,CAAC;gCAC1B,CAAC;6BACF;yBACF;qBACF;oBACD,OAAO,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE;oBAC9C,IAAI,EAAE,EAAE,OAAO,EAAE,YAAY,EAAE;iBAChC,CAAC,CAAC;gBAEH,IAAI,CAAC,OAAO;oBAAE,OAAO;gBAErB,YAAY,CAAC,OAAO,GAAG,SAAS,CAAC;gBACjC,MAAM,CAAC,OAAO,GAAG,GAAG,CAAC;gBACrB,UAAU,CAAC,IAAI,CAAC,CAAC;YACnB,CAAC;YAAC,MAAM,CAAC;gBACP,0DAA0D;YAC5D,CAAC;QACH,CAAC,CAAC;QAEF,IAAI,EAAE,CAAC;QAEP,OAAO,GAAG,EAAE;YACV,OAAO,GAAG,KAAK,CAAC;YAChB,oBAAoB;YACpB,IAAI,YAAY,CAAC,OAAO,EAAE,CAAC;gBACzB,8CAA8C;YAChD,CAAC;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,cAAc,EAAE,WAAW,CAAC,CAAC,CAAC;IAElC,+DAA+D;IAC/D,MAAM,mBAAmB,GAAG,WAAW,CAAC,CAAC,UAAkB,EAAE,EAAE;QAC7D,eAAe,CAAC,UAAU,CAAC,CAAC;QAE5B,gCAAgC;QAChC,MAAM,SAAS,GAAG,UAAU,CAAC,GAAG,EAAE;YAChC,IAAI,CAAC;gBACH,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;gBACtC,qCAAqC;gBACrC,IAAI,YAAY,CAAC,OAAO,EAAE,YAAY,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oBACrD,YAAY,CAAC,OAAO,CAAC,YAAY,CAAC,IAAI,CAAC,MAAM,CAAC,OAAO,GAAG,MAAM,CAAC;gBACjE,CAAC;gBACD,gDAAgD;gBAChD,IAAI,YAAY,CAAC,OAAO,IAAI,YAAY,CAAC,OAAO,EAAE,CAAC;oBACjD,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;gBAClD,CAAC;YACH,CAAC;YAAC,MAAM,CAAC;gBACP,8BAA8B;YAChC,CAAC;QACH,CAAC,EAAE,GAAG,CAAC,CAAC;QAER,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;IACvC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,MAAC,IAAI,IAAC,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,GAAG,aAE9B,KAAC,UAAU,IACT,KAAK,EAAE,SAAS,EAChB,IAAI,EAAE,IAAI,EACV,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,EAAE,EACN,YAAY,EAAE,OAAO,EACrB,WAAW,EAAE,MAAM,EACnB,UAAU,EAAE,KAAK,EACjB,WAAW,EAAE,KAAK,EAClB,UAAU,EAAC,MAAM,EACjB,WAAW,EAAE,KAAK,EAClB,QAAQ,SACR,EAGF,KAAC,OAAO,IACN,KAAK,EAAE,YAAY,EACnB,IAAI,EAAE,IAAI,EACV,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,IAAI,SAAS,CAAC,CAAC,CAAC,CAAC,SAAS,GACxD,EAGF,KAAC,OAAO,IACN,KAAK,EAAE,WAAW,EAClB,IAAI,EAAE,SAAS,EACf,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAC,MAAM,EACf,QAAQ,SACR,EAGF,KAAC,OAAO,IACN,KAAK,EAAE,YAAY,EACnB,IAAI,EAAE,YAAY,EAClB,QAAQ,EAAE,mBAAmB,EAC7B,QAAQ,EAAC,MAAM,EACf,QAAQ,SACR,EAGF,KAAC,OAAO,IACN,KAAK,EAAE,WAAW,EAClB,IAAI,EAAE,YAAY,EAClB,QAAQ,EAAC,YAAY,EACrB,QAAQ,QACR,QAAQ,SACR,IACG,CACR,CAAC;AACJ,CAAC"}