@nuraly/lumenjs 0.1.3 → 0.1.4

package/dist/editor/editor-toolbar.d.ts

@@ -0,0 +1,14 @@
+import { createFilePanel, loadFileList, saveCurrentFile, closeFilePanel, getFilePanel, getIsFilePanelOpen, setIsFilePanelOpen, getCurrentEditorFile } from './file-editor.js';
+export { createFilePanel, loadFileList, saveCurrentFile, closeFilePanel, getFilePanel, getIsFilePanelOpen, setIsFilePanelOpen, getCurrentEditorFile, };
+export declare function initToolbarRefs(refs: {
+    selectOverlay: HTMLDivElement;
+    selectedElement: {
+        current: HTMLElement | null;
+    };
+    deselect: () => void;
+}): void;
+export declare function getToolbar(): HTMLDivElement;
+export declare function getIsEditorMode(): boolean;
+export declare function createToolbar(): HTMLDivElement;
+export declare function updateSelectionInfo(el: HTMLElement | null): void;
+export declare function setMode(editMode: boolean): void;

package/dist/editor/editor-toolbar.js

@@ -0,0 +1,115 @@
+/**
+ * Editor Toolbar — main top bar with file browser, edit/preview toggle, and file editor.
+ */
+import { parseSourceAttr } from './element-annotator.js';
+import { setPreviewMode } from './editor-bridge.js';
+import { injectToolbarStyles } from './toolbar-styles.js';
+import { createFilePanel, loadFileList, saveCurrentFile, closeFilePanel, getFilePanel, getIsFilePanelOpen, setIsFilePanelOpen, getCurrentEditorFile, initFileEditorToolbar, } from './file-editor.js';
+// Re-export file-editor exports for backwards compatibility
+export { createFilePanel, loadFileList, saveCurrentFile, closeFilePanel, getFilePanel, getIsFilePanelOpen, setIsFilePanelOpen, getCurrentEditorFile, };
+const isTouchDevice = ('ontouchstart' in window) || navigator.maxTouchPoints > 0;
+let toolbar;
+let isEditorMode = true;
+// These are set by standalone-overlay during init
+let selectOverlayRef;
+let selectedElementRef;
+let deselectFn;
+export function initToolbarRefs(refs) {
+    selectOverlayRef = refs.selectOverlay;
+    selectedElementRef = refs.selectedElement;
+    deselectFn = refs.deselect;
+}
+export function getToolbar() {
+    return toolbar;
+}
+export function getIsEditorMode() {
+    return isEditorMode;
+}
+export function createToolbar() {
+    const bar = document.createElement('div');
+    bar.id = 'nk-editor-toolbar';
+    bar.innerHTML = `
+    <div class="nk-toolbar-inner">
+      <div class="nk-toolbar-left">
+        <button class="nk-tb-btn nk-tb-files" title="Browse Files">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/></svg>
+          <span class="nk-tb-files-label">Files</span>
+        </button>
+        <span class="nk-tb-divider"></span>
+        <button class="nk-tb-toggle" id="nk-tb-toggle" title="Toggle Edit / Preview">
+          <span class="nk-tb-toggle-edit active">Edit</span>
+          <span class="nk-tb-toggle-preview">Preview</span>
+        </button>
+      </div>
+      <div class="nk-toolbar-center" id="nk-tb-selection">
+        <span class="nk-tb-hint">${isTouchDevice ? 'Tap to select. Double-tap text to edit.' : 'Click to select. Double-click text to edit.'}</span>
+      </div>
+      <div class="nk-toolbar-right">
+        <div class="nk-tb-page-ai">
+          <span class="nk-tb-page-ai-icon">✦</span>
+          <input class="nk-tb-page-ai-input" type="text" placeholder="Ask AI about this page..." />
+          <button class="nk-tb-page-ai-send" disabled title="Send">▶</button>
+        </div>
+        <button class="nk-tb-btn nk-tb-project-ai" title="Project AI Chat" style="display:flex;align-items:center;gap:4px">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg>
+          <span class="nk-tb-project-ai-label">Chat</span>
+        </button>
+        <button class="nk-tb-btn nk-tb-deselect" style="display:none" title="Deselect">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+        </button>
+      </div>
+    </div>
+  `;
+    injectToolbarStyles();
+    document.body.appendChild(bar);
+    toolbar = bar;
+    // Wire up the toolbar reference for the file editor module
+    initFileEditorToolbar(bar);
+    return bar;
+}
+export function updateSelectionInfo(el) {
+    const center = document.getElementById('nk-tb-selection');
+    const deselectBtn = toolbar.querySelector('.nk-tb-deselect');
+    if (!el) {
+        center.innerHTML = `<span class="nk-tb-hint">${isTouchDevice ? 'Tap to select. Double-tap text to edit.' : 'Click to select. Double-click text to edit.'}</span>`;
+        deselectBtn.style.display = 'none';
+        return;
+    }
+    const sourceAttr = el.getAttribute('data-nk-source');
+    const source = sourceAttr ? parseSourceAttr(sourceAttr) : null;
+    const tag = el.tagName.toLowerCase();
+    const attrs = Array.from(el.attributes)
+        .filter(a => !a.name.startsWith('data-nk-'))
+        .map(a => a.value ? `${a.name}="${a.value}"` : a.name)
+        .slice(0, 3);
+    const attrStr = attrs.length ? ` <span class="nk-tb-attrs">${attrs.join(' ')}</span>` : '';
+    const sourceStr = source ? ` <span class="nk-tb-source">${source.file}:${source.line}</span>` : '';
+    center.innerHTML = `<span class="nk-tb-tag">&lt;${tag}&gt;</span>${attrStr}${sourceStr}`;
+    deselectBtn.style.display = 'inline-flex';
+}
+export function setMode(editMode) {
+    isEditorMode = editMode;
+    try {
+        localStorage.setItem('nk-editor-mode', editMode ? 'edit' : 'preview');
+    }
+    catch { }
+    const toggle = document.getElementById('nk-tb-toggle');
+    const editSpan = toggle.querySelector('.nk-tb-toggle-edit');
+    const previewSpan = toggle.querySelector('.nk-tb-toggle-preview');
+    const center = document.getElementById('nk-tb-selection');
+    setPreviewMode(!editMode);
+    if (editMode) {
+        editSpan.classList.add('active');
+        previewSpan.classList.remove('active');
+        center.innerHTML = `<span class="nk-tb-hint">${isTouchDevice ? 'Tap to select. Double-tap text to edit.' : 'Click to select. Double-click text to edit.'}</span>`;
+    }
+    else {
+        previewSpan.classList.add('active');
+        editSpan.classList.remove('active');
+        center.innerHTML = '<span class="nk-tb-hint">Preview mode — interact normally</span>';
+        // Deselect and close panels
+        deselectFn();
+        if (getIsFilePanelOpen())
+            closeFilePanel();
+    }
+}

