@nuraly/lumenjs 0.1.2 → 0.1.4

package/dist/editor/overlay-hmr.js

@@ -0,0 +1,75 @@
+/**
+ * Overlay HMR — re-select elements after hot module replacement updates
+ * and listen for HMR events via WebSocket.
+ */
+import { positionOverlay } from './overlay-utils.js';
+import { showPropertiesForElement } from './properties-panel.js';
+import { isAiChatPanelOpen, updateAiChatTarget } from './ai-chat-panel.js';
+import { updateSelectionInfo } from './editor-toolbar.js';
+import { getSelectedElement, setSelectedElement, getSelectOverlay, } from './overlay-selection.js';
+export function reselectAfterHmr() {
+    const selectedElement = getSelectedElement();
+    if (!selectedElement)
+        return;
+    const source = selectedElement.getAttribute('data-nk-source');
+    const elTag = selectedElement.tagName.toLowerCase();
+    const elClass = selectedElement.className;
+    requestAnimationFrame(() => {
+        setTimeout(() => {
+            let newEl = null;
+            if (source) {
+                newEl = document.querySelector(`[data-nk-source="${source}"]`);
+                if (newEl && newEl.shadowRoot && newEl.tagName.toLowerCase() !== elTag) {
+                    const inner = newEl.shadowRoot.querySelector(elTag)
+                        || (elClass ? newEl.shadowRoot.querySelector(`.${elClass.split(' ')[0]}`) : null);
+                    if (inner)
+                        newEl = inner;
+                }
+            }
+            if (!newEl && elClass) {
+                const hosts = document.querySelectorAll('[data-nk-source]');
+                for (const host of hosts) {
+                    if (host.shadowRoot) {
+                        const match = host.shadowRoot.querySelector(`${elTag}.${elClass.split(' ')[0]}`);
+                        if (match) {
+                            newEl = match;
+                            break;
+                        }
+                    }
+                }
+            }
+            const selectOverlay = getSelectOverlay();
+            if (newEl) {
+                setSelectedElement(newEl);
+                positionOverlay(selectOverlay, newEl);
+                updateSelectionInfo(newEl);
+                showPropertiesForElement(newEl);
+                if (isAiChatPanelOpen())
+                    updateAiChatTarget(newEl);
+            }
+            else {
+                const current = getSelectedElement();
+                if (current?.isConnected) {
+                    showPropertiesForElement(current);
+                    if (isAiChatPanelOpen())
+                        updateAiChatTarget(current);
+                }
+            }
+        }, 150);
+    });
+}
+export function setupHmrListener() {
+    try {
+        const ws = new WebSocket(`${location.protocol === 'https:' ? 'wss' : 'ws'}://${location.host}`, 'vite-hmr');
+        ws.addEventListener('message', (ev) => {
+            try {
+                const msg = JSON.parse(ev.data);
+                if (msg.type === 'custom' && msg.event === 'nk-editor-update') {
+                    reselectAfterHmr();
+                }
+            }
+            catch { }
+        });
+    }
+    catch { }
+}

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

@@ -0,0 +1,29 @@
+/**
+ * Shared ref for text-toolbar (and other modules) to access selectedElement.
+ * Backed by the module-level variable — reads/writes go through the proxy.
+ */
+export declare const selectedElementRef: {
+    current: HTMLElement | null;
+};
+export declare function getSelectedElement(): HTMLElement | null;
+export declare function setSelectedElement(el: HTMLElement | null): void;
+export declare function getHoverOverlay(): HTMLDivElement;
+export declare function setHoverOverlay(ov: HTMLDivElement): void;
+export declare function getSelectOverlay(): HTMLDivElement;
+export declare function setSelectOverlay(ov: HTMLDivElement): void;
+export declare function getMultiSelectedElements(): HTMLElement[];
+export declare function getMultiSelectOverlays(): HTMLDivElement[];
+export declare function clearMultiSelection(): void;
+export declare function deselect(): void;
+/** Select a single element (clearing multi-selection). */
+export declare function selectSingle(el: HTMLElement): void;
+/** Toggle an element in/out of multi-selection (Shift+click). */
+export declare function toggleMultiSelect(el: HTMLElement): void;
+/**
+ * Creates a synthetic lookup at the touch point to find an annotated element.
+ */
+export declare function touchToElement(touch: Touch): {
+    element: HTMLElement;
+    source: any;
+} | null;
+export declare function sendPageAiPrompt(prompt: string): void;

