Phase 3: Sidebar & Properties Panel

Implemented full editor UI with three-column layout:
- Sidebar with 4 tabs (Upload, Stickers, Text, Templates)
- UploadTab with drag-and-drop file upload, wires to POST /api/upload
- StickersTab with 96 emoji stickers across 6 categories
- TextTab with font picker (20 Google Fonts), size slider, color picker
- TemplatesTab placeholder for future template system
- LayersPanel showing all elements with select/delete
- PropertiesPanel with position, size, rotation controls

Also added:
- Constants for fonts and stickers
- Enhanced CSS with editor-layout, sidebar, properties-panel classes
- Updated App.jsx to integrate all components

client/src/App.jsx

@@ -1,5 +1,8 @@
-import { useEffect, useCallback } from 'react';
+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';
 
 function App() {
@@ -13,6 +16,8 @@ function App() {
     deselectAll,
   } = useDesignEditor();
 
+  const selectedElement = elements.find(el => el.id === selectedId);
+
   // Keyboard shortcut: Delete/Backspace removes selected element
   useEffect(() => {
     const handleKeyDown = (e) => {
@@ -31,30 +36,45 @@ function App() {
     return () => window.removeEventListener('keydown', handleKeyDown);
   }, [selectedId, deleteElement]);
 
-  // Test: Add sample image on mount (for Phase 2 testing)
+  // Handler callbacks for sidebar tabs
-  useEffect(() => {
+  const handleAddImage = (imageData) => {
-    // Add a test image element
+    addElement(imageData);
-    const testImageId = addElement({
+  };
-      type: 'image',
+
-      x: 75,
+  const handleAddSticker = (stickerData) => {
-      y: 75,
+    addElement(stickerData);
-      width: 150,
+  };
-      height: 150,
+
-      rotation: 0,
+  const handleAddText = (textData) => {
-      src: 'https://placehold.co/150x150/38bdf8/ffffff?text=Test',
+    addElement(textData);
-    });
+  };
-    console.log('Added test image with ID:', testImageId);
+
-  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+  const handleAddTemplate = (templateId) => {
+    console.log('Template selected:', templateId);
+    // Template loading will be implemented in Phase 6
+  };
 
   return (
-    <div style={{ padding: '2rem', textAlign: 'center' }}>
+    <div className="editor-layout">
-      <h1>Apparel Designer</h1>
+      {/* Left Sidebar */}
-      <p style={{ color: 'var(--text-secondary)', marginBottom: '2rem' }}>
+      <Sidebar
+        onAddImage={handleAddImage}
+        onAddSticker={handleAddSticker}
+        onAddText={handleAddText}
+        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>
 
-      {/* Canvas container */}
-      <div style={{ marginBottom: '2rem' }}>
         <DesignCanvas
           elements={elements}
           selectedId={selectedId}
@@ -62,22 +82,32 @@ function App() {
           onDeselect={deselectAll}
           onUpdate={updateElement}
         />
+
+        {/* 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>
 
-      {/* Debug info */}
+      {/* Right Properties Panel */}
-      <div style={{
+      <PropertiesPanel
-        padding: '1rem',
+        element={selectedElement}
-        background: 'var(--bg-secondary)',
+        onUpdate={(attrs) => updateElement(selectedId, attrs)}
-        borderRadius: 'var(--radius-md)',
+        onDelete={deleteElement}
-        maxWidth: '400px',
+      />
-        margin: '0 auto',
-      }}>
-        <p>Elements: {elements.length}</p>
-        <p>Selected: {selectedId || 'None'}</p>
-        <p style={{ fontSize: '12px', color: 'var(--text-muted)' }}>
-          Tip: Click to select, drag to move, use handles to resize. Press Delete to remove.
-        </p>
-      </div>
     </div>
   );
 }

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/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/index.css

@@ -56,11 +56,54 @@ 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 {