flexdesk 0.1.0

package/src/ui/components/detail_header.js

@@ -0,0 +1,177 @@
+/**
+ * DetailHeader — shared header bar for detail views.
+ *
+ * Usage:
+ *   import { createDetailHeader, updateDetailHeader } from '../ui/components/detail_header.js';
+ *
+ *   const header = createDetailHeader({
+ *       title: 'My Scenario',
+ *       badges: [{ text: 'Static' }],
+ *       renameable: true,
+ *       onRename: async (name) => ({ success: true }),
+ *       actions: [
+ *           { key: 'run', label: 'Run', icon: 'play_arrow', variant: 'primary', handler: () => {} },
+ *           { key: 'delete', label: 'Delete', icon: 'delete', variant: 'danger', handler: () => {} },
+ *       ],
+ *   });
+ *   container.appendChild(header);
+ *
+ * To update in place (e.g., running state changed):
+ *   updateDetailHeader(header, { ...newConfig });
+ */
+
+import { attachInlineRenamer } from './inline_renamer.js';
+
+const ESC = (s) => String(s ?? '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+
+/**
+ * @typedef {Object} DetailHeaderBadge
+ * @property {string} text
+ * @property {string} [className]  - Extra CSS modifier (e.g., 'detail-header__badge--mc')
+ * @property {string} [icon]       - Material Symbols icon name
+ */
+
+/**
+ * @typedef {Object} DetailHeaderAction
+ * @property {string} key           - data-action value
+ * @property {string} label         - Button text
+ * @property {string} icon          - Material Symbols icon name
+ * @property {'primary'|'secondary'|'danger'} [variant='secondary']
+ * @property {boolean} [disabled=false]
+ * @property {string} [title]       - Tooltip
+ * @property {Function} handler     - Click callback
+ */
+
+/**
+ * @typedef {Object} DetailHeaderConfig
+ * @property {string} title
+ * @property {string} [subtitle]
+ * @property {string} [icon]              - Material icon before title
+ * @property {DetailHeaderBadge[]} [badges]
+ * @property {DetailHeaderAction[]} [actions]
+ * @property {HTMLElement[]} [extraElements]  - Custom elements appended to actions area
+ * @property {boolean} [renameable=false]
+ * @property {Function} [onRename]         - (newName) => Promise<{success, newValue?}>
+ */
+
+/**
+ * Create a detail header element.
+ * @param {DetailHeaderConfig} config
+ * @returns {HTMLElement}
+ */
+export function createDetailHeader(config) {
+    const header = document.createElement('header');
+    header.className = 'twm-detail-header';
+    _populate(header, config);
+    return header;
+}
+
+/**
+ * Update an existing detail header in place.
+ * Destroys previous inline renamer and rebuilds inner DOM.
+ * @param {HTMLElement} headerEl
+ * @param {DetailHeaderConfig} config
+ */
+export function updateDetailHeader(headerEl, config) {
+    // Destroy previous renamer if any
+    headerEl._renamer?.destroy();
+    headerEl._renamer = null;
+    headerEl.innerHTML = '';
+    _populate(headerEl, config);
+}
+
+// ─── Internal ────────────────────────────────────────────────────────────────
+
+function _populate(header, config) {
+    const { title, subtitle, icon, badges = [], actions = [], extraElements = [], renameable = false, onRename } = config;
+
+    // Title row
+    const titleRow = document.createElement('div');
+    titleRow.className = 'twm-detail-header__title-row';
+
+    if (icon) {
+        const iconEl = document.createElement('span');
+        iconEl.className = 'twm-detail-header__icon material-symbols-outlined';
+        iconEl.textContent = icon;
+        titleRow.appendChild(iconEl);
+    }
+
+    const nameEl = document.createElement('h2');
+    nameEl.className = 'twm-detail-header__name';
+    nameEl.textContent = title || '';
+    if (renameable) {
+        nameEl.dataset.renameable = '';
+        nameEl.title = 'Double-click to rename';
+    }
+    titleRow.appendChild(nameEl);
+
+    for (const badge of badges) {
+        const badgeEl = document.createElement('span');
+        badgeEl.className = `detail-header__badge${badge.className ? ` ${badge.className}` : ''}`;
+        if (badge.icon) {
+            const bi = document.createElement('span');
+            bi.className = 'material-symbols-outlined';
+            bi.textContent = badge.icon;
+            badgeEl.appendChild(bi);
+        }
+        badgeEl.appendChild(document.createTextNode(badge.text));
+        titleRow.appendChild(badgeEl);
+    }
+
+    header.appendChild(titleRow);
+
+    // Subtitle
+    if (subtitle) {
+        const sub = document.createElement('div');
+        sub.className = 'twm-detail-header__subtitle';
+        sub.innerHTML = subtitle; // may contain <strong> etc.
+        header.appendChild(sub);
+    }
+
+    // Actions
+    if (actions.length > 0 || extraElements.length > 0) {
+        const actionsEl = document.createElement('div');
+        actionsEl.className = 'twm-detail-header__actions';
+
+        for (const extra of extraElements) {
+            actionsEl.appendChild(extra);
+        }
+
+        for (const action of actions) {
+            const btn = document.createElement('button');
+            btn.type = 'button';
+            const variant = action.variant || 'secondary';
+            btn.className = `twm-detail-header__btn detail-header__btn--${variant}`;
+            btn.dataset.action = action.key;
+            if (action.disabled) btn.disabled = true;
+            if (action.title) btn.title = action.title;
+
+            const iconSpan = document.createElement('span');
+            iconSpan.className = 'material-symbols-outlined';
+            iconSpan.textContent = action.icon;
+            btn.appendChild(iconSpan);
+            btn.appendChild(document.createTextNode(` ${action.label}`));
+
+            btn.addEventListener('click', () => action.handler?.());
+            actionsEl.appendChild(btn);
+        }
+
+        header.appendChild(actionsEl);
+    }
+
+    // Inline rename
+    if (renameable && onRename) {
+        const renamer = attachInlineRenamer({
+            label: nameEl,
+            onCommit: async (newName) => {
+                if (!newName?.trim()) return { success: false };
+                return await onRename(newName.trim());
+            },
+        });
+        nameEl.addEventListener('dblclick', (e) => {
+            e.stopPropagation();
+            renamer.start(e);
+        });
+        header._renamer = renamer;
+    }
+}

package/src/ui/components/gallery_picker.js

@@ -0,0 +1,147 @@
+/**
+ * gallery_picker.js — single-select card grid for the starter catalog.
+ *
+ * G1.3 in docs/STARTER_GALLERY_REQUIREMENTS.md. Used by every
+ * "New X" modal to let the user pick a starter shape (formerly
+ * called a "template"). The picker is mounted into a host element
+ * and fires `onChange(entry)` whenever the selection changes.
+ *
+ * Each entry is the raw gallery dict from `pywebview.api.gallery_list`:
+ *
+ *     { id, kind, label, description, fields }
+ *
+ * The picker shows label + description as a card. `fields` is
+ * passed through to the caller untouched on select — the New-X
+ * handler decides what to do with it.
+ *
+ * Usage:
+ *
+ *     const picker = await mountGalleryPicker(hostEl, {
+ *         kind: 'agent',
+ *         selectedId: 'blank',
+ *         onChange: (entry) => { … },
+ *     });
+ *
+ *     // later …
+ *     picker.getSelected();   // → { id, kind, label, description, fields }
+ *     picker.dispose();
+ */
+
+function esc(s) {
+    return String(s ?? '').replace(/[&<>"']/g, (c) => ({
+        '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;',
+    }[c]));
+}
+
+
+/**
+ * Mount a starter-gallery picker into `hostEl`.
+ *
+ * @param {HTMLElement} hostEl
+ * @param {object}      opts
+ * @param {string}      opts.kind          — gallery entries to load (e.g. 'agent').
+ *                                            When undefined, every kind shows up.
+ * @param {string}      [opts.selectedId]  — id to pre-select. If absent, the
+ *                                            first entry wins.
+ * @param {function}    [opts.onChange]    — `(entry) => void` fired on selection
+ *                                            change AND on initial mount.
+ * @param {object[]}    [opts.entries]     — explicit entries (skips bridge fetch).
+ *                                            Useful for tests + offline previews.
+ * @param {string}      [opts.emptyLabel]  — copy shown when the catalog is empty
+ *                                            for that kind.
+ * @returns {Promise<{getSelected, setSelectedById, dispose}>}
+ */
+export async function mountGalleryPicker(hostEl, opts = {}) {
+    const {
+        kind         = null,
+        selectedId   = null,
+        onChange     = () => {},
+        entries      = null,
+        emptyLabel   = 'No starters available for this kind.',
+    } = opts;
+    if (!hostEl) throw new Error('mountGalleryPicker: hostEl is required');
+
+    let catalog = entries;
+    if (!catalog) {
+        const api = window.pywebview?.api;
+        try {
+            catalog = (await api?.gallery_list?.(kind)) || [];
+        } catch (err) {
+            console.warn('[gallery-picker] gallery_list failed', err);
+            catalog = [];
+        }
+    }
+    catalog = Array.isArray(catalog) ? catalog : [];
+
+    hostEl.classList.add('twm-gallery-picker');
+    if (catalog.length === 0) {
+        hostEl.innerHTML = `<div class="twm-gallery-picker__empty">${esc(emptyLabel)}</div>`;
+        return {
+            getSelected: () => null,
+            setSelectedById: () => false,
+            dispose: () => { hostEl.classList.remove('twm-gallery-picker'); },
+        };
+    }
+
+    let selected = catalog.find((e) => e?.id === selectedId)
+                || catalog[0];
+
+    const render = () => {
+        hostEl.innerHTML = catalog.map((e, i) => {
+            const isSel = e === selected;
+            const desc = e?.description
+                ? `<p class="twm-gallery-card__desc">${esc(e.description)}</p>`
+                : '';
+            return `
+                <button type="button"
+                        class="twm-gallery-card ${isSel ? 'is-selected' : ''}"
+                        data-idx="${i}"
+                        title="${esc(e?.id || '')}">
+                    <span class="twm-gallery-card__label">${esc(e?.label || e?.id || '')}</span>
+                    ${desc}
+                </button>
+            `;
+        }).join('');
+    };
+    render();
+
+    const onClick = (ev) => {
+        const card = ev.target.closest?.('.twm-gallery-card');
+        if (!card || !hostEl.contains(card)) return;
+        const idx = Number(card.dataset.idx);
+        const next = catalog[idx];
+        if (!next || next === selected) return;
+        selected = next;
+        render();
+        try { onChange(selected); } catch (err) {
+            console.warn('[gallery-picker] onChange threw', err);
+        }
+    };
+    hostEl.addEventListener('click', onClick);
+
+    // Fire the initial selection so the caller can prime any
+    // downstream UI (preview pane, defaults, etc.) without a
+    // special case for first-render.
+    try { onChange(selected); } catch (err) {
+        console.warn('[gallery-picker] initial onChange threw', err);
+    }
+
+    return {
+        getSelected: () => (selected ? { ...selected } : null),
+        setSelectedById: (id) => {
+            const next = catalog.find((e) => e?.id === id);
+            if (!next || next === selected) return false;
+            selected = next;
+            render();
+            try { onChange(selected); } catch (err) {
+                console.warn('[gallery-picker] onChange threw', err);
+            }
+            return true;
+        },
+        dispose: () => {
+            hostEl.removeEventListener('click', onClick);
+            hostEl.innerHTML = '';
+            hostEl.classList.remove('twm-gallery-picker');
+        },
+    };
+}

