@reshape-biotech/design-system 1.2.6 → 2.0.0

package/dist/components/multi-cfu-counter/MultiCFUCounter.svelte

@@ -1,662 +1,662 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
-	import { Button } from '../button';
-	import { textColor } from '../../tokens';
-	import { Icon, type IconColor } from '../icons';
-	import IconButton from '../icon-button/IconButton.svelte';
-	import Divider from '../divider/Divider.svelte';
-
-	const BASE_IMAGE_SIZE = 464;
-	const BASE_MARKER_SIZE = 8;
-	const BASE_MARKER_FONT_SIZE = 8;
-	const MAX_ZOOM = 10;
-	const MIN_ZOOM = 1;
-	const ZOOM_STEP = 0.001;
-	const MARKER_COLOR = textColor['icon-blue'];
-	const TEXT_COLOR = textColor['primary-inverse'];
-	const DRAG_THRESHOLD = 5;
-
-	function getMarkerColorHex(semanticColor: string): string {
-		switch (semanticColor) {
-			case 'icon-blue':
-				return textColor['icon-blue'];
-			case 'icon-orange':
-				return textColor['icon-orange'];
-			case 'icon-pink':
-				return textColor['icon-pink'];
-			case 'icon-lime':
-				return textColor['icon-lime'];
-			default:
-				return textColor['icon-blue'];
-		}
-	}
-
-	interface ConfiguratedMark {
-		x: number;
-		y: number;
-		configIndex: number;
-		color: string;
-		id?: string;
-	}
-
-	interface Props {
-		imageUrl: string;
-		marks?: Array<{ x: number; y: number }>;
-		onclick?: (event: MouseEvent, marks: Array<{ x: number; y: number }>) => void;
-		onMarksChange?: (marks: Array<{ x: number; y: number }>) => void;
-		disabled?: boolean;
-		hideMarkers?: boolean;
-		allMarks?: ConfiguratedMark[];
-		activeMarkerColor?: string;
-		activeMarkerName?: string;
-		editableConfigIndex?: number | null;
-		showMultiConfig?: boolean;
-	}
-
-	let {
-		imageUrl,
-		onclick,
-		onMarksChange,
-		disabled = false,
-		hideMarkers = false,
-		marks = $bindable([]),
-		allMarks = [],
-		activeMarkerColor = MARKER_COLOR,
-		activeMarkerName = '',
-		editableConfigIndex = null,
-		showMultiConfig = false
-	}: Props = $props();
-
-	let previousConfigIndex = $state<number | null>(null);
-
-	let resolvedActiveMarkerColor = $derived(() => {
-		if (!activeMarkerColor) return MARKER_COLOR;
-
-		// If it starts with #, it's already a hex color
-		if (activeMarkerColor.startsWith('#')) {
-			return activeMarkerColor;
-		}
-
-		return getMarkerColorHex(activeMarkerColor);
-	});
-
-	let svgElement: SVGSVGElement;
-	let viewport: SVGGraphicsElement;
-	let dotsGroup: SVGElement;
-	let container: HTMLDivElement;
-
-	let containerW = BASE_IMAGE_SIZE;
-	let containerH = BASE_IMAGE_SIZE;
-
-	let transform = $state({ x: 0, y: 0, scale: 1 });
-
-	let panningState = $state<null | 'ready' | 'active'>(null);
-	let startPoint = $state({ x: 0, y: 0 });
-	let isShiftPressed = $state(false);
-	let resizeObserver: ResizeObserver;
-
-	let imageAspectRatio = $state(1);
-	let imageDisplayWidth = $state(0);
-	let imageDisplayHeight = $state(0);
-
-	function handleResize(entries: ResizeObserverEntry[]) {
-		const entry = entries[0];
-		if (entry) {
-			const oldWidth = imageDisplayWidth || containerW;
-			const oldHeight = imageDisplayHeight || containerH;
-
-			containerW = entry.contentRect.width;
-			containerH = entry.contentRect.height;
-
-			if (oldWidth > 0 && oldHeight > 0 && marks.length > 0) {
-				marks = marks.map((mark) => ({
-					x: (mark.x / oldWidth) * containerW,
-					y: (mark.y / oldHeight) * containerH
-				}));
-			}
-
-			updateImageDimensions();
-		}
-	}
-
-	function onImageLoad() {
-		if (container) {
-			containerW = container.clientWidth;
-			containerH = container.clientHeight;
-
-			const img = new Image();
-			img.src = imageUrl;
-			img.onload = () => {
-				imageAspectRatio = img.naturalWidth / img.naturalHeight;
-				updateImageDimensions();
-			};
-
-			if (img.complete && img.naturalWidth) {
-				imageAspectRatio = img.naturalWidth / img.naturalHeight;
-				updateImageDimensions();
-			}
-		}
-	}
-
-	function updateImageDimensions() {
-		const containerRatio = containerW / containerH;
-
-		if (containerRatio > imageAspectRatio) {
-			imageDisplayHeight = containerH;
-			imageDisplayWidth = containerH * imageAspectRatio;
-		} else {
-			imageDisplayWidth = containerW;
-			imageDisplayHeight = containerW / imageAspectRatio;
-		}
-
-		updateTransform();
-	}
-
-	function clampTransform() {
-		const maxX = 0;
-		const maxY = 0;
-		// Prevent division by zero or unexpected behavior if container dimensions aren't ready
-		const safeContainerW = containerW || 1;
-		const safeContainerH = containerH || 1;
-		const minX = safeContainerW * (1 - transform.scale);
-		const minY = safeContainerH * (1 - transform.scale);
-
-		if (transform.scale <= 1) {
-			transform.scale = 1;
-			transform.x = 0;
-			transform.y = 0;
-		} else {
-			transform.x = Math.max(minX, Math.min(maxX, transform.x));
-			transform.y = Math.max(minY, Math.min(maxY, transform.y));
-		}
-	}
-
-	function updateTransform() {
-		if (!viewport) return;
-
-		viewport.setAttribute(
-			'transform',
-			`translate(${transform.x}, ${transform.y}) scale(${transform.scale})`
-		);
-
-		const imageElement = viewport.querySelector('image');
-		if (imageElement) {
-			imageElement.setAttribute('width', String(imageDisplayWidth));
-			imageElement.setAttribute('height', String(imageDisplayHeight));
-
-			// center the image in the container
-			const offsetX = (containerW - imageDisplayWidth) / 2;
-			const offsetY = (containerH - imageDisplayHeight) / 2;
-
-			imageElement.setAttribute('x', String(offsetX));
-			imageElement.setAttribute('y', String(offsetY));
-		}
-
-		renderMarkers();
-	}
-
-	function getSvgPoint(event: MouseEvent) {
-		if (!svgElement || !container) return { x: 0, y: 0 };
-
-		const rect = container.getBoundingClientRect();
-
-		const relativeX = event.clientX - rect.left;
-		const relativeY = event.clientY - rect.top;
-
-		const svgX = (relativeX - transform.x) / transform.scale;
-		const svgY = (relativeY - transform.y) / transform.scale;
-
-		const offsetX = (containerW - imageDisplayWidth) / 2;
-		const offsetY = (containerH - imageDisplayHeight) / 2;
-
-		return {
-			x: svgX - offsetX,
-			y: svgY - offsetY
-		};
-	}
-
-	function renderMarkers() {
-		if (!dotsGroup) return;
-
-		while (dotsGroup.firstChild) {
-			dotsGroup.removeChild(dotsGroup.firstChild);
-		}
-
-		const offsetX = (containerW - imageDisplayWidth) / 2;
-		const offsetY = (containerH - imageDisplayHeight) / 2;
-
-		const svgns = 'http://www.w3.org/2000/svg';
-		const adjustedMarkerSize = BASE_MARKER_SIZE / transform.scale;
-		const adjustedFontSize = BASE_MARKER_FONT_SIZE / transform.scale;
-
-		if (showMultiConfig && allMarks && allMarks.length > 0) {
-			// Group marks by configuration to number them separately
-			const marksByConfig = new Map<number, ConfiguratedMark[]>();
-			allMarks.forEach((mark) => {
-				if (!marksByConfig.has(mark.configIndex)) {
-					marksByConfig.set(mark.configIndex, []);
-				}
-				marksByConfig.get(mark.configIndex)!.push(mark);
-			});
-
-			// Render multi-configuration marks with per-configuration numbering
-			marksByConfig.forEach((configMarks, configIndex) => {
-				configMarks.forEach((mark, configMarkIndex) => {
-					const group = document.createElementNS(svgns, 'g');
-					group.setAttribute(
-						'data-testid',
-						`config-marker-${mark.configIndex}-${configMarkIndex + 1}`
-					);
-
-					const markX = mark.x + offsetX;
-					const markY = mark.y + offsetY;
-
-					// Resolve mark color - supports both hex colors and semantic color names
-					const resolvedMarkColor = mark.color.startsWith('#')
-						? mark.color
-						: getMarkerColorHex(mark.color);
-
-					const circle = document.createElementNS(svgns, 'circle');
-					circle.setAttribute('cx', String(markX));
-					circle.setAttribute('cy', String(markY));
-					circle.setAttribute('r', String(adjustedMarkerSize));
-					circle.setAttribute('fill', resolvedMarkColor);
-					circle.setAttribute('class', 'drop-shadow-sm');
-					group.appendChild(circle);
-
-					const text = document.createElementNS(svgns, 'text');
-					text.setAttribute('x', String(markX));
-					text.setAttribute('y', String(markY));
-					text.setAttribute('text-anchor', 'middle');
-					text.setAttribute('dominant-baseline', 'central');
-					text.setAttribute('fill', TEXT_COLOR);
-					text.setAttribute('font-size', String(adjustedFontSize));
-					text.setAttribute('font-weight', 'bold');
-					text.textContent = String(configMarkIndex + 1); // Number per configuration
-					group.appendChild(text);
-
-					dotsGroup.appendChild(group);
-				});
-			});
-		} else {
-			// Render single-configuration marks (existing behavior)
-			marks.forEach((mark, index) => {
-				const group = document.createElementNS(svgns, 'g');
-				group.setAttribute('data-testid', `marker-${index + 1}`);
-
-				const markX = mark.x + offsetX;
-				const markY = mark.y + offsetY;
-
-				const circle = document.createElementNS(svgns, 'circle');
-				circle.setAttribute('cx', String(markX));
-				circle.setAttribute('cy', String(markY));
-				circle.setAttribute('r', String(adjustedMarkerSize));
-				circle.setAttribute('fill', resolvedActiveMarkerColor());
-				circle.setAttribute('class', 'drop-shadow-sm');
-				group.appendChild(circle);
-
-				const text = document.createElementNS(svgns, 'text');
-				text.setAttribute('x', String(markX));
-				text.setAttribute('y', String(markY));
-				text.setAttribute('text-anchor', 'middle');
-				text.setAttribute('dominant-baseline', 'central');
-				text.setAttribute('fill', TEXT_COLOR);
-				text.setAttribute('font-size', String(adjustedFontSize));
-				text.setAttribute('font-weight', 'bold');
-				text.textContent = String(index + 1);
-				group.appendChild(text);
-
-				dotsGroup.appendChild(group);
-			});
-		}
-	}
-
-	function handleClick(event: MouseEvent) {
-		if (disabled || hideMarkers || !dotsGroup || isShiftPressed || panningState !== null) {
-			panningState = null;
-			return;
-		}
-
-		// In multi-config mode, only allow editing if there's an active editable configuration
-		if (showMultiConfig && editableConfigIndex === null) {
-			return;
-		}
-
-		const pt = getSvgPoint(event);
-		marks.push({ x: pt.x, y: pt.y });
-
-		renderMarkers();
-
-		if (onclick) {
-			onclick(event, marks);
-		}
-
-		onMarksChange?.(marks);
-	}
-
-	function handleKeyDown(event: KeyboardEvent) {
-		if (event.shiftKey) {
-			isShiftPressed = true;
-		}
-	}
-
-	function handleKeyUp(event: KeyboardEvent) {
-		let shouldResetReadyState = false;
-
-		if (!event.shiftKey && isShiftPressed) {
-			isShiftPressed = false;
-			shouldResetReadyState = true;
-		}
-
-		if (shouldResetReadyState && panningState === 'ready') {
-			panningState = null;
-		}
-	}
-
-	function handleMouseDown(event: MouseEvent) {
-		const isPanningTrigger = event.button === 2 || (event.button === 0 && isShiftPressed);
-		if (!isPanningTrigger) return;
-
-		event.preventDefault();
-		panningState = 'ready';
-		startPoint = { x: event.clientX, y: event.clientY };
-	}
-
-	function handleMouseMove(event: MouseEvent) {
-		if (panningState === null) return;
-
-		const dx = event.clientX - startPoint.x;
-		const dy = event.clientY - startPoint.y;
-
-		if (panningState === 'ready' && Math.sqrt(dx * dx + dy * dy) > DRAG_THRESHOLD) {
-			panningState = 'active';
-		}
-
-		if (panningState === 'active') {
-			startPoint = { x: event.clientX, y: event.clientY };
-
-			transform.x += dx;
-			transform.y += dy;
-
-			clampTransform();
-			updateTransform();
-		}
-	}
+  import { onMount } from 'svelte';
+  import { Button } from '../button';
+  import { textColor } from '../../tokens';
+  import { Icon, type IconColor } from '../icons';
+  import IconButton from '../icon-button/IconButton.svelte';
+  import Divider from '../divider/Divider.svelte';
+
+  const BASE_IMAGE_SIZE = 464;
+  const BASE_MARKER_SIZE = 8;
+  const BASE_MARKER_FONT_SIZE = 8;
+  const MAX_ZOOM = 10;
+  const MIN_ZOOM = 1;
+  const ZOOM_STEP = 0.001;
+  const MARKER_COLOR = textColor['icon-blue'];
+  const TEXT_COLOR = textColor['primary-inverse'];
+  const DRAG_THRESHOLD = 5;
+
+  function getMarkerColorHex(semanticColor: string): string {
+    switch (semanticColor) {
+      case 'icon-blue':
+        return textColor['icon-blue'];
+      case 'icon-orange':
+        return textColor['icon-orange'];
+      case 'icon-pink':
+        return textColor['icon-pink'];
+      case 'icon-lime':
+        return textColor['icon-lime'];
+      default:
+        return textColor['icon-blue'];
+    }
+  }
+
+  interface ConfiguratedMark {
+    x: number;
+    y: number;
+    configIndex: number;
+    color: string;
+    id?: string;
+  }
+
+  interface Props {
+    imageUrl: string;
+    marks?: Array<{ x: number; y: number }>;
+    onclick?: (event: MouseEvent, marks: Array<{ x: number; y: number }>) => void;
+    onMarksChange?: (marks: Array<{ x: number; y: number }>) => void;
+    disabled?: boolean;
+    hideMarkers?: boolean;
+    allMarks?: ConfiguratedMark[];
+    activeMarkerColor?: string;
+    activeMarkerName?: string;
+    editableConfigIndex?: number | null;
+    showMultiConfig?: boolean;
+  }
+
+  let {
+    imageUrl,
+    onclick,
+    onMarksChange,
+    disabled = false,
+    hideMarkers = false,
+    marks = $bindable([]),
+    allMarks = [],
+    activeMarkerColor = MARKER_COLOR,
+    activeMarkerName = '',
+    editableConfigIndex = null,
+    showMultiConfig = false,
+  }: Props = $props();
+
+  let previousConfigIndex = $state<number | null>(null);
+
+  let resolvedActiveMarkerColor = $derived(() => {
+    if (!activeMarkerColor) return MARKER_COLOR;
+
+    // If it starts with #, it's already a hex color
+    if (activeMarkerColor.startsWith('#')) {
+      return activeMarkerColor;
+    }
+
+    return getMarkerColorHex(activeMarkerColor);
+  });
+
+  let svgElement: SVGSVGElement;
+  let viewport: SVGGraphicsElement;
+  let dotsGroup: SVGElement;
+  let container: HTMLDivElement;
+
+  let containerW = BASE_IMAGE_SIZE;
+  let containerH = BASE_IMAGE_SIZE;
+
+  let transform = $state({ x: 0, y: 0, scale: 1 });
+
+  let panningState = $state<null | 'ready' | 'active'>(null);
+  let startPoint = $state({ x: 0, y: 0 });
+  let isShiftPressed = $state(false);
+  let resizeObserver: ResizeObserver;
+
+  let imageAspectRatio = $state(1);
+  let imageDisplayWidth = $state(0);
+  let imageDisplayHeight = $state(0);
+
+  function handleResize(entries: ResizeObserverEntry[]) {
+    const entry = entries[0];
+    if (entry) {
+      const oldWidth = imageDisplayWidth || containerW;
+      const oldHeight = imageDisplayHeight || containerH;
+
+      containerW = entry.contentRect.width;
+      containerH = entry.contentRect.height;
+
+      if (oldWidth > 0 && oldHeight > 0 && marks.length > 0) {
+        marks = marks.map((mark) => ({
+          x: (mark.x / oldWidth) * containerW,
+          y: (mark.y / oldHeight) * containerH,
+        }));
+      }
+
+      updateImageDimensions();
+    }
+  }
+
+  function onImageLoad() {
+    if (container) {
+      containerW = container.clientWidth;
+      containerH = container.clientHeight;
+
+      const img = new Image();
+      img.src = imageUrl;
+      img.onload = () => {
+        imageAspectRatio = img.naturalWidth / img.naturalHeight;
+        updateImageDimensions();
+      };
+
+      if (img.complete && img.naturalWidth) {
+        imageAspectRatio = img.naturalWidth / img.naturalHeight;
+        updateImageDimensions();
+      }
+    }
+  }
+
+  function updateImageDimensions() {
+    const containerRatio = containerW / containerH;
+
+    if (containerRatio > imageAspectRatio) {
+      imageDisplayHeight = containerH;
+      imageDisplayWidth = containerH * imageAspectRatio;
+    } else {
+      imageDisplayWidth = containerW;
+      imageDisplayHeight = containerW / imageAspectRatio;
+    }
+
+    updateTransform();
+  }
+
+  function clampTransform() {
+    const maxX = 0;
+    const maxY = 0;
+    // Prevent division by zero or unexpected behavior if container dimensions aren't ready
+    const safeContainerW = containerW || 1;
+    const safeContainerH = containerH || 1;
+    const minX = safeContainerW * (1 - transform.scale);
+    const minY = safeContainerH * (1 - transform.scale);
+
+    if (transform.scale <= 1) {
+      transform.scale = 1;
+      transform.x = 0;
+      transform.y = 0;
+    } else {
+      transform.x = Math.max(minX, Math.min(maxX, transform.x));
+      transform.y = Math.max(minY, Math.min(maxY, transform.y));
+    }
+  }
+
+  function updateTransform() {
+    if (!viewport) return;
+
+    viewport.setAttribute(
+      'transform',
+      `translate(${transform.x}, ${transform.y}) scale(${transform.scale})`
+    );
+
+    const imageElement = viewport.querySelector('image');
+    if (imageElement) {
+      imageElement.setAttribute('width', String(imageDisplayWidth));
+      imageElement.setAttribute('height', String(imageDisplayHeight));
+
+      // center the image in the container
+      const offsetX = (containerW - imageDisplayWidth) / 2;
+      const offsetY = (containerH - imageDisplayHeight) / 2;
+
+      imageElement.setAttribute('x', String(offsetX));
+      imageElement.setAttribute('y', String(offsetY));
+    }
+
+    renderMarkers();
+  }
+
+  function getSvgPoint(event: MouseEvent) {
+    if (!svgElement || !container) return { x: 0, y: 0 };
+
+    const rect = container.getBoundingClientRect();
+
+    const relativeX = event.clientX - rect.left;
+    const relativeY = event.clientY - rect.top;
+
+    const svgX = (relativeX - transform.x) / transform.scale;
+    const svgY = (relativeY - transform.y) / transform.scale;
+
+    const offsetX = (containerW - imageDisplayWidth) / 2;
+    const offsetY = (containerH - imageDisplayHeight) / 2;
+
+    return {
+      x: svgX - offsetX,
+      y: svgY - offsetY,
+    };
+  }
+
+  function renderMarkers() {
+    if (!dotsGroup) return;
+
+    while (dotsGroup.firstChild) {
+      dotsGroup.removeChild(dotsGroup.firstChild);
+    }
+
+    const offsetX = (containerW - imageDisplayWidth) / 2;
+    const offsetY = (containerH - imageDisplayHeight) / 2;
+
+    const svgns = 'http://www.w3.org/2000/svg';
+    const adjustedMarkerSize = BASE_MARKER_SIZE / transform.scale;
+    const adjustedFontSize = BASE_MARKER_FONT_SIZE / transform.scale;
+
+    if (showMultiConfig && allMarks && allMarks.length > 0) {
+      // Group marks by configuration to number them separately
+      const marksByConfig = new Map<number, ConfiguratedMark[]>();
+      allMarks.forEach((mark) => {
+        if (!marksByConfig.has(mark.configIndex)) {
+          marksByConfig.set(mark.configIndex, []);
+        }
+        marksByConfig.get(mark.configIndex)!.push(mark);
+      });
+
+      // Render multi-configuration marks with per-configuration numbering
+      marksByConfig.forEach((configMarks, configIndex) => {
+        configMarks.forEach((mark, configMarkIndex) => {
+          const group = document.createElementNS(svgns, 'g');
+          group.setAttribute(
+            'data-testid',
+            `config-marker-${mark.configIndex}-${configMarkIndex + 1}`
+          );
+
+          const markX = mark.x + offsetX;
+          const markY = mark.y + offsetY;
+
+          // Resolve mark color - supports both hex colors and semantic color names
+          const resolvedMarkColor = mark.color.startsWith('#')
+            ? mark.color
+            : getMarkerColorHex(mark.color);
+
+          const circle = document.createElementNS(svgns, 'circle');
+          circle.setAttribute('cx', String(markX));
+          circle.setAttribute('cy', String(markY));
+          circle.setAttribute('r', String(adjustedMarkerSize));
+          circle.setAttribute('fill', resolvedMarkColor);
+          circle.setAttribute('class', 'drop-shadow-sm');
+          group.appendChild(circle);
+
+          const text = document.createElementNS(svgns, 'text');
+          text.setAttribute('x', String(markX));
+          text.setAttribute('y', String(markY));
+          text.setAttribute('text-anchor', 'middle');
+          text.setAttribute('dominant-baseline', 'central');
+          text.setAttribute('fill', TEXT_COLOR);
+          text.setAttribute('font-size', String(adjustedFontSize));
+          text.setAttribute('font-weight', 'bold');
+          text.textContent = String(configMarkIndex + 1); // Number per configuration
+          group.appendChild(text);
+
+          dotsGroup.appendChild(group);
+        });
+      });
+    } else {
+      // Render single-configuration marks (existing behavior)
+      marks.forEach((mark, index) => {
+        const group = document.createElementNS(svgns, 'g');
+        group.setAttribute('data-testid', `marker-${index + 1}`);
+
+        const markX = mark.x + offsetX;
+        const markY = mark.y + offsetY;
+
+        const circle = document.createElementNS(svgns, 'circle');
+        circle.setAttribute('cx', String(markX));
+        circle.setAttribute('cy', String(markY));
+        circle.setAttribute('r', String(adjustedMarkerSize));
+        circle.setAttribute('fill', resolvedActiveMarkerColor());
+        circle.setAttribute('class', 'drop-shadow-sm');
+        group.appendChild(circle);
+
+        const text = document.createElementNS(svgns, 'text');
+        text.setAttribute('x', String(markX));
+        text.setAttribute('y', String(markY));
+        text.setAttribute('text-anchor', 'middle');
+        text.setAttribute('dominant-baseline', 'central');
+        text.setAttribute('fill', TEXT_COLOR);
+        text.setAttribute('font-size', String(adjustedFontSize));
+        text.setAttribute('font-weight', 'bold');
+        text.textContent = String(index + 1);
+        group.appendChild(text);
+
+        dotsGroup.appendChild(group);
+      });
+    }
+  }
+
+  function handleClick(event: MouseEvent) {
+    if (disabled || hideMarkers || !dotsGroup || isShiftPressed || panningState !== null) {
+      panningState = null;
+      return;
+    }
+
+    // In multi-config mode, only allow editing if there's an active editable configuration
+    if (showMultiConfig && editableConfigIndex === null) {
+      return;
+    }
+
+    const pt = getSvgPoint(event);
+    marks.push({ x: pt.x, y: pt.y });
+
+    renderMarkers();
+
+    if (onclick) {
+      onclick(event, marks);
+    }
+
+    onMarksChange?.(marks);
+  }
+
+  function handleKeyDown(event: KeyboardEvent) {
+    if (event.shiftKey) {
+      isShiftPressed = true;
+    }
+  }
+
+  function handleKeyUp(event: KeyboardEvent) {
+    let shouldResetReadyState = false;
+
+    if (!event.shiftKey && isShiftPressed) {
+      isShiftPressed = false;
+      shouldResetReadyState = true;
+    }
+
+    if (shouldResetReadyState && panningState === 'ready') {
+      panningState = null;
+    }
+  }
+
+  function handleMouseDown(event: MouseEvent) {
+    const isPanningTrigger = event.button === 2 || (event.button === 0 && isShiftPressed);
+    if (!isPanningTrigger) return;
+
+    event.preventDefault();
+    panningState = 'ready';
+    startPoint = { x: event.clientX, y: event.clientY };
+  }
+
+  function handleMouseMove(event: MouseEvent) {
+    if (panningState === null) return;
+
+    const dx = event.clientX - startPoint.x;
+    const dy = event.clientY - startPoint.y;
+
+    if (panningState === 'ready' && Math.sqrt(dx * dx + dy * dy) > DRAG_THRESHOLD) {
+      panningState = 'active';
+    }
+
+    if (panningState === 'active') {
+      startPoint = { x: event.clientX, y: event.clientY };
+
+      transform.x += dx;
+      transform.y += dy;
+
+      clampTransform();
+      updateTransform();
+    }
+  }
 
