@zendir/ui 0.4.1 → 0.6.0

package/dist/react/core/navigation/SideNav.js.map

@@ -1 +1 @@
-{"version":3,"file":"SideNav.js","sources":["../../../../src/react/core/navigation/SideNav.tsx"],"sourcesContent":["/**\r\n * @zendir/ui - SideNav Component\r\n * \r\n * Persistent sidebar navigation for operator dashboards. Compound component\r\n * pattern with Header, Item, Section, Divider, and Footer subcomponents.\r\n * \r\n * Responsive: Full sidebar on desktop, hamburger overlay on mobile.\r\n * \r\n * Astro UX Compliance:\r\n * - Persistent side navigation pattern (AstroUXDS Navigation)\r\n * - Status indicator integration\r\n * - Active state highlighting with accent color\r\n * - Keyboard navigation support\r\n * - Reduced motion support\r\n * \r\n * @example\r\n * ```tsx\r\n * <SideNav>\r\n *   <SideNav.Header logo={<Icon name=\"satellite\" size={24} />} title=\"Space Range\" badge=\"Operator\" />\r\n *   <SideNav.Section title=\"Operations\">\r\n *     <SideNav.Item icon=\"controls\" label=\"Controls\" description=\"System command interface\" href=\"/controls\" active />\r\n *     <SideNav.Item icon=\"telemetry\" label=\"Telemetry\" href=\"/telemetry\" badge={3} tag=\"LIVE\" tagVariant=\"success\" />\r\n *     <SideNav.Item icon=\"images\" label=\"Images\" href=\"/images\" />\r\n *   </SideNav.Section>\r\n *   <SideNav.Divider />\r\n *   <SideNav.Section title=\"Analysis\">\r\n *     <SideNav.Item icon=\"chart\" label=\"Plots\" href=\"/plots\" />\r\n *     <SideNav.Item icon=\"map\" label=\"Map\" href=\"/map\" />\r\n *   </SideNav.Section>\r\n *   <SideNav.Footer>\r\n *     <SideNav.Item icon=\"settings\" label=\"Settings\" href=\"/settings\" />\r\n *   </SideNav.Footer>\r\n * </SideNav>\r\n * ```\r\n */\r\n\r\nimport React, { memo, useState, createContext, useContext, useCallback, useEffect, useLayoutEffect } from 'react';\r\n\r\nconst useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;\r\nimport { useTheme } from '../../theme';\r\nimport { safeAccentText } from '../../utils';\r\nimport { Icon } from '../display/Icon';\r\nimport type { IconName } from '../display/Icon';\r\n\r\n// ─── Astro UX Status Shape ───────────────────────────────────────────────────\r\n\r\nconst SIDENAV_STATUS_COLORS: Record<string, string> = {\r\n  off: '#a4abb6',\r\n  standby: '#2dccff',\r\n  normal: '#56f000',\r\n  caution: '#fce83a',\r\n  serious: '#ffb302',\r\n  critical: '#ff3838',\r\n};\r\n\r\n/** Astro UX dual-coded status shape (color + geometry). */\r\nfunction NavStatusShape({ status, size = 8 }: { status: string; size?: number }) {\r\n  const color = SIDENAV_STATUS_COLORS[status] ?? SIDENAV_STATUS_COLORS.off;\r\n  const glow = `${color}50`;\r\n  const style = { flexShrink: 0 as const, filter: `drop-shadow(0 0 3px ${glow})` };\r\n\r\n  switch (status) {\r\n    case 'caution':\r\n      return <svg viewBox=\"0 0 12 12\" width={size} height={size} style={style} aria-hidden=\"true\"><rect x=\"1\" y=\"1\" width=\"10\" height=\"10\" fill={color} /></svg>;\r\n    case 'serious':\r\n      return <svg viewBox=\"0 0 12 12\" width={size} height={size} style={style} aria-hidden=\"true\"><polygon points=\"6,1 11,6 6,11 1,6\" fill={color} /></svg>;\r\n    case 'critical':\r\n      return <svg viewBox=\"0 0 12 12\" width={size} height={size} style={style} aria-hidden=\"true\"><polygon points=\"6,11 1,2 11,2\" fill={color} /></svg>;\r\n    case 'standby':\r\n      return <svg viewBox=\"0 0 12 12\" width={size} height={size} style={style} aria-hidden=\"true\"><circle cx=\"6\" cy=\"6\" r=\"3.5\" fill=\"none\" stroke={color} strokeWidth=\"2\" /></svg>;\r\n    case 'off':\r\n      return <svg viewBox=\"0 0 12 12\" width={size} height={size} style={style} aria-hidden=\"true\"><circle cx=\"6\" cy=\"6\" r=\"3\" fill={color} /></svg>;\r\n    default: // normal\r\n      return <svg viewBox=\"0 0 12 12\" width={size} height={size} style={style} aria-hidden=\"true\"><circle cx=\"6\" cy=\"6\" r=\"5\" fill={color} /></svg>;\r\n  }\r\n}\r\n\r\n// ─── Responsive Breakpoints ──────────────────────────────────────────────────\r\n\r\nconst SIDENAV_BREAKPOINTS = {\r\n  mobile: 768,\r\n  tablet: 1024,\r\n} as const;\r\n\r\ntype SideNavMode = 'desktop' | 'tablet' | 'mobile';\r\n\r\nfunction getSideNavMode(width: number): SideNavMode {\r\n  if (width < SIDENAV_BREAKPOINTS.mobile) return 'mobile';\r\n  if (width < SIDENAV_BREAKPOINTS.tablet) return 'tablet';\r\n  return 'desktop';\r\n}\r\n\r\n// ─── Context ─────────────────────────────────────────────────────────────────\r\n\r\ninterface SideNavContextValue {\r\n  collapsed: boolean;\r\n  mobileOpen: boolean;\r\n  mode: SideNavMode;\r\n  showCollapseToggle: boolean;\r\n  setMobileOpen: (open: boolean) => void;\r\n  toggleCollapse: () => void;\r\n}\r\n\r\nconst SideNavContext = createContext<SideNavContextValue>({\r\n  collapsed: false,\r\n  mobileOpen: false,\r\n  mode: 'desktop',\r\n  showCollapseToggle: true,\r\n  setMobileOpen: () => {},\r\n  toggleCollapse: () => {},\r\n});\r\n\r\n// ─── SideNav ─────────────────────────────────────────────────────────────────\r\n\r\nexport interface SideNavProps {\r\n  /** Collapsed mode (icon-only). When omitted, auto-collapses on tablet viewports. */\r\n  collapsed?: boolean;\r\n  /** Callback when collapsed state changes (via toggle button or responsive breakpoint). */\r\n  onCollapsedChange?: (collapsed: boolean) => void;\r\n  /** Show a collapse/expand toggle button in the sidebar (default true). */\r\n  showCollapseToggle?: boolean;\r\n  /** Width in pixels (default 260) */\r\n  width?: number;\r\n  /** Collapsed width in pixels (default 64) */\r\n  collapsedWidth?: number;\r\n  /**\r\n   * Mobile viewport behavior.\r\n   * - `'drawer'` (default): hamburger button with slide-out overlay drawer.\r\n   * - `'collapsed'`: persistent collapsed icon-only strip (same as tablet).\r\n   */\r\n  mobileVariant?: 'drawer' | 'collapsed';\r\n  /** Children (SideNav.Header, SideNav.Item, SideNav.Section, SideNav.Footer) */\r\n  children?: React.ReactNode;\r\n  /** Custom style */\r\n  style?: React.CSSProperties;\r\n}\r\n\r\nconst SideNavRoot = memo(function SideNav({\r\n  collapsed,\r\n  onCollapsedChange,\r\n  showCollapseToggle = true,\r\n  width = 260,\r\n  collapsedWidth = 64,\r\n  mobileVariant = 'drawer',\r\n  children,\r\n  style,\r\n}: SideNavProps): React.ReactElement {\r\n  const { tokens, theme } = useTheme();\r\n  const isTransparentTheme = theme === 'transparent' || theme === 'transparent-bold' || theme === 'transparent-minimal';\r\n  const [mobileOpen, setMobileOpen] = useState(false);\r\n  const [userCollapsed, setUserCollapsed] = useState<boolean | null>(null);\r\n  \r\n  // Initialize to 'desktop' to guarantee the first client render matches SSR\r\n  // (where window is undefined), preventing a React hydration mismatch if the\r\n  // client happens to be on a mobile/tablet width at initial load.\r\n  const [viewMode, setViewMode] = useState<SideNavMode>('desktop');\r\n  \r\n  useIsomorphicLayoutEffect(() => {\r\n    if (typeof window === 'undefined') return;\r\n\r\n    // Synchronously correct the viewMode right after hydration but before paint\r\n    setViewMode(getSideNavMode(window.innerWidth));\r\n\r\n    let rafId: number;\r\n    const handleResize = () => {\r\n      cancelAnimationFrame(rafId);\r\n      rafId = requestAnimationFrame(() => setViewMode(getSideNavMode(window.innerWidth)));\r\n    };\r\n    window.addEventListener('resize', handleResize, { passive: true });\r\n    return () => {\r\n      window.removeEventListener('resize', handleResize);\r\n      cancelAnimationFrame(rafId);\r\n    };\r\n  }, []);\r\n\r\n  // When mobileVariant='collapsed', promote mobile to tablet (collapsed inline strip)\r\n  const effectiveMode = mobileVariant === 'collapsed' && viewMode === 'mobile' ? 'tablet' : viewMode;\r\n\r\n  // Reset user toggle when crossing breakpoints\r\n  useEffect(() => {\r\n    setUserCollapsed(null);\r\n  }, [effectiveMode]);\r\n\r\n  // Close mobile drawer when switching away from mobile\r\n  useEffect(() => {\r\n    if (effectiveMode !== 'mobile' && mobileOpen) setMobileOpen(false);\r\n  }, [effectiveMode, mobileOpen]);\r\n  \r\n  // Close mobile nav on escape\r\n  useEffect(() => {\r\n    if (!mobileOpen) return;\r\n    const handleEsc = (e: KeyboardEvent) => {\r\n      if (e.key === 'Escape') setMobileOpen(false);\r\n    };\r\n    document.addEventListener('keydown', handleEsc);\r\n    return () => document.removeEventListener('keydown', handleEsc);\r\n  }, [mobileOpen]);\r\n\r\n  // Resolve collapsed: explicit prop > user toggle > auto (tablet = collapsed)\r\n  const autoCollapsed = effectiveMode === 'tablet';\r\n  const isCollapsed = collapsed !== undefined\r\n    ? collapsed\r\n    : userCollapsed !== null\r\n      ? userCollapsed\r\n      : autoCollapsed;\r\n  const isMobile = effectiveMode === 'mobile';\r\n  const navWidth = isCollapsed ? collapsedWidth : width;\r\n\r\n  const handleToggleCollapse = useCallback(() => {\r\n    const next = !isCollapsed;\r\n    setUserCollapsed(next);\r\n    onCollapsedChange?.(next);\r\n  }, [isCollapsed, onCollapsedChange]);\r\n  \r\n  const navStyle: React.CSSProperties = {\r\n    display: 'flex',\r\n    flexDirection: 'column',\r\n    width: isMobile ? 280 : navWidth,\r\n    height: '100%',\r\n    backgroundColor: isTransparentTheme\r\n      ? 'rgba(15, 12, 30, 0.7)'\r\n      : tokens.colors.background.surface,\r\n    borderRight: `1px solid ${tokens.colors.border.muted}`,\r\n    transition: 'width 0.25s ease, transform 0.25s ease',\r\n    overflowX: 'hidden',\r\n    overflowY: 'auto',\r\n    flexShrink: 0,\r\n    fontFamily: tokens.typography.fontFamily.primary,\r\n    ...(isTransparentTheme ? {\r\n      backdropFilter: 'blur(16px)',\r\n      WebkitBackdropFilter: 'blur(16px)',\r\n    } : {}),\r\n    ...style,\r\n  };\r\n  \r\n  const contextValue: SideNavContextValue = { collapsed: isCollapsed, mobileOpen, mode: effectiveMode, showCollapseToggle, setMobileOpen, toggleCollapse: handleToggleCollapse };\r\n  \r\n  // Mobile: hamburger button + overlay drawer\r\n  if (isMobile) {\r\n    return (\r\n      <SideNavContext.Provider value={contextValue}>\r\n        {/* Hamburger button */}\r\n        <button\r\n          aria-label=\"Open navigation\"\r\n          onClick={() => setMobileOpen(true)}\r\n          style={{\r\n            position: 'fixed',\r\n            top: 6,\r\n            left: 6,\r\n            zIndex: 1001,\r\n            display: 'flex',\r\n            alignItems: 'center',\r\n            justifyContent: 'center',\r\n            width: 32,\r\n            height: 32,\r\n            border: 'none',\r\n            borderRadius: tokens.borderRadius.sm,\r\n            backgroundColor: 'transparent',\r\n            color: tokens.colors.text.primary,\r\n            cursor: 'pointer',\r\n            padding: 0,\r\n            transition: tokens.animation.fast,\r\n          }}\r\n        >\r\n          <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.5\" strokeLinecap=\"round\">\r\n            <line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\" />\r\n            <line x1=\"3\" y1=\"12\" x2=\"21\" y2=\"12\" />\r\n            <line x1=\"3\" y1=\"18\" x2=\"21\" y2=\"18\" />\r\n          </svg>\r\n        </button>\r\n        \r\n        {/* Overlay */}\r\n        <div\r\n          aria-hidden=\"true\"\r\n          style={{\r\n            position: 'fixed',\r\n            inset: 0,\r\n            zIndex: 1002,\r\n            backgroundColor: `${tokens.colors.background.base}99`,\r\n            backdropFilter: 'blur(4px)',\r\n            opacity: mobileOpen ? 1 : 0,\r\n            pointerEvents: mobileOpen ? 'auto' : 'none',\r\n            transition: 'opacity 0.25s ease',\r\n          }}\r\n          onClick={() => setMobileOpen(false)}\r\n        />\r\n        \r\n        {/* Slide-out nav */}\r\n        <nav\r\n          role=\"navigation\"\r\n          aria-label=\"Main navigation\"\r\n          style={{\r\n            ...navStyle,\r\n            position: 'fixed',\r\n            top: 0,\r\n            left: 0,\r\n            zIndex: 1003,\r\n            transform: mobileOpen ? 'translateX(0)' : 'translateX(-100%)',\r\n            boxShadow: mobileOpen ? tokens.shadows.xl : 'none',\r\n          }}\r\n        >\r\n          {children}\r\n        </nav>\r\n      </SideNavContext.Provider>\r\n    );\r\n  }\r\n  \r\n  return (\r\n    <SideNavContext.Provider value={contextValue}>\r\n      <nav role=\"navigation\" aria-label=\"Main navigation\" style={navStyle}>\r\n        {children}\r\n      </nav>\r\n    </SideNavContext.Provider>\r\n  );\r\n});\r\n\r\n// ─── Header ──────────────────────────────────────────────────────────────────\r\n\r\n/** Default height for the logo row so dashboard / operator / other apps align the same mark. */\r\nexport const SIDENAV_HEADER_LOGO_SLOT_HEIGHT_PX = 44;\r\n\r\nexport interface SideNavHeaderProps {\r\n  /** Logo element (Icon, image, or ReactNode) */\r\n  logo?: React.ReactNode;\r\n  /** Compact logo shown when sidebar is collapsed or on tablet (e.g., just the icon mark) */\r\n  collapsedLogo?: React.ReactNode;\r\n  /** App title */\r\n  title?: string;\r\n  /** Subtitle or version */\r\n  subtitle?: string;\r\n  /** Role badge (e.g., \"Operator\", \"Admin\") */\r\n  badge?: string;\r\n  /** Badge variant for color */\r\n  badgeVariant?: 'info' | 'success' | 'warning' | 'caution';\r\n  /**\r\n   * Fixed height (px) for the top logo band. Title, subtitle, and badge render below this band\r\n   * so different logo assets still line up across apps (dashboard vs operator).\r\n   */\r\n  logoSlotHeight?: number;\r\n  /** Children override (advanced: replaces default header content entirely) */\r\n  children?: React.ReactNode;\r\n}\r\n\r\n/** Chevron toggle button for collapsing/expanding the sidebar. */\r\nfunction CollapseToggleButton() {\r\n  const { tokens } = useTheme();\r\n  const { collapsed, toggleCollapse } = useContext(SideNavContext);\r\n  const [hovered, setHovered] = useState(false);\r\n\r\n  return (\r\n    <button\r\n      type=\"button\"\r\n      aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}\r\n      onClick={toggleCollapse}\r\n      onMouseEnter={() => setHovered(true)}\r\n      onMouseLeave={() => setHovered(false)}\r\n      style={{\r\n        display: 'flex',\r\n        alignItems: 'center',\r\n        justifyContent: 'center',\r\n        width: 28,\r\n        height: 28,\r\n        border: `1px solid ${hovered ? tokens.colors.border.focus : tokens.colors.border.muted}`,\r\n        borderRadius: tokens.borderRadius.md,\r\n        backgroundColor: hovered ? `${tokens.colors.accent.primary}15` : 'transparent',\r\n        color: hovered ? tokens.colors.accent.primary : tokens.colors.text.tertiary,\r\n        cursor: 'pointer',\r\n        flexShrink: 0,\r\n        padding: 0,\r\n        transition: tokens.animation.fast,\r\n        outline: 'none',\r\n      }}\r\n    >\r\n      <svg\r\n        width=\"14\"\r\n        height=\"14\"\r\n        viewBox=\"0 0 24 24\"\r\n        fill=\"none\"\r\n        stroke=\"currentColor\"\r\n        strokeWidth=\"2\"\r\n        strokeLinecap=\"round\"\r\n        strokeLinejoin=\"round\"\r\n        style={{\r\n          transition: 'transform 0.25s ease',\r\n          transform: collapsed ? 'rotate(180deg)' : 'rotate(0deg)',\r\n        }}\r\n      >\r\n        <polyline points=\"15 18 9 12 15 6\" />\r\n      </svg>\r\n    </button>\r\n  );\r\n}\r\n\r\nconst SideNavHeader = memo(function SideNavHeader({\r\n  logo,\r\n  collapsedLogo,\r\n  title,\r\n  subtitle,\r\n  badge,\r\n  badgeVariant = 'info',\r\n  logoSlotHeight = SIDENAV_HEADER_LOGO_SLOT_HEIGHT_PX,\r\n  children,\r\n}: SideNavHeaderProps): React.ReactElement {\r\n  const { tokens } = useTheme();\r\n  const { collapsed, mode, showCollapseToggle, toggleCollapse } = useContext(SideNavContext);\r\n  const displayLogo = collapsed && collapsedLogo ? collapsedLogo : logo;\r\n  const showToggle = showCollapseToggle && mode !== 'mobile';\r\n  const hasMeta = Boolean(title || subtitle || badge);\r\n  const slotH = logoSlotHeight;\r\n\r\n  const badgeColors: Record<string, string> = {\r\n    info: tokens.colors.accent.primary,\r\n    success: tokens.colors.status.normal,\r\n    warning: tokens.colors.status.caution,\r\n    caution: tokens.colors.status.serious,\r\n  };\r\n\r\n  const metaBlock = !collapsed && hasMeta ? (\r\n    <div style={{ flex: 1, minWidth: 0, width: '100%' }}>\r\n      {title ? (\r\n        <div style={{\r\n          fontSize: tokens.typography.fontSize.sm,\r\n          fontWeight: tokens.typography.fontWeight.bold,\r\n          color: tokens.colors.text.primary,\r\n          lineHeight: tokens.typography.lineHeight.tight,\r\n          whiteSpace: 'nowrap',\r\n          overflow: 'hidden',\r\n          textOverflow: 'ellipsis',\r\n        }}>\r\n          {title}\r\n        </div>\r\n      ) : null}\r\n      {(subtitle || badge) ? (\r\n        <div style={{ display: 'flex', alignItems: 'center', gap: tokens.spacing.xs, marginTop: title ? '2px' : 0, flexWrap: 'wrap' }}>\r\n          {subtitle ? (\r\n            <span style={{\r\n              fontSize: tokens.typography.fontSize.xxs,\r\n              color: tokens.colors.text.tertiary,\r\n            }}>\r\n              {subtitle}\r\n            </span>\r\n          ) : null}\r\n          {badge ? (\r\n            <span style={{\r\n              fontSize: '0.6rem',\r\n              fontWeight: tokens.typography.fontWeight.bold,\r\n              color: badgeColors[badgeVariant] || safeAccentText(tokens.colors.accent.primary),\r\n              backgroundColor: `${badgeColors[badgeVariant] || tokens.colors.accent.primary}18`,\r\n              border: `1px solid ${badgeColors[badgeVariant] || tokens.colors.accent.primary}30`,\r\n              padding: '1px 6px',\r\n              borderRadius: tokens.borderRadius.sm,\r\n              textTransform: 'uppercase',\r\n              letterSpacing: '0.05em',\r\n            }}>\r\n              {badge}\r\n            </span>\r\n          ) : null}\r\n        </div>\r\n      ) : null}\r\n    </div>\r\n  ) : null;\r\n\r\n  const logoSlot = displayLogo ? (\r\n    <div\r\n      style={{\r\n        height: slotH,\r\n        minHeight: slotH,\r\n        maxHeight: slotH,\r\n        width: '100%',\r\n        display: 'flex',\r\n        alignItems: 'center',\r\n        justifyContent: collapsed ? 'center' : 'flex-start',\r\n        overflow: 'hidden',\r\n        boxSizing: 'border-box',\r\n        marginBottom: !collapsed && hasMeta && displayLogo ? tokens.spacing.sm : 0,\r\n      }}\r\n    >\r\n      <div\r\n        style={{\r\n          maxHeight: '100%',\r\n          maxWidth: '100%',\r\n          display: 'flex',\r\n          alignItems: 'center',\r\n          justifyContent: collapsed ? 'center' : 'flex-start',\r\n          minWidth: 0,\r\n          cursor: collapsed && showToggle ? 'pointer' : undefined,\r\n        }}\r\n        onClick={collapsed && showToggle ? toggleCollapse : undefined}\r\n      >\r\n        {displayLogo}\r\n      </div>\r\n    </div>\r\n  ) : null;\r\n\r\n  if (children) {\r\n    return (\r\n      <div style={{\r\n        padding: `${tokens.spacing.md} 16px ${tokens.spacing.md} 15px`,\r\n        borderBottom: `1px solid ${tokens.colors.border.muted}`,\r\n        flexShrink: 0,\r\n        boxSizing: 'border-box',\r\n        position: 'relative',\r\n      }}>\r\n        {children}\r\n      </div>\r\n    );\r\n  }\r\n\r\n  // Collapsed: centered logo in the same fixed slot height as expanded (visual parity with operator).\r\n  if (collapsed) {\r\n    return (\r\n      <div style={{\r\n        display: 'flex',\r\n        flexDirection: 'column',\r\n        alignItems: 'center',\r\n        padding: `${tokens.spacing.md} ${tokens.spacing.sm}`,\r\n        minHeight: slotH + 24,\r\n        borderBottom: `1px solid ${tokens.colors.border.muted}`,\r\n        flexShrink: 0,\r\n        boxSizing: 'border-box',\r\n        position: 'relative',\r\n        justifyContent: 'center',\r\n      }}>\r\n        {logoSlot}\r\n        {showToggle ? (\r\n          <div style={{ position: 'absolute', right: 4, top: '50%', transform: 'translateY(-50%)' }}>\r\n            <CollapseToggleButton />\r\n          </div>\r\n        ) : null}\r\n      </div>\r\n    );\r\n  }\r\n\r\n  return (\r\n    <div style={{\r\n      display: 'flex',\r\n      flexDirection: 'column',\r\n      alignItems: 'stretch',\r\n      padding: `${tokens.spacing.md} 16px ${tokens.spacing.md} 15px`,\r\n      borderBottom: `1px solid ${tokens.colors.border.muted}`,\r\n      flexShrink: 0,\r\n      boxSizing: 'border-box',\r\n      position: 'relative',\r\n    }}>\r\n      {showToggle ? (\r\n        <div style={{ position: 'absolute', top: tokens.spacing.sm, right: tokens.spacing.sm, zIndex: 1 }}>\r\n          <CollapseToggleButton />\r\n        </div>\r\n      ) : null}\r\n      <div style={{ paddingRight: showToggle ? 36 : 0, width: '100%', minWidth: 0 }}>\r\n        {logoSlot}\r\n        {metaBlock}\r\n      </div>\r\n    </div>\r\n  );\r\n});\r\n\r\n// ─── Item ────────────────────────────────────────────────────────────────────\r\n\r\nexport interface SideNavItemProps {\r\n  /** Icon name from zendir-ui icon library */\r\n  icon?: IconName | React.ReactNode;\r\n  /** Label text */\r\n  label: string;\r\n  /** Description text displayed beneath the label (hidden in collapsed mode) */\r\n  description?: string;\r\n  /** Small tag/chip displayed after the label (e.g. \"v2\", \"NEW\", \"BETA\") */\r\n  tag?: string;\r\n  /** Tag color variant */\r\n  tagVariant?: 'default' | 'info' | 'success' | 'warning' | 'danger';\r\n  /** Link href (renders <a>) */\r\n  href?: string;\r\n  /** Click handler (renders <button>) */\r\n  onClick?: () => void;\r\n  /** Active state */\r\n  active?: boolean;\r\n  /** Disabled state */\r\n  disabled?: boolean;\r\n  /** Notification badge count */\r\n  badge?: number;\r\n  /** External link indicator */\r\n  external?: boolean;\r\n  /**\r\n   * Astro UX status level — renders a dual-coded indicator (color + shape).\r\n   * Shapes per official Astro UXDS: normal = ● filled circle, standby = ◎ ring,\r\n   * caution = ■ square, serious = ◆ diamond, critical = ▼ triangle, off = · small circle.\r\n   */\r\n  status?: 'off' | 'standby' | 'normal' | 'caution' | 'serious' | 'critical';\r\n  /** Optional status label shown as tooltip or text next to status shape */\r\n  statusLabel?: string;\r\n  /** Right-side slot — arbitrary ReactNode rendered at the end of the item row */\r\n  suffix?: React.ReactNode;\r\n}\r\n\r\nconst TAG_COLORS: Record<string, { bg: string; fg: string; border: string }> = {\r\n  default: { bg: '#ffffff10', fg: '#9590a8', border: '#ffffff15' },\r\n  info: { bg: '#8a2be218', fg: '#c4a0ff', border: '#8a2be230' },\r\n  success: { bg: '#56f00018', fg: '#56f000', border: '#56f00030' },\r\n  warning: { bg: '#fce83a18', fg: '#fce83a', border: '#fce83a30' },\r\n  danger: { bg: '#ff383818', fg: '#ff3838', border: '#ff383830' },\r\n};\r\n\r\nconst SideNavItem = memo(function SideNavItem({\r\n  icon,\r\n  label,\r\n  description,\r\n  tag,\r\n  tagVariant = 'default',\r\n  href,\r\n  onClick,\r\n  active = false,\r\n  disabled = false,\r\n  badge,\r\n  external = false,\r\n  status,\r\n  statusLabel,\r\n  suffix,\r\n}: SideNavItemProps): React.ReactElement {\r\n  const { tokens } = useTheme();\r\n  const { collapsed, setMobileOpen } = useContext(SideNavContext);\r\n  const [isHovered, setIsHovered] = useState(false);\r\n  \r\n  const handleClick = useCallback((e: React.MouseEvent) => {\r\n    if (disabled) return;\r\n    if (onClick && href && !e.metaKey && !e.ctrlKey && !e.shiftKey) {\r\n      e.preventDefault();\r\n    }\r\n    setMobileOpen(false);\r\n    onClick?.();\r\n  }, [disabled, onClick, href, setMobileOpen]);\r\n  \r\n  // Status-aware accent: when an item has a status, tint active/hover with its color\r\n  const statusColor = status ? (SIDENAV_STATUS_COLORS[status] ?? undefined) : undefined;\r\n  const accentColor = statusColor && active ? statusColor : safeAccentText(tokens.colors.accent.primary);\r\n  \r\n  const hasDescription = !!description && !collapsed;\r\n  \r\n  const iconElement = typeof icon === 'string'\r\n    ? <Icon name={icon as IconName} size={hasDescription ? 22 : 20} color={active ? accentColor : tokens.colors.text.secondary} />\r\n    : icon;\r\n  \r\n  const itemStyle: React.CSSProperties = {\r\n    display: 'flex',\r\n    alignItems: hasDescription ? 'flex-start' : 'center',\r\n    gap: tokens.spacing.sm,\r\n    padding: collapsed\r\n      ? `${tokens.spacing.sm} 0`\r\n      : hasDescription\r\n        ? `10px 16px 10px 12px`\r\n        : `${tokens.spacing.sm} 16px ${tokens.spacing.sm} 12px`,\r\n    justifyContent: collapsed ? 'center' : 'flex-start',\r\n    color: active\r\n      ? accentColor\r\n      : disabled\r\n        ? tokens.colors.text.tertiary\r\n        : tokens.colors.text.secondary,\r\n    backgroundColor: active\r\n      ? `${accentColor}12`\r\n      : isHovered && !disabled\r\n        ? `${accentColor}08`\r\n        : 'transparent',\r\n    fontSize: tokens.typography.fontSize.sm,\r\n    fontWeight: active ? tokens.typography.fontWeight.semibold : tokens.typography.fontWeight.normal,\r\n    fontFamily: tokens.typography.fontFamily.primary,\r\n    cursor: disabled ? 'not-allowed' : 'pointer',\r\n    textDecoration: 'none',\r\n    borderTop: 'none',\r\n    borderRight: 'none',\r\n    borderBottom: 'none',\r\n    borderLeft: active\r\n      ? `3px solid ${accentColor}`\r\n      : '3px solid transparent',\r\n    outline: 'none',\r\n    width: '100%',\r\n    boxSizing: 'border-box',\r\n    transition: tokens.animation.fast,\r\n    position: 'relative',\r\n    opacity: disabled ? 0.5 : 1,\r\n  };\r\n  \r\n  const tagColors = TAG_COLORS[tagVariant] ?? TAG_COLORS.default;\r\n  \r\n  const content = (\r\n    <>\r\n      {/* Icon + collapsed status overlay */}\r\n      {iconElement && (\r\n        <span style={{ flexShrink: 0, display: 'flex', position: 'relative', marginTop: hasDescription ? '2px' : 0 }}>\r\n          {iconElement}\r\n          {/* In collapsed mode, show a small status shape overlaid on the icon (top-left) */}\r\n          {collapsed && status && (\r\n            <span\r\n              style={{\r\n                position: 'absolute',\r\n                top: -3,\r\n                left: -4,\r\n                lineHeight: 0,\r\n              }}\r\n              title={statusLabel ?? status}\r\n            >\r\n              <NavStatusShape status={status} size={7} />\r\n            </span>\r\n          )}\r\n        </span>\r\n      )}\r\n      {!collapsed && (\r\n        <>\r\n          {/* Label + description block */}\r\n          <span style={{ flex: 1, minWidth: 0, overflow: 'hidden' }}>\r\n            <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}>\r\n              <span style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>\r\n                {label}\r\n              </span>\r\n              {tag && (\r\n                <span style={{\r\n                  fontSize: '0.6rem',\r\n                  fontWeight: tokens.typography.fontWeight.bold,\r\n                  color: tagColors.fg,\r\n                  backgroundColor: tagColors.bg,\r\n                  border: `1px solid ${tagColors.border}`,\r\n                  padding: '1px 5px',\r\n                  borderRadius: tokens.borderRadius.sm,\r\n                  textTransform: 'uppercase',\r\n                  letterSpacing: '0.04em',\r\n                  flexShrink: 0,\r\n                  lineHeight: '1.3',\r\n                  whiteSpace: 'nowrap',\r\n                }}>\r\n                  {tag}\r\n                </span>\r\n              )}\r\n            </span>\r\n            {description && (\r\n              <span style={{\r\n                display: 'block',\r\n                fontSize: tokens.typography.fontSize.xxs,\r\n                color: tokens.colors.text.tertiary,\r\n                lineHeight: tokens.typography.lineHeight.normal,\r\n                marginTop: '2px',\r\n                whiteSpace: 'nowrap',\r\n                overflow: 'hidden',\r\n                textOverflow: 'ellipsis',\r\n                fontWeight: tokens.typography.fontWeight.normal,\r\n              }}>\r\n                {description}\r\n              </span>\r\n            )}\r\n          </span>\r\n          {/* Right-side trailing elements — badge, status, suffix, external icon */}\r\n          {(badge !== undefined && badge > 0 || status || suffix || external) && (\r\n            <span style={{\r\n              display: 'inline-flex',\r\n              alignItems: 'center',\r\n              gap: 8,\r\n              flexShrink: 0,\r\n              marginTop: hasDescription ? '2px' : 0,\r\n            }}>\r\n              {/* Badge */}\r\n              {badge !== undefined && badge > 0 && (\r\n                <span style={{\r\n                  fontSize: '0.65rem',\r\n                  fontWeight: tokens.typography.fontWeight.bold,\r\n                  color: '#fff',\r\n                  backgroundColor: tokens.colors.status.critical,\r\n                  borderRadius: tokens.borderRadius.full,\r\n                  minWidth: '18px',\r\n                  height: '18px',\r\n                  display: 'inline-flex',\r\n                  alignItems: 'center',\r\n                  justifyContent: 'center',\r\n                  padding: '0 5px',\r\n                  flexShrink: 0,\r\n                  lineHeight: 1,\r\n                  boxSizing: 'border-box',\r\n                }}>\r\n                  {badge > 99 ? '99+' : badge}\r\n                </span>\r\n              )}\r\n              {/* Status */}\r\n              {status && (\r\n                <span\r\n                  style={{ display: 'inline-flex', alignItems: 'center', flexShrink: 0 }}\r\n                  role=\"status\"\r\n                  aria-label={`Status: ${statusLabel ?? status}`}\r\n                  title={statusLabel ?? status}\r\n                >\r\n                  <NavStatusShape status={status} size={8} />\r\n                </span>\r\n              )}\r\n              {/* Suffix */}\r\n              {suffix && (\r\n                <span style={{ flexShrink: 0, display: 'inline-flex', alignItems: 'center' }}>\r\n                  {suffix}\r\n                </span>\r\n              )}\r\n              {/* External */}\r\n              {external && (\r\n                <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" style={{ flexShrink: 0, opacity: 0.5 }}>\r\n                  <path d=\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\" />\r\n                  <polyline points=\"15 3 21 3 21 9\" />\r\n                  <line x1=\"10\" y1=\"14\" x2=\"21\" y2=\"3\" />\r\n                </svg>\r\n              )}\r\n            </span>\r\n          )}\r\n        </>\r\n      )}\r\n    </>\r\n  );\r\n  \r\n  const props = {\r\n    style: itemStyle,\r\n    onMouseEnter: () => setIsHovered(true),\r\n    onMouseLeave: () => setIsHovered(false),\r\n    title: collapsed ? label : undefined,\r\n    'aria-current': active ? ('page' as const) : undefined,\r\n    'aria-disabled': disabled,\r\n  };\r\n  \r\n  if (href && !disabled) {\r\n    return (\r\n      <a href={href} onClick={handleClick} target={external ? '_blank' : undefined} rel={external ? 'noopener noreferrer' : undefined} {...props}>\r\n        {content}\r\n      </a>\r\n    );\r\n  }\r\n  \r\n  return (\r\n    <button type=\"button\" onClick={handleClick} disabled={disabled} {...props}>\r\n      {content}\r\n    </button>\r\n  );\r\n});\r\n\r\n// ─── Section ─────────────────────────────────────────────────────────────────\r\n\r\nexport interface SideNavSectionProps {\r\n  /** Section title */\r\n  title?: string;\r\n  /** Children (SideNav.Item elements) */\r\n  children?: React.ReactNode;\r\n}\r\n\r\nconst SideNavSection = memo(function SideNavSection({\r\n  title,\r\n  children,\r\n}: SideNavSectionProps): React.ReactElement {\r\n  const { tokens } = useTheme();\r\n  const { collapsed } = useContext(SideNavContext);\r\n  \r\n  return (\r\n    <div style={{ marginTop: tokens.spacing.sm }}>\r\n      {title && !collapsed && (\r\n        <div style={{\r\n          padding: `${tokens.spacing.xs} 16px ${tokens.spacing.xs} 15px`,\r\n          fontSize: tokens.typography.fontSize.xxs,\r\n          fontWeight: tokens.typography.fontWeight.bold,\r\n          color: tokens.colors.text.tertiary,\r\n          textTransform: 'uppercase',\r\n          letterSpacing: '0.08em',\r\n        }}>\r\n          {title}\r\n        </div>\r\n      )}\r\n      {collapsed && title && (\r\n        <div style={{\r\n          width: '60%',\r\n          height: '1px',\r\n          backgroundColor: tokens.colors.border.muted,\r\n          margin: `${tokens.spacing.xs} auto`,\r\n        }} />\r\n      )}\r\n      {children}\r\n    </div>\r\n  );\r\n});\r\n\r\n// ─── Divider ─────────────────────────────────────────────────────────────────\r\n\r\nexport interface SideNavDividerProps {\r\n  /** Optional label shown in the center of the divider line */\r\n  label?: string;\r\n}\r\n\r\nconst SideNavDivider = memo(function SideNavDivider({\r\n  label,\r\n}: SideNavDividerProps): React.ReactElement {\r\n  const { tokens } = useTheme();\r\n  const { collapsed } = useContext(SideNavContext);\r\n\r\n  if (collapsed) {\r\n    return (\r\n      <div style={{\r\n        width: '60%',\r\n        height: '1px',\r\n        backgroundColor: tokens.colors.border.muted,\r\n        margin: `${tokens.spacing.sm} auto`,\r\n      }} />\r\n    );\r\n  }\r\n\r\n  if (label) {\r\n    return (\r\n      <div style={{\r\n        display: 'flex',\r\n        alignItems: 'center',\r\n        gap: tokens.spacing.sm,\r\n        padding: `${tokens.spacing.sm} 16px ${tokens.spacing.sm} 15px`,\r\n      }}>\r\n        <div style={{ flex: 1, height: '1px', backgroundColor: tokens.colors.border.muted }} />\r\n        <span style={{\r\n          fontSize: tokens.typography.fontSize.xxs,\r\n          color: tokens.colors.text.tertiary,\r\n          textTransform: 'uppercase',\r\n          letterSpacing: '0.06em',\r\n          whiteSpace: 'nowrap',\r\n        }}>\r\n          {label}\r\n        </span>\r\n        <div style={{ flex: 1, height: '1px', backgroundColor: tokens.colors.border.muted }} />\r\n      </div>\r\n    );\r\n  }\r\n\r\n  return (\r\n    <div style={{\r\n      height: '1px',\r\n      backgroundColor: tokens.colors.border.muted,\r\n      margin: `${tokens.spacing.sm} 16px ${tokens.spacing.sm} 15px`,\r\n    }} />\r\n  );\r\n});\r\n\r\n// ─── Footer ──────────────────────────────────────────────────────────────────\r\n\r\nexport interface SideNavFooterProps {\r\n  children?: React.ReactNode;\r\n}\r\n\r\nconst SideNavFooter = memo(function SideNavFooter({\r\n  children,\r\n}: SideNavFooterProps): React.ReactElement {\r\n  const { tokens } = useTheme();\r\n  \r\n  return (\r\n    <div style={{\r\n      marginTop: 'auto',\r\n      borderTop: `1px solid ${tokens.colors.border.muted}`,\r\n      paddingTop: tokens.spacing.xs,\r\n      paddingBottom: tokens.spacing.xs,\r\n    }}>\r\n      {children}\r\n    </div>\r\n  );\r\n});\r\n\r\n// ─── Compound Export ─────────────────────────────────────────────────────────\r\n\r\ntype SideNavComponent = typeof SideNavRoot & {\r\n  Header: typeof SideNavHeader;\r\n  Item: typeof SideNavItem;\r\n  Section: typeof SideNavSection;\r\n  Divider: typeof SideNavDivider;\r\n  Footer: typeof SideNavFooter;\r\n};\r\n\r\nexport const SideNav: SideNavComponent = Object.assign(SideNavRoot, {\r\n  Header: SideNavHeader,\r\n  Item: SideNavItem,\r\n  Section: SideNavSection,\r\n  Divider: SideNavDivider,\r\n  Footer: SideNavFooter,\r\n});\r\n\r\nexport default SideNav;\r\n"],"names":["SideNav","SideNavHeader","SideNavItem","SideNavSection","SideNavDivider","SideNavFooter"],"mappings":"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"}
+{"version":3,"file":"SideNav.js","names":[],"sources":["../../../../src/react/core/navigation/SideNav.tsx"],"sourcesContent":["/**\n * @zendir/ui - SideNav Component\n *\n * Persistent sidebar navigation for operator dashboards. Compound component\n * pattern with Header, Item, Section, Divider, and Footer subcomponents.\n *\n * Responsive: Full sidebar on desktop, hamburger overlay on mobile.\n *\n * Astro UX Compliance:\n * - Persistent side navigation pattern (AstroUXDS Navigation)\n * - Status indicator integration\n * - Active state highlighting with accent color\n * - Keyboard navigation support\n * - Reduced motion support\n *\n * @example\n * ```tsx\n * <SideNav>\n *   <SideNav.Header logo={<Icon name=\"satellite\" size={24} />} title=\"Space Range\" badge=\"Operator\" />\n *   <SideNav.Section title=\"Operations\">\n *     <SideNav.Item icon=\"controls\" label=\"Controls\" description=\"System command interface\" href=\"/controls\" active />\n *     <SideNav.Item icon=\"telemetry\" label=\"Telemetry\" href=\"/telemetry\" badge={3} tag=\"LIVE\" tagVariant=\"success\" />\n *     <SideNav.Item icon=\"images\" label=\"Images\" href=\"/images\" />\n *   </SideNav.Section>\n *   <SideNav.Divider />\n *   <SideNav.Section title=\"Analysis\">\n *     <SideNav.Item icon=\"chart\" label=\"Plots\" href=\"/plots\" />\n *     <SideNav.Item icon=\"map\" label=\"Map\" href=\"/map\" />\n *   </SideNav.Section>\n *   <SideNav.Footer>\n *     <SideNav.Item icon=\"settings\" label=\"Settings\" href=\"/settings\" />\n *   </SideNav.Footer>\n * </SideNav>\n * ```\n */\n\nimport React, {\n  memo,\n  useState,\n  createContext,\n  useContext,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n} from \"react\";\n\nconst useIsomorphicLayoutEffect =\n  typeof window !== \"undefined\" ? useLayoutEffect : useEffect;\nimport { useTheme } from \"../../theme\";\nimport { safeAccentText } from \"../../utils\";\nimport { Icon } from \"../display/Icon\";\nimport type { IconName } from \"../display/Icon\";\n\n// ─── Reveal animation ────────────────────────────────────────────────────────\n\n/**\n * Content that only renders when expanded (item labels, section titles, the\n * header meta block) fades and slides in rather than popping, so widening the\n * rail reads as material flowing in. Injected once as a stylesheet because\n * keyframes can't be expressed inline; honours `prefers-reduced-motion`.\n */\nconst SIDENAV_REVEAL_STYLE_ID = \"zendir-sidenav-reveal\";\nfunction ensureSideNavReveal(): void {\n  if (typeof document === \"undefined\") return;\n  if (document.getElementById(SIDENAV_REVEAL_STYLE_ID)) return;\n  const el = document.createElement(\"style\");\n  el.id = SIDENAV_REVEAL_STYLE_ID;\n  el.textContent =\n    \"@keyframes zsn-reveal{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:translateX(0)}}\" +\n    \".zsn-reveal{animation:zsn-reveal 220ms cubic-bezier(0.22,1,0.36,1)}\" +\n    // Item label is always mounted and toggled via data-collapsed, so it fades\n    // and slides BOTH on expand and collapse (the icon stays put as the anchor).\n    \".zsn-label{transition:opacity 220ms cubic-bezier(0.22,1,0.36,1),transform 220ms cubic-bezier(0.22,1,0.36,1)}\" +\n    '.zsn-label[data-collapsed=\"true\"]{opacity:0;transform:translateX(-6px);pointer-events:none}' +\n    \"@media (prefers-reduced-motion: reduce){.zsn-reveal,.zsn-label{animation:none;transition:none}}\";\n  document.head.appendChild(el);\n}\n\n// ─── Astro UX Status Shape ───────────────────────────────────────────────────\n\n/** Astro UX dual-coded status shape (color + geometry). */\nfunction NavStatusShape({\n  status,\n  size = 8,\n}: {\n  status: string;\n  size?: number;\n}) {\n  const { tokens } = useTheme();\n  const color =\n    tokens.colors.status[status as keyof typeof tokens.colors.status] ??\n    tokens.colors.status.off;\n  const glow = `${color}50`;\n  const style = {\n    flexShrink: 0 as const,\n    filter: `drop-shadow(0 0 3px ${glow})`,\n  };\n\n  switch (status) {\n    case \"caution\":\n      return (\n        <svg\n          viewBox=\"0 0 12 12\"\n          width={size}\n          height={size}\n          style={style}\n          aria-hidden=\"true\"\n        >\n          <rect x=\"1\" y=\"1\" width=\"10\" height=\"10\" fill={color} />\n        </svg>\n      );\n    case \"serious\":\n      return (\n        <svg\n          viewBox=\"0 0 12 12\"\n          width={size}\n          height={size}\n          style={style}\n          aria-hidden=\"true\"\n        >\n          <polygon points=\"6,1 11,6 6,11 1,6\" fill={color} />\n        </svg>\n      );\n    case \"critical\":\n      return (\n        <svg\n          viewBox=\"0 0 12 12\"\n          width={size}\n          height={size}\n          style={style}\n          aria-hidden=\"true\"\n        >\n          <polygon points=\"6,11 1,2 11,2\" fill={color} />\n        </svg>\n      );\n    case \"standby\":\n      return (\n        <svg\n          viewBox=\"0 0 12 12\"\n          width={size}\n          height={size}\n          style={style}\n          aria-hidden=\"true\"\n        >\n          <circle\n            cx=\"6\"\n            cy=\"6\"\n            r=\"3.5\"\n            fill=\"none\"\n            stroke={color}\n            strokeWidth=\"2\"\n          />\n        </svg>\n      );\n    case \"off\":\n      return (\n        <svg\n          viewBox=\"0 0 12 12\"\n          width={size}\n          height={size}\n          style={style}\n          aria-hidden=\"true\"\n        >\n          <circle cx=\"6\" cy=\"6\" r=\"3\" fill={color} />\n        </svg>\n      );\n    default: // normal\n      return (\n        <svg\n          viewBox=\"0 0 12 12\"\n          width={size}\n          height={size}\n          style={style}\n          aria-hidden=\"true\"\n        >\n          <circle cx=\"6\" cy=\"6\" r=\"5\" fill={color} />\n        </svg>\n      );\n  }\n}\n\n// ─── Responsive Breakpoints ──────────────────────────────────────────────────\n\nconst SIDENAV_BREAKPOINTS = {\n  mobile: 768,\n  tablet: 1024,\n} as const;\n\ntype SideNavMode = \"desktop\" | \"tablet\" | \"mobile\";\n\nfunction getSideNavMode(width: number): SideNavMode {\n  if (width < SIDENAV_BREAKPOINTS.mobile) return \"mobile\";\n  if (width < SIDENAV_BREAKPOINTS.tablet) return \"tablet\";\n  return \"desktop\";\n}\n\n// ─── Context ─────────────────────────────────────────────────────────────────\n\ninterface SideNavContextValue {\n  collapsed: boolean;\n  mobileOpen: boolean;\n  mode: SideNavMode;\n  density: \"default\" | \"compact\";\n  showCollapseToggle: boolean;\n  setMobileOpen: (open: boolean) => void;\n  toggleCollapse: () => void;\n}\n\nconst SideNavContext = createContext<SideNavContextValue>({\n  collapsed: false,\n  mobileOpen: false,\n  mode: \"desktop\",\n  density: \"default\",\n  showCollapseToggle: true,\n  setMobileOpen: () => {},\n  toggleCollapse: () => {},\n});\n\n// ─── SideNav ─────────────────────────────────────────────────────────────────\n\nexport interface SideNavProps {\n  /** Collapsed mode (icon-only). When omitted, auto-collapses on tablet viewports. */\n  collapsed?: boolean;\n  /** Callback when collapsed state changes (via toggle button or responsive breakpoint). */\n  onCollapsedChange?: (collapsed: boolean) => void;\n  /** Show a collapse/expand toggle button in the sidebar (default true). */\n  showCollapseToggle?: boolean;\n  /** Width in pixels (default 260) */\n  width?: number;\n  /** Collapsed width in pixels (default 64) */\n  collapsedWidth?: number;\n  /**\n   * Row density. `'compact'` tightens row padding, drops the left accent bar\n   * in favour of a pill-style (rounded, bg-tinted) active row, and shrinks the\n   * label — matching the v2.3 operator/admin secondary-nav mock. Default\n   * `'default'`. (TODO: row inset + mono section headings for full mock parity.)\n   */\n  density?: \"default\" | \"compact\";\n  /**\n   * Mobile viewport behavior.\n   * - `'drawer'` (default): hamburger button with slide-out overlay drawer.\n   * - `'collapsed'`: persistent collapsed icon-only strip (same as tablet).\n   */\n  mobileVariant?: \"drawer\" | \"collapsed\";\n  /** Children (SideNav.Header, SideNav.Item, SideNav.Section, SideNav.Footer) */\n  children?: React.ReactNode;\n  /** Custom style */\n  style?: React.CSSProperties;\n}\n\nconst SideNavRoot = memo(function SideNav({\n  collapsed,\n  onCollapsedChange,\n  showCollapseToggle = true,\n  width = 260,\n  collapsedWidth = 64,\n  density = \"default\",\n  mobileVariant = \"drawer\",\n  children,\n  style,\n}: SideNavProps): React.ReactElement {\n  const { tokens, theme } = useTheme();\n  const isTransparentTheme =\n    theme === \"transparent\" ||\n    theme === \"transparent-bold\" ||\n    theme === \"transparent-minimal\";\n  const [mobileOpen, setMobileOpen] = useState(false);\n  const [userCollapsed, setUserCollapsed] = useState<boolean | null>(null);\n\n  // Initialize to 'desktop' to guarantee the first client render matches SSR\n  // (where window is undefined), preventing a React hydration mismatch if the\n  // client happens to be on a mobile/tablet width at initial load.\n  const [viewMode, setViewMode] = useState<SideNavMode>(\"desktop\");\n\n  useIsomorphicLayoutEffect(() => {\n    if (typeof window === \"undefined\") return;\n\n    // Synchronously correct the viewMode right after hydration but before paint\n    setViewMode(getSideNavMode(window.innerWidth));\n\n    let rafId: number;\n    const handleResize = () => {\n      cancelAnimationFrame(rafId);\n      rafId = requestAnimationFrame(() =>\n        setViewMode(getSideNavMode(window.innerWidth)),\n      );\n    };\n    window.addEventListener(\"resize\", handleResize, { passive: true });\n    return () => {\n      window.removeEventListener(\"resize\", handleResize);\n      cancelAnimationFrame(rafId);\n    };\n  }, []);\n\n  useIsomorphicLayoutEffect(() => {\n    ensureSideNavReveal();\n  }, []);\n\n  // When mobileVariant='collapsed', promote mobile to tablet (collapsed inline strip)\n  const effectiveMode =\n    mobileVariant === \"collapsed\" && viewMode === \"mobile\"\n      ? \"tablet\"\n      : viewMode;\n\n  // Reset user toggle when crossing breakpoints\n  useEffect(() => {\n    setUserCollapsed(null);\n  }, [effectiveMode]);\n\n  // Close mobile drawer when switching away from mobile\n  useEffect(() => {\n    if (effectiveMode !== \"mobile\" && mobileOpen) setMobileOpen(false);\n  }, [effectiveMode, mobileOpen]);\n\n  // Close mobile nav on escape\n  useEffect(() => {\n    if (!mobileOpen) return;\n    const handleEsc = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") setMobileOpen(false);\n    };\n    document.addEventListener(\"keydown\", handleEsc);\n    return () => document.removeEventListener(\"keydown\", handleEsc);\n  }, [mobileOpen]);\n\n  // Resolve collapsed: explicit prop > user toggle > auto (tablet = collapsed)\n  const autoCollapsed = effectiveMode === \"tablet\";\n  const isCollapsed =\n    collapsed !== undefined\n      ? collapsed\n      : userCollapsed !== null\n        ? userCollapsed\n        : autoCollapsed;\n  const isMobile = effectiveMode === \"mobile\";\n  const navWidth = isCollapsed ? collapsedWidth : width;\n\n  const handleToggleCollapse = useCallback(() => {\n    const next = !isCollapsed;\n    setUserCollapsed(next);\n    onCollapsedChange?.(next);\n  }, [isCollapsed, onCollapsedChange]);\n\n  const navStyle: React.CSSProperties = {\n    display: \"flex\",\n    flexDirection: \"column\",\n    width: isMobile ? 280 : navWidth,\n    height: \"100%\",\n    backgroundColor: isTransparentTheme\n      ? \"rgba(15, 12, 30, 0.7)\"\n      : tokens.colors.background.surface,\n    borderRight: `1px solid ${tokens.colors.border.muted}`,\n    transition:\n      \"width 0.3s cubic-bezier(0.22, 1, 0.36, 1), transform 0.25s ease\",\n    overflowX: \"hidden\",\n    overflowY: \"auto\",\n    flexShrink: 0,\n    fontFamily: tokens.typography.fontFamily.primary,\n    ...(isTransparentTheme\n      ? {\n          backdropFilter: \"blur(16px)\",\n          WebkitBackdropFilter: \"blur(16px)\",\n        }\n      : {}),\n    ...style,\n  };\n\n  const contextValue: SideNavContextValue = {\n    collapsed: isCollapsed,\n    mobileOpen,\n    mode: effectiveMode,\n    density,\n    showCollapseToggle,\n    setMobileOpen,\n    toggleCollapse: handleToggleCollapse,\n  };\n\n  // Mobile: hamburger button + overlay drawer\n  if (isMobile) {\n    return (\n      <SideNavContext.Provider value={contextValue}>\n        {/* Hamburger button */}\n        <button\n          aria-label=\"Open navigation\"\n          onClick={() => setMobileOpen(true)}\n          style={{\n            position: \"fixed\",\n            top: 6,\n            left: 6,\n            zIndex: 1001,\n            display: \"flex\",\n            alignItems: \"center\",\n            justifyContent: \"center\",\n            width: 32,\n            height: 32,\n            border: \"none\",\n            borderRadius: tokens.borderRadius.sm,\n            backgroundColor: \"transparent\",\n            color: tokens.colors.text.primary,\n            cursor: \"pointer\",\n            padding: 0,\n            transition: tokens.animation.fast,\n          }}\n        >\n          <svg\n            width=\"18\"\n            height=\"18\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            strokeWidth=\"2.5\"\n            strokeLinecap=\"round\"\n          >\n            <line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\" />\n            <line x1=\"3\" y1=\"12\" x2=\"21\" y2=\"12\" />\n            <line x1=\"3\" y1=\"18\" x2=\"21\" y2=\"18\" />\n          </svg>\n        </button>\n\n        {/* Overlay */}\n        <div\n          aria-hidden=\"true\"\n          style={{\n            position: \"fixed\",\n            inset: 0,\n            zIndex: 1002,\n            backgroundColor: `${tokens.colors.background.base}99`,\n            backdropFilter: \"blur(4px)\",\n            opacity: mobileOpen ? 1 : 0,\n            pointerEvents: mobileOpen ? \"auto\" : \"none\",\n            transition: \"opacity 0.25s ease\",\n          }}\n          onClick={() => setMobileOpen(false)}\n        />\n\n        {/* Slide-out nav */}\n        <nav\n          role=\"navigation\"\n          aria-label=\"Main navigation\"\n          style={{\n            ...navStyle,\n            position: \"fixed\",\n            top: 0,\n            left: 0,\n            zIndex: 1003,\n            transform: mobileOpen ? \"translateX(0)\" : \"translateX(-100%)\",\n            boxShadow: mobileOpen ? tokens.shadows.xl : \"none\",\n          }}\n        >\n          {children}\n        </nav>\n      </SideNavContext.Provider>\n    );\n  }\n\n  return (\n    <SideNavContext.Provider value={contextValue}>\n      <nav role=\"navigation\" aria-label=\"Main navigation\" style={navStyle}>\n        {children}\n      </nav>\n    </SideNavContext.Provider>\n  );\n});\n\n// ─── Header ──────────────────────────────────────────────────────────────────\n\n/** Default height for the logo row so dashboard / operator / other apps align the same mark. */\nexport const SIDENAV_HEADER_LOGO_SLOT_HEIGHT_PX = 44;\n\nexport interface SideNavHeaderProps {\n  /** Logo element (Icon, image, or ReactNode) */\n  logo?: React.ReactNode;\n  /** Compact logo shown when sidebar is collapsed or on tablet (e.g., just the icon mark) */\n  collapsedLogo?: React.ReactNode;\n  /** App title */\n  title?: string;\n  /** Subtitle or version */\n  subtitle?: string;\n  /** Role badge (e.g., \"Operator\", \"Admin\") */\n  badge?: string;\n  /** Badge variant for color */\n  badgeVariant?: \"info\" | \"success\" | \"warning\" | \"caution\";\n  /**\n   * Fixed height (px) for the top logo band. Title, subtitle, and badge render below this band\n   * so different logo assets still line up across apps (dashboard vs operator).\n   */\n  logoSlotHeight?: number;\n  /** Children override (advanced: replaces default header content entirely) */\n  children?: React.ReactNode;\n}\n\n/** Chevron toggle button for collapsing/expanding the sidebar. */\nfunction CollapseToggleButton() {\n  const { tokens } = useTheme();\n  const { collapsed, toggleCollapse } = useContext(SideNavContext);\n  const [hovered, setHovered] = useState(false);\n\n  return (\n    <button\n      type=\"button\"\n      aria-label={collapsed ? \"Expand sidebar\" : \"Collapse sidebar\"}\n      onClick={toggleCollapse}\n      onMouseEnter={() => setHovered(true)}\n      onMouseLeave={() => setHovered(false)}\n      style={{\n        display: \"flex\",\n        alignItems: \"center\",\n        justifyContent: \"center\",\n        width: 28,\n        height: 28,\n        border: `1px solid ${hovered ? tokens.colors.border.focus : tokens.colors.border.muted}`,\n        borderRadius: tokens.borderRadius.md,\n        backgroundColor: hovered\n          ? `${tokens.colors.accent.primary}15`\n          : \"transparent\",\n        color: hovered\n          ? tokens.colors.accent.primary\n          : tokens.colors.text.tertiary,\n        cursor: \"pointer\",\n        flexShrink: 0,\n        padding: 0,\n        transition: tokens.animation.fast,\n        outline: \"none\",\n      }}\n    >\n      <svg\n        width=\"14\"\n        height=\"14\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth=\"2\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        style={{\n          transition: \"transform 0.25s ease\",\n          transform: collapsed ? \"rotate(180deg)\" : \"rotate(0deg)\",\n        }}\n      >\n        <polyline points=\"15 18 9 12 15 6\" />\n      </svg>\n    </button>\n  );\n}\n\nconst SideNavHeader = memo(function SideNavHeader({\n  logo,\n  collapsedLogo,\n  title,\n  subtitle,\n  badge,\n  badgeVariant = \"info\",\n  logoSlotHeight = SIDENAV_HEADER_LOGO_SLOT_HEIGHT_PX,\n  children,\n}: SideNavHeaderProps): React.ReactElement {\n  const { tokens } = useTheme();\n  const { collapsed, mode, showCollapseToggle, toggleCollapse } =\n    useContext(SideNavContext);\n  const displayLogo = collapsed && collapsedLogo ? collapsedLogo : logo;\n  const showToggle = showCollapseToggle && mode !== \"mobile\";\n  const hasMeta = Boolean(title || subtitle || badge);\n  const slotH = logoSlotHeight;\n\n  const badgeColors: Record<string, string> = {\n    info: tokens.colors.accent.primary,\n    success: tokens.colors.status.normal,\n    warning: tokens.colors.status.caution,\n    caution: tokens.colors.status.serious,\n  };\n\n  const metaBlock =\n    !collapsed && hasMeta ? (\n      <div\n        className=\"zsn-reveal\"\n        style={{ flex: 1, minWidth: 0, width: \"100%\" }}\n      >\n        {title ? (\n          <div\n            style={{\n              fontSize: tokens.typography.fontSize.sm,\n              fontWeight: tokens.typography.fontWeight.bold,\n              color: tokens.colors.text.primary,\n              lineHeight: tokens.typography.lineHeight.tight,\n              whiteSpace: \"nowrap\",\n              overflow: \"hidden\",\n              textOverflow: \"ellipsis\",\n            }}\n          >\n            {title}\n          </div>\n        ) : null}\n        {subtitle || badge ? (\n          <div\n            style={{\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: tokens.spacing.xs,\n              marginTop: title ? \"2px\" : 0,\n              flexWrap: \"wrap\",\n            }}\n          >\n            {subtitle ? (\n              <span\n                style={{\n                  fontSize: tokens.typography.fontSize.xxs,\n                  color: tokens.colors.text.tertiary,\n                }}\n              >\n                {subtitle}\n              </span>\n            ) : null}\n            {badge ? (\n              <span\n                style={{\n                  fontSize: \"0.6rem\",\n                  fontWeight: tokens.typography.fontWeight.bold,\n                  color:\n                    badgeColors[badgeVariant] ||\n                    safeAccentText(tokens.colors.accent.primary),\n                  backgroundColor: `${badgeColors[badgeVariant] || tokens.colors.accent.primary}18`,\n                  border: `1px solid ${badgeColors[badgeVariant] || tokens.colors.accent.primary}30`,\n                  padding: \"1px 6px\",\n                  borderRadius: tokens.borderRadius.sm,\n                  textTransform: \"uppercase\",\n                  letterSpacing: \"0.05em\",\n                }}\n              >\n                {badge}\n              </span>\n            ) : null}\n          </div>\n        ) : null}\n      </div>\n    ) : null;\n\n  const logoSlot = displayLogo ? (\n    <div\n      style={{\n        height: slotH,\n        minHeight: slotH,\n        maxHeight: slotH,\n        width: \"100%\",\n        display: \"flex\",\n        alignItems: \"center\",\n        justifyContent: collapsed ? \"center\" : \"flex-start\",\n        overflow: \"hidden\",\n        boxSizing: \"border-box\",\n        marginBottom:\n          !collapsed && hasMeta && displayLogo ? tokens.spacing.sm : 0,\n      }}\n    >\n      <div\n        style={{\n          maxHeight: \"100%\",\n          maxWidth: \"100%\",\n          display: \"flex\",\n          alignItems: \"center\",\n          justifyContent: collapsed ? \"center\" : \"flex-start\",\n          minWidth: 0,\n          cursor: collapsed && showToggle ? \"pointer\" : undefined,\n        }}\n        onClick={collapsed && showToggle ? toggleCollapse : undefined}\n      >\n        {displayLogo}\n      </div>\n    </div>\n  ) : null;\n\n  if (children) {\n    return (\n      <div\n        style={{\n          padding: `${tokens.spacing.md} 16px ${tokens.spacing.md} 15px`,\n          borderBottom: `1px solid ${tokens.colors.border.muted}`,\n          flexShrink: 0,\n          boxSizing: \"border-box\",\n          position: \"relative\",\n        }}\n      >\n        {children}\n      </div>\n    );\n  }\n\n  // Collapsed: centered logo in the same fixed slot height as expanded (visual parity with operator).\n  if (collapsed) {\n    return (\n      <div\n        style={{\n          display: \"flex\",\n          flexDirection: \"column\",\n          alignItems: \"center\",\n          padding: `${tokens.spacing.md} ${tokens.spacing.sm}`,\n          minHeight: slotH + 24,\n          borderBottom: `1px solid ${tokens.colors.border.muted}`,\n          flexShrink: 0,\n          boxSizing: \"border-box\",\n          position: \"relative\",\n          justifyContent: \"center\",\n        }}\n      >\n        {logoSlot}\n        {showToggle ? (\n          <div\n            style={{\n              position: \"absolute\",\n              right: 4,\n              top: \"50%\",\n              transform: \"translateY(-50%)\",\n            }}\n          >\n            <CollapseToggleButton />\n          </div>\n        ) : null}\n      </div>\n    );\n  }\n\n  return (\n    <div\n      style={{\n        display: \"flex\",\n        flexDirection: \"column\",\n        alignItems: \"stretch\",\n        padding: `${tokens.spacing.md} 16px ${tokens.spacing.md} 15px`,\n        borderBottom: `1px solid ${tokens.colors.border.muted}`,\n        flexShrink: 0,\n        boxSizing: \"border-box\",\n        position: \"relative\",\n      }}\n    >\n      {showToggle ? (\n        <div\n          style={{\n            position: \"absolute\",\n            top: tokens.spacing.sm,\n            right: tokens.spacing.sm,\n            zIndex: 1,\n          }}\n        >\n          <CollapseToggleButton />\n        </div>\n      ) : null}\n      <div\n        style={{\n          paddingRight: showToggle ? 36 : 0,\n          width: \"100%\",\n          minWidth: 0,\n        }}\n      >\n        {logoSlot}\n        {metaBlock}\n      </div>\n    </div>\n  );\n});\n\n// ─── Item ────────────────────────────────────────────────────────────────────\n\nexport interface SideNavItemProps {\n  /** Icon name from zendir-ui icon library */\n  icon?: IconName | React.ReactNode;\n  /** Label text */\n  label: string;\n  /** Description text displayed beneath the label (hidden in collapsed mode) */\n  description?: string;\n  /** Small tag/chip displayed after the label (e.g. \"v2\", \"NEW\", \"BETA\") */\n  tag?: string;\n  /** Tag color variant */\n  tagVariant?: \"default\" | \"info\" | \"success\" | \"warning\" | \"danger\";\n  /** Link href (renders <a>) */\n  href?: string;\n  /** Click handler (renders <button>) */\n  onClick?: () => void;\n  /** Active state */\n  active?: boolean;\n  /** Disabled state */\n  disabled?: boolean;\n  /** Notification badge count */\n  badge?: number;\n  /** External link indicator */\n  external?: boolean;\n  /**\n   * Astro UX status level — renders a dual-coded indicator (color + shape).\n   * Shapes per official Astro UXDS: normal = ● filled circle, standby = ◎ ring,\n   * caution = ■ square, serious = ◆ diamond, critical = ▼ triangle, off = · small circle.\n   */\n  status?: \"off\" | \"standby\" | \"normal\" | \"caution\" | \"serious\" | \"critical\";\n  /** Optional status label shown as tooltip or text next to status shape */\n  statusLabel?: string;\n  /** Right-side slot — arbitrary ReactNode rendered at the end of the item row */\n  suffix?: React.ReactNode;\n}\n\nconst TAG_COLORS: Record<string, { bg: string; fg: string; border: string }> = {\n  default: { bg: \"#ffffff10\", fg: \"#9590a8\", border: \"#ffffff15\" },\n  info: { bg: \"#8a2be218\", fg: \"#c4a0ff\", border: \"#8a2be230\" },\n  success: { bg: \"#56f00018\", fg: \"#56f000\", border: \"#56f00030\" },\n  warning: { bg: \"#fce83a18\", fg: \"#fce83a\", border: \"#fce83a30\" },\n  danger: { bg: \"#ff383818\", fg: \"#ff3838\", border: \"#ff383830\" },\n};\n\nconst SideNavItem = memo(function SideNavItem({\n  icon,\n  label,\n  description,\n  tag,\n  tagVariant = \"default\",\n  href,\n  onClick,\n  active = false,\n  disabled = false,\n  badge,\n  external = false,\n  status,\n  statusLabel,\n  suffix,\n}: SideNavItemProps): React.ReactElement {\n  const { tokens } = useTheme();\n  const { collapsed, setMobileOpen, density } = useContext(SideNavContext);\n  const compact = density === \"compact\" && !collapsed;\n  const [isHovered, setIsHovered] = useState(false);\n\n  const handleClick = useCallback(\n    (e: React.MouseEvent) => {\n      if (disabled) return;\n      if (onClick && href && !e.metaKey && !e.ctrlKey && !e.shiftKey) {\n        e.preventDefault();\n      }\n      setMobileOpen(false);\n      onClick?.();\n    },\n    [disabled, onClick, href, setMobileOpen],\n  );\n\n  // Status-aware accent: when an item has a status, tint active/hover with its color\n  const statusColor = status\n    ? (tokens.colors.status[status] ?? undefined)\n    : undefined;\n  const accentColor =\n    statusColor && active\n      ? statusColor\n      : safeAccentText(tokens.colors.accent.primary);\n\n  const hasDescription = !!description && !collapsed;\n\n  const iconElement =\n    typeof icon === \"string\" ? (\n      <Icon\n        name={icon as IconName}\n        size={hasDescription ? 22 : 20}\n        color={active ? accentColor : tokens.colors.text.secondary}\n      />\n    ) : (\n      icon\n    );\n\n  const itemStyle: React.CSSProperties = {\n    display: \"flex\",\n    alignItems: hasDescription ? \"flex-start\" : \"center\",\n    gap: tokens.spacing.sm,\n    // Collapsed keeps the SAME 12px left inset as the expanded row, so the\n    // icon holds its horizontal position when the rail expands — it doesn't\n    // jump from a centered slot to a left-aligned one. Size the collapsed\n    // width so that fixed inset reads as centered.\n    padding: collapsed\n      ? `${tokens.spacing.sm} 12px`\n      : compact\n        ? \"7px 8px\"\n        : hasDescription\n          ? `10px 16px 10px 12px`\n          : `${tokens.spacing.sm} 16px ${tokens.spacing.sm} 12px`,\n    // Compact: pill-style rounded row (mock parity). Default: square row.\n    borderRadius: compact ? tokens.borderRadius.md : 0,\n    justifyContent: \"flex-start\",\n    color: active\n      ? accentColor\n      : disabled\n        ? tokens.colors.text.tertiary\n        : tokens.colors.text.secondary,\n    backgroundColor: active\n      ? `${accentColor}12`\n      : isHovered && !disabled\n        ? `${accentColor}08`\n        : \"transparent\",\n    fontSize: compact\n      ? tokens.typography.fontSize.xs\n      : tokens.typography.fontSize.sm,\n    fontWeight: active\n      ? tokens.typography.fontWeight.semibold\n      : tokens.typography.fontWeight.normal,\n    fontFamily: tokens.typography.fontFamily.primary,\n    cursor: disabled ? \"not-allowed\" : \"pointer\",\n    textDecoration: \"none\",\n    borderTop: \"none\",\n    borderRight: \"none\",\n    borderBottom: \"none\",\n    // Compact drops the left accent bar — the active row is conveyed by the\n    // bg tint + accent text alone (mock parity). Default keeps the 3px bar.\n    borderLeft: compact\n      ? \"none\"\n      : active\n        ? `3px solid ${accentColor}`\n        : \"3px solid transparent\",\n    outline: \"none\",\n    width: \"100%\",\n    boxSizing: \"border-box\",\n    transition: tokens.animation.fast,\n    position: \"relative\",\n    opacity: disabled ? 0.5 : 1,\n  };\n\n  const tagColors = TAG_COLORS[tagVariant] ?? TAG_COLORS.default;\n\n  const content = (\n    <>\n      {/* Icon + collapsed status overlay */}\n      {iconElement && (\n        <span\n          style={{\n            flexShrink: 0,\n            display: \"flex\",\n            position: \"relative\",\n            marginTop: hasDescription ? \"2px\" : 0,\n          }}\n        >\n          {iconElement}\n          {/* In collapsed mode, show a small status shape overlaid on the icon (top-left) */}\n          {collapsed && status && (\n            <span\n              style={{\n                position: \"absolute\",\n                top: -3,\n                left: -4,\n                lineHeight: 0,\n              }}\n              title={statusLabel ?? status}\n            >\n              <NavStatusShape status={status} size={7} />\n            </span>\n          )}\n        </span>\n      )}\n      {/* Label — always mounted and toggled via data-collapsed so it fades and\n          slides BOTH on expand and collapse; the icon holds its position as\n          the anchor and only the label moves. */}\n      <span\n        className=\"zsn-label\"\n        data-collapsed={collapsed ? \"true\" : \"false\"}\n        style={{ flex: 1, minWidth: 0, overflow: \"hidden\" }}\n      >\n        <span style={{ display: \"flex\", alignItems: \"center\", gap: 6 }}>\n          <span\n            style={{\n              whiteSpace: \"nowrap\",\n              overflow: \"hidden\",\n              textOverflow: \"ellipsis\",\n            }}\n          >\n            {label}\n          </span>\n          {tag && (\n            <span\n              style={{\n                fontSize: \"0.6rem\",\n                fontWeight: tokens.typography.fontWeight.bold,\n                color: tagColors.fg,\n                backgroundColor: tagColors.bg,\n                border: `1px solid ${tagColors.border}`,\n                padding: \"1px 5px\",\n                borderRadius: tokens.borderRadius.sm,\n                textTransform: \"uppercase\",\n                letterSpacing: \"0.04em\",\n                flexShrink: 0,\n                lineHeight: \"1.3\",\n                whiteSpace: \"nowrap\",\n              }}\n            >\n              {tag}\n            </span>\n          )}\n        </span>\n        {description && !collapsed && (\n          <span\n            style={{\n              display: \"block\",\n              fontSize: tokens.typography.fontSize.xxs,\n              color: tokens.colors.text.tertiary,\n              lineHeight: tokens.typography.lineHeight.normal,\n              marginTop: \"2px\",\n              whiteSpace: \"nowrap\",\n              overflow: \"hidden\",\n              textOverflow: \"ellipsis\",\n              fontWeight: tokens.typography.fontWeight.normal,\n            }}\n          >\n            {description}\n          </span>\n        )}\n      </span>\n      {/* Right-side trailing elements — expanded only; collapsed shows the\n          status overlay on the icon instead. */}\n      {!collapsed &&\n        ((badge !== undefined && badge > 0) ||\n          status ||\n          suffix ||\n          external) && (\n          <span\n            className=\"zsn-reveal\"\n            style={{\n              display: \"inline-flex\",\n              alignItems: \"center\",\n              gap: 8,\n              flexShrink: 0,\n              marginTop: hasDescription ? \"2px\" : 0,\n            }}\n          >\n            {/* Badge */}\n            {badge !== undefined && badge > 0 && (\n              <span\n                style={{\n                  fontSize: \"0.65rem\",\n                  fontWeight: tokens.typography.fontWeight.bold,\n                  color: \"#fff\",\n                  backgroundColor: tokens.colors.status.critical,\n                  borderRadius: tokens.borderRadius.full,\n                  minWidth: \"18px\",\n                  height: \"18px\",\n                  display: \"inline-flex\",\n                  alignItems: \"center\",\n                  justifyContent: \"center\",\n                  padding: \"0 5px\",\n                  flexShrink: 0,\n                  lineHeight: 1,\n                  boxSizing: \"border-box\",\n                }}\n              >\n                {badge > 99 ? \"99+\" : badge}\n              </span>\n            )}\n            {/* Status */}\n            {status && (\n              <span\n                style={{\n                  display: \"inline-flex\",\n                  alignItems: \"center\",\n                  flexShrink: 0,\n                }}\n                role=\"status\"\n                aria-label={`Status: ${statusLabel ?? status}`}\n                title={statusLabel ?? status}\n              >\n                <NavStatusShape status={status} size={8} />\n              </span>\n            )}\n            {/* Suffix */}\n            {suffix && (\n              <span\n                style={{\n                  flexShrink: 0,\n                  display: \"inline-flex\",\n                  alignItems: \"center\",\n                }}\n              >\n                {suffix}\n              </span>\n            )}\n            {/* External */}\n            {external && (\n              <svg\n                width=\"12\"\n                height=\"12\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n                style={{ flexShrink: 0, opacity: 0.5 }}\n              >\n                <path d=\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\" />\n                <polyline points=\"15 3 21 3 21 9\" />\n                <line x1=\"10\" y1=\"14\" x2=\"21\" y2=\"3\" />\n              </svg>\n            )}\n          </span>\n        )}\n    </>\n  );\n\n  const props = {\n    style: itemStyle,\n    onMouseEnter: () => setIsHovered(true),\n    onMouseLeave: () => setIsHovered(false),\n    title: collapsed ? label : undefined,\n    \"aria-current\": active ? (\"page\" as const) : undefined,\n    \"aria-disabled\": disabled,\n  };\n\n  if (href && !disabled) {\n    return (\n      <a\n        href={href}\n        onClick={handleClick}\n        target={external ? \"_blank\" : undefined}\n        rel={external ? \"noopener noreferrer\" : undefined}\n        {...props}\n      >\n        {content}\n      </a>\n    );\n  }\n\n  return (\n    <button type=\"button\" onClick={handleClick} disabled={disabled} {...props}>\n      {content}\n    </button>\n  );\n});\n\n// ─── Section ─────────────────────────────────────────────────────────────────\n\nexport interface SideNavSectionProps {\n  /** Section title */\n  title?: string;\n  /** Children (SideNav.Item elements) */\n  children?: React.ReactNode;\n}\n\nconst SideNavSection = memo(function SideNavSection({\n  title,\n  children,\n}: SideNavSectionProps): React.ReactElement {\n  const { tokens } = useTheme();\n  const { collapsed } = useContext(SideNavContext);\n\n  return (\n    <div style={{ marginTop: tokens.spacing.sm }}>\n      {title && !collapsed && (\n        <div\n          className=\"zsn-reveal\"\n          style={{\n            padding: `${tokens.spacing.xs} 16px ${tokens.spacing.xs} 15px`,\n            fontSize: tokens.typography.fontSize.xxs,\n            fontWeight: tokens.typography.fontWeight.bold,\n            color: tokens.colors.text.tertiary,\n            textTransform: \"uppercase\",\n            letterSpacing: \"0.08em\",\n          }}\n        >\n          {title}\n        </div>\n      )}\n      {collapsed && title && (\n        <div\n          style={{\n            width: \"60%\",\n            height: \"1px\",\n            backgroundColor: tokens.colors.border.muted,\n            margin: `${tokens.spacing.xs} auto`,\n          }}\n        />\n      )}\n      {children}\n    </div>\n  );\n});\n\n// ─── Divider ─────────────────────────────────────────────────────────────────\n\nexport interface SideNavDividerProps {\n  /** Optional label shown in the center of the divider line */\n  label?: string;\n}\n\nconst SideNavDivider = memo(function SideNavDivider({\n  label,\n}: SideNavDividerProps): React.ReactElement {\n  const { tokens } = useTheme();\n  const { collapsed } = useContext(SideNavContext);\n\n  if (collapsed) {\n    return (\n      <div\n        style={{\n          width: \"60%\",\n          height: \"1px\",\n          backgroundColor: tokens.colors.border.muted,\n          margin: `${tokens.spacing.sm} auto`,\n        }}\n      />\n    );\n  }\n\n  if (label) {\n    return (\n      <div\n        style={{\n          display: \"flex\",\n          alignItems: \"center\",\n          gap: tokens.spacing.sm,\n          padding: `${tokens.spacing.sm} 16px ${tokens.spacing.sm} 15px`,\n        }}\n      >\n        <div\n          style={{\n            flex: 1,\n            height: \"1px\",\n            backgroundColor: tokens.colors.border.muted,\n          }}\n        />\n        <span\n          style={{\n            fontSize: tokens.typography.fontSize.xxs,\n            color: tokens.colors.text.tertiary,\n            textTransform: \"uppercase\",\n            letterSpacing: \"0.06em\",\n            whiteSpace: \"nowrap\",\n          }}\n        >\n          {label}\n        </span>\n        <div\n          style={{\n            flex: 1,\n            height: \"1px\",\n            backgroundColor: tokens.colors.border.muted,\n          }}\n        />\n      </div>\n    );\n  }\n\n  return (\n    <div\n      style={{\n        height: \"1px\",\n        backgroundColor: tokens.colors.border.muted,\n        margin: `${tokens.spacing.sm} 16px ${tokens.spacing.sm} 15px`,\n      }}\n    />\n  );\n});\n\n// ─── Footer ──────────────────────────────────────────────────────────────────\n\nexport interface SideNavFooterProps {\n  children?: React.ReactNode;\n}\n\nconst SideNavFooter = memo(function SideNavFooter({\n  children,\n}: SideNavFooterProps): React.ReactElement {\n  const { tokens } = useTheme();\n\n  return (\n    <div\n      style={{\n        marginTop: \"auto\",\n        borderTop: `1px solid ${tokens.colors.border.muted}`,\n        paddingTop: tokens.spacing.xs,\n        paddingBottom: tokens.spacing.xs,\n      }}\n    >\n      {children}\n    </div>\n  );\n});\n\n// ─── Compound Export ─────────────────────────────────────────────────────────\n\ntype SideNavComponent = typeof SideNavRoot & {\n  Header: typeof SideNavHeader;\n  Item: typeof SideNavItem;\n  Section: typeof SideNavSection;\n  Divider: typeof SideNavDivider;\n  Footer: typeof SideNavFooter;\n};\n\nexport const SideNav: SideNavComponent = Object.assign(SideNavRoot, {\n  Header: SideNavHeader,\n  Item: SideNavItem,\n  Section: SideNavSection,\n  Divider: SideNavDivider,\n  Footer: SideNavFooter,\n});\n\nexport default SideNav;\n"],"mappings":"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"}

