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>

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,213 @@
+import { useEffect } from 'react';
+import { DesignCanvas } from './components/canvas/DesignCanvas';
+import { Sidebar } from './components/sidebar/Sidebar';
+import { LayersPanel } from './components/panels/LayersPanel';
+import { PropertiesPanel } from './components/panels/PropertiesPanel';
+import { useDesignEditor } from './hooks/useDesignEditor';
+import { useExport } from './hooks/useExport';
+
 function App() {
+  const {
+    elements,
+    selectedId,
+    addElement,
+    updateElement,
+    deleteElement,
+    selectElement,
+    deselectAll,
+    undo,
+    redo,
+    canUndo,
+    canRedo,
+    initializeHistory,
+  } = useDesignEditor();
+
+  const { exporting, progress, exportDesign, error, clearExport } = useExport();
+
+  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]);
+
+  // Handler callbacks for sidebar tabs
+  const handleAddImage = (imageData) => {
+    addElement(imageData);
+  };
+
+  const handleAddSticker = (stickerData) => {
+    addElement(stickerData);
+  };
+
+  const handleAddText = (textData) => {
+    addElement(textData);
+  };
+
+  const handleAddTemplate = (template) => {
+    // Apply template elements to canvas
+    if (template && template.elements) {
+      template.elements.forEach((el, index) => {
+        setTimeout(() => addElement({ ...el }), index * 50);
+      });
+    }
+  };
+
   return (
-    <div style={{ padding: '2rem', textAlign: 'center' }}>
+    <div className="editor-layout">
-      <h1>Apparel Designer</h1>
+      {/* Left Sidebar */}
-      <p style={{ color: 'var(--text-secondary)' }}>
+      <Sidebar
-        T-shirt customization editor
+        onAddImage={handleAddImage}
-      </p>
+        onAddSticker={handleAddSticker}
-      <div style={{ marginTop: '2rem', padding: '1rem', background: 'var(--bg-secondary)', borderRadius: 'var(--radius-md)' }}>
+        onAddText={handleAddText}
-        <p>Server Status: <code id="server-status">Checking...</code></p>
+        onAddTemplate={handleAddTemplate}
+      />
+
+      {/* Center Canvas Area */}
+      <div className="canvas-area">
+        <div style={{ marginBottom: '1rem', textAlign: 'center' }}>
+          <h1 style={{ margin: '0 0 0.25rem 0', fontSize: '20px', color: 'var(--text-primary)' }}>
+            Apparel Designer
+          </h1>
+          <p style={{ margin: 0, fontSize: '12px', color: 'var(--text-secondary)' }}>
+            T-shirt customization editor
+          </p>
+        </div>
+
+        <div style={{ display: 'flex', gap: '0.5rem', marginBottom: '1rem' }}>
+          <button
+            onClick={() => canUndo && undo()}
+            disabled={!canUndo}
+            style={{
+              padding: '0.5rem 1rem',
+              border: '1px solid var(--border)',
+              borderRadius: 'var(--radius-md)',
+              background: canUndo ? 'var(--bg-primary)' : 'var(--bg-tertiary)',
+              cursor: canUndo ? 'pointer' : 'not-allowed',
+              opacity: canUndo ? 1 : 0.5,
+            }}
+          >
+            ↶ Undo
+          </button>
+          <button
+            onClick={() => canRedo && redo()}
+            disabled={!canRedo}
+            style={{
+              padding: '0.5rem 1rem',
+              border: '1px solid var(--border)',
+              borderRadius: 'var(--radius-md)',
+              background: canRedo ? 'var(--bg-primary)' : 'var(--bg-tertiary)',
+              cursor: canRedo ? 'pointer' : 'not-allowed',
+              opacity: canRedo ? 1 : 0.5,
+            }}
+          >
+            ↷ Redo
+          </button>
+          <button
+            onClick={() => exportDesign(elements, 'tshirt-design')}
+            disabled={exporting || elements.length === 0}
+            style={{
+              padding: '0.5rem 1rem',
+              border: 'none',
+              borderRadius: 'var(--radius-md)',
+              background: elements.length === 0 ? 'var(--bg-tertiary)' : 'var(--success)',
+              color: elements.length === 0 ? 'var(--text-muted)' : '#fff',
+              cursor: elements.length === 0 ? 'not-allowed' : 'pointer',
+              opacity: elements.length === 0 ? 0.5 : 1,
+              fontWeight: 600,
+            }}
+          >
+            {exporting ? `Exporting... ${progress}%` : '⬇ Export HD'}
+          </button>
+        </div>
+
+        {error && (
+          <div style={{
+            padding: '0.75rem',
+            background: '#fef2f2',
+            border: '1px solid #fecaca',
+            borderRadius: 'var(--radius-md)',
+            color: '#dc2626',
+            fontSize: '12px',
+            marginBottom: '1rem',
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+          }}>
+            <span>⚠️ Export failed: {error}</span>
+            <button onClick={clearExport} style={{ background: 'none', border: 'none', cursor: 'pointer', fontSize: '16px' }}>✕</button>
+          </div>
+        )}
+
+        <DesignCanvas
+          elements={elements}
+          selectedId={selectedId}
+          onSelect={selectElement}
+          onDeselect={deselectAll}
+          onUpdate={(id, attrs) => updateElement(id, attrs)}
+        />
+
+        {/* Layers panel below canvas */}
+        <div style={{
+          marginTop: '1.5rem',
+          width: '100%',
+          maxWidth: '400px',
+          background: 'var(--bg-primary)',
+          borderRadius: 'var(--radius-md)',
+          padding: '1rem',
+          boxShadow: 'var(--shadow-md)',
+        }}>
+          <LayersPanel
+            elements={elements}
+            selectedId={selectedId}
+            onSelect={selectElement}
+            onDelete={deleteElement}
+          />
+        </div>
       </div>
+
+      {/* Right Properties Panel */}
+      <PropertiesPanel
+        element={selectedElement}
+        onUpdate={(attrs) => updateElement(selectedId, attrs)}
+        onDelete={deleteElement}
+      />
     </div>
   );
 }

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/panels/LayersPanel.jsx