-	function handleMouseUp() {
-		panningState = null;
-	}
+  function handleMouseUp() {
+    panningState = null;
+  }
 
-	function handleMouseLeave() {
-		panningState = null;
-	}
+  function handleMouseLeave() {
+    panningState = null;
+  }
 
-	function handleContextMenu(event: MouseEvent) {
-		event.preventDefault();
-	}
+  function handleContextMenu(event: MouseEvent) {
+    event.preventDefault();
+  }
 
-	function handleWheel(event: WheelEvent) {
-		event.preventDefault();
+  function handleWheel(event: WheelEvent) {
+    event.preventDefault();
 
-		if (!svgElement || !viewport || !container) return;
+    if (!svgElement || !viewport || !container) return;
 
-		containerW = container.clientWidth;
-		containerH = container.clientHeight;
+    containerW = container.clientWidth;
+    containerH = container.clientHeight;
 
-		const zoomIntensity = ZOOM_STEP;
-		const delta = event.deltaY;
-		const zoomFactor = 1 - delta * zoomIntensity;
-		const currentScale = transform.scale;
+    const zoomIntensity = ZOOM_STEP;
+    const delta = event.deltaY;
+    const zoomFactor = 1 - delta * zoomIntensity;
+    const currentScale = transform.scale;
 
-		let potentialNewScale = currentScale * zoomFactor;
+    let potentialNewScale = currentScale * zoomFactor;
 
-		let finalScale = Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, potentialNewScale));
+    let finalScale = Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, potentialNewScale));
 
