@floegence/floe-webapp-core 0.53.0 → 0.53.1

package/dist/components/ui/CommandPalette.js

@@ -1,6 +1,6 @@
-import { createComponent as c, Portal as R, effect as C, className as _, setStyleProperty as E, setAttribute as x, insert as i, Dynamic as T, template as f, use as F, delegateEvents as j } from "solid-js/web";
+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 D } from "../../utils/cn.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";
@@ -10,14 +10,13 @@ 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 z, M;
-  const [S, w] = B(0), v = J({
-    open: n.isOpen,
-    exitDurationMs: 120
+  let M, z;
+  const [D, w] = B(0), v = J({
+    open: n.isOpen
   });
   q({
     open: n.isOpen,
-    root: () => M,
+    root: () => z,
     onClose: () => n.close(),
     lockBodyScroll: !0,
     trapFocus: !0,
@@ -44,30 +43,30 @@ function fe(b = {}) {
         e.preventDefault();
         const r = t.length;
         if (r <= 0) return;
-        w((a) => Math.max(0, Math.min(a + 1, r - 1)));
+        w((i) => Math.max(0, Math.min(i + 1, r - 1)));
         break;
       }
       case "ArrowUp": {
         e.preventDefault();
         const r = t.length;
         if (r <= 0) return;
-        w((a) => Math.max(0, Math.min(a - 1, r - 1)));
+        w((i) => Math.max(0, Math.min(i - 1, r - 1)));
         break;
       }
       case "Enter":
-        e.preventDefault(), t[S()] && n.execute(t[S()].id);
+        e.preventDefault(), t[D()] && n.execute(t[D()].id);
         break;
     }
   }, A = L(() => {
     const e = n.filteredCommands(), t = /* @__PURE__ */ new Map();
-    return e.forEach((r, a) => {
+    return e.forEach((r, i) => {
       const m = r.category ?? "Commands", s = t.get(m);
       s ? s.push({
         cmd: r,
-        index: a
+        index: i
       }) : t.set(m, [{
         cmd: r,
-        index: a
+        index: i
       }]);
     }), Array.from(t.entries());
   });
@@ -81,8 +80,8 @@ function fe(b = {}) {
           return [(() => {
             var e = Q();
             return e.$$click = () => n.close(), C((t) => {
-              var r = D("fixed inset-0 bg-background/60 backdrop-blur-sm floe-floating-presence floe-floating-backdrop", b.zIndex === void 0 && "z-50"), a = b.zIndex, m = v.state(), s = v.exiting() ? "true" : void 0;
-              return r !== t.e && _(e, t.e = r), a !== t.t && E(e, "z-index", t.t = a), m !== t.a && x(e, "data-floating-presence", t.a = m), s !== t.o && x(e, "aria-hidden", t.o = s), 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;
             }, {
               e: void 0,
               t: void 0,
@@ -90,21 +89,21 @@ function fe(b = {}) {
               o: void 0
             }), e;
           })(), (() => {
-            var e = V(), t = e.firstChild, r = t.firstChild, a = r.nextSibling, m = t.nextSibling;
+            var e = V(), t = e.firstChild, r = t.firstChild, i = r.nextSibling, m = t.nextSibling;
             e.$$keydown = O;
-            var s = M;
-            typeof s == "function" ? F(s, e) : M = e, i(t, c(U, {
+            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"
             }), r), r.$$input = (o) => n.setSearch(o.currentTarget.value);
-            var P = z;
-            return typeof P == "function" ? F(P, r) : z = r, i(a, () => k.config.strings.commandPalette.esc), i(m, c(h, {
+            var P = M;
+            return typeof P == "function" ? F(P, r) : M = r, a(i, () => k.config.strings.commandPalette.esc), a(m, c(h, {
               get when() {
                 return n.filteredCommands().length > 0;
               },
               get fallback() {
                 return (() => {
                   var o = X();
-                  return i(o, () => k.config.strings.commandPalette.empty), o;
+                  return a(o, () => k.config.strings.commandPalette.empty), o;
                 })();
               },
               get children() {
@@ -114,47 +113,47 @@ function fe(b = {}) {
                   },
                   children: ([o, y]) => (() => {
                     var g = Y(), $ = g.firstChild;
-                    return i($, o), i(g, c(I, {
+                    return a($, o), a(g, c(I, {
                       each: y,
                       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), i(d, c(h, {
+                        return d.addEventListener("mouseenter", () => w(l.index)), d.$$click = () => n.execute(l.cmd.id), a(d, c(h, {
                           get when() {
                             return l.cmd.icon;
                           },
                           get children() {
                             var u = Z();
-                            return i(u, c(T, {
+                            return a(u, c(T, {
                               get component() {
                                 return l.cmd.icon;
                               },
                               class: "w-5 h-5"
                             })), u;
                           }
-                        }), p), i(K, () => l.cmd.title), i(p, c(h, {
+                        }), p), a(K, () => l.cmd.title), a(p, c(h, {
                           get when() {
                             return l.cmd.description;
                           },
                           get children() {
                             var u = ee();
-                            return i(u, () => l.cmd.description), u;
+                            return a(u, () => l.cmd.description), u;
                           }
-                        }), null), i(d, c(h, {
+                        }), null), a(d, c(h, {
                           get when() {
                             return l.cmd.keybind;
                           },
                           get children() {
                             var u = te();
-                            return i(u, () => n.getKeybindDisplay(l.cmd.keybind)), u;
+                            return a(u, () => n.getKeybindDisplay(l.cmd.keybind)), u;
                           }
-                        }), null), C(() => _(d, D("w-full flex items-center gap-3 px-4 py-2 text-sm cursor-pointer", "transition-colors duration-75", "focus:outline-none", S() === l.index ? "bg-accent text-accent-foreground" : "hover:bg-accent/50"))), d;
+                        }), 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), g;
                   })()
                 });
               }
             })), C((o) => {
-              var y = D("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 = D("flex-1 h-12 bg-transparent text-sm", "placeholder:text-muted-foreground", "focus:outline-none");
+              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;
             }, {
               e: void 0,

package/dist/components/ui/Dialog.js

@@ -39,7 +39,7 @@ function pe(e) {
   const [R, z] = I(null), [M, Z] = I(0), [V, W] = I(0), m = () => e.presentation === "bottom-drawer", u = me({
     open: () => e.open && !!R() && M() > 0,
     get exitDurationMs() {
-      return m() ? 180 : 120;
+      return m() ? 180 : 160;
     }
   }), y = () => u.mounted() && !!R() && M() > 0;
   G(() => e.onPresenceChange?.(y())), j(() => e.onPresenceChange?.(!1));

package/dist/components/ui/Dropdown.js

@@ -1,15 +1,15 @@
-import { setAttribute as f, insert as g, createComponent as l, Portal as W, use as I, spread as G, mergeProps as J, effect as F, className as O, template as P, memo as z, delegateEvents as te } from "solid-js/web";
+import { setAttribute as f, insert as g, createComponent as l, Portal as W, use as O, spread as G, mergeProps as J, effect as F, className as D, template as P, memo as z, delegateEvents as te } from "solid-js/web";
 import { createSignal as _, createMemo as ne, createEffect as Q, onCleanup as re, Show as y, Index as V } from "solid-js";
-import { cn as M } from "../../utils/cn.js";
+import { cn as k } from "../../utils/cn.js";
 import { deferNonBlocking as oe } from "../../utils/defer.js";
 import { ChevronDown as ae, Check as ie, ChevronRight as ue } from "../icons/index.js";
-import { focusMenuItem as p, MENU_ITEM_SELECTOR as le, moveMenuFocus as U, calculateMenuPosition as se, calculateSubmenuPosition as de } from "./menuUtils.js";
+import { focusMenuItem as I, MENU_ITEM_SELECTOR as le, moveMenuFocus as U, calculateMenuPosition as se, calculateSubmenuPosition as de } from "./menuUtils.js";
 import { LOCAL_INTERACTION_SURFACE_ATTR as X } from "./localInteractionSurface.js";
 import { createFloatingPresence as Y } from "./floatingPresence.js";
 import { useOverlayMask as ce } from "../../hooks/useOverlayMask.js";
 import { resolveSurfacePortalHost as fe, projectSurfacePortalPosition as me, resolveSurfacePortalBoundaryRect as ge, isSurfacePortalMode as ve, resolveSurfacePortalMount as be } from "./dialogSurfaceScope.js";
 var H = /* @__PURE__ */ P("<div>"), he = /* @__PURE__ */ P("<div><div role=button aria-haspopup=menu data-floe-dropdown-trigger>"), Z = /* @__PURE__ */ P('<div class="my-1 h-px bg-border"role=separator>'), we = /* @__PURE__ */ P('<button type=button role=menuitem><span class="w-3.5 h-3.5 flex items-center justify-center"></span><span class="flex-1 text-left">'), ye = /* @__PURE__ */ P("<div class=relative>"), xe = /* @__PURE__ */ P('<span class="w-3.5 h-3.5 flex items-center justify-center">'), Se = /* @__PURE__ */ P("<span>");
-let Me = 0, ke = 0;
+let ke = 0, Me = 0;
 function Pe(e, c) {
   switch (e) {
     case "Enter":
@@ -36,14 +36,13 @@ function Pe(e, c) {
 }
 function $e(e) {
   const [c, d] = _(!1), o = Y({
-    open: c,
-    exitDurationMs: 100
-  }), [B, k] = _({
+    open: c
+  }), [B, M] = _({
     x: -9999,
     y: -9999
   });
   let v, h;
-  const b = `floe-dropdown-${Me += 1}`, $ = `${b}-menu`, w = ne(() => o.mounted() ? fe({
+  const b = `floe-dropdown-${ke += 1}`, $ = `${b}-menu`, w = ne(() => o.mounted() ? fe({
     owner: v
   }) : {
     host: null,
@@ -75,11 +74,11 @@ function $e(e) {
   const C = () => {
     if (!v || !h) return;
     const r = v.getBoundingClientRect(), n = h.getBoundingClientRect(), i = se(r, n, e.align ?? "start", m.boundaryRect());
-    k(i);
+    M(i);
   };
   Q(() => {
     if (!o.mounted()) {
-      k({
+      M({
         x: -9999,
         y: -9999
       });
@@ -91,7 +90,7 @@ function $e(e) {
       i && typeof i.closest == "function" && i.closest(`[data-floe-dropdown="${b}"]`) || d(!1);
     };
     document.addEventListener("pointerdown", r, !0), requestAnimationFrame(() => {
-      C(), p(h, e.value ? "selected" : "first");
+      C(), I(h, e.value ? "selected" : "first");
     }), re(() => {
       document.removeEventListener("pointerdown", r, !0);
     });
@@ -103,7 +102,7 @@ function $e(e) {
     })), oe(() => n(r.id));
   }, R = (r, n = "first") => {
     e.disabled || (d(r), requestAnimationFrame(() => {
-      C(), p(h, n);
+      C(), I(h, n);
     }));
   }, T = (r) => {
     if (e.disabled) return;
@@ -128,10 +127,10 @@ function $e(e) {
         r.preventDefault(), U(i, t, -1);
         return;
       case "Home":
-        r.preventDefault(), p(i, "first");
+        r.preventDefault(), I(i, "first");
         return;
       case "End":
-        r.preventDefault(), p(i, "last");
+        r.preventDefault(), I(i, "last");
         return;
       case "Tab":
         r.preventDefault(), d(!1), v?.focus();
@@ -152,7 +151,7 @@ function $e(e) {
       }
     };
     var i = v;
-    return typeof i == "function" ? I(i, n) : v = n, f(n, "aria-controls", $), g(n, () => e.trigger), g(r, l(y, {
+    return typeof i == "function" ? O(i, n) : v = n, f(n, "aria-controls", $), g(n, () => e.trigger), g(r, l(y, {
       get when() {
         return o.mounted();
       },
@@ -163,9 +162,9 @@ function $e(e) {
           },
           get children() {
             var t = H(), s = h;
-            return typeof s == "function" ? I(s, t) : h = t, f(t, "data-floe-dropdown", b), G(t, J({
+            return typeof s == "function" ? O(s, t) : h = t, f(t, "data-floe-dropdown", b), G(t, J({
               get class() {
-                return M(m.isSurfaceMode() ? "absolute z-20 min-w-36 py-0.5" : "fixed z-50 min-w-36 py-0.5", "bg-popover text-popover-foreground", "rounded border border-border shadow-md", "floe-floating-presence floe-floating-menu");
+                return k(m.isSurfaceMode() ? "absolute z-20 min-w-36 py-0.5" : "fixed z-50 min-w-36 py-0.5", "bg-popover text-popover-foreground", "rounded border border-border shadow-md", "floe-floating-presence floe-floating-menu");
               },
               get "data-floating-presence"() {
                 return o.state();
@@ -217,8 +216,8 @@ function $e(e) {
         });
       }
     }), null), F((t) => {
-      var s = M("relative inline-block", e.class), u = M("cursor-pointer", e.triggerClass, e.disabled && "pointer-events-none opacity-50"), x = e.disabled ? -1 : 0, a = c(), S = e.triggerAriaLabel, E = e.disabled ? "true" : void 0, D = e.triggerInputSurface ? "true" : void 0, L = e.triggerInputSurface ? "inset" : void 0;
-      return s !== t.e && O(r, t.e = s), u !== t.t && O(n, t.t = u), x !== t.a && f(n, "tabindex", t.a = x), a !== t.o && f(n, "aria-expanded", t.o = a), S !== t.i && f(n, "aria-label", t.i = S), E !== t.n && f(n, "aria-disabled", t.n = E), D !== t.s && f(n, "data-floe-input-surface", t.s = D), L !== t.h && f(n, "data-floe-surface", t.h = L), t;
+      var s = k("relative inline-block", e.class), u = k("cursor-pointer", e.triggerClass, e.disabled && "pointer-events-none opacity-50"), x = e.disabled ? -1 : 0, a = c(), S = e.triggerAriaLabel, E = e.disabled ? "true" : void 0, L = e.triggerInputSurface ? "true" : void 0, p = e.triggerInputSurface ? "inset" : void 0;
+      return s !== t.e && D(r, t.e = s), u !== t.t && D(n, t.t = u), x !== t.a && f(n, "tabindex", t.a = x), a !== t.o && f(n, "aria-expanded", t.o = a), S !== t.i && f(n, "aria-label", t.i = S), E !== t.n && f(n, "aria-disabled", t.n = E), L !== t.s && f(n, "data-floe-input-surface", t.s = L), p !== t.h && f(n, "data-floe-surface", t.h = p), t;
     }, {
       e: void 0,
       t: void 0,
@@ -232,17 +231,16 @@ function $e(e) {
   })();
 }
 function ee(e) {
-  const [c, d] = _(!1), o = () => e.item.children && e.item.children.length > 0, k = Y({
-    open: () => !!(c() && o()),
-    exitDurationMs: 100
+  const [c, d] = _(!1), o = () => e.item.children && e.item.children.length > 0, M = Y({
+    open: () => !!(c() && o())
   }), [v, h] = _({
     x: -9999,
     y: -9999
   });
   let b, $, w, m;
-  const A = `floe-dropdown-item-${ke += 1}`;
+  const A = `floe-dropdown-item-${Me += 1}`;
   Q(() => {
-    k.mounted() || h({
+    M.mounted() || h({
       x: -9999,
       y: -9999
     });
@@ -269,7 +267,7 @@ function ee(e) {
     }
   }, q = (n = "first") => {
     o() && (d(!0), requestAnimationFrame(() => {
-      C(), p(w, n);
+      C(), I(w, n);
     }));
   }, r = () => {
     d(!1), requestAnimationFrame(() => $?.focus());
@@ -278,15 +276,15 @@ function ee(e) {
     var n = ye();
     n.addEventListener("mouseleave", R), n.addEventListener("mouseenter", j);
     var i = b;
-    return typeof i == "function" ? I(i, n) : b = n, g(n, l(y, {
+    return typeof i == "function" ? O(i, n) : b = n, g(n, l(y, {
       get when() {
         return e.item.content;
       },
       get children() {
         var t = H();
         return t.$$click = T, g(t, e.item.content), F((s) => {
-          var u = M("w-full px-2 py-1.5", e.item.tone === "danger" && "text-destructive", e.item.disabled && "opacity-50 pointer-events-none"), x = e.item.tone ?? "default";
-          return u !== s.e && O(t, s.e = u), x !== s.t && f(t, "data-tone", s.t = x), s;
+          var u = k("w-full px-2 py-1.5", e.item.tone === "danger" && "text-destructive", e.item.disabled && "opacity-50 pointer-events-none"), x = e.item.tone ?? "default";
+          return u !== s.e && D(t, s.e = u), x !== s.t && f(t, "data-tone", s.t = x), s;
         }, {
           e: void 0,
           t: void 0
@@ -302,7 +300,7 @@ function ee(e) {
           e.item.disabled || o() && ((a.key === "ArrowRight" || a.key === "Enter" || a.key === " ") && (a.preventDefault(), q("first")), a.key === "ArrowLeft" && (a.preventDefault(), r()));
         }, t.$$click = T;
         var x = $;
-        return typeof x == "function" ? I(x, t) : $ = t, f(t, "id", A), g(s, l(y, {
+        return typeof x == "function" ? O(x, t) : $ = t, f(t, "id", A), g(s, l(y, {
           get when() {
             return z(() => !!e.selected)() && !o();
           },
@@ -330,8 +328,8 @@ function ee(e) {
             });
           }
         }), null), F((a) => {
-          var S = M("w-full flex items-center gap-1.5 px-2 py-1 text-xs", "transition-colors duration-75", "focus:outline-none focus:bg-accent", e.item.tone === "danger" && "text-destructive", e.item.disabled ? "opacity-50 cursor-not-allowed" : "hover:bg-accent cursor-pointer"), E = e.item.disabled, D = o() ? "menu" : void 0, L = o() ? c() : void 0, K = e.selected && !o() ? "true" : void 0, N = e.item.tone ?? "default";
-          return S !== a.e && O(t, a.e = S), E !== a.t && (t.disabled = a.t = E), D !== a.a && f(t, "aria-haspopup", a.a = D), L !== a.o && f(t, "aria-expanded", a.o = L), K !== a.i && f(t, "data-floe-selected", a.i = K), N !== a.n && f(t, "data-tone", a.n = N), a;
+          var S = k("w-full flex items-center gap-1.5 px-2 py-1 text-xs", "transition-colors duration-75", "focus:outline-none focus:bg-accent", e.item.tone === "danger" && "text-destructive", e.item.disabled ? "opacity-50 cursor-not-allowed" : "hover:bg-accent cursor-pointer"), E = e.item.disabled, L = o() ? "menu" : void 0, p = o() ? c() : void 0, K = e.selected && !o() ? "true" : void 0, N = e.item.tone ?? "default";
+          return S !== a.e && D(t, a.e = S), E !== a.t && (t.disabled = a.t = E), L !== a.a && f(t, "aria-haspopup", a.a = L), p !== a.o && f(t, "aria-expanded", a.o = p), K !== a.i && f(t, "data-floe-selected", a.i = K), N !== a.n && f(t, "data-tone", a.n = N), a;
         }, {
           e: void 0,
           t: void 0,
@@ -343,7 +341,7 @@ function ee(e) {
       }
     }), null), g(n, l(y, {
       get when() {
-        return z(() => !!k.mounted())() && o();
+        return z(() => !!M.mounted())() && o();
       },
       get children() {
         return l(W, {
@@ -352,18 +350,18 @@ function ee(e) {
           },
           get children() {
             var t = H(), s = w;
-            return typeof s == "function" ? I(s, t) : w = t, G(t, J({
+            return typeof s == "function" ? O(s, t) : w = t, G(t, J({
               get class() {
-                return M(e.portalLayout.isSurfaceMode() ? "absolute z-20 min-w-36 py-0.5" : "fixed z-50 min-w-36 py-0.5", "bg-popover text-popover-foreground", "rounded border border-border shadow-md", "floe-floating-presence floe-floating-menu floe-floating-submenu");
+                return k(e.portalLayout.isSurfaceMode() ? "absolute z-20 min-w-36 py-0.5" : "fixed z-50 min-w-36 py-0.5", "bg-popover text-popover-foreground", "rounded border border-border shadow-md", "floe-floating-presence floe-floating-menu floe-floating-submenu");
               },
               get "data-floe-dropdown"() {
                 return e.dropdownId;
               },
               get "data-floating-presence"() {
-                return k.state();
+                return M.state();
               },
               get "aria-hidden"() {
-                return k.exiting() ? "true" : void 0;
+                return M.exiting() ? "true" : void 0;
               }
             }, () => ({
               [X]: e.portalLayout.isSurfaceMode() ? "true" : void 0
@@ -431,12 +429,12 @@ function Fe(e) {
   return l($e, {
     triggerInputSurface: !0,
     get triggerClass() {
-      return M("flex items-center justify-between gap-2 h-8 px-2.5 w-full", "rounded border border-input bg-background text-xs shadow-sm", "transition-colors duration-100", e.class);
+      return k("flex items-center justify-between gap-2 h-8 px-2.5 w-full", "rounded border border-input bg-background text-xs shadow-sm", "transition-colors duration-100", e.class);
     },
     get trigger() {
       return [(() => {
         var o = Se();
-        return g(o, () => c()?.label ?? e.placeholder ?? "Select..."), F(() => O(o, M("truncate", !c() && "text-muted-foreground"))), o;
+        return g(o, () => c()?.label ?? e.placeholder ?? "Select..."), F(() => D(o, k("truncate", !c() && "text-muted-foreground"))), o;
       })(), l(ae, {
         class: "w-3.5 h-3.5 text-muted-foreground"
       })];

package/dist/components/ui/FloatingWindow.js

@@ -33,8 +33,7 @@ function Dt(n) {
     width: 400,
     height: 300
   }), [c, Me] = g(!1), [k, ae] = g(!1), [M, se] = g(!1), [Te, q] = g(!1), S = st({
-    open: () => n.open,
-    exitDurationMs: 120
+    open: () => n.open
   });
   let de = {
     x: 0,
@@ -413,7 +412,7 @@ function Dt(n) {
             },
             get style() {
               return {
-                "border-radius": c() ? "0" : "10px"
+                "border-radius": c() ? "0" : "var(--floe-radius-floating)"
               };
             },
             get "data-floating-presence"() {

package/dist/components/ui/Input.js

@@ -36,7 +36,7 @@ function Te(r) {
       get class() {
         return I(
           "w-full rounded border border-input bg-background shadow-sm",
-          "placeholder:text-muted-foreground/60",
+          "placeholder:text-muted-foreground",
           "transition-colors duration-100",
           "focus:outline-none",
           "disabled:cursor-not-allowed disabled:opacity-50",
@@ -93,7 +93,7 @@ function _e(r) {
         return $();
       },
       get class() {
-        return I("w-full min-h-16 rounded border border-input bg-background p-2.5 text-xs shadow-sm", "placeholder:text-muted-foreground/60", "transition-colors duration-100", "focus:outline-none", "disabled:cursor-not-allowed disabled:opacity-50", "resize-y", e.error && "border-error", e.class);
+        return I("w-full min-h-16 rounded border border-input bg-background p-2.5 text-xs shadow-sm", "placeholder:text-muted-foreground", "transition-colors duration-100", "focus:outline-none", "disabled:cursor-not-allowed disabled:opacity-50", "resize-y", e.error && "border-error", e.class);
       }
     }, b), !1, !1), l(o, f(w, {
       get when() {
@@ -270,7 +270,7 @@ function De(r) {
         return $();
       },
       get class() {
-        return I("flex-1 min-w-0 bg-transparent border-none", "placeholder:text-muted-foreground/60", "outline-none focus:outline-none focus:ring-0", "disabled:cursor-not-allowed", x().text, x().px);
+        return I("flex-1 min-w-0 bg-transparent border-none", "placeholder:text-muted-foreground", "outline-none focus:outline-none focus:ring-0", "disabled:cursor-not-allowed", x().text, x().px);
       }
     }, b), !1, !1), l(c, f(w, {
       get when() {

package/dist/components/ui/Radio.js

@@ -1,7 +1,7 @@
-import { createComponent as l, spread as G, mergeProps as I, insert as a, effect as g, className as f, setAttribute as p, template as m } from "solid-js/web";
+import { createComponent as l, spread as G, mergeProps as I, insert as a, effect as f, className as v, setAttribute as p, template as b } from "solid-js/web";
 import { splitProps as j, createUniqueId as M, For as A, Switch as B, Match as R, Show as x, createContext as D, useContext as F } from "solid-js";
 import { cn as c } from "../../utils/cn.js";
-var H = /* @__PURE__ */ m("<div role=radiogroup>"), U = /* @__PURE__ */ m("<input data-floe-choice-input type=radio>"), V = /* @__PURE__ */ m("<div data-floe-surface=inset data-floe-surface-part=indicator><div data-floe-surface=flat data-floe-surface-part=radio-dot>"), $ = /* @__PURE__ */ m("<span>"), J = /* @__PURE__ */ m('<div class="flex flex-col">'), K = /* @__PURE__ */ m('<label><div class="relative flex items-center justify-center pt-0.5">'), Q = /* @__PURE__ */ m("<label data-floe-surface-part=choice><span class=font-medium>"), T = /* @__PURE__ */ m('<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>'), W = /* @__PURE__ */ m('<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">'), X = /* @__PURE__ */ m('<div class="absolute top-1.5 right-1.5"><div class="w-2 h-2 rounded-full bg-primary">'), Y = /* @__PURE__ */ m("<label data-floe-surface-part=choice>"), Z = /* @__PURE__ */ m("<div>");
+var H = /* @__PURE__ */ b("<div role=radiogroup>"), U = /* @__PURE__ */ b("<input data-floe-choice-input type=radio>"), V = /* @__PURE__ */ b("<div data-floe-surface=inset data-floe-surface-part=indicator><div data-floe-surface=flat data-floe-surface-part=radio-dot>"), $ = /* @__PURE__ */ b("<span>"), J = /* @__PURE__ */ b('<div class="flex flex-col">'), K = /* @__PURE__ */ b('<label><div class="relative flex items-center justify-center pt-0.5">'), Q = /* @__PURE__ */ b("<label data-floe-surface-part=choice><span class=font-medium>"), T = /* @__PURE__ */ b('<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>'), W = /* @__PURE__ */ b('<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">'), X = /* @__PURE__ */ b('<div class="absolute top-1.5 right-1.5"><div class="w-2 h-2 rounded-full bg-primary">'), Y = /* @__PURE__ */ b("<label data-floe-surface-part=choice>"), Z = /* @__PURE__ */ b("<div>");
 const O = D();
 function ee() {
   const y = F(O);
@@ -51,7 +51,7 @@ const C = {
   }
 };
 function ne(y) {
-  const [s, t] = j(y, ["value", "onChange", "size", "orientation", "variant", "disabled", "name", "class", "children"]), w = M(), k = () => s.name ?? w, _ = () => s.variant ?? "default", v = {
+  const [s, t] = j(y, ["value", "onChange", "size", "orientation", "variant", "disabled", "name", "class", "children"]), w = M(), k = () => s.name ?? w, _ = () => s.variant ?? "default", g = {
     value: () => s.value,
     onChange: (u) => s.onChange?.(u),
     size: () => s.size ?? "md",
@@ -63,7 +63,7 @@ function ne(y) {
     return u === "button" ? c("inline-flex rounded-md border border-border overflow-hidden", d ? "flex-row" : "flex-col") : u === "card" || u === "tile" ? c("grid gap-2", d ? "grid-flow-col auto-cols-fr" : "grid-cols-1") : c("flex", d ? "flex-row flex-wrap gap-4" : "flex-col gap-2");
   };
   return l(O.Provider, {
-    value: v,
+    value: g,
     get children() {
       var u = H();
       return G(u, I({
@@ -81,7 +81,7 @@ function ne(y) {
   });
 }
 function oe(y) {
-  const s = ee(), [t, w] = j(y, ["value", "label", "description", "icon", "size", "class", "disabled", "id"]), k = M(), _ = () => t.id ?? k, v = () => t.size ?? s.size(), h = () => s.variant(), u = () => t.disabled ?? s.disabled(), d = () => s.value() === t.value, q = () => {
+  const s = ee(), [t, w] = j(y, ["value", "label", "description", "icon", "size", "class", "disabled", "id"]), k = M(), _ = () => t.id ?? k, g = () => t.size ?? s.size(), h = () => s.variant(), u = () => t.disabled ?? s.disabled(), d = () => s.value() === t.value, q = () => {
     u() || s.onChange(t.value);
   }, S = (e) => (() => {
     var r = U();
@@ -107,9 +107,9 @@ function oe(y) {
     }, w), !1, !1), r;
   })(), L = () => (() => {
     var e = V(), r = e.firstChild;
-    return g((n) => {
-      var i = d() ? "true" : void 0, o = c("rounded-full border-2 transition-colors duration-150", "flex items-center justify-center", C[v()].outer, d() ? "border-primary bg-primary" : c("border-input bg-background", h() === "default" && "hover:border-primary/50"), u() && "cursor-not-allowed", "peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2"), b = c("rounded-full bg-primary-foreground transition-transform duration-150", C[v()].inner, d() ? "scale-100" : "scale-0");
-      return i !== n.e && p(e, "data-floe-selected", n.e = i), o !== n.t && f(e, n.t = o), b !== n.a && f(r, n.a = b), n;
+    return f((n) => {
+      var i = d() ? "true" : void 0, o = c("rounded-full border-2 transition-colors duration-150", "flex items-center justify-center", C[g()].outer, d() ? "border-primary bg-primary" : c("border-input bg-background", h() === "default" && "hover:border-primary/50"), u() && "cursor-not-allowed", "peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2"), m = c("rounded-full bg-primary-foreground transition-transform duration-150", C[g()].inner, d() ? "scale-100" : "scale-0");
+      return i !== n.e && p(e, "data-floe-selected", n.e = i), o !== n.t && v(e, n.t = o), m !== n.a && v(r, n.a = m), n;
     }, {
       e: void 0,
       t: void 0,
@@ -136,7 +136,7 @@ function oe(y) {
                 },
                 get children() {
                   var i = $();
-                  return a(i, () => t.label), g(() => f(i, c("text-foreground", C[v()].label))), i;
+                  return a(i, () => t.label), f(() => v(i, c("text-foreground", C[g()].label))), i;
                 }
               }), null), a(n, l(x, {
                 get when() {
@@ -144,11 +144,11 @@ function oe(y) {
                 },
                 get children() {
                   var i = $();
-                  return a(i, () => t.description), g(() => f(i, c("text-muted-foreground", C[v()].description))), i;
+                  return a(i, () => t.description), f(() => v(i, c("text-muted-foreground", C[g()].description))), i;
                 }
               }), null), n;
             }
-          }), null), g(() => f(e, c("inline-flex items-start gap-2 cursor-pointer select-none", u() && "opacity-50 cursor-not-allowed", t.class))), e;
+          }), null), f(() => v(e, c("inline-flex items-start gap-2 cursor-pointer select-none", u() && "opacity-50 cursor-not-allowed", t.class))), e;
         }
       }), l(R, {
         get when() {
@@ -158,9 +158,9 @@ function oe(y) {
           var e = Q(), r = e.firstChild;
           return a(e, l(S, {
             class: "sr-only"
-          }), r), a(r, () => t.label), g((n) => {
-            var i = d() ? "inset" : "raised", o = d() ? "true" : void 0, b = h(), z = c("cursor-pointer select-none transition-colors duration-150", "border-r border-border last:border-r-0", re[v()], d() ? "bg-primary text-primary-foreground" : "bg-background text-foreground hover:bg-muted", u() && "opacity-50 cursor-not-allowed", t.class);
-            return i !== n.e && p(e, "data-floe-surface", n.e = i), o !== n.t && p(e, "data-floe-selected", n.t = o), b !== n.a && p(e, "data-floe-choice-variant", n.a = b), z !== n.o && f(e, n.o = z), n;
+          }), r), a(r, () => t.label), f((n) => {
+            var i = d() ? "inset" : "raised", o = d() ? "true" : void 0, m = h(), z = c("cursor-pointer select-none transition-colors duration-150", "border-r border-border last:border-r-0", re[g()], d() ? "bg-primary text-primary-foreground" : "bg-background text-foreground hover:bg-muted", u() && "opacity-50 cursor-not-allowed", t.class);
+            return i !== n.e && p(e, "data-floe-surface", n.e = i), o !== n.t && p(e, "data-floe-selected", n.t = o), m !== n.a && p(e, "data-floe-choice-variant", n.a = m), z !== n.o && v(e, n.o = z), n;
           }, {
             e: void 0,
             t: void 0,
@@ -180,7 +180,7 @@ function oe(y) {
             },
             get children() {
               var o = $();
-              return a(o, () => t.label), g(() => f(o, c("font-medium text-foreground", C[v()].label))), o;
+              return a(o, () => t.label), f(() => v(o, c("font-medium text-foreground", C[g()].label))), o;
             }
           }), null), a(i, l(x, {
             get when() {
@@ -188,7 +188,7 @@ function oe(y) {
             },
             get children() {
               var o = $();
-              return a(o, () => t.description), g(() => f(o, c("text-muted-foreground mt-0.5", C[v()].description))), o;
+              return a(o, () => t.description), f(() => v(o, c("text-muted-foreground mt-0.5", C[g()].description))), o;
             }
           }), null), a(e, l(x, {
             get when() {
@@ -197,9 +197,9 @@ function oe(y) {
             get children() {
               return T();
             }
-          }), null), g((o) => {
-            var b = d() ? "inset" : "raised", z = d() ? "true" : void 0, N = h(), P = c("relative cursor-pointer select-none rounded-lg border-2 transition-all duration-150", te[v()], d() ? "border-primary bg-primary/5" : "border-border bg-background hover:border-primary/50 hover:bg-muted/50", u() && "opacity-50 cursor-not-allowed", t.class);
-            return b !== o.e && p(e, "data-floe-surface", o.e = b), z !== o.t && p(e, "data-floe-selected", o.t = z), N !== o.a && p(e, "data-floe-choice-variant", o.a = N), P !== o.o && f(e, o.o = P), o;
+          }), null), f((o) => {
+            var m = d() ? "inset" : "raised", z = d() ? "true" : void 0, N = h(), P = c("relative cursor-pointer select-none rounded-lg border-2 transition-[background-color,border-color,color] duration-120", te[g()], d() ? "border-primary bg-primary/5" : "border-border bg-background hover:border-primary/50 hover:bg-muted/50", u() && "opacity-50 cursor-not-allowed", t.class);
+            return m !== o.e && p(e, "data-floe-surface", o.e = m), z !== o.t && p(e, "data-floe-selected", o.t = z), N !== o.a && p(e, "data-floe-choice-variant", o.a = N), P !== o.o && v(e, o.o = P), o;
           }, {
             e: void 0,
             t: void 0,
@@ -225,9 +225,9 @@ function oe(y) {
                 var i = Z();
                 return a(i, l(n, {
                   get class() {
-                    return E[v()].icon;
+                    return E[g()].icon;
                   }
-                })), g(() => f(i, c("mb-2 transition-colors duration-150", d() ? "text-primary" : "text-muted-foreground"))), i;
+                })), f(() => v(i, c("mb-2 transition-colors duration-150", d() ? "text-primary" : "text-muted-foreground"))), i;
               })();
             }
           }), null), a(e, l(x, {
@@ -236,7 +236,7 @@ function oe(y) {
             },
             get children() {
               var r = $();
-              return a(r, () => t.label), g(() => f(r, c("font-medium transition-colors duration-150", C[v()].label, d() ? "text-primary" : "text-foreground"))), r;
+              return a(r, () => t.label), f(() => v(r, c("font-medium transition-colors duration-150", C[g()].label, d() ? "text-primary" : "text-foreground"))), r;
             }
           }), null), a(e, l(x, {
             get when() {
@@ -244,7 +244,7 @@ function oe(y) {
             },
             get children() {
               var r = $();
-              return a(r, () => t.description), g(() => f(r, c("text-muted-foreground mt-0.5", C[v()].description))), r;
+              return a(r, () => t.description), f(() => v(r, c("text-muted-foreground mt-0.5", C[g()].description))), r;
             }
           }), null), a(e, l(x, {
             get when() {
@@ -253,9 +253,9 @@ function oe(y) {
             get children() {
               return X();
             }
-          }), null), g((r) => {
-            var n = d() ? "inset" : "raised", i = d() ? "true" : void 0, o = h(), b = c("relative flex flex-col items-center justify-center cursor-pointer select-none", "rounded-lg border-2 transition-all duration-150 text-center", E[v()].container, d() ? "border-primary bg-primary/5" : "border-border bg-background hover:border-primary/50 hover:bg-muted/50", u() && "opacity-50 cursor-not-allowed", t.class);
-            return n !== r.e && p(e, "data-floe-surface", r.e = n), i !== r.t && p(e, "data-floe-selected", r.t = i), o !== r.a && p(e, "data-floe-choice-variant", r.a = o), b !== r.o && f(e, r.o = b), r;
+          }), null), f((r) => {
+            var n = d() ? "inset" : "raised", i = d() ? "true" : void 0, o = h(), m = c("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", E[g()].container, d() ? "border-primary bg-primary/5" : "border-border bg-background hover:border-primary/50 hover:bg-muted/50", u() && "opacity-50 cursor-not-allowed", t.class);
+            return n !== r.e && p(e, "data-floe-surface", r.e = n), i !== r.t && p(e, "data-floe-selected", r.t = i), o !== r.a && p(e, "data-floe-choice-variant", r.a = o), m !== r.o && v(e, r.o = m), r;
           }, {
             e: void 0,
             t: void 0,