@@ -0,0 +1,131 @@
+export function LayersPanel({ elements, selectedId, onSelect, onDelete }) {
+  const getIcon = (element) => {
+    switch (element.type) {
+      case 'image':
+        return element.bgRemoved ? '🖼️' : '📷';
+      case 'text':
+        return '📝';
+      case 'sticker':
+        return '🎨';
+      default:
+        return '📁';
+    }
+  };
+
+  const getName = (element) => {
+    switch (element.type) {
+      case 'image':
+        return element.bgRemoved ? 'Image (BG ✓)' : 'Image';
+      case 'text':
+        return element.text?.substring(0, 20) || 'Text';
+      case 'sticker':
+        return 'Sticker';
+      default:
+        return 'Element';
+    }
+  };
+
+  if (elements.length === 0) {
+    return (
+      <div style={{
+        padding: '1rem',
+        textAlign: 'center',
+        color: 'var(--text-muted)',
+        fontSize: '12px',
+      }}>
+        No elements yet. Add images, text, or stickers to your design.
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <h3 style={{
+        margin: '0 0 0.75rem 0',
+        fontSize: '12px',
+        fontWeight: '600',
+        color: 'var(--text-secondary)',
+        textTransform: 'uppercase',
+      }}>
+        Layers ({elements.length})
+      </h3>
+
+      <div style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '4px',
+      }}>
+        {elements.map((element, index) => (
+          <div
+            key={element.id}
+            onClick={() => onSelect(element.id)}
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: '0.5rem',
+              padding: '0.5rem 0.75rem',
+              background: selectedId === element.id ? 'var(--accent-bg)' : 'transparent',
+              border: `1px solid ${selectedId === element.id ? 'var(--accent)' : 'var(--border)'}`,
+              borderRadius: 'var(--radius-sm)',
+              cursor: 'pointer',
+              transition: 'all 0.15s ease',
+            }}
+            onMouseEnter={(e) => {
+              if (selectedId !== element.id) {
+                e.target.style.borderColor = 'var(--accent)';
+              }
+            }}
+            onMouseLeave={(e) => {
+              if (selectedId !== element.id) {
+                e.target.style.borderColor = 'var(--border)';
+              }
+            }}
+          >
+            <span style={{ fontSize: '14px' }}>{getIcon(element)}</span>
+            <span style={{
+              flex: 1,
+              fontSize: '12px',
+              color: selectedId === element.id ? 'var(--accent)' : 'var(--text-primary)',
+              fontWeight: selectedId === element.id ? '600' : '400',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap',
+            }}>
+              {getName(element)}
+            </span>
+            <button
+              onClick={(e) => {
+                e.stopPropagation();
+                onDelete(element.id);
+              }}
+              style={{
+                width: '24px',
+                height: '24px',
+                border: 'none',
+                borderRadius: 'var(--radius-sm)',
+                background: 'transparent',
+                cursor: 'pointer',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                fontSize: '14px',
+                color: 'var(--text-muted)',
+                transition: 'all 0.15s ease',
+              }}
+              onMouseEnter={(e) => {
+                e.target.style.background = 'var(--error)';
+                e.target.style.color = '#fff';
+              }}
+              onMouseLeave={(e) => {
+                e.target.style.background = 'transparent';
+                e.target.style.color = 'var(--text-muted)';
+              }}
+            >
+              ×
+            </button>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

client/src/components/panels/PropertiesPanel.jsx

@@ -0,0 +1,281 @@
+export function PropertiesPanel({ element, onUpdate, onDelete }) {
+  if (!element) {
+    return (
+      <div className="properties-panel">
+        <div style={{
+          padding: '1rem',
+          borderBottom: `1px solid var(--border)`,
+        }}>
+          <h3 style={{
+            margin: 0,
+            fontSize: '14px',
+            fontWeight: '600',
+            color: 'var(--text-primary)',
+          }}>
+            Properties
+          </h3>
+        </div>
+
+        <div style={{
+          flex: 1,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          padding: '1rem',
+          color: 'var(--text-muted)',
+          fontSize: '12px',
+          textAlign: 'center',
+        }}>
+          Select an element to edit its properties
+        </div>
+      </div>
+    );
+  }
+
+  const handlePositionChange = (axis, value) => {
+    onUpdate({ [axis]: parseFloat(value) || 0 });
+  };
+
+  const handleSizeChange = (axis, value) => {
+    const numValue = parseFloat(value) || 20;
+    onUpdate({ [axis]: Math.max(20, numValue) });
+  };
+
+  const handleRotationChange = (value) => {
+    const numValue = parseFloat(value) || 0;
+    onUpdate({ rotation: Math.max(-180, Math.min(180, numValue)) });
+  };
+
+  return (
+    <div className="properties-panel">
+      <div style={{
+        padding: '1rem',
+        borderBottom: `1px solid var(--border)`,
+      }}>
+        <h3 style={{
+          margin: 0,
+          fontSize: '14px',
+          fontWeight: '600',
+          color: 'var(--text-primary)',
+        }}>
+          Properties
+        </h3>
+      </div>
+
+      <div style={{
+        flex: 1,
+        overflow: 'auto',
+        padding: '1rem',
+      }}>
+        {/* Element type badge */}
+        <div style={{
+          display: 'inline-block',
+          padding: '4px 8px',
+          background: 'var(--accent-bg)',
+          borderRadius: 'var(--radius-sm)',
+          fontSize: '11px',
+          fontWeight: '600',
+          color: 'var(--accent)',
+          textTransform: 'uppercase',
+          marginBottom: '1rem',
+        }}>
+          {element.type}
+        </div>
+
+        {/* Position */}
+        <div style={{ marginBottom: '1rem' }}>
+          <label style={{
+            display: 'block',
+            fontSize: '11px',
+            fontWeight: '600',
+            color: 'var(--text-secondary)',
+            marginBottom: '0.5rem',
+            textTransform: 'uppercase',
+          }}>
+            Position
+          </label>
+          <div style={{ display: 'flex', gap: '0.5rem' }}>
+            <div style={{ flex: 1 }}>
+              <label style={{ fontSize: '10px', color: 'var(--text-muted)' }}>X</label>
+              <input
+                type="number"
+                value={Math.round(element.x)}
+                onChange={(e) => handlePositionChange('x', e.target.value)}
+                style={{
+                  width: '100%',
+                  padding: '0.5rem',
+                  border: `1px solid var(--border)`,
+                  borderRadius: 'var(--radius-sm)',
+                  fontSize: '13px',
+                }}
+              />
+            </div>
+            <div style={{ flex: 1 }}>
+              <label style={{ fontSize: '10px', color: 'var(--text-muted)' }}>Y</label>
+              <input
+                type="number"
+                value={Math.round(element.y)}
+                onChange={(e) => handlePositionChange('y', e.target.value)}
+                style={{
+                  width: '100%',
+                  padding: '0.5rem',
+                  border: `1px solid var(--border)`,
+                  borderRadius: 'var(--radius-sm)',
+                  fontSize: '13px',
+                }}
+              />
+            </div>
+          </div>
+        </div>
+
+        {/* Size (for images and stickers) */}
+        {(element.type === 'image' || element.type === 'sticker') && (
+          <div style={{ marginBottom: '1rem' }}>
+            <label style={{
+              display: 'block',
+              fontSize: '11px',
+              fontWeight: '600',
+              color: 'var(--text-secondary)',
+              marginBottom: '0.5rem',
+              textTransform: 'uppercase',
+            }}>
+              Size
+            </label>
+            <div style={{ display: 'flex', gap: '0.5rem' }}>
+              <div style={{ flex: 1 }}>
+                <label style={{ fontSize: '10px', color: 'var(--text-muted)' }}>W</label>
+                <input
+                  type="number"
+                  value={Math.round(element.width)}
+                  onChange={(e) => handleSizeChange('width', e.target.value)}
+                  style={{
+                    width: '100%',
+                    padding: '0.5rem',
+                    border: `1px solid var(--border)`,
+                    borderRadius: 'var(--radius-sm)',
+                    fontSize: '13px',
+                  }}
+                />
+              </div>
+              <div style={{ flex: 1 }}>
+                <label style={{ fontSize: '10px', color: 'var(--text-muted)' }}>H</label>
+                <input
+                  type="number"
+                  value={Math.round(element.height)}
+                  onChange={(e) => handleSizeChange('height', e.target.value)}
+                  style={{
+                    width: '100%',
+                    padding: '0.5rem',
+                    border: `1px solid var(--border)`,
+                    borderRadius: 'var(--radius-sm)',
+                    fontSize: '13px',
+                  }}
+                />
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* Font size (for text) */}
+        {element.type === 'text' && (
+          <>
+            <div style={{ marginBottom: '1rem' }}>
+              <label style={{
+                display: 'block',
+                fontSize: '11px',
+                fontWeight: '600',
+                color: 'var(--text-secondary)',
+                marginBottom: '0.5rem',
+                textTransform: 'uppercase',
+              }}>
+                Font Size: {Math.round(element.fontSize)}px
+              </label>
+              <input
+                type="range"
+                min="12"
+                max="120"
+                value={element.fontSize}
+                onChange={(e) => onUpdate({ fontSize: parseInt(e.target.value, 10) })}
+                style={{ width: '100%' }}
+              />
+            </div>
+
+            <div style={{ marginBottom: '1rem' }}>
+              <label style={{
+                display: 'block',
+                fontSize: '11px',
+                fontWeight: '600',
+                color: 'var(--text-secondary)',
+                marginBottom: '0.5rem',
+                textTransform: 'uppercase',
+              }}>
+                Color
+              </label>
+              <input
+                type="color"
+                value={element.fill}
+                onChange={(e) => onUpdate({ fill: e.target.value })}
+                style={{
+                  width: '100%',
+                  height: '36px',
+                  border: `1px solid var(--border)`,
+                  borderRadius: 'var(--radius-sm)',
+                  cursor: 'pointer',
+                  padding: '2px',
+                }}
+              />
+            </div>
+          </>
+        )}
+
+        {/* Rotation */}
+        <div style={{ marginBottom: '1rem' }}>
+          <label style={{
+            display: 'block',
+            fontSize: '11px',
+            fontWeight: '600',
+            color: 'var(--text-secondary)',
+            marginBottom: '0.5rem',
+            textTransform: 'uppercase',
+          }}>
+            Rotation: {Math.round(element.rotation)}°
+          </label>
+          <input
+            type="range"
+            min="-180"
+            max="180"
+            value={element.rotation}
+            onChange={(e) => handleRotationChange(e.target.value)}
+            style={{ width: '100%' }}
+          />
+        </div>
+
+        {/* Delete button */}
+        <button
+          onClick={() => onDelete(element.id)}
+          style={{
+            width: '100%',
+            padding: '0.75rem',
+            border: 'none',
+            borderRadius: 'var(--radius-md)',
+            background: 'var(--error)',
+            color: '#fff',
+            fontSize: '13px',
+            fontWeight: '600',
+            cursor: 'pointer',
+            transition: 'all 0.15s ease',
+            marginTop: '1rem',
+          }}
+          onMouseEnter={(e) => {
+            e.target.style.background = '#dc2626';
+          }}
+          onMouseLeave={(e) => {
+            e.target.style.background = 'var(--error)';
+          }}
+        >
+          Delete Element
+        </button>
+      </div>
+    </div>
+  );
+}

client/src/components/panels/index.js

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

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,73 @@
+import { useState } from 'react';
+import { UploadTab } from './UploadTab';
+import { StickersTab } from './StickersTab';
+import { TextTab } from './TextTab';
+import { TemplatesTab } from './TemplatesTab';
+
+const TABS = [
+  { id: 'upload', label: 'Upload', icon: '📁' },
+  { id: 'stickers', label: 'Stickers', icon: '🎨' },
+  { id: 'text', label: 'Text', icon: '📝' },
+  { id: 'templates', label: 'Templates', icon: '📋' },
+];
+
+export function Sidebar({ onAddImage, onAddSticker, onAddText, onAddTemplate }) {
+  const [activeTab, setActiveTab] = useState('upload');
+
+  const renderTabContent = () => {
+    switch (activeTab) {
+      case 'upload':
+        return <UploadTab onAddImage={onAddImage} />;
+      case 'stickers':
+        return <StickersTab onAddSticker={onAddSticker} />;
+      case 'text':
+        return <TextTab onAddText={onAddText} />;
+      case 'templates':
+        return <TemplatesTab onAddTemplate={onAddTemplate} />;
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <div className="sidebar">
+      {/* Tab headers */}
+      <div style={{
+        display: 'flex',
+        borderBottom: `1px solid var(--border)`,
+        background: 'var(--bg-primary)',
+      }}>
+        {TABS.map((tab) => (
+          <button
+            key={tab.id}
+            onClick={() => setActiveTab(tab.id)}
+            style={{
+              flex: 1,
+              padding: '12px 8px',
+              border: 'none',
+              background: 'transparent',
+              cursor: 'pointer',
+              fontSize: '11px',
+              fontWeight: activeTab === tab.id ? '600' : '400',
+              color: activeTab === tab.id ? 'var(--accent)' : 'var(--text-secondary)',
+              borderBottom: activeTab === tab.id ? `2px solid var(--accent)` : '2px solid transparent',
+              transition: 'all 0.15s ease',
+            }}
+          >
+            <div style={{ fontSize: '16px', marginBottom: '2px' }}>{tab.icon}</div>
+            {tab.label}
+          </button>
+        ))}
+      </div>
+
+      {/* Tab content */}
+      <div style={{
+        flex: 1,
+        overflow: 'auto',
+        padding: '1rem',
+      }}>
+        {renderTabContent()}
+      </div>
+    </div>
+  );
+}

client/src/components/sidebar/StickersTab.jsx

@@ -0,0 +1,111 @@
+import { useState } from 'react';
+import { STICKERS, STICKER_CATEGORIES } from '../../constants/stickers';
+
+export function StickersTab({ onAddSticker }) {
+  const [activeCategory, setActiveCategory] = useState('all');
+
+  const categories = ['all', ...STICKER_CATEGORIES];
+
+  const filteredStickers = activeCategory === 'all'
+    ? STICKERS
+    : STICKERS.filter(s => s.category === activeCategory);
+
+  const handleAddSticker = (emoji) => {
+    // Create a canvas element with the emoji
+    const canvas = document.createElement('canvas');
+    const size = 100;
+    canvas.width = size;
+    canvas.height = size;
+    const ctx = canvas.getContext('2d');
+
+    ctx.font = `${size * 0.8}px Arial`;
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+    ctx.fillText(emoji, size / 2, size / 2);
+
+    const dataUrl = canvas.toDataURL('image/png');
+
+    onAddSticker({
+      type: 'sticker',
+      x: 125,
+      y: 125,
+      width: 80,
+      height: 80,
+      rotation: 0,
+      src: dataUrl,
+      emoji,
+    });
+  };
+
+  return (
+    <div>
+      <h3 style={{ margin: '0 0 1rem 0', fontSize: '14px', color: 'var(--text-primary)' }}>
+        Stickers
+      </h3>
+
+      {/* Category pills */}
+      <div style={{
+        display: 'flex',
+        gap: '6px',
+        marginBottom: '1rem',
+        flexWrap: 'wrap',
+      }}>
+        {categories.map((cat) => (
+          <button
+            key={cat}
+            onClick={() => setActiveCategory(cat)}
+            style={{
+              padding: '6px 12px',
+              border: `1px solid ${activeCategory === cat ? 'var(--accent)' : 'var(--border)'}`,
+              borderRadius: 'var(--radius-xl)',
+              background: activeCategory === cat ? 'var(--accent)' : 'var(--bg-primary)',
+              color: activeCategory === cat ? '#fff' : 'var(--text-secondary)',
+              fontSize: '11px',
+              cursor: 'pointer',
+              textTransform: 'capitalize',
+              transition: 'all 0.15s ease',
+            }}
+          >
+            {cat}
+          </button>
+        ))}
+      </div>
+
+      {/* Sticker grid */}
+      <div style={{
+        display: 'grid',
+        gridTemplateColumns: 'repeat(5, 1fr)',
+        gap: '8px',
+      }}>
+        {filteredStickers.map((sticker, index) => (
+          <button
+            key={index}
+            onClick={() => handleAddSticker(sticker.emoji)}
+            style={{
+              aspectRatio: '1',
+              border: 'none',
+              borderRadius: 'var(--radius-md)',
+              background: 'var(--bg-primary)',
+              fontSize: '28px',
+              cursor: 'pointer',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              transition: 'all 0.15s ease',
+            }}
+            onMouseEnter={(e) => {
+              e.target.style.background = 'var(--accent-bg)';
+              e.target.style.transform = 'scale(1.1)';
+            }}
+            onMouseLeave={(e) => {
+              e.target.style.background = 'var(--bg-primary)';
+              e.target.style.transform = 'scale(1)';
+            }}
+          >
+            {sticker.emoji}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}

client/src/components/sidebar/TemplatesTab.jsx

@@ -0,0 +1,133 @@
+export function TemplatesTab({ onAddTemplate }) {
+  const templates = [
+    {
+      id: 'freeform',
+      name: 'Freeform',
+      description: 'No template - design freely',
+      thumbnail: '🎨',
+    },
+    // Placeholder for future templates
+    {
+      id: 'classic-tee-front',
+      name: 'Classic Tee - Front',
+      description: 'Standard front chest print',
+      thumbnail: '👕',
+      disabled: true,
+    },
+    {
+      id: 'classic-tee-back',
+      name: 'Classic Tee - Back',
+      description: 'Full back print',
+      thumbnail: '👕',
+      disabled: true,
+    },
+    {
+      id: 'all-over',
+      name: 'All-Over Print',
+      description: 'Full front coverage',
+      thumbnail: '🎯',
+      disabled: true,
+    },
+  ];
+
+  const handleSelectTemplate = (template) => {
+    if (template.disabled) {
+      alert('This template will be available in a future update');
+      return;
+    }
+    onAddTemplate(template.id);
+  };
+
+  return (
+    <div>
+      <h3 style={{ margin: '0 0 1rem 0', fontSize: '14px', color: 'var(--text-primary)' }}>
+        Templates
+      </h3>
+
+      <div style={{
+        fontSize: '11px',
+        color: 'var(--text-muted)',
+        marginBottom: '1rem',
+        lineHeight: '1.4',
+      }}>
+        Choose a template to constrain your design to specific print zones. Templates will be available in a future update.
+      </div>
+
+      <div style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '0.75rem',
+      }}>
+        {templates.map((template) => (
+          <button
+            key={template.id}
+            onClick={() => handleSelectTemplate(template)}
+            disabled={template.disabled}
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: '0.75rem',
+              padding: '0.75rem',
+              border: `1px solid ${template.disabled ? 'var(--border)' : 'var(--border)'}`,
+              borderRadius: 'var(--radius-md)',
+              background: template.disabled ? 'var(--bg-tertiary)' : 'var(--bg-primary)',
+              cursor: template.disabled ? 'not-allowed' : 'pointer',
+              opacity: template.disabled ? 0.6 : 1,
+              textAlign: 'left',
+              transition: 'all 0.15s ease',
+            }}
+            onMouseEnter={(e) => {
+              if (!template.disabled) {
+                e.target.style.borderColor = 'var(--accent)';
+              }
+            }}
+            onMouseLeave={(e) => {
+              if (!template.disabled) {
+                e.target.style.borderColor = 'var(--border)';
+              }
+            }}
+          >
+            <div style={{
+              width: '48px',
+              height: '48px',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              background: 'var(--bg-tertiary)',
+              borderRadius: 'var(--radius-sm)',
+              fontSize: '24px',
+            }}>
+              {template.thumbnail}
+            </div>
+            <div style={{ flex: 1 }}>
+              <div style={{
+                fontSize: '13px',
+                fontWeight: '600',
+                color: 'var(--text-primary)',
+              }}>
+                {template.name}
+              </div>
+              <div style={{
+                fontSize: '11px',
+                color: 'var(--text-muted)',
+              }}>
+                {template.description}
+              </div>
+            </div>
+            {template.disabled && (
+              <span style={{
+                fontSize: '10px',
+                padding: '2px 6px',
+                background: 'var(--bg-tertiary)',
+                borderRadius: 'var(--radius-sm)',
+                color: 'var(--text-muted)',
+              }}>
+                Soon
+              </span>
+            )}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}

client/src/components/sidebar/TextTab.jsx

@@ -0,0 +1,199 @@
+import { useState } from 'react';
+import { FONTS } from '../../constants/fonts';
+
+export function TextTab({ onAddText }) {
+  const [text, setText] = useState('Your text here');
+  const [fontFamily, setFontFamily] = useState('Roboto');
+  const [fontSize, setFontSize] = useState(48);
+  const [fill, setFill] = useState('#0f172a');
+
+  const handleAddText = () => {
+    onAddText({
+      type: 'text',
+      x: 150,
+      y: 150,
+      text,
+      fontFamily,
+      fontSize,
+      fill,
+      rotation: 0,
+    });
+  };
+
+  return (
+    <div>
+      <h3 style={{ margin: '0 0 1rem 0', fontSize: '14px', color: 'var(--text-primary)' }}>
+        Add Text
+      </h3>
+
+      {/* Text input */}
+      <div style={{ marginBottom: '1rem' }}>
+        <label style={{
+          display: 'block',
+          fontSize: '11px',
+          fontWeight: '600',
+          color: 'var(--text-secondary)',
+          marginBottom: '0.5rem',
+          textTransform: 'uppercase',
+        }}>
+          Text Content
+        </label>
+        <textarea
+          value={text}
+          onChange={(e) => setText(e.target.value)}
+          rows={3}
+          style={{
+            width: '100%',
+            padding: '0.75rem',
+            border: `1px solid var(--border)`,
+            borderRadius: 'var(--radius-md)',
+            fontSize: '14px',
+            fontFamily: 'var(--font-body)',
+            resize: 'vertical',
+          }}
+        />
+      </div>
+
+      {/* Font selector */}
+      <div style={{ marginBottom: '1rem' }}>
+        <label style={{
+          display: 'block',
+          fontSize: '11px',
+          fontWeight: '600',
+          color: 'var(--text-secondary)',
+          marginBottom: '0.5rem',
+          textTransform: 'uppercase',
+        }}>
+          Font
+        </label>
+        <select
+          value={fontFamily}
+          onChange={(e) => setFontFamily(e.target.value)}
+          style={{
+            width: '100%',
+            padding: '0.75rem',
+            border: `1px solid var(--border)`,
+            borderRadius: 'var(--radius-md)',
+            fontSize: '13px',
+            fontFamily,
+            cursor: 'pointer',
+            background: 'var(--bg-primary)',
+          }}
+        >
+          {FONTS.map((font) => (
+            <option key={font.family} value={font.family}>
+              {font.name}
+            </option>
+          ))}
+        </select>
+      </div>
+
+      {/* Font size */}
+      <div style={{ marginBottom: '1rem' }}>
+        <label style={{
+          display: 'block',
+          fontSize: '11px',
+          fontWeight: '600',
+          color: 'var(--text-secondary)',
+          marginBottom: '0.5rem',
+          textTransform: 'uppercase',
+        }}>
+          Font Size: {fontSize}px
+        </label>
+        <input
+          type="range"
+          min="12"
+          max="120"
+          value={fontSize}
+          onChange={(e) => setFontSize(parseInt(e.target.value, 10))}
+          style={{ width: '100%' }}
+        />
+      </div>
+
+      {/* Color picker */}
+      <div style={{ marginBottom: '1rem' }}>
+        <label style={{
+          display: 'block',
+          fontSize: '11px',
+          fontWeight: '600',
+          color: 'var(--text-secondary)',
+          marginBottom: '0.5rem',
+          textTransform: 'uppercase',
+        }}>
+          Color
+        </label>
+        <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
+          <input
+            type="color"
+            value={fill}
+            onChange={(e) => setFill(e.target.value)}
+            style={{
+              width: '40px',
+              height: '40px',
+              border: `1px solid var(--border)`,
+              borderRadius: 'var(--radius-sm)',
+              cursor: 'pointer',
+              padding: '2px',
+            }}
+          />
+          <input
+            type="text"
+            value={fill}
+            onChange={(e) => setFill(e.target.value)}
+            style={{
+              flex: 1,
+              padding: '0.75rem',
+              border: `1px solid var(--border)`,
+              borderRadius: 'var(--radius-md)',
+              fontSize: '13px',
+              fontFamily: 'var(--font-mono)',
+            }}
+          />
+        </div>
+      </div>
+
+      {/* Preview */}
+      <div style={{
+        padding: '1rem',
+        background: 'var(--bg-primary)',
+        borderRadius: 'var(--radius-md)',
+        marginBottom: '1rem',
+        textAlign: 'center',
+      }}>
+        <div style={{
+          fontFamily,
+          fontSize: `${fontSize * 0.5}px`,
+          color: fill,
+          wordBreak: 'break-word',
+        }}>
+          {text}
+        </div>
+      </div>
+
+      {/* Add Text button */}
+      <button
+        onClick={handleAddText}
+        style={{
+          width: '100%',
+          padding: '0.875rem',
+          border: 'none',
+          borderRadius: 'var(--radius-md)',
+          background: 'var(--accent)',
+          color: '#fff',
+          fontSize: '14px',
+          fontWeight: '600',
+          cursor: 'pointer',
+          transition: 'all 0.15s ease',
+        }}
+        onMouseEnter={(e) => {
+          e.target.style.background = 'var(--accent-hover)';
+        }}
+        onMouseLeave={(e) => {
+          e.target.style.background = 'var(--accent)';
+        }}
+      >
+        Add Text to Canvas
+      </button>
+    </div>
+  );
+}

client/src/components/sidebar/UploadTab.jsx

@@ -0,0 +1,150 @@
+import { useRef, useState } from 'react';
+
+export function UploadTab({ onAddImage }) {
+  const fileInputRef = useRef(null);
+  const [isDragging, setIsDragging] = useState(false);
+  const [isUploading, setIsUploading] = useState(false);
+
+  const handleFiles = async (files) => {
+    const file = files[0];
+    if (!file) return;
+
+    // Validate file type
+    const validTypes = ['image/jpeg', 'image/png', 'image/webp'];
+    if (!validTypes.includes(file.type)) {
+      alert('Please upload a JPEG, PNG, or WebP image');
+      return;
+    }
+
+    // Validate file size (20MB)
+    if (file.size > 20 * 1024 * 1024) {
+      alert('File size must be under 20MB');
+      return;
+    }
+
+    setIsUploading(true);
+
+    try {
+      const formData = new FormData();
+      formData.append('image', file);
+
+      const response = await fetch('/api/upload', {
+        method: 'POST',
+        body: formData,
+      });
+
+      if (!response.ok) {
+        throw new Error('Upload failed');
+      }
+
+      const data = await response.json();
+
+      // Add the uploaded image to canvas (use preview for canvas)
+      onAddImage({
+        type: 'image',
+        x: 75,
+        y: 75,
+        width: 150,
+        height: 150,
+        rotation: 0,
+        src: data.preview.url,
+        originalUrl: data.original.url,
+      });
+    } catch (error) {
+      console.error('Upload error:', error);
+      alert('Failed to upload image. Please try again.');
+    } finally {
+      setIsUploading(false);
+    }
+  };
+
+  const handleDragOver = (e) => {
+    e.preventDefault();
+    setIsDragging(true);
+  };
+
+  const handleDragLeave = (e) => {
+    e.preventDefault();
+    setIsDragging(false);
+  };
+
+  const handleDrop = (e) => {
+    e.preventDefault();
+    setIsDragging(false);
+    handleFiles(e.dataTransfer.files);
+  };
+
+  const handleClick = () => {
+    fileInputRef.current?.click();
+  };
+
+  const handleFileChange = (e) => {
+    handleFiles(e.target.files);
+  };
+
+  return (
+    <div>
+      <h3 style={{ margin: '0 0 1rem 0', fontSize: '14px', color: 'var(--text-primary)' }}>
+        Upload Image
+      </h3>
+
+      <div
+        onClick={handleClick}
+        onDragOver={handleDragOver}
+        onDragLeave={handleDragLeave}
+        onDrop={handleDrop}
+        style={{
+          border: `2px dashed ${isDragging ? 'var(--accent)' : 'var(--border)'}`,
+          borderRadius: 'var(--radius-md)',
+          padding: '2rem 1rem',
+          textAlign: 'center',
+          cursor: 'pointer',
+          background: isDragging ? 'var(--accent-bg)' : 'var(--bg-primary)',
+          transition: 'all 0.15s ease',
+          marginBottom: '1rem',
+        }}
+      >
+        <div style={{ fontSize: '32px', marginBottom: '0.5rem' }}>📁</div>
+        <div style={{ fontSize: '13px', color: 'var(--text-secondary)', marginBottom: '0.25rem' }}>
+          Click to upload or drag and drop
+        </div>
+        <div style={{ fontSize: '11px', color: 'var(--text-muted)' }}>
+          JPEG, PNG, WebP (max 20MB)
+        </div>
+      </div>
+
+      <input
+        ref={fileInputRef}
+        type="file"
+        accept="image/jpeg,image/png,image/webp"
+        onChange={handleFileChange}
+        style={{ display: 'none' }}
+      />
+
+      {isUploading && (
+        <div style={{
+          padding: '0.75rem',
+          background: 'var(--accent-bg)',
+          borderRadius: 'var(--radius-sm)',
+          fontSize: '12px',
+          color: 'var(--accent)',
+          textAlign: 'center',
+        }}>
+          Uploading...
+        </div>
+      )}
+
+      <div style={{
+        marginTop: '1rem',
+        padding: '0.75rem',
+        background: 'var(--bg-primary)',
+        borderRadius: 'var(--radius-sm)',
+        fontSize: '11px',
+        color: 'var(--text-muted)',
+        lineHeight: '1.4',
+      }}>
+        <strong>Tip:</strong> After uploading, you can remove the background from your image using the background removal tool.
+      </div>
+    </div>
+  );
+}

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/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' },
+];

client/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' },
+];

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/hooks/useExport.js

@@ -0,0 +1,69 @@
+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') => {
+    setExporting(true);
+    setProgress(0);
+    setError(null);
+    setExportUrl(null);
+
+    try {
+      // Simulate progress during export
+      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 }),
+      });
+
+      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);
+
+      // Trigger download
+      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,
+  };
+}

