@tetrascience-npm/tetrascience-react-ui 0.7.0-beta.129.1 → 0.7.0-beta.131.1

package/dist/components/charts/Chromatogram/annotations.d.ts

@@ -0,0 +1,50 @@
+import { PeakAnnotation, PeakSelectionAppearance, PeakWithMeta } from './types';
+import { default as Plotly } from 'plotly.js-dist';
+export interface ResolvedSelectionAppearance {
+    selected: {
+        borderColor: string;
+        backgroundColor: string;
+        bold: boolean;
+    };
+    unselected: {
+        opacity: number;
+    };
+    hoverLineWidthMultiplier: number;
+}
+export declare function resolveSelectionAppearance(appearance?: PeakSelectionAppearance): ResolvedSelectionAppearance;
+/**
+ * Annotation slot positions for peak labels
+ */
+export declare const ANNOTATION_SLOTS: {
+    default: {
+        ax: number;
+        ay: number;
+    };
+    overlap: {
+        ax: number;
+        ay: number;
+    }[];
+};
+/**
+ * Group overlapping peaks by retention time (x) proximity
+ */
+export declare function groupOverlappingPeaks(peaksWithMeta: PeakWithMeta[], overlapThreshold: number): PeakWithMeta[][];
+interface PeakAnnotationOptions {
+    selectedPeakIds?: string[];
+    anySelected?: boolean;
+    appearance?: ResolvedSelectionAppearance;
+    annotationStyle?: "arrow" | "inline";
+}
+/**
+ * Create a Plotly annotation for a peak.
+ * seriesIndex of -1 indicates a user-defined annotation (uses grey/black styling).
+ */
+export declare function createPeakAnnotation(peak: PeakAnnotation, seriesIndex: number, slot: {
+    ax: number;
+    ay: number;
+}, options?: PeakAnnotationOptions): Partial<Plotly.Annotations>;
+/**
+ * Create annotations for a group of peaks, handling overlap positioning
+ */
+export declare function createGroupAnnotations(group: PeakWithMeta[], options?: PeakAnnotationOptions): Partial<Plotly.Annotations>[];
+export {};

package/dist/components/charts/Chromatogram/boundaryMarkers.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("../../../utils/colors.cjs"),m=-5,A=-12,d=-16;function i(n,e,o,r){return o==="none"?[]:[{x:[n],y:[e],type:"scatter",mode:"markers",marker:{symbol:o==="diamond"?"diamond":"triangle-up",size:8,color:r},showlegend:!1,hoverinfo:"skip"}]}function O(n){const e=[];for(const{peaks:o,seriesIndex:r,x:s}of n){const u=c.CHART_COLORS[r%c.CHART_COLORS.length],R=m+r*d,k=A+r*d;for(const t of o){const l=t._computed?.startIndex??0,M=t._computed?.endIndex??0,_=s[l],p=s[M],f=t.startMarker??"triangle",T=t.endMarker??"diamond",a=t.color??u;e.push(...i(_,R,f,a)),e.push(...i(p,k,T,a))}}return e}exports.createBoundaryMarkerTraces=O;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("../../../utils/colors.cjs"),m=-5,A=-12,d=-16;function i(n,e,o,r){return o==="none"?[]:[{x:[n],y:[e],type:"scatter",mode:"markers",marker:{symbol:o==="diamond"?"diamond":"triangle-up",size:8,color:r},showlegend:!1,hoverinfo:"skip"}]}function O(n){const e=[];for(const{peaks:o,seriesIndex:r,x:s}of n){const u=c.CHART_COLORS[r%c.CHART_COLORS.length],R=m+r*d,l=A+r*d;for(const t of o){const _=t._computed?.startIndex??0,k=t._computed?.endIndex??0,M=s[_],p=s[k],f=t.startMarker??"triangle",T=t.endMarker??"diamond",a=t.color??u;e.push(...i(M,R,f,a)),e.push(...i(p,l,T,a))}}return e}exports.createBoundaryMarkerTraces=O;
 //# sourceMappingURL=boundaryMarkers.cjs.map

package/dist/components/charts/Chromatogram/boundaryMarkers.d.ts

@@ -0,0 +1,14 @@
+import { PeakAnnotation } from './types';
+import { default as Plotly } from 'plotly.js-dist';
+/**
+ * Create boundary marker traces for peaks.
+ * Uses per-peak startMarker/endMarker settings with defaults:
+ * - startMarker: "triangle" (default)
+ * - endMarker: "diamond" (default)
+ */
+export declare function createBoundaryMarkerTraces(allPeaks: {
+    peaks: PeakAnnotation[];
+    seriesIndex: number;
+    x: number[];
+    y: number[];
+}[]): Plotly.Data[];

package/dist/components/charts/Chromatogram/constants.d.ts

@@ -0,0 +1,46 @@
+/**
+ * Constants for Chromatogram component
+ */
+/**
+ * Layout constants for chart margins and spacing
+ */
+export declare const CHROMATOGRAM_LAYOUT: {
+    /** Left margin in pixels */
+    readonly MARGIN_LEFT: 70;
+    /** Right margin in pixels */
+    readonly MARGIN_RIGHT: 30;
+    /** Bottom margin in pixels */
+    readonly MARGIN_BOTTOM: 60;
+    /** Top margin with title in pixels */
+    readonly MARGIN_TOP_WITH_TITLE: 50;
+    /** Top margin without title in pixels */
+    readonly MARGIN_TOP_NO_TITLE: 30;
+    /** Padding around plot area */
+    readonly MARGIN_PAD: 5;
+};
+/**
+ * Annotation constants for peak labels and markers
+ */
+export declare const CHROMATOGRAM_ANNOTATION: {
+    /** Default vertical offset for annotation arrows (negative = above point) */
+    readonly DEFAULT_ARROW_OFFSET_Y: -30;
+    /** Font size for user-defined annotations */
+    readonly USER_ANNOTATION_FONT_SIZE: 11;
+    /** Font size for auto-detected peak annotations */
+    readonly AUTO_ANNOTATION_FONT_SIZE: 10;
+    /** Arrow color for user-defined annotations (grey 500) */
+    readonly USER_ANNOTATION_COLOR: "rgba(100, 116, 139, 1)";
+    /** Text color for user-defined annotations (black 900) */
+    readonly USER_ANNOTATION_TEXT_COLOR: "rgba(26, 26, 26, 1)";
+    /** Background color behind annotation text */
+    readonly BACKGROUND_COLOR: "#ffffff";
+    /** Pixel offset above the data point for inline-style annotations (no arrow) */
+    readonly INLINE_YSHIFT: 4;
+};
+/**
+ * Trace rendering constants
+ */
+export declare const CHROMATOGRAM_TRACE: {
+    /** Base line width in pixels for all series traces */
+    readonly BASE_LINE_WIDTH: 1.5;
+};