package/dist/editor/overlay-selection.js

@@ -0,0 +1,148 @@
+/**
+ * Overlay Selection State & Logic — owns selection state and exposes
+ * getters/setters so other overlay modules can share it.
+ */
+import { createOverlay, positionOverlay, hideOverlay } from './overlay-utils.js';
+import { showTextToolbarForElement, hideTextToolbar, } from './text-toolbar.js';
+import { showPropertiesForElement, hidePropertiesPanel } from './properties-panel.js';
+import { showAiChatForElement, showAiChatForElements, hideAiChatPanel } from './ai-chat-panel.js';
+import { showAiProjectPanel, isAiProjectPanelOpen, sendProjectMessage } from './ai-project-panel.js';
+import { updateSelectionInfo, getToolbar } from './editor-toolbar.js';
+// ── Module state ──
+let selectedElement = null;
+let hoverOverlay;
+let selectOverlay;
+let multiSelectedElements = [];
+let multiSelectOverlays = [];
+/**
+ * Shared ref for text-toolbar (and other modules) to access selectedElement.
+ * Backed by the module-level variable — reads/writes go through the proxy.
+ */
+export const selectedElementRef = {
+    get current() { return selectedElement; },
+    set current(val) { selectedElement = val; },
+};
+// ── Getters / setters for shared overlay references ──
+export function getSelectedElement() { return selectedElement; }
+export function setSelectedElement(el) { selectedElement = el; }
+export function getHoverOverlay() { return hoverOverlay; }
+export function setHoverOverlay(ov) { hoverOverlay = ov; }
+export function getSelectOverlay() { return selectOverlay; }
+export function setSelectOverlay(ov) { selectOverlay = ov; }
+export function getMultiSelectedElements() { return multiSelectedElements; }
+export function getMultiSelectOverlays() { return multiSelectOverlays; }
+// ── Selection logic ──
+export function clearMultiSelection() {
+    for (const ov of multiSelectOverlays) {
+        hideOverlay(ov);
+        ov.remove();
+    }
+    multiSelectOverlays = [];
+    multiSelectedElements = [];
+}
+export function deselect() {
+    if (selectedElement || multiSelectedElements.length > 0) {
+        selectedElement = null;
+        clearMultiSelection();
+        hideOverlay(selectOverlay);
+        hideTextToolbar();
+        hidePropertiesPanel();
+        hideAiChatPanel();
+        updateSelectionInfo(null);
+    }
+}
+/** Select a single element (clearing multi-selection). */
+export function selectSingle(el) {
+    clearMultiSelection();
+    selectedElement = el;
+    positionOverlay(selectOverlay, el);
+    hideOverlay(hoverOverlay);
+    updateSelectionInfo(el);
+    showTextToolbarForElement(el);
+    showPropertiesForElement(el);
+    showAiChatForElement(el);
+}
+/** Toggle an element in/out of multi-selection (Shift+click). */
+export function toggleMultiSelect(el) {
+    hideTextToolbar();
+    // If this is the first shift-click and we already have a single selection,
+    // move that single selection into the multi-select array
+    if (multiSelectedElements.length === 0 && selectedElement) {
+        multiSelectedElements.push(selectedElement);
+        const ov = createOverlay('#3b82f6', 'solid');
+        positionOverlay(ov, selectedElement);
+        multiSelectOverlays.push(ov);
+    }
+    const idx = multiSelectedElements.indexOf(el);
+    if (idx >= 0) {
+        // Remove from multi-selection
+        multiSelectedElements.splice(idx, 1);
+        const ov = multiSelectOverlays.splice(idx, 1)[0];
+        if (ov) {
+            hideOverlay(ov);
+            ov.remove();
+        }
+    }
+    else {
+        // Add to multi-selection
+        multiSelectedElements.push(el);
+        const ov = createOverlay('#3b82f6', 'solid');
+        positionOverlay(ov, el);
+        multiSelectOverlays.push(ov);
+    }
+    // Update primary selected element to the first in the list
+    if (multiSelectedElements.length > 0) {
+        selectedElement = multiSelectedElements[0];
+        // Hide the single-select overlay; multi-select overlays handle it
+        hideOverlay(selectOverlay);
+        hideOverlay(hoverOverlay);
+        updateSelectionInfo(selectedElement);
+        showAiChatForElements(multiSelectedElements);
+    }
+    else {
+        deselect();
+    }
+}
+// ── Touch helpers ──
+/**
+ * Creates a synthetic lookup at the touch point to find an annotated element.
+ */
+export function touchToElement(touch) {
+    let target = document.elementFromPoint(touch.clientX, touch.clientY);
+    if (!target)
+        return null;
+    if (target.shadowRoot) {
+        const inner = target.shadowRoot.elementFromPoint(touch.clientX, touch.clientY);
+        if (inner && inner instanceof HTMLElement)
+            target = inner;
+    }
+    let el = target;
+    while (el) {
+        const sourceAttr = el.getAttribute('data-nk-source');
+        if (sourceAttr) {
+            const lastColon = sourceAttr.lastIndexOf(':');
+            if (lastColon !== -1) {
+                const file = sourceAttr.substring(0, lastColon);
+                const line = parseInt(sourceAttr.substring(lastColon + 1), 10);
+                if (!isNaN(line)) {
+                    return { element: el, source: { file, line, tag: el.tagName.toLowerCase() } };
+                }
+            }
+        }
+        if (!el.parentElement && el.getRootNode() !== document) {
+            const root = el.getRootNode();
+            el = root.host;
+        }
+        else {
+            el = el.parentElement;
+        }
+    }
+    return null;
+}
+export function sendPageAiPrompt(prompt) {
+    if (!isAiProjectPanelOpen()) {
+        showAiProjectPanel();
+        getToolbar()?.querySelector('.nk-tb-project-ai')?.classList.add('active');
+    }
+    sendProjectMessage(prompt);
+}

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

