@zendir/ui 0.1.0

package/dist/react/core/layout/responsive.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"responsive.js","sources":["../../../../src/react/core/layout/responsive.ts"],"sourcesContent":["/**\r\n * @zendir/ui - Responsive Utilities\r\n * \r\n * Helpers for resolving responsive values and spacing tokens to CSS values.\r\n * Used internally by layout primitives (Box, Flex, Grid, Stack).\r\n */\r\n\r\nimport type { ThemeTokens } from '../../theme';\r\nimport type { Breakpoint, ResponsiveValue } from './useBreakpoint';\r\nimport { resolveResponsiveValue } from './useBreakpoint';\r\n\r\n/** Spacing token names matching ThemeTokens.spacing */\r\nexport type SpacingToken = 'xxs' | 'xs' | 'sm' | 'smd' | 'md' | 'mdl' | 'lg' | 'xl' | 'xxl';\r\n\r\n/** Value that can be a spacing token, a CSS string, or a number (px) */\r\ntype SpacingInput = SpacingToken | string | number;\r\n\r\n/**\r\n * Resolve a spacing value to a CSS string.\r\n * - SpacingToken ('xs', 'sm', etc.) → looks up token value\r\n * - number → converts to px string\r\n * - string → passes through (e.g., '1rem', '50%')\r\n */\r\nexport function resolveSpacing(\r\n  value: SpacingInput | undefined,\r\n  tokens: ThemeTokens\r\n): string | undefined {\r\n  if (value === undefined || value === null) return undefined;\r\n  \r\n  // Spacing token\r\n  if (typeof value === 'string' && value in tokens.spacing) {\r\n    return tokens.spacing[value as SpacingToken];\r\n  }\r\n  \r\n  // Number → px\r\n  if (typeof value === 'number') {\r\n    return `${value}px`;\r\n  }\r\n  \r\n  // CSS string passthrough\r\n  return value;\r\n}\r\n\r\n/**\r\n * Resolve a responsive spacing value at the current breakpoint.\r\n */\r\nexport function resolveResponsiveSpacing(\r\n  value: ResponsiveValue<SpacingInput> | undefined,\r\n  breakpoint: Breakpoint,\r\n  tokens: ThemeTokens\r\n): string | undefined {\r\n  if (value === undefined || value === null) return undefined;\r\n  \r\n  const resolved = Array.isArray(value)\r\n    ? resolveResponsiveValue(value, breakpoint)\r\n    : value;\r\n    \r\n  return resolveSpacing(resolved, tokens);\r\n}\r\n\r\n/**\r\n * Resolve a responsive value (non-spacing) at the current breakpoint.\r\n */\r\nexport function resolveResponsive<T>(\r\n  value: ResponsiveValue<T> | undefined,\r\n  breakpoint: Breakpoint\r\n): T | undefined {\r\n  if (value === undefined || value === null) return undefined;\r\n  return Array.isArray(value)\r\n    ? resolveResponsiveValue(value, breakpoint)\r\n    : value;\r\n}\r\n"],"names":[],"mappings":";AAuBO,SAAS,eACd,OACA,QACoB;AACpB,MAAI,UAAU,UAAa,UAAU,KAAM,QAAO;AAGlD,MAAI,OAAO,UAAU,YAAY,SAAS,OAAO,SAAS;AACxD,WAAO,OAAO,QAAQ,KAAqB;AAAA,EAC7C;AAGA,MAAI,OAAO,UAAU,UAAU;AAC7B,WAAO,GAAG,KAAK;AAAA,EACjB;AAGA,SAAO;AACT;AAKO,SAAS,yBACd,OACA,YACA,QACoB;AACpB,MAAI,UAAU,UAAa,UAAU,KAAM,QAAO;AAElD,QAAM,WAAW,MAAM,QAAQ,KAAK,IAChC,uBAAuB,OAAO,UAAU,IACxC;AAEJ,SAAO,eAAe,UAAU,MAAM;AACxC;AAKO,SAAS,kBACd,OACA,YACe;AACf,MAAI,UAAU,UAAa,UAAU,KAAM,QAAO;AAClD,SAAO,MAAM,QAAQ,KAAK,IACtB,uBAAuB,OAAO,UAAU,IACxC;AACN;"}

package/dist/react/core/layout/useBreakpoint.d.ts

