@walkeros/explorer 3.0.1 → 3.0.2

package/dist/components/molecules/property-table.js

@@ -0,0 +1,88 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+function schemaToProperties(schema) {
+    const properties = [];
+    const required = schema.required || [];
+    if (!schema.properties) {
+        return properties;
+    }
+    for (const [name, prop] of Object.entries(schema.properties)) {
+        const property = prop;
+        let type = property.type || 'any';
+        if (property.enum) {
+            type = property.enum
+                .map((v) => `'${v}'`)
+                .join(' | ');
+        }
+        if (type === 'array' && property.items) {
+            const items = property.items;
+            if (items.enum) {
+                type = `Array<${items.enum.map((v) => `'${v}'`).join(' | ')}>`;
+            }
+            else {
+                type = `Array<${items.type || 'any'}>`;
+            }
+        }
+        if (type === 'object' && property.additionalProperties) {
+            const addProps = property.additionalProperties;
+            const valueType = addProps.type || 'any';
+            type = `Record<string, ${valueType}>`;
+        }
+        if (property.anyOf || property.oneOf) {
+            const variants = (property.anyOf || property.oneOf);
+            type = variants.map((v) => v.type || 'any').join(' | ');
+        }
+        let description = property.description || '';
+        let example;
+        const exampleMatch = description.match(/\(like\s+(.+?)\)$/);
+        if (exampleMatch) {
+            example = exampleMatch[1];
+            description = description.replace(/\s*\(like\s+.+?\)$/, '');
+        }
+        if (type === 'any' && description.toLowerCase().includes('function')) {
+            type = 'function';
+        }
+        properties.push({
+            name,
+            type,
+            description,
+            required: required.includes(name),
+            default: property.default !== undefined ? String(property.default) : undefined,
+            example,
+        });
+    }
+    return properties;
+}
+function PropertyModal({ property, isOpen, onClose }) {
+    if (!isOpen || !property)
+        return null;
+    const handleBackdropClick = (e) => {
+        if (e.target === e.currentTarget) {
+            onClose();
+        }
+    };
+    return (_jsx("div", { className: "elb-property-table__modal-backdrop", onClick: handleBackdropClick, children: _jsxs("div", { className: "elb-property-table__modal-content", children: [_jsxs("div", { className: "elb-property-table__modal-header", children: [_jsxs("h3", { className: "elb-property-table__modal-title", children: [_jsx("code", { className: "elb-property-table__modal-property-name", children: property.name }), property.required && (_jsx("span", { className: "elb-property-table__required-icon", children: "*" }))] }), _jsx("button", { className: "elb-property-table__close-button", onClick: onClose, "aria-label": "Close", children: _jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), _jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }) })] }), _jsxs("div", { className: "elb-property-table__modal-body", children: [_jsxs("div", { className: "elb-property-table__modal-row", children: [_jsx("span", { className: "elb-property-table__modal-label", children: "Type:" }), _jsx("code", { className: "elb-property-table__modal-type elb-property-table__modal-type--wrap", children: property.type })] }), property.description && (_jsxs("div", { className: "elb-property-table__modal-row", children: [_jsx("span", { className: "elb-property-table__modal-label", children: "Description:" }), _jsx("p", { className: "elb-property-table__modal-description", children: property.description })] })), property.default && (_jsxs("div", { className: "elb-property-table__modal-row", children: [_jsx("span", { className: "elb-property-table__modal-label", children: "Default:" }), _jsx("code", { className: "elb-property-table__modal-default", children: property.default })] })), property.example && (_jsxs("div", { className: "elb-property-table__modal-row", children: [_jsx("span", { className: "elb-property-table__modal-label", children: "Example:" }), _jsx("code", { className: "elb-property-table__modal-example", children: property.example })] }))] })] }) }));
+}
+export function PropertyTable({ schema, className }) {
+    const [selectedProperty, setSelectedProperty] = useState(null);
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    const properties = schemaToProperties(schema);
+    const hasRequiredProperties = properties.some((property) => property.required);
+    const TYPE_MAX_LENGTH = 30;
+    const isTruncated = (type) => type.length > TYPE_MAX_LENGTH;
+    const truncateType = (type) => {
+        if (type.length <= TYPE_MAX_LENGTH)
+            return type;
+        return type.slice(0, TYPE_MAX_LENGTH);
+    };
+    const openModal = (property) => {
+        setSelectedProperty(property);
+        setIsModalOpen(true);
+    };
+    const closeModal = () => {
+        setIsModalOpen(false);
+        setSelectedProperty(null);
+    };
+    return (_jsxs("div", { className: `elb-explorer ${className || ''}`, children: [_jsx("div", { className: "elb-property-table__container", children: _jsxs("table", { className: "elb-property-table", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: "Property" }), _jsx("th", { children: "Type" }), _jsx("th", { children: "Description" }), _jsx("th", { children: "More" })] }) }), _jsx("tbody", { children: properties.map((property, index) => (_jsxs("tr", { children: [_jsx("td", { className: "elb-property-table__property-cell", "data-label": "Property", children: _jsxs("code", { className: "elb-property-table__property-name", children: [property.name, property.required && (_jsx("span", { className: "elb-property-table__required-icon", children: "*" }))] }) }), _jsx("td", { className: "elb-property-table__type-cell", "data-label": "Type", children: isTruncated(property.type) ? (_jsx("button", { className: "elb-property-table__type-button", onClick: () => openModal(property), "aria-label": `View full type for ${property.name}`, children: _jsx("code", { className: "elb-property-table__property-type elb-property-table__property-type--truncated", children: truncateType(property.type) }) })) : (_jsx("code", { className: "elb-property-table__property-type", children: property.type })) }), _jsx("td", { className: "elb-property-table__description", "data-label": "Description", children: property.description }), _jsx("td", { className: "elb-property-table__action-cell", "data-label": "More", children: _jsx("button", { className: "elb-property-table__more-button", onClick: () => openModal(property), "aria-label": `More info about ${property.name}`, children: _jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("circle", { cx: "12", cy: "12", r: "10" }), _jsx("line", { x1: "12", y1: "16", x2: "12", y2: "12" }), _jsx("line", { x1: "12", y1: "8", x2: "12.01", y2: "8" })] }) }) })] }, index))) })] }) }), hasRequiredProperties && (_jsxs("div", { className: "elb-property-table__required-notice", children: [_jsx("span", { className: "elb-property-table__required-icon", children: "*" }), " Required fields"] })), _jsx(PropertyModal, { property: selectedProperty, isOpen: isModalOpen, onClose: closeModal })] }));
+}
+//# sourceMappingURL=property-table.js.map

