@adecore/agents-react 0.41.0 → 0.42.0

package/dist/chat/ui/ImageView.js

@@ -1,480 +1,763 @@
 import { c as _c } from "react/compiler-runtime";
-import { useRef, useState } from 'react';
+import { createContext, useContext, useId, useLayoutEffect, useRef, useState, useSyncExternalStore } from 'react';
 import { useTranslation } from 'react-i18next';
 import clsx from 'clsx';
-import { ImageOff, Minus, Plus, RotateCcw } from 'lucide-react';
+import { ChevronLeft, ChevronRight, ImageOff, Minus, Plus, RotateCcw } from 'lucide-react';
 import { ButtonGroup, CloseButton, Dialog, Icon, IconButton, Tooltip } from '@adecore/ui';
+import { formatNumber } from '@adecore/ui/format';
+import { BUTTON_STEP, clamped, MAX_SCALE, MIN_SCALE, START, stepped, wheeled, zoomed } from '../logic/lightbox.js';
 import { DisplayImage } from './DisplayImage.js';
+/* The pictures of one group in the order they stand on the page, which is the order the arrows walk. */
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const MIN_SCALE = 1;
-const MAX_SCALE = 8;
-// One wheel notch, small enough that a trackpad flick does not jump past the detail it aimed at.
-const WHEEL_STEP = 1.0015;
-const BUTTON_STEP = 1.5;
-const START = {
-  scale: 1,
-  x: 0,
-  y: 0
-};
+function createImageGroupStore() {
+  const images = new Map();
+  const listeners = new Set();
+  let snapshot = [];
+  const changed = () => {
+    snapshot = [...images.values()].sort((a, b) => {
+      if (a.element === null || b.element === null) {
+        return 0;
+      }
+      return a.element.compareDocumentPosition(b.element) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;
+    });
+    for (const listener of listeners) {
+      listener();
+    }
+  };
+  return {
+    set(image) {
+      const current = images.get(image.key);
+      if (current?.src === image.src && current.alt === image.alt && current.element === image.element) {
+        return;
+      }
+      images.set(image.key, image);
+      changed();
+    },
+    remove(key) {
+      if (images.delete(key)) {
+        changed();
+      }
+    },
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    },
+    snapshot: () => snapshot
+  };
+}
+const ImageGroupContext = createContext(null);
 /*
- * Zooms around a point, which is what makes a wheel over a detail feel like a magnifier instead of
- * a slider. The pixel under the pointer stays where it is while everything else moves away from it.
- * `x` and `y` are offsets from the middle of the frame, so a scale of 1 is always centered.
+ * Thumbnails inside open one lightbox together, where the arrow keys walk from one to the next.
+ * A thumbnail with actions of its own, or one its caller opens from a control, stays on its own.
  */
