juxscript 1.1.401 → 1.1.403

package/dist/widgets/canvas.js

@@ -0,0 +1,1008 @@
+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;
+//# sourceMappingURL=canvas.js.map