@reshape-biotech/design-system 2.2.2 → 2.3.0

package/dist/components/graphs/bar-chart/BarChart.svelte

@@ -3,7 +3,6 @@
   import Chart, { type GenericChartProps } from '../chart/Chart.svelte';
   import type { EChartsOption, BarSeriesOption } from 'echarts';
   import { createTooltipFormatter } from '../utils/tooltipFormatter';
-  import { Duration } from 'luxon';
   import { formattedDurationCompact } from '../utils/duration';
 
   type DataItem = {
@@ -17,6 +16,7 @@
     rotateXAxisLabels?: boolean;
     grid?: EChartsOption['grid'];
     captureInterval?: number;
+    shouldDim?: (key: string) => boolean;
   }
 
   let {
@@ -26,6 +26,8 @@
     xAxisName,
     yAxisName,
     captureInterval,
+    shouldDim = () => false,
+
     ...props
   }: BarChartProps = $props();
 
@@ -42,7 +44,7 @@
   };
   const defaultColorRotationArray = $derived(Object.values(defaultColors));
 
-  const xAxisData = $derived(data.map((item) => item[xAxisName]));
+  const xAxisData = $derived(data.map((item) => item[xAxisName!]));
 
   const captureIntervals = captureInterval
     ? Array(data.length)
@@ -53,24 +55,27 @@
         })
     : undefined;
 
-  const createBarDataItem = (value: number | null, color: string) => ({
-    value,
-    itemStyle: {
-      color,
-      borderRadius: 2,
-      borderWidth: 0.5,
-      borderColor: borderColor['white'],
-    },
-    emphasis: {
-      disabled: true,
-    },
-  });
+  const createBarDataItem = (value: number | null, color: string, key: string) => {
+    return {
+      value,
+      itemStyle: {
+        color,
+        borderRadius: 2,
+        borderWidth: 0.5,
+        borderColor: borderColor['white'],
+        opacity: shouldDim(key) ? 0.3 : 1,
+      },
+      emphasis: {
+        disabled: true,
+      },
+    };
+  };
 
   const chartSeries: BarSeriesOption[] = $derived.by(() => {
     const seriesData = data.map((item) => item.value);
     const seriesColors = data.map(
       (item, index) =>
-        colors?.[item[xAxisName] as string] ??
+        colors?.[item[xAxisName!] as string] ??
         defaultColorRotationArray[index % defaultColorRotationArray.length]
     );
 
@@ -78,7 +83,9 @@
       {
         name: yAxisName,
         type: 'bar',
-        data: seriesData.map((value, index) => createBarDataItem(value, seriesColors[index])),
+        data: seriesData.map((value, index) =>
+          createBarDataItem(value, seriesColors[index], String(data[index][xAxisName!]))
+        ),
         emphasis: { disabled: true },
       },
     ];

package/dist/components/graphs/bar-chart/BarChart.svelte.d.ts

@@ -10,6 +10,7 @@ interface BarChartProps extends Omit<GenericChartProps, 'timeIndex'> {
     rotateXAxisLabels?: boolean;
     grid?: EChartsOption['grid'];
     captureInterval?: number;
+    shouldDim?: (key: string) => boolean;
 }
 declare const BarChart: import("svelte").Component<BarChartProps, {}, "">;
 type BarChart = ReturnType<typeof BarChart>;

package/dist/components/graphs/bar-chart/StackedBarChart.svelte

@@ -17,6 +17,7 @@
     rotateXAxisLabels?: boolean;
     grid?: EChartsOption['grid'];
     captureInterval?: number;
+    shouldDim?: (key: string) => boolean;
   }
 
   let {
@@ -25,9 +26,13 @@
     colors,
     rotateXAxisLabels = false,
     captureInterval,
+    shouldDim = () => false,
     ...props
   }: StackedBarChartProps = $props();
 
