@nuraly/lumenjs 0.1.3 → 0.2.0

package/dist/editor/inline-text-edit.js

@@ -1,18 +1,175 @@
 import { sendToHost, isPreviewMode } from './editor-bridge.js';
+import { applyAstModification, updateTranslation } from './editor-api-client.js';
+const EDITABLE_TAGS = ['H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'P', 'SPAN', 'A', 'LABEL', 'LI'];
+let editingEl = null;
+/**
+ * Find the text element and annotated parent from a target element,
+ * walking up the DOM tree. Works for both real events and direct calls.
+ */
+function findEditTarget(startEl) {
+    let textEl = null;
+    let annotatedParent = null;
+    let el = startEl;
+    while (el) {
+        if (!textEl && EDITABLE_TAGS.includes(el.tagName)) {
+            textEl = el;
+        }
+        if (!annotatedParent && el.getAttribute('data-nk-source')) {
+            annotatedParent = el;
+        }
+        if (textEl && annotatedParent)
+            break;
+        el = el.parentElement;
+    }
+    // If no direct text element, check if start element has only text content
+    if (!textEl) {
+        if (startEl.childNodes.length > 0) {
+            const hasOnlyText = Array.from(startEl.childNodes).every(n => n.nodeType === Node.TEXT_NODE);
+            if (hasOnlyText && startEl.textContent?.trim()) {
+                textEl = startEl;
+            }
+        }
+    }
+    if (!textEl || !annotatedParent)
+        return null;
+    return { textEl, annotatedParent };
+}
+function showDynamicWarning(textEl) {
+    textEl.style.outline = '2px dashed #f59e0b';
+    textEl.style.outlineOffset = '2px';
+    const indicator = document.createElement('div');
+    Object.assign(indicator.style, {
+        position: 'fixed',
+        background: '#f59e0b',
+        color: '#000',
+        padding: '4px 8px',
+        borderRadius: '4px',
+        fontSize: '11px',
+        fontFamily: 'system-ui',
+        zIndex: '10000',
+        pointerEvents: 'none',
+    });
+    indicator.textContent = '\u26A1 Bound to variable \u2014 edit in code';
+    const rect = textEl.getBoundingClientRect();
+    indicator.style.left = `${rect.left}px`;
+    indicator.style.top = `${rect.top - 28}px`;
+    document.body.appendChild(indicator);
+    setTimeout(() => {
+        textEl.style.outline = '';
+        textEl.style.outlineOffset = '';
+        indicator.remove();
+    }, 2000);
+}
+function startEditing(textEl, annotatedParent) {
+    if (editingEl)
+        return;
+    editingEl = textEl;
+    const originalText = textEl.textContent || '';
+    textEl.setAttribute('contenteditable', 'true');
+    textEl.focus();
+    textEl.style.outline = '2px solid #3b82f6';
+    textEl.style.outlineOffset = '2px';
+    textEl.style.borderRadius = '2px';
+    textEl.style.minWidth = '20px';
+    const range = document.createRange();
+    range.selectNodeContents(textEl);
+    const sel = window.getSelection();
+    sel?.removeAllRanges();
+    sel?.addRange(range);
+    const sourceAttr = annotatedParent.getAttribute('data-nk-source');
+    const lastColon = sourceAttr.lastIndexOf(':');
+    const sourceFile = sourceAttr.substring(0, lastColon);
+    const line = parseInt(sourceAttr.substring(lastColon + 1), 10);
+    const commitEdit = () => {
+        if (!editingEl)
+            return;
+        const newText = editingEl.textContent || '';
+        editingEl.removeAttribute('contenteditable');
+        editingEl.style.outline = '';
+        editingEl.style.outlineOffset = '';
+        editingEl.style.borderRadius = '';
+        editingEl.style.minWidth = '';
+        editingEl = null;
+        if (newText !== originalText) {
+            const i18nKey = textEl.getAttribute('data-nk-i18n-key');
+            if (i18nKey) {
+                const locale = document.documentElement.lang || 'en';
+                updateTranslation(locale, i18nKey, newText).then(() => {
+                    sendToHost({
+                        type: 'NK_TRANSLATION_CHANGED',
+                        payload: { key: i18nKey, locale, originalText, newText, appliedLocally: true }
+                    });
+                }).catch(() => {
+                    sendToHost({
+                        type: 'NK_TRANSLATION_CHANGED',
+                        payload: { key: i18nKey, locale, originalText, newText }
+                    });
+                });
+            }
+            else {
+                applyAstModification(sourceFile, {
+                    type: 'setTextContent',
+                    elementSelector: textEl.tagName.toLowerCase(),
+                    sourceLine: line,
+                    html: newText,
+                }).then(() => {
+                    sendToHost({
+                        type: 'NK_TEXT_CHANGED',
+                        payload: { sourceFile, line, originalText, newText, appliedLocally: true }
+                    });
+                }).catch(() => {
+                    sendToHost({
+                        type: 'NK_TEXT_CHANGED',
+                        payload: { sourceFile, line, originalText, newText }
+                    });
+                });
+            }
+        }
+    };
+    textEl.addEventListener('blur', commitEdit, { once: true });
+    textEl.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            textEl.blur();
+        }
+        if (e.key === 'Escape') {
+            textEl.textContent = originalText;
+            textEl.blur();
+        }
+    });
+}
+/**
+ * Trigger inline text editing on an element directly.
+ * Called from standalone-overlay.ts on double-tap (mobile).
+ */
+export function triggerInlineEdit(target) {
+    if (isPreviewMode() || editingEl)
+        return false;
+    const result = findEditTarget(target);
+    if (!result)
+        return false;
+    const { textEl, annotatedParent } = result;
+    const isDynamic = textEl.hasAttribute('data-nk-dynamic') || !!textEl.closest('[data-nk-dynamic]');
+    const isI18n = !!textEl.getAttribute('data-nk-i18n-key') || !!textEl.closest('[data-nk-i18n-key]');
+    if (isDynamic && !isI18n) {
+        showDynamicWarning(textEl);
+        return true;
+    }
+    startEditing(textEl, annotatedParent);
+    return true;
+}
 export function setupInlineTextEdit() {
-    let editingEl = null;
     document.addEventListener('dblclick', (event) => {
         if (isPreviewMode())
             return;
-        // Walk the composed path to find a text-bearing element
-        const editableTags = ['H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'P', 'SPAN', 'A', 'LABEL', 'LI'];
+        // Try composedPath first (works in shadow DOM with real events)
         const composedPath = event.composedPath();
         let textEl = null;
         let annotatedParent = null;
         for (const node of composedPath) {
             if (!(node instanceof HTMLElement))
                 continue;
-            if (!textEl && editableTags.includes(node.tagName)) {
+            if (!textEl && EDITABLE_TAGS.includes(node.tagName)) {
                 textEl = node;
             }
             if (!annotatedParent && node.getAttribute('data-nk-source')) {
@@ -21,105 +178,29 @@ export function setupInlineTextEdit() {
             if (textEl && annotatedParent)
                 break;
         }
-        // If no direct text element, check if target itself has only text content
-        if (!textEl) {
+        // Fallback: walk from event.target
+        if (!textEl || !annotatedParent) {
             const target = event.target;
-            if (target && target.childNodes.length > 0) {
-                const hasOnlyText = Array.from(target.childNodes).every(n => n.nodeType === Node.TEXT_NODE);
-                if (hasOnlyText && target.textContent?.trim()) {
-                    textEl = target;
+            if (target) {
+                const result = findEditTarget(target);
+                if (result) {
+                    textEl = result.textEl;
+                    annotatedParent = result.annotatedParent;
                 }
             }
         }
         if (!textEl || !annotatedParent || editingEl)
             return;
-        // Block inline editing for elements bound to dynamic expressions
-        if (textEl.hasAttribute('data-nk-dynamic') || textEl.closest('[data-nk-dynamic]')) {
+        const isDynamic = textEl.hasAttribute('data-nk-dynamic') || !!textEl.closest('[data-nk-dynamic]');
+        const isI18n = !!textEl.getAttribute('data-nk-i18n-key') || !!textEl.closest('[data-nk-i18n-key]');
+        if (isDynamic && !isI18n) {
             event.preventDefault();
             event.stopPropagation();
-            textEl.style.outline = '2px dashed #f59e0b';
-            textEl.style.outlineOffset = '2px';
-            const indicator = document.createElement('div');
-            Object.assign(indicator.style, {
-                position: 'fixed',
-                background: '#f59e0b',
-                color: '#000',
-                padding: '4px 8px',
-                borderRadius: '4px',
-                fontSize: '11px',
-                fontFamily: 'system-ui',
-                zIndex: '10000',
-                pointerEvents: 'none',
-            });
-            indicator.textContent = '\u26A1 Bound to variable \u2014 edit in code';
-            const rect = textEl.getBoundingClientRect();
-            indicator.style.left = `${rect.left}px`;
-            indicator.style.top = `${rect.top - 28}px`;
-            document.body.appendChild(indicator);
-            setTimeout(() => {
-                textEl.style.outline = '';
-                textEl.style.outlineOffset = '';
-                indicator.remove();
-            }, 2000);
+            showDynamicWarning(textEl);
             return;
         }
         event.preventDefault();
         event.stopPropagation();
-        editingEl = textEl;
-        const originalText = textEl.textContent || '';
-        textEl.setAttribute('contenteditable', 'true');
-        textEl.focus();
-        textEl.style.outline = '2px solid #3b82f6';
-        textEl.style.outlineOffset = '2px';
-        textEl.style.borderRadius = '2px';
-        textEl.style.minWidth = '20px';
-        const range = document.createRange();
-        range.selectNodeContents(textEl);
-        const sel = window.getSelection();
-        sel?.removeAllRanges();
-        sel?.addRange(range);
-        const sourceAttr = annotatedParent.getAttribute('data-nk-source');
-        const lastColon = sourceAttr.lastIndexOf(':');
-        const sourceFile = sourceAttr.substring(0, lastColon);
-        const line = parseInt(sourceAttr.substring(lastColon + 1), 10);
-        const commitEdit = () => {
-            if (!editingEl)
-                return;
-            const newText = editingEl.textContent || '';
-            editingEl.removeAttribute('contenteditable');
-            editingEl.style.outline = '';
-            editingEl.style.outlineOffset = '';
-            editingEl.style.borderRadius = '';
-            editingEl.style.minWidth = '';
-            editingEl = null;
-            if (newText !== originalText) {
-                // Check if this element has an i18n key — if so, send a translation change
-                const i18nKey = textEl.getAttribute('data-nk-i18n-key');
-                if (i18nKey) {
-                    const locale = document.documentElement.lang || 'en';
-                    sendToHost({
-                        type: 'NK_TRANSLATION_CHANGED',
-                        payload: { key: i18nKey, locale, originalText, newText }
-                    });
-                }
-                else {
-                    sendToHost({
-                        type: 'NK_TEXT_CHANGED',
-                        payload: { sourceFile, line, originalText, newText }
-                    });
-                }
-            }
-        };
-        textEl.addEventListener('blur', commitEdit, { once: true });
-        textEl.addEventListener('keydown', (e) => {
-            if (e.key === 'Enter' && !e.shiftKey) {
-                e.preventDefault();
-                textEl.blur();
-            }
-            if (e.key === 'Escape') {
-                textEl.textContent = originalText;
-                textEl.blur();
-            }
-        });
+        startEditing(textEl, annotatedParent);
     });
 }

package/dist/editor/overlay-events.d.ts

@@ -0,0 +1,5 @@
+export declare function setupMouseEvents(): void;
+export declare function setupTouchEvents(): void;
+export declare function setupToolbarHandlers(toolbar: HTMLDivElement, filePanel: HTMLDivElement): void;
+export declare function setupKeyboardHandlers(toolbar: HTMLDivElement): void;
+export declare function setupScrollResize(): void;

package/dist/editor/overlay-events.js

@@ -0,0 +1,364 @@
+/**
+ * Overlay Events — mouse, touch, toolbar, keyboard, and scroll/resize
+ * event handlers for the standalone editor overlay.
+ */
+import { findAnnotatedElement, parseSourceAttr } from './element-annotator.js';
+import { triggerInlineEdit } from './inline-text-edit.js';
+import { deepElementFromPoint, positionOverlay, hideOverlay } from './overlay-utils.js';
+import { positionTextToolbar, hideTextToolbar } from './text-toolbar.js';
+import { showPropertiesForElement, hidePropertiesPanel, isPropertiesPanelOpen } from './properties-panel.js';
+import { hideAiChatPanel, isAiChatPanelOpen, updateAiChatPosition } from './ai-chat-panel.js';
+import { showAiProjectPanel, hideAiProjectPanel, isAiProjectPanelOpen } from './ai-project-panel.js';
+import { showTextToolbarForElement } from './text-toolbar.js';
+import { showAiChatForElement } from './ai-chat-panel.js';
+import { updateSelectionInfo, setMode, closeFilePanel, loadFileList, saveCurrentFile, getIsEditorMode, getCurrentEditorFile, getIsFilePanelOpen, setIsFilePanelOpen, } from './editor-toolbar.js';
+import { getSelectedElement, setSelectedElement, getHoverOverlay, getSelectOverlay, getMultiSelectedElements, getMultiSelectOverlays, deselect, selectSingle, toggleMultiSelect, touchToElement, sendPageAiPrompt, } from './overlay-selection.js';
+const isTouchDevice = ('ontouchstart' in window) || navigator.maxTouchPoints > 0;
+// ── Mouse events (desktop) ──
+export function setupMouseEvents() {
+    const hoverOverlay = getHoverOverlay();
+    let lastHoverEl = null;
+    let hoverRaf = 0;
+    document.addEventListener('mousemove', (event) => {
+        if (!getIsEditorMode())
+            return;
+        if (hoverRaf)
+            return;
+        hoverRaf = requestAnimationFrame(() => {
+            hoverRaf = 0;
+            const selectedElement = getSelectedElement();
+            let hoverEl = document.elementFromPoint(event.clientX, event.clientY);
+            while (hoverEl?.shadowRoot) {
+                const inner = hoverEl.shadowRoot.elementFromPoint(event.clientX, event.clientY);
+                if (!inner || inner === hoverEl)
+                    break;
+                hoverEl = inner;
+            }
+            if (hoverEl && hoverEl !== selectedElement && hoverEl !== document.body && hoverEl !== document.documentElement && !hoverEl.closest('#nk-editor-toolbar') && !hoverEl.closest('#nk-props-panel') && !hoverEl.closest('#nk-file-panel') && !hoverEl.closest('#nk-ai-chat') && !hoverEl.closest('#nk-ai-project') && !hoverEl.closest('#nk-pp-fab')) {
+                if (hoverEl !== lastHoverEl) {
+                    lastHoverEl = hoverEl;
+                    positionOverlay(hoverOverlay, hoverEl);
+                }
+            }
+            else {
+                lastHoverEl = null;
+                hideOverlay(hoverOverlay);
+            }
+        });
+    }, true);
+    document.addEventListener('mouseleave', () => {
+        lastHoverEl = null;
+        hideOverlay(hoverOverlay);
+    });
+    // Pointerdown handler to select disabled/pointer-events:none elements.
+    document.addEventListener('pointerdown', (event) => {
+        if (isTouchDevice)
+            return;
+        if (!getIsEditorMode())
+            return;
+        const t = event.target;
+        if (t.closest('#nk-editor-toolbar') || t.closest('#nk-file-panel') || t.closest('#nk-file-editor') || t.closest('#nk-text-toolbar') || t.closest('#nk-props-panel') || t.closest('#nk-ai-chat') || t.closest('#nk-ai-project') || t.closest('#nk-pp-fab'))
+            return;
+        const deepEl = deepElementFromPoint(event.clientX, event.clientY);
+        if (!deepEl)
+            return;
+        const deepRoot = deepEl.getRootNode();
+        const hostEl = deepRoot instanceof ShadowRoot ? deepRoot.host : null;
+        const isHostUnclickable = hostEl && (hostEl.hasAttribute('disabled') ||
+            hostEl.getAttribute('aria-disabled') === 'true' ||
+            window.getComputedStyle(hostEl).pointerEvents === 'none');
+        const isDeepUnclickable = deepEl.disabled ||
+            window.getComputedStyle(deepEl).pointerEvents === 'none';
+        if (!isHostUnclickable && !isDeepUnclickable)
+            return;
+        let selectEl = hostEl && hostEl.getAttribute('data-nk-source') ? hostEl : deepEl;
+        if (!selectEl.getAttribute('data-nk-source')) {
+            let el = selectEl;
+            while (el) {
+                if (el.getAttribute('data-nk-source')) {
+                    selectEl = el;
+                    break;
+                }
+                const r = el.getRootNode();
+                if (r instanceof ShadowRoot) {
+                    el = r.host;
+                    continue;
+                }
+                el = el.parentElement;
+            }
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        if (event.shiftKey) {
+            toggleMultiSelect(selectEl);
+        }
+        else {
+            selectSingle(selectEl);
+        }
+    }, true);
+    // Click to select (desktop) — supports Shift+click for multi-select
+    let clickTimer = null;
+    document.addEventListener('click', (event) => {
+        if (isTouchDevice)
+            return;
+        if (!getIsEditorMode())
+            return;
+        const t = event.target;
+        if (t.closest('#nk-editor-toolbar') || t.closest('#nk-file-panel') || t.closest('#nk-file-editor') || t.closest('#nk-text-toolbar') || t.closest('#nk-props-panel') || t.closest('#nk-ai-chat') || t.closest('#nk-ai-project') || t.closest('#nk-pp-fab'))
+            return;
+        let result = findAnnotatedElement(event);
+        if (result?.element) {
+            const root = result.element.getRootNode();
+            if (root instanceof ShadowRoot) {
+                const host = root.host;
+                const hostSrc = host.getAttribute('data-nk-source');
+                if (hostSrc) {
+                    const parsed = parseSourceAttr(hostSrc);
+                    if (parsed)
+                        result = { element: host, source: parsed };
+                }
+            }
+        }
+        if (!result && t) {
+            let el = t;
+            const root = t.getRootNode();
+            if (root instanceof ShadowRoot) {
+                const host = root.host;
+                const hostSrc = host.getAttribute('data-nk-source');
+                if (hostSrc) {
+                    const parsed = parseSourceAttr(hostSrc);
+                    if (parsed)
+                        result = { element: host, source: parsed };
+                }
+            }
+            if (!result) {
+                while (el) {
+                    const src = el.getAttribute('data-nk-source');
+                    if (src) {
+                        const parsed = parseSourceAttr(src);
+                        if (parsed) {
+                            result = { element: el, source: parsed };
+                            break;
+                        }
+                    }
+                    el = el.parentElement;
+                }
+            }
+        }
+        let targetEl = result?.element ?? t;
+        if (!targetEl || targetEl === document.body || targetEl === document.documentElement) {
+            deselect();
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        if (clickTimer)
+            clearTimeout(clickTimer);
+        const selectEl = targetEl;
+        const isShift = event.shiftKey;
+        clickTimer = setTimeout(() => {
+            if (isShift) {
+                toggleMultiSelect(selectEl);
+            }
+            else {
+                selectSingle(selectEl);
+            }
+        }, 200);
+    }, true);
+    document.addEventListener('dblclick', () => {
+        if (clickTimer) {
+            clearTimeout(clickTimer);
+            clickTimer = null;
+        }
+    }, true);
+}
+// ── Touch events (mobile/tablet) ──
+export function setupTouchEvents() {
+    const hoverOverlay = getHoverOverlay();
+    const selectOverlay = getSelectOverlay();
+    let lastTapTime = 0;
+    let lastTapTarget = null;
+    let tapTimer = null;
+    document.addEventListener('touchend', (event) => {
+        const target = event.target;
+        if (target.closest('#nk-editor-toolbar') || target.closest('#nk-file-panel') || target.closest('#nk-file-editor') || target.closest('#nk-text-toolbar') || target.closest('#nk-props-panel') || target.closest('#nk-ai-chat') || target.closest('#nk-ai-project') || target.closest('#nk-pp-fab')) {
+            return;
+        }
+        if (!getIsEditorMode())
+            return;
+        const touch = event.changedTouches[0];
+        if (!touch)
+            return;
+        const result = touchToElement(touch);
+        let touchTargetEl = result?.element ?? document.elementFromPoint(touch.clientX, touch.clientY);
+        if (!touchTargetEl || touchTargetEl === document.body || touchTargetEl === document.documentElement)
+            return;
+        const now = Date.now();
+        const resultSource = touchTargetEl.getAttribute('data-nk-source') || '';
+        const lastSource = lastTapTarget?.getAttribute('data-nk-source') || '';
+        const isDoubleTap = (now - lastTapTime < 350) && (resultSource !== '' ? resultSource === lastSource : touchTargetEl === lastTapTarget);
+        lastTapTime = now;
+        lastTapTarget = touchTargetEl;
+        if (isDoubleTap) {
+            if (tapTimer) {
+                clearTimeout(tapTimer);
+                tapTimer = null;
+            }
+            hideTextToolbar();
+            let touchTarget = document.elementFromPoint(touch.clientX, touch.clientY);
+            if (touchTarget?.shadowRoot) {
+                const inner = touchTarget.shadowRoot.elementFromPoint(touch.clientX, touch.clientY);
+                if (inner instanceof HTMLElement)
+                    touchTarget = inner;
+            }
+            if (touchTarget) {
+                triggerInlineEdit(touchTarget);
+            }
+            event.preventDefault();
+        }
+        else {
+            if (tapTimer)
+                clearTimeout(tapTimer);
+            const tapEl = touchTargetEl;
+            tapTimer = setTimeout(() => {
+                setSelectedElement(tapEl);
+                positionOverlay(selectOverlay, tapEl);
+                hideOverlay(hoverOverlay);
+                updateSelectionInfo(tapEl);
+                showTextToolbarForElement(tapEl);
+                showPropertiesForElement(tapEl);
+                showAiChatForElement(tapEl);
+            }, 300);
+            event.preventDefault();
+        }
+    }, { passive: false, capture: true });
+}
+// ── Toolbar button handlers ──
+export function setupToolbarHandlers(toolbar, filePanel) {
+    // Page-level AI input
+    const pageAiInput = toolbar.querySelector('.nk-tb-page-ai-input');
+    const pageAiSend = toolbar.querySelector('.nk-tb-page-ai-send');
+    pageAiInput.addEventListener('input', () => {
+        pageAiSend.disabled = !pageAiInput.value.trim();
+    });
+    pageAiInput.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter' && pageAiInput.value.trim()) {
+            e.preventDefault();
+            sendPageAiPrompt(pageAiInput.value.trim());
+            pageAiInput.value = '';
+            pageAiSend.disabled = true;
+        }
+        e.stopPropagation();
+    });
+    pageAiSend.addEventListener('click', (e) => {
+        e.stopPropagation();
+        if (pageAiInput.value.trim()) {
+            sendPageAiPrompt(pageAiInput.value.trim());
+            pageAiInput.value = '';
+            pageAiSend.disabled = true;
+        }
+    });
+    // Edit / Preview toggle
+    document.getElementById('nk-tb-toggle').addEventListener('click', (e) => {
+        e.stopPropagation();
+        setMode(!getIsEditorMode());
+    });
+    // Deselect button
+    toolbar.querySelector('.nk-tb-deselect').addEventListener('click', (e) => {
+        e.stopPropagation();
+        deselect();
+    });
+    // Project AI panel toggle
+    toolbar.querySelector('.nk-tb-project-ai').addEventListener('click', (e) => {
+        e.stopPropagation();
+        if (isAiProjectPanelOpen()) {
+            hideAiProjectPanel();
+            toolbar.querySelector('.nk-tb-project-ai').classList.remove('active');
+        }
+        else {
+            showAiProjectPanel();
+            toolbar.querySelector('.nk-tb-project-ai').classList.add('active');
+        }
+    });
+    // File panel toggle
+    toolbar.querySelector('.nk-tb-files').addEventListener('click', (e) => {
+        e.stopPropagation();
+        if (getIsFilePanelOpen()) {
+            closeFilePanel();
+        }
+        else {
+            setIsFilePanelOpen(true);
+            filePanel.classList.add('open');
+            toolbar.querySelector('.nk-tb-files').classList.add('active');
+            loadFileList();
+        }
+    });
+    // Mobile close button in file panel header
+    document.getElementById('nk-fp-close').addEventListener('click', (e) => {
+        e.stopPropagation();
+        closeFilePanel();
+    });
+    // File editor save / close
+    document.getElementById('nk-fe-save').addEventListener('click', saveCurrentFile);
+    document.getElementById('nk-fe-close').addEventListener('click', () => {
+        document.getElementById('nk-file-editor').classList.remove('open');
+        // On mobile, re-show the file list
+        if (window.innerWidth <= 640 && getIsFilePanelOpen()) {
+            filePanel.classList.add('open');
+        }
+    });
+}
+// ── Keyboard handlers ──
+export function setupKeyboardHandlers(toolbar) {
+    document.addEventListener('keydown', (e) => {
+        if ((e.ctrlKey || e.metaKey) && e.key === 's' && getCurrentEditorFile()) {
+            e.preventDefault();
+            saveCurrentFile();
+        }
+        if (e.key === 'Escape') {
+            if (getCurrentEditorFile()) {
+                document.getElementById('nk-file-editor').classList.remove('open');
+            }
+            else if (isAiProjectPanelOpen()) {
+                hideAiProjectPanel();
+                toolbar.querySelector('.nk-tb-project-ai')?.classList.remove('active');
+            }
+            else if (isAiChatPanelOpen()) {
+                hideAiChatPanel();
+            }
+            else if (isPropertiesPanelOpen()) {
+                hidePropertiesPanel();
+            }
+            else if (getIsFilePanelOpen()) {
+                closeFilePanel();
+            }
+            else if (getSelectedElement()) {
+                deselect();
+            }
+        }
+    });
+}
+// ── Scroll / resize overlay repositioning ──
+export function setupScrollResize() {
+    const selectOverlay = getSelectOverlay();
+    const updateOverlays = () => {
+        const selectedElement = getSelectedElement();
+        if (selectedElement) {
+            positionOverlay(selectOverlay, selectedElement);
+            const textTb = document.getElementById('nk-text-toolbar');
+            if (textTb && textTb.style.display !== 'none')
+                positionTextToolbar(selectedElement);
+        }
+        // Reposition multi-select overlays
+        const multiSelectedElements = getMultiSelectedElements();
+        const multiSelectOverlays = getMultiSelectOverlays();
+        for (let i = 0; i < multiSelectedElements.length; i++) {
+            if (multiSelectedElements[i].isConnected && multiSelectOverlays[i]) {
+                positionOverlay(multiSelectOverlays[i], multiSelectedElements[i]);
+            }
+        }
+        updateAiChatPosition();
+    };
+    window.addEventListener('scroll', updateOverlays, true);
+    window.addEventListener('resize', updateOverlays);
+}

package/dist/editor/overlay-hmr.d.ts

@@ -0,0 +1,2 @@
+export declare function reselectAfterHmr(): void;
+export declare function setupHmrListener(): void;