flexdesk 0.17.17 → 0.18.0

package/dist/chunk-7JI7HHSY.js

@@ -1,107 +0,0 @@
-import {
-  modalHost
-} from "./chunk-XJNADRGR.js";
-import {
-  focusMenuItem,
-  moveMenuFocus,
-  placeMenuInViewport
-} from "./chunk-WUFLGETN.js";
-
-// 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;
-  placeMenuInViewport(menu, x, y);
-  setTimeout(() => {
-    document.addEventListener("mousedown", _outsideHandler, { once: true, capture: true });
-  }, 0);
-  document.addEventListener("keydown", _keyHandler);
-  window.addEventListener("scroll", _scrollHandler, { capture: true });
-  focusMenuItem(_enabledItems(menu)[0]);
-}
-function hideContextMenu() {
-  if (!_activeMenu) return;
-  const returnTo = _returnFocusTo;
-  const held = _activeMenu.contains(document.activeElement);
-  _activeMenu.remove();
-  _activeMenu = null;
-  _returnFocusTo = null;
-  document.removeEventListener("keydown", _keyHandler);
-  window.removeEventListener("scroll", _scrollHandler, { capture: true });
-  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;
-  }
-  moveMenuFocus(e, _enabledItems(_activeMenu));
-}
-function _scrollHandler(e) {
-  if (_activeMenu && e.target?.nodeType && _activeMenu.contains(e.target)) return;
-  hideContextMenu();
-}
-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 {
-  showContextMenu,
-  hideContextMenu
-};
-//# sourceMappingURL=chunk-7JI7HHSY.js.map