package/dist/react/core/navigation/Tabs.d.ts

@@ -1,5 +1,4 @@
 import { default as React } from 'react';
-
 export interface TabsProps {
     /** Active tab value */
     value: string;

package/dist/react/core/navigation/Tabs.js

@@ -1,129 +1,123 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { memo, useId, createContext, useContext } from "react";
 import { useTheme } from "../../theme/ThemeProvider.js";
 import { classNames, safeAccentText } from "../../utils/index.js";
-const TabsContext = createContext(null);
-const useTabsContext = () => {
-  const context = useContext(TabsContext);
-  if (!context) {
-    throw new Error("Tabs components must be used within a Tabs provider");
-  }
-  return context;
+import { createContext, memo, useContext, useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/react/core/navigation/Tabs.tsx
+/**
+* @zendir/ui - Tabs Component
+*
+* Tab navigation following Astro UX Design System.
+*
+* @example
+* ```tsx
+* <Tabs value={activeTab} onChange={setActiveTab}>
+*   <Tabs.List>
+*     <Tabs.Tab value="overview">Overview</Tabs.Tab>
+*     <Tabs.Tab value="telemetry">Telemetry</Tabs.Tab>
+*     <Tabs.Tab value="commands">Commands</Tabs.Tab>
+*   </Tabs.List>
+*   <Tabs.Panel value="overview">Overview content</Tabs.Panel>
+*   <Tabs.Panel value="telemetry">Telemetry content</Tabs.Panel>
+*   <Tabs.Panel value="commands">Commands content</Tabs.Panel>
+* </Tabs>
+* ```
+*/
+var TabsContext = createContext(null);
+var useTabsContext = () => {
+	const context = useContext(TabsContext);
+	if (!context) throw new Error("Tabs components must be used within a Tabs provider");
+	return context;
 };
-const TabsList = memo(function TabsList2({
-  children,
-  className = ""
-}) {
-  const { tokens } = useTheme();
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      role: "tablist",
-      className: classNames("zendir-tabs-list", className),
-      style: {
-        display: "flex",
-        gap: tokens.spacing.xs,
-        borderBottom: tokens.borders.divider,
-        marginBottom: tokens.spacing.md
-      },
-      children
-    }
-  );
+var TabsList = memo(function TabsList({ children, className = "" }) {
+	const { tokens } = useTheme();
+	return /* @__PURE__ */ jsx("div", {
+		role: "tablist",
+		className: classNames("zendir-tabs-list", className),
+		style: {
+			display: "flex",
+			gap: tokens.spacing.xs,
+			borderBottom: tokens.borders.divider,
+			marginBottom: tokens.spacing.md
+		},
+		children
+	});
 });
-const Tab = memo(function Tab2({
-  value,
-  disabled = false,
-  icon,
-  children,
-  className = ""
-}) {
-  const { tokens } = useTheme();
-  const { value: activeValue, onChange, baseId } = useTabsContext();
-  const isActive = value === activeValue;
-  return /* @__PURE__ */ jsxs(
-    "button",
-    {
-      type: "button",
-      role: "tab",
-      id: `${baseId}-tab-${value}`,
-      "aria-controls": `${baseId}-panel-${value}`,
-      "aria-selected": isActive,
-      "aria-disabled": disabled,
-      disabled,
-      onClick: () => !disabled && onChange(value),
-      className: classNames("zendir-tab", isActive && "zendir-tab--active", className),
-      style: {
-        display: "flex",
-        alignItems: "center",
-        gap: tokens.spacing.xs,
-        padding: `${tokens.spacing.sm} ${tokens.spacing.md}`,
-        fontSize: tokens.typography.fontSize.sm,
-        fontWeight: isActive ? tokens.typography.fontWeight.semibold : tokens.typography.fontWeight.normal,
-        fontFamily: tokens.typography.fontFamily.primary,
-        color: isActive ? safeAccentText(tokens.colors.accent.primary) : tokens.colors.text.secondary,
-        backgroundColor: "transparent",
-        border: "none",
-        borderBottom: `${tokens.borders.width.thick} solid ${isActive ? tokens.colors.accent.primary : "transparent"}`,
-        marginBottom: "-1px",
-        cursor: disabled ? "not-allowed" : "pointer",
-        opacity: disabled ? 0.5 : 1,
-        transition: `all ${tokens.animation.fast}`,
-        outline: "none"
-      },
-      onMouseEnter: (e) => {
-        if (!disabled && !isActive) {
-          e.currentTarget.style.color = tokens.colors.text.primary;
-        }
-      },
-      onMouseLeave: (e) => {
-        if (!disabled && !isActive) {
-          e.currentTarget.style.color = tokens.colors.text.secondary;
-        }
-      },
-      onFocus: (e) => {
-        e.currentTarget.style.boxShadow = tokens.borders.focusRing.subtle;
-      },
-      onBlur: (e) => {
-        e.currentTarget.style.boxShadow = "none";
-      },
-      children: [
-        icon,
-        children
-      ]
-    }
-  );
+var Tab = memo(function Tab({ value, disabled = false, icon, children, className = "" }) {
+	const { tokens } = useTheme();
+	const { value: activeValue, onChange, baseId } = useTabsContext();
+	const isActive = value === activeValue;
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		role: "tab",
+		id: `${baseId}-tab-${value}`,
+		"aria-controls": `${baseId}-panel-${value}`,
+		"aria-selected": isActive,
+		"aria-disabled": disabled,
+		disabled,
+		onClick: () => !disabled && onChange(value),
+		className: classNames("zendir-tab", isActive && "zendir-tab--active", className),
+		style: {
+			display: "flex",
+			alignItems: "center",
+			gap: tokens.spacing.xs,
+			padding: `${tokens.spacing.sm} ${tokens.spacing.md}`,
+			fontSize: tokens.typography.fontSize.sm,
+			fontWeight: isActive ? tokens.typography.fontWeight.semibold : tokens.typography.fontWeight.normal,
+			fontFamily: tokens.typography.fontFamily.primary,
+			color: isActive ? safeAccentText(tokens.colors.accent.primary) : tokens.colors.text.secondary,
+			backgroundColor: "transparent",
+			border: "none",
+			borderBottom: `${tokens.borders.width.thick} solid ${isActive ? tokens.colors.accent.primary : "transparent"}`,
+			marginBottom: "-1px",
+			cursor: disabled ? "not-allowed" : "pointer",
+			opacity: disabled ? .5 : 1,
+			transition: `all ${tokens.animation.fast}`,
+			outline: "none"
+		},
+		onMouseEnter: (e) => {
+			if (!disabled && !isActive) e.currentTarget.style.color = tokens.colors.text.primary;
+		},
+		onMouseLeave: (e) => {
+			if (!disabled && !isActive) e.currentTarget.style.color = tokens.colors.text.secondary;
+		},
+		onFocus: (e) => {
+			e.currentTarget.style.boxShadow = tokens.borders.focusRing.subtle;
+		},
+		onBlur: (e) => {
+			e.currentTarget.style.boxShadow = "none";
+		},
+		children: [icon, children]
+	});
 });
-const TabsPanel = memo(function TabsPanel2({
-  value,
-  children,
-  className = ""
-}) {
-  const { value: activeValue, baseId } = useTabsContext();
-  if (value !== activeValue) return null;
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      role: "tabpanel",
-      id: `${baseId}-panel-${value}`,
-      "aria-labelledby": `${baseId}-tab-${value}`,
-      className: classNames("zendir-tabs-panel", className),
-      children
-    }
-  );
+var TabsPanel = memo(function TabsPanel({ value, children, className = "" }) {
+	const { value: activeValue, baseId } = useTabsContext();
+	if (value !== activeValue) return null;
+	return /* @__PURE__ */ jsx("div", {
+		role: "tabpanel",
+		id: `${baseId}-panel-${value}`,
+		"aria-labelledby": `${baseId}-tab-${value}`,
+		className: classNames("zendir-tabs-panel", className),
+		children
+	});
 });
-const Tabs = memo(function Tabs2({
-  value,
-  onChange,
-  children,
-  className = ""
-}) {
-  const baseId = useId();
-  return /* @__PURE__ */ jsx(TabsContext.Provider, { value: { value, onChange, baseId }, children: /* @__PURE__ */ jsx("div", { className: classNames("zendir-tabs", className), children }) });
+var Tabs = memo(function Tabs({ value, onChange, children, className = "" }) {
+	const baseId = useId();
+	return /* @__PURE__ */ jsx(TabsContext.Provider, {
+		value: {
+			value,
+			onChange,
+			baseId
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			className: classNames("zendir-tabs", className),
+			children
+		})
+	});
 });
 Tabs.List = TabsList;
 Tabs.Tab = Tab;
 Tabs.Panel = TabsPanel;
-export {
-  Tabs
-};
-//# sourceMappingURL=Tabs.js.map
+//#endregion
+export { Tabs, Tabs as default };
+
+//# sourceMappingURL=Tabs.js.map

package/dist/react/core/navigation/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sources":["../../../../src/react/core/navigation/Tabs.tsx"],"sourcesContent":["/**\n * @zendir/ui - Tabs Component\n * \n * Tab navigation following Astro UX Design System.\n * \n * @example\n * ```tsx\n * <Tabs value={activeTab} onChange={setActiveTab}>\n *   <Tabs.List>\n *     <Tabs.Tab value=\"overview\">Overview</Tabs.Tab>\n *     <Tabs.Tab value=\"telemetry\">Telemetry</Tabs.Tab>\n *     <Tabs.Tab value=\"commands\">Commands</Tabs.Tab>\n *   </Tabs.List>\n *   <Tabs.Panel value=\"overview\">Overview content</Tabs.Panel>\n *   <Tabs.Panel value=\"telemetry\">Telemetry content</Tabs.Panel>\n *   <Tabs.Panel value=\"commands\">Commands content</Tabs.Panel>\n * </Tabs>\n * ```\n */\n\nimport React, { memo, createContext, useContext, useId } from 'react';\nimport { useTheme } from '../../theme';\nimport { classNames, safeAccentText } from '../../utils';\n\ninterface TabsContextValue {\n  value: string;\n  onChange: (value: string) => void;\n  baseId: string;\n}\n\nconst TabsContext = createContext<TabsContextValue | null>(null);\n\nconst useTabsContext = () => {\n  const context = useContext(TabsContext);\n  if (!context) {\n    throw new Error('Tabs components must be used within a Tabs provider');\n  }\n  return context;\n};\n\nexport interface TabsProps {\n  /** Active tab value */\n  value: string;\n  /** Change handler */\n  onChange: (value: string) => void;\n  /** Children */\n  children: React.ReactNode;\n  /** Custom className */\n  className?: string;\n}\n\nexport interface TabsListProps {\n  /** Children (Tab components) */\n  children: React.ReactNode;\n  /** Custom className */\n  className?: string;\n}\n\nexport interface TabProps {\n  /** Tab value */\n  value: string;\n  /** Disabled state */\n  disabled?: boolean;\n  /** Icon before label */\n  icon?: React.ReactNode;\n  /** Children (label) */\n  children: React.ReactNode;\n  /** Custom className */\n  className?: string;\n}\n\nexport interface TabsPanelProps {\n  /** Panel value (must match Tab value) */\n  value: string;\n  /** Children */\n  children: React.ReactNode;\n  /** Custom className */\n  className?: string;\n}\n\nconst TabsList = memo(function TabsList({\n  children,\n  className = '',\n}: TabsListProps): React.ReactElement {\n  const { tokens } = useTheme();\n  \n  return (\n    <div\n      role=\"tablist\"\n      className={classNames('zendir-tabs-list', className)}\n      style={{\n        display: 'flex',\n        gap: tokens.spacing.xs,\n        borderBottom: tokens.borders.divider,\n        marginBottom: tokens.spacing.md,\n      }}\n    >\n      {children}\n    </div>\n  );\n});\n\nconst Tab = memo(function Tab({\n  value,\n  disabled = false,\n  icon,\n  children,\n  className = '',\n}: TabProps): React.ReactElement {\n  const { tokens } = useTheme();\n  const { value: activeValue, onChange, baseId } = useTabsContext();\n  \n  const isActive = value === activeValue;\n  \n  return (\n    <button\n      type=\"button\"\n      role=\"tab\"\n      id={`${baseId}-tab-${value}`}\n      aria-controls={`${baseId}-panel-${value}`}\n      aria-selected={isActive}\n      aria-disabled={disabled}\n      disabled={disabled}\n      onClick={() => !disabled && onChange(value)}\n      className={classNames('zendir-tab', isActive && 'zendir-tab--active', className)}\n      style={{\n        display: 'flex',\n        alignItems: 'center',\n        gap: tokens.spacing.xs,\n        padding: `${tokens.spacing.sm} ${tokens.spacing.md}`,\n        fontSize: tokens.typography.fontSize.sm,\n        fontWeight: isActive ? tokens.typography.fontWeight.semibold : tokens.typography.fontWeight.normal,\n        fontFamily: tokens.typography.fontFamily.primary,\n        color: isActive ? safeAccentText(tokens.colors.accent.primary) : tokens.colors.text.secondary,\n        backgroundColor: 'transparent',\n        border: 'none',\n        borderBottom: `${tokens.borders.width.thick} solid ${isActive ? tokens.colors.accent.primary : 'transparent'}`,\n        marginBottom: '-1px',\n        cursor: disabled ? 'not-allowed' : 'pointer',\n        opacity: disabled ? 0.5 : 1,\n        transition: `all ${tokens.animation.fast}`,\n        outline: 'none',\n      }}\n      onMouseEnter={(e) => {\n        if (!disabled && !isActive) {\n          e.currentTarget.style.color = tokens.colors.text.primary;\n        }\n      }}\n      onMouseLeave={(e) => {\n        if (!disabled && !isActive) {\n          e.currentTarget.style.color = tokens.colors.text.secondary;\n        }\n      }}\n      onFocus={(e) => {\n        e.currentTarget.style.boxShadow = tokens.borders.focusRing.subtle;\n      }}\n      onBlur={(e) => {\n        e.currentTarget.style.boxShadow = 'none';\n      }}\n    >\n      {icon}\n      {children}\n    </button>\n  );\n});\n\nconst TabsPanel = memo(function TabsPanel({\n  value,\n  children,\n  className = '',\n}: TabsPanelProps): React.ReactElement | null {\n  const { value: activeValue, baseId } = useTabsContext();\n  \n  if (value !== activeValue) return null;\n  \n  return (\n    <div\n      role=\"tabpanel\"\n      id={`${baseId}-panel-${value}`}\n      aria-labelledby={`${baseId}-tab-${value}`}\n      className={classNames('zendir-tabs-panel', className)}\n    >\n      {children}\n    </div>\n  );\n});\n\nexport const Tabs = memo(function Tabs({\n  value,\n  onChange,\n  children,\n  className = '',\n}: TabsProps): React.ReactElement {\n  const baseId = useId();\n  return (\n    <TabsContext.Provider value={{ value, onChange, baseId }}>\n      <div className={classNames('zendir-tabs', className)}>\n        {children}\n      </div>\n    </TabsContext.Provider>\n  );\n}) as React.NamedExoticComponent<TabsProps> & {\n  List: typeof TabsList;\n  Tab: typeof Tab;\n  Panel: typeof TabsPanel;\n};\n\n// Attach subcomponents\n(Tabs as any).List = TabsList;\n(Tabs as any).Tab = Tab;\n(Tabs as any).Panel = TabsPanel;\n\nexport default Tabs;\n"],"names":["TabsList","Tab","TabsPanel","Tabs"],"mappings":"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"}
+{"version":3,"file":"Tabs.js","names":[],"sources":["../../../../src/react/core/navigation/Tabs.tsx"],"sourcesContent":["/**\n * @zendir/ui - Tabs Component\n *\n * Tab navigation following Astro UX Design System.\n *\n * @example\n * ```tsx\n * <Tabs value={activeTab} onChange={setActiveTab}>\n *   <Tabs.List>\n *     <Tabs.Tab value=\"overview\">Overview</Tabs.Tab>\n *     <Tabs.Tab value=\"telemetry\">Telemetry</Tabs.Tab>\n *     <Tabs.Tab value=\"commands\">Commands</Tabs.Tab>\n *   </Tabs.List>\n *   <Tabs.Panel value=\"overview\">Overview content</Tabs.Panel>\n *   <Tabs.Panel value=\"telemetry\">Telemetry content</Tabs.Panel>\n *   <Tabs.Panel value=\"commands\">Commands content</Tabs.Panel>\n * </Tabs>\n * ```\n */\n\nimport React, { memo, createContext, useContext, useId } from \"react\";\nimport { useTheme } from \"../../theme\";\nimport { classNames, safeAccentText } from \"../../utils\";\n\ninterface TabsContextValue {\n  value: string;\n  onChange: (value: string) => void;\n  baseId: string;\n}\n\nconst TabsContext = createContext<TabsContextValue | null>(null);\n\nconst useTabsContext = () => {\n  const context = useContext(TabsContext);\n  if (!context) {\n    throw new Error(\"Tabs components must be used within a Tabs provider\");\n  }\n  return context;\n};\n\nexport interface TabsProps {\n  /** Active tab value */\n  value: string;\n  /** Change handler */\n  onChange: (value: string) => void;\n  /** Children */\n  children: React.ReactNode;\n  /** Custom className */\n  className?: string;\n}\n\nexport interface TabsListProps {\n  /** Children (Tab components) */\n  children: React.ReactNode;\n  /** Custom className */\n  className?: string;\n}\n\nexport interface TabProps {\n  /** Tab value */\n  value: string;\n  /** Disabled state */\n  disabled?: boolean;\n  /** Icon before label */\n  icon?: React.ReactNode;\n  /** Children (label) */\n  children: React.ReactNode;\n  /** Custom className */\n  className?: string;\n}\n\nexport interface TabsPanelProps {\n  /** Panel value (must match Tab value) */\n  value: string;\n  /** Children */\n  children: React.ReactNode;\n  /** Custom className */\n  className?: string;\n}\n\nconst TabsList = memo(function TabsList({\n  children,\n  className = \"\",\n}: TabsListProps): React.ReactElement {\n  const { tokens } = useTheme();\n\n  return (\n    <div\n      role=\"tablist\"\n      className={classNames(\"zendir-tabs-list\", className)}\n      style={{\n        display: \"flex\",\n        gap: tokens.spacing.xs,\n        borderBottom: tokens.borders.divider,\n        marginBottom: tokens.spacing.md,\n      }}\n    >\n      {children}\n    </div>\n  );\n});\n\nconst Tab = memo(function Tab({\n  value,\n  disabled = false,\n  icon,\n  children,\n  className = \"\",\n}: TabProps): React.ReactElement {\n  const { tokens } = useTheme();\n  const { value: activeValue, onChange, baseId } = useTabsContext();\n\n  const isActive = value === activeValue;\n\n  return (\n    <button\n      type=\"button\"\n      role=\"tab\"\n      id={`${baseId}-tab-${value}`}\n      aria-controls={`${baseId}-panel-${value}`}\n      aria-selected={isActive}\n      aria-disabled={disabled}\n      disabled={disabled}\n      onClick={() => !disabled && onChange(value)}\n      className={classNames(\n        \"zendir-tab\",\n        isActive && \"zendir-tab--active\",\n        className,\n      )}\n      style={{\n        display: \"flex\",\n        alignItems: \"center\",\n        gap: tokens.spacing.xs,\n        padding: `${tokens.spacing.sm} ${tokens.spacing.md}`,\n        fontSize: tokens.typography.fontSize.sm,\n        fontWeight: isActive\n          ? tokens.typography.fontWeight.semibold\n          : tokens.typography.fontWeight.normal,\n        fontFamily: tokens.typography.fontFamily.primary,\n        color: isActive\n          ? safeAccentText(tokens.colors.accent.primary)\n          : tokens.colors.text.secondary,\n        backgroundColor: \"transparent\",\n        border: \"none\",\n        borderBottom: `${tokens.borders.width.thick} solid ${isActive ? tokens.colors.accent.primary : \"transparent\"}`,\n        marginBottom: \"-1px\",\n        cursor: disabled ? \"not-allowed\" : \"pointer\",\n        opacity: disabled ? 0.5 : 1,\n        transition: `all ${tokens.animation.fast}`,\n        outline: \"none\",\n      }}\n      onMouseEnter={(e) => {\n        if (!disabled && !isActive) {\n          e.currentTarget.style.color = tokens.colors.text.primary;\n        }\n      }}\n      onMouseLeave={(e) => {\n        if (!disabled && !isActive) {\n          e.currentTarget.style.color = tokens.colors.text.secondary;\n        }\n      }}\n      onFocus={(e) => {\n        e.currentTarget.style.boxShadow = tokens.borders.focusRing.subtle;\n      }}\n      onBlur={(e) => {\n        e.currentTarget.style.boxShadow = \"none\";\n      }}\n    >\n      {icon}\n      {children}\n    </button>\n  );\n});\n\nconst TabsPanel = memo(function TabsPanel({\n  value,\n  children,\n  className = \"\",\n}: TabsPanelProps): React.ReactElement | null {\n  const { value: activeValue, baseId } = useTabsContext();\n\n  if (value !== activeValue) return null;\n\n  return (\n    <div\n      role=\"tabpanel\"\n      id={`${baseId}-panel-${value}`}\n      aria-labelledby={`${baseId}-tab-${value}`}\n      className={classNames(\"zendir-tabs-panel\", className)}\n    >\n      {children}\n    </div>\n  );\n});\n\nexport const Tabs = memo(function Tabs({\n  value,\n  onChange,\n  children,\n  className = \"\",\n}: TabsProps): React.ReactElement {\n  const baseId = useId();\n  return (\n    <TabsContext.Provider value={{ value, onChange, baseId }}>\n      <div className={classNames(\"zendir-tabs\", className)}>{children}</div>\n    </TabsContext.Provider>\n  );\n}) as React.NamedExoticComponent<TabsProps> & {\n  List: typeof TabsList;\n  Tab: typeof Tab;\n  Panel: typeof TabsPanel;\n};\n\n// Attach subcomponents\n(Tabs as any).List = TabsList;\n(Tabs as any).Tab = Tab;\n(Tabs as any).Panel = TabsPanel;\n\nexport default Tabs;\n"],"mappings":"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"}

package/dist/react/core/overlays/Popover.d.ts

@@ -1,6 +1,5 @@
 import { default as React } from 'react';
-
-export type PopoverPlacement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end';
+export type PopoverPlacement = "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end";
 export interface PopoverProps {
     /** Trigger element */
     trigger: React.ReactElement;
@@ -17,7 +16,7 @@ export interface PopoverProps {
     /** Close on content click */
     closeOnClick?: boolean;
     /** Width: 'trigger' matches trigger width, number for px, 'auto' */
-    width?: 'trigger' | 'auto' | number;
+    width?: "trigger" | "auto" | number;
     /** Custom style for popover panel */
     style?: React.CSSProperties;
 }