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>

client/package.json

@@ -11,7 +11,12 @@
   },
   "dependencies": {
     "react": "^19.2.5",
-    "react-dom": "^19.2.5"
+    "react-dom": "^19.2.5",
+    "react-konva": "^18.2.10",
+    "konva": "^9.3.18",
+    "use-image": "^1.1.1",
+    "@xenova/transformers": "^2.17.2",
+    "react-filerobot-image-editor": "^4.8.1"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.4",

client/src/App.jsx

@@ -1,13 +1,164 @@
+import { useEffect } from 'react';
+import { DesignCanvas } from './components/canvas/DesignCanvas';
+import { Sidebar } from './components/sidebar/Sidebar';
+import { PropertiesPanel } from './components/properties/PropertiesPanel';
+import { useDesignEditor } from './hooks/useDesignEditor';
+
 function App() {
+  const {
+    elements,
+    selectedId,
+    addElement,
+    updateElement,
+    deleteElement,
+    selectElement,
+    deselectAll,
+    undo,
+    redo,
+    canUndo,
+    canRedo,
+    initializeHistory,
+  } = useDesignEditor();
+
+  const selectedElement = elements.find((el) => el.id === selectedId);
+
+  // Initialize history on mount
+  useEffect(() => {
+    initializeHistory();
+  }, [initializeHistory]);
+
+  // Keyboard shortcuts
+  useEffect(() => {
+    const handleKeyDown = (e) => {
+      if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') {
+        return;
+      }
+
+      // Undo: Ctrl/Cmd + Z
+      if ((e.ctrlKey || e.metaKey) && e.key === 'z' && !e.shiftKey) {
+        e.preventDefault();
+        if (canUndo) undo();
+        return;
+      }
+
+      // Redo: Ctrl/Cmd + Shift + Z or Ctrl/Cmd + Y
+      if ((e.ctrlKey || e.metaKey) && (
+        (e.key === 'z' && e.shiftKey) ||
+        e.key === 'y'
+      )) {
+        e.preventDefault();
+        if (canRedo) redo();
+        return;
+      }
+
+      // Delete/Backspace removes selected element
+      if (e.key === 'Delete' || e.key === 'Backspace') {
+        if (selectedId) {
+          deleteElement(selectedId);
+        }
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [selectedId, deleteElement, undo, redo, canUndo, canRedo]);
+
+  const handleUpload = (data) => {
+    if (data.preview?.url) {
+      addElement({
+        type: 'image',
+        x: 75,
+        y: 75,
+        width: 150,
+        height: 150,
+        rotation: 0,
+        src: data.preview.url,
+      });
+    }
+  };
+
+  const handleAddElement = (elementData) => {
+    if (elementData.type === 'sticker') {
+      // Convert emoji sticker to a text-like element
+      addElement({
+        type: 'text',
+        text: elementData.emoji,
+        x: elementData.x,
+        y: elementData.y,
+        fontSize: elementData.size,
+        fontFamily: 'Arial',
+        fill: '#000000',
+        rotation: elementData.rotation,
+      });
+    } else if (elementData.type === 'text') {
+      addElement(elementData);
+    }
+  };
+
+  const handleApplyTemplate = (template) => {
+    // Clear existing elements and apply template
+    template.elements.forEach((el, index) => {
+      setTimeout(() => addElement({ ...el }), index * 50);
+    });
+  };
+
   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 className="app-layout">
+      {/* Left Sidebar */}
+      <aside className="sidebar-container">
+        <Sidebar onElementAdd={handleAddElement} onUpload={handleUpload} onApplyTemplate={handleApplyTemplate} />
+      </aside>
+
+      {/* Center Canvas */}
+      <main className="canvas-container">
+        <div className="canvas-header">
+          <div>
+            <h1 className="app-title">Apparel Designer</h1>
+            <p className="app-subtitle">T-shirt customization editor</p>
           </div>
+          <div className="undo-redo-buttons">
+            <button
+              className={`icon-btn ${!canUndo ? 'disabled' : ''}`}
+              onClick={undo}
+              disabled={!canUndo}
+              title="Undo (Ctrl+Z)"
+            >
+              ↶ Undo
+            </button>
+            <button
+              className={`icon-btn ${!canRedo ? 'disabled' : ''}`}
+              onClick={redo}
+              disabled={!canRedo}
+              title="Redo (Ctrl+Y)"
+            >
+              ↷ Redo
+            </button>
+          </div>
+        </div>
+        <div className="canvas-wrapper">
+          <DesignCanvas
+            elements={elements}
+            selectedId={selectedId}
+            onSelect={selectElement}
+            onDeselect={deselectAll}
+            onUpdate={updateElement}
+          />
+        </div>
+        <div className="debug-info">
+          <p>Elements: {elements.length}</p>
+          <p>Selected: {selectedId || 'None'}</p>
+          <p className="tip">Tip: Click to select, drag to move, use handles to resize. Press Delete to remove.</p>
+        </div>
+      </main>
+
+      {/* Right Properties Panel */}
+      <aside className="properties-container">
+        <PropertiesPanel
+          selectedElement={selectedElement}
+          onUpdate={updateElement}
+          onDelete={deleteElement}
+        />
+      </aside>
     </div>
   );
 }

client/src/components/canvas/DesignCanvas.jsx

@@ -0,0 +1,95 @@
+import { Stage, Layer } from 'react-konva';
+import { TShirtSVG } from './TShirtSVG';
+import { ImageElement } from './ImageElement';
+import { TextElement } from './TextElement';
+
+const CANVAS_SIZE = 300;
+
+export function DesignCanvas({
+  elements,
+  selectedId,
+  onSelect,
+  onDeselect,
+  onUpdate,
+}) {
+  return (
+    <div style={{ position: 'relative', display: 'inline-block' }}>
+      {/* T-shirt SVG background */}
+      <TShirtSVG size={CANVAS_SIZE} />
+
+      {/* Canvas Stage */}
+      <Stage
+        width={CANVAS_SIZE}
+        height={CANVAS_SIZE}
+        onClick={onDeselect}
+        onTap={onDeselect}
+        style={{
+          position: 'absolute',
+          top: '50%',
+          left: '50%',
+          transform: 'translate(-50%, -50%)',
+          border: selectedId ? '2px solid #38bdf8' : '1px dashed #cbd5e1',
+          borderRadius: '8px',
+          background: 'rgba(255, 255, 255, 0.5)',
+        }}
+      >
+        <Layer>
+          {elements.map((el) => {
+            if (el.type === 'image') {
+              return (
+                <ImageElement
+                  key={el.id}
+                  id={el.id}
+                  x={el.x}
+                  y={el.y}
+                  width={el.width}
+                  height={el.height}
+                  rotation={el.rotation}
+                  src={el.src}
+                  isSelected={el.id === selectedId}
+                  onSelect={() => onSelect(el.id)}
+                  onUpdate={(attrs) => onUpdate(el.id, attrs)}
+                />
+              );
+            }
+            if (el.type === 'text') {
+              return (
+                <TextElement
+                  key={el.id}
+                  id={el.id}
+                  x={el.x}
+                  y={el.y}
+                  text={el.text}
+                  fontSize={el.fontSize}
+                  fontFamily={el.fontFamily}
+                  fill={el.fill}
+                  rotation={el.rotation}
+                  isSelected={el.id === selectedId}
+                  onSelect={() => onSelect(el.id)}
+                  onUpdate={(attrs) => onUpdate(el.id, attrs)}
+                />
+              );
+            }
+            return null;
+          })}
+        </Layer>
+      </Stage>
+
+      {/* Canvas info bar */}
+      <div
+        style={{
+          position: 'absolute',
+          bottom: '-40px',
+          left: '50%',
+          transform: 'translateX(-50%)',
+          fontSize: '12px',
+          color: 'var(--text-secondary)',
+          textAlign: 'center',
+          whiteSpace: 'nowrap',
+        }}
+      >
+        Design Area: 15" × 15" • Export: 4500 × 4500px @ 300 DPI
+      </div>
+    </div>
+  );
+}

client/src/components/canvas/ImageElement.jsx

@@ -0,0 +1,98 @@
+import { useEffect, useState } from 'react';
+import { Image, Transformer } from 'react-konva';
+import useImage from 'use-image';
+
+function URLImage({ src, ...props }) {
+  const [img] = useImage(src, 'anonymous');
+  return <Image image={img} {...props} />;
+}
+
+export function ImageElement({
+  id,
+  x,
+  y,
+  width,
+  height,
+  rotation,
+  src,
+  isSelected,
+  onSelect,
+  onUpdate,
+}) {
+  const shapeRef = null;
+  const trRef = null;
+
+  useEffect(() => {
+    if (isSelected && trRef.current) {
+      trRef.current.nodes([shapeRef.current]);
+      trRef.current.getLayer().batchDraw();
+    }
+  }, [isSelected]);
+
+  return (
+    <>
+      <URLImage
+        ref={shapeRef}
+        x={x}
+        y={y}
+        width={width}
+        height={height}
+        rotation={rotation}
+        src={src}
+        draggable
+        onClick={onSelect}
+        onTap={onSelect}
+        onDragEnd={(e) => {
+          onUpdate({
+            x: e.target.x(),
+            y: e.target.y(),
+          });
+        }}
+        onTransformEnd={(e) => {
+          const node = shapeRef.current;
+          const scaleX = node.scaleX();
+          const scaleY = node.scaleY();
+          node.scaleX(1);
+          node.scaleY(1);
+          onUpdate({
+            x: node.x(),
+            y: node.y(),
+            width: Math.max(20, node.width() * scaleX),
+            height: Math.max(20, node.height() * scaleY),
+            rotation: node.rotation(),
+          });
+        }}
+        boundBoxFunc={(oldBox, newBox) => {
+          // Minimum size constraint
+          if (newBox.width < 20 || newBox.height < 20) {
+            return oldBox;
+          }
+          return newBox;
+        }}
+      />
+      {isSelected && (
+        <Transformer
+          ref={trRef}
+          boundBoxFunc={(oldBox, newBox) => {
+            // Limit resize to minimum size
+            if (newBox.width < 20 || newBox.height < 20) {
+              return oldBox;
+            }
+            return newBox;
+          }}
+          anchorSize={8}
+          anchorCornerRadius={4}
+          borderStroke="#38bdf8"
+          anchorStroke="#38bdf8"
+          anchorFill="#ffffff"
+        />
+      )}
+    </>
+  );
+}
+
+ImageElement.defaultProps = {
+  width: 100,
+  height: 100,
+  rotation: 0,
+};

client/src/components/canvas/TShirtSVG.jsx

@@ -0,0 +1,59 @@
+export function TShirtSVG({ size = 300 }) {
+  const padding = size * 0.1;
+  const innerSize = size - padding * 2;
+
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox={`0 0 ${size} ${size}`}
+      style={{
+        position: 'absolute',
+        top: '50%',
+        left: '50%',
+        transform: 'translate(-50%, -50%)',
+        pointerEvents: 'none',
+        zIndex: 0,
+      }}
+    >
+      {/* T-shirt outline */}
+      <path
+        d={`
+          M ${padding} ${padding + innerSize * 0.15}
+          L ${padding + innerSize * 0.15} ${padding}
+          L ${size - padding - innerSize * 0.15} ${padding}
+          L ${size - padding} ${padding + innerSize * 0.15}
+          L ${size - padding} ${size - padding}
+          L ${padding} ${size - padding}
+          Z
+        `}
+        fill="none"
+        stroke="var(--border)"
+        strokeWidth="2"
+        strokeDasharray="4,4"
+      />
+      {/* Chest area indicator (design zone) */}
+      <rect
+        x={size * 0.3}
+        y={size * 0.25}
+        width={size * 0.4}
+        height={size * 0.35}
+        fill="none"
+        stroke="var(--accent)"
+        strokeWidth="1.5"
+        opacity="0.5"
+      />
+      {/* Label */}
+      <text
+        x={size / 2}
+        y={size * 0.45}
+        textAnchor="middle"
+        fill="var(--text-muted)"
+        fontSize="10"
+        fontFamily="var(--font-mono)"
+      >
+        Print Zone
+      </text>
+    </svg>
+  );
+}

client/src/components/canvas/TextElement.jsx

@@ -0,0 +1,80 @@
+import { useEffect } from 'react';
+import { Text, Transformer } from 'react-konva';
+
+export function TextElement({
+  id,
+  x,
+  y,
+  text,
+  fontSize,
+  fontFamily,
+  fill,
+  rotation,
+  isSelected,
+  onSelect,
+  onUpdate,
+}) {
+  const textRef = null;
+  const trRef = null;
+
+  useEffect(() => {
+    if (isSelected && trRef.current) {
+      trRef.current.nodes([textRef.current]);
+      trRef.current.getLayer().batchDraw();
+    }
+  }, [isSelected]);
+
+  return (
+    <>
+      <Text
+        ref={textRef}
+        x={x}
+        y={y}
+        text={text}
+        fontSize={fontSize}
+        fontFamily={fontFamily}
+        fill={fill}
+        rotation={rotation}
+        draggable
+        onClick={onSelect}
+        onTap={onSelect}
+        onDragEnd={(e) => {
+          onUpdate({
+            x: e.target.x(),
+            y: e.target.y(),
+          });
+        }}
+        onTransformEnd={(e) => {
+          const node = textRef.current;
+          const scaleX = node.scaleX();
+          node.scaleX(1);
+          node.scaleY(1);
+          onUpdate({
+            x: node.x(),
+            y: node.y(),
+            fontSize: Math.max(12, node.fontSize() * scaleX),
+            rotation: node.rotation(),
+          });
+        }}
+      />
+      {isSelected && (
+        <Transformer
+          ref={trRef}
+          enabledAnchors={['top-left', 'top-right', 'bottom-left', 'bottom-right']}
+          anchorSize={8}
+          anchorCornerRadius={4}
+          borderStroke="#38bdf8"
+          anchorStroke="#38bdf8"
+          anchorFill="#ffffff"
+        />
+      )}
+    </>
+  );
+}
+
+TextElement.defaultProps = {
+  fontSize: 24,
+  fontFamily: 'DM Sans',
+  fill: '#0f172a',
+  rotation: 0,
+};

client/src/components/canvas/index.js

@@ -0,0 +1,4 @@
+export { DesignCanvas } from './DesignCanvas';
+export { TShirtSVG } from './TShirtSVG';
+export { ImageElement } from './ImageElement';
+export { TextElement } from './TextElement';

client/src/components/editor/PhotoPreEditor.jsx

@@ -0,0 +1,58 @@
+import { useState } from 'react';
+import FilerobotImageEditor from 'react-filerobot-image-editor';
+
+export function PhotoPreEditor({ imageSrc, onComplete, onClose }) {
+  const [saving, setSaving] = useState(false);
+
+  const handleComplete = (editedImageObject, designState) => {
+    setSaving(true);
+
+    // Export the edited image
+    editedImageObject.exportAsync({
+      quality: 1,
+      mimeType: 'image/png',
+    }).then((blob) => {
+      const url = URL.createObjectURL(blob);
+      setSaving(false);
+      onComplete(url);
+    }).catch((error) => {
+      console.error('Export failed:', error);
+      setSaving(false);
+      onClose();
+    });
+  };
+
+  return (
+    <div className="filerobot-overlay">
+      <div className="filerobot-container">
+        <FilerobotImageEditor
+          source={imageSrc}
+          onSave={handleComplete}
+          onClose={onClose}
+          annotationsCommon={{
+            fill: '#ff0000',
+            stroke: '#000000',
+            strokeWidth: 0,
+          }}
+          annotations={[
+            'Text',
+            'Rectangle',
+            'Ellipse',
+            'Line',
+            'Pen',
+            'Eraser',
+          ]}
+          tabs={['adjust', 'filters', 'finetune', 'annotate', 'watermark']}
+          defaultTabId="adjust"
+          theme={{
+            accentColor: '#38bdf8',
+            palettePrimary: '#38bdf8',
+          }}
+          saveButtonProps={{
+            label: saving ? 'Exporting...' : 'Use Edited Image',
+          }}
+        />
+      </div>
+    </div>
+  );
+}

client/src/components/editor/index.js

@@ -0,0 +1 @@
+export { PhotoPreEditor } from './PhotoPreEditor';

client/src/components/properties/PropertiesPanel.jsx

@@ -0,0 +1,118 @@
+import { BackgroundRemovalButton } from '../sidebar/BackgroundRemovalButton';
+
+export function PropertiesPanel({ selectedElement, onUpdate, onDelete }) {
+  if (!selectedElement) {
+    return (
+      <div className="properties-panel">
+        <h3>Properties</h3>
+        <div className="no-selection">
+          <p>Select an element to edit its properties</p>
+        </div>
+      </div>
+    );
+  }
+
+  const handlePositionChange = (axis, value) => {
+    onUpdate(selectedElement.id, { [axis]: Number(value) });
+  };
+
+  const handleSizeChange = (dimension, value) => {
+    onUpdate(selectedElement.id, { [dimension]: Number(value) });
+  };
+
+  const handleRotationChange = (value) => {
+    onUpdate(selectedElement.id, { rotation: Number(value) });
+  };
+
+  const getIcon = () => {
+    if (selectedElement.type === 'image') return '🖼️';
+    if (selectedElement.type === 'text') return 'T';
+    if (selectedElement.type === 'sticker') return '😊';
+    return '📦';
+  };
+
+  return (
+    <div className="properties-panel">
+      <h3>Properties</h3>
+      <div className="element-header">
+        <span className="element-icon">{getIcon()}</span>
+        <span className="element-name">
+          {selectedElement.type === 'text'
+            ? selectedElement.text?.substring(0, 20) || 'Text'
+            : `${selectedElement.type}`}
+        </span>
+      </div>
+
+      <div className="property-group">
+        <label>Position</label>
+        <div className="property-row">
+          <div className="property-input">
+            <span className="property-label">X</span>
+            <input
+              type="number"
+              value={Math.round(selectedElement.x)}
+              onChange={(e) => handlePositionChange('x', e.target.value)}
+            />
+          </div>
+          <div className="property-input">
+            <span className="property-label">Y</span>
+            <input
+              type="number"
+              value={Math.round(selectedElement.y)}
+              onChange={(e) => handlePositionChange('y', e.target.value)}
+            />
+          </div>
+        </div>
+      </div>
+
+      <div className="property-group">
+        <label>Size</label>
+        <div className="property-row">
+          <div className="property-input">
+            <span className="property-label">W</span>
+            <input
+              type="number"
+              value={Math.round(selectedElement.width || selectedElement.fontSize || 0)}
+              onChange={(e) =>
+                handleSizeChange(selectedElement.text ? 'fontSize' : 'width', e.target.value)
+              }
+            />
+          </div>
+          {selectedElement.type !== 'text' && (
+            <div className="property-input">
+              <span className="property-label">H</span>
+              <input
+                type="number"
+                value={Math.round(selectedElement.height || 0)}
+                onChange={(e) => handleSizeChange('height', e.target.value)}
+              />
+            </div>
+          )}
+        </div>
+      </div>
+
+      <div className="property-group">
+        <label>Rotation: {Math.round(selectedElement.rotation || 0)}°</label>
+        <input
+          type="range"
+          min="0"
+          max="360"
+          value={selectedElement.rotation || 0}
+          onChange={(e) => handleRotationChange(e.target.value)}
+          className="rotation-slider"
+        />
+      </div>
+
+      {selectedElement.type === 'image' && (
+        <BackgroundRemovalButton
+          selectedElement={selectedElement}
+          onUpdate={onUpdate}
+        />
+      )}
+
+      <button className="delete-btn" onClick={() => onDelete(selectedElement.id)}>
+        Delete Element
+      </button>
+    </div>
+  );
+}

client/src/components/properties/index.js

@@ -0,0 +1 @@
+export { PropertiesPanel } from './PropertiesPanel';

client/src/components/sidebar/BackgroundRemovalButton.jsx

@@ -0,0 +1,47 @@
+import { useBackgroundRemoval } from '../../hooks/useBackgroundRemoval';
+
+export function BackgroundRemovalButton({ selectedElement, onUpdate }) {
+  const { loading, progress, hasModel, loadModel, removeBackground } = useBackgroundRemoval();
+
+  const handleRemoveBackground = async () => {
+    if (!selectedElement || selectedElement.type !== 'image') return;
+
+    if (!hasModel) {
+      const loaded = await loadModel();
+      if (!loaded) return;
+    }
+
+    const resultUrl = await removeBackground(selectedElement.src);
+    if (resultUrl) {
+      onUpdate(selectedElement.id, { src: resultUrl });
+    }
+  };
+
+  if (!selectedElement || selectedElement.type !== 'image') {
+    return null;
+  }
+
+  return (
+    <div className="bg-removal-container">
+      <button
+        className="bg-removal-btn"
+        onClick={handleRemoveBackground}
+        disabled={loading}
+      >
+        {loading ? (
+          <>
+            <div className="spinner-small" />
+            {progress > 0 ? `Loading: ${progress}%` : 'Removing Background...'}
+          </>
+        ) : (
+          <>✨ Remove Background</>
+        )}
+      </button>
+      {!hasModel && (
+        <p className="bg-removal-hint">
+          First use requires downloading ~170MB model. Subsequent uses are cached.
+        </p>
+      )}
+    </div>
+  );
+}

client/src/components/sidebar/Sidebar.jsx

@@ -0,0 +1,50 @@
+import { useState } from 'react';
+import { UploadTab } from './UploadTab';
+import { StickersTab } from './StickersTab';
+import { TextTab } from './TextTab';
+import { TemplatesTab } from './TemplatesTab';
+
+const TABS = [
+  { id: 'upload', label: 'Upload', icon: '📁' },
+  { id: 'stickers', label: 'Stickers', icon: '😊' },
+  { id: 'text', label: 'Text', icon: 'T' },
+  { id: 'templates', label: 'Templates', icon: '📋' },
+];
+
+export function Sidebar({ onElementAdd, onUpload, onApplyTemplate }) {
+  const [activeTab, setActiveTab] = useState('upload');
+
+  const renderTabContent = () => {
+    switch (activeTab) {
+      case 'upload':
+        return <UploadTab onUpload={onUpload} />;
+      case 'stickers':
+        return <StickersTab onAddSticker={onElementAdd} />;
+      case 'text':
+        return <TextTab onAddText={onElementAdd} />;
+      case 'templates':
+        return <TemplatesTab onApplyTemplate={onApplyTemplate} />;
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <div className="sidebar">
+      <div className="sidebar-tabs">
+        {TABS.map((tab) => (
+          <button
+            key={tab.id}
+            className={`sidebar-tab ${activeTab === tab.id ? 'active' : ''}`}
+            onClick={() => setActiveTab(tab.id)}
+            title={tab.label}
+          >
+            <span className="tab-icon">{tab.icon}</span>
+            <span className="tab-label">{tab.label}</span>
+          </button>
+        ))}
+      </div>
+      <div className="sidebar-content">{renderTabContent()}</div>
+    </div>
+  );
+}

client/src/components/sidebar/StickersTab.jsx

@@ -0,0 +1,63 @@
+import { useState } from 'react';
+
+const STICKER_CATEGORIES = [
+  { id: 'all', label: 'All', emojis: [] },
+  { id: 'faces', label: 'Faces', emojis: ['😀', '😁', '😂', '🤣', '😃', '😄', '😅', '😆', '😉', '😊', '😋', '😎', '😍', '😘', '🥰', '😗', '😙', '😚'] },
+  { id: 'animals', label: 'Animals', emojis: ['🐶', '🐱', '🐭', '🐹', '🐰', '🦊', '🐻', '🐼', '🐨', '🐯', '🦁', '🐮', '🐷', '🐸', '🐵', '🐔', '🐧', '🐦', '🦆', '🦅'] },
+  { id: 'food', label: 'Food', emojis: ['🍎', '🍐', '🍊', '🍋', '🍌', '🍉', '🍇', '🍓', '🍈', '🍒', '🍑', '🥭', '🍍', '🥥', '🥝', '🍅', '🍆', '🥑', '🥦', '🥬'] },
+  { id: 'sports', label: 'Sports', emojis: ['⚽', '🏀', '🏈', '⚾', '🥎', '🎾', '🏐', '🏉', '🥏', '🎱', '🪀', '🏓', '🏸', '🏒', '🏑', '🥍', '🏏', '🥅', '⛳', '🪁'] },
+  { id: 'symbols', label: 'Symbols', emojis: ['❤️', '🧡', '💛', '💚', '💙', '💜', '🖤', '🤍', '🤎', '💔', '❣️', '💕', '💞', '💓', '💗', '💖', '💘', '💝', '💟', '☮️'] },
+  { id: 'objects', label: 'Objects', emojis: ['⌚', '📱', '💻', '⌨️', '🖥️', '🖨️', '🖱️', '🖲️', '🕹️', '🗜️', '💽', '💾', '💿', '📀', '📼', '📷', '📸', '📹', '🎥', '📽️'] },
+];
+
+export function StickersTab({ onAddSticker }) {
+  const [selectedCategory, setSelectedCategory] = useState('faces');
+
+  const getStickers = () => {
+    if (selectedCategory === 'all') {
+      return STICKER_CATEGORIES.flatMap((cat) => cat.emojis).filter(Boolean);
+    }
+    const category = STICKER_CATEGORIES.find((cat) => cat.id === selectedCategory);
+    return category?.emojis || [];
+  };
+
+  const handleAddSticker = (emoji) => {
+    onAddSticker({
+      type: 'sticker',
+      emoji,
+      x: 100,
+      y: 100,
+      size: 64,
+      rotation: 0,
+    });
+  };
+
+  return (
+    <div className="stickers-tab">
+      <h3>Stickers</h3>
+      <div className="category-pills">
+        {STICKER_CATEGORIES.map((cat) => (
+          <button
+            key={cat.id}
+            className={`category-pill ${selectedCategory === cat.id ? 'active' : ''}`}
+            onClick={() => setSelectedCategory(cat.id)}
+          >
+            {cat.label}
+          </button>
+        ))}
+      </div>
+      <div className="sticker-grid">
+        {getStickers().map((emoji, index) => (
+          <button
+            key={index}
+            className="sticker-button"
+            onClick={() => handleAddSticker(emoji)}
+            title={`Add ${emoji}`}
+          >
+            {emoji}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}

client/src/components/sidebar/TemplatesTab.jsx

@@ -0,0 +1,56 @@
+import { useState } from 'react';
+import { TEMPLATES, TEMPLATE_CATEGORIES } from '../../constants/templates';
+
+export function TemplatesTab({ onApplyTemplate }) {
+  const [selectedCategory, setSelectedCategory] = useState('All');
+
+  const filteredTemplates =
+    selectedCategory === 'All'
+      ? TEMPLATES
+      : TEMPLATES.filter((t) => t.category === selectedCategory);
+
+  return (
+    <div className="templates-tab">
+      <h3>Templates</h3>
+      <div className="category-pills">
+        {TEMPLATE_CATEGORIES.map((cat) => (
+          <button
+            key={cat}
+            className={`category-pill ${selectedCategory === cat ? 'active' : ''}`}
+            onClick={() => setSelectedCategory(cat)}
+          >
+            {cat}
+          </button>
+        ))}
+      </div>
+      <div className="templates-grid">
+        {filteredTemplates.map((template) => (
+          <button
+            key={template.id}
+            className="template-card"
+            onClick={() => onApplyTemplate(template)}
+          >
+            <div className="template-preview">
+              {template.elements.slice(0, 3).map((el, i) => (
+                <span
+                  key={i}
+                  className="template-preview-element"
+                  style={{
+                    fontSize: el.type === 'text' && el.text.length === 1 ? '16px' : '8px',
+                    color: el.fill,
+                  }}
+                >
+                  {el.text}
+                </span>
+              ))}
+            </div>
+            <div className="template-info">
+              <span className="template-name">{template.name}</span>
+              <span className="template-category">{template.category}</span>
+            </div>
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}

client/src/components/sidebar/TextTab.jsx

@@ -0,0 +1,96 @@
+import { useState } from 'react';
+
+const FONTS = [
+  { value: 'Arial', label: 'Arial' },
+  { value: 'Helvetica', label: 'Helvetica' },
+  { value: 'Times New Roman', label: 'Times New Roman' },
+  { value: 'Georgia', label: 'Georgia' },
+  { value: 'Verdana', label: 'Verdana' },
+  { value: 'Courier New', label: 'Courier New' },
+  { value: 'Comic Sans MS', label: 'Comic Sans MS' },
+  { value: 'Impact', label: 'Impact' },
+];
+
+export function TextTab({ onAddText }) {
+  const [text, setText] = useState('Your Text');
+  const [fontFamily, setFontFamily] = useState('Arial');
+  const [fontSize, setFontSize] = useState(32);
+  const [fill, setFill] = useState('#000000');
+
+  const handleAddText = () => {
+    onAddText({
+      type: 'text',
+      text,
+      fontFamily,
+      fontSize,
+      fill,
+      x: 100,
+      y: 100,
+      rotation: 0,
+    });
+  };
+
+  return (
+    <div className="text-tab">
+      <h3>Add Text</h3>
+      <div className="text-input-group">
+        <label>Text</label>
+        <input
+          type="text"
+          value={text}
+          onChange={(e) => setText(e.target.value)}
+          placeholder="Enter text"
+          className="text-input"
+        />
+      </div>
+      <div className="text-input-group">
+        <label>Font</label>
+        <select
+          value={fontFamily}
+          onChange={(e) => setFontFamily(e.target.value)}
+          className="font-select"
+        >
+          {FONTS.map((font) => (
+            <option key={font.value} value={font.value}>
+              {font.label}
+            </option>
+          ))}
+        </select>
+      </div>
+      <div className="text-input-group">
+        <label>Size: {fontSize}px</label>
+        <input
+          type="range"
+          min="12"
+          max="120"
+          value={fontSize}
+          onChange={(e) => setFontSize(Number(e.target.value))}
+          className="size-slider"
+        />
+      </div>
+      <div className="text-input-group">
+        <label>Color</label>
+        <div className="color-picker-row">
+          <input
+            type="color"
+            value={fill}
+            onChange={(e) => setFill(e.target.value)}
+            className="color-picker"
+          />
+          <input
+            type="text"
+            value={fill}
+            onChange={(e) => setFill(e.target.value)}
+            className="color-input"
+          />
+        </div>
+      </div>
+      <button className="add-text-btn" onClick={handleAddText}>
+        Add Text
+      </button>
+      <div className="text-preview" style={{ fontFamily, fontSize, color: fill }}>
+        {text}
+      </div>
+    </div>
+  );
+}

client/src/components/sidebar/UploadTab.jsx

@@ -0,0 +1,105 @@
+import { useState } from 'react';
+import { PhotoPreEditor } from '../editor/PhotoPreEditor';
+
+export function UploadTab({ onUpload }) {
+  const fileInputRef = useState(null)[0];
+  const [isDragging, setIsDragging] = useState(false);
+  const [uploading, setUploading] = useState(false);
+  const [editingImage, setEditingImage] = useState(null);
+
+  const handleFile = async (file) => {
+    if (!file || !file.type.startsWith('image/')) return;
+
+    setUploading(true);
+    const formData = new FormData();
+    formData.append('image', file);
+
+    try {
+      const response = await fetch('/api/upload', {
+        method: 'POST',
+        body: formData,
+      });
+
+      if (response.ok) {
+        const data = await response.json();
+        // Open photo editor with uploaded image
+        setEditingImage(data.original.url);
+      }
+    } catch (error) {
+      console.error('Upload failed:', error);
+    } finally {
+      setUploading(false);
+    }
+  };
+
+  const handleDrop = (e) => {
+    e.preventDefault();
+    setIsDragging(false);
+    const file = e.dataTransfer.files[0];
+    handleFile(file);
+  };
+
+  const handleDragOver = (e) => {
+    e.preventDefault();
+    setIsDragging(true);
+  };
+
+  const handleDragLeave = () => {
+    setIsDragging(false);
+  };
+
+  const handleEditorComplete = (editedImageUrl) => {
+    onUpload({ preview: { url: editedImageUrl } });
+    setEditingImage(null);
+  };
+
+  const handleEditorClose = () => {
+    setEditingImage(null);
+  };
+
+  if (editingImage) {
+    return (
+      <PhotoPreEditor
+        imageSrc={editingImage}
+        onComplete={handleEditorComplete}
+        onClose={handleEditorClose}
+      />
+    );
+  }
+
+  return (
+    <div className="upload-tab">
+      <h3>Upload Image</h3>
+      <div
+        className={`upload-zone ${isDragging ? 'dragging' : ''} ${uploading ? 'uploading' : ''}`}
+        onDrop={handleDrop}
+        onDragOver={handleDragOver}
+        onDragLeave={handleDragLeave}
+        onClick={() => fileInputRef?.click()}
+      >
+        {uploading ? (
+          <div className="uploading-state">
+            <div className="spinner" />
+            <p>Uploading...</p>
+          </div>
+        ) : (
+          <>
+            <div className="upload-icon">📁</div>
+            <p>Drop image here or click to upload</p>
+            <p className="upload-hint">PNG, JPG, WEBP up to 20MB</p>
+            <p className="upload-hint" style={{ marginTop: '0.5rem' }}>
+              Edit with crop, filters, and effects before adding to design
+            </p>
+          </>
+        )}
+        <input
+          ref={fileInputRef}
+          type="file"
+          accept="image/*"
+          onChange={(e) => handleFile(e.target.files[0])}
+          style={{ display: 'none' }}
+        />
+      </div>
+    </div>
+  );
+}

client/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';

client/src/constants/templates.js

@@ -0,0 +1,309 @@
+// 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',
+    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',
+];

client/src/hooks/index.js

@@ -0,0 +1 @@
+export { useDesignEditor } from './useDesignEditor';

client/src/hooks/useBackgroundRemoval.js

@@ -0,0 +1,120 @@
+import { useState, useCallback } from 'react';
+import { env, AutoModel, AutoProcessor, RawImage } from '@xenova/transformers';
+
+// Use local models only
+env.allowLocalModels = true;
+env.useBrowserCache = true;
+
+export function useBackgroundRemoval() {
+  const [loading, setLoading] = useState(false);
+  const [progress, setProgress] = useState(0);
+  const [model, setModel] = useState(null);
+  const [processor, setProcessor] = useState(null);
+
+  const loadModel = useCallback(async () => {
+    if (model && processor) return true;
+
+    setLoading(true);
+    setProgress(0);
+
+    try {
+      const loadedModel = await AutoModel.from_pretrained('Xenova/rmbg-1.4', {
+        progress_callback: (data) => {
+          if (data.status === 'progress') {
+            setProgress(Math.round(data.progress));
+          }
+        },
+        local_model_path: '/models/rmbg-1.4',
+      });
+
+      const loadedProcessor = await AutoProcessor.from_pretrained('Xenova/rmbg-1.4', {
+        local_model_path: '/models/rmbg-1.4',
+      });
+
+      setModel(loadedModel);
+      setProcessor(loadedProcessor);
+      setLoading(false);
+      return true;
+    } catch (error) {
+      console.error('Failed to load background removal model:', error);
+      setLoading(false);
+      return false;
+    }
+  }, [model, processor]);
+
+  const removeBackground = useCallback(async (imageSrc) => {
+    if (!model || !processor) {
+      const loaded = await loadModel();
+      if (!loaded) return null;
+    }
+
+    setLoading(true);
+
+    try {
+      // Load the image
+      const img = new Image();
+      img.crossOrigin = 'anonymous';
+      img.src = imageSrc;
+      await new Promise((resolve, reject) => {
+        img.onload = resolve;
+        img.onerror = reject;
+      });
+
+      // Process image through the model
+      const inputs = await processor(img);
+      const { pixel_values } = inputs;
+
+      // Run inference
+      const { output } = await model({ pixel_values });
+
+      // Get the mask
+      const maskData = await RawImage.fromTensor(output[0].mul(255).to('uint8')).resize(
+        img.width,
+        img.height
+      );
+
+      // Create canvas to apply mask
+      const canvas = document.createElement('canvas');
+      canvas.width = img.width;
+      canvas.height = img.height;
+      const ctx = canvas.getContext('2d');
+
+      // Draw original image
+      ctx.drawImage(img, 0, 0);
+
+      // Get image data
+      const imageData = ctx.getImageData(0, 0, img.width, img.height);
+      const data = imageData.data;
+      const maskPixels = maskData.data;
+
+      // Apply alpha mask
+      for (let i = 0; i < maskPixels.length; i++) {
+        const alpha = maskPixels[i];
+        data[i * 4 + 3] = alpha; // Set alpha channel
+      }
+
+      ctx.putImageData(imageData, 0, 0);
+
+      // Convert to blob URL
+      const blob = await new Promise((resolve) => {
+        canvas.toBlob(resolve, 'image/png');
+      });
+
+      const url = URL.createObjectURL(blob);
+      setLoading(false);
+      return url;
+    } catch (error) {
+      console.error('Background removal failed:', error);
+      setLoading(false);
+      return null;
+    }
+  }, [model, processor, loadModel]);
+
+  return {
+    loading,
+    progress,
+    hasModel: !!model,
+    loadModel,
+    removeBackground,
+  };
+}

client/src/hooks/useDesignEditor.js

@@ -0,0 +1,130 @@
+import { useState, useCallback, useRef } from 'react';
+
+const MAX_HISTORY = 50;
+
+export function useDesignEditor() {
+  const [elements, setElements] = useState([]);
+  const [selectedId, setSelectedId] = useState(null);
+
+  // History for undo/redo
+  const historyRef = useRef([]);
+  const historyIndexRef = useRef(-1);
+
+  const saveToHistory = useCallback((newElements) => {
+    // Remove any future history if we're in the middle of the stack
+    if (historyIndexRef.current < historyRef.current.length - 1) {
+      historyRef.current = historyRef.current.slice(0, historyIndexRef.current + 1);
+    }
+
+    // Add new state to history
+    historyRef.current.push(JSON.stringify(newElements));
+
+    // Limit history size
+    if (historyRef.current.length > MAX_HISTORY) {
+      historyRef.current.shift();
+    } else {
+      historyIndexRef.current++;
+    }
+  }, []);
+
+  const canUndo = historyIndexRef.current > 0;
+  const canRedo = historyIndexRef.current < historyRef.current.length - 1;
+
+  const addElement = useCallback((element) => {
+    const newElement = {
+      ...element,
+      id: `element-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
+    };
+
+    setElements((prev) => {
+      const newElements = [...prev, newElement];
+      saveToHistory(newElements);
+      return newElements;
+    });
+
+    setSelectedId(newElement.id);
+    return newElement.id;
+  }, [saveToHistory]);
+
+  const updateElement = useCallback((id, attrs) => {
+    setElements((prev) => {
+      const newElements = prev.map((el) => (el.id === id ? { ...el, ...attrs } : el));
+      saveToHistory(newElements);
+      return newElements;
+    });
+  }, [saveToHistory]);
+
+  const deleteElement = useCallback((id) => {
+    setElements((prev) => {
+      const newElements = prev.filter((el) => el.id !== id);
+      saveToHistory(newElements);
+      return newElements;
+    });
+
+    if (selectedId === id) {
+      setSelectedId(null);
+    }
+  }, [selectedId, saveToHistory]);
+
+  const selectElement = useCallback((id) => {
+    setSelectedId(id);
+  }, []);
+
+  const deselectAll = useCallback(() => {
+    setSelectedId(null);
+  }, []);
+
+  const reorderElement = useCallback((id, newOrder) => {
+    setElements((prev) => {
+      const index = prev.findIndex((el) => el.id === id);
+      if (index === -1 || index === newOrder) return prev;
+
+      const newElements = [...prev];
+      const [removed] = newElements.splice(index, 1);
+      newElements.splice(newOrder, 0, removed);
+
+      saveToHistory(newElements);
+      return newElements;
+    });
+  }, [saveToHistory]);
+
+  const undo = useCallback(() => {
+    if (historyIndexRef.current > 0) {
+      historyIndexRef.current--;
+      const prevState = JSON.parse(historyRef.current[historyIndexRef.current]);
+      setElements(prevState);
+      setSelectedId(null);
+    }
+  }, []);
+
+  const redo = useCallback(() => {
+    if (historyIndexRef.current < historyRef.current.length - 1) {
+      historyIndexRef.current++;
+      const nextState = JSON.parse(historyRef.current[historyIndexRef.current]);
+      setElements(nextState);
+      setSelectedId(null);
+    }
+  }, []);
+
+  // Initialize history with empty state
+  const initializeHistory = useCallback(() => {
+    historyRef.current = [JSON.stringify([])];
+    historyIndexRef.current = 0;
+  }, []);
+
+  return {
+    elements,
+    selectedId,
+    addElement,
+    updateElement,
+    deleteElement,
+    selectElement,
+    deselectAll,
+    reorderElement,
+    undo,
+    redo,
+    canUndo,
+    canRedo,
+    initializeHistory,
+  };
+}

client/src/index.css

@@ -66,3 +66,625 @@ button {
 input, textarea, select {
   font-family: inherit;
 }
+
+/* App Layout - Three Column */
+.app-layout {
+  display: flex;
+  min-height: 100vh;
+  background: var(--bg-secondary);
+}
+
+.sidebar-container {
+  width: 280px;
+  background: var(--bg-primary);
+  border-right: 1px solid var(--border);
+  flex-shrink: 0;
+  overflow-y: auto;
+}
+
+.canvas-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 2rem;
+  overflow-y: auto;
+}
+
+.properties-container {
+  width: 260px;
+  background: var(--bg-primary);
+  border-left: 1px solid var(--border);
+  flex-shrink: 0;
+  overflow-y: auto;
+}
+
+.app-title {
+  font-size: 1.5rem;
+  font-weight: 600;
+  margin: 0 0 0.25rem 0;
+  color: var(--text-primary);
+}
+
+.app-subtitle {
+  color: var(--text-secondary);
+  margin: 0;
+  font-size: 0.875rem;
+}
+
+.canvas-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 1rem;
+  width: 100%;
+  max-width: 400px;
+}
+
+.undo-redo-buttons {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.icon-btn {
+  padding: 0.5rem 0.75rem;
+  background: var(--bg-primary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  font-size: 0.75rem;
+  cursor: pointer;
+  transition: all 0.2s;
+  color: var(--text-secondary);
+}
+
+.icon-btn:hover:not(:disabled) {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: white;
+}
+
+.icon-btn.disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.icon-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.canvas-wrapper {
+  margin-bottom: 1rem;
+}
+
+.debug-info {
+  padding: 1rem;
+  background: var(--bg-tertiary);
+  border-radius: var(--radius-md);
+  font-size: 0.875rem;
+  text-align: center;
+}
+
+.debug-info p {
+  margin: 0.25rem 0;
+}
+
+.debug-info .tip {
+  color: var(--text-muted);
+  font-size: 12px;
+}
+
+/* Sidebar */
+.sidebar {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.sidebar-tabs {
+  display: flex;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg-tertiary);
+}
+
+.sidebar-tab {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 0.75rem 0.5rem;
+  background: transparent;
+  border: none;
+  border-bottom: 2px solid transparent;
+  cursor: pointer;
+  transition: all 0.2s;
+  font-size: 0.75rem;
+  color: var(--text-secondary);
+}
+
+.sidebar-tab:hover {
+  background: var(--bg-primary);
+}
+
+.sidebar-tab.active {
+  border-bottom-color: var(--accent);
+  color: var(--text-primary);
+}
+
+.tab-icon {
+  font-size: 1.25rem;
+  margin-bottom: 0.25rem;
+}
+
+.tab-label {
+  font-size: 0.625rem;
+}
+
+.sidebar-content {
+  padding: 1rem;
+  flex: 1;
+}
+
+/* Upload Tab */
+.upload-tab h3 {
+  font-size: 0.875rem;
+  margin: 0 0 1rem 0;
+  color: var(--text-primary);
+}
+
+.upload-zone {
+  border: 2px dashed var(--border);
+  border-radius: var(--radius-md);
+  padding: 2rem 1rem;
+  text-align: center;
+  cursor: pointer;
+  transition: all 0.2s;
+  background: var(--bg-secondary);
+}
+
+.upload-zone:hover {
+  border-color: var(--accent);
+  background: var(--accent-bg);
+}
+
+.upload-zone.dragging {
+  border-color: var(--accent);
+  background: var(--accent-bg);
+}
+
+.upload-zone.uploading {
+  opacity: 0.7;
+  pointer-events: none;
+}
+
+.upload-icon {
+  font-size: 2.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.upload-zone p {
+  margin: 0.25rem 0;
+  font-size: 0.875rem;
+  color: var(--text-secondary);
+}
+
+.upload-hint {
+  font-size: 0.75rem !important;
+  color: var(--text-muted) !important;
+}
+
+.uploading-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.spinner {
+  width: 24px;
+  height: 24px;
+  border: 2px solid var(--border);
+  border-top-color: var(--accent);
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+/* Stickers Tab */
+.stickers-tab h3 {
+  font-size: 0.875rem;
+  margin: 0 0 1rem 0;
+}
+
+.category-pills {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+}
+
+.category-pill {
+  padding: 0.25rem 0.75rem;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--bg-secondary);
+  font-size: 0.75rem;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.category-pill:hover {
+  border-color: var(--accent);
+}
+
+.category-pill.active {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: white;
+}
+
+.sticker-grid {
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  gap: 0.5rem;
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+.sticker-button {
+  font-size: 1.5rem;
+  padding: 0.5rem;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--bg-primary);
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.sticker-button:hover {
+  transform: scale(1.1);
+  border-color: var(--accent);
+}
+
+/* Text Tab */
+.text-tab h3 {
+  font-size: 0.875rem;
+  margin: 0 0 1rem 0;
+}
+
+.text-input-group {
+  margin-bottom: 1rem;
+}
+
+.text-input-group label {
+  display: block;
+  font-size: 0.75rem;
+  color: var(--text-secondary);
+  margin-bottom: 0.25rem;
+}
+
+.text-input,
+.font-select {
+  width: 100%;
+  padding: 0.5rem;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  font-size: 0.875rem;
+}
+
+.text-input:focus,
+.font-select:focus {
+  outline: none;
+  border-color: var(--accent);
+}
+
+.size-slider {
+  width: 100%;
+}
+
+.color-picker-row {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.color-picker {
+  width: 40px;
+  height: 36px;
+  padding: 0;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+}
+
+.color-input {
+  flex: 1;
+  padding: 0.5rem;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+}
+
+.add-text-btn {
+  width: 100%;
+  padding: 0.75rem;
+  background: var(--accent);
+  color: white;
+  border: none;
+  border-radius: var(--radius-md);
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.add-text-btn:hover {
+  background: var(--accent-hover);
+}
+
+.text-preview {
+  margin-top: 1rem;
+  padding: 1rem;
+  background: var(--bg-secondary);
+  border-radius: var(--radius-md);
+  text-align: center;
+}
+
+/* Templates Tab */
+.templates-tab h3 {
+  font-size: 0.875rem;
+  margin: 0 0 1rem 0;
+}
+
+.templates-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 0.75rem;
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+.template-card {
+  display: flex;
+  flex-direction: column;
+  padding: 0.75rem;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  background: var(--bg-primary);
+  cursor: pointer;
+  transition: all 0.2s;
+  text-align: left;
+}
+
+.template-card:hover {
+  border-color: var(--accent);
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-md);
+}
+
+.template-preview {
+  height: 60px;
+  background: var(--bg-tertiary);
+  border-radius: var(--radius-sm);
+  margin-bottom: 0.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.25rem;
+  flex-wrap: wrap;
+  padding: 0.25rem;
+}
+
+.template-preview-element {
+  font-weight: 500;
+}
+
+.template-info {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.template-name {
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--text-primary);
+}
+
+.template-category {
+  font-size: 0.625rem;
+  color: var(--text-muted);
+}
+
+/* Properties Panel */
+.properties-panel {
+  padding: 1rem;
+}
+
+.properties-panel h3 {
+  font-size: 0.875rem;
+  margin: 0 0 1rem 0;
+  color: var(--text-primary);
+}
+
+.no-selection {
+  padding: 2rem 1rem;
+  text-align: center;
+  color: var(--text-muted);
+  font-size: 0.875rem;
+}
+
+.element-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem;
+  background: var(--bg-tertiary);
+  border-radius: var(--radius-md);
+  margin-bottom: 1rem;
+}
+
+.element-icon {
+  font-size: 1.25rem;
+}
+
+.element-name {
+  font-weight: 500;
+  font-size: 0.875rem;
+}
+
+.property-group {
+  margin-bottom: 1rem;
+}
+
+.property-group label {
+  display: block;
+  font-size: 0.75rem;
+  color: var(--text-secondary);
+  margin-bottom: 0.5rem;
+}
+
+.property-row {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.property-input {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.property-label {
+  font-size: 0.75rem;
+  color: var(--text-muted);
+  min-width: 12px;
+}
+
+.property-input input {
+  flex: 1;
+  padding: 0.5rem;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  font-size: 0.875rem;
+  text-align: center;
+}
+
+.property-input input:focus {
+  outline: none;
+  border-color: var(--accent);
+}
+
+.rotation-slider {
+  width: 100%;
+}
+
+.delete-btn {
+  width: 100%;
+  padding: 0.75rem;
+  background: transparent;
+  color: var(--error);
+  border: 1px solid var(--error);
+  border-radius: var(--radius-md);
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.delete-btn:hover {
+  background: var(--error);
+  color: white;
+}
+
+.bg-removal-container {
+  margin-top: 1rem;
+  padding-top: 1rem;
+  border-top: 1px solid var(--border);
+}
+
+.bg-removal-btn {
+  width: 100%;
+  padding: 0.75rem;
+  background: linear-gradient(135deg, #8b5cf6, #ec4899);
+  color: white;
+  border: none;
+  border-radius: var(--radius-md);
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+}
+
+.bg-removal-btn:hover:not(:disabled) {
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-md);
+}
+
+.bg-removal-btn:disabled {
+  opacity: 0.7;
+  cursor: not-allowed;
+}
+
+.bg-removal-hint {
+  font-size: 0.7rem;
+  color: var(--text-muted);
+  margin: 0.5rem 0 0 0;
+  line-height: 1.4;
+}
+
+.spinner-small {
+  width: 16px;
+  height: 16px;
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  border-top-color: white;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+/* Filerobot Editor Overlay */
+.filerobot-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.8);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.filerobot-container {
+  width: 90%;
+  height: 90%;
+  background: #1e1e1e;
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+}
+
+/* Responsive */
+@media (max-width: 900px) {
+  .app-layout {
+    flex-direction: column;
+  }
+
+  .sidebar-container,
+  .properties-container {
+    width: 100%;
+    border: none;
+    border-bottom: 1px solid var(--border);
+  }
+
+  .sidebar-tabs {
+    overflow-x: auto;
+  }
+
+  .sticker-grid {
+    grid-template-columns: repeat(8, 1fr);
+  }
+}

client/src/main.jsx

@@ -1,31 +1,10 @@
-import { StrictMode, useEffect, useState } from 'react'
+import { StrictMode } 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>
-  );
-}
+import App from './App'
 
 createRoot(document.getElementById('root')).render(
   <StrictMode>
-    <AppWithHealth />
+    <App />
   </StrictMode>,
 )