@reshape-biotech/design-system 2.3.1 → 2.4.1

package/dist/components/graphs/matrix/Matrix.test.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+  import Matrix, { type MatrixChartProps } from './Matrix.svelte';
+
+  // Default test data
+  const confusionMatrix = [
+    [
+      { value: 8, row: 0, col: 0 }, // TP (TNTC/TNTC)
+      { value: 27, row: 0, col: 1 }, // FN (TNTC/Not TNTC)
+    ],
+    [
+      { value: 2, row: 1, col: 0 }, // FP (Not TNTC/TNTC)
+      { value: 123, row: 1, col: 1 }, // TN (Not TNTC/Not TNTC)
+    ],
+  ];
+
+  const defaultRowLabels = ['TNTC', 'Not TNTC'];
+  const defaultColLabels = ['TNTC', 'Not TNTC'];
+
+  // Props with default values
+  const {
+    data = confusionMatrix,
+    rowLabels = defaultRowLabels,
+    colLabels = defaultColLabels,
+    xAxisName = 'Predicted',
+    yAxisName = 'Actual',
+    width = '500px',
+    height = '400px',
+    onCellClick = (cell) => console.log('Cell clicked:', cell),
+    onCellHover = (cell) => console.log('Cell hover:', cell),
+    loading = false,
+    invertYAxis = true,
+  }: MatrixChartProps = $props();
+</script>
+
+<div data-testid="matrix-wrapper" style="width: 100%; height: 400px;">
+  <Matrix
+    {data}
+    {rowLabels}
+    {colLabels}
+    {xAxisName}
+    {yAxisName}
+    {width}
+    {height}
+    {onCellClick}
+    {onCellHover}
+    {loading}
+    {invertYAxis}
+  />
+</div>

package/dist/components/graphs/matrix/Matrix.test.svelte.d.ts

@@ -0,0 +1,4 @@
+import Matrix, { type MatrixChartProps } from './Matrix.svelte';
+declare const Matrix: import("svelte").Component<MatrixChartProps, {}, "">;
+type Matrix = ReturnType<typeof Matrix>;
+export default Matrix;

package/dist/components/graphs/utils/tooltipFormatter.d.ts

@@ -10,5 +10,6 @@ interface TooltipFormatterConfig {
     getSeriesColor?: (seriesName: string, seriesIndex: number) => string;
     maxSeriesToShow?: number;
 }
+export declare function toFixedLocaleString(value: number | undefined | null, fractionDigits?: number, locale?: string | undefined): string;
 export declare const createTooltipFormatter: (config: TooltipFormatterConfig) => (params: ExtendedCallbackDataParams | ExtendedCallbackDataParams[]) => string;
 export {};

package/dist/components/graphs/utils/tooltipFormatter.js

@@ -1,8 +1,22 @@
 import { textColor } from '../../../tokens';
