flexdesk 0.17.0 → 0.17.1

package/dist/chunk-QWQJUDPD.js

@@ -1,610 +0,0 @@
-// src/ui/components/autocomplete_field.js
-var AutocompleteField = class {
-  constructor({
-    fieldId,
-    field = {},
-    provider = null,
-    onChange = null,
-    logger = null,
-    namespace = null,
-    namespaceOptions = [],
-    showNamespaceSelect = false,
-    variant = null,
-    showNamespaceChip = false,
-    allowScopeToggle = false,
-    namespaceLabel = null,
-    scopeMode = "current",
-    skipNamespacePrefix = false,
-    // Material symbol per completion type, merged over the generic set. The
-    // framework's map used to include `sector: 'domain'` — an EcoAgent
-    // completion type — so the widget knew one application's ontology.
-    typeIcons = {}
-  } = {}) {
-    if (!fieldId) {
-      throw new Error("AutocompleteField requires a fieldId");
-    }
-    this.fieldId = fieldId;
-    this.field = field;
-    this.provider = typeof provider === "function" ? provider : () => [];
-    this.onChange = typeof onChange === "function" ? onChange : null;
-    this.logger = logger;
-    this.typeIcons = typeIcons ?? {};
-    this.namespace = namespace;
-    this.namespaceOptions = Array.isArray(namespaceOptions) ? [...namespaceOptions] : [];
-    if (this.namespace && !this.namespaceOptions.some((opt) => opt.value === this.namespace)) {
-      const fallbackLabel = this.field.namespaceLabel || "This Tab";
-      this.namespaceOptions.push({ value: this.namespace, label: fallbackLabel, token: fallbackLabel });
-    }
-    this.showNamespaceSelect = Boolean(showNamespaceSelect);
-    this.variant = variant;
-    this.showNamespaceChip = Boolean(showNamespaceChip);
-    this.allowScopeToggle = Boolean(allowScopeToggle);
-    this.namespaceLabel = namespaceLabel;
-    this.scope = scopeMode === "all" ? "all" : "current";
-    this.skipNamespacePrefix = Boolean(skipNamespacePrefix);
-    this.disabled = Boolean(field.disabled);
-    const parsed = this.#parseInitialNamespace(field.value ?? "");
-    this.selectedNamespace = parsed.initialNamespace;
-    this.initialFragment = parsed.initialFragment;
-    this._lastDropdownRect = null;
-    this.root = null;
-    this.input = null;
-    this.dropdown = null;
-    this.helperEl = null;
-    this.scopeControl = null;
-    this.namespaceSelect = null;
-    this.ghost = null;
-    this._items = [];
-    this._activeIndex = -1;
-    this._isOpen = false;
-    this._disposers = [];
-    this._suggestSeq = 0;
-  }
-  getValue() {
-    return this.#composeValue();
-  }
-  setComposedValue(value) {
-    if (!this.input) return;
-    const safeValue = typeof value === "string" ? value : "";
-    if (this.skipNamespacePrefix) {
-      this.input.value = safeValue;
-      this.initialFragment = safeValue;
-      this.#renderGhost();
-      this.#close();
-      return;
-    }
-    const parsed = this.#parseInitialNamespace(safeValue);
-    this.selectedNamespace = parsed.initialNamespace;
-    this.initialFragment = parsed.initialFragment;
-    if (this.namespaceSelect) {
-      this.namespaceSelect.value = this.selectedNamespace;
-    }
-    this.#updateNamespaceChip();
-    this.input.value = parsed.initialFragment;
-    this.#renderGhost();
-    this.#close();
-  }
-  #parseInitialNamespace(rawValue) {
-    const value = typeof rawValue === "string" ? rawValue.trim() : "";
-    const options = this.namespaceOptions;
-    const defaultNs = this.namespace ? options.find((opt) => opt.value === this.namespace)?.value ?? this.namespace : options[0]?.value ?? "__ALL__";
-    if (!options.length) {
-      return { initialNamespace: defaultNs, initialFragment: value };
-    }
-    if (!value) {
-      return { initialNamespace: defaultNs, initialFragment: "" };
-    }
-    const dotIndex = value.indexOf(".");
-    if (dotIndex > 0) {
-      const nsCandidate = value.slice(0, dotIndex);
-      const match = options.find(
-        (opt) => (opt.value || "").toLowerCase() === nsCandidate.toLowerCase() || (opt.label || "").toLowerCase() === nsCandidate.toLowerCase()
-      );
-      if (match) {
-        return { initialNamespace: match.value, initialFragment: value.slice(dotIndex + 1) };
-      }
-    }
-    return { initialNamespace: defaultNs, initialFragment: value };
-  }
-  #resolveNamespaceLabel() {
-    if (this.scope === "all") {
-      return "All Namespaces";
-    }
-    if (typeof this.namespaceLabel === "string" && this.namespaceLabel.trim()) {
-      return this.namespaceLabel.trim();
-    }
-    if (typeof this.field.namespaceLabel === "string" && this.field.namespaceLabel.trim()) {
-      return this.field.namespaceLabel.trim();
-    }
-    if (typeof this.namespace === "string" && this.namespace.trim()) {
-      return this.namespace.trim();
-    }
-    return "This Tab";
-  }
-  #toggleScope() {
-    if (this.disabled) return;
-    this.scope = this.scope === "all" ? "current" : "all";
-    this.root?.classList?.toggle("twm-autocomplete-field--scope-all", this.scope === "all");
-    this.#updateNamespaceChip();
-    this.#updateSuggestions();
-  }
-  #updateNamespaceChip() {
-    if (!this.scopeControl) return;
-    this.scopeControl.textContent = this.#resolveNamespaceLabel();
-    this.scopeControl.dataset.scope = this.scope;
-    this.scopeControl.title = this.scope === "all" ? "Searching across all namespaces (click to limit to this tab)" : "Searching this tab (click to search all namespaces)";
-  }
-  render() {
-    if (this.root) {
-      return this.root;
-    }
-    this.root = document.createElement("div");
-    this.root.className = "twm-autocomplete-field";
-    if (this.variant) {
-      this.root.classList.add(`twm-autocomplete-field--${this.variant}`);
-    }
-    this.root.classList.toggle("twm-autocomplete-field--scope-all", this.scope === "all");
-    const inputWrapper = document.createElement("div");
-    inputWrapper.className = "twm-autocomplete-field__input-wrapper";
-    if (this.showNamespaceSelect && this.namespaceOptions.length) {
-      const select = document.createElement("select");
-      select.className = "twm-autocomplete-field__namespace-select";
-      this.namespaceOptions.forEach((opt) => {
-        const option = document.createElement("option");
-        option.value = opt.value;
-        option.textContent = opt.label ?? opt.value;
-        if (opt.value === this.selectedNamespace) {
-          option.selected = true;
-        }
-        select.appendChild(option);
-      });
-      this.namespaceSelect = select;
-      inputWrapper.appendChild(select);
-    }
-    if (this.showNamespaceChip) {
-      const nsChip = document.createElement(this.allowScopeToggle ? "button" : "span");
-      nsChip.className = "twm-autocomplete-field__namespace";
-      if (this.allowScopeToggle) {
-        nsChip.setAttribute("type", "button");
-      }
-      if (this.allowScopeToggle) {
-        nsChip.classList.add("twm-autocomplete-field__namespace--toggle");
-        nsChip.addEventListener("click", () => this.#toggleScope());
-      }
-      this.scopeControl = nsChip;
-      this.#updateNamespaceChip();
-      inputWrapper.appendChild(nsChip);
-    }
-    this.input = document.createElement("input");
-    this.input.type = "text";
-    this.input.className = "twm-autocomplete-field__input";
-    this.input.id = this.fieldId;
-    this.input.autocomplete = "off";
-    this.input.spellcheck = false;
-    if (this.field.placeholder) {
-      this.input.placeholder = this.field.placeholder;
-    }
-    if (this.field.value != null) {
-      this.input.value = this.initialFragment;
-    }
-    if (this.disabled) {
-      this.input.disabled = true;
-      this.root.classList.add("twm-autocomplete-field--disabled");
-    }
-    inputWrapper.appendChild(this.input);
-    this.ghost = null;
-    this.dropdown = document.createElement("div");
-    this.dropdown.className = "twm-autocomplete-field__dropdown";
-    this.dropdown.setAttribute("role", "listbox");
-    document.body.appendChild(this.dropdown);
-    this.helperEl = document.createElement("div");
-    this.helperEl.className = "twm-autocomplete-field__helper twm-config-hint";
-    if (this.field.helperText) {
-      this.helperEl.textContent = this.field.helperText;
-    }
-    this.root.appendChild(inputWrapper);
-    this.root.appendChild(this.helperEl);
-    this.#wireEvents();
-    this.#renderGhost();
-    return this.root;
-  }
-  #wireEvents() {
-    const onInput = () => {
-      if (this.disabled) return;
-      this.#syncNamespaceFromInput();
-      this.#renderGhost();
-      this.#updateSuggestions();
-    };
-    const onChange = () => {
-      this.onChange?.(this.#composeValue(), { immediate: false, namespace: this.selectedNamespace });
-    };
-    const onPaste = () => {
-    };
-    const onKeyDown = (e) => {
-      if (this.disabled) return;
-      this.#handleKeyDown(e);
-    };
-    const onFocus = () => {
-      if (this.disabled) return;
-      this.#updateSuggestions();
-    };
-    const onBlur = (e) => {
-      setTimeout(() => {
-        if (!this.root?.contains(document.activeElement)) {
-          this.#close();
-          this.onChange?.(this.#composeValue(), { immediate: false, namespace: this.selectedNamespace });
-        }
-      }, 150);
-    };
-    const onDropdownMouseDown = (e) => {
-      e.preventDefault();
-    };
-    const onDropdownClick = (e) => {
-      const item = e.target.closest(".twm-autocomplete-field__item");
-      if (item) {
-        const index = parseInt(item.dataset.index, 10);
-        if (!isNaN(index)) {
-          this.#selectItem(index);
-        }
-      }
-    };
-    this.input.addEventListener("input", onInput);
-    this.input.addEventListener("change", onChange);
-    this.input.addEventListener("paste", onPaste);
-    this.input.addEventListener("keydown", onKeyDown);
-    this.input.addEventListener("focus", onFocus);
-    this.input.addEventListener("blur", onBlur);
-    this.dropdown.addEventListener("mousedown", onDropdownMouseDown);
-    this.dropdown.addEventListener("click", onDropdownClick);
-    if (this.namespaceSelect) {
-      const onSelectChange = () => {
-        this.selectedNamespace = this.namespaceSelect.value;
-        this.#updateSuggestions();
-        this.onChange?.(this.#composeValue(), {
-          immediate: false,
-          namespace: this.selectedNamespace,
-          viewNamespace: this.selectedNamespace
-        });
-      };
-      this.namespaceSelect.addEventListener("change", onSelectChange);
-      this._disposers.push(() => this.namespaceSelect.removeEventListener("change", onSelectChange));
-    }
-    const onWindowResize = () => {
-      if (this._isOpen) {
-        this.#positionDropdown();
-      }
-    };
-    window.addEventListener("resize", onWindowResize);
-    const onScroll = (e) => {
-      if (!this._isOpen) return;
-      if (this.dropdown?.contains(e.target)) return;
-      this.#close();
-    };
-    document.addEventListener("scroll", onScroll, true);
-    this._disposers.push(() => {
-      document.removeEventListener("scroll", onScroll, true);
-    });
-    const onDocumentClick = (e) => {
-      if (!this._isOpen) return;
-      const clickedInRoot = this.root?.contains(e.target);
-      const clickedInDropdown = this.dropdown?.contains(e.target);
-      if (!clickedInRoot && !clickedInDropdown) {
-        this.#close();
-      }
-    };
-    document.addEventListener("click", onDocumentClick, true);
-    this._disposers.push(() => {
-      window.removeEventListener("resize", onWindowResize);
-    });
-    this._disposers.push(() => {
-      document.removeEventListener("click", onDocumentClick, true);
-    });
-    this._disposers.push(() => {
-      this.input.removeEventListener("input", onInput);
-      this.input.removeEventListener("change", onChange);
-      this.input.removeEventListener("paste", onPaste);
-      this.input.removeEventListener("keydown", onKeyDown);
-      this.input.removeEventListener("focus", onFocus);
-      this.input.removeEventListener("blur", onBlur);
-      this.dropdown.removeEventListener("mousedown", onDropdownMouseDown);
-      this.dropdown.removeEventListener("click", onDropdownClick);
-    });
-  }
-  #handleKeyDown(e) {
-    if (!this._isOpen) {
-      if (e.key === "ArrowDown" || e.key === "ArrowUp") {
-        this.#updateSuggestions();
-        e.preventDefault();
-      }
-      return;
-    }
-    switch (e.key) {
-      case "ArrowDown":
-        e.preventDefault();
-        this.#moveSelection(1);
-        break;
-      case "ArrowUp":
-        e.preventDefault();
-        this.#moveSelection(-1);
-        break;
-      case "Enter":
-        e.preventDefault();
-        if (this._activeIndex >= 0) {
-          this.#selectItem(this._activeIndex);
-        }
-        this.input?.blur();
-        break;
-      case "Tab":
-        if (this._activeIndex >= 0) {
-          e.preventDefault();
-          this.#selectItem(this._activeIndex);
-        }
-        break;
-      case "Escape":
-        e.preventDefault();
-        this.#close();
-        break;
-    }
-  }
-  #updateSuggestions() {
-    const fragment = this.#getInputFragment();
-    const request = ++this._suggestSeq;
-    let produced;
-    try {
-      produced = this.provider({
-        value: fragment,
-        scope: this.scope,
-        namespace: this.selectedNamespace
-      });
-    } catch (err) {
-      this.logger?.warn?.("autocomplete", "Provider error", { err });
-      this._items = [];
-      this.#close();
-      return;
-    }
-    if (produced && typeof produced.then === "function") {
-      produced.then(
-        (items) => {
-          if (request !== this._suggestSeq) return;
-          this.#applySuggestions(items);
-        },
-        (err) => {
-          this.logger?.warn?.("autocomplete", "Provider error", { err });
-          if (request !== this._suggestSeq) return;
-          this._items = [];
-          this.#close();
-        }
-      );
-      return;
-    }
-    this.#applySuggestions(produced);
-  }
-  /** Draw whatever the provider produced. Split out of `#updateSuggestions`
-   *  so the synchronous and the awaited paths cannot drift apart. */
-  #applySuggestions(produced) {
-    const items = Array.isArray(produced) ? produced : [];
-    this._items = items;
-    this._activeIndex = items.length > 0 ? 0 : -1;
-    this.#renderDropdown();
-    if (items.length > 0) {
-      this.#open();
-    } else {
-      this.#close();
-    }
-  }
-  #renderDropdown() {
-    this.dropdown.innerHTML = "";
-    const showingAll = this.selectedNamespace === "__ALL__";
-    this._items.forEach((item, index) => {
-      const el = document.createElement("div");
-      el.className = "twm-autocomplete-field__item";
-      el.setAttribute("role", "option");
-      el.dataset.index = index;
-      el.dataset.type = item.type || item.iconType || "variable";
-      if (index === this._activeIndex) {
-        el.classList.add("active");
-      }
-      const icon = document.createElement("span");
-      icon.className = "twm-autocomplete-field__icon material-symbols-outlined";
-      icon.textContent = this.#getIconForType(item.type || item.iconType);
-      el.appendChild(icon);
-      const label = document.createElement("span");
-      label.className = "twm-autocomplete-field__label";
-      label.textContent = item.label || item.insertText || "";
-      el.appendChild(label);
-      if (showingAll && item.metadata?.namespaceId) {
-        const nsLabel = this.#resolveNamespaceToken(item.metadata.namespaceId);
-        if (nsLabel) {
-          const nsIndicator = document.createElement("span");
-          nsIndicator.className = "twm-autocomplete-field__namespace-indicator";
-          nsIndicator.textContent = nsLabel;
-          el.appendChild(nsIndicator);
-        }
-      }
-      if (item.type && !showingAll) {
-        const badge = document.createElement("span");
-        badge.className = "twm-autocomplete-field__badge";
-        badge.textContent = item.type;
-        el.appendChild(badge);
-      }
-      this.dropdown.appendChild(el);
-    });
-    if (this._isOpen) {
-      this.#positionDropdown();
-    }
-  }
-  #resolveNamespaceToken(namespaceId) {
-    if (!namespaceId) return null;
-    const opt = this.namespaceOptions.find((o) => o.value === namespaceId);
-    return opt?.token || opt?.label || null;
-  }
-  #getIconForType(type) {
-    const icons = {
-      variable: "functions",
-      "variable-qualified": "link",
-      stock: "account_balance",
-      account: "savings",
-      function: "code",
-      constant: "numbers",
-      operator: "calculate",
-      snippet: "content_paste",
-      ...this.typeIcons
-    };
-    return icons[type] || "label";
-  }
-  #moveSelection(delta) {
-    if (this._items.length === 0) return;
-    let newIndex = this._activeIndex + delta;
-    if (newIndex < 0) newIndex = this._items.length - 1;
-    if (newIndex >= this._items.length) newIndex = 0;
-    this._activeIndex = newIndex;
-    this.#renderDropdown();
-    this.#scrollToActive();
-  }
-  #scrollToActive() {
-    const activeEl = this.dropdown.querySelector(".twm-autocomplete-field__item.active");
-    if (activeEl) {
-      activeEl.scrollIntoView({ block: "nearest", behavior: "smooth" });
-    }
-  }
-  #selectItem(index) {
-    const item = this._items[index];
-    if (!item) return;
-    const itemNamespace = item.metadata?.namespaceId || null;
-    const insertText = item.insertText || item.label || "";
-    this.input.value = insertText;
-    const viewNamespace = this.selectedNamespace;
-    const resolvedNamespace = viewNamespace === "__ALL__" && itemNamespace ? itemNamespace : viewNamespace;
-    this.#close();
-    this.input.focus();
-    this.onChange?.(this.#composeValue(), {
-      immediate: true,
-      namespace: resolvedNamespace,
-      viewNamespace,
-      metadata: item.metadata || null
-    });
-  }
-  #open() {
-    if (this._isOpen) {
-      return;
-    }
-    this._isOpen = true;
-    this.#positionDropdown();
-    this.dropdown.classList.add("visible");
-  }
-  #close() {
-    if (!this._isOpen) return;
-    this._isOpen = false;
-    this.dropdown.classList.remove("visible");
-    this._activeIndex = -1;
-  }
-  #syncNamespaceFromInput() {
-    if (!this.namespaceOptions.length) return;
-    const value = this.input?.value || "";
-    const dotIndex = value.indexOf(".");
-    if (dotIndex > 0) {
-      const nsCandidate = value.slice(0, dotIndex);
-      const match = this.namespaceOptions.find(
-        (opt) => opt.value !== "__ALL__" && ((opt.value || "").toLowerCase() === nsCandidate.toLowerCase() || (opt.label || "").toLowerCase() === nsCandidate.toLowerCase() || (opt.token || "").toLowerCase() === nsCandidate.toLowerCase())
-      );
-      if (match && this.namespaceSelect && this.namespaceSelect.value !== match.value) {
-        this.namespaceSelect.value = match.value;
-        this.selectedNamespace = match.value;
-      }
-    }
-  }
-  #getInputFragment() {
-    const value = this.input?.value || "";
-    const dotIndex = value.indexOf(".");
-    if (dotIndex > 0) {
-      const nsCandidate = value.slice(0, dotIndex);
-      const match = this.namespaceOptions.find(
-        (opt) => opt.value !== "__ALL__" && ((opt.value || "").toLowerCase() === nsCandidate.toLowerCase() || (opt.label || "").toLowerCase() === nsCandidate.toLowerCase())
-      );
-      if (match) {
-        return value.slice(dotIndex + 1);
-      }
-    }
-    return value;
-  }
-  #composeValue() {
-    const rawInput = this.input?.value || "";
-    if (!rawInput) return "";
-    if (this.skipNamespacePrefix) {
-      return rawInput;
-    }
-    const dotIndex = rawInput.indexOf(".");
-    if (dotIndex > 0) {
-      const nsCandidate = rawInput.slice(0, dotIndex);
-      const match = this.namespaceOptions.find(
-        (opt) => opt.value !== "__ALL__" && ((opt.value || "").toLowerCase() === nsCandidate.toLowerCase() || (opt.label || "").toLowerCase() === nsCandidate.toLowerCase())
-      );
-      if (match) {
-        return rawInput;
-      }
-    }
-    const ns = this.selectedNamespace;
-    if (!ns || ns === "__ALL__") {
-      return rawInput;
-    }
-    const nsOption = this.namespaceOptions.find(
-      (opt) => opt.value === ns || (opt.value || "").toLowerCase() === (ns || "").toLowerCase()
-    );
-    const nsToken = nsOption?.token || nsOption?.label || "";
-    const uuidPattern = /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i;
-    if (ns === "__ALL__" || (nsToken || "").toUpperCase() === "__ALL__") {
-      return rawInput;
-    }
-    if (!nsToken || uuidPattern.test(nsToken)) {
-      return rawInput;
-    }
-    return `${nsToken}.${rawInput}`;
-  }
-  #renderGhost() {
-    if (this.ghost) {
-      this.ghost.style.display = "none";
-    }
-  }
-  #positionDropdown() {
-    if (!this.dropdown || !this.root) return;
-    const wrapper = this.root.querySelector(".twm-autocomplete-field__input-wrapper");
-    if (!wrapper) return;
-    const rect = wrapper.getBoundingClientRect();
-    this._lastDropdownRect = rect;
-    const viewportWidth = document.documentElement.clientWidth || window.innerWidth;
-    const viewportHeight = document.documentElement.clientHeight || window.innerHeight;
-    const width = Math.min(rect.width, viewportWidth - rect.left - 8);
-    const maxHeight = Math.max(120, viewportHeight - rect.bottom - 12);
-    Object.assign(this.dropdown.style, {
-      position: "fixed",
-      top: `${rect.bottom}px`,
-      left: `${rect.left}px`,
-      width: `${width}px`,
-      maxWidth: `${width}px`,
-      maxHeight: `${maxHeight}px`
-    });
-  }
-  dispose() {
-    this._suggestSeq += 1;
-    this.#close();
-    this._disposers.forEach((fn) => {
-      try {
-        fn();
-      } catch (e) {
-      }
-    });
-    this._disposers = [];
-    if (this.dropdown && this.dropdown.parentNode) {
-      this.dropdown.parentNode.removeChild(this.dropdown);
-    }
-    this.root = null;
-    this.input = null;
-    this.dropdown = null;
-    this.helperEl = null;
-  }
-};
-
-export {
-  AutocompleteField
-};
-//# sourceMappingURL=chunk-QWQJUDPD.js.map