@zendir/ui 0.2.21 → 0.3.1

package/dist/react/core/{ConfirmDialog.js → feedback/ConfirmDialog.js}

@@ -1,7 +1,7 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { memo, useRef, useId, useEffect, useState, useCallback, useContext, createContext } from "react";
 import { createPortal } from "react-dom";
-import { useTheme } from "../theme/ThemeProvider.js";
+import { useTheme } from "../../theme/ThemeProvider.js";
 const ConfirmDialog = memo(function ConfirmDialog2({
   open,
   onClose,

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

@@ -0,0 +1 @@
+{"version":3,"file":"ConfirmDialog.js","sources":["../../../../src/react/core/feedback/ConfirmDialog.tsx"],"sourcesContent":["/**\n * @zendir/ui - Confirmation Dialog\n * \n * Convenience wrapper over Dialog for confirm/cancel actions.\n * Provides both a component API and a `useConfirm()` hook for imperative usage.\n * \n * Astro UX Compliance:\n * - Status-based alert colors\n * - Focus trap, escape to close\n * - Primary button on right (Astro convention)\n * \n * @example\n * ```tsx\n * // Hook API (imperative)\n * const confirm = useConfirm();\n * const ok = await confirm({\n *   title: 'Reset Component',\n *   message: 'This will reboot the spacecraft and suspend commands for 120 seconds.',\n *   status: 'caution',\n *   confirmLabel: 'Reset',\n *   destructive: true,\n * });\n * if (ok) doReset();\n * \n * // Component API (declarative)\n * <ConfirmDialog\n *   open={isOpen}\n *   onClose={() => setOpen(false)}\n *   onConfirm={handleReset}\n *   title=\"Delete All Data?\"\n *   message=\"This cannot be undone.\"\n *   status=\"critical\"\n *   destructive\n * />\n * ```\n */\n\nimport React, { memo, useState, useCallback, useRef, useEffect, useId, createContext, useContext } from 'react';\nimport { createPortal } from 'react-dom';\nimport { useTheme } from '../../theme';\n\n// ─── Types ───────────────────────────────────────────────────────────────────\n\nexport type ConfirmStatus = 'normal' | 'caution' | 'serious' | 'critical';\n\nexport interface ConfirmOptions {\n  /** Dialog title */\n  title: string;\n  /** Description text (string or React node) */\n  message?: React.ReactNode;\n  /** Status level (determines icon/border color) */\n  status?: ConfirmStatus;\n  /** Confirm button label (default: \"Confirm\") */\n  confirmLabel?: string;\n  /** Cancel button label (default: \"Cancel\") */\n  cancelLabel?: string;\n  /** Destructive action styling (red confirm button) */\n  destructive?: boolean;\n}\n\nexport interface ConfirmDialogProps extends ConfirmOptions {\n  /** Open state */\n  open: boolean;\n  /** Close handler */\n  onClose: () => void;\n  /** Confirm handler */\n  onConfirm: () => void;\n}\n\n// ─── Component ───────────────────────────────────────────────────────────────\n\nexport const ConfirmDialog = memo(function ConfirmDialog({\n  open,\n  onClose,\n  onConfirm,\n  title,\n  message,\n  status,\n  confirmLabel = 'Confirm',\n  cancelLabel = 'Cancel',\n  destructive = false,\n}: ConfirmDialogProps): React.ReactElement | null {\n  const { tokens, theme } = useTheme();\n  const isTransparentTheme = theme === 'transparent' || theme === 'transparent-bold' || theme === 'transparent-minimal';\n  const dialogRef = useRef<HTMLDivElement>(null);\n  const confirmRef = useRef<HTMLButtonElement>(null);\n  const previousActiveElement = useRef<HTMLElement | null>(null);\n  const titleId = useId();\n  const messageId = useId();\n  const CONFIRM_DIALOG_Z_INDEX = 2147483200;\n\n  useEffect(() => {\n    if (!open) return;\n\n    previousActiveElement.current = document.activeElement as HTMLElement;\n    document.body.style.overflow = 'hidden';\n\n    const handleKeyDown = (e: KeyboardEvent): void => {\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        onClose();\n        return;\n      }\n\n      if (e.key !== 'Tab') return;\n      const root = dialogRef.current;\n      if (!root) return;\n\n      const focusableElements = root.querySelectorAll<HTMLElement>(\n        'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n      );\n      const focusable = Array.from(focusableElements).filter((el) => !el.hasAttribute('disabled'));\n      if (focusable.length === 0) return;\n\n      const first = focusable[0];\n      const last = focusable[focusable.length - 1];\n      const active = document.activeElement as HTMLElement | null;\n\n      if (e.shiftKey && active === first) {\n        e.preventDefault();\n        last.focus();\n      } else if (!e.shiftKey && active === last) {\n        e.preventDefault();\n        first.focus();\n      }\n    };\n\n    document.addEventListener('keydown', handleKeyDown);\n    const focusTimer = window.setTimeout(() => {\n      confirmRef.current?.focus();\n    }, 0);\n\n    return () => {\n      window.clearTimeout(focusTimer);\n      document.removeEventListener('keydown', handleKeyDown);\n      document.body.style.overflow = '';\n      previousActiveElement.current?.focus();\n    };\n  }, [open, onClose]);\n\n  if (!open) return null;\n  if (typeof document === 'undefined') return null;\n  \n  const statusColors: Record<string, string> = {\n    normal: tokens.colors.status.normal,\n    caution: tokens.colors.status.caution,\n    serious: tokens.colors.status.serious,\n    critical: tokens.colors.status.critical,\n  };\n  \n  const accentColor = status ? statusColors[status] : tokens.colors.accent.primary;\n  const confirmBg = destructive ? tokens.colors.status.critical : tokens.colors.accent.primary;\n  \n  // Status icon shapes (Astro UX dual-coded)\n  const statusIcon = status && (() => {\n    const s = 32;\n    const innerIcon = (\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke={accentColor} strokeWidth=\"2.5\" strokeLinecap=\"round\">\n        <path d=\"M12 9v4\" />\n        <path d=\"M12 17h.01\" />\n      </svg>\n    );\n    const baseStyle: React.CSSProperties = {\n      width: s,\n      height: s,\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      flexShrink: 0,\n    };\n    switch (status) {\n      case 'critical':\n        // Triangle (using clip-path)\n        return (\n          <div style={{\n            ...baseStyle,\n            backgroundColor: `${accentColor}20`,\n            border: `2px solid ${accentColor}`,\n            clipPath: 'polygon(50% 0%, 0% 100%, 100% 100%)',\n            paddingTop: 8,\n          }}>\n            {innerIcon}\n          </div>\n        );\n      case 'serious':\n        // Diamond (rotated square)\n        return (\n          <div style={{\n            ...baseStyle,\n            backgroundColor: `${accentColor}20`,\n            border: `2px solid ${accentColor}`,\n            transform: 'rotate(45deg)',\n          }}>\n            <div style={{ transform: 'rotate(-45deg)' }}>{innerIcon}</div>\n          </div>\n        );\n      case 'caution':\n        // Square (rounded)\n        return (\n          <div style={{\n            ...baseStyle,\n            backgroundColor: `${accentColor}20`,\n            border: `2px solid ${accentColor}`,\n            borderRadius: '4px',\n          }}>\n            {innerIcon}\n          </div>\n        );\n      default:\n        // Circle (normal, standby, off)\n        return (\n          <div style={{\n            ...baseStyle,\n            backgroundColor: `${accentColor}20`,\n            border: `2px solid ${accentColor}`,\n            borderRadius: '50%',\n          }}>\n            {innerIcon}\n          </div>\n        );\n    }\n  })();\n  \n  return createPortal((\n    <>\n      {/* Backdrop */}\n      <div\n        style={{\n          position: 'fixed',\n          inset: 0,\n          zIndex: CONFIRM_DIALOG_Z_INDEX,\n          backgroundColor: isTransparentTheme ? `${tokens.colors.background.base}80` : `${tokens.colors.background.base}B3`,\n          backdropFilter: 'blur(6px)',\n          WebkitBackdropFilter: 'blur(6px)',\n          animation: `zendir-confirm-backdrop 200ms ${tokens.animation.easing.default}`,\n        }}\n        onClick={onClose}\n      />\n      \n      {/* Dialog */}\n      <div\n        ref={dialogRef}\n        role=\"alertdialog\"\n        aria-modal=\"true\"\n        aria-labelledby={titleId}\n        aria-describedby={message ? messageId : undefined}\n        onClick={(e) => e.stopPropagation()}\n        style={{\n          position: 'fixed',\n          top: '50%',\n          left: '50%',\n          transform: 'translate(-50%, -50%)',\n          zIndex: CONFIRM_DIALOG_Z_INDEX + 1,\n          width: '100%',\n          maxWidth: 'min(440px, calc(100vw - 32px))',\n          backgroundColor: isTransparentTheme\n            ? 'rgba(15, 12, 30, 0.9)'\n            : tokens.colors.background.surface,\n          border: `1px solid ${tokens.colors.border.default}`,\n          borderRadius: tokens.borderRadius.lg,\n          boxShadow: tokens.shadows.xl,\n          fontFamily: tokens.typography.fontFamily.primary,\n          animation: `zendir-confirm-enter 250ms ${tokens.animation.easing.default}`,\n          overflow: 'hidden',\n          ...(isTransparentTheme ? {\n            backdropFilter: 'blur(20px)',\n            WebkitBackdropFilter: 'blur(20px)',\n          } : {}),\n        }}\n      >\n        {/* Status accent bar */}\n        {status && (\n          <div style={{\n            height: 3,\n            backgroundColor: accentColor,\n            width: '100%',\n          }} />\n        )}\n        \n        {/* Content */}\n        <div style={{ padding: `${tokens.spacing.lg} ${tokens.spacing.lg} ${tokens.spacing.md}` }}>\n          <div style={{ display: 'flex', gap: tokens.spacing.md, alignItems: 'flex-start' }}>\n            {statusIcon}\n            <div style={{ flex: 1 }}>\n              <div\n                id={titleId}\n                style={{\n                  fontSize: tokens.typography.fontSize.md,\n                  fontWeight: tokens.typography.fontWeight.semibold,\n                  color: tokens.colors.text.primary,\n                  lineHeight: tokens.typography.lineHeight.tight,\n                }}\n              >\n                {title}\n              </div>\n              {message && (\n                <div\n                  id={messageId}\n                  style={{\n                    fontSize: tokens.typography.fontSize.sm,\n                    color: tokens.colors.text.secondary,\n                    marginTop: tokens.spacing.sm,\n                    lineHeight: tokens.typography.lineHeight.normal,\n                  }}\n                >\n                  {message}\n                </div>\n              )}\n            </div>\n          </div>\n        </div>\n        \n        {/* Actions — Astro UX: primary on right */}\n        <div style={{\n          display: 'flex',\n          justifyContent: 'flex-end',\n          gap: tokens.spacing.sm,\n          padding: `${tokens.spacing.md} ${tokens.spacing.lg} ${tokens.spacing.lg}`,\n          borderTop: tokens.borders.divider,\n        }}>\n          <button\n            onClick={onClose}\n            style={{\n              padding: `0 ${tokens.spacing.md}`,\n              minHeight: tokens.elementSize.lg,\n              fontSize: tokens.typography.fontSize.sm,\n              fontWeight: tokens.typography.fontWeight.medium,\n              fontFamily: tokens.typography.fontFamily.primary,\n              color: tokens.colors.text.primary,\n              backgroundColor: tokens.colors.background.base,\n              border: `1px solid ${tokens.colors.border.muted}`,\n              borderRadius: tokens.borderRadius.md,\n              cursor: 'pointer',\n              transition: tokens.animation.fast,\n            }}\n          >\n            {cancelLabel}\n          </button>\n          <button\n            ref={confirmRef}\n            onClick={() => { onConfirm(); onClose(); }}\n            style={{\n              padding: `0 ${tokens.spacing.md}`,\n              minHeight: tokens.elementSize.lg,\n              fontSize: tokens.typography.fontSize.sm,\n              fontWeight: tokens.typography.fontWeight.semibold,\n              fontFamily: tokens.typography.fontFamily.primary,\n              color: tokens.colors.text.inverse || '#fff',\n              backgroundColor: confirmBg,\n              border: 'none',\n              borderRadius: tokens.borderRadius.md,\n              cursor: 'pointer',\n              transition: tokens.animation.fast,\n              boxShadow: `0 2px 8px ${confirmBg}40`,\n            }}\n          >\n            {confirmLabel}\n          </button>\n        </div>\n      </div>\n      \n      <style>{`\n        @keyframes zendir-confirm-backdrop { from { opacity: 0; } to { opacity: 1; } }\n        @keyframes zendir-confirm-enter {\n          from { opacity: 0; transform: translate(-50%, -50%) scale(0.95); }\n          to { opacity: 1; transform: translate(-50%, -50%) scale(1); }\n        }\n      `}</style>\n    </>\n  ), document.body);\n});\n\n// ─── useConfirm Hook ─────────────────────────────────────────────────────────\n\ninterface ConfirmState extends ConfirmOptions {\n  resolve: (value: boolean) => void;\n}\n\nconst ConfirmContext = createContext<{\n  requestConfirm: (options: ConfirmOptions) => Promise<boolean>;\n} | null>(null);\n\n/**\n * Imperative confirmation hook.\n * Must be used within `<ConfirmProvider>`.\n * \n * @example\n * ```tsx\n * const confirm = useConfirm();\n * const ok = await confirm({ title: 'Delete?', status: 'critical', destructive: true });\n * ```\n */\nexport function useConfirm(): (options: ConfirmOptions) => Promise<boolean> {\n  const ctx = useContext(ConfirmContext);\n  if (!ctx) throw new Error('useConfirm must be used within <ConfirmProvider>');\n  return ctx.requestConfirm;\n}\n\n/**\n * Provider for the useConfirm() hook.\n * Renders the confirmation dialog as needed.\n */\nexport const ConfirmProvider = memo(function ConfirmProvider({\n  children,\n}: {\n  children: React.ReactNode;\n}): React.ReactElement {\n  const [state, setState] = useState<ConfirmState | null>(null);\n  \n  const requestConfirm = useCallback((options: ConfirmOptions): Promise<boolean> => {\n    return new Promise<boolean>((resolve) => {\n      setState({ ...options, resolve });\n    });\n  }, []);\n  \n  const handleClose = useCallback(() => {\n    state?.resolve(false);\n    setState(null);\n  }, [state]);\n  \n  const handleConfirm = useCallback(() => {\n    state?.resolve(true);\n    setState(null);\n  }, [state]);\n  \n  return (\n    <ConfirmContext.Provider value={{ requestConfirm }}>\n      {children}\n      {state && (\n        <ConfirmDialog\n          open={true}\n          onClose={handleClose}\n          onConfirm={handleConfirm}\n          title={state.title}\n          message={state.message}\n          status={state.status}\n          confirmLabel={state.confirmLabel}\n          cancelLabel={state.cancelLabel}\n          destructive={state.destructive}\n        />\n      )}\n    </ConfirmContext.Provider>\n  );\n});\n\nexport default ConfirmDialog;\n"],"names":["ConfirmDialog","ConfirmProvider"],"mappings":"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"}

package/dist/react/core/{Dialog.js → feedback/Dialog.js}

@@ -1,8 +1,8 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { memo, useRef, useId, useCallback, useEffect } from "react";
 import { createPortal } from "react-dom";
-import { classNames } from "../utils/index.js";
-import { useTheme } from "../theme/ThemeProvider.js";
+import { useTheme } from "../../theme/ThemeProvider.js";
+import { classNames } from "../../utils/index.js";
 const DialogActions = memo(function DialogActions2({
   children,
   align = "right"

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

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.js","sources":["../../../../src/react/core/feedback/Dialog.tsx"],"sourcesContent":["/**\n * @zendir/ui - Dialog/Modal Component\n * \n * Modal dialog following Astro UX Design System.\n * \n * @example\n * ```tsx\n * <Dialog\n *   open={isOpen}\n *   onClose={() => setIsOpen(false)}\n *   title=\"Confirm Action\"\n * >\n *   <p>Are you sure you want to proceed?</p>\n *   <Dialog.Actions>\n *     <Button variant=\"secondary\" onClick={() => setIsOpen(false)}>Cancel</Button>\n *     <Button onClick={handleConfirm}>Confirm</Button>\n *   </Dialog.Actions>\n * </Dialog>\n * ```\n */\n\nimport React, { memo, useEffect, useRef, useCallback, useId } from 'react';\nimport { createPortal } from 'react-dom';\nimport { useTheme } from '../../theme';\nimport { classNames } from '../../utils';\n\nexport type DialogSize = 'small' | 'medium' | 'large' | 'fullscreen';\n\nexport interface DialogProps {\n  /** Open state */\n  open: boolean;\n  /** Close handler */\n  onClose: () => void;\n  /** Dialog title */\n  title?: string;\n  /** Size variant */\n  size?: DialogSize;\n  /** Show close button */\n  showCloseButton?: boolean;\n  /** Close on backdrop click */\n  closeOnBackdropClick?: boolean;\n  /** Close on escape key */\n  closeOnEscape?: boolean;\n  /** Children */\n  children: React.ReactNode;\n  /** Custom className */\n  className?: string;\n}\n\nexport interface DialogActionsProps {\n  children: React.ReactNode;\n  align?: 'left' | 'center' | 'right';\n}\n\nconst DialogActions = memo(function DialogActions({\n  children,\n  align = 'right',\n}: DialogActionsProps): React.ReactElement {\n  const { tokens } = useTheme();\n  \n  return (\n    <div\n      style={{\n        display: 'flex',\n        justifyContent: align === 'left' ? 'flex-start' : align === 'right' ? 'flex-end' : 'center',\n        gap: tokens.spacing.sm,\n        marginTop: tokens.spacing.lg,\n        paddingTop: tokens.spacing.md,\n        borderTop: tokens.borders.divider,\n      }}\n    >\n      {children}\n    </div>\n  );\n});\n\nexport const Dialog = memo(function Dialog({\n  open,\n  onClose,\n  title,\n  size = 'medium',\n  showCloseButton = true,\n  closeOnBackdropClick = true,\n  closeOnEscape = true,\n  children,\n  className = '',\n}: DialogProps): React.ReactElement | null {\n  const { tokens, theme } = useTheme();\n  const isTransparentTheme = theme === 'transparent' || theme === 'transparent-bold' || theme === 'transparent-minimal';\n  const dialogRef = useRef<HTMLDivElement>(null);\n  const previousActiveElement = useRef<HTMLElement | null>(null);\n  const titleId = useId();\n  const DIALOG_Z_INDEX = 2147483000;\n  \n  const sizeConfig = {\n    small: { width: 'min(360px, calc(100vw - 32px))', maxHeight: '80vh' },\n    medium: { width: 'min(540px, calc(100vw - 32px))', maxHeight: '80vh' },\n    large: { width: 'min(800px, calc(100vw - 32px))', maxHeight: '90vh' },\n    fullscreen: { width: '100vw', maxHeight: '100vh' },\n  };\n  const config = sizeConfig[size];\n  \n  // Handle escape key\n  const handleKeyDown = useCallback((e: KeyboardEvent) => {\n    if (closeOnEscape && e.key === 'Escape') {\n      onClose();\n    }\n  }, [closeOnEscape, onClose]);\n  \n  // Focus trap and escape key\n  useEffect(() => {\n    if (open) {\n      previousActiveElement.current = document.activeElement as HTMLElement;\n      document.body.style.overflow = 'hidden';\n      document.addEventListener('keydown', handleKeyDown);\n      \n      // Focus first focusable element\n      const focusTimer = setTimeout(() => {\n        const focusable = dialogRef.current?.querySelector<HTMLElement>(\n          'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n        );\n        focusable?.focus();\n      }, 0);\n      \n      return () => {\n        clearTimeout(focusTimer);\n        document.body.style.overflow = '';\n        document.removeEventListener('keydown', handleKeyDown);\n        previousActiveElement.current?.focus();\n      };\n    }\n  }, [open, handleKeyDown]);\n  \n  if (!open) return null;\n  if (typeof document === 'undefined') return null;\n\n  return createPortal((\n    <div\n      className={classNames('zendir-dialog-backdrop', className)}\n      onClick={closeOnBackdropClick ? onClose : undefined}\n      style={{\n        position: 'fixed',\n        inset: 0,\n        backgroundColor: isTransparentTheme ? `${tokens.colors.background.base}66` : `${tokens.colors.background.base}99`,\n        backdropFilter: isTransparentTheme ? 'blur(4px)' : undefined,\n        WebkitBackdropFilter: isTransparentTheme ? 'blur(4px)' : undefined,\n        display: 'flex',\n        alignItems: size === 'fullscreen' ? 'stretch' : 'center',\n        justifyContent: 'center',\n        zIndex: DIALOG_Z_INDEX,\n        animation: `zendir-dialog-backdrop ${tokens.animation.duration.normal}ms ${tokens.animation.easing.default} both`,\n      }}\n    >\n      <div\n        ref={dialogRef}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby={title ? titleId : undefined}\n        className=\"zendir-dialog\"\n        onClick={(e) => e.stopPropagation()}\n        style={{\n          width: config.width,\n          maxWidth: size === 'fullscreen' ? '100vw' : 'calc(100vw - 32px)',\n          maxHeight: config.maxHeight,\n          backgroundColor: isTransparentTheme ? 'rgba(139, 92, 246, 0.08)' : tokens.colors.background.surface,\n          ...(isTransparentTheme && { backdropFilter: 'blur(16px)', WebkitBackdropFilter: 'blur(16px)', border: '1px solid rgba(139, 92, 246, 0.2)' }),\n          borderRadius: size === 'fullscreen' ? 0 : tokens.borderRadius.lg,\n          boxShadow: tokens.shadows.xl,\n          display: 'flex',\n          flexDirection: 'column',\n          overflow: 'hidden',\n          animation: `zendir-dialog-panel ${tokens.animation.duration.normal}ms ${tokens.animation.easing.default} both`,\n        }}\n      >\n        {/* Header */}\n        {(title || showCloseButton) && (\n          <div\n            style={{\n              display: 'flex',\n              alignItems: 'center',\n              justifyContent: 'space-between',\n              padding: `${tokens.spacing.md} ${tokens.spacing.lg}`,\n              borderBottom: tokens.borders.divider,\n            }}\n          >\n            {title && (\n              <h2\n                id={titleId}\n                style={{\n                  margin: 0,\n                  fontSize: tokens.typography.fontSize.lg,\n                  fontWeight: tokens.typography.fontWeight.semibold,\n                  color: tokens.colors.text.primary,\n                }}\n              >\n                {title}\n              </h2>\n            )}\n            {showCloseButton && (\n              <button\n                type=\"button\"\n                onClick={onClose}\n                aria-label=\"Close dialog\"\n                style={{\n                  padding: tokens.spacing.sm,\n                  minWidth: 44,\n                  minHeight: 44,\n                  backgroundColor: 'transparent',\n                  border: 'none',\n                  borderRadius: tokens.borderRadius.sm,\n                  cursor: 'pointer',\n                  color: tokens.colors.text.muted ?? tokens.colors.text.tertiary,\n                  display: 'flex',\n                  alignItems: 'center',\n                  justifyContent: 'center',\n                  transition: `color ${tokens.animation.fast}`,\n                }}\n                onMouseEnter={(e) => {\n                  e.currentTarget.style.color = tokens.colors.text.primary;\n                }}\n                onMouseLeave={(e) => {\n                  e.currentTarget.style.color = tokens.colors.text.muted ?? tokens.colors.text.tertiary;\n                }}\n              >\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n                  <path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\" />\n                </svg>\n              </button>\n            )}\n          </div>\n        )}\n        \n        {/* Content */}\n        <div\n          style={{\n            flex: 1,\n            padding: tokens.spacing.lg,\n            overflow: 'auto',\n          }}\n        >\n          {children}\n        </div>\n      </div>\n      \n      <style>\n        {`\n          @keyframes zendir-dialog-backdrop { from { opacity: 0; } to { opacity: 1; } }\n          @keyframes zendir-dialog-panel { from { transform: scale(0.96); opacity: 0; } to { transform: scale(1); opacity: 1; } }\n        `}\n      </style>\n    </div>\n  ), document.body);\n}) as React.NamedExoticComponent<DialogProps> & {\n  Actions: typeof DialogActions;\n};\n\n// Attach subcomponent\n(Dialog as any).Actions = DialogActions;\n\nexport default Dialog;\n"],"names":["DialogActions","Dialog"],"mappings":";;;;;AAsDA,MAAM,gBAAgB,KAAK,SAASA,eAAc;AAAA,EAChD;AAAA,EACA,QAAQ;AACV,GAA2C;AACzC,QAAM,EAAE,OAAA,IAAW,SAAA;AAEnB,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,QACL,SAAS;AAAA,QACT,gBAAgB,UAAU,SAAS,eAAe,UAAU,UAAU,aAAa;AAAA,QACnF,KAAK,OAAO,QAAQ;AAAA,QACpB,WAAW,OAAO,QAAQ;AAAA,QAC1B,YAAY,OAAO,QAAQ;AAAA,QAC3B,WAAW,OAAO,QAAQ;AAAA,MAAA;AAAA,MAG3B;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;AAEM,MAAM,SAAS,KAAK,SAASC,QAAO;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,kBAAkB;AAAA,EAClB,uBAAuB;AAAA,EACvB,gBAAgB;AAAA,EAChB;AAAA,EACA,YAAY;AACd,GAA2C;AACzC,QAAM,EAAE,QAAQ,MAAA,IAAU,SAAA;AAC1B,QAAM,qBAAqB,UAAU,iBAAiB,UAAU,sBAAsB,UAAU;AAChG,QAAM,YAAY,OAAuB,IAAI;AAC7C,QAAM,wBAAwB,OAA2B,IAAI;AAC7D,QAAM,UAAU,MAAA;AAChB,QAAM,iBAAiB;AAEvB,QAAM,aAAa;AAAA,IACjB,OAAO,EAAE,OAAO,kCAAkC,WAAW,OAAA;AAAA,IAC7D,QAAQ,EAAE,OAAO,kCAAkC,WAAW,OAAA;AAAA,IAC9D,OAAO,EAAE,OAAO,kCAAkC,WAAW,OAAA;AAAA,IAC7D,YAAY,EAAE,OAAO,SAAS,WAAW,QAAA;AAAA,EAAQ;AAEnD,QAAM,SAAS,WAAW,IAAI;AAG9B,QAAM,gBAAgB,YAAY,CAAC,MAAqB;AACtD,QAAI,iBAAiB,EAAE,QAAQ,UAAU;AACvC,cAAA;AAAA,IACF;AAAA,EACF,GAAG,CAAC,eAAe,OAAO,CAAC;AAG3B,YAAU,MAAM;AACd,QAAI,MAAM;AACR,4BAAsB,UAAU,SAAS;AACzC,eAAS,KAAK,MAAM,WAAW;AAC/B,eAAS,iBAAiB,WAAW,aAAa;AAGlD,YAAM,aAAa,WAAW,MAAM;;AAClC,cAAM,aAAY,eAAU,YAAV,mBAAmB;AAAA,UACnC;AAAA;AAEF,+CAAW;AAAA,MACb,GAAG,CAAC;AAEJ,aAAO,MAAM;;AACX,qBAAa,UAAU;AACvB,iBAAS,KAAK,MAAM,WAAW;AAC/B,iBAAS,oBAAoB,WAAW,aAAa;AACrD,oCAAsB,YAAtB,mBAA+B;AAAA,MACjC;AAAA,IACF;AAAA,EACF,GAAG,CAAC,MAAM,aAAa,CAAC;AAExB,MAAI,CAAC,KAAM,QAAO;AAClB,MAAI,OAAO,aAAa,YAAa,QAAO;AAE5C,SAAO,aACL;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,WAAW,0BAA0B,SAAS;AAAA,MACzD,SAAS,uBAAuB,UAAU;AAAA,MAC1C,OAAO;AAAA,QACL,UAAU;AAAA,QACV,OAAO;AAAA,QACP,iBAAiB,qBAAqB,GAAG,OAAO,OAAO,WAAW,IAAI,OAAO,GAAG,OAAO,OAAO,WAAW,IAAI;AAAA,QAC7G,gBAAgB,qBAAqB,cAAc;AAAA,QACnD,sBAAsB,qBAAqB,cAAc;AAAA,QACzD,SAAS;AAAA,QACT,YAAY,SAAS,eAAe,YAAY;AAAA,QAChD,gBAAgB;AAAA,QAChB,QAAQ;AAAA,QACR,WAAW,0BAA0B,OAAO,UAAU,SAAS,MAAM,MAAM,OAAO,UAAU,OAAO,OAAO;AAAA,MAAA;AAAA,MAG5G,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAK;AAAA,YACL,MAAK;AAAA,YACL,cAAW;AAAA,YACX,mBAAiB,QAAQ,UAAU;AAAA,YACnC,WAAU;AAAA,YACV,SAAS,CAAC,MAAM,EAAE,gBAAA;AAAA,YAClB,OAAO;AAAA,cACL,OAAO,OAAO;AAAA,cACd,UAAU,SAAS,eAAe,UAAU;AAAA,cAC5C,WAAW,OAAO;AAAA,cAClB,iBAAiB,qBAAqB,6BAA6B,OAAO,OAAO,WAAW;AAAA,cAC5F,GAAI,sBAAsB,EAAE,gBAAgB,cAAc,sBAAsB,cAAc,QAAQ,oCAAA;AAAA,cACtG,cAAc,SAAS,eAAe,IAAI,OAAO,aAAa;AAAA,cAC9D,WAAW,OAAO,QAAQ;AAAA,cAC1B,SAAS;AAAA,cACT,eAAe;AAAA,cACf,UAAU;AAAA,cACV,WAAW,uBAAuB,OAAO,UAAU,SAAS,MAAM,MAAM,OAAO,UAAU,OAAO,OAAO;AAAA,YAAA;AAAA,YAIvG,UAAA;AAAA,eAAA,SAAS,oBACT;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,OAAO;AAAA,oBACL,SAAS;AAAA,oBACT,YAAY;AAAA,oBACZ,gBAAgB;AAAA,oBAChB,SAAS,GAAG,OAAO,QAAQ,EAAE,IAAI,OAAO,QAAQ,EAAE;AAAA,oBAClD,cAAc,OAAO,QAAQ;AAAA,kBAAA;AAAA,kBAG9B,UAAA;AAAA,oBAAA,SACC;AAAA,sBAAC;AAAA,sBAAA;AAAA,wBACC,IAAI;AAAA,wBACJ,OAAO;AAAA,0BACL,QAAQ;AAAA,0BACR,UAAU,OAAO,WAAW,SAAS;AAAA,0BACrC,YAAY,OAAO,WAAW,WAAW;AAAA,0BACzC,OAAO,OAAO,OAAO,KAAK;AAAA,wBAAA;AAAA,wBAG3B,UAAA;AAAA,sBAAA;AAAA,oBAAA;AAAA,oBAGJ,mBACC;AAAA,sBAAC;AAAA,sBAAA;AAAA,wBACC,MAAK;AAAA,wBACL,SAAS;AAAA,wBACT,cAAW;AAAA,wBACX,OAAO;AAAA,0BACL,SAAS,OAAO,QAAQ;AAAA,0BACxB,UAAU;AAAA,0BACV,WAAW;AAAA,0BACX,iBAAiB;AAAA,0BACjB,QAAQ;AAAA,0BACR,cAAc,OAAO,aAAa;AAAA,0BAClC,QAAQ;AAAA,0BACR,OAAO,OAAO,OAAO,KAAK,SAAS,OAAO,OAAO,KAAK;AAAA,0BACtD,SAAS;AAAA,0BACT,YAAY;AAAA,0BACZ,gBAAgB;AAAA,0BAChB,YAAY,SAAS,OAAO,UAAU,IAAI;AAAA,wBAAA;AAAA,wBAE5C,cAAc,CAAC,MAAM;AACnB,4BAAE,cAAc,MAAM,QAAQ,OAAO,OAAO,KAAK;AAAA,wBACnD;AAAA,wBACA,cAAc,CAAC,MAAM;AACnB,4BAAE,cAAc,MAAM,QAAQ,OAAO,OAAO,KAAK,SAAS,OAAO,OAAO,KAAK;AAAA,wBAC/E;AAAA,wBAEA,UAAA,oBAAC,OAAA,EAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,gBACnD,UAAA,oBAAC,QAAA,EAAK,GAAE,yGAAwG,EAAA,CAClH;AAAA,sBAAA;AAAA,oBAAA;AAAA,kBACF;AAAA,gBAAA;AAAA,cAAA;AAAA,cAMN;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,OAAO;AAAA,oBACL,MAAM;AAAA,oBACN,SAAS,OAAO,QAAQ;AAAA,oBACxB,UAAU;AAAA,kBAAA;AAAA,kBAGX;AAAA,gBAAA;AAAA,cAAA;AAAA,YACH;AAAA,UAAA;AAAA,QAAA;AAAA,4BAGD,SAAA,EACE,UAAA;AAAA;AAAA;AAAA,UAAA,CAIH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAED,SAAS,IAAI;AAClB,CAAC;AAKA,OAAe,UAAU;"}

package/dist/react/core/{Toast.js → feedback/Toast.js}

@@ -1,8 +1,8 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { memo, useState, useRef, useCallback, useContext, createContext, useEffect } from "react";
-import { safeAccentText } from "../utils/index.js";
-import { useBreakpoint } from "./layout/useBreakpoint.js";
-import { useTheme } from "../theme/ThemeProvider.js";
+import { useTheme } from "../../theme/ThemeProvider.js";
+import { safeAccentText } from "../../utils/index.js";
+import { useBreakpoint } from "../layout/useBreakpoint.js";
 const ToastContext = createContext(null);
 function useToast() {
   const ctx = useContext(ToastContext);

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

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

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

@@ -4,57 +4,57 @@
  * Foundational UI components following Astro UX Design System.
  * These are the building blocks for creating space operations interfaces.
  */
-export { Icon, getIconNames, isValidIconName } from './Icon';
-export type { IconProps, IconName } from './Icon';
-export type { AstroIconProps, AstroIconName, AstroIconSize } from './AstroIcon';
-export { Button } from './Button';
-export type { ButtonProps, ButtonVariant, ButtonSize } from './Button';
-export { Input } from './Input';
-export type { InputProps, InputSize, LabelPlacement } from './Input';
-export { Select } from './Select';
-export type { SelectProps, SelectOption } from './Select';
-export { Toggle } from './Toggle';
-export type { ToggleProps } from './Toggle';
-export { Checkbox } from './Checkbox';
-export type { CheckboxProps } from './Checkbox';
-export { Tooltip } from './Tooltip';
-export type { TooltipProps, TooltipPlacement } from './Tooltip';
-export { Dialog } from './Dialog';
-export type { DialogProps, DialogActionsProps, DialogSize } from './Dialog';
-export { Badge } from './Badge';
-export type { BadgeProps, BadgeVariant, BadgeSize } from './Badge';
-export { Tabs } from './Tabs';
-export type { TabsProps, TabsListProps, TabProps, TabsPanelProps } from './Tabs';
-export { Container } from './Container';
-export type { ContainerProps, ContainerVariant, ContainerPadding } from './Container';
-export { GlassCard, GLASS_COLOR_OVERLAYS } from './GlassCard';
-export type { GlassCardProps, GlassColorOverlay, GlassAccentPosition } from './GlassCard';
-export { Pagination } from './Pagination';
-export type { PaginationProps } from './Pagination';
-export { DataValue, DataValueGroup } from './DataValue';
-export type { DataValueProps, DataValueGroupProps, DataValueVariant, DataValueSize } from './DataValue';
-export { HeaderIconWithStatus } from './HeaderIconWithStatus';
-export type { HeaderIconWithStatusProps } from './HeaderIconWithStatus';
-export { CardHeader } from './CardHeader';
-export type { CardHeaderProps } from './CardHeader';
-export { getPropertyConfig, formatPropertyLabel, deriveStatus, deriveBatteryStatus, formatPropertyValue, createPropertyConfig, getPropertiesByCategory, PROPERTY_PRESETS, CATEGORY_ICONS, CATEGORY_LABELS, } from './propertyConfig';
-export type { PropertyConfig, PropertyKey, PropertyCategory, StatusThresholds, } from './propertyConfig';
-export { MessageStream } from './MessageStream';
-export type { MessageStreamProps, StreamMessage } from './MessageStream';
-export { AppBar } from './AppBar';
-export type { AppBarProps, AppBarBranding } from './AppBar';
-export { ColorPickerPanel } from './ColorPickerPanel';
-export type { ColorPickerPanelProps } from './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 './Typography';
-export type { TypographyProps, TypographyVariant, TypographyElement, TypographyColor, } from './Typography';
-export { NumberInput } from './NumberInput';
-export type { NumberInputProps, NumberInputSize, SliderStatus } from './NumberInput';
-export { SideNav, SIDENAV_HEADER_LOGO_SLOT_HEIGHT_PX } from './SideNav';
-export type { SideNavProps, SideNavHeaderProps, SideNavItemProps, SideNavSectionProps, SideNavFooterProps } from './SideNav';
-export { ToastProvider, useToast, useToastManager } from './Toast';
-export type { ToastOptions, ToastStatus, ToastPosition, ToastProviderProps } from './Toast';
-export { Popover, Menu } from './Popover';
-export type { PopoverProps, PopoverPlacement, MenuProps, MenuItemProps } from './Popover';
+export { Icon, getIconNames, isValidIconName } from './display/Icon';
+export type { IconProps, IconName } from './display/Icon';
+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';
+export type { InputProps, InputSize, LabelPlacement } from './inputs/Input';
+export { Select } from './inputs/Select';
+export type { SelectProps, SelectOption } from './inputs/Select';
+export { Toggle } from './inputs/Toggle';
+export type { ToggleProps } from './inputs/Toggle';
+export { Checkbox } from './inputs/Checkbox';
+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 { 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 { Container } 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 { 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 { HeaderIconWithStatus } from './display/HeaderIconWithStatus';
+export type { HeaderIconWithStatusProps } from './display/HeaderIconWithStatus';
+export { CardHeader } from './display/CardHeader';
+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 { AppBar } from './navigation/AppBar';
+export type { AppBarProps, AppBarBranding } from './navigation/AppBar';
+export { ColorPickerPanel } from './widgets/ColorPickerPanel';
+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 { ToastProvider, useToast, useToastManager } 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 { Box } from './layout/Box';
 export type { BoxProps } from './layout/Box';
 export { Flex } from './layout/Flex';
@@ -73,37 +73,37 @@ 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 './ConfirmDialog';
-export type { ConfirmDialogProps, ConfirmOptions, ConfirmStatus } from './ConfirmDialog';
-export { PinInput } from './PinInput';
-export type { PinInputProps } from './PinInput';
-export { CopyButton, useCopyToClipboard } from './CopyButton';
-export type { CopyButtonProps, UseCopyToClipboardReturn } from './CopyButton';
-export { DataTable, DataTableRowDetail } from './DataTable';
-export type { DataTableProps, DataTableColumn, DataTableRowDetailProps, DataTableRowDetailField } from './DataTable';
-export { ImageGallery } from './ImageGallery';
-export type { ImageGalleryProps, GalleryImage } from './ImageGallery';
-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 './ChatPanel';
-export type { ChatPanelProps, ChatMessage, ChatBlock, ChatBlockEvent, ChatBlockAlert, ChatBlockTelemetry, ChatBlockProgress, ChatBlockTable, ChatBlockActions, ChatBlockChoice, ChatBlockConfirm, ChatBlockCommand, ChatBlockKV, ChatResponseFormat, ChatResponsePayload, ChatResponseParserOptions, McpToolContent, McpToolResult } from './ChatPanel';
-export { ConnectionForm } from './ConnectionForm';
-export type { ConnectionFormProps, ConnectionConfig } from './ConnectionForm';
-export { SidePanel } from './SidePanel';
-export type { SidePanelProps, SidePanelPosition } from './SidePanel';
-export { HexViewer, REGION_COLORS, REGION_BORDER_COLORS } from './HexViewer';
-export type { HexViewerProps, HexHighlight, HexRegion, DecodedField, PacketHeaderEntry, ByteGrouping, OffsetBase, Endianness } from './HexViewer';
-export { LimitsBar } from './LimitsBar';
-export type { LimitsBarProps, LimitsState } from './LimitsBar';
-export { LogViewer } from './LogViewer';
-export type { LogViewerProps, LogEntry, LogSeverity } from './LogViewer';
-export { PacketViewer } from './PacketViewer';
-export type { PacketViewerProps, PacketItem, PacketItemLimits, PacketItemLimitsState, PacketViewMode } from './PacketViewer';
-export { CommandBuilder } from './CommandBuilder';
-export type { CommandBuilderProps, CommandParameter, CommandParamType, CommandHistoryEntry } from './CommandBuilder';
-export { FileExplorer } from './FileExplorer';
-export type { FileExplorerProps, FileNode, FileViewMode, FileSortBy } from './FileExplorer';
-export { MissionCalendar } from './MissionCalendar';
-export type { MissionCalendarProps, CalendarEvent, CalendarTimeline, CalendarViewMode, ActivityStatus, ActivityType, } from './MissionCalendar';
-export { ActivityPlanner } from './ActivityPlanner';
-export type { ActivityPlannerProps, ActivityFormData, } from './ActivityPlanner';
-export { Capture, useCapture, loadCapturePlaceholderImage } from './Capture';
-export type { CaptureProps, CaptureHandle, CaptureRequest, CaptureArgs, CapturedImage, UseCaptureOptions, UseCaptureResult, } from './Capture';
+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 { DataTable, DataTableRowDetail } 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 { 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 { 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 { 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 { PacketViewer } 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 { FileExplorer } 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 type { CaptureProps, CaptureHandle, CaptureRequest, CaptureArgs, CapturedImage, UseCaptureOptions, UseCaptureResult, } from './widgets/Capture';

package/dist/react/core/index.js

@@ -0,0 +1,161 @@
+import { Icon, getIconNames, isValidIconName } from "./display/Icon.js";
+import { Button } from "./inputs/Button.js";
+import { Input } from "./inputs/Input.js";
+import { Select } from "./inputs/Select.js";
+import { Toggle } from "./inputs/Toggle.js";
+import { Checkbox } from "./inputs/Checkbox.js";
+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 { 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 { MessageStream } from "./widgets/MessageStream.js";
+import { AppBar } from "./navigation/AppBar.js";
+import { ColorPickerPanel } from "./widgets/ColorPickerPanel.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 { Box } from "./layout/Box.js";
+import { Flex } from "./layout/Flex.js";
+import { Grid } from "./layout/Grid.js";
+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";
+import { DataTable, DataTableRowDetail } from "./data/DataTable.js";
+import { ImageGallery } from "./widgets/ImageGallery.js";
+import { CHAT_RESPONSE_JSON_PROMPT, CHAT_RESPONSE_MCP_TOOL, CHAT_RESPONSE_TOOL_SCHEMA, CHAT_RESPONSE_YAML_PROMPT, CHAT_STATUS_RULES_PROMPT, ChatPanel, createChatResponseParser, parseChatResponse, parseMcpToolResult } from "./widgets/ChatPanel.js";
+import { ConnectionForm } from "./widgets/ConnectionForm.js";
+import { SidePanel } from "./overlays/SidePanel.js";
+import { HexViewer, REGION_BORDER_COLORS, REGION_COLORS } from "./widgets/HexViewer.js";
+import { LimitsBar } from "./inputs/LimitsBar.js";
+import { LogViewer } from "./widgets/LogViewer.js";
+import { PacketViewer } from "./widgets/PacketViewer.js";
+import { CommandBuilder } from "./widgets/CommandBuilder.js";
+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,
+  ImageGallery,
+  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,
+  deriveBatteryStatus,
+  deriveStatus,
+  formatPropertyLabel,
+  formatPropertyValue,
+  getIconNames,
+  getPropertiesByCategory,
+  getPropertyConfig,
+  isValidIconName,
+  loadCapturePlaceholderImage,
+  parseChatResponse,
+  parseMcpToolResult,
+  resolveResponsive,
+  resolveSpacing,
+  useBreakpoint,
+  useCapture,
+  useConfirm,
+  useCopyToClipboard,
+  useToast,
+  useToastManager
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/react/core/{Button.js → inputs/Button.js}

@@ -1,8 +1,8 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { memo, forwardRef, useState, useMemo, useRef, useCallback, useLayoutEffect } from "react";
 import ReactDOM from "react-dom";
-import { safeAccentText, classNames } from "../utils/index.js";
-import { useTheme } from "../theme/ThemeProvider.js";
+import { useTheme } from "../../theme/ThemeProvider.js";
+import { safeAccentText, classNames } from "../../utils/index.js";
 const Button = memo(forwardRef(function Button2({
   variant = "primary",
   size = "medium",

package/dist/react/core/inputs/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sources":["../../../../src/react/core/inputs/Button.tsx"],"sourcesContent":["/**\n * @zendir/ui - Button Component\n * \n * Enterprise-grade button following Astro UX Design System with Zendir purple accents.\n * \n * Astro UX Compliance:\n * - Three visual variants: primary, secondary, borderless\n * - Size variants: small, medium, large\n * - Sentence case capitalization\n * - Focus ring for accessibility (WCAG 2.1 AA)\n * - Right-align in button groups (primary on right)\n * \n * Zendir Enhancements:\n * - Purple accent colors\n * - Smooth micro-interactions\n * - Subtle glow effects\n * - Modern glassmorphism hover states\n * \n * @example\n * ```tsx\n * <Button>Primary Action</Button>\n * <Button variant=\"secondary\">Cancel</Button>\n * <Button variant=\"borderless\" icon={<Icon name=\"settings\" />}>Settings</Button>\n * <Button loading>Saving...</Button>\n * ```\n */\n\nimport React, { memo, forwardRef, useState, useMemo, useRef, useLayoutEffect, useCallback } from 'react';\nimport ReactDOM from 'react-dom';\nimport { useTheme } from '../../theme';\nimport { classNames, safeAccentText } from '../../utils';\n\nexport type ButtonVariant = 'primary' | 'secondary' | 'borderless';\nexport type ButtonSize = 'small' | 'medium' | 'large';\n\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Visual variant */\n  variant?: ButtonVariant;\n  /** Size variant */\n  size?: ButtonSize;\n  /** Icon to display before text */\n  icon?: React.ReactNode;\n  /** Icon to display after text */\n  iconEnd?: React.ReactNode;\n  /** Show loading spinner */\n  loading?: boolean;\n  /** Full width button */\n  fullWidth?: boolean;\n  /** Tooltip text (shows on hover) */\n  tooltip?: string;\n  /** Custom className */\n  className?: string;\n  /** Children */\n  children?: React.ReactNode;\n}\n\nexport const Button = memo(forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n  {\n    variant = 'primary',\n    size = 'medium',\n    icon,\n    iconEnd,\n    loading = false,\n    fullWidth = false,\n    tooltip,\n    disabled,\n    className = '',\n    children,\n    style,\n    onMouseEnter,\n    onMouseLeave,\n    onFocus,\n    onBlur,\n    ...rest\n  },\n  ref\n): React.ReactElement {\n  const { tokens, theme } = useTheme();\n  \n  // Spin keyframe is used by loading spinner only (injected there)\n\n  const isTransparentTheme = theme === 'transparent' || theme === 'transparent-bold' || theme === 'transparent-minimal';\n  const [isHovered, setIsHovered] = useState(false);\n  const [isActive, setIsActive] = useState(false);\n  const [isFocused, setIsFocused] = useState(false);\n  const [showTooltip, setShowTooltip] = useState(false);\n  \n  const isDisabled = disabled || loading;\n  const transparentDefault = tokens.colors.interactive.transparentDefault;\n  const transparentHover = tokens.colors.interactive.transparentHover;\n\n  // WCAG AA: compute a button-safe background from accent.primary\n  // If white text (#fff) on the accent bg doesn't meet 4.5:1, darken it proportionally.\n  const safeAccentBg = useMemo(() => {\n    const hex = tokens.colors.accent.primary.replace('#', '');\n    if (hex.length < 6) return tokens.colors.accent.primary;\n    const toLinear = (c: number) => c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);\n    const r = parseInt(hex.slice(0, 2), 16) / 255;\n    const g = parseInt(hex.slice(2, 4), 16) / 255;\n    const b = parseInt(hex.slice(4, 6), 16) / 255;\n    const L = 0.2126 * toLinear(r) + 0.7152 * toLinear(g) + 0.0722 * toLinear(b);\n    if ((1.05 / (L + 0.05)) >= 4.5) return tokens.colors.accent.primary;\n    // Darken just enough: target L for ~4.7:1 contrast with white\n    const factor = 0.88;\n    const dr = Math.min(255, Math.round(r * 255 * factor));\n    const dg = Math.min(255, Math.round(g * 255 * factor));\n    const db = Math.min(255, Math.round(b * 255 * factor));\n    return `#${dr.toString(16).padStart(2, '0')}${dg.toString(16).padStart(2, '0')}${db.toString(16).padStart(2, '0')}`;\n  }, [tokens.colors.accent.primary]);\n\n  // WCAG AA safe accent for use as foreground text on dark backgrounds\n  const safeAccentFg = useMemo(() => safeAccentText(tokens.colors.accent.primary), [tokens.colors.accent.primary]);\n  \n  const sizeConfig = {\n    small: {\n      padding: `${tokens.spacing.xxs} ${tokens.spacing.smd}`,\n      fontSize: tokens.typography.fontSize.xs,\n      height: '24px',\n      gap: tokens.spacing.xs,\n      iconSize: 13,\n      borderRadius: tokens.borderRadius.sm,\n    },\n    medium: {\n      padding: `${tokens.spacing.xxs} ${tokens.spacing.md}`,\n      fontSize: tokens.typography.fontSize.sm,\n      height: '28px',\n      gap: tokens.spacing.xs,\n      iconSize: 15,\n      borderRadius: tokens.borderRadius.md,\n    },\n    large: {\n      padding: `${tokens.spacing.xs} ${tokens.spacing.lg}`,\n      fontSize: tokens.typography.fontSize.base,\n      height: '34px',\n      gap: tokens.spacing.sm,\n      iconSize: 17,\n      borderRadius: tokens.borderRadius.md,\n    },\n  };\n  \n  const config = sizeConfig[size];\n  \n  // Variant base styles (transparent theme: purple-hue transparent bg, smooth fade on hover)\n  const getVariantStyles = (): React.CSSProperties => {\n    const baseTransition = `${tokens.animation.normal}, opacity ${tokens.animation.duration.normal}ms ${tokens.animation.easing.default}`;\n    \n    if (isTransparentTheme && transparentDefault && transparentHover) {\n      switch (variant) {\n        case 'primary':\n          return {\n            backgroundColor: isHovered && !isDisabled ? transparentHover : transparentDefault,\n            color: tokens.colors.text.primary,\n            border: `1px solid ${isHovered && !isDisabled ? 'rgba(139, 92, 246, 0.5)' : 'rgba(139, 92, 246, 0.25)'}`,\n            boxShadow: isHovered && !isDisabled ? '0 0 10px rgba(139, 92, 246, 0.15)' : 'none',\n            transition: baseTransition,\n            backdropFilter: 'blur(8px)',\n            WebkitBackdropFilter: 'blur(8px)',\n          };\n        case 'secondary':\n          return {\n            backgroundColor: isHovered && !isDisabled \n              ? `${tokens.colors.accent.primary}15` // Use accent color with opacity instead of transparentHover\n              : transparentDefault,\n            color: safeAccentFg,\n            border: `1px solid ${isHovered && !isDisabled ? `${tokens.colors.accent.primary}70` : `${tokens.colors.accent.primary}30`}`,\n            boxShadow: 'none',\n            transition: baseTransition,\n            backdropFilter: 'blur(8px)',\n            WebkitBackdropFilter: 'blur(8px)',\n          };\n        case 'borderless':\n          return {\n            backgroundColor: isHovered && !isDisabled ? transparentHover : transparentDefault,\n            color: safeAccentFg,\n            border: 'none',\n            boxShadow: 'none',\n            transition: baseTransition,\n            backdropFilter: 'blur(6px)',\n            WebkitBackdropFilter: 'blur(6px)',\n          };\n      }\n    }\n    \n    switch (variant) {\n      case 'primary':\n        return {\n          backgroundColor: isHovered && !isDisabled\n            ? tokens.colors.interactive.hover\n            : safeAccentBg,\n          color: '#ffffff',\n          border: 'none',\n          boxShadow: isHovered && !isDisabled\n            ? `0 2px 8px -2px ${tokens.colors.accent.primary}35`\n            : 'none',\n          transition: baseTransition,\n        };\n      \n      case 'secondary':\n        return {\n          backgroundColor: isHovered && !isDisabled\n            ? `${tokens.colors.accent.primary}12`\n            : 'transparent',\n          color: isHovered && !isDisabled ? safeAccentFg : safeAccentFg,\n          border: `${tokens.borders.width.medium} solid ${isHovered && !isDisabled ? tokens.colors.accent.primary : `${tokens.colors.accent.primary}80`}`,\n          boxShadow: 'none',\n          transition: baseTransition,\n        };\n      \n      case 'borderless':\n        return {\n          backgroundColor: isHovered && !isDisabled\n            ? `${tokens.colors.accent.primary}10`\n            : 'transparent',\n          color: safeAccentFg,\n          border: `${tokens.borders.width.medium} solid transparent`,\n          boxShadow: 'none',\n          transition: baseTransition,\n        };\n    }\n  };\n  \n  const focusStyles: React.CSSProperties = isFocused ? {\n    outline: 'none',\n    boxShadow: tokens.borders.focusRing.button,\n  } : {};\n\n  const activeStyles: React.CSSProperties = isActive && !isDisabled ? {\n    filter: 'brightness(0.85)',\n    transform: 'scale(0.98)',\n    boxShadow: 'none',\n  } : {};\n  \n  const baseStyle: React.CSSProperties = {\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    gap: config.gap,\n    padding: config.padding,\n    height: config.height,\n    fontSize: config.fontSize,\n    fontWeight: 400,\n    fontFamily: tokens.typography.fontFamily.primary,\n    letterSpacing: '0.02em',\n    borderRadius: config.borderRadius,\n    cursor: isDisabled ? 'not-allowed' : 'pointer',\n    opacity: isDisabled ? 0.5 : 1,\n    outline: 'none',\n    textDecoration: 'none',\n    whiteSpace: 'nowrap',\n    userSelect: 'none',\n    width: fullWidth ? '100%' : 'auto',\n    position: 'relative',\n    ...getVariantStyles(),\n    ...focusStyles,\n    ...activeStyles,\n    ...style,\n  };\n  \n  // Loading spinner with smooth animation\n  const spinner = (\n    <svg\n      width={config.iconSize}\n      height={config.iconSize}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      style={{\n        animation: 'zendir-spin 0.8s cubic-bezier(0.4, 0, 0.6, 1) infinite',\n      }}\n    >\n      <circle\n        cx=\"12\"\n        cy=\"12\"\n        r=\"10\"\n        stroke=\"currentColor\"\n        strokeWidth=\"2.5\"\n        strokeLinecap=\"round\"\n        strokeDasharray=\"31.4 31.4\"\n        strokeDashoffset=\"10\"\n        opacity=\"0.9\"\n      />\n      <style>\n        {`@keyframes zendir-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }`}\n      </style>\n    </svg>\n  );\n  \n  // Portal-based tooltip: position fixed relative to viewport, never clipped\n  const internalRef = useRef<HTMLButtonElement>(null);\n  const tooltipNodeRef = useRef<HTMLDivElement>(null);\n  const [tooltipPos, setTooltipPos] = useState<{ top: number; left: number } | null>(null);\n\n  const mergedRef = useCallback((node: HTMLButtonElement | null) => {\n    (internalRef as React.MutableRefObject<HTMLButtonElement | null>).current = node;\n    if (typeof ref === 'function') ref(node);\n    else if (ref) (ref as React.MutableRefObject<HTMLButtonElement | null>).current = node;\n  }, [ref]);\n\n  useLayoutEffect(() => {\n    if (!showTooltip || !tooltip || !internalRef.current) {\n      setTooltipPos(null);\n      return;\n    }\n    const btn = internalRef.current.getBoundingClientRect();\n    const gap = 8;\n    let top = btn.top - gap;\n    let left = btn.left + btn.width / 2;\n    // Adjust after tooltip renders so we can measure its width\n    if (tooltipNodeRef.current) {\n      const tt = tooltipNodeRef.current.getBoundingClientRect();\n      top = btn.top - tt.height - gap;\n      left = btn.left + (btn.width - tt.width) / 2;\n      if (left < 8) left = 8;\n      if (left + tt.width > window.innerWidth - 8) left = window.innerWidth - tt.width - 8;\n      if (top < 8) top = btn.bottom + gap; // flip below if no room above\n    }\n    setTooltipPos({ top, left });\n  }, [showTooltip, tooltip]);\n\n  const tooltipPortal = tooltip && showTooltip && ReactDOM.createPortal(\n    <div\n      ref={tooltipNodeRef}\n      role=\"tooltip\"\n      style={{\n        position: 'fixed',\n        top: tooltipPos ? tooltipPos.top : -9999,\n        left: tooltipPos ? tooltipPos.left : -9999,\n        padding: `${tokens.spacing.xs} ${tokens.spacing.smd}`,\n        fontSize: '0.75rem',\n        fontWeight: 500,\n        color: tokens.colors.text.primary,\n        backgroundColor: tokens.colors.background.elevated,\n        border: tokens.borders.divider,\n        borderRadius: tokens.borderRadius.md,\n        boxShadow: tokens.shadows.md,\n        whiteSpace: 'nowrap',\n        zIndex: 2147483100,\n        pointerEvents: 'none',\n        opacity: tooltipPos ? 1 : 0,\n        animation: tooltipPos ? `zendir-btn-tip ${tokens.animation.duration.fast}ms ${tokens.animation.easing.default} both` : 'none',\n      }}\n    >\n      {tooltip}\n      <style>\n        {`@keyframes zendir-btn-tip { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }`}\n      </style>\n    </div>,\n    document.body\n  );\n\n  return (\n    <>\n      <button\n        ref={mergedRef}\n        type=\"button\"\n        disabled={isDisabled}\n        className={classNames('zendir-button', `zendir-button--${variant}`, `zendir-button--${size}`, className)}\n        style={baseStyle}\n        title={tooltip && !showTooltip ? tooltip : undefined}\n        onMouseDown={() => setIsActive(true)}\n        onMouseUp={() => setIsActive(false)}\n        onMouseEnter={(e) => {\n          setIsHovered(true);\n          setShowTooltip(true);\n          onMouseEnter?.(e);\n        }}\n        onMouseLeave={(e) => {\n          setIsHovered(false);\n          setIsActive(false);\n          setShowTooltip(false);\n          onMouseLeave?.(e);\n        }}\n        onFocus={(e) => {\n          setIsFocused(true);\n          onFocus?.(e);\n        }}\n        onBlur={(e) => {\n          setIsFocused(false);\n          onBlur?.(e);\n        }}\n        {...rest}\n      >\n        {loading ? spinner : icon}\n        {children && <span>{children}</span>}\n        {iconEnd && !loading && iconEnd}\n      </button>\n      {tooltipPortal}\n    </>\n  );\n}));\n\nexport default Button;\n"],"names":["Button"],"mappings":"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"}

package/dist/react/core/{Checkbox.js → inputs/Checkbox.js}

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { memo, forwardRef, useState, useId } from "react";
-import { classNames } from "../utils/index.js";
-import { useTheme } from "../theme/ThemeProvider.js";
+import { useTheme } from "../../theme/ThemeProvider.js";
+import { classNames } from "../../utils/index.js";
 const Checkbox = memo(forwardRef(function Checkbox2({
   type = "checkbox",
   checked = false,