@zendir/ui 0.5.0 → 0.6.1

package/dist/react/core/feedback/Toast.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.js","sources":["../../../../src/react/core/feedback/Toast.tsx"],"sourcesContent":["/**\r\n * @zendir/ui - Toast / Notification System\r\n * \r\n * Contextual toast notifications with queue management, auto-dismiss,\r\n * and Astro UX status colors. Essential for operator dashboards surfacing\r\n * connection events, command results, and system alerts.\r\n * \r\n * Astro UX Compliance:\r\n * - 6-level status colors (off, standby, normal, caution, serious, critical)\r\n * - Positioned top-right (operator dashboard convention)\r\n * - Reduced motion support\r\n * - ARIA live region for screen readers\r\n * \r\n * @example\r\n * ```tsx\r\n * // Wrap app in ToastProvider\r\n * <ToastProvider>\r\n *   <App />\r\n * </ToastProvider>\r\n * \r\n * // Use in any component\r\n * const toast = useToast();\r\n * toast({ status: 'normal', title: 'Connected', message: 'MQTT link established' });\r\n * toast({ status: 'caution', title: 'SAFE Mode', message: 'Spacecraft entered SAFE mode', duration: 0 });\r\n * toast({ status: 'critical', title: 'Link Lost', message: 'Downlink signal below threshold' });\r\n * ```\r\n */\r\n\r\nimport React, { memo, createContext, useContext, useState, useCallback, useRef, useEffect } from 'react';\r\nimport { useTheme } from '../../theme';\r\nimport { safeAccentText } from '../../utils';\r\nimport { useBreakpoint } from '../layout/useBreakpoint';\r\n\r\n// ─── Types ───────────────────────────────────────────────────────────────────\r\n\r\nexport type ToastStatus = 'normal' | 'standby' | 'caution' | 'serious' | 'critical' | 'off';\r\nexport type ToastPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center' | 'bottom-center';\r\n\r\nexport interface ToastOptions {\r\n  /** Status level (determines color) */\r\n  status?: ToastStatus;\r\n  /** Title text (bold) */\r\n  title: string;\r\n  /** Description text */\r\n  message?: string;\r\n  /** Auto-dismiss duration in ms (0 = persistent, default 5000) */\r\n  duration?: number;\r\n  /** Dismissible by user click (default true) */\r\n  dismissible?: boolean;\r\n  /** Icon override */\r\n  icon?: React.ReactNode;\r\n  /** Action button */\r\n  action?: {\r\n    label: string;\r\n    onClick: () => void;\r\n  };\r\n}\r\n\r\ninterface ToastInstance extends ToastOptions {\r\n  id: string;\r\n  createdAt: number;\r\n}\r\n\r\n// ─── Context ─────────────────────────────────────────────────────────────────\r\n\r\ntype ToastFn = (options: ToastOptions) => string;\r\n\r\ninterface ToastContextValue {\r\n  toast: ToastFn;\r\n  dismiss: (id: string) => void;\r\n  dismissAll: () => void;\r\n}\r\n\r\nconst ToastContext = createContext<ToastContextValue | null>(null);\r\n\r\n// ─── Hook ────────────────────────────────────────────────────────────────────\r\n\r\n/**\r\n * Hook to show toast notifications.\r\n * Must be used within a `<ToastProvider>`.\r\n * \r\n * @example\r\n * ```tsx\r\n * const toast = useToast();\r\n * toast({ status: 'normal', title: 'Success', message: 'Command sent' });\r\n * ```\r\n */\r\nexport function useToast(): ToastFn {\r\n  const ctx = useContext(ToastContext);\r\n  if (!ctx) throw new Error('useToast must be used within <ToastProvider>');\r\n  return ctx.toast;\r\n}\r\n\r\n/**\r\n * Hook to access full toast API (toast, dismiss, dismissAll).\r\n */\r\nexport function useToastManager(): ToastContextValue {\r\n  const ctx = useContext(ToastContext);\r\n  if (!ctx) throw new Error('useToastManager must be used within <ToastProvider>');\r\n  return ctx;\r\n}\r\n\r\n// ─── Toast Item ──────────────────────────────────────────────────────────────\r\n\r\nconst ToastItem = memo(function ToastItem({\r\n  toast: t,\r\n  onDismiss,\r\n}: {\r\n  toast: ToastInstance;\r\n  onDismiss: (id: string) => void;\r\n}): React.ReactElement {\r\n  const { tokens } = useTheme();\r\n  const [exiting, setExiting] = useState(false);\r\n  const dismissTimeoutRef = useRef<ReturnType<typeof setTimeout>>();\r\n  \r\n  // Cleanup dismiss timeout on unmount\r\n  useEffect(() => {\r\n    return () => { clearTimeout(dismissTimeoutRef.current); };\r\n  }, []);\r\n  \r\n  const statusColors: Record<string, string> = {\r\n    normal: tokens.colors.status.normal,\r\n    standby: tokens.colors.status.standby,\r\n    caution: tokens.colors.status.caution,\r\n    serious: tokens.colors.status.serious,\r\n    critical: tokens.colors.status.critical,\r\n    off: tokens.colors.status.off,\r\n  };\r\n  \r\n  const color = statusColors[t.status || 'off'] || tokens.colors.status.off;\r\n  \r\n  const handleDismiss = useCallback(() => {\r\n    setExiting(true);\r\n    dismissTimeoutRef.current = setTimeout(() => onDismiss(t.id), 200);\r\n  }, [t.id, onDismiss]);\r\n  \r\n  // Auto-dismiss\r\n  useEffect(() => {\r\n    const dur = t.duration ?? 5000;\r\n    if (dur <= 0) return;\r\n    const timer = setTimeout(handleDismiss, dur);\r\n    return () => clearTimeout(timer);\r\n  }, [t.duration, handleDismiss]);\r\n  \r\n  // Status icon — Astro UX dual-coded shapes\r\n  const statusIcon = (() => {\r\n    const s = 10;\r\n    const h = s / 2;\r\n    const status = t.status || 'off';\r\n    const sharedStyle: React.CSSProperties = { flexShrink: 0, marginTop: '3px' };\r\n    switch (status) {\r\n      case 'critical':\r\n        return (\r\n          <svg width={s} height={s} viewBox={`0 0 ${s} ${s}`} style={sharedStyle}>\r\n            <polygon points={`${h},${s} 0,0 ${s},0`} fill={color} />\r\n          </svg>\r\n        );\r\n      case 'serious':\r\n        return (\r\n          <svg width={s} height={s} viewBox={`0 0 ${s} ${s}`} style={sharedStyle}>\r\n            <polygon points={`${h},0 ${s},${h} ${h},${s} 0,${h}`} fill={color} />\r\n          </svg>\r\n        );\r\n      case 'caution':\r\n        return (\r\n          <svg width={s} height={s} viewBox={`0 0 ${s} ${s}`} style={sharedStyle}>\r\n            <rect width={s} height={s} fill={color} />\r\n          </svg>\r\n        );\r\n      case 'standby':\r\n        return (\r\n          <svg width={s} height={s} viewBox=\"0 0 12 12\" style={sharedStyle}>\r\n            <circle cx=\"6\" cy=\"6\" r=\"3.5\" fill=\"none\" stroke={color} strokeWidth=\"2\" />\r\n          </svg>\r\n        );\r\n      case 'off':\r\n        return (\r\n          <svg width={s} height={s} viewBox=\"0 0 12 12\" style={sharedStyle}>\r\n            <circle cx=\"6\" cy=\"6\" r=\"3\" fill={color} />\r\n          </svg>\r\n        );\r\n      default: // normal\r\n        return (\r\n          <svg width={s} height={s} viewBox={`0 0 ${s} ${s}`} style={sharedStyle}>\r\n            <circle cx={h} cy={h} r={h} fill={color} />\r\n          </svg>\r\n        );\r\n    }\r\n  })();\r\n  \r\n  return (\r\n    <div\r\n      role=\"alert\"\r\n      style={{\r\n        display: 'flex',\r\n        gap: tokens.spacing.sm,\r\n        padding: `${tokens.spacing.sm} ${tokens.spacing.md}`,\r\n        backgroundColor: tokens.colors.background.elevated,\r\n        border: `1px solid ${color}30`,\r\n        borderLeft: `3px solid ${color}`,\r\n        borderRadius: tokens.borderRadius.md,\r\n        boxShadow: `${tokens.shadows.lg}, 0 0 20px ${color}15`,\r\n        maxWidth: 'min(400px, calc(100vw - 32px))',\r\n        minWidth: 'min(280px, calc(100vw - 32px))',\r\n        fontFamily: tokens.typography.fontFamily.primary,\r\n        animation: exiting\r\n          ? `zendir-toast-exit 200ms ${tokens.animation.easing.default} forwards`\r\n          : `zendir-toast-enter 300ms ${tokens.animation.easing.default}`,\r\n        transition: tokens.animation.normal,\r\n      }}\r\n    >\r\n      {t.icon || statusIcon}\r\n      \r\n      <div style={{ flex: 1, minWidth: 0 }}>\r\n        <div style={{\r\n          fontSize: tokens.typography.fontSize.sm,\r\n          fontWeight: tokens.typography.fontWeight.semibold,\r\n          color: tokens.colors.text.primary,\r\n          lineHeight: tokens.typography.lineHeight.tight,\r\n        }}>\r\n          {t.title}\r\n        </div>\r\n        {t.message && (\r\n          <div style={{\r\n            fontSize: tokens.typography.fontSize.xs,\r\n            color: tokens.colors.text.secondary,\r\n            marginTop: '2px',\r\n            lineHeight: tokens.typography.lineHeight.normal,\r\n          }}>\r\n            {t.message}\r\n          </div>\r\n        )}\r\n        {t.action && (\r\n          <button\r\n            onClick={t.action.onClick}\r\n            style={{\r\n              marginTop: tokens.spacing.xs,\r\n              fontSize: tokens.typography.fontSize.xs,\r\n              fontWeight: tokens.typography.fontWeight.semibold,\r\n              color: safeAccentText(tokens.colors.accent.primary),\r\n              background: 'none',\r\n              border: 'none',\r\n              padding: 0,\r\n              cursor: 'pointer',\r\n              fontFamily: tokens.typography.fontFamily.primary,\r\n            }}\r\n          >\r\n            {t.action.label}\r\n          </button>\r\n        )}\r\n      </div>\r\n      \r\n      {(t.dismissible !== false) && (\r\n        <button\r\n          aria-label=\"Dismiss notification\"\r\n          onClick={handleDismiss}\r\n          style={{\r\n            display: 'flex',\r\n            alignItems: 'center',\r\n            justifyContent: 'center',\r\n            width: 44,\r\n            height: 44,\r\n            border: 'none',\r\n            background: 'none',\r\n            color: tokens.colors.text.tertiary,\r\n            cursor: 'pointer',\r\n            borderRadius: tokens.borderRadius.sm,\r\n            padding: tokens.spacing.xs,\r\n            flexShrink: 0,\r\n            transition: tokens.animation.fast,\r\n          }}\r\n        >\r\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\">\r\n            <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\r\n            <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\r\n          </svg>\r\n        </button>\r\n      )}\r\n    </div>\r\n  );\r\n});\r\n\r\n// ─── Provider ────────────────────────────────────────────────────────────────\r\n\r\nexport interface ToastProviderProps {\r\n  /** Toast position (default: top-right) */\r\n  position?: ToastPosition;\r\n  /** Maximum visible toasts (default: 5) */\r\n  maxVisible?: number;\r\n  /** Default duration in ms (default: 5000) */\r\n  defaultDuration?: number;\r\n  /** Children */\r\n  children: React.ReactNode;\r\n}\r\n\r\nexport const ToastProvider = memo(function ToastProvider({\r\n  position = 'top-right',\r\n  maxVisible = 5,\r\n  defaultDuration = 5000,\r\n  children,\r\n}: ToastProviderProps): React.ReactElement {\r\n  const { tokens } = useTheme();\r\n  const { isMobile } = useBreakpoint();\r\n  const [toasts, setToasts] = useState<ToastInstance[]>([]);\r\n  const idCounter = useRef(0);\r\n  \r\n  const toast = useCallback((options: ToastOptions): string => {\r\n    const id = `toast-${++idCounter.current}-${Date.now()}`;\r\n    const instance: ToastInstance = {\r\n      ...options,\r\n      id,\r\n      createdAt: Date.now(),\r\n      duration: options.duration ?? defaultDuration,\r\n    };\r\n    setToasts(prev => [...prev, instance].slice(-maxVisible * 2)); // Keep buffer\r\n    return id;\r\n  }, [defaultDuration, maxVisible]);\r\n  \r\n  const dismiss = useCallback((id: string) => {\r\n    setToasts(prev => prev.filter(t => t.id !== id));\r\n  }, []);\r\n  \r\n  const dismissAll = useCallback(() => {\r\n    setToasts([]);\r\n  }, []);\r\n  \r\n  // Position styles\r\n  const inset = isMobile ? tokens.spacing.sm : tokens.spacing.md;\r\n  const positionStyles: Record<ToastPosition, React.CSSProperties> = {\r\n    'top-right': { top: inset, right: inset },\r\n    'top-left': { top: inset, left: inset },\r\n    'bottom-right': { bottom: inset, right: inset },\r\n    'bottom-left': { bottom: inset, left: inset },\r\n    'top-center': { top: inset, left: '50%', transform: 'translateX(-50%)' },\r\n    'bottom-center': { bottom: inset, left: '50%', transform: 'translateX(-50%)' },\r\n  };\r\n  \r\n  const isBottom = position.startsWith('bottom');\r\n  const visibleToasts = toasts.slice(-maxVisible);\r\n  \r\n  return (\r\n    <ToastContext.Provider value={{ toast, dismiss, dismissAll }}>\r\n      {children}\r\n      \r\n      {/* Toast container */}\r\n      {visibleToasts.length > 0 && (\r\n        <div\r\n          aria-live={visibleToasts.some(t => t.status === 'critical' || t.status === 'serious') ? 'assertive' : 'polite'}\r\n          aria-atomic=\"false\"\r\n          style={{\r\n            position: 'fixed',\r\n            zIndex: 9999,\r\n            display: 'flex',\r\n            flexDirection: isBottom ? 'column-reverse' : 'column',\r\n            gap: tokens.spacing.sm,\r\n            pointerEvents: 'none',\r\n            ...positionStyles[position],\r\n          }}\r\n        >\r\n          {visibleToasts.map(t => (\r\n            <div key={t.id} style={{ pointerEvents: 'auto' }}>\r\n              <ToastItem toast={t} onDismiss={dismiss} />\r\n            </div>\r\n          ))}\r\n        </div>\r\n      )}\r\n      \r\n      <style>{`\r\n        @keyframes zendir-toast-enter {\r\n          from { opacity: 0; transform: translateX(20px); }\r\n          to { opacity: 1; transform: translateX(0); }\r\n        }\r\n        @keyframes zendir-toast-exit {\r\n          from { opacity: 1; transform: translateX(0); }\r\n          to { opacity: 0; transform: translateX(20px); }\r\n        }\r\n        @media (prefers-reduced-motion: reduce) {\r\n          @keyframes zendir-toast-enter { from { opacity: 0; } to { opacity: 1; } }\r\n          @keyframes zendir-toast-exit { from { opacity: 1; } to { opacity: 0; } }\r\n        }\r\n      `}</style>\r\n    </ToastContext.Provider>\r\n  );\r\n});\r\n\r\nexport default ToastProvider;\r\n"],"names":["ToastItem","ToastProvider"],"mappings":"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"}
+{"version":3,"file":"Toast.js","names":[],"sources":["../../../../src/react/core/feedback/Toast.tsx"],"sourcesContent":["/**\r\n * @zendir/ui - Toast / Notification System\r\n *\r\n * Contextual toast notifications with queue management, auto-dismiss,\r\n * and Astro UX status colors. Essential for operator dashboards surfacing\r\n * connection events, command results, and system alerts.\r\n *\r\n * Astro UX Compliance:\r\n * - 6-level status colors (off, standby, normal, caution, serious, critical)\r\n * - Positioned top-right (operator dashboard convention)\r\n * - Reduced motion support\r\n * - ARIA live region for screen readers\r\n *\r\n * @example\r\n * ```tsx\r\n * // Wrap app in ToastProvider\r\n * <ToastProvider>\r\n *   <App />\r\n * </ToastProvider>\r\n *\r\n * // Use in any component\r\n * const toast = useToast();\r\n * toast({ status: 'normal', title: 'Connected', message: 'MQTT link established' });\r\n * toast({ status: 'caution', title: 'SAFE Mode', message: 'Spacecraft entered SAFE mode', duration: 0 });\r\n * toast({ status: 'critical', title: 'Link Lost', message: 'Downlink signal below threshold' });\r\n * ```\r\n */\r\n\r\nimport React, {\r\n  memo,\r\n  createContext,\r\n  useContext,\r\n  useState,\r\n  useCallback,\r\n  useRef,\r\n  useEffect,\r\n} from \"react\";\r\nimport { useTheme } from \"../../theme\";\r\nimport { safeAccentText } from \"../../utils\";\r\nimport { useBreakpoint } from \"../layout/useBreakpoint\";\r\n\r\n// ─── Types ───────────────────────────────────────────────────────────────────\r\n\r\nexport type ToastStatus =\r\n  | \"normal\"\r\n  | \"standby\"\r\n  | \"caution\"\r\n  | \"serious\"\r\n  | \"critical\"\r\n  | \"off\";\r\nexport type ToastPosition =\r\n  | \"top-right\"\r\n  | \"top-left\"\r\n  | \"bottom-right\"\r\n  | \"bottom-left\"\r\n  | \"top-center\"\r\n  | \"bottom-center\";\r\n\r\nexport interface ToastOptions {\r\n  /** Status level (determines color) */\r\n  status?: ToastStatus;\r\n  /** Title text (bold) */\r\n  title: string;\r\n  /** Description text */\r\n  message?: string;\r\n  /** Auto-dismiss duration in ms (0 = persistent, default 5000) */\r\n  duration?: number;\r\n  /** Dismissible by user click (default true) */\r\n  dismissible?: boolean;\r\n  /** Icon override */\r\n  icon?: React.ReactNode;\r\n  /** Action button */\r\n  action?: {\r\n    label: string;\r\n    onClick: () => void;\r\n  };\r\n}\r\n\r\ninterface ToastInstance extends ToastOptions {\r\n  id: string;\r\n  createdAt: number;\r\n}\r\n\r\n// ─── Context ─────────────────────────────────────────────────────────────────\r\n\r\ntype ToastFn = (options: ToastOptions) => string;\r\n\r\ninterface ToastContextValue {\r\n  toast: ToastFn;\r\n  dismiss: (id: string) => void;\r\n  dismissAll: () => void;\r\n}\r\n\r\nconst ToastContext = createContext<ToastContextValue | null>(null);\r\n\r\n// ─── Hook ────────────────────────────────────────────────────────────────────\r\n\r\n/**\r\n * Hook to show toast notifications.\r\n * Must be used within a `<ToastProvider>`.\r\n *\r\n * @example\r\n * ```tsx\r\n * const toast = useToast();\r\n * toast({ status: 'normal', title: 'Success', message: 'Command sent' });\r\n * ```\r\n */\r\nexport function useToast(): ToastFn {\r\n  const ctx = useContext(ToastContext);\r\n  if (!ctx) throw new Error(\"useToast must be used within <ToastProvider>\");\r\n  return ctx.toast;\r\n}\r\n\r\n/**\r\n * Hook to access full toast API (toast, dismiss, dismissAll).\r\n */\r\nexport function useToastManager(): ToastContextValue {\r\n  const ctx = useContext(ToastContext);\r\n  if (!ctx)\r\n    throw new Error(\"useToastManager must be used within <ToastProvider>\");\r\n  return ctx;\r\n}\r\n\r\n// ─── Toast Item ──────────────────────────────────────────────────────────────\r\n\r\nconst ToastItem = memo(function ToastItem({\r\n  toast: t,\r\n  onDismiss,\r\n}: {\r\n  toast: ToastInstance;\r\n  onDismiss: (id: string) => void;\r\n}): React.ReactElement {\r\n  const { tokens } = useTheme();\r\n  const [exiting, setExiting] = useState(false);\r\n  const dismissTimeoutRef = useRef<ReturnType<typeof setTimeout>>();\r\n\r\n  // Cleanup dismiss timeout on unmount\r\n  useEffect(() => {\r\n    return () => {\r\n      clearTimeout(dismissTimeoutRef.current);\r\n    };\r\n  }, []);\r\n\r\n  const statusColors: Record<string, string> = {\r\n    normal: tokens.colors.status.normal,\r\n    standby: tokens.colors.status.standby,\r\n    caution: tokens.colors.status.caution,\r\n    serious: tokens.colors.status.serious,\r\n    critical: tokens.colors.status.critical,\r\n    off: tokens.colors.status.off,\r\n  };\r\n\r\n  const color = statusColors[t.status || \"off\"] || tokens.colors.status.off;\r\n\r\n  const handleDismiss = useCallback(() => {\r\n    setExiting(true);\r\n    dismissTimeoutRef.current = setTimeout(() => onDismiss(t.id), 200);\r\n  }, [t.id, onDismiss]);\r\n\r\n  // Auto-dismiss\r\n  useEffect(() => {\r\n    const dur = t.duration ?? 5000;\r\n    if (dur <= 0) return;\r\n    const timer = setTimeout(handleDismiss, dur);\r\n    return () => clearTimeout(timer);\r\n  }, [t.duration, handleDismiss]);\r\n\r\n  // Status icon — Astro UX dual-coded shapes\r\n  const statusIcon = (() => {\r\n    const s = 10;\r\n    const h = s / 2;\r\n    const status = t.status || \"off\";\r\n    const sharedStyle: React.CSSProperties = {\r\n      flexShrink: 0,\r\n      marginTop: \"3px\",\r\n    };\r\n    switch (status) {\r\n      case \"critical\":\r\n        return (\r\n          <svg\r\n            width={s}\r\n            height={s}\r\n            viewBox={`0 0 ${s} ${s}`}\r\n            style={sharedStyle}\r\n          >\r\n            <polygon points={`${h},${s} 0,0 ${s},0`} fill={color} />\r\n          </svg>\r\n        );\r\n      case \"serious\":\r\n        return (\r\n          <svg\r\n            width={s}\r\n            height={s}\r\n            viewBox={`0 0 ${s} ${s}`}\r\n            style={sharedStyle}\r\n          >\r\n            <polygon\r\n              points={`${h},0 ${s},${h} ${h},${s} 0,${h}`}\r\n              fill={color}\r\n            />\r\n          </svg>\r\n        );\r\n      case \"caution\":\r\n        return (\r\n          <svg\r\n            width={s}\r\n            height={s}\r\n            viewBox={`0 0 ${s} ${s}`}\r\n            style={sharedStyle}\r\n          >\r\n            <rect width={s} height={s} fill={color} />\r\n          </svg>\r\n        );\r\n      case \"standby\":\r\n        return (\r\n          <svg width={s} height={s} viewBox=\"0 0 12 12\" style={sharedStyle}>\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        return (\r\n          <svg width={s} height={s} viewBox=\"0 0 12 12\" style={sharedStyle}>\r\n            <circle cx=\"6\" cy=\"6\" r=\"3\" fill={color} />\r\n          </svg>\r\n        );\r\n      default: // normal\r\n        return (\r\n          <svg\r\n            width={s}\r\n            height={s}\r\n            viewBox={`0 0 ${s} ${s}`}\r\n            style={sharedStyle}\r\n          >\r\n            <circle cx={h} cy={h} r={h} fill={color} />\r\n          </svg>\r\n        );\r\n    }\r\n  })();\r\n\r\n  return (\r\n    <div\r\n      role=\"alert\"\r\n      style={{\r\n        display: \"flex\",\r\n        gap: tokens.spacing.sm,\r\n        padding: `${tokens.spacing.sm} ${tokens.spacing.md}`,\r\n        backgroundColor: tokens.colors.background.elevated,\r\n        border: `1px solid ${color}30`,\r\n        borderLeft: `3px solid ${color}`,\r\n        borderRadius: tokens.borderRadius.md,\r\n        boxShadow: `${tokens.shadows.lg}, 0 0 20px ${color}15`,\r\n        maxWidth: \"min(400px, calc(100vw - 32px))\",\r\n        minWidth: \"min(280px, calc(100vw - 32px))\",\r\n        fontFamily: tokens.typography.fontFamily.primary,\r\n        animation: exiting\r\n          ? `zendir-toast-exit 200ms ${tokens.animation.easing.default} forwards`\r\n          : `zendir-toast-enter 300ms ${tokens.animation.easing.default}`,\r\n        transition: tokens.animation.normal,\r\n      }}\r\n    >\r\n      {t.icon || statusIcon}\r\n\r\n      <div style={{ flex: 1, minWidth: 0 }}>\r\n        <div\r\n          style={{\r\n            fontSize: tokens.typography.fontSize.sm,\r\n            fontWeight: tokens.typography.fontWeight.semibold,\r\n            color: tokens.colors.text.primary,\r\n            lineHeight: tokens.typography.lineHeight.tight,\r\n          }}\r\n        >\r\n          {t.title}\r\n        </div>\r\n        {t.message && (\r\n          <div\r\n            style={{\r\n              fontSize: tokens.typography.fontSize.xs,\r\n              color: tokens.colors.text.secondary,\r\n              marginTop: \"2px\",\r\n              lineHeight: tokens.typography.lineHeight.normal,\r\n            }}\r\n          >\r\n            {t.message}\r\n          </div>\r\n        )}\r\n        {t.action && (\r\n          <button\r\n            onClick={t.action.onClick}\r\n            style={{\r\n              marginTop: tokens.spacing.xs,\r\n              fontSize: tokens.typography.fontSize.xs,\r\n              fontWeight: tokens.typography.fontWeight.semibold,\r\n              color: safeAccentText(tokens.colors.accent.primary),\r\n              background: \"none\",\r\n              border: \"none\",\r\n              padding: 0,\r\n              cursor: \"pointer\",\r\n              fontFamily: tokens.typography.fontFamily.primary,\r\n            }}\r\n          >\r\n            {t.action.label}\r\n          </button>\r\n        )}\r\n      </div>\r\n\r\n      {t.dismissible !== false && (\r\n        <button\r\n          aria-label=\"Dismiss notification\"\r\n          onClick={handleDismiss}\r\n          style={{\r\n            display: \"flex\",\r\n            alignItems: \"center\",\r\n            justifyContent: \"center\",\r\n            width: 44,\r\n            height: 44,\r\n            border: \"none\",\r\n            background: \"none\",\r\n            color: tokens.colors.text.tertiary,\r\n            cursor: \"pointer\",\r\n            borderRadius: tokens.borderRadius.sm,\r\n            padding: tokens.spacing.xs,\r\n            flexShrink: 0,\r\n            transition: tokens.animation.fast,\r\n          }}\r\n        >\r\n          <svg\r\n            width=\"14\"\r\n            height=\"14\"\r\n            viewBox=\"0 0 24 24\"\r\n            fill=\"none\"\r\n            stroke=\"currentColor\"\r\n            strokeWidth=\"2\"\r\n            strokeLinecap=\"round\"\r\n          >\r\n            <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\r\n            <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\r\n          </svg>\r\n        </button>\r\n      )}\r\n    </div>\r\n  );\r\n});\r\n\r\n// ─── Provider ────────────────────────────────────────────────────────────────\r\n\r\nexport interface ToastProviderProps {\r\n  /** Toast position (default: top-right) */\r\n  position?: ToastPosition;\r\n  /** Maximum visible toasts (default: 5) */\r\n  maxVisible?: number;\r\n  /** Default duration in ms (default: 5000) */\r\n  defaultDuration?: number;\r\n  /** Children */\r\n  children: React.ReactNode;\r\n}\r\n\r\nexport const ToastProvider = memo(function ToastProvider({\r\n  position = \"top-right\",\r\n  maxVisible = 5,\r\n  defaultDuration = 5000,\r\n  children,\r\n}: ToastProviderProps): React.ReactElement {\r\n  const { tokens } = useTheme();\r\n  const { isMobile } = useBreakpoint();\r\n  const [toasts, setToasts] = useState<ToastInstance[]>([]);\r\n  const idCounter = useRef(0);\r\n\r\n  const toast = useCallback(\r\n    (options: ToastOptions): string => {\r\n      const id = `toast-${++idCounter.current}-${Date.now()}`;\r\n      const instance: ToastInstance = {\r\n        ...options,\r\n        id,\r\n        createdAt: Date.now(),\r\n        duration: options.duration ?? defaultDuration,\r\n      };\r\n      setToasts((prev) => [...prev, instance].slice(-maxVisible * 2)); // Keep buffer\r\n      return id;\r\n    },\r\n    [defaultDuration, maxVisible],\r\n  );\r\n\r\n  const dismiss = useCallback((id: string) => {\r\n    setToasts((prev) => prev.filter((t) => t.id !== id));\r\n  }, []);\r\n\r\n  const dismissAll = useCallback(() => {\r\n    setToasts([]);\r\n  }, []);\r\n\r\n  // Position styles\r\n  const inset = isMobile ? tokens.spacing.sm : tokens.spacing.md;\r\n  const positionStyles: Record<ToastPosition, React.CSSProperties> = {\r\n    \"top-right\": { top: inset, right: inset },\r\n    \"top-left\": { top: inset, left: inset },\r\n    \"bottom-right\": { bottom: inset, right: inset },\r\n    \"bottom-left\": { bottom: inset, left: inset },\r\n    \"top-center\": { top: inset, left: \"50%\", transform: \"translateX(-50%)\" },\r\n    \"bottom-center\": {\r\n      bottom: inset,\r\n      left: \"50%\",\r\n      transform: \"translateX(-50%)\",\r\n    },\r\n  };\r\n\r\n  const isBottom = position.startsWith(\"bottom\");\r\n  const visibleToasts = toasts.slice(-maxVisible);\r\n\r\n  return (\r\n    <ToastContext.Provider value={{ toast, dismiss, dismissAll }}>\r\n      {children}\r\n\r\n      {/* Toast container */}\r\n      {visibleToasts.length > 0 && (\r\n        <div\r\n          aria-live={\r\n            visibleToasts.some(\r\n              (t) => t.status === \"critical\" || t.status === \"serious\",\r\n            )\r\n              ? \"assertive\"\r\n              : \"polite\"\r\n          }\r\n          aria-atomic=\"false\"\r\n          style={{\r\n            position: \"fixed\",\r\n            zIndex: 9999,\r\n            display: \"flex\",\r\n            flexDirection: isBottom ? \"column-reverse\" : \"column\",\r\n            gap: tokens.spacing.sm,\r\n            pointerEvents: \"none\",\r\n            ...positionStyles[position],\r\n          }}\r\n        >\r\n          {visibleToasts.map((t) => (\r\n            <div key={t.id} style={{ pointerEvents: \"auto\" }}>\r\n              <ToastItem toast={t} onDismiss={dismiss} />\r\n            </div>\r\n          ))}\r\n        </div>\r\n      )}\r\n\r\n      <style>{`\r\n        @keyframes zendir-toast-enter {\r\n          from { opacity: 0; transform: translateX(20px); }\r\n          to { opacity: 1; transform: translateX(0); }\r\n        }\r\n        @keyframes zendir-toast-exit {\r\n          from { opacity: 1; transform: translateX(0); }\r\n          to { opacity: 0; transform: translateX(20px); }\r\n        }\r\n        @media (prefers-reduced-motion: reduce) {\r\n          @keyframes zendir-toast-enter { from { opacity: 0; } to { opacity: 1; } }\r\n          @keyframes zendir-toast-exit { from { opacity: 1; } to { opacity: 0; } }\r\n        }\r\n      `}</style>\r\n    </ToastContext.Provider>\r\n  );\r\n});\r\n\r\nexport default ToastProvider;\r\n"],"mappings":"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"}

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

