@smwb/ui-solid 0.12.1 → 0.14.0

package/dist/headless/components/navigation/commandPalette/commandPalette.js

@@ -0,0 +1,455 @@
+import { createComponent as f, mergeProps as we, memo as pe, insert as d, use as oe, effect as K, setAttribute as m, className as ie, template as x, delegateEvents as xe } from "solid-js/web";
+import { mergeProps as $e, createMemo as j, createSignal as R, createEffect as Q, untrack as se, on as ke, onCleanup as Ce, children as Ae, onMount as Ie, Show as T, For as J } from "solid-js";
+import Z from "clsx";
+import { createControllableState as de } from "../../../primitives/createControllableState.js";
+import { createId as Te } from "../../../primitives/createId.js";
+import { commandPaletteFilter as Se } from "./commandPaletteFilter.js";
+import { firstOption as Ee, moveOption as De, keepInView as Oe } from "./commandPaletteNavigation.js";
+import { Modal as Le } from "../../feedBack/modal/modal.js";
+import { Icon as me } from "../../base/icon/icon.js";
+import { Kbd as Pe } from "../../dataDisplay/kbd/kbd.js";
+import { Skeleton as ce } from "../../feedBack/skeleton/skeleton.js";
+var Ke = /* @__PURE__ */ x("<ul class=smwb-command-palette__listbox role=listbox data-testid=command-palette-listbox>"), Re = /* @__PURE__ */ x("<div class=smwb-command-palette__loading aria-hidden=true data-testid=command-palette-loading>"), Qe = /* @__PURE__ */ x("<div data-testid=command-palette-error>"), qe = /* @__PURE__ */ x("<div class=smwb-command-palette__message data-testid=command-palette-empty>"), Fe = /* @__PURE__ */ x("<div class=smwb-command-palette__footer data-testid=command-palette-footer>"), Me = /* @__PURE__ */ x("<div class=smwb-command-palette__panel><div class=smwb-command-palette__search><span class=smwb-command-palette__search-icon aria-hidden=true></span><input class=smwb-command-palette__input type=text role=combobox aria-autocomplete=list autocomplete=off spellcheck=false autocapitalize=off enterkeyhint=go data-testid=command-palette-input></div><div class=smwb-command-palette__results tabindex=-1 data-testid=command-palette-results></div><div class=smwb-command-palette__status role=status data-testid=command-palette-status>"), Ne = /* @__PURE__ */ x("<li class=smwb-command-palette__group role=group><div class=smwb-command-palette__group-label></div><ul class=smwb-command-palette__group-options role=presentation>"), ze = /* @__PURE__ */ x("<span class=smwb-command-palette__item-icon aria-hidden=true>"), Ge = /* @__PURE__ */ x("<span class=smwb-command-palette__item-subtitle>"), He = /* @__PURE__ */ x("<li role=option data-testid=command-palette-option><span class=smwb-command-palette__item-text><span class=smwb-command-palette__item-label>"), Ue = /* @__PURE__ */ x("<div class=smwb-command-palette__loading-row>");
+const ue = 10, Ve = 500, Ye = ["60%", "40%", "60%"], je = (t) => t === 1 ? "1 result" : `${t} results`, Be = (t) => typeof t == "object" && t !== null && t.name === "AbortError", Xe = (t) => {
+  const n = [];
+  return t.item.subtitle !== void 0 && n.push(`${t.id}-subtitle`), t.item.shortcut !== void 0 && n.push(`${t.id}-shortcut`), n.length > 0 ? n.join(" ") : void 0;
+}, We = (t) => {
+  if (t !== void 0)
+    return typeof t == "string" ? f(me, {
+      name: t,
+      size: 20
+    }) : t;
+};
+function Je(t) {
+  let n;
+  const q = t.value;
+  Q((g) => {
+    const $ = t.value;
+    return n && $ !== g && (n.value = $), $;
+  }, q);
+  const G = Ae(() => t.footer), F = (g) => {
+    g.target !== n && g.preventDefault();
+  };
+  return Ie(() => n?.focus({
+    preventScroll: !0
+  })), (() => {
+    var g = Me(), $ = g.firstChild, S = $.firstChild, h = S.nextSibling, w = $.nextSibling, H = w.nextSibling;
+    g.$$mousedown = F, d(S, f(me, {
+      name: "search",
+      size: 20
+    })), h.$$keydown = (r) => t.onKeyDown(r), h.$$input = (r) => t.onQueryInput(r), oe((r) => n = r, h), h.value = q;
+    var M = t.resultsRef;
+    return typeof M == "function" ? oe(M, w) : t.resultsRef = w, d(w, f(T, {
+      get when() {
+        return t.hasListbox;
+      },
+      get children() {
+        var r = Ke();
+        return d(r, f(J, {
+          get each() {
+            return t.groups;
+          },
+          children: (c) => (() => {
+            var b = Ne(), _ = b.firstChild, k = _.nextSibling;
+            return d(_, () => c.label), d(k, f(J, {
+              get each() {
+                return c.options;
+              },
+              children: (l) => (() => {
+                var s = He(), C = s.firstChild, y = C.firstChild;
+                return s.$$pointermove = (i) => t.onHover(i, l), s.$$click = () => t.onChoose(l), d(s, f(T, {
+                  get when() {
+                    return l.item.icon !== void 0;
+                  },
+                  get children() {
+                    var i = ze();
+                    return d(i, () => We(l.item.icon)), i;
+                  }
+                }), C), d(y, () => l.item.label), d(C, f(T, {
+                  get when() {
+                    return l.item.subtitle !== void 0;
+                  },
+                  get children() {
+                    var i = Ge();
+                    return d(i, () => l.item.subtitle), K(() => m(i, "id", `${l.id}-subtitle`)), i;
+                  }
+                }), null), d(s, f(T, {
+                  get when() {
+                    return l.item.shortcut !== void 0;
+                  },
+                  get children() {
+                    return f(Pe, {
+                      get keys() {
+                        return l.item.shortcut ?? [];
+                      },
+                      get id() {
+                        return `${l.id}-shortcut`;
+                      },
+                      class: "smwb-command-palette__item-shortcut"
+                    });
+                  }
+                }), null), K((i) => {
+                  var E = Z("smwb-command-palette__item", {
+                    "smwb-command-palette__item_active": t.activeKey === l.key,
+                    "smwb-command-palette__item_disabled": l.item.disabled
+                  }), D = l.id, O = t.activeKey === l.key ? !0 : void 0, U = l.item.disabled ? !0 : void 0, A = `${l.id}-label`, p = Xe(l), L = l.item.id, P = `${l.id}-label`;
+                  return E !== i.e && ie(s, i.e = E), D !== i.t && m(s, "id", i.t = D), O !== i.a && m(s, "aria-selected", i.a = O), U !== i.o && m(s, "aria-disabled", i.o = U), A !== i.i && m(s, "aria-labelledby", i.i = A), p !== i.n && m(s, "aria-describedby", i.n = p), L !== i.s && m(s, "data-item-id", i.s = L), P !== i.h && m(y, "id", i.h = P), i;
+                }, {
+                  e: void 0,
+                  t: void 0,
+                  a: void 0,
+                  o: void 0,
+                  i: void 0,
+                  n: void 0,
+                  s: void 0,
+                  h: void 0
+                }), s;
+              })()
+            })), K((l) => {
+              var s = c.labelId, C = c.labelId;
+              return s !== l.e && m(b, "aria-labelledby", l.e = s), C !== l.t && m(_, "id", l.t = C), l;
+            }, {
+              e: void 0,
+              t: void 0
+            }), b;
+          })()
+        })), K((c) => {
+          var b = t.listboxId, _ = t.inputId, k = t.pending ? !0 : void 0;
+          return b !== c.e && m(r, "id", c.e = b), _ !== c.t && m(r, "aria-labelledby", c.t = _), k !== c.a && m(r, "aria-busy", c.a = k), c;
+        }, {
+          e: void 0,
+          t: void 0,
+          a: void 0
+        }), r;
+      }
+    }), null), d(w, f(T, {
+      get when() {
+        return t.pending;
+      },
+      get children() {
+        var r = Re();
+        return d(r, f(J, {
+          each: Ye,
+          children: (c) => (() => {
+            var b = Ue();
+            return d(b, f(ce, {
+              variant: "circular",
+              width: 20,
+              height: 20,
+              component: "div"
+            }), null), d(b, f(ce, {
+              variant: "text",
+              width: c,
+              component: "div"
+            }), null), b;
+          })()
+        })), r;
+      }
+    }), null), d(w, f(T, {
+      get when() {
+        return t.showError;
+      },
+      get children() {
+        var r = Qe();
+        return d(r, () => t.errorText), K(() => ie(r, Z("smwb-command-palette__message", "smwb-command-palette__message_error"))), r;
+      }
+    }), null), d(w, f(T, {
+      get when() {
+        return t.showEmpty;
+      },
+      get children() {
+        var r = qe();
+        return d(r, () => t.noResultsText), r;
+      }
+    }), null), d(g, f(T, {
+      get when() {
+        return G();
+      },
+      get children() {
+        var r = Fe();
+        return d(r, G), r;
+      }
+    }), H), d(H, () => t.status), K((r) => {
+      var c = t.inputId, b = t.placeholder, _ = t.searchLabel, k = t.hasListbox, l = t.hasListbox ? t.listboxId : void 0, s = t.activeDescendant;
+      return c !== r.e && m(h, "id", r.e = c), b !== r.t && m(h, "placeholder", r.t = b), _ !== r.a && m(h, "aria-label", r.a = _), k !== r.o && m(h, "aria-expanded", r.o = k), l !== r.i && m(h, "aria-controls", r.i = l), s !== r.n && m(h, "aria-activedescendant", r.n = s), r;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0,
+      i: void 0,
+      n: void 0
+    }), g;
+  })();
+}
+function ut(t) {
+  const n = $e({
+    defaultOpen: !1,
+    groups: [],
+    recentLabel: "Recent",
+    defaultQuery: "",
+    filter: Se,
+    debounce: 200,
+    minQueryLength: 1,
+    loading: !1,
+    closeOnSelect: !0,
+    placeholder: "Type a command or search…",
+    searchLabel: "Search commands",
+    noResultsText: "No results",
+    errorText: "Couldn't load results",
+    resultsAnnouncement: je,
+    "aria-label": "Command palette",
+    "data-testid": "command-palette"
+  }, t), q = Te(void 0, "smwb-command-palette"), G = `${q}-input`, F = `${q}-listbox`, [g, $] = de({
+    value: () => n.open,
+    defaultValue: n.defaultOpen,
+    onChange: (e) => n.onOpenChange?.(e)
+  }), [S, h] = de({
+    value: () => n.query,
+    defaultValue: n.defaultQuery,
+    onChange: (e) => n.onQueryChange?.(e)
+  }), w = j(() => S().trim()), [H, M] = R(null), [r, c] = R(!1), [b, _] = R(!1), [k, l] = R(!1), s = () => b() || k() || n.loading, C = j(() => {
+    const e = S(), a = w(), o = [];
+    let u = 0;
+    const N = (v, X, W, ae) => {
+      if (ae.length === 0) return;
+      const _e = ae.map((le) => {
+        const ye = {
+          id: `${F}-option-${u}`,
+          key: `${v}\0${le.id}`,
+          item: le,
+          group: W
+        };
+        return u++, ye;
+      });
+      o.push({
+        key: v,
+        label: X,
+        labelId: `${F}-group-${o.length}`,
+        options: _e
+      });
+    }, z = n.recent;
+    z && a === "" && N("recent", n.recentLabel, {
+      id: "recent",
+      label: n.recentLabel,
+      items: z
+    }, z);
+    const re = n.filter;
+    for (const v of n.groups) {
+      const X = re === !1 ? v.items : v.items.filter((W) => re(W, e));
+      N(v.id ?? v.label, v.label, v, X);
+    }
+    const B = H();
+    if (B !== null && B.query === a)
+      for (const v of B.groups)
+        N(v.id ?? v.label, v.label, v, v.items);
+    return o;
+  }), y = j(() => {
+    const e = [];
+    for (const a of C())
+      for (const o of a.options) e.push(o);
+    return e;
+  }), i = (e) => {
+    const a = y()[e];
+    return a !== void 0 && !a.item.disabled;
+  }, [E, D] = R(null);
+  Q(() => {
+    const e = y(), a = E();
+    if (a !== null && e.some((u) => u.key === a && !u.item.disabled)) return;
+    const o = e[Ee(e.length, i)];
+    D(o ? o.key : null);
+  });
+  const O = j(() => {
+    const e = E();
+    if (e === null) return -1;
+    const a = y();
+    for (let o = 0; o < a.length; o++) {
+      const u = a[o];
+      if (u && u.key === e) return u.item.disabled ? -1 : o;
+    }
+    return -1;
+  }), U = () => {
+    const e = O();
+    return e >= 0 ? y()[e]?.id : void 0;
+  };
+  let A, p, L, P = !1, V, I;
+  const ee = () => {
+    A !== void 0 && (clearTimeout(A), A = void 0), p !== void 0 && (p.abort(), p = void 0);
+  }, fe = (e, a) => {
+    const o = new AbortController();
+    p = o, l(!0), e(a, {
+      signal: o.signal
+    }).then((u) => {
+      p !== o || o.signal.aborted || (p = void 0, l(!1), M({
+        query: a,
+        groups: u
+      }));
+    }, (u) => {
+      p !== o || o.signal.aborted || (p = void 0, l(!1), Be(u) || c(!0));
+    });
+  };
+  Q(() => {
+    const e = g(), a = w();
+    se(() => {
+      if (ee(), _(!1), l(!1), M(null), c(!1), !e) return;
+      const o = n.source;
+      !o || a.length < n.minQueryLength || (_(!0), A = setTimeout(() => {
+        A = void 0, _(!1), fe(o, a);
+      }, Math.max(0, n.debounce)));
+    });
+  }), Q(ke(g, (e) => {
+    e && (n.query === void 0 && h(n.defaultQuery), D(null));
+  }, {
+    defer: !0
+  }));
+  const [be, te] = R("");
+  Q(() => {
+    const e = g(), a = w(), o = s(), u = y().length, N = r();
+    se(() => {
+      if (I !== void 0 && (clearTimeout(I), I = void 0), !e || a === "") {
+        te("");
+        return;
+      }
+      if (o) return;
+      const z = N ? n.errorText : u === 0 ? n.noResultsText : n.resultsAnnouncement(u);
+      I = setTimeout(() => {
+        I = void 0, te(z);
+      }, Ve);
+    });
+  }), Q(() => {
+    const e = O();
+    if (!P) return;
+    P = !1;
+    const a = y()[e];
+    if (!a || !L) return;
+    const o = L.querySelector(`[id="${a.id}"]`);
+    o && Oe(o, L);
+  }), Ce(() => {
+    ee(), I !== void 0 && (clearTimeout(I), I = void 0);
+  });
+  const ne = (e, a) => {
+    e.disabled || (n.closeOnSelect && $(!1), e.onSelect?.(), n.onSelect?.(e, a));
+  }, Y = (e, a) => {
+    e.preventDefault();
+    const o = y(), u = o[De(o.length, i, O(), a)];
+    !u || u.key === E() || (D(u.key), P = !0);
+  }, ve = (e) => {
+    if (e.isComposing || e.keyCode === 229) {
+      e.key === "Escape" && e.preventDefault();
+      return;
+    }
+    if (!(e.ctrlKey || e.metaKey || e.altKey || e.shiftKey))
+      switch (e.key) {
+        case "ArrowDown":
+          Y(e, 1);
+          break;
+        case "ArrowUp":
+          Y(e, -1);
+          break;
+        case "PageDown":
+          Y(e, ue);
+          break;
+        case "PageUp":
+          Y(e, -ue);
+          break;
+        case "Enter": {
+          e.preventDefault();
+          const a = y()[O()];
+          a && ne(a.item, a.group);
+          break;
+        }
+      }
+  }, ge = (e) => {
+    const a = e.currentTarget.value;
+    h(a);
+    const o = S();
+    o !== a && (e.currentTarget.value = o);
+  }, he = (e, a) => {
+    a.item.disabled || V && V.x === e.clientX && V.y === e.clientY || (V = {
+      x: e.clientX,
+      y: e.clientY
+    }, D(a.key));
+  };
+  return f(Le, we({
+    get open() {
+      return g();
+    },
+    onClose: () => $(!1),
+    size: "medium",
+    animation: "fade",
+    backdrop: "dark",
+    closeOnEsc: !0,
+    closeOnOutsideClick: !0,
+    get class() {
+      return Z("smwb-command-palette", n.class);
+    },
+    ref(e) {
+      var a = n.ref;
+      typeof a == "function" ? a(e) : n.ref = e;
+    }
+  }, () => {
+    const e = {
+      "data-testid": n["data-testid"]
+    };
+    return n["aria-labelledby"] !== void 0 ? e["aria-labelledby"] = n["aria-labelledby"] : e["aria-label"] = n["aria-label"], n["aria-describedby"] !== void 0 && (e["aria-describedby"] = n["aria-describedby"]), e;
+  }, {
+    get children() {
+      return f(Je, {
+        inputId: G,
+        listboxId: F,
+        get value() {
+          return S();
+        },
+        get placeholder() {
+          return n.placeholder;
+        },
+        get searchLabel() {
+          return n.searchLabel;
+        },
+        get groups() {
+          return C();
+        },
+        get activeKey() {
+          return E();
+        },
+        get activeDescendant() {
+          return U();
+        },
+        get hasListbox() {
+          return y().length > 0;
+        },
+        get pending() {
+          return s();
+        },
+        get showEmpty() {
+          return pe(() => !s() && !r())() && y().length === 0;
+        },
+        get showError() {
+          return r();
+        },
+        get noResultsText() {
+          return n.noResultsText;
+        },
+        get errorText() {
+          return n.errorText;
+        },
+        get status() {
+          return be();
+        },
+        get footer() {
+          return n.footer;
+        },
+        resultsRef: (e) => L = e,
+        onQueryInput: ge,
+        onKeyDown: ve,
+        onChoose: (e) => ne(e.item, e.group),
+        onHover: he
+      });
+    }
+  }));
+}
+xe(["mousedown", "input", "keydown", "click", "pointermove"]);
+export {
+  ut as CommandPalette
+};
+//# sourceMappingURL=commandPalette.js.map

