5c21188df1
Closes the coverage-gap audit's sharpest item (H8/D-auth): mountAuth's
return is captured (authGuards) and design-route ownership is passed
explicitly to mountEditorApi (customerId/isAdmin off req.customer/
req.admin — matches the module defaults but survives default drift);
/api/fonts/registered is admin-gated by a host-level requireAdmin
registered ahead of the module route (auth.middleware can't do this:
the module applies it to the whole /designs group, which would lock
guests out of design persistence). mockupsDir/storageDir now threaded
so design-route thumbnails get the mockup backdrop. Dev harness
unchanged: without DATABASE_URL the roster stays open and ownership
resolves to the guest model.
Also fixes a real bug the boot test surfaced: the host hardcoded
001_designs.sql, silently skipping 002_design_family.sql — the store
SELECTs design_family_id unconditionally, so every GET /api/designs
500'd ('column does not exist'). Now applies every *.sql in the
module's migrations dir in filename order (all idempotent).
Verified by booting both modes: auth ON → roster 403 admin_required,
designs unknown-id 404 (was 500), both migrations applied on a fresh
db; auth OFF → roster 200 with the font list, warning logged. NOTE:
goods-editor's ./server export resolves to dist/, which was stale
(built Jul 7 — predating the module's auth option, roster route, and
Aug security fixes); rebuilt from the branch source. Any deploy must
run the module's build, not just npm install the file: dep.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
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
# Install dependencies
npm install
# Optional but recommended for accurate exports: fetch the Google Fonts the
# editor uses, so node-canvas can render them server-side. Skipping this means
# exports fall back to whatever fonts the host system provides.
npm run fetch-fonts
# 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
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
├── scripts/
│ └── fetch-fonts.mjs # Downloads TTFs for server-side rendering
├── 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
├── fonts/ # Server-side TTFs (gitignored, populated by fetch-fonts)
├── uploads/ # User uploads (gitignored)
├── exports/ # Exported PNGs (gitignored)
├── docs/ # Bug log, suggestions, change notes, template 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