flexdesk 0.17.18 → 0.18.1

package/dist/{chunk-PGZ4EHSE.js → chunk-HL3IIHU3.js}

@@ -1,3 +1,11 @@
+import {
+  choiceSections,
+  collectFocusable,
+  filterSections,
+  isInAnchoredLayer,
+  openAnchoredLayer,
+  shownValue
+} from "./chunk-Q7BALEPX.js";
 import {
   getSetting
 } from "./chunk-HNU6MM2B.js";
@@ -21,23 +29,6 @@ var DEFAULT_ICON = "web_asset";
 var _zIndexCounter = 0;
 var _activeWindows = /* @__PURE__ */ new Map();
 var _escAnswered = /* @__PURE__ */ new WeakSet();
-function _collectFocusable(root) {
-  if (!root) return [];
-  const sel = [
-    "a[href]",
-    "button:not([disabled])",
-    'input:not([disabled]):not([type="hidden"])',
-    "select:not([disabled])",
-    "textarea:not([disabled])",
-    '[tabindex]:not([tabindex="-1"])'
-  ].join(",");
-  return Array.from(root.querySelectorAll(sel)).filter((el2) => {
-    if (el2.hidden) return false;
-    if (el2.closest("[hidden]")) return false;
-    const r = el2.getBoundingClientRect();
-    return r.width > 0 || r.height > 0;
-  });
-}
 var _stateCache = null;
 function _loadState() {
   if (_stateCache) return _stateCache;
@@ -93,14 +84,14 @@ function _focusFirstIn(root) {
     '[contenteditable="true"]',
     '[tabindex]:not([tabindex="-1"])'
   ].join(",");
-  for (const el2 of root.querySelectorAll(sel)) {
-    if (el2.hidden || el2.closest("[hidden]")) continue;
+  for (const el of root.querySelectorAll(sel)) {
+    if (el.hidden || el.closest("[hidden]")) continue;
     try {
-      el2.focus({ preventScroll: true });
+      el.focus({ preventScroll: true });
     } catch {
       continue;
     }
-    if (el2.ownerDocument.activeElement === el2) return true;
+    if (el.ownerDocument.activeElement === el) return true;
   }
   return false;
 }
@@ -327,11 +318,15 @@ var ManagedWindow = class {
     this._clearTargetProperties();
     document.removeEventListener("keydown", this._boundOnKeyDown);
     this._teardownContainerResizeObserver();
-    window.dispatchEvent(new CustomEvent("managed-window-closed", {
-      detail: { id: this.id, container: this.container }
-    }));
+    this._announce("managed-window-closed", { id: this.id, container: this.container });
     this._release();
   }
+  /** Every window event goes out on the page's window, and a window takes only
+   *  an event built by its own `CustomEvent`: Node's global one is refused
+   *  under jsdom, in the middle of the close that fired it. */
+  _announce(name, detail) {
+    window.dispatchEvent(new window.CustomEvent(name, { detail }));
+  }
   /** BUG-0053. A closed window leaves the registry and lets go of what it
    *  held: its content, its DOM and every consumer callback (an `onClose`
    *  typically captures its owner). Until now the registry kept all of it
@@ -376,14 +371,12 @@ var ManagedWindow = class {
     if (this.backdropElement) {
       this.backdropElement.style.display = "none";
     }
-    window.dispatchEvent(new CustomEvent("managed-window-minimized", {
-      detail: {
-        id: this.id,
-        title: this.title,
-        icon: this.icon,
-        container: this.container
-      }
-    }));
+    this._announce("managed-window-minimized", {
+      id: this.id,
+      title: this.title,
+      icon: this.icon,
+      container: this.container
+    });
     if (!this.element) return;
     this._cancelRestoreAnimation();
     if (!getSetting("window.animateMinimize", true)) {
@@ -484,9 +477,7 @@ var ManagedWindow = class {
     }
     this.isMinimized = false;
     this.bringToFront();
-    window.dispatchEvent(new CustomEvent("managed-window-restored", {
-      detail: { id: this.id, container: this.container }
-    }));
+    this._announce("managed-window-restored", { id: this.id, container: this.container });
   }
   /**
    * Toggle maximize state.
@@ -547,9 +538,7 @@ var ManagedWindow = class {
     this.element?.classList.toggle("twm-managed-window--maximized", this.isMaximized);
     this._applyPosition();
     this._saveCurrentState();
-    window.dispatchEvent(new CustomEvent("managed-window-maximized", {
-      detail: { id: this.id, maximized: this.isMaximized, container: this.container }
-    }));
+    this._announce("managed-window-maximized", { id: this.id, maximized: this.isMaximized, container: this.container });
   }
   /**
    * Find the taskbar button for this window.
@@ -864,9 +853,7 @@ var ManagedWindow = class {
       this.height = bounds.height;
     }
     this._applyPosition();
-    window.dispatchEvent(new CustomEvent("managed-window-moved", {
-      detail: { id: this.id, container }
-    }));
+    this._announce("managed-window-moved", { id: this.id, container });
     return true;
   }
   /** R1/R3. The container this drag started in, or null when the drag did
@@ -1243,9 +1230,7 @@ var ManagedWindow = class {
     this.height = rect.height;
     this._applyPosition();
     this.element?.classList.add("twm-managed-window--snapped");
-    window.dispatchEvent(new CustomEvent("managed-window-snapped", {
-      detail: { id: this.id, zone, container: this.container }
-    }));
+    this._announce("managed-window-snapped", { id: this.id, zone, container: this.container });
   }
   /** Restore the geometry a snap replaced. Called when a snapped window is
    *  picked up again, which is the gesture that means "un-snap". */
@@ -1329,7 +1314,8 @@ var ManagedWindow = class {
     }
     if (topWindow !== this) return;
     if (e.key === "Tab" && this.modal && this.element) {
-      const focusables = _collectFocusable(this.element);
+      if (isInAnchoredLayer(document.activeElement)) return;
+      const focusables = collectFocusable(this.element);
       if (focusables.length === 0) {
         e.preventDefault();
         return;
@@ -1551,6 +1537,12 @@ var ToggleField = class {
   }
 };
 
+// src/ui/utils/fire_event.js
+function fireEvent(target, type, init) {
+  const view = target.ownerDocument.defaultView;
+  target.dispatchEvent(new view.CustomEvent(type, init));
+}
+
 // src/ui/components/color_field.js
 var HEX_RE = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i;
 var RGB_RE = /^rgba?\(\s*([^)]*)\)$/i;
@@ -1691,15 +1683,15 @@ var ColorField = class {
     this.swatch = null;
     this.hex = null;
   }
-  #listen(el2, type, fn) {
-    el2.addEventListener(type, fn);
-    this._disposers.push(() => el2.removeEventListener(type, fn));
+  #listen(el, type, fn) {
+    el.addEventListener(type, fn);
+    this._disposers.push(() => el.removeEventListener(type, fn));
   }
   /** Put `text` in the box and fire the box's own events, as typing would. */
   #writeBox(text, commit) {
     this.hex.value = text;
