@tetrascience-npm/tetrascience-react-ui 0.7.0-beta.106.1 → 0.7.0-beta.108.1

package/dist/index.d.ts

@@ -20,7 +20,6 @@ import { DayPicker } from 'react-day-picker';
 import { default as default_2 } from 'react';
 import { default as default_3 } from 'embla-carousel-react';
 import { Dialog as Dialog_2 } from 'radix-ui';
-import { Drawer as Drawer_2 } from 'vaul';
 import { DropdownMenu as DropdownMenu_2 } from 'radix-ui';
 import { DynamicToolUIPart } from 'ai';
 import { ElementType } from 'react';
@@ -39,7 +38,6 @@ import { Menubar as Menubar_2 } from 'radix-ui';
 import { MouseEvent as MouseEvent_2 } from 'react';
 import { NavigationMenu as NavigationMenu_2 } from 'radix-ui';
 import { OnChange } from '@monaco-editor/react';
-import { OTPInput } from 'input-otp';
 import { PaginationState } from '@tanstack/react-table';
 import { Popover as Popover_2 } from 'radix-ui';
 import { PropsWithChildren } from 'react';
@@ -123,6 +121,8 @@ export declare function allPositions(dims: PlateDimensions): WellId[];
 
 export declare function applyFilterCondition(cellValue: string, operator: FilterOperator, filterValue: string): boolean;
 