package/dist/headless/components/navigation/commandPalette/commandPalette.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"commandPalette.js","sources":["../../../../../src/components/navigation/commandPalette/commandPalette.tsx"],"sourcesContent":["import {\n  type JSX,\n  For,\n  Show,\n  children,\n  createEffect,\n  createMemo,\n  createSignal,\n  mergeProps,\n  on,\n  onCleanup,\n  onMount,\n  untrack,\n} from \"solid-js\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { Kbd } from \"../../dataDisplay/kbd\";\nimport { Modal } from \"../../feedBack/modal\";\nimport { Skeleton } from \"../../feedBack/skeleton\";\nimport { createControllableState } from \"../../../primitives/createControllableState\";\nimport { createId } from \"../../../primitives/createId\";\nimport type { Ref } from \"../../../primitives/mergeRefs\";\nimport { commandPaletteFilter } from \"./commandPaletteFilter\";\nimport { firstOption, keepInView, moveOption } from \"./commandPaletteNavigation\";\nimport type {\n  CommandPaletteFilter,\n  CommandPaletteGroup,\n  CommandPaletteItem,\n  CommandPaletteSource,\n} from \"./commandPaletteTypes\";\n\ntype QueryInputEvent = Event & { currentTarget: HTMLInputElement };\n\n/** How far PageDown and PageUp move, as in the select field's listbox. */\nconst PAGE_STEP = 10;\n/** Quiet time after the results settle before the count is announced. */\nconst ANNOUNCE_DELAY = 500;\n/** Widths of the skeleton rows' text bars, cycling over the three rows. */\nconst LOADING_BAR_WIDTHS = [\"60%\", \"40%\", \"60%\"];\n\n/** One option as drawn: its id, the key that keeps it active, and what choosing it runs. */\ninterface PaletteOption {\n  /** The option's id, `${listboxId}-option-${index}` in the order the options are drawn. */\n  id: string;\n  /** The group's key and the item's id, so the option stays active while the results change. */\n  key: string;\n  item: CommandPaletteItem;\n  /** The group the option is handed to `onSelect` with. */\n  group: CommandPaletteGroup;\n}\n\n/** One group as drawn: its heading and its options. */\ninterface PaletteGroup {\n  key: string;\n  label: string;\n  /** The heading's id, which names the group through `aria-labelledby`. */\n  labelId: string;\n  options: PaletteOption[];\n}\n\n/** The dialog's own attributes, which Modal's props type has no `data-testid` for. */\ninterface DialogAttributes {\n  \"data-testid\": string;\n  \"aria-label\"?: string;\n  \"aria-labelledby\"?: string;\n  \"aria-describedby\"?: string;\n}\n\n/** An answer of `source`, kept with the query it belongs to. */\ninterface AsyncAnswer {\n  query: string;\n  groups: CommandPaletteGroup[];\n}\n\nconst defaultResultsAnnouncement = (count: number): string => (count === 1 ? \"1 result\" : `${count} results`);\n\n// A rejection of an aborted request is the abort itself, whatever the source threw it as.\nconst isAbortError = (error: unknown): boolean =>\n  typeof error === \"object\" && error !== null && (error as { name?: unknown }).name === \"AbortError\";\n\n// The label alone names the option; the subtitle and the shortcut describe it, so a screen\n// reader reads \"New worktree, acme/web, Ctrl+Shift+N\" and not one long name.\nconst optionDescribedBy = (option: PaletteOption): string | undefined => {\n  const ids: string[] = [];\n  if (option.item.subtitle !== undefined) ids.push(`${option.id}-subtitle`);\n  if (option.item.shortcut !== undefined) ids.push(`${option.id}-shortcut`);\n  return ids.length > 0 ? ids.join(\" \") : undefined;\n};\n\nconst optionIcon = (icon: string | JSX.Element | undefined): JSX.Element | undefined => {\n  if (icon === undefined) return undefined;\n  return typeof icon === \"string\" ? <Icon name={icon} size={20} /> : icon;\n};\n\ninterface CommandPalettePanelProps {\n  inputId: string;\n  listboxId: string;\n  /** The text to start with; later changes of `value` are written to the field by an effect. */\n  value: string;\n  placeholder: string;\n  searchLabel: string;\n  groups: PaletteGroup[];\n  activeKey: string | null;\n  activeDescendant: string | undefined;\n  hasListbox: boolean;\n  pending: boolean;\n  showEmpty: boolean;\n  showError: boolean;\n  noResultsText: string;\n  errorText: string;\n  status: string;\n  footer?: JSX.Element | undefined;\n  resultsRef: (element: HTMLDivElement) => void;\n  onQueryInput: (event: QueryInputEvent) => void;\n  onKeyDown: (event: KeyboardEvent) => void;\n  onChoose: (option: PaletteOption) => void;\n  onHover: (event: PointerEvent, option: PaletteOption) => void;\n}\n\n/**\n * The palette's contents, in a component of their own. Modal draws its content inside the portal's\n * tracked scope, so reading reactive state while these elements are created would rebuild them —\n * and with them the field, losing what was typed and the focus. Everything here is either static or\n * read by an attribute effect, a `Show` or a `For` of its own.\n */\nfunction CommandPalettePanel(props: CommandPalettePanelProps): JSX.Element {\n  let inputEl: HTMLInputElement | undefined;\n\n  // Read once, in the body, which is untracked: the panel is created when the palette opens, so\n  // this is the query to start with. A `value={expr}` binding is not enough on its own — it\n  // compares the expression with its own last write and never with the field's text, so it skips a\n  // value that takes over and wipes text a caller leaves. Later changes are written here instead.\n  const atStart = props.value;\n  createEffect((previous: string) => {\n    const next = props.value;\n    if (inputEl && next !== previous) inputEl.value = next;\n    return next;\n  }, atStart);\n\n  // Read the slot once, here, where it is drawn: markup passed as a prop is created anew on\n  // every read.\n  const footer = children(() => props.footer);\n\n  // A press on an option, a heading, the footer or the scrollbar must not take the focus from the\n  // field: it is the palette's only tab stop, and the options are reached with the arrow keys.\n  const onPanelMouseDown = (event: MouseEvent): void => {\n    if (event.target === inputEl) return;\n    event.preventDefault();\n  };\n\n  // The palette moves the focus itself rather than leaving it to Modal's trap, whose list of\n  // focusable elements is empty in jsdom, where nothing has an offsetParent.\n  onMount(() => inputEl?.focus({ preventScroll: true }));\n\n  return (\n    <div class=\"smwb-command-palette__panel\" onMouseDown={onPanelMouseDown}>\n      <div class=\"smwb-command-palette__search\">\n        <span class=\"smwb-command-palette__search-icon\" aria-hidden=\"true\">\n          <Icon name=\"search\" size={20} />\n        </span>\n        <input\n          ref={(element) => (inputEl = element)}\n          class=\"smwb-command-palette__input\"\n          id={props.inputId}\n          type=\"text\"\n          role=\"combobox\"\n          value={atStart}\n          placeholder={props.placeholder}\n          aria-label={props.searchLabel}\n          aria-autocomplete=\"list\"\n          aria-expanded={props.hasListbox}\n          aria-controls={props.hasListbox ? props.listboxId : undefined}\n          aria-activedescendant={props.activeDescendant}\n          autocomplete=\"off\"\n          spellcheck=\"false\"\n          autocapitalize=\"off\"\n          enterkeyhint=\"go\"\n          data-testid=\"command-palette-input\"\n          onInput={(event) => props.onQueryInput(event)}\n          onKeyDown={(event) => props.onKeyDown(event)}\n        />\n      </div>\n      <div\n        class=\"smwb-command-palette__results\"\n        tabindex={-1}\n        data-testid=\"command-palette-results\"\n        ref={props.resultsRef}\n      >\n        {/* The listbox exists only with at least one option: an empty one has no required\n            children, and a collapsed combobox may point nowhere. */}\n        <Show when={props.hasListbox}>\n          <ul\n            class=\"smwb-command-palette__listbox\"\n            id={props.listboxId}\n            role=\"listbox\"\n            aria-labelledby={props.inputId}\n            aria-busy={props.pending ? true : undefined}\n            data-testid=\"command-palette-listbox\"\n          >\n            <For each={props.groups}>\n              {(group) => (\n                <li class=\"smwb-command-palette__group\" role=\"group\" aria-labelledby={group.labelId}>\n                  <div class=\"smwb-command-palette__group-label\" id={group.labelId}>\n                    {group.label}\n                  </div>\n                  <ul class=\"smwb-command-palette__group-options\" role=\"presentation\">\n                    <For each={group.options}>\n                      {(option) => (\n                        <li\n                          class={cn(\"smwb-command-palette__item\", {\n                            \"smwb-command-palette__item_active\": props.activeKey === option.key,\n                            \"smwb-command-palette__item_disabled\": option.item.disabled,\n                          })}\n                          id={option.id}\n                          role=\"option\"\n                          aria-selected={props.activeKey === option.key ? true : undefined}\n                          aria-disabled={option.item.disabled ? true : undefined}\n                          aria-labelledby={`${option.id}-label`}\n                          aria-describedby={optionDescribedBy(option)}\n                          data-item-id={option.item.id}\n                          data-testid=\"command-palette-option\"\n                          onClick={() => props.onChoose(option)}\n                          onPointerMove={(event) => props.onHover(event, option)}\n                        >\n                          <Show when={option.item.icon !== undefined}>\n                            <span class=\"smwb-command-palette__item-icon\" aria-hidden=\"true\">\n                              {optionIcon(option.item.icon)}\n                            </span>\n                          </Show>\n                          <span class=\"smwb-command-palette__item-text\">\n                            <span class=\"smwb-command-palette__item-label\" id={`${option.id}-label`}>\n                              {option.item.label}\n                            </span>\n                            <Show when={option.item.subtitle !== undefined}>\n                              <span class=\"smwb-command-palette__item-subtitle\" id={`${option.id}-subtitle`}>\n                                {option.item.subtitle}\n                              </span>\n                            </Show>\n                          </span>\n                          <Show when={option.item.shortcut !== undefined}>\n                            <Kbd\n                              keys={option.item.shortcut ?? []}\n                              id={`${option.id}-shortcut`}\n                              class=\"smwb-command-palette__item-shortcut\"\n                            />\n                          </Show>\n                        </li>\n                      )}\n                    </For>\n                  </ul>\n                </li>\n              )}\n            </For>\n          </ul>\n        </Show>\n        <Show when={props.pending}>\n          <div class=\"smwb-command-palette__loading\" aria-hidden=\"true\" data-testid=\"command-palette-loading\">\n            <For each={LOADING_BAR_WIDTHS}>\n              {(width) => (\n                <div class=\"smwb-command-palette__loading-row\">\n                  <Skeleton variant=\"circular\" width={20} height={20} component=\"div\" />\n                  <Skeleton variant=\"text\" width={width} component=\"div\" />\n                </div>\n              )}\n            </For>\n          </div>\n        </Show>\n        <Show when={props.showError}>\n          <div\n            class={cn(\"smwb-command-palette__message\", \"smwb-command-palette__message_error\")}\n            data-testid=\"command-palette-error\"\n          >\n            {props.errorText}\n          </div>\n        </Show>\n        <Show when={props.showEmpty}>\n          <div class=\"smwb-command-palette__message\" data-testid=\"command-palette-empty\">\n            {props.noResultsText}\n          </div>\n        </Show>\n      </div>\n      <Show when={footer()}>\n        <div class=\"smwb-command-palette__footer\" data-testid=\"command-palette-footer\">\n          {footer()}\n        </div>\n      </Show>\n      {/* Inside the dialog: a live region outside an aria-modal one is ignored. */}\n      <div class=\"smwb-command-palette__status\" role=\"status\" data-testid=\"command-palette-status\">\n        {props.status}\n      </div>\n    </div>\n  );\n}\n\nexport interface CommandPaletteProps {\n  /**\n   * Whether the palette is open. Any value but `undefined` makes it controlled: the palette then\n   * shows this and only asks to change it through `onOpenChange`. While it is `undefined`, the\n   * palette keeps its own state, starting from `defaultOpen`.\n   */\n  open?: boolean | undefined;\n  /** Open state to start from while uncontrolled; `false` by default. */\n  defaultOpen?: boolean | undefined;\n  /**\n   * Called for every request to open or close: Escape, a backdrop click, and choosing an item while\n   * `closeOnSelect`. Called in both the controlled and the uncontrolled mode.\n   */\n  onOpenChange?: ((open: boolean) => void) | undefined;\n  /** The groups to search in, filtered locally by `filter`; empty by default. */\n  groups?: CommandPaletteGroup[] | undefined;\n  /**\n   * Recently used items, kept by the app (its local storage, its server, per user) and updated from\n   * `onSelect`. Shown as the first group while the query is empty, unfiltered, and hidden while\n   * the user searches.\n   */\n  recent?: CommandPaletteItem[] | undefined;\n  /** Heading of the recent group; `\"Recent\"` by default. */\n  recentLabel?: string | undefined;\n  /**\n   * The text in the search field. Any value but `undefined` makes it controlled: the field shows\n   * this and only reports edits through `onQueryChange`.\n   */\n  query?: string | undefined;\n  /** Text to start from while uncontrolled, and to reset to each time the palette opens; `\"\"`. */\n  defaultQuery?: string | undefined;\n  /** Called for every edit of the field, in both the controlled and the uncontrolled mode. */\n  onQueryChange?: ((query: string) => void) | undefined;\n  /**\n   * Decides which of `groups` an edit keeps; {@link commandPaletteFilter} by default. `false` shows\n   * `groups` as given, for an app that filters them itself or gets them filtered from a server.\n   * Never applied to `recent` or to the results of `source`.\n   */\n  filter?: CommandPaletteFilter | false | undefined;\n  /**\n   * Loads results for the trimmed query, after `debounce` ms of quiet typing. Its `signal` is\n   * aborted when a newer query, a close or an unmount makes the answer useless, and an answer that\n   * arrives for an older query is dropped. Appended after `groups`.\n   */\n  source?: CommandPaletteSource | undefined;\n  /** Milliseconds of quiet typing before `source` is called; `200` by default. */\n  debounce?: number | undefined;\n  /**\n   * `source` is called only when the trimmed query has at least this many characters; `1` by\n   * default. `0` also loads for the empty query.\n   */\n  minQueryLength?: number | undefined;\n  /**\n   * App-driven loading: shows the skeleton like a pending `source` does, for an app that loads\n   * itself with a controlled `query`; `false` by default.\n   */\n  loading?: boolean | undefined;\n  /**\n   * Called for every chosen item, after the item's own `onSelect`. The place for the app to move the\n   * item to the top of its `recent` list.\n   */\n  onSelect?: ((item: CommandPaletteItem, group: CommandPaletteGroup) => void) | undefined;\n  /** Ask to close when an item is chosen; `true` by default. */\n  closeOnSelect?: boolean | undefined;\n  /** Placeholder of the field; `\"Type a command or search…\"` by default. It is not its name. */\n  placeholder?: string | undefined;\n  /** Accessible name of the field and, through `aria-labelledby`, of the listbox; `\"Search commands\"`. */\n  searchLabel?: string | undefined;\n  /** Shown and announced when nothing matches; `\"No results\"` by default. */\n  noResultsText?: string | undefined;\n  /** Shown and announced when `source` rejects; `\"Couldn't load results\"` by default. */\n  errorText?: string | undefined;\n  /**\n   * Text of the polite announcement after a search settles; `\"1 result\"` or `\"N results\"` by\n   * default. Not used for zero results, which announce `noResultsText`.\n   */\n  resultsAnnouncement?: ((count: number) => string) | undefined;\n  /**\n   * Slot under the results, for key hints built with `Kbd`. Drawn only when given:\n   * `<>Press <Kbd keys={[\"Enter\"]} /> to run</>`.\n   */\n  footer?: JSX.Element | undefined;\n  /** Added to the dialog element, after `smwb-command-palette`. */\n  class?: string | undefined;\n  /** Name of the dialog; `\"Command palette\"` by default. Not set when `aria-labelledby` is given. */\n  \"aria-label\"?: string | undefined;\n  /** Id of the element that names the dialog; replaces the default `aria-label`. */\n  \"aria-labelledby\"?: string | undefined;\n  /** Ids of the elements that describe the dialog. */\n  \"aria-describedby\"?: string | undefined;\n  /** Test id of the dialog element; `\"command-palette\"` unless given. */\n  \"data-testid\"?: string | undefined;\n  /** Ref of the dialog element. */\n  ref?: Ref<HTMLDivElement> | undefined;\n}\n\n/**\n * Search and actions on ⌘K: a modal dialog with one search field and grouped results, for reaching\n * pages and running commands from the keyboard alone. Built on {@link Modal}, so it portals into the\n * body, traps the focus, closes on Escape only when it is the topmost overlay, and renders nothing on\n * the server.\n *\n * Results come from three places, drawn in this order: `recent` while the query is empty, `groups`\n * filtered locally by `filter`, and the answer of `source` for the current query. ArrowUp, ArrowDown,\n * PageUp and PageDown move the active option, Enter runs it, and Escape closes the palette. The first\n * enabled option is active as soon as the palette opens, so Enter runs the top hit.\n *\n * The palette does not bind Mod+K itself: the app does, with {@link createKeyboardShortcut}, so one\n * binding serves any opener and the same key list draws the hint.\n *\n * ```tsx\n * const [open, setOpen] = createSignal(false);\n * createKeyboardShortcut({ keys: [\"Mod\", \"K\"], onTrigger: () => setOpen(!open()) });\n * <Button onClick={() => setOpen(true)}>\n *   Search <Kbd keys={[\"Mod\", \"K\"]} />\n * </Button>\n * <CommandPalette open={open()} onOpenChange={setOpen} groups={groups} recent={recent()} onSelect={pick} />\n * ```\n *\n * Filtering is linear and the results are not virtualized, so an app that expects thousands of items\n * should cap each group (50 is a good start) or search on a server through `source`.\n */\nexport function CommandPalette(props: CommandPaletteProps): JSX.Element {\n  const local = mergeProps(\n    {\n      defaultOpen: false,\n      groups: [] as CommandPaletteGroup[],\n      recentLabel: \"Recent\",\n      defaultQuery: \"\",\n      filter: commandPaletteFilter as CommandPaletteFilter | false,\n      debounce: 200,\n      minQueryLength: 1,\n      loading: false,\n      closeOnSelect: true,\n      placeholder: \"Type a command or search…\",\n      searchLabel: \"Search commands\",\n      noResultsText: \"No results\",\n      errorText: \"Couldn't load results\",\n      resultsAnnouncement: defaultResultsAnnouncement,\n      \"aria-label\": \"Command palette\",\n      \"data-testid\": \"command-palette\",\n    },\n    props\n  );\n\n  // One call, in the palette's body and not in the portaled panel, so the server and the client\n  // consume ids in the same order.\n  const paletteId = createId(undefined, \"smwb-command-palette\");\n  const inputId = `${paletteId}-input`;\n  const listboxId = `${paletteId}-listbox`;\n\n  const [open, setOpen] = createControllableState<boolean>({\n    value: () => local.open,\n    defaultValue: local.defaultOpen,\n    onChange: (next) => local.onOpenChange?.(next),\n  });\n  const [query, setQuery] = createControllableState<string>({\n    value: () => local.query,\n    defaultValue: local.defaultQuery,\n    onChange: (next) => local.onQueryChange?.(next),\n  });\n  const trimmedQuery = createMemo(() => query().trim());\n\n  const [asyncAnswer, setAsyncAnswer] = createSignal<AsyncAnswer | null>(null);\n  const [failed, setFailed] = createSignal(false);\n  const [debouncing, setDebouncing] = createSignal(false);\n  const [inFlight, setInFlight] = createSignal(false);\n  /** A debounce timer waiting, a request in flight, or the app's own `loading`. */\n  const pending = (): boolean => debouncing() || inFlight() || local.loading;\n\n  // The rows in draw order: the recent group while the query is empty, the static groups the\n  // filter keeps, then the answer that belongs to the current query. A group left with no items\n  // is dropped, heading included.\n  const paletteGroups = createMemo<PaletteGroup[]>(() => {\n    const text = query();\n    const trimmed = trimmedQuery();\n    const drawn: PaletteGroup[] = [];\n    let optionIndex = 0;\n\n    const push = (key: string, label: string, group: CommandPaletteGroup, items: CommandPaletteItem[]): void => {\n      if (items.length === 0) return;\n      const options = items.map((item) => {\n        const option: PaletteOption = {\n          id: `${listboxId}-option-${optionIndex}`,\n          key: `${key}\\u0000${item.id}`,\n          item,\n          group,\n        };\n        optionIndex++;\n        return option;\n      });\n      drawn.push({ key, label, labelId: `${listboxId}-group-${drawn.length}`, options });\n    };\n\n    const recent = local.recent;\n    if (recent && trimmed === \"\") {\n      push(\"recent\", local.recentLabel, { id: \"recent\", label: local.recentLabel, items: recent }, recent);\n    }\n\n    const filter = local.filter;\n    for (const group of local.groups) {\n      const items = filter === false ? group.items : group.items.filter((item) => filter(item, text));\n      push(group.id ?? group.label, group.label, group, items);\n    }\n\n    const answer = asyncAnswer();\n    if (answer !== null && answer.query === trimmed) {\n      for (const group of answer.groups) {\n        push(group.id ?? group.label, group.label, group, group.items);\n      }\n    }\n\n    return drawn;\n  });\n\n  const flatOptions = createMemo<PaletteOption[]>(() => {\n    const options: PaletteOption[] = [];\n    for (const group of paletteGroups()) {\n      for (const option of group.options) options.push(option);\n    }\n    return options;\n  });\n\n  const isOptionEnabled = (index: number): boolean => {\n    const option = flatOptions()[index];\n    return option !== undefined && !option.item.disabled;\n  };\n\n  // The active option is kept by key, not by index: results that still hold it keep it active, and\n  // results that lost it move the active option to the first enabled one, or to none.\n  const [activeKey, setActiveKey] = createSignal<string | null>(null);\n  createEffect(() => {\n    const options = flatOptions();\n    const current = activeKey();\n    if (current !== null && options.some((option) => option.key === current && !option.item.disabled)) return;\n    const next = options[firstOption(options.length, isOptionEnabled)];\n    setActiveKey(next ? next.key : null);\n  });\n\n  const activeIndex = createMemo<number>(() => {\n    const key = activeKey();\n    if (key === null) return -1;\n    const options = flatOptions();\n    for (let index = 0; index < options.length; index++) {\n      const option = options[index];\n      if (option && option.key === key) return option.item.disabled ? -1 : index;\n    }\n    return -1;\n  });\n  const activeDescendant = (): string | undefined => {\n    const index = activeIndex();\n    return index >= 0 ? flatOptions()[index]?.id : undefined;\n  };\n\n  let timer: ReturnType<typeof setTimeout> | undefined;\n  let controller: AbortController | undefined;\n  let resultsEl: HTMLDivElement | undefined;\n  let scrollAfterMove = false;\n  let lastPointer: { x: number; y: number } | undefined;\n  let announceTimer: ReturnType<typeof setTimeout> | undefined;\n\n  const cancelRequest = (): void => {\n    if (timer !== undefined) {\n      clearTimeout(timer);\n      timer = undefined;\n    }\n    if (controller !== undefined) {\n      controller.abort();\n      controller = undefined;\n    }\n  };\n\n  const request = (source: CommandPaletteSource, trimmed: string): void => {\n    const current = new AbortController();\n    controller = current;\n    setInFlight(true);\n    void source(trimmed, { signal: current.signal }).then(\n      (groups) => {\n        // An answer is applied only while its request is still the current one, so a source that\n        // ignores `signal` cannot show results for another query.\n        if (controller !== current || current.signal.aborted) return;\n        controller = undefined;\n        setInFlight(false);\n        setAsyncAnswer({ query: trimmed, groups });\n      },\n      (error: unknown) => {\n        if (controller !== current || current.signal.aborted) return;\n        controller = undefined;\n        setInFlight(false);\n        if (!isAbortError(error)) setFailed(true);\n      }\n    );\n  };\n\n  // A new query, or a close, leaves the previous answer behind: it belongs to another query.\n  createEffect(() => {\n    const isOpen = open();\n    const trimmed = trimmedQuery();\n    // Untracked: a caller's inline `source` is a new function on every read, and neither it nor a\n    // changed `debounce` may start a request of its own.\n    untrack(() => {\n      cancelRequest();\n      setDebouncing(false);\n      setInFlight(false);\n      setAsyncAnswer(null);\n      setFailed(false);\n      if (!isOpen) return;\n      const source = local.source;\n      if (!source || trimmed.length < local.minQueryLength) return;\n      setDebouncing(true);\n      timer = setTimeout(() => {\n        timer = undefined;\n        setDebouncing(false);\n        request(source, trimmed);\n      }, Math.max(0, local.debounce));\n    });\n  });\n\n  // Each open starts again from `defaultQuery`, while uncontrolled, and on the first enabled\n  // option, so Enter runs the top hit. The focus trap and the focus return are Modal's: it captures\n  // the opener itself when the dialog opens and returns to it only if nothing else took the focus.\n  createEffect(\n    on(\n      open,\n      (isOpen) => {\n        if (isOpen) {\n          if (local.query === undefined) setQuery(local.defaultQuery);\n          setActiveKey(null);\n        }\n      },\n      { defer: true }\n    )\n  );\n\n  // The results are announced once they settle, and a newer edit restarts the wait, so fast typing\n  // makes no chatter. Loading itself is not announced: `aria-busy` covers it and the count follows.\n  const [status, setStatus] = createSignal(\"\");\n  createEffect(() => {\n    const isOpen = open();\n    const trimmed = trimmedQuery();\n    const isPending = pending();\n    const count = flatOptions().length;\n    const didFail = failed();\n    untrack(() => {\n      if (announceTimer !== undefined) {\n        clearTimeout(announceTimer);\n        announceTimer = undefined;\n      }\n      if (!isOpen || trimmed === \"\") {\n        setStatus(\"\");\n        return;\n      }\n      if (isPending) return;\n      const text = didFail ? local.errorText : count === 0 ? local.noResultsText : local.resultsAnnouncement(count);\n      announceTimer = setTimeout(() => {\n        announceTimer = undefined;\n        setStatus(text);\n      }, ANNOUNCE_DELAY);\n    });\n  });\n\n  // Only a key scrolls the option into view: a pointer resting on a row while the results move\n  // under it must not.\n  createEffect(() => {\n    const index = activeIndex();\n    if (!scrollAfterMove) return;\n    scrollAfterMove = false;\n    const option = flatOptions()[index];\n    if (!option || !resultsEl) return;\n    const element = resultsEl.querySelector<HTMLElement>(`[id=\"${option.id}\"]`);\n    if (element) keepInView(element, resultsEl);\n  });\n\n  onCleanup(() => {\n    cancelRequest();\n    if (announceTimer !== undefined) {\n      clearTimeout(announceTimer);\n      announceTimer = undefined;\n    }\n  });\n\n  const choose = (item: CommandPaletteItem, group: CommandPaletteGroup): void => {\n    if (item.disabled) return;\n    // Closing first lets focus that a handler moves win over the trap handing it back to the opener.\n    if (local.closeOnSelect) setOpen(false);\n    item.onSelect?.();\n    local.onSelect?.(item, group);\n  };\n\n  const moveActive = (event: KeyboardEvent, steps: number): void => {\n    event.preventDefault();\n    const options = flatOptions();\n    const next = options[moveOption(options.length, isOptionEnabled, activeIndex(), steps)];\n    if (!next || next.key === activeKey()) return;\n    setActiveKey(next.key);\n    scrollAfterMove = true;\n  };\n\n  const onKeyDown = (event: KeyboardEvent): void => {\n    // While an IME composition is open the keys belong to it. Escape then cancels the composition,\n    // so it is marked handled and Modal leaves the palette open.\n    if (event.isComposing || event.keyCode === 229) {\n      if (event.key === \"Escape\") event.preventDefault();\n      return;\n    }\n    // Modified keys stay with the field and the browser: Shift+ArrowDown selects text, Ctrl+Enter\n    // belongs to the app. Nothing here stops propagation — Modal's Escape listener and the app's\n    // Mod+K hook are on the document, and a stopped key never reaches them.\n    if (event.ctrlKey || event.metaKey || event.altKey || event.shiftKey) return;\n    switch (event.key) {\n      case \"ArrowDown\":\n        moveActive(event, 1);\n        break;\n      case \"ArrowUp\":\n        moveActive(event, -1);\n        break;\n      case \"PageDown\":\n        moveActive(event, PAGE_STEP);\n        break;\n      case \"PageUp\":\n        moveActive(event, -PAGE_STEP);\n        break;\n      case \"Enter\": {\n        // Always prevented: the field must not submit a form around it.\n        event.preventDefault();\n        const option = flatOptions()[activeIndex()];\n        if (option) choose(option.item, option.group);\n        break;\n      }\n    }\n  };\n\n  const onQueryInput = (event: QueryInputEvent): void => {\n    const text = event.currentTarget.value;\n    setQuery(text);\n    // A controlled caller that ignores the edit gets its own text back, as React DOM does.\n    const shown = query();\n    if (shown !== text) event.currentTarget.value = shown;\n  };\n\n  const onHover = (event: PointerEvent, option: PaletteOption): void => {\n    if (option.item.disabled) return;\n    // Only a real move counts: results scrolling under a resting pointer would otherwise keep\n    // taking the active option.\n    if (lastPointer && lastPointer.x === event.clientX && lastPointer.y === event.clientY) return;\n    lastPointer = { x: event.clientX, y: event.clientY };\n    setActiveKey(option.key);\n  };\n\n  // Modal's props type has no `data-testid`, and its optional aria props take no explicit\n  // `undefined`, so the dialog's own attributes go in as one precisely-typed spread.\n  const dialogAttributes = (): DialogAttributes => {\n    const attributes: DialogAttributes = { \"data-testid\": local[\"data-testid\"] };\n    if (local[\"aria-labelledby\"] !== undefined) attributes[\"aria-labelledby\"] = local[\"aria-labelledby\"];\n    else attributes[\"aria-label\"] = local[\"aria-label\"];\n    if (local[\"aria-describedby\"] !== undefined) attributes[\"aria-describedby\"] = local[\"aria-describedby\"];\n    return attributes;\n  };\n\n  return (\n    <Modal\n      open={open()}\n      onClose={() => setOpen(false)}\n      size=\"medium\"\n      animation=\"fade\"\n      backdrop=\"dark\"\n      closeOnEsc\n      closeOnOutsideClick\n      class={cn(\"smwb-command-palette\", local.class)}\n      ref={local.ref}\n      {...dialogAttributes()}\n    >\n      <CommandPalettePanel\n        inputId={inputId}\n        listboxId={listboxId}\n        value={query()}\n        placeholder={local.placeholder}\n        searchLabel={local.searchLabel}\n        groups={paletteGroups()}\n        activeKey={activeKey()}\n        activeDescendant={activeDescendant()}\n        hasListbox={flatOptions().length > 0}\n        pending={pending()}\n        showEmpty={!pending() && !failed() && flatOptions().length === 0}\n        showError={failed()}\n        noResultsText={local.noResultsText}\n        errorText={local.errorText}\n        status={status()}\n        footer={local.footer}\n        resultsRef={(element) => (resultsEl = element)}\n        onQueryInput={onQueryInput}\n        onKeyDown={onKeyDown}\n        onChoose={(option) => choose(option.item, option.group)}\n        onHover={onHover}\n      />\n    </Modal>\n  );\n}\n\nexport default CommandPalette;\n"],"names":["PAGE_STEP","ANNOUNCE_DELAY","LOADING_BAR_WIDTHS","defaultResultsAnnouncement","count","isAbortError","error","name","optionDescribedBy","option","ids","item","subtitle","undefined","push","id","shortcut","length","join","optionIcon","icon","_$createComponent","Icon","size","CommandPalettePanel","props","inputEl","atStart","value","createEffect","previous","next","footer","children","onPanelMouseDown","event","target","preventDefault","onMount","focus","preventScroll","_el$","_tmpl$6","_el$2","firstChild","_el$3","_el$4","nextSibling","_el$5","_el$1","$$mousedown","_$insert","$$keydown","onKeyDown","$$input","onQueryInput","_$use","element","_ref$","resultsRef","Show","when","hasListbox","_el$6","_tmpl$","For","each","groups","group","_el$10","_tmpl$7","_el$11","_el$12","label","options","_el$13","_tmpl$0","_el$15","_el$16","$$pointermove","onHover","$$click","onChoose","_el$14","_tmpl$8","_el$17","_tmpl$9","_$effect","_$setAttribute","Kbd","keys","_p$","_v$10","cn","activeKey","key","disabled","_v$11","_v$12","_v$13","_v$14","_v$15","_v$16","_v$17","e","_$className","t","a","o","i","n","s","h","_v$0","labelId","_v$1","_v$","listboxId","_v$2","inputId","_v$3","pending","_el$7","_tmpl$2","width","_el$18","_tmpl$1","Skeleton","variant","height","component","showError","_el$8","_tmpl$3","errorText","showEmpty","_el$9","_tmpl$4","noResultsText","_el$0","_tmpl$5","status","_v$4","_v$5","placeholder","_v$6","searchLabel","_v$7","_v$8","_v$9","activeDescendant","CommandPalette","local","mergeProps","defaultOpen","recentLabel","defaultQuery","filter","commandPaletteFilter","debounce","minQueryLength","loading","closeOnSelect","resultsAnnouncement","paletteId","createId","open","setOpen","createControllableState","defaultValue","onChange","onOpenChange","query","setQuery","onQueryChange","trimmedQuery","createMemo","trim","asyncAnswer","setAsyncAnswer","createSignal","failed","setFailed","debouncing","setDebouncing","inFlight","setInFlight","paletteGroups","text","trimmed","drawn","optionIndex","items","map","recent","answer","flatOptions","isOptionEnabled","index","setActiveKey","current","some","firstOption","activeIndex","timer","controller","resultsEl","scrollAfterMove","lastPointer","announceTimer","cancelRequest","clearTimeout","abort","request","source","AbortController","signal","then","aborted","isOpen","untrack","setTimeout","Math","max","on","defer","setStatus","isPending","didFail","querySelector","keepInView","onCleanup","choose","onSelect","moveActive","steps","moveOption","isComposing","keyCode","ctrlKey","metaKey","altKey","shiftKey","currentTarget","shown","x","clientX","y","clientY","Modal","_$mergeProps","onClose","animation","backdrop","closeOnEsc","closeOnOutsideClick","class","ref","r$","_ref$2","dialogAttributes","attributes","_$memo","_$delegateEvents"],"mappings":"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"}

