Add PDF support via ct-file-input base component (commontoolsinc#2151)

* feat(ui): Add ct-file-input base component

Create generic file upload component that can handle any file type.
Features:
- Accepts any file type via 'accept' attribute
- Smart preview rendering based on MIME type (images vs documents)
- Protected methods for subclass extension (processFile, renderPreview, etc.)
- No compression logic in base class
- Cell-based reactive data binding

This component serves as the base for ct-image-input and enables
PDF/document upload use cases.

Generated with [Claude Code](https://claude.ai/code)
via [Happy](https://happy.engineering)

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

* refactor(ui): Refactor ct-image-input to extend ct-file-input

Convert ct-image-input from standalone component to subclass of ct-file-input.
Changes:
- Extends CTFileInput instead of BaseElement
- ImageData now extends FileData
- Compression logic moved to override methods
- Image dimension extraction in processFile override
- Capture attribute added via renderFileInput override
- Backward compatibility maintained via property aliases (images/maxImages)
- Event details include both 'images' and 'files' properties

This reduces code duplication and establishes clear inheritance hierarchy
while maintaining full backward compatibility with existing code.

Generated with [Claude Code](https://claude.ai/code)
via [Happy](https://happy.engineering)

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

* test(ui): Add manual test file for ct-file-input and ct-image-input

Create HTML test page to verify:
- ct-file-input with PDF support
- ct-file-input with mixed image/PDF support
- ct-image-input backward compatibility (images property)
- ct-image-input camera capture support

Test file includes event listeners to verify both 'images' and 'files'
properties are present for backward compatibility.

Generated with [Claude Code](https://claude.ai/code)
via [Happy](https://happy.engineering)

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

* feat(types): Add JSX types for ct-file-input component

Add TypeScript JSX definitions for ct-file-input:
- CTFileInputElement interface
- CTFileInputAttributes interface with all properties
- IntrinsicElements entry for JSX support

This enables type-safe usage of ct-file-input in patterns.

Generated with [Claude Code](https://claude.ai/code)
via [Happy](https://happy.engineering)

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

* fix: Address cubic code review issues

1. **maxSizeBytes now used in ct-file-input**: Added console.warn when files exceed size threshold
2. **max-file guard fixed**: Only enforces limit in multiple mode, allowing single-file replacement
3. **Removed test-file-input.html**: Browser cannot load TypeScript directly; test-file-upload.tsx pattern serves this purpose
4. **Fixed ct-image-input handler conflict**: Made parent _handleFileChange protected, subclass calls via super
5. **Fixed event recursion**: Override emit() method to add backward-compat properties instead of listening/re-emitting

These changes ensure proper file validation, fix single-file selection replacement, and eliminate infinite recursion in event handling.

Generated with [Claude Code](https://claude.ai/code)
via [Happy](https://happy.engineering)

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

* fix: Address additional cubic code review issues

- Move maxSizeBytes check to after compression so it validates the final file size
- Fix max file guard to only apply in multiple mode, allowing single-file replacement
- Note: test-file-input.html import issue is moot as file was removed in earlier commit

Generated with [Claude Code](https://claude.ai/code)
via [Happy](https://happy.engineering)

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

* Remove test files, screenshots, and bug reports from PR

These files were accidentally included and are not part of the
ct-file-input/ct-image-input PDF support feature:
- 76 playwright screenshot files
- 8 bug report and documentation files
- 11 test pattern files
- package.json/package-lock.json (playwright test dependency)

This reduces the PR from 6,656 lines to just the actual feature code.

Generated with [Claude Code](https://claude.ai/code)
via [Happy](https://happy.engineering)

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

* Format and lint

---------

Co-authored-by: Claude <[email protected]>
Co-authored-by: Happy <[email protected]>
Co-authored-by: Ben Follington <[email protected]>

Author: 4 people

packages/html/src/jsx.d.ts

@@ -2864,6 +2864,7 @@ interface CTListElement extends CTHTMLElement {}
 interface CTListItemElement extends CTHTMLElement {}
 interface CTLoaderElement extends CTHTMLElement {}
 interface CTInputElement extends CTHTMLElement {}
+interface CTFileInputElement extends CTHTMLElement {}
 interface CTImageInputElement extends CTHTMLElement {}
 interface CTInputLegacyElement extends CTHTMLElement {}
 interface CTCheckboxElement extends CTHTMLElement {}
@@ -3247,6 +3248,32 @@ interface CTInputLegacyAttributes<T> extends CTHTMLAttributes<T> {
   "customStyle"?: string;
 }
 
+interface CTFileInputAttributes<T> extends CTHTMLAttributes<T> {
+  "multiple"?: boolean;
+  "maxFiles"?: number;
+  "accept"?: string;
+  "buttonText"?: string;
+  "variant"?:
+    | "default"
+    | "primary"
+    | "secondary"
+    | "outline"
+    | "ghost"
+    | "link"
+    | "destructive";
+  "size"?: "default" | "sm" | "lg" | "icon";
+  "showPreview"?: boolean;
+  "previewSize"?: "sm" | "md" | "lg";
+  "removable"?: boolean;
+  "disabled"?: boolean;
+  "maxSizeBytes"?: number;
+  "files"?: any[]; // FileData[]
+  "$files"?: any; // CellLike<FileData[]>
+  "onct-change"?: EventHandler<any>;
+  "onct-remove"?: EventHandler<any>;
+  "onct-error"?: EventHandler<any>;
+}
+
 interface CTImageInputAttributes<T> extends CTHTMLAttributes<T> {
   "multiple"?: boolean;
   "maxImages"?: number;
@@ -3811,6 +3838,10 @@ declare global {
         CTInputAttributes<CTInputElement>,
         CTInputElement
       >;
+      "ct-file-input": CTDOM.DetailedHTMLProps<
+        CTFileInputAttributes<CTFileInputElement>,
+        CTFileInputElement
+      >;
       "ct-image-input": CTDOM.DetailedHTMLProps<
         CTImageInputAttributes<CTImageInputElement>,
         CTImageInputElement