-		if (finalScale <= MIN_ZOOM) {
-			transform.scale = MIN_ZOOM;
-			transform.x = 0;
-			transform.y = 0;
-		} else {
-			const rect = container.getBoundingClientRect();
-			const mouseX = event.clientX - rect.left;
-			const mouseY = event.clientY - rect.top;
+    if (finalScale <= MIN_ZOOM) {
+      transform.scale = MIN_ZOOM;
+      transform.x = 0;
+      transform.y = 0;
+    } else {
+      const rect = container.getBoundingClientRect();
+      const mouseX = event.clientX - rect.left;
+      const mouseY = event.clientY - rect.top;
 
-			const distX = mouseX - transform.x;
-			const distY = mouseY - transform.y;
+      const distX = mouseX - transform.x;
+      const distY = mouseY - transform.y;
 
-			const scaleRatio = finalScale / currentScale;
-			const newDistX = distX * scaleRatio;
-			const newDistY = distY * scaleRatio;
+      const scaleRatio = finalScale / currentScale;
+      const newDistX = distX * scaleRatio;
+      const newDistY = distY * scaleRatio;
 
-			transform.x = mouseX - newDistX;
-			transform.y = mouseY - newDistY;
-			transform.scale = finalScale;
-		}
+      transform.x = mouseX - newDistX;
+      transform.y = mouseY - newDistY;
+      transform.scale = finalScale;
+    }
 