-const toFixedLocaleString = (value, fractionDigits = 0, locale = undefined) => value?.toLocaleString(locale, {
-    minimumFractionDigits: fractionDigits,
-    maximumFractionDigits: fractionDigits,
-}) ?? '';
+export function toFixedLocaleString(value, fractionDigits = 0, locale = undefined) {
+    if (value === undefined || value === null) {
+        return '';
+    }
+    const formatted = value.toLocaleString(locale, {
+        minimumFractionDigits: fractionDigits,
+        maximumFractionDigits: fractionDigits,
+    });
+    const decimalPart = formatted.split('.')[1];
+    // preserve meaningful zeros like 5.04
+    if (decimalPart && decimalPart.split('').every((digit) => digit === '0')) {
+        return value.toLocaleString(locale, {
+            minimumFractionDigits: 0,
+            maximumFractionDigits: 0,
+        });
+    }
+    return formatted;
+}
 export const createTooltipFormatter = (config) => {
     const { maxSeriesToShow = 10 } = config;
     return (params) => {

package/dist/components/icons/index.d.ts

@@ -2,18 +2,13 @@ import type { IconComponentProps } from 'phosphor-svelte';
 import type { Component } from 'svelte';
 import type { textColor, backgroundColor } from './../../tokens';
 export type PhosphorIconProps = Component<IconComponentProps, object, ''>;
-export type IconName = 'Aperture' | 'ArrowFatLineRight' | 'ArrowCounterClockwise' | 'ArrowRight' | 'ArrowUpRight' | 'ArrowUpLeft' | 'ArrowUUpLeft' | 'Barcode' | 'Bell' | 'BookOpen' | 'BookOpenText' | 'BowlingBall' | 'BugBeetle' | 'Calendar' | 'CalendarBlank' | 'Camera' | 'CameraSlash' | 'CaretDown' | 'CaretLeft' | 'CaretRight' | 'CaretUp' | 'CaretUpDown' | 'ChatTeardropDots' | 'Check' | 'CheckCircle' | 'CheckFat' | 'Circle' | 'CircleDashed' | 'CircleHalf' | 'CirclesFour' | 'CirclesThreePlus' | 'Clock' | 'ClockCountdown' | 'Copy' | 'Crop' | 'Cube' | 'CursorClick' | 'Database' | 'Dna' | 'DotsThree' | 'DotsThreeOutlineVertical' | 'DownloadSimple' | 'Drop' | 'EnvelopeSimple' | 'Eye' | 'Eyedropper' | 'FileCsv' | 'Flag' | 'Flask' | 'Folder' | 'FolderDashed' | 'FolderSimplePlus' | 'FunnelSimple' | 'Gear' | 'GlobeSimple' | 'GlobeSimpleX' | 'GridFour' | 'Hash' | 'House' | 'ImageSquare' | 'ImagesSquare' | 'Info' | 'Lock' | 'LineSegments' | 'List' | 'Link' | 'ListMagnifyingGlass' | 'MagnifyingGlass' | 'MegaphoneSimple' | 'MicrosoftExcelLogo' | 'Moon' | 'Minus' | 'Palette' | 'Pause' | 'Pencil' | 'PencilSimple' | 'Percent' | 'Phone' | 'Plant' | 'Play' | 'Plus' | 'PlusMinus' | 'Ruler' | 'Question' | 'SealCheck' | 'RadioButton' | 'SealQuestion' | 'SealWarning' | 'SelectionAll' | 'Share' | 'SidebarSimple' | 'SkipBack' | 'SkipForward' | 'SignIn' | 'SignOut' | 'SortAscending' | 'Sparkle' | 'SpinnerGap' | 'SquaresFour' | 'Star' | 'Stop' | 'StopCircle' | 'Sun' | 'Table' | 'Tag' | 'Target' | 'TestTube' | 'Trash' | 'TrashSimple' | 'TreeStructure' | 'UserCircle' | 'UserPlus' | 'Video' | 'Warning' | 'WarningCircle' | 'WifiSlash' | 'X';
+export type IconName = 'Aperture' | 'Archive' | 'ArrowFatLineRight' | 'ArrowCounterClockwise' | 'ArrowRight' | 'ArrowUpRight' | 'ArrowUpLeft' | 'ArrowUUpLeft' | 'Barcode' | 'Bell' | 'BookOpen' | 'BookOpenText' | 'BowlingBall' | 'BugBeetle' | 'Calendar' | 'CalendarBlank' | 'Camera' | 'CameraSlash' | 'CaretDown' | 'CaretLeft' | 'CaretRight' | 'CaretUp' | 'CaretUpDown' | 'ChatTeardropDots' | 'Check' | 'CheckCircle' | 'CheckFat' | 'Circle' | 'CircleDashed' | 'CircleHalf' | 'CirclesFour' | 'CirclesThreePlus' | 'Clock' | 'ClockCountdown' | 'Copy' | 'Crop' | 'Cube' | 'CursorClick' | 'CraneTower' | 'Database' | 'Dna' | 'DotsThree' | 'DotsThreeOutlineVertical' | 'DownloadSimple' | 'Drop' | 'EnvelopeSimple' | 'Eye' | 'Eyedropper' | 'EyeSlash' | 'FileCsv' | 'Flag' | 'Flask' | 'Folder' | 'FolderDashed' | 'FolderSimplePlus' | 'FunnelSimple' | 'Gear' | 'GlobeSimple' | 'GlobeSimpleX' | 'GridFour' | 'Hash' | 'House' | 'ImageSquare' | 'ImagesSquare' | 'Info' | 'Lock' | 'LineSegments' | 'List' | 'Link' | 'ListMagnifyingGlass' | 'MagnifyingGlass' | 'MegaphoneSimple' | 'MicrosoftExcelLogo' | 'Moon' | 'Minus' | 'Palette' | 'Pause' | 'Pencil' | 'PencilSimple' | 'Percent' | 'Phone' | 'Plant' | 'Play' | 'Plus' | 'PlusMinus' | 'Ruler' | 'Question' | 'SealCheck' | 'RadioButton' | 'SealQuestion' | 'SealWarning' | 'SelectionAll' | 'Share' | 'SidebarSimple' | 'SkipBack' | 'SkipForward' | 'SignIn' | 'SignOut' | 'SortAscending' | 'Sparkle' | 'SpinnerGap' | 'SquaresFour' | 'Star' | 'Stop' | 'StopCircle' | 'Sun' | 'Table' | 'Tag' | 'Target' | 'TestTube' | 'Trash' | 'TrashSimple' | 'TreeStructure' | 'UserCircle' | 'UserPlus' | 'Video' | 'Warning' | 'WarningCircle' | 'WifiSlash' | 'X';
 export declare const iconMap: Record<IconName, PhosphorIconProps>;
 export declare function renderIcon(iconName: keyof typeof iconMap): PhosphorIconProps;
 export type BackgroundClass = `bg-${keyof typeof backgroundColor}`;
 export type IconColor = keyof typeof textColor;
 export type SupportedAnalysisModelIcons = 'pipeline_halos' | 'pipeline_large_colonies' | 'pipeline_microbial_colonies' | 'pipeline_small_colonies' | 'sgs_enteros' | 'general_germination_rate_with_tracking' | 'general_germination_rate_without_tracking' | 'pipeline_insects' | 'pipeline_colony_formation' | 'pipeline_radial_growth' | 'syngenta_health_score_crw' | 'pipeline_seed_germination' | 'syngenta_health_score_faw' | 'syngenta_health_score_sbl' | 'unilever_cfu_count_lowres';
 export type SupportedPrincipalIcons = 'user' | 'group' | 'organization';
-export interface IconComponentProps {
-    size?: number | string;
-    color?: string;
-    weight?: 'thin' | 'light' | 'regular' | 'bold' | 'fill' | 'duotone';
-}
 export { default as Icon } from './Icon.svelte';
 export type IconProps = {
     iconName: IconName;

package/dist/components/icons/index.js

@@ -1,4 +1,5 @@
 import Aperture from 'phosphor-svelte/lib/Aperture';
+import Archive from 'phosphor-svelte/lib/Archive';
 import ArrowFatLineRight from 'phosphor-svelte/lib/ArrowFatLineRight';
 import ArrowCounterClockwise from 'phosphor-svelte/lib/ArrowCounterClockwise';
 import ArrowRight from 'phosphor-svelte/lib/ArrowRight';
@@ -35,6 +36,7 @@ import Copy from 'phosphor-svelte/lib/Copy';
 import Crop from 'phosphor-svelte/lib/Crop';
 import Cube from 'phosphor-svelte/lib/Cube';
 import CursorClick from 'phosphor-svelte/lib/CursorClick';
+import CraneTower from 'phosphor-svelte/lib/CraneTower';
 import Database from 'phosphor-svelte/lib/Database';
 import Dna from 'phosphor-svelte/lib/Dna';
 import DotsThree from 'phosphor-svelte/lib/DotsThree';
@@ -44,6 +46,7 @@ import Drop from 'phosphor-svelte/lib/Drop';
 import EnvelopeSimple from 'phosphor-svelte/lib/EnvelopeSimple';
 import Eye from 'phosphor-svelte/lib/Eye';
 import Eyedropper from 'phosphor-svelte/lib/Eyedropper';
+import EyeSlash from 'phosphor-svelte/lib/EyeSlash';
 import FileCsv from 'phosphor-svelte/lib/FileCsv';
 import Flag from 'phosphor-svelte/lib/Flag';
 import Flask from 'phosphor-svelte/lib/Flask';
@@ -110,6 +113,7 @@ import TrashSimple from 'phosphor-svelte/lib/TrashSimple';
 import TreeStructure from 'phosphor-svelte/lib/TreeStructure';
 import UserCircle from 'phosphor-svelte/lib/UserCircle';
 import UserPlus from 'phosphor-svelte/lib/UserPlus';
+import User from 'phosphor-svelte/lib/User';
 import Video from 'phosphor-svelte/lib/Video';
 import Warning from 'phosphor-svelte/lib/Warning';
 import WarningCircle from 'phosphor-svelte/lib/WarningCircle';
@@ -117,6 +121,7 @@ import WifiSlash from 'phosphor-svelte/lib/WifiSlash';
 import X from 'phosphor-svelte/lib/X';
 export const iconMap = {
     Aperture,
+    Archive,
     ArrowFatLineRight,
     ArrowCounterClockwise,
     ArrowRight,
@@ -153,6 +158,7 @@ export const iconMap = {
     Crop,
     Cube,
     CursorClick,
+    CraneTower,
     Database,
     Dna,
     DotsThree,
@@ -162,6 +168,7 @@ export const iconMap = {
     EnvelopeSimple,
     Eye,
     Eyedropper,
+    EyeSlash,
     FileCsv,
     Flag,
     Flask,

package/dist/components/input/Input.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/input/Input.test.js

@@ -0,0 +1,35 @@
+import { render } from '@testing-library/svelte';
+import { describe, it, expect } from 'vitest';
+import Input from './Input.svelte';
+describe('Input', () => {
+    it('should render input with text type when no type is provided', () => {
+        const { getByRole } = render(Input, {
+            props: {
+                value: 'foo',
+            },
+        });
+        const input = getByRole('textbox');
+        expect(input.type).toBe('text');
+    });
+    it('should render label when provided', () => {
+        const { getByLabelText } = render(Input, {
+            props: {
+                value: 'foo',
+                label: 'bar',
+            },
+        });
+        const input = getByLabelText('bar');
+        expect(input.value).toBe('foo');
+    });
+    it('should include placeholder when provided, and contain placeholder class', () => {
+        const { getByRole } = render(Input, {
+            props: {
+                placeholder: 'foo',
+                value: 'foo',
+            },
+        });
+        const input = getByRole('textbox');
+        expect(input.placeholder).toBe('foo');
+        expect(input.classList).toContain('has-placeholder');
+    });
+});

package/dist/components/label/Label.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/label/Label.test.js

@@ -0,0 +1,29 @@
+import { render, screen } from '@testing-library/svelte';
+import Label from './Label.svelte';
+import { describe, it, expect } from 'vitest';
+describe('Label component', () => {
+    it('renders the label text', () => {
+        const labelText = 'Test Label';
+        render(Label, { props: { text: labelText, forId: 'testId' } });
+        expect(screen.getByText(labelText)).toBeInTheDocument();
+    });
+    it('renders the required indicator when required is true', () => {
+        render(Label, { props: { text: 'Required Label', forId: 'reqId', required: true } });
+        expect(screen.getByText('*')).toBeInTheDocument();
+        expect(screen.getByText('*')).toHaveClass('ml-0.5 text-danger');
+    });
+    it('does not render the required indicator when required is false or not provided', () => {
+        render(Label, { props: { text: 'Optional Label', forId: 'optId' } });
+        expect(screen.queryByText('*')).not.toBeInTheDocument();
+    });
+    it('applies the forId to the for attribute', () => {
+        const testId = 'my-input';
+        render(Label, { props: { text: 'Label for Input', forId: testId } });
+        expect(screen.getByText('Label for Input').closest('label')).toHaveAttribute('for', testId);
+    });
+    it('applies custom classes', () => {
+        const customClass = 'my-custom-class';
+        render(Label, { props: { text: 'Custom Class Label', forId: 'customId', class: customClass } });
+        expect(screen.getByText('Custom Class Label').closest('label')).toHaveClass(customClass);
+    });
+});

package/dist/components/manual-cfu-counter/ManualCFUCounter.svelte

@@ -534,7 +534,7 @@
     {@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.

package/dist/components/manual-cfu-counter/test/ManualCFUCounter.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/manual-cfu-counter/test/ManualCFUCounter.test.js

@@ -0,0 +1,319 @@
+import { render, fireEvent, waitFor, findByText, findByRole, getByTestId, } from '@testing-library/svelte';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { tick } from 'svelte';
+import ManualCFUCounter from '../ManualCFUCounter.svelte';
+import ManualCFUCounterTestWrapper from './ManualCFUCounterTestWrapper.svelte';
+class MockImage {
+    width = 464;
+    height = 464;
+    src = '';
+    onload = null;
+    complete = false;
+    constructor() {
+        // Set a timeout to simulate async image loading
+        setTimeout(() => {
+            this.complete = true;
+            if (this.onload)
+                this.onload();
+        }, 0);
+    }
+}
+if (typeof global !== 'undefined') {
+    global.Image = MockImage;
+    // mock resizeobserver which isn't available in gh actions environment
+    class MockResizeObserver {
+        observe = vi.fn();
+        unobserve = vi.fn();
+        disconnect = vi.fn();
+    }
+    global.ResizeObserver = MockResizeObserver;
+}
+const simulateImageLoad = async () => {
+    await tick();
+};
+describe('ManualCFUCounter Component', () => {
+    beforeEach(() => {
+        vi.clearAllMocks();
+    });
+    it('renders with default props', async () => {
+        const { container } = render(ManualCFUCounter, {
+            props: {
+                imageUrl: 'test-image.jpg',
+            },
+        });
+        await simulateImageLoad();
+        const svg = container.querySelector('svg');
+        const image = container.querySelector('image');
+        const dotsGroup = container.querySelector('#dots');
+        expect(svg).toBeTruthy();
+        expect(image).toBeTruthy();
+        expect(dotsGroup).toBeTruthy();
+        const mainSvg = container.querySelector('svg[role="application"]');
+        expect(mainSvg).toBeTruthy();
+        expect(mainSvg?.getAttribute('role')).toBe('application');
+        expect(mainSvg?.getAttribute('aria-label')).toContain('CFU Counter');
+    });
+    it('displays action buttons when marks are present', async () => {
+        const { container } = render(ManualCFUCounter, {
+            props: {
+                imageUrl: 'test-image.jpg',
+                marks: [{ x: 10, y: 10 }],
+            },
+        });
+        await simulateImageLoad();
+        const undoButton = await findByRole(container, 'button', { name: /Undo last mark/i });
+        const clearButton = await findByText(container, 'Clear all');
+        expect(undoButton).toBeTruthy();
+        expect(clearButton).toBeTruthy();
+    });
+    it('does not display action buttons when hideMarkers is true', async () => {
+        const { queryByAltText, queryByText } = render(ManualCFUCounter, {
+            props: {
+                imageUrl: 'test-image.jpg',
+                hideMarkers: true,
+                marks: [{ x: 10, y: 10 }],
+            },
+        });
+        await simulateImageLoad();
+        const undoButton = queryByAltText('Undo last mark');
+        const clearButton = queryByText('Clear all');
+        expect(undoButton).toBeFalsy();
+        expect(clearButton).toBeFalsy();
+    });
+    it('does not display action buttons when disabled is true', async () => {
+        const { queryByAltText, queryByText } = render(ManualCFUCounter, {
+            props: {
+                imageUrl: 'test-image.jpg',
+                disabled: true,
+                marks: [{ x: 10, y: 10 }],
+            },
+        });
+        await simulateImageLoad();
+        const undoButton = queryByAltText('Undo last mark');
+        const clearButton = queryByText('Clear all');
+        expect(undoButton).toBeFalsy();
+        expect(clearButton).toBeFalsy();
+    });
+    it('adds cursor-not-allowed class when disabled', async () => {
+        const { container } = render(ManualCFUCounter, {
+            props: {
+                imageUrl: 'test-image.jpg',
+                disabled: true,
+            },
+        });
+        await simulateImageLoad();
+        const svg = container.querySelector('svg');
+        expect(svg?.classList.contains('cursor-not-allowed')).toBe(true);
+    });
+    it('renders with initial marks provided via marks prop', async () => {
+        const initialMarksData = [
+            { x: 100, y: 100 },
+            { x: 200, y: 200 },
+        ];
+        const { container } = render(ManualCFUCounter, {
+            props: {
+                imageUrl: 'test-image.jpg',
+                marks: initialMarksData,
+            },
+        });
+        await simulateImageLoad();
+        await tick();
+        const marksCount = container.querySelector('[data-testid="marks-count"]');
+        expect(marksCount?.textContent).toBe('2');
+        const markers = container.querySelectorAll('[data-testid^="marker-"]');
+        expect(markers.length).toBe(2);
+        const circles = container.querySelectorAll('circle');
+        expect(circles.length).toBe(2);
+        expect(circles[0].getAttribute('cx')).toBe('100');
+        expect(circles[0].getAttribute('cy')).toBe('100');
+        expect(circles[1].getAttribute('cx')).toBe('200');
+        expect(circles[1].getAttribute('cy')).toBe('200');
+    });
+    it('simulates adding a marker via direct click', async () => {
+        const mockOnClick = vi.fn();
+        const { container } = render(ManualCFUCounter, {
+            props: {
+                imageUrl: 'test-image.jpg',
+                onclick: mockOnClick,
+            },
+        });
+        await simulateImageLoad();
+        const marksCountBefore = container.querySelector('[data-testid="marks-count"]');
+        expect(marksCountBefore?.textContent).toBe('0');
+        const svg = container.querySelector('svg');
+        expect(svg).toBeTruthy();
+        if (svg) {
+            const viewportElement = container.querySelector('#viewport');
+            expect(viewportElement).toBeTruthy();
+            if (viewportElement) {
+                await fireEvent.click(viewportElement, {
+                    clientX: 100,
+                    clientY: 100,
+                });
+            }
+            await waitFor(() => {
+                expect(mockOnClick).toHaveBeenCalledTimes(1);
+            });
+            const callArgs = mockOnClick.mock.calls[0];
+            const addedMarks = callArgs[1];
+            expect(addedMarks.length).toBe(1);
+            expect(addedMarks[0].x).toBeCloseTo(100);
+            expect(addedMarks[0].y).toBeCloseTo(100);
+            await waitFor(() => {
+                const marksCountAfter = container.querySelector('[data-testid="marks-count"]');
+                expect(marksCountAfter?.textContent).toBe('1');
+            });
+            const marker = container.querySelector('[data-testid="marker-1"]');
+            expect(marker).toBeTruthy();
+        }
+    });
+    it('simulates adding multiple markers via clicks', async () => {
+        const mockOnClick = vi.fn();
+        const { container } = render(ManualCFUCounter, {
+            props: {
+                imageUrl: 'test-image.jpg',
+                onclick: mockOnClick,
+            },
+        });
+        await simulateImageLoad();
+        let marksCount = container.querySelector('[data-testid="marks-count"]');
+        expect(marksCount?.textContent).toBe('0');
+        const svg = container.querySelector('svg');
+        expect(svg).toBeTruthy();
+        if (svg) {
+            const viewportElement = container.querySelector('#viewport');
+            expect(viewportElement).toBeTruthy();
+            if (viewportElement) {
+                await fireEvent.click(viewportElement, {
+                    clientX: 100,
+                    clientY: 100,
+                });
+                await waitFor(() => {
+                    expect(mockOnClick).toHaveBeenCalledTimes(1);
+                });
+                let firstCallArgs = mockOnClick.mock.calls[0];
+                let firstMarks = firstCallArgs[1];
+                expect(firstMarks.length).toBe(1);
+                await fireEvent.click(viewportElement, {
+                    clientX: 200,
+                    clientY: 200,
+                });
+            }
+            await waitFor(() => {
+                expect(mockOnClick).toHaveBeenCalledTimes(2);
+            });
+            let secondCallArgs = mockOnClick.mock.calls[1];
+            let secondMarks = secondCallArgs[1];
+            expect(secondMarks.length).toBe(2);
+            const markers = container.querySelectorAll('[data-testid^="marker-"]');
+            expect(markers.length).toBe(2);
+            const circles = container.querySelectorAll('circle');
+            expect(circles.length).toBe(2);
+            expect(mockOnClick).toHaveBeenCalledTimes(2);
+        }
+    });
+    it('simulates clearing marks through the reset button', async () => {
+        const mockOnClick = vi.fn();
+        const initialMarksData = [
+            { x: 100, y: 100 },
+            { x: 200, y: 200 },
+        ];
+        const { container, component } = render(ManualCFUCounterTestWrapper, {
+            props: {
+                initialTestMarks: initialMarksData,
+                onclick: mockOnClick,
+            },
+        });
+        await simulateImageLoad();
+        await tick();
+        let marksCount = getByTestId(container, 'marks-count');
+        expect(marksCount?.textContent).toBe('2');
+        const clearButton = await findByText(container, 'Clear all');
+        expect(clearButton).toBeTruthy();
+        if (clearButton) {
+            await fireEvent.click(clearButton);
+            await tick();
+            const wrapperInstance = component;
+            const currentWrapperMarks = wrapperInstance.getCurrentMarks();
+            expect(currentWrapperMarks.length).toBe(0);
+            marksCount = getByTestId(container, 'wrapper-marks-count');
+            expect(marksCount?.textContent).toBe('0');
+            const innerMarksCount = getByTestId(container, 'marks-count');
+            expect(innerMarksCount?.textContent).toBe('0');
+            const markers = container.querySelectorAll('[data-testid^="marker-"]');
+            expect(markers.length).toBe(0);
+            expect(mockOnClick).not.toHaveBeenCalledWith();
+        }
+    });
+    it('properly constrains pan to prevent moving outside container', async () => {
+        const { container } = render(ManualCFUCounter, {
+            props: {
+                imageUrl: 'test-image.jpg',
+            },
+        });
+        await simulateImageLoad();
+        const viewport = container.querySelector('#viewport');
+        expect(viewport).toBeTruthy();
+        expect(viewport?.getAttribute('transform')).toBe('translate(0, 0) scale(1)');
+    });
+    it('properly sets up keyboard accessibility attributes', async () => {
+        const { container } = render(ManualCFUCounter, {
+            props: {
+                imageUrl: 'test-image.jpg',
+            },
+        });
+        await simulateImageLoad();
+        const svg = container.querySelector('svg[role="application"]');
+        expect(svg?.getAttribute('tabindex')).toBe('0');
+        expect(svg?.getAttribute('role')).toBe('application');
+        expect(svg?.getAttribute('aria-label')).toContain('CFU Counter');
+    });
+    it('simulates undoing a marker addition via the undo button', async () => {
+        const mockOnClick = vi.fn();
+        const initialMarksData = [{ x: 50, y: 50 }];
+        const { container, component } = render(ManualCFUCounterTestWrapper, {
+            props: {
+                initialTestMarks: initialMarksData,
+                onclick: mockOnClick,
+            },
+        });
+        await simulateImageLoad();
+        await tick();
+        let marksCount = getByTestId(container, 'marks-count');
+        expect(marksCount?.textContent).toBe('1');
+        const svg = container.querySelector('svg');
+        expect(svg).toBeTruthy();
+        if (svg) {
+            const viewportElement = container.querySelector('#viewport');
+            expect(viewportElement).toBeTruthy();
+            if (viewportElement) {
+                await fireEvent.click(viewportElement, { clientX: 100, clientY: 100 });
+            }
+            await tick();
+            const wrapperInstance = component;
+            const marksAfterClick = wrapperInstance.getCurrentMarks();
+            expect(marksAfterClick.length).toBe(2);
+            mockOnClick.mockClear();
+        }
+        const undoButton = await findByRole(container, 'button', { name: /Undo last mark/i });
+        expect(undoButton).toBeTruthy();
+        if (undoButton) {
+            await fireEvent.click(undoButton);
+            await tick();
+            const wrapperInstance = component;
+            const marksAfterUndo = wrapperInstance.getCurrentMarks();
+            expect(marksAfterUndo.length).toBe(1);
+            expect(marksAfterUndo[0].x).toBeCloseTo(50);
+            expect(marksAfterUndo[0].y).toBeCloseTo(50);
+            await waitFor(() => {
+                const innerMarksCount = getByTestId(container, 'marks-count');
+                expect(innerMarksCount?.textContent).toBe('1');
+                const wrapperMarksCount = getByTestId(container, 'wrapper-marks-count');
+                expect(wrapperMarksCount?.textContent).toBe('1');
+            });
+            const markers = container.querySelectorAll('[data-testid^="marker-"]');
+            expect(markers.length).toBe(1);
+            expect(mockOnClick).not.toHaveBeenCalled();
+        }
+    });
+});

package/dist/components/modal/components/modal-overlay.svelte

@@ -9,11 +9,7 @@
 <Dialog.Overlay forceMount {...restProps}>
   {#snippet child({ props, open })}
     {#if open}
-      <div
-        {...props}
-        class="fixed inset-0 z-50 bg-overlay backdrop-blur-sm"
-        transition:fade={{ duration: 200 }}
-      >
+      <div {...props} class="fixed inset-0 z-50 bg-overlay" transition:fade={{ duration: 200 }}>
         {#if children}
           {@render children()}
         {/if}

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

@@ -623,7 +623,7 @@
     {@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.

package/dist/components/multi-cfu-counter/test/MultiCFUCounter.test.d.ts

@@ -0,0 +1 @@
+export {};