@floegence/floe-webapp-core 0.26.2 → 0.26.4

package/dist/components/chat/input/ChatInput.js

@@ -1,47 +1,60 @@
-import { addEventListener as h, insert as s, createComponent as o, effect as C, className as D, setAttribute as B, template as c, use as H, delegateEvents as M } from "solid-js/web";
-import { createSignal as S, Show as v } from "solid-js";
-import { cn as _ } from "../../../utils/cn.js";
-import { useChatContext as z } from "../ChatProvider.js";
-import { useAttachments as K } from "../hooks/useAttachments.js";
-import { AttachmentPreview as R } from "./AttachmentPreview.js";
-var U = /* @__PURE__ */ c("<div class=chat-input-drop-overlay><span>Drop files here"), j = /* @__PURE__ */ c('<button type=button class=chat-input-attachment-btn title="Add attachments">'), N = /* @__PURE__ */ c('<div><div class=chat-input-row><textarea class=chat-input-textarea rows=1></textarea><button type=button title="Send message">'), O = /* @__PURE__ */ c('<svg width=18 height=18 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2><path d="m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48">'), q = /* @__PURE__ */ c('<svg width=18 height=18 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2><line x1=22 y1=2 x2=11 y2=13></line><polygon points="22 2 15 22 11 13 2 9 22 2">'), G = /* @__PURE__ */ c('<svg width=32 height=32 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="17 8 12 3 7 8"></polyline><line x1=12 y1=3 x2=12 y2=15>');
-const nt = (d) => {
-  const r = z(), [g, f] = S(""), [E, w] = S(!1);
-  let i;
-  const n = K({
-    maxAttachments: r.config().maxAttachments,
-    maxSize: r.config().maxAttachmentSize,
-    acceptedTypes: r.config().acceptedFileTypes,
-    onUpload: r.config().allowAttachments ? (t) => r.uploadAttachment(t) : void 0
-  }), I = () => d.placeholder || r.config().placeholder || "Type a message...", p = () => (g().trim() || n.attachments().length > 0) && !d.disabled, L = () => {
-    i && (i.style.height = "auto", i.style.height = `${Math.min(i.scrollHeight, 200)}px`);
-  }, P = (t) => {
-    f(t.currentTarget.value), L();
+import { addEventListener as h, insert as s, createComponent as r, effect as S, className as _, setAttribute as M, template as c, use as j, delegateEvents as q } from "solid-js/web";
+import { createSignal as F, onCleanup as z, Show as v } from "solid-js";
+import { cn as E } from "../../../utils/cn.js";
+import { useChatContext as K } from "../ChatProvider.js";
+import { useAttachments as R } from "../hooks/useAttachments.js";
+import { AttachmentPreview as U } from "./AttachmentPreview.js";
+var N = /* @__PURE__ */ c("<div class=chat-input-drop-overlay><span>Drop files here"), O = /* @__PURE__ */ c('<button type=button class=chat-input-attachment-btn title="Add attachments">'), G = /* @__PURE__ */ c('<div><div class=chat-input-row><textarea class=chat-input-textarea rows=1></textarea><button type=button title="Send message">'), J = /* @__PURE__ */ c('<svg width=18 height=18 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2><path d="m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48">'), Q = /* @__PURE__ */ c('<svg width=18 height=18 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2><line x1=22 y1=2 x2=11 y2=13></line><polygon points="22 2 15 22 11 13 2 9 22 2">'), V = /* @__PURE__ */ c('<svg width=32 height=32 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="17 8 12 3 7 8"></polyline><line x1=12 y1=3 x2=12 y2=15>');
+const rt = (u) => {
+  const i = K(), [p, y] = F(""), [I, w] = F(!1);
+  let d, o = null;
+  const n = R({
+    maxAttachments: i.config().maxAttachments,
+    maxSize: i.config().maxAttachmentSize,
+    acceptedTypes: i.config().acceptedFileTypes,
+    onUpload: i.config().allowAttachments ? (t) => i.uploadAttachment(t) : void 0
+  }), L = () => u.placeholder || i.config().placeholder || "Type a message...", f = () => (p().trim() || n.attachments().length > 0) && !u.disabled, x = () => {
+    const t = d;
+    t && (t.style.height = "auto", t.style.height = `${Math.min(t.scrollHeight, 200)}px`);
+  }, P = () => {
+    if (o === null) {
+      if (typeof requestAnimationFrame > "u") {
+        x();
+        return;
+      }
+      o = requestAnimationFrame(() => {
+        o = null, x();
+      });
+    }
   }, T = (t) => {
-    t.key === "Enter" && !t.shiftKey && (t.preventDefault(), y());
-  }, y = async () => {
-    if (!p()) return;
-    const t = g().trim(), l = n.attachments();
-    f(""), n.clearAttachments(), i && (i.style.height = "auto"), await r.sendMessage(t, l);
-  }, F = async (t) => {
-    r.config().allowAttachments && await n.handlePaste(t);
+    y(t.currentTarget.value), P();
+  }, H = (t) => {
+    t.key === "Enter" && !t.shiftKey && (t.preventDefault(), A());
+  }, A = async () => {
+    if (!f()) return;
+    const t = p().trim(), l = n.attachments();
+    y(""), n.clearAttachments(), d && (d.style.height = "auto"), await i.sendMessage(t, l);
+  }, B = async (t) => {
+    i.config().allowAttachments && await n.handlePaste(t);
   };
-  return (() => {
-    var t = N(), l = t.firstChild, a = l.firstChild, u = a.nextSibling;
-    h(t, "drop", n.handleDrop), h(t, "dragover", n.handleDragOver), h(t, "dragleave", n.handleDragLeave), h(t, "dragenter", n.handleDragEnter), s(t, o(v, {
+  return z(() => {
+    o !== null && typeof cancelAnimationFrame < "u" && (cancelAnimationFrame(o), o = null);
+  }), (() => {
+    var t = G(), l = t.firstChild, a = l.firstChild, m = a.nextSibling;
+    h(t, "drop", n.handleDrop), h(t, "dragover", n.handleDragOver), h(t, "dragleave", n.handleDragLeave), h(t, "dragenter", n.handleDragEnter), s(t, r(v, {
       get when() {
         return n.isDragging();
       },
       get children() {
-        var e = U(), m = e.firstChild;
-        return s(e, o(V, {}), m), e;
+        var e = N(), g = e.firstChild;
+        return s(e, r(Y, {}), g), e;
       }
-    }), l), s(t, o(v, {
+    }), l), s(t, r(v, {
       get when() {
         return n.attachments().length > 0;
       },
       get children() {
-        return o(R, {
+        return r(U, {
           get attachments() {
             return n.attachments();
           },
@@ -50,29 +63,29 @@ const nt = (d) => {
           }
         });
       }
-    }), l), s(l, o(v, {
+    }), l), s(l, r(v, {
       get when() {
-        return r.config().allowAttachments;
+        return i.config().allowAttachments;
       },
       get children() {
-        var e = j();
-        return h(e, "click", n.openFilePicker, !0), s(e, o(J, {})), e;
+        var e = O();
+        return h(e, "click", n.openFilePicker, !0), s(e, r(W, {})), e;
       }
-    }), a), a.addEventListener("blur", () => w(!1)), a.addEventListener("focus", () => w(!0)), a.addEventListener("paste", F), a.$$keydown = T, a.$$input = P;
-    var x = i;
-    return typeof x == "function" ? H(x, a) : i = a, u.$$click = y, s(u, o(Q, {})), C((e) => {
-      var m = _("chat-input-container", E() && "chat-input-container-focused", n.isDragging() && "chat-input-container-dragging", d.class), $ = I(), b = d.disabled, k = _("chat-input-send-btn", p() && "chat-input-send-btn-active"), A = !p();
-      return m !== e.e && D(t, e.e = m), $ !== e.t && B(a, "placeholder", e.t = $), b !== e.a && (a.disabled = e.a = b), k !== e.o && D(u, e.o = k), A !== e.i && (u.disabled = e.i = A), e;
+    }), a), a.addEventListener("blur", () => w(!1)), a.addEventListener("focus", () => w(!0)), a.addEventListener("paste", B), a.$$keydown = H, a.$$input = T;
+    var $ = d;
+    return typeof $ == "function" ? j($, a) : d = a, m.$$click = A, s(m, r(X, {})), S((e) => {
+      var g = E("chat-input-container", I() && "chat-input-container-focused", n.isDragging() && "chat-input-container-dragging", u.class), b = L(), k = u.disabled, C = E("chat-input-send-btn", f() && "chat-input-send-btn-active"), D = !f();
+      return g !== e.e && _(t, e.e = g), b !== e.t && M(a, "placeholder", e.t = b), k !== e.a && (a.disabled = e.a = k), C !== e.o && _(m, e.o = C), D !== e.i && (m.disabled = e.i = D), e;
     }, {
       e: void 0,
       t: void 0,
       a: void 0,
       o: void 0,
       i: void 0
-    }), C(() => a.value = g()), t;
+    }), S(() => a.value = p()), t;
   })();
-}, J = () => O(), Q = () => q(), V = () => G();
-M(["click", "input", "keydown"]);
+}, W = () => J(), X = () => Q(), Y = () => V();
+q(["click", "input", "keydown"]);
 export {
-  nt as ChatInput
+  rt as ChatInput
 };

package/dist/components/deck/WidgetResizeHandle.js

@@ -1,12 +1,12 @@
-import { effect as x, className as B, setAttribute as L, template as _, use as N, delegateEvents as O } from "solid-js/web";
-import { createSignal as U, onCleanup as j } from "solid-js";
-import { cn as J } from "../../utils/cn.js";
-import { useDeck as K } from "../../context/DeckContext.js";
-import { applyResizeDelta as Q } from "../../utils/gridLayout.js";
-import { getGridConfigFromElement as V } from "./DeckGrid.js";
-import { lockBodyStyle as Z } from "../../utils/bodyStyleLock.js";
-var ee = /* @__PURE__ */ _("<div style=touch-action:none>");
-const te = {
+import { effect as x, className as L, setAttribute as _, template as N, use as O, delegateEvents as U } from "solid-js/web";
+import { createSignal as j, onCleanup as J } from "solid-js";
+import { cn as K } from "../../utils/cn.js";
+import { useDeck as Q } from "../../context/DeckContext.js";
+import { applyResizeDelta as V } from "../../utils/gridLayout.js";
+import { getGridConfigFromElement as Z } from "./DeckGrid.js";
+import { lockBodyStyle as ee } from "../../utils/bodyStyleLock.js";
+var te = /* @__PURE__ */ N("<div style=touch-action:none>");
+const ne = {
   n: "top-0 left-2 right-2 h-2 cursor-ns-resize",
   s: "bottom-0 left-2 right-2 h-2 cursor-ns-resize",
   e: "right-0 top-2 bottom-2 w-2 cursor-ew-resize",
@@ -15,7 +15,7 @@ const te = {
   nw: "top-0 left-0 w-4 h-4 cursor-nwse-resize",
   se: "bottom-0 right-0 w-4 h-4 cursor-nwse-resize",
   sw: "bottom-0 left-0 w-4 h-4 cursor-nesw-resize"
-}, ne = {
+}, re = {
   n: "ns-resize",
   s: "ns-resize",
   e: "ew-resize",
@@ -25,84 +25,84 @@ const te = {
   se: "nwse-resize",
   sw: "nesw-resize"
 };
-function de(i) {
-  const f = K(), [m, T] = U(!1);
-  let g, h = null, d = 0, u = 0, y = 0, p = 0, s = 0, b = 0, S = 0, A = 0, l = null, w = null, r = null, P = 0, C = 0;
-  const F = (e) => {
+function ue(i) {
+  const f = Q(), [m, C] = j(!1);
+  let g, h = null, d = 0, u = 0, y = 0, p = 0, s = 0, R = 0, b = 0, S = 0, l = null, w = null, r = null, A = null, P = 0, F = 0;
+  const E = (e) => {
     if (!e) {
       w?.(), w = null;
       return;
     }
-    w?.(), w = Z({
-      cursor: ne[i.edge],
+    w?.(), w = ee({
+      cursor: re[i.edge],
       "user-select": "none"
     });
-  }, E = () => {
-    m() && (l !== null && typeof cancelAnimationFrame < "u" && (cancelAnimationFrame(l), l = null), T(!1), h = null, r = null, F(!1), f.endResize(!0));
-  }, k = () => {
+  }, D = () => {
+    m() && (l !== null && typeof cancelAnimationFrame < "u" && (cancelAnimationFrame(l), l = null), C(!1), h = null, r = null, A = null, E(!1), f.endResize(!0));
+  }, Y = () => {
     if (!r) return;
-    const e = r.getBoundingClientRect(), t = 48, n = 24, o = s - e.top, a = e.bottom - s;
-    let c = 0;
-    if (o < t ? c = -Math.ceil((t - o) / t * n) : a < t && (c = Math.ceil((t - a) / t * n)), c === 0) return;
-    const z = r.scrollTop, v = Math.max(0, Math.min(z + c, r.scrollHeight - r.clientHeight));
+    const e = A ?? r.getBoundingClientRect(), t = 48, n = 24, o = s - e.top, c = e.bottom - s;
+    let a = 0;
+    if (o < t ? a = -Math.ceil((t - o) / t * n) : c < t && (a = Math.ceil((t - c) / t * n)), a === 0) return;
+    const z = r.scrollTop, v = Math.max(0, Math.min(z + a, r.scrollHeight - r.clientHeight));
     v !== z && (r.scrollTop = v);
-  }, Y = () => {
+  }, $ = () => {
     if (l !== null || typeof requestAnimationFrame > "u") return;
     const e = () => {
       if (!m()) {
         l = null;
         return;
       }
-      D(), l = requestAnimationFrame(e);
+      I(), l = requestAnimationFrame(e);
     };
     l = requestAnimationFrame(e);
-  }, $ = (e) => {
+  }, G = (e) => {
     if (e.pointerType === "mouse" && e.button !== 0) return;
     e.preventDefault(), e.stopPropagation();
     const t = e.currentTarget?.closest(".deck-grid");
     if (!t) return;
-    h = e.pointerId, d = e.clientX, u = e.clientY, p = d, s = u, b = d, S = u, T(!0), F(!0), r = t, y = t.scrollTop, A = y;
+    h = e.pointerId, d = e.clientX, u = e.clientY, p = d, s = u, R = d, b = u, C(!0), E(!0), r = t, A = t.getBoundingClientRect(), y = t.scrollTop, S = y;
     const n = window.getComputedStyle(t);
-    P = parseFloat(n.paddingLeft) || 0, C = parseFloat(n.paddingRight) || 0, f.startResize(i.widget.id, i.edge, d, u), g?.setPointerCapture(e.pointerId), Y();
-  }, G = (e) => {
-    !m() || h !== e.pointerId || (p = e.clientX, s = e.clientY, typeof requestAnimationFrame > "u" && D());
-  }, D = () => {
+    P = parseFloat(n.paddingLeft) || 0, F = parseFloat(n.paddingRight) || 0, f.startResize(i.widget.id, i.edge, d, u), g?.setPointerCapture(e.pointerId), $();
+  }, W = (e) => {
+    !m() || h !== e.pointerId || (p = e.clientX, s = e.clientY, typeof requestAnimationFrame > "u" && I());
+  }, I = () => {
     if (!r) return;
-    k();
+    Y();
     const e = r.scrollTop;
-    if (p === b && s === S && e === A) return;
-    b = p, S = s, A = e;
+    if (p === R && s === b && e === S) return;
+    R = p, b = s, S = e;
     const t = p - d, n = s - u + (e - y), {
       cols: o,
-      rowHeight: a,
-      gap: c
-    } = V(r), z = r.clientWidth - P - C, v = c * (o - 1), R = (z - v) / o;
-    if (!Number.isFinite(R) || R <= 0) return;
-    const W = a + c, X = Math.round(t / R), H = Math.round(n / W), M = f.getWidgetMinConstraints(i.widget.type), q = Q(i.widget.position, i.edge, X, H, M.minColSpan, M.minRowSpan, o);
+      rowHeight: c,
+      gap: a
+    } = Z(r), z = r.clientWidth - P - F, v = a * (o - 1), T = (z - v) / o;
+    if (!Number.isFinite(T) || T <= 0) return;
+    const X = c + a, B = Math.round(t / T), H = Math.round(n / X), k = f.getWidgetMinConstraints(i.widget.type), q = V(i.widget.position, i.edge, B, H, k.minColSpan, k.minRowSpan, o);
     f.updateResize(q);
-  }, I = (e) => {
+  }, M = (e) => {
     if (h === e.pointerId) {
       try {
         g?.releasePointerCapture(e.pointerId);
       } catch {
       }
-      E();
+      D();
     }
   };
-  return j(() => E()), (() => {
-    var e = ee();
-    e.addEventListener("pointercancel", I), e.$$pointerup = I, e.$$pointermove = G, e.$$pointerdown = $;
+  return J(() => D()), (() => {
+    var e = te();
+    e.addEventListener("pointercancel", M), e.$$pointerup = M, e.$$pointermove = W, e.$$pointerdown = G;
     var t = g;
-    return typeof t == "function" ? N(t, e) : g = e, x((n) => {
-      var o = J("absolute z-30", te[i.edge], "hover:bg-primary/30 transition-colors", m() && "bg-primary/50"), a = i.edge;
-      return o !== n.e && B(e, n.e = o), a !== n.t && L(e, "data-widget-resize-handle", n.t = a), n;
+    return typeof t == "function" ? O(t, e) : g = e, x((n) => {
+      var o = K("absolute z-30", ne[i.edge], "hover:bg-primary/30 transition-colors", m() && "bg-primary/50"), c = i.edge;
+      return o !== n.e && L(e, n.e = o), c !== n.t && _(e, "data-widget-resize-handle", n.t = c), n;
     }, {
       e: void 0,
       t: void 0
     }), e;
   })();
 }
-O(["pointerdown", "pointermove", "pointerup"]);
+U(["pointerdown", "pointermove", "pointerup"]);
 export {
-  de as WidgetResizeHandle
+  ue as WidgetResizeHandle
 };

package/dist/components/file-browser/FileBrowser.js

@@ -1,19 +1,20 @@
-import { createComponent as n, insert as l, addEventListener as L, use as P, memo as w, effect as A, className as W, setStyleProperty as B, template as m, delegateEvents as G } from "solid-js/web";
-import { onMount as H, onCleanup as Q, createEffect as p, Show as o } from "solid-js";
+import { createComponent as n, insert as l, addEventListener as P, use as L, memo as w, effect as T, className as W, setStyleProperty as B, template as m, delegateEvents as p } from "solid-js/web";
+import { onMount as G, onCleanup as H, createEffect as Q, Show as o } from "solid-js";
 import { cn as K } from "../../utils/cn.js";
 import { useLayout as q } from "../../context/LayoutContext.js";
 import { useFileBrowserDrag as J } from "../../context/FileBrowserDragContext.js";
-import { FileBrowserProvider as U, useFileBrowser as X } from "./FileBrowserContext.js";
-import { ResizeHandle as Y } from "../layout/ResizeHandle.js";
-import { DirectoryTree as Z } from "./DirectoryTree.js";
-import { FileListView as ee } from "./FileListView.js";
-import { FileGridView as te } from "./FileGridView.js";
-import { FileBrowserToolbar as re } from "./FileBrowserToolbar.js";
-import { FileContextMenu as ie } from "./FileContextMenu.js";
-import { DragPreview as ne } from "./DragPreview.js";
-var le = /* @__PURE__ */ m('<div class="border-b border-border">'), oe = /* @__PURE__ */ m('<button type=button class="flex items-center justify-center w-5 h-5 rounded cursor-pointer hover:bg-sidebar-accent/80 transition-colors"aria-label="Close sidebar"><svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="w-3.5 h-3.5"><path d="M18 6 6 18"></path><path d="m6 6 12 12">'), ae = /* @__PURE__ */ m('<div class="absolute inset-0 bg-background/60 backdrop-blur-sm z-[9]">'), se = /* @__PURE__ */ m('<div><div class="flex flex-1 min-h-0 relative"><aside><div class="h-full flex flex-col"><div class="flex items-center justify-between px-3 py-2 border-b border-sidebar-border"><span class="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground/60">Explorer</span></div><div class="flex-1 min-h-0 overflow-auto py-1"></div></div></aside><div class="flex-1 min-w-0 flex flex-col"><div class="flex-1 min-h-0"></div><div class="flex items-center justify-between px-3 py-1 border-t border-border text-[10px] text-muted-foreground"><span> items</span><span class="truncate max-w-[200px]">');
-function Se(e) {
-  return n(U, {
+import { deferAfterPaint as U } from "../../utils/defer.js";
+import { FileBrowserProvider as X, useFileBrowser as Y } from "./FileBrowserContext.js";
+import { ResizeHandle as Z } from "../layout/ResizeHandle.js";
+import { DirectoryTree as ee } from "./DirectoryTree.js";
+import { FileListView as te } from "./FileListView.js";
+import { FileGridView as re } from "./FileGridView.js";
+import { FileBrowserToolbar as ie } from "./FileBrowserToolbar.js";
+import { FileContextMenu as ne } from "./FileContextMenu.js";
+import { DragPreview as le } from "./DragPreview.js";
+var oe = /* @__PURE__ */ m('<div class="border-b border-border">'), ae = /* @__PURE__ */ m('<button type=button class="flex items-center justify-center w-5 h-5 rounded cursor-pointer hover:bg-sidebar-accent/80 transition-colors"aria-label="Close sidebar"><svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="w-3.5 h-3.5"><path d="M18 6 6 18"></path><path d="m6 6 12 12">'), se = /* @__PURE__ */ m('<div class="absolute inset-0 bg-background/60 backdrop-blur-sm z-[9]">'), de = /* @__PURE__ */ m('<div><div class="flex flex-1 min-h-0 relative"><aside><div class="h-full flex flex-col"><div class="flex items-center justify-between px-3 py-2 border-b border-sidebar-border"><span class="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground/60">Explorer</span></div><div class="flex-1 min-h-0 overflow-auto py-1"></div></div></aside><div class="flex-1 min-w-0 flex flex-col"><div class="flex-1 min-h-0"></div><div class="flex items-center justify-between px-3 py-1 border-t border-border text-[10px] text-muted-foreground"><span> items</span><span class="truncate max-w-[200px]">');
+function De(e) {
+  return n(X, {
     get files() {
       return e.files;
     },
@@ -48,7 +49,7 @@ function Se(e) {
       return e.onOpen;
     },
     get children() {
-      return n(de, {
+      return n(ue, {
         get class() {
           return e.class;
         },
@@ -86,10 +87,10 @@ function Se(e) {
     }
   });
 }
-function de(e) {
-  const r = X(), O = q(), d = J(), a = () => O.isMobile(), C = () => r.sidebarWidth(), E = () => e.sidebarResizable ?? !0, s = () => (e.enableDragDrop ?? !0) && !!d, u = () => e.instanceId ?? `filebrowser-${Math.random().toString(36).slice(2, 9)}`;
+function ue(e) {
+  const r = Y(), O = q(), d = J(), a = () => O.isMobile(), C = () => r.sidebarWidth(), E = () => e.sidebarResizable ?? !0, s = () => (e.enableDragDrop ?? !0) && !!d, u = () => e.instanceId ?? `filebrowser-${Math.random().toString(36).slice(2, 9)}`;
   let M, I = null, S = null;
-  H(() => {
+  G(() => {
     if (!d || !s()) return;
     const i = {
       instanceId: u(),
@@ -102,11 +103,11 @@ function de(e) {
       optimisticInsert: r.optimisticInsert
     };
     d.registerInstance(i);
-  }), Q(() => {
+  }), H(() => {
     d && s() && d.unregisterInstance(u());
   });
   let y = !1, f = !1;
-  p(() => {
+  Q(() => {
     const i = a();
     if (!y) {
       y = !0, f = i, i && e.hideSidebarOnMobile !== !1 && !r.sidebarCollapsed() && r.toggleSidebar();
@@ -115,18 +116,18 @@ function de(e) {
     !f && i && e.hideSidebarOnMobile !== !1 && !r.sidebarCollapsed() && r.toggleSidebar(), f = i;
   });
   const j = (i) => {
-    (i.metaKey || i.ctrlKey) && i.key.toLowerCase() === "f" && (i.preventDefault(), r.setFilterActive(!0), setTimeout(() => M?.focus(), 50));
+    (i.metaKey || i.ctrlKey) && i.key.toLowerCase() === "f" && (i.preventDefault(), r.setFilterActive(!0), U(() => M?.focus()));
   }, D = () => !r.sidebarCollapsed() || !a();
   return (() => {
-    var i = se(), h = i.firstChild, c = h.firstChild, k = c.firstChild, v = k.firstChild;
+    var i = de(), h = i.firstChild, c = h.firstChild, k = c.firstChild, v = k.firstChild;
     v.firstChild;
-    var $ = v.nextSibling, x = c.nextSibling, b = x.firstChild, V = b.nextSibling, g = V.firstChild, N = g.firstChild, T = g.nextSibling;
+    var $ = v.nextSibling, x = c.nextSibling, b = x.firstChild, V = b.nextSibling, g = V.firstChild, A = g.firstChild, N = g.nextSibling;
     return i.$$keydown = j, l(i, n(o, {
       get when() {
         return e.header;
       },
       get children() {
-        var t = le();
+        var t = oe();
         return l(t, () => e.header), t;
       }
     }), h), l(v, n(o, {
@@ -134,12 +135,12 @@ function de(e) {
         return a();
       },
       get children() {
-        var t = oe();
-        return L(t, "click", r.toggleSidebar, !0), t;
+        var t = ae();
+        return P(t, "click", r.toggleSidebar, !0), t;
       }
-    }), null), P((t) => {
+    }), null), L((t) => {
       S = t;
-    }, $), l($, n(Z, {
+    }, $), l($, n(ee, {
       get instanceId() {
         return u();
       },
@@ -151,7 +152,7 @@ function de(e) {
         return w(() => !!(E() && D()))() && !a();
       },
       get children() {
-        return n(Y, {
+        return n(Z, {
           direction: "horizontal",
           onResize: (t) => {
             r.setSidebarWidth(r.sidebarWidth() + t);
@@ -163,19 +164,19 @@ function de(e) {
         return w(() => !!a())() && !r.sidebarCollapsed();
       },
       get children() {
-        var t = ae();
-        return L(t, "click", r.toggleSidebar, !0), t;
+        var t = se();
+        return P(t, "click", r.toggleSidebar, !0), t;
       }
-    }), x), l(x, n(re, {
+    }), x), l(x, n(ie, {
       filterInputRef: (t) => M = t
-    }), b), P((t) => {
+    }), b), L((t) => {
       I = t;
     }, b), l(b, n(o, {
       get when() {
         return r.viewMode() === "list";
       },
       get fallback() {
-        return n(te, {
+        return n(re, {
           get instanceId() {
             return u();
           },
@@ -185,7 +186,7 @@ function de(e) {
         });
       },
       get children() {
-        return n(ee, {
+        return n(te, {
           get instanceId() {
             return u();
           },
@@ -194,7 +195,7 @@ function de(e) {
           }
         });
       }
-    })), l(g, () => r.currentFiles().length, N), l(g, n(o, {
+    })), l(g, () => r.currentFiles().length, A), l(g, n(o, {
       get when() {
         return r.filterQueryApplied().trim();
       },
@@ -208,7 +209,7 @@ function de(e) {
       get children() {
         return [" · ", w(() => r.selectedItems().size), " selected"];
       }
-    }), null), l(T, () => r.currentPath()), l(i, n(ie, {
+    }), null), l(N, () => r.currentPath()), l(i, n(ne, {
       get callbacks() {
         return e.contextMenuCallbacks;
       },
@@ -226,9 +227,9 @@ function de(e) {
         return s();
       },
       get children() {
-        return n(ne, {});
+        return n(le, {});
       }
-    }), null), A((t) => {
+    }), null), T((t) => {
       var _ = K("flex flex-col h-full min-h-0 bg-background", "border border-border rounded-lg overflow-hidden", "shadow-sm", e.class), R = K(
         "flex-shrink-0 border-r border-border bg-sidebar relative",
         "transition-all duration-200 ease-out",
@@ -245,7 +246,7 @@ function de(e) {
     }), i;
   })();
 }
-G(["keydown", "click"]);
+p(["keydown", "click"]);
 export {
-  Se as FileBrowser
+  De as FileBrowser
 };

package/dist/components/file-browser/FileBrowserToolbar.js

@@ -1,34 +1,35 @@
-import { addEventListener as M, insert as o, createComponent as l, use as S, effect as s, className as d, template as u, setAttribute as g, delegateEvents as Q } from "solid-js/web";
-import { onMount as R, Show as A } from "solid-js";
+import { addEventListener as A, insert as o, createComponent as l, use as S, effect as s, className as d, template as u, setAttribute as g, delegateEvents as Q } from "solid-js/web";
+import { onMount as R, Show as M } from "solid-js";
 import { cn as f } from "../../utils/cn.js";
-import { useFileBrowser as T } from "./FileBrowserContext.js";
-import { Breadcrumb as E } from "./Breadcrumb.js";
-import { Grid as L } from "../icons/index.js";
-var V = /* @__PURE__ */ u('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><line x1=8 y1=6 x2=21 y2=6></line><line x1=8 y1=12 x2=21 y2=12></line><line x1=8 y1=18 x2=21 y2=18></line><line x1=3 y1=6 x2=3.01 y2=6></line><line x1=3 y1=12 x2=3.01 y2=12></line><line x1=3 y1=18 x2=3.01 y2=18>'), N = /* @__PURE__ */ u('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.93a2 2 0 0 1-1.66-.9l-.82-1.2A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2Z"></path><path d="M12 10v6"></path><path d="m9 13 3-3 3 3">'), U = /* @__PURE__ */ u('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><rect width=18 height=18 x=3 y=3 rx=2 ry=2></rect><line x1=9 y1=3 x2=9 y2=21>'), G = /* @__PURE__ */ u('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><circle cx=11 cy=11 r=8></circle><path d="m21 21-4.3-4.3">'), D = /* @__PURE__ */ u('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="M18 6 6 18"></path><path d="m6 6 12 12">'), H = /* @__PURE__ */ u('<button type=button aria-label="Clear filter">'), K = /* @__PURE__ */ u('<div class="flex items-center flex-1 gap-1 px-2 py-1 bg-muted/50 rounded-md border border-border/50 focus-within:border-ring focus-within:ring-1 focus-within:ring-ring"><input type=text placeholder=Filter... aria-label="Filter files by name">'), P = /* @__PURE__ */ u('<div><button type=button aria-label="Toggle sidebar"></button><button type=button aria-label="Navigate to parent folder"></button><div></div><div></div><div class="flex items-center gap-0.5 p-0.5 bg-muted/50 rounded-md">'), X = /* @__PURE__ */ u('<button type=button aria-label="Filter files">'), Z = /* @__PURE__ */ u("<button type=button>");
-const q = (r) => (() => {
-  var e = V();
-  return s(() => g(e, "class", r.class)), e;
-})(), z = (r) => (() => {
+import { deferAfterPaint as E } from "../../utils/defer.js";
+import { useFileBrowser as L } from "./FileBrowserContext.js";
+import { Breadcrumb as T } from "./Breadcrumb.js";
+import { Grid as V } from "../icons/index.js";
+var N = /* @__PURE__ */ u('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><line x1=8 y1=6 x2=21 y2=6></line><line x1=8 y1=12 x2=21 y2=12></line><line x1=8 y1=18 x2=21 y2=18></line><line x1=3 y1=6 x2=3.01 y2=6></line><line x1=3 y1=12 x2=3.01 y2=12></line><line x1=3 y1=18 x2=3.01 y2=18>'), U = /* @__PURE__ */ u('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.93a2 2 0 0 1-1.66-.9l-.82-1.2A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2Z"></path><path d="M12 10v6"></path><path d="m9 13 3-3 3 3">'), G = /* @__PURE__ */ u('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><rect width=18 height=18 x=3 y=3 rx=2 ry=2></rect><line x1=9 y1=3 x2=9 y2=21>'), P = /* @__PURE__ */ u('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><circle cx=11 cy=11 r=8></circle><path d="m21 21-4.3-4.3">'), D = /* @__PURE__ */ u('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="M18 6 6 18"></path><path d="m6 6 12 12">'), H = /* @__PURE__ */ u('<button type=button aria-label="Clear filter">'), K = /* @__PURE__ */ u('<div class="flex items-center flex-1 gap-1 px-2 py-1 bg-muted/50 rounded-md border border-border/50 focus-within:border-ring focus-within:ring-1 focus-within:ring-ring"><input type=text placeholder=Filter... aria-label="Filter files by name">'), X = /* @__PURE__ */ u('<div><button type=button aria-label="Toggle sidebar"></button><button type=button aria-label="Navigate to parent folder"></button><div></div><div></div><div class="flex items-center gap-0.5 p-0.5 bg-muted/50 rounded-md">'), Z = /* @__PURE__ */ u('<button type=button aria-label="Filter files">'), q = /* @__PURE__ */ u("<button type=button>");
+const z = (r) => (() => {
   var e = N();
   return s(() => g(e, "class", r.class)), e;
 })(), J = (r) => (() => {
   var e = U();
   return s(() => g(e, "class", r.class)), e;
-})(), j = (r) => (() => {
+})(), O = (r) => (() => {
   var e = G();
   return s(() => g(e, "class", r.class)), e;
-})(), O = (r) => (() => {
+})(), j = (r) => (() => {
+  var e = P();
+  return s(() => g(e, "class", r.class)), e;
+})(), W = (r) => (() => {
   var e = D();
   return s(() => g(e, "class", r.class)), e;
 })();
-function ie(r) {
-  const e = T();
+function le(r) {
+  const e = L();
   let n;
   const c = () => {
     const v = e.currentPath();
     return v !== "/" && v !== "";
   }, m = () => {
-    e.isFilterActive() ? (e.setFilterQuery(""), e.setFilterActive(!1)) : (e.setFilterActive(!0), setTimeout(() => n?.focus(), 50));
+    e.isFilterActive() ? (e.setFilterQuery(""), e.setFilterActive(!1)) : (e.setFilterActive(!0), E(() => n?.focus()));
   }, w = () => {
     e.setFilterQuery(""), n?.focus();
   }, h = (v) => {
@@ -39,18 +40,18 @@ function ie(r) {
   return R(() => {
     r.filterInputRef && n && r.filterInputRef(n);
   }), (() => {
-    var v = P(), x = v.firstChild, b = x.nextSibling, p = b.nextSibling, y = p.nextSibling, k = y.nextSibling;
-    return M(x, "click", e.toggleSidebar, !0), o(x, l(J, {
+    var v = X(), x = v.firstChild, b = x.nextSibling, p = b.nextSibling, y = p.nextSibling, k = y.nextSibling;
+    return A(x, "click", e.toggleSidebar, !0), o(x, l(O, {
       class: "w-4 h-4"
-    })), M(b, "click", e.navigateUp, !0), o(b, l(z, {
+    })), A(b, "click", e.navigateUp, !0), o(b, l(J, {
       class: "w-4 h-4"
-    })), o(p, l(E, {})), o(y, l(A, {
+    })), o(p, l(T, {})), o(y, l(M, {
       get when() {
         return e.isFilterActive();
       },
       get fallback() {
         return (() => {
-          var t = X();
+          var t = Z();
           return t.$$click = m, o(t, l(j, {
             class: "w-4 h-4"
           })), s(() => d(t, f("flex items-center justify-center w-7 h-7 rounded cursor-pointer", "transition-colors duration-100", "hover:bg-muted/70", "focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"))), t;
@@ -62,13 +63,13 @@ function ie(r) {
           class: "w-3.5 h-3.5 text-muted-foreground flex-shrink-0"
         }), a), a.addEventListener("blur", I), a.$$keydown = h, a.$$input = (i) => e.setFilterQuery(i.currentTarget.value), S((i) => {
           n = i, r.filterInputRef && r.filterInputRef(i);
-        }, a), o(t, l(A, {
+        }, a), o(t, l(M, {
           get when() {
             return e.filterQuery();
           },
           get children() {
             var i = H();
-            return i.$$click = w, o(i, l(O, {
+            return i.$$click = w, o(i, l(W, {
               class: "w-3 h-3"
             })), s(() => d(i, f("flex items-center justify-center w-4 h-4 rounded-sm cursor-pointer", "text-muted-foreground hover:text-foreground", "transition-colors duration-100"))), i;
           }
@@ -80,7 +81,7 @@ function ie(r) {
         return e.viewMode();
       },
       onClick: () => e.setViewMode("list"),
-      icon: q,
+      icon: z,
       label: "List view"
     }), null), o(k, l(B, {
       mode: "grid",
@@ -88,7 +89,7 @@ function ie(r) {
         return e.viewMode();
       },
       onClick: () => e.setViewMode("grid"),
-      icon: L,
+      icon: V,
       label: "Grid view"
     }), null), s((t) => {
       var a = f("flex items-center gap-2 px-2 py-1.5 border-b border-border", "bg-background/50 backdrop-blur-sm", r.class), i = f("md:hidden flex items-center justify-center w-7 h-7 rounded cursor-pointer", "transition-colors duration-100", "hover:bg-muted/70", "focus:outline-none focus-visible:ring-1 focus-visible:ring-ring", !e.sidebarCollapsed() && "bg-muted/50"), $ = !c(), F = f("flex items-center justify-center w-7 h-7 rounded cursor-pointer", "transition-colors duration-100", "hover:bg-muted/70", "focus:outline-none focus-visible:ring-1 focus-visible:ring-ring", "disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:bg-transparent"), _ = f("flex-1 min-w-0 overflow-hidden transition-all duration-200", e.isFilterActive() && "hidden sm:block sm:flex-1"), C = f("flex items-center gap-1 transition-all duration-200 ease-out", e.isFilterActive() ? "flex-1 sm:flex-none sm:w-48" : "w-7");
@@ -106,7 +107,7 @@ function ie(r) {
 function B(r) {
   const e = () => r.currentMode === r.mode;
   return (() => {
-    var n = Z();
+    var n = q();
     return n.$$click = () => r.onClick(), o(n, l(r.icon, {
       class: "w-3.5 h-3.5"
     })), s((c) => {
@@ -121,5 +122,5 @@ function B(r) {
 }
 Q(["click", "input", "keydown"]);
 export {
-  ie as FileBrowserToolbar
+  le as FileBrowserToolbar
 };