package/dist/components/charts/Chromatogram/dataProcessing.d.ts

@@ -0,0 +1,49 @@
+import { BaselineCorrectionMethod, PeakAnnotation } from './types';
+/**
+ * Data structure for peaks with their associated series data
+ */
+export type PeakDataWithSeries = {
+    peaks: PeakAnnotation[];
+    seriesIndex: number;
+    x: number[];
+    y: number[];
+};
+/**
+ * Find the closest index in an array for a given target value.
+ * Uses binary search for efficiency.
+ */
+export declare function findClosestIndex(arr: number[], target: number): number;
+/**
+ * Process user annotations to convert startX/endX to startIndex/endIndex
+ * and compute area if boundaries are provided.
+ */
+export declare function processUserAnnotations(annotations: PeakAnnotation[], xArray: number[], yArray: number[]): PeakAnnotation[];
+/**
+ * Collect peaks with boundary information from both auto-detected peaks and user-provided annotations.
+ * User-provided annotations with startIndex/endIndex or startX/endX are included for boundary marker rendering.
+ */
+export declare function collectPeaksWithBoundaryData(allDetectedPeaks: {
+    peaks: PeakAnnotation[];
+    seriesIndex: number;
+}[], annotations: PeakAnnotation[], processedSeries: {
+    x: number[];
+    y: number[];
+}[]): PeakDataWithSeries[];
+/**
+ * Build the extra content for Plotly hovertemplate from series metadata.
+ * Displays all metadata fields as key: value pairs.
+ */
+export declare function buildHoverExtraContent(seriesName: string, metadata?: Record<string, unknown>): string;
+/**
+ * Validate and sanitize series data.
+ * - Ensures x and y arrays have the same length (truncates to shorter)
+ * - Replaces NaN and Infinity values with 0
+ */
+export declare function validateSeriesData(x: number[], y: number[]): {
+    x: number[];
+    y: number[];
+};
+/**
+ * Apply baseline correction to signal data
+ */
+export declare function applyBaselineCorrection(y: number[], method: BaselineCorrectionMethod, windowSize?: number): number[];

package/dist/components/charts/Chromatogram/index.d.ts

@@ -0,0 +1,2 @@
+export { Chromatogram } from './Chromatogram';
+export type { ChromatogramSeries, PeakAnnotation, ChromatogramProps, PeakSelectEvent, PeakSelectionAppearance, BaselineCorrectionMethod, BoundaryMarkerStyle, PeakDetectionOptions, } from './types';

package/dist/components/charts/Chromatogram/peakDetection.d.ts

@@ -0,0 +1,33 @@
+import { PeakAnnotation, PeakDetectionOptions } from './types';
+/**
+ * Calculate prominence of a peak (how much it stands out from neighbors)
+ */
+export declare function calculateProminence(y: number[], peakIndex: number, searchWindow: number): number;
+/**
+ * Find peak boundary indices by walking outward from peak
+ */
+export declare function findPeakBoundaries(y: number[], peakIndex: number): {
+    startIndex: number;
+    endIndex: number;
+};
+/**
+ * Calculate peak area using trapezoidal integration
+ */
+export declare function calculatePeakArea(x: number[], y: number[], startIndex: number, endIndex: number): number;
+/**
+ * Calculate width at half maximum of a peak
+ */
+export declare function calculateWidthAtHalfMax(x: number[], y: number[], peakIndex: number, startIndex: number, endIndex: number): number;
+/**
+ * Filter peaks by minimum distance, keeping more intense peaks
+ */
+export declare function filterPeaksByDistance(peaks: PeakAnnotation[], minDistance: number): PeakAnnotation[];
+/**
+ * Detect peaks in signal data using derivative analysis.
+ *
+ * Default parameters are tuned for typical HPLC chromatograms:
+ * - minHeight (0.05 = 5%): Filters noise while detecting small peaks
+ * - minDistance (5 points): Prevents detecting noise as multiple peaks
+ * - prominence (0.02 = 2%): Ensures peaks stand out from baseline/shoulders
+ */
+export declare function detectPeaks(x: number[], y: number[], options?: PeakDetectionOptions): PeakAnnotation[];

package/dist/components/charts/Chromatogram/plotBuilder.d.ts

