@opencosmos/ui 1.3.1 → 1.3.2

package/src/components/layout/AppSidebar.tsx

@@ -0,0 +1,277 @@
+'use client';
+
+import React, { createContext, useContext, useState, useEffect } from 'react';
+import { cn } from '../../lib/utils';
+import { useMotionPreference } from '../../hooks/useMotionPreference';
+import { PanelLeftClose } from 'lucide-react';
+
+// ── Constants ─────────────────────────────────────────────────────────────────
+
+const STORAGE_KEY = 'appsidebar:state';
+export const APP_SIDEBAR_WIDTH = 280;
+export const APP_SIDEBAR_WIDTH_COLLAPSED = 60;
+
+// ── Context ───────────────────────────────────────────────────────────────────
+
+interface AppSidebarContextValue {
+    isOpen: boolean;
+    toggle: () => void;
+    open: () => void;
+    close: () => void;
+}
+
+const AppSidebarContext = createContext<AppSidebarContextValue | null>(null);
+
+// Safe default used when no provider is in scope.
+//
+// WHY this exists — do not change back to a throw:
+//
+// `next.config.mjs` sets `transpilePackages: ['@opencosmos/ui']`, which tells
+// Next.js/webpack to bundle this package from SOURCE instead of dist. Webpack can
+// then split this file and its consumer (e.g. the docs playground) into separate
+// chunks. Each chunk gets its own module execution scope, so `createContext()` can
+// run twice — producing two distinct AppSidebarContext objects. The Provider writes
+// to instance A; AppSidebar reads from instance B → useContext returns null even
+// though a Provider is present in the React tree.
+//
+// Throwing on null ctx (the common pattern) causes the entire page to 500.
+// Returning a safe default lets the component render correctly in isolation.
+// Consuming apps should still wrap with AppSidebarProvider for state persistence.
+const DEFAULT_CONTEXT: AppSidebarContextValue = {
+    isOpen: true,
+    toggle: () => {},
+    open: () => {},
+    close: () => {},
+};
+
+export function useAppSidebar(): AppSidebarContextValue {
+    return useContext(AppSidebarContext) ?? DEFAULT_CONTEXT;
+}
+
+// ── AppSidebarProvider ────────────────────────────────────────────────────────
+
+export interface AppSidebarProviderProps {
+    children: React.ReactNode;
+    /** Initial open state used on server and first render @default true */
+    defaultOpen?: boolean;
+}
+
+export function AppSidebarProvider({ children, defaultOpen = true }: AppSidebarProviderProps) {
+    const [isOpen, setIsOpen] = useState(defaultOpen);
+
+    useEffect(() => {
+        const stored = localStorage.getItem(STORAGE_KEY);
+        if (stored !== null) setIsOpen(stored === 'true');
+    }, []);
+
+    const persist = (value: boolean) => localStorage.setItem(STORAGE_KEY, String(value));
+
+    const toggle = () => setIsOpen(prev => { const next = !prev; persist(next); return next; });
+    const open   = () => { setIsOpen(true);  persist(true);  };
+    const close  = () => { setIsOpen(false); persist(false); };
+
+    return (
+        <AppSidebarContext.Provider value={{ isOpen, toggle, open, close }}>
+            {children}
+        </AppSidebarContext.Provider>
+    );
+}
+
+// ── AppSidebarInset ───────────────────────────────────────────────────────────
+
+export function AppSidebarInset({
+    children,
+    className,
+}: {
+    children: React.ReactNode;
+    className?: string;
+}) {
+    const { isOpen } = useAppSidebar();
+    const { shouldAnimate, scale } = useMotionPreference();
+    const duration = shouldAnimate ? Math.round(300 * (5 / Math.max(scale, 0.1))) : 0;
+
+    return (
+        <div
+            className={cn('min-h-screen', className)}
+            style={{
+                marginLeft: isOpen ? APP_SIDEBAR_WIDTH : APP_SIDEBAR_WIDTH_COLLAPSED,
+                transition: shouldAnimate ? `margin-left ${duration}ms ease-out` : 'none',
+            }}
+        >
+            {children}
+        </div>
+    );
+}
+
+// ── Nav item type ─────────────────────────────────────────────────────────────
+
+export interface AppSidebarNavItem {
+    icon: React.ReactNode;
+    label: string;
+    href: string;
+    active?: boolean;
+    external?: boolean;
+}
+
+// ── AppSidebar ────────────────────────────────────────────────────────────────
+
+export interface AppSidebarProps {
+    /** Icon element always visible (32×32). Clicking it toggles open/closed. */
+    logo?: React.ReactNode;
+    /** Wordmark shown next to the logo when expanded */
+    title?: string;
+    /** Navigation items */
+    items?: AppSidebarNavItem[];
+    /** Body slot — rendered in the scrollable 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;
+    /** Additional className for the <aside> */
+    className?: string;
+}
+
+export function AppSidebar({
+    logo,
+    title,
+    items = [],
+    children,
+    footer,
+    className,
+}: AppSidebarProps) {
+    const { isOpen, toggle } = useAppSidebar();
+    const { shouldAnimate, scale } = useMotionPreference();
+    const duration = shouldAnimate ? Math.round(300 * (5 / Math.max(scale, 0.1))) : 0;
+
+    return (
+        <aside
+            className={cn(
+                'fixed left-0 top-0 bottom-0 z-40 flex flex-col',
+                'bg-background border-r border-foreground/8 overflow-hidden',
+                className
+            )}
+            style={{
+                width: isOpen ? APP_SIDEBAR_WIDTH : APP_SIDEBAR_WIDTH_COLLAPSED,
+                transition: shouldAnimate ? `width ${duration}ms ease-out` : 'none',
+            }}
+        >
+            {/* ── Header ─────────────────────────────────────────────────────── */}
+            <div className="flex items-center h-16 px-[10px] shrink-0">
+                {/* Logo + wordmark — clicking toggles in both states */}
+                <button
+                    onClick={toggle}
+                    className={cn(
+                        'flex items-center gap-2.5 flex-1 min-w-0',
+                        'rounded-lg p-1.5',
+                        'hover:bg-foreground/5 transition-colors duration-150',
+                        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus)]'
+                    )}
+                    aria-label={isOpen ? (title ?? 'OpenCosmos') : 'Expand sidebar'}
+                >
+                    <span className="w-8 h-8 shrink-0 flex items-center justify-center">
+                        {logo}
+                    </span>
+                    <span
+                        className="font-semibold text-sm text-foreground whitespace-nowrap"
+                        style={{
+                            opacity: isOpen ? 1 : 0,
+                            width: isOpen ? 'auto' : 0,
+                            overflow: 'hidden',
+                            pointerEvents: isOpen ? 'auto' : 'none',
+                            transition: shouldAnimate
+                                ? `opacity ${Math.round(duration * 0.6)}ms ease-out`
+                                : 'none',
+                        }}
+                    >
+                        {title}
+                    </span>
+                </button>
+
+                {/* Collapse icon — only shown/accessible when open */}
+                <button
+                    onClick={toggle}
+                    tabIndex={isOpen ? 0 : -1}
+                    className={cn(
+                        'shrink-0 w-8 h-8 flex items-center justify-center rounded-lg',
+                        'text-foreground/35 hover:text-foreground/65 hover:bg-foreground/5',
+                        'transition-colors duration-150',
+                        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus)]'
+                    )}
+                    style={{
+                        opacity: isOpen ? 1 : 0,
+                        pointerEvents: isOpen ? 'auto' : 'none',
+                        transition: shouldAnimate
+                            ? `opacity ${Math.round(duration * 0.5)}ms ease-out`
+                            : 'none',
+                    }}
+                    aria-label="Collapse sidebar"
+                >
+                    <PanelLeftClose className="w-4 h-4" />
+                </button>
+            </div>
+
+            {/* ── Nav items ──────────────────────────────────────────────────── */}
+            {items.length > 0 && (
+                <nav className="px-2 py-2 space-y-0.5 shrink-0" aria-label="Main navigation">
+                    {items.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-2.5'
+                                    : '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>
+            )}
+
+            {/* ── Body (conversation history, etc.) ──────────────────────────── */}
+            <div
+                className="flex-1 overflow-y-auto overflow-x-hidden min-h-0"
+                style={{ opacity: isOpen ? 1 : 0, pointerEvents: isOpen ? 'auto' : 'none' }}
+            >
+                {children}
+            </div>
+
+            {/* ── Footer ─────────────────────────────────────────────────────── */}
+            {footer && (
+                <div
+                    className={cn(
+                        'shrink-0 border-t border-foreground/8',
+                        isOpen ? 'p-3' : 'px-2 py-3 flex justify-center'
+                    )}
+                >
+                    {footer}
+                </div>
+            )}
+        </aside>
+    );
+}

