@pixerate/editor-svelte 0.107.0 → 0.109.0

package/dist/image-editor/ImageEditor.svelte

@@ -1,40 +1,21 @@
 <script lang="ts">
+  import { imageDividerClass, imageEditorFrameClass, imageEditorHeaderClass, imageErrorBannerClass, imageHeaderButtonClass, imagePrimaryButtonClass, imageRangeClass, imageSectionClass, imageSectionTitleClass, imageSelectClass, imageSidebarClass, imageSmallButtonClass, imageSpinnerClass, imageTabClass, imageTabListClass } from './styles.js';
   import type {
-    Annotation,
-    CropBox,
-    CropHandle,
     ExportOptions,
     ImageEditorTool,
-    ImagePoint,
     InpaintHook,
     RemoveBackgroundHook,
     ImageEditorAIHooks,
     ImageEditorFit,
   } from '@pixerate/editor/image-editor';
-  import type { AgentPlayback, PlaybackPoint, PlaybackRect, PlaybackRef } from '@pixerate/editor/tools';
-  import { createPlaybackSurface, getAgentPlayback } from '../playback/playback.svelte.js';
-  import PresenceLayer from '../playback/PresenceLayer.svelte';
+  import type { AgentPlayback, PlaybackRef } from '@pixerate/editor/tools';
   import {
-    canvasToImagePoint,
-    imageToCanvasPoint,
-    createImagePlaybackLocator,
-    hitTestCrop,
-    getCropCursor,
-    calculateCropDrag,
-    hitTestAnnotation,
     normalizeProcessVersion,
     LATEST_PROCESS_VERSION,
     IMAGE_ADJUSTMENT_CONTROLS,
     readAdjustmentControls,
     DEFAULT_SELECTION_TOOL_OPTIONS,
-    SelectionGesture,
-    PaintGesture,
-    handlePaintShortcut,
-    pointerPressure,
     FreeTransformTool,
-    getViewportProjection,
-    ShapeDrawGesture,
-    TypeToolGesture,
     DEFAULT_SHAPE_TOOL_OPTIONS,
     DEFAULT_TYPE_TOOL_OPTIONS,
     type SelectionToolOptions,
@@ -42,6 +23,8 @@
     type TextEditSession,
     type TypeToolOptions,
   } from '@pixerate/editor/image-editor';
+  import ImageEditorCanvas from './ImageEditorCanvas.svelte';
+  import type { ImageEditorCanvasErrorSource, ImageEditorCanvasMode } from './canvasTypes.js';
   import ControlSlider from './ControlSlider.svelte';
   import Histogram from './Histogram.svelte';
   import AdjustmentLayersPanel from './AdjustmentLayersPanel.svelte';
@@ -115,204 +98,59 @@
     normalizeProcessVersion(editor.state.adjustments.process) < LATEST_PROCESS_VERSION
   );
 
-  let canvasEl = $state<HTMLCanvasElement | null>(null);
-  let containerEl = $state<HTMLDivElement | null>(null);
   let activeTab = $state<'crop' | 'adjust' | 'layers' | 'paint' | 'select' | 'annotate' | 'depth' | 'ai'>('crop');
   let rootEl = $state<HTMLDivElement | null>(null);
+  /** The tabs with canvas gestures drive the canvas mode; the others only view. */
+  const canvasMode = $derived<ImageEditorCanvasMode>(
+    activeTab === 'crop' || activeTab === 'select' || activeTab === 'paint' || activeTab === 'annotate' ? activeTab : 'none'
+  );
 
-  // Agent playback: the agent's cursor in document pixels, over the whole editor (canvas and panels).
-  const ambientPlayback = getAgentPlayback();
-  const playing = $derived((playback === undefined ? ambientPlayback : playback) ?? null);
-  /** Document pixels → pixels in the editor's root element, through the canvas projection. */
-  const docToRoot = (p: PlaybackPoint): PlaybackPoint => {
-    if (!canvasEl || !rootEl || !canvasEl.width) return p;
-    const r = canvasEl.getBoundingClientRect();
-    const box = rootEl.getBoundingClientRect();
-    const c = imageToCanvasPoint(p, editor.controller.getState(), canvasEl.width, canvasEl.height, activeTab === 'crop');
-    return { x: r.left - box.left + (c.x * r.width) / canvasEl.width, y: r.top - box.top + (c.y * r.height) / canvasEl.height };
-  };
-  /** Viewport (client) pixels → document pixels. */
-  const clientToDoc = (p: PlaybackPoint): PlaybackPoint => {
-    if (!canvasEl || !canvasEl.width) return p;
-    const r = canvasEl.getBoundingClientRect();
-    const sx = r.width > 0 ? canvasEl.width / r.width : 1;
-    const sy = r.height > 0 ? canvasEl.height / r.height : 1;
-    return canvasToImagePoint({ x: (p.x - r.left) * sx, y: (p.y - r.top) * sy }, editor.controller.getState(), canvasEl.width, canvasEl.height, activeTab === 'crop');
-  };
-  /** An element of the editor (a tab, slider or layer row) as a rectangle in document pixels. */
-  const elementRect = (selector: string): PlaybackRect | null => {
-    const r = rootEl?.querySelector(selector)?.getBoundingClientRect();
-    if (!r || r.width <= 0) return null;
-    const a = clientToDoc({ x: r.left, y: r.top });
-    const b = clientToDoc({ x: r.right, y: r.bottom });
-    return { x: Math.min(a.x, b.x), y: Math.min(a.y, b.y), width: Math.abs(b.x - a.x), height: Math.abs(b.y - a.y) };
-  };
-  const agentPresence = createPlaybackSurface(() => playing, () => playbackId, () => ({
-    defaultKind: 'layer',
-    locate: (ref: PlaybackRef) => {
-      if (ref.kind === 'panel') return elementRect(`[data-image-tab="${CSS.escape(ref.id)}"]`);
-      if (ref.kind === 'control') return elementRect(`[data-control-id="${CSS.escape(ref.id)}"]`);
-      return createImagePlaybackLocator(editor.controller)(ref) ?? (ref.kind === 'layer' || ref.kind === 'item' ? elementRect(`[data-layer-id="${CSS.escape(ref.id)}"]`) : null);
-    },
-    open: async (ref: PlaybackRef) => {
-      if (ref.kind !== 'panel' || activeTab === ref.id) return;
-      rootEl?.querySelector<HTMLElement>(`[data-image-tab="${CSS.escape(ref.id)}"]`)?.click();
-      // Let the panel render before the cursor looks for its controls.
-      await new Promise((resolve) => setTimeout(resolve, 60));
-    },
-    bounds: () => {
-      const r = canvasEl?.getBoundingClientRect();
-      if (!r || r.width <= 0) return null;
-      const a = clientToDoc({ x: r.left, y: r.top });
-      const b = clientToDoc({ x: r.right, y: r.bottom });
-      return { x: Math.min(a.x, b.x), y: Math.min(a.y, b.y), width: Math.abs(b.x - a.x), height: Math.abs(b.y - a.y) };
-    },
-    visible: () => {
-      const r = rootEl?.getBoundingClientRect();
-      return !!r && r.width > 0 && r.height > 0 && !(typeof document !== 'undefined' && document.visibilityState === 'hidden');
-    },
-    toViewport: (p: PlaybackPoint) => {
-      const box = rootEl?.getBoundingClientRect();
-      const q = docToRoot(p);
-      return { x: (box?.left ?? 0) + q.x, y: (box?.top ?? 0) + q.y };
-    },
-    fromViewport: clientToDoc,
-    reveal: () => onplaybackreveal?.()
-  }));
+  /** Agent playback opens a panel by clicking its tab, unless it is already open. */
+  async function openPanel(ref: PlaybackRef) {
+    if (ref.kind !== 'panel' || activeTab === ref.id) return;
+    rootEl?.querySelector<HTMLElement>(`[data-image-tab="${CSS.escape(ref.id)}"]`)?.click();
+    // Let the panel render before the cursor looks for its controls.
+    await new Promise((resolve) => setTimeout(resolve, 60));
+  }
 
-  // Selection tools (magic wand, marquees, lasso): options bar state and the pointer gesture.
+  // Tool options for the canvas, set by the options bars.
   let selectionOptions = $state<SelectionToolOptions>({ ...DEFAULT_SELECTION_TOOL_OPTIONS });
-  const selectionGesture = $derived(new SelectionGesture(editor.controller, () => selectionOptions));
-  // Paint tools (Move, Brush, Eraser): the pointer gesture and the brush cursor.
-  const paintGesture = $derived(new PaintGesture(editor.controller));
-  let brushCursor: ImagePoint | null = null;
-
-  // Shape and type tools: their options and gestures; type is edited on the canvas through a hidden textarea.
   let shapeOptions = $state<ShapeToolOptions>({ ...DEFAULT_SHAPE_TOOL_OPTIONS });
   let typeOptions = $state<TypeToolOptions>({ ...DEFAULT_TYPE_TOOL_OPTIONS });
-  const shapeGesture = $derived(new ShapeDrawGesture(editor.controller, () => shapeOptions));
-  const typeTool = $derived(new TypeToolGesture(editor.controller, () => typeOptions));
   let typeSession = $state<TextEditSession | null>(null);
-  let typeInputEl = $state<HTMLTextAreaElement | null>(null);
   let shapeTypeError = $state<string | null>(null);