@@ -0,0 +1,58 @@
+import { ChromatogramSeries, PeakAnnotation, BoundaryMarkerStyle, PeakSelectEvent } from './types';
+import { default as Plotly } from 'plotly.js-dist';
+import { PlotlyThemeColors } from '../../../hooks/use-plotly-theme';
+type PeakForInteraction = {
+    peak: PeakAnnotation & {
+        id: string;
+    };
+    seriesIndex: number;
+    seriesName: string;
+    isAutoDetected: boolean;
+};
+type BuildTraceDataParams = {
+    processedSeries: ChromatogramSeries[];
+    processedAnnotations: PeakAnnotation[];
+    allDetectedPeaks: {
+        peaks: PeakAnnotation[];
+        seriesIndex: number;
+    }[];
+    allPeaksForInteraction: PeakForInteraction[];
+    showMarkers: boolean;
+    markerSize: number;
+    xAxisTitle: string;
+    yAxisTitle: string;
+    boundaryMarkers: BoundaryMarkerStyle;
+};
+type BuildLayoutParams = {
+    title?: string;
+    titleFontSize: number;
+    titleTopMargin?: number;
+    width: number;
+    height: number;
+    xAxisTitle: string;
+    yAxisTitle: string;
+    xRange?: [number, number];
+    yRange?: [number, number];
+    showLegend: boolean;
+    seriesCount: number;
+    showGridX: boolean;
+    showGridY: boolean;
+    showCrosshairs: boolean;
+    theme: PlotlyThemeColors;
+    peakAnnotations: Partial<Plotly.Annotations>[];
+};
+type BuildConfigParams = {
+    showExportButton: boolean;
+    width: number;
+    height: number;
+};
+export type { PeakForInteraction, BuildTraceDataParams, BuildLayoutParams, BuildConfigParams };
+export declare function buildTraceData(params: BuildTraceDataParams): Plotly.Data[];
+export declare function buildLayout(params: BuildLayoutParams): Partial<Plotly.Layout>;
+export declare function buildConfig(params: BuildConfigParams): Partial<Plotly.Config>;
+type MutableRef<T> = {
+    current: T;
+};
+export declare function createHoverHandler(domElement: HTMLElement, processedSeriesLength: number, thickenedSeriesRef: MutableRef<number | null>, onPeakHoverRef: MutableRef<((event: PeakSelectEvent | null) => void) | undefined>, hoverLineWidthMultiplier: number): (eventData: Plotly.PlotHoverEvent) => void;
+export declare function createClickHandler(onPeakClickRef: MutableRef<((event: PeakSelectEvent) => void) | undefined>): (eventData: Plotly.PlotMouseEvent) => void;
+export declare function createUnhoverHandler(domElement: HTMLElement, thickenedSeriesRef: MutableRef<number | null>, onPeakHoverRef: MutableRef<((event: PeakSelectEvent | null) => void) | undefined>): () => void;

package/dist/components/charts/Chromatogram/regionOverlays.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("../../../utils/colors.cjs"),h=3.5;function u(s,i,o){const l=o.color??c.CHART_COLORS[i%c.CHART_COLORS.length],n=[];for(const e of s){if(!e.regionOverlay)continue;const t=e._computed?.startIndex,r=e._computed?.endIndex;if(t===void 0||r===void 0)continue;const a=e.color??l,d=e.regionOverlayWidth??h,v=e.hoverText?{hovertemplate:`${e.hoverText}<extra></extra>`}:{hoverinfo:"skip"};n.push({x:o.x.slice(t,r+1),y:o.y.slice(t,r+1),type:"scatter",mode:"lines",line:{color:a,width:d},showlegend:!1,name:"",...v})}return n}exports.createRegionOverlayTraces=u;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("../../../utils/colors.cjs"),v=3.5;function h(s,i,o){const l=o.color??c.CHART_COLORS[i%c.CHART_COLORS.length],n=[];for(const e of s){if(!e.regionOverlay)continue;const t=e._computed?.startIndex,r=e._computed?.endIndex;if(t===void 0||r===void 0)continue;const a=e.color??l,d=e.regionOverlayWidth??v,u=e.hoverText?{hovertemplate:`${e.hoverText}<extra></extra>`}:{hoverinfo:"skip"};n.push({x:o.x.slice(t,r+1),y:o.y.slice(t,r+1),type:"scatter",mode:"lines",line:{color:a,width:d},showlegend:!1,name:"",...u})}return n}exports.createRegionOverlayTraces=h;
 //# sourceMappingURL=regionOverlays.cjs.map

package/dist/components/charts/Chromatogram/regionOverlays.d.ts

@@ -0,0 +1,9 @@
+import { PeakAnnotation, ChromatogramSeries } from './types';
+import { default as Plotly } from 'plotly.js-dist';
+/**
+ * Build one scatter trace per peak that has regionOverlay:true, slicing the
+ * underlying series data between the peak's startIndex and endIndex.
+ * Traces are pushed BEFORE the invisible hit-area trace so peak click/hover
+ * still resolves to the hit-area marker, not the overlay.
+ */
+export declare function createRegionOverlayTraces(peaks: PeakAnnotation[], seriesIndex: number, series: ChromatogramSeries): Plotly.Data[];

package/dist/components/charts/Chromatogram/types.d.ts