-function zoomed(view, factor, pointX, pointY) {
-  const scale = Math.min(MAX_SCALE, Math.max(MIN_SCALE, view.scale * factor));
-  if (scale === MIN_SCALE) {
-    return START;
+export function ImageGroup(t0) {
+  const $ = _c(17);
+  const {
+    children
+  } = t0;
+  const [store] = useState(createImageGroupStore);
+  const images = useSyncExternalStore(store.subscribe, store.snapshot, store.snapshot);
+  let t1;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = {
+      key: null,
+      open: false
+    };
+    $[0] = t1;
+  } else {
+    t1 = $[0];
+  }
+  const [shown, setShown] = useState(t1);
+  let t2;
+  if ($[1] !== images || $[2] !== shown) {
+    let t3;
+    if ($[4] !== shown) {
+      t3 = image => image.key === shown.key;
+      $[4] = shown;
+      $[5] = t3;
+    } else {
+      t3 = $[5];
+    }
+    t2 = images.findIndex(t3);
+    $[1] = images;
+    $[2] = shown;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  const index = t2;
+  let t3;
+  if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = key => setShown({
+      key,
+      open: true
+    });
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  let t4;
+  if ($[7] !== store) {
+    t4 = {
+      store,
+      open: t3
+    };
+    $[7] = store;
+    $[8] = t4;
+  } else {
+    t4 = $[8];
+  }
+  let t5;
+  if ($[9] !== images || $[10] !== index || $[11] !== shown) {
+    t5 = index !== -1 && /*#__PURE__*/_jsx(Lightbox, {
+      images: images,
+      index: index,
+      open: shown.open,
+      onOpenChange: open => setShown(current => ({
+        ...current,
+        open
+      })),
+      onIndexChange: next => setShown({
+        key: images[next]?.key ?? null,
+        open: true
+      })
+    });
+    $[9] = images;
+    $[10] = index;
+    $[11] = shown;
+    $[12] = t5;
+  } else {
+    t5 = $[12];
+  }
+  let t6;
+  if ($[13] !== children || $[14] !== t4 || $[15] !== t5) {
+    t6 = /*#__PURE__*/_jsxs(ImageGroupContext, {
+      value: t4,
+      children: [children, t5]
+    });
+    $[13] = children;
+    $[14] = t4;
+    $[15] = t5;
+    $[16] = t6;
+  } else {
+    t6 = $[16];
   }
-  const ratio = scale / view.scale;
+  return t6;
+}
+/* A press on an arrow or a zoom button is the button's, never the start of a pan or a zoom of the stage. */
+function onControl(target) {
+  return target instanceof Element && target.closest('button') !== null;
+}
+/* Where the pointer sits against the middle of the stage, which is what the transform counts from. */
+function pointIn(stage, event) {
+  const rect = stage.getBoundingClientRect();
   return {
-    scale,
-    x: pointX - (pointX - view.x) * ratio,
-    y: pointY - (pointY - view.y) * ratio
+    x: event.clientX - rect.left - rect.width / 2,
+    y: event.clientY - rect.top - rect.height / 2
+  };
+}
+function boundsOf(stage) {
+  const picture = stage.querySelector('img');
+  return {
+    image: {
+      width: picture?.offsetWidth ?? 0,
+      height: picture?.offsetHeight ?? 0
+    },
+    frame: {
+      width: stage.clientWidth,
+      height: stage.clientHeight
+    }
   };
 }
-/* An image on its own, large: the wheel and the buttons zoom, dragging pans, Escape closes. */
+/* Pictures large and on their own: a pinch zooms, two fingers pan, the arrow keys walk the group, Escape closes. */
 function Lightbox(t0) {
-  const $ = _c(83);
+  const $ = _c(112);
   const {
-    src,
-    alt,
+    images,
+    index,
     open,
     onOpenChange,
+    onIndexChange,
     actions
   } = t0;
   const {
     t
   } = useTranslation("agent-chat");
   const [view, setView] = useState(START);
+  const [viewed, setViewed] = useState(index);
+  const stageElementRef = useRef(null);
+  const dragRef = useRef(null);
+  const movedRef = useRef(false);
+  const image = images[index];
   let t1;
-  if ($[0] !== alt) {
-    t1 = alt.slice(alt.lastIndexOf("/") + 1);
-    $[0] = alt;
-    $[1] = t1;
+  if ($[0] !== images.length || $[1] !== index) {
+    t1 = stepped(index, images.length, -1);
+    $[0] = images.length;
+    $[1] = index;
+    $[2] = t1;
   } else {
-    t1 = $[1];
+    t1 = $[2];
   }
-  const name = t1;
+  const previous = t1;
   let t2;
-  if ($[2] !== name) {
-    t2 = /*#__PURE__*/_jsx("span", {
-      className: "min-w-0 truncate text-xs text-text",
-      children: name
-    });
-    $[2] = name;
-    $[3] = t2;
+  if ($[3] !== images.length || $[4] !== index) {
+    t2 = stepped(index, images.length, 1);
+    $[3] = images.length;
+    $[4] = index;
+    $[5] = t2;
   } else {
-    t2 = $[3];
+    t2 = $[5];
+  }
+  const next = t2;
+  if (viewed !== index) {
+    setViewed(index);
+    setView(START);
   }
-  const title = t2;
-  const frameRef = useRef(null);
-  const dragRef = useRef(null);
   if (!open && view !== START) {
     setView(START);
   }
+  if (image === undefined) {
+    return null;
+  }
   let t3;
-  if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
-    t3 = event => {
-      const rect = frameRef.current?.getBoundingClientRect();
-      if (!rect) {
-        return {
-          x: 0,
-          y: 0
-        };
-      }
-      return {
-        x: event.clientX - rect.left - rect.width / 2,
-        y: event.clientY - rect.top - rect.height / 2
-      };
-    };
-    $[4] = t3;
+  if ($[6] !== image.alt) {
+    t3 = image.alt.slice(image.alt.lastIndexOf("/") + 1);
+    $[6] = image.alt;
+    $[7] = t3;
   } else {
-    t3 = $[4];
+    t3 = $[7];
   }
-  const pointIn = t3;
+  const name = t3;
   let t4;
-  if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
-    t4 = factor => setView(current => zoomed(current, factor, 0, 0));
-    $[5] = t4;
+  if ($[8] !== name) {
+    t4 = /*#__PURE__*/_jsx("span", {
+      className: "min-w-0 truncate text-xs text-text",
+      children: name
+    });
+    $[8] = name;
+    $[9] = t4;
   } else {
-    t4 = $[5];
+    t4 = $[9];
   }
-  const zoomButton = t4;
+  const title = t4;
   let t5;
-  if ($[6] !== alt) {
-    t5 = /*#__PURE__*/_jsx(Dialog.Title, {
-      className: "sr-only",
-      children: alt
-    });
-    $[6] = alt;
-    $[7] = t5;
+  if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+    t5 = stage => {
+      stageElementRef.current = stage;
+      if (stage === null) {
+        return;
+      }
+      const onWheel = event => {
+        event.preventDefault();
+        const point = pointIn(stage, event);
+        const bounds = boundsOf(stage);
+        setView(current => wheeled(current, event, point, bounds));
+      };
+      stage.addEventListener("wheel", onWheel, {
+        passive: false
+      });
+      return () => stage.removeEventListener("wheel", onWheel);
+    };
+    $[10] = t5;
   } else {
-    t5 = $[7];
+    t5 = $[10];
   }
+  const stageRef = t5;
   let t6;
-  if ($[8] !== alt || $[9] !== name || $[10] !== title) {
-    t6 = name === alt ? title : /*#__PURE__*/_jsx(Tooltip, {
-      label: alt,
-      children: title
-    });
-    $[8] = alt;
-    $[9] = name;
-    $[10] = title;
+  if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+    t6 = factor => {
+      const stage_0 = stageElementRef.current;
+      if (stage_0 !== null) {
+        const bounds_0 = boundsOf(stage_0);
+        setView(current_0 => zoomed(current_0, factor, {
+          x: 0,
+          y: 0
+        }, bounds_0));
+      }
+    };
     $[11] = t6;
   } else {
     t6 = $[11];
   }
+  const zoomButton = t6;
   let t7;
-  if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
-    t7 = /*#__PURE__*/_jsx("span", {
-      className: "grow"
-    });
-    $[12] = t7;
+  if ($[12] !== onIndexChange) {
+    t7 = to => {
+      if (to !== null) {
+        onIndexChange?.(to);
+      }
+    };
+    $[12] = onIndexChange;
+    $[13] = t7;
   } else {
-    t7 = $[12];
+    t7 = $[13];
   }
+  const step = t7;
   let t8;
-  if ($[13] !== view.scale) {
-    t8 = Math.round(view.scale * 100);
-    $[13] = view.scale;
-    $[14] = t8;
+  if ($[14] !== next || $[15] !== previous || $[16] !== step) {
+    t8 = event_0 => {
+      if (event_0.altKey || event_0.ctrlKey || event_0.metaKey || event_0.shiftKey) {
+        return;
+      }
+      const to_0 = event_0.key === "ArrowLeft" ? previous : event_0.key === "ArrowRight" ? next : null;
+      if (to_0 !== null) {
+        event_0.preventDefault();
+        step(to_0);
+      }
+    };
+    $[14] = next;
+    $[15] = previous;
+    $[16] = step;
+    $[17] = t8;
   } else {
-    t8 = $[14];
+    t8 = $[17];
   }
+  const onKeyDown = t8;
   let t9;
-  if ($[15] !== t8) {
-    t9 = /*#__PURE__*/_jsxs("span", {
-      className: "tabular-nums text-xs text-text-faint",
-      children: [t8, "%"]
+  if ($[18] !== image.alt) {
+    t9 = /*#__PURE__*/_jsx(Dialog.Title, {
+      className: "sr-only",
+      children: image.alt
     });
-    $[15] = t8;
-    $[16] = t9;
+    $[18] = image.alt;
+    $[19] = t9;
   } else {
-    t9 = $[16];
+    t9 = $[19];
   }
-  let t10;
-  if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
-    t10 = /*#__PURE__*/_jsx("span", {});
-    $[17] = t10;
+  const t10 = view.scale * 100;
+  let t11;
+  if ($[20] !== t10) {
+    t11 = formatNumber(t10);
+    $[20] = t10;
+    $[21] = t11;
   } else {
-    t10 = $[17];
+    t11 = $[21];
   }
-  let t11;
-  if ($[18] !== t) {
-    t11 = t("image.zoomOut");
-    $[18] = t;
-    $[19] = t11;
+  let t12;
+  if ($[22] !== t11) {
+    t12 = /*#__PURE__*/_jsxs("span", {
+      className: "tabular-nums text-xs text-text-faint",
+      children: [t11, "%"]
+    });
+    $[22] = t11;
+    $[23] = t12;
   } else {
-    t11 = $[19];
+    t12 = $[23];
   }
-  const t12 = view.scale <= MIN_SCALE;
   let t13;
-  if ($[20] === Symbol.for("react.memo_cache_sentinel")) {
-    t13 = () => zoomButton(1 / BUTTON_STEP);
-    $[20] = t13;
+  if ($[24] === Symbol.for("react.memo_cache_sentinel")) {
+    t13 = /*#__PURE__*/_jsx("span", {});
+    $[24] = t13;
   } else {
-    t13 = $[20];
+    t13 = $[24];
   }
   let t14;
-  if ($[21] !== t11 || $[22] !== t12) {
-    t14 = /*#__PURE__*/_jsx(IconButton, {
+  if ($[25] !== t) {
+    t14 = t("image.zoomOut");
+    $[25] = t;
+    $[26] = t14;
+  } else {
+    t14 = $[26];
+  }
+  const t15 = view.scale <= MIN_SCALE;
+  let t16;
+  if ($[27] === Symbol.for("react.memo_cache_sentinel")) {
+    t16 = () => zoomButton(1 / BUTTON_STEP);
+    $[27] = t16;
+  } else {
+    t16 = $[27];
+  }
+  let t17;
+  if ($[28] !== t14 || $[29] !== t15) {
+    t17 = /*#__PURE__*/_jsx(IconButton, {
       icon: Minus,
       size: "sm",
-      label: t11,
-      disabled: t12,
-      onClick: t13
+      label: t14,
+      disabled: t15,
+      onClick: t16
     });
-    $[21] = t11;
-    $[22] = t12;
-    $[23] = t14;
+    $[28] = t14;
+    $[29] = t15;
+    $[30] = t17;
   } else {
-    t14 = $[23];
+    t17 = $[30];
   }
-  let t15;
-  if ($[24] !== t) {
-    t15 = t("image.zoomIn");
-    $[24] = t;
-    $[25] = t15;
+  let t18;
+  if ($[31] !== t) {
+    t18 = t("image.zoomIn");
+    $[31] = t;
+    $[32] = t18;
   } else {
-    t15 = $[25];
+    t18 = $[32];
   }
-  const t16 = view.scale >= MAX_SCALE;
-  let t17;
-  if ($[26] === Symbol.for("react.memo_cache_sentinel")) {
-    t17 = () => zoomButton(BUTTON_STEP);
-    $[26] = t17;
+  const t19 = view.scale >= MAX_SCALE;
+  let t20;
+  if ($[33] === Symbol.for("react.memo_cache_sentinel")) {
+    t20 = () => zoomButton(BUTTON_STEP);
+    $[33] = t20;
   } else {
-    t17 = $[26];
+    t20 = $[33];
   }
-  let t18;
-  if ($[27] !== t15 || $[28] !== t16) {
-    t18 = /*#__PURE__*/_jsx(IconButton, {
+  let t21;
+  if ($[34] !== t18 || $[35] !== t19) {
+    t21 = /*#__PURE__*/_jsx(IconButton, {
       icon: Plus,
       size: "sm",
-      label: t15,
-      disabled: t16,
-      onClick: t17
+      label: t18,
+      disabled: t19,
+      onClick: t20
     });
-    $[27] = t15;
-    $[28] = t16;
-    $[29] = t18;
+    $[34] = t18;
+    $[35] = t19;
+    $[36] = t21;
   } else {
-    t18 = $[29];
+    t21 = $[36];
   }
-  let t19;
-  if ($[30] !== t) {
-    t19 = t("image.reset");
-    $[30] = t;
-    $[31] = t19;
+  let t22;
+  if ($[37] !== t) {
+    t22 = t("image.reset");
+    $[37] = t;
+    $[38] = t22;
   } else {
-    t19 = $[31];
+    t22 = $[38];
   }
-  const t20 = view.scale === MIN_SCALE;
-  let t21;
-  if ($[32] === Symbol.for("react.memo_cache_sentinel")) {
-    t21 = () => setView(START);
-    $[32] = t21;
+  const t23 = view.scale === MIN_SCALE;
+  let t24;
+  if ($[39] === Symbol.for("react.memo_cache_sentinel")) {
+    t24 = () => setView(START);
+    $[39] = t24;
   } else {
-    t21 = $[32];
+    t24 = $[39];
   }
-  let t22;
-  if ($[33] !== t19 || $[34] !== t20) {
-    t22 = /*#__PURE__*/_jsx(IconButton, {
+  let t25;
+  if ($[40] !== t22 || $[41] !== t23) {
+    t25 = /*#__PURE__*/_jsx(IconButton, {
       icon: RotateCcw,
       size: "sm",
-      label: t19,
-      disabled: t20,
-      onClick: t21
+      label: t22,
+      disabled: t23,
+      onClick: t24
     });
-    $[33] = t19;
-    $[34] = t20;
-    $[35] = t22;
+    $[40] = t22;
+    $[41] = t23;
+    $[42] = t25;
   } else {
-    t22 = $[35];
+    t25 = $[42];
   }
-  let t23;
-  if ($[36] !== t14 || $[37] !== t18 || $[38] !== t22) {
-    t23 = /*#__PURE__*/_jsxs(ButtonGroup, {
-      render: t10,
-      children: [t14, t18, t22]
+  let t26;
+  if ($[43] !== t17 || $[44] !== t21 || $[45] !== t25) {
+    t26 = /*#__PURE__*/_jsxs(ButtonGroup, {
+      render: t13,
+      children: [t17, t21, t25]
     });
-    $[36] = t14;
-    $[37] = t18;
-    $[38] = t22;
-    $[39] = t23;
+    $[43] = t17;
+    $[44] = t21;
+    $[45] = t25;
+    $[46] = t26;
   } else {
-    t23 = $[39];
+    t26 = $[46];
   }
-  let t24;
-  if ($[40] !== t) {
-    t24 = t("common.action.close");
-    $[40] = t;
-    $[41] = t24;
+  let t27;
+  if ($[47] !== t) {
+    t27 = t("common.action.close");
+    $[47] = t;
+    $[48] = t27;
   } else {
-    t24 = $[41];
+    t27 = $[48];
   }
-  let t25;
-  if ($[42] !== t24) {
-    t25 = /*#__PURE__*/_jsx(CloseButton, {
-      label: t24,
+  let t28;
+  if ($[49] !== t27) {
+    t28 = /*#__PURE__*/_jsx(CloseButton, {
+      label: t27,
       kbd: "esc",
       className: "ml-1",
       dialog: true
     });
-    $[42] = t24;
-    $[43] = t25;
+    $[49] = t27;
+    $[50] = t28;
   } else {
-    t25 = $[43];
+    t28 = $[50];
   }
-  let t26;
-  if ($[44] !== actions || $[45] !== t23 || $[46] !== t25 || $[47] !== t6 || $[48] !== t9) {
-    t26 = /*#__PURE__*/_jsxs("div", {
-      className: "flex h-11 shrink-0 items-center gap-2 border-b border-border pr-2 pl-3",
-      children: [t6, t7, t9, t23, actions, t25]
+  let t29;
+  if ($[51] !== actions || $[52] !== t12 || $[53] !== t26 || $[54] !== t28) {
+    t29 = /*#__PURE__*/_jsxs("div", {
+      className: "lightbox-bar flex h-12 shrink-0 items-center justify-end gap-2 pl-3",
+      children: [t12, t26, actions, t28]
     });
-    $[44] = actions;
-    $[45] = t23;
-    $[46] = t25;
-    $[47] = t6;
-    $[48] = t9;
-    $[49] = t26;
+    $[51] = actions;
+    $[52] = t12;
+    $[53] = t26;
+    $[54] = t28;
+    $[55] = t29;
   } else {
-    t26 = $[49];
+    t29 = $[55];
   }
-  const t27 = view.scale > MIN_SCALE && "cursor-grab";
-  let t28;
-  if ($[50] !== t27) {
-    t28 = clsx("lightbox-frame grid place-items-center overflow-hidden bg-surface-sunken", t27);
-    $[50] = t27;
-    $[51] = t28;
+  const t30 = view.scale > MIN_SCALE && "cursor-grab";
+  let t31;
+  if ($[56] !== t30) {
+    t31 = clsx("lightbox-stage relative grid min-h-0 grow place-items-center overflow-hidden", t30);
+    $[56] = t30;
+    $[57] = t31;
   } else {
-    t28 = $[51];
+    t31 = $[57];
   }
-  let t29;
-  let t30;
-  if ($[52] === Symbol.for("react.memo_cache_sentinel")) {
-    t29 = e => {
-      const point = pointIn(e);
-      setView(current_0 => zoomed(current_0, WHEEL_STEP ** -e.deltaY, point.x, point.y));
-    };
-    t30 = e_0 => {
-      const point_0 = pointIn(e_0);
-      setView(current_1 => current_1.scale > MIN_SCALE ? START : zoomed(current_1, 2, point_0.x, point_0.y));
+  let t32;
+  if ($[58] === Symbol.for("react.memo_cache_sentinel")) {
+    t32 = e => {
+      if (onControl(e.target)) {
+        return;
+      }
+      const point_0 = pointIn(e.currentTarget, e);
+      const bounds_1 = boundsOf(e.currentTarget);
+      setView(current_1 => current_1.scale > MIN_SCALE ? START : zoomed(current_1, 2, point_0, bounds_1));
     };
-    $[52] = t29;
-    $[53] = t30;
+    $[58] = t32;
   } else {
-    t29 = $[52];
-    t30 = $[53];
+    t32 = $[58];
   }
-  let t31;
-  if ($[54] !== view.scale || $[55] !== view.x || $[56] !== view.y) {
-    t31 = e_1 => {
-      if (view.scale <= MIN_SCALE) {
+  let t33;
+  if ($[59] !== view.scale || $[60] !== view.x || $[61] !== view.y) {
+    t33 = e_0 => {
+      movedRef.current = false;
+      if (view.scale <= MIN_SCALE || onControl(e_0.target)) {
         return;
       }
-      e_1.currentTarget.setPointerCapture(e_1.pointerId);
+      e_0.currentTarget.setPointerCapture(e_0.pointerId);
       dragRef.current = {
-        pointerId: e_1.pointerId,
-        x: e_1.clientX - view.x,
-        y: e_1.clientY - view.y
+        pointerId: e_0.pointerId,
+        x: e_0.clientX - view.x,
+        y: e_0.clientY - view.y
       };
     };
-    $[54] = view.scale;
-    $[55] = view.x;
-    $[56] = view.y;
-    $[57] = t31;
+    $[59] = view.scale;
+    $[60] = view.x;
+    $[61] = view.y;
+    $[62] = t33;
   } else {
-    t31 = $[57];
+    t33 = $[62];
   }
-  let t32;
-  let t33;
   let t34;
-  if ($[58] === Symbol.for("react.memo_cache_sentinel")) {
-    t32 = e_2 => {
+  let t35;
+  let t36;
+  if ($[63] === Symbol.for("react.memo_cache_sentinel")) {
+    t34 = e_1 => {
       const drag = dragRef.current;
-      if (drag?.pointerId === e_2.pointerId) {
-        setView(current_2 => ({
-          ...current_2,
-          x: e_2.clientX - drag.x,
-          y: e_2.clientY - drag.y
-        }));
+      if (drag?.pointerId !== e_1.pointerId) {
+        return;
       }
+      movedRef.current = true;
+      const bounds_2 = boundsOf(e_1.currentTarget);
+      setView(current_2 => clamped({
+        ...current_2,
+        x: e_1.clientX - drag.x,
+        y: e_1.clientY - drag.y
+      }, bounds_2));
     };
-    t33 = () => {
+    t35 = () => {
       dragRef.current = null;
     };
-    t34 = () => {
+    t36 = () => {
       dragRef.current = null;
     };
-    $[58] = t32;
-    $[59] = t33;
-    $[60] = t34;
+    $[63] = t34;
+    $[64] = t35;
+    $[65] = t36;
+  } else {
+    t34 = $[63];
+    t35 = $[64];
+    t36 = $[65];
+  }
+  let t37;
+  if ($[66] !== onOpenChange) {
+    t37 = e_2 => {
+      if (e_2.target === e_2.currentTarget && !movedRef.current) {
+        onOpenChange(false);
+      }
+    };
+    $[66] = onOpenChange;
+    $[67] = t37;
   } else {
-    t32 = $[58];
-    t33 = $[59];
-    t34 = $[60];
+    t37 = $[67];
   }
-  let t35;
-  if ($[61] !== view.x) {
-    t35 = Math.round(view.x);
-    $[61] = view.x;
-    $[62] = t35;
+  const t38 = image.key;
+  const t39 = image.src;
+  const t40 = image.alt;
+  let t41;
+  if ($[68] !== view.x) {
+    t41 = Math.round(view.x);
+    $[68] = view.x;
+    $[69] = t41;
   } else {
-    t35 = $[62];
+    t41 = $[69];
   }
-  let t36;
-  if ($[63] !== view.y) {
-    t36 = Math.round(view.y);
-    $[63] = view.y;
-    $[64] = t36;
-  } else {
-    t36 = $[64];
-  }
-  const t37 = `translate(${t35}px, ${t36}px) scale(${view.scale})`;
-  let t38;
-  if ($[65] !== t37) {
-    t38 = {
-      transform: t37
+  let t42;
+  if ($[70] !== view.y) {
+    t42 = Math.round(view.y);
+    $[70] = view.y;
+    $[71] = t42;
+  } else {
+    t42 = $[71];
+  }
+  const t43 = `translate(${t41}px, ${t42}px) scale(${view.scale})`;
+  let t44;
+  if ($[72] !== t43) {
+    t44 = {
+      transform: t43
     };
-    $[65] = t37;
-    $[66] = t38;
+    $[72] = t43;
+    $[73] = t44;
   } else {
-    t38 = $[66];
+    t44 = $[73];
   }
-  let t39;
-  if ($[67] !== alt || $[68] !== src || $[69] !== t38) {
-    t39 = /*#__PURE__*/_jsx(DisplayImage, {
-      src: src,
-      alt: alt,
+  let t45;
+  if ($[74] !== image.alt || $[75] !== image.key || $[76] !== image.src || $[77] !== t44) {
+    t45 = /*#__PURE__*/_jsx(DisplayImage, {
+      src: t39,
+      alt: t40,
       draggable: false,
       className: "select-none",
-      style: t38
+      style: t44
+    }, t38);
+    $[74] = image.alt;
+    $[75] = image.key;
+    $[76] = image.src;
+    $[77] = t44;
+    $[78] = t45;
+  } else {
+    t45 = $[78];
+  }
+  let t46;
+  if ($[79] !== images.length || $[80] !== next || $[81] !== previous || $[82] !== step || $[83] !== t) {
+    t46 = images.length > 1 && /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(IconButton, {
+        icon: ChevronLeft,
+        label: t("image.previous"),
+        kbd: "\u2190",
+        disabled: previous === null,
+        className: "absolute top-1/2 left-4 -translate-y-1/2",
+        onClick: () => step(previous)
+      }), /*#__PURE__*/_jsx(IconButton, {
+        icon: ChevronRight,
+        label: t("image.next"),
+        kbd: "\u2192",
+        disabled: next === null,
+        className: "absolute top-1/2 right-4 -translate-y-1/2",
+        onClick: () => step(next)
+      })]
+    });
+    $[79] = images.length;
+    $[80] = next;
+    $[81] = previous;
+    $[82] = step;
+    $[83] = t;
+    $[84] = t46;
+  } else {
+    t46 = $[84];
+  }
+  let t47;
+  if ($[85] !== t31 || $[86] !== t33 || $[87] !== t37 || $[88] !== t45 || $[89] !== t46) {
+    t47 = /*#__PURE__*/_jsxs("div", {
+      ref: stageRef,
+      className: t31,
+      onDoubleClick: t32,
+      onPointerDown: t33,
+      onPointerMove: t34,
+      onPointerUp: t35,
+      onPointerCancel: t36,
+      onClick: t37,
+      children: [t45, t46]
+    });
+    $[85] = t31;
+    $[86] = t33;
+    $[87] = t37;
+    $[88] = t45;
+    $[89] = t46;
+    $[90] = t47;
+  } else {
+    t47 = $[90];
+  }
+  let t48;
+  if ($[91] !== image.alt || $[92] !== name || $[93] !== title) {
+    t48 = name === image.alt ? title : /*#__PURE__*/_jsx(Tooltip, {
+      label: image.alt,
+      children: title
+    });
+    $[91] = image.alt;
+    $[92] = name;
+    $[93] = title;
+    $[94] = t48;
+  } else {
+    t48 = $[94];
+  }
+  let t49;
+  if ($[95] !== images.length || $[96] !== index || $[97] !== t) {
+    t49 = images.length > 1 && /*#__PURE__*/_jsx("span", {
+      className: "shrink-0 tabular-nums text-xs text-text-faint",
+      children: t("image.position", {
+        index: formatNumber(index + 1),
+        count: formatNumber(images.length)
+      })
     });
-    $[67] = alt;
-    $[68] = src;
-    $[69] = t38;
-    $[70] = t39;
-  } else {
-    t39 = $[70];
-  }
-  let t40;
-  if ($[71] !== t28 || $[72] !== t31 || $[73] !== t39) {
-    t40 = /*#__PURE__*/_jsx("div", {
-      ref: frameRef,
-      className: t28,
-      onWheel: t29,
-      onDoubleClick: t30,
-      onPointerDown: t31,
-      onPointerMove: t32,
-      onPointerUp: t33,
-      onPointerCancel: t34,
-      children: t39
+    $[95] = images.length;
+    $[96] = index;
+    $[97] = t;
+    $[98] = t49;
+  } else {
+    t49 = $[98];
+  }
+  let t50;
+  if ($[99] !== t48 || $[100] !== t49) {
+    t50 = /*#__PURE__*/_jsxs("div", {
+      className: "flex h-12 shrink-0 items-center justify-center gap-3 px-3",
+      children: [t48, t49]
     });
-    $[71] = t28;
-    $[72] = t31;
-    $[73] = t39;
-    $[74] = t40;
+    $[99] = t48;
+    $[100] = t49;
+    $[101] = t50;
   } else {
-    t40 = $[74];
+    t50 = $[101];
   }
-  let t41;
-  if ($[75] !== t26 || $[76] !== t40 || $[77] !== t5) {
-    t41 = /*#__PURE__*/_jsxs(Dialog.Popup, {
+  let t51;
+  if ($[102] !== onKeyDown || $[103] !== t29 || $[104] !== t47 || $[105] !== t50 || $[106] !== t9) {
+    t51 = /*#__PURE__*/_jsxs(Dialog.Popup, {
       backdropClassName: "lightbox-backdrop",
-      className: "flex min-w-72 flex-col",
-      children: [t5, t26, t40]
+      className: "lightbox",
+      onKeyDown: onKeyDown,
+      children: [t9, t29, t47, t50]
     });
-    $[75] = t26;
-    $[76] = t40;
-    $[77] = t5;
-    $[78] = t41;
-  } else {
-    t41 = $[78];
-  }
-  let t42;
-  if ($[79] !== onOpenChange || $[80] !== open || $[81] !== t41) {
-    t42 = /*#__PURE__*/_jsx(Dialog.Root, {
+    $[102] = onKeyDown;
+    $[103] = t29;
+    $[104] = t47;
+    $[105] = t50;
+    $[106] = t9;
+    $[107] = t51;
+  } else {
+    t51 = $[107];
+  }
+  let t52;
+  if ($[108] !== onOpenChange || $[109] !== open || $[110] !== t51) {
+    t52 = /*#__PURE__*/_jsx(Dialog.Root, {
       open: open,
       onOpenChange: onOpenChange,
-      children: t41
+      children: t51
     });
-    $[79] = onOpenChange;
-    $[80] = open;
-    $[81] = t41;
-    $[82] = t42;
+    $[108] = onOpenChange;
+    $[109] = open;
+    $[110] = t51;
+    $[111] = t52;
   } else {
-    t42 = $[82];
+    t52 = $[111];
   }
-  return t42;
+  return t52;
 }
 /*
  * A thumbnail that opens the same image large. The button is the picture, so there is nothing to aim at.
  * The image is bytes where the host keeps them; until they are here a quiet square stands in for it.
  */
 export function ImageThumb(t0) {
-  const $ = _c(37);
+  const $ = _c(47);
   const {
     source,
     alt,
@@ -484,161 +767,202 @@ export function ImageThumb(t0) {
     open: openProp,
     onOpenChange
   } = t0;
+  const key = useId();
+  const buttonRef = useRef(null);
+  const context = useContext(ImageGroupContext);
+  const group = actions === undefined && openProp === undefined ? context : null;
   const [ownOpen, setOwnOpen] = useState(false);
   const open = openProp ?? ownOpen;
+  const {
+    url: src,
+    failure
+  } = source;
   let t1;
-  if ($[0] !== onOpenChange) {
-    t1 = next => {
-      setOwnOpen(next);
-      onOpenChange?.(next);
+  if ($[0] !== aspect) {
+    t1 = aspect === undefined ? undefined : {
+      aspectRatio: aspect
     };
-    $[0] = onOpenChange;
+    $[0] = aspect;
     $[1] = t1;
   } else {
     t1 = $[1];
   }
-  const setOpen = t1;
-  const {
-    url: src,
-    failure
-  } = source;
+  const ratio = t1;
   let t2;
-  if ($[2] !== aspect) {
-    t2 = aspect === undefined ? undefined : {
-      aspectRatio: aspect
+  let t3;
+  if ($[2] !== alt || $[3] !== group || $[4] !== key || $[5] !== src) {
+    t2 = () => {
+      if (group === null || src === null) {
+        return;
+      }
+      group.store.set({
+        key,
+        src,
+        alt,
+        element: buttonRef.current
+      });
+      return () => group.store.remove(key);
     };
-    $[2] = aspect;
-    $[3] = t2;
+    t3 = [group, key, src, alt];
+    $[2] = alt;
+    $[3] = group;
+    $[4] = key;
+    $[5] = src;
+    $[6] = t2;
+    $[7] = t3;
+  } else {
+    t2 = $[6];
+    t3 = $[7];
+  }
+  useLayoutEffect(t2, t3);
+  let t4;
+  if ($[8] !== onOpenChange) {
+    t4 = next => {
+      setOwnOpen(next);
+      onOpenChange?.(next);
+    };
+    $[8] = onOpenChange;
+    $[9] = t4;
   } else {
-    t2 = $[3];
+    t4 = $[9];
   }
-  const ratio = t2;
+  const setOpen = t4;
   if (src === null) {
-    const t3 = aspect === undefined ? "size-16" : "w-full";
-    let t4;
-    if ($[4] !== t3) {
-      t4 = clsx("grid place-items-center rounded-lg border border-border bg-surface-sunken text-text-faint", t3);
-      $[4] = t3;
-      $[5] = t4;
+    const t5 = aspect === undefined ? "size-16" : "w-full";
+    let t6;
+    if ($[10] !== t5) {
+      t6 = clsx("grid place-items-center rounded-lg border border-border bg-surface-sunken text-text-faint", t5);
+      $[10] = t5;
+      $[11] = t6;
     } else {
-      t4 = $[5];
+      t6 = $[11];
     }
-    let t5;
-    if ($[6] !== failure) {
-      t5 = failure !== null && /*#__PURE__*/_jsx(Tooltip, {
+    let t7;
+    if ($[12] !== failure) {
+      t7 = failure !== null && /*#__PURE__*/_jsx(Tooltip, {
         label: failure,
         children: /*#__PURE__*/_jsx(Icon, {
           icon: ImageOff,
           size: 14
         })
       });
-      $[6] = failure;
-      $[7] = t5;
+      $[12] = failure;
+      $[13] = t7;
     } else {
-      t5 = $[7];
+      t7 = $[13];
     }
-    let t6;
-    if ($[8] !== ratio || $[9] !== t4 || $[10] !== t5) {
-      t6 = /*#__PURE__*/_jsx("span", {
-        className: t4,
+    let t8;
+    if ($[14] !== ratio || $[15] !== t6 || $[16] !== t7) {
+      t8 = /*#__PURE__*/_jsx("span", {
+        className: t6,
         style: ratio,
-        children: t5
+        children: t7
       });
-      $[8] = ratio;
-      $[9] = t4;
-      $[10] = t5;
-      $[11] = t6;
+      $[14] = ratio;
+      $[15] = t6;
+      $[16] = t7;
+      $[17] = t8;
     } else {
-      t6 = $[11];
+      t8 = $[17];
     }
-    return t6;
+    return t8;
   }
-  const t3 = aspect !== undefined && "w-full";
-  let t4;
-  if ($[12] !== t3) {
-    t4 = clsx("block overflow-hidden rounded-lg border border-border", t3);
-    $[12] = t3;
-    $[13] = t4;
+  const t5 = aspect !== undefined && "w-full";
+  let t6;
+  if ($[18] !== t5) {
+    t6 = clsx("block overflow-hidden rounded-lg border border-border", t5);
+    $[18] = t5;
+    $[19] = t6;
   } else {
-    t4 = $[13];
+    t6 = $[19];
   }
-  let t5;
-  if ($[14] !== setOpen) {
-    t5 = () => setOpen(true);
-    $[14] = setOpen;
-    $[15] = t5;
+  let t7;
+  if ($[20] !== group || $[21] !== key || $[22] !== setOpen) {
+    t7 = () => group === null ? setOpen(true) : group.open(key);
+    $[20] = group;
+    $[21] = key;
+    $[22] = setOpen;
+    $[23] = t7;
   } else {
-    t5 = $[15];
+    t7 = $[23];
   }
-  const t6 = aspect !== undefined && "size-full object-contain";
-  let t7;
-  if ($[16] !== className || $[17] !== t6) {
-    t7 = clsx(t6, className);
-    $[16] = className;
-    $[17] = t6;
-    $[18] = t7;
+  const t8 = aspect !== undefined && "size-full object-contain";
+  let t9;
+  if ($[24] !== className || $[25] !== t8) {
+    t9 = clsx(t8, className);
+    $[24] = className;
+    $[25] = t8;
+    $[26] = t9;
   } else {
-    t7 = $[18];
+    t9 = $[26];
   }
-  let t8;
-  if ($[19] !== alt || $[20] !== src || $[21] !== t7) {
-    t8 = /*#__PURE__*/_jsx(DisplayImage, {
+  let t10;
+  if ($[27] !== alt || $[28] !== src || $[29] !== t9) {
+    t10 = /*#__PURE__*/_jsx(DisplayImage, {
       src: src,
       alt: alt,
-      className: t7
+      className: t9
     });
-    $[19] = alt;
-    $[20] = src;
-    $[21] = t7;
-    $[22] = t8;
+    $[27] = alt;
+    $[28] = src;
+    $[29] = t9;
+    $[30] = t10;
   } else {
-    t8 = $[22];
+    t10 = $[30];
   }
-  let t9;
-  if ($[23] !== ratio || $[24] !== t4 || $[25] !== t5 || $[26] !== t8) {
-    t9 = /*#__PURE__*/_jsx("button", {
+  let t11;
+  if ($[31] !== ratio || $[32] !== t10 || $[33] !== t6 || $[34] !== t7) {
+    t11 = /*#__PURE__*/_jsx("button", {
+      ref: buttonRef,
       type: "button",
-      className: t4,
+      className: t6,
       style: ratio,
-      onClick: t5,
-      children: t8
+      onClick: t7,
+      children: t10
     });
-    $[23] = ratio;
-    $[24] = t4;
-    $[25] = t5;
-    $[26] = t8;
-    $[27] = t9;
-  } else {
-    t9 = $[27];
-  }
-  let t10;
-  if ($[28] !== actions || $[29] !== alt || $[30] !== open || $[31] !== setOpen || $[32] !== src) {
-    t10 = /*#__PURE__*/_jsx(Lightbox, {
-      src: src,
-      alt: alt,
+    $[31] = ratio;
+    $[32] = t10;
+    $[33] = t6;
+    $[34] = t7;
+    $[35] = t11;
+  } else {
+    t11 = $[35];
+  }
+  let t12;
+  if ($[36] !== actions || $[37] !== alt || $[38] !== group || $[39] !== key || $[40] !== open || $[41] !== setOpen || $[42] !== src) {
+    t12 = group === null && /*#__PURE__*/_jsx(Lightbox, {
+      images: [{
+        key,
+        src,
+        alt,
+        element: null
+      }],
+      index: 0,
       open: open,
       onOpenChange: setOpen,
       actions: actions
     });
-    $[28] = actions;
-    $[29] = alt;
-    $[30] = open;
-    $[31] = setOpen;
-    $[32] = src;
-    $[33] = t10;
+    $[36] = actions;
+    $[37] = alt;
+    $[38] = group;
+    $[39] = key;
+    $[40] = open;
+    $[41] = setOpen;
+    $[42] = src;
+    $[43] = t12;
   } else {
-    t10 = $[33];
+    t12 = $[43];
   }
-  let t11;
-  if ($[34] !== t10 || $[35] !== t9) {
-    t11 = /*#__PURE__*/_jsxs(_Fragment, {
-      children: [t9, t10]
+  let t13;
+  if ($[44] !== t11 || $[45] !== t12) {
+    t13 = /*#__PURE__*/_jsxs(_Fragment, {
+      children: [t11, t12]
     });
-    $[34] = t10;
-    $[35] = t9;
-    $[36] = t11;
+    $[44] = t11;
+    $[45] = t12;
+    $[46] = t13;
   } else {
-    t11 = $[36];
+    t13 = $[46];
   }
-  return t11;
+  return t13;
 }