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
80 changed files with 13800 additions and 4793 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,27 +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"
-  },
-  "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,15 +0,0 @@
-function App() {
-  return (
-    <div style={{ padding: '2rem', textAlign: 'center' }}>
-      <h1>Apparel Designer</h1>
-      <p style={{ color: 'var(--text-secondary)' }}>
-        T-shirt customization editor
-      </p>
-      <div style={{ marginTop: '2rem', padding: '1rem', background: 'var(--bg-secondary)', borderRadius: 'var(--radius-md)' }}>
-        <p>Server Status: <code id="server-status">Checking...</code></p>
-      </div>
-    </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/index.css
+++ b/client/src/index.css
@@ -1,68 +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;
-}
-
-button {
-  font-family: inherit;
-  cursor: pointer;
-}
-
-input, textarea, select {
-  font-family: inherit;
-}
--- a/client/src/main.jsx
+++ b/client/src/main.jsx
@@ -1,31 +0,0 @@
-import { StrictMode, useEffect, useState } from 'react'
-import { createRoot } from 'react-dom/client'
-import './index.css'
-
-function AppWithHealth() {
-  const [serverStatus, setServerStatus] = useState('Checking...');
-
-  useEffect(() => {
-    fetch('/api/health')
-      .then(res => res.ok ? setServerStatus('Connected ✓') : setServerStatus('Error'))
-      .catch(() => setServerStatus('Offline'));
-  }, []);
-
-  return (
-    <div style={{ padding: '2rem', textAlign: 'center' }}>
-      <h1>Apparel Designer</h1>
-      <p style={{ color: 'var(--text-secondary)' }}>
-        T-shirt customization editor
-      </p>
-      <div style={{ marginTop: '2rem', padding: '1rem', background: 'var(--bg-secondary)', borderRadius: 'var(--radius-md)' }}>
-        <p>Server Status: <code id="server-status">{serverStatus}</code></p>
-      </div>
-    </div>
-  );
-}
-
-createRoot(document.getElementById('root')).render(
-  <StrictMode>
-    <AppWithHealth />
-  </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/src/components/canvas/index.js
+++ b/src/components/canvas/index.js
@@ -0,0 +1,6 @@
+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/src/components/editor/index.js
+++ b/src/components/editor/index.js
@@ -0,0 +1 @@
+export { PhotoPreEditor } from './PhotoPreEditor';
--- 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/src/components/panels/index.js
+++ b/src/components/panels/index.js
@@ -0,0 +1,2 @@
+export { LayersPanel } from './LayersPanel';
+export { PropertiesPanel } from './PropertiesPanel';
--- 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/src/components/sidebar/index.js
+++ b/src/components/sidebar/index.js
@@ -0,0 +1,5 @@
+export { Sidebar } from './Sidebar';
+export { UploadTab } from './UploadTab';
+export { StickersTab } from './StickersTab';
+export { TextTab } from './TextTab';
+export { TemplatesTab } from './TemplatesTab';
--- a/src/constants/fonts.js
+++ b/src/constants/fonts.js
@@ -0,0 +1,22 @@
+export const FONTS = [
+  { name: 'Roboto', family: 'Roboto' },
+  { name: 'Open Sans', family: 'Open Sans' },
+  { name: 'Lato', family: 'Lato' },
+  { name: 'Montserrat', family: 'Montserrat' },
+  { name: 'Oswald', family: 'Oswald' },
+  { name: 'Raleway', family: 'Raleway' },
+  { name: 'Poppins', family: 'Poppins' },
+  { name: 'Roboto Condensed', family: 'Roboto Condensed' },
+  { name: 'Source Sans 3', family: 'Source Sans 3' },
+  { name: 'Roboto Slab', family: 'Roboto Slab' },
+  { name: 'Merriweather', family: 'Merriweather' },
+  { name: 'Ubuntu', family: 'Ubuntu' },
+  { name: 'Playfair Display', family: 'Playfair Display' },
+  { name: 'Nunito', family: 'Nunito' },
+  { name: 'Rubik', family: 'Rubik' },
+  { name: 'Work Sans', family: 'Work Sans' },
+  { name: 'Lora', family: 'Lora' },
+  { name: 'Fira Sans', family: 'Fira Sans' },
+  { name: 'Barlow', family: 'Barlow' },
+  { name: 'Bebas Neue', family: 'Bebas Neue' },
+];
--- a/src/constants/stickers.js
+++ b/src/constants/stickers.js
@@ -0,0 +1,159 @@
+export const STICKER_CATEGORIES = ['all', 'faces', 'animals', 'food', 'sports', 'nature', 'objects'];
+
+export const STICKERS = [
+  // Faces
+  { emoji: '😀', category: 'faces' },
+  { emoji: '😁', category: 'faces' },
+  { emoji: '😂', category: 'faces' },
+  { emoji: '🤣', category: 'faces' },
+  { emoji: '😃', category: 'faces' },
+  { emoji: '😄', category: 'faces' },
+  { emoji: '😅', category: 'faces' },
+  { emoji: '😆', category: 'faces' },
+  { emoji: '😉', category: 'faces' },
+  { emoji: '😊', category: 'faces' },
+  { emoji: '😋', category: 'faces' },
+  { emoji: '😎', category: 'faces' },
+  { emoji: '😍', category: 'faces' },
+  { emoji: '😘', category: 'faces' },
+  { emoji: '🥰', category: 'faces' },
+  { emoji: '😗', category: 'faces' },
+  { emoji: '🤔', category: 'faces' },
+  { emoji: '🤨', category: 'faces' },
+  { emoji: '🧐', category: 'faces' },
+  { emoji: '🤓', category: 'faces' },
+  { emoji: '😈', category: 'faces' },
+  { emoji: '🤠', category: 'faces' },
+  { emoji: '🥳', category: 'faces' },
+  { emoji: '🤩', category: 'faces' },
+
+  // Animals
+  { emoji: '🐶', category: 'animals' },
+  { emoji: '🐱', category: 'animals' },
+  { emoji: '🐭', category: 'animals' },
+  { emoji: '🐹', category: 'animals' },
+  { emoji: '🐰', category: 'animals' },
+  { emoji: '🦊', category: 'animals' },
+  { emoji: '🐻', category: 'animals' },
+  { emoji: '🐼', category: 'animals' },
+  { emoji: '🐨', category: 'animals' },
+  { emoji: '🐯', category: 'animals' },
+  { emoji: '🦁', category: 'animals' },
+  { emoji: '🐮', category: 'animals' },
+  { emoji: '🐷', category: 'animals' },
+  { emoji: '🐸', category: 'animals' },
+  { emoji: '🐵', category: 'animals' },
+  { emoji: '🐔', category: 'animals' },
+  { emoji: '🐧', category: 'animals' },
+  { emoji: '🐦', category: 'animals' },
+  { emoji: '🦄', category: 'animals' },
+  { emoji: '🐝', category: 'animals' },
+  { emoji: '🦋', category: 'animals' },
+  { emoji: '🐌', category: 'animals' },
+  { emoji: '🐞', category: 'animals' },
+  { emoji: '🐢', category: 'animals' },
+
+  // Food
+  { emoji: '🍎', category: 'food' },
+  { emoji: '🍐', category: 'food' },
+  { emoji: '🍊', category: 'food' },
+  { emoji: '🍋', category: 'food' },
+  { emoji: '🍌', category: 'food' },
+  { emoji: '🍉', category: 'food' },
+  { emoji: '🍇', category: 'food' },
+  { emoji: '🍓', category: 'food' },
+  { emoji: '🍈', category: 'food' },
+  { emoji: '🍒', category: 'food' },
+  { emoji: '🍑', category: 'food' },
+  { emoji: '🍍', category: 'food' },
+  { emoji: '🥥', category: 'food' },
+  { emoji: '🥝', category: 'food' },
+  { emoji: '🍅', category: 'food' },
+  { emoji: '🥑', category: 'food' },
+  { emoji: '🍆', category: 'food' },
+  { emoji: '🥔', category: 'food' },
+  { emoji: '🥕', category: 'food' },
+  { emoji: '🌽', category: 'food' },
+  { emoji: '🍕', category: 'food' },
+  { emoji: '🍔', category: 'food' },
+  { emoji: '🍟', category: 'food' },
+  { emoji: '🌭', category: 'food' },
+
+  // Sports
+  { emoji: '⚽', category: 'sports' },
+  { emoji: '🏀', category: 'sports' },
+  { emoji: '🏈', category: 'sports' },
+  { emoji: '⚾', category: 'sports' },
+  { emoji: '🥎', category: 'sports' },
+  { emoji: '🎾', category: 'sports' },
+  { emoji: '🏐', category: 'sports' },
+  { emoji: '🏉', category: 'sports' },
+  { emoji: '🎱', category: 'sports' },
+  { emoji: '🏓', category: 'sports' },
+  { emoji: '🏸', category: 'sports' },
+  { emoji: '🥅', category: 'sports' },
+  { emoji: '⛳', category: 'sports' },
+  { emoji: '🥊', category: 'sports' },
+  { emoji: '🥋', category: 'sports' },
+  { emoji: '🎯', category: 'sports' },
+  { emoji: '⛹️', category: 'sports' },
+  { emoji: '🚴', category: 'sports' },
+  { emoji: '🏆', category: 'sports' },
+  { emoji: '🥇', category: 'sports' },
+  { emoji: '🥈', category: 'sports' },
+  { emoji: '🥉', category: 'sports' },
+  { emoji: '🏅', category: 'sports' },
+  { emoji: '🎖️', category: 'sports' },
+
+  // Nature
+  { emoji: '🌸', category: 'nature' },
+  { emoji: '💐', category: 'nature' },
+  { emoji: '🌹', category: 'nature' },
+  { emoji: '🌺', category: 'nature' },
+  { emoji: '🌻', category: 'nature' },
+  { emoji: '🌼', category: 'nature' },
+  { emoji: '🌷', category: 'nature' },
+  { emoji: '🌱', category: 'nature' },
+  { emoji: '🌲', category: 'nature' },
+  { emoji: '🌳', category: 'nature' },
+  { emoji: '🌴', category: 'nature' },
+  { emoji: '🌵', category: 'nature' },
+  { emoji: '🌾', category: 'nature' },
+  { emoji: '🌿', category: 'nature' },
+  { emoji: '☘️', category: 'nature' },
+  { emoji: '🍀', category: 'nature' },
+  { emoji: '🍁', category: 'nature' },
+  { emoji: '🍂', category: 'nature' },
+  { emoji: '🍃', category: 'nature' },
+  { emoji: '🌈', category: 'nature' },
+  { emoji: '☀️', category: 'nature' },
+  { emoji: '🌙', category: 'nature' },
+  { emoji: '⭐', category: 'nature' },
+  { emoji: '🔥', category: 'nature' },
+
+  // Objects
+  { emoji: '❤️', category: 'objects' },
+  { emoji: '💛', category: 'objects' },
+  { emoji: '💚', category: 'objects' },
+  { emoji: '💙', category: 'objects' },
+  { emoji: '💜', category: 'objects' },
+  { emoji: '🧡', category: 'objects' },
+  { emoji: '💔', category: 'objects' },
+  { emoji: '💯', category: 'objects' },
+  { emoji: '✨', category: 'objects' },
+  { emoji: '🌟', category: 'objects' },
+  { emoji: '💫', category: 'objects' },
+  { emoji: '🎵', category: 'objects' },
+  { emoji: '🎶', category: 'objects' },
+  { emoji: '🎸', category: 'objects' },
+  { emoji: '🎺', category: 'objects' },
+  { emoji: '🎷', category: 'objects' },
+  { emoji: '🎹', category: 'objects' },
+  { emoji: '👑', category: 'objects' },
+  { emoji: '💎', category: 'objects' },
+  { emoji: '🎁', category: 'objects' },
+  { emoji: '🎈', category: 'objects' },
+  { emoji: '🎉', category: 'objects' },
+  { emoji: '🎊', category: 'objects' },
+  { emoji: '🔮', category: 'objects' },
+];
--- a/src/constants/templates.js
+++ b/src/constants/templates.js
@@ -0,0 +1,323 @@
+// Pre-designed templates for t-shirt customization
+export const TEMPLATES = [
+  {
+    id: 'team-sport',
+    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',
+        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,
+      },
+    ],
+  },
+  {
+    id: 'band-merch',
+    name: 'Band Merch',
+    category: 'Music',
+    description: 'Classic band t-shirt design',
+    elements: [
+      {
+        type: 'text',
+        text: 'BAND NAME',
+        x: 150,
+        y: 70,
+        fontSize: 32,
+        fontFamily: 'Georgia',
+        fill: '#fbbf24',
+        rotation: 0,
+      },
+      {
+        type: 'text',
+        text: 'WORLD TOUR 2026',
+        x: 150,
+        y: 110,
+        fontSize: 16,
+        fontFamily: 'Arial',
+        fill: '#ffffff',
+        rotation: 0,
+      },
+      {
+        type: 'text',
+        text: '🎸',
+        x: 150,
+        y: 180,
+        fontSize: 64,
+        fontFamily: 'Arial',
+        fill: '#ffffff',
+        rotation: 0,
+      },
+    ],
+  },
+  {
+    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,
+      },
+    ],
+  },
+  {
+    id: 'funny-cat',
+    name: 'Funny Cat',
+    category: 'Animals',
+    description: 'Cute cat with funny text',
+    elements: [
+      {
+        type: 'text',
+        text: '😼',
+        x: 150,
+        y: 100,
+        fontSize: 80,
+        fontFamily: 'Arial',
+        fill: '#000000',
+        rotation: 0,
+      },
+      {
+        type: 'text',
+        text: 'I do what I want',
+        x: 150,
+        y: 200,
+        fontSize: 20,
+        fontFamily: 'Comic Sans MS',
+        fill: '#475569',
+        rotation: 0,
+      },
+    ],
+  },
+  {
+    id: 'gradient-vibes',
+    name: 'Gradient Vibes',
+    category: 'Abstract',
+    description: 'Modern gradient text design',
+    elements: [
+      {
+        type: 'text',
+        text: 'GOOD',
+        x: 150,
+        y: 110,
+        fontSize: 48,
+        fontFamily: 'Impact',
+        fill: '#ec4899',
+        rotation: -5,
+      },
+      {
+        type: 'text',
+        text: 'VIBES',
+        x: 150,
+        y: 160,
+        fontSize: 48,
+        fontFamily: 'Impact',
+        fill: '#8b5cf6',
+        rotation: 5,
+      },
+      {
+        type: 'text',
+        text: '✨',
+        x: 80,
+        y: 90,
+        fontSize: 32,
+        fontFamily: 'Arial',
+        fill: '#fbbf24',
+        rotation: 0,
+      },
+      {
+        type: 'text',
+        text: '🌙',
+        x: 220,
+        y: 190,
+        fontSize: 32,
+        fontFamily: 'Arial',
+        fill: '#38bdf8',
+        rotation: 0,
+      },
+    ],
+  },
+  {
+    id: 'vintage-badge',
+    name: 'Vintage Badge',
+    category: 'Vintage',
+    description: 'Retro badge style design',
+    elements: [
+      {
+        type: 'text',
+        text: 'EST.',
+        x: 150,
+        y: 80,
+        fontSize: 18,
+        fontFamily: 'Times New Roman',
+        fill: '#78716c',
+        rotation: 0,
+      },
+      {
+        type: 'text',
+        text: '2026',
+        x: 150,
+        y: 105,
+        fontSize: 36,
+        fontFamily: 'Times New Roman',
+        fill: '#78716c',
+        rotation: 0,
+      },
+      {
+        type: 'text',
+        text: 'AUTHENTIC',
+        x: 150,
+        y: 150,
+        fontSize: 24,
+        fontFamily: 'Times New Roman',
+        fill: '#78716c',
+        rotation: 0,
+      },
+      {
+        type: 'text',
+        text: 'QUALITY',
+        x: 150,
+        y: 180,
+        fontSize: 24,
+        fontFamily: 'Times New Roman',
+        fill: '#78716c',
+        rotation: 0,
+      },
+    ],
+  },
+  {
+    id: 'nature-lover',
+    name: 'Nature Lover',
+    category: 'Nature',
+    description: 'Mountain and nature themed',
+    elements: [
+      {
+        type: 'text',
+        text: '🏔️',
+        x: 150,
+        y: 90,
+        fontSize: 56,
+        fontFamily: 'Arial',
+        fill: '#000000',
+        rotation: 0,
+      },
+      {
+        type: 'text',
+        text: 'ADVENTURE',
+        x: 150,
+        y: 160,
+        fontSize: 28,
+        fontFamily: 'Impact',
+        fill: '#059669',
+        rotation: 0,
+      },
+      {
+        type: 'text',
+        text: 'AWAITS',
+        x: 150,
+        y: 190,
+        fontSize: 20,
+        fontFamily: 'Arial',
+        fill: '#6b7280',
+        rotation: 0,
+      },
+    ],
+  },
+  {
+    id: 'tech-geek',
+    name: 'Tech Geek',
+    category: 'Tech',
+    description: 'Programming themed design',
+    elements: [
+      {
+        type: 'text',
+        text: '</>',
+        x: 150,
+        y: 100,
+        fontSize: 64,
+        fontFamily: 'Courier New',
+        fill: '#3b82f6',
+        rotation: 0,
+      },
+      {
+        type: 'text',
+        text: 'Hello, World!',
+        x: 150,
+        y: 170,
+        fontSize: 20,
+        fontFamily: 'Courier New',
+        fill: '#1e293b',
+        rotation: 0,
+      },
+      {
+        type: 'text',
+        text: '// Code is life',
+        x: 150,
+        y: 195,
+        fontSize: 14,
+        fontFamily: 'Courier New',
+        fill: '#94a3b8',
+        rotation: 0,
+      },
+    ],
+  },
+];
+
+export const TEMPLATE_CATEGORIES = [
+  'All',
+  'Sports',
+  'Music',
+  'Quotes',
+  'Animals',
+  'Abstract',
+  'Vintage',
+  'Nature',
+  'Tech',
+];
--- 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
Khalid A	72a1967333	Phase 3: Sidebar & Properties Panel (merge with remote)	2026-04-21 01:28:46 -05:00
Khalid A	fd11a36d93	Phase 3: Sidebar & Properties Panel Implemented full editor UI with three-column layout: - Sidebar with 4 tabs (Upload, Stickers, Text, Templates) - UploadTab with drag-and-drop file upload, wires to POST /api/upload - StickersTab with 96 emoji stickers across 6 categories - TextTab with font picker (20 Google Fonts), size slider, color picker - TemplatesTab placeholder for future template system - LayersPanel showing all elements with select/delete - PropertiesPanel with position, size, rotation controls Also added: - Constants for fonts and stickers - Enhanced CSS with editor-layout, sidebar, properties-panel classes - Updated App.jsx to integrate all components	2026-04-21 01:27:59 -05:00
Khalid A	537cfd572d	Phase 7: Undo/Redo - History tracking with 50-state limit in useDesignEditor hook - Undo: Ctrl/Cmd + Z keyboard shortcut - Redo: Ctrl/Cmd + Shift + Z or Ctrl/Cmd + Y - Undo/Redo buttons in canvas header - History saves state after add, update, delete, reorder operations - Disabled button states when history is exhausted Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-21 01:27:51 -05:00
Khalid A	72495fec3e	Phase 6: Template System - Added 8 pre-designed templates across 8 categories - Templates: Team Sport, Band Merch, Minimal Quote, Funny Cat, Gradient Vibes, Vintage Badge, Nature Lover, Tech Geek - Templates tab with category filter pills - Template preview cards with 2-column grid - One-click template application to canvas Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-21 01:24:03 -05:00
Khalid A	7bf9ce3a9c	Phase 5: Photo Pre-Editor (Filerobot) - Added react-filerobot-image-editor dependency - PhotoPreEditor component with full editing capabilities - Crop, filters, adjustments, annotations, watermark tabs - Opens after image upload, before adding to canvas - Exports edited image as PNG for canvas use Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-21 01:20:11 -05:00
Khalid A	4a735e2f2e	Phase 4: Background Removal (Transformers.js) - Added @xenova/transformers dependency - useBackgroundRemoval hook with RMBG-1.4 model - Client-side background removal with progress indicator - Background removal button in properties panel (image elements only) - ~170MB model cached after first download Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-21 01:19:03 -05:00
Khalid A	2acf674aaa	Phase 3: Sidebar & Properties Panel - Three-column layout (sidebar/canvas/properties) - Sidebar with tabs: Upload, Stickers, Text - Upload tab with drag-and-drop and click-to-upload - Stickers tab with 6 categories (40+ emojis) - Text tab with font selector, size slider, color picker - Properties panel with position, size, rotation controls - Delete button for selected element - Responsive layout for mobile Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-21 01:17:47 -05:00
Khalid A	e67017b259	Phase 2: Canvas Editor Core Implements the core canvas editor with react-konva: - Added dependencies: react-konva, konva, use-image - DesignCanvas component: 300×300px Stage with T-shirt SVG overlay - TShirtSVG component: Visual t-shirt outline with print zone indicator - ImageElement: Draggable/resizable image with Transformer handles - TextElement: Draggable/resizable text with Transformer handles - useDesignEditor hook: Element CRUD, selection, reordering - Keyboard shortcut: Delete/Backspace removes selected element - Test image added on mount for Phase 2 verification Canvas info bar shows: "Design Area: 15" × 15" • Export: 4500 × 4500px @ 300 DPI" Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-21 01:03:33 -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>
				`@@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg"><!-- Project icon sprites --></svg>`
				`@@ -0,0 +1 @@`
				`export { PhotoPreEditor } from './PhotoPreEditor';`