-		clampTransform();
-		updateTransform();
-	}
+    clampTransform();
+    updateTransform();
+  }
 
-	function undo() {
-		if (marks.length === 0) return;
+  function undo() {
+    if (marks.length === 0) return;
 
-		marks.pop();
-		marks = marks;
-		renderMarkers();
+    marks.pop();
+    marks = marks;
+    renderMarkers();
 
-		onMarksChange?.(marks);
-	}
+    onMarksChange?.(marks);
+  }
 
-	function reset() {
-		if (marks.length === 0) return;
+  function reset() {
+    if (marks.length === 0) return;
 
-		marks = [];
-		renderMarkers();
-		onMarksChange?.(marks);
-	}
+    marks = [];
+    renderMarkers();
+    onMarksChange?.(marks);
+  }
 
-	function applyZoom(zoomFactor: number) {
-		if (!container) return;
+  function applyZoom(zoomFactor: number) {
+    if (!container) return;
 
-		const currentScale = transform.scale;
-		const potentialNewScale = currentScale * zoomFactor;
-		const finalScale = Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, potentialNewScale));
+    const currentScale = transform.scale;
+    const potentialNewScale = currentScale * zoomFactor;
+    const finalScale = Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, potentialNewScale));
 
-		if (finalScale === currentScale) return;
+    if (finalScale === currentScale) return;
 