-  $effect(() => {
-    const s = typeSession;
-    if (!s) return;
-    return untrack(() => s.subscribe(() => void renderCanvas()));
-  });
-  $effect(() => {
-    // End the edit when the tool or tab changes.
-    const keep = activeTab === 'annotate' && editor.state.activeTool === 'type';
-    untrack(() => {
-      if (!keep && typeTool.session) finishTyping();
-    });
-  });
+  let paintError = $state<string | null>(null);
+  let selectionError = $state<string | null>(null);
+  let activeCropRatio = $state<number | null>(null);
+  function handleCanvasError(source: ImageEditorCanvasErrorSource, message: string | null) {
+    if (source === 'paint') paintError = message;
+    else if (source === 'select') selectionError = message;
+    else shapeTypeError = message;
+  }
   function finishTyping() {
-    typeTool.finish();
+    // The canvas finishes the edit when its bound session is cleared.
     typeSession = null;
-    void renderCanvas();
-  }
-  function handleTypeKeyDown(e: KeyboardEvent) {
-    const session = typeTool.session;
-    if (!session || e.isComposing) return;
-    if (e.key === 'Escape') {
-      e.preventDefault();
-      finishTyping();
-      return;
-    }
-    if ((e.metaKey || e.ctrlKey) && ['z', 'y', 'c', 'x', 'v'].includes(e.key.toLowerCase())) return;
-    if (session.handleKey(e)) {
-      e.preventDefault();
-      shapeTypeError = session.error;
-    }
-  }
-  function handleTypeInput(e: Event) {
-    // Composed (IME) and pasted text arrives here; plain keys were handled on keydown.
-    const el = e.currentTarget as HTMLTextAreaElement;
-    const session = typeTool.session;
-    if (session && el.value && !(e as InputEvent).isComposing) {
-      session.insert(el.value);
-      el.value = '';
-    }
-  }
-  function handleTypeComposition(e: CompositionEvent) {
-    const session = typeTool.session;
-    if (session && e.data) session.insert(e.data);
-    (e.currentTarget as HTMLTextAreaElement).value = '';
   }
 
-  // Free Transform (Ctrl/Cmd+T): the shared tool drives a session; its overlay is drawn by the renderer.
+  // Free Transform (Ctrl/Cmd+T): shared with the canvas, which drives and draws it.
   const transformTool = $derived(
     new FreeTransformTool(editor.controller, {
       schedule: (run) => (typeof requestAnimationFrame !== 'undefined' ? requestAnimationFrame(run) : run()),
     })
   );
   let transformTick = $state(0);
-  let transformCursor = $state('default');
   const transformActive = $derived((void transformTick, transformTool.active));
   const transformError = $derived((void transformTick, transformTool.error));
   $effect(() => {
     const tool = transformTool;
     const off = tool.subscribe(() => {
       transformTick++;
-      void renderCanvas();
     });
     return () => {
       off();
       tool.cancel();
     };
   });
-  $effect(() => {
-    if (typeof window === 'undefined') return;
-    const tool = transformTool;
-    const onKey = (e: KeyboardEvent) => {
-      if (tool.key(e)) e.preventDefault();
-    };
-    window.addEventListener('keydown', onKey);
-    return () => window.removeEventListener('keydown', onKey);
-  });
-
-  /** The document point of a pointer event and the hit tolerance (6 screen px). */
-  function transformPoint(e: PointerEvent) {
-    const rect = canvasEl!.getBoundingClientRect();
-    const sx = rect.width > 0 ? canvasEl!.width / rect.width : 1;
-    const sy = rect.height > 0 ? canvasEl!.height / rect.height : 1;
-    const s = editor.controller.getState();
-    const cropping = activeTab === 'crop';
-    const projection = getViewportProjection(s, canvasEl!.width, canvasEl!.height, cropping);
-    const pt = canvasToImagePoint({ x: (e.clientX - rect.left) * sx, y: (e.clientY - rect.top) * sy }, s, canvasEl!.width, canvasEl!.height, cropping);
-    transformTool.setView(projection.scale);
-    return { pt, tolerance: 6 / (projection.scale || 1) };
-  }
-  function handleTransformPointerDown(e: PointerEvent): boolean {
-    if (!transformTool.active || !canvasEl) return false;
-    if (e.button !== 0) return true;
-    e.preventDefault();
-    try {
-      canvasEl.setPointerCapture?.(e.pointerId);
-    } catch {
-      // Synthetic events have no active pointer to capture.
-    }
-    const { pt, tolerance } = transformPoint(e);
-    transformTool.down(pt, tolerance);
-    return true;
-  }
-  function handleTransformPointerMove(e: PointerEvent): boolean {
-    if (!transformTool.active || !canvasEl) return false;
-    const { pt, tolerance } = transformPoint(e);
-    if (e.buttons & 1) transformTool.move(pt, e);
-    else transformCursor = transformTool.cursor(transformTool.hit(pt, tolerance));
-    return true;
-  }
-  function handleTransformPointerUp(): boolean {
-    if (!transformTool.active) return false;
-    transformTool.up();
-    return true;
-  }
-  let paintError = $state<string | null>(null);
-  let selectionDraft = $state.raw<ImagePoint[] | null>(null);
-  let selectionError = $state<string | null>(null);
-  let activeCropRatio = $state<number | null>(null);
 
   // AI state
   let inpaintPrompt = $state('');
@@ -398,24 +236,6 @@
   let fontSize = $state(24);
   let textInput = $state('');
 
-  // Live draft and drag references
-  let draftAnnotation = $state<Annotation | null>(null);
-  let draftCrop = $state<CropBox | null>(null);
-  let cropDragInfo: {
-    handle: CropHandle | 'new';
-    startCanvasPt: ImagePoint;
-    startImgPt: ImagePoint;
-    startCrop: CropBox;
-  } | null = null;
-  let annotationDragInfo: {
-    annId: string;
-    startImgPt: ImagePoint;
-    initialAnn: Annotation;
-  } | null = null;
-  let isDrawing = false;
-  let currentPath: ImagePoint[] = [];
-  let dragStartPoint: ImagePoint | null = null;
-
   // Load the image when `src` changes. Only `src` is tracked: AI edits replace
   // the editor's source with a data URL and must not be reverted to `src`.
   let loadedSrc: string | undefined;
@@ -428,512 +248,12 @@
     });
   });
 
-  async function renderCanvas(overrideAnnotation?: Annotation | null, overrideCrop?: CropBox | null) {
-    if (!canvasEl || !containerEl) return;
-    const vpWidth = containerEl.clientWidth || 800;
-    const vpHeight = containerEl.clientHeight || 500;
-
-    await editor.controller.render(canvasEl, {
-      viewportWidth: vpWidth,
-      viewportHeight: vpHeight,
-      fit,
-      showCropOverlay: activeTab === 'crop',
-      showSelectionOverlay: true,
-      interactive: true,
-      draftAnnotation: overrideAnnotation !== undefined ? overrideAnnotation : draftAnnotation,
-      draftCrop: overrideCrop !== undefined ? overrideCrop : draftCrop,
-      draftSelectionPath: selectionDraft,
-      brushCursor:
-        activeTab === 'paint' && brushCursor && editor.controller.getState().activeTool !== 'move' && !transformTool.active
-          ? { ...brushCursor, diameter: editor.controller.getState().paint.brush.size }
-          : null,
-      freeTransform: transformTool.overlay(),
-      textEdit: typeTool.session?.alive ? typeTool.session.overlay() : null,
-    });
-  }
-
-  // Paint tools: pointer events (coalesced samples, pointer capture) into strokes and moves.
-  function paintSamples(e: PointerEvent) {
-    const events = typeof e.getCoalescedEvents === 'function' ? e.getCoalescedEvents() : [];
-    const list = events.length ? events : [e];
-    const rect = canvasEl!.getBoundingClientRect();
-    const sx = rect.width > 0 ? canvasEl!.width / rect.width : 1;
-    const sy = rect.height > 0 ? canvasEl!.height / rect.height : 1;
-    const s = editor.controller.getState();
-    return list.map((ev) => ({
-      ...canvasToImagePoint({ x: (ev.clientX - rect.left) * sx, y: (ev.clientY - rect.top) * sy }, s, canvasEl!.width, canvasEl!.height, false),
-      pressure: pointerPressure(ev),
-    }));
-  }
-  function handlePaintPointerDown(e: PointerEvent) {
-    if (handleTransformPointerDown(e)) return;
-    if (activeTab !== 'paint' || e.button !== 0 || !canvasEl) return;
-    e.preventDefault();
-    try {
-      canvasEl.setPointerCapture?.(e.pointerId);
-    } catch {
-      // Synthetic events have no active pointer to capture.
-    }
-    paintError = paintGesture.down({ ...paintSamples(e)[0], altKey: e.altKey });
-  }
-  function handlePaintPointerMove(e: PointerEvent) {
-    if (handleTransformPointerMove(e)) return;
-    if (activeTab !== 'paint' || !canvasEl) return;
-    const samples = paintSamples(e);
-    brushCursor = samples[samples.length - 1] ?? null;
-    if (paintGesture.active) paintGesture.moveTo(samples);
-    else void renderCanvas();
-  }
-  function handlePaintPointerUp() {
-    if (handleTransformPointerUp()) return;
-    if (activeTab !== 'paint' || !paintGesture.active) return;
-    paintGesture.up();
-    if (paintGesture.error) paintError = paintGesture.error;
-  }
-
-  $effect(() => {
-    if (activeTab !== 'paint' || typeof window === 'undefined') return;
-    const c = editor.controller;
-    const onKey = (e: KeyboardEvent) => {
-      if (handlePaintShortcut(c, e)) e.preventDefault();
-    };
-    window.addEventListener('keydown', onKey);
-    return () => window.removeEventListener('keydown', onKey);
-  });
-
-  $effect(() => {
-    // Re-render when editor state or activeTab changes
-    void editor.state;
-    void activeTab;
-
-    const raf = typeof requestAnimationFrame !== 'undefined'
-      ? requestAnimationFrame
-      : (cb: () => void) => setTimeout(cb, 0) as unknown as number;
-    const caf = typeof cancelAnimationFrame !== 'undefined'
-      ? cancelAnimationFrame
-      : (id: number) => clearTimeout(id);
-
-    const animId = raf(() => {
-      renderCanvas();
-    });
-    return () => caf(animId);
-  });
-
   $effect(() => {
     if (activeTab === 'crop' && editor.state.activeTool !== 'crop') {
       editor.setTool('crop');
     }
   });
 
