@zendir/ui 0.3.0 → 0.4.0

package/dist/react.js

@@ -1,80 +1,82 @@
-import { ErrorBoundary, withErrorBoundary } from "./react/shared/ErrorBoundary.js";
-import { Skeleton3D, SkeletonBox, SkeletonCard, SkeletonChart, SkeletonCircle, SkeletonText } from "./react/shared/Skeleton.js";
-import { STATUS_COLORS, addAlpha, clamp, classNames, focusRingStyle, formatAltitude, formatCoordinate, formatCountdown, formatDataRate, formatDecibels, formatDegrees, formatDistance, formatDuration, formatFrequency, formatLatLon, formatNumber, formatPercentage, formatPower, formatTabular, formatTemperature, formatTime, formatUTC, formatVelocity, getStatusColor, getStatusFromValue, getStatusSeverity, getWorstStatus, isStatusLevel, isValidNumber, lerp, mapRange, normalizeStatus, safeAccentText, safeNumber, tabularNumsStyle, transitions, withNullSafety } from "./react/utils/index.js";
-import { useCompactMode } from "./react/hooks/useCompactMode.js";
-import { PLANETS, auToKm, estimateOrbitalPeriod, estimateOrbitalVelocity, getPlanet, normalizePlanetName } from "./react/types.js";
-import { ActivityPlanner } from "./react/core/widgets/ActivityPlanner.js";
-import { AppBar } from "./react/core/navigation/AppBar.js";
-import { AstroChart } from "./react/charts/unified/AstroChart.js";
-import { BREAKPOINTS, useBreakpoint } from "./react/core/layout/useBreakpoint.js";
-import { Badge } from "./react/core/display/Badge.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 "./react/core/display/Typography.js";
-import { Box } from "./react/core/layout/Box.js";
+import { Icon, getIconNames, isValidIconName } from "./react/core/display/Icon.js";
 import { Button } from "./react/core/inputs/Button.js";
-import { CARD_ACCENT_COLORS, CardAccentProvider, SPACE_SYSTEM_COLORS, getAccentColorOptions, getSystemAccentColor, useCardAccent } from "./react/theme/cardAccent.js";
-import { CATEGORY_ICONS, CATEGORY_LABELS, PROPERTY_PRESETS, createPropertyConfig, deriveBatteryStatus, deriveStatus, formatPropertyLabel, formatPropertyValue, getPropertiesByCategory, getPropertyConfig } from "./react/core/data/propertyConfig.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 "./react/core/widgets/ChatPanel.js";
-import { Capture, loadCapturePlaceholderImage, useCapture } from "./react/core/widgets/Capture.js";
-import { CardHeader } from "./react/core/display/CardHeader.js";
-import { CategoryPalette } from "./react/utils/categoryPalette.js";
-import { CategoryProvider, useCategoryPalette, useCategoryPaletteRequired } from "./react/context/CategoryContext.js";
-import { Center } from "./react/core/layout/Center.js";
+import { Input } from "./react/core/inputs/Input.js";
+import { Select } from "./react/core/inputs/Select.js";
+import { Toggle } from "./react/core/inputs/Toggle.js";
 import { Checkbox } from "./react/core/inputs/Checkbox.js";
-import { ClassificationBanner } from "./react/astro/ClassificationBanner.js";
-import { ColorPickerPanel } from "./react/core/widgets/ColorPickerPanel.js";
-import { CommandBuilder } from "./react/core/widgets/CommandBuilder.js";
-import { ConfirmDialog, ConfirmProvider, useConfirm } from "./react/core/feedback/ConfirmDialog.js";
-import { ConnectionForm } from "./react/core/widgets/ConnectionForm.js";
+import { Tooltip } from "./react/core/overlays/Tooltip.js";
+import { Dialog } from "./react/core/feedback/Dialog.js";
+import { Badge } from "./react/core/display/Badge.js";
+import { Tabs } from "./react/core/navigation/Tabs.js";
 import { Container } from "./react/core/display/Container.js";
-import { CopyButton, useCopyToClipboard } from "./react/core/display/CopyButton.js";
-import { DataTable, DataTableRowDetail } from "./react/core/data/DataTable.js";
+import { GLASS_COLOR_OVERLAYS, GlassCard } from "./react/core/display/GlassCard.js";
+import { Pagination } from "./react/core/navigation/Pagination.js";
 import { DataValue, DataValueGroup } from "./react/core/data/DataValue.js";
