@walkeros/explorer 3.0.1 → 3.0.2

package/dist/components/molecules/flow-map/FlowMap.transformers.stories.js

@@ -0,0 +1,117 @@
+import { FlowMap } from './FlowMap';
+const meta = {
+    title: 'Molecules/FlowMap/Transformers',
+    component: FlowMap,
+    parameters: {
+        layout: 'centered',
+    },
+};
+export default meta;
+/**
+ * Simple flow with a single pre-transformer between source and collector.
+ */
+export const SimplePreTransformer = {
+    args: {
+        sources: {
+            web: { label: 'Source', text: 'walker.js', next: 'validator' },
+        },
+        preTransformers: {
+            validator: { label: 'Validator', text: 'JSON Schema' },
+        },
+        collector: { label: 'Collector' },
+        destinations: {
+            ga4: { label: 'Destination', text: 'GA4' },
+        },
+    },
+};
+/**
+ * Full flow with both pre-transformers and post-transformers.
+ */
+export const BothPreAndPostTransformers = {
+    args: {
+        sources: {
+            web: { label: 'Source', text: 'walker.js', next: 'validator' },
+        },
+        preTransformers: {
+            validator: { label: 'Validator', next: 'enricher' },
+            enricher: { label: 'Enricher' },
+        },
+        collector: { label: 'Collector' },
+        postTransformers: {
+            consent: { label: 'Consent', next: 'redactor' },
+            redactor: { label: 'Redactor' },
+        },
+        destinations: {
+            ga4: { label: 'Destination', text: 'GA4', before: 'redactor' },
+        },
+    },
+};
+/**
+ * Full flow with stageBefore, stageAfter, and transformers.
+ */
+export const FullFlowWithContext = {
+    args: {
+        stageBefore: { label: 'Browser', text: 'Click event' },
+        sources: {
+            web: { label: 'Source', text: 'walker.js', next: 'validator' },
+        },
+        preTransformers: {
+            validator: { label: 'Validator' },
+        },
+        collector: { label: 'Collector' },
+        postTransformers: {
+            redactor: { label: 'Redactor' },
+        },
+        destinations: {
+            ga4: { label: 'Destination', text: 'GA4', before: 'redactor' },
+        },
+        stageAfter: { label: 'gtag', text: 'Reporting' },
+    },
+};
+/**
+ * Combined test: skip connections on BOTH left and right sides.
+ * Shows all 4 arrow cases: up/down on left, up/down on right.
+ * - Left: Web→Validator (down), App→Enricher (up)
+ * - Right: Consent→BigQuery (up), Redactor→GA4 (down)
+ */
+export const AllArrowDirections = {
+    args: {
+        sources: {
+            web: { label: 'Web', text: 'walker.js', next: 'validator' },
+            app: { label: 'App', text: 'SDK', next: 'enricher' },
+        },
+        preTransformers: {
+            validator: { label: 'Validator', next: 'enricher' },
+            enricher: { label: 'Enricher' },
+        },
+        collector: { label: 'Collector' },
+        postTransformers: {
+            consent: { label: 'Consent', next: 'redactor' },
+            redactor: { label: 'Redactor' },
+        },
+        destinations: {
+            bigquery: { label: 'BigQuery', before: 'consent' },
+            ga4: { label: 'GA4', before: 'redactor' },
+        },
+    },
+};
+/**
+ * Three pre-transformers in a chain.
+ */
+export const LongPreTransformerChain = {
+    args: {
+        sources: {
+            web: { label: 'Source', next: 'validator' },
+        },
+        preTransformers: {
+            validator: { label: 'Validator', next: 'enricher' },
+            enricher: { label: 'Enricher', next: 'filter' },
+            filter: { label: 'Filter' },
+        },
+        collector: { label: 'Collector' },
+        destinations: {
+            ga4: { label: 'Destination' },
+        },
+    },
+};
+//# sourceMappingURL=FlowMap.transformers.stories.js.map

package/dist/components/molecules/flow-map/FlowMap.transformers.stories.js.map

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

package/dist/components/molecules/flow-map/index.d.ts

