@floegence/floe-webapp-core 0.86.58 → 0.86.62

package/dist/components/ui/FeedbackIndicator.js

@@ -1,30 +1,30 @@
-import { insert as c, createComponent as u, effect as I, setAttribute as g, setStyleProperty as w, spread as D, mergeProps as G, memo as J, className as Y, template as y, use as Z, delegateEvents as ee } from "solid-js/web";
+import { insert as c, createComponent as d, effect as I, setAttribute as b, setStyleProperty as w, spread as D, mergeProps as G, memo as J, className as Y, template as y, use as Z, delegateEvents as ee } from "solid-js/web";
 import { createUniqueId as te, createSignal as p, createMemo as re, createEffect as N, untrack as ne, Show as $, For as oe, onCleanup as ie } from "solid-js";
-import { AlertTriangle as se, Info as ae, X as le } from "../icons/index.js";
+import { AlertTriangle as ae, Info as se, X as le } from "../icons/index.js";
 import { useOverlayMask as ce } from "../../hooks/useOverlayMask.js";
-import { useMediaQuery as de } from "../../hooks/useMediaQuery.js";
-import { cn as ue } from "../../utils/cn.js";
+import { useMediaQuery as ue } from "../../hooks/useMediaQuery.js";
+import { cn as de } from "../../utils/cn.js";
 import { SurfaceFloatingLayer as fe } from "./SurfaceFloatingLayer.js";
