@zendir/ui 0.4.1 → 0.6.0

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

@@ -1 +1 @@
-{"version":3,"file":"ObjectInventoryPanel.js","sources":["../../../src/react/panels/ObjectInventoryPanel.tsx"],"sourcesContent":["/**\n * @zendir/ui - ObjectInventoryPanel\n *\n * Themed list of simulation objects, grouped by `kind` (spacecraft /\n * ground stations / celestial bodies). Pair with `useSimulationScene`:\n *\n * ```tsx\n * const scene = useSimulationScene({ client, containerId, simulationId });\n * <ObjectInventoryPanel\n *   objects={scene.objects}\n *   onSelect={(obj) => zenRef.current?.focusOn(obj.id, {\n *     zoom: recommendedFlyDistance(obj.kind),\n *   })}\n * />\n * ```\n *\n * The panel renders the toggle UI only — it has no opinion about WHAT\n * happens on select. The consumer wires `onSelect` to its 3D viewer's\n * imperative handle (or anywhere else — the panel is reusable in any\n * dashboard or debug context).\n */\n\nimport { memo, useCallback, useState } from 'react';\nimport type { CSSProperties, ReactNode } from 'react';\nimport { useThemeTokens } from '../theme/ThemeProvider';\nimport { useSpatialSelection } from '../context/SpatialSelectionContext';\nimport type { SimulationSceneObject, StructureDiag, PositionTickDiag } from '../hooks/useSimulationScene';\n\n// ─── Types ────────────────────────────────────────────────────────────────────\n\nexport type ObjectInventoryKind = SimulationSceneObject['kind'];\n\nexport interface ObjectInventoryPanelProps {\n  /** Objects to list. Typically `useSimulationScene().objects`. */\n  objects: SimulationSceneObject[];\n  /** Click handler — fires with the clicked object. Pure forward; the\n   *  panel does not navigate, focus, or fly anywhere itself. */\n  onSelect?: (object: SimulationSceneObject) => void;\n  /** Currently selected object id (highlights the row). Pass `null` for none. */\n  selectedId?: string | null;\n\n  /** Where to anchor the panel on its parent. Default: `top-left`. */\n  position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';\n  /** Pixel offsets from the anchor. Defaults to (16, 56) so a top bar fits above. */\n  offset?: { x?: number; y?: number };\n  /** Hide the panel without unmounting (preserves `selectedId` state). */\n  hidden?: boolean;\n  /** Width in pixels. Default 330. */\n  width?: number;\n  /** Maximum height (CSS value). Default `'50vh'`. */\n  maxHeight?: string | number;\n\n  /** Allow the user to collapse / expand the panel. Default true. */\n  collapsible?: boolean;\n  /** Initial collapsed state. Default false. */\n  defaultCollapsed?: boolean;\n\n  /** Optional title override. Default: `\"API Objects · N\"`. */\n  title?: ReactNode;\n\n  /**\n   * Optional structure diagnostic block (raw keys + counts from\n   * getSimulationStructure). Useful in dev / debug builds; omit in\n   * production for a cleaner look.\n   */\n  structureDiag?: StructureDiag | null;\n  /** Optional position-tick diagnostic block. */\n  positionTickDiag?: PositionTickDiag | null;\n\n  /** Custom labels per kind (defaults: \"Spacecraft\", \"Ground Stations\", \"Celestial Bodies\"). */\n  kindLabels?: Partial<Record<ObjectInventoryKind, string>>;\n\n  /** Inline style override on the outer container. */\n  style?: CSSProperties;\n}\n\n// ─── Helpers ──────────────────────────────────────────────────────────────────\n\n/** Stable short-form of a GUID for inline display. */\nfunction shortId(id: string): string {\n  return id.length <= 8 ? id : id.slice(0, 8);\n}\n\nconst DEFAULT_KIND_LABELS: Record<ObjectInventoryKind, string> = {\n  spacecraft: 'Spacecraft',\n  groundStation: 'Ground Stations',\n  celestialBody: 'Celestial Bodies',\n};\n\nconst KIND_ORDER: ObjectInventoryKind[] = ['spacecraft', 'groundStation', 'celestialBody'];\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\nexport const ObjectInventoryPanel = memo(function ObjectInventoryPanel({\n  objects,\n  onSelect,\n  selectedId,\n  position = 'top-left',\n  offset,\n  hidden = false,\n  width = 330,\n  maxHeight = '50vh',\n  collapsible = true,\n  defaultCollapsed = false,\n  title,\n  structureDiag,\n  positionTickDiag,\n  kindLabels,\n  style,\n}: ObjectInventoryPanelProps) {\n  const tokens = useThemeTokens();\n  const [collapsed, setCollapsed] = useState(defaultCollapsed);\n\n  // Optional <SpatialSelectionProvider> integration. When present, the\n  // panel uses the shared selection state so other components (3D\n  // viewer, GroundTrackMap, etc.) stay synchronised. Explicit props\n  // always win — consumers can still override per-instance.\n  const ctx = useSpatialSelection();\n  const effectiveSelectedId = selectedId !== undefined ? selectedId : ctx?.selectedId ?? null;\n  const effectiveOnSelect = useCallback(\n    (obj: SimulationSceneObject) => {\n      onSelect?.(obj);\n      // Also push into the shared context if no explicit onSelect wins it.\n      if (!onSelect) ctx?.setSelectedId(obj.id);\n    },\n    [onSelect, ctx],\n  );\n\n  const labels = { ...DEFAULT_KIND_LABELS, ...kindLabels };\n  const entries = Array.isArray(objects) ? objects : [];\n\n  // Position anchor — translate the prop into top/left/right/bottom CSS.\n  const offX = offset?.x ?? 16;\n  const offY = offset?.y ?? 56;\n  const anchor: CSSProperties = (() => {\n    switch (position) {\n      case 'top-right':    return { top: offY, right: offX };\n      case 'bottom-left':  return { bottom: offY, left: offX };\n      case 'bottom-right': return { bottom: offY, right: offX };\n      case 'top-left':\n      default:             return { top: offY, left: offX };\n    }\n  })();\n\n  if (hidden) return null;\n\n  const dim: CSSProperties = { opacity: 0.55, fontSize: '0.9em' };\n\n  return (\n    <div\n      data-testid=\"zendir-object-inventory\"\n      style={{\n        position: 'absolute',\n        zIndex: 2,\n        width,\n        maxHeight,\n        overflow: 'auto',\n        padding: tokens.spacing.sm,\n        borderRadius: tokens.borderRadius?.md ?? 6,\n        border: '1px solid rgba(255,255,255,0.12)',\n        background: 'rgba(0,0,0,0.72)',\n        color: tokens.colors.text.primary,\n        fontSize: tokens.typography.fontSize.xs,\n        lineHeight: 1.35,\n        ...anchor,\n        ...style,\n      }}\n    >\n      <PanelHeader\n        title={title ?? `API Objects · ${entries.length}`}\n        collapsible={collapsible}\n        collapsed={collapsed}\n        onToggle={() => setCollapsed((c) => !c)}\n      />\n\n      {!collapsed && (\n        <>\n          {KIND_ORDER.map((kind) => {\n            const items = entries.filter((o) => o.kind === kind);\n            return (\n              <ObjectInventoryGroup\n                key={kind}\n                title={`${labels[kind]} (${items.length})`}\n                items={items}\n                selectedId={effectiveSelectedId}\n                onSelect={onSelect != null ? onSelect : (ctx ? effectiveOnSelect : undefined)}\n              />\n            );\n          })}\n\n          {structureDiag !== undefined && (\n            <StructureDiagBlock diag={structureDiag} dim={dim} />\n          )}\n\n          {positionTickDiag !== undefined && (\n            <PositionTickDiagBlock diag={positionTickDiag} dim={dim} />\n          )}\n        </>\n      )}\n    </div>\n  );\n});\n\n// ─── Sub-components ───────────────────────────────────────────────────────────\n\nconst PanelHeader = ({\n  title,\n  collapsible,\n  collapsed,\n  onToggle,\n}: {\n  title: ReactNode;\n  collapsible: boolean;\n  collapsed: boolean;\n  onToggle: () => void;\n}) => {\n  if (!collapsible) {\n    return <div style={{ marginBottom: 6, fontWeight: 600 }}>{title}</div>;\n  }\n  return (\n    <button\n      type=\"button\"\n      onClick={onToggle}\n      aria-expanded={!collapsed}\n      style={{\n        display: 'flex',\n        width: '100%',\n        alignItems: 'center',\n        justifyContent: 'space-between',\n        marginBottom: 6,\n        padding: 0,\n        background: 'none',\n        border: 'none',\n        color: 'inherit',\n        font: 'inherit',\n        fontWeight: 600,\n        cursor: 'pointer',\n        textAlign: 'left',\n      }}\n    >\n      <span>{title}</span>\n      <span aria-hidden style={{ opacity: 0.7, fontSize: '0.85em' }}>\n        {collapsed ? '▸' : '▾'}\n      </span>\n    </button>\n  );\n};\n\nconst ObjectInventoryGroup = ({\n  title,\n  items,\n  selectedId,\n  onSelect,\n}: {\n  title: string;\n  items: SimulationSceneObject[];\n  selectedId: string | null;\n  onSelect?: (obj: SimulationSceneObject) => void;\n}) => (\n  <div style={{ marginBottom: 6 }}>\n    <div style={{ opacity: 0.85 }}>{title}</div>\n    {items.length === 0 ? (\n      <div style={{ opacity: 0.6 }}>—</div>\n    ) : (\n      items.map((item) => (\n        <ObjectRow\n          key={item.id}\n          object={item}\n          selected={item.id === selectedId}\n          onSelect={onSelect}\n        />\n      ))\n    )}\n  </div>\n);\n\nconst ObjectRow = ({\n  object,\n  selected,\n  onSelect,\n}: {\n  object: SimulationSceneObject;\n  selected: boolean;\n  onSelect?: (obj: SimulationSceneObject) => void;\n}) => {\n  const handleClick = useCallback(() => onSelect?.(object), [onSelect, object]);\n  const interactive = onSelect != null;\n  return (\n    <div\n      role={interactive ? 'button' : undefined}\n      tabIndex={interactive ? 0 : undefined}\n      onClick={interactive ? handleClick : undefined}\n      onKeyDown={\n        interactive\n          ? (e) => {\n              if (e.key === 'Enter' || e.key === ' ') {\n                e.preventDefault();\n                handleClick();\n              }\n            }\n          : undefined\n      }\n      style={{\n        opacity: 0.95,\n        padding: '1px 4px',\n        borderRadius: 3,\n        cursor: interactive ? 'pointer' : 'default',\n        background: selected ? 'rgba(255,255,255,0.12)' : 'transparent',\n      }}\n    >\n      {object.name} <span style={{ opacity: 0.6 }}>({shortId(object.id)})</span>\n    </div>\n  );\n};\n\nconst StructureDiagBlock = ({\n  diag,\n  dim,\n}: {\n  diag: StructureDiag | null | undefined;\n  dim: CSSProperties;\n}) => (\n  <div style={{ marginTop: 8, borderTop: '1px solid rgba(255,255,255,0.1)', paddingTop: 6 }}>\n    {diag ? (\n      <>\n        <div style={{ ...dim, marginBottom: 2 }}>Raw structure keys:</div>\n        <div style={dim}>{diag.topLevelKeys.join(', ') || '—'}</div>\n        <div style={{ ...dim, marginTop: 2 }}>\n          Objects[]: {diag.rawObjectCount < 0 ? 'absent' : diag.rawObjectCount}\n          {' · '}\n          Systems[]: {diag.rawSystemCount < 0 ? 'absent' : diag.rawSystemCount}\n        </div>\n      </>\n    ) : (\n      <div style={{ ...dim, marginTop: 4 }}>Waiting for structure…</div>\n    )}\n  </div>\n);\n\nconst PositionTickDiagBlock = ({\n  diag,\n  dim,\n}: {\n  diag: PositionTickDiag | null | undefined;\n  dim: CSSProperties;\n}) => {\n  if (!diag) return null;\n  return (\n    <div style={{ marginTop: 8, borderTop: '1px solid rgba(255,255,255,0.1)', paddingTop: 6 }}>\n      <div style={{ ...dim, marginBottom: 2 }}>Last position tick:</div>\n      <div style={dim}>\n        ok {diag.parsedOk}/{diag.requested}\n        {diag.parseFailed > 0 && ` · parseFail ${diag.parseFailed}`}\n        {diag.requestFailed > 0 && ` · reqFail ${diag.requestFailed}`}\n      </div>\n      <div style={dim}>\n        asked for:{' '}\n        {diag.requestedProps\n          ? diag.requestedProps.join(', ')\n          : 'getAllProperties (fallback)'}\n      </div>\n      {diag.firstResponseKeys.length > 0 && (\n        <div style={{ ...dim, wordBreak: 'break-all' }}>\n          got keys: {diag.firstResponseKeys.slice(0, 12).join(', ')}\n          {diag.firstResponseKeys.length > 12 && ' …'}\n        </div>\n      )}\n      {diag.firstResponseSample && (\n        <div style={{ ...dim, wordBreak: 'break-all' }}>{diag.firstResponseSample}</div>\n      )}\n    </div>\n  );\n};\n\n// ─── Companion helper ─────────────────────────────────────────────────────────\n\n/**\n * Sensible default fly-to distance per object kind, for use with\n * `<ZenSpace3D />`'s imperative `focusOn(id, { zoom })` handle.\n *\n *   spacecraft:      2 000 000 m  (≈ 2 000 km — close orbital view)\n *   groundStation:   1 500 000 m  (≈ 1 500 km — high-altitude angled view)\n *   celestialBody:  50 000 000 m  (≈ 50 000 km — full-planet view)\n *\n * Override per call if the consumer wants tighter/looser framing.\n */\nexport function recommendedFlyDistance(kind: ObjectInventoryKind): number {\n  switch (kind) {\n    case 'spacecraft':    return 2_000_000;\n    case 'groundStation': return 1_500_000;\n    case 'celestialBody': return 50_000_000;\n  }\n}\n\nexport default ObjectInventoryPanel;\n"],"names":["ObjectInventoryPanel"],"mappings":"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"}
+{"version":3,"file":"ObjectInventoryPanel.js","names":[],"sources":["../../../src/react/panels/ObjectInventoryPanel.tsx"],"sourcesContent":["/**\n * @zendir/ui - ObjectInventoryPanel\n *\n * Themed list of simulation objects, grouped by `kind` (spacecraft /\n * ground stations / celestial bodies). Pair with `useSimulationScene`:\n *\n * ```tsx\n * const scene = useSimulationScene({ client, containerId, simulationId });\n * <ObjectInventoryPanel\n *   objects={scene.objects}\n *   onSelect={(obj) => zenRef.current?.focusOn(obj.id, {\n *     zoom: recommendedFlyDistance(obj.kind),\n *   })}\n * />\n * ```\n *\n * The panel renders the toggle UI only — it has no opinion about WHAT\n * happens on select. The consumer wires `onSelect` to its 3D viewer's\n * imperative handle (or anywhere else — the panel is reusable in any\n * dashboard or debug context).\n */\n\nimport { memo, useCallback, useState } from \"react\";\nimport type { CSSProperties, ReactNode } from \"react\";\nimport { useThemeTokens } from \"../theme/ThemeProvider\";\nimport { useSpatialSelection } from \"../context/SpatialSelectionContext\";\nimport type {\n  SimulationSceneObject,\n  StructureDiag,\n  PositionTickDiag,\n} from \"../hooks/useSimulationScene\";\n\n// ─── Types ────────────────────────────────────────────────────────────────────\n\nexport type ObjectInventoryKind = SimulationSceneObject[\"kind\"];\n\nexport interface ObjectInventoryPanelProps {\n  /** Objects to list. Typically `useSimulationScene().objects`. */\n  objects: SimulationSceneObject[];\n  /** Click handler — fires with the clicked object. Pure forward; the\n   *  panel does not navigate, focus, or fly anywhere itself. */\n  onSelect?: (object: SimulationSceneObject) => void;\n  /** Currently selected object id (highlights the row). Pass `null` for none. */\n  selectedId?: string | null;\n\n  /** Where to anchor the panel on its parent. Default: `top-left`. */\n  position?: \"top-left\" | \"top-right\" | \"bottom-left\" | \"bottom-right\";\n  /** Pixel offsets from the anchor. Defaults to (16, 56) so a top bar fits above. */\n  offset?: { x?: number; y?: number };\n  /** Hide the panel without unmounting (preserves `selectedId` state). */\n  hidden?: boolean;\n  /** Width in pixels. Default 330. */\n  width?: number;\n  /** Maximum height (CSS value). Default `'50vh'`. */\n  maxHeight?: string | number;\n\n  /** Allow the user to collapse / expand the panel. Default true. */\n  collapsible?: boolean;\n  /** Initial collapsed state. Default false. */\n  defaultCollapsed?: boolean;\n\n  /** Optional title override. Default: `\"API Objects · N\"`. */\n  title?: ReactNode;\n\n  /**\n   * Optional structure diagnostic block (raw keys + counts from\n   * getSimulationStructure). Useful in dev / debug builds; omit in\n   * production for a cleaner look.\n   */\n  structureDiag?: StructureDiag | null;\n  /** Optional position-tick diagnostic block. */\n  positionTickDiag?: PositionTickDiag | null;\n\n  /** Custom labels per kind (defaults: \"Spacecraft\", \"Ground Stations\", \"Celestial Bodies\"). */\n  kindLabels?: Partial<Record<ObjectInventoryKind, string>>;\n\n  /** Inline style override on the outer container. */\n  style?: CSSProperties;\n}\n\n// ─── Helpers ──────────────────────────────────────────────────────────────────\n\n/** Stable short-form of a GUID for inline display. */\nfunction shortId(id: string): string {\n  return id.length <= 8 ? id : id.slice(0, 8);\n}\n\nconst DEFAULT_KIND_LABELS: Record<ObjectInventoryKind, string> = {\n  spacecraft: \"Spacecraft\",\n  groundStation: \"Ground Stations\",\n  celestialBody: \"Celestial Bodies\",\n};\n\nconst KIND_ORDER: ObjectInventoryKind[] = [\n  \"spacecraft\",\n  \"groundStation\",\n  \"celestialBody\",\n];\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\nexport const ObjectInventoryPanel = memo(function ObjectInventoryPanel({\n  objects,\n  onSelect,\n  selectedId,\n  position = \"top-left\",\n  offset,\n  hidden = false,\n  width = 330,\n  maxHeight = \"50vh\",\n  collapsible = true,\n  defaultCollapsed = false,\n  title,\n  structureDiag,\n  positionTickDiag,\n  kindLabels,\n  style,\n}: ObjectInventoryPanelProps) {\n  const tokens = useThemeTokens();\n  const [collapsed, setCollapsed] = useState(defaultCollapsed);\n\n  // Optional <SpatialSelectionProvider> integration. When present, the\n  // panel uses the shared selection state so other components (3D\n  // viewer, GroundTrackMap, etc.) stay synchronised. Explicit props\n  // always win — consumers can still override per-instance.\n  const ctx = useSpatialSelection();\n  const effectiveSelectedId =\n    selectedId !== undefined ? selectedId : (ctx?.selectedId ?? null);\n  const effectiveOnSelect = useCallback(\n    (obj: SimulationSceneObject) => {\n      onSelect?.(obj);\n      // Also push into the shared context if no explicit onSelect wins it.\n      if (!onSelect) ctx?.setSelectedId(obj.id);\n    },\n    [onSelect, ctx],\n  );\n\n  const labels = { ...DEFAULT_KIND_LABELS, ...kindLabels };\n  const entries = Array.isArray(objects) ? objects : [];\n\n  // Position anchor — translate the prop into top/left/right/bottom CSS.\n  const offX = offset?.x ?? 16;\n  const offY = offset?.y ?? 56;\n  const anchor: CSSProperties = (() => {\n    switch (position) {\n      case \"top-right\":\n        return { top: offY, right: offX };\n      case \"bottom-left\":\n        return { bottom: offY, left: offX };\n      case \"bottom-right\":\n        return { bottom: offY, right: offX };\n      case \"top-left\":\n      default:\n        return { top: offY, left: offX };\n    }\n  })();\n\n  if (hidden) return null;\n\n  const dim: CSSProperties = { opacity: 0.55, fontSize: \"0.9em\" };\n\n  return (\n    <div\n      data-testid=\"zendir-object-inventory\"\n      style={{\n        position: \"absolute\",\n        zIndex: 2,\n        width,\n        maxHeight,\n        overflow: \"auto\",\n        padding: tokens.spacing.sm,\n        borderRadius: tokens.borderRadius?.md ?? 6,\n        border: \"1px solid rgba(255,255,255,0.12)\",\n        background: \"rgba(0,0,0,0.72)\",\n        color: tokens.colors.text.primary,\n        fontSize: tokens.typography.fontSize.xs,\n        lineHeight: 1.35,\n        ...anchor,\n        ...style,\n      }}\n    >\n      <PanelHeader\n        title={title ?? `API Objects · ${entries.length}`}\n        collapsible={collapsible}\n        collapsed={collapsed}\n        onToggle={() => setCollapsed((c) => !c)}\n      />\n\n      {!collapsed && (\n        <>\n          {KIND_ORDER.map((kind) => {\n            const items = entries.filter((o) => o.kind === kind);\n            return (\n              <ObjectInventoryGroup\n                key={kind}\n                title={`${labels[kind]} (${items.length})`}\n                items={items}\n                selectedId={effectiveSelectedId}\n                onSelect={\n                  onSelect != null\n                    ? onSelect\n                    : ctx\n                      ? effectiveOnSelect\n                      : undefined\n                }\n              />\n            );\n          })}\n\n          {structureDiag !== undefined && (\n            <StructureDiagBlock diag={structureDiag} dim={dim} />\n          )}\n\n          {positionTickDiag !== undefined && (\n            <PositionTickDiagBlock diag={positionTickDiag} dim={dim} />\n          )}\n        </>\n      )}\n    </div>\n  );\n});\n\n// ─── Sub-components ───────────────────────────────────────────────────────────\n\nconst PanelHeader = ({\n  title,\n  collapsible,\n  collapsed,\n  onToggle,\n}: {\n  title: ReactNode;\n  collapsible: boolean;\n  collapsed: boolean;\n  onToggle: () => void;\n}) => {\n  if (!collapsible) {\n    return <div style={{ marginBottom: 6, fontWeight: 600 }}>{title}</div>;\n  }\n  return (\n    <button\n      type=\"button\"\n      onClick={onToggle}\n      aria-expanded={!collapsed}\n      style={{\n        display: \"flex\",\n        width: \"100%\",\n        alignItems: \"center\",\n        justifyContent: \"space-between\",\n        marginBottom: 6,\n        padding: 0,\n        background: \"none\",\n        border: \"none\",\n        color: \"inherit\",\n        font: \"inherit\",\n        fontWeight: 600,\n        cursor: \"pointer\",\n        textAlign: \"left\",\n      }}\n    >\n      <span>{title}</span>\n      <span aria-hidden style={{ opacity: 0.7, fontSize: \"0.85em\" }}>\n        {collapsed ? \"▸\" : \"▾\"}\n      </span>\n    </button>\n  );\n};\n\nconst ObjectInventoryGroup = ({\n  title,\n  items,\n  selectedId,\n  onSelect,\n}: {\n  title: string;\n  items: SimulationSceneObject[];\n  selectedId: string | null;\n  onSelect?: (obj: SimulationSceneObject) => void;\n}) => (\n  <div style={{ marginBottom: 6 }}>\n    <div style={{ opacity: 0.85 }}>{title}</div>\n    {items.length === 0 ? (\n      <div style={{ opacity: 0.6 }}>—</div>\n    ) : (\n      items.map((item) => (\n        <ObjectRow\n          key={item.id}\n          object={item}\n          selected={item.id === selectedId}\n          onSelect={onSelect}\n        />\n      ))\n    )}\n  </div>\n);\n\nconst ObjectRow = ({\n  object,\n  selected,\n  onSelect,\n}: {\n  object: SimulationSceneObject;\n  selected: boolean;\n  onSelect?: (obj: SimulationSceneObject) => void;\n}) => {\n  const handleClick = useCallback(() => onSelect?.(object), [onSelect, object]);\n  const interactive = onSelect != null;\n  return (\n    <div\n      role={interactive ? \"button\" : undefined}\n      tabIndex={interactive ? 0 : undefined}\n      onClick={interactive ? handleClick : undefined}\n      onKeyDown={\n        interactive\n          ? (e) => {\n              if (e.key === \"Enter\" || e.key === \" \") {\n                e.preventDefault();\n                handleClick();\n              }\n            }\n          : undefined\n      }\n      style={{\n        opacity: 0.95,\n        padding: \"1px 4px\",\n        borderRadius: 3,\n        cursor: interactive ? \"pointer\" : \"default\",\n        background: selected ? \"rgba(255,255,255,0.12)\" : \"transparent\",\n      }}\n    >\n      {object.name} <span style={{ opacity: 0.6 }}>({shortId(object.id)})</span>\n    </div>\n  );\n};\n\nconst StructureDiagBlock = ({\n  diag,\n  dim,\n}: {\n  diag: StructureDiag | null | undefined;\n  dim: CSSProperties;\n}) => (\n  <div\n    style={{\n      marginTop: 8,\n      borderTop: \"1px solid rgba(255,255,255,0.1)\",\n      paddingTop: 6,\n    }}\n  >\n    {diag ? (\n      <>\n        <div style={{ ...dim, marginBottom: 2 }}>Raw structure keys:</div>\n        <div style={dim}>{diag.topLevelKeys.join(\", \") || \"—\"}</div>\n        <div style={{ ...dim, marginTop: 2 }}>\n          Objects[]: {diag.rawObjectCount < 0 ? \"absent\" : diag.rawObjectCount}\n          {\" · \"}\n          Systems[]: {diag.rawSystemCount < 0 ? \"absent\" : diag.rawSystemCount}\n        </div>\n      </>\n    ) : (\n      <div style={{ ...dim, marginTop: 4 }}>Waiting for structure…</div>\n    )}\n  </div>\n);\n\nconst PositionTickDiagBlock = ({\n  diag,\n  dim,\n}: {\n  diag: PositionTickDiag | null | undefined;\n  dim: CSSProperties;\n}) => {\n  if (!diag) return null;\n  return (\n    <div\n      style={{\n        marginTop: 8,\n        borderTop: \"1px solid rgba(255,255,255,0.1)\",\n        paddingTop: 6,\n      }}\n    >\n      <div style={{ ...dim, marginBottom: 2 }}>Last position tick:</div>\n      <div style={dim}>\n        ok {diag.parsedOk}/{diag.requested}\n        {diag.parseFailed > 0 && ` · parseFail ${diag.parseFailed}`}\n        {diag.requestFailed > 0 && ` · reqFail ${diag.requestFailed}`}\n      </div>\n      <div style={dim}>\n        asked for:{\" \"}\n        {diag.requestedProps\n          ? diag.requestedProps.join(\", \")\n          : \"getAllProperties (fallback)\"}\n      </div>\n      {diag.firstResponseKeys.length > 0 && (\n        <div style={{ ...dim, wordBreak: \"break-all\" }}>\n          got keys: {diag.firstResponseKeys.slice(0, 12).join(\", \")}\n          {diag.firstResponseKeys.length > 12 && \" …\"}\n        </div>\n      )}\n      {diag.firstResponseSample && (\n        <div style={{ ...dim, wordBreak: \"break-all\" }}>\n          {diag.firstResponseSample}\n        </div>\n      )}\n    </div>\n  );\n};\n\n// ─── Companion helper ─────────────────────────────────────────────────────────\n\n/**\n * Sensible default fly-to distance per object kind, for use with\n * `<ZenSpace3D />`'s imperative `focusOn(id, { zoom })` handle.\n *\n *   spacecraft:      2 000 000 m  (≈ 2 000 km — close orbital view)\n *   groundStation:   1 500 000 m  (≈ 1 500 km — high-altitude angled view)\n *   celestialBody:  50 000 000 m  (≈ 50 000 km — full-planet view)\n *\n * Override per call if the consumer wants tighter/looser framing.\n */\nexport function recommendedFlyDistance(kind: ObjectInventoryKind): number {\n  switch (kind) {\n    case \"spacecraft\":\n      return 2_000_000;\n    case \"groundStation\":\n      return 1_500_000;\n    case \"celestialBody\":\n      return 50_000_000;\n  }\n}\n\nexport default ObjectInventoryPanel;\n"],"mappings":"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"}

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

