@floegence/floe-webapp-core 0.60.1 → 0.60.2

package/dist/app/ActivityAppsMain.d.ts

@@ -21,5 +21,7 @@ export interface ActivityAppsMainProps<TProtocol = unknown> {
     keepMounted?: KeepAliveStackProps['keepMounted'];
     /** Forwarded to KeepAliveStack (default: sync). */
     activationMode?: KeepAliveStackProps['activationMode'];
+    /** Target-local loading UI; leaves shell navigation available while a lazy page resolves. */
+    renderFallback?: KeepAliveStackProps['renderFallback'];
 }
 export declare function ActivityAppsMain<TProtocol = unknown>(props: ActivityAppsMainProps<TProtocol>): import("solid-js").JSX.Element;

package/dist/app/ActivityAppsMain.js

@@ -1,28 +1,28 @@
-import { createComponent as r, Dynamic as s } from "solid-js/web";
-import { untrack as d, createMemo as m } from "solid-js";
-import { useLayout as l } from "../context/LayoutContext.js";
+import { createComponent as i, Dynamic as s } from "solid-js/web";
+import { untrack as d, createMemo as l } from "solid-js";
+import { useLayout as m } from "../context/LayoutContext.js";
 import { useOptionalComponentRegistry as v } from "../context/ComponentRegistry.js";
 import { KeepAliveStack as f } from "../components/layout/KeepAliveStack.js";
 function g(e) {
   return e.sidebar?.fullScreen === !0 || e.sidebar?.renderIn === "main";
 }
