flexdesk 0.1.0

package/src/ui/components/sortable_list.js

@@ -0,0 +1,309 @@
+/**
+ * Sortable List Component
+ * Location: ui/components/sortable_list.js
+ *
+ * Purpose: Provide a reusable list component with add, remove, reorder, and rename
+ * capabilities. Used for named inputs in function nodes, rules in switch nodes, etc.
+ *
+ * Features:
+ * - Add/remove items
+ * - Drag-and-drop reordering
+ * - Inline rename
+ * - Custom item renderer
+ * - Persistence via onChange callback
+ *
+ * Reordering is delegated to the shared DragReorder module (the same
+ * ghost + drop-placeholder technique used by the tab bars and the schema
+ * editor) so the reorder behaviour is implemented once.
+ */
+
+import { DragReorder } from './drag_reorder.js';
+
+export class SortableList {
+    /**
+     * Create a sortable list.
+     * @param {Object} options - Configuration options
+     * @param {string} options.containerId - Unique ID for the container
+     * @param {Array} options.items - Initial items array
+     * @param {Function} options.onChange - Called with updated items array when list changes
+     * @param {Function} options.renderItem - Custom renderer for item content (receives item, index, callbacks)
+     * @param {Function} options.createItem - Factory function to create new items
+     * @param {string} options.emptyMessage - Message to show when list is empty
+     * @param {string} options.addButtonText - Text for add button
+     * @param {boolean} options.allowReorder - Whether to allow drag-and-drop reordering
+     * @param {boolean} options.allowRemove - Whether to allow removing items
+     * @param {number} options.minItems - Minimum number of items (blocks removal if at min)
+     */
+    constructor({
+        containerId,
+        items = [],
+        onChange = null,
+        renderItem = null,
+        createItem = null,
+        emptyMessage = 'No items',
+        addButtonText = 'Add Item',
+        allowReorder = true,
+        allowRemove = true,
+        minItems = 0,
+    } = {}) {
+        this.containerId = containerId || `sortable-list-${Date.now()}`;
+        this.items = Array.isArray(items) ? [...items] : [];
+        this.onChange = typeof onChange === 'function' ? onChange : null;
+        this.renderItem = typeof renderItem === 'function' ? renderItem : this.#defaultRenderItem.bind(this);
+        this.createItem = typeof createItem === 'function' ? createItem : this.#defaultCreateItem.bind(this);
+        this.emptyMessage = emptyMessage;
+        this.addButtonText = addButtonText;
+        this.allowReorder = allowReorder;
+        this.allowRemove = allowRemove;
+        this.minItems = minItems;
+
+        this.root = null;
+        this.listEl = null;
+        this._dragReorder = null;
+    }
+
+    /**
+     * Render the sortable list.
+     * @returns {HTMLElement} The root container element
+     */
+    render() {
+        if (this.root) {
+            this.#refresh();
+            return this.root;
+        }
+
+        this.root = document.createElement('div');
+        this.root.className = 'twm-sortable-list';
+        this.root.id = this.containerId;
+
+        this.listEl = document.createElement('div');
+        this.listEl.className = 'twm-sortable-list__items';
+
+        this.root.appendChild(this.listEl);
+
+        // Only show add button if addButtonText is provided
+        if (this.addButtonText) {
+            const addBtn = document.createElement('button');
+            addBtn.type = 'button';
+            addBtn.className = 'twm-sortable-list__add';
+            addBtn.innerHTML = `<span class="material-symbols-outlined">add</span> ${this.#escapeHtml(this.addButtonText)}`;
+            addBtn.addEventListener('click', () => this.addItem());
+            this.root.appendChild(addBtn);
+        }
+
+        this.#refresh();
+        return this.root;
+    }
+
+    /**
+     * Get current items.
+     * @returns {Array} Copy of items array
+     */
+    getItems() {
+        return [...this.items];
+    }
+
+    /**
+     * Set items and re-render.
+     * @param {Array} items - New items array
+     */
+    setItems(items) {
+        this.items = Array.isArray(items) ? [...items] : [];
+        this.#refresh();
+    }
+
+    /**
+     * Add a new item.
+     */
+    addItem() {
+        const newItem = this.createItem(this.items.length);
+        this.items.push(newItem);
+        this.#notifyChange();
+        this.#refresh();
+    }
+
+    /**
+     * Remove an item by index.
+     * @param {number} index - Index of item to remove
+     */
+    removeItem(index) {
+        if (index < 0 || index >= this.items.length) return;
+        if (this.items.length <= this.minItems) return;
+        
+        this.items.splice(index, 1);
+        this.#notifyChange();
+        this.#refresh();
+    }
+
+    /**
+     * Update an item at index.
+     * @param {number} index - Index of item to update
+     * @param {Object} updates - Properties to merge into item
+     */
+    updateItem(index, updates) {
+        if (index < 0 || index >= this.items.length) return;
+        
+        this.items[index] = { ...this.items[index], ...updates };
+        this.#notifyChange();
+    }
+
+    /**
+     * Move an item from one index to another.
+     * @param {number} fromIndex - Source index
+     * @param {number} toIndex - Destination index
+     */
+    moveItem(fromIndex, toIndex) {
+        if (fromIndex < 0 || fromIndex >= this.items.length) return;
+        if (toIndex < 0 || toIndex >= this.items.length) return;
+        if (fromIndex === toIndex) return;
+
+        const [item] = this.items.splice(fromIndex, 1);
+        this.items.splice(toIndex, 0, item);
+        this.#notifyChange();
+        this.#refresh();
+    }
+
+    /**
+     * Dispose the component.
+     */
+    dispose() {
+        this._dragReorder?.destroy();
+        this._dragReorder = null;
+        this.root = null;
+        this.listEl = null;
+        this.items = [];
+    }
+
+    // ─── Private Methods ───────────────────────────────────────────────────
+
+    #refresh() {
+        if (!this.listEl) return;
+
+        this.listEl.innerHTML = '';
+
+        if (this.items.length === 0) {
+            const empty = document.createElement('div');
+            empty.className = 'twm-sortable-list__empty';
+            empty.textContent = this.emptyMessage;
+            this.listEl.appendChild(empty);
+            return;
+        }
+
+        this.items.forEach((item, index) => {
+            const row = this.#createRow(item, index);
+            this.listEl.appendChild(row);
+        });
+
+        // Drag-to-reorder via the shared DragReorder module (ghost +
+        // placeholder). Created once, bound to the persistent list
+        // element; re-attached after each refresh to wire the rebuilt
+        // rows. Drag is restricted to the grip handle.
+        if (this.allowReorder) {
+            if (!this._dragReorder) {
+                this._dragReorder = new DragReorder({
+                    container: this.listEl,
+                    itemSelector: '.sortable-list__row',
+                    keyAttr: 'index',
+                    axis: 'y',
+                    indicatorClass: 'twm-sortable-list__drop',
+                    draggableGuard: (e) => !!e.target.closest('.twm-sortable-list__handle'),
+                    onReorder: (order) => this.#applyReorder(order),
+                });
+            }
+            this._dragReorder.attach();
+        }
+    }
+
+    /** Reorder `items` to match the new DOM order produced by a drag,
+     *  then notify + re-render. `order` holds the rows' pre-drag
+     *  `data-index` values in their new arrangement. */
+    #applyReorder(order) {
+        const next = order
+            .map((i) => this.items[Number(i)])
+            .filter((it) => it !== undefined);
+        if (next.length !== this.items.length) return;   // guard against drift
+        this.items = next;
+        this.#notifyChange();
+        this.#refresh();
+    }
+
+    #createRow(item, index) {
+        const row = document.createElement('div');
+        row.className = 'twm-sortable-list__row';
+        row.dataset.index = index;
+
+        // Drag handle (if reordering enabled). The drag mechanics are
+        // owned by the shared DragReorder instance (see #refresh); the
+        // handle is just the grab affordance the drag is restricted to.
+        if (this.allowReorder) {
+            const handle = document.createElement('div');
+            handle.className = 'twm-sortable-list__handle';
+            handle.innerHTML = '<span class="material-symbols-outlined">drag_indicator</span>';
+            row.appendChild(handle);
+        }
+
+        // Item content (custom renderer)
+        const content = document.createElement('div');
+        content.className = 'twm-sortable-list__content';
+        
+        const callbacks = {
+            update: (updates) => this.updateItem(index, updates),
+            remove: () => this.removeItem(index),
+            moveUp: () => this.moveItem(index, index - 1),
+            moveDown: () => this.moveItem(index, index + 1),
+        };
+        
+        this.renderItem(content, item, index, callbacks);
+        row.appendChild(content);
+
+        // Remove button (if removal enabled)
+        if (this.allowRemove) {
+            const canRemove = this.items.length > this.minItems;
+            const removeBtn = document.createElement('button');
+            removeBtn.type = 'button';
+            removeBtn.className = 'twm-sortable-list__remove';
+            removeBtn.disabled = !canRemove;
+            removeBtn.title = canRemove ? 'Remove' : `Minimum ${this.minItems} items required`;
+            removeBtn.innerHTML = '<span class="material-symbols-outlined">close</span>';
+            removeBtn.addEventListener('click', () => {
+                if (canRemove) this.removeItem(index);
+            });
+            row.appendChild(removeBtn);
+        }
+
+        return row;
+    }
+
+    #defaultRenderItem(container, item, index, callbacks) {
+        const input = document.createElement('input');
+        input.type = 'text';
+        input.className = 'twm-sortable-list__input';
+        input.value = item.name ?? item.label ?? '';
+        input.placeholder = `Item ${index + 1}`;
+        input.addEventListener('change', () => {
+            callbacks.update({ name: input.value });
+        });
+        container.appendChild(input);
+    }
+
+    #defaultCreateItem(index) {
+        return {
+            id: `item_${Date.now()}_${Math.random().toString(36).substr(2, 6)}`,
+            name: `item${index + 1}`,
+        };
+    }
+
+    #notifyChange() {
+        if (this.onChange) {
+            this.onChange([...this.items]);
+        }
+    }
+
+
+    #escapeHtml(str) {
+        return String(str ?? '')
+            .replace(/&/g, '&amp;')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;');
+    }
+}