@@ -0,0 +1,3 @@
+export { FlowMap } from './FlowMap';
+export type { FlowMapProps, FlowStageConfig, FlowSourceConfig, FlowTransformerConfig, FlowDestinationConfig, FlowMarkerPosition, FlowMarker, FlowLayoutConfig, } from './FlowMap';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/molecules/flow-map/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/flow-map/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EACV,YAAY,EACZ,eAAe,EACf,gBAAgB,EAChB,qBAAqB,EACrB,qBAAqB,EACrB,kBAAkB,EAClB,UAAU,EACV,gBAAgB,GACjB,MAAM,WAAW,CAAC"}

package/dist/components/molecules/flow-map/index.js

@@ -0,0 +1,2 @@
+export { FlowMap } from './FlowMap';
+//# sourceMappingURL=index.js.map

package/dist/components/molecules/flow-map/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/molecules/flow-map/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC"}

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

@@ -0,0 +1,23 @@
+import type { Elb } from '@walkeros/core';
+export interface PreviewProps {
+    html: string;
+    css?: string;
+    elb?: Elb.Fn;
+    label?: string;
+}
+/**
+ * Preview - HTML preview wrapped in a Box with highlight buttons
+ *
+ * Renders HTML in an isolated iframe with highlight buttons footer.
+ * When elb is provided, initializes walkerOS browser source in iframe
+ * that pushes events to the parent collector.
+ *
+ * @example
+ * // Read-only preview
+ * <Preview html={html} css={css} label="Preview" />
+ *
+ * // Interactive preview with event capture (elb from parent collector)
+ * <Preview html={html} css={css} elb={elb} label="Preview" />
+ */
+export declare function Preview({ html, css, elb, label, }: PreviewProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=preview.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"preview.d.ts","sourceRoot":"","sources":["../../../src/components/molecules/preview.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,GAAG,EAAwC,MAAM,gBAAgB,CAAC;AAgBhF,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,GAAG,CAAC,EAAE,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,OAAO,CAAC,EACtB,IAAI,EACJ,GAAQ,EACR,GAAG,EACH,KAAiB,GAClB,EAAE,YAAY,2CAuPd"}

package/dist/components/molecules/preview.js

@@ -0,0 +1,232 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useEffect, useRef, useCallback } from 'react';
+import { sourceBrowser, } from '@walkeros/web-source-browser';
+import { Box } from '../atoms/box';
+import { PreviewFooter } from '../atoms/preview-footer';
+/**
+ * Preview - HTML preview wrapped in a Box with highlight buttons
+ *
+ * Renders HTML in an isolated iframe with highlight buttons footer.
+ * When elb is provided, initializes walkerOS browser source in iframe
+ * that pushes events to the parent collector.
+ *
+ * @example
+ * // Read-only preview
+ * <Preview html={html} css={css} label="Preview" />
+ *
+ * // Interactive preview with event capture (elb from parent collector)
+ * <Preview html={html} css={css} elb={elb} label="Preview" />
+ */
+export function Preview({ html, css = '', elb, label = 'Preview', }) {
+    const [highlights, setHighlights] = useState(new Set());
+    const iframeRef = useRef(null);
+    const updateTimeoutRef = useRef(undefined);
+    const elbRef = useRef(elb);
+    const sourceRef = useRef(null);
+    // Keep elbRef in sync
+    useEffect(() => {
+        elbRef.current = elb;
+    }, [elb]);
+    const toggleHighlight = (type) => {
+        setHighlights((prev) => {
+            const next = new Set(prev);
+            if (next.has(type)) {
+                next.delete(type);
+            }
+            else {
+                next.add(type);
+            }
+            return next;
+        });
+    };
+    const autoMarkProperties = useCallback((container) => {
+        const entities = container.querySelectorAll('[data-elb]');
+        entities.forEach((entity) => {
+            const entityName = entity.getAttribute('data-elb');
+            if (!entityName)
+                return;
+            const propertySelector = `[data-elb-${entityName}]`;
+            entity.querySelectorAll(propertySelector).forEach((el) => {
+                el.setAttribute('data-elbproperty', '');
+            });
+        });
+    }, []);
+    useEffect(() => {
+        if (updateTimeoutRef.current) {
+            clearTimeout(updateTimeoutRef.current);
+        }
+        updateTimeoutRef.current = setTimeout(() => {
+            const iframe = iframeRef.current;
+            if (!iframe || !iframe.contentDocument)
+                return;
+            const doc = iframe.contentDocument;
+            const highlightClasses = Array.from(highlights)
+                .map((type) => `highlight-${type}`)
+                .join(' ');
+            doc.open();
+            doc.write(`
+        <!DOCTYPE html>
+        <html>
+          <head>
+            <meta charset="utf-8">
+            <style>
+              /* Reset */
+              * { margin: 0; padding: 0; box-sizing: border-box; }
+              body {
+                padding: 1.5rem;
+                background: #f9fafb;
+                color: #111827;
+                min-height: 100vh;
+              }
+
+              @media (prefers-color-scheme: dark) {
+                body {
+                  background: #1f2937;
+                  color: #e5e7eb;
+                }
+              }
+
+              /* User CSS */
+              ${css}
+
+              /* Highlight CSS - imported from highlight styles */
+              :root {
+                --highlight-globals: #4fc3f7cc;
+                --highlight-context: #ffbd44cc;
+                --highlight-entity: #00ca4ecc;
+                --highlight-property: #ff605ccc;
+                --highlight-action: #9900ffcc;
+              }
+
+              body.elb-highlight.highlight-entity [data-elb] {
+                box-shadow: 0 0 0 2px var(--highlight-entity);
+              }
+
+              body.elb-highlight.highlight-context [data-elbcontext] {
+                box-shadow: 0 0 0 2px var(--highlight-context);
+              }
+
+              body.elb-highlight.highlight-property [data-elbproperty] {
+                box-shadow: 0 0 0 2px var(--highlight-property);
+              }
+
+              body.elb-highlight.highlight-action [data-elbaction] {
+                box-shadow: 0 0 0 2px var(--highlight-action);
+              }
+
+              /* Combined highlights */
+              body.elb-highlight.highlight-entity.highlight-action [data-elb][data-elbaction] {
+                box-shadow: 0 0 0 2px var(--highlight-action), 0 0 0 4px var(--highlight-entity);
+              }
+
+              body.elb-highlight.highlight-entity.highlight-context [data-elb][data-elbcontext] {
+                box-shadow: 0 0 0 2px var(--highlight-entity), 0 0 0 4px var(--highlight-context);
+              }
+
+              body.elb-highlight.highlight-action.highlight-context [data-elbaction][data-elbcontext] {
+                box-shadow: 0 0 0 2px var(--highlight-action), 0 0 0 4px var(--highlight-context);
+              }
+            </style>
+          </head>
+          <body class="elb-highlight ${highlightClasses}">
+            ${html}
+          </body>
+        </html>
+      `);
+            doc.close();
+            autoMarkProperties(doc);
+            // Initialize browser source in iframe with parent's elb
+            if (elbRef.current && iframe.contentWindow && iframe.contentDocument) {
+                setTimeout(async () => {
+                    // Cleanup previous source instance
+                    if (sourceRef.current) {
+                        try {
+                            await sourceRef.current.instance.destroy?.(sourceRef.current.destroyContext);
+                        }
+                        catch {
+                            // Ignore cleanup errors
+                        }
+                    }
+                    try {
+                        if (!iframe.contentWindow ||
+                            !iframe.contentDocument ||
+                            !elbRef.current) {
+                            return;
+                        }
+                        // Create a noop logger that satisfies the Logger.Instance interface
+                        const createNoopLogger = () => ({
+                            error: () => { },
+                            warn: () => { },
+                            info: () => { },
+                            debug: () => { },
+                            json: () => { },
+                            throw: (msg) => {
+                                throw msg instanceof Error ? msg : new Error(msg);
+                            },
+                            scope: () => createNoopLogger(),
+                        });
+                        const noopLogger = createNoopLogger();
+                        // Create a noop push function for env
+                        const noopPush = async () => ({
+                            ok: true,
+                            destination: {},
+                        });
+                        // Initialize browser source directly with parent's elb
+                        // This connects the iframe's DOM events to the parent collector
+                        const config = {
+                            settings: {
+                                pageview: false,
+                                prefix: 'data-elb',
+                                elb: 'elb',
+                                elbLayer: 'elbLayer',
+                                // Use body as scope - trigger.ts compares `scope !== document` against
+                                // main page's document, so iframe.contentDocument fails the Element cast
+                                scope: iframe.contentDocument.body,
+                            },
+                        };
+                        const env = {
+                            elb: elbRef.current,
+                            push: noopPush,
+                            command: async () => ({ ok: true, destination: {} }),
+                            logger: noopLogger,
+                            window: iframe.contentWindow,
+                            document: iframe.contentDocument,
+                        };
+                        const instance = await sourceBrowser({
+                            id: 'preview',
+                            collector: {}, // Not used when elb is provided directly
+                            logger: noopLogger,
+                            setIngest: async () => { },
+                            setRespond: () => { },
+                            config,
+                            env,
+                        });
+                        sourceRef.current = {
+                            instance,
+                            destroyContext: {
+                                id: 'preview',
+                                config,
+                                env,
+                                logger: noopLogger,
+                            },
+                        };
+                    }
+                    catch {
+                        // sourceBrowser init failed - events won't be captured
+                    }
+                }, 50);
+            }
+        }, 200);
+        return () => {
+            if (updateTimeoutRef.current) {
+                clearTimeout(updateTimeoutRef.current);
+            }
+            // Cleanup source
+            if (sourceRef.current) {
+                sourceRef.current.instance.destroy?.(sourceRef.current.destroyContext);
+            }
+        };
+    }, [html, css, highlights, autoMarkProperties, elb]);
+    return (_jsx(Box, { header: label, footer: _jsx(PreviewFooter, { highlights: highlights, onToggle: toggleHighlight }), children: _jsx("div", { className: "elb-preview-content", children: _jsx("iframe", { ref: iframeRef, className: "elb-preview-iframe", title: "HTML Preview" }) }) }));
+}
+//# sourceMappingURL=preview.js.map

