juxscript 1.1.403 → 1.1.408

package/dist/widgets/canvas.js

@@ -1,1008 +1,4 @@
-import { pageState } from '../state/pageState.js';
-import generateId from '../utils/idgen.js';
-// ═══════════════════════════════════════════════════════════
-// DEFAULT INVENTORY
-// ═══════════════════════════════════════════════════════════
-const DEFAULT_INVENTORY = [
-    { 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' },
-    { type: 'sidebar', label: 'Sidebar', category: 'widgets' },
-    { type: 'calendar', label: 'Calendar', category: 'widgets' },
-    { type: 'stepper', label: 'Stepper', category: 'widgets' },
-    { type: 'tabs', label: 'Tabs', category: 'widgets' },
-    { 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' },
-];
-// ═══════════════════════════════════════════════════════════
-// DEFAULT PROPS PER TYPE
-// ═══════════════════════════════════════════════════════════
-function defaultProps(type) {
-    switch (type) {
-        case 'c': return { width: '100%', height: 'auto', padding: '16px' };
-        case 'g': return { gap: '8px' };
-        case 'flex': return { direction: 'row', gap: '8px' };
-        case 'flexRow': return { gap: '8px' };
-        case 'flexCol': return { gap: '8px' };
-        case 'button': return { content: 'Click me', variant: 'default' };
-        case 'input': return { label: 'Label', placeholder: 'Type...', value: '' };
-        case 'select': return { label: 'Choose', placeholder: 'Select...' };
-        case 'checkbox': return { label: 'Check me' };
-        case 'radio': return { label: 'Options' };
-        case 'list': return {};
-        case 'table': return {};
-        case 'nav': return {};
-        case 'link': return { content: 'Link', href: '#' };
-        case 'tag': return { content: 'Content' };
-        case 'h1': return { content: 'Heading' };
-        case 'p': return { content: 'Paragraph text' };
-        case 'span': return { content: 'Inline text' };
-        case 'sidebar': return { title: 'Nav', width: '260px' };
-        case 'calendar': return {};
-        case 'stepper': return {};
-        case 'tabs': return {};
-        default: return {};
-    }
-}
-function defaultCode(type, id, props) {
-    switch (type) {
-        case 'c': return `c('${props.width || '100%'}', '${props.height || 'auto'}', '${props.padding || '16px'}')`;
-        case 'g': return `g([])`;
-        case 'flex': return `flex('${props.direction || 'row'}', '${props.gap || '8px'}')`;
-        case 'flexRow': return `flexRow('${props.gap || '8px'}')`;
-        case 'flexCol': return `flexCol('${props.gap || '8px'}')`;
-        case 'button': return `jux.btn('${id}', { content: '${props.content || 'Click me'}' })`;
-        case 'input': return `jux.input('${id}', { label: '${props.label || 'Label'}', placeholder: '${props.placeholder || 'Type...'}' })`;
-        case 'select': return `jux.select('${id}', { label: '${props.label || 'Choose'}', placeholder: '${props.placeholder || 'Select...'}', options: [{ label: 'A', value: 'a' }] })`;
-        case 'checkbox': return `jux.checkbox('${id}', { label: '${props.label || 'Check me'}' })`;
-        case 'radio': return `jux.radio('${id}', { label: '${props.label || 'Options'}', options: [{ label: 'A', value: 'a' }, { label: 'B', value: 'b' }] })`;
-        case 'link': return `jux.link('${id}', { content: '${props.content || 'Link'}', href: '${props.href || '#'}' })`;
-        case 'h1': return `jux.h1('${id}', { content: '${props.content || 'Heading'}' })`;
-        case 'p': return `jux.p('${id}', { content: '${props.content || 'Paragraph text'}' })`;
-        case 'span': return `jux.span('${id}', { content: '${props.content || 'Inline text'}' })`;
-        case 'tag': return `jux.div('${id}', { content: '${props.content || 'Content'}' })`;
-        default: return `jux.${type}('${id}')`;
-    }
-}
-let canvasStylesInjected = false;
-// ═══════════════════════════════════════════════════════════
-// LIVE PREVIEW RENDERER
-// ═══════════════════════════════════════════════════════════
-function renderPreview(item) {
-    const wrapper = document.createElement('div');
-    wrapper.className = 'jux-canvas-preview';
-    switch (item.type) {
-        case 'button': {
-            const btn = document.createElement('button');
-            btn.className = 'jux-canvas-preview-btn';
-            btn.textContent = item.props.content || 'Click me';
-            btn.addEventListener('click', (e) => e.stopPropagation());
-            wrapper.appendChild(btn);
-            break;
-        }
-        case 'input': {
-            const group = document.createElement('div');
-            group.className = 'jux-canvas-preview-field';
-            if (item.props.label) {
-                const lbl = document.createElement('label');
-                lbl.className = 'jux-canvas-preview-label';
-                lbl.textContent = item.props.label;
-                group.appendChild(lbl);
-            }
-            const inp = document.createElement('input');
-            inp.className = 'jux-canvas-preview-input';
-            inp.placeholder = item.props.placeholder || '';
-            inp.value = item.props.value || '';
-            inp.addEventListener('click', (e) => e.stopPropagation());
-            group.appendChild(inp);
-            wrapper.appendChild(group);
-            break;
-        }
-        case 'select': {
-            const group = document.createElement('div');
-            group.className = 'jux-canvas-preview-field';
-            if (item.props.label) {
-                const lbl = document.createElement('label');
-                lbl.className = 'jux-canvas-preview-label';
-                lbl.textContent = item.props.label;
-                group.appendChild(lbl);
-            }
-            const sel = document.createElement('select');
-            sel.className = 'jux-canvas-preview-select';
-            const opt = document.createElement('option');
-            opt.textContent = item.props.placeholder || 'Select...';
-            opt.disabled = true;
-            opt.selected = true;
-            sel.appendChild(opt);
-            sel.addEventListener('click', (e) => e.stopPropagation());
-            group.appendChild(sel);
-            wrapper.appendChild(group);
-            break;
-        }
-        case 'checkbox': {
-            const group = document.createElement('div');
-            group.className = 'jux-canvas-preview-field jux-canvas-preview-inline';
-            const cb = document.createElement('input');
-            cb.type = 'checkbox';
-            cb.className = 'jux-canvas-preview-checkbox';
-            cb.addEventListener('click', (e) => e.stopPropagation());
-            group.appendChild(cb);
-            const lbl = document.createElement('label');
-            lbl.className = 'jux-canvas-preview-label';
-            lbl.textContent = item.props.label || 'Checkbox';
-            group.appendChild(lbl);
-            wrapper.appendChild(group);
-            break;
-        }
-        case 'radio': {
-            const group = document.createElement('div');
-            group.className = 'jux-canvas-preview-field';
-            if (item.props.label) {
-                const lbl = document.createElement('label');
-                lbl.className = 'jux-canvas-preview-label';
-                lbl.textContent = item.props.label;
-                group.appendChild(lbl);
-            }
-            const radioGroup = document.createElement('div');
-            radioGroup.className = 'jux-canvas-preview-radio-group';
-            ['Option A', 'Option B'].forEach((text, i) => {
-                const row = document.createElement('label');
-                row.className = 'jux-canvas-preview-radio-row';
-                const r = document.createElement('input');
-                r.type = 'radio';
-                r.name = `preview-radio-${item.id}`;
-                r.addEventListener('click', (e) => e.stopPropagation());
-                row.appendChild(r);
-                row.appendChild(document.createTextNode(text));
-                radioGroup.appendChild(row);
-            });
-            group.appendChild(radioGroup);
-            wrapper.appendChild(group);
-            break;
-        }
-        case 'link': {
-            const a = document.createElement('a');
-            a.className = 'jux-canvas-preview-link';
-            a.textContent = item.props.content || 'Link';
-            a.href = 'javascript:void(0)';
-            a.addEventListener('click', (e) => e.stopPropagation());
-            wrapper.appendChild(a);
-            break;
-        }
-        case 'h1': {
-            const h = document.createElement('h3');
-            h.className = 'jux-canvas-preview-heading';
-            h.textContent = item.props.content || 'Heading';
-            wrapper.appendChild(h);
-            break;
-        }
-        case 'p': {
-            const p = document.createElement('p');
-            p.className = 'jux-canvas-preview-text';
-            p.textContent = item.props.content || 'Paragraph text';
-            wrapper.appendChild(p);
-            break;
-        }
-        case 'span': {
-            const sp = document.createElement('span');
-            sp.className = 'jux-canvas-preview-text';
-            sp.textContent = item.props.content || 'Inline text';
-            wrapper.appendChild(sp);
-            break;
-        }
-        case 'tag': {
-            const d = document.createElement('div');
-            d.className = 'jux-canvas-preview-tag';
-            d.textContent = item.props.content || 'Content';
-            wrapper.appendChild(d);
-            break;
-        }
-        case 'nav': {
-            const nav = document.createElement('nav');
-            nav.className = 'jux-canvas-preview-nav';
-            ['Home', 'About', 'Contact'].forEach(text => {
-                const a = document.createElement('a');
-                a.className = 'jux-canvas-preview-nav-item';
-                a.textContent = text;
-                a.href = 'javascript:void(0)';
-                a.addEventListener('click', (e) => e.stopPropagation());
-                nav.appendChild(a);
-            });
-            wrapper.appendChild(nav);
-            break;
-        }
-        case 'list': {
-            const ul = document.createElement('ul');
-            ul.className = 'jux-canvas-preview-list';
-            ['Item 1', 'Item 2', 'Item 3'].forEach(text => {
-                const li = document.createElement('li');
-                li.textContent = text;
-                ul.appendChild(li);
-            });
-            wrapper.appendChild(ul);
-            break;
-        }
-        case 'table': {
-            const table = document.createElement('table');
-            table.className = 'jux-canvas-preview-table';
-            const thead = document.createElement('thead');
-            const hr = document.createElement('tr');
-            ['Name', 'Value'].forEach(h => { const th = document.createElement('th'); th.textContent = h; hr.appendChild(th); });
-            thead.appendChild(hr);
-            table.appendChild(thead);
-            const tbody = document.createElement('tbody');
-            [['Alpha', '1'], ['Beta', '2']].forEach(row => {
-                const tr = document.createElement('tr');
-                row.forEach(cell => { const td = document.createElement('td'); td.textContent = cell; tr.appendChild(td); });
-                tbody.appendChild(tr);
-            });
-            table.appendChild(tbody);
-            wrapper.appendChild(table);
-            break;
-        }
-        // Container/layout shapes
-        case 'c': {
-            const d = document.createElement('div');
-            d.className = 'jux-canvas-preview-container';
-            d.style.cssText = `width:${item.props.width || '100%'};min-height:40px;padding:${item.props.padding || '16px'};`;
-            d.textContent = 'Container';
-            wrapper.appendChild(d);
-            break;
-        }
-        case 'flexRow':
-        case 'flex': {
-            const d = document.createElement('div');
-            d.className = 'jux-canvas-preview-flex';
-            d.style.cssText = `display:flex;flex-direction:row;gap:${item.props.gap || '8px'};`;
-            [1, 2, 3].forEach(n => {
-                const child = document.createElement('div');
-                child.className = 'jux-canvas-preview-flex-child';
-                child.textContent = String(n);
-                d.appendChild(child);
-            });
-            wrapper.appendChild(d);
-            break;
-        }
-        case 'flexCol': {
-            const d = document.createElement('div');
-            d.className = 'jux-canvas-preview-flex';
-            d.style.cssText = `display:flex;flex-direction:column;gap:${item.props.gap || '8px'};`;
-            [1, 2].forEach(n => {
-                const child = document.createElement('div');
-                child.className = 'jux-canvas-preview-flex-child';
-                child.textContent = String(n);
-                d.appendChild(child);
-            });
-            wrapper.appendChild(d);
-            break;
-        }
-        case 'g': {
-            const d = document.createElement('div');
-            d.className = 'jux-canvas-preview-group';
-            d.textContent = 'Group';
-            wrapper.appendChild(d);
-            break;
-        }
-        // Widgets — placeholder previews
-        case 'sidebar': {
-            const d = document.createElement('div');
-            d.className = 'jux-canvas-preview-widget';
-            d.innerHTML = `<div style="font-weight:600;font-size:12px;margin-bottom:4px;">${item.props.title || 'Sidebar'}</div><div style="font-size:11px;color:#888;">• Home<br>• About<br>• Contact</div>`;
-            wrapper.appendChild(d);
-            break;
-        }
-        case 'calendar': {
-            const d = document.createElement('div');
-            d.className = 'jux-canvas-preview-widget';
-            d.innerHTML = `<div style="font-weight:600;font-size:12px;margin-bottom:4px;">📅 Calendar</div><div style="font-size:10px;color:#888;font-family:monospace;">Mo Tu We Th Fr<br>  1  2  3  4  5<br>  6  7  8  9 10</div>`;
-            wrapper.appendChild(d);
-            break;
-        }
-        case 'stepper': {
-            const d = document.createElement('div');
-            d.className = 'jux-canvas-preview-widget';
-            d.innerHTML = `<div style="display:flex;align-items:center;gap:4px;font-size:11px;"><span style="width:18px;height:18px;border-radius:50%;background:#3b82f6;color:white;display:flex;align-items:center;justify-content:center;font-size:10px;">1</span>→<span style="width:18px;height:18px;border-radius:50%;background:#e5e7eb;color:#666;display:flex;align-items:center;justify-content:center;font-size:10px;">2</span>→<span style="width:18px;height:18px;border-radius:50%;background:#e5e7eb;color:#666;display:flex;align-items:center;justify-content:center;font-size:10px;">3</span></div>`;
-            wrapper.appendChild(d);
-            break;
-        }
-        case 'tabs': {
-            const d = document.createElement('div');
-            d.className = 'jux-canvas-preview-widget';
-            d.innerHTML = `<div style="display:flex;gap:0;font-size:11px;border-bottom:1px solid #e5e7eb;"><span style="padding:4px 10px;border-bottom:2px solid #3b82f6;font-weight:600;">Tab 1</span><span style="padding:4px 10px;color:#888;">Tab 2</span><span style="padding:4px 10px;color:#888;">Tab 3</span></div>`;
-            wrapper.appendChild(d);
-            break;
-        }
-        default: {
-            const d = document.createElement('div');
-            d.className = 'jux-canvas-preview-generic';
-            d.textContent = item.label;
-            wrapper.appendChild(d);
-        }
-    }
-    return wrapper;
-}
-// ═══════════════════════════════════════════════════════════
-// 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._dragOverItemId = null;
-        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 COMPAT
-    // ═══════════════════════════════════════════════════════════
-    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, beforeId) {
-        this._counter++;
-        const itemId = `${type}-${this._counter}`;
-        const entry = DEFAULT_INVENTORY.find(e => e.type === type);
-        const props = defaultProps(type);
-        const item = {
-            id: itemId,
-            type,
-            category,
-            label: entry?.label || type,
-            code: defaultCode(type, itemId, props),
-            props,
-        };
-        if (beforeId) {
-            const idx = this._items.findIndex(i => i.id === beforeId);
-            if (idx >= 0) {
-                this._items.splice(idx, 0, item);
-            }
-            else {
-                this._items.push(item);
-            }
-        }
-        else {
-            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._renderProperties();
-        }
-        this._renderCanvasItems();
-        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;
-    }
-    updateItemProps(itemId, propName, value) {
-        const item = this._items.find(i => i.id === itemId);
-        if (item) {
-            item.props[propName] = value;
-            item.code = defaultCode(item.type, item.id, item.props);
-            this._renderCanvasItems();
-            // Re-select to update properties if needed
-            if (this._selectedId === itemId) {
-                this._renderProperties();
-            }
-        }
-        return this;
-    }
-    moveItem(itemId, beforeId) {
-        const idx = this._items.findIndex(i => i.id === itemId);
-        if (idx < 0)
-            return this;
-        const [item] = this._items.splice(idx, 1);
-        if (beforeId) {
-            const targetIdx = this._items.findIndex(i => i.id === beforeId);
-            if (targetIdx >= 0) {
-                this._items.splice(targetIdx, 0, item);
-            }
-            else {
-                this._items.push(item);
-            }
-        }
-        else {
-            this._items.push(item);
-        }
-        this._renderCanvasItems();
-        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 || ''}`;
-        this._inventoryEl = this._buildInventoryPanel();
-        el.appendChild(this._inventoryEl);
-        const canvasWrapper = document.createElement('div');
-        canvasWrapper.className = 'jux-canvas-center';
-        canvasWrapper.style.cssText = `flex:1;display:flex;flex-direction:column;overflow:hidden;`;
-        const header = document.createElement('div');
-        header.className = 'jux-canvas-header';
-        header.textContent = this._opts.title;
-        canvasWrapper.appendChild(header);
-        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 from inventory onto empty canvas
-        this._canvasEl.addEventListener('dragover', (e) => {
-            e.preventDefault();
-            this._canvasEl.classList.add('jux-canvas-area--dragover');
-        });
-        this._canvasEl.addEventListener('dragleave', (e) => {
-            // Only remove if leaving the canvas itself
-            if (e.relatedTarget && this._canvasEl.contains(e.relatedTarget))
-                return;
-            this._canvasEl.classList.remove('jux-canvas-area--dragover');
-        });
-        this._canvasEl.addEventListener('drop', (e) => {
-            e.preventDefault();
-            this._canvasEl.classList.remove('jux-canvas-area--dragover');
-            // New item from inventory
-            const type = e.dataTransfer?.getData('text/plain');
-            const category = e.dataTransfer?.getData('application/x-category');
-            const moveId = e.dataTransfer?.getData('application/x-canvas-move');
-            if (moveId) {
-                this.moveItem(moveId, null);
-            }
-            else if (type && category) {
-                this.addItemToCanvas(type, category);
-            }
-        });
-        canvasWrapper.appendChild(this._canvasEl);
-        el.appendChild(canvasWrapper);
-        this._propertiesEl = this._buildPropertiesPanel();
-        el.appendChild(this._propertiesEl);
-        return el;
-    }
-    _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.toUpperCase()}`;
-            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');
-                });
-                item.addEventListener('click', () => {
-                    this.addItemToCanvas(entry.type, entry.category);
-                });
-                section.appendChild(item);
-            }
-            panel.appendChild(section);
-        }
-        return 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 (flow-based) ──
-    _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.setAttribute('draggable', 'true');
-            // Category badge (small, top-left corner)
-            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);
-            // 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);
-            // Live preview
-            const preview = renderPreview(item);
-            el.appendChild(preview);
-            // Select on click
-            el.addEventListener('click', () => this._selectItem(item.id));
-            // Drag to reorder
-            el.addEventListener('dragstart', (e) => {
-                e.dataTransfer?.setData('application/x-canvas-move', item.id);
-                e.dataTransfer.effectAllowed = 'move';
-                el.classList.add('jux-canvas-item--dragging');
-            });
-            el.addEventListener('dragend', () => {
-                el.classList.remove('jux-canvas-item--dragging');
-                // Clear all drop indicators
-                this._canvasEl?.querySelectorAll('.jux-canvas-item--drop-before').forEach(n => n.classList.remove('jux-canvas-item--drop-before'));
-            });
-            el.addEventListener('dragover', (e) => {
-                e.preventDefault();
-                e.stopPropagation();
-                // Show drop indicator
-                this._canvasEl?.querySelectorAll('.jux-canvas-item--drop-before').forEach(n => n.classList.remove('jux-canvas-item--drop-before'));
-                el.classList.add('jux-canvas-item--drop-before');
-            });
-            el.addEventListener('dragleave', () => {
-                el.classList.remove('jux-canvas-item--drop-before');
-            });
-            el.addEventListener('drop', (e) => {
-                e.preventDefault();
-                e.stopPropagation();
-                el.classList.remove('jux-canvas-item--drop-before');
-                const moveId = e.dataTransfer?.getData('application/x-canvas-move');
-                const type = e.dataTransfer?.getData('text/plain');
-                const category = e.dataTransfer?.getData('application/x-category');
-                if (moveId && moveId !== item.id) {
-                    this.moveItem(moveId, item.id);
-                }
-                else if (type && category) {
-                    this.addItemToCanvas(type, category, item.id);
-                }
-            });
-            this._canvasEl.appendChild(el);
-        }
-    }
-    // ── Selection (preserves active tab) ──
-    _selectItem(itemId) {
-        const changed = this._selectedId !== itemId;
-        this._selectedId = itemId;
-        // Do NOT reset _activeTab — preserve whatever tab the user was on
-        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);
-        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) {
-        const header = document.createElement('div');
-        header.className = 'jux-canvas-prop-header';
-        header.innerHTML = `<strong>Component Code</strong>`;
-        container.appendChild(header);
-        // Show current code as editable single-line
-        const codeInput = document.createElement('textarea');
-        codeInput.className = 'jux-canvas-code-editor jux-canvas-code-editor--small';
-        codeInput.value = item.code;
-        codeInput.spellcheck = false;
-        codeInput.rows = 2;
-        codeInput.addEventListener('change', () => {
-            this.updateItemCode(item.id, codeInput.value);
-        });
-        container.appendChild(codeInput);
-        // Editable props
-        const propsHeader = document.createElement('div');
-        propsHeader.className = 'jux-canvas-prop-header';
-        propsHeader.style.marginTop = '12px';
-        propsHeader.innerHTML = `<strong>Properties</strong>`;
-        container.appendChild(propsHeader);
-        const propDefs = this._getPropertiesForType(item.type);
-        for (const prop of propDefs) {
-            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 = item.props[prop.name] || prop.defaultValue || '';
-            input.placeholder = prop.placeholder || '';
-            input.addEventListener('change', () => {
-                this.updateItemProps(item.id, 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);
-        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);
-        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);
-        }
-        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);
-    }
-    _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' }, ...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' }, ...common];
-            case 'sidebar':
-                return [{ name: 'title', placeholder: 'App Name' }, { name: 'width', placeholder: '260px' }, ...common];
-            default:
-                return common;
-        }
-    }
-    _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;display:flex;flex-direction:column;gap:8px;padding:16px;align-items:flex-start}
-.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:relative;display:block;background:hsl(var(--card,0 0% 100%));border:2px solid transparent;border-radius:var(--radius,8px);cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.06);transition:box-shadow .15s,border-color .15s;user-select:none;min-width:120px;max-width:100%}
-.jux-canvas-item:hover{box-shadow:0 2px 8px rgba(0,0,0,.1);border-color:hsl(var(--border,214.3 31.8% 91.4%))}
-.jux-canvas-item--selected{border-color:hsl(var(--primary,222.2 47.4% 11.2%));box-shadow:0 0 0 3px hsl(var(--ring,222.2 84% 4.9%)/0.12)}
-.jux-canvas-item--dragging{opacity:.4}
-.jux-canvas-item--drop-before{border-top:3px solid hsl(var(--primary,222.2 47.4% 11.2%))!important}
-.jux-canvas-item-badge{position:absolute;top:4px;left:4px;width:16px;height:16px;border-radius:3px;display:flex;align-items:center;justify-content:center;font-size:9px;z-index:1;pointer-events:none}
-.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-remove{position:absolute;top:4px;right:4px;width:18px;height:18px;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:4px;z-index:1;opacity:0;transition:opacity .15s}
-.jux-canvas-item:hover .jux-canvas-item-remove{opacity:1}
-.jux-canvas-item-remove:hover{background:hsl(var(--destructive,0 84.2% 60.2%));color:white}
-
-/* Live preview wrapper */
-.jux-canvas-preview{padding:10px 12px;pointer-events:none}
-.jux-canvas-item--selected .jux-canvas-preview{pointer-events:auto}
-
-/* Preview component styles */
-.jux-canvas-preview-btn{padding:6px 16px;font-size:12px;font-weight:500;border:1px solid hsl(var(--border,214.3 31.8% 91.4%));border-radius:var(--radius,6px);background:hsl(var(--primary,222.2 47.4% 11.2%));color:hsl(var(--primary-foreground,210 40% 98%));cursor:pointer;font-family:inherit}
-.jux-canvas-preview-field{display:flex;flex-direction:column;gap:4px;min-width:160px}
-.jux-canvas-preview-inline{flex-direction:row;align-items:center;gap:6px}
-.jux-canvas-preview-label{font-size:11px;font-weight:500;color:hsl(var(--foreground,222.2 84% 4.9%))}
-.jux-canvas-preview-input,.jux-canvas-preview-select{padding:5px 8px;font-size:12px;border:1px solid hsl(var(--border,214.3 31.8% 91.4%));border-radius:var(--radius,6px);background:hsl(var(--background,0 0% 100%));font-family:inherit;color:hsl(var(--foreground,222.2 84% 4.9%))}
-.jux-canvas-preview-checkbox{width:14px;height:14px}
-.jux-canvas-preview-radio-group{display:flex;flex-direction:column;gap:3px}
-.jux-canvas-preview-radio-row{display:flex;align-items:center;gap:5px;font-size:11px;cursor:pointer}
-.jux-canvas-preview-link{font-size:12px;color:hsl(var(--primary,222.2 47.4% 11.2%));text-decoration:underline;cursor:pointer}
-.jux-canvas-preview-heading{font-size:16px;font-weight:700;margin:0}
-.jux-canvas-preview-text{font-size:12px;margin:0;color:hsl(var(--foreground,222.2 84% 4.9%))}
-.jux-canvas-preview-tag{font-size:12px;padding:4px 8px;background:hsl(var(--muted,210 40% 96.1%));border-radius:4px;display:inline-block}
-.jux-canvas-preview-nav{display:flex;flex-direction:column;gap:2px}
-.jux-canvas-preview-nav-item{font-size:11px;color:hsl(var(--foreground,222.2 84% 4.9%));text-decoration:none;padding:3px 8px;border-radius:4px}
-.jux-canvas-preview-nav-item:hover{background:hsl(var(--accent,210 40% 93%))}
-.jux-canvas-preview-list{margin:0;padding-left:16px;font-size:11px;list-style:disc}
-.jux-canvas-preview-list li{padding:1px 0}
-.jux-canvas-preview-table{font-size:11px;border-collapse:collapse;width:100%}
-.jux-canvas-preview-table th,.jux-canvas-preview-table td{padding:3px 8px;border:1px solid hsl(var(--border,214.3 31.8% 91.4%));text-align:left}
-.jux-canvas-preview-table th{background:hsl(var(--muted,210 40% 96.1%));font-weight:600}
-.jux-canvas-preview-container{border:1px dashed hsl(var(--border,214.3 31.8% 91.4%));border-radius:6px;display:flex;align-items:center;justify-content:center;color:hsl(var(--muted-foreground,215.4 16.3% 46.9%));font-size:11px}
-.jux-canvas-preview-flex{min-height:30px}
-.jux-canvas-preview-flex-child{padding:4px 12px;background:hsl(var(--muted,210 40% 96.1%));border:1px solid hsl(var(--border,214.3 31.8% 91.4%));border-radius:4px;font-size:11px;text-align:center}
-.jux-canvas-preview-group{border:1px dashed hsl(var(--border,214.3 31.8% 91.4%));padding:8px;border-radius:6px;font-size:11px;color:hsl(var(--muted-foreground,215.4 16.3% 46.9%));text-align:center}
-.jux-canvas-preview-widget{padding:6px;background:hsl(var(--muted,210 40% 96.1%));border-radius:6px;border:1px solid hsl(var(--border,214.3 31.8% 91.4%))}
-.jux-canvas-preview-generic{font-size:11px;color:hsl(var(--muted-foreground,215.4 16.3% 46.9%));padding:8px;text-align:center}
-
-/* Panels */
-.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:8px 12px 4px;font-size:10px;font-weight:700;color:hsl(var(--muted-foreground,215.4 16.3% 46.9%));letter-spacing:.06em}
-.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:8px;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:70px;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-editor--small{min-height:40px}
-.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;
+// Re-export from canonical location
+export { canvas, Canvas } from '../components/widgets/canvas.js';
+export { canvas as default } from '../components/widgets/canvas.js';
 //# sourceMappingURL=canvas.js.map