package/src/ui/components/table_state_store.js

@@ -0,0 +1,81 @@
+/**
+ * table_state_store.js — persist DataTable view-state (sort, filters,
+ * column widths), keyed by a caller-supplied `persistKey`.
+ *
+ * A FACTORY, not a singleton: the store reads and writes through a Host's
+ * `state` capability (see ui/js/host/host.js) under one logical state key.
+ * One blob holds a map of `{ [persistKey]: state }` for every persisted table.
+ * Where that key lands on disk is the embedder's business, not ours — it is
+ * decided by the host's `resolvePath`.
+ *
+ * A host without a `state` capability is legal: tables simply stay ephemeral.
+ *
+ * The in-memory cache must be dropped when the project changes (the app swaps
+ * projects in-place without a page reload) — `reset()` is wired to the
+ * `project:opened` event in app_bootstrap.
+ */
+
+/**
+ * @param {object}  opts
+ * @param {object}  opts.host        a Host. May lack `state` -> tables become ephemeral.
+ * @param {string}  opts.key         logical state key, e.g. 'datatable_state'
+ * @param {object}  [opts.logger]
+ * @param {number}  [opts.debounceMs=500]
+ */
+export function createTableStateStore({ host, key, logger = console, debounceMs = 500 }) {
+    if (!key) throw new Error('createTableStateStore requires { key }');
+    const state = host?.state || null;
+
+    let cache = null;        // { [persistKey]: state } — null until first load
+    let loadPromise = null;
+    let saveTimer = null;
+
+    const scheduleSave = () => {
+        if (saveTimer) clearTimeout(saveTimer);
+        saveTimer = setTimeout(async () => {
+            saveTimer = null;
+            if (!state || !cache) return;
+            try { await state.write(key, cache); }
+            catch (err) { logger.warn?.('[table-state] save failed', err); }
+        }, debounceMs);
+    };
+
+    return {
+        /** Resolve once the persisted blob has been read into the cache. Safe
+         *  to call repeatedly — the read happens at most once per project. */
+        ready() {
+            if (loadPromise) return loadPromise;
+            loadPromise = (async () => {
+                if (!state) { cache = {}; return cache; }
+                try { cache = (await state.read(key)) || {}; }
+                catch (err) { logger.warn?.('[table-state] load failed', err); cache = {}; }
+                return cache;
+            })();
+            return loadPromise;
+        },
+
+        /** Synchronous read of a table's persisted state. Returns null until
+         *  the cache is loaded (await `ready()` first to be sure). */
+        get(k) {
+            if (!k || !cache) return null;
+            return cache[k] || null;
+        },
+
+        /** Merge-and-persist a table's state (debounced). Pass null to forget
+         *  a key. Writes the whole map back atomically through the host. */
+        set(k, s) {
+            if (!k) return;
+            if (!cache) cache = {};
+            if (s == null) delete cache[k]; else cache[k] = s;
+            scheduleSave();
+        },
+
+        /** Drop the cache + pending read so the next access reloads from the
+         *  newly-opened project. Cancels any in-flight save for the old one. */
+        reset() {
+            cache = null;
+            loadPromise = null;
+            if (saveTimer) { clearTimeout(saveTimer); saveTimer = null; }
+        },
+    };
+}

