@zendir/ui 0.5.0 → 0.6.1

package/dist/react/core/widgets/Capture.js

@@ -1,804 +1,990 @@
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { memo, forwardRef, useState, useRef, useEffect, useCallback, useImperativeHandle } from "react";
 import { useTheme } from "../../theme/ThemeProvider.js";
 import { useCopyToClipboard } from "../display/CopyButton.js";
-import placeholderImageUrl from "./capture-placeholder.png.js";
+import capture_placeholder_default from "./capture-placeholder.png.js";
+import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/react/core/widgets/Capture.tsx
+/**
+* @zendir/ui - Capture Component
+*
+* Transport-agnostic image capture server component. Generates a unique server
+* ID, accepts capture requests imperatively, and returns image bytes. The host
+* app (e.g. space-range-operator) handles all MQTT/transport wiring and uses
+* the server ID to construct topic paths externally.
+*
+* Features:
+* - Unique server ID with copy-to-clipboard
+* - Pause/resume capture processing
+* - Collapsible gallery of captured images
+* - Connection status display
+* - forwardRef with imperative CaptureHandle
+*
+* @example
+* ```tsx
+* const captureRef = useRef<CaptureHandle>(null);
+*
+* <Capture
+*   ref={captureRef}
+*   connected={isConnected}
+*   onReady={(serverId) => {
+*     mqttClient.subscribe('Zendir/SpaceImage/Request');
+*   }}
+*   onCapture={(req) => console.log('Captured', req.req_id)}
+* />
+*
+* // When a request arrives from external transport:
+* // Request: { req_id, args: { game_id, team_id, ...captureArgs } }
+* const imageBytes = await captureRef.current.capture(request);
+* // Publish response to: Zendir/SpaceImage/{game_id}/{team_id}/Response/{req_id}
+* ```
+*/
+/**
+* Generates a visible 256x256 fallback PNG via canvas when the bundled
+* astronaut image cannot be fetched (Storybook asset path, SSR, etc.).
+* Shows a branded "ZENDIR" placeholder so thumbnails are never invisible.
+*/
 async function generateCanvasFallback() {
-  try {
-    const size = 256;
-    const canvas = document.createElement("canvas");
-    canvas.width = size;
-    canvas.height = size;
-    const ctx = canvas.getContext("2d");
-    const bg = ctx.createRadialGradient(size / 2, size / 2, 20, size / 2, size / 2, size);
-    bg.addColorStop(0, "#1e2a4a");
-    bg.addColorStop(1, "#0a0e1a");
-    ctx.fillStyle = bg;
-    ctx.fillRect(0, 0, size, size);
-    ctx.fillStyle = "rgba(255, 255, 255, 0.5)";
-    for (let i = 0; i < 40; i++) {
-      const sx = (i * 97 + 31) % size;
-      const sy = (i * 61 + 17) % size;
-      const sr = (i % 3 + 1) * 0.6;
-      ctx.beginPath();
-      ctx.arc(sx, sy, sr, 0, Math.PI * 2);
-      ctx.fill();
-    }
-    ctx.strokeStyle = "rgba(74, 143, 255, 0.35)";
-    ctx.lineWidth = 1;
-    ctx.beginPath();
-    ctx.moveTo(size / 2, 40);
-    ctx.lineTo(size / 2, size - 40);
-    ctx.moveTo(40, size / 2);
-    ctx.lineTo(size - 40, size / 2);
-    ctx.stroke();
-    ctx.beginPath();
-    ctx.arc(size / 2, size / 2, 50, 0, Math.PI * 2);
-    ctx.stroke();
-    ctx.fillStyle = "#4a8fff";
-    ctx.font = "bold 28px monospace";
-    ctx.textAlign = "center";
-    ctx.textBaseline = "middle";
-    ctx.fillText("ZENDIR", size / 2, size / 2 - 16);
-    ctx.fillStyle = "rgba(255, 255, 255, 0.4)";
-    ctx.font = "13px monospace";
-    ctx.fillText("PLACEHOLDER", size / 2, size / 2 + 14);
-    ctx.fillStyle = "rgba(255, 255, 255, 0.25)";
-    ctx.font = "10px monospace";
-    ctx.fillText(`${size}x${size}`, size / 2, size - 20);
-    const blob = await new Promise(
-      (resolve) => canvas.toBlob((b) => resolve(b), "image/png")
-    );
-    return new Uint8Array(await blob.arrayBuffer());
-  } catch {
-    return new Uint8Array([
-      137,
-      80,
-      78,
-      71,
-      13,
-      10,
-      26,
-      10,
-      0,
-      0,
-      0,
-      13,
-      73,
-      72,
-      68,
-      82,
-      0,
-      0,
-      0,
-      1,
-      0,
-      0,
-      0,
-      1,
-      8,
-      2,
-      0,
-      0,
-      0,
-      144,
-      119,
-      83,
-      222,
-      0,
-      0,
-      0,
-      12,
-      73,
-      68,
-      65,
-      84,
-      120,
-      156,
-      98,
-      104,
-      96,
-      96,
-      0,
-      0,
-      0,
-      4,
-      0,
-      1,
-      39,
-      52,
-      39,
-      10,
-      0,
-      0,
-      0,
-      0,
-      73,
-      69,
-      78,
-      68,
-      174,
-      66,
-      96,
-      130
-    ]);
-  }
+	try {
+		const size = 256;
+		const canvas = document.createElement("canvas");
+		canvas.width = size;
+		canvas.height = size;
+		const ctx = canvas.getContext("2d");
+		const bg = ctx.createRadialGradient(size / 2, size / 2, 20, size / 2, size / 2, size);
+		bg.addColorStop(0, "#1e2a4a");
+		bg.addColorStop(1, "#0a0e1a");
+		ctx.fillStyle = bg;
+		ctx.fillRect(0, 0, size, size);
+		ctx.fillStyle = "rgba(255, 255, 255, 0.5)";
+		for (let i = 0; i < 40; i++) {
+			const sx = (i * 97 + 31) % size;
+			const sy = (i * 61 + 17) % size;
+			const sr = (i % 3 + 1) * .6;
+			ctx.beginPath();
+			ctx.arc(sx, sy, sr, 0, Math.PI * 2);
+			ctx.fill();
+		}
+		ctx.strokeStyle = "rgba(74, 143, 255, 0.35)";
+		ctx.lineWidth = 1;
+		ctx.beginPath();
+		ctx.moveTo(size / 2, 40);
+		ctx.lineTo(size / 2, size - 40);
+		ctx.moveTo(40, size / 2);
+		ctx.lineTo(size - 40, size / 2);
+		ctx.stroke();
+		ctx.beginPath();
+		ctx.arc(size / 2, size / 2, 50, 0, Math.PI * 2);
+		ctx.stroke();
+		ctx.fillStyle = "#4a8fff";
+		ctx.font = "bold 28px monospace";
+		ctx.textAlign = "center";
+		ctx.textBaseline = "middle";
+		ctx.fillText("ZENDIR", size / 2, size / 2 - 16);
+		ctx.fillStyle = "rgba(255, 255, 255, 0.4)";
+		ctx.font = "13px monospace";
+		ctx.fillText("PLACEHOLDER", size / 2, 142);
+		ctx.fillStyle = "rgba(255, 255, 255, 0.25)";
+		ctx.font = "10px monospace";
+		ctx.fillText(`${size}x${size}`, size / 2, size - 20);
+		const blob = await new Promise((resolve) => canvas.toBlob((b) => resolve(b), "image/png"));
+		return new Uint8Array(await blob.arrayBuffer());
+	} catch {
+		return new Uint8Array([
+			137,
+			80,
+			78,
+			71,
+			13,
+			10,
+			26,
+			10,
+			0,
+			0,
+			0,
+			13,
+			73,
+			72,
+			68,
+			82,
+			0,
+			0,
+			0,
+			1,
+			0,
+			0,
+			0,
+			1,
+			8,
+			2,
+			0,
+			0,
+			0,
+			144,
+			119,
+			83,
+			222,
+			0,
+			0,
+			0,
+			12,
+			73,
+			68,
+			65,
+			84,
+			120,
+			156,
+			98,
+			104,
+			96,
+			96,
+			0,
+			0,
+			0,
+			4,
+			0,
+			1,
+			39,
+			52,
+			39,
+			10,
+			0,
+			0,
+			0,
+			0,
+			73,
+			69,
+			78,
+			68,
+			174,
+			66,
+			96,
+			130
+		]);
+	}
 }
