@zendir/ui 0.3.0 → 0.3.1

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/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",

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

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { memo, useId, createContext, useContext } from "react";
-import { classNames, safeAccentText } from "../../utils/index.js";
 import { useTheme } from "../../theme/ThemeProvider.js";
+import { classNames, safeAccentText } from "../../utils/index.js";
 const TabsContext = createContext(null);
 const useTabsContext = () => {
   const context = useContext(TabsContext);

package/dist/react/core/overlays/SidePanel.js

@@ -1,8 +1,8 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { memo, useRef, useState, useEffect, useCallback } from "react";
+import { useTheme } from "../../theme/ThemeProvider.js";
 import { classNames } from "../../utils/index.js";
 import { useBreakpoint } from "../layout/useBreakpoint.js";
-import { useTheme } from "../../theme/ThemeProvider.js";
 let sidePanelInstanceCount = 0;
 const SidePanel = memo(function SidePanel2({
   open,

package/dist/react/core/overlays/Tooltip.js

@@ -1,8 +1,8 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { memo, useState, useRef, useCallback, useLayoutEffect, useEffect } from "react";
 import ReactDOM from "react-dom";
-import { classNames } from "../../utils/index.js";
 import { useTheme } from "../../theme/ThemeProvider.js";
+import { classNames } from "../../utils/index.js";
 const Tooltip = memo(function Tooltip2({
   content,
   placement = "top",

package/dist/react/core/widgets/Capture.js

@@ -1,8 +1,8 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { memo, forwardRef, useState, useRef, useEffect, useCallback, useImperativeHandle } from "react";
+import { useTheme } from "../../theme/ThemeProvider.js";
 import { useCopyToClipboard } from "../display/CopyButton.js";
 import placeholderImageUrl from "./capture-placeholder.png.js";
-import { useTheme } from "../../theme/ThemeProvider.js";
 async function generateCanvasFallback() {
   try {
     const size = 256;

package/dist/react/core/widgets/ChatPanel.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import React, { memo, useState, useRef, useEffect, useCallback } from "react";
-import { safeAccentText } from "../../utils/index.js";
 import { useTheme } from "../../theme/ThemeProvider.js";
+import { safeAccentText } from "../../utils/index.js";
 function parseYamlLite(text) {
   const lines = [];
   for (const raw of text.split("\n")) {

package/dist/react/core/widgets/ColorPickerPanel.js

@@ -1,8 +1,8 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { memo, useState, useRef, useEffect } from "react";
+import { useTheme } from "../../theme/ThemeProvider.js";
 import { PRESET_COLORS } from "../../context/DisplaySettingsContext.js";
 import { AstroIcon } from "../display/AstroIcon.js";
-import { useTheme } from "../../theme/ThemeProvider.js";
 const COLOR_SWATCHES = Object.entries(PRESET_COLORS).map(([key, color]) => ({
   key,
   color,

package/dist/react/core/widgets/ConnectionForm.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { memo, useMemo, useId, 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 PROTOCOLS = ["wss", "ws", "mqtts", "mqtt", "tcp"];
 const DEFAULT_PORTS = {
   ws: 80,

package/dist/react/core/widgets/FileExplorer.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import React, { memo, useState, useMemo, useCallback } from "react";
-import { AstroIcon } from "../display/AstroIcon.js";
 import { useTheme } from "../../theme/ThemeProvider.js";
+import { AstroIcon } from "../display/AstroIcon.js";
 function formatFileSize(bytes) {
   if (bytes === void 0 || bytes === null) return "—";
   if (bytes === 0) return "0 B";

package/dist/react/core/widgets/ImageGallery.js

@@ -1,8 +1,8 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { memo, useState, useEffect, useCallback } from "react";
+import { useTheme } from "../../theme/ThemeProvider.js";
 import { useBreakpoint, resolveResponsiveValue } from "../layout/useBreakpoint.js";
 import { Pagination } from "../navigation/Pagination.js";
-import { useTheme } from "../../theme/ThemeProvider.js";
 const ImageGallery = memo(function ImageGallery2({
   images,
   columns = [2, 3, 4],

package/dist/react/core/widgets/MessageStream.js

@@ -1,8 +1,8 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { memo, useMemo } from "react";
+import { useTheme } from "../../theme/ThemeProvider.js";
 import { classNames } from "../../utils/index.js";
 import { Icon } from "../display/Icon.js";
-import { useTheme } from "../../theme/ThemeProvider.js";
 import { useCompactMode } from "../../hooks/useCompactMode.js";
 const STATUS_SHAPES = {
   off: (size, color) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", width: size, height: size, "aria-hidden": "true", children: /* @__PURE__ */ jsx("circle", { cx: "6", cy: "6", r: "5", fill: color }) }),

package/dist/react/core/widgets/MissionCalendar.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { memo, useState, useRef, useMemo, useCallback } from "react";
-import { AstroIcon } from "../display/AstroIcon.js";
 import { useTheme } from "../../theme/ThemeProvider.js";
+import { AstroIcon } from "../display/AstroIcon.js";
 function getStatusColor(status, tokens) {
   if (!status) return tokens.colors.text.muted ?? tokens.colors.text.secondary;
   switch (status) {

package/dist/react/hooks/useCompactMode.js

@@ -1,6 +1,6 @@
 import { useState, useCallback, useMemo } from "react";
-import { useDisplaySettingsOptional } from "../context/DisplaySettingsContext.js";
 import { useTheme } from "../theme/ThemeProvider.js";
+import { useDisplaySettingsOptional } from "../context/DisplaySettingsContext.js";
 function useCompactMode(options = {}) {
   const { compact: compactProp, defaultExpanded = false, onPinChange } = options;
   const { prefersReducedMotion } = useTheme();

package/dist/react/panels/index.js

@@ -0,0 +1,8 @@
+import { ObjectInventoryPanel, recommendedFlyDistance } from "./ObjectInventoryPanel.js";
+import { LayerControlPanel } from "./LayerControlPanel.js";
+export {
+  LayerControlPanel,
+  ObjectInventoryPanel,
+  recommendedFlyDistance
+};
+//# sourceMappingURL=index.js.map

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

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

package/dist/react/theme/config.js

@@ -0,0 +1,30 @@
+const DEFAULT_THEME_CONFIG = {
+  defaultTheme: "hybrid",
+  // Zen (Hybrid) is the default
+  defaultMode: "dark",
+  persist: true
+};
+function getThemeConfig() {
+  if (typeof window !== "undefined") {
+    const envTheme = window.__ZENDIR_UI_THEME__;
+    if (envTheme === "astro" || envTheme === "purple-hue" || envTheme === "hybrid") {
+      return {
+        ...DEFAULT_THEME_CONFIG,
+        defaultTheme: envTheme
+      };
+    }
+  }
+  return DEFAULT_THEME_CONFIG;
+}
+function setDefaultTheme(theme) {
+  if (typeof window !== "undefined") {
+    window.__ZENDIR_UI_THEME__ = theme;
+    localStorage.setItem("zendir-ui-theme", theme);
+  }
+}
+export {
+  DEFAULT_THEME_CONFIG,
+  getThemeConfig,
+  setDefaultTheme
+};
+//# sourceMappingURL=config.js.map

package/dist/react/theme/config.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"config.js","sources":["../../../src/react/theme/config.ts"],"sourcesContent":["/**\n * @zendir/ui - Theme Configuration\n * \n * Easy configuration for default theme settings.\n * Import and use in your app root to set defaults.\n */\n\nimport type { ThemeVariant, ThemeMode } from './ThemeProvider';\n\nexport interface ThemeConfig {\n  /** Default theme variant */\n  defaultTheme?: ThemeVariant;\n  /** Default theme mode */\n  defaultMode?: ThemeMode;\n  /** Persist theme selection to localStorage */\n  persist?: boolean;\n}\n\n/**\n * Default theme configuration\n * \n * Available themes:\n * - 'hybrid' - Zen (Hybrid): default; Astro status colors with purple accents\n * - 'astro' - Astro UX (U.S. Space Force) compliant theme\n * - 'purple-hue' - Zen (Purple Hue) theme with modern aesthetics\n * - 'transparent' / 'transparent-bold' / 'transparent-minimal' - Glassmorphic themes\n */\nexport const DEFAULT_THEME_CONFIG: ThemeConfig = {\n  defaultTheme: 'hybrid', // Zen (Hybrid) is the default\n  defaultMode: 'dark',\n  persist: true,\n};\n\n/**\n * Get theme configuration from environment or use defaults\n */\nexport function getThemeConfig(): ThemeConfig {\n  // Allow override via environment variable or build-time config\n  if (typeof window !== 'undefined') {\n    const envTheme = (window as any).__ZENDIR_UI_THEME__;\n    if (envTheme === 'astro' || envTheme === 'purple-hue' || envTheme === 'hybrid') {\n      return {\n        ...DEFAULT_THEME_CONFIG,\n        defaultTheme: envTheme,\n      };\n    }\n  }\n  \n  return DEFAULT_THEME_CONFIG;\n}\n\n/**\n * Set default theme at build/runtime\n * \n * @example\n * ```tsx\n * // In your app root\n * import { setDefaultTheme } from '@zendir/ui/react/theme/config';\n * \n * // Zen (Hybrid) is the default; override if needed:\n * setDefaultTheme('hybrid');\n * setDefaultTheme('purple-hue');\n * setDefaultTheme('astro');\n * ```\n */\nexport function setDefaultTheme(theme: ThemeVariant): void {\n  if (typeof window !== 'undefined') {\n    (window as any).__ZENDIR_UI_THEME__ = theme;\n    // Also update localStorage if persist is enabled\n    localStorage.setItem('zendir-ui-theme', theme);\n  }\n}\n"],"names":[],"mappings":"AA2BO,MAAM,uBAAoC;AAAA,EAC/C,cAAc;AAAA;AAAA,EACd,aAAa;AAAA,EACb,SAAS;AACX;AAKO,SAAS,iBAA8B;AAE5C,MAAI,OAAO,WAAW,aAAa;AACjC,UAAM,WAAY,OAAe;AACjC,QAAI,aAAa,WAAW,aAAa,gBAAgB,aAAa,UAAU;AAC9E,aAAO;AAAA,QACL,GAAG;AAAA,QACH,cAAc;AAAA,MAAA;AAAA,IAElB;AAAA,EACF;AAEA,SAAO;AACT;AAgBO,SAAS,gBAAgB,OAA2B;AACzD,MAAI,OAAO,WAAW,aAAa;AAChC,WAAe,sBAAsB;AAEtC,iBAAa,QAAQ,mBAAmB,KAAK;AAAA,EAC/C;AACF;"}

package/dist/react/theme/index.js

@@ -0,0 +1,19 @@
+import { ThemeProvider, useScrollbarStyles, useTheme, useThemeTokens } from "./ThemeProvider.js";
+import { DEFAULT_THEME_CONFIG, getThemeConfig, setDefaultTheme } from "./config.js";
+import { CARD_ACCENT_COLORS, CardAccentProvider, SPACE_SYSTEM_COLORS, getAccentColorOptions, getSystemAccentColor, useCardAccent } from "./cardAccent.js";
+export {
+  CARD_ACCENT_COLORS,
+  CardAccentProvider,
+  DEFAULT_THEME_CONFIG,
+  SPACE_SYSTEM_COLORS,
+  ThemeProvider,
+  getAccentColorOptions,
+  getSystemAccentColor,
+  getThemeConfig,
+  setDefaultTheme,
+  useCardAccent,
+  useScrollbarStyles,
+  useTheme,
+  useThemeTokens
+};
+//# sourceMappingURL=index.js.map

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

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

package/dist/react/utils/index.js

@@ -230,6 +230,13 @@ const STATUS_COLORS = {
 function getStatusColor(status) {
   return STATUS_COLORS[status ?? "off"];
 }
+function deriveBatteryStatus(level) {
+  if (level === void 0 || level === null) return "off";
+  if (level <= 10) return "critical";
+  if (level <= 20) return "serious";
+  if (level <= 30) return "caution";
+  return "normal";
+}
 function getStatusFromValue(value, thresholds, higherIsBetter = true) {
   if (value === null || value === void 0 || !Number.isFinite(value)) {
     return "off";
@@ -378,6 +385,7 @@ export {
   addAlpha,
   clamp,
   classNames,
+  deriveBatteryStatus,
   focusRingStyle,
   formatAltitude,
   formatCoordinate,