@zendir/ui 0.3.0 → 0.4.0

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

@@ -1 +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":"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"}
+{"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. Kept in a ref so the focus-trap effect below can\n  // depend on `open` ALONE: if the effect re-ran whenever `onClose` changed\n  // identity (e.g. a parent passing an inline arrow that re-renders on a\n  // status poll), it would re-fire the focus() call on every render and pull\n  // focus out of whatever the user was typing — making inputs untypable.\n  const handleKeyDown = useCallback((e: KeyboardEvent) => {\n    if (closeOnEscape && e.key === 'Escape') {\n      onClose();\n    }\n  }, [closeOnEscape, onClose]);\n  const handleKeyDownRef = useRef(handleKeyDown);\n  handleKeyDownRef.current = handleKeyDown;\n\n  // Focus trap and escape key — runs only on open/close transitions.\n  useEffect(() => {\n    if (!open) return undefined;\n\n    previousActiveElement.current = document.activeElement as HTMLElement;\n    document.body.style.overflow = 'hidden';\n    const onKeyDown = (e: KeyboardEvent) => handleKeyDownRef.current(e);\n    document.addEventListener('keydown', onKeyDown);\n\n    // Move focus into the dialog once — but honour a child that already\n    // grabbed it (e.g. an Input with autoFocus). Without this guard we'd\n    // override the intended initial focus and land on the first focusable,\n    // which is usually the close button.\n    const focusTimer = setTimeout(() => {\n      if (dialogRef.current?.contains(document.activeElement)) return;\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', onKeyDown);\n      previousActiveElement.current?.focus();\n    };\n  }, [open]);\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":"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"}

package/dist/react/core/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 { useTheme } from "../../theme/ThemeProvider.js";
 import { safeAccentText } from "../../utils/index.js";
 import { useBreakpoint } from "../layout/useBreakpoint.js";