-let placeholderCache = null;
+/** Cached placeholder image bytes (lazy-loaded from bundled asset) */
+var placeholderCache = null;
+/**
+* Loads the bundled placeholder image (astronaut). Falls back to a
+* canvas-generated branded placeholder if the fetch fails (e.g. SSR,
+* Storybook asset paths, missing file).
+*/
 async function loadPlaceholderImage() {
-  if (placeholderCache) return placeholderCache;
-  try {
-    const response = await fetch(placeholderImageUrl);
-    if (!response.ok) throw new Error(`HTTP ${response.status}`);
-    const buf = await response.arrayBuffer();
-    if (buf.byteLength < 100) throw new Error("Suspiciously small image");
-    placeholderCache = new Uint8Array(buf);
-  } catch {
-    placeholderCache = await generateCanvasFallback();
-  }
-  return placeholderCache;
+	if (placeholderCache) return placeholderCache;
+	try {
+		const response = await fetch(capture_placeholder_default);
+		if (!response.ok) throw new Error(`HTTP ${response.status}`);
+		const buf = await response.arrayBuffer();
+		if (buf.byteLength < 100) throw new Error("Suspiciously small image");
+		placeholderCache = new Uint8Array(buf);
+	} catch {
+		placeholderCache = await generateCanvasFallback();
+	}
+	return placeholderCache;
 }
+/**
+* Bundled astronaut placeholder PNG (or 1x1 fallback). Exported for
+* `CesiumCaptureSource` when globe capture fails (e.g. missing Cesium assets, WebGL).
+*/
 async function loadCapturePlaceholderImage() {
-  return loadPlaceholderImage();
+	return loadPlaceholderImage();
 }
+/**
+* Hook for capture server logic. Generates a stable UUID, manages
+* pause state, and processes capture requests into image bytes.
+*
+* @example
+* ```tsx
+* const { serverId, capture, paused, setPaused } = useCapture();
+* // call capture(request) when external message arrives
+* ```
+*/
 function useCapture(options) {
-  const serverIdRef = useRef((options == null ? void 0 : options.serverId) || crypto.randomUUID());
-  const [paused, setPaused] = useState(false);
-  const [requestCount, setRequestCount] = useState(0);
-  const [lastRequest, setLastRequest] = useState(null);
-  const [capturedImages, setCapturedImages] = useState([]);
-  const imageSourceRef = useRef(options == null ? void 0 : options.imageSource);
-  imageSourceRef.current = options == null ? void 0 : options.imageSource;
-  const pausedRef = useRef(paused);
-  pausedRef.current = paused;
-  const imageCacheRef = useRef(/* @__PURE__ */ new Map());
-  const cesiumSourceRef = useRef(null);
-  const cesiumFailedRef = useRef(false);
-  const cesiumLoadingRef = useRef(null);
-  const initCesium = useCallback(async () => {
-    if (cesiumSourceRef.current || cesiumFailedRef.current) return;
-    try {
-      const { createCesiumCaptureSource } = await import("../../3d/CesiumCaptureSource.js");
-      cesiumSourceRef.current = await createCesiumCaptureSource();
-    } catch {
-      cesiumFailedRef.current = true;
-    }
-  }, []);
-  const preload = (options == null ? void 0 : options.preload) !== false;
-  useEffect(() => {
-    if (imageSourceRef.current || !preload) return;
-    cesiumLoadingRef.current = initCesium();
-  }, [preload, initCesium]);
-  useEffect(() => {
-    return () => {
-      var _a;
-      (_a = cesiumSourceRef.current) == null ? void 0 : _a.destroy();
-      cesiumSourceRef.current = null;
-    };
-  }, []);
-  const capture = useCallback(async (request) => {
-    if (pausedRef.current) return new Uint8Array(0);
-    if (!request || request.type !== "capture" || typeof request.req_id !== "number") {
-      return new Uint8Array(0);
-    }
-    const cached = imageCacheRef.current.get(request.req_id);
-    if (cached) return cached;
-    let bytes;
-    const src = imageSourceRef.current;
-    if (src instanceof Uint8Array) {
-      bytes = src;
-    } else if (typeof src === "function") {
-      bytes = await src(request.args);
-    } else {
-      if (!cesiumSourceRef.current && !cesiumFailedRef.current) {
-        if (cesiumLoadingRef.current) {
-          await cesiumLoadingRef.current;
-        } else {
-          await initCesium();
-        }
-      }
-      if (cesiumSourceRef.current) {
-        bytes = await cesiumSourceRef.current.capture(request.args);
-      } else {
-        bytes = await loadPlaceholderImage();
-      }
-    }
-    imageCacheRef.current.set(request.req_id, bytes);
-    setRequestCount((c) => c + 1);
-    setLastRequest(request);
-    const mimeType = request.args.format === "jpeg" ? "image/jpeg" : "image/png";
-    const blob = new Blob([bytes], { type: mimeType });
-    const dataUrl = URL.createObjectURL(blob);
-    setCapturedImages((prev) => [
-      { reqId: request.req_id, dataUrl, timestamp: Date.now(), bytes: bytes.length, args: request.args },
-      ...prev
-    ]);
-    return bytes;
-  }, []);
-  return {
-    serverId: serverIdRef.current,
-    capture,
-    paused,
-    setPaused,
-    requestCount,
-    lastRequest,
-    capturedImages
-  };
+	const serverIdRef = useRef(options?.serverId || crypto.randomUUID());
+	const [paused, setPaused] = useState(false);
+	const [requestCount, setRequestCount] = useState(0);
+	const [lastRequest, setLastRequest] = useState(null);
+	const [capturedImages, setCapturedImages] = useState([]);
+	const imageSourceRef = useRef(options?.imageSource);
+	imageSourceRef.current = options?.imageSource;
+	const pausedRef = useRef(paused);
+	pausedRef.current = paused;
+	const imageCacheRef = useRef(/* @__PURE__ */ new Map());
+	const cesiumSourceRef = useRef(null);
+	const cesiumFailedRef = useRef(false);
+	const cesiumLoadingRef = useRef(null);
+	const initCesium = useCallback(async () => {
+		if (cesiumSourceRef.current || cesiumFailedRef.current) return;
+		try {
+			const { createCesiumCaptureSource } = await import("../../3d/CesiumCaptureSource.js");
+			cesiumSourceRef.current = await createCesiumCaptureSource();
+		} catch {
+			cesiumFailedRef.current = true;
+		}
+	}, []);
+	const preload = options?.preload !== false;
+	useEffect(() => {
+		if (imageSourceRef.current || !preload) return;
+		cesiumLoadingRef.current = initCesium();
+	}, [preload, initCesium]);
+	useEffect(() => {
+		return () => {
+			cesiumSourceRef.current?.destroy();
+			cesiumSourceRef.current = null;
+		};
+	}, []);
+	const capture = useCallback(async (request) => {
+		if (pausedRef.current) return /* @__PURE__ */ new Uint8Array(0);
+		if (!request || request.type !== "capture" || typeof request.req_id !== "number") return /* @__PURE__ */ new Uint8Array(0);
+		const cached = imageCacheRef.current.get(request.req_id);
+		if (cached) return cached;
+		let bytes;
+		const src = imageSourceRef.current;
+		if (src instanceof Uint8Array) bytes = src;
+		else if (typeof src === "function") bytes = await src(request.args);
+		else {
+			if (!cesiumSourceRef.current && !cesiumFailedRef.current) if (cesiumLoadingRef.current) await cesiumLoadingRef.current;
+			else await initCesium();
+			if (cesiumSourceRef.current) bytes = await cesiumSourceRef.current.capture(request.args);
+			else bytes = await loadPlaceholderImage();
+		}
+		imageCacheRef.current.set(request.req_id, bytes);
+		setRequestCount((c) => c + 1);
+		setLastRequest(request);
+		const mimeType = request.args.format === "jpeg" ? "image/jpeg" : "image/png";
+		const blob = new Blob([bytes], { type: mimeType });
+		const dataUrl = URL.createObjectURL(blob);
+		setCapturedImages((prev) => [{
+			reqId: request.req_id,
+			dataUrl,
+			timestamp: Date.now(),
+			bytes: bytes.length,
+			args: request.args
+		}, ...prev]);
+		return bytes;
+	}, []);
+	return {
+		serverId: serverIdRef.current,
+		capture,
+		paused,
+		setPaused,
+		requestCount,
+		lastRequest,
+		capturedImages
+	};
 }