@@ -6,7 +6,7 @@
  */
 export { Icon, getIconNames, isValidIconName } from './display/Icon';
 export type { IconProps, IconName } from './display/Icon';
-export type { AstroIconProps, AstroIconName, AstroIconSize } from './display/AstroIcon';
+export type { AstroIconProps, AstroIconName, AstroIconSize, } from './display/AstroIcon';
 export { Button } from './inputs/Button';
 export type { ButtonProps, ButtonVariant, ButtonSize } from './inputs/Button';
 export { Input } from './inputs/Input';
@@ -20,19 +20,19 @@ export type { CheckboxProps } from './inputs/Checkbox';
 export { Tooltip } from './overlays/Tooltip';
 export type { TooltipProps, TooltipPlacement } from './overlays/Tooltip';
 export { Dialog } from './feedback/Dialog';
-export type { DialogProps, DialogActionsProps, DialogSize } from './feedback/Dialog';
+export type { DialogProps, DialogActionsProps, DialogSize, } from './feedback/Dialog';
 export { Badge } from './display/Badge';
 export type { BadgeProps, BadgeVariant, BadgeSize } from './display/Badge';
 export { Tabs } from './navigation/Tabs';
-export type { TabsProps, TabsListProps, TabProps, TabsPanelProps } from './navigation/Tabs';
+export type { TabsProps, TabsListProps, TabProps, TabsPanelProps, } from './navigation/Tabs';
 export { Container } from './display/Container';
