@opengeni/react 2.5.0-canary.1 → 3.0.0-canary.0

package/src/timeline/screenshot-lightbox.tsx

@@ -1,6 +1,14 @@
 import { DownloadIcon, XIcon } from "lucide-react";
 import { AnimatePresence, motion } from "motion/react";
-import { createContext, useCallback, useContext, useMemo, useState, type ReactNode } from "react";
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+  type ReactNode,
+} from "react";
 import { Dialog } from "radix-ui";
 import { cn } from "../lib/cn";
 import { usePortalTokenStyle } from "../lib/use-portal-token-style";
@@ -25,9 +33,16 @@ type LightboxController = {
     source?: HTMLElement | null,
     label?: string,
     downloadFilename?: string,
+    controlLabels?: LightboxControlLabels,
+    releaseSource?: () => void,
   ) => void;
 };
 
+export type LightboxControlLabels = {
+  download?: string | undefined;
+  close?: string | undefined;
+};
+
 const LightboxContext = createContext<LightboxController | null>(null);
 
 /** Open the app-level screenshot lightbox. No-op outside a `LightboxProvider`. */
@@ -46,6 +61,23 @@ export function useLightboxOptional(): LightboxController | null {
 
 const NOOP: LightboxController = { open: () => {} };
 
+/** @internal Owns one optional retained lightbox source and releases it exactly once. */
+export function createLightboxSourceOwner() {
+  let releaseCurrent: (() => void) | null = null;
+  return {
+    replace(release?: (() => void) | undefined) {
+      const previous = releaseCurrent;
+      releaseCurrent = release ?? null;
+      previous?.();
+    },
+    release() {
+      const release = releaseCurrent;
+      releaseCurrent = null;
+      release?.();
+    },
+  };
+}
+
 /**
  * The app-level screenshot lightbox. Render once near the timeline; renderers
  * call `useLightbox().open(src)`.
@@ -70,10 +102,18 @@ function LightboxRoot({ children }: { children: ReactNode }) {
     caption?: string;
     label: string;
     downloadFilename?: string;
+    controlLabels?: LightboxControlLabels;
   } | null>(null);
   const [tokenSource, setTokenSource] = useState<HTMLElement | null>(null);
+  const sourceOwner = useMemo(() => createLightboxSourceOwner(), []);
   const portalStyle = usePortalTokenStyle(tokenSource);
 
+  const releaseCurrentSource = useCallback(() => {
+    sourceOwner.release();
+  }, [sourceOwner]);
+
+  useEffect(() => releaseCurrentSource, [releaseCurrentSource]);
+
   const open = useCallback(
     (
       src: string,
@@ -81,22 +121,27 @@ function LightboxRoot({ children }: { children: ReactNode }) {
       source?: HTMLElement | null,
       label = "Screenshot",
       downloadFilename?: string,
+      controlLabels?: LightboxControlLabels,
+      releaseSource?: () => void,
     ) => {
+      sourceOwner.replace(releaseSource);
       setTokenSource(source ?? null);
       setState({
         src,
         label,
         ...(caption ? { caption } : {}),
         ...(downloadFilename ? { downloadFilename } : {}),
+        ...(controlLabels ? { controlLabels } : {}),
       });
     },
-    [],
+    [sourceOwner],
   );
 
   const close = useCallback(() => {
+    releaseCurrentSource();
     setState(null);
     setTokenSource(null);
-  }, []);
+  }, [releaseCurrentSource]);
 
   const controller = useMemo<LightboxController>(() => ({ open }), [open]);
 
@@ -159,32 +204,11 @@ function LightboxRoot({ children }: { children: ReactNode }) {
                         alt={state.caption ?? state.label}
                         className="min-h-0 max-h-[82vh] w-auto max-w-full rounded-og-md border border-white/10 object-contain shadow-og-lg"
                       />
-                      <div className="absolute -right-3 -top-3 flex items-center gap-2">
-                        {state.downloadFilename ? (
-                          <a
-                            href={state.src}
-                            download={state.downloadFilename}
-                            className={cn(
-                              "inline-flex size-9 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:text-white",
-                            )}
-                            aria-label={`Download ${state.downloadFilename}`}
-                          >
-                            <DownloadIcon className="size-4" />
-                          </a>
-                        ) : null}
-                        <Dialog.Close
-                          className={cn(
-                            "inline-flex size-9 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:text-white",
-                          )}
-                          aria-label="Close"
-                        >
-                          <XIcon className="size-4" />
-                        </Dialog.Close>
-                      </div>
+                      <ScreenshotLightboxControls
+                        src={state.src}
+                        downloadFilename={state.downloadFilename}
+                        controlLabels={state.controlLabels}
+                      />
                     </div>
                     {state.caption ? (
                       <figcaption className="max-w-2xl text-center font-og-mono text-og-xs text-white/55">
@@ -205,3 +229,43 @@ function LightboxRoot({ children }: { children: ReactNode }) {
     </LightboxContext.Provider>
   );
 }
+
+/** @internal Exact controls rendered by an open screenshot lightbox. */
+export function ScreenshotLightboxControls({
+  src,
+  downloadFilename,
+  controlLabels,
+}: {
+  src: string;
+  downloadFilename?: string | undefined;
+  controlLabels?: LightboxControlLabels | undefined;
+}) {
+  return (
+    <div className="absolute -right-3 -top-3 flex items-center gap-2">
+      {downloadFilename ? (
+        <a
+          href={src}
+          download={downloadFilename}
+          className={cn(
+            "inline-flex size-9 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:text-white",
+          )}
+          aria-label={controlLabels?.download ?? `Download ${downloadFilename}`}
+        >
+          <DownloadIcon className="size-4" />
+        </a>
+      ) : null}
+      <Dialog.Close
+        className={cn(
+          "inline-flex size-9 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:text-white",
+        )}
+        aria-label={controlLabels?.close ?? "Close"}
+      >
+        <XIcon className="size-4" />
+      </Dialog.Close>
+    </div>
+  );
+}

package/styles/compiled.css

@@ -3001,6 +3001,9 @@
     --tw-blur: blur(8px);
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
   }
