flexdesk 0.5.0 → 0.6.1

package/dist/chunk-H4LT43RS.js

@@ -0,0 +1,475 @@
+import {
+  modalHost
+} from "./chunk-6NG7YVBG.js";
+
+// src/help/help_registry.js
+var EMPTY_PROVIDER = Object.freeze({
+  getCategories: () => [],
+  getTopicsByCategory: () => [],
+  loadTopic: async () => null,
+  searchTopics: () => []
+});
+var DEFAULT_COPY = Object.freeze({
+  title: "Help",
+  welcome: "Select a topic from the sidebar or browse the categories below."
+});
+var _provider = EMPTY_PROVIDER;
+var _categories = Object.freeze({});
+var _copy = DEFAULT_COPY;
+function setHelpProvider(provider, categories = {}, copy = {}) {
+  _provider = provider ?? EMPTY_PROVIDER;
+  _categories = Object.freeze({ ...categories });
+  _copy = Object.freeze({ ...DEFAULT_COPY, ...copy });
+}
+function helpProvider() {
+  return _provider;
+}
+function helpCategories() {
+  return _categories;
+}
+function helpCopy() {
+  return _copy;
+}
+
+// src/help/help_modal.js
+var _activeModal = null;
+var HelpModal = class _HelpModal {
+  /** The application's help, resolved at use time. */
+  get _service() {
+    return helpProvider();
+  }
+  get _categories() {
+    return helpCategories();
+  }
+  get _copy() {
+    return helpCopy();
+  }
+  constructor() {
+    this._overlay = null;
+    this._modal = null;
+    this._currentTopic = null;
+    this._searchQuery = "";
+    this._boundKeyHandler = this._handleKeyDown.bind(this);
+  }
+  /**
+   * Open the help modal.
+   * @param {string} [topicId] - Initial topic to display
+   */
+  async open(topicId = null) {
+    if (_activeModal && _activeModal !== this) {
+      _activeModal.close();
+    }
+    _activeModal = this;
+    this._createModal();
+    document.body.appendChild(this._overlay);
+    document.addEventListener("keydown", this._boundKeyHandler);
+    const searchInput = this._modal.querySelector(".help-search-input");
+    if (searchInput) {
+      setTimeout(() => searchInput.focus(), 100);
+    }
+    if (topicId) {
+      await this._loadTopic(topicId);
+    } else {
+      this._showIndex();
+    }
+  }
+  /**
+   * Close the help modal.
+   */
+  close() {
+    if (this._overlay) {
+      document.removeEventListener("keydown", this._boundKeyHandler);
+      this._overlay.remove();
+      this._overlay = null;
+      this._modal = null;
+    }
+    if (_activeModal === this) {
+      _activeModal = null;
+    }
+  }
+  /**
+   * Create the modal DOM structure.
+   * @private
+   */
+  _createModal() {
+    this._overlay = document.createElement("div");
+    this._overlay.className = "help-modal-overlay";
+    this._overlay.addEventListener("click", (e) => {
+      if (e.target === this._overlay) this.close();
+    });
+    this._modal = document.createElement("div");
+    this._modal.className = "help-modal";
+    this._modal.innerHTML = `
+            <div class="help-modal__header">
+                <div class="help-modal__title">
+                    <span class="material-symbols-outlined">help</span>
+                    <span>Help</span>
+                </div>
+                <button class="help-modal__close" title="Close (Esc)">
+                    <span class="material-symbols-outlined">close</span>
+                </button>
+            </div>
+            <div class="help-modal__search">
+                <span class="material-symbols-outlined">search</span>
+                <input type="text" class="help-search-input" placeholder="Search help topics..." autocomplete="off">
+            </div>
+            <div class="help-modal__body">
+                <nav class="help-modal__sidebar">
+                    <div class="help-sidebar__categories"></div>
+                </nav>
+                <main class="help-modal__content">
+                    <div class="help-content__loading">Loading...</div>
+                </main>
+            </div>
+        `;
+    const closeBtn = this._modal.querySelector(".help-modal__close");
+    closeBtn.addEventListener("click", () => this.close());
+    const searchInput = this._modal.querySelector(".help-search-input");
+    searchInput.addEventListener("input", (e) => this._handleSearch(e.target.value));
+    searchInput.addEventListener("keydown", (e) => {
+      if (e.key === "Escape") {
+        if (e.target.value) {
+          e.target.value = "";
+          this._handleSearch("");
+          e.stopPropagation();
+        }
+      }
+    });
+    this._buildSidebar();
+    this._overlay.appendChild(this._modal);
+  }
+  /**
+   * Build the sidebar navigation.
+   * @private
+   */
+  _buildSidebar() {
+    const container = this._modal.querySelector(".help-sidebar__categories");
+    const categories = this._service.getCategories();
+    const categoryOrder = Object.keys(this._categories);
+    categories.sort((a, b) => {
+      const orderA = categoryOrder.indexOf(a);
+      const orderB = categoryOrder.indexOf(b);
+      return (orderA === -1 ? 99 : orderA) - (orderB === -1 ? 99 : orderB);
+    });
+    container.innerHTML = categories.map((category) => {
+      const topics = this._service.getTopicsByCategory(category);
+      const label = this._categories[category]?.label || category;
+      const icon = this._categories[category]?.icon || "folder";
+      return `
+                <div class="help-category" data-category="${category}">
+                    <div class="help-category__header">
+                        <span class="material-symbols-outlined">${icon}</span>
+                        <span>${label}</span>
+                    </div>
+                    <ul class="help-category__topics">
+                        ${topics.map((topic) => `
+                            <li class="help-topic-item" data-topic="${topic.id}">
+                                ${topic.title}
+                            </li>
+                        `).join("")}
+                    </ul>
+                </div>
+            `;
+    }).join("");
+    container.querySelectorAll(".help-topic-item").forEach((item) => {
+      item.addEventListener("click", () => {
+        this._loadTopic(item.dataset.topic);
+      });
+    });
+    container.querySelectorAll(".help-category__header").forEach((header) => {
+      header.addEventListener("click", () => {
+        header.parentElement.classList.toggle("collapsed");
+      });
+    });
+  }
+  /**
+   * Show the help index page.
+   * @private
+   */
+  _showIndex() {
+    const content = this._modal.querySelector(".help-modal__content");
+    const categories = this._service.getCategories();
+    const categoryOrder = Object.keys(this._categories);
+    categories.sort((a, b) => {
+      const orderA = categoryOrder.indexOf(a);
+      const orderB = categoryOrder.indexOf(b);
+      return (orderA === -1 ? 99 : orderA) - (orderB === -1 ? 99 : orderB);
+    });
+    content.innerHTML = `
+            <div class="help-index">
+                <h1>${this._copy.title}</h1>
+                <p>${this._copy.welcome}</p>
+
+                <div class="help-index__grid">
+                    ${categories.map((category) => {
+      const topics = this._service.getTopicsByCategory(category);
+      const label = this._categories[category]?.label || category;
+      const icon = this._categories[category]?.icon || "folder";
+      return `
+                            <div class="help-index__category" data-category="${category}">
+                                <div class="help-index__category-header">
+                                    <span class="material-symbols-outlined">${icon}</span>
+                                    <span>${label}</span>
+                                </div>
+                                <ul class="help-index__topics">
+                                    ${topics.slice(0, 3).map((topic) => `
+                                        <li class="help-index__topic" data-topic="${topic.id}">
+                                            ${topic.title}
+                                        </li>
+                                    `).join("")}
+                                    ${topics.length > 3 ? `<li class="help-index__more">+${topics.length - 3} more</li>` : ""}
+                                </ul>
+                            </div>
+                        `;
+    }).join("")}
+                </div>
+            </div>
+        `;
+    content.querySelectorAll(".help-index__topic").forEach((item) => {
+      item.addEventListener("click", () => {
+        this._loadTopic(item.dataset.topic);
+      });
+    });
+  }
+  /**
+   * Load and display a topic.
+   * @param {string} topicId - Topic ID
+   * @private
+   */
+  async _loadTopic(topicId) {
+    const content = this._modal.querySelector(".help-modal__content");
+    content.innerHTML = '<div class="help-content__loading">Loading...</div>';
+    this._modal.querySelectorAll(".help-topic-item").forEach((item) => {
+      item.classList.toggle("active", item.dataset.topic === topicId);
+    });
+    try {
+      const topic = await this._service.loadTopic(topicId);
+      this._currentTopic = topicId;
+      content.innerHTML = `
+                <div class="help-content__article">
+                    <div class="help-content__breadcrumb">
+                        <a href="#" class="help-breadcrumb__home" title="Help Index">
+                            <span class="material-symbols-outlined">home</span>
+                        </a>
+                        <span class="help-breadcrumb__separator">/</span>
+                        <span class="help-breadcrumb__title">${topic.title}</span>
+                    </div>
+                    <article class="help-article">
+                        ${topic.html}
+                    </article>
+                </div>
+            `;
+      content.querySelector(".help-breadcrumb__home").addEventListener("click", (e) => {
+        e.preventDefault();
+        this._showIndex();
+      });
+    } catch (error) {
+      content.innerHTML = `
+                <div class="help-content__error">
+                    <span class="material-symbols-outlined">error</span>
+                    <p>Failed to load help topic.</p>
+                </div>
+            `;
+    }
+  }
+  /**
+   * Handle search input.
+   * @param {string} query - Search query
+   * @private
+   */
+  _handleSearch(query) {
+    this._searchQuery = query;
+    const content = this._modal.querySelector(".help-modal__content");
+    if (!query.trim()) {
+      this._showIndex();
+      return;
+    }
+    const results = this._service.searchTopics(query);
+    if (results.length === 0) {
+      content.innerHTML = `
+                <div class="help-search-results">
+                    <h2>Search Results</h2>
+                    <p class="help-search-empty">No results found for "${query}"</p>
+                </div>
+            `;
+      return;
+    }
+    content.innerHTML = `
+            <div class="help-search-results">
+                <h2>Search Results</h2>
+                <p class="help-search-count">${results.length} result${results.length !== 1 ? "s" : ""} for "${query}"</p>
+                <ul class="help-search-list">
+                    ${results.map((topic) => `
+                        <li class="help-search-item" data-topic="${topic.id}">
+                            <span class="help-search-item__title">${topic.title}</span>
+                            <span class="help-search-item__category">${this._categories[topic.category]?.label || topic.category}</span>
+                        </li>
+                    `).join("")}
+                </ul>
+            </div>
+        `;
+    content.querySelectorAll(".help-search-item").forEach((item) => {
+      item.addEventListener("click", () => {
+        this._loadTopic(item.dataset.topic);
+      });
+    });
+  }
+  /**
+   * Handle keyboard events.
+   * @param {KeyboardEvent} event
+   * @private
+   */
+  _handleKeyDown(event) {
+    if (event.key === "Escape") {
+      this.close();
+    }
+  }
+  /**
+   * Static method to open help modal.
+   * @param {string} [topicId] - Initial topic
+   * @returns {HelpModal}
+   */
+  static open(topicId = null) {
+    const modal = new _HelpModal();
+    modal.open(topicId);
+    return modal;
+  }
+  /**
+   * Get the currently active modal.
+   * @returns {HelpModal|null}
+   */
+  static getActive() {
+    return _activeModal;
+  }
+};
+function setupGlobalHelpShortcut() {
+  document.addEventListener("keydown", (event) => {
+    if (event.key !== "?") return;
+    const t = event.target;
+    if (t?.closest?.(
+      'input, textarea, select, [contenteditable="true"]'
+    )) return;
+    event.preventDefault();
+    if (_activeModal) {
+      _activeModal.close();
+    } else {
+      HelpModal.open();
+    }
+  });
+}
+if (typeof document !== "undefined") {
+  setupGlobalHelpShortcut();
+}
+
+// src/ui/components/context_menu.js
+var _activeMenu = null;
+var _returnFocusTo = null;
+function showContextMenu(x, y, items, onAction) {
+  hideContextMenu();
+  _returnFocusTo = document.activeElement;
+  const menu = document.createElement("div");
+  menu.className = "twm-context-menu ea-context-menu";
+  menu.setAttribute("role", "menu");
+  for (const it of items) {
+    if (it.separator) {
+      const sep = document.createElement("div");
+      sep.className = "twm-context-menu__separator";
+      sep.setAttribute("role", "separator");
+      menu.appendChild(sep);
+      continue;
+    }
+    const row = document.createElement("button");
+    row.type = "button";
+    row.setAttribute("role", "menuitem");
+    let cls = "twm-context-menu-item";
+    if (it.danger) cls += " twm-delete-node";
+    if (it.disabled) cls += " disabled";
+    row.className = cls;
+    if (it.disabled) {
+      row.disabled = true;
+      row.setAttribute("aria-disabled", "true");
+    }
+    if (it.title) row.title = it.title;
+    row.innerHTML = `
+            <span class="material-symbols-outlined">${it.icon || ""}</span>
+            <span>${escapeHtml(it.label)}</span>
+        `;
+    if (!it.disabled) {
+      row.addEventListener("click", (e) => {
+        e.stopPropagation();
+        hideContextMenu();
+        onAction?.(it.action);
+      });
+    }
+    menu.appendChild(row);
+  }
+  (modalHost() || document.body).appendChild(menu);
+  menu.style.display = "block";
+  _activeMenu = menu;
+  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`;
+  setTimeout(() => {
+    document.addEventListener("mousedown", _outsideHandler, { once: true, capture: true });
+  }, 0);
+  document.addEventListener("keydown", _keyHandler);
+  window.addEventListener("scroll", hideContextMenu, { once: true, capture: true });
+  _enabledItems(menu)[0]?.focus({ preventScroll: true });
+}
+function hideContextMenu() {
+  if (!_activeMenu) return;
+  const returnTo = _returnFocusTo;
+  const held = _activeMenu.contains(document.activeElement);
+  _activeMenu.remove();
+  _activeMenu = null;
+  _returnFocusTo = null;
+  document.removeEventListener("keydown", _keyHandler);
+  if (held && returnTo?.isConnected) returnTo.focus?.({ preventScroll: true });
+}
+function _enabledItems(menu) {
+  return [...menu.querySelectorAll(".twm-context-menu-item:not(.disabled)")];
+}
+function _keyHandler(e) {
+  if (!_activeMenu) return;
+  if (e.key === "Escape") {
+    e.preventDefault();
+    hideContextMenu();
+    return;
+  }
+  const items = _enabledItems(_activeMenu);
+  if (items.length === 0) return;
+  const at = items.indexOf(document.activeElement);
+  let next = null;
+  if (e.key === "ArrowDown") next = items[(at + 1 + items.length) % items.length];
+  else if (e.key === "ArrowUp") next = items[(at - 1 + items.length) % items.length];
+  else if (e.key === "Home") next = items[0];
+  else if (e.key === "End") next = items[items.length - 1];
+  if (!next) return;
+  e.preventDefault();
+  next.focus({ preventScroll: true });
+}
+function _outsideHandler(e) {
+  if (_activeMenu && !_activeMenu.contains(e.target)) hideContextMenu();
+}
+function escapeHtml(s) {
+  return String(s).replace(/[&<>"']/g, (c) => ({
+    "&": "&amp;",
+    "<": "&lt;",
+    ">": "&gt;",
+    '"': "&quot;",
+    "'": "&#39;"
+  })[c]);
+}
+
+export {
+  setHelpProvider,
+  helpProvider,
+  helpCategories,
+  helpCopy,
+  HelpModal,
+  showContextMenu,
+  hideContextMenu
+};
+//# sourceMappingURL=chunk-H4LT43RS.js.map

package/dist/chunk-H4LT43RS.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/help/help_registry.js", "../src/help/help_modal.js", "../src/ui/components/context_menu.js"],
+  "sourcesContent": ["/**\n * Where the help modal gets its help.\n *\n * HelpModal used to `import { getHelpService, HELP_TOPICS } from './help_service.js'` \u2014\n * and help_service.js is 249 domain words of EcoAgent prose about sectors,\n * currencies, agents and markets. That import was the last framework -> domain\n * edge in the core: a generic modal reaching into one application's manual.\n *\n * The modal now asks this registry, and the application fills it. If nobody\n * fills it, the modal opens and says there is no help \u2014 which is the correct\n * behaviour for a library that ships no documentation about your app.\n *\n * @typedef {Object} HelpProvider\n * @property {() => string[]} getCategories\n * @property {(category: string) => Array<{id: string, title: string}>} getTopicsByCategory\n * @property {(id: string) => Promise<Object|null>} loadTopic\n * @property {(query: string) => Array<Object>} searchTopics\n *\n * @typedef {Object.<string, {label: string, icon: string}>} HelpCategories\n *   Keyed by category id; ITERATION ORDER IS DISPLAY ORDER.\n *\n * @typedef {{title: string, welcome: string}} HelpCopy\n *   The landing heading. The modal used to hardcode \"EcoAgent Help\" and\n *   \"Welcome to EcoAgent!\".\n */\n\n/** A provider with nothing in it. Not an error \u2014 just an app with no help. */\nconst EMPTY_PROVIDER = Object.freeze({\n    getCategories: () => [],\n    getTopicsByCategory: () => [],\n    loadTopic: async () => null,\n    searchTopics: () => [],\n});\n\nconst DEFAULT_COPY = Object.freeze({\n    title: 'Help',\n    welcome: 'Select a topic from the sidebar or browse the categories below.',\n});\n\nlet _provider = EMPTY_PROVIDER;\nlet _categories = Object.freeze({});\nlet _copy = DEFAULT_COPY;\n\n/**\n * @param {HelpProvider} provider\n * @param {HelpCategories} [categories] Display labels + icons, in display order.\n * @param {Partial<HelpCopy>} [copy] Landing heading and welcome line.\n */\nexport function setHelpProvider(provider, categories = {}, copy = {}) {\n    _provider = provider ?? EMPTY_PROVIDER;\n    _categories = Object.freeze({ ...categories });\n    _copy = Object.freeze({ ...DEFAULT_COPY, ...copy });\n}\n\nexport function helpProvider() {\n    return _provider;\n}\n\nexport function helpCategories() {\n    return _categories;\n}\n\nexport function helpCopy() {\n    return _copy;\n}\n", "/**\n * HelpModal - Modal dialog for displaying help content\n *\n * Features:\n * - Markdown rendering with syntax highlighting\n * - Table of contents navigation\n * - Topic search\n * - Category browsing\n * - Keyboard navigation (Escape to close)\n */\n\nimport { helpProvider, helpCategories, helpCopy } from './help_registry.js';\n\n// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n// HelpModal Class\n// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n\nlet _activeModal = null;\n\nexport class HelpModal {\n    /** The application's help, resolved at use time. */\n    get _service() { return helpProvider(); }\n\n    get _categories() { return helpCategories(); }\n\n    get _copy() { return helpCopy(); }\n\n    constructor() {\n        // Read LAZILY, not here. A HelpModal can be constructed at boot (the\n        // command palette holds one) before the application has registered its\n        // help, and a constructor read would freeze the empty default forever.\n        this._overlay = null;\n        this._modal = null;\n        this._currentTopic = null;\n        this._searchQuery = '';\n        this._boundKeyHandler = this._handleKeyDown.bind(this);\n    }\n\n    /**\n     * Open the help modal.\n     * @param {string} [topicId] - Initial topic to display\n     */\n    async open(topicId = null) {\n        // Close any existing modal\n        if (_activeModal && _activeModal !== this) {\n            _activeModal.close();\n        }\n        _activeModal = this;\n\n        this._createModal();\n        document.body.appendChild(this._overlay);\n\n        // Add keyboard handler\n        document.addEventListener('keydown', this._boundKeyHandler);\n\n        // Focus search input\n        const searchInput = this._modal.querySelector('.help-search-input');\n        if (searchInput) {\n            setTimeout(() => searchInput.focus(), 100);\n        }\n\n        // Load initial topic or show index\n        if (topicId) {\n            await this._loadTopic(topicId);\n        } else {\n            this._showIndex();\n        }\n    }\n\n    /**\n     * Close the help modal.\n     */\n    close() {\n        if (this._overlay) {\n            document.removeEventListener('keydown', this._boundKeyHandler);\n            this._overlay.remove();\n            this._overlay = null;\n            this._modal = null;\n        }\n        if (_activeModal === this) {\n            _activeModal = null;\n        }\n    }\n\n    /**\n     * Create the modal DOM structure.\n     * @private\n     */\n    _createModal() {\n        // Overlay\n        this._overlay = document.createElement('div');\n        this._overlay.className = 'help-modal-overlay';\n        this._overlay.addEventListener('click', (e) => {\n            if (e.target === this._overlay) this.close();\n        });\n\n        // Modal container\n        this._modal = document.createElement('div');\n        this._modal.className = 'help-modal';\n        this._modal.innerHTML = `\n            <div class=\"help-modal__header\">\n                <div class=\"help-modal__title\">\n                    <span class=\"material-symbols-outlined\">help</span>\n                    <span>Help</span>\n                </div>\n                <button class=\"help-modal__close\" title=\"Close (Esc)\">\n                    <span class=\"material-symbols-outlined\">close</span>\n                </button>\n            </div>\n            <div class=\"help-modal__search\">\n                <span class=\"material-symbols-outlined\">search</span>\n                <input type=\"text\" class=\"help-search-input\" placeholder=\"Search help topics...\" autocomplete=\"off\">\n            </div>\n            <div class=\"help-modal__body\">\n                <nav class=\"help-modal__sidebar\">\n                    <div class=\"help-sidebar__categories\"></div>\n                </nav>\n                <main class=\"help-modal__content\">\n                    <div class=\"help-content__loading\">Loading...</div>\n                </main>\n            </div>\n        `;\n\n        // Event handlers\n        const closeBtn = this._modal.querySelector('.help-modal__close');\n        closeBtn.addEventListener('click', () => this.close());\n\n        const searchInput = this._modal.querySelector('.help-search-input');\n        searchInput.addEventListener('input', (e) => this._handleSearch(e.target.value));\n        searchInput.addEventListener('keydown', (e) => {\n            if (e.key === 'Escape') {\n                if (e.target.value) {\n                    e.target.value = '';\n                    this._handleSearch('');\n                    e.stopPropagation();\n                }\n            }\n        });\n\n        // Build sidebar\n        this._buildSidebar();\n\n        this._overlay.appendChild(this._modal);\n    }\n\n    /**\n     * Build the sidebar navigation.\n     * @private\n     */\n    _buildSidebar() {\n        const container = this._modal.querySelector('.help-sidebar__categories');\n        const categories = this._service.getCategories();\n\n        // Sort categories by order\n        const categoryOrder = Object.keys(this._categories);\n        categories.sort((a, b) => {\n            const orderA = categoryOrder.indexOf(a);\n            const orderB = categoryOrder.indexOf(b);\n            return (orderA === -1 ? 99 : orderA) - (orderB === -1 ? 99 : orderB);\n        });\n\n        container.innerHTML = categories.map(category => {\n            const topics = this._service.getTopicsByCategory(category);\n            const label = this._categories[category]?.label || category;\n            const icon = this._categories[category]?.icon || 'folder';\n\n            return `\n                <div class=\"help-category\" data-category=\"${category}\">\n                    <div class=\"help-category__header\">\n                        <span class=\"material-symbols-outlined\">${icon}</span>\n                        <span>${label}</span>\n                    </div>\n                    <ul class=\"help-category__topics\">\n                        ${topics.map(topic => `\n                            <li class=\"help-topic-item\" data-topic=\"${topic.id}\">\n                                ${topic.title}\n                            </li>\n                        `).join('')}\n                    </ul>\n                </div>\n            `;\n        }).join('');\n\n        // Add click handlers\n        container.querySelectorAll('.help-topic-item').forEach(item => {\n            item.addEventListener('click', () => {\n                this._loadTopic(item.dataset.topic);\n            });\n        });\n\n        container.querySelectorAll('.help-category__header').forEach(header => {\n            header.addEventListener('click', () => {\n                header.parentElement.classList.toggle('collapsed');\n            });\n        });\n    }\n\n    /**\n     * Show the help index page.\n     * @private\n     */\n    _showIndex() {\n        const content = this._modal.querySelector('.help-modal__content');\n        const categories = this._service.getCategories();\n\n        const categoryOrder = Object.keys(this._categories);\n        categories.sort((a, b) => {\n            const orderA = categoryOrder.indexOf(a);\n            const orderB = categoryOrder.indexOf(b);\n            return (orderA === -1 ? 99 : orderA) - (orderB === -1 ? 99 : orderB);\n        });\n\n        content.innerHTML = `\n            <div class=\"help-index\">\n                <h1>${this._copy.title}</h1>\n                <p>${this._copy.welcome}</p>\n\n                <div class=\"help-index__grid\">\n                    ${categories.map(category => {\n                        const topics = this._service.getTopicsByCategory(category);\n                        const label = this._categories[category]?.label || category;\n                        const icon = this._categories[category]?.icon || 'folder';\n\n                        return `\n                            <div class=\"help-index__category\" data-category=\"${category}\">\n                                <div class=\"help-index__category-header\">\n                                    <span class=\"material-symbols-outlined\">${icon}</span>\n                                    <span>${label}</span>\n                                </div>\n                                <ul class=\"help-index__topics\">\n                                    ${topics.slice(0, 3).map(topic => `\n                                        <li class=\"help-index__topic\" data-topic=\"${topic.id}\">\n                                            ${topic.title}\n                                        </li>\n                                    `).join('')}\n                                    ${topics.length > 3 ? `<li class=\"help-index__more\">+${topics.length - 3} more</li>` : ''}\n                                </ul>\n                            </div>\n                        `;\n                    }).join('')}\n                </div>\n            </div>\n        `;\n\n        // Add click handlers\n        content.querySelectorAll('.help-index__topic').forEach(item => {\n            item.addEventListener('click', () => {\n                this._loadTopic(item.dataset.topic);\n            });\n        });\n    }\n\n    /**\n     * Load and display a topic.\n     * @param {string} topicId - Topic ID\n     * @private\n     */\n    async _loadTopic(topicId) {\n        const content = this._modal.querySelector('.help-modal__content');\n        content.innerHTML = '<div class=\"help-content__loading\">Loading...</div>';\n\n        // Update sidebar selection\n        this._modal.querySelectorAll('.help-topic-item').forEach(item => {\n            item.classList.toggle('active', item.dataset.topic === topicId);\n        });\n\n        try {\n            const topic = await this._service.loadTopic(topicId);\n            this._currentTopic = topicId;\n\n            content.innerHTML = `\n                <div class=\"help-content__article\">\n                    <div class=\"help-content__breadcrumb\">\n                        <a href=\"#\" class=\"help-breadcrumb__home\" title=\"Help Index\">\n                            <span class=\"material-symbols-outlined\">home</span>\n                        </a>\n                        <span class=\"help-breadcrumb__separator\">/</span>\n                        <span class=\"help-breadcrumb__title\">${topic.title}</span>\n                    </div>\n                    <article class=\"help-article\">\n                        ${topic.html}\n                    </article>\n                </div>\n            `;\n\n            // Add breadcrumb handler\n            content.querySelector('.help-breadcrumb__home').addEventListener('click', (e) => {\n                e.preventDefault();\n                this._showIndex();\n            });\n        } catch (error) {\n            content.innerHTML = `\n                <div class=\"help-content__error\">\n                    <span class=\"material-symbols-outlined\">error</span>\n                    <p>Failed to load help topic.</p>\n                </div>\n            `;\n        }\n    }\n\n    /**\n     * Handle search input.\n     * @param {string} query - Search query\n     * @private\n     */\n    _handleSearch(query) {\n        this._searchQuery = query;\n        const content = this._modal.querySelector('.help-modal__content');\n\n        if (!query.trim()) {\n            this._showIndex();\n            return;\n        }\n\n        const results = this._service.searchTopics(query);\n\n        if (results.length === 0) {\n            content.innerHTML = `\n                <div class=\"help-search-results\">\n                    <h2>Search Results</h2>\n                    <p class=\"help-search-empty\">No results found for \"${query}\"</p>\n                </div>\n            `;\n            return;\n        }\n\n        content.innerHTML = `\n            <div class=\"help-search-results\">\n                <h2>Search Results</h2>\n                <p class=\"help-search-count\">${results.length} result${results.length !== 1 ? 's' : ''} for \"${query}\"</p>\n                <ul class=\"help-search-list\">\n                    ${results.map(topic => `\n                        <li class=\"help-search-item\" data-topic=\"${topic.id}\">\n                            <span class=\"help-search-item__title\">${topic.title}</span>\n                            <span class=\"help-search-item__category\">${this._categories[topic.category]?.label || topic.category}</span>\n                        </li>\n                    `).join('')}\n                </ul>\n            </div>\n        `;\n\n        // Add click handlers\n        content.querySelectorAll('.help-search-item').forEach(item => {\n            item.addEventListener('click', () => {\n                this._loadTopic(item.dataset.topic);\n            });\n        });\n    }\n\n    /**\n     * Handle keyboard events.\n     * @param {KeyboardEvent} event\n     * @private\n     */\n    _handleKeyDown(event) {\n        if (event.key === 'Escape') {\n            this.close();\n        }\n    }\n\n    /**\n     * Static method to open help modal.\n     * @param {string} [topicId] - Initial topic\n     * @returns {HelpModal}\n     */\n    static open(topicId = null) {\n        const modal = new HelpModal();\n        modal.open(topicId);\n        return modal;\n    }\n\n    /**\n     * Get the currently active modal.\n     * @returns {HelpModal|null}\n     */\n    static getActive() {\n        return _activeModal;\n    }\n}\n\n// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n// Global Help Shortcut\n// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n\n/**\n * Open help modal with the `?` key. (F1 is reserved for top-nav Home.)\n */\nfunction setupGlobalHelpShortcut() {\n    document.addEventListener('keydown', (event) => {\n        if (event.key !== '?') return;\n        // Don't hijack `?` typed into a field (search boxes, editors).\n        const t = event.target;\n        if (t?.closest?.(\n            'input, textarea, select, [contenteditable=\"true\"]')) return;\n        event.preventDefault();\n        if (_activeModal) {\n            _activeModal.close();\n        } else {\n            HelpModal.open();\n        }\n    });\n}\n\n// Initialize global shortcut\nif (typeof document !== 'undefined') {\n    setupGlobalHelpShortcut();\n}\n\nexport default HelpModal;\n", "/**\n * context_menu.js \u2014 small popup menu that matches Ecosim's `.context-menu`\n * idiom (see main_new.css line 9713 and ui/js/ui/components/data_table.js).\n *\n * Usage:\n *   showContextMenu(x, y, [\n *     { label: 'Open',   icon: 'open_in_new', action: 'open' },\n *     { separator: true },\n *     { label: 'Delete', icon: 'delete',      action: 'delete', danger: true },\n *   ], (action) => { ... });\n *\n * The menu auto-closes on outside click / scroll / Escape.\n *\n * \u2500\u2500 It is operable by keyboard \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * Items were bare `<div>`s with a click listener: no role, no tab stop, no\n * arrow-key movement, and `showContextMenu` never moved focus into the menu.\n * A consumer that opened this from Shift+F10 \u2014 the rail in Tables does \u2014 put a\n * menu on screen that the keyboard could only dismiss. Every command in it was\n * unreachable without a pointer, and nothing said so.\n *\n * So an item is a `<button role=\"menuitem\">`, the first enabled one takes focus\n * when the menu opens, Up/Down/Home/End move between them and wrap, Enter and\n * Space activate, Escape closes, and focus returns to whatever had it before.\n * Disabled items are skipped by the arrows rather than focusable-but-inert.\n * `<button>` rather than a div with `tabindex`: the browser then gives Enter and\n * Space for free and screen readers announce it without further help.\n */\n\nimport { modalHost } from './modal.js';\n\nlet _activeMenu = null;\nlet _returnFocusTo = null;\n\nexport function showContextMenu(x, y, items, onAction) {\n    hideContextMenu();\n\n    // Whatever had focus when the menu opened gets it back when the menu\n    // closes. Without this a keyboard user who presses Escape is returned to\n    // `document.body` and has to tab back to where they were.\n    _returnFocusTo = document.activeElement;\n\n    const menu = document.createElement('div');\n    menu.className = 'twm-context-menu ea-context-menu';\n    menu.setAttribute('role', 'menu');\n\n    for (const it of items) {\n        if (it.separator) {\n            const sep = document.createElement('div');\n            sep.className = 'twm-context-menu__separator';\n            sep.setAttribute('role', 'separator');\n            menu.appendChild(sep);\n            continue;\n        }\n        const row = document.createElement('button');\n        row.type = 'button';\n        row.setAttribute('role', 'menuitem');\n        let cls = 'twm-context-menu-item';\n        if (it.danger) cls += ' twm-delete-node';\n        if (it.disabled) cls += ' disabled';\n        row.className = cls;\n        if (it.disabled) {\n            row.disabled = true;\n            row.setAttribute('aria-disabled', 'true');\n        }\n        // A DISABLED ROW WITH NO EXPLANATION IS A DEAD CONTROL. `title` was\n        // accepted by callers and rendered by nothing \u2014 the item was built with\n        // one, the row silently dropped it, and the user got a greyed line with\n        // no way to learn why. It is the same shape as the classes this\n        // repository keeps finding: no error, no throw, and invisible to every\n        // test that checks the row is disabled.\n        if (it.title) row.title = it.title;\n        row.innerHTML = `\n            <span class=\"material-symbols-outlined\">${it.icon || ''}</span>\n            <span>${escapeHtml(it.label)}</span>\n        `;\n        if (!it.disabled) {\n            row.addEventListener('click', (e) => {\n                e.stopPropagation();\n                hideContextMenu();\n                onAction?.(it.action);\n            });\n        }\n        menu.appendChild(row);\n    }\n\n    // C25. THE SAME QUESTION A MODAL ASKS: which window is the user in? A\n    // consumer spanning two browser windows sets the host when its focus moves;\n    // null \u2014 every consumer today \u2014 is `document.body`, exactly as before. A\n    // menu in the wrong window is worse than a modal in the wrong window,\n    // because it is positioned at coordinates from the OTHER one.\n    (modalHost() || document.body).appendChild(menu);\n    menu.style.display = 'block';\n    _activeMenu = menu;\n\n    // Position with viewport clamping.\n    const rect = menu.getBoundingClientRect();\n    const left = Math.min(x, window.innerWidth  - rect.width  - 8);\n    const top  = Math.min(y, window.innerHeight - rect.height - 8);\n    menu.style.left = `${Math.max(0, left)}px`;\n    menu.style.top  = `${Math.max(0, top)}px`;\n\n    // Close on outside click / scroll / Escape.\n    setTimeout(() => {\n        document.addEventListener('mousedown', _outsideHandler, { once: true, capture: true });\n    }, 0);\n    document.addEventListener('keydown', _keyHandler);\n    window.addEventListener('scroll', hideContextMenu, { once: true, capture: true });\n\n    // Focus the first item the keyboard can actually use. `preventScroll` so a\n    // menu opened near the bottom of a long page does not jump it.\n    _enabledItems(menu)[0]?.focus({ preventScroll: true });\n}\n\nexport function hideContextMenu() {\n    if (!_activeMenu) return;\n    const returnTo = _returnFocusTo;\n    const held = _activeMenu.contains(document.activeElement);\n    _activeMenu.remove();\n    _activeMenu = null;\n    _returnFocusTo = null;\n    document.removeEventListener('keydown', _keyHandler);\n    // Only take focus back if the menu still had it. A click elsewhere has\n    // already moved focus deliberately and must not be undone.\n    if (held && returnTo?.isConnected) returnTo.focus?.({ preventScroll: true });\n}\n\nfunction _enabledItems(menu) {\n    return [...menu.querySelectorAll('.twm-context-menu-item:not(.disabled)')];\n}\n\n/** Up/Down/Home/End move; the list WRAPS, which is what a menu of four items\n *  wants and what every desktop menu does. Enter and Space are the button's\n *  own, so they are not bound here. */\nfunction _keyHandler(e) {\n    if (!_activeMenu) return;\n    if (e.key === 'Escape') { e.preventDefault(); hideContextMenu(); return; }\n    const items = _enabledItems(_activeMenu);\n    if (items.length === 0) return;\n    const at = items.indexOf(document.activeElement);\n    let next = null;\n    if (e.key === 'ArrowDown')      next = items[(at + 1 + items.length) % items.length];\n    else if (e.key === 'ArrowUp')   next = items[(at - 1 + items.length) % items.length];\n    else if (e.key === 'Home')      next = items[0];\n    else if (e.key === 'End')       next = items[items.length - 1];\n    if (!next) return;\n    e.preventDefault();\n    next.focus({ preventScroll: true });\n}\n\nfunction _outsideHandler(e) {\n    if (_activeMenu && !_activeMenu.contains(e.target)) hideContextMenu();\n}\n\nfunction escapeHtml(s) {\n    return String(s).replace(/[&<>\"']/g, (c) => ({\n        '&': '&amp;', '<': '&lt;', '>': '&gt;', '\"': '&quot;', \"'\": '&#39;',\n    }[c]));\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/{chunk-KH2GJTKR.js → chunk-IYV5JVYB.js}

@@ -360,6 +360,7 @@ function matchDurationFilter(ms, filterText, shown) {
 
 // src/ui/components/data_table.js
 var DEFAULT_PAGE_SIZE = 100;
+var DIFF_STATUSES = /* @__PURE__ */ new Set(["added", "removed", "changed", "same", "gap"]);
 var TYPED_COLUMNS = /* @__PURE__ */ new Set(["date", "datetime", "duration"]);
 var DESELECTING_CLICKS = /* @__PURE__ */ new WeakSet();
 var AUTO_DISPOSE = /* @__PURE__ */ new Map();
@@ -531,6 +532,8 @@ var DataTable = class {
       rowClass: null,
       rowAttrs: null,
       cellClass: null,
+      diff: null,
+      scrollLock: null,
       rowIcon: null,
       emptyState: void 0,
       nullDisplay: null,
@@ -1009,6 +1012,9 @@ var DataTable = class {
     }
     this._tableWrapEl = tableWrap;
     this.container.appendChild(this._wrapperEl);
+    if (this.config.scrollLock && typeof this.config.scrollLock.attach === "function") {
+      this._disposers.push(this.config.scrollLock.attach(tableWrap));
+    }
     if (this.config.autoDispose) autoDisposeWatch(this);
     if (prevScroll && this._state.offset === this._renderedOffset) {
       tableWrap.scrollTop = prevScroll.top;
@@ -2411,11 +2417,20 @@ var DataTable = class {
       tr.appendChild(td);
     }
     const { cellClass, nullDisplay } = this.config;
+    const diff = this._diffOf(row, globalIdx);
+    const gap = diff?.status === "gap";
+    const changedCells = diff?.cells ? diff.cells instanceof Set ? diff.cells : new Set(diff.cells) : null;
     for (let colIdx = 0; colIdx < row.length; colIdx++) {
       const td = document.createElement("td");
       td.className = this._columnTypes[colIdx] || "text";
       const value = row[colIdx];
       let handled = false;
+      if (gap) {
+        td.classList.add("twm-dt-diff__gap");
+        tr.appendChild(td);
+        continue;
+      }
+      if (changedCells?.has(colIdx)) td.classList.add("twm-dt-diff__cell--changed");
       if (this.config.renderCell) {
         handled = !!this.config.renderCell(td, value, colIdx, globalIdx, row);
         if (!handled) {
@@ -2682,6 +2697,14 @@ var DataTable = class {
     }
     return null;
   }
+  /** 0.6.1. The `diff` answer for one row, or `null` when there is none or
+   *  its status is not one this component draws. */
+  _diffOf(row, rowIdx) {
+    if (typeof this.config.diff !== "function") return null;
+    const answer = this.config.diff(row, rowIdx);
+    if (!answer || !DIFF_STATUSES.has(answer.status)) return null;
+    return answer;
+  }
   /** Everything `rowClass`, `rowAttrs` and the open mark put on a `<tr>`,
    *  taken off again first — so `updateRow` cannot leave last state's class
    *  behind. */
@@ -2696,6 +2719,11 @@ var DataTable = class {
       const added = this._addClasses(tr, rowClass(row, rowIdx));
       tr.__twmClasses = added.filter((c) => c !== "data-preview-row" && c !== "selected");
     }
+    for (const c of [...tr.classList]) {
+      if (c === "twm-dt-diff" || c.startsWith("twm-dt-diff--")) tr.classList.remove(c);
+    }
+    const diff = this._diffOf(row, rowIdx);
+    if (diff) tr.classList.add("twm-dt-diff", `twm-dt-diff--${diff.status}`);
     if (tr.__twmAttrs) {
       for (const name of tr.__twmAttrs) tr.removeAttribute(name);
       tr.__twmAttrs = null;
@@ -3699,4 +3727,4 @@ export {
   matchDurationFilter,
   DataTable
 };
-//# sourceMappingURL=chunk-KH2GJTKR.js.map
+//# sourceMappingURL=chunk-IYV5JVYB.js.map