package/dist/components/molecules/property-table.js.map

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

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

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { PropertyTable } from './property-table';
+/**
+ * PropertyTable - Schema-based property documentation table
+ *
+ * Generates a documentation table from a JSON Schema showing properties,
+ * types, descriptions, defaults, and required fields. Click on a row to
+ * see full property details in a modal.
+ */
+declare const meta: Meta<typeof PropertyTable>;
+export default meta;
+type Story = StoryObj<typeof PropertyTable>;
+/**
+ * Default property table with various data types
+ *
+ * Demonstrates different schema types:
+ * - Required fields (marked with *)
+ * - Enum types
+ * - Arrays with typed items
+ * - Objects with additionalProperties
+ * - Union types (anyOf)
+ */
+export declare const Default: Story;
+//# sourceMappingURL=property-table.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"property-table.stories.d.ts","sourceRoot":"","sources":["../../../src/components/molecules/property-table.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAE5D,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEjD;;;;;;GAMG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,aAAa,CAIpC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,aAAa,CAAC,CAAC;AA2D5C;;;;;;;;;GASG;AACH,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC"}

package/dist/components/molecules/property-table.stories.js

@@ -0,0 +1,86 @@
+import { PropertyTable } from './property-table';
+/**
+ * PropertyTable - Schema-based property documentation table
+ *
+ * Generates a documentation table from a JSON Schema showing properties,
+ * types, descriptions, defaults, and required fields. Click on a row to
+ * see full property details in a modal.
+ */
+const meta = {
+    component: PropertyTable,
+    title: 'Molecules/PropertyTable',
+    tags: ['autodocs'],
+};
+export default meta;
+const exampleSchema = {
+    type: 'object',
+    required: ['apiKey', 'region'],
+    properties: {
+        apiKey: {
+            type: 'string',
+            description: 'Your API authentication key for the service',
+        },
+        region: {
+            type: 'string',
+            enum: ['us-east-1', 'eu-west-1', 'ap-south-1'],
+            description: 'Geographic region for data processing',
+            default: 'us-east-1',
+        },
+        timeout: {
+            type: 'number',
+            description: 'Request timeout in milliseconds (like 5000)',
+            default: '3000',
+        },
+        retryAttempts: {
+            type: 'number',
+            description: 'Number of retry attempts on failure',
+            default: '3',
+        },
+        enableDebug: {
+            type: 'boolean',
+            description: 'Enable verbose debug logging',
+            default: 'false',
+        },
+        tags: {
+            type: 'array',
+            items: {
+                type: 'string',
+            },
+            description: 'Custom tags for categorization (like analytics, marketing)',
+        },
+        metadata: {
+            type: 'object',
+            additionalProperties: {
+                type: 'string',
+            },
+            description: 'Additional key-value metadata',
+        },
+        endpoints: {
+            type: 'array',
+            items: {
+                enum: ['tracking', 'analytics', 'conversion'],
+            },
+            description: 'Enabled API endpoints',
+        },
+        mode: {
+            anyOf: [{ type: 'string' }, { type: 'number' }],
+            description: 'Operation mode - can be string identifier or numeric code',
+        },
+    },
+};
+/**
+ * Default property table with various data types
+ *
+ * Demonstrates different schema types:
+ * - Required fields (marked with *)
+ * - Enum types
+ * - Arrays with typed items
+ * - Objects with additionalProperties
+ * - Union types (anyOf)
+ */
+export const Default = {
+    args: {
+        schema: exampleSchema,
+    },
+};
+//# sourceMappingURL=property-table.stories.js.map

