@floegence/floe-webapp-core 0.86.60 → 0.86.62

package/dist/components/ui/Checkbox.js

@@ -1,9 +1,9 @@
-import { createComponent as o, insert as l, effect as f, className as b, setAttribute as p, spread as D, mergeProps as M, template as v, use as N, memo as G } from "solid-js/web";
-import { splitProps as B, createUniqueId as U, Switch as V, Match as S, Show as m, For as J, useContext as K, createEffect as O, createContext as Q } from "solid-js";
+import { createComponent as o, insert as l, effect as f, className as b, setAttribute as m, spread as D, mergeProps as M, template as v, use as N, memo as E } from "solid-js/web";
+import { splitProps as B, createUniqueId as U, Switch as V, Match as S, Show as p, For as J, useContext as K, createEffect as O, createContext as Q } from "solid-js";
 import { cn as u } from "../../utils/cn.js";
-var R = /* @__PURE__ */ v('<svg viewBox="0 0 12 12"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="M2 6l3 3 5-6">'), T = /* @__PURE__ */ v('<svg viewBox="0 0 12 12"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round><path d="M2 6h8">'), W = /* @__PURE__ */ v("<div role=group>"), X = /* @__PURE__ */ v("<div data-floe-surface=inset data-floe-surface-part=indicator>"), Y = /* @__PURE__ */ v("<input data-floe-choice-input type=checkbox>"), _ = /* @__PURE__ */ v("<span>"), Z = /* @__PURE__ */ v('<div class="flex flex-col">'), ee = /* @__PURE__ */ v('<label><div class="relative flex items-center justify-center pt-0.5">'), re = /* @__PURE__ */ v("<label data-floe-surface-part=choice><span class=font-medium>"), te = /* @__PURE__ */ v('<div class="absolute top-2 right-2"><svg class="w-4 h-4 text-primary"fill=currentColor viewBox="0 0 20 20"><path fill-rule=evenodd d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"clip-rule=evenodd>'), ne = /* @__PURE__ */ v('<label data-floe-surface-part=choice><div class="flex items-start gap-3"><div class="flex items-center justify-center pt-0.5"></div><div class="flex flex-col flex-1 min-w-0">'), oe = /* @__PURE__ */ v('<div class="absolute top-1.5 right-1.5"><div class="w-4 h-4 rounded-full bg-primary flex items-center justify-center">'), le = /* @__PURE__ */ v("<label data-floe-surface-part=choice>"), ie = /* @__PURE__ */ v("<div>");
+var R = /* @__PURE__ */ v('<svg viewBox="0 0 12 12"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="M2 6l3 3 5-6">'), T = /* @__PURE__ */ v('<svg viewBox="0 0 12 12"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round><path d="M2 6h8">'), W = /* @__PURE__ */ v("<div role=group>"), X = /* @__PURE__ */ v("<div data-floe-surface=inset data-floe-surface-part=indicator>"), Y = /* @__PURE__ */ v("<input data-floe-choice-input type=checkbox>"), _ = /* @__PURE__ */ v("<span>"), Z = /* @__PURE__ */ v('<div class="flex flex-col">'), ee = /* @__PURE__ */ v('<label><div class="relative flex items-center justify-center pt-0.5">'), re = /* @__PURE__ */ v("<label data-floe-surface-part=choice><span class=font-medium>"), te = /* @__PURE__ */ v('<div class="absolute top-2 right-2"><svg class="w-4 h-4 text-[var(--floe-accent-ink)]"fill=currentColor viewBox="0 0 20 20"><path fill-rule=evenodd d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"clip-rule=evenodd>'), ne = /* @__PURE__ */ v('<label data-floe-surface-part=choice><div class="flex items-start gap-3"><div class="flex items-center justify-center pt-0.5"></div><div class="flex flex-col flex-1 min-w-0">'), oe = /* @__PURE__ */ v('<div class="absolute top-1.5 right-1.5"><div class="w-4 h-4 rounded-full bg-primary flex items-center justify-center">'), le = /* @__PURE__ */ v("<label data-floe-surface-part=choice>"), ae = /* @__PURE__ */ v("<div>");
 const F = Q();