package/dist/editor/file-editor.d.ts

@@ -0,0 +1,9 @@
+export declare function initFileEditorToolbar(tb: HTMLDivElement): void;
+export declare function getFilePanel(): HTMLDivElement;
+export declare function getIsFilePanelOpen(): boolean;
+export declare function setIsFilePanelOpen(val: boolean): void;
+export declare function getCurrentEditorFile(): string | null;
+export declare function createFilePanel(): HTMLDivElement;
+export declare function loadFileList(): Promise<void>;
+export declare function saveCurrentFile(): Promise<void>;
+export declare function closeFilePanel(): void;

package/dist/editor/file-editor.js

@@ -0,0 +1,236 @@
+/**
+ * File Editor — file panel, file list, editor opening/saving, and close logic.
+ */
+import { highlightCode } from './syntax-highlighter.js';
+import { readFile, writeFile } from './editor-api-client.js';
+import { CodeJar } from 'codejar';
+let filePanel;
+let isFilePanelOpen = false;
+let currentEditorFile = null;
+let jar = null;
+/** Provide the toolbar element so closeFilePanel can access it. */
+let toolbarEl;
+export function initFileEditorToolbar(tb) {
+    toolbarEl = tb;
+}
+export function getFilePanel() {
+    return filePanel;
+}
+export function getIsFilePanelOpen() {
+    return isFilePanelOpen;
+}
+export function setIsFilePanelOpen(val) {
+    isFilePanelOpen = val;
+}
+export function getCurrentEditorFile() {
+    return currentEditorFile;
+}
+export function createFilePanel() {
+    const panel = document.createElement('div');
+    panel.id = 'nk-file-panel';
+    panel.innerHTML = `
+    <div class="nk-fp-header">
+      <div class="nk-fp-tabs">
+        <button class="nk-fp-tab active" data-tab="files">Files</button>
+        <button class="nk-fp-tab" data-tab="pages">Pages</button>
+      </div>
+      <button class="nk-fp-close-btn" id="nk-fp-close">
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+      </button>
+    </div>
+    <div class="nk-fp-list" id="nk-fp-list"></div>
+    <div class="nk-fp-pages" id="nk-fp-pages" style="display:none"></div>
+  `;
+    document.body.appendChild(panel);
+    // File editor panel
+    const editor = document.createElement('div');
+    editor.id = 'nk-file-editor';
+    editor.innerHTML = `
+    <div class="nk-fe-header">
+      <span class="nk-fe-path" id="nk-fe-path"></span>
+      <div class="nk-fe-btns">
+        <button class="nk-fe-save" id="nk-fe-save">Save</button>
+        <button class="nk-fe-cancel" id="nk-fe-close">Close</button>
+      </div>
+    </div>
+    <div class="nk-fe-editor" id="nk-fe-editor"></div>
+  `;
+    document.body.appendChild(editor);
+    // Initialize CodeJar with syntax highlighting and auto-save
+    let saveDebounce = null;
+    const editorEl = editor.querySelector('#nk-fe-editor');
+    jar = CodeJar(editorEl, highlightCode, { tab: '  ', spellcheck: false });
+    jar.onUpdate((code) => {
+        if (saveDebounce)
+            clearTimeout(saveDebounce);
+        saveDebounce = setTimeout(() => {
+            if (currentEditorFile) {
+                const saveBtn = document.getElementById('nk-fe-save');
+                saveBtn.textContent = 'Saving...';
+                writeFile(currentEditorFile, code).then(() => {
+                    saveBtn.textContent = 'Saved!';
+                    saveBtn.style.background = '#22c55e';
+                    setTimeout(() => { saveBtn.textContent = 'Save'; saveBtn.style.background = ''; }, 1500);
+                }).catch(() => {
+                    saveBtn.textContent = 'Error!';
+                    saveBtn.style.background = '#ef4444';
+                    setTimeout(() => { saveBtn.textContent = 'Save'; saveBtn.style.background = ''; }, 2000);
+                });
+            }
+        }, 1000);
+    });
+    // Tab switching
+    let pagesLoaded = false;
+    panel.addEventListener('click', (e) => {
+        const tab = e.target.closest('.nk-fp-tab');
+        if (!tab)
+            return;
+        const tabName = tab.dataset.tab;
+        panel.querySelectorAll('.nk-fp-tab').forEach(t => t.classList.remove('active'));
+        tab.classList.add('active');
+        const filesList = panel.querySelector('#nk-fp-list');
+        const pagesList = panel.querySelector('#nk-fp-pages');
+        if (tabName === 'files') {
+            filesList.style.display = '';
+            pagesList.style.display = 'none';
+        }
+        else {
+            filesList.style.display = 'none';
+            pagesList.style.display = '';
+            if (!pagesLoaded) {
+                pagesLoaded = true;
+                loadPagesList();
+            }
+        }
+    });
+    filePanel = panel;
+    return panel;
+}
+async function loadPagesList() {
+    const container = document.getElementById('nk-fp-pages');
+    if (!container)
+        return;
+    try {
+        const res = await fetch('/__nk_editor/routes');
+        const data = await res.json();
+        const routes = data.routes || [];
+        // Group by deepest layout
+        const groups = new Map();
+        for (const r of routes) {
+            const layoutLabel = r.layouts?.length ? r.layouts[r.layouts.length - 1].tagName : 'no-layout';
+            if (!groups.has(layoutLabel))
+                groups.set(layoutLabel, []);
+            groups.get(layoutLabel).push(r);
+        }
+        let html = '';
+        for (const [layout, groupRoutes] of groups) {
+            html += `<div class="nk-fp-layout-group">`;
+            html += `<div class="nk-fp-layout-label">${layout}</div>`;
+            for (const r of groupRoutes) {
+                const currentPath = window.location.pathname;
+                // Match current page (handle dynamic segments)
+                const routeRegex = r.path.replace(/:[^/]+/g, '[^/]+');
+                const isActive = new RegExp(`^${routeRegex}$`).test(currentPath);
+                html += `<div class="nk-fp-route${isActive ? ' active' : ''}" data-route="${r.path}">${r.path}</div>`;
+            }
+            html += `</div>`;
+        }
+        container.innerHTML = html;
+        container.addEventListener('click', (e) => {
+            const route = e.target.closest('.nk-fp-route');
+            if (!route)
+                return;
+            window.location.href = route.dataset.route;
+        });
+    }
+    catch {
+        container.innerHTML = '<div style="padding:12px;color:#f87171;font-size:11px">Failed to load pages</div>';
+    }
+}
+function getFileIcon(name) {
+    if (name.endsWith('.ts'))
+        return '<span style="color:#3178c6">TS</span>';
+    if (name.endsWith('.js'))
+        return '<span style="color:#f7df1e">JS</span>';
+    if (name.endsWith('.json'))
+        return '<span style="color:#94a3b8">{}</span>';
+    if (name.endsWith('.css'))
+        return '<span style="color:#38bdf8">#</span>';
+    return '<span style="color:#64748b">~</span>';
+}
+export async function loadFileList() {
+    const listEl = document.getElementById('nk-fp-list');
+    if (!listEl)
+        return;
+    try {
+        const res = await fetch('/__nk_editor/files');
+        const data = await res.json();
+        const files = data.files || [];
+        listEl.innerHTML = files.map(f => `<div class="nk-fp-item" data-file="${f}">
+        <span class="nk-fp-icon">${getFileIcon(f)}</span>
+        <span>${f}</span>
+      </div>`).join('');
+        listEl.addEventListener('click', (e) => {
+            const item = e.target.closest('.nk-fp-item');
+            if (!item)
+                return;
+            const file = item.dataset.file;
+            openFileEditor(file);
+            listEl.querySelectorAll('.nk-fp-item').forEach(el => el.classList.remove('active'));
+            item.classList.add('active');
+        });
+    }
+    catch {
+        listEl.innerHTML = '<div style="padding:12px;color:#f87171;font-size:11px">Failed to load files</div>';
+    }
+}
+async function openFileEditor(filePath) {
+    const editorPanel = document.getElementById('nk-file-editor');
+    const pathEl = document.getElementById('nk-fe-path');
+    // On mobile, close the file list to make room for the editor
+    if (window.innerWidth <= 640) {
+        filePanel.classList.remove('open');
+    }
+    try {
+        const data = await readFile(filePath);
+        currentEditorFile = filePath;
+        pathEl.textContent = filePath;
+        jar.updateCode(data.content);
+        editorPanel.classList.add('open');
+    }
+    catch {
+        pathEl.textContent = filePath;
+        jar.updateCode('// Error loading file');
+        editorPanel.classList.add('open');
+    }
+}
+export async function saveCurrentFile() {
+    if (!currentEditorFile || !jar)
+        return;
+    const saveBtn = document.getElementById('nk-fe-save');
+    try {
+        saveBtn.textContent = 'Saving...';
+        await writeFile(currentEditorFile, jar.toString());
+        saveBtn.textContent = 'Saved!';
+        saveBtn.style.background = '#22c55e';
+        setTimeout(() => {
+            saveBtn.textContent = 'Save';
+            saveBtn.style.background = '';
+        }, 1500);
+    }
+    catch {
+        saveBtn.textContent = 'Error!';
+        saveBtn.style.background = '#ef4444';
+        setTimeout(() => {
+            saveBtn.textContent = 'Save';
+            saveBtn.style.background = '';
+        }, 2000);
+    }
+}
+export function closeFilePanel() {
+    isFilePanelOpen = false;
+    filePanel.classList.remove('open');
+    toolbarEl.querySelector('.nk-tb-files').classList.remove('active');
+    document.getElementById('nk-file-editor')?.classList.remove('open');
+    currentEditorFile = null;
+}

