juxscript 1.1.401 → 1.1.402

package/dist/widgets/canvas.js

@@ -0,0 +1,641 @@
+import { pageState } from '../state/pageState.js';
+import generateId from '../utils/idgen.js';
+// ═══════════════════════════════════════════════════════════
+// DEFAULT INVENTORY
+// ═══════════════════════════════════════════════════════════
+const DEFAULT_INVENTORY = [
+    // Shapes
+    { type: 'c', label: 'Container (c)', category: 'shapes' },
+    { type: 'g', label: 'Group (g)', category: 'shapes' },
+    { type: 'flex', label: 'Flex', category: 'shapes' },
+    { type: 'flexRow', label: 'Flex Row', category: 'shapes' },
+    { type: 'flexCol', label: 'Flex Col', category: 'shapes' },
+    // Widgets
+    { type: 'sidebar', label: 'Sidebar', category: 'widgets' },
+    { type: 'calendar', label: 'Calendar', category: 'widgets' },
+    { type: 'stepper', label: 'Stepper', category: 'widgets' },
+    { type: 'tabs', label: 'Tabs', category: 'widgets' },
+    // Components (primitives)
+    { type: 'button', label: 'Button', category: 'components' },
+    { type: 'input', label: 'Input', category: 'components' },
+    { type: 'select', label: 'Select', category: 'components' },
+    { type: 'checkbox', label: 'Checkbox', category: 'components' },
+    { type: 'radio', label: 'Radio', category: 'components' },
+    { type: 'list', label: 'List', category: 'components' },
+    { type: 'table', label: 'Table', category: 'components' },
+    { type: 'nav', label: 'Nav', category: 'components' },
+    { type: 'link', label: 'Link', category: 'components' },
+    { type: 'tag', label: 'Tag', category: 'components' },
+    { type: 'h1', label: 'H1', category: 'components' },
+    { type: 'p', label: 'Paragraph', category: 'components' },
+    { type: 'span', label: 'Span', category: 'components' },
+];
+// ═══════════════════════════════════════════════════════════
+// CODE TEMPLATES
+// ═══════════════════════════════════════════════════════════
+function defaultCode(type, id) {
+    switch (type) {
+        case 'c': return `c('100%', 'auto', '16px')`;
+        case 'g': return `g([])`;
+        case 'flex': return `flex('row', '8px')`;
+        case 'flexRow': return `flexRow('8px')`;
+        case 'flexCol': return `flexCol('8px')`;
+        case 'sidebar': return `jux.sidebar('${id}').title('Nav').section('Pages', ['Home', 'About']).render()`;
+        case 'calendar': return `jux.calendar('${id}').render()`;
+        case 'stepper': return `jux.stepper('${id}').render()`;
+        case 'tabs': return `jux.tabs('${id}', { items: [{ label: 'Tab 1' }, { label: 'Tab 2' }] })`;
+        case 'button': return `jux.btn('${id}', { content: 'Click me' })`;
+        case 'input': return `jux.input('${id}', { label: 'Label', placeholder: 'Type...' })`;
+        case 'select': return `jux.select('${id}', { label: 'Choose', items: [{ label: 'A', value: 'a' }] })`;
+        case 'checkbox': return `jux.checkbox('${id}', { label: 'Check me' })`;
+        case 'radio': return `jux.radio('${id}', { label: 'Options', items: ['A', 'B'] })`;
+        case 'list': return `jux.list('${id}')`;
+        case 'table': return `jux.table('${id}', { columns: ['Name', 'Value'] })`;
+        case 'nav': return `jux.nav('${id}', { items: ['Home', 'About'] })`;
+        case 'link': return `jux.link('${id}', { content: 'Link', href: '#' })`;
+        case 'tag': return `jux.div('${id}', { content: 'Content' })`;
+        case 'h1': return `jux.h1('${id}', { content: 'Heading' })`;
+        case 'p': return `jux.p('${id}', { content: 'Paragraph text' })`;
+        case 'span': return `jux.span('${id}', { content: 'Inline text' })`;
+        default: return `jux.${type}('${id}')`;
+    }
+}
+let canvasStylesInjected = false;
+// ═══════════════════════════════════════════════════════════
+// CANVAS CLASS
+// ═══════════════════════════════════════════════════════════
+class Canvas {
+    constructor(id, options = {}) {
+        this._el = null;
+        this._items = [];
+        this._selectedId = null;
+        this._activeTab = 'design';
+        this._onChange = null;
+        this._canvasEl = null;
+        this._inventoryEl = null;
+        this._propertiesEl = null;
+        this._counter = 0;
+        this.id = id || generateId('canvas');
+        this._opts = {
+            title: options.title || 'Canvas Builder',
+            width: options.width || '100%',
+            height: options.height || '100vh',
+            inventoryWidth: options.inventoryWidth || '220px',
+            propertiesWidth: options.propertiesWidth || '280px',
+            ...options,
+        };
+    }
+    // ═══════════════════════════════════════════════════════════
+    // FLUENT API
+    // ═══════════════════════════════════════════════════════════
+    title(val) { this._opts.title = val; return this; }
+    width(val) { this._opts.width = val; return this; }
+    height(val) { this._opts.height = val; return this; }
+    inventoryWidth(val) { this._opts.inventoryWidth = val; return this; }
+    propertiesWidth(val) { this._opts.propertiesWidth = val; return this; }
+    style(val) { this._opts.style = val; return this; }
+    class(val) { this._opts.class = val; return this; }
+    onChange(fn) {
+        this._onChange = fn;
+        return this;
+    }
+    // ═══════════════════════════════════════════════════════════
+    // PAGESTATE
+    // ═══════════════════════════════════════════════════════════
+    getValue() { return this._selectedId; }
+    setValue(val) { this._selectItem(val); return this; }
+    getElement() { return this._el; }
+    getTitle() { return this._opts.title; }
+    getWidth() { return this._opts.width; }
+    getHeight() { return this._opts.height; }
+    getInventoryWidth() { return this._opts.inventoryWidth; }
+    getPropertiesWidth() { return this._opts.propertiesWidth; }
+    getClass() { return this._opts.class || ''; }
+    getStyle() { return this._opts.style || ''; }
+    getItems() { return [...this._items]; }
+    getSelectedItem() { return this._items.find(i => i.id === this._selectedId) || null; }
+    setTitle(val) { return this.title(val); }
+    setWidth(val) { return this.width(val); }
+    setHeight(val) { return this.height(val); }
+    setInventoryWidth(val) { return this.inventoryWidth(val); }
+    setPropertiesWidth(val) { return this.propertiesWidth(val); }
+    setClass(val) { return this.class(val); }
+    setStyle(val) { return this.style(val); }
+    get state() { return pageState[this.id]; }
+    // ═══════════════════════════════════════════════════════════
+    // ACTIONS
+    // ═══════════════════════════════════════════════════════════
+    addItemToCanvas(type, category, x = 20, y = 20) {
+        this._counter++;
+        const itemId = `${type}-${this._counter}`;
+        const entry = DEFAULT_INVENTORY.find(e => e.type === type);
+        const item = {
+            id: itemId,
+            type,
+            category,
+            label: entry?.label || type,
+            x,
+            y,
+            code: defaultCode(type, itemId),
+        };
+        this._items.push(item);
+        this._renderCanvasItems();
+        this._selectItem(itemId);
+        if (this._onChange)
+            this._onChange(item);
+        return this;
+    }
+    removeItemFromCanvas(itemId) {
+        this._items = this._items.filter(i => i.id !== itemId);
+        if (this._selectedId === itemId)
+            this._selectedId = null;
+        this._renderCanvasItems();
+        this._renderProperties();
+        if (this._onChange)
+            this._onChange(null);
+        return this;
+    }
+    updateItemCode(itemId, code) {
+        const item = this._items.find(i => i.id === itemId);
+        if (item)
+            item.code = code;
+        return this;
+    }
+    // ═══════════════════════════════════════════════════════════
+    // RENDER
+    // ═══════════════════════════════════════════════════════════
+    render(target) {
+        this._injectStyles();
+        this._el = this._buildDOM();
+        let container = null;
+        if (target && typeof target === 'object' && 'element' in target)
+            container = target.element;
+        else if (target instanceof HTMLElement)
+            container = target;
+        else if (typeof target === 'string')
+            container = document.getElementById(target) || document.querySelector(target);
+        else
+            container = document.getElementById('app');
+        if (container && this._el) {
+            container.appendChild(this._el);
+        }
+        return this;
+    }
+    into(target) { return this.render(target); }
+    destroy() {
+        pageState.__unregister(this.id);
+        this._el?.remove();
+    }
+    // ═══════════════════════════════════════════════════════════
+    // INTERNAL — DOM
+    // ═══════════════════════════════════════════════════════════
+    _buildDOM() {
+        const el = document.createElement('div');
+        el.id = this.id;
+        el.className = 'jux-canvas' + (this._opts.class ? ' ' + this._opts.class : '');
+        el.style.cssText = `width:${this._opts.width};height:${this._opts.height};display:flex;${this._opts.style || ''}`;
+        // ── Inventory Panel ──
+        this._inventoryEl = this._buildInventoryPanel();
+        el.appendChild(this._inventoryEl);
+        // ── Canvas Area ──
+        const canvasWrapper = document.createElement('div');
+        canvasWrapper.className = 'jux-canvas-center';
+        canvasWrapper.style.cssText = `flex:1;display:flex;flex-direction:column;overflow:hidden;`;
+        // Header
+        const header = document.createElement('div');
+        header.className = 'jux-canvas-header';
+        header.textContent = this._opts.title;
+        canvasWrapper.appendChild(header);
+        // Canvas drop area
+        this._canvasEl = document.createElement('div');
+        this._canvasEl.className = 'jux-canvas-area';
+        this._canvasEl.setAttribute('data-empty', 'true');
+        const emptyMsg = document.createElement('div');
+        emptyMsg.className = 'jux-canvas-empty';
+        emptyMsg.textContent = 'Drag components from the inventory or click to add';
+        this._canvasEl.appendChild(emptyMsg);
+        // Drop handling
+        this._canvasEl.addEventListener('dragover', (e) => {
+            e.preventDefault();
+            this._canvasEl.classList.add('jux-canvas-area--dragover');
+        });
+        this._canvasEl.addEventListener('dragleave', () => {
+            this._canvasEl.classList.remove('jux-canvas-area--dragover');
+        });
+        this._canvasEl.addEventListener('drop', (e) => {
+            e.preventDefault();
+            this._canvasEl.classList.remove('jux-canvas-area--dragover');
+            const type = e.dataTransfer?.getData('text/plain');
+            const category = e.dataTransfer?.getData('application/x-category');
+            if (type && category) {
+                const rect = this._canvasEl.getBoundingClientRect();
+                this.addItemToCanvas(type, category, e.clientX - rect.left, e.clientY - rect.top);
+            }
+        });
+        canvasWrapper.appendChild(this._canvasEl);
+        el.appendChild(canvasWrapper);
+        // ── Properties Panel ──
+        this._propertiesEl = this._buildPropertiesPanel();
+        el.appendChild(this._propertiesEl);
+        return el;
+    }
+    // ── Inventory ──
+    _buildInventoryPanel() {
+        const panel = document.createElement('div');
+        panel.className = 'jux-canvas-inventory';
+        panel.style.width = this._opts.inventoryWidth;
+        const panelTitle = document.createElement('div');
+        panelTitle.className = 'jux-canvas-panel-title';
+        panelTitle.textContent = 'Inventory';
+        panel.appendChild(panelTitle);
+        const categories = [
+            { key: 'shapes', label: 'Shapes', icon: '◻' },
+            { key: 'widgets', label: 'Widgets', icon: '⚙' },
+            { key: 'components', label: 'Components', icon: '◈' },
+        ];
+        for (const cat of categories) {
+            const section = document.createElement('div');
+            section.className = 'jux-canvas-inv-section';
+            const sectionLabel = document.createElement('div');
+            sectionLabel.className = 'jux-canvas-inv-label';
+            sectionLabel.textContent = `${cat.icon} ${cat.label}`;
+            section.appendChild(sectionLabel);
+            const entries = DEFAULT_INVENTORY.filter(e => e.category === cat.key);
+            for (const entry of entries) {
+                const item = document.createElement('div');
+                item.className = 'jux-canvas-inv-item';
+                item.textContent = entry.label;
+                item.setAttribute('draggable', 'true');
+                item.addEventListener('dragstart', (e) => {
+                    e.dataTransfer?.setData('text/plain', entry.type);
+                    e.dataTransfer?.setData('application/x-category', entry.category);
+                    item.classList.add('jux-canvas-inv-item--dragging');
+                });
+                item.addEventListener('dragend', () => {
+                    item.classList.remove('jux-canvas-inv-item--dragging');
+                });
+                // Click to add
+                item.addEventListener('click', () => {
+                    this.addItemToCanvas(entry.type, entry.category);
+                });
+                section.appendChild(item);
+            }
+            panel.appendChild(section);
+        }
+        return panel;
+    }
+    // ── Properties Panel ──
+    _buildPropertiesPanel() {
+        const panel = document.createElement('div');
+        panel.className = 'jux-canvas-properties';
+        panel.style.width = this._opts.propertiesWidth;
+        const panelTitle = document.createElement('div');
+        panelTitle.className = 'jux-canvas-panel-title';
+        panelTitle.textContent = 'Properties';
+        panel.appendChild(panelTitle);
+        const content = document.createElement('div');
+        content.className = 'jux-canvas-props-content';
+        content.innerHTML = '<div class="jux-canvas-props-empty">Select a component</div>';
+        panel.appendChild(content);
+        return panel;
+    }
+    // ── Canvas Items ──
+    _renderCanvasItems() {
+        if (!this._canvasEl)
+            return;
+        this._canvasEl.innerHTML = '';
+        if (this._items.length === 0) {
+            this._canvasEl.setAttribute('data-empty', 'true');
+            const emptyMsg = document.createElement('div');
+            emptyMsg.className = 'jux-canvas-empty';
+            emptyMsg.textContent = 'Drag components from the inventory or click to add';
+            this._canvasEl.appendChild(emptyMsg);
+            return;
+        }
+        this._canvasEl.removeAttribute('data-empty');
+        for (const item of this._items) {
+            const el = document.createElement('div');
+            el.className = 'jux-canvas-item' + (item.id === this._selectedId ? ' jux-canvas-item--selected' : '');
+            el.setAttribute('data-item-id', item.id);
+            el.style.cssText = `left:${item.x}px;top:${item.y}px;`;
+            // Category badge
+            const badge = document.createElement('span');
+            badge.className = `jux-canvas-item-badge jux-canvas-item-badge--${item.category}`;
+            badge.textContent = item.category === 'shapes' ? '◻' : item.category === 'widgets' ? '⚙' : '◈';
+            el.appendChild(badge);
+            const label = document.createElement('span');
+            label.className = 'jux-canvas-item-label';
+            label.textContent = item.label;
+            el.appendChild(label);
+            // Remove button
+            const removeBtn = document.createElement('span');
+            removeBtn.className = 'jux-canvas-item-remove';
+            removeBtn.textContent = '×';
+            removeBtn.addEventListener('click', (e) => {
+                e.stopPropagation();
+                this.removeItemFromCanvas(item.id);
+            });
+            el.appendChild(removeBtn);
+            // Select on click
+            el.addEventListener('click', () => this._selectItem(item.id));
+            // Drag to reposition
+            el.setAttribute('draggable', 'true');
+            el.addEventListener('dragstart', (e) => {
+                e.dataTransfer?.setData('application/x-canvas-item', item.id);
+                e.dataTransfer.effectAllowed = 'move';
+            });
+            this._canvasEl.appendChild(el);
+        }
+        // Internal reposition drop handler
+        this._canvasEl.addEventListener('drop', (e) => {
+            const itemId = e.dataTransfer?.getData('application/x-canvas-item');
+            if (itemId) {
+                const movedItem = this._items.find(i => i.id === itemId);
+                if (movedItem) {
+                    const rect = this._canvasEl.getBoundingClientRect();
+                    movedItem.x = e.clientX - rect.left;
+                    movedItem.y = e.clientY - rect.top;
+                    this._renderCanvasItems();
+                    this._selectItem(itemId);
+                }
+            }
+        });
+    }
+    // ── Selection & Properties ──
+    _selectItem(itemId) {
+        this._selectedId = itemId;
+        this._activeTab = 'design';
+        // Update selection highlight
+        if (this._canvasEl) {
+            this._canvasEl.querySelectorAll('.jux-canvas-item').forEach(el => {
+                el.classList.toggle('jux-canvas-item--selected', el.getAttribute('data-item-id') === itemId);
+            });
+        }
+        this._renderProperties();
+        if (this._onChange) {
+            this._onChange(this._items.find(i => i.id === itemId) || null);
+        }
+    }
+    _renderProperties() {
+        if (!this._propertiesEl)
+            return;
+        const content = this._propertiesEl.querySelector('.jux-canvas-props-content');
+        if (!content)
+            return;
+        const item = this._items.find(i => i.id === this._selectedId);
+        if (!item) {
+            content.innerHTML = '<div class="jux-canvas-props-empty">Select a component</div>';
+            return;
+        }
+        content.innerHTML = '';
+        // ── Tab Bar ──
+        const tabBar = document.createElement('div');
+        tabBar.className = 'jux-canvas-tab-bar';
+        const tabs = [
+            { key: 'design', label: 'Design' },
+            { key: 'code', label: 'Code' },
+            { key: 'state', label: 'State' },
+        ];
+        for (const tab of tabs) {
+            const btn = document.createElement('button');
+            btn.className = 'jux-canvas-tab' + (tab.key === this._activeTab ? ' jux-canvas-tab--active' : '');
+            btn.textContent = tab.label;
+            btn.addEventListener('click', () => {
+                this._activeTab = tab.key;
+                this._renderProperties();
+            });
+            tabBar.appendChild(btn);
+        }
+        content.appendChild(tabBar);
+        // ── Tab Content ──
+        const tabContent = document.createElement('div');
+        tabContent.className = 'jux-canvas-tab-content';
+        if (this._activeTab === 'design') {
+            this._renderDesignTab(tabContent, item);
+        }
+        else if (this._activeTab === 'code') {
+            this._renderCodeTab(tabContent, item);
+        }
+        else {
+            this._renderStateTab(tabContent, item);
+        }
+        content.appendChild(tabContent);
+    }
+    _renderDesignTab(container, item) {
+        // Header
+        const header = document.createElement('div');
+        header.className = 'jux-canvas-prop-header';
+        header.innerHTML = `<strong>${item.label}</strong><span class="jux-canvas-prop-id">${item.id}</span>`;
+        container.appendChild(header);
+        // Properties
+        const props = this._getPropertiesForType(item.type);
+        for (const prop of props) {
+            const row = document.createElement('div');
+            row.className = 'jux-canvas-prop-row';
+            const label = document.createElement('label');
+            label.className = 'jux-canvas-prop-label';
+            label.textContent = prop.name;
+            row.appendChild(label);
+            const input = document.createElement('input');
+            input.className = 'jux-canvas-prop-input';
+            input.type = prop.inputType || 'text';
+            input.value = prop.defaultValue || '';
+            input.placeholder = prop.placeholder || '';
+            input.addEventListener('change', () => {
+                // Update the code template with new value
+                this._updatePropertyInCode(item, prop.name, input.value);
+            });
+            row.appendChild(input);
+            container.appendChild(row);
+        }
+    }
+    _renderCodeTab(container, item) {
+        const label = document.createElement('div');
+        label.className = 'jux-canvas-code-label';
+        label.textContent = 'Component Code';
+        container.appendChild(label);
+        const textarea = document.createElement('textarea');
+        textarea.className = 'jux-canvas-code-editor';
+        textarea.value = item.code;
+        textarea.spellcheck = false;
+        textarea.addEventListener('change', () => {
+            this.updateItemCode(item.id, textarea.value);
+        });
+        container.appendChild(textarea);
+        // Full page code preview
+        const previewLabel = document.createElement('div');
+        previewLabel.className = 'jux-canvas-code-label';
+        previewLabel.style.marginTop = '12px';
+        previewLabel.textContent = 'Full Page Code';
+        container.appendChild(previewLabel);
+        const preview = document.createElement('pre');
+        preview.className = 'jux-canvas-code-preview';
+        preview.textContent = this._generateFullCode();
+        container.appendChild(preview);
+    }
+    _renderStateTab(container, item) {
+        const header = document.createElement('div');
+        header.className = 'jux-canvas-prop-header';
+        header.innerHTML = `<strong>PageState</strong><span class="jux-canvas-prop-id">pageState['${item.id}']</span>`;
+        container.appendChild(header);
+        // Available state properties
+        const stateProps = [
+            { prop: 'value', desc: 'Current value of the component' },
+            { prop: 'content', desc: 'Text content' },
+            { prop: 'visible', desc: 'Visibility toggle' },
+            { prop: 'disabled', desc: 'Disabled state' },
+            { prop: 'click', desc: 'Click event flag' },
+            { prop: 'change', desc: 'Change event flag' },
+            { prop: 'focus', desc: 'Focus event flag' },
+            { prop: 'hover', desc: 'Hover state flag' },
+        ];
+        for (const sp of stateProps) {
+            const row = document.createElement('div');
+            row.className = 'jux-canvas-state-row';
+            row.innerHTML = `<code>pageState['${item.id}'].${sp.prop}</code><span class="jux-canvas-state-desc">${sp.desc}</span>`;
+            container.appendChild(row);
+        }
+        // Interaction example
+        const exLabel = document.createElement('div');
+        exLabel.className = 'jux-canvas-code-label';
+        exLabel.style.marginTop = '12px';
+        exLabel.textContent = 'Example Interaction';
+        container.appendChild(exLabel);
+        const example = document.createElement('pre');
+        example.className = 'jux-canvas-code-preview';
+        example.textContent = this._generateInteractionExample(item);
+        container.appendChild(example);
+    }
+    // ── Property Definitions ──
+    _getPropertiesForType(type) {
+        const common = [
+            { name: 'class', placeholder: 'CSS class' },
+            { name: 'style', placeholder: 'CSS inline style' },
+        ];
+        switch (type) {
+            case 'button':
+                return [{ name: 'content', placeholder: 'Button text' }, { name: 'variant', placeholder: 'default | outline | ghost' }, ...common];
+            case 'input':
+                return [{ name: 'label', placeholder: 'Field label' }, { name: 'placeholder', placeholder: 'Placeholder' }, { name: 'value', placeholder: 'Default value' }, ...common];
+            case 'select':
+                return [{ name: 'label', placeholder: 'Field label' }, { name: 'placeholder', placeholder: 'Placeholder' }, ...common];
+            case 'checkbox':
+                return [{ name: 'label', placeholder: 'Checkbox label' }, ...common];
+            case 'radio':
+                return [{ name: 'label', placeholder: 'Group label' }, ...common];
+            case 'h1':
+            case 'p':
+            case 'span':
+            case 'tag':
+                return [{ name: 'content', placeholder: 'Text content' }, { name: 'tag', placeholder: 'HTML tag' }, ...common];
+            case 'link':
+                return [{ name: 'content', placeholder: 'Link text' }, { name: 'href', placeholder: 'URL' }, ...common];
+            case 'c':
+                return [{ name: 'width', placeholder: '100%' }, { name: 'height', placeholder: 'auto' }, { name: 'padding', placeholder: '16px' }, ...common];
+            case 'flex':
+            case 'flexRow':
+            case 'flexCol':
+                return [{ name: 'gap', placeholder: '8px' }, { name: 'justify', placeholder: 'flex-start' }, { name: 'align', placeholder: 'stretch' }, ...common];
+            case 'sidebar':
+                return [{ name: 'title', placeholder: 'App Name' }, { name: 'width', placeholder: '260px' }, ...common];
+            case 'tabs':
+                return [{ name: 'defaultTab', placeholder: 'First tab ID' }, ...common];
+            default:
+                return common;
+        }
+    }
+    _updatePropertyInCode(item, propName, value) {
+        const escapedValue = JSON.stringify(value).slice(1, -1);
+        const escapedProp = propName.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+        if (item.code.includes(`${propName}:`)) {
+            item.code = item.code.replace(new RegExp(`${escapedProp}:\\s*'[^']*'`), `${propName}: '${escapedValue}'`);
+        }
+    }
+    // ── Code Generation ──
+    _generateFullCode() {
+        const lines = [
+            "import { jux, pageState, c, g, flex } from 'juxscript';",
+            '',
+        ];
+        for (const item of this._items) {
+            lines.push(`const ${item.id.replace(/-/g, '_')} = ${item.code};`);
+        }
+        return lines.join('\n');
+    }
+    _generateInteractionExample(item) {
+        const others = this._items.filter(i => i.id !== item.id);
+        if (others.length === 0) {
+            return `if (pageState['${item.id}'].click) {\n  console.log('${item.label} clicked!');\n}`;
+        }
+        const other = others[0];
+        return `if (pageState['${item.id}'].click) {\n  pageState['${other.id}'].value = 'Updated!';\n}`;
+    }
+    // ═══════════════════════════════════════════════════════════
+    // STYLES
+    // ═══════════════════════════════════════════════════════════
+    _injectStyles() {
+        if (canvasStylesInjected)
+            return;
+        canvasStylesInjected = true;
+        const s = document.createElement('style');
+        s.id = 'jux-canvas-styles';
+        s.textContent = `
+.jux-canvas{font-family:var(--font-sans,system-ui,sans-serif);background:hsl(var(--background,0 0% 100%));color:hsl(var(--foreground,222.2 84% 4.9%));border:1px solid hsl(var(--border,214.3 31.8% 91.4%));border-radius:var(--radius,8px);overflow:hidden}
+.jux-canvas-header{padding:10px 16px;font-weight:600;font-size:14px;border-bottom:1px solid hsl(var(--border,214.3 31.8% 91.4%));background:hsl(var(--card,0 0% 100%))}
+.jux-canvas-center{min-width:0}
+.jux-canvas-area{flex:1;position:relative;overflow:auto;background:hsl(var(--muted,210 40% 96.1%));background-image:radial-gradient(circle,hsl(var(--border,214.3 31.8% 91.4%)) 1px,transparent 1px);background-size:20px 20px;min-height:200px;transition:background .15s}
+.jux-canvas-area--dragover{background-color:hsl(var(--accent,210 40% 93%))}
+.jux-canvas-area[data-empty]{display:flex;align-items:center;justify-content:center}
+.jux-canvas-empty{color:hsl(var(--muted-foreground,215.4 16.3% 46.9%));font-size:13px;text-align:center;padding:40px}
+.jux-canvas-item{position:absolute;display:flex;align-items:center;gap:6px;padding:6px 10px;background:hsl(var(--card,0 0% 100%));border:1px solid hsl(var(--border,214.3 31.8% 91.4%));border-radius:var(--radius,6px);cursor:pointer;font-size:12px;box-shadow:0 1px 3px rgba(0,0,0,.06);transition:box-shadow .15s,border-color .15s;user-select:none;white-space:nowrap}
+.jux-canvas-item:hover{box-shadow:0 2px 6px rgba(0,0,0,.1)}
+.jux-canvas-item--selected{border-color:hsl(var(--primary,222.2 47.4% 11.2%));box-shadow:0 0 0 2px hsl(var(--ring,222.2 84% 4.9%)/0.15)}
+.jux-canvas-item-badge{width:18px;height:18px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:10px;flex-shrink:0}
+.jux-canvas-item-badge--shapes{background:hsl(217 91% 93%);color:hsl(217 91% 40%)}
+.jux-canvas-item-badge--widgets{background:hsl(142 71% 90%);color:hsl(142 71% 35%)}
+.jux-canvas-item-badge--components{background:hsl(25 95% 91%);color:hsl(25 95% 40%)}
+.jux-canvas-item-label{font-weight:500}
+.jux-canvas-item-remove{margin-left:auto;width:16px;height:16px;display:flex;align-items:center;justify-content:center;font-size:14px;color:hsl(var(--muted-foreground,215.4 16.3% 46.9%));cursor:pointer;border-radius:3px}
+.jux-canvas-item-remove:hover{background:hsl(var(--destructive,0 84.2% 60.2%));color:white}
+.jux-canvas-inventory,.jux-canvas-properties{border-right:1px solid hsl(var(--border,214.3 31.8% 91.4%));background:hsl(var(--card,0 0% 100%));overflow-y:auto;flex-shrink:0}
+.jux-canvas-properties{border-right:none;border-left:1px solid hsl(var(--border,214.3 31.8% 91.4%))}
+.jux-canvas-panel-title{padding:10px 12px;font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:hsl(var(--muted-foreground,215.4 16.3% 46.9%));border-bottom:1px solid hsl(var(--border,214.3 31.8% 91.4%))}
+.jux-canvas-inv-section{padding:4px 0}
+.jux-canvas-inv-label{padding:6px 12px 2px;font-size:11px;font-weight:600;color:hsl(var(--muted-foreground,215.4 16.3% 46.9%));text-transform:uppercase;letter-spacing:.04em}
+.jux-canvas-inv-item{padding:5px 12px 5px 20px;font-size:12px;cursor:pointer;transition:background .12s;user-select:none;white-space:nowrap}
+.jux-canvas-inv-item:hover{background:hsl(var(--accent,210 40% 93%))}
+.jux-canvas-inv-item--dragging{opacity:.5}
+.jux-canvas-props-content{padding:0}
+.jux-canvas-props-empty{color:hsl(var(--muted-foreground,215.4 16.3% 46.9%));font-size:12px;padding:20px;text-align:center}
+.jux-canvas-tab-bar{display:flex;border-bottom:1px solid hsl(var(--border,214.3 31.8% 91.4%))}
+.jux-canvas-tab{flex:1;padding:7px 0;text-align:center;font-size:11px;font-weight:500;cursor:pointer;border:none;background:none;color:hsl(var(--muted-foreground,215.4 16.3% 46.9%));transition:color .12s,border-color .12s;border-bottom:2px solid transparent}
+.jux-canvas-tab:hover{color:hsl(var(--foreground,222.2 84% 4.9%))}
+.jux-canvas-tab--active{color:hsl(var(--foreground,222.2 84% 4.9%));border-bottom-color:hsl(var(--primary,222.2 47.4% 11.2%))}
+.jux-canvas-tab-content{padding:10px}
+.jux-canvas-prop-header{margin-bottom:10px;font-size:12px;display:flex;align-items:center;gap:8px}
+.jux-canvas-prop-id{font-size:10px;color:hsl(var(--muted-foreground,215.4 16.3% 46.9%));font-family:monospace;background:hsl(var(--muted,210 40% 96.1%));padding:1px 5px;border-radius:3px}
+.jux-canvas-prop-row{display:flex;align-items:center;gap:6px;margin-bottom:6px}
+.jux-canvas-prop-label{font-size:11px;font-weight:500;width:60px;flex-shrink:0;color:hsl(var(--muted-foreground,215.4 16.3% 46.9%))}
+.jux-canvas-prop-input{flex:1;padding:4px 6px;font-size:11px;border:1px solid hsl(var(--border,214.3 31.8% 91.4%));border-radius:4px;background:hsl(var(--background,0 0% 100%));color:hsl(var(--foreground,222.2 84% 4.9%));font-family:inherit}
+.jux-canvas-prop-input:focus{outline:none;border-color:hsl(var(--ring,222.2 84% 4.9%))}
+.jux-canvas-code-label{font-size:11px;font-weight:600;color:hsl(var(--muted-foreground,215.4 16.3% 46.9%));margin-bottom:4px}
+.jux-canvas-code-editor{width:100%;min-height:80px;padding:6px;font-size:11px;font-family:'Fira Code',monospace;border:1px solid hsl(var(--border,214.3 31.8% 91.4%));border-radius:4px;background:hsl(var(--muted,210 40% 96.1%));color:hsl(var(--foreground,222.2 84% 4.9%));resize:vertical;box-sizing:border-box}
+.jux-canvas-code-preview{font-size:10px;font-family:'Fira Code',monospace;background:hsl(var(--muted,210 40% 96.1%));padding:8px;border-radius:4px;overflow-x:auto;white-space:pre;margin:0;color:hsl(var(--foreground,222.2 84% 4.9%));border:1px solid hsl(var(--border,214.3 31.8% 91.4%))}
+.jux-canvas-state-row{padding:4px 0;font-size:11px;display:flex;flex-direction:column;gap:1px;border-bottom:1px solid hsl(var(--border,214.3 31.8% 91.4%)/0.5)}
+.jux-canvas-state-row code{font-family:'Fira Code',monospace;font-size:10px;color:hsl(var(--primary,222.2 47.4% 11.2%))}
+.jux-canvas-state-desc{font-size:10px;color:hsl(var(--muted-foreground,215.4 16.3% 46.9%))}
+`;
+        document.head.appendChild(s);
+    }
+}
+// ═══════════════════════════════════════════════════════════
+// FACTORY
+// ═══════════════════════════════════════════════════════════
+export function canvas(id, options = {}) {
+    const cv = new Canvas(id, options);
+    pageState.__register(cv);
+    return cv;
+}
+export { Canvas };
+export default canvas;
+//# sourceMappingURL=canvas.js.map