-export type { ContainerProps, ContainerVariant, ContainerPadding } from './display/Container';
+export type { ContainerProps, ContainerVariant, ContainerPadding, } from './display/Container';
 export { GlassCard, GLASS_COLOR_OVERLAYS } from './display/GlassCard';
-export type { GlassCardProps, GlassColorOverlay, GlassAccentPosition } from './display/GlassCard';
+export type { GlassCardProps, GlassColorOverlay, GlassAccentPosition, } from './display/GlassCard';
 export { Pagination } from './navigation/Pagination';
 export type { PaginationProps } from './navigation/Pagination';
 export { DataValue, DataValueGroup } from './data/DataValue';
-export type { DataValueProps, DataValueGroupProps, DataValueVariant, DataValueSize } from './data/DataValue';
+export type { DataValueProps, DataValueGroupProps, DataValueVariant, DataValueSize, } from './data/DataValue';
 export { HeaderIconWithStatus } from './display/HeaderIconWithStatus';
 export type { HeaderIconWithStatusProps } from './display/HeaderIconWithStatus';
 export { CardHeader } from './display/CardHeader';
@@ -40,7 +40,7 @@ export type { CardHeaderProps } from './display/CardHeader';
 export { getPropertyConfig, formatPropertyLabel, deriveStatus, deriveBatteryStatus, formatPropertyValue, createPropertyConfig, getPropertiesByCategory, PROPERTY_PRESETS, CATEGORY_ICONS, CATEGORY_LABELS, } from './data/propertyConfig';
 export type { PropertyConfig, PropertyKey, PropertyCategory, StatusThresholds, } from './data/propertyConfig';
 export { MessageStream } from './widgets/MessageStream';