+  let focusedSeries = $state<string | undefined>(undefined);
+  let focusedMetric = $state<string | undefined>(undefined);
+
   const defaultColors: Record<string, string> = {
     accent: chartColor['accent'],
     blue: chartColor['blue'],
@@ -52,13 +57,14 @@
         })
     : undefined;
 
-  const createBarDataItem = (value: number | null, color: string) => ({
+  const createBarDataItem = (value: number | null, color: string, key: string) => ({
     value,
     itemStyle: {
       color,
       borderRadius: 2,
       borderWidth: 0.5,
       borderColor: borderColor['white'],
+      opacity: shouldDim(key) ? 0.3 : 1,
     },
     emphasis: {
       disabled: true,
@@ -79,7 +85,7 @@
         type: 'bar',
         stack: 'total',
         emphasis: { focus: 'none', disabled: true },
-        data: seriesItem.data.map((val) => createBarDataItem(val, seriesColor)),
+        data: seriesItem.data.map((val) => createBarDataItem(val, seriesColor, seriesItem.name)),
       };
     });
   });

package/dist/components/graphs/bar-chart/StackedBarChart.svelte.d.ts

@@ -11,6 +11,7 @@ interface StackedBarChartProps extends GenericChartProps {
     rotateXAxisLabels?: boolean;
     grid?: EChartsOption['grid'];
     captureInterval?: number;
+    shouldDim?: (key: string) => boolean;
 }
 declare const StackedBarChart: import("svelte").Component<StackedBarChartProps, {}, "">;
 type StackedBarChart = ReturnType<typeof StackedBarChart>;

package/dist/components/graphs/chart/Chart.svelte

@@ -16,7 +16,7 @@
     xAxisOptions?: EChartsOption['xAxis'];
     yAxisOptions?: EChartsOption['yAxis'];
     // Common event handlers
-    onitemclick?: (params: ECElementEvent) => void;
+    onitemclick?: (params: ECElementEvent, ids?: (string | number)[], metricName?: string) => void;
     onmouseover?: (params: ECElementEvent) => void;
     onmouseout?: () => void;
     // Additional options
@@ -24,6 +24,7 @@
     loading?: boolean;
     timeIndex?: number;
     children?: Snippet;
+    onChartReady?: (chart: ECharts) => void;
   };
 
   export type GenericChartProps = Omit<ChartProps, 'options'>;
@@ -41,6 +42,7 @@
     loading = false,
     timeIndex,
     children,
+    onChartReady,
   }: ChartProps = $props();
 
   let chart = $state<ECharts | null>(null);
@@ -99,6 +101,9 @@
         color: textColor.secondary,
       },
     },
+    tooltip: {
+      appendTo: document.body,
+    },
   } as const;
 
   function initChart() {
@@ -111,6 +116,8 @@
       if (onmouseout) chart.on('mouseout', onmouseout);
 
       if (loading) chart.showLoading();
+
+      onChartReady?.(chart);
     }
   }
 