@@ -0,0 +1,77 @@
+/**
+ * @zendir/ui - Responsive Breakpoint System
+ *
+ * Breakpoints aligned with Astro UX Design System responsive guidelines.
+ * Supports mission control displays (4K) down to mobile field devices.
+ *
+ * Breakpoints:
+ * - sm:  640px  — Mobile landscape / small tablets
+ * - md:  768px  — Tablets
+ * - lg:  1024px — Laptops / desktop
+ * - xl:  1280px — Large monitors
+ * - xxl: 1920px — Mission control displays (HD)
+ *
+ * @example
+ * ```tsx
+ * const { isMobile, isTablet, isDesktop, breakpoint, width } = useBreakpoint();
+ * ```
+ */
+export type Breakpoint = 'base' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+/** Responsive value: single value or [base, sm?, md?, lg?, xl?, xxl?] */
+export type ResponsiveValue<T> = T | [T, T?, T?, T?, T?, T?];
+export declare const BREAKPOINTS: {
+    readonly base: 0;
+    readonly sm: 640;
+    readonly md: 768;
+    readonly lg: 1024;
+    readonly xl: 1280;
+    readonly xxl: 1920;
+};
+export interface UseBreakpointReturn {
+    /** Current breakpoint name */
+    breakpoint: Breakpoint;
+    /** Current viewport width in px */
+    width: number;
+    /** True when viewport < 768px (base, sm) */
+    isMobile: boolean;
+    /** True when viewport >= 768px and < 1024px */
+    isTablet: boolean;
+    /** True when viewport >= 1024px */
+    isDesktop: boolean;
+    /** True when viewport >= 1920px (mission control) */
+    isWidescreen: boolean;
+    /** Check if viewport is at or above a given breakpoint */
+    isAbove: (bp: Breakpoint) => boolean;
+    /** Check if viewport is below a given breakpoint */
+    isBelow: (bp: Breakpoint) => boolean;
+}
+/**
+ * Hook for responsive breakpoint detection.
+ *
+ * Uses matchMedia for efficient, debounce-free breakpoint tracking.
+ * Respects SSR by defaulting to 'lg' (desktop).
+ *
+ * @example
+ * ```tsx
+ * const { isMobile, isDesktop, breakpoint } = useBreakpoint();
+ *
+ * return (
+ *   <Grid columns={isMobile ? 1 : 3}>
+ *     ...
+ *   </Grid>
+ * );
+ * ```
+ */
+export declare function useBreakpoint(): UseBreakpointReturn;
+/**
+ * Resolve a responsive value based on current breakpoint.
+ *
+ * Given `[1, 2, 3]` at breakpoint 'lg', returns 3.
+ * Falls back to the last defined value for higher breakpoints.
+ *
+ * @example
+ * resolveResponsiveValue([1, 2, 3], 'lg') // → 3
+ * resolveResponsiveValue([1, 2], 'xl')     // → 2 (falls back to last defined)
+ * resolveResponsiveValue(5, 'md')          // → 5 (non-array passthrough)
+ */
+export declare function resolveResponsiveValue<T>(value: ResponsiveValue<T>, breakpoint: Breakpoint): T;

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

