@floegence/floe-webapp-core 0.60.0 → 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;