-		const centerX = containerW / 2;
-		const centerY = containerH / 2;
+    const centerX = containerW / 2;
+    const centerY = containerH / 2;
 
-		const distX = centerX - transform.x;
-		const distY = centerY - transform.y;
+    const distX = centerX - transform.x;
+    const distY = centerY - transform.y;
 
-		const scaleRatio = finalScale / currentScale;
-		const newDistX = distX * scaleRatio;
-		const newDistY = distY * scaleRatio;
+    const scaleRatio = finalScale / currentScale;
+    const newDistX = distX * scaleRatio;
+    const newDistY = distY * scaleRatio;
 
-		transform.x = centerX - newDistX;
-		transform.y = centerY - newDistY;
-		transform.scale = finalScale;
+    transform.x = centerX - newDistX;
+    transform.y = centerY - newDistY;
+    transform.scale = finalScale;
 
-		clampTransform();
-		updateTransform();
-	}
+    clampTransform();
+    updateTransform();
+  }
 
-	function zoomIn() {
-		applyZoom(1.2);
-	}
+  function zoomIn() {
+    applyZoom(1.2);
+  }
 
-	function zoomOut() {
-		applyZoom(1 / 1.2);
-	}
+  function zoomOut() {
+    applyZoom(1 / 1.2);
+  }
 