@@ -0,0 +1,258 @@
+/**
+ * Type definitions for Chromatogram component
+ */
+/**
+ * Data series for chromatogram visualization
+ */
+export interface ChromatogramSeries {
+    /** Retention time values (x-axis) */
+    x: number[];
+    /** Signal intensity values (y-axis) */
+    y: number[];
+    /** Series label for legend */
+    name: string;
+    /** Optional color override (auto-assigned from CHART_COLORS if not provided) */
+    color?: string;
+    /** Optional metadata for the trace (displayed in tooltip on hover) */
+    metadata?: Record<string, unknown>;
+}
+/**
+ * Individual boundary marker type for a single boundary point
+ */
+export type BoundaryMarkerType = "none" | "triangle" | "diamond";
+/**
+ * Internal computed fields for peak annotations.
+ * These are populated by the component during processing.
+ * @internal
+ */
+export interface PeakComputedFields {
+    /** Peak area calculated using trapezoidal integration */
+    area?: number;
+    /** Peak index in the data array */
+    index?: number;
+    /** Start index of peak boundary in the data array */
+    startIndex?: number;
+    /** End index of peak boundary in the data array */
+    endIndex?: number;
+    /** Peak width at half maximum */
+    widthAtHalfMax?: number;
+}
+/**
+ * Peak annotation for labeling peaks on the chromatogram.
+ * Used for both user-provided annotations and auto-detected peaks.
+ */
+export 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) */
+    y: number;
+    /** Label text (e.g., compound name). If not provided, auto-generated from computed area. */
+    text?: string;
+    /** Vertical arrow offset in pixels (negative = above peak, default: -30) */
+    ay?: number;
+    /** Horizontal arrow offset in pixels (default: 0) */
+    ax?: number;
+    /** Start retention time for peak boundary */
+    startX?: number;
+    /** End retention time for peak boundary */
+    endX?: number;
+    /** Marker style for start boundary (default: "triangle") */
+    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;
+    /**
+     * Internal computed fields populated by the component.
+     * @internal Do not set these directly - they are computed from startX/endX or auto-detection.
+     */
+    _computed?: PeakComputedFields;
+}
+/**
+ * Payload delivered to onPeakClick and onPeakHover callbacks.
+ */
+export 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)
+ */
+export 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;
+}
+/**
+ * Baseline correction method
+ */
+export type BaselineCorrectionMethod = "none" | "linear" | "rolling";
+/**
+ * Global boundary marker style setting
+ * - "none": No boundary markers displayed
+ * - "enabled": Show boundary markers using per-peak settings (startMarker/endMarker) or defaults
+ */
+export type BoundaryMarkerStyle = "none" | "enabled";
+/**
+ * Peak detection algorithm options
+ */
+export interface PeakDetectionOptions {
+    /** Minimum peak height threshold (absolute or relative to max, default: 0.05) */
+    minHeight?: number;
+    /** Minimum distance between peaks in data points (default: 5) */
+    minDistance?: number;
+    /** Prominence threshold - how much a peak stands out from neighbors (default: 0.02) */
+    prominence?: number;
+    /** Use relative threshold as percentage of max signal (default: true) */
+    relativeThreshold?: boolean;
+}
+/**
+ * Props for Chromatogram component
+ */
+export interface ChromatogramProps {
+    /** Array of data series to display */
+    series: ChromatogramSeries[];
+    /** Chart width in pixels */
+    width?: number;
+    /** Chart height in pixels */
+    height?: number;
+    /** Chart title */
+    title?: string;
+    /** X-axis label */
+    xAxisTitle?: string;
+    /** Y-axis label */
+    yAxisTitle?: string;
+    /** Peak annotations to display */
+    annotations?: PeakAnnotation[];
+    /** Fixed x-axis range [min, max] */
+    xRange?: [number, number];
+    /** Fixed y-axis range [min, max] */
+    yRange?: [number, number];
+    /** Show legend (default: true) */
+    showLegend?: boolean;
+    /** Show vertical grid lines (default: true) */
+    showGridX?: boolean;
+    /** Show horizontal grid lines (default: true) */
+    showGridY?: boolean;
+    /** Show data point markers (default: false) */
+    showMarkers?: boolean;
+    /** Marker size when showMarkers is true (default: 4) */
+    markerSize?: number;
+    /** Show crosshairs on hover (default: false) */
+    showCrosshairs?: boolean;
+    /** Baseline correction method (default: "none") */
+    baselineCorrection?: BaselineCorrectionMethod;
+    /** Rolling baseline window size (default: 50) */
+    baselineWindowSize?: number;
+    /** Peak detection algorithm options - if provided, enables automatic peak detection */
+    peakDetectionOptions?: PeakDetectionOptions;
+    /** Show peak areas as annotations (default: false) */
+    showPeakAreas?: boolean;
+    /**
+     * Show peak boundary markers (default: "none").
+     * - "none": No boundary markers displayed
+     * - "enabled": Show boundary markers using per-peak startMarker/endMarker settings
+     *
+     * Per-peak marker defaults: startMarker="triangle", endMarker="diamond"
+     */
+    boundaryMarkers?: BoundaryMarkerStyle;
+    /**
+     * Retention time threshold for grouping overlapping annotations (default: 0.4 minutes).
+     * Peaks closer than this threshold will have their annotations staggered to avoid overlap.
+     */
+    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;
+}
+/**
+ * Metadata for a peak annotation with its series index.
+ */
+export type PeakWithMeta = {
+    peak: PeakAnnotation;
+    seriesIndex: number;
+};