-import { Dialog } from "./react/core/feedback/Dialog.js";
-import { DisplaySettingsProvider, GLASS_TINTS, PRESET_COLORS, getEffectiveCompactMode, useDisplaySettings, useDisplaySettingsOptional } from "./react/context/DisplaySettingsContext.js";
-import { Divider } from "./react/core/layout/Divider.js";
-import { FileExplorer } from "./react/core/widgets/FileExplorer.js";
+import { HeaderIconWithStatus } from "./react/core/display/HeaderIconWithStatus.js";
+import { CardHeader } from "./react/core/display/CardHeader.js";
+import { CATEGORY_ICONS, CATEGORY_LABELS, PROPERTY_PRESETS, createPropertyConfig, deriveBatteryStatus, deriveStatus, formatPropertyLabel, formatPropertyValue, getPropertiesByCategory, getPropertyConfig } from "./react/core/data/propertyConfig.js";
+import { MessageStream } from "./react/core/widgets/MessageStream.js";
+import { AppBar } from "./react/core/navigation/AppBar.js";
+import { ColorPickerPanel } from "./react/core/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 "./react/core/display/Typography.js";
+import { NumberInput } from "./react/core/inputs/NumberInput.js";
+import { SIDENAV_HEADER_LOGO_SLOT_HEIGHT_PX, SideNav } from "./react/core/navigation/SideNav.js";
+import { ToastProvider, useToast, useToastManager } from "./react/core/feedback/Toast.js";
+import { Menu, Popover } from "./react/core/overlays/Popover.js";
+import { Box } from "./react/core/layout/Box.js";
 import { Flex } from "./react/core/layout/Flex.js";
-import { GLASS_COLOR_OVERLAYS, GlassCard } from "./react/core/display/GlassCard.js";
-import { GlobalStatusBar } from "./react/astro/GlobalStatusBar.js";
 import { Grid } from "./react/core/layout/Grid.js";
-import { GroundTrackMap } from "./react/charts/GroundTrackMap.js";
 import { HStack, Stack, VStack } from "./react/core/layout/Stack.js";
-import { HeaderIconWithStatus } from "./react/core/display/HeaderIconWithStatus.js";
-import { HexViewer, REGION_BORDER_COLORS, REGION_COLORS } from "./react/core/widgets/HexViewer.js";
-import { Icon, getIconNames, isValidIconName } from "./react/core/display/Icon.js";
+import { Center } from "./react/core/layout/Center.js";
+import { Spacer } from "./react/core/layout/Spacer.js";
+import { Divider } from "./react/core/layout/Divider.js";
+import { BREAKPOINTS, useBreakpoint } from "./react/core/layout/useBreakpoint.js";
+import { resolveResponsive, resolveSpacing } from "./react/core/layout/responsive.js";
+import { ConfirmDialog, ConfirmProvider, useConfirm } from "./react/core/feedback/ConfirmDialog.js";
+import { PinInput } from "./react/core/inputs/PinInput.js";
+import { CopyButton, useCopyToClipboard } from "./react/core/display/CopyButton.js";
+import { DataTable, DataTableRowDetail } from "./react/core/data/DataTable.js";
 import { ImageGallery } from "./react/core/widgets/ImageGallery.js";
-import { Input } from "./react/core/inputs/Input.js";
-import { LayerControlPanel } from "./react/panels/LayerControlPanel.js";
+import { ImageFrame, decodeImage } from "./react/core/widgets/ImageFrame.js";
+import { ImagePanel } from "./react/core/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 "./react/core/widgets/ChatPanel.js";
+import { ConnectionForm } from "./react/core/widgets/ConnectionForm.js";
+import { SidePanel } from "./react/core/overlays/SidePanel.js";
+import { HexViewer, REGION_BORDER_COLORS, REGION_COLORS } from "./react/core/widgets/HexViewer.js";
 import { LimitsBar } from "./react/core/inputs/LimitsBar.js";
 import { LogViewer } from "./react/core/widgets/LogViewer.js";