-	$effect(() => {
-		if (editableConfigIndex !== previousConfigIndex) {
-			previousConfigIndex = editableConfigIndex;
-		}
-	});
+  $effect(() => {
+    if (editableConfigIndex !== previousConfigIndex) {
+      previousConfigIndex = editableConfigIndex;
+    }
+  });
 
-	onMount(() => {
-		if (container) {
-			containerW = container.clientWidth;
-			containerH = container.clientHeight;
+  onMount(() => {
+    if (container) {
+      containerW = container.clientWidth;
+      containerH = container.clientHeight;
 
-			resizeObserver = new ResizeObserver(handleResize);
-			resizeObserver.observe(container);
-		}
+      resizeObserver = new ResizeObserver(handleResize);
+      resizeObserver.observe(container);
+    }
 
-		window.addEventListener('keydown', handleKeyDown);
-		window.addEventListener('keyup', handleKeyUp);
+    window.addEventListener('keydown', handleKeyDown);
+    window.addEventListener('keyup', handleKeyUp);
 
-		updateTransform();
-		renderMarkers();
-
-		const img = new Image();
-		img.onload = onImageLoad;
-		img.src = imageUrl;
-
-		if (img.complete) {
-			onImageLoad();
-		}
+    updateTransform();
+    renderMarkers();
+
+    const img = new Image();
+    img.onload = onImageLoad;
+    img.src = imageUrl;
+
+    if (img.complete) {
+      onImageLoad();
+    }
 
-		return () => {
-			window.removeEventListener('keydown', handleKeyDown);
-			window.removeEventListener('keyup', handleKeyUp);
-			if (resizeObserver) {
-				resizeObserver.disconnect();
-			}
-		};
-	});
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+      window.removeEventListener('keyup', handleKeyUp);
+      if (resizeObserver) {
+        resizeObserver.disconnect();
+      }
+    };
+  });
 
