@floegence/floe-webapp-core 0.35.13 → 0.35.14

package/dist/components/layout/Shell.js

@@ -1,172 +1,194 @@
-import { createComponent as n, Dynamic as y, insert as c, memo as T, effect as A, className as f, setStyleProperty as E, template as B, delegateEvents as Q } from "solid-js/web";
-import { createSignal as K, createEffect as w, createMemo as v, For as p, Show as u } from "solid-js";
-import { useLayout as L } from "../../context/LayoutContext.js";
-import { useResolvedFloeConfig as V } from "../../context/FloeConfigContext.js";
-import { useMediaQuery as j } from "../../hooks/useMediaQuery.js";
-import { cn as g } from "../../utils/cn.js";
-import { deferNonBlocking as q } from "../../utils/defer.js";
-import { useComponentRegistry as G } from "../../context/ComponentRegistry.js";
-import { Sidebar as J } from "./Sidebar.js";
-import { TopBar as U } from "./TopBar.js";
-import { TopBarIconButton as X } from "./TopBarIconButton.js";
-import { BottomBar as Y } from "./BottomBar.js";
-import { MobileTabBar as Z } from "./MobileTabBar.js";
-import { ActivityBar as ee } from "./ActivityBar.js";
-import { ResizeHandle as _ } from "./ResizeHandle.js";
-import { resolveMobileTabActiveId as te, resolveMobileTabSelect as re } from "./mobileTabs.js";
-import { KeepAliveStack as ie } from "./KeepAliveStack.js";
-var O = /* @__PURE__ */ B('<div class="flex items-center gap-2">'), ne = /* @__PURE__ */ B("<div data-floe-shell-slot=mobile-sidebar-backdrop>"), le = /* @__PURE__ */ B('<div data-floe-shell-slot=mobile-sidebar-drawer><div class="h-full overflow-auto overscroll-contain">'), oe = /* @__PURE__ */ B("<div data-floe-shell-slot=terminal-panel style=border-top-color:var(--terminal-panel-border)>"), ae = /* @__PURE__ */ B('<div data-floe-shell><div data-floe-shell-slot=main-layout class="flex-1 min-h-0 flex overflow-hidden relative"><div data-floe-shell-slot=content-area><main data-floe-shell-slot=main>');
-function Ae(r) {
-  const l = L(), z = V(), m = j(z.config.layout.mobileQuery), [k, h] = K(!1), b = () => r.sidebarMode === "hidden", a = (() => {
+import { createComponent as o, Dynamic as k, insert as m, memo as p, effect as T, className as h, setStyleProperty as J, template as I, use as U, delegateEvents as X } from "solid-js/web";
+import { createSignal as R, createEffect as B, createMemo as g, For as N, Show as f } from "solid-js";
+import { useLayout as Y } from "../../context/LayoutContext.js";
+import { useResolvedFloeConfig as Z } from "../../context/FloeConfigContext.js";
+import { useMediaQuery as ee } from "../../hooks/useMediaQuery.js";
+import { useOverlayMask as te } from "../../hooks/useOverlayMask.js";
+import { cn as S } from "../../utils/cn.js";
+import { deferNonBlocking as re } from "../../utils/defer.js";
+import { useComponentRegistry as ie } from "../../context/ComponentRegistry.js";
+import { Sidebar as ne } from "./Sidebar.js";
+import { TopBar as oe } from "./TopBar.js";
+import { TopBarIconButton as le } from "./TopBarIconButton.js";
+import { BottomBar as ae } from "./BottomBar.js";
+import { MobileTabBar as se } from "./MobileTabBar.js";
+import { ActivityBar as de } from "./ActivityBar.js";
+import { ResizeHandle as W } from "./ResizeHandle.js";
+import { resolveMobileTabActiveId as ce, resolveMobileTabSelect as ue } from "./mobileTabs.js";
+import { KeepAliveStack as me } from "./KeepAliveStack.js";
+var P = /* @__PURE__ */ I('<div class="flex items-center gap-2">'), be = /* @__PURE__ */ I("<div data-floe-shell-slot=mobile-sidebar-backdrop>"), fe = /* @__PURE__ */ I('<div data-floe-shell-slot=mobile-sidebar-drawer tabindex=-1><div class="h-full overflow-auto overscroll-contain">'), ve = /* @__PURE__ */ I("<div data-floe-shell-slot=terminal-panel style=border-top-color:var(--terminal-panel-border)>"), he = /* @__PURE__ */ I('<div data-floe-shell><div data-floe-shell-slot=main-layout class="flex-1 min-h-0 flex overflow-hidden relative"><div data-floe-shell-slot=content-area><main data-floe-shell-slot=main>');
+function Re(r) {
+  const i = Y(), F = Z(), d = ee(F.config.layout.mobileQuery), [y, v] = R(!1), [z, A] = R(null);
+  let M;
+  const c = () => r.sidebarMode === "hidden", s = (() => {
     try {
-      return G();
+      return ie();
     } catch {
       return null;
     }
-  })(), M = (e, s) => {
-    const o = a?.getComponent(e)?.sidebar?.fullScreen ?? !1, i = b() ? !1 : s?.openSidebar ?? !o;
-    l.setSidebarActiveTab(e, {
-      openSidebar: i
+  })(), x = (e, a) => {
+    const l = s?.getComponent(e)?.sidebar?.fullScreen ?? !1, n = c() ? !1 : a?.openSidebar ?? !l;
+    i.setSidebarActiveTab(e, {
+      openSidebar: n
     });
   };
-  w(() => {
-    b() && h(!1);
-  }), w(() => {
-    const e = m();
-    l.isMobile() !== e && l.setIsMobile(e);
-  }), w(() => {
-    m() || h(!1);
+  B(() => {
+    c() && v(!1);
+  }), B(() => {
+    const e = d();
+    i.isMobile() !== e && i.setIsMobile(e);
+  }), B(() => {
+    d() || v(!1);
   });
-  const C = v(() => r.activityItems ? r.activityItems : a ? a.sidebarItems().filter((e) => !!e.icon).filter((e) => !(m() && e.sidebar?.hiddenOnMobile)).map((e) => ({
+  const C = g(() => r.activityItems ? r.activityItems : s ? s.sidebarItems().filter((e) => !!e.icon).filter((e) => !(d() && e.sidebar?.hiddenOnMobile)).map((e) => ({
     id: e.id,
     icon: e.icon,
     label: e.name,
     badge: e.sidebar?.badge,
     collapseBehavior: e.sidebar?.collapseBehavior ?? (e.sidebar?.fullScreen ? "preserve" : "toggle")
-  })) : []), P = v(() => b() ? [] : r.sidebarContent ? [] : a ? a.sidebarItems().filter((e) => !(m() && e.sidebar?.hiddenOnMobile)).filter((e) => e.sidebar?.fullScreen !== !0 && e.sidebar?.renderIn !== "main").map((e) => ({
+  })) : []), H = g(() => c() ? [] : r.sidebarContent ? [] : s ? s.sidebarItems().filter((e) => !(d() && e.sidebar?.hiddenOnMobile)).filter((e) => e.sidebar?.fullScreen !== !0 && e.sidebar?.renderIn !== "main").map((e) => ({
     id: e.id,
-    render: () => n(y, {
+    render: () => o(k, {
       get component() {
         return e.component;
       }
     })
-  })) : []), N = (e) => {
-    if (!b()) {
+  })) : []), _ = (e) => {
+    if (!c()) {
       if (r.sidebarContent) return r.sidebarContent(e);
-      if (a)
-        return n(ie, {
+      if (s)
+        return o(me, {
           get views() {
-            return P();
+            return H();
           },
           activeId: e
         });
     }
-  }, x = v(() => b() ? !0 : a ? a.getComponent(l.sidebarActiveTab())?.sidebar?.fullScreen ?? !1 : !1), F = v(() => {
-    if (b()) return !0;
-    if (!a) return !1;
-    const e = a.getComponent(l.sidebarActiveTab());
+  }, $ = g(() => c() ? !0 : s ? s.getComponent(i.sidebarActiveTab())?.sidebar?.fullScreen ?? !1 : !1), E = g(() => {
+    if (c()) return !0;
+    if (!s) return !1;
+    const e = s.getComponent(i.sidebarActiveTab());
     return e?.sidebar ? e.sidebar.fullScreen === !0 || e.sidebar.renderIn === "main" : !1;
   });
-  w(() => {
-    m() && x() && h(!1);
+  B(() => {
+    d() && $() && v(!1);
   });
-  const H = v(() => {
+  const D = g(() => {
     if (r.bottomBarItems) return r.bottomBarItems;
-    if (!a) return;
-    const e = [...a.statusBarItems()].sort((i, t) => (i.order ?? 100) - (t.order ?? 100)), s = e.filter((i) => i.position === "left"), o = e.filter((i) => i.position === "right");
+    if (!s) return;
+    const e = [...s.statusBarItems()].sort((n, t) => (n.order ?? 100) - (t.order ?? 100)), a = e.filter((n) => n.position === "left"), l = e.filter((n) => n.position === "right");
     return [(() => {
-      var i = O();
-      return c(i, n(p, {
-        each: s,
-        children: (t) => n(y, {
+      var n = P();
+      return m(n, o(N, {
+        each: a,
+        children: (t) => o(k, {
           get component() {
             return t.component;
           }
         })
-      })), i;
+      })), n;
     })(), (() => {
-      var i = O();
-      return c(i, n(p, {
-        each: o,
-        children: (t) => n(y, {
+      var n = P();
+      return m(n, o(N, {
+        each: l,
+        children: (t) => o(k, {
           get component() {
             return t.component;
           }
         })
-      })), i;
+      })), n;
     })()];
   });
-  w(() => {
+  B(() => {
     const e = C();
     if (!e.length) return;
-    if (!l.sidebarActiveTab()) {
-      const o = e.find((i) => !i.onClick);
-      if (!o) return;
-      M(o.id);
+    if (!i.sidebarActiveTab()) {
+      const l = e.find((n) => !n.onClick);
+      if (!l) return;
+      x(l.id);
     }
   });
-  const $ = (e) => {
-    const s = b() ? !0 : a?.getComponent(e)?.sidebar?.fullScreen ?? !1, {
-      nextActiveId: o,
-      nextMobileSidebarOpen: i
-    } = re({
+  const O = (e) => {
+    const a = c() ? !0 : s?.getComponent(e)?.sidebar?.fullScreen ?? !1, {
+      nextActiveId: l,
+      nextMobileSidebarOpen: n
+    } = ue({
       clickedId: e,
-      activeId: l.sidebarActiveTab(),
-      mobileSidebarOpen: k(),
-      clickedIsFullScreen: s
+      activeId: i.sidebarActiveTab(),
+      mobileSidebarOpen: y(),
+      clickedIsFullScreen: a
     });
-    l.sidebarActiveTab() !== o && M(o), h(i);
-  }, R = (e) => {
+    i.sidebarActiveTab() !== l && x(l), v(n);
+  }, Q = (e) => {
     if (e.onClick) {
-      q(() => e.onClick());
+      re(() => e.onClick());
       return;
     }
-    $(e.id);
-  }, W = v(() => {
+    O(e.id);
+  }, K = g(() => {
     const e = r.topBarActions;
-    if (!m() || (r.activityBottomItemsMobileMode ?? "hidden") !== "topBar") return e;
-    const o = r.activityBottomItems ?? [];
-    return o.length ? [n(p, {
-      each: o,
-      children: (i) => n(X, {
+    if (!d() || (r.activityBottomItemsMobileMode ?? "hidden") !== "topBar") return e;
+    const l = r.activityBottomItems ?? [];
+    return l.length ? [o(N, {
+      each: l,
+      children: (n) => o(le, {
         get label() {
-          return i.label;
+          return n.label;
         },
-        onClick: () => R(i),
+        onClick: () => Q(n),
         get children() {
-          return n(y, {
+          return o(k, {
             get component() {
-              return i.icon;
+              return n.icon;
             },
             class: "w-4 h-4"
           });
         }
       })
     }), e] : e;
-  }), D = () => b() ? !0 : l.sidebarCollapsed();
-  return (() => {
-    var e = ae(), s = e.firstChild, o = s.firstChild, i = o.firstChild;
-    return c(e, n(U, {
+  }), L = () => c() ? !0 : i.sidebarCollapsed(), V = () => z() ?? i.sidebarWidth(), j = () => {
+    A(i.sidebarWidth());
+  }, q = (e) => {
+    A((a) => i.clampSidebarWidth((a ?? i.sidebarWidth()) + e));
+  }, G = () => {
+    const e = z();
+    e !== null && (i.setSidebarWidth(e), A(null));
+  };
+  return te({
+    open: () => d() && y() && !c(),
+    root: () => M,
+    onClose: () => v(!1),
+    lockBodyScroll: !0,
+    trapFocus: !0,
+    closeOnEscape: !0,
+    blockHotkeys: !0,
+    blockWheel: "outside",
+    blockTouchMove: "outside",
+    autoFocus: !1,
+    restoreFocus: !0
+  }), (() => {
+    var e = he(), a = e.firstChild, l = a.firstChild, n = l.firstChild;
+    return m(e, o(oe, {
       get logo() {
         return r.logo;
       },
       get actions() {
-        return W();
+        return K();
       },
       get class() {
         return r.slotClassNames?.topBar;
       }
-    }), s), c(s, n(u, {
+    }), a), m(a, o(f, {
       get when() {
-        return !m();
+        return !d();
       },
       get children() {
-        return [n(u, {
+        return [o(f, {
           get when() {
             return C().length > 0;
           },
           get children() {
-            return n(ee, {
+            return o(de, {
               get items() {
                 return C();
               },
@@ -174,117 +196,119 @@ function Ae(r) {
                 return r.activityBottomItems;
               },
               get activeId() {
-                return l.sidebarActiveTab();
+                return i.sidebarActiveTab();
               },
-              onActiveChange: M,
+              onActiveChange: x,
               get collapsed() {
-                return D();
+                return L();
               },
               get onCollapsedChange() {
-                return T(() => !!b())() ? void 0 : l.setSidebarCollapsed;
+                return p(() => !!c())() ? void 0 : i.setSidebarCollapsed;
               },
               get class() {
                 return r.slotClassNames?.activityBar;
               }
             });
           }
-        }), n(u, {
+        }), o(f, {
           get when() {
-            return !b();
+            return !c();
           },
           get children() {
-            return n(J, {
+            return o(ne, {
               get width() {
-                return l.sidebarWidth();
+                return V();
               },
               get collapsed() {
-                return l.sidebarCollapsed() || x();
+                return i.sidebarCollapsed() || $();
               },
               get resizer() {
-                return n(_, {
+                return o(W, {
                   direction: "horizontal",
-                  onResize: (t) => l.setSidebarWidth(l.sidebarWidth() + t)
+                  onResize: q,
+                  onResizeStart: j,
+                  onResizeEnd: G
                 });
               },
               get class() {
                 return r.slotClassNames?.sidebar;
               },
               get children() {
-                return N(l.sidebarActiveTab());
+                return _(i.sidebarActiveTab());
               }
             });
           }
         })];
       }
-    }), o), c(s, n(u, {
+    }), l), m(a, o(f, {
       get when() {
-        return T(() => !!(m() && k()))() && !b();
+        return p(() => !!(d() && y()))() && !c();
       },
       get children() {
         return [(() => {
-          var t = ne();
-          return t.$$click = () => h(!1), A(() => f(t, g("absolute inset-0 z-40 bg-black/30 cursor-pointer", r.slotClassNames?.mobileSidebarBackdrop))), t;
+          var t = be();
+          return t.$$click = () => v(!1), T(() => h(t, S("absolute inset-0 z-40 bg-black/30 cursor-pointer", r.slotClassNames?.mobileSidebarBackdrop))), t;
         })(), (() => {
-          var t = le(), d = t.firstChild;
-          return c(d, () => N(l.sidebarActiveTab())), A(() => f(t, g("absolute left-0 top-0 bottom-0 z-50", "w-72 max-w-[80vw]", "bg-sidebar border-r border-sidebar-border", "shadow-xl", "animate-in slide-in-from-left duration-200", r.slotClassNames?.mobileSidebarDrawer))), t;
+          var t = fe(), u = t.firstChild, b = M;
+          return typeof b == "function" ? U(b, t) : M = t, m(u, () => _(i.sidebarActiveTab())), T(() => h(t, S("absolute left-0 top-0 bottom-0 z-50", "w-72 max-w-[80vw]", "bg-sidebar border-r border-sidebar-border", "shadow-xl", "animate-in slide-in-from-left duration-200", r.slotClassNames?.mobileSidebarDrawer))), t;
         })()];
       }
-    }), o), c(i, () => r.children), c(o, n(u, {
+    }), l), m(n, () => r.children), m(l, o(f, {
       get when() {
-        return T(() => !!(!m() && l.terminalOpened()))() && r.terminalPanel;
+        return p(() => !!(!d() && i.terminalOpened()))() && r.terminalPanel;
       },
       get children() {
-        var t = oe();
-        return c(t, n(_, {
+        var t = ve();
+        return m(t, o(W, {
           direction: "vertical",
-          onResize: (d) => l.setTerminalHeight(l.terminalHeight() - d)
-        }), null), c(t, () => r.terminalPanel, null), A((d) => {
-          var S = g("relative shrink-0 border-t border-border bg-terminal-background overflow-hidden", r.slotClassNames?.terminalPanel), I = `${l.terminalHeight()}px`;
-          return S !== d.e && f(t, d.e = S), I !== d.t && E(t, "height", d.t = I), d;
+          onResize: (u) => i.setTerminalHeight(i.terminalHeight() - u)
+        }), null), m(t, () => r.terminalPanel, null), T((u) => {
+          var b = S("relative shrink-0 border-t border-border bg-terminal-background overflow-hidden", r.slotClassNames?.terminalPanel), w = `${i.terminalHeight()}px`;
+          return b !== u.e && h(t, u.e = b), w !== u.t && J(t, "height", u.t = w), u;
         }, {
           e: void 0,
           t: void 0
         }), t;
       }
-    }), null), c(e, n(u, {
+    }), null), m(e, o(f, {
       get when() {
-        return !m();
+        return !d();
       },
       get children() {
-        return n(Y, {
+        return o(ae, {
           get class() {
             return r.slotClassNames?.bottomBar;
           },
           get children() {
-            return H();
+            return D();
           }
         });
       }
-    }), null), c(e, n(u, {
+    }), null), m(e, o(f, {
       get when() {
-        return T(() => !!m())() && C().length > 0;
+        return p(() => !!d())() && C().length > 0;
       },
       get children() {
-        return n(Z, {
+        return o(se, {
           get items() {
             return C();
           },
           get activeId() {
-            return te({
-              activeId: l.sidebarActiveTab(),
-              mobileSidebarOpen: k(),
-              activeIsFullScreen: x(),
-              activeIsPage: F()
+            return ce({
+              activeId: i.sidebarActiveTab(),
+              mobileSidebarOpen: y(),
+              activeIsFullScreen: $(),
+              activeIsPage: E()
             });
           },
-          onSelect: $,
+          onSelect: O,
           get class() {
             return r.slotClassNames?.mobileTabBar;
           }
         });
       }
-    }), null), A((t) => {
-      var d = g(
+    }), null), T((t) => {
+      var u = S(
         // Use dvh when supported to avoid mobile browser UI causing layout jumps.
         "h-screen h-[100dvh] w-full flex flex-col overflow-hidden",
         "bg-background text-foreground",
@@ -292,8 +316,8 @@ function Ae(r) {
         "overscroll-none",
         r.slotClassNames?.root,
         r.class
-      ), S = g("flex-1 min-w-0 flex flex-col overflow-hidden", r.slotClassNames?.contentArea), I = g("flex-1 min-h-0 overflow-auto overscroll-contain", r.slotClassNames?.main);
-      return d !== t.e && f(e, t.e = d), S !== t.t && f(o, t.t = S), I !== t.a && f(i, t.a = I), t;
+      ), b = S("flex-1 min-w-0 flex flex-col overflow-hidden", r.slotClassNames?.contentArea), w = S("flex-1 min-h-0 overflow-auto overscroll-contain", r.slotClassNames?.main);
+      return u !== t.e && h(e, t.e = u), b !== t.t && h(l, t.t = b), w !== t.a && h(n, t.a = w), t;
     }, {
       e: void 0,
       t: void 0,
@@ -301,7 +325,7 @@ function Ae(r) {
     }), e;
   })();
 }
-Q(["click"]);
+X(["click"]);
 export {
-  Ae as Shell
+  Re as Shell
 };

package/dist/components/layout/Sidebar.js

@@ -1,14 +1,14 @@
-import { insert as l, effect as c, className as o, setStyleProperty as u, memo as h, template as d, delegateEvents as $ } from "solid-js/web";
+import { insert as l, effect as c, className as o, setStyleProperty as u, memo as x, template as d, delegateEvents as g } from "solid-js/web";
 import "solid-js";
 import { cn as s } from "../../utils/cn.js";
-var g = /* @__PURE__ */ d('<aside data-floe-shell-slot=sidebar><div class="flex-1 overflow-auto overscroll-contain">'), m = /* @__PURE__ */ d("<div>"), _ = /* @__PURE__ */ d("<section><div class=flex-1>"), w = /* @__PURE__ */ d('<div class="flex items-center justify-between px-2.5 py-2 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground/60"><span>'), y = /* @__PURE__ */ d('<button type=button><span class="flex-1 truncate text-left">'), S = /* @__PURE__ */ d('<span class="flex-shrink-0 w-4 h-4 opacity-60">');
+var $ = /* @__PURE__ */ d('<aside data-floe-shell-slot=sidebar data-floe-geometry-surface=shell-sidebar><div class="flex-1 overflow-auto overscroll-contain">'), m = /* @__PURE__ */ d("<div>"), _ = /* @__PURE__ */ d("<section><div class=flex-1>"), w = /* @__PURE__ */ d('<div class="flex items-center justify-between px-2.5 py-2 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground/60"><span>'), y = /* @__PURE__ */ d('<button type=button><span class="flex-1 truncate text-left">'), S = /* @__PURE__ */ d('<span class="flex-shrink-0 w-4 h-4 opacity-60">');
 function j(e) {
   const t = () => e.collapsed ?? !1, a = () => e.width ?? 350;
   return (() => {
-    var i = g(), n = i.firstChild;
+    var i = $(), n = i.firstChild;
     return l(n, () => e.children), l(i, () => e.resizer, null), c((r) => {
-      var v = s("relative h-full flex flex-col shrink-0 min-h-0", "bg-sidebar text-sidebar-foreground", "border-r border-sidebar-border", "overflow-hidden", "transition-[width] duration-150 ease-out", e.class), f = t() ? "0px" : `${a()}px`, b = t() ? "hidden" : "visible", x = t() ? "0px" : void 0;
-      return v !== r.e && o(i, r.e = v), f !== r.t && u(i, "width", r.t = f), b !== r.a && u(i, "visibility", r.a = b), x !== r.o && u(i, "border-right-width", r.o = x), r;
+      var f = s("relative h-full flex flex-col shrink-0 min-h-0", "bg-sidebar text-sidebar-foreground", "border-r border-sidebar-border", "overflow-hidden", "transition-[width] duration-150 ease-out", e.class), v = t() ? "0px" : `${a()}px`, b = t() ? "hidden" : "visible", h = t() ? "0px" : void 0;
+      return f !== r.e && o(i, r.e = f), v !== r.t && u(i, "width", r.t = v), b !== r.a && u(i, "visibility", r.a = b), h !== r.o && u(i, "border-right-width", r.o = h), r;
     }, {
       e: void 0,
       t: void 0,
@@ -33,7 +33,7 @@ function L(e) {
   return (() => {
     var t = _(), a = t.firstChild;
     return l(t, (() => {
-      var i = h(() => !!e.title);
+      var i = x(() => !!e.title);
       return () => i() && (() => {
         var n = w(), r = n.firstChild;
         return l(r, () => e.title), l(n, () => e.actions, null), n;
@@ -45,7 +45,7 @@ function N(e) {
   return (() => {
     var t = y(), a = t.firstChild;
     return t.$$click = () => e.onClick?.(), l(t, (() => {
-      var i = h(() => !!e.icon);
+      var i = x(() => !!e.icon);
       return () => i() && (() => {
         var n = S();
         return l(n, () => e.icon), n;
@@ -59,7 +59,7 @@ function N(e) {
     }), t;
   })();
 }
-$(["click"]);
+g(["click"]);
 export {
   j as Sidebar,
   z as SidebarContent,

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

@@ -7,6 +7,8 @@ export interface SidebarPaneProps {
     open?: boolean;
     resizable?: boolean;
     onResize?: (delta: number) => void;
+    onResizeStart?: () => void;
+    onResizeEnd?: () => void;
     onClose?: () => void;
     mobileOverlay?: boolean;
     mobileBackdrop?: boolean;

package/dist/components/layout/SidebarPane.js

@@ -1,25 +1,25 @@
-import { insert as i, createComponent as o, use as M, effect as k, className as a, setStyleProperty as C, template as s, delegateEvents as S } from "solid-js/web";
+import { insert as i, createComponent as o, use as B, effect as k, className as s, setStyleProperty as C, template as a, delegateEvents as M } from "solid-js/web";
 import { Show as l } from "solid-js";
 import { useLayout as j } from "../../context/LayoutContext.js";
 import { cn as d } from "../../utils/cn.js";
 import { ResizeHandle as A } from "./ResizeHandle.js";
-var O = /* @__PURE__ */ s('<div class="min-w-0 flex items-center gap-1.5">'), P = /* @__PURE__ */ s('<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">'), E = /* @__PURE__ */ s('<div class="flex min-w-0 items-center gap-1.5">'), H = /* @__PURE__ */ s('<aside><div><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"></span></div><div>'), L = /* @__PURE__ */ s("<div>");
+var E = /* @__PURE__ */ a('<div class="min-w-0 flex items-center gap-1.5">'), O = /* @__PURE__ */ a('<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">'), P = /* @__PURE__ */ a('<div class="flex min-w-0 items-center gap-1.5">'), H = /* @__PURE__ */ a('<aside data-floe-geometry-surface=sidebar-pane><div><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"></span></div><div>'), L = /* @__PURE__ */ a("<div>");
 function I(e) {
-  const z = j(), v = () => z.isMobile(), m = () => e.width ?? 240, c = () => e.open ?? !0, u = () => v() && e.mobileOverlay !== !1 && c(), w = () => u() && typeof e.onClose == "function", _ = () => u() && e.mobileBackdrop !== !1 && typeof e.onClose == "function", R = () => e.resizable && c() && !v() && typeof e.onResize == "function";
+  const z = j(), m = () => z.isMobile(), v = () => e.width ?? 240, c = () => e.open ?? !0, u = () => m() && e.mobileOverlay !== !1 && c(), w = () => u() && typeof e.onClose == "function", R = () => u() && e.mobileBackdrop !== !1 && typeof e.onClose == "function", _ = () => e.resizable && c() && !m() && typeof e.onResize == "function";
   return [(() => {
-    var n = H(), h = n.firstChild, f = h.firstChild, B = f.firstChild, b = f.nextSibling;
-    return i(B, () => e.title), i(f, o(l, {
+    var n = H(), h = n.firstChild, f = h.firstChild, S = f.firstChild, b = f.nextSibling;
+    return i(S, () => e.title), i(f, o(l, {
       get when() {
         return e.headerActions || w();
       },
       get children() {
-        var t = E();
+        var t = P();
         return i(t, o(l, {
           get when() {
             return e.headerActions;
           },
           get children() {
-            var r = O();
+            var r = E();
             return i(r, () => e.headerActions), r;
           }
         }), null), i(t, o(l, {
@@ -27,24 +27,30 @@ function I(e) {
             return w();
           },
           get children() {
-            var r = P();
+            var r = O();
             return r.$$click = () => e.onClose?.(), r;
           }
         }), null), t;
       }
-    }), null), M((t) => e.bodyRef?.(t), b), i(b, () => e.children), i(n, o(l, {
+    }), null), B((t) => e.bodyRef?.(t), b), i(b, () => e.children), i(n, o(l, {
       get when() {
-        return R();
+        return _();
       },
       get children() {
         return o(A, {
           direction: "horizontal",
-          onResize: (t) => e.onResize?.(t)
+          onResize: (t) => e.onResize?.(t),
+          get onResizeStart() {
+            return e.onResizeStart;
+          },
+          get onResizeEnd() {
+            return e.onResizeEnd;
+          }
         });
       }
     }), null), k((t) => {
-      var r = d("flex-shrink-0 border-r border-border bg-sidebar relative", "transition-all duration-200 ease-out", "overflow-hidden", u() && "absolute inset-y-0 left-0 z-10 shadow-lg", e.class), g = c() ? `${m()}px` : "0px", x = d("h-full flex flex-col", e.innerClass), y = `${m()}px`, $ = d("flex-1 min-h-0 overflow-auto", e.bodyClass);
-      return r !== t.e && a(n, t.e = r), g !== t.t && C(n, "width", t.t = g), x !== t.a && a(h, t.a = x), y !== t.o && C(h, "width", t.o = y), $ !== t.i && a(b, t.i = $), t;
+      var r = d("flex-shrink-0 border-r border-border bg-sidebar relative", "transition-[width,transform,box-shadow] duration-200 ease-out", "overflow-hidden", u() && "absolute inset-y-0 left-0 z-10 shadow-lg", e.class), g = c() ? `${v()}px` : "0px", x = d("h-full flex flex-col", e.innerClass), y = `${v()}px`, $ = d("flex-1 min-h-0 overflow-auto", e.bodyClass);
+      return r !== t.e && s(n, t.e = r), g !== t.t && C(n, "width", t.t = g), x !== t.a && s(h, t.a = x), y !== t.o && C(h, "width", t.o = y), $ !== t.i && s(b, t.i = $), t;
     }, {
       e: void 0,
       t: void 0,
@@ -54,15 +60,15 @@ function I(e) {
     }), n;
   })(), o(l, {
     get when() {
-      return _();
+      return R();
     },
     get children() {
       var n = L();
-      return n.$$click = () => e.onClose?.(), k(() => a(n, d("absolute inset-0 bg-background/60 backdrop-blur-sm z-[9]", e.backdropClass))), n;
+      return n.$$click = () => e.onClose?.(), k(() => s(n, d("absolute inset-0 bg-background/60 backdrop-blur-sm z-[9]", e.backdropClass))), n;
     }
   })];
 }
-S(["click"]);
+M(["click"]);
 export {
   I as SidebarPane
 };