@zendir/ui 0.4.1 → 0.6.0

package/dist/react/panels/ObjectInventoryPanel.js

@@ -1,261 +1,326 @@
-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";
+import { memo, useCallback, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/react/panels/ObjectInventoryPanel.tsx
+/**
+* @zendir/ui - ObjectInventoryPanel
+*
+* Themed list of simulation objects, grouped by `kind` (spacecraft /
+* ground stations / celestial bodies). Pair with `useSimulationScene`:
+*
+* ```tsx
+* const scene = useSimulationScene({ client, containerId, simulationId });
+* <ObjectInventoryPanel
+*   objects={scene.objects}
+*   onSelect={(obj) => zenRef.current?.focusOn(obj.id, {
+*     zoom: recommendedFlyDistance(obj.kind),
+*   })}
+* />
+* ```
+*
+* The panel renders the toggle UI only — it has no opinion about WHAT
+* happens on select. The consumer wires `onSelect` to its 3D viewer's
+* imperative handle (or anywhere else — the panel is reusable in any
+* dashboard or debug context).
+*/
+/** Stable short-form of a GUID for inline display. */
 function shortId(id) {
-  return id.length <= 8 ? id : id.slice(0, 8);
+	return id.length <= 8 ? id : id.slice(0, 8);
 }
-const DEFAULT_KIND_LABELS = {
-  spacecraft: "Spacecraft",
-  groundStation: "Ground Stations",
-  celestialBody: "Celestial Bodies"
+var 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 })
-        ] })
-      ]
-    }
-  );
+var KIND_ORDER = [
+	"spacecraft",
+	"groundStation",
+	"celestialBody"
+];
+var ObjectInventoryPanel = memo(function ObjectInventoryPanel({ objects, onSelect, selectedId, position = "top-left", offset, hidden = false, width = 330, maxHeight = "50vh", collapsible = true, defaultCollapsed = false, title, structureDiag, positionTickDiag, kindLabels, style }) {
+	const tokens = useThemeTokens();
+	const [collapsed, setCollapsed] = useState(defaultCollapsed);
+	const ctx = useSpatialSelection();
+	const effectiveSelectedId = selectedId !== void 0 ? selectedId : ctx?.selectedId ?? null;
+	const effectiveOnSelect = useCallback((obj) => {
+		onSelect?.(obj);
+		if (!onSelect) ctx?.setSelectedId(obj.id);
+	}, [onSelect, ctx]);
+	const labels = {
+		...DEFAULT_KIND_LABELS,
+		...kindLabels
+	};
+	const entries = Array.isArray(objects) ? objects : [];
+	const offX = offset?.x ?? 16;
+	const offY = 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
+			};
+			default: return {
+				top: offY,
+				left: offX
+			};
+		}
+	})();
+	if (hidden) return null;
+	const dim = {
+		opacity: .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: tokens.borderRadius?.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 ? "▸" : "▾" })
-      ]
-    }
-  );
+var 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: .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),
-          ")"
-        ] })
-      ]
-    }
-  );
+var ObjectInventoryGroup = ({ title, items, selectedId, onSelect }) => /* @__PURE__ */ jsxs("div", {
+	style: { marginBottom: 6 },
+	children: [/* @__PURE__ */ jsx("div", {
+		style: { opacity: .85 },
+		children: title
+	}), items.length === 0 ? /* @__PURE__ */ jsx("div", {
+		style: { opacity: .6 },
+		children: "—"
+	}) : items.map((item) => /* @__PURE__ */ jsx(ObjectRow, {
+		object: item,
+		selected: item.id === selectedId,
+		onSelect
+	}, item.id))]
+});
+var ObjectRow = ({ object, selected, onSelect }) => {
+	const handleClick = useCallback(() => 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: .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: .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 })
-  ] });
+var 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…"
+	})
+});
+var 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
+			})
+		]
+	});
 };
+/**
+* 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.
+*/
 function recommendedFlyDistance(kind) {
-  switch (kind) {
-    case "spacecraft":
-      return 2e6;
-    case "groundStation":
-      return 15e5;
-    case "celestialBody":
-      return 5e7;
-  }
+	switch (kind) {
+		case "spacecraft": return 2e6;
+		case "groundStation": return 15e5;
+		case "celestialBody": return 5e7;
+	}
 }
-export {
-  ObjectInventoryPanel,
-  recommendedFlyDistance
-};
-//# sourceMappingURL=ObjectInventoryPanel.js.map
+//#endregion
+export { ObjectInventoryPanel, ObjectInventoryPanel as default, recommendedFlyDistance };
+
+//# sourceMappingURL=ObjectInventoryPanel.js.map