@@ -0,0 +1,12 @@
+/**
+ * Overlay utilities — create, position, and hide highlight overlays.
+ * Also provides deepElementFromPoint for drilling through shadow DOMs.
+ */
+/**
+ * Recursively drill through shadow DOMs to find the deepest element at a point.
+ * Temporarily forces pointer-events:auto so disabled/hidden elements are discoverable.
+ */
+export declare function deepElementFromPoint(x: number, y: number): HTMLElement | null;
+export declare function createOverlay(color: string, style?: 'solid' | 'dashed'): HTMLDivElement;
+export declare function positionOverlay(overlay: HTMLDivElement, el: HTMLElement): void;
+export declare function hideOverlay(overlay: HTMLDivElement): void;

package/dist/editor/overlay-utils.js

@@ -0,0 +1,59 @@
+/**
+ * Overlay utilities — create, position, and hide highlight overlays.
+ * Also provides deepElementFromPoint for drilling through shadow DOMs.
+ */
+/**
+ * Recursively drill through shadow DOMs to find the deepest element at a point.
+ * Temporarily forces pointer-events:auto so disabled/hidden elements are discoverable.
+ */
+export function deepElementFromPoint(x, y) {
+    // Inject a temporary style that forces pointer-events on everything
+    const forceStyle = document.createElement('style');
+    forceStyle.textContent = '* { pointer-events: auto !important; }';
+    document.head.appendChild(forceStyle);
+    // Also inject into all shadow roots we encounter
+    const shadowStyles = [];
+    let el = document.elementFromPoint(x, y);
+    while (el?.shadowRoot) {
+        const ss = document.createElement('style');
+        ss.textContent = '* { pointer-events: auto !important; }';
+        el.shadowRoot.appendChild(ss);
+        shadowStyles.push({ root: el.shadowRoot, style: ss });
+        const inner = el.shadowRoot.elementFromPoint(x, y);
+        if (!inner || inner === el)
+            break;
+        el = inner;
+    }
+    // Clean up
+    forceStyle.remove();
+    for (const { style } of shadowStyles)
+        style.remove();
+    return el;
+}
+export function createOverlay(color, style = 'solid') {
+    const el = document.createElement('div');
+    Object.assign(el.style, {
+        position: 'fixed',
+        pointerEvents: 'none',
+        border: `2px ${style} ${color}`,
+        borderRadius: '4px',
+        zIndex: '99998',
+        transition: 'all 0.1s ease',
+        display: 'none',
+    });
+    document.body.appendChild(el);
+    return el;
+}
+export function positionOverlay(overlay, el) {
+    const rect = el.getBoundingClientRect();
+    Object.assign(overlay.style, {
+        display: 'block',
+        top: `${rect.top - 2}px`,
+        left: `${rect.left - 2}px`,
+        width: `${rect.width + 4}px`,
+        height: `${rect.height + 4}px`,
+    });
+}
+export function hideOverlay(overlay) {
+    overlay.style.display = 'none';
+}