-  $effect(() => {
-    if (!containerEl) return;
-    if (typeof ResizeObserver !== 'undefined') {
-      const observer = new ResizeObserver(() => {
-        renderCanvas();
-      });
-      observer.observe(containerEl);
-      return () => observer.disconnect();
-    } else {
-      const handleResize = () => renderCanvas();
-      window.addEventListener('resize', handleResize);
-      return () => window.removeEventListener('resize', handleResize);
-    }
-  });
-
-  function getCanvasEventPoint(e: MouseEvent): ImagePoint {
-    if (!canvasEl) return { x: 0, y: 0 };
-    const rect = canvasEl.getBoundingClientRect();
-    const scaleX = rect.width > 0 ? canvasEl.width / rect.width : 1;
-    const scaleY = rect.height > 0 ? canvasEl.height / rect.height : 1;
-    return {
-      x: (e.clientX - rect.left) * scaleX,
-      y: (e.clientY - rect.top) * scaleY,
-    };
-  }
-
-  function handleMouseDown(e: MouseEvent) {
-    if (!canvasEl || transformTool.active) return;
-    const canvasPt = getCanvasEventPoint(e);
-
-    if (activeTab === 'select') {
-      const gesture = selectionGesture;
-      const imgPt = canvasToImagePoint(canvasPt, editor.state, canvasEl.width, canvasEl.height, false);
-      void gesture.begin(imgPt, e).then(() => (selectionError = gesture.error));
-      return;
-    }
-
-    if (activeTab === 'crop') {
-      const activeCrop = draftCrop || editor.state.crop || {
-        x: 0,
-        y: 0,
-        width: editor.state.imageDimensions.width,
-        height: editor.state.imageDimensions.height,
-      };
-      const handle = hitTestCrop(canvasPt, editor.state, canvasEl.width, canvasEl.height, 14, activeCrop);
-      const startImgPt = canvasToImagePoint(canvasPt, editor.state, canvasEl.width, canvasEl.height, true);
-
-      if (handle) {
-        cropDragInfo = {
-          handle,
-          startCanvasPt: canvasPt,
-          startImgPt,
-          startCrop: activeCrop,
-        };
-      } else {
-        // Clicked outside crop box: start new crop selection
-        cropDragInfo = {
-          handle: 'new',
-          startCanvasPt: canvasPt,
-          startImgPt,
-          startCrop: { x: startImgPt.x, y: startImgPt.y, width: 0, height: 0 },
-        };
-      }
-      return;
-    }
-
-    if (activeTab === 'annotate' && (editor.state.activeTool === 'shape' || editor.state.activeTool === 'type')) {
-      const imgPt = canvasToImagePoint(canvasPt, editor.state, canvasEl.width, canvasEl.height, false);
-      shapeTypeError = null;
-      if (editor.state.activeTool === 'shape') shapeGesture.down(imgPt);
-      else {
-        typeTool.down(imgPt, { shift: e.shiftKey });
-        typeSession = typeTool.session;
-        void renderCanvas();
-      }
-      return;
-    }
-
-    if (activeTab === 'annotate') {
-      const imgPt = canvasToImagePoint(canvasPt, editor.state, canvasEl.width, canvasEl.height, false);
-      dragStartPoint = imgPt;
-
-      if (editor.state.activeTool === 'select') {
-        for (let i = editor.state.annotations.length - 1; i >= 0; i--) {
-          const ann = editor.state.annotations[i];
-          if (hitTestAnnotation(imgPt, ann)) {
-            editor.selectAnnotation(ann.id);
-            annotationDragInfo = {
-              annId: ann.id,
-              startImgPt: imgPt,
-              initialAnn: { ...ann },
-            };
-            return;
-          }
-        }
-        editor.selectAnnotation(null);
-        return;
-      }
-
-      if (editor.state.activeTool === 'pen') {
-        isDrawing = true;
-        currentPath = [imgPt];
-        const draft: Annotation = {
-          id: 'draft',
-          type: 'pen',
-          x: 0,
-          y: 0,
-          points: [imgPt],
-          strokeColor: activeColor,
-          strokeWidth,
-        };
-        draftAnnotation = draft;
-        renderCanvas(draft);
-      }
-    }
-  }
-
-  function handleMouseMove(e: MouseEvent) {
-    if (!canvasEl || transformTool.active) return;
-    const canvasPt = getCanvasEventPoint(e);
-
-    if (activeTab === 'select') {
-      const gesture = selectionGesture;
-      if (gesture.active && gesture.move(canvasToImagePoint(canvasPt, editor.state, canvasEl.width, canvasEl.height, false))) {
-        selectionDraft = gesture.draftPath;
-        renderCanvas();
-      }
-      return;
-    }
-
-    if (activeTab === 'crop') {
-      if (cropDragInfo) {
-        const currentImgPt = canvasToImagePoint(canvasPt, editor.state, canvasEl.width, canvasEl.height, true);
-        let newCrop: CropBox;
-
-        if (cropDragInfo.handle === 'new') {
-          const minX = Math.max(0, Math.min(cropDragInfo.startImgPt.x, currentImgPt.x));
-          const minY = Math.max(0, Math.min(cropDragInfo.startImgPt.y, currentImgPt.y));
-          const maxX = Math.min(editor.state.imageDimensions.width, Math.max(cropDragInfo.startImgPt.x, currentImgPt.x));
-          const maxY = Math.min(editor.state.imageDimensions.height, Math.max(cropDragInfo.startImgPt.y, currentImgPt.y));
-          newCrop = {
-            x: Math.round(minX),
-            y: Math.round(minY),
-            width: Math.round(Math.max(20, maxX - minX)),
-            height: Math.round(Math.max(20, maxY - minY)),
-          };
-        } else {
-          newCrop = calculateCropDrag(
-            cropDragInfo.startCrop,
-            cropDragInfo.handle,
-            cropDragInfo.startImgPt,
-            currentImgPt,
-            editor.state.imageDimensions.width,
-            editor.state.imageDimensions.height,
-            activeCropRatio,
-            editor.state.transform
-          );
-        }
-
-        draftCrop = newCrop;
-        renderCanvas(null, newCrop);
-      } else {
-        const activeCrop = draftCrop || editor.state.crop || {
-          x: 0,
-          y: 0,
-          width: editor.state.imageDimensions.width,
-          height: editor.state.imageDimensions.height,
-        };
-        const handle = hitTestCrop(canvasPt, editor.state, canvasEl.width, canvasEl.height, 14, activeCrop);
-        canvasEl.style.cursor = getCropCursor(handle, editor.state.transform);
-      }
-      return;
-    }
-
-    if (activeTab === 'annotate' && editor.state.activeTool === 'shape') {
-      if (shapeGesture.active) {
-        shapeGesture.move(canvasToImagePoint(canvasPt, editor.state, canvasEl.width, canvasEl.height, false), { shift: e.shiftKey, alt: e.altKey });
-        if (shapeGesture.error) shapeTypeError = shapeGesture.error;
-      }
-      return;
-    }
-
-    if (activeTab === 'annotate') {
-      if (annotationDragInfo) {
-        const currentImgPt = canvasToImagePoint(canvasPt, editor.state, canvasEl.width, canvasEl.height, false);
-        const dx = currentImgPt.x - annotationDragInfo.startImgPt.x;
-        const dy = currentImgPt.y - annotationDragInfo.startImgPt.y;
-        editor.updateAnnotation(annotationDragInfo.annId, {
-          x: Math.round(annotationDragInfo.initialAnn.x + dx),
-          y: Math.round(annotationDragInfo.initialAnn.y + dy),
-        });
-        return;
-      }
-
-      if (!dragStartPoint) {
-        if (editor.state.activeTool === 'select') {
-          const imgPt = canvasToImagePoint(canvasPt, editor.state, canvasEl.width, canvasEl.height, false);
-          let hovered = false;
-          for (let i = editor.state.annotations.length - 1; i >= 0; i--) {
-            if (hitTestAnnotation(imgPt, editor.state.annotations[i])) {
-              hovered = true;
-              break;
-            }
-          }
-          canvasEl.style.cursor = hovered ? 'move' : 'default';
-        } else {
-          canvasEl.style.cursor = 'crosshair';
-        }
-        return;
-      }
-
-      const currentImgPt = canvasToImagePoint(canvasPt, editor.state, canvasEl.width, canvasEl.height, false);
-
-      if (editor.state.activeTool === 'pen' && isDrawing) {
-        currentPath.push(currentImgPt);
-        const draft: Annotation = {
-          id: 'draft',
-          type: 'pen',
-          x: 0,
-          y: 0,
-          points: [...currentPath],
-          strokeColor: activeColor,
-          strokeWidth,
-        };
-        draftAnnotation = draft;
-        renderCanvas(draft);
-      } else if (editor.state.activeTool === 'rect') {
-        const w = currentImgPt.x - dragStartPoint.x;
-        const h = currentImgPt.y - dragStartPoint.y;
-        const draft: Annotation = {
-          id: 'draft',
-          type: 'rect',
-          x: Math.min(dragStartPoint.x, currentImgPt.x),
-          y: Math.min(dragStartPoint.y, currentImgPt.y),
-          width: Math.abs(w),
-          height: Math.abs(h),
-          strokeColor: activeColor,
-          strokeWidth,
-        };
-        draftAnnotation = draft;
-        renderCanvas(draft);
-      } else if (editor.state.activeTool === 'circle') {
-        const rx = Math.abs(currentImgPt.x - dragStartPoint.x) / 2;
-        const ry = Math.abs(currentImgPt.y - dragStartPoint.y) / 2;
-        const draft: Annotation = {
-          id: 'draft',
-          type: 'circle',
-          x: Math.min(dragStartPoint.x, currentImgPt.x) + rx,
-          y: Math.min(dragStartPoint.y, currentImgPt.y) + ry,
-          radiusX: rx,
-          radiusY: ry,
-          strokeColor: activeColor,
-          strokeWidth,
-        };
-        draftAnnotation = draft;
-        renderCanvas(draft);
-      } else if (editor.state.activeTool === 'arrow') {
-        const draft: Annotation = {
-          id: 'draft',
-          type: 'arrow',
-          x: dragStartPoint.x,
-          y: dragStartPoint.y,
-          endX: currentImgPt.x,
-          endY: currentImgPt.y,
-          strokeColor: activeColor,
-          strokeWidth,
-        };
-        draftAnnotation = draft;
-        renderCanvas(draft);
-      } else if (editor.state.activeTool === 'line') {
-        const draft: Annotation = {
-          id: 'draft',
-          type: 'line',
-          x: dragStartPoint.x,
-          y: dragStartPoint.y,
-          endX: currentImgPt.x,
-          endY: currentImgPt.y,
-          strokeColor: activeColor,
-          strokeWidth,
-        };
-        draftAnnotation = draft;
-        renderCanvas(draft);
-      }
-    }
-  }
-
-  function handleMouseUp(e: MouseEvent) {
-    if (!canvasEl || transformTool.active) return;
-    const canvasPt = getCanvasEventPoint(e);
-
-    if (activeTab === 'select') {
-      const gesture = selectionGesture;
-      if (gesture.active) {
-        gesture.end(canvasToImagePoint(canvasPt, editor.state, canvasEl.width, canvasEl.height, false), e);
-        selectionDraft = null;
-        renderCanvas();
-      }
-      return;
-    }
-
-    if (activeTab === 'crop') {
-      if (cropDragInfo) {
-        if (draftCrop && draftCrop.width >= 20 && draftCrop.height >= 20) {
-          editor.setCrop(draftCrop, true);
-        }
-        cropDragInfo = null;
-        draftCrop = null;
-        renderCanvas();
-      }
-      return;
-    }
-
-    if (activeTab === 'annotate' && editor.state.activeTool === 'shape') {
-      shapeGesture.up();
-      return;
-    }
-    if (activeTab === 'annotate' && editor.state.activeTool === 'type') {
-      typeTool.up(canvasToImagePoint(canvasPt, editor.state, canvasEl.width, canvasEl.height, false));
-      typeSession = typeTool.session;
-      if (typeTool.error) shapeTypeError = typeTool.error;
-      void renderCanvas();
-      // Keystrokes go to the hidden textarea while text is being edited.
-      if (typeTool.session) setTimeout(() => typeInputEl?.focus(), 0);
-      return;
-    }
-
-    if (activeTab === 'annotate') {
-      if (annotationDragInfo) {
-        annotationDragInfo = null;
-        return;
-      }
-
-      if (dragStartPoint) {
-        const currentImgPt = canvasToImagePoint(canvasPt, editor.state, canvasEl.width, canvasEl.height, false);
-
-        if (editor.state.activeTool === 'pen' && isDrawing) {
-          if (currentPath.length > 1) {
-            editor.addAnnotation({
-              type: 'pen',
-              x: 0,
-              y: 0,
-              points: [...currentPath],
-              strokeColor: activeColor,
-              strokeWidth,
-            });
-          }
-          isDrawing = false;
-          currentPath = [];
-        } else if (editor.state.activeTool === 'rect') {
-          const w = Math.abs(currentImgPt.x - dragStartPoint.x);
-          const h = Math.abs(currentImgPt.y - dragStartPoint.y);
-          if (w > 4 && h > 4) {
-            editor.addAnnotation({
-              type: 'rect',
-              x: Math.min(dragStartPoint.x, currentImgPt.x),
-              y: Math.min(dragStartPoint.y, currentImgPt.y),
-              width: w,
-              height: h,
-              strokeColor: activeColor,
-              strokeWidth,
-            });
-          }
-        } else if (editor.state.activeTool === 'circle') {
-          const rx = Math.abs(currentImgPt.x - dragStartPoint.x) / 2;
-          const ry = Math.abs(currentImgPt.y - dragStartPoint.y) / 2;
-          if (rx > 4 && ry > 4) {
-            editor.addAnnotation({
-              type: 'circle',
-              x: Math.min(dragStartPoint.x, currentImgPt.x) + rx,
-              y: Math.min(dragStartPoint.y, currentImgPt.y) + ry,
-              radiusX: rx,
-              radiusY: ry,
-              strokeColor: activeColor,
-              strokeWidth,
-            });
-          }
-        } else if (editor.state.activeTool === 'arrow') {
-          if (Math.hypot(currentImgPt.x - dragStartPoint.x, currentImgPt.y - dragStartPoint.y) > 4) {
-            editor.addAnnotation({
-              type: 'arrow',
-              x: dragStartPoint.x,
-              y: dragStartPoint.y,
-              endX: currentImgPt.x,
-              endY: currentImgPt.y,
-              strokeColor: activeColor,
-              strokeWidth,
-            });
-          }
-        } else if (editor.state.activeTool === 'line') {
-          if (Math.hypot(currentImgPt.x - dragStartPoint.x, currentImgPt.y - dragStartPoint.y) > 4) {
-            editor.addAnnotation({
-              type: 'line',
-              x: dragStartPoint.x,
-              y: dragStartPoint.y,
-              endX: currentImgPt.x,
-              endY: currentImgPt.y,
-              strokeColor: activeColor,
-              strokeWidth,
-            });
-          }
-        }
-
-        draftAnnotation = null;
-        dragStartPoint = null;
-        renderCanvas();
-      }
-    }
-  }
-
   function handleAddText() {
     if (!textInput.trim()) return;
     editor.addAnnotation({
@@ -962,16 +282,13 @@
 
 <div
   bind:this={rootEl}
-  class="relative flex flex-col bg-slate-900 border border-slate-800 rounded-xl overflow-hidden shadow-2xl text-slate-100 {className}"
+  class="{imageEditorFrameClass} {className}"
   {style}
 >
-  {#if playing}
-    <PresenceLayer presence={agentPresence} viewport={docToRoot} />
-  {/if}
   <!-- Top Action Header -->
-  <div class="flex flex-wrap items-center justify-between px-4 py-3 bg-slate-950/80 border-b border-slate-800 gap-3">
+  <div class={imageEditorHeaderClass}>
     <!-- Navigation Tabs -->
-    <div class="flex items-center gap-1 bg-slate-900 p-1 rounded-lg border border-slate-800 text-xs">
+    <div role="tablist" class={imageTabListClass}>
       <button
         type="button"
         data-image-tab="crop"
@@ -979,9 +296,7 @@
           activeTab = 'crop';
           editor.setTool('crop');
         }}
-        class="px-3 py-1.5 rounded-md font-medium transition-colors {activeTab === 'crop'
-          ? 'bg-indigo-600 text-white shadow'
-          : 'text-slate-400 hover:text-slate-200'}"
+        role="tab" aria-selected={activeTab === 'crop'} class="{imageTabClass(activeTab === 'crop')}"
       >
         Transform & Crop
       </button>
@@ -992,9 +307,7 @@
           activeTab = 'adjust';
           editor.setTool('select');
         }}
