@chai-ui/react 0.6.0 → 0.7.0

package/src/EditCard.tsx

@@ -1,5 +1,31 @@
 import { useEffect, useRef, useState, type CSSProperties, type KeyboardEvent, type PointerEvent } from "react";
-import { DEFAULT_MAX_REGIONS, type EditRegion, type RegionBox, type ResultStatus } from "@chai-ui/core";
+import {
+  clampPan,
+  DEFAULT_MAX_REGIONS,
+  downloadFilename,
+  downloadMedia,
+  EDIT_ZOOM_STEPS,
+  editCardWidth,
+  fitBox,
+  freeRegionNumber,
+  newRegion,
+  panForKey,
+  panForZoom,
+  REGION_CORNERS,
+  regionBoxForKey,
+  regionBoxStyle,
+  regionPopoverPosition,
+  resizeBox,
+  shareMedia,
+  type EditRegion,
+  type EditVersion,
+  type Pan,
+  type RegionBox,
+  type RegionCorner,
+  type Size,
+} from "@chai-ui/core";
+
+export type { EditVersion } from "@chai-ui/core";
 import { Pagination } from "./primitives/Pagination.js";
 import {
   AddIcon,
@@ -14,25 +40,7 @@ import {
   ZoomInIcon,
   ZoomOutIcon,
 } from "./icons.js";
-import { downloadFilename, downloadMedia, shareMedia } from "./media-actions.js";
 import { PageSlide, usePageSlide } from "./page-slide.js";
-import { regionColor } from "./regions.js";
-
-/**
- * One version of the image being edited: the original, or the result of an
- * edit. `useComposer`'s `edit.versions` builds these from its runs.
- */
-export interface EditVersion {
-  id: string;
-  /** The image, once there is one. */
-  src?: string;
-  /** The image this version was edited from, shown under the progress spinner until `src` arrives. */
-  from?: string;
-  status: ResultStatus;
-  /** The regions this version was made with (none for the original). Shown faintly, for reference. */
-  regions: EditRegion[];
-  error?: string;
-}
 
 export interface EditCardProps {
   /** The original image first, then each edit. Paged with the dots in the card's bottom row. */
@@ -65,60 +73,12 @@ export interface EditCardProps {
   disabled?: boolean;
 }
 
-const ZOOM_STEPS = [1, 1.25, 1.5, 2, 3, 4];
-const MIN_SIZE = 0.03;
-const KEY_STEP = 0.01;
-const KEY_STEP_LARGE = 0.05;
-
-type Size = { width: number; height: number };
-type Pan = { x: number; y: number };
 type Drag =
-  | { kind: "move" | "nw" | "ne" | "sw" | "se"; id: string; x: number; y: number; box: RegionBox; moved: boolean }
+  | { kind: "move" | RegionCorner; id: string; x: number; y: number; box: RegionBox; moved: boolean }
   | { kind: "pan"; x: number; y: number; pan: Pan; moved: boolean };
 
 const clamp = (v: number, min: number, max: number) => Math.min(max, Math.max(min, v));
 
-/** Keeps a box inside the image and at least the minimum size. */
-function fitBox(box: RegionBox): RegionBox {
-  const width = clamp(box.width, MIN_SIZE, 1);
-  const height = clamp(box.height, MIN_SIZE, 1);
-  return { x: clamp(box.x, 0, 1 - width), y: clamp(box.y, 0, 1 - height), width, height };
-}
-
-/** A box resized by dragging one corner; the opposite corner stays put. */
-function resizeBox(box: RegionBox, corner: "nw" | "ne" | "sw" | "se", dx: number, dy: number): RegionBox {
-  let left = box.x;
-  let top = box.y;
-  let right = box.x + box.width;
-  let bottom = box.y + box.height;
-  if (corner === "nw" || corner === "sw") left = clamp(left + dx, 0, right - MIN_SIZE);
-  else right = clamp(right + dx, left + MIN_SIZE, 1);
-  if (corner === "nw" || corner === "ne") top = clamp(top + dy, 0, bottom - MIN_SIZE);
-  else bottom = clamp(bottom + dy, top + MIN_SIZE, 1);
-  return { x: left, y: top, width: right - left, height: bottom - top };
-}
-
-/** Pan limits at a zoom level: the image always covers the viewport. */
-function clampPan(pan: Pan, zoom: number, size: Size): Pan {
-  return {
-    x: clamp(pan.x, size.width - size.width * zoom, 0),
-    y: clamp(pan.y, size.height - size.height * zoom, 0),
-  };
-}
-
-function nextRegionId(): string {
-  return typeof crypto !== "undefined" && "randomUUID" in crypto
-    ? crypto.randomUUID()
-    : `region-${Date.now()}-${Math.random().toString(36).slice(2)}`;
-}
-
-/** The lowest number no current region uses, so freed numbers (and colors) come back first. */
-function freeNumber(regions: EditRegion[]): number {
-  let n = 1;
-  while (regions.some((r) => r.number === n)) n += 1;
-  return n;
-}
-
 /**
  * The image editing card: the person marks regions on the image, gives each
  * one an instruction, and checks it into the Composer. It shares
@@ -198,7 +158,7 @@ export function EditCard({
   // A region being drawn takes a free number, even if the regions changed
   // since it was started (so checking it in can't duplicate a number).
   const shownDraft =
-    draft && regions.some((r) => r.number === draft.number) ? { ...draft, number: freeNumber(regions) } : draft;
+    draft && regions.some((r) => r.number === draft.number) ? { ...draft, number: freeRegionNumber(regions) } : draft;
   const all = shownDraft ? [...regions, shownDraft] : regions;
   const selected = all.find((r) => r.id === selectedId) ?? null;
   const isDraft = selected != null && selected.id === draft?.id;
@@ -230,13 +190,7 @@ export function EditCard({
   }
 
   function addRegion() {
-    // Centered in the part of the image in view, so it's visible when zoomed in.
-    const viewW = 1 / zoom;
-    const viewH = 1 / zoom;
-    const centerX = size.width ? (-pan.x / (size.width * zoom)) + viewW / 2 : 0.5;
-    const centerY = size.height ? (-pan.y / (size.height * zoom)) + viewH / 2 : 0.5;
-    const box = fitBox({ x: centerX - (0.3 * viewW) / 2, y: centerY - (0.2 * viewH) / 2, width: 0.3 * viewW, height: 0.2 * viewH });
-    const region: EditRegion = { id: nextRegionId(), number: freeNumber(regions), box, prompt: "" };
+    const region = newRegion(regions, zoom, pan, size);
     setDraft(region);
     setHidden(false);
     select(region);
@@ -268,14 +222,10 @@ export function EditCard({
   }
 
   function zoomTo(next: number) {
-    // Zooms around the middle of the view, so what's centered stays centered.
-    const cx = size.width / 2;
-    const cy = size.height / 2;
-    const ratio = next / zoom;
-    setPan(clampPan({ x: cx - (cx - pan.x) * ratio, y: cy - (cy - pan.y) * ratio }, next, size));
+    setPan(panForZoom(pan, zoom, next, size));
     setZoom(next);
   }
-  const zoomIndex = ZOOM_STEPS.indexOf(zoom);
+  const zoomIndex = EDIT_ZOOM_STEPS.indexOf(zoom);
 
   // --- Pointer: move and resize regions, pan the zoomed image ---
   // Moves and releases bubble to the viewport, even while a region or
@@ -320,19 +270,11 @@ export function EditCard({
   // --- Keyboard ---
 
   function handleRegionKey(e: KeyboardEvent, region: EditRegion) {
-    const step = e.altKey ? KEY_STEP_LARGE : KEY_STEP;
-    const arrows: Record<string, [number, number]> = {
-      ArrowLeft: [-step, 0],
-      ArrowRight: [step, 0],
-      ArrowUp: [0, -step],
-      ArrowDown: [0, step],
-    };
-    const delta = arrows[e.key];
-    if (delta) {
+    const box = regionBoxForKey(region.box, e.key, { shift: e.shiftKey, alt: e.altKey });
+    if (box) {
       e.preventDefault();
       e.stopPropagation();
-      const [dx, dy] = delta;
-      setBox(region.id, e.shiftKey ? resizeBox(region.box, "se", dx, dy) : fitBox({ ...region.box, x: region.box.x + dx, y: region.box.y + dy }));
+      setBox(region.id, box);
     } else if (e.key === "Delete" || e.key === "Backspace") {
       e.preventDefault();
       if (region.id === draft?.id) setDraft(null);
@@ -343,12 +285,10 @@ export function EditCard({
 
   function handleViewportKey(e: KeyboardEvent<HTMLDivElement>) {
     if (e.target !== e.currentTarget || zoom <= 1) return;
-    const step = 40;
-    const arrows: Record<string, [number, number]> = { ArrowLeft: [step, 0], ArrowRight: [-step, 0], ArrowUp: [0, step], ArrowDown: [0, -step] };
-    const delta = arrows[e.key];
-    if (!delta) return;
+    const next = panForKey(pan, e.key, zoom, size);
+    if (!next) return;
     e.preventDefault();
-    setPan(clampPan({ x: pan.x + delta[0], y: pan.y + delta[1] }, zoom, size));
+    setPan(next);
   }
 
   function handleFieldKey(e: KeyboardEvent<HTMLTextAreaElement>) {
@@ -383,31 +323,11 @@ export function EditCard({
   // --- Layout ---
 
   // The field sits above its region, or below it when there isn't room above.
-  const popover = selected && !hidden && size.width
-    ? (() => {
-        const left = selected.box.x * size.width * zoom + pan.x;
-        const top = selected.box.y * size.height * zoom + pan.y;
-        const bottom = (selected.box.y + selected.box.height) * size.height * zoom + pan.y;
-        // Below only when it clears the controls along the image's bottom edge.
-        const reserved = versions.length > 1 ? 100 : 56;
-        const fitsBelow = bottom + 8 + POPOVER_HEIGHT <= size.height - reserved;
-        const above = top > POPOVER_HEIGHT + 16 || !fitsBelow;
-        return {
-          left: clamp(left, 8, Math.max(8, size.width - POPOVER_WIDTH - 8)),
-          top: above ? Math.max(top - 8, POPOVER_HEIGHT + 8) : bottom + 8,
-          above,
-        };
-      })()
-    : null;
+  const popover = selected && !hidden && size.width ? regionPopoverPosition(selected.box, zoom, pan, size, versions.length > 1) : null;
 
   if (!version) return null;
 
-  // The starting width (from `scale`, else `width`), then fitted inside
-  // maxWidth × maxHeight with the image's shape kept.
-  // With neither, the card fills the box.
-  const baseWidth = scale != null && natural ? natural.width * scale : (width ?? maxWidth);
-  const heightCap = natural && natural.height > 0 ? (maxHeight * natural.width) / natural.height : Infinity;
-  const cardWidth = Math.round(Math.min(baseWidth, maxWidth, heightCap));
+  const cardWidth = editCardWidth(natural, { width, scale, maxWidth, maxHeight });
 
   return (
     <>
@@ -490,8 +410,8 @@ export function EditCard({
               className="chai-card-top-btn"
               aria-label="Zoom in"
               title="Zoom in"
-              disabled={!ready || zoomIndex >= ZOOM_STEPS.length - 1}
-              onClick={() => zoomTo(ZOOM_STEPS[zoomIndex + 1]!)}
+              disabled={!ready || zoomIndex >= EDIT_ZOOM_STEPS.length - 1}
+              onClick={() => zoomTo(EDIT_ZOOM_STEPS[zoomIndex + 1]!)}
             >
               <ZoomInIcon />
             </button>
@@ -504,7 +424,7 @@ export function EditCard({
               aria-label="Zoom out"
               title="Zoom out"
               disabled={!ready || zoomIndex <= 0}
-              onClick={() => zoomTo(ZOOM_STEPS[zoomIndex - 1]!)}
+              onClick={() => zoomTo(EDIT_ZOOM_STEPS[zoomIndex - 1]!)}
             >
               <ZoomOutIcon />
             </button>
@@ -629,12 +549,7 @@ export function EditCard({
   );
 }
 
-const POPOVER_WIDTH = 220;
-/** A typical height for the instruction panel (title row and a two-line field), for placing it. */
-const POPOVER_HEIGHT = 96;
-
-type DragKind = "move" | "nw" | "ne" | "sw" | "se";
-const CORNERS = ["nw", "ne", "sw", "se"] as const;
+type DragKind = "move" | RegionCorner;
 
 /** One region on the image: a button to select, move or delete it, its number badge, and corner handles while selected. */
 function RegionShape({
@@ -674,7 +589,7 @@ function RegionShape({
         {region.number}
       </span>
       {selected &&
-        CORNERS.map((corner) => (
+        REGION_CORNERS.map((corner) => (
           <span
             key={corner}
             className={`chai-edit-card__handle chai-edit-card__handle--${corner}`}
@@ -686,15 +601,7 @@ function RegionShape({
   );
 }
 
-function boxStyle(r: EditRegion): CSSProperties {
-  return {
-    left: `${r.box.x * 100}%`,
-    top: `${r.box.y * 100}%`,
-    width: `${r.box.width * 100}%`,
-    height: `${r.box.height * 100}%`,
-    "--chai-region-color": regionColor(r.number),
-  } as CSSProperties;
-}
+const boxStyle = (r: EditRegion) => regionBoxStyle(r) as CSSProperties;
 
 /** The full-size image in a modal dialog: focus moves in, Escape closes, and focus returns to Expand. */
 function ExpandedImage({ src, alt, onClose }: { src: string; alt: string; onClose: () => void }) {

package/src/MediaAnalyzer.tsx

@@ -2,11 +2,28 @@ import { createComponent } from "@lit/react";
 import * as React from "react";
 import { useEffect, useRef, useState, type ChangeEvent, type DragEvent } from "react";
 import { MdFab } from "@material/web/fab/fab.js";
-import { SUGGESTED_ANALYSIS_MODELS } from "@chai-ui/core";
-import type { DroppedMedia, ModelOption, MediaKind } from "@chai-ui/core";
-import type { MediaAnalysisPromptLength } from "@chai-ui/core";
-import { SearchMenu, type SearchMenuSection } from "./primitives/SearchMenu.js";
+import {
+  DEFAULT_MAX_ATTACHMENTS_BY_KIND,
+  isMediaAnalyzerAtCap,
+  mediaAnalyzerModelSections,
+  nextMediaAnalyzerAttachments,
+  PROMPT_LENGTH_HINT,
+  readMediaFiles,
+  replacedNote,
+  SUGGESTED_ANALYSIS_MODELS,
+} from "@chai-ui/core";
+import type { ModelOption, MediaKind, MediaAnalysisPromptLength } from "@chai-ui/core";
+import { SearchMenu } from "./primitives/SearchMenu.js";
 import { StopIcon } from "./icons.js";
+import type { MediaAnalyzerAttachment, MediaAnalyzerSubmitPayload } from "@chai-ui/core";
+
+export {
+  DEFAULT_MAX_ATTACHMENTS_BY_KIND,
+  isMediaAnalyzerAtCap,
+  nextMediaAnalyzerAttachments,
+  type MediaAnalyzerAttachment,
+  type MediaAnalyzerSubmitPayload,
+} from "@chai-ui/core";
 
 /** See primitives/Toggle.tsx for why `createComponent` is used instead of raw JSX on custom-element tags. */
 const MdFabElement = createComponent({
@@ -16,100 +33,6 @@ const MdFabElement = createComponent({
   events: { onClick: "click" },
 });
 
-const ACCEPTED_KINDS: MediaKind[] = ["image", "video", "audio"];
-
-function detectKind(file: File): MediaKind | undefined {
-  const prefix = file.type.split("/")[0];
-  return ACCEPTED_KINDS.find((k) => k === prefix);
-}
-
-function nextAttachmentId(): string {
-  return typeof crypto !== "undefined" && "randomUUID" in crypto
-    ? crypto.randomUUID()
-    : `attachment-${Date.now()}-${Math.random().toString(36).slice(2)}`;
-}
-
-export interface MediaAnalyzerAttachment extends DroppedMedia {
-  id: string;
-}
-
-/**
- * How many attachments of each kind an analysis can hold at once. Image
- * defaults to 5 (a sequence/series reads as one analysis); video and audio
- * default to 1 — there's no equivalent "a few short clips" case for either,
- * and multiple would each need their own kind-specific model/template
- * anyway.  Only one *kind* is ever active per analysis (see
- * `nextMediaAnalyzerAttachments`'s own comment) — these caps only bound how
- * many of that one kind can pile up before the drop zone stops accepting
- * more.
- */
-export const DEFAULT_MAX_ATTACHMENTS_BY_KIND: Record<MediaKind, number> = {
-  image: 5,
-  video: 1,
-  audio: 1,
-  // `MediaKind`'s fourth member — text is output, never what a drop zone
-  // itself detects (`detectKind` only ever
-  // returns image/video/audio) — unreachable here, present only so this
-  // stays a total map over the real type instead of a partial one.
-  text: 0,
-};
-
-/**
- * Applies one newly-read file to the current attachment list (§3 principle
- * 3, "derive intent, don't demand it" — extended here to multiple files of
- * one kind). Only one media *kind* exists per analysis: dropping a kind
- * that doesn't match what's already attached replaces the whole list
- * (reference: the design spec — "there can only be one media
- * type per analysis... the video thumbnail will replace the image"), never
- * merges the two. Within one kind, video/audio are single-slot (a second
- * drop replaces the first — there's nothing to "add" to), while image fills
- * up to `max` and then silently stops accepting more of the same kind (the
- * drop zone's own disabled-looking state is what explains why, not a
- * rejected-file dialog for something this low-stakes).
- */
-export function nextMediaAnalyzerAttachments(
-  current: MediaAnalyzerAttachment[],
-  incoming: DroppedMedia,
-  maxByKind: Record<MediaKind, number> = DEFAULT_MAX_ATTACHMENTS_BY_KIND
-): MediaAnalyzerAttachment[] {
-  const existingKind = current[0]?.kind;
-  const withId: MediaAnalyzerAttachment = { ...incoming, id: nextAttachmentId() };
-  if (!existingKind || existingKind !== incoming.kind) return [withId];
-  if (incoming.kind === "image") {
-    if (current.length >= (maxByKind.image ?? DEFAULT_MAX_ATTACHMENTS_BY_KIND.image)) return current;
-    return [...current, withId];
-  }
-  // video/audio: single slot, a same-kind drop always replaces it.
-  return [withId];
-}
-
-/**
- * True once a same-kind drop would actually be rejected outright, i.e. the
- * drop zone should show its disabled "maximum added" look. Only ever true
- * for image: video/audio are single-slot, so a same-kind drop *always*
- * succeeds by replacing the one already there (see
- * `nextMediaAnalyzerAttachments`'s own comment) — there's no "blocked"
- * state to show for either, just the normal "ready to replace" one.
- */
-export function isMediaAnalyzerAtCap(
-  current: MediaAnalyzerAttachment[],
-  maxByKind: Record<MediaKind, number> = DEFAULT_MAX_ATTACHMENTS_BY_KIND
-): boolean {
-  if (current[0]?.kind !== "image") return false;
-  return current.length >= (maxByKind.image ?? DEFAULT_MAX_ATTACHMENTS_BY_KIND.image);
-}
-
-export interface MediaAnalyzerSubmitPayload {
-  attachments: MediaAnalyzerAttachment[];
-  modelId: string | null;
-  /** When true, `useMediaAnalyzer` routes among `models` at submit instead of using `modelId`. */
-  autoSelectModel: boolean;
-  /** The models offered for the attached media's kind. */
-  models: ModelOption[];
-  /** `null` until a person actually picks one — see the `promptLength` prop's own doc comment for why this doesn't default to "concise". */
-  promptLength: MediaAnalysisPromptLength | null;
-}
-
 export interface MediaAnalyzerProps {
   attachments: MediaAnalyzerAttachment[];
   onAttachmentsChange: (next: MediaAnalyzerAttachment[]) => void;
@@ -165,20 +88,6 @@ export interface MediaAnalyzerProps {
   onAbort?: () => void;
 }
 
-const KIND_LABEL: Record<MediaKind, string> = {
-  image: "Image",
-  video: "Video",
-  audio: "Audio",
-  text: "Text", // unreachable — see DEFAULT_MAX_ATTACHMENTS_BY_KIND's own comment
-};
-
-/** Clarifies what "Terse"/"Concise"/"Detailed" actually mean in the "Prompt length" menu's own option rows — design spec, not core prompt data (it's UI copy, not sent to any model), so it lives here rather than in media-analysis-to-prompt.prompts.ts. */
-const PROMPT_LENGTH_HINT: Record<MediaAnalysisPromptLength, string> = {
-  terse: "short",
-  concise: "moderate",
-  detailed: "long",
-};
-
 export function MediaAnalyzer({
   attachments,
   onAttachmentsChange,
@@ -214,69 +123,23 @@ export function MediaAnalyzer({
   const [replaced, setReplaced] = useState<{ note: string; for: MediaAnalyzerAttachment[] } | null>(null);
   const isDragActive = dragDepth > 0;
 
-  /**
-   * Reads every file first, then folds each resolved one through
-   * `nextMediaAnalyzerAttachments` in drop order and commits a single final
-   * result — not one `onAttachmentsChange` call per file as each
-   * `FileReader` happens to finish. Multiple files read concurrently
-   * resolve in whatever order the browser gets to them; a call per file
-   * would have each one apply itself on top of the *pre-drop* `attachments`
-   * closure instead of the previous file's own result, so dropping 3 images
-   * at once onto an empty zone could easily end up with just 1 attached
-   * instead of 3 (last write wins) — same failure shape as Composer.tsx's
-   * own `handleFilesSelected`, which this mirrors for exactly that reason.
-   */
-  function handleFiles(fileList: FileList | null) {
+  /** Reads every file first, then applies them in drop order and commits once. */
+  async function handleFiles(fileList: FileList | null) {
     if (!fileList || fileList.length === 0) return;
-    const files = Array.from(fileList);
-    let pending = files.length;
-    const resolved: DroppedMedia[] = [];
-    const settle = () => {
-      pending -= 1;
-      if (pending === 0 && resolved.length > 0) {
-        const next = resolved.reduce(
-          (acc, media) => nextMediaAnalyzerAttachments(acc, media, maxAttachmentsByKind),
-          attachments
-        );
-        const removed = attachments.filter((a) => !next.some((n) => n.id === a.id));
-        const added = next.filter((n) => !attachments.some((a) => a.id === n.id));
-        setReplaced(removed.length > 0 && added.length > 0 ? { note: replacedNote(removed, added), for: next } : null);
-        onAttachmentsChange(next);
-      }
-    };
-    files.forEach((file) => {
-      const fileKind = detectKind(file);
-      if (!fileKind) {
-        onUnsupportedFile?.(file.name);
-        settle();
-        return;
-      }
-      const reader = new FileReader();
-      reader.onload = () => {
-        resolved.push({ src: String(reader.result), kind: fileKind, name: file.name, size: file.size });
-        settle();
-      };
-      reader.onerror = () => {
-        onUnsupportedFile?.(file.name);
-        settle();
-      };
-      reader.readAsDataURL(file);
-    });
+    const { media, unsupported } = await readMediaFiles(fileList);
+    unsupported.forEach((name) => onUnsupportedFile?.(name));
+    if (media.length === 0) return;
+    const next = media.reduce((acc, m) => nextMediaAnalyzerAttachments(acc, m, maxAttachmentsByKind), attachments);
+    const note = replacedNote(attachments, next);
+    setReplaced(note ? { note, for: next } : null);
+    onAttachmentsChange(next);
   }
 
   function handleRemove(id: string) {
     onAttachmentsChange(attachments.filter((a) => a.id !== id));
   }
 
-  const modelOptions: { id: string; label: string }[] = kind
-    ? (modelsByKind[kind] ?? models).map((m) => ({ id: m.id, label: m.label }))
-    : [];
-  const sections: SearchMenuSection<{ id: string; label: string }>[] = kind
-    ? [{ label: KIND_LABEL[kind], options: modelOptions }]
-    : (["image", "video", "audio"] as const).map((k) => ({
-        label: KIND_LABEL[k],
-        options: (modelsByKind[k] ?? []).map((m) => ({ id: m.id, label: m.label })),
-      }));
+  const sections = mediaAnalyzerModelSections(kind, modelsByKind, models);
   // Looked up across every section (not just `modelOptions`, which is empty
   // until a kind is known) — a model picked while the menu still shows all
   // three kinds' sections (no attachment yet) must still resolve to a real
@@ -472,14 +335,6 @@ function MediaAnalyzerThumbnail({
 // Same "trace and inline as a currentColor component" convention Composer.tsx
 // documents — icons aren't shared across files yet in this codebase.
 
-/** "Replaced 2 images with clip.wav." */
-function replacedNote(removed: MediaAnalyzerAttachment[], added: MediaAnalyzerAttachment[]): string {
-  const name = (a: MediaAnalyzerAttachment) => a.name ?? KIND_LABEL[a.kind].toLowerCase();
-  const describe = (list: MediaAnalyzerAttachment[]) =>
-    list.length === 1 ? name(list[0]!) : `${list.length} ${KIND_LABEL[list[0]!.kind].toLowerCase()}s`;
-  return `Replaced ${describe(removed)} with ${describe(added)}.`;
-}
-
 function ArrowForwardIcon() {
   return (
     <svg viewBox="0 -960 960 960" aria-hidden="true">

package/src/ResultCard.tsx

@@ -1,8 +1,18 @@
 import { useEffect, useRef, useState, type CSSProperties, type ReactNode } from "react";
-import { ROUTING_MODEL_ID, type ModelOption, type Result } from "@chai-ui/core";
+import {
+  downloadFilename,
+  downloadMedia,
+  formatAspectRatio,
+  formatCost,
+  formatDuration,
+  formatTokens,
+  resultModelLabel,
+  shareMedia,
+  type ModelOption,
+  type Result,
+} from "@chai-ui/core";
 import { Pagination } from "./primitives/Pagination.js";
 import { CheckSymbolIcon, DownloadIcon, ExpandIcon, ShareIcon } from "./icons.js";
-import { downloadFilename, downloadMedia, shareMedia } from "./media-actions.js";
 import { PageSlide, usePageSlide } from "./page-slide.js";
 
 /**
@@ -19,38 +29,6 @@ import { PageSlide, usePageSlide } from "./page-slide.js";
  * never a grid of separate prompts/history.
  */
 
-// --- Formatting ------------------------------------------------------------
-
-function formatDuration(ms: number | undefined): string | undefined {
-  if (ms == null) return undefined;
-  return `${(ms / 1000).toFixed(2)}s`;
-}
-
-function formatCost(usd: number | undefined): string | undefined {
-  if (usd == null) return undefined;
-  return `$${usd.toFixed(2)}`;
-}
-
-function formatTokens(total: number | undefined): string | undefined {
-  if (total == null) return undefined;
-  return `${total.toLocaleString()} tokens`;
-}
-
-function gcd(a: number, b: number): number {
-  return b === 0 ? a : gcd(b, a % b);
-}
-
-/** A real, exactly-reduced ratio (e.g. 1024×768 → "4:3", 1920×1080 → "16:9") from the media's own measured dimensions — not a guess at the nearest "named" ratio, so an unusual crop just shows its own honest (if less familiar) reduced fraction instead of a misleading rounded one. */
-function formatAspectRatio(width: number, height: number): string | undefined {
-  if (!width || !height) return undefined;
-  const w = Math.round(width);
-  const h = Math.round(height);
-  const divisor = gcd(w, h);
-  if (!divisor) return undefined;
-  return `${w / divisor}:${h / divisor}`;
-}
-
-
 // --- Public types ------------------------------------------------------------
 
 /** One row in the "more" (⋯) menu, for app-specific actions (e.g. "Flag content"). ResultCard can't implement any of them — every one of these just fires `onAction` with this `id`. */
@@ -207,10 +185,7 @@ export function ResultCard({
   if (!result) return null;
 
   const vote = getVote?.(result) ?? null;
-  const modelLabel =
-    result.modelId === ROUTING_MODEL_ID
-      ? "Choosing model…"
-      : (models?.find((m) => m.id === result.modelId)?.label ?? result.modelId);
+  const modelLabel = resultModelLabel(result, models);
   const duration = formatDuration(result.durationMs);
   const cost = formatCost(result.usage?.costUsd);
   const tokens = formatTokens(result.usage?.totalTokens);