chordia-ui 3.2.7 → 3.2.8

package/dist/components/navigation.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"navigation.es.js","sources":["../../src/components/navigation/Sidebar.jsx","../../src/components/navigation/NavigationBar.jsx"],"sourcesContent":["\"use client\";\n\nimport React, { useState } from \"react\";\nimport {\n  Home, FolderClosed, Users, Settings, ChevronDown,\n  LayoutDashboard, Clock3, Activity, Lightbulb, Bell, Plug, BarChart3,\n  FileText, Headphones, Shield, Sliders, Workflow, SquareDot,\n  PanelLeftClose, PanelLeft,\n} from \"lucide-react\";\n\n/**\n * Sidebar — collapsible navigation sidebar.\n *\n * Slot-based: pass menuItems as data, component handles rendering + expand/collapse.\n * No framework dependencies (no router, no auth, no API calls).\n *\n * Props:\n *  - menuItems       Array<MenuItem>   Navigation items (see shape below)\n *  - activeId        string            Currently active item id\n *  - onNavigate      function(href)    Navigation callback\n *  - collapsed       boolean           External collapsed state (controlled)\n *  - onToggleCollapse function         Toggle callback\n *  - header          ReactNode         Optional header slot (logo, brand)\n *  - footer          ReactNode         Optional footer slot (user, settings)\n *  - width           number            Expanded width (default 240)\n *  - collapsedWidth  number            Collapsed width (default 56)\n *\n * MenuItem shape:\n *  - id       string\n *  - label    string\n *  - icon     string (key from ICON_MAP) or ReactNode\n *  - href     string\n *  - active   boolean (override)\n *  - children Array<MenuItem> (nested group)\n *  - section  string (section label above this item)\n */\n\nconst ICON_MAP = {\n  home: Home,\n  projects: FolderClosed,\n  folder: FolderClosed,\n  organization: Users,\n  users: Users,\n  dashboard: LayoutDashboard,\n  history: Clock3,\n  sessions: Clock3,\n  monitoring: Activity,\n  activity: Activity,\n  insights: Lightbulb,\n  notifications: Bell,\n  integrations: Plug,\n  settings: Settings,\n  usage: BarChart3,\n  docs: FileText,\n  documentation: FileText,\n  agents: Headphones,\n  security: Shield,\n  configuration: Sliders,\n  workflow: Workflow,\n};\n\nfunction resolveIcon(icon) {\n  if (!icon) return SquareDot;\n  if (typeof icon === \"string\") return ICON_MAP[icon.toLowerCase()] || SquareDot;\n  return icon;\n}\n\nexport default function Sidebar({\n  menuItems = [],\n  activeId,\n  onNavigate,\n  collapsed: controlledCollapsed,\n  onToggleCollapse,\n  header,\n  footer,\n  width = 244,\n  collapsedWidth = 56,\n}) {\n  const [internalCollapsed, setInternalCollapsed] = useState(false);\n  const collapsed = controlledCollapsed !== undefined ? controlledCollapsed : internalCollapsed;\n  const toggleCollapse = onToggleCollapse || (() => setInternalCollapsed(!internalCollapsed));\n\n  const [expandedGroups, setExpandedGroups] = useState(() => {\n    const initial = {};\n    menuItems.forEach((item) => {\n      if (item.children?.length) {\n        // Auto-expand groups that contain the active item\n        const hasActive = item.children.some((c) => c.id === activeId || c.active);\n        initial[item.id] = hasActive;\n      }\n    });\n    return initial;\n  });\n\n  const toggleGroup = (id) => {\n    setExpandedGroups((prev) => ({ ...prev, [id]: !prev[id] }));\n  };\n\n  const currentWidth = collapsed ? collapsedWidth : width;\n\n  return (\n    <nav\n      style={{\n        width: currentWidth,\n        minWidth: currentWidth,\n        height: \"100%\",\n        display: \"flex\",\n        flexDirection: \"column\",\n        alignItems: \"flex-start\",\n        padding: collapsed ? \"0\" : \"0 0 24px 24px\",\n        gap: 24,\n        background: \"var(--Background-Inverse, #0B0B0B)\",\n        fontFamily: \"var(--font-sans)\",\n        transition: \"width 0.2s ease, min-width 0.2s ease\",\n        overflow: \"hidden\",\n        flexShrink: 0,\n      }}\n    >\n      {/* Header slot */}\n      {header && !collapsed && (\n        <div style={{ padding: \"16px 16px 8px\", flexShrink: 0, width: \"100%\" }}>\n          {header}\n        </div>\n      )}\n\n      {/* Collapse toggle */}\n      <div\n        style={{\n          display: \"flex\",\n          justifyContent: collapsed ? \"center\" : \"flex-end\",\n          padding: collapsed ? \"12px 0\" : \"8px 0 0\",\n          flexShrink: 0,\n          width: \"100%\",\n        }}\n      >\n        <button\n          onClick={toggleCollapse}\n          title={collapsed ? \"Expand sidebar\" : \"Collapse sidebar\"}\n          style={{\n            display: \"flex\",\n            alignItems: \"center\",\n            justifyContent: \"center\",\n            width: 28,\n            height: 28,\n            borderRadius: \"var(--radius-sm)\",\n            border: \"none\",\n            background: \"transparent\",\n            color: \"rgba(255, 255, 255, 0.5)\",\n            cursor: \"pointer\",\n            transition: \"background 0.15s ease, color 0.15s ease\",\n          }}\n          onMouseEnter={(e) => {\n            e.currentTarget.style.background = \"rgba(255, 255, 255, 0.08)\";\n            e.currentTarget.style.color = \"rgba(255, 255, 255, 0.8)\";\n          }}\n          onMouseLeave={(e) => {\n            e.currentTarget.style.background = \"transparent\";\n            e.currentTarget.style.color = \"rgba(255, 255, 255, 0.5)\";\n          }}\n        >\n          {collapsed ? <PanelLeft size={16} /> : <PanelLeftClose size={16} />}\n        </button>\n      </div>\n\n      {/* Menu items */}\n      <div\n        style={{\n          flex: 1,\n          overflowY: \"auto\",\n          overflowX: \"hidden\",\n          padding: collapsed ? \"0 8px\" : \"0\",\n          width: \"100%\",\n        }}\n      >\n        {menuItems.map((item, idx) => (\n          <React.Fragment key={item.id || idx}>\n            {/* Section label */}\n            {item.section && !collapsed && (\n              <div\n                style={{\n                  fontSize: \"var(--text-xs)\",\n                  fontWeight: 650,\n                  letterSpacing: \"0.08em\",\n                  textTransform: \"uppercase\",\n                  color: \"rgba(255, 255, 255, 0.35)\",\n                  padding: \"16px 8px 6px\",\n                  lineHeight: 1,\n                }}\n              >\n                {item.section}\n              </div>\n            )}\n\n            {item.children?.length ? (\n              <SidebarGroup\n                item={item}\n                activeId={activeId}\n                expanded={!!expandedGroups[item.id]}\n                onToggle={() => toggleGroup(item.id)}\n                onNavigate={onNavigate}\n                collapsed={collapsed}\n              />\n            ) : (\n              <SidebarItem\n                item={item}\n                active={item.id === activeId || item.active}\n                onNavigate={onNavigate}\n                collapsed={collapsed}\n              />\n            )}\n          </React.Fragment>\n        ))}\n      </div>\n\n      {/* Footer slot */}\n      {footer && !collapsed && (\n        <div\n          style={{\n            padding: \"12px 16px\",\n            borderTop: \"1px solid rgba(255, 255, 255, 0.08)\",\n            flexShrink: 0,\n            width: \"100%\",\n          }}\n        >\n          {footer}\n        </div>\n      )}\n    </nav>\n  );\n}\n\nfunction SidebarItem({ item, active, onNavigate, collapsed }) {\n  const Icon = resolveIcon(item.icon);\n  const isReactIcon = typeof item.icon !== \"string\" && typeof item.icon !== \"undefined\";\n\n  return (\n    <button\n      onClick={() => onNavigate?.(item.href || item.id)}\n      title={collapsed ? item.label : undefined}\n      style={{\n        display: \"flex\",\n        alignItems: \"center\",\n        gap: collapsed ? 0 : 12,\n        justifyContent: collapsed ? \"center\" : \"flex-start\",\n        width: \"100%\",\n        padding: collapsed ? \"10px 0\" : \"12px 24px 12px 12px\",\n        borderRadius: active ? \"4px 0 0 4px\" : \"4px\",\n        borderRight: active ? \"2px solid #00A66E\" : \"2px solid transparent\",\n        borderTop: \"none\",\n        borderBottom: \"none\",\n        borderLeft: \"none\",\n        background: active ? \"var(--Background-MonoPressed, #323232)\" : \"transparent\",\n        color: active ? \"var(--Brand-400, #33B88B)\" : \"var(--Content-TertiaryInverse, #B2AEA8)\",\n        fontWeight: 500,\n        fontSize: \"12px\",\n        fontStyle: \"normal\",\n        lineHeight: \"120%\",\n        textTransform: \"uppercase\",\n        fontFamily: \"var(--font-sans)\",\n        cursor: \"pointer\",\n        textAlign: \"left\",\n        transition: \"background 0.15s ease, color 0.1s ease, border-color 0.15s ease\",\n        marginBottom: 2,\n      }}\n      onMouseEnter={(e) => {\n        if (!active) {\n          e.currentTarget.style.background = \"var(--Background-MonoPressed, #323232)\";\n          e.currentTarget.style.color = \"var(--Brand-400, #33B88B)\";\n        }\n      }}\n      onMouseLeave={(e) => {\n        if (!active) {\n          e.currentTarget.style.background = \"transparent\";\n          e.currentTarget.style.color = \"var(--Content-TertiaryInverse, #B2AEA8)\";\n        }\n      }}\n    >\n      {isReactIcon ? (\n        <span style={{ flexShrink: 0, display: \"flex\" }}>{item.icon}</span>\n      ) : (\n        <Icon\n          size={18}\n          style={{\n            flexShrink: 0,\n            color: \"inherit\",\n          }}\n        />\n      )}\n      {!collapsed && (\n        <span\n          style={{\n            overflow: \"hidden\",\n            textOverflow: \"ellipsis\",\n            whiteSpace: \"nowrap\",\n          }}\n        >\n          {item.label}\n        </span>\n      )}\n    </button>\n  );\n}\n\nfunction SidebarGroup({ item, activeId, expanded, onToggle, onNavigate, collapsed }) {\n  const Icon = resolveIcon(item.icon);\n  const hasActiveChild = item.children?.some((c) => c.id === activeId || c.active);\n\n  if (collapsed) {\n    // In collapsed mode, show just the group icon\n    return (\n      <button\n        onClick={onToggle}\n        title={item.label}\n        style={{\n          display: \"flex\",\n          alignItems: \"center\",\n          justifyContent: \"center\",\n          width: \"100%\",\n          padding: \"10px 0\",\n          borderRadius: \"4px\",\n          border: \"none\",\n          background: hasActiveChild ? \"var(--Background-MonoPressed, #323232)\" : \"transparent\",\n          color: hasActiveChild ? \"var(--Brand-400, #33B88B)\" : \"var(--Content-TertiaryInverse, #B2AEA8)\",\n          cursor: \"pointer\",\n          marginBottom: 2,\n          transition: \"background 0.15s ease\",\n        }}\n        onMouseEnter={(e) => {\n          if (!hasActiveChild) {\n            e.currentTarget.style.background = \"var(--Background-MonoPressed, #323232)\";\n            e.currentTarget.style.color = \"var(--Brand-400, #33B88B)\";\n          }\n        }}\n        onMouseLeave={(e) => {\n          if (!hasActiveChild) {\n            e.currentTarget.style.background = \"transparent\";\n            e.currentTarget.style.color = \"var(--Content-TertiaryInverse, #B2AEA8)\";\n          }\n        }}\n      >\n        <Icon\n          size={18}\n          style={{ color: \"inherit\" }}\n        />\n      </button>\n    );\n  }\n\n  return (\n    <div style={{ marginBottom: 2 }}>\n      {/* Group header */}\n      <button\n        onClick={onToggle}\n        style={{\n          display: \"flex\",\n          alignItems: \"center\",\n          gap: 12,\n          width: \"100%\",\n          padding: \"12px 24px 12px 12px\",\n          borderRadius: \"4px\",\n          border: \"none\",\n          background: \"transparent\",\n          color: hasActiveChild ? \"var(--Brand-400, #33B88B)\" : \"var(--Content-TertiaryInverse, #B2AEA8)\",\n          fontWeight: 700,\n          fontSize: \"12px\",\n          fontStyle: \"normal\",\n          lineHeight: \"120%\",\n          textTransform: \"uppercase\",\n          fontFamily: \"var(--font-sans)\",\n          cursor: \"pointer\",\n          textAlign: \"left\",\n          transition: \"background 0.15s ease, color 0.15s ease\",\n        }}\n        onMouseEnter={(e) => {\n          e.currentTarget.style.background = \"var(--Background-MonoPressed, #323232)\";\n          e.currentTarget.style.color = \"var(--Brand-400, #33B88B)\";\n        }}\n        onMouseLeave={(e) => {\n          e.currentTarget.style.background = \"transparent\";\n          if (!hasActiveChild) e.currentTarget.style.color = \"var(--Content-TertiaryInverse, #B2AEA8)\";\n          else e.currentTarget.style.color = \"var(--Brand-400, #33B88B)\";\n        }}\n      >\n        <Icon\n          size={18}\n          style={{\n            flexShrink: 0,\n            color: \"inherit\",\n          }}\n        />\n        <span\n          style={{\n            flex: 1,\n            overflow: \"hidden\",\n            textOverflow: \"ellipsis\",\n            whiteSpace: \"nowrap\",\n          }}\n        >\n          {item.label}\n        </span>\n        <ChevronDown\n          size={14}\n          style={{\n            flexShrink: 0,\n            color: \"inherit\",\n            opacity: 0.7,\n            transform: expanded ? \"rotate(0deg)\" : \"rotate(-90deg)\",\n            transition: \"transform 0.2s ease\",\n          }}\n        />\n      </button>\n\n      {/* Children */}\n      {expanded && (\n        <div style={{ paddingLeft: 18, marginTop: 2 }}>\n          {item.children.map((child, idx) => (\n            <SidebarItem\n              key={child.id || idx}\n              item={child}\n              active={child.id === activeId || child.active}\n              onNavigate={onNavigate}\n              collapsed={false}\n            />\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n","import React from 'react';\nimport { LogOut, ChevronDown } from 'lucide-react';\n\n// Stable avatar colors — warm/neutral palette, no purple\nconst AVATAR_COLORS = [\n  '#5a8a6e', // sage green\n  '#b07d4f', // warm amber\n  '#7a8fa6', // slate blue\n  '#c47a5a', // terracotta\n  '#6a9a8a', // teal\n  '#a0785a', // clay\n  '#5a7a9a', // steel blue\n  '#9a7a5a', // caramel\n];\n\nfunction avatarColor(name) {\n  if (!name) return AVATAR_COLORS[0];\n  let hash = 0;\n  for (let i = 0; i < name.length; i++) hash = ((hash << 5) - hash + name.charCodeAt(i)) | 0;\n  return AVATAR_COLORS[Math.abs(hash) % AVATAR_COLORS.length];\n}\n\n/**\n * NavigationBar — top-level app header bar.\n *\n * Slot-based composition: pass children for center content, trailing for right content,\n * or use the built-in user/switcher/actions props for the standard Chordia layout.\n *\n * Props:\n *  - logo          ReactNode   Left-side branding (defaults to \"Chordia\" wordmark)\n *  - title         string      App title shown after logo\n *  - userName      string      User's display name\n *  - userEmail     string      Fallback if no userName\n *  - userRole      string      Role badge (e.g. \"Admin\")\n *  - onSignOut     function    Sign out callback (renders sign out button)\n *  - children      ReactNode   Center slot — switchers, breadcrumbs, tabs, anything\n *  - trailing      ReactNode   Right slot — status indicators, extra actions\n *  - userMenu      ReactNode   Optional custom user menu (replaces built-in user block)\n *  - height        number      Bar height in px (default 48)\n *  - style         object      Style overrides on the root element\n */\nexport default function NavigationBar({\n  logo,\n  title,\n  userName,\n  userEmail,\n  userInitials,\n  userRole,\n  onSignOut,\n  children,\n  trailing,\n  userMenu,\n  height = 48,\n  style,\n}) {\n  const displayName = userName || userEmail || '';\n  const initials = userInitials || getInitials(displayName);\n\n  return (\n    <header\n      style={{\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'space-between',\n        padding: '0 20px',\n        height,\n        borderBottom: '1px solid var(--border)',\n        background: 'var(--paper-elevated)',\n        flexShrink: 0,\n        fontFamily: 'var(--font-sans)',\n        position: 'sticky',\n        top: 0,\n        zIndex: 1000,\n        ...style,\n      }}\n    >\n      {/* ─── Left: Logo + Title ─── */}\n      <div style={{ display: 'flex', alignItems: 'center', gap: 10, flexShrink: 0 }}>\n        {logo !== undefined ? logo : (\n          <span style={{\n            fontSize: 'var(--text-lg)',\n            fontWeight: 700,\n            fontFamily: 'var(--font-display)',\n            color: 'var(--text-ink)',\n            letterSpacing: '-0.01em',\n          }}>\n            Chordia\n          </span>\n        )}\n        {title && (\n          <>\n            <span style={{\n              width: 1,\n              height: 18,\n              background: 'var(--border)',\n              flexShrink: 0,\n            }} />\n            <span style={{\n              fontSize: 'var(--text-md)',\n              fontWeight: 500,\n              color: 'var(--text-muted)',\n            }}>\n              {title}\n            </span>\n          </>\n        )}\n      </div>\n\n      {/* ─── Center: Slot for switchers, breadcrumbs, tabs ─── */}\n      {children && (\n        <div style={{\n          display: 'flex',\n          alignItems: 'center',\n          gap: 8,\n          flex: 1,\n          justifyContent: 'center',\n          minWidth: 0,\n        }}>\n          {children}\n        </div>\n      )}\n\n      {/* ─── Right: User + trailing ─── */}\n      <div\n        style={{\n          display: 'flex',\n          alignItems: 'center',\n          gap: 10,\n          flexShrink: 0,\n        }}\n      >\n        {trailing}\n\n        {userMenu\n          ? userMenu\n          : displayName && (\n          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>\n            {/* Initials avatar */}\n            <div style={{\n              width: 30,\n              height: 30,\n              borderRadius: '50%',\n              background: avatarColor(displayName),\n              display: 'flex',\n              alignItems: 'center',\n              justifyContent: 'center',\n              flexShrink: 0,\n            }}>\n              <span style={{\n                fontSize: 11,\n                fontWeight: 600,\n                color: '#fff',\n                letterSpacing: '0.02em',\n                lineHeight: 1,\n              }}>\n                {initials}\n              </span>\n            </div>\n\n            {/* Name + role */}\n            <div style={{ display: 'flex', flexDirection: 'column', gap: 1 }}>\n              <span style={{\n                fontSize: 'var(--text-sm)',\n                fontWeight: 550,\n                color: 'var(--text-strong)',\n                lineHeight: 1.2,\n              }}>\n                {displayName}\n              </span>\n              {userRole && (\n                <span style={{\n                  fontSize: 'var(--text-xs)',\n                  color: 'var(--text-muted)',\n                  lineHeight: 1.2,\n                }}>\n                  {userRole}\n                </span>\n              )}\n            </div>\n\n            {/* Sign out */}\n            {onSignOut && (\n              <button\n                onClick={onSignOut}\n                title=\"Sign out\"\n                style={{\n                  display: 'flex',\n                  alignItems: 'center',\n                  justifyContent: 'center',\n                  width: 28,\n                  height: 28,\n                  borderRadius: 'var(--radius-sm)',\n                  border: 'none',\n                  background: 'transparent',\n                  color: 'var(--text-faint)',\n                  cursor: 'pointer',\n                  transition: 'background 0.15s ease, color 0.15s ease',\n                }}\n                onMouseEnter={(e) => {\n                  e.currentTarget.style.background = 'var(--hover-warm)';\n                  e.currentTarget.style.color = 'var(--text-muted)';\n                }}\n                onMouseLeave={(e) => {\n                  e.currentTarget.style.background = 'transparent';\n                  e.currentTarget.style.color = 'var(--text-faint)';\n                }}\n              >\n                <LogOut size={14} />\n              </button>\n            )}\n          </div>\n        )}\n      </div>\n    </header>\n  );\n}\n\n/**\n * NavPill — compact switcher button for use inside NavigationBar.\n *\n * Props:\n *  - label     string      Display text\n *  - color     string      Rail color token (e.g. \"var(--rail-discovery)\")\n *  - active    boolean     Whether dropdown is open\n *  - onClick   function    Toggle callback\n */\nexport function NavPill({ label, color = 'var(--text-muted)', active, onClick }) {\n  return (\n    <button\n      onClick={onClick}\n      style={{\n        display: 'flex',\n        alignItems: 'center',\n        gap: 4,\n        fontSize: 'var(--text-sm)',\n        fontWeight: 500,\n        fontFamily: 'var(--font-sans)',\n        padding: '4px 10px',\n        borderRadius: 'var(--radius-sm)',\n        border: `1px solid color-mix(in srgb, ${color} 30%, transparent)`,\n        background: `color-mix(in srgb, ${color} 10%, transparent)`,\n        color: color,\n        cursor: 'pointer',\n        transition: 'background 0.15s ease, border-color 0.15s ease',\n      }}\n      onMouseEnter={(e) => {\n        e.currentTarget.style.background = `color-mix(in srgb, ${color} 18%, transparent)`;\n      }}\n      onMouseLeave={(e) => {\n        e.currentTarget.style.background = `color-mix(in srgb, ${color} 10%, transparent)`;\n      }}\n    >\n      {label}\n      <ChevronDown\n        size={12}\n        style={{\n          transform: active ? 'rotate(180deg)' : 'rotate(0deg)',\n          transition: 'transform 0.2s ease',\n          opacity: 0.7,\n        }}\n      />\n    </button>\n  );\n}\n\n/**\n * NavDropdown — dropdown panel that attaches to a NavPill.\n * Wrap around NavPill and the dropdown content.\n *\n * Props:\n *  - open      boolean     Whether dropdown is visible\n *  - onClose   function    Close callback\n *  - children  ReactNode   Dropdown items\n *  - align     string      \"left\" | \"right\" (default \"left\")\n */\nexport function NavDropdown({ open, onClose, children, align = 'left' }) {\n  if (!open) return null;\n  return (\n    <>\n      <div\n        onClick={onClose}\n        style={{ position: 'fixed', inset: 0, zIndex: 99, background: 'rgba(0,0,0,0.03)' }}\n      />\n      <div style={{\n        position: 'absolute',\n        top: '100%',\n        [align === 'right' ? 'right' : 'left']: 0,\n        marginTop: 4,\n        zIndex: 100,\n        background: '#fff',\n        border: '1px solid var(--border)',\n        borderRadius: 'var(--radius)',\n        padding: 4,\n        minWidth: 200,\n        maxHeight: 280,\n        overflowY: 'auto',\n        boxShadow: '0 8px 24px rgba(0,0,0,0.12)',\n      }}>\n        {children}\n      </div>\n    </>\n  );\n}\n\n/**\n * NavDropdownItem — single item inside NavDropdown.\n *\n * Props:\n *  - label     string\n *  - active    boolean\n *  - onClick   function\n */\nexport function NavDropdownItem({ label, active, onClick }) {\n  return (\n    <div\n      onClick={onClick}\n      style={{\n        padding: '8px 10px',\n        borderRadius: 'var(--radius-sm)',\n        cursor: 'pointer',\n        fontSize: 'var(--text-sm)',\n        color: active ? 'var(--text-ink)' : 'var(--text-base)',\n        fontWeight: active ? 600 : 400,\n        fontFamily: 'var(--font-sans)',\n        background: active ? 'var(--hover-warm)' : 'transparent',\n        transition: 'background 0.1s ease',\n      }}\n      onMouseEnter={(e) => {\n        if (!active) e.currentTarget.style.background = 'var(--hover-warm-subtle)';\n      }}\n      onMouseLeave={(e) => {\n        if (!active) e.currentTarget.style.background = 'transparent';\n      }}\n    >\n      {label}\n    </div>\n  );\n}\n\n/**\n * StatusIndicator — connection/status pill for trailing slot.\n *\n * Props:\n *  - connected   boolean\n *  - label       string (optional, defaults to Connected/Disconnected)\n */\nexport function StatusIndicator({ connected, label }) {\n  const text = label || (connected ? 'Connected' : 'Disconnected');\n  return (\n    <span style={{\n      fontSize: 'var(--text-xs)',\n      fontFamily: 'var(--font-sans)',\n      padding: '3px 10px',\n      borderRadius: 12,\n      border: `1px solid ${connected ? 'var(--state-present)' : 'var(--border)'}`,\n      color: connected ? 'var(--state-present)' : 'var(--text-faint)',\n      background: connected ? 'rgba(37,163,114,0.08)' : 'transparent',\n      transition: 'all 0.2s ease',\n    }}>\n      {text}\n    </span>\n  );\n}\n\nfunction getInitials(name) {\n  if (!name) return '?';\n  const parts = name.trim().split(/\\s+/);\n  if (parts.length >= 2) {\n    return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();\n  }\n  return name.slice(0, 2).toUpperCase();\n}\n"],"names":["ICON_MAP","Home","FolderClosed","Users","LayoutDashboard","Clock3","Activity","Lightbulb","Bell","Plug","Settings","BarChart3","FileText","Headphones","Shield","Sliders","Workflow","resolveIcon","icon","SquareDot","Sidebar","menuItems","activeId","onNavigate","controlledCollapsed","onToggleCollapse","header","footer","width","collapsedWidth","internalCollapsed","setInternalCollapsed","useState","collapsed","toggleCollapse","expandedGroups","setExpandedGroups","initial","item","_a","hasActive","c","toggleGroup","id","prev","currentWidth","jsxs","jsx","e","PanelLeft","PanelLeftClose","idx","React","SidebarGroup","SidebarItem","active","Icon","isReactIcon","expanded","onToggle","hasActiveChild","ChevronDown","child","AVATAR_COLORS","avatarColor","name","hash","i","NavigationBar","logo","title","userName","userEmail","userInitials","userRole","onSignOut","children","trailing","userMenu","height","style","displayName","initials","getInitials","Fragment","LogOut","NavPill","label","color","onClick","NavDropdown","open","onClose","align","NavDropdownItem","StatusIndicator","connected","parts"],"mappings":"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"}
+{"version":3,"file":"navigation.es.js","sources":["../../src/components/navigation/Sidebar.jsx","../../src/components/navigation/NavigationBar.jsx"],"sourcesContent":["\"use client\";\n\nimport React, { useState } from \"react\";\nimport {\n  Home, FolderClosed, Users, Settings, ChevronDown,\n  LayoutDashboard, Clock3, Activity, Lightbulb, Bell, Plug, BarChart3,\n  FileText, Headphones, Shield, Sliders, Workflow, SquareDot,\n  PanelLeftClose, PanelLeft,\n} from \"lucide-react\";\n\n/**\n * Sidebar — collapsible navigation sidebar.\n *\n * Slot-based: pass menuItems as data, component handles rendering + expand/collapse.\n * No framework dependencies (no router, no auth, no API calls).\n *\n * Props:\n *  - menuItems       Array<MenuItem>   Navigation items (see shape below)\n *  - activeId        string            Currently active item id\n *  - onNavigate      function(href)    Navigation callback\n *  - collapsed       boolean           External collapsed state (controlled)\n *  - onToggleCollapse function         Toggle callback\n *  - header          ReactNode         Optional header slot (logo, brand)\n *  - footer          ReactNode         Optional footer slot (user, settings)\n *  - width           number            Expanded width (default 240)\n *  - collapsedWidth  number            Collapsed width (default 56)\n *\n * MenuItem shape:\n *  - id       string\n *  - label    string\n *  - icon     string (key from ICON_MAP) or ReactNode\n *  - href     string\n *  - active   boolean (override)\n *  - children Array<MenuItem> (nested group)\n *  - section  string (section label above this item)\n */\n\nconst ICON_MAP = {\n  home: Home,\n  projects: FolderClosed,\n  folder: FolderClosed,\n  organization: Users,\n  users: Users,\n  dashboard: LayoutDashboard,\n  history: Clock3,\n  sessions: Clock3,\n  monitoring: Activity,\n  activity: Activity,\n  insights: Lightbulb,\n  notifications: Bell,\n  integrations: Plug,\n  settings: Settings,\n  usage: BarChart3,\n  docs: FileText,\n  documentation: FileText,\n  agents: Headphones,\n  security: Shield,\n  configuration: Sliders,\n  workflow: Workflow,\n};\n\nfunction resolveIcon(icon) {\n  if (!icon) return SquareDot;\n  if (typeof icon === \"string\") return ICON_MAP[icon.toLowerCase()] || SquareDot;\n  return icon;\n}\n\nexport default function Sidebar({\n  menuItems = [],\n  activeId,\n  onNavigate,\n  collapsed: controlledCollapsed,\n  onToggleCollapse,\n  header,\n  footer,\n  width = 244,\n  collapsedWidth = 56,\n}) {\n  const [internalCollapsed, setInternalCollapsed] = useState(false);\n  const collapsed = controlledCollapsed !== undefined ? controlledCollapsed : internalCollapsed;\n  const toggleCollapse = onToggleCollapse || (() => setInternalCollapsed(!internalCollapsed));\n\n  const [expandedGroups, setExpandedGroups] = useState(() => {\n    const initial = {};\n    menuItems.forEach((item) => {\n      if (item.children?.length) {\n        // Auto-expand groups that contain the active item\n        const hasActive = item.children.some((c) => c.id === activeId || c.active);\n        initial[item.id] = hasActive;\n      }\n    });\n    return initial;\n  });\n\n  const toggleGroup = (id) => {\n    setExpandedGroups((prev) => ({ ...prev, [id]: !prev[id] }));\n  };\n\n  const currentWidth = collapsed ? collapsedWidth : width;\n\n  return (\n    <nav\n      style={{\n        width: currentWidth,\n        minWidth: currentWidth,\n        height: \"100%\",\n        display: \"flex\",\n        flexDirection: \"column\",\n        alignItems: \"flex-start\",\n        padding: collapsed ? \"0\" : \"0 0 24px 24px\",\n        gap: 24,\n        background: \"var(--Background-Inverse, #0B0B0B)\",\n        fontFamily: \"var(--font-sans)\",\n        transition: \"width 0.2s ease, min-width 0.2s ease\",\n        overflow: \"hidden\",\n        flexShrink: 0,\n      }}\n    >\n      {/* Header + Collapse toggle in one row */}\n      <div\n        style={{\n          display: \"flex\",\n          alignItems: \"center\",\n          justifyContent: collapsed ? \"center\" : \"space-between\",\n          padding: collapsed ? \"12px 0\" : \"12px 0 0\",\n          flexShrink: 0,\n          width: \"100%\",\n        }}\n      >\n        {header && !collapsed && (\n          <div style={{ flexShrink: 0 }}>\n            {header}\n          </div>\n        )}\n        <button\n          onClick={toggleCollapse}\n          title={collapsed ? \"Expand sidebar\" : \"Collapse sidebar\"}\n          style={{\n            display: \"flex\",\n            alignItems: \"center\",\n            justifyContent: \"center\",\n            width: 28,\n            height: 28,\n            borderRadius: \"var(--radius-sm)\",\n            border: \"none\",\n            background: \"transparent\",\n            color: \"rgba(255, 255, 255, 0.5)\",\n            cursor: \"pointer\",\n            transition: \"background 0.15s ease, color 0.15s ease\",\n            flexShrink: 0,\n          }}\n          onMouseEnter={(e) => {\n            e.currentTarget.style.background = \"rgba(255, 255, 255, 0.08)\";\n            e.currentTarget.style.color = \"rgba(255, 255, 255, 0.8)\";\n          }}\n          onMouseLeave={(e) => {\n            e.currentTarget.style.background = \"transparent\";\n            e.currentTarget.style.color = \"rgba(255, 255, 255, 0.5)\";\n          }}\n        >\n          {collapsed ? <PanelLeft size={16} /> : <PanelLeftClose size={16} />}\n        </button>\n      </div>\n\n      {/* Menu items */}\n      <div\n        style={{\n          flex: 1,\n          overflowY: \"auto\",\n          overflowX: \"hidden\",\n          padding: collapsed ? \"0 8px\" : \"0\",\n          width: \"100%\",\n        }}\n      >\n        {menuItems.map((item, idx) => (\n          <React.Fragment key={item.id || idx}>\n            {/* Section label */}\n            {item.section && !collapsed && (\n              <div\n                style={{\n                  fontSize: \"var(--text-xs)\",\n                  fontWeight: 650,\n                  letterSpacing: \"0.08em\",\n                  textTransform: \"uppercase\",\n                  color: \"rgba(255, 255, 255, 0.35)\",\n                  padding: \"16px 8px 6px\",\n                  lineHeight: 1,\n                }}\n              >\n                {item.section}\n              </div>\n            )}\n\n            {item.children?.length ? (\n              <SidebarGroup\n                item={item}\n                activeId={activeId}\n                expanded={!!expandedGroups[item.id]}\n                onToggle={() => toggleGroup(item.id)}\n                onNavigate={onNavigate}\n                collapsed={collapsed}\n              />\n            ) : (\n              <SidebarItem\n                item={item}\n                active={item.id === activeId || item.active}\n                onNavigate={onNavigate}\n                collapsed={collapsed}\n              />\n            )}\n          </React.Fragment>\n        ))}\n      </div>\n\n      {/* Footer slot */}\n      {footer && !collapsed && (\n        <div\n          style={{\n            padding: \"12px 16px\",\n            borderTop: \"1px solid rgba(255, 255, 255, 0.08)\",\n            flexShrink: 0,\n            width: \"100%\",\n          }}\n        >\n          {footer}\n        </div>\n      )}\n    </nav>\n  );\n}\n\nfunction SidebarItem({ item, active, onNavigate, collapsed }) {\n  const Icon = resolveIcon(item.icon);\n  const isReactIcon = typeof item.icon !== \"string\" && typeof item.icon !== \"undefined\";\n\n  return (\n    <button\n      onClick={() => onNavigate?.(item.href || item.id)}\n      title={collapsed ? item.label : undefined}\n      style={{\n        display: \"flex\",\n        alignItems: \"center\",\n        gap: collapsed ? 0 : 12,\n        justifyContent: collapsed ? \"center\" : \"flex-start\",\n        width: \"100%\",\n        padding: collapsed ? \"10px 0\" : \"12px 24px 12px 12px\",\n        borderRadius: active ? \"4px 0 0 4px\" : \"4px\",\n        borderRight: active ? \"2px solid #00A66E\" : \"2px solid transparent\",\n        borderTop: \"none\",\n        borderBottom: \"none\",\n        borderLeft: \"none\",\n        background: active ? \"var(--Background-MonoPressed, #323232)\" : \"transparent\",\n        color: active ? \"var(--Brand-400, #33B88B)\" : \"var(--Content-TertiaryInverse, #B2AEA8)\",\n        fontWeight: 500,\n        fontSize: \"12px\",\n        fontStyle: \"normal\",\n        lineHeight: \"120%\",\n        textTransform: \"uppercase\",\n        fontFamily: \"var(--font-sans)\",\n        cursor: \"pointer\",\n        textAlign: \"left\",\n        transition: \"background 0.15s ease, color 0.1s ease, border-color 0.15s ease\",\n        marginBottom: 2,\n      }}\n      onMouseEnter={(e) => {\n        if (!active) {\n          e.currentTarget.style.background = \"var(--Background-MonoPressed, #323232)\";\n          e.currentTarget.style.color = \"var(--Brand-400, #33B88B)\";\n        }\n      }}\n      onMouseLeave={(e) => {\n        if (!active) {\n          e.currentTarget.style.background = \"transparent\";\n          e.currentTarget.style.color = \"var(--Content-TertiaryInverse, #B2AEA8)\";\n        }\n      }}\n    >\n      {isReactIcon ? (\n        <span style={{ flexShrink: 0, display: \"flex\" }}>{item.icon}</span>\n      ) : (\n        <Icon\n          size={18}\n          style={{\n            flexShrink: 0,\n            color: \"inherit\",\n          }}\n        />\n      )}\n      {!collapsed && (\n        <span\n          style={{\n            overflow: \"hidden\",\n            textOverflow: \"ellipsis\",\n            whiteSpace: \"nowrap\",\n          }}\n        >\n          {item.label}\n        </span>\n      )}\n    </button>\n  );\n}\n\nfunction SidebarGroup({ item, activeId, expanded, onToggle, onNavigate, collapsed }) {\n  const Icon = resolveIcon(item.icon);\n  const hasActiveChild = item.children?.some((c) => c.id === activeId || c.active);\n\n  if (collapsed) {\n    // In collapsed mode, show just the group icon\n    return (\n      <button\n        onClick={onToggle}\n        title={item.label}\n        style={{\n          display: \"flex\",\n          alignItems: \"center\",\n          justifyContent: \"center\",\n          width: \"100%\",\n          padding: \"10px 0\",\n          borderRadius: \"4px\",\n          border: \"none\",\n          background: hasActiveChild ? \"var(--Background-MonoPressed, #323232)\" : \"transparent\",\n          color: hasActiveChild ? \"var(--Brand-400, #33B88B)\" : \"var(--Content-TertiaryInverse, #B2AEA8)\",\n          cursor: \"pointer\",\n          marginBottom: 2,\n          transition: \"background 0.15s ease\",\n        }}\n        onMouseEnter={(e) => {\n          if (!hasActiveChild) {\n            e.currentTarget.style.background = \"var(--Background-MonoPressed, #323232)\";\n            e.currentTarget.style.color = \"var(--Brand-400, #33B88B)\";\n          }\n        }}\n        onMouseLeave={(e) => {\n          if (!hasActiveChild) {\n            e.currentTarget.style.background = \"transparent\";\n            e.currentTarget.style.color = \"var(--Content-TertiaryInverse, #B2AEA8)\";\n          }\n        }}\n      >\n        <Icon\n          size={18}\n          style={{ color: \"inherit\" }}\n        />\n      </button>\n    );\n  }\n\n  return (\n    <div style={{ marginBottom: 2 }}>\n      {/* Group header */}\n      <button\n        onClick={onToggle}\n        style={{\n          display: \"flex\",\n          alignItems: \"center\",\n          gap: 12,\n          width: \"100%\",\n          padding: \"12px 24px 12px 12px\",\n          borderRadius: \"4px\",\n          border: \"none\",\n          background: \"transparent\",\n          color: hasActiveChild ? \"var(--Brand-400, #33B88B)\" : \"var(--Content-TertiaryInverse, #B2AEA8)\",\n          fontWeight: 700,\n          fontSize: \"12px\",\n          fontStyle: \"normal\",\n          lineHeight: \"120%\",\n          textTransform: \"uppercase\",\n          fontFamily: \"var(--font-sans)\",\n          cursor: \"pointer\",\n          textAlign: \"left\",\n          transition: \"background 0.15s ease, color 0.15s ease\",\n        }}\n        onMouseEnter={(e) => {\n          e.currentTarget.style.background = \"var(--Background-MonoPressed, #323232)\";\n          e.currentTarget.style.color = \"var(--Brand-400, #33B88B)\";\n        }}\n        onMouseLeave={(e) => {\n          e.currentTarget.style.background = \"transparent\";\n          if (!hasActiveChild) e.currentTarget.style.color = \"var(--Content-TertiaryInverse, #B2AEA8)\";\n          else e.currentTarget.style.color = \"var(--Brand-400, #33B88B)\";\n        }}\n      >\n        <Icon\n          size={18}\n          style={{\n            flexShrink: 0,\n            color: \"inherit\",\n          }}\n        />\n        <span\n          style={{\n            flex: 1,\n            overflow: \"hidden\",\n            textOverflow: \"ellipsis\",\n            whiteSpace: \"nowrap\",\n          }}\n        >\n          {item.label}\n        </span>\n        <ChevronDown\n          size={14}\n          style={{\n            flexShrink: 0,\n            color: \"inherit\",\n            opacity: 0.7,\n            transform: expanded ? \"rotate(0deg)\" : \"rotate(-90deg)\",\n            transition: \"transform 0.2s ease\",\n          }}\n        />\n      </button>\n\n      {/* Children */}\n      {expanded && (\n        <div style={{ paddingLeft: 18, marginTop: 2 }}>\n          {item.children.map((child, idx) => (\n            <SidebarItem\n              key={child.id || idx}\n              item={child}\n              active={child.id === activeId || child.active}\n              onNavigate={onNavigate}\n              collapsed={false}\n            />\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n","import React from 'react';\nimport { LogOut, ChevronDown } from 'lucide-react';\n\n// Stable avatar colors — warm/neutral palette, no purple\nconst AVATAR_COLORS = [\n  '#5a8a6e', // sage green\n  '#b07d4f', // warm amber\n  '#7a8fa6', // slate blue\n  '#c47a5a', // terracotta\n  '#6a9a8a', // teal\n  '#a0785a', // clay\n  '#5a7a9a', // steel blue\n  '#9a7a5a', // caramel\n];\n\nfunction avatarColor(name) {\n  if (!name) return AVATAR_COLORS[0];\n  let hash = 0;\n  for (let i = 0; i < name.length; i++) hash = ((hash << 5) - hash + name.charCodeAt(i)) | 0;\n  return AVATAR_COLORS[Math.abs(hash) % AVATAR_COLORS.length];\n}\n\n/**\n * NavigationBar — top-level app header bar.\n *\n * Slot-based composition: pass children for center content, trailing for right content,\n * or use the built-in user/switcher/actions props for the standard Chordia layout.\n *\n * Props:\n *  - logo          ReactNode   Left-side branding (defaults to \"Chordia\" wordmark)\n *  - title         string      App title shown after logo\n *  - userName      string      User's display name\n *  - userEmail     string      Fallback if no userName\n *  - userRole      string      Role badge (e.g. \"Admin\")\n *  - onSignOut     function    Sign out callback (renders sign out button)\n *  - children      ReactNode   Center slot — switchers, breadcrumbs, tabs, anything\n *  - trailing      ReactNode   Right slot — status indicators, extra actions\n *  - userMenu      ReactNode   Optional custom user menu (replaces built-in user block)\n *  - height        number      Bar height in px (default 48)\n *  - style         object      Style overrides on the root element\n */\nexport default function NavigationBar({\n  logo,\n  title,\n  userName,\n  userEmail,\n  userInitials,\n  userRole,\n  onSignOut,\n  children,\n  trailing,\n  userMenu,\n  height = 48,\n  style,\n}) {\n  const displayName = userName || userEmail || '';\n  const initials = userInitials || getInitials(displayName);\n\n  return (\n    <header\n      style={{\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'space-between',\n        padding: '0 20px',\n        height,\n        borderBottom: '1px solid var(--border)',\n        background: 'var(--paper-elevated)',\n        flexShrink: 0,\n        fontFamily: 'var(--font-sans)',\n        position: 'sticky',\n        top: 0,\n        zIndex: 1000,\n        ...style,\n      }}\n    >\n      {/* ─── Left: Logo + Title ─── */}\n      <div style={{ display: 'flex', alignItems: 'center', gap: 10, flexShrink: 0 }}>\n        {logo !== undefined ? logo : (\n          <span style={{\n            fontSize: 'var(--text-lg)',\n            fontWeight: 700,\n            fontFamily: 'var(--font-display)',\n            color: 'var(--text-ink)',\n            letterSpacing: '-0.01em',\n          }}>\n            Chordia\n          </span>\n        )}\n        {title && (\n          <>\n            <span style={{\n              width: 1,\n              height: 18,\n              background: 'var(--border)',\n              flexShrink: 0,\n            }} />\n            <span style={{\n              fontSize: 'var(--text-md)',\n              fontWeight: 500,\n              color: 'var(--text-muted)',\n            }}>\n              {title}\n            </span>\n          </>\n        )}\n      </div>\n\n      {/* ─── Center: Slot for switchers, breadcrumbs, tabs ─── */}\n      {children && (\n        <div style={{\n          display: 'flex',\n          alignItems: 'center',\n          gap: 8,\n          flex: 1,\n          justifyContent: 'center',\n          minWidth: 0,\n        }}>\n          {children}\n        </div>\n      )}\n\n      {/* ─── Right: User + trailing ─── */}\n      <div\n        style={{\n          display: 'flex',\n          alignItems: 'center',\n          gap: 10,\n          flexShrink: 0,\n        }}\n      >\n        {trailing}\n\n        {userMenu\n          ? userMenu\n          : displayName && (\n          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>\n            {/* Initials avatar */}\n            <div style={{\n              width: 30,\n              height: 30,\n              borderRadius: '50%',\n              background: avatarColor(displayName),\n              display: 'flex',\n              alignItems: 'center',\n              justifyContent: 'center',\n              flexShrink: 0,\n            }}>\n              <span style={{\n                fontSize: 11,\n                fontWeight: 600,\n                color: '#fff',\n                letterSpacing: '0.02em',\n                lineHeight: 1,\n              }}>\n                {initials}\n              </span>\n            </div>\n\n            {/* Name + role */}\n            <div style={{ display: 'flex', flexDirection: 'column', gap: 1 }}>\n              <span style={{\n                fontSize: 'var(--text-sm)',\n                fontWeight: 550,\n                color: 'var(--text-strong)',\n                lineHeight: 1.2,\n              }}>\n                {displayName}\n              </span>\n              {userRole && (\n                <span style={{\n                  fontSize: 'var(--text-xs)',\n                  color: 'var(--text-muted)',\n                  lineHeight: 1.2,\n                }}>\n                  {userRole}\n                </span>\n              )}\n            </div>\n\n            {/* Sign out */}\n            {onSignOut && (\n              <button\n                onClick={onSignOut}\n                title=\"Sign out\"\n                style={{\n                  display: 'flex',\n                  alignItems: 'center',\n                  justifyContent: 'center',\n                  width: 28,\n                  height: 28,\n                  borderRadius: 'var(--radius-sm)',\n                  border: 'none',\n                  background: 'transparent',\n                  color: 'var(--text-faint)',\n                  cursor: 'pointer',\n                  transition: 'background 0.15s ease, color 0.15s ease',\n                }}\n                onMouseEnter={(e) => {\n                  e.currentTarget.style.background = 'var(--hover-warm)';\n                  e.currentTarget.style.color = 'var(--text-muted)';\n                }}\n                onMouseLeave={(e) => {\n                  e.currentTarget.style.background = 'transparent';\n                  e.currentTarget.style.color = 'var(--text-faint)';\n                }}\n              >\n                <LogOut size={14} />\n              </button>\n            )}\n          </div>\n        )}\n      </div>\n    </header>\n  );\n}\n\n/**\n * NavPill — compact switcher button for use inside NavigationBar.\n *\n * Props:\n *  - label     string      Display text\n *  - color     string      Rail color token (e.g. \"var(--rail-discovery)\")\n *  - active    boolean     Whether dropdown is open\n *  - onClick   function    Toggle callback\n */\nexport function NavPill({ label, color = 'var(--text-muted)', active, onClick }) {\n  return (\n    <button\n      onClick={onClick}\n      style={{\n        display: 'flex',\n        alignItems: 'center',\n        gap: 4,\n        fontSize: 'var(--text-sm)',\n        fontWeight: 500,\n        fontFamily: 'var(--font-sans)',\n        padding: '4px 10px',\n        borderRadius: 'var(--radius-sm)',\n        border: `1px solid color-mix(in srgb, ${color} 30%, transparent)`,\n        background: `color-mix(in srgb, ${color} 10%, transparent)`,\n        color: color,\n        cursor: 'pointer',\n        transition: 'background 0.15s ease, border-color 0.15s ease',\n      }}\n      onMouseEnter={(e) => {\n        e.currentTarget.style.background = `color-mix(in srgb, ${color} 18%, transparent)`;\n      }}\n      onMouseLeave={(e) => {\n        e.currentTarget.style.background = `color-mix(in srgb, ${color} 10%, transparent)`;\n      }}\n    >\n      {label}\n      <ChevronDown\n        size={12}\n        style={{\n          transform: active ? 'rotate(180deg)' : 'rotate(0deg)',\n          transition: 'transform 0.2s ease',\n          opacity: 0.7,\n        }}\n      />\n    </button>\n  );\n}\n\n/**\n * NavDropdown — dropdown panel that attaches to a NavPill.\n * Wrap around NavPill and the dropdown content.\n *\n * Props:\n *  - open      boolean     Whether dropdown is visible\n *  - onClose   function    Close callback\n *  - children  ReactNode   Dropdown items\n *  - align     string      \"left\" | \"right\" (default \"left\")\n */\nexport function NavDropdown({ open, onClose, children, align = 'left' }) {\n  if (!open) return null;\n  return (\n    <>\n      <div\n        onClick={onClose}\n        style={{ position: 'fixed', inset: 0, zIndex: 99, background: 'rgba(0,0,0,0.03)' }}\n      />\n      <div style={{\n        position: 'absolute',\n        top: '100%',\n        [align === 'right' ? 'right' : 'left']: 0,\n        marginTop: 4,\n        zIndex: 100,\n        background: '#fff',\n        border: '1px solid var(--border)',\n        borderRadius: 'var(--radius)',\n        padding: 4,\n        minWidth: 200,\n        maxHeight: 280,\n        overflowY: 'auto',\n        boxShadow: '0 8px 24px rgba(0,0,0,0.12)',\n      }}>\n        {children}\n      </div>\n    </>\n  );\n}\n\n/**\n * NavDropdownItem — single item inside NavDropdown.\n *\n * Props:\n *  - label     string\n *  - active    boolean\n *  - onClick   function\n */\nexport function NavDropdownItem({ label, active, onClick }) {\n  return (\n    <div\n      onClick={onClick}\n      style={{\n        padding: '8px 10px',\n        borderRadius: 'var(--radius-sm)',\n        cursor: 'pointer',\n        fontSize: 'var(--text-sm)',\n        color: active ? 'var(--text-ink)' : 'var(--text-base)',\n        fontWeight: active ? 600 : 400,\n        fontFamily: 'var(--font-sans)',\n        background: active ? 'var(--hover-warm)' : 'transparent',\n        transition: 'background 0.1s ease',\n      }}\n      onMouseEnter={(e) => {\n        if (!active) e.currentTarget.style.background = 'var(--hover-warm-subtle)';\n      }}\n      onMouseLeave={(e) => {\n        if (!active) e.currentTarget.style.background = 'transparent';\n      }}\n    >\n      {label}\n    </div>\n  );\n}\n\n/**\n * StatusIndicator — connection/status pill for trailing slot.\n *\n * Props:\n *  - connected   boolean\n *  - label       string (optional, defaults to Connected/Disconnected)\n */\nexport function StatusIndicator({ connected, label }) {\n  const text = label || (connected ? 'Connected' : 'Disconnected');\n  return (\n    <span style={{\n      fontSize: 'var(--text-xs)',\n      fontFamily: 'var(--font-sans)',\n      padding: '3px 10px',\n      borderRadius: 12,\n      border: `1px solid ${connected ? 'var(--state-present)' : 'var(--border)'}`,\n      color: connected ? 'var(--state-present)' : 'var(--text-faint)',\n      background: connected ? 'rgba(37,163,114,0.08)' : 'transparent',\n      transition: 'all 0.2s ease',\n    }}>\n      {text}\n    </span>\n  );\n}\n\nfunction getInitials(name) {\n  if (!name) return '?';\n  const parts = name.trim().split(/\\s+/);\n  if (parts.length >= 2) {\n    return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();\n  }\n  return name.slice(0, 2).toUpperCase();\n}\n"],"names":["ICON_MAP","Home","FolderClosed","Users","LayoutDashboard","Clock3","Activity","Lightbulb","Bell","Plug","Settings","BarChart3","FileText","Headphones","Shield","Sliders","Workflow","resolveIcon","icon","SquareDot","Sidebar","menuItems","activeId","onNavigate","controlledCollapsed","onToggleCollapse","header","footer","width","collapsedWidth","internalCollapsed","setInternalCollapsed","useState","collapsed","toggleCollapse","expandedGroups","setExpandedGroups","initial","item","_a","hasActive","c","toggleGroup","id","prev","currentWidth","jsxs","jsx","e","PanelLeft","PanelLeftClose","idx","React","SidebarGroup","SidebarItem","active","Icon","isReactIcon","expanded","onToggle","hasActiveChild","ChevronDown","child","AVATAR_COLORS","avatarColor","name","hash","i","NavigationBar","logo","title","userName","userEmail","userInitials","userRole","onSignOut","children","trailing","userMenu","height","style","displayName","initials","getInitials","Fragment","LogOut","NavPill","label","color","onClick","NavDropdown","open","onClose","align","NavDropdownItem","StatusIndicator","connected","parts"],"mappings":"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"}

