@zendir/ui 0.2.21 → 0.3.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.js","sources":["../../../../src/react/core/navigation/Pagination.tsx"],"sourcesContent":["/**\n * @zendir/ui - Pagination Component\n * \n * Pagination following Astro UX Design System.\n * \n * @example\n * ```tsx\n * <Pagination\n *   currentPage={page}\n *   totalPages={10}\n *   onChange={setPage}\n * />\n * ```\n */\n\nimport React, { memo, useMemo } from 'react';\nimport { useTheme } from '../../theme';\nimport { classNames } from '../../utils';\n\nexport interface PaginationProps {\n  /** Current page (1-indexed) */\n  currentPage: number;\n  /** Total number of pages */\n  totalPages: number;\n  /** Change handler */\n  onChange: (page: number) => void;\n  /** Number of page buttons to show */\n  siblingCount?: number;\n  /** Show first/last buttons */\n  showFirstLast?: boolean;\n  /** Show prev/next buttons */\n  showPrevNext?: boolean;\n  /** Size variant */\n  size?: 'small' | 'medium';\n  /**\n   * Display mode.\n   * - `'buttons'` — numbered page buttons with ellipsis (default).\n   * - `'text'`    — compact \"Page X of Y\" label with prev/next arrows.\n   */\n  displayMode?: 'buttons' | 'text';\n  /** Disabled state */\n  disabled?: boolean;\n  /** Custom className */\n  className?: string;\n}\n\nexport const Pagination = memo(function Pagination({\n  currentPage,\n  totalPages,\n  onChange,\n  siblingCount = 1,\n  showFirstLast = true,\n  showPrevNext = true,\n  size = 'medium',\n  displayMode = 'buttons',\n  disabled = false,\n  className = '',\n}: PaginationProps): React.ReactElement {\n  const { tokens, theme } = useTheme();\n  const isTransparentTheme =\n    theme === 'transparent' || theme === 'transparent-bold' || theme === 'transparent-minimal';\n  \n  const sizeConfig = {\n    small: { buttonSize: '28px', fontSize: tokens.typography.fontSize.xxs },\n    medium: { buttonSize: '34px', fontSize: tokens.typography.fontSize.xs },\n  };\n  const config = sizeConfig[size];\n  \n  // Calculate visible page numbers\n  const pageNumbers = useMemo(() => {\n    const range: (number | 'ellipsis')[] = [];\n    const leftSiblingIndex = Math.max(currentPage - siblingCount, 1);\n    const rightSiblingIndex = Math.min(currentPage + siblingCount, totalPages);\n    \n    const showLeftEllipsis = leftSiblingIndex > 2;\n    const showRightEllipsis = rightSiblingIndex < totalPages - 1;\n    \n    if (!showLeftEllipsis && showRightEllipsis) {\n      const leftRange = Array.from({ length: 3 + 2 * siblingCount }, (_, i) => i + 1);\n      range.push(...leftRange, 'ellipsis', totalPages);\n    } else if (showLeftEllipsis && !showRightEllipsis) {\n      const rightRange = Array.from(\n        { length: 3 + 2 * siblingCount },\n        (_, i) => totalPages - 3 - 2 * siblingCount + i + 1\n      );\n      range.push(1, 'ellipsis', ...rightRange);\n    } else if (showLeftEllipsis && showRightEllipsis) {\n      const middleRange = Array.from(\n        { length: 2 * siblingCount + 1 },\n        (_, i) => leftSiblingIndex + i\n      );\n      range.push(1, 'ellipsis', ...middleRange, 'ellipsis', totalPages);\n    } else {\n      range.push(...Array.from({ length: totalPages }, (_, i) => i + 1));\n    }\n    \n    return range;\n  }, [currentPage, totalPages, siblingCount]);\n  \n  const buttonStyle: React.CSSProperties = {\n    width: config.buttonSize,\n    height: config.buttonSize,\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    fontSize: config.fontSize,\n    fontFamily: tokens.typography.fontFamily.mono,\n    fontWeight: tokens.typography.fontWeight.medium,\n    backgroundColor: isTransparentTheme ? `${tokens.colors.background.surface}99` : 'transparent',\n    border: `1px solid ${tokens.colors.border.muted}`,\n    borderRadius: tokens.borderRadius.md,\n    cursor: disabled ? 'not-allowed' : 'pointer',\n    opacity: disabled ? 0.5 : 1,\n    transition: `all ${tokens.animation.fast}`,\n    color: tokens.colors.text.primary,\n    backdropFilter: isTransparentTheme ? 'blur(8px)' : undefined,\n    WebkitBackdropFilter: isTransparentTheme ? 'blur(8px)' : undefined,\n  };\n  \n  const activeButtonStyle: React.CSSProperties = {\n    ...buttonStyle,\n    backgroundColor: tokens.colors.accent.primary,\n    borderColor: tokens.colors.accent.primary,\n    color: tokens.colors.text.inverse,\n    boxShadow: `0 0 0 1px ${tokens.colors.accent.primary}55, 0 0 14px ${tokens.colors.accent.primary}55`,\n  };\n  \n  const handleClick = (page: number) => {\n    if (!disabled && page >= 1 && page <= totalPages && page !== currentPage) {\n      onChange(page);\n    }\n  };\n  \n  const NavButton = ({ \n    direction, \n    targetPage, \n    children \n  }: { \n    direction: 'first' | 'prev' | 'next' | 'last'; \n    targetPage: number;\n    children: React.ReactNode;\n  }) => {\n    const isDisabled = disabled || \n      (direction === 'first' || direction === 'prev' ? currentPage <= 1 : currentPage >= totalPages);\n    \n    return (\n      <button\n        type=\"button\"\n        onClick={() => handleClick(targetPage)}\n        disabled={isDisabled}\n        aria-label={\n        direction === 'first' ? 'Go to first page' :\n        direction === 'prev' ? 'Go to previous page' :\n        direction === 'next' ? 'Go to next page' :\n        'Go to last page'\n      }\n        style={{\n          ...buttonStyle,\n          opacity: isDisabled ? 0.3 : 1,\n          cursor: isDisabled ? 'not-allowed' : 'pointer',\n        }}\n      >\n        {children}\n      </button>\n    );\n  };\n  \n  return (\n    <nav\n      className={classNames('zendir-pagination', className)}\n      aria-label=\"Pagination\"\n      style={{\n        display: 'flex',\n        alignItems: 'center',\n        gap: tokens.spacing.xs,\n        padding: `${tokens.spacing.xs} ${tokens.spacing.sm}`,\n        borderRadius: tokens.borderRadius.lg,\n        ...(tokens.colors.border.cardStyle ?? { border: `1px solid ${tokens.colors.border.muted}` }),\n        background: isTransparentTheme ? `${tokens.colors.background.surface}66` : `${tokens.colors.background.surface}66`,\n        backdropFilter: isTransparentTheme ? 'blur(10px)' : undefined,\n        WebkitBackdropFilter: isTransparentTheme ? 'blur(10px)' : undefined,\n      }}\n    >\n      {showFirstLast && (\n        <NavButton direction=\"first\" targetPage={1}>\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n            <path d=\"M18.41 16.59L13.82 12l4.59-4.59L17 6l-6 6 6 6zM6 6h2v12H6z\" />\n          </svg>\n        </NavButton>\n      )}\n      \n      {showPrevNext && (\n        <NavButton direction=\"prev\" targetPage={currentPage - 1}>\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n            <path d=\"M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z\" />\n          </svg>\n        </NavButton>\n      )}\n      \n      {displayMode === 'text' ? (\n        <span\n          style={{\n            padding: `0 ${tokens.spacing.sm}`,\n            color: tokens.colors.text.secondary,\n            fontSize: tokens.typography.fontSize.xs,\n            fontFamily: tokens.typography.fontFamily.mono,\n            letterSpacing: '0.02em',\n            whiteSpace: 'nowrap',\n          }}\n        >\n          Page {currentPage} of {totalPages}\n        </span>\n      ) : (\n        pageNumbers.map((page, index) => \n          page === 'ellipsis' ? (\n            <span\n              key={`ellipsis-${index}`}\n              style={{\n                width: config.buttonSize,\n                display: 'flex',\n                alignItems: 'center',\n                justifyContent: 'center',\n                color: tokens.colors.text.muted,\n              }}\n            >\n              ...\n            </span>\n          ) : (\n            <button\n              key={page}\n              type=\"button\"\n              onClick={() => handleClick(page)}\n              disabled={disabled}\n              aria-current={page === currentPage ? 'page' : undefined}\n              style={page === currentPage ? activeButtonStyle : buttonStyle}\n              onMouseEnter={(e) => {\n                if (!disabled && page !== currentPage) {\n                  e.currentTarget.style.backgroundColor = `${tokens.colors.accent.primary}22`;\n                  e.currentTarget.style.borderColor = tokens.colors.accent.primary;\n                  e.currentTarget.style.transform = 'translateY(-1px)';\n                }\n              }}\n              onMouseLeave={(e) => {\n                if (!disabled && page !== currentPage) {\n                  e.currentTarget.style.backgroundColor = isTransparentTheme ? `${tokens.colors.background.surface}99` : 'transparent';\n                  e.currentTarget.style.borderColor = tokens.colors.border.muted;\n                  e.currentTarget.style.transform = 'translateY(0)';\n                }\n              }}\n            >\n              {page}\n            </button>\n          )\n        )\n      )}\n      \n      {showPrevNext && (\n        <NavButton direction=\"next\" targetPage={currentPage + 1}>\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n            <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\" />\n          </svg>\n        </NavButton>\n      )}\n      \n      {showFirstLast && (\n        <NavButton direction=\"last\" targetPage={totalPages}>\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n            <path d=\"M5.59 7.41L10.18 12l-4.59 4.59L7 18l6-6-6-6zM16 6h2v12h-2z\" />\n          </svg>\n        </NavButton>\n      )}\n    </nav>\n  );\n});\n\nexport default Pagination;\n"],"names":["Pagination"],"mappings":"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"}

package/dist/react/core/{SideNav.d.ts → navigation/SideNav.d.ts}

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-import { IconName } from './Icon';
+import { IconName } from '../display/Icon';
 
 export interface SideNavProps {
     /** Collapsed mode (icon-only). When omitted, auto-collapses on tablet viewports. */

package/dist/react/core/{SideNav.js → navigation/SideNav.js}

@@ -1,8 +1,8 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { memo, useState, useEffect, useCallback, useContext, useLayoutEffect, createContext } from "react";
-import { safeAccentText } from "../utils/index.js";
-import { Icon } from "./Icon.js";
-import { useTheme } from "../theme/ThemeProvider.js";
+import { safeAccentText } from "../../utils/index.js";
+import { Icon } from "../display/Icon.js";
+import { useTheme } from "../../theme/ThemeProvider.js";
 const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
 const SIDENAV_STATUS_COLORS = {
   off: "#a4abb6",

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

@@ -0,0 +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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"}

package/dist/react/core/{Tabs.js → 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";
+import { useTheme } from "../../theme/ThemeProvider.js";
 const TabsContext = createContext(null);
 const useTabsContext = () => {
   const context = useContext(TabsContext);

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

@@ -0,0 +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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"}

package/dist/react/core/{Popover.js → overlays/Popover.js}

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { memo, useState, useRef, useCallback, useEffect, useContext, createContext } from "react";
-import { useTheme } from "../theme/ThemeProvider.js";
+import { useTheme } from "../../theme/ThemeProvider.js";
 const PopoverContext = createContext({ close: () => {
 } });
 const Popover = memo(function Popover2({

package/dist/react/core/overlays/Popover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.js","sources":["../../../../src/react/core/overlays/Popover.tsx"],"sourcesContent":["/**\r\n * @zendir/ui - Popover & Menu Components\r\n * \r\n * General-purpose popover for dropdown menus, sort controls, action menus,\r\n * and contextual information. Portal-rendered with auto-positioning.\r\n * \r\n * Astro UX Compliance:\r\n * - Consistent with Dialog/Tooltip styling\r\n * - Focus trap for keyboard navigation\r\n * - Escape to close\r\n * - Click outside to close\r\n * - Reduced motion support\r\n * \r\n * @example\r\n * ```tsx\r\n * <Popover\r\n *   trigger={<Button variant=\"secondary\">Sort</Button>}\r\n *   placement=\"bottom-start\"\r\n * >\r\n *   <Menu>\r\n *     <Menu.Item onClick={...}>Sort by Time</Menu.Item>\r\n *     <Menu.Item onClick={...}>Sort by Name</Menu.Item>\r\n *     <Menu.Divider />\r\n *     <Menu.Item onClick={...} destructive>Clear All</Menu.Item>\r\n *   </Menu>\r\n * </Popover>\r\n * ```\r\n */\r\n\r\nimport React, { memo, useState, useRef, useEffect, useCallback, createContext, useContext } from 'react';\r\nimport { useTheme } from '../../theme';\r\n\r\n// ─── Popover ─────────────────────────────────────────────────────────────────\r\n\r\nexport type PopoverPlacement = \r\n  | 'top' | 'top-start' | 'top-end'\r\n  | 'bottom' | 'bottom-start' | 'bottom-end'\r\n  | 'left' | 'left-start' | 'left-end'\r\n  | 'right' | 'right-start' | 'right-end';\r\n\r\nexport interface PopoverProps {\r\n  /** Trigger element */\r\n  trigger: React.ReactElement;\r\n  /** Popover content */\r\n  children: React.ReactNode;\r\n  /** Placement relative to trigger */\r\n  placement?: PopoverPlacement;\r\n  /** Open on hover instead of click */\r\n  hover?: boolean;\r\n  /** Controlled open state */\r\n  open?: boolean;\r\n  /** Controlled open change */\r\n  onOpenChange?: (open: boolean) => void;\r\n  /** Close on content click */\r\n  closeOnClick?: boolean;\r\n  /** Width: 'trigger' matches trigger width, number for px, 'auto' */\r\n  width?: 'trigger' | 'auto' | number;\r\n  /** Custom style for popover panel */\r\n  style?: React.CSSProperties;\r\n}\r\n\r\nconst PopoverContext = createContext<{ close: () => void }>({ close: () => {} });\r\n\r\nexport const Popover = memo(function Popover({\r\n  trigger,\r\n  children,\r\n  placement = 'bottom-start',\r\n  hover = false,\r\n  open: controlledOpen,\r\n  onOpenChange,\r\n  closeOnClick = true,\r\n  width = 'auto',\r\n  style,\r\n}: PopoverProps): React.ReactElement {\r\n  const { tokens, theme } = useTheme();\r\n  const isTransparentTheme = theme === 'transparent' || theme === 'transparent-bold' || theme === 'transparent-minimal';\r\n  const [internalOpen, setInternalOpen] = useState(false);\r\n  const triggerRef = useRef<HTMLDivElement>(null);\r\n  const popoverRef = useRef<HTMLDivElement>(null);\r\n  const hoverTimeout = useRef<ReturnType<typeof setTimeout>>();\r\n  \r\n  const isOpen = controlledOpen !== undefined ? controlledOpen : internalOpen;\r\n  \r\n  const setOpen = useCallback((val: boolean) => {\r\n    if (controlledOpen === undefined) setInternalOpen(val);\r\n    onOpenChange?.(val);\r\n  }, [controlledOpen, onOpenChange]);\r\n  \r\n  const close = useCallback(() => setOpen(false), [setOpen]);\r\n  \r\n  // Click outside\r\n  useEffect(() => {\r\n    if (!isOpen) return;\r\n    const handler = (e: MouseEvent) => {\r\n      if (\r\n        triggerRef.current && !triggerRef.current.contains(e.target as Node) &&\r\n        popoverRef.current && !popoverRef.current.contains(e.target as Node)\r\n      ) {\r\n        close();\r\n      }\r\n    };\r\n    document.addEventListener('mousedown', handler);\r\n    return () => document.removeEventListener('mousedown', handler);\r\n  }, [isOpen, close]);\r\n  \r\n  // Escape key + cleanup hoverTimeout on unmount\r\n  useEffect(() => {\r\n    if (!isOpen) return;\r\n    const handler = (e: KeyboardEvent) => {\r\n      if (e.key === 'Escape') close();\r\n    };\r\n    document.addEventListener('keydown', handler);\r\n    return () => document.removeEventListener('keydown', handler);\r\n  }, [isOpen, close]);\r\n  \r\n  useEffect(() => {\r\n    return () => { clearTimeout(hoverTimeout.current); };\r\n  }, []);\r\n  \r\n  // Position calculation\r\n  const [position, setPosition] = useState<React.CSSProperties>({});\r\n  \r\n  useEffect(() => {\r\n    if (!isOpen || !triggerRef.current) return;\r\n    const gap = 8;\r\n    const viewportPadding = 8;\r\n\r\n    const updatePosition = () => {\r\n      const rect = triggerRef.current?.getBoundingClientRect();\r\n      if (!rect) return;\r\n\r\n      const panelWidth = width === 'trigger'\r\n        ? rect.width\r\n        : typeof width === 'number'\r\n          ? width\r\n          : (popoverRef.current?.offsetWidth ?? 220);\r\n      const panelHeight = popoverRef.current?.offsetHeight ?? 220;\r\n\r\n      let left = rect.left;\r\n      let top = rect.bottom + gap;\r\n\r\n      if (placement.startsWith('top')) {\r\n        top = rect.top - panelHeight - gap;\r\n      } else if (placement.startsWith('bottom')) {\r\n        top = rect.bottom + gap;\r\n      } else if (placement.startsWith('left')) {\r\n        left = rect.left - panelWidth - gap;\r\n      } else if (placement.startsWith('right')) {\r\n        left = rect.right + gap;\r\n      }\r\n\r\n      if (placement.startsWith('top') || placement.startsWith('bottom')) {\r\n        if (placement.endsWith('-start')) {\r\n          left = rect.left;\r\n        } else if (placement.endsWith('-end')) {\r\n          left = rect.right - panelWidth;\r\n        } else {\r\n          left = rect.left + (rect.width - panelWidth) / 2;\r\n        }\r\n      } else {\r\n        if (placement.endsWith('-start')) {\r\n          top = rect.top;\r\n        } else if (placement.endsWith('-end')) {\r\n          top = rect.bottom - panelHeight;\r\n        } else {\r\n          top = rect.top + (rect.height - panelHeight) / 2;\r\n        }\r\n      }\r\n\r\n      left = Math.max(viewportPadding, Math.min(left, window.innerWidth - panelWidth - viewportPadding));\r\n      top = Math.max(viewportPadding, Math.min(top, window.innerHeight - panelHeight - viewportPadding));\r\n\r\n      const pos: React.CSSProperties = {\r\n        position: 'fixed',\r\n        zIndex: 9990,\r\n        left,\r\n        top,\r\n      };\r\n\r\n      if (width === 'trigger') {\r\n        pos.width = rect.width;\r\n        pos.minWidth = rect.width;\r\n      } else if (typeof width === 'number') {\r\n        pos.width = width;\r\n      }\r\n\r\n      setPosition(pos);\r\n    };\r\n\r\n    const raf = requestAnimationFrame(updatePosition);\r\n    window.addEventListener('resize', updatePosition);\r\n    window.addEventListener('scroll', updatePosition, true);\r\n    return () => {\r\n      cancelAnimationFrame(raf);\r\n      window.removeEventListener('resize', updatePosition);\r\n      window.removeEventListener('scroll', updatePosition, true);\r\n    };\r\n  }, [isOpen, placement, width]);\r\n  \r\n  const triggerProps: Record<string, (() => void) | undefined> = {};\r\n  if (hover) {\r\n    triggerProps.onMouseEnter = () => {\r\n      clearTimeout(hoverTimeout.current);\r\n      setOpen(true);\r\n    };\r\n    triggerProps.onMouseLeave = () => {\r\n      hoverTimeout.current = setTimeout(close, 150);\r\n    };\r\n  } else {\r\n    triggerProps.onClick = () => setOpen(!isOpen);\r\n  }\r\n  \r\n  const popoverHoverProps = hover ? {\r\n    onMouseEnter: () => clearTimeout(hoverTimeout.current),\r\n    onMouseLeave: () => { hoverTimeout.current = setTimeout(close, 150); },\r\n  } : {};\r\n  \r\n  return (\r\n    <PopoverContext.Provider value={{ close }}>\r\n      <div ref={triggerRef} style={{ display: 'inline-flex' }} aria-expanded={isOpen} aria-haspopup=\"true\" {...triggerProps}>\r\n        {trigger}\r\n      </div>\r\n      \r\n      {isOpen && (\r\n        <div\r\n          ref={popoverRef}\r\n          role=\"dialog\"\r\n          onClick={closeOnClick ? close : undefined}\r\n          {...popoverHoverProps}\r\n          style={{\r\n            ...position,\r\n            backgroundColor: isTransparentTheme\r\n              ? 'rgba(15, 12, 30, 0.85)'\r\n              : tokens.colors.background.elevated,\r\n            border: `1px solid ${tokens.colors.border.muted}`,\r\n            borderRadius: tokens.borderRadius.md,\r\n            boxShadow: tokens.shadows.lg,\r\n            padding: tokens.spacing.xs,\r\n            maxWidth: 'min(320px, calc(100vw - 16px))',\r\n            fontFamily: tokens.typography.fontFamily.primary,\r\n            animation: `zendir-popover-enter 150ms ${tokens.animation.easing.default}`,\r\n            ...(isTransparentTheme ? {\r\n              backdropFilter: 'blur(16px)',\r\n              WebkitBackdropFilter: 'blur(16px)',\r\n            } : {}),\r\n            ...style,\r\n          }}\r\n        >\r\n          {children}\r\n        </div>\r\n      )}\r\n      \r\n      <style>{`\r\n        @keyframes zendir-popover-enter {\r\n          from { opacity: 0; transform: translateY(-4px) scale(0.98); }\r\n          to { opacity: 1; transform: translateY(0) scale(1); }\r\n        }\r\n      `}</style>\r\n    </PopoverContext.Provider>\r\n  );\r\n});\r\n\r\n// ─── Menu ────────────────────────────────────────────────────────────────────\r\n\r\nexport interface MenuProps {\r\n  children: React.ReactNode;\r\n  style?: React.CSSProperties;\r\n}\r\n\r\nconst MenuRoot = memo(function Menu({ children, style }: MenuProps): React.ReactElement {\r\n  return (\r\n    <div role=\"menu\" style={{ minWidth: 'min(160px, calc(100vw - 32px))', ...style }}>\r\n      {children}\r\n    </div>\r\n  );\r\n});\r\n\r\n// ─── Menu.Item ───────────────────────────────────────────────────────────────\r\n\r\nexport interface MenuItemProps {\r\n  /** Click handler */\r\n  onClick?: () => void;\r\n  /** Icon (ReactNode or IconName string) */\r\n  icon?: React.ReactNode;\r\n  /** Label text */\r\n  children: React.ReactNode;\r\n  /** Disabled state */\r\n  disabled?: boolean;\r\n  /** Destructive action (red text) */\r\n  destructive?: boolean;\r\n  /** Keyboard shortcut hint */\r\n  shortcut?: string;\r\n}\r\n\r\nconst MenuItem = memo(function MenuItem({\r\n  onClick,\r\n  icon,\r\n  children,\r\n  disabled = false,\r\n  destructive = false,\r\n  shortcut,\r\n}: MenuItemProps): React.ReactElement {\r\n  const { tokens } = useTheme();\r\n  const { close } = useContext(PopoverContext);\r\n  const [isHovered, setIsHovered] = useState(false);\r\n  \r\n  const handleClick = useCallback(() => {\r\n    if (disabled) return;\r\n    onClick?.();\r\n    close();\r\n  }, [disabled, onClick, close]);\r\n  \r\n  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {\r\n    const item = e.currentTarget;\r\n    const siblings = item.parentElement?.querySelectorAll('[role=\"menuitem\"]:not([disabled])');\r\n    if (!siblings) return;\r\n    const items = Array.from(siblings) as HTMLElement[];\r\n    const idx = items.indexOf(item as HTMLElement);\r\n    \r\n    if (e.key === 'ArrowDown') {\r\n      e.preventDefault();\r\n      items[(idx + 1) % items.length]?.focus();\r\n    } else if (e.key === 'ArrowUp') {\r\n      e.preventDefault();\r\n      items[(idx - 1 + items.length) % items.length]?.focus();\r\n    } else if (e.key === 'Home') {\r\n      e.preventDefault();\r\n      items[0]?.focus();\r\n    } else if (e.key === 'End') {\r\n      e.preventDefault();\r\n      items[items.length - 1]?.focus();\r\n    }\r\n  }, []);\r\n  \r\n  const color = destructive\r\n    ? tokens.colors.status.critical\r\n    : disabled\r\n      ? tokens.colors.text.tertiary\r\n      : tokens.colors.text.primary;\r\n  \r\n  return (\r\n    <button\r\n      role=\"menuitem\"\r\n      tabIndex={disabled ? -1 : 0}\r\n      onClick={handleClick}\r\n      onKeyDown={handleKeyDown}\r\n      disabled={disabled}\r\n      onMouseEnter={() => setIsHovered(true)}\r\n      onMouseLeave={() => setIsHovered(false)}\r\n      style={{\r\n        display: 'flex',\r\n        alignItems: 'center',\r\n        gap: tokens.spacing.sm,\r\n        width: '100%',\r\n        padding: `${tokens.spacing.sm} ${tokens.spacing.sm}`,\r\n        minHeight: 44,\r\n        border: 'none',\r\n        background: isHovered && !disabled\r\n          ? `${destructive ? tokens.colors.status.critical : tokens.colors.accent.primary}12`\r\n          : 'transparent',\r\n        color,\r\n        fontSize: tokens.typography.fontSize.sm,\r\n        fontWeight: tokens.typography.fontWeight.normal,\r\n        fontFamily: tokens.typography.fontFamily.primary,\r\n        cursor: disabled ? 'not-allowed' : 'pointer',\r\n        borderRadius: tokens.borderRadius.sm,\r\n        textAlign: 'left',\r\n        transition: tokens.animation.fast,\r\n        opacity: disabled ? 0.5 : 1,\r\n        outline: 'none',\r\n      }}\r\n    >\r\n      {icon && <span style={{ flexShrink: 0, display: 'flex' }}>{icon}</span>}\r\n      <span style={{ flex: 1 }}>{children}</span>\r\n      {shortcut && (\r\n        <span style={{\r\n          fontSize: tokens.typography.fontSize.xxs,\r\n          color: tokens.colors.text.tertiary,\r\n          fontFamily: tokens.typography.fontFamily.mono,\r\n          flexShrink: 0,\r\n        }}>\r\n          {shortcut}\r\n        </span>\r\n      )}\r\n    </button>\r\n  );\r\n});\r\n\r\n// ─── Menu.Divider ────────────────────────────────────────────────────────────\r\n\r\nconst MenuDivider = memo(function MenuDivider(): React.ReactElement {\r\n  const { tokens } = useTheme();\r\n  return (\r\n    <div\r\n      role=\"separator\"\r\n      style={{\r\n        height: '1px',\r\n        backgroundColor: tokens.colors.border.muted,\r\n        margin: `${tokens.spacing.xs} 0`,\r\n      }}\r\n    />\r\n  );\r\n});\r\n\r\n// ─── Menu.Label ──────────────────────────────────────────────────────────────\r\n\r\nconst MenuLabel = memo(function MenuLabel({ children }: { children: React.ReactNode }): React.ReactElement {\r\n  const { tokens } = useTheme();\r\n  return (\r\n    <div style={{\r\n      padding: `${tokens.spacing.xs} ${tokens.spacing.sm}`,\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.06em',\r\n    }}>\r\n      {children}\r\n    </div>\r\n  );\r\n});\r\n\r\n// ─── Compound Export ─────────────────────────────────────────────────────────\r\n\r\ntype MenuComponent = typeof MenuRoot & {\r\n  Item: typeof MenuItem;\r\n  Divider: typeof MenuDivider;\r\n  Label: typeof MenuLabel;\r\n};\r\n\r\nexport const Menu: MenuComponent = Object.assign(MenuRoot, {\r\n  Item: MenuItem,\r\n  Divider: MenuDivider,\r\n  Label: MenuLabel,\r\n});\r\n\r\nexport default Popover;\r\n"],"names":["Popover","Menu","MenuItem","MenuDivider","MenuLabel"],"mappings":"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"}

package/dist/react/core/{SidePanel.js → overlays/SidePanel.js}

@@ -1,8 +1,8 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { memo, useRef, useState, useEffect, useCallback } from "react";
-import { classNames } from "../utils/index.js";
-import { useBreakpoint } from "./layout/useBreakpoint.js";
-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/SidePanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidePanel.js","sources":["../../../../src/react/core/overlays/SidePanel.tsx"],"sourcesContent":["/**\r\n * @zendir/ui - SidePanel Component\r\n * \r\n * A sliding panel that pushes content instead of overlaying it.\r\n * Designed to be placed as a flex sibling so the parent layout\r\n * naturally adjusts when the panel opens/closes.\r\n * \r\n * Features:\r\n * - Push-content behavior (flex sibling, content adjusts automatically)\r\n * - Smooth slide-in/out animation\r\n * - Configurable width, position (left/right)\r\n * - Optional overlay backdrop (for modal-like behavior)\r\n * - Theme-integrated via useTheme()\r\n * - Accessible (focus trap, keyboard support)\r\n * - Close on escape key\r\n * \r\n * @example\r\n * ```tsx\r\n * // Push-content pattern: SidePanel as flex sibling\r\n * <div style={{ display: 'flex', height: '100vh' }}>\r\n *   <main style={{ flex: 1, transition: 'all 0.3s ease' }}>\r\n *     {children}\r\n *   </main>\r\n *   <SidePanel\r\n *     open={isChatOpen}\r\n *     onClose={() => setIsChatOpen(false)}\r\n *     title=\"Chat Assistant\"\r\n *     width={380}\r\n *   >\r\n *     <ChatPanel messages={messages} onSend={handleSend} />\r\n *   </SidePanel>\r\n * </div>\r\n * ```\r\n */\r\n\r\nimport React, { memo, useEffect, useRef, useCallback, useState } from 'react';\r\nimport { useTheme } from '../../theme';\r\nimport { classNames } from '../../utils';\r\nimport { useBreakpoint } from '../layout/useBreakpoint';\r\n\r\n// ============================================================================\r\n// Types\r\n// ============================================================================\r\n\r\nexport type SidePanelPosition = 'left' | 'right';\r\n\r\nexport interface SidePanelProps {\r\n  /** Whether the panel is open */\r\n  open: boolean;\r\n  /** Called when the panel should close */\r\n  onClose: () => void;\r\n  /** Panel title displayed in the header */\r\n  title?: string;\r\n  /** Panel width in px or CSS string (default: 380) */\r\n  width?: number | string;\r\n  /** Which side the panel slides in from (default: 'right') */\r\n  position?: SidePanelPosition;\r\n  /** Show a close button in the header (default: true) */\r\n  showCloseButton?: boolean;\r\n  /** Close when pressing Escape (default: true) */\r\n  closeOnEscape?: boolean;\r\n  /** Show a semi-transparent overlay behind the panel (default: false) */\r\n  overlay?: boolean;\r\n  /** Close when clicking the overlay (default: true, only applies when overlay=true) */\r\n  closeOnOverlayClick?: boolean;\r\n  /** Panel content */\r\n  children: React.ReactNode;\r\n  /** Optional header actions (rendered in header, right of title) */\r\n  headerActions?: React.ReactNode;\r\n  /** Optional leading element (rendered in header, left of title — useful for collapse icons) */\r\n  headerLeading?: React.ReactNode;\r\n  /** Called when the header bar is clicked (useful for collapse-on-click) */\r\n  onHeaderClick?: () => void;\r\n  /** Custom style overrides for the header bar */\r\n  headerStyle?: React.CSSProperties;\r\n  /** Custom className */\r\n  className?: string;\r\n  /** Custom style overrides for the panel container */\r\n  style?: React.CSSProperties;\r\n}\r\n\r\n// ============================================================================\r\n// Unique animation ID\r\n// ============================================================================\r\n\r\nlet sidePanelInstanceCount = 0;\r\n\r\n// ============================================================================\r\n// Component\r\n// ============================================================================\r\n\r\nexport const SidePanel = memo(function SidePanel({\r\n  open,\r\n  onClose,\r\n  title,\r\n  width = 380,\r\n  position = 'right',\r\n  showCloseButton = true,\r\n  closeOnEscape = true,\r\n  overlay = false,\r\n  closeOnOverlayClick = true,\r\n  children,\r\n  headerActions,\r\n  headerLeading,\r\n  onHeaderClick,\r\n  headerStyle: headerStyleProp,\r\n  className = '',\r\n  style: styleProp,\r\n}: SidePanelProps): React.ReactElement | null {\r\n  const { tokens, theme } = useTheme();\r\n  const isTransparentTheme = theme === 'transparent' || theme === 'transparent-bold' || theme === 'transparent-minimal';\r\n  const panelRef = useRef<HTMLDivElement>(null);\r\n  const [animState, setAnimState] = useState<'closed' | 'opening' | 'open' | 'closing'>('closed');\r\n  const _instanceId = useRef(++sidePanelInstanceCount);\r\n\r\n  const { isMobile } = useBreakpoint();\r\n  const resolvedWidth = isMobile ? '100%' : (typeof width === 'number' ? `${width}px` : width);\r\n\r\n  // Animate open/close\r\n  useEffect(() => {\r\n    if (open) {\r\n      setAnimState('opening');\r\n      const timer = setTimeout(() => setAnimState('open'), 30);\r\n      return () => clearTimeout(timer);\r\n    } else {\r\n      if (animState === 'open' || animState === 'opening') {\r\n        setAnimState('closing');\r\n        const timer = setTimeout(() => setAnimState('closed'), 550);\r\n        return () => clearTimeout(timer);\r\n      }\r\n    }\r\n  }, [open]);\r\n\r\n  // Escape key handler\r\n  const handleKeyDown = useCallback((e: KeyboardEvent) => {\r\n    if (closeOnEscape && e.key === 'Escape') {\r\n      onClose();\r\n    }\r\n  }, [closeOnEscape, onClose]);\r\n\r\n  useEffect(() => {\r\n    if (open) {\r\n      document.addEventListener('keydown', handleKeyDown);\r\n      return () => document.removeEventListener('keydown', handleKeyDown);\r\n    }\r\n  }, [open, handleKeyDown]);\r\n\r\n  // Don't render at all when fully closed\r\n  if (animState === 'closed') return null;\r\n\r\n  const isVisible = animState === 'open';\r\n  const slideFrom = position === 'right' ? 'translateX(100%)' : 'translateX(-100%)';\r\n\r\n  return (\r\n    <>\r\n      {/* Optional overlay */}\r\n      {overlay && (\r\n        <div\r\n          className=\"zendir-sidepanel-overlay\"\r\n          onClick={closeOnOverlayClick ? onClose : undefined}\r\n          style={{\r\n            position: 'fixed',\r\n            inset: 0,\r\n            backgroundColor: isTransparentTheme ? `${tokens.colors.background.base}4D` : `${tokens.colors.background.base}66`,\r\n            backdropFilter: isTransparentTheme ? 'blur(2px)' : undefined,\r\n            WebkitBackdropFilter: isTransparentTheme ? 'blur(2px)' : undefined,\r\n            zIndex: 999,\r\n            opacity: isVisible ? 1 : 0,\r\n            transition: 'opacity 0.3s ease',\r\n            pointerEvents: isVisible ? 'auto' : 'none',\r\n          }}\r\n        />\r\n      )}\r\n\r\n      {/* Panel */}\r\n      <div\r\n        ref={panelRef}\r\n        className={classNames('zendir-sidepanel', className)}\r\n        style={{\r\n          width: isVisible ? resolvedWidth : '0px',\r\n          minWidth: isVisible ? resolvedWidth : '0px',\r\n          maxWidth: resolvedWidth,\r\n          height: '100%',\r\n          overflow: 'hidden',\r\n          transition: 'width 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), min-width 0.6s cubic-bezier(0.2, 0.8, 0.2, 1)',\r\n          flexShrink: 0,\r\n          position: 'relative',\r\n          zIndex: overlay ? 1000 : 'auto',\r\n          ...(overlay && { position: 'fixed', top: 0, [position]: 0 }),\r\n          ...styleProp,\r\n        }}\r\n      >\r\n        <div\r\n          style={{\r\n            width: resolvedWidth,\r\n            height: '100%',\r\n            display: 'flex',\r\n            flexDirection: 'column',\r\n            backgroundColor: isTransparentTheme\r\n              ? 'rgba(15, 15, 35, 0.85)'\r\n              : tokens.colors.background.surface,\r\n            ...(isTransparentTheme && {\r\n              backdropFilter: 'blur(16px)',\r\n              WebkitBackdropFilter: 'blur(16px)',\r\n            }),\r\n            borderLeft: position === 'right' ? tokens.borders.divider : undefined,\r\n            borderRight: position === 'left' ? tokens.borders.divider : undefined,\r\n            transform: isVisible ? 'translateX(0)' : slideFrom,\r\n            transition: 'transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1)',\r\n            overflow: 'hidden',\r\n          }}\r\n        >\r\n          {/* Header */}\r\n          {(title || showCloseButton || headerActions || headerLeading) && (\r\n            <div\r\n              onClick={onHeaderClick}\r\n              role={onHeaderClick ? 'button' : undefined}\r\n              tabIndex={onHeaderClick ? 0 : undefined}\r\n              onKeyDown={onHeaderClick ? (e: React.KeyboardEvent) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onHeaderClick(); } } : undefined}\r\n              style={{\r\n                display: 'flex',\r\n                alignItems: 'center',\r\n                justifyContent: 'space-between',\r\n                padding: `${tokens.spacing.md} ${tokens.spacing.md}`,\r\n                borderBottom: tokens.borders.divider,\r\n                flexShrink: 0,\r\n                gap: tokens.spacing.sm,\r\n                ...(onHeaderClick && { cursor: 'pointer' }),\r\n                ...headerStyleProp,\r\n              }}\r\n            >\r\n              <div style={{ display: 'flex', alignItems: 'center', gap: tokens.spacing.sm, flex: 1, minWidth: 0 }}>\r\n                {headerLeading}\r\n                {title && (\r\n                  <h3\r\n                    style={{\r\n                      margin: 0,\r\n                      fontSize: tokens.typography.fontSize.base,\r\n                      fontWeight: tokens.typography.fontWeight.semibold,\r\n                      color: tokens.colors.text.primary,\r\n                      whiteSpace: 'nowrap',\r\n                      overflow: 'hidden',\r\n                      textOverflow: 'ellipsis',\r\n                    }}\r\n                  >\r\n                    {title}\r\n                  </h3>\r\n                )}\r\n              </div>\r\n              <div style={{ display: 'flex', alignItems: 'center', gap: tokens.spacing.xs, flexShrink: 0 }}>\r\n                {headerActions}\r\n                {showCloseButton && (\r\n                  <button\r\n                    type=\"button\"\r\n                    onClick={onClose}\r\n                    aria-label=\"Close panel\"\r\n                    style={{\r\n                      padding: tokens.spacing.sm,\r\n                      minWidth: 44,\r\n                      minHeight: 44,\r\n                      backgroundColor: 'transparent',\r\n                      border: 'none',\r\n                      borderRadius: tokens.borderRadius.sm,\r\n                      cursor: 'pointer',\r\n                      color: tokens.colors.text.muted ?? tokens.colors.text.tertiary,\r\n                      display: 'flex',\r\n                      alignItems: 'center',\r\n                      justifyContent: 'center',\r\n                      transition: `color 0.15s ease, background-color 0.15s ease`,\r\n                    }}\r\n                    onMouseEnter={(e) => {\r\n                      e.currentTarget.style.color = tokens.colors.text.primary;\r\n                      e.currentTarget.style.backgroundColor = tokens.colors.background.base;\r\n                    }}\r\n                    onMouseLeave={(e) => {\r\n                      e.currentTarget.style.color = tokens.colors.text.muted ?? tokens.colors.text.tertiary;\r\n                      e.currentTarget.style.backgroundColor = 'transparent';\r\n                    }}\r\n                  >\r\n                    <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n                      <path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\" />\r\n                    </svg>\r\n                  </button>\r\n                )}\r\n              </div>\r\n            </div>\r\n          )}\r\n\r\n          {/* Content */}\r\n          <div\r\n            style={{\r\n              flex: 1,\r\n              overflow: 'auto',\r\n              minHeight: 0,\r\n            }}\r\n          >\r\n            {children}\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </>\r\n  );\r\n});\r\n\r\nexport default SidePanel;\r\n"],"names":["SidePanel"],"mappings":"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"}

package/dist/react/core/{Tooltip.js → 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";
+import { useTheme } from "../../theme/ThemeProvider.js";
 const Tooltip = memo(function Tooltip2({
   content,
   placement = "top",

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.js","sources":["../../../../src/react/core/overlays/Tooltip.tsx"],"sourcesContent":["/**\n * @zendir/ui - Tooltip Component\n * \n * Tooltip following Astro UX Design System.\n * Uses a portal to render in document.body, ensuring correct positioning\n * even when the trigger is inside containers with CSS transforms or overflow.\n * \n * @example\n * ```tsx\n * <Tooltip content=\"Click to enable telemetry\">\n *   <Button>Enable</Button>\n * </Tooltip>\n * ```\n */\n\nimport React, { memo, useState, useRef, useEffect, useLayoutEffect, useCallback } from 'react';\nimport ReactDOM from 'react-dom';\nimport { useTheme } from '../../theme';\nimport { classNames } from '../../utils';\n\nexport type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';\n\nexport interface TooltipProps {\n  /** Tooltip content */\n  content: React.ReactNode;\n  /** Placement */\n  placement?: TooltipPlacement;\n  /** Delay before showing (ms) */\n  delay?: number;\n  /** Disabled state */\n  disabled?: boolean;\n  /** Children element to trigger tooltip */\n  children: React.ReactElement;\n  /** Custom className */\n  className?: string;\n}\n\nexport const Tooltip = memo(function Tooltip({\n  content,\n  placement = 'top',\n  delay = 200,\n  disabled = false,\n  children,\n  className = '',\n}: TooltipProps): React.ReactElement {\n  const { tokens } = useTheme();\n  const [visible, setVisible] = useState(false);\n  const [positioned, setPositioned] = useState(false);\n  const [position, setPosition] = useState({ top: 0, left: 0 });\n  const triggerRef = useRef<HTMLDivElement>(null);\n  const tooltipRef = useRef<HTMLDivElement>(null);\n  const timeoutRef = useRef<number>();\n  const hideTimeoutRef = useRef<number>();\n  \n  const showTooltip = useCallback(() => {\n    if (disabled) return;\n    // Cancel any pending hide so moving between trigger ↔ tooltip keeps it open\n    if (hideTimeoutRef.current) {\n      clearTimeout(hideTimeoutRef.current);\n      hideTimeoutRef.current = undefined;\n    }\n    timeoutRef.current = window.setTimeout(() => {\n      setVisible(true);\n      setPositioned(false);\n    }, delay);\n  }, [disabled, delay]);\n  \n  const hideTooltip = useCallback(() => {\n    if (timeoutRef.current) {\n      clearTimeout(timeoutRef.current);\n    }\n    // Small delay so user can move pointer from trigger to tooltip (WCAG 1.4.13)\n    hideTimeoutRef.current = window.setTimeout(() => {\n      setVisible(false);\n      setPositioned(false);\n    }, 100);\n  }, []);\n  \n  const hideImmediately = useCallback(() => {\n    if (timeoutRef.current) clearTimeout(timeoutRef.current);\n    if (hideTimeoutRef.current) clearTimeout(hideTimeoutRef.current);\n    setVisible(false);\n    setPositioned(false);\n  }, []);\n  \n  const calculatePosition = useCallback(() => {\n    if (!triggerRef.current || !tooltipRef.current) return;\n    \n    const triggerRect = triggerRef.current.getBoundingClientRect();\n    const tooltipRect = tooltipRef.current.getBoundingClientRect();\n    const gap = 8;\n    const viewportWidth = window.innerWidth;\n    const viewportHeight = window.innerHeight;\n    \n    let top = 0;\n    let left = 0;\n    \n    switch (placement) {\n      case 'top':\n        top = triggerRect.top - tooltipRect.height - gap;\n        left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2;\n        break;\n      case 'bottom':\n        top = triggerRect.bottom + gap;\n        left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2;\n        break;\n      case 'left':\n        top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2;\n        left = triggerRect.left - tooltipRect.width - gap;\n        break;\n      case 'right':\n        top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2;\n        left = triggerRect.right + gap;\n        break;\n    }\n    \n    // Keep tooltip within viewport bounds\n    if (left < gap) left = gap;\n    if (left + tooltipRect.width > viewportWidth - gap) {\n      left = viewportWidth - tooltipRect.width - gap;\n    }\n    if (top < gap) top = gap;\n    if (top + tooltipRect.height > viewportHeight - gap) {\n      top = viewportHeight - tooltipRect.height - gap;\n    }\n    \n    setPosition({ top, left });\n    setPositioned(true);\n  }, [placement]);\n  \n  // Use useLayoutEffect for initial positioning - runs synchronously\n  // before browser paint, preventing flash at wrong position\n  useLayoutEffect(() => {\n    if (visible && triggerRef.current && tooltipRef.current) {\n      calculatePosition();\n    }\n  }, [visible, calculatePosition]);\n  \n  // Use useEffect for scroll/resize listeners\n  useEffect(() => {\n    if (!visible) return;\n    \n    const handleScrollOrResize = () => {\n      calculatePosition();\n    };\n    \n    window.addEventListener('scroll', handleScrollOrResize, true);\n    window.addEventListener('resize', handleScrollOrResize);\n    \n    return () => {\n      window.removeEventListener('scroll', handleScrollOrResize, true);\n      window.removeEventListener('resize', handleScrollOrResize);\n    };\n  }, [visible, calculatePosition]);\n  \n  // Escape key dismisses tooltip (WCAG 1.4.13 Content on Hover or Focus)\n  useEffect(() => {\n    if (!visible) return;\n    const handleEscape = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        hideImmediately();\n      }\n    };\n    document.addEventListener('keydown', handleEscape);\n    return () => document.removeEventListener('keydown', handleEscape);\n  }, [visible, hideImmediately]);\n  \n  useEffect(() => {\n    return () => {\n      if (timeoutRef.current) clearTimeout(timeoutRef.current);\n      if (hideTimeoutRef.current) clearTimeout(hideTimeoutRef.current);\n    };\n  }, []);\n  \n  return (\n    <>\n      <div\n        ref={triggerRef}\n        className={classNames('zendir-tooltip-trigger', className)}\n        style={{ display: 'inline-flex', pointerEvents: 'auto', maxWidth: '100%', width: 'inherit' }}\n        onMouseEnter={showTooltip}\n        onMouseLeave={hideTooltip}\n        onFocus={showTooltip}\n        onBlur={hideTooltip}\n      >\n        {children}\n      </div>\n      \n      {visible && ReactDOM.createPortal(\n        <div\n          ref={tooltipRef}\n          role=\"tooltip\"\n          onMouseEnter={showTooltip}\n          onMouseLeave={hideTooltip}\n          style={{\n            position: 'fixed',\n            top: positioned ? position.top : 0,\n            left: positioned ? position.left : 0,\n            width: 'max-content',\n            padding: `${tokens.spacing.sm} ${tokens.spacing.smd}`,\n            backgroundColor: tokens.colors.background.elevated,\n            color: tokens.colors.text.primary,\n            fontSize: '0.75rem',\n            fontWeight: 500,\n            fontFamily: tokens.typography.fontFamily.primary,\n            borderRadius: tokens.borderRadius.md,\n            border: `1px solid ${tokens.colors.accent.primary}20`,\n            boxShadow: positioned ? `${tokens.shadows.lg}, 0 0 20px ${tokens.colors.accent.primary}10` : 'none',\n            zIndex: 2147483100,\n            maxWidth: 'min(280px, calc(100vw - 24px))',\n            whiteSpace: 'normal',\n            pointerEvents: 'auto',\n            visibility: positioned ? 'visible' : 'hidden',\n            opacity: positioned ? 1 : 0,\n            transition: positioned ? undefined : 'none',\n            animation: positioned ? `zendir-tooltip ${tokens.animation.duration.fast}ms ${tokens.animation.easing.default} both` : 'none',\n            backdropFilter: 'blur(8px)',\n          }}\n        >\n          {content}\n          <style>\n            {`@keyframes zendir-tooltip { from { opacity: 0; transform: scale(0.95) translateY(${placement === 'bottom' ? '-4px' : placement === 'top' ? '4px' : '0'}); } to { opacity: 1; transform: scale(1) translateY(0); } }\n            @media (prefers-reduced-motion: reduce) { @keyframes zendir-tooltip { from, to { opacity: 1; transform: none; } } }`}\n          </style>\n        </div>,\n        document.body\n      )}\n    </>\n  );\n});\n\nexport default Tooltip;\n"],"names":["Tooltip"],"mappings":"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"}

package/dist/react/core/{ActivityPlanner.js → widgets/ActivityPlanner.js}

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { memo, useState, useRef, useMemo, useCallback } from "react";
-import { useTheme } from "../theme/ThemeProvider.js";
+import { useTheme } from "../../theme/ThemeProvider.js";
 function getStatusColor(status, tokens) {
   if (!status || !tokens) return (tokens == null ? void 0 : tokens.colors.text.muted) ?? "currentColor";
   switch (status) {

package/dist/react/core/widgets/ActivityPlanner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActivityPlanner.js","sources":["../../../../src/react/core/widgets/ActivityPlanner.tsx"],"sourcesContent":["/**\r\n * @zendir/ui - ActivityPlanner Component\r\n * \r\n * Activity scheduling and management panel. Creates, edits, and monitors\r\n * scheduled activities across timelines. Integrates with MissionCalendar\r\n * and Timeline components.\r\n * \r\n * Space Mission Features:\r\n * - Create/edit activities with command or script execution\r\n * - Drag-and-drop reorder within timeline\r\n * - Hazardous activity warnings (Astro UX)\r\n * - Activity lifecycle tracking (created → scheduled → started → completed)\r\n * - Overlap detection within a timeline\r\n * - Metadata recording (operator, environment, notes)\r\n * - Contact window awareness\r\n * - Batch scheduling\r\n * \r\n * @example\r\n * ```tsx\r\n * <ActivityPlanner\r\n *   activities={activities}\r\n *   timelines={timelines}\r\n *   onActivityCreate={(a) => console.log('Create:', a)}\r\n *   onActivityUpdate={(a) => console.log('Update:', a)}\r\n * />\r\n * ```\r\n */\r\n\r\nimport React, { useState, useMemo, useCallback, memo, useRef } from 'react';\r\nimport { useTheme } from '../../theme';\r\nimport type { CalendarEvent, CalendarTimeline, ActivityStatus, ActivityType } from './MissionCalendar';\r\n\r\n// =============================================================================\r\n// Types\r\n// =============================================================================\r\n\r\nexport interface ActivityFormData {\r\n  title: string;\r\n  type: ActivityType;\r\n  start: string; // ISO string\r\n  end: string;   // ISO string\r\n  timeline: string;\r\n  description: string;\r\n  command: string;\r\n  script: string;\r\n  hazardous: boolean;\r\n  metadata: Record<string, string>;\r\n}\r\n\r\nexport interface ActivityPlannerProps {\r\n  /** Activities to display */\r\n  activities: CalendarEvent[];\r\n  /** Available timelines */\r\n  timelines: CalendarTimeline[];\r\n  /** Currently selected date for scheduling */\r\n  selectedDate?: Date;\r\n  /** Height (default: 500) */\r\n  height?: number | string;\r\n  /** Title */\r\n  title?: string;\r\n  /** Read-only mode */\r\n  readOnly?: boolean;\r\n  /** Show overlap warnings */\r\n  showOverlapWarning?: boolean;\r\n  /** Called on create */\r\n  onActivityCreate?: (activity: Partial<CalendarEvent>) => void;\r\n  /** Called on update */\r\n  onActivityUpdate?: (id: string, updates: Partial<CalendarEvent>) => void;\r\n  /** Called on delete */\r\n  onActivityDelete?: (id: string) => void;\r\n  /** Called when requesting to view activity in calendar */\r\n  onViewInCalendar?: (activity: CalendarEvent) => void;\r\n  /** Called when requesting to view in timeline */\r\n  onViewInTimeline?: (activity: CalendarEvent) => void;\r\n  /** CSS class */\r\n  className?: string;\r\n}\r\n\r\n// =============================================================================\r\n// Helpers\r\n// =============================================================================\r\n\r\n/**\r\n * Map activity status → Astro UX status color using tokens.\r\n *   created/scheduled → standby (cyan)\r\n *   started/completed → normal (green)\r\n *   paused/stopped/disabled → caution (yellow)\r\n *   error/failed/crashed → critical (red)\r\n */\r\nfunction getStatusColor(status?: ActivityStatus, tokens?: ReturnType<typeof useTheme>['tokens']): string {\r\n  if (!status || !tokens) return tokens?.colors.text.muted ?? 'currentColor';\r\n  switch (status) {\r\n    case 'created': case 'scheduled': return tokens.colors.status.standby;\r\n    case 'started': case 'completed': return tokens.colors.status.normal;\r\n    case 'paused': case 'stopped': case 'disabled': return tokens.colors.status.caution;\r\n    case 'error': case 'failed': case 'crashed': return tokens.colors.status.critical;\r\n  }\r\n}\r\n\r\n/**\r\n * Return Astro UX status shape + contextual icon.\r\n * The leading character is the Astro status shape for the mapped level:\r\n *   standby → ◯ (ring), normal → ● (filled circle),\r\n *   caution → ■ (square), critical → ▼ (triangle down)\r\n * Followed by a contextual glyph for the specific activity state.\r\n */\r\nfunction getStatusIcon(status?: ActivityStatus): string {\r\n  if (!status) return '◯';\r\n  switch (status) {\r\n    case 'created': return '◯';         // standby ring\r\n    case 'scheduled': return '◯ ◉';     // standby ring + scheduled\r\n    case 'started': return '● ▶';       // normal circle + play\r\n    case 'completed': return '● ✓';     // normal circle + check\r\n    case 'paused': return '■ ⏸';        // caution square + pause\r\n    case 'stopped': return '■ ⏹';       // caution square + stop\r\n    case 'disabled': return '■ ⊘';      // caution square + disabled\r\n    case 'error': case 'failed': case 'crashed': return '▼';  // critical triangle down\r\n  }\r\n}\r\n\r\nfunction formatDate(d: Date): string {\r\n  return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });\r\n}\r\n\r\nfunction formatTime(d: Date): string {\r\n  return d.toLocaleTimeString('en-US', { hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit' });\r\n}\r\n\r\nfunction checkOverlap(a: CalendarEvent, b: CalendarEvent): boolean {\r\n  if (!a.end || !b.end) return false;\r\n  if (a.timeline !== b.timeline) return false;\r\n  return a.start < b.end && b.start < a.end;\r\n}\r\n\r\n// =============================================================================\r\n// Form Component\r\n// =============================================================================\r\n\r\nconst ActivityForm = memo(function ActivityForm({\r\n  timelines, selectedDate, tokens, onSubmit, onCancel,\r\n}: {\r\n  timelines: CalendarTimeline[];\r\n  selectedDate?: Date;\r\n  tokens: ReturnType<typeof useTheme>['tokens'];\r\n  onSubmit: (data: ActivityFormData) => void;\r\n  onCancel: () => void;\r\n}) {\r\n  const now = selectedDate || new Date();\r\n  const endDefault = new Date(now.getTime() + 3600000);\r\n\r\n  const [form, setForm] = useState<ActivityFormData>({\r\n    title: '', type: 'command',\r\n    start: now.toISOString().slice(0, 16),\r\n    end: endDefault.toISOString().slice(0, 16),\r\n    timeline: timelines[0]?.id || '',\r\n    description: '', command: '', script: '',\r\n    hazardous: false, metadata: {},\r\n  });\r\n  const [metaKey, setMetaKey] = useState('');\r\n  const [metaValue, setMetaValue] = useState('');\r\n\r\n  const addMetadata = useCallback(() => {\r\n    if (metaKey.trim()) {\r\n      setForm(prev => ({ ...prev, metadata: { ...prev.metadata, [metaKey.trim()]: metaValue } }));\r\n      setMetaKey('');\r\n      setMetaValue('');\r\n    }\r\n  }, [metaKey, metaValue]);\r\n\r\n  const inputStyle: React.CSSProperties = {\r\n    background: tokens.colors.background.base,\r\n    color: tokens.colors.text.primary,\r\n    border: `1px solid ${tokens.colors.border.muted}`,\r\n    borderRadius: tokens.borderRadius.md,\r\n    padding: `${tokens.spacing.xs}px ${tokens.spacing.sm}px`,\r\n    fontSize: tokens.typography.fontSize.xs,\r\n    width: '100%',\r\n    minHeight: 40,\r\n    fontFamily: tokens.typography.fontFamily.primary,\r\n    transition: 'all 150ms ease',\r\n  };\r\n\r\n  const labelStyle: React.CSSProperties = {\r\n    fontSize: tokens.typography.fontSize.xxs, fontWeight: 500, color: tokens.colors.text.muted,\r\n    textTransform: 'uppercase', marginBottom: 3, display: 'block',\r\n  };\r\n\r\n  return (\r\n    <div style={{ padding: 12, display: 'flex', flexDirection: 'column', gap: 8 }}>\r\n      <div style={{ display: 'grid', gridTemplateColumns: '1fr 120px', gap: 8 }}>\r\n        <div>\r\n          <label htmlFor=\"activity-title\" style={labelStyle}>Title</label>\r\n          <input id=\"activity-title\" aria-label=\"Activity title\" style={inputStyle} value={form.title} onChange={e => setForm(p => ({ ...p, title: e.target.value }))} placeholder=\"Activity name\" />\r\n        </div>\r\n        <div>\r\n          <label htmlFor=\"activity-type\" style={labelStyle}>Type</label>\r\n          <select id=\"activity-type\" aria-label=\"Activity type\" style={inputStyle} value={form.type} onChange={e => setForm(p => ({ ...p, type: e.target.value as ActivityType }))}>\r\n            <option value=\"command\">Command</option>\r\n            <option value=\"script\">Script</option>\r\n            <option value=\"reserve\">Reserve</option>\r\n            <option value=\"contact\">Contact</option>\r\n            <option value=\"note\">Note</option>\r\n            <option value=\"metadata\">Metadata</option>\r\n          </select>\r\n        </div>\r\n      </div>\r\n      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>\r\n        <div>\r\n          <label htmlFor=\"activity-start-time\" style={labelStyle}>Start Time</label>\r\n          <input id=\"activity-start-time\" aria-label=\"Start time\" type=\"datetime-local\" style={{ ...inputStyle, fontFamily: tokens.typography.fontFamily.mono }} value={form.start} onChange={e => setForm(p => ({ ...p, start: e.target.value }))} />\r\n        </div>\r\n        <div>\r\n          <label htmlFor=\"activity-end-time\" style={labelStyle}>End Time</label>\r\n          <input id=\"activity-end-time\" aria-label=\"End time\" type=\"datetime-local\" style={{ ...inputStyle, fontFamily: tokens.typography.fontFamily.mono }} value={form.end} onChange={e => setForm(p => ({ ...p, end: e.target.value }))} />\r\n        </div>\r\n      </div>\r\n      {timelines.length > 0 && (\r\n        <div>\r\n          <label htmlFor=\"activity-timeline\" style={labelStyle}>Timeline</label>\r\n          <select id=\"activity-timeline\" aria-label=\"Timeline\" style={inputStyle} value={form.timeline} onChange={e => setForm(p => ({ ...p, timeline: e.target.value }))}>\r\n            {timelines.map(t => <option key={t.id} value={t.id}>{t.name}</option>)}\r\n          </select>\r\n        </div>\r\n      )}\r\n      {form.type === 'command' && (\r\n        <div>\r\n          <label htmlFor=\"activity-command\" style={labelStyle}>Command</label>\r\n          <input id=\"activity-command\" aria-label=\"Command\" style={{ ...inputStyle, fontFamily: tokens.typography.fontFamily.mono }} value={form.command} onChange={e => setForm(p => ({ ...p, command: e.target.value }))} placeholder='cmd(\"TARGET COMMAND\")' />\r\n        </div>\r\n      )}\r\n      {form.type === 'script' && (\r\n        <div>\r\n          <label htmlFor=\"activity-script\" style={labelStyle}>Script Path</label>\r\n          <input id=\"activity-script\" aria-label=\"Script path\" style={{ ...inputStyle, fontFamily: tokens.typography.fontFamily.mono }} value={form.script} onChange={e => setForm(p => ({ ...p, script: e.target.value }))} placeholder=\"/scripts/ops/collect.rb\" />\r\n        </div>\r\n      )}\r\n      <div>\r\n        <label htmlFor=\"activity-description\" style={labelStyle}>Description</label>\r\n        <textarea id=\"activity-description\" aria-label=\"Description\" style={{ ...inputStyle, minHeight: 48, resize: 'vertical' }} value={form.description} onChange={e => setForm(p => ({ ...p, description: e.target.value }))} placeholder=\"Notes...\" />\r\n      </div>\r\n\r\n      {/* Metadata KV */}\r\n      <div>\r\n        <div style={labelStyle}>Metadata</div>\r\n        <div style={{ display: 'flex', gap: 4, marginBottom: 4 }}>\r\n          <input aria-label=\"Metadata key\" style={{ ...inputStyle, flex: 1 }} value={metaKey} onChange={e => setMetaKey(e.target.value)} placeholder=\"Key\" />\r\n          <input aria-label=\"Metadata value\" style={{ ...inputStyle, flex: 1 }} value={metaValue} onChange={e => setMetaValue(e.target.value)} placeholder=\"Value\" />\r\n          <button onClick={addMetadata} style={{\r\n            background: tokens.colors.interactive.default, color: tokens.colors.text.inverse, border: 'none',\r\n            borderRadius: tokens.borderRadius.md, padding: `0 ${tokens.spacing.sm}px`, fontSize: tokens.typography.fontSize.xs, cursor: 'pointer',\r\n            transition: 'all 150ms ease',\r\n          }}>+</button>\r\n        </div>\r\n        {Object.keys(form.metadata).length > 0 && (\r\n          <div style={{ display: 'flex', gap: 4, flexWrap: 'wrap' }}>\r\n            {Object.entries(form.metadata).map(([k, v]) => (\r\n              <span key={k} style={{\r\n                fontSize: tokens.typography.fontSize.micro, background: tokens.colors.background.surface, padding: `2px 6px`,\r\n                borderRadius: tokens.borderRadius.sm, display: 'flex', alignItems: 'center', gap: tokens.spacing.xs,\r\n              }}>\r\n                {k}: {v}\r\n                <button\r\n                  type=\"button\"\r\n                  aria-label={`Remove metadata ${k}`}\r\n                  onClick={() => setForm(p => {\r\n                    const m = { ...p.metadata };\r\n                    delete m[k];\r\n                    return { ...p, metadata: m };\r\n                  })}\r\n                  style={{\r\n                    cursor: 'pointer',\r\n                    color: tokens.colors.status.critical,\r\n                    fontWeight: 500,\r\n                    border: 'none',\r\n                    background: 'transparent',\r\n                    padding: 0,\r\n                    lineHeight: 1,\r\n                  }}\r\n                >\r\n                  ×\r\n                </button>\r\n              </span>\r\n            ))}\r\n          </div>\r\n        )}\r\n      </div>\r\n\r\n      {/* Hazardous toggle */}\r\n      <label style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: tokens.typography.fontSize.xs, cursor: 'pointer' }}>\r\n        <input aria-label=\"Hazardous activity\" type=\"checkbox\" checked={form.hazardous} onChange={e => setForm(p => ({ ...p, hazardous: e.target.checked }))} />\r\n        <span style={{ color: form.hazardous ? tokens.colors.status.critical : tokens.colors.text.secondary }}>\r\n          ⚠ Hazardous Activity\r\n        </span>\r\n      </label>\r\n\r\n      {/* Buttons */}\r\n      <div style={{ display: 'flex', gap: 6, justifyContent: 'flex-end', marginTop: 4 }}>\r\n        <button onClick={onCancel} style={{\r\n          background: 'transparent', color: tokens.colors.text.muted,\r\n          border: `1px solid ${tokens.colors.border.muted}`,\r\n          borderRadius: tokens.borderRadius.md, padding: `${tokens.spacing.xs}px 14px`, fontSize: tokens.typography.fontSize.xs, cursor: 'pointer',\r\n          transition: 'all 150ms ease',\r\n        }}>Cancel</button>\r\n        <button onClick={() => onSubmit(form)} disabled={!form.title.trim()} style={{\r\n          background: tokens.colors.interactive.default, color: tokens.colors.text.inverse,\r\n          border: 'none', borderRadius: tokens.borderRadius.md, padding: `${tokens.spacing.xs}px 14px`, fontSize: tokens.typography.fontSize.xs,\r\n          cursor: form.title.trim() ? 'pointer' : 'not-allowed', fontWeight: 500, opacity: form.title.trim() ? 1 : 0.5,\r\n          transition: 'all 150ms ease',\r\n        }}>Create Activity</button>\r\n      </div>\r\n    </div>\r\n  );\r\n});\r\n\r\n// =============================================================================\r\n// Main Component\r\n// =============================================================================\r\n\r\nexport const ActivityPlanner = memo(function ActivityPlanner({\r\n  activities,\r\n  timelines,\r\n  selectedDate,\r\n  height = 500,\r\n  title = 'Activity Planner',\r\n  readOnly = false,\r\n  showOverlapWarning = true,\r\n  onActivityCreate,\r\n  onActivityUpdate: _onActivityUpdate,\r\n  onActivityDelete,\r\n  onViewInCalendar,\r\n  onViewInTimeline,\r\n  className = '',\r\n}: ActivityPlannerProps): React.ReactElement {\r\n  const { tokens, theme } = useTheme();\r\n  const isTransparentTheme =\r\n    theme === 'transparent' || theme === 'transparent-bold' || theme === 'transparent-minimal';\r\n  const [showForm, setShowForm] = useState(false);\r\n  const [filter, setFilter] = useState('');\r\n  const [sortBy, setSortBy] = useState<'time' | 'status' | 'timeline'>('time');\r\n  const listRef = useRef<HTMLDivElement>(null);\r\n\r\n  // Overlap detection\r\n  const overlaps = useMemo(() => {\r\n    const pairs: [string, string][] = [];\r\n    for (let i = 0; i < activities.length; i++) {\r\n      for (let j = i + 1; j < activities.length; j++) {\r\n        if (checkOverlap(activities[i], activities[j])) {\r\n          pairs.push([activities[i].id, activities[j].id]);\r\n        }\r\n      }\r\n    }\r\n    return new Set(pairs.flat());\r\n  }, [activities]);\r\n\r\n  // Sort and filter\r\n  const displayActivities = useMemo(() => {\r\n    let list = [...activities];\r\n    if (filter) {\r\n      const lf = filter.toLowerCase();\r\n      list = list.filter(a =>\r\n        a.title.toLowerCase().includes(lf) ||\r\n        a.description?.toLowerCase().includes(lf) ||\r\n        a.timeline?.toLowerCase().includes(lf) ||\r\n        a.command?.toLowerCase().includes(lf)\r\n      );\r\n    }\r\n    switch (sortBy) {\r\n      case 'time': list.sort((a, b) => a.start.getTime() - b.start.getTime()); break;\r\n      case 'status': list.sort((a, b) => (a.status || '').localeCompare(b.status || '')); break;\r\n      case 'timeline': list.sort((a, b) => (a.timeline || '').localeCompare(b.timeline || '')); break;\r\n    }\r\n    return list;\r\n  }, [activities, filter, sortBy]);\r\n\r\n  // Stats\r\n  const stats = useMemo(() => ({\r\n    total: activities.length,\r\n    scheduled: activities.filter(a => a.status === 'scheduled' || a.status === 'created').length,\r\n    running: activities.filter(a => a.status === 'started').length,\r\n    completed: activities.filter(a => a.status === 'completed').length,\r\n    errors: activities.filter(a => a.status === 'error' || a.status === 'failed' || a.status === 'crashed').length,\r\n  }), [activities]);\r\n\r\n  const handleCreate = useCallback((data: ActivityFormData) => {\r\n    onActivityCreate?.({\r\n      title: data.title,\r\n      type: data.type,\r\n      start: new Date(data.start),\r\n      end: new Date(data.end),\r\n      timeline: data.timeline,\r\n      description: data.description,\r\n      command: data.command || undefined,\r\n      script: data.script || undefined,\r\n      metadata: Object.keys(data.metadata).length > 0 ? data.metadata : undefined,\r\n      status: 'created',\r\n    });\r\n    setShowForm(false);\r\n  }, [onActivityCreate]);\r\n\r\n  const panelPadX = tokens.spacing.md;\r\n  const panelPadY = tokens.spacing.sm;\r\n\r\n  return (\r\n    <div\r\n      className={`activity-planner ${className}`}\r\n      style={{\r\n        height: typeof height === 'number' ? height : undefined,\r\n        background: tokens.colors.background.base,\r\n        ...(tokens.colors.border.cardStyle ?? { border: `1px solid ${tokens.colors.border.muted}` }),\r\n        borderRadius: tokens.borderRadius.lg, overflow: 'hidden',\r\n        display: 'flex', flexDirection: 'column',\r\n        fontFamily: tokens.typography.fontFamily.primary, color: tokens.colors.text.primary,\r\n        backdropFilter: isTransparentTheme ? 'blur(10px)' : undefined,\r\n        WebkitBackdropFilter: isTransparentTheme ? 'blur(10px)' : undefined,\r\n      }}\r\n    >\r\n      {/* Header */}\r\n      <div style={{\r\n        padding: `${panelPadY}px ${panelPadX}px`,\r\n        borderBottom: `1px solid ${tokens.colors.border.muted}`,\r\n        background: tokens.colors.background.surface,\r\n        backdropFilter: 'blur(8px)',\r\n        display: 'flex', alignItems: 'center', justifyContent: 'space-between',\r\n      }}>\r\n        <div style={{ display: 'flex', alignItems: 'center', gap: tokens.spacing.sm }}>\r\n          <span style={{ fontWeight: 500, fontSize: tokens.typography.fontSize.sm }}>{title}</span>\r\n          <div style={{ display: 'flex', gap: 10, fontSize: tokens.typography.fontSize.xxs, color: tokens.colors.text.muted }}>\r\n            <span>Scheduled {stats.scheduled}</span>\r\n            <span style={{ color: tokens.colors.text.secondary }}>Running {stats.running}</span>\r\n            <span style={{ color: tokens.colors.text.secondary }}>Completed {stats.completed}</span>\r\n            {stats.errors > 0 && <span style={{ color: tokens.colors.status.critical }}>Errors {stats.errors}</span>}\r\n          </div>\r\n        </div>\r\n        {!readOnly && (\r\n          <button\r\n            onClick={() => setShowForm(!showForm)}\r\n            style={{\r\n              background: showForm ? tokens.colors.status.critical + '22' : tokens.colors.interactive.default,\r\n              color: showForm ? tokens.colors.status.critical : tokens.colors.text.inverse,\r\n              border: 'none', borderRadius: tokens.borderRadius.md, padding: '3px 10px',\r\n              fontSize: tokens.typography.fontSize.xs, fontWeight: 500, cursor: 'pointer',\r\n              transition: 'all 150ms ease',\r\n            }}\r\n          >\r\n            {showForm ? '✕ Cancel' : '+ New Activity'}\r\n          </button>\r\n        )}\r\n      </div>\r\n\r\n      {/* Create form */}\r\n      {showForm && !readOnly && (\r\n        <div style={{ borderBottom: `1px solid ${tokens.colors.border.muted}`, background: tokens.colors.background.surface + '88' }}>\r\n          <ActivityForm\r\n            timelines={timelines}\r\n            selectedDate={selectedDate}\r\n            tokens={tokens}\r\n            onSubmit={handleCreate}\r\n            onCancel={() => setShowForm(false)}\r\n          />\r\n        </div>\r\n      )}\r\n\r\n      {/* Search / Sort */}\r\n      <div style={{\r\n        padding: `${tokens.spacing.xs}px ${panelPadX}px`, display: 'flex', gap: 6, alignItems: 'center',\r\n        borderBottom: `1px solid ${tokens.colors.border.muted}`,\r\n      }}>\r\n        <input\r\n          value={filter}\r\n          onChange={e => setFilter(e.target.value)}\r\n          aria-label=\"Search activities\"\r\n          placeholder=\"Search activities...\"\r\n          style={{\r\n            flex: 1, background: tokens.colors.background.surface,\r\n            color: tokens.colors.text.primary,\r\n            border: `1px solid ${tokens.colors.border.muted}`,\r\n            borderRadius: tokens.borderRadius.md, padding: '3px 8px', fontSize: tokens.typography.fontSize.xxs,\r\n            fontFamily: tokens.typography.fontFamily.primary,\r\n            transition: 'all 150ms ease',\r\n          }}\r\n        />\r\n        <select\r\n          value={sortBy}\r\n          onChange={e => setSortBy(e.target.value as 'time' | 'status' | 'timeline')}\r\n          aria-label=\"Sort activities\"\r\n          style={{\r\n            background: tokens.colors.background.surface,\r\n            color: tokens.colors.text.secondary,\r\n            border: `1px solid ${tokens.colors.border.muted}`,\r\n            borderRadius: tokens.borderRadius.md, padding: '3px 6px', fontSize: tokens.typography.fontSize.xxs,\r\n            transition: 'all 150ms ease',\r\n          }}\r\n        >\r\n          <option value=\"time\">Sort: Time</option>\r\n          <option value=\"status\">Sort: Status</option>\r\n          <option value=\"timeline\">Sort: Timeline</option>\r\n        </select>\r\n      </div>\r\n\r\n      {/* Activity list */}\r\n      <div ref={listRef} style={{ flex: 1, overflow: 'auto', padding: 8 }}>\r\n        {displayActivities.length === 0 ? (\r\n          <div style={{ textAlign: 'center', color: tokens.colors.text.muted, padding: 40, fontSize: tokens.typography.fontSize.xs }}>\r\n            {filter ? 'No matching activities' : 'No activities scheduled'}\r\n          </div>\r\n        ) : (\r\n          <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>\r\n            {displayActivities.map(a => {\r\n              const color = a.color || getStatusColor(a.status, tokens);\r\n              const hasOverlap = overlaps.has(a.id);\r\n              return (\r\n                <div\r\n                  key={a.id}\r\n                  style={{\r\n                    display: 'grid', gridTemplateColumns: '24px 1fr auto',\r\n                    alignItems: 'center', gap: tokens.spacing.sm,\r\n                    padding: '6px 10px',\r\n                    background: hasOverlap ? `${tokens.colors.status.caution}10` : `${color}08`,\r\n                    borderLeft: `3px solid ${color}`,\r\n                    borderRadius: tokens.borderRadius.md, fontSize: tokens.typography.fontSize.xs, cursor: 'pointer',\r\n                    border: hasOverlap && showOverlapWarning ? `1px solid ${tokens.colors.status.caution}44` : undefined,\r\n                    transition: 'all 150ms ease',\r\n                  }}\r\n                >\r\n                  {/* Status icon */}\r\n                  <div style={{ textAlign: 'center' }}>\r\n                    <span style={{ color, fontSize: tokens.typography.fontSize.sm, fontWeight: 500 }}>{getStatusIcon(a.status)}</span>\r\n                  </div>\r\n                  {/* Info */}\r\n                  <div style={{ overflow: 'hidden' }}>\r\n                    <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 2 }}>\r\n                      <span style={{ fontWeight: 500, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>\r\n                        {a.title}\r\n                      </span>\r\n                      {a.timeline && (\r\n                        <span style={{\r\n                          fontSize: tokens.typography.fontSize.micro, background: tokens.colors.background.surface,\r\n                          padding: `0 ${tokens.spacing.xs}px`, borderRadius: tokens.borderRadius.sm, color: tokens.colors.text.muted,\r\n                        }}>{a.timeline}</span>\r\n                      )}\r\n                      {hasOverlap && showOverlapWarning && (\r\n                        <span style={{ fontSize: tokens.typography.fontSize.micro, color: tokens.colors.status.caution, fontWeight: 500 }}>⚠ OVERLAP</span>\r\n                      )}\r\n                    </div>\r\n                    <div style={{ fontSize: tokens.typography.fontSize.micro, fontFamily: tokens.typography.fontFamily.mono, color: tokens.colors.text.muted }}>\r\n                      {formatDate(a.start)} {formatTime(a.start)}\r\n                      {a.end ? ` → ${formatTime(a.end)}` : ''}\r\n                    </div>\r\n                  </div>\r\n                  {/* Actions */}\r\n                  <div style={{ display: 'flex', gap: 4 }}>\r\n                    {onViewInCalendar && (\r\n                      <button aria-label={`View ${a.title} in calendar`} onClick={() => onViewInCalendar(a)} style={actionBtnStyle(tokens)} title=\"View in Calendar\">Calendar</button>\r\n                    )}\r\n                    {onViewInTimeline && (\r\n                      <button aria-label={`View ${a.title} in timeline`} onClick={() => onViewInTimeline(a)} style={actionBtnStyle(tokens)} title=\"View in Timeline\">Timeline</button>\r\n                    )}\r\n                    {!readOnly && onActivityDelete && (\r\n                      <button aria-label={`Delete ${a.title}`} onClick={() => onActivityDelete(a.id)} style={{ ...actionBtnStyle(tokens), color: tokens.colors.status.critical }} title=\"Delete\">Delete</button>\r\n                    )}\r\n                  </div>\r\n                </div>\r\n              );\r\n            })}\r\n          </div>\r\n        )}\r\n      </div>\r\n\r\n      {/* Footer */}\r\n      <div style={{\r\n        padding: `${tokens.spacing.xs}px ${panelPadX}px`,\r\n        borderTop: `1px solid ${tokens.colors.border.muted}`,\r\n        background: tokens.colors.background.surface,\r\n        fontSize: tokens.typography.fontSize.micro, color: tokens.colors.text.muted,\r\n        display: 'flex', justifyContent: 'space-between',\r\n      }}>\r\n        <span>{displayActivities.length} / {activities.length} activities</span>\r\n        {overlaps.size > 0 && showOverlapWarning && (\r\n          <span style={{ color: tokens.colors.status.caution }}>⚠ {overlaps.size} overlapping activities</span>\r\n        )}\r\n      </div>\r\n    </div>\r\n  );\r\n});\r\n\r\nfunction actionBtnStyle(tokens: ReturnType<typeof useTheme>['tokens']): React.CSSProperties {\r\n  return {\r\n    background: 'transparent', border: `1px solid ${tokens.colors.border.muted}`,\r\n    borderRadius: tokens.borderRadius.sm, padding: `2px ${tokens.spacing.xs}px`, fontSize: tokens.typography.fontSize.xxs, cursor: 'pointer',\r\n    lineHeight: 1,\r\n    transition: 'all 150ms ease',\r\n  };\r\n}\r\n\r\nexport default ActivityPlanner;\r\n"],"names":["ActivityForm","ActivityPlanner"],"mappings":"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"}

package/dist/react/core/{Capture.js → 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 { useCopyToClipboard } from "./CopyButton.js";
+import { useCopyToClipboard } from "../display/CopyButton.js";
 import placeholderImageUrl from "./capture-placeholder.png.js";
-import { useTheme } from "../theme/ThemeProvider.js";
+import { useTheme } from "../../theme/ThemeProvider.js";
 async function generateCanvasFallback() {
   try {
     const size = 256;
@@ -158,7 +158,7 @@ function useCapture(options) {
   const initCesium = useCallback(async () => {
     if (cesiumSourceRef.current || cesiumFailedRef.current) return;
     try {
-      const { createCesiumCaptureSource } = await import("../3d/CesiumCaptureSource.js");
+      const { createCesiumCaptureSource } = await import("../../3d/CesiumCaptureSource.js");
       cesiumSourceRef.current = await createCesiumCaptureSource();
     } catch {
       cesiumFailedRef.current = true;