package/dist/components/graphs/chart/Chart.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { EChartsOption, ECElementEvent } from 'echarts';
+import type { EChartsOption, ECElementEvent, ECharts } from 'echarts';
 import { type Snippet } from 'svelte';
 type ChartProps = {
     options: EChartsOption;
@@ -11,13 +11,14 @@ type ChartProps = {
     yAxisUnit?: string;
     xAxisOptions?: EChartsOption['xAxis'];
     yAxisOptions?: EChartsOption['yAxis'];
-    onitemclick?: (params: ECElementEvent) => void;
+    onitemclick?: (params: ECElementEvent, ids?: (string | number)[], metricName?: string) => void;
     onmouseover?: (params: ECElementEvent) => void;
     onmouseout?: () => void;
     autoResize?: boolean;
     loading?: boolean;
     timeIndex?: number;
     children?: Snippet;
+    onChartReady?: (chart: ECharts) => void;
 };
 export type GenericChartProps = Omit<ChartProps, 'options'>;
 declare const Chart: import("svelte").Component<ChartProps, {

package/dist/components/graphs/line/LineChart.svelte

@@ -3,17 +3,9 @@
   import Chart from '../chart/Chart.svelte';
   import type { EChartsOption } from 'echarts';
   import * as echarts from 'echarts/core';
-  import type { GenericChartProps } from '../chart/Chart.svelte';
   import { createTooltipFormatter } from '../utils/tooltipFormatter';
   import { formattedDurationCompact } from '../utils/duration';
-
-  interface LineChartProps extends GenericChartProps {
-    data: (number | null)[];
-    withArea?: boolean;
-    color?: string;
-    grid?: EChartsOption['grid'];
-    captureInterval?: number;
-  }
+  import type { LineChartProps } from './types';
 
   let {
     data,
@@ -22,6 +14,10 @@
     withArea = false,
     color = chartColor['accent'],
     captureInterval,
+    additionalSeries,
+    graphic,
+    tooltipFormatter,
+    shouldDim = () => false,
     ...props
   }: LineChartProps = $props();
 
@@ -49,6 +45,40 @@
         })
     : undefined;
 
+  const seriesData = $derived.by(() => {
+    const mainSeries = {
+      type: 'line',
+      symbol: 'circle',
+      name: yAxisName,
+      symbolSize: 1,
+      data: data,
+      triggerLineEvent: true,
+      lineStyle: {
+        color: color,
+        opacity: shouldDim() ? 0.3 : 1,
+      },
+      itemStyle: {
+        color: color,
+        opacity: shouldDim() ? 0.3 : 1,
+      },
+      areaStyle: withArea
+        ? {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: echarts.color.modifyAlpha(color, 0.2),
+              },
+              {
+                offset: 1,
+                color: echarts.color.modifyAlpha(color, 0),
+              },
+            ]),
+          }
+        : undefined,
+    } as any;
+    return additionalSeries ? [mainSeries, ...additionalSeries] : mainSeries;
+  });
+
   let options: EChartsOption = $derived({
     grid: {
       containLabel: true,
@@ -96,33 +126,7 @@
       ...props.yAxisOptions,
     },
     selectedMode: 'multiple',
-    series: {
-      type: 'line',
-      symbol: 'circle',
-      name: yAxisName,
-      symbolSize: 1,
-      data: data,
-      lineStyle: {
-        color: color,
-      },
-      itemStyle: {
-        color: color,
-      },
-      areaStyle: withArea
-        ? {
-            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-              {
-                offset: 0,
-                color: echarts.color.modifyAlpha(color, 0.2),
-              },
-              {
-                offset: 1,
-                color: echarts.color.modifyAlpha(color, 0),
-              },
-            ]),
-          }
-        : undefined,
-    },
+    series: seriesData,
     tooltip: {
       axisPointer: {
         type: 'line',
@@ -136,8 +140,9 @@
       borderWidth: 0,
       borderRadius: 6,
       extraCssText: `box-shadow: ${boxShadow.menu}`,
-      formatter: formatTooltip,
+      formatter: tooltipFormatter || formatTooltip,
     },
+    ...(graphic ? { graphic } : {}),
   });
 </script>
 

package/dist/components/graphs/line/LineChart.svelte.d.ts

@@ -1,12 +1,4 @@
-import type { EChartsOption } from 'echarts';
-import type { GenericChartProps } from '../chart/Chart.svelte';
-interface LineChartProps extends GenericChartProps {
-    data: (number | null)[];
-    withArea?: boolean;
-    color?: string;
-    grid?: EChartsOption['grid'];
-    captureInterval?: number;
-}
+import type { LineChartProps } from './types';
 declare const LineChart: import("svelte").Component<LineChartProps, {}, "">;
 type LineChart = ReturnType<typeof LineChart>;
 export default LineChart;

package/dist/components/graphs/line/types.d.ts