package/dist/headless/components/navigation/commandPalette/commandPaletteFilter.js

@@ -0,0 +1,15 @@
+function r(e) {
+  return e.normalize("NFD").replace(/[̀-ͯ]/g, "").toLowerCase();
+}
+const s = (e, n) => {
+  const t = r(n).split(/\s+/).filter(Boolean);
+  if (t.length === 0)
+    return !0;
+  const o = r([e.label, e.subtitle ?? "", ...e.keywords ?? []].join(" "));
+  return t.every((l) => o.includes(l));
+};
+export {
+  s as commandPaletteFilter,
+  r as normalizeSearchText
+};
+//# sourceMappingURL=commandPaletteFilter.js.map

package/dist/headless/components/navigation/commandPalette/commandPaletteFilter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"commandPaletteFilter.js","sources":["../../../../../src/components/navigation/commandPalette/commandPaletteFilter.ts"],"sourcesContent":["import type { CommandPaletteFilter } from \"./commandPaletteTypes\";\n\n/**\n * Lower case, without combining marks: \"Café\" → \"cafe\", \"Ёжик\" → \"ежик\". A side effect of dropping the marks\n * is that \"й\" reads as \"и\", so a query with \"и\" also finds words with \"й\".\n */\nexport function normalizeSearchText(text: string): string {\n  return text.normalize(\"NFD\").replace(/[̀-ͯ]/g, \"\").toLowerCase();\n}\n\n/**\n * The palette's default filter: every word of the query occurs in the label, the subtitle or a keyword,\n * ignoring case and accents. An empty query matches everything. It never reorders items.\n */\nexport const commandPaletteFilter: CommandPaletteFilter = (item, query) => {\n  const words = normalizeSearchText(query).split(/\\s+/).filter(Boolean);\n  if (words.length === 0) {\n    return true;\n  }\n  const text = normalizeSearchText([item.label, item.subtitle ?? \"\", ...(item.keywords ?? [])].join(\" \"));\n  return words.every((word) => text.includes(word));\n};\n"],"names":["normalizeSearchText","text","commandPaletteFilter","item","query","words","word"],"mappings":"AAMO,SAASA,EAAoBC,GAAsB;AACxD,SAAOA,EAAK,UAAU,KAAK,EAAE,QAAQ,UAAU,EAAE,EAAE,YAAA;AACrD;AAMO,MAAMC,IAA6C,CAACC,GAAMC,MAAU;AACzE,QAAMC,IAAQL,EAAoBI,CAAK,EAAE,MAAM,KAAK,EAAE,OAAO,OAAO;AACpE,MAAIC,EAAM,WAAW;AACnB,WAAO;AAET,QAAMJ,IAAOD,EAAoB,CAACG,EAAK,OAAOA,EAAK,YAAY,IAAI,GAAIA,EAAK,YAAY,CAAA,CAAG,EAAE,KAAK,GAAG,CAAC;AACtG,SAAOE,EAAM,MAAM,CAACC,MAASL,EAAK,SAASK,CAAI,CAAC;AAClD;"}