-import { Menu, Popover } from "./react/core/overlays/Popover.js";
-import { MessageStream } from "./react/core/widgets/MessageStream.js";
-import { MiniSimulationControls, SimulationControls, SimulationControlsWithClock } from "./react/astro/SimulationControls.js";
+import { PacketViewer } from "./react/core/widgets/PacketViewer.js";
+import { CommandBuilder } from "./react/core/widgets/CommandBuilder.js";
+import { FileExplorer } from "./react/core/widgets/FileExplorer.js";
 import { MissionCalendar } from "./react/core/widgets/MissionCalendar.js";
+import { ActivityPlanner } from "./react/core/widgets/ActivityPlanner.js";
+import { Capture, loadCapturePlaceholderImage, useCapture } from "./react/core/widgets/Capture.js";
+import { ZenSpace3D } from "./react/3d/ZenSpace3D.js";
+import { ecefEulerXyzToHpr, ecefMetersToSdkPosition } from "./react/3d/CesiumCaptureSource.js";
+import { useSimulationScene } from "./react/hooks/useSimulationScene.js";
+import { ThemeProvider, useScrollbarStyles, useTheme, useThemeTokens } from "./react/theme/ThemeProvider.js";
+import { CARD_ACCENT_COLORS, CardAccentProvider, SPACE_SYSTEM_COLORS, getAccentColorOptions, getSystemAccentColor, useCardAccent } from "./react/theme/cardAccent.js";
+import { ErrorBoundary, withErrorBoundary } from "./react/shared/ErrorBoundary.js";
+import { Skeleton3D, SkeletonBox, SkeletonCard, SkeletonChart, SkeletonCircle, SkeletonText } from "./react/shared/Skeleton.js";
+import { STATUS_COLORS, addAlpha, clamp, classNames, focusRingStyle, formatAltitude, formatCoordinate, formatCountdown, formatDataRate, formatDecibels, formatDegrees, formatDistance, formatDuration, formatFrequency, formatLatLon, formatNumber, formatPercentage, formatPower, formatTabular, formatTemperature, formatTime, formatUTC, formatVelocity, getStatusColor, getStatusFromValue, getStatusSeverity, getWorstStatus, isStatusLevel, isValidNumber, lerp, mapRange, normalizeStatus, safeAccentText, safeNumber, tabularNumsStyle, transitions, withNullSafety } from "./react/utils/index.js";
+import { StatusIndicator } from "./react/astro/StatusIndicator.js";
+import { ClassificationBanner } from "./react/astro/ClassificationBanner.js";
+import { GlobalStatusBar } from "./react/astro/GlobalStatusBar.js";
 import { MissionClock } from "./react/astro/MissionClock.js";
+import { MiniSimulationControls, SimulationControls, SimulationControlsWithClock } from "./react/astro/SimulationControls.js";
 import { MonitoringIcon } from "./react/astro/MonitoringIcon.js";
-import { Notification } from "./react/astro/Notification.js";
-import { NumberInput } from "./react/core/inputs/NumberInput.js";
-import { ObjectInventoryPanel, recommendedFlyDistance } from "./react/panels/ObjectInventoryPanel.js";
-import { PacketViewer } from "./react/core/widgets/PacketViewer.js";
-import { Pagination } from "./react/core/navigation/Pagination.js";
-import { PinInput } from "./react/core/inputs/PinInput.js";
 import { Progress } from "./react/astro/Progress.js";
-import { SIDENAV_HEADER_LOGO_SLOT_HEIGHT_PX, SideNav } from "./react/core/navigation/SideNav.js";
-import { Select } from "./react/core/inputs/Select.js";
-import { SidePanel } from "./react/core/overlays/SidePanel.js";
-import { Spacer } from "./react/core/layout/Spacer.js";
-import { StatusIndicator } from "./react/astro/StatusIndicator.js";
-import { Tabs } from "./react/core/navigation/Tabs.js";
-import { ThemeProvider, useScrollbarStyles, useTheme, useThemeTokens } from "./react/theme/ThemeProvider.js";
+import { Notification } from "./react/astro/Notification.js";
 import { UnifiedTimeline } from "./react/astro/UnifiedTimeline.js";