@@ -0,0 +1,73 @@
+import { useState, useEffect, useMemo, useCallback } from "react";
+const BREAKPOINTS = {
+  base: 0,
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+  xxl: 1920
+};
+const BREAKPOINT_ORDER = ["base", "sm", "md", "lg", "xl", "xxl"];
+function getBreakpoint(width) {
+  if (width >= BREAKPOINTS.xxl) return "xxl";
+  if (width >= BREAKPOINTS.xl) return "xl";
+  if (width >= BREAKPOINTS.lg) return "lg";
+  if (width >= BREAKPOINTS.md) return "md";
+  if (width >= BREAKPOINTS.sm) return "sm";
+  return "base";
+}
+function useBreakpoint() {
+  const [width, setWidth] = useState(() => {
+    if (typeof window !== "undefined") return window.innerWidth;
+    return 1024;
+  });
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    let rafId;
+    const handleResize = () => {
+      cancelAnimationFrame(rafId);
+      rafId = requestAnimationFrame(() => {
+        setWidth(window.innerWidth);
+      });
+    };
+    window.addEventListener("resize", handleResize, { passive: true });
+    return () => {
+      window.removeEventListener("resize", handleResize);
+      cancelAnimationFrame(rafId);
+    };
+  }, []);
+  const breakpoint = useMemo(() => getBreakpoint(width), [width]);
+  const isAbove = useCallback((bp) => {
+    return width >= BREAKPOINTS[bp];
+  }, [width]);
+  const isBelow = useCallback((bp) => {
+    return width < BREAKPOINTS[bp];
+  }, [width]);
+  return useMemo(() => ({
+    breakpoint,
+    width,
+    isMobile: width < BREAKPOINTS.md,
+    isTablet: width >= BREAKPOINTS.md && width < BREAKPOINTS.lg,
+    isDesktop: width >= BREAKPOINTS.lg,
+    isWidescreen: width >= BREAKPOINTS.xxl,
+    isAbove,
+    isBelow
+  }), [breakpoint, width, isAbove, isBelow]);
+}
+function resolveResponsiveValue(value, breakpoint) {
+  if (!Array.isArray(value)) return value;
+  const index = BREAKPOINT_ORDER.indexOf(breakpoint);
+  for (let i = Math.min(index, value.length - 1); i >= 0; i--) {
+    if (value[i] !== void 0 && value[i] !== null) return value[i];
+  }
+  for (let i = 0; i < value.length; i++) {
+    if (value[i] !== void 0 && value[i] !== null) return value[i];
+  }
+  return value[0];
+}
+export {
+  BREAKPOINTS,
+  resolveResponsiveValue,
+  useBreakpoint
+};
+//# sourceMappingURL=useBreakpoint.js.map