package/dist/components/molecules/property-table.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"property-table.stories.js","sourceRoot":"","sources":["../../../src/components/molecules/property-table.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEjD;;;;;;GAMG;AACH,MAAM,IAAI,GAA+B;IACvC,SAAS,EAAE,aAAa;IACxB,KAAK,EAAE,yBAAyB;IAChC,IAAI,EAAE,CAAC,UAAU,CAAC;CACnB,CAAC;AAEF,eAAe,IAAI,CAAC;AAGpB,MAAM,aAAa,GAAe;IAChC,IAAI,EAAE,QAAQ;IACd,QAAQ,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;IAC9B,UAAU,EAAE;QACV,MAAM,EAAE;YACN,IAAI,EAAE,QAAQ;YACd,WAAW,EAAE,6CAA6C;SAC3D;QACD,MAAM,EAAE;YACN,IAAI,EAAE,QAAQ;YACd,IAAI,EAAE,CAAC,WAAW,EAAE,WAAW,EAAE,YAAY,CAAC;YAC9C,WAAW,EAAE,uCAAuC;YACpD,OAAO,EAAE,WAAW;SACrB;QACD,OAAO,EAAE;YACP,IAAI,EAAE,QAAQ;YACd,WAAW,EAAE,6CAA6C;YAC1D,OAAO,EAAE,MAAM;SAChB;QACD,aAAa,EAAE;YACb,IAAI,EAAE,QAAQ;YACd,WAAW,EAAE,qCAAqC;YAClD,OAAO,EAAE,GAAG;SACb;QACD,WAAW,EAAE;YACX,IAAI,EAAE,SAAS;YACf,WAAW,EAAE,8BAA8B;YAC3C,OAAO,EAAE,OAAO;SACjB;QACD,IAAI,EAAE;YACJ,IAAI,EAAE,OAAO;YACb,KAAK,EAAE;gBACL,IAAI,EAAE,QAAQ;aACf;YACD,WAAW,EAAE,4DAA4D;SAC1E;QACD,QAAQ,EAAE;YACR,IAAI,EAAE,QAAQ;YACd,oBAAoB,EAAE;gBACpB,IAAI,EAAE,QAAQ;aACf;YACD,WAAW,EAAE,+BAA+B;SAC7C;QACD,SAAS,EAAE;YACT,IAAI,EAAE,OAAO;YACb,KAAK,EAAE;gBACL,IAAI,EAAE,CAAC,UAAU,EAAE,WAAW,EAAE,YAAY,CAAC;aAC9C;YACD,WAAW,EAAE,uBAAuB;SACrC;QACD,IAAI,EAAE;YACJ,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC;YAC/C,WAAW,EAAE,2DAA2D;SACzE;KACF;CACF,CAAC;AAEF;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,MAAM,EAAE,aAAa;KACtB;CACF,CAAC"}