+:where(.og-root).filter,:where(.og-root) .filter {
+    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
+  }
 :where(.og-root).backdrop-blur,:where(.og-root) .backdrop-blur {
     --tw-backdrop-blur: blur(8px);
     -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
@@ -3873,6 +3876,13 @@
       }
     }
   }
+:where(.og-root).hover\:opacity-80,:where(.og-root) .hover\:opacity-80 {
+    &:hover {
+      @media (hover: hover) {
+        opacity: 80%;
+      }
+    }
+  }
 :where(.og-root).hover\:opacity-90,:where(.og-root) .hover\:opacity-90 {
     &:hover {
       @media (hover: hover) {
@@ -4937,7 +4947,7 @@
   --og-color-status-waiting: oklch(0.54 0.15 305);
   --og-color-status-failed: oklch(0.5 0.19 22);
   --og-color-status-cancelled: oklch(0.55 0.025 260);
-  --og-color-danger: oklch(0.55 0.2 22);
+  --og-color-danger: oklch(0.54 0.2 22);
   --og-color-diff-add-bg: var(--og-color-status-idle);
   --og-color-diff-del-bg: var(--og-color-status-failed);
   --og-shadow-sm: 0 1px 2px oklch(0.2 0.02 260 / 0.07);

package/styles/tokens.css

@@ -227,7 +227,9 @@
   --og-color-status-waiting: oklch(0.54 0.15 305);
   --og-color-status-failed: oklch(0.5 0.19 22);
   --og-color-status-cancelled: oklch(0.55 0.025 260);
-  --og-color-danger: oklch(0.55 0.2 22);
+  /* Ordinary 14 px destructive menu text also appears on Surface 3. Keep
+     enough AA contrast headroom there, including browser color rounding. */
+  --og-color-danger: oklch(0.54 0.2 22);
   --og-color-diff-add-bg: var(--og-color-status-idle);
   --og-color-diff-del-bg: var(--og-color-status-failed);