-import { useTheme } from "../../theme/ThemeProvider.js";
 const ToastContext = createContext(null);
 function useToast() {
   const ctx = useContext(ToastContext);

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

@@ -83,6 +83,10 @@ 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 { 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 { ConnectionForm } from './widgets/ConnectionForm';

package/dist/react/core/index.js

@@ -0,0 +1,166 @@
+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 { ImageFrame, decodeImage } from "./widgets/ImageFrame.js";
+import { ImagePanel } from "./widgets/ImagePanel.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,
+  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

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

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

package/dist/react/core/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 { safeAccentText, classNames } from "../../utils/index.js";
 const Button = memo(forwardRef(function Button2({
   variant = "primary",
   size = "medium",

package/dist/react/core/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 { classNames } from "../../utils/index.js";
 const Checkbox = memo(forwardRef(function Checkbox2({
   type = "checkbox",
   checked = false,

package/dist/react/core/inputs/Input.js

@@ -1,8 +1,8 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { memo, forwardRef, useState, useId } from "react";
+import { useTheme } from "../../theme/ThemeProvider.js";
 import { safeAccentText, classNames } from "../../utils/index.js";
 import { useBreakpoint } from "../layout/useBreakpoint.js";
-import { useTheme } from "../../theme/ThemeProvider.js";
 const Input = memo(forwardRef(function Input2({
   label,
   helperText,

package/dist/react/core/inputs/NumberInput.js

@@ -1,8 +1,8 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { memo, forwardRef, useState, useRef, useId, useMemo, useEffect, useCallback } from "react";
+import { useTheme } from "../../theme/ThemeProvider.js";
 import { deriveStatus } from "../data/propertyConfig.js";
 import { StatusIndicator } from "../../astro/StatusIndicator.js";
-import { useTheme } from "../../theme/ThemeProvider.js";
 const DEFAULT_DECIMAL_PLACES = 0;
 const NumberInput = memo(forwardRef(function NumberInput2({
   value,

package/dist/react/core/inputs/PinInput.js

@@ -1,7 +1,7 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { memo, useRef, useState, useEffect, useCallback } from "react";
-import { useBreakpoint } from "../layout/useBreakpoint.js";
 import { useTheme } from "../../theme/ThemeProvider.js";
+import { useBreakpoint } from "../layout/useBreakpoint.js";
 const PinInput = memo(function PinInput2({
   length = 6,
   type = "alphanumeric",

package/dist/react/core/inputs/Select.js

@@ -1,9 +1,9 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { memo, forwardRef, useState, useRef, useId, useLayoutEffect, useEffect } from "react";
 import { createPortal } from "react-dom";
+import { useTheme } from "../../theme/ThemeProvider.js";
 import { classNames } from "../../utils/index.js";
 import { useBreakpoint } from "../layout/useBreakpoint.js";
-import { useTheme } from "../../theme/ThemeProvider.js";
 const Select = memo(forwardRef(function Select2({
   label,
   options,

package/dist/react/core/inputs/Toggle.js

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

package/dist/react/core/layout/Box.js

@@ -1,8 +1,8 @@
 import { jsx } from "react/jsx-runtime";
 import { memo, forwardRef } from "react";
+import { useTheme } from "../../theme/ThemeProvider.js";
 import { useBreakpoint } from "./useBreakpoint.js";
 import { resolveResponsive, resolveResponsiveSpacing } from "./responsive.js";
-import { useTheme } from "../../theme/ThemeProvider.js";
 const Box = memo(forwardRef(function Box2({
   as: Component = "div",
   padding,

package/dist/react/core/layout/Flex.js

@@ -1,8 +1,8 @@
 import { jsx } from "react/jsx-runtime";
 import { memo, forwardRef } from "react";
+import { useTheme } from "../../theme/ThemeProvider.js";
 import { useBreakpoint } from "./useBreakpoint.js";
 import { resolveResponsive, resolveResponsiveSpacing } from "./responsive.js";
-import { useTheme } from "../../theme/ThemeProvider.js";
 const Flex = memo(forwardRef(function Flex2({
   direction,
   wrap,

package/dist/react/core/layout/Grid.js

@@ -1,8 +1,8 @@
 import { jsx } from "react/jsx-runtime";
 import { memo, forwardRef } from "react";
+import { useTheme } from "../../theme/ThemeProvider.js";
 import { useBreakpoint } from "./useBreakpoint.js";
 import { resolveResponsive, resolveResponsiveSpacing } from "./responsive.js";
-import { useTheme } from "../../theme/ThemeProvider.js";
 const Grid = memo(forwardRef(function Grid2({
   columns,
   autoFit,

package/dist/react/core/layout/Stack.js

@@ -1,8 +1,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import React, { memo, forwardRef } from "react";
+import { useTheme } from "../../theme/ThemeProvider.js";
 import { useBreakpoint } from "./useBreakpoint.js";
 import { resolveResponsiveSpacing } from "./responsive.js";
-import { useTheme } from "../../theme/ThemeProvider.js";
 const Stack = memo(forwardRef(function Stack2({
   as: Component = "div",
   direction = "column",

package/dist/react/core/navigation/AppBar.js

@@ -1,12 +1,12 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import React, { memo, useState, useRef, useEffect, useMemo } from "react";
+import { useTheme } from "../../theme/ThemeProvider.js";
 import { useDisplaySettingsOptional } from "../../context/DisplaySettingsContext.js";
 import { classNames, safeAccentText } from "../../utils/index.js";
 import { AstroIcon } from "../display/AstroIcon.js";
 import { ColorPickerPanel } from "../widgets/ColorPickerPanel.js";
 import { Tooltip } from "../overlays/Tooltip.js";
 import { useBreakpoint } from "../layout/useBreakpoint.js";
-import { useTheme } from "../../theme/ThemeProvider.js";
 const THEME_VARIANTS = [
   { key: "hybrid", label: "Zen (Hybrid)", tooltip: "Default theme - Astro status colors with purple accents" },
   { key: "purple-hue", label: "Zen (Purple Hue)", tooltip: "Purple accent theme - vibrant purple tones" },

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

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { memo, useMemo } from "react";
-import { classNames } from "../../utils/index.js";
 import { useTheme } from "../../theme/ThemeProvider.js";
+import { classNames } from "../../utils/index.js";
 const Pagination = memo(function Pagination2({
   currentPage,
   totalPages,

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

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