@opengeni/react 6.5.2-canary.41607687019001 → 6.7.0

package/dist/chunk-XHIQ5I6N.js

@@ -0,0 +1,918 @@
+"use client";
+import {
+  Button
+} from "./chunk-7QQN3KNP.js";
+import {
+  containedPortal
+} from "./chunk-UD6AAZSC.js";
+import {
+  usePortalTokenStyle
+} from "./chunk-XEA5BCMA.js";
+import {
+  cn
+} from "./chunk-TXS65BB2.js";
+import {
+  useOpenGeniText
+} from "./chunk-7T2ZE3VT.js";
+
+// src/lib/keyboard-targets.ts
+var TEXT_ENTRY = 'input, textarea, select, [contenteditable]:not([contenteditable="false"])';
+function isTextEntryTarget(target) {
+  if (!(target instanceof HTMLElement)) return false;
+  return target.isContentEditable || target.closest(TEXT_ENTRY) !== null;
+}
+function ownsArrowKeys(target) {
+  return isTextEntryTarget(target) || target instanceof HTMLElement && target.closest('[role="menu"], [role="listbox"], [role="grid"], [role="slider"]') !== null;
+}
+
+// src/components/zoom-pan-image.tsx
+import { MinusIcon, PlusIcon } from "lucide-react";
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+
+// src/lib/zoom-pan.ts
+var MAX_FIT_UPSCALE = 2;
+var MAX_ZOOM = 8;
+var FIT_PADDING = 16;
+var STEPS = [0.1, 0.25, 0.5, 0.75, 1, 1.25, 1.5, 2, 3, 4, 6, 8];
+var EPSILON = 5e-3;
+function fitScale(image, viewport, padding = FIT_PADDING) {
+  const width = Math.max(1, viewport.width - padding * 2);
+  const height = Math.max(1, viewport.height - padding * 2);
+  return Math.min(width / image.width, height / image.height, MAX_FIT_UPSCALE);
+}
+function minScale(image, viewport) {
+  return Math.min(fitScale(image, viewport), 1);
+}
+function clampAxis(offset, content, viewport) {
+  if (content <= viewport) return (viewport - content) / 2;
+  return Math.min(0, Math.max(viewport - content, offset));
+}
+function clampView(view, image, viewport) {
+  return {
+    ...view,
+    x: clampAxis(view.x, image.width * view.scale, viewport.width),
+    y: clampAxis(view.y, image.height * view.scale, viewport.height)
+  };
+}
+function fitView(image, viewport) {
+  return clampView({ scale: fitScale(image, viewport), x: 0, y: 0, fit: true }, image, viewport);
+}
+function zoomTo(view, scale, point, image, viewport) {
+  const fit = fitScale(image, viewport);
+  const next = Math.min(MAX_ZOOM, Math.max(minScale(image, viewport), scale));
+  if (Math.abs(next - fit) < EPSILON) return fitView(image, viewport);
+  const ratio = next / view.scale;
+  return clampView(
+    {
+      scale: next,
+      x: point.x - (point.x - view.x) * ratio,
+      y: point.y - (point.y - view.y) * ratio,
+      fit: false
+    },
+    image,
+    viewport
+  );
+}
+function stepScale(view, direction, image, viewport) {
+  const stops = [...STEPS, fitScale(image, viewport)].sort((a, b) => a - b);
+  if (direction > 0) return stops.find((stop) => stop > view.scale + EPSILON) ?? MAX_ZOOM;
+  return stops.reverse().find((stop) => stop < view.scale - EPSILON) ?? minScale(image, viewport);
+}
+function panBy(view, dx, dy, image, viewport) {
+  return clampView({ ...view, x: view.x + dx, y: view.y + dy }, image, viewport);
+}
+function pinchTo(view, from, to, image, viewport) {
+  const moved = panBy(
+    view,
+    to.middle.x - from.middle.x,
+    to.middle.y - from.middle.y,
+    image,
+    viewport
+  );
+  if (!(from.distance > 0) || !(to.distance > 0)) return moved;
+  return zoomTo(moved, moved.scale * (to.distance / from.distance), to.middle, image, viewport);
+}
+function canPan(view, image, viewport) {
+  return image.width * view.scale > viewport.width + 0.5 || image.height * view.scale > viewport.height + 0.5;
+}
+function toggleAt(view, point, image, viewport) {
+  if (!view.fit) return fitView(image, viewport);
+  const target = Math.abs(view.scale - 1) < EPSILON ? 2 : 1;
+  return zoomTo(view, target, point, image, viewport);
+}
+function clickZoomDirection(view, image, viewport) {
+  const next = toggleAt(view, { x: 0, y: 0 }, image, viewport);
+  return next.scale > view.scale + EPSILON ? "in" : "out";
+}
+function zoomPercent(view) {
+  return Math.round(view.scale * 100);
+}
+
+// src/components/zoom-pan-image.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function validSize(size) {
+  return !!size && size.width > 0 && size.height > 0;
+}
+function settle(state) {
+  if (!validSize(state.image) || !validSize(state.viewport)) return { ...state, view: null };
+  if (!state.view || state.view.fit)
+    return { ...state, view: fitView(state.image, state.viewport) };
+  return { ...state, view: clampView(state.view, state.image, state.viewport) };
+}
+function useZoomPan(resetKey) {
+  const [stored, setStored] = useState({
+    key: resetKey,
+    image: null,
+    viewport: null,
+    view: null
+  });
+  const state = stored.key === resetKey ? stored : { key: resetKey, image: null, viewport: stored.viewport, view: null };
+  if (stored.key !== resetKey) setStored(state);
+  const key = useRef(resetKey);
+  key.current = resetKey;
+  const update = useCallback((change) => {
+    setStored(
+      (current) => change(
+        current.key === key.current ? current : { key: key.current, image: null, viewport: current.viewport, view: null }
+      )
+    );
+  }, []);
+  const move = useCallback(
+    (change) => update(
+      (current) => current.view && current.image && current.viewport ? { ...current, view: change(current.view, current.image, current.viewport) } : current
+    ),
+    [update]
+  );
+  const { image, viewport, view } = state;
+  return useMemo(() => {
+    const centre = (size) => size ? { x: size.width / 2, y: size.height / 2 } : { x: 0, y: 0 };
+    return {
+      view,
+      image,
+      viewport,
+      percent: view ? zoomPercent(view) : null,
+      canZoomIn: !!view && view.scale < MAX_ZOOM - 1e-3,
+      canZoomOut: !!view && !!image && !!viewport && view.scale > minScale(image, viewport) + 1e-3,
+      setImage: (size) => update(
+        (current) => validSize(size) && (current.image?.width !== size.width || current.image?.height !== size.height) ? settle({ ...current, image: size, view: null }) : current
+      ),
+      setViewport: (size) => update(
+        (current) => validSize(size) && (current.viewport?.width !== size.width || current.viewport?.height !== size.height) ? settle({ ...current, viewport: size }) : current
+      ),
+      zoomIn: (point) => move(
+        (current, img, port) => zoomTo(current, stepScale(current, 1, img, port), point ?? centre(port), img, port)
+      ),
+      zoomOut: (point) => move(
+        (current, img, port) => zoomTo(current, stepScale(current, -1, img, port), point ?? centre(port), img, port)
+      ),
+      zoomBy: (factor, point) => move((current, img, port) => zoomTo(current, current.scale * factor, point, img, port)),
+      pinch: (from, to) => move((current, img, port) => pinchTo(current, from, to, img, port)),
+      fit: () => move((_current, img, port) => fitView(img, port)),
+      toggleAt: (point) => move((current, img, port) => toggleAt(current, point, img, port)),
+      panBy: (dx, dy) => move((current, img, port) => panBy(current, dx, dy, img, port))
+    };
+  }, [image, viewport, view, update, move]);
+}
+function zoomShortcut(event) {
+  if (!(event.metaKey || event.ctrlKey) || event.altKey) return null;
+  switch (event.key) {
+    case "=":
+    case "+":
+      return "in";
+    case "-":
+    case "_":
+      return "out";
+    case "0":
+      return "fit";
+  }
+  switch (event.code) {
+    case "Equal":
+    case "NumpadAdd":
+      return "in";
+    case "Minus":
+    case "NumpadSubtract":
+      return "out";
+    case "Digit0":
+    case "Numpad0":
+      return "fit";
+  }
+  return null;
+}
+function useZoomPanShortcuts(controller, enabled) {
+  const latest = useRef(controller);
+  latest.current = controller;
+  useEffect(() => {
+    if (!enabled) return;
+    const onKeyDown = (event) => {
+      const action = zoomShortcut(event);
+      if (!action || isTextEntryTarget(event.target)) return;
+      event.preventDefault();
+      event.stopPropagation();
+      if (!latest.current.view) return;
+      if (action === "in") latest.current.zoomIn();
+      else if (action === "out") latest.current.zoomOut();
+      else latest.current.fit();
+    };
+    window.addEventListener("keydown", onKeyDown, { capture: true });
+    return () => window.removeEventListener("keydown", onKeyDown, { capture: true });
+  }, [enabled]);
+}
+var CLICK_SLOP = 4;
+function distance(a, b) {
+  return Math.hypot(a.x - b.x, a.y - b.y);
+}
+function middle(a, b) {
+  return { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 };
+}
+function wheelPixels(event, delta) {
+  return event.deltaMode === 1 ? delta * 16 : event.deltaMode === 2 ? delta * 400 : delta;
+}
+function ZoomPanSurface({
+  controller,
+  src,
+  alt,
+  naturalSize,
+  onBackdropClick,
+  onError,
+  className,
+  imageClassName
+}) {
+  const surface = useRef(null);
+  const img = useRef(null);
+  const latest = useRef(controller);
+  latest.current = controller;
+  const pointers = useRef(/* @__PURE__ */ new Map());
+  const gesture = useRef(null);
+  const [dragging, setDragging] = useState(false);
+  const { view, image, viewport } = controller;
+  const local = useCallback((event) => {
+    const rect = surface.current?.getBoundingClientRect();
+    return { x: event.clientX - (rect?.left ?? 0), y: event.clientY - (rect?.top ?? 0) };
+  }, []);
+  const knownWidth = naturalSize?.width ?? 0;
+  const knownHeight = naturalSize?.height ?? 0;
+  useLayoutEffect(() => {
+    if (knownWidth > 0 && knownHeight > 0)
+      latest.current.setImage({ width: knownWidth, height: knownHeight });
+  }, [knownWidth, knownHeight]);
+  useLayoutEffect(() => {
+    const element = surface.current;
+    if (!element) return;
+    const measure = () => {
+      const width = element.clientWidth;
+      const height = element.clientHeight;
+      if (width > 0 && height > 0) latest.current.setViewport({ width, height });
+    };
+    const loaded = img.current;
+    if (loaded?.complete && loaded.naturalWidth > 0 && loaded.naturalHeight > 0)
+      latest.current.setImage({ width: loaded.naturalWidth, height: loaded.naturalHeight });
+    measure();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(measure);
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, []);
+  useEffect(() => {
+    const element = surface.current;
+    if (!element) return;
+    const onWheel = (event) => {
+      const current = latest.current;
+      if (!current.view || !current.image || !current.viewport) return;
+      if (event.ctrlKey || event.metaKey) {
+        event.preventDefault();
+        const delta = Math.max(-60, Math.min(60, wheelPixels(event, event.deltaY)));
+        current.zoomBy(Math.exp(-delta * 6e-3), local(event));
+        return;
+      }
+      if (!canPan(current.view, current.image, current.viewport)) return;
+      event.preventDefault();
+      const dx = wheelPixels(event, event.shiftKey && !event.deltaX ? event.deltaY : event.deltaX);
+      const dy = event.shiftKey && !event.deltaX ? 0 : wheelPixels(event, event.deltaY);
+      current.panBy(-dx, -dy);
+    };
+    let gestureScale = 1;
+    const onGestureStart = (event) => {
+      event.preventDefault();
+      gestureScale = 1;
+    };
+    const onGestureChange = (event) => {
+      const scale = event.scale;
+      const point = event;
+      if (typeof scale !== "number" || scale <= 0) return;
+      event.preventDefault();
+      latest.current.zoomBy(
+        scale / gestureScale,
+        local({ clientX: point.clientX ?? 0, clientY: point.clientY ?? 0 })
+      );
+      gestureScale = scale;
+    };
+    element.addEventListener("wheel", onWheel, { passive: false });
+    element.addEventListener("gesturestart", onGestureStart, { passive: false });
+    element.addEventListener("gesturechange", onGestureChange, { passive: false });
+    return () => {
+      element.removeEventListener("wheel", onWheel);
+      element.removeEventListener("gesturestart", onGestureStart);
+      element.removeEventListener("gesturechange", onGestureChange);
+    };
+  }, [local]);
+  const insideImage = (point, client) => {
+    if (view && image)
+      return point.x >= view.x && point.y >= view.y && point.x <= view.x + image.width * view.scale && point.y <= view.y + image.height * view.scale;
+    const rect = img.current?.getBoundingClientRect();
+    return !!rect && rect.width > 0 && client.clientX >= rect.left && client.clientX <= rect.right && client.clientY >= rect.top && client.clientY <= rect.bottom;
+  };
+  const onPointerDown = (event) => {
+    if (event.pointerType === "mouse" && event.button !== 0) return;
+    try {
+      event.currentTarget.setPointerCapture(event.pointerId);
+    } catch {
+    }
+    const point = local(event);
+    pointers.current.set(event.pointerId, point);
+    const points = [...pointers.current.values()];
+    if (points.length === 1) gesture.current = { moved: false, start: point, pinch: null };
+    else if (points.length === 2 && gesture.current) {
+      gesture.current.moved = true;
+      gesture.current.pinch = {
+        distance: distance(points[0], points[1]),
+        middle: middle(points[0], points[1])
+      };
+    }
+  };
+  const onPointerMove = (event) => {
+    const previous = pointers.current.get(event.pointerId);
+    const current = gesture.current;
+    if (!previous || !current) return;
+    const point = local(event);
+    pointers.current.set(event.pointerId, point);
+    const points = [...pointers.current.values()];
+    if (points.length >= 2 && current.pinch) {
+      const next = {
+        distance: distance(points[0], points[1]),
+        middle: middle(points[0], points[1])
+      };
+      controller.pinch(current.pinch, next);
+      current.pinch = next;
+      return;
+    }
+    if (!current.moved && distance(point, current.start) > CLICK_SLOP) current.moved = true;
+    if (current.moved && view && image && viewport && canPan(view, image, viewport)) {
+      setDragging(true);
+      controller.panBy(point.x - previous.x, point.y - previous.y);
+    }
+  };
+  const onPointerEnd = (event) => {
+    if (!pointers.current.delete(event.pointerId)) return;
+    const current = gesture.current;
+    if (pointers.current.size > 0) {
+      if (current) current.pinch = null;
+      return;
+    }
+    gesture.current = null;
+    setDragging(false);
+    if (event.type !== "pointerup" || !current || current.moved) return;
+    const point = local(event);
+    if (!insideImage(point, event)) onBackdropClick?.();
+    else if (view) controller.toggleAt(point);
+  };
+  const pannable = !!view && !!image && !!viewport && canPan(view, image, viewport);
+  const clickZoom = view && image && viewport ? clickZoomDirection(view, image, viewport) : null;
+  const imageCursor = dragging ? "cursor-grabbing" : pannable ? "cursor-grab" : clickZoom === "in" ? "cursor-zoom-in" : clickZoom === "out" ? "cursor-zoom-out" : void 0;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: surface,
+      "data-zoom-pan-surface": true,
+      role: "presentation",
+      onPointerDown,
+      onPointerMove,
+      onPointerUp: onPointerEnd,
+      onPointerCancel: onPointerEnd,
+      className: cn(
+        "absolute inset-0 touch-none overflow-hidden select-none",
+        dragging && "cursor-grabbing",
+        className
+      ),
+      children: /* @__PURE__ */ jsx(
+        "img",
+        {
+          ref: img,
+          src,
+          alt,
+          draggable: false,
+          "data-zoom-scale": view ? view.scale.toFixed(3) : void 0,
+          "data-zoom-click": clickZoom ?? void 0,
+          onLoad: (event) => {
+            const element = event.currentTarget;
+            if (element.naturalWidth > 0 && element.naturalHeight > 0)
+              controller.setImage({ width: element.naturalWidth, height: element.naturalHeight });
+          },
+          onError,
+          style: view && image ? {
+            position: "absolute",
+            left: 0,
+            top: 0,
+            width: image.width * view.scale,
+            height: image.height * view.scale,
+            maxWidth: "none",
+            maxHeight: "none",
+            // Whole pixels, so an image at actual size is never resampled.
+            transform: `translate3d(${Math.round(view.x)}px, ${Math.round(view.y)}px, 0)`,
+            // Past 2x, show the screenshot's own pixels crisply instead of blurring them.
+            imageRendering: view.scale >= 2 ? "pixelated" : void 0
+          } : void 0,
+          className: cn(
+            // The image takes the pointer only for its cursor; presses still reach
+            // the surface, which decides between zoom and backdrop by position.
+            "block [-webkit-touch-callout:none]",
+            imageCursor,
+            !view && "absolute inset-0 m-auto max-h-[calc(100%-2rem)] max-w-[calc(100%-2rem)]",
+            imageClassName
+          )
+        }
+      )
+    }
+  );
+}
+function shortcutModifier() {
+  if (typeof navigator === "undefined") return "Ctrl";
+  return /Mac|iPhone|iPad/u.test(navigator.platform) ? "\u2318" : "Ctrl";
+}
+function ZoomControls({
+  controller,
+  labels,
+  className,
+  buttonClassName
+}) {
+  const modifier = useMemo(shortcutModifier, []);
+  const t = useOpenGeniText();
+  const zoomOut = labels?.zoomOut ?? t("timeline.screenshotLightbox.zoomOut");
+  const zoomIn = labels?.zoomIn ?? t("timeline.screenshotLightbox.zoomIn");
+  const fit = labels?.fit ?? t("timeline.screenshotLightbox.fit");
+  const { view } = controller;
+  return /* @__PURE__ */ jsxs("div", { "data-zoom-controls": true, className: cn("flex shrink-0 items-center gap-0.5", className), children: [
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        type: "button",
+        variant: "ghost",
+        size: "icon-sm",
+        className: cn("pointer-coarse:size-11", buttonClassName),
+        "aria-label": zoomOut,
+        title: `${zoomOut} (${modifier}\u2212)`,
+        disabled: !controller.canZoomOut,
+        onClick: () => controller.zoomOut(),
+        children: /* @__PURE__ */ jsx(MinusIcon, { "aria-hidden": "true" })
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { "data-zoom-percent": true, className: "min-w-11 text-center text-xs tabular-nums opacity-80", children: controller.percent === null ? "" : `${controller.percent}%` }),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        type: "button",
+        variant: "ghost",
+        size: "icon-sm",
+        className: cn("pointer-coarse:size-11", buttonClassName),
+        "aria-label": zoomIn,
+        title: `${zoomIn} (${modifier}+)`,
+        disabled: !controller.canZoomIn,
+        onClick: () => controller.zoomIn(),
+        children: /* @__PURE__ */ jsx(PlusIcon, { "aria-hidden": "true" })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        type: "button",
+        variant: "ghost",
+        size: "sm",
+        className: cn("h-8 px-2 text-xs pointer-coarse:h-11", buttonClassName),
+        title: `${fit} (${modifier}0)`,
+        disabled: !view || view.fit,
+        onClick: () => controller.fit(),
+        children: fit
+      }
+    )
+  ] });
+}
+
+// src/timeline/screenshot-lightbox.tsx
+import { ChevronLeftIcon, ChevronRightIcon, DownloadIcon, XIcon } from "lucide-react";
+import { AnimatePresence, motion } from "motion/react";
+import {
+  createContext,
+  useCallback as useCallback2,
+  useContext,
+  useEffect as useEffect2,
+  useMemo as useMemo2,
+  useRef as useRef2,
+  useState as useState2
+} from "react";
+import { Dialog } from "radix-ui";
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var DialogContainedPortal = containedPortal(Dialog.Portal);
+var LightboxContext = createContext(null);
+var LightboxGalleryContext = createContext(null);
+var GALLERY_ROOT_SELECTOR = "[data-og-timeline-scroller]";
+var LIGHTBOX_INTERACTIVE_SELECTOR = "a, button, [data-zoom-controls], [data-zoom-pan-surface]";
+function isLightboxBackdrop(target, content) {
+  return target instanceof Element && content.contains(target) && !target.closest(LIGHTBOX_INTERACTIVE_SELECTOR);
+}
+var NO_WINDOW_DRAG = "[-webkit-app-region:no-drag] [app-region:no-drag]";
+var ROUND_BUTTON = cn(
+  "inline-flex items-center justify-center rounded-full",
+  "border border-white/15 bg-black/60 text-white/70 backdrop-blur",
+  "transition-colors hover:border-white/30 hover:bg-white/15 hover:text-white",
+  "active:border-white/40 active:bg-white/25 active:text-white",
+  "focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-white/50"
+);
+function useLightboxGalleryItem(ref, entry) {
+  const registry = useContext(LightboxGalleryContext);
+  const latest = useRef2(entry);
+  latest.current = entry;
+  const enabled = entry !== null;
+  useEffect2(() => {
+    const element = ref.current;
+    if (!registry || !element || !enabled) return;
+    return registry.register({
+      element,
+      entry: latest
+    });
+  }, [registry, ref, enabled]);
+}
+function useLightbox() {
+  return useContext(LightboxContext) ?? NOOP;
+}
+function useLightboxOptional() {
+  return useContext(LightboxContext);
+}
+var NOOP = { open: () => {
+} };
+function createLightboxSourceOwner() {
+  let releaseCurrent = null;
+  return {
+    replace(release) {
+      const previous = releaseCurrent;
+      releaseCurrent = release ?? null;
+      previous?.();
+    },
+    release() {
+      const release = releaseCurrent;
+      releaseCurrent = null;
+      release?.();
+    }
+  };
+}
+function LightboxProvider({ children }) {
+  const ancestor = useContext(LightboxContext);
+  if (ancestor) {
+    return /* @__PURE__ */ jsx2(Fragment, { children });
+  }
+  return /* @__PURE__ */ jsx2(LightboxRoot, { children });
+}
+function LightboxRoot({ children }) {
+  const t = useOpenGeniText();
+  const [state, setState] = useState2(null);
+  const [tokenSource, setTokenSource] = useState2(null);
+  const sourceOwner = useMemo2(() => createLightboxSourceOwner(), []);
+  const portalStyle = usePortalTokenStyle(tokenSource);
+  const entries = useRef2(/* @__PURE__ */ new Set());
+  const [gallery, setGallery] = useState2(null);
+  const generation = useRef2(0);
+  const pressedBackdrop = useRef2(false);
+  const zoom = useZoomPan(state?.src ?? "");
+  useZoomPanShortcuts(zoom, state !== null);
+  const registry = useMemo2(
+    () => ({
+      register(item) {
+        entries.current.add(item);
+        return () => {
+          entries.current.delete(item);
+        };
+      }
+    }),
+    []
+  );
+  const releaseCurrentSource = useCallback2(() => {
+    sourceOwner.release();
+  }, [sourceOwner]);
+  useEffect2(
+    () => () => {
+      generation.current++;
+      releaseCurrentSource();
+    },
+    [releaseCurrentSource]
+  );
+  const discoverGallery = useCallback2((source, token) => {
+    const root = source.closest(GALLERY_ROOT_SELECTOR) ?? source.ownerDocument.body;
+    const candidates = [...entries.current].filter((item) => item.element.isConnected && root.contains(item.element)).sort(
+      (a, b) => a.element.compareDocumentPosition(b.element) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1
+    );
+    const current = candidates.filter((item) => item.element.contains(source)).pop();
+    if (!current) return;
+    void Promise.all(
+      candidates.map(
+        (item) => item === current ? Promise.resolve(true) : (item.entry.current.isImage?.() ?? Promise.resolve(true)).catch(() => false)
+      )
+    ).then((images) => {
+      if (generation.current !== token) return;
+      const items = candidates.filter((_, index) => images[index]);
+      if (items.length > 1) setGallery({ items, index: items.indexOf(current) });
+    });
+  }, []);
+  const open = useCallback2(
+    (src, caption, source, label = t("timeline.screenshotLightbox.screenshot"), downloadFilename, controlLabels, releaseSource) => {
+      const token = ++generation.current;
+      sourceOwner.replace(releaseSource);
+      setTokenSource(source ?? null);
+      setGallery(null);
+      setState({
+        src,
+        label,
+        ...caption ? { caption } : {},
+        ...downloadFilename ? { downloadFilename } : {},
+        ...controlLabels ? { controlLabels } : {}
+      });
+      if (source) discoverGallery(source, token);
+    },
+    [sourceOwner, discoverGallery, t]
+  );
+  const close = useCallback2(() => {
+    generation.current++;
+    releaseCurrentSource();
+    setState(null);
+    setTokenSource(null);
+    setGallery(null);
+  }, [releaseCurrentSource]);
+  const step = useCallback2(
+    (delta) => {
+      if (!gallery) return;
+      const token = ++generation.current;
+      const count = gallery.items.length;
+      void (async () => {
+        for (let offset = 1; offset < count; offset++) {
+          const index = ((gallery.index + delta * offset) % count + count) % count;
+          const image = await gallery.items[index].entry.current.load().catch(() => null);
+          if (generation.current !== token) {
+            image?.release?.();
+            return;
+          }
+          if (!image) continue;
+          sourceOwner.replace(image.release);
+          setGallery({ items: gallery.items, index });
+          setState(
+            (previous) => previous ? {
+              src: image.src,
+              label: image.label ?? previous.label,
+              ...image.caption ? { caption: image.caption } : {},
+              ...previous.controlLabels ? { controlLabels: previous.controlLabels } : {}
+            } : previous
+          );
+          return;
+        }
+      })();
+    },
+    [gallery, sourceOwner]
+  );
+  const galleryOpen = state !== null && gallery !== null;
+  useEffect2(() => {
+    if (!galleryOpen) return;
+    const onKeyDown = (event) => {
+      if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey) return;
+      if (isTextEntryTarget(event.target)) return;
+      if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
+        event.preventDefault();
+        step(event.key === "ArrowLeft" ? -1 : 1);
+      }
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [galleryOpen, step]);
+  const controller = useMemo2(() => ({ open }), [open]);
+  return /* @__PURE__ */ jsxs2(LightboxContext.Provider, { value: controller, children: [
+    /* @__PURE__ */ jsx2(LightboxGalleryContext.Provider, { value: registry, children }),
+    /* @__PURE__ */ jsx2(Dialog.Root, { open: state !== null, onOpenChange: (next) => !next && close(), children: /* @__PURE__ */ jsx2(AnimatePresence, { children: state !== null ? /* @__PURE__ */ jsxs2(DialogContainedPortal, { forceMount: true, children: [
+      /* @__PURE__ */ jsx2(Dialog.Overlay, { asChild: true, forceMount: true, children: /* @__PURE__ */ jsx2(
+        motion.div,
+        {
+          initial: { opacity: 0 },
+          animate: { opacity: 1 },
+          exit: { opacity: 0 },
+          transition: { duration: 0.15 },
+          className: cn(
+            "og-root fixed inset-0 z-50 bg-black/90 backdrop-blur-md",
+            NO_WINDOW_DRAG
+          ),
+          style: portalStyle
+        }
+      ) }),
+      /* @__PURE__ */ jsx2(
+        Dialog.Content,
+        {
+          asChild: true,
+          forceMount: true,
+          "data-window-layer": true,
+          "aria-label": state.label,
+          onOpenAutoFocus: (event) => event.preventDefault(),
+          children: /* @__PURE__ */ jsxs2(
+            motion.div,
+            {
+              initial: { opacity: 0, scale: 0.98 },
+              animate: { opacity: 1, scale: 1 },
+              exit: { opacity: 0, scale: 0.98 },
+              transition: { duration: 0.18, ease: [0.16, 1, 0.3, 1] },
+              onPointerDown: (event) => {
+                pressedBackdrop.current = isLightboxBackdrop(event.target, event.currentTarget);
+              },
+              onClick: (event) => {
+                const pressed = pressedBackdrop.current;
+                pressedBackdrop.current = false;
+                const selection = event.currentTarget.ownerDocument.getSelection();
+                if (pressed && (!selection || selection.isCollapsed) && isLightboxBackdrop(event.target, event.currentTarget)) {
+                  close();
+                }
+              },
+              className: cn(
+                "og-root fixed inset-0 z-50 flex items-center justify-center p-6 sm:p-12",
+                NO_WINDOW_DRAG
+              ),
+              style: portalStyle,
+              children: [
+                /* @__PURE__ */ jsx2(Dialog.Title, { className: "sr-only", children: state.label }),
+                /* @__PURE__ */ jsx2(Dialog.Description, { className: "sr-only", children: state.caption ?? t("timeline.screenshotLightbox.expandedLowercase", {
+                  lowerCase: state.label.toLowerCase()
+                }) }),
+                gallery ? /* @__PURE__ */ jsx2(
+                  LightboxStepButton,
+                  {
+                    direction: "previous",
+                    label: state.controlLabels?.previous ?? t("timeline.screenshotLightbox.previousImage"),
+                    onClick: () => step(-1)
+                  }
+                ) : null,
+                /* @__PURE__ */ jsxs2(
+                  "figure",
+                  {
+                    className: cn(
+                      "m-0 flex size-full min-h-0 flex-col items-center gap-3",
+                      gallery && "px-12 sm:px-16"
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsx2("div", { className: "relative min-h-0 w-full flex-1", children: /* @__PURE__ */ jsx2(
+                        ZoomPanSurface,
+                        {
+                          controller: zoom,
+                          src: state.src,
+                          alt: state.caption ?? state.label,
+                          onBackdropClick: close,
+                          imageClassName: "rounded-og-md border border-white/10 shadow-og-lg"
+                        }
+                      ) }),
+                      /* @__PURE__ */ jsx2(
+                        ZoomControls,
+                        {
+                          controller: zoom,
+                          labels: {
+                            zoomIn: state.controlLabels?.zoomIn ?? t("timeline.screenshotLightbox.zoomIn"),
+                            zoomOut: state.controlLabels?.zoomOut ?? t("timeline.screenshotLightbox.zoomOut"),
+                            fit: state.controlLabels?.fit ?? t("timeline.screenshotLightbox.fit")
+                          },
+                          className: "rounded-full border border-white/15 bg-black/60 px-1 text-white/70 backdrop-blur",
+                          buttonClassName: "rounded-full text-white/70 hover:bg-white/10 hover:text-white disabled:text-white/30"
+                        }
+                      ),
+                      gallery ? /* @__PURE__ */ jsxs2("figcaption", { className: "flex max-w-2xl flex-col items-center gap-1 text-center font-og-mono text-og-xs", children: [
+                        state.caption ? /* @__PURE__ */ jsx2("span", { className: "text-white/55", children: state.caption }) : null,
+                        /* @__PURE__ */ jsxs2("span", { className: "tabular-nums text-white/35", "aria-live": "polite", children: [
+                          gallery.index + 1,
+                          " ",
+                          t("timeline.screenshotLightbox.ofLength", {
+                            length: gallery.items.length
+                          })
+                        ] })
+                      ] }) : state.caption ? /* @__PURE__ */ jsx2("figcaption", { className: "max-w-2xl text-center font-og-mono text-og-xs text-white/55", children: state.caption }) : /* @__PURE__ */ jsx2("figcaption", { className: "font-og-mono text-og-xs uppercase tracking-[0.1em] text-white/35", children: t("timeline.screenshotLightbox.escOrClickOutsideTo") })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx2(
+                  ScreenshotLightboxControls,
+                  {
+                    src: state.src,
+                    downloadFilename: state.downloadFilename,
+                    controlLabels: state.controlLabels
+                  }
+                ),
+                gallery ? /* @__PURE__ */ jsx2(
+                  LightboxStepButton,
+                  {
+                    direction: "next",
+                    label: state.controlLabels?.next ?? t("timeline.screenshotLightbox.nextImage"),
+                    onClick: () => step(1)
+                  }
+                ) : null
+              ]
+            }
+          )
+        }
+      )
+    ] }) : null }) })
+  ] });
+}
+function LightboxStepButton({
+  direction,
+  label,
+  onClick
+}) {
+  const Icon = direction === "previous" ? ChevronLeftIcon : ChevronRightIcon;
+  return /* @__PURE__ */ jsx2(
+    "button",
+    {
+      type: "button",
+      onClick,
+      "aria-label": label,
+      className: cn(
+        ROUND_BUTTON,
+        "absolute top-1/2 z-10 size-11 -translate-y-1/2",
+        direction === "previous" ? "left-3 sm:left-6" : "right-3 sm:right-6"
+      ),
+      children: /* @__PURE__ */ jsx2(Icon, { className: "size-5" })
+    }
+  );
+}
+function ScreenshotLightboxControls({
+  src,
+  downloadFilename,
+  controlLabels
+}) {
+  const t = useOpenGeniText();
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      "data-lightbox-controls": true,
+      className: "absolute right-3 top-3 z-10 flex items-center gap-2 sm:right-6 sm:top-6",
+      children: [
+        downloadFilename ? /* @__PURE__ */ jsx2(
+          "a",
+          {
+            href: src,
+            download: downloadFilename,
+            className: cn(ROUND_BUTTON, "size-9"),
+            "aria-label": controlLabels?.download ?? t("timeline.screenshotLightbox.downloadDownloadfilename", { downloadFilename }),
+            children: /* @__PURE__ */ jsx2(DownloadIcon, { className: "size-4" })
+          }
+        ) : null,
+        /* @__PURE__ */ jsx2(
+          Dialog.Close,
+          {
+            className: cn(ROUND_BUTTON, "size-9"),
+            "aria-label": controlLabels?.close ?? t("timeline.screenshotLightbox.close"),
+            children: /* @__PURE__ */ jsx2(XIcon, { className: "size-4" })
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/timeline/shimmer-text.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function ShimmerText({
+  active = true,
+  tone = "text",
+  className,
+  children
+}) {
+  return /* @__PURE__ */ jsxs3(
+    "span",
+    {
+      className: cn("og-shimmer", className),
+      "data-og-shimmer": active === false ? void 0 : active === true ? "on" : "ancestor",
+      "data-og-shimmer-tone": tone,
+      children: [
+        children,
+        active === false ? null : typeof children === "string" ? /* @__PURE__ */ jsx3("span", { className: "og-shimmer-beam", "aria-hidden": "true", "data-og-shimmer-copy": children }) : /* @__PURE__ */ jsx3("span", { className: "og-shimmer-beam", "aria-hidden": "true", children: /* @__PURE__ */ jsx3("span", { className: cn("og-shimmer-copy", className), children }) })
+      ]
+    }
+  );
+}
+
+export {
+  ownsArrowKeys,
+  useZoomPan,
+  useZoomPanShortcuts,
+  ZoomPanSurface,
+  ZoomControls,
+  useLightboxGalleryItem,
+  useLightbox,
+  useLightboxOptional,
+  LightboxProvider,
+  ShimmerText
+};
+//# sourceMappingURL=chunk-XHIQ5I6N.js.map