package/dist/components/charts/Electropherogram/Electropherogram.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),n=require("react"),$=require("../ChartTooltip/ChartTooltip.cjs"),E=require("../plotly-loader.cjs"),w=require("../../../hooks/use-plotly-theme.cjs"),b=require("../../../utils/colors.cjs");;/* empty css                        */const D=75,I=1.05,V=e=>{if(e.base!==void 0)return e.base;const a={A:e.peakA,T:e.peakT,G:e.peakG,C:e.peakC},m=Object.values(a);if(m.every(c=>c===m[0]))return"";let h="",f=0;return Object.entries(a).forEach(([c,g])=>{g>f&&(h=c,f=g)}),h},z=({data:e=[],width:a=900,height:m=600,positionInterval:y=10,colorA:h=b.CHART_COLORS[0],colorT:f=b.CHART_COLORS[2],colorG:c=b.CHART_COLORS[3],colorC:g=b.CHART_COLORS[1]})=>{const d=n.useRef(null),T=w.usePlotlyTheme(),{bindTooltip:O,tooltipElement:H}=$.useChartTooltip({xLabel:"Position",yLabel:"Intensity"}),s=n.useMemo(()=>e.map(t=>t.position),[e]),F=n.useMemo(()=>e.map(t=>V(t)),[e]),M=n.useMemo(()=>e.map(t=>t.peakA),[e]),P=n.useMemo(()=>e.map(t=>t.peakT),[e]),v=n.useMemo(()=>e.map(t=>t.peakG),[e]),C=n.useMemo(()=>e.map(t=>t.peakC),[e]),R=n.useMemo(()=>({x:s,y:M,type:"scatter",mode:"lines",hoverinfo:"none",name:"A",line:{color:h,width:2,shape:"spline"}}),[s,M,h]),j=n.useMemo(()=>({x:s,y:P,type:"scatter",mode:"lines",hoverinfo:"none",name:"T",line:{color:f,width:2,shape:"spline"}}),[s,P,f]),A=n.useMemo(()=>({x:s,y:v,type:"scatter",mode:"lines",hoverinfo:"none",name:"G",line:{color:c,width:2,shape:"spline"}}),[s,v,c]),_=n.useMemo(()=>({x:s,y:C,type:"scatter",mode:"lines",hoverinfo:"none",name:"C",line:{color:g,width:2,shape:"spline"}}),[s,C,g]),L=n.useMemo(()=>Math.max(...M,...P,...v,...C),[M,P,v,C]);if(n.useEffect(()=>{if(!d.current||e.length===0)return;const t=[R,j,A,_],k={width:a,height:m-D,margin:{l:0,r:0,b:20,t:10,pad:0},paper_bgcolor:T.paperBg,plot_bgcolor:T.plotBg,font:{family:w.CHART_FONT_FAMILY},showlegend:!1,xaxis:{showgrid:!1,zeroline:!1,showticklabels:!1,showline:!1,range:[Math.min(...s),Math.max(...s)],fixedrange:!0},yaxis:{showgrid:!1,zeroline:!1,showticklabels:!1,showline:!1,range:[0,L*I],fixedrange:!0}},i={responsive:!0,displayModeBar:!1,displaylogo:!1,fillFrame:!0};let p=!1,u=null;return E.loadPlotly().then(r=>{p||!d.current||(r.newPlot(d.current,t,k,i),O(d.current),u=d.current)}),()=>{p=!0,u&&E.getLoadedPlotly().purge(u)}},[e,a,m,R,j,A,_,L,s,T,O]),e.length===0)return l.jsx("div",{className:"chart-container",children:"No data available"});const G=()=>{const t=()=>{const i=Math.min(...s),p=Math.max(...s),u=a;return l.jsx("div",{className:"sequence-letters-container",children:F.map((r,x)=>{const o=s[x],q=r==="A"?h:r==="T"?f:r==="G"?c:r==="C"?g:T.textColor,N=p-i||1,B=(o-i)/N*u;return l.jsx("span",{className:"sequence-letter",style:{left:`${B}px`,color:q},children:r},`base-${x}`)})})},k=()=>{const i=Math.min(...s),p=Math.max(...s),u=a,r=Math.ceil(i/y)*y,x=[];for(let o=r;o<=p;o+=y)x.push({position:o,label:o.toString()});return l.jsx("div",{className:"position-numbers-container",children:x.map(o=>{const q=p-i||1,S=(o.position-i)/q*u;return l.jsx("span",{className:"position-number",style:{left:`${S}px`},children:o.label},`pos-${o.position}`)})})};return l.jsxs("div",{className:"sequence-header",children:[t(),k()]})};return l.jsxs("div",{className:"electropherogram-container relative",style:{width:a,height:m},children:[G(),l.jsx("div",{className:"electropherogram-chart",children:l.jsx("div",{ref:d,style:{width:"100%",height:"100%"}})}),H]})};exports.Electropherogram=z;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),n=require("react"),$=require("../ChartTooltip/ChartTooltip.cjs"),E=require("../plotly-loader.cjs"),w=require("../../../hooks/use-plotly-theme.cjs"),b=require("../../../utils/colors.cjs");;/* empty css                        */const D=75,I=1.05,V=e=>{if(e.base!==void 0)return e.base;const a={A:e.peakA,T:e.peakT,G:e.peakG,C:e.peakC},m=Object.values(a);if(m.every(c=>c===m[0]))return"";let h="",f=0;return Object.entries(a).forEach(([c,g])=>{g>f&&(h=c,f=g)}),h},z=({data:e=[],width:a=900,height:m=600,positionInterval:y=10,colorA:h=b.CHART_COLORS[0],colorT:f=b.CHART_COLORS[2],colorG:c=b.CHART_COLORS[3],colorC:g=b.CHART_COLORS[1]})=>{const d=n.useRef(null),T=w.usePlotlyTheme(),{bindTooltip:O,tooltipElement:H}=$.useChartTooltip({xLabel:"Position",yLabel:"Intensity"}),s=n.useMemo(()=>e.map(t=>t.position),[e]),F=n.useMemo(()=>e.map(t=>V(t)),[e]),M=n.useMemo(()=>e.map(t=>t.peakA),[e]),P=n.useMemo(()=>e.map(t=>t.peakT),[e]),v=n.useMemo(()=>e.map(t=>t.peakG),[e]),C=n.useMemo(()=>e.map(t=>t.peakC),[e]),R=n.useMemo(()=>({x:s,y:M,type:"scatter",mode:"lines",hoverinfo:"none",name:"A",line:{color:h,width:2,shape:"spline"}}),[s,M,h]),_=n.useMemo(()=>({x:s,y:P,type:"scatter",mode:"lines",hoverinfo:"none",name:"T",line:{color:f,width:2,shape:"spline"}}),[s,P,f]),j=n.useMemo(()=>({x:s,y:v,type:"scatter",mode:"lines",hoverinfo:"none",name:"G",line:{color:c,width:2,shape:"spline"}}),[s,v,c]),A=n.useMemo(()=>({x:s,y:C,type:"scatter",mode:"lines",hoverinfo:"none",name:"C",line:{color:g,width:2,shape:"spline"}}),[s,C,g]),L=n.useMemo(()=>Math.max(...M,...P,...v,...C),[M,P,v,C]);if(n.useEffect(()=>{if(!d.current||e.length===0)return;const t=[R,_,j,A],k={width:a,height:m-D,margin:{l:0,r:0,b:20,t:10,pad:0},paper_bgcolor:T.paperBg,plot_bgcolor:T.plotBg,font:{family:w.CHART_FONT_FAMILY},showlegend:!1,xaxis:{showgrid:!1,zeroline:!1,showticklabels:!1,showline:!1,range:[Math.min(...s),Math.max(...s)],fixedrange:!0},yaxis:{showgrid:!1,zeroline:!1,showticklabels:!1,showline:!1,range:[0,L*I],fixedrange:!0}},i={responsive:!0,displayModeBar:!1,displaylogo:!1,fillFrame:!0};let p=!1,u=null;return E.loadPlotly().then(r=>{p||!d.current||(r.newPlot(d.current,t,k,i),O(d.current),u=d.current)}),()=>{p=!0,u&&E.getLoadedPlotly().purge(u)}},[e,a,m,R,_,j,A,L,s,T,O]),e.length===0)return l.jsx("div",{className:"chart-container",children:"No data available"});const G=()=>{const t=()=>{const i=Math.min(...s),p=Math.max(...s),u=a;return l.jsx("div",{className:"sequence-letters-container",children:F.map((r,x)=>{const o=s[x],q=r==="A"?h:r==="T"?f:r==="G"?c:r==="C"?g:T.textColor,N=p-i||1,B=(o-i)/N*u;return l.jsx("span",{className:"sequence-letter",style:{left:`${B}px`,color:q},children:r},`base-${x}`)})})},k=()=>{const i=Math.min(...s),p=Math.max(...s),u=a,r=Math.ceil(i/y)*y,x=[];for(let o=r;o<=p;o+=y)x.push({position:o,label:o.toString()});return l.jsx("div",{className:"position-numbers-container",children:x.map(o=>{const q=p-i||1,S=(o.position-i)/q*u;return l.jsx("span",{className:"position-number",style:{left:`${S}px`},children:o.label},`pos-${o.position}`)})})};return l.jsxs("div",{className:"sequence-header",children:[t(),k()]})};return l.jsxs("div",{className:"electropherogram-container relative",style:{width:a,height:m},children:[G(),l.jsx("div",{className:"electropherogram-chart",children:l.jsx("div",{ref:d,style:{width:"100%",height:"100%"}})}),H]})};exports.Electropherogram=z;
 //# sourceMappingURL=Electropherogram.cjs.map

