@floegence/floe-webapp-core 0.86.65 → 0.86.68

package/dist/components/ui/picker/PickerBase.js

@@ -1,42 +1,43 @@
-import { insert as s, createComponent as l, use as H, setAttribute as v, effect as P, className as ce, memo as C, spread as te, mergeProps as re, template as f, delegateEvents as de } from "solid-js/web";
-import { createSignal as E, createEffect as T, on as ae, untrack as ue, createMemo as V, createUniqueId as ve, Show as h, For as N } from "solid-js";
-import { cn as L } from "../../../utils/cn.js";
-import { FileItemIcon as ge } from "../../file-browser/FileIcons.js";
-import { FolderOpen as le, ChevronRight as q } from "../../icons/index.js";
-import { Button as z } from "../Button.js";
-import { Input as U } from "../Input.js";
-import { PickerDirectoryRow as ie, DirectoryFavoriteButton as fe } from "./DirectoryFavorites.js";
-import { resolveTabNavigationTargetId as he } from "../Tabs.js";
-import { createFilesystemPickerDataSource as be, parsePickerPath as j, defaultPickerCopy as me, PickerNavigationError as we } from "./PickerNavigation.js";
-import { pickerParentPath as Xe } from "./PickerNavigation.js";
-var xe = /* @__PURE__ */ f('<div role=tablist class="mb-1 flex min-w-0 items-center gap-4 border-b border-[var(--floe-line)]">'), ye = /* @__PURE__ */ f('<div class="flex min-w-0 items-start gap-1.5"><div class="min-w-0 flex-1">'), ke = /* @__PURE__ */ f('<div role=alert class="flex items-center gap-2 text-xs text-error"><span class="min-w-0 flex-1 break-words">'), $e = /* @__PURE__ */ f('<div class="flex items-start gap-2 rounded-xs border border-error/30 bg-error/5 px-2 py-1.5 text-xs"role=alert><span class="min-w-0 flex-1 break-words">'), O = /* @__PURE__ */ f("<div>"), pe = /* @__PURE__ */ f('<div class="flex min-w-0 flex-col gap-2"data-filesystem-picker><div class="flex min-w-0 flex-col gap-2">'), Pe = /* @__PURE__ */ f('<div class="flex flex-wrap items-center gap-1">'), _e = /* @__PURE__ */ f("<button type=button role=tab>"), Fe = /* @__PURE__ */ f('<nav class="flex min-w-0 flex-wrap items-center gap-0.5 text-xs">'), Ce = /* @__PURE__ */ f("<span role=status>"), Ie = /* @__PURE__ */ f('<div class="flex flex-wrap items-center justify-between gap-2 text-xs text-[var(--floe-ink-soft)]"><label class="flex cursor-pointer items-center gap-1.5"><input type=checkbox class=cursor-pointer>'), Ee = /* @__PURE__ */ f('<button type=button class="max-w-full cursor-pointer truncate rounded-xs px-1 py-0.5 hover:bg-[var(--floe-state-hover)] focus-visible:ring-1 focus-visible:ring-ring">'), ne = /* @__PURE__ */ f('<p class="px-3 py-6 text-center text-xs text-[var(--floe-ink-soft)]"role=status>'), ze = /* @__PURE__ */ f('<p class="px-3 py-6 text-center text-xs text-[var(--floe-ink-soft)]">'), Ae = /* @__PURE__ */ f('<button type=button class="flex min-h-8 min-w-0 flex-1 cursor-pointer items-center gap-2 px-2 py-1.5 text-left text-xs hover:bg-[var(--floe-state-selected)] focus:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"><span class="min-w-0 flex-1 truncate">'), Ve = /* @__PURE__ */ f('<button type=button class="flex min-h-14 min-w-0 flex-1 cursor-pointer items-center gap-3 rounded-sm px-2 py-2.5 text-left hover:bg-[var(--floe-state-selected)] focus:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"><span class="flex min-w-0 flex-1 flex-col gap-0.5"><span class="truncate text-xs font-medium"></span><span class="truncate text-caption text-[var(--floe-ink-soft)]">'), De = /* @__PURE__ */ f('<div class="flex items-center gap-1.5">'), Re = /* @__PURE__ */ f('<p role=alert class="text-xs text-error">');
-function W(e) {
+import { insert as s, createComponent as l, use as J, setAttribute as u, effect as p, className as fe, memo as z, spread as re, mergeProps as ie, template as m, delegateEvents as ge } from "solid-js/web";
+import { createSignal as N, createEffect as R, on as W, untrack as ce, createMemo as j, createUniqueId as de, Show as w, For as U, onCleanup as ne } from "solid-js";
+import { cn as Q } from "../../../utils/cn.js";
+import { FileItemIcon as ve } from "../../file-browser/FileIcons.js";
+import { FolderOpen as he, ChevronRight as X, FolderPlus as ae } from "../../icons/index.js";
+import { Button as V } from "../Button.js";
+import { Input as Y } from "../Input.js";
+import { Popover as me } from "../Popover.js";
+import { PickerDirectoryRow as le, DirectoryFavoriteButton as be } from "./DirectoryFavorites.js";
+import { resolveTabNavigationTargetId as xe } from "../Tabs.js";
+import { createFilesystemPickerDataSource as we, parsePickerPath as Z, defaultPickerCopy as ye, PickerNavigationError as ke } from "./PickerNavigation.js";
+import { pickerParentPath as et } from "./PickerNavigation.js";
+var $e = /* @__PURE__ */ m('<div role=tablist class="mb-1 flex min-w-0 items-center gap-4 border-b border-[var(--floe-line)]">'), pe = /* @__PURE__ */ m('<div class="flex min-w-0 items-start gap-1.5"><div class="min-w-0 flex-1">'), Pe = /* @__PURE__ */ m('<div role=alert class="flex items-center gap-2 text-xs text-error"><span class="min-w-0 flex-1 break-words">'), _e = /* @__PURE__ */ m('<div class="flex items-start gap-2 rounded-xs border border-error/30 bg-error/5 px-2 py-1.5 text-xs"role=alert><span class="min-w-0 flex-1 break-words">'), se = /* @__PURE__ */ m("<div>"), Fe = /* @__PURE__ */ m('<div class="flex min-w-0 flex-col gap-2"data-filesystem-picker><div class="flex min-w-0 flex-col gap-2">'), Ce = /* @__PURE__ */ m('<div class="flex flex-wrap items-center gap-1">'), Ie = /* @__PURE__ */ m("<button type=button role=tab>"), Ee = /* @__PURE__ */ m('<div class="flex min-w-0 flex-wrap items-center justify-between gap-2"><nav class="flex min-w-0 flex-wrap items-center gap-0.5 text-xs">'), Ae = /* @__PURE__ */ m("<span role=status>"), Me = /* @__PURE__ */ m('<div class="flex flex-wrap items-center justify-between gap-2 text-xs text-[var(--floe-ink-soft)]"><label class="flex cursor-pointer items-center gap-1.5"><input type=checkbox class=cursor-pointer>'), ze = /* @__PURE__ */ m('<button type=button class="max-w-full cursor-pointer truncate rounded-xs px-1 py-0.5 hover:bg-[var(--floe-state-hover)] focus-visible:ring-1 focus-visible:ring-ring">'), oe = /* @__PURE__ */ m('<p class="px-3 py-6 text-center text-xs text-[var(--floe-ink-soft)]"role=status>'), De = /* @__PURE__ */ m('<p class="px-3 py-6 text-center text-xs text-[var(--floe-ink-soft)]">'), Se = /* @__PURE__ */ m('<button type=button class="flex min-h-8 min-w-0 flex-1 cursor-pointer items-center gap-2 px-2 py-1.5 text-left text-xs hover:bg-[var(--floe-state-selected)] focus:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"><span class="min-w-0 flex-1 truncate">'), Ne = /* @__PURE__ */ m('<button type=button class="flex min-h-14 min-w-0 flex-1 cursor-pointer items-center gap-3 rounded-sm px-2 py-2.5 text-left hover:bg-[var(--floe-state-selected)] focus:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"><span class="flex min-w-0 flex-1 flex-col gap-0.5"><span class="truncate text-xs font-medium"></span><span class="truncate text-caption text-[var(--floe-ink-soft)]">'), Ve = /* @__PURE__ */ m('<form data-picker-create-folder class="flex min-w-0 flex-col gap-4 p-4"><div class="flex min-w-0 items-start gap-2.5"><div class="min-w-0 flex-1"><h3 class="text-sm font-medium"></h3><p class="mt-1 truncate text-xs text-[var(--floe-ink-soft)]"></p></div></div><div class="flex min-w-0 flex-col gap-1.5"><label class="text-xs font-medium"></label></div><div class="flex flex-wrap items-center justify-end gap-2">');
+function ee(e) {
   return {
-    ...me,
+    ...ye,
     ...e.copy
   };
 }
-function se(e, o) {
-  const n = W(e);
-  return o instanceof we ? n[o.kind] : e.formatError?.(o) || (o instanceof Error ? o.message : "") || n.loadFailed;
+function ue(e, o) {
+  const i = ee(e);
+  return o instanceof ke ? i[o.kind] : e.formatError?.(o) || (o instanceof Error ? o.message : "") || i.loadFailed;
 }
-function Oe(e, o, n, y, _ = () => "browse") {
-  const [m, F] = E("browse"), k = be(() => e, n);
-  return T(ae(() => [o(), e.scopeKey], ([I]) => {
-    k.close(), I && (F(_()), e.directoryFavorites?.onRefresh?.(), y?.(), k.open(e.initialPath));
-  })), T(() => e.onValidityChange?.(k.valid() && m() === "browse")), {
-    ...k,
-    view: m,
-    setView: F
+function Je(e, o, i, k, P = () => "browse") {
+  const [b, _] = N("browse"), F = we(() => e, i);
+  return R(W(() => [o(), e.scopeKey], ([I]) => {
+    F.close(), I && (_(P()), e.directoryFavorites?.onRefresh?.(), k?.(), F.open(e.initialPath));
+  })), R(() => e.onValidityChange?.(F.valid() && b() === "browse")), {
+    ...F,
+    view: b,
+    setView: _
   };
 }
-function We(e) {
-  const o = () => W(e), n = ue(() => e.source), y = V(() => n.entries().filter((c) => c.type === "folder")), _ = V(() => n.context()?.roots.filter((c) => !c.hidden) ?? []), m = ve(), [F, k] = E(""), [I, $] = E(""), A = () => n.view() !== "browse", w = () => !!(e.suggestions?.paths.length || e.directoryFavorites), x = V(() => [...new Set((e.directoryFavorites?.paths ?? []).map((c) => j(c)).filter(Boolean))]), D = V(() => n.view() === "suggestions" ? e.suggestions?.paths ?? [] : x().filter((c) => c.toLocaleLowerCase().includes(F().trim().toLocaleLowerCase())));
-  T(ae(() => e.scopeKey, () => {
-    k(""), $("");
+function Qe(e) {
+  const o = () => ee(e), i = ce(() => e.source), k = j(() => i.entries().filter((c) => c.type === "folder")), P = j(() => i.context()?.roots.filter((c) => !c.hidden) ?? []), b = de(), [_, F] = N(""), [I, y] = N(""), $ = () => i.view() !== "browse", D = () => !!(e.suggestions?.paths.length || e.directoryFavorites), q = j(() => [...new Set((e.directoryFavorites?.paths ?? []).map((c) => Z(c)).filter(Boolean))]), B = j(() => i.view() === "suggestions" ? e.suggestions?.paths ?? [] : q().filter((c) => c.toLocaleLowerCase().includes(_().trim().toLocaleLowerCase())));
+  R(W(() => e.scopeKey, () => {
+    F(""), y("");
   }));
   let K;
-  const G = V(() => [...e.suggestions?.paths.length ? [{
+  const L = j(() => [...e.suggestions?.paths.length ? [{
     id: "suggestions",
     label: e.suggestions.label,
     disabled: e.disabled
@@ -44,85 +45,85 @@ function We(e) {
     id: "favorites",
     label: o().favorites,
     disabled: e.disabled
-  }] : [], ..._().map((c) => ({
+  }] : [], ...P().map((c) => ({
     id: `root:${c.id}`,
     label: c.label,
     path: c.pathAbs,
     disabled: e.disabled || c.permissions?.read === !1
-  }))]), B = () => {
-    if (A()) return n.view();
-    const c = j(n.pathInput(), n.context()?.homePathAbs);
-    return `root:${_().filter((i) => c === i.pathAbs || c.startsWith(i.pathAbs.replace(/\/$/, "") + "/")).sort((i, t) => t.pathAbs.length - i.pathAbs.length)[0]?.id ?? n.context()?.defaultRootId ?? _()[0]?.id}`;
-  }, J = /* @__PURE__ */ new Map(), Q = [], X = (c, b, i, t) => {
+  }))]), S = () => {
+    if ($()) return i.view();
+    const c = Z(i.pathInput(), i.context()?.homePathAbs);
+    return `root:${P().filter((t) => c === t.pathAbs || c.startsWith(t.pathAbs.replace(/\/$/, "") + "/")).sort((t, r) => r.pathAbs.length - t.pathAbs.length)[0]?.id ?? i.context()?.defaultRootId ?? P()[0]?.id}`;
+  }, G = /* @__PURE__ */ new Map(), h = [], x = (c, g, t, r) => {
     let a;
-    c.key === "ArrowDown" && (a = Math.min(b + 1, t - 1)), c.key === "ArrowUp" && (a = Math.max(0, b - 1)), c.key === "Home" && (a = 0), c.key === "End" && (a = t - 1), a !== void 0 && (c.preventDefault(), c.stopPropagation(), i[a]?.focus(), i[a]?.scrollIntoView?.({
+    c.key === "ArrowDown" && (a = Math.min(g + 1, r - 1)), c.key === "ArrowUp" && (a = Math.max(0, g - 1)), c.key === "Home" && (a = 0), c.key === "End" && (a = r - 1), a !== void 0 && (c.preventDefault(), c.stopPropagation(), t[a]?.focus(), t[a]?.scrollIntoView?.({
       block: "nearest"
     }));
-  }, oe = V(() => {
-    const c = n.currentPath();
+  }, T = j(() => {
+    const c = i.currentPath();
     if (!c) return [];
-    let b = "";
+    let g = "";
     return [{
       path: "/",
       name: o().root
-    }, ...c.split("/").filter(Boolean).map((i) => (b += `/${i}`, {
-      path: b,
-      name: i
+    }, ...c.split("/").filter(Boolean).map((t) => (g += `/${t}`, {
+      path: g,
+      name: t
     }))];
-  }), Y = [], S = (c) => {
-    n.setView("browse"), n.navigate(c), K?.focus();
-  }, Z = () => S(n.pathInput());
+  }), E = [], A = (c) => {
+    i.setView("browse"), i.navigate(c), K?.focus();
+  }, H = () => A(i.pathInput());
   return (() => {
-    var c = pe(), b = c.firstChild;
-    return s(c, l(h, {
+    var c = Fe(), g = c.firstChild;
+    return s(c, l(w, {
       get when() {
-        return w();
+        return D();
       },
       get fallback() {
         return (() => {
-          var i = Pe();
-          return s(i, l(N, {
+          var t = Ce();
+          return s(t, l(U, {
             get each() {
-              return _();
+              return P();
             },
-            children: (t) => l(z, {
+            children: (r) => l(V, {
               type: "button",
               size: "sm",
               get variant() {
-                return n.currentPath() === t.pathAbs ? "secondary" : "ghost";
+                return i.currentPath() === r.pathAbs ? "secondary" : "ghost";
               },
               get disabled() {
-                return e.disabled || t.permissions?.read === !1;
+                return e.disabled || r.permissions?.read === !1;
               },
               get title() {
-                return t.pathAbs;
+                return r.pathAbs;
               },
               onClick: () => {
-                n.navigate(t.pathAbs);
+                i.navigate(r.pathAbs);
               },
               get children() {
-                return t.label;
+                return r.label;
               }
             })
-          })), P(() => v(i, "aria-label", o().roots)), i;
+          })), p(() => u(t, "aria-label", o().roots)), t;
         })();
       },
       get children() {
-        var i = xe();
-        return s(i, l(N, {
+        var t = $e();
+        return s(t, l(U, {
           get each() {
-            return G();
+            return L();
           },
-          children: (t) => (() => {
-            var a = _e();
-            return a.$$keydown = (r) => {
-              const u = he(G(), t.id, r.key);
-              u && (r.preventDefault(), r.stopPropagation(), J.get(u)?.focus());
+          children: (r) => (() => {
+            var a = Ie();
+            return a.$$keydown = (n) => {
+              const v = xe(L(), r.id, n.key);
+              v && (n.preventDefault(), n.stopPropagation(), G.get(v)?.focus());
             }, a.$$click = () => {
-              "path" in t ? S(t.path) : (n.setView(t.id), t.id === "favorites" && e.directoryFavorites?.onRefresh?.());
-            }, H((r) => J.set(t.id, r), a), v(a, "aria-controls", m), s(a, () => t.label), P((r) => {
-              var u = `${m}-${t.id}`, g = B() === t.id, p = B() === t.id ? 0 : -1, d = t.disabled, R = "path" in t ? t.path : t.label, M = L("min-w-0 cursor-pointer truncate border-b-2 px-0.5 py-2 text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50", B() === t.id ? "border-primary text-[var(--floe-accent-ink)]" : "border-transparent text-[var(--floe-ink-soft)] hover:text-foreground");
-              return u !== r.e && v(a, "id", r.e = u), g !== r.t && v(a, "aria-selected", r.t = g), p !== r.a && v(a, "tabindex", r.a = p), d !== r.o && (a.disabled = r.o = d), R !== r.i && v(a, "title", r.i = R), M !== r.n && ce(a, r.n = M), r;
+              "path" in r ? A(r.path) : (i.setView(r.id), r.id === "favorites" && e.directoryFavorites?.onRefresh?.());
+            }, J((n) => G.set(r.id, n), a), u(a, "aria-controls", b), s(a, () => r.label), p((n) => {
+              var v = `${b}-${r.id}`, d = S() === r.id, C = S() === r.id ? 0 : -1, f = r.disabled, M = "path" in r ? r.path : r.label, O = Q("min-w-0 cursor-pointer truncate border-b-2 px-0.5 py-2 text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50", S() === r.id ? "border-primary text-[var(--floe-accent-ink)]" : "border-transparent text-[var(--floe-ink-soft)] hover:text-foreground");
+              return v !== n.e && u(a, "id", n.e = v), d !== n.t && u(a, "aria-selected", n.t = d), C !== n.a && u(a, "tabindex", n.a = C), f !== n.o && (a.disabled = n.o = f), M !== n.i && u(a, "title", n.i = M), O !== n.n && fe(a, n.n = O), n;
             }, {
               e: void 0,
               t: void 0,
@@ -132,18 +133,18 @@ function We(e) {
               n: void 0
             }), a;
           })()
-        })), P(() => v(i, "aria-label", o().roots)), i;
+        })), p(() => u(t, "aria-label", o().roots)), t;
       }
-    }), b), v(b, "id", m), s(b, l(h, {
+    }), g), u(g, "id", b), s(g, l(w, {
       get when() {
-        return !A();
+        return !$();
       },
       get children() {
-        var i = ye(), t = i.firstChild;
-        return s(t, l(U, {
+        var t = pe(), r = t.firstChild;
+        return s(r, l(Y, {
           ref(a) {
-            var r = K;
-            typeof r == "function" ? r(a) : K = a;
+            var n = K;
+            typeof n == "function" ? n(a) : K = a;
           },
           size: "sm",
           get "aria-label"() {
@@ -151,108 +152,108 @@ function We(e) {
           },
           placeholder: "/",
           get value() {
-            return n.pathInput();
+            return i.pathInput();
           },
           get disabled() {
-            return e.disabled || !n.context();
+            return e.disabled || !i.context();
           },
-          onInput: (a) => n.setPathInput(a.currentTarget.value),
+          onInput: (a) => i.setPathInput(a.currentTarget.value),
           onKeyDown: (a) => {
-            a.key === "Enter" && (a.preventDefault(), a.stopPropagation(), Z());
+            a.key === "Enter" && (a.preventDefault(), a.stopPropagation(), H());
           }
-        })), s(i, l(z, {
+        })), s(t, l(V, {
           size: "sm",
           variant: "outline",
-          onClick: Z,
+          onClick: H,
           get disabled() {
-            return e.disabled || !n.context() || !n.pathInput();
+            return e.disabled || !i.context() || !i.pathInput();
           },
           get children() {
             return o().go;
           }
-        }), null), i;
+        }), null), t;
       }
-    }), null), s(b, l(h, {
+    }), null), s(g, l(w, {
       get when() {
         return I() || e.directoryFavorites?.error;
       },
       get children() {
-        var i = ke(), t = i.firstChild;
-        return s(t, () => I() || e.directoryFavorites?.error), s(i, l(z, {
+        var t = Pe(), r = t.firstChild;
+        return s(r, () => I() || e.directoryFavorites?.error), s(t, l(V, {
           size: "sm",
           variant: "ghost",
           get disabled() {
             return e.directoryFavorites?.loading;
           },
           onClick: () => {
-            $(""), e.directoryFavorites?.onRefresh?.();
+            y(""), e.directoryFavorites?.onRefresh?.();
           },
           get children() {
             return o().retry;
           }
-        }), null), i;
+        }), null), t;
       }
-    }), null), s(b, l(h, {
+    }), null), s(g, l(w, {
       get when() {
-        return C(() => !!n.error())() && !A();
+        return z(() => !!i.error())() && !$();
       },
       get children() {
-        var i = $e(), t = i.firstChild;
-        return s(t, () => se(e, n.error())), s(i, l(z, {
+        var t = _e(), r = t.firstChild;
+        return s(r, () => ue(e, i.error())), s(t, l(V, {
           size: "sm",
           variant: "ghost",
           onClick: () => {
-            n.retry();
+            i.retry();
           },
           get disabled() {
-            return e.disabled || n.pending();
+            return e.disabled || i.pending();
           },
           get children() {
             return o().retry;
           }
-        }), null), i;
+        }), null), t;
       }
-    }), null), s(b, l(h, {
+    }), null), s(g, l(w, {
       get when() {
-        return A();
+        return $();
       },
       get fallback() {
         return [(() => {
-          var i = Fe();
-          return s(i, l(N, {
+          var t = Ee(), r = t.firstChild;
+          return s(r, l(U, {
             get each() {
-              return oe();
+              return T();
             },
-            children: (t, a) => [l(h, {
+            children: (a, n) => [l(w, {
               get when() {
-                return a() > 0;
+                return n() > 0;
               },
               get children() {
-                return l(q, {
+                return l(X, {
                   class: "h-3 w-3 shrink-0 text-[var(--floe-ink-soft)]"
                 });
               }
             }), (() => {
-              var r = Ee();
-              return r.$$click = () => {
-                n.navigate(t.path);
-              }, s(r, () => t.name), P((u) => {
-                var g = t.path, p = e.disabled, d = t.path === n.currentPath() ? "location" : void 0;
-                return g !== u.e && v(r, "title", u.e = g), p !== u.t && (r.disabled = u.t = p), d !== u.a && v(r, "aria-current", u.a = d), u;
+              var v = ze();
+              return v.$$click = () => {
+                i.navigate(a.path);
+              }, s(v, () => a.name), p((d) => {
+                var C = a.path, f = e.disabled, M = a.path === i.currentPath() ? "location" : void 0;
+                return C !== d.e && u(v, "title", d.e = C), f !== d.t && (v.disabled = d.t = f), M !== d.a && u(v, "aria-current", d.a = M), d;
               }, {
                 e: void 0,
                 t: void 0,
                 a: void 0
-              }), r;
+              }), v;
             })()]
-          }), null), s(i, l(h, {
+          }), null), s(r, l(w, {
             get when() {
               return e.directoryFavorites;
             },
             get children() {
-              return l(fe, {
+              return l(be, {
                 get path() {
-                  return n.currentPath();
+                  return i.currentPath();
                 },
                 get favorites() {
                   return e.directoryFavorites;
@@ -261,57 +262,64 @@ function We(e) {
                   return o();
                 },
                 get disabled() {
-                  return e.disabled || !n.valid();
+                  return e.disabled || !i.valid();
                 },
-                onError: $
+                onError: y
               });
             }
-          }), null), P(() => v(i, "aria-label", o().currentDirectory)), i;
+          }), null), s(t, l(w, {
+            get when() {
+              return e.onCreateFolder;
+            },
+            get children() {
+              return l(Re, e);
+            }
+          }), null), p(() => u(r, "aria-label", o().currentDirectory)), t;
         })(), (() => {
-          var i = O();
-          return te(i, re(() => e.scrollViewportProps, {
+          var t = se();
+          return re(t, ie(() => e.scrollViewportProps, {
             get class() {
-              return L("min-h-[120px] overflow-y-auto rounded-xs border border-[var(--floe-line)]", e.scrollViewportProps?.class);
+              return Q("min-h-[120px] overflow-y-auto rounded-xs border border-[var(--floe-line)]", e.scrollViewportProps?.class);
             },
             get style() {
               return {
                 "max-height": e.treeMaxHeight ?? "240px"
               };
             }
-          }), !1, !0), s(i, l(h, {
+          }), !1, !0), s(t, l(w, {
             get when() {
-              return !n.pending() || n.currentPath();
+              return !i.pending() || i.currentPath();
             },
             get fallback() {
               return (() => {
-                var t = ne();
-                return s(t, () => o().loading), t;
+                var r = oe();
+                return s(r, () => o().loading), r;
               })();
             },
             get children() {
-              return l(h, {
+              return l(w, {
                 get when() {
-                  return y().length;
+                  return k().length;
                 },
                 get fallback() {
-                  return l(h, {
+                  return l(w, {
                     get when() {
-                      return n.currentPath();
+                      return i.currentPath();
                     },
                     get children() {
-                      var t = ze();
-                      return s(t, () => o().empty), t;
+                      var r = De();
+                      return s(r, () => o().empty), r;
                     }
                   });
                 },
                 get children() {
-                  return l(N, {
+                  return l(U, {
                     get each() {
-                      return y();
+                      return k();
                     },
-                    children: (t, a) => l(ie, {
+                    children: (r, a) => l(le, {
                       get path() {
-                        return t.path;
+                        return r.path;
                       },
                       get favorites() {
                         return e.directoryFavorites;
@@ -323,66 +331,59 @@ function We(e) {
                         return e.scopeKey;
                       },
                       get disabled() {
-                        return e.disabled || e.filter?.(t) === !1;
+                        return e.disabled || e.filter?.(r) === !1;
                       },
-                      onError: $,
+                      onError: y,
                       get children() {
-                        var r = Ae(), u = r.firstChild;
-                        return r.$$keydown = (g) => X(g, a(), Y, y().length), r.$$click = () => {
-                          n.navigate(t.path);
-                        }, H((g) => {
-                          T(() => {
-                            Y[a()] = g;
+                        var n = Se(), v = n.firstChild;
+                        return n.$$keydown = (d) => x(d, a(), E, k().length), n.$$click = () => {
+                          i.navigate(r.path);
+                        }, J((d) => {
+                          R(() => {
+                            E[a()] = d;
                           });
-                        }, r), s(r, l(ge, {
-                          item: t,
+                        }, n), s(n, l(ve, {
+                          item: r,
                           size: 16,
                           class: "h-4 w-4 shrink-0"
-                        }), u), s(u, () => t.name), s(r, l(q, {
+                        }), v), s(v, () => r.name), s(n, l(X, {
                           class: "h-3 w-3 shrink-0 text-[var(--floe-ink-soft)]"
-                        }), null), P((g) => {
-                          var p = t.path, d = e.disabled || e.filter?.(t) === !1;
-                          return p !== g.e && v(r, "data-picker-row-path", g.e = p), d !== g.t && (r.disabled = g.t = d), g;
+                        }), null), p((d) => {
+                          var C = r.path, f = e.disabled || e.filter?.(r) === !1;
+                          return C !== d.e && u(n, "data-picker-row-path", d.e = C), f !== d.t && (n.disabled = d.t = f), d;
                         }, {
                           e: void 0,
                           t: void 0
-                        }), r;
+                        }), n;
                       }
                     })
                   });
                 }
               });
             }
-          })), i;
+          })), t;
         })(), (() => {
-          var i = Ie(), t = i.firstChild, a = t.firstChild;
-          return a.addEventListener("change", (r) => {
-            n.setShowHidden(r.currentTarget.checked);
-          }), s(t, () => o().showHidden, null), s(i, l(h, {
+          var t = Me(), r = t.firstChild, a = r.firstChild;
+          return a.addEventListener("change", (n) => {
+            i.setShowHidden(n.currentTarget.checked);
+          }), s(r, () => o().showHidden, null), s(t, l(w, {
             get when() {
-              return C(() => !!n.pending())() && n.currentPath();
+              return z(() => !!i.pending())() && i.currentPath();
             },
             get children() {
-              var r = Ce();
-              return s(r, () => o().loading), r;
+              var n = Ae();
+              return s(n, () => o().loading), n;
             }
-          }), null), P(() => a.disabled = e.disabled || !n.context()), P(() => a.checked = n.showHidden()), i;
-        })(), l(h, {
-          get when() {
-            return e.onCreateFolder;
-          },
-          get children() {
-            return l(Me, e);
-          }
-        })];
+          }), null), p(() => a.disabled = e.disabled || !i.context()), p(() => a.checked = i.showHidden()), t;
+        })()];
       },
       get children() {
-        return [l(h, {
+        return [l(w, {
           get when() {
-            return n.view() === "favorites";
+            return i.view() === "favorites";
           },
           get children() {
-            return l(U, {
+            return l(Y, {
               size: "sm",
               get "aria-label"() {
                 return o().favoritesFilter;
@@ -391,54 +392,54 @@ function We(e) {
                 return o().favoritesFilter;
               },
               get value() {
-                return F();
+                return _();
               },
-              onInput: (i) => k(i.currentTarget.value)
+              onInput: (t) => F(t.currentTarget.value)
             });
           }
         }), (() => {
-          var i = O();
-          return te(i, re(() => e.scrollViewportProps, {
+          var t = se();
+          return re(t, ie(() => e.scrollViewportProps, {
             get "data-picker-suggestions"() {
-              return n.view() === "suggestions" ? "" : void 0;
+              return i.view() === "suggestions" ? "" : void 0;
             },
             get "data-picker-favorites"() {
-              return n.view() === "favorites" ? "" : void 0;
+              return i.view() === "favorites" ? "" : void 0;
             },
             get "aria-label"() {
-              return C(() => n.view() === "favorites")() ? o().favorites : e.suggestions?.label;
+              return z(() => i.view() === "favorites")() ? o().favorites : e.suggestions?.label;
             },
             get "aria-busy"() {
-              return C(() => n.view() === "favorites")() && e.directoryFavorites?.loading;
+              return z(() => i.view() === "favorites")() && e.directoryFavorites?.loading;
             },
             get class() {
-              return L("min-h-[180px] min-w-0 overflow-y-auto", e.scrollViewportProps?.class);
+              return Q("min-h-[180px] min-w-0 overflow-y-auto", e.scrollViewportProps?.class);
             },
             get style() {
               return {
                 "max-height": e.treeMaxHeight ?? "240px"
               };
             }
-          }), !1, !0), s(i, l(h, {
+          }), !1, !0), s(t, l(w, {
             get when() {
-              return D().length;
+              return B().length;
             },
             get fallback() {
               return (() => {
-                var t = ne();
-                return s(t, (() => {
-                  var a = C(() => !!e.directoryFavorites?.loading);
-                  return () => a() ? o().loading : C(() => !!e.directoryFavorites?.error)() ? o().favoritesLoadFailed : C(() => !!F().trim())() ? o().favoritesNoMatches : o().favoritesEmpty;
-                })()), t;
+                var r = oe();
+                return s(r, (() => {
+                  var a = z(() => !!e.directoryFavorites?.loading);
+                  return () => a() ? o().loading : z(() => !!e.directoryFavorites?.error)() ? o().favoritesLoadFailed : z(() => !!_().trim())() ? o().favoritesNoMatches : o().favoritesEmpty;
+                })()), r;
               })();
             },
             get children() {
-              return l(N, {
+              return l(U, {
                 get each() {
-                  return D();
+                  return B();
                 },
-                children: (t, a) => l(ie, {
-                  path: t,
+                children: (r, a) => l(le, {
+                  path: r,
                   get favorites() {
                     return e.directoryFavorites;
                   },
@@ -451,37 +452,37 @@ function We(e) {
                   get disabled() {
                     return e.disabled;
                   },
-                  onError: $,
+                  onError: y,
                   get children() {
-                    var r = Ve(), u = r.firstChild, g = u.firstChild, p = g.nextSibling;
-                    return r.$$keydown = (d) => X(d, a(), Q, D().length), r.$$click = () => {
-                      S(t);
-                    }, H((d) => {
-                      T(() => {
-                        Q[a()] = d;
+                    var n = Ne(), v = n.firstChild, d = v.firstChild, C = d.nextSibling;
+                    return n.$$keydown = (f) => x(f, a(), h, B().length), n.$$click = () => {
+                      A(r);
+                    }, J((f) => {
+                      R(() => {
+                        h[a()] = f;
                       });
-                    }, r), v(r, "title", t), v(r, "aria-label", t), s(r, l(le, {
+                    }, n), u(n, "title", r), u(n, "aria-label", r), s(n, l(he, {
                       class: "h-4 w-4 shrink-0 text-[var(--floe-ink-soft)]"
-                    }), u), s(g, () => t.split("/").filter(Boolean).at(-1) ?? o().root), s(p, t), s(r, l(q, {
+                    }), v), s(d, () => r.split("/").filter(Boolean).at(-1) ?? o().root), s(C, r), s(n, l(X, {
                       class: "h-3 w-3 shrink-0 text-[var(--floe-ink-quiet)]"
-                    }), null), P((d) => {
-                      var R = n.view() === "suggestions" ? t : void 0, M = n.view() === "favorites" ? t : void 0, ee = e.disabled || !n.context();
-                      return R !== d.e && v(r, "data-picker-suggested-path", d.e = R), M !== d.t && v(r, "data-picker-favorite-path", d.t = M), ee !== d.a && (r.disabled = d.a = ee), d;
+                    }), null), p((f) => {
+                      var M = i.view() === "suggestions" ? r : void 0, O = i.view() === "favorites" ? r : void 0, te = e.disabled || !i.context();
+                      return M !== f.e && u(n, "data-picker-suggested-path", f.e = M), O !== f.t && u(n, "data-picker-favorite-path", f.t = O), te !== f.a && (n.disabled = f.a = te), f;
                     }, {
                       e: void 0,
                       t: void 0,
                       a: void 0
-                    }), r;
+                    }), n;
                   }
                 })
               });
             }
-          })), i;
+          })), t;
         })()];
       }
-    }), null), P((i) => {
-      var t = n.pending(), a = w() ? "tabpanel" : void 0, r = w() ? `${m}-${B()}` : void 0;
-      return t !== i.e && v(c, "aria-busy", i.e = t), a !== i.t && v(b, "role", i.t = a), r !== i.a && v(b, "aria-labelledby", i.a = r), i;
+    }), null), p((t) => {
+      var r = i.pending(), a = D() ? "tabpanel" : void 0, n = D() ? `${b}-${S()}` : void 0;
+      return r !== t.e && u(c, "aria-busy", t.e = r), a !== t.t && u(g, "role", t.t = a), n !== t.a && u(g, "aria-labelledby", t.a = n), t;
     }, {
       e: void 0,
       t: void 0,
@@ -489,95 +490,132 @@ function We(e) {
     }), c;
   })();
 }
-function Me(e) {
-  const [o, n] = E(!1), [y, _] = E(""), [m, F] = E(!1), [k, I] = E(null), $ = () => W(e), A = async () => {
-    if (!y().trim() || !e.source.valid() || !e.onCreateFolder || m()) return;
-    const w = e.source.currentPath();
-    F(!0), I(null);
+function Re(e) {
+  const [o, i] = N(!1), [k, P] = N(""), [b, _] = N(!1), [F, I] = N(null), y = () => ee(e);
+  let $ = 0, D, q;
+  const B = de(), K = () => !!k().trim() && ![".", ".."].includes(k().trim()) && !k().includes("/") && !k().includes("\0"), L = () => {
+    $++, i(!1), P(""), _(!1), I(null);
+  };
+  R(W(() => [e.scopeKey, e.source.context(), e.source.active(), e.source.pathInput()], L)), ne(() => {
+    $++;
+  }), R(W(o, (h) => {
+    if (!h) return;
+    const x = requestAnimationFrame(() => D?.focus());
+    ne(() => cancelAnimationFrame(x));
+  }));
+  const S = () => {
+    L(), queueMicrotask(() => q?.focus());
+  }, G = async () => {
+    if (e.disabled || !K() || !e.source.valid() || !e.onCreateFolder || b()) return;
+    const h = e.source.currentPath(), x = $, T = e.source.captureIntent(), E = () => $ === x && T();
+    _(!0), I(null);
     try {
-      await e.onCreateFolder(w, y().trim()), _(""), n(!1), e.source.active() && w === e.source.currentPath() && await e.source.navigate(w);
-    } catch (x) {
-      I(x);
+      if (await e.onCreateFolder(h, k().trim()), !E()) return;
+      P(""), i(!1), await e.source.navigate(h), $ === x && e.source.active() && queueMicrotask(() => q?.focus());
+    } catch (A) {
+      E() && (I(A), queueMicrotask(() => D?.focus()));
     } finally {
-      F(!1);
+      $ === x && _(!1);
     }
   };
-  return (() => {
-    var w = O();
-    return s(w, l(h, {
-      get when() {
-        return o();
-      },
-      get fallback() {
-        return l(z, {
-          size: "sm",
-          variant: "ghost",
-          get disabled() {
-            return e.disabled || !e.source.valid();
-          },
-          onClick: () => n(!0),
-          get children() {
-            return [l(le, {
-              class: "mr-1 h-3.5 w-3.5"
-            }), C(() => $().newFolder)];
-          }
-        });
-      },
-      get children() {
-        var x = De();
-        return s(x, l(U, {
-          size: "sm",
-          get "aria-label"() {
-            return $().folderName;
-          },
-          get value() {
-            return y();
-          },
-          onInput: (D) => _(D.currentTarget.value),
-          get disabled() {
-            return e.disabled || m();
-          }
-        }), null), s(x, l(z, {
-          size: "sm",
-          get disabled() {
-            return e.disabled || m() || !y().trim() || !e.source.valid();
-          },
-          onClick: () => {
-            A();
-          },
-          get children() {
-            return $().create;
-          }
-        }), null), s(x, l(z, {
-          size: "sm",
-          variant: "ghost-destructive",
-          get disabled() {
-            return e.disabled || m();
-          },
-          onClick: () => n(!1),
-          get children() {
-            return $().cancel;
-          }
-        }), null), x;
-      }
-    }), null), s(w, l(h, {
-      get when() {
-        return k();
-      },
-      get children() {
-        var x = Re();
-        return s(x, () => se(e, k())), x;
-      }
-    }), null), w;
-  })();
+  return l(me, {
+    get open() {
+      return o();
+    },
+    placement: "bottom-end",
+    get ariaLabel() {
+      return y().newFolder;
+    },
+    class: "w-80 overflow-hidden",
+    onOpenChange: (h) => {
+      b() || (h ? !e.disabled && e.source.valid() && i(!0) : L());
+    },
+    get trigger() {
+      return l(V, {
+        ref(h) {
+          var x = q;
+          typeof x == "function" ? x(h) : q = h;
+        },
+        size: "sm",
+        variant: "ghost",
+        icon: ae,
+        "aria-haspopup": "dialog",
+        get "aria-expanded"() {
+          return o();
+        },
+        get disabled() {
+          return e.disabled || !e.source.valid();
+        },
+        get children() {
+          return y().newFolder;
+        }
+      });
+    },
+    get children() {
+      var h = Ve(), x = h.firstChild, T = x.firstChild, E = T.firstChild, A = E.nextSibling, H = x.nextSibling, c = H.firstChild, g = H.nextSibling;
+      return h.$$keydown = (t) => {
+        t.isComposing || t.key === "Escape" && (t.preventDefault(), t.stopPropagation(), b() || S());
+      }, h.addEventListener("submit", (t) => {
+        t.preventDefault(), G();
+      }), s(x, l(ae, {
+        class: "mt-0.5 h-4 w-4 shrink-0 text-[var(--floe-ink-soft)]"
+      }), T), s(E, () => y().newFolder), s(A, () => e.source.currentPath()), u(c, "for", B), s(c, () => y().folderName), s(H, l(Y, {
+        id: B,
+        get "aria-label"() {
+          return y().folderName;
+        },
+        ref: (t) => {
+          D = t, queueMicrotask(() => {
+            ce(o) && t.focus();
+          });
+        },
+        get value() {
+          return k();
+        },
+        get error() {
+          return z(() => !!F())() ? ue(e, F()) : void 0;
+        },
+        onInput: (t) => {
+          P(t.currentTarget.value), I(null);
+        },
+        get disabled() {
+          return e.disabled || b();
+        }
+      }), null), s(g, l(V, {
+        type: "button",
+        size: "sm",
+        variant: "ghost-destructive",
+        get disabled() {
+          return b();
+        },
+        onClick: S,
+        get children() {
+          return y().cancel;
+        }
+      }), null), s(g, l(V, {
+        type: "submit",
+        size: "sm",
+        variant: "primary",
+        get loading() {
+          return b();
+        },
+        get disabled() {
+          return e.disabled || b() || !K() || !e.source.valid();
+        },
+        get children() {
+          return y().create;
+        }
+      }), null), p(() => u(A, "title", e.source.currentPath())), h;
+    }
+  });
 }
-const Ge = j;
-de(["click", "keydown"]);
+const Xe = Z;
+ge(["click", "keydown"]);
 export {
-  We as PickerPanel,
-  Xe as getParentPath,
-  Ge as normalizePath,
-  W as pickerCopy,
-  se as pickerErrorMessage,
-  Oe as usePickerNavigation
+  Qe as PickerPanel,
+  et as getParentPath,
+  Xe as normalizePath,
+  ee as pickerCopy,
+  ue as pickerErrorMessage,
+  Je as usePickerNavigation
 };