flexdesk 0.1.0

package/src/editor/notebook_tab_bar.js

@@ -0,0 +1,456 @@
+/**
+ * NotebookTabBar — tab strip showing open files, with dirty indicators,
+ * close buttons, drag-and-drop reordering, double-click rename, and
+ * right-click context menu.
+ *
+ * Uses the same `.tab` / `.tab-title` / `.tab-dirty` / `.tab-close` DOM structure
+ * as the flow-page tab bar, so all editor tab bars share a unified appearance.
+ *
+ * Calls back into parent via:
+ *   onActivate(filePath)
+ *   onClose(filePath)
+ *   onCloseOthers(filePath)
+ *   onCloseToRight(filePath)
+ *   onCloseAll()
+ *   onCloseSaved()
+ *   onRename(oldPath, newPath)
+ *   onDuplicate(filePath)
+ *   onReorder(orderedPaths)
+ *   onRevealInExplorer(filePath)
+ *   onSplitRight(filePath)
+ *   onMoveToOtherPane(filePath)
+ *   onDropFromOtherPane(filePath)  — cross-pane drag-and-drop
+ */
+
+import { DragReorder } from '../ui/components/drag_reorder.js';
+
+/** Custom MIME type so tab bars recognise cross-pane drags. */
+const TAB_MIME = 'application/x-ecosim-tab';
+
+export class NotebookTabBar {
+    /** @type {HTMLElement} */
+    #container = null;
+
+    /** @type {object[]} [{filePath, label, fileType, isDirty}] */
+    #tabs = [];
+
+    /** @type {string|null} */
+    #activeTab = null;
+
+    /** @type {object} callbacks */
+    #callbacks = {};
+
+    // ─── Context menu ────────────────────────────────────────────────────────
+
+    /** @type {HTMLElement|null} */
+    #contextMenuEl = null;
+
+    /** @type {Function|null} */
+    #boundHideContextMenu = null;
+
+    // ─── Drag and drop ───────────────────────────────────────────────────────
+
+    /** Same-pane reorder. Cross-pane drops stay in this class's own
+     *  container handlers (#onStripDrag*).
+     *  @type {DragReorder|null} */
+    #dragReorder = null;
+
+    mount(container, callbacks = {}) {
+        this.#container = container;
+        this.#callbacks = callbacks;
+        this.#container.className = 'tabs notebook-tabs';
+        this.#boundHideContextMenu = () => this.#hideContextMenu();
+        this.#installStripDnDHandlers();
+        this.#dragReorder = new DragReorder({
+            container: this.#container,
+            itemSelector: '.tab',
+            keyAttr: 'path',
+            axis: 'x',
+            draggableGuard: (e) => {
+                if (e.target.closest('.twm-tab-close')) return false;
+                const title = e.target.closest('.tab')?.querySelector('.twm-tab-title');
+                return title?.getAttribute('contenteditable') !== 'true';
+            },
+            onDragStart: (e, key) => {
+                // Carry the cross-pane MIME so other panes accept this tab.
+                try { e.dataTransfer.setData(TAB_MIME, key); } catch (_) {}
+            },
+            onReorder: (order) => this.#callbacks.onReorder?.(order),
+        });
+        this.#render();
+    }
+
+    /**
+     * Sync tabs from ProjectModel state.
+     * @param {Array<{ filePath: string, fileType: string, isDirty: boolean }>} tabs
+     * @param {string|null} activeFilePath
+     */
+    update(tabs, activeFilePath) {
+        this.#tabs = tabs;
+        this.#activeTab = activeFilePath;
+        this.#render();
+    }
+
+    markDirty(filePath, isDirty) {
+        const tab = this.#tabs.find(t => t.filePath === filePath);
+        if (tab) {
+            tab.isDirty = isDirty;
+            this.#render();
+        }
+    }
+
+    dispose() {
+        this.#hideContextMenu();
+        this.#removeStripDnDHandlers();
+        this.#dragReorder?.destroy();
+        this.#dragReorder = null;
+        this.#container = null;
+    }
+
+    // Material symbol per file kind, merged over the generic set. The map used to
+    // hardcode EcoAgent's kinds — `scenario`, `dashboard`, `model` — so a generic
+    // tab bar knew one application's file taxonomy. Pass `fileTypeIcons` to add
+    // your own.
+    static #FILE_TYPE_ICONS = {
+        module:    'extension',
+        test:      'fact_check',
+        diff:      'difference',
+        unknown:   'description',
+    };
+
+    static #EXTRA_ICONS = {};
+
+    /**
+     * Add your application's file kinds to the tab-bar icon map.
+     *
+     * The map used to hardcode `scenario: 'science'`, `dashboard: 'dashboard'` and
+     * `model: 'schema'` — EcoAgent's file taxonomy, baked into a generic tab bar.
+     *
+     * @param {Object.<string, string>} icons fileType -> material symbol name
+     */
+    static setFileTypeIcons(icons = {}) {
+        NotebookTabBar.#EXTRA_ICONS = { ...icons };
+    }
+
+    static #iconFor(fileType) {
+        return NotebookTabBar.#EXTRA_ICONS[fileType]
+            ?? NotebookTabBar.#FILE_TYPE_ICONS[fileType]
+            ?? NotebookTabBar.#FILE_TYPE_ICONS.unknown;
+    }
+
+    // ═════════════════════════════════════════════════════════════════════════
+    //  Rendering
+    // ═════════════════════════════════════════════════════════════════════════
+
+    #render() {
+        if (!this.#container) return;
+
+        this.#container.innerHTML = '';
+
+        for (const tab of this.#tabs) {
+            const isActive = tab.filePath === this.#activeTab;
+            const rawPath = tab.filePath.replace(/^(diff|builtin):\/\//, '');
+            const label = tab.label
+                ?? (tab.fileType === 'diff'
+                    ? `↔ ${rawPath.split('/').pop()}`
+                    : rawPath.split('/').pop().replace(/\.[^.]+$/, ''));
+            const icon = NotebookTabBar.#iconFor(tab.fileType);
+
+            const tabEl = document.createElement('div');
+            tabEl.className = `tab${isActive ? ' active' : ''}${tab.isPreview ? ' tab--preview' : ''}`;
+            tabEl.dataset.path = tab.filePath;
+            tabEl.title = tab.filePath;
+
+            tabEl.innerHTML = `
+                <span class="material-symbols-outlined tab-icon">${icon}</span>
+                <span class="twm-tab-title">${this.#escHtml(label)}</span>
+                ${tab.isDirty ? '<span class="tab-dirty">\u25cf</span>' : ''}
+                ${tab.readonly ? '' : '<button class="twm-tab-close" title="Close tab" aria-label="Close tab">\u00d7</button>'}
+            `;
+
+            // Click → activate
+            tabEl.addEventListener('click', (e) => {
+                if (e.target.closest('.twm-tab-close')) return;
+                if (tabEl.querySelector('.twm-tab-title')?.getAttribute('contenteditable') === 'true') return;
+                this.#callbacks.onActivate?.(tab.filePath);
+            });
+
+            // Close button
+            tabEl.querySelector('.twm-tab-close')?.addEventListener('click', (e) => {
+                e.stopPropagation();
+                this.#callbacks.onClose?.(tab.filePath);
+            });
+
+            // Double-click → inline rename
+            tabEl.addEventListener('dblclick', (e) => {
+                if (e.target.closest('.twm-tab-close')) return;
+                this.#beginInlineRename(tab.filePath);
+            });
+
+            // F2 → inline rename
+            tabEl.addEventListener('keydown', (e) => {
+                if (e.key === 'F2') {
+                    e.preventDefault();
+                    this.#beginInlineRename(tab.filePath);
+                }
+            });
+
+            // Context menu
+            tabEl.addEventListener('contextmenu', (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                this.#showContextMenu(e.clientX, e.clientY, tab.filePath);
+            });
+
+            this.#container.appendChild(tabEl);
+        }
+        // Make the freshly-rendered tabs draggable-to-reorder.
+        this.#dragReorder?.attach();
+    }
+
+    // ═════════════════════════════════════════════════════════════════════════
+    //  Drag and drop reordering (same-pane + cross-pane)
+    // ═════════════════════════════════════════════════════════════════════════
+
+    #installStripDnDHandlers() {
+        if (!this.#container) return;
+        this.#container.addEventListener('dragover', this.#onStripDragOver);
+        this.#container.addEventListener('drop', this.#onStripDrop);
+        this.#container.addEventListener('dragleave', this.#onStripDragLeave);
+    }
+
+    #removeStripDnDHandlers() {
+        if (!this.#container) return;
+        this.#container.removeEventListener('dragover', this.#onStripDragOver);
+        this.#container.removeEventListener('drop', this.#onStripDrop);
+        this.#container.removeEventListener('dragleave', this.#onStripDragLeave);
+    }
+
+    /** Check whether a drag event carries a cross-pane tab (not from this bar). */
+    #isExternalTabDrag(e) {
+        if (this.#dragReorder?.isActive()) return false; // same-pane drag is active
+        try { return e.dataTransfer.types.includes(TAB_MIME); } catch { return false; }
+    }
+
+    // Same-pane reorder is handled by the shared DragReorder module (set
+    // up in mount()). These container handlers cover ONLY cross-pane tab
+    // drops — gated on `#isExternalTabDrag`, which defers while our own
+    // reorder drag is active.
+
+    #onStripDragOver = (e) => {
+        if (this.#isExternalTabDrag(e)) {
+            e.preventDefault();
+            try { e.dataTransfer.dropEffect = 'move'; } catch (_) {}
+            this.#container.classList.add('notebook-tabs--drop-target');
+        }
+    };
+
+    #onStripDrop = (e) => {
+        if (this.#isExternalTabDrag(e)) {
+            e.preventDefault();
+            this.#container.classList.remove('notebook-tabs--drop-target');
+            const filePath = e.dataTransfer.getData(TAB_MIME) || e.dataTransfer.getData('text/plain');
+            if (filePath) {
+                this.#callbacks.onDropFromOtherPane?.(filePath);
+            }
+        }
+    };
+
+    #onStripDragLeave = (e) => {
+        if (!this.#container.contains(e.relatedTarget)) {
+            this.#container.classList.remove('notebook-tabs--drop-target');
+        }
+    };
+
+    // ═════════════════════════════════════════════════════════════════════════
+    //  Context menu
+    // ═════════════════════════════════════════════════════════════════════════
+
+    #showContextMenu(x, y, filePath) {
+        this.#hideContextMenu();
+
+        const idx = this.#tabs.findIndex(t => t.filePath === filePath);
+        const total = this.#tabs.length;
+
+        const allItems = [
+            { label: 'Rename',            icon: 'edit',              action: 'rename',        shortcut: 'F2' },
+            { label: 'Duplicate',         icon: 'content_copy',     action: 'duplicate' },
+            { separator: true },
+            { label: 'Split Right',       icon: 'vertical_split',   action: 'split-right',   shortcut: 'Ctrl+\\' },
+            { label: 'Move to Other Pane',icon: 'swap_horiz',       action: 'move-to-other' },
+            { separator: true },
+            { label: 'Close',             icon: 'close',            action: 'close',         danger: true },
+            { label: 'Close Others',      icon: 'close_fullscreen', action: 'close-others',  danger: true, disabled: total <= 1 },
+            { label: 'Close to the Right',icon: 'tab_close',        action: 'close-right',   danger: true, disabled: idx === -1 || idx >= total - 1 },
+            { label: 'Close All',         icon: 'tab_close_inactive', action: 'close-all',   danger: true },
+            { label: 'Close Saved',       icon: 'check_circle',     action: 'close-saved',   danger: true },
+            { separator: true },
+            { label: 'Reveal in Explorer', icon: 'folder_open',     action: 'reveal' },
+        ];
+
+        const menuFilter = this.#callbacks.menuFilter;
+        const items = menuFilter
+            ? allItems.filter(item => item.separator || menuFilter(item.action, filePath) !== false)
+            : allItems;
+
+        // Collapse consecutive / leading / trailing separators
+        const cleaned = [];
+        for (const item of items) {
+            if (item.separator) {
+                if (cleaned.length > 0 && !cleaned[cleaned.length - 1].separator) cleaned.push(item);
+            } else {
+                cleaned.push(item);
+            }
+        }
+        while (cleaned.length > 0 && cleaned[cleaned.length - 1].separator) cleaned.pop();
+
+        const menu = document.createElement('div');
+        menu.className = 'nb-context-menu';
+
+        for (const item of cleaned) {
+            if (item.separator) {
+                const sep = document.createElement('div');
+                sep.className = 'nb-context-menu__separator';
+                menu.appendChild(sep);
+                continue;
+            }
+
+            const btn = document.createElement('button');
+            btn.className = 'nb-context-menu__item';
+            if (item.danger) btn.classList.add('nb-context-menu__item--danger');
+            if (item.disabled) btn.classList.add('nb-context-menu__item--disabled');
+
+            btn.innerHTML = `<span class="material-symbols-outlined">${item.icon}</span><span>${this.#escHtml(item.label)}</span>${
+                item.shortcut ? `<span class="nb-context-menu__shortcut">${item.shortcut}</span>` : ''
+            }`;
+
+            if (!item.disabled) {
+                btn.addEventListener('click', (e) => {
+                    e.stopPropagation();
+                    this.#hideContextMenu();
+                    this.#handleContextMenuAction(item.action, filePath);
+                });
+            }
+            menu.appendChild(btn);
+        }
+
+        document.body.appendChild(menu);
+        this.#contextMenuEl = menu;
+
+        // Position with viewport clamping
+        const rect = menu.getBoundingClientRect();
+        const left = Math.min(x, window.innerWidth - rect.width - 8);
+        const top = Math.min(y, window.innerHeight - rect.height - 8);
+        menu.style.left = `${Math.max(0, left)}px`;
+        menu.style.top = `${Math.max(0, top)}px`;
+
+        // Animate in
+        requestAnimationFrame(() => menu.classList.add('visible'));
+
+        // Dismiss on outside click or Escape
+        setTimeout(() => {
+            document.addEventListener('click', this.#boundHideContextMenu, true);
+            document.addEventListener('contextmenu', this.#boundHideContextMenu, true);
+        }, 0);
+        document.addEventListener('keydown', this.#onKeyDown);
+    }
+
+    #hideContextMenu() {
+        if (!this.#contextMenuEl) return;
+        this.#contextMenuEl.remove();
+        this.#contextMenuEl = null;
+        document.removeEventListener('click', this.#boundHideContextMenu, true);
+        document.removeEventListener('contextmenu', this.#boundHideContextMenu, true);
+        document.removeEventListener('keydown', this.#onKeyDown);
+    }
+
+    #onKeyDown = (e) => {
+        if (e.key === 'Escape') this.#hideContextMenu();
+    };
+
+    #handleContextMenuAction(action, filePath) {
+        switch (action) {
+            case 'rename':       this.#beginInlineRename(filePath); break;
+            case 'duplicate':    this.#callbacks.onDuplicate?.(filePath); break;
+            case 'close':        this.#callbacks.onClose?.(filePath); break;
+            case 'close-others': this.#callbacks.onCloseOthers?.(filePath); break;
+            case 'close-right':  this.#callbacks.onCloseToRight?.(filePath); break;
+            case 'close-all':    this.#callbacks.onCloseAll?.(); break;
+            case 'close-saved':  this.#callbacks.onCloseSaved?.(); break;
+            case 'split-right':  this.#callbacks.onSplitRight?.(filePath); break;
+            case 'move-to-other':this.#callbacks.onMoveToOtherPane?.(filePath); break;
+            case 'reveal':       this.#callbacks.onRevealInExplorer?.(filePath); break;
+        }
+    }
+
+    // ═════════════════════════════════════════════════════════════════════════
+    //  Inline rename (contenteditable on tab title)
+    // ═════════════════════════════════════════════════════════════════════════
+
+    #beginInlineRename(filePath) {
+        const tabEl = this.#container?.querySelector(`.tab[data-path="${CSS.escape(filePath)}"]`);
+        if (!tabEl) return;
+
+        const title = tabEl.querySelector('.twm-tab-title');
+        if (!title || title.getAttribute('contenteditable') === 'true') return;
+
+        const tab = this.#tabs.find(t => t.filePath === filePath);
+        if (!tab) return;
+
+        // model.notebook, builtin, and readonly files cannot be renamed
+        if (tab.fileType === 'model') return;
+        if (filePath.startsWith('builtin://')) return;
+        if (tab.readonly) return;
+
+        const original = title.textContent || '';
+        title.setAttribute('contenteditable', 'true');
+        title.focus();
+
+        try {
+            const range = document.createRange();
+            range.selectNodeContents(title);
+            const sel = window.getSelection();
+            sel.removeAllRanges();
+            sel.addRange(range);
+        } catch (_) { /* ignore */ }
+
+        let committed = false;
+
+        const finish = (commit) => {
+            if (committed) return;
+            committed = true;
+
+            const newName = (title.textContent || '').trim();
+            title.removeAttribute('contenteditable');
+            title.removeEventListener('keydown', onKeyDown);
+            title.removeEventListener('blur', onBlur, true);
+
+            try { window.getSelection()?.removeAllRanges?.(); } catch (_) { /* ignore */ }
+
+            if (commit && newName && newName !== original && /^[\w][\w.-]*$/.test(newName)) {
+                title.textContent = newName;
+                const dir = filePath.split('/').slice(0, -1).join('/');
+                const ext = filePath.split('.').pop();
+                const newPath = `${dir}/${newName}.${ext}`;
+                this.#callbacks.onRename?.(filePath, newPath);
+            } else {
+                title.textContent = original;
+            }
+        };
+
+        const onKeyDown = (e) => {
+            if (e.key === 'Enter') { e.preventDefault(); finish(true); }
+            else if (e.key === 'Escape') { e.preventDefault(); finish(false); }
+            e.stopPropagation();
+        };
+
+        const onBlur = () => finish(true);
+
+        title.addEventListener('keydown', onKeyDown);
+        title.addEventListener('blur', onBlur, true);
+    }
+
+    #escHtml(s) {
+        return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+    }
+}

