@zendir/ui 0.2.20 → 0.3.0

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

@@ -0,0 +1,804 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { memo, forwardRef, useState, useRef, useEffect, useCallback, useImperativeHandle } from "react";
+import { useCopyToClipboard } from "../display/CopyButton.js";
+import placeholderImageUrl from "./capture-placeholder.png.js";
+import { useTheme } from "../../theme/ThemeProvider.js";
+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
+    ]);
+  }
+}
+let placeholderCache = null;
+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;
+}
+async function loadCapturePlaceholderImage() {
+  return loadPlaceholderImage();
+}
+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 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
+          }
+        )
+      ]
+    }
+  );
+}));
+function fmtBytes(b) {
+  if (b > 1048576) return `${(b / 1048576).toFixed(1)} MB`;
+  if (b > 1024) return `${(b / 1024).toFixed(1)} KB`;
+  return `${b} B`;
+}
+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();
+}
+async function downloadAllImages(images, serverId) {
+  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" })
+] });
+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 })
+  ] });
+}
+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
+  ] });
+}
+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 })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+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)
+        }
+      ) })
+    ] }) })
+  ] });
+}
+export {
+  Capture,
+  loadCapturePlaceholderImage,
+  useCapture
+};
+//# sourceMappingURL=Capture.js.map