package/src/components/layout/CustomizerPanel.tsx

@@ -1,8 +1,8 @@
 'use client';
 import React from 'react';
 import { SlidersHorizontal, Sun, Moon, SunMoon, Building2, Leaf, Zap, Rocket, X, Palette } from 'lucide-react';
-import { studioTokens, terraTokens, voltTokens, speedboatTokens, PUBLIC_THEME_NAMES } from '@thesage/tokens';
-import type { ThemeName } from '@thesage/tokens';
+import { studioTokens, terraTokens, voltTokens, speedboatTokens, PUBLIC_THEME_NAMES } from '@opencosmos/tokens';
+import type { ThemeName } from '@opencosmos/tokens';
 import { useCustomizer } from '../../lib/store/customizer';
 import { useThemeStore } from '../../lib/store/theme';
 import { ColorPicker } from '../forms/ColorPicker';

package/src/components/layout/index.ts

@@ -14,5 +14,6 @@ export * from './Resizable';
 export * from './ScrollArea';
 export * from './Separator';
 export * from './Sidebar';
+export * from './AppSidebar';
 export * from './Stack';
 export * from './GlassSurface';

package/src/hooks/useTheme.ts

@@ -1,7 +1,7 @@
 'use client';
 
 import { useThemeStore } from '../lib/store/theme';