-        class="px-3 py-1.5 rounded-md font-medium transition-colors {activeTab === 'adjust'
-          ? 'bg-indigo-600 text-white shadow'
-          : 'text-slate-400 hover:text-slate-200'}"
+        role="tab" aria-selected={activeTab === 'adjust'} class="{imageTabClass(activeTab === 'adjust')}"
       >
         Adjustments
       </button>
@@ -1005,9 +318,7 @@
           activeTab = 'layers';
           editor.setTool('select');
         }}
-        class="px-3 py-1.5 rounded-md font-medium transition-colors {activeTab === 'layers'
-          ? 'bg-indigo-600 text-white shadow'
-          : 'text-slate-400 hover:text-slate-200'}"
+        role="tab" aria-selected={activeTab === 'layers'} class="{imageTabClass(activeTab === 'layers')}"
       >
         Layers
       </button>
@@ -1018,9 +329,7 @@
           activeTab = 'paint';
           editor.setTool('brush');
         }}
-        class="px-3 py-1.5 rounded-md font-medium transition-colors {activeTab === 'paint'
-          ? 'bg-indigo-600 text-white shadow'
-          : 'text-slate-400 hover:text-slate-200'}"
+        role="tab" aria-selected={activeTab === 'paint'} class="{imageTabClass(activeTab === 'paint')}"
       >
         Paint
       </button>
@@ -1031,9 +340,7 @@
           activeTab = 'select';
           editor.setTool('select');
         }}
-        class="px-3 py-1.5 rounded-md font-medium transition-colors {activeTab === 'select'
-          ? 'bg-indigo-600 text-white shadow'
-          : 'text-slate-400 hover:text-slate-200'}"
+        role="tab" aria-selected={activeTab === 'select'} class="{imageTabClass(activeTab === 'select')}"
       >
         Select & Mask
       </button>
@@ -1044,9 +351,7 @@
           activeTab = 'annotate';
           editor.setTool('pen');
         }}