package/dist/components/organisms/browser-box.d.ts

@@ -0,0 +1,31 @@
+export interface BrowserBoxProps {
+    html?: string;
+    css?: string;
+    js?: string;
+    onHtmlChange?: (value: string) => void;
+    onCssChange?: (value: string) => void;
+    onJsChange?: (value: string) => void;
+    showPreview?: boolean;
+    label?: string;
+    className?: string;
+    initialTab?: 'preview' | 'html' | 'css' | 'js';
+    lineNumbers?: boolean;
+    wordWrap?: boolean;
+}
+/**
+ * BrowserBox - Code editor with HTML/CSS/JS toggle
+ *
+ * Displays code editor with button group to switch between HTML, CSS, and JavaScript.
+ * Only shows tabs for content that is provided.
+ *
+ * @example
+ * <BrowserBox
+ *   html={htmlCode}
+ *   css={cssCode}
+ *   onHtmlChange={setHtml}
+ *   onCssChange={setCss}
+ *   label="Code"
+ * />
+ */
+export declare function BrowserBox({ html, css, js, onHtmlChange, onCssChange, onJsChange, showPreview, label, className, initialTab, lineNumbers, wordWrap, }: BrowserBoxProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=browser-box.d.ts.map

package/dist/components/organisms/browser-box.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"browser-box.d.ts","sourceRoot":"","sources":["../../../src/components/organisms/browser-box.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,eAAe;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,KAAK,GAAG,IAAI,CAAC;IAC/C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,GAAG,EACH,EAAE,EACF,YAAY,EACZ,WAAW,EACX,UAAU,EACV,WAAkB,EAClB,KAAc,EACd,SAAc,EACd,UAAU,EACV,WAAmB,EACnB,QAAgB,GACjB,EAAE,eAAe,2CAqFjB"}

package/dist/components/organisms/browser-box.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useMemo } from 'react';
+import { Box } from '../atoms/box';
+import { ButtonGroup } from '../atoms/button-group';
+import { Preview } from '../molecules/preview';
+import { Code } from '../atoms/code';
+/**
+ * BrowserBox - Code editor with HTML/CSS/JS toggle
+ *
+ * Displays code editor with button group to switch between HTML, CSS, and JavaScript.
+ * Only shows tabs for content that is provided.
+ *
+ * @example
+ * <BrowserBox
+ *   html={htmlCode}
+ *   css={cssCode}
+ *   onHtmlChange={setHtml}
+ *   onCssChange={setCss}
+ *   label="Code"
+ * />
+ */
+export function BrowserBox({ html, css, js, onHtmlChange, onCssChange, onJsChange, showPreview = true, label = 'Code', className = '', initialTab, lineNumbers = false, wordWrap = false, }) {
+    // Determine available tabs
+    const availableTabs = useMemo(() => {
+        const tabs = [];
+        if (showPreview && html !== undefined)
+            tabs.push({ label: 'Preview', value: 'preview' });
+        if (html !== undefined)
+            tabs.push({ label: 'HTML', value: 'html' });
+        if (css !== undefined)
+            tabs.push({ label: 'CSS', value: 'css' });
+        if (js !== undefined)
+            tabs.push({ label: 'JS', value: 'js' });
+        return tabs;
+    }, [html, css, js, showPreview]);
+    // Set initial active tab
+    const [activeTab, setActiveTab] = useState(() => {
+        if (initialTab && availableTabs.some((t) => t.value === initialTab)) {
+            return initialTab;
+        }
+        return availableTabs[0]?.value || 'preview';
+    });
+    // Get current content and language
+    const { content, language, onChange } = useMemo(() => {
+        switch (activeTab) {
+            case 'html':
+                return {
+                    content: html || '',
+                    language: 'html',
+                    onChange: onHtmlChange,
+                };
+            case 'css':
+                return {
+                    content: css || '',
+                    language: 'css',
+                    onChange: onCssChange,
+                };
+            case 'js':
+                return {
+                    content: js || '',
+                    language: 'javascript',
+                    onChange: onJsChange,
+                };
+            default:
+                return {
+                    content: '',
+                    language: 'text',
+                    onChange: undefined,
+                };
+        }
+    }, [activeTab, html, css, js, onHtmlChange, onCssChange, onJsChange]);
+    // Build button group data
+    const buttons = useMemo(() => availableTabs.map((tab) => ({
+        label: tab.label,
+        value: tab.value,
+        active: activeTab === tab.value,
+    })), [availableTabs, activeTab]);
+    return (_jsx(Box, { header: label, headerActions: availableTabs.length > 1 ? (_jsx(ButtonGroup, { buttons: buttons, onButtonClick: setActiveTab })) : null, className: className, children: activeTab === 'preview' ? (_jsx(Preview, { html: html || '', css: css || '' })) : (_jsx(Code, { code: content, language: language, onChange: onChange, disabled: !onChange, lineNumbers: lineNumbers, wordWrap: wordWrap })) }));
+}
+//# sourceMappingURL=browser-box.js.map