@@ -0,0 +1,13 @@
+import type { EChartsOption } from 'echarts';
+import type { GenericChartProps } from '../chart/Chart.svelte';
+export interface LineChartProps extends GenericChartProps {
+    data: (number | null)[];
+    withArea?: boolean;
+    color?: string;
+    grid?: EChartsOption['grid'];
+    captureInterval?: number;
+    additionalSeries?: EChartsOption['series'][];
+    graphic?: EChartsOption['graphic'];
+    tooltipFormatter?: (params: any) => string;
+    shouldDim?: () => boolean;
+}

package/dist/components/graphs/line/types.js

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

package/dist/components/graphs/multiline/MultiLineChart.svelte

@@ -4,7 +4,6 @@
   import type { ECElementEvent, EChartsOption, LineSeriesOption } from 'echarts';
   import * as echarts from 'echarts/core';
   import { createTooltipFormatter } from '../utils/tooltipFormatter';
-  import { Duration } from 'luxon';
   import { formattedDurationCompact } from '../utils/duration';
 
   interface Groups {
@@ -21,6 +20,10 @@
     sumYAxis?: boolean;
     captureInterval?: number;
     grid?: EChartsOption['grid'];
+    additionalSeries?: EChartsOption['series'][];
+    graphic?: EChartsOption['graphic'];
+    tooltipFormatter?: (params: any) => string;
+    shouldDim?: (selected: string) => boolean;
   }
 
   let {
@@ -33,6 +36,10 @@
     focusTargetKey,
     sumYAxis = true,
     captureInterval,
+    additionalSeries,
+    graphic,
+    tooltipFormatter,
+    shouldDim = () => false,
     ...props
   }: MultiLineChartProps = $props();
 
@@ -99,6 +106,79 @@
       maximumFractionDigits: fractionDigits,
     }) ?? '';
 
