@floegence/floe-webapp-core 0.35.32 → 0.35.34

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

@@ -2,6 +2,12 @@ import type { JSX, Accessor, Component } from 'solid-js';
 export type FileItemIconOverride = Component<{
     class?: string;
 }> | JSX.Element;
+export type FileItemLinkKind = 'symbolic';
+export type FileItemLinkTargetType = 'file' | 'folder' | 'broken' | 'unknown';
+export interface FileItemLinkMeta {
+    kind: FileItemLinkKind;
+    targetType: FileItemLinkTargetType;
+}
 /**
  * Represents a file or folder item in the browser
  */
@@ -15,6 +21,8 @@ export interface FileItem {
     extension?: string;
     children?: FileItem[];
     icon?: FileItemIconOverride;
+    /** Optional link metadata for rendering symbolic links distinctly from plain entries. */
+    link?: FileItemLinkMeta;
 }
 /**
  * View mode for the file browser main content area
@@ -42,6 +50,12 @@ export interface FileListColumnRatios {
  * Built-in context menu action types
  */
 export type ContextMenuActionType = 'duplicate' | 'copy-name' | 'ask-agent' | 'copy-to' | 'move-to' | 'delete' | 'rename' | 'custom';
+export type ContextMenuTargetKind = 'item' | 'directory-background';
+export type ContextMenuSource = 'list' | 'grid' | 'tree' | 'background' | 'custom';
+export interface ContextMenuDirectory {
+    path: string;
+    item?: FileItem;
+}
 /**
  * Context menu item definition
  */
@@ -63,7 +77,9 @@ export interface ContextMenuItem {
     /** Keyboard shortcut hint (display only) */
     shortcut?: string;
     /** Custom handler for 'custom' type actions */
-    onAction?: (items: FileItem[]) => void;
+    onAction?: (items: FileItem[], event?: ContextMenuEvent) => void;
+    /** Cascade submenu items */
+    children?: ContextMenuItem[];
 }
 /**
  * Context menu event with position and target items
@@ -75,6 +91,12 @@ export interface ContextMenuEvent {
     y: number;
     /** Target file/folder items */
     items: FileItem[];
