@opencosmos/ui 1.3.2 → 1.3.4

package/dist/index.d.mts

@@ -2459,16 +2459,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

@@ -2459,16 +2459,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

@@ -11118,6 +11118,7 @@ function AppSidebar({
   logo,
   title,
   items = [],
+  bottomItems = [],
   children,
   footer,
   className
@@ -11190,7 +11191,7 @@ function AppSidebar({
             }
           )
         ] }),
-        items.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("nav", { className: "px-2 py-2 space-y-0.5 shrink-0", "aria-label": "Main navigation", children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(
+        items.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("nav", { className: "px-2 py-2 space-y-1 shrink-0", "aria-label": "Main navigation", children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(
           "a",
           {
             href: item.href,
@@ -11201,7 +11202,7 @@ function AppSidebar({
             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-2.5" : "justify-center w-9 h-9 mx-auto",
+              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: [
@@ -11232,12 +11233,46 @@ 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",
           {
             className: cn(
               "shrink-0 border-t border-foreground/8",
-              isOpen ? "p-3" : "px-2 py-3 flex justify-center"
+              isOpen ? "px-4 py-4 space-y-3" : "px-2 py-3 flex justify-center"
             ),
             children: footer
           }