@walkeros/explorer 0.3.1 → 1.0.0

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

@@ -0,0 +1,587 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FlowMap } from './FlowMap';
+const meta = {
+    title: 'Molecules/FlowMap',
+    component: FlowMap,
+    tags: ['autodocs'],
+    decorators: [
+        (Story) => (_jsx("div", { className: "elb-explorer", "data-theme": "dark", style: { padding: '20px', background: '#1f2937' }, children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+// Layout presets for comparison
+const layouts = {
+    compact: {
+        labelSize: 12,
+        labelWeight: '600',
+        textSize: 11,
+        textWeight: 'normal',
+        boxHeight: 45,
+        descriptionSize: 13,
+    },
+    standard: {
+        labelSize: 13,
+        labelWeight: '600',
+        textSize: 12,
+        textWeight: 'normal',
+        boxHeight: 50,
+        descriptionSize: 13,
+    },
+    prominent: {
+        labelSize: 14,
+        labelWeight: '600',
+        textSize: 11,
+        textWeight: 'normal',
+        boxHeight: 50,
+        descriptionSize: 13,
+    },
+    balanced: {
+        labelSize: 13,
+        labelWeight: '600',
+        textSize: 13,
+        textWeight: 'normal',
+        boxHeight: 55,
+        descriptionSize: 13,
+    },
+    withDesc: {
+        labelSize: 13,
+        labelWeight: '600',
+        textSize: 12,
+        textWeight: 'normal',
+        boxHeight: 50,
+        descriptionSize: 13,
+    },
+};
+/**
+ * Default state - Soft Pastels palette (mint → sky → lavender)
+ */
+export const Default = {
+    args: {},
+};
+/**
+ * With custom labels and text
+ */
+export const WithLabels = {
+    args: {
+        sources: { default: { label: 'Website', text: 'walker.js' } },
+        collector: { label: 'walkerOS', text: 'Node' },
+        destinations: { default: { label: 'GA4', text: 'Analytics' } },
+    },
+};
+/**
+ * Layout Comparison - 5 typography/spacing variations
+ */
+export const LayoutComparison = {
+    render: () => (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '28px' }, children: [_jsx("div", { style: { color: '#6b7280', fontSize: '12px', marginBottom: '4px' }, children: "Compare typography and spacing variations. All use same content." }), _jsxs("div", { children: [_jsxs("h3", { style: { color: '#9ca3af', marginBottom: '8px', fontSize: '14px' }, children: ["1. Compact", _jsx("span", { style: { color: '#6b7280', fontSize: '11px', marginLeft: '12px' }, children: "label: 12px/600, text: 11px, box: 45px" })] }), _jsx("div", { className: "elb-explorer", "data-theme": "dark", style: {
+                            background: '#1f2937',
+                            padding: '12px',
+                            borderRadius: '8px',
+                        }, children: _jsx(FlowMap, { layout: layouts.compact, sources: { default: { label: 'Source', text: 'walker.js' } }, collector: { label: 'Collector', text: 'Node' }, destinations: { default: { label: 'Destination', text: 'GA4' } } }) })] }), _jsxs("div", { children: [_jsxs("h3", { style: { color: '#9ca3af', marginBottom: '8px', fontSize: '14px' }, children: ["2. Standard", _jsx("span", { style: { color: '#6b7280', fontSize: '11px', marginLeft: '12px' }, children: "label: 13px/600, text: 12px, box: 50px" })] }), _jsx("div", { className: "elb-explorer", "data-theme": "dark", style: {
+                            background: '#1f2937',
+                            padding: '12px',
+                            borderRadius: '8px',
+                        }, children: _jsx(FlowMap, { layout: layouts.standard, sources: { default: { label: 'Source', text: 'walker.js' } }, collector: { label: 'Collector', text: 'Node' }, destinations: { default: { label: 'Destination', text: 'GA4' } } }) })] }), _jsxs("div", { children: [_jsxs("h3", { style: { color: '#9ca3af', marginBottom: '8px', fontSize: '14px' }, children: ["3. Prominent", _jsx("span", { style: { color: '#6b7280', fontSize: '11px', marginLeft: '12px' }, children: "label: 14px/600, text: 11px, box: 50px" })] }), _jsx("div", { className: "elb-explorer", "data-theme": "dark", style: {
+                            background: '#1f2937',
+                            padding: '12px',
+                            borderRadius: '8px',
+                        }, children: _jsx(FlowMap, { layout: layouts.prominent, sources: { default: { label: 'Source', text: 'walker.js' } }, collector: { label: 'Collector', text: 'Node' }, destinations: { default: { label: 'Destination', text: 'GA4' } } }) })] }), _jsxs("div", { children: [_jsxs("h3", { style: { color: '#9ca3af', marginBottom: '8px', fontSize: '14px' }, children: ["4. Balanced", _jsx("span", { style: { color: '#6b7280', fontSize: '11px', marginLeft: '12px' }, children: "label: 13px/600, text: 13px, box: 55px" })] }), _jsx("div", { className: "elb-explorer", "data-theme": "dark", style: {
+                            background: '#1f2937',
+                            padding: '12px',
+                            borderRadius: '8px',
+                        }, children: _jsx(FlowMap, { layout: layouts.balanced, sources: { default: { label: 'Source', text: 'walker.js' } }, collector: { label: 'Collector', text: 'Node' }, destinations: { default: { label: 'Destination', text: 'GA4' } } }) })] }), _jsxs("div", { children: [_jsxs("h3", { style: { color: '#9ca3af', marginBottom: '8px', fontSize: '14px' }, children: ["5. With Description", _jsx("span", { style: { color: '#6b7280', fontSize: '11px', marginLeft: '12px' }, children: "label: 13px/600, text: 12px, box: 50px + description below" })] }), _jsx("div", { className: "elb-explorer", "data-theme": "dark", style: {
+                            background: '#1f2937',
+                            padding: '12px',
+                            borderRadius: '8px',
+                        }, children: _jsx(FlowMap, { layout: layouts.withDesc, sources: {
+                                default: {
+                                    label: 'Source',
+                                    text: 'walker.js',
+                                    description: 'Data origin',
+                                },
+                            }, collector: {
+                                label: 'Collector',
+                                text: 'Node',
+                                description: 'Processing',
+                            }, destinations: {
+                                default: {
+                                    label: 'Destination',
+                                    text: 'GA4',
+                                    description: 'Analytics',
+                                },
+                            } }) })] })] })),
+    decorators: [
+        (Story) => (_jsx("div", { style: { padding: '20px', background: '#111827' }, children: _jsx(Story, {}) })),
+    ],
+};
+/**
+ * Responsive behavior - scales down in narrow containers
+ */
+export const ResponsiveDemo = {
+    args: {},
+    decorators: [
+        (Story) => (_jsx("div", { className: "elb-explorer", "data-theme": "dark", style: { padding: '20px', background: '#1f2937' }, children: _jsx("div", { style: {
+                    maxWidth: '350px',
+                    border: '1px dashed #4b5563',
+                    padding: '8px',
+                }, children: _jsx(Story, {}) }) })),
+    ],
+};
+/**
+ * Rich content and link examples
+ */
+export const RichContentExamples = {
+    render: () => (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '24px' }, children: [_jsxs("div", { children: [_jsx("h3", { style: { color: '#9ca3af', marginBottom: '8px', fontSize: '14px' }, children: "Clickable boxes (default - each box links to its docs)" }), _jsx("div", { className: "elb-explorer", "data-theme": "dark", style: {
+                            background: '#1f2937',
+                            padding: '12px',
+                            borderRadius: '8px',
+                        }, children: _jsx(FlowMap, { sources: { default: { label: 'Source', text: 'walker.js' } }, collector: { label: 'Collector', text: 'Node' }, destinations: { default: { label: 'Destination', text: 'GA4' } } }) })] }), _jsxs("div", { children: [_jsx("h3", { style: { color: '#9ca3af', marginBottom: '8px', fontSize: '14px' }, children: "Rich HTML text (ReactNode with formatting)" }), _jsx("div", { className: "elb-explorer", "data-theme": "dark", style: {
+                            background: '#1f2937',
+                            padding: '12px',
+                            borderRadius: '8px',
+                        }, children: _jsx(FlowMap, { boxHeight: 70, descriptionHeight: 50, sources: {
+                                default: {
+                                    label: 'Source',
+                                    text: (_jsxs("span", { children: [_jsx("a", { href: "/docs/walker-js", style: { color: 'inherit' }, children: "walker.js" }), ' ', "v2", _jsx("br", {}), "Browser SDK"] })),
+                                    description: 'Client-side tracking with automatic page view detection',
+                                    link: false, // Disable box link since text has its own link
+                                },
+                            }, collector: {
+                                label: 'Collector',
+                                text: (_jsxs("span", { children: [_jsx("strong", { children: "Node" }), " server", _jsx("br", {}), "with validation"] })),
+                                description: 'Server-side processing and event enrichment',
+                            }, destinations: {
+                                default: {
+                                    label: 'Destination',
+                                    text: (_jsxs("span", { children: ["GA4 + BigQuery", _jsx("br", {}), "data warehouse"] })),
+                                    description: 'Analytics and raw data storage for analysis',
+                                    link: '/docs/destinations/bigquery', // Custom URL
+                                },
+                            } }) })] }), _jsxs("div", { children: [_jsx("h3", { style: { color: '#9ca3af', marginBottom: '8px', fontSize: '14px' }, children: "Non-clickable boxes (link: false)" }), _jsx("div", { className: "elb-explorer", "data-theme": "dark", style: {
+                            background: '#1f2937',
+                            padding: '12px',
+                            borderRadius: '8px',
+                        }, children: _jsx(FlowMap, { sources: {
+                                default: { label: 'Source', text: 'walker.js', link: false },
+                            }, collector: { label: 'Collector', text: 'Node', link: false }, destinations: {
+                                default: { label: 'Destination', text: 'GA4', link: false },
+                            } }) })] })] })),
+    decorators: [
+        (Story) => (_jsx("div", { style: { padding: '20px', background: '#111827' }, children: _jsx(Story, {}) })),
+    ],
+};
+/**
+ * Stage highlight variations - use highlight:false to dim stages
+ */
+export const HighlightVariations = {
+    render: () => (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '24px' }, children: [_jsxs("div", { children: [_jsx("h3", { style: { color: '#9ca3af', marginBottom: '8px', fontSize: '14px' }, children: "1. All stages highlighted (default)" }), _jsx("div", { className: "elb-explorer", "data-theme": "dark", style: {
+                            background: '#1f2937',
+                            padding: '12px',
+                            borderRadius: '8px',
+                        }, children: _jsx(FlowMap, { sources: { default: { label: 'Source', text: 'walker.js' } }, collector: { label: 'Collector', text: 'Node' }, destinations: { default: { label: 'Destination', text: 'GA4' } } }) })] }), _jsxs("div", { children: [_jsx("h3", { style: { color: '#9ca3af', marginBottom: '8px', fontSize: '14px' }, children: "2. Only destination highlighted" }), _jsx("div", { className: "elb-explorer", "data-theme": "dark", style: {
+                            background: '#1f2937',
+                            padding: '12px',
+                            borderRadius: '8px',
+                        }, children: _jsx(FlowMap, { sources: {
+                                default: {
+                                    label: 'Source',
+                                    text: 'walker.js',
+                                    highlight: false,
+                                },
+                            }, collector: { label: 'Collector', text: 'Node', highlight: false }, destinations: { default: { label: 'Destination', text: 'GA4' } } }) })] }), _jsxs("div", { children: [_jsx("h3", { style: { color: '#9ca3af', marginBottom: '8px', fontSize: '14px' }, children: "3. Collector and destination highlighted" }), _jsx("div", { className: "elb-explorer", "data-theme": "dark", style: {
+                            background: '#1f2937',
+                            padding: '12px',
+                            borderRadius: '8px',
+                        }, children: _jsx(FlowMap, { sources: {
+                                default: {
+                                    label: 'Source',
+                                    text: 'walker.js',
+                                    highlight: false,
+                                },
+                            }, collector: { label: 'Collector', text: 'Node' }, destinations: { default: { label: 'Destination', text: 'GA4' } } }) })] })] })),
+    decorators: [
+        (Story) => (_jsx("div", { style: { padding: '20px', background: '#111827' }, children: _jsx(Story, {}) })),
+    ],
+};
+/**
+ * Marker examples - numbered callouts on stages and arrows
+ */
+export const MarkerExamples = {
+    render: () => (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '24px' }, children: [_jsxs("div", { children: [_jsx("h3", { style: { color: '#9ca3af', marginBottom: '8px', fontSize: '14px' }, children: "Single marker on source" }), _jsx("div", { className: "elb-explorer", "data-theme": "dark", style: {
+                            background: '#1f2937',
+                            padding: '12px',
+                            borderRadius: '8px',
+                        }, children: _jsx(FlowMap, { sources: { default: { label: 'Source', text: 'walker.js' } }, collector: { label: 'Collector', text: 'Node' }, destinations: { default: { label: 'Destination', text: 'GA4' } }, markers: [{ position: 'source' }] }) })] }), _jsxs("div", { children: [_jsx("h3", { style: { color: '#9ca3af', marginBottom: '8px', fontSize: '14px' }, children: "Multiple markers with auto-numbering" }), _jsx("div", { className: "elb-explorer", "data-theme": "dark", style: {
+                            background: '#1f2937',
+                            padding: '12px',
+                            borderRadius: '8px',
+                        }, children: _jsx(FlowMap, { sources: { default: { label: 'Source', text: 'walker.js' } }, collector: { label: 'Collector', text: 'Node' }, destinations: { default: { label: 'Destination', text: 'GA4' } }, markers: [
+                                { position: 'incoming' },
+                                { position: 'source' },
+                                { position: 'source-collector' },
+                                { position: 'collector' },
+                                { position: 'destination' },
+                            ] }) })] }), _jsxs("div", { children: [_jsx("h3", { style: { color: '#9ca3af', marginBottom: '8px', fontSize: '14px' }, children: "Custom marker text" }), _jsx("div", { className: "elb-explorer", "data-theme": "dark", style: {
+                            background: '#1f2937',
+                            padding: '12px',
+                            borderRadius: '8px',
+                        }, children: _jsx(FlowMap, { sources: { default: { label: 'Source', text: 'walker.js' } }, collector: { label: 'Collector', text: 'Node' }, destinations: { default: { label: 'Destination', text: 'GA4' } }, markers: [
+                                { position: 'source-left', id: 'A' },
+                                { position: 'collector-right', id: 'B' },
+                                { position: 'outgoing', id: '!' },
+                            ] }) })] }), _jsxs("div", { children: [_jsx("h3", { style: { color: '#9ca3af', marginBottom: '8px', fontSize: '14px' }, children: "All marker positions" }), _jsx("div", { className: "elb-explorer", "data-theme": "dark", style: {
+                            background: '#1f2937',
+                            padding: '12px',
+                            borderRadius: '8px',
+                        }, children: _jsx(FlowMap, { sources: { default: { label: 'Source', text: 'walker.js' } }, collector: { label: 'Collector', text: 'Node' }, destinations: { default: { label: 'Destination', text: 'GA4' } }, markers: [
+                                { position: 'incoming', id: 'in' },
+                                { position: 'source-left', id: 'SL' },
+                                { position: 'source-right', id: 'SR' },
+                                { position: 'source-collector', id: 'SC' },
+                                { position: 'collector-left', id: 'CL' },
+                                { position: 'collector-right', id: 'CR' },
+                                { position: 'collector-destination', id: 'CD' },
+                                { position: 'destination-left', id: 'DL' },
+                                { position: 'destination-right', id: 'DR' },
+                                { position: 'outgoing', id: 'out' },
+                            ] }) })] })] })),
+    decorators: [
+        (Story) => (_jsx("div", { style: { padding: '20px', background: '#111827' }, children: _jsx(Story, {}) })),
+    ],
+};
+/**
+ * Markers with legend - shows markers and legend text below diagram
+ */
+export const MarkersWithLegend = {
+    render: () => (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '24px' }, children: [_jsxs("div", { children: [_jsx("h3", { style: { color: '#9ca3af', marginBottom: '8px', fontSize: '14px' }, children: "Markers with legend descriptions" }), _jsx("div", { className: "elb-explorer", "data-theme": "dark", style: {
+                            background: '#1f2937',
+                            padding: '12px',
+                            borderRadius: '8px',
+                        }, children: _jsx(FlowMap, { sources: { default: { label: 'Source', text: 'walker.js' } }, collector: { label: 'Collector', text: 'Node' }, destinations: { default: { label: 'Destination', text: 'GA4' } }, markers: [
+                                {
+                                    position: 'source',
+                                    id: '1',
+                                    text: 'Events are tracked on user interactions',
+                                },
+                                {
+                                    position: 'source-collector',
+                                    id: '2',
+                                    text: 'Data is validated and sent to the collector server',
+                                },
+                                {
+                                    position: 'collector',
+                                    id: '3',
+                                    text: 'Events are processed, enriched, and transformed',
+                                },
+                                {
+                                    position: 'destination',
+                                    id: '4',
+                                    text: 'Analytics platform receives the processed data',
+                                },
+                            ] }) })] }), _jsxs("div", { children: [_jsx("h3", { style: { color: '#9ca3af', marginBottom: '8px', fontSize: '14px' }, children: "Mixed markers (some with legend, some without)" }), _jsx("div", { className: "elb-explorer", "data-theme": "dark", style: {
+                            background: '#1f2937',
+                            padding: '12px',
+                            borderRadius: '8px',
+                        }, children: _jsx(FlowMap, { sources: { default: { label: 'Source', text: 'walker.js' } }, collector: { label: 'Collector', text: 'Node' }, destinations: { default: { label: 'Destination', text: 'GA4' } }, markers: [
+                                { position: 'incoming', id: 'A', text: 'Page view event' },
+                                { position: 'source' }, // No legend entry, auto-numbered
+                                {
+                                    position: 'collector',
+                                    id: 'B',
+                                    text: 'Validation & enrichment',
+                                },
+                                { position: 'outgoing' }, // No legend entry, auto-numbered
+                            ] }) })] })] })),
+    decorators: [
+        (Story) => (_jsx("div", { style: { padding: '20px', background: '#111827' }, children: _jsx(Story, {}) })),
+    ],
+};
+/**
+ * Theme comparison - Dark and Light mode side by side
+ */
+export const ThemeComparison = {
+    render: () => (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '24px' }, children: [_jsxs("div", { "data-theme": "dark", children: [_jsx("h3", { style: { color: '#9ca3af', marginBottom: '8px', fontSize: '14px' }, children: "Dark Mode" }), _jsx("div", { className: "elb-explorer", style: {
+                            background: '#1f2937',
+                            padding: '12px',
+                            borderRadius: '8px',
+                        }, children: _jsx(FlowMap, { sources: { default: { label: 'Source', text: 'walker.js' } }, collector: { label: 'Collector', text: 'Node' }, destinations: { default: { label: 'Destination', text: 'GA4' } }, markers: [
+                                {
+                                    position: 'source',
+                                    id: '1',
+                                    text: 'Events are tracked on user interactions',
+                                },
+                                {
+                                    position: 'source-collector',
+                                    id: '2',
+                                    text: 'Data is validated and sent to the collector server',
+                                },
+                                {
+                                    position: 'collector',
+                                    id: '3',
+                                    text: 'Events are processed, enriched, and transformed',
+                                },
+                                {
+                                    position: 'destination',
+                                    id: '4',
+                                    text: 'Analytics platform receives the processed data',
+                                },
+                            ] }) })] }), _jsxs("div", { "data-theme": "light", children: [_jsx("h3", { style: { color: '#6b7280', marginBottom: '8px', fontSize: '14px' }, children: "Light Mode" }), _jsx("div", { className: "elb-explorer", style: {
+                            background: '#ffffff',
+                            padding: '12px',
+                            borderRadius: '8px',
+                            border: '1px solid #e5e7eb',
+                        }, children: _jsx(FlowMap, { sources: { default: { label: 'Source', text: 'walker.js' } }, collector: { label: 'Collector', text: 'Node' }, destinations: { default: { label: 'Destination', text: 'GA4' } }, markers: [
+                                {
+                                    position: 'source',
+                                    id: '1',
+                                    text: 'Events are tracked on user interactions',
+                                },
+                                {
+                                    position: 'source-collector',
+                                    id: '2',
+                                    text: 'Data is validated and sent to the collector server',
+                                },
+                                {
+                                    position: 'collector',
+                                    id: '3',
+                                    text: 'Events are processed, enriched, and transformed',
+                                },
+                                {
+                                    position: 'destination',
+                                    id: '4',
+                                    text: 'Analytics platform receives the processed data',
+                                },
+                            ] }) })] })] })),
+    decorators: [
+        (Story) => (_jsx("div", { style: { padding: '20px', background: '#111827' }, children: _jsx(Story, {}) })),
+    ],
+};
+/**
+ * Context Stages - Shows optional stageBefore and stageAfter
+ * These stages act as visual boundaries (no edge arrows extend beyond them)
+ */
+export const ContextStages = {
+    render: () => (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '32px' }, children: [_jsxs("div", { children: [_jsx("h3", { style: { color: '#9ca3af', marginBottom: '8px', fontSize: '14px' }, children: "Basic Usage" }), _jsx(FlowMap, { stageBefore: { label: 'Browser', text: 'Click event' }, sources: { default: { text: 'web' } }, collector: { text: 'walkerjs' }, destinations: { default: { text: 'API' } }, stageAfter: { label: 'gtag', text: 'GA4' } })] }), _jsxs("div", { children: [_jsx("h3", { style: { color: '#9ca3af', marginBottom: '8px', fontSize: '14px' }, children: "Available Marker Positions" }), _jsx(FlowMap, { stageBefore: { label: 'Browser', text: 'Click event' }, sources: { default: { text: 'web' } }, collector: { text: 'walkerjs' }, destinations: { default: { text: 'API' } }, stageAfter: { label: 'gtag', text: 'GA4' }, markers: [
+                            { position: 'stage-before', id: '1', text: 'stage-before' },
+                            { position: 'before-source', id: '2', text: 'before-source' },
+                            { position: 'stage-after-left', id: '3', text: 'stage-after-left' },
+                            {
+                                position: 'destination-after',
+                                id: '4',
+                                text: 'destination-after',
+                            },
+                        ] })] })] })),
+};
+/**
+ * Typical flow with back-and-forth arrows (withReturn).
+ * Shows two parallel arrows per connection - one forward, one return.
+ */
+export const TypicalFlowWithReturn = {
+    render: () => (_jsx(FlowMap, { sources: { default: { label: 'Website', text: 'walker.js' } }, collector: { label: 'walkerOS', text: 'Node' }, destinations: { default: { label: 'BigQuery', text: 'Warehouse' } }, withReturn: true })),
+};
+/**
+ * 3x3 Mesh: Multiple sources to multiple destinations.
+ * All arrows point forward (no return arrows).
+ */
+export const MeshLayout = {
+    render: () => (_jsx(FlowMap, { sources: {
+            web: { label: 'Web' },
+            app: { label: 'App' },
+            server: { label: 'Server' },
+        }, collector: { label: 'walkerOS' }, destinations: {
+            ga4: { label: 'GA4' },
+            bigquery: { label: 'BigQuery' },
+            segment: { label: 'Segment' },
+        } })),
+};
+/**
+ * Various multi-stage configurations.
+ */
+export const MultipleStages = {
+    render: () => (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '32px' }, children: [_jsxs("div", { children: [_jsx("h3", { style: { color: '#9ca3af', marginBottom: '8px', fontSize: '14px' }, children: "2 Sources \u2192 1 Destination" }), _jsx(FlowMap, { sources: {
+                            web: { label: 'Web', text: 'walker.js' },
+                            app: { label: 'App', text: 'SDK' },
+                        }, collector: { label: 'walkerOS', text: 'Node' }, destinations: { default: { label: 'BigQuery' } } })] }), _jsxs("div", { children: [_jsx("h3", { style: { color: '#9ca3af', marginBottom: '8px', fontSize: '14px' }, children: "1 Source \u2192 3 Destinations" }), _jsx(FlowMap, { sources: { default: { label: 'Website', text: 'walker.js' } }, collector: { label: 'walkerOS' }, destinations: {
+                            ga4: { label: 'GA4', text: 'Analytics' },
+                            bigquery: { label: 'BigQuery', text: 'Warehouse' },
+                            segment: { label: 'Segment', text: 'CDP' },
+                        } })] }), _jsxs("div", { children: [_jsx("h3", { style: { color: '#9ca3af', marginBottom: '8px', fontSize: '14px' }, children: "With named markers" }), _jsx(FlowMap, { sources: {
+                            web: { label: 'Web' },
+                            app: { label: 'App' },
+                        }, collector: { label: 'walkerOS' }, destinations: {
+                            ga4: { label: 'GA4' },
+                            bigquery: { label: 'BigQuery' },
+                        }, markers: [
+                            { position: 'source-web', id: '1', text: 'source-web (Web)' },
+                            { position: 'source-app', id: '2', text: 'source-app (App)' },
+                            { position: 'destination-ga4', id: '3', text: 'destination-ga4' },
+                            {
+                                position: 'destination-bigquery',
+                                id: '4',
+                                text: 'destination-bigquery',
+                            },
+                        ] })] })] })),
+};
+/**
+ * Icons - Display Iconify icons before labels in boxes
+ */
+export const WithIcons = {
+    render: () => (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '32px' }, children: [_jsxs("div", { children: [_jsx("h3", { style: { color: '#9ca3af', marginBottom: '8px', fontSize: '14px' }, children: "Icons on all stages" }), _jsx(FlowMap, { sources: {
+                            default: {
+                                icon: 'mdi:web',
+                                label: 'Website',
+                                text: 'walker.js',
+                            },
+                        }, collector: {
+                            icon: 'mdi:server',
+                            label: 'walkerOS',
+                            text: 'Node',
+                        }, destinations: {
+                            default: {
+                                icon: 'simple-icons:googleanalytics',
+                                label: 'GA4',
+                                text: 'Analytics',
+                            },
+                        } })] }), _jsxs("div", { children: [_jsx("h3", { style: { color: '#9ca3af', marginBottom: '8px', fontSize: '14px' }, children: "Multiple sources and destinations with icons" }), _jsx(FlowMap, { sources: {
+                            web: {
+                                icon: 'mdi:web',
+                                label: 'Web',
+                                text: 'Browser SDK',
+                            },
+                            app: {
+                                icon: 'mdi:cellphone',
+                                label: 'App',
+                                text: 'Mobile SDK',
+                            },
+                        }, collector: {
+                            icon: 'mdi:cog',
+                            label: 'Collector',
+                        }, destinations: {
+                            ga4: {
+                                icon: 'simple-icons:googleanalytics',
+                                label: 'GA4',
+                            },
+                            bigquery: {
+                                icon: 'simple-icons:googlebigquery',
+                                label: 'BigQuery',
+                            },
+                            meta: {
+                                icon: 'simple-icons:meta',
+                                label: 'Meta',
+                            },
+                        } })] }), _jsxs("div", { children: [_jsx("h3", { style: { color: '#9ca3af', marginBottom: '8px', fontSize: '14px' }, children: "Mixed: some stages with icons, some without" }), _jsx(FlowMap, { sources: {
+                            default: {
+                                icon: 'mdi:web',
+                                label: 'Website',
+                                text: 'walker.js',
+                            },
+                        }, collector: {
+                            label: 'walkerOS',
+                            text: 'Node',
+                        }, destinations: {
+                            default: {
+                                icon: 'simple-icons:googleanalytics',
+                                label: 'GA4',
+                            },
+                        } })] }), _jsxs("div", { children: [_jsx("h3", { style: { color: '#9ca3af', marginBottom: '8px', fontSize: '14px' }, children: "With context stages and icons" }), _jsx(FlowMap, { stageBefore: {
+                            icon: 'mdi:cursor-default-click',
+                            label: 'Browser',
+                            text: 'Click event',
+                        }, sources: {
+                            default: {
+                                icon: 'mdi:web',
+                                text: 'web',
+                            },
+                        }, collector: {
+                            icon: 'mdi:cog',
+                            text: 'walkerjs',
+                        }, destinations: {
+                            default: {
+                                icon: 'mdi:api',
+                                text: 'API',
+                            },
+                        }, stageAfter: {
+                            icon: 'simple-icons:googleanalytics',
+                            label: 'gtag',
+                            text: 'GA4',
+                        } })] })] })),
+};
+/**
+ * Bidirectional Flow - With return arrows showing full data flow back and forth
+ */
+export const BidirectionalFlow = {
+    render: () => (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '32px' }, children: [_jsxs("div", { children: [_jsx("h3", { style: { color: '#9ca3af', marginBottom: '8px', fontSize: '14px' }, children: "Typical flow with return arrows (withReturn=true)" }), _jsx(FlowMap, { sources: { default: { label: 'Website', text: 'walker.js' } }, collector: { label: 'walkerOS', text: 'Node' }, destinations: { default: { label: 'GA4', text: 'Analytics' } }, withReturn: true })] }), _jsxs("div", { children: [_jsx("h3", { style: { color: '#9ca3af', marginBottom: '8px', fontSize: '14px' }, children: "Multi-source with return arrows" }), _jsx(FlowMap, { sources: {
+                            web: { label: 'Web', text: 'walker.js' },
+                            app: { label: 'App', text: 'SDK' },
+                        }, collector: { label: 'walkerOS', text: 'Node' }, destinations: { default: { label: 'BigQuery' } }, withReturn: true })] }), _jsxs("div", { children: [_jsx("h3", { style: { color: '#9ca3af', marginBottom: '8px', fontSize: '14px' }, children: "Multi-destination with return arrows" }), _jsx(FlowMap, { sources: { default: { label: 'Website', text: 'walker.js' } }, collector: { label: 'walkerOS' }, destinations: {
+                            ga4: { label: 'GA4', text: 'Analytics' },
+                            bigquery: { label: 'BigQuery', text: 'Warehouse' },
+                        }, withReturn: true })] }), _jsxs("div", { children: [_jsx("h3", { style: { color: '#9ca3af', marginBottom: '8px', fontSize: '14px' }, children: "2x2 mesh with return arrows" }), _jsx(FlowMap, { sources: {
+                            web: { label: 'Web' },
+                            app: { label: 'App' },
+                        }, collector: { label: 'walkerOS' }, destinations: {
+                            ga4: { label: 'GA4' },
+                            bigquery: { label: 'BigQuery' },
+                        }, withReturn: true })] })] })),
+};
+/**
+ * Per-Destination After Stages - Each destination can have its own external platform box
+ */
+export const PerDestinationAfterStages = {
+    render: () => (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '32px' }, children: [_jsxs("div", { children: [_jsx("h3", { style: { color: '#9ca3af', marginBottom: '8px', fontSize: '14px' }, children: "Each destination with its own external platform" }), _jsx(FlowMap, { sources: { default: { highlight: false } }, collector: { highlight: false }, destinations: {
+                            ga4: {
+                                label: 'Destination',
+                                text: 'GA4',
+                                after: { label: 'External', text: 'Google Analytics' },
+                            },
+                            api: {
+                                label: 'Destination',
+                                text: 'API',
+                                after: { label: 'External', text: 'Custom Endpoint' },
+                            },
+                        } })] }), _jsxs("div", { children: [_jsx("h3", { style: { color: '#9ca3af', marginBottom: '8px', fontSize: '14px' }, children: "Mixed: some destinations with after, some using shared stageAfter" }), _jsx(FlowMap, { sources: { default: { highlight: false } }, collector: { highlight: false }, destinations: {
+                            ga4: {
+                                label: 'Destination',
+                                text: 'GA4',
+                                after: { label: 'External', text: 'Google Analytics' },
+                            },
+                            segment: {
+                                label: 'Destination',
+                                text: 'Segment',
+                                // No after - will use shared stageAfter
+                            },
+                        }, stageAfter: { label: 'External', text: 'CDP' } })] }), _jsxs("div", { children: [_jsx("h3", { style: { color: '#9ca3af', marginBottom: '8px', fontSize: '14px' }, children: "Three destinations with per-destination external platforms" }), _jsx(FlowMap, { sources: {
+                            web: { label: 'Web', text: 'walker.js' },
+                        }, collector: { label: 'walkerOS' }, destinations: {
+                            ga4: {
+                                label: 'Destination',
+                                text: 'GA4',
+                                after: {
+                                    icon: 'simple-icons:googleanalytics',
+                                    label: 'External',
+                                    text: 'Google Analytics',
+                                },
+                            },
+                            meta: {
+                                label: 'Destination',
+                                text: 'Meta',
+                                after: {
+                                    icon: 'simple-icons:meta',
+                                    label: 'External',
+                                    text: 'Facebook',
+                                },
+                            },
+                            bigquery: {
+                                label: 'Destination',
+                                text: 'BigQuery',
+                                after: {
+                                    icon: 'simple-icons:googlebigquery',
+                                    label: 'External',
+                                    text: 'Data Warehouse',
+                                },
+                            },
+                        } })] }), _jsxs("div", { children: [_jsx("h3", { style: { color: '#9ca3af', marginBottom: '8px', fontSize: '14px' }, children: "Backward compatibility: shared stageAfter still works" }), _jsx(FlowMap, { sources: { default: { highlight: false } }, collector: { highlight: false }, destinations: {
+                            ga4: { label: 'Destination', text: 'GA4' },
+                            api: { label: 'Destination', text: 'API' },
+                        }, stageAfter: { label: 'External', text: 'Platforms' } })] })] })),
+};
+//# sourceMappingURL=FlowMap.stories.js.map