package/dist/editor/properties-panel-persist.d.ts

@@ -0,0 +1,14 @@
+/** Shared mutable state for debounce timers across panel modules. */
+export declare const state: {
+    debounceTimers: Record<string, ReturnType<typeof setTimeout>>;
+};
+export declare function resetDebounceTimers(): void;
+export declare function getSourceInfo(element: HTMLElement): {
+    sourceFile: string;
+    line: number;
+} | null;
+export declare function persistAttribute(element: HTMLElement, attrName: string, value: string | undefined): void;
+export declare function persistAttributeDebounced(element: HTMLElement, attrName: string, value: string | undefined, key: string): void;
+export declare function persistStyle(element: HTMLElement): void;
+export declare function persistStyleDebounced(element: HTMLElement): void;
+export declare function cleanStyleString(element: HTMLElement): string;

package/dist/editor/properties-panel-persist.js

@@ -0,0 +1,70 @@
+/**
+ * Properties Panel — persistence helpers, extracted from properties-panel.ts.
+ */
+import { applyAstModification } from './editor-api-client.js';
+/** Shared mutable state for debounce timers across panel modules. */
+export const state = { debounceTimers: {} };
+export function resetDebounceTimers() {
+    state.debounceTimers = {};
+}
+export function getSourceInfo(element) {
+    const sourceAttr = element.getAttribute('data-nk-source');
+    if (!sourceAttr)
+        return null;
+    const lastColon = sourceAttr.lastIndexOf(':');
+    if (lastColon === -1)
+        return null;
+    const sourceFile = sourceAttr.substring(0, lastColon);
+    const line = parseInt(sourceAttr.substring(lastColon + 1), 10);
+    if (isNaN(line))
+        return null;
+    return { sourceFile, line };
+}
+export function persistAttribute(element, attrName, value) {
+    const info = getSourceInfo(element);
+    if (!info)
+        return;
+    applyAstModification(info.sourceFile, {
+        type: value !== undefined ? 'setAttribute' : 'removeAttribute',
+        elementSelector: element.tagName.toLowerCase(),
+        sourceLine: info.line,
+        attributeName: attrName,
+        attributeValue: value,
+    }).catch(() => { });
+}
+export function persistAttributeDebounced(element, attrName, value, key) {
+    if (state.debounceTimers[key])
+        clearTimeout(state.debounceTimers[key]);
+    state.debounceTimers[key] = setTimeout(() => {
+        persistAttribute(element, attrName, value);
+    }, 300);
+}
+export function persistStyle(element) {
+    const info = getSourceInfo(element);
+    if (!info)
+        return;
+    const styleStr = cleanStyleString(element);
+    applyAstModification(info.sourceFile, {
+        type: 'setAttribute',
+        elementSelector: element.tagName.toLowerCase(),
+        sourceLine: info.line,
+        attributeName: 'style',
+        attributeValue: styleStr || undefined,
+    }).catch(() => { });
+}
+export function persistStyleDebounced(element) {
+    const key = '__style__';
+    if (state.debounceTimers[key])
+        clearTimeout(state.debounceTimers[key]);
+    state.debounceTimers[key] = setTimeout(() => {
+        persistStyle(element);
+    }, 300);
+}
+export function cleanStyleString(element) {
+    const styleStr = element.getAttribute('style') || '';
+    return styleStr
+        .split(';')
+        .map(s => s.trim())
+        .filter(s => s && !s.startsWith('outline') && !s.startsWith('outline-offset'))
+        .join('; ');
+}

package/dist/editor/properties-panel-rows.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Properties Panel — row builders, extracted from properties-panel.ts.
+ */
+import { PropertyInfo } from './property-registry.js';
+export declare function createGroup(label: string): HTMLDivElement;
+export declare function parseInlineStyles(element: HTMLElement): [string, string][];
+export declare function createPropertyRow(prop: PropertyInfo, element: HTMLElement): HTMLDivElement;
+export declare function createStyleRow(cssProp: string, cssVal: string, element: HTMLElement, group: HTMLDivElement): HTMLDivElement;
+export declare function createAddAttributeRow(element: HTMLElement, group: HTMLDivElement): HTMLDivElement;
+export declare function createAddStyleRow(element: HTMLElement, group: HTMLDivElement): HTMLDivElement;