package/dist/components/charts/Electropherogram/Electropherogram.d.ts

@@ -0,0 +1,22 @@
+import { default as React } from 'react';
+interface PeakData {
+    position: number;
+    base?: string;
+    peakA: number;
+    peakT: number;
+    peakG: number;
+    peakC: number;
+}
+interface ElectropherogramProps {
+    data?: PeakData[];
+    width?: number;
+    height?: number;
+    positionInterval?: number;
+    colorA?: string;
+    colorT?: string;
+    colorG?: string;
+    colorC?: string;
+}
+declare const Electropherogram: React.FC<ElectropherogramProps>;
+export { Electropherogram };
+export type { PeakData, ElectropherogramProps };

package/dist/components/charts/Electropherogram/index.d.ts

@@ -0,0 +1,2 @@
+export { Electropherogram } from './Electropherogram';
+export type { PeakData, ElectropherogramProps } from './Electropherogram';

package/dist/components/charts/Histogram/Histogram.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),l=require("react"),U=require("../ChartTooltip/ChartTooltip.cjs"),k=require("../plotly-loader.cjs"),$=require("../../../hooks/use-element-size.cjs"),R=require("../../../hooks/use-plotly-theme.cjs"),D=require("../../../lib/utils.cjs"),G=require("../../../utils/colors.cjs");;/* empty css                 */const J=-.5,K=r=>r.reduce((n,u)=>n+u,0)/r.length,Q=(r,a)=>{const u=r.map(c=>Math.pow(c-a,2)).reduce((c,h)=>c+h,0)/r.length;return Math.sqrt(u)},Z=(r,a,n,u,c=100)=>{const h=[],p=[],y=(u-n)/(c-1);for(let e=0;e<c;e++){const o=n+e*y;h.push(o);const M=J*Math.pow((o-r)/a,2),q=1/(a*Math.sqrt(2*Math.PI))*Math.exp(M);p.push(q)}return{x:h,y:p}},tt=(r,a,n)=>{const u=Math.ceil((n.end-n.start)/n.size),c=Array(u).fill(0);a.forEach(e=>{if(e>=n.start&&e<=n.end){const o=Math.floor((e-n.start)/n.size);c[o]++}});const h=Math.max(...c),p=Math.max(...r),y=h/p;return r.map(e=>e*y)},et=({dataSeries:r,width:a,height:n,title:u="Histogram",xTitle:c="X Axis",yTitle:h="Frequency",bargap:p=.2,showDistributionLine:y=!1})=>{const e=l.useRef(null),o=R.usePlotlyTheme(),{bindTooltip:M,tooltipElement:q}=U.useChartTooltip({xLabel:c,yLabel:h}),[B,F]=$.useElementSize(),g=a??F.width,x=n??F.height,T=g>0&&x>0,W=a===void 0,L=n===void 0,b=l.useRef({width:g,height:x});b.current={width:g,height:x};const j=l.useRef(!1),C=l.useRef({width:0,height:0}),N=l.useMemo(()=>Array.isArray(r)?r:[r],[r]),_=l.useMemo(()=>N.length>1?"stack":void 0,[N.length]),z=G.CHART_COLORS,v=l.useMemo(()=>N.map((t,m)=>{const d=typeof t.showDistributionLine>"u"?y:t.showDistributionLine;return{...t,color:t.color||z[m%z.length],opacity:d?.5:t.opacity||1,showDistributionLine:d,lineWidth:t.lineWidth||3}}),[N,y,z]),A=o.gridColor,E=l.useMemo(()=>v.map(t=>({type:"histogram",x:t.x,name:t.name,marker:{color:t.color,line:{color:o.paperBg,width:1},opacity:t.opacity},autobinx:t.autobinx,xbins:t.xbins,hoverinfo:"none"})),[v,o]),P=l.useMemo(()=>v.filter(t=>t.showDistributionLine).map(t=>{const m=K(t.x),d=Q(t.x,m),f=Math.min(...t.x),i=Math.max(...t.x),w=i-f,H=f-w*.1,I=i+w*.1,V=t.xbins||{start:H,end:I,size:w/10},S=Z(m,d,H,I,100),X=tt(S.y,t.x,V);return{type:"scatter",x:S.x,y:X,mode:"lines",name:`${t.name} Distribution`,line:{color:t.color,width:t.lineWidth},hoverinfo:"none"}}),[v]),O=l.useMemo(()=>[...E,...P],[E,P]);l.useEffect(()=>{if(!e.current||!T)return;const t={width:b.current.width,height:b.current.height,font:{family:R.CHART_FONT_FAMILY},showlegend:!1,margin:{l:90,r:40,b:80,t:40},xaxis:{title:{text:c,font:{size:16,color:o.textSecondary,family:R.CHART_FONT_FAMILY,weight:400},standoff:20},gridcolor:A,tickcolor:o.tickColor,ticklen:8,tickwidth:1,ticks:"outside",linecolor:o.lineColor,linewidth:1,zeroline:!1,automargin:!0},yaxis:{title:{text:h,font:{size:16,color:o.textSecondary,family:R.CHART_FONT_FAMILY,weight:400},standoff:20},gridcolor:A,tickcolor:o.tickColor,ticklen:8,tickwidth:1,ticks:"outside",linecolor:o.lineColor,linewidth:1,zeroline:!1,rangemode:"tozero",automargin:!0},barmode:_,bargap:p,paper_bgcolor:o.paperBg,plot_bgcolor:o.plotBg},m={responsive:!1,displayModeBar:!1,displaylogo:!1};let d=!1,f=null;return k.loadPlotly().then(i=>{d||!e.current||(i.newPlot(e.current,O,t,m),M(e.current),f=e.current,j.current=!0,C.current={...b.current})}),()=>{d=!0,f&&(k.getLoadedPlotly().purge(f),j.current=!1)}},[T,c,h,p,O,_,A,o,M]),l.useEffect(()=>{const t=e.current;!t||!j.current||g<=0||x<=0||C.current.width===g&&C.current.height===x||(C.current={width:g,height:x},k.getLoadedPlotly().relayout(t,{width:g,height:x}).catch(()=>{}))},[g,x]);const Y=({series:t})=>{const m=t.map((i,w)=>s.jsx(l.Fragment,{children:s.jsxs("div",{className:"legend-item",children:[s.jsx("span",{className:"color-box",style:{background:i.color}}),i.name,w<t.length-1&&s.jsx("span",{className:"divider"})]})},i.name)),d=[],f=6;for(let i=0;i<m.length;i+=f)d.push(s.jsx("div",{className:"legend-row",children:m.slice(i,i+f)},i));return s.jsx("div",{className:"legend-container",children:d})};return s.jsxs("div",{className:D.cn("histogram-container relative",W&&"w-full",L&&"h-full"),style:a===void 0?void 0:{width:a},children:[s.jsxs("div",{className:D.cn("chart-container",L&&"flex h-full flex-col"),children:[u&&s.jsx("div",{className:"title-container",children:s.jsx("h2",{className:"title",children:u})}),s.jsx("div",{ref:B,className:D.cn(L&&"min-h-0 flex-1"),children:s.jsx("div",{ref:e,style:{width:"100%",height:"100%",margin:"0"}})}),s.jsx(Y,{series:v})]}),q]})};exports.Histogram=et;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),l=require("react"),U=require("../ChartTooltip/ChartTooltip.cjs"),k=require("../plotly-loader.cjs"),$=require("../../../hooks/use-element-size.cjs"),R=require("../../../hooks/use-plotly-theme.cjs"),D=require("../../../lib/utils.cjs"),G=require("../../../utils/colors.cjs");;/* empty css                 */const J=-.5,K=r=>r.reduce((n,u)=>n+u,0)/r.length,Q=(r,a)=>{const u=r.map(c=>Math.pow(c-a,2)).reduce((c,h)=>c+h,0)/r.length;return Math.sqrt(u)},Z=(r,a,n,u,c=100)=>{const h=[],p=[],y=(u-n)/(c-1);for(let e=0;e<c;e++){const o=n+e*y;h.push(o);const M=J*Math.pow((o-r)/a,2),q=1/(a*Math.sqrt(2*Math.PI))*Math.exp(M);p.push(q)}return{x:h,y:p}},tt=(r,a,n)=>{const u=Math.ceil((n.end-n.start)/n.size),c=Array(u).fill(0);a.forEach(e=>{if(e>=n.start&&e<=n.end){const o=Math.floor((e-n.start)/n.size);c[o]++}});const h=Math.max(...c),p=Math.max(...r),y=h/p;return r.map(e=>e*y)},et=({dataSeries:r,width:a,height:n,title:u="Histogram",xTitle:c="X Axis",yTitle:h="Frequency",bargap:p=.2,showDistributionLine:y=!1})=>{const e=l.useRef(null),o=R.usePlotlyTheme(),{bindTooltip:M,tooltipElement:q}=U.useChartTooltip({xLabel:c,yLabel:h}),[B,F]=$.useElementSize(),g=a??F.width,x=n??F.height,_=g>0&&x>0,W=a===void 0,L=n===void 0,b=l.useRef({width:g,height:x});b.current={width:g,height:x};const j=l.useRef(!1),C=l.useRef({width:0,height:0}),N=l.useMemo(()=>Array.isArray(r)?r:[r],[r]),T=l.useMemo(()=>N.length>1?"stack":void 0,[N.length]),z=G.CHART_COLORS,v=l.useMemo(()=>N.map((t,m)=>{const d=typeof t.showDistributionLine>"u"?y:t.showDistributionLine;return{...t,color:t.color||z[m%z.length],opacity:d?.5:t.opacity||1,showDistributionLine:d,lineWidth:t.lineWidth||3}}),[N,y,z]),A=o.gridColor,E=l.useMemo(()=>v.map(t=>({type:"histogram",x:t.x,name:t.name,marker:{color:t.color,line:{color:o.paperBg,width:1},opacity:t.opacity},autobinx:t.autobinx,xbins:t.xbins,hoverinfo:"none"})),[v,o]),P=l.useMemo(()=>v.filter(t=>t.showDistributionLine).map(t=>{const m=K(t.x),d=Q(t.x,m),f=Math.min(...t.x),i=Math.max(...t.x),w=i-f,H=f-w*.1,I=i+w*.1,V=t.xbins||{start:H,end:I,size:w/10},S=Z(m,d,H,I,100),X=tt(S.y,t.x,V);return{type:"scatter",x:S.x,y:X,mode:"lines",name:`${t.name} Distribution`,line:{color:t.color,width:t.lineWidth},hoverinfo:"none"}}),[v]),O=l.useMemo(()=>[...E,...P],[E,P]);l.useEffect(()=>{if(!e.current||!_)return;const t={width:b.current.width,height:b.current.height,font:{family:R.CHART_FONT_FAMILY},showlegend:!1,margin:{l:90,r:40,b:80,t:40},xaxis:{title:{text:c,font:{size:16,color:o.textSecondary,family:R.CHART_FONT_FAMILY,weight:400},standoff:20},gridcolor:A,tickcolor:o.tickColor,ticklen:8,tickwidth:1,ticks:"outside",linecolor:o.lineColor,linewidth:1,zeroline:!1,automargin:!0},yaxis:{title:{text:h,font:{size:16,color:o.textSecondary,family:R.CHART_FONT_FAMILY,weight:400},standoff:20},gridcolor:A,tickcolor:o.tickColor,ticklen:8,tickwidth:1,ticks:"outside",linecolor:o.lineColor,linewidth:1,zeroline:!1,rangemode:"tozero",automargin:!0},barmode:T,bargap:p,paper_bgcolor:o.paperBg,plot_bgcolor:o.plotBg},m={responsive:!1,displayModeBar:!1,displaylogo:!1};let d=!1,f=null;return k.loadPlotly().then(i=>{d||!e.current||(i.newPlot(e.current,O,t,m),M(e.current),f=e.current,j.current=!0,C.current={...b.current})}),()=>{d=!0,f&&(k.getLoadedPlotly().purge(f),j.current=!1)}},[_,c,h,p,O,T,A,o,M]),l.useEffect(()=>{const t=e.current;!t||!j.current||g<=0||x<=0||C.current.width===g&&C.current.height===x||(C.current={width:g,height:x},k.getLoadedPlotly().relayout(t,{width:g,height:x}).catch(()=>{}))},[g,x]);const Y=({series:t})=>{const m=t.map((i,w)=>s.jsx(l.Fragment,{children:s.jsxs("div",{className:"legend-item",children:[s.jsx("span",{className:"color-box",style:{background:i.color}}),i.name,w<t.length-1&&s.jsx("span",{className:"divider"})]})},i.name)),d=[],f=6;for(let i=0;i<m.length;i+=f)d.push(s.jsx("div",{className:"legend-row",children:m.slice(i,i+f)},i));return s.jsx("div",{className:"legend-container",children:d})};return s.jsxs("div",{className:D.cn("histogram-container relative",W&&"w-full",L&&"h-full"),style:a===void 0?void 0:{width:a},children:[s.jsxs("div",{className:D.cn("chart-container",L&&"flex h-full flex-col"),children:[u&&s.jsx("div",{className:"title-container",children:s.jsx("h2",{className:"title",children:u})}),s.jsx("div",{ref:B,className:D.cn(L&&"min-h-0 flex-1"),children:s.jsx("div",{ref:e,style:{width:"100%",height:"100%",margin:"0"}})}),s.jsx(Y,{series:v})]}),q]})};exports.Histogram=et;
 //# sourceMappingURL=Histogram.cjs.map