-export type { MessageStreamProps, StreamMessage } from './widgets/MessageStream';
+export type { MessageStreamProps, StreamMessage, } from './widgets/MessageStream';
 export { AppBar } from './navigation/AppBar';
 export type { AppBarProps, AppBarBranding } from './navigation/AppBar';
 export { ColorPickerPanel } from './widgets/ColorPickerPanel';
@@ -48,13 +48,13 @@ export type { ColorPickerPanelProps } from './widgets/ColorPickerPanel';
 export { Typography, Display1, Display2, H1, H2, H3, H4, H5, H6, Body1, Body2, Body3, Compact, Micro, Mono, DataText, Label, FONT_FAMILY_PRIMARY, FONT_FAMILY_MONO, FONT_WEIGHTS, } from './display/Typography';
 export type { TypographyProps, TypographyVariant, TypographyElement, TypographyColor, } from './display/Typography';
 export { NumberInput } from './inputs/NumberInput';
-export type { NumberInputProps, NumberInputSize, SliderStatus } from './inputs/NumberInput';
-export { SideNav, SIDENAV_HEADER_LOGO_SLOT_HEIGHT_PX } from './navigation/SideNav';
-export type { SideNavProps, SideNavHeaderProps, SideNavItemProps, SideNavSectionProps, SideNavFooterProps } from './navigation/SideNav';
+export type { NumberInputProps, NumberInputSize, SliderStatus, } from './inputs/NumberInput';
+export { SideNav, SIDENAV_HEADER_LOGO_SLOT_HEIGHT_PX, } from './navigation/SideNav';
+export type { SideNavProps, SideNavHeaderProps, SideNavItemProps, SideNavSectionProps, SideNavFooterProps, } from './navigation/SideNav';
 export { ToastProvider, useToast, useToastManager } from './feedback/Toast';
