Fix module issues, fix styling, add conditions to when the background removal and edit controls are shown

Flatted and issues fixed with Claude Desktop.
Consolidate to single server with unified package.json
2026-04-23 08:48:11 -05:00 · 2026-04-22 06:21:02 -05:00 · 2026-04-21 22:24:20 -05:00 · 2026-04-21 22:08:22 -05:00 · 2026-04-21 21:55:18 -05:00 · 2026-04-21 21:50:33 -05:00
98 changed files with 13298 additions and 7427 deletions
--- a/.dockerignore
+++ b/.dockerignore
@@ -10,3 +10,5 @@ exports/*
 !exports/.gitkeep
 dist
 .cache
+.env
+.env.*
--- a/.env.example
+++ b/.env.example
@@ -1,6 +1,3 @@
-# Server Configuration
 PORT=3001
 NODE_ENV=development
-
-# Client Configuration
-VITE_API_URL=http://localhost:3001
+# CORS_ORIGIN=https://your-domain.com
--- a/.gitignore
+++ b/.gitignore
@@ -1,33 +1,16 @@
-# Dependencies
 node_modules/
-*/node_modules/
-
-# Logs
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-# Build outputs
 dist/
-*/dist/
-
-# Environment
+npm-debug.log*
 .env
 .env.local
 .env.*.local
-
-# OS
 .DS_Store
 Thumbs.db
-
-# IDE
 .idea/
 .vscode/
 *.swp
 *.swo