package/dist/chunk-7JI7HHSY.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../src/ui/components/context_menu.js"],
-  "sourcesContent": ["/**\n * context_menu.js \u2014 small popup menu in the `.context-menu` idiom the\n * DataTable's own right-click menu uses (./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 * \u2500\u2500 It stays inside the window (BUG-0040) \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 * The top was clamped at 0 but nothing capped the height, so a long menu ran\n * off the bottom and could not scroll. `placeMenuInViewport` caps it at the\n * window's height less a margin; it scrolls inside, the arrows scroll the\n * focused item into view, and scrolling the menu itself does not close it.\n */\n\nimport { modalHost } from './modal.js';\nimport { placeMenuInViewport, moveMenuFocus, focusMenuItem } from '../utils/menu_viewport.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 inside the window, scrolling when taller than it (BUG-0040).\n    placeMenuInViewport(menu, x, y);\n\n    // Close on outside click / scroll / Escape. A scroll INSIDE the menu is\n    // the menu being read, not the page moving under it.\n    setTimeout(() => {\n        document.addEventListener('mousedown', _outsideHandler, { once: true, capture: true });\n    }, 0);\n    document.addEventListener('keydown', _keyHandler);\n    window.addEventListener('scroll', _scrollHandler, { 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    focusMenuItem(_enabledItems(menu)[0]);\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    window.removeEventListener('scroll', _scrollHandler, { capture: true });\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    moveMenuFocus(e, _enabledItems(_activeMenu));\n}\n\nfunction _scrollHandler(e) {\n    if (_activeMenu && e.target?.nodeType && _activeMenu.contains(e.target)) return;\n    hideContextMenu();\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-MIW7D6WC.js

@@ -1,526 +0,0 @@
-// src/ui/base/component_base.js
-var ComponentBase = class _ComponentBase {
-  constructor({ eventBus, logger } = {}) {
-    if (new.target === _ComponentBase) {
-      throw new Error("ComponentBase is abstract \u2013 extend it instead");
-    }
-    this.eventBus = eventBus;
-    this.logger = logger;
-    this._mounted = false;
-  }
-  mount() {
-    throw new Error("ComponentBase.mount must be implemented by subclasses");
-  }
-  update() {
-  }
-  dispose() {
-    this._mounted = false;
-  }
-};
-
-// src/ui/components/action_dropdown.js
-var EDGE_MARGIN = 8;
-var GAP = 8;
-var ActionDropdown = class _ActionDropdown {
-  /**
-   * @param {Object} config
-   * @param {HTMLElement} config.trigger - Button element that triggers the dropdown
-   * @param {Array} config.options - Array of option objects with { type, label, icon, description? },
-   *     or `{ separator: true }` for a divider between them
-   * @param {Function} config.onSelect - Callback when an option is selected
-   * @param {string} [config.className=''] - Additional CSS class for the dropdown
-   * @param {string} [config.menuId] - Optional ID for the menu element
-   */
-  constructor(config) {
-    this.trigger = config.trigger;
-    this.options = config.options || [];
-    this.onSelect = config.onSelect;
-    this.className = config.className || "";
-    this.menuId = config.menuId;
-    this.isOpen = false;
-    this.menuEl = null;
-    this._boundHandleDocumentClick = this._handleDocumentClick.bind(this);
-    this._boundHandleKeydown = this._handleKeydown.bind(this);
-    this._boundHandleTriggerClick = this._handleTriggerClick.bind(this);
-    this._init();
-  }
-  /**
-   * Initialize the dropdown.
-   * @private
-   */
-  _init() {
-    if (!this.trigger) {
-      console.warn("[ActionDropdown] No trigger element provided");
-      return;
-    }
-    this._createMenu();
-    this.trigger.addEventListener("click", this._boundHandleTriggerClick);
-  }
-  /**
-   * Create the dropdown menu element.
-   * @private
-   */
-  _createMenu() {
-    const menu = document.createElement("div");
-    menu.className = `twm-action-dropdown-menu ${this.className}`.trim();
-    menu.setAttribute("role", "menu");
-    menu.hidden = true;
-    if (this.menuId) {
-      menu.id = this.menuId;
-    }
-    this._renderOptions(menu);
-    document.body.appendChild(menu);
-    this.menuEl = menu;
-  }
-  /**
-   * Render option buttons, and dividers for separator entries, into a
-   * container element. `data-index` stays the entry's index in `options`.
-   * @param {HTMLElement} container
-   * @private
-   */
-  _renderOptions(container) {
-    container.innerHTML = "";
-    let pendingSeparator = false;
-    this.options.forEach((opt, index) => {
-      if (opt?.separator) {
-        pendingSeparator = container.childElementCount > 0;
-        return;
-      }
-      if (pendingSeparator) {
-        const sep = document.createElement("div");
-        sep.className = "twm-action-dropdown-separator";
-        sep.setAttribute("role", "separator");
-        container.appendChild(sep);
-        pendingSeparator = false;
-      }
-      const optionBtn = document.createElement("button");
-      optionBtn.type = "button";
-      optionBtn.className = "twm-action-dropdown-option";
-      optionBtn.dataset.index = index;
-      optionBtn.dataset.type = opt.type;
-      optionBtn.setAttribute("role", "menuitem");
-      const iconHtml = opt.icon ? `<span class="material-symbols-outlined twm-option-icon">${opt.icon}</span>` : "";
-      const descHtml = opt.description ? `<span class="twm-option-desc">${opt.description}</span>` : "";
-      optionBtn.innerHTML = `
-                ${iconHtml}
-                <span class="option-text">
-                    <span class="twm-option-label">${opt.label}</span>
-                    ${descHtml}
-                </span>
-            `;
-      optionBtn.addEventListener("click", (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        this._selectOption(opt);
-      });
-      container.appendChild(optionBtn);
-    });
-  }
-  /**
-   * Handle trigger button click.
-   * @param {MouseEvent} e
-   * @private
-   */
-  _handleTriggerClick(e) {
-    e.preventDefault();
-    e.stopPropagation();
-    this.toggle();
-  }
-  /**
-   * Toggle the dropdown open/closed.
-   * @param {boolean} [forceState] - Optional forced state
-   */
-  toggle(forceState) {
-    const shouldOpen = typeof forceState === "boolean" ? forceState : !this.isOpen;
-    if (shouldOpen) {
-      this.open();
-    } else {
-      this.close();
-    }
-  }
-  /**
-   * Open the dropdown with auto-positioning.
-   */
-  open() {
-    if (this.isOpen || !this.menuEl) return;
-    this.isOpen = true;
-    this.menuEl.hidden = false;
-    _ActionDropdown.position(this.trigger, this.menuEl);
-    requestAnimationFrame(() => {
-      this.menuEl?.classList.add("visible");
-    });
-    this.trigger?.classList.add("twm-is-open");
-    if (this.trigger?.hasAttribute("aria-expanded")) {
-      this.trigger.setAttribute("aria-expanded", "true");
-    }
-    document.addEventListener("click", this._boundHandleDocumentClick, true);
-    document.addEventListener("keydown", this._boundHandleKeydown);
-    const firstOption = this.menuEl.querySelector(".twm-action-dropdown-option");
-    firstOption?.focus();
-  }
-  /**
-   * Close the dropdown.
-   */
-  close() {
-    if (!this.isOpen) return;
-    this.isOpen = false;
-    if (this.menuEl) {
-      this.menuEl.classList.remove("visible");
-      this.menuEl.hidden = true;
-    }
-    this.trigger?.classList.remove("twm-is-open");
-    if (this.trigger?.hasAttribute("aria-expanded")) {
-      this.trigger.setAttribute("aria-expanded", "false");
-    }
-    document.removeEventListener("click", this._boundHandleDocumentClick, true);
-    document.removeEventListener("keydown", this._boundHandleKeydown);
-  }
-  /**
-   * Handle document click (close on outside click).
-   * @param {MouseEvent} e
-   * @private
-   */
-  _handleDocumentClick(e) {
-    if (!this.isOpen) return;
-    if (this.menuEl?.contains(e.target) || this.trigger?.contains(e.target)) {
-      return;
-    }
-    this.close();
-  }
-  /**
-   * Handle keyboard events.
-   * @param {KeyboardEvent} e
-   * @private
-   */
-  _handleKeydown(e) {
-    if (e.key === "Escape") {
-      e.preventDefault();
-      e.stopPropagation();
-      this.close();
-      this.trigger?.focus();
-      return;
-    }
-    if (e.key === "ArrowDown" || e.key === "ArrowUp") {
-      e.preventDefault();
-      this._navigateOptions(e.key === "ArrowDown" ? 1 : -1);
-    }
-  }
-  /**
-   * Navigate options with arrow keys.
-   * @param {number} direction - 1 for down, -1 for up
-   * @private
-   */
-  _navigateOptions(direction) {
-    const options = this.menuEl?.querySelectorAll(".twm-action-dropdown-option");
-    if (!options || options.length === 0) return;
-    const currentIndex = Array.from(options).findIndex((opt) => opt === document.activeElement);
-    let nextIndex = currentIndex + direction;
-    if (nextIndex < 0) nextIndex = options.length - 1;
-    if (nextIndex >= options.length) nextIndex = 0;
-    options[nextIndex]?.focus();
-  }
-  /**
-   * Handle option selection.
-   * @param {Object} option - The selected option
-   * @private
-   */
-  _selectOption(option) {
-    this.close();
-    if (this.onSelect) {
-      this.onSelect(option);
-    }
-  }
-  /**
-   * Update the options dynamically.
-   * @param {Array} newOptions - New options array
-   */
-  setOptions(newOptions) {
-    this.options = newOptions;
-    if (this.menuEl) {
-      this._renderOptions(this.menuEl);
-    }
-  }
-  /**
-   * Destroy the dropdown and clean up.
-   */
-  destroy() {
-    this.close();
-    this.trigger?.removeEventListener("click", this._boundHandleTriggerClick);
-    this.menuEl?.remove();
-    this.menuEl = null;
-    this.trigger = null;
-    this.options = [];
-    this.onSelect = null;
-  }
-  // =========================================================================
-  // STATIC — shared auto-positioning for any trigger + menu pair
-  // =========================================================================
-  /**
-   * Position a dropdown menu relative to a trigger element.
-   * Uses `position: fixed` to avoid overflow clipping.
-   * Picks above/below based on available space, aligns left/right edge,
-   * and applies `max-height` + `overflow-y: auto` when the menu is taller
-   * than the available space.
-   *
-   * @param {HTMLElement} trigger - The element the dropdown opens from
-   * @param {HTMLElement} menu - The dropdown menu element to position
-   * @param {Object} [opts]
-   * @param {'start'|'end'} [opts.align='start'] - Which trigger edge the menu
-   *     lines up with first: `'start'` its left edge, `'end'` its right edge.
-   *     Either flips to the other edge when it would leave the window.
-   */
-  static position(trigger, menu, { align = "start" } = {}) {
-    if (!trigger || !menu) return;
-    Object.assign(menu.style, {
-      position: "fixed",
-      top: "auto",
-      bottom: "auto",
-      left: "auto",
-      right: "auto",
-      maxHeight: "",
-      overflowY: ""
-    });
-    const triggerRect = trigger.getBoundingClientRect();
-    const menuRect = menu.getBoundingClientRect();
-    const vw = window.innerWidth;
-    const vh = window.innerHeight;
-    const spaceBelow = vh - triggerRect.bottom - GAP - EDGE_MARGIN;
-    const spaceAbove = triggerRect.top - GAP - EDGE_MARGIN;
-    let top;
-    let maxHeight;
-    if (menuRect.height <= spaceBelow) {
-      top = triggerRect.bottom + GAP;
-      maxHeight = spaceBelow;
-    } else if (menuRect.height <= spaceAbove) {
-      top = triggerRect.top - GAP - menuRect.height;
-      maxHeight = spaceAbove;
-    } else if (spaceBelow >= spaceAbove) {
-      top = triggerRect.bottom + GAP;
-      maxHeight = spaceBelow;
-    } else {
-      maxHeight = spaceAbove;
-      top = EDGE_MARGIN;
-    }
-    let left;
-    if (align === "end") {
-      left = triggerRect.right - menuRect.width;
-      if (left < EDGE_MARGIN) {
-        left = triggerRect.left;
-      }
-    } else {
-      left = triggerRect.left;
-      if (left + menuRect.width > vw - EDGE_MARGIN) {
-        left = triggerRect.right - menuRect.width;
-      }
-    }
-    left = Math.max(EDGE_MARGIN, Math.min(left, vw - menuRect.width - EDGE_MARGIN));
-    Object.assign(menu.style, {
-      position: "fixed",
-      top: `${Math.round(top)}px`,
-      left: `${Math.round(left)}px`,
-      maxHeight: `${Math.round(maxHeight)}px`,
-      overflowY: "auto"
-    });
-  }
-};
-
-// src/ui/components/slide_out_panel.js
-var SlideOutPanel = class extends ComponentBase {
-  /** @type {HTMLElement} */
-  #container = null;
-  /** @type {HTMLElement} */
-  #backdrop = null;
-  /** @type {HTMLElement} */
-  #panel = null;
-  /** @type {HTMLElement} */
-  #headerIcon = null;
-  /** @type {HTMLElement} */
-  #headerTitle = null;
-  /** @type {HTMLElement} */
-  #body = null;
-  /** @type {number} */
-  #width;
-  /** @type {Function|null} */
-  #onClose;
-  /** @type {boolean} */
-  #open = false;
-  /** @type {ResizeObserver|null} */
-  #hostObserver = null;
-  /**
-   * @param {object}   opts
-   * @param {number}   [opts.width=380]  Panel width in px.
-   * @param {Function} [opts.onClose]    Called after the panel closes.
-   */
-  constructor({ width = 700, onClose } = {}) {
-    super();
-    this.#width = width;
-    this.#onClose = onClose ?? null;
-  }
-  // ─── Lifecycle ──────────────────────────────────────────────────────────
-  /**
-   * Mount the panel DOM into a host container.
-   * @param {HTMLElement} container  Must have position:relative; overflow:hidden.
-   */
-  mount(container) {
-    if (this._mounted) return;
-    this.#container = container;
-    this.#backdrop = document.createElement("div");
-    this.#backdrop.className = "twm-slide-out-panel__backdrop";
-    this.#backdrop.addEventListener("click", this.#handleBackdropClick);
-    this.#panel = document.createElement("div");
-    this.#panel.className = "twm-slide-out-panel";
-    this.#panel.style.width = `${this.#width}px`;
-    const header = document.createElement("div");
-    header.className = "twm-slide-out-panel__header";
-    this.#headerIcon = document.createElement("span");
-    this.#headerIcon.className = "twm-slide-out-panel__icon material-symbols-outlined";
-    this.#headerTitle = document.createElement("span");
-    this.#headerTitle.className = "twm-slide-out-panel__title";
-    const closeBtn = document.createElement("button");
-    closeBtn.className = "twm-slide-out-panel__close twm-btn-icon";
-    closeBtn.type = "button";
-    closeBtn.title = "Close";
-    closeBtn.innerHTML = '<span class="material-symbols-outlined">close</span>';
-    closeBtn.addEventListener("click", this.#handleCloseClick);
-    header.append(this.#headerIcon, this.#headerTitle, closeBtn);
-    this.#body = document.createElement("div");
-    this.#body.className = "twm-slide-out-panel__body";
-    this.#panel.append(header, this.#body);
-    this.#container.append(this.#backdrop, this.#panel);
-    this._mounted = true;
-  }
-  dispose() {
-    this.close();
-    this.#backdrop?.remove();
-    this.#panel?.remove();
-    this.#backdrop = null;
-    this.#panel = null;
-    this.#body = null;
-    this.#container = null;
-    super.dispose();
-  }
-  // ─── Public API ─────────────────────────────────────────────────────────
-  /** The inner content element — callers render config into this. */
-  get contentEl() {
-    return this.#body;
-  }
-  get isOpen() {
-    return this.#open;
-  }
-  /**
-   * Open (or re-open) the panel with a new title/icon.
-   * Clears previous content. Returns contentEl for rendering.
-   * @param {string} title
-   * @param {string} icon  Material Symbols icon name.
-   * @returns {HTMLElement} contentEl
-   */
-  open(title, icon) {
-    if (!this._mounted) return null;
-    this.#body.innerHTML = "";
-    this.#headerIcon.textContent = icon || "";
-    this.#headerIcon.style.display = icon ? "" : "none";
-    this.#headerTitle.textContent = title || "";
-    if (!this.#open) {
-      this.#open = true;
-      this.#backdrop.classList.add("twm-slide-out-panel__backdrop--visible");
-      this.#panel.classList.add("twm-slide-out-panel--open");
-      document.addEventListener("keydown", this.#handleEsc);
-      this.#trackGeometry();
-      window.addEventListener("scroll", this.#trackGeometry, true);
-      window.addEventListener("resize", this.#trackGeometry);
-      this.#observeHost();
-    }
-    return this.#body;
-  }
-  /** Close the panel and clear content. */
-  close() {
-    if (!this.#open) return;
-    this.#open = false;
-    this.#panel.classList.remove("twm-slide-out-panel--open");
-    this.#backdrop.classList.remove("twm-slide-out-panel__backdrop--visible");
-    document.removeEventListener("keydown", this.#handleEsc);
-    window.removeEventListener("scroll", this.#trackGeometry, true);
-    window.removeEventListener("resize", this.#trackGeometry);
-    this.#hostObserver?.disconnect();
-    this.#hostObserver = null;
-    this.#body.innerHTML = "";
-    this.#onClose?.();
-  }
-  // ─── Event handlers (arrow fns for stable `this`) ───────────────────────
-  #handleBackdropClick = () => {
-    this.close();
-  };
-  #handleCloseClick = () => {
-    this.close();
-  };
-  #handleEsc = (e) => {
-    if (e.key === "Escape") {
-      e.stopPropagation();
-      this.close();
-    }
-  };
-  /** The host moves or resizes without any window event when a tile
-   *  splitter is dragged or a dock panel toggles, and the fixed geometry
-   *  would then stay at the old coordinates. Observe the host AND each
-   *  ancestor: a host can move without changing size of its own (a dock
-   *  panel toggling beside a fixed-width tile shrinks the content area,
-   *  an ancestor, and the tile only shifts). The callback runs
-   *  synchronously, after layout and before paint, so the panel follows
-   *  a drag without a frame of lag; it only writes the panel's own
-   *  `position: fixed` geometry, which is out of flow and resizes
-   *  nothing observed, so it cannot loop. */
-  #observeHost() {
-    this.#hostObserver = new ResizeObserver(this.#trackGeometry);
-    for (let el = this.#container; el; el = el.parentElement) {
-      this.#hostObserver.observe(el);
-    }
-  }
-  /** Pin the panel to the right edge of its host's *visible* frame
-   *  using `position: fixed`. Re-run on every window scroll/resize and
-   *  every host resize (#observeHost) so the panel always overlays the
-   *  host correctly even when the host itself sits inside a scrolled
-   *  ancestor.
-   *
-   *  UNDER A CSS `zoom` (the shell's content zoom scales a tile body),
-   *  `getBoundingClientRect()` answers in screen pixels, which already
-   *  carry the zoom, while the panel's own `top`/`left`/`height` are
-   *  CSS pixels that the same zoom multiplies again. Copied across
-   *  unchanged, every length was scaled twice: at 150% the panel landed
-   *  right of and below its host, at 50% it was half the host's height.
-   *  So the rect is divided by the panel's effective zoom
-   *  (`currentCSSZoom`: 1 when nothing above it zooms, `undefined` in an
-   *  engine that predates it), and the width subtracted is the panel's
-   *  laid-out one, which `min-width` may hold above the requested
-   *  width. Rounding happens in screen pixels, so at 100% the output is
-   *  exactly what it always was.
-   *
-   *  NEVER WIDER THAN THE HOST (BUG-0035). The right edge is pinned, so a
-   *  panel wider than its host (700px by default, `min-width: 400px`)
-   *  reached past the host's left edge across the neighbouring pane. The
-   *  host's width, in the panel's CSS pixels, goes on the panel as
-   *  `--twm-slide-out-host-w`, which the stylesheet uses as `max-width`
-   *  and as the ceiling of the 400px `min-width`; it is set BEFORE the
-   *  width is read so the read sees the capped layout, and the width is
-   *  capped here too for an engine that lays nothing out. */
-  #trackGeometry = () => {
-    if (!this.#open || !this.#panel || !this.#container) return;
-    const r = this.#container.getBoundingClientRect();
-    const zoom = this.#panel.currentCSSZoom || 1;
-    const hostWidth = r.width / zoom;
-    const s = this.#panel.style;
-    s.setProperty("--twm-slide-out-host-w", `${hostWidth}px`);
-    const width = Math.min(this.#panel.offsetWidth || this.#width, hostWidth);
-    s.position = "fixed";
-    s.top = `${Math.round(r.top) / zoom}px`;
-    s.left = `${Math.round(r.right - width * zoom) / zoom}px`;
-    s.right = "auto";
-    s.height = `${Math.round(r.height) / zoom}px`;
-  };
-};
-
-export {
-  ComponentBase,
-  ActionDropdown,
-  SlideOutPanel
-};
-//# sourceMappingURL=chunk-MIW7D6WC.js.map