package/dist/components/organisms/browser-box.js.map

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

package/dist/components/organisms/browser-box.stories.d.ts

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { BrowserBox } from './browser-box';
+/**
+ * BrowserBox - Multi-tab HTML/CSS/JS editor with live preview
+ *
+ * Tabbed code editor that shows:
+ * - Live preview of HTML
+ * - HTML editor
+ * - CSS editor
+ * - JavaScript editor (when provided)
+ *
+ * Tabs are automatically hidden if content isn't provided.
+ */
+declare const meta: Meta<typeof BrowserBox>;
+export default meta;
+type Story = StoryObj<typeof BrowserBox>;
+/**
+ * Default browser box with HTML and CSS
+ *
+ * Shows a product card with:
+ * - Preview tab (live render)
+ * - HTML tab (editable source)
+ * - CSS tab (editable styles)
+ */
+export declare const Default: Story;
+//# sourceMappingURL=browser-box.stories.d.ts.map

package/dist/components/organisms/browser-box.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"browser-box.stories.d.ts","sourceRoot":"","sources":["../../../src/components/organisms/browser-box.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C;;;;;;;;;;GAUG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CAOjC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,UAAU,CAAC,CAAC;AAmEzC;;;;;;;GAOG;AACH,eAAO,MAAM,OAAO,EAAE,KAQrB,CAAC"}

package/dist/components/organisms/browser-box.stories.js