-export type { ToastOptions, ToastStatus, ToastPosition, ToastProviderProps } from './feedback/Toast';
+export type { ToastOptions, ToastStatus, ToastPosition, ToastProviderProps, } from './feedback/Toast';
 export { Popover, Menu } from './overlays/Popover';
-export type { PopoverProps, PopoverPlacement, MenuProps, MenuItemProps } from './overlays/Popover';
+export type { PopoverProps, PopoverPlacement, MenuProps, MenuItemProps, } from './overlays/Popover';
 export { Box } from './layout/Box';
 export type { BoxProps } from './layout/Box';
 export { Flex } from './layout/Flex';
@@ -73,41 +73,41 @@ export { useBreakpoint, BREAKPOINTS } from './layout/useBreakpoint';
 export type { Breakpoint, ResponsiveValue } from './layout/useBreakpoint';
 export { resolveResponsive, resolveSpacing } from './layout/responsive';
 export type { SpacingToken } from './layout/responsive';
-export { ConfirmDialog, ConfirmProvider, useConfirm } from './feedback/ConfirmDialog';
-export type { ConfirmDialogProps, ConfirmOptions, ConfirmStatus } from './feedback/ConfirmDialog';
+export { ConfirmDialog, ConfirmProvider, useConfirm, } from './feedback/ConfirmDialog';
+export type { ConfirmDialogProps, ConfirmOptions, ConfirmStatus, } from './feedback/ConfirmDialog';
 export { PinInput } from './inputs/PinInput';
 export type { PinInputProps } from './inputs/PinInput';
 export { CopyButton, useCopyToClipboard } from './display/CopyButton';