package/dist/style.css

@@ -1 +1 @@
-:root{--font-sans: "Averta", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-display: "Tomato Grotesk", "Averta", ui-sans-serif, system-ui, sans-serif;--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--default-font-family: var(--font-sans);--default-mono-font-family: var(--font-mono);--bg-chordia: #F4F1E6;--paper: rgba(255, 255, 255, .78);--paper-secondary: rgba(255, 255, 255, .55);--paper-elevated: rgba(255, 255, 255, .82);--paper-high: rgba(255, 255, 255, .85);--text-ink: #1E2125;--text-base: rgba(30, 33, 37, .78);--text-strong: rgba(30, 33, 37, .92);--text-muted: rgba(30, 33, 37, .56);--text-faint: rgba(30, 33, 37, .36);--text-subtle: rgba(30, 33, 37, .52);--text-xfaint: rgba(30, 33, 37, .28);--border: rgba(52, 58, 64, .12);--border-hover: rgba(52, 58, 64, .18);--border-strong: rgba(52, 58, 64, .22);--border-subtle: rgba(52, 58, 64, .08);--hover-warm: rgba(231, 212, 162, .12);--hover-warm-strong: rgba(231, 212, 162, .18);--hover-warm-subtle: rgba(231, 212, 162, .08);--hover-cool: rgba(210, 220, 235, .18);--focus: rgba(231, 212, 162, .55);--state-present: #25A372;--state-absent: rgba(30, 33, 37, .28);--state-unknown: #E7BF33;--rail-compliance: #C98A5A;--rail-orange: #C98A5A;--rail-tone: #9B7AA8;--rail-purple: #9B7AA8;--rail-discovery: #5E88B0;--rail-blue: #5E88B0;--rail-outcome: #6B7C93;--rail-slate: #6B7C93;--rail-signal-churn: #D17B6B;--rail-coral: #D17B6B;--rail-signal-upsell: #7BA89D;--rail-teal: #B8976A;--rail-signal-satisfaction: #9B8E6F;--rail-olive: #9B8E6F;--rail-quality: #8A9BAF;--card-customer: rgba(94, 136, 176, .06);--card-agent: var(--paper-elevated);--card-assistant: rgba(155, 122, 168, .05);--rail-width-thin: 4px;--rail-width: 5px;--rail-width-thick: 6px;--deviation-dot-size: 6px;--deviation-gap: 3px;--timestamp-bg: rgba(255, 255, 255, .7);--timestamp-border: rgba(52, 58, 64, .16);--bar-h: 3px;--bar-w: 45px;--bar-bg: rgba(30, 33, 37, .12);--bar-fill: rgba(30, 33, 37, .45);--tooltip-bg: rgba(30, 33, 37, .95);--tooltip-text: rgba(255, 255, 255, .95);--background: var(--bg-chordia);--foreground: var(--text-ink);--card: var(--paper-elevated);--card-foreground: var(--text-ink);--popover: var(--paper-high);--popover-foreground: var(--text-ink);--primary: #030213;--primary-foreground: #ffffff;--secondary: rgba(249, 250, 251, 1);--secondary-foreground: #030213;--accent: rgba(233, 235, 239, 1);--accent-foreground: #030213;--destructive: #C98A5A;--destructive-foreground: #ffffff;--input: transparent;--input-background: rgba(243, 243, 245, 1);--switch-background: rgba(203, 206, 212, 1);--ring: rgba(113, 113, 122, .5);--chart-1: #25A372;--chart-2: #44C090;--chart-3: #B7D89E;--chart-4: #E7BF33;--chart-5: #C98A5A;--sidebar: var(--paper-high);--sidebar-foreground: var(--text-ink);--sidebar-primary: #030213;--sidebar-primary-foreground: #ffffff;--sidebar-accent: var(--hover-warm-subtle);--sidebar-accent-foreground: var(--text-ink);--sidebar-border: var(--border);--sidebar-ring: var(--ring);--bg: var(--bg-chordia);--paper2: var(--paper-secondary);--ink: var(--text-ink);--text: var(--text-base);--muted: var(--text-muted);--faint: var(--text-faint);--b1: var(--border);--b2: var(--border-hover);--warm: var(--hover-warm);--cool: var(--hover-cool);--present: var(--state-present);--absent: var(--state-absent);--unknown: var(--state-unknown);--s1: var(--shadow-lg);--s2: var(--shadow-md);--r1: var(--radius-lg);--r2: var(--radius-md);--font-size: .875rem;--color-green: #00A66E;--color-green-hover: #009160;--color-green-disabled: #80d3b7;--color-green-ring: rgba(0, 166, 110, .12);--surface-dark: #1D1E20;--surface-card-dark: linear-gradient(180deg, #48473B 0%, #26261F 100%);--surface-card-dark-border: #333A42;--color-card-icon: #000000;--color-card-text: #ffffff;--color-text: #2E3236;--color-text-secondary: #808183;--color-text-inverse: #E8E6E1;--color-text-overlay: rgba(255, 255, 255, .5);--color-input-border: #ACADAD;--color-divider: #E5E7EB;--color-error: #E15448;--color-error-border: #ED8077;--color-error-ring: rgba(237, 128, 119, .12);--color-error-bg: #F3F7F7;--grey-white: #FFFFFF;--grey-absent: #D9D9D9;--grey-muted: #BDBDBD;--grey-strong: var(--color-text);--focus-2: #FAF5E9;--gradient-card-active: linear-gradient(160deg, #4A5330 0%, #252C14 100%);--gradient-card-inactive: linear-gradient(160deg, rgba(74, 83, 48, .25) 0%, rgba(37, 44, 20, .35) 100%)}.custom-thin-scrollbar-library::-webkit-scrollbar{width:4px;background:transparent;border-radius:2px}.custom-thin-scrollbar-library::-webkit-scrollbar-track{background:transparent}.custom-thin-scrollbar-library::-webkit-scrollbar-thumb{background:rgb(180,178,178);border-radius:2px}.custom-thin-scrollbar-library::-webkit-scrollbar-thumb:hover{background:var(--border-hover)}.custom-thin-scrollbar-library-hidden::-webkit-scrollbar{width:0px;background:transparent}.custom-thin-scrollbar-library-hidden::-webkit-scrollbar-track{background:transparent}.custom-thin-scrollbar-library-hidden::-webkit-scrollbar-thumb{background:transparent}.custom-thin-scrollbar-hidden{scrollbar-width:none;-ms-overflow-style:none}.custom-thin-scrollbar-ultra::-webkit-scrollbar{width:2px;background:transparent}.custom-thin-scrollbar-ultra::-webkit-scrollbar-track{background:transparent}.custom-thin-scrollbar-ultra::-webkit-scrollbar-thumb{background:var(--border);border-radius:1px}.custom-thin-scrollbar-ultra::-webkit-scrollbar-thumb:hover{background:var(--border-hover)}.custom-thin-scrollbar-ultra{scrollbar-width:thin;scrollbar-color:var(--border) transparent}
+:root{--font-sans: "Averta", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-display: "Tomato Grotesk", "Averta", ui-sans-serif, system-ui, sans-serif;--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--default-font-family: var(--font-sans);--default-mono-font-family: var(--font-mono);--bg-chordia: #F4F1E6;--paper: rgba(255, 255, 255, .78);--paper-secondary: rgba(255, 255, 255, .55);--paper-elevated: rgba(255, 255, 255, .82);--paper-high: rgba(255, 255, 255, .85);--text-ink: #1E2125;--text-base: rgba(30, 33, 37, .78);--text-strong: rgba(30, 33, 37, .92);--text-muted: rgba(30, 33, 37, .56);--text-faint: rgba(30, 33, 37, .36);--text-subtle: rgba(30, 33, 37, .52);--text-xfaint: rgba(30, 33, 37, .28);--border: rgba(52, 58, 64, .12);--border-hover: rgba(52, 58, 64, .18);--border-strong: rgba(52, 58, 64, .22);--border-subtle: rgba(52, 58, 64, .08);--hover-warm: rgba(231, 212, 162, .12);--hover-warm-strong: rgba(231, 212, 162, .18);--hover-warm-subtle: rgba(231, 212, 162, .08);--hover-cool: rgba(210, 220, 235, .18);--focus: rgba(231, 212, 162, .55);--state-present: #25A372;--state-absent: rgba(30, 33, 37, .28);--state-unknown: #E7BF33;--rail-compliance: #C98A5A;--rail-orange: #C98A5A;--rail-tone: #9B7AA8;--rail-purple: #9B7AA8;--rail-discovery: #5E88B0;--rail-blue: #5E88B0;--rail-outcome: #6B7C93;--rail-slate: #6B7C93;--rail-signal-churn: #D17B6B;--rail-coral: #D17B6B;--rail-signal-upsell: #7BA89D;--rail-teal: #B8976A;--rail-signal-satisfaction: #9B8E6F;--rail-olive: #9B8E6F;--rail-quality: #8A9BAF;--card-customer: rgba(94, 136, 176, .06);--card-agent: var(--paper-elevated);--card-assistant: rgba(155, 122, 168, .05);--rail-width-thin: 4px;--rail-width: 5px;--rail-width-thick: 6px;--deviation-dot-size: 6px;--deviation-gap: 3px;--timestamp-bg: rgba(255, 255, 255, .7);--timestamp-border: rgba(52, 58, 64, .16);--bar-h: 3px;--bar-w: 45px;--bar-bg: rgba(30, 33, 37, .12);--bar-fill: rgba(30, 33, 37, .45);--tooltip-bg: rgba(30, 33, 37, .95);--tooltip-text: rgba(255, 255, 255, .95);--background: var(--bg-chordia);--foreground: var(--text-ink);--card: var(--paper-elevated);--card-foreground: var(--text-ink);--popover: var(--paper-high);--popover-foreground: var(--text-ink);--primary: #030213;--primary-foreground: #ffffff;--secondary: rgba(249, 250, 251, 1);--secondary-foreground: #030213;--accent: rgba(233, 235, 239, 1);--accent-foreground: #030213;--destructive: #C98A5A;--destructive-foreground: #ffffff;--input: transparent;--input-background: rgba(243, 243, 245, 1);--switch-background: rgba(203, 206, 212, 1);--ring: rgba(113, 113, 122, .5);--chart-1: #25A372;--chart-2: #44C090;--chart-3: #B7D89E;--chart-4: #E7BF33;--chart-5: #C98A5A;--sidebar: var(--paper-high);--sidebar-foreground: var(--text-ink);--sidebar-primary: #030213;--sidebar-primary-foreground: #ffffff;--sidebar-accent: var(--hover-warm-subtle);--sidebar-accent-foreground: var(--text-ink);--sidebar-border: var(--border);--sidebar-ring: var(--ring);--bg: var(--bg-chordia);--paper2: var(--paper-secondary);--ink: var(--text-ink);--text: var(--text-base);--muted: var(--text-muted);--faint: var(--text-faint);--b1: var(--border);--b2: var(--border-hover);--warm: var(--hover-warm);--cool: var(--hover-cool);--present: var(--state-present);--absent: var(--state-absent);--unknown: var(--state-unknown);--s1: var(--shadow-lg);--s2: var(--shadow-md);--r1: var(--radius-lg);--r2: var(--radius-md);--font-size: .875rem;--color-green: #00A66E;--color-green-hover: #009160;--color-green-disabled: #80d3b7;--color-green-ring: rgba(0, 166, 110, .12);--surface-dark: #1D1E20;--surface-card-dark: linear-gradient(180deg, #48473B 0%, #26261F 100%);--surface-card-dark-border: #333A42;--color-card-icon: #000000;--color-card-text: #ffffff;--color-text: #2E3236;--color-text-secondary: #808183;--color-text-inverse: #E8E6E1;--color-text-overlay: rgba(255, 255, 255, .5);--color-input-border: #ACADAD;--color-divider: #E5E7EB;--color-error: #E15448;--color-error-border: #ED8077;--color-error-ring: rgba(237, 128, 119, .12);--color-error-bg: #F3F7F7;--grey-white: #FFFFFF;--grey-absent: #D9D9D9;--grey-muted: #BDBDBD;--grey-strong: var(--color-text);--grey-light: #e9e8e8a1;--focus-2: #FAF5E9;--gradient-card-active: linear-gradient(160deg, #4A5330 0%, #252C14 100%);--gradient-card-inactive: linear-gradient(160deg, rgba(74, 83, 48, .25) 0%, rgba(37, 44, 20, .35) 100%)}.custom-thin-scrollbar-library::-webkit-scrollbar{width:4px;background:transparent;border-radius:2px}.custom-thin-scrollbar-library::-webkit-scrollbar-track{background:transparent}.custom-thin-scrollbar-library::-webkit-scrollbar-thumb{background:rgb(180,178,178);border-radius:2px}.custom-thin-scrollbar-library::-webkit-scrollbar-thumb:hover{background:var(--border-hover)}.custom-thin-scrollbar-library-hidden::-webkit-scrollbar{width:0px;background:transparent}.custom-thin-scrollbar-library-hidden::-webkit-scrollbar-track{background:transparent}.custom-thin-scrollbar-library-hidden::-webkit-scrollbar-thumb{background:transparent}.custom-thin-scrollbar-hidden{scrollbar-width:none;-ms-overflow-style:none}.custom-thin-scrollbar-ultra::-webkit-scrollbar{width:2px;background:transparent}.custom-thin-scrollbar-ultra::-webkit-scrollbar-track{background:transparent}.custom-thin-scrollbar-ultra::-webkit-scrollbar-thumb{background:var(--border);border-radius:1px}.custom-thin-scrollbar-ultra::-webkit-scrollbar-thumb:hover{background:var(--border-hover)}.custom-thin-scrollbar-ultra{scrollbar-width:thin;scrollbar-color:var(--border) transparent}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chordia-ui",
-  "version": "3.2.7",
+  "version": "3.2.8",
   "description": "Chordia Design System - UI components, tokens, and Tailwind preset",
   "type": "module",
   "main": "dist/index.cjs.js",

package/src/components/navigation/Sidebar.jsx

@@ -116,23 +116,22 @@ export default function Sidebar({
         flexShrink: 0,
       }}
     >
-      {/* Header slot */}
-      {header && !collapsed && (
-        <div style={{ padding: "16px 16px 8px", flexShrink: 0, width: "100%" }}>
-          {header}
-        </div>
-      )}
-
-      {/* Collapse toggle */}
+      {/* Header + Collapse toggle in one row */}
       <div
         style={{
           display: "flex",
-          justifyContent: collapsed ? "center" : "flex-end",
-          padding: collapsed ? "12px 0" : "8px 0 0",
+          alignItems: "center",
+          justifyContent: collapsed ? "center" : "space-between",
+          padding: collapsed ? "12px 0" : "12px 0 0",
           flexShrink: 0,
           width: "100%",
         }}
       >
+        {header && !collapsed && (
+          <div style={{ flexShrink: 0 }}>
+            {header}
+          </div>
+        )}
         <button
           onClick={toggleCollapse}
           title={collapsed ? "Expand sidebar" : "Collapse sidebar"}
@@ -148,6 +147,7 @@ export default function Sidebar({
             color: "rgba(255, 255, 255, 0.5)",
             cursor: "pointer",
             transition: "background 0.15s ease, color 0.15s ease",
+            flexShrink: 0,
           }}
           onMouseEnter={(e) => {
             e.currentTarget.style.background = "rgba(255, 255, 255, 0.08)";

package/src/components/onboarding/UploadInteraction.jsx

@@ -1,5 +1,5 @@
 import { useState, useRef } from 'react';
-import { CloudUpload } from 'lucide-react';
+import { CloudUpload, X } from 'lucide-react';
 
 const FF = 'var(--font-sans)';
 
@@ -107,9 +107,17 @@ const dropzoneHintStyle = {
 
 // ─── Component ───
 
-const UploadInteraction = ({ onFileSelect }) => {
+const UploadInteraction = ({
+  onFileSelect,
+  showUploadQueuedMessage = false,
+  uploadSummary = { successCount: 0, failedCount: 0, primaryFailureReason: '' },
+}) => {
   const [dragOver, setDragOver] = useState(false);
+  const [isStatusDismissed, setIsStatusDismissed] = useState(false);
   const fileInputRef = useRef(null);
+  const successCount = uploadSummary?.successCount || 0;
+  const failedCount = uploadSummary?.failedCount || 0;
+  const primaryFailureReason = uploadSummary?.primaryFailureReason || '';
 
   const handleDragOver = (e) => {
     e.preventDefault();
@@ -123,6 +131,7 @@ const UploadInteraction = ({ onFileSelect }) => {
   const handleDrop = (e) => {
     e.preventDefault();
     setDragOver(false);
+    setIsStatusDismissed(false);
     const files = e.dataTransfer?.files;
     if (files?.length) {
       onFileSelect?.(files);
@@ -136,6 +145,7 @@ const UploadInteraction = ({ onFileSelect }) => {
   const handleFileChange = (e) => {
     const files = e.target.files;
     if (files?.length) {
+      setIsStatusDismissed(false);
       onFileSelect?.(files);
     }
     e.target.value = '';
@@ -179,6 +189,49 @@ const UploadInteraction = ({ onFileSelect }) => {
         </button>
         <p style={dropzoneHintStyle}>Supports: MP3, WAV, WMA, MP4, and WEBM</p>
       </div>
+
+      {showUploadQueuedMessage && !isStatusDismissed && (
+        <div 
+        style={{
+          marginTop: 16,
+          borderRadius: 10,
+          border: '1px solid var(--border)',
+          background: 'var(--grey-light)',
+          padding: 'var(--spacing-2) var(--spacing-3)',
+        }}>
+          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
+            <p style={{ fontSize: 15, fontWeight: 600, fontFamily: FF, color: 'var(--grey-strong)' }}>Upload status</p>
+            <button
+              type="button"
+              style={{ 
+                display: 'flex',
+                alignItems: 'center', justifyContent: 'center', width: 20, height: 20, borderRadius: 10, background: 'var(--grey-light)', cursor: 'pointer',
+                border: 'none',
+                outline: 'none',
+                padding: 0,
+                margin: 0,
+              }}
+              onClick={() => setIsStatusDismissed(true)}
+            >
+              <X size={14} color="var(--grey-strong)" />
+            </button>
+          </div>
+          <p style={{ fontSize: 13, fontWeight: 400, fontFamily: FF, color: 'var(--grey-strong)', marginTop: 8 }}>
+            {failedCount > 0 && successCount > 0
+              ? `${successCount} file${successCount > 1 ? 's are' : ' is'} successfully uploaded and ${failedCount} file${failedCount > 1 ? 's are' : ' is'} failed.`
+              : failedCount > 0
+                ? `${failedCount} file${failedCount > 1 ? 's' : ''} failed to upload.`
+                : successCount > 1
+                  ? `${successCount} files are queued for evaluation.`
+                  : 'Your file is queued for evaluation.'}
+          </p>
+          <p className="mt-1 text-xs text-gray-600">
+            {failedCount > 0
+              ? `Failed because ${primaryFailureReason || 'of a validation issue'}.`
+              : 'You can continue using the app while upload runs in the background. Results will appear in the project history once ready.'}
+          </p>
+        </div>
+      )}
     </div>
   );
 };

package/src/tokens/colors.css

@@ -194,6 +194,7 @@
     --grey-absent: #D9D9D9;
     --grey-muted: #BDBDBD;
     --grey-strong: var(--color-text);
+    --grey-light: #e9e8e8a1;
 
     /* ============================================
        FOCUS / WARM SURFACES