@zendir/ui 0.3.0 → 0.4.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @zendir/ui
 
+## 0.4.0
+
+### Minor Changes
+
+- Add `ImageFrame` widget: renders a single-channel sensor/CCD data frame
+  (`number[]` of samples) as a false-colour image on a canvas, with
+  fixed-ceiling normalisation, `cividis`/`gray` colormaps, an optional raw
+  value grid, and loading/empty states. Purely presentational — callers
+  pass the frame data in. Also exports the pure `decodeImage` helper.
+
+### Patch Changes
+
+- Scope the Dialog focus trap to the open transition so typing in a dialog
+  input isn't interrupted when the surrounding parent re-renders.
+
 ## 0.3.0 
 
 **Upgrade from npm:** The latest public release on the registry is

package/dist/index.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/index.js.map

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

package/dist/react/3d/ZenSpace3D.js

@@ -1,5 +1,6 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import React, { forwardRef, useState, useEffect, useRef, useMemo, useCallback, useImperativeHandle } from "react";
+import { useTheme } from "../theme/ThemeProvider.js";
 import { AstroIcon } from "../core/display/AstroIcon.js";
 import { SCENE_EARTH_RADIUS, latLonAltToCartesian, KM_TO_SCENE, easeOutCubic } from "./ZenSpace3DUtils.js";
 import atmosphereVertexShader from "../../shaders/atmosphere.vert.js";
@@ -8,7 +9,6 @@ import starsVertexShader from "../../shaders/stars.vert.js";
 import starsFragmentShader from "../../shaders/stars.frag.js";
 import { loadThree } from "./threeLoader.js";
 import { ZenSpace3DCesium } from "./ZenSpace3DCesium.js";
-import { useTheme } from "../theme/ThemeProvider.js";
 const DEFAULT_LAYERS = {
   planets: true,
   moons: true,
@@ -1248,6 +1248,7 @@ function ObjectLegend({ currentView, satellites, stations, groundStations, onObj
   ] });
 }
 export {
-  ZenSpace3D
+  ZenSpace3D,
+  ZenSpace3D as default
 };
 //# sourceMappingURL=ZenSpace3D.js.map