@chai-ui/core 0.6.1 → 0.7.0

package/src/edit-card.ts

@@ -0,0 +1,138 @@
+/**
+ * The EditCard's geometry, the same in every framework binding: region
+ * boxes, zoom and pan, where the instruction field goes, and the card's
+ * width. Boxes are fractions of the image (0 to 1); pan and sizes are px.
+ */
+import { uniqueId } from "./unique-id.js";
+import { regionColor, type EditRegion, type RegionBox } from "./region-edit.js";
+
+export const EDIT_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;
+/** The instruction field's width, and a typical height (title row and a two-line field), for placing it. */
+const POPOVER_WIDTH = 220;
+const POPOVER_HEIGHT = 96;
+
+export type RegionCorner = "nw" | "ne" | "sw" | "se";
+export const REGION_CORNERS: RegionCorner[] = ["nw", "ne", "sw", "se"];
+export interface Size {
+  width: number;
+  height: number;
+}
+export interface Pan {
+  x: number;
+  y: number;
+}
+
+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. */
+export 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. */
+export function resizeBox(box: RegionBox, corner: RegionCorner, 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 };
+}
+
+/** A region's box after a key: arrows move it (Shift resizes, Alt takes bigger steps). `null` for any other key. */
+export function regionBoxForKey(box: RegionBox, key: string, { shift = false, alt = false } = {}): RegionBox | null {
+  const step = alt ? KEY_STEP_LARGE : KEY_STEP;
+  const delta = ({ ArrowLeft: [-step, 0], ArrowRight: [step, 0], ArrowUp: [0, -step], ArrowDown: [0, step] } as Record<string, [number, number]>)[key];
+  if (!delta) return null;
+  const [dx, dy] = delta;
+  return shift ? resizeBox(box, "se", dx, dy) : fitBox({ ...box, x: box.x + dx, y: box.y + dy });
+}
+
+/** Pan limits at a zoom level: the image always covers the viewport. */
+export 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),
+  };
+}
+
+/** The pan that zooms around the middle of the view, so what's centered stays centered. */
+export function panForZoom(pan: Pan, zoom: number, next: number, size: Size): Pan {
+  const cx = size.width / 2;
+  const cy = size.height / 2;
+  const ratio = next / zoom;
+  return clampPan({ x: cx - (cx - pan.x) * ratio, y: cy - (cy - pan.y) * ratio }, next, size);
+}
+
+/** The pan after an arrow key on the zoomed image, or `null` for any other key. */
+export function panForKey(pan: Pan, key: string, zoom: number, size: Size): Pan | null {
+  const step = 40;
+  const delta = ({ ArrowLeft: [step, 0], ArrowRight: [-step, 0], ArrowUp: [0, step], ArrowDown: [0, -step] } as Record<string, [number, number]>)[key];
+  return delta ? clampPan({ x: pan.x + delta[0], y: pan.y + delta[1] }, zoom, size) : null;
+}
+
+/** The lowest number no current region uses, so freed numbers (and colors) come back first. */
+export function freeRegionNumber(regions: EditRegion[]): number {
+  let n = 1;
+  while (regions.some((r) => r.number === n)) n += 1;
+  return n;
+}
+
+/** A new region, centered in the part of the image in view, so it's visible when zoomed in. */
+export function newRegion(regions: EditRegion[], zoom: number, pan: Pan, size: Size): EditRegion {
+  const view = 1 / zoom;
+  const centerX = size.width ? -pan.x / (size.width * zoom) + view / 2 : 0.5;
+  const centerY = size.height ? -pan.y / (size.height * zoom) + view / 2 : 0.5;
+  const box = fitBox({ x: centerX - (0.3 * view) / 2, y: centerY - (0.2 * view) / 2, width: 0.3 * view, height: 0.2 * view });
+  return { id: uniqueId(), number: freeRegionNumber(regions), box, prompt: "" };
+}
+
+/**
+ * Where the instruction field goes: above its region, or below it when
+ * there isn't room above and it clears the controls along the bottom edge.
+ */
+export function regionPopoverPosition(box: RegionBox, zoom: number, pan: Pan, size: Size, paginated: boolean) {
+  const left = box.x * size.width * zoom + pan.x;
+  const top = box.y * size.height * zoom + pan.y;
+  const bottom = (box.y + box.height) * size.height * zoom + pan.y;
+  const reserved = paginated ? 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,
+  };
+}
+
+/**
+ * The card's width: from `scale` (of the image's own width), else `width`,
+ * else `maxWidth`, then fitted inside `maxWidth` × `maxHeight` keeping the image's shape.
+ */
+export function editCardWidth(
+  natural: Size | null,
+  { width, scale, maxWidth, maxHeight }: { width?: number; scale?: number; maxWidth: number; maxHeight: number }
+): number {
+  const base = scale != null && natural ? natural.width * scale : (width ?? maxWidth);
+  const heightCap = natural && natural.height > 0 ? (maxHeight * natural.width) / natural.height : Infinity;
+  return Math.round(Math.min(base, maxWidth, heightCap));
+}
+
+/** A region's place on the image, as percentages, and its color. */
+export function regionBoxStyle(r: EditRegion): Record<string, string> {
+  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),
+  };
+}