package/dist/components/charts/Histogram/Histogram.d.ts

@@ -0,0 +1,36 @@
+import { default as React } from 'react';
+interface HistogramDataSeries {
+    x: number[];
+    name: string;
+    color?: string;
+    autobinx?: boolean;
+    xbins?: {
+        start: number;
+        end: number;
+        size: number;
+    };
+    opacity?: number;
+    showDistributionLine?: boolean;
+    lineWidth?: number;
+}
+type HistogramProps = {
+    dataSeries: HistogramDataSeries | HistogramDataSeries[];
+    /**
+     * Fixed width in pixels. When omitted, the chart fills its container and
+     * tracks the container's width via a `ResizeObserver`.
+     */
+    width?: number;
+    /**
+     * Fixed height in pixels. When omitted, the chart fills its container and
+     * tracks the container's height via a `ResizeObserver`.
+     */
+    height?: number;
+    title?: string;
+    xTitle?: string;
+    yTitle?: string;
+    bargap?: number;
+    showDistributionLine?: boolean;
+};
+declare const Histogram: React.FC<HistogramProps>;
+export { Histogram };
+export type { HistogramDataSeries, HistogramProps };

package/dist/components/charts/Histogram/index.d.ts

@@ -0,0 +1,2 @@
+export { Histogram } from './Histogram';
+export type { HistogramDataSeries, HistogramProps } from './Histogram';