package/src/editor/notebook_undo_manager.js

@@ -0,0 +1,108 @@
+/**
+ * NotebookUndoManager
+ *
+ * Command-pattern undo/redo for notebook cell operations.
+ *
+ * Each command: { description: string, undo: () => (void | Promise), redo: () => (void | Promise) }
+ *
+ * Operations tracked by NotebookEditor:
+ *   - Cell add
+ *   - Cell delete
+ *   - Cell move (up/down, drag-reorder)
+ *   - Cell config change (debounced per-cell snapshot)
+ */
+export class NotebookUndoManager {
+
+    /** @type {Array<{ description: string, undo: Function, redo: Function }>} */
+    #undoStack = [];
+
+    /** @type {Array<{ description: string, undo: Function, redo: Function }>} */
+    #redoStack = [];
+
+    /** @type {number} */
+    #maxSize;
+
+    /** @type {Function|null} Called with (canUndo: boolean, canRedo: boolean) after each change */
+    #onStateChange;
+
+    /** @type {boolean} Prevents re-entrant undo/redo */
+    #applying = false;
+
+    /**
+     * @param {{ maxSize?: number, onStateChange?: Function }} opts
+     */
+    constructor({ maxSize = 100, onStateChange = null } = {}) {
+        this.#maxSize = maxSize;
+        this.#onStateChange = onStateChange;
+    }
+
+    // ─── Public API ───────────────────────────────────────────────────────────
+
+    get canUndo() { return this.#undoStack.length > 0; }
+    get canRedo() { return this.#redoStack.length > 0; }
+
+    /**
+     * Record a new command.  Clears the redo stack.
+     * Should NOT be called from inside undo/redo callbacks.
+     *
+     * @param {{ description: string, undo: Function, redo: Function }} command
+     */
+    push(command) {
+        if (this.#applying) return; // ignore changes triggered by undo/redo
+        this.#undoStack.push(command);
+        if (this.#undoStack.length > this.#maxSize) {
+            this.#undoStack.shift();
+        }
+        this.#redoStack = [];
+        this.#notify();
+    }
+
+    /**
+     * Undo the last command.
+     * @returns {Promise<boolean>} true if something was undone
+     */
+    async undo() {
+        const cmd = this.#undoStack.pop();
+        if (!cmd) return false;
+        this.#applying = true;
+        try {
+            await cmd.undo();
+        } finally {
+            this.#applying = false;
+        }
+        this.#redoStack.push(cmd);
+        this.#notify();
+        return true;
+    }
+
+    /**
+     * Redo the last undone command.
+     * @returns {Promise<boolean>} true if something was redone
+     */
+    async redo() {
+        const cmd = this.#redoStack.pop();
+        if (!cmd) return false;
+        this.#applying = true;
+        try {
+            await cmd.redo();
+        } finally {
+            this.#applying = false;
+        }
+        this.#undoStack.push(cmd);
+        this.#notify();
+        return true;
+    }
+
+    /** Reset both stacks (e.g., after file load). */
+    clear() {
+        this.#undoStack = [];
+        this.#redoStack = [];
+        this.#notify();
+    }
+
+    // ─── Private ──────────────────────────────────────────────────────────────
+
+    #notify() {
+        this.#onStateChange?.(this.canUndo, this.canRedo);
+    }
+}