-import { calculateMenuPosition as me } from "./menuUtils.js";
-import { WORKBENCH_TEXT_SELECTION_SURFACE_ATTR as ve, CANVAS_WHEEL_INTERACTIVE_ATTR as he } from "./localInteractionSurface.js";
-import { resolveSurfacePortalHost as be, resolveSurfacePortalBoundaryRect as ge, resolveSurfacePortalScale as we } from "./dialogSurfaceScope.js";
-var ye = /* @__PURE__ */ y('<div class="flex shrink-0 items-center justify-between gap-2 border-b border-border px-3 py-2"><span class="min-w-0 truncate text-xs font-medium"></span><button type=button class="flex h-7 w-7 shrink-0 cursor-pointer items-center justify-center rounded-md hover:bg-accent">'), xe = /* @__PURE__ */ y("<div data-floe-status-details>"), Ee = /* @__PURE__ */ y('<span data-floe-status-indicator><button type=button class="inline-flex h-full w-full cursor-pointer items-center justify-center rounded-md hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"aria-haspopup=dialog></button><span class=sr-only role=alert aria-atomic=true></span><span class=sr-only role=status aria-atomic=true>'), pe = /* @__PURE__ */ y("<div>"), Se = /* @__PURE__ */ y('<div class="flex flex-wrap items-center gap-2">'), Ce = /* @__PURE__ */ y('<section class="space-y-2 border-b border-border pb-3 mb-3 last:border-0 last:pb-0 last:mb-0"><p class=font-medium>');
+import { calculateMenuPosition as ve } from "./menuUtils.js";
+import { WORKBENCH_TEXT_SELECTION_SURFACE_ATTR as me, CANVAS_WHEEL_INTERACTIVE_ATTR as he } from "./localInteractionSurface.js";
+import { resolveSurfacePortalHost as ge, resolveSurfacePortalBoundaryRect as be, resolveSurfacePortalScale as we } from "./dialogSurfaceScope.js";
+var ye = /* @__PURE__ */ y('<div class="flex shrink-0 items-center justify-between gap-2 border-b border-[var(--floe-line)] px-3 py-2"><span class="min-w-0 truncate text-xs font-medium"></span><button type=button class="flex h-7 w-7 shrink-0 cursor-pointer items-center justify-center rounded-sm hover:bg-[var(--floe-state-hover)]">'), xe = /* @__PURE__ */ y("<div data-floe-status-details>"), Ee = /* @__PURE__ */ y('<span data-floe-status-indicator><button type=button class="inline-flex h-full w-full cursor-pointer items-center justify-center rounded-sm hover:bg-[var(--floe-state-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"aria-haspopup=dialog></button><span class=sr-only role=alert aria-atomic=true></span><span class=sr-only role=status aria-atomic=true>'), pe = /* @__PURE__ */ y("<div>"), Se = /* @__PURE__ */ y('<div class="flex flex-wrap items-center gap-2">'), Ce = /* @__PURE__ */ y('<section class="space-y-2 border-b border-[var(--floe-line)] pb-3 mb-3 last:border-0 last:pb-0 last:mb-0"><p class=font-medium>');
 function Be(i) {
-  const A = te(), H = de("(pointer: coarse)"), S = () => H() ? "2.75rem" : i.size === "md" ? "2rem" : "1.75rem", [m, T] = p(!1), [C, q] = p(), [K, U] = p({
+  const A = te(), H = ue("(pointer: coarse)"), S = () => H() ? "2.75rem" : i.size === "md" ? "2rem" : "1.75rem", [v, T] = p(!1), [C, q] = p(), [K, U] = p({
     x: 0,
     y: 0
   }), [M, V] = p({
     width: 360,
     height: 384
   }), [W, P] = p(!1);
-  let v, h = !1;
-  const f = () => i.entries.length > 0, _ = re(() => i.entries.some((t) => t.severity === "error") ? "error" : i.entries.some((t) => t.severity === "warning") ? "warning" : "info"), R = (t) => i.entries.filter((r) => r.severity === "error" === t).map((r) => r.summary).join(". "), X = () => (f() ? v : i.restoreFocus())?.focus({
+  let m, h = !1;
+  const f = () => i.entries.length > 0, _ = re(() => i.entries.some((t) => t.severity === "error") ? "error" : i.entries.some((t) => t.severity === "warning") ? "warning" : "info"), R = (t) => i.entries.filter((r) => r.severity === "error" === t).map((r) => r.summary).join(". "), X = () => (f() ? m : i.restoreFocus())?.focus({
     preventScroll: !0
   }), k = (t) => {
     T(!1), h = !1, t && X();
-  }, x = (t) => t instanceof Node && !!(v?.contains(t) || C()?.contains(t));
+  }, x = (t) => t instanceof Node && !!(m?.contains(t) || C()?.contains(t));
   return ce({
-    open: m,
+    open: v,
     root: C,
     containsTarget: x,
     onClose: () => k(!0),
@@ -37,8 +37,8 @@ function Be(i) {
     blockHotkeys: !1
   }), N(() => {
     if (f()) {
-      m() && queueMicrotask(() => ne(() => {
-        m() && h && document.activeElement === document.body && C()?.focus({
+      v() && queueMicrotask(() => ne(() => {
+        v() && h && document.activeElement === document.body && C()?.focus({
           preventScroll: !0
         });
       }));
@@ -50,44 +50,44 @@ function Be(i) {
     });
   }), N(() => {
     const t = C();
-    if (!m() || !t || !v) return;
-    const r = v;
-    let b = 0, F = !0;
+    if (!v() || !t || !m) return;
+    const r = m;
+    let g = 0, F = !0;
     const L = () => {
-      if (b = 0, !r.isConnected) {
+      if (g = 0, !r.isConnected) {
         k(!1);
         return;
       }
-      const n = be({
+      const n = ge({
         owner: r
-      }), d = ge(n), E = we(n);
+      }), u = be(n), E = we(n);
       V({
-        width: Math.max(0, Math.min(360, d.right - d.left - 16)) / E.x,
-        height: Math.max(0, Math.min(384, d.bottom - d.top - 16)) / E.y
-      }), U(me(r.getBoundingClientRect(), t.getBoundingClientRect(), "end", d)), P(!0), F && (F = !1, t.focus({
+        width: Math.max(0, Math.min(360, u.right - u.left - 16)) / E.x,
+        height: Math.max(0, Math.min(384, u.bottom - u.top - 16)) / E.y
+      }), U(ve(r.getBoundingClientRect(), t.getBoundingClientRect(), "end", u)), P(!0), F && (F = !1, t.focus({
         preventScroll: !0
       }));
     }, e = () => {
-      cancelAnimationFrame(b), b = requestAnimationFrame(L);
-    }, s = new ResizeObserver(e);
-    s.observe(r), s.observe(t);
+      cancelAnimationFrame(g), g = requestAnimationFrame(L);
+    }, a = new ResizeObserver(e);
+    a.observe(r), a.observe(t);
     const o = new MutationObserver(e);
     for (let n = r.parentElement; n; n = n.parentElement) o.observe(n, {
       attributes: !0,
       attributeFilter: ["style", "class"]
     });
-    const a = (n) => {
+    const s = (n) => {
       h = x(n.target);
     };
-    document.addEventListener("focusin", a);
+    document.addEventListener("focusin", s);
     const l = (n) => {
       x(n.target) || k(!1);
     };
     window.addEventListener("resize", e), window.addEventListener("scroll", e, !0), document.addEventListener("pointerdown", l, !0), e(), ie(() => {
-      cancelAnimationFrame(b), document.removeEventListener("focusin", a), s.disconnect(), o.disconnect(), window.removeEventListener("resize", e), window.removeEventListener("scroll", e, !0), document.removeEventListener("pointerdown", l, !0);
+      cancelAnimationFrame(g), document.removeEventListener("focusin", s), a.disconnect(), o.disconnect(), window.removeEventListener("resize", e), window.removeEventListener("scroll", e, !0), document.removeEventListener("pointerdown", l, !0);
     });
   }), (() => {
-    var t = Ee(), r = t.firstChild, b = r.nextSibling, F = b.nextSibling;
+    var t = Ee(), r = t.firstChild, g = r.nextSibling, F = g.nextSibling;
     r.$$click = () => {
       f() && (P(!1), T((e) => !e));
     }, r.addEventListener("blur", (e) => {
@@ -95,30 +95,30 @@ function Be(i) {
     }), r.addEventListener("focus", () => {
       h = !0;
     });
-    var L = v;
-    return typeof L == "function" ? Z(L, r) : v = r, c(r, u($, {
+    var L = m;
+    return typeof L == "function" ? Z(L, r) : m = r, c(r, d($, {
       get when() {
         return _() !== "info";
       },
       get fallback() {
-        return u(ae, {
+        return d(se, {
           class: "h-4 w-4",
           "aria-hidden": "true"
         });
       },
       get children() {
-        return u(se, {
+        return d(ae, {
           class: "h-4 w-4",
           "aria-hidden": "true"
         });
       }
-    })), c(b, () => R(!0)), c(F, () => R(!1)), c(t, u($, {
+    })), c(g, () => R(!0)), c(F, () => R(!1)), c(t, d($, {
       get when() {
-        return J(() => !!m())() && f();
+        return J(() => !!v())() && f();
       },
       get children() {
-        return u(fe, {
-          owner: v,
+        return d(fe, {
+          owner: m,
           get position() {
             return K();
           },
@@ -130,7 +130,7 @@ function Be(i) {
           },
           tabindex: -1,
           "data-floe-surface": "floating",
-          class: "flex flex-col overflow-hidden rounded-lg border border-border bg-popover text-popover-foreground shadow-lg",
+          class: "flex flex-col overflow-hidden rounded-group border border-[var(--floe-line)] bg-popover text-popover-foreground shadow-[var(--floe-elevation-float)]",
           get style() {
             return {
               width: `${M().width}px`,
@@ -140,12 +140,12 @@ function Be(i) {
           },
           get children() {
             return [(() => {
-              var e = ye(), s = e.firstChild, o = s.nextSibling;
-              return c(s, () => i.label), o.$$click = () => k(!0), c(o, u(le, {
+              var e = ye(), a = e.firstChild, o = a.nextSibling;
+              return c(a, () => i.label), o.$$click = () => k(!0), c(o, d(le, {
                 class: "h-4 w-4"
-              })), I((a) => {
-                var l = i.closeLabel, n = S(), d = S();
-                return l !== a.e && g(o, "aria-label", a.e = l), n !== a.t && w(o, "width", a.t = n), d !== a.a && w(o, "height", a.a = d), a;
+              })), I((s) => {
+                var l = i.closeLabel, n = S(), u = S();
+                return l !== s.e && b(o, "aria-label", s.e = l), n !== s.t && w(o, "width", s.t = n), u !== s.a && w(o, "height", s.a = u), s;
               }, {
                 e: void 0,
                 t: void 0,
@@ -155,33 +155,33 @@ function Be(i) {
               var e = xe();
               return D(e, G({
                 [he]: "true",
-                [ve]: "true"
+                [me]: "true"
               }, {
                 class: "min-h-0 overflow-auto overscroll-contain p-3 text-xs",
                 style: {
                   "overflow-wrap": "anywhere"
                 }
-              }), !1, !0), c(e, u(oe, {
+              }), !1, !0), c(e, d(oe, {
                 get each() {
                   return i.entries;
                 },
-                children: (s) => (() => {
-                  var o = Ce(), a = o.firstChild;
-                  return c(a, () => s.summary), c(o, u($, {
+                children: (a) => (() => {
+                  var o = Ce(), s = o.firstChild;
+                  return c(s, () => a.summary), c(o, d($, {
                     get when() {
-                      return s.detail;
+                      return a.detail;
                     },
                     get children() {
                       var l = pe();
-                      return c(l, () => s.detail), l;
+                      return c(l, () => a.detail), l;
                     }
-                  }), null), c(o, u($, {
+                  }), null), c(o, d($, {
                     get when() {
-                      return s.actions;
+                      return a.actions;
                     },
                     get children() {
                       var l = Se();
-                      return c(l, () => s.actions), l;
+                      return c(l, () => a.actions), l;
                     }
                   }), null), o;
                 })()
@@ -191,8 +191,8 @@ function Be(i) {
         });
       }
     }), null), I((e) => {
-      var s = ue("inline-flex shrink-0 items-center justify-center align-middle", i.class), o = S(), a = S(), l = f() ? "visible" : "hidden", n = _() === "error" ? "var(--error)" : _() === "warning" ? "var(--warning)" : "var(--muted-foreground)", d = f() ? 0 : -1, E = !f() || void 0, B = `${i.label}${f() ? `: ${i.entries.map((Q) => Q.summary).join("; ")}` : ""}`, O = i.label, j = m(), z = m() ? A : void 0;
-      return s !== e.e && Y(t, e.e = s), o !== e.t && w(t, "width", e.t = o), a !== e.a && w(t, "height", e.a = a), l !== e.o && w(r, "visibility", e.o = l), n !== e.i && w(r, "color", e.i = n), d !== e.n && g(r, "tabindex", e.n = d), E !== e.s && g(r, "aria-hidden", e.s = E), B !== e.h && g(r, "aria-label", e.h = B), O !== e.r && g(r, "title", e.r = O), j !== e.d && g(r, "aria-expanded", e.d = j), z !== e.l && g(r, "aria-controls", e.l = z), e;
+      var a = de("inline-flex shrink-0 items-center justify-center align-middle", i.class), o = S(), s = S(), l = f() ? "visible" : "hidden", n = _() === "error" ? "var(--error)" : _() === "warning" ? "var(--warning)" : "var(--muted-foreground)", u = f() ? 0 : -1, E = !f() || void 0, B = `${i.label}${f() ? `: ${i.entries.map((Q) => Q.summary).join("; ")}` : ""}`, O = i.label, j = v(), z = v() ? A : void 0;
+      return a !== e.e && Y(t, e.e = a), o !== e.t && w(t, "width", e.t = o), s !== e.a && w(t, "height", e.a = s), l !== e.o && w(r, "visibility", e.o = l), n !== e.i && w(r, "color", e.i = n), u !== e.n && b(r, "tabindex", e.n = u), E !== e.s && b(r, "aria-hidden", e.s = E), B !== e.h && b(r, "aria-label", e.h = B), O !== e.r && b(r, "title", e.r = O), j !== e.d && b(r, "aria-expanded", e.d = j), z !== e.l && b(r, "aria-controls", e.l = z), e;
     }, {
       e: void 0,
       t: void 0,

package/dist/components/ui/FileOpenPicker.js

@@ -1,56 +1,56 @@
-import { createComponent as a, insert as c, mergeProps as z, spread as K, use as L, effect as j, setAttribute as M, className as V, memo as H, template as x, delegateEvents as R } from "solid-js/web";
-import { createSignal as U, mergeProps as Y, createMemo as q, Show as w, For as G } from "solid-js";
+import { createComponent as a, insert as c, mergeProps as z, spread as K, use as L, effect as j, setAttribute as M, className as V, memo as H, template as v, delegateEvents as R } from "solid-js/web";
+import { createSignal as U, mergeProps as Y, createMemo as q, Show as b, For as G } from "solid-js";
 import { cn as N } from "../../utils/cn.js";
 import { deferNonBlocking as J } from "../../utils/defer.js";
 import { Check as Q } from "../icons/index.js";
 import { FileItemIcon as W } from "../file-browser/FileIcons.js";
 import { Button as D } from "./Button.js";
 import { Dialog as X } from "./Dialog.js";
-import { usePickerNavigation as Z, PickerPanel as ee, normalizePath as k, pickerCopy as b } from "./picker/PickerBase.js";
+import { usePickerNavigation as Z, PickerPanel as ee, normalizePath as k, pickerCopy as w } from "./picker/PickerBase.js";
 import { pickerParentPath as te } from "./picker/PickerNavigation.js";
-var ne = /* @__PURE__ */ x('<div class="flex min-h-[140px] overflow-hidden rounded border border-border"><div>'), ie = /* @__PURE__ */ x('<div class="flex flex-col gap-2 -mt-1">'), le = /* @__PURE__ */ x('<div class="flex items-center w-full gap-2"><span class="flex-1 text-[11px] text-muted-foreground truncate">'), re = /* @__PURE__ */ x('<div class="flex h-full items-center justify-center px-4 text-center text-xs text-muted-foreground">'), oe = /* @__PURE__ */ x('<span class="ml-auto flex h-5 min-w-5 items-center justify-center rounded-full bg-primary px-1 text-[10px] text-primary-foreground">'), ae = /* @__PURE__ */ x("<button type=button role=option><span class=truncate>");
+var ne = /* @__PURE__ */ v('<div class="flex min-h-[140px] overflow-hidden rounded-xs border border-[var(--floe-line)]"><div>'), ie = /* @__PURE__ */ v('<div class="flex flex-col gap-2 -mt-1">'), le = /* @__PURE__ */ v('<div class="flex items-center w-full gap-2"><span class="flex-1 text-[length:var(--floe-type-caption)] text-[var(--floe-ink-soft)] truncate">'), re = /* @__PURE__ */ v('<div class="flex h-full items-center justify-center px-4 text-center text-[length:var(--floe-type-supporting)] text-[var(--floe-ink-soft)]">'), oe = /* @__PURE__ */ v('<span class="ml-auto flex h-5 min-w-5 items-center justify-center rounded-full bg-primary px-1 text-caption text-primary-foreground">'), ae = /* @__PURE__ */ v("<button type=button role=option><span class=truncate>");
 function ce(e, s) {
-  const u = y(s), f = /* @__PURE__ */ new Set(), d = [];
-  for (const g of e ?? []) {
-    const i = k(g);
-    if (!(i === "/" || f.has(i)) && (f.add(i), d.push(i), d.length >= u))
+  const u = y(s), d = /* @__PURE__ */ new Set(), f = [];
+  for (const h of e ?? []) {
+    const i = k(h);
+    if (!(i === "/" || d.has(i)) && (d.add(i), f.push(i), f.length >= u))
       break;
   }
-  return d;
+  return f;
 }
-function se(e, s, u, f) {
-  const d = k(s);
-  if (d === "/") return [...e];
-  if (u === "single") return [d];
-  const g = e.indexOf(d);
-  return g >= 0 ? e.filter((i, h) => h !== g) : e.length >= y(f) ? [...e] : [...e, d];
+function se(e, s, u, d) {
+  const f = k(s);
+  if (f === "/") return [...e];
+  if (u === "single") return [f];
+  const h = e.indexOf(f);
+  return h >= 0 ? e.filter((i, g) => g !== h) : e.length >= y(d) ? [...e] : [...e, f];
 }
 function y(e) {
   return e == null || !Number.isFinite(e) ? Number.POSITIVE_INFINITY : Math.max(1, Math.floor(e));
 }
 function ke(e) {
-  const s = () => e.selectionMode ?? "single", [u, f] = U([]), d = () => {
+  const s = () => e.selectionMode ?? "single", [u, d] = U([]), f = () => {
     if (e.initialPath) return e.initialPath;
     const t = e.initialSelectedPaths?.[0];
     return t ? te(t) : void 0;
-  }, g = Y(e, {
+  }, h = Y(e, {
     get initialPath() {
-      return d();
+      return f();
     },
     get scopeKey() {
       return e.scopeKey;
     }
-  }), i = Z(g, () => e.open, void 0, () => {
-    f(ce(e.initialSelectedPaths, s() === "single" ? 1 : e.maxSelections));
-  }), h = q(() => i.entries().filter((t) => t.type === "file" && (!e.fileFilter || e.fileFilter(t)))), T = (t) => u().indexOf(k(t)), A = () => s() === "multiple" && u().length >= y(e.maxSelections), B = (t) => {
-    f((o) => se(o, t.path, s(), e.maxSelections));
+  }), i = Z(h, () => e.open, void 0, () => {
+    d(ce(e.initialSelectedPaths, s() === "single" ? 1 : e.maxSelections));
+  }), g = q(() => i.entries().filter((t) => t.type === "file" && (!e.fileFilter || e.fileFilter(t)))), T = (t) => u().indexOf(k(t)), A = () => s() === "multiple" && u().length >= y(e.maxSelections), B = (t) => {
+    d((o) => se(o, t.path, s(), e.maxSelections));
   }, P = (t = u()) => {
     if (e.disabled || t.length === 0 || i.view() !== "browse" || !i.valid()) return;
     const o = e.onSelect;
     e.onOpenChange(!1), J(() => o([...t]));
   }, E = (t, o) => {
     let l;
-    t.key === "ArrowDown" && (l = Math.min(o + 1, h().length - 1)), t.key === "ArrowUp" && (l = Math.max(o - 1, 0)), t.key === "Home" && (l = 0), t.key === "End" && (l = h().length - 1), !(l == null || l < 0) && (t.preventDefault(), $[l]?.focus());
+    t.key === "ArrowDown" && (l = Math.min(o + 1, g().length - 1)), t.key === "ArrowUp" && (l = Math.max(o - 1, 0)), t.key === "Home" && (l = 0), t.key === "End" && (l = g().length - 1), !(l == null || l < 0) && (t.preventDefault(), $[l]?.focus());
   }, $ = [];
   return a(X, {
     get open() {
@@ -70,13 +70,13 @@ function ke(e) {
         var t = le(), o = t.firstChild;
         return c(o, (() => {
           var l = H(() => u().length === 0);
-          return () => l() ? b(e).noFilesSelected : b(e).selectedCount(u().length);
+          return () => l() ? w(e).noFilesSelected : w(e).selectedCount(u().length);
         })()), c(t, a(D, {
           variant: "ghost",
           size: "sm",
           onClick: () => e.onOpenChange(!1),
           get children() {
-            return e.cancelText ?? b(e).cancel;
+            return e.cancelText ?? w(e).cancel;
           }
         }), null), c(t, a(D, {
           variant: "primary",
@@ -95,7 +95,7 @@ function ke(e) {
       var t = ie();
       return c(t, a(ee, z(e, {
         source: i
-      })), null), c(t, a(w, {
+      })), null), c(t, a(b, {
         get when() {
           return i.view() === "browse";
         },
@@ -107,23 +107,23 @@ function ke(e) {
             get "aria-multiselectable"() {
               return s() === "multiple" ? "true" : void 0;
             }
-          }), !1, !0), c(l, a(w, {
+          }), !1, !0), c(l, a(b, {
             get when() {
-              return h().length > 0;
+              return g().length > 0;
             },
             get fallback() {
               return (() => {
                 var m = re();
-                return c(m, () => e.emptyText ?? b(e).emptyFiles), m;
+                return c(m, () => e.emptyText ?? w(e).emptyFiles), m;
               })();
             },
             get children() {
               return a(G, {
                 get each() {
-                  return h();
+                  return g();
                 },
                 children: (m, S) => {
-                  const v = () => T(m.path), F = () => A() && v() < 0;
+                  const x = () => T(m.path), F = () => A() && x() < 0;
                   return (() => {
                     var r = ae(), _ = r.firstChild;
                     return r.$$keydown = (n) => E(n, S()), r.$$dblclick = () => {
@@ -134,13 +134,13 @@ function ke(e) {
                       item: m,
                       size: 16,
                       class: "w-4 h-4 flex-shrink-0"
-                    }), _), c(_, () => m.name), c(r, a(w, {
+                    }), _), c(_, () => m.name), c(r, a(b, {
                       get when() {
-                        return v() >= 0;
+                        return x() >= 0;
                       },
                       get children() {
                         var n = oe();
-                        return c(n, a(w, {
+                        return c(n, a(b, {
                           get when() {
                             return s() === "multiple";
                           },
@@ -150,13 +150,13 @@ function ke(e) {
                             });
                           },
                           get children() {
-                            return v() + 1;
+                            return x() + 1;
                           }
                         })), n;
                       }
                     }), null), j((n) => {
-                      var C = v() >= 0, I = F(), O = F() ? b(e).selectionLimit : m.name, p = N("flex min-h-9 w-full cursor-pointer items-center gap-2 px-2 py-1.5 text-left text-xs", "transition-colors duration-100 hover:bg-accent/60", "focus:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring", "disabled:cursor-not-allowed disabled:opacity-45", v() >= 0 && "bg-accent text-accent-foreground font-medium");
-                      return C !== n.e && M(r, "aria-selected", n.e = C), I !== n.t && (r.disabled = n.t = I), O !== n.a && M(r, "title", n.a = O), p !== n.o && V(r, n.o = p), n;
+                      var C = x() >= 0, p = F(), I = F() ? w(e).selectionLimit : m.name, O = N("flex min-h-9 w-full cursor-pointer items-center gap-2 px-2 py-1.5 text-left text-xs", "transition-colors duration-[var(--floe-duration-fast)] ease-[var(--floe-ease-out)] hover:bg-[var(--floe-state-hover)]", "focus:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring", "disabled:cursor-not-allowed disabled:opacity-45", x() >= 0 && "bg-[var(--floe-state-selected)] text-foreground font-medium");
+                      return C !== n.e && M(r, "aria-selected", n.e = C), p !== n.t && (r.disabled = n.t = p), I !== n.a && M(r, "title", n.a = I), O !== n.o && V(r, n.o = O), n;
                     }, {
                       e: void 0,
                       t: void 0,

package/dist/components/ui/FileSavePicker.js

@@ -1,43 +1,43 @@
-import { createComponent as a, insert as n, mergeProps as _, spread as z, effect as b, className as B, setAttribute as E, template as u, delegateEvents as D } from "solid-js/web";
-import { createSignal as F, createMemo as k, createEffect as I, on as O, Show as x, For as K } from "solid-js";
-import { cn as C } from "../../utils/cn.js";
+import { createComponent as a, insert as n, mergeProps as p, spread as z, effect as k, className as B, setAttribute as E, template as f, delegateEvents as D } from "solid-js/web";
+import { createSignal as _, createMemo as F, createEffect as I, on as O, Show as h, For as K } from "solid-js";
+import { cn as b } from "../../utils/cn.js";
 import { Dialog as T } from "./Dialog.js";
-import { Button as N } from "./Button.js";
+import { Button as C } from "./Button.js";
 import { Input as M } from "./Input.js";
 import { FileItemIcon as j } from "../file-browser/FileIcons.js";
 import { deferNonBlocking as q } from "../../utils/defer.js";
-import { usePickerNavigation as A, PickerPanel as R, pickerCopy as g } from "./picker/PickerBase.js";
-var V = /* @__PURE__ */ u('<div class="flex min-h-[100px] overflow-hidden rounded border border-border"><div>'), G = /* @__PURE__ */ u('<div class="flex flex-col gap-2 -mt-1">'), H = /* @__PURE__ */ u('<div class="flex flex-col w-full gap-2"><div class="flex items-center gap-1.5"><label class="text-xs text-muted-foreground flex-shrink-0"></label><div class=flex-1></div></div><div class="flex items-center gap-2"><span class="flex-1 text-[11px] text-muted-foreground truncate">'), J = /* @__PURE__ */ u('<div class="flex items-center justify-center h-full text-xs text-muted-foreground">'), L = /* @__PURE__ */ u('<span class="ml-auto text-[10px] text-muted-foreground/60 flex-shrink-0">'), Q = /* @__PURE__ */ u("<button type=button><span class=truncate>");
+import { usePickerNavigation as A, PickerPanel as R, pickerCopy as d } from "./picker/PickerBase.js";
+var V = /* @__PURE__ */ f('<div class="flex min-h-[100px] overflow-hidden rounded-xs border border-[var(--floe-line)]"><div>'), G = /* @__PURE__ */ f('<div class="flex flex-col gap-2 -mt-1">'), H = /* @__PURE__ */ f('<div class="flex flex-col w-full gap-2"><div class="flex items-center gap-1.5"><label class="text-[length:var(--floe-type-supporting)] text-[var(--floe-ink-soft)] flex-shrink-0"></label><div class=flex-1></div></div><div class="flex items-center gap-2"><span class="flex-1 text-[length:var(--floe-type-caption)] text-[var(--floe-ink-soft)] truncate">'), J = /* @__PURE__ */ f('<div class="flex items-center justify-center h-full text-[length:var(--floe-type-supporting)] text-[var(--floe-ink-soft)]">'), L = /* @__PURE__ */ f('<span class="ml-auto text-[length:var(--floe-type-caption)] text-[var(--floe-ink-ghost)] flex-shrink-0">'), Q = /* @__PURE__ */ f("<button type=button><span class=truncate>");
 function ie(e) {
-  const [s, v] = F(e.initialFileName ?? ""), [p, m] = F(""), o = A(e, () => e.open, void 0, () => {
-    v(e.initialFileName ?? ""), m("");
-  }), h = k(() => o.entries().filter((t) => t.type === "file"));
+  const [s, g] = _(e.initialFileName ?? ""), [N, u] = _(""), o = A(e, () => e.open, void 0, () => {
+    g(e.initialFileName ?? ""), u("");
+  }), x = F(() => o.entries().filter((t) => t.type === "file"));
   I(O(s, () => {
-    m("");
+    u("");
   }));
-  const S = (t) => {
-    v(t.name), m("");
+  const y = (t) => {
+    g(t.name), u("");
   }, $ = () => {
     if (e.disabled || o.view() !== "browse" || !o.valid()) return;
     const t = s().trim();
     if (!t) {
-      m(g(e).fileNameRequired);
+      u(d(e).fileNameRequired);
       return;
     }
     if (e.validateFileName) {
       const r = e.validateFileName(t);
       if (r) {
-        m(r);
+        u(r);
         return;
       }
     }
     const l = o.currentPath(), c = e.onSave;
     e.onOpenChange(!1), q(() => c(l, t));
-  }, P = () => {
+  }, S = () => {
     e.onOpenChange(!1);
-  }, y = (t) => {
+  }, P = (t) => {
     t.key === "Enter" && (t.preventDefault(), $());
-  }, w = k(() => {
+  }, w = F(() => {
     const t = o.currentPath(), l = s().trim();
     return l ? t === "/" ? `/${l}` : `${t}/${l}` : t;
   });
@@ -52,30 +52,30 @@ function ie(e) {
       return e.title ?? "Save File";
     },
     get class() {
-      return C("max-w-2xl", e.class);
+      return b("max-w-2xl", e.class);
     },
     get footer() {
       return (() => {
-        var t = H(), l = t.firstChild, c = l.firstChild, r = c.nextSibling, i = l.nextSibling, f = i.firstChild;
-        return n(c, () => g(e).fileName), n(r, a(M, {
+        var t = H(), l = t.firstChild, c = l.firstChild, r = c.nextSibling, i = l.nextSibling, m = i.firstChild;
+        return n(c, () => d(e).fileName), n(r, a(M, {
           size: "sm",
           get value() {
             return s();
           },
-          onInput: (d) => v(d.currentTarget.value),
-          onKeyDown: y,
+          onInput: (v) => g(v.currentTarget.value),
+          onKeyDown: P,
           placeholder: "filename.ext",
           get error() {
-            return p();
+            return N();
           }
-        })), n(f, w), n(i, a(N, {
+        })), n(m, w), n(i, a(C, {
           variant: "ghost",
           size: "sm",
-          onClick: P,
+          onClick: S,
           get children() {
-            return e.cancelText ?? g(e).cancel;
+            return e.cancelText ?? d(e).cancel;
           }
-        }), null), n(i, a(N, {
+        }), null), n(i, a(C, {
           variant: "primary",
           size: "sm",
           onClick: $,
@@ -85,51 +85,51 @@ function ie(e) {
           get children() {
             return e.confirmText ?? "Save";
           }
-        }), null), b(() => E(f, "title", w())), t;
+        }), null), k(() => E(m, "title", w())), t;
       })();
     },
     get children() {
       var t = G();
-      return n(t, a(R, _(e, {
+      return n(t, a(R, p(e, {
         source: o
-      })), null), n(t, a(x, {
+      })), null), n(t, a(h, {
         get when() {
           return o.view() === "browse";
         },
         get children() {
           var l = V(), c = l.firstChild;
-          return z(c, _(() => e.scrollViewportProps, {
+          return z(c, p(() => e.scrollViewportProps, {
             class: "max-h-[160px] w-full min-w-0 overflow-y-auto"
-          }), !1, !0), n(c, a(x, {
+          }), !1, !0), n(c, a(h, {
             get when() {
-              return h().length > 0;
+              return x().length > 0;
             },
             get fallback() {
               return (() => {
                 var r = J();
-                return n(r, () => g(e).emptyFiles), r;
+                return n(r, () => d(e).emptyFiles), r;
               })();
             },
             get children() {
               return a(K, {
                 get each() {
-                  return h();
+                  return x();
                 },
                 children: (r) => (() => {
-                  var i = Q(), f = i.firstChild;
-                  return i.$$click = () => S(r), n(i, a(j, {
+                  var i = Q(), m = i.firstChild;
+                  return i.$$click = () => y(r), n(i, a(j, {
                     item: r,
                     size: 16,
                     class: "w-4 h-4 flex-shrink-0"
-                  }), f), n(f, () => r.name), n(i, a(x, {
+                  }), m), n(m, () => r.name), n(i, a(h, {
                     get when() {
                       return r.size != null;
                     },
                     get children() {
-                      var d = L();
-                      return n(d, () => U(r.size)), d;
+                      var v = L();
+                      return n(v, () => U(r.size)), v;
                     }
-                  }), null), b(() => B(i, C("flex items-center gap-1.5 w-full text-left text-xs py-1.5 px-2 cursor-pointer", "transition-colors duration-100", "hover:bg-accent/60", "focus:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring", s() === r.name && "bg-accent text-accent-foreground font-medium"))), i;
+                  }), null), k(() => B(i, b("flex items-center gap-1.5 w-full text-left text-xs py-1.5 px-2 cursor-pointer", "transition-colors duration-[var(--floe-duration-instant)]", "hover:bg-[var(--floe-state-hover)]", "focus:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring", s() === r.name && "bg-[var(--floe-state-selected)] text-foreground font-medium"))), i;
                 })()
               });
             }