package/dist/headless/components/navigation/commandPalette/commandPaletteNavigation.js

@@ -0,0 +1,38 @@
+function c(e, o) {
+  for (let t = 0; t < e; t++)
+    if (o(t))
+      return t;
+  return -1;
+}
+function u(e, o) {
+  for (let t = e - 1; t >= 0; t--)
+    if (o(t))
+      return t;
+  return -1;
+}
+function p(e, o, t, n) {
+  if (t < 0)
+    return n > 0 ? c(e, o) : u(e, o);
+  const i = n > 0 ? 1 : -1;
+  let l = t, f = Math.abs(n);
+  for (let r = t + i; r >= 0 && r < e && f > 0; r += i)
+    o(r) && (l = r, f--);
+  return l;
+}
+function g(e, o) {
+  for (let t = e.parentElement; t; t = t.parentElement) {
+    if (t.scrollHeight > t.clientHeight) {
+      const n = t.getBoundingClientRect(), i = e.getBoundingClientRect();
+      i.top < n.top ? t.scrollTop -= n.top - i.top : i.bottom > n.bottom && (t.scrollTop += i.bottom - n.bottom);
+    }
+    if (t === o)
+      break;
+  }
+}
+export {
+  c as firstOption,
+  g as keepInView,
+  u as lastOption,
+  p as moveOption
+};
+//# sourceMappingURL=commandPaletteNavigation.js.map

