@opencosmos/ui 1.3.3 → 1.3.5

package/dist/index.d.mts

@@ -2441,8 +2441,10 @@ interface AppSidebarProviderProps {
     children: React__default.ReactNode;
     /** Initial open state used on server and first render @default true */
     defaultOpen?: boolean;
+    /** localStorage key for persisting open state. Use unique keys per page to avoid cross-page state bleed. @default 'appsidebar:state' */
+    storageKey?: string;
 }
-declare function AppSidebarProvider({ children, defaultOpen }: AppSidebarProviderProps): react_jsx_runtime.JSX.Element;
+declare function AppSidebarProvider({ children, defaultOpen, storageKey }: AppSidebarProviderProps): react_jsx_runtime.JSX.Element;
 declare function AppSidebarInset({ children, className, }: {
     children: React__default.ReactNode;
     className?: string;
@@ -2459,16 +2461,18 @@ interface AppSidebarProps {
     logo?: React__default.ReactNode;
     /** Wordmark shown next to the logo when expanded */
     title?: string;
-    /** Navigation items */
+    /** Navigation items rendered at the top (below the header) */
     items?: AppSidebarNavItem[];
-    /** Body slot — rendered in the scrollable mid-section (e.g. conversation history). Only visible when expanded. */
+    /** Navigation items rendered at the bottom (above the footer) */
+    bottomItems?: AppSidebarNavItem[];
+    /** Body slot — rendered in the flex-1 mid-section (e.g. conversation history). Only visible when expanded. */
     children?: React__default.ReactNode;
     /** Footer slot — auth section, user avatar, sign-in prompt, etc. */
     footer?: React__default.ReactNode;
     /** Additional className for the <aside> */
     className?: string;
 }
-declare function AppSidebar({ logo, title, items, children, footer, className, }: AppSidebarProps): react_jsx_runtime.JSX.Element;
+declare function AppSidebar({ logo, title, items, bottomItems, children, footer, className, }: AppSidebarProps): react_jsx_runtime.JSX.Element;
 
 interface StackProps extends React__default.HTMLAttributes<HTMLDivElement> {
     /**

package/dist/index.d.ts

@@ -2441,8 +2441,10 @@ interface AppSidebarProviderProps {
     children: React__default.ReactNode;
     /** Initial open state used on server and first render @default true */
     defaultOpen?: boolean;
+    /** localStorage key for persisting open state. Use unique keys per page to avoid cross-page state bleed. @default 'appsidebar:state' */
+    storageKey?: string;
 }
-declare function AppSidebarProvider({ children, defaultOpen }: AppSidebarProviderProps): react_jsx_runtime.JSX.Element;
+declare function AppSidebarProvider({ children, defaultOpen, storageKey }: AppSidebarProviderProps): react_jsx_runtime.JSX.Element;
 declare function AppSidebarInset({ children, className, }: {
     children: React__default.ReactNode;
     className?: string;
@@ -2459,16 +2461,18 @@ interface AppSidebarProps {
     logo?: React__default.ReactNode;
     /** Wordmark shown next to the logo when expanded */
     title?: string;
-    /** Navigation items */
+    /** Navigation items rendered at the top (below the header) */
     items?: AppSidebarNavItem[];
-    /** Body slot — rendered in the scrollable mid-section (e.g. conversation history). Only visible when expanded. */
+    /** Navigation items rendered at the bottom (above the footer) */
+    bottomItems?: AppSidebarNavItem[];
+    /** Body slot — rendered in the flex-1 mid-section (e.g. conversation history). Only visible when expanded. */
     children?: React__default.ReactNode;
     /** Footer slot — auth section, user avatar, sign-in prompt, etc. */
     footer?: React__default.ReactNode;
     /** Additional className for the <aside> */
     className?: string;
 }
-declare function AppSidebar({ logo, title, items, children, footer, className, }: AppSidebarProps): react_jsx_runtime.JSX.Element;
+declare function AppSidebar({ logo, title, items, bottomItems, children, footer, className, }: AppSidebarProps): react_jsx_runtime.JSX.Element;
 
 interface StackProps extends React__default.HTMLAttributes<HTMLDivElement> {
     /**

package/dist/index.js

@@ -11073,13 +11073,13 @@ var DEFAULT_CONTEXT = {
 function useAppSidebar() {
   return (0, import_react19.useContext)(AppSidebarContext) ?? DEFAULT_CONTEXT;
 }
-function AppSidebarProvider({ children, defaultOpen = true }) {
+function AppSidebarProvider({ children, defaultOpen = true, storageKey = STORAGE_KEY }) {
   const [isOpen, setIsOpen] = (0, import_react19.useState)(defaultOpen);
   (0, import_react19.useEffect)(() => {
-    const stored = localStorage.getItem(STORAGE_KEY);
+    const stored = localStorage.getItem(storageKey);
     if (stored !== null) setIsOpen(stored === "true");
-  }, []);
-  const persist3 = (value) => localStorage.setItem(STORAGE_KEY, String(value));
+  }, [storageKey]);
+  const persist3 = (value) => localStorage.setItem(storageKey, String(value));
   const toggle = () => setIsOpen((prev) => {
     const next = !prev;
     persist3(next);
@@ -11118,6 +11118,7 @@ function AppSidebar({
   logo,
   title,
   items = [],
+  bottomItems = [],
   children,
   footer,
   className
@@ -11232,6 +11233,40 @@ function AppSidebar({
             children
           }
         ),
+        bottomItems.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("nav", { className: "px-2 py-2 space-y-1 shrink-0 border-t border-foreground/8", "aria-label": "Bottom navigation", children: bottomItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(
+          "a",
+          {
+            href: item.href,
+            target: item.external ? "_blank" : void 0,
+            rel: item.external ? "noopener noreferrer" : void 0,
+            title: !isOpen ? item.label : void 0,
+            "aria-label": !isOpen ? item.label : void 0,
+            className: cn(
+              "flex items-center rounded-lg transition-colors duration-150",
+              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus)]",
+              isOpen ? "gap-3 px-3 py-3" : "justify-center w-9 h-9 mx-auto",
+              item.active ? "bg-foreground/8 text-foreground font-medium" : "text-[var(--color-text-secondary)] hover:bg-foreground/5 hover:text-[var(--color-text-primary)]"
+            ),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("span", { className: "shrink-0 flex items-center justify-center w-4 h-4", children: item.icon }),
+              /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+                "span",
+                {
+                  className: "text-sm whitespace-nowrap",
+                  style: {
+                    opacity: isOpen ? 1 : 0,
+                    width: isOpen ? "auto" : 0,
+                    overflow: "hidden",
+                    pointerEvents: isOpen ? "auto" : "none",
+                    transition: shouldAnimate ? `opacity ${Math.round(duration * 0.55)}ms ease-out` : "none"
+                  },
+                  children: item.label
+                }
+              )
+            ]
+          },
+          item.label
+        )) }),
         footer && /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
           "div",
           {