@floegence/floe-webapp-core 0.11.4 → 0.11.5

package/dist/components/file-browser/types.d.ts

@@ -160,9 +160,15 @@ export interface FileBrowserContextValue {
     currentFiles: Accessor<FileItem[]>;
     filterQuery: Accessor<string>;
     setFilterQuery: (query: string) => void;
+    /** Query that is actually applied to the list (may lag behind filterQuery for UI-first rendering) */
+    filterQueryApplied: Accessor<string>;
     isFilterActive: Accessor<boolean>;
     setFilterActive: (active: boolean) => void;
     getFilterMatch: (name: string) => FilterMatchInfo | null;
+    /** Fast path: match info by file id (no repeated fuzzy matching) */
+    getFilterMatchForId: (id: string) => FilterMatchInfo | null;
+    /** Selected items in the current view, ordered by currentFiles order */
+    getSelectedItemsList: () => FileItem[];
     sidebarCollapsed: Accessor<boolean>;
     toggleSidebar: () => void;
     sidebarWidth: Accessor<number>;

package/dist/hooks/useVirtualWindow.d.ts

@@ -0,0 +1,29 @@
+import type { Accessor } from 'solid-js';
+export interface VirtualRange {
+    start: number;
+    end: number;
+}
+export interface UseVirtualWindowOptions {
+    count: Accessor<number>;
+    /** Fixed item size in pixels */
+    itemSize: Accessor<number>;
+    /** Extra items to render before/after the visible window */
+    overscan?: number;
+}
+export interface UseVirtualWindowReturn {
+    /** Attach to the scroll container element */
+    scrollRef: (el: HTMLElement | null) => void;
+    /** Call this from the scroll container's onScroll handler */
+    onScroll: () => void;
+    range: Accessor<VirtualRange>;
+    paddingTop: Accessor<number>;
+    paddingBottom: Accessor<number>;
+    totalSize: Accessor<number>;
+}
+/**
+ * Lightweight fixed-size virtual window.
+ *
+ * Unlike the chat virtual list (variable-height), this keeps O(1) math per scroll update and
+ * is intended for very large collections (e.g. 10k items in FileBrowser).
+ */
+export declare function useVirtualWindow(options: UseVirtualWindowOptions): UseVirtualWindowReturn;

package/dist/index105.js

@@ -1,64 +1,77 @@
-import { createEffect as Y, onCleanup as A } from "solid-js";
-import { useDeck as G } from "./index97.js";
-import { applyDragDelta as M } from "./index112.js";
-import { getGridConfigFromElement as x } from "./index11.js";
-import { lockBodyStyle as z } from "./index109.js";
-function O() {
-  const l = G();
-  let n = null, u = 0, s = 0, y = 0, D = 0, r = null, c = null, E = null, p = null, a = null, P = 0, I = 0, f = null;
-  const F = (t) => {
+import { createEffect as B, onCleanup as G } from "solid-js";
+import { useDeck as z } from "./index97.js";
+import { applyDragDelta as R } from "./index112.js";
+import { getGridConfigFromElement as N } from "./index11.js";
+import { lockBodyStyle as O } from "./index109.js";
+function V() {
+  const p = z();
+  let c = null, m = 0, f = 0, L = 0, g = 0, l = 0, P = 0, A = 0, F = 0, a = null, v = null, T = null, y = null, n = null, I = 0, k = 0, w = null;
+  const M = (t) => {
     if (!t) {
-      p?.(), p = null;
+      y?.(), y = null;
       return;
     }
-    p?.(), p = z({ cursor: "grabbing", "user-select": "none" });
-  }, b = () => {
-    n !== null && (r !== null && typeof cancelAnimationFrame < "u" && (cancelAnimationFrame(r), r = null), n = null, c = null, E = null, a = null, f = null, F(!1), l.endDrag(!0));
-  }, k = (t) => {
-    const o = t.target;
-    if (o.closest('button, input, select, textarea, [role="button"], a') || o.closest("[data-widget-resize-handle]")) return;
-    const e = o.closest("[data-widget-drag-handle]");
-    if (!e || t.pointerType === "mouse" && t.button !== 0) return;
-    const i = e.dataset.widgetDragHandle;
-    if (!i) return;
-    const d = e.closest(".deck-grid");
-    if (!d) return;
-    t.preventDefault(), t.stopPropagation(), n = t.pointerId, u = t.clientX, s = t.clientY, y = u, D = s, c = i, E = e, a = d, F(!0);
-    const h = l.activeLayout()?.widgets.find((L) => L.id === i);
-    f = h ? { ...h.position } : null;
-    const w = window.getComputedStyle(d);
-    P = parseFloat(w.paddingLeft) || 0, I = parseFloat(w.paddingRight) || 0, l.startDrag(i, u, s), e.setPointerCapture(t.pointerId);
-  }, C = (t) => {
-    if (!(n !== t.pointerId || !c) && (y = t.clientX, D = t.clientY, r === null)) {
-      if (typeof requestAnimationFrame > "u") {
-        H();
+    y?.(), y = O({ cursor: "grabbing", "user-select": "none" });
+  }, C = () => {
+    c !== null && (a !== null && typeof cancelAnimationFrame < "u" && (cancelAnimationFrame(a), a = null), c = null, v = null, T = null, n = null, w = null, M(!1), p.endDrag(!0));
+  }, X = () => {
+    if (!n) return;
+    const t = n.getBoundingClientRect(), e = 48, d = 24, s = l - t.top, o = t.bottom - l;
+    let r = 0;
+    if (s < e ? r = -Math.ceil((e - s) / e * d) : o < e && (r = Math.ceil((e - o) / e * d)), r === 0) return;
+    const i = n.scrollTop, h = Math.max(0, Math.min(i + r, n.scrollHeight - n.clientHeight));
+    h !== i && (n.scrollTop = h);
+  }, Y = () => {
+    if (a !== null || typeof requestAnimationFrame > "u") return;
+    const t = () => {
+      if (c === null) {
+        a = null;
         return;
       }
-      r = requestAnimationFrame(() => {
-        r = null, n !== null && H();
-      });
-    }
-  }, H = () => {
-    if (!c || !a || !f) return;
-    const t = y - u, o = D - s, { cols: g, rowHeight: W, gap: e } = x(a), i = a.clientWidth - P - I, d = e * (g - 1), v = (i - d) / g;
-    if (!Number.isFinite(v) || v <= 0) return;
-    const h = W + e, w = Math.round(t / v), L = Math.round(o / h), X = M(f, w, L, g);
-    l.updateDrag(X, { x: t, y: o });
-  }, m = (t) => {
-    if (n === t.pointerId) {
+      x(), a = requestAnimationFrame(t);
+    };
+    a = requestAnimationFrame(t);
+  }, H = (t) => {
+    const e = t.target;
+    if (e.closest('button, input, select, textarea, [role="button"], a') || e.closest("[data-widget-resize-handle]")) return;
+    const o = e.closest("[data-widget-drag-handle]");
+    if (!o || t.pointerType === "mouse" && t.button !== 0) return;
+    const r = o.dataset.widgetDragHandle;
+    if (!r) return;
+    const i = o.closest(".deck-grid");
+    if (!i) return;
+    t.preventDefault(), t.stopPropagation(), c = t.pointerId, m = t.clientX, f = t.clientY, g = m, l = f, P = m, A = f, v = r, T = o, n = i, L = i.scrollTop, F = L, M(!0);
+    const u = p.activeLayout()?.widgets.find((b) => b.id === r);
+    w = u ? { ...u.position } : null;
+    const E = window.getComputedStyle(i);
+    I = parseFloat(E.paddingLeft) || 0, k = parseFloat(E.paddingRight) || 0, p.startDrag(r, m, f), o.setPointerCapture(t.pointerId), Y();
+  }, S = (t) => {
+    c !== t.pointerId || !v || (g = t.clientX, l = t.clientY, typeof requestAnimationFrame > "u" && x());
+  }, x = () => {
+    if (!v || !n || !w) return;
+    X();
+    const t = n.scrollTop;
+    if (g === P && l === A && t === F) return;
+    P = g, A = l, F = t;
+    const e = g - m, d = l - f + (t - L), { cols: s, rowHeight: o, gap: r } = N(n), i = n.clientWidth - I - k, h = r * (s - 1), u = (i - h) / s;
+    if (!Number.isFinite(u) || u <= 0) return;
+    const E = o + r, b = Math.round(e / u), W = Math.round(d / E), q = R(w, b, W, s);
+    p.updateDrag(q, { x: e, y: d });
+  }, D = (t) => {
+    if (c === t.pointerId) {
       try {
-        E?.releasePointerCapture(t.pointerId);
+        T?.releasePointerCapture(t.pointerId);
       } catch {
       }
-      b();
+      C();
     }
   };
-  Y(() => {
-    l.editMode() && (typeof document > "u" || (document.addEventListener("pointerdown", k, !0), document.addEventListener("pointermove", C, !0), document.addEventListener("pointerup", m, !0), document.addEventListener("pointercancel", m, !0), A(() => {
-      b(), document.removeEventListener("pointerdown", k, !0), document.removeEventListener("pointermove", C, !0), document.removeEventListener("pointerup", m, !0), document.removeEventListener("pointercancel", m, !0);
+  B(() => {
+    p.editMode() && (typeof document > "u" || (document.addEventListener("pointerdown", H, !0), document.addEventListener("pointermove", S, !0), document.addEventListener("pointerup", D, !0), document.addEventListener("pointercancel", D, !0), G(() => {
+      C(), document.removeEventListener("pointerdown", H, !0), document.removeEventListener("pointermove", S, !0), document.removeEventListener("pointerup", D, !0), document.removeEventListener("pointercancel", D, !0);
     })));
   });
 }
 export {
-  O as useDeckDrag
+  V as useDeckDrag
 };

package/dist/index11.js

@@ -1,67 +1,108 @@
-import { insert as h, createComponent as f, effect as O, setStyleProperty as I, className as P, setAttribute as $, template as z, use as F } from "solid-js/web";
-import { createSignal as A, createEffect as L, createMemo as s, onMount as T, Show as _, For as E, onCleanup as N } from "solid-js";
-import { cn as W } from "./index106.js";
-import { useDeck as V } from "./index97.js";
-import { useLayout as Z } from "./index92.js";
-import { hasCollision as K } from "./index111.js";
-import { DeckCell as U } from "./index12.js";
-import { DropZonePreview as j } from "./index19.js";
-var q = /* @__PURE__ */ z('<div class="absolute inset-0 pointer-events-none z-0 rounded"style="padding:inherit;background-origin:content-box;background-clip:content-box;background-image:linear-gradient(to right, color-mix(in srgb, var(--border) 15%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in srgb, var(--border) 15%, transparent) 1px, transparent 1px) ;background-position:0 0">'), B = /* @__PURE__ */ z('<div data-grid-cols=24 data-gap=4 data-default-rows=24 style="scrollbar-gutter:stable;grid-template-columns:repeat(24, 1fr);gap:4px"><div class=pointer-events-none aria-hidden=true style=grid-column:1>');
-const b = 24, c = 24, d = 4, w = 20, J = 4, Q = (b - 1) * d, X = {
+import { insert as w, createComponent as m, effect as z, setStyleProperty as v, className as L, setAttribute as _, template as C, use as A } from "solid-js/web";
+import { createSignal as N, createEffect as T, createMemo as s, onMount as j, Show as D, For as V, onCleanup as W } from "solid-js";
+import { cn as Z } from "./index106.js";
+import { useDeck as $ } from "./index97.js";
+import { useLayout as K } from "./index92.js";
+import { hasCollision as U } from "./index111.js";
+import { DeckCell as q } from "./index12.js";
+import { DropZonePreview as B } from "./index19.js";
+var J = /* @__PURE__ */ C('<div class="pointer-events-none z-0"style="grid-column:1 / -1;--deck-grid-unit-x:calc((100% - 92px) / 24 + 4px);background-position:0 0, 0 0, 0 0, 0 0, 0 0, 0 0">'), Q = /* @__PURE__ */ C('<div data-grid-cols=24 data-gap=4 data-default-rows=24 style="scrollbar-gutter:stable;grid-template-columns:repeat(24, 1fr);gap:4px"><div class=pointer-events-none aria-hidden=true style="grid-column:1 / -1">');
+const O = 24, a = 24, x = 4, b = 20, P = 4, X = {
   x: 0,
   y: 0
 };
-function at(a) {
-  const o = V(), C = Z();
-  let l;
-  const [k, S] = A(0), R = () => o.activeLayout()?.widgets ?? [], u = () => o.dragState(), D = () => o.resizeState();
-  L(() => {
-    C.isMobile() && o.editMode() && o.setEditMode(!1);
+function st(d) {
+  const c = $(), M = K();
+  let p;
+  const [y, I] = N(0), H = () => c.activeLayout()?.widgets ?? [], f = () => c.dragState(), k = () => c.resizeState();
+  T(() => {
+    M.isMobile() && c.editMode() && c.setEditMode(!1);
   });
   const G = s(() => {
-    const e = u();
-    if (!e) return !0;
-    const r = o.activeLayout();
-    return r ? !K(e.currentPosition, r.widgets, e.widgetId) : !0;
-  }), H = s(() => {
-    const e = R();
-    if (e.length === 0) return c;
-    let r = c;
-    for (const n of e) {
-      const t = n.position.row + n.position.rowSpan;
+    const r = f();
+    if (!r) return !0;
+    const e = c.activeLayout();
+    return e ? !U(r.currentPosition, e.widgets, r.widgetId) : !0;
+  }), F = s(() => {
+    const r = H();
+    if (r.length === 0) return a;
+    let e = a;
+    for (const i of r) {
+      const t = i.position.row + i.position.rowSpan;
+      t > e && (e = t);
+    }
+    return e;
+  }), S = s(() => {
+    let r = F();
+    const e = f();
+    if (e) {
+      const t = e.currentPosition.row + e.currentPosition.rowSpan;
+      t > r && (r = t);
+    }
+    const i = k();
+    if (i) {
+      const t = i.currentPosition.row + i.currentPosition.rowSpan;
       t > r && (r = t);
     }
-    return r;
-  }), x = s(() => {
-    const e = k();
-    if (e <= 0) return w;
-    const n = (e - J * 2 - (c - 1) * d) / c;
-    return Math.max(w, n);
+    return Math.max(a, r);
+  }), h = s(() => {
+    const r = y();
+    if (r <= 0) return b;
+    const i = (r - P * 2 - (a - 1) * x) / a;
+    return Math.max(b, i);
   });
-  T(() => {
-    if (!l || typeof ResizeObserver > "u") return;
-    const e = new ResizeObserver((r) => {
-      for (const n of r)
-        S(n.contentRect.height);
+  j(() => {
+    if (!p || typeof ResizeObserver > "u") return;
+    const r = new ResizeObserver((e) => {
+      for (const i of e)
+        I(i.contentRect.height);
     });
-    e.observe(l), S(l.clientHeight), N(() => e.disconnect());
+    r.observe(p), I(p.clientHeight), W(() => r.disconnect());
   });
-  const M = s(() => H() > c);
+  const E = s(() => S() > a ? !0 : y() <= 0 ? !1 : a * h() + (a - 1) * x + P * 2 > y() + 1);
   return (() => {
-    var e = B(), r = e.firstChild, n = l;
-    return typeof n == "function" ? F(n, e) : l = e, h(e, f(_, {
+    var r = Q(), e = r.firstChild, i = p;
+    return typeof i == "function" ? A(i, r) : p = r, w(r, m(D, {
       get when() {
-        return o.editMode();
+        return c.editMode();
       },
       get children() {
-        var t = q();
-        return O((g) => I(t, "background-size", `calc((100% - ${Q}px) / ${b} + ${d}px) ${x() + d}px`)), t;
+        var t = J();
+        return z((n) => {
+          var l = `1 / ${S() + 1}`, g = `${h() + x}px`, u = [
+            // Fine
+            "linear-gradient(to right, color-mix(in srgb, var(--border) 35%, transparent) 1px, transparent 1px)",
+            "linear-gradient(to bottom, color-mix(in srgb, var(--border) 35%, transparent) 1px, transparent 1px)",
+            // Major (6)
+            "linear-gradient(to right, color-mix(in srgb, var(--border) 55%, transparent) 1px, transparent 1px)",
+            "linear-gradient(to bottom, color-mix(in srgb, var(--border) 55%, transparent) 1px, transparent 1px)",
+            // Major (12)
+            "linear-gradient(to right, color-mix(in srgb, var(--border) 75%, transparent) 2px, transparent 2px)",
+            "linear-gradient(to bottom, color-mix(in srgb, var(--border) 75%, transparent) 2px, transparent 2px)"
+          ].join(", "), o = [
+            // Fine
+            "var(--deck-grid-unit-x) var(--deck-grid-unit-y)",
+            "var(--deck-grid-unit-x) var(--deck-grid-unit-y)",
+            // Major (6)
+            "calc(var(--deck-grid-unit-x) * 6) calc(var(--deck-grid-unit-y) * 6)",
+            "calc(var(--deck-grid-unit-x) * 6) calc(var(--deck-grid-unit-y) * 6)",
+            // Major (12)
+            "calc(var(--deck-grid-unit-x) * 12) calc(var(--deck-grid-unit-y) * 12)",
+            "calc(var(--deck-grid-unit-x) * 12) calc(var(--deck-grid-unit-y) * 12)"
+          ].join(", ");
+          return l !== n.e && v(t, "grid-row", n.e = l), g !== n.t && v(t, "--deck-grid-unit-y", n.t = g), u !== n.a && v(t, "background-image", n.a = u), o !== n.o && v(t, "background-size", n.o = o), n;
+        }, {
+          e: void 0,
+          t: void 0,
+          a: void 0,
+          o: void 0
+        }), t;
       }
-    }), null), h(e, f(_, {
+    }), null), w(r, m(D, {
       get when() {
-        return u();
+        return f();
       },
-      children: (t) => f(j, {
+      children: (t) => m(B, {
         get position() {
           return t().currentPosition;
         },
@@ -69,72 +110,72 @@ function at(a) {
           return G();
         }
       })
-    }), null), h(e, f(E, {
+    }), null), w(r, m(V, {
       get each() {
-        return R();
+        return H();
       },
       children: (t) => {
-        const g = s(() => {
-          const i = u();
-          if (i && i.widgetId === t.id)
+        const n = s(() => {
+          const o = f();
+          if (o && o.widgetId === t.id)
             return t.position;
-          const y = D();
-          return y && y.widgetId === t.id ? y.currentPosition : t.position;
-        }), p = s(() => u()?.widgetId === t.id), m = s(() => D()?.widgetId === t.id), v = s(() => {
-          const i = u();
-          return i && i.widgetId === t.id ? i.pixelOffset : X;
+          const R = k();
+          return R && R.widgetId === t.id ? R.currentPosition : t.position;
+        }), l = s(() => f()?.widgetId === t.id), g = s(() => k()?.widgetId === t.id), u = s(() => {
+          const o = f();
+          return o && o.widgetId === t.id ? o.pixelOffset : X;
         });
-        return f(U, {
+        return m(q, {
           widget: t,
           get position() {
-            return g();
+            return n();
           },
           get isDragging() {
-            return p();
+            return l();
           },
           get isResizing() {
-            return m();
+            return g();
           },
           get pixelOffset() {
-            return v();
+            return u();
           }
         });
       }
-    }), null), h(e, () => a.children, null), O((t) => {
-      var g = W(
+    }), null), w(r, () => d.children, null), z((t) => {
+      var n = Z(
         "deck-grid relative w-full h-full overflow-x-hidden",
         // Only enable vertical scroll when content exceeds 24 rows
-        M() ? "overflow-y-scroll" : "overflow-y-hidden",
+        E() ? "overflow-y-scroll" : "overflow-y-hidden",
         "grid p-1",
-        o.editMode() && "bg-muted/20",
-        a.class
-      ), p = `${x()}px`, m = x(), v = `1 / ${H() + 1}`;
-      return g !== t.e && P(e, t.e = g), p !== t.t && I(e, "grid-auto-rows", t.t = p), m !== t.a && $(e, "data-row-height", t.a = m), v !== t.o && I(r, "grid-row", t.o = v), t;
+        c.editMode() && "bg-muted/20",
+        d.class
+      ), l = `${h()}px`, g = h(), u = `1 / ${S() + 1}`;
+      return n !== t.e && L(r, t.e = n), l !== t.t && v(r, "grid-auto-rows", t.t = l), g !== t.a && _(r, "data-row-height", t.a = g), u !== t.o && v(e, "grid-row", t.o = u), t;
     }, {
       e: void 0,
       t: void 0,
       a: void 0,
       o: void 0
-    }), e;
+    }), r;
   })();
 }
 const ct = {
-  cols: b,
-  defaultRows: c,
-  gap: d,
+  cols: O,
+  defaultRows: a,
+  gap: x,
   // Deprecated: use getGridConfig() or read from data-row-height attribute instead
-  rowHeight: w
+  rowHeight: b
 };
-function dt(a) {
+function dt(d) {
   return {
-    cols: parseInt(a.dataset.gridCols || String(b), 10),
-    rowHeight: parseFloat(a.dataset.rowHeight || String(w)),
-    gap: parseInt(a.dataset.gap || String(d), 10),
-    defaultRows: parseInt(a.dataset.defaultRows || String(c), 10)
+    cols: parseInt(d.dataset.gridCols || String(O), 10),
+    rowHeight: parseFloat(d.dataset.rowHeight || String(b)),
+    gap: parseInt(d.dataset.gap || String(x), 10),
+    defaultRows: parseInt(d.dataset.defaultRows || String(a), 10)
   };
 }
 export {
   ct as DECK_GRID_CONFIG,
-  at as DeckGrid,
+  st as DeckGrid,
   dt as getGridConfigFromElement
 };