package/dist/components/molecules/preview.js.map

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

package/dist/components/molecules/preview.stories.d.ts

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Preview } from './preview';
+/**
+ * Preview - HTML preview component with data attribute highlighting
+ *
+ * Renders HTML in an isolated iframe with buttons to highlight different
+ * walkerOS data attributes (context, entity, property, action).
+ * Optionally captures events when onEvent callback is provided.
+ */
+declare const meta: Meta<typeof Preview>;
+export default meta;
+type Story = StoryObj<typeof Preview>;
+/**
+ * Default preview with product card HTML and styling
+ *
+ * Features highlight buttons to show walkerOS data attributes:
+ * - Context (purple)
+ * - Entity (blue)
+ * - Property (green)
+ * - Action (orange)
+ */
+export declare const Default: Story;
+//# sourceMappingURL=preview.stories.d.ts.map

package/dist/components/molecules/preview.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"preview.stories.d.ts","sourceRoot":"","sources":["../../../src/components/molecules/preview.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC;;;;;;GAMG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,OAAO,CAO9B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,OAAO,CAAC,CAAC;AA4JtC;;;;;;;;GAQG;AACH,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC"}

package/dist/components/molecules/preview.stories.js

@@ -0,0 +1,186 @@
+import { Preview } from './preview';
+/**
+ * Preview - HTML preview component with data attribute highlighting
+ *
+ * Renders HTML in an isolated iframe with buttons to highlight different
+ * walkerOS data attributes (context, entity, property, action).
+ * Optionally captures events when onEvent callback is provided.
+ */
+const meta = {
+    component: Preview,
+    title: 'Molecules/Preview',
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'padded',
+    },
+};
+export default meta;
+const sampleHtml = `<div
+  data-elb="product"
+  data-elbaction="load:view"
+  data-elbcontext="stage:inspire"
+  class="product-card">
+  <figure class="product-image">
+    <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="product-form-control">
+      <label class="product-label">Taste</label>
+      <select
+        data-elb-product="taste:#value"
+        class="product-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="product-button product-button-secondary">
+        Add to Wishlist
+      </button>
+      <button data-elbaction="click:add" class="product-button product-button-primary">
+        Add to Cart
+      </button>
+    </div>
+  </div>
+</div>`;
+const sampleCss = `
+* {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+}
+
+.product-card {
+  width: 288px;
+  background: white;
+  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+  border-radius: 8px;
+  overflow: hidden;
+  margin: 0 auto;
+}
+
+.product-image {
+  position: relative;
+  height: 200px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  margin: 0;
+}
+
+.product-badge-container {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+}
+
+.product-badge {
+  background: #01b5e2;
+  color: white;
+  padding: 4px 12px;
+  border-radius: 12px;
+  font-size: 0.75rem;
+  font-weight: 600;
+}
+
+.product-body {
+  padding: 16px;
+}
+
+.product-title {
+  font-size: 1.125rem;
+  font-weight: 600;
+  margin: 0 0 16px 0;
+  color: #1f2937;
+}
+
+.product-form-control {
+  margin-bottom: 16px;
+}
+
+.product-label {
+  display: block;
+  font-size: 0.875rem;
+  font-weight: 500;
+  margin-bottom: 4px;
+  color: #374151;
+}
+
+.product-select {
+  width: 100%;
+  padding: 8px;
+  border: 1px solid #d1d5db;
+  border-radius: 4px;
+  font-size: 0.875rem;
+}
+
+.product-price {
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: #1f2937;
+  margin: 0 0 16px 0;
+}
+
+.product-old-price {
+  font-size: 0.875rem;
+  color: #9ca3af;
+  text-decoration: line-through;
+  font-weight: 400;
+  margin-left: 8px;
+}
+
+.product-actions {
+  display: flex;
+  gap: 8px;
+}
+
+.product-button {
+  flex: 1;
+  padding: 10px;
+  border: none;
+  border-radius: 6px;
+  font-weight: 600;
+  font-size: 0.875rem;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.product-button-secondary {
+  background: #f3f4f6;
+  color: #4b5563;
+}
+
+.product-button-secondary:hover {
+  background: #e5e7eb;
+}
+
+.product-button-primary {
+  background: #3b82f6;
+  color: white;
+}
+
+.product-button-primary:hover {
+  background: #2563eb;
+}
+`;
+/**
+ * Default preview with product card HTML and styling
+ *
+ * Features highlight buttons to show walkerOS data attributes:
+ * - Context (purple)
+ * - Entity (blue)
+ * - Property (green)
+ * - Action (orange)
+ */
+export const Default = {
+    args: {
+        label: 'Preview',
+        html: sampleHtml,
+        css: sampleCss,
+    },
+};
+//# sourceMappingURL=preview.stories.js.map

package/dist/components/molecules/preview.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"preview.stories.js","sourceRoot":"","sources":["../../../src/components/molecules/preview.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC;;;;;;GAMG;AACH,MAAM,IAAI,GAAyB;IACjC,SAAS,EAAE,OAAO;IAClB,KAAK,EAAE,mBAAmB;IAC1B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,MAAM,EAAE,QAAQ;KACjB;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAGpB,MAAM,UAAU,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAmCZ,CAAC;AAER,MAAM,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmHjB,CAAC;AAEF;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,UAAU;QAChB,GAAG,EAAE,SAAS;KACf;CACF,CAAC"}

package/dist/components/molecules/property-table.d.ts

@@ -0,0 +1,7 @@
+import type { RJSFSchema } from '@rjsf/utils';
+export interface PropertyTableProps {
+    schema: RJSFSchema;
+    className?: string;
+}
+export declare function PropertyTable({ schema, className }: PropertyTableProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=property-table.d.ts.map

package/dist/components/molecules/property-table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"property-table.d.ts","sourceRoot":"","sources":["../../../src/components/molecules/property-table.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE9C,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,UAAU,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAwKD,wBAAgB,aAAa,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,kBAAkB,2CA6HtE"}