client/src/index.css

@@ -56,13 +56,742 @@ body {
 
 #root {
   min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Three-column layout */
+.editor-layout {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+}
+
+.sidebar {
+  width: 320px;
+  background: var(--bg-secondary);
+  border-right: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.canvas-area {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: var(--bg-tertiary);
+  overflow: auto;
+  padding: 2rem;
+}
+
+.properties-panel {
+  width: 280px;
+  background: var(--bg-secondary);
+  border-left: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
 }
 
 button {
   font-family: inherit;
   cursor: pointer;
+  outline: none;
+}
+
+button:focus-visible {
+  box-shadow: 0 0 0 2px var(--bg-primary), 0 0 0 4px var(--accent);
 }
 
 input, textarea, select {
   font-family: inherit;
 }
+
+/* App Layout - Three Column */
+.app-layout {
+  display: flex;
+  min-height: 100vh;
+  background: var(--bg-secondary);
+}
+
+.sidebar-container {
+  width: 280px;
+  background: var(--bg-primary);
+  border-right: 1px solid var(--border);
+  flex-shrink: 0;
+  overflow-y: auto;
+}
+
+.canvas-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 2rem;
+  overflow-y: auto;
+}
+
+.properties-container {
+  width: 260px;
+  background: var(--bg-primary);
+  border-left: 1px solid var(--border);
+  flex-shrink: 0;
+  overflow-y: auto;
+}
+
+.app-title {
+  font-size: 1.5rem;
+  font-weight: 600;
+  margin: 0 0 0.25rem 0;
+  color: var(--text-primary);
+}
+
+.app-subtitle {
+  color: var(--text-secondary);
+  margin: 0;
+  font-size: 0.875rem;
+}
+
+.canvas-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 1rem;
+  width: 100%;
+  max-width: 400px;
+}
+
+.canvas-actions {
+  display: flex;
+  gap: 0.75rem;
+  align-items: center;
+}
+
+.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;
+}
+
+.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;
+}
+
+.close-error:hover {
+  color: #991b1b;
+}
+
+.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'
-
+import App from './App'
-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 />
+    <App />
   </StrictMode>,
 )

