Implement image resize search with bisect (commontoolsinc#2056)

* Add maxSizeBytes auto-compression to ct-image-input

Add optional client-side image compression for LLM API size limits:

**New Property**:
- `maxSizeBytes?: number` - Optional max size before compression
- Only compresses if set and file exceeds limit
- Falls back to original if compression fails

**Compression Strategy**:
- Uses Canvas API (OffscreenCanvas for performance)
- Tries 9 progressive size/quality combinations:
  - 2048px @ 85% quality → 800px @ 50% quality
- Stops when under size limit
- Logs compression results for debugging

**Implementation**:
- `_compressImage()`: Robust compression with fallback
- Preserves original filename
- Updates size metadata to reflect compressed size
- JPEG output for broad compatibility

**Use Case**:
Anthropic vision API has 5MB limit per image. Setting maxSizeBytes={4_500_000} ensures images compress automatically before upload.

**Example**:
```typescript
<ct-image-input
  maxSizeBytes={4500000}
  multiple
  maxImages={5}
  buttonText="📷 Scan Signs"
/>
```

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

* Add maxSizeBytes to CTImageInputAttributes types

Update JSX type definitions for new compression property

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

* Optimize image compression with binary search algorithm

Replace linear scan through 9 predefined quality/dimension combinations
with an intelligent binary search approach:

- Binary search on quality values (0.5-0.95) for each dimension level
- Tries dimensions in descending order: 2048, 1600, 1200, 800
- Returns as soon as optimal compression is found
- More efficient: typically 3-4 compressions per dimension vs 9 total
- Better quality: finds optimal quality dynamically instead of using
  predefined values

This reduces compression time while maintaining or improving output quality.

* Refactor: Extract image compression logic into utility module

Move the binary search image compression algorithm from ct-image-input
component into a reusable utility module:

- Created packages/ui/src/v2/utils/image-compression.ts with:
  - compressImage() function with configurable options
  - formatFileSize() helper function
  - CompressionResult interface with detailed metadata
  - CompressionOptions interface for customization

Benefits:
- Reusability: Other components can now use image compression
- Testability: Logic can be tested independently
- Separation of concerns: UI component focuses on presentation
- Maintainability: Algorithm improvements benefit all consumers
- Type safety: Proper TypeScript interfaces and return types

The ct-image-input component now delegates to the utility while
maintaining the same compression behavior and logging.

* Fix lint

* Fix logic so it works at runtime

* Trim console.log output

* Clarify intended logic

* Fix logic

* Respond to feedback

---------

Co-authored-by: Alex Komoroske <[email protected]>
Co-authored-by: Claude <[email protected]>

Author: 3 people

packages/html/src/jsx.d.ts

@@ -3162,6 +3162,7 @@ interface CTInputLegacyAttributes<T> extends CTHTMLAttributes<T> {
 interface CTImageInputAttributes<T> extends CTHTMLAttributes<T> {
   "multiple"?: boolean;
   "maxImages"?: number;
+  "maxSizeBytes"?: number;
   "capture"?: "user" | "environment" | false;
   "buttonText"?: string;
   "variant"?:

packages/ui/src/v2/components/ct-image-input/ct-image-input.ts

@@ -12,6 +12,10 @@ import {
   defaultTheme,
   themeContext,
 } from "../theme-context.ts";
+import {
+  compressImage,
+  formatFileSize,
+} from "../../utils/image-compression.ts";
 import "../ct-button/ct-button.ts";
 
 /**
@@ -68,6 +72,7 @@ export interface ImageData {
  *
  * @attr {boolean} multiple - Allow multiple images (default: false)
  * @attr {number} maxImages - Max number of images (default: unlimited)
+ * @attr {number} maxSizeBytes - Max size in bytes before compression (default: no compression)
  * @attr {string} capture - Capture mode: "user" | "environment" | false
  * @attr {string} buttonText - Custom button text (default: "📷 Add Photo")
  * @attr {string} variant - Button style variant
@@ -83,6 +88,8 @@ export interface ImageData {
  *
  * @example
  * <ct-image-input capture="environment" buttonText="📸 Scan"></ct-image-input>
+ * @example
+ * <ct-image-input maxSizeBytes={5000000} buttonText="📸 Upload"></ct-image-input>
  */
 export class CTImageInput extends BaseElement {
   static override styles = [
@@ -219,6 +226,9 @@ export class CTImageInput extends BaseElement {
   @property({ type: Boolean })
   disabled = false;
 
+  @property({ type: Number })
+  maxSizeBytes?: number = 5 * 1024 * 1024; // Default to 5MB
+
   @property({ type: Array })
   images: Cell<ImageData[]> | ImageData[] = [];
 
@@ -307,48 +317,88 @@ export class CTImageInput extends BaseElement {
     }
   }
 
-  private _processFile(file: File): Promise<ImageData> {
+  /**
+   * Compress an image file using the image compression utility
+   * @param file - The image file to compress
+   * @param maxSizeBytes - Target maximum size in bytes
+   * @returns Compressed blob
+   */
+  private async _compressImage(
+    file: File,
+    maxSizeBytes: number,
+  ): Promise<Blob> {
+    const result = await compressImage(file, { maxSizeBytes });
+
+    // Log compression result
+    if (result.compressedSize < result.originalSize) {
+      console.log(
+        `Compressed ${file.name}: ${formatFileSize(result.originalSize)} → ${
+          formatFileSize(result.compressedSize)
+        } (${result.width}x${result.height}, q${result.quality.toFixed(2)})`,
+      );
+    }
+
+    if (result.compressedSize > maxSizeBytes) {
+      console.warn(
+        `Could not compress ${file.name} below ${
+          formatFileSize(maxSizeBytes)
+        }. Final size: ${formatFileSize(result.compressedSize)}`,
+      );
+    }
+
+    return result.blob;
+  }
+
+  private async _processFile(file: File): Promise<ImageData> {
+    const id = this._generateId();
+
+    // Compress if maxSizeBytes is set and file exceeds it
+    let fileToProcess: Blob = file;
+    if (this.maxSizeBytes && file.size > this.maxSizeBytes) {
+      try {
+        fileToProcess = await this._compressImage(file, this.maxSizeBytes);
+      } catch (error) {
+        console.error("Compression failed, using original file:", error);
+        // Continue with original file if compression fails
+      }
+    }
+
     return new Promise((resolve, reject) => {
       const reader = new FileReader();
-      const id = this._generateId();
 
       reader.onload = () => {
-        try {
-          const dataUrl = reader.result as string;
-
-          // Get image dimensions
-          const img = new Image();
-          img.onload = () => {
-            const imageData: ImageData = {
-              id,
-              name: file.name || `Photo-${Date.now()}.jpg`,
-              url: dataUrl,
-              data: dataUrl,
-              timestamp: Date.now(),
-              width: img.width,
-              height: img.height,
-              size: file.size,
-              type: file.type,
-            };
-
-            resolve(imageData);
+        const dataUrl = reader.result as string;
+
+        // Get image dimensions from the data URL
+        const img = new Image();
+        img.onload = () => {
+          const imageData: ImageData = {
+            id,
+            name: file.name || `Photo-${Date.now()}.jpg`,
+            url: dataUrl,
+            data: dataUrl,
+            timestamp: Date.now(),
+            width: img.width,
+            height: img.height,
+            size: fileToProcess.size, // Use compressed size
+            type: fileToProcess.type || file.type,
           };
 
-          img.onerror = () => {
-            reject(new Error("Failed to load image"));
-          };
+          resolve(imageData);
+        };
 
-          img.src = dataUrl;
-        } catch (error) {
-          reject(error);
-        }
+        img.onerror = () => {
+          reject(new Error("Failed to load image"));
+        };
+
+        img.src = dataUrl;
       };
 
       reader.onerror = () => {
         reject(new Error("Failed to read file"));
       };
 
-      reader.readAsDataURL(file);
+      reader.readAsDataURL(fileToProcess);
     });
   }
 
@@ -360,12 +410,6 @@ export class CTImageInput extends BaseElement {
     this.emit("ct-change", { images: updatedImages });
   }
 
-  private _formatFileSize(bytes: number): string {
-    if (bytes < 1024) return `${bytes} B`;
-    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
-    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
-  }
-
   override connectedCallback() {
     super.connectedCallback();
     // CellController handles subscription automatically via ReactiveController
@@ -452,7 +496,7 @@ export class CTImageInput extends BaseElement {
                         `
                         : ""}
                       <div class="image-info" title="${image.name}">
-                        ${image.name} (${this._formatFileSize(image.size)})
+                        ${image.name} (${formatFileSize(image.size)})
                       </div>
                     </div>
                   `,