+export declare function applyStackingTransform(inputSeries: ChromatogramSeries[], inputAnnotations: PeakAnnotation[][] | undefined, mode: StackingMode, stackOffset: number, stackingOrder?: "first-on-bottom" | "first-on-top"): TransformResult;
+
 export declare interface AreaDataSeries {
     x: number[];
     y: number[];
@@ -808,6 +808,44 @@ export declare interface ChromatogramChartProps {
     annotationOverlapThreshold?: number;
     /** Show export button in modebar (default: true) */
     showExportButton?: boolean;
+    /**
+     * IDs of peaks that should render in the "selected" visual state.
+     * Fully controlled — the component owns no selection state of its own.
+     * IDs match the id field on PeakAnnotation (user-provided) or the
+     * auto-generated IDs for auto-detected peaks ("peak-{seriesIndex}-{peakIndex}").
+     */
+    selectedPeakIds?: string[];
+    /**
+     * Called when the user clicks on a peak annotation or its invisible hit target.
+     * The consumer decides whether to add/remove the id from selectedPeakIds
+     * (toggle vs. replace behaviour is the consumer's responsibility).
+     */
+    onPeakClick?: (event: PeakSelectEvent) => void;
+    /**
+     * Called when the cursor enters or leaves a peak hit target.
+     * Receives null on unhover. As a side-effect, the series line for the
+     * hovered peak thickens by selectionAppearance.hoverLineWidthMultiplier.
+     */
+    onPeakHover?: (event: PeakSelectEvent | null) => void;
+    /**
+     * Override the default visual behaviour for selected / unselected / hover states.
+     * All sub-fields are optional — defaults are applied for any omitted value.
+     * Only has a visual effect when selectedPeakIds or onPeakClick/onPeakHover are used.
+     */
+    selectionAppearance?: PeakSelectionAppearance;
+    /**
+     * Annotation label style (default: "arrow").
+     * - "arrow" — arrowhead pointing to the peak with a floating label box
+     * - "inline" — no arrow; label sits 4 px above the actual trace Y value
+     */
+    annotationStyle?: "arrow" | "inline";
+    /** Title font size in pixels (default: 20) */
+    titleFontSize?: number;
+    /**
+     * Top margin override when a title is shown (default: from
+     * CHROMATOGRAM_LAYOUT.MARGIN_TOP_WITH_TITLE).
+     */
+    titleTopMargin?: number;
 }
 
 export declare interface ChromatogramProps {
@@ -1396,26 +1434,6 @@ export declare type DotPlotProps = {
 
 export declare type DotPlotVariant = "default" | "stacked";
 
-export declare function Drawer({ ...props }: React_2.ComponentProps<typeof Drawer_2.Root>): JSX.Element;
-
-export declare function DrawerClose({ ...props }: React_2.ComponentProps<typeof Drawer_2.Close>): JSX.Element;
-
-export declare function DrawerContent({ className, children, ...props }: React_2.ComponentProps<typeof Drawer_2.Content>): JSX.Element;
-
-export declare function DrawerDescription({ className, ...props }: React_2.ComponentProps<typeof Drawer_2.Description>): JSX.Element;
-
-export declare function DrawerFooter({ className, ...props }: React_2.ComponentProps<"div">): JSX.Element;
-
-export declare function DrawerHeader({ className, ...props }: React_2.ComponentProps<"div">): JSX.Element;
-
-export declare function DrawerOverlay({ className, ...props }: React_2.ComponentProps<typeof Drawer_2.Overlay>): JSX.Element;
-
-export declare function DrawerPortal({ ...props }: React_2.ComponentProps<typeof Drawer_2.Portal>): JSX.Element;
-
-export declare function DrawerTitle({ className, ...props }: React_2.ComponentProps<typeof Drawer_2.Title>): JSX.Element;
-
-export declare function DrawerTrigger({ ...props }: React_2.ComponentProps<typeof Drawer_2.Trigger>): JSX.Element;
-
 export declare function DropdownMenu({ ...props }: React_2.ComponentProps<typeof DropdownMenu_2.Root>): JSX.Element;
 
 export declare function DropdownMenuCheckboxItem({ className, children, checked, inset, ...props }: React_2.ComponentProps<typeof DropdownMenu_2.CheckboxItem> & {
@@ -1737,18 +1755,6 @@ export declare function InputGroupText({ className, ...props }: React_2.Componen
 
 export declare function InputGroupTextarea({ className, ...props }: React_2.ComponentProps<"textarea">): JSX.Element;
 
-export declare function InputOTP({ className, containerClassName, ...props }: React_2.ComponentProps<typeof OTPInput> & {
-    containerClassName?: string;
-}): JSX.Element;
-
-export declare function InputOTPGroup({ className, ...props }: React_2.ComponentProps<"div">): JSX.Element;
-
-export declare function InputOTPSeparator({ ...props }: React_2.ComponentProps<"div">): JSX.Element;
-
-export declare function InputOTPSlot({ index, className, ...props }: React_2.ComponentProps<"div"> & {
-    index: number;
-}): JSX.Element;
-
 export declare function Item({ className, variant, size, asChild, ...props }: React_2.ComponentProps<"div"> & VariantProps<typeof itemVariants> & {
     asChild?: boolean;
 }): JSX.Element;
@@ -2160,6 +2166,13 @@ export declare function parseRowLabel(label: string): number;
  * Used for both user-provided annotations and auto-detected peaks.
  */
 export declare interface PeakAnnotation {
+    /**
+     * Stable identifier used for selection (selectedPeakIds).
+     * Auto-generated by the component if omitted:
+     * - User annotations: "user-ann-{index}"
+     * - Auto-detected peaks: "peak-{seriesIndex}-{peakIndex}"
+     */
+    id?: string;
     /** Retention time of the peak (x-axis position) */
     x: number;
     /** Signal intensity at peak (y-axis position) */
@@ -2178,6 +2191,23 @@ export declare interface PeakAnnotation {
     startMarker?: BoundaryMarkerType;
     /** Marker style for end boundary (default: "diamond") */
     endMarker?: BoundaryMarkerType;
+    /**
+     * Optional per-peak color override. When set, overrides the default
+     * series-color / grey for the annotation label, arrow, border, and boundary markers.
+     */
+    color?: string;
+    /**
+     * When true, overlay a thickened line along the underlying trace between startX and endX.
+     * Requires startX/endX. Uses peak.color if set, otherwise series color.
+     */
+    regionOverlay?: boolean;
+    /** Line width for the region overlay (default: 3.5) */
+    regionOverlayWidth?: number;
+    /**
+     * Plotly hovertemplate HTML string used by the region overlay and the invisible
+     * hit-area marker for this peak. Falls back to a default summary when omitted.
+     */
+    hoverText?: string;
     /* Excluded from this release type: _computed */
 }
 
@@ -2206,6 +2236,48 @@ export declare interface PeakDetectionOptions {
     relativeThreshold?: boolean;
 }
 
+/**
+ * Payload delivered to onPeakClick and onPeakHover callbacks.
+ */
+declare interface PeakSelectEvent {
+    /** The resolved peak ID (matches id field on PeakAnnotation) */
+    id: string;
+    /** The annotation object for this peak */
+    peak: PeakAnnotation;
+    /** Index of the series this peak belongs to (0-based; -1 for legacy user annotations) */
+    seriesIndex: number;
+    /** Display name of the series */
+    seriesName: string;
+    /** True when the peak was found by automatic peak detection, false for user-provided annotations */
+    isAutoDetected: boolean;
+}
+
+/**
+ * Visual overrides for the selected / unselected / hover states.
+ * All fields are optional — defaults are applied for any omitted field.
+ *
+ * Defaults:
+ *   selected.borderColor      "#3b82f6"
+ *   selected.backgroundColor  "#dbeafe"
+ *   selected.bold             true
+ *   unselected.opacity        0.4  (applied when any other peak is selected)
+ *   hoverLineWidthMultiplier  1.67 (1.5 px → ~2.5 px)
+ */
+declare interface PeakSelectionAppearance {
+    selected?: {
+        borderColor?: string;
+        backgroundColor?: string;
+        /** Wrap annotation text in <b> tags when selected */
+        bold?: boolean;
+    };
+    unselected?: {
+        /** Opacity of annotations whose peak is NOT selected while another peak IS selected (0–1) */
+        opacity?: number;
+    };
+    /** Multiplier applied to the base line width (1.5 px) on peak hover */
+    hoverLineWidthMultiplier?: number;
+}
+
 export declare const PieChart: default_2.FC<PieChartProps>;
 
 export declare type PieChartProps = {
@@ -3535,6 +3607,35 @@ export declare const spinnerVariants: (props?: ({
     size?: "default" | "sm" | "lg" | "md" | null | undefined;
 } & ClassProp) | undefined) => string;
 
+export declare function StackedChromatogramChart({ series, stackingMode, stackOffset, stackingOrder, annotations, ...restProps }: StackedChromatogramChartProps): JSX.Element;
+
+export declare interface StackedChromatogramChartProps extends Omit<ChromatogramChartProps, "series" | "annotations" | "yRange"> {
+    /** Array of data series to display */
+    series: ChromatogramSeries[];
+    /** Stacking mode: 'overlay' (default) or 'stack' */
+    stackingMode?: StackingMode;
+    /**
+     * Y-offset between stacked series in data units (e.g., AU).
+     * Only applies in 'stack' mode; ignored in 'overlay'.
+     */
+    stackOffset?: number;
+    /**
+     * Peak annotations per series, parallel to the series array.
+     * annotations[i] corresponds to series[i].
+     * In stack mode, y values are shifted by the series offset.
+     */
+    annotations?: PeakAnnotation[][];
+    /**
+     * Controls which end of the stack series[0] lands on (stack mode only).
+     * - "first-on-bottom" (default) — series[0] sits at the base; series[N-1] is highest.
+     * - "first-on-top" — series[0] is shifted to the top; series[N-1] is at the base.
+     *   Annotations follow the chosen direction.
+     */
+    stackingOrder?: "first-on-bottom" | "first-on-top";
+}
+
+export declare type StackingMode = "overlay" | "stack";
+
 export declare function StatCard({ label, value, delta, deltaLabel, trend, description, className, ...props }: StatCardProps): JSX.Element;
 
 export declare interface StatCardProps extends React_2.ComponentProps<"div"> {
@@ -4034,6 +4135,12 @@ declare type ToolUIPartApproval = {
  */
 export declare const toPlotlyColorscale: (ramp: readonly string[]) => Array<[number, string]>;
 
+declare interface TransformResult {
+    series: ChromatogramSeries[];
+    annotations: PeakAnnotation[];
+    yRange: [number, number];
+}
+
 export declare function triagePlateMapCsvByBarcode(text: string, options?: PlateMapCsvTriageOptions): PlateMapCsvTriage;
 
 export declare function triagePlateMapCsvFile(file: File, options?: PlateMapCsvTriageOptions): Promise<PlateMapCsvTriage | undefined>;