package/dist/react/core/layout/useBreakpoint.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBreakpoint.js","sources":["../../../../src/react/core/layout/useBreakpoint.ts"],"sourcesContent":["/**\r\n * @zendir/ui - Responsive Breakpoint System\r\n * \r\n * Breakpoints aligned with Astro UX Design System responsive guidelines.\r\n * Supports mission control displays (4K) down to mobile field devices.\r\n * \r\n * Breakpoints:\r\n * - sm:  640px  — Mobile landscape / small tablets\r\n * - md:  768px  — Tablets\r\n * - lg:  1024px — Laptops / desktop\r\n * - xl:  1280px — Large monitors\r\n * - xxl: 1920px — Mission control displays (HD)\r\n * \r\n * @example\r\n * ```tsx\r\n * const { isMobile, isTablet, isDesktop, breakpoint, width } = useBreakpoint();\r\n * ```\r\n */\r\n\r\nimport { useState, useEffect, useCallback, useMemo } from 'react';\r\n\r\nexport type Breakpoint = 'base' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';\r\n\r\n/** Responsive value: single value or [base, sm?, md?, lg?, xl?, xxl?] */\r\nexport type ResponsiveValue<T> = T | [T, T?, T?, T?, T?, T?];\r\n\r\nexport const BREAKPOINTS = {\r\n  base: 0,\r\n  sm: 640,\r\n  md: 768,\r\n  lg: 1024,\r\n  xl: 1280,\r\n  xxl: 1920,\r\n} as const;\r\n\r\nconst BREAKPOINT_ORDER: Breakpoint[] = ['base', 'sm', 'md', 'lg', 'xl', 'xxl'];\r\n\r\nfunction getBreakpoint(width: number): Breakpoint {\r\n  if (width >= BREAKPOINTS.xxl) return 'xxl';\r\n  if (width >= BREAKPOINTS.xl) return 'xl';\r\n  if (width >= BREAKPOINTS.lg) return 'lg';\r\n  if (width >= BREAKPOINTS.md) return 'md';\r\n  if (width >= BREAKPOINTS.sm) return 'sm';\r\n  return 'base';\r\n}\r\n\r\nexport interface UseBreakpointReturn {\r\n  /** Current breakpoint name */\r\n  breakpoint: Breakpoint;\r\n  /** Current viewport width in px */\r\n  width: number;\r\n  /** True when viewport < 768px (base, sm) */\r\n  isMobile: boolean;\r\n  /** True when viewport >= 768px and < 1024px */\r\n  isTablet: boolean;\r\n  /** True when viewport >= 1024px */\r\n  isDesktop: boolean;\r\n  /** True when viewport >= 1920px (mission control) */\r\n  isWidescreen: boolean;\r\n  /** Check if viewport is at or above a given breakpoint */\r\n  isAbove: (bp: Breakpoint) => boolean;\r\n  /** Check if viewport is below a given breakpoint */\r\n  isBelow: (bp: Breakpoint) => boolean;\r\n}\r\n\r\n/**\r\n * Hook for responsive breakpoint detection.\r\n * \r\n * Uses matchMedia for efficient, debounce-free breakpoint tracking.\r\n * Respects SSR by defaulting to 'lg' (desktop).\r\n * \r\n * @example\r\n * ```tsx\r\n * const { isMobile, isDesktop, breakpoint } = useBreakpoint();\r\n * \r\n * return (\r\n *   <Grid columns={isMobile ? 1 : 3}>\r\n *     ...\r\n *   </Grid>\r\n * );\r\n * ```\r\n */\r\nexport function useBreakpoint(): UseBreakpointReturn {\r\n  const [width, setWidth] = useState(() => {\r\n    if (typeof window !== 'undefined') return window.innerWidth;\r\n    return 1024; // SSR default: desktop\r\n  });\r\n\r\n  useEffect(() => {\r\n    if (typeof window === 'undefined') return;\r\n\r\n    let rafId: number;\r\n    const handleResize = () => {\r\n      cancelAnimationFrame(rafId);\r\n      rafId = requestAnimationFrame(() => {\r\n        setWidth(window.innerWidth);\r\n      });\r\n    };\r\n\r\n    window.addEventListener('resize', handleResize, { passive: true });\r\n    return () => {\r\n      window.removeEventListener('resize', handleResize);\r\n      cancelAnimationFrame(rafId);\r\n    };\r\n  }, []);\r\n\r\n  const breakpoint = useMemo(() => getBreakpoint(width), [width]);\r\n\r\n  const isAbove = useCallback((bp: Breakpoint) => {\r\n    return width >= BREAKPOINTS[bp];\r\n  }, [width]);\r\n\r\n  const isBelow = useCallback((bp: Breakpoint) => {\r\n    return width < BREAKPOINTS[bp];\r\n  }, [width]);\r\n\r\n  return useMemo(() => ({\r\n    breakpoint,\r\n    width,\r\n    isMobile: width < BREAKPOINTS.md,\r\n    isTablet: width >= BREAKPOINTS.md && width < BREAKPOINTS.lg,\r\n    isDesktop: width >= BREAKPOINTS.lg,\r\n    isWidescreen: width >= BREAKPOINTS.xxl,\r\n    isAbove,\r\n    isBelow,\r\n  }), [breakpoint, width, isAbove, isBelow]);\r\n}\r\n\r\n/**\r\n * Resolve a responsive value based on current breakpoint.\r\n * \r\n * Given `[1, 2, 3]` at breakpoint 'lg', returns 3.\r\n * Falls back to the last defined value for higher breakpoints.\r\n * \r\n * @example\r\n * resolveResponsiveValue([1, 2, 3], 'lg') // → 3\r\n * resolveResponsiveValue([1, 2], 'xl')     // → 2 (falls back to last defined)\r\n * resolveResponsiveValue(5, 'md')          // → 5 (non-array passthrough)\r\n */\r\nexport function resolveResponsiveValue<T>(value: ResponsiveValue<T>, breakpoint: Breakpoint): T {\r\n  if (!Array.isArray(value)) return value;\r\n  \r\n  const index = BREAKPOINT_ORDER.indexOf(breakpoint);\r\n  \r\n  // Walk backwards from current breakpoint to find a defined value\r\n  for (let i = Math.min(index, value.length - 1); i >= 0; i--) {\r\n    if (value[i] !== undefined && value[i] !== null) return value[i] as T;\r\n  }\r\n  \r\n  // Fallback: find first defined value in the responsive array.\r\n  for (let i = 0; i < value.length; i++) {\r\n    if (value[i] !== undefined && value[i] !== null) return value[i] as T;\r\n  }\r\n\r\n  return value[0] as T;\r\n}\r\n"],"names":[],"mappings":";AA0BO,MAAM,cAAc;AAAA,EACzB,MAAM;AAAA,EACN,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,KAAK;AACP;AAEA,MAAM,mBAAiC,CAAC,QAAQ,MAAM,MAAM,MAAM,MAAM,KAAK;AAE7E,SAAS,cAAc,OAA2B;AAChD,MAAI,SAAS,YAAY,IAAK,QAAO;AACrC,MAAI,SAAS,YAAY,GAAI,QAAO;AACpC,MAAI,SAAS,YAAY,GAAI,QAAO;AACpC,MAAI,SAAS,YAAY,GAAI,QAAO;AACpC,MAAI,SAAS,YAAY,GAAI,QAAO;AACpC,SAAO;AACT;AAsCO,SAAS,gBAAqC;AACnD,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,MAAM;AACvC,QAAI,OAAO,WAAW,YAAa,QAAO,OAAO;AACjD,WAAO;AAAA,EACT,CAAC;AAED,YAAU,MAAM;AACd,QAAI,OAAO,WAAW,YAAa;AAEnC,QAAI;AACJ,UAAM,eAAe,MAAM;AACzB,2BAAqB,KAAK;AAC1B,cAAQ,sBAAsB,MAAM;AAClC,iBAAS,OAAO,UAAU;AAAA,MAC5B,CAAC;AAAA,IACH;AAEA,WAAO,iBAAiB,UAAU,cAAc,EAAE,SAAS,MAAM;AACjE,WAAO,MAAM;AACX,aAAO,oBAAoB,UAAU,YAAY;AACjD,2BAAqB,KAAK;AAAA,IAC5B;AAAA,EACF,GAAG,CAAA,CAAE;AAEL,QAAM,aAAa,QAAQ,MAAM,cAAc,KAAK,GAAG,CAAC,KAAK,CAAC;AAE9D,QAAM,UAAU,YAAY,CAAC,OAAmB;AAC9C,WAAO,SAAS,YAAY,EAAE;AAAA,EAChC,GAAG,CAAC,KAAK,CAAC;AAEV,QAAM,UAAU,YAAY,CAAC,OAAmB;AAC9C,WAAO,QAAQ,YAAY,EAAE;AAAA,EAC/B,GAAG,CAAC,KAAK,CAAC;AAEV,SAAO,QAAQ,OAAO;AAAA,IACpB;AAAA,IACA;AAAA,IACA,UAAU,QAAQ,YAAY;AAAA,IAC9B,UAAU,SAAS,YAAY,MAAM,QAAQ,YAAY;AAAA,IACzD,WAAW,SAAS,YAAY;AAAA,IAChC,cAAc,SAAS,YAAY;AAAA,IACnC;AAAA,IACA;AAAA,EAAA,IACE,CAAC,YAAY,OAAO,SAAS,OAAO,CAAC;AAC3C;AAaO,SAAS,uBAA0B,OAA2B,YAA2B;AAC9F,MAAI,CAAC,MAAM,QAAQ,KAAK,EAAG,QAAO;AAElC,QAAM,QAAQ,iBAAiB,QAAQ,UAAU;AAGjD,WAAS,IAAI,KAAK,IAAI,OAAO,MAAM,SAAS,CAAC,GAAG,KAAK,GAAG,KAAK;AAC3D,QAAI,MAAM,CAAC,MAAM,UAAa,MAAM,CAAC,MAAM,KAAM,QAAO,MAAM,CAAC;AAAA,EACjE;AAGA,WAAS,IAAI,GAAG,IAAI,MAAM,QAAQ,KAAK;AACrC,QAAI,MAAM,CAAC,MAAM,UAAa,MAAM,CAAC,MAAM,KAAM,QAAO,MAAM,CAAC;AAAA,EACjE;AAEA,SAAO,MAAM,CAAC;AAChB;"}

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