-export type { CopyButtonProps, UseCopyToClipboardReturn } from './display/CopyButton';
+export type { CopyButtonProps, UseCopyToClipboardReturn, } from './display/CopyButton';
 export { DataTable, DataTableRowDetail } from './data/DataTable';
-export type { DataTableProps, DataTableColumn, DataTableRowDetailProps, DataTableRowDetailField } from './data/DataTable';
+export type { DataTableProps, DataTableColumn, DataTableRowDetailProps, DataTableRowDetailField, } from './data/DataTable';
 export { ImageGallery } from './widgets/ImageGallery';
 export type { ImageGalleryProps, GalleryImage } from './widgets/ImageGallery';
 export { ImageFrame, decodeImage } from './widgets/ImageFrame';
 export type { ImageFrameProps, ImageColormap } from './widgets/ImageFrame';
 export { ImagePanel } from './widgets/ImagePanel';
 export type { ImagePanelProps } from './widgets/ImagePanel';
-export { ChatPanel, parseChatResponse, createChatResponseParser, parseMcpToolResult, CHAT_RESPONSE_TOOL_SCHEMA, CHAT_RESPONSE_MCP_TOOL, CHAT_RESPONSE_JSON_PROMPT, CHAT_RESPONSE_YAML_PROMPT, CHAT_STATUS_RULES_PROMPT } from './widgets/ChatPanel';
-export type { ChatPanelProps, ChatMessage, ChatBlock, ChatBlockEvent, ChatBlockAlert, ChatBlockTelemetry, ChatBlockProgress, ChatBlockTable, ChatBlockActions, ChatBlockChoice, ChatBlockConfirm, ChatBlockCommand, ChatBlockKV, ChatResponseFormat, ChatResponsePayload, ChatResponseParserOptions, McpToolContent, McpToolResult } from './widgets/ChatPanel';
+export { ChatPanel, parseChatResponse, createChatResponseParser, parseMcpToolResult, CHAT_RESPONSE_TOOL_SCHEMA, CHAT_RESPONSE_MCP_TOOL, CHAT_RESPONSE_JSON_PROMPT, CHAT_RESPONSE_YAML_PROMPT, CHAT_STATUS_RULES_PROMPT, } from './widgets/ChatPanel';
+export type { ChatPanelProps, ChatMessage, ChatBlock, ChatBlockEvent, ChatBlockAlert, ChatBlockTelemetry, ChatBlockProgress, ChatBlockTable, ChatBlockActions, ChatBlockChoice, ChatBlockConfirm, ChatBlockCommand, ChatBlockKV, ChatResponseFormat, ChatResponsePayload, ChatResponseParserOptions, McpToolContent, McpToolResult, } from './widgets/ChatPanel';
 export { ConnectionForm } from './widgets/ConnectionForm';