-	$effect(() => {
-		renderMarkers();
-	});
+  $effect(() => {
+    renderMarkers();
+  });
 </script>
 
 {#snippet UndoResetControls()}
-	<div class="flex items-center gap-1">
-		<IconButton
-			variant="transparent-inverse"
-			rounded={false}
-			onclick={undo}
-			disabled={marks.length === 0 || disabled}
-			aria-label="Undo last mark"
-		>
-			<Icon iconName={'ArrowUUpLeft'} />
-		</IconButton>
-		<Divider vertical inverse class="!h-5" />
-		<Button
-			variant="transparent-inverse"
-			size="sm"
-			onClick={reset}
-			disabled={marks.length === 0 || disabled}
-			accessibilityLabel="Reset all marks"
-			class="!text-primary-inverse"
-		>
-			Clear all
-		</Button>
-	</div>
+  <div class="flex items-center gap-1">
+    <IconButton
+      variant="transparent-inverse"
+      rounded={false}
+      onclick={undo}
+      disabled={marks.length === 0 || disabled}
+      aria-label="Undo last mark"
+    >
+      <Icon iconName={'ArrowUUpLeft'} />
+    </IconButton>
+    <Divider vertical inverse class="!h-5" />
+    <Button
+      variant="transparent-inverse"
+      size="sm"
+      onClick={reset}
+      disabled={marks.length === 0 || disabled}
+      accessibilityLabel="Reset all marks"
+      class="!text-primary-inverse"
+    >
+      Clear all
+    </Button>
+  </div>
 {/snippet}
 
 {#snippet TopLeftActions()}
-	{#if activeMarkerName && !hideMarkers && !disabled}
-		<div
-			class="absolute left-2 top-2 z-20 flex w-full max-w-[calc(100%-1rem)] items-center justify-between rounded-lg border border-interactive-inverse bg-base-inverse px-3 py-2"
-		>
-			<div class="flex items-center gap-2">
-				<div
-					class="flex !h-6 !w-6 shrink-0 items-center justify-center rounded-md"
-					style="background-color: {resolvedActiveMarkerColor()}"
-				>
-					<Icon iconName={'CursorClick'} size={16} color="primary-inverse" />
-				</div>
-
-				<span class="text-sm text-primary-inverse">
-					Click to count each object in <strong>{activeMarkerName}</strong>
-				</span>
-			</div>
-
-			{@render UndoResetControls()}
-		</div>
-	{/if}
+  {#if activeMarkerName && !hideMarkers && !disabled}
+    <div
+      class="absolute left-2 top-2 z-20 flex w-full max-w-[calc(100%-1rem)] items-center justify-between rounded-lg border border-interactive-inverse bg-base-inverse px-3 py-2"
+    >
+      <div class="flex items-center gap-2">
+        <div
+          class="flex !h-6 !w-6 shrink-0 items-center justify-center rounded-md"
+          style="background-color: {resolvedActiveMarkerColor()}"
+        >
+          <Icon iconName={'CursorClick'} size={16} color="primary-inverse" />
+        </div>
+
+        <span class="text-sm text-primary-inverse">
+          Click to count each object in <strong>{activeMarkerName}</strong>
+        </span>
+      </div>
+
+      {@render UndoResetControls()}
+    </div>
+  {/if}
 {/snippet}
 
 {#snippet ZoomControls()}
-	<div
-		class="absolute bottom-2 right-2 z-20 flex flex-col items-center gap-1 rounded-md border border-interactive-inverse bg-base-inverse p-1 opacity-0 transition-opacity duration-200 group-hover:opacity-100"
-	>
-		<IconButton
-			variant="transparent-inverse"
-			rounded={false}
-			onclick={zoomIn}
-			aria-label="Zoom In"
-			disabled={transform.scale >= MAX_ZOOM || disabled}
-		>
-			<Icon iconName={'Plus'} />
-		</IconButton>
-		<IconButton
-			variant="transparent-inverse"
-			rounded={false}
-			onclick={zoomOut}
-			aria-label="Zoom Out"
-			disabled={transform.scale <= MIN_ZOOM || disabled}
-		>
-			<Icon iconName={'Minus'} />
-		</IconButton>
-	</div>
+  <div
+    class="absolute bottom-2 right-2 z-20 flex flex-col items-center gap-1 rounded-md border border-interactive-inverse bg-base-inverse p-1 opacity-0 transition-opacity duration-200 group-hover:opacity-100"
+  >
+    <IconButton
+      variant="transparent-inverse"
+      rounded={false}
+      onclick={zoomIn}
+      aria-label="Zoom In"
+      disabled={transform.scale >= MAX_ZOOM || disabled}
+    >
+      <Icon iconName={'Plus'} />
+    </IconButton>
+    <IconButton
+      variant="transparent-inverse"
+      rounded={false}
+      onclick={zoomOut}
+      aria-label="Zoom Out"
+      disabled={transform.scale <= MIN_ZOOM || disabled}
+    >
+      <Icon iconName={'Minus'} />
+    </IconButton>
+  </div>
 {/snippet}
 
 <div
-	bind:this={container}
-	class="group relative h-full w-full overflow-hidden rounded-lg border"
-	data-testid="manual-cfu-counter"
+  bind:this={container}
+  class="group relative h-full w-full overflow-hidden rounded-lg border"
+  data-testid="manual-cfu-counter"
 >
-	{#if !hideMarkers && !disabled}
-		{@render TopLeftActions()}
-		{@render ZoomControls()}
-	{/if}
+  {#if !hideMarkers && !disabled}
+    {@render TopLeftActions()}
+    {@render ZoomControls()}
+  {/if}
 
-	<!-- 
+  <!-- 
 		We need to use SVG for this interactive component.
 		The SVG element is treated as a canvas for clicking, panning, and zooming.
 		We add accessibility attributes to make it more accessible despite the interactive nature.
 	-->
-	<!-- svelte-ignore a11y_click_events_have_key_events -->
-	<!-- svelte-ignore a11y_no_static_element_interactions -->
-	<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
-	<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
-	<svg
-		bind:this={svgElement}
-		onclick={handleClick}
-		onmousedown={handleMouseDown}
-		onmousemove={handleMouseMove}
-		onmouseup={handleMouseUp}
-		onmouseleave={handleMouseLeave}
-		oncontextmenu={handleContextMenu}
-		onwheel={handleWheel}
-		class:cursor-grabbing={panningState === 'active'}
-		class:cursor-grab={!disabled && (panningState === 'ready' || (isShiftPressed && !panningState))}
-		class:cursor-not-allowed={disabled}
-		class:cursor-crosshair={!disabled && !panningState && !isShiftPressed}
-		class="h-full w-full"
-		role="application"
-		aria-label={disabled
-			? 'CFU Counter (disabled)'
-			: 'CFU Counter - Click to add markers, right click or shift+click to pan'}
-		tabindex="0"
-	>
-		<g bind:this={viewport} id="viewport" class="h-full w-full">
-			<image href={imageUrl} x="0" y="0" width="100%" />
-			<g
-				bind:this={dotsGroup}
-				id="dots"
-				class="pointer-events-none"
-				aria-hidden={hideMarkers}
-				class:hidden={hideMarkers}
-			/>
-		</g>
-	</svg>
-
-	<!-- Debug info for marks count - useful for testing -->
-	<span class="sr-only" data-testid="marks-count">{marks.length}</span>
+  <!-- svelte-ignore a11y_click_events_have_key_events -->
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+  <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+  <svg
+    bind:this={svgElement}
+    onclick={handleClick}
+    onmousedown={handleMouseDown}
+    onmousemove={handleMouseMove}
+    onmouseup={handleMouseUp}
+    onmouseleave={handleMouseLeave}
+    oncontextmenu={handleContextMenu}
+    onwheel={handleWheel}
+    class:cursor-grabbing={panningState === 'active'}
+    class:cursor-grab={!disabled && (panningState === 'ready' || (isShiftPressed && !panningState))}
+    class:cursor-not-allowed={disabled}
+    class:cursor-crosshair={!disabled && !panningState && !isShiftPressed}
+    class="h-full w-full"
+    role="application"
+    aria-label={disabled
+      ? 'CFU Counter (disabled)'
+      : 'CFU Counter - Click to add markers, right click or shift+click to pan'}
+    tabindex="0"
+  >
+    <g bind:this={viewport} id="viewport" class="h-full w-full">
+      <image href={imageUrl} x="0" y="0" width="100%" />
+      <g
+        bind:this={dotsGroup}
+        id="dots"
+        class="pointer-events-none"
+        aria-hidden={hideMarkers}
+        class:hidden={hideMarkers}
+      />
+    </g>
+  </svg>
+
+  <!-- Debug info for marks count - useful for testing -->
+  <span class="sr-only" data-testid="marks-count">{marks.length}</span>
 </div>