@zendir/ui 0.2.20 → 0.3.0

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

@@ -0,0 +1,57 @@
+import { CSSProperties, ReactNode } from 'react';
+import { SimulationSceneObject, StructureDiag, PositionTickDiag } from '../hooks/useSimulationScene';
+
+export type ObjectInventoryKind = SimulationSceneObject['kind'];
+export interface ObjectInventoryPanelProps {
+    /** Objects to list. Typically `useSimulationScene().objects`. */
+    objects: SimulationSceneObject[];
+    /** Click handler — fires with the clicked object. Pure forward; the
+     *  panel does not navigate, focus, or fly anywhere itself. */
+    onSelect?: (object: SimulationSceneObject) => void;
+    /** Currently selected object id (highlights the row). Pass `null` for none. */
+    selectedId?: string | null;
+    /** Where to anchor the panel on its parent. Default: `top-left`. */
+    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    /** Pixel offsets from the anchor. Defaults to (16, 56) so a top bar fits above. */
+    offset?: {
+        x?: number;
+        y?: number;
+    };
+    /** Hide the panel without unmounting (preserves `selectedId` state). */
+    hidden?: boolean;
+    /** Width in pixels. Default 330. */
+    width?: number;
+    /** Maximum height (CSS value). Default `'50vh'`. */
+    maxHeight?: string | number;
+    /** Allow the user to collapse / expand the panel. Default true. */
+    collapsible?: boolean;
+    /** Initial collapsed state. Default false. */
+    defaultCollapsed?: boolean;
+    /** Optional title override. Default: `"API Objects · N"`. */
+    title?: ReactNode;
+    /**
+     * Optional structure diagnostic block (raw keys + counts from
+     * getSimulationStructure). Useful in dev / debug builds; omit in
+     * production for a cleaner look.
+     */
+    structureDiag?: StructureDiag | null;
+    /** Optional position-tick diagnostic block. */
+    positionTickDiag?: PositionTickDiag | null;
+    /** Custom labels per kind (defaults: "Spacecraft", "Ground Stations", "Celestial Bodies"). */
+    kindLabels?: Partial<Record<ObjectInventoryKind, string>>;
+    /** Inline style override on the outer container. */
+    style?: CSSProperties;
+}
+export declare const ObjectInventoryPanel: import('react').NamedExoticComponent<ObjectInventoryPanelProps>;
+/**
+ * Sensible default fly-to distance per object kind, for use with
+ * `<ZenSpace3D />`'s imperative `focusOn(id, { zoom })` handle.
+ *
+ *   spacecraft:      2 000 000 m  (≈ 2 000 km — close orbital view)
+ *   groundStation:   1 500 000 m  (≈ 1 500 km — high-altitude angled view)
+ *   celestialBody:  50 000 000 m  (≈ 50 000 km — full-planet view)
+ *
+ * Override per call if the consumer wants tighter/looser framing.
+ */
+export declare function recommendedFlyDistance(kind: ObjectInventoryKind): number;
+export default ObjectInventoryPanel;

package/dist/react/panels/ObjectInventoryPanel.js

