tokimeki-image-editor 0.1.13 → 0.2.0

package/dist/components/AnnotationTool.svelte

@@ -0,0 +1,844 @@
+<script lang="ts">import { onMount } from 'svelte';
+import { _ } from 'svelte-i18n';
+import { screenToImageCoords } from '../utils/canvas';
+import { X, Pencil, Eraser, ArrowRight, Square } from 'lucide-svelte';
+let { canvas, image, viewport, transform, annotations, cropArea, onUpdate, onClose, onViewportChange } = $props();
+let containerElement = $state(null);
+// Tool settings
+let currentTool = $state('pen');
+let currentColor = $state('#FF6B6B');
+let strokeWidth = $state(10);
+let shadowEnabled = $state(false);
+// Preset colors - modern bright tones
+const colorPresets = ['#FF6B6B', '#FFA94D', '#FFD93D', '#6BCB77', '#4D96FF', '#9B72F2', '#F8F9FA', '#495057'];
+// Drawing state
+let isDrawing = $state(false);
+let currentAnnotation = $state(null);
+// Helper to get coordinates from mouse or touch event
+function getEventCoords(event) {
+    if ('touches' in event && event.touches.length > 0) {
+        return { clientX: event.touches[0].clientX, clientY: event.touches[0].clientY };
+    }
+    else if ('clientX' in event) {
+        return { clientX: event.clientX, clientY: event.clientY };
+    }
+    return { clientX: 0, clientY: 0 };
+}
+// Convert screen coords to image coords (crop-aware)
+function toImageCoords(clientX, clientY) {
+    if (!canvas || !image)
+        return null;
+    const rect = canvas.getBoundingClientRect();
+    const scaleX = canvas.width / rect.width;
+    const scaleY = canvas.height / rect.height;
+    const canvasX = (clientX - rect.left) * scaleX;
+    const canvasY = (clientY - rect.top) * scaleY;
+    const centerX = canvas.width / 2;
+    const centerY = canvas.height / 2;
+    const totalScale = viewport.scale * viewport.zoom;
+    // Calculate based on crop or full image
+    const sourceWidth = cropArea ? cropArea.width : image.width;
+    const sourceHeight = cropArea ? cropArea.height : image.height;
+    const offsetX = cropArea ? cropArea.x : 0;
+    const offsetY = cropArea ? cropArea.y : 0;
+    // Convert to crop-relative coordinates
+    const relativeX = (canvasX - centerX - viewport.offsetX) / totalScale + sourceWidth / 2;
+    const relativeY = (canvasY - centerY - viewport.offsetY) / totalScale + sourceHeight / 2;
+    // Convert to absolute image coordinates
+    return {
+        x: relativeX + offsetX,
+        y: relativeY + offsetY
+    };
+}
+// Convert image coords to canvas coords for rendering
+function toCanvasCoords(point) {
+    if (!canvas || !image)
+        return null;
+    const centerX = canvas.width / 2;
+    const centerY = canvas.height / 2;
+    const totalScale = viewport.scale * viewport.zoom;
+    const sourceWidth = cropArea ? cropArea.width : image.width;
+    const sourceHeight = cropArea ? cropArea.height : image.height;
+    const offsetX = cropArea ? cropArea.x : 0;
+    const offsetY = cropArea ? cropArea.y : 0;
+    const relativeX = point.x - offsetX;
+    const relativeY = point.y - offsetY;
+    return {
+        x: (relativeX - sourceWidth / 2) * totalScale + centerX + viewport.offsetX,
+        y: (relativeY - sourceHeight / 2) * totalScale + centerY + viewport.offsetY
+    };
+}
+onMount(() => {
+    if (containerElement) {
+        containerElement.addEventListener('touchstart', handleTouchStart, { passive: false });
+        containerElement.addEventListener('touchmove', handleTouchMove, { passive: false });
+        containerElement.addEventListener('touchend', handleTouchEnd, { passive: false });
+    }
+    return () => {
+        if (containerElement) {
+            containerElement.removeEventListener('touchstart', handleTouchStart);
+            containerElement.removeEventListener('touchmove', handleTouchMove);
+            containerElement.removeEventListener('touchend', handleTouchEnd);
+        }
+    };
+});
+function handleMouseDown(event) {
+    if (!canvas || !image)
+        return;
+    if ('button' in event && event.button !== 0)
+        return;
+    const coords = getEventCoords(event);
+    const imagePoint = toImageCoords(coords.clientX, coords.clientY);
+    if (!imagePoint)
+        return;
+    event.preventDefault();
+    if (currentTool === 'eraser') {
+        // Find and remove annotation at click point
+        const canvasPoint = { x: coords.clientX, y: coords.clientY };
+        const rect = canvas.getBoundingClientRect();
+        const localX = canvasPoint.x - rect.left;
+        const localY = canvasPoint.y - rect.top;
+        const scaleX = canvas.width / rect.width;
+        const scaleY = canvas.height / rect.height;
+        const canvasX = localX * scaleX;
+        const canvasY = localY * scaleY;
+        // Check each annotation for hit
+        const hitIndex = findAnnotationAtPoint(canvasX, canvasY);
+        if (hitIndex !== -1) {
+            const updated = annotations.filter((_, i) => i !== hitIndex);
+            onUpdate(updated);
+        }
+        return;
+    }
+    isDrawing = true;
+    if (currentTool === 'pen') {
+        currentAnnotation = {
+            id: `annotation-${Date.now()}`,
+            type: 'pen',
+            color: currentColor,
+            strokeWidth: strokeWidth,
+            points: [imagePoint],
+            shadow: shadowEnabled
+        };
+    }
+    else if (currentTool === 'arrow' || currentTool === 'rectangle') {
+        currentAnnotation = {
+            id: `annotation-${Date.now()}`,
+            type: currentTool,
+            color: currentColor,
+            strokeWidth: strokeWidth,
+            points: [imagePoint, imagePoint],
+            shadow: shadowEnabled
+        };
+    }
+}
+// Minimum distance threshold for pen tool (in image coordinates)
+// This absorbs micro-movements of the mouse
+const MIN_POINT_DISTANCE = 3;
+function handleMouseMove(event) {
+    if (!isDrawing || !currentAnnotation || !canvas || !image)
+        return;
+    const coords = getEventCoords(event);
+    const imagePoint = toImageCoords(coords.clientX, coords.clientY);
+    if (!imagePoint)
+        return;
+    event.preventDefault();
+    if (currentTool === 'pen') {
+        // Check distance from last point to absorb micro-movements
+        const lastPoint = currentAnnotation.points[currentAnnotation.points.length - 1];
+        const dx = imagePoint.x - lastPoint.x;
+        const dy = imagePoint.y - lastPoint.y;
+        const distance = Math.sqrt(dx * dx + dy * dy);
+        // Only add point if it's far enough from the last point
+        if (distance >= MIN_POINT_DISTANCE) {
+            currentAnnotation = {
+                ...currentAnnotation,
+                points: [...currentAnnotation.points, imagePoint]
+            };
+        }
+    }
+    else if (currentTool === 'arrow' || currentTool === 'rectangle') {
+        currentAnnotation = {
+            ...currentAnnotation,
+            points: [currentAnnotation.points[0], imagePoint]
+        };
+    }
+}
+function handleMouseUp(event) {
+    if (!isDrawing || !currentAnnotation) {
+        isDrawing = false;
+        return;
+    }
+    // Only save if annotation has enough points
+    if (currentAnnotation.points.length >= 2 ||
+        (currentAnnotation.type === 'pen' && currentAnnotation.points.length >= 1)) {
+        // For arrow/rectangle, ensure start and end are different
+        if (currentAnnotation.type !== 'pen') {
+            const start = currentAnnotation.points[0];
+            const end = currentAnnotation.points[1];
+            const distance = Math.sqrt(Math.pow(end.x - start.x, 2) + Math.pow(end.y - start.y, 2));
+            if (distance > 5) {
+                onUpdate([...annotations, currentAnnotation]);
+            }
+        }
+        else {
+            onUpdate([...annotations, currentAnnotation]);
+        }
+    }
+    isDrawing = false;
+    currentAnnotation = null;
+}
+function findAnnotationAtPoint(canvasX, canvasY) {
+    const hitRadius = 10;
+    for (let i = annotations.length - 1; i >= 0; i--) {
+        const annotation = annotations[i];
+        const points = annotation.points.map(p => toCanvasCoords(p)).filter(Boolean);
+        if (annotation.type === 'pen') {
+            // Check distance to any segment
+            for (let j = 0; j < points.length - 1; j++) {
+                const dist = pointToSegmentDistance(canvasX, canvasY, points[j], points[j + 1]);
+                if (dist < hitRadius)
+                    return i;
+            }
+        }
+        else if (annotation.type === 'arrow') {
+            if (points.length >= 2) {
+                const dist = pointToSegmentDistance(canvasX, canvasY, points[0], points[1]);
+                if (dist < hitRadius)
+                    return i;
+            }
+        }
+        else if (annotation.type === 'rectangle') {
+            if (points.length >= 2) {
+                const minX = Math.min(points[0].x, points[1].x);
+                const maxX = Math.max(points[0].x, points[1].x);
+                const minY = Math.min(points[0].y, points[1].y);
+                const maxY = Math.max(points[0].y, points[1].y);
+                // Check if near any edge
+                const nearTop = Math.abs(canvasY - minY) < hitRadius && canvasX >= minX - hitRadius && canvasX <= maxX + hitRadius;
+                const nearBottom = Math.abs(canvasY - maxY) < hitRadius && canvasX >= minX - hitRadius && canvasX <= maxX + hitRadius;
+                const nearLeft = Math.abs(canvasX - minX) < hitRadius && canvasY >= minY - hitRadius && canvasY <= maxY + hitRadius;
+                const nearRight = Math.abs(canvasX - maxX) < hitRadius && canvasY >= minY - hitRadius && canvasY <= maxY + hitRadius;
+                if (nearTop || nearBottom || nearLeft || nearRight)
+                    return i;
+            }
+        }
+    }
+    return -1;
+}
+function pointToSegmentDistance(px, py, a, b) {
+    const dx = b.x - a.x;
+    const dy = b.y - a.y;
+    const lengthSq = dx * dx + dy * dy;
+    if (lengthSq === 0) {
+        return Math.sqrt((px - a.x) ** 2 + (py - a.y) ** 2);
+    }
+    let t = ((px - a.x) * dx + (py - a.y) * dy) / lengthSq;
+    t = Math.max(0, Math.min(1, t));
+    const nearestX = a.x + t * dx;
+    const nearestY = a.y + t * dy;
+    return Math.sqrt((px - nearestX) ** 2 + (py - nearestY) ** 2);
+}
+function handleClearAll() {
+    onUpdate([]);
+}
+const handleTouchStart = handleMouseDown;
+const handleTouchMove = handleMouseMove;
+function handleTouchEnd(event) {
+    if (event.touches.length === 0) {
+        handleMouseUp();
+    }
+}
+// Generate smooth SVG path using quadratic bezier curves
+function generateSmoothPath(points) {
+    if (points.length === 0)
+        return '';
+    if (points.length === 1)
+        return `M ${points[0].x} ${points[0].y}`;
+    if (points.length === 2) {
+        return `M ${points[0].x} ${points[0].y} L ${points[1].x} ${points[1].y}`;
+    }
+    let path = `M ${points[0].x} ${points[0].y}`;
+    // Use quadratic bezier curves for smooth lines
+    for (let i = 1; i < points.length - 1; i++) {
+        const prev = points[i - 1];
+        const curr = points[i];
+        const next = points[i + 1];
+        // Calculate control point (midpoint between previous and current)
+        const cpX = curr.x;
+        const cpY = curr.y;
+        // Calculate end point (midpoint between current and next)
+        const endX = (curr.x + next.x) / 2;
+        const endY = (curr.y + next.y) / 2;
+        if (i === 1) {
+            // First segment: line to first midpoint, then curve
+            const firstMidX = (prev.x + curr.x) / 2;
+            const firstMidY = (prev.y + curr.y) / 2;
+            path += ` L ${firstMidX} ${firstMidY}`;
+        }
+        path += ` Q ${cpX} ${cpY} ${endX} ${endY}`;
+    }
+    // Final segment to last point
+    const lastPoint = points[points.length - 1];
+    path += ` L ${lastPoint.x} ${lastPoint.y}`;
+    return path;
+}
+// Get current annotation canvas coordinates
+let currentAnnotationCanvas = $derived.by(() => {
+    if (!currentAnnotation)
+        return null;
+    const points = currentAnnotation.points.map(p => toCanvasCoords(p)).filter(Boolean);
+    return { ...currentAnnotation, canvasPoints: points };
+});
+</script>
+
+<svelte:window
+  onmousemove={handleMouseMove}
+  onmouseup={handleMouseUp}
+/>
+
+<!-- Overlay -->
+<div
+  bind:this={containerElement}
+  class="annotation-tool-overlay"
+  onmousedown={handleMouseDown}
+  role="button"
+  tabindex="-1"
+>
+  <svg class="annotation-tool-svg">
+    <!-- Shadow filter definition -->
+    <defs>
+      <filter id="annotation-shadow" x="-50%" y="-50%" width="200%" height="200%">
+        <feDropShadow dx="2" dy="2" stdDeviation="3" flood-color="rgba(0,0,0,0.5)" />
+      </filter>
+    </defs>
+
+    <!-- Render existing annotations -->
+    {#each annotations as annotation (annotation.id)}
+      {@const points = annotation.points.map(p => toCanvasCoords(p)).filter(Boolean) as { x: number; y: number }[]}
+      {@const totalScale = viewport.scale * viewport.zoom}
+      {@const shadowFilter = annotation.shadow ? 'url(#annotation-shadow)' : 'none'}
+
+      {#if annotation.type === 'pen' && points.length > 0}
+        <path
+          d={generateSmoothPath(points)}
+          fill="none"
+          stroke={annotation.color}
+          stroke-width={annotation.strokeWidth * totalScale}
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          filter={shadowFilter}
+        />
+      {:else if annotation.type === 'arrow' && points.length >= 2}
+        {@const start = points[0]}
+        {@const end = points[1]}
+        {@const angle = Math.atan2(end.y - start.y, end.x - start.x)}
+        {@const scaledStroke = annotation.strokeWidth * totalScale}
+        {@const headLength = scaledStroke * 3}
+        {@const headWidth = scaledStroke * 2}
+        {@const lineEndX = end.x - headLength * 0.7 * Math.cos(angle)}
+        {@const lineEndY = end.y - headLength * 0.7 * Math.sin(angle)}
+
+        <g filter={shadowFilter}>
+          <line
+            x1={start.x}
+            y1={start.y}
+            x2={lineEndX}
+            y2={lineEndY}
+            stroke={annotation.color}
+            stroke-width={scaledStroke}
+            stroke-linecap="round"
+          />
+          <polygon
+            points="{end.x},{end.y} {end.x - headLength * Math.cos(angle) + headWidth * Math.sin(angle)},{end.y - headLength * Math.sin(angle) - headWidth * Math.cos(angle)} {end.x - headLength * Math.cos(angle) - headWidth * Math.sin(angle)},{end.y - headLength * Math.sin(angle) + headWidth * Math.cos(angle)}"
+            fill={annotation.color}
+          />
+        </g>
+      {:else if annotation.type === 'rectangle' && points.length >= 2}
+        {@const x = Math.min(points[0].x, points[1].x)}
+        {@const y = Math.min(points[0].y, points[1].y)}
+        {@const w = Math.abs(points[1].x - points[0].x)}
+        {@const h = Math.abs(points[1].y - points[0].y)}
+        {@const cornerRadius = annotation.strokeWidth * totalScale * 1.5}
+
+        <rect
+          x={x}
+          y={y}
+          width={w}
+          height={h}
+          rx={cornerRadius}
+          ry={cornerRadius}
+          fill="none"
+          stroke={annotation.color}
+          stroke-width={annotation.strokeWidth * totalScale}
+          filter={shadowFilter}
+        />
+      {/if}
+    {/each}
+
+    <!-- Render current annotation being drawn -->
+    {#if currentAnnotationCanvas && currentAnnotationCanvas.canvasPoints.length > 0}
+      {@const points = currentAnnotationCanvas.canvasPoints}
+      {@const totalScale = viewport.scale * viewport.zoom}
+      {@const currentShadowFilter = currentAnnotationCanvas.shadow ? 'url(#annotation-shadow)' : 'none'}
+
+      {#if currentAnnotationCanvas.type === 'pen'}
+        <path
+          d={generateSmoothPath(points)}
+          fill="none"
+          stroke={currentAnnotationCanvas.color}
+          stroke-width={currentAnnotationCanvas.strokeWidth * totalScale}
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          filter={currentShadowFilter}
+        />
+      {:else if currentAnnotationCanvas.type === 'arrow' && points.length >= 2}
+        {@const start = points[0]}
+        {@const end = points[1]}
+        {@const angle = Math.atan2(end.y - start.y, end.x - start.x)}
+        {@const scaledStroke = currentAnnotationCanvas.strokeWidth * totalScale}
+        {@const headLength = scaledStroke * 3}
+        {@const headWidth = scaledStroke * 2}
+        {@const lineEndX = end.x - headLength * 0.7 * Math.cos(angle)}
+        {@const lineEndY = end.y - headLength * 0.7 * Math.sin(angle)}
+
+        <g filter={currentShadowFilter}>
+          <line
+            x1={start.x}
+            y1={start.y}
+            x2={lineEndX}
+            y2={lineEndY}
+            stroke={currentAnnotationCanvas.color}
+            stroke-width={scaledStroke}
+            stroke-linecap="round"
+          />
+          <polygon
+            points="{end.x},{end.y} {end.x - headLength * Math.cos(angle) + headWidth * Math.sin(angle)},{end.y - headLength * Math.sin(angle) - headWidth * Math.cos(angle)} {end.x - headLength * Math.cos(angle) - headWidth * Math.sin(angle)},{end.y - headLength * Math.sin(angle) + headWidth * Math.cos(angle)}"
+            fill={currentAnnotationCanvas.color}
+          />
+        </g>
+      {:else if currentAnnotationCanvas.type === 'rectangle' && points.length >= 2}
+        {@const x = Math.min(points[0].x, points[1].x)}
+        {@const y = Math.min(points[0].y, points[1].y)}
+        {@const w = Math.abs(points[1].x - points[0].x)}
+        {@const h = Math.abs(points[1].y - points[0].y)}
+        {@const cornerRadius = currentAnnotationCanvas.strokeWidth * totalScale * 1.5}
+
+        <rect
+          x={x}
+          y={y}
+          width={w}
+          height={h}
+          rx={cornerRadius}
+          ry={cornerRadius}
+          fill="none"
+          stroke={currentAnnotationCanvas.color}
+          stroke-width={currentAnnotationCanvas.strokeWidth * totalScale}
+          filter={currentShadowFilter}
+        />
+      {/if}
+    {/if}
+  </svg>
+</div>
+
+<!-- Control panel -->
+<div class="annotation-tool-panel">
+  <div class="panel-header">
+    <h3>{$_('editor.annotate')}</h3>
+    <button class="close-btn" onclick={onClose} title={$_('editor.close')}>
+      <X size={20} />
+    </button>
+  </div>
+
+  <div class="panel-content">
+    <!-- Tool selection -->
+    <div class="tool-group">
+      <span class="group-label">{$_('annotate.tool')}</span>
+      <div class="tool-buttons">
+        <button
+          class="tool-btn"
+          class:active={currentTool === 'pen'}
+          onclick={() => currentTool = 'pen'}
+          title={$_('annotate.pen')}
+        >
+          <Pencil size={20} />
+        </button>
+        <button
+          class="tool-btn"
+          class:active={currentTool === 'eraser'}
+          onclick={() => currentTool = 'eraser'}
+          title={$_('annotate.eraser')}
+        >
+          <Eraser size={20} />
+        </button>
+        <button
+          class="tool-btn"
+          class:active={currentTool === 'arrow'}
+          onclick={() => currentTool = 'arrow'}
+          title={$_('annotate.arrow')}
+        >
+          <ArrowRight size={20} />
+        </button>
+        <button
+          class="tool-btn"
+          class:active={currentTool === 'rectangle'}
+          onclick={() => currentTool = 'rectangle'}
+          title={$_('annotate.rectangle')}
+        >
+          <Square size={20} />
+        </button>
+      </div>
+    </div>
+
+    <!-- Color selection -->
+    <div class="control-group">
+      <span class="group-label">{$_('annotate.color')}</span>
+      <div class="color-presets">
+        {#each colorPresets as color}
+          <button
+            class="color-btn"
+            class:active={currentColor === color}
+            style="background-color: {color}; {color === '#ffffff' ? 'border: 1px solid #666;' : ''}"
+            onclick={() => currentColor = color}
+            title={color}
+          ></button>
+        {/each}
+        <input
+          type="color"
+          class="color-picker"
+          value={currentColor}
+          oninput={(e) => currentColor = e.currentTarget.value}
+        />
+      </div>
+    </div>
+
+    <!-- Stroke width -->
+    <div class="control-group">
+      <label for="stroke-width">
+        <span>{$_('annotate.strokeWidth')}</span>
+        <span class="value">{strokeWidth}px</span>
+      </label>
+      <input
+        id="stroke-width"
+        type="range"
+        min="5"
+        max="50"
+        bind:value={strokeWidth}
+      />
+    </div>
+
+    <!-- Shadow toggle -->
+    <div class="control-group">
+      <label class="toggle-label">
+        <span>{$_('annotate.shadow')}</span>
+        <button
+          class="toggle-btn"
+          class:active={shadowEnabled}
+          onclick={() => shadowEnabled = !shadowEnabled}
+          type="button"
+          title={$_('annotate.shadow')}
+        >
+          <span class="toggle-track">
+            <span class="toggle-thumb"></span>
+          </span>
+        </button>
+      </label>
+    </div>
+
+    <!-- Actions -->
+    <div class="panel-actions">
+      <button class="btn btn-danger" onclick={handleClearAll} disabled={annotations.length === 0}>
+        {$_('annotate.clearAll')}
+      </button>
+    </div>
+  </div>
+</div>
+
+<style>
+  .annotation-tool-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    cursor: crosshair;
+    user-select: none;
+  }
+
+  .annotation-tool-svg {
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+  }
+
+  .annotation-tool-panel {
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+    background: rgba(30, 30, 30, 0.95);
+    border: 1px solid #444;
+    border-radius: 8px;
+    padding: 1rem;
+    min-width: 250px;
+    backdrop-filter: blur(10px);
+  }
+
+  @media (max-width: 767px) {
+
+  .annotation-tool-panel {
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: auto;
+      bottom: 0;
+      width: auto;
+      min-width: auto;
+      max-height: 50vh;
+      border-radius: 16px 16px 0 0;
+      z-index: 1001;
+      overflow-y: auto
+  }
+    }
+
+  .panel-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1rem;
+  }
+
+  .panel-header h3 {
+    margin: 0;
+    font-size: 1.1rem;
+    color: #fff;
+  }
+
+  .close-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.25rem;
+    background: transparent;
+    border: none;
+    color: #999;
+    cursor: pointer;
+    border-radius: 4px;
+    transition: all 0.2s;
+  }
+
+  .close-btn:hover {
+    background: #444;
+    color: #fff;
+  }
+
+  .panel-content {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .tool-group,
+  .control-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .group-label {
+    font-size: 0.9rem;
+    color: #ccc;
+  }
+
+  .tool-buttons {
+    display: flex;
+    gap: 0.5rem;
+  }
+
+  .tool-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    background: #333;
+    border: 2px solid transparent;
+    border-radius: 8px;
+    color: #ccc;
+    cursor: pointer;
+    transition: all 0.2s;
+  }
+
+  .tool-btn:hover {
+    background: #444;
+    color: #fff;
+  }
+
+  .tool-btn.active {
+    background: var(--primary-color, #63b97b);
+    border-color: var(--primary-color, #63b97b);
+    color: #fff;
+  }
+
+  .color-presets {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    align-items: center;
+  }
+
+  .color-btn {
+    width: 28px;
+    height: 28px;
+    border-radius: 50%;
+    border: 2px solid transparent;
+    cursor: pointer;
+    transition: all 0.2s;
+  }
+
+  .color-btn:hover {
+    transform: scale(1.1);
+  }
+
+  .color-btn.active {
+    border-color: #fff;
+    box-shadow: 0 0 0 2px var(--primary-color, #63b97b);
+  }
+
+  .color-picker {
+    width: 28px;
+    height: 28px;
+    border: none;
+    border-radius: 50%;
+    padding: 0;
+    cursor: pointer;
+    background: transparent;
+  }
+
+  .color-picker::-webkit-color-swatch-wrapper {
+    padding: 0;
+  }
+
+  .color-picker::-webkit-color-swatch {
+    border-radius: 50%;
+    border: 1px solid #666;
+  }
+
+  .control-group label {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 0.9rem;
+    color: #ccc;
+  }
+
+  .control-group .value {
+    color: var(--primary-color, #63b97b);
+    font-weight: 600;
+  }
+
+  .control-group input[type='range'] {
+    width: 100%;
+    height: 6px;
+    background: #444;
+    border-radius: 3px;
+    outline: none;
+    cursor: pointer;
+  }
+
+  .control-group input[type='range']::-webkit-slider-thumb {
+    appearance: none;
+    width: 16px;
+    height: 16px;
+    background: var(--primary-color, #63b97b);
+    border-radius: 50%;
+    cursor: pointer;
+    transition: all 0.2s;
+  }
+
+  .control-group input[type='range']::-webkit-slider-thumb:hover {
+    transform: scale(1.1);
+  }
+
+  .control-group input[type='range']::-moz-range-thumb {
+    width: 16px;
+    height: 16px;
+    background: var(--primary-color, #63b97b);
+    border: none;
+    border-radius: 50%;
+    cursor: pointer;
+    transition: all 0.2s;
+  }
+
+  .panel-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.5rem;
+    margin-top: 0.5rem;
+  }
+
+  .btn {
+    padding: 0.5rem 1rem;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 0.9rem;
+    transition: all 0.2s;
+  }
+
+  .btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .btn-danger {
+    background: #cc3333;
+    color: #fff;
+  }
+
+  .btn-danger:hover:not(:disabled) {
+    background: #dd4444;
+  }
+
+  .toggle-label {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 0.9rem;
+    color: #ccc;
+  }
+
+  .toggle-btn {
+    background: transparent;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+  }
+
+  .toggle-track {
+    display: block;
+    width: 44px;
+    height: 24px;
+    background: #444;
+    border-radius: 12px;
+    position: relative;
+    transition: background 0.2s;
+  }
+
+  .toggle-btn.active .toggle-track {
+    background: var(--primary-color, #63b97b);
+  }
+
+  .toggle-thumb {
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    width: 20px;
+    height: 20px;
+    background: #fff;
+    border-radius: 50%;
+    transition: transform 0.2s;
+  }
+
+  .toggle-btn.active .toggle-thumb {
+    transform: translateX(20px);
+  }</style>