@stigmer/react 3.8.0 → 3.9.0

package/src/attachment/__tests__/vision-fit.test.ts

@@ -0,0 +1,93 @@
+import { describe, it, expect } from "vitest";
+import {
+  MAX_VISION_LONG_EDGE_PX,
+  MAX_VISION_PIXELS,
+  exceedsVisionResolution,
+  fitToVisionResolution,
+} from "../vision-fit.js";
+
+describe("exceedsVisionResolution", () => {
+  it("is false at and below both limits", () => {
+    expect(exceedsVisionResolution(200, 200)).toBe(false);
+    expect(exceedsVisionResolution(1000, 1000)).toBe(false);
+    // Exactly at the pixel ceiling.
+    expect(exceedsVisionResolution(1000, 1150)).toBe(false);
+    // Exactly at the edge ceiling, pixels under budget.
+    expect(exceedsVisionResolution(MAX_VISION_LONG_EDGE_PX, 700)).toBe(false);
+  });
+
+  it("is true when either limit is exceeded", () => {
+    expect(exceedsVisionResolution(1920, 1080)).toBe(true); // pixels
+    expect(exceedsVisionResolution(MAX_VISION_LONG_EDGE_PX + 1, 10)).toBe(true); // edge
+  });
+});
+
+describe("fitToVisionResolution", () => {
+  it("returns within-limit dimensions unchanged (never upscales)", () => {
+    expect(fitToVisionResolution(200, 200)).toEqual({ width: 200, height: 200 });
+    expect(fitToVisionResolution(1000, 1000)).toEqual({ width: 1000, height: 1000 });
+    expect(fitToVisionResolution(1000, 1150)).toEqual({ width: 1000, height: 1150 });
+  });
+
+  it("returns degenerate dimensions unchanged instead of crashing", () => {
+    expect(fitToVisionResolution(0, 100)).toEqual({ width: 0, height: 100 });
+    expect(fitToVisionResolution(-5, 100)).toEqual({ width: -5, height: 100 });
+    expect(fitToVisionResolution(Number.NaN, 100)).toEqual({
+      width: Number.NaN,
+      height: 100,
+    });
+    expect(fitToVisionResolution(Number.POSITIVE_INFINITY, 100)).toEqual({
+      width: Number.POSITIVE_INFINITY,
+      height: 100,
+    });
+  });
+
+  // Invariant checks across representative shapes: exact pixel values are
+  // an implementation detail of the fitting math, but every output must
+  // satisfy the published limits, preserve aspect, and never upscale.
+  const shapes: Array<[string, number, number]> = [
+    ["1080p screenshot", 1920, 1080],
+    ["4K screenshot", 3840, 2160],
+    ["Retina laptop screenshot", 2880, 1800],
+    ["portrait phone screenshot", 1170, 2532],
+    ["3:2 camera photo", 6000, 4000],
+    ["square", 4000, 4000],
+    ["wide panorama (edge limit binds)", 10000, 300],
+    ["tall receipt scan (edge limit binds)", 300, 10000],
+    ["just over the pixel ceiling", 1073, 1073],
+  ];
+
+  for (const [label, width, height] of shapes) {
+    it(`fits ${label} (${width}x${height}) within all limits`, () => {
+      const fitted = fitToVisionResolution(width, height);
+
+      // Both published limits hold.
+      expect(fitted.width * fitted.height).toBeLessThanOrEqual(MAX_VISION_PIXELS);
+      expect(Math.max(fitted.width, fitted.height)).toBeLessThanOrEqual(
+        MAX_VISION_LONG_EDGE_PX,
+      );
+
+      // Never upscales, always yields drawable integer dimensions.
+      expect(fitted.width).toBeLessThanOrEqual(width);
+      expect(fitted.height).toBeLessThanOrEqual(height);
+      expect(fitted.width).toBeGreaterThanOrEqual(1);
+      expect(fitted.height).toBeGreaterThanOrEqual(1);
+      expect(Number.isInteger(fitted.width)).toBe(true);
+      expect(Number.isInteger(fitted.height)).toBe(true);
+
+      // Aspect ratio preserved within integer-rounding tolerance.
+      const originalAspect = width / height;
+      const fittedAspect = fitted.width / fitted.height;
+      expect(Math.abs(fittedAspect - originalAspect) / originalAspect).toBeLessThan(
+        0.02,
+      );
+    });
+  }
+
+  it("uses most of the pixel budget rather than over-shrinking", () => {
+    // The fit should land close under the ceiling, not waste resolution:
+    // a 4K screenshot must keep at least 90% of the allowed pixels.
+    const fitted = fitToVisionResolution(3840, 2160);
+    expect(fitted.width * fitted.height).toBeGreaterThan(MAX_VISION_PIXELS * 0.9);
+  });
+});