@@ -0,0 +1,261 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { memo, useState, useCallback } from "react";
+import { useThemeTokens } from "../theme/ThemeProvider.js";
+import { useSpatialSelection } from "../context/SpatialSelectionContext.js";
+function shortId(id) {
+  return id.length <= 8 ? id : id.slice(0, 8);
+}
+const DEFAULT_KIND_LABELS = {
+  spacecraft: "Spacecraft",
+  groundStation: "Ground Stations",
+  celestialBody: "Celestial Bodies"
+};
+const KIND_ORDER = ["spacecraft", "groundStation", "celestialBody"];
+const ObjectInventoryPanel = memo(function ObjectInventoryPanel2({
+  objects,
+  onSelect,
+  selectedId,
+  position = "top-left",
+  offset,
+  hidden = false,
+  width = 330,
+  maxHeight = "50vh",
+  collapsible = true,
+  defaultCollapsed = false,
+  title,
+  structureDiag,
+  positionTickDiag,
+  kindLabels,
+  style
+}) {
+  var _a;
+  const tokens = useThemeTokens();
+  const [collapsed, setCollapsed] = useState(defaultCollapsed);
+  const ctx = useSpatialSelection();
+  const effectiveSelectedId = selectedId !== void 0 ? selectedId : (ctx == null ? void 0 : ctx.selectedId) ?? null;
+  const effectiveOnSelect = useCallback(
+    (obj) => {
+      onSelect == null ? void 0 : onSelect(obj);
+      if (!onSelect) ctx == null ? void 0 : ctx.setSelectedId(obj.id);
+    },
+    [onSelect, ctx]
+  );
+  const labels = { ...DEFAULT_KIND_LABELS, ...kindLabels };
+  const entries = Array.isArray(objects) ? objects : [];
+  const offX = (offset == null ? void 0 : offset.x) ?? 16;
+  const offY = (offset == null ? void 0 : offset.y) ?? 56;
+  const anchor = (() => {
+    switch (position) {
+      case "top-right":
+        return { top: offY, right: offX };
+      case "bottom-left":
+        return { bottom: offY, left: offX };
+      case "bottom-right":
+        return { bottom: offY, right: offX };
+      case "top-left":
+      default:
+        return { top: offY, left: offX };
+    }
+  })();
+  if (hidden) return null;
+  const dim = { opacity: 0.55, fontSize: "0.9em" };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-testid": "zendir-object-inventory",
+      style: {
+        position: "absolute",
+        zIndex: 2,
+        width,
+        maxHeight,
+        overflow: "auto",
+        padding: tokens.spacing.sm,
+        borderRadius: ((_a = tokens.borderRadius) == null ? void 0 : _a.md) ?? 6,
+        border: "1px solid rgba(255,255,255,0.12)",
+        background: "rgba(0,0,0,0.72)",
+        color: tokens.colors.text.primary,
+        fontSize: tokens.typography.fontSize.xs,
+        lineHeight: 1.35,
+        ...anchor,
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          PanelHeader,
+          {
+            title: title ?? `API Objects · ${entries.length}`,
+            collapsible,
+            collapsed,
+            onToggle: () => setCollapsed((c) => !c)
+          }
+        ),
+        !collapsed && /* @__PURE__ */ jsxs(Fragment, { children: [
+          KIND_ORDER.map((kind) => {
+            const items = entries.filter((o) => o.kind === kind);
+            return /* @__PURE__ */ jsx(
+              ObjectInventoryGroup,
+              {
+                title: `${labels[kind]} (${items.length})`,
+                items,
+                selectedId: effectiveSelectedId,
+                onSelect: onSelect != null ? onSelect : ctx ? effectiveOnSelect : void 0
+              },
+              kind
+            );
+          }),
+          structureDiag !== void 0 && /* @__PURE__ */ jsx(StructureDiagBlock, { diag: structureDiag, dim }),
+          positionTickDiag !== void 0 && /* @__PURE__ */ jsx(PositionTickDiagBlock, { diag: positionTickDiag, dim })
+        ] })
+      ]
+    }
+  );
+});
+const PanelHeader = ({
+  title,
+  collapsible,
+  collapsed,
+  onToggle
+}) => {
+  if (!collapsible) {
+    return /* @__PURE__ */ jsx("div", { style: { marginBottom: 6, fontWeight: 600 }, children: title });
+  }
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: onToggle,
+      "aria-expanded": !collapsed,
+      style: {
+        display: "flex",
+        width: "100%",
+        alignItems: "center",
+        justifyContent: "space-between",
+        marginBottom: 6,
+        padding: 0,
+        background: "none",
+        border: "none",
+        color: "inherit",
+        font: "inherit",
+        fontWeight: 600,
+        cursor: "pointer",
+        textAlign: "left"
+      },
+      children: [
+        /* @__PURE__ */ jsx("span", { children: title }),
+        /* @__PURE__ */ jsx("span", { "aria-hidden": true, style: { opacity: 0.7, fontSize: "0.85em" }, children: collapsed ? "▸" : "▾" })
+      ]
+    }
+  );
+};
+const ObjectInventoryGroup = ({
+  title,
+  items,
+  selectedId,
+  onSelect
+}) => /* @__PURE__ */ jsxs("div", { style: { marginBottom: 6 }, children: [
+  /* @__PURE__ */ jsx("div", { style: { opacity: 0.85 }, children: title }),
+  items.length === 0 ? /* @__PURE__ */ jsx("div", { style: { opacity: 0.6 }, children: "—" }) : items.map((item) => /* @__PURE__ */ jsx(
+    ObjectRow,
+    {
+      object: item,
+      selected: item.id === selectedId,
+      onSelect
+    },
+    item.id
+  ))
+] });
+const ObjectRow = ({
+  object,
+  selected,
+  onSelect
+}) => {
+  const handleClick = useCallback(() => onSelect == null ? void 0 : onSelect(object), [onSelect, object]);
+  const interactive = onSelect != null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: interactive ? "button" : void 0,
+      tabIndex: interactive ? 0 : void 0,
+      onClick: interactive ? handleClick : void 0,
+      onKeyDown: interactive ? (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          handleClick();
+        }
+      } : void 0,
+      style: {
+        opacity: 0.95,
+        padding: "1px 4px",
+        borderRadius: 3,
+        cursor: interactive ? "pointer" : "default",
+        background: selected ? "rgba(255,255,255,0.12)" : "transparent"
+      },
+      children: [
+        object.name,
+        " ",
+        /* @__PURE__ */ jsxs("span", { style: { opacity: 0.6 }, children: [
+          "(",
+          shortId(object.id),
+          ")"
+        ] })
+      ]
+    }
+  );
+};
+const StructureDiagBlock = ({
+  diag,
+  dim
+}) => /* @__PURE__ */ jsx("div", { style: { marginTop: 8, borderTop: "1px solid rgba(255,255,255,0.1)", paddingTop: 6 }, children: diag ? /* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsx("div", { style: { ...dim, marginBottom: 2 }, children: "Raw structure keys:" }),
+  /* @__PURE__ */ jsx("div", { style: dim, children: diag.topLevelKeys.join(", ") || "—" }),
+  /* @__PURE__ */ jsxs("div", { style: { ...dim, marginTop: 2 }, children: [
+    "Objects[]: ",
+    diag.rawObjectCount < 0 ? "absent" : diag.rawObjectCount,
+    " · ",
+    "Systems[]: ",
+    diag.rawSystemCount < 0 ? "absent" : diag.rawSystemCount
+  ] })
+] }) : /* @__PURE__ */ jsx("div", { style: { ...dim, marginTop: 4 }, children: "Waiting for structure…" }) });
+const PositionTickDiagBlock = ({
+  diag,
+  dim
+}) => {
+  if (!diag) return null;
+  return /* @__PURE__ */ jsxs("div", { style: { marginTop: 8, borderTop: "1px solid rgba(255,255,255,0.1)", paddingTop: 6 }, children: [
+    /* @__PURE__ */ jsx("div", { style: { ...dim, marginBottom: 2 }, children: "Last position tick:" }),
+    /* @__PURE__ */ jsxs("div", { style: dim, children: [
+      "ok ",
+      diag.parsedOk,
+      "/",
+      diag.requested,
+      diag.parseFailed > 0 && ` · parseFail ${diag.parseFailed}`,
+      diag.requestFailed > 0 && ` · reqFail ${diag.requestFailed}`
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: dim, children: [
+      "asked for:",
+      " ",
+      diag.requestedProps ? diag.requestedProps.join(", ") : "getAllProperties (fallback)"
+    ] }),
+    diag.firstResponseKeys.length > 0 && /* @__PURE__ */ jsxs("div", { style: { ...dim, wordBreak: "break-all" }, children: [
+      "got keys: ",
+      diag.firstResponseKeys.slice(0, 12).join(", "),
+      diag.firstResponseKeys.length > 12 && " …"
+    ] }),
+    diag.firstResponseSample && /* @__PURE__ */ jsx("div", { style: { ...dim, wordBreak: "break-all" }, children: diag.firstResponseSample })
+  ] });
+};
+function recommendedFlyDistance(kind) {
+  switch (kind) {
+    case "spacecraft":
+      return 2e6;
+    case "groundStation":
+      return 15e5;
+    case "celestialBody":
+      return 5e7;
+  }
+}
+export {
+  ObjectInventoryPanel,
+  recommendedFlyDistance
+};
+//# sourceMappingURL=ObjectInventoryPanel.js.map

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

@@ -0,0 +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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"}

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

@@ -0,0 +1,15 @@
+/**
+ * @zendir/ui - Floating UI panels for live 3D dashboards.
+ *
+ * Both panels are **renderless** w.r.t. their data:
+ *   • `<ObjectInventoryPanel />` lists objects and emits `onSelect`.
+ *   • `<LayerControlPanel />`    emits visibility / layer-flag changes.
+ *
+ * The consumer wires the callbacks to `<ZenSpace3D />`'s imperative
+ * handle and props. Same separation of concerns as `<GroundTrackMap />`'s
+ * `MapLayerDef` pattern — UI here, rendering there.
+ */
+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/theme/ThemeProvider.d.ts

@@ -157,6 +157,8 @@ export interface ThemeTokens {
     typography: {
         fontFamily: {
             primary: string;
+            /** Optional heading face. Defaults to Sora, falls back to primary. */
+            heading?: string;
             mono: string;
         };
         display: {

package/dist/react/theme/ThemeProvider.js

@@ -1,5 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { createContext, useMemo, useState, useEffect, useContext } from "react";
+import { useState, useEffect, useMemo, useContext, createContext } from "react";
+import { typography, borderRadius, spacing } from "../../tokens/index.js";
 function adjustHexBrightness(hex, factor) {
   const normalized = hex.replace("#", "").trim();
   const expanded = normalized.length === 3 ? normalized.split("").map((ch) => ch + ch).join("") : normalized;
@@ -58,6 +59,14 @@ const animationTokens = {
     slow: 400
   }
 };
+const animationTokensReduced = {
+  fast: "all 0.01ms linear",
+  normal: "all 0.01ms linear",
+  slow: "all 0.01ms linear",
+  spring: "all 0.01ms linear",
+  easing: animationTokens.easing,
+  duration: { instant: 0, fast: 0, normal: 0, slow: 0 }
+};
 const focusTokensDark = {
   color: "#4dacff",
   width: "2px",
@@ -190,26 +199,10 @@ const astroThemeDark = {
       disabled: "#6b7280"
     }
   },
-  spacing: {
-    xxs: "2px",
-    xs: "4px",
-    sm: "8px",
-    smd: "12px",
-    md: "16px",
-    mdl: "20px",
-    lg: "24px",
-    xl: "32px",
-    xxl: "48px"
-  },
-  borderRadius: {
-    none: "0",
-    xs: "1px",
-    sm: "2px",
-    md: "4px",
-    lg: "8px",
-    xl: "12px",
-    full: "9999px"
-  },
+  // spacing + borderRadius are sourced from tokens/index.ts (single source
+  // of truth — see comment at the top of this file).
+  spacing: { ...spacing },
+  borderRadius: { ...borderRadius },
   elementSize: {
     sm: "28px",
     md: "36px",
@@ -217,15 +210,13 @@ const astroThemeDark = {
   },
   typography: {
     /**
-     * Font families per AstroUXDS specification
+     * Font families — sourced from src/tokens/index.ts. Canonical stacks:
+     *   primary: Public Sans → Roboto → system
+     *   heading: Sora → Roboto → system
+     *   mono:    Roboto Mono → system mono
      * @see https://www.astrouxds.com/foundations/typography/
      */
-    fontFamily: {
-      /** Primary font: Roboto with comprehensive system fallbacks */
-      primary: '"Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif',
-      /** Monospace font: Roboto Mono for data/code with system fallbacks */
-      mono: '"Roboto Mono", "SF Mono", "Consolas", "Liberation Mono", monospace'
-    },
+    fontFamily: { ...typography.fontFamily },
     // Astro UX Display Styles
     // https://www.astrouxds.com/foundations/typography/
     display: {
@@ -256,30 +247,11 @@ const astroThemeDark = {
       1: { fontSize: "1rem", fontWeight: 400, letterSpacing: "0.5px", lineHeight: "1.25rem" },
       "1Bold": { fontSize: "1rem", fontWeight: 700, letterSpacing: "0.5px", lineHeight: "1.25rem" }
     },
-    // Legacy convenience tokens (rem-based for Astro compliance)
-    // Note: Use Typography component for new code
-    fontSize: {
-      micro: "0.5625rem",
-      // 9px - very tight spaces
-      xxs: "0.625rem",
-      // 10px - compact labels (xs in old system)
-      xs: "0.625rem",
-      // 10px - compact (kept for backward compatibility)
-      sm: "0.75rem",
-      // 12px (Body 3)
-      base: "0.875rem",
-      // 14px (Body 2)
-      md: "0.875rem",
-      // 14px (Body 2)
-      lg: "1rem",
-      // 16px (Body 1)
-      xl: "1.25rem",
-      // 20px (Heading 3/4)
-      xxl: "1.5rem",
-      // 24px (Heading 2)
-      xxxl: "2.125rem"
-      // 34px (Heading 1)
-    },
+    // Convenience numeric scale — sourced from tokens/index.ts. Prefer the
+    // semantically-named display/heading/body/control style objects above
+    // for new code; this scale is kept for the ~300 existing components
+    // that consume `tokens.typography.fontSize.*` directly.
+    fontSize: { ...typography.fontSize },
     /**
      * Font weights per AstroUXDS specification
      * Only 300, 400, 500, 700 are officially supported
@@ -986,13 +958,19 @@ function ThemeProvider({
     return {
       ...base,
       colors: resolvedColors,
-      borders: computeBorderTokens(resolvedColors)
+      borders: computeBorderTokens(resolvedColors),
+      // Honor prefers-reduced-motion in the JS token surface too. The
+      // global CSS @media rule below already strips CSS animations; this
+      // ensures JS-driven animation libraries (Framer Motion etc.) that
+      // read `tokens.animation.*` get the collapsed variant without each
+      // developer having to branch on `useTheme().prefersReducedMotion`.
+      animation: prefersReducedMotion ? animationTokensReduced : base.animation
     };
-  }, [theme, mode, accentColor]);
+  }, [theme, mode, accentColor, prefersReducedMotion]);
   useEffect(() => {
     if (typeof document === "undefined") return;
     const root = document.documentElement;
-    const { colors, typography, spacing, borderRadius, animation, focus, shadows } = tokens;
+    const { colors, typography: typography2, spacing: spacing2, borderRadius: borderRadius2, animation, focus, shadows } = tokens;
     root.setAttribute("data-theme", mode);
     root.setAttribute("data-variant", theme);
     root.style.setProperty("--color-background-base", colors.background.base);
@@ -1019,22 +997,22 @@ function ThemeProvider({
     root.style.setProperty("--color-accent-primary", colors.accent.primary);
     root.style.setProperty("--color-accent-secondary", colors.accent.secondary);
     root.style.setProperty("--color-accent-tertiary", colors.accent.tertiary);
-    root.style.setProperty("--font-family-heading", typography.fontFamily.heading || typography.fontFamily.primary);
-    root.style.setProperty("--font-family-primary", typography.fontFamily.primary);
-    root.style.setProperty("--font-family-mono", typography.fontFamily.mono);
-    root.style.setProperty("--spacing-xxs", spacing.xxs);
-    root.style.setProperty("--spacing-xs", spacing.xs);
-    root.style.setProperty("--spacing-sm", spacing.sm);
-    root.style.setProperty("--spacing-smd", spacing.smd);
-    root.style.setProperty("--spacing-md", spacing.md);
-    root.style.setProperty("--spacing-mdl", spacing.mdl);
-    root.style.setProperty("--spacing-lg", spacing.lg);
-    root.style.setProperty("--spacing-xl", spacing.xl);
-    root.style.setProperty("--spacing-xxl", spacing.xxl);
-    root.style.setProperty("--radius-sm", borderRadius.sm);
-    root.style.setProperty("--radius-md", borderRadius.md);
-    root.style.setProperty("--radius-lg", borderRadius.lg);
-    root.style.setProperty("--radius-xl", borderRadius.xl);
+    root.style.setProperty("--font-family-heading", typography2.fontFamily.heading || typography2.fontFamily.primary);
+    root.style.setProperty("--font-family-primary", typography2.fontFamily.primary);
+    root.style.setProperty("--font-family-mono", typography2.fontFamily.mono);
+    root.style.setProperty("--spacing-xxs", spacing2.xxs);
+    root.style.setProperty("--spacing-xs", spacing2.xs);
+    root.style.setProperty("--spacing-sm", spacing2.sm);
+    root.style.setProperty("--spacing-smd", spacing2.smd);
+    root.style.setProperty("--spacing-md", spacing2.md);
+    root.style.setProperty("--spacing-mdl", spacing2.mdl);
+    root.style.setProperty("--spacing-lg", spacing2.lg);
+    root.style.setProperty("--spacing-xl", spacing2.xl);
+    root.style.setProperty("--spacing-xxl", spacing2.xxl);
+    root.style.setProperty("--radius-sm", borderRadius2.sm);
+    root.style.setProperty("--radius-md", borderRadius2.md);
+    root.style.setProperty("--radius-lg", borderRadius2.lg);
+    root.style.setProperty("--radius-xl", borderRadius2.xl);
     const motionMultiplier = prefersReducedMotion ? 0 : 1;
     root.style.setProperty("--animation-fast", prefersReducedMotion ? "none" : animation.fast);
     root.style.setProperty("--animation-normal", prefersReducedMotion ? "none" : animation.normal);
@@ -1051,7 +1029,7 @@ function ThemeProvider({
     root.style.setProperty("--shadow-xl", shadows.xl);
     document.body.style.backgroundColor = colors.background.base;
     document.body.style.color = colors.text.primary;
-    document.body.style.fontFamily = typography.fontFamily.primary;
+    document.body.style.fontFamily = typography2.fontFamily.primary;
   }, [tokens, theme, mode, prefersReducedMotion]);
   const scrollbarCSS = useMemo(() => buildScrollbarCSS(tokens, mode, prefersReducedMotion), [tokens, mode, prefersReducedMotion]);
   const value = useMemo(