package/dist/editor/file-service.d.ts

@@ -0,0 +1,16 @@
+/**
+ * File service for the editor — scoped to a single project directory.
+ * Provides safe file CRUD with path-traversal protection.
+ */
+export declare class EditorFileService {
+    private projectDir;
+    constructor(projectDir: string);
+    listFiles(): string[];
+    readFile(filePath: string): string;
+    writeFile(filePath: string, content: string): void;
+    private walkDir;
+    /**
+     * Resolve a file path within the project, preventing path traversal.
+     */
+    private resolveSafe;
+}

package/dist/editor/file-service.js

@@ -0,0 +1,52 @@
+import fs from 'fs';
+import path from 'path';
+/**
+ * File service for the editor — scoped to a single project directory.
+ * Provides safe file CRUD with path-traversal protection.
+ */
+export class EditorFileService {
+    constructor(projectDir) {
+        this.projectDir = projectDir;
+    }
+    listFiles() {
+        if (!fs.existsSync(this.projectDir))
+            return [];
+        const results = [];
+        this.walkDir(this.projectDir, results);
+        return results;
+    }
+    readFile(filePath) {
+        const resolved = this.resolveSafe(filePath);
+        return fs.readFileSync(resolved, 'utf-8');
+    }
+    writeFile(filePath, content) {
+        const resolved = this.resolveSafe(filePath);
+        fs.mkdirSync(path.dirname(resolved), { recursive: true });
+        fs.writeFileSync(resolved, content);
+    }
+    walkDir(dir, results) {
+        const entries = fs.readdirSync(dir, { withFileTypes: true });
+        for (const entry of entries) {
+            const full = path.join(dir, entry.name);
+            const relative = path.relative(this.projectDir, full);
+            if (entry.isDirectory()) {
+                if (entry.name !== 'node_modules' && entry.name !== '.git' && entry.name !== '.lumenjs') {
+                    this.walkDir(full, results);
+                }
+            }
+            else {
+                results.push(relative);
+            }
+        }
+    }
+    /**
+     * Resolve a file path within the project, preventing path traversal.
+     */
+    resolveSafe(filePath) {
+        const resolved = path.resolve(this.projectDir, filePath);
+        if (!resolved.startsWith(this.projectDir + path.sep) && resolved !== this.projectDir) {
+            throw new Error('Path traversal detected');
+        }
+        return resolved;
+    }
+}

package/dist/editor/i18n-key-gen.d.ts

@@ -0,0 +1 @@
+export declare function generateI18nKey(sourceFile: string, tag: string, text: string): string;

package/dist/editor/i18n-key-gen.js

@@ -0,0 +1,7 @@
+export function generateI18nKey(sourceFile, tag, text) {
+    const basename = sourceFile.split('/').pop()?.replace(/\.\w+$/, '') || 'page';
+    const slug = text.substring(0, 30).toLowerCase()
+        .replace(/[^a-z0-9]+/g, '_')
+        .replace(/^_|_$/g, '');
+    return `${basename}.${tag}.${slug}`;
+}

package/dist/editor/inline-text-edit.d.ts

@@ -1 +1,6 @@
+/**
+ * Trigger inline text editing on an element directly.
+ * Called from standalone-overlay.ts on double-tap (mobile).
+ */
+export declare function triggerInlineEdit(target: HTMLElement): boolean;
 export declare function setupInlineTextEdit(): void;