package/src/attachment/attachment-utils.ts

@@ -112,3 +112,30 @@ export function validateAttachmentSize(file: File): string | null {
   }
   return null;
 }
+
+/**
+ * Returns `name` unchanged when it is not in `taken`, otherwise the first
+ * free `stem-2.ext`, `stem-3.ext`, … variant.
+ *
+ * Duplicate filenames within one turn are not a cosmetic problem:
+ * attachments materialize at `.stigmer/inputs/{filename}`, where the
+ * deep-agent harness fails the whole execution on a mount-path collision
+ * and the Cursor harness silently overwrites the earlier file. A visible
+ * rename on the attachment chip is strictly better than either outcome.
+ */
+export function uniquifyFilename(
+  name: string,
+  taken: ReadonlySet<string>,
+): string {
+  if (!taken.has(name)) return name;
+
+  const dotIndex = name.lastIndexOf(".");
+  // A leading dot (".env") is a hidden-file prefix, not an extension.
+  const stem = dotIndex > 0 ? name.slice(0, dotIndex) : name;
+  const ext = dotIndex > 0 ? name.slice(dotIndex) : "";
+
+  for (let n = 2; ; n++) {
+    const candidate = `${stem}-${n}${ext}`;
+    if (!taken.has(candidate)) return candidate;
+  }
+}

package/src/attachment/clipboard.ts

@@ -0,0 +1,102 @@
+/**
+ * Clipboard file extraction for composer surfaces — the paste half of
+ * "paste a screenshot and the agent sees it" (stigmer/stigmer#284).
+ *
+ * Extraction is deliberately SYNCHRONOUS. Clipboard file handles are only
+ * reliable while the paste event is being dispatched, and the caller must
+ * decide `preventDefault()` in the same tick (a copied image usually carries
+ * an HTML/text flavor that would otherwise paste as junk markup). An async
+ * "one call" API here would pass in tests and lose pastes in real browsers.
+ * Async work on the extracted files (e.g. {@link prepareImageForVision})
+ * happens after extraction, on plain `File` objects that stay valid.
+ */
+
+/**
+ * Structural source for {@link extractClipboardFiles}: both the native
+ * `ClipboardEvent` and React's synthetic clipboard event satisfy it.
+ */
+export interface ClipboardFilesSource {
+  readonly clipboardData: { readonly files: FileList } | null;
+}
+
+/**
+ * Names browsers assign to clipboard images that never had a real filename
+ * (a screenshot, an image copied off a web page). Chrome, Firefox, and
+ * Safari all use `image.<ext>`. A file pasted from the OS file manager
+ * keeps its real name and never matches.
+ */
+const GENERIC_CLIPBOARD_IMAGE_NAME = /^image\.(png|jpe?g|gif|webp|tiff?|bmp|avif)$/i;
+
+/** Extension for a synthesized name, keyed by the clipboard MIME type. */
+const IMAGE_MIME_EXTENSIONS: Record<string, string> = {
+  "image/png": "png",
+  "image/jpeg": "jpg",
+  "image/gif": "gif",
+  "image/webp": "webp",
+  "image/tiff": "tiff",
+  "image/bmp": "bmp",
+  "image/avif": "avif",
+  "image/svg+xml": "svg",
+};
+
+/**
+ * Monotonic per-page-session counter. Combined with the time component this
+ * keeps synthesized names unique even across page reloads within one agent
+ * session — required because attachments materialize at
+ * `.stigmer/inputs/{filename}` in a session-scoped directory, where a
+ * repeated name from a later turn silently replaces the earlier turn's file.
+ */
+let pasteSequence = 0;
+
+function synthesizePastedImageName(mimeType: string, now: Date): string {
+  const pad = (n: number) => String(n).padStart(2, "0");
+  const time = `${pad(now.getHours())}${pad(now.getMinutes())}${pad(now.getSeconds())}`;
+  const ext = IMAGE_MIME_EXTENSIONS[mimeType.toLowerCase()] ?? "png";
+  pasteSequence += 1;
+  return `pasted-image-${time}-${pasteSequence}.${ext}`;
+}
+
+/**
+ * Extracts files from a paste event, giving clipboard images that carry the
+ * browser's generic `image.png` name a unique, human-readable one
+ * (`pasted-image-<HHMMSS>-<n>.<ext>`).
+ *
+ * Unique names are load-bearing, not cosmetic: attachments mount at
+ * `.stigmer/inputs/{filename}`, and two same-named attachments either fail
+ * the execution (deep-agent harness) or silently overwrite each other
+ * (Cursor harness). Files with real names (pasted from a file manager) are
+ * returned unchanged.
+ *
+ * Returns an empty array for a text-only paste — callers use that to let
+ * the default text insertion proceed untouched.
+ *
+ * Must be called synchronously from the paste event handler. Call
+ * `event.preventDefault()` in the same tick when the result is non-empty;
+ * the returned `File` objects remain valid afterwards.
+ *
+ * @example
+ * ```tsx
+ * function handlePaste(e: React.ClipboardEvent<HTMLTextAreaElement>) {
+ *   const files = extractClipboardFiles(e);
+ *   if (files.length === 0) return; // plain text paste — leave it alone
+ *   e.preventDefault();
+ *   attachments.addFiles(files);
+ * }
+ * ```
+ */
+export function extractClipboardFiles(event: ClipboardFilesSource): File[] {
+  const fileList = event.clipboardData?.files;
+  if (!fileList || fileList.length === 0) return [];
+
+  return Array.from(fileList).map((file) => {
+    const isGenericImage =
+      file.type.toLowerCase().startsWith("image/") &&
+      (file.name === "" || GENERIC_CLIPBOARD_IMAGE_NAME.test(file.name));
+    if (!isGenericImage) return file;
+
+    return new File([file], synthesizePastedImageName(file.type, new Date()), {
+      type: file.type,
+      lastModified: file.lastModified,
+    });
+  });
+}