-    this.hex.dispatchEvent(new Event("input", { bubbles: true }));
-    if (commit) this.hex.dispatchEvent(new Event("change", { bubbles: true }));
+    fireEvent(this.hex, "input", { bubbles: true });
+    if (commit) fireEvent(this.hex, "change", { bubbles: true });
   }
   /** Swatch and invalid mark follow the box; `commit === null` is silent. */
   #sync(commit) {
@@ -1710,332 +1702,488 @@ var ColorField = class {
   }
 };
 
-// src/ui/components/choice_controls.js
-var shownValue = (v) => v === void 0 ? "" : typeof v === "string" ? v : JSON.stringify(v);
-function el(tag, className, text) {
+// src/ui/components/option_list.js
+var SEQ = 0;
+function node(tag, className, text) {
   const n = document.createElement(tag);
   if (className) n.className = className;
   if (text !== void 0 && text !== null) n.textContent = String(text);
   return n;
 }
-var isGroup = (o) => o !== null && typeof o === "object" && Array.isArray(o.options) && "group" in o;
-function choiceOption(o) {
-  if (o === null || typeof o !== "object") {
-    return { value: o, label: shownValue(o), description: null, disabled: false, reason: null };
-  }
+function marked(target, text, needle) {
+  const at = needle ? text.toLowerCase().indexOf(needle.toLowerCase()) : -1;
+  if (at < 0) {
+    target.textContent = text;
+    return;
+  }
+  target.append(
+    text.slice(0, at),
+    node("mark", "twm-option-list__match", text.slice(at, at + needle.length)),
+    text.slice(at + needle.length)
+  );
+}
+function createOptionList({ onPick, onActive = null }) {
+  const id = `twm-option-list-${++SEQ}`;
+  const el = node("div", "twm-option-list");
+  el.id = id;
+  el.setAttribute("role", "listbox");
+  let rows = [];
+  let active = -1;
+  const paintActive = () => {
+    rows.forEach(({ row: row2 }, i) => row2.classList.toggle("twm-option-list__row--active", i === active));
+    const row = rows[active]?.row;
+    row?.scrollIntoView?.({ block: "nearest" });
+    onActive?.(row ? row.id : null);
+  };
+  const rowFor = (option, { glyphs, mark, isCurrent }) => {
+    const row = node("div", "twm-option-list__row");
+    row.id = `${id}-${rows.length}`;
+    row.setAttribute("role", "option");
+    row.setAttribute("aria-selected", String(!!isCurrent?.(option)));
+    if (option.disabled) row.setAttribute("aria-disabled", "true");
+    row.title = option.description ? `${option.label} \u2014 ${option.description}` : option.label;
+    if (glyphs) {
+      const glyph = node("span", "twm-option-list__glyph material-symbols-outlined", option.icon || "");
+      glyph.setAttribute("aria-hidden", "true");
+      row.appendChild(glyph);
+    }
+    const words = node("span", "twm-option-list__words");
+    const label = node("span", "twm-option-list__label");
+    marked(label, option.label, mark);
+    words.appendChild(label);
+    if (option.description) words.appendChild(node("span", "twm-option-list__description", option.description));
+    if (option.disabled && option.reason) words.appendChild(node("span", "twm-choice__reason", option.reason));
+    row.appendChild(words);
+    if (option.hint) row.appendChild(node("span", "twm-option-list__hint", option.hint));
+    return row;
+  };
+  const enabled = () => rows.map((r, i) => r.option.disabled ? -1 : i).filter((i) => i >= 0);
+  el.addEventListener("mousedown", (ev) => ev.preventDefault());
+  el.addEventListener("click", (ev) => {
+    const row = ev.target.closest?.('[role="option"]');
+    const hit = rows.find((r) => r.row === row);
+    if (hit && !hit.option.disabled) onPick(hit.option);
+  });
   return {
-    value: o.value,
-    label: o.label != null ? String(o.label) : shownValue(o.value),
-    description: o.description != null ? String(o.description) : null,
-    disabled: Boolean(o.disabled),
-    reason: o.reason != null && o.reason !== "" ? String(o.reason) : null
+    el,
+    id,
+    /**
+     * Draw `sections` (`[{ heading, items }]`, as `choiceSections` gives them).
+     * @param {object} [opts]
+     * @param {string} [opts.mark]  The text to mark in each label.
+     * @param {(option: object) => boolean} [opts.isCurrent]  Is this the current value?
+     */
+    setRows(sections, { mark = "", isCurrent = null } = {}) {
+      rows = [];
+      active = -1;
+      el.replaceChildren();
+      const glyphs = sections.some((s) => s.items.some((o) => o.icon));
+      for (const { heading, items } of sections) {
+        let parent = el;
+        if (heading != null) {
+          parent = node("div", "twm-option-list__section");
+          parent.setAttribute("role", "group");
+          parent.setAttribute("aria-label", heading);
+          const title = node("div", "twm-choice__group", heading);
+          title.setAttribute("aria-hidden", "true");
+          parent.appendChild(title);
+          el.appendChild(parent);
+        }
+        for (const option of items) {
+          const row = rowFor(option, { glyphs, mark, isCurrent });
+          rows.push({ option, row });
+          parent.appendChild(row);
+        }
+      }
+      paintActive();
+    },
+    /** One line of text in place of the rows: nothing matched, still loading, a failure. */
+    setMessage(text) {
+      rows = [];
+      active = -1;
+      el.replaceChildren(node("div", "twm-option-list__message", text));
+      paintActive();
+    },
+    /** How many rows are drawn. */
+    get size() {
+      return rows.length;
+    },
+    /** The drawn options, in order. */
+    options: () => rows.map((r) => r.option),
+    /** The active row's option, or null. */
+    activeOption: () => rows[active]?.option ?? null,
+    /** Make row `index` active; -1, or a row that is disabled, makes none active. */
+    setActive(index) {
+      active = rows[index] && !rows[index].option.disabled ? index : -1;
+      paintActive();
+    },
+    /** The next row that may be chosen, by `step`, wrapping. From none: the first or the last. */
+    move(step) {
+      const stops = enabled();
+      if (!stops.length) return;
+      const at = stops.indexOf(active);
+      const next = at < 0 ? step > 0 ? 0 : stops.length - 1 : (at + step + stops.length) % stops.length;
+      active = stops[next];
+      paintActive();
+    },
+    /** The first (`step` 1) or last (`step` -1) row that may be chosen. */
+    moveToEnd(step) {
+      const stops = enabled();
+      active = stops.length ? stops[step > 0 ? 0 : stops.length - 1] : -1;
+      paintActive();
+    }
   };
 }
-function flatChoices(options) {
-  const out = [];
-  for (const o of options || []) {
-    if (isGroup(o)) for (const inner of o.options) out.push(choiceOption(inner));
-    else out.push(choiceOption(o));
+
+// src/ui/components/combobox.js
+var DEBOUNCE_MS = 150;
+var SEQ2 = 0;
+function attachInputOptions(input, {
+  options = [],
+  onPick,
+  anchor = null,
+  isCurrent = null,
+  autoHighlight = false,
+  isCandidate = null,
+  normalise = (text) => text,
+  openOnFocus = false,
+  passEnter = false,
+  loadingText = "Loading\u2026",
+  errorText = "Could not load the options.",
+  debounce = DEBOUNCE_MS,
+  panelClassName = "",
+  onSettle = null
+} = {}) {
+  let source = options;
+  let layer = null;
+  let wanted = false;
+  let query = null;
+  let asked = 0;
+  let timer = null;
+  let controller = null;
+  let picking = false;
+  const list = createOptionList({
+    onPick: (option) => take(option),
+    onActive: (id) => {
+      if (id) input.setAttribute("aria-activedescendant", id);
+      else input.removeAttribute("aria-activedescendant");
+    }
+  });
+  const panel = document.createElement("div");
+  panel.className = `twm-option-panel${panelClassName ? ` ${panelClassName}` : ""}`;
+  panel.appendChild(list.el);
+  input.setAttribute("autocomplete", "off");
+  input.setAttribute("role", "combobox");
+  input.setAttribute("aria-autocomplete", "list");
+  input.setAttribute("aria-expanded", "false");
+  input.setAttribute("aria-controls", list.id);
+  const show = () => {
+    if (layer) {
+      layer.place();
+      return;
+    }
+    layer = openAnchoredLayer({
+      anchor: anchor || input,
+      el: panel,
+      gap: 4,
+      matchWidth: true,
+      returnFocus: false,
+      onClose() {
+        layer = null;
+        wanted = false;
+        input.setAttribute("aria-expanded", "false");
+        input.removeAttribute("aria-activedescendant");
+      }
+    });
+    if (!layer) {
+      wanted = false;
+      return;
+    }
+    input.setAttribute("aria-expanded", "true");
+  };
+  function forget() {
+    clearTimeout(timer);
+    asked += 1;
+    controller?.abort();
+    controller = null;
+  }
+  function close(reason = "closed") {
+    wanted = false;
+    forget();
+    layer?.close(reason);
+  }
+  function highlight(typed) {
+    const text = normalise(typed.trim());
+    if (!autoHighlight || !text) {
+      list.setActive(-1);
+      return;
+    }
+    const exact = list.options().findIndex((o) => normalise(shownValue(o.value)) === text);
+    if (exact >= 0) list.setActive(exact);
+    else if (isCandidate?.(text)) list.setActive(-1);
+    else list.moveToEnd(1);
   }
-  return out;
-}
-function groupHeads(options) {
-  const heads = /* @__PURE__ */ new Map();
-  let at = 0;
-  for (const o of options || []) {
-    if (!isGroup(o)) {
-      at += 1;
-      continue;
+  function drawRows(sections) {
+    if (!wanted) return;
+    if (!sections.length) {
+      layer?.close("empty");
+      wanted = true;
+      return;
+    }
+    const text = query ?? "";
+    list.setRows(sections, { mark: normalise(text.trim()), isCurrent });
+    show();
+    highlight(text);
+  }
+  function ask(text) {
+    controller = new AbortController();
+    const token = asked;
+    const failed = (err) => {
+      if (token !== asked) return;
+      console.warn("[createCombobox] options failed", err);
+      if (!wanted) return;
+      list.setMessage(errorText);
+      show();
+    };
+    let answer;
+    try {
+      answer = source(text, { signal: controller.signal });
+    } catch (err) {
+      failed(err);
+      return;
+    }
+    if (typeof answer?.then !== "function") {
+      drawRows(choiceSections(answer));
+      return;
     }
-    if (o.options.length) heads.set(at, String(o.group ?? ""));
-    at += o.options.length;
+    if (!list.size && wanted) {
+      list.setMessage(loadingText);
+      show();
+    }
+    answer.then((rows) => {
+      if (token === asked) drawRows(choiceSections(rows));
+    }, failed);
   }
-  return heads;
-}
-var groupHeading = (text) => el("div", "twm-choice__group", text);
-function sameChoice(v, value, loose = false) {
-  if (v === value) return true;
-  if (!loose || v === void 0 || value === void 0 || v === null || value === null) return false;
-  return String(v) === String(value);
-}
-function choiceIndex(list, v, loose = false, from = 0) {
-  for (let i = from; i < list.length; i += 1) if (list[i].value === v) return i;
-  if (!loose) return -1;
-  for (let i = from; i < list.length; i += 1) if (sameChoice(list[i].value, v, true)) return i;
-  return -1;
-}
-function findChoice(list, v, loose = false) {
-  const i = choiceIndex(list, v, loose);
-  return i >= 0 ? list[i] : void 0;
-}
-var optionText = (o) => o.disabled && o.reason ? `${o.label} \u2014 ${o.reason}` : o.label;
-function selectBox(options, value, {
-  empty = null,
-  label = "",
-  notFound = (v) => `${v} (not found)`,
-  keepMissing = true,
-  valueAttr = "index",
-  loose = false,
-  className = "twm-flow-input twm-flow-input--select"
-} = {}) {
-  const box = el("select", className);
-  if (label) box.setAttribute("aria-label", label);
-  let entries = [];
-  const add = (parent, o) => {
-    const attr = valueAttr === "index" ? String(entries.length) : o.value === void 0 ? "" : String(o.value);
-    const opt = el("option", "", optionText(o));
-    opt.value = attr;
-    if (o.disabled) {
-      opt.disabled = true;
-      if (o.reason) opt.title = o.reason;
-    }
-    parent.appendChild(opt);
-    entries.push(o);
-  };
-  const firstEnabled = () => {
-    const i = entries.findIndex((e) => !e.disabled);
-    return i >= 0 ? i : 0;
-  };
-  const select = (v) => {
-    const start = empty !== null ? 1 : 0;
-    const at = choiceIndex(entries, v, loose, start);
-    if (at < 0 || entries[at].disabled || entries[at].stray) return false;
-    box.selectedIndex = at;
+  function refresh() {
+    forget();
+    if (typeof source !== "function") {
+      const all = choiceSections(source);
+      drawRows(query === null ? all : filterSections(all, query));
+      return;
+    }
+    const text = query ?? "";
+    if (query === null || debounce <= 0) {
+      ask(text);
+      return;
+    }
+    const token = asked;
+    timer = setTimeout(() => {
+      if (token === asked) ask(text);
+    }, debounce);
+  }
+  function take(option) {
+    close("pick");
+    picking = true;
+    onPick?.(option);
+    picking = false;
+  }
+  function takeActive() {
+    const option = layer && list.activeOption();
+    if (!option) return false;
+    take(option);
     return true;
+  }
+  const openFor = (text) => {
+    query = text;
+    wanted = true;
+    refresh();
   };
-  const place = (v) => {
-    if (select(v)) return;
-    if (keepMissing && v !== void 0 && v !== null && v !== "") {
-      add(box, {
-        value: v,
-        label: notFound(shownValue(v)),
-        description: null,
-        disabled: false,
-        reason: null,
-        stray: true
-      });
-      box.selectedIndex = entries.length - 1;
+  const onInput = () => openFor(input.value);
+  const onClick = () => openFor(null);
+  const onFocus = () => {
+    if (openOnFocus && !layer && !picking) openFor(input.value || null);
+  };
+  const onBlur = () => close("blur");
+  const onKey = (ev) => {
+    if (ev.isComposing) return;
+    if (ev.key === "ArrowDown" || ev.key === "ArrowUp") {
+      ev.preventDefault();
+      ev.stopPropagation();
+      if (!layer) openFor(null);
+      list.move(ev.key === "ArrowDown" ? 1 : -1);
       return;
     }
-    box.selectedIndex = empty !== null ? 0 : firstEnabled();
-  };
-  const fill = (opts, v) => {
-    box.replaceChildren();
-    entries = [];
-    if (empty !== null) add(box, {
-      value: void 0,
-      label: String(empty),
-      description: null,
-      disabled: false,
-      reason: null
-    });
-    for (const o of opts || []) {
-      if (isGroup(o)) {
-        const g = el("optgroup");
-        g.label = String(o.group ?? "");
-        for (const inner of o.options) add(g, choiceOption(inner));
-        box.appendChild(g);
-      } else {
-        add(box, choiceOption(o));
+    if (ev.key === "Enter") {
+      if (!layer) return;
+      if (takeActive()) {
+        ev.preventDefault();
+        ev.stopImmediatePropagation();
+        return;
       }
+      close();
+      if (passEnter) return;
+      ev.preventDefault();
+      ev.stopPropagation();
+      onSettle?.();
+      return;
+    }
+    if (ev.key === "Tab") {
+      close("blur");
+      onSettle?.();
     }
-    place(v);
   };
-  const entry = () => box.selectedIndex < 0 ? null : entries[box.selectedIndex] ?? null;
-  const valueOf = () => entry()?.value;
-  fill(options, value);
+  input.addEventListener("input", onInput);
+  input.addEventListener("click", onClick);
+  input.addEventListener("focus", onFocus);
+  input.addEventListener("blur", onBlur);
+  input.addEventListener("keydown", onKey);
   return {
-    box,
-    valueOf,
-    entry,
-    select,
-    setOptions(opts, v = valueOf()) {
-      fill(opts, v);
+    get isOpen() {
+      return !!layer;
+    },
+    /** Open it showing everything, or for `text`. */
+    open(text = null) {
+      openFor(text);
+    },
+    close,
+    takeActive,
+    /** Replace the options; an open list redraws. */
+    setOptions(next) {
+      source = next;
+      if (wanted) refresh();
+    },
+    destroy() {
+      close();
+      input.removeEventListener("input", onInput);
+      input.removeEventListener("click", onClick);
+      input.removeEventListener("focus", onFocus);
+      input.removeEventListener("blur", onBlur);
+      input.removeEventListener("keydown", onKey);
     }
   };
 }
-function toggleChips({
-  options,
-  value,
-  label,
-  readOnly,
-  onChange,
-  notFound = (v) => `${v} (not found)`,
-  keepMissing = true,
-  loose = false
-}) {
-  const root = el("div", "twm-flow-togglechips");
-  root.setAttribute("role", "group");
-  if (label) root.setAttribute("aria-label", label);
-  let shown = [];
-  let list = [];
-  let chosen = /* @__PURE__ */ new Set();
-  let strays = [];
-  const emit = () => {
-    const out = valueOf();
-    onChange?.(out.length ? out : void 0);
-  };
-  const chipFor = (text, pressed, toggle, { stray = false, reason = null, disabled = false } = {}) => {
-    const b = el("button", `twm-flow-togglechip${stray ? " twm-flow-togglechip--missing" : ""}`, text);
-    b.type = "button";
-    b.setAttribute("aria-pressed", pressed ? "true" : "false");
-    b.disabled = Boolean(readOnly) || disabled;
-    if (reason) {
-      b.title = reason;
-      b.appendChild(el("span", "twm-choice__reason", reason));
-    }
-    b.addEventListener("click", () => {
-      const on = toggle();
-      b.setAttribute("aria-pressed", on ? "true" : "false");
-      emit();
-    });
-    return b;
+function createCombobox({
+  options = [],
+  value = "",
+  onChange = null,
+  className = "",
+  panelClassName = "",
+  placeholder = "",
+  title = "",
+  ariaLabel = "",
+  name = null,
+  disabled = false,
+  normalise = (text) => text,
+  autoHighlight = true,
+  isCandidate = null,
+  validate = null,
+  loadingText,
+  errorText,
+  debounce
+} = {}) {
+  const handed = String(value ?? "");
+  let current = normalise(handed);
+  const el = document.createElement("div");
+  el.className = `twm-combobox${className ? ` ${className}` : ""}`;
+  const input = document.createElement("input");
+  input.type = "text";
+  input.className = "twm-combobox__input";
+  input.spellcheck = false;
+  input.value = current;
+  input.disabled = !!disabled;
+  if (name) input.name = name;
+  if (placeholder) input.placeholder = placeholder;
+  if (title) input.title = title;
+  if (ariaLabel) input.setAttribute("aria-label", ariaLabel);
+  const error = document.createElement("p");
+  error.className = "twm-combobox__error";
+  error.hidden = true;
+  error.id = `twm-combobox-error-${++SEQ2}`;
+  el.append(input, error);
+  function report(next, option) {
+    const settled = normalise(String(next ?? ""));
+    if (settled === current) return;
+    current = settled;
+    onChange?.(current, option ?? null);
+  }
+  const clearValidity = () => {
+    error.hidden = true;
+    error.textContent = "";
+    input.removeAttribute("aria-invalid");
+    input.removeAttribute("aria-describedby");
   };
-  const draw = (opts, stored) => {
-    shown = opts || [];
-    list = flatChoices(shown);
-    const heads = groupHeads(shown);
-    const wanted = Array.isArray(stored) ? stored : [];
-    const offered = (v) => {
-      const o = findChoice(list, v, loose);
-      return o && !o.disabled ? o : void 0;
-    };
-    chosen = new Set(wanted.map(offered).filter(Boolean).map((o) => o.value));
-    strays = keepMissing ? wanted.filter((v) => !offered(v)) : [];
-    root.replaceChildren();
-    list.forEach((o, i) => {
-      if (heads.has(i)) root.appendChild(groupHeading(heads.get(i)));
-      root.appendChild(chipFor(o.label, chosen.has(o.value), () => {
-        if (o.disabled) return false;
-        if (chosen.has(o.value)) chosen.delete(o.value);
-        else chosen.add(o.value);
-        return chosen.has(o.value);
-      }, { disabled: o.disabled, reason: o.disabled ? o.reason : null }));
-    });
-    for (const v of [...strays]) {
-      root.appendChild(chipFor(notFound(shownValue(v)), true, () => {
-        const i = strays.indexOf(v);
-        if (i >= 0) {
-          strays.splice(i, 1);
-          return false;
-        }
-        strays.push(v);
-        return true;
-      }, { stray: true }));
+  function paintValidity() {
+    const message = validate && current ? validate(current) || null : null;
+    if (!message) {
+      clearValidity();
+      return;
     }
-  };
-  const valueOf = () => [...list.filter((o) => chosen.has(o.value)).map((o) => o.value), ...strays];
-  draw(options, value);
-  return {
-    el: root,
-    valueOf,
-    setValue: (stored) => draw(shown, stored),
-    setOptions: (opts) => draw(opts, valueOf())
-  };
-}
-function choiceList({
-  options,
-  value,
-  name,
-  label,
-  readOnly,
-  onChange,
-  notFound = (v) => `${v} (not found)`,
-  keepMissing = true,
-  loose = false
-}) {
-  const root = el("div", "twm-flow-choices");
-  root.setAttribute("role", "radiogroup");
-  if (label) root.setAttribute("aria-label", label);
-  let list = [];
-  let radios = [];
-  const draw = (opts, current) => {
-    list = flatChoices(opts);
-    const heads = groupHeads(opts);
-    radios = [];
-    root.replaceChildren();
-    const named = choiceIndex(list, current, loose);
-    const at = named >= 0 && !list[named].disabled ? named : -1;
-    list.forEach((o, i) => {
-      if (heads.has(i)) root.appendChild(groupHeading(heads.get(i)));
-      const row = el("label", `twm-flow-choice${o.disabled ? " twm-choice--disabled" : ""}`);
-      const radio = el("input", "twm-flow-choice__radio");
-      radio.type = "radio";
-      radio.name = name;
-      radio.checked = i === at;
-      radio.disabled = Boolean(readOnly) || o.disabled;
-      radio.addEventListener("change", () => {
-        if (radio.checked) onChange?.(o.value);
-      });
-      radios.push(radio);
-      const words = el("span", "twm-flow-choice__words");
-      words.appendChild(el("span", "twm-flow-choice__label", o.label));
-      if (o.description !== null) words.appendChild(el("span", "twm-flow-choice__sub", o.description));
-      if (o.disabled && o.reason) words.appendChild(el("span", "twm-choice__reason", o.reason));
-      row.append(radio, words);
-      root.appendChild(row);
-    });
-    if (keepMissing && current !== void 0 && named < 0) {
-      root.appendChild(el("p", "twm-flow-field__note", notFound(shownValue(current))));
+    error.textContent = message;
+    error.hidden = false;
+    input.setAttribute("aria-invalid", "true");
+    input.setAttribute("aria-describedby", error.id);
+  }
+  function settle() {
+    report(input.value, null);
+    if (input.value !== current) input.value = current;
+    paintValidity();
+  }
+  input.addEventListener("input", () => {
+    report(input.value, null);
+    clearValidity();
+  });
+  const menu = attachInputOptions(input, {
+    options,
+    autoHighlight,
+    isCandidate,
+    normalise,
+    panelClassName,
+    loadingText,
+    errorText,
+    debounce,
+    isCurrent: (o) => normalise(shownValue(o.value)) === current,
+    onSettle: settle,
+    onPick(option) {
+      input.value = shownValue(option.value);
+      report(option.value, option.source);
+      settle();
+      input.focus();
+      fireEvent(input, "change", { bubbles: true });
     }
-  };
-  const checkedAt = () => radios.findIndex((r) => r.checked);
-  const entry = () => list[checkedAt()] ?? null;
-  const api = {
-    el: root,
-    focus: () => (radios.find((r) => r.checked && !r.disabled) || radios.find((r) => !r.disabled))?.focus({ preventScroll: true }),
-    entry,
-    valueOf: () => entry()?.value,
-    select(v) {
-      const named = choiceIndex(list, v, loose);
-      const at = named >= 0 && !list[named].disabled ? named : -1;
-      radios.forEach((r, i) => {
-        r.checked = i === at;
-      });
-      return at >= 0;
+  });
+  input.addEventListener("blur", settle);
+  paintValidity();
+  if (onChange && current !== handed) onChange(current, null);
+  return {
+    el,
+    input,
+    get value() {
+      return current;
+    },
+    set value(next) {
+      current = normalise(String(next ?? ""));
+      input.value = current;
+      paintValidity();
+    },
+    /** The complaint on screen, or `null`. A caller that wants to refuse Save has this. */
+    get error() {
+      return error.hidden ? null : error.textContent;
     },
-    setOptions(opts) {
-      draw(opts, api.valueOf());
+    get isOpen() {
+      return menu.isOpen;
+    },
+    setOptions: menu.setOptions,
+    /** Open the list showing everything, or for `text`. */
+    open: menu.open,
+    close: () => menu.close(),
+    focus() {
+      input.focus();
+    },
+    destroy() {
+      menu.destroy();
+      el.remove();
     }
   };
-  draw(options, value);
-  return api;
-}
-
-// src/ui/components/row_activation.js
-var ROW_CONTROL_SELECTOR = [
-  "button",
-  "a",
-  "input",
-  "select",
-  "textarea",
-  "label",
-  "summary",
-  '[contenteditable=""]',
-  '[contenteditable="true"]',
-  "[data-twm-action]"
-].join(", ");
-function isRowControl(target, scope = null) {
-  const hit = target?.closest?.(ROW_CONTROL_SELECTOR);
-  return !!hit && (!scope || scope.contains(hit));
-}
-function endsTextSelection(target, scope = null) {
-  const doc = target?.ownerDocument || (typeof document !== "undefined" ? document : null);
-  const sel = doc?.getSelection?.();
-  if (!sel || sel.isCollapsed || !String(sel)) return false;
-  if (!scope) return true;
-  const inside = (node) => !!node && scope.contains(node);
-  return inside(sel.anchorNode) || inside(sel.focusNode);
-}
-function isRowActivation(ev, gesture = "click", { scope = null } = {}) {
-  const target = ev?.target;
-  if (!target?.closest) return false;
-  if (isRowControl(target, scope)) return false;
-  if (gesture === "click") {
-    if ((ev.detail ?? 0) > 1) return false;
-    if (endsTextSelection(target, scope)) return false;
-  }
-  return true;
 }
 
 export {
@@ -2043,18 +2191,12 @@ export {
   DEFAULT_MAX_SAVED_WINDOWS,
   ManagedWindow,
   ToggleField,
+  fireEvent,
   isHexColor,
   normalizeHex,
   ColorField,
-  shownValue,
-  flatChoices,
-  findChoice,
-  selectBox,
-  toggleChips,
-  choiceList,
-  ROW_CONTROL_SELECTOR,
-  isRowControl,
-  endsTextSelection,
-  isRowActivation
+  createOptionList,
+  attachInputOptions,
+  createCombobox
 };
-//# sourceMappingURL=chunk-PGZ4EHSE.js.map
+//# sourceMappingURL=chunk-HL3IIHU3.js.map