-        class="px-3 py-1.5 rounded-md font-medium transition-colors {activeTab === 'annotate'
-          ? 'bg-indigo-600 text-white shadow'
-          : 'text-slate-400 hover:text-slate-200'}"
+        role="tab" aria-selected={activeTab === 'annotate'} class="{imageTabClass(activeTab === 'annotate')}"
       >
         Annotations
       </button>
@@ -1057,9 +362,7 @@
           activeTab = 'depth';
           editor.setTool('select');
         }}
-        class="px-3 py-1.5 rounded-md font-medium transition-colors {activeTab === 'depth'
-          ? 'bg-indigo-600 text-white shadow'
-          : 'text-slate-400 hover:text-slate-200'}"
+        role="tab" aria-selected={activeTab === 'depth'} class="{imageTabClass(activeTab === 'depth')}"
       >
         Depth Mask
       </button>
@@ -1070,9 +373,7 @@
           activeTab = 'ai';
           editor.setTool('select');
         }}
-        class="px-3 py-1.5 rounded-md font-medium transition-colors flex items-center gap-1.5 {activeTab === 'ai'
-          ? 'bg-indigo-600 text-white shadow'
-          : 'text-slate-400 hover:text-slate-200'}"
+        role="tab" aria-selected={activeTab === 'ai'} class="{imageTabClass(activeTab === 'ai')} flex items-center gap-1.5"
       >
         <svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
           <path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"/>
@@ -1087,7 +388,7 @@
         type="button"
         disabled={!editor.canUndo}
         onclick={() => editor.undo()}
-        class="p-1.5 rounded-lg border border-slate-800 bg-slate-900 text-slate-300 disabled:opacity-40 disabled:cursor-not-allowed hover:bg-slate-800"
+        class={imageHeaderButtonClass}
         title="Undo"
       >
         ↩
@@ -1096,7 +397,7 @@
         type="button"
         disabled={!editor.canRedo}
         onclick={() => editor.redo()}
-        class="p-1.5 rounded-lg border border-slate-800 bg-slate-900 text-slate-300 disabled:opacity-40 disabled:cursor-not-allowed hover:bg-slate-800"
+        class={imageHeaderButtonClass}
         title="Redo"
       >
         ↪
@@ -1104,33 +405,33 @@
       <button
         type="button"
         onclick={() => editor.reset()}
-        class="px-2 py-1.5 rounded-lg border border-slate-800 bg-slate-900 text-slate-400 hover:text-slate-200 hover:bg-slate-800"
+        class="{imageHeaderButtonClass} px-2 text-muted-foreground"
       >
         Reset
       </button>
 
-      <div class="h-4 w-px bg-slate-800 mx-1"></div>
+      <div class="h-4 w-px bg-muted mx-1"></div>
 
       <!-- Zoom -->
       <button
         type="button"
         onclick={() => editor.zoomOut()}
-        class="p-1.5 rounded-lg border border-slate-800 bg-slate-900 text-slate-300 hover:bg-slate-800"
+        class={imageHeaderButtonClass}
         title="Zoom Out"
       >
         -
       </button>
-      <span class="font-mono text-slate-400 w-10 text-center">{Math.round(editor.state.zoom * 100)}%</span>
+      <span class="font-mono text-muted-foreground w-10 text-center">{Math.round(editor.state.zoom * 100)}%</span>
       <button
         type="button"
         onclick={() => editor.zoomIn()}
-        class="p-1.5 rounded-lg border border-slate-800 bg-slate-900 text-slate-300 hover:bg-slate-800"
+        class={imageHeaderButtonClass}
         title="Zoom In"
       >
         +
       </button>
 
-      <div class="h-4 w-px bg-slate-800 mx-1"></div>
+      <div class="h-4 w-px bg-muted mx-1"></div>
 
       <!-- Live Compare -->
       <button
@@ -1138,7 +439,7 @@
         onmousedown={() => editor.setComparing(true)}
         onmouseup={() => editor.setComparing(false)}
         onmouseleave={() => editor.setComparing(false)}
-        class="px-2.5 py-1.5 rounded-lg border border-slate-800 bg-slate-900 text-amber-400 hover:bg-slate-800 select-none active:bg-amber-950/40"
+        class="px-2.5 py-1.5 rounded-lg border border-border bg-background text-amber-600 hover:bg-muted select-none active:bg-amber-500/10"
       >
         Hold Compare
       </button>
@@ -1147,7 +448,7 @@
       <button
         type="button"
         onclick={handleExport}
-        class="px-4 py-1.5 rounded-lg bg-emerald-600 hover:bg-emerald-500 text-white font-medium shadow-md shadow-emerald-900/30 transition-colors"
+        class="{imagePrimaryButtonClass} px-4 py-1.5"
       >
         Export Image
       </button>
@@ -1157,53 +458,40 @@
   <!-- Main Viewport + Sidebar Layout -->
   <!-- Free Transform options bar (Ctrl/Cmd+T), above the viewport while a transform is open -->
   {#if transformActive}
-    <FreeTransformOptionsBar tool={transformTool} class="border-b border-slate-800 bg-slate-900/95 px-4 py-2" />
+    <FreeTransformOptionsBar tool={transformTool} class="border-b border-border bg-background/95 px-4 py-2" />
   {:else if transformError}
-    <div role="alert" class="border-b border-rose-900 bg-rose-950/80 px-4 py-1.5 text-xs text-rose-200">{transformError}</div>
+    <div role="alert" class={imageErrorBannerClass}>{transformError}</div>
   {/if}
 
   <div class="flex flex-col md:flex-row flex-1 min-h-[520px] md:h-[560px]">
     <!-- Canvas Area -->
-    <div
-      bind:this={containerEl}
-      class="relative flex-1 h-[360px] md:h-full min-h-[320px] bg-slate-950 overflow-hidden select-none"
-    >
-      <canvas
-        bind:this={canvasEl}
-        onmousedown={handleMouseDown}
-        onmousemove={handleMouseMove}
-        onmouseup={handleMouseUp}
-        onmouseleave={handleMouseUp}
-        onpointerdown={handlePaintPointerDown}
-        onpointermove={handlePaintPointerMove}
-        onpointerup={handlePaintPointerUp}
-        onpointercancel={() => paintGesture.cancel()}
-        data-testid="image-editor-canvas"
-        style={transformActive ? `cursor: ${transformCursor}` : undefined}
-        class="absolute inset-0 w-full h-full block {transformActive ? 'touch-none' : activeTab === 'paint' ? 'touch-none cursor-crosshair' : activeTab === 'annotate' && editor.state.activeTool === 'type' ? 'cursor-text' : activeTab === 'annotate' && editor.state.activeTool === 'shape' ? 'cursor-crosshair' : ''}"
-      ></canvas>
-      {#if typeSession}
-        <textarea
-          bind:this={typeInputEl}
-          aria-label="Edit text"
-          data-testid="type-input"
-          autocapitalize="off"
-          spellcheck={false}
-          onkeydown={handleTypeKeyDown}
-          oninput={handleTypeInput}
-          oncompositionend={handleTypeComposition}
-          class="absolute left-0 top-0 h-px w-px opacity-0"
-        ></textarea>
-      {/if}
-
-    </div>
+    <ImageEditorCanvas
+      {editor}
+      mode={canvasMode}
+      {fit}
+      {selectionOptions}
+      {shapeOptions}
+      {typeOptions}
+      annotationColor={activeColor}
+      annotationWidth={strokeWidth}
+      cropRatio={activeCropRatio}
+      onerror={handleCanvasError}
+      bind:typeSession
+      {transformTool}
+      {playback}
+      {playbackId}
+      {onplaybackreveal}
+      chromeRoot={() => rootEl}
+      open={openPanel}
+      class="flex-1 h-[360px] md:h-full min-h-[320px] bg-muted"
+    />
 
     <!-- Tab Controls Sidebar -->
-    <div class="w-full md:w-80 bg-slate-900/90 border-t md:border-t-0 md:border-l border-slate-800 p-4 overflow-y-auto h-auto md:h-full md:max-h-[560px]">
+    <div class={imageSidebarClass}>
       <!-- TAB 1: CROP & TRANSFORM -->
       {#if activeTab === 'crop'}
         <div class="flex flex-col gap-4 text-xs">
-          <span class="font-semibold text-slate-200 uppercase tracking-wider text-[11px]">
+          <span class={imageSectionTitleClass}>
             Aspect Ratio Presets
           </span>
           <div class="grid grid-cols-3 gap-2">
@@ -1214,8 +502,8 @@
                 editor.applyCropPreset(null);
               }}
               class="px-2.5 py-2 rounded-lg border font-medium {activeCropRatio === null && editor.state.crop
-                ? 'bg-indigo-600 border-indigo-500 text-white'
-                : 'bg-slate-800 hover:bg-slate-700 text-slate-200 border-slate-700'}"
+                ? 'bg-primary border-primary text-primary-foreground'
+                : 'bg-muted hover:bg-accent text-foreground border-border'}"
             >
               Freeform
             </button>
@@ -1226,8 +514,8 @@
                 editor.applyCropPreset(1);
               }}
               class="px-2.5 py-2 rounded-lg border font-medium {activeCropRatio === 1
-                ? 'bg-indigo-600 border-indigo-500 text-white'
-                : 'bg-slate-800 hover:bg-slate-700 text-slate-200 border-slate-700'}"
+                ? 'bg-primary border-primary text-primary-foreground'
+                : 'bg-muted hover:bg-accent text-foreground border-border'}"
             >
               1:1 Square
             </button>
@@ -1238,8 +526,8 @@
                 editor.applyCropPreset(4 / 3);
               }}
               class="px-2.5 py-2 rounded-lg border font-medium {activeCropRatio === 4 / 3
