@zendir/ui 0.1.0

package/dist/react/core/Container.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Container.js","sources":["../../../src/react/core/Container.tsx"],"sourcesContent":["/**\n * @zendir/ui - Container/Card Component\n * \n * Container/Card wrapper following Astro UX Design System.\n * Automatically switches to glassmorphic styling when transparent themes are active.\n * \n * Transparent themes (transparent, transparent-bold):\n * - Glassmorphic panels with blur effect\n * - Colored top border accent\n * - Hover glow effect (like GlassCard)\n * - transparent-bold has 2px top border\n * \n * @example\n * ```tsx\n * <Container>Simple container</Container>\n * <Container title=\"Spacecraft Status\" status=\"normal\">Content</Container>\n * <Container title=\"Power System\" icon=\"solar\" iconStatus=\"normal\">With status</Container>\n * <Container title=\"Custom Color\" icon=\"thermal\" iconColor=\"#FF6B6B\">Custom color</Container>\n * ```\n */\n\nimport React, { memo, useCallback } from 'react';\nimport { useTheme } from '../theme';\nimport { classNames, addAlpha, type StatusLevel } from '../utils';\nimport { AstroIcon, type AstroIconName } from './AstroIcon';\nimport { HeaderIconWithStatus } from './HeaderIconWithStatus';\nimport { CardHeader } from './CardHeader';\nimport { useBreakpoint } from './layout/useBreakpoint';\n\nexport type ContainerVariant = 'default' | 'elevated' | 'outlined' | 'ghost' | 'glass' | 'glass-dark' | 'glass-light';\nexport type ContainerPadding = 'none' | 'sm' | 'md' | 'lg';\n\n/** Status colors matching Astro UXD status system */\nconst STATUS_COLORS: Record<StatusLevel, string> = {\n  off: '#a4abb6',\n  standby: '#2dccff',\n  normal: '#56f000',\n  caution: '#fce83a',\n  serious: '#ffb302',\n  critical: '#ff3838',\n};\n\n/** Status descriptions for tooltips (default synonyms from AstroUXDS) */\nconst STATUS_DESCRIPTIONS: Record<StatusLevel, string> = {\n  off: 'Off, unavailable, disabled',\n  standby: 'Standby, available, enabled',\n  normal: 'Normal, ok, satisfactory',\n  caution: 'Caution, warning, unstable',\n  serious: 'Serious, error, needs attention',\n  critical: 'Critical, emergency, urgent',\n};\n\n/** Status symbol shapes following AstroUXDS guidelines */\ntype _StatusShape = 'circle' | 'square' | 'diamond' | 'triangle' | 'circle-hollow';\n\nexport interface ContainerProps {\n  /** Visual variant */\n  variant?: ContainerVariant;\n  /** Padding size */\n  padding?: ContainerPadding;\n  /** Container title */\n  title?: React.ReactNode;\n  /** Subtitle or description */\n  subtitle?: React.ReactNode;\n  /** Status indicator (affects left border in non-glass mode) */\n  status?: StatusLevel;\n  /** Header actions (buttons, etc.) */\n  actions?: React.ReactNode;\n  /** Full height */\n  fullHeight?: boolean;\n  /**\n   * Clip overflowing content area when fullHeight is enabled.\n   * Keep false for form cards so wrapped rows can expand naturally.\n   */\n  clipContent?: boolean;\n  /** Loading state */\n  loading?: boolean;\n  /** Children */\n  children: React.ReactNode;\n  /** Custom className */\n  className?: string;\n  /** Custom style */\n  style?: React.CSSProperties;\n  /** Click handler */\n  onClick?: () => void;\n  /** Disable auto-glass effect in transparent theme */\n  disableAutoGlass?: boolean;\n  /** Icon to display in header (Astro icon name) */\n  icon?: AstroIconName;\n  /** Icon status - shows status symbol and colors icon accordingly */\n  iconStatus?: StatusLevel;\n  /** Custom status message shown in tooltip (overrides default description) */\n  statusMessage?: string;\n  /** Custom icon color (overrides iconStatus and theme color) */\n  iconColor?: string;\n  /** Custom accent color for glass mode (title, line, etc.) */\n  accentColor?: string;\n}\n\n/**\n * Icon wrapper with status tooltip - triggers tooltip on hover over entire icon area\n */\nfunction IconWithStatusTooltip({\n  icon,\n  iconColor,\n  iconStatus,\n  statusMessage,\n  iconSize = 20,\n}: {\n  icon: string;\n  iconColor: string;\n  iconStatus?: StatusLevel;\n  statusMessage?: string;\n  iconSize?: number;\n}): React.ReactElement {\n  const [isHovered, setIsHovered] = React.useState(false);\n  const color = iconStatus ? STATUS_COLORS[iconStatus] : iconColor;\n  const defaultMessage = iconStatus ? STATUS_DESCRIPTIONS[iconStatus] : '';\n  const tooltipText = statusMessage || defaultMessage;\n  const statusLabel = iconStatus ? iconStatus.charAt(0).toUpperCase() + iconStatus.slice(1) : '';\n  \n  return (\n    <div\n      style={{\n        position: 'relative',\n        display: 'inline-flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        flexShrink: 0,\n        cursor: iconStatus ? 'help' : 'default',\n      }}\n      onMouseEnter={() => iconStatus && setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n    >\n      {/* Use HeaderIconWithStatus for consistent sizing with SpacecraftCard */}\n      {iconStatus ? (\n        <HeaderIconWithStatus\n          icon={icon as AstroIconName}\n          status={iconStatus}\n          size={iconSize}\n          statusColor={iconColor}\n        />\n      ) : (\n        <AstroIcon \n          name={icon} \n          size={iconSize}\n          color={iconColor}\n        />\n      )}\n      {/* Tooltip popup - triggers on whole icon area hover */}\n      {iconStatus && isHovered && (\n        <div\n          style={{\n            position: 'absolute',\n            bottom: 'calc(100% + 12px)',\n            left: '50%',\n            transform: 'translateX(-50%)',\n            padding: '8px 12px',\n            backgroundColor: 'rgba(10, 15, 25, 0.95)',\n            border: `1px solid ${color}`,\n            borderRadius: '4px',\n            boxShadow: `0 0 12px ${color}40, 0 4px 12px rgba(0,0,0,0.4)`,\n            zIndex: 1000,\n            whiteSpace: 'nowrap',\n            pointerEvents: 'none',\n            minWidth: '150px',\n          }}\n        >\n          {/* Status label */}\n          <div style={{ \n            fontSize: '0.6875rem', // 11px in rem \n            fontWeight: 500, // AstroUXDS medium for labels\n            color: color,\n            marginBottom: '4px',\n            textTransform: 'uppercase',\n            letterSpacing: '0.5px',\n          }}>\n            {statusLabel}\n          </div>\n          {/* Status message */}\n          <div style={{ \n            fontSize: '0.75rem', // 12px in rem\n            color: 'rgba(255,255,255,0.9)',\n            lineHeight: 1.4,\n          }}>\n            {tooltipText}\n          </div>\n          {/* Arrow */}\n          <div style={{\n            position: 'absolute',\n            bottom: '-6px',\n            left: '50%',\n            transform: 'translateX(-50%) rotate(45deg)',\n            width: '10px',\n            height: '10px',\n            backgroundColor: 'rgba(10, 15, 25, 0.95)',\n            borderRight: `1px solid ${color}`,\n            borderBottom: `1px solid ${color}`,\n          }} />\n        </div>\n      )}\n    </div>\n  );\n}\n\n/** \n * Renders AstroUXDS-compliant status symbol with proper shape\n * Shapes: Critical=triangle, Serious=diamond, Caution=square, Normal=circle, Standby=ring, Off=small-circle\n */\nfunction StatusSymbol({ \n  status, \n  size = 8, \n  message,\n  showTooltip = false,\n}: { \n  status: StatusLevel; \n  size?: number; \n  message?: string;\n  showTooltip?: boolean;\n}): React.ReactElement {\n  const [isHovered, setIsHovered] = React.useState(false);\n  const color = STATUS_COLORS[status];\n  const defaultMessage = STATUS_DESCRIPTIONS[status];\n  const tooltipText = message || defaultMessage;\n  const statusLabel = status.charAt(0).toUpperCase() + status.slice(1);\n  \n  // Shape rendering based on Astro UX dual-coded status levels\n  const renderShape = () => {\n    const h = size / 2;\n    const glow = `drop-shadow(0 0 3px ${color})`;\n    switch (status) {\n      case 'critical':\n        // Triangle pointing down\n        return (\n          <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} style={{ filter: glow }}>\n            <polygon points={`${h},${size} 0,0 ${size},0`} fill={color} />\n          </svg>\n        );\n      case 'serious':\n        // Diamond (rotated square)\n        return (\n          <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} style={{ filter: glow }}>\n            <polygon points={`${h},0 ${size},${h} ${h},${size} 0,${h}`} fill={color} />\n          </svg>\n        );\n      case 'caution':\n        // Filled square\n        return (\n          <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} style={{ filter: glow }}>\n            <rect width={size} height={size} fill={color} />\n          </svg>\n        );\n      case 'normal':\n        // Filled circle\n        return (\n          <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} style={{ filter: glow }}>\n            <circle cx={h} cy={h} r={h} fill={color} />\n          </svg>\n        );\n      case 'standby':\n        // Ring (donut) — per official Astro UXDS\n        return (\n          <svg width={size} height={size} viewBox=\"0 0 12 12\" style={{ filter: glow }}>\n            <circle cx=\"6\" cy=\"6\" r=\"3.5\" fill=\"none\" stroke={color} strokeWidth=\"2\" />\n          </svg>\n        );\n      case 'off':\n      default:\n        // Small filled circle — per official Astro UXDS\n        return (\n          <svg width={size} height={size} viewBox=\"0 0 12 12\" style={{ filter: glow }}>\n            <circle cx=\"6\" cy=\"6\" r=\"3\" fill={color} />\n          </svg>\n        );\n    }\n  };\n\n  return (\n    <div \n      style={{\n        position: 'relative',\n        display: 'inline-flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        cursor: showTooltip ? 'help' : 'default',\n      }}\n      onMouseEnter={() => showTooltip && setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n    >\n      {renderShape()}\n      {/* Custom tooltip popup */}\n      {showTooltip && isHovered && (\n        <div\n          style={{\n            position: 'absolute',\n            bottom: 'calc(100% + 8px)',\n            left: '50%',\n            transform: 'translateX(-50%)',\n            padding: '8px 12px',\n            backgroundColor: 'rgba(10, 15, 25, 0.95)',\n            border: `1px solid ${color}`,\n            borderRadius: '4px',\n            boxShadow: `0 0 12px ${color}40, 0 4px 12px rgba(0,0,0,0.4)`,\n            zIndex: 1000,\n            whiteSpace: 'nowrap',\n            pointerEvents: 'none',\n            minWidth: '150px',\n          }}\n        >\n          {/* Status label */}\n          <div style={{ \n            fontSize: '0.6875rem', // 11px in rem \n            fontWeight: 500, // AstroUXDS medium for labels\n            color: color,\n            marginBottom: '4px',\n            textTransform: 'uppercase',\n            letterSpacing: '0.5px',\n          }}>\n            {statusLabel}\n          </div>\n          {/* Status message */}\n          <div style={{ \n            fontSize: '0.75rem', // 12px in rem\n            color: 'rgba(255,255,255,0.9)',\n            lineHeight: 1.4,\n          }}>\n            {tooltipText}\n          </div>\n          {/* Arrow */}\n          <div style={{\n            position: 'absolute',\n            bottom: '-6px',\n            left: '50%',\n            transform: 'translateX(-50%) rotate(45deg)',\n            width: '10px',\n            height: '10px',\n            backgroundColor: 'rgba(10, 15, 25, 0.95)',\n            borderRight: `1px solid ${color}`,\n            borderBottom: `1px solid ${color}`,\n          }} />\n        </div>\n      )}\n    </div>\n  );\n}\n\n/**\n * StatusBadge - Compact status indicator for accent lines\n * Shows colored badge with status shape at end of accent line\n */\nfunction StatusBadge({ \n  status, \n  tokens: _tokens,\n  size = 'bold',\n}: { \n  status: StatusLevel; \n  tokens: any;\n  size?: 'bold' | 'minimal';\n}): React.ReactElement {\n  const color = STATUS_COLORS[status];\n  const label = status.charAt(0).toUpperCase() + status.slice(1);\n  const isBold = size === 'bold';\n  \n  return (\n    <span style={{\n      display: 'inline-flex',\n      alignItems: 'center',\n      gap: isBold ? '6px' : '4px',\n      padding: isBold ? '3px 10px' : '2px 8px',\n      borderRadius: '12px',\n      fontSize: isBold ? '11px' : '10px',\n      fontWeight: 500,\n      backgroundColor: `${color}20`,\n      color: color,\n      flexShrink: 0,\n      textTransform: 'uppercase',\n      letterSpacing: '0.3px',\n    }}>\n      {/* Status shape */}\n      <StatusSymbol status={status} size={isBold ? 6 : 5} />\n      {label}\n    </span>\n  );\n}\n\nexport const Container = memo(function Container({\n  variant = 'default',\n  padding = 'md',\n  title,\n  subtitle,\n  status,\n  actions,\n  fullHeight = false,\n  clipContent = true,\n  loading = false,\n  children,\n  className = '',\n  style,\n  onClick,\n  disableAutoGlass = false,\n  icon,\n  iconStatus,\n  statusMessage,\n  iconColor,\n  accentColor,\n}: ContainerProps): React.ReactElement {\n  const { tokens, theme } = useTheme();\n  const { isMobile } = useBreakpoint();\n  \n  // Theme detection\n  const _isTransparentTheme = theme === 'transparent' || theme === 'transparent-bold' || theme === 'transparent-minimal';\n  const isBoldVariant = theme === 'transparent-bold';\n  const isMinimalVariant = theme === 'transparent-minimal';\n  \n  // Glass mode with accent styling ONLY for bold/minimal themes\n  // Normal \"transparent\" (Glass) theme uses simpler styling without accent borders\n  const useGlassMode = (isBoldVariant || isMinimalVariant) && !disableAutoGlass && !variant.startsWith('glass');\n  \n  // Simple glass mode for normal \"transparent\" theme (no accent borders)\n  const useSimpleGlass = theme === 'transparent' && !disableAutoGlass && !variant.startsWith('glass');\n  \n  // Default accent color: bold/minimal themes use theme accent (Zendir purple)\n  const defaultAccentColor = tokens.colors.accent.primary;\n  const glassAccentColor = accentColor || defaultAccentColor;\n  const glassAccentMuted = `${glassAccentColor}66`;\n  const glassGradient = `linear-gradient(135deg, ${glassAccentColor}10 0%, ${glassAccentColor}03 100%)`;\n  \n  // Determine icon color: custom > status > accent\n  const resolvedIconColor = iconColor || (iconStatus ? STATUS_COLORS[iconStatus] : glassAccentColor);\n  const _iconColorMuted = `${resolvedIconColor}66`;\n  \n  const paddingConfig = {\n    none: '0',\n    sm: isMobile ? tokens.spacing.xs : tokens.spacing.sm,\n    md: isMobile ? tokens.spacing.sm : tokens.spacing.md,\n    lg: isMobile ? tokens.spacing.md : tokens.spacing.lg,\n  };\n\n  const headingConfig = tokens.layout?.card?.heading ?? {\n    iconSize: 20,\n    iconSizeCompact: 16,\n    titleFontSize: '1.125rem',\n    titleFontSizeChart: '0.875rem',\n    titleFontWeight: 500,\n    gap: 8,\n  };\n  \n  const variantStyles: Record<ContainerVariant, React.CSSProperties> = {\n    default: {\n      backgroundColor: tokens.colors.background.surface,\n      border: `1px solid ${tokens.colors.border.muted}`,\n      boxShadow: 'none',\n    },\n    elevated: {\n      backgroundColor: tokens.colors.background.surface,\n      border: 'none',\n      boxShadow: tokens.shadows.md,\n    },\n    outlined: {\n      backgroundColor: 'transparent',\n      border: `1px solid ${tokens.colors.border.muted}`,\n      boxShadow: 'none',\n    },\n    ghost: {\n      backgroundColor: 'transparent',\n      border: 'none',\n      boxShadow: 'none',\n    },\n    // Glass variants - transparent with blur\n    glass: {\n      backgroundColor: 'rgba(15, 20, 35, 0.85)',\n      backdropFilter: 'blur(12px)',\n      WebkitBackdropFilter: 'blur(12px)',\n      border: '1px solid rgba(0, 212, 255, 0.25)',\n      boxShadow: 'none',\n    } as React.CSSProperties,\n    'glass-dark': {\n      backgroundColor: 'rgba(0, 0, 0, 0.7)',\n      backdropFilter: 'blur(16px)',\n      WebkitBackdropFilter: 'blur(16px)',\n      border: '1px solid rgba(100, 130, 160, 0.2)',\n      boxShadow: 'none',\n    } as React.CSSProperties,\n    'glass-light': {\n      backgroundColor: 'rgba(255, 255, 255, 0.15)',\n      backdropFilter: 'blur(12px)',\n      WebkitBackdropFilter: 'blur(12px)',\n      border: '1px solid rgba(255, 255, 255, 0.25)',\n      boxShadow: 'none',\n    } as React.CSSProperties,\n  };\n  \n  // Glow color for hover effect (like GlassCard)\n  const glowColor = accentColor \n    ? `${accentColor}66` \n    : 'rgba(0, 212, 255, 0.4)';\n\n  // Glass mode overrides for BOLD/MINIMAL themes (Glassmorphic Panels with accent borders)\n  const glassOverrides: React.CSSProperties = useGlassMode ? {\n    backgroundColor: 'rgba(10, 15, 25, 0.35)',\n    backdropFilter: 'blur(12px)',\n    WebkitBackdropFilter: 'blur(12px)',\n    border: `1px solid ${glassAccentMuted}`,\n    borderTop: isBoldVariant ? `2px solid ${glassAccentColor}` : `1px solid ${glassAccentColor}`,\n    transition: 'all 0.3s ease-out, box-shadow 0.3s ease-out',\n  } as React.CSSProperties : {};\n  \n  // Simple glass overrides for normal \"transparent\" (Glass) theme — match top cards (ISS): transparent + blur\n  const simpleGlassOverrides: React.CSSProperties = useSimpleGlass ? {\n    backgroundColor: 'transparent',\n    backdropFilter: 'blur(12px)',\n    WebkitBackdropFilter: 'blur(12px)',\n    border: `1px solid ${tokens.colors.border.muted}`,\n    transition: 'all 0.3s ease-out',\n  } as React.CSSProperties : {};\n\n  // Hover handlers for glow effect (like GlassCard)\n  const handleMouseEnter = useCallback((e: React.MouseEvent<HTMLDivElement>) => {\n    if (useGlassMode) {\n      e.currentTarget.style.boxShadow = `0 0 30px ${glowColor}, 0 4px 20px rgba(0,0,0,0.3)`;\n    }\n  }, [useGlassMode, glowColor]);\n\n  const handleMouseLeave = useCallback((e: React.MouseEvent<HTMLDivElement>) => {\n    if (useGlassMode) {\n      e.currentTarget.style.boxShadow = 'none';\n    }\n  }, [useGlassMode]);\n  \n  const statusColor = status ? tokens.colors.status[status] : undefined;\n  const isInteractive = !!onClick;\n  \n  return (\n    <div\n      className={classNames(\n        'zendir-container', \n        `zendir-container--${variant}`,\n        useGlassMode && 'zendir-container--auto-glass',\n        className\n      )}\n      onClick={onClick}\n      role={isInteractive ? 'button' : undefined}\n      tabIndex={isInteractive ? 0 : undefined}\n      onKeyDown={onClick ? (e: React.KeyboardEvent) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onClick(); } } : undefined}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      style={{\n        borderRadius: tokens.borderRadius.lg,\n        overflow: 'hidden',\n        position: 'relative',\n        height: fullHeight ? '100%' : 'auto',\n        display: 'flex',\n        flexDirection: 'column',\n        cursor: isInteractive ? 'pointer' : 'default',\n        transition: 'all 0.3s ease-out',\n        borderLeft: statusColor ? `4px solid ${statusColor}` : undefined,\n        ...variantStyles[variant],\n        ...simpleGlassOverrides, // Normal Glass theme\n        ...glassOverrides,       // Bold/Minimal themes (overrides simpleGlass if both)\n        ...style,\n      }}\n    >\n      {/* Glass gradient overlay for bold/minimal transparent themes */}\n      {useGlassMode && (\n        <div\n          style={{\n            position: 'absolute',\n            inset: 0,\n            background: glassGradient,\n            pointerEvents: 'none',\n            zIndex: 0,\n          }}\n        />\n      )}\n      \n      {/* Loading overlay */}\n      {loading && (\n        <div\n          style={{\n            position: 'absolute',\n            inset: 0,\n            backgroundColor: addAlpha(tokens.colors.background.surface, 0.5),\n            display: 'flex',\n            alignItems: 'center',\n            justifyContent: 'center',\n            zIndex: 10,\n          }}\n        >\n          <svg\n            width=\"32\"\n            height=\"32\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            style={{ animation: 'spin 1s linear infinite' }}\n          >\n            <circle\n              cx=\"12\"\n              cy=\"12\"\n              r=\"10\"\n              stroke={tokens.colors.accent.primary}\n              strokeWidth=\"3\"\n              strokeDasharray=\"31.4 31.4\"\n              strokeDashoffset=\"10\"\n            />\n          </svg>\n          <style>\n            {`@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }`}\n          </style>\n        </div>\n      )}\n      \n      {/* Header - Glass mode BOLD variant (matching GlassCard style exactly) */}\n      {(title || actions) && useGlassMode && isBoldVariant && (\n        <div\n          style={{\n            position: 'relative',\n            zIndex: 1,\n          }}\n        >\n          {/* Title row */}\n          <div \n            style={{ \n              display: 'flex', \n              alignItems: 'center', \n              justifyContent: 'space-between',\n              padding: `16px ${paddingConfig[padding]} 0`,\n            }}\n          >\n            <div style={{ display: 'flex', alignItems: 'center', gap: headingConfig.gap }}>\n              {/* Icon with optional status symbol - full area triggers tooltip */}\n              {icon && (\n                <IconWithStatusTooltip\n                  icon={icon}\n                  iconColor={resolvedIconColor}\n                  iconStatus={iconStatus}\n                  statusMessage={statusMessage}\n                  iconSize={headingConfig.iconSize}\n                />\n              )}\n              <h3\n                style={{\n                  margin: 0,\n                  fontSize: headingConfig.titleFontSize,\n                  fontWeight: headingConfig.titleFontWeight,\n                  color: glassAccentColor,\n                  letterSpacing: '0.5px',\n                  textShadow: `0 0 20px ${glassAccentMuted}`,\n                }}\n              >\n                {title}\n              </h3>\n            </div>\n            {actions && (\n              <div style={{ display: 'flex', gap: tokens.spacing.xs }}>\n                {actions}\n              </div>\n            )}\n          </div>\n          \n          {subtitle && (\n            <p\n              style={{\n                margin: 0,\n                padding: `${tokens.spacing.xs} ${paddingConfig[padding]} 0`,\n                fontSize: tokens.typography.fontSize.sm,\n                color: tokens.colors.text.secondary,\n              }}\n            >\n              {subtitle}\n            </p>\n          )}\n          \n          {/* Accent line with optional status badge */}\n          <div\n            style={{\n              display: 'flex',\n              alignItems: 'center',\n              gap: tokens.spacing.sm,\n              padding: `12px ${paddingConfig[padding]} 0`,\n              marginBottom: tokens.spacing.sm,\n            }}\n          >\n            {/* Main accent line with gradient */}\n            <div\n              style={{\n                flex: 1,\n                height: '2px',\n                background: `linear-gradient(90deg, ${glassAccentColor} 0%, ${glassAccentMuted} 70%, ${glassAccentMuted}20 100%)`,\n                boxShadow: `0 0 8px ${glassAccentMuted}`,\n              }}\n            />\n            {/* Status badge at the end if status is set */}\n            {iconStatus && iconStatus !== 'off' && (\n              <StatusBadge status={iconStatus} tokens={tokens} size=\"bold\" />\n            )}\n          </div>\n        </div>\n      )}\n      \n      {/* Header - Glass mode MINIMAL variant (inline thin line) */}\n      {(title || actions) && useGlassMode && !isBoldVariant && (\n        <div\n          style={{\n            display: 'flex',\n            alignItems: 'center',\n            padding: `${tokens.spacing.sm} ${paddingConfig[padding]} 0`,\n            marginBottom: tokens.spacing.sm,\n            position: 'relative',\n            zIndex: 1,\n          }}\n        >\n          {/* Icon with optional status symbol - full area triggers tooltip */}\n          {icon && (\n            <div style={{ display: 'flex', alignItems: 'center', marginRight: tokens.spacing.sm }}>\n              <IconWithStatusTooltip\n                icon={icon}\n                iconColor={resolvedIconColor}\n                iconStatus={iconStatus}\n                statusMessage={statusMessage}\n                iconSize={headingConfig.iconSizeCompact}\n              />\n            </div>\n          )}\n          \n          {/* Title — card heading system */}\n          {title && (\n            <h3\n              style={{\n                margin: 0,\n                fontSize: headingConfig.titleFontSize,\n                fontWeight: headingConfig.titleFontWeight,\n                color: glassAccentColor,\n                textShadow: `0 0 16px ${glassAccentMuted}`,\n                letterSpacing: '0.02em',\n                whiteSpace: 'nowrap',\n                marginRight: '12px',\n              }}\n            >\n              {title}\n            </h3>\n          )}\n          \n          {/* Accent line - inline after title with optional status badge */}\n          <div\n            style={{\n              flex: 1,\n              display: 'flex',\n              alignItems: 'center',\n              gap: tokens.spacing.sm,\n              minWidth: 40,\n            }}\n          >\n            {/* Main gradient line */}\n            <div\n              style={{\n                flex: 1,\n                height: '1px',\n                background: `linear-gradient(90deg, ${glassAccentColor} 0%, ${glassAccentMuted} 70%, ${glassAccentMuted}20 100%)`,\n              }}\n            />\n            {/* Status badge at the end if status is set */}\n            {iconStatus && iconStatus !== 'off' && (\n              <StatusBadge status={iconStatus} tokens={tokens} size=\"minimal\" />\n            )}\n          </div>\n          \n          {actions && (\n            <div style={{ display: 'flex', gap: tokens.spacing.xs, flexShrink: 0, marginLeft: '12px' }}>\n              {actions}\n            </div>\n          )}\n        </div>\n      )}\n      \n      {/* Subtitle for glass mode MINIMAL - separate row */}\n      {subtitle && useGlassMode && !isBoldVariant && (\n        <p\n          style={{\n            margin: 0,\n            padding: `0 ${paddingConfig[padding]}`,\n            marginBottom: tokens.spacing.sm,\n            fontSize: tokens.typography.fontSize.sm,\n            color: tokens.colors.text.secondary,\n            position: 'relative',\n            zIndex: 1,\n          }}\n        >\n          {subtitle}\n        </p>\n      )}\n      \n      {/* Header - Regular mode (non-glass) - Uses shared CardHeader for consistency */}\n      {(title || actions) && !useGlassMode && (\n        <div\n          style={{\n            padding: `${paddingConfig[padding]} ${paddingConfig[padding]} 0`,\n            position: 'relative',\n            zIndex: 1,\n          }}\n        >\n          <CardHeader\n            icon={icon || (iconStatus ? 'mission' : '')}\n            title={typeof title === 'string' ? title : String(title || '')}\n            subtitle={typeof subtitle === 'string' ? subtitle : subtitle ? String(subtitle) : undefined}\n            status={iconStatus || status}\n            iconColor={iconColor}\n            iconSize={headingConfig.iconSize}\n            hideStatusIndicator={!icon && !iconStatus && !status}\n            rightSlot={actions}\n            style={{ marginBottom: tokens.spacing.sm }}\n          />\n        </div>\n      )}\n      \n      {/* Content */}\n      <div\n        style={{\n          flex: 1,\n          minHeight: fullHeight ? 0 : undefined,\n          overflow: fullHeight && clipContent ? 'hidden' : undefined,\n          // When fullHeight, become a flex column so any child using flex:1 or height:100%\n          // gets a properly bounded height and scroll containers can work.\n          display: fullHeight ? 'flex' : undefined,\n          flexDirection: fullHeight ? 'column' : undefined,\n          padding: fullHeight ? `${tokens.spacing.xs} 0 0 0` : (title ? `${tokens.spacing.xs} ${paddingConfig[padding]} ${paddingConfig[padding]}` : paddingConfig[padding]),\n          position: 'relative',\n          zIndex: 1,\n        }}\n      >\n        {children}\n      </div>\n    </div>\n  );\n});\n\nexport default Container;\n"],"names":["Container"],"mappings":"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"}

package/dist/react/core/CopyButton.d.ts

@@ -0,0 +1,39 @@
+import { default as React } from 'react';
+
+export interface UseCopyToClipboardReturn {
+    /** Copy text to clipboard */
+    copy: (text: string) => Promise<boolean>;
+    /** True for brief period after successful copy */
+    copied: boolean;
+    /** Error if copy failed */
+    error: string | null;
+}
+/**
+ * Hook for clipboard operations.
+ *
+ * @param resetDelay - Time in ms before `copied` resets to false (default 2000)
+ *
+ * @example
+ * ```tsx
+ * const { copy, copied } = useCopyToClipboard();
+ * ```
+ */
+export declare function useCopyToClipboard(resetDelay?: number): UseCopyToClipboardReturn;
+export interface CopyButtonProps {
+    /** Text to copy */
+    value: string;
+    /** Button label (default: shows icon only) */
+    label?: string;
+    /** Label shown briefly after copy (default: "Copied!") */
+    copiedLabel?: string;
+    /** Size */
+    size?: 'small' | 'medium' | 'large';
+    /** Tooltip text */
+    tooltip?: string;
+    /** Disabled */
+    disabled?: boolean;
+    /** Custom style */
+    style?: React.CSSProperties;
+}
+export declare const CopyButton: React.NamedExoticComponent<CopyButtonProps>;
+export default CopyButton;

package/dist/react/core/CopyButton.js

@@ -0,0 +1,105 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { memo, useState, useRef, useCallback, useEffect } from "react";
+import { useTheme } from "../theme/ThemeProvider.js";
+function useCopyToClipboard(resetDelay = 2e3) {
+  const [copied, setCopied] = useState(false);
+  const [error, setError] = useState(null);
+  const timeoutRef = useRef();
+  const copy = useCallback(async (text) => {
+    try {
+      if (navigator.clipboard && navigator.clipboard.writeText) {
+        await navigator.clipboard.writeText(text);
+      } else {
+        const textarea = document.createElement("textarea");
+        textarea.value = text;
+        textarea.style.cssText = "position:fixed;left:-9999px;top:-9999px;opacity:0";
+        document.body.appendChild(textarea);
+        textarea.select();
+        document.execCommand("copy");
+        document.body.removeChild(textarea);
+      }
+      setCopied(true);
+      setError(null);
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = setTimeout(() => setCopied(false), resetDelay);
+      return true;
+    } catch (err) {
+      const message = err instanceof Error ? err.message : "Copy failed";
+      setError(message);
+      setCopied(false);
+      return false;
+    }
+  }, [resetDelay]);
+  useEffect(() => {
+    return () => {
+      clearTimeout(timeoutRef.current);
+    };
+  }, []);
+  return { copy, copied, error };
+}
+const CopyButton = memo(function CopyButton2({
+  value,
+  label,
+  copiedLabel = "Copied!",
+  size = "medium",
+  tooltip = "Copy to clipboard",
+  disabled = false,
+  style
+}) {
+  const { tokens } = useTheme();
+  const { copy, copied } = useCopyToClipboard();
+  const [isHovered, setIsHovered] = useState(false);
+  const sizeConfig = {
+    small: { height: 28, padding: "4px 8px", fontSize: "0.75rem", iconSize: 14 },
+    medium: { height: 36, padding: "6px 12px", fontSize: "0.875rem", iconSize: 16 },
+    large: { height: 44, padding: "8px 16px", fontSize: "1rem", iconSize: 18 }
+  };
+  const config = sizeConfig[size];
+  const copyIcon = /* @__PURE__ */ jsxs("svg", { width: config.iconSize, height: config.iconSize, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }),
+    /* @__PURE__ */ jsx("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })
+  ] });
+  const checkIcon = /* @__PURE__ */ jsx("svg", { width: config.iconSize, height: config.iconSize, viewBox: "0 0 24 24", fill: "none", stroke: tokens.colors.status.normal, strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" }) });
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: () => !disabled && copy(value),
+      disabled,
+      title: copied ? copiedLabel : tooltip,
+      "aria-label": !label ? copied ? copiedLabel : tooltip : void 0,
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false),
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: "6px",
+        height: config.height,
+        padding: label ? config.padding : `0 ${Math.round(parseInt(config.padding) * 0.6)}px`,
+        fontSize: config.fontSize,
+        fontWeight: 500,
+        fontFamily: tokens.typography.fontFamily.primary,
+        color: copied ? tokens.colors.status.normal : tokens.colors.text.secondary,
+        backgroundColor: isHovered && !disabled ? `${tokens.colors.accent.primary}12` : "transparent",
+        border: `1px solid ${copied ? `${tokens.colors.status.normal}40` : tokens.colors.border.muted}`,
+        borderRadius: tokens.borderRadius.md,
+        cursor: disabled ? "not-allowed" : "pointer",
+        transition: tokens.animation.fast,
+        opacity: disabled ? 0.5 : 1,
+        outline: "none",
+        whiteSpace: "nowrap",
+        ...style
+      },
+      children: [
+        copied ? checkIcon : copyIcon,
+        label && /* @__PURE__ */ jsx("span", { children: copied ? copiedLabel : label })
+      ]
+    }
+  );
+});
+export {
+  CopyButton,
+  useCopyToClipboard
+};
+//# sourceMappingURL=CopyButton.js.map

package/dist/react/core/CopyButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CopyButton.js","sources":["../../../src/react/core/CopyButton.tsx"],"sourcesContent":["/**\r\n * @zendir/ui - Clipboard Utilities\r\n * \r\n * Copy-to-clipboard hook and button component. Used universally in operator\r\n * dashboards for sharing configuration URLs, copying telemetry values,\r\n * exporting command IDs.\r\n * \r\n * @example\r\n * ```tsx\r\n * // Hook\r\n * const { copy, copied } = useCopyToClipboard();\r\n * <Button onClick={() => copy(configUrl)}>\r\n *   {copied ? 'Copied!' : 'Copy URL'}\r\n * </Button>\r\n * \r\n * // Component\r\n * <CopyButton value={telemetryValue} label=\"Copy Value\" />\r\n * <CopyButton value={shareUrl} size=\"small\" />\r\n * ```\r\n */\r\n\r\nimport React, { memo, useState, useCallback, useRef, useEffect } from 'react';\r\nimport { useTheme } from '../theme';\r\n\r\n// ─── Hook ────────────────────────────────────────────────────────────────────\r\n\r\nexport interface UseCopyToClipboardReturn {\r\n  /** Copy text to clipboard */\r\n  copy: (text: string) => Promise<boolean>;\r\n  /** True for brief period after successful copy */\r\n  copied: boolean;\r\n  /** Error if copy failed */\r\n  error: string | null;\r\n}\r\n\r\n/**\r\n * Hook for clipboard operations.\r\n * \r\n * @param resetDelay - Time in ms before `copied` resets to false (default 2000)\r\n * \r\n * @example\r\n * ```tsx\r\n * const { copy, copied } = useCopyToClipboard();\r\n * ```\r\n */\r\nexport function useCopyToClipboard(resetDelay = 2000): UseCopyToClipboardReturn {\r\n  const [copied, setCopied] = useState(false);\r\n  const [error, setError] = useState<string | null>(null);\r\n  const timeoutRef = useRef<ReturnType<typeof setTimeout>>();\r\n  \r\n  const copy = useCallback(async (text: string): Promise<boolean> => {\r\n    try {\r\n      if (navigator.clipboard && navigator.clipboard.writeText) {\r\n        await navigator.clipboard.writeText(text);\r\n      } else {\r\n        // Fallback for older browsers / non-HTTPS\r\n        const textarea = document.createElement('textarea');\r\n        textarea.value = text;\r\n        textarea.style.cssText = 'position:fixed;left:-9999px;top:-9999px;opacity:0';\r\n        document.body.appendChild(textarea);\r\n        textarea.select();\r\n        document.execCommand('copy');\r\n        document.body.removeChild(textarea);\r\n      }\r\n      \r\n      setCopied(true);\r\n      setError(null);\r\n      clearTimeout(timeoutRef.current);\r\n      timeoutRef.current = setTimeout(() => setCopied(false), resetDelay);\r\n      return true;\r\n    } catch (err) {\r\n      const message = err instanceof Error ? err.message : 'Copy failed';\r\n      setError(message);\r\n      setCopied(false);\r\n      return false;\r\n    }\r\n  }, [resetDelay]);\r\n  \r\n  // Cleanup on unmount\r\n  useEffect(() => {\r\n    return () => { clearTimeout(timeoutRef.current); };\r\n  }, []);\r\n  \r\n  return { copy, copied, error };\r\n}\r\n\r\n// ─── Component ───────────────────────────────────────────────────────────────\r\n\r\nexport interface CopyButtonProps {\r\n  /** Text to copy */\r\n  value: string;\r\n  /** Button label (default: shows icon only) */\r\n  label?: string;\r\n  /** Label shown briefly after copy (default: \"Copied!\") */\r\n  copiedLabel?: string;\r\n  /** Size */\r\n  size?: 'small' | 'medium' | 'large';\r\n  /** Tooltip text */\r\n  tooltip?: string;\r\n  /** Disabled */\r\n  disabled?: boolean;\r\n  /** Custom style */\r\n  style?: React.CSSProperties;\r\n}\r\n\r\nexport const CopyButton = memo(function CopyButton({\r\n  value,\r\n  label,\r\n  copiedLabel = 'Copied!',\r\n  size = 'medium',\r\n  tooltip = 'Copy to clipboard',\r\n  disabled = false,\r\n  style,\r\n}: CopyButtonProps): React.ReactElement {\r\n  const { tokens } = useTheme();\r\n  const { copy, copied } = useCopyToClipboard();\r\n  const [isHovered, setIsHovered] = useState(false);\r\n  \r\n  const sizeConfig = {\r\n    small: { height: 28, padding: '4px 8px', fontSize: '0.75rem', iconSize: 14 },\r\n    medium: { height: 36, padding: '6px 12px', fontSize: '0.875rem', iconSize: 16 },\r\n    large: { height: 44, padding: '8px 16px', fontSize: '1rem', iconSize: 18 },\r\n  };\r\n  const config = sizeConfig[size];\r\n  \r\n  // Copy icon (two overlapping rectangles)\r\n  const copyIcon = (\r\n    <svg width={config.iconSize} height={config.iconSize} viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\r\n      <rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\" ry=\"2\" />\r\n      <path d=\"M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1\" />\r\n    </svg>\r\n  );\r\n  \r\n  // Checkmark icon\r\n  const checkIcon = (\r\n    <svg width={config.iconSize} height={config.iconSize} viewBox=\"0 0 24 24\" fill=\"none\" stroke={tokens.colors.status.normal} strokeWidth=\"2.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\r\n      <polyline points=\"20 6 9 17 4 12\" />\r\n    </svg>\r\n  );\r\n  \r\n  return (\r\n    <button\r\n      type=\"button\"\r\n      onClick={() => !disabled && copy(value)}\r\n      disabled={disabled}\r\n      title={copied ? copiedLabel : tooltip}\r\n      aria-label={!label ? (copied ? copiedLabel : tooltip) : undefined}\r\n      onMouseEnter={() => setIsHovered(true)}\r\n      onMouseLeave={() => setIsHovered(false)}\r\n      style={{\r\n        display: 'inline-flex',\r\n        alignItems: 'center',\r\n        justifyContent: 'center',\r\n        gap: '6px',\r\n        height: config.height,\r\n        padding: label ? config.padding : `0 ${Math.round(parseInt(config.padding) * 0.6)}px`,\r\n        fontSize: config.fontSize,\r\n        fontWeight: 500,\r\n        fontFamily: tokens.typography.fontFamily.primary,\r\n        color: copied\r\n          ? tokens.colors.status.normal\r\n          : tokens.colors.text.secondary,\r\n        backgroundColor: isHovered && !disabled\r\n          ? `${tokens.colors.accent.primary}12`\r\n          : 'transparent',\r\n        border: `1px solid ${copied ? `${tokens.colors.status.normal}40` : tokens.colors.border.muted}`,\r\n        borderRadius: tokens.borderRadius.md,\r\n        cursor: disabled ? 'not-allowed' : 'pointer',\r\n        transition: tokens.animation.fast,\r\n        opacity: disabled ? 0.5 : 1,\r\n        outline: 'none',\r\n        whiteSpace: 'nowrap',\r\n        ...style,\r\n      }}\r\n    >\r\n      {copied ? checkIcon : copyIcon}\r\n      {label && <span>{copied ? copiedLabel : label}</span>}\r\n    </button>\r\n  );\r\n});\r\n\r\nexport default CopyButton;\r\n"],"names":["CopyButton"],"mappings":"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"}

package/dist/react/core/DataTable.d.ts

@@ -0,0 +1,113 @@
+import { default as React } from 'react';
+import { TooltipPlacement } from './Tooltip';
+
+export interface DataTableColumn<T = Record<string, unknown>> {
+    /** Key in data object */
+    key: string;
+    /** Column header text */
+    header: string;
+    /** Column width (CSS value or number for px) */
+    width?: string | number;
+    /** Text alignment */
+    align?: 'left' | 'center' | 'right';
+    /** Use monospace font (good for numbers) */
+    mono?: boolean;
+    /** Custom cell renderer */
+    render?: (value: unknown, row: T, index: number) => React.ReactNode;
+    /** Hide column on mobile */
+    hideOnMobile?: boolean;
+    /** Tooltip for the column header (explains what this column represents) */
+    headerTooltip?: string;
+    /** Per-cell tooltip — return string or ReactNode, or undefined to skip */
+    cellTooltip?: (value: unknown, row: T, index: number) => React.ReactNode | undefined;
+}
+export interface DataTableProps<T = Record<string, unknown>> {
+    /** Column definitions */
+    columns: DataTableColumn<T>[];
+    /** Data rows */
+    data: T[];
+    /** Key field for React keys (default: index) */
+    keyField?: string;
+    /** Group rows by this field */
+    groupBy?: string;
+    /** Allow expanding/collapsing groups */
+    expandable?: boolean;
+    /** Default expanded state for groups */
+    defaultExpanded?: boolean;
+    /** Striped rows */
+    striped?: boolean;
+    /** Compact row padding */
+    compact?: boolean;
+    /** Show header row */
+    showHeader?: boolean;
+    /** Empty state message */
+    emptyMessage?: string;
+    /** Row click handler */
+    onRowClick?: (row: T, index: number) => void;
+    /** Simple string tooltip for each row (legacy — uses native title) */
+    rowTooltip?: (row: T) => string | undefined;
+    /** Rich tooltip content for each row — renders in a portal-based Tooltip */
+    rowTooltipContent?: (row: T, index: number) => React.ReactNode | undefined;
+    /** Placement for row and cell tooltips (default: 'top') */
+    tooltipPlacement?: TooltipPlacement;
+    /** Delay before tooltips appear in ms (default: 300) */
+    tooltipDelay?: number;
+    /** Max height with scroll */
+    maxHeight?: string | number;
+    /** Color for boolean ✓/✗ values (e.g. '#fff' for white). Defaults to text.primary or row status. */
+    booleanColor?: string;
+    /** Optional row status key or getter — boolean cells use this row's status color when set (matches white/status design). */
+    getRowStatus?: (row: T, index: number) => 'normal' | 'caution' | 'serious' | 'critical' | 'standby' | 'off' | undefined;
+    /** Custom style */
+    style?: React.CSSProperties;
+}
+export interface DataTableRowDetailField {
+    /** Field label */
+    label: string;
+    /** Field value (string, number, or ReactNode for custom rendering) */
+    value: React.ReactNode;
+    /** Optional status color for the value */
+    status?: 'normal' | 'caution' | 'serious' | 'critical' | 'standby' | 'off';
+    /** Use monospace font for this value */
+    mono?: boolean;
+}
+export interface DataTableRowDetailProps {
+    /** Title shown at the top of the tooltip */
+    title?: React.ReactNode;
+    /** Optional subtitle / secondary info */
+    subtitle?: React.ReactNode;
+    /** Structured key-value fields to display */
+    fields?: DataTableRowDetailField[];
+    /** Optional footer content (timestamps, actions, etc.) */
+    footer?: React.ReactNode;
+    /** Optional icon or status indicator beside the title */
+    icon?: React.ReactNode;
+    /** Maximum width of the tooltip (default: 320) */
+    maxWidth?: number;
+}
+/**
+ * Pre-built tooltip content renderer for DataTable rows.
+ * Provides a structured layout: title, key-value fields, and optional footer.
+ *
+ * @example
+ * ```tsx
+ * <DataTable
+ *   columns={columns}
+ *   data={data}
+ *   rowTooltipContent={(row) => (
+ *     <DataTableRowDetail
+ *       title={row.parameter}
+ *       subtitle={row.category}
+ *       fields={[
+ *         { label: 'Value', value: row.value, mono: true },
+ *         { label: 'Status', value: row.status, status: row.status },
+ *       ]}
+ *       footer={`Last updated: ${row.timestamp}`}
+ *     />
+ *   )}
+ * />
+ * ```
+ */
+export declare const DataTableRowDetail: React.NamedExoticComponent<DataTableRowDetailProps>;
+export declare const DataTable: <T extends Record<string, unknown>>(props: DataTableProps<T>) => React.ReactElement;
+export default DataTable;