@zendir/ui 0.3.0 → 0.4.0

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

@@ -1 +1 @@
-{"version":3,"file":"SideNav.js","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, { memo, useState, createContext, useContext, useCallback, useEffect, useLayoutEffect } from 'react';\n\nconst useIsomorphicLayoutEffect = 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// ─── Astro UX Status Shape ───────────────────────────────────────────────────\n\nconst SIDENAV_STATUS_COLORS: Record<string, string> = {\n  off: '#a4abb6',\n  standby: '#2dccff',\n  normal: '#56f000',\n  caution: '#fce83a',\n  serious: '#ffb302',\n  critical: '#ff3838',\n};\n\n/** Astro UX dual-coded status shape (color + geometry). */\nfunction NavStatusShape({ status, size = 8 }: { status: string; size?: number }) {\n  const color = SIDENAV_STATUS_COLORS[status] ?? SIDENAV_STATUS_COLORS.off;\n  const glow = `${color}50`;\n  const style = { flexShrink: 0 as const, filter: `drop-shadow(0 0 3px ${glow})` };\n\n  switch (status) {\n    case 'caution':\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>;\n    case 'serious':\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>;\n    case 'critical':\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>;\n    case 'standby':\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>;\n    case 'off':\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>;\n    default: // normal\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>;\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  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  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   * 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  mobileVariant = 'drawer',\n  children,\n  style,\n}: SideNavProps): React.ReactElement {\n  const { tokens, theme } = useTheme();\n  const isTransparentTheme = theme === 'transparent' || theme === 'transparent-bold' || 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(() => setViewMode(getSideNavMode(window.innerWidth)));\n    };\n    window.addEventListener('resize', handleResize, { passive: true });\n    return () => {\n      window.removeEventListener('resize', handleResize);\n      cancelAnimationFrame(rafId);\n    };\n  }, []);\n\n  // When mobileVariant='collapsed', promote mobile to tablet (collapsed inline strip)\n  const effectiveMode = mobileVariant === 'collapsed' && viewMode === 'mobile' ? 'tablet' : 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 = 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: 'width 0.25s ease, transform 0.25s ease',\n    overflowX: 'hidden',\n    overflowY: 'auto',\n    flexShrink: 0,\n    fontFamily: tokens.typography.fontFamily.primary,\n    ...(isTransparentTheme ? {\n      backdropFilter: 'blur(16px)',\n      WebkitBackdropFilter: 'blur(16px)',\n    } : {}),\n    ...style,\n  };\n  \n  const contextValue: SideNavContextValue = { collapsed: isCollapsed, mobileOpen, mode: effectiveMode, showCollapseToggle, setMobileOpen, toggleCollapse: handleToggleCollapse };\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 width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.5\" strokeLinecap=\"round\">\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 ? `${tokens.colors.accent.primary}15` : 'transparent',\n        color: hovered ? tokens.colors.accent.primary : 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 } = 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 = !collapsed && hasMeta ? (\n    <div style={{ flex: 1, minWidth: 0, width: '100%' }}>\n      {title ? (\n        <div 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          {title}\n        </div>\n      ) : null}\n      {(subtitle || badge) ? (\n        <div style={{ display: 'flex', alignItems: 'center', gap: tokens.spacing.xs, marginTop: title ? '2px' : 0, flexWrap: 'wrap' }}>\n          {subtitle ? (\n            <span style={{\n              fontSize: tokens.typography.fontSize.xxs,\n              color: tokens.colors.text.tertiary,\n            }}>\n              {subtitle}\n            </span>\n          ) : null}\n          {badge ? (\n            <span style={{\n              fontSize: '0.6rem',\n              fontWeight: tokens.typography.fontWeight.bold,\n              color: badgeColors[badgeVariant] || 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              {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: !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 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        {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 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        {logoSlot}\n        {showToggle ? (\n          <div style={{ position: 'absolute', right: 4, top: '50%', transform: 'translateY(-50%)' }}>\n            <CollapseToggleButton />\n          </div>\n        ) : null}\n      </div>\n    );\n  }\n\n  return (\n    <div 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      {showToggle ? (\n        <div style={{ position: 'absolute', top: tokens.spacing.sm, right: tokens.spacing.sm, zIndex: 1 }}>\n          <CollapseToggleButton />\n        </div>\n      ) : null}\n      <div style={{ paddingRight: showToggle ? 36 : 0, width: '100%', minWidth: 0 }}>\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 } = useContext(SideNavContext);\n  const [isHovered, setIsHovered] = useState(false);\n  \n  const handleClick = useCallback((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  }, [disabled, onClick, href, setMobileOpen]);\n  \n  // Status-aware accent: when an item has a status, tint active/hover with its color\n  const statusColor = status ? (SIDENAV_STATUS_COLORS[status] ?? undefined) : undefined;\n  const accentColor = statusColor && active ? statusColor : safeAccentText(tokens.colors.accent.primary);\n  \n  const hasDescription = !!description && !collapsed;\n  \n  const iconElement = typeof icon === 'string'\n    ? <Icon name={icon as IconName} size={hasDescription ? 22 : 20} color={active ? accentColor : tokens.colors.text.secondary} />\n    : icon;\n  \n  const itemStyle: React.CSSProperties = {\n    display: 'flex',\n    alignItems: hasDescription ? 'flex-start' : 'center',\n    gap: tokens.spacing.sm,\n    padding: collapsed\n      ? `${tokens.spacing.sm} 0`\n      : hasDescription\n        ? `10px 16px 10px 12px`\n        : `${tokens.spacing.sm} 16px ${tokens.spacing.sm} 12px`,\n    justifyContent: collapsed ? 'center' : '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: tokens.typography.fontSize.sm,\n    fontWeight: active ? tokens.typography.fontWeight.semibold : 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    borderLeft: 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 style={{ flexShrink: 0, display: 'flex', position: 'relative', marginTop: hasDescription ? '2px' : 0 }}>\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      {!collapsed && (\n        <>\n          {/* Label + description block */}\n          <span style={{ flex: 1, minWidth: 0, overflow: 'hidden' }}>\n            <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}>\n              <span style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>\n                {label}\n              </span>\n              {tag && (\n                <span 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                  {tag}\n                </span>\n              )}\n            </span>\n            {description && (\n              <span 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                {description}\n              </span>\n            )}\n          </span>\n          {/* Right-side trailing elements — badge, status, suffix, external icon */}\n          {(badge !== undefined && badge > 0 || status || suffix || external) && (\n            <span style={{\n              display: 'inline-flex',\n              alignItems: 'center',\n              gap: 8,\n              flexShrink: 0,\n              marginTop: hasDescription ? '2px' : 0,\n            }}>\n              {/* Badge */}\n              {badge !== undefined && badge > 0 && (\n                <span 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                  {badge > 99 ? '99+' : badge}\n                </span>\n              )}\n              {/* Status */}\n              {status && (\n                <span\n                  style={{ display: 'inline-flex', alignItems: 'center', flexShrink: 0 }}\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 style={{ flexShrink: 0, display: 'inline-flex', alignItems: 'center' }}>\n                  {suffix}\n                </span>\n              )}\n              {/* External */}\n              {external && (\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 }}>\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  );\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 href={href} onClick={handleClick} target={external ? '_blank' : undefined} rel={external ? 'noopener noreferrer' : undefined} {...props}>\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 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          {title}\n        </div>\n      )}\n      {collapsed && title && (\n        <div style={{\n          width: '60%',\n          height: '1px',\n          backgroundColor: tokens.colors.border.muted,\n          margin: `${tokens.spacing.xs} auto`,\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 style={{\n        width: '60%',\n        height: '1px',\n        backgroundColor: tokens.colors.border.muted,\n        margin: `${tokens.spacing.sm} auto`,\n      }} />\n    );\n  }\n\n  if (label) {\n    return (\n      <div style={{\n        display: 'flex',\n        alignItems: 'center',\n        gap: tokens.spacing.sm,\n        padding: `${tokens.spacing.sm} 16px ${tokens.spacing.sm} 15px`,\n      }}>\n        <div style={{ flex: 1, height: '1px', backgroundColor: tokens.colors.border.muted }} />\n        <span 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          {label}\n        </span>\n        <div style={{ flex: 1, height: '1px', backgroundColor: tokens.colors.border.muted }} />\n      </div>\n    );\n  }\n\n  return (\n    <div 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// ─── 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 style={{\n      marginTop: 'auto',\n      borderTop: `1px solid ${tokens.colors.border.muted}`,\n      paddingTop: tokens.spacing.xs,\n      paddingBottom: tokens.spacing.xs,\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"],"names":["SideNav","SideNavHeader","SideNavItem","SideNavSection","SideNavDivider","SideNavFooter"],"mappings":"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"}
+{"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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"}

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

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { memo, useId, createContext, useContext } from "react";
-import { classNames, safeAccentText } from "../../utils/index.js";
 import { useTheme } from "../../theme/ThemeProvider.js";