-import { ToastProvider, useToast, useToastManager } from "./react/core/feedback/Toast.js";
-import { Toggle } from "./react/core/inputs/Toggle.js";
-import { Tooltip } from "./react/core/overlays/Tooltip.js";
-import { ZenSpace3D } from "./react/3d/ZenSpace3D.js";
-import { ecefEulerXyzToHpr, ecefMetersToSdkPosition } from "./react/3d/CesiumCaptureSource.js";
-import { resolveResponsive, resolveSpacing } from "./react/core/layout/responsive.js";
-import { useSimulationScene } from "./react/hooks/useSimulationScene.js";
+import { GroundTrackMap } from "./react/charts/GroundTrackMap.js";
+import { useCompactMode } from "./react/hooks/useCompactMode.js";
+import { ObjectInventoryPanel, recommendedFlyDistance } from "./react/panels/ObjectInventoryPanel.js";
+import { LayerControlPanel } from "./react/panels/LayerControlPanel.js";
+import { PLANETS, auToKm, estimateOrbitalPeriod, estimateOrbitalVelocity, getPlanet, normalizePlanetName } from "./react/types.js";
+import { AstroChart } from "./react/charts/unified/AstroChart.js";
+import { CategoryPalette } from "./react/utils/categoryPalette.js";
+import { CategoryProvider, useCategoryPalette, useCategoryPaletteRequired } from "./react/context/CategoryContext.js";
+import { DisplaySettingsProvider, GLASS_TINTS, PRESET_COLORS, getEffectiveCompactMode, useDisplaySettings, useDisplaySettingsOptional } from "./react/context/DisplaySettingsContext.js";
 export {
   ActivityPlanner,
   AppBar,
@@ -143,7 +145,9 @@ export {
   HeaderIconWithStatus,
   HexViewer,
   Icon,
+  ImageFrame,
   ImageGallery,
+  ImagePanel,
   Input,
   Label,
   LayerControlPanel,
@@ -202,6 +206,7 @@ export {
   classNames,
   createChatResponseParser,
   createPropertyConfig,
+  decodeImage,
   deriveBatteryStatus,
   deriveStatus,
   ecefEulerXyzToHpr,

package/dist/react.js.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendir/ui",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "React UI components for space operations, built on the Astro UX Design System",
   "type": "module",
   "main": "./dist/index.js",
@@ -39,76 +39,84 @@
       "import": "./dist/react/chatgpt/index.js"
     },
     "./react/theme": {
-      "types": "./dist/react/theme/ThemeProvider.d.ts",
-      "import": "./dist/react/theme/ThemeProvider.js"
+      "types": "./dist/react/theme/index.d.ts",
+      "import": "./dist/react/theme/index.js"
+    },
+    "./react/cards": {
+      "types": "./dist/react/cards/index.d.ts",
+      "import": "./dist/react/cards/index.js"
+    },
+    "./react/panels": {
+      "types": "./dist/react/panels/index.d.ts",
+      "import": "./dist/react/panels/index.js"
     },
     "./react/core/GlassCard": {
-      "types": "./dist/react/core/GlassCard.d.ts",
-      "import": "./dist/react/core/GlassCard.js"
+      "types": "./dist/react/core/display/GlassCard.d.ts",
+      "import": "./dist/react/core/display/GlassCard.js"
     },
     "./react/core/Button": {
-      "types": "./dist/react/core/Button.d.ts",
-      "import": "./dist/react/core/Button.js"
+      "types": "./dist/react/core/inputs/Button.d.ts",
+      "import": "./dist/react/core/inputs/Button.js"
     },
     "./react/core/Input": {
-      "types": "./dist/react/core/Input.d.ts",
-      "import": "./dist/react/core/Input.js"
+      "types": "./dist/react/core/inputs/Input.d.ts",
+      "import": "./dist/react/core/inputs/Input.js"
     },
     "./react/core/Select": {
-      "types": "./dist/react/core/Select.d.ts",
-      "import": "./dist/react/core/Select.js"
+      "types": "./dist/react/core/inputs/Select.d.ts",
+      "import": "./dist/react/core/inputs/Select.js"
     },
     "./react/core/Checkbox": {
-      "types": "./dist/react/core/Checkbox.d.ts",
-      "import": "./dist/react/core/Checkbox.js"
+      "types": "./dist/react/core/inputs/Checkbox.d.ts",
+      "import": "./dist/react/core/inputs/Checkbox.js"
     },
     "./react/core/Badge": {
-      "types": "./dist/react/core/Badge.d.ts",
-      "import": "./dist/react/core/Badge.js"
+      "types": "./dist/react/core/display/Badge.d.ts",
+      "import": "./dist/react/core/display/Badge.js"
     },
     "./react/core/Typography": {
-      "types": "./dist/react/core/Typography.d.ts",
-      "import": "./dist/react/core/Typography.js"
+      "types": "./dist/react/core/display/Typography.d.ts",
+      "import": "./dist/react/core/display/Typography.js"
     },
     "./react/core/Dialog": {
-      "types": "./dist/react/core/Dialog.d.ts",
-      "import": "./dist/react/core/Dialog.js"
+      "types": "./dist/react/core/feedback/Dialog.d.ts",
+      "import": "./dist/react/core/feedback/Dialog.js"
     },
     "./react/core/ConfirmDialog": {
-      "types": "./dist/react/core/ConfirmDialog.d.ts",
-      "import": "./dist/react/core/ConfirmDialog.js"
+      "types": "./dist/react/core/feedback/ConfirmDialog.d.ts",
+      "import": "./dist/react/core/feedback/ConfirmDialog.js"
     },
     "./react/core/Tabs": {
-      "types": "./dist/react/core/Tabs.d.ts",
-      "import": "./dist/react/core/Tabs.js"
+      "types": "./dist/react/core/navigation/Tabs.d.ts",
+      "import": "./dist/react/core/navigation/Tabs.js"
     },
     "./react/core/Toggle": {
-      "types": "./dist/react/core/Toggle.d.ts",
-      "import": "./dist/react/core/Toggle.js"
+      "types": "./dist/react/core/inputs/Toggle.d.ts",
+      "import": "./dist/react/core/inputs/Toggle.js"
     },
     "./react/core/Tooltip": {
-      "types": "./dist/react/core/Tooltip.d.ts",
-      "import": "./dist/react/core/Tooltip.js"
+      "types": "./dist/react/core/overlays/Tooltip.d.ts",
+      "import": "./dist/react/core/overlays/Tooltip.js"
     },
     "./react/core/Popover": {
-      "types": "./dist/react/core/Popover.d.ts",
-      "import": "./dist/react/core/Popover.js"
+      "types": "./dist/react/core/overlays/Popover.d.ts",
+      "import": "./dist/react/core/overlays/Popover.js"
     },
     "./react/core/Toast": {
-      "types": "./dist/react/core/Toast.d.ts",
-      "import": "./dist/react/core/Toast.js"
+      "types": "./dist/react/core/feedback/Toast.d.ts",
+      "import": "./dist/react/core/feedback/Toast.js"
     },
     "./react/core/NumberInput": {
-      "types": "./dist/react/core/NumberInput.d.ts",
-      "import": "./dist/react/core/NumberInput.js"
+      "types": "./dist/react/core/inputs/NumberInput.d.ts",
+      "import": "./dist/react/core/inputs/NumberInput.js"
     },
     "./react/core/PinInput": {
-      "types": "./dist/react/core/PinInput.d.ts",
-      "import": "./dist/react/core/PinInput.js"
+      "types": "./dist/react/core/inputs/PinInput.d.ts",
+      "import": "./dist/react/core/inputs/PinInput.js"
     },
     "./react/core/SideNav": {
-      "types": "./dist/react/core/SideNav.d.ts",
-      "import": "./dist/react/core/SideNav.js"
+      "types": "./dist/react/core/navigation/SideNav.d.ts",
+      "import": "./dist/react/core/navigation/SideNav.js"
     },
     "./react/layout/Flex": {
       "types": "./dist/react/core/layout/Flex.d.ts",
@@ -209,9 +217,9 @@
   "devDependencies": {
     "@astrouxds/react": "^7.27.0",
     "@changesets/cli": "^2.27.0",
-    "@size-limit/preset-small-lib": "^12.0.0",
     "@eslint/eslintrc": "^3.2.0",
     "@eslint/js": "^9.18.0",
+    "@size-limit/preset-small-lib": "^12.0.0",
     "@storybook/addon-a11y": "8.6.17",
     "@storybook/addon-essentials": "8.6.17",
     "@storybook/addon-interactions": "8.6.17",