package/src/attachment/index.ts

@@ -13,5 +13,18 @@ export {
   MAX_ATTACHMENT_BYTES,
   detectContentType,
   formatFileSize,
+  uniquifyFilename,
   validateAttachmentSize,
 } from "./attachment-utils.js";
+
+export { extractClipboardFiles } from "./clipboard.js";
+export type { ClipboardFilesSource } from "./clipboard.js";
+
+export { prepareImageForVision } from "./prepare-image.js";
+export {
+  MAX_VISION_LONG_EDGE_PX,
+  MAX_VISION_PIXELS,
+  exceedsVisionResolution,
+  fitToVisionResolution,
+} from "./vision-fit.js";
+export type { VisionFitSize } from "./vision-fit.js";

package/src/attachment/prepare-image.ts

@@ -0,0 +1,179 @@
+/**
+ * Browser-side image preparation for agent vision — the canvas half of
+ * "paste a screenshot and the agent sees it" (stigmer/stigmer#284).
+ *
+ * A screenshot from a large display is routinely a 4-10 MB PNG. The runner
+ * delivers images to the model inline only under its per-image byte cap
+ * (3 MiB raw; see the runner's `shared/attachment-vision.ts`), so an
+ * unprepared paste degrades to "I can't see this file". Bounding the image
+ * to the resolution providers actually process (see vision-fit.ts) is
+ * quality-neutral and brings real screenshots far under that cap — while
+ * also making the upload roughly 20× faster.
+ *
+ * Applied to PASTED images only, by the composer's paste handler. Picked
+ * and dragged files are never re-encoded: a chosen file may be the subject
+ * of the task ("read the EXIF", "embed this logo"), and silently altering
+ * it would be a regression. A pasted image has no file identity to preserve.
+ *
+ * Failure policy: this module never throws and never returns a broken file.
+ * Every failure path — no canvas API (old browsers, privacy extensions,
+ * non-browser test environments), undecodable bytes, encoder failure —
+ * returns the ORIGINAL file, which still works end to end: it uploads,
+ * mounts in the workspace, and merely degrades at the runner with the
+ * standard "not viewable inline" disclosure.
+ */
+
+import {
+  exceedsVisionResolution,
+  fitToVisionResolution,
+} from "./vision-fit.js";
+
+/**
+ * Formats the harnesses can display inline everywhere: the Cursor harness
+ * re-sniffs magic bytes and recognizes ONLY PNG and JPEG (the deep-agent
+ * harness also takes WebP/GIF). Anything else that must ride as pixels is
+ * re-encoded to PNG so a Safari TIFF or Chrome WebP paste is not invisible
+ * on one harness.
+ */
+const UNIVERSAL_VISION_TYPES = new Set(["image/png", "image/jpeg"]);
+
+/**
+ * PNG density (encoded bytes per pixel) above which content is treated as
+ * photographic and re-encoded as JPEG instead.
+ *
+ * PNG keeps UI text crisp and compresses flat screenshot content to
+ * 0.1-0.5 B/px, but photographic content in PNG runs 1.5-3 B/px and can
+ * exceed the runner's 3 MiB inline cap even at the fitted resolution
+ * (measured: ~3.4 MB for worst-case noise at 1.15 MP). Density is the
+ * content signal — scale-invariant, so small UI images never flip to JPEG
+ * just because their absolute sizes are tiny (a pure size ratio fails
+ * exactly that way) — and it bounds every kept PNG by construction:
+ * 1.15 MP × 1.0 B/px ≈ 1.1 MB, far inside the runner's cap, without this
+ * module ever referencing the runner's byte constant.
+ */
+const PHOTOGRAPHIC_PNG_BYTES_PER_PIXEL = 1.0;
+const JPEG_QUALITY = 0.9;
+
+function replaceExtension(name: string, ext: string): string {
+  const dotIndex = name.lastIndexOf(".");
+  const stem = dotIndex > 0 ? name.slice(0, dotIndex) : name;
+  return `${stem}.${ext}`;
+}
+
+function encodeCanvas(
+  canvas: HTMLCanvasElement,
+  type: string,
+  quality?: number,
+): Promise<Blob | null> {
+  return new Promise((resolve) => {
+    try {
+      canvas.toBlob(resolve, type, quality);
+    } catch {
+      resolve(null);
+    }
+  });
+}
+
+/**
+ * Bounds a pasted image to the resolution vision providers actually
+ * process, re-encoding to a format both harnesses can display inline.
+ *
+ * - PNG and JPEG within the resolution limits pass through byte-identical
+ *   (also guards edit-and-resubmit flows against generation loss).
+ * - GIF within the limits passes through untouched — re-encoding would
+ *   silently flatten an animation the agent also receives as a file.
+ * - Oversized images resize to {@link fitToVisionResolution}; other formats
+ *   (WebP, TIFF, BMP…) re-encode even when small, for harness visibility.
+ * - Output format: JPEG stays JPEG; everything else prefers PNG (crisp UI
+ *   text), switching to JPEG only for photographic content — detected by
+ *   PNG byte density, where PNG can exceed the runner's inline byte cap.
+ *
+ * Never throws; every failure path returns the original file (see module
+ * doc). Non-image files are returned unchanged.
+ */
+export async function prepareImageForVision(file: File): Promise<File> {
+  const sourceType = file.type.toLowerCase();
+  if (!sourceType.startsWith("image/")) return file;
+  if (typeof createImageBitmap !== "function" || typeof document === "undefined") {
+    return file;
+  }
+
+  let bitmap: ImageBitmap;
+  try {
+    // "from-image" applies EXIF orientation, so a pasted phone photo lands
+    // upright instead of sideways (most browsers default to this, older
+    // Safari does not).
+    bitmap = await createImageBitmap(file, { imageOrientation: "from-image" });
+  } catch {
+    return file;
+  }
+
+  try {
+    const needsResize = exceedsVisionResolution(bitmap.width, bitmap.height);
+    const isGif = sourceType === "image/gif";
+
+    // Within limits and already displayable everywhere (or an animated GIF,
+    // which only the resize case may flatten): leave every byte alone.
+    if (!needsResize && (UNIVERSAL_VISION_TYPES.has(sourceType) || isGif)) {
+      return file;
+    }
+
+    const target = needsResize
+      ? fitToVisionResolution(bitmap.width, bitmap.height)
+      : { width: bitmap.width, height: bitmap.height };
+
+    const canvas = document.createElement("canvas");
+    canvas.width = target.width;
+    canvas.height = target.height;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return file;
+    ctx.drawImage(bitmap, 0, 0, target.width, target.height);
+
+    let blob: Blob | null;
+    let outType: string;
+
+    if (sourceType === "image/jpeg") {
+      outType = "image/jpeg";
+      blob = await encodeCanvas(canvas, outType, JPEG_QUALITY);
+    } else {
+      const png = await encodeCanvas(canvas, "image/png");
+      const pngDensity = png ? png.size / (target.width * target.height) : Infinity;
+
+      if (png && pngDensity <= PHOTOGRAPHIC_PNG_BYTES_PER_PIXEL) {
+        outType = "image/png";
+        blob = png;
+      } else {
+        // Photographic content (or a failed PNG encode): take JPEG. JPEG
+        // cannot represent alpha, so composite onto white first —
+        // destination-over paints beneath the already-drawn image, and the
+        // alpha-preserving PNG encode above is already done.
+        ctx.globalCompositeOperation = "destination-over";
+        ctx.fillStyle = "#ffffff";
+        ctx.fillRect(0, 0, target.width, target.height);
+        const jpeg = await encodeCanvas(canvas, "image/jpeg", JPEG_QUALITY);
+
+        blob = jpeg ?? png;
+        outType = jpeg ? "image/jpeg" : "image/png";
+      }
+    }
+
+    if (!blob) return file;
+
+    // A pure resize that somehow grew the file is a regression, not a win:
+    // the runner caps bytes, not pixels, so the smaller original is the
+    // better payload. (Cross-format re-encodes are exempt — growing a WebP
+    // into a PNG is the price of being visible on the Cursor harness.)
+    if (outType === sourceType && blob.size >= file.size) return file;
+
+    const extension = outType === "image/jpeg" ? "jpg" : "png";
+    const name =
+      outType === sourceType ? file.name : replaceExtension(file.name, extension);
+
+    return new File([blob], name, {
+      type: outType,
+      lastModified: file.lastModified,
+    });
+  } finally {
+    bitmap.close();
+  }
+}