+import { classNames, safeAccentText } from "../../utils/index.js";
 const TabsContext = createContext(null);
 const useTabsContext = () => {
   const context = useContext(TabsContext);

package/dist/react/core/overlays/SidePanel.js

@@ -1,8 +1,8 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { memo, useRef, useState, useEffect, useCallback } from "react";
+import { useTheme } from "../../theme/ThemeProvider.js";
 import { classNames } from "../../utils/index.js";
 import { useBreakpoint } from "../layout/useBreakpoint.js";
-import { useTheme } from "../../theme/ThemeProvider.js";
 let sidePanelInstanceCount = 0;
 const SidePanel = memo(function SidePanel2({
   open,

package/dist/react/core/overlays/Tooltip.js

@@ -1,8 +1,8 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { memo, useState, useRef, useCallback, useLayoutEffect, useEffect } from "react";
 import ReactDOM from "react-dom";
-import { classNames } from "../../utils/index.js";
 import { useTheme } from "../../theme/ThemeProvider.js";
+import { classNames } from "../../utils/index.js";
 const Tooltip = memo(function Tooltip2({
   content,
   placement = "top",

package/dist/react/core/widgets/Capture.js

@@ -1,8 +1,8 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { memo, forwardRef, useState, useRef, useEffect, useCallback, useImperativeHandle } from "react";
+import { useTheme } from "../../theme/ThemeProvider.js";
 import { useCopyToClipboard } from "../display/CopyButton.js";
 import placeholderImageUrl from "./capture-placeholder.png.js";
-import { useTheme } from "../../theme/ThemeProvider.js";
 async function generateCanvasFallback() {
   try {
     const size = 256;

package/dist/react/core/widgets/ChatPanel.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import React, { memo, useState, useRef, useEffect, useCallback } from "react";
-import { safeAccentText } from "../../utils/index.js";
 import { useTheme } from "../../theme/ThemeProvider.js";
+import { safeAccentText } from "../../utils/index.js";
 function parseYamlLite(text) {
   const lines = [];
   for (const raw of text.split("\n")) {

package/dist/react/core/widgets/ColorPickerPanel.js

@@ -1,8 +1,8 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { memo, useState, useRef, useEffect } from "react";
+import { useTheme } from "../../theme/ThemeProvider.js";
 import { PRESET_COLORS } from "../../context/DisplaySettingsContext.js";
 import { AstroIcon } from "../display/AstroIcon.js";
-import { useTheme } from "../../theme/ThemeProvider.js";
 const COLOR_SWATCHES = Object.entries(PRESET_COLORS).map(([key, color]) => ({
   key,
   color,

package/dist/react/core/widgets/ConnectionForm.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { memo, useMemo, useId, useRef, useState, useEffect, useCallback } from "react";
-import { useBreakpoint } from "../layout/useBreakpoint.js";
 import { useTheme } from "../../theme/ThemeProvider.js";
+import { useBreakpoint } from "../layout/useBreakpoint.js";
 const PROTOCOLS = ["wss", "ws", "mqtts", "mqtt", "tcp"];
 const DEFAULT_PORTS = {
   ws: 80,

package/dist/react/core/widgets/FileExplorer.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import React, { memo, useState, useMemo, useCallback } from "react";
-import { AstroIcon } from "../display/AstroIcon.js";
 import { useTheme } from "../../theme/ThemeProvider.js";
+import { AstroIcon } from "../display/AstroIcon.js";
 function formatFileSize(bytes) {
   if (bytes === void 0 || bytes === null) return "—";
   if (bytes === 0) return "0 B";

package/dist/react/core/widgets/ImageFrame.d.ts

@@ -0,0 +1,51 @@
+import { default as React } from 'react';
+
+/** Built-in colormap names. */
+export type ImageColormap = 'cividis' | 'gray';
+export interface ImageFrameProps {
+    /** Flat, row-major single-channel samples. Length must equal width*height. */
+    data?: number[];
+    /**
+     * Pre-decoded RGBA pixels (length = width*height*4). When provided this
+     * is painted directly and `data` / `maxADU` / `colormap` are ignored.
+     * Escape hatch for callers that already have an image buffer.
+     */
+    pixels?: Uint8ClampedArray;
+    /** Frame width in pixels. */
+    width: number;
+    /** Frame height in pixels. Defaults to `width` (square). */
+    height?: number;
+    /** Saturation ceiling used to normalise `data` → [0,1]. Default 65535. */
+    maxADU?: number;
+    /** Colormap applied to normalised intensities. Default 'cividis'. */
+    colormap?: ImageColormap;
+    /** Show the raw sample values as a grid below the image. Default false. */
+    showValues?: boolean;
+    /** Optional title shown above the image. */
+    title?: string;
+    /** Loading state (skeleton). */
+    loading?: boolean;
+    /** Message shown when there is no frame to display. */
+    emptyMessage?: string;
+    /** Custom class name. */
+    className?: string;
+}
+/**
+ * decodeImage — pure transform: single-channel samples → canvas-ready
+ * RGBA. Fixed-ceiling normalisation (`sample / maxADU`) so the output
+ * reflects the real signal level relative to saturation rather than
+ * rescaling per frame. Returns null on invalid input.
+ */
+export declare function decodeImage(opts: {
+    data: number[];
+    width: number;
+    height?: number;
+    maxADU?: number;
+    colormap?: ImageColormap;
+}): {
+    width: number;
+    height: number;
+    pixels: Uint8ClampedArray;
+} | null;
+export declare const ImageFrame: React.NamedExoticComponent<ImageFrameProps>;
+export default ImageFrame;

package/dist/react/core/widgets/ImageFrame.js

@@ -0,0 +1,201 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { memo, useRef, useMemo, useEffect } from "react";
+import { useTheme } from "../../theme/ThemeProvider.js";
+import { classNames, lerp } from "../../utils/index.js";
+const DEFAULT_MAX_ADU = 65535;
+const COLORMAPS = {
+  // Dark teal → yellow; a cividis-style ramp that reads well on dark UI.
+  cividis: (t) => [lerp(42, 237, t), lerp(123, 222, t), lerp(155, 83, t)],
+  gray: (t) => {
+    const v = lerp(0, 255, t);
+    return [v, v, v];
+  }
+};
+function decodeImage(opts) {
+  const { data, width, height, maxADU = DEFAULT_MAX_ADU, colormap = "cividis" } = opts;
+  if (!Array.isArray(data)) return null;
+  if (!Number.isFinite(width) || width <= 0) return null;
+  const W = Math.floor(width);
+  const H = Number.isFinite(height) && height > 0 ? Math.floor(height) : W;
+  if (data.length !== W * H) return null;
+  const ramp = COLORMAPS[colormap] || COLORMAPS.cividis;
+  const ceiling = Number.isFinite(maxADU) && maxADU > 0 ? maxADU : DEFAULT_MAX_ADU;
+  const pixels = new Uint8ClampedArray(W * H * 4);
+  for (let i = 0; i < W * H; i++) {
+    const raw = data[i];
+    const t = Number.isFinite(raw) ? raw / ceiling : 0;
+    const [r, g, b] = ramp(t);
+    const off = i * 4;
+    pixels[off + 0] = r;
+    pixels[off + 1] = g;
+    pixels[off + 2] = b;
+    pixels[off + 3] = 255;
+  }
+  return { width: W, height: H, pixels };
+}
+function formatValues(data, width, height, maxADU) {
+  if (width * height !== data.length) return data.join(", ");
+  const colW = Math.max(3, String(Math.floor(maxADU) || 1).length);
+  const rows = [];
+  for (let y = 0; y < height; y++) {
+    const cells = [];
+    for (let x = 0; x < width; x++) {
+      cells.push(String(data[y * width + x]).padStart(colW, " "));
+    }
+    rows.push(cells.join(" "));
+  }
+  return rows.join("\n");
+}
+const ImageFrame = memo(function ImageFrame2({
+  data,
+  pixels,
+  width,
+  height,
+  maxADU = DEFAULT_MAX_ADU,
+  colormap = "cividis",
+  showValues = false,
+  title,
+  loading = false,
+  emptyMessage = "No frame to display.",
+  className = ""
+}) {
+  const { tokens } = useTheme();
+  const canvasRef = useRef(null);
+  const H = Number.isFinite(height) && height > 0 ? Math.floor(height) : Math.floor(width);
+  const W = Math.floor(width);
+  const decoded = useMemo(() => {
+    if (pixels instanceof Uint8ClampedArray && pixels.length === W * H * 4) {
+      return { width: W, height: H, pixels };
+    }
+    if (Array.isArray(data)) {
+      return decodeImage({ data, width: W, height: H, maxADU, colormap });
+    }
+    return null;
+  }, [data, pixels, W, H, maxADU, colormap]);
+  useEffect(() => {
+    if (!decoded) return;
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    canvas.width = decoded.width;
+    canvas.height = decoded.height;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    const img = ctx.createImageData(decoded.width, decoded.height);
+    img.data.set(decoded.pixels);
+    ctx.putImageData(img, 0, 0);
+  }, [decoded]);
+  const surfaceStyle = {
+    backgroundColor: tokens.colors.background.surface,
+    borderRadius: tokens.borderRadius.lg,
+    padding: tokens.spacing.md,
+    color: tokens.colors.text.primary,
+    fontFamily: tokens.typography.fontFamily.primary,
+    display: "flex",
+    flexDirection: "column",
+    gap: tokens.spacing.sm
+  };
+  if (loading) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: classNames("zendir-image-frame", "loading", className),
+        role: "img",
+        "aria-busy": "true",
+        "aria-label": "Loading image",
+        style: surfaceStyle,
+        children: [
+          title && /* @__PURE__ */ jsx(FrameTitle, { tokens, title }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                width: "100%",
+                aspectRatio: `${W} / ${H}`,
+                background: "rgba(255,255,255,0.06)",
+                borderRadius: tokens.borderRadius.sm
+              }
+            }
+          )
+        ]
+      }
+    );
+  }
+  if (!decoded) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: classNames("zendir-image-frame", "empty", className),
+        role: "img",
+        "aria-label": "No image",
+        style: { ...surfaceStyle, textAlign: "center", color: tokens.colors.text.tertiary },
+        children: [
+          title && /* @__PURE__ */ jsx(FrameTitle, { tokens, title }),
+          /* @__PURE__ */ jsx("p", { style: { margin: 0, fontSize: tokens.typography.fontSize.xs }, children: emptyMessage })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: classNames("zendir-image-frame", className),
+      "aria-label": title || "Image frame",
+      style: surfaceStyle,
+      children: [
+        title && /* @__PURE__ */ jsx(FrameTitle, { tokens, title }),
+        /* @__PURE__ */ jsx(
+          "canvas",
+          {
+            ref: canvasRef,
+            "data-testid": "image-frame-canvas",
+            style: {
+              width: "100%",
+              aspectRatio: `${decoded.width} / ${decoded.height}`,
+              imageRendering: "pixelated",
+              display: "block",
+              background: "rgba(0,0,0,0.4)",
+              borderRadius: tokens.borderRadius.sm
+            }
+          }
+        ),
+        showValues && Array.isArray(data) && /* @__PURE__ */ jsx(
+          "pre",
+          {
+            "data-testid": "image-frame-values",
+            style: {
+              margin: 0,
+              padding: tokens.spacing.sm,
+              background: "rgba(0,0,0,0.45)",
+              borderRadius: tokens.borderRadius.sm,
+              color: tokens.colors.text.primary,
+              fontSize: 10,
+              lineHeight: 1.25,
+              fontFamily: tokens.typography.fontFamily.mono,
+              whiteSpace: "pre",
+              overflow: "auto",
+              maxHeight: 220
+            },
+            children: formatValues(data, decoded.width, decoded.height, maxADU)
+          }
+        )
+      ]
+    }
+  );
+});
+const FrameTitle = ({ tokens, title }) => /* @__PURE__ */ jsx(
+  "h3",
+  {
+    style: {
+      margin: 0,
+      fontSize: tokens.typography.fontSize.md,
+      fontWeight: tokens.typography.fontWeight.semibold,
+      color: tokens.colors.text.primary
+    },
+    children: title
+  }
+);
+export {
+  ImageFrame,
+  decodeImage
+};
+//# sourceMappingURL=ImageFrame.js.map