@@ -0,0 +1,443 @@
+import { StatusLevel } from '../utils';
+import { AstroIconName } from './AstroIcon';
+
+/**
+ * Threshold configuration for automatic status derivation
+ * Values are compared: value >= threshold triggers that status (high thresholds)
+ * or value <= threshold triggers that status (low thresholds)
+ */
+export interface StatusThresholds {
+    /** Value at or above which status becomes 'critical' (high is bad) */
+    critical?: number;
+    /** Value at or above which status becomes 'serious' (high is bad) */
+    serious?: number;
+    /** Value at or above which status becomes 'caution' (high is bad) */
+    caution?: number;
+    /** Value at or below which status becomes 'caution' (low is bad) */
+    cautionLow?: number;
+    /** Value at or below which status becomes 'serious' (low is bad) */
+    seriousLow?: number;
+    /** Value at or below which status becomes 'critical' (low is bad) */
+    criticalLow?: number;
+}
+/**
+ * Complete property configuration
+ */
+export interface PropertyConfig {
+    /** Display name (sentence case per AstroUXDS) */
+    label: string;
+    /** Astro icon name */
+    icon: AstroIconName;
+    /** Unit of measurement */
+    unit?: string;
+    /** Precision for number formatting */
+    precision?: number;
+    /** Status thresholds for auto-derivation */
+    thresholds?: StatusThresholds;
+    /** Category for grouping */
+    category?: PropertyCategory;
+    /** Description for tooltips */
+    description?: string;
+    /** Format function override */
+    format?: (value: number) => string;
+}
+/**
+ * Property categories for organization
+ */
+export type PropertyCategory = 'power' | 'thermal' | 'attitude' | 'communications' | 'propulsion' | 'navigation' | 'payload' | 'health' | 'orbital' | 'general';
+/**
+ * Property key - either a preset name or custom string
+ */
+export type PropertyKey = keyof typeof PROPERTY_PRESETS | (string & {});
+/**
+ * Predefined property configurations for common space operations telemetry
+ *
+ * These provide sensible defaults that can be overridden per-use.
+ */
+export declare const PROPERTY_PRESETS: {
+    readonly battery: {
+        readonly label: "Battery";
+        readonly icon: AstroIconName;
+        readonly unit: "%";
+        readonly precision: 1;
+        readonly category: PropertyCategory;
+        readonly thresholds: {
+            readonly criticalLow: 10;
+            readonly seriousLow: 20;
+            readonly cautionLow: 30;
+        };
+        readonly description: "Battery state of charge";
+    };
+    readonly voltage: {
+        readonly label: "Voltage";
+        readonly icon: AstroIconName;
+        readonly unit: "V";
+        readonly precision: 2;
+        readonly category: PropertyCategory;
+        readonly thresholds: {
+            readonly criticalLow: 24;
+            readonly cautionLow: 26;
+        };
+        readonly description: "Bus voltage";
+    };
+    readonly current: {
+        readonly label: "Current";
+        readonly icon: AstroIconName;
+        readonly unit: "A";
+        readonly precision: 2;
+        readonly category: PropertyCategory;
+        readonly description: "Current draw";
+    };
+    readonly power: {
+        readonly label: "Power";
+        readonly icon: AstroIconName;
+        readonly unit: "W";
+        readonly precision: 1;
+        readonly category: PropertyCategory;
+        readonly description: "Power consumption or generation";
+    };
+    readonly solarPower: {
+        readonly label: "Solar";
+        readonly icon: AstroIconName;
+        readonly unit: "W";
+        readonly precision: 1;
+        readonly category: PropertyCategory;
+        readonly description: "Solar array output";
+    };
+    readonly load: {
+        readonly label: "Load";
+        readonly icon: AstroIconName;
+        readonly unit: "W";
+        readonly precision: 1;
+        readonly category: PropertyCategory;
+        readonly description: "Power load";
+    };
+    readonly temperature: {
+        readonly label: "Temperature";
+        readonly icon: AstroIconName;
+        readonly unit: "°C";
+        readonly precision: 1;
+        readonly category: PropertyCategory;
+        readonly thresholds: {
+            readonly critical: 80;
+            readonly serious: 70;
+            readonly caution: 60;
+            readonly cautionLow: -20;
+            readonly criticalLow: -40;
+        };
+        readonly description: "Component temperature";
+    };
+    readonly heater: {
+        readonly label: "Heater";
+        readonly icon: AstroIconName;
+        readonly unit: "";
+        readonly category: PropertyCategory;
+        readonly description: "Heater status";
+    };
+    readonly roll: {
+        readonly label: "Roll";
+        readonly icon: AstroIconName;
+        readonly unit: "°";
+        readonly precision: 2;
+        readonly category: PropertyCategory;
+        readonly thresholds: {
+            readonly critical: 45;
+            readonly caution: 30;
+        };
+        readonly description: "Roll angle";
+    };
+    readonly pitch: {
+        readonly label: "Pitch";
+        readonly icon: AstroIconName;
+        readonly unit: "°";
+        readonly precision: 2;
+        readonly category: PropertyCategory;
+        readonly thresholds: {
+            readonly critical: 45;
+            readonly caution: 30;
+        };
+        readonly description: "Pitch angle";
+    };
+    readonly yaw: {
+        readonly label: "Yaw";
+        readonly icon: AstroIconName;
+        readonly unit: "°";
+        readonly precision: 2;
+        readonly category: PropertyCategory;
+        readonly thresholds: {
+            readonly critical: 45;
+            readonly caution: 30;
+        };
+        readonly description: "Yaw angle";
+    };
+    readonly pointingError: {
+        readonly label: "Pointing error";
+        readonly icon: AstroIconName;
+        readonly unit: "°";
+        readonly precision: 3;
+        readonly category: PropertyCategory;
+        readonly thresholds: {
+            readonly critical: 1;
+            readonly serious: 0.5;
+            readonly caution: 0.1;
+        };
+        readonly description: "Attitude pointing error";
+    };
+    readonly angularVelocity: {
+        readonly label: "Angular velocity";
+        readonly icon: AstroIconName;
+        readonly unit: "°/s";
+        readonly precision: 3;
+        readonly category: PropertyCategory;
+        readonly thresholds: {
+            readonly critical: 5;
+            readonly caution: 2;
+        };
+        readonly description: "Rotation rate";
+    };
+    readonly signalStrength: {
+        readonly label: "Signal";
+        readonly icon: AstroIconName;
+        readonly unit: "dBm";
+        readonly precision: 1;
+        readonly category: PropertyCategory;
+        readonly thresholds: {
+            readonly criticalLow: -100;
+            readonly cautionLow: -85;
+        };
+        readonly description: "Received signal strength";
+    };
+    readonly dataRate: {
+        readonly label: "Data rate";
+        readonly icon: AstroIconName;
+        readonly unit: "Mbps";
+        readonly precision: 2;
+        readonly category: PropertyCategory;
+        readonly description: "Communication data rate";
+    };
+    readonly packetLoss: {
+        readonly label: "Packet loss";
+        readonly icon: AstroIconName;
+        readonly unit: "%";
+        readonly precision: 2;
+        readonly category: PropertyCategory;
+        readonly thresholds: {
+            readonly critical: 10;
+            readonly serious: 5;
+            readonly caution: 1;
+        };
+        readonly description: "Communication packet loss rate";
+    };
+    readonly snr: {
+        readonly label: "SNR";
+        readonly icon: AstroIconName;
+        readonly unit: "dB";
+        readonly precision: 1;
+        readonly category: PropertyCategory;
+        readonly thresholds: {
+            readonly criticalLow: 5;
+            readonly cautionLow: 10;
+        };
+        readonly description: "Signal-to-noise ratio";
+    };
+    readonly queue: {
+        readonly label: "Queue";
+        readonly icon: AstroIconName;
+        readonly unit: "pkts";
+        readonly precision: 0;
+        readonly category: PropertyCategory;
+        readonly thresholds: {
+            readonly critical: 1000;
+            readonly caution: 500;
+        };
+        readonly description: "Packet queue depth";
+    };
+    readonly fuelLevel: {
+        readonly label: "Fuel";
+        readonly icon: AstroIconName;
+        readonly unit: "%";
+        readonly precision: 1;
+        readonly category: PropertyCategory;
+        readonly thresholds: {
+            readonly critical: 5;
+            readonly serious: 10;
+            readonly caution: 20;
+        };
+        readonly description: "Propellant remaining";
+    };
+    readonly deltaV: {
+        readonly label: "Delta-V";
+        readonly icon: AstroIconName;
+        readonly unit: "m/s";
+        readonly precision: 1;
+        readonly category: PropertyCategory;
+        readonly description: "Available delta-V budget";
+    };
+    readonly thrustLevel: {
+        readonly label: "Thrust";
+        readonly icon: AstroIconName;
+        readonly unit: "N";
+        readonly precision: 2;
+        readonly category: PropertyCategory;
+        readonly description: "Current thrust output";
+    };
+    readonly altitude: {
+        readonly label: "Altitude";
+        readonly icon: AstroIconName;
+        readonly unit: "km";
+        readonly precision: 1;
+        readonly category: PropertyCategory;
+        readonly thresholds: {
+            readonly criticalLow: 200;
+            readonly cautionLow: 250;
+        };
+        readonly description: "Orbital altitude";
+    };
+    readonly velocity: {
+        readonly label: "Velocity";
+        readonly icon: AstroIconName;
+        readonly unit: "km/s";
+        readonly precision: 3;
+        readonly category: PropertyCategory;
+        readonly description: "Orbital velocity";
+    };
+    readonly inclination: {
+        readonly label: "Inclination";
+        readonly icon: AstroIconName;
+        readonly unit: "°";
+        readonly precision: 2;
+        readonly category: PropertyCategory;
+        readonly description: "Orbital inclination";
+    };
+    readonly eccentricity: {
+        readonly label: "Eccentricity";
+        readonly icon: AstroIconName;
+        readonly unit: "";
+        readonly precision: 6;
+        readonly category: PropertyCategory;
+        readonly description: "Orbital eccentricity";
+    };
+    readonly payloadStatus: {
+        readonly label: "Payload";
+        readonly icon: AstroIconName;
+        readonly unit: "";
+        readonly category: PropertyCategory;
+        readonly description: "Payload operational status";
+    };
+    readonly storageUsed: {
+        readonly label: "Storage";
+        readonly icon: AstroIconName;
+        readonly unit: "%";
+        readonly precision: 1;
+        readonly category: PropertyCategory;
+        readonly thresholds: {
+            readonly critical: 95;
+            readonly serious: 90;
+            readonly caution: 80;
+        };
+        readonly description: "Onboard storage usage";
+    };
+    readonly cpuUsage: {
+        readonly label: "CPU";
+        readonly icon: AstroIconName;
+        readonly unit: "%";
+        readonly precision: 1;
+        readonly category: PropertyCategory;
+        readonly thresholds: {
+            readonly critical: 95;
+            readonly serious: 85;
+            readonly caution: 75;
+        };
+        readonly description: "Processor utilization";
+    };
+    readonly memoryUsage: {
+        readonly label: "Memory";
+        readonly icon: AstroIconName;
+        readonly unit: "%";
+        readonly precision: 1;
+        readonly category: PropertyCategory;
+        readonly thresholds: {
+            readonly critical: 95;
+            readonly serious: 85;
+            readonly caution: 75;
+        };
+        readonly description: "Memory utilization";
+    };
+    readonly uptime: {
+        readonly label: "Uptime";
+        readonly icon: AstroIconName;
+        readonly unit: "s";
+        readonly precision: 0;
+        readonly category: PropertyCategory;
+        readonly description: "System uptime";
+    };
+    readonly count: {
+        readonly label: "Count";
+        readonly icon: AstroIconName;
+        readonly unit: "";
+        readonly precision: 0;
+        readonly category: PropertyCategory;
+        readonly description: "Item count";
+    };
+    readonly percentage: {
+        readonly label: "Percentage";
+        readonly icon: AstroIconName;
+        readonly unit: "%";
+        readonly precision: 1;
+        readonly category: PropertyCategory;
+        readonly description: "Percentage value";
+    };
+    readonly duration: {
+        readonly label: "Duration";
+        readonly icon: AstroIconName;
+        readonly unit: "s";
+        readonly precision: 0;
+        readonly category: PropertyCategory;
+        readonly description: "Time duration";
+    };
+};
+export declare const CATEGORY_ICONS: Record<PropertyCategory, AstroIconName>;
+export declare const CATEGORY_LABELS: Record<PropertyCategory, string>;
+/**
+ * Get property configuration by key
+ * Returns preset config or a default config for unknown properties
+ */
+export declare function getPropertyConfig(key: PropertyKey): PropertyConfig;
+/**
+ * Format a property key into a display label (sentence case)
+ */
+export declare function formatPropertyLabel(key: string): string;
+/**
+ * Derive status level from a value and thresholds
+ *
+ * @param value - Current value
+ * @param thresholds - Status thresholds
+ * @returns StatusLevel
+ *
+ * @example
+ * ```tsx
+ * deriveStatus(75, { caution: 60, critical: 80 }) // 'caution'
+ * deriveStatus(25, { criticalLow: 10, cautionLow: 30 }) // 'caution'
+ * deriveStatus(50, { caution: 60, critical: 80 }) // 'normal'
+ * ```
+ */
+export declare function deriveStatus(value: number | undefined | null, thresholds?: StatusThresholds): StatusLevel;
+/**
+ * Derive status for battery specifically (low is bad)
+ */
+export declare function deriveBatteryStatus(level: number | undefined): StatusLevel;
+/**
+ * Format a value with its property config
+ */
+export declare function formatPropertyValue(value: number | undefined | null, config: PropertyConfig): string;
+/**
+ * Create a custom property config by merging with a preset
+ */
+export declare function createPropertyConfig(baseKey: PropertyKey, overrides: Partial<PropertyConfig>): PropertyConfig;
+/**
+ * Get all properties in a category
+ */
+export declare function getPropertiesByCategory(category: PropertyCategory): Array<{
+    key: string;
+    config: PropertyConfig;
+}>;