@reshape-biotech/design-system 2.7.36 → 2.7.38

package/dist/components/activity/Activity.svelte

@@ -3,6 +3,7 @@
   import ActivityIcon from './ActivityIcon.svelte';
   import type { ActivityIconType } from './ActivityIcon.svelte';
   import { DateTime } from 'luxon';
+  import { twMerge } from 'tailwind-merge';
 
   type Activity = {
     activity_type?: string;
@@ -54,13 +55,14 @@
   let { class: className = '', activity }: Props = $props();
 </script>
 
-<div class={`group flex items-stretch gap-3 ${className}`}>
+<div class={twMerge('group flex items-stretch gap-3', className)}>
   <div class="flex min-h-12 flex-col items-center gap-1.5">
     <div class="bg-neutral w-0.5 grow group-first:invisible"></div>
     <div
-      class="text-secondary flex h-5 w-5 shrink-0 items-center justify-center rounded p-0.5 {ACTIVITY_BACKGROUND[
-        activity.icon
-      ]}"
+      class={twMerge(
+        'text-secondary flex h-5 w-5 shrink-0 items-center justify-center rounded p-0.5',
+        ACTIVITY_BACKGROUND[activity.icon]
+      )}
     >
       <ActivityIcon icon={activity.icon} />
     </div>

package/dist/components/button/Button.svelte

@@ -12,6 +12,7 @@
 </script>
 
 <script lang="ts">
+  import { twMerge } from 'tailwind-merge';
   import Spinner from '../spinner/Spinner.svelte';
   import type { Snippet } from 'svelte';
 
@@ -66,7 +67,7 @@
   {id}
   {tabindex}
   class:cursor-wait={loading}
-  class="button {variantClass} {sizeClass} {className}"
+  class={twMerge('button', variantClass, sizeClass, className)}
   data-testid={dataTestId}
   class:rounded
   class:disabled

