juxscript 1.1.404 → 1.1.408

package/dist/widgets/canvas.js

@@ -1,792 +1,4 @@
-import { pageState } from '../state/pageState.js';
-import generateId from '../utils/idgen.js';
-import { btn, button } from '../components/button.js';
-// Dynamic imports for all component factories — add as you have them
-// We build a registry so the evaluated code can reference them
-let componentRegistry = {};
-function getComponentRegistry() {
-    // Lazy-build once
-    if (Object.keys(componentRegistry).length > 0)
-        return componentRegistry;
-    componentRegistry = {
-        btn, button,
-        // Add other component factories here as they exist:
-        // input, select, checkbox, radio, link, h1, p, span, div,
-        // list, table, nav, sidebar, calendar, stepper, tabs,
-    };
-    return componentRegistry;
-}
-const JUX_COMPLETIONS = [
-    { label: 'btn', detail: '(id, opts?) → Button', insertText: "btn('my-btn')", kind: 'function' },
-    { label: 'input', detail: '(id, opts?) → Input', insertText: "input('my-input', { label: 'Name' })", kind: 'function' },
-    { label: 'select', detail: '(id, opts?) → Select', insertText: "select('my-select', { label: 'Choose' })", kind: 'function' },
-    { label: 'checkbox', detail: '(id, opts?) → Checkbox', insertText: "checkbox('my-check', { label: 'Agree' })", kind: 'function' },
-    { label: 'radio', detail: '(id, opts?) → Radio', insertText: "radio('my-radio', { label: 'Pick one' })", kind: 'function' },
-    { label: 'link', detail: '(id, opts?) → Link', insertText: "link('my-link', { href: '#' })", kind: 'function' },
-    { label: 'h1', detail: '(id, opts?) → Heading', insertText: "h1('my-heading')", kind: 'function' },
-    { label: 'p', detail: '(id, opts?) → Paragraph', insertText: "p('my-paragraph')", kind: 'function' },
-    { label: 'span', detail: '(id, opts?) → Span', insertText: "span('my-span')", kind: 'function' },
-    { label: 'div', detail: '(id, opts?) → Div', insertText: "div('my-div')", kind: 'function' },
-    { label: 'list', detail: '(id, opts?) → List', insertText: "list('my-list')", kind: 'function' },
-    { label: 'table', detail: '(id, opts?) → Table', insertText: "table('my-table')", kind: 'function' },
-    { label: 'nav', detail: '(id, opts?) → Nav', insertText: "nav('my-nav')", kind: 'function' },
-    { label: 'sidebar', detail: '(id, opts?) → Sidebar', insertText: "sidebar('my-sidebar', { title: 'Nav' })", kind: 'function' },
-    { label: 'calendar', detail: '(id, opts?) → Calendar', insertText: "calendar('my-calendar')", kind: 'function' },
-    { label: 'stepper', detail: '(id, opts?) → Stepper', insertText: "stepper('my-stepper')", kind: 'function' },
-    { label: 'tabs', detail: '(id, opts?) → Tabs', insertText: "tabs('my-tabs')", kind: 'function' },
-];
-const LAYOUT_COMPLETIONS = [
-    { label: 'c', detail: "(w, h, padding) → Container", insertText: "c('100%', 'auto', '16px')", kind: 'function' },
-    { label: 'g', detail: "(children[]) → Group", insertText: "g([\n  \n])", kind: 'function' },
-    { label: 'flex', detail: "(dir, gap) → Flex", insertText: "flex('row', '8px')", kind: 'function' },
-    { label: 'flexRow', detail: "(gap) → Flex Row", insertText: "flexRow('8px')", kind: 'function' },
-    { label: 'flexCol', detail: "(gap) → Flex Column", insertText: "flexCol('8px')", kind: 'function' },
-];
-const STATE_PROPS = [
-    { label: 'value', detail: 'Current value', insertText: 'value', kind: 'property' },
-    { label: 'content', detail: 'Text content', insertText: 'content', kind: 'property' },
-    { label: 'visible', detail: 'Show/hide (bool)', insertText: 'visible', kind: 'property' },
-    { label: 'disabled', detail: 'Disabled (bool)', insertText: 'disabled', kind: 'property' },
-    { label: 'click', detail: 'Click event flag', insertText: 'click', kind: 'property' },
-    { label: 'change', detail: 'Change event flag', insertText: 'change', kind: 'property' },
-    { label: 'focus', detail: 'Focus event flag', insertText: 'focus', kind: 'property' },
-    { label: 'hover', detail: 'Hover state flag', insertText: 'hover', kind: 'property' },
-    { label: 'class', detail: 'CSS classes', insertText: 'class', kind: 'property' },
-    { label: 'style', detail: 'Inline styles', insertText: 'style', kind: 'property' },
-];
-const KEYWORD_COMPLETIONS = [
-    { label: 'const', detail: 'Declare constant', insertText: 'const ', kind: 'keyword' },
-    { label: 'let', detail: 'Declare variable', insertText: 'let ', kind: 'keyword' },
-    { label: 'if', detail: 'Conditional', insertText: 'if () {\n  \n}', kind: 'keyword' },
-    { label: 'pageState', detail: 'Reactive state', insertText: "pageState['']", kind: 'variable' },
-    { label: 'jux', detail: 'JUX component API', insertText: 'jux.', kind: 'variable' },
-];
-const DEFAULT_CODE = `// Build your page here — real components, real behavior
-const heading = jux.h1('hello-world');
-const description = jux.p('welcome-message');
-
-const nameInput = jux.input('user-name', {
-  label: 'Your Name',
-  placeholder: 'Enter your name...'
-});
-
-const submitBtn = jux.btn('click-me-you-will-like-it');
-
-// Reactivity
-if (pageState['click-me-you-will-like-it'].click) {
-  pageState['welcome-message'].content = 'Hello, ' + pageState['user-name'].value + '!';
-}
-`;
-function compileAndRender(code, previewEl, registry) {
-    // Strip import lines — we inject the API directly
-    const cleanedLines = code.split('\n').map(line => {
-        const trimmed = line.trim();
-        if (trimmed.startsWith('import '))
-            return '// ' + trimmed;
-        return line;
-    });
-    const cleanedCode = cleanedLines.join('\n');
-    // Build a jux proxy that wraps each factory to override target → previewEl
-    const juxProxy = {};
-    const knownFactories = [
-        'btn', 'button', 'input', 'select', 'checkbox', 'radio',
-        'link', 'h1', 'h2', 'h3', 'p', 'span', 'div', 'tag',
-        'list', 'table', 'nav', 'sidebar', 'calendar', 'stepper', 'tabs',
-    ];
-    let componentCount = 0;
-    for (const name of knownFactories) {
-        const realFactory = registry[name];
-        if (realFactory) {
-            juxProxy[name] = (id, opts = {}) => {
-                componentCount++;
-                opts.target = previewEl.id;
-                return realFactory(id, opts);
-            };
-        }
-        else {
-            juxProxy[name] = (id, opts = {}) => {
-                componentCount++;
-                const el = document.createElement('div');
-                el.className = 'jcv-stub';
-                el.setAttribute('data-id', id);
-                el.setAttribute('data-type', name);
-                const niceName = id.replace(/[-_]/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
-                el.innerHTML = `<span class="jcv-stub-type">${name}</span><span class="jcv-stub-id">${id}</span><span class="jcv-stub-content">${opts.content || niceName}</span>`;
-                previewEl.appendChild(el);
-                const fluent = {
-                    id, opts, _element: el,
-                    getElement: () => el,
-                    getValue: () => opts.content || niceName,
-                    setValue: (v) => { const c = el.querySelector('.jcv-stub-content'); if (c)
-                        c.textContent = v; return fluent; },
-                    render: () => fluent, into: () => fluent,
-                    content: (v) => { const c = el.querySelector('.jcv-stub-content'); if (c)
-                        c.textContent = v; return fluent; },
-                    get state() { return pageState[id]; },
-                };
-                if (pageState.__register)
-                    pageState.__register(fluent);
-                return new Proxy(fluent, {
-                    get(target, prop) {
-                        if (prop in target)
-                            return target[prop];
-                        if (typeof prop === 'string' && prop !== 'then' && prop !== 'toJSON' && prop !== Symbol.toPrimitive) {
-                            console.warn(`[JUX IDE] Unknown method .${prop}() on ${name}('${id}')`);
-                            const warn = document.createElement('div');
-                            warn.className = 'jcv-live-warn';
-                            warn.textContent = `⚠ .${prop}() is not a valid method on ${name}`;
-                            previewEl.appendChild(warn);
-                            return () => target;
-                        }
-                        return undefined;
-                    }
-                });
-            };
-        }
-    }
-    const layoutStubs = {
-        c: () => ({ type: 'container' }),
-        g: () => ({ type: 'group' }),
-        flex: () => ({ type: 'flex' }),
-        flexRow: () => ({ type: 'flexRow' }),
-        flexCol: () => ({ type: 'flexCol' }),
-    };
-    const fnArgs = ['jux', 'pageState', 'c', 'g', 'flex', 'flexRow', 'flexCol', 'console'];
-    const fnVals = [juxProxy, pageState, layoutStubs.c, layoutStubs.g, layoutStubs.flex, layoutStubs.flexRow, layoutStubs.flexCol, console];
-    // ── Step 1: Try full parse first (fast path) ──
-    try {
-        const fn = new Function(...fnArgs, cleanedCode);
-        fn(...fnVals);
-        return { success: true, componentCount };
-    }
-    catch (fullErr) {
-        // Fall through to incremental execution
-    }
-    // ── Step 2: Incremental statement execution ──
-    // Split into logical statements and execute one-by-one
-    const statements = splitIntoStatements(cleanedLines);
-    let lastErrorLine;
-    let lastError;
-    let lastErrorContext;
-    for (const stmt of statements) {
-        if (!stmt.code.trim() || stmt.code.trim().startsWith('//'))
-            continue;
-        try {
-            const fn = new Function(...fnArgs, stmt.code);
-            fn(...fnVals);
-        }
-        catch (err) {
-            // Determine exact line within the original source
-            lastErrorLine = stmt.startLine;
-            // Try to narrow it down for multi-line statements
-            const stackMatch = err.stack?.match(/<anonymous>:(\d+)/);
-            if (stackMatch) {
-                const offsetInStmt = parseInt(stackMatch[1], 10) - 2; // Function wrapper adds ~2 lines
-                if (offsetInStmt >= 0) {
-                    lastErrorLine = stmt.startLine + offsetInStmt;
-                }
-            }
-            lastError = err.message || String(err);
-            // Build context: 2 lines before, error line, 2 lines after
-            const originalLines = code.split('\n');
-            const errIdx = lastErrorLine - 1; // 0-based
-            const contextStart = Math.max(0, errIdx - 2);
-            const contextEnd = Math.min(originalLines.length - 1, errIdx + 2);
-            lastErrorContext = [];
-            for (let i = contextStart; i <= contextEnd; i++) {
-                const marker = i === errIdx ? '→' : ' ';
-                lastErrorContext.push(`${marker} ${i + 1} │ ${originalLines[i]}`);
-            }
-            // Stop executing further statements but keep what already rendered
-            break;
-        }
-    }
-    if (lastError) {
-        return {
-            success: false,
-            componentCount,
-            error: lastError,
-            errorLine: lastErrorLine,
-            errorContext: lastErrorContext,
-        };
-    }
-    return { success: true, componentCount };
-}
-/**
- * Split lines into executable statement chunks.
- * Tracks brace/bracket/paren depth to group multi-line statements.
- */
-function splitIntoStatements(lines) {
-    const statements = [];
-    let current = '';
-    let startLine = 1;
-    let depth = 0;
-    for (let i = 0; i < lines.length; i++) {
-        const line = lines[i];
-        const trimmed = line.trim();
-        if (!current && (!trimmed || trimmed.startsWith('//'))) {
-            // Standalone empty/comment line — skip
-            continue;
-        }
-        if (!current) {
-            startLine = i + 1; // 1-based
-        }
-        current += (current ? '\n' : '') + line;
-        // Track depth
-        for (const ch of trimmed) {
-            if (ch === '(' || ch === '{' || ch === '[')
-                depth++;
-            else if (ch === ')' || ch === '}' || ch === ']')
-                depth--;
-        }
-        // Statement is complete when depth returns to 0 and line ends with ; or } or is a standalone expression
-        if (depth <= 0) {
-            if (trimmed.endsWith(';') || trimmed.endsWith('}') || depth === 0) {
-                statements.push({ code: current, startLine });
-                current = '';
-                depth = 0;
-            }
-        }
-    }
-    // Flush remaining (possibly incomplete statement — this will error)
-    if (current.trim()) {
-        statements.push({ code: current, startLine });
-    }
-    return statements;
-}
-let canvasStylesInjected = false;
-// ═══════════════════════════════════════════════════════════
-// CANVAS IDE CLASS
-// ═══════════════════════════════════════════════════════════
-class Canvas {
-    constructor(id, options = {}) {
-        this._el = null;
-        this._editorEl = null;
-        this._lineNumEl = null;
-        this._previewEl = null;
-        this._statusEl = null;
-        this._errorEl = null;
-        this._autocompleteEl = null;
-        this._onChange = null;
-        this._compileTimer = null;
-        this._knownIds = [];
-        this.id = id || generateId('canvas');
-        this._previewId = this.id + '-preview';
-        this._opts = {
-            title: options.title || 'JUX IDE',
-            width: options.width || '100%',
-            height: options.height || '100vh',
-            codePanelWidth: options.codePanelWidth || '50%',
-            ...options,
-        };
-    }
-    _rerenderCanvas() { this._compile(); }
-    // ═══════════════════════════════════════════════════════
-    // 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; }
-    codePanelWidth(val) { this._opts.codePanelWidth = 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._editorEl?.value || ''; }
-    setValue(val) { if (this._editorEl) {
-        this._editorEl.value = val;
-        this._onInput();
-    } return this; }
-    getElement() { return this._el; }
-    getTitle() { return this._opts.title; }
-    setTitle(val) { return this.title(val); }
-    setWidth(val) { return this.width(val); }
-    setHeight(val) { return this.height(val); }
-    get state() { return pageState[this.id]; }
-    // ═══════════════════════════════════════════════════════
-    // 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);
-        requestAnimationFrame(() => this._compile());
-        return this;
-    }
-    into(target) { return this.render(target); }
-    destroy() { pageState.__unregister(this.id); this._el?.remove(); }
-    generateFullCode() { return this._editorEl?.value || ''; }
-    // ═══════════════════════════════════════════════════════
-    // INTERNAL — DOM
-    // ═══════════════════════════════════════════════════════
-    _buildDOM() {
-        const root = document.createElement('div');
-        root.id = this.id;
-        root.className = 'jcv-ide' + (this._opts.class ? ' ' + this._opts.class : '');
-        root.style.cssText = `width:${this._opts.width};height:${this._opts.height};${this._opts.style || ''}`;
-        // ── Toolbar ──
-        const toolbar = document.createElement('div');
-        toolbar.className = 'jcv-toolbar';
-        const titleEl = document.createElement('span');
-        titleEl.className = 'jcv-toolbar-title';
-        titleEl.textContent = this._opts.title;
-        toolbar.appendChild(titleEl);
-        const spacer = document.createElement('span');
-        spacer.style.flex = '1';
-        toolbar.appendChild(spacer);
-        const formatBtn = this._toolbarBtn('Format', () => this._format());
-        toolbar.appendChild(formatBtn);
-        const runBtn = this._toolbarBtn('▶ Run', () => this._compile());
-        runBtn.style.background = 'rgba(166,227,161,.15)';
-        toolbar.appendChild(runBtn);
-        const copyBtn = this._toolbarBtn('Copy', () => {
-            navigator.clipboard?.writeText(this._editorEl?.value || '');
-            copyBtn.textContent = '✓ Copied';
-            setTimeout(() => copyBtn.textContent = 'Copy', 1500);
-        });
-        toolbar.appendChild(copyBtn);
-        this._statusEl = document.createElement('span');
-        this._statusEl.className = 'jcv-toolbar-status jcv-toolbar-status--ok';
-        this._statusEl.textContent = '● Ready';
-        toolbar.appendChild(this._statusEl);
-        root.appendChild(toolbar);
-        // ── Split Pane ──
-        const splitPane = document.createElement('div');
-        splitPane.className = 'jcv-split';
-        // Left: Code editor
-        const codePanel = document.createElement('div');
-        codePanel.className = 'jcv-code-panel';
-        codePanel.style.width = this._opts.codePanelWidth;
-        const editorWrap = document.createElement('div');
-        editorWrap.className = 'jcv-editor-wrap';
-        this._lineNumEl = document.createElement('div');
-        this._lineNumEl.className = 'jcv-line-nums';
-        editorWrap.appendChild(this._lineNumEl);
-        const editorContainer = document.createElement('div');
-        editorContainer.className = 'jcv-editor-container';
-        this._editorEl = document.createElement('textarea');
-        this._editorEl.className = 'jcv-editor';
-        this._editorEl.value = this._opts.initialCode || DEFAULT_CODE;
-        this._editorEl.spellcheck = false;
-        this._editorEl.setAttribute('autocomplete', 'off');
-        this._editorEl.setAttribute('autocorrect', 'off');
-        this._editorEl.setAttribute('autocapitalize', 'off');
-        this._editorEl.addEventListener('input', () => this._onInput());
-        this._editorEl.addEventListener('scroll', () => this._syncScroll());
-        this._editorEl.addEventListener('keydown', (e) => this._onKeyDown(e));
-        this._editorEl.addEventListener('click', () => this._hideAutocomplete());
-        editorContainer.appendChild(this._editorEl);
-        // Error gutter overlay
-        this._errorEl = document.createElement('div');
-        this._errorEl.className = 'jcv-error-bar';
-        this._errorEl.style.display = 'none';
-        editorContainer.appendChild(this._errorEl);
-        // Autocomplete popup
-        this._autocompleteEl = document.createElement('div');
-        this._autocompleteEl.className = 'jcv-autocomplete';
-        this._autocompleteEl.style.display = 'none';
-        editorContainer.appendChild(this._autocompleteEl);
-        editorWrap.appendChild(editorContainer);
-        codePanel.appendChild(editorWrap);
-        splitPane.appendChild(codePanel);
-        // Splitter
-        const handle = document.createElement('div');
-        handle.className = 'jcv-splitter';
-        handle.addEventListener('mousedown', (e) => this._startResize(e, codePanel, splitPane));
-        splitPane.appendChild(handle);
-        // Right: Preview — this is a REAL render target
-        const previewPanel = document.createElement('div');
-        previewPanel.className = 'jcv-preview-panel';
-        const previewHeader = document.createElement('div');
-        previewHeader.className = 'jcv-preview-header';
-        previewHeader.textContent = 'Live Preview';
-        previewPanel.appendChild(previewHeader);
-        this._previewEl = document.createElement('div');
-        this._previewEl.id = this._previewId;
-        this._previewEl.className = 'jcv-preview-area';
-        previewPanel.appendChild(this._previewEl);
-        splitPane.appendChild(previewPanel);
-        root.appendChild(splitPane);
-        return root;
-    }
-    _toolbarBtn(label, onClick) {
-        const btn = document.createElement('button');
-        btn.className = 'jcv-toolbar-btn';
-        btn.textContent = label;
-        btn.addEventListener('click', onClick);
-        return btn;
-    }
-    // ═══════════════════════════════════════════════════════
-    // EDITOR LOGIC
-    // ═══════════════════════════════════════════════════════
-    _onInput() {
-        this._updateLineNumbers();
-        this._scheduleCompile();
-        this._checkAutocomplete();
-    }
-    _updateLineNumbers() {
-        if (!this._lineNumEl || !this._editorEl)
-            return;
-        const count = this._editorEl.value.split('\n').length;
-        let html = '';
-        for (let i = 1; i <= count; i++)
-            html += `<div>${i}</div>`;
-        this._lineNumEl.innerHTML = html;
-    }
-    _syncScroll() {
-        if (!this._editorEl || !this._lineNumEl)
-            return;
-        this._lineNumEl.scrollTop = this._editorEl.scrollTop;
-    }
-    _scheduleCompile() {
-        if (this._compileTimer)
-            clearTimeout(this._compileTimer);
-        this._compileTimer = setTimeout(() => this._compile(), 400);
-    }
-    _compile() {
-        if (!this._editorEl || !this._previewEl || !this._statusEl || !this._errorEl)
-            return;
-        // Clear preview
-        this._previewEl.innerHTML = '';
-        this._errorEl.style.display = 'none';
-        const code = this._editorEl.value;
-        const registry = getComponentRegistry();
-        const result = compileAndRender(code, this._previewEl, registry);
-        // Extract known IDs
-        this._knownIds = [];
-        this._previewEl.querySelectorAll('[data-id]').forEach(el => {
-            const id = el.getAttribute('data-id');
-            if (id)
-                this._knownIds.push(id);
-        });
-        this._previewEl.querySelectorAll('[id]').forEach(el => {
-            if (el.id && el.id !== this._previewId && !this._knownIds.includes(el.id)) {
-                this._knownIds.push(el.id);
-            }
-        });
-        if (result.success) {
-            this._statusEl.className = 'jcv-toolbar-status jcv-toolbar-status--ok';
-            this._statusEl.textContent = `● ${result.componentCount} component${result.componentCount !== 1 ? 's' : ''}`;
-        }
-        else {
-            this._statusEl.className = 'jcv-toolbar-status jcv-toolbar-status--err';
-            this._statusEl.textContent = result.errorLine ? `● Error:${result.errorLine}` : '● Error';
-            // Rich error display in preview
-            const errBlock = document.createElement('div');
-            errBlock.className = 'jcv-live-error-block';
-            const errTitle = document.createElement('div');
-            errTitle.className = 'jcv-live-error-title';
-            errTitle.textContent = result.errorLine
-                ? `Error on line ${result.errorLine}`
-                : 'Syntax Error';
-            errBlock.appendChild(errTitle);
-            const errMsg = document.createElement('div');
-            errMsg.className = 'jcv-live-error-msg';
-            errMsg.textContent = result.error || 'Unknown error';
-            errBlock.appendChild(errMsg);
-            if (result.errorContext && result.errorContext.length > 0) {
-                const errCtx = document.createElement('pre');
-                errCtx.className = 'jcv-live-error-ctx';
-                errCtx.textContent = result.errorContext.join('\n');
-                errBlock.appendChild(errCtx);
-            }
-            this._previewEl.appendChild(errBlock);
-            // Error bar in editor
-            this._errorEl.style.display = 'block';
-            this._errorEl.textContent = result.errorLine
-                ? `Line ${result.errorLine}: ${result.error}`
-                : result.error || 'Error';
-        }
-        if (this._onChange)
-            this._onChange({ code, result });
-    }
-    _format() {
-        if (!this._editorEl)
-            return;
-        const lines = this._editorEl.value.split('\n');
-        let indent = 0;
-        const formatted = lines.map(line => {
-            const trimmed = line.trim();
-            if (!trimmed)
-                return '';
-            if (trimmed.startsWith('}') || trimmed.startsWith(']'))
-                indent = Math.max(0, indent - 1);
-            const result = '  '.repeat(indent) + trimmed;
-            if (trimmed.endsWith('{') || trimmed.endsWith('['))
-                indent++;
-            return result;
-        });
-        this._editorEl.value = formatted.join('\n');
-        this._onInput();
-    }
-    // ═══════════════════════════════════════════════════════
-    // AUTOCOMPLETE / INTELLISENSE
-    // ═══════════════════════════════════════════════════════
-    _checkAutocomplete() {
-        if (!this._editorEl)
-            return;
-        const pos = this._editorEl.selectionStart;
-        const text = this._editorEl.value.substring(0, pos);
-        let items = [];
-        let replaceFrom = pos;
-        const juxDot = text.match(/jux\.(\w*)$/);
-        if (juxDot) {
-            const filter = juxDot[1].toLowerCase();
-            items = JUX_COMPLETIONS.filter(c => c.label.toLowerCase().startsWith(filter));
-            replaceFrom = pos - juxDot[1].length;
-        }
-        const stateDot = text.match(/pageState\['[^']*'\]\.(\w*)$/);
-        if (stateDot) {
-            const filter = stateDot[1].toLowerCase();
-            items = STATE_PROPS.filter(c => c.label.toLowerCase().startsWith(filter));
-            replaceFrom = pos - stateDot[1].length;
-        }
-        const stateId = text.match(/pageState\['([^']*)$/);
-        if (stateId && !stateDot) {
-            const filter = stateId[1].toLowerCase();
-            items = this._knownIds
-                .filter(id => id.toLowerCase().startsWith(filter))
-                .map(id => ({ label: id, detail: 'Component ID', insertText: id, kind: 'variable' }));
-            replaceFrom = pos - stateId[1].length;
-        }
-        const lineStart = text.match(/(?:^|\n)\s*(\w*)$/);
-        if (lineStart && !juxDot && !stateDot && !stateId && lineStart[1].length >= 1) {
-            const filter = lineStart[1].toLowerCase();
-            items = [...LAYOUT_COMPLETIONS, ...KEYWORD_COMPLETIONS].filter(c => c.label.toLowerCase().startsWith(filter));
-            replaceFrom = pos - lineStart[1].length;
-        }
-        if (items.length > 0)
-            this._showAutocomplete(items, replaceFrom);
-        else
-            this._hideAutocomplete();
-    }
-    _showAutocomplete(items, replaceFrom) {
-        if (!this._autocompleteEl || !this._editorEl)
-            return;
-        this._autocompleteEl.innerHTML = '';
-        this._autocompleteEl.style.display = 'block';
-        const coords = this._getCaretCoords();
-        this._autocompleteEl.style.top = (coords.top + 20) + 'px';
-        this._autocompleteEl.style.left = coords.left + 'px';
-        const maxShow = Math.min(items.length, 8);
-        for (let i = 0; i < maxShow; i++) {
-            const item = items[i];
-            const row = document.createElement('div');
-            row.className = 'jcv-ac-item' + (i === 0 ? ' jcv-ac-item--active' : '');
-            const icon = document.createElement('span');
-            icon.className = 'jcv-ac-icon';
-            icon.textContent = item.kind === 'function' ? 'ƒ' : item.kind === 'property' ? '◆' : item.kind === 'keyword' ? '⬥' : '◇';
-            row.appendChild(icon);
-            const label = document.createElement('span');
-            label.className = 'jcv-ac-label';
-            label.textContent = item.label;
-            row.appendChild(label);
-            const detail = document.createElement('span');
-            detail.className = 'jcv-ac-detail';
-            detail.textContent = item.detail;
-            row.appendChild(detail);
-            row.addEventListener('mousedown', (e) => { e.preventDefault(); this._acceptCompletion(item, replaceFrom); });
-            this._autocompleteEl.appendChild(row);
-        }
-        this._autocompleteEl.__items = items.slice(0, maxShow);
-        this._autocompleteEl.__activeIndex = 0;
-        this._autocompleteEl.__replaceFrom = replaceFrom;
-    }
-    _hideAutocomplete() {
-        if (this._autocompleteEl)
-            this._autocompleteEl.style.display = 'none';
-    }
-    _acceptCompletion(item, replaceFrom) {
-        if (!this._editorEl)
-            return;
-        const before = this._editorEl.value.substring(0, replaceFrom);
-        const after = this._editorEl.value.substring(this._editorEl.selectionStart);
-        this._editorEl.value = before + item.insertText + after;
-        const newPos = replaceFrom + item.insertText.length;
-        this._editorEl.selectionStart = newPos;
-        this._editorEl.selectionEnd = newPos;
-        this._editorEl.focus();
-        this._hideAutocomplete();
-        this._onInput();
-    }
-    _onKeyDown(e) {
-        if (!this._autocompleteEl || this._autocompleteEl.style.display === 'none') {
-            if (e.key === 'Tab') {
-                e.preventDefault();
-                const start = this._editorEl.selectionStart;
-                const end = this._editorEl.selectionEnd;
-                this._editorEl.value = this._editorEl.value.substring(0, start) + '  ' + this._editorEl.value.substring(end);
-                this._editorEl.selectionStart = this._editorEl.selectionEnd = start + 2;
-                this._onInput();
-            }
-            return;
-        }
-        const acData = this._autocompleteEl;
-        const items = acData.__items || [];
-        let active = acData.__activeIndex || 0;
-        const replaceFrom = acData.__replaceFrom || 0;
-        if (e.key === 'ArrowDown') {
-            e.preventDefault();
-            active = Math.min(active + 1, items.length - 1);
-            this._setActiveCompletion(active);
-        }
-        else if (e.key === 'ArrowUp') {
-            e.preventDefault();
-            active = Math.max(active - 1, 0);
-            this._setActiveCompletion(active);
-        }
-        else if (e.key === 'Enter' || e.key === 'Tab') {
-            e.preventDefault();
-            if (items[active])
-                this._acceptCompletion(items[active], replaceFrom);
-        }
-        else if (e.key === 'Escape') {
-            e.preventDefault();
-            this._hideAutocomplete();
-        }
-    }
-    _setActiveCompletion(index) {
-        if (!this._autocompleteEl)
-            return;
-        this._autocompleteEl.__activeIndex = index;
-        this._autocompleteEl.querySelectorAll('.jcv-ac-item').forEach((el, i) => {
-            el.classList.toggle('jcv-ac-item--active', i === index);
-        });
-    }
-    _getCaretCoords() {
-        if (!this._editorEl)
-            return { top: 0, left: 0 };
-        const text = this._editorEl.value.substring(0, this._editorEl.selectionStart);
-        const lines = text.split('\n');
-        const lineIndex = lines.length - 1;
-        const colIndex = lines[lineIndex].length;
-        return {
-            top: lineIndex * 20 - this._editorEl.scrollTop,
-            left: Math.min(colIndex * 7.8, 350) + 40,
-        };
-    }
-    // ═══════════════════════════════════════════════════════
-    // RESIZE HANDLE
-    // ═══════════════════════════════════════════════════════
-    _startResize(e, codePanel, splitPane) {
-        e.preventDefault();
-        const startX = e.clientX;
-        const startWidth = codePanel.offsetWidth;
-        const totalWidth = splitPane.offsetWidth;
-        const onMove = (e) => {
-            const delta = e.clientX - startX;
-            const newWidth = Math.max(200, Math.min(totalWidth - 200, startWidth + delta));
-            codePanel.style.width = newWidth + 'px';
-            codePanel.style.flex = 'none';
-        };
-        const onUp = () => { document.removeEventListener('mousemove', onMove); document.removeEventListener('mouseup', onUp); };
-        document.addEventListener('mousemove', onMove);
-        document.addEventListener('mouseup', onUp);
-    }
-    // ═══════════════════════════════════════════════════════
-    // STYLES
-    // ═══════════════════════════════════════════════════════
-    _injectStyles() {
-        if (canvasStylesInjected)
-            return;
-        canvasStylesInjected = true;
-        const s = document.createElement('style');
-        s.id = 'jux-canvas-styles';
-        s.textContent = `
-.jcv-ide{
-  --jcv-bg:#fff;--jcv-fg:#09090b;--jcv-card:#fff;
-  --jcv-muted:#f4f4f5;--jcv-muted-fg:#71717a;--jcv-border:#e4e4e7;
-  --jcv-primary:#18181b;--jcv-primary-fg:#fafafa;--jcv-accent:#f4f4f5;
-  --jcv-ring:#18181b;--jcv-destructive:#ef4444;
-  --jcv-radius:8px;--jcv-radius-sm:6px;--jcv-radius-xs:4px;
-  --jcv-shadow-sm:0 1px 2px 0 rgba(0,0,0,.05);
-  --jcv-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);
-  --jcv-editor-bg:#1e1e2e;--jcv-editor-fg:#cdd6f4;--jcv-editor-line:#313244;
-  --jcv-editor-gutter:#6c7086;--jcv-editor-cursor:#f5e0dc;
-  font-family:ui-sans-serif,system-ui,-apple-system,sans-serif;
-  display:flex;flex-direction:column;background:var(--jcv-bg);color:var(--jcv-fg);
-  border:1px solid var(--jcv-border);border-radius:var(--jcv-radius);overflow:hidden;
-}
-
-/* Toolbar */
-.jcv-toolbar{display:flex;align-items:center;gap:8px;padding:6px 12px;background:var(--jcv-primary);color:var(--jcv-primary-fg);border-bottom:1px solid rgba(255,255,255,.1);min-height:36px}
-.jcv-toolbar-title{font-weight:700;font-size:13px;letter-spacing:-.01em}
-.jcv-toolbar-btn{border:1px solid rgba(255,255,255,.2);background:transparent;color:var(--jcv-primary-fg);padding:4px 12px;font-size:11px;font-weight:500;border-radius:var(--jcv-radius-xs);cursor:pointer;font-family:inherit;transition:background .12s}
-.jcv-toolbar-btn:hover{background:rgba(255,255,255,.1)}
-.jcv-toolbar-status{font-size:11px;font-weight:600;padding:0 8px}
-.jcv-toolbar-status--ok{color:#a6e3a1}
-.jcv-toolbar-status--err{color:#f38ba8}
-
-/* Split */
-.jcv-split{flex:1;display:flex;overflow:hidden}
-.jcv-code-panel{display:flex;flex-direction:column;overflow:hidden;min-width:200px}
-.jcv-preview-panel{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:200px;background:var(--jcv-bg)}
-.jcv-splitter{width:4px;background:var(--jcv-border);cursor:col-resize;flex-shrink:0;transition:background .12s}
-.jcv-splitter:hover{background:var(--jcv-ring)}
-
-/* Editor — single textarea, no overlay */
-.jcv-editor-wrap{flex:1;display:flex;overflow:hidden;background:var(--jcv-editor-bg)}
-.jcv-line-nums{width:44px;padding:12px 0;text-align:right;font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;font-size:13px;line-height:20px;color:var(--jcv-editor-gutter);background:var(--jcv-editor-bg);overflow:hidden;user-select:none;flex-shrink:0;border-right:1px solid var(--jcv-editor-line)}
-.jcv-line-nums div{padding:0 8px 0 0}
-.jcv-editor-container{flex:1;position:relative;overflow:hidden}
-.jcv-editor{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;padding:12px;margin:0;border:none;font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;font-size:13px;line-height:20px;white-space:pre;word-wrap:normal;overflow:auto;box-sizing:border-box;tab-size:2;-moz-tab-size:2;color:var(--jcv-editor-fg);caret-color:var(--jcv-editor-cursor);background:var(--jcv-editor-bg);resize:none;outline:none}
-.jcv-editor::selection{background:rgba(137,180,250,.3)}
-
-/* Error bar */
-.jcv-error-bar{position:absolute;bottom:0;left:0;right:0;padding:4px 12px;font-size:11px;font-family:ui-monospace,monospace;background:#45273a;color:#f38ba8;border-top:1px solid #f38ba855;z-index:5}
-
-/* Autocomplete */
-.jcv-autocomplete{position:absolute;z-index:10;background:#1e1e2e;border:1px solid var(--jcv-editor-line);border-radius:var(--jcv-radius-xs);box-shadow:0 4px 12px rgba(0,0,0,.3);max-height:200px;overflow-y:auto;min-width:260px}
-.jcv-ac-item{display:flex;align-items:center;gap:6px;padding:4px 10px;cursor:pointer;font-size:12px;font-family:ui-monospace,monospace;color:var(--jcv-editor-fg)}
-.jcv-ac-item:hover,.jcv-ac-item--active{background:rgba(137,180,250,.15)}
-.jcv-ac-icon{width:16px;text-align:center;font-size:11px;color:#89b4fa;flex-shrink:0}
-.jcv-ac-label{font-weight:600;flex-shrink:0}
-.jcv-ac-detail{color:var(--jcv-editor-gutter);font-size:11px;margin-left:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
-
-/* Preview */
-.jcv-preview-header{padding:8px 14px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--jcv-muted-fg);border-bottom:1px solid var(--jcv-border);background:var(--jcv-card)}
-.jcv-preview-area{flex:1;overflow:auto;padding:24px;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
-
-/* Errors and warnings in preview */
-.jcv-live-error{color:var(--jcv-destructive);font-size:12px;padding:8px 12px;background:#fef2f2;border:1px solid #fecaca;border-radius:var(--jcv-radius-xs);margin-top:8px;font-family:ui-monospace,monospace;width:100%;box-sizing:border-box}
-.jcv-live-warn{color:#ca8a04;font-size:11px;padding:4px 8px;background:#fefce8;border:1px solid #fef08a;border-radius:var(--jcv-radius-xs);font-family:ui-monospace,monospace;width:100%;box-sizing:border-box}
-
-/* Rich error block in preview */
-.jcv-live-error-block{background:#fef2f2;border:1px solid #fecaca;border-radius:var(--jcv-radius-sm);overflow:hidden;width:100%;box-sizing:border-box;margin-top:4px}
-.jcv-live-error-title{padding:6px 12px;font-size:12px;font-weight:700;color:#dc2626;background:#fee2e2;border-bottom:1px solid #fecaca}
-.jcv-live-error-msg{padding:8px 12px;font-size:12px;font-family:ui-monospace,monospace;color:#991b1b}
-.jcv-live-error-ctx{margin:0;padding:8px 12px;font-size:11px;line-height:18px;font-family:ui-monospace,monospace;background:#fff5f5;color:#71717a;border-top:1px solid #fecaca;overflow-x:auto;white-space:pre}
-.jcv-live-error-ctx .jcv-err-line{color:#dc2626;font-weight:700}
-
-/* Component stubs (for components not yet imported) */
-.jcv-stub{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--jcv-muted);border:1px dashed var(--jcv-border);border-radius:var(--jcv-radius-sm);font-size:13px;color:var(--jcv-fg)}
-.jcv-stub-type{font-size:10px;font-weight:700;text-transform:uppercase;color:var(--jcv-muted-fg);background:var(--jcv-bg);padding:1px 6px;border-radius:3px;border:1px solid var(--jcv-border)}
-.jcv-stub-id{font-size:11px;color:var(--jcv-muted-fg);font-family:ui-monospace,monospace}
-.jcv-stub-content{font-weight:500}
-`;
-        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