package/src/ui/components/inline_renamer.js

@@ -0,0 +1,129 @@
+/**
+ * InlineRenamer (js_new)
+ * Minimal inline editing helper used by node labels and scenario titles.
+ * Attaches an input on demand, commits through provided callback, and cleans up deterministically.
+ */
+
+function assertLabel(label) {
+    if (!label || typeof label.appendChild !== 'function') {
+        throw new Error('[InlineRenamer] options.label must be an HTMLElement');
+    }
+}
+
+function buildInput(label, options) {
+    const input = document.createElement('input');
+    input.type = 'text';
+    input.className = ['twm-node-edit-input', options?.inputClass || ''].join(' ').trim();
+    input.placeholder = options?.placeholder || label.textContent || 'Name';
+    input.value = options?.initialValue ?? label.textContent ?? '';
+    input.spellcheck = false;
+    input.autocomplete = 'off';
+    input.setAttribute('aria-label', 'Edit name');
+    return input;
+}
+
+export function attachInlineRenamer(options = {}) {
+    const label = options.label;
+    assertLabel(label);
+
+    let input = null;
+    let editing = false;
+    let destroyed = false;
+    let originalText = label.textContent || '';
+
+    const cleanup = () => {
+        if (input && input.parentNode === label) {
+            input.remove();
+        }
+        input = null;
+        editing = false;
+    };
+
+    const cancel = () => {
+        if (destroyed) return;
+        cleanup();
+        label.textContent = originalText;
+        options.onCancel?.({ value: originalText });
+    };
+
+    const commit = async (reason = 'commit') => {
+        if (destroyed || !input) return;
+        const raw = input.value;
+        let next = raw;
+        try {
+            next = options.transformInput ? options.transformInput(raw, { reason }) : raw;
+        } catch (err) {
+            window.logger?.warn('inline-renamer', 'transformInput failed', err);
+        }
+
+        try {
+            const result = (await options.onCommit?.(next, { reason })) || {};
+            if (result.success === false) {
+                if (result.keepEditing) {
+                    input.focus();
+                    input.select();
+                    return;
+                }
+                cancel();
+                return;
+            }
+            const finalValue = result.newValue ?? next ?? '';
+            label.textContent = finalValue;
+            cleanup();
+            options.onFinish?.({ value: finalValue });
+        } catch (err) {
+            window.logger?.warn('inline-renamer', 'onCommit failed', err);
+            cancel();
+        }
+    };
+
+    const start = (triggerEvent = null) => {
+        if (destroyed || editing) return;
+        editing = true;
+        originalText = label.textContent || '';
+        label.textContent = '';
+        input = buildInput(label, { ...options, initialValue: originalText });
+        label.appendChild(input);
+
+        const stopEvents = (ev) => ev.stopPropagation();
+        input.addEventListener('mousedown', stopEvents);
+        input.addEventListener('click', stopEvents);
+
+        input.addEventListener('keydown', (ev) => {
+            if (ev.key === 'Enter') {
+                ev.preventDefault();
+                commit('enter');
+            } else if (ev.key === 'Escape') {
+                ev.preventDefault();
+                cancel();
+            }
+        });
+
+        input.addEventListener('blur', () => commit('blur'));
+
+        options.onStart?.({ value: originalText, triggerEvent });
+        setTimeout(() => {
+            input?.focus();
+            input?.select?.();
+        }, 0);
+    };
+
+    const destroy = () => {
+        destroyed = true;
+        cleanup();
+    };
+
+    return { start, cancel, commit, destroy };
+}
+
+// `window.InlineRenamer` used to be installed here, at module scope, "for existing
+// callers". There are none: every caller in the tree — EcoAgent's and the
+// library's — uses the `attachInlineRenamer` named export. It was a global that
+// nothing read.
+//
+// It also made this module UNIMPORTABLE outside a browser, because the assignment
+// ran on import. That is how it was found: a node test that does nothing but
+// `import '@flexdesk/widgets'` died with `ReferenceError: window is not defined`. A
+// library whose entry point cannot be imported without a DOM is a library that
+// cannot be unit-tested, server-rendered, or loaded in a worker — and
+// package.json's `"sideEffects": ["*.css"]` was a lie while this line existed.