package/dist/components/card/Card.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
+  import { twMerge } from 'tailwind-merge';
 
   type Props = {
     Header?: Snippet;
@@ -19,19 +20,20 @@
 </script>
 
 <div
-  class="overflow-hidden rounded-[10px] border border-static bg-surface shadow-container {additionalClasses}"
+  class={twMerge(
+    'overflow-hidden rounded-[10px] border border-static bg-surface shadow-container',
+    additionalClasses
+  )}
 >
   {#if Header}
     <header
-      class="flex min-h-12 items-center px-4"
-      class:border-b={headerBorder}
-      class:border-static={headerBorder}
+      class={twMerge('flex min-h-12 items-center px-4', headerBorder && 'border-b border-static')}
     >
       {@render Header()}
     </header>
   {/if}
   {#if children}
-    <div class={`p-${padding}`}>
+    <div class={twMerge(`p-${padding}`)}>
       {@render children()}
     </div>
   {/if}

package/dist/components/card/CardWrapper.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
   import type { ClassValue } from 'svelte/elements';
+  import { twMerge } from 'tailwind-merge';
 
   type Props = {
     Header?: Snippet;
@@ -19,28 +20,24 @@
   }: Props = $props();
 </script>
 
-<div class={['wrapper', variant, additionalClasses]}>
+<div class={twMerge('wrapper', variant, additionalClasses)}>
   {#if Header}
     <header
-      class={[
+      class={twMerge(
         'flex w-full items-center justify-between',
-        {
-          'min-h-10 px-4': variant === 'default',
-          'min-h-8 px-3': variant === 'compact',
-        },
-      ]}
+        variant === 'default' && 'min-h-10 px-4',
+        variant === 'compact' && 'min-h-8 px-3'
+      )}
     >
       {@render Header()}
     </header>
   {/if}
   <div
-    class={[
+    class={twMerge(
       'flex w-full flex-col !overflow-hidden [&>*]:w-full',
-      {
-        'gap-1 [&>*]:rounded-xl': variant === 'default',
-        'gap-0.5 [&>*]:rounded-[10px]': variant === 'compact',
-      },
-    ]}
+      variant === 'default' && 'gap-1 [&>*]:rounded-xl',
+      variant === 'compact' && 'gap-0.5 [&>*]:rounded-[10px]'
+    )}
   >
     {@render children()}
   </div>

package/dist/components/checkbox/Checkbox.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { twMerge } from 'tailwind-merge';
   import Check from 'phosphor-svelte/lib/Check';
   import Minus from 'phosphor-svelte/lib/Minus';
   import { Icon } from '../icons/index.js';
@@ -6,13 +7,13 @@
 
   export type CheckboxProps = CheckboxRootProps;
 
-  let { checked = $bindable(false), onCheckedChange, name, ...props }: CheckboxProps = $props();
+  let { checked = $bindable(false), onCheckedChange, name, class: className, ...props }: CheckboxProps = $props();
 </script>
 
 <Checkbox.Root bind:checked {onCheckedChange} {...props}>
   {#snippet children({ checked, indeterminate })}
     <div
-      class={`flex items-center justify-center rounded border border-static ${checked ? 'bg-dark-accent-inverse-hover' : ''}`}
+      class={twMerge('flex items-center justify-center rounded border border-static', checked && 'bg-dark-accent-inverse-hover', className)}
     >
       {#if checked}
         <Icon class="text-primary-inverse" icon={Check} />

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

@@ -5,6 +5,7 @@
   import { Combobox } from 'bits-ui';
   import type { ComboboxContentProps } from '../types';
   import { fade } from 'svelte/transition';
+  import { twMerge } from 'tailwind-merge';
 
   let {
     children,
@@ -30,7 +31,7 @@
             <Icon icon={CaretUp} color="tertiary" />
           </Combobox.ScrollUpButton>
           <Combobox.Viewport class="overflow-y-auto">
-            <div class="{paddedContent ? 'p-1' : ''} empty:p-0">
+            <div class={twMerge(paddedContent ? 'p-1' : '', 'empty:p-0')}>
               {@render children()}
             </div>
           </Combobox.Viewport>

package/dist/components/datepicker/DatePicker.svelte

@@ -3,6 +3,7 @@
   import CaretRight from 'phosphor-svelte/lib/CaretRight';
   import { Icon } from '../icons/index.js';
   import { run } from 'svelte/legacy';
+  import { twMerge } from 'tailwind-merge';
 
   import { DateTime, type MonthNumbers } from 'luxon';
 
@@ -125,11 +126,13 @@
                   {#if dayOfMonth > 0}
                     <div class="date-container">
                       <p
-                        class={dayOfMonth === selectedDay &&
-                        selectedMonth === shownMonth &&
-                        selectedYear === shownYear
-                          ? 'date selected-date'
-                          : 'date'}
+                        class={twMerge(
+                          'date',
+                          dayOfMonth === selectedDay &&
+                          selectedMonth === shownMonth &&
+                          selectedYear === shownYear &&
+                          'selected-date'
+                        )}
                       >
                         <button
                           onclick={() => {

package/dist/components/divider/Divider.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+
   interface Props {
     class?: string;
     vertical?: boolean;
@@ -9,7 +11,9 @@
 </script>
 
 <div
-  class={`${
-    vertical ? 'h-full w-0 border-l' : 'h-0 w-full border-b'
-  } ${inverse ? 'border-static-inverse' : 'border-static'} ${className}`}
+  class={twMerge(
+    vertical ? 'h-full w-0 border-l' : 'h-0 w-full border-b',
+    inverse ? 'border-static-inverse' : 'border-static',
+    className
+  )}
 ></div>

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

@@ -3,6 +3,7 @@
   import { Icon } from '../../icons/index.js';
   import { Dialog } from 'bits-ui';
   import { fly } from 'svelte/transition';
+  import { twMerge } from 'tailwind-merge';
   import type { DrawerContentProps } from '../types';
   import Overlay from './drawer-overlay.svelte';
 
@@ -20,7 +21,7 @@
 
   const baseClasses = 'fixed top-0 h-screen z-50  w-[460px] flex flex-col bg-surface shadow-lg';
   const sideClasses = side === 'left' ? 'left-0' : 'right-0';
-  const finalClasses = `${baseClasses} ${sideClasses} ${className}`;
+  const finalClasses = twMerge(baseClasses, sideClasses, className);
 
   const getTransitionParams = (side: 'left' | 'right') => ({
     x: side === 'left' ? -300 : 300,

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

@@ -1,11 +1,12 @@
 <script lang="ts">
   import { Dialog } from 'bits-ui';
+  import { twMerge } from 'tailwind-merge';
   import type { DrawerTitleProps } from '../types';
 
   let { children, class: className = '', icon, ...restProps }: DrawerTitleProps = $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/dropdown/components/dropdown-item.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { DropdownMenu } from 'bits-ui';
+  import { twMerge } from 'tailwind-merge';
   import type { DropdownItemProps } from '../types';
 
   let {
@@ -18,7 +19,7 @@
     {:else}
       <div
         {...props}
-        class="dropdown-item flex gap-2 cursor-pointer items-center rounded-md px-2.5 py-2 min-h-10 text-sm outline-none transition-colors hover:bg-neutral focus:bg-neutral data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_a]:no-underline {className}"
+        class={twMerge('dropdown-item flex gap-2 cursor-pointer items-center rounded-md px-2.5 py-2 min-h-10 text-sm outline-none transition-colors hover:bg-neutral focus:bg-neutral data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_a]:no-underline', className)}
       >
         {@render children?.()}
       </div>

package/dist/components/dropdown/components/dropdown-sub-trigger.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { DropdownMenu } from 'bits-ui';
+  import { twMerge } from 'tailwind-merge';
   import CaretRight from 'phosphor-svelte/lib/CaretRight';
   import CaretLeft from 'phosphor-svelte/lib/CaretLeft';
   import { Icon } from '../../icons/index.js';
@@ -17,7 +18,7 @@
     {:else}
       <div
         {...props}
-        class="dropdown-sub-trigger flex h-9 cursor-pointer items-center justify-between gap-2 rounded-md px-2 py-1.5 text-sm outline-none transition-colors hover:bg-neutral focus:bg-neutral data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_a]:no-underline {className}"
+        class={twMerge('dropdown-sub-trigger flex h-9 cursor-pointer items-center justify-between gap-2 rounded-md px-2 py-1.5 text-sm outline-none transition-colors hover:bg-neutral focus:bg-neutral data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_a]:no-underline', className)}
       >
         {#if !hideChevron && side === 'left'}
           <Icon color="tertiary" icon={chevronIcon} size={14} class="mr-2" />

package/dist/components/graphs/scatterplot/Scatterplot.stories.svelte

@@ -10,12 +10,12 @@
   });
 
   const data: DataPoint[] = [
-    { value: [10.0, 8.04], metadata: { blip: '1', blop: 1, user_id: '1' } },
-    { value: [8.07, 6.95], metadata: { blip: '2', blop: 2, user_id: '2' } },
-    { value: [13.0, 7.58], metadata: { blip: '3', blop: 3, user_id: '3' } },
-    { value: [9.05, 8.81], metadata: { blip: '4', blop: 4, user_id: '4' } },
-    { value: [12.0, 8.33], metadata: { blip: '5', blop: 5, user_id: '5' } },
-    { value: [14.0, 7.66], metadata: { blip: '6', blop: 6, user_id: '6' } },
+    { value: [10, 8], metadata: { id: '1' } },
+    { value: [8, 7], metadata: { id: '2' } },
+    { value: [13, 8], metadata: { id: '3' } },
+    { value: [9, 9], metadata: { id: '4' } },
+    { value: [12, 8], metadata: { id: '5' } },
+    { value: [14, 8], metadata: { id: '6' } },
   ];
 
   const errorBarsData: DataPoint[] = data.map((d) => ({
@@ -28,78 +28,147 @@
     [12, 14],
   ];
 
-  function handleItemClick(params: echarts.ECElementEvent) {}
-
-  function handleMouseOver(params: echarts.ECElementEvent) {}
-
-  function handleMouseOut() {}
+  let tooltipState = $state({ visible: false, x: 0, y: 0, point: null as DataPoint | null });
 </script>
 
 <Story name="Base" asChild>
   <div class="h-[400px] w-full">
-    <Scatterplot
-      {data}
-      xAxisName="Manual count"
-      yAxisName="Analysis count"
-      onitemclick={handleItemClick}
-      onmouseover={handleMouseOver}
-      onmouseout={handleMouseOut}
-    />
+    <Scatterplot {data} xAxisName="X axis" yAxisName="Y axis" />
   </div>
 </Story>
 
-<Story name="With Line Data" asChild>
+<Story name="With reference line" asChild>
   <div class="h-[400px] w-full">
-    <Scatterplot
-      {data}
-      {lineData}
-      xAxisName="Manual count"
-      yAxisName="Analysis count"
-      onitemclick={handleItemClick}
-      onmouseover={handleMouseOver}
-      onmouseout={handleMouseOut}
-    />
+    <Scatterplot {data} {lineData} xAxisName="X axis" yAxisName="Y axis" />
   </div>
 </Story>
-<Story name="Error bars" asChild>
+
+<Story name="With error bars" asChild>
+  <div class="h-[400px] w-full">
+    <Scatterplot data={errorBarsData} {lineData} xAxisName="X axis" yAxisName="Y axis" />
+  </div>
+</Story>
+
+<Story name="With confidence band" asChild>
   <div class="h-[400px] w-full">
     <Scatterplot
       data={errorBarsData}
       {lineData}
-      xAxisName="Manual count"
-      yAxisName="Analysis count"
-      onitemclick={handleItemClick}
-      onmouseover={handleMouseOver}
-      onmouseout={handleMouseOut}
+      xAxisName="X axis"
+      yAxisName="Y axis"
+      showConfidenceBand
     />
   </div>
 </Story>
-<Story name="Error bars with confidence band" asChild>
+
+<Story name="With legend" asChild>
   <div class="h-[400px] w-full">
     <Scatterplot
-      data={errorBarsData}
+      {data}
       {lineData}
-      xAxisName="Manual count"
-      yAxisName="Analysis count"
+      xAxisName="X axis"
+      yAxisName="Y axis"
       showConfidenceBand
-      onitemclick={handleItemClick}
-      onmouseover={handleMouseOver}
-      onmouseout={handleMouseOut}
+      showLegend
     />
   </div>
 </Story>
-<Story name="Confidence band and legend" asChild>
+
+<Story name="With groups" asChild>
+  {@const data: DataPoint[] = [
+    { value: [8, 7], metadata: { id: 'A' } },
+    { value: [8, 10], metadata: { id: 'A' } },
+    { value: [15, 14], metadata: { id: 'B' } },
+    { value: [23, 21], metadata: { id: 'C' } },
+    { value: [23, 25], metadata: { id: 'C' } },
+    { value: [23, 22], metadata: { id: 'C' } },
+    { value: [35, 32], metadata: { id: 'D' } },
+    { value: [35, 39], metadata: { id: 'D' }, disagreement: true },
+    { value: [42, 41], metadata: { id: 'E' } },
+    { value: [42, 44], metadata: { id: 'E' } },
+    { value: [56, 58], metadata: { id: 'F' } },
+  ]}
+  {@const groups = [[0, 1], [2], [3, 4, 5], [6, 7], [8, 9], [10]]}
+  {@const lineData: [[number, number], [number, number]] = [[0, 0], [65, 65]]}
   <div class="h-[400px] w-full">
     <Scatterplot
       {data}
+      {groups}
       {lineData}
-      xAxisName="Manual count"
-      yAxisName="Analysis count"
+      xAxisName="X axis"
+      yAxisName="Y axis"
       showConfidenceBand
-      showLegend
-      onitemclick={handleItemClick}
-      onmouseover={handleMouseOver}
-      onmouseout={handleMouseOut}
-    />
+      onmouseover={(params) => {
+        tooltipState.visible = true;
+        tooltipState.x = (params.event?.event as MouseEvent)?.offsetX ?? 0;
+        tooltipState.y = (params.event?.event as MouseEvent)?.offsetY ?? 0;
+        tooltipState.point = params.data;
+      }}
+      onmouseout={() => {
+        tooltipState.visible = false;
+        tooltipState.point = null;
+      }}
+    >
+      {#if tooltipState.visible && tooltipState.point}
+        <div
+          class="pointer-events-none absolute z-50 rounded border bg-white p-2 text-xs shadow-lg"
+          style="left: {tooltipState.x + 10}px; top: {tooltipState.y + 10}px;"
+        >
+          <div class="font-medium">ID: {tooltipState.point.metadata.id}</div>
+          <div>X: {tooltipState.point.value[0]}</div>
+          <div>Y: {tooltipState.point.value[1]}</div>
+        </div>
+      {/if}
+    </Scatterplot>
+  </div>
+</Story>
+
+<Story name="Overlapping groups" asChild>
+  {@const data: DataPoint[] = [
+    { value: [12, 9], metadata: { id: 'A' } },
+    { value: [12, 15], metadata: { id: 'A' } },
+    { value: [12, 12], metadata: { id: 'B' } },
+    { value: [12, 18], metadata: { id: 'B' } },
+    { value: [12, 14], metadata: { id: 'B' } },
+    { value: [31, 27], metadata: { id: 'C' } },
+    { value: [31, 34], metadata: { id: 'C' } },
+    { value: [31, 30], metadata: { id: 'D' } },
+  ]}
+  {@const groups = [
+    [0, 1],
+    [2, 3, 4],
+    [5, 6],
+    [7],
+  ]}
+  {@const lineData: [[number, number], [number, number]] = [[0, 0], [40, 40]]}
+  <div class="h-[400px] w-full">
+    <Scatterplot
+      {data}
+      {groups}
+      {lineData}
+      xAxisName="X axis"
+      yAxisName="Y axis"
+      onmouseover={(params) => {
+        tooltipState.visible = true;
+        tooltipState.x = (params.event?.event as MouseEvent)?.offsetX ?? 0;
+        tooltipState.y = (params.event?.event as MouseEvent)?.offsetY ?? 0;
+        tooltipState.point = params.data;
+      }}
+      onmouseout={() => {
+        tooltipState.visible = false;
+        tooltipState.point = null;
+      }}
+    >
+      {#if tooltipState.visible && tooltipState.point}
+        <div
+          class="pointer-events-none absolute z-50 rounded border bg-white p-2 text-xs shadow-lg"
+          style="left: {tooltipState.x + 10}px; top: {tooltipState.y + 10}px;"
+        >
+          <div class="font-medium">ID: {tooltipState.point.metadata.id}</div>
+          <div>X: {tooltipState.point.value[0]}</div>
+          <div>Y: {tooltipState.point.value[1]}</div>
+        </div>
+      {/if}
+    </Scatterplot>
   </div>
 </Story>

package/dist/components/graphs/scatterplot/Scatterplot.svelte

@@ -16,7 +16,6 @@
   export type DataPoint = {
     value: [number, number];
     metadata: any;
-    error_value?: number;
     disagreement?: boolean | null;
     highlighted?: boolean | null;
   };
@@ -31,9 +30,15 @@
     type: 'point' | 'line' | 'area';
   };
 
+  type LineSegment = {
+    points: [number, number][];
+    disagreement?: boolean;
+  };
+
   type ScatterPlotProps = {
     data: DataPoint[];
     lineData?: [[number, number], [number, number]];
+    groups?: number[][];
     showConfidenceBand?: boolean;
     showLegend?: boolean;
     onitemclick?: (params: ScatterPlotEchartsEvent) => void;
@@ -58,10 +63,55 @@
       { label: 'Perfect agreement', color: backgroundColor['lilac-inverse'], type: 'line' },
     ],
     highlightIndex = null,
+    groups = [],
     children,
     ...props
   }: ScatterPlotProps = $props();
 
+  let hoveredGroupIndices = $state<number[] | null>(null);
+
+  const findGroupForIndex = (idx: number): number[] | null => {
+    if (groups.length === 0) return null;
+    return groups.find((g) => g.includes(idx)) ?? null;
+  };
+
+  const highlightedIndices = $derived.by((): number[] | null => {
+    if (hoveredGroupIndices !== null) return hoveredGroupIndices;
+    if (highlightIndex !== null) {
+      const group = findGroupForIndex(highlightIndex);
+      return group ?? [highlightIndex];
+    }
+    return null;
+  });
+
+  const groupLines = $derived.by((): LineSegment[] => {
+    if (groups.length === 0) return [];
+
+    return groups
+      .filter((g) => g.length > 1)
+      .map((groupIndices) => {
+        const points = groupIndices.map((i) => data[i]?.value).filter(Boolean) as [
+          number,
+          number,
+        ][];
+        const hasDisagreement = groupIndices.some((i) => data[i]?.disagreement);
+        return { points, disagreement: hasDisagreement };
+      });
+  });
+
+  const groupedDisagreement = $derived.by((): boolean[] => {
+    const result = data.map((d) => d.disagreement ?? false);
+    for (const groupIndices of groups) {
+      const hasDisagreement = groupIndices.some((i) => data[i]?.disagreement);
+      if (hasDisagreement) {
+        for (const i of groupIndices) {
+          result[i] = true;
+        }
+      }
+    }
+    return result;
+  });
+
   const displayedLegendItems: LegendItem[] = $derived([
     ...legendItems,
     ...(showConfidenceBand
@@ -82,75 +132,44 @@
   }
 
   function handleMouseOver(params: ScatterPlotEchartsEvent) {
+    const hoveredIdx = params.dataIndex;
+    if (hoveredIdx !== undefined && hoveredIdx >= 0) {
+      const group = findGroupForIndex(hoveredIdx);
+      hoveredGroupIndices = group ?? [hoveredIdx];
+    }
     onmouseover?.(params);
   }
 
   function handleMouseOut() {
+    hoveredGroupIndices = null;
     onmouseout?.();
   }
 
-  // from https://echarts.apache.org/examples/en/editor.html?c=custom-error-bar
-  function renderErrorBarItem(
-    params: CustomSeriesRenderItemParams,
-    api: CustomSeriesRenderItemAPI
-  ) {
+  function renderLineItem(params: CustomSeriesRenderItemParams, api: CustomSeriesRenderItemAPI) {
     const xValue = api.value(0) as number;
-    const yValue = api.value(1) as number;
-    const error = api.value(2) as number;
+    const yMin = api.value(1) as number;
+    const yMax = api.value(2) as number;
     const disagreement = api.value(3) as number;
 
-    const highPoint = api.coord([xValue, yValue + error]);
-    const lowPoint = api.coord([xValue, yValue - error]);
+    const topPoint = api.coord([xValue, yMax]);
+    const bottomPoint = api.coord([xValue, yMin]);
 
-    if (!highPoint || !lowPoint) {
+    if (!topPoint || !bottomPoint) {
       return undefined;
     }
 
-    // calculate a dynamic width for the caps based on the x-axis scale
-    const sizeValue = api.size?.([1, 0]);
-    const baseWidth = Array.isArray(sizeValue) ? sizeValue[0] : 10;
-    const halfWidth = Math.min((baseWidth ?? 10) * 1.5, 3);
-    const style = {
-      stroke: disagreement ? textColor['icon-tertiary'] : backgroundColor['blue-inverse'],
-    };
-
     return {
-      type: 'group' as const,
-      children: [
-        {
-          type: 'line' as const,
-          transition: 'shape' as const,
-          shape: {
-            x1: highPoint[0] - halfWidth,
-            y1: highPoint[1],
-            x2: highPoint[0] + halfWidth,
-            y2: highPoint[1],
-          },
-          style,
-        },
-        {
-          type: 'line' as const,
-          transition: 'shape' as const,
-          shape: {
-            x1: highPoint[0],
-            y1: highPoint[1],
-            x2: lowPoint[0],
-            y2: lowPoint[1],
-          },
-          style,
-        },
-        {
-          type: 'line' as const,
-          transition: 'shape' as const,
-          shape: {
-            x1: lowPoint[0] - halfWidth,
-            y1: lowPoint[1],
-            x2: lowPoint[0] + halfWidth,
-            y2: lowPoint[1],
-          },
-          style,
-        },
-      ],
+      type: 'line' as const,
+      shape: {
+        x1: topPoint[0],
+        y1: topPoint[1],
+        x2: bottomPoint[0],
+        y2: bottomPoint[1],
+      },
+      style: {
+        stroke: disagreement ? textColor['icon-tertiary'] : backgroundColor['blue-inverse'],
+        lineWidth: 1.5,
+      },
     };
   }
 
@@ -158,9 +177,6 @@
 
   function getChartOptions(): EChartsOption {
     const series: SeriesOption[] = [];
-    const errorBarData = data
-      .filter((d) => d.error_value != 0)
-      .map((d) => [...d.value, d.error_value, d.disagreement ? 1 : 0]);
 
     if (props.lineData && props.lineData.length > 0) {
       const extendedLineData = [
@@ -226,36 +242,32 @@
       type: 'scatter',
       itemStyle: {
         color: (params: any) =>
-          params?.data?.disagreement ? textColor['icon-tertiary'] : backgroundColor['blue-inverse'],
+          groupedDisagreement[params.dataIndex]
+            ? textColor['icon-tertiary']
+            : backgroundColor['blue-inverse'],
         opacity: 1,
       },
       emphasis: {
-        itemStyle: {
-          color: (params: any) => {
-            const point = params?.data as DataPoint;
-            return point?.disagreement
-              ? textColor['icon-tertiary']
-              : backgroundColor['blue-inverse'];
-          },
-          opacity: 1,
-        },
+        disabled: true,
       },
       animation: false,
     });
 
-    const p =
-      highlightIndex !== null && highlightIndex >= 0 && highlightIndex < data.length
-        ? data[highlightIndex]
-        : null;
+    const highlightPoints =
+      highlightedIndices !== null
+        ? highlightedIndices
+            .filter((i) => i >= 0 && i < data.length)
+            .map((i) => ({ point: data[i], index: i }))
+        : [];
     series.push({
       id: 'highlight-overlay',
       type: 'scatter',
-      data: [p],
+      data: highlightPoints.map((h) => h.point),
       symbolSize: 16,
       itemStyle: {
         color: (params: any) => {
-          const point = params?.data as DataPoint;
-          return point?.disagreement
+          const originalIndex = highlightPoints[params.dataIndex]?.index;
+          return groupedDisagreement[originalIndex]
             ? backgroundColor['neutral-hover']
             : backgroundColor['blue-hover'];
         },
@@ -264,16 +276,23 @@
       silent: true,
     });
 
-    if (errorBarData.length > 0) {
+    if (groupLines.length > 0) {
+      const linesData = groupLines.map((line) => {
+        const yValues = line.points.map((p: [number, number]) => p[1]);
+        const xValue = line.points[0][0];
+        return [xValue, Math.min(...yValues), Math.max(...yValues), line.disagreement ? 1 : 0];
+      });
+
       series.push({
         type: 'custom',
-        name: 'error',
+        name: 'lines',
         silent: true,
-        itemStyle: { borderWidth: 1.5 },
-        renderItem: renderErrorBarItem,
-        data: errorBarData,
+        renderItem: renderLineItem,
+        data: linesData,
+        z: -1,
       });
     }
+
     return {
       xAxis: {
         type: 'value',

package/dist/components/graphs/scatterplot/Scatterplot.svelte.d.ts

@@ -4,7 +4,6 @@ import type { Snippet } from 'svelte';
 export type DataPoint = {
     value: [number, number];
     metadata: any;
-    error_value?: number;
     disagreement?: boolean | null;
     highlighted?: boolean | null;
 };
@@ -19,6 +18,7 @@ type LegendItem = {
 type ScatterPlotProps = {
     data: DataPoint[];
     lineData?: [[number, number], [number, number]];
+    groups?: number[][];
     showConfidenceBand?: boolean;
     showLegend?: boolean;
     onitemclick?: (params: ScatterPlotEchartsEvent) => void;

package/dist/components/icon-button/IconButton.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { twMerge } from 'tailwind-merge';
   import type { Snippet } from 'svelte';
   import { Spinner } from '../spinner/';
   import type { HTMLButtonAttributes } from 'svelte/elements';
@@ -50,7 +51,7 @@
     }}
     {type}
     {disabled}
-    class="{sizeClass} {variantClass} disabled {className}"
+    class={twMerge(sizeClass, variantClass, 'disabled', className)}
     class:rounded
     {...rest}
   >
@@ -66,7 +67,7 @@
     {type}
     {disabled}
     {tabindex}
-    class="{sizeClass} {variantClass} {className}"
+    class={twMerge(sizeClass, variantClass, className)}
     class:rounded
     {...rest}
   >

package/dist/components/input/Input.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { twMerge } from 'tailwind-merge';
   import X from 'phosphor-svelte/lib/X';
   import { Icon } from '../icons/index.js';
   import type { Snippet } from 'svelte';
@@ -91,7 +92,7 @@
 
   <div class="flex-1">
     <div
-      class="flex w-full items-center gap-1 size-{size} transition-colors"
+      class={twMerge('flex w-full items-center gap-1 transition-colors', `size-${size}`, className)}
       class:!border-error={!valid}
       class:primary={variant === 'primary'}
       class:secondary={variant === 'secondary'}

package/dist/components/label/Label.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+
   interface Props {
     forId: string;
     text: string;
@@ -9,7 +11,7 @@
   const { forId, text, required = false, class: className }: Props = $props();
 </script>
 
-<label for={forId} class="block text-sm text-secondary {className ?? ''}">
+<label for={forId} class={twMerge('block text-sm text-secondary', className)}>
   {text}
   {#if required}
     <span class="ml-0.5 text-danger">*</span>

package/dist/components/list/List.svelte

@@ -1,6 +1,7 @@
 <script lang="ts" generics="T">
   import type { Overflow } from '../../tailwind';
   import type { Snippet } from 'svelte';
+  import { twMerge } from 'tailwind-merge';
 
   type Props = {
     items: T[];
@@ -11,7 +12,9 @@
   let { items, item, overflow = 'overflow-y-auto', variant = 'default' }: Props = $props();
 </script>
 
-<div class="{`listStyles ${variant === 'compact' ? 'compact' : 'default'} ${overflow} `}}">
+<div
+  class={twMerge('listStyles', variant === 'compact' ? 'compact' : 'default', overflow)}
+>
   {#each items as currentItem, i}
     <div class="item">
       {@render item(currentItem)}

package/dist/components/markdown/Markdown.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { marked } from 'marked';
+  import { twMerge } from 'tailwind-merge';
   interface Props {
     markdown: string;
     variant?: 'light' | 'dark';
@@ -8,6 +9,6 @@
   let { markdown, variant = 'light' }: Props = $props();
 </script>
 
-<div class="prose prose-slate text-sm {variant === 'dark' ? 'dark:prose-invert' : ''}">
+<div class={twMerge('prose prose-slate text-sm', variant === 'dark' && 'dark:prose-invert')}>
   {@html marked.parse(markdown ?? '')}
 </div>

package/dist/components/segmented-control-buttons/ControlButton.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
+  import { twMerge } from 'tailwind-merge';
 
   type Color = 'primary' | 'secondary';
 
@@ -32,7 +33,12 @@
 <div class="join-item flex h-full flex-1">
   <button
     {onclick}
-    class={`control-button flex flex-1 items-center justify-center gap-2 rounded-md text-sm leading-4 ${colors[color]} ${className} ${color}`}
+    class={twMerge(
+      'control-button flex flex-1 items-center justify-center gap-2 rounded-md text-sm leading-4',
+      colors[color],
+      color,
+      className
+    )}
     class:active
     type="button"
     {disabled}

package/dist/components/segmented-control-buttons/SegmentedControlButtons.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
+  import { twMerge } from 'tailwind-merge';
   import ControlButton from './ControlButton.svelte';
 
   interface Props {
@@ -16,6 +17,6 @@
   };
 </script>
 
-<div class={`join flex gap-1 rounded-lg bg-neutral p-1 ${sizes[size]} ${size} ${className}`}>
+<div class={twMerge('join flex gap-1 rounded-lg bg-neutral p-1', sizes[size], size, className)}>
   {@render children?.({ ControlButton })}
 </div>

package/dist/components/select/components/MultiSelectTrigger.svelte

@@ -3,6 +3,7 @@
   import Icon from '../../icons/Icon.svelte';
   import * as Select from '../index';
   import IconButton from '../../icon-button/IconButton.svelte';
+  import { twMerge } from 'tailwind-merge';
 
   type ItemType = {
     value: string;
@@ -30,8 +31,10 @@
 </script>
 
 <Select.Trigger
-  class={'flex h-fit min-h-10 w-full items-center justify-between rounded-lg border border-input bg-surface py-1 text-sm placeholder:text-tertiary focus:outline-none disabled:cursor-not-allowed disabled:border-transparent disabled:bg-neutral disabled:opacity-75' +
-    (className || '')}
+  class={twMerge(
+    'flex h-fit min-h-10 w-full items-center justify-between rounded-lg border border-input bg-surface py-1 text-sm placeholder:text-tertiary focus:outline-none disabled:cursor-not-allowed disabled:border-transparent disabled:bg-neutral disabled:opacity-75',
+    className
+  )}
   {...restProps}
 >
   {#if selectedValues.length === 0}

package/dist/components/select/components/SelectItem.svelte

@@ -2,6 +2,7 @@
   import Check from 'phosphor-svelte/lib/Check';
   import { Icon } from '../../icons/index.js';
   import { Select as SelectPrimitive } from 'bits-ui';
+  import { twMerge } from 'tailwind-merge';
   import type { ItemProps, ItemSlotProps } from '../types';
 
   import type { Snippet } from 'svelte';
@@ -21,7 +22,7 @@
     `;
 </script>
 
-<SelectPrimitive.Item {...restProps} class={baseClasses + ' ' + className}>
+<SelectPrimitive.Item {...restProps} class={twMerge(baseClasses, className)}>
   {#snippet children(params: ItemSlotProps)}
     {#if children}
       {@render children(params)}

package/dist/components/select/components/SelectTrigger.svelte

@@ -2,6 +2,7 @@
   import CaretDown from 'phosphor-svelte/lib/CaretDown';
   import { Icon } from '../../icons/index.js';
   import { Select as SelectPrimitive } from 'bits-ui';
+  import { twMerge } from 'tailwind-merge';
   import type { TriggerProps, IconSnippet } from '../types';
 
   import type { Snippet } from 'svelte';
@@ -37,7 +38,7 @@
 
 <SelectPrimitive.Trigger
   {...restProps}
-  class={`${baseClasses} ${className}`}
+  class={twMerge(baseClasses, className)}
   aria-label={placeholder}
 >
   <div class="flex-1 truncate text-left">

package/dist/components/skeleton-loader/SkeletonLoader.svelte

@@ -2,6 +2,7 @@
   import type { Snippet } from 'svelte';
   import Skeleton from './components/Skeleton.svelte';
   import SkeletonImage from './components/SkeletonImage.svelte';
+  import { twMerge } from 'tailwind-merge';
 
   interface Props {
     class?: string;
@@ -12,6 +13,10 @@
   let { class: className = '', dataTestId = '', children }: Props = $props();
 </script>
 
-<div role="status" class={`h-full w-full animate-pulse ${className}`} data-testid={dataTestId}>
+<div
+  role="status"
+  class={twMerge('h-full w-full animate-pulse', className)}
+  data-testid={dataTestId}
+>
   {@render children?.({ Skeleton, SkeletonImage })}
 </div>

package/dist/components/slider/Slider.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import CaretUpDown from 'phosphor-svelte/lib/CaretUpDown';
   import { Icon } from '../icons/index.js';
+  import { twMerge } from 'tailwind-merge';
 
   let className = '';
   export { className as class };
@@ -31,10 +32,12 @@
   }
 </script>
 
-<div class={`relative flex h-10 items-center ${className} ${disabled ? 'opacity-40' : ''}`}>
+<div
+  class={twMerge('relative flex h-10 items-center', disabled && 'opacity-40', className)}
+>
   <div class="track-overlay"></div>
   <div
-    class="pointer-events-none absolute h-2.5 rounded-full {bufferColorClass}"
+    class={twMerge('pointer-events-none absolute h-2.5 rounded-full', bufferColorClass)}
     style="
       width: {calculatePosition(buffer - bufferMin)} + 1rem);
       left: {calculatePosition(bufferMin)}
@@ -42,7 +45,7 @@
   ></div>
   {#if showFilled}
     <div
-      class="absolute h-2.5 rounded-full {filledColorClass}"
+      class={twMerge('absolute h-2.5 rounded-full', filledColorClass)}
       style="width: {calculatePosition(value)} + 1rem);left: 0;"
     ></div>
   {/if}

package/dist/components/status-badge/StatusBadge.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
+  import { twMerge } from 'tailwind-merge';
 
   interface Props {
     // we can add dynamic classes because they are safelisted in tailwind-safelist.txt
@@ -9,6 +10,7 @@
     progress?: Snippet;
     icon?: Snippet;
     iconOnly?: boolean;
+    class?: string;
   }
 
   let {
@@ -18,14 +20,14 @@
     progress,
     icon,
     iconOnly: propIconOnly = false,
+    class: className,
   }: Props = $props();
 
   let iconOnly = $derived((content === undefined && progress === undefined) || propIconOnly);
 </script>
 
 <div
-  class={`badge badge-${type} badge-${size}`}
-  class:badge-icon-only={iconOnly}
+  class={twMerge(`badge badge-${type} badge-${size}`, iconOnly && 'badge-icon-only', className)}
   data-testid="status-badge"
 >
   {#if icon}

package/dist/components/status-badge/StatusBadge.svelte.d.ts

@@ -6,6 +6,7 @@ interface Props {
     progress?: Snippet;
     icon?: Snippet;
     iconOnly?: boolean;
+    class?: string;
 }
 declare const StatusBadge: import("svelte").Component<Props, {}, "">;
 type StatusBadge = ReturnType<typeof StatusBadge>;

package/dist/components/table/Table.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { twMerge } from 'tailwind-merge';
   import type { Snippet } from 'svelte';
   import Td from './components/Td.svelte';
   import Th from './components/Th.svelte';
@@ -32,7 +33,7 @@
 </script>
 
 <div class="w-full rounded-xl border border-static bg-surface px-5 py-2 shadow-container">
-  <table class={`w-full table-fixed sm:table-auto xl:table-${tableLayout}`}>
+  <table class={twMerge('w-full table-fixed sm:table-auto', `xl:table-${tableLayout}`)}>
     {@render children?.({ THead: THead, TBody: TBody, Tr: Tr, Th: Th, Td: Td })}
   </table>
 </div>

package/dist/components/table/components/TBody.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { twMerge } from 'tailwind-merge';
   import type { Snippet } from 'svelte';
 
   interface Props {
@@ -9,6 +10,6 @@
   let { class: className = '', children }: Props = $props();
 </script>
 
-<tbody class={`${className}`}>
+<tbody class={twMerge(className)}>
   {@render children?.()}
 </tbody>

package/dist/components/table/components/THead.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { twMerge } from 'tailwind-merge';
   import type { Snippet } from 'svelte';
 
   interface Props {
@@ -9,6 +10,6 @@
   let { class: className = '', children }: Props = $props();
 </script>
 
-<thead class={`${className}`}>
+<thead class={twMerge(className)}>
   {@render children?.()}
 </thead>

package/dist/components/table/components/Td.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { twMerge } from 'tailwind-merge';
   import type { Snippet } from 'svelte';
 
   interface Props {
@@ -10,6 +11,6 @@
   let { dataTestId = '', align = 'left', children }: Props = $props();
 </script>
 
-<td data-testid={dataTestId} class={`text-${align} text-sm font-normal`}>
+<td data-testid={dataTestId} class={twMerge(`text-${align}`, 'text-sm font-normal')}>
   {@render children?.()}
 </td>

package/dist/components/table/components/Th.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { twMerge } from 'tailwind-merge';
   import type { Width } from '../../../tailwind';
   import type { Snippet } from 'svelte';
 
@@ -10,6 +11,6 @@
   let { class: className = '', children }: Props = $props();
 </script>
 
-<th class={`text-left text-xs font-medium text-tertiary ${className}`}>
+<th class={twMerge('text-left text-xs font-medium text-tertiary', className)}>
   {@render children?.()}
 </th>

package/dist/components/table/components/Tr.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { twMerge } from 'tailwind-merge';
   import type { Snippet } from 'svelte';
 
   interface Props {
@@ -10,7 +11,7 @@
   let { disabled = false, children, class: className = '' }: Props = $props();
 </script>
 
-<tr class={`border-static py-2 [&.disabled]:text-tertiary ${className}`} class:disabled>
+<tr class={twMerge('border-static py-2 [&.disabled]:text-tertiary', className)} class:disabled>
   {@render children?.()}
 </tr>
 

package/dist/components/tabs/components/Tab.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
+  import { twMerge } from 'tailwind-merge';
   import Button from '../../button/Button.svelte';
 
   interface Props {
@@ -16,7 +17,7 @@
   {onclick}
   variant="transparent"
   size="sm"
-  class={`tab !h-full ${className} ${active ? 'active' : ''}`}
+  class={twMerge('tab !h-full', active && 'active', className)}
 >
   {@render children?.()}
 </Button>

package/dist/components/tabs/components/Tabs.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
+  import { twMerge } from 'tailwind-merge';
 
   type Size = 'sm' | 'md' | 'lg';
   type Variant = 'primary' | 'secondary' | 'transparent';
@@ -29,7 +30,7 @@
 
 <div
   role="tablist"
-  class={`flex  ${sizes[size]} ${variant} ${className} ${fullWidth ? 'w-full [&>*]:flex-1' : 'w-fit [&>*]:flex-none'}`}
+  class={twMerge('flex', sizes[size], variant, fullWidth ? 'w-full [&>*]:flex-1' : 'w-fit [&>*]:flex-none', className)}
 >
   {@render children?.({ variant })}
 </div>

package/dist/components/tag/Tag.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
+  import { twMerge } from 'tailwind-merge';
   import { Tooltip } from '../tooltip/';
 
   interface Props {
@@ -82,14 +83,14 @@
 {#snippet renderTag()}
   {#if onclick}
     <button
-      class="outer {variantClassName} {sizeClassName} {buttonClassVariant} hover:cursor-pointer {className} "
+      class={twMerge('outer', variantClassName, sizeClassName, buttonClassVariant, 'hover:cursor-pointer', className)}
       title={tooltip}
       {onclick}
     >
       {@render children()}
     </button>
   {:else}
-    <div class="outer {variantClassName} {sizeClassName}  no-underline {className}" title={tooltip}>
+    <div class={twMerge('outer', variantClassName, sizeClassName, 'no-underline', className)} title={tooltip}>
       {@render children()}
     </div>
   {/if}

package/dist/components/tooltip/Tooltip.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { Tooltip } from 'bits-ui';
+  import { twMerge } from 'tailwind-merge';
   import type { Snippet } from 'svelte';
   import { backgroundColor } from '../../tokens';
 
@@ -50,7 +51,7 @@
         {side}
         {align}
         sideOffset={8}
-        class={`${className} z-50 max-w-xs text-wrap rounded-md bg-base-inverse px-2 py-1 text-left text-sm font-normal text-primary-inverse shadow-menu`}
+        class={twMerge('z-50 max-w-xs text-wrap rounded-md bg-base-inverse px-2 py-1 text-left text-sm font-normal text-primary-inverse shadow-menu', className)}
       >
         {#if content}
           {@render content()}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reshape-biotech/design-system",
-  "version": "2.7.36",
+  "version": "2.7.38",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build",