-function ae() {
+function ie() {
   return K(F);
 }
 const C = {
@@ -11,13 +11,13 @@ const C = {
     box: "w-3.5 h-3.5",
     icon: "w-2.5 h-2.5",
     label: "text-xs",
-    description: "text-[10px]"
+    description: "text-caption"
   },
   md: {
     box: "w-4 h-4",
     icon: "w-3 h-3",
-    label: "text-xs",
-    description: "text-[11px]"
+    label: "text-sm",
+    description: "text-caption"
   },
   lg: {
     box: "w-5 h-5",
@@ -33,7 +33,7 @@ const C = {
   sm: "p-2.5",
   md: "p-3",
   lg: "p-4"
-}, q = {
+}, G = {
   sm: {
     container: "p-3 min-w-[80px]",
     icon: "w-5 h-5"
@@ -49,78 +49,78 @@ const C = {
 };
 function A(w) {
   return (() => {
-    var a = R();
-    return f(() => p(a, "class", w.class)), a;
+    var i = R();
+    return f(() => m(i, "class", w.class)), i;
   })();
 }
 function de(w) {
   return (() => {
-    var a = T();
-    return f(() => p(a, "class", w.class)), a;
+    var i = T();
+    return f(() => m(i, "class", w.class)), i;
   })();
 }
 function ue(w) {
-  const [a, e] = B(w, ["value", "onChange", "size", "orientation", "variant", "disabled", "class", "children"]), h = () => a.variant ?? "default", I = {
-    value: () => a.value ?? [],
-    onChange: (g, d) => {
-      const x = a.value ?? [], y = d ? [...x, g] : x.filter((c) => c !== g);
-      a.onChange?.(y);
+  const [i, e] = B(w, ["value", "onChange", "size", "orientation", "variant", "disabled", "class", "children"]), g = () => i.variant ?? "default", I = {
+    value: () => i.value ?? [],
+    onChange: (h, d) => {
+      const x = i.value ?? [], k = d ? [...x, h] : x.filter((c) => c !== h);
+      i.onChange?.(k);
     },
-    size: () => a.size ?? "md",
-    variant: h,
-    disabled: () => a.disabled ?? !1
+    size: () => i.size ?? "md",
+    variant: g,
+    disabled: () => i.disabled ?? !1
   }, j = () => {
-    const g = h(), d = a.orientation === "horizontal";
-    return g === "button" ? u("inline-flex rounded-md border border-border overflow-hidden", d ? "flex-row" : "flex-col") : g === "card" || g === "tile" ? u("grid gap-2", d ? "grid-flow-col auto-cols-fr" : "grid-cols-1") : u("flex", d ? "flex-row flex-wrap gap-4" : "flex-col gap-2");
+    const h = g(), d = i.orientation === "horizontal";
+    return h === "button" ? u("inline-flex rounded-group border border-[var(--floe-line)] overflow-hidden", d ? "flex-row" : "flex-col") : h === "card" || h === "tile" ? u("grid gap-2", d ? "grid-flow-col auto-cols-fr" : "grid-cols-1") : u("flex", d ? "flex-row flex-wrap gap-4" : "flex-col gap-2");
   };
   return o(F.Provider, {
     value: I,
     get children() {
-      var g = W();
-      return D(g, M({
+      var h = W();
+      return D(h, M({
         get "data-floe-surface"() {
-          return h() === "button" ? "inset" : void 0;
+          return g() === "button" ? "inset" : void 0;
         },
         get "data-floe-surface-part"() {
-          return h() === "button" ? "rail" : void 0;
+          return g() === "button" ? "rail" : void 0;
         },
         get class() {
-          return u(j(), a.class);
+          return u(j(), i.class);
         }
-      }, e), !1, !0), l(g, () => a.children), g;
+      }, e), !1, !0), l(h, () => i.children), h;
     }
   });
 }
 function fe(w) {
-  const a = ae(), [e, h] = B(w, ["value", "checked", "onChange", "label", "description", "icon", "size", "variant", "indeterminate", "ref", "class", "disabled", "id"]), I = U(), j = () => e.id ?? I, g = () => a !== void 0, d = () => e.size ?? a?.size() ?? "md", x = () => e.variant ?? a?.variant() ?? "default", y = () => e.disabled ?? a?.disabled() ?? !1, c = () => g() && e.value ? a.value().includes(e.value) : e.checked ?? !1, H = () => {
-    y() || (g() && e.value ? a.onChange(e.value, !c()) : e.onChange?.(!c()));
+  const i = ie(), [e, g] = B(w, ["value", "checked", "onChange", "label", "description", "icon", "size", "variant", "indeterminate", "ref", "class", "disabled", "id"]), I = U(), j = () => e.id ?? I, h = () => i !== void 0, d = () => e.size ?? i?.size() ?? "md", x = () => e.variant ?? i?.variant() ?? "default", k = () => e.disabled ?? i?.disabled() ?? !1, c = () => h() && e.value ? i.value().includes(e.value) : e.checked ?? !1, H = () => {
+    k() || (h() && e.value ? i.onChange(e.value, !c()) : e.onChange?.(!c()));
   }, L = () => (() => {
     var t = X();
-    return l(t, o(m, {
+    return l(t, o(p, {
       get when() {
         return e.indeterminate;
       },
       get children() {
         return o(de, {
           get class() {
-            return u(C[d()].icon, "transition-transform duration-150");
+            return u(C[d()].icon, "transition-transform duration-[var(--floe-duration-fast)]");
           }
         });
       }
-    }), null), l(t, o(m, {
+    }), null), l(t, o(p, {
       get when() {
-        return G(() => !e.indeterminate)() && c();
+        return E(() => !e.indeterminate)() && c();
       },
       get children() {
         return o(A, {
           get class() {
-            return u(C[d()].icon, "transition-transform duration-150");
+            return u(C[d()].icon, "transition-transform duration-[var(--floe-duration-fast)]");
           }
         });
       }
     }), null), f((r) => {
-      var n = c() || e.indeterminate ? "true" : void 0, i = u("rounded-[3px] border-2 transition-[background-color,border-color,color] duration-120", "flex items-center justify-center", C[d()].box, c() || e.indeterminate ? "border-primary bg-primary text-primary-foreground" : "border-input bg-background hover:border-primary/50", y() && "cursor-not-allowed");
-      return n !== r.e && p(t, "data-floe-selected", r.e = n), i !== r.t && b(t, r.t = i), r;
+      var n = c() || e.indeterminate ? "true" : void 0, a = u("rounded-xs border-2 transition-[background-color,border-color,color,transform] duration-[var(--floe-duration-fast)] ease-[var(--floe-ease-out)]", "flex items-center justify-center", C[d()].box, c() || e.indeterminate ? "border-primary bg-primary text-primary-foreground" : "border-[var(--floe-control-edge)] bg-transparent hover:border-[var(--floe-control-edge-hover)]", k() && "cursor-not-allowed");
+      return n !== r.e && m(t, "data-floe-selected", r.e = n), a !== r.t && b(t, r.t = a), r;
     }, {
       e: void 0,
       t: void 0
@@ -131,8 +131,8 @@ function fe(w) {
       r && (r.indeterminate = e.indeterminate ?? !1);
     }), (() => {
       var n = Y();
-      return N((i) => {
-        r = i, typeof e.ref == "function" && e.ref(i);
+      return N((a) => {
+        r = a, typeof e.ref == "function" && e.ref(a);
       }, n), n.addEventListener("change", H), D(n, M({
         get id() {
           return j();
@@ -144,15 +144,15 @@ function fe(w) {
           return c();
         },
         get "aria-checked"() {
-          return G(() => !!e.indeterminate)() ? "mixed" : c();
+          return E(() => !!e.indeterminate)() ? "mixed" : c();
         },
         get disabled() {
-          return y();
+          return k();
         },
         get class() {
           return t.class ?? "sr-only peer";
         }
-      }, h), !1, !1), n;
+      }, g), !1, !1), n;
     })();
   };
   return o(V, {
@@ -163,31 +163,31 @@ function fe(w) {
         },
         get children() {
           var t = ee(), r = t.firstChild;
-          return l(r, o(z, {}), null), l(r, o(L, {}), null), l(t, o(m, {
+          return l(r, o(z, {}), null), l(r, o(L, {}), null), l(t, o(p, {
             get when() {
               return e.label || e.description;
             },
             get children() {
               var n = Z();
-              return l(n, o(m, {
+              return l(n, o(p, {
                 get when() {
                   return e.label;
                 },
                 get children() {
-                  var i = _();
-                  return l(i, () => e.label), f(() => b(i, u("text-foreground", C[d()].label))), i;
+                  var a = _();
+                  return l(a, () => e.label), f(() => b(a, u("text-foreground", C[d()].label))), a;
                 }
-              }), null), l(n, o(m, {
+              }), null), l(n, o(p, {
                 get when() {
                   return e.description;
                 },
                 get children() {
-                  var i = _();
-                  return l(i, () => e.description), f(() => b(i, u("text-muted-foreground", C[d()].description))), i;
+                  var a = _();
+                  return l(a, () => e.description), f(() => b(a, u("text-[var(--floe-ink-soft)]", C[d()].description))), a;
                 }
               }), null), n;
             }
-          }), null), f(() => b(t, u("inline-flex items-start gap-2 cursor-pointer select-none", y() && "opacity-50 cursor-not-allowed", e.class))), t;
+          }), null), f(() => b(t, u("inline-flex items-start gap-2 cursor-pointer select-none", k() && "opacity-50 cursor-not-allowed", e.class))), t;
         }
       }), o(S, {
         get when() {
@@ -198,8 +198,8 @@ function fe(w) {
           return l(t, o(z, {
             class: "sr-only"
           }), r), l(r, () => e.label), f((n) => {
-            var i = c() ? "inset" : "raised", s = c() ? "true" : void 0, k = x(), $ = u("cursor-pointer select-none transition-colors duration-150", "border-r border-border last:border-r-0", se[d()], c() ? "bg-primary text-primary-foreground" : "bg-background text-foreground hover:bg-muted", y() && "opacity-50 cursor-not-allowed", e.class);
-            return i !== n.e && p(t, "data-floe-surface", n.e = i), s !== n.t && p(t, "data-floe-selected", n.t = s), k !== n.a && p(t, "data-floe-choice-variant", n.a = k), $ !== n.o && b(t, n.o = $), n;
+            var a = c() ? "inset" : "raised", s = c() ? "true" : void 0, y = x(), $ = u("cursor-pointer select-none transition-colors duration-[var(--floe-duration-fast)]", "border-r border-[var(--floe-line)] last:border-r-0", se[d()], c() ? "bg-[var(--primary)] text-[var(--primary-foreground)] border-[var(--primary)]" : "bg-transparent text-[var(--floe-ink-soft)] hover:bg-[var(--floe-state-hover)] hover:text-[var(--floe-ink)]", k() && "opacity-50 cursor-not-allowed", e.class);
+            return a !== n.e && m(t, "data-floe-surface", n.e = a), s !== n.t && m(t, "data-floe-selected", n.t = s), y !== n.a && m(t, "data-floe-choice-variant", n.a = y), $ !== n.o && b(t, n.o = $), n;
           }, {
             e: void 0,
             t: void 0,
@@ -212,10 +212,10 @@ function fe(w) {
           return x() === "card";
         },
         get children() {
-          var t = ne(), r = t.firstChild, n = r.firstChild, i = n.nextSibling;
+          var t = ne(), r = t.firstChild, n = r.firstChild, a = n.nextSibling;
           return l(t, o(z, {
             class: "sr-only"
-          }), r), l(n, o(L, {})), l(i, o(m, {
+          }), r), l(n, o(L, {})), l(a, o(p, {
             get when() {
               return e.label;
             },
@@ -223,15 +223,15 @@ function fe(w) {
               var s = _();
               return l(s, () => e.label), f(() => b(s, u("font-medium text-foreground", C[d()].label))), s;
             }
-          }), null), l(i, o(m, {
+          }), null), l(a, o(p, {
             get when() {
               return e.description;
             },
             get children() {
               var s = _();
-              return l(s, () => e.description), f(() => b(s, u("text-muted-foreground mt-0.5", C[d()].description))), s;
+              return l(s, () => e.description), f(() => b(s, u("text-[var(--floe-ink-soft)] mt-0.5", C[d()].description))), s;
             }
-          }), null), l(t, o(m, {
+          }), null), l(t, o(p, {
             get when() {
               return c();
             },
@@ -239,8 +239,8 @@ function fe(w) {
               return te();
             }
           }), null), f((s) => {
-            var k = c() ? "inset" : "raised", $ = c() ? "true" : void 0, P = x(), E = u("relative cursor-pointer select-none rounded-lg border-2 transition-[background-color,border-color,color] duration-120", ce[d()], c() ? "border-primary bg-primary/5" : "border-border bg-background hover:border-primary/50 hover:bg-muted/50", y() && "opacity-50 cursor-not-allowed", e.class);
-            return k !== s.e && p(t, "data-floe-surface", s.e = k), $ !== s.t && p(t, "data-floe-selected", s.t = $), P !== s.a && p(t, "data-floe-choice-variant", s.a = P), E !== s.o && b(t, s.o = E), s;
+            var y = c() ? "inset" : "raised", $ = c() ? "true" : void 0, P = x(), q = u("relative cursor-pointer select-none rounded-group border transition-[background-color,border-color,color] duration-[var(--floe-duration-fast)] ease-[var(--floe-ease-out)]", ce[d()], c() ? "border-[var(--floe-accent-line)] bg-[var(--floe-state-selected)]" : "border-[var(--floe-line)] bg-transparent hover:border-[var(--floe-line-strong)] hover:bg-[var(--floe-state-hover)]", k() && "opacity-50 cursor-not-allowed", e.class);
+            return y !== s.e && m(t, "data-floe-surface", s.e = y), $ !== s.t && m(t, "data-floe-selected", s.t = $), P !== s.a && m(t, "data-floe-choice-variant", s.a = P), q !== s.o && b(t, s.o = q), s;
           }, {
             e: void 0,
             t: void 0,
@@ -256,38 +256,38 @@ function fe(w) {
           var t = le();
           return l(t, o(z, {
             class: "sr-only"
-          }), null), l(t, o(m, {
+          }), null), l(t, o(p, {
             get when() {
               return e.icon;
             },
             children: (r) => {
               const n = r();
               return (() => {
-                var i = ie();
-                return l(i, o(n, {
+                var a = ae();
+                return l(a, o(n, {
                   get class() {
-                    return q[d()].icon;
+                    return G[d()].icon;
                   }
-                })), f(() => b(i, u("mb-2 transition-colors duration-150", c() ? "text-primary" : "text-muted-foreground"))), i;
+                })), f(() => b(a, u("mb-2 transition-colors duration-[var(--floe-duration-fast)]", c() ? "text-[var(--floe-accent-ink)]" : "text-[var(--floe-ink-quiet)]"))), a;
               })();
             }
-          }), null), l(t, o(m, {
+          }), null), l(t, o(p, {
             get when() {
               return e.label;
             },
             get children() {
               var r = _();
-              return l(r, () => e.label), f(() => b(r, u("font-medium transition-colors duration-150", C[d()].label, c() ? "text-primary" : "text-foreground"))), r;
+              return l(r, () => e.label), f(() => b(r, u("font-medium transition-colors duration-[var(--floe-duration-fast)]", C[d()].label, c() ? "text-[var(--floe-ink)]" : "text-[var(--floe-ink-soft)]"))), r;
             }
-          }), null), l(t, o(m, {
+          }), null), l(t, o(p, {
             get when() {
               return e.description;
             },
             get children() {
               var r = _();
-              return l(r, () => e.description), f(() => b(r, u("text-muted-foreground mt-0.5", C[d()].description))), r;
+              return l(r, () => e.description), f(() => b(r, u("text-[var(--floe-ink-soft)] mt-0.5", C[d()].description))), r;
             }
-          }), null), l(t, o(m, {
+          }), null), l(t, o(p, {
             get when() {
               return c();
             },
@@ -298,8 +298,8 @@ function fe(w) {
               })), r;
             }
           }), null), f((r) => {
-            var n = c() ? "inset" : "raised", i = c() ? "true" : void 0, s = x(), k = u("relative flex flex-col items-center justify-center cursor-pointer select-none", "rounded-lg border-2 transition-[background-color,border-color,color] duration-120 text-center", q[d()].container, c() ? "border-primary bg-primary/5" : "border-border bg-background hover:border-primary/50 hover:bg-muted/50", y() && "opacity-50 cursor-not-allowed", e.class);
-            return n !== r.e && p(t, "data-floe-surface", r.e = n), i !== r.t && p(t, "data-floe-selected", r.t = i), s !== r.a && p(t, "data-floe-choice-variant", r.a = s), k !== r.o && b(t, r.o = k), r;
+            var n = c() ? "inset" : "raised", a = c() ? "true" : void 0, s = x(), y = u("relative flex flex-col items-center justify-center cursor-pointer select-none", "rounded-control border transition-[background-color,border-color,color] duration-[var(--floe-duration-fast)] ease-[var(--floe-ease-out)] text-center", G[d()].container, c() ? "border-[var(--floe-accent-line)] bg-[var(--floe-state-selected)]" : "border-[var(--floe-line)] bg-transparent hover:border-[var(--floe-line-strong)] hover:bg-[var(--floe-state-hover)]", k() && "opacity-50 cursor-not-allowed", e.class);
+            return n !== r.e && m(t, "data-floe-surface", r.e = n), a !== r.t && m(t, "data-floe-selected", r.t = a), s !== r.a && m(t, "data-floe-choice-variant", r.a = s), y !== r.o && b(t, r.o = y), r;
           }, {
             e: void 0,
             t: void 0,
@@ -312,28 +312,28 @@ function fe(w) {
   });
 }
 function be(w) {
-  const [a, e] = B(w, ["options"]);
+  const [i, e] = B(w, ["options"]);
   return o(ue, M(e, {
     get children() {
       return o(J, {
         get each() {
-          return a.options;
+          return i.options;
         },
-        children: (h) => o(fe, {
+        children: (g) => o(fe, {
           get value() {
-            return h.value;
+            return g.value;
           },
           get label() {
-            return h.label;
+            return g.label;
           },
           get description() {
-            return h.description;
+            return g.description;
           },
           get icon() {
-            return h.icon;
+            return g.icon;
           },
           get disabled() {
-            return h.disabled;
+            return g.disabled;
           }
         })
       });

package/dist/components/ui/CommandPalette.js

@@ -1,22 +1,23 @@
-import { createComponent as c, Portal as R, effect as C, className as _, setStyleProperty as E, setAttribute as x, insert as a, Dynamic as T, template as f, use as F, delegateEvents as j } from "solid-js/web";
-import { createSignal as B, createEffect as H, createMemo as L, Show as h, For as I } from "solid-js";
-import { cn as S } from "../../utils/cn.js";
-import { useCommand as N } from "../../context/CommandContext.js";
-import { Search as U } from "../icons/index.js";
-import { useResolvedFloeConfig as W } from "../../context/FloeConfigContext.js";
-import { useOverlayMask as q } from "../../hooks/useOverlayMask.js";
+import { createComponent as d, Portal as K, effect as C, className as S, setStyleProperty as q, setAttribute as h, insert as a, Dynamic as R, template as u, use as E, delegateEvents as T } from "solid-js/web";
+import { createSignal as j, createEffect as B, createMemo as H, Show as x, For as F } from "solid-js";
+import { cn as z } from "../../utils/cn.js";
+import { useCommand as L } from "../../context/CommandContext.js";
+import { Search as N } from "../icons/index.js";
+import { useResolvedFloeConfig as U } from "../../context/FloeConfigContext.js";
+import { useOverlayMask as W } from "../../hooks/useOverlayMask.js";
 import { matchKeybind as G } from "../../utils/keybind.js";
 import { createFloatingPresence as J } from "./floatingPresence.js";
-var Q = /* @__PURE__ */ f("<div>"), V = /* @__PURE__ */ f('<div data-floe-surface=floating><div data-floe-input-surface data-floe-surface=inset class="flex items-center gap-3 px-4 pt-1 border-b border-border"><input type=text><kbd class="text-xs text-muted-foreground px-1.5 py-0.5 rounded bg-muted font-mono"></kbd></div><div class="max-h-80 overflow-y-auto overscroll-contain py-2">'), X = /* @__PURE__ */ f('<div class="px-4 py-8 text-center text-sm text-muted-foreground">'), Y = /* @__PURE__ */ f('<div><div class="px-4 py-1 text-xs font-semibold text-muted-foreground uppercase tracking-wider">'), Z = /* @__PURE__ */ f('<span class="w-5 h-5 flex items-center justify-center text-muted-foreground">'), ee = /* @__PURE__ */ f('<span class="ml-2 text-muted-foreground text-xs">'), te = /* @__PURE__ */ f('<kbd class="text-xs text-muted-foreground px-1.5 py-0.5 rounded bg-muted font-mono">'), re = /* @__PURE__ */ f('<button type=button><div class="flex-1 text-left"><span>');
-function fe(b = {}) {
-  const n = N(), k = W();
-  let M, z;
-  const [D, w] = B(0), v = J({
-    open: n.isOpen
+var Q = /* @__PURE__ */ u("<div>"), V = /* @__PURE__ */ u('<div data-floe-surface=floating><div data-floe-input-surface class="flex items-center gap-3 px-4 border-b border-[var(--floe-line)]"><input type=text><kbd class="px-1.5 py-0.5 rounded-xs border border-[var(--floe-line)] bg-[var(--floe-well)] text-[var(--floe-ink-quiet)] text-[length:var(--floe-type-caption)] font-mono leading-none"></kbd></div><div class="max-h-80 overflow-y-auto overscroll-contain py-2">'), X = /* @__PURE__ */ u('<div class="px-4 py-10 text-center text-[length:var(--floe-type-supporting)] text-[var(--floe-ink-soft)]">'), Y = /* @__PURE__ */ u('<div><div class="px-3 pt-3 pb-1 text-[length:var(--floe-type-caption)] font-semibold uppercase tracking-[0.06em] text-[var(--floe-ink-quiet)]">'), Z = /* @__PURE__ */ u('<span class="w-4 h-4 flex items-center justify-center text-[var(--floe-ink-quiet)]">'), ee = /* @__PURE__ */ u('<span class="ml-2 text-[length:var(--floe-type-caption)] text-[var(--floe-ink-quiet)]">'), te = /* @__PURE__ */ u('<kbd class="px-1.5 py-0.5 rounded-xs border border-[var(--floe-line)] bg-[var(--floe-well)] text-[var(--floe-ink-quiet)] text-[length:var(--floe-type-caption)] font-mono leading-none">'), re = /* @__PURE__ */ u('<button type=button><div class="flex-1 text-left"><span>');
+function ue(b = {}) {
+  const n = L(), k = U();
+  let M, y;
+  const [D, w] = j(0), g = J({
+    open: n.isOpen,
+    element: () => y
   });
-  q({
+  W({
     open: n.isOpen,
-    root: () => z,
+    root: () => y,
     onClose: () => n.close(),
     lockBodyScroll: !0,
     trapFocus: !0,
@@ -29,10 +30,10 @@ function fe(b = {}) {
       selector: "input"
     },
     restoreFocus: !0
-  }), H(() => {
+  }), B(() => {
     n.isOpen() && (n.search(), w(0));
   });
-  const O = (e) => {
+  const I = (e) => {
     if (G(e, k.config.commands.palette.keybind)) {
       e.preventDefault(), n.close();
       return;
@@ -57,31 +58,31 @@ function fe(b = {}) {
         e.preventDefault(), t[D()] && n.execute(t[D()].id);
         break;
     }
-  }, A = L(() => {
+  }, O = H(() => {
     const e = n.filteredCommands(), t = /* @__PURE__ */ new Map();
     return e.forEach((r, i) => {
-      const m = r.category ?? "Commands", s = t.get(m);
+      const v = r.category ?? "Commands", s = t.get(v);
       s ? s.push({
         cmd: r,
         index: i
-      }) : t.set(m, [{
+      }) : t.set(v, [{
         cmd: r,
         index: i
       }]);
     }), Array.from(t.entries());
   });
-  return c(h, {
+  return d(x, {
     get when() {
-      return v.mounted();
+      return g.mounted();
     },
     get children() {
-      return c(R, {
+      return d(K, {
         get children() {
           return [(() => {
             var e = Q();
             return e.$$click = () => n.close(), C((t) => {
-              var r = S("fixed inset-0 bg-background/60 backdrop-blur-sm floe-floating-presence floe-floating-backdrop", b.zIndex === void 0 && "z-50"), i = b.zIndex, m = v.state(), s = v.exiting() ? "true" : void 0;
-              return r !== t.e && _(e, t.e = r), i !== t.t && E(e, "z-index", t.t = i), m !== t.a && x(e, "data-floating-presence", t.a = m), s !== t.o && x(e, "aria-hidden", t.o = s), t;
+              var r = z("fixed inset-0 bg-[color-mix(in_srgb,var(--background)_62%,transparent)] backdrop-blur-[2px]", "floe-floating-presence floe-floating-backdrop", b.zIndex === void 0 && "z-50"), i = b.zIndex, v = g.state(), s = g.exiting() ? "true" : void 0;
+              return r !== t.e && S(e, t.e = r), i !== t.t && q(e, "z-index", t.t = i), v !== t.a && h(e, "data-floating-presence", t.a = v), s !== t.o && h(e, "aria-hidden", t.o = s), t;
             }, {
               e: void 0,
               t: void 0,
@@ -89,14 +90,14 @@ function fe(b = {}) {
               o: void 0
             }), e;
           })(), (() => {
-            var e = V(), t = e.firstChild, r = t.firstChild, i = r.nextSibling, m = t.nextSibling;
-            e.$$keydown = O;
-            var s = z;
-            typeof s == "function" ? F(s, e) : z = e, a(t, c(U, {
-              class: "w-5 h-5 text-muted-foreground flex-shrink-0"
+            var e = V(), t = e.firstChild, r = t.firstChild, i = r.nextSibling, v = t.nextSibling;
+            e.$$keydown = I;
+            var s = y;
+            typeof s == "function" ? E(s, e) : y = e, a(t, d(N, {
+              class: "w-4 h-4 text-[var(--floe-ink-quiet)] flex-shrink-0"
             }), r), r.$$input = (o) => n.setSearch(o.currentTarget.value);
             var P = M;
-            return typeof P == "function" ? F(P, r) : M = r, a(i, () => k.config.strings.commandPalette.esc), a(m, c(h, {
+            return typeof P == "function" ? E(P, r) : M = r, a(i, () => k.config.strings.commandPalette.esc), a(v, d(x, {
               get when() {
                 return n.filteredCommands().length > 0;
               },
@@ -107,54 +108,54 @@ function fe(b = {}) {
                 })();
               },
               get children() {
-                return c(I, {
+                return d(F, {
                   get each() {
-                    return A();
+                    return O();
                   },
-                  children: ([o, y]) => (() => {
-                    var g = Y(), $ = g.firstChild;
-                    return a($, o), a(g, c(I, {
-                      each: y,
+                  children: ([o, $]) => (() => {
+                    var m = Y(), _ = m.firstChild;
+                    return a(_, o), a(m, d(F, {
+                      each: $,
                       children: (l) => (() => {
-                        var d = re(), p = d.firstChild, K = p.firstChild;
-                        return d.addEventListener("mouseenter", () => w(l.index)), d.$$click = () => n.execute(l.cmd.id), a(d, c(h, {
+                        var c = re(), p = c.firstChild, A = p.firstChild;
+                        return c.addEventListener("mouseenter", () => w(l.index)), c.$$click = () => n.execute(l.cmd.id), a(c, d(x, {
                           get when() {
                             return l.cmd.icon;
                           },
                           get children() {
-                            var u = Z();
-                            return a(u, c(T, {
+                            var f = Z();
+                            return a(f, d(R, {
                               get component() {
                                 return l.cmd.icon;
                               },
-                              class: "w-5 h-5"
-                            })), u;
+                              class: "w-4 h-4"
+                            })), f;
                           }
-                        }), p), a(K, () => l.cmd.title), a(p, c(h, {
+                        }), p), a(A, () => l.cmd.title), a(p, d(x, {
                           get when() {
                             return l.cmd.description;
                           },
                           get children() {
-                            var u = ee();
-                            return a(u, () => l.cmd.description), u;
+                            var f = ee();
+                            return a(f, () => l.cmd.description), f;
                           }
-                        }), null), a(d, c(h, {
+                        }), null), a(c, d(x, {
                           get when() {
                             return l.cmd.keybind;
                           },
                           get children() {
-                            var u = te();
-                            return a(u, () => n.getKeybindDisplay(l.cmd.keybind)), u;
+                            var f = te();
+                            return a(f, () => n.getKeybindDisplay(l.cmd.keybind)), f;
                           }
-                        }), null), C(() => _(d, S("w-full flex items-center gap-3 px-4 py-2 text-sm cursor-pointer", "transition-colors duration-75", "focus:outline-none", D() === l.index ? "bg-accent text-accent-foreground" : "hover:bg-accent/50"))), d;
+                        }), null), C(() => S(c, z("w-full flex items-center gap-3 px-3 mx-1 rounded-sm", "min-h-[var(--floe-row-height)] cursor-pointer", "text-[length:var(--floe-type-control)] leading-[var(--floe-line-control)]", "text-[var(--floe-ink-soft)] hover:text-foreground", "focus:outline-none", D() === l.index && "bg-[var(--floe-state-selected)] text-foreground"))), c;
                       })()
-                    }), null), g;
+                    }), null), m;
                   })()
                 });
               }
             })), C((o) => {
-              var y = S("fixed left-1/2 top-[20%] -translate-x-1/2", b.zIndex === void 0 && "z-50", "w-full max-w-xl", "bg-popover text-popover-foreground rounded-lg shadow-2xl", "border border-border", "floe-floating-presence floe-floating-dialog-panel", "overflow-hidden"), g = b.zIndex, $ = v.state(), l = v.exiting() ? "true" : void 0, d = k.config.strings.commandPalette.placeholder, p = S("flex-1 h-12 bg-transparent text-sm", "placeholder:text-muted-foreground", "focus:outline-none");
-              return y !== o.e && _(e, o.e = y), g !== o.t && E(e, "z-index", o.t = g), $ !== o.a && x(e, "data-floating-presence", o.a = $), l !== o.o && x(e, "aria-hidden", o.o = l), d !== o.i && x(r, "placeholder", o.i = d), p !== o.n && _(r, o.n = p), o;
+              var $ = z("fixed left-1/2 top-[20%] -translate-x-1/2", b.zIndex === void 0 && "z-50", "w-full max-w-xl", "bg-popover text-popover-foreground", "rounded-panel", "border border-[var(--floe-line)]", "shadow-[var(--floe-elevation-float-strong)]", "floe-floating-presence floe-floating-dialog-panel", "overflow-hidden"), m = b.zIndex, _ = g.state(), l = g.exiting() ? "true" : void 0, c = k.config.strings.commandPalette.placeholder, p = z("flex-1 h-12 bg-transparent", "text-[length:var(--floe-type-body)] leading-[var(--floe-line-body)]", "placeholder:text-[var(--floe-ink-ghost)]", "focus:outline-none");
+              return $ !== o.e && S(e, o.e = $), m !== o.t && q(e, "z-index", o.t = m), _ !== o.a && h(e, "data-floating-presence", o.a = _), l !== o.o && h(e, "aria-hidden", o.o = l), c !== o.i && h(r, "placeholder", o.i = c), p !== o.n && S(r, o.n = p), o;
             }, {
               e: void 0,
               t: void 0,
@@ -169,7 +170,7 @@ function fe(b = {}) {
     }
   });
 }
-j(["click", "keydown", "input"]);
+T(["click", "keydown", "input"]);
 export {
-  fe as CommandPalette
+  ue as CommandPalette
 };