-                ? 'bg-indigo-600 border-indigo-500 text-white'
-                : 'bg-slate-800 hover:bg-slate-700 text-slate-200 border-slate-700'}"
+                ? 'bg-primary border-primary text-primary-foreground'
+                : 'bg-muted hover:bg-accent text-foreground border-border'}"
             >
               4:3 Standard
             </button>
@@ -1250,8 +538,8 @@
                 editor.applyCropPreset(16 / 9);
               }}
               class="px-2.5 py-2 rounded-lg border font-medium {activeCropRatio === 16 / 9
-                ? 'bg-indigo-600 border-indigo-500 text-white'
-                : 'bg-slate-800 hover:bg-slate-700 text-slate-200 border-slate-700'}"
+                ? 'bg-primary border-primary text-primary-foreground'
+                : 'bg-muted hover:bg-accent text-foreground border-border'}"
             >
               16:9 Wide
             </button>
@@ -1262,8 +550,8 @@
                 editor.applyCropPreset(3 / 2);
               }}
               class="px-2.5 py-2 rounded-lg border font-medium {activeCropRatio === 3 / 2
-                ? 'bg-indigo-600 border-indigo-500 text-white'
-                : 'bg-slate-800 hover:bg-slate-700 text-slate-200 border-slate-700'}"
+                ? 'bg-primary border-primary text-primary-foreground'
+                : 'bg-muted hover:bg-accent text-foreground border-border'}"
             >
               3:2 Photo
             </button>
@@ -1273,29 +561,29 @@
                 activeCropRatio = null;
                 editor.resetCrop();
               }}
-              class="px-2.5 py-2 rounded-lg bg-rose-950/40 hover:bg-rose-900/60 text-rose-300 border border-rose-800/40 font-medium"
+              class="px-2.5 py-2 rounded-lg bg-destructive/10 hover:bg-destructive/20 text-destructive border border-destructive/40 font-medium"
             >
               Clear Crop
             </button>
           </div>
 
-          <div class="h-px bg-slate-800 my-1"></div>
+          <div class={imageDividerClass}></div>
 
-          <span class="font-semibold text-slate-200 uppercase tracking-wider text-[11px]">
+          <span class={imageSectionTitleClass}>
             Orientation & Flips
           </span>
           <div class="grid grid-cols-2 gap-2">
             <button
               type="button"
               onclick={() => editor.rotate(-90)}
-              class="px-3 py-2 rounded-lg bg-slate-800 hover:bg-slate-700 text-slate-200 border border-slate-700"
+              class="px-3 py-2 rounded-lg bg-muted hover:bg-accent text-foreground border border-border"
             >
               Rotate -90°
             </button>
             <button
               type="button"
               onclick={() => editor.rotate(90)}
-              class="px-3 py-2 rounded-lg bg-slate-800 hover:bg-slate-700 text-slate-200 border border-slate-700"
+              class="px-3 py-2 rounded-lg bg-muted hover:bg-accent text-foreground border border-border"
             >
               Rotate +90°
             </button>
@@ -1303,8 +591,8 @@
               type="button"
               onclick={() => editor.flipHorizontal()}
               class="px-3 py-2 rounded-lg border transition-colors {editor.state.transform.flipH
-                ? 'bg-indigo-600 border-indigo-500 text-white'
-                : 'bg-slate-800 border-slate-700 text-slate-200 hover:bg-slate-700'}"
+                ? 'bg-primary border-primary text-primary-foreground'
+                : 'bg-muted border-border text-foreground hover:bg-accent'}"
             >
               Flip Horizontal
             </button>
@@ -1312,8 +600,8 @@
               type="button"
               onclick={() => editor.flipVertical()}
               class="px-3 py-2 rounded-lg border transition-colors {editor.state.transform.flipV
-                ? 'bg-indigo-600 border-indigo-500 text-white'
-                : 'bg-slate-800 border-slate-700 text-slate-200 hover:bg-slate-700'}"
+                ? 'bg-primary border-primary text-primary-foreground'
+                : 'bg-muted border-border text-foreground hover:bg-accent'}"
             >
               Flip Vertical
             </button>