+  const seriesData = $derived.by(() => {
+    const mainSeries = data.map((group, index): LineSeriesOption => {
+      const color =
+        colors?.[group.key] ?? defaultColorRotationArray[index % defaultColorRotationArray.length];
+
+      // Determine emphasis based on focusTargetKey or withFocus
+      let emphasisConfig: LineSeriesOption['emphasis'];
+      if (focusTargetKey) {
+        if (group.key === focusTargetKey) {
+          emphasisConfig = { focus: 'series' };
+        } else {
+          emphasisConfig = undefined;
+        }
+      } else if (withFocus) {
+        emphasisConfig = { focus: 'series' };
+      } else {
+        emphasisConfig = undefined;
+      }
+
+      // Determine visual style based on focusTargetKey
+      const isTargeted = focusTargetKey && group.key === focusTargetKey;
+      const isBlurred = focusTargetKey && !isTargeted;
+      const lineOpacity = shouldDim(group.key) ? 0.3 : isBlurred ? 0.25 : 1;
+      const areaOpacityBase = shouldDim(group.key) || isBlurred ? 0.1 : 0.2; // Lower base opacity for blurred area
+      const areaOpacityEnd = 0;
+
+      return {
+        animation: false,
+        ...(emphasisConfig && { emphasis: emphasisConfig }),
+        type: 'line',
+        stack: sumYAxis ? 'total' : undefined,
+        symbol: 'circle',
+        progressive: 300,
+        progressiveThreshold: 1000,
+        symbolSize: 1,
+        data: group.series,
+        triggerLineEvent: true,
+        name: group.key,
+        lineStyle: {
+          color: color,
+          opacity: lineOpacity,
+        },
+        itemStyle: {
+          color: color,
+          opacity: lineOpacity, // Also apply opacity to item markers if needed
+        },
+        areaStyle: withArea
+          ? {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: echarts.color.modifyAlpha(color, areaOpacityBase),
+                },
+                {
+                  offset: 1,
+                  color: echarts.color.modifyAlpha(color, areaOpacityEnd),
+                },
+              ]),
+            }
+          : undefined,
+      };
+    });
+
+    if (additionalSeries) {
+      const flattenedAdditional = additionalSeries
+        .flat()
+        .filter((series): series is LineSeriesOption => series != null);
+      return [...mainSeries, ...flattenedAdditional];
+    }
+
+    return mainSeries;
+  });
+
   let options: EChartsOption = $derived.by(() => ({
     grid: {
       left: 0,
@@ -156,75 +236,18 @@
         },
       },
       extraCssText: `box-shadow: ${boxShadow.menu}`,
-      formatter: createTooltipFormatter({
-        yAxisName,
-        yAxisUnit: props.yAxisUnit ?? undefined,
-        focusedSeriesAccessor: () => focusedSeries,
-        getSeriesColor,
-        maxSeriesToShow: 6,
-      }),
+      formatter:
+        tooltipFormatter ||
+        createTooltipFormatter({
+          yAxisName,
+          yAxisUnit: props.yAxisUnit ?? undefined,
+          focusedSeriesAccessor: () => focusedSeries,
+          getSeriesColor,
+          maxSeriesToShow: 6,
+        }),
     },
-    series: data.map((group, index): LineSeriesOption => {
-      const color =
-        colors?.[group.key] ?? defaultColorRotationArray[index % defaultColorRotationArray.length];
-
-      // Determine emphasis based on focusTargetKey or withFocus
-      let emphasisConfig: LineSeriesOption['emphasis'];
-      if (focusTargetKey) {
-        if (group.key === focusTargetKey) {
-          emphasisConfig = { focus: 'series' };
-        } else {
-          emphasisConfig = undefined;
-        }
-      } else if (withFocus) {
-        emphasisConfig = { focus: 'series' };
-      } else {
-        emphasisConfig = undefined;
-      }
-
-      // Determine visual style based on focusTargetKey
-      const isTargeted = focusTargetKey && group.key === focusTargetKey;
-      const isBlurred = focusTargetKey && !isTargeted;
-      const lineOpacity = isBlurred ? 0.25 : 1;
-      const areaOpacityBase = isBlurred ? 0.1 : 0.2; // Lower base opacity for blurred area
-      const areaOpacityEnd = 0;
-
-      return {
-        animation: false,
-        ...(emphasisConfig && { emphasis: emphasisConfig }),
-        type: 'line',
-        stack: sumYAxis ? 'total' : undefined,
-        symbol: 'circle',
-        progressive: 300,
-        progressiveThreshold: 1000,
-        symbolSize: 1,
-        data: group.series,
-        triggerLineEvent: true,
-        name: group.key,
-        lineStyle: {
-          color: color,
-          opacity: lineOpacity,
-        },
-        itemStyle: {
-          color: color,
-          opacity: lineOpacity, // Also apply opacity to item markers if needed
-        },
-        areaStyle: withArea
-          ? {
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                {
-                  offset: 0,
-                  color: echarts.color.modifyAlpha(color, areaOpacityBase),
-                },
-                {
-                  offset: 1,
-                  color: echarts.color.modifyAlpha(color, areaOpacityEnd),
-                },
-              ]),
-            }
-          : undefined,
-      };
-    }),
+    series: seriesData,
+    ...(graphic ? { graphic } : {}),
   }));
 </script>
 
