@zendir/ui 0.5.0 → 0.6.1

package/dist/react/panels/LayerControlPanel.js

@@ -1,184 +1,227 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { memo, useCallback } from "react";
 import { useThemeTokens } from "../theme/ThemeProvider.js";
-const LayerControlPanel = memo(function LayerControlPanel2({
-  layers,
-  onLayersChange,
-  visibility,
-  onVisibilityChange,
-  groupCounts,
-  customLayers,
-  customLayerState,
-  onCustomLayerChange,
-  position = "top-right",
-  offset,
-  hidden = false,
-  style,
-  hideRenderFlags = false,
-  hideGroups = false,
-  hideCustomLayers = false
-}) {
-  var _a;
-  const tokens = useThemeTokens();
-  const showLabels = (layers == null ? void 0 : layers.labels) === true;
-  const showCoverage = (layers == null ? void 0 : layers.coverage) === true;
-  const showOrbits = (layers == null ? void 0 : layers.orbits) !== false;
-  const showSpacecraft = (visibility == null ? void 0 : visibility.spacecraft) !== false;
-  const showGroundStations = (visibility == null ? void 0 : visibility.groundStations) !== false;
-  const showCelestialBodies = (visibility == null ? void 0 : visibility.celestialBodies) !== false;
-  const toggleLayer = useCallback(
-    (key) => {
-      if (!onLayersChange) return;
-      const current = key === "orbits" ? showOrbits : key === "labels" ? showLabels : showCoverage;
-      onLayersChange({ ...layers ?? {}, [key]: !current });
-    },
-    [layers, onLayersChange, showLabels, showCoverage, showOrbits]
-  );
-  const toggleVisibility = useCallback(
-    (key) => {
-      if (!onVisibilityChange) return;
-      const current = key === "spacecraft" ? showSpacecraft : key === "groundStations" ? showGroundStations : showCelestialBodies;
-      onVisibilityChange({ ...visibility ?? {}, [key]: !current });
-    },
-    [visibility, onVisibilityChange, showSpacecraft, showGroundStations, showCelestialBodies]
-  );
-  const offX = (offset == null ? void 0 : offset.x) ?? 16;
-  const offY = (offset == null ? void 0 : offset.y) ?? 16;
-  const anchor = (() => {
-    switch (position) {
-      case "top-left":
-        return { top: offY, left: offX };
-      case "bottom-left":
-        return { bottom: offY, left: offX };
-      case "bottom-right":
-        return { bottom: offY, right: offX };
-      case "top-right":
-      default:
-        return { top: offY, right: offX };
-    }
-  })();
-  if (hidden) return null;
-  const showRender = !hideRenderFlags && onLayersChange != null;
-  const showGroupsSection = !hideGroups && onVisibilityChange != null;
-  const showCustom = !hideCustomLayers && ((customLayers == null ? void 0 : customLayers.length) ?? 0) > 0;
-  if (!showRender && !showGroupsSection && !showCustom) return null;
-  const cnt = (n) => typeof n === "number" ? ` (${n})` : "";
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      "data-testid": "zendir-layer-control",
-      style: {
-        position: "absolute",
-        zIndex: 2,
-        display: "flex",
-        flexDirection: "column",
-        gap: 6,
-        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.2,
-        ...anchor,
-        ...style
-      },
-      children: [
-        showRender && /* @__PURE__ */ jsxs(Section, { title: "Render", children: [
-          /* @__PURE__ */ jsx(Toggle, { label: "Orbits", active: showOrbits, onClick: () => toggleLayer("orbits") }),
-          /* @__PURE__ */ jsx(Toggle, { label: "Labels", active: showLabels, onClick: () => toggleLayer("labels") }),
-          /* @__PURE__ */ jsx(Toggle, { label: "Coverage", active: showCoverage, onClick: () => toggleLayer("coverage") })
-        ] }),
-        showGroupsSection && /* @__PURE__ */ jsxs(Section, { title: "Objects", children: [
-          /* @__PURE__ */ jsx(
-            Toggle,
-            {
-              label: `Spacecraft${cnt(groupCounts == null ? void 0 : groupCounts.spacecraft)}`,
-              active: showSpacecraft,
-              onClick: () => toggleVisibility("spacecraft")
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Toggle,
-            {
-              label: `Ground Stations${cnt(groupCounts == null ? void 0 : groupCounts.groundStations)}`,
-              active: showGroundStations,
-              onClick: () => toggleVisibility("groundStations")
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Toggle,
-            {
-              label: `Celestial${cnt(groupCounts == null ? void 0 : groupCounts.celestialBodies)}`,
-              active: showCelestialBodies,
-              onClick: () => toggleVisibility("celestialBodies")
-            }
-          )
-        ] }),
-        showCustom && /* @__PURE__ */ jsx(Section, { title: "Overlays", children: (customLayers ?? []).map((layer) => /* @__PURE__ */ jsx(
-          Toggle,
-          {
-            label: layer.label,
-            active: (customLayerState == null ? void 0 : customLayerState[layer.id]) ?? layer.defaultEnabled ?? false,
-            onClick: () => {
-              const current = (customLayerState == null ? void 0 : customLayerState[layer.id]) ?? layer.defaultEnabled ?? false;
-              onCustomLayerChange == null ? void 0 : onCustomLayerChange(layer.id, !current);
-            }
-          },
-          layer.id
-        )) })
-      ]
-    }
-  );
+import { memo, useCallback } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/react/panels/LayerControlPanel.tsx
+/**
+* @zendir/ui - LayerControlPanel
+*
+* Floating layer-toggle panel for the 3D viewer (mirrors the
+* `MapLayerDef` pattern from `<GroundTrackMap />`). Three sections:
+*
+*   1. Render flags  — labels / coverage / orbits  (HOW objects draw)
+*   2. Object groups — spacecraft / GS / celestial (WHICH objects draw)
+*   3. Custom layers — app-defined overlays        (caller renders them)
+*
+* The panel is **toggle UI only**. It emits `onChange` callbacks; the
+* consumer wires them to `<ZenSpace3D layers={...} visibility={...} />`
+* (or to its own overlay state for custom layers). Same contract as
+* `MapLayerDef` — keeps the panel reusable and the renderer
+* untouched.
+*
+* ```tsx
+* const [layers, setLayers] = useState({ orbits: true, labels: false, coverage: false });
+* const [visibility, setVisibility] = useState({
+*   spacecraft: true, groundStations: true, celestialBodies: true,
+* });
+* const [customLayers, setCustomLayers] = useState<Record<string, boolean>>({ rf: false });
+*
+* <ZenSpace3D layers={layers} visibility={visibility} ... />
+* <LayerControlPanel
+*   layers={layers}
+*   visibility={visibility}
+*   customLayers={[{ id: 'rf', label: 'RF Coverage' }]}
+*   customLayerState={customLayers}
+*   groupCounts={{ spacecraft: scene.satellites.length, ... }}
+*   onLayersChange={setLayers}
+*   onVisibilityChange={setVisibility}
+*   onCustomLayerChange={(id, on) => setCustomLayers((c) => ({ ...c, [id]: on }))}
+* />
+* ```
+*/
+var LayerControlPanel = memo(function LayerControlPanel({ layers, onLayersChange, visibility, onVisibilityChange, groupCounts, customLayers, customLayerState, onCustomLayerChange, position = "top-right", offset, hidden = false, style, hideRenderFlags = false, hideGroups = false, hideCustomLayers = false }) {
+	const tokens = useThemeTokens();
+	const showLabels = layers?.labels === true;
+	const showCoverage = layers?.coverage === true;
+	const showOrbits = layers?.orbits !== false;
+	const showSpacecraft = visibility?.spacecraft !== false;
+	const showGroundStations = visibility?.groundStations !== false;
+	const showCelestialBodies = visibility?.celestialBodies !== false;
+	const toggleLayer = useCallback((key) => {
+		if (!onLayersChange) return;
+		const current = key === "orbits" ? showOrbits : key === "labels" ? showLabels : showCoverage;
+		onLayersChange({
+			...layers ?? {},
+			[key]: !current
+		});
+	}, [
+		layers,
+		onLayersChange,
+		showLabels,
+		showCoverage,
+		showOrbits
+	]);
+	const toggleVisibility = useCallback((key) => {
+		if (!onVisibilityChange) return;
+		const current = key === "spacecraft" ? showSpacecraft : key === "groundStations" ? showGroundStations : showCelestialBodies;
+		onVisibilityChange({
+			...visibility ?? {},
+			[key]: !current
+		});
+	}, [
+		visibility,
+		onVisibilityChange,
+		showSpacecraft,
+		showGroundStations,
+		showCelestialBodies
+	]);
+	const offX = offset?.x ?? 16;
+	const offY = offset?.y ?? 16;
+	const anchor = (() => {
+		switch (position) {
+			case "top-left": return {
+				top: offY,
+				left: offX
+			};
+			case "bottom-left": return {
+				bottom: offY,
+				left: offX
+			};
+			case "bottom-right": return {
+				bottom: offY,
+				right: offX
+			};
+			default: return {
+				top: offY,
+				right: offX
+			};
+		}
+	})();
+	if (hidden) return null;
+	const showRender = !hideRenderFlags && onLayersChange != null;
+	const showGroupsSection = !hideGroups && onVisibilityChange != null;
+	const showCustom = !hideCustomLayers && (customLayers?.length ?? 0) > 0;
+	if (!showRender && !showGroupsSection && !showCustom) return null;
+	const cnt = (n) => typeof n === "number" ? ` (${n})` : "";
+	return /* @__PURE__ */ jsxs("div", {
+		"data-testid": "zendir-layer-control",
+		style: {
+			position: "absolute",
+			zIndex: 2,
+			display: "flex",
+			flexDirection: "column",
+			gap: 6,
+			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.2,
+			...anchor,
+			...style
+		},
+		children: [
+			showRender && /* @__PURE__ */ jsxs(Section, {
+				title: "Render",
+				children: [
+					/* @__PURE__ */ jsx(Toggle, {
+						label: "Orbits",
+						active: showOrbits,
+						onClick: () => toggleLayer("orbits")
+					}),
+					/* @__PURE__ */ jsx(Toggle, {
+						label: "Labels",
+						active: showLabels,
+						onClick: () => toggleLayer("labels")
+					}),
+					/* @__PURE__ */ jsx(Toggle, {
+						label: "Coverage",
+						active: showCoverage,
+						onClick: () => toggleLayer("coverage")
+					})
+				]
+			}),
+			showGroupsSection && /* @__PURE__ */ jsxs(Section, {
+				title: "Objects",
+				children: [
+					/* @__PURE__ */ jsx(Toggle, {
+						label: `Spacecraft${cnt(groupCounts?.spacecraft)}`,
+						active: showSpacecraft,
+						onClick: () => toggleVisibility("spacecraft")
+					}),
+					/* @__PURE__ */ jsx(Toggle, {
+						label: `Ground Stations${cnt(groupCounts?.groundStations)}`,
+						active: showGroundStations,
+						onClick: () => toggleVisibility("groundStations")
+					}),
+					/* @__PURE__ */ jsx(Toggle, {
+						label: `Celestial${cnt(groupCounts?.celestialBodies)}`,
+						active: showCelestialBodies,
+						onClick: () => toggleVisibility("celestialBodies")
+					})
+				]
+			}),
+			showCustom && /* @__PURE__ */ jsx(Section, {
+				title: "Overlays",
+				children: (customLayers ?? []).map((layer) => /* @__PURE__ */ jsx(Toggle, {
+					label: layer.label,
+					active: customLayerState?.[layer.id] ?? layer.defaultEnabled ?? false,
+					onClick: () => {
+						const current = customLayerState?.[layer.id] ?? layer.defaultEnabled ?? false;
+						onCustomLayerChange?.(layer.id, !current);
+					}
+				}, layer.id))
+			})
+		]
+	});
 });
-const Section = ({ title, children }) => {
-  const tokens = useThemeTokens();
-  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: [
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        style: {
-          opacity: 0.6,
-          fontSize: "0.85em",
-          textTransform: "uppercase",
-          letterSpacing: 0.5,
-          color: tokens.colors.text.secondary
-        },
-        children: title
-      }
-    ),
-    /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: 4 }, children })
-  ] });
-};
-const Toggle = ({
-  label,
-  active,
-  onClick
-}) => {
-  var _a;
-  const tokens = useThemeTokens();
-  return /* @__PURE__ */ jsx(
-    "button",
-    {
-      type: "button",
-      onClick,
-      "aria-pressed": active,
-      style: {
-        padding: `${tokens.spacing.xs}px ${tokens.spacing.sm}px`,
-        borderRadius: ((_a = tokens.borderRadius) == null ? void 0 : _a.sm) ?? 4,
-        background: active ? "rgba(100,200,255,0.2)" : "rgba(0,0,0,0.6)",
-        border: `1px solid ${active ? "rgba(100,200,255,0.6)" : "rgba(255,255,255,0.15)"}`,
-        color: active ? "rgba(100,200,255,1)" : tokens.colors.text.secondary,
-        fontSize: tokens.typography.fontSize.xs,
-        cursor: "pointer",
-        letterSpacing: 0.3,
-        textAlign: "left"
-      },
-      children: label
-    }
-  );
+var Section = ({ title, children }) => {
+	return /* @__PURE__ */ jsxs("div", {
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			gap: 4
+		},
+		children: [/* @__PURE__ */ jsx("div", {
+			style: {
+				opacity: .6,
+				fontSize: "0.85em",
+				textTransform: "uppercase",
+				letterSpacing: .5,
+				color: useThemeTokens().colors.text.secondary
+			},
+			children: title
+		}), /* @__PURE__ */ jsx("div", {
+			style: {
+				display: "flex",
+				flexDirection: "column",
+				gap: 4
+			},
+			children
+		})]
+	});
 };