-const PauseIcon = ({ size = 14 }) => /* @__PURE__ */ jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "currentColor", children: [
-  /* @__PURE__ */ jsx("rect", { x: "6", y: "4", width: "4", height: "16", rx: "1" }),
-  /* @__PURE__ */ jsx("rect", { x: "14", y: "4", width: "4", height: "16", rx: "1" })
-] });
-const PlayIcon = ({ size = 14 }) => /* @__PURE__ */ jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("polygon", { points: "6,4 20,12 6,20" }) });
-const ChevronIcon = ({ size = 14, expanded }) => /* @__PURE__ */ jsx(
-  "svg",
-  {
-    width: size,
-    height: size,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: "2",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    style: {
-      transition: "transform 0.2s ease",
-      transform: expanded ? "rotate(90deg)" : "rotate(0deg)"
-    },
-    children: /* @__PURE__ */ jsx("polyline", { points: "9 18 15 12 9 6" })
-  }
-);
-const CopyIcon = ({ size = 14 }) => /* @__PURE__ */ jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-  /* @__PURE__ */ jsx("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }),
-  /* @__PURE__ */ jsx("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })
-] });
-const CheckIcon = ({ size = 14, color }) => /* @__PURE__ */ jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" }) });
-const Capture = memo(forwardRef(function Capture2({
-  connected = false,
-  imageSource,
-  preload,
-  serverId: serverIdProp,
-  onCapture,
-  onReady,
-  defaultGalleryExpanded = false,
-  style
-}, ref) {
-  const { tokens } = useTheme();
-  const {
-    serverId,
-    capture,
-    paused,
-    setPaused,
-    requestCount,
-    capturedImages
-  } = useCapture({ imageSource, preload, serverId: serverIdProp });
-  const { copy, copied } = useCopyToClipboard();
-  const [galleryExpanded, setGalleryExpanded] = useState(defaultGalleryExpanded);
-  const [hoveredBtn, setHoveredBtn] = useState(null);
-  const readyFiredRef = useRef(false);
-  useEffect(() => {
-    if (onReady && !readyFiredRef.current) {
-      readyFiredRef.current = true;
-      onReady(serverId);
-    }
-  }, [onReady, serverId]);
-  const wrappedCapture = useCallback(async (request) => {
-    const bytes = await capture(request);
-    if (bytes.length > 0) {
-      onCapture == null ? void 0 : onCapture(request);
-    }
-    return bytes;
-  }, [capture, onCapture]);
-  useImperativeHandle(ref, () => ({
-    capture: wrappedCapture,
-    serverId
-  }), [wrappedCapture, serverId]);
-  const statusColor = connected ? tokens.colors.status.normal : tokens.colors.status.off;
-  const statusLabel = connected ? "Connected" : "Disconnected";
-  const btnBase = {
-    display: "inline-flex",
-    alignItems: "center",
-    justifyContent: "center",
-    gap: "6px",
-    height: 32,
-    padding: "0 12px",
-    fontSize: tokens.typography.fontSize.sm,
-    fontWeight: 500,
-    fontFamily: tokens.typography.fontFamily.primary,
-    color: tokens.colors.text.secondary,
-    backgroundColor: "transparent",
-    border: `1px solid ${tokens.colors.border.muted}`,
-    borderRadius: tokens.borderRadius.md,
-    cursor: "pointer",
-    transition: tokens.animation.fast,
-    outline: "none",
-    whiteSpace: "nowrap"
-  };
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      style: {
-        display: "flex",
-        flexDirection: "column",
-        borderRadius: tokens.borderRadius.lg,
-        border: `1px solid ${tokens.colors.border.default}`,
-        backgroundColor: tokens.colors.background.surface,
-        overflow: "hidden",
-        /* When gallery is expanded, allow container to stretch to fill parent */
-        ...galleryExpanded ? { flex: 1, minHeight: 0 } : {},
-        ...style
-      },
-      children: [
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "space-between",
-              padding: "8px 12px",
-              gap: "12px",
-              minHeight: 48,
-              flexShrink: 0
-            },
-            children: [
-              /* @__PURE__ */ jsxs(
-                "button",
-                {
-                  type: "button",
-                  onClick: () => setPaused(!paused),
-                  onMouseEnter: () => setHoveredBtn("pause"),
-                  onMouseLeave: () => setHoveredBtn(null),
-                  "aria-label": paused ? "Resume capture server" : "Pause capture server",
-                  style: {
-                    ...btnBase,
-                    color: paused ? tokens.colors.status.caution : tokens.colors.text.secondary,
-                    borderColor: paused ? `${tokens.colors.status.caution}40` : tokens.colors.border.muted,
-                    backgroundColor: hoveredBtn === "pause" ? `${tokens.colors.accent.primary}12` : "transparent"
-                  },
-                  children: [
-                    paused ? /* @__PURE__ */ jsx(PlayIcon, {}) : /* @__PURE__ */ jsx(PauseIcon, {}),
-                    /* @__PURE__ */ jsx("span", { children: paused ? "Resume" : "Pause" })
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  style: {
-                    display: "flex",
-                    alignItems: "center",
-                    gap: "8px",
-                    fontSize: tokens.typography.fontSize.sm,
-                    color: tokens.colors.text.secondary
-                  },
-                  children: [
-                    /* @__PURE__ */ jsx(
-                      "span",
-                      {
-                        style: {
-                          width: 8,
-                          height: 8,
-                          borderRadius: "50%",
-                          backgroundColor: statusColor,
-                          flexShrink: 0
-                        }
-                      }
-                    ),
-                    /* @__PURE__ */ jsx("span", { children: statusLabel }),
-                    requestCount > 0 && /* @__PURE__ */ jsxs(
-                      "span",
-                      {
-                        style: {
-                          fontSize: tokens.typography.fontSize.xs,
-                          color: tokens.colors.text.tertiary,
-                          fontFamily: tokens.typography.fontFamily.mono
-                        },
-                        children: [
-                          "(",
-                          requestCount,
-                          ")"
-                        ]
-                      }
-                    )
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsxs(
-                "button",
-                {
-                  type: "button",
-                  onClick: () => copy(serverId),
-                  onMouseEnter: () => setHoveredBtn("copy"),
-                  onMouseLeave: () => setHoveredBtn(null),
-                  title: copied ? "Copied!" : `Copy Server ID: ${serverId}`,
-                  "aria-label": copied ? "Server ID copied" : "Copy server ID",
-                  style: {
-                    ...btnBase,
-                    color: copied ? tokens.colors.status.normal : tokens.colors.text.secondary,
-                    borderColor: copied ? `${tokens.colors.status.normal}40` : tokens.colors.border.muted,
-                    backgroundColor: hoveredBtn === "copy" ? `${tokens.colors.accent.primary}12` : "transparent"
-                  },
-                  children: [
-                    copied ? /* @__PURE__ */ jsx(CheckIcon, { color: tokens.colors.status.normal }) : /* @__PURE__ */ jsx(CopyIcon, {}),
-                    /* @__PURE__ */ jsx(
-                      "span",
-                      {
-                        style: {
-                          fontFamily: tokens.typography.fontFamily.mono,
-                          fontSize: tokens.typography.fontSize.xs
-                        },
-                        children: copied ? "Copied!" : serverId.slice(0, 8)
-                      }
-                    )
-                  ]
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          CaptureGallery,
-          {
-            images: capturedImages,
-            expanded: galleryExpanded,
-            onToggle: () => setGalleryExpanded(!galleryExpanded),
-            tokens,
-            serverId
-          }
-        )
-      ]
-    }
-  );
+var PauseIcon = ({ size = 14 }) => /* @__PURE__ */ jsxs("svg", {
+	width: size,
+	height: size,
+	viewBox: "0 0 24 24",
+	fill: "currentColor",
+	children: [/* @__PURE__ */ jsx("rect", {
+		x: "6",
+		y: "4",
+		width: "4",
+		height: "16",
+		rx: "1"
+	}), /* @__PURE__ */ jsx("rect", {
+		x: "14",
+		y: "4",
+		width: "4",
+		height: "16",
+		rx: "1"
+	})]
+});
+var PlayIcon = ({ size = 14 }) => /* @__PURE__ */ jsx("svg", {
+	width: size,
+	height: size,
+	viewBox: "0 0 24 24",
+	fill: "currentColor",
+	children: /* @__PURE__ */ jsx("polygon", { points: "6,4 20,12 6,20" })
+});
+var ChevronIcon = ({ size = 14, expanded }) => /* @__PURE__ */ jsx("svg", {
+	width: size,
+	height: size,
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	style: {
+		transition: "transform 0.2s ease",
+		transform: expanded ? "rotate(90deg)" : "rotate(0deg)"
+	},
+	children: /* @__PURE__ */ jsx("polyline", { points: "9 18 15 12 9 6" })
+});
+var CopyIcon = ({ size = 14 }) => /* @__PURE__ */ jsxs("svg", {
+	width: size,
+	height: size,
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	children: [/* @__PURE__ */ jsx("rect", {
+		x: "9",
+		y: "9",
+		width: "13",
+		height: "13",
+		rx: "2",
+		ry: "2"
+	}), /* @__PURE__ */ jsx("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })]
+});
+var CheckIcon = ({ size = 14, color }) => /* @__PURE__ */ jsx("svg", {
+	width: size,
+	height: size,
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: color,
+	strokeWidth: "2.5",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" })
+});
+/**
+* Capture server UI component. Displays server status, pause/resume control,
+* copy-ID button, and a collapsible gallery of captured images.
+*
+* Access `capture()` and `serverId` imperatively via the forwarded ref.
+*/
+var Capture = memo(forwardRef(function Capture({ connected = false, imageSource, preload, serverId: serverIdProp, onCapture, onReady, defaultGalleryExpanded = false, style }, ref) {
+	const { tokens } = useTheme();
+	const { serverId, capture, paused, setPaused, requestCount, capturedImages } = useCapture({
+		imageSource,
+		preload,
+		serverId: serverIdProp
+	});
+	const { copy, copied } = useCopyToClipboard();
+	const [galleryExpanded, setGalleryExpanded] = useState(defaultGalleryExpanded);
+	const [hoveredBtn, setHoveredBtn] = useState(null);
+	const readyFiredRef = useRef(false);
+	useEffect(() => {
+		if (onReady && !readyFiredRef.current) {
+			readyFiredRef.current = true;
+			onReady(serverId);
+		}
+	}, [onReady, serverId]);
+	const wrappedCapture = useCallback(async (request) => {
+		const bytes = await capture(request);
+		if (bytes.length > 0) onCapture?.(request);
+		return bytes;
+	}, [capture, onCapture]);
+	useImperativeHandle(ref, () => ({
+		capture: wrappedCapture,
+		serverId
+	}), [wrappedCapture, serverId]);
+	const statusColor = connected ? tokens.colors.status.normal : tokens.colors.status.off;
+	const statusLabel = connected ? "Connected" : "Disconnected";
+	const btnBase = {
+		display: "inline-flex",
+		alignItems: "center",
+		justifyContent: "center",
+		gap: "6px",
+		height: 32,
+		padding: "0 12px",
+		fontSize: tokens.typography.fontSize.sm,
+		fontWeight: 500,
+		fontFamily: tokens.typography.fontFamily.primary,
+		color: tokens.colors.text.secondary,
+		backgroundColor: "transparent",
+		border: `1px solid ${tokens.colors.border.muted}`,
+		borderRadius: tokens.borderRadius.md,
+		cursor: "pointer",
+		transition: tokens.animation.fast,
+		outline: "none",
+		whiteSpace: "nowrap"
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			borderRadius: tokens.borderRadius.lg,
+			border: `1px solid ${tokens.colors.border.default}`,
+			backgroundColor: tokens.colors.background.surface,
+			overflow: "hidden",
+			...galleryExpanded ? {
+				flex: 1,
+				minHeight: 0
+			} : {},
+			...style
+		},
+		children: [/* @__PURE__ */ jsxs("div", {
+			style: {
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "space-between",
+				padding: "8px 12px",
+				gap: "12px",
+				minHeight: 48,
+				flexShrink: 0
+			},
+			children: [
+				/* @__PURE__ */ jsxs("button", {
+					type: "button",
+					onClick: () => setPaused(!paused),
+					onMouseEnter: () => setHoveredBtn("pause"),
+					onMouseLeave: () => setHoveredBtn(null),
+					"aria-label": paused ? "Resume capture server" : "Pause capture server",
+					style: {
+						...btnBase,
+						color: paused ? tokens.colors.status.caution : tokens.colors.text.secondary,
+						borderColor: paused ? `${tokens.colors.status.caution}40` : tokens.colors.border.muted,
+						backgroundColor: hoveredBtn === "pause" ? `${tokens.colors.accent.primary}12` : "transparent"
+					},
+					children: [paused ? /* @__PURE__ */ jsx(PlayIcon, {}) : /* @__PURE__ */ jsx(PauseIcon, {}), /* @__PURE__ */ jsx("span", { children: paused ? "Resume" : "Pause" })]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					style: {
+						display: "flex",
+						alignItems: "center",
+						gap: "8px",
+						fontSize: tokens.typography.fontSize.sm,
+						color: tokens.colors.text.secondary
+					},
+					children: [
+						/* @__PURE__ */ jsx("span", { style: {
+							width: 8,
+							height: 8,
+							borderRadius: "50%",
+							backgroundColor: statusColor,
+							flexShrink: 0
+						} }),
+						/* @__PURE__ */ jsx("span", { children: statusLabel }),
+						requestCount > 0 && /* @__PURE__ */ jsxs("span", {
+							style: {
+								fontSize: tokens.typography.fontSize.xs,
+								color: tokens.colors.text.tertiary,
+								fontFamily: tokens.typography.fontFamily.mono
+							},
+							children: [
+								"(",
+								requestCount,
+								")"
+							]
+						})
+					]
+				}),
+				/* @__PURE__ */ jsxs("button", {
+					type: "button",
+					onClick: () => copy(serverId),
+					onMouseEnter: () => setHoveredBtn("copy"),
+					onMouseLeave: () => setHoveredBtn(null),
+					title: copied ? "Copied!" : `Copy Server ID: ${serverId}`,
+					"aria-label": copied ? "Server ID copied" : "Copy server ID",
+					style: {
+						...btnBase,
+						color: copied ? tokens.colors.status.normal : tokens.colors.text.secondary,
+						borderColor: copied ? `${tokens.colors.status.normal}40` : tokens.colors.border.muted,
+						backgroundColor: hoveredBtn === "copy" ? `${tokens.colors.accent.primary}12` : "transparent"
+					},
+					children: [copied ? /* @__PURE__ */ jsx(CheckIcon, { color: tokens.colors.status.normal }) : /* @__PURE__ */ jsx(CopyIcon, {}), /* @__PURE__ */ jsx("span", {
+						style: {
+							fontFamily: tokens.typography.fontFamily.mono,
+							fontSize: tokens.typography.fontSize.xs
+						},
+						children: copied ? "Copied!" : serverId.slice(0, 8)
+					})]
+				})
+			]
+		}), /* @__PURE__ */ jsx(CaptureGallery, {
+			images: capturedImages,
+			expanded: galleryExpanded,
+			onToggle: () => setGalleryExpanded(!galleryExpanded),
+			tokens,
+			serverId
+		})]
+	});
 }));
+/** Format byte count for display */
 function fmtBytes(b) {
-  if (b > 1048576) return `${(b / 1048576).toFixed(1)} MB`;
-  if (b > 1024) return `${(b / 1024).toFixed(1)} KB`;
-  return `${b} B`;
+	if (b > 1048576) return `${(b / 1048576).toFixed(1)} MB`;
+	if (b > 1024) return `${(b / 1024).toFixed(1)} KB`;
+	return `${b} B`;
 }
+/** Download a single captured image with the correct file extension */
 function downloadCapturedImage(img, serverId) {
-  var _a;
-  const ext = ((_a = img.args) == null ? void 0 : _a.format) === "jpeg" ? "jpg" : "png";
-  const a = document.createElement("a");
-  a.href = img.dataUrl;
-  a.download = `capture_${serverId}_${img.reqId}.${ext}`;
-  a.click();
+	const ext = img.args?.format === "jpeg" ? "jpg" : "png";
+	const a = document.createElement("a");
+	a.href = img.dataUrl;
+	a.download = `capture_${serverId}_${img.reqId}.${ext}`;
+	a.click();
 }
+/** Download all captured images sequentially */
 async function downloadAllImages(images, serverId) {
-  for (const img of images) {
-    downloadCapturedImage(img, serverId);
-    await new Promise((r) => setTimeout(r, 200));
-  }
+	for (const img of images) {
+		downloadCapturedImage(img, serverId);
+		await new Promise((r) => setTimeout(r, 200));
+	}
 }
-const DownloadIcon = ({ size = 12 }) => /* @__PURE__ */ jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
-  /* @__PURE__ */ jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
-  /* @__PURE__ */ jsx("polyline", { points: "7 10 12 15 17 10" }),
-  /* @__PURE__ */ jsx("line", { x1: "12", y1: "15", x2: "12", y2: "3" })
-] });
-const CloseIcon = ({ size = 12 }) => /* @__PURE__ */ jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", children: [
-  /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-  /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
-] });
+/** Download icon (inline SVG) */
+var DownloadIcon = ({ size = 12 }) => /* @__PURE__ */ jsxs("svg", {
+	width: size,
+	height: size,
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2.5",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	children: [
+		/* @__PURE__ */ jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+		/* @__PURE__ */ jsx("polyline", { points: "7 10 12 15 17 10" }),
+		/* @__PURE__ */ jsx("line", {
+			x1: "12",
+			y1: "15",
+			x2: "12",
+			y2: "3"
+		})
+	]
+});
+/** Close icon (inline SVG) */
+var CloseIcon = ({ size = 12 }) => /* @__PURE__ */ jsxs("svg", {
+	width: size,
+	height: size,
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2.5",
+	strokeLinecap: "round",
+	children: [/* @__PURE__ */ jsx("line", {
+		x1: "18",
+		y1: "6",
+		x2: "6",
+		y2: "18"
+	}), /* @__PURE__ */ jsx("line", {
+		x1: "6",
+		y1: "6",
+		x2: "18",
+		y2: "18"
+	})]
+});
+/** Metadata key-value row */
 function MetaRow({ label, value, tokens, mono }) {
-  return /* @__PURE__ */ jsxs("div", { style: {
-    display: "flex",
-    justifyContent: "space-between",
-    alignItems: "center",
-    padding: "2px 0",
-    fontSize: tokens.typography.fontSize.xs
-  }, children: [
-    /* @__PURE__ */ jsx("span", { style: { color: tokens.colors.text.tertiary }, children: label }),
-    /* @__PURE__ */ jsx("span", { style: {
-      color: tokens.colors.text.primary,
-      fontFamily: mono ? tokens.typography.fontFamily.mono : "inherit",
-      fontSize: mono ? "0.68rem" : tokens.typography.fontSize.xs
-    }, children: value })
-  ] });
+	return /* @__PURE__ */ jsxs("div", {
+		style: {
+			display: "flex",
+			justifyContent: "space-between",
+			alignItems: "center",
+			padding: "2px 0",
+			fontSize: tokens.typography.fontSize.xs
+		},
+		children: [/* @__PURE__ */ jsx("span", {
+			style: { color: tokens.colors.text.tertiary },
+			children: label
+		}), /* @__PURE__ */ jsx("span", {
+			style: {
+				color: tokens.colors.text.primary,
+				fontFamily: mono ? tokens.typography.fontFamily.mono : "inherit",
+				fontSize: mono ? "0.68rem" : tokens.typography.fontSize.xs
+			},
+			children: value
+		})]
+	});
 }