package/src/ui/components/toast.js

@@ -0,0 +1,59 @@
+/**
+ * toast.js — thin wrapper around the global NotificationCenter for
+ * callers that don't already hold an eventBus reference.
+ *
+ * The NotificationCenter (../notification_center.js) subscribes to
+ * `toast:show` on the global event bus; we re-export tiny helpers
+ * that emit the same payload shape.
+ *
+ * Usage:
+ *   import { toastError, toastSuccess, toastWarn, toastInfo } from './toast.js';
+ *   toastError('Save failed', 'sector_update refused: …');
+ *
+ * The 1-arg form treats the string as the message (no title); the
+ * 2-arg form is title + message.
+ */
+
+function _bus() {
+    return window.__ecoagent?.eventBus ?? null;
+}
+
+function _emit(severity, persistent, titleOrMsg, msg) {
+    const bus = _bus();
+    const title = (msg !== undefined) ? titleOrMsg : null;
+    const message = (msg !== undefined) ? msg : titleOrMsg;
+    if (!bus) {
+        // Fall back to console so the message isn't lost if the bus is
+        // unavailable (early bootstrap, isolated test pages).
+        // eslint-disable-next-line no-console
+        (severity === 'error' || severity === 'warn' ? console.warn : console.info)(
+            `[toast/${severity}]`, title ? `${title}:` : '', message);
+        return;
+    }
+    bus.emit('toast:show', {
+        title, message, severity,
+        persistent,
+        durationMs: persistent ? 0 : 5000,
+    });
+}
+
+export function toastError(titleOrMsg, msg)    { _emit('error',   true,  titleOrMsg, msg); }
+export function toastWarn(titleOrMsg, msg)     { _emit('warn',    false, titleOrMsg, msg); }
+export function toastInfo(titleOrMsg, msg)     { _emit('info',    false, titleOrMsg, msg); }
+export function toastSuccess(titleOrMsg, msg)  { _emit('success', false, titleOrMsg, msg); }
+
+/** Coerce a bridge-call result/exception into a user-facing error toast.
+ *  Drops the toast only if `res?.ok === false` *or* an exception was caught.
+ *  Returns true if the call succeeded (caller can continue), false otherwise. */
+export function reportBridgeError(opName, resOrErr) {
+    if (!resOrErr) return true;
+    if (resOrErr instanceof Error) {
+        toastError(opName, resOrErr.message || String(resOrErr));
+        return false;
+    }
+    if (resOrErr && resOrErr.ok === false) {
+        toastError(opName, resOrErr.error || 'operation refused');
+        return false;
+    }
+    return true;
+}