-export {
-  LayerControlPanel
+var Toggle = ({ label, active, onClick }) => {
+	const tokens = useThemeTokens();
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		onClick,
+		"aria-pressed": active,
+		style: {
+			padding: `${tokens.spacing.xs}px ${tokens.spacing.sm}px`,
+			borderRadius: tokens.borderRadius?.sm ?? 4,
+			background: active ? "rgba(100,200,255,0.2)" : "rgba(0,0,0,0.6)",
+			border: `1px solid ${active ? "rgba(100,200,255,0.6)" : "rgba(255,255,255,0.15)"}`,
+			color: active ? "rgba(100,200,255,1)" : tokens.colors.text.secondary,
+			fontSize: tokens.typography.fontSize.xs,
+			cursor: "pointer",
+			letterSpacing: .3,
+			textAlign: "left"
+		},
+		children: label
+	});
 };
-//# sourceMappingURL=LayerControlPanel.js.map
+//#endregion
+export { LayerControlPanel, LayerControlPanel as default };
+
+//# sourceMappingURL=LayerControlPanel.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"LayerControlPanel.js","sources":["../../../src/react/panels/LayerControlPanel.tsx"],"sourcesContent":["/**\n * @zendir/ui - LayerControlPanel\n *\n * Floating layer-toggle panel for the 3D viewer (mirrors the\n * `MapLayerDef` pattern from `<GroundTrackMap />`). Three sections:\n *\n *   1. Render flags  — labels / coverage / orbits  (HOW objects draw)\n *   2. Object groups — spacecraft / GS / celestial (WHICH objects draw)\n *   3. Custom layers — app-defined overlays        (caller renders them)\n *\n * The panel is **toggle UI only**. It emits `onChange` callbacks; the\n * consumer wires them to `<ZenSpace3D layers={...} visibility={...} />`\n * (or to its own overlay state for custom layers). Same contract as\n * `MapLayerDef` — keeps the panel reusable and the renderer\n * untouched.\n *\n * ```tsx\n * const [layers, setLayers] = useState({ orbits: true, labels: false, coverage: false });\n * const [visibility, setVisibility] = useState({\n *   spacecraft: true, groundStations: true, celestialBodies: true,\n * });\n * const [customLayers, setCustomLayers] = useState<Record<string, boolean>>({ rf: false });\n *\n * <ZenSpace3D layers={layers} visibility={visibility} ... />\n * <LayerControlPanel\n *   layers={layers}\n *   visibility={visibility}\n *   customLayers={[{ id: 'rf', label: 'RF Coverage' }]}\n *   customLayerState={customLayers}\n *   groupCounts={{ spacecraft: scene.satellites.length, ... }}\n *   onLayersChange={setLayers}\n *   onVisibilityChange={setVisibility}\n *   onCustomLayerChange={(id, on) => setCustomLayers((c) => ({ ...c, [id]: on }))}\n * />\n * ```\n */\n\nimport { memo, useCallback } from 'react';\nimport type { CSSProperties, ReactNode } from 'react';\nimport { useThemeTokens } from '../theme/ThemeProvider';\nimport type { LayerDef } from '../types';\n\n// ─── Types ────────────────────────────────────────────────────────────────────\n\n/** Render-flag layers — passed straight through to `<ZenSpace3D layers={...} />`. */\nexport interface RenderLayers {\n  labels?: boolean;\n  coverage?: boolean;\n  orbits?: boolean;\n}\n\n/** Object-group visibility — passed straight through to `<ZenSpace3D visibility={...} />`. */\nexport interface GroupVisibility {\n  spacecraft?: boolean;\n  groundStations?: boolean;\n  celestialBodies?: boolean;\n}\n\n/** Counts shown in the group toggles (\"Spacecraft (5)\"). All optional. */\nexport interface GroupCounts {\n  spacecraft?: number;\n  groundStations?: number;\n  celestialBodies?: number;\n}\n\nexport interface LayerControlPanelProps {\n  // ─── Render flags ─────────────────────────────────────────────────────────\n  /** Current render-flag state. Each key defaults to: orbits=on, labels=off, coverage=off. */\n  layers?: RenderLayers;\n  /** Called with the next render-flag state when any toggle is clicked. */\n  onLayersChange?: (next: RenderLayers) => void;\n\n  // ─── Object-group visibility ──────────────────────────────────────────────\n  /** Current group-visibility state. Each key defaults to true (visible). */\n  visibility?: GroupVisibility;\n  /** Called with the next visibility state when any toggle is clicked. */\n  onVisibilityChange?: (next: GroupVisibility) => void;\n  /** Counts to render in group toggle labels (e.g. \"Spacecraft (5)\"). */\n  groupCounts?: GroupCounts;\n\n  // ─── Custom layers (app-defined overlays) ─────────────────────────────────\n  /** App-defined layer toggles. The panel only renders the toggle UI. */\n  customLayers?: LayerDef[];\n  /** Current state of each custom layer (id → on/off). */\n  customLayerState?: Record<string, boolean>;\n  /** Fires when a custom layer is toggled. The consumer renders the overlay itself. */\n  onCustomLayerChange?: (id: string, enabled: boolean) => void;\n\n  // ─── Layout / theming ─────────────────────────────────────────────────────\n  position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';\n  offset?: { x?: number; y?: number };\n  hidden?: boolean;\n  style?: CSSProperties;\n\n  /** Hide the render-flags section (`true` to suppress). */\n  hideRenderFlags?: boolean;\n  /** Hide the object-group section. */\n  hideGroups?: boolean;\n  /** Hide the custom-layers section even if `customLayers` is non-empty. */\n  hideCustomLayers?: boolean;\n}\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\nexport const LayerControlPanel = memo(function LayerControlPanel({\n  layers,\n  onLayersChange,\n  visibility,\n  onVisibilityChange,\n  groupCounts,\n  customLayers,\n  customLayerState,\n  onCustomLayerChange,\n  position = 'top-right',\n  offset,\n  hidden = false,\n  style,\n  hideRenderFlags = false,\n  hideGroups = false,\n  hideCustomLayers = false,\n}: LayerControlPanelProps) {\n  const tokens = useThemeTokens();\n\n  // Default render-flag state — matches ZenSpace3D's defaults.\n  const showLabels   = layers?.labels   === true;\n  const showCoverage = layers?.coverage === true;\n  const showOrbits   = layers?.orbits   !== false;\n\n  // Default group-visibility — matches ZenSpace3D's defaults (everything on).\n  const showSpacecraft      = visibility?.spacecraft      !== false;\n  const showGroundStations  = visibility?.groundStations  !== false;\n  const showCelestialBodies = visibility?.celestialBodies !== false;\n\n  const toggleLayer = useCallback(\n    (key: keyof RenderLayers) => {\n      if (!onLayersChange) return;\n      const current =\n        key === 'orbits'\n          ? showOrbits\n          : key === 'labels'\n            ? showLabels\n            : showCoverage;\n      onLayersChange({ ...(layers ?? {}), [key]: !current });\n    },\n    [layers, onLayersChange, showLabels, showCoverage, showOrbits],\n  );\n\n  const toggleVisibility = useCallback(\n    (key: keyof GroupVisibility) => {\n      if (!onVisibilityChange) return;\n      const current =\n        key === 'spacecraft'\n          ? showSpacecraft\n          : key === 'groundStations'\n            ? showGroundStations\n            : showCelestialBodies;\n      onVisibilityChange({ ...(visibility ?? {}), [key]: !current });\n    },\n    [visibility, onVisibilityChange, showSpacecraft, showGroundStations, showCelestialBodies],\n  );\n\n  const offX = offset?.x ?? 16;\n  const offY = offset?.y ?? 16;\n  const anchor: CSSProperties = (() => {\n    switch (position) {\n      case 'top-left':     return { top: offY, left: offX };\n      case 'bottom-left':  return { bottom: offY, left: offX };\n      case 'bottom-right': return { bottom: offY, right: offX };\n      case 'top-right':\n      default:             return { top: offY, right: offX };\n    }\n  })();\n\n  if (hidden) return null;\n\n  const showRender = !hideRenderFlags && onLayersChange != null;\n  const showGroupsSection = !hideGroups && onVisibilityChange != null;\n  const showCustom = !hideCustomLayers && (customLayers?.length ?? 0) > 0;\n\n  if (!showRender && !showGroupsSection && !showCustom) return null;\n\n  const cnt = (n: number | undefined) =>\n    typeof n === 'number' ? ` (${n})` : '';\n\n  return (\n    <div\n      data-testid=\"zendir-layer-control\"\n      style={{\n        position: 'absolute',\n        zIndex: 2,\n        display: 'flex',\n        flexDirection: 'column',\n        gap: 6,\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.2,\n        ...anchor,\n        ...style,\n      }}\n    >\n      {showRender && (\n        <Section title=\"Render\">\n          <Toggle label=\"Orbits\"   active={showOrbits}   onClick={() => toggleLayer('orbits')} />\n          <Toggle label=\"Labels\"   active={showLabels}   onClick={() => toggleLayer('labels')} />\n          <Toggle label=\"Coverage\" active={showCoverage} onClick={() => toggleLayer('coverage')} />\n        </Section>\n      )}\n\n      {showGroupsSection && (\n        <Section title=\"Objects\">\n          <Toggle\n            label={`Spacecraft${cnt(groupCounts?.spacecraft)}`}\n            active={showSpacecraft}\n            onClick={() => toggleVisibility('spacecraft')}\n          />\n          <Toggle\n            label={`Ground Stations${cnt(groupCounts?.groundStations)}`}\n            active={showGroundStations}\n            onClick={() => toggleVisibility('groundStations')}\n          />\n          <Toggle\n            label={`Celestial${cnt(groupCounts?.celestialBodies)}`}\n            active={showCelestialBodies}\n            onClick={() => toggleVisibility('celestialBodies')}\n          />\n        </Section>\n      )}\n\n      {showCustom && (\n        <Section title=\"Overlays\">\n          {(customLayers ?? []).map((layer) => (\n            <Toggle\n              key={layer.id}\n              label={layer.label}\n              active={\n                customLayerState?.[layer.id] ??\n                layer.defaultEnabled ??\n                false\n              }\n              onClick={() => {\n                const current =\n                  customLayerState?.[layer.id] ??\n                  layer.defaultEnabled ??\n                  false;\n                onCustomLayerChange?.(layer.id, !current);\n              }}\n            />\n          ))}\n        </Section>\n      )}\n    </div>\n  );\n});\n\n// ─── Sub-components ───────────────────────────────────────────────────────────\n\nconst Section = ({ title, children }: { title: string; children: ReactNode }) => {\n  const tokens = useThemeTokens();\n  return (\n    <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>\n      <div\n        style={{\n          opacity: 0.6,\n          fontSize: '0.85em',\n          textTransform: 'uppercase',\n          letterSpacing: 0.5,\n          color: tokens.colors.text.secondary,\n        }}\n      >\n        {title}\n      </div>\n      <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>{children}</div>\n    </div>\n  );\n};\n\nconst Toggle = ({\n  label,\n  active,\n  onClick,\n}: {\n  label: string;\n  active: boolean;\n  onClick: () => void;\n}) => {\n  const tokens = useThemeTokens();\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      aria-pressed={active}\n      style={{\n        padding: `${tokens.spacing.xs}px ${tokens.spacing.sm}px`,\n        borderRadius: tokens.borderRadius?.sm ?? 4,\n        background: active ? 'rgba(100,200,255,0.2)' : 'rgba(0,0,0,0.6)',\n        border: `1px solid ${active ? 'rgba(100,200,255,0.6)' : 'rgba(255,255,255,0.15)'}`,\n        color: active ? 'rgba(100,200,255,1)' : tokens.colors.text.secondary,\n        fontSize: tokens.typography.fontSize.xs,\n        cursor: 'pointer',\n        letterSpacing: 0.3,\n        textAlign: 'left',\n      }}\n    >\n      {label}\n    </button>\n  );\n};\n\nexport default LayerControlPanel;\n"],"names":["LayerControlPanel"],"mappings":"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"}
+{"version":3,"file":"LayerControlPanel.js","names":[],"sources":["../../../src/react/panels/LayerControlPanel.tsx"],"sourcesContent":["/**\r\n * @zendir/ui - LayerControlPanel\r\n *\r\n * Floating layer-toggle panel for the 3D viewer (mirrors the\r\n * `MapLayerDef` pattern from `<GroundTrackMap />`). Three sections:\r\n *\r\n *   1. Render flags  — labels / coverage / orbits  (HOW objects draw)\r\n *   2. Object groups — spacecraft / GS / celestial (WHICH objects draw)\r\n *   3. Custom layers — app-defined overlays        (caller renders them)\r\n *\r\n * The panel is **toggle UI only**. It emits `onChange` callbacks; the\r\n * consumer wires them to `<ZenSpace3D layers={...} visibility={...} />`\r\n * (or to its own overlay state for custom layers). Same contract as\r\n * `MapLayerDef` — keeps the panel reusable and the renderer\r\n * untouched.\r\n *\r\n * ```tsx\r\n * const [layers, setLayers] = useState({ orbits: true, labels: false, coverage: false });\r\n * const [visibility, setVisibility] = useState({\r\n *   spacecraft: true, groundStations: true, celestialBodies: true,\r\n * });\r\n * const [customLayers, setCustomLayers] = useState<Record<string, boolean>>({ rf: false });\r\n *\r\n * <ZenSpace3D layers={layers} visibility={visibility} ... />\r\n * <LayerControlPanel\r\n *   layers={layers}\r\n *   visibility={visibility}\r\n *   customLayers={[{ id: 'rf', label: 'RF Coverage' }]}\r\n *   customLayerState={customLayers}\r\n *   groupCounts={{ spacecraft: scene.satellites.length, ... }}\r\n *   onLayersChange={setLayers}\r\n *   onVisibilityChange={setVisibility}\r\n *   onCustomLayerChange={(id, on) => setCustomLayers((c) => ({ ...c, [id]: on }))}\r\n * />\r\n * ```\r\n */\r\n\r\nimport { memo, useCallback } from \"react\";\r\nimport type { CSSProperties, ReactNode } from \"react\";\r\nimport { useThemeTokens } from \"../theme/ThemeProvider\";\r\nimport type { LayerDef } from \"../types\";\r\n\r\n// ─── Types ────────────────────────────────────────────────────────────────────\r\n\r\n/** Render-flag layers — passed straight through to `<ZenSpace3D layers={...} />`. */\r\nexport interface RenderLayers {\r\n  labels?: boolean;\r\n  coverage?: boolean;\r\n  orbits?: boolean;\r\n}\r\n\r\n/** Object-group visibility — passed straight through to `<ZenSpace3D visibility={...} />`. */\r\nexport interface GroupVisibility {\r\n  spacecraft?: boolean;\r\n  groundStations?: boolean;\r\n  celestialBodies?: boolean;\r\n}\r\n\r\n/** Counts shown in the group toggles (\"Spacecraft (5)\"). All optional. */\r\nexport interface GroupCounts {\r\n  spacecraft?: number;\r\n  groundStations?: number;\r\n  celestialBodies?: number;\r\n}\r\n\r\nexport interface LayerControlPanelProps {\r\n  // ─── Render flags ─────────────────────────────────────────────────────────\r\n  /** Current render-flag state. Each key defaults to: orbits=on, labels=off, coverage=off. */\r\n  layers?: RenderLayers;\r\n  /** Called with the next render-flag state when any toggle is clicked. */\r\n  onLayersChange?: (next: RenderLayers) => void;\r\n\r\n  // ─── Object-group visibility ──────────────────────────────────────────────\r\n  /** Current group-visibility state. Each key defaults to true (visible). */\r\n  visibility?: GroupVisibility;\r\n  /** Called with the next visibility state when any toggle is clicked. */\r\n  onVisibilityChange?: (next: GroupVisibility) => void;\r\n  /** Counts to render in group toggle labels (e.g. \"Spacecraft (5)\"). */\r\n  groupCounts?: GroupCounts;\r\n\r\n  // ─── Custom layers (app-defined overlays) ─────────────────────────────────\r\n  /** App-defined layer toggles. The panel only renders the toggle UI. */\r\n  customLayers?: LayerDef[];\r\n  /** Current state of each custom layer (id → on/off). */\r\n  customLayerState?: Record<string, boolean>;\r\n  /** Fires when a custom layer is toggled. The consumer renders the overlay itself. */\r\n  onCustomLayerChange?: (id: string, enabled: boolean) => void;\r\n\r\n  // ─── Layout / theming ─────────────────────────────────────────────────────\r\n  position?: \"top-left\" | \"top-right\" | \"bottom-left\" | \"bottom-right\";\r\n  offset?: { x?: number; y?: number };\r\n  hidden?: boolean;\r\n  style?: CSSProperties;\r\n\r\n  /** Hide the render-flags section (`true` to suppress). */\r\n  hideRenderFlags?: boolean;\r\n  /** Hide the object-group section. */\r\n  hideGroups?: boolean;\r\n  /** Hide the custom-layers section even if `customLayers` is non-empty. */\r\n  hideCustomLayers?: boolean;\r\n}\r\n\r\n// ─── Component ────────────────────────────────────────────────────────────────\r\n\r\nexport const LayerControlPanel = memo(function LayerControlPanel({\r\n  layers,\r\n  onLayersChange,\r\n  visibility,\r\n  onVisibilityChange,\r\n  groupCounts,\r\n  customLayers,\r\n  customLayerState,\r\n  onCustomLayerChange,\r\n  position = \"top-right\",\r\n  offset,\r\n  hidden = false,\r\n  style,\r\n  hideRenderFlags = false,\r\n  hideGroups = false,\r\n  hideCustomLayers = false,\r\n}: LayerControlPanelProps) {\r\n  const tokens = useThemeTokens();\r\n\r\n  // Default render-flag state — matches ZenSpace3D's defaults.\r\n  const showLabels = layers?.labels === true;\r\n  const showCoverage = layers?.coverage === true;\r\n  const showOrbits = layers?.orbits !== false;\r\n\r\n  // Default group-visibility — matches ZenSpace3D's defaults (everything on).\r\n  const showSpacecraft = visibility?.spacecraft !== false;\r\n  const showGroundStations = visibility?.groundStations !== false;\r\n  const showCelestialBodies = visibility?.celestialBodies !== false;\r\n\r\n  const toggleLayer = useCallback(\r\n    (key: keyof RenderLayers) => {\r\n      if (!onLayersChange) return;\r\n      const current =\r\n        key === \"orbits\"\r\n          ? showOrbits\r\n          : key === \"labels\"\r\n            ? showLabels\r\n            : showCoverage;\r\n      onLayersChange({ ...(layers ?? {}), [key]: !current });\r\n    },\r\n    [layers, onLayersChange, showLabels, showCoverage, showOrbits],\r\n  );\r\n\r\n  const toggleVisibility = useCallback(\r\n    (key: keyof GroupVisibility) => {\r\n      if (!onVisibilityChange) return;\r\n      const current =\r\n        key === \"spacecraft\"\r\n          ? showSpacecraft\r\n          : key === \"groundStations\"\r\n            ? showGroundStations\r\n            : showCelestialBodies;\r\n      onVisibilityChange({ ...(visibility ?? {}), [key]: !current });\r\n    },\r\n    [\r\n      visibility,\r\n      onVisibilityChange,\r\n      showSpacecraft,\r\n      showGroundStations,\r\n      showCelestialBodies,\r\n    ],\r\n  );\r\n\r\n  const offX = offset?.x ?? 16;\r\n  const offY = offset?.y ?? 16;\r\n  const anchor: CSSProperties = (() => {\r\n    switch (position) {\r\n      case \"top-left\":\r\n        return { top: offY, left: offX };\r\n      case \"bottom-left\":\r\n        return { bottom: offY, left: offX };\r\n      case \"bottom-right\":\r\n        return { bottom: offY, right: offX };\r\n      case \"top-right\":\r\n      default:\r\n        return { top: offY, right: offX };\r\n    }\r\n  })();\r\n\r\n  if (hidden) return null;\r\n\r\n  const showRender = !hideRenderFlags && onLayersChange != null;\r\n  const showGroupsSection = !hideGroups && onVisibilityChange != null;\r\n  const showCustom = !hideCustomLayers && (customLayers?.length ?? 0) > 0;\r\n\r\n  if (!showRender && !showGroupsSection && !showCustom) return null;\r\n\r\n  const cnt = (n: number | undefined) =>\r\n    typeof n === \"number\" ? ` (${n})` : \"\";\r\n\r\n  return (\r\n    <div\r\n      data-testid=\"zendir-layer-control\"\r\n      style={{\r\n        position: \"absolute\",\r\n        zIndex: 2,\r\n        display: \"flex\",\r\n        flexDirection: \"column\",\r\n        gap: 6,\r\n        padding: tokens.spacing.sm,\r\n        borderRadius: tokens.borderRadius?.md ?? 6,\r\n        border: \"1px solid rgba(255,255,255,0.12)\",\r\n        background: \"rgba(0,0,0,0.72)\",\r\n        color: tokens.colors.text.primary,\r\n        fontSize: tokens.typography.fontSize.xs,\r\n        lineHeight: 1.2,\r\n        ...anchor,\r\n        ...style,\r\n      }}\r\n    >\r\n      {showRender && (\r\n        <Section title=\"Render\">\r\n          <Toggle\r\n            label=\"Orbits\"\r\n            active={showOrbits}\r\n            onClick={() => toggleLayer(\"orbits\")}\r\n          />\r\n          <Toggle\r\n            label=\"Labels\"\r\n            active={showLabels}\r\n            onClick={() => toggleLayer(\"labels\")}\r\n          />\r\n          <Toggle\r\n            label=\"Coverage\"\r\n            active={showCoverage}\r\n            onClick={() => toggleLayer(\"coverage\")}\r\n          />\r\n        </Section>\r\n      )}\r\n\r\n      {showGroupsSection && (\r\n        <Section title=\"Objects\">\r\n          <Toggle\r\n            label={`Spacecraft${cnt(groupCounts?.spacecraft)}`}\r\n            active={showSpacecraft}\r\n            onClick={() => toggleVisibility(\"spacecraft\")}\r\n          />\r\n          <Toggle\r\n            label={`Ground Stations${cnt(groupCounts?.groundStations)}`}\r\n            active={showGroundStations}\r\n            onClick={() => toggleVisibility(\"groundStations\")}\r\n          />\r\n          <Toggle\r\n            label={`Celestial${cnt(groupCounts?.celestialBodies)}`}\r\n            active={showCelestialBodies}\r\n            onClick={() => toggleVisibility(\"celestialBodies\")}\r\n          />\r\n        </Section>\r\n      )}\r\n\r\n      {showCustom && (\r\n        <Section title=\"Overlays\">\r\n          {(customLayers ?? []).map((layer) => (\r\n            <Toggle\r\n              key={layer.id}\r\n              label={layer.label}\r\n              active={\r\n                customLayerState?.[layer.id] ?? layer.defaultEnabled ?? false\r\n              }\r\n              onClick={() => {\r\n                const current =\r\n                  customLayerState?.[layer.id] ?? layer.defaultEnabled ?? false;\r\n                onCustomLayerChange?.(layer.id, !current);\r\n              }}\r\n            />\r\n          ))}\r\n        </Section>\r\n      )}\r\n    </div>\r\n  );\r\n});\r\n\r\n// ─── Sub-components ───────────────────────────────────────────────────────────\r\n\r\nconst Section = ({\r\n  title,\r\n  children,\r\n}: {\r\n  title: string;\r\n  children: ReactNode;\r\n}) => {\r\n  const tokens = useThemeTokens();\r\n  return (\r\n    <div style={{ display: \"flex\", flexDirection: \"column\", gap: 4 }}>\r\n      <div\r\n        style={{\r\n          opacity: 0.6,\r\n          fontSize: \"0.85em\",\r\n          textTransform: \"uppercase\",\r\n          letterSpacing: 0.5,\r\n          color: tokens.colors.text.secondary,\r\n        }}\r\n      >\r\n        {title}\r\n      </div>\r\n      <div style={{ display: \"flex\", flexDirection: \"column\", gap: 4 }}>\r\n        {children}\r\n      </div>\r\n    </div>\r\n  );\r\n};\r\n\r\nconst Toggle = ({\r\n  label,\r\n  active,\r\n  onClick,\r\n}: {\r\n  label: string;\r\n  active: boolean;\r\n  onClick: () => void;\r\n}) => {\r\n  const tokens = useThemeTokens();\r\n  return (\r\n    <button\r\n      type=\"button\"\r\n      onClick={onClick}\r\n      aria-pressed={active}\r\n      style={{\r\n        padding: `${tokens.spacing.xs}px ${tokens.spacing.sm}px`,\r\n        borderRadius: tokens.borderRadius?.sm ?? 4,\r\n        background: active ? \"rgba(100,200,255,0.2)\" : \"rgba(0,0,0,0.6)\",\r\n        border: `1px solid ${active ? \"rgba(100,200,255,0.6)\" : \"rgba(255,255,255,0.15)\"}`,\r\n        color: active ? \"rgba(100,200,255,1)\" : tokens.colors.text.secondary,\r\n        fontSize: tokens.typography.fontSize.xs,\r\n        cursor: \"pointer\",\r\n        letterSpacing: 0.3,\r\n        textAlign: \"left\",\r\n      }}\r\n    >\r\n      {label}\r\n    </button>\r\n  );\r\n};\r\n\r\nexport default LayerControlPanel;\r\n"],"mappings":"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"}

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

@@ -1,7 +1,6 @@
 import { CSSProperties, ReactNode } from 'react';
 import { SimulationSceneObject, StructureDiag, PositionTickDiag } from '../hooks/useSimulationScene';
-
-export type ObjectInventoryKind = SimulationSceneObject['kind'];
+export type ObjectInventoryKind = SimulationSceneObject["kind"];
 export interface ObjectInventoryPanelProps {
     /** Objects to list. Typically `useSimulationScene().objects`. */
     objects: SimulationSceneObject[];
@@ -11,7 +10,7 @@ export interface ObjectInventoryPanelProps {
     /** 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';
+    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;