+/** Metadata group heading */
 function MetaGroup({ label, tokens, children }) {
-  return /* @__PURE__ */ jsxs("div", { style: { marginTop: 6 }, children: [
-    /* @__PURE__ */ jsx("div", { style: {
-      fontSize: "0.6rem",
-      fontWeight: 600,
-      color: tokens.colors.text.tertiary,
-      textTransform: "uppercase",
-      letterSpacing: "0.06em",
-      padding: "4px 0 2px",
-      borderTop: `1px solid ${tokens.colors.border.muted}`
-    }, children: label }),
-    children
-  ] });
+	return /* @__PURE__ */ jsxs("div", {
+		style: { marginTop: 6 },
+		children: [/* @__PURE__ */ jsx("div", {
+			style: {
+				fontSize: "0.6rem",
+				fontWeight: 600,
+				color: tokens.colors.text.tertiary,
+				textTransform: "uppercase",
+				letterSpacing: "0.06em",
+				padding: "4px 0 2px",
+				borderTop: `1px solid ${tokens.colors.border.muted}`
+			},
+			children: label
+		}), children]
+	});
 }
+/**
+* Image detail panel showing preview, metadata, camera settings, and position.
+* Displayed inline when a gallery thumbnail is clicked.
+*/
 function CaptureImageDetail({ img, tokens, serverId, onClose }) {
-  var _a, _b;
-  const a = img.args;
-  const time = new Date(img.timestamp).toLocaleString("en-US", {
-    hour12: false,
-    year: "numeric",
-    month: "short",
-    day: "numeric",
-    hour: "2-digit",
-    minute: "2-digit",
-    second: "2-digit"
-  });
-  return /* @__PURE__ */ jsxs("div", { style: {
-    backgroundColor: tokens.colors.background.elevated,
-    display: "flex",
-    gap: "8px",
-    padding: "8px",
-    minHeight: 0
-  }, children: [
-    /* @__PURE__ */ jsxs("div", { style: {
-      flex: "1 1 50%",
-      display: "flex",
-      flexDirection: "column",
-      gap: "6px",
-      minWidth: 0
-    }, children: [
-      /* @__PURE__ */ jsx(
-        "img",
-        {
-          src: img.dataUrl,
-          alt: `capture_${serverId}_${img.reqId}`,
-          style: {
-            width: "100%",
-            borderRadius: tokens.borderRadius.sm,
-            border: `1px solid ${tokens.colors.border.muted}`,
-            objectFit: "contain"
-          }
-        }
-      ),
-      /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "4px" }, children: [
-        /* @__PURE__ */ jsxs(
-          "button",
-          {
-            type: "button",
-            onClick: () => downloadCapturedImage(img, serverId),
-            style: {
-              flex: 1,
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              gap: "4px",
-              padding: "5px 0",
-              borderRadius: tokens.borderRadius.sm,
-              fontSize: tokens.typography.fontSize.xs,
-              fontWeight: 500,
-              fontFamily: tokens.typography.fontFamily.mono,
-              color: tokens.colors.accent.primary,
-              backgroundColor: `${tokens.colors.accent.primary}12`,
-              border: `1px solid ${tokens.colors.accent.primary}30`,
-              cursor: "pointer"
-            },
-            children: [
-              /* @__PURE__ */ jsx(DownloadIcon, {}),
-              " Download PNG"
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            onClick: onClose,
-            style: {
-              padding: "5px 8px",
-              borderRadius: tokens.borderRadius.sm,
-              fontSize: tokens.typography.fontSize.xs,
-              color: tokens.colors.text.tertiary,
-              backgroundColor: "transparent",
-              border: `1px solid ${tokens.colors.border.muted}`,
-              cursor: "pointer"
-            },
-            children: /* @__PURE__ */ jsx(CloseIcon, {})
-          }
-        )
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { style: {
-      flex: "1 1 50%",
-      overflowY: "auto",
-      minWidth: 0
-    }, children: [
-      /* @__PURE__ */ jsxs(MetaGroup, { label: "File Info", tokens, children: [
-        /* @__PURE__ */ jsx(MetaRow, { label: "Filename", value: `capture_${serverId}_${img.reqId}.${((_a = img.args) == null ? void 0 : _a.format) === "jpeg" ? "jpg" : "png"}`, tokens, mono: true }),
-        /* @__PURE__ */ jsx(MetaRow, { label: "Req ID", value: `#${img.reqId}`, tokens, mono: true }),
-        /* @__PURE__ */ jsx(MetaRow, { label: "Size", value: fmtBytes(img.bytes), tokens }),
-        /* @__PURE__ */ jsx(MetaRow, { label: "Format", value: ((_b = img.args) == null ? void 0 : _b.format) === "jpeg" ? `JPEG (q=${Math.round((img.args.jpeg_quality ?? 0.92) * 100)}%)` : "PNG", tokens }),
-        /* @__PURE__ */ jsx(MetaRow, { label: "Captured", value: time, tokens })
-      ] }),
-      a && /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsxs(MetaGroup, { label: "Camera", tokens, children: [
-          /* @__PURE__ */ jsx(MetaRow, { label: "Resolution", value: `${a.resolution}px`, tokens }),
-          /* @__PURE__ */ jsx(MetaRow, { label: "FOV", value: `${a.fov}°`, tokens }),
-          /* @__PURE__ */ jsx(MetaRow, { label: "Focal Length", value: `${a.focal_length}mm`, tokens }),
-          /* @__PURE__ */ jsx(MetaRow, { label: "Aperture", value: `f/${a.aperture}`, tokens }),
-          /* @__PURE__ */ jsx(MetaRow, { label: "CoC", value: `${a.coc}mm`, tokens }),
-          /* @__PURE__ */ jsx(MetaRow, { label: "Pixel Pitch", value: `${a.pixel_pitch}mm`, tokens }),
-          /* @__PURE__ */ jsx(MetaRow, { label: "Focus Dist", value: `${a.focusing_distance}m`, tokens }),
-          /* @__PURE__ */ jsx(MetaRow, { label: "Monochrome", value: a.monochromatic ? "Yes" : "No", tokens }),
-          /* @__PURE__ */ jsx(MetaRow, { label: "Sample", value: a.sample ? "Yes (½ res)" : "No", tokens })
-        ] }),
-        /* @__PURE__ */ jsxs(MetaGroup, { label: "Position & Orientation", tokens, children: [
-          /* @__PURE__ */ jsx(MetaRow, { label: "X", value: `${a.position[0].toFixed(2)} km`, tokens, mono: true }),
-          /* @__PURE__ */ jsx(MetaRow, { label: "Y", value: `${a.position[1].toFixed(2)} km`, tokens, mono: true }),
-          /* @__PURE__ */ jsx(MetaRow, { label: "Z", value: `${a.position[2].toFixed(2)} km`, tokens, mono: true }),
-          /* @__PURE__ */ jsx(MetaRow, { label: "Heading", value: `${a.rotation[0].toFixed(1)}°`, tokens, mono: true }),
-          /* @__PURE__ */ jsx(MetaRow, { label: "Pitch", value: `${a.rotation[1].toFixed(1)}°`, tokens, mono: true }),
-          /* @__PURE__ */ jsx(MetaRow, { label: "Roll", value: `${a.rotation[2].toFixed(1)}°`, tokens, mono: true })
-        ] })
-      ] })
-    ] })
-  ] });
+	const a = img.args;
+	const time = new Date(img.timestamp).toLocaleString("en-US", {
+		hour12: false,
+		year: "numeric",
+		month: "short",
+		day: "numeric",
+		hour: "2-digit",
+		minute: "2-digit",
+		second: "2-digit"
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		style: {
+			backgroundColor: tokens.colors.background.elevated,
+			display: "flex",
+			gap: "8px",
+			padding: "8px",
+			minHeight: 0
+		},
+		children: [/* @__PURE__ */ jsxs("div", {
+			style: {
+				flex: "1 1 50%",
+				display: "flex",
+				flexDirection: "column",
+				gap: "6px",
+				minWidth: 0
+			},
+			children: [/* @__PURE__ */ jsx("img", {
+				src: img.dataUrl,
+				alt: `capture_${serverId}_${img.reqId}`,
+				style: {
+					width: "100%",
+					borderRadius: tokens.borderRadius.sm,
+					border: `1px solid ${tokens.colors.border.muted}`,
+					objectFit: "contain"
+				}
+			}), /* @__PURE__ */ jsxs("div", {
+				style: {
+					display: "flex",
+					gap: "4px"
+				},
+				children: [/* @__PURE__ */ jsxs("button", {
+					type: "button",
+					onClick: () => downloadCapturedImage(img, serverId),
+					style: {
+						flex: 1,
+						display: "flex",
+						alignItems: "center",
+						justifyContent: "center",
+						gap: "4px",
+						padding: "5px 0",
+						borderRadius: tokens.borderRadius.sm,
+						fontSize: tokens.typography.fontSize.xs,
+						fontWeight: 500,
+						fontFamily: tokens.typography.fontFamily.mono,
+						color: tokens.colors.accent.primary,
+						backgroundColor: `${tokens.colors.accent.primary}12`,
+						border: `1px solid ${tokens.colors.accent.primary}30`,
+						cursor: "pointer"
+					},
+					children: [/* @__PURE__ */ jsx(DownloadIcon, {}), " Download PNG"]
+				}), /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: onClose,
+					style: {
+						padding: "5px 8px",
+						borderRadius: tokens.borderRadius.sm,
+						fontSize: tokens.typography.fontSize.xs,
+						color: tokens.colors.text.tertiary,
+						backgroundColor: "transparent",
+						border: `1px solid ${tokens.colors.border.muted}`,
+						cursor: "pointer"
+					},
+					children: /* @__PURE__ */ jsx(CloseIcon, {})
+				})]
+			})]
+		}), /* @__PURE__ */ jsxs("div", {
+			style: {
+				flex: "1 1 50%",
+				overflowY: "auto",
+				minWidth: 0
+			},
+			children: [/* @__PURE__ */ jsxs(MetaGroup, {
+				label: "File Info",
+				tokens,
+				children: [
+					/* @__PURE__ */ jsx(MetaRow, {
+						label: "Filename",
+						value: `capture_${serverId}_${img.reqId}.${img.args?.format === "jpeg" ? "jpg" : "png"}`,
+						tokens,
+						mono: true
+					}),
+					/* @__PURE__ */ jsx(MetaRow, {
+						label: "Req ID",
+						value: `#${img.reqId}`,
+						tokens,
+						mono: true
+					}),
+					/* @__PURE__ */ jsx(MetaRow, {
+						label: "Size",
+						value: fmtBytes(img.bytes),
+						tokens
+					}),
+					/* @__PURE__ */ jsx(MetaRow, {
+						label: "Format",
+						value: img.args?.format === "jpeg" ? `JPEG (q=${Math.round((img.args.jpeg_quality ?? .92) * 100)}%)` : "PNG",
+						tokens
+					}),
+					/* @__PURE__ */ jsx(MetaRow, {
+						label: "Captured",
+						value: time,
+						tokens
+					})
+				]
+			}), a && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(MetaGroup, {
+				label: "Camera",
+				tokens,
+				children: [
+					/* @__PURE__ */ jsx(MetaRow, {
+						label: "Resolution",
+						value: `${a.resolution}px`,
+						tokens
+					}),
+					/* @__PURE__ */ jsx(MetaRow, {
+						label: "FOV",
+						value: `${a.fov}°`,
+						tokens
+					}),
+					/* @__PURE__ */ jsx(MetaRow, {
+						label: "Focal Length",
+						value: `${a.focal_length}mm`,
+						tokens
+					}),
+					/* @__PURE__ */ jsx(MetaRow, {
+						label: "Aperture",
+						value: `f/${a.aperture}`,
+						tokens
+					}),
+					/* @__PURE__ */ jsx(MetaRow, {
+						label: "CoC",
+						value: `${a.coc}mm`,
+						tokens
+					}),
+					/* @__PURE__ */ jsx(MetaRow, {
+						label: "Pixel Pitch",
+						value: `${a.pixel_pitch}mm`,
+						tokens
+					}),
+					/* @__PURE__ */ jsx(MetaRow, {
+						label: "Focus Dist",
+						value: `${a.focusing_distance}m`,
+						tokens
+					}),
+					/* @__PURE__ */ jsx(MetaRow, {
+						label: "Monochrome",
+						value: a.monochromatic ? "Yes" : "No",
+						tokens
+					}),
+					/* @__PURE__ */ jsx(MetaRow, {
+						label: "Sample",
+						value: a.sample ? "Yes (½ res)" : "No",
+						tokens
+					})
+				]
+			}), /* @__PURE__ */ jsxs(MetaGroup, {
+				label: "Position & Orientation",
+				tokens,
+				children: [
+					/* @__PURE__ */ jsx(MetaRow, {
+						label: "X",
+						value: `${a.position[0].toFixed(2)} km`,
+						tokens,
+						mono: true
+					}),
+					/* @__PURE__ */ jsx(MetaRow, {
+						label: "Y",
+						value: `${a.position[1].toFixed(2)} km`,
+						tokens,
+						mono: true
+					}),
+					/* @__PURE__ */ jsx(MetaRow, {
+						label: "Z",
+						value: `${a.position[2].toFixed(2)} km`,
+						tokens,
+						mono: true
+					}),
+					/* @__PURE__ */ jsx(MetaRow, {
+						label: "Heading",
+						value: `${a.rotation[0].toFixed(1)}°`,
+						tokens,
+						mono: true
+					}),
+					/* @__PURE__ */ jsx(MetaRow, {
+						label: "Pitch",
+						value: `${a.rotation[1].toFixed(1)}°`,
+						tokens,
+						mono: true
+					}),
+					/* @__PURE__ */ jsx(MetaRow, {
+						label: "Roll",
+						value: `${a.rotation[2].toFixed(1)}°`,
+						tokens,
+						mono: true
+					})
+				]
+			})] })]
+		})]
+	});
 }