package/dist/headless/components/navigation/commandPalette/commandPaletteNavigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"commandPaletteNavigation.js","sources":["../../../../../src/components/navigation/commandPalette/commandPaletteNavigation.ts"],"sourcesContent":["// Moves of the active option over the palette's options, by index in the order they are drawn.\n// A disabled option is passed over. A copy of the helpers of the select field's listbox: importing\n// them from there would make the palette depend on the select field's styles.\n\nexport type IsOptionEnabled = (index: number) => boolean;\n\n/** The first enabled option, or -1. */\nexport function firstOption(count: number, isEnabled: IsOptionEnabled): number {\n  for (let index = 0; index < count; index++) {\n    if (isEnabled(index)) {\n      return index;\n    }\n  }\n  return -1;\n}\n\n/** The last enabled option, or -1. */\nexport function lastOption(count: number, isEnabled: IsOptionEnabled): number {\n  for (let index = count - 1; index >= 0; index--) {\n    if (isEnabled(index)) {\n      return index;\n    }\n  }\n  return -1;\n}\n\n/**\n * The enabled option `steps` options after `from` (before it for a negative\n * count), stopping at the first or the last one. With no active option, a move\n * down starts at the first option and a move up at the last.\n */\nexport function moveOption(count: number, isEnabled: IsOptionEnabled, from: number, steps: number): number {\n  if (from < 0) {\n    return steps > 0 ? firstOption(count, isEnabled) : lastOption(count, isEnabled);\n  }\n  const direction = steps > 0 ? 1 : -1;\n  let result = from;\n  let left = Math.abs(steps);\n  for (let index = from + direction; index >= 0 && index < count && left > 0; index += direction) {\n    if (isEnabled(index)) {\n      result = index;\n      left--;\n    }\n  }\n  return result;\n}\n\n/** Scrolls each scrolling box from the element up to `root` so the element shows. */\nexport function keepInView(element: HTMLElement, root: HTMLElement | null) {\n  for (let box = element.parentElement; box; box = box.parentElement) {\n    if (box.scrollHeight > box.clientHeight) {\n      const outer = box.getBoundingClientRect();\n      const inner = element.getBoundingClientRect();\n      if (inner.top < outer.top) {\n        box.scrollTop -= outer.top - inner.top;\n      } else if (inner.bottom > outer.bottom) {\n        box.scrollTop += inner.bottom - outer.bottom;\n      }\n    }\n    if (box === root) {\n      break;\n    }\n  }\n}\n"],"names":["firstOption","count","isEnabled","index","lastOption","moveOption","from","steps","direction","result","left","keepInView","element","root","box","outer","inner"],"mappings":"AAOO,SAASA,EAAYC,GAAeC,GAAoC;AAC7E,WAASC,IAAQ,GAAGA,IAAQF,GAAOE;AACjC,QAAID,EAAUC,CAAK;AACjB,aAAOA;AAGX,SAAO;AACT;AAGO,SAASC,EAAWH,GAAeC,GAAoC;AAC5E,WAASC,IAAQF,IAAQ,GAAGE,KAAS,GAAGA;AACtC,QAAID,EAAUC,CAAK;AACjB,aAAOA;AAGX,SAAO;AACT;AAOO,SAASE,EAAWJ,GAAeC,GAA4BI,GAAcC,GAAuB;AACzG,MAAID,IAAO;AACT,WAAOC,IAAQ,IAAIP,EAAYC,GAAOC,CAAS,IAAIE,EAAWH,GAAOC,CAAS;AAEhF,QAAMM,IAAYD,IAAQ,IAAI,IAAI;AAClC,MAAIE,IAASH,GACTI,IAAO,KAAK,IAAIH,CAAK;AACzB,WAASJ,IAAQG,IAAOE,GAAWL,KAAS,KAAKA,IAAQF,KAASS,IAAO,GAAGP,KAASK;AACnF,IAAIN,EAAUC,CAAK,MACjBM,IAASN,GACTO;AAGJ,SAAOD;AACT;AAGO,SAASE,EAAWC,GAAsBC,GAA0B;AACzE,WAASC,IAAMF,EAAQ,eAAeE,GAAKA,IAAMA,EAAI,eAAe;AAClE,QAAIA,EAAI,eAAeA,EAAI,cAAc;AACvC,YAAMC,IAAQD,EAAI,sBAAA,GACZE,IAAQJ,EAAQ,sBAAA;AACtB,MAAII,EAAM,MAAMD,EAAM,MACpBD,EAAI,aAAaC,EAAM,MAAMC,EAAM,MAC1BA,EAAM,SAASD,EAAM,WAC9BD,EAAI,aAAaE,EAAM,SAASD,EAAM;AAAA,IAE1C;AACA,QAAID,MAAQD;AACV;AAAA,EAEJ;AACF;"}