feat: Add HuggingFace Spaces README and fix TypeScript build issues

- Created comprehensive README.md with YAML frontmatter for HF Spaces
- Fixed TypeScript errors by refactoring setObjects callbacks to direct calls
- Removed unused variables (rect, dropX, dropY)
- Fixed boolean type coercion issues with ?? operator
- Successfully built production bundle (505KB)
- Ready for deployment to HuggingFace Spaces

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

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

README.md

@@ -0,0 +1,90 @@
+---
+title: HF Thumbnail Crafter
+emoji: 🎨
+colorFrom: blue
+colorTo: purple
+sdk: static
+pinned: false
+license: mit
+---
+
+# HF Thumbnail Crafter
+
+A web-based thumbnail creator for HuggingFace users. Create quick, professional thumbnails with pre-made layouts and visual assets (Huggys).
+
+## Features
+
+- **4 Pre-designed Layouts**: Serious Collab, Fun Collab, Sandwich, and Docs layouts
+- **44+ Huggy Mascot Assets**: Loaded directly from HuggingFace dataset
+- **Custom Text Editing**: Support for Inter & IBM Plex Mono fonts with bold/italic styling
+- **Image Upload**: Drag-and-drop support for local images (PNG, JPG, WebP)
+- **Layer Management**: Use `[` and `]` keyboard shortcuts to reorder objects
+- **Smart Canvas Tools**:
+  - Multi-select with drag-to-select box or Shift+Click
+  - Arrow key movement (1px or 10px with Shift)
+  - Shift-constrained drag (horizontal/vertical lock)
+  - Smart snapping to canvas center lines
+- **Export**: High-quality PNG export with custom filename
+- **Undo/Redo**: Full history support (Ctrl+Z / Ctrl+Shift+Z)
+
+## Usage
+
+1. **Select a Layout**: Click the Layout button in the sidebar to choose from 4 pre-designed templates
+2. **Customize**:
+   - Add Huggys from the Huggy menu
+   - Upload your own images
+   - Edit text directly on canvas (double-click)
+   - Adjust colors using the background selector
+3. **Arrange Objects**:
+   - Drag to reposition
+   - Use `[` and `]` keys to change layer order
+   - Transform with scaling and rotation
+4. **Export**: Click the export button and download your thumbnail as PNG
+
+## Keyboard Shortcuts
+
+- **`T`**: Activate text creation mode
+- **`Delete/Backspace`**: Delete selected objects
+- **`Ctrl+Z`**: Undo
+- **`Ctrl+Shift+Z`**: Redo
+- **`Ctrl+D`**: Duplicate selected objects
+- **`Arrow Keys`**: Move selection 1px (hold Shift for 10px)
+- **`[`**: Send backward (decrease layer order)
+- **`]`**: Bring forward (increase layer order)
+- **`Shift + Drag`**: Constrain to horizontal/vertical axis
+
+## Canvas Sizes
+
+- **1200×675**: Default size (X/Twitter)
+- **1200×627**: LinkedIn size
+- **1160×580**: HuggingFace custom size
+
+## Tech Stack
+
+- **Frontend**: React 18 + TypeScript
+- **Build Tool**: Vite
+- **Canvas**: react-konva + Konva.js
+- **Styling**: Tailwind CSS
+- **Icons**: Custom Figma-exported SVGs
+- **Fonts**: Inter, IBM Plex Mono, Bison Bold
+
+## Development
+
+```bash
+# Install dependencies
+npm install
+
+# Run dev server
+npm run dev
+
+# Build for production
+npx vite build
+```
+
+## License
+
+MIT
+
+---
+
+🤖 Built with [Claude Code](https://claude.com/claude-code)

src/App.tsx

@@ -8,7 +8,7 @@ import LayoutSwitchConfirmation from './components/Layout/LayoutSwitchConfirmati
 import TextToolbar from './components/TextToolbar/TextToolbar';
 import { useCanvasState } from './hooks/useCanvasState';
 import { useViewportScale } from './hooks/useViewportScale';
-import { LayoutType, TextObject } from './types/canvas.types';
+import { LayoutType, TextObject, CanvasObject } from './types/canvas.types';
 import { getLayoutById } from './data/layouts';
 import { getCanvasDimensions, generateId, getNextZIndex, sortByZIndex } from './utils/canvas.utils';
 import { Huggy } from './data/huggys';
@@ -111,7 +111,7 @@ function App() {
     // Get the maximum zIndex from existing objects
     const maxZIndex = objects.length > 0 ? Math.max(...objects.map(obj => obj.zIndex)) : 0;
 
-    const layoutObjects = layout.objects.map((obj, index) => {
+    const layoutObjects = layout.objects.map((obj) => {
       const baseObj = {
         ...obj,
         id: `${obj.id}-${Date.now()}`,
@@ -337,12 +337,6 @@ function App() {
       // Get the canvas container element to calculate relative position
       const canvasContainer = document.querySelector('.canvas-container');
       if (canvasContainer) {
-        const rect = canvasContainer.getBoundingClientRect();
-
-        // Calculate position relative to canvas
-        const dropX = e.clientX - rect.left;
-        const dropY = e.clientY - rect.top;
-
         // Find the actual canvas stage element (the white/dark canvas area)
         const canvasStage = canvasContainer.querySelector('.konvajs-content');
         if (canvasStage) {
@@ -775,8 +769,8 @@ function App() {
         const textObj = selectedTextObjects[0];
         const fontFamily = textObj?.fontFamily || 'Inter';
         const fill = textObj?.fill || '#000000';
-        const bold = textObj?.bold || false;
-        const italic = textObj?.italic || false;
+        const bold = textObj?.bold ?? false;
+        const italic = textObj?.italic ?? false;
 
         // Get canvas dimensions
         const dimensions = getCanvasDimensions(canvasSize);
@@ -793,8 +787,7 @@ function App() {
             scale={scale}
             stageRef={stageRef}
             onFontFamilyChange={(font) => {
-              setObjects(prevObjects =>
-                prevObjects.map(o => {
+              const updatedObjects = objects.map((o: CanvasObject) => {
                   if (o.type === 'text' && selectedTextObjects.some(selected => selected.id === o.id)) {
                     // Recalculate text dimensions with new font
                     try {
@@ -816,21 +809,19 @@ function App() {
                     }
                   }
                   return o;
-                })
-              );
+                });
+              setObjects(updatedObjects);
             }}
             onFillChange={(color) => {
-              setObjects(prevObjects =>
-                prevObjects.map(o =>
+              const updatedObjects = objects.map((o: CanvasObject) =>
                   o.type === 'text' && selectedTextObjects.some(selected => selected.id === o.id)
                     ? { ...o, fill: color }
                     : o
-                )
-              );
+                );
+              setObjects(updatedObjects);
             }}
             onBoldToggle={() => {
-              setObjects(prevObjects =>
-                prevObjects.map(o => {
+              const updatedObjects = objects.map((o: CanvasObject) => {
                   if (o.type === 'text' && selectedTextObjects.some(selected => selected.id === o.id)) {
                     const newBold = !o.bold;
                     // Recalculate text dimensions with new bold state
@@ -853,12 +844,11 @@ function App() {
                     }
                   }
                   return o;
-                })
-              );
+                });
+              setObjects(updatedObjects);
             }}
             onItalicToggle={() => {
-              setObjects(prevObjects =>
-                prevObjects.map(o => {
+              const updatedObjects = objects.map((o: CanvasObject) => {
                   if (o.type === 'text' && selectedTextObjects.some(selected => selected.id === o.id)) {
                     const newItalic = !o.italic;
                     // Recalculate text dimensions with new italic state
@@ -881,8 +871,8 @@ function App() {
                     }
                   }
                   return o;
-                })
-              );
+                });
+              setObjects(updatedObjects);
             }}
           />
         );