-
-# Uploads and exports (keep .gitkeep)
-server/uploads/*
-!server/uploads/.gitkeep
-server/exports/*
-!server/exports/.gitkeep
+uploads/*
+!uploads/.gitkeep
+exports/*
+!exports/.gitkeep
--- a/52
+++ b/52
@@ -1,48 +1,28 @@
-# Stage 1: Build client
-FROM node:20-alpine AS client-builder
+FROM node:20-alpine AS builder

-WORKDIR /app/client
-
-COPY client/package*.json ./
-RUN npm install
-
-COPY client/ ./
-RUN npm run build
-
-# Stage 2: Production server
-FROM node:20-alpine
-
-# Install system dependencies for node-canvas and sharp
-RUN apk add --no-cache \
-    cairo-dev \
-    pango-dev \
-    libjpeg-turbo-dev \
-    giflib-dev \
-    librsvg-dev \
-    pixman-dev \
-    python3 \
-    make \
-    g++
+RUN apk add --no-cache cairo-dev pango-dev libjpeg-turbo-dev giflib-dev librsvg-dev pixman-dev python3 make g++

 WORKDIR /app
+COPY package*.json ./
+RUN npm install
+COPY . .
+RUN npm run build

-# Copy server package files and install
-COPY server/package*.json ./server/
-RUN cd server && npm install --production
+FROM node:20-alpine

-# Copy server source
-COPY server/ ./server/
+RUN apk add --no-cache cairo-dev pango-dev libjpeg-turbo-dev giflib-dev librsvg-dev pixman-dev python3 make g++

-# Copy built client from builder
-COPY --from=client-builder /app/client/dist ./server/dist
+WORKDIR /app
+COPY package*.json ./
+RUN npm install --omit=dev && apk del python3 make g++

-# Create data directories
-RUN mkdir -p /app/server/uploads /app/server/exports
+COPY server.js ./
+COPY --from=builder /app/dist ./dist
+RUN mkdir -p /app/uploads /app/exports

-# Health check
 HEALTHCHECK --interval=30s --timeout=10s --start-period=5s --retries=3 \
    CMD wget --no-verbose --tries=1 --spider http://localhost:3001/api/health || exit 1

 EXPOSE 3001
-
-CMD ["node", "server/index.js"]
+ENV NODE_ENV=production
+CMD ["node", "server.js"]
--- a/README.md
+++ b/README.md
@@ -0,0 +1,89 @@
+# Apparel Designer
+
+T-shirt customization editor with drag-and-drop design, background removal, and high-resolution export.
+
+## Features
+
+- **Canvas Editor** — React-Konva based drag/drop/resize/rotate for images and text
+- **Background Removal** — Client-side AI using Transformers.js (RMBG-1.4, 8-bit quantized)
+- **Photo Pre-Editor** — Filerobot integration for crop, filters, and adjustments
+- **Stickers** — 140+ emoji stickers across 6 categories
+- **Text Tool** — 20 Google Fonts, sizes, and colors
+- **Templates** — 8 pre-designed templates across various categories
+- **Undo/Redo** — Full history with keyboard shortcuts (Ctrl+Z / Ctrl+Shift+Z)
+- **High-Res Export** — 4500×4500px PNG @ 300 DPI (15"×15" print size)
+- **PWA Support** — Offline caching for models, fonts, and assets
+
+## Tech Stack
+
+| Layer | Choice |
+|-------|--------|
+| Frontend | React 19, Vite, react-konva 19, Konva 10 |
+| Background Removal | @huggingface/transformers, RMBG-1.4 (q8) |
+| Photo Editor | Filerobot Image Editor |
+| PWA | Workbox via vite-plugin-pwa |
+| Server | Express, Multer, Sharp |
+| Export | node-canvas (4500×4500 server-side render) |
+
+## Getting Started
+
+```bash
+# Install dependencies
+npm install
+
+# Start development (client on :3000, server on :3001)
+npm run dev
+
+# macOS Sharp fix is built into the dev script
+# On Windows use:
+npm run dev:win
+```
+
+## Docker
+
+```bash
+docker compose up --build
+```
+
+## Project Structure
+
+```
+apparel-designer/
+├── server.js              # Express API (upload, export, health)
+├── vite.config.js         # Vite + PWA config
+├── package.json           # Single package — all deps
+├── index.html             # Entry HTML with Google Fonts
+├── src/
+│   ├── main.jsx           # React entry + SW registration
+│   ├── App.jsx            # Root layout (sidebar / canvas / properties)
+│   ├── App.css
+│   ├── index.css          # Design tokens + layout styles
+│   ├── components/
+│   │   ├── canvas/        # DesignCanvas, ImageElement, TextElement, TShirtSVG, TemplateLayer, SlotPlaceholder
+│   │   ├── sidebar/       # Sidebar, UploadTab, StickersTab, TextTab, TemplatesTab, BackgroundRemovalButton
+│   │   ├── panels/        # LayersPanel, PropertiesPanel
+│   │   ├── editor/        # PhotoPreEditor (Filerobot wrapper)
+│   │   ├── PWAInstall.jsx
+│   │   └── OfflineIndicator.jsx
+│   ├── hooks/             # useDesignEditor, useBackgroundRemoval, useExport, useTemplate
+│   └── constants/         # fonts, stickers, templates
+├── public/                # Favicon, PWA icons
+├── uploads/               # User uploads (gitignored)
+├── exports/               # Exported PNGs (gitignored)
+├── docs/                  # Template JSON schema
+├── Dockerfile
+└── docker-compose.yml
+```
+
+## API Endpoints
+
+| Method | Endpoint | Description |
+|--------|----------|-------------|
+| GET | `/api/health` | Health check |
+| POST | `/api/upload` | Upload image (20MB max, JPEG/PNG/WebP) |
+| POST | `/api/export` | Export design as 4500×4500 PNG |
+| GET | `/api/download/:filename` | Download exported file |
+
+## License
+
+MIT
--- a/client/.gitignore
+++ b/client/.gitignore
@@ -1,24 +0,0 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
-
-node_modules
-dist
-dist-ssr
-*.local
-
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
-.idea
-.DS_Store
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
--- a/client/README.md
+++ b/client/README.md
@@ -1,16 +0,0 @@
-# React + Vite
-
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
-
-Currently, two official plugins are available:
-
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
-
-## React Compiler
-
-The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.
--- a/client/package-lock.json
+++ b/client/package-lock.json
--- a/client/package.json
+++ b/client/package.json
@@ -1,32 +0,0 @@
-{
-  "name": "client",
-  "private": true,
-  "version": "0.0.0",
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "lint": "eslint .",
-    "preview": "vite preview"
-  },
-  "dependencies": {
-    "react": "^19.2.5",
-    "react-dom": "^19.2.5",
-    "react-konva": "^18.2.10",
-    "konva": "^9.3.18",
-    "use-image": "^1.1.1",
-    "@xenova/transformers": "^2.17.2",
-    "react-filerobot-image-editor": "^4.8.1"
-  },
-  "devDependencies": {
-    "@eslint/js": "^9.39.4",
-    "@types/react": "^19.2.14",
-    "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^6.0.1",
-    "eslint": "^9.39.4",
-    "eslint-plugin-react-hooks": "^7.1.1",
-    "eslint-plugin-react-refresh": "^0.5.2",
-    "globals": "^17.5.0",
-    "vite": "^8.0.9"
-  }
-}
--- a/client/public/favicon.svg
+++ b/client/public/favicon.svg
--- a/client/public/icons.svg
+++ b/client/public/icons.svg
@@ -1,24 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg">
-  <symbol id="bluesky-icon" viewBox="0 0 16 17">
-    <g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
-    <defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
-  </symbol>
-  <symbol id="discord-icon" viewBox="0 0 20 19">
-    <path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
-  </symbol>
-  <symbol id="documentation-icon" viewBox="0 0 21 20">
-    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
-    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
-    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
-  </symbol>
-  <symbol id="github-icon" viewBox="0 0 19 19">
-    <path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
-  </symbol>
-  <symbol id="social-icon" viewBox="0 0 20 20">
-    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
-    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
-  </symbol>
-  <symbol id="x-icon" viewBox="0 0 19 19">
-    <path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
-  </symbol>
-</svg>
--- a/client/src/App.css
+++ b/client/src/App.css
@@ -1,184 +0,0 @@
-.counter {
-  font-size: 16px;
-  padding: 5px 10px;
-  border-radius: 5px;
-  color: var(--accent);
-  background: var(--accent-bg);
-  border: 2px solid transparent;
-  transition: border-color 0.3s;
-  margin-bottom: 24px;
-
-  &:hover {
-    border-color: var(--accent-border);
-  }
-  &:focus-visible {
-    outline: 2px solid var(--accent);
-    outline-offset: 2px;
-  }
-}
-
-.hero {
-  position: relative;
-
-  .base,
-  .framework,
-  .vite {
-    inset-inline: 0;
-    margin: 0 auto;
-  }
-
-  .base {
-    width: 170px;
-    position: relative;
-    z-index: 0;
-  }
-
-  .framework,
-  .vite {
-    position: absolute;
-  }
-
-  .framework {
-    z-index: 1;
-    top: 34px;
-    height: 28px;
-    transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg)
-      scale(1.4);
-  }
-
-  .vite {
-    z-index: 0;
-    top: 107px;
-    height: 26px;
-    width: auto;
-    transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg)
-      scale(0.8);
-  }
-}
-
-#center {
-  display: flex;
-  flex-direction: column;
-  gap: 25px;
-  place-content: center;
-  place-items: center;
-  flex-grow: 1;
-
-  @media (max-width: 1024px) {
-    padding: 32px 20px 24px;
-    gap: 18px;
-  }
-}
-
-#next-steps {
-  display: flex;
-  border-top: 1px solid var(--border);
-  text-align: left;
-
-  & > div {
-    flex: 1 1 0;
-    padding: 32px;
-    @media (max-width: 1024px) {
-      padding: 24px 20px;
-    }
-  }
-
-  .icon {
-    margin-bottom: 16px;
-    width: 22px;
-    height: 22px;
-  }
-
-  @media (max-width: 1024px) {
-    flex-direction: column;
-    text-align: center;
-  }
-}
-
-#docs {
-  border-right: 1px solid var(--border);
-
-  @media (max-width: 1024px) {
-    border-right: none;
-    border-bottom: 1px solid var(--border);
-  }
-}
-
-#next-steps ul {
-  list-style: none;
-  padding: 0;
-  display: flex;
-  gap: 8px;
-  margin: 32px 0 0;
-
-  .logo {
-    height: 18px;
-  }
-
-  a {
-    color: var(--text-h);
-    font-size: 16px;
-    border-radius: 6px;
-    background: var(--social-bg);
-    display: flex;
-    padding: 6px 12px;
-    align-items: center;
-    gap: 8px;
-    text-decoration: none;
-    transition: box-shadow 0.3s;
-
-    &:hover {
-      box-shadow: var(--shadow);
-    }
-    .button-icon {
-      height: 18px;
-      width: 18px;
-    }
-  }
-
-  @media (max-width: 1024px) {
-    margin-top: 20px;
-    flex-wrap: wrap;
-    justify-content: center;
-
-    li {
-      flex: 1 1 calc(50% - 8px);
-    }
-
-    a {
-      width: 100%;
-      justify-content: center;
-      box-sizing: border-box;
-    }
-  }
-}
-
-#spacer {
-  height: 88px;
-  border-top: 1px solid var(--border);
-  @media (max-width: 1024px) {
-    height: 48px;
-  }
-}
-
-.ticks {
-  position: relative;
-  width: 100%;
-
-  &::before,
-  &::after {
-    content: '';
-    position: absolute;
-    top: -4.5px;
-    border: 5px solid transparent;
-  }
-
-  &::before {
-    left: 0;
-    border-left-color: var(--border);
-  }
-  &::after {
-    right: 0;
-    border-right-color: var(--border);
-  }
-}
--- a/client/src/App.jsx
+++ b/client/src/App.jsx
@@ -1,115 +0,0 @@
-import { useEffect } from 'react';
-import { DesignCanvas } from './components/canvas/DesignCanvas';
-import { Sidebar } from './components/sidebar/Sidebar';
-import { LayersPanel } from './components/panels/LayersPanel';
-import { PropertiesPanel } from './components/panels/PropertiesPanel';
-import { useDesignEditor } from './hooks/useDesignEditor';
-
-function App() {
-  const {
-    elements,
-    selectedId,
-    addElement,
-    updateElement,
-    deleteElement,
-    selectElement,
-    deselectAll,
-  } = useDesignEditor();
-
-  const selectedElement = elements.find(el => el.id === selectedId);
-
-  // Keyboard shortcut: Delete/Backspace removes selected element
-  useEffect(() => {
-    const handleKeyDown = (e) => {
-      // Don't delete if user is typing in an input
-      if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') {
-        return;
-      }
-      if (e.key === 'Delete' || e.key === 'Backspace') {
-        if (selectedId) {
-          deleteElement(selectedId);
-        }
-      }
-    };
-
-    window.addEventListener('keydown', handleKeyDown);
-    return () => window.removeEventListener('keydown', handleKeyDown);
-  }, [selectedId, deleteElement]);
-
-  // Handler callbacks for sidebar tabs
-  const handleAddImage = (imageData) => {
-    addElement(imageData);
-  };
-
-  const handleAddSticker = (stickerData) => {
-    addElement(stickerData);
-  };
-
-  const handleAddText = (textData) => {
-    addElement(textData);
-  };
-
-  const handleAddTemplate = (templateId) => {
-    console.log('Template selected:', templateId);
-    // Template loading will be implemented in Phase 6
-  };
-
-  return (
-    <div className="editor-layout">
-      {/* Left Sidebar */}
-      <Sidebar
-        onAddImage={handleAddImage}
-        onAddSticker={handleAddSticker}
-        onAddText={handleAddText}
-        onAddTemplate={handleAddTemplate}
-      />
-
-      {/* Center Canvas Area */}
-      <div className="canvas-area">
-        <div style={{ marginBottom: '1rem', textAlign: 'center' }}>
-          <h1 style={{ margin: '0 0 0.25rem 0', fontSize: '20px', color: 'var(--text-primary)' }}>
-            Apparel Designer
-          </h1>
-          <p style={{ margin: 0, fontSize: '12px', color: 'var(--text-secondary)' }}>
-            T-shirt customization editor
-          </p>
-        </div>
-
-        <DesignCanvas
-          elements={elements}
-          selectedId={selectedId}
-          onSelect={selectElement}
-          onDeselect={deselectAll}
-          onUpdate={updateElement}
-        />
-
-        {/* Layers panel below canvas */}
-        <div style={{
-          marginTop: '1.5rem',
-          width: '100%',
-          maxWidth: '400px',
-          background: 'var(--bg-primary)',
-          borderRadius: 'var(--radius-md)',
-          padding: '1rem',
-          boxShadow: 'var(--shadow-md)',
-        }}>
-          <LayersPanel
-            elements={elements}
-            selectedId={selectedId}
-            onSelect={selectElement}
-            onDelete={deleteElement}
-          />
-        </div>
-      </div>
-
-      {/* Right Properties Panel */}
-      <PropertiesPanel
-        element={selectedElement}
-        onUpdate={(attrs) => updateElement(selectedId, attrs)}
-        onDelete={deleteElement}
-      />
-    </div>
-  );
-}
-
-export default App;
--- a/client/src/assets/hero.png
+++ b/client/src/assets/hero.png
--- a/client/src/assets/react.svg
+++ b/client/src/assets/react.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
--- a/client/src/assets/vite.svg
+++ b/client/src/assets/vite.svg
--- a/client/src/components/canvas/DesignCanvas.jsx
+++ b/client/src/components/canvas/DesignCanvas.jsx
@@ -1,95 +0,0 @@
-import { Stage, Layer } from 'react-konva';
-import { TShirtSVG } from './TShirtSVG';
-import { ImageElement } from './ImageElement';
-import { TextElement } from './TextElement';
-
-const CANVAS_SIZE = 300;
-
-export function DesignCanvas({
-  elements,
-  selectedId,
-  onSelect,
-  onDeselect,
-  onUpdate,
-}) {
-  return (
-    <div style={{ position: 'relative', display: 'inline-block' }}>
-      {/* T-shirt SVG background */}
-      <TShirtSVG size={CANVAS_SIZE} />
-
-      {/* Canvas Stage */}
-      <Stage
-        width={CANVAS_SIZE}
-        height={CANVAS_SIZE}
-        onClick={onDeselect}
-        onTap={onDeselect}
-        style={{
-          position: 'absolute',
-          top: '50%',
-          left: '50%',
-          transform: 'translate(-50%, -50%)',
-          border: selectedId ? '2px solid #38bdf8' : '1px dashed #cbd5e1',
-          borderRadius: '8px',
-          background: 'rgba(255, 255, 255, 0.5)',
-        }}
-      >
-        <Layer>
-          {elements.map((el) => {
-            if (el.type === 'image') {
-              return (
-                <ImageElement
-                  key={el.id}
-                  id={el.id}
-                  x={el.x}
-                  y={el.y}
-                  width={el.width}
-                  height={el.height}
-                  rotation={el.rotation}
-                  src={el.src}
-                  isSelected={el.id === selectedId}
-                  onSelect={() => onSelect(el.id)}
-                  onUpdate={(attrs) => onUpdate(el.id, attrs)}
-                />
-              );
-            }
-            if (el.type === 'text') {
-              return (
-                <TextElement
-                  key={el.id}
-                  id={el.id}
-                  x={el.x}
-                  y={el.y}
-                  text={el.text}
-                  fontSize={el.fontSize}
-                  fontFamily={el.fontFamily}
-                  fill={el.fill}
-                  rotation={el.rotation}
-                  isSelected={el.id === selectedId}
-                  onSelect={() => onSelect(el.id)}
-                  onUpdate={(attrs) => onUpdate(el.id, attrs)}
-                />
-              );
-            }
-            return null;
-          })}
-        </Layer>
-      </Stage>
-
-      {/* Canvas info bar */}
-      <div
-        style={{
-          position: 'absolute',
-          bottom: '-40px',
-          left: '50%',
-          transform: 'translateX(-50%)',
-          fontSize: '12px',
-          color: 'var(--text-secondary)',
-          textAlign: 'center',
-          whiteSpace: 'nowrap',
-        }}
-      >
-        Design Area: 15" × 15" • Export: 4500 × 4500px @ 300 DPI
-      </div>
-    </div>
-  );
-}
--- a/client/src/components/canvas/ImageElement.jsx
+++ b/client/src/components/canvas/ImageElement.jsx
@@ -1,98 +0,0 @@
-import { useEffect, useState } from 'react';
-import { Image, Transformer } from 'react-konva';
-import useImage from 'use-image';
-
-function URLImage({ src, ...props }) {
-  const [img] = useImage(src, 'anonymous');
-  return <Image image={img} {...props} />;
-}
-
-export function ImageElement({
-  id,
-  x,
-  y,
-  width,
-  height,
-  rotation,
-  src,
-  isSelected,
-  onSelect,
-  onUpdate,
-}) {
-  const shapeRef = null;
-  const trRef = null;
-
-  useEffect(() => {
-    if (isSelected && trRef.current) {
-      trRef.current.nodes([shapeRef.current]);
-      trRef.current.getLayer().batchDraw();
-    }
-  }, [isSelected]);
-
-  return (
-    <>
-      <URLImage
-        ref={shapeRef}
-        x={x}
-        y={y}
-        width={width}
-        height={height}
-        rotation={rotation}
-        src={src}
-        draggable
-        onClick={onSelect}
-        onTap={onSelect}
-        onDragEnd={(e) => {
-          onUpdate({
-            x: e.target.x(),
-            y: e.target.y(),
-          });
-        }}
-        onTransformEnd={(e) => {
-          const node = shapeRef.current;
-          const scaleX = node.scaleX();
-          const scaleY = node.scaleY();
-          node.scaleX(1);
-          node.scaleY(1);
-          onUpdate({
-            x: node.x(),
-            y: node.y(),
-            width: Math.max(20, node.width() * scaleX),
-            height: Math.max(20, node.height() * scaleY),
-            rotation: node.rotation(),
-          });
-        }}
-        boundBoxFunc={(oldBox, newBox) => {
-          // Minimum size constraint
-          if (newBox.width < 20 || newBox.height < 20) {
-            return oldBox;
-          }
-          return newBox;
-        }}
-      />
-      {isSelected && (
-        <Transformer
-          ref={trRef}
-          boundBoxFunc={(oldBox, newBox) => {
-            // Limit resize to minimum size
-            if (newBox.width < 20 || newBox.height < 20) {
-              return oldBox;
-            }
-            return newBox;
-          }}
-          anchorSize={8}
-          anchorCornerRadius={4}
-          borderStroke="#38bdf8"
-          anchorStroke="#38bdf8"
-          anchorFill="#ffffff"
-        />
-      )}
-    </>
-  );
-}
-
-ImageElement.defaultProps = {
-  width: 100,
-  height: 100,
-  rotation: 0,
-};
--- a/client/src/components/canvas/TShirtSVG.jsx
+++ b/client/src/components/canvas/TShirtSVG.jsx
@@ -1,59 +0,0 @@
-export function TShirtSVG({ size = 300 }) {
-  const padding = size * 0.1;
-  const innerSize = size - padding * 2;
-
-  return (
-    <svg
-      width={size}
-      height={size}
-      viewBox={`0 0 ${size} ${size}`}
-      style={{
-        position: 'absolute',
-        top: '50%',
-        left: '50%',
-        transform: 'translate(-50%, -50%)',
-        pointerEvents: 'none',
-        zIndex: 0,
-      }}
-    >
-      {/* T-shirt outline */}
-      <path
-        d={`
-          M ${padding} ${padding + innerSize * 0.15}
-          L ${padding + innerSize * 0.15} ${padding}
-          L ${size - padding - innerSize * 0.15} ${padding}
-          L ${size - padding} ${padding + innerSize * 0.15}
-          L ${size - padding} ${size - padding}
-          L ${padding} ${size - padding}
-          Z
-        `}
-        fill="none"
-        stroke="var(--border)"
-        strokeWidth="2"
-        strokeDasharray="4,4"
-      />
-      {/* Chest area indicator (design zone) */}
-      <rect
-        x={size * 0.3}
-        y={size * 0.25}
-        width={size * 0.4}
-        height={size * 0.35}
-        fill="none"
-        stroke="var(--accent)"
-        strokeWidth="1.5"
-        opacity="0.5"
-      />
-      {/* Label */}
-      <text
-        x={size / 2}
-        y={size * 0.45}
-        textAnchor="middle"
-        fill="var(--text-muted)"
-        fontSize="10"
-        fontFamily="var(--font-mono)"
-      >
-        Print Zone
-      </text>
-    </svg>
-  );
-}
--- a/client/src/components/canvas/TextElement.jsx
+++ b/client/src/components/canvas/TextElement.jsx
@@ -1,80 +0,0 @@
-import { useEffect } from 'react';
-import { Text, Transformer } from 'react-konva';
-
-export function TextElement({
-  id,
-  x,
-  y,
-  text,
-  fontSize,
-  fontFamily,
-  fill,
-  rotation,
-  isSelected,
-  onSelect,
-  onUpdate,
-}) {
-  const textRef = null;
-  const trRef = null;
-
-  useEffect(() => {
-    if (isSelected && trRef.current) {
-      trRef.current.nodes([textRef.current]);
-      trRef.current.getLayer().batchDraw();
-    }
-  }, [isSelected]);
-
-  return (
-    <>
-      <Text
-        ref={textRef}
-        x={x}
-        y={y}
-        text={text}
-        fontSize={fontSize}
-        fontFamily={fontFamily}
-        fill={fill}
-        rotation={rotation}
-        draggable
-        onClick={onSelect}
-        onTap={onSelect}
-        onDragEnd={(e) => {
-          onUpdate({
-            x: e.target.x(),
-            y: e.target.y(),
-          });
-        }}
-        onTransformEnd={(e) => {
-          const node = textRef.current;
-          const scaleX = node.scaleX();
-          node.scaleX(1);
-          node.scaleY(1);
-          onUpdate({
-            x: node.x(),
-            y: node.y(),
-            fontSize: Math.max(12, node.fontSize() * scaleX),
-            rotation: node.rotation(),
-          });
-        }}
-      />
-      {isSelected && (
-        <Transformer
-          ref={trRef}
-          enabledAnchors={['top-left', 'top-right', 'bottom-left', 'bottom-right']}
-          anchorSize={8}
-          anchorCornerRadius={4}
-          borderStroke="#38bdf8"
-          anchorStroke="#38bdf8"
-          anchorFill="#ffffff"
-        />
-      )}
-    </>
-  );
-}
-
-TextElement.defaultProps = {
-  fontSize: 24,
-  fontFamily: 'DM Sans',
-  fill: '#0f172a',
-  rotation: 0,
-};
--- a/client/src/components/editor/PhotoPreEditor.jsx
+++ b/client/src/components/editor/PhotoPreEditor.jsx
@@ -1,58 +0,0 @@
-import { useState } from 'react';
-import FilerobotImageEditor from 'react-filerobot-image-editor';
-
-export function PhotoPreEditor({ imageSrc, onComplete, onClose }) {
-  const [saving, setSaving] = useState(false);
-
-  const handleComplete = (editedImageObject, designState) => {
-    setSaving(true);
-
-    // Export the edited image
-    editedImageObject.exportAsync({
-      quality: 1,
-      mimeType: 'image/png',
-    }).then((blob) => {
-      const url = URL.createObjectURL(blob);
-      setSaving(false);
-      onComplete(url);
-    }).catch((error) => {
-      console.error('Export failed:', error);
-      setSaving(false);
-      onClose();
-    });
-  };
-
-  return (
-    <div className="filerobot-overlay">
-      <div className="filerobot-container">
-        <FilerobotImageEditor
-          source={imageSrc}
-          onSave={handleComplete}
-          onClose={onClose}
-          annotationsCommon={{
-            fill: '#ff0000',
-            stroke: '#000000',
-            strokeWidth: 0,
-          }}
-          annotations={[
-            'Text',
-            'Rectangle',
-            'Ellipse',
-            'Line',
-            'Pen',
-            'Eraser',
-          ]}
-          tabs={['adjust', 'filters', 'finetune', 'annotate', 'watermark']}
-          defaultTabId="adjust"
-          theme={{
-            accentColor: '#38bdf8',
-            palettePrimary: '#38bdf8',
-          }}
-          saveButtonProps={{
-            label: saving ? 'Exporting...' : 'Use Edited Image',
-          }}
-        />
-      </div>
-    </div>
-  );
-}
--- a/client/src/components/panels/LayersPanel.jsx
+++ b/client/src/components/panels/LayersPanel.jsx
@@ -1,131 +0,0 @@
-export function LayersPanel({ elements, selectedId, onSelect, onDelete }) {
-  const getIcon = (element) => {
-    switch (element.type) {
-      case 'image':
-        return element.bgRemoved ? '🖼️' : '📷';
-      case 'text':
-        return '📝';
-      case 'sticker':
-        return '🎨';
-      default:
-        return '📁';
-    }
-  };
-
-  const getName = (element) => {
-    switch (element.type) {
-      case 'image':
-        return element.bgRemoved ? 'Image (BG ✓)' : 'Image';
-      case 'text':
-        return element.text?.substring(0, 20) || 'Text';
-      case 'sticker':
-        return 'Sticker';
-      default:
-        return 'Element';
-    }
-  };
-
-  if (elements.length === 0) {
-    return (
-      <div style={{
-        padding: '1rem',
-        textAlign: 'center',
-        color: 'var(--text-muted)',
-        fontSize: '12px',
-      }}>
-        No elements yet. Add images, text, or stickers to your design.
-      </div>
-    );
-  }
-
-  return (
-    <div>
-      <h3 style={{
-        margin: '0 0 0.75rem 0',
-        fontSize: '12px',
-        fontWeight: '600',
-        color: 'var(--text-secondary)',
-        textTransform: 'uppercase',
-      }}>
-        Layers ({elements.length})
-      </h3>
-
-      <div style={{
-        display: 'flex',
-        flexDirection: 'column',
-        gap: '4px',
-      }}>
-        {elements.map((element, index) => (
-          <div
-            key={element.id}
-            onClick={() => onSelect(element.id)}
-            style={{
-              display: 'flex',
-              alignItems: 'center',
-              gap: '0.5rem',
-              padding: '0.5rem 0.75rem',
-              background: selectedId === element.id ? 'var(--accent-bg)' : 'transparent',
-              border: `1px solid ${selectedId === element.id ? 'var(--accent)' : 'var(--border)'}`,
-              borderRadius: 'var(--radius-sm)',
-              cursor: 'pointer',
-              transition: 'all 0.15s ease',
-            }}
-            onMouseEnter={(e) => {
-              if (selectedId !== element.id) {
-                e.target.style.borderColor = 'var(--accent)';
-              }
-            }}
-            onMouseLeave={(e) => {
-              if (selectedId !== element.id) {
-                e.target.style.borderColor = 'var(--border)';
-              }
-            }}
-          >
-            <span style={{ fontSize: '14px' }}>{getIcon(element)}</span>
-            <span style={{
-              flex: 1,
-              fontSize: '12px',
-              color: selectedId === element.id ? 'var(--accent)' : 'var(--text-primary)',
-              fontWeight: selectedId === element.id ? '600' : '400',
-              overflow: 'hidden',
-              textOverflow: 'ellipsis',
-              whiteSpace: 'nowrap',
-            }}>
-              {getName(element)}
-            </span>
-            <button
-              onClick={(e) => {
-                e.stopPropagation();
-                onDelete(element.id);
-              }}
-              style={{
-                width: '24px',
-                height: '24px',
-                border: 'none',
-                borderRadius: 'var(--radius-sm)',
-                background: 'transparent',
-                cursor: 'pointer',
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                fontSize: '14px',
-                color: 'var(--text-muted)',
-                transition: 'all 0.15s ease',
-              }}
-              onMouseEnter={(e) => {
-                e.target.style.background = 'var(--error)';
-                e.target.style.color = '#fff';
-              }}
-              onMouseLeave={(e) => {
-                e.target.style.background = 'transparent';
-                e.target.style.color = 'var(--text-muted)';
-              }}
-            >
-              ×
-            </button>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}
--- a/client/src/components/panels/PropertiesPanel.jsx
+++ b/client/src/components/panels/PropertiesPanel.jsx
@@ -1,281 +0,0 @@
-export function PropertiesPanel({ element, onUpdate, onDelete }) {
-  if (!element) {
-    return (
-      <div className="properties-panel">
-        <div style={{
-          padding: '1rem',
-          borderBottom: `1px solid var(--border)`,
-        }}>
-          <h3 style={{
-            margin: 0,
-            fontSize: '14px',
-            fontWeight: '600',
-            color: 'var(--text-primary)',
-          }}>
-            Properties
-          </h3>
-        </div>
-
-        <div style={{
-          flex: 1,
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          padding: '1rem',
-          color: 'var(--text-muted)',
-          fontSize: '12px',
-          textAlign: 'center',
-        }}>
-          Select an element to edit its properties
-        </div>
-      </div>
-    );
-  }
-
-  const handlePositionChange = (axis, value) => {
-    onUpdate({ [axis]: parseFloat(value) || 0 });
-  };
-
-  const handleSizeChange = (axis, value) => {
-    const numValue = parseFloat(value) || 20;
-    onUpdate({ [axis]: Math.max(20, numValue) });
-  };
-
-  const handleRotationChange = (value) => {
-    const numValue = parseFloat(value) || 0;
-    onUpdate({ rotation: Math.max(-180, Math.min(180, numValue)) });
-  };
-
-  return (
-    <div className="properties-panel">
-      <div style={{
-        padding: '1rem',
-        borderBottom: `1px solid var(--border)`,
-      }}>
-        <h3 style={{
-          margin: 0,
-          fontSize: '14px',
-          fontWeight: '600',
-          color: 'var(--text-primary)',
-        }}>
-          Properties
-        </h3>
-      </div>
-
-      <div style={{
-        flex: 1,
-        overflow: 'auto',
-        padding: '1rem',
-      }}>
-        {/* Element type badge */}
-        <div style={{
-          display: 'inline-block',
-          padding: '4px 8px',
-          background: 'var(--accent-bg)',
-          borderRadius: 'var(--radius-sm)',
-          fontSize: '11px',
-          fontWeight: '600',
-          color: 'var(--accent)',
-          textTransform: 'uppercase',
-          marginBottom: '1rem',
-        }}>
-          {element.type}
-        </div>
-
-        {/* Position */}
-        <div style={{ marginBottom: '1rem' }}>
-          <label style={{
-            display: 'block',
-            fontSize: '11px',
-            fontWeight: '600',
-            color: 'var(--text-secondary)',
-            marginBottom: '0.5rem',
-            textTransform: 'uppercase',
-          }}>
-            Position
-          </label>
-          <div style={{ display: 'flex', gap: '0.5rem' }}>
-            <div style={{ flex: 1 }}>
-              <label style={{ fontSize: '10px', color: 'var(--text-muted)' }}>X</label>
-              <input
-                type="number"
-                value={Math.round(element.x)}
-                onChange={(e) => handlePositionChange('x', e.target.value)}
-                style={{
-                  width: '100%',
-                  padding: '0.5rem',
-                  border: `1px solid var(--border)`,
-                  borderRadius: 'var(--radius-sm)',
-                  fontSize: '13px',
-                }}
-              />
-            </div>
-            <div style={{ flex: 1 }}>
-              <label style={{ fontSize: '10px', color: 'var(--text-muted)' }}>Y</label>
-              <input
-                type="number"
-                value={Math.round(element.y)}
-                onChange={(e) => handlePositionChange('y', e.target.value)}
-                style={{
-                  width: '100%',
-                  padding: '0.5rem',
-                  border: `1px solid var(--border)`,
-                  borderRadius: 'var(--radius-sm)',
-                  fontSize: '13px',
-                }}
-              />
-            </div>
-          </div>
-        </div>
-
-        {/* Size (for images and stickers) */}
-        {(element.type === 'image' || element.type === 'sticker') && (
-          <div style={{ marginBottom: '1rem' }}>
-            <label style={{
-              display: 'block',
-              fontSize: '11px',
-              fontWeight: '600',
-              color: 'var(--text-secondary)',
-              marginBottom: '0.5rem',
-              textTransform: 'uppercase',
-            }}>
-              Size
-            </label>
-            <div style={{ display: 'flex', gap: '0.5rem' }}>
-              <div style={{ flex: 1 }}>
-                <label style={{ fontSize: '10px', color: 'var(--text-muted)' }}>W</label>
-                <input
-                  type="number"
-                  value={Math.round(element.width)}
-                  onChange={(e) => handleSizeChange('width', e.target.value)}
-                  style={{
-                    width: '100%',
-                    padding: '0.5rem',
-                    border: `1px solid var(--border)`,
-                    borderRadius: 'var(--radius-sm)',
-                    fontSize: '13px',
-                  }}
-                />
-              </div>
-              <div style={{ flex: 1 }}>
-                <label style={{ fontSize: '10px', color: 'var(--text-muted)' }}>H</label>
-                <input
-                  type="number"
-                  value={Math.round(element.height)}
-                  onChange={(e) => handleSizeChange('height', e.target.value)}
-                  style={{
-                    width: '100%',
-                    padding: '0.5rem',
-                    border: `1px solid var(--border)`,
-                    borderRadius: 'var(--radius-sm)',
-                    fontSize: '13px',
-                  }}
-                />
-              </div>
-            </div>
-          </div>
-        )}
-
-        {/* Font size (for text) */}
-        {element.type === 'text' && (
-          <>
-            <div style={{ marginBottom: '1rem' }}>
-              <label style={{
-                display: 'block',
-                fontSize: '11px',
-                fontWeight: '600',
-                color: 'var(--text-secondary)',
-                marginBottom: '0.5rem',
-                textTransform: 'uppercase',
-              }}>
-                Font Size: {Math.round(element.fontSize)}px
-              </label>
-              <input
-                type="range"
-                min="12"
-                max="120"
-                value={element.fontSize}
-                onChange={(e) => onUpdate({ fontSize: parseInt(e.target.value, 10) })}
-                style={{ width: '100%' }}
-              />
-            </div>
-
-            <div style={{ marginBottom: '1rem' }}>
-              <label style={{
-                display: 'block',
-                fontSize: '11px',
-                fontWeight: '600',
-                color: 'var(--text-secondary)',
-                marginBottom: '0.5rem',
-                textTransform: 'uppercase',
-              }}>
-                Color
-              </label>
-              <input
-                type="color"
-                value={element.fill}
-                onChange={(e) => onUpdate({ fill: e.target.value })}
-                style={{
-                  width: '100%',
-                  height: '36px',
-                  border: `1px solid var(--border)`,
-                  borderRadius: 'var(--radius-sm)',
-                  cursor: 'pointer',
-                  padding: '2px',
-                }}
-              />
-            </div>
-          </>
-        )}
-
-        {/* Rotation */}
-        <div style={{ marginBottom: '1rem' }}>
-          <label style={{
-            display: 'block',
-            fontSize: '11px',
-            fontWeight: '600',
-            color: 'var(--text-secondary)',
-            marginBottom: '0.5rem',
-            textTransform: 'uppercase',
-          }}>
-            Rotation: {Math.round(element.rotation)}°
-          </label>
-          <input
-            type="range"
-            min="-180"
-            max="180"
-            value={element.rotation}
-            onChange={(e) => handleRotationChange(e.target.value)}
-            style={{ width: '100%' }}
-          />
-        </div>
-
-        {/* Delete button */}
-        <button
-          onClick={() => onDelete(element.id)}
-          style={{
-            width: '100%',
-            padding: '0.75rem',
-            border: 'none',
-            borderRadius: 'var(--radius-md)',
-            background: 'var(--error)',
-            color: '#fff',
-            fontSize: '13px',
-            fontWeight: '600',
-            cursor: 'pointer',
-            transition: 'all 0.15s ease',
-            marginTop: '1rem',
-          }}
-          onMouseEnter={(e) => {
-            e.target.style.background = '#dc2626';
-          }}
-          onMouseLeave={(e) => {
-            e.target.style.background = 'var(--error)';
-          }}
-        >
-          Delete Element
-        </button>
-      </div>
-    </div>
-  );
-}
--- a/client/src/components/properties/PropertiesPanel.jsx
+++ b/client/src/components/properties/PropertiesPanel.jsx
@@ -1,118 +0,0 @@
-import { BackgroundRemovalButton } from '../sidebar/BackgroundRemovalButton';
-
-export function PropertiesPanel({ selectedElement, onUpdate, onDelete }) {
-  if (!selectedElement) {
-    return (
-      <div className="properties-panel">
-        <h3>Properties</h3>
-        <div className="no-selection">
-          <p>Select an element to edit its properties</p>
-        </div>
-      </div>
-    );
-  }
-
-  const handlePositionChange = (axis, value) => {
-    onUpdate(selectedElement.id, { [axis]: Number(value) });
-  };
-
-  const handleSizeChange = (dimension, value) => {
-    onUpdate(selectedElement.id, { [dimension]: Number(value) });
-  };
-
-  const handleRotationChange = (value) => {
-    onUpdate(selectedElement.id, { rotation: Number(value) });
-  };
-
-  const getIcon = () => {
-    if (selectedElement.type === 'image') return '🖼️';
-    if (selectedElement.type === 'text') return 'T';
-    if (selectedElement.type === 'sticker') return '😊';
-    return '📦';
-  };
-
-  return (
-    <div className="properties-panel">
-      <h3>Properties</h3>
-      <div className="element-header">
-        <span className="element-icon">{getIcon()}</span>
-        <span className="element-name">
-          {selectedElement.type === 'text'
-            ? selectedElement.text?.substring(0, 20) || 'Text'
-            : `${selectedElement.type}`}
-        </span>
-      </div>
-
-      <div className="property-group">
-        <label>Position</label>
-        <div className="property-row">
-          <div className="property-input">
-            <span className="property-label">X</span>
-            <input
-              type="number"
-              value={Math.round(selectedElement.x)}
-              onChange={(e) => handlePositionChange('x', e.target.value)}
-            />
-          </div>
-          <div className="property-input">
-            <span className="property-label">Y</span>
-            <input
-              type="number"
-              value={Math.round(selectedElement.y)}
-              onChange={(e) => handlePositionChange('y', e.target.value)}
-            />
-          </div>
-        </div>
-      </div>
-
-      <div className="property-group">
-        <label>Size</label>
-        <div className="property-row">
-          <div className="property-input">
-            <span className="property-label">W</span>
-            <input
-              type="number"
-              value={Math.round(selectedElement.width || selectedElement.fontSize || 0)}
-              onChange={(e) =>
-                handleSizeChange(selectedElement.text ? 'fontSize' : 'width', e.target.value)
-              }
-            />
-          </div>
-          {selectedElement.type !== 'text' && (
-            <div className="property-input">
-              <span className="property-label">H</span>
-              <input
-                type="number"
-                value={Math.round(selectedElement.height || 0)}
-                onChange={(e) => handleSizeChange('height', e.target.value)}
-              />
-            </div>
-          )}
-        </div>
-      </div>
-
-      <div className="property-group">
-        <label>Rotation: {Math.round(selectedElement.rotation || 0)}°</label>
-        <input
-          type="range"
-          min="0"
-          max="360"
-          value={selectedElement.rotation || 0}
-          onChange={(e) => handleRotationChange(e.target.value)}
-          className="rotation-slider"
-        />
-      </div>
-
-      {selectedElement.type === 'image' && (
-        <BackgroundRemovalButton
-          selectedElement={selectedElement}
-          onUpdate={onUpdate}
-        />
-      )}
-
-      <button className="delete-btn" onClick={() => onDelete(selectedElement.id)}>
-        Delete Element
-      </button>
-    </div>
-  );
-}
--- a/client/src/components/properties/index.js
+++ b/client/src/components/properties/index.js
@@ -1 +0,0 @@
-export { PropertiesPanel } from './PropertiesPanel';
--- a/client/src/components/sidebar/BackgroundRemovalButton.jsx
+++ b/client/src/components/sidebar/BackgroundRemovalButton.jsx
@@ -1,47 +0,0 @@
-import { useBackgroundRemoval } from '../../hooks/useBackgroundRemoval';
-
-export function BackgroundRemovalButton({ selectedElement, onUpdate }) {
-  const { loading, progress, hasModel, loadModel, removeBackground } = useBackgroundRemoval();
-
-  const handleRemoveBackground = async () => {
-    if (!selectedElement || selectedElement.type !== 'image') return;
-
-    if (!hasModel) {
-      const loaded = await loadModel();
-      if (!loaded) return;
-    }
-
-    const resultUrl = await removeBackground(selectedElement.src);
-    if (resultUrl) {
-      onUpdate(selectedElement.id, { src: resultUrl });
-    }
-  };
-
-  if (!selectedElement || selectedElement.type !== 'image') {
-    return null;
-  }
-
-  return (
-    <div className="bg-removal-container">
-      <button
-        className="bg-removal-btn"
-        onClick={handleRemoveBackground}
-        disabled={loading}
-      >
-        {loading ? (
-          <>
-            <div className="spinner-small" />
-            {progress > 0 ? `Loading: ${progress}%` : 'Removing Background...'}
-          </>
-        ) : (
-          <>✨ Remove Background</>
-        )}
-      </button>
-      {!hasModel && (
-        <p className="bg-removal-hint">
-          First use requires downloading ~170MB model. Subsequent uses are cached.
-        </p>
-      )}
-    </div>
-  );
-}
--- a/client/src/components/sidebar/Sidebar.jsx
+++ b/client/src/components/sidebar/Sidebar.jsx
@@ -1,73 +0,0 @@
-import { useState } from 'react';
-import { UploadTab } from './UploadTab';
-import { StickersTab } from './StickersTab';
-import { TextTab } from './TextTab';
-import { TemplatesTab } from './TemplatesTab';
-
-const TABS = [
-  { id: 'upload', label: 'Upload', icon: '📁' },
-  { id: 'stickers', label: 'Stickers', icon: '🎨' },
-  { id: 'text', label: 'Text', icon: '📝' },
-  { id: 'templates', label: 'Templates', icon: '📋' },
-];
-
-export function Sidebar({ onAddImage, onAddSticker, onAddText, onAddTemplate }) {
-  const [activeTab, setActiveTab] = useState('upload');
-
-  const renderTabContent = () => {
-    switch (activeTab) {
-      case 'upload':
-        return <UploadTab onAddImage={onAddImage} />;
-      case 'stickers':
-        return <StickersTab onAddSticker={onAddSticker} />;
-      case 'text':
-        return <TextTab onAddText={onAddText} />;
-      case 'templates':
-        return <TemplatesTab onAddTemplate={onAddTemplate} />;
-      default:
-        return null;
-    }
-  };
-
-  return (
-    <div className="sidebar">
-      {/* Tab headers */}
-      <div style={{
-        display: 'flex',
-        borderBottom: `1px solid var(--border)`,
-        background: 'var(--bg-primary)',
-      }}>
-        {TABS.map((tab) => (
-          <button
-            key={tab.id}
-            onClick={() => setActiveTab(tab.id)}
-            style={{
-              flex: 1,
-              padding: '12px 8px',
-              border: 'none',
-              background: 'transparent',
-              cursor: 'pointer',
-              fontSize: '11px',
-              fontWeight: activeTab === tab.id ? '600' : '400',
-              color: activeTab === tab.id ? 'var(--accent)' : 'var(--text-secondary)',
-              borderBottom: activeTab === tab.id ? `2px solid var(--accent)` : '2px solid transparent',
-              transition: 'all 0.15s ease',
-            }}
-          >
-            <div style={{ fontSize: '16px', marginBottom: '2px' }}>{tab.icon}</div>
-            {tab.label}
-          </button>
-        ))}
-      </div>
-
-      {/* Tab content */}
-      <div style={{
-        flex: 1,
-        overflow: 'auto',
-        padding: '1rem',
-      }}>
-        {renderTabContent()}
-      </div>
-    </div>
-  );
-}
--- a/client/src/components/sidebar/StickersTab.jsx
+++ b/client/src/components/sidebar/StickersTab.jsx
@@ -1,111 +0,0 @@
-import { useState } from 'react';
-import { STICKERS, STICKER_CATEGORIES } from '../../constants/stickers';
-
-export function StickersTab({ onAddSticker }) {
-  const [activeCategory, setActiveCategory] = useState('all');
-
-  const categories = ['all', ...STICKER_CATEGORIES];
-
-  const filteredStickers = activeCategory === 'all'
-    ? STICKERS
-    : STICKERS.filter(s => s.category === activeCategory);
-
-  const handleAddSticker = (emoji) => {
-    // Create a canvas element with the emoji
-    const canvas = document.createElement('canvas');
-    const size = 100;
-    canvas.width = size;
-    canvas.height = size;
-    const ctx = canvas.getContext('2d');
-
-    ctx.font = `${size * 0.8}px Arial`;
-    ctx.textAlign = 'center';
-    ctx.textBaseline = 'middle';
-    ctx.fillText(emoji, size / 2, size / 2);
-
-    const dataUrl = canvas.toDataURL('image/png');
-
-    onAddSticker({
-      type: 'sticker',
-      x: 125,
-      y: 125,
-      width: 80,
-      height: 80,
-      rotation: 0,
-      src: dataUrl,
-      emoji,
-    });
-  };
-
-  return (
-    <div>
-      <h3 style={{ margin: '0 0 1rem 0', fontSize: '14px', color: 'var(--text-primary)' }}>
-        Stickers
-      </h3>
-
-      {/* Category pills */}
-      <div style={{
-        display: 'flex',
-        gap: '6px',
-        marginBottom: '1rem',
-        flexWrap: 'wrap',
-      }}>
-        {categories.map((cat) => (
-          <button
-            key={cat}
-            onClick={() => setActiveCategory(cat)}
-            style={{
-              padding: '6px 12px',
-              border: `1px solid ${activeCategory === cat ? 'var(--accent)' : 'var(--border)'}`,
-              borderRadius: 'var(--radius-xl)',
-              background: activeCategory === cat ? 'var(--accent)' : 'var(--bg-primary)',
-              color: activeCategory === cat ? '#fff' : 'var(--text-secondary)',
-              fontSize: '11px',
-              cursor: 'pointer',
-              textTransform: 'capitalize',
-              transition: 'all 0.15s ease',
-            }}
-          >
-            {cat}
-          </button>
-        ))}
-      </div>
-
-      {/* Sticker grid */}
-      <div style={{
-        display: 'grid',
-        gridTemplateColumns: 'repeat(5, 1fr)',
-        gap: '8px',
-      }}>
-        {filteredStickers.map((sticker, index) => (
-          <button
-            key={index}
-            onClick={() => handleAddSticker(sticker.emoji)}
-            style={{
-              aspectRatio: '1',
-              border: 'none',
-              borderRadius: 'var(--radius-md)',
-              background: 'var(--bg-primary)',
-              fontSize: '28px',
-              cursor: 'pointer',
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              transition: 'all 0.15s ease',
-            }}
-            onMouseEnter={(e) => {
-              e.target.style.background = 'var(--accent-bg)';
-              e.target.style.transform = 'scale(1.1)';
-            }}
-            onMouseLeave={(e) => {
-              e.target.style.background = 'var(--bg-primary)';
-              e.target.style.transform = 'scale(1)';
-            }}
-          >
-            {sticker.emoji}
-          </button>
-        ))}
-      </div>
-    </div>
-  );
-}
--- a/client/src/components/sidebar/TemplatesTab.jsx
+++ b/client/src/components/sidebar/TemplatesTab.jsx
@@ -1,133 +0,0 @@
-export function TemplatesTab({ onAddTemplate }) {
-  const templates = [
-    {
-      id: 'freeform',
-      name: 'Freeform',
-      description: 'No template - design freely',
-      thumbnail: '🎨',
-    },
-    // Placeholder for future templates
-    {
-      id: 'classic-tee-front',
-      name: 'Classic Tee - Front',
-      description: 'Standard front chest print',
-      thumbnail: '👕',
-      disabled: true,
-    },
-    {
-      id: 'classic-tee-back',
-      name: 'Classic Tee - Back',
-      description: 'Full back print',
-      thumbnail: '👕',
-      disabled: true,
-    },
-    {
-      id: 'all-over',
-      name: 'All-Over Print',
-      description: 'Full front coverage',
-      thumbnail: '🎯',
-      disabled: true,
-    },
-  ];
-
-  const handleSelectTemplate = (template) => {
-    if (template.disabled) {
-      alert('This template will be available in a future update');
-      return;
-    }
-    onAddTemplate(template.id);
-  };
-
-  return (
-    <div>
-      <h3 style={{ margin: '0 0 1rem 0', fontSize: '14px', color: 'var(--text-primary)' }}>
-        Templates
-      </h3>
-
-      <div style={{
-        fontSize: '11px',
-        color: 'var(--text-muted)',
-        marginBottom: '1rem',
-        lineHeight: '1.4',
-      }}>
-        Choose a template to constrain your design to specific print zones. Templates will be available in a future update.
-      </div>
-
-      <div style={{
-        display: 'flex',
-        flexDirection: 'column',
-        gap: '0.75rem',
-      }}>
-        {templates.map((template) => (
-          <button
-            key={template.id}
-            onClick={() => handleSelectTemplate(template)}
-            disabled={template.disabled}
-            style={{
-              display: 'flex',
-              alignItems: 'center',
-              gap: '0.75rem',
-              padding: '0.75rem',
-              border: `1px solid ${template.disabled ? 'var(--border)' : 'var(--border)'}`,
-              borderRadius: 'var(--radius-md)',
-              background: template.disabled ? 'var(--bg-tertiary)' : 'var(--bg-primary)',
-              cursor: template.disabled ? 'not-allowed' : 'pointer',
-              opacity: template.disabled ? 0.6 : 1,
-              textAlign: 'left',
-              transition: 'all 0.15s ease',
-            }}
-            onMouseEnter={(e) => {
-              if (!template.disabled) {
-                e.target.style.borderColor = 'var(--accent)';
-              }
-            }}
-            onMouseLeave={(e) => {
-              if (!template.disabled) {
-                e.target.style.borderColor = 'var(--border)';
-              }
-            }}
-          >
-            <div style={{
-              width: '48px',
-              height: '48px',
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              background: 'var(--bg-tertiary)',
-              borderRadius: 'var(--radius-sm)',
-              fontSize: '24px',
-            }}>
-              {template.thumbnail}
-            </div>
-            <div style={{ flex: 1 }}>
-              <div style={{
-                fontSize: '13px',
-                fontWeight: '600',
-                color: 'var(--text-primary)',
-              }}>
-                {template.name}
-              </div>
-              <div style={{
-                fontSize: '11px',
-                color: 'var(--text-muted)',
-              }}>
-                {template.description}
-              </div>
-            </div>
-            {template.disabled && (
-              <span style={{
-                fontSize: '10px',
-                padding: '2px 6px',
-                background: 'var(--bg-tertiary)',
-                borderRadius: 'var(--radius-sm)',
-                color: 'var(--text-muted)',
-              }}>
-                Soon
-              </span>
-            )}
-          </button>
-        ))}
-      </div>
-    </div>
-  );
-}
--- a/client/src/components/sidebar/TextTab.jsx
+++ b/client/src/components/sidebar/TextTab.jsx
@@ -1,199 +0,0 @@
-import { useState } from 'react';
-import { FONTS } from '../../constants/fonts';
-
-export function TextTab({ onAddText }) {
-  const [text, setText] = useState('Your text here');
-  const [fontFamily, setFontFamily] = useState('Roboto');
-  const [fontSize, setFontSize] = useState(48);
-  const [fill, setFill] = useState('#0f172a');
-
-  const handleAddText = () => {
-    onAddText({
-      type: 'text',
-      x: 150,
-      y: 150,
-      text,
-      fontFamily,
-      fontSize,
-      fill,
-      rotation: 0,
-    });
-  };
-
-  return (
-    <div>
-      <h3 style={{ margin: '0 0 1rem 0', fontSize: '14px', color: 'var(--text-primary)' }}>
-        Add Text
-      </h3>
-
-      {/* Text input */}
-      <div style={{ marginBottom: '1rem' }}>
-        <label style={{
-          display: 'block',
-          fontSize: '11px',
-          fontWeight: '600',
-          color: 'var(--text-secondary)',
-          marginBottom: '0.5rem',
-          textTransform: 'uppercase',
-        }}>
-          Text Content
-        </label>
-        <textarea
-          value={text}
-          onChange={(e) => setText(e.target.value)}
-          rows={3}
-          style={{
-            width: '100%',
-            padding: '0.75rem',
-            border: `1px solid var(--border)`,
-            borderRadius: 'var(--radius-md)',
-            fontSize: '14px',
-            fontFamily: 'var(--font-body)',
-            resize: 'vertical',
-          }}
-        />
-      </div>
-
-      {/* Font selector */}
-      <div style={{ marginBottom: '1rem' }}>
-        <label style={{
-          display: 'block',
-          fontSize: '11px',
-          fontWeight: '600',
-          color: 'var(--text-secondary)',
-          marginBottom: '0.5rem',
-          textTransform: 'uppercase',
-        }}>
-          Font
-        </label>
-        <select
-          value={fontFamily}
-          onChange={(e) => setFontFamily(e.target.value)}
-          style={{
-            width: '100%',
-            padding: '0.75rem',
-            border: `1px solid var(--border)`,
-            borderRadius: 'var(--radius-md)',
-            fontSize: '13px',
-            fontFamily,
-            cursor: 'pointer',
-            background: 'var(--bg-primary)',
-          }}
-        >
-          {FONTS.map((font) => (
-            <option key={font.family} value={font.family}>
-              {font.name}
-            </option>
-          ))}
-        </select>
-      </div>
-
-      {/* Font size */}
-      <div style={{ marginBottom: '1rem' }}>
-        <label style={{
-          display: 'block',
-          fontSize: '11px',
-          fontWeight: '600',
-          color: 'var(--text-secondary)',
-          marginBottom: '0.5rem',
-          textTransform: 'uppercase',
-        }}>
-          Font Size: {fontSize}px
-        </label>
-        <input
-          type="range"
-          min="12"
-          max="120"
-          value={fontSize}
-          onChange={(e) => setFontSize(parseInt(e.target.value, 10))}
-          style={{ width: '100%' }}
-        />
-      </div>
-
-      {/* Color picker */}
-      <div style={{ marginBottom: '1rem' }}>
-        <label style={{
-          display: 'block',
-          fontSize: '11px',
-          fontWeight: '600',
-          color: 'var(--text-secondary)',
-          marginBottom: '0.5rem',
-          textTransform: 'uppercase',
-        }}>
-          Color
-        </label>
-        <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
-          <input
-            type="color"
-            value={fill}
-            onChange={(e) => setFill(e.target.value)}
-            style={{
-              width: '40px',
-              height: '40px',
-              border: `1px solid var(--border)`,
-              borderRadius: 'var(--radius-sm)',
-              cursor: 'pointer',
-              padding: '2px',
-            }}
-          />
-          <input
-            type="text"
-            value={fill}
-            onChange={(e) => setFill(e.target.value)}
-            style={{
-              flex: 1,
-              padding: '0.75rem',
-              border: `1px solid var(--border)`,
-              borderRadius: 'var(--radius-md)',
-              fontSize: '13px',
-              fontFamily: 'var(--font-mono)',
-            }}
-          />
-        </div>
-      </div>
-
-      {/* Preview */}
-      <div style={{
-        padding: '1rem',
-        background: 'var(--bg-primary)',
-        borderRadius: 'var(--radius-md)',
-        marginBottom: '1rem',
-        textAlign: 'center',
-      }}>
-        <div style={{
-          fontFamily,
-          fontSize: `${fontSize * 0.5}px`,
-          color: fill,
-          wordBreak: 'break-word',
-        }}>
-          {text}
-        </div>
-      </div>
-
-      {/* Add Text button */}
-      <button
-        onClick={handleAddText}
-        style={{
-          width: '100%',
-          padding: '0.875rem',
-          border: 'none',
-          borderRadius: 'var(--radius-md)',
-          background: 'var(--accent)',
-          color: '#fff',
-          fontSize: '14px',
-          fontWeight: '600',
-          cursor: 'pointer',
-          transition: 'all 0.15s ease',
-        }}
-        onMouseEnter={(e) => {
-          e.target.style.background = 'var(--accent-hover)';
-        }}
-        onMouseLeave={(e) => {
-          e.target.style.background = 'var(--accent)';
-        }}
-      >
-        Add Text to Canvas
-      </button>
-    </div>
-  );
-}
--- a/client/src/components/sidebar/UploadTab.jsx
+++ b/client/src/components/sidebar/UploadTab.jsx
@@ -1,150 +0,0 @@
-import { useRef, useState } from 'react';
-
-export function UploadTab({ onAddImage }) {
-  const fileInputRef = useRef(null);
-  const [isDragging, setIsDragging] = useState(false);
-  const [isUploading, setIsUploading] = useState(false);
-
-  const handleFiles = async (files) => {
-    const file = files[0];
-    if (!file) return;
-
-    // Validate file type
-    const validTypes = ['image/jpeg', 'image/png', 'image/webp'];
-    if (!validTypes.includes(file.type)) {
-      alert('Please upload a JPEG, PNG, or WebP image');
-      return;
-    }
-
-    // Validate file size (20MB)
-    if (file.size > 20 * 1024 * 1024) {
-      alert('File size must be under 20MB');
-      return;
-    }
-
-    setIsUploading(true);
-
-    try {
-      const formData = new FormData();
-      formData.append('image', file);
-
-      const response = await fetch('/api/upload', {
-        method: 'POST',
-        body: formData,
-      });
-
-      if (!response.ok) {
-        throw new Error('Upload failed');
-      }
-
-      const data = await response.json();
-
-      // Add the uploaded image to canvas (use preview for canvas)
-      onAddImage({
-        type: 'image',
-        x: 75,
-        y: 75,
-        width: 150,
-        height: 150,
-        rotation: 0,
-        src: data.preview.url,
-        originalUrl: data.original.url,
-      });
-    } catch (error) {
-      console.error('Upload error:', error);
-      alert('Failed to upload image. Please try again.');
-    } finally {
-      setIsUploading(false);
-    }
-  };
-
-  const handleDragOver = (e) => {
-    e.preventDefault();
-    setIsDragging(true);
-  };
-
-  const handleDragLeave = (e) => {
-    e.preventDefault();
-    setIsDragging(false);
-  };
-
-  const handleDrop = (e) => {
-    e.preventDefault();
-    setIsDragging(false);
-    handleFiles(e.dataTransfer.files);
-  };
-
-  const handleClick = () => {
-    fileInputRef.current?.click();
-  };
-
-  const handleFileChange = (e) => {
-    handleFiles(e.target.files);
-  };
-
-  return (
-    <div>
-      <h3 style={{ margin: '0 0 1rem 0', fontSize: '14px', color: 'var(--text-primary)' }}>
-        Upload Image
-      </h3>
-
-      <div
-        onClick={handleClick}
-        onDragOver={handleDragOver}
-        onDragLeave={handleDragLeave}
-        onDrop={handleDrop}
-        style={{
-          border: `2px dashed ${isDragging ? 'var(--accent)' : 'var(--border)'}`,
-          borderRadius: 'var(--radius-md)',
-          padding: '2rem 1rem',
-          textAlign: 'center',
-          cursor: 'pointer',
-          background: isDragging ? 'var(--accent-bg)' : 'var(--bg-primary)',
-          transition: 'all 0.15s ease',
-          marginBottom: '1rem',
-        }}
-      >
-        <div style={{ fontSize: '32px', marginBottom: '0.5rem' }}>📁</div>
-        <div style={{ fontSize: '13px', color: 'var(--text-secondary)', marginBottom: '0.25rem' }}>
-          Click to upload or drag and drop
-        </div>
-        <div style={{ fontSize: '11px', color: 'var(--text-muted)' }}>
-          JPEG, PNG, WebP (max 20MB)
-        </div>
-      </div>
-
-      <input
-        ref={fileInputRef}
-        type="file"
-        accept="image/jpeg,image/png,image/webp"
-        onChange={handleFileChange}
-        style={{ display: 'none' }}
-      />
-
-      {isUploading && (
-        <div style={{
-          padding: '0.75rem',
-          background: 'var(--accent-bg)',
-          borderRadius: 'var(--radius-sm)',
-          fontSize: '12px',
-          color: 'var(--accent)',
-          textAlign: 'center',
-        }}>
-          Uploading...
-        </div>
-      )}
-
-      <div style={{
-        marginTop: '1rem',
-        padding: '0.75rem',
-        background: 'var(--bg-primary)',
-        borderRadius: 'var(--radius-sm)',
-        fontSize: '11px',
-        color: 'var(--text-muted)',
-        lineHeight: '1.4',
-      }}>
-        <strong>Tip:</strong> After uploading, you can remove the background from your image using the background removal tool.
-      </div>
-    </div>
-  );
-}
--- a/client/src/hooks/index.js
+++ b/client/src/hooks/index.js
@@ -1 +0,0 @@
-export { useDesignEditor } from './useDesignEditor';
--- a/client/src/hooks/useBackgroundRemoval.js
+++ b/client/src/hooks/useBackgroundRemoval.js
@@ -1,120 +0,0 @@
-import { useState, useCallback } from 'react';
-import { env, AutoModel, AutoProcessor, RawImage } from '@xenova/transformers';
-
-// Use local models only
-env.allowLocalModels = true;
-env.useBrowserCache = true;
-
-export function useBackgroundRemoval() {
-  const [loading, setLoading] = useState(false);
-  const [progress, setProgress] = useState(0);
-  const [model, setModel] = useState(null);
-  const [processor, setProcessor] = useState(null);
-
-  const loadModel = useCallback(async () => {
-    if (model && processor) return true;
-
-    setLoading(true);
-    setProgress(0);
-
-    try {
-      const loadedModel = await AutoModel.from_pretrained('Xenova/rmbg-1.4', {
-        progress_callback: (data) => {
-          if (data.status === 'progress') {
-            setProgress(Math.round(data.progress));
-          }
-        },
-        local_model_path: '/models/rmbg-1.4',
-      });
-
-      const loadedProcessor = await AutoProcessor.from_pretrained('Xenova/rmbg-1.4', {
-        local_model_path: '/models/rmbg-1.4',
-      });
-
-      setModel(loadedModel);
-      setProcessor(loadedProcessor);
-      setLoading(false);
-      return true;
-    } catch (error) {
-      console.error('Failed to load background removal model:', error);
-      setLoading(false);
-      return false;
-    }
-  }, [model, processor]);
-
-  const removeBackground = useCallback(async (imageSrc) => {
-    if (!model || !processor) {
-      const loaded = await loadModel();
-      if (!loaded) return null;
-    }
-
-    setLoading(true);
-
-    try {
-      // Load the image
-      const img = new Image();
-      img.crossOrigin = 'anonymous';
-      img.src = imageSrc;
-      await new Promise((resolve, reject) => {
-        img.onload = resolve;
-        img.onerror = reject;
-      });
-
-      // Process image through the model
-      const inputs = await processor(img);
-      const { pixel_values } = inputs;
-
-      // Run inference
-      const { output } = await model({ pixel_values });
-
-      // Get the mask
-      const maskData = await RawImage.fromTensor(output[0].mul(255).to('uint8')).resize(
-        img.width,
-        img.height
-      );
-
-      // Create canvas to apply mask
-      const canvas = document.createElement('canvas');
-      canvas.width = img.width;
-      canvas.height = img.height;
-      const ctx = canvas.getContext('2d');
-
-      // Draw original image
-      ctx.drawImage(img, 0, 0);
-
-      // Get image data
-      const imageData = ctx.getImageData(0, 0, img.width, img.height);
-      const data = imageData.data;
-      const maskPixels = maskData.data;
-
-      // Apply alpha mask
-      for (let i = 0; i < maskPixels.length; i++) {
-        const alpha = maskPixels[i];
-        data[i * 4 + 3] = alpha; // Set alpha channel
-      }
-
-      ctx.putImageData(imageData, 0, 0);
-
-      // Convert to blob URL
-      const blob = await new Promise((resolve) => {
-        canvas.toBlob(resolve, 'image/png');
-      });
-
-      const url = URL.createObjectURL(blob);
-      setLoading(false);
-      return url;
-    } catch (error) {
-      console.error('Background removal failed:', error);
-      setLoading(false);
-      return null;
-    }
-  }, [model, processor, loadModel]);
-
-  return {
-    loading,
-    progress,
-    hasModel: !!model,
-    loadModel,
-    removeBackground,
-  };
-}
--- a/client/src/hooks/useDesignEditor.js
+++ b/client/src/hooks/useDesignEditor.js
@@ -1,130 +0,0 @@
-import { useState, useCallback, useRef } from 'react';
-
-const MAX_HISTORY = 50;
-
-export function useDesignEditor() {
-  const [elements, setElements] = useState([]);
-  const [selectedId, setSelectedId] = useState(null);
-
-  // History for undo/redo
-  const historyRef = useRef([]);
-  const historyIndexRef = useRef(-1);
-
-  const saveToHistory = useCallback((newElements) => {
-    // Remove any future history if we're in the middle of the stack
-    if (historyIndexRef.current < historyRef.current.length - 1) {
-      historyRef.current = historyRef.current.slice(0, historyIndexRef.current + 1);
-    }
-
-    // Add new state to history
-    historyRef.current.push(JSON.stringify(newElements));
-
-    // Limit history size
-    if (historyRef.current.length > MAX_HISTORY) {
-      historyRef.current.shift();
-    } else {
-      historyIndexRef.current++;
-    }
-  }, []);
-
-  const canUndo = historyIndexRef.current > 0;
-  const canRedo = historyIndexRef.current < historyRef.current.length - 1;
-
-  const addElement = useCallback((element) => {
-    const newElement = {
-      ...element,
-      id: `element-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
-    };
-
-    setElements((prev) => {
-      const newElements = [...prev, newElement];
-      saveToHistory(newElements);
-      return newElements;
-    });
-
-    setSelectedId(newElement.id);
-    return newElement.id;
-  }, [saveToHistory]);
-
-  const updateElement = useCallback((id, attrs) => {
-    setElements((prev) => {
-      const newElements = prev.map((el) => (el.id === id ? { ...el, ...attrs } : el));
-      saveToHistory(newElements);
-      return newElements;
-    });
-  }, [saveToHistory]);
-
-  const deleteElement = useCallback((id) => {
-    setElements((prev) => {
-      const newElements = prev.filter((el) => el.id !== id);
-      saveToHistory(newElements);
-      return newElements;
-    });
-
-    if (selectedId === id) {
-      setSelectedId(null);
-    }
-  }, [selectedId, saveToHistory]);
-
-  const selectElement = useCallback((id) => {
-    setSelectedId(id);
-  }, []);
-
-  const deselectAll = useCallback(() => {
-    setSelectedId(null);
-  }, []);
-
-  const reorderElement = useCallback((id, newOrder) => {
-    setElements((prev) => {
-      const index = prev.findIndex((el) => el.id === id);
-      if (index === -1 || index === newOrder) return prev;
-
-      const newElements = [...prev];
-      const [removed] = newElements.splice(index, 1);
-      newElements.splice(newOrder, 0, removed);
-
-      saveToHistory(newElements);
-      return newElements;
-    });
-  }, [saveToHistory]);
-
-  const undo = useCallback(() => {
-    if (historyIndexRef.current > 0) {
-      historyIndexRef.current--;
-      const prevState = JSON.parse(historyRef.current[historyIndexRef.current]);
-      setElements(prevState);
-      setSelectedId(null);
-    }
-  }, []);
-
-  const redo = useCallback(() => {
-    if (historyIndexRef.current < historyRef.current.length - 1) {
-      historyIndexRef.current++;
-      const nextState = JSON.parse(historyRef.current[historyIndexRef.current]);
-      setElements(nextState);
-      setSelectedId(null);
-    }
-  }, []);
-
-  // Initialize history with empty state
-  const initializeHistory = useCallback(() => {
-    historyRef.current = [JSON.stringify([])];
-    historyIndexRef.current = 0;
-  }, []);
-
-  return {
-    elements,
-    selectedId,
-    addElement,
-    updateElement,
-    deleteElement,
-    selectElement,
-    deselectAll,
-    reorderElement,
-    undo,
-    redo,
-    canUndo,
-    canRedo,
-    initializeHistory,
-  };
-}
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -1,733 +0,0 @@
-:root {
-  /* Colors */
-  --accent: #38bdf8;
-  --accent-hover: #0ea5e9;
-  --accent-bg: rgba(56, 189, 248, 0.1);
-
-  /* Neutrals */
-  --bg-primary: #ffffff;
-  --bg-secondary: #f8fafc;
-  --bg-tertiary: #f1f5f9;
-  --border: #e2e8f0;
-  --border-focus: #38bdf8;
-  --text-primary: #0f172a;
-  --text-secondary: #475569;
-  --text-muted: #94a3b8;
-
-  /* Status colors */
-  --success: #22c55e;
-  --warning: #f59e0b;
-  --error: #ef4444;
-
-  /* Border radii */
-  --radius-sm: 4px;
-  --radius-md: 8px;
-  --radius-lg: 12px;
-  --radius-xl: 16px;
-
-  /* Shadows */
-  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
-  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-
-  /* Typography */
-  --font-body: 'DM Sans', system-ui, -apple-system, sans-serif;
-  --font-mono: 'Space Mono', ui-monospace, Consolas, monospace;
-
-  font-family: var(--font-body);
-  line-height: 1.5;
-  font-weight: 400;
-  color: var(--text-primary);
-  background-color: var(--bg-primary);
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-* {
-  box-sizing: border-box;
-}
-
-body {
-  margin: 0;
-  min-height: 100vh;
-}
-
-#root {
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-}
-
-/* Three-column layout */
-.editor-layout {
-  display: flex;
-  flex: 1;
-  overflow: hidden;
-}
-
-.sidebar {
-  width: 320px;
-  background: var(--bg-secondary);
-  border-right: 1px solid var(--border);
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-
-.canvas-area {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  background: var(--bg-tertiary);
-  overflow: auto;
-  padding: 2rem;
-}
-
-.properties-panel {
-  width: 280px;
-  background: var(--bg-secondary);
-  border-left: 1px solid var(--border);
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-
-button {
-  font-family: inherit;
-  cursor: pointer;
-  outline: none;
-}
-
-button:focus-visible {
-  box-shadow: 0 0 0 2px var(--bg-primary), 0 0 0 4px var(--accent);
-}
-
-input, textarea, select {
-  font-family: inherit;
-}
-
-/* App Layout - Three Column */
-.app-layout {
-  display: flex;
-  min-height: 100vh;
-  background: var(--bg-secondary);
-}
-
-.sidebar-container {
-  width: 280px;
-  background: var(--bg-primary);
-  border-right: 1px solid var(--border);
-  flex-shrink: 0;
-  overflow-y: auto;
-}
-
-.canvas-container {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 2rem;
-  overflow-y: auto;
-}
-
-.properties-container {
-  width: 260px;
-  background: var(--bg-primary);
-  border-left: 1px solid var(--border);
-  flex-shrink: 0;
-  overflow-y: auto;
-}
-
-.app-title {
-  font-size: 1.5rem;
-  font-weight: 600;
-  margin: 0 0 0.25rem 0;
-  color: var(--text-primary);
-}
-
-.app-subtitle {
-  color: var(--text-secondary);
-  margin: 0;
-  font-size: 0.875rem;
-}
-
-.canvas-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  margin-bottom: 1rem;
-  width: 100%;
-  max-width: 400px;
-}
-
-.undo-redo-buttons {
-  display: flex;
-  gap: 0.5rem;
-}
-
-.icon-btn {
-  padding: 0.5rem 0.75rem;
-  background: var(--bg-primary);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-  font-size: 0.75rem;
-  cursor: pointer;
-  transition: all 0.2s;
-  color: var(--text-secondary);
-}
-
-.icon-btn:hover:not(:disabled) {
-  background: var(--accent);
-  border-color: var(--accent);
-  color: white;
-}
-
-.icon-btn.disabled {
-  opacity: 0.4;
-  cursor: not-allowed;
-}
-
-.icon-btn:disabled {
-  opacity: 0.4;
-  cursor: not-allowed;
-}
-
-.canvas-wrapper {
-  margin-bottom: 1rem;
-}
-
-.debug-info {
-  padding: 1rem;
-  background: var(--bg-tertiary);
-  border-radius: var(--radius-md);
-  font-size: 0.875rem;
-  text-align: center;
-}
-
-.debug-info p {
-  margin: 0.25rem 0;
-}
-
-.debug-info .tip {
-  color: var(--text-muted);
-  font-size: 12px;
-}
-
-/* Sidebar */
-.sidebar {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
-
-.sidebar-tabs {
-  display: flex;
-  border-bottom: 1px solid var(--border);
-  background: var(--bg-tertiary);
-}
-
-.sidebar-tab {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 0.75rem 0.5rem;
-  background: transparent;
-  border: none;
-  border-bottom: 2px solid transparent;
-  cursor: pointer;
-  transition: all 0.2s;
-  font-size: 0.75rem;
-  color: var(--text-secondary);
-}
-
-.sidebar-tab:hover {
-  background: var(--bg-primary);
-}
-
-.sidebar-tab.active {
-  border-bottom-color: var(--accent);
-  color: var(--text-primary);
-}
-
-.tab-icon {
-  font-size: 1.25rem;
-  margin-bottom: 0.25rem;
-}
-
-.tab-label {
-  font-size: 0.625rem;
-}
-
-.sidebar-content {
-  padding: 1rem;
-  flex: 1;
-}
-
-/* Upload Tab */
-.upload-tab h3 {
-  font-size: 0.875rem;
-  margin: 0 0 1rem 0;
-  color: var(--text-primary);
-}
-
-.upload-zone {
-  border: 2px dashed var(--border);
-  border-radius: var(--radius-md);
-  padding: 2rem 1rem;
-  text-align: center;
-  cursor: pointer;
-  transition: all 0.2s;
-  background: var(--bg-secondary);
-}
-
-.upload-zone:hover {
-  border-color: var(--accent);
-  background: var(--accent-bg);
-}
-
-.upload-zone.dragging {
-  border-color: var(--accent);
-  background: var(--accent-bg);
-}
-
-.upload-zone.uploading {
-  opacity: 0.7;
-  pointer-events: none;
-}
-
-.upload-icon {
-  font-size: 2.5rem;
-  margin-bottom: 0.5rem;
-}
-
-.upload-zone p {
-  margin: 0.25rem 0;
-  font-size: 0.875rem;
-  color: var(--text-secondary);
-}
-
-.upload-hint {
-  font-size: 0.75rem !important;
-  color: var(--text-muted) !important;
-}
-
-.uploading-state {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.spinner {
-  width: 24px;
-  height: 24px;
-  border: 2px solid var(--border);
-  border-top-color: var(--accent);
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-  to { transform: rotate(360deg); }
-}
-
-/* Stickers Tab */
-.stickers-tab h3 {
-  font-size: 0.875rem;
-  margin: 0 0 1rem 0;
-}
-
-.category-pills {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.5rem;
-  margin-bottom: 1rem;
-}
-
-.category-pill {
-  padding: 0.25rem 0.75rem;
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-  background: var(--bg-secondary);
-  font-size: 0.75rem;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.category-pill:hover {
-  border-color: var(--accent);
-}
-
-.category-pill.active {
-  background: var(--accent);
-  border-color: var(--accent);
-  color: white;
-}
-
-.sticker-grid {
-  display: grid;
-  grid-template-columns: repeat(6, 1fr);
-  gap: 0.5rem;
-  max-height: 400px;
-  overflow-y: auto;
-}
-
-.sticker-button {
-  font-size: 1.5rem;
-  padding: 0.5rem;
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-  background: var(--bg-primary);
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.sticker-button:hover {
-  transform: scale(1.1);
-  border-color: var(--accent);
-}
-
-/* Text Tab */
-.text-tab h3 {
-  font-size: 0.875rem;
-  margin: 0 0 1rem 0;
-}
-
-.text-input-group {
-  margin-bottom: 1rem;
-}
-
-.text-input-group label {
-  display: block;
-  font-size: 0.75rem;
-  color: var(--text-secondary);
-  margin-bottom: 0.25rem;
-}
-
-.text-input,
-.font-select {
-  width: 100%;
-  padding: 0.5rem;
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-  font-size: 0.875rem;
-}
-
-.text-input:focus,
-.font-select:focus {
-  outline: none;
-  border-color: var(--accent);
-}
-
-.size-slider {
-  width: 100%;
-}
-
-.color-picker-row {
-  display: flex;
-  gap: 0.5rem;
-}
-
-.color-picker {
-  width: 40px;
-  height: 36px;
-  padding: 0;
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-  cursor: pointer;
-}
-
-.color-input {
-  flex: 1;
-  padding: 0.5rem;
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-}
-
-.add-text-btn {
-  width: 100%;
-  padding: 0.75rem;
-  background: var(--accent);
-  color: white;
-  border: none;
-  border-radius: var(--radius-md);
-  font-weight: 500;
-  cursor: pointer;
-  transition: background 0.2s;
-}
-
-.add-text-btn:hover {
-  background: var(--accent-hover);
-}
-
-.text-preview {
-  margin-top: 1rem;
-  padding: 1rem;
-  background: var(--bg-secondary);
-  border-radius: var(--radius-md);
-  text-align: center;
-}
-
-/* Templates Tab */
-.templates-tab h3 {
-  font-size: 0.875rem;
-  margin: 0 0 1rem 0;
-}
-
-.templates-grid {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 0.75rem;
-  max-height: 400px;
-  overflow-y: auto;
-}
-
-.template-card {
-  display: flex;
-  flex-direction: column;
-  padding: 0.75rem;
-  border: 1px solid var(--border);
-  border-radius: var(--radius-md);
-  background: var(--bg-primary);
-  cursor: pointer;
-  transition: all 0.2s;
-  text-align: left;
-}
-
-.template-card:hover {
-  border-color: var(--accent);
-  transform: translateY(-2px);
-  box-shadow: var(--shadow-md);
-}
-
-.template-preview {
-  height: 60px;
-  background: var(--bg-tertiary);
-  border-radius: var(--radius-sm);
-  margin-bottom: 0.5rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.25rem;
-  flex-wrap: wrap;
-  padding: 0.25rem;
-}
-
-.template-preview-element {
-  font-weight: 500;
-}
-
-.template-info {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-}
-
-.template-name {
-  font-size: 0.75rem;
-  font-weight: 500;
-  color: var(--text-primary);
-}
-
-.template-category {
-  font-size: 0.625rem;
-  color: var(--text-muted);
-}
-
-/* Properties Panel */
-.properties-panel {
-  padding: 1rem;
-}
-
-.properties-panel h3 {
-  font-size: 0.875rem;
-  margin: 0 0 1rem 0;
-  color: var(--text-primary);
-}
-
-.no-selection {
-  padding: 2rem 1rem;
-  text-align: center;
-  color: var(--text-muted);
-  font-size: 0.875rem;
-}
-
-.element-header {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.75rem;
-  background: var(--bg-tertiary);
-  border-radius: var(--radius-md);
-  margin-bottom: 1rem;
-}
-
-.element-icon {
-  font-size: 1.25rem;
-}
-
-.element-name {
-  font-weight: 500;
-  font-size: 0.875rem;
-}
-
-.property-group {
-  margin-bottom: 1rem;
-}
-
-.property-group label {
-  display: block;
-  font-size: 0.75rem;
-  color: var(--text-secondary);
-  margin-bottom: 0.5rem;
-}
-
-.property-row {
-  display: flex;
-  gap: 0.5rem;
-}
-
-.property-input {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.property-label {
-  font-size: 0.75rem;
-  color: var(--text-muted);
-  min-width: 12px;
-}
-
-.property-input input {
-  flex: 1;
-  padding: 0.5rem;
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-  font-size: 0.875rem;
-  text-align: center;
-}
-
-.property-input input:focus {
-  outline: none;
-  border-color: var(--accent);
-}
-
-.rotation-slider {
-  width: 100%;
-}
-
-.delete-btn {
-  width: 100%;
-  padding: 0.75rem;
-  background: transparent;
-  color: var(--error);
-  border: 1px solid var(--error);
-  border-radius: var(--radius-md);
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.delete-btn:hover {
-  background: var(--error);
-  color: white;
-}
-
-.bg-removal-container {
-  margin-top: 1rem;
-  padding-top: 1rem;
-  border-top: 1px solid var(--border);
-}
-
-.bg-removal-btn {
-  width: 100%;
-  padding: 0.75rem;
-  background: linear-gradient(135deg, #8b5cf6, #ec4899);
-  color: white;
-  border: none;
-  border-radius: var(--radius-md);
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.2s;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-}
-
-.bg-removal-btn:hover:not(:disabled) {
-  transform: translateY(-1px);
-  box-shadow: var(--shadow-md);
-}
-
-.bg-removal-btn:disabled {
-  opacity: 0.7;
-  cursor: not-allowed;
-}
-
-.bg-removal-hint {
-  font-size: 0.7rem;
-  color: var(--text-muted);
-  margin: 0.5rem 0 0 0;
-  line-height: 1.4;
-}
-
-.spinner-small {
-  width: 16px;
-  height: 16px;
-  border: 2px solid rgba(255, 255, 255, 0.3);
-  border-top-color: white;
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-}
-
-/* Filerobot Editor Overlay */
-.filerobot-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.8);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
-}
-
-.filerobot-container {
-  width: 90%;
-  height: 90%;
-  background: #1e1e1e;
-  border-radius: var(--radius-lg);
-  overflow: hidden;
-}
-
-/* Responsive */
-@media (max-width: 900px) {
-  .app-layout {
-    flex-direction: column;
-  }
-
-  .sidebar-container,
-  .properties-container {
-    width: 100%;
-    border: none;
-    border-bottom: 1px solid var(--border);
-  }
-
-  .sidebar-tabs {
-    overflow-x: auto;
-  }
-
-  .sticker-grid {
-    grid-template-columns: repeat(8, 1fr);
-  }
-}
--- a/client/src/main.jsx
+++ b/client/src/main.jsx
@@ -1,10 +0,0 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import './index.css'
-import App from './App'
-
-createRoot(document.getElementById('root')).render(
-  <StrictMode>
-    <App />
-  </StrictMode>,
-)
--- a/client/vite.config.js
+++ b/client/vite.config.js
@@ -1,16 +0,0 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
-
-// https://vite.dev/config/
-export default defineConfig({
-  plugins: [react()],
-  server: {
-    port: 3000,
-    proxy: {
-      '/api': {
-        target: 'http://localhost:3001',
-        changeOrigin: true
-      }
-    }
-  }
-})
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -1,26 +1,15 @@
-version: '3.8'
-
 services:
  apparel-designer:
-    build:
-      context: .
-      dockerfile: Dockerfile
+    build: { context: ., dockerfile: Dockerfile }
    container_name: apparel-designer
-    ports:
-      - "3001:3001"
+    ports: ["3001:3001"]
    volumes:
-      - uploads_data:/app/server/uploads
-      - exports_data:/app/server/exports
+      - uploads_data:/app/uploads
+      - exports_data:/app/exports
    environment:
      - NODE_ENV=production
      - PORT=3001
    restart: unless-stopped
-    healthcheck:
-      test: ["CMD", "wget", "--no-verbose", "--tries=1", "--spider", "http://localhost:3001/api/health"]
-      interval: 30s
-      timeout: 10s
-      retries: 3
-      start_period: 10s

 volumes:
  uploads_data:
--- a/docs/template-schema.md
+++ b/docs/template-schema.md
@@ -0,0 +1,239 @@
+# Template JSON Schema
+
+This document describes the template structure for creating custom t-shirt design templates.
+
+## Template Structure
+
+```json
+{
+  "id": "string (unique identifier)",
+  "name": "string (display name)",
+  "category": "string (Sports|Music|Quotes|Animals|Abstract|Vintage|Nature|Tech)",
+  "description": "string (short description)",
+  "elements": [
+    {
+      "type": "text" | "image",
+      "text": "string (for text elements only)",
+      "x": "number (x position in canvas units)",
+      "y": "number (y position in canvas units)",
+      "fontSize": "number (for text elements)",
+      "fontFamily": "string (Google Font name)",
+      "fill": "string (hex color)",
+      "rotation": "number (degrees, -180 to 180)",
+      "width": "number (for image elements)",
+      "height": "number (for image elements)",
+      "src": "string (image URL or path)"
+    }
+  ]
+}
+```
+
+## Element Properties
+
+### Text Element
+
+| Property   | Type   | Required | Description                           |
+|------------|--------|----------|---------------------------------------|
+| `type`     | string | Yes      | Must be `"text"`                      |
+| `text`     | string | Yes      | The text content to display           |
+| `x`        | number | Yes      | X position on canvas (0-300)          |
+| `y`        | number | Yes      | Y position on canvas (0-300)          |
+| `fontSize` | number | Yes      | Font size in pixels (12-120)          |
+| `fontFamily`| string| No       | Google Font name (default: "DM Sans") |
+| `fill`     | string | No       | Hex color (default: "#0f172a")        |
+| `rotation` | number | No       | Rotation in degrees (default: 0)      |
+
+### Image Element
+
+| Property   | Type   | Required | Description                           |
+|------------|--------|----------|---------------------------------------|
+| `type`     | string | Yes      | Must be `"image"`                     |
+| `src`      | string | Yes      | Image URL or server path              |
+| `x`        | number | Yes      | X position on canvas (0-300)          |
+| `y`        | number | Yes      | Y position on canvas (0-300)          |
+| `width`    | number | Yes      | Width in canvas units (min: 20)       |
+| `height`   | number | Yes      | Height in canvas units (min: 20)      |
+| `rotation` | number | No       | Rotation in degrees (default: 0)      |
+
+## Advanced Template Features
+
+### Template with Background and Overlay
+
+For templates that include background images and overlay elements:
+
+```json
+{
+  "id": "team-sport",
+  "name": "Team Sport",
+  "category": "Sports",
+  "description": "Classic team jersey with number and text",
+  "background": {
+    "type": "color" | "image",
+    "color": "string (hex, if type is color)",
+    "src": "string (URL/path, if type is image)"
+  },
+  "overlay": [
+    {
+      "type": "text" | "image",
+      "nonPrintable": false,
+      "...": "same properties as regular elements"
+    }
+  ],
+  "elements": [...]
+}
+```
+
+### Slot-Based Templates
+
+For templates with image slots (auto-crop regions):
+
+```json
+{
+  "id": "classic-tee-front",
+  "name": "Classic Tee - Front",
+  "slots": [
+    {
+      "id": "chest-logo",
+      "bounds": { "x": 100, "y": 80, "width": 100, "height": 100 },
+      "aspectRatio": 1.0,
+      "label": "Chest Logo"
+    },
+    {
+      "id": "sleeve-left",
+      "bounds": { "x": 20, "y": 100, "width": 60, "height": 60 },
+      "aspectRatio": 1.0,
+      "label": "Left Sleeve"
+    }
+  ],
+  "elements": []
+}
+```
+
+### Slot Crop Region
+
+When an image is assigned to a slot, the crop property is applied:
+
+```json
+{
+  "type": "image",
+  "src": "/uploads/image.png",
+  "x": 100,
+  "y": 80,
+  "width": 100,
+  "height": 100,
+  "crop": {
+    "sx": 0,
+    "sy": 0,
+    "sWidth": 500,
+    "sHeight": 500
+  }
+}
+```
+
+| Property  | Type   | Description                          |
+|-----------|--------|--------------------------------------|
+| `sx`      | number | Source x coordinate for crop         |
+| `sy`      | number | Source y coordinate for crop         |
+| `sWidth`  | number | Source width for crop                |
+| `sHeight` | number | Source height for crop               |
+
+## Non-Printable Elements
+
+Elements can be marked as non-printable to exclude them from export:
+
+```json
+{
+  "type": "text",
+  "text": "Guide Text",
+  "nonPrintable": true,
+  "x": 150,
+  "y": 150,
+  "fontSize": 12,
+  "fill": "#cccccc"
+}
+```
+
+## Example Templates
+
+### Minimal Quote Template
+
+```json
+{
+  "id": "minimal-quote",
+  "name": "Minimal Quote",
+  "category": "Quotes",
+  "description": "Simple centered quote design",
+  "elements": [
+    {
+      "type": "text",
+      "text": "\"Be the change\"",
+      "x": 150,
+      "y": 130,
+      "fontSize": 24,
+      "fontFamily": "Georgia",
+      "fill": "#1e293b",
+      "rotation": 0
+    },
+    {
+      "type": "text",
+      "text": "you wish to see",
+      "x": 150,
+      "y": 160,
+      "fontSize": 18,
+      "fontFamily": "Arial",
+      "fill": "#64748b",
+      "rotation": 0
+    }
+  ]
+}
+```
+
+### Team Sport Template
+
+```json
+{
+  "id": "team-sport",
+  "name": "Team Sport",
+  "category": "Sports",
+  "description": "Classic team jersey with number and text",
+  "elements": [
+    {
+      "type": "text",
+      "text": "TEAM NAME",
+      "x": 75,
+      "y": 80,
+      "fontSize": 28,
+      "fontFamily": "Impact",
+      "fill": "#ffffff",
+      "rotation": 0
+    },
+    {
+      "type": "text",
+      "text": "23",
+      "x": 150,
+      "y": 150,
+      "fontSize": 72,
+      "fontFamily": "Impact",
+      "fill": "#ffffff",
+      "rotation": 0
+    }
+  ]
+}
+```
+
+## Canvas Coordinate System
+
+- Canvas size: 300x300 units (preview)
+- Export size: 4500x4500 pixels (300 DPI, 15"x15")
+- Scale factor: 15x (export / preview)
+- Origin (0,0): Top-left corner
+- X increases: Left to right
+- Y increases: Top to bottom
+
+## Best Practices
+
+1. **Keep text readable**: Use font sizes between 18-72px for main text
+2. **Respect print area**: Keep elements within 0-300 canvas bounds
+3. **Use contrasting colors**: Ensure text is visible on shirt colors
+4. **Test at export size**: Verify designs look good at 4500x4500px
+5. **Limit elements**: 5-10 elements maximum for performance
--- a/client/eslint.config.js
+++ b/client/eslint.config.js
@@ -7,7 +7,7 @@ import { defineConfig, globalIgnores } from 'eslint/config'
 export default defineConfig([
  globalIgnores(['dist']),
  {
-    files: ['**/*.{js,jsx}'],
+    files: ['src/**/*.{js,jsx}'],
    extends: [
      js.configs.recommended,
      reactHooks.configs.flat.recommended,
@@ -23,7 +23,19 @@ export default defineConfig([
      },
    },
    rules: {
-      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
+      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]', argsIgnorePattern: '^_' }],
+    },
+  },
+  {
+    files: ['server.js'],
+    extends: [js.configs.recommended],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.node,
+      sourceType: 'module',
+    },
+    rules: {
+      'no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
    },
  },
 ])
--- a/server/exports/.gitkeep
+++ b/server/exports/.gitkeep
--- a/client/index.html
+++ b/client/index.html
@@ -5,11 +5,9 @@
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Apparel Designer</title>
-    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Open+Sans:wght@400;600;700&family=Lato:wght@400;700&family=Montserrat:wght@400;600;700&family=Oswald:wght@400;500;700&family=Raleway:wght@400;600;700&family=Poppins:wght@400;500;600;700&family=Roboto+Condensed:wght@400;700&family=Source+Sans+3:wght@400;600;700&family=Roboto+Slab:wght@400;700&family=Merriweather:wght@400;700&family=Ubuntu:wght@400;500;700&family=Playfair+Display:wght@400;600;700&family=Nunito:wght@400;600;700&family=Rubik:wght@400;500;600;700&family=Work+Sans:wght@400;500;600;700&family=Lora:wght@400;500;600;700&family=Fira+Sans:wght@400;500;600;700&family=Barlow:wght@400;500;600;700&family=Bebas+Neue&display=swap" rel="stylesheet">
-    <!-- UI Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
  </head>
  <body>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -5,14 +5,49 @@
  "private": true,
  "type": "module",
  "scripts": {
-    "postinstall": "cd client && npm install && cd ../server && npm install",
-    "dev": "concurrently \"npm run dev:client\" \"npm run dev:server\"",
-    "dev:client": "cd client && npm run dev",
-    "dev:server": "cd server && npm run dev",
-    "build": "cd client && npm run build",
-    "start": "node server/index.js"
+    "dev": "concurrently \"vite\" \"DYLD_INSERT_LIBRARIES='' node --watch server.js\"",
+    "dev:win": "concurrently \"vite\" \"node --watch server.js\"",
+    "build": "vite build",
+    "start": "node server.js",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@huggingface/transformers": "^3.4.0",
+    "canvas": "^2.11.2",
+    "cors": "^2.8.5",
+    "express": "^4.18.2",
+    "konva": "^10.0.0",
+    "multer": "^1.4.5-lts.1",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5",
+    "react-filerobot-image-editor": "^4.8.1",
+    "react-konva": "^19.2.3",
+    "sharp": "^0.33.2",
+    "use-image": "^1.1.1",
+    "uuid": "^9.0.1"
  },
  "devDependencies": {
-    "concurrently": "^8.2.0"
+    "@eslint/js": "^9.39.4",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "concurrently": "^8.2.0",
+    "eslint": "^9.39.4",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-react-refresh": "^0.5.2",
+    "globals": "^17.5.0",
+    "vite": "^8.0.9",
+    "vite-plugin-pwa": "^0.20.5",
+    "workbox-window": "^7.1.0"
+  },
+  "engines": {
+    "node": ">=20.0.0"
+  },
+  "overrides": {
+    "serialize-javascript": "^7.0.3",
+    "vite-plugin-pwa": {
+      "vite": "$vite"
+    }
  }
 }
--- a/public/favicon.svg
+++ b/public/favicon.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none">
+  <path d="M16 4L4 12L10 16L10 40C10 41.1 10.9 42 12 42H36C37.1 42 38 41.1 38 40V16L44 12L32 4C32 4 29.5 8 24 8C18.5 8 16 4 16 4Z" fill="#38bdf8" stroke="#0ea5e9" stroke-width="2" stroke-linejoin="round"/>
+  <path d="M16 4C16 4 18.5 8 24 8C29.5 8 32 4 32 4" fill="none" stroke="#0ea5e9" stroke-width="2" stroke-linecap="round"/>
+</svg>
--- a/public/icons.svg
+++ b/public/icons.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"><!-- Project icon sprites --></svg>
--- a/public/pwa-192x192.svg
+++ b/public/pwa-192x192.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" viewBox="0 0 192 192"><rect width="192" height="192" fill="#38bdf8"/><rect x="24" y="24" width="144" height="144" rx="24" fill="#ffffff"/><text x="96" y="120" font-size="72" text-anchor="middle" fill="#38bdf8" font-family="Arial, sans-serif">T</text></svg>
--- a/public/pwa-512x512.svg
+++ b/public/pwa-512x512.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><rect width="512" height="512" fill="#38bdf8"/><rect x="64" y="64" width="384" height="384" rx="64" fill="#ffffff"/><text x="256" y="310" font-size="192" text-anchor="middle" fill="#38bdf8" font-family="Arial, sans-serif">T</text></svg>
--- a/server.js
+++ b/server.js
@@ -0,0 +1,281 @@
+import express from 'express';
+import cors from 'cors';
+import multer from 'multer';
+import { v4 as uuidv4 } from 'uuid';
+import sharp from 'sharp';
+import { createCanvas, loadImage } from 'canvas';
+import { fileURLToPath } from 'url';
+import { dirname, join } from 'path';
+import { mkdirSync, existsSync, writeFileSync } from 'fs';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const app = express();
+const PORT = process.env.PORT || 3001;
+const IS_PRODUCTION = process.env.NODE_ENV === 'production';
+
+// Ensure upload and export directories exist
+const uploadsDir = join(__dirname, 'uploads');
+const exportsDir = join(__dirname, 'exports');
+[uploadsDir, exportsDir].forEach((dir) => {
+  if (!existsSync(dir)) mkdirSync(dir, { recursive: true });
+});
+
+// Middleware — restrict CORS in production
+const corsOptions = IS_PRODUCTION
+  ? { origin: process.env.CORS_ORIGIN || false }
+  : { origin: true };
+app.use(cors(corsOptions));
+app.use(express.json({ limit: '50mb' }));
+app.use(express.urlencoded({ extended: true, limit: '50mb' }));
+
+// Serve static files for uploads and exports
+app.use('/uploads', express.static(uploadsDir));
+app.use('/exports', express.static(exportsDir));
+
+// In production, serve the Vite-built client
+if (IS_PRODUCTION) {
+  const clientDist = join(__dirname, 'dist');
+  app.use(express.static(clientDist));
+} else {
+  // Dev UX: backend doesn't serve the SPA; Vite does.
+  app.get('/', (_req, res) => {
+    res
+      .status(302)
+      .set('Location', 'http://localhost:5173/')
+      .send('Redirecting to Vite dev server...');
+  });
+}
+
+// Map MIME types to file extensions
+const MIME_TO_EXT = {
+  'image/jpeg': 'jpg',
+  'image/png': 'png',
+  'image/webp': 'webp',
+};
+
+// Configure multer for image uploads
+const storage = multer.diskStorage({
+  destination: (_req, _file, cb) => {
+    cb(null, uploadsDir);
+  },
+  filename: (_req, file, cb) => {
+    const ext = MIME_TO_EXT[file.mimetype] || 'bin';
+    cb(null, `${uuidv4()}.${ext}`);
+  },
+});
+
+const fileFilter = (_req, file, cb) => {
+  if (MIME_TO_EXT[file.mimetype]) {
+    cb(null, true);
+  } else {
+    cb(new Error('Invalid file type. Only JPEG, PNG, and WebP are allowed.'), false);
+  }
+};
+
+const upload = multer({
+  storage,
+  fileFilter,
+  limits: { fileSize: 20 * 1024 * 1024 },
+});
+
+// ── API Routes ──────────────────────────────────────────────────────────────
+
+// Health check
+app.get('/api/health', (_req, res) => {
+  res.json({ status: 'ok', timestamp: new Date().toISOString() });
+});
+
+// Upload
+app.post('/api/upload', upload.single('image'), async (req, res) => {
+  try {
+    if (!req.file) {
+      return res.status(400).json({ error: 'No file uploaded' });
+    }
+
+    const originalUrl = `/uploads/${req.file.filename}`;
+
+    // Create preview by resizing to max 1000px
+    const previewFilename = `${uuidv4()}.png`;
+    const previewDir = join(uploadsDir, 'preview');
+    if (!existsSync(previewDir)) mkdirSync(previewDir, { recursive: true });
+
+    await sharp(req.file.path)
+      .resize({ width: 1000, height: 1000, fit: 'inside' })
+      .png()
+      .toFile(join(previewDir, previewFilename));
+
+    res.json({
+      success: true,
+      original: {
+        url: originalUrl,
+        filename: req.file.filename,
+        size: req.file.size,
+        mimetype: req.file.mimetype,
+      },
+      preview: {
+        url: `/uploads/preview/${previewFilename}`,
+        filename: previewFilename,
+      },
+    });
+  } catch (error) {
+    console.error('Upload error:', error);
+    res.status(500).json({ error: 'Failed to process upload', details: error.message });
+  }
+});
+
+// High-resolution export (300×300 → 4500×4500 @ 300 DPI)
+const EXPORT_SCALE = 15;
+const EXPORT_SIZE = 4500;
+
+app.post('/api/export', async (req, res) => {
+  try {
+    const { elements, designName = 'design', template } = req.body;
+
+    if (!elements || !Array.isArray(elements)) {
+      return res.status(400).json({ error: 'Elements array is required' });
+    }
+
+    const canvas = createCanvas(EXPORT_SIZE, EXPORT_SIZE);
+    const ctx = canvas.getContext('2d');
+
+    // Template background
+    if (template?.background) {
+      const bg = template.background;
+      if (bg.type === 'color') {
+        ctx.fillStyle = bg.color;
+        ctx.fillRect(0, 0, EXPORT_SIZE, EXPORT_SIZE);
+      } else if (bg.type === 'image' && bg.src) {
+        try {
+          const imgUrl = bg.src.startsWith('/')
+            ? join(__dirname, bg.src.replace('/uploads', 'uploads'))
+            : bg.src;
+          const img = await loadImage(imgUrl);
+          ctx.drawImage(img, 0, 0, EXPORT_SIZE, EXPORT_SIZE);
+        } catch (imgError) {
+          console.error('Failed to load template background:', imgError);
+          ctx.fillStyle = '#ffffff';
+          ctx.fillRect(0, 0, EXPORT_SIZE, EXPORT_SIZE);
+        }
+      }
+    } else {
+      ctx.fillStyle = '#ffffff';
+      ctx.fillRect(0, 0, EXPORT_SIZE, EXPORT_SIZE);
+    }
+
+    // Render a single element
+    const renderElement = async (el) => {
+      ctx.save();
+
+      const x = (el.x || 0) * EXPORT_SCALE;
+      const y = (el.y || 0) * EXPORT_SCALE;
+      const centerX = x + ((el.width || el.fontSize || 100) * EXPORT_SCALE) / 2;
+      const centerY = y + ((el.height || el.fontSize || 100) * EXPORT_SCALE) / 2;
+
+      ctx.translate(centerX, centerY);
+      ctx.rotate(((el.rotation || 0) * Math.PI) / 180);
+      ctx.translate(-centerX, -centerY);
+
+      if (el.type === 'image' && el.src) {
+        try {
+          const imgUrl = el.src.startsWith('/')
+            ? join(__dirname, el.src.replace('/uploads', 'uploads'))
+            : el.src;
+          const img = await loadImage(imgUrl);
+          const width = (el.width || 100) * EXPORT_SCALE;
+          const height = (el.height || 100) * EXPORT_SCALE;
+
+          if (el.crop) {
+            ctx.drawImage(img, el.crop.sx, el.crop.sy, el.crop.sWidth, el.crop.sHeight, x, y, width, height);
+          } else {
+            ctx.drawImage(img, x, y, width, height);
+          }
+        } catch (imgError) {
+          console.error('Failed to load image for export:', imgError);
+        }
+      } else if (el.type === 'text') {
+        const fontSize = ((el.fontSize || 32) * EXPORT_SCALE) / 32;
+        ctx.font = `${fontSize}px "${el.fontFamily || 'Arial'}"`;
+        ctx.fillStyle = el.fill || '#000000';
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'middle';
+        ctx.fillText(el.text || '', centerX, centerY);
+      }
+
+      ctx.restore();
+    };
+
+    // Render user elements
+    for (const el of elements) {
+      if (el.nonPrintable) continue;
+      await renderElement(el);
+    }
+
+    // Render template overlay
+    if (template?.overlay) {
+      for (const overlayEl of template.overlay) {
+        if (overlayEl.nonPrintable) continue;
+        await renderElement(overlayEl);
+      }
+    }
+
+    // Save to file
+    const exportFilename = `${designName.replace(/[^a-z0-9]/gi, '_')}_${uuidv4()}.png`;
+    const exportPath = join(exportsDir, exportFilename);
+    writeFileSync(exportPath, canvas.toBuffer('image/png'));
+
+    res.json({
+      success: true,
+      export: {
+        url: `/exports/${exportFilename}`,
+        filename: exportFilename,
+        width: EXPORT_SIZE,
+        height: EXPORT_SIZE,
+        dpi: 300,
+        sizeInches: '15x15',
+      },
+    });
+  } catch (error) {
+    console.error('Export error:', error);
+    res.status(500).json({ error: 'Failed to export design', details: error.message });
+  }
+});
+
+// Download
+app.get('/api/download/:filename', (req, res) => {
+  const filePath = join(exportsDir, req.params.filename);
+  if (!existsSync(filePath)) {
+    return res.status(404).json({ error: 'File not found' });
+  }
+  res.download(filePath);
+});
+
+// API 404 catch-all (before SPA catch-all)
+app.all('/api/*', (_req, res) => {
+  res.status(404).json({ error: 'API route not found' });
+});
+
+// In production, SPA catch-all
+if (IS_PRODUCTION) {
+  app.get('*', (_req, res) => {
+    res.sendFile(join(__dirname, 'dist', 'index.html'));
+  });
+}
+
+// Error handling
+app.use((err, _req, res, _next) => {
+  if (err instanceof multer.MulterError) {
+    if (err.code === 'LIMIT_FILE_SIZE') {
+      return res.status(400).json({ error: 'File too large. Maximum size is 20MB.' });
+    }
+    return res.status(400).json({ error: err.message });
+  }
+  console.error('Unhandled error:', err);
+  res.status(500).json({ error: 'Internal server error', details: err.message });
+});
+
+app.listen(PORT, () => {
+  console.log(`Server running on http://localhost:${PORT}`);
+  console.log(`Mode: ${IS_PRODUCTION ? 'production' : 'development'}`);
+});
--- a/server/index.js
+++ b/server/index.js
@@ -1,127 +0,0 @@
-import express from 'express';
-import cors from 'cors';
-import multer from 'multer';
-import { v4 as uuidv4 } from 'uuid';
-import sharp from 'sharp';
-import { fileURLToPath } from 'module';
-import { dirname, join } from 'path';
-import { mkdirSync, existsSync } from 'fs';
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename);
-
-const app = express();
-const PORT = process.env.PORT || 3001;
-
-// Ensure upload and export directories exist
-const uploadsDir = join(__dirname, 'uploads');
-const exportsDir = join(__dirname, 'exports');
-[uploadsDir, exportsDir].forEach(dir => {
-  if (!existsSync(dir)) mkdirSync(dir, { recursive: true });
-});
-
-// Middleware
-app.use(cors());
-app.use(express.json({ limit: '50mb' }));
-app.use(express.urlencoded({ extended: true, limit: '50mb' }));
-
-// Serve static files for uploads and exports
-app.use('/uploads', express.static(uploadsDir));
-app.use('/exports', express.static(exportsDir));
-
-// Configure multer for image uploads
-const storage = multer.diskStorage({
-  destination: (req, file, cb) => {
-    cb(null, uploadsDir);
-  },
-  filename: (req, file, cb) => {
-    const ext = file.originalname.split('.').pop();
-    const filename = `${uuidv4()}.${ext}`;
-    cb(null, filename);
-  }
-});
-
-const fileFilter = (req, file, cb) => {
-  const allowedTypes = ['image/jpeg', 'image/png', 'image/webp'];
-  if (allowedTypes.includes(file.mimetype)) {
-    cb(null, true);
-  } else {
-    cb(new Error('Invalid file type. Only JPEG, PNG, and WebP are allowed.'), false);
-  }
-};
-
-const upload = multer({
-  storage,
-  fileFilter,
-  limits: {
-    fileSize: 20 * 1024 * 1024 // 20MB
-  }
-});
-
-// Health check endpoint
-app.get('/api/health', (req, res) => {
-  res.json({ status: 'ok', timestamp: new Date().toISOString() });
-});
-
-// Upload endpoint
-app.post('/api/upload', upload.single('image'), async (req, res) => {
-  try {
-    if (!req.file) {
-      return res.status(400).json({ error: 'No file uploaded' });
-    }
-
-    const originalPath = req.file.path;
-    const originalUrl = `/uploads/${req.file.filename}`;
-
-    // Create preview by resizing to max 1000px
-    const previewFilename = req.file.filename.replace(/\.[^.]+$/, '.png');
-    const previewPath = join(uploadsDir, 'preview', previewFilename);
-
-    // Ensure preview directory exists
-    const previewDir = join(uploadsDir, 'preview');
-    if (!existsSync(previewDir)) mkdirSync(previewDir, { recursive: true });
-
-    await sharp(originalPath)
-      .resize({ width: 1000, height: 1000, fit: 'inside' })
-      .png()
-      .toFile(previewPath);
-
-    const previewUrl = `/uploads/preview/${previewFilename}`;
-
-    res.json({
-      success: true,
-      original: {
-        path: originalPath,
-        url: originalUrl,
-        filename: req.file.filename,
-        size: req.file.size,
-        mimetype: req.file.mimetype
-      },
-      preview: {
-        path: previewPath,
-        url: previewUrl,
-        filename: previewFilename
-      }
-    });
-  } catch (error) {
-    console.error('Upload error:', error);
-    res.status(500).json({ error: 'Failed to process upload', details: error.message });
-  }
-});
-
-// Error handling for multer
-app.use((err, req, res, next) => {
-  if (err instanceof multer.MulterError) {
-    if (err.code === 'LIMIT_FILE_SIZE') {
-      return res.status(400).json({ error: 'File too large. Maximum size is 20MB.' });
-    }
-    return res.status(400).json({ error: err.message });
-  }
-  next(err);
-});
-
-app.listen(PORT, () => {
-  console.log(`Server running on http://localhost:${PORT}`);
-  console.log(`Health check: http://localhost:${PORT}/api/health`);
-  console.log(`Upload endpoint: POST http://localhost:${PORT}/api/upload`);
-});
--- a/server/package-lock.json
+++ b/server/package-lock.json
--- a/server/package.json
+++ b/server/package.json
@@ -1,17 +0,0 @@
-{
-  "name": "apparel-designer-server",
-  "version": "1.0.0",
-  "type": "module",
-  "main": "index.js",
-  "scripts": {
-    "dev": "DYLD_INSERT_LIBRARIES='' node --watch index.js",
-    "start": "node index.js"
-  },
-  "dependencies": {
-    "express": "^4.18.2",
-    "cors": "^2.8.5",
-    "multer": "^1.4.5-lts.1",
-    "sharp": "^0.33.2",
-    "uuid": "^9.0.1"
-  }
-}
--- a/src/App.css
+++ b/src/App.css
@@ -0,0 +1,37 @@
+.canvas-header {
+  position: absolute;
+  top: 20px;
+  text-align: center;
+}
+
+.canvas-header h1 {
+  margin: 0 0 0.25rem 0;
+  font-size: 20px;
+  color: var(--text-primary);
+}
+
+.canvas-header p {
+  margin: 0;
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+.canvas-toolbar {
+  position: absolute;
+  top: 100px;
+  display: flex;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+  justify-content: center;
+}
+
+.layers-panel-wrapper {
+  position: absolute;
+  bottom: 20px;
+  width: 100%;
+  max-width: 400px;
+  background: var(--bg-primary);
+  border-radius: var(--radius-md);
+  padding: 1rem;
+  box-shadow: var(--shadow-md);
+}
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -0,0 +1,191 @@
+import { useEffect, useRef, useState } from 'react';
+import { DesignCanvas } from './components/canvas/DesignCanvas';
+import { Sidebar } from './components/sidebar/Sidebar';
+import { LayersPanel } from './components/panels/LayersPanel';
+import { PropertiesPanel } from './components/panels/PropertiesPanel';
+import { PWAInstall } from './components/PWAInstall';
+import { OfflineIndicator } from './components/OfflineIndicator';
+import { PhotoPreEditor } from './components/editor/PhotoPreEditor';
+import { useDesignEditor } from './hooks/useDesignEditor';
+import { useExport } from './hooks/useExport';
+import { useTemplate } from './hooks/useTemplate';
+import { TEMPLATES } from './constants/templates';
+import './App.css';
+
+function App() {
+  const [editingElement, setEditingElement] = useState(null);
+  const canvasContainerRef = useRef(null);
+  const propertiesPanelRef = useRef(null);
+
+  const {
+    elements, selectedId, addElement, updateElement, deleteElement,
+    selectElement, deselectAll, commitHistory, undo, redo, canUndo, canRedo, initializeHistory,
+  } = useDesignEditor();
+
+  const { exporting, progress, exportDesign, error, clearExport } = useExport();
+
+  const {
+    currentTemplate, assignedSlots,
+    loadTemplate, clearTemplate, assignImageToSlot, getDragBoundFunc,
+  } = useTemplate(TEMPLATES);
+
+  const selectedElement = elements.find((el) => el.id === selectedId);
+
+  useEffect(() => { initializeHistory(); }, [initializeHistory]);
+
+  // Keyboard shortcuts
+  useEffect(() => {
+    const handleKeyDown = (e) => {
+      if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
+
+      if ((e.ctrlKey || e.metaKey) && e.key === 'z' && !e.shiftKey) {
+        e.preventDefault();
+        if (canUndo) undo();
+        return;
+      }
+      if ((e.ctrlKey || e.metaKey) && ((e.key === 'z' && e.shiftKey) || e.key === 'y')) {
+        e.preventDefault();
+        if (canRedo) redo();
+        return;
+      }
+      if ((e.key === 'Delete' || e.key === 'Backspace') && selectedId) {
+        deleteElement(selectedId);
+      }
+    };
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [selectedId, deleteElement, undo, redo, canUndo, canRedo]);
+
+  // Deselect when clicking outside the canvas
+  useEffect(() => {
+    const handleMouseDown = (e) => {
+      if (
+        selectedId
+        && canvasContainerRef.current && !canvasContainerRef.current.contains(e.target)
+        && propertiesPanelRef.current && !propertiesPanelRef.current.contains(e.target)
+      ) {
+        deselectAll();
+      }
+    };
+    document.addEventListener('mousedown', handleMouseDown);
+    return () => document.removeEventListener('mousedown', handleMouseDown);
+  }, [selectedId, deselectAll]);
+
+  const handleAddTemplate = (templateId) => {
+    if (templateId === 'freeform') { clearTemplate(); return; }
+    const success = loadTemplate(templateId);
+    if (success) {
+      const template = TEMPLATES.find(t => t.id === templateId);
+      if (template?.elements) {
+        template.elements.forEach((el, index) => {
+          setTimeout(() => addElement({ ...el }), index * 50);
+        });
+      }
+    }
+  };
+
+  const handleSlotImageUpload = (slotId, imageData) => {
+    const elementData = assignImageToSlot(slotId, imageData);
+    if (elementData) addElement(elementData);
+  };
+
+  return (
+    <div className="editor-layout">
+      <OfflineIndicator />
+      <PWAInstall />
+
+      <Sidebar
+        onAddImage={(data) => addElement(data)}
+        onAddSticker={(data) => addElement(data)}
+        onAddText={(data) => addElement(data)}
+        onAddTemplate={handleAddTemplate}
+        onSlotImageUpload={handleSlotImageUpload}
+      />
+
+      <div className="canvas-area">
+        <div className="canvas-header">
+          <h1>Apparel Designer</h1>
+          <p>T-shirt customization editor</p>
+        </div>
+
+        <div className="canvas-toolbar">
+          <button onClick={() => canUndo && undo()} disabled={!canUndo} className="icon-btn">↶ Undo</button>
+          <button onClick={() => canRedo && redo()} disabled={!canRedo} className="icon-btn">↷ Redo</button>
+          <button onClick={() => exportDesign(elements, 'tshirt-design', currentTemplate)} disabled={exporting || elements.length === 0} className="export-btn">
+            {exporting ? `Exporting... ${progress}%` : '⬇ Export HD'}
+          </button>
+        </div>
+
+        {error && (
+          <div className="export-error">
+            <p>⚠️ Export failed: {error}</p>
+            <button onClick={clearExport} className="close-error">✕</button>
+          </div>
+        )}
+
+        <div ref={canvasContainerRef}>
+        <DesignCanvas
+          elements={elements} selectedId={selectedId}
+          onSelect={selectElement} onDeselect={deselectAll}
+          onUpdate={(id, attrs) => updateElement(id, attrs)} onCommit={commitHistory}
+          currentTemplate={currentTemplate} assignedSlots={assignedSlots} getDragBoundFunc={getDragBoundFunc}
+        />
+        </div>
+
+        <div className="layers-panel-wrapper">
+          <LayersPanel elements={elements} selectedId={selectedId} onSelect={selectElement} onDelete={deleteElement} />
+        </div>
+      </div>
+
+      <div ref={propertiesPanelRef}>
+      <PropertiesPanel
+        element={selectedElement}
+        onUpdate={(attrs) => updateElement(selectedId, attrs)}
+        onDelete={deleteElement}
+        onEditPhoto={(el) => setEditingElement(el)}
+      />
+      </div>
+
+      {editingElement && (
+        <PhotoPreEditor
+          imageSrc={editingElement.src}
+          onComplete={(url) => {
+            const img = new window.Image();
+            img.onload = () => {
+              const oldWidth = editingElement.width || 100;
+              const oldHeight = editingElement.height || 100;
+              const newAspect = img.naturalWidth / img.naturalHeight;
+              const oldAspect = oldWidth / oldHeight;
+
+              let newWidth, newHeight;
+              if (Math.abs(newAspect - oldAspect) < 0.01) {
+                newWidth = oldWidth;
+                newHeight = oldHeight;
+              } else {
+                const area = oldWidth * oldHeight;
+                newWidth = Math.sqrt(area * newAspect);
+                newHeight = newWidth / newAspect;
+              }
+
+              updateElement(editingElement.id, {
+                src: url,
+                width: Math.round(newWidth),
+                height: Math.round(newHeight),
+                crop: undefined,
+              });
+              setEditingElement(null);
+            };
+            img.onerror = () => {
+              updateElement(editingElement.id, { src: url });
+              setEditingElement(null);
+            };
+            img.src = url;
+          }}
+          onClose={() => setEditingElement(null)}
+        />
+      )}
+    </div>
+  );
+}
+
+export default App;
--- a/src/components/OfflineIndicator.jsx
+++ b/src/components/OfflineIndicator.jsx
@@ -0,0 +1,16 @@
+import { useState, useEffect } from 'react';
+
+export function OfflineIndicator() {
+  const [isOffline, setIsOffline] = useState(!navigator.onLine);
+
+  useEffect(() => {
+    const handleOnline = () => setIsOffline(false);
+    const handleOffline = () => setIsOffline(true);
+    window.addEventListener('online', handleOnline);
+    window.addEventListener('offline', handleOffline);
+    return () => { window.removeEventListener('online', handleOnline); window.removeEventListener('offline', handleOffline); };
+  }, []);
+
+  if (!isOffline) return null;
+  return <div className="offline-indicator"><span>⚠️</span><span>You're offline — changes are saved locally</span></div>;
+}
--- a/src/components/PWAInstall.jsx
+++ b/src/components/PWAInstall.jsx
@@ -0,0 +1,49 @@
+import { useState, useEffect } from 'react';
+import '../styles/PWAInstall.css';
+
+export function PWAInstall() {
+  const [deferredPrompt, setDeferredPrompt] = useState(null);
+  const [showInstall, setShowInstall] = useState(false);
+  const [updateAvailable, setUpdateAvailable] = useState(false);
+  const [newWorker, setNewWorker] = useState(null);
+
+  useEffect(() => {
+    const handleBeforeInstallPrompt = (e) => { e.preventDefault(); setDeferredPrompt(e); setShowInstall(true); };
+    const handleSWUpdated = (event) => { setNewWorker(event.detail); setUpdateAvailable(true); };
+    window.addEventListener('beforeinstallprompt', handleBeforeInstallPrompt);
+    window.addEventListener('swUpdated', handleSWUpdated);
+    return () => { window.removeEventListener('beforeinstallprompt', handleBeforeInstallPrompt); window.removeEventListener('swUpdated', handleSWUpdated); };
+  }, []);
+
+  const handleInstall = async () => {
+    if (!deferredPrompt) return;
+    deferredPrompt.prompt();
+    const { outcome } = await deferredPrompt.userChoice;
+    if (outcome === 'accepted') { setShowInstall(false); setDeferredPrompt(null); }
+  };
+
+  const handleUpdate = () => { if (newWorker) { newWorker.postMessage({ type: 'SKIP_WAITING' }); window.location.reload(); } };
+
+  if (!showInstall && !updateAvailable) return null;
+
+  return (
+    <>
+      {showInstall && (
+        <div className="pwa-install-banner">
+          <p>Install Apparel Designer for offline access!</p>
+          <div className="pwa-install-actions">
+            <button onClick={handleInstall} className="install-btn">Install</button>
+            <button onClick={() => setShowInstall(false)} className="dismiss-btn">Later</button>
+          </div>
+        </div>
+      )}
+      {updateAvailable && (
+        <div className="pwa-update-banner">
+          <span>🔄 New version available!</span>
+          <button onClick={handleUpdate} className="refresh-btn">Refresh</button>
+          <button onClick={() => { setUpdateAvailable(false); setNewWorker(null); }} className="close-btn">✕</button>
+        </div>
+      )}
+    </>
+  );
+}
--- a/src/components/canvas/DesignCanvas.jsx
+++ b/src/components/canvas/DesignCanvas.jsx
@@ -0,0 +1,145 @@
+import { Stage, Layer } from 'react-konva';
+import { TShirtSVG } from './TShirtSVG';
+import { ImageElement } from './ImageElement';
+import { TextElement } from './TextElement';
+import { TemplateLayer } from './TemplateLayer';
+import { SlotPlaceholder, SlotBoundsGuide } from './SlotPlaceholder';
+import { memo, useCallback } from 'react';
+import '../../styles/DesignCanvas.css';
+
+const CANVAS_SIZE = 300;
+const HANDLE_PADDING = 40;
+
+export const DesignCanvas = memo(function DesignCanvas({
+  elements, selectedId, onSelect, onDeselect, onUpdate, onCommit,
+  currentTemplate, assignedSlots, getDragBoundFunc,
+}) {
+  const slots = currentTemplate?.slots || [];
+  const stageSize = CANVAS_SIZE + HANDLE_PADDING * 2;
+
+  const constrainTransform = useCallback((oldBox, newBox) => {
+    // During rotation the drag-bound func handles containment
+    if (Math.abs(oldBox.rotation - newBox.rotation) > 0.001) return newBox;
+
+    const cos = Math.cos(newBox.rotation);
+    const sin = Math.sin(newBox.rotation);
+
+    function getCorners({ x, y, width: w, height: h }) {
+      return [
+        [x, y],
+        [x + w * cos, y + w * sin],
+        [x + w * cos - h * sin, y + w * sin + h * cos],
+        [x - h * sin, y + h * cos],
+      ];
+    }
+
+    const nc = getCorners(newBox);
+    const inBounds = nc.every(
+      ([cx, cy]) => cx >= 0 && cx <= CANVAS_SIZE && cy >= 0 && cy <= CANVAS_SIZE
+    );
+    if (inBounds) return newBox;
+
+    // With constant rotation, every corner coordinate is linear in t (0→old, 1→new).
+    // Find the largest t where all corners stay within [0, CANVAS_SIZE].
+    const oc = getCorners(oldBox);
+    let maxT = 1;
+
+    for (let i = 0; i < 4; i++) {
+      for (let j = 0; j < 2; j++) {
+        const a = oc[i][j];
+        const delta = nc[i][j] - a;
+        if (Math.abs(delta) < 0.001) continue;
+        const limit = delta > 0 ? CANVAS_SIZE : 0;
+        const t = (limit - a) / delta;
+        if (t > 0 && t < maxT) maxT = t;
+      }
+    }
+
+    if (maxT < 0.001) return oldBox;
+
+    return {
+      x: oldBox.x + (newBox.x - oldBox.x) * maxT,
+      y: oldBox.y + (newBox.y - oldBox.y) * maxT,
+      width: oldBox.width + (newBox.width - oldBox.width) * maxT,
+      height: oldBox.height + (newBox.height - oldBox.height) * maxT,
+      rotation: newBox.rotation,
+    };
+  }, []);
+
+  // Regular function so Konva can bind `this` to the dragged node,
+  // letting us read width/height/rotation to compute the rotated bounding box.
+  const canvasDragBound = useCallback(function (pos) {
+    const w = this.width();
+    const h = this.height();
+    const rad = (this.rotation() * Math.PI) / 180;
+    const cos = Math.cos(rad);
+    const sin = Math.sin(rad);
+
+    const cornersX = [0, w * cos, w * cos - h * sin, -h * sin];
+    const cornersY = [0, w * sin, w * sin + h * cos, h * cos];
+
+    const minX = Math.min(...cornersX);
+    const maxX = Math.max(...cornersX);
+    const minY = Math.min(...cornersY);
+    const maxY = Math.max(...cornersY);
+
+    return {
+      x: Math.max(HANDLE_PADDING - minX, Math.min(pos.x, HANDLE_PADDING + CANVAS_SIZE - maxX)),
+      y: Math.max(HANDLE_PADDING - minY, Math.min(pos.y, HANDLE_PADDING + CANVAS_SIZE - maxY)),
+    };
+  }, []);
+
+  return (
+    <div className="design-canvas-wrapper">
+      <TShirtSVG size={CANVAS_SIZE} />
+      <div className={`design-canvas-border${selectedId ? ' selected' : ''}`} />
+      <Stage
+        width={stageSize} height={stageSize}
+        onClick={onDeselect} onTap={onDeselect}
+        className="design-canvas-stage"
+      >
+        <Layer x={HANDLE_PADDING} y={HANDLE_PADDING}>
+          {currentTemplate && <TemplateLayer template={currentTemplate} canvasSize={CANVAS_SIZE} />}
+        </Layer>
+        <Layer x={HANDLE_PADDING} y={HANDLE_PADDING} listening={false}>
+          {slots.map((slot) => <SlotBoundsGuide key={slot.id} slot={slot} />)}
+        </Layer>
+        <Layer x={HANDLE_PADDING} y={HANDLE_PADDING}>
+          {elements.map((el) => {
+            if (el.type === 'image') {
+              return (
+                <ImageElement key={el.id} id={el.id} x={el.x} y={el.y} width={el.width} height={el.height}
+                  rotation={el.rotation} src={el.src} crop={el.crop} isSelected={el.id === selectedId}
+                  onSelect={() => (el.id === selectedId ? onDeselect?.() : onSelect(el.id))}
+                  onUpdate={(attrs) => onUpdate(el.id, attrs)}
+                  onCommit={onCommit}
+                  dragBoundFunc={canvasDragBound}
+                  transformBoundFunc={constrainTransform}
+                />
+              );
+            }
+            if (el.type === 'text') {
+              return (
+                <TextElement key={el.id} id={el.id} x={el.x} y={el.y} text={el.text} fontSize={el.fontSize}
+                  fontFamily={el.fontFamily} fill={el.fill} rotation={el.rotation} isSelected={el.id === selectedId}
+                  onSelect={() => (el.id === selectedId ? onDeselect?.() : onSelect(el.id))}
+                  onUpdate={(attrs) => onUpdate(el.id, attrs)}
+                  onCommit={onCommit}
+                  dragBoundFunc={canvasDragBound}
+                  transformBoundFunc={constrainTransform}
+                />
+              );
+            }
+            return null;
+          })}
+        </Layer>
+        <Layer x={HANDLE_PADDING} y={HANDLE_PADDING} listening={false}>
+          {slots.map((slot) => <SlotPlaceholder key={slot.id} slot={slot} isEmpty={!assignedSlots?.[slot.id]} />)}
+        </Layer>
+      </Stage>
+      <div className="design-canvas-info">
+        Design Area: 15" × 15" • Export: 4500 × 4500px @ 300 DPI
+      </div>
+    </div>
+  );
+});
--- a/src/components/canvas/ImageElement.jsx
+++ b/src/components/canvas/ImageElement.jsx
@@ -0,0 +1,114 @@
+import { useEffect, useRef, memo, useCallback } from 'react';
+import { Image, Transformer } from 'react-konva';
+import useImage from 'use-image';
+
+function URLImage({ src, innerRef, ...props }) {
+  const [img] = useImage(src, 'anonymous');
+  return <Image image={img} ref={innerRef} {...props} />;
+}
+
+export const ImageElement = memo(function ImageElement({
+  id: _id,
+  x = 0,
+  y = 0,
+  width = 100,
+  height = 100,
+  rotation = 0,
+  src,
+  crop,
+  isSelected,
+  onSelect,
+  onUpdate,
+  onCommit,
+  dragBoundFunc,
+  transformBoundFunc,
+}) {
+  const shapeRef = useRef(null);
+  const trRef = useRef(null);
+
+  const attachTransformer = useCallback(() => {
+    if (!isSelected) return;
+    const transformer = trRef.current;
+    const shape = shapeRef.current;
+    if (!transformer || !shape) return;
+
+    transformer.nodes([shape]);
+    transformer.getLayer()?.batchDraw();
+  }, [isSelected]);
+
+  const setTransformerRef = useCallback(
+    (node) => {
+      trRef.current = node;
+      attachTransformer();
+    },
+    [attachTransformer]
+  );
+
+  useEffect(() => {
+    attachTransformer();
+  }, [attachTransformer]);
+
+  return (
+    <>
+      <URLImage
+        innerRef={shapeRef}
+        x={x}
+        y={y}
+        width={width}
+        height={height}
+        rotation={rotation}
+        src={src}
+        crop={
+          crop
+            ? { x: crop.sx, y: crop.sy, width: crop.sWidth, height: crop.sHeight }
+            : undefined
+        }
+        draggable
+        dragBoundFunc={dragBoundFunc}
+        onClick={(e) => {
+          e.cancelBubble = true;
+          onSelect?.();
+        }}
+        onTap={(e) => {
+          e.cancelBubble = true;
+          onSelect?.();
+        }}
+        onDragEnd={(e) => {
+          onUpdate({ x: e.target.x(), y: e.target.y() });
+          onCommit?.();
+        }}
+        onTransformEnd={() => {
+          const node = shapeRef.current;
+          if (!node) return;
+          const scaleX = node.scaleX();
+          const scaleY = node.scaleY();
+          node.scaleX(1);
+          node.scaleY(1);
+          onUpdate({
+            x: node.x(),
+            y: node.y(),
+            width: Math.max(20, node.width() * scaleX),
+            height: Math.max(20, node.height() * scaleY),
+            rotation: node.rotation(),
+          });
+          onCommit?.();
+        }}
+      />
+      {isSelected && (
+        <Transformer
+          ref={setTransformerRef}
+          keepRatio
+          boundBoxFunc={(oldBox, newBox) => {
+            if (Math.abs(newBox.width) < 20 || Math.abs(newBox.height) < 20) return oldBox;
+            return transformBoundFunc ? transformBoundFunc(oldBox, newBox) : newBox;
+          }}
+          anchorSize={8}
+          anchorCornerRadius={4}
+          borderStroke="#38bdf8"
+          anchorStroke="#38bdf8"
+          anchorFill="#ffffff"
+        />
+      )}
+    </>
+  );
+});
--- a/src/components/canvas/SlotPlaceholder.jsx
+++ b/src/components/canvas/SlotPlaceholder.jsx
@@ -0,0 +1,33 @@
+import { Group, Rect, Text, Line } from 'react-konva';
+
+export function SlotPlaceholder({ slot, isEmpty = true }) {
+  const { bounds, label } = slot;
+  const { x, y, width, height } = bounds;
+  if (!isEmpty) return null;
+
+  return (
+    <Group name={`slot-placeholder-${slot.id}`}>
+      <Rect x={x} y={y} width={width} height={height} stroke="#94a3b8" strokeWidth={2} dash={[8, 4]} cornerRadius={4} listening={false} />
+      <Rect x={x} y={y} width={width} height={height} fill="rgba(148, 163, 184, 0.1)" listening={false} />
+      <Text text="📷" x={x + width / 2} y={y + height / 2 - 20} fontSize={24} align="center" offsetX={12} listening={false} />
+      <Text text={label || 'Drop image here'} x={x + width / 2} y={y + height / 2 + 10} fontSize={11} fontFamily="DM Sans" fill="#64748b" align="center" offsetX={width / 2} listening={false} />
+      <Line points={[x, y, x + 20, y]} stroke="#38bdf8" strokeWidth={3} lineCap="round" listening={false} />
+      <Line points={[x, y, x, y + 20]} stroke="#38bdf8" strokeWidth={3} lineCap="round" listening={false} />
+      <Line points={[x + width, y, x + width - 20, y]} stroke="#38bdf8" strokeWidth={3} lineCap="round" listening={false} />
+      <Line points={[x + width, y, x + width, y + 20]} stroke="#38bdf8" strokeWidth={3} lineCap="round" listening={false} />
+      <Line points={[x, y + height, x + 20, y + height]} stroke="#38bdf8" strokeWidth={3} lineCap="round" listening={false} />
+      <Line points={[x, y + height, x, y + height - 20]} stroke="#38bdf8" strokeWidth={3} lineCap="round" listening={false} />
+      <Line points={[x + width, y + height, x + width - 20, y + height]} stroke="#38bdf8" strokeWidth={3} lineCap="round" listening={false} />
+      <Line points={[x + width, y + height, x + width, y + height - 20]} stroke="#38bdf8" strokeWidth={3} lineCap="round" listening={false} />
+    </Group>
+  );
+}
+
+export function SlotBoundsGuide({ slot }) {
+  const { bounds, id } = slot;
+  return (
+    <Group name={`slot-bounds-${id}`} listening={false}>
+      <Rect x={bounds.x} y={bounds.y} width={bounds.width} height={bounds.height} stroke="rgba(56, 189, 248, 0.3)" strokeWidth={1} dash={[4, 4]} cornerRadius={2} />
+    </Group>
+  );
+}
--- a/src/components/canvas/TShirtSVG.jsx
+++ b/src/components/canvas/TShirtSVG.jsx
@@ -0,0 +1,16 @@
+import '../../styles/TShirtSVG.css';
+
+export function TShirtSVG({ size = 300 }) {
+  const padding = size * 0.1;
+  const innerSize = size - padding * 2;
+
+  return (
+    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}
+      className="tshirt-svg">
+      <path d={`M ${padding} ${padding + innerSize * 0.15} L ${padding + innerSize * 0.15} ${padding} L ${size - padding - innerSize * 0.15} ${padding} L ${size - padding} ${padding + innerSize * 0.15} L ${size - padding} ${size - padding} L ${padding} ${size - padding} Z`}
+        fill="none" stroke="var(--border)" strokeWidth="2" strokeDasharray="4,4" />
+      <rect x={size * 0.3} y={size * 0.25} width={size * 0.4} height={size * 0.35} fill="none" stroke="var(--accent)" strokeWidth="1.5" opacity="0.5" />
+      <text x={size / 2} y={size * 0.45} textAnchor="middle" fill="var(--text-muted)" fontSize="10" fontFamily="var(--font-mono)">Print Zone</text>
+    </svg>
+  );
+}
--- a/src/components/canvas/TemplateLayer.jsx
+++ b/src/components/canvas/TemplateLayer.jsx
@@ -0,0 +1,37 @@
+import { Group, Image as KonvaImage, Rect, Text as KonvaText } from 'react-konva';
+import useImage from 'use-image';
+
+function TemplateImage({ src, x, y, width, height, opacity = 1, listening = false }) {
+  const [img] = useImage(src, 'anonymous');
+  return <KonvaImage image={img} x={x} y={y} width={width} height={height} opacity={opacity} listening={listening} />;
+}
+
+function TemplateText({ text, x, y, fontSize, fontFamily, fill, rotation = 0 }) {
+  return <KonvaText text={text} x={x} y={y} fontSize={fontSize} fontFamily={fontFamily} fill={fill} rotation={rotation} listening={false} />;
+}
+
+export function TemplateLayer({ template, canvasSize = 300 }) {
+  if (!template) return null;
+  const { background, overlay } = template;
+
+  return (
+    <Group name="template-layer">
+      {background && (
+        <Group name="template-background">
+          {background.type === 'color' ? (
+            <Rect x={0} y={0} width={canvasSize} height={canvasSize} fill={background.color} listening={false} />
+          ) : background.type === 'image' ? (
+            <TemplateImage src={background.src} x={0} y={0} width={canvasSize} height={canvasSize} listening={false} />
+          ) : null}
+        </Group>
+      )}
+      {overlay && overlay.map((el, index) => {
+        if (el.nonPrintable) return null;
+        const key = `overlay-${index}`;
+        if (el.type === 'image') return <TemplateImage key={key} src={el.src} x={el.x || 0} y={el.y || 0} width={el.width || 100} height={el.height || 100} opacity={el.opacity} listening={false} />;
+        if (el.type === 'text') return <TemplateText key={key} text={el.text} x={el.x || 0} y={el.y || 0} fontSize={el.fontSize} fontFamily={el.fontFamily} fill={el.fill} rotation={el.rotation} />;
+        return null;
+      })}
+    </Group>
+  );
+}
--- a/src/components/canvas/TextElement.jsx
+++ b/src/components/canvas/TextElement.jsx
@@ -0,0 +1,99 @@
+import { useEffect, useRef, memo, useCallback } from 'react';
+import { Text, Transformer } from 'react-konva';
+
+export const TextElement = memo(function TextElement({
+  id: _id,
+  x = 0,
+  y = 0,
+  text = '',
+  fontSize = 24,
+  fontFamily = 'DM Sans',
+  fill = '#0f172a',
+  rotation = 0,
+  isSelected,
+  onSelect,
+  onUpdate,
+  onCommit,
+  dragBoundFunc,
+  transformBoundFunc,
+}) {
+  const textRef = useRef(null);
+  const trRef = useRef(null);
+
+  const attachTransformer = useCallback(() => {
+    if (!isSelected) return;
+    const transformer = trRef.current;
+    const node = textRef.current;
+    if (!transformer || !node) return;
+
+    transformer.nodes([node]);
+    transformer.getLayer()?.batchDraw();
+  }, [isSelected]);
+
+  const setTransformerRef = useCallback(
+    (node) => {
+      trRef.current = node;
+      attachTransformer();
+    },
+    [attachTransformer]
+  );
+
+  useEffect(() => {
+    attachTransformer();
+  }, [attachTransformer]);
+
+  return (
+    <>
+      <Text
+        ref={textRef}
+        x={x}
+        y={y}
+        text={text}
+        fontSize={fontSize}
+        fontFamily={fontFamily}
+        fill={fill}
+        rotation={rotation}
+        draggable
+        dragBoundFunc={dragBoundFunc}
+        onClick={(e) => {
+          e.cancelBubble = true;
+          onSelect?.();
+        }}
+        onTap={(e) => {
+          e.cancelBubble = true;
+          onSelect?.();
+        }}
+        onDragEnd={(e) => {
+          onUpdate({ x: e.target.x(), y: e.target.y() });
+          onCommit?.();
+        }}
+        onTransformEnd={() => {
+          const node = textRef.current;
+          if (!node) return;
+          const scaleX = node.scaleX();
+          node.scaleX(1);
+          node.scaleY(1);
+          onUpdate({
+            x: node.x(),
+            y: node.y(),
+            fontSize: Math.max(12, node.fontSize() * scaleX),
+            rotation: node.rotation(),
+          });
+          onCommit?.();
+        }}
+      />
+      {isSelected && (
+        <Transformer
+          ref={setTransformerRef}
+          enabledAnchors={['top-left', 'top-right', 'bottom-left', 'bottom-right']}
+          boundBoxFunc={transformBoundFunc}
+          anchorSize={8}
+          anchorCornerRadius={4}
+          borderStroke="#38bdf8"
+          anchorStroke="#38bdf8"
+          anchorFill="#ffffff"
+        />
+      )}
+    </>
+  );
+});
--- a/client/src/components/canvas/index.js
+++ b/client/src/components/canvas/index.js
@@ -2,3 +2,5 @@ export { DesignCanvas } from './DesignCanvas';
 export { TShirtSVG } from './TShirtSVG';
 export { ImageElement } from './ImageElement';
 export { TextElement } from './TextElement';
+export { TemplateLayer } from './TemplateLayer';
+export { SlotPlaceholder, SlotBoundsGuide } from './SlotPlaceholder';
--- a/src/components/editor/PhotoPreEditor.jsx
+++ b/src/components/editor/PhotoPreEditor.jsx
@@ -0,0 +1,95 @@
+import { useEffect, useRef } from 'react';
+import FilerobotImageEditor, { TABS } from 'react-filerobot-image-editor';
+import { StyleSheetManager } from 'styled-components';
+import isPropValid from '@emotion/is-prop-valid';
+import '../../styles/PhotoPreEditor.css';
+
+export function PhotoPreEditor({ imageSrc, onComplete, onClose }) {
+  const modalContentRef = useRef(null);
+  const previousFocusRef = useRef(null);
+
+  useEffect(() => {
+    previousFocusRef.current = document.activeElement;
+    const handleKeyDown = (e) => { if (e.key === 'Escape') onClose(); };
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+      previousFocusRef.current?.focus();
+    };
+  }, [onClose]);
+
+  const base64ToBlob = (base64DataUrl) => {
+    const [header, data] = base64DataUrl.split(',');
+    const mimeMatch = header?.match(/data:(.*?);base64/);
+    const mime = mimeMatch?.[1] || 'image/png';
+    const binary = atob(data || '');
+    const bytes = new Uint8Array(binary.length);
+    for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i);
+    return new Blob([bytes], { type: mime });
+  };
+
+  const handleSave = async (savedImageData) => {
+    try {
+      // Prefer base64 when available (works without CORS/network).
+      if (savedImageData?.imageBase64) {
+        const blob = base64ToBlob(savedImageData.imageBase64);
+        onComplete(URL.createObjectURL(blob));
+        return;
+      }
+
+      // Fallback to canvas when provided by the library.
+      if (savedImageData?.imageCanvas instanceof HTMLCanvasElement) {
+        const blob = await new Promise((resolve) =>
+          savedImageData.imageCanvas.toBlob(resolve, savedImageData.mimeType || 'image/png', savedImageData.quality),
+        );
+        if (blob) onComplete(URL.createObjectURL(blob));
+        else throw new Error('Canvas export failed');
+        return;
+      }
+
+      // Final fallback: cloudimageUrl (fetch then blob).
+      if (savedImageData?.cloudimageUrl) {
+        const res = await fetch(savedImageData.cloudimageUrl);
+        const blob = await res.blob();
+        onComplete(URL.createObjectURL(blob));
+        return;
+      }
+
+      throw new Error('No export data returned from image editor');
+    } catch (error) {
+      console.error('Export failed:', error);
+      onClose();
+    }
+  };
+
+  return (
+    <div className="filerobot-overlay" role="dialog" aria-modal="true" aria-labelledby="photo-editor-title">
+      <div className="filerobot-container" ref={modalContentRef} role="document">
+        <StyleSheetManager
+          // Filerobot/@scaleflex styled-components pass a bunch of styling props to DOM nodes (e.g. isPhoneScreen).
+          // Filtering them here prevents noisy React console warnings.
+          shouldForwardProp={(prop, element) => (typeof element === 'string' ? isPropValid(prop) : true)}
+        >
+          <FilerobotImageEditor
+            source={imageSrc}
+            onBeforeSave={() => false}
+            onSave={handleSave}
+            onClose={() => onClose()}
+            tabsIds={[TABS.ADJUST, TABS.FILTERS, TABS.FINETUNE]}
+            defaultTabId={TABS.ADJUST}
+            Crop={{ autoResize: true, defaultSizePercentage: 1, ratio: 'custom' }}
+            theme={{ accentColor: '#38bdf8', palettePrimary: '#38bdf8' }}
+            forceToPngInEllipticalCrop
+            closeAfterSave
+            defaultSavedImageName="edited-image"
+            defaultSavedImageType="png"
+            defaultSavedImageQuality={1}
+            savingPixelRatio={4}
+            previewPixelRatio={4}
+          />
+        </StyleSheetManager>
+      </div>
+      <h2 id="photo-editor-title" className="sr-only">Photo Editor</h2>
+    </div>
+  );
+}
--- a/client/src/components/editor/index.js
+++ b/client/src/components/editor/index.js
--- a/src/components/panels/LayersPanel.jsx
+++ b/src/components/panels/LayersPanel.jsx
@@ -0,0 +1,32 @@
+import { memo } from 'react';
+import '../../styles/LayersPanel.css';
+
+export const LayersPanel = memo(function LayersPanel({ elements, selectedId, onSelect, onDelete }) {
+  const getIcon = (el) => el.type === 'image' ? (el.bgRemoved ? '🖼️' : '📷') : el.type === 'text' ? '📝' : '🎨';
+  const getName = (el) => el.type === 'image' ? (el.bgRemoved ? 'Image (BG ✓)' : 'Image') : el.type === 'text' ? (el.text?.substring(0, 20) || 'Text') : 'Sticker';
+
+  if (elements.length === 0) {
+    return <div className="layers-empty">No elements yet. Add images, text, or stickers to your design.</div>;
+  }
+
+  return (
+    <div>
+      <h3 className="layers-title">Layers ({elements.length})</h3>
+      <div className="layers-list">
+        {elements.map((element) => (
+          <div key={element.id} onClick={() => onSelect(element.id)}
+            className={`layers-item${selectedId === element.id ? ' selected' : ''}`}>
+            <span className="layers-item-icon">{getIcon(element)}</span>
+            <span className={`layers-item-name${selectedId === element.id ? ' selected' : ''}`}>
+              {getName(element)}
+            </span>
+            <button onClick={(e) => { e.stopPropagation(); onDelete(element.id); }}
+              className="layers-item-delete">
+              ×
+            </button>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+});
--- a/src/components/panels/PropertiesPanel.jsx
+++ b/src/components/panels/PropertiesPanel.jsx
@@ -0,0 +1,110 @@
+import { memo } from 'react';
+import { BackgroundRemovalButton } from '../sidebar/BackgroundRemovalButton';
+import '../../styles/PropertiesPanel.css';
+
+export const PropertiesPanel = memo(function PropertiesPanel({ element, onUpdate, onDelete, onEditPhoto }) {
+  if (!element) {
+    return (
+      <div className="properties-panel">
+        <div className="properties-panel__header">
+          <h3 className="properties-panel__title">Properties</h3>
+        </div>
+        <div className="properties-panel__empty">
+          Select an element to edit its properties
+        </div>
+      </div>
+    );
+  }
+
+  const handlePositionChange = (axis, value) => onUpdate({ [axis]: parseFloat(value) || 0 });
+  const handleSizeChange = (axis, value) => onUpdate({ [axis]: Math.max(20, parseFloat(value) || 20) });
+  const handleRotationChange = (value) => onUpdate({ rotation: Math.max(-180, Math.min(180, parseFloat(value) || 0)) });
+
+  return (
+    <div className="properties-panel">
+      <div className="properties-panel__header">
+        <h3 className="properties-panel__title">Properties</h3>
+      </div>
+
+      <div className="properties-panel__body">
+        <div className="properties-panel__type-badge">
+          {element.type}
+        </div>
+
+        {/* Position */}
+        <div className="properties-panel__section">
+          <label className="properties-panel__label">Position</label>
+          <div className="properties-panel__row">
+            <div className="properties-panel__field">
+              <label className="properties-panel__axis-label">X</label>
+              <input type="number" value={Math.round(element.x)} onChange={(e) => handlePositionChange('x', e.target.value)} className="properties-panel__input" />
+            </div>
+            <div className="properties-panel__field">
+              <label className="properties-panel__axis-label">Y</label>
+              <input type="number" value={Math.round(element.y)} onChange={(e) => handlePositionChange('y', e.target.value)} className="properties-panel__input" />
+            </div>
+          </div>
+        </div>
+
+        {/* Size (for images and stickers) */}
+        {(element.type === 'image' || element.type === 'sticker') && (
+          <div className="properties-panel__section">
+            <label className="properties-panel__label">Size</label>
+            <div className="properties-panel__row">
+              <div className="properties-panel__field">
+                <label className="properties-panel__axis-label">W</label>
+                <input type="number" value={Math.round(element.width)} onChange={(e) => handleSizeChange('width', e.target.value)} className="properties-panel__input" />
+              </div>
+              <div className="properties-panel__field">
+                <label className="properties-panel__axis-label">H</label>
+                <input type="number" value={Math.round(element.height)} onChange={(e) => handleSizeChange('height', e.target.value)} className="properties-panel__input" />
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* Edit Photo button (user uploads only, not stickers) */}
+        {element.type === 'image' && !element.emoji && onEditPhoto && (
+          <div className="properties-panel__section">
+            <button onClick={() => onEditPhoto(element)} className="properties-panel__edit-btn">
+              ✏️ Edit Photo
+            </button>
+          </div>
+        )}
+
+        {/* Text-specific controls */}
+        {element.type === 'text' && (
+          <>
+            <div className="properties-panel__section">
+              <label className="properties-panel__label">Font Size: {Math.round(element.fontSize)}px</label>
+              <input type="range" min="12" max="120" value={element.fontSize} onChange={(e) => onUpdate({ fontSize: parseInt(e.target.value, 10) })} className="properties-panel__range" />
+            </div>
+            <div className="properties-panel__section">
+              <label className="properties-panel__label">Color</label>
+              <input type="color" value={element.fill} onChange={(e) => onUpdate({ fill: e.target.value })} className="properties-panel__color-input" />
+            </div>
+          </>
+        )}
+
+        {/* Rotation */}
+        <div className="properties-panel__section">
+          <label className="properties-panel__label">Rotation: {Math.round(element.rotation)}°</label>
+          <input type="range" min="-180" max="180" value={element.rotation} onChange={(e) => handleRotationChange(e.target.value)} className="properties-panel__range" />
+        </div>
+
+        {/* Background Removal (user uploads only, not stickers) */}
+        {element.type === 'image' && !element.emoji && (
+          <BackgroundRemovalButton
+            selectedElement={element}
+            onUpdate={(_id, attrs) => onUpdate(attrs)}
+          />
+        )}
+
+        {/* Delete */}
+        <button onClick={() => onDelete(element.id)} className="properties-panel__delete-btn">
+          Delete Element
+        </button>
+      </div>
+    </div>
+  );
+});
--- a/client/src/components/panels/index.js
+++ b/client/src/components/panels/index.js
--- a/src/components/sidebar/BackgroundRemovalButton.jsx
+++ b/src/components/sidebar/BackgroundRemovalButton.jsx
@@ -0,0 +1,23 @@
+import { useBackgroundRemoval } from '../../hooks/useBackgroundRemoval';
+
+export function BackgroundRemovalButton({ selectedElement, onUpdate }) {
+  const { loading, progress, hasModel, loadModel, removeBackground } = useBackgroundRemoval();
+
+  const handleRemoveBackground = async () => {
+    if (!selectedElement || selectedElement.type !== 'image') return;
+    if (!hasModel) { const loaded = await loadModel(); if (!loaded) return; }
+    const resultUrl = await removeBackground(selectedElement.src);
+    if (resultUrl) onUpdate(selectedElement.id, { src: resultUrl, bgRemoved: true });
+  };
+
+  if (!selectedElement || selectedElement.type !== 'image') return null;
+
+  return (
+    <div className="bg-removal-container">
+      <button className="bg-removal-btn" onClick={handleRemoveBackground} disabled={loading}>
+        {loading ? (<><div className="spinner-small" />{progress > 0 ? `Loading: ${progress}%` : 'Removing Background...'}</>) : (<>✨ Remove Background</>)}
+      </button>
+      {!hasModel && <p className="bg-removal-hint">First use requires downloading ~86MB model. Subsequent uses are cached.</p>}
+    </div>
+  );
+}
--- a/src/components/sidebar/Sidebar.jsx
+++ b/src/components/sidebar/Sidebar.jsx
@@ -0,0 +1,42 @@
+import { useState } from 'react';
+import { UploadTab } from './UploadTab';
+import { StickersTab } from './StickersTab';
+import { TextTab } from './TextTab';
+import { TemplatesTab } from './TemplatesTab';
+import '../../styles/Sidebar.css';
+
+const TABS = [
+  { id: 'upload', label: 'Upload', icon: '📁' },
+  { id: 'stickers', label: 'Stickers', icon: '🎨' },
+  { id: 'text', label: 'Text', icon: '📝' },
+  { id: 'templates', label: 'Templates', icon: '📋' },
+];
+
+export function Sidebar({ onAddImage, onAddSticker, onAddText, onAddTemplate, onSlotImageUpload }) {
+  const [activeTab, setActiveTab] = useState('upload');
+
+  const renderTabContent = () => {
+    switch (activeTab) {
+      case 'upload': return <UploadTab onAddImage={onAddImage} />;
+      case 'stickers': return <StickersTab onAddSticker={onAddSticker} />;
+      case 'text': return <TextTab onAddText={onAddText} />;
+      case 'templates': return <TemplatesTab onAddTemplate={onAddTemplate} onSlotImageUpload={onSlotImageUpload} />;
+      default: return null;
+    }
+  };
+
+  return (
+    <div className="sidebar">
+      <div className="sidebar-tabs">
+        {TABS.map((tab) => (
+          <button key={tab.id} onClick={() => setActiveTab(tab.id)}
+            className={`sidebar-tab-btn${activeTab === tab.id ? ' active' : ''}`}>
+            <div className="sidebar-tab-icon">{tab.icon}</div>
+            {tab.label}
+          </button>
+        ))}
+      </div>
+      <div className="sidebar-content">{renderTabContent()}</div>
+    </div>
+  );
+}
--- a/src/components/sidebar/StickersTab.jsx
+++ b/src/components/sidebar/StickersTab.jsx
@@ -0,0 +1,54 @@
+import { useState } from 'react';
+import { STICKERS, STICKER_CATEGORIES } from '../../constants/stickers';
+import '../../styles/StickersTab.css';
+
+export function StickersTab({ onAddSticker }) {
+  const [activeCategory, setActiveCategory] = useState('all');
+
+  const filteredStickers = activeCategory === 'all'
+    ? STICKERS
+    : STICKERS.filter(s => s.category === activeCategory);
+
+  const handleAddSticker = (emoji) => {
+    const canvas = document.createElement('canvas');
+    const size = 100;
+    canvas.width = size;
+    canvas.height = size;
+    const ctx = canvas.getContext('2d');
+    ctx.font = `${size * 0.8}px Arial`;
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+    ctx.fillText(emoji, size / 2, size / 2);
+
+    onAddSticker({
+      type: 'image',
+      x: 125, y: 125, width: 80, height: 80, rotation: 0,
+      src: canvas.toDataURL('image/png'),
+      emoji,
+    });
+  };
+
+  return (
+    <div>
+      <h3 className="stickers-title">Stickers</h3>
+      <div className="stickers-categories">
+        {STICKER_CATEGORIES.map((cat) => (
+          <button key={cat} onClick={() => setActiveCategory(cat)}
+            className={`stickers-category-btn${activeCategory === cat ? ' active' : ''}`}
+          >
+            {cat}
+          </button>
+        ))}
+      </div>
+      <div className="stickers-grid">
+        {filteredStickers.map((sticker, index) => (
+          <button key={index} onClick={() => handleAddSticker(sticker.emoji)}
+            className="sticker-btn"
+          >
+            {sticker.emoji}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}
--- a/src/components/sidebar/TemplatesTab.jsx
+++ b/src/components/sidebar/TemplatesTab.jsx
@@ -0,0 +1,107 @@
+import { useState } from 'react';
+import { TEMPLATES, TEMPLATE_CATEGORIES } from '../../constants/templates';
+import '../../styles/TemplatesTab.css';
+
+function getCategoryEmoji(category) {
+  const emojis = {
+    Sports: '⚽', Music: '🎸', Quotes: '💬', Animals: '🐱',
+    Abstract: '🌈', Vintage: '🏅', Nature: '🏔️', Tech: '💻',
+  };
+  return emojis[category] || '🎨';
+}
+
+export function TemplatesTab({ onAddTemplate, onSlotImageUpload }) {
+  const [selectedTemplateId, setSelectedTemplateId] = useState(null);
+  const [uploadSlotId, setUploadSlotId] = useState(null);
+
+  const templates = [
+    { id: 'freeform', name: 'Freeform', description: 'No template - design freely', thumbnail: '🎨' },
+    ...TEMPLATES.map(t => ({
+      id: t.id,
+      name: t.name,
+      description: t.description,
+      thumbnail: getCategoryEmoji(t.category),
+      hasSlots: !!t.slots,
+    })),
+  ];
+
+  const handleSelectTemplate = (template) => {
+    setSelectedTemplateId(template.id);
+    onAddTemplate(template.id);
+  };
+
+  const handleSlotClick = (slotId) => {
+    setUploadSlotId(slotId);
+    document.getElementById('slot-file-input')?.click();
+  };
+
+  const handleFileChange = (e) => {
+    const file = e.target.files?.[0];
+    if (file && uploadSlotId) {
+      const reader = new FileReader();
+      reader.onload = (event) => {
+        onSlotImageUpload?.(uploadSlotId, event.target.result);
+      };
+      reader.readAsDataURL(file);
+    }
+    e.target.value = '';
+    setUploadSlotId(null);
+  };
+
+  const selectedTemplate = TEMPLATES.find(t => t.id === selectedTemplateId);
+  const slots = selectedTemplate?.slots || [];
+
+  return (
+    <div>
+      <input id="slot-file-input" type="file" accept="image/*" onChange={handleFileChange} className="templates-hidden-input" />
+
+      <h3 className="templates-title">Templates</h3>
+
+      <div className="templates-description">
+        Choose a template to get started or design freely.
+      </div>
+
+      <div className="templates-list">
+        {templates.map((template) => (
+          <button
+            key={template.id}
+            onClick={() => handleSelectTemplate(template)}
+            className={`template-btn${template.id === selectedTemplateId ? ' selected' : ''}`}
+          >
+            <div className="template-thumbnail">
+              {template.thumbnail}
+            </div>
+            <div className="template-info">
+              <div className="template-name">{template.name}</div>
+              <div className="template-desc">{template.description}</div>
+            </div>
+            {template.hasSlots && (
+              <span className="template-slots-badge">SLOTS</span>
+            )}
+          </button>
+        ))}
+      </div>
+
+      {selectedTemplateId && selectedTemplateId !== 'freeform' && slots.length > 0 && (
+        <div className="template-slots-section">
+          <h4 className="template-slots-title">Template Slots</h4>
+          <div className="template-slots-list">
+            {slots.map((slot) => (
+              <button
+                key={slot.id}
+                onClick={() => handleSlotClick(slot.id)}
+                className="template-slot-btn"
+              >
+                <span className="template-slot-icon">📷</span>
+                <span>{slot.label}</span>
+                <span className="template-slot-dimensions">
+                  {slot.bounds.width}×{slot.bounds.height}
+                </span>
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
--- a/src/components/sidebar/TextTab.jsx
+++ b/src/components/sidebar/TextTab.jsx
@@ -0,0 +1,53 @@
+import { useState } from 'react';
+import { FONTS } from '../../constants/fonts';
+import '../../styles/TextTab.css';
+
+export function TextTab({ onAddText }) {
+  const [text, setText] = useState('Your text here');
+  const [fontFamily, setFontFamily] = useState('Roboto');
+  const [fontSize, setFontSize] = useState(48);
+  const [fill, setFill] = useState('#0f172a');
+
+  const handleAddText = () => {
+    onAddText({ type: 'text', x: 150, y: 150, text, fontFamily, fontSize, fill, rotation: 0 });
+  };
+
+  return (
+    <div>
+      <h3 className="text-tab-title">Add Text</h3>
+
+      <div className="text-tab-field">
+        <label className="text-tab-label">Text Content</label>
+        <textarea value={text} onChange={(e) => setText(e.target.value)} rows={3} className="text-tab-textarea" />
+      </div>
+
+      <div className="text-tab-field">
+        <label className="text-tab-label">Font</label>
+        <select value={fontFamily} onChange={(e) => setFontFamily(e.target.value)} className="text-tab-select" style={{ fontFamily }}>
+          {FONTS.map((font) => <option key={font.family} value={font.family}>{font.name}</option>)}
+        </select>
+      </div>
+
+      <div className="text-tab-field">
+        <label className="text-tab-label">Font Size: {fontSize}px</label>
+        <input type="range" min="12" max="120" value={fontSize} onChange={(e) => setFontSize(parseInt(e.target.value, 10))} className="text-tab-range" />
+      </div>
+
+      <div className="text-tab-field">
+        <label className="text-tab-label">Color</label>
+        <div className="text-tab-color-group">
+          <input type="color" value={fill} onChange={(e) => setFill(e.target.value)} className="text-tab-color-input" />
+          <input type="text" value={fill} onChange={(e) => setFill(e.target.value)} className="text-tab-color-text" />
+        </div>
+      </div>
+
+      <div className="text-tab-preview">
+        <div className="text-tab-preview-text" style={{ fontFamily, fontSize: `${fontSize * 0.5}px`, color: fill }}>{text}</div>
+      </div>
+
+      <button onClick={handleAddText} className="text-tab-submit">
+        Add Text to Canvas
+      </button>
+    </div>
+  );
+}
--- a/src/components/sidebar/UploadTab.jsx
+++ b/src/components/sidebar/UploadTab.jsx
@@ -0,0 +1,77 @@
+import { useRef, useState } from 'react';
+import '../../styles/UploadTab.css';
+
+export function UploadTab({ onAddImage }) {
+  const fileInputRef = useRef(null);
+  const [isDragging, setIsDragging] = useState(false);
+  const [isUploading, setIsUploading] = useState(false);
+
+  const getImageSize = (src) =>
+    new Promise((resolve, reject) => {
+      const img = new window.Image();
+      img.onload = () => resolve({ width: img.naturalWidth || img.width, height: img.naturalHeight || img.height });
+      img.onerror = () => reject(new Error('Failed to load image'));
+      img.src = src;
+    });
+
+  const handleFiles = async (files) => {
+    const file = files[0];
+    if (!file) return;
+    const validTypes = ['image/jpeg', 'image/png', 'image/webp'];
+    if (!validTypes.includes(file.type)) { alert('Please upload a JPEG, PNG, or WebP image'); return; }
+    if (file.size > 20 * 1024 * 1024) { alert('File size must be under 20MB'); return; }
+
+    setIsUploading(true);
+    try {
+      const formData = new FormData();
+      formData.append('image', file);
+      const response = await fetch('/api/upload', { method: 'POST', body: formData });
+      if (!response.ok) throw new Error('Upload failed');
+      const data = await response.json();
+
+      // Preserve aspect ratio by fitting the image into a 150×150 box.
+      const { width: naturalW, height: naturalH } = await getImageSize(data.preview.url);
+      const maxSide = 150;
+      const scale = Math.min(maxSide / naturalW, maxSide / naturalH, 1);
+      const width = Math.max(20, Math.round(naturalW * scale));
+      const height = Math.max(20, Math.round(naturalH * scale));
+
+      // Canvas is 300×300; start roughly centered.
+      const x = Math.round((300 - width) / 2);
+      const y = Math.round((300 - height) / 2);
+
+      onAddImage({
+        type: 'image',
+        x,
+        y,
+        width,
+        height,
+        rotation: 0,
+        src: data.preview.url,
+        originalUrl: data.original.url,
+      });
+    } catch (error) {
+      console.error('Upload error:', error);
+      alert('Failed to upload image. Please try again.');
+    } finally {
+      setIsUploading(false);
+    }
+  };
+
+  return (
+    <div>
+      <h3 className="upload-tab-title">Upload Image</h3>
+      <div onClick={() => fileInputRef.current?.click()} onDragOver={(e) => { e.preventDefault(); setIsDragging(true); }} onDragLeave={(e) => { e.preventDefault(); setIsDragging(false); }} onDrop={(e) => { e.preventDefault(); setIsDragging(false); handleFiles(e.dataTransfer.files); }}
+        className={`upload-dropzone${isDragging ? ' dragging' : ''}`}>
+        <div className="upload-dropzone-icon">📁</div>
+        <div className="upload-dropzone-text">Click to upload or drag and drop</div>
+        <div className="upload-dropzone-hint">JPEG, PNG, WebP (max 20MB)</div>
+      </div>
+      <input ref={fileInputRef} type="file" accept="image/jpeg,image/png,image/webp" onChange={(e) => handleFiles(e.target.files)} className="upload-hidden-input" />
+      {isUploading && <div className="upload-status">Uploading...</div>}
+      <div className="upload-tip">
+        <strong>Tip:</strong> After uploading, you can remove the background using the background removal tool in the properties panel.
+      </div>
+    </div>
+  );
+}
--- a/client/src/components/sidebar/index.js
+++ b/client/src/components/sidebar/index.js
--- a/client/src/constants/fonts.js
+++ b/client/src/constants/fonts.js
--- a/client/src/constants/stickers.js
+++ b/client/src/constants/stickers.js
--- a/client/src/constants/templates.js
+++ b/client/src/constants/templates.js
@@ -5,6 +5,20 @@ export const TEMPLATES = [
    name: 'Team Sport',
    category: 'Sports',
    description: 'Classic team jersey with number and text',
+    slots: [
+      {
+        id: 'chest-text',
+        label: 'Team Name',
+        bounds: { x: 75, y: 70, width: 150, height: 40 },
+        aspectRatio: 3.75,
+      },
+      {
+        id: 'chest-number',
+        label: 'Number',
+        bounds: { x: 100, y: 120, width: 100, height: 100 },
+        aspectRatio: 1,
+      },
+    ],
    elements: [
      {
        type: 'text',
--- a/src/hooks/index.js
+++ b/src/hooks/index.js
@@ -0,0 +1,4 @@
+export { useDesignEditor } from './useDesignEditor';
+export { useBackgroundRemoval } from './useBackgroundRemoval';
+export { useExport } from './useExport';
+export { useTemplate } from './useTemplate';
--- a/src/hooks/useBackgroundRemoval.js
+++ b/src/hooks/useBackgroundRemoval.js
@@ -0,0 +1,96 @@
+import { useState, useCallback, useRef } from 'react';
+import { AutoModel, AutoProcessor, RawImage, env } from '@huggingface/transformers';
+
+export function useBackgroundRemoval() {
+  const [loading, setLoading] = useState(false);
+  const [progress, setProgress] = useState(0);
+  const [hasModel, setHasModel] = useState(false);
+  const modelRef = useRef(null);
+  const processorRef = useRef(null);
+
+  const loadModel = useCallback(async () => {
+    if (modelRef.current && processorRef.current) return true;
+
+    setLoading(true);
+    setProgress(0);
+
+    try {
+      // Reduce ONNX Runtime Web console noise (node assignment warnings, etc.).
+      // Note: depending on ONNX Runtime build/version, some warnings may still appear.
+      env.backends.onnx.logLevel = 'error';
+
+      modelRef.current = await AutoModel.from_pretrained('briaai/RMBG-1.4', {
+        dtype: 'q8',
+        device: navigator.gpu ? 'webgpu' : 'wasm',
+        progress_callback: (p) => {
+          if (p.progress != null) setProgress(Math.round(p.progress * 50));
+        },
+      });
+
+      processorRef.current = await AutoProcessor.from_pretrained('briaai/RMBG-1.4');
+
+      setProgress(50);
+      setLoading(false);
+      setHasModel(true);
+      return true;
+    } catch (error) {
+      console.error('Failed to load background removal model:', error);
+      setLoading(false);
+      return false;
+    }
+  }, []);
+
+  const removeBackground = useCallback(async (imageSrc) => {
+    if (!modelRef.current || !processorRef.current) {
+      const loaded = await loadModel();
+      if (!loaded) return null;
+    }
+
+    setLoading(true);
+    setProgress(50);
+
+    try {
+      const image = await RawImage.fromURL(imageSrc);
+      const { pixel_values } = await processorRef.current(image);
+
+      setProgress(70);
+
+      const { output } = await modelRef.current({ input: pixel_values });
+
+      setProgress(90);
+
+      const mask = await RawImage.fromTensor(
+        output[0].mul(255).to('uint8')
+      ).resize(image.width, image.height);
+
+      const canvas = document.createElement('canvas');
+      canvas.width = image.width;
+      canvas.height = image.height;
+      const ctx = canvas.getContext('2d');
+
+      ctx.drawImage(await image.toCanvas(), 0, 0);
+
+      const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+      for (let i = 0; i < mask.data.length; i++) {
+        imageData.data[i * 4 + 3] = mask.data[i];
+      }
+      ctx.putImageData(imageData, 0, 0);
+
+      setProgress(100);
+      setLoading(false);
+      return canvas.toDataURL('image/png');
+    } catch (error) {
+      console.error('Background removal failed:', error);
+      setLoading(false);
+      return null;
+    }
+  }, [loadModel]);
+
+  return {
+    loading,
+    progress,
+    hasModel,
+    loadModel,
+    removeBackground,
+  };
+}
--- a/src/hooks/useDesignEditor.js
+++ b/src/hooks/useDesignEditor.js
@@ -0,0 +1,91 @@
+import { useState, useCallback, useRef, useEffect } from 'react';
+
+const MAX_HISTORY = 50;
+const DEBOUNCE_DELAY_MS = 300;
+
+export function useDesignEditor() {
+  const [elements, setElements] = useState([]);
+  const [selectedId, setSelectedId] = useState(null);
+  const [canUndo, setCanUndo] = useState(false);
+  const [canRedo, setCanRedo] = useState(false);
+  const historyRef = useRef([]);
+  const historyIndexRef = useRef(-1);
+  const historyTimerRef = useRef(null);
+  const pendingChangesRef = useRef(null);
+
+  const syncUndoRedo = useCallback(() => {
+    setCanUndo(historyIndexRef.current > 0);
+    setCanRedo(historyIndexRef.current < historyRef.current.length - 1);
+  }, []);
+
+  const saveToHistory = useCallback((newElements) => {
+    if (historyIndexRef.current < historyRef.current.length - 1) {
+      historyRef.current = historyRef.current.slice(0, historyIndexRef.current + 1);
+    }
+    historyRef.current.push(JSON.stringify(newElements));
+    if (historyRef.current.length > MAX_HISTORY) { historyRef.current.shift(); }
+    else { historyIndexRef.current++; }
+    syncUndoRedo();
+  }, [syncUndoRedo]);
+
+  const flushPendingChanges = useCallback(() => {
+    if (pendingChangesRef.current) { saveToHistory(pendingChangesRef.current); pendingChangesRef.current = null; }
+    if (historyTimerRef.current) { clearTimeout(historyTimerRef.current); historyTimerRef.current = null; }
+  }, [saveToHistory]);
+
+  useEffect(() => { return () => { if (historyTimerRef.current) clearTimeout(historyTimerRef.current); }; }, []);
+
+  const addElement = useCallback((element) => {
+    flushPendingChanges();
+    const newElement = { ...element, id: `element-${Date.now()}-${Math.random().toString(36).substr(2, 9)}` };
+    setElements((prev) => { const newElements = [...prev, newElement]; saveToHistory(newElements); return newElements; });
+    setSelectedId(newElement.id);
+    return newElement.id;
+  }, [flushPendingChanges, saveToHistory]);
+
+  const updateElement = useCallback((id, attrs) => {
+    setElements((prev) => {
+      const newElements = prev.map((el) => (el.id === id ? { ...el, ...attrs } : el));
+      pendingChangesRef.current = newElements;
+      if (historyTimerRef.current) clearTimeout(historyTimerRef.current);
+      historyTimerRef.current = setTimeout(() => { flushPendingChanges(); }, DEBOUNCE_DELAY_MS);
+      return newElements;
+    });
+  }, [flushPendingChanges]);
+
+  const deleteElement = useCallback((id) => {
+    flushPendingChanges();
+    setElements((prev) => { const newElements = prev.filter((el) => el.id !== id); saveToHistory(newElements); return newElements; });
+    if (selectedId === id) setSelectedId(null);
+  }, [selectedId, flushPendingChanges, saveToHistory]);
+
+  const selectElement = useCallback((id) => setSelectedId(id), []);
+  const deselectAll = useCallback(() => setSelectedId(null), []);
+  const commitHistory = useCallback(() => flushPendingChanges(), [flushPendingChanges]);
+
+  const undo = useCallback(() => {
+    if (historyIndexRef.current > 0) {
+      historyIndexRef.current--;
+      setElements(JSON.parse(historyRef.current[historyIndexRef.current]));
+      setSelectedId(null);
+      syncUndoRedo();
+    }
+  }, [syncUndoRedo]);
+
+  const redo = useCallback(() => {
+    if (historyIndexRef.current < historyRef.current.length - 1) {
+      historyIndexRef.current++;
+      setElements(JSON.parse(historyRef.current[historyIndexRef.current]));
+      setSelectedId(null);
+      syncUndoRedo();
+    }
+  }, [syncUndoRedo]);
+
+  const initializeHistory = useCallback(() => {
+    historyRef.current = [JSON.stringify([])];
+    historyIndexRef.current = 0;
+    syncUndoRedo();
+  }, [syncUndoRedo]);
+
+  return { elements, selectedId, addElement, updateElement, deleteElement, selectElement, deselectAll, commitHistory, undo, redo, canUndo, canRedo, initializeHistory };
+}
--- a/src/hooks/useExport.js
+++ b/src/hooks/useExport.js
@@ -0,0 +1,47 @@
+import { useState, useCallback } from 'react';
+
+export function useExport() {
+  const [exporting, setExporting] = useState(false);
+  const [progress, setProgress] = useState(0);
+  const [exportUrl, setExportUrl] = useState(null);
+  const [error, setError] = useState(null);
+
+  const exportDesign = useCallback(async (elements, designName = 'design', template = null) => {
+    setExporting(true); setProgress(0); setError(null); setExportUrl(null);
+
+    try {
+      const progressInterval = setInterval(() => { setProgress((prev) => Math.min(prev + 10, 90)); }, 200);
+
+      const response = await fetch('/api/export', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ elements, designName, template }),
+      });
+
+      clearInterval(progressInterval);
+      setProgress(100);
+
+      if (!response.ok) { const errorData = await response.json(); throw new Error(errorData.error || 'Export failed'); }
+
+      const data = await response.json();
+      setExportUrl(data.export.url);
+
+      const link = document.createElement('a');
+      link.href = data.export.url;
+      link.download = data.export.filename;
+      link.click();
+
+      setExporting(false);
+      return data;
+    } catch (err) {
+      console.error('Export failed:', err);
+      setError(err.message);
+      setExporting(false);
+      throw err;
+    }
+  }, []);
+
+  const clearExport = useCallback(() => { setExportUrl(null); setError(null); }, []);
+
+  return { exporting, progress, exportUrl, error, exportDesign, clearExport };
+}
--- a/src/hooks/useTemplate.js
+++ b/src/hooks/useTemplate.js
@@ -0,0 +1,57 @@
+import { useState, useCallback, useRef } from 'react';
+
+export function calculateAutoCrop(imageSize, slotSize) {
+  const imageRatio = imageSize.width / imageSize.height;
+  const slotRatio = slotSize.width / slotSize.height;
+  let sx, sy, sWidth, sHeight;
+  if (imageRatio > slotRatio) { sHeight = imageSize.height; sWidth = imageSize.height * slotRatio; sx = (imageSize.width - sWidth) / 2; sy = 0; }
+  else { sWidth = imageSize.width; sHeight = imageSize.width / slotRatio; sx = 0; sy = (imageSize.height - sHeight) / 2; }
+  return { sx, sy, sWidth, sHeight };
+}
+
+export function createDragBoundFunc(slot, elementSize) {
+  const { bounds } = slot;
+  const minX = bounds.x, minY = bounds.y;
+  const maxX = bounds.x + bounds.width - elementSize.width;
+  const maxY = bounds.y + bounds.height - elementSize.height;
+  return (_oldBox, newBox) => ({ x: Math.max(minX, Math.min(newBox.x, maxX)), y: Math.max(minY, Math.min(newBox.y, maxY)), width: newBox.width, height: newBox.height });
+}
+
+export function useTemplate(templates = []) {
+  const [currentTemplateId, setCurrentTemplateId] = useState(null);
+  const [assignedSlots, setAssignedSlots] = useState({});
+  const templateRef = useRef(null);
+
+  const currentTemplate = templates.find(t => t.id === currentTemplateId) || null;
+  const getSlots = useCallback(() => currentTemplate?.slots || [], [currentTemplate]);
+
+  const loadTemplate = useCallback((templateId) => {
+    const template = templates.find(t => t.id === templateId);
+    if (template) { setCurrentTemplateId(templateId); setAssignedSlots({}); templateRef.current = template; return true; }
+    return false;
+  }, [templates]);
+
+  const clearTemplate = useCallback(() => { setCurrentTemplateId(null); setAssignedSlots({}); templateRef.current = null; }, []);
+
+  const assignImageToSlot = useCallback((slotId, imageData) => {
+    const slots = getSlots();
+    const slot = slots.find(s => s.id === slotId);
+    if (!slot) return null;
+    const elementData = { type: 'image', src: imageData, x: slot.bounds.x, y: slot.bounds.y, width: slot.bounds.width, height: slot.bounds.height, slotId, crop: null };
+    const img = new Image();
+    img.src = imageData;
+    img.onload = () => { elementData.crop = calculateAutoCrop({ width: img.width, height: img.height }, { width: slot.bounds.width, height: slot.bounds.height }); };
+    setAssignedSlots(prev => ({ ...prev, [slotId]: elementData }));
+    return elementData;
+  }, [getSlots]);
+
+  const getDragBoundFunc = useCallback((slotId, elementSize) => {
+    const slot = getSlots().find(s => s.id === slotId);
+    if (!slot) return null;
+    return createDragBoundFunc(slot, elementSize);
+  }, [getSlots]);
+
+  const isSlotFilled = useCallback((slotId) => !!assignedSlots[slotId], [assignedSlots]);
+
+  return { currentTemplateId, currentTemplate, assignedSlots, loadTemplate, clearTemplate, getSlots, assignImageToSlot, getDragBoundFunc, isSlotFilled };
+}
--- a/src/index.css
+++ b/src/index.css
@@ -0,0 +1,389 @@
+:root {
+  --accent: #38bdf8;
+  --accent-hover: #0ea5e9;
+  --accent-bg: rgba(56, 189, 248, 0.1);
+  --bg-primary: #ffffff;
+  --bg-secondary: #f8fafc;
+  --bg-tertiary: #f1f5f9;
+  --border: #e2e8f0;
+  --border-focus: #38bdf8;
+  --text-primary: #0f172a;
+  --text-secondary: #475569;
+  --text-muted: #94a3b8;
+  --success: #22c55e;
+  --warning: #f59e0b;
+  --error: #ef4444;
+  --radius-sm: 4px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-xl: 16px;
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  --font-body: 'DM Sans', system-ui, -apple-system, sans-serif;
+  --font-mono: 'Space Mono', ui-monospace, Consolas, monospace;
+  font-family: var(--font-body);
+  line-height: 1.5;
+  font-weight: 400;
+  color: var(--text-primary);
+  background-color: var(--bg-primary);
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+}
+
+#root {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+button {
+  font-family: inherit;
+  cursor: pointer;
+  outline: none;
+}
+
+button:focus-visible {
+  box-shadow: 0 0 0 2px var(--bg-primary), 0 0 0 4px var(--accent);
+}
+
+input,
+textarea,
+select {
+  font-family: inherit;
+}
+
+.editor-layout {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+}
+
+.sidebar {
+  width: 320px;
+  background: var(--bg-secondary);
+  border-right: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.canvas-area {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: var(--bg-tertiary);
+  overflow: auto;
+  padding: 2rem;
+}
+
+.properties-panel {
+  width: 280px;
+  background: var(--bg-secondary);
+  border-left: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.icon-btn {
+  padding: 0.5rem 0.75rem;
+  background: var(--bg-primary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  font-size: 0.75rem;
+  cursor: pointer;
+  transition: all 0.2s;
+  color: var(--text-secondary);
+}
+
+.icon-btn:hover:not(:disabled) {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: white;
+}
+
+.icon-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.export-btn {
+  padding: 0.5rem 1rem;
+  background: linear-gradient(135deg, #22c55e, #16a34a);
+  color: white;
+  border: none;
+  border-radius: var(--radius-md);
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.export-btn:hover:not(:disabled) {
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-md);
+}
+
+.export-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.export-error {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 1rem;
+  background: #fef2f2;
+  border: 1px solid #fecaca;
+  border-radius: var(--radius-md);
+  color: #dc2626;
+  font-size: 0.875rem;
+  margin-bottom: 1rem;
+  width: 100%;
+  max-width: 400px;
+}
+
+.export-error p {
+  margin: 0;
+}
+
+.close-error {
+  background: transparent;
+  border: none;
+  color: #dc2626;
+  cursor: pointer;
+  font-size: 1.25rem;
+  padding: 0;
+  line-height: 1;
+}
+
+.bg-removal-container {
+  margin-top: 1rem;
+  padding-top: 1rem;
+  border-top: 1px solid var(--border);
+}
+
+.bg-removal-btn {
+  width: 100%;
+  padding: 0.75rem;
+  background: linear-gradient(135deg, #8b5cf6, #ec4899);
+  color: white;
+  border: none;
+  border-radius: var(--radius-md);
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+}
+
+.bg-removal-btn:hover:not(:disabled) {
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-md);
+}
+
+.bg-removal-btn:disabled {
+  opacity: 0.7;
+  cursor: not-allowed;
+}
+
+.bg-removal-hint {
+  font-size: 0.7rem;
+  color: var(--text-muted);
+  margin: 0.5rem 0 0 0;
+  line-height: 1.4;
+}
+
+.spinner-small {
+  width: 16px;
+  height: 16px;
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  border-top-color: white;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.filerobot-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.8);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.filerobot-container {
+  width: 90%;
+  height: 90%;
+  background: #1e1e1e;
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+}
+
+.pwa-install-banner {
+  position: fixed;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--bg-primary);
+  border: 1px solid var(--accent);
+  border-radius: var(--radius-lg);
+  padding: 1rem 1.5rem;
+  box-shadow: var(--shadow-lg);
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  animation: slideUp 0.3s ease-out;
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateX(-50%) translateY(20px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0);
+  }
+}
+
+.pwa-install-banner p {
+  margin: 0;
+  font-size: 0.875rem;
+  color: var(--text-primary);
+}
+
+.install-btn {
+  padding: 0.5rem 1rem;
+  background: var(--accent);
+  color: white;
+  border: none;
+  border-radius: var(--radius-sm);
+  font-size: 0.75rem;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.dismiss-btn {
+  padding: 0.5rem 1rem;
+  background: var(--bg-tertiary);
+  color: var(--text-secondary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  font-size: 0.75rem;
+  cursor: pointer;
+}
+
+.offline-indicator {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  background: linear-gradient(135deg, #f59e0b, #d97706);
+  color: white;
+  padding: 0.5rem 1rem;
+  text-align: center;
+  font-size: 12px;
+  font-weight: 500;
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  box-shadow: var(--shadow-md);
+}
+
+@media (max-width: 1200px) and (min-width: 768px) {
+  .sidebar {
+    width: 280px;
+  }
+
+  .properties-panel {
+    width: 240px;
+  }
+
+  .canvas-area {
+    padding: 1.5rem;
+  }
+}
+
+@media (max-width: 767px) {
+  .editor-layout {
+    flex-direction: column;
+  }
+
+  .sidebar {
+    width: 100%;
+    height: auto;
+    max-height: 50vh;
+    border-right: none;
+    border-bottom: 1px solid var(--border);
+  }
+
+  .canvas-area {
+    padding: 1rem;
+    width: 100%;
+  }
+
+  .properties-panel {
+    width: 100%;
+    border-left: none;
+    border-top: 1px solid var(--border);
+    max-height: 40vh;
+  }
+
+  .pwa-install-banner {
+    left: 10px;
+    right: 10px;
+    transform: none;
+    width: auto;
+    flex-direction: column;
+    text-align: center;
+  }
+}
+
+@media (max-width: 480px) {
+  .sidebar {
+    max-height: 40vh;
+  }
+
+  .canvas-area {
+    padding: 0.5rem;
+  }
+
+  button {
+    min-height: 44px;
+  }
+}
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -0,0 +1,25 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App'
+
+if ('serviceWorker' in navigator) {
+  window.addEventListener('load', () => {
+    navigator.serviceWorker.ready.then((registration) => {
+      registration.addEventListener('updatefound', () => {
+        const newWorker = registration.installing;
+        newWorker.addEventListener('statechange', () => {
+          if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
+            window.dispatchEvent(new CustomEvent('swUpdated', { detail: newWorker }));
+          }
+        });
+      });
+    });
+  });
+}
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)
--- a/src/styles/DesignCanvas.css
+++ b/src/styles/DesignCanvas.css
@@ -0,0 +1,41 @@
+.design-canvas-wrapper {
+  position: relative;
+  display: inline-block;
+}
+
+.design-canvas-border {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 300px;
+  height: 300px;
+  border: 1px dashed #cbd5e1;
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.5);
+  pointer-events: none;
+  z-index: 0;
+}
+
+.design-canvas-border.selected {
+  border: 2px solid #38bdf8;
+}
+
+.design-canvas-stage {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 1;
+}
+
+.design-canvas-info {
+  position: absolute;
+  bottom: -200px;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 12px;
+  color: var(--text-secondary);
+  text-align: center;
+  white-space: nowrap;
+}
--- a/src/styles/LayersPanel.css
+++ b/src/styles/LayersPanel.css
@@ -0,0 +1,69 @@
+.layers-empty {
+  padding: 1rem;
+  text-align: center;
+  color: var(--text-muted);
+  font-size: 12px;
+}
+
+.layers-title {
+  margin: 0 0 0.75rem 0;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-secondary);
+  text-transform: uppercase;
+}
+
+.layers-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.layers-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  background: transparent;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+}
+
+.layers-item.selected {
+  background: var(--accent-bg);
+  border-color: var(--accent);
+}
+
+.layers-item-icon {
+  font-size: 14px;
+}
+
+.layers-item-name {
+  flex: 1;
+  font-size: 12px;
+  color: var(--text-primary);
+  font-weight: 400;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.layers-item-name.selected {
+  color: var(--accent);
+  font-weight: 600;
+}
+
+.layers-item-delete {
+  width: 24px;
+  height: 24px;
+  border: none;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  color: var(--text-muted);
+}
--- a/src/styles/PWAInstall.css
+++ b/src/styles/PWAInstall.css
@@ -0,0 +1,42 @@
+.pwa-install-actions {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.pwa-update-banner {
+  position: fixed;
+  bottom: 1rem;
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--accent);
+  color: #fff;
+  padding: 0.75rem 1.5rem;
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-lg);
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  font-size: 13px;
+}
+
+.pwa-update-banner .refresh-btn {
+  padding: 0.375rem 0.75rem;
+  background: #fff;
+  color: var(--accent);
+  border: none;
+  border-radius: var(--radius-sm);
+  font-weight: 600;
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.pwa-update-banner .close-btn {
+  padding: 0.375rem 0.5rem;
+  background: transparent;
+  color: #fff;
+  border: none;
+  cursor: pointer;
+  font-size: 16px;
+  opacity: 0.8;
+}
--- a/src/styles/PhotoPreEditor.css
+++ b/src/styles/PhotoPreEditor.css
@@ -0,0 +1,7 @@
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+}
--- a/src/styles/PropertiesPanel.css
+++ b/src/styles/PropertiesPanel.css
@@ -0,0 +1,113 @@
+.properties-panel__header {
+  padding: 1rem;
+  border-bottom: 1px solid var(--border);
+}
+
+.properties-panel__title {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.properties-panel__empty {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+  color: var(--text-muted);
+  font-size: 12px;
+  text-align: center;
+}
+
+.properties-panel__body {
+  flex: 1;
+  overflow: auto;
+  padding: 1rem;
+}
+
+.properties-panel__type-badge {
+  display: inline-block;
+  padding: 4px 8px;
+  background: var(--accent-bg);
+  border-radius: var(--radius-sm);
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--accent);
+  text-transform: uppercase;
+  margin-bottom: 1rem;
+}
+
+.properties-panel__section {
+  margin-bottom: 1rem;
+}
+
+.properties-panel__label {
+  display: block;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--text-secondary);
+  margin-bottom: 0.5rem;
+  text-transform: uppercase;
+}
+
+.properties-panel__axis-label {
+  font-size: 10px;
+  color: var(--text-muted);
+}
+
+.properties-panel__row {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.properties-panel__field {
+  flex: 1;
+}
+
+.properties-panel__input {
+  width: 100%;
+  padding: 0.5rem;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  font-size: 13px;
+}
+
+.properties-panel__range {
+  width: 100%;
+}
+
+.properties-panel__color-input {
+  width: 100%;
+  height: 36px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  padding: 2px;
+}
+
+.properties-panel__edit-btn {
+  width: 100%;
+  padding: 0.75rem;
+  border: 1px solid var(--accent);
+  border-radius: var(--radius-md);
+  background: var(--accent-bg);
+  color: var(--accent);
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.properties-panel__delete-btn {
+  width: 100%;
+  padding: 0.75rem;
+  border: none;
+  border-radius: var(--radius-md);
+  background: var(--error);
+  color: #fff;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  margin-top: 1rem;
+}
--- a/src/styles/Sidebar.css
+++ b/src/styles/Sidebar.css
@@ -0,0 +1,34 @@
+.sidebar-tabs {
+  display: flex;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg-primary);
+}
+
+.sidebar-tab-btn {
+  flex: 1;
+  padding: 12px 8px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font-size: 11px;
+  font-weight: 400;
+  color: var(--text-secondary);
+  border-bottom: 2px solid transparent;
+}
+
+.sidebar-tab-btn.active {
+  font-weight: 600;
+  color: var(--accent);
+  border-bottom-color: var(--accent);
+}
+
+.sidebar-tab-icon {
+  font-size: 16px;
+  margin-bottom: 2px;
+}
+
+.sidebar-content {
+  flex: 1;
+  overflow: auto;
+  padding: 1rem;
+}
--- a/src/styles/StickersTab.css
+++ b/src/styles/StickersTab.css
@@ -0,0 +1,47 @@
+.stickers-title {
+  margin: 0 0 1rem 0;
+  font-size: 14px;
+  color: var(--text-primary);
+}
+
+.stickers-categories {
+  display: flex;
+  gap: 6px;
+  margin-bottom: 1rem;
+  flex-wrap: wrap;
+}
+
+.stickers-category-btn {
+  padding: 6px 12px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-xl);
+  background: var(--bg-primary);
+  color: var(--text-secondary);
+  font-size: 11px;
+  cursor: pointer;
+  text-transform: capitalize;
+}
+
+.stickers-category-btn.active {
+  border-color: var(--accent);
+  background: var(--accent);
+  color: #fff;
+}
+
+.stickers-grid {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 8px;
+}
+
+.sticker-btn {
+  aspect-ratio: 1;
+  border: none;
+  border-radius: var(--radius-md);
+  background: var(--bg-primary);
+  font-size: 28px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
--- a/src/styles/TShirtSVG.css
+++ b/src/styles/TShirtSVG.css
@@ -0,0 +1,8 @@
+.tshirt-svg {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+  z-index: 0;
+}
--- a/src/styles/TemplatesTab.css
+++ b/src/styles/TemplatesTab.css
@@ -0,0 +1,118 @@
+.templates-hidden-input {
+  display: none;
+}
+
+.templates-title {
+  margin: 0 0 1rem 0;
+  font-size: 14px;
+  color: var(--text-primary);
+}
+
+.templates-description {
+  font-size: 11px;
+  color: var(--text-muted);
+  margin-bottom: 1rem;
+  line-height: 1.4;
+}
+
+.templates-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.template-btn {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  background: var(--bg-primary);
+  cursor: pointer;
+  text-align: left;
+  transition: all 0.15s ease;
+}
+
+.template-btn.selected {
+  background: var(--bg-secondary);
+}
+
+.template-thumbnail {
+  width: 48px;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--bg-tertiary);
+  border-radius: var(--radius-sm);
+  font-size: 24px;
+}
+
+.template-info {
+  flex: 1;
+}
+
+.template-name {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.template-desc {
+  font-size: 11px;
+  color: var(--text-muted);
+}
+
+.template-slots-badge {
+  font-size: 10px;
+  padding: 2px 6px;
+  background: var(--accent);
+  color: #fff;
+  border-radius: 4px;
+  font-weight: 600;
+}
+
+.template-slots-section {
+  margin-top: 1rem;
+  padding: 1rem;
+  background: var(--bg-tertiary);
+  border-radius: var(--radius-md);
+  border: 1px solid var(--border);
+}
+
+.template-slots-title {
+  margin: 0 0 0.75rem 0;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.template-slots-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.template-slot-btn {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--bg-primary);
+  cursor: pointer;
+  font-size: 12px;
+  color: var(--text-primary);
+}
+
+.template-slot-icon {
+  font-size: 16px;
+}
+
+.template-slot-dimensions {
+  font-size: 10px;
+  color: var(--text-muted);
+  margin-left: auto;
+}
--- a/src/styles/TextTab.css
+++ b/src/styles/TextTab.css
@@ -0,0 +1,99 @@
+.text-tab-title {
+  margin: 0 0 1rem 0;
+  font-size: 14px;
+  color: var(--text-primary);
+}
+
+.text-tab-field {
+  margin-bottom: 1rem;
+}
+
+.text-tab-label {
+  display: block;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--text-secondary);
+  margin-bottom: 0.5rem;
+  text-transform: uppercase;
+}
+
+.text-tab-input {
+  width: 100%;
+  padding: 0.75rem;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  font-size: 14px;
+  font-family: var(--font-body);
+}
+
+.text-tab-textarea {
+  width: 100%;
+  padding: 0.75rem;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  font-size: 14px;
+  font-family: var(--font-body);
+  resize: vertical;
+}
+
+.text-tab-select {
+  width: 100%;
+  padding: 0.75rem;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  font-size: 13px;
+  cursor: pointer;
+  background: var(--bg-primary);
+}
+
+.text-tab-range {
+  width: 100%;
+}
+
+.text-tab-color-group {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.text-tab-color-input {
+  width: 40px;
+  height: 40px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  padding: 2px;
+}
+
+.text-tab-color-text {
+  flex: 1;
+  padding: 0.75rem;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  font-size: 13px;
+  font-family: var(--font-mono);
+}
+
+.text-tab-preview {
+  padding: 1rem;
+  background: var(--bg-primary);
+  border-radius: var(--radius-md);
+  margin-bottom: 1rem;
+  text-align: center;
+}
+
+.text-tab-preview-text {
+  word-break: break-word;
+}
+
+.text-tab-submit {
+  width: 100%;
+  padding: 0.875rem;
+  border: none;
+  border-radius: var(--radius-md);
+  background: var(--accent);
+  color: #fff;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+}
--- a/src/styles/UploadTab.css
+++ b/src/styles/UploadTab.css
@@ -0,0 +1,59 @@
+.upload-tab-title {
+  margin: 0 0 1rem 0;
+  font-size: 14px;
+  color: var(--text-primary);
+}
+
+.upload-dropzone {
+  border: 2px dashed var(--border);
+  border-radius: var(--radius-md);
+  padding: 2rem 1rem;
+  text-align: center;
+  cursor: pointer;
+  background: var(--bg-primary);
+  margin-bottom: 1rem;
+}
+
+.upload-dropzone.dragging {
+  border-color: var(--accent);
+  background: var(--accent-bg);
+}
+
+.upload-dropzone-icon {
+  font-size: 32px;
+  margin-bottom: 0.5rem;
+}
+
+.upload-dropzone-text {
+  font-size: 13px;
+  color: var(--text-secondary);
+  margin-bottom: 0.25rem;
+}
+
+.upload-dropzone-hint {
+  font-size: 11px;
+  color: var(--text-muted);
+}
+
+.upload-hidden-input {
+  display: none;
+}
+
+.upload-status {
+  padding: 0.75rem;
+  background: var(--accent-bg);
+  border-radius: var(--radius-sm);
+  font-size: 12px;
+  color: var(--accent);
+  text-align: center;
+}
+
+.upload-tip {
+  margin-top: 1rem;
+  padding: 0.75rem;
+  background: var(--bg-primary);
+  border-radius: var(--radius-sm);
+  font-size: 11px;
+  color: var(--text-muted);
+  line-height: 1.4;
+}
--- a/server/uploads/.gitkeep
+++ b/server/uploads/.gitkeep
--- a/vite.config.js
+++ b/vite.config.js
@@ -0,0 +1,95 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import { VitePWA } from 'vite-plugin-pwa';
+
+export default defineConfig({
+  plugins: [
+    react(),
+    VitePWA({
+      registerType: 'prompt',
+      includeAssets: ['favicon.svg', 'pwa-192x192.svg', 'pwa-512x512.svg'],
+      manifest: {
+        name: 'Apparel Designer',
+        short_name: 'ApparelDesigner',
+        description: 'T-shirt customization editor',
+        theme_color: '#38bdf8',
+        background_color: '#ffffff',
+        display: 'standalone',
+        orientation: 'any',
+        scope: '/',
+        start_url: '/',
+        icons: [
+          { src: 'pwa-192x192.svg', sizes: '192x192', type: 'image/svg+xml' },
+          { src: 'pwa-512x512.svg', sizes: '512x512', type: 'image/svg+xml' },
+          { src: 'pwa-512x512.svg', sizes: '512x512', type: 'image/svg+xml', purpose: 'any maskable' },
+        ],
+      },
+      workbox: {
+        globPatterns: ['**/*.{js,css,html,ico,png,svg,woff2}'],
+        runtimeCaching: [
+          {
+            urlPattern: /^https:\/\/cdn\.huggingface\.co\/.*/i,
+            handler: 'CacheFirst',
+            options: {
+              cacheName: 'transformers-models',
+              expiration: { maxEntries: 10, maxAgeSeconds: 60 * 60 * 24 * 30 },
+              cacheableResponse: { statuses: [0, 200] },
+            },
+          },
+          {
+            urlPattern: /^https:\/\/cdn-lfs\.huggingface\.co\/.*/i,
+            handler: 'CacheFirst',
+            options: {
+              cacheName: 'transformers-lfs',
+              expiration: { maxEntries: 10, maxAgeSeconds: 60 * 60 * 24 * 30 },
+              cacheableResponse: { statuses: [0, 200] },
+            },
+          },
+          {
+            urlPattern: /^\/uploads\/.*/i,
+            handler: 'CacheFirst',
+            options: {
+              cacheName: 'uploaded-images',
+              expiration: { maxEntries: 50, maxAgeSeconds: 60 * 60 * 24 * 7 },
+            },
+          },
+          {
+            urlPattern: /^\/api\/.*/i,
+            handler: 'NetworkFirst',
+            options: {
+              cacheName: 'api-responses',
+              expiration: { maxEntries: 50, maxAgeSeconds: 300 },
+              cacheableResponse: { statuses: [0, 200] },
+              networkTimeoutSeconds: 3,
+            },
+          },
+          {
+            urlPattern: /^https:\/\/fonts\.googleapis\.com\/.*/i,
+            handler: 'StaleWhileRevalidate',
+            options: {
+              cacheName: 'google-fonts',
+              expiration: { maxEntries: 10, maxAgeSeconds: 60 * 60 * 24 * 365 },
+            },
+          },
+          {
+            urlPattern: /^https:\/\/fonts\.gstatic\.com\/.*/i,
+            handler: 'CacheFirst',
+            options: {
+              cacheName: 'gstatic-fonts',
+              expiration: { maxEntries: 10, maxAgeSeconds: 60 * 60 * 24 * 365 },
+            },
+          },
+        ],
+      },
+    }),
+  ],
+  server: {
+    port: 3000,
+    proxy: {
+      '/api': { target: 'http://localhost:3001', changeOrigin: true },
+      '/uploads': { target: 'http://localhost:3001', changeOrigin: true },
+      '/exports': { target: 'http://localhost:3001', changeOrigin: true },
+    },
+  },
+  build: { outDir: 'dist' },
+});
Author	SHA1	Message	Date
khalid@traclabs.com	628a6765f4	Fix module issues, fix styling, add conditions to when the background removal and edit controls are shown	2026-04-23 08:48:11 -05:00
khalid@traclabs.com	4d19363d58	Flatted and issues fixed with Claude Desktop.	2026-04-22 06:21:02 -05:00
Khalid A	66bd69efe7	Consolidate to single server with unified package.json - Merge client and server dependencies into root package.json - Remove separate client/package.json and server/package.json - Update server/index.js to serve built client static files - Simplify Dockerfile to single build + production stage - Update dev scripts for unified development workflow - SPA routing serves index.html for non-API routes Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-21 22:24:20 -05:00
Khalid A	009557c249	Implement template system and PWA enhancements Phase 6 - Template System: - Add TemplateLayer component for background/overlay rendering - Add SlotPlaceholder component with visual indicators for empty slots - Add useTemplate hook with auto-crop and drag constraint functions - Update templates.js with slot definitions for team-sport template - Integrate template system into DesignCanvas and App - Add slot upload UI in TemplatesTab sidebar Phase 9 - PWA Improvements: - Add Workbox caching rules for HuggingFace LFS, templates, and API - Change registerType to 'prompt' for update notifications - Add service worker update handler in main.jsx - Add refresh prompt UI in PWAInstall component Phase 10 - Responsive and Accessibility: - Add responsive CSS media queries for tablet/mobile layouts - Add OfflineIndicator component with online/offline detection - Add focus trap and keyboard navigation to PhotoPreEditor - Add aria labels and screen reader support to modal Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-21 22:08:22 -05:00
Khalid A	304a6b247b	Add canvas dependency to server package.json (Phase 8 requirement)	2026-04-21 21:55:18 -05:00
Khalid A	4ca7910465	Phases 7-10: Complete remaining features and optimizations Phase 7.2 - Debounce undo/redo history: - Add 300ms debounce timer for rapid drag/transform changes - Commit history on dragEnd/transformEnd events only - Prevents history bloat during continuous interactions Phase 8.3 - Template-aware export: - Render template background layer first - Apply slot crop regions for image elements - Render template overlay layer last - Support nonPrintable flag for guides/watermarks Phase 9 - PWA icons: - Add pwa-192x192.svg and pwa-512x512.svg icons - Update vite.config.js manifest configuration Phase 10.3 - Performance optimizations: - Add React.memo to canvas components (ImageElement, TextElement, DesignCanvas) - Add React.memo to panel components (LayersPanel, PropertiesPanel) - Prevent unnecessary re-renders during canvas interactions Phase 10.6 - Template documentation: - Document template JSON schema in docs/template-schema.md - Include element properties, slot definitions, and examples - Describe background/overlay layer structure	2026-04-21 21:50:33 -05:00
Khalid A	a02f020d4c	Phase 10: Polish & QA - Added comprehensive README.md with: - Feature list and tech stack - Installation and Docker instructions - Project structure documentation - API endpoint reference - Build plan status checklist - Verified all 10 phases complete - Code review passed - no security vulnerabilities found - Ready for production deployment Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-21 01:53:58 -05:00
Khalid A	d42a497ae8	Phase 9: PWA & Workbox Caching (merged)	2026-04-21 01:52:43 -05:00
Khalid A	5164b08c1c	Phase 9: PWA & Workbox Caching - Added vite-plugin-pwa and workbox-window dependencies - PWA manifest with icons and standalone display mode - Workbox runtime caching for: - Transformers.js models (30 days) - Uploaded images (7 days) - Google Fonts (1 year) - PWAInstall component with install prompt banner - Offline support for cached assets - Auto-update registration Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-21 01:51:43 -05:00
Khalid A	29e30ec368	Phase 8: High-Resolution Export (merge) - Integrated export functionality with LayersPanel - Server-side node-canvas export at 4500x4500px (300 DPI) - Undo/Redo buttons and export button in canvas header - Merged with remote Phase 3 changes Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-21 01:33:16 -05:00
Khalid A	8a4b653019	Phase 8: High-Resolution Export - Server-side export endpoint using node-canvas - 300x300px preview -> 4500x4500px export (15"x15" @ 300 DPI) - Exports images and text elements with proper scaling - useExport hook with progress indicator - Export button in canvas header - Automatic download of exported PNG - Error handling with dismissible error banner Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-21 01:29:41 -05:00
				`@@ -1 +0,0 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
				`@@ -1 +0,0 @@`
				`export { PropertiesPanel } from './PropertiesPanel';`
				`@@ -1 +0,0 @@`
				`export { useDesignEditor } from './useDesignEditor';`
				`@@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg"><!-- Project icon sprites --></svg>`