@@ -232,7 +255,6 @@
   {options}
   {...{
     ...props,
-
     xAxisName,
     yAxisName,
     onmouseover: handleMouseOver,

package/dist/components/graphs/multiline/MultiLineChart.svelte.d.ts

@@ -13,6 +13,10 @@ interface MultiLineChartProps extends GenericChartProps {
     sumYAxis?: boolean;
     captureInterval?: number;
     grid?: EChartsOption['grid'];
+    additionalSeries?: EChartsOption['series'][];
+    graphic?: EChartsOption['graphic'];
+    tooltipFormatter?: (params: any) => string;
+    shouldDim?: (selected: string) => boolean;
 }
 declare const MultiLineChart: import("svelte").Component<MultiLineChartProps, {}, "">;
 type MultiLineChart = ReturnType<typeof MultiLineChart>;

package/dist/components/graphs/multiline/types.d.ts

@@ -0,0 +1,20 @@
+import type { EChartsOption } from 'echarts';
+import type { GenericChartProps } from '../chart/Chart.svelte';
+interface Groups {
+    key: string;
+    series: (number | null)[];
+}
+export interface MultiLineChartProps extends GenericChartProps {
+    data: Groups[];
+    withArea?: boolean;
+    colors?: Record<string, string>;
+    withFocus?: boolean;
+    focusTargetKey?: string;
+    sumYAxis?: boolean;
+    captureInterval?: number;
+    grid?: EChartsOption['grid'];
+    additionalSeries?: EChartsOption['series'][];
+    graphic?: EChartsOption['graphic'];
+    tooltipFormatter?: (params: any) => string;
+}
+export {};

package/dist/components/graphs/multiline/types.js

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

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

@@ -1,4 +1,8 @@
 import type { CallbackDataParams } from 'echarts/types/dist/shared';
+interface ExtendedCallbackDataParams extends CallbackDataParams {
+    prefix?: string;
+    textColor?: string;
+}
 interface TooltipFormatterConfig {
     yAxisName?: string;
     yAxisUnit?: string;
@@ -6,5 +10,5 @@ interface TooltipFormatterConfig {
     getSeriesColor?: (seriesName: string, seriesIndex: number) => string;
     maxSeriesToShow?: number;
 }
-export declare const createTooltipFormatter: (config: TooltipFormatterConfig) => (params: CallbackDataParams | CallbackDataParams[]) => string;
+export declare const createTooltipFormatter: (config: TooltipFormatterConfig) => (params: ExtendedCallbackDataParams | ExtendedCallbackDataParams[]) => string;
 export {};

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

@@ -20,7 +20,7 @@ export const createTooltipFormatter = (config) => {
         }
         const firstParam = paramArray[0];
         const categoryName = firstParam.name ?? ''; // X-axis value (category)
-        const unit = config.yAxisUnit ?? '';
+        const unit = config.yAxisUnit ? ` (${config.yAxisUnit})` : '';
         let tooltipContent = `<div class="font-medium mb-1 text-primary">${categoryName}</div>`;
         const originalSeriesCount = paramArray.length;
         let seriesToShow = paramArray;
@@ -33,6 +33,8 @@ export const createTooltipFormatter = (config) => {
             const seriesName = p.seriesName ?? config.yAxisName ?? ''; // Use series name or configured yAxisName
             const value = p.value; // Assume number after null check
             let color = p.color;
+            const prefix = p.prefix ?? '';
+            const textColorValue = p.textColor;
             // Resolve color for multiline if needed and getter provided
             if (!color && config.getSeriesColor && p.seriesName) {
                 color = config.getSeriesColor(p.seriesName, p.seriesIndex ?? index);
@@ -40,7 +42,9 @@ export const createTooltipFormatter = (config) => {
             // Fallback color if still unresolved (should ideally not happen if configured correctly)
             color = color || textColor['icon-blue'];
             const marker = `<span class="size-2 rounded-sm" style="background-color:${color}"></span>`;
-            const valueString = `<span class="text-primary">${toFixedLocaleString(value, 2)} ${unit}</span>`;
+            const formattedValue = toFixedLocaleString(value, 2);
+            const textColorClass = textColorValue ? `color: ${textColorValue}` : 'text-primary';
+            const valueString = `<span class="${textColorClass}">${prefix}${formattedValue}${unit}</span>`;
             tooltipContent += `<div class="flex items-center justify-between gap-4"><span class="flex items-center gap-2">${marker}${seriesName}</span><span>${valueString}</span></div>`;
         });
         if (originalSeriesCount > maxSeriesToShow) {

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

@@ -24,6 +24,7 @@
     onclick?: (event: MouseEvent, marks: Array<{ x: number; y: number }>) => void;
     disabled?: boolean;
     hideMarkers?: boolean;
+    imageDimensions?: { width: number; height: number };
   }
 
   let {
@@ -32,6 +33,7 @@
     disabled = false,
     hideMarkers = false,
     marks = $bindable([]),
+    imageDimensions = $bindable({ width: 0, height: 0 }),
   }: Props = $props();
 
   let svgElement: SVGSVGElement;
@@ -465,6 +467,11 @@
   $effect(() => {
     renderMarkers();
   });
+
+  $effect(() => {
+    imageDimensions.width = imageDisplayWidth;
+    imageDimensions.height = imageDisplayHeight;
+  });
 </script>
 
 {#snippet TopLeftActions()}

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

@@ -10,7 +10,11 @@ interface Props {
     }>) => void;
     disabled?: boolean;
     hideMarkers?: boolean;
+    imageDimensions?: {
+        width: number;
+        height: number;
+    };
 }
-declare const ManualCfuCounter: import("svelte").Component<Props, {}, "marks">;
+declare const ManualCfuCounter: import("svelte").Component<Props, {}, "marks" | "imageDimensions">;
 type ManualCfuCounter = ReturnType<typeof ManualCfuCounter>;
 export default ManualCfuCounter;

package/dist/components/modal/Modal.stories.svelte

@@ -150,7 +150,7 @@
     <Modal.Trigger>
       <Button variant="primary">Open Custom Modal</Button>
     </Modal.Trigger>
-    <Modal.Content class="min-w-full !bg-accent p-8">
+    <Modal.Content class="min-w-full bg-accent p-8">
       <Modal.Title class="text-xl text-primary-inverse">Custom Styled Modal</Modal.Title>
       <div class="space-y-4 pt-4">
         <p class="text-sm text-secondary-inverse">

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

@@ -1,10 +1,11 @@
 <script lang="ts">
+  import { twMerge } from 'tailwind-merge';
   import type { ModalBottomProps } from '../types';
 
   let { children, class: className = '', ...restProps }: ModalBottomProps = $props();
 
   const baseClasses = 'border-t border-static -mx-5';
-  const finalClasses = `${baseClasses} ${className}`;
+  const finalClasses = twMerge(baseClasses, className);
 </script>
 
 <div class={finalClasses} {...restProps}>

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

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { Dialog } from 'bits-ui';
   import { scale } from 'svelte/transition';
+  import { twMerge } from 'tailwind-merge';
   import { Icon } from '../../icons';
   import type { ModalContentProps } from '../types';
   import Overlay from './modal-overlay.svelte';
@@ -16,7 +17,7 @@
 
   const baseClasses =
     'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 bg-surface p-5 shadow-lg sm:rounded-lg';
-  const finalClasses = `${baseClasses} ${className}`;
+  const finalClasses = twMerge(baseClasses, className);
 </script>
 
 {#snippet withCloseButton()}

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

@@ -1,11 +1,12 @@
 <script lang="ts">
   import { Dialog } from 'bits-ui';
   import type { ModalTitleProps } from '../types';
+  import { twMerge } from 'tailwind-merge';
 
   let { children, class: className = '', icon, ...restProps }: ModalTitleProps = $props();
 
   const baseClasses = 'text-xl font-semibold tracking-tight text-primary';
-  const finalClasses = `${baseClasses} ${className}`;
+  const finalClasses = twMerge(baseClasses, className);
 </script>
 
 <div class="space-y-6">

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

@@ -51,6 +51,7 @@
     activeMarkerName?: string;
     editableConfigIndex?: number | null;
     showMultiConfig?: boolean;
+    imageDimensions?: { width: number; height: number };
   }
 
   let {
@@ -65,6 +66,7 @@
     activeMarkerName = '',
     editableConfigIndex = null,
     showMultiConfig = false,
+    imageDimensions = $bindable({ width: 0, height: 0 }),
   }: Props = $props();
 
   let previousConfigIndex = $state<number | null>(null);
@@ -531,6 +533,11 @@
   $effect(() => {
     renderMarkers();
   });
+
+  $effect(() => {
+    imageDimensions.width = imageDisplayWidth;
+    imageDimensions.height = imageDisplayHeight;
+  });
 </script>
 
 {#snippet UndoResetControls()}

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

@@ -26,7 +26,11 @@ interface Props {
     activeMarkerName?: string;
     editableConfigIndex?: number | null;
     showMultiConfig?: boolean;
+    imageDimensions?: {
+        width: number;
+        height: number;
+    };
 }
-declare const MultiCfuCounter: import("svelte").Component<Props, {}, "marks">;
+declare const MultiCfuCounter: import("svelte").Component<Props, {}, "marks" | "imageDimensions">;
 type MultiCfuCounter = ReturnType<typeof MultiCfuCounter>;
 export default MultiCfuCounter;

package/dist/components/stat-card/StatCard.svelte

@@ -95,7 +95,7 @@
   class="flex w-full flex-shrink-0 flex-grow basis-0 flex-col items-start gap-2 overflow-clip rounded-lg bg-neutral p-4 text-left transition-colors"
   class:hover:bg-neutral-hover={editable && !isEditing && value !== null}
   class:cursor-pointer={editable && !isEditing && value !== null}
-  onclick={editable && !isEditing && value !== null ? handleCardClick : undefined}
+  onclick={handleCardClick}
   onkeydown={editable && !isEditing && value !== null ? handleInputKeydown : undefined}
   aria-label={editable && !isEditing && value !== null ? `Edit ${title}` : undefined}
 >

package/dist/tokens.d.ts

@@ -1,5 +1,11 @@
 import { colors } from './tokens/colors';
 export type OutputName = 'cfu' | 'halo' | 'seed' | 'seedling' | 'leaf' | 'insect' | 'egg' | 'food' | 'positive' | 'negative' | 'review' | 'tntc' | 'contaminated' | 'countable' | 'full_growth' | 'reduced_growth' | 'dotted_growth';
+declare const annotationOutputFadedFillColors: {
+    [K in OutputName]: string;
+};
+declare const annotationOutputFadedStrokeColors: {
+    [K in OutputName]: string;
+};
 declare const borderColor: {
     'dark-static': string;
     'dark-input': string;
@@ -212,7 +218,7 @@ declare const boxShadow: {
     container: string;
     menu: string;
 };
-export { colors, borderColor, textColor, backgroundColor, boxShadow, outlineColor, chartColor };
+export { colors, borderColor, textColor, backgroundColor, boxShadow, outlineColor, chartColor, annotationOutputFadedFillColors, annotationOutputFadedStrokeColors, };
 export declare const tokens: {
     colors: {
         base: {

package/dist/tokens.js

@@ -358,7 +358,7 @@ const boxShadow = {
     menu: `0 4px 20px 0 ${colors.shadow[6]}, 0 0 0 1px ${colors.shadow[8]}`,
 };
 // Export individual token categories for tree-shaking
-export { colors, borderColor, textColor, backgroundColor, boxShadow, outlineColor, chartColor };
+export { colors, borderColor, textColor, backgroundColor, boxShadow, outlineColor, chartColor, annotationOutputFadedFillColors, annotationOutputFadedStrokeColors, };
 // Export tokens object for backward compatibility
 export const tokens = {
     colors,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reshape-biotech/design-system",
-  "version": "2.2.2",
+  "version": "2.3.0",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build",
@@ -389,6 +389,7 @@
   },
   "dependencies": {
     "bits-ui": "^1.8.0",
-    "echarts": "^5.6.0"
+    "echarts": "^5.6.0",
+    "tailwind-merge": "^3.3.1"
   }
 }