juxscript 1.1.404 → 1.1.409

package/dist/components/widgets/canvas.js

@@ -0,0 +1,1359 @@
+import { pageState } from '../../state/pageState.js';
+import generateId from '../../utils/idgen.js';
+import { parseCode } from '../../utils/codeparser.js';
+import { injectCanvasStyles } from './canvas-styles.js';
+import { JUX_COMPLETIONS, LAYOUT_COMPLETIONS, STATE_PROPS, KEYWORD_COMPLETIONS, COMPONENT_REGISTRY, UTILITY_REGISTRY, METHOD_SIGNATURES, LAYOUT_METHODS, SNIPPET_CATEGORIES, } from './canvas-registry.js';
+import { compileAndRender } from './canvas-compile.js';
+import { DEFAULT_TABS, saveTabs, loadTabs } from './canvas-persist.js';
+import { aiSuggest } from './canvas-ai.js';
+const STATE_KEEP_KEYS = new Set([
+    '__watch', '__unwatch', '__register', '__unregister',
+    '__notify', '__clear', '__clearWatchers', '__listeners', '__components', '__store',
+]);
+class Canvas {
+    constructor(id, options = {}) {
+        this._el = null;
+        this._editorEl = null;
+        this._highlightEl = null;
+        this._lineNumEl = null;
+        this._previewEl = null;
+        this._statusEl = null;
+        this._errorEl = null;
+        this._autocompleteEl = null;
+        this._tabBarEl = null;
+        this._pageSidebarEl = null;
+        this._onChange = null;
+        this._compileTimer = null;
+        this._persistTimer = null;
+        this._knownIds = [];
+        this._isCompiling = false;
+        this._clickInterceptAttached = false;
+        this._tabs = [];
+        this._activeTabId = '';
+        this._currentRoute = '/';
+        this._savedNavigateTo = null;
+        this._aiFabEl = null;
+        this._aiChatEl = null;
+        this._aiLoading = false;
+        this._layout = 'left';
+        this._sidebarCollapsed = false;
+        this._splitEl = null;
+        this._codePanelEl = null;
+        this._previewPanelEl = null;
+        this._splitterEl = null;
+        this._sidebarWrapEl = null;
+        this._bodyEl = null;
+        this._snippetMenuEl = null;
+        this._snippetMenuLine = -1;
+        this.id = id || generateId('canvas');
+        this._previewId = this.id + '-preview';
+        this._savedNavigateTo = window.navigateTo || null;
+        this._opts = {
+            title: options.title || 'JUX IDE',
+            width: options.width || '100%',
+            height: options.height || '100vh',
+            codePanelWidth: options.codePanelWidth || '50%',
+            ...options,
+        };
+        this._appName = this._opts.title;
+        if (options.tabs?.length) {
+            this._tabs = options.tabs.map(t => ({ ...t }));
+        }
+        else if (options.initialCode) {
+            this._tabs = [{ id: 'main', label: 'main.jux', code: options.initialCode, isLayout: false, route: '/' }];
+        }
+        else {
+            this._tabs = DEFAULT_TABS.map(t => ({ ...t }));
+        }
+        this._activeTabId = this._tabs[0]?.id || '';
+    }
+    // ── Public fluent API ────────────────────────────────────────────────
+    _rerenderCanvas() { this._compile(); }
+    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; }
+    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]; }
+    generateFullCode() { return this._editorEl?.value || ''; }
+    render(target) {
+        injectCanvasStyles();
+        this._el = this._buildDOM();
+        let cont = null;
+        if (target && typeof target === 'object' && 'element' in target)
+            cont = target.element;
+        else if (target instanceof HTMLElement)
+            cont = target;
+        else if (typeof target === 'string')
+            cont = document.getElementById(target) || document.querySelector(target);
+        else
+            cont = document.getElementById('app');
+        if (cont && this._el)
+            cont.appendChild(this._el);
+        this._updateLineNumbers();
+        this._renderTabBar();
+        this._loadPersistedTabs().then(() => {
+            this._renderTabBar();
+            if (this._editorEl) {
+                const tab = this._getActiveTab();
+                if (tab)
+                    this._editorEl.value = tab.code;
+                this._updateLineNumbers();
+                this._updateHighlight();
+            }
+            requestAnimationFrame(() => this._compile());
+        });
+        return this;
+    }
+    into(target) { return this.render(target); }
+    destroy() {
+        if (this._savedNavigateTo) {
+            window.navigateTo = this._savedNavigateTo;
+        }
+        pageState.__unregister(this.id);
+        // Remove our children from layout regions, but don't touch their styles
+        const navHeader = document.getElementById('app-nav-header');
+        if (navHeader)
+            navHeader.innerHTML = '';
+        const appSidebar = document.getElementById('app-sidebar');
+        if (appSidebar) {
+            appSidebar.innerHTML = '';
+            appSidebar.style.removeProperty('display');
+        }
+        // Reset CSS vars we may have set for sidebar width
+        document.documentElement.style.removeProperty('--app-sidebar-width');
+        document.documentElement.style.removeProperty('--app-nav-header-height');
+        this._el?.remove();
+    }
+    // ── Persistence ──────────────────────────────────────────────────────
+    async _loadPersistedTabs() {
+        const saved = await loadTabs(this._appName);
+        if (saved?.length) {
+            this._tabs = saved;
+            this._activeTabId = this._tabs[0]?.id || '';
+        }
+    }
+    _persistTabs() {
+        if (this._persistTimer)
+            clearTimeout(this._persistTimer);
+        this._persistTimer = setTimeout(() => {
+            const tab = this._getActiveTab();
+            if (tab && this._editorEl)
+                tab.code = this._editorEl.value;
+            saveTabs(this._appName, this._tabs);
+        }, 300);
+    }
+    // ── Tab management ───────────────────────────────────────────────────
+    _getActiveTab() {
+        return this._tabs.find(t => t.id === this._activeTabId);
+    }
+    _switchTab(tabId) {
+        const current = this._getActiveTab();
+        if (current && this._editorEl)
+            current.code = this._editorEl.value;
+        this._activeTabId = tabId;
+        const tab = this._getActiveTab();
+        if (tab && this._editorEl) {
+            this._editorEl.value = tab.code;
+            this._updateLineNumbers();
+            this._updateHighlight();
+        }
+        this._renderTabBar();
+        if (tab && !tab.isLayout && tab.route)
+            this._currentRoute = tab.route;
+        this._scheduleCompile();
+    }
+    _addTab() {
+        const existingRoutes = this._tabs.filter(t => !t.isLayout).map(t => t.route);
+        let newRoute = '/new-page';
+        let counter = 1;
+        while (existingRoutes.includes(newRoute))
+            newRoute = `/new-page-${counter++}`;
+        const slug = newRoute.replace(/^\//, '');
+        const newTab = {
+            id: `tab-${Date.now()}`, label: `${slug}.jux`, isLayout: false, route: newRoute,
+            code: `// ${slug} page (route: ${newRoute})\nconst heading = jux.h1('${slug}-title', { content: '${slug.charAt(0).toUpperCase() + slug.slice(1)}' });\n`,
+        };
+        this._tabs.push(newTab);
+        this._persistTabs();
+        this._switchTab(newTab.id);
+    }
+    _closeTab(tabId) {
+        const tab = this._tabs.find(t => t.id === tabId);
+        if (!tab || tab.isLayout)
+            return;
+        if (this._tabs.filter(t => !t.isLayout).length <= 1)
+            return;
+        this._tabs = this._tabs.filter(t => t.id !== tabId);
+        this._persistTabs();
+        if (this._activeTabId === tabId)
+            this._switchTab(this._tabs[0].id);
+        else
+            this._renderTabBar();
+        this._scheduleCompile();
+    }
+    _renameTab(tabId) {
+        const tab = this._tabs.find(t => t.id === tabId);
+        if (!tab || tab.isLayout)
+            return;
+        const itemEl = this._pageSidebarEl?.querySelector(`.jcv-page-item[data-tab-id="${tabId}"]`);
+        if (!itemEl)
+            return;
+        const labelEl = itemEl.querySelector('.jcv-page-item-label');
+        if (!labelEl)
+            return;
+        const input = document.createElement('input');
+        input.type = 'text';
+        input.className = 'jcv-page-rename-input';
+        input.value = tab.label.replace(/\.jux$/, '');
+        input.style.cssText = 'background:#313244;color:#cdd6f4;border:1px solid #89b4fa;border-radius:3px;font-size:12px;font-family:ui-monospace,monospace;padding:1px 4px;width:100%;box-sizing:border-box;outline:none;';
+        const originalLabel = tab.label;
+        const originalRoute = tab.route;
+        const commit = () => {
+            const raw = input.value.trim();
+            if (!raw) {
+                cancel();
+                return;
+            }
+            const slug = raw.replace(/\.jux$/, '').replace(/[^a-zA-Z0-9_-]/g, '-').toLowerCase();
+            const newLabel = slug + '.jux';
+            const newRoute = '/' + slug;
+            const duplicate = this._tabs.find(t => t.id !== tabId && !t.isLayout && t.route === newRoute);
+            if (duplicate) {
+                input.style.borderColor = '#f38ba8';
+                input.focus();
+                return;
+            }
+            tab.label = newLabel;
+            tab.route = newRoute;
+            if (this._currentRoute === originalRoute) {
+                this._currentRoute = newRoute;
+            }
+            this._persistTabs();
+            this._renderTabBar();
+            this._scheduleCompile(true);
+        };
+        const cancel = () => {
+            tab.label = originalLabel;
+            tab.route = originalRoute;
+            this._renderTabBar();
+        };
+        input.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter') {
+                e.preventDefault();
+                commit();
+            }
+            if (e.key === 'Escape') {
+                e.preventDefault();
+                cancel();
+            }
+        });
+        input.addEventListener('blur', () => commit());
+        labelEl.textContent = '';
+        labelEl.appendChild(input);
+        input.focus();
+        input.select();
+    }
+    _renderTabBar() {
+        if (!this._pageSidebarEl)
+            return;
+        this._pageSidebarEl.innerHTML = '';
+        for (const tab of this._tabs) {
+            const item = document.createElement('button');
+            item.type = 'button';
+            item.className = 'jcv-page-item'
+                + (tab.id === this._activeTabId ? ' jcv-page-item--active' : '')
+                + (tab.isLayout ? ' jcv-page-item--layout' : '');
+            item.setAttribute('data-tab-id', tab.id);
+            const icon = document.createElement('span');
+            icon.className = 'jcv-page-item-icon';
+            icon.textContent = tab.isLayout ? '\u25B3' : '\u25CB';
+            item.appendChild(icon);
+            const labelEl = document.createElement('span');
+            labelEl.className = 'jcv-page-item-label';
+            labelEl.textContent = tab.label;
+            item.appendChild(labelEl);
+            item.addEventListener('click', (e) => {
+                if (e.target.classList.contains('jcv-page-item-close'))
+                    return;
+                if (e.target.tagName === 'INPUT')
+                    return;
+                this._switchTab(tab.id);
+            });
+            if (!tab.isLayout) {
+                item.addEventListener('dblclick', (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    this._renameTab(tab.id);
+                });
+            }
+            if (!tab.isLayout && this._tabs.filter(t => !t.isLayout).length > 1) {
+                const x = document.createElement('span');
+                x.className = 'jcv-page-item-close';
+                x.textContent = '\u00D7';
+                x.addEventListener('click', (e) => { e.stopPropagation(); this._closeTab(tab.id); });
+                item.appendChild(x);
+            }
+            this._pageSidebarEl.appendChild(item);
+        }
+        const addBtn = document.createElement('button');
+        addBtn.type = 'button';
+        addBtn.className = 'jcv-page-sidebar-add';
+        const addIcon = document.createElement('span');
+        addIcon.className = 'jcv-page-sidebar-add-icon';
+        addIcon.textContent = '+';
+        addBtn.appendChild(addIcon);
+        const addLabel = document.createElement('span');
+        addLabel.textContent = 'New Page';
+        addBtn.appendChild(addLabel);
+        addBtn.title = 'Add page';
+        addBtn.addEventListener('click', () => this._addTab());
+        this._pageSidebarEl.appendChild(addBtn);
+    }
+    // ── Navigation ───────────────────────────────────────────────────────
+    _navigatePreview(path) {
+        if (this._isCompiling)
+            return;
+        this._currentRoute = path;
+        const matching = this._tabs.find(t => t.route === path && !t.isLayout);
+        if (matching) {
+            this._pageSidebarEl?.querySelectorAll('.jcv-page-item').forEach(el => {
+                el.classList.toggle('jcv-page-item--routed', el.getAttribute('data-tab-id') === matching.id);
+            });
+        }
+        this._compile();
+    }
+    // ── DOM construction ─────────────────────────────────────────────────
+    _buildDOM() {
+        // Populate #app-nav-header with the toolbar (append only — no inline style overrides)
+        const navHeader = document.getElementById('app-nav-header');
+        if (navHeader) {
+            navHeader.innerHTML = '';
+            navHeader.appendChild(this._buildToolbar());
+            // Set the CSS var so #app offsets correctly
+            document.documentElement.style.setProperty('--app-nav-header-height', '56px');
+        }
+        // Populate #app-sidebar with the page sidebar (append only — no inline style overrides)
+        // Guard against duplicate #app-sidebar elements in the DOM
+        const allSidebars = document.querySelectorAll('#app-sidebar');
+        if (allSidebars.length > 1) {
+            // Keep only the first one, remove duplicates
+            for (let i = 1; i < allSidebars.length; i++) {
+                allSidebars[i].remove();
+            }
+        }
+        const appSidebar = document.getElementById('app-sidebar');
+        if (appSidebar) {
+            appSidebar.innerHTML = '';
+            // Clear any rogue inline display:none set by precompile/router/destroy
+            appSidebar.style.removeProperty('display');
+            appSidebar.appendChild(this._buildPageSidebar());
+        }
+        // Set sidebar width via CSS var only — no inline styles on #app-sidebar
+        document.documentElement.style.setProperty('--app-sidebar-width', '180px');
+        // Do NOT touch #app's inline styles — layout-regions.css handles positioning
+        // via the CSS vars we just set above.
+        const root = document.createElement('div');
+        root.id = this.id;
+        root.className = 'jcv-ide' + (this._opts.class ? ' ' + this._opts.class : '');
+        root.style.cssText = `width:100%;height:100%;${this._opts.style || ''}`;
+        const splitPane = document.createElement('div');
+        splitPane.className = 'jcv-split';
+        this._splitEl = splitPane;
+        const codePanel = this._buildCodePanel();
+        codePanel.style.width = this._opts.codePanelWidth;
+        this._codePanelEl = codePanel;
+        splitPane.appendChild(codePanel);
+        const handle = document.createElement('div');
+        handle.className = 'jcv-splitter';
+        this._splitterEl = handle;
+        handle.addEventListener('mousedown', (e) => this._startResize(e, codePanel, splitPane));
+        splitPane.appendChild(handle);
+        splitPane.appendChild(this._buildPreviewPanel());
+        root.appendChild(splitPane);
+        root.style.position = 'relative';
+        root.appendChild(this._buildAiFab());
+        root.appendChild(this._buildAiChat());
+        return root;
+    }
+    _buildToolbar() {
+        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 layoutGroup = document.createElement('div');
+        layoutGroup.className = 'jcv-layout-group';
+        const eyeSvg = '<svg width="12" height="8" viewBox="0 0 12 8" fill="currentColor" style="display:block"><path d="M6 0C3 0 .7 2 0 4c.7 2 3 4 6 4s5.3-2 6-4c-.7-2-3-4-6-4zm0 6.5c-1.4 0-2.5-1.1-2.5-2.5S4.6 1.5 6 1.5 8.5 2.6 8.5 4 7.4 6.5 6 6.5z"/><circle cx="6" cy="4" r="1"/></svg>';
+        const codeHtml = '<span class="jcv-li-c">&lt;/&gt;</span>';
+        const previewHtml = `<span class="jcv-li-p">${eyeSvg}</span>`;
+        const layouts = [
+            { key: 'left', title: 'Code Left / Preview Right', icon: `<span class="jcv-li">${codeHtml}${previewHtml}</span>` },
+            { key: 'right', title: 'Preview Left / Code Right', icon: `<span class="jcv-li">${previewHtml}${codeHtml}</span>` },
+            { key: 'top', title: 'Code Top / Preview Bottom', icon: `<span class="jcv-li jcv-li--v">${codeHtml}${previewHtml}</span>` },
+            { key: 'bottom', title: 'Preview Top / Code Bottom', icon: `<span class="jcv-li jcv-li--v">${previewHtml}${codeHtml}</span>` },
+        ];
+        for (const l of layouts) {
+            const btn = document.createElement('button');
+            btn.type = 'button';
+            btn.className = 'jcv-layout-btn' + (this._layout === l.key ? ' jcv-layout-btn--active' : '');
+            btn.title = l.title;
+            btn.innerHTML = l.icon;
+            btn.setAttribute('data-layout', l.key);
+            btn.addEventListener('click', () => this._setLayout(l.key));
+            layoutGroup.appendChild(btn);
+        }
+        toolbar.appendChild(layoutGroup);
+        const sidebarToggle = document.createElement('button');
+        sidebarToggle.type = 'button';
+        sidebarToggle.className = 'jcv-toolbar-btn jcv-sidebar-toggle';
+        sidebarToggle.title = 'Toggle Pages sidebar';
+        sidebarToggle.textContent = '\u2630';
+        sidebarToggle.addEventListener('click', () => this._toggleSidebar());
+        toolbar.appendChild(sidebarToggle);
+        const spacer = document.createElement('span');
+        spacer.style.flex = '1';
+        toolbar.appendChild(spacer);
+        toolbar.appendChild(this._toolbarBtn('Format', () => this._format()));
+        const runBtn = this._toolbarBtn('\u25B6 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 = '\u2713 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 = '\u25CF Ready';
+        toolbar.appendChild(this._statusEl);
+        return toolbar;
+    }
+    _buildPageSidebar() {
+        const sidebar = document.createElement('div');
+        sidebar.className = 'jcv-page-sidebar';
+        const header = document.createElement('div');
+        header.className = 'jcv-page-sidebar-header';
+        header.textContent = 'Pages';
+        sidebar.appendChild(header);
+        this._pageSidebarEl = document.createElement('div');
+        this._pageSidebarEl.className = 'jcv-page-sidebar-list';
+        sidebar.appendChild(this._pageSidebarEl);
+        this._tabBarEl = this._pageSidebarEl;
+        return sidebar;
+    }
+    _buildCodePanel() {
+        const panel = document.createElement('div');
+        panel.className = 'jcv-code-panel';
+        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._highlightEl = document.createElement('div');
+        this._highlightEl.className = 'jcv-highlight';
+        this._highlightEl.setAttribute('aria-hidden', 'true');
+        editorContainer.appendChild(this._highlightEl);
+        this._editorEl = document.createElement('textarea');
+        this._editorEl.className = 'jcv-editor';
+        this._editorEl.value = this._getActiveTab()?.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(); this._hideSnippetMenu(); });
+        editorContainer.appendChild(this._editorEl);
+        this._errorEl = document.createElement('div');
+        this._errorEl.className = 'jcv-error-bar';
+        this._errorEl.style.display = 'none';
+        editorContainer.appendChild(this._errorEl);
+        this._autocompleteEl = document.createElement('div');
+        this._autocompleteEl.className = 'jcv-autocomplete';
+        this._autocompleteEl.style.display = 'none';
+        editorContainer.appendChild(this._autocompleteEl);
+        editorWrap.appendChild(editorContainer);
+        this._snippetMenuEl = document.createElement('div');
+        this._snippetMenuEl.className = 'jcv-snippet-menu';
+        this._snippetMenuEl.style.display = 'none';
+        editorWrap.appendChild(this._snippetMenuEl);
+        panel.appendChild(editorWrap);
+        return panel;
+    }
+    _buildPreviewPanel() {
+        const panel = document.createElement('div');
+        panel.className = 'jcv-preview-panel';
+        this._previewPanelEl = panel;
+        const header = document.createElement('div');
+        header.className = 'jcv-preview-header';
+        const title = document.createElement('span');
+        title.textContent = 'Live Preview';
+        header.appendChild(title);
+        const routeIndicator = document.createElement('span');
+        routeIndicator.className = 'jcv-route-indicator';
+        routeIndicator.id = `${this.id}-route-indicator`;
+        routeIndicator.textContent = this._currentRoute;
+        header.appendChild(routeIndicator);
+        panel.appendChild(header);
+        this._previewEl = document.createElement('div');
+        this._previewEl.id = this._previewId;
+        this._previewEl.className = 'jcv-preview-area';
+        // ── Mirror the full layout-regions.css structure ──
+        // Mirrors: #app-nav-header
+        const regionNavHeader = document.createElement('header');
+        regionNavHeader.className = 'jcv-region-nav-header';
+        regionNavHeader.id = `${this._previewId}-nav-header`;
+        this._previewEl.appendChild(regionNavHeader);
+        // Body row: sidebar | main-col (toolbar + content) | sidebar-right
+        const regionBody = document.createElement('div');
+        regionBody.className = 'jcv-region-body';
+        // Mirrors: #app-sidebar
+        const regionSidebar = document.createElement('div');
+        regionSidebar.className = 'jcv-region-sidebar';
+        regionSidebar.id = `${this._previewId}-sidebar`;
+        regionBody.appendChild(regionSidebar);
+        // Main column: toolbar + content (mirrors #app area)
+        const regionMain = document.createElement('main');
+        regionMain.className = 'jcv-region-main';
+        regionMain.id = `${this._previewId}-app`;
+        // Mirrors: #app-toolbar
+        const regionToolbar = document.createElement('div');
+        regionToolbar.className = 'jcv-region-toolbar';
+        regionToolbar.id = `${this._previewId}-toolbar`;
+        regionMain.appendChild(regionToolbar);
+        // Mirrors: #app content area
+        const regionContent = document.createElement('div');
+        regionContent.className = 'jcv-region-content';
+        regionContent.id = `${this._previewId}-content`;
+        regionMain.appendChild(regionContent);
+        regionBody.appendChild(regionMain);
+        // Mirrors: #app-sidebar-right
+        const regionSidebarRight = document.createElement('div');
+        regionSidebarRight.className = 'jcv-region-sidebar-right';
+        regionSidebarRight.id = `${this._previewId}-sidebar-right`;
+        regionBody.appendChild(regionSidebarRight);
+        this._previewEl.appendChild(regionBody);
+        // Mirrors: #app-nav-footer
+        const regionNavFooter = document.createElement('footer');
+        regionNavFooter.className = 'jcv-region-nav-footer';
+        regionNavFooter.id = `${this._previewId}-nav-footer`;
+        this._previewEl.appendChild(regionNavFooter);
+        // Mirrors: #app-statusbar
+        const regionStatusbar = document.createElement('div');
+        regionStatusbar.className = 'jcv-region-statusbar';
+        regionStatusbar.id = `${this._previewId}-statusbar`;
+        this._previewEl.appendChild(regionStatusbar);
+        // Portal regions (absolute within preview)
+        const regionToast = document.createElement('div');
+        regionToast.className = 'jcv-region-toast';
+        regionToast.id = `${this._previewId}-toast`;
+        this._previewEl.appendChild(regionToast);
+        const regionModal = document.createElement('div');
+        regionModal.className = 'jcv-region-modal';
+        regionModal.id = `${this._previewId}-modal`;
+        this._previewEl.appendChild(regionModal);
+        const regionDrawer = document.createElement('div');
+        regionDrawer.className = 'jcv-region-drawer';
+        regionDrawer.id = `${this._previewId}-drawer`;
+        this._previewEl.appendChild(regionDrawer);
+        panel.appendChild(this._previewEl);
+        return panel;
+    }
+    _toolbarBtn(label, onClick) {
+        const b = document.createElement('button');
+        b.className = 'jcv-toolbar-btn';
+        b.textContent = label;
+        b.addEventListener('click', onClick);
+        return b;
+    }
+    // ── Editor helpers ───────────────────────────────────────────────────
+    _onInput() {
+        const tab = this._getActiveTab();
+        if (tab && this._editorEl)
+            tab.code = this._editorEl.value;
+        this._updateLineNumbers();
+        this._updateHighlight();
+        this._scheduleCompile();
+        this._checkAutocomplete();
+        this._persistTabs();
+    }
+    _updateLineNumbers() {
+        if (!this._lineNumEl || !this._editorEl)
+            return;
+        const count = this._editorEl.value.split('\n').length;
+        this._lineNumEl.innerHTML = '';
+        for (let i = 1; i <= count; i++) {
+            const div = document.createElement('div');
+            const addBtn = document.createElement('button');
+            addBtn.type = 'button';
+            addBtn.className = 'jcv-line-add';
+            addBtn.textContent = '+';
+            addBtn.title = 'Insert component';
+            addBtn.addEventListener('mousedown', (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                this._toggleSnippetMenu(i, addBtn);
+            });
+            div.appendChild(addBtn);
+            div.appendChild(document.createTextNode(String(i)));
+            this._lineNumEl.appendChild(div);
+        }
+    }
+    _syncScroll() {
+        if (!this._editorEl || !this._lineNumEl)
+            return;
+        this._lineNumEl.scrollTop = this._editorEl.scrollTop;
+        if (this._highlightEl) {
+            this._highlightEl.scrollTop = this._editorEl.scrollTop;
+            this._highlightEl.scrollLeft = this._editorEl.scrollLeft;
+        }
+    }
+    _updateHighlight() {
+        if (!this._highlightEl || !this._editorEl)
+            return;
+        try {
+            const lines = parseCode(this._editorEl.value);
+            this._highlightEl.innerHTML = lines.map(l => l.html).join('\n') + '\n';
+        }
+        catch (_) {
+            const escaped = this._editorEl.value
+                .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+            this._highlightEl.innerHTML = escaped + '\n';
+        }
+    }
+    _format() {
+        if (!this._editorEl)
+            return;
+        let indent = 0;
+        const formatted = this._editorEl.value.split('\n').map(line => {
+            const trimmed = line.trim();
+            if (!trimmed)
+                return '';
+            if (trimmed.startsWith('}') || trimmed.startsWith(']'))
+                indent = Math.max(0, indent - 1);
+            const res = '  '.repeat(indent) + trimmed;
+            if (trimmed.endsWith('{') || trimmed.endsWith('['))
+                indent++;
+            return res;
+        });
+        this._editorEl.value = formatted.join('\n');
+        this._onInput();
+    }
+    _scheduleCompile(immediate = false) {
+        if (this._compileTimer)
+            clearTimeout(this._compileTimer);
+        const delay = immediate ? 150 : 1200;
+        this._compileTimer = setTimeout(() => this._compile(), delay);
+    }
+    // ── Compile & render ─────────────────────────────────────────────────
+    _compile() {
+        if (!this._editorEl || !this._previewEl || !this._statusEl || !this._errorEl)
+            return;
+        if (this._isCompiling)
+            return;
+        this._isCompiling = true;
+        window.__juxCanvasCompiling = true;
+        const activeTab = this._getActiveTab();
+        if (activeTab && this._editorEl)
+            activeTab.code = this._editorEl.value;
+        if (this._savedNavigateTo) {
+            window.navigateTo = this._savedNavigateTo;
+        }
+        // Clear all mirrored layout regions
+        const regionNavHeader = this._previewEl.querySelector('.jcv-region-nav-header');
+        const regionSidebar = this._previewEl.querySelector('.jcv-region-sidebar');
+        const regionSidebarRight = this._previewEl.querySelector('.jcv-region-sidebar-right');
+        const regionToolbar = this._previewEl.querySelector('.jcv-region-toolbar');
+        const regionContent = this._previewEl.querySelector('.jcv-region-content');
+        const regionNavFooter = this._previewEl.querySelector('.jcv-region-nav-footer');
+        const regionStatusbar = this._previewEl.querySelector('.jcv-region-statusbar');
+        const regionToast = this._previewEl.querySelector('.jcv-region-toast');
+        const regionModal = this._previewEl.querySelector('.jcv-region-modal');
+        const regionDrawer = this._previewEl.querySelector('.jcv-region-drawer');
+        if (regionNavHeader)
+            regionNavHeader.innerHTML = '';
+        if (regionSidebar)
+            regionSidebar.innerHTML = '';
+        if (regionSidebarRight)
+            regionSidebarRight.innerHTML = '';
+        if (regionToolbar)
+            regionToolbar.innerHTML = '';
+        if (regionContent)
+            regionContent.innerHTML = '';
+        if (regionNavFooter)
+            regionNavFooter.innerHTML = '';
+        if (regionStatusbar)
+            regionStatusbar.innerHTML = '';
+        if (regionToast)
+            regionToast.innerHTML = '';
+        if (regionModal)
+            regionModal.innerHTML = '';
+        if (regionDrawer)
+            regionDrawer.innerHTML = '';
+        this._errorEl.style.display = 'none';
+        for (const key of Object.keys(pageState)) {
+            if (!STATE_KEEP_KEYS.has(key))
+                delete pageState[key];
+        }
+        const layoutTab = this._tabs.find(t => t.isLayout);
+        const routeTab = this._tabs.find(t => !t.isLayout && t.route === this._currentRoute);
+        const fallbackTab = this._tabs.find(t => !t.isLayout);
+        const layoutCode = layoutTab ? layoutTab.code : '';
+        const pageCode = (routeTab || fallbackTab).code;
+        let combinedCode = '';
+        if (layoutCode.trim())
+            combinedCode += `{\n${layoutCode}\n}\n\n`;
+        combinedCode += `{\n${pageCode}\n}`;
+        const routeIndicator = document.getElementById(`${this.id}-route-indicator`);
+        if (routeIndicator)
+            routeIndicator.textContent = this._currentRoute;
+        const contentDiv = regionContent || this._previewEl;
+        const result = compileAndRender(combinedCode, this._previewEl, (path) => this._navigatePreview(path), contentDiv, this._tabs, {
+            sidebarTarget: regionSidebar || undefined,
+            sidebarRightTarget: regionSidebarRight || undefined,
+            headerTarget: regionNavHeader || undefined,
+            footerTarget: regionNavFooter || undefined,
+            toolbarTarget: regionToolbar || undefined,
+            statusbarTarget: regionStatusbar || undefined,
+            toastTarget: regionToast || undefined,
+            modalTarget: regionModal || undefined,
+            drawerTarget: regionDrawer || undefined,
+        });
+        if (!this._clickInterceptAttached) {
+            this._clickInterceptAttached = true;
+            this._previewEl.addEventListener('click', (e) => {
+                const linkEl = e.target.closest('a[href], [data-path]');
+                if (linkEl) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    const p = linkEl.getAttribute('data-path') || linkEl.getAttribute('href') || '';
+                    if (p.startsWith('/'))
+                        this._navigatePreview(p);
+                }
+            }, true);
+        }
+        this._knownIds = [];
+        this._previewEl.querySelectorAll('[data-id]').forEach(el => {
+            const eid = el.getAttribute('data-id');
+            if (eid)
+                this._knownIds.push(eid);
+        });
+        this._previewEl.querySelectorAll('[id]').forEach(el => {
+            if (el.id && el.id !== this._previewId && !this._knownIds.includes(el.id))
+                this._knownIds.push(el.id);
+        });
+        this._renderCompileResult(result, contentDiv);
+        if (this._onChange)
+            this._onChange({ code: combinedCode, result });
+        this._isCompiling = false;
+        window.__juxCanvasCompiling = false;
+    }
+    _renderCompileResult(result, contentDiv) {
+        if (!this._statusEl || !this._errorEl)
+            return;
+        if (result.success) {
+            this._statusEl.className = 'jcv-toolbar-status jcv-toolbar-status--ok';
+            this._statusEl.textContent = `\u25CF ${result.componentCount} component${result.componentCount !== 1 ? 's' : ''} \u00B7 ${this._currentRoute}`;
+        }
+        else {
+            this._statusEl.className = 'jcv-toolbar-status jcv-toolbar-status--err';
+            this._statusEl.textContent = '\u25CF Error';
+            const errBlock = document.createElement('div');
+            errBlock.className = 'jcv-live-error-block';
+            const errTitle = document.createElement('div');
+            errTitle.className = 'jcv-live-error-title';
+            errTitle.textContent = 'Compile Error';
+            errBlock.appendChild(errTitle);
+            const errMsg = document.createElement('div');
+            errMsg.className = 'jcv-live-error-msg';
+            errMsg.textContent = result.error || 'Unknown error';
+            errBlock.appendChild(errMsg);
+            const errHint = document.createElement('div');
+            errHint.className = 'jcv-live-error-ctx';
+            errHint.textContent = '\u2139\uFE0F  Check the browser console (F12) for full details.';
+            errBlock.appendChild(errHint);
+            contentDiv.appendChild(errBlock);
+            this._errorEl.style.display = 'block';
+            this._errorEl.textContent = result.error || 'Error';
+        }
+    }
+    // ── Autocomplete ─────────────────────────────────────────────────────
+    _checkAutocomplete() {
+        if (!this._editorEl)
+            return;
+        const pos = this._editorEl.selectionStart;
+        const text = this._editorEl.value.substring(0, pos);
+        let items = [];
+        let replaceFrom = pos;
+        const fullCode = this._editorEl.value;
+        const varMap = {};
+        const assignRx = /(?:const|let|var)\s+(\w+)\s*=\s*(?:await\s+)?jux\.(\w+)\s*\(/g;
+        let am;
+        while ((am = assignRx.exec(fullCode)) !== null) {
+            varMap[am[1]] = am[2];
+        }
+        const juxDot = text.match(/jux\.(\w*)$/);
+        if (juxDot) {
+            const f = juxDot[1].toLowerCase();
+            items = JUX_COMPLETIONS.filter(ci => ci.label.toLowerCase().startsWith(f));
+            replaceFrom = pos - juxDot[1].length;
+        }
+        const stateDot = text.match(/pageState\['[^']*'\]\.(\w*)$/);
+        if (stateDot) {
+            const f = stateDot[1].toLowerCase();
+            items = STATE_PROPS.filter(ci => ci.label.toLowerCase().startsWith(f));
+            replaceFrom = pos - stateDot[1].length;
+        }
+        const stateId = text.match(/pageState\['([^']*)$/);
+        if (stateId && !stateDot) {
+            const f = stateId[1].toLowerCase();
+            items = this._knownIds.filter(k => k.toLowerCase().startsWith(f))
+                .map(k => ({ label: k, detail: 'Component ID', insertText: k, kind: 'variable' }));
+            replaceFrom = pos - stateId[1].length;
+        }
+        if (!juxDot && !stateDot && !stateId) {
+            let compName;
+            let prefix = '';
+            let matchLen = 0;
+            const chainDot = text.match(/\)\.(\w*)$/);
+            if (chainDot) {
+                prefix = chainDot[1].toLowerCase();
+                matchLen = chainDot[1].length;
+                const juxCalls = [...text.matchAll(/jux\.(\w+)\s*\(/g)];
+                if (juxCalls.length > 0) {
+                    compName = juxCalls[juxCalls.length - 1][1];
+                }
+                if (!compName) {
+                    const curLine = text.split('\n').pop() || '';
+                    const varStart = curLine.match(/^\s*(?:(?:const|let|var)\s+\w+\s*=\s*(?:await\s+)?)?(\w+)\s*\./);
+                    if (varStart && varMap[varStart[1]]) {
+                        compName = varMap[varStart[1]];
+                    }
+                }
+            }
+            if (!chainDot) {
+                const varDot = text.match(/(\w+)\.(\w*)$/);
+                if (varDot && varDot[1] !== 'jux' && varDot[1] !== 'pageState' && varMap[varDot[1]]) {
+                    compName = varMap[varDot[1]];
+                    prefix = varDot[2].toLowerCase();
+                    matchLen = varDot[2].length;
+                }
+            }
+            if (compName) {
+                const entry = COMPONENT_REGISTRY[compName];
+                const utilEntry = UTILITY_REGISTRY[compName];
+                const methods = entry?.methods || utilEntry?.methods || LAYOUT_METHODS[compName] || [];
+                if (methods.length > 0) {
+                    items = methods
+                        .filter(m => m.toLowerCase().startsWith(prefix))
+                        .map(m => ({
+                        label: m,
+                        detail: 'Method',
+                        insertText: METHOD_SIGNATURES[m] || `${m}()`,
+                        kind: 'method',
+                    }));
+                    replaceFrom = pos - matchLen;
+                }
+            }
+        }
+        const lineStart = text.match(/(?:^|\n)\s*(\w*)$/);
+        if (lineStart && !juxDot && !stateDot && !stateId && lineStart[1].length >= 1 && items.length === 0) {
+            const f = lineStart[1].toLowerCase();
+            items = [...LAYOUT_COMPLETIONS, ...KEYWORD_COMPLETIONS].filter(ci => ci.label.toLowerCase().startsWith(f));
+            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' ? '\u0192' : item.kind === 'property' ? '\u25C6' : item.kind === 'keyword' ? '\u2B25' : '\u25C7';
+            row.appendChild(icon);
+            const lbl = document.createElement('span');
+            lbl.className = 'jcv-ac-label';
+            lbl.textContent = item.label;
+            row.appendChild(lbl);
+            const det = document.createElement('span');
+            det.className = 'jcv-ac-detail';
+            det.textContent = item.detail;
+            row.appendChild(det);
+            row.addEventListener('mousedown', (e) => { e.preventDefault(); this._acceptCompletion(item, replaceFrom); });
+            this._autocompleteEl.appendChild(row);
+        }
+        const ac = this._autocompleteEl;
+        ac.__items = items.slice(0, maxShow);
+        ac.__activeIndex = 0;
+        ac.__replaceFrom = replaceFrom;
+    }
+    _hideAutocomplete() {
+        if (this._autocompleteEl)
+            this._autocompleteEl.style.display = 'none';
+    }
+    // ── Snippet insertion menu ───────────────────────────────────────────
+    _toggleSnippetMenu(lineNumber, anchorBtn) {
+        if (this._snippetMenuEl?.style.display !== 'none' && this._snippetMenuLine === lineNumber) {
+            this._hideSnippetMenu();
+            return;
+        }
+        this._showSnippetMenu(lineNumber, anchorBtn);
+    }
+    _showSnippetMenu(lineNumber, anchorBtn) {
+        if (!this._snippetMenuEl)
+            return;
+        this._snippetMenuLine = lineNumber;
+        const wrapRect = this._snippetMenuEl.parentElement.getBoundingClientRect();
+        const btnRect = anchorBtn.getBoundingClientRect();
+        const top = btnRect.top - wrapRect.top;
+        this._snippetMenuEl.style.top = top + 'px';
+        this._snippetMenuEl.style.left = '4px';
+        this._snippetMenuEl.style.display = 'flex';
+        this._renderSnippetMenu('');
+    }
+    _hideSnippetMenu() {
+        if (this._snippetMenuEl) {
+            this._snippetMenuEl.style.display = 'none';
+            this._snippetMenuLine = -1;
+        }
+    }
+    _renderSnippetMenu(filter) {
+        if (!this._snippetMenuEl)
+            return;
+        this._snippetMenuEl.innerHTML = '';
+        const header = document.createElement('div');
+        header.className = 'jcv-snippet-header';
+        const headerIcon = document.createElement('span');
+        headerIcon.className = 'jcv-snippet-header-icon';
+        headerIcon.textContent = '+';
+        header.appendChild(headerIcon);
+        const searchInput = document.createElement('input');
+        searchInput.type = 'text';
+        searchInput.className = 'jcv-snippet-search';
+        searchInput.placeholder = 'Search components\u2026';
+        searchInput.value = filter;
+        searchInput.addEventListener('input', () => {
+            this._renderSnippetMenu(searchInput.value);
+        });
+        searchInput.addEventListener('keydown', (e) => {
+            if (e.key === 'Escape') {
+                e.preventDefault();
+                this._hideSnippetMenu();
+                this._editorEl?.focus();
+            }
+        });
+        header.appendChild(searchInput);
+        this._snippetMenuEl.appendChild(header);
+        const listEl = document.createElement('div');
+        listEl.className = 'jcv-snippet-list';
+        const lowerFilter = filter.toLowerCase();
+        for (const cat of SNIPPET_CATEGORIES) {
+            const matchedItems = cat.items.filter(item => item.name.toLowerCase().includes(lowerFilter) || item.detail.toLowerCase().includes(lowerFilter));
+            if (matchedItems.length === 0)
+                continue;
+            const catLabel = document.createElement('div');
+            catLabel.className = 'jcv-snippet-cat';
+            catLabel.textContent = cat.label;
+            listEl.appendChild(catLabel);
+            for (const item of matchedItems) {
+                const row = document.createElement('div');
+                row.className = 'jcv-snippet-item';
+                const icon = document.createElement('span');
+                icon.className = 'jcv-snippet-item-icon';
+                icon.textContent = '\u0192';
+                row.appendChild(icon);
+                const lbl = document.createElement('span');
+                lbl.className = 'jcv-snippet-item-label';
+                lbl.textContent = item.name;
+                row.appendChild(lbl);
+                const det = document.createElement('span');
+                det.className = 'jcv-snippet-item-detail';
+                det.textContent = item.detail;
+                row.appendChild(det);
+                row.addEventListener('mousedown', (e) => {
+                    e.preventDefault();
+                    this._insertSnippetAtLine(this._snippetMenuLine, item.snippet);
+                });
+                listEl.appendChild(row);
+            }
+        }
+        this._snippetMenuEl.appendChild(listEl);
+        requestAnimationFrame(() => searchInput.focus());
+    }
+    _insertSnippetAtLine(lineNumber, snippet) {
+        if (!this._editorEl)
+            return;
+        const lines = this._editorEl.value.split('\n');
+        const insertIndex = Math.min(lineNumber, lines.length);
+        // Detect indentation from the target line
+        const targetLine = lines[insertIndex - 1] || '';
+        const indent = targetLine.match(/^(\s*)/)?.[1] || '';
+        // Apply indentation to snippet lines
+        const snippetLines = snippet.split('\n');
+        const indentedSnippet = snippetLines.map((line, i) => i === 0 ? indent + line : (line ? indent + line : line)).join('\n');
+        // Insert after the target line
+        lines.splice(insertIndex, 0, indentedSnippet);
+        this._editorEl.value = lines.join('\n');
+        // Position cursor at end of inserted snippet
+        let cursorPos = 0;
+        for (let i = 0; i <= insertIndex; i++)
+            cursorPos += lines[i].length + 1;
+        cursorPos += indentedSnippet.length;
+        this._editorEl.selectionStart = this._editorEl.selectionEnd = Math.min(cursorPos, this._editorEl.value.length);
+        this._editorEl.focus();
+        this._hideSnippetMenu();
+        this._onInput();
+    }
+    _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 = this._editorEl.selectionEnd = newPos;
+        this._editorEl.focus();
+        this._hideAutocomplete();
+        this._onInput();
+    }
+    _onKeyDown(e) {
+        if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
+            e.preventDefault();
+            this._toggleAiChat();
+            return;
+        }
+        if (!this._autocompleteEl || this._autocompleteEl.style.display === 'none') {
+            if (e.key === 'Tab') {
+                e.preventDefault();
+                const s = this._editorEl.selectionStart, en = this._editorEl.selectionEnd;
+                this._editorEl.value = this._editorEl.value.substring(0, s) + '  ' + this._editorEl.value.substring(en);
+                this._editorEl.selectionStart = this._editorEl.selectionEnd = s + 2;
+                this._onInput();
+            }
+            if (e.key === 'Enter' || e.key === ';' || e.key === '}' || e.key === ')' || e.key === ']') {
+                if (this._compileTimer)
+                    clearTimeout(this._compileTimer);
+                this._compileTimer = setTimeout(() => this._compile(), 150);
+            }
+            return;
+        }
+        const ac = this._autocompleteEl;
+        const acItems = ac.__items || [];
+        let active = ac.__activeIndex || 0;
+        const replFrom = ac.__replaceFrom || 0;
+        if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            active = Math.min(active + 1, acItems.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 (acItems[active])
+                this._acceptCompletion(acItems[active], replFrom);
+        }
+        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 lines = this._editorEl.value.substring(0, this._editorEl.selectionStart).split('\n');
+        return {
+            top: (lines.length - 1) * 20 - this._editorEl.scrollTop,
+            left: Math.min(lines[lines.length - 1].length * 7.8, 350) + 40,
+        };
+    }
+    // ── AI Assist ────────────────────────────────────────────────────────
+    _buildAiFab() {
+        const fab = document.createElement('button');
+        fab.className = 'jcv-ai-fab';
+        fab.innerHTML = '\u2728';
+        fab.title = 'AI Assist (Ctrl+K)';
+        fab.addEventListener('click', () => this._toggleAiChat());
+        this._aiFabEl = fab;
+        return fab;
+    }
+    _buildAiChat() {
+        const chat = document.createElement('div');
+        chat.className = 'jcv-ai-chat';
+        const header = document.createElement('div');
+        header.className = 'jcv-ai-header';
+        header.innerHTML = '<span>\u2728</span><span>AI Assist</span>';
+        const badge = document.createElement('span');
+        badge.className = 'jcv-ai-badge';
+        badge.textContent = 'Claude';
+        header.appendChild(badge);
+        const shortcut = document.createElement('span');
+        shortcut.className = 'jcv-ai-shortcut';
+        shortcut.textContent = 'Ctrl+K';
+        header.appendChild(shortcut);
+        const closeBtn = document.createElement('button');
+        closeBtn.className = 'jcv-ai-close';
+        closeBtn.textContent = '\u00D7';
+        closeBtn.addEventListener('click', () => this._closeAiChat());
+        header.appendChild(closeBtn);
+        chat.appendChild(header);
+        const inputWrap = document.createElement('div');
+        inputWrap.className = 'jcv-ai-input-wrap';
+        const aiInput = document.createElement('textarea');
+        aiInput.className = 'jcv-ai-input';
+        aiInput.placeholder = 'Ask AI to write JUX code\u2026';
+        aiInput.rows = 2;
+        aiInput.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter' && !e.shiftKey) {
+                e.preventDefault();
+                this._submitAiPrompt();
+            }
+            if (e.key === 'Escape')
+                this._closeAiChat();
+        });
+        inputWrap.appendChild(aiInput);
+        const sendBtn = document.createElement('button');
+        sendBtn.className = 'jcv-ai-send';
+        sendBtn.textContent = 'Send';
+        sendBtn.addEventListener('click', () => this._submitAiPrompt());
+        inputWrap.appendChild(sendBtn);
+        chat.appendChild(inputWrap);
+        const status = document.createElement('div');
+        status.className = 'jcv-ai-status';
+        chat.appendChild(status);
+        const result = document.createElement('div');
+        result.className = 'jcv-ai-result';
+        chat.appendChild(result);
+        const actions = document.createElement('div');
+        actions.className = 'jcv-ai-actions';
+        const insertBtn = document.createElement('button');
+        insertBtn.className = 'jcv-ai-action-btn';
+        insertBtn.textContent = '\u2713 Insert at cursor';
+        insertBtn.addEventListener('click', () => this._insertAiResult());
+        actions.appendChild(insertBtn);
+        const replaceBtn = document.createElement('button');
+        replaceBtn.className = 'jcv-ai-action-btn jcv-ai-action-btn--secondary';
+        replaceBtn.textContent = 'Replace all';
+        replaceBtn.addEventListener('click', () => this._replaceWithAiResult());
+        actions.appendChild(replaceBtn);
+        chat.appendChild(actions);
+        this._aiChatEl = chat;
+        return chat;
+    }
+    _toggleAiChat() {
+        if (this._aiChatEl?.classList.contains('jcv-ai-chat--open')) {
+            this._closeAiChat();
+        }
+        else {
+            this._openAiChat();
+        }
+    }
+    _openAiChat() {
+        if (!this._aiChatEl)
+            return;
+        this._aiChatEl.classList.add('jcv-ai-chat--open');
+        if (this._aiFabEl)
+            this._aiFabEl.classList.add('jcv-ai-fab--hidden');
+        requestAnimationFrame(() => {
+            const input = this._aiChatEl?.querySelector('.jcv-ai-input');
+            input?.focus();
+        });
+    }
+    _closeAiChat() {
+        if (!this._aiChatEl)
+            return;
+        this._aiChatEl.classList.remove('jcv-ai-chat--open');
+        if (this._aiFabEl)
+            this._aiFabEl.classList.remove('jcv-ai-fab--hidden');
+        this._editorEl?.focus();
+    }
+    async _submitAiPrompt() {
+        if (this._aiLoading || !this._aiChatEl)
+            return;
+        const aiInput = this._aiChatEl.querySelector('.jcv-ai-input');
+        const sendBtn = this._aiChatEl.querySelector('.jcv-ai-send');
+        const status = this._aiChatEl.querySelector('.jcv-ai-status');
+        const result = this._aiChatEl.querySelector('.jcv-ai-result');
+        const actions = this._aiChatEl.querySelector('.jcv-ai-actions');
+        const prompt = aiInput?.value.trim();
+        if (!prompt)
+            return;
+        this._aiLoading = true;
+        sendBtn.disabled = true;
+        status.textContent = '\u23F3 Asking Claude\u2026';
+        status.className = 'jcv-ai-status jcv-ai-status--visible jcv-ai-status--loading';
+        result.className = 'jcv-ai-result';
+        result.textContent = '';
+        actions.className = 'jcv-ai-actions';
+        const code = this._editorEl?.value || '';
+        const cursorLine = code.substring(0, this._editorEl?.selectionStart || 0).split('\n').length;
+        const res = await aiSuggest({ prompt, code, cursorLine });
+        this._aiLoading = false;
+        sendBtn.disabled = false;
+        if (res.error) {
+            status.textContent = '\u26A0 ' + res.error;
+            status.className = 'jcv-ai-status jcv-ai-status--visible jcv-ai-status--error';
+        }
+        else {
+            status.textContent = '\u2705 Suggestion ready';
+            status.className = 'jcv-ai-status jcv-ai-status--visible';
+            result.textContent = res.suggestion;
+            result.className = 'jcv-ai-result jcv-ai-result--visible';
+            actions.className = 'jcv-ai-actions jcv-ai-actions--visible';
+        }
+    }
+    _insertAiResult() {
+        const result = this._aiChatEl?.querySelector('.jcv-ai-result');
+        if (!result || !this._editorEl)
+            return;
+        const text = result.textContent || '';
+        const pos = this._editorEl.selectionStart;
+        const before = this._editorEl.value.substring(0, pos);
+        const after = this._editorEl.value.substring(pos);
+        const insert = (before.length > 0 && !before.endsWith('\n') ? '\n' : '') + text + '\n';
+        this._editorEl.value = before + insert + after;
+        this._editorEl.selectionStart = this._editorEl.selectionEnd = pos + insert.length;
+        this._onInput();
+        this._closeAiChat();
+    }
+    _replaceWithAiResult() {
+        const result = this._aiChatEl?.querySelector('.jcv-ai-result');
+        if (!result || !this._editorEl)
+            return;
+        this._editorEl.value = result.textContent || '';
+        this._editorEl.selectionStart = this._editorEl.selectionEnd = this._editorEl.value.length;
+        this._onInput();
+        this._closeAiChat();
+    }
+    // ── Layout orientation ─────────────────────────────────────────────
+    _setLayout(layout) {
+        if (this._layout === layout)
+            return;
+        this._layout = layout;
+        if (!this._splitEl || !this._codePanelEl || !this._previewPanelEl || !this._splitterEl)
+            return;
+        this._el?.querySelectorAll('.jcv-layout-btn').forEach(b => {
+            b.classList.toggle('jcv-layout-btn--active', b.getAttribute('data-layout') === layout);
+        });
+        const split = this._splitEl;
+        const code = this._codePanelEl;
+        const preview = this._previewPanelEl;
+        const handle = this._splitterEl;
+        const isVertical = layout === 'top' || layout === 'bottom';
+        code.style.width = '';
+        code.style.height = '';
+        code.style.flex = '';
+        while (split.firstChild)
+            split.removeChild(split.firstChild);
+        if (isVertical) {
+            split.classList.add('jcv-split--vertical');
+            handle.className = 'jcv-splitter jcv-splitter--horizontal';
+            code.style.height = '50%';
+        }
+        else {
+            split.classList.remove('jcv-split--vertical');
+            handle.className = 'jcv-splitter';
+            code.style.width = this._opts.codePanelWidth;
+        }
+        if (layout === 'left' || layout === 'top') {
+            split.appendChild(code);
+            split.appendChild(handle);
+            split.appendChild(preview);
+        }
+        else {
+            split.appendChild(preview);
+            split.appendChild(handle);
+            split.appendChild(code);
+        }
+    }
+    _toggleSidebar() {
+        this._sidebarCollapsed = !this._sidebarCollapsed;
+        // Control #app-sidebar width through the CSS var that layout-regions.css reads
+        document.documentElement.style.setProperty('--app-sidebar-width', this._sidebarCollapsed ? '0px' : '180px');
+    }
+    // ── Resize ───────────────────────────────────────────────────────────
+    _startResize(e, codePanel, splitPane) {
+        e.preventDefault();
+        const isVertical = this._layout === 'top' || this._layout === 'bottom';
+        if (isVertical) {
+            const startY = e.clientY, startHeight = codePanel.offsetHeight, totalHeight = splitPane.offsetHeight;
+            const reversed = this._layout === 'bottom';
+            const onMove = (ev) => {
+                const delta = ev.clientY - startY;
+                const newHeight = Math.max(100, Math.min(totalHeight - 100, startHeight + (reversed ? -delta : delta)));
+                codePanel.style.height = newHeight + 'px';
+                codePanel.style.flex = 'none';
+            };
+            const onUp = () => {
+                document.removeEventListener('mousemove', onMove);
+                document.removeEventListener('mouseup', onUp);
+            };
+            document.addEventListener('mousemove', onMove);
+            document.addEventListener('mouseup', onUp);
+        }
+        else {
+            const startX = e.clientX, startWidth = codePanel.offsetWidth, totalWidth = splitPane.offsetWidth;
+            const reversed = this._layout === 'right';
+            const onMove = (ev) => {
+                const delta = ev.clientX - startX;
+                const newWidth = Math.max(200, Math.min(totalWidth - 200, startWidth + (reversed ? -delta : 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);
+        }
+    }
+}
+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