-import type { ThemeName, ColorMode } from '@thesage/tokens';
+import type { ThemeName, ColorMode } from '@opencosmos/tokens';
 
 export interface ThemeHook {
   /**

package/src/hooks.ts

@@ -1,6 +1,6 @@
 /**
  * Hooks subpath export
- * Allows: import { ... } from '@thesage/ui/hooks'
+ * Allows: import { ... } from '@opencosmos/ui/hooks'
  */
 
 // Re-export all hooks

package/src/index.ts

@@ -1,8 +1,8 @@
 // ============================================================================
 // MAIN BARREL EXPORTS - Backward Compatible
 // ============================================================================
-// All components remain importable from '@thesage/ui' root
-// Example: import { Button, Card, Dialog } from '@thesage/ui'
+// All components remain importable from '@opencosmos/ui' root
+// Example: import { Button, Card, Dialog } from '@opencosmos/ui'
 
 // Actions
 export * from './components/actions/Button';
@@ -81,6 +81,7 @@ export * from './components/data-display/CollapsibleCodeBlock';
 export * from './components/data-display/DataTable';
 export * from './components/data-display/DescriptionList';
 export * from './components/data-display/GitHubIcon';
+export * from './components/data-display/OpenCosmosIcon';
 export * from './components/data-display/Heading';
 export * from './components/data-display/Table';
 export * from './components/data-display/Text';
@@ -108,6 +109,7 @@ export * from './components/layout/Resizable';
 export * from './components/layout/ScrollArea';
 export * from './components/layout/Separator';
 export * from './components/layout/Sidebar';
+export * from './components/layout/AppSidebar';
 export * from './components/layout/Stack';
 export * from './components/layout/GlassSurface';
 
@@ -142,7 +144,7 @@ export * from './lib/validation';
 export * from './lib/syntax-parser';
 
 // Tokens (selective re-exports)
-export { typographySystem } from '@thesage/tokens';
+export { typographySystem } from '@opencosmos/tokens';
 
 // Component Registry (metadata)
 export * from './component-registry';
@@ -151,7 +153,7 @@ export * from './component-registry';
 // OPTIONAL CATEGORY-BASED EXPORTS (Future Use)
 // ============================================================================
 // These allow category-specific imports for better code organization
-// Example: import { Button } from '@thesage/ui/actions'
+// Example: import { Button } from '@opencosmos/ui/actions'
 // Note: These require package.json exports configuration
 
 // Re-export categories for convenience

package/src/lib/store/customizer.ts

@@ -1,6 +1,6 @@
 import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
-import { computeDerivedTokens, type FontTheme } from '@thesage/tokens';
+import { computeDerivedTokens, type FontTheme } from '@opencosmos/tokens';
 import {
   generateColorScale,
   getOptimalForeground,

package/src/lib/store/theme.ts

@@ -5,7 +5,7 @@
 
 import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
-import type { ThemeName, ColorMode } from '@thesage/tokens';
+import type { ThemeName, ColorMode } from '@opencosmos/tokens';
 
 // Re-export types for convenience
 export type { ThemeName, ColorMode };

package/src/lib/syntax-parser/index.ts

@@ -6,7 +6,7 @@
  *
  * @example
  * ```ts
- * import { parseCode } from '@thesage/ui';
+ * import { parseCode } from '@opencosmos/ui';
  *
  * const tokens = parseCode('const greeting = "Hello World";');
  * // Use with CollapsibleCodeBlock:

package/src/providers/ThemeProvider.tsx

@@ -8,8 +8,8 @@
 import { useEffect, useState } from 'react';
 import { useThemeStore } from '../lib/store/theme';
 import { useCustomizer, type ColorPalette } from '../lib/store/customizer';
-import { studioTokens, terraTokens, voltTokens, speedboatTokens, syntaxColors, codeColors } from '@thesage/tokens';
-import type { ThemeName, ColorMode } from '@thesage/tokens';
+import { studioTokens, terraTokens, voltTokens, speedboatTokens, syntaxColors, codeColors } from '@opencosmos/tokens';
+import type { ThemeName, ColorMode } from '@opencosmos/tokens';
 
 // ── Type-safe token access ──────────────────────────────────────────────────
 

package/src/providers.ts

@@ -1,6 +1,6 @@
 /**
  * Providers subpath export
- * Allows: import { ... } from '@thesage/ui/providers'
+ * Allows: import { ... } from '@opencosmos/ui/providers'
  */
 
 // Re-export all providers

package/src/tokens.ts

@@ -1,7 +1,7 @@
 /**
  * Tokens subpath export
- * Allows: import { ... } from '@thesage/ui/tokens'
+ * Allows: import { ... } from '@opencosmos/ui/tokens'
  */
 
-// Re-export all tokens from @thesage/tokens
-export * from '@thesage/tokens';
+// Re-export all tokens from @opencosmos/tokens
+export * from '@opencosmos/tokens';

package/src/utils.ts

@@ -1,6 +1,6 @@
 /**
  * Utils subpath export
- * Allows: import { ... } from '@thesage/ui/utils'
+ * Allows: import { ... } from '@opencosmos/ui/utils'
  */
 
 // Re-export all utilities