@opencosmos/ui 1.3.2 → 1.3.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencosmos/ui",
-  "version": "1.3.2",
+  "version": "1.3.4",
   "description": "OpenCosmos UI — Make it Lovable. 100 accessible React components, three themes, user-controlled motion.",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -93,6 +93,16 @@
     "./globals.css": "./src/globals.css",
     "./theme.css": "./src/theme.css"
   },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "lint": "eslint src/",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "typecheck": "tsc --noEmit",
+    "size": "size-limit",
+    "size:check": "size-limit --limit"
+  },
   "size-limit": [
     {
       "name": "Core (index)",
@@ -253,15 +263,5 @@
     "typescript-eslint": "^8.54.0",
     "vitest": "^4.0.18",
     "zod": "^3.24.1"
-  },
-  "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch",
-    "lint": "eslint src/",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "typecheck": "tsc --noEmit",
-    "size": "size-limit",
-    "size:check": "size-limit --limit"
   }
-}
+}

package/src/components/layout/AppSidebar.tsx

@@ -120,9 +120,11 @@ export interface AppSidebarProps {
     logo?: React.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.ReactNode;
     /** Footer slot — auth section, user avatar, sign-in prompt, etc. */
     footer?: React.ReactNode;
@@ -134,6 +136,7 @@ export function AppSidebar({
     logo,
     title,
     items = [],
+    bottomItems = [],
     children,
     footer,
     className,
@@ -211,7 +214,7 @@ export function AppSidebar({
 
             {/* ── Nav items ──────────────────────────────────────────────────── */}
             {items.length > 0 && (
-                <nav className="px-2 py-2 space-y-0.5 shrink-0" aria-label="Main navigation">
+                <nav className="px-2 py-2 space-y-1 shrink-0" aria-label="Main navigation">
                     {items.map((item) => (
                         <a
                             key={item.label}
@@ -224,7 +227,7 @@ export function AppSidebar({
                                 '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'
+                                    ? 'gap-3 px-3 py-3'
                                     : 'justify-center w-9 h-9 mx-auto',
                                 item.active
                                     ? 'bg-foreground/8 text-foreground font-medium'
@@ -261,12 +264,56 @@ export function AppSidebar({
                 {children}
             </div>
 
+            {/* ── Bottom nav items ───────────────────────────────────────────── */}
+            {bottomItems.length > 0 && (
+                <nav className="px-2 py-2 space-y-1 shrink-0 border-t border-foreground/8" aria-label="Bottom navigation">
+                    {bottomItems.map((item) => (
+                        <a
+                            key={item.label}
+                            href={item.href}
+                            target={item.external ? '_blank' : undefined}
+                            rel={item.external ? 'noopener noreferrer' : undefined}
+                            title={!isOpen ? item.label : undefined}
+                            aria-label={!isOpen ? item.label : undefined}
+                            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)]'
+                            )}
+                        >
+                            <span className="shrink-0 flex items-center justify-center w-4 h-4">
+                                {item.icon}
+                            </span>
+                            <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',
+                                }}
+                            >
+                                {item.label}
+                            </span>
+                        </a>
+                    ))}
+                </nav>
+            )}
+
             {/* ── Footer ─────────────────────────────────────────────────────── */}
             {footer && (
                 <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'
                     )}
                 >
                     {footer}

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2025-2026 Shalom Ormsby
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.