-export type { ConnectionFormProps, ConnectionConfig } from './widgets/ConnectionForm';
+export type { ConnectionFormProps, ConnectionConfig, } from './widgets/ConnectionForm';
 export { SidePanel } from './overlays/SidePanel';
 export type { SidePanelProps, SidePanelPosition } from './overlays/SidePanel';
-export { HexViewer, REGION_COLORS, REGION_BORDER_COLORS } from './widgets/HexViewer';
-export type { HexViewerProps, HexHighlight, HexRegion, DecodedField, PacketHeaderEntry, ByteGrouping, OffsetBase, Endianness } from './widgets/HexViewer';
+export { HexViewer, REGION_COLORS, REGION_BORDER_COLORS, } from './widgets/HexViewer';
+export type { HexViewerProps, HexHighlight, HexRegion, DecodedField, PacketHeaderEntry, ByteGrouping, OffsetBase, Endianness, } from './widgets/HexViewer';
 export { LimitsBar } from './inputs/LimitsBar';
 export type { LimitsBarProps, LimitsState } from './inputs/LimitsBar';
 export { LogViewer } from './widgets/LogViewer';
-export type { LogViewerProps, LogEntry, LogSeverity } from './widgets/LogViewer';
+export type { LogViewerProps, LogEntry, LogSeverity, } from './widgets/LogViewer';
 export { PacketViewer } from './widgets/PacketViewer';
-export type { PacketViewerProps, PacketItem, PacketItemLimits, PacketItemLimitsState, PacketViewMode } from './widgets/PacketViewer';
+export type { PacketViewerProps, PacketItem, PacketItemLimits, PacketItemLimitsState, PacketViewMode, } from './widgets/PacketViewer';
 export { CommandBuilder } from './widgets/CommandBuilder';
-export type { CommandBuilderProps, CommandParameter, CommandParamType, CommandHistoryEntry } from './widgets/CommandBuilder';
+export type { CommandBuilderProps, CommandParameter, CommandParamType, CommandHistoryEntry, } from './widgets/CommandBuilder';
 export { FileExplorer } from './widgets/FileExplorer';
-export type { FileExplorerProps, FileNode, FileViewMode, FileSortBy } from './widgets/FileExplorer';
+export type { FileExplorerProps, FileNode, FileViewMode, FileSortBy, } from './widgets/FileExplorer';
 export { MissionCalendar } from './widgets/MissionCalendar';
 export type { MissionCalendarProps, CalendarEvent, CalendarTimeline, CalendarViewMode, ActivityStatus, ActivityType, } from './widgets/MissionCalendar';
 export { ActivityPlanner } from './widgets/ActivityPlanner';
 export type { ActivityPlannerProps, ActivityFormData, } from './widgets/ActivityPlanner';
-export { Capture, useCapture, loadCapturePlaceholderImage } from './widgets/Capture';
+export { Capture, useCapture, loadCapturePlaceholderImage, } from './widgets/Capture';
 export type { CaptureProps, CaptureHandle, CaptureRequest, CaptureArgs, CapturedImage, UseCaptureOptions, UseCaptureResult, } from './widgets/Capture';

package/dist/react/core/index.js

@@ -1,5 +1,6 @@
 import { Icon, getIconNames, isValidIconName } from "./display/Icon.js";
 import { Button } from "./inputs/Button.js";
+import { BREAKPOINTS, useBreakpoint } from "./layout/useBreakpoint.js";
 import { Input } from "./inputs/Input.js";
 import { Select } from "./inputs/Select.js";
 import { Toggle } from "./inputs/Toggle.js";
@@ -8,21 +9,22 @@ import { Tooltip } from "./overlays/Tooltip.js";
 import { Dialog } from "./feedback/Dialog.js";
 import { Badge } from "./display/Badge.js";
 import { Tabs } from "./navigation/Tabs.js";
+import { HeaderIconWithStatus } from "./display/HeaderIconWithStatus.js";
+import { CardHeader } from "./display/CardHeader.js";
 import { Container } from "./display/Container.js";
 import { GLASS_COLOR_OVERLAYS, GlassCard } from "./display/GlassCard.js";
 import { Pagination } from "./navigation/Pagination.js";
-import { DataValue, DataValueGroup } from "./data/DataValue.js";
-import { HeaderIconWithStatus } from "./display/HeaderIconWithStatus.js";
-import { CardHeader } from "./display/CardHeader.js";
 import { CATEGORY_ICONS, CATEGORY_LABELS, PROPERTY_PRESETS, createPropertyConfig, deriveBatteryStatus, deriveStatus, formatPropertyLabel, formatPropertyValue, getPropertiesByCategory, getPropertyConfig } from "./data/propertyConfig.js";
+import { DataValue, DataValueGroup } from "./data/DataValue.js";
 import { MessageStream } from "./widgets/MessageStream.js";
-import { AppBar } from "./navigation/AppBar.js";
 import { ColorPickerPanel } from "./widgets/ColorPickerPanel.js";
+import { AppBar } from "./navigation/AppBar.js";
 import { Body1, Body2, Body3, Compact, DataText, Display1, Display2, FONT_FAMILY_MONO, FONT_FAMILY_PRIMARY, FONT_WEIGHTS, H1, H2, H3, H4, H5, H6, Label, Micro, Mono, Typography } from "./display/Typography.js";
 import { NumberInput } from "./inputs/NumberInput.js";
 import { SIDENAV_HEADER_LOGO_SLOT_HEIGHT_PX, SideNav } from "./navigation/SideNav.js";
 import { ToastProvider, useToast, useToastManager } from "./feedback/Toast.js";
 import { Menu, Popover } from "./overlays/Popover.js";
