Commit Graph

41 Commits

Author SHA1 Message Date
khalid@traclabs.com
840a5dbcb3 v0.8: auth integration, design persistence (#23), protected sweep (#24)
Server (spans the v0.6→v0.8 arc in one file):
- template-manager mounted with the productsStore catalog, PNG-only
  mockup multer, facet personalization config (§R10, FACET_KEY-gated,
  inert when unset), and the marketing-preview drainer (2s tick, one
  render per tick, .unref()).
- auth-manager bootstrap: DATABASE_URL gates the pg Pool, migrations,
  and mountAuth (magic-link customer + Google SSO admin + facet);
  absent DATABASE_URL logs a warning and the host boots without auth.
- goods-editor design persistence (#23): idempotent 001_designs.sql
  applied at boot, db handle passed to mountEditorApi so /api/designs
  routes mount; without Postgres the client falls back to
  cart-without-design_id.
- reference-protected TTL sweep (#24): before each pass, every
  /uploads/ basename referenced by template-manager JSON or persisted
  designs is collected and protected, and exports/designs (db-driven
  lifecycle, unrecoverable sources) is skipped entirely. Sweep kickoff
  moves below the bootstrap (pgPool TDZ). sweep-worker.mjs is the
  standalone process variant for production.

Client: main.jsx wraps the tree in AuthProvider (single /api/auth/me
fetch shared by useCustomer/useAdmin, degrades on 404) and mounts
AppRouter. eslint bumps server.js to ecmaVersion 2022 (top-level
await); .env.example documents the full v0.8 env surface.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-09-01 23:29:16 -05:00
khalid@traclabs.com
dfa1f90a16 v0.8: self-hosted fonts replace the Google Fonts CDN link
index.html now loads /api/fonts/fonts.css, synthesized at request time
by goods-editor's mountEditorApi from the host's fonts/ directory
(populated via fetch-fonts in goods-editor-module — the host-local
fetch script shrinks to a pointer). Shipped synchronously in <head>
on purpose: the module's runtime injector races first paint and the
editor's text measurement gives wrong answers against fallback
metrics until real fonts load.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-09-01 23:29:04 -05:00
khalid@traclabs.com
6599a5e68f v0.7: shop storefront + routed app
AppRouter replaces the single-page App as the mounted root: shop routes
(/ and /shop → ShopHome, /shop/:productSlug → ProductPage, /cart →
CartStub, /customize → CustomizeRoute) plus the template-manager admin
surfaces (/admin/templates|products|featured|trash, v0.8 adds
/admin/inventory + RequireAdmin wrapping). App.jsx stays on disk one
release as the documented legacy fallback — nothing imports it.

New shop UI: components/shop/ (ShopHome/Hero/ProductGrid/ProductCard/
ProductPage/ProductGallery/ProductInfo/ProductBuyPanel/CartStub/
ShopHeader/TemplateGalleryForProduct), hooks (useShopProducts/
useShopProduct/useCart/useFacetCatalog), and shop.css + admin.css.

Header gains the module-gated Clear button (onCanClearChange /
onElementCountChange mirror the editor module's history-commit
signals); i18n keys follow. vite proxies /products to the Node server
(template-manager serves product imagery — without it the SPA fallback
returns index.html as an image) and adds a template-manager chunk.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-09-01 23:28:58 -05:00
khalid@traclabs.com
aba2dbedfb v0.6: template-manager owns the product catalog
The host no longer carries a runtime product catalog. products.js
shrinks to a legacy single-product stub; the canonical catalog lives in
template-manager's productsStore, seeded ONCE on first boot from the
new seedProducts.js (after that the store under templates/ is
authoritative and the seed is ignored — intentional, so restarts never
rewrite an admin-managed catalog). phoneModels.js and
templateCategories.js are the supporting constant sets, and
docs/template-schema.md documents the v4 schema.

templates/ is the admin-managed store itself (_products_index.json +
products/<id>/product.json, JSON only) — committed so the configured
catalog (sizes, pricing, options built up in the admin UI) survives a
fresh checkout rather than regressing to the seed.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-09-01 23:28:48 -05:00
khalid@traclabs.com
b5b8808251 deps: local module workspace + v0.8 runtime deps
goods-editor moves from the git+ssh tag to file:../goods-editor-module,
joined by file: deps on template-manager and @khalidadil/auth-manager
(scoped name — published to the Gitea registry as 0.2.0; the file:
protocol stays for local development, the key must match the scoped
name). pg lands for the auth/design-persistence Postgres pool and
react-router-dom for the v0.7 routed app.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-09-01 23:28:39 -05:00
khalid@traclabs.com
87f5753804 Fix uploads and stickers caching rules 2026-05-24 11:06:10 -05:00
khalid@traclabs.com
e4e9459c86 Update to add externalized dependencies for the goods-editor-module 2026-05-24 10:56:43 -05:00
khalid@traclabs.com
846560f81a Update package-lock json 2026-05-24 10:33:34 -05:00
khalid@traclabs.com
937cb7528a Change port to correct SSH port 2026-05-24 10:32:33 -05:00
khalid@traclabs.com
1fe0ea1a4b More key troubleshooting 2026-05-24 09:51:02 -05:00
khalid@traclabs.com
9d7c9d7a3e Logging key verification values 2026-05-24 09:30:43 -05:00
khalid@traclabs.com
f3327d29d4 Update to use a base64 encoded key 2026-05-24 09:18:06 -05:00
khalid@traclabs.com
9fe0828986 Fix ssh key issues 2026-05-24 09:07:09 -05:00
khalid@traclabs.com
6d63775800 Fix ssh from host not working in docker 2026-05-24 08:49:27 -05:00
khalid@traclabs.com
070c95e254 Break editor into a module 2026-05-24 08:44:29 -05:00
khalid@traclabs.com
1d01442a39 Update vita-plugin-pwa 2026-05-23 04:15:57 -05:00
khalid@traclabs.com
3277bbe5ec Update to use a function 2026-05-23 04:10:22 -05:00
khalid@traclabs.com
8294c47f74 Spit dependencies into chunks 2026-05-23 04:05:03 -05:00
khalid@traclabs.com
6127e7b781 Fix docker file 2026-05-23 03:42:05 -05:00
khalid@traclabs.com
b1fb6fa3aa Major update for v1 and tests 2026-05-23 03:28:58 -05:00
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
Khalid A
1af0e6152d Add .env.example file
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-21 01:02:48 -05:00
Khalid A
01702c397f Initial commit: Phase 1 scaffolding complete
- Root package.json with concurrently for dev server
- Client: Vite + React 18 with design tokens and proxy config
- Server: Express with CORS, multer (20MB), Sharp resize
- Upload endpoint with preview generation
- Dockerfile (multi-stage) and docker-compose.yml
- Canvas deferred to Phase 8 (export functionality)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-21 00:29:50 -05:00