-function b(e) {
-  const n = l(), i = v();
-  if (!d(() => !!e.views) && !i)
+function A(e) {
+  const n = m(), r = v();
+  if (!d(() => !!e.views) && !r)
     throw new Error("ActivityAppsMain requires ComponentRegistryProvider when `views` is not provided.");
-  const o = () => e.activeId ? e.activeId() : n.sidebarActiveTab(), a = m(() => {
-    if (!i) return [];
+  const o = () => e.activeId ? e.activeId() : n.sidebarActiveTab(), a = l(() => {
+    if (!r) return [];
     const u = e.include ?? g;
-    return i.sidebarItems().filter((t) => u(t)).map((t) => ({
+    return r.sidebarItems().filter((t) => u(t)).map((t) => ({
       id: t.id,
-      render: () => r(s, {
+      render: () => i(s, {
         get component() {
           return t.component;
         }
       })
     }));
   }), c = () => e.views ?? a();
-  return r(f, {
+  return i(f, {
     get views() {
       return c();
     },
@@ -38,11 +38,14 @@ function b(e) {
     get activationMode() {
       return e.activationMode;
     },
+    get renderFallback() {
+      return e.renderFallback;
+    },
     get class() {
       return e.class;
     }
   });
 }
 export {
-  b as ActivityAppsMain
+  A as ActivityAppsMain
 };

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

@@ -1,4 +1,4 @@
-import { insert as E, createComponent as a, memo as $, effect as D, className as L, template as b, use as H, delegateEvents as P } from "solid-js/web";
+import { insert as E, createComponent as a, memo as $, effect as R, className as D, template as b, use as H, delegateEvents as P } from "solid-js/web";
 import { createSignal as B, onMount as y, createMemo as I, For as O, Show as k, onCleanup as F } from "solid-js";
 import { cn as x } from "../../utils/cn.js";
 import { useFileBrowser as G } from "./FileBrowserContext.js";
@@ -17,7 +17,7 @@ function ce(n) {
   y(() => {
     if (!o) return;
     const e = () => {
-      o && c(o.offsetWidth);
+      o && o.getClientRects().length > 0 && c(o.offsetWidth);
     };
     e();
     const s = new ResizeObserver(e);
@@ -49,7 +49,7 @@ function ce(n) {
         visible: e,
         shouldCollapse: !1
       };
-    const l = e.map((d) => V(d.name)), i = l[0], g = l[e.length - 1], f = p, R = e.length > 1 ? p : 0, C = i + g + f + R;
+    const l = e.map((d) => V(d.name)), i = l[0], g = l[e.length - 1], f = p, L = e.length > 1 ? p : 0, C = i + g + f + L;
     if (C > s && e.length > 2)
       return {
         collapsed: e.slice(1, -1),
@@ -111,7 +111,7 @@ function ce(n) {
         },
         onClick: () => W(l)
       })]
-    })), D(() => L(e, x("flex items-center gap-1 min-w-0 overflow-hidden", n.class))), e;
+    })), R(() => D(e, x("flex items-center gap-1 min-w-0 overflow-hidden", n.class))), e;
   })();
 }
 function Y(n) {
@@ -140,9 +140,9 @@ function Y(n) {
 function Z(n) {
   return (() => {
     var t = q(), o = t.firstChild;
-    return t.$$click = () => n.onClick(), E(o, () => n.segment.name), D((r) => {
+    return t.$$click = () => n.onClick(), E(o, () => n.segment.name), R((r) => {
       var c = n.isLast, h = x("text-xs px-1.5 py-0.5 rounded cursor-pointer flex-shrink-0", "transition-all duration-100", "focus:outline-none focus-visible:ring-1 focus-visible:ring-ring", n.isLast ? "font-medium text-foreground cursor-default" : "text-muted-foreground hover:text-foreground hover:bg-muted/50");
-      return c !== r.e && (t.disabled = r.e = c), h !== r.t && L(t, r.t = h), r;
+      return c !== r.e && (t.disabled = r.e = c), h !== r.t && D(t, r.t = h), r;
     }, {
       e: void 0,
       t: void 0

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

@@ -1,5 +1,5 @@
-import { addEventListener as te, use as Q, insert as S, createComponent as b, effect as N, setStyleProperty as Y, className as q, style as ue, template as y, spread as ge, mergeProps as me, memo as fe, delegateEvents as he } from "solid-js/web";
-import { createSignal as ie, createMemo as W, createEffect as ne, onCleanup as oe, Show as B, For as ae, untrack as ve } from "solid-js";
+import { addEventListener as te, use as Q, insert as S, createComponent as b, effect as N, setStyleProperty as Y, className as p, style as ue, template as y, spread as ge, mergeProps as me, memo as fe, delegateEvents as he } from "solid-js/web";
+import { createSignal as ie, createMemo as W, createEffect as ne, onCleanup as oe, Show as q, For as ae, untrack as ve } from "solid-js";
 import { cn as H } from "../../utils/cn.js";
 import { useResizeObserver as xe } from "../../hooks/useResizeObserver.js";
 import { useVirtualWindow as Ie } from "../../hooks/useVirtualWindow.js";
@@ -12,8 +12,8 @@ import { fileBrowserTouchTargetAttrs as ye } from "./touchInteractionGuard.js";
 import { createItemContextMenuEvent as Me } from "./contextMenuEvent.js";
 import { createFileBrowserMarqueeSelection as Te, FILE_BROWSER_MARQUEE_OVERLAY_CLASS as Pe } from "./useFileBrowserMarqueeSelection.js";
 import { isPrimaryModKeyPressed as re } from "../../utils/keybind.js";
-var _e = /* @__PURE__ */ y('<mark class="bg-warning/40 text-inherit rounded-sm">'), Fe = /* @__PURE__ */ y('<div class="grid gap-2">'), Ee = /* @__PURE__ */ y('<div><div class=p-3><div class="w-full h-0"aria-hidden=true>'), Le = /* @__PURE__ */ y('<span>No files matching "<!>"'), Re = /* @__PURE__ */ y('<button type=button class="px-2 py-1 rounded bg-muted hover:bg-muted/80 transition-colors">Clear Filter'), $e = /* @__PURE__ */ y('<div class="flex flex-col items-center justify-center h-32 gap-2 text-xs text-muted-foreground">'), ke = /* @__PURE__ */ y("<span>This folder is empty"), Ae = /* @__PURE__ */ y("<div>"), He = /* @__PURE__ */ y('<div class="absolute top-1.5 right-1.5 w-4 h-4 rounded-full bg-primary flex items-center justify-center"><svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=3 stroke-linecap=round stroke-linejoin=round class="w-2.5 h-2.5 text-primary-foreground"><polyline points="20 6 9 17 4 12">'), qe = /* @__PURE__ */ y("<button type=button><div></div><span></span><div>");
-function Be(e) {
+var _e = /* @__PURE__ */ y('<mark class="bg-warning/40 text-inherit rounded-sm">'), Fe = /* @__PURE__ */ y('<div class="grid gap-2">'), Ee = /* @__PURE__ */ y('<div><div class=p-3><div class="w-full h-0"aria-hidden=true>'), Le = /* @__PURE__ */ y('<span>No files matching "<!>"'), Re = /* @__PURE__ */ y('<button type=button class="px-2 py-1 rounded bg-muted hover:bg-muted/80 transition-colors">Clear Filter'), $e = /* @__PURE__ */ y('<div class="flex flex-col items-center justify-center h-32 gap-2 text-xs text-muted-foreground">'), ke = /* @__PURE__ */ y("<span>This folder is empty"), Ae = /* @__PURE__ */ y("<div>"), He = /* @__PURE__ */ y('<div class="absolute top-1.5 right-1.5 w-4 h-4 rounded-full bg-primary flex items-center justify-center"><svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=3 stroke-linecap=round stroke-linejoin=round class="w-2.5 h-2.5 text-primary-foreground"><polyline points="20 6 9 17 4 12">'), pe = /* @__PURE__ */ y("<button type=button><div></div><span></span><div>");
+function qe(e) {
   const r = W(() => {
     if (!e.match || e.match.matchedIndices.length === 0)
       return [{
@@ -38,7 +38,7 @@ function Be(e) {
     get each() {
       return r();
     },
-    children: (s) => b(B, {
+    children: (s) => b(q, {
       get when() {
         return s.highlight;
       },
@@ -53,7 +53,9 @@ function Be(e) {
   });
 }
 function et(e) {
-  const r = le(), s = we(), M = () => (e.enableDragDrop ?? !0) && !!s, D = () => e.instanceId ?? "default", m = 112, d = 8, v = 180, T = 2, R = 6, [f, V] = ie(null), z = xe(f), x = W(() => {
+  const r = le(), s = we(), M = () => (e.enableDragDrop ?? !0) && !!s, D = () => e.instanceId ?? "default", m = 112, d = 8, v = 180, T = 2, R = 6, [f, V] = ie(null), z = xe(f, {
+    preserveWhenHidden: !0
+  }), x = W(() => {
     const n = z()?.width ?? 0;
     if (n <= 0) return T;
     const l = Math.floor((n + d) / (v + d));
@@ -62,7 +64,7 @@ function et(e) {
     count: () => Math.ceil(r.currentFiles().length / Math.max(1, x())),
     itemSize: E,
     overscan: 2
-  }), j = () => c.range().start * x(), $ = () => Math.min(r.currentFiles().length, c.range().end * x()), k = W(() => r.currentFiles().slice(j(), $())), P = /* @__PURE__ */ new Map(), O = (n, l) => {
+  }), j = () => c.range().start * x(), $ = () => Math.min(r.currentFiles().length, c.range().end * x()), k = W(() => r.currentFiles().slice(j(), $())), P = /* @__PURE__ */ new Map(), B = (n, l) => {
     if (l) {
       P.set(n, l);
       return;
@@ -80,7 +82,7 @@ function et(e) {
     const l = E(), o = Math.floor(g.scrollTop / Math.max(1, l)) * Math.max(1, L), i = Math.floor(o / Math.max(1, n));
     g.scrollTop = i * l, c.onScroll(), L = n;
   });
-  const p = (n) => {
+  const O = (n) => {
     if (!g) return;
     const C = Math.floor(n / Math.max(1, x())) * E(), o = C + E(), i = g.scrollTop, w = i + g.clientHeight;
     if (C < i) {
@@ -95,7 +97,7 @@ function et(e) {
     const C = l.findIndex((w) => w.id === n.targetId);
     if (C < 0) return;
     if (!P.get(n.targetId)) {
-      p(C);
+      O(C);
       return;
     }
     typeof cancelAnimationFrame == "function" && I && (cancelAnimationFrame(I), I = 0);
@@ -128,14 +130,14 @@ function et(e) {
     var n = Ee(), l = n.firstChild, C = l.firstChild;
     return te(n, "pointerdown", A.onPointerDown, !0), te(n, "scroll", c.onScroll), Q((o) => {
       g = o, c.scrollRef(o), r.setScrollContainer(o);
-    }, n), Q((o) => V(o), C), S(l, b(B, {
+    }, n), Q((o) => V(o), C), S(l, b(q, {
       get when() {
         return r.currentFiles().length > 0;
       },
       get fallback() {
         return (() => {
           var o = $e();
-          return S(o, b(B, {
+          return S(o, b(q, {
             get when() {
               return r.filterQueryApplied().trim();
             },
@@ -160,7 +162,7 @@ function et(e) {
           get each() {
             return k();
           },
-          children: (i) => b(Oe, {
+          children: (i) => b(Be, {
             item: i,
             get instanceId() {
               return D();
@@ -169,7 +171,7 @@ function et(e) {
               return M();
             },
             dragContext: s,
-            registerTile: O
+            registerTile: B
           })
         })), N((i) => {
           var w = `repeat(${x()}, minmax(0, 1fr))`, _ = `${c.paddingTop()}px`, X = `${c.paddingBottom()}px`;
@@ -180,18 +182,18 @@ function et(e) {
           a: void 0
         }), o;
       }
-    }), null), S(l, b(B, {
+    }), null), S(l, b(q, {
       get when() {
         return A.overlayStyle();
       },
       children: (o) => (() => {
         var i = Ae();
-        return q(i, Pe), N((w) => ue(i, o(), w)), i;
+        return p(i, Pe), N((w) => ue(i, o(), w)), i;
       })()
-    }), null), N(() => q(n, H("relative h-full min-h-0 overflow-auto", e.class))), n;
+    }), null), N(() => p(n, H("relative h-full min-h-0 overflow-auto", e.class))), n;
   })();
 }
-function Oe(e) {
+function Be(e) {
   const r = le(), s = () => r.isSelected(e.item.id), M = () => r.getFilterMatchForId(e.item.id), D = ve(() => e.item), m = Se(r, D, {
     source: "grid"
   });
@@ -206,19 +208,19 @@ function Oe(e) {
     if (!e.dragContext) return !1;
     const t = e.dragContext.dragState();
     return t.isDragging ? t.draggedItems.some((a) => a.item.id === e.item.id) : !1;
-  }, O = () => {
+  }, B = () => {
     x !== null && (clearTimeout(x), x = null);
   }, g = () => {
     typeof document > "u" || (document.removeEventListener("pointermove", A, !0), document.removeEventListener("pointerup", n, !0), document.removeEventListener("pointercancel", l, !0));
   }, L = () => {
     typeof document > "u" || (document.addEventListener("pointermove", A, !0), document.addEventListener("pointerup", n, !0), document.addEventListener("pointercancel", l, !0));
   }, I = (t) => {
-    O(), g(), f && e.dragContext && e.dragContext.endDrag(t), v = null, f = !1;
+    B(), g(), f && e.dragContext && e.dragContext.endDrag(t), v = null, f = !1;
   };
   oe(() => {
     e.registerTile(e.item.id, null), I(!1);
   });
-  const p = (t, a) => {
+  const O = (t, a) => {
     if (!e.enableDragDrop || !e.dragContext || f) return;
     f = !0, s() || r.selectItem(e.item.id, !1);
     const h = r.getSelectedItemsList(), u = (h.length > 0 && s() ? h : [e.item]).map((G) => ({
@@ -239,14 +241,14 @@ function Oe(e) {
       I(!1);
       return;
     }
-    !c() && !f && F > V && p(t.clientX, t.clientY), f && e.dragContext && e.dragContext.updateDrag(t.clientX, t.clientY);
+    !c() && !f && F > V && O(t.clientX, t.clientY), f && e.dragContext && e.dragContext.updateDrag(t.clientX, t.clientY);
   }, n = (t) => {
     v === t.pointerId && (m.onPointerUp(), I(!0));
   }, l = (t) => {
     v === t.pointerId && (m.onPointerCancel(), I(!1));
   }, C = (t) => {
-    d = t.pointerType, m.onPointerDown(t), !(t.pointerType === "mouse" && t.button !== 0) && (!e.enableDragDrop || !e.dragContext || (v = t.pointerId, T = t.clientX, R = t.clientY, f = !1, L(), c() && (O(), x = setTimeout(() => {
-      v !== null && !f && p(T, R);
+    d = t.pointerType, m.onPointerDown(t), !(t.pointerType === "mouse" && t.button !== 0) && (!e.enableDragDrop || !e.dragContext || (v = t.pointerId, T = t.clientX, R = t.clientY, f = !1, L(), c() && (B(), x = setTimeout(() => {
+      v !== null && !f && O(T, R);
     }, z))));
   }, o = (t) => {
     d = t.pointerType, m.onPointerMove(t);
@@ -297,7 +299,7 @@ function Oe(e) {
     }));
   }, se = () => e.dragContext?.dragState(), de = () => se()?.isDragging ?? !1, K = () => E() && de() && $();
   return (() => {
-    var t = qe(), a = t.firstChild, h = a.nextSibling, F = h.nextSibling;
+    var t = pe(), a = t.firstChild, h = a.nextSibling, F = h.nextSibling;
     return Q((u) => {
       e.registerTile(e.item.id, u);
     }, t), ge(t, me({
@@ -333,7 +335,7 @@ function Oe(e) {
           K() && !k() && ["bg-destructive/10 ring-2 ring-dashed ring-destructive/50"]
         );
       }
-    }), !1, !0), S(t, b(B, {
+    }), !1, !0), S(t, b(q, {
       get when() {
         return s();
       },
@@ -351,7 +353,7 @@ function Oe(e) {
         return e.item;
       },
       size: "md"
-    }), null), S(h, b(Be, {
+    }), null), S(h, b(qe, {
       get name() {
         return e.item.name;
       },
@@ -360,7 +362,7 @@ function Oe(e) {
       }
     })), N((u) => {
       var G = H("w-12 h-12 flex items-center justify-center rounded-lg", "relative"), J = H("block w-full min-w-0 truncate px-1 text-xs text-center", "transition-colors duration-150", De(e.item), s() && "font-medium"), Z = H("absolute inset-0 rounded-lg opacity-0 transition-opacity duration-300", "group-hover:opacity-100", "pointer-events-none"), ee = e.item.type === "folder" ? "radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--warning) 8%, transparent), transparent 70%)" : "radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--primary) 5%, transparent), transparent 70%)";
-      return G !== u.e && q(a, u.e = G), J !== u.t && q(h, u.t = J), Z !== u.a && q(F, u.a = Z), ee !== u.o && Y(F, "background", u.o = ee), u;
+      return G !== u.e && p(a, u.e = G), J !== u.t && p(h, u.t = J), Z !== u.a && p(F, u.a = Z), ee !== u.o && Y(F, "background", u.o = ee), u;
     }, {
       e: void 0,
       t: void 0,

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

@@ -15,7 +15,7 @@ import { fileBrowserTouchTargetAttrs as Ee } from "./touchInteractionGuard.js";
 import { createItemContextMenuEvent as Le } from "./contextMenuEvent.js";
 import { createFileBrowserMarqueeSelection as We, FILE_BROWSER_MARQUEE_OVERLAY_CLASS as pe } from "./useFileBrowserMarqueeSelection.js";
 import { isPrimaryModKeyPressed as ae } from "../../utils/keybind.js";
-var ge = /* @__PURE__ */ _("<span>"), Be = /* @__PURE__ */ _('<mark class="bg-warning/40 text-inherit rounded-sm">'), He = /* @__PURE__ */ _('<div><button type=button class="group w-full flex items-center justify-start text-left px-3 py-2 cursor-pointer hover:bg-muted/50 transition-colors">Modified'), Ne = /* @__PURE__ */ _('<div class=shrink-0><button type=button class="group w-full flex items-center justify-start text-left px-3 py-2 cursor-pointer hover:bg-muted/50 transition-colors">Size'), le = /* @__PURE__ */ _("<div>"), qe = /* @__PURE__ */ _('<div><div class="flex items-center border-b border-border text-[11px] text-muted-foreground font-medium"><div><button type=button class="group w-full flex items-center min-w-0 px-3 py-2 cursor-pointer hover:bg-muted/50 transition-colors"><span class="flex items-center gap-2 min-w-0"><span class="flex-shrink-0 w-4 h-4"aria-hidden=true></span><span class="flex items-center min-w-0"><span class=truncate>Name</span></span></span></button></div></div><div class="relative flex-1 min-h-0 overflow-auto">'), Oe = /* @__PURE__ */ _('<span>No files matching "<!>"'), Xe = /* @__PURE__ */ _('<button type=button class="px-2 py-1 rounded bg-muted hover:bg-muted/80 transition-colors">Clear Filter'), Ye = /* @__PURE__ */ _('<div class="flex flex-col items-center justify-center h-32 gap-2 text-xs text-muted-foreground">'), Ge = /* @__PURE__ */ _("<span>This folder is empty"), se = /* @__PURE__ */ _('<div class="shrink-0 px-3 py-1.5 text-left text-muted-foreground truncate">'), Ve = /* @__PURE__ */ _('<button type=button><div class="flex items-center gap-2 flex-1 min-w-0 px-3 py-1.5"><span class="relative flex-shrink-0 w-4 h-4">');
+var ge = /* @__PURE__ */ _("<span>"), He = /* @__PURE__ */ _('<mark class="bg-warning/40 text-inherit rounded-sm">'), Be = /* @__PURE__ */ _('<div><button type=button class="group w-full flex items-center justify-start text-left px-3 py-2 cursor-pointer hover:bg-muted/50 transition-colors">Modified'), Ne = /* @__PURE__ */ _('<div class=shrink-0><button type=button class="group w-full flex items-center justify-start text-left px-3 py-2 cursor-pointer hover:bg-muted/50 transition-colors">Size'), le = /* @__PURE__ */ _("<div>"), qe = /* @__PURE__ */ _('<div><div class="flex items-center border-b border-border text-[11px] text-muted-foreground font-medium"><div><button type=button class="group w-full flex items-center min-w-0 px-3 py-2 cursor-pointer hover:bg-muted/50 transition-colors"><span class="flex items-center gap-2 min-w-0"><span class="flex-shrink-0 w-4 h-4"aria-hidden=true></span><span class="flex items-center min-w-0"><span class=truncate>Name</span></span></span></button></div></div><div class="relative flex-1 min-h-0 overflow-auto">'), Oe = /* @__PURE__ */ _('<span>No files matching "<!>"'), Xe = /* @__PURE__ */ _('<button type=button class="px-2 py-1 rounded bg-muted hover:bg-muted/80 transition-colors">Clear Filter'), Ye = /* @__PURE__ */ _('<div class="flex flex-col items-center justify-center h-32 gap-2 text-xs text-muted-foreground">'), Ge = /* @__PURE__ */ _("<span>This folder is empty"), se = /* @__PURE__ */ _('<div class="shrink-0 px-3 py-1.5 text-left text-muted-foreground truncate">'), Ve = /* @__PURE__ */ _('<button type=button><div class="flex items-center gap-2 flex-1 min-w-0 px-3 py-1.5"><span class="relative flex-shrink-0 w-4 h-4">');
 function Ue(e) {
   const o = te(() => {
     if (!e.match || e.match.matchedIndices.length === 0)
@@ -51,7 +51,7 @@ function Ue(e) {
           return ce(() => R.text);
         },
         get children() {
-          var M = Be();
+          var M = He();
           return f(M, () => R.text), M;
         }
       })
@@ -130,7 +130,7 @@ function ft(e) {
     getSelectedIds: () => [...o.selectedItems()],
     replaceSelection: (n, i) => o.replaceSelection(n, i),
     clearSelection: o.clearSelection
-  }), B = (n) => {
+  }), H = (n) => {
     const i = () => o.sortConfig(), l = () => i().field === n.field;
     return (() => {
       var c = ge();
@@ -140,8 +140,10 @@ function ft(e) {
         }
       })), k(() => W(c, E("ml-1 transition-all duration-150", l() ? "opacity-100" : "opacity-0 group-hover:opacity-40"))), c;
     })();
-  }, H = re("(min-width: 640px)"), X = re("(min-width: 768px)"), [K, Y] = ue(null), J = _e(K), L = (n, i, l) => Math.max(i, Math.min(l, n)), S = te(() => {
-    const n = J()?.width ?? 0, i = H(), l = X(), c = o.listColumnRatios(), h = 160, v = 120, b = 80, D = 128, a = 96;
+  }, B = re("(min-width: 640px)"), X = re("(min-width: 768px)"), [K, Y] = ue(null), J = _e(K, {
+    preserveWhenHidden: !0
+  }), L = (n, i, l) => Math.max(i, Math.min(l, n)), S = te(() => {
+    const n = J()?.width ?? 0, i = B(), l = X(), c = o.listColumnRatios(), h = 160, v = 120, b = 80, D = 128, a = 96;
     if (!i || n <= 0)
       return {
         width: n,
@@ -223,7 +225,7 @@ function ft(e) {
     var n = qe(), i = n.firstChild, l = i.firstChild, c = l.firstChild, h = c.firstChild, v = h.firstChild, b = v.nextSibling;
     b.firstChild;
     var D = i.nextSibling;
-    return ee(Y, i), c.$$click = () => A("name"), f(b, m(B, {
+    return ee(Y, i), c.$$click = () => A("name"), f(b, m(H, {
       field: "name"
     }), null), f(l, m(P, {
       get when() {
@@ -240,8 +242,8 @@ function ft(e) {
         return S().showModified;
       },
       get children() {
-        var a = He(), r = a.firstChild;
-        return r.firstChild, r.$$click = () => A("modifiedAt"), f(r, m(B, {
+        var a = Be(), r = a.firstChild;
+        return r.firstChild, r.$$click = () => A("modifiedAt"), f(r, m(H, {
           field: "modifiedAt"
         }), null), f(a, m(P, {
           get when() {
@@ -267,7 +269,7 @@ function ft(e) {
       },
       get children() {
         var a = Ne(), r = a.firstChild;
-        return r.firstChild, r.$$click = () => A("size"), f(r, m(B, {
+        return r.firstChild, r.$$click = () => A("size"), f(r, m(H, {
           field: "size"
         }), null), k((t) => p(a, "width", `${q()}px`)), a;
       }
@@ -362,8 +364,8 @@ function Qe(e) {
   let g, $ = null, F = 0, z = 0, x = !1;
   const U = 5, Q = 500;
   let A = null;
-  const [j, O] = ue(!1), y = () => g === "touch" || g === "pen", B = () => e.item.type === "folder", H = () => B() && e.enableDragDrop && e.dragContext, X = () => {
-    if (!H() || !e.dragContext) return !1;
+  const [j, O] = ue(!1), y = () => g === "touch" || g === "pen", H = () => e.item.type === "folder", B = () => H() && e.enableDragDrop && e.dragContext, X = () => {
+    if (!B() || !e.dragContext) return !1;
     const t = e.dragContext.dragState();
     return t.isDragging ? e.dragContext.canDropOn(t.draggedItems, e.item.path, e.item, e.instanceId) : !1;
   }, K = () => {
@@ -415,7 +417,7 @@ function Qe(e) {
   }, i = (t) => {
     g = t.pointerType, C.onPointerMove(t);
   }, l = (t) => {
-    if (!H() || !e.dragContext) return;
+    if (!B() || !e.dragContext) return;
     const s = e.dragContext.dragState();
     if (!s.isDragging) return;
     O(!0);
@@ -459,7 +461,7 @@ function Qe(e) {
       items: u,
       source: "list"
     }));
-  }, D = () => e.dragContext?.dragState(), a = () => D()?.isDragging ?? !1, r = () => j() && a() && H();
+  }, D = () => e.dragContext?.dragState(), a = () => D()?.isDragging ?? !1, r = () => j() && a() && B();
   return (() => {
     var t = Ve(), s = t.firstChild, u = s.firstChild;
     return ee((d) => {

package/dist/components/layout/KeepAliveStack.d.ts

@@ -14,5 +14,7 @@ export interface KeepAliveStackProps {
     keepMounted?: boolean;
     /** Publish activation effects synchronously or after the visible view has painted. */
     activationMode?: 'sync' | 'after-paint';
+    /** Optional per-view Suspense boundary. The host owns localized loading presentation. */
+    renderFallback?: (id: string) => JSX.Element;
 }
 export declare function KeepAliveStack(props: KeepAliveStackProps): JSX.Element;

package/dist/components/layout/KeepAliveStack.js

@@ -1,154 +1,171 @@
-import { insert as V, createComponent as g, effect as C, className as P, setStyleProperty as B, template as R } from "solid-js/web";
-import { createMemo as m, createSignal as I, untrack as k, createEffect as b, For as F, createRenderEffect as N, onCleanup as j } from "solid-js";
-import { ViewActivationProvider as D } from "../../context/ViewActivationContext.js";
-import { cn as q } from "../../utils/cn.js";
-import { deferAfterPaint as G } from "../../utils/defer.js";
-var E = /* @__PURE__ */ R("<div>");
+import { insert as P, createComponent as g, effect as B, className as E, setStyleProperty as K, template as R, memo as N, setAttribute as z } from "solid-js/web";
+import { createMemo as S, createSignal as k, untrack as F, createEffect as x, For as j, createRenderEffect as D, onCleanup as G, Suspense as H } from "solid-js";
+import { ViewActivationProvider as J } from "../../context/ViewActivationContext.js";
+import { cn as V } from "../../utils/cn.js";
+import { deferAfterPaint as L } from "../../utils/defer.js";
+var O = /* @__PURE__ */ R("<div>");
 function M(e) {
   return String(e ?? "").trim();
 }
-function z(e) {
-  const u = [], d = /* @__PURE__ */ new Set();
+function C(e) {
+  const u = [], s = /* @__PURE__ */ new Set();
   for (const f of e) {
-    const o = M(f?.id);
-    o && (d.has(o) || (d.add(o), u.push(o)));
+    const a = M(f?.id);
+    a && (s.has(a) || (s.add(a), u.push(a)));
   }
   return u;
 }
-function H(e, u) {
-  const d = new Set(e), f = /* @__PURE__ */ new Map();
-  for (const o of u) {
-    const a = M(o?.id);
-    a && d.has(a) && (f.has(a) || f.set(a, o));
+function Q(e, u) {
+  const s = new Set(e), f = /* @__PURE__ */ new Map();
+  for (const a of u) {
+    const d = M(a?.id);
+    d && s.has(d) && (f.has(d) || f.set(d, a));
   }
   return f;
 }
-function J(e) {
-  const [u, d] = I(0), [f, o] = I(!1);
-  let a = 0;
-  N(() => {
-    const s = e.active(), r = e.activationMode();
-    a += 1;
-    const w = a;
-    if (!s) {
-      o(!1);
+function T(e) {
+  const [u, s] = k(0), [f, a] = k(!1);
+  let d = 0;
+  D(() => {
+    const c = e.active(), t = e.activationMode();
+    d += 1;
+    const h = d;
+    if (!c) {
+      a(!1);
       return;
     }
     const v = () => {
-      w !== a || !e.active() || k(f) || (o(!0), d((S) => S + 1));
+      h !== d || !e.active() || F(f) || (a(!0), s((w) => w + 1));
     };
-    r === "after-paint" ? G(v) : v();
-  }), j(() => {
-    a += 1;
+    t === "after-paint" ? L(v) : v();
+  }), G(() => {
+    d += 1;
   });
-  const A = k(() => ({
+  const A = F(() => ({
     id: e.id,
+    visible: e.active,
     active: f,
     activationSeq: u
   }));
-  return g(D, {
+  return g(J, {
     value: A,
     get children() {
-      var s = E();
-      return V(s, () => e.children), C((r) => {
-        var w = e.class, v = e.active() ? "block" : "none";
-        return w !== r.e && P(s, r.e = w), v !== r.t && B(s, "display", r.t = v), r;
+      var c = O();
+      return P(c, (() => {
+        var t = N(() => !!e.renderFallback);
+        return () => t() ? g(H, {
+          get fallback() {
+            return e.renderFallback(e.id);
+          },
+          get children() {
+            return e.children;
+          }
+        }) : e.children;
+      })()), B((t) => {
+        var h = e.class, v = e.id, w = e.active() ? void 0 : "true", b = !e.active(), y = e.active() ? "block" : "none";
+        return h !== t.e && E(c, t.e = h), v !== t.t && z(c, "data-floe-keep-alive-view", t.t = v), w !== t.a && z(c, "aria-hidden", t.a = w), b !== t.o && (c.inert = t.o = b), y !== t.i && K(c, "display", t.i = y), t;
       }, {
         e: void 0,
-        t: void 0
-      }), s;
+        t: void 0,
+        a: void 0,
+        o: void 0,
+        i: void 0
+      }), c;
     }
   });
 }
-function X(e) {
-  const u = () => e.lazyMount !== !1, d = () => e.keepMounted !== !1, f = () => e.activationMode ?? "sync", o = m(() => z(e.views)), [a, A] = I(k(() => H(z(e.views), e.views))), s = m(() => M(e.activeId));
-  b(() => {
-    const t = o(), n = e.views;
-    A((i) => {
-      let c = !1;
-      const l = new Map(i), x = new Set(t);
-      for (const h of l.keys())
-        x.has(h) || (l.delete(h), c = !0);
-      for (const h of n) {
-        const y = M(h?.id);
-        y && x.has(y) && (l.has(y) || (l.set(y, h), c = !0));
+function _(e) {
+  const u = () => e.lazyMount !== !1, s = () => e.keepMounted !== !1, f = () => e.activationMode ?? "sync", a = S(() => C(e.views)), [d, A] = k(F(() => Q(C(e.views), e.views))), c = S(() => M(e.activeId));
+  x(() => {
+    const n = a(), i = e.views;
+    A((r) => {
+      let o = !1;
+      const l = new Map(r), q = new Set(n);
+      for (const m of l.keys())
+        q.has(m) || (l.delete(m), o = !0);
+      for (const m of i) {
+        const I = M(m?.id);
+        I && q.has(I) && (l.has(I) || (l.set(I, m), o = !0));
       }
-      return c ? l : i;
+      return o ? l : r;
     });
   });
-  const r = m(() => ({
-    order: o(),
-    byId: a()
-  })), w = () => {
-    if (!d()) return /* @__PURE__ */ new Set();
-    if (!u()) return new Set(r().order);
-    const t = s();
-    return t ? r().byId.has(t) ? /* @__PURE__ */ new Set([t]) : /* @__PURE__ */ new Set() : /* @__PURE__ */ new Set();
-  }, [v, S] = I(w());
-  b(() => {
-    if (!d()) return;
-    const t = new Set(r().order);
-    S((n) => {
-      let i = !1;
-      const c = /* @__PURE__ */ new Set();
-      for (const l of n) {
-        if (!t.has(l)) {
-          i = !0;
+  const t = S(() => ({
+    order: a(),
+    byId: d()
+  })), h = () => {
+    if (!s()) return /* @__PURE__ */ new Set();
+    if (!u()) return new Set(t().order);
+    const n = c();
+    return n ? t().byId.has(n) ? /* @__PURE__ */ new Set([n]) : /* @__PURE__ */ new Set() : /* @__PURE__ */ new Set();
+  }, [v, w] = k(h());
+  x(() => {
+    if (!s()) return;
+    const n = new Set(t().order);
+    w((i) => {
+      let r = !1;
+      const o = /* @__PURE__ */ new Set();
+      for (const l of i) {
+        if (!n.has(l)) {
+          r = !0;
           continue;
         }
-        c.add(l);
+        o.add(l);
       }
-      return i ? c : n;
+      return r ? o : i;
     });
-  }), b(() => {
-    if (!d() || !u()) return;
-    const t = s();
-    t && r().byId.has(t) && S((n) => {
-      if (n.has(t)) return n;
-      const i = new Set(n);
-      return i.add(t), i;
+  }), x(() => {
+    if (!s() || !u()) return;
+    const n = c();
+    n && t().byId.has(n) && w((i) => {
+      if (i.has(n)) return i;
+      const r = new Set(i);
+      return r.add(n), r;
     });
   });
-  const K = m(() => {
-    const t = r().order, n = s();
-    if (!d())
-      return n ? r().byId.has(n) ? [n] : [] : [];
-    if (!u()) return t;
-    const i = v();
-    return t.filter((c) => i.has(c) || c === n);
-  }), O = m(() => {
-    const t = s();
-    return t ? r().byId.has(t) : !1;
+  const b = S(() => {
+    const n = t().order, i = c();
+    if (!s())
+      return i ? t().byId.has(i) ? [i] : [] : [];
+    if (!u()) return n;
+    const r = v();
+    return n.filter((o) => r.has(o) || o === i);
+  }), y = S(() => {
+    const n = c();
+    return n ? t().byId.has(n) : !1;
   });
   return (() => {
-    var t = E();
-    return V(t, g(F, {
+    var n = O();
+    return P(n, g(j, {
       get each() {
-        return K();
+        return b();
       },
-      children: (n) => {
-        const i = () => a().get(n);
-        return g(J, {
-          id: n,
-          active: () => s() === n,
+      children: (i) => {
+        const r = () => d().get(i);
+        return g(T, {
+          id: i,
+          active: () => c() === i,
           activationMode: f,
+          get renderFallback() {
+            return e.renderFallback;
+          },
           get class() {
-            return q("absolute inset-0", i()?.class);
+            return V("absolute inset-0", r()?.class);
           },
           get children() {
-            return i()?.render();
+            return r()?.render();
           }
         });
       }
-    })), C((n) => {
-      var i = q("relative h-full min-h-0 w-full", e.class), c = O() ? "block" : "none";
-      return i !== n.e && P(t, n.e = i), c !== n.t && B(t, "display", n.t = c), n;
+    })), B((i) => {
+      var r = V("relative h-full min-h-0 w-full", e.class), o = y() ? "block" : "none";
+      return r !== i.e && E(n, i.e = r), o !== i.t && K(n, "display", i.t = o), i;
     }, {
       e: void 0,
       t: void 0
-    }), t;
+    }), n;
   })();
 }
 export {
-  X as KeepAliveStack
+  _ as KeepAliveStack
 };

package/dist/context/ViewActivationContext.d.ts

@@ -1,6 +1,9 @@
 import { type Accessor, type JSX } from 'solid-js';
 export interface ViewActivationContextValue {
     id: string;
+    /** Immediate presentation visibility. Custom providers default to their active accessor. */
+    visible?: Accessor<boolean>;
+    /** Activation effects may wait until after the visible content paints. */
     active: Accessor<boolean>;
     activationSeq: Accessor<number>;
 }
@@ -9,4 +12,4 @@ export interface ViewActivationProviderProps {
     children: JSX.Element;
 }
 export declare function ViewActivationProvider(props: ViewActivationProviderProps): JSX.Element;
-export declare function useViewActivation(): ViewActivationContextValue;
+export declare function useViewActivation(): Required<ViewActivationContextValue>;

package/dist/context/ViewActivationContext.js

@@ -1,22 +1,25 @@
-import { createComponent as i } from "solid-js/web";
-import { untrack as n, useContext as r, createContext as c } from "solid-js";
-const e = c();
-function v(t) {
-  const o = n(() => t.value);
-  return i(e.Provider, {
-    value: o,
+import { createComponent as a } from "solid-js/web";
+import { useContext as o, untrack as v, createContext as u } from "solid-js";
+const i = u();
+function w(t) {
+  const n = o(i), e = v(() => t.value), r = e.visible ?? e.active, c = {
+    ...e,
+    visible: () => (n?.visible() ?? !0) && r()
+  };
+  return a(i.Provider, {
+    value: c,
     get children() {
       return t.children;
     }
   });
 }
-function w() {
-  const t = r(e);
+function d() {
+  const t = o(i);
   if (!t)
     throw new Error("ViewActivationContext not found. Wrap your view with <ViewActivationProvider />.");
   return t;
 }
 export {
-  v as ViewActivationProvider,
-  w as useViewActivation
+  w as ViewActivationProvider,
+  d as useViewActivation
 };

package/dist/hooks/useResizeObserver.d.ts

@@ -6,5 +6,9 @@ export interface Size {
 /**
  * Track the usable content box in local CSS pixels, excluding padding and
  * scrollbars. CSS transforms on the element or its ancestors do not affect it.
+ * With preserveWhenHidden, retain the last measurement while there is no rendered
+ * box. Real zero-sized boxes still report zero; replacing the element resets it.
  */
-export declare function useResizeObserver(element: Accessor<HTMLElement | null | undefined>): Accessor<Size | null>;
+export declare function useResizeObserver(element: Accessor<HTMLElement | null | undefined>, options?: {
+    preserveWhenHidden?: boolean;
+}): Accessor<Size | null>;

package/dist/hooks/useResizeObserver.js

@@ -1,29 +1,28 @@
-import { createSignal as u, createEffect as h, onCleanup as s } from "solid-js";
-function f(d) {
-  const [a, r] = u(null, {
+import { createSignal as l, createEffect as u, onCleanup as d } from "solid-js";
+function g(o, a = {}) {
+  const [c, r] = l(null, {
     equals: (e, t) => e?.width === t?.width && e?.height === t?.height
   });
-  return h(() => {
-    const e = d();
-    if (!e) {
-      r(null);
+  return u(() => {
+    const e = o();
+    if (r(null), !e)
       return;
-    }
     const t = () => {
-      const n = e.ownerDocument.defaultView.getComputedStyle(e), i = (c) => Number.parseFloat(c) || 0;
+      if (a.preserveWhenHidden && e.getClientRects().length === 0) return;
+      const n = e.ownerDocument.defaultView.getComputedStyle(e), i = (h) => Number.parseFloat(h) || 0;
       r({
         width: Math.max(0, e.clientWidth - i(n.paddingLeft) - i(n.paddingRight)),
         height: Math.max(0, e.clientHeight - i(n.paddingTop) - i(n.paddingBottom))
       });
     };
     if (t(), typeof ResizeObserver > "u") {
-      typeof window < "u" && (window.addEventListener("resize", t), s(() => window.removeEventListener("resize", t)));
+      typeof window < "u" && (window.addEventListener("resize", t), d(() => window.removeEventListener("resize", t)));
       return;
     }
-    const o = new ResizeObserver(t);
-    o.observe(e), s(() => o.disconnect());
-  }), a;
+    const s = new ResizeObserver(t);
+    s.observe(e), d(() => s.disconnect());
+  }), c;
 }
 export {
-  f as useResizeObserver
+  g as useResizeObserver
 };

package/dist/hooks/useVirtualWindow.js

@@ -1,11 +1,11 @@
 import { createSignal as f, createMemo as i, onCleanup as F } from "solid-js";
-function x(e) {
-  const a = e.overscan ?? 8;
-  let t = null, o = null, r = null;
+function T(t) {
+  const a = t.overscan ?? 8;
+  let e = null, o = null, r = null;
   const [m, d] = f(0), [z, S] = f(0), c = () => {
-    t && (d(t.scrollTop), S(t.clientHeight));
+    !e || e.getClientRects().length === 0 || (d(e.scrollTop), S(e.clientHeight));
   }, p = () => {
-    if (t && r === null) {
+    if (e && r === null) {
       if (typeof requestAnimationFrame > "u") {
         c();
         return;
@@ -15,20 +15,20 @@ function x(e) {
       });
     }
   }, l = i(() => {
-    const n = e.count(), s = e.itemSize(), u = m(), w = z();
+    const n = t.count(), s = t.itemSize(), u = m(), w = z();
     if (n <= 0 || s <= 0) return { start: 0, end: 0 };
     const b = Math.max(0, Math.floor(u / s) - a), A = Math.min(n, Math.ceil((u + w) / s) + a);
     return { start: b, end: A };
-  }), v = i(() => l().start * e.itemSize()), h = i(() => {
-    const n = e.count();
-    return Math.max(0, n - l().end) * e.itemSize();
-  }), M = i(() => e.count() * e.itemSize()), g = (n) => {
-    t !== n && (o?.disconnect(), o = null, t = n, !(!t || typeof ResizeObserver > "u") && (o = new ResizeObserver(() => c()), o.observe(t), c()));
+  }), v = i(() => l().start * t.itemSize()), g = i(() => {
+    const n = t.count();
+    return Math.max(0, n - l().end) * t.itemSize();
+  }), h = i(() => t.count() * t.itemSize()), M = (n) => {
+    e !== n && (o?.disconnect(), o = null, e = n, e && (c(), !(typeof ResizeObserver > "u") && (o = new ResizeObserver(() => c()), o.observe(e))));
   };
   return F(() => {
     o?.disconnect(), r !== null && typeof cancelAnimationFrame < "u" && (cancelAnimationFrame(r), r = null);
-  }), { scrollRef: g, onScroll: p, range: l, paddingTop: v, paddingBottom: h, totalSize: M };
+  }), { scrollRef: M, onScroll: p, range: l, paddingTop: v, paddingBottom: g, totalSize: h };
 }
 export {
-  x as useVirtualWindow
+  T as useVirtualWindow
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@floegence/floe-webapp-core",
-  "version": "0.60.1",
+  "version": "0.60.2",
   "license": "MIT",
   "type": "module",
   "main": "./dist/index.js",