+import { resolveResponsive, resolveSpacing } from "./layout/responsive.js";
 import { Box } from "./layout/Box.js";
 import { Flex } from "./layout/Flex.js";
 import { Grid } from "./layout/Grid.js";
@@ -30,8 +32,6 @@ import { HStack, Stack, VStack } from "./layout/Stack.js";
 import { Center } from "./layout/Center.js";
 import { Spacer } from "./layout/Spacer.js";
 import { Divider } from "./layout/Divider.js";
-import { BREAKPOINTS, useBreakpoint } from "./layout/useBreakpoint.js";
-import { resolveResponsive, resolveSpacing } from "./layout/responsive.js";
 import { ConfirmDialog, ConfirmProvider, useConfirm } from "./feedback/ConfirmDialog.js";
 import { PinInput } from "./inputs/PinInput.js";
 import { CopyButton, useCopyToClipboard } from "./display/CopyButton.js";
@@ -51,116 +51,4 @@ import { FileExplorer } from "./widgets/FileExplorer.js";
 import { MissionCalendar } from "./widgets/MissionCalendar.js";
 import { ActivityPlanner } from "./widgets/ActivityPlanner.js";
 import { Capture, loadCapturePlaceholderImage, useCapture } from "./widgets/Capture.js";
-export {
-  ActivityPlanner,
-  AppBar,
-  BREAKPOINTS,
-  Badge,
-  Body1,
-  Body2,
-  Body3,
-  Box,
-  Button,
-  CATEGORY_ICONS,
-  CATEGORY_LABELS,
-  CHAT_RESPONSE_JSON_PROMPT,
-  CHAT_RESPONSE_MCP_TOOL,
-  CHAT_RESPONSE_TOOL_SCHEMA,
-  CHAT_RESPONSE_YAML_PROMPT,
-  CHAT_STATUS_RULES_PROMPT,
-  Capture,
-  CardHeader,
-  Center,
-  ChatPanel,
-  Checkbox,
-  ColorPickerPanel,
-  CommandBuilder,
-  Compact,
-  ConfirmDialog,
-  ConfirmProvider,
-  ConnectionForm,
-  Container,
-  CopyButton,
-  DataTable,
-  DataTableRowDetail,
-  DataText,
-  DataValue,
-  DataValueGroup,
-  Dialog,
-  Display1,
-  Display2,
-  Divider,
-  FONT_FAMILY_MONO,
-  FONT_FAMILY_PRIMARY,
-  FONT_WEIGHTS,
-  FileExplorer,
-  Flex,
-  GLASS_COLOR_OVERLAYS,
-  GlassCard,
-  Grid,
-  H1,
-  H2,
-  H3,
-  H4,
-  H5,
-  H6,
-  HStack,
-  HeaderIconWithStatus,
-  HexViewer,
-  Icon,
-  ImageFrame,
-  ImageGallery,
-  ImagePanel,
-  Input,
-  Label,
-  LimitsBar,
-  LogViewer,
-  Menu,
-  MessageStream,
-  Micro,
-  MissionCalendar,
-  Mono,
-  NumberInput,
-  PROPERTY_PRESETS,
-  PacketViewer,
-  Pagination,
-  PinInput,
-  Popover,
-  REGION_BORDER_COLORS,
-  REGION_COLORS,
-  SIDENAV_HEADER_LOGO_SLOT_HEIGHT_PX,
-  Select,
-  SideNav,
-  SidePanel,
-  Spacer,
-  Stack,
-  Tabs,
-  ToastProvider,
-  Toggle,
-  Tooltip,
-  Typography,
-  VStack,
-  createChatResponseParser,
-  createPropertyConfig,
-  decodeImage,
-  deriveBatteryStatus,
-  deriveStatus,
-  formatPropertyLabel,
-  formatPropertyValue,
-  getIconNames,
-  getPropertiesByCategory,
-  getPropertyConfig,
-  isValidIconName,
-  loadCapturePlaceholderImage,
-  parseChatResponse,
-  parseMcpToolResult,
-  resolveResponsive,
-  resolveSpacing,
-  useBreakpoint,
-  useCapture,
-  useConfirm,
-  useCopyToClipboard,
-  useToast,
-  useToastManager
-};
-//# sourceMappingURL=index.js.map
+export { ActivityPlanner, AppBar, BREAKPOINTS, Badge, Body1, Body2, Body3, Box, Button, CATEGORY_ICONS, CATEGORY_LABELS, CHAT_RESPONSE_JSON_PROMPT, CHAT_RESPONSE_MCP_TOOL, CHAT_RESPONSE_TOOL_SCHEMA, CHAT_RESPONSE_YAML_PROMPT, CHAT_STATUS_RULES_PROMPT, Capture, CardHeader, Center, ChatPanel, Checkbox, ColorPickerPanel, CommandBuilder, Compact, ConfirmDialog, ConfirmProvider, ConnectionForm, Container, CopyButton, DataTable, DataTableRowDetail, DataText, DataValue, DataValueGroup, Dialog, Display1, Display2, Divider, FONT_FAMILY_MONO, FONT_FAMILY_PRIMARY, FONT_WEIGHTS, FileExplorer, Flex, GLASS_COLOR_OVERLAYS, GlassCard, Grid, H1, H2, H3, H4, H5, H6, HStack, HeaderIconWithStatus, HexViewer, Icon, ImageFrame, ImageGallery, ImagePanel, Input, Label, LimitsBar, LogViewer, Menu, MessageStream, Micro, MissionCalendar, Mono, NumberInput, PROPERTY_PRESETS, PacketViewer, Pagination, PinInput, Popover, REGION_BORDER_COLORS, REGION_COLORS, SIDENAV_HEADER_LOGO_SLOT_HEIGHT_PX, Select, SideNav, SidePanel, Spacer, Stack, Tabs, ToastProvider, Toggle, Tooltip, Typography, VStack, createChatResponseParser, createPropertyConfig, decodeImage, deriveBatteryStatus, deriveStatus, formatPropertyLabel, formatPropertyValue, getIconNames, getPropertiesByCategory, getPropertyConfig, isValidIconName, loadCapturePlaceholderImage, parseChatResponse, parseMcpToolResult, resolveResponsive, resolveSpacing, useBreakpoint, useCapture, useConfirm, useCopyToClipboard, useToast, useToastManager };

package/dist/react/core/inputs/Button.d.ts

@@ -1,7 +1,6 @@
 import { default as React } from 'react';
-
-export type ButtonVariant = 'primary' | 'secondary' | 'borderless';
-export type ButtonSize = 'small' | 'medium' | 'large';
+export type ButtonVariant = "primary" | "secondary" | "borderless";
+export type ButtonSize = "small" | "medium" | "large";
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     /** Visual variant */
     variant?: ButtonVariant;