@@ -9,7 +9,7 @@
  * handle and props. Same separation of concerns as `<GroundTrackMap />`'s
  * `MapLayerDef` pattern — UI here, rendering there.
  */
-export { ObjectInventoryPanel, recommendedFlyDistance } from './ObjectInventoryPanel';
+export { ObjectInventoryPanel, recommendedFlyDistance, } from './ObjectInventoryPanel';
 export type { ObjectInventoryPanelProps, ObjectInventoryKind, } from './ObjectInventoryPanel';
 export { LayerControlPanel } from './LayerControlPanel';
 export type { LayerControlPanelProps, RenderLayers, GroupVisibility, GroupCounts, } from './LayerControlPanel';

package/dist/react/panels/index.js

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

package/dist/react/shared/ErrorBoundary.d.ts

@@ -1,5 +1,4 @@
 import { default as React, Component, ErrorInfo, ReactNode } from 'react';
-
 export interface ErrorBoundaryProps {
     /** Custom fallback UI or render function */
     fallback?: ReactNode | ((error: Error, retry: () => void) => ReactNode);
@@ -59,5 +58,5 @@ export declare class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBo
  * });
  * ```
  */
-export declare function withErrorBoundary<P extends object>(Component: React.ComponentType<P>, options?: Omit<ErrorBoundaryProps, 'children'>): React.FC<P>;
+export declare function withErrorBoundary<P extends object>(Component: React.ComponentType<P>, options?: Omit<ErrorBoundaryProps, "children">): React.FC<P>;
 export {};

package/dist/react/shared/ErrorBoundary.js

@@ -1,142 +1,173 @@
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Component } from "react";
 import { getStatusColor } from "../utils/index.js";
-class ErrorBoundary extends Component {
-  constructor(props) {
-    super(props);
-    __publicField(this, "handleRetry", () => {
-      this.setState({ hasError: false, error: null });
-    });
-    this.state = { hasError: false, error: null };
-  }
-  static getDerivedStateFromError(error) {
-    return { hasError: true, error };
-  }
-  componentDidCatch(error, errorInfo) {
-    var _a, _b;
-    (_b = (_a = this.props).onError) == null ? void 0 : _b.call(_a, error, errorInfo);
-    if (process.env.NODE_ENV === "development") {
-      console.error("ErrorBoundary caught an error:", error, errorInfo);
-    }
-  }
-  render() {
-    if (this.state.hasError) {
-      const { fallback, componentName } = this.props;
-      const { error } = this.state;
-      if (typeof fallback === "function" && error) {
-        return fallback(error, this.handleRetry);
-      }
-      if (fallback && typeof fallback !== "function") {
-        return fallback;
-      }
-      return /* @__PURE__ */ jsx(
-        DefaultErrorFallback,
-        {
-          error,
-          componentName,
-          onRetry: this.handleRetry
-        }
-      );
-    }
-    return this.props.children;
-  }
-}
-function DefaultErrorFallback({
-  error,
-  componentName,
-  onRetry
-}) {
-  const criticalColor = getStatusColor("critical");
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      role: "alert",
-      style: {
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        justifyContent: "center",
-        padding: 24,
-        minHeight: 120,
-        backgroundColor: "var(--color-background-surface, #1b2d3e)",
-        borderRadius: 8,
-        border: `1px solid ${criticalColor}40`,
-        textAlign: "center"
-      },
-      children: [
-        /* @__PURE__ */ jsx(
-          "svg",
-          {
-            viewBox: "0 0 24 24",
-            fill: criticalColor,
-            width: "32",
-            height: "32",
-            style: { marginBottom: 12, opacity: 0.8 },
-            children: /* @__PURE__ */ jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" })
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "h3",
-          {
-            style: {
-              margin: 0,
-              marginBottom: 8,
-              fontSize: "0.875rem",
-              // 14px in rem
-              fontWeight: 500,
-              // AstroUXDS medium
-              color: "var(--color-text-primary, #ffffff)"
-            },
-            children: componentName ? `${componentName} Error` : "Something went wrong"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "p",
-          {
-            style: {
-              margin: 0,
-              marginBottom: 16,
-              fontSize: 12,
-              color: "var(--color-text-secondary, #a4abb6)",
-              maxWidth: 280
-            },
-            children: (error == null ? void 0 : error.message) ?? "An unexpected error occurred"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            onClick: onRetry,
-            style: {
-              padding: "8px 16px",
-              fontSize: 12,
-              fontWeight: 500,
-              color: "#ffffff",
-              backgroundColor: "var(--color-interactive-default, #4dacff)",
-              border: "none",
-              borderRadius: 4,
-              cursor: "pointer",
-              transition: "background-color 150ms ease"
-            },
-            onMouseEnter: (e) => e.currentTarget.style.backgroundColor = "var(--color-interactive-hover, #92cbff)",
-            onMouseLeave: (e) => e.currentTarget.style.backgroundColor = "var(--color-interactive-default, #4dacff)",
-            children: "Try Again"
-          }
-        )
-      ]
-    }
-  );
+import { Component } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/react/shared/ErrorBoundary.tsx
+/**
+* @zendir/ui - ErrorBoundary Component
+*
+* React error boundary that catches JavaScript errors in child components.
+* Prevents white screen of death and displays graceful fallback UI.
+*
+* Features:
+* - Customizable fallback UI
+* - Error callback for logging/reporting
+* - Retry functionality
+* - Accessible error display
+*/
+/**
+* ErrorBoundary - Catches and handles component errors gracefully
+*
+* @example
+* ```tsx
+* <ErrorBoundary
+*   fallback={<ErrorCard message="Failed to load" />}
+*   onError={(error) => logError(error)}
+* >
+*   <SpacecraftCard {...props} />
+* </ErrorBoundary>
+* ```
+*
+* @example
+* ```tsx
+* <ErrorBoundary
+*   fallback={(error, retry) => (
+*     <div>
+*       <p>Error: {error.message}</p>
+*       <button onClick={retry}>Retry</button>
+*     </div>
+*   )}
+* >
+*   <TelemetryCard {...props} />
+* </ErrorBoundary>
+* ```
+*/
+var ErrorBoundary = class extends Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			hasError: false,
+			error: null
+		};
+	}
+	static getDerivedStateFromError(error) {
+		return {
+			hasError: true,
+			error
+		};
+	}
+	componentDidCatch(error, errorInfo) {
+		this.props.onError?.(error, errorInfo);
+		if (process.env.NODE_ENV === "development") console.error("ErrorBoundary caught an error:", error, errorInfo);
+	}
+	handleRetry = () => {
+		this.setState({
+			hasError: false,
+			error: null
+		});
+	};
+	render() {
+		if (this.state.hasError) {
+			const { fallback, componentName } = this.props;
+			const { error } = this.state;
+			if (typeof fallback === "function" && error) return fallback(error, this.handleRetry);
+			if (fallback && typeof fallback !== "function") return fallback;
+			return /* @__PURE__ */ jsx(DefaultErrorFallback, {
+				error,
+				componentName,
+				onRetry: this.handleRetry
+			});
+		}
+		return this.props.children;
+	}
+};
+function DefaultErrorFallback({ error, componentName, onRetry }) {
+	const criticalColor = getStatusColor("critical");
+	return /* @__PURE__ */ jsxs("div", {
+		role: "alert",
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			alignItems: "center",
+			justifyContent: "center",
+			padding: 24,
+			minHeight: 120,
+			backgroundColor: "var(--zendir-bg-surface, #1b2d3e)",
+			borderRadius: 8,
+			border: `1px solid ${criticalColor}40`,
+			textAlign: "center"
+		},
+		children: [
+			/* @__PURE__ */ jsx("svg", {
+				viewBox: "0 0 24 24",
+				fill: criticalColor,
+				width: "32",
+				height: "32",
+				style: {
+					marginBottom: 12,
+					opacity: .8
+				},
+				children: /* @__PURE__ */ jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" })
+			}),
+			/* @__PURE__ */ jsx("h3", {
+				style: {
+					margin: 0,
+					marginBottom: 8,
+					fontSize: "0.875rem",
+					fontWeight: 500,
+					color: "var(--zendir-text-primary, #ffffff)"
+				},
+				children: componentName ? `${componentName} Error` : "Something went wrong"
+			}),
+			/* @__PURE__ */ jsx("p", {
+				style: {
+					margin: 0,
+					marginBottom: 16,
+					fontSize: 12,
+					color: "var(--zendir-text-secondary, #a4abb6)",
+					maxWidth: 280
+				},
+				children: error?.message ?? "An unexpected error occurred"
+			}),
+			/* @__PURE__ */ jsx("button", {
+				onClick: onRetry,
+				style: {
+					padding: "8px 16px",
+					fontSize: 12,
+					fontWeight: 500,
+					color: "#ffffff",
+					backgroundColor: "var(--zendir-accent-primary, #4dacff)",
+					border: "none",
+					borderRadius: 4,
+					cursor: "pointer",
+					transition: "background-color 150ms ease"
+				},
+				onMouseEnter: (e) => e.currentTarget.style.backgroundColor = "var(--zendir-accent-secondary, #92cbff)",
+				onMouseLeave: (e) => e.currentTarget.style.backgroundColor = "var(--zendir-accent-primary, #4dacff)",
+				children: "Try Again"
+			})
+		]
+	});
 }
-function withErrorBoundary(Component2, options = {}) {
-  const WrappedComponent = (props) => /* @__PURE__ */ jsx(ErrorBoundary, { ...options, children: /* @__PURE__ */ jsx(Component2, { ...props }) });
-  WrappedComponent.displayName = `WithErrorBoundary(${Component2.displayName ?? Component2.name ?? "Component"})`;
-  return WrappedComponent;
+/**
+* Wraps a component with an ErrorBoundary
+*
+* @example
+* ```tsx
+* const SafeSpacecraftCard = withErrorBoundary(SpacecraftCard, {
+*   componentName: 'SpacecraftCard',
+*   onError: (error) => logError(error),
+* });
+* ```
+*/
+function withErrorBoundary(Component, options = {}) {
+	const WrappedComponent = (props) => /* @__PURE__ */ jsx(ErrorBoundary, {
+		...options,
+		children: /* @__PURE__ */ jsx(Component, { ...props })
+	});
+	WrappedComponent.displayName = `WithErrorBoundary(${Component.displayName ?? Component.name ?? "Component"})`;
+	return WrappedComponent;
 }
-export {
-  ErrorBoundary,
-  withErrorBoundary
-};
-//# sourceMappingURL=ErrorBoundary.js.map
+//#endregion
+export { ErrorBoundary, withErrorBoundary };
+
+//# sourceMappingURL=ErrorBoundary.js.map

package/dist/react/shared/ErrorBoundary.js.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorBoundary.js","sources":["../../../src/react/shared/ErrorBoundary.tsx"],"sourcesContent":["/**\n * @zendir/ui - ErrorBoundary Component\n * \n * React error boundary that catches JavaScript errors in child components.\n * Prevents white screen of death and displays graceful fallback UI.\n * \n * Features:\n * - Customizable fallback UI\n * - Error callback for logging/reporting\n * - Retry functionality\n * - Accessible error display\n */\n\nimport React, { Component, ErrorInfo, ReactNode } from 'react';\nimport { getStatusColor } from '../utils';\n\nexport interface ErrorBoundaryProps {\n  /** Custom fallback UI or render function */\n  fallback?: ReactNode | ((error: Error, retry: () => void) => ReactNode);\n  /** Callback when error is caught */\n  onError?: (error: Error, errorInfo: ErrorInfo) => void;\n  /** Children to render */\n  children: ReactNode;\n  /** Component name for error context */\n  componentName?: string;\n}\n\ninterface ErrorBoundaryState {\n  hasError: boolean;\n  error: Error | null;\n}\n\n/**\n * ErrorBoundary - Catches and handles component errors gracefully\n * \n * @example\n * ```tsx\n * <ErrorBoundary \n *   fallback={<ErrorCard message=\"Failed to load\" />}\n *   onError={(error) => logError(error)}\n * >\n *   <SpacecraftCard {...props} />\n * </ErrorBoundary>\n * ```\n * \n * @example\n * ```tsx\n * <ErrorBoundary \n *   fallback={(error, retry) => (\n *     <div>\n *       <p>Error: {error.message}</p>\n *       <button onClick={retry}>Retry</button>\n *     </div>\n *   )}\n * >\n *   <TelemetryCard {...props} />\n * </ErrorBoundary>\n * ```\n */\nexport class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {\n  constructor(props: ErrorBoundaryProps) {\n    super(props);\n    this.state = { hasError: false, error: null };\n  }\n\n  static getDerivedStateFromError(error: Error): ErrorBoundaryState {\n    return { hasError: true, error };\n  }\n\n  componentDidCatch(error: Error, errorInfo: ErrorInfo): void {\n    this.props.onError?.(error, errorInfo);\n    \n    // Log to console in development\n    if (process.env.NODE_ENV === 'development') {\n      console.error('ErrorBoundary caught an error:', error, errorInfo);\n    }\n  }\n\n  handleRetry = (): void => {\n    this.setState({ hasError: false, error: null });\n  };\n\n  render(): ReactNode {\n    if (this.state.hasError) {\n      const { fallback, componentName } = this.props;\n      const { error } = this.state;\n\n      // Custom fallback render function\n      if (typeof fallback === 'function' && error) {\n        return fallback(error, this.handleRetry);\n      }\n\n      // Custom fallback element (exclude function - already handled above)\n      if (fallback && typeof fallback !== 'function') {\n        return fallback;\n      }\n\n      // Default fallback UI\n      return (\n        <DefaultErrorFallback\n          error={error}\n          componentName={componentName}\n          onRetry={this.handleRetry}\n        />\n      );\n    }\n\n    return this.props.children;\n  }\n}\n\n// ============================================================================\n// Default Error Fallback\n// ============================================================================\n\ninterface DefaultErrorFallbackProps {\n  error: Error | null;\n  componentName?: string;\n  onRetry: () => void;\n}\n\nfunction DefaultErrorFallback({\n  error,\n  componentName,\n  onRetry,\n}: DefaultErrorFallbackProps): React.ReactElement {\n  const criticalColor = getStatusColor('critical');\n\n  return (\n    <div\n      role=\"alert\"\n      style={{\n        display: 'flex',\n        flexDirection: 'column',\n        alignItems: 'center',\n        justifyContent: 'center',\n        padding: 24,\n        minHeight: 120,\n        backgroundColor: 'var(--color-background-surface, #1b2d3e)',\n        borderRadius: 8,\n        border: `1px solid ${criticalColor}40`,\n        textAlign: 'center',\n      }}\n    >\n      {/* Error icon */}\n      <svg\n        viewBox=\"0 0 24 24\"\n        fill={criticalColor}\n        width=\"32\"\n        height=\"32\"\n        style={{ marginBottom: 12, opacity: 0.8 }}\n      >\n        <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z\" />\n      </svg>\n\n      {/* Error message */}\n      <h3\n        style={{\n          margin: 0,\n          marginBottom: 8,\n          fontSize: '0.875rem', // 14px in rem\n          fontWeight: 500, // AstroUXDS medium\n          color: 'var(--color-text-primary, #ffffff)',\n        }}\n      >\n        {componentName ? `${componentName} Error` : 'Something went wrong'}\n      </h3>\n\n      <p\n        style={{\n          margin: 0,\n          marginBottom: 16,\n          fontSize: 12,\n          color: 'var(--color-text-secondary, #a4abb6)',\n          maxWidth: 280,\n        }}\n      >\n        {error?.message ?? 'An unexpected error occurred'}\n      </p>\n\n      {/* Retry button */}\n      <button\n        onClick={onRetry}\n        style={{\n          padding: '8px 16px',\n          fontSize: 12,\n          fontWeight: 500,\n          color: '#ffffff',\n          backgroundColor: 'var(--color-interactive-default, #4dacff)',\n          border: 'none',\n          borderRadius: 4,\n          cursor: 'pointer',\n          transition: 'background-color 150ms ease',\n        }}\n        onMouseEnter={(e) =>\n          (e.currentTarget.style.backgroundColor = 'var(--color-interactive-hover, #92cbff)')\n        }\n        onMouseLeave={(e) =>\n          (e.currentTarget.style.backgroundColor = 'var(--color-interactive-default, #4dacff)')\n        }\n      >\n        Try Again\n      </button>\n    </div>\n  );\n}\n\n// ============================================================================\n// Higher-Order Component for Error Boundaries\n// ============================================================================\n\n/**\n * Wraps a component with an ErrorBoundary\n * \n * @example\n * ```tsx\n * const SafeSpacecraftCard = withErrorBoundary(SpacecraftCard, {\n *   componentName: 'SpacecraftCard',\n *   onError: (error) => logError(error),\n * });\n * ```\n */\nexport function withErrorBoundary<P extends object>(\n  Component: React.ComponentType<P>,\n  options: Omit<ErrorBoundaryProps, 'children'> = {}\n): React.FC<P> {\n  const WrappedComponent: React.FC<P> = (props) => (\n    <ErrorBoundary {...options}>\n      <Component {...props} />\n    </ErrorBoundary>\n  );\n\n  WrappedComponent.displayName = `WithErrorBoundary(${Component.displayName ?? Component.name ?? 'Component'})`;\n\n  return WrappedComponent;\n}\n"],"names":["Component"],"mappings":"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"}
+{"version":3,"file":"ErrorBoundary.js","names":[],"sources":["../../../src/react/shared/ErrorBoundary.tsx"],"sourcesContent":["/**\n * @zendir/ui - ErrorBoundary Component\n *\n * React error boundary that catches JavaScript errors in child components.\n * Prevents white screen of death and displays graceful fallback UI.\n *\n * Features:\n * - Customizable fallback UI\n * - Error callback for logging/reporting\n * - Retry functionality\n * - Accessible error display\n */\n\nimport React, { Component, ErrorInfo, ReactNode } from \"react\";\nimport { getStatusColor } from \"../utils\";\n\nexport interface ErrorBoundaryProps {\n  /** Custom fallback UI or render function */\n  fallback?: ReactNode | ((error: Error, retry: () => void) => ReactNode);\n  /** Callback when error is caught */\n  onError?: (error: Error, errorInfo: ErrorInfo) => void;\n  /** Children to render */\n  children: ReactNode;\n  /** Component name for error context */\n  componentName?: string;\n}\n\ninterface ErrorBoundaryState {\n  hasError: boolean;\n  error: Error | null;\n}\n\n/**\n * ErrorBoundary - Catches and handles component errors gracefully\n *\n * @example\n * ```tsx\n * <ErrorBoundary\n *   fallback={<ErrorCard message=\"Failed to load\" />}\n *   onError={(error) => logError(error)}\n * >\n *   <SpacecraftCard {...props} />\n * </ErrorBoundary>\n * ```\n *\n * @example\n * ```tsx\n * <ErrorBoundary\n *   fallback={(error, retry) => (\n *     <div>\n *       <p>Error: {error.message}</p>\n *       <button onClick={retry}>Retry</button>\n *     </div>\n *   )}\n * >\n *   <TelemetryCard {...props} />\n * </ErrorBoundary>\n * ```\n */\nexport class ErrorBoundary extends Component<\n  ErrorBoundaryProps,\n  ErrorBoundaryState\n> {\n  constructor(props: ErrorBoundaryProps) {\n    super(props);\n    this.state = { hasError: false, error: null };\n  }\n\n  static getDerivedStateFromError(error: Error): ErrorBoundaryState {\n    return { hasError: true, error };\n  }\n\n  componentDidCatch(error: Error, errorInfo: ErrorInfo): void {\n    this.props.onError?.(error, errorInfo);\n\n    // Log to console in development\n    if (process.env.NODE_ENV === \"development\") {\n      console.error(\"ErrorBoundary caught an error:\", error, errorInfo);\n    }\n  }\n\n  handleRetry = (): void => {\n    this.setState({ hasError: false, error: null });\n  };\n\n  render(): ReactNode {\n    if (this.state.hasError) {\n      const { fallback, componentName } = this.props;\n      const { error } = this.state;\n\n      // Custom fallback render function\n      if (typeof fallback === \"function\" && error) {\n        return fallback(error, this.handleRetry);\n      }\n\n      // Custom fallback element (exclude function - already handled above)\n      if (fallback && typeof fallback !== \"function\") {\n        return fallback;\n      }\n\n      // Default fallback UI\n      return (\n        <DefaultErrorFallback\n          error={error}\n          componentName={componentName}\n          onRetry={this.handleRetry}\n        />\n      );\n    }\n\n    return this.props.children;\n  }\n}\n\n// ============================================================================\n// Default Error Fallback\n// ============================================================================\n\ninterface DefaultErrorFallbackProps {\n  error: Error | null;\n  componentName?: string;\n  onRetry: () => void;\n}\n\nfunction DefaultErrorFallback({\n  error,\n  componentName,\n  onRetry,\n}: DefaultErrorFallbackProps): React.ReactElement {\n  const criticalColor = getStatusColor(\"critical\");\n\n  return (\n    <div\n      role=\"alert\"\n      style={{\n        display: \"flex\",\n        flexDirection: \"column\",\n        alignItems: \"center\",\n        justifyContent: \"center\",\n        padding: 24,\n        minHeight: 120,\n        backgroundColor: \"var(--zendir-bg-surface, #1b2d3e)\",\n        borderRadius: 8,\n        border: `1px solid ${criticalColor}40`,\n        textAlign: \"center\",\n      }}\n    >\n      {/* Error icon */}\n      <svg\n        viewBox=\"0 0 24 24\"\n        fill={criticalColor}\n        width=\"32\"\n        height=\"32\"\n        style={{ marginBottom: 12, opacity: 0.8 }}\n      >\n        <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z\" />\n      </svg>\n\n      {/* Error message */}\n      <h3\n        style={{\n          margin: 0,\n          marginBottom: 8,\n          fontSize: \"0.875rem\", // 14px in rem\n          fontWeight: 500, // AstroUXDS medium\n          color: \"var(--zendir-text-primary, #ffffff)\",\n        }}\n      >\n        {componentName ? `${componentName} Error` : \"Something went wrong\"}\n      </h3>\n\n      <p\n        style={{\n          margin: 0,\n          marginBottom: 16,\n          fontSize: 12,\n          color: \"var(--zendir-text-secondary, #a4abb6)\",\n          maxWidth: 280,\n        }}\n      >\n        {error?.message ?? \"An unexpected error occurred\"}\n      </p>\n\n      {/* Retry button */}\n      <button\n        onClick={onRetry}\n        style={{\n          padding: \"8px 16px\",\n          fontSize: 12,\n          fontWeight: 500,\n          color: \"#ffffff\",\n          backgroundColor: \"var(--zendir-accent-primary, #4dacff)\",\n          border: \"none\",\n          borderRadius: 4,\n          cursor: \"pointer\",\n          transition: \"background-color 150ms ease\",\n        }}\n        onMouseEnter={(e) =>\n          (e.currentTarget.style.backgroundColor =\n            \"var(--zendir-accent-secondary, #92cbff)\")\n        }\n        onMouseLeave={(e) =>\n          (e.currentTarget.style.backgroundColor =\n            \"var(--zendir-accent-primary, #4dacff)\")\n        }\n      >\n        Try Again\n      </button>\n    </div>\n  );\n}\n\n// ============================================================================\n// Higher-Order Component for Error Boundaries\n// ============================================================================\n\n/**\n * Wraps a component with an ErrorBoundary\n *\n * @example\n * ```tsx\n * const SafeSpacecraftCard = withErrorBoundary(SpacecraftCard, {\n *   componentName: 'SpacecraftCard',\n *   onError: (error) => logError(error),\n * });\n * ```\n */\nexport function withErrorBoundary<P extends object>(\n  Component: React.ComponentType<P>,\n  options: Omit<ErrorBoundaryProps, \"children\"> = {},\n): React.FC<P> {\n  const WrappedComponent: React.FC<P> = (props) => (\n    <ErrorBoundary {...options}>\n      <Component {...props} />\n    </ErrorBoundary>\n  );\n\n  WrappedComponent.displayName = `WithErrorBoundary(${Component.displayName ?? Component.name ?? \"Component\"})`;\n\n  return WrappedComponent;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2DA,IAAa,gBAAb,cAAmC,UAGjC;CACA,YAAY,OAA2B;EACrC,MAAM,KAAK;EACX,KAAK,QAAQ;GAAE,UAAU;GAAO,OAAO;EAAK;CAC9C;CAEA,OAAO,yBAAyB,OAAkC;EAChE,OAAO;GAAE,UAAU;GAAM;EAAM;CACjC;CAEA,kBAAkB,OAAc,WAA4B;EAC1D,KAAK,MAAM,UAAU,OAAO,SAAS;EAGrC,IAAA,QAAA,IAAA,aAA6B,eAC3B,QAAQ,MAAM,kCAAkC,OAAO,SAAS;CAEpE;CAEA,oBAA0B;EACxB,KAAK,SAAS;GAAE,UAAU;GAAO,OAAO;EAAK,CAAC;CAChD;CAEA,SAAoB;EAClB,IAAI,KAAK,MAAM,UAAU;GACvB,MAAM,EAAE,UAAU,kBAAkB,KAAK;GACzC,MAAM,EAAE,UAAU,KAAK;GAGvB,IAAI,OAAO,aAAa,cAAc,OACpC,OAAO,SAAS,OAAO,KAAK,WAAW;GAIzC,IAAI,YAAY,OAAO,aAAa,YAClC,OAAO;GAIT,OACE,oBAAC,sBAAD;IACS;IACQ;IACf,SAAS,KAAK;GACf,CAAA;EAEL;EAEA,OAAO,KAAK,MAAM;CACpB;AACF;AAYA,SAAS,qBAAqB,EAC5B,OACA,eACA,WACgD;CAChD,MAAM,gBAAgB,eAAe,UAAU;CAE/C,OACE,qBAAC,OAAD;EACE,MAAK;EACL,OAAO;GACL,SAAS;GACT,eAAe;GACf,YAAY;GACZ,gBAAgB;GAChB,SAAS;GACT,WAAW;GACX,iBAAiB;GACjB,cAAc;GACd,QAAQ,aAAa,cAAc;GACnC,WAAW;EACb;YAbF;GAgBE,oBAAC,OAAD;IACE,SAAQ;IACR,MAAM;IACN,OAAM;IACN,QAAO;IACP,OAAO;KAAE,cAAc;KAAI,SAAS;IAAI;cAExC,oBAAC,QAAD,EAAM,GAAE,mGAAoG,CAAA;GACzG,CAAA;GAGL,oBAAC,MAAD;IACE,OAAO;KACL,QAAQ;KACR,cAAc;KACd,UAAU;KACV,YAAY;KACZ,OAAO;IACT;cAEC,gBAAgB,GAAG,cAAc,UAAU;GAC1C,CAAA;GAEJ,oBAAC,KAAD;IACE,OAAO;KACL,QAAQ;KACR,cAAc;KACd,UAAU;KACV,OAAO;KACP,UAAU;IACZ;cAEC,OAAO,WAAW;GAClB,CAAA;GAGH,oBAAC,UAAD;IACE,SAAS;IACT,OAAO;KACL,SAAS;KACT,UAAU;KACV,YAAY;KACZ,OAAO;KACP,iBAAiB;KACjB,QAAQ;KACR,cAAc;KACd,QAAQ;KACR,YAAY;IACd;IACA,eAAe,MACZ,EAAE,cAAc,MAAM,kBACrB;IAEJ,eAAe,MACZ,EAAE,cAAc,MAAM,kBACrB;cAEL;GAEO,CAAA;EACL;;AAET;;;;;;;;;;;;AAiBA,SAAgB,kBACd,WACA,UAAgD,CAAC,GACpC;CACb,MAAM,oBAAiC,UACrC,oBAAC,eAAD;EAAe,GAAI;YACjB,oBAAC,WAAD,EAAW,GAAI,MAAQ,CAAA;CACV,CAAA;CAGjB,iBAAiB,cAAc,qBAAqB,UAAU,eAAe,UAAU,QAAQ,YAAY;CAE3G,OAAO;AACT"}

package/dist/react/shared/Skeleton.d.ts

@@ -1,5 +1,4 @@
 import { default as React } from 'react';
-
 export interface SkeletonTextProps {
     /** Number of lines to render */
     lines?: number;
@@ -80,7 +79,7 @@ export interface SkeletonChartProps {
     /** Chart height */
     height?: number;
     /** Chart type visualization */
-    type?: 'line' | 'bar' | 'area';
+    type?: "line" | "bar" | "area";
     /** Custom className */
     className?: string;
 }