server/index.js

@@ -3,9 +3,10 @@ import cors from 'cors';
 import multer from 'multer';
 import { v4 as uuidv4 } from 'uuid';
 import sharp from 'sharp';
+import { createCanvas, loadImage, registerFont } from 'canvas';
 import { fileURLToPath } from 'module';
 import { dirname, join } from 'path';
-import { mkdirSync, existsSync } from 'fs';
+import { mkdirSync, existsSync, writeFileSync } from 'fs';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
@@ -120,6 +121,92 @@ app.use((err, req, res, next) => {
   next(err);
 });
 
+// High-resolution export endpoint
+// Canvas: 300x300px preview -> 4500x4500px export (15"x15" @ 300 DPI)
+const EXPORT_SCALE = 15; // 300px * 15 = 4500px
+const EXPORT_SIZE = 4500;
+
+app.post('/api/export', async (req, res) => {
+  try {
+    const { elements, designName = 'design' } = req.body;
+
+    if (!elements || !Array.isArray(elements)) {
+      return res.status(400).json({ error: 'Elements array is required' });
+    }
+
+    // Create high-resolution canvas
+    const canvas = createCanvas(EXPORT_SIZE, EXPORT_SIZE);
+    const ctx = canvas.getContext('2d');
+
+    // White background
+    ctx.fillStyle = '#ffffff';
+    ctx.fillRect(0, 0, EXPORT_SIZE, EXPORT_SIZE);
+
+    // Render each element
+    for (const el of elements) {
+      ctx.save();
+
+      // Transform: translate to element position, rotate, then draw
+      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 {
+          // Load image from URL or local path
+          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;
+
+          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();
+    }
+
+    // Save to file
+    const exportFilename = `${designName.replace(/[^a-z0-9]/gi, '_')}_${uuidv4()}.png`;
+    const exportPath = join(exportsDir, exportFilename);
+    const buffer = canvas.toBuffer('image/png');
+    writeFileSync(exportPath, buffer);
+
+    res.json({
+      success: true,
+      export: {
+        url: `/exports/${exportFilename}`,
+        path: exportPath,
+        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 });
+  }
+});
+
 app.listen(PORT, () => {
   console.log(`Server running on http://localhost:${PORT}`);
   console.log(`Health check: http://localhost:${PORT}/api/health`);