@chai-ui/react 0.1.0 → 0.2.1

package/src/ResultCard.tsx

@@ -1,6 +1,9 @@
 import { useEffect, useRef, useState, type CSSProperties, type ReactNode } from "react";
-import type { ModelOption, Result } from "@chai-ui/core";
+import { ROUTING_MODEL_ID, type ModelOption, type Result } from "@chai-ui/core";
 import { Pagination } from "./primitives/Pagination.js";
+import { DownloadIcon, ExpandIcon, ShareIcon } from "./icons.js";
+import { downloadFilename, downloadMedia, shareMedia } from "./media-actions.js";
+import { PageSlide, usePageSlide } from "./page-slide.js";
 
 /**
  * ResultCard's complement to Composer bar, and the last stop in the
@@ -47,14 +50,6 @@ function formatAspectRatio(width: number, height: number): string | undefined {
   return `${w / divisor}:${h / divisor}`;
 }
 
-/** A real extension from the URL itself when there is one, otherwise a sensible guess by kind — used only for the downloaded file's suggested name, not anything that affects the actual bytes. */
-function guessDownloadFilename(result: Result): string {
-  const kind = result.output?.kind ?? "file";
-  const src = result.output?.src ?? "";
-  const match = /\.([a-zA-Z0-9]{2,5})(?:[?#]|$)/.exec(src);
-  const ext = match?.[1] ?? (kind === "video" ? "mp4" : kind === "audio" ? "mp3" : kind === "text" ? "txt" : "png");
-  return `${kind}-${result.id}.${ext}`;
-}
 
 // --- Public types ------------------------------------------------------------
 
@@ -201,11 +196,20 @@ export function ResultCard({
   const result = results[clampedIndex];
 
   const mediaDims = measured && measured.id === result?.id ? measured : null;
+  // Paging slides, with the last image sliding out (other kinds just slide in).
+  const { slide, endSlide } = usePageSlide(
+    result?.id,
+    clampedIndex,
+    result?.output?.kind === "image" ? result.output.src : undefined
+  );
 
   if (!result) return null;
 
   const vote = getVote?.(result) ?? null;
-  const modelLabel = models?.find((m) => m.id === result.modelId)?.label ?? result.modelId;
+  const modelLabel =
+    result.modelId === ROUTING_MODEL_ID
+      ? "Choosing model…"
+      : (models?.find((m) => m.id === result.modelId)?.label ?? result.modelId);
   const duration = formatDuration(result.durationMs);
   const cost = formatCost(result.usage?.costUsd);
   const tokens = formatTokens(result.usage?.totalTokens);
@@ -228,46 +232,13 @@ export function ResultCard({
 
   const handleDownload = async () => {
     if (result.output) {
-      // A plain `<a download href={remoteUrl}>` only forces a real download
-      // for a same-origin or `blob:`/`data:` URL — for anything else
-      // (a normal cross-origin CDN url, which is what a real generated
-      // result's `src` almost always is) browsers ignore `download` and
-      // just navigate/open it instead, which is exactly the "pops a tab"
-      // behavior this replaces. Fetching it into a blob first sidesteps
-      // that: a blob: URL is always same-origin, so `download` works
-      // reliably regardless of where the media actually lives.
-      try {
-        const response = await fetch(result.output.src);
-        const blob = await response.blob();
-        const blobUrl = URL.createObjectURL(blob);
-        const a = document.createElement("a");
-        a.href = blobUrl;
-        a.download = guessDownloadFilename(result);
-        document.body.appendChild(a);
-        a.click();
-        a.remove();
-        URL.revokeObjectURL(blobUrl);
-      } catch {
-        // The one case this can't force: the source not allowing
-        // cross-origin fetches (no CORS headers) or a real network
-        // failure. Opening it directly is the best fallback available —
-        // still better than silently doing nothing.
-        window.open(result.output.src, "_blank", "noopener");
-      }
+      await downloadMedia(result.output.src, downloadFilename(result.id, result.output.kind, result.output.src));
     }
     onAction("download", result);
   };
 
   const handleShare = async () => {
-    if (result.output && navigator.share) {
-      try {
-        await navigator.share({ url: result.output.src });
-      } catch {
-        // Cancelled or unsupported for this src — fall through silently, same as a native share sheet dismissal.
-      }
-    } else if (result.output) {
-      navigator.clipboard?.writeText(result.output.src).catch(() => {});
-    }
+    if (result.output) await shareMedia(result.output.src);
     onAction("share", result);
   };
 
@@ -286,24 +257,36 @@ export function ResultCard({
       >
         <div className="chai-result-card__inner">
           <div ref={frontRef} className="chai-result-card__face chai-result-card__front" aria-hidden={flipped}>
-            <ResultMedia
-              result={result}
-              alt={altText?.(result) ?? prompt}
-              disabled={disabled}
-              mediaExpanded={mediaExpanded}
-              onDownload={handleDownload}
-              onShare={handleShare}
-              onExpand={() => setMediaExpanded(true)}
-              onDimensions={(w, h) => setMeasured({ id: result.id, width: w, height: h })}
-              videoTimeRef={videoTimeRef}
-              videoWasPlaying={videoWasPlaying}
-              onVideoPlayingChange={setVideoWasPlaying}
-            />
-
-            <div className="chai-result-card__bar">
-              <div className="chai-result-card__bar-row">
-                <div className="chai-result-card__bar-start">
+            <div className="chai-result-card__media-frame">
+              <PageSlide slide={slide} onEnd={endSlide} className="chai-result-card__media-page">
+                <ResultMedia
+                  result={result}
+                  alt={altText?.(result) ?? prompt}
+                  disabled={disabled}
+                  mediaExpanded={mediaExpanded}
+                  onDownload={handleDownload}
+                  onShare={handleShare}
+                  onExpand={() => setMediaExpanded(true)}
+                  onDimensions={(w, h) => setMeasured({ id: result.id, width: w, height: h })}
+                  videoTimeRef={videoTimeRef}
+                  videoWasPlaying={videoWasPlaying}
+                  onVideoPlayingChange={setVideoWasPlaying}
+                />
+              </PageSlide>
+            </div>
+
+            {/* Floating over the bottom of the media, as on the edit card: the
+                page dots above, votes and retry in one pill, details on the right. */}
+            <div className="chai-card-bottom">
+              {results.length > 1 && (
+                <div className="chai-card-pager">
+                  <Pagination count={results.length} index={clampedIndex} onChange={goTo} label="Results" disabled={disabled} />
+                </div>
+              )}
+              <div className="chai-card-actions">
+                <div className="chai-card-pill">
                   <ResultIconButton
+                    variant="pill"
                     label="Like"
                     active={vote === "like"}
                     disabled={disabled}
@@ -312,6 +295,7 @@ export function ResultCard({
                     <ThumbUpIcon />
                   </ResultIconButton>
                   <ResultIconButton
+                    variant="pill"
                     label="Dislike"
                     active={vote === "dislike"}
                     disabled={disabled}
@@ -319,11 +303,7 @@ export function ResultCard({
                   >
                     <ThumbDownIcon />
                   </ResultIconButton>
-                  <ResultIconButton
-                    label="Retry"
-                    disabled={disabled}
-                    onClick={() => onAction("retry", result)}
-                  >
+                  <ResultIconButton variant="pill" label="Retry" disabled={disabled} onClick={() => onAction("retry", result)}>
                     <RefreshIcon />
                   </ResultIconButton>
                   {moreActions && moreActions.length > 0 && (
@@ -336,25 +316,10 @@ export function ResultCard({
                     />
                   )}
                 </div>
-
-                <ResultIconButton
-                  label="Show details"
-                  disabled={disabled}
-                  onClick={() => setFlipped(true)}
-                >
+                <ResultIconButton variant="round" label="Show details" disabled={disabled} onClick={() => setFlipped(true)}>
                   <InfoIcon />
                 </ResultIconButton>
               </div>
-
-              {results.length > 1 && (
-                <Pagination
-                  count={results.length}
-                  index={clampedIndex}
-                  onChange={goTo}
-                  label="Results"
-                  disabled={disabled}
-                />
-              )}
             </div>
           </div>
 
@@ -507,7 +472,7 @@ function ResultMedia({
   if ((result.status === "queued" || result.status === "running") && !streaming) {
     return (
       <div className="chai-result-card__media chai-result-card__media--pending">
-        <span className="chai-result-card__spinner" aria-label={result.status === "running" ? "Running" : "Queued"} />
+        <span className="chai-result-card__spinner" role="img" aria-label={result.status === "running" ? "Running" : "Queued"} />
       </div>
     );
   }
@@ -573,15 +538,15 @@ function ResultMedia({
       )}
 
       {!mediaExpanded && !streaming && (
-      <div className="chai-result-card__media-actions">
-        <ResultIconButton label="Download" disabled={disabled} onClick={onDownload}>
+      <div className="chai-card-top chai-card-top--end">
+        <ResultIconButton variant="top" label="Download" disabled={disabled} onClick={onDownload}>
           <DownloadIcon />
         </ResultIconButton>
-        <ResultIconButton label="Share" disabled={disabled} onClick={onShare}>
+        <ResultIconButton variant="top" label="Share" disabled={disabled} onClick={onShare}>
           <ShareIcon />
         </ResultIconButton>
         {(isVideo || isImage) && (
-          <ResultIconButton label="Expand" disabled={disabled} onClick={onExpand}>
+          <ResultIconButton variant="top" label="Expand" disabled={disabled} onClick={onExpand}>
             <ExpandIcon />
           </ResultIconButton>
         )}
@@ -745,14 +710,19 @@ function ResultVideoPlayer({
 
 // --- Shared icon button (the hover circle — reference: the design note that the "like" button's hover treatment in the mock applies to every small icon button on the card) ------------------------------------------------------------
 
+const ICON_BUTTON_CLASS = { top: "chai-card-top-btn", pill: "chai-card-pill-btn", round: "chai-card-round" } as const;
+
 function ResultIconButton({
   children,
+  variant,
   label,
   active,
   disabled,
   onClick,
 }: {
   children: ReactNode;
+  /** Where it floats: in a dark group along the top, in the light pill, or the round button on the right. */
+  variant: "top" | "pill" | "round";
   label: string;
   active?: boolean;
   disabled?: boolean;
@@ -761,7 +731,7 @@ function ResultIconButton({
   return (
     <button
       type="button"
-      className={`chai-result-card__icon-btn${active ? " chai-result-card__icon-btn--active" : ""}`}
+      className={`${ICON_BUTTON_CLASS[variant]}${active ? " chai-card-pill-btn--active" : ""}`}
       aria-label={label}
       aria-pressed={active}
       title={label}
@@ -808,7 +778,7 @@ function MoreMenu({
 
   return (
     <div className="chai-result-card__more" ref={rootRef}>
-      <ResultIconButton label="More" active={open} disabled={disabled} onClick={() => onOpenChange(!open)}>
+      <ResultIconButton variant="pill" label="More" active={open} disabled={disabled} onClick={() => onOpenChange(!open)}>
         <MoreHorizIcon />
       </ResultIconButton>
       {open && (
@@ -888,28 +858,6 @@ function MoreHorizIcon() {
   );
 }
 
-function ShareIcon() {
-  return (
-    <svg viewBox="0 0 18 18" fill="none" aria-hidden="true">
-      <path
-        d="M2.99961 16.4999V5.9999H6.74961V7.4999H4.49961V14.9999H13.4996V7.4999H11.2496V5.9999H14.9996V16.4999H2.99961ZM8.24961 11.9999V3.61865L7.04961 4.81865L5.99961 3.7499L8.99961 0.749904L11.9996 3.7499L10.9496 4.81865L9.74961 3.61865V11.9999H8.24961Z"
-        fill="currentColor"
-      />
-    </svg>
-  );
-}
-
-function DownloadIcon() {
-  return (
-    <svg viewBox="0 0 18 18" fill="none" aria-hidden="true">
-      <path
-        d="M8.99961 11.9999L5.24961 8.2499L6.29961 7.1624L8.24961 9.1124V2.9999H9.74961V9.1124L11.6996 7.1624L12.7496 8.2499L8.99961 11.9999ZM2.99961 14.9999V11.2499H4.49961V13.4999H13.4996V11.2499H14.9996V14.9999H2.99961Z"
-        fill="currentColor"
-      />
-    </svg>
-  );
-}
-
 function InfoIcon() {
   return (
     <svg viewBox="0 0 22 22" fill="none" aria-hidden="true">
@@ -965,16 +913,3 @@ function PlayIcon() {
 }
 
 /** Self-drawn corner-bracket mark, not a recalled/traced icon-set glyph (the mock has no "expand" asset to trace — see this section's own header comment) — four independent strokes, deliberately simple so its geometry is obviously correct rather than a compound path that's hard to eyeball. */
-function ExpandIcon() {
-  return (
-    <svg viewBox="0 0 18 18" fill="none" aria-hidden="true">
-      <path
-        d="M2 6V2h4M12 2h4v4M16 12v4h-4M6 16H2v-4"
-        stroke="currentColor"
-        strokeWidth="1.6"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  );
-}

package/src/icons.tsx

@@ -0,0 +1,115 @@
+/**
+ * Icons shared by more than one component. Each is an inline
+ * `currentColor` SVG, the convention every component file follows.
+ * The media-action icons are traced from the result card design; the rest
+ * are real Material Symbols paths (viewBox `0 -960 960 960`) copied from
+ * `@material-symbols/svg-400`.
+ */
+
+export function DownloadIcon() {
+  return (
+    <svg viewBox="0 0 18 18" fill="none" aria-hidden="true">
+      <path
+        d="M8.99961 11.9999L5.24961 8.2499L6.29961 7.1624L8.24961 9.1124V2.9999H9.74961V9.1124L11.6996 7.1624L12.7496 8.2499L8.99961 11.9999ZM2.99961 14.9999V11.2499H4.49961V13.4999H13.4996V11.2499H14.9996V14.9999H2.99961Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+export function ShareIcon() {
+  return (
+    <svg viewBox="0 0 18 18" fill="none" aria-hidden="true">
+      <path
+        d="M2.99961 16.4999V5.9999H6.74961V7.4999H4.49961V14.9999H13.4996V7.4999H11.2496V5.9999H14.9996V16.4999H2.99961ZM8.24961 11.9999V3.61865L7.04961 4.81865L5.99961 3.7499L8.99961 0.749904L11.9996 3.7499L10.9496 4.81865L9.74961 3.61865V11.9999H8.24961Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+export function ExpandIcon() {
+  return (
+    <svg viewBox="0 0 18 18" fill="none" aria-hidden="true">
+      <path
+        d="M2 6V2h4M12 2h4v4M16 12v4h-4M6 16H2v-4"
+        stroke="currentColor"
+        strokeWidth="1.6"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+/** Material Symbols "zoom_in". */
+export function ZoomInIcon() {
+  return (
+    <svg viewBox="0 -960 960 960" aria-hidden="true">
+      <path d="M796-121 533-384q-30 26-69.96 40.5Q423.08-329 378-329q-108.16 0-183.08-75Q120-479 120-585t75-181q75-75 181.5-75t181 75Q632-691 632-584.85 632-542 618-502q-14 40-42 75l264 262-44 44ZM377-389q81.25 0 138.13-57.5Q572-504 572-585t-56.87-138.5Q458.25-781 377-781q-82.08 0-139.54 57.5Q180-666 180-585t57.46 138.5Q294.92-389 377-389Zm-31-85v-82h-82v-60h82v-81h60v81h81v60h-81v82h-60Z" fill="currentColor" />
+    </svg>
+  );
+}
+
+/** Material Symbols "zoom_out". */
+export function ZoomOutIcon() {
+  return (
+    <svg viewBox="0 -960 960 960" aria-hidden="true">
+      <path d="M796-121 533-384q-30 26-70 40.5T378-329q-108 0-183-75t-75-181q0-106 75-181t182-75q106 0 180.5 75T632-585q0 43-14 83t-42 75l264 262-44 44ZM377-389q81 0 138-57.5T572-585q0-81-57-138.5T377-781q-82 0-139.5 57.5T180-585q0 81 57.5 138.5T377-389ZM275-556v-60h201v60H275Z" fill="currentColor" />
+    </svg>
+  );
+}
+
+/** Material Symbols "add". */
+export function AddIcon() {
+  return (
+    <svg viewBox="0 -960 960 960" aria-hidden="true">
+      <path d="M450-450H200v-60h250v-250h60v250h250v60H510v250h-60v-250Z" fill="currentColor" />
+    </svg>
+  );
+}
+
+/** Material Symbols "delete". */
+export function DeleteIcon() {
+  return (
+    <svg viewBox="0 -960 960 960" aria-hidden="true">
+      <path d="M261-120q-24.75 0-42.37-17.63Q201-155.25 201-180v-570h-41v-60h188v-30h264v30h188v60h-41v570q0 24-18 42t-42 18H261Zm438-630H261v570h438v-570ZM367-266h60v-399h-60v399Zm166 0h60v-399h-60v399ZM261-750v570-570Z" fill="currentColor" />
+    </svg>
+  );
+}
+
+/** Material Symbols "visibility". */
+export function VisibilityIcon() {
+  return (
+    <svg viewBox="0 -960 960 960" aria-hidden="true">
+      <path d="M600.5-379.5Q650-429 650-500t-49.5-120.5Q551-670 480-670t-120.5 49.5Q310-571 310-500t49.5 120.5Q409-330 480-330t120.5-49.5Zm-200-41Q368-453 368-500t32.5-79.5Q433-612 480-612t79.5 32.5Q592-547 592-500t-32.5 79.5Q527-388 480-388t-79.5-32.5ZM216-283Q98-366 40-500q58-134 176-217t264-83q146 0 264 83t176 217q-58 134-176 217t-264 83q-146 0-264-83Zm264-217Zm222.5 174.5Q804-391 857-500q-53-109-154.5-174.5T480-740q-121 0-222.5 65.5T102-500q54 109 155.5 174.5T480-260q121 0 222.5-65.5Z" fill="currentColor" />
+    </svg>
+  );
+}
+
+/** Material Symbols "visibility_off". */
+export function VisibilityOffIcon() {
+  return (
+    <svg viewBox="0 -960 960 960" aria-hidden="true">
+      <path d="m629-419-44-44q26-71-27-118t-115-24l-44-44q17-11 38-16t43-5q71 0 120.5 49.5T650-500q0 22-5.5 43.5T629-419Zm129 129-40-40q49-36 85.5-80.5T857-500q-50-111-150-175.5T490-740q-42 0-86 8t-69 19l-46-47q35-16 89.5-28T485-800q143 0 261.5 81.5T920-500q-26 64-67 117t-95 93Zm58 226L648-229q-35 14-79 21.5t-89 7.5q-146 0-265-81.5T40-500q20-52 55.5-101.5T182-696L56-822l42-43 757 757-39 44ZM223-654q-37 27-71.5 71T102-500q51 111 153.5 175.5T488-260q33 0 65-4t48-12l-64-64q-11 5-27 7.5t-30 2.5q-70 0-120-49t-50-121q0-15 2.5-30t7.5-27l-97-97Zm305 142Zm-116 58Z" fill="currentColor" />
+    </svg>
+  );
+}
+
+/** Material Symbols "check". */
+export function CheckSymbolIcon() {
+  return (
+    <svg viewBox="0 -960 960 960" aria-hidden="true">
+      <path d="M378-246 154-470l43-43 181 181 384-384 43 43-427 427Z" fill="currentColor" />
+    </svg>
+  );
+}
+
+/** Material Symbols "close". */
+export function CloseSymbolIcon() {
+  return (
+    <svg viewBox="0 -960 960 960" aria-hidden="true">
+      <path d="m249-207-42-42 231-231-231-231 42-42 231 231 231-231 42 42-231 231 231 231-42 42-231-231-231 231Z" fill="currentColor" />
+    </svg>
+  );
+}

package/src/index.ts

@@ -2,6 +2,7 @@ export * from "./primitives/index.js";
 export * from "./Composer.js";
 export * from "./MediaAnalyzer.js";
 export * from "./ResultCard.js";
+export * from "./EditCard.js";
 export * from "./useComposer.js";
 export * from "./ChaiProvider.js";
 export * from "./useMediaAnalyzer.js";
@@ -13,6 +14,10 @@ export {
   createOpenRouterEngine,
   createMockEngine,
   mockEngine,
+  buildRegionEditPrompt,
+  DEFAULT_MAX_REGIONS,
+  PRECISE_EDIT_MODELS,
+  ROUTING_MODEL_ID,
   GenerationError,
   DEFAULT_MEDIA_ANALYSIS_PROMPT_LENGTH,
   MEDIA_ANALYSIS_PROMPTS,
@@ -20,6 +25,7 @@ export {
 } from "@chai-ui/core";
 export type {
   DroppedMedia,
+  EditRegion,
   Evaluation,
   GenerationEngine,
   GenerationUseCase,
@@ -28,6 +34,8 @@ export type {
   MediaKind,
   ModelOption,
   ParameterOption,
+  RegionBox,
+  RegionFormat,
   Request,
   Result,
   ResultStatus,

package/src/media-actions.ts

@@ -0,0 +1,45 @@
+/**
+ * Download and share for a piece of generated media, shared by the cards.
+ *
+ * A plain `<a download href={remoteUrl}>` only forces a download for a
+ * same-origin or `blob:`/`data:` URL; for a cross-origin CDN URL (what a
+ * generated result usually is) browsers ignore `download` and open it
+ * instead. Fetching it into a blob first works wherever the source allows
+ * cross-origin fetches. When it doesn't, opening the media is the fallback.
+ */
+export async function downloadMedia(src: string, filename: string): Promise<void> {
+  try {
+    const response = await fetch(src);
+    const blob = await response.blob();
+    const blobUrl = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = blobUrl;
+    a.download = filename;
+    document.body.appendChild(a);
+    a.click();
+    a.remove();
+    URL.revokeObjectURL(blobUrl);
+  } catch {
+    window.open(src, "_blank", "noopener");
+  }
+}
+
+/** The native share sheet where there is one, otherwise the media's URL copied to the clipboard. */
+export async function shareMedia(src: string): Promise<void> {
+  if (navigator.share) {
+    try {
+      await navigator.share({ url: src });
+    } catch {
+      // Dismissed, or not shareable: same as closing a native share sheet.
+    }
+  } else {
+    navigator.clipboard?.writeText(src).catch(() => {});
+  }
+}
+
+/** A file name for a download: the URL's own extension when it has one, otherwise a guess by kind. */
+export function downloadFilename(id: string, kind: string, src: string): string {
+  const match = /\.([a-zA-Z0-9]{2,5})(?:[?#]|$)/.exec(src);
+  const ext = match?.[1] ?? (kind === "video" ? "mp4" : kind === "audio" ? "mp3" : kind === "text" ? "txt" : "png");
+  return `${kind}-${id}.${ext}`;
+}

package/src/page-slide.tsx

@@ -0,0 +1,82 @@
+import { useState, type ReactNode } from "react";
+
+interface Slide {
+  /** The image paged away from, shown sliding out. Absent when it wasn't an image. */
+  from?: string;
+  forward: boolean;
+  key: number;
+  active: boolean;
+}
+
+/**
+ * The slide between pages of a card: the new page comes in from the side it
+ * was paged from while the last one leaves the other way. `id` is the page
+ * showing and `image` its image, if it has one (what slides out next time).
+ */
+export function usePageSlide(id: string | undefined, index: number, image: string | undefined) {
+  const [shown, setShown] = useState({ id, index, image });
+  const [slide, setSlide] = useState<Slide | null>(null);
+  // Tracked while rendering, not in an effect (the rules of React).
+  if (id !== shown.id) {
+    setShown({ id, index, image });
+    // No slide for someone who has asked their system for less motion.
+    const reduceMotion =
+      typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+    if (shown.id !== undefined && id !== undefined && !reduceMotion) {
+      setSlide({ from: shown.image, forward: index > shown.index, key: (slide?.key ?? 0) + 1, active: true });
+    }
+  } else if (image !== shown.image) {
+    // The same page getting its image (a result arriving) doesn't slide.
+    setShown({ ...shown, image });
+  }
+  return { slide, endSlide: () => setSlide((s) => s && { ...s, active: false, from: undefined }) };
+}
+
+/**
+ * Renders a page with its slide. The outgoing image stays in the layout
+ * while it slides away, so the card holds its height even while the new
+ * image is still loading, and the new page slides in over that space. The
+ * page keeps its key once the slide ends, so it isn't remounted (no
+ * reloaded image, no restarted video).
+ */
+export function PageSlide({
+  slide,
+  onEnd,
+  className,
+  children,
+}: {
+  slide: Slide | null;
+  onEnd: () => void;
+  className?: string;
+  children: ReactNode;
+}) {
+  const side = slide?.forward ? "left" : "right";
+  const outgoing = slide?.active && slide.from;
+  return (
+    <>
+      {outgoing && (
+        <img
+          key={`out-${slide.key}`}
+          className={`chai-slide-out chai-slide-out--${side}`}
+          src={slide.from}
+          alt=""
+          aria-hidden="true"
+          draggable={false}
+        />
+      )}
+      <div
+        key={`in-${slide?.key ?? 0}`}
+        className={
+          [className, slide?.active && `chai-slide-in chai-slide-in--${side}`, outgoing && "chai-slide-in--over"]
+            .filter(Boolean)
+            .join(" ") || undefined
+        }
+        onAnimationEnd={(e) => {
+          if (e.target === e.currentTarget) onEnd();
+        }}
+      >
+        {children}
+      </div>
+    </>
+  );
+}

package/src/primitives/Pagination.tsx

@@ -6,6 +6,8 @@ interface PaginationProps {
   onChange: (index: number) => void;
   /** Accessible name for the nav landmark, e.g. "Results". */
   label: string;
+  /** What one page is, for each dot's name ("Result 2 of 3"). Defaults to "Result". */
+  itemLabel?: string;
   disabled?: boolean;
 }
 
@@ -17,7 +19,7 @@ interface PaginationProps {
  * any one component, so every paginated surface renders the same pager
  * rather than each growing its own.
  */
-export function Pagination({ count, index, onChange, label, disabled }: PaginationProps) {
+export function Pagination({ count, index, onChange, label, itemLabel = "Result", disabled }: PaginationProps) {
   return (
     <nav
       className="chai-pagination"
@@ -31,7 +33,7 @@ export function Pagination({ count, index, onChange, label, disabled }: Paginati
           type="button"
           className={`chai-pagination__dot${i <= index ? " chai-pagination__dot--filled" : ""}`}
           aria-current={i === index}
-          aria-label={`Result ${i + 1} of ${count}`}
+          aria-label={`${itemLabel} ${i + 1} of ${count}`}
           disabled={disabled}
           onClick={() => onChange(i)}
         />

package/src/regions.ts

@@ -0,0 +1,7 @@
+/** How many region colors the tokens define (`--chai-color-semantic-region-1` to `-6`). */
+const REGION_COLOR_COUNT = 6;
+
+/** The color token for a region number. Numbers past the last color start over at the first. */
+export function regionColor(number: number): string {
+  return `var(--chai-color-semantic-region-${((Math.max(1, number) - 1) % REGION_COLOR_COUNT) + 1})`;
+}