package/src/index.ts

@@ -11,3 +11,7 @@ export * from "./check-suggested-models.js";
 export * from "./reasoning.js";
 export * from "./composer.js";
 export * from "./media-analyzer.js";
+export * from "./media-actions.js";
+export * from "./result-format.js";
+export * from "./composer-view.js";
+export * from "./edit-card.js";

package/src/media-actions.ts

@@ -0,0 +1,55 @@
+/**
+ * Download and share for a piece of generated media, shared by the cards in
+ * every framework binding.
+ *
+ * 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. Says which, so the button can confirm a copy.
+ */
+export async function shareMedia(src: string): Promise<"shared" | "copied" | "none"> {
+  if (navigator.share) {
+    try {
+      await navigator.share({ url: src });
+      return "shared";
+    } catch {
+      // Dismissed, or not shareable: same as closing a native share sheet.
+      return "none";
+    }
+  }
+  try {
+    await navigator.clipboard.writeText(src);
+    return "copied";
+  } catch {
+    return "none";
+  }
+}
+
+/** 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/media-analyzer.ts

@@ -6,6 +6,7 @@
  * (`getState` + `subscribe`) that `useMediaAnalyzer` (React) and the Vue
  * composable wrap.
  */
+import { uniqueId } from "./unique-id.js";
 import { warnNoReasoningOnce } from "./composer.js";
 import { createMockEngine, isAbortError, normalizeGenerationError, type GenerationEngine } from "./engine.js";
 import {
@@ -15,7 +16,7 @@ import {
 } from "./media-analysis-prompts.js";
 import { routeModel, type ModelRoutingInput, type ModelRoutingResult } from "./model-routing.js";
 import { reasoningModelFor, type Reasoning } from "./reasoning.js";
-import type { DroppedMedia, ModelOption } from "./types.js";
+import type { DroppedMedia, MediaKind, ModelOption } from "./types.js";
 
 export interface MediaAnalyzerAttachment extends DroppedMedia {
   id: string;
@@ -180,3 +181,113 @@ export function createMediaAnalyzerStore(
 }
 
 export type MediaAnalyzerStore = ReturnType<typeof createMediaAnalyzerStore>;
+
+// --- Attachments and menus: what the MediaAnalyzer component shows, the same in every framework binding.
+
+const ACCEPTED_KINDS: MediaKind[] = ["image", "video", "audio"];
+
+export const MEDIA_KIND_LABEL: Record<MediaKind, string> = { image: "Image", video: "Video", audio: "Audio", text: "Text" };
+
+/** Clarifies what "Terse"/"Concise"/"Detailed" mean in the "Prompt length" menu's rows. UI copy, not sent to any model. */
+export const PROMPT_LENGTH_HINT: Record<MediaAnalysisPromptLength, string> = {
+  terse: "short",
+  concise: "moderate",
+  detailed: "long",
+};
+
+/**
+ * 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. Only one *kind* is ever active per analysis — these caps only
+ * bound how many of that one kind can pile up before the drop zone stops
+ * accepting more. `text` is output, never dropped: present only so this
+ * stays a total map.
+ */
+export const DEFAULT_MAX_ATTACHMENTS_BY_KIND: Record<MediaKind, number> = { image: 5, video: 1, audio: 1, text: 0 };
+
+/**
+ * Applies one newly-read file to the current attachment list. Only one media
+ * *kind* exists per analysis: a different kind replaces the whole list,
+ * never merges. Video and audio are single-slot (a same-kind drop replaces
+ * it); image fills up to `max`, then silently stops accepting more (the drop
+ * zone's "maximum added" look explains why).
+ */
+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: uniqueId() };
+  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];
+  }
+  return [withId];
+}
+
+/** True once a same-kind drop would be rejected: only ever for image, since video and audio replace. */
+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);
+}
+
+/**
+ * Reads image, video and audio files as data URLs, all of them before
+ * returning, so a caller applies them in drop order in one go (applying
+ * each as its reader finishes would stack them on a stale list).
+ * `unsupported` names the files of another type, or that couldn't be read.
+ */
+export async function readMediaFiles(files: Iterable<File>): Promise<{ media: DroppedMedia[]; unsupported: string[] }> {
+  const unsupported: string[] = [];
+  const read = await Promise.all(
+    [...files].map((file) => {
+      const kind = ACCEPTED_KINDS.find((k) => k === file.type.split("/")[0]);
+      if (!kind) {
+        unsupported.push(file.name);
+        return null;
+      }
+      return new Promise<DroppedMedia | null>((resolve) => {
+        const reader = new FileReader();
+        reader.onload = () => resolve({ src: String(reader.result), kind, name: file.name, size: file.size });
+        reader.onerror = () => {
+          unsupported.push(file.name);
+          resolve(null);
+        };
+        reader.readAsDataURL(file);
+      });
+    })
+  );
+  return { media: read.filter((m): m is DroppedMedia => m !== null), unsupported };
+}
+
+/** "Replaced 2 images with clip.wav.", or `null` when nothing was replaced. */
+export function replacedNote(before: MediaAnalyzerAttachment[], after: MediaAnalyzerAttachment[]): string | null {
+  const removed = before.filter((a) => !after.some((n) => n.id === a.id));
+  const added = after.filter((n) => !before.some((a) => a.id === n.id));
+  if (removed.length === 0 || added.length === 0) return null;
+  const name = (a: MediaAnalyzerAttachment) => a.name ?? MEDIA_KIND_LABEL[a.kind].toLowerCase();
+  const describe = (list: MediaAnalyzerAttachment[]) =>
+    list.length === 1 ? name(list[0]!) : `${list.length} ${MEDIA_KIND_LABEL[list[0]!.kind].toLowerCase()}s`;
+  return `Replaced ${describe(removed)} with ${describe(added)}.`;
+}
+
+/**
+ * The "Select model" menu's sections: once a kind is attached, only its
+ * models (falling back to `models`); before that, all three kinds, each
+ * under its own header.
+ */
+export function mediaAnalyzerModelSections(
+  kind: MediaKind | undefined,
+  modelsByKind: Partial<Record<MediaKind, ModelOption[]>>,
+  models: ModelOption[]
+): { label: string; options: { id: string; label: string }[] }[] {
+  const options = (list: ModelOption[] = []) => list.map((m) => ({ id: m.id, label: m.label }));
+  return kind
+    ? [{ label: MEDIA_KIND_LABEL[kind], options: options(modelsByKind[kind] ?? models) }]
+    : (["image", "video", "audio"] as const).map((k) => ({ label: MEDIA_KIND_LABEL[k], options: options(modelsByKind[k]) }));
+}