@@ -0,0 +1,102 @@
+import { BrowserBox } from './browser-box';
+/**
+ * BrowserBox - Multi-tab HTML/CSS/JS editor with live preview
+ *
+ * Tabbed code editor that shows:
+ * - Live preview of HTML
+ * - HTML editor
+ * - CSS editor
+ * - JavaScript editor (when provided)
+ *
+ * Tabs are automatically hidden if content isn't provided.
+ */
+const meta = {
+    component: BrowserBox,
+    title: 'Organisms/BrowserBox',
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'fullscreen',
+    },
+};
+export default meta;
+const sampleHtml = `<div class="product-card">
+  <div class="product-header">
+    <h2 class="product-title">Everyday Ruck Snack</h2>
+    <span class="product-badge">New</span>
+  </div>
+  <p class="product-price">€ 2.50</p>
+  <button class="product-button">Add to Cart</button>
+</div>`;
+const sampleCss = `
+.product-card {
+  width: 300px;
+  padding: 20px;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+  font-family: -apple-system, sans-serif;
+}
+
+.product-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.product-title {
+  margin: 0;
+  font-size: 1.25rem;
+  color: #1f2937;
+}
+
+.product-badge {
+  background: #3b82f6;
+  color: white;
+  padding: 4px 12px;
+  border-radius: 12px;
+  font-size: 0.75rem;
+  font-weight: 600;
+}
+
+.product-price {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: #1f2937;
+  margin: 0 0 16px 0;
+}
+
+.product-button {
+  width: 100%;
+  padding: 12px;
+  background: #3b82f6;
+  color: white;
+  border: none;
+  border-radius: 6px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.product-button:hover {
+  background: #2563eb;
+}
+`;
+/**
+ * Default browser box with HTML and CSS
+ *
+ * Shows a product card with:
+ * - Preview tab (live render)
+ * - HTML tab (editable source)
+ * - CSS tab (editable styles)
+ */
+export const Default = {
+    args: {
+        html: sampleHtml,
+        css: sampleCss,
+        showPreview: true,
+        label: 'Code',
+        initialTab: 'preview',
+    },
+};
+//# sourceMappingURL=browser-box.stories.js.map

package/dist/components/organisms/browser-box.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"browser-box.stories.js","sourceRoot":"","sources":["../../../src/components/organisms/browser-box.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C;;;;;;;;;;GAUG;AACH,MAAM,IAAI,GAA4B;IACpC,SAAS,EAAE,UAAU;IACrB,KAAK,EAAE,sBAAsB;IAC7B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,MAAM,EAAE,YAAY;KACrB;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAGpB,MAAM,UAAU,GAAG;;;;;;;OAOZ,CAAC;AAER,MAAM,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsDjB,CAAC;AAEF;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,IAAI,EAAE,UAAU;QAChB,GAAG,EAAE,SAAS;QACd,WAAW,EAAE,IAAI;QACjB,KAAK,EAAE,MAAM;QACb,UAAU,EAAE,SAAS;KACtB;CACF,CAAC"}

package/dist/components/organisms/collector-box.d.ts