@@ -1325,13 +613,13 @@
       {#if activeTab === 'adjust'}
         <div class="flex flex-col gap-3 text-xs">
           <div class="flex items-center justify-between">
-            <span class="font-semibold text-slate-200 uppercase tracking-wider text-[11px]">
+            <span class={imageSectionTitleClass}>
               Color Adjustments
             </span>
             <button
               type="button"
               onclick={() => editor.resetAdjustments()}
-              class="text-[10px] text-rose-400 hover:underline"
+              class="text-[10px] text-destructive hover:underline"
             >
               Reset Sliders
             </button>
@@ -1348,7 +636,7 @@
             />
             {#if spec.id === 'tint' && legacyProcess}
               <div
-                class="flex items-center justify-between gap-2 rounded border border-amber-500/30 bg-amber-500/10 px-2 py-1.5 text-[10px] text-amber-200"
+                class="flex items-center justify-between gap-2 rounded border border-amber-500/30 bg-amber-500/10 px-2 py-1.5 text-[10px] text-amber-600"
                 data-testid="image-editor-process-notice"
               >
                 <span>Legacy rendering (process 1). Tint needs the current process.</span>
@@ -1363,7 +651,7 @@
             {/if}
           {/each}
 
-          <div class="border-t border-slate-700/60 pt-3">
+          <div class={imageSectionClass}>
             <AdjustmentLayersPanel
               controller={editor.controller}
               layers={editor.state.adjustments.layers}
@@ -1376,34 +664,34 @@
       <!-- TAB 3: ANNOTATIONS -->
       {#if activeTab === 'layers'}
         <div class="flex flex-col gap-3 text-xs">
-          <span class="font-semibold text-slate-200 uppercase tracking-wider text-[11px]">Layers</span>
+          <span class={imageSectionTitleClass}>Layers</span>
           <button
             type="button"
             title="Edit › Free Transform (Ctrl/Cmd+T): the selected pixels, or the whole active layer"
-            class="px-2 py-1 rounded text-[11px] bg-slate-800 text-slate-300 hover:text-white self-start disabled:opacity-40"
+            class={imageSmallButtonClass}
             disabled={transformActive}
             onclick={() => transformTool.begin()}>Free Transform</button>
           <LayersPanel controller={editor.controller} />
-          {#if effectsShown}<ImageProviderEffectsPanel controller={editor.controller} class="border-t border-slate-700/60 pt-3" />{/if}
-          <span class="font-semibold text-slate-200 uppercase tracking-wider text-[11px]">Colour</span>
+          {#if effectsShown}<ImageProviderEffectsPanel controller={editor.controller} class={imageSectionClass} />{/if}
+          <span class={imageSectionTitleClass}>Colour</span>
           <ColorProfilePanel controller={editor.controller} />
         </div>
       {/if}
 
       {#if activeTab === 'paint'}
         <div class="flex flex-col gap-3 text-xs">
-          <span class="font-semibold text-slate-200 uppercase tracking-wider text-[11px]">Paint</span>
+          <span class={imageSectionTitleClass}>Paint</span>
           <BrushOptionsBar controller={editor.controller} />
           <button
             type="button"
             title="Edit › Free Transform (Ctrl/Cmd+T): the selected pixels, or the whole active layer"
-            class="px-2 py-1 rounded text-[11px] bg-slate-800 text-slate-300 hover:text-white self-start disabled:opacity-40"
+            class={imageSmallButtonClass}
             disabled={transformActive}
             onclick={() => transformTool.begin()}>Free Transform</button>
           {#if paintError}
-            <p role="alert" class="text-rose-400" data-testid="paint-error">{paintError}</p>
+            <p role="alert" class="text-destructive" data-testid="paint-error">{paintError}</p>
           {/if}
-          <div class="border-t border-slate-700/60 pt-3">
+          <div class={imageSectionClass}>
             <LayersPanel controller={editor.controller} />
           </div>
         </div>
@@ -1411,7 +699,7 @@
 
       {#if activeTab === 'annotate'}
         <div class="flex flex-col gap-3 text-xs">
-          <span class="font-semibold text-slate-200 uppercase tracking-wider text-[11px]">Shape & Type Layers</span>
+          <span class={imageSectionTitleClass}>Shape & Type Layers</span>
           <div class="grid grid-cols-2 gap-1.5">
             {#each ['shape', 'type'] as const as t (t)}
               <button
@@ -1419,8 +707,8 @@
                 aria-pressed={editor.state.activeTool === t}
                 onclick={() => editor.setTool(t)}
                 class="py-1.5 px-2 rounded-lg font-medium border transition-colors {editor.state.activeTool === t
-                  ? 'bg-indigo-600 border-indigo-500 text-white'
-                  : 'bg-slate-800 border-slate-700 text-slate-300 hover:bg-slate-700'}">{t === 'shape' ? 'Shape' : 'Type'}</button>
+                  ? 'bg-primary border-primary text-primary-foreground'
+                  : 'bg-muted border-border text-foreground hover:bg-accent'}">{t === 'shape' ? 'Shape' : 'Type'}</button>
             {/each}
           </div>
           {#if editor.state.activeTool === 'shape'}
@@ -1429,15 +717,15 @@
           {#if editor.state.activeTool === 'type'}
             <TypeOptionsBar controller={editor.controller} options={typeOptions} onchange={(o) => (typeOptions = o)} session={typeSession} />
             {#if typeSession}
-              <button type="button" onclick={finishTyping} class="self-start rounded bg-slate-800 px-2 py-1 text-[11px] text-slate-200 hover:bg-slate-700">Done editing text</button>
+              <button type="button" onclick={finishTyping} class="self-start rounded bg-muted px-2 py-1 text-[11px] text-foreground hover:bg-accent">Done editing text</button>
             {/if}
           {/if}
           {#if shapeTypeError}
-            <p role="alert" class="text-rose-400" data-testid="shape-type-error">{shapeTypeError}</p>
+            <p role="alert" class="text-destructive" data-testid="shape-type-error">{shapeTypeError}</p>
           {/if}
-          <div class="h-px bg-slate-800 my-1"></div>
+          <div class={imageDividerClass}></div>
 
-          <span class="font-semibold text-slate-200 uppercase tracking-wider text-[11px]">
+          <span class={imageSectionTitleClass}>
             Draw & Annotate
           </span>
 
@@ -1448,8 +736,8 @@
                 type="button"
                 onclick={() => editor.setTool(t)}
                 class="py-1.5 px-2 rounded-lg font-medium capitalize border transition-colors {editor.state.activeTool === t
-                  ? 'bg-indigo-600 border-indigo-500 text-white'
-                  : 'bg-slate-800 border-slate-700 text-slate-300 hover:bg-slate-700'}"
+                  ? 'bg-primary border-primary text-primary-foreground'
+                  : 'bg-muted border-border text-foreground hover:bg-accent'}"
               >
                 {t}
               </button>
@@ -1458,14 +746,14 @@
 
           <!-- Color & Size -->
           <div class="flex items-center gap-2 mt-2">
-            <span class="text-slate-400">Color:</span>
+            <span class="text-muted-foreground">Color:</span>
             <input
               type="color"
               bind:value={activeColor}
-              class="w-8 h-8 rounded border border-slate-700 cursor-pointer bg-transparent"
+              class="w-8 h-8 rounded border border-border cursor-pointer bg-transparent"
             />
             <div class="flex-1 ml-2">
-              <div class="flex justify-between text-slate-400 mb-0.5">
+              <div class="flex justify-between text-muted-foreground mb-0.5">
                 <span>Width:</span>
                 <span class="font-mono">{strokeWidth}px</span>
               </div>
@@ -1474,32 +762,32 @@
                 min="1"
                 max="20"
                 bind:value={strokeWidth}
-                class="w-full accent-indigo-500"
+                class={imageRangeClass}
               />
             </div>
           </div>
 
-          <div class="h-px bg-slate-800 my-1"></div>
+          <div class={imageDividerClass}></div>
 
           <!-- Text Tool -->
-          <span class="font-semibold text-slate-200 uppercase tracking-wider text-[11px]">Add Text</span>
+          <span class={imageSectionTitleClass}>Add Text</span>
           <div class="flex gap-2">
             <input
               type="text"
               placeholder="Type watermark or label..."
               bind:value={textInput}
               onkeydown={(e) => e.key === 'Enter' && handleAddText()}
-              class="flex-1 bg-slate-950 border border-slate-700 rounded-lg px-2.5 py-1.5 text-xs text-slate-100 placeholder-slate-500 focus:outline-none focus:border-indigo-500"
+              class="flex-1 bg-background border border-border rounded-lg px-2.5 py-1.5 text-xs text-foreground placeholder:text-muted-foreground focus:outline-none focus:border-primary"
             />
             <button
               type="button"
               onclick={handleAddText}
-              class="px-3 py-1.5 rounded-lg bg-indigo-600 hover:bg-indigo-500 text-white font-medium shadow"
+              class="px-3 py-1.5 rounded-lg bg-primary hover:bg-primary/90 text-primary-foreground font-medium shadow"
             >
               Add
             </button>
           </div>
-          <div class="flex items-center justify-between text-slate-400">
+          <div class="flex items-center justify-between text-muted-foreground">
             <span>Font Size:</span>
             <span class="font-mono">{fontSize}px</span>
           </div>
@@ -1508,18 +796,18 @@
             min="12"
             max="72"
             bind:value={fontSize}
-            class="w-full accent-indigo-500"
+            class={imageRangeClass}
           />
 
           <!-- Layers & Selected Annotation -->
-          <div class="h-px bg-slate-800 my-1"></div>
+          <div class={imageDividerClass}></div>
           <div class="flex items-center justify-between">
-            <span class="text-slate-400">Layers ({editor.state.annotations.length})</span>
+            <span class="text-muted-foreground">Layers ({editor.state.annotations.length})</span>
             {#if editor.state.selectedAnnotationId}
               <button
                 type="button"
                 onclick={() => editor.removeAnnotation(editor.state.selectedAnnotationId!)}
-                class="text-rose-400 hover:underline text-[11px]"
+                class="text-destructive hover:underline text-[11px]"
               >
                 Delete Selected
               </button>
@@ -1528,7 +816,7 @@
               <button
                 type="button"
                 onclick={() => editor.clearAnnotations()}
-                class="text-slate-400 hover:text-slate-200 text-[11px]"
+                class="text-muted-foreground hover:text-foreground text-[11px]"
               >
                 Clear All
               </button>
@@ -1541,37 +829,37 @@
       {#if activeTab === 'depth'}
         <div class="flex flex-col gap-3 text-xs">
           <div class="flex items-center justify-between">
-            <span class="font-semibold text-slate-200 uppercase tracking-wider text-[11px]">
+            <span class={imageSectionTitleClass}>
               Depth Masking
             </span>
             <button
               type="button"
               onclick={() => editor.resetDepthMask()}
-              class="text-[10px] text-rose-400 hover:underline"
+              class="text-[10px] text-destructive hover:underline"
             >
               Reset Mask
             </button>
           </div>
 
-          <label class="flex items-center gap-2 cursor-pointer text-slate-300">
+          <label class="flex items-center gap-2 cursor-pointer text-foreground">
             <input
               type="checkbox"
               checked={editor.state.depthMask.enabled}
               onchange={(e) => editor.setDepthMask({ enabled: (e.target as HTMLInputElement).checked })}
-              class="rounded accent-indigo-500"
+              class="rounded accent-primary"
             />
             <span>Enable Depth / Alpha Mask</span>
           </label>
 
           {#if editor.state.depthMask.enabled}
             <div>
-              <span class="text-slate-400 block mb-1">Mask Image URL:</span>
+              <span class="text-muted-foreground block mb-1">Mask Image URL:</span>
               <input
                 type="text"
                 placeholder="https://.../depthmap.png"
                 value={editor.state.depthMask.maskSource || ''}
                 oninput={(e) => editor.setDepthMask({ maskSource: (e.target as HTMLInputElement).value || null })}
-                class="w-full bg-slate-950 border border-slate-700 rounded-lg px-2.5 py-1.5 text-xs text-slate-100 placeholder-slate-500"
+                class="w-full bg-background border border-border rounded-lg px-2.5 py-1.5 text-xs text-foreground placeholder:text-muted-foreground"
               />
             </div>
 
@@ -1580,8 +868,8 @@
                 type="button"
                 onclick={() => editor.setDepthMask({ mode: 'threshold' })}
                 class="flex-1 py-1.5 rounded-lg border text-xs font-medium {editor.state.depthMask.mode === 'threshold'
-                  ? 'bg-indigo-600 border-indigo-500 text-white'
-                  : 'bg-slate-800 border-slate-700 text-slate-300'}"
+                  ? 'bg-primary border-primary text-primary-foreground'
+                  : 'bg-muted border-border text-foreground'}"
               >
                 Threshold Mode
               </button>
@@ -1589,15 +877,15 @@
                 type="button"
                 onclick={() => editor.setDepthMask({ mode: 'brightness' })}
                 class="flex-1 py-1.5 rounded-lg border text-xs font-medium {editor.state.depthMask.mode === 'brightness'
-                  ? 'bg-indigo-600 border-indigo-500 text-white'
-                  : 'bg-slate-800 border-slate-700 text-slate-300'}"
+                  ? 'bg-primary border-primary text-primary-foreground'
+                  : 'bg-muted border-border text-foreground'}"
               >
                 Brightness Mode
               </button>
             </div>
 
             <div>
-              <div class="flex justify-between text-slate-400 mb-1">
+              <div class="flex justify-between text-muted-foreground mb-1">
                 <span>Depth Start (Lower):</span>
                 <span class="font-mono">{editor.state.depthMask.depthRange[0]}</span>
               </div>
@@ -1610,12 +898,12 @@
                   editor.setDepthMask({
                     depthRange: [Number((e.target as HTMLInputElement).value), editor.state.depthMask.depthRange[1]],
                   })}
-                class="w-full accent-indigo-500"
+                class={imageRangeClass}
               />
             </div>
 
             <div>
-              <div class="flex justify-between text-slate-400 mb-1">
+              <div class="flex justify-between text-muted-foreground mb-1">
                 <span>Depth Stop (Upper):</span>
                 <span class="font-mono">{editor.state.depthMask.depthRange[1]}</span>
               </div>
@@ -1628,12 +916,12 @@
                   editor.setDepthMask({
                     depthRange: [editor.state.depthMask.depthRange[0], Number((e.target as HTMLInputElement).value)],
                   })}
-                class="w-full accent-indigo-500"
+                class={imageRangeClass}
               />
             </div>
 
             <div>
-              <div class="flex justify-between text-slate-400 mb-1">
+              <div class="flex justify-between text-muted-foreground mb-1">
                 <span>Softness:</span>
                 <span class="font-mono">{editor.state.depthMask.softness}</span>
               </div>
@@ -1643,16 +931,16 @@
                 max="50"
                 value={editor.state.depthMask.softness}
                 oninput={(e) => editor.setDepthMask({ softness: Number((e.target as HTMLInputElement).value) })}
-                class="w-full accent-indigo-500"
+                class={imageRangeClass}
               />
             </div>
 
-            <label class="flex items-center gap-2 cursor-pointer text-slate-300 mt-1">
+            <label class="flex items-center gap-2 cursor-pointer text-foreground mt-1">
               <input
                 type="checkbox"
                 checked={editor.state.depthMask.invert}
                 onchange={(e) => editor.setDepthMask({ invert: (e.target as HTMLInputElement).checked })}
-                class="rounded accent-indigo-500"
+                class="rounded accent-primary"
               />
               <span>Invert Mask</span>
             </label>
@@ -1671,19 +959,19 @@
             quickMask={Boolean(editor.state.quickMask)}
           />
           {#if selectionError}
-            <p role="alert" class="text-rose-400">{selectionError}</p>
+            <p role="alert" class="text-destructive">{selectionError}</p>
           {/if}
           <div class="flex gap-1">
             <button
             type="button"
             title="Select › Transform Selection: the outline only"
-            class="px-2 py-1 rounded text-[11px] bg-slate-800 text-slate-300 hover:text-white self-start disabled:opacity-40"
+            class={imageSmallButtonClass}
             disabled={transformActive}
             onclick={() => transformTool.begin({ content: 'selection-outline' })}>Transform Selection</button>
             <button
             type="button"
             title="Edit › Free Transform: the selected pixels of the active layer"
-            class="px-2 py-1 rounded text-[11px] bg-slate-800 text-slate-300 hover:text-white self-start disabled:opacity-40"
+            class={imageSmallButtonClass}
             disabled={transformActive}
             onclick={() => transformTool.begin({ content: 'selection' })}>Free Transform Pixels</button>
           </div>
@@ -1698,12 +986,12 @@
       <!-- TAB 5: AI TOOLS / INPAINTING & BACKGROUND REMOVAL -->
       {#if activeTab === 'ai'}
         <div class="flex flex-col gap-4 text-xs">
-          <label class="flex items-center justify-between gap-2 text-slate-300">
+          <label class="flex items-center justify-between gap-2 text-foreground">
             <span>Results go to</span>
             <select
               aria-label="AI result target"
               bind:value={aiTarget}
-              class="bg-slate-800 border border-slate-700 rounded px-1.5 py-1"
+              class={imageSelectClass}
             >
               <option value="auto">{editor.controller.isMultiLayer ? 'Auto (new layer)' : 'Auto (replace image)'}</option>
               <option value="new-layer">New layer / mask</option>
@@ -1711,22 +999,22 @@
             </select>
           </label>
           <!-- Background Removal Section -->
-          <div class="p-3 rounded-lg bg-slate-950/60 border border-slate-800 flex flex-col gap-2.5">
+          <div class="p-3 rounded-lg bg-muted/40 border border-border flex flex-col gap-2.5">
             <div class="flex items-center justify-between">
-              <span class="font-semibold text-slate-200 uppercase tracking-wider text-[11px] flex items-center gap-1.5">
-                <svg class="w-3.5 h-3.5 text-indigo-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <span class="font-semibold text-foreground uppercase tracking-wider text-[11px] flex items-center gap-1.5">
+                <svg class="w-3.5 h-3.5 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                   <path d="M6 3v12M18 9a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM6 21a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
                 </svg>
                 Background Removal
               </span>
               {#if isRemovingBg}
-                <span class="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium bg-indigo-900/60 text-indigo-300 animate-pulse">
+                <span class="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium bg-primary/15 text-primary animate-pulse">
                   Removing...
                 </span>
               {/if}
             </div>
 
-            <p class="text-slate-400 text-[11px] leading-relaxed">
+            <p class="text-muted-foreground text-[11px] leading-relaxed">
               Isolate foreground subject with AI alpha transparency segmentation.
             </p>
 
@@ -1734,10 +1022,10 @@
               type="button"
               onclick={handleRemoveBackground}
               disabled={isRemovingBg || isInpainting}
-              class="mt-1 px-3 py-2 rounded-lg bg-indigo-600 hover:bg-indigo-500 disabled:opacity-50 text-white font-medium shadow transition-colors flex items-center justify-center gap-2"
+              class="mt-1 px-3 py-2 rounded-lg bg-primary hover:bg-primary/90 disabled:opacity-50 text-primary-foreground font-medium shadow transition-colors flex items-center justify-center gap-2"
             >
               {#if isRemovingBg}
-                <div class="w-3.5 h-3.5 border-2 border-white/30 border-t-white rounded-full animate-spin"></div>
+                <div class={imageSpinnerClass}></div>
                 Removing Background...
               {:else}
                 <svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -1749,46 +1037,46 @@
           </div>
 
           <!-- AI Inpainting / Generative Fill Section -->
-          <div class="p-3 rounded-lg bg-slate-950/60 border border-slate-800 flex flex-col gap-2.5">
+          <div class="p-3 rounded-lg bg-muted/40 border border-border flex flex-col gap-2.5">
             <div class="flex items-center justify-between">
-              <span class="font-semibold text-slate-200 uppercase tracking-wider text-[11px] flex items-center gap-1.5">
-                <svg class="w-3.5 h-3.5 text-purple-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <span class="font-semibold text-foreground uppercase tracking-wider text-[11px] flex items-center gap-1.5">
+                <svg class="w-3.5 h-3.5 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                   <path d="m21.64 3.64-1.28-1.28a1.2 1.2 0 0 0-1.7 0l-9.72 9.72-1.94 4.86 4.86-1.94 9.72-9.72a1.2 1.2 0 0 0 .06-1.64z"/>
                   <path d="m14 7 3 3"/>
                 </svg>
                 Generative Inpainting
               </span>
               {#if isInpainting}
-                <span class="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium bg-purple-900/60 text-purple-300 animate-pulse">
+                <span class="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium bg-primary/15 text-primary animate-pulse">
                   Inpainting...
                 </span>
               {/if}
             </div>
 
-            <p class="text-slate-400 text-[11px] leading-relaxed">
+            <p class="text-muted-foreground text-[11px] leading-relaxed">
               Replace, modify, or fill selected regions using prompt-guided generative inpainting.
             </p>
 
             <div class="flex flex-col gap-1">
-              <label for="ai-inpaint-prompt" class="text-slate-300 text-[11px] font-medium">Prompt</label>
+              <label for="ai-inpaint-prompt" class="text-foreground text-[11px] font-medium">Prompt</label>
               <textarea
                 id="ai-inpaint-prompt"
                 bind:value={inpaintPrompt}
                 placeholder="e.g. replace sunglasses with steampunk goggles, remove person in background..."
                 rows="3"
-                class="w-full bg-slate-900 border border-slate-700 rounded-lg p-2 text-xs text-slate-100 placeholder-slate-500 focus:outline-none focus:border-indigo-500 resize-none"
+                class="w-full bg-background border border-border rounded-lg p-2 text-xs text-foreground placeholder:text-muted-foreground focus:outline-none focus:border-primary resize-none"
               ></textarea>
             </div>
 
             <div class="flex flex-col gap-1">
-              <span class="text-slate-300 text-[11px] font-medium">Target Mask Region</span>
+              <span class="text-foreground text-[11px] font-medium">Target Mask Region</span>
               <div class="grid grid-cols-2 gap-1.5">
                 <button
                   type="button"
                   onclick={() => inpaintMaskMode = 'annotations'}
                   class="px-2 py-1.5 rounded border text-[11px] font-medium text-left transition-colors {inpaintMaskMode === 'annotations'
-                    ? 'bg-purple-600/30 border-purple-500 text-purple-200'
-                    : 'bg-slate-900 border-slate-700 text-slate-400 hover:text-slate-200'}"
+                    ? 'bg-primary/30 border-primary text-primary'
+                    : 'bg-background border-border text-muted-foreground hover:text-foreground'}"
                 >
                   Drawn Shapes ({editor.state.annotations.length})
                 </button>
@@ -1796,8 +1084,8 @@
                   type="button"
                   onclick={() => inpaintMaskMode = 'crop'}
                   class="px-2 py-1.5 rounded border text-[11px] font-medium text-left transition-colors {inpaintMaskMode === 'crop'
-                    ? 'bg-purple-600/30 border-purple-500 text-purple-200'
-                    : 'bg-slate-900 border-slate-700 text-slate-400 hover:text-slate-200'}"
+                    ? 'bg-primary/30 border-primary text-primary'
+                    : 'bg-background border-border text-muted-foreground hover:text-foreground'}"
                 >
                   Crop Box ({editor.state.crop ? 'Selected' : 'Full'})
                 </button>
@@ -1808,10 +1096,10 @@
               type="button"
               onclick={handleInpaint}
               disabled={isInpainting || isRemovingBg || !inpaintPrompt.trim()}
-              class="mt-1 px-3 py-2 rounded-lg bg-purple-600 hover:bg-purple-500 disabled:opacity-50 text-white font-medium shadow transition-colors flex items-center justify-center gap-2"
+              class="mt-1 px-3 py-2 rounded-lg bg-primary hover:bg-primary/90 disabled:opacity-50 text-primary-foreground font-medium shadow transition-colors flex items-center justify-center gap-2"
             >
               {#if isInpainting}
-                <div class="w-3.5 h-3.5 border-2 border-white/30 border-t-white rounded-full animate-spin"></div>
+                <div class={imageSpinnerClass}></div>
                 Generating Inpaint...
               {:else}
                 <svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -1823,13 +1111,13 @@
           </div>
 
           {#if aiError}
-            <div class="p-2.5 rounded-lg bg-rose-950/60 border border-rose-800 text-rose-300 text-[11px]">
+            <div class="p-2.5 rounded-lg bg-destructive/10 border border-destructive/40 text-destructive text-[11px]">
               {aiError}
             </div>
           {/if}
 
           {#if aiSuccess}
-            <div class="p-2.5 rounded-lg bg-emerald-950/60 border border-emerald-800 text-emerald-300 text-[11px]">
+            <div class="p-2.5 rounded-lg bg-emerald-500/10 border border-emerald-500/30 text-emerald-600 text-[11px]">
               {aiSuccess}
             </div>
           {/if}