@zendir/ui 0.5.0 → 0.6.1

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

@@ -1 +1 @@
-{"version":3,"file":"Container.js","sources":["../../../../src/react/core/display/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 : 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          {/* Render non-string subtitles (React elements) below the CardHeader */}\n          {subtitle && typeof subtitle !== 'string' && (\n            <div style={{\n              fontSize: tokens.typography.fontSize.sm,\n              color: tokens.colors.text.secondary,\n              marginTop: -parseInt(tokens.spacing.xs || '4', 10) || -4,\n              marginBottom: parseInt(tokens.spacing.sm || '8', 10) || 8,\n            }}>\n              {subtitle}\n            </div>\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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"}
+{"version":3,"file":"Container.js","names":[],"sources":["../../../../src/react/core/display/Container.tsx"],"sourcesContent":["/**\r\n * @zendir/ui - Container/Card Component\r\n *\r\n * Container/Card wrapper following Astro UX Design System.\r\n * Automatically switches to glassmorphic styling when transparent themes are active.\r\n *\r\n * Transparent themes (transparent, transparent-bold):\r\n * - Glassmorphic panels with blur effect\r\n * - Colored top border accent\r\n * - Hover glow effect (like GlassCard)\r\n * - transparent-bold has 2px top border\r\n *\r\n * @example\r\n * ```tsx\r\n * <Container>Simple container</Container>\r\n * <Container title=\"Spacecraft Status\" status=\"normal\">Content</Container>\r\n * <Container title=\"Power System\" icon=\"solar\" iconStatus=\"normal\">With status</Container>\r\n * <Container title=\"Custom Color\" icon=\"thermal\" iconColor=\"#FF6B6B\">Custom color</Container>\r\n * ```\r\n */\r\n\r\nimport React, { memo, useCallback } from \"react\";\r\nimport { useTheme } from \"../../theme\";\r\nimport { classNames, addAlpha, type StatusLevel } from \"../../utils\";\r\nimport { AstroIcon, type AstroIconName } from \"./AstroIcon\";\r\nimport { HeaderIconWithStatus } from \"./HeaderIconWithStatus\";\r\nimport { CardHeader } from \"./CardHeader\";\r\nimport { useBreakpoint } from \"../layout/useBreakpoint\";\r\n\r\nexport type ContainerVariant =\r\n  | \"default\"\r\n  | \"elevated\"\r\n  | \"outlined\"\r\n  | \"ghost\"\r\n  | \"glass\"\r\n  | \"glass-dark\"\r\n  | \"glass-light\";\r\nexport type ContainerPadding = \"none\" | \"sm\" | \"md\" | \"lg\";\r\n\r\n/** Status descriptions for tooltips (default synonyms from AstroUXDS) */\r\nconst STATUS_DESCRIPTIONS: Record<StatusLevel, string> = {\r\n  off: \"Off, unavailable, disabled\",\r\n  standby: \"Standby, available, enabled\",\r\n  normal: \"Normal, ok, satisfactory\",\r\n  caution: \"Caution, warning, unstable\",\r\n  serious: \"Serious, error, needs attention\",\r\n  critical: \"Critical, emergency, urgent\",\r\n};\r\n\r\n/** Status symbol shapes following AstroUXDS guidelines */\r\ntype _StatusShape =\r\n  | \"circle\"\r\n  | \"square\"\r\n  | \"diamond\"\r\n  | \"triangle\"\r\n  | \"circle-hollow\";\r\n\r\nexport interface ContainerProps {\r\n  /** Visual variant */\r\n  variant?: ContainerVariant;\r\n  /** Padding size */\r\n  padding?: ContainerPadding;\r\n  /** Container title */\r\n  title?: React.ReactNode;\r\n  /** Subtitle or description */\r\n  subtitle?: React.ReactNode;\r\n  /** Status indicator (affects left border in non-glass mode) */\r\n  status?: StatusLevel;\r\n  /** Header actions (buttons, etc.) */\r\n  actions?: React.ReactNode;\r\n  /** Full height */\r\n  fullHeight?: boolean;\r\n  /**\r\n   * Clip overflowing content area when fullHeight is enabled.\r\n   * Keep false for form cards so wrapped rows can expand naturally.\r\n   */\r\n  clipContent?: boolean;\r\n  /** Loading state */\r\n  loading?: boolean;\r\n  /** Children */\r\n  children: React.ReactNode;\r\n  /** Custom className */\r\n  className?: string;\r\n  /** Custom style */\r\n  style?: React.CSSProperties;\r\n  /** Click handler */\r\n  onClick?: () => void;\r\n  /** Disable auto-glass effect in transparent theme */\r\n  disableAutoGlass?: boolean;\r\n  /** Icon to display in header (Astro icon name) */\r\n  icon?: AstroIconName;\r\n  /** Icon status - shows status symbol and colors icon accordingly */\r\n  iconStatus?: StatusLevel;\r\n  /** Custom status message shown in tooltip (overrides default description) */\r\n  statusMessage?: string;\r\n  /** Custom icon color (overrides iconStatus and theme color) */\r\n  iconColor?: string;\r\n  /** Custom accent color for glass mode (title, line, etc.) */\r\n  accentColor?: string;\r\n}\r\n\r\n/**\r\n * Icon wrapper with status tooltip - triggers tooltip on hover over entire icon area\r\n */\r\nfunction IconWithStatusTooltip({\r\n  icon,\r\n  iconColor,\r\n  iconStatus,\r\n  statusMessage,\r\n  iconSize = 20,\r\n}: {\r\n  icon: string;\r\n  iconColor: string;\r\n  iconStatus?: StatusLevel;\r\n  statusMessage?: string;\r\n  iconSize?: number;\r\n}): React.ReactElement {\r\n  const [isHovered, setIsHovered] = React.useState(false);\r\n  const { tokens } = useTheme();\r\n  const color = iconStatus ? tokens.colors.status[iconStatus] : iconColor;\r\n  const defaultMessage = iconStatus ? STATUS_DESCRIPTIONS[iconStatus] : \"\";\r\n  const tooltipText = statusMessage || defaultMessage;\r\n  const statusLabel = iconStatus\r\n    ? iconStatus.charAt(0).toUpperCase() + iconStatus.slice(1)\r\n    : \"\";\r\n\r\n  return (\r\n    <div\r\n      style={{\r\n        position: \"relative\",\r\n        display: \"inline-flex\",\r\n        alignItems: \"center\",\r\n        justifyContent: \"center\",\r\n        flexShrink: 0,\r\n        cursor: iconStatus ? \"help\" : \"default\",\r\n      }}\r\n      onMouseEnter={() => iconStatus && setIsHovered(true)}\r\n      onMouseLeave={() => setIsHovered(false)}\r\n    >\r\n      {/* Use HeaderIconWithStatus for consistent sizing with SpacecraftCard */}\r\n      {iconStatus ? (\r\n        <HeaderIconWithStatus\r\n          icon={icon as AstroIconName}\r\n          status={iconStatus}\r\n          size={iconSize}\r\n          statusColor={iconColor}\r\n        />\r\n      ) : (\r\n        <AstroIcon name={icon} size={iconSize} color={iconColor} />\r\n      )}\r\n      {/* Tooltip popup - triggers on whole icon area hover */}\r\n      {iconStatus && isHovered && (\r\n        <div\r\n          style={{\r\n            position: \"absolute\",\r\n            bottom: \"calc(100% + 12px)\",\r\n            left: \"50%\",\r\n            transform: \"translateX(-50%)\",\r\n            padding: \"8px 12px\",\r\n            backgroundColor: \"rgba(10, 15, 25, 0.95)\",\r\n            border: `1px solid ${color}`,\r\n            borderRadius: \"4px\",\r\n            boxShadow: `0 0 12px ${color}40, 0 4px 12px rgba(0,0,0,0.4)`,\r\n            zIndex: 1000,\r\n            whiteSpace: \"nowrap\",\r\n            pointerEvents: \"none\",\r\n            minWidth: \"150px\",\r\n          }}\r\n        >\r\n          {/* Status label */}\r\n          <div\r\n            style={{\r\n              fontSize: \"0.6875rem\", // 11px in rem\r\n              fontWeight: 500, // AstroUXDS medium for labels\r\n              color: color,\r\n              marginBottom: \"4px\",\r\n              textTransform: \"uppercase\",\r\n              letterSpacing: \"0.5px\",\r\n            }}\r\n          >\r\n            {statusLabel}\r\n          </div>\r\n          {/* Status message */}\r\n          <div\r\n            style={{\r\n              fontSize: \"0.75rem\", // 12px in rem\r\n              color: \"rgba(255,255,255,0.9)\",\r\n              lineHeight: 1.4,\r\n            }}\r\n          >\r\n            {tooltipText}\r\n          </div>\r\n          {/* Arrow */}\r\n          <div\r\n            style={{\r\n              position: \"absolute\",\r\n              bottom: \"-6px\",\r\n              left: \"50%\",\r\n              transform: \"translateX(-50%) rotate(45deg)\",\r\n              width: \"10px\",\r\n              height: \"10px\",\r\n              backgroundColor: \"rgba(10, 15, 25, 0.95)\",\r\n              borderRight: `1px solid ${color}`,\r\n              borderBottom: `1px solid ${color}`,\r\n            }}\r\n          />\r\n        </div>\r\n      )}\r\n    </div>\r\n  );\r\n}\r\n\r\n/**\r\n * Renders AstroUXDS-compliant status symbol with proper shape\r\n * Shapes: Critical=triangle, Serious=diamond, Caution=square, Normal=circle, Standby=ring, Off=small-circle\r\n */\r\nfunction StatusSymbol({\r\n  status,\r\n  size = 8,\r\n  message,\r\n  showTooltip = false,\r\n}: {\r\n  status: StatusLevel;\r\n  size?: number;\r\n  message?: string;\r\n  showTooltip?: boolean;\r\n}): React.ReactElement {\r\n  const [isHovered, setIsHovered] = React.useState(false);\r\n  const { tokens } = useTheme();\r\n  const color = tokens.colors.status[status];\r\n  const defaultMessage = STATUS_DESCRIPTIONS[status];\r\n  const tooltipText = message || defaultMessage;\r\n  const statusLabel = status.charAt(0).toUpperCase() + status.slice(1);\r\n\r\n  // Shape rendering based on Astro UX dual-coded status levels\r\n  const renderShape = () => {\r\n    const h = size / 2;\r\n    const glow = `drop-shadow(0 0 3px ${color})`;\r\n    switch (status) {\r\n      case \"critical\":\r\n        // Triangle pointing down\r\n        return (\r\n          <svg\r\n            width={size}\r\n            height={size}\r\n            viewBox={`0 0 ${size} ${size}`}\r\n            style={{ filter: glow }}\r\n          >\r\n            <polygon points={`${h},${size} 0,0 ${size},0`} fill={color} />\r\n          </svg>\r\n        );\r\n      case \"serious\":\r\n        // Diamond (rotated square)\r\n        return (\r\n          <svg\r\n            width={size}\r\n            height={size}\r\n            viewBox={`0 0 ${size} ${size}`}\r\n            style={{ filter: glow }}\r\n          >\r\n            <polygon\r\n              points={`${h},0 ${size},${h} ${h},${size} 0,${h}`}\r\n              fill={color}\r\n            />\r\n          </svg>\r\n        );\r\n      case \"caution\":\r\n        // Filled square\r\n        return (\r\n          <svg\r\n            width={size}\r\n            height={size}\r\n            viewBox={`0 0 ${size} ${size}`}\r\n            style={{ filter: glow }}\r\n          >\r\n            <rect width={size} height={size} fill={color} />\r\n          </svg>\r\n        );\r\n      case \"normal\":\r\n        // Filled circle\r\n        return (\r\n          <svg\r\n            width={size}\r\n            height={size}\r\n            viewBox={`0 0 ${size} ${size}`}\r\n            style={{ filter: glow }}\r\n          >\r\n            <circle cx={h} cy={h} r={h} fill={color} />\r\n          </svg>\r\n        );\r\n      case \"standby\":\r\n        // Ring (donut) — per official Astro UXDS\r\n        return (\r\n          <svg\r\n            width={size}\r\n            height={size}\r\n            viewBox=\"0 0 12 12\"\r\n            style={{ filter: glow }}\r\n          >\r\n            <circle\r\n              cx=\"6\"\r\n              cy=\"6\"\r\n              r=\"3.5\"\r\n              fill=\"none\"\r\n              stroke={color}\r\n              strokeWidth=\"2\"\r\n            />\r\n          </svg>\r\n        );\r\n      case \"off\":\r\n      default:\r\n        // Small filled circle — per official Astro UXDS\r\n        return (\r\n          <svg\r\n            width={size}\r\n            height={size}\r\n            viewBox=\"0 0 12 12\"\r\n            style={{ filter: glow }}\r\n          >\r\n            <circle cx=\"6\" cy=\"6\" r=\"3\" fill={color} />\r\n          </svg>\r\n        );\r\n    }\r\n  };\r\n\r\n  return (\r\n    <div\r\n      style={{\r\n        position: \"relative\",\r\n        display: \"inline-flex\",\r\n        alignItems: \"center\",\r\n        justifyContent: \"center\",\r\n        cursor: showTooltip ? \"help\" : \"default\",\r\n      }}\r\n      onMouseEnter={() => showTooltip && setIsHovered(true)}\r\n      onMouseLeave={() => setIsHovered(false)}\r\n    >\r\n      {renderShape()}\r\n      {/* Custom tooltip popup */}\r\n      {showTooltip && isHovered && (\r\n        <div\r\n          style={{\r\n            position: \"absolute\",\r\n            bottom: \"calc(100% + 8px)\",\r\n            left: \"50%\",\r\n            transform: \"translateX(-50%)\",\r\n            padding: \"8px 12px\",\r\n            backgroundColor: \"rgba(10, 15, 25, 0.95)\",\r\n            border: `1px solid ${color}`,\r\n            borderRadius: \"4px\",\r\n            boxShadow: `0 0 12px ${color}40, 0 4px 12px rgba(0,0,0,0.4)`,\r\n            zIndex: 1000,\r\n            whiteSpace: \"nowrap\",\r\n            pointerEvents: \"none\",\r\n            minWidth: \"150px\",\r\n          }}\r\n        >\r\n          {/* Status label */}\r\n          <div\r\n            style={{\r\n              fontSize: \"0.6875rem\", // 11px in rem\r\n              fontWeight: 500, // AstroUXDS medium for labels\r\n              color: color,\r\n              marginBottom: \"4px\",\r\n              textTransform: \"uppercase\",\r\n              letterSpacing: \"0.5px\",\r\n            }}\r\n          >\r\n            {statusLabel}\r\n          </div>\r\n          {/* Status message */}\r\n          <div\r\n            style={{\r\n              fontSize: \"0.75rem\", // 12px in rem\r\n              color: \"rgba(255,255,255,0.9)\",\r\n              lineHeight: 1.4,\r\n            }}\r\n          >\r\n            {tooltipText}\r\n          </div>\r\n          {/* Arrow */}\r\n          <div\r\n            style={{\r\n              position: \"absolute\",\r\n              bottom: \"-6px\",\r\n              left: \"50%\",\r\n              transform: \"translateX(-50%) rotate(45deg)\",\r\n              width: \"10px\",\r\n              height: \"10px\",\r\n              backgroundColor: \"rgba(10, 15, 25, 0.95)\",\r\n              borderRight: `1px solid ${color}`,\r\n              borderBottom: `1px solid ${color}`,\r\n            }}\r\n          />\r\n        </div>\r\n      )}\r\n    </div>\r\n  );\r\n}\r\n\r\n/**\r\n * StatusBadge - Compact status indicator for accent lines\r\n * Shows colored badge with status shape at end of accent line\r\n */\r\nfunction StatusBadge({\r\n  status,\r\n  tokens: _tokens,\r\n  size = \"bold\",\r\n}: {\r\n  status: StatusLevel;\r\n  tokens: any;\r\n  size?: \"bold\" | \"minimal\";\r\n}): React.ReactElement {\r\n  const { tokens } = useTheme();\r\n  const color = tokens.colors.status[status];\r\n  const label = status.charAt(0).toUpperCase() + status.slice(1);\r\n  const isBold = size === \"bold\";\r\n\r\n  return (\r\n    <span\r\n      style={{\r\n        display: \"inline-flex\",\r\n        alignItems: \"center\",\r\n        gap: isBold ? \"6px\" : \"4px\",\r\n        padding: isBold ? \"3px 10px\" : \"2px 8px\",\r\n        borderRadius: \"12px\",\r\n        fontSize: isBold ? \"11px\" : \"10px\",\r\n        fontWeight: 500,\r\n        backgroundColor: `${color}20`,\r\n        color: color,\r\n        flexShrink: 0,\r\n        textTransform: \"uppercase\",\r\n        letterSpacing: \"0.3px\",\r\n      }}\r\n    >\r\n      {/* Status shape */}\r\n      <StatusSymbol status={status} size={isBold ? 6 : 5} />\r\n      {label}\r\n    </span>\r\n  );\r\n}\r\n\r\nexport const Container = memo(function Container({\r\n  variant = \"default\",\r\n  padding = \"md\",\r\n  title,\r\n  subtitle,\r\n  status,\r\n  actions,\r\n  fullHeight = false,\r\n  clipContent = true,\r\n  loading = false,\r\n  children,\r\n  className = \"\",\r\n  style,\r\n  onClick,\r\n  disableAutoGlass = false,\r\n  icon,\r\n  iconStatus,\r\n  statusMessage,\r\n  iconColor,\r\n  accentColor,\r\n}: ContainerProps): React.ReactElement {\r\n  const { tokens, theme } = useTheme();\r\n  const { isMobile } = useBreakpoint();\r\n\r\n  // Theme detection\r\n  const _isTransparentTheme =\r\n    theme === \"transparent\" ||\r\n    theme === \"transparent-bold\" ||\r\n    theme === \"transparent-minimal\";\r\n  const isBoldVariant = theme === \"transparent-bold\";\r\n  const isMinimalVariant = theme === \"transparent-minimal\";\r\n\r\n  // Glass mode with accent styling ONLY for bold/minimal themes\r\n  // Normal \"transparent\" (Glass) theme uses simpler styling without accent borders\r\n  const useGlassMode =\r\n    (isBoldVariant || isMinimalVariant) &&\r\n    !disableAutoGlass &&\r\n    !variant.startsWith(\"glass\");\r\n\r\n  // Simple glass mode for normal \"transparent\" theme (no accent borders)\r\n  const useSimpleGlass =\r\n    theme === \"transparent\" &&\r\n    !disableAutoGlass &&\r\n    !variant.startsWith(\"glass\");\r\n\r\n  // Default accent color: bold/minimal themes use theme accent (Zendir purple)\r\n  const defaultAccentColor = tokens.colors.accent.primary;\r\n  const glassAccentColor = accentColor || defaultAccentColor;\r\n  const glassAccentMuted = `${glassAccentColor}66`;\r\n  const glassGradient = `linear-gradient(135deg, ${glassAccentColor}10 0%, ${glassAccentColor}03 100%)`;\r\n\r\n  // Determine icon color: custom > status > accent\r\n  const resolvedIconColor =\r\n    iconColor ||\r\n    (iconStatus ? tokens.colors.status[iconStatus] : glassAccentColor);\r\n  const _iconColorMuted = `${resolvedIconColor}66`;\r\n\r\n  const paddingConfig = {\r\n    none: \"0\",\r\n    sm: isMobile ? tokens.spacing.xs : tokens.spacing.sm,\r\n    md: isMobile ? tokens.spacing.sm : tokens.spacing.md,\r\n    lg: isMobile ? tokens.spacing.md : tokens.spacing.lg,\r\n  };\r\n\r\n  const headingConfig = tokens.layout?.card?.heading ?? {\r\n    iconSize: 20,\r\n    iconSizeCompact: 16,\r\n    titleFontSize: \"1.125rem\",\r\n    titleFontSizeChart: \"0.875rem\",\r\n    titleFontWeight: 500,\r\n    gap: 8,\r\n  };\r\n\r\n  const variantStyles: Record<ContainerVariant, React.CSSProperties> = {\r\n    default: {\r\n      backgroundColor: tokens.colors.background.surface,\r\n      border: `1px solid ${tokens.colors.border.muted}`,\r\n      boxShadow: \"none\",\r\n    },\r\n    elevated: {\r\n      backgroundColor: tokens.colors.background.surface,\r\n      border: \"none\",\r\n      boxShadow: tokens.shadows.md,\r\n    },\r\n    outlined: {\r\n      backgroundColor: \"transparent\",\r\n      border: `1px solid ${tokens.colors.border.muted}`,\r\n      boxShadow: \"none\",\r\n    },\r\n    ghost: {\r\n      backgroundColor: \"transparent\",\r\n      border: \"none\",\r\n      boxShadow: \"none\",\r\n    },\r\n    // Glass variants - transparent with blur\r\n    glass: {\r\n      backgroundColor: \"rgba(15, 20, 35, 0.85)\",\r\n      backdropFilter: \"blur(12px)\",\r\n      WebkitBackdropFilter: \"blur(12px)\",\r\n      border: \"1px solid rgba(0, 212, 255, 0.25)\",\r\n      boxShadow: \"none\",\r\n    } as React.CSSProperties,\r\n    \"glass-dark\": {\r\n      backgroundColor: \"rgba(0, 0, 0, 0.7)\",\r\n      backdropFilter: \"blur(16px)\",\r\n      WebkitBackdropFilter: \"blur(16px)\",\r\n      border: \"1px solid rgba(100, 130, 160, 0.2)\",\r\n      boxShadow: \"none\",\r\n    } as React.CSSProperties,\r\n    \"glass-light\": {\r\n      backgroundColor: \"rgba(255, 255, 255, 0.15)\",\r\n      backdropFilter: \"blur(12px)\",\r\n      WebkitBackdropFilter: \"blur(12px)\",\r\n      border: \"1px solid rgba(255, 255, 255, 0.25)\",\r\n      boxShadow: \"none\",\r\n    } as React.CSSProperties,\r\n  };\r\n\r\n  // Glow color for hover effect (like GlassCard)\r\n  const glowColor = accentColor ? `${accentColor}66` : \"rgba(0, 212, 255, 0.4)\";\r\n\r\n  // Glass mode overrides for BOLD/MINIMAL themes (Glassmorphic Panels with accent borders)\r\n  const glassOverrides: React.CSSProperties = useGlassMode\r\n    ? ({\r\n        backgroundColor: \"rgba(10, 15, 25, 0.35)\",\r\n        backdropFilter: \"blur(12px)\",\r\n        WebkitBackdropFilter: \"blur(12px)\",\r\n        border: `1px solid ${glassAccentMuted}`,\r\n        borderTop: isBoldVariant\r\n          ? `2px solid ${glassAccentColor}`\r\n          : `1px solid ${glassAccentColor}`,\r\n        transition: \"all 0.3s ease-out, box-shadow 0.3s ease-out\",\r\n      } as React.CSSProperties)\r\n    : {};\r\n\r\n  // Simple glass overrides for normal \"transparent\" (Glass) theme — match top cards (ISS): transparent + blur\r\n  const simpleGlassOverrides: React.CSSProperties = useSimpleGlass\r\n    ? ({\r\n        backgroundColor: \"transparent\",\r\n        backdropFilter: \"blur(12px)\",\r\n        WebkitBackdropFilter: \"blur(12px)\",\r\n        border: `1px solid ${tokens.colors.border.muted}`,\r\n        transition: \"all 0.3s ease-out\",\r\n      } as React.CSSProperties)\r\n    : {};\r\n\r\n  // Hover handlers for glow effect (like GlassCard)\r\n  const handleMouseEnter = useCallback(\r\n    (e: React.MouseEvent<HTMLDivElement>) => {\r\n      if (useGlassMode) {\r\n        e.currentTarget.style.boxShadow = `0 0 30px ${glowColor}, 0 4px 20px rgba(0,0,0,0.3)`;\r\n      }\r\n    },\r\n    [useGlassMode, glowColor],\r\n  );\r\n\r\n  const handleMouseLeave = useCallback(\r\n    (e: React.MouseEvent<HTMLDivElement>) => {\r\n      if (useGlassMode) {\r\n        e.currentTarget.style.boxShadow = \"none\";\r\n      }\r\n    },\r\n    [useGlassMode],\r\n  );\r\n\r\n  const statusColor = status ? tokens.colors.status[status] : undefined;\r\n  const isInteractive = !!onClick;\r\n\r\n  return (\r\n    <div\r\n      className={classNames(\r\n        \"zendir-container\",\r\n        `zendir-container--${variant}`,\r\n        useGlassMode && \"zendir-container--auto-glass\",\r\n        className,\r\n      )}\r\n      onClick={onClick}\r\n      role={isInteractive ? \"button\" : undefined}\r\n      tabIndex={isInteractive ? 0 : undefined}\r\n      onKeyDown={\r\n        onClick\r\n          ? (e: React.KeyboardEvent) => {\r\n              if (e.key === \"Enter\" || e.key === \" \") {\r\n                e.preventDefault();\r\n                onClick();\r\n              }\r\n            }\r\n          : undefined\r\n      }\r\n      onMouseEnter={handleMouseEnter}\r\n      onMouseLeave={handleMouseLeave}\r\n      style={{\r\n        borderRadius: tokens.borderRadius.lg,\r\n        overflow: \"hidden\",\r\n        position: \"relative\",\r\n        height: fullHeight ? \"100%\" : \"auto\",\r\n        display: \"flex\",\r\n        flexDirection: \"column\",\r\n        cursor: isInteractive ? \"pointer\" : \"default\",\r\n        transition: \"all 0.3s ease-out\",\r\n        borderLeft: statusColor ? `4px solid ${statusColor}` : undefined,\r\n        ...variantStyles[variant],\r\n        ...simpleGlassOverrides, // Normal Glass theme\r\n        ...glassOverrides, // Bold/Minimal themes (overrides simpleGlass if both)\r\n        ...style,\r\n      }}\r\n    >\r\n      {/* Glass gradient overlay for bold/minimal transparent themes */}\r\n      {useGlassMode && (\r\n        <div\r\n          style={{\r\n            position: \"absolute\",\r\n            inset: 0,\r\n            background: glassGradient,\r\n            pointerEvents: \"none\",\r\n            zIndex: 0,\r\n          }}\r\n        />\r\n      )}\r\n\r\n      {/* Loading overlay */}\r\n      {loading && (\r\n        <div\r\n          style={{\r\n            position: \"absolute\",\r\n            inset: 0,\r\n            backgroundColor: addAlpha(tokens.colors.background.surface, 0.5),\r\n            display: \"flex\",\r\n            alignItems: \"center\",\r\n            justifyContent: \"center\",\r\n            zIndex: 10,\r\n          }}\r\n        >\r\n          <svg\r\n            width=\"32\"\r\n            height=\"32\"\r\n            viewBox=\"0 0 24 24\"\r\n            fill=\"none\"\r\n            style={{ animation: \"spin 1s linear infinite\" }}\r\n          >\r\n            <circle\r\n              cx=\"12\"\r\n              cy=\"12\"\r\n              r=\"10\"\r\n              stroke={tokens.colors.accent.primary}\r\n              strokeWidth=\"3\"\r\n              strokeDasharray=\"31.4 31.4\"\r\n              strokeDashoffset=\"10\"\r\n            />\r\n          </svg>\r\n          <style>\r\n            {`@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }`}\r\n          </style>\r\n        </div>\r\n      )}\r\n\r\n      {/* Header - Glass mode BOLD variant (matching GlassCard style exactly) */}\r\n      {(title || actions) && useGlassMode && isBoldVariant && (\r\n        <div\r\n          style={{\r\n            position: \"relative\",\r\n            zIndex: 1,\r\n          }}\r\n        >\r\n          {/* Title row */}\r\n          <div\r\n            style={{\r\n              display: \"flex\",\r\n              alignItems: \"center\",\r\n              justifyContent: \"space-between\",\r\n              padding: `16px ${paddingConfig[padding]} 0`,\r\n            }}\r\n          >\r\n            <div\r\n              style={{\r\n                display: \"flex\",\r\n                alignItems: \"center\",\r\n                gap: headingConfig.gap,\r\n              }}\r\n            >\r\n              {/* Icon with optional status symbol - full area triggers tooltip */}\r\n              {icon && (\r\n                <IconWithStatusTooltip\r\n                  icon={icon}\r\n                  iconColor={resolvedIconColor}\r\n                  iconStatus={iconStatus}\r\n                  statusMessage={statusMessage}\r\n                  iconSize={headingConfig.iconSize}\r\n                />\r\n              )}\r\n              <h3\r\n                style={{\r\n                  margin: 0,\r\n                  fontSize: headingConfig.titleFontSize,\r\n                  fontWeight: headingConfig.titleFontWeight,\r\n                  color: glassAccentColor,\r\n                  letterSpacing: \"0.5px\",\r\n                  textShadow: `0 0 20px ${glassAccentMuted}`,\r\n                }}\r\n              >\r\n                {title}\r\n              </h3>\r\n            </div>\r\n            {actions && (\r\n              <div style={{ display: \"flex\", gap: tokens.spacing.xs }}>\r\n                {actions}\r\n              </div>\r\n            )}\r\n          </div>\r\n\r\n          {subtitle && (\r\n            <p\r\n              style={{\r\n                margin: 0,\r\n                padding: `${tokens.spacing.xs} ${paddingConfig[padding]} 0`,\r\n                fontSize: tokens.typography.fontSize.sm,\r\n                color: tokens.colors.text.secondary,\r\n              }}\r\n            >\r\n              {subtitle}\r\n            </p>\r\n          )}\r\n\r\n          {/* Accent line with optional status badge */}\r\n          <div\r\n            style={{\r\n              display: \"flex\",\r\n              alignItems: \"center\",\r\n              gap: tokens.spacing.sm,\r\n              padding: `12px ${paddingConfig[padding]} 0`,\r\n              marginBottom: tokens.spacing.sm,\r\n            }}\r\n          >\r\n            {/* Main accent line with gradient */}\r\n            <div\r\n              style={{\r\n                flex: 1,\r\n                height: \"2px\",\r\n                background: `linear-gradient(90deg, ${glassAccentColor} 0%, ${glassAccentMuted} 70%, ${glassAccentMuted}20 100%)`,\r\n                boxShadow: `0 0 8px ${glassAccentMuted}`,\r\n              }}\r\n            />\r\n            {/* Status badge at the end if status is set */}\r\n            {iconStatus && iconStatus !== \"off\" && (\r\n              <StatusBadge status={iconStatus} tokens={tokens} size=\"bold\" />\r\n            )}\r\n          </div>\r\n        </div>\r\n      )}\r\n\r\n      {/* Header - Glass mode MINIMAL variant (inline thin line) */}\r\n      {(title || actions) && useGlassMode && !isBoldVariant && (\r\n        <div\r\n          style={{\r\n            display: \"flex\",\r\n            alignItems: \"center\",\r\n            padding: `${tokens.spacing.sm} ${paddingConfig[padding]} 0`,\r\n            marginBottom: tokens.spacing.sm,\r\n            position: \"relative\",\r\n            zIndex: 1,\r\n          }}\r\n        >\r\n          {/* Icon with optional status symbol - full area triggers tooltip */}\r\n          {icon && (\r\n            <div\r\n              style={{\r\n                display: \"flex\",\r\n                alignItems: \"center\",\r\n                marginRight: tokens.spacing.sm,\r\n              }}\r\n            >\r\n              <IconWithStatusTooltip\r\n                icon={icon}\r\n                iconColor={resolvedIconColor}\r\n                iconStatus={iconStatus}\r\n                statusMessage={statusMessage}\r\n                iconSize={headingConfig.iconSizeCompact}\r\n              />\r\n            </div>\r\n          )}\r\n\r\n          {/* Title — card heading system */}\r\n          {title && (\r\n            <h3\r\n              style={{\r\n                margin: 0,\r\n                fontSize: headingConfig.titleFontSize,\r\n                fontWeight: headingConfig.titleFontWeight,\r\n                color: glassAccentColor,\r\n                textShadow: `0 0 16px ${glassAccentMuted}`,\r\n                letterSpacing: \"0.02em\",\r\n                whiteSpace: \"nowrap\",\r\n                marginRight: \"12px\",\r\n              }}\r\n            >\r\n              {title}\r\n            </h3>\r\n          )}\r\n\r\n          {/* Accent line - inline after title with optional status badge */}\r\n          <div\r\n            style={{\r\n              flex: 1,\r\n              display: \"flex\",\r\n              alignItems: \"center\",\r\n              gap: tokens.spacing.sm,\r\n              minWidth: 40,\r\n            }}\r\n          >\r\n            {/* Main gradient line */}\r\n            <div\r\n              style={{\r\n                flex: 1,\r\n                height: \"1px\",\r\n                background: `linear-gradient(90deg, ${glassAccentColor} 0%, ${glassAccentMuted} 70%, ${glassAccentMuted}20 100%)`,\r\n              }}\r\n            />\r\n            {/* Status badge at the end if status is set */}\r\n            {iconStatus && iconStatus !== \"off\" && (\r\n              <StatusBadge status={iconStatus} tokens={tokens} size=\"minimal\" />\r\n            )}\r\n          </div>\r\n\r\n          {actions && (\r\n            <div\r\n              style={{\r\n                display: \"flex\",\r\n                gap: tokens.spacing.xs,\r\n                flexShrink: 0,\r\n                marginLeft: \"12px\",\r\n              }}\r\n            >\r\n              {actions}\r\n            </div>\r\n          )}\r\n        </div>\r\n      )}\r\n\r\n      {/* Subtitle for glass mode MINIMAL - separate row */}\r\n      {subtitle && useGlassMode && !isBoldVariant && (\r\n        <p\r\n          style={{\r\n            margin: 0,\r\n            padding: `0 ${paddingConfig[padding]}`,\r\n            marginBottom: tokens.spacing.sm,\r\n            fontSize: tokens.typography.fontSize.sm,\r\n            color: tokens.colors.text.secondary,\r\n            position: \"relative\",\r\n            zIndex: 1,\r\n          }}\r\n        >\r\n          {subtitle}\r\n        </p>\r\n      )}\r\n\r\n      {/* Header - Regular mode (non-glass) - Uses shared CardHeader for consistency */}\r\n      {(title || actions) && !useGlassMode && (\r\n        <div\r\n          style={{\r\n            padding: `${paddingConfig[padding]} ${paddingConfig[padding]} 0`,\r\n            position: \"relative\",\r\n            zIndex: 1,\r\n          }}\r\n        >\r\n          <CardHeader\r\n            icon={icon || (iconStatus ? \"mission\" : \"\")}\r\n            title={typeof title === \"string\" ? title : String(title || \"\")}\r\n            subtitle={typeof subtitle === \"string\" ? subtitle : undefined}\r\n            status={iconStatus || status}\r\n            iconColor={iconColor}\r\n            iconSize={headingConfig.iconSize}\r\n            hideStatusIndicator={!icon && !iconStatus && !status}\r\n            rightSlot={actions}\r\n            style={{ marginBottom: tokens.spacing.sm }}\r\n          />\r\n          {/* Render non-string subtitles (React elements) below the CardHeader */}\r\n          {subtitle && typeof subtitle !== \"string\" && (\r\n            <div\r\n              style={{\r\n                fontSize: tokens.typography.fontSize.sm,\r\n                color: tokens.colors.text.secondary,\r\n                marginTop: -parseInt(tokens.spacing.xs || \"4\", 10) || -4,\r\n                marginBottom: parseInt(tokens.spacing.sm || \"8\", 10) || 8,\r\n              }}\r\n            >\r\n              {subtitle}\r\n            </div>\r\n          )}\r\n        </div>\r\n      )}\r\n\r\n      {/* Content */}\r\n      <div\r\n        style={{\r\n          flex: 1,\r\n          minHeight: fullHeight ? 0 : undefined,\r\n          overflow: fullHeight && clipContent ? \"hidden\" : undefined,\r\n          // When fullHeight, become a flex column so any child using flex:1 or height:100%\r\n          // gets a properly bounded height and scroll containers can work.\r\n          display: fullHeight ? \"flex\" : undefined,\r\n          flexDirection: fullHeight ? \"column\" : undefined,\r\n          padding: fullHeight\r\n            ? `${tokens.spacing.xs} 0 0 0`\r\n            : title\r\n              ? `${tokens.spacing.xs} ${paddingConfig[padding]} ${paddingConfig[padding]}`\r\n              : paddingConfig[padding],\r\n          position: \"relative\",\r\n          zIndex: 1,\r\n        }}\r\n      >\r\n        {children}\r\n      </div>\r\n    </div>\r\n  );\r\n});\r\n\r\nexport default Container;\r\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCA,IAAM,sBAAmD;CACvD,KAAK;CACL,SAAS;CACT,QAAQ;CACR,SAAS;CACT,SAAS;CACT,UAAU;AACZ;;;;AAyDA,SAAS,sBAAsB,EAC7B,MACA,WACA,YACA,eACA,WAAW,MAOU;CACrB,MAAM,CAAC,WAAW,gBAAgB,MAAM,SAAS,KAAK;CACtD,MAAM,EAAE,WAAW,SAAS;CAC5B,MAAM,QAAQ,aAAa,OAAO,OAAO,OAAO,cAAc;CAC9D,MAAM,iBAAiB,aAAa,oBAAoB,cAAc;CACtE,MAAM,cAAc,iBAAiB;CACrC,MAAM,cAAc,aAChB,WAAW,OAAO,CAAC,CAAC,CAAC,YAAY,IAAI,WAAW,MAAM,CAAC,IACvD;CAEJ,OACE,qBAAC,OAAD;EACE,OAAO;GACL,UAAU;GACV,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,YAAY;GACZ,QAAQ,aAAa,SAAS;EAChC;EACA,oBAAoB,cAAc,aAAa,IAAI;EACnD,oBAAoB,aAAa,KAAK;YAVxC,CAaG,aACC,oBAAC,sBAAD;GACQ;GACN,QAAQ;GACR,MAAM;GACN,aAAa;EACd,CAAA,IAED,oBAAC,WAAD;GAAW,MAAM;GAAM,MAAM;GAAU,OAAO;EAAY,CAAA,GAG3D,cAAc,aACb,qBAAC,OAAD;GACE,OAAO;IACL,UAAU;IACV,QAAQ;IACR,MAAM;IACN,WAAW;IACX,SAAS;IACT,iBAAiB;IACjB,QAAQ,aAAa;IACrB,cAAc;IACd,WAAW,YAAY,MAAM;IAC7B,QAAQ;IACR,YAAY;IACZ,eAAe;IACf,UAAU;GACZ;aAfF;IAkBE,oBAAC,OAAD;KACE,OAAO;MACL,UAAU;MACV,YAAY;MACL;MACP,cAAc;MACd,eAAe;MACf,eAAe;KACjB;eAEC;IACE,CAAA;IAEL,oBAAC,OAAD;KACE,OAAO;MACL,UAAU;MACV,OAAO;MACP,YAAY;KACd;eAEC;IACE,CAAA;IAEL,oBAAC,OAAD,EACE,OAAO;KACL,UAAU;KACV,QAAQ;KACR,MAAM;KACN,WAAW;KACX,OAAO;KACP,QAAQ;KACR,iBAAiB;KACjB,aAAa,aAAa;KAC1B,cAAc,aAAa;IAC7B,EACD,CAAA;GACE;IAEJ;;AAET;;;;;AAMA,SAAS,aAAa,EACpB,QACA,OAAO,GACP,SACA,cAAc,SAMO;CACrB,MAAM,CAAC,WAAW,gBAAgB,MAAM,SAAS,KAAK;CACtD,MAAM,EAAE,WAAW,SAAS;CAC5B,MAAM,QAAQ,OAAO,OAAO,OAAO;CACnC,MAAM,iBAAiB,oBAAoB;CAC3C,MAAM,cAAc,WAAW;CAC/B,MAAM,cAAc,OAAO,OAAO,CAAC,CAAC,CAAC,YAAY,IAAI,OAAO,MAAM,CAAC;CAGnE,MAAM,oBAAoB;EACxB,MAAM,IAAI,OAAO;EACjB,MAAM,OAAO,uBAAuB,MAAM;EAC1C,QAAQ,QAAR;GACE,KAAK,YAEH,OACE,oBAAC,OAAD;IACE,OAAO;IACP,QAAQ;IACR,SAAS,OAAO,KAAK,GAAG;IACxB,OAAO,EAAE,QAAQ,KAAK;cAEtB,oBAAC,WAAD;KAAS,QAAQ,GAAG,EAAE,GAAG,KAAK,OAAO,KAAK;KAAK,MAAM;IAAQ,CAAA;GAC1D,CAAA;GAET,KAAK,WAEH,OACE,oBAAC,OAAD;IACE,OAAO;IACP,QAAQ;IACR,SAAS,OAAO,KAAK,GAAG;IACxB,OAAO,EAAE,QAAQ,KAAK;cAEtB,oBAAC,WAAD;KACE,QAAQ,GAAG,EAAE,KAAK,KAAK,GAAG,EAAE,GAAG,EAAE,GAAG,KAAK,KAAK;KAC9C,MAAM;IACP,CAAA;GACE,CAAA;GAET,KAAK,WAEH,OACE,oBAAC,OAAD;IACE,OAAO;IACP,QAAQ;IACR,SAAS,OAAO,KAAK,GAAG;IACxB,OAAO,EAAE,QAAQ,KAAK;cAEtB,oBAAC,QAAD;KAAM,OAAO;KAAM,QAAQ;KAAM,MAAM;IAAQ,CAAA;GAC5C,CAAA;GAET,KAAK,UAEH,OACE,oBAAC,OAAD;IACE,OAAO;IACP,QAAQ;IACR,SAAS,OAAO,KAAK,GAAG;IACxB,OAAO,EAAE,QAAQ,KAAK;cAEtB,oBAAC,UAAD;KAAQ,IAAI;KAAG,IAAI;KAAG,GAAG;KAAG,MAAM;IAAQ,CAAA;GACvC,CAAA;GAET,KAAK,WAEH,OACE,oBAAC,OAAD;IACE,OAAO;IACP,QAAQ;IACR,SAAQ;IACR,OAAO,EAAE,QAAQ,KAAK;cAEtB,oBAAC,UAAD;KACE,IAAG;KACH,IAAG;KACH,GAAE;KACF,MAAK;KACL,QAAQ;KACR,aAAY;IACb,CAAA;GACE,CAAA;GAGT,SAEE,OACE,oBAAC,OAAD;IACE,OAAO;IACP,QAAQ;IACR,SAAQ;IACR,OAAO,EAAE,QAAQ,KAAK;cAEtB,oBAAC,UAAD;KAAQ,IAAG;KAAI,IAAG;KAAI,GAAE;KAAI,MAAM;IAAQ,CAAA;GACvC,CAAA;EAEX;CACF;CAEA,OACE,qBAAC,OAAD;EACE,OAAO;GACL,UAAU;GACV,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,QAAQ,cAAc,SAAS;EACjC;EACA,oBAAoB,eAAe,aAAa,IAAI;EACpD,oBAAoB,aAAa,KAAK;YATxC,CAWG,YAAY,GAEZ,eAAe,aACd,qBAAC,OAAD;GACE,OAAO;IACL,UAAU;IACV,QAAQ;IACR,MAAM;IACN,WAAW;IACX,SAAS;IACT,iBAAiB;IACjB,QAAQ,aAAa;IACrB,cAAc;IACd,WAAW,YAAY,MAAM;IAC7B,QAAQ;IACR,YAAY;IACZ,eAAe;IACf,UAAU;GACZ;aAfF;IAkBE,oBAAC,OAAD;KACE,OAAO;MACL,UAAU;MACV,YAAY;MACL;MACP,cAAc;MACd,eAAe;MACf,eAAe;KACjB;eAEC;IACE,CAAA;IAEL,oBAAC,OAAD;KACE,OAAO;MACL,UAAU;MACV,OAAO;MACP,YAAY;KACd;eAEC;IACE,CAAA;IAEL,oBAAC,OAAD,EACE,OAAO;KACL,UAAU;KACV,QAAQ;KACR,MAAM;KACN,WAAW;KACX,OAAO;KACP,QAAQ;KACR,iBAAiB;KACjB,aAAa,aAAa;KAC1B,cAAc,aAAa;IAC7B,EACD,CAAA;GACE;IAEJ;;AAET;;;;;AAMA,SAAS,YAAY,EACnB,QACA,QAAQ,SACR,OAAO,UAKc;CACrB,MAAM,EAAE,WAAW,SAAS;CAC5B,MAAM,QAAQ,OAAO,OAAO,OAAO;CACnC,MAAM,QAAQ,OAAO,OAAO,CAAC,CAAC,CAAC,YAAY,IAAI,OAAO,MAAM,CAAC;CAC7D,MAAM,SAAS,SAAS;CAExB,OACE,qBAAC,QAAD;EACE,OAAO;GACL,SAAS;GACT,YAAY;GACZ,KAAK,SAAS,QAAQ;GACtB,SAAS,SAAS,aAAa;GAC/B,cAAc;GACd,UAAU,SAAS,SAAS;GAC5B,YAAY;GACZ,iBAAiB,GAAG,MAAM;GACnB;GACP,YAAY;GACZ,eAAe;GACf,eAAe;EACjB;YAdF,CAiBE,oBAAC,cAAD;GAAsB;GAAQ,MAAM,SAAS,IAAI;EAAI,CAAA,GACpD,KACG;;AAEV;AAEA,IAAa,YAAY,KAAK,SAAS,UAAU,EAC/C,UAAU,WACV,UAAU,MACV,OACA,UACA,QACA,SACA,aAAa,OACb,cAAc,MACd,UAAU,OACV,UACA,YAAY,IACZ,OACA,SACA,mBAAmB,OACnB,MACA,YACA,eACA,WACA,eACqC;CACrC,MAAM,EAAE,QAAQ,UAAU,SAAS;CACnC,MAAM,EAAE,aAAa,cAAc;CAOnC,MAAM,gBAAgB,UAAU;CAKhC,MAAM,gBACH,iBALsB,UAAU,0BAMjC,CAAC,oBACD,CAAC,QAAQ,WAAW,OAAO;CAG7B,MAAM,iBACJ,UAAU,iBACV,CAAC,oBACD,CAAC,QAAQ,WAAW,OAAO;CAG7B,MAAM,qBAAqB,OAAO,OAAO,OAAO;CAChD,MAAM,mBAAmB,eAAe;CACxC,MAAM,mBAAmB,GAAG,iBAAiB;CAC7C,MAAM,gBAAgB,2BAA2B,iBAAiB,SAAS,iBAAiB;CAG5F,MAAM,oBACJ,cACC,aAAa,OAAO,OAAO,OAAO,cAAc;CAC3B,GAAG;CAE3B,MAAM,gBAAgB;EACpB,MAAM;EACN,IAAI,WAAW,OAAO,QAAQ,KAAK,OAAO,QAAQ;EAClD,IAAI,WAAW,OAAO,QAAQ,KAAK,OAAO,QAAQ;EAClD,IAAI,WAAW,OAAO,QAAQ,KAAK,OAAO,QAAQ;CACpD;CAEA,MAAM,gBAAgB,OAAO,QAAQ,MAAM,WAAW;EACpD,UAAU;EACV,iBAAiB;EACjB,eAAe;EACf,oBAAoB;EACpB,iBAAiB;EACjB,KAAK;CACP;CAEA,MAAM,gBAA+D;EACnE,SAAS;GACP,iBAAiB,OAAO,OAAO,WAAW;GAC1C,QAAQ,aAAa,OAAO,OAAO,OAAO;GAC1C,WAAW;EACb;EACA,UAAU;GACR,iBAAiB,OAAO,OAAO,WAAW;GAC1C,QAAQ;GACR,WAAW,OAAO,QAAQ;EAC5B;EACA,UAAU;GACR,iBAAiB;GACjB,QAAQ,aAAa,OAAO,OAAO,OAAO;GAC1C,WAAW;EACb;EACA,OAAO;GACL,iBAAiB;GACjB,QAAQ;GACR,WAAW;EACb;EAEA,OAAO;GACL,iBAAiB;GACjB,gBAAgB;GAChB,sBAAsB;GACtB,QAAQ;GACR,WAAW;EACb;EACA,cAAc;GACZ,iBAAiB;GACjB,gBAAgB;GAChB,sBAAsB;GACtB,QAAQ;GACR,WAAW;EACb;EACA,eAAe;GACb,iBAAiB;GACjB,gBAAgB;GAChB,sBAAsB;GACtB,QAAQ;GACR,WAAW;EACb;CACF;CAGA,MAAM,YAAY,cAAc,GAAG,YAAY,MAAM;CAGrD,MAAM,iBAAsC,eACvC;EACC,iBAAiB;EACjB,gBAAgB;EAChB,sBAAsB;EACtB,QAAQ,aAAa;EACrB,WAAW,gBACP,aAAa,qBACb,aAAa;EACjB,YAAY;CACd,IACA,CAAC;CAGL,MAAM,uBAA4C,iBAC7C;EACC,iBAAiB;EACjB,gBAAgB;EAChB,sBAAsB;EACtB,QAAQ,aAAa,OAAO,OAAO,OAAO;EAC1C,YAAY;CACd,IACA,CAAC;CAGL,MAAM,mBAAmB,aACtB,MAAwC;EACvC,IAAI,cACF,EAAE,cAAc,MAAM,YAAY,YAAY,UAAU;CAE5D,GACA,CAAC,cAAc,SAAS,CAC1B;CAEA,MAAM,mBAAmB,aACtB,MAAwC;EACvC,IAAI,cACF,EAAE,cAAc,MAAM,YAAY;CAEtC,GACA,CAAC,YAAY,CACf;CAEA,MAAM,cAAc,SAAS,OAAO,OAAO,OAAO,UAAU,KAAA;CAC5D,MAAM,gBAAgB,CAAC,CAAC;CAExB,OACE,qBAAC,OAAD;EACE,WAAW,WACT,oBACA,qBAAqB,WACrB,gBAAgB,gCAChB,SACF;EACS;EACT,MAAM,gBAAgB,WAAW,KAAA;EACjC,UAAU,gBAAgB,IAAI,KAAA;EAC9B,WACE,WACK,MAA2B;GAC1B,IAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;IACtC,EAAE,eAAe;IACjB,QAAQ;GACV;EACF,IACA,KAAA;EAEN,cAAc;EACd,cAAc;EACd,OAAO;GACL,cAAc,OAAO,aAAa;GAClC,UAAU;GACV,UAAU;GACV,QAAQ,aAAa,SAAS;GAC9B,SAAS;GACT,eAAe;GACf,QAAQ,gBAAgB,YAAY;GACpC,YAAY;GACZ,YAAY,cAAc,aAAa,gBAAgB,KAAA;GACvD,GAAG,cAAc;GACjB,GAAG;GACH,GAAG;GACH,GAAG;EACL;YApCF;GAuCG,gBACC,oBAAC,OAAD,EACE,OAAO;IACL,UAAU;IACV,OAAO;IACP,YAAY;IACZ,eAAe;IACf,QAAQ;GACV,EACD,CAAA;GAIF,WACC,qBAAC,OAAD;IACE,OAAO;KACL,UAAU;KACV,OAAO;KACP,iBAAiB,SAAS,OAAO,OAAO,WAAW,SAAS,EAAG;KAC/D,SAAS;KACT,YAAY;KACZ,gBAAgB;KAChB,QAAQ;IACV;cATF,CAWE,oBAAC,OAAD;KACE,OAAM;KACN,QAAO;KACP,SAAQ;KACR,MAAK;KACL,OAAO,EAAE,WAAW,0BAA0B;eAE9C,oBAAC,UAAD;MACE,IAAG;MACH,IAAG;MACH,GAAE;MACF,QAAQ,OAAO,OAAO,OAAO;MAC7B,aAAY;MACZ,iBAAgB;MAChB,kBAAiB;KAClB,CAAA;IACE,CAAA,GACL,oBAAC,SAAD,EAAA,UACG,0FACI,CAAA,CACJ;;IAIL,SAAS,YAAY,gBAAgB,iBACrC,qBAAC,OAAD;IACE,OAAO;KACL,UAAU;KACV,QAAQ;IACV;cAJF;KAOE,qBAAC,OAAD;MACE,OAAO;OACL,SAAS;OACT,YAAY;OACZ,gBAAgB;OAChB,SAAS,QAAQ,cAAc,SAAS;MAC1C;gBANF,CAQE,qBAAC,OAAD;OACE,OAAO;QACL,SAAS;QACT,YAAY;QACZ,KAAK,cAAc;OACrB;iBALF,CAQG,QACC,oBAAC,uBAAD;QACQ;QACN,WAAW;QACC;QACG;QACf,UAAU,cAAc;OACzB,CAAA,GAEH,oBAAC,MAAD;QACE,OAAO;SACL,QAAQ;SACR,UAAU,cAAc;SACxB,YAAY,cAAc;SAC1B,OAAO;SACP,eAAe;SACf,YAAY,YAAY;QAC1B;kBAEC;OACC,CAAA,CACD;UACJ,WACC,oBAAC,OAAD;OAAK,OAAO;QAAE,SAAS;QAAQ,KAAK,OAAO,QAAQ;OAAG;iBACnD;MACE,CAAA,CAEJ;;KAEJ,YACC,oBAAC,KAAD;MACE,OAAO;OACL,QAAQ;OACR,SAAS,GAAG,OAAO,QAAQ,GAAG,GAAG,cAAc,SAAS;OACxD,UAAU,OAAO,WAAW,SAAS;OACrC,OAAO,OAAO,OAAO,KAAK;MAC5B;gBAEC;KACA,CAAA;KAIL,qBAAC,OAAD;MACE,OAAO;OACL,SAAS;OACT,YAAY;OACZ,KAAK,OAAO,QAAQ;OACpB,SAAS,QAAQ,cAAc,SAAS;OACxC,cAAc,OAAO,QAAQ;MAC/B;gBAPF,CAUE,oBAAC,OAAD,EACE,OAAO;OACL,MAAM;OACN,QAAQ;OACR,YAAY,0BAA0B,iBAAiB,OAAO,iBAAiB,QAAQ,iBAAiB;OACxG,WAAW,WAAW;MACxB,EACD,CAAA,GAEA,cAAc,eAAe,SAC5B,oBAAC,aAAD;OAAa,QAAQ;OAAoB;OAAQ,MAAK;MAAQ,CAAA,CAE7D;;IACF;;IAIL,SAAS,YAAY,gBAAgB,CAAC,iBACtC,qBAAC,OAAD;IACE,OAAO;KACL,SAAS;KACT,YAAY;KACZ,SAAS,GAAG,OAAO,QAAQ,GAAG,GAAG,cAAc,SAAS;KACxD,cAAc,OAAO,QAAQ;KAC7B,UAAU;KACV,QAAQ;IACV;cARF;KAWG,QACC,oBAAC,OAAD;MACE,OAAO;OACL,SAAS;OACT,YAAY;OACZ,aAAa,OAAO,QAAQ;MAC9B;gBAEA,oBAAC,uBAAD;OACQ;OACN,WAAW;OACC;OACG;OACf,UAAU,cAAc;MACzB,CAAA;KACE,CAAA;KAIN,SACC,oBAAC,MAAD;MACE,OAAO;OACL,QAAQ;OACR,UAAU,cAAc;OACxB,YAAY,cAAc;OAC1B,OAAO;OACP,YAAY,YAAY;OACxB,eAAe;OACf,YAAY;OACZ,aAAa;MACf;gBAEC;KACC,CAAA;KAIN,qBAAC,OAAD;MACE,OAAO;OACL,MAAM;OACN,SAAS;OACT,YAAY;OACZ,KAAK,OAAO,QAAQ;OACpB,UAAU;MACZ;gBAPF,CAUE,oBAAC,OAAD,EACE,OAAO;OACL,MAAM;OACN,QAAQ;OACR,YAAY,0BAA0B,iBAAiB,OAAO,iBAAiB,QAAQ,iBAAiB;MAC1G,EACD,CAAA,GAEA,cAAc,eAAe,SAC5B,oBAAC,aAAD;OAAa,QAAQ;OAAoB;OAAQ,MAAK;MAAW,CAAA,CAEhE;;KAEJ,WACC,oBAAC,OAAD;MACE,OAAO;OACL,SAAS;OACT,KAAK,OAAO,QAAQ;OACpB,YAAY;OACZ,YAAY;MACd;gBAEC;KACE,CAAA;IAEJ;;GAIN,YAAY,gBAAgB,CAAC,iBAC5B,oBAAC,KAAD;IACE,OAAO;KACL,QAAQ;KACR,SAAS,KAAK,cAAc;KAC5B,cAAc,OAAO,QAAQ;KAC7B,UAAU,OAAO,WAAW,SAAS;KACrC,OAAO,OAAO,OAAO,KAAK;KAC1B,UAAU;KACV,QAAQ;IACV;cAEC;GACA,CAAA;IAIH,SAAS,YAAY,CAAC,gBACtB,qBAAC,OAAD;IACE,OAAO;KACL,SAAS,GAAG,cAAc,SAAS,GAAG,cAAc,SAAS;KAC7D,UAAU;KACV,QAAQ;IACV;cALF,CAOE,oBAAC,YAAD;KACE,MAAM,SAAS,aAAa,YAAY;KACxC,OAAO,OAAO,UAAU,WAAW,QAAQ,OAAO,SAAS,EAAE;KAC7D,UAAU,OAAO,aAAa,WAAW,WAAW,KAAA;KACpD,QAAQ,cAAc;KACX;KACX,UAAU,cAAc;KACxB,qBAAqB,CAAC,QAAQ,CAAC,cAAc,CAAC;KAC9C,WAAW;KACX,OAAO,EAAE,cAAc,OAAO,QAAQ,GAAG;IAC1C,CAAA,GAEA,YAAY,OAAO,aAAa,YAC/B,oBAAC,OAAD;KACE,OAAO;MACL,UAAU,OAAO,WAAW,SAAS;MACrC,OAAO,OAAO,OAAO,KAAK;MAC1B,WAAW,CAAC,SAAS,OAAO,QAAQ,MAAM,KAAK,EAAE,KAAK;MACtD,cAAc,SAAS,OAAO,QAAQ,MAAM,KAAK,EAAE,KAAK;KAC1D;eAEC;IACE,CAAA,CAEJ;;GAIP,oBAAC,OAAD;IACE,OAAO;KACL,MAAM;KACN,WAAW,aAAa,IAAI,KAAA;KAC5B,UAAU,cAAc,cAAc,WAAW,KAAA;KAGjD,SAAS,aAAa,SAAS,KAAA;KAC/B,eAAe,aAAa,WAAW,KAAA;KACvC,SAAS,aACL,GAAG,OAAO,QAAQ,GAAG,UACrB,QACE,GAAG,OAAO,QAAQ,GAAG,GAAG,cAAc,SAAS,GAAG,cAAc,aAChE,cAAc;KACpB,UAAU;KACV,QAAQ;IACV;IAEC;GACE,CAAA;EACF;;AAET,CAAC"}

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

@@ -1,5 +1,4 @@
 import { default as React } from 'react';
-
 export interface UseCopyToClipboardReturn {
     /** Copy text to clipboard */
     copy: (text: string) => Promise<boolean>;
@@ -27,7 +26,7 @@ export interface CopyButtonProps {
     /** Label shown briefly after copy (default: "Copied!") */
     copiedLabel?: string;
     /** Size */
-    size?: 'small' | 'medium' | 'large';
+    size?: "small" | "medium" | "large";
     /** Tooltip text */
     tooltip?: string;
     /** Disabled */

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

@@ -1,105 +1,162 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { memo, useState, useRef, useCallback, useEffect } from "react";
 import { useTheme } from "../../theme/ThemeProvider.js";
+import { memo, useCallback, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/react/core/display/CopyButton.tsx
+/**
+* @zendir/ui - Clipboard Utilities
+*
+* Copy-to-clipboard hook and button component. Used universally in operator
+* dashboards for sharing configuration URLs, copying telemetry values,
+* exporting command IDs.
+*
+* @example
+* ```tsx
+* // Hook
+* const { copy, copied } = useCopyToClipboard();
+* <Button onClick={() => copy(configUrl)}>
+*   {copied ? 'Copied!' : 'Copy URL'}
+* </Button>
+*
+* // Component
+* <CopyButton value={telemetryValue} label="Copy Value" />
+* <CopyButton value={shareUrl} size="small" />
+* ```
+*/
+/**
+* Hook for clipboard operations.
+*
+* @param resetDelay - Time in ms before `copied` resets to false (default 2000)
+*
+* @example
+* ```tsx
+* const { copy, copied } = useCopyToClipboard();
+* ```
+*/
 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 [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 })
-      ]
-    }
-  );
+var CopyButton = memo(function CopyButton({ 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 config = {
+		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
+		}
+	}[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) * .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 ? .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
+//#endregion
+export { CopyButton, CopyButton as default, useCopyToClipboard };
+
+//# sourceMappingURL=CopyButton.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"CopyButton.js","sources":["../../../../src/react/core/display/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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"}
+{"version":3,"file":"CopyButton.js","names":[],"sources":["../../../../src/react/core/display/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(\r\n  resetDelay = 2000,\r\n): 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(\r\n    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 =\r\n            \"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    },\r\n    [resetDelay],\r\n  );\r\n\r\n  // Cleanup on unmount\r\n  useEffect(() => {\r\n    return () => {\r\n      clearTimeout(timeoutRef.current);\r\n    };\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: {\r\n      height: 28,\r\n      padding: \"4px 8px\",\r\n      fontSize: \"0.75rem\",\r\n      iconSize: 14,\r\n    },\r\n    medium: {\r\n      height: 36,\r\n      padding: \"6px 12px\",\r\n      fontSize: \"0.875rem\",\r\n      iconSize: 16,\r\n    },\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\r\n      width={config.iconSize}\r\n      height={config.iconSize}\r\n      viewBox=\"0 0 24 24\"\r\n      fill=\"none\"\r\n      stroke=\"currentColor\"\r\n      strokeWidth=\"2\"\r\n      strokeLinecap=\"round\"\r\n      strokeLinejoin=\"round\"\r\n    >\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\r\n      width={config.iconSize}\r\n      height={config.iconSize}\r\n      viewBox=\"0 0 24 24\"\r\n      fill=\"none\"\r\n      stroke={tokens.colors.status.normal}\r\n      strokeWidth=\"2.5\"\r\n      strokeLinecap=\"round\"\r\n      strokeLinejoin=\"round\"\r\n    >\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\r\n          ? config.padding\r\n          : `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:\r\n          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"],"mappings":"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"}

package/dist/react/core/display/GlassCard.d.ts

@@ -1,6 +1,5 @@
 import { default as React } from 'react';
 import { StatusLevel } from '../../utils';
-
 export declare const GLASS_COLOR_OVERLAYS: {
     readonly electric: {
         readonly gradient: "linear-gradient(135deg, rgba(62, 60, 255, 0.15) 0%, rgba(62, 60, 255, 0.05) 100%)";
@@ -70,7 +69,7 @@ export declare const GLASS_COLOR_OVERLAYS: {
     };
 };
 export type GlassColorOverlay = keyof typeof GLASS_COLOR_OVERLAYS;
-export type GlassAccentPosition = 'top' | 'left' | 'right' | 'bottom' | 'none';
+export type GlassAccentPosition = "top" | "left" | "right" | "bottom" | "none";
 export interface GlassCardProps {
     /** Card title with optional icon */
     title?: React.ReactNode;
@@ -94,7 +93,7 @@ export interface GlassCardProps {
     /** Position of the accent line/glow */
     accentPosition?: GlassAccentPosition;
     /** Accent line style */
-    accentStyle?: 'solid' | 'gradient' | 'glow' | 'dots';
+    accentStyle?: "solid" | "gradient" | "glow" | "dots";
     /** Header icon (rendered before title) */
     icon?: React.ReactNode;
     /** Header right actions (legend, buttons, etc.) */
@@ -123,7 +122,7 @@ export interface GlassCardProps {
     /** Full height mode */
     fullHeight?: boolean;
     /** Padding size */
-    padding?: 'none' | 'sm' | 'md' | 'lg';
+    padding?: "none" | "sm" | "md" | "lg";
 }
 export declare const GlassCard: React.NamedExoticComponent<GlassCardProps>;
 export default GlassCard;