@@ -0,0 +1,24 @@
+import type { DestinationCode } from '../../helpers/destinations';
+export interface CollectorBoxProps {
+    event: string;
+    mapping: string;
+    destination: DestinationCode;
+    label?: string;
+    wordWrap?: boolean;
+}
+/**
+ * CollectorBox - Runs a collector with destination to transform events
+ *
+ * Takes raw event and mapping config, processes through collector pipeline,
+ * and displays the formatted destination output.
+ *
+ * @example
+ * <CollectorBox
+ *   event={JSON.stringify(event)}
+ *   mapping={mappingConfig}
+ *   destination={createGtagDestination()}
+ *   label="Result"
+ * />
+ */
+export declare function CollectorBox({ event, mapping, destination, label, wordWrap, }: CollectorBoxProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=collector-box.d.ts.map

package/dist/components/organisms/collector-box.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"collector-box.d.ts","sourceRoot":"","sources":["../../../src/components/organisms/collector-box.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAGlE,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,EAAE,eAAe,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,OAAO,EACP,WAAW,EACX,KAAgB,EAChB,QAAgB,GACjB,EAAE,iBAAiB,2CAgDnB"}

package/dist/components/organisms/collector-box.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { startFlow } from '@walkeros/collector';
+import { CodeBox } from '../molecules/code-box';
+/**
+ * CollectorBox - Runs a collector with destination to transform events
+ *
+ * Takes raw event and mapping config, processes through collector pipeline,
+ * and displays the formatted destination output.
+ *
+ * @example
+ * <CollectorBox
+ *   event={JSON.stringify(event)}
+ *   mapping={mappingConfig}
+ *   destination={createGtagDestination()}
+ *   label="Result"
+ * />
+ */
+export function CollectorBox({ event, mapping, destination, label = 'Result', wordWrap = false, }) {
+    const [output, setOutput] = useState('// Click elements in the preview to see function call');
+    useEffect(() => {
+        (async () => {
+            try {
+                // Parse inputs
+                const eventObj = JSON.parse(event);
+                const mappingObj = JSON.parse(mapping);
+                // Create collector with destination
+                const { collector } = await startFlow({
+                    destinations: {
+                        demo: {
+                            code: destination,
+                            config: {
+                                mapping: mappingObj,
+                            },
+                            env: {
+                                elb: setOutput,
+                            },
+                        },
+                    },
+                });
+                // Push event through collector → destination
+                await collector.push(eventObj);
+            }
+            catch (error) {
+                if (error instanceof Error) {
+                    setOutput(`// Error: ${error.message}`);
+                }
+                else {
+                    setOutput(`// Error: ${String(error)}`);
+                }
+            }
+        })();
+    }, [event, mapping, destination]);
+    return (_jsx(CodeBox, { code: output, language: "javascript", disabled: true, label: label, wordWrap: wordWrap }));
+}
+//# sourceMappingURL=collector-box.js.map

package/dist/components/organisms/collector-box.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"collector-box.js","sourceRoot":"","sources":["../../../src/components/organisms/collector-box.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAEhD,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAUhD;;;;;;;;;;;;;GAaG;AACH,MAAM,UAAU,YAAY,CAAC,EAC3B,KAAK,EACL,OAAO,EACP,WAAW,EACX,KAAK,GAAG,QAAQ,EAChB,QAAQ,GAAG,KAAK,GACE;IAClB,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAClC,uDAAuD,CACxD,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,CAAC,KAAK,IAAI,EAAE;YACV,IAAI,CAAC;gBACH,eAAe;gBACf,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;gBACnC,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;gBAEvC,oCAAoC;gBACpC,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,SAAS,CAAC;oBACpC,YAAY,EAAE;wBACZ,IAAI,EAAE;4BACJ,IAAI,EAAE,WAAW;4BACjB,MAAM,EAAE;gCACN,OAAO,EAAE,UAAU;6BACpB;4BACD,GAAG,EAAE;gCACH,GAAG,EAAE,SAAS;6BACf;yBACF;qBACF;iBACF,CAAC,CAAC;gBAEH,6CAA6C;gBAC7C,MAAM,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;YACjC,CAAC;YAAC,OAAO,KAAK,EAAE,CAAC;gBACf,IAAI,KAAK,YAAY,KAAK,EAAE,CAAC;oBAC3B,SAAS,CAAC,aAAa,KAAK,CAAC,OAAO,EAAE,CAAC,CAAC;gBAC1C,CAAC;qBAAM,CAAC;oBACN,SAAS,CAAC,aAAa,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;gBAC1C,CAAC;YACH,CAAC;QACH,CAAC,CAAC,EAAE,CAAC;IACP,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC;IAElC,OAAO,CACL,KAAC,OAAO,IACN,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAC,YAAY,EACrB,QAAQ,QACR,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,GAClB,CACH,CAAC;AACJ,CAAC"}

package/dist/components/organisms/collector-box.stories.d.ts

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { CollectorBox } from './collector-box';
+/**
+ * CollectorBox - Event pipeline processor with collector
+ *
+ * Processes events through the walkerOS collector pipeline with a destination,
+ * showing the final formatted output. Perfect for demonstrating how events
+ * are transformed and sent to analytics tools.
+ */
+declare const meta: Meta<typeof CollectorBox>;
+export default meta;
+type Story = StoryObj<typeof CollectorBox>;
+/**
+ * Default collector box with product view event
+ *
+ * Shows how a product view event is:
+ * 1. Processed by the collector
+ * 2. Transformed by mapping rules
+ * 3. Formatted as gtag() call
+ */
+export declare const Default: Story;
+//# sourceMappingURL=collector-box.stories.d.ts.map

package/dist/components/organisms/collector-box.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"collector-box.stories.d.ts","sourceRoot":"","sources":["../../../src/components/organisms/collector-box.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAG/C;;;;;;GAMG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,YAAY,CAOnC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,YAAY,CAAC,CAAC;AAmC3C;;;;;;;GAOG;AACH,eAAO,MAAM,OAAO,EAAE,KAQrB,CAAC"}