+    /** Semantic menu target category */
+    targetKind: ContextMenuTargetKind;
+    /** Source surface that opened the menu */
+    source: ContextMenuSource;
+    /** Resolved directory scope for directory-scoped actions */
+    directory: ContextMenuDirectory | null;
 }
 /**
  * Callbacks for context menu actions

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

@@ -1,5 +1,6 @@
 import { type JSX } from 'solid-js';
 import { type ActivityBarItem } from './ActivityBar';
+import type { SidebarVisibilityMotion } from '../../context/LayoutContext';
 export interface ShellSlotClassNames {
     root?: string;
     topBar?: string;
@@ -31,6 +32,13 @@ export interface ShellProps {
     topBarActions?: JSX.Element;
     bottomBarItems?: JSX.Element;
     sidebarContent?: (activeTab: string) => JSX.Element;
+    resolveSidebarVisibilityMotion?: (args: {
+        currentActiveId: string;
+        nextActiveId: string;
+        openSidebar: boolean;
+        source: 'activity-bar';
+        isMobile: boolean;
+    }) => SidebarVisibilityMotion | undefined;
     /**
      * Sidebar rendering mode.
      *

package/dist/components/layout/Shell.js

@@ -1,161 +1,177 @@
-import { createComponent as o, Dynamic as p, insert as d, memo as A, effect as N, className as h, setAttribute as L, setStyleProperty as ie, template as T, use as ne, delegateEvents as oe } from "solid-js/web";
-import { createSignal as Q, createEffect as x, createMemo as w, For as W, Show as C } from "solid-js";
+import { createComponent as o, Dynamic as T, insert as c, memo as p, effect as N, className as h, setAttribute as L, setStyleProperty as ie, template as x, use as ne, delegateEvents as oe } from "solid-js/web";
+import { createSignal as D, createEffect as I, createMemo as w, For as P, Show as S } from "solid-js";
 import { useLayout as ae } from "../../context/LayoutContext.js";
 import { useResolvedFloeConfig as le } from "../../context/FloeConfigContext.js";
 import { useMediaQuery as se } from "../../hooks/useMediaQuery.js";
 import { useOverlayMask as de } from "../../hooks/useOverlayMask.js";
-import { cn as S } from "../../utils/cn.js";
-import { deferNonBlocking as ce } from "../../utils/defer.js";
+import { cn as C } from "../../utils/cn.js";
+import { deferAfterPaint as ce, deferNonBlocking as be } from "../../utils/defer.js";
 import { useComponentRegistry as ue } from "../../context/ComponentRegistry.js";
-import { Sidebar as be } from "./Sidebar.js";
-import { TopBar as me } from "./TopBar.js";
-import { TopBarIconButton as fe } from "./TopBarIconButton.js";
-import { BottomBar as ve } from "./BottomBar.js";
-import { MobileTabBar as ge } from "./MobileTabBar.js";
-import { ActivityBar as he } from "./ActivityBar.js";
-import { ResizeHandle as K } from "./ResizeHandle.js";
-import { resolveMobileTabActiveId as Ce, resolveMobileTabSelect as Se } from "./mobileTabs.js";
-import { KeepAliveStack as ye } from "./KeepAliveStack.js";
-var V = /* @__PURE__ */ T('<div class="flex items-center gap-2">'), we = /* @__PURE__ */ T("<div data-floe-shell-slot=mobile-sidebar-backdrop>"), Ie = /* @__PURE__ */ T('<div data-floe-shell-slot=mobile-sidebar-drawer tabindex=-1 role=dialog aria-modal=true><div class="h-full overflow-auto overscroll-contain">'), Be = /* @__PURE__ */ T("<div data-floe-shell-slot=terminal-panel style=border-top-color:var(--terminal-panel-border)>"), ke = /* @__PURE__ */ T('<div data-floe-shell><a></a><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 tabindex=-1>');
-function Qe(r) {
-  const n = ae(), P = le(), c = se(P.config.layout.mobileQuery), [M, y] = Q(!1), [F, z] = Q(null);
+import { Sidebar as me } from "./Sidebar.js";
+import { TopBar as fe } from "./TopBar.js";
+import { TopBarIconButton as ve } from "./TopBarIconButton.js";
+import { BottomBar as ge } from "./BottomBar.js";
+import { MobileTabBar as he } from "./MobileTabBar.js";
+import { ActivityBar as Se } from "./ActivityBar.js";
+import { ResizeHandle as Q } from "./ResizeHandle.js";
+import { resolveMobileTabActiveId as Ce, resolveMobileTabSelect as ye } from "./mobileTabs.js";
+import { KeepAliveStack as Ie } from "./KeepAliveStack.js";
+import { resolveShellSidebarActiveTabChange as we } from "./sidebarVisibilityMotion.js";
+var q = /* @__PURE__ */ x('<div class="flex items-center gap-2">'), Me = /* @__PURE__ */ x("<div data-floe-shell-slot=mobile-sidebar-backdrop>"), Be = /* @__PURE__ */ x('<div data-floe-shell-slot=mobile-sidebar-drawer tabindex=-1 role=dialog aria-modal=true><div class="h-full overflow-auto overscroll-contain">'), ke = /* @__PURE__ */ x("<div data-floe-shell-slot=terminal-panel style=border-top-color:var(--terminal-panel-border)>"), xe = /* @__PURE__ */ x('<div data-floe-shell><a></a><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 tabindex=-1>');
+function Ke(r) {
+  const i = ae(), W = le(), s = se(W.config.layout.mobileQuery), [A, y] = D(!1), [F, z] = D(null);
   let $;
-  const u = () => r.sidebarMode === "hidden", s = (() => {
+  const b = () => r.sidebarMode === "hidden", d = (() => {
     try {
       return ue();
     } catch {
       return null;
     }
-  })(), O = (e, l) => {
-    const a = s?.getComponent(e)?.sidebar?.fullScreen ?? !1, i = u() ? !1 : l?.openSidebar ?? !a;
-    n.setSidebarActiveTab(e, {
-      openSidebar: i
+  })(), O = (e, a) => {
+    const l = d?.getComponent(e)?.sidebar?.fullScreen ?? !1, {
+      openSidebar: n,
+      visibilityMotion: u
+    } = we({
+      currentActiveId: i.sidebarActiveTab(),
+      nextActiveId: e,
+      requestedOpenSidebar: a?.openSidebar,
+      sidebarHidden: b(),
+      nextActiveFullScreen: l,
+      isMobile: s(),
+      resolveSidebarVisibilityMotion: r.resolveSidebarVisibilityMotion
+    });
+    i.setSidebarActiveTab(e, {
+      openSidebar: n,
+      visibilityMotion: u
     });
   };
-  x(() => {
-    u() && y(!1);
-  }), x(() => {
-    const e = c();
-    n.isMobile() !== e && n.setIsMobile(e);
-  }), x(() => {
-    c() || y(!1);
+  I(() => {
+    b() && y(!1);
+  }), I(() => {
+    const e = s();
+    i.isMobile() !== e && i.setIsMobile(e);
+  }), I(() => {
+    s() || y(!1);
+  }), I(() => {
+    const e = i.sidebarVisibilityMotion(), a = i.sidebarVisibilityMotionRevision();
+    e === "instant" && ce(() => i.clearSidebarVisibilityMotion(a));
   });
-  const I = w(() => r.activityItems ? r.activityItems : s ? s.sidebarItems().filter((e) => !!e.icon).filter((e) => !(c() && e.sidebar?.hiddenOnMobile)).map((e) => ({
+  const M = w(() => r.activityItems ? r.activityItems : d ? d.sidebarItems().filter((e) => !!e.icon).filter((e) => !(s() && 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")
-  })) : []), j = w(() => u() ? [] : r.sidebarContent ? [] : s ? s.sidebarItems().filter((e) => !(c() && e.sidebar?.hiddenOnMobile)).filter((e) => e.sidebar?.fullScreen !== !0 && e.sidebar?.renderIn !== "main").map((e) => ({
+  })) : []), K = w(() => b() ? [] : r.sidebarContent ? [] : d ? d.sidebarItems().filter((e) => !(s() && e.sidebar?.hiddenOnMobile)).filter((e) => e.sidebar?.fullScreen !== !0 && e.sidebar?.renderIn !== "main").map((e) => ({
     id: e.id,
-    render: () => o(p, {
+    render: () => o(T, {
       get component() {
         return e.component;
       }
     })
   })) : []), H = (e) => {
-    if (!u()) {
+    if (!b()) {
       if (r.sidebarContent) return r.sidebarContent(e);
-      if (s)
-        return o(ye, {
+      if (d)
+        return o(Ie, {
           get views() {
-            return j();
+            return K();
           },
           activeId: e
         });
     }
-  }, R = w(() => u() ? !0 : s ? s.getComponent(n.sidebarActiveTab())?.sidebar?.fullScreen ?? !1 : !1), q = w(() => {
-    if (u()) return !0;
-    if (!s) return !1;
-    const e = s.getComponent(n.sidebarActiveTab());
+  }, R = w(() => b() ? !0 : d ? d.getComponent(i.sidebarActiveTab())?.sidebar?.fullScreen ?? !1 : !1), j = w(() => {
+    if (b()) return !0;
+    if (!d) return !1;
+    const e = d.getComponent(i.sidebarActiveTab());
     return e?.sidebar ? e.sidebar.fullScreen === !0 || e.sidebar.renderIn === "main" : !1;
   });
-  x(() => {
-    c() && R() && y(!1);
+  I(() => {
+    s() && R() && y(!1);
   });
   const G = w(() => {
     if (r.bottomBarItems) return r.bottomBarItems;
-    if (!s) return;
-    const e = [...s.statusBarItems()].sort((i, v) => (i.order ?? 100) - (v.order ?? 100)), l = e.filter((i) => i.position === "left"), a = e.filter((i) => i.position === "right");
+    if (!d) return;
+    const e = [...d.statusBarItems()].sort((n, u) => (n.order ?? 100) - (u.order ?? 100)), a = e.filter((n) => n.position === "left"), l = e.filter((n) => n.position === "right");
     return [(() => {
-      var i = V();
-      return d(i, o(W, {
-        each: l,
-        children: (v) => o(p, {
+      var n = q();
+      return c(n, o(P, {
+        each: a,
+        children: (u) => o(T, {
           get component() {
-            return v.component;
+            return u.component;
           }
         })
-      })), i;
+      })), n;
     })(), (() => {
-      var i = V();
-      return d(i, o(W, {
-        each: a,
-        children: (v) => o(p, {
+      var n = q();
+      return c(n, o(P, {
+        each: l,
+        children: (u) => o(T, {
           get component() {
-            return v.component;
+            return u.component;
           }
         })
-      })), i;
+      })), n;
     })()];
   });
-  x(() => {
-    const e = I();
+  I(() => {
+    const e = M();
     if (!e.length) return;
-    if (!n.sidebarActiveTab()) {
-      const a = e.find((i) => !i.onClick);
-      if (!a) return;
-      O(a.id);
+    if (!i.sidebarActiveTab()) {
+      const l = e.find((n) => !n.onClick);
+      if (!l) return;
+      O(l.id);
     }
   });
-  const E = (e) => {
-    const l = u() ? !0 : s?.getComponent(e)?.sidebar?.fullScreen ?? !1, {
-      nextActiveId: a,
-      nextMobileSidebarOpen: i
-    } = Se({
+  const V = (e) => {
+    const a = b() ? !0 : d?.getComponent(e)?.sidebar?.fullScreen ?? !1, {
+      nextActiveId: l,
+      nextMobileSidebarOpen: n
+    } = ye({
       clickedId: e,
-      activeId: n.sidebarActiveTab(),
-      mobileSidebarOpen: M(),
-      clickedIsFullScreen: l
+      activeId: i.sidebarActiveTab(),
+      mobileSidebarOpen: A(),
+      clickedIsFullScreen: a
     });
-    n.sidebarActiveTab() !== a && O(a), y(i);
+    i.sidebarActiveTab() !== l && O(l), y(n);
   }, J = (e) => {
     if (e.onClick) {
-      ce(() => e.onClick());
+      be(() => e.onClick());
       return;
     }
-    E(e.id);
+    V(e.id);
   }, U = w(() => {
     const e = r.topBarActions;
-    if (!c() || (r.activityBottomItemsMobileMode ?? "hidden") !== "topBar") return e;
-    const a = r.activityBottomItems ?? [];
-    return a.length ? [o(W, {
-      each: a,
-      children: (i) => o(fe, {
+    if (!s() || (r.activityBottomItemsMobileMode ?? "hidden") !== "topBar") return e;
+    const l = r.activityBottomItems ?? [];
+    return l.length ? [o(P, {
+      each: l,
+      children: (n) => o(ve, {
         get label() {
-          return i.label;
+          return n.label;
         },
-        onClick: () => J(i),
+        onClick: () => J(n),
         get children() {
-          return o(p, {
+          return o(T, {
             get component() {
-              return i.icon;
+              return n.icon;
             },
             class: "w-4 h-4"
           });
         }
       })
     }), e] : e;
-  }), X = () => u() ? !0 : n.sidebarCollapsed(), Y = () => F() ?? n.sidebarWidth(), f = () => P.config.accessibility, Z = () => {
-    z(n.sidebarWidth());
+  }), X = () => b() ? !0 : i.sidebarCollapsed(), Y = () => F() ?? i.sidebarWidth(), v = () => W.config.accessibility, Z = () => {
+    z(i.sidebarWidth());
   }, ee = (e) => {
-    z((l) => n.clampSidebarWidth((l ?? n.sidebarWidth()) + e));
+    z((a) => i.clampSidebarWidth((a ?? i.sidebarWidth()) + e));
   }, te = () => {
     const e = F();
-    e !== null && (n.setSidebarWidth(e), z(null));
+    e !== null && (i.setSidebarWidth(e), z(null));
   };
   de({
-    open: () => c() && M() && !u(),
+    open: () => s() && A() && !b(),
     root: () => $,
     onClose: () => y(!1),
     lockBodyScroll: !0,
@@ -169,7 +185,7 @@ function Qe(r) {
   });
   const re = () => {
     if (typeof document > "u") return;
-    const e = document.getElementById(f().mainContentId);
+    const e = document.getElementById(v().mainContentId);
     if (!(!e || !(e instanceof HTMLElement)))
       try {
         e.focus();
@@ -177,8 +193,8 @@ function Qe(r) {
       }
   };
   return (() => {
-    var e = ke(), l = e.firstChild, a = l.nextSibling, i = a.firstChild, v = i.firstChild;
-    return l.$$click = () => re(), d(l, () => f().skipLinkLabel), d(e, o(me, {
+    var e = xe(), a = e.firstChild, l = a.nextSibling, n = l.firstChild, u = n.firstChild;
+    return a.$$click = () => re(), c(a, () => v().skipLinkLabel), c(e, o(fe, {
       get logo() {
         return r.logo;
       },
@@ -186,63 +202,66 @@ function Qe(r) {
         return U();
       },
       get ariaLabel() {
-        return f().topBarLabel;
+        return v().topBarLabel;
       },
       get class() {
         return r.slotClassNames?.topBar;
       }
-    }), a), d(a, o(C, {
+    }), l), c(l, o(S, {
       get when() {
-        return !c();
+        return !s();
       },
       get children() {
-        return [o(C, {
+        return [o(S, {
           get when() {
-            return I().length > 0;
+            return M().length > 0;
           },
           get children() {
-            return o(he, {
+            return o(Se, {
               get items() {
-                return I();
+                return M();
               },
               get bottomItems() {
                 return r.activityBottomItems;
               },
               get activeId() {
-                return n.sidebarActiveTab();
+                return i.sidebarActiveTab();
               },
               onActiveChange: O,
               get collapsed() {
                 return X();
               },
               get onCollapsedChange() {
-                return A(() => !!u())() ? void 0 : n.setSidebarCollapsed;
+                return p(() => !!b())() ? void 0 : i.setSidebarCollapsed;
               },
               get ariaLabel() {
-                return f().primaryNavigationLabel;
+                return v().primaryNavigationLabel;
               },
               get class() {
                 return r.slotClassNames?.activityBar;
               }
             });
           }
-        }), o(C, {
+        }), o(S, {
           get when() {
-            return !u();
+            return !b();
           },
           get children() {
-            return o(be, {
+            return o(me, {
               get width() {
                 return Y();
               },
               get collapsed() {
-                return n.sidebarCollapsed() || R();
+                return i.sidebarCollapsed() || R();
+              },
+              get visibilityMotion() {
+                return i.sidebarVisibilityMotion();
               },
               get ariaLabel() {
-                return f().sidebarLabel;
+                return v().sidebarLabel;
               },
               get resizer() {
-                return o(K, {
+                return o(Q, {
                   direction: "horizontal",
                   onResize: ee,
                   onResizeStart: Z,
@@ -253,54 +272,54 @@ function Qe(r) {
                 return r.slotClassNames?.sidebar;
               },
               get children() {
-                return H(n.sidebarActiveTab());
+                return H(i.sidebarActiveTab());
               }
             });
           }
         })];
       }
-    }), i), d(a, o(C, {
+    }), n), c(l, o(S, {
       get when() {
-        return A(() => !!(c() && M()))() && !u();
+        return p(() => !!(s() && A()))() && !b();
       },
       get children() {
         return [(() => {
-          var t = we();
-          return t.$$click = () => y(!1), N(() => h(t, S("absolute inset-0 z-40 bg-black/30 cursor-pointer", r.slotClassNames?.mobileSidebarBackdrop))), t;
+          var t = Me();
+          return t.$$click = () => y(!1), N(() => h(t, C("absolute inset-0 z-40 bg-black/30 cursor-pointer", r.slotClassNames?.mobileSidebarBackdrop))), t;
         })(), (() => {
-          var t = Ie(), b = t.firstChild, g = $;
-          return typeof g == "function" ? ne(g, t) : $ = t, d(b, () => H(n.sidebarActiveTab())), N((m) => {
-            var B = 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), k = f().sidebarLabel;
-            return B !== m.e && h(t, m.e = B), k !== m.t && L(t, "aria-label", m.t = k), m;
+          var t = Be(), m = t.firstChild, g = $;
+          return typeof g == "function" ? ne(g, t) : $ = t, c(m, () => H(i.sidebarActiveTab())), N((f) => {
+            var B = C("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), k = v().sidebarLabel;
+            return B !== f.e && h(t, f.e = B), k !== f.t && L(t, "aria-label", f.t = k), f;
           }, {
             e: void 0,
             t: void 0
           }), t;
         })()];
       }
-    }), i), d(v, () => r.children), d(i, o(C, {
+    }), n), c(u, () => r.children), c(n, o(S, {
       get when() {
-        return A(() => !!(!c() && n.terminalOpened()))() && r.terminalPanel;
+        return p(() => !!(!s() && i.terminalOpened()))() && r.terminalPanel;
       },
       get children() {
-        var t = Be();
-        return d(t, o(K, {
+        var t = ke();
+        return c(t, o(Q, {
           direction: "vertical",
-          onResize: (b) => n.setTerminalHeight(n.terminalHeight() - b)
-        }), null), d(t, () => r.terminalPanel, null), N((b) => {
-          var g = S("relative shrink-0 border-t border-border bg-terminal-background overflow-hidden", r.slotClassNames?.terminalPanel), m = `${n.terminalHeight()}px`;
-          return g !== b.e && h(t, b.e = g), m !== b.t && ie(t, "height", b.t = m), b;
+          onResize: (m) => i.setTerminalHeight(i.terminalHeight() - m)
+        }), null), c(t, () => r.terminalPanel, null), N((m) => {
+          var g = C("relative shrink-0 border-t border-border bg-terminal-background overflow-hidden", r.slotClassNames?.terminalPanel), f = `${i.terminalHeight()}px`;
+          return g !== m.e && h(t, m.e = g), f !== m.t && ie(t, "height", m.t = f), m;
         }, {
           e: void 0,
           t: void 0
         }), t;
       }
-    }), null), d(e, o(C, {
+    }), null), c(e, o(S, {
       get when() {
-        return !c();
+        return !s();
       },
       get children() {
-        return o(ve, {
+        return o(ge, {
           get class() {
             return r.slotClassNames?.bottomBar;
           },
@@ -309,26 +328,26 @@ function Qe(r) {
           }
         });
       }
-    }), null), d(e, o(C, {
+    }), null), c(e, o(S, {
       get when() {
-        return A(() => !!c())() && I().length > 0;
+        return p(() => !!s())() && M().length > 0;
       },
       get children() {
-        return o(ge, {
+        return o(he, {
           get items() {
-            return I();
+            return M();
           },
           get activeId() {
             return Ce({
-              activeId: n.sidebarActiveTab(),
-              mobileSidebarOpen: M(),
+              activeId: i.sidebarActiveTab(),
+              mobileSidebarOpen: A(),
               activeIsFullScreen: R(),
-              activeIsPage: q()
+              activeIsPage: j()
             });
           },
-          onSelect: E,
+          onSelect: V,
           get ariaLabel() {
-            return f().mobileNavigationLabel;
+            return v().mobileNavigationLabel;
           },
           get class() {
             return r.slotClassNames?.mobileTabBar;
@@ -336,7 +355,7 @@ function Qe(r) {
         });
       }
     }), null), N((t) => {
-      var b = S(
+      var m = C(
         // 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",
@@ -344,8 +363,8 @@ function Qe(r) {
         "overscroll-none",
         r.slotClassNames?.root,
         r.class
-      ), g = `#${f().mainContentId}`, m = S("fixed left-3 top-3 z-[120] rounded-md bg-primary px-3 py-2 text-xs font-medium text-primary-foreground shadow-md", "transition-transform duration-150 motion-reduce:transition-none", "-translate-y-[200%] focus:translate-y-0"), B = S("flex-1 min-w-0 flex flex-col overflow-hidden", r.slotClassNames?.contentArea), k = S("flex-1 min-h-0 overflow-auto overscroll-contain", r.slotClassNames?.main), _ = f().mainContentId, D = f().mainLabel;
-      return b !== t.e && h(e, t.e = b), g !== t.t && L(l, "href", t.t = g), m !== t.a && h(l, t.a = m), B !== t.o && h(i, t.o = B), k !== t.i && h(v, t.i = k), _ !== t.n && L(v, "id", t.n = _), D !== t.s && L(v, "aria-label", t.s = D), t;
+      ), g = `#${v().mainContentId}`, f = C("fixed left-3 top-3 z-[120] rounded-md bg-primary px-3 py-2 text-xs font-medium text-primary-foreground shadow-md", "transition-transform duration-150 motion-reduce:transition-none", "-translate-y-[200%] focus:translate-y-0"), B = C("flex-1 min-w-0 flex flex-col overflow-hidden", r.slotClassNames?.contentArea), k = C("flex-1 min-h-0 overflow-auto overscroll-contain", r.slotClassNames?.main), E = v().mainContentId, _ = v().mainLabel;
+      return m !== t.e && h(e, t.e = m), g !== t.t && L(a, "href", t.t = g), f !== t.a && h(a, t.a = f), B !== t.o && h(n, t.o = B), k !== t.i && h(u, t.i = k), E !== t.n && L(u, "id", t.n = E), _ !== t.s && L(u, "aria-label", t.s = _), t;
     }, {
       e: void 0,
       t: void 0,
@@ -359,5 +378,5 @@ function Qe(r) {
 }
 oe(["click"]);
 export {
-  Qe as Shell
+  Ke as Shell
 };

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

@@ -1,9 +1,11 @@
 import { type JSX } from 'solid-js';
+import type { SidebarVisibilityMotion } from '../../context/LayoutContext';
 export interface SidebarProps {
     children: JSX.Element;
     resizer?: JSX.Element;
     width?: number;
     collapsed?: boolean;
+    visibilityMotion?: SidebarVisibilityMotion;
     ariaLabel?: string;
     class?: string;
 }