package/src/region-edit.ts

@@ -113,3 +113,11 @@ export function buildRegionEditPrompt({
     .filter(Boolean)
     .join(" ");
 }
+
+/** 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})`;
+}

package/src/result-format.ts

@@ -0,0 +1,34 @@
+/** How `ResultCard` shows a result's details, the same in every framework binding. */
+import { ROUTING_MODEL_ID, type Result } from "./run.js";
+import type { ModelOption } from "./types.js";
+
+export function formatDuration(ms: number | undefined): string | undefined {
+  return ms == null ? undefined : `${(ms / 1000).toFixed(2)}s`;
+}
+
+export function formatCost(usd: number | undefined): string | undefined {
+  return usd == null ? undefined : `$${usd.toFixed(2)}`;
+}
+
+export function formatTokens(total: number | undefined): string | undefined {
+  return total == null ? undefined : `${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. */
+export 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);
+  return `${w / divisor}:${h / divisor}`;
+}
+
+/** The model's label from `models`, falling back to its raw id; "Choosing model…" while auto-select is still picking. */
+export function resultModelLabel(result: Result, models?: ModelOption[]): string {
+  if (result.modelId === ROUTING_MODEL_ID) return "Choosing model…";
+  return models?.find((m) => m.id === result.modelId)?.label ?? result.modelId;
+}

package/src/unique-id.ts

@@ -0,0 +1,6 @@
+/** A unique id for an attachment or region. Internal: not exported from the package. */
+export function uniqueId(): string {
+  return typeof crypto !== "undefined" && "randomUUID" in crypto
+    ? crypto.randomUUID()
+    : `id-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+}