package/src/attachment/useAttachments.ts

@@ -9,6 +9,7 @@ import { toError } from "../internal/toError.js";
 import {
   detectContentType,
   formatFileSize,
+  uniquifyFilename,
   validateAttachmentSize,
 } from "./attachment-utils.js";
 
@@ -166,6 +167,14 @@ export function useAttachments(
   const [entries, setEntries] = useState<AttachmentEntry[]>([]);
   const abortControllers = useRef<Map<string, AbortController>>(new Map());
 
+  // Latest-entries mirror so `addFiles` can uniquify filenames against
+  // current entries without depending on `entries` (which would give the
+  // callback a new identity every upload-phase change). Re-assigned each
+  // render to reconcile removals, and synchronously inside `addFiles` so
+  // two adds in one tick still see each other's names.
+  const entriesRef = useRef<readonly AttachmentEntry[]>(entries);
+  entriesRef.current = entries;
+
   const uploadFile = useCallback(
     async (id: string, file: File, contentType: string) => {
       const controller = new AbortController();
@@ -215,14 +224,28 @@ export function useAttachments(
     (files: FileList | File[]) => {
       const fileArray = Array.from(files);
       const validEntries: AttachmentEntry[] = [];
+      const takenNames = new Set(entriesRef.current.map((e) => e.file.name));
 
-      for (const file of fileArray) {
-        const sizeError = validateAttachmentSize(file);
+      for (const rawFile of fileArray) {
+        const sizeError = validateAttachmentSize(rawFile);
         if (sizeError) {
           options?.onValidationError?.(sizeError);
           continue;
         }
 
+        // Duplicate names within a turn break the execution downstream
+        // (see uniquifyFilename) — rename before the bytes ever upload,
+        // so the chip, the upload, and the mounted file all agree.
+        const uniqueName = uniquifyFilename(rawFile.name, takenNames);
+        takenNames.add(uniqueName);
+        const file =
+          uniqueName === rawFile.name
+            ? rawFile
+            : new File([rawFile], uniqueName, {
+                type: rawFile.type,
+                lastModified: rawFile.lastModified,
+              });
+
         const id = generateId();
         const contentType = detectContentType(file);
 
@@ -239,6 +262,7 @@ export function useAttachments(
       }
 
       if (validEntries.length > 0) {
+        entriesRef.current = [...entriesRef.current, ...validEntries];
         setEntries((prev) => [...prev, ...validEntries]);
       }
     },

package/src/attachment/vision-fit.ts

@@ -0,0 +1,90 @@
+/**
+ * Resolution policy for images attached to agent executions — the pure math
+ * behind {@link prepareImageForVision}.
+ *
+ * Vision providers cap what they will actually look at: Anthropic's standard
+ * tier downscales anything beyond a 1568 px long edge or ~1.15 megapixels
+ * before the model sees it (OpenAI's high-detail tiling lands in the same
+ * range). Shrinking to that ceiling in the browser is therefore
+ * quality-neutral — the provider would do it anyway — while cutting a 4-10 MB
+ * screenshot paste to a few hundred KB before it ever hits the wire.
+ *
+ * Deliberately NOT named "budget": in this codebase *vision budget* means the
+ * runner's per-turn byte/count budget (`VisionBudget` in the runner's
+ * `shared/attachment-vision.ts`, 3 MiB per image raw). That byte cap stays
+ * the runner's concern alone; this module bounds pixels, the provider's
+ * concern. Two limits, one owner each, no constants to drift.
+ */
+
+/**
+ * Maximum long-edge length, mirroring Anthropic's standard-tier limit.
+ * @see https://platform.claude.com/docs/en/build-with-claude/vision
+ */
+export const MAX_VISION_LONG_EDGE_PX = 1568;
+
+/**
+ * Maximum total pixels, mirroring Anthropic's standard-tier visual-token
+ * ceiling (1568 tokens ≈ 1.15 megapixels). For nearly all photos and
+ * screenshots this — not the edge limit — is the binding constraint: a
+ * 1920×1080 screenshot fits the edge limit but still resizes to 1456×819.
+ */
+export const MAX_VISION_PIXELS = 1_150_000;
+
+/** Integer pixel dimensions produced by {@link fitToVisionResolution}. */
+export interface VisionFitSize {
+  readonly width: number;
+  readonly height: number;
+}
+
+/**
+ * True when an image of these dimensions would be downscaled by the
+ * provider — i.e. when resizing it ourselves loses nothing.
+ */
+export function exceedsVisionResolution(width: number, height: number): boolean {
+  return (
+    width * height > MAX_VISION_PIXELS ||
+    Math.max(width, height) > MAX_VISION_LONG_EDGE_PX
+  );
+}
+
+/**
+ * The largest size that fits both vision limits while preserving aspect
+ * ratio. Never upscales: dimensions already within the limits come back
+ * unchanged. Mirrors Anthropic's published "max API fit" computation.
+ *
+ * Degenerate inputs (zero, negative, or non-finite dimensions) come back
+ * unchanged — the caller's decode has already failed or will fail, and this
+ * module never turns a bad input into a crash.
+ */
+export function fitToVisionResolution(width: number, height: number): VisionFitSize {
+  if (!Number.isFinite(width) || !Number.isFinite(height) || width <= 0 || height <= 0) {
+    return { width, height };
+  }
+  if (!exceedsVisionResolution(width, height)) {
+    return { width, height };
+  }
+
+  const aspect = width / height;
+
+  // Largest size under the pixel ceiling at this aspect ratio.
+  let fitHeight = Math.sqrt(MAX_VISION_PIXELS / aspect);
+  let fitWidth = fitHeight * aspect;
+
+  // The edge limit takes over only for extreme aspect ratios (panoramas,
+  // tall phone screenshots), where the pixel-fitted size still has a long
+  // edge beyond the cap.
+  if (Math.max(fitWidth, fitHeight) > MAX_VISION_LONG_EDGE_PX) {
+    if (fitWidth >= fitHeight) {
+      fitWidth = MAX_VISION_LONG_EDGE_PX;
+      fitHeight = fitWidth / aspect;
+    } else {
+      fitHeight = MAX_VISION_LONG_EDGE_PX;
+      fitWidth = fitHeight * aspect;
+    }
+  }
+
+  return {
+    width: Math.max(1, Math.floor(Math.min(fitWidth, width))),
+    height: Math.max(1, Math.floor(Math.min(fitHeight, height))),
+  };
+}