Phase 3: Sidebar & Properties Panel

- Three-column layout (sidebar/canvas/properties)
- Sidebar with tabs: Upload, Stickers, Text
- Upload tab with drag-and-drop and click-to-upload
- Stickers tab with 6 categories (40+ emojis)
- Text tab with font selector, size slider, color picker
- Properties panel with position, size, rotation controls
- Delete button for selected element
- Responsive layout for mobile

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

client/src/App.jsx

@@ -1,5 +1,7 @@
-import { useEffect, useCallback } from 'react';
+import { useEffect } from 'react';
 import { DesignCanvas } from './components/canvas/DesignCanvas';
+import { Sidebar } from './components/sidebar/Sidebar';
+import { PropertiesPanel } from './components/properties/PropertiesPanel';
 import { useDesignEditor } from './hooks/useDesignEditor';
 
 function App() {
@@ -13,10 +15,11 @@ function App() {
     deselectAll,
   } = useDesignEditor();
 
+  const selectedElement = elements.find((el) => el.id === selectedId);
+
   // Keyboard shortcut: Delete/Backspace removes selected element
   useEffect(() => {
     const handleKeyDown = (e) => {
-      // Don't delete if user is typing in an input
       if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') {
         return;
       }
@@ -31,53 +34,73 @@ function App() {
     return () => window.removeEventListener('keydown', handleKeyDown);
   }, [selectedId, deleteElement]);
 
-  // Test: Add sample image on mount (for Phase 2 testing)
+  const handleUpload = (data) => {
-  useEffect(() => {
+    if (data.preview?.url) {
-    // Add a test image element
+      addElement({
-    const testImageId = addElement({
+        type: 'image',
-      type: 'image',
+        x: 75,
-      x: 75,
+        y: 75,
-      y: 75,
+        width: 150,
-      width: 150,
+        height: 150,
-      height: 150,
+        rotation: 0,
-      rotation: 0,
+        src: data.preview.url,
-      src: 'https://placehold.co/150x150/38bdf8/ffffff?text=Test',
+      });
-    });
+    }
-    console.log('Added test image with ID:', testImageId);
+  };
-  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const handleAddElement = (elementData) => {
+    if (elementData.type === 'sticker') {
+      // Convert emoji sticker to a text-like element
+      addElement({
+        type: 'text',
+        text: elementData.emoji,
+        x: elementData.x,
+        y: elementData.y,
+        fontSize: elementData.size,
+        fontFamily: 'Arial',
+        fill: '#000000',
+        rotation: elementData.rotation,
+      });
+    } else if (elementData.type === 'text') {
+      addElement(elementData);
+    }
+  };
 
   return (
-    <div style={{ padding: '2rem', textAlign: 'center' }}>
+    <div className="app-layout">
-      <h1>Apparel Designer</h1>
+      {/* Left Sidebar */}
-      <p style={{ color: 'var(--text-secondary)', marginBottom: '2rem' }}>
+      <aside className="sidebar-container">
-        T-shirt customization editor
+        <Sidebar onElementAdd={handleAddElement} onUpload={handleUpload} />
-      </p>
+      </aside>
 
-      {/* Canvas container */}
+      {/* Center Canvas */}
-      <div style={{ marginBottom: '2rem' }}>
+      <main className="canvas-container">
-        <DesignCanvas
+        <h1 className="app-title">Apparel Designer</h1>
-          elements={elements}
+        <p className="app-subtitle">T-shirt customization editor</p>
-          selectedId={selectedId}
+        <div className="canvas-wrapper">
-          onSelect={selectElement}
+          <DesignCanvas
-          onDeselect={deselectAll}
+            elements={elements}
+            selectedId={selectedId}
+            onSelect={selectElement}
+            onDeselect={deselectAll}
+            onUpdate={updateElement}
+          />
+        </div>
+        <div className="debug-info">
+          <p>Elements: {elements.length}</p>
+          <p>Selected: {selectedId || 'None'}</p>
+          <p className="tip">Tip: Click to select, drag to move, use handles to resize. Press Delete to remove.</p>
+        </div>
+      </main>
+
+      {/* Right Properties Panel */}
+      <aside className="properties-container">
+        <PropertiesPanel
+          selectedElement={selectedElement}
           onUpdate={updateElement}
+          onDelete={deleteElement}
         />
-      </div>
+      </aside>
-
-      {/* Debug info */}
-      <div style={{
-        padding: '1rem',
-        background: 'var(--bg-secondary)',
-        borderRadius: 'var(--radius-md)',
-        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/properties/PropertiesPanel.jsx

@@ -0,0 +1,109 @@
+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>
+
+      <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/Sidebar.jsx

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

client/src/components/sidebar/StickersTab.jsx

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

client/src/components/sidebar/TextTab.jsx

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

client/src/components/sidebar/UploadTab.jsx

@@ -0,0 +1,80 @@
+import { useRef, useState } from 'react';
+
+export function UploadTab({ onUpload }) {
+  const fileInputRef = useRef(null);
+  const [isDragging, setIsDragging] = useState(false);
+  const [uploading, setUploading] = useState(false);
+
+  const handleFile = async (file) => {
+    if (!file || !file.type.startsWith('image/')) return;
+
+    setUploading(true);
+    const formData = new FormData();
+    formData.append('image', file);
+
+    try {
+      const response = await fetch('/api/upload', {
+        method: 'POST',
+        body: formData,
+      });
+
+      if (response.ok) {
+        const data = await response.json();
+        onUpload(data);
+      }
+    } catch (error) {
+      console.error('Upload failed:', error);
+    } finally {
+      setUploading(false);
+    }
+  };
+
+  const handleDrop = (e) => {
+    e.preventDefault();
+    setIsDragging(false);
+    const file = e.dataTransfer.files[0];
+    handleFile(file);
+  };
+
+  const handleDragOver = (e) => {
+    e.preventDefault();
+    setIsDragging(true);
+  };
+
+  const handleDragLeave = () => {
+    setIsDragging(false);
+  };
+
+  return (
+    <div className="upload-tab">
+      <h3>Upload Image</h3>
+      <div
+        className={`upload-zone ${isDragging ? 'dragging' : ''} ${uploading ? 'uploading' : ''}`}
+        onDrop={handleDrop}
+        onDragOver={handleDragOver}
+        onDragLeave={handleDragLeave}
+        onClick={() => fileInputRef.current?.click()}
+      >
+        {uploading ? (
+          <div className="uploading-state">
+            <div className="spinner" />
+            <p>Uploading...</p>
+          </div>
+        ) : (
+          <>
+            <div className="upload-icon">📁</div>
+            <p>Drop image here or click to upload</p>
+            <p className="upload-hint">PNG, JPG, WEBP up to 20MB</p>
+          </>
+        )}
+        <input
+          ref={fileInputRef}
+          type="file"
+          accept="image/*"
+          onChange={(e) => handleFile(e.target.files[0])}
+          style={{ display: 'none' }}
+        />
+      </div>
+    </div>
+  );
+}

client/src/components/sidebar/index.js

@@ -0,0 +1,4 @@
+export { Sidebar } from './Sidebar';
+export { UploadTab } from './UploadTab';
+export { StickersTab } from './StickersTab';
+export { TextTab } from './TextTab';

client/src/index.css

@@ -66,3 +66,448 @@ button {
 input, textarea, select {
   font-family: inherit;
 }
+
+/* App Layout - Three Column */
+.app-layout {
+  display: flex;
+  min-height: 100vh;
+  background: var(--bg-secondary);
+}
+
+.sidebar-container {
+  width: 280px;
+  background: var(--bg-primary);
+  border-right: 1px solid var(--border);
+  flex-shrink: 0;
+  overflow-y: auto;
+}
+
+.canvas-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 2rem;
+  overflow-y: auto;
+}
+
+.properties-container {
+  width: 260px;
+  background: var(--bg-primary);
+  border-left: 1px solid var(--border);
+  flex-shrink: 0;
+  overflow-y: auto;
+}
+
+.app-title {
+  font-size: 1.5rem;
+  font-weight: 600;
+  margin: 0 0 0.5rem 0;
+  color: var(--text-primary);
+}
+
+.app-subtitle {
+  color: var(--text-secondary);
+  margin: 0 0 1.5rem 0;
+  font-size: 0.875rem;
+}
+
+.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;
+}
+
+/* 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;
+}
+
+/* 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);
+  }
+}