@smwb/ui-solid 0.13.0 → 1.0.0

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

@@ -1,49 +1,87 @@
-import { createComponent as o, Dynamic as u, mergeProps as h, insert as r, effect as w, className as $, template as d } from "solid-js/web";
-import { mergeProps as v, splitProps as C, children as p, Show as m } from "solid-js";
+import { createComponent as p, Dynamic as h, mergeProps as $, insert as r, memo as v, effect as g, className as C, template as a } from "solid-js/web";
+import { mergeProps as A, splitProps as P, children as _, Show as m } from "solid-js";
 import c from "clsx";
-import { mergeRefs as A } from "../../../primitives/mergeRefs.js";
-var P = /* @__PURE__ */ d("<div class=smwb-appbar__left__title>"), x = /* @__PURE__ */ d("<div class=smwb-appbar__inner><div class=smwb-appbar__left></div><div></div><div class=smwb-appbar__right>");
-function D(f) {
-  const b = v({
+import { mergeRefs as x } from "../../../primitives/mergeRefs.js";
+var y = /* @__PURE__ */ a("<div class=smwb-appbar__inner><div class=smwb-appbar__left></div><div></div><div class=smwb-appbar__right>"), S = /* @__PURE__ */ a("<h1 class=smwb-appbar__left__title>"), k = /* @__PURE__ */ a("<h2 class=smwb-appbar__left__title>"), B = /* @__PURE__ */ a("<h3 class=smwb-appbar__left__title>"), D = /* @__PURE__ */ a("<h4 class=smwb-appbar__left__title>"), N = /* @__PURE__ */ a("<h5 class=smwb-appbar__left__title>"), R = /* @__PURE__ */ a("<h6 class=smwb-appbar__left__title>"), j = /* @__PURE__ */ a("<div class=smwb-appbar__left__title>");
+function G(d) {
+  const w = A({
     position: "static",
     placement: "top",
     midContentAlign: "middle",
+    variant: "default",
+    windowControls: "auto",
     color: "default"
-  }, f), [e, g] = C(b, ["class", "children", "dense", "position", "placement", "leftContent", "midContent", "midContentAlign", "rightContent", "title", "color", "ref", "data-testid"]), i = p(() => e.children), a = p(() => i() ? void 0 : e.title);
-  return o(u, h({
+  }, d), [t, b] = P(w, ["class", "children", "dense", "position", "placement", "leftContent", "midContent", "midContentAlign", "variant", "windowControls", "rightContent", "title", "titleAs", "color", "ref", "data-testid"]), i = _(() => t.children), n = _(() => i() ? void 0 : t.title);
+  return p(h, $({
     get component() {
-      return e.placement === "top" ? "header" : "footer";
+      return t.placement === "top" ? "header" : "footer";
     }
-  }, g, {
-    ref(n) {
-      var t = A(e.ref);
-      typeof t == "function" && t(n);
+  }, b, {
+    ref(s) {
+      var l = x(t.ref);
+      typeof l == "function" && l(s);
     },
     get "data-testid"() {
-      return e["data-testid"] ?? "app-bar";
+      return t["data-testid"] ?? "app-bar";
     },
     get class() {
-      return c("smwb-appbar", e.class, `smwb-${e.position}`, `smwb-${e.placement}`, {
-        "smwb-dense": e.dense
-      }, e.color !== "default" && `smwb-appbar_color-${e.color}`);
+      return c("smwb-appbar", t.class, `smwb-${t.position}`, `smwb-${t.placement}`, {
+        "smwb-dense": t.dense
+      }, t.color !== "default" && `smwb-appbar_color-${t.color}`, t.variant === "window" && "smwb-appbar_variant-window", t.variant === "window" && t.windowControls !== "auto" && `smwb-appbar_window-controls-${t.windowControls}`);
     },
     get children() {
-      return o(m, {
+      return p(m, {
         get when() {
           return i();
         },
         get fallback() {
           return (() => {
-            var n = x(), t = n.firstChild, l = t.nextSibling, _ = l.nextSibling;
-            return r(t, o(m, {
+            var s = y(), l = s.firstChild, o = l.nextSibling, u = o.nextSibling;
+            return r(l, p(m, {
+              keyed: !0,
               get when() {
-                return a();
+                return v(() => !!n())() && (t.titleAs ?? "div");
               },
-              get children() {
-                var s = P();
-                return r(s, a), s;
+              children: (f) => {
+                switch (f) {
+                  case "h1":
+                    return (() => {
+                      var e = S();
+                      return r(e, n), e;
+                    })();
+                  case "h2":
+                    return (() => {
+                      var e = k();
+                      return r(e, n), e;
+                    })();
+                  case "h3":
+                    return (() => {
+                      var e = B();
+                      return r(e, n), e;
+                    })();
+                  case "h4":
+                    return (() => {
+                      var e = D();
+                      return r(e, n), e;
+                    })();
+                  case "h5":
+                    return (() => {
+                      var e = N();
+                      return r(e, n), e;
+                    })();
+                  case "h6":
+                    return (() => {
+                      var e = R();
+                      return r(e, n), e;
+                    })();
+                  default:
+                    return (() => {
+                      var e = j();
+                      return r(e, n), e;
+                    })();
+                }
               }
-            }), null), r(t, () => e.leftContent, null), r(l, () => e.midContent), r(_, () => e.rightContent), w(() => $(l, c("smwb-appbar__mid", `smwb-${e.midContentAlign}`))), n;
+            }), null), r(l, () => t.leftContent, null), r(o, () => t.midContent), r(u, () => t.rightContent), g(() => C(o, c("smwb-appbar__mid", `smwb-${t.midContentAlign}`))), s;
           })();
         },
         get children() {
@@ -54,6 +92,6 @@ function D(f) {
   }));
 }
 export {
-  D as AppBar
+  G as AppBar
 };
 //# sourceMappingURL=appBar.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"appBar.js","sources":["../../../../../src/components/navigation/appBar/appBar.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, children, mergeProps, splitProps } from \"solid-js\";\nimport { Dynamic } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport type AppBarColor = \"default\" | \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n\nexport interface AppBarProps extends Omit<JSX.HTMLAttributes<HTMLElement>, \"title\"> {\n  dense?: boolean;\n  position?: \"relative\" | \"static\" | \"absolute\" | \"sticky\" | \"fixed\";\n  placement?: \"top\" | \"bottom\";\n  leftContent?: JSX.Element;\n  midContent?: JSX.Element;\n  rightContent?: JSX.Element;\n  title?: JSX.Element | string;\n  midContentAlign?: \"middle\" | \"left\" | \"right\";\n  /** Semantic background color. */\n  color?: AppBarColor;\n  /** Test id of the root (`<header>`, or `<footer>` at the bottom); `app-bar` unless given. */\n  \"data-testid\"?: string | undefined;\n  ref?: Ref<HTMLElement>;\n}\n\nexport function AppBar(props: ParentProps<AppBarProps>): JSX.Element {\n  const merged = mergeProps(\n    {\n      position: \"static\" as const,\n      placement: \"top\" as const,\n      midContentAlign: \"middle\" as const,\n      color: \"default\" as AppBarColor,\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"children\",\n    \"dense\",\n    \"position\",\n    \"placement\",\n    \"leftContent\",\n    \"midContent\",\n    \"midContentAlign\",\n    \"rightContent\",\n    \"title\",\n    \"color\",\n    \"ref\",\n    \"data-testid\",\n  ]);\n\n  // Read each slot once: markup passed as a prop is created anew on every read,\n  // and during hydration a copy the server never rendered has no DOM node.\n  const content = children(() => local.children);\n  // The title is drawn only without children, so it is read only then.\n  const title = children(() => (content() ? undefined : local.title));\n\n  return (\n    <Dynamic\n      component={local.placement === \"top\" ? \"header\" : \"footer\"}\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      data-testid={local[\"data-testid\"] ?? \"app-bar\"}\n      class={cn(\n        \"smwb-appbar\",\n        local.class,\n        `smwb-${local.position}`,\n        `smwb-${local.placement}`,\n        { \"smwb-dense\": local.dense },\n        local.color !== \"default\" && `smwb-appbar_color-${local.color}`\n      )}\n    >\n      <Show\n        when={content()}\n        fallback={\n          <div class=\"smwb-appbar__inner\">\n            <div class=\"smwb-appbar__left\">\n              <Show when={title()}>\n                <div class=\"smwb-appbar__left__title\">{title()}</div>\n              </Show>\n              {local.leftContent}\n            </div>\n            <div class={cn(\"smwb-appbar__mid\", `smwb-${local.midContentAlign}`)}>{local.midContent}</div>\n            <div class=\"smwb-appbar__right\">{local.rightContent}</div>\n          </div>\n        }\n      >\n        {content()}\n      </Show>\n    </Dynamic>\n  );\n}\n\nexport default AppBar;\n"],"names":["AppBar","props","merged","mergeProps","position","placement","midContentAlign","color","local","rest","splitProps","content","children","title","undefined","_$createComponent","Dynamic","_$mergeProps","component","ref","r$","_ref$","mergeRefs","cn","class","dense","Show","when","fallback","_el$","_tmpl$2","_el$2","firstChild","_el$4","nextSibling","_el$5","_$insert","_el$3","_tmpl$","leftContent","midContent","rightContent","_$effect","_$className"],"mappings":";;;;;AAuBO,SAASA,EAAOC,GAA8C;AACnE,QAAMC,IAASC,EACb;AAAA,IACEC,UAAU;AAAA,IACVC,WAAW;AAAA,IACXC,iBAAiB;AAAA,IACjBC,OAAO;AAAA,EAAA,GAETN,CACF,GACM,CAACO,GAAOC,CAAI,IAAIC,EAAWR,GAAQ,CACvC,SACA,YACA,SACA,YACA,aACA,eACA,cACA,mBACA,gBACA,SACA,SACA,OACA,aAAa,CACd,GAIKS,IAAUC,EAAS,MAAMJ,EAAMI,QAAQ,GAEvCC,IAAQD,EAAS,MAAOD,MAAYG,SAAYN,EAAMK,KAAM;AAElE,SAAAE,EACGC,GAAOC,EAAA;AAAA,IAAA,IACNC,YAAS;AAAA,aAAEV,EAAMH,cAAc,QAAQ,WAAW;AAAA,IAAQ;AAAA,EAAA,GACtDI,GAAI;AAAA,IAAAU,IAAAC,GAAA;AAAA,UAAAC,IACHC,EAAUd,EAAMW,GAAG;AAAC,aAAAE,KAAA,cAAAA,EAAAD,CAAA;AAAA,IAAA;AAAA,IAAA,IAAA,gBAAA;AAAA,aACZZ,EAAM,aAAa,KAAK;AAAA,IAAS;AAAA,IAAA,IAAA,QAAA;AAAA,aACvCe,EACL,eACAf,EAAMgB,OACN,QAAQhB,EAAMJ,QAAQ,IACtB,QAAQI,EAAMH,SAAS,IACvB;AAAA,QAAE,cAAcG,EAAMiB;AAAAA,MAAAA,GACtBjB,EAAMD,UAAU,aAAa,qBAAqBC,EAAMD,KAAK,EAC/D;AAAA,IAAC;AAAA,IAAA,IAAAK,WAAA;AAAA,aAAAG,EAEAW,GAAI;AAAA,QAAA,IACHC,OAAI;AAAA,iBAAEhB,EAAAA;AAAAA,QAAS;AAAA,QAAA,IACfiB,WAAQ;AAAA,kBAAA,MAAA;AAAA,gBAAAC,IAAAC,KAAAC,IAAAF,EAAAG,YAAAC,IAAAF,EAAAG,aAAAC,IAAAF,EAAAC;AAAAE,mBAAAA,EAAAL,GAAAhB,EAGDW,GAAI;AAAA,cAAA,IAACC,OAAI;AAAA,uBAAEd,EAAAA;AAAAA,cAAO;AAAA,cAAA,IAAAD,WAAA;AAAA,oBAAAyB,IAAAC,EAAAA;AAAAF,uBAAAA,EAAAC,GACsBxB,CAAK,GAAAwB;AAAAA,cAAA;AAAA,YAAA,CAAA,GAAA,IAAA,GAAAD,EAAAL,GAAA,MAE7CvB,EAAM+B,aAAW,IAAA,GAAAH,EAAAH,GAAA,MAEkDzB,EAAMgC,UAAU,GAAAJ,EAAAD,GAAA,MACrD3B,EAAMiC,YAAY,GAAAC,EAAA,MAAAC,EAAAV,GADvCV,EAAG,oBAAoB,QAAQf,EAAMF,eAAe,EAAE,CAAC,CAAA,GAAAuB;AAAAA,UAAA,GAAA;AAAA,QAAA;AAAA,QAAA,IAAAjB,WAAA;AAAA,iBAKtED,EAAAA;AAAAA,QAAS;AAAA,MAAA,CAAA;AAAA,IAAA;AAAA,EAAA,CAAA,CAAA;AAIlB;"}
+{"version":3,"file":"appBar.js","sources":["../../../../../src/components/navigation/appBar/appBar.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, children, mergeProps, splitProps } from \"solid-js\";\nimport { Dynamic } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport type AppBarColor = \"default\" | \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n\nexport interface AppBarProps extends Omit<JSX.HTMLAttributes<HTMLElement>, \"title\"> {\n  dense?: boolean;\n  position?: \"relative\" | \"static\" | \"absolute\" | \"sticky\" | \"fixed\";\n  placement?: \"top\" | \"bottom\";\n  leftContent?: JSX.Element;\n  midContent?: JSX.Element;\n  rightContent?: JSX.Element;\n  title?: JSX.Element | string;\n  /**\n   * Tag the `title` is rendered in: a `div` (default) or a heading, `h1`–`h6`,\n   * for the page's main heading. Only the tag changes — a heading is drawn with\n   * the bar's own font size, weight and no margins, so it looks exactly like the\n   * div. The heading's text is the `title` itself, so pass a string or plain\n   * markup rather than a `Typography` heading.\n   */\n  titleAs?: \"div\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n  midContentAlign?: \"middle\" | \"left\" | \"right\";\n  /**\n   * `window`: the bar is the title bar of a desktop app window (Electron, Tauri, an installed PWA with Window\n   * Controls Overlay). The bar drags the window; buttons, links, fields and other controls in it stay clickable,\n   * and room is left for the OS window buttons (`windowControls`). In a plain browser tab it looks like `default`.\n   */\n  variant?: \"default\" | \"window\";\n  /**\n   * With `variant=\"window\"`: where the OS window buttons are, so the bar's content keeps clear of them.\n   * `auto` (default) takes the area from the shell's `env(titlebar-area-*)` (Window Controls Overlay, Electron\n   * `titleBarOverlay`) and reserves nothing without it; `left` is macOS (traffic lights, `titleBarStyle: \"hiddenInset\"`),\n   * `right` is Windows/Linux caption buttons drawn by the OS; `none` reserves nothing. The reserved width is\n   * the `--smui-appBarWindowControlsWidth` custom property (64px on the left, 138px on the right by default).\n   */\n  windowControls?: \"auto\" | \"left\" | \"right\" | \"none\";\n  /** Semantic background color. */\n  color?: AppBarColor;\n  /** Test id of the root (`<header>`, or `<footer>` at the bottom); `app-bar` unless given. */\n  \"data-testid\"?: string | undefined;\n  ref?: Ref<HTMLElement>;\n}\n\nexport function AppBar(props: ParentProps<AppBarProps>): JSX.Element {\n  const merged = mergeProps(\n    {\n      position: \"static\" as const,\n      placement: \"top\" as const,\n      midContentAlign: \"middle\" as const,\n      variant: \"default\" as const,\n      windowControls: \"auto\" as const,\n      color: \"default\" as AppBarColor,\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"children\",\n    \"dense\",\n    \"position\",\n    \"placement\",\n    \"leftContent\",\n    \"midContent\",\n    \"midContentAlign\",\n    \"variant\",\n    \"windowControls\",\n    \"rightContent\",\n    \"title\",\n    \"titleAs\",\n    \"color\",\n    \"ref\",\n    \"data-testid\",\n  ]);\n\n  // Read each slot once: markup passed as a prop is created anew on every read,\n  // and during hydration a copy the server never rendered has no DOM node.\n  const content = children(() => local.children);\n  // The title is drawn only without children, so it is read only then.\n  const title = children(() => (content() ? undefined : local.title));\n\n  return (\n    <Dynamic\n      component={local.placement === \"top\" ? \"header\" : \"footer\"}\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      data-testid={local[\"data-testid\"] ?? \"app-bar\"}\n      class={cn(\n        \"smwb-appbar\",\n        local.class,\n        `smwb-${local.position}`,\n        `smwb-${local.placement}`,\n        { \"smwb-dense\": local.dense },\n        local.color !== \"default\" && `smwb-appbar_color-${local.color}`,\n        local.variant === \"window\" && \"smwb-appbar_variant-window\",\n        local.variant === \"window\" &&\n          local.windowControls !== \"auto\" &&\n          `smwb-appbar_window-controls-${local.windowControls}`\n      )}\n    >\n      <Show\n        when={content()}\n        fallback={\n          <div class=\"smwb-appbar__inner\">\n            <div class=\"smwb-appbar__left\">\n              <Show keyed when={title() && (local.titleAs ?? \"div\")}>\n                {(tag) => {\n                  // Headings go through literal templates too: `Dynamic` would add a hydration level to the\n                  // default `div` and a trailing space to the class on the server.\n                  switch (tag) {\n                    case \"h1\":\n                      return <h1 class=\"smwb-appbar__left__title\">{title()}</h1>;\n                    case \"h2\":\n                      return <h2 class=\"smwb-appbar__left__title\">{title()}</h2>;\n                    case \"h3\":\n                      return <h3 class=\"smwb-appbar__left__title\">{title()}</h3>;\n                    case \"h4\":\n                      return <h4 class=\"smwb-appbar__left__title\">{title()}</h4>;\n                    case \"h5\":\n                      return <h5 class=\"smwb-appbar__left__title\">{title()}</h5>;\n                    case \"h6\":\n                      return <h6 class=\"smwb-appbar__left__title\">{title()}</h6>;\n                    default:\n                      return <div class=\"smwb-appbar__left__title\">{title()}</div>;\n                  }\n                }}\n              </Show>\n              {local.leftContent}\n            </div>\n            <div class={cn(\"smwb-appbar__mid\", `smwb-${local.midContentAlign}`)}>{local.midContent}</div>\n            <div class=\"smwb-appbar__right\">{local.rightContent}</div>\n          </div>\n        }\n      >\n        {content()}\n      </Show>\n    </Dynamic>\n  );\n}\n\nexport default AppBar;\n"],"names":["AppBar","props","merged","mergeProps","position","placement","midContentAlign","variant","windowControls","color","local","rest","splitProps","content","children","title","undefined","_$createComponent","Dynamic","_$mergeProps","component","ref","r$","_ref$","mergeRefs","cn","class","dense","Show","when","fallback","_el$","_tmpl$","_el$2","firstChild","_el$3","nextSibling","_el$4","_$insert","keyed","_$memo","titleAs","tag","_el$5","_tmpl$2","_el$6","_tmpl$3","_el$7","_tmpl$4","_el$8","_tmpl$5","_el$9","_tmpl$6","_el$0","_tmpl$7","_el$1","_tmpl$8","leftContent","midContent","rightContent","_$effect","_$className"],"mappings":"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"}

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