+/**
+* Collapsible image gallery with thumbnails, detail panel, download per-image, and download-all.
+* Part of the Capture component's built-in UI.
+*/
 function CaptureGallery({ images, expanded, onToggle, tokens, serverId }) {
-  const [selectedIdx, setSelectedIdx] = useState(null);
-  const selectedImg = selectedIdx !== null ? images[selectedIdx] : null;
-  return /* @__PURE__ */ jsxs("div", { style: {
-    borderTop: `1px solid ${tokens.colors.border.muted}`,
-    /* Fill remaining space when expanded */
-    ...expanded ? { flex: 1, display: "flex", flexDirection: "column", minHeight: 0, overflow: "hidden" } : {}
-  }, children: [
-    /* @__PURE__ */ jsxs("div", { style: {
-      display: "flex",
-      alignItems: "center",
-      gap: "4px",
-      flexShrink: 0
-    }, children: [
-      /* @__PURE__ */ jsxs(
-        "button",
-        {
-          type: "button",
-          onClick: onToggle,
-          "aria-expanded": expanded,
-          "aria-label": `Captured images, ${images.length} total`,
-          style: {
-            flex: 1,
-            display: "flex",
-            alignItems: "center",
-            gap: "8px",
-            padding: "8px 12px",
-            fontSize: tokens.typography.fontSize.sm,
-            fontWeight: 500,
-            fontFamily: tokens.typography.fontFamily.primary,
-            color: tokens.colors.text.secondary,
-            backgroundColor: "transparent",
-            border: "none",
-            cursor: "pointer",
-            outline: "none",
-            textAlign: "left"
-          },
-          children: [
-            /* @__PURE__ */ jsx(ChevronIcon, { expanded }),
-            /* @__PURE__ */ jsx("span", { children: "Captured Images" }),
-            images.length > 0 && /* @__PURE__ */ jsxs("span", { style: {
-              fontSize: tokens.typography.fontSize.xs,
-              color: tokens.colors.text.tertiary,
-              fontFamily: tokens.typography.fontFamily.mono
-            }, children: [
-              "(",
-              images.length,
-              ")"
-            ] })
-          ]
-        }
-      ),
-      expanded && images.length > 0 && /* @__PURE__ */ jsxs(
-        "button",
-        {
-          type: "button",
-          onClick: () => downloadAllImages(images, serverId),
-          title: `Download all ${images.length} images`,
-          style: {
-            display: "flex",
-            alignItems: "center",
-            gap: "4px",
-            padding: "4px 8px",
-            marginRight: 8,
-            fontSize: "0.62rem",
-            fontWeight: 500,
-            fontFamily: tokens.typography.fontFamily.mono,
-            color: tokens.colors.text.tertiary,
-            backgroundColor: "transparent",
-            border: `1px solid ${tokens.colors.border.muted}`,
-            borderRadius: tokens.borderRadius.sm,
-            cursor: "pointer",
-            whiteSpace: "nowrap"
-          },
-          children: [
-            /* @__PURE__ */ jsx(DownloadIcon, { size: 10 }),
-            " All"
-          ]
-        }
-      )
-    ] }),
-    expanded && /* @__PURE__ */ jsx("div", { style: {
-      flex: 1,
-      minHeight: 0,
-      display: "flex",
-      overflow: "hidden"
-    }, children: images.length === 0 ? /* @__PURE__ */ jsx("div", { style: {
-      fontSize: tokens.typography.fontSize.sm,
-      color: tokens.colors.text.tertiary,
-      padding: "12px",
-      textAlign: "center",
-      width: "100%"
-    }, children: "No images captured yet" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("div", { style: {
-        width: selectedImg ? 200 : "100%",
-        flexShrink: 0,
-        overflowY: "auto",
-        padding: "6px",
-        borderRight: selectedImg ? `1px solid ${tokens.colors.border.muted}` : "none",
-        display: "grid",
-        gridTemplateColumns: selectedImg ? "repeat(2, 1fr)" : "repeat(auto-fill, minmax(min(120px, 100%), 1fr))",
-        gridAutoRows: "min-content",
-        gap: "4px",
-        alignContent: "start"
-      }, children: images.map((img, idx) => {
-        const isSelected = selectedIdx === idx;
-        return /* @__PURE__ */ jsxs(
-          "div",
-          {
-            onClick: () => setSelectedIdx(isSelected ? null : idx),
-            style: {
-              position: "relative",
-              aspectRatio: "1",
-              borderRadius: tokens.borderRadius.sm,
-              overflow: "hidden",
-              border: `2px solid ${isSelected ? tokens.colors.accent.primary : tokens.colors.border.muted}`,
-              backgroundColor: tokens.colors.background.elevated,
-              cursor: "pointer",
-              transition: "border-color 0.15s"
-            },
-            children: [
-              /* @__PURE__ */ jsx(
-                "img",
-                {
-                  src: img.dataUrl,
-                  alt: `capture_${serverId}_${img.reqId}`,
-                  style: { width: "100%", height: "100%", objectFit: "cover", display: "block" }
-                }
-              ),
-              /* @__PURE__ */ jsxs("div", { style: {
-                position: "absolute",
-                bottom: 0,
-                left: 0,
-                right: 0,
-                display: "flex",
-                justifyContent: "space-between",
-                padding: "2px 4px",
-                fontSize: "9px",
-                fontFamily: tokens.typography.fontFamily.mono,
-                color: "#fff",
-                backgroundColor: "rgba(0, 0, 0, 0.65)"
-              }, children: [
-                /* @__PURE__ */ jsxs("span", { children: [
-                  "#",
-                  img.reqId
-                ] }),
-                /* @__PURE__ */ jsx("span", { children: fmtBytes(img.bytes) })
-              ] })
-            ]
-          },
-          `${img.reqId}-${img.timestamp}`
-        );
-      }) }),
-      selectedImg && /* @__PURE__ */ jsx("div", { style: { flex: 1, minWidth: 0, overflowY: "auto" }, children: /* @__PURE__ */ jsx(
-        CaptureImageDetail,
-        {
-          img: selectedImg,
-          tokens,
-          serverId,
-          onClose: () => setSelectedIdx(null)
-        }
-      ) })
-    ] }) })
-  ] });
+	const [selectedIdx, setSelectedIdx] = useState(null);
+	const selectedImg = selectedIdx !== null ? images[selectedIdx] : null;
+	return /* @__PURE__ */ jsxs("div", {
+		style: {
+			borderTop: `1px solid ${tokens.colors.border.muted}`,
+			...expanded ? {
+				flex: 1,
+				display: "flex",
+				flexDirection: "column",
+				minHeight: 0,
+				overflow: "hidden"
+			} : {}
+		},
+		children: [/* @__PURE__ */ jsxs("div", {
+			style: {
+				display: "flex",
+				alignItems: "center",
+				gap: "4px",
+				flexShrink: 0
+			},
+			children: [/* @__PURE__ */ jsxs("button", {
+				type: "button",
+				onClick: onToggle,
+				"aria-expanded": expanded,
+				"aria-label": `Captured images, ${images.length} total`,
+				style: {
+					flex: 1,
+					display: "flex",
+					alignItems: "center",
+					gap: "8px",
+					padding: "8px 12px",
+					fontSize: tokens.typography.fontSize.sm,
+					fontWeight: 500,
+					fontFamily: tokens.typography.fontFamily.primary,
+					color: tokens.colors.text.secondary,
+					backgroundColor: "transparent",
+					border: "none",
+					cursor: "pointer",
+					outline: "none",
+					textAlign: "left"
+				},
+				children: [
+					/* @__PURE__ */ jsx(ChevronIcon, { expanded }),
+					/* @__PURE__ */ jsx("span", { children: "Captured Images" }),
+					images.length > 0 && /* @__PURE__ */ jsxs("span", {
+						style: {
+							fontSize: tokens.typography.fontSize.xs,
+							color: tokens.colors.text.tertiary,
+							fontFamily: tokens.typography.fontFamily.mono
+						},
+						children: [
+							"(",
+							images.length,
+							")"
+						]
+					})
+				]
+			}), expanded && images.length > 0 && /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				onClick: () => downloadAllImages(images, serverId),
+				title: `Download all ${images.length} images`,
+				style: {
+					display: "flex",
+					alignItems: "center",
+					gap: "4px",
+					padding: "4px 8px",
+					marginRight: 8,
+					fontSize: "0.62rem",
+					fontWeight: 500,
+					fontFamily: tokens.typography.fontFamily.mono,
+					color: tokens.colors.text.tertiary,
+					backgroundColor: "transparent",
+					border: `1px solid ${tokens.colors.border.muted}`,
+					borderRadius: tokens.borderRadius.sm,
+					cursor: "pointer",
+					whiteSpace: "nowrap"
+				},
+				children: [/* @__PURE__ */ jsx(DownloadIcon, { size: 10 }), " All"]
+			})]
+		}), expanded && /* @__PURE__ */ jsx("div", {
+			style: {
+				flex: 1,
+				minHeight: 0,
+				display: "flex",
+				overflow: "hidden"
+			},
+			children: images.length === 0 ? /* @__PURE__ */ jsx("div", {
+				style: {
+					fontSize: tokens.typography.fontSize.sm,
+					color: tokens.colors.text.tertiary,
+					padding: "12px",
+					textAlign: "center",
+					width: "100%"
+				},
+				children: "No images captured yet"
+			}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+				style: {
+					width: selectedImg ? 200 : "100%",
+					flexShrink: 0,
+					overflowY: "auto",
+					padding: "6px",
+					borderRight: selectedImg ? `1px solid ${tokens.colors.border.muted}` : "none",
+					display: "grid",
+					gridTemplateColumns: selectedImg ? "repeat(2, 1fr)" : "repeat(auto-fill, minmax(min(120px, 100%), 1fr))",
+					gridAutoRows: "min-content",
+					gap: "4px",
+					alignContent: "start"
+				},
+				children: images.map((img, idx) => {
+					const isSelected = selectedIdx === idx;
+					return /* @__PURE__ */ jsxs("div", {
+						onClick: () => setSelectedIdx(isSelected ? null : idx),
+						style: {
+							position: "relative",
+							aspectRatio: "1",
+							borderRadius: tokens.borderRadius.sm,
+							overflow: "hidden",
+							border: `2px solid ${isSelected ? tokens.colors.accent.primary : tokens.colors.border.muted}`,
+							backgroundColor: tokens.colors.background.elevated,
+							cursor: "pointer",
+							transition: "border-color 0.15s"
+						},
+						children: [/* @__PURE__ */ jsx("img", {
+							src: img.dataUrl,
+							alt: `capture_${serverId}_${img.reqId}`,
+							style: {
+								width: "100%",
+								height: "100%",
+								objectFit: "cover",
+								display: "block"
+							}
+						}), /* @__PURE__ */ jsxs("div", {
+							style: {
+								position: "absolute",
+								bottom: 0,
+								left: 0,
+								right: 0,
+								display: "flex",
+								justifyContent: "space-between",
+								padding: "2px 4px",
+								fontSize: "9px",
+								fontFamily: tokens.typography.fontFamily.mono,
+								color: "#fff",
+								backgroundColor: "rgba(0, 0, 0, 0.65)"
+							},
+							children: [/* @__PURE__ */ jsxs("span", { children: ["#", img.reqId] }), /* @__PURE__ */ jsx("span", { children: fmtBytes(img.bytes) })]
+						})]
+					}, `${img.reqId}-${img.timestamp}`);
+				})
+			}), selectedImg && /* @__PURE__ */ jsx("div", {
+				style: {
+					flex: 1,
+					minWidth: 0,
+					overflowY: "auto"
+				},
+				children: /* @__PURE__ */ jsx(CaptureImageDetail, {
+					img: selectedImg,
+					tokens,
+					serverId,
+					onClose: () => setSelectedIdx(null)
+				})
+			})] })
+		})]
+	});
 }
-export {
-  Capture,
-  loadCapturePlaceholderImage,
-  useCapture
-};
-//# sourceMappingURL=Capture.js.map
+//#endregion
+export { Capture, Capture as default, loadCapturePlaceholderImage, useCapture };
+
+//# sourceMappingURL=Capture.js.map