@tetrascience-npm/tetrascience-react-ui 0.4.0-beta.9.1 → 0.4.0

package/dist/index.d.ts

@@ -1,2027 +1,2172 @@
-import React$1, { ClassAttributes, HTMLAttributes, ReactNode } from 'react';
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { OnChange } from '@monaco-editor/react';
-import { ExtraProps } from 'react-markdown';
-import { SearchEqlRequest } from '@tetrascience-npm/ts-connectors-sdk';
+import { ClassAttributes } from 'react';
+import { default as default_2 } from 'react';
+import { ExtraProps } from 'react-markdown';
+import { HTMLAttributes } from 'react';
+import { JSX } from 'react/jsx-runtime';
+import { OnChange } from '@monaco-editor/react';
+import { ReactNode } from 'react';
+import { SearchEqlRequest } from '@tetrascience-npm/ts-connectors-sdk';
+
+export declare const AppHeader: default_2.FC<AppHeaderProps>;
+
+export declare interface AppHeaderProps {
+    hostname: string;
+    userProfile: UserProfileProps;
+    onHomeClick?: () => void;
+    onSettingsClick?: () => void;
+    onUserProfileClick?: () => void;
+}
+
+export declare const AppLayout: default_2.FC<AppLayoutProps>;
+
+export declare interface AppLayoutProps {
+    userProfile: {
+        name: string;
+        avatar?: string;
+    };
+    hostname: string;
+    organization: {
+        name: string;
+        subtext?: string;
+        logo?: default_2.ReactNode;
+    };
+    children?: default_2.ReactNode;
+}
+
+export declare interface AreaDataSeries {
+    x: number[];
+    y: number[];
+    name: string;
+    color: string;
+    fill?: "tozeroy" | "tonexty" | "toself";
+}
+
+export declare const AreaGraph: default_2.FC<AreaGraphProps>;
+
+export declare interface AreaGraphProps {
+    dataSeries: AreaDataSeries[];
+    width?: number;
+    height?: number;
+    xRange?: [number, number];
+    yRange?: [number, number];
+    variant?: AreaGraphVariant;
+    xTitle?: string;
+    yTitle?: string;
+    title?: string;
+}
+
+export declare type AreaGraphVariant = "normal" | "stacked";
+
+export declare const AssistantModal: default_2.FC<AssistantModalProps>;
+
+export declare interface AssistantModalProps {
+    open: boolean;
+    title: string;
+    prompt: string;
+    initialCode?: string;
+    userQuery?: string;
+    onUserQueryChange?: (value: string) => void;
+    onCopy: (code: string) => void;
+    onLaunch: (code: string) => void;
+    onSend: (input: string) => void;
+    onCancel: () => void;
+}
+
+/**
+ * Axis configuration
+ */
+export declare interface AxisConfig {
+    /** Axis label */
+    title?: string;
+    /** Scale type (linear or log) */
+    scale?: ScaleType;
+    /** Fixed axis range [min, max] */
+    range?: [number, number];
+    /** Auto-range with optional padding percentage (0-1) */
+    autoRange?: boolean;
+    /** Padding percentage for auto-range (default: 0.1 = 10%) */
+    autoRangePadding?: number;
+}
+
+export declare const Badge: default_2.FC<BadgeProps>;
+
+export declare interface BadgeProps {
+    children: default_2.ReactNode;
+    size?: BadgeSize;
+    variant?: BadgeVariant;
+    disabled?: boolean;
+    iconLeft?: default_2.ReactNode;
+    iconRight?: default_2.ReactNode;
+    className?: string;
+}
+
+declare type BadgeSize = "small" | "medium";
+
+declare type BadgeVariant = "default" | "primary";
+
+export declare interface BarDataSeries {
+    x: number[];
+    y: number[];
+    name: string;
+    color: string;
+    error_y?: {
+        type: "data";
+        array: number[];
+        visible: boolean;
+    };
+}
+
+export declare const BarGraph: default_2.FC<BarGraphProps>;
+
+export declare interface BarGraphProps {
+    dataSeries: BarDataSeries[];
+    width?: number;
+    height?: number;
+    xRange?: [number, number];
+    yRange?: [number, number];
+    variant?: BarGraphVariant;
+    xTitle?: string;
+    yTitle?: string;
+    title?: string;
+    barWidth?: number;
+}
+
+export declare type BarGraphVariant = "group" | "stack" | "overlay";
+
+/**
+ * Baseline correction method
+ */
+export declare 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 declare type BoundaryMarkerStyle = "none" | "enabled";
+
+/**
+ * Individual boundary marker type for a single boundary point
+ */
+declare type BoundaryMarkerType = "none" | "triangle" | "diamond";
+
+export declare interface BoxDataSeries {
+    y: number[];
+    name: string;
+    color: string;
+    x?: string[] | number[];
+    boxpoints?: "all" | "outliers" | "suspectedoutliers" | false;
+    jitter?: number;
+    pointpos?: number;
+}
+
+export declare const Boxplot: default_2.FC<BoxplotProps>;
+
+export declare interface BoxplotProps {
+    dataSeries: BoxDataSeries[];
+    width?: number;
+    height?: number;
+    xRange?: [number, number];
+    yRange?: [number, number];
+    xTitle?: string;
+    yTitle?: string;
+    title?: string;
+    showPoints?: boolean;
+}
+
+/**
+ * Construct a full TDP URL by joining a base URL with a path.
+ *
+ * @example
+ * buildTdpUrl("https://tetrascience.com/my-org", "/file/abc-123")
+ * // "https://tetrascience.com/my-org/file/abc-123"
+ *
+ * @param baseUrl - The TDP base URL (origin + optional org prefix)
+ * @param path - The TDP page path (e.g., "/file/abc-123")
+ * @returns The full TDP URL, or null if construction fails
+ */
+export declare function buildTdpUrl(baseUrl: string, path: string): string | null;
+
+export declare const Button: ({ children, variant, size, loading, leftIcon, rightIcon, noPadding, fullWidth, disabled, ref, ...rest }: ButtonProps) => JSX.Element;
+
+export declare const ButtonControl: default_2.FC<ButtonControlProps>;
+
+export declare const ButtonControlGroup: default_2.FC<ButtonControlGroupProps>;
+
+export declare interface ButtonControlGroupProps {
+    controls: ButtonControlItem[];
+    selectedId?: string;
+    onChange?: (id: string) => void;
+    vertical?: boolean;
+    disabled?: boolean;
+}
+
+declare interface ButtonControlItem extends ButtonControlProps {
+    id: string;
+}
+
+export declare interface ButtonControlProps {
+    icon?: default_2.ReactNode;
+    selected?: boolean;
+    disabled?: boolean;
+    onClick?: () => void;
+}
+
+export declare interface ButtonProps extends default_2.ButtonHTMLAttributes<HTMLButtonElement> {
+    children: default_2.ReactNode;
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    loading?: boolean;
+    leftIcon?: default_2.ReactNode;
+    rightIcon?: default_2.ReactNode;
+    noPadding?: boolean;
+    fullWidth?: boolean;
+    ref?: default_2.Ref<HTMLButtonElement>;
+}
+
+declare type ButtonSize = "small" | "medium";
+
+declare type ButtonVariant = "primary" | "secondary" | "tertiary";
+
+export declare const Card: ({ children, title, size, variant, className, fullWidth, ref, ...rest }: CardProps) => JSX.Element;
+
+export declare interface CardProps extends Omit<default_2.HTMLAttributes<HTMLDivElement>, "title"> {
+    children: default_2.ReactNode;
+    title?: default_2.ReactNode;
+    size?: CardSize;
+    variant?: CardVariant;
+    className?: string;
+    fullWidth?: boolean;
+    ref?: default_2.Ref<HTMLDivElement>;
+}
+
+export declare const CardSidebar: ({ title, description, buttonText, linkText, status, onButtonClick, onLinkClick, className, ref, }: CardSidebarProps) => JSX.Element;
+
+export declare interface CardSidebarProps {
+    title: string;
+    description?: string;
+    buttonText?: string;
+    linkText?: string;
+    status?: CardSidebarStatus;
+    onButtonClick?: () => void;
+    onLinkClick?: () => void;
+    className?: string;
+    ref?: default_2.Ref<HTMLDivElement>;
+}
+
+declare type CardSidebarStatus = "default" | "active" | "hover" | "disabled";
+
+declare type CardSize = "small" | "medium" | "large";
+
+declare type CardVariant = "default" | "outlined" | "elevated";
+
+/**
+ * Chart color palette for consistent graph styling
+ * Uses the primary graph colors from the design system
+ */
+export declare const CHART_COLORS: readonly [string, string, string, string, string, string, string, string, string, string, string, string];
+
+export declare const Checkbox: ({ checked, onChange, disabled, className, onClick, label, noPadding, ref, }: CheckboxProps) => JSX.Element;
+
+export declare interface CheckboxProps {
+    checked?: boolean;
+    onChange?: (checked: boolean) => void;
+    disabled?: boolean;
+    className?: string;
+    onClick?: (e: default_2.MouseEvent) => void;
+    label?: default_2.ReactNode;
+    noPadding?: boolean;
+    ref?: default_2.Ref<HTMLInputElement>;
+}
+
+export declare const Chromatogram: default_2.FC<ChromatogramProps>;
+
+export declare const ChromatogramChart: default_2.FC<ChromatogramChartProps>;
+
+/**
+ * Props for ChromatogramChart component
+ */
+export declare interface ChromatogramChartProps {
+    /** 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;
+}
+
+export declare interface ChromatogramProps {
+    data?: PeakData[];
+    width?: number;
+    height?: number;
+    positionInterval?: number;
+    colorA?: string;
+    colorT?: string;
+    colorG?: string;
+    colorC?: string;
+}
+
+/**
+ * Type definitions for ChromatogramChart component
+ */
+/**
+ * Data series for chromatogram visualization
+ */
+export declare 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>;
+}
+
+declare type CodeComponentProps = ClassAttributes<HTMLElement> & HTMLAttributes<HTMLElement> & ExtraProps & {
+    inline?: boolean;
+};
+
+export declare const CodeEditor: default_2.FC<CodeEditorProps>;
+
+export declare interface CodeEditorProps {
+    value: string;
+    onChange: OnChange;
+    language?: string;
+    theme?: "light" | "dark";
+    height?: string | number;
+    width?: string | number;
+    options?: Record<string, unknown>;
+    label?: string;
+    onCopy?: (code: string) => void;
+    onLaunch?: (code: string) => void;
+    disabled?: boolean;
+}
+
+/**
+ * Renders an 'Edit code' button that opens a modal with a Monaco code editor.
+ */
+export declare const CodeScriptEditorButton: ({ initialCode, onCodeSave, language, buttonText, modalTitle, buttonProps, modalProps, disabled, }: CodeScriptEditorButtonProps) => JSX.Element;
+
+export declare interface CodeScriptEditorButtonProps {
+    initialCode?: string;
+    onCodeSave?: (newCode: string) => void;
+    language?: string;
+    buttonText?: string;
+    modalTitle?: string;
+    buttonProps?: React.ComponentProps<typeof Button>;
+    modalProps?: Omit<React.ComponentProps<typeof Modal>, "isOpen" | "onConfirm" | "onClose">;
+    disabled?: boolean;
+    isEditMode?: boolean;
+}
+
+/**
+ * Color mapping configuration
+ */
+export declare interface ColorMapping {
+    /** Type of mapping: data-driven or static */
+    type: "static" | "continuous" | "categorical";
+    /** Static color value (for type: "static") */
+    value?: string;
+    /** Data field to map (for type: "continuous" | "categorical") */
+    field?: string;
+    /** Color scale for continuous mapping */
+    colorScale?: string | Array<[number, string]>;
+    /** Discrete colors for categorical mapping */
+    categoryColors?: Record<string, string>;
+    /** Min/max values for continuous mapping (auto-calculated if not provided) */
+    min?: number;
+    max?: number;
+}
+
+/**
+ * Centralized color tokens that map to CSS variables
+ * This provides TypeScript support while leveraging CSS custom properties
+ */
+export declare const COLORS: {
+    readonly BLACK_50: string;
+    readonly BLACK_100: string;
+    readonly BLACK_200: string;
+    readonly BLACK_300: string;
+    readonly BLACK_400: string;
+    readonly BLACK_500: string;
+    readonly BLACK_600: string;
+    readonly BLACK_700: string;
+    readonly BLACK_800: string;
+    readonly BLACK_900: string;
+    readonly BLACK: string;
+    readonly BLACK_OPACITY_20: "rgba(26, 26, 26, 0.2)";
+    readonly WHITE_50: string;
+    readonly WHITE_100: string;
+    readonly WHITE_200: string;
+    readonly WHITE_300: string;
+    readonly WHITE_400: string;
+    readonly WHITE_500: string;
+    readonly WHITE_600: string;
+    readonly WHITE_700: string;
+    readonly WHITE_800: string;
+    readonly WHITE_900: string;
+    readonly WHITE: string;
+    readonly BLUE_50: string;
+    readonly BLUE_100: string;
+    readonly BLUE_200: string;
+    readonly BLUE_300: string;
+    readonly BLUE_400: string;
+    readonly BLUE_500: string;
+    readonly BLUE_600: string;
+    readonly BLUE_700: string;
+    readonly BLUE_800: string;
+    readonly BLUE_900: string;
+    readonly BLUE: string;
+    readonly GREY_50: string;
+    readonly GREY_100: string;
+    readonly GREY_200: string;
+    readonly GREY_300: string;
+    readonly GREY_400: string;
+    readonly GREY_500: string;
+    readonly GREY_600: string;
+    readonly GREY_700: string;
+    readonly GREY_800: string;
+    readonly GREY_900: string;
+    readonly GREY: string;
+    readonly ORANGE: string;
+    readonly RED: string;
+    readonly GREEN: string;
+    readonly YELLOW: string;
+    readonly PURPLE: string;
+    readonly GREEN_BG: string;
+    readonly GREEN_SUCCESS: string;
+    readonly ORANGE_BG: string;
+    readonly ORANGE_CAUTION: string;
+    readonly RED_BG: string;
+    readonly RED_ERROR: string;
+    readonly GRAPH_SECONDARY_BROWN: string;
+    readonly GRAPH_SECONDARY_PINK: string;
+    readonly GRAPH_SECONDARY_TEAL: string;
+    readonly GRAPH_SECONDARY_DARK_BLUE: string;
+    readonly GRAPH_SECONDARY_BLACK: string;
+    readonly GRAPH_SECONDARY_GREY: string;
+};
+
+/**
+ * Color scale definition for the heatmap visualization mode.
+ *
+ * Can be:
+ * - A named Plotly colorscale (e.g., "Viridis", "Blues", "Hot")
+ * - An array of [position, color] tuples where position is 0-1
+ *
+ * @example
+ * // Named colorscale
+ * colorScale="Viridis"
+ *
+ * @example
+ * // Custom gradient
+ * colorScale={[
+ *   [0, "#313695"],   // Dark blue at min
+ *   [0.5, "#ffffbf"], // Yellow at midpoint
+ *   [1, "#a50026"],   // Dark red at max
+ * ]}
+ */
+export declare type ColorScale = string | Array<[number, string]>;
+
+export declare type ColorToken = keyof typeof COLORS;
+
+/** Common props shared by both search modes */
+declare interface CommonTdpSearchProps {
+    /** Default search term (default query) */
+    defaultQuery?: string;
+    /** Display fields/columns for the results table */
+    columns: TdpSearchColumn[];
+    /** UI filters displayed as dropdowns (for user selection) */
+    filters?: TdpSearchFilter[];
+    /** Default sort configuration (sort options) */
+    defaultSort?: TdpSearchSort;
+    /**
+     * Additional search parameters to pass to the SDK's searchEql method.
+     * Allows customization of expression, selectedPipelineIds, selectedSourceTypes, etc.
+     */
+    advancedSearchParams?: Partial<Omit<SearchEqlRequest, "searchTerm" | "from" | "size" | "sort" | "order">>;
+    /** Results per page. Defaults to 10 */
+    pageSize?: number;
+    /** Search input placeholder text */
+    searchPlaceholder?: string;
+    /** Custom CSS class */
+    className?: string;
+    /** Callback fired when search is executed with the query and results */
+    onSearch?: (query: SearchEqlRequest, results: SearchResult[]) => void;
+    /** Replace the entire search bar (input + button) */
+    renderSearchBar?: (props: TdpSearchBarRenderProps) => default_2.ReactNode;
+    /** Replace the filters row */
+    renderFilters?: (props: TdpFiltersRenderProps) => default_2.ReactNode;
+    /** Replace the results table (and pagination) */
+    renderResults?: (props: TdpResultsRenderProps) => default_2.ReactNode;
+}
+
+/**
+ * Default category colors (cycle through these)
+ */
+export declare const DEFAULT_CATEGORY_COLORS: string[];
+
+/**
+ * Default color scale for continuous color mapping
+ */
+export declare const DEFAULT_COLOR_SCALE: Array<[number, string]>;
+
+/**
+ * Default sizes
+ */
+export declare const DEFAULT_MARKER_SIZE = 8;
+
+/**
+ * Default downsampling configuration
+ */
+export declare const DEFAULT_MAX_POINTS = 5000;
+
+export declare const DEFAULT_SIZE_RANGE: [number, number];
+
+export declare const defaultTheme: Theme;
+
+export declare const DotPlot: default_2.FC<DotPlotProps>;
+
+export declare interface DotPlotDataSeries {
+    x: number[];
+    y: number[];
+    name: string;
+    color?: string;
+    symbol?: MarkerSymbol_2;
+    size?: number;
+}
+
+export declare type DotPlotProps = {
+    dataSeries: DotPlotDataSeries | DotPlotDataSeries[];
+    width?: number;
+    height?: number;
+    title?: string;
+    xTitle?: string;
+    yTitle?: string;
+    variant?: DotPlotVariant;
+    markerSize?: number;
+};
+
+export declare type DotPlotVariant = "default" | "stacked";
+
+/**
+ * Downsampling configuration for performance optimization
+ */
+export declare interface DownsamplingConfig {
+    /** Enable downsampling */
+    enabled: boolean;
+    /** Target number of points to display */
+    maxPoints?: number;
+    /** Downsampling strategy */
+    strategy?: "lttb";
+}
+
+export declare const Dropdown: default_2.FC<DropdownProps>;
+
+export declare interface DropdownOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+
+export declare interface DropdownProps {
+    options: DropdownOption[];
+    value?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    error?: boolean;
+    size?: DropdownSize;
+    onChange?: (value: string) => void;
+    onOpen?: () => void;
+    onClose?: () => void;
+    width?: string;
+    menuWidth?: string;
+}
+
+declare type DropdownSize = "xsmall" | "small";
+
+export declare const ErrorAlert: default_2.FC<ErrorAlertProps>;
+
+export declare interface ErrorAlertProps {
+    /** The error object to display. Can be Error, AxiosError, string, or any other type. */
+    error: unknown;
+    /** Optional title for the error alert. Defaults to 'An Error Occurred'. */
+    title?: default_2.ReactNode;
+    /** Optional callback function when the alert is closed. */
+    onClose?: () => void;
+    /** Set to true to show technical details expanded by default. Defaults to false. */
+    showDetailsDefault?: boolean;
+    /** Custom message to show when error is null/undefined (optional, component renders nothing by default) */
+    noErrorContent?: default_2.ReactNode;
+}
+
+export declare const FormField: ({ label, infoText, supportiveText, showSupportiveCheck, className, ref, ...inputProps }: FormFieldProps) => JSX.Element;
+
+export declare interface FormFieldProps extends Omit<InputProps, "className"> {
+    label: string;
+    infoText?: string;
+    supportiveText?: string;
+    showSupportiveCheck?: boolean;
+    className?: string;
+    ref?: default_2.Ref<HTMLInputElement>;
+}
+
+/**
+ * TDP Navigation Utilities
+ *
+ * Pure utility functions for constructing and navigating to TDP URLs.
+ * These work independently of React and can be used in any context.
+ *
+ * Data apps run inside iframes within TDP. These utilities help resolve
+ * the TDP base URL from the iframe context and construct navigation URLs.
+ */
+/**
+ * Extract the TDP base URL from `document.referrer`.
+ *
+ * In production, data apps run inside iframes within TDP. The browser
+ * provides `document.referrer` containing the parent TDP page URL.
+ * This function strips the known route path to get the base URL
+ * (origin + org slug path prefix).
+ *
+ * @example
+ * // referrer: "https://tetrascience-uat.com/my-org/data-workspace/abc"
+ * getTdpBaseUrlFromReferrer() // "https://tetrascience-uat.com/my-org"
+ *
+ * @returns The TDP base URL, or null if detection fails
+ */
+export declare function getTdpBaseUrlFromReferrer(): string | null;
+
+export declare const Heatmap: default_2.FC<HeatmapProps>;
+
+/**
+ * Props for the Heatmap component
+ * @deprecated Use PlateMap component instead. Heatmap is now a wrapper around PlateMap for backward compatibility.
+ */
+export declare interface HeatmapProps {
+    /** 2D array of numeric values */
+    data?: number[][];
+    /** Custom x-axis labels (column labels) */
+    xLabels?: string[] | number[];
+    /** Custom y-axis labels (row labels) */
+    yLabels?: string[] | number[];
+    /** Chart title */
+    title?: string;
+    /** X-axis title */
+    xTitle?: string;
+    /** Y-axis title */
+    yTitle?: string;
+    /** Color scale - string name or array of [position, color] pairs */
+    colorscale?: string | Array<[number, string]>;
+    /** Chart width in pixels */
+    width?: number;
+    /** Chart height in pixels */
+    height?: number;
+    /** Show color scale legend */
+    showScale?: boolean;
+    /** Number of decimal places for values */
+    precision?: number;
+    /** Minimum value for color scale */
+    zmin?: number;
+    /** Maximum value for color scale */
+    zmax?: number;
+    /** Value unit suffix */
+    valueUnit?: string;
+}
+
+export declare const Histogram: default_2.FC<HistogramProps>;
+
+export declare interface HistogramDataSeries {
+    x: number[];
+    name: string;
+    color?: string;
+    autobinx?: boolean;
+    xbins?: {
+        start: number;
+        end: number;
+        size: number;
+    };
+    opacity?: number;
+    showDistributionLine?: boolean;
+    lineWidth?: number;
+}
+
+export declare type HistogramProps = {
+    dataSeries: HistogramDataSeries | HistogramDataSeries[];
+    width?: number;
+    height?: number;
+    title?: string;
+    xTitle?: string;
+    yTitle?: string;
+    bargap?: number;
+    showDistributionLine?: boolean;
+};
+
+export declare const Icon: (props: IconsProps) => JSX.Element;
+
+export declare enum IconName {
+    BARS_3_BOTTOM_LEFT = "bars-3-bottom-left",
+    BUILDING = "building",
+    BULK_CHECK = "bulk-check",
+    CHECK = "check",
+    CHECK_CIRCLE = "check-circle",
+    CHECK_SQUARE = "check-square",
+    CHEVRON_DOWN = "chevron-down",
+    CLOSE = "close",
+    CODE = "code",
+    COMPUTER = "computer",
+    COPY = "copy",
+    CUBE = "cube",
+    DATABASE = "database",
+    EXCLAMATION_CIRCLE = "exclamation-circle",
+    EXCLAMATION_TRIANGLE = "exclamation-triangle",
+    GEAR = "gear",
+    GLobe = "globe",
+    HASHTAG = "hashtag",
+    HOME = "home",
+    INBOX = "inbox",
+    INFORMATION_CIRCLE = "information-circle",
+    INFORMATION_CIRCLE_MICRO = "information-circle-micro",
+    LAMP = "lamp",
+    LOCK_OPEN = "lock-open",
+    MINUS = "minus",
+    PAPER_PLANE = "paper-plane",
+    PENCIL = "pencil",
+    PIE_CHART = "pie-chart",
+    PIPELINE = "pipeline",
+    PLUS = "plus",
+    PROFILE = "profile",
+    QUESTION_CIRCLE = "question-circle",
+    ROCKET_LAUNCH = "rocket-launch",
+    SEARCH = "search",
+    SEARCH_DOCUMENT = "search-document",
+    SEARCH_SQL = "search-sql",
+    SITEMAP = "sitemap",
+    TETRASCIENCE_ICON = "tetrascience-icon",
+    TEXT = "text",
+    TRASH = "trash",
+    VIEWFINDER_CIRCLE = "viewfinder-circle"
+}
+
+export declare interface IconProps {
+    fill?: string;
+    width?: string;
+    height?: string;
+}
+
+export declare interface IconsProps {
+    fill?: string;
+    width?: string;
+    height?: string;
+    name: IconName;
+}
+
+export declare const Input: ({ size, iconLeft, iconRight, error, disabled, ref, ...rest }: InputProps) => JSX.Element;
+
+export declare interface InputProps extends Omit<default_2.InputHTMLAttributes<HTMLInputElement>, "size"> {
+    size?: InputSize;
+    iconLeft?: default_2.ReactNode;
+    iconRight?: default_2.ReactNode;
+    error?: boolean;
+    disabled?: boolean;
+    ref?: default_2.Ref<HTMLInputElement>;
+}
+
+declare type InputSize = "xsmall" | "small";
+
+/**
+ * InteractiveScatter component for visualizing scatter plot data with advanced interactions.
+ *
+ * **Features:**
+ * - Data-driven and static styling (color, shape, size)
+ * - Interactive selection (click, box, lasso)
+ * - Keyboard modifiers for click-selection modes (Shift/Ctrl)
+ * - Customizable tooltips with rich content support
+ * - Axis customization (ranges, log/linear scales)
+ * - Performance optimizations for large datasets
+ * - Selection propagation via callbacks
+ *
+ * **Selection Modes (click selection only):**
+ * - Default click: Replace selection
+ * - Shift + click: Add to selection
+ * - Ctrl/Cmd + click: Remove from selection
+ * - Shift + Ctrl + click: Toggle selection
+ *
+ * Box/lasso selection always replaces the current selection because
+ * Plotly does not expose the original keyboard event for drag operations.
+ */
+export declare const InteractiveScatter: default_2.FC<InteractiveScatterProps>;
+
+/**
+ * Props for InteractiveScatter component
+ */
+export declare interface InteractiveScatterProps {
+    /**
+     * Array of data points to plot
+     */
+    data: ScatterPoint[];
+    /**
+     * Chart title
+     */
+    title?: string;
+    /**
+     * X-axis configuration
+     */
+    xAxis?: AxisConfig;
+    /**
+     * Y-axis configuration
+     */
+    yAxis?: AxisConfig;
+    /**
+     * Color mapping configuration
+     */
+    colorMapping?: ColorMapping;
+    /**
+     * Shape mapping configuration
+     */
+    shapeMapping?: ShapeMapping;
+    /**
+     * Size mapping configuration
+     */
+    sizeMapping?: SizeMapping;
+    /**
+     * Tooltip configuration
+     */
+    tooltip?: TooltipConfig;
+    /**
+     * Enable click selection
+     * @default true
+     */
+    enableClickSelection?: boolean;
+    /**
+     * Enable box selection (drag to select rectangular region)
+     * @default true
+     */
+    enableBoxSelection?: boolean;
+    /**
+     * Enable lasso selection (freeform selection)
+     * @default true
+     */
+    enableLassoSelection?: boolean;
+    /**
+     * Controlled selection state.
+     * If provided, component operates in controlled mode.
+     */
+    selectedIds?: Set<string | number>;
+    /**
+     * Callback when selection changes
+     */
+    onSelectionChange?: (selectedIds: Set<string | number>, mode: SelectionMode_2) => void;
+    /**
+     * Callback when a point is clicked
+     */
+    onPointClick?: (point: ScatterPoint, event: MouseEvent) => void;
+    /**
+     * Downsampling configuration for large datasets
+     */
+    downsampling?: DownsamplingConfig;
+    /**
+     * Chart width in pixels
+     * @default 800
+     */
+    width?: number;
+    /**
+     * Chart height in pixels
+     * @default 600
+     */
+    height?: number;
+    /**
+     * Show the continuous color-scale bar when using a continuous `colorMapping`.
+     * Has no effect for categorical or static mappings.
+     * @default true
+     */
+    showColorBar?: boolean;
+    /**
+     * Custom CSS class name
+     */
+    className?: string;
+}
+
+export declare const Label: default_2.FC<LabelProps>;
+
+export declare interface LabelProps {
+    children: default_2.ReactNode;
+    infoText?: string;
+    className?: string;
+}
+
+export declare const LaunchContent: default_2.FC<LaunchContentProps>;
+
+export declare interface LaunchContentProps {
+    initialCode?: string;
+    onDeploy?: () => void;
+    versions?: string[];
+    currentVersion?: string;
+    onVersionChange?: (version: string) => void;
+}
+
+/**
+ * Configuration for auto-generated layers when using WellData with `values`.
+ *
+ * When wells have multiple values (via the `values` property), layers are
+ * auto-generated from the unique keys. Use LayerConfig to customize the
+ * display name, visualization mode, and color scale for each layer.
+ *
+ * @example
+ * // Configure layers for wells with { values: { "Raw": 100, "Normalized": 0.5 } }
+ * const layerConfigs: LayerConfig[] = [
+ *   { id: "Raw", name: "Raw Data", colorScale: "Blues" },
+ *   { id: "Normalized", name: "Normalized Values", valueMin: 0, valueMax: 1 },
+ * ];
+ */
+declare interface LayerConfig {
+    /** Layer ID (must match a key in WellData.values) */
+    id: string;
+    /** Display name for the layer (defaults to id if not provided) */
+    name?: string;
+    /** Visualization mode for this layer */
+    visualizationMode?: VisualizationMode;
+    /** Color scale for this layer (for heatmap mode) */
+    colorScale?: ColorScale;
+    /** Minimum value for color scaling */
+    valueMin?: number;
+    /** Maximum value for color scaling */
+    valueMax?: number;
+    /** Value unit suffix for tooltips and colorbar (e.g., "RFU", "%"). A space is automatically added before the unit. */
+    valueUnit?: string;
+    /**
+     * Custom colors for categorical visualization mode.
+     * Keys are category values (strings from `values`), values are hex colors.
+     * Merged with DEFAULT_CATEGORY_COLORS.
+     */
+    categoryColors?: Record<string, string>;
+}
+
+/**
+ * Configuration for legend styling and positioning.
+ *
+ * @example
+ * // Legend on the bottom with custom styling
+ * legendConfig={{
+ *   position: "bottom",
+ *   fontSize: 14,
+ *   itemSpacing: 12,
+ *   swatchSize: 20,
+ * }}
+ */
+declare interface LegendConfig {
+    /**
+     * Position of the legend relative to the plate.
+     * @default "right"
+     */
+    position?: LegendPosition;
+    /**
+     * Font size for legend labels in pixels.
+     * @default 12
+     */
+    fontSize?: number;
+    /**
+     * Spacing between legend items in pixels.
+     * @default 4
+     */
+    itemSpacing?: number;
+    /**
+     * Size of the color swatch in pixels.
+     * @default 16
+     */
+    swatchSize?: number;
+    /**
+     * Title to display above the legend.
+     */
+    title?: string;
+}
+
+/**
+ * Position for the legend display.
+ * - `"right"`: Legend appears to the right of the plate (default)
+ * - `"bottom"`: Legend appears below the plate
+ * - `"left"`: Legend appears to the left of the plate
+ * - `"top"`: Legend appears above the plate
+ */
+declare type LegendPosition = "right" | "bottom" | "left" | "top";
+
+export declare interface LineDataSeries {
+    x: number[];
+    y: number[];
+    name: string;
+    color: string;
+    symbol?: MarkerSymbol;
+    error_y?: {
+        type: "data";
+        array: number[];
+        visible: boolean;
+    };
+}
+
+export declare const LineGraph: default_2.FC<LineGraphProps>;
+
+export declare type LineGraphProps = {
+    dataSeries: LineDataSeries[];
+    width?: number;
+    height?: number;
+    xRange?: [number, number];
+    yRange?: [number, number];
+    variant?: LineGraphVariant;
+    xTitle?: string;
+    yTitle?: string;
+    title?: string;
+};
+
+export declare type LineGraphVariant = "lines" | "lines+markers" | "lines+markers+error_bars";
+
+export declare const Main: default_2.FC<MainProps>;
+
+export declare interface MainProps {
+    userProfile: {
+        name: string;
+        avatar?: string;
+    };
+    hostname: string;
+    organization: {
+        name: string;
+        subtext?: string;
+        logo?: default_2.ReactNode;
+    };
+}
+
+export declare const MarkdownDisplay: ({ markdown, codeRenderer }: MarkdownDisplayProps) => JSX.Element;
+
+export declare type MarkdownDisplayProps = {
+    markdown: string;
+    codeRenderer?: (props: CodeComponentProps) => default_2.ReactElement;
+};
+
+/**
+ * Marker shape for scatter points
+ */
+export declare type MarkerShape = "circle" | "square" | "diamond" | "cross" | "x" | "triangle-up" | "triangle-down" | "star";
+
+export declare type MarkerSymbol = "circle" | "circle-open" | "circle-dot" | "circle-open-dot" | "square" | "square-open" | "square-dot" | "square-open-dot" | "diamond" | "diamond-open" | "diamond-dot" | "diamond-open-dot" | "cross" | "cross-open" | "cross-dot" | "cross-open-dot" | "x" | "x-open" | "x-dot" | "x-open-dot" | "triangle-up" | "triangle-up-open" | "triangle-up-dot" | "triangle-up-open-dot" | "triangle-down" | "triangle-down-open" | "triangle-down-dot" | "triangle-down-open-dot" | "triangle-left" | "triangle-left-open" | "triangle-left-dot" | "triangle-left-open-dot" | "triangle-right" | "triangle-right-open" | "triangle-right-dot" | "triangle-right-open-dot" | "triangle-ne" | "triangle-ne-open" | "triangle-ne-dot" | "triangle-ne-open-dot" | "triangle-se" | "triangle-se-open" | "triangle-se-dot" | "triangle-se-open-dot" | "triangle-sw" | "triangle-sw-open" | "triangle-sw-dot" | "triangle-sw-open-dot" | "triangle-nw" | "triangle-nw-open" | "triangle-nw-dot" | "triangle-nw-open-dot" | "pentagon" | "pentagon-open" | "pentagon-dot" | "pentagon-open-dot" | "hexagon" | "hexagon-open" | "hexagon-dot" | "hexagon-open-dot" | "hexagon2" | "hexagon2-open" | "hexagon2-dot" | "hexagon2-open-dot" | "octagon" | "octagon-open" | "octagon-dot" | "octagon-open-dot" | "star" | "star-open" | "star-dot" | "star-open-dot" | "hexagram" | "hexagram-open" | "hexagram-dot" | "hexagram-open-dot" | "star-triangle-up" | "star-triangle-up-open" | "star-triangle-up-dot" | "star-triangle-up-open-dot" | "star-triangle-down" | "star-triangle-down-open" | "star-triangle-down-dot" | "star-triangle-down-open-dot" | "star-square" | "star-square-open" | "star-square-dot" | "star-square-open-dot" | "star-diamond" | "star-diamond-open" | "star-diamond-dot" | "star-diamond-open-dot" | "diamond-tall" | "diamond-tall-open" | "diamond-tall-dot" | "diamond-tall-open-dot" | "diamond-wide" | "diamond-wide-open" | "diamond-wide-dot" | "diamond-wide-open-dot" | "hourglass" | "hourglass-open" | "bowtie" | "bowtie-open" | "circle-cross" | "circle-cross-open" | "circle-x" | "circle-x-open" | "square-cross" | "square-cross-open" | "square-x" | "square-x-open" | "diamond-cross" | "diamond-cross-open" | "diamond-x" | "diamond-x-open" | "cross-thin" | "cross-thin-open" | "x-thin" | "x-thin-open" | "asterisk" | "asterisk-open" | "hash" | "hash-open" | "hash-dot" | "hash-open-dot" | "y-up" | "y-up-open" | "y-down" | "y-down-open" | "y-left" | "y-left-open" | "y-right" | "y-right-open" | "line-ew" | "line-ew-open" | "line-ns" | "line-ns-open" | "line-ne" | "line-ne-open" | "line-nw" | "line-nw-open" | "arrow" | "arrow-open" | "arrow-wide" | "arrow-wide-open";
+
+declare type MarkerSymbol_2 = "circle" | "square" | "diamond" | "triangle-up" | "triangle-down" | "star";
+
+export declare const Menu: default_2.FC<MenuProps>;
+
+export declare const MenuItem: ({ label, checked, showCheckbox, onClick, onCheckChange, active, className, ref, }: MenuItemProps) => JSX.Element;
+
+declare interface MenuItemData extends Omit<MenuItemProps, "onClick" | "onCheckChange"> {
+    id: string;
+}
+
+export declare interface MenuItemProps {
+    label: string;
+    checked?: boolean;
+    showCheckbox?: boolean;
+    onClick?: () => void;
+    onCheckChange?: (checked: boolean) => void;
+    active?: boolean;
+    className?: string;
+    ref?: default_2.Ref<HTMLDivElement>;
+}
+
+export declare interface MenuProps {
+    title?: string;
+    items: MenuItemData[];
+    onItemClick?: (itemId: string) => void;
+    onItemCheckChange?: (itemId: string, checked: boolean) => void;
+    activeItemId?: string | null;
+    className?: string;
+}
+
+export declare const Modal: ({ isOpen, onClose, onCloseLabel, onConfirm, onConfirmLabel, children, width, className, hideActions, title, }: ModalProps) => false | JSX.Element;
+
+export declare interface ModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onCloseLabel?: string;
+    onConfirm: () => void;
+    onConfirmLabel?: string;
+    children: ReactNode;
+    width?: string;
+    className?: string;
+    hideActions?: boolean;
+    title?: string;
+}
+
+export declare const Navbar: default_2.FC<NavbarProps>;
+
+export declare interface NavbarProps {
+    organization: OrganizationInfo;
+}
+
+/**
+ * Navigate to a TDP URL.
+ *
+ * - `{ newTab: true }` opens the URL in a new browser tab.
+ * - Default: sends a `postMessage` to the parent TDP frame (same-tab navigation
+ *   when inside an iframe), or navigates the current window (standalone).
+ *
+ * @param url - Full TDP URL to navigate to
+ * @param options - Navigation options
+ */
+export declare function navigateToTdpUrl(url: string, options?: TdpNavigationOptions): void;
+
+declare interface OrganizationInfo {
+    name: string;
+    subtext?: string;
+    logo?: default_2.ReactNode;
+}
+
+/**
+ * Peak annotation for labeling peaks on the chromatogram.
+ * Used for both user-provided annotations and auto-detected peaks.
+ */
+export declare interface PeakAnnotation {
+    /** 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;
+    /* Excluded from this release type: _computed */
+}
+
+/* Excluded from this release type: PeakComputedFields */
+
+export declare interface PeakData {
+    position: number;
+    base?: string;
+    peakA: number;
+    peakT: number;
+    peakG: number;
+    peakC: number;
+}
+
+/**
+ * Peak detection algorithm options
+ */
+export declare 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;
+}
+
+export declare const PieChart: default_2.FC<PieChartProps>;
+
+export declare type PieChartProps = {
+    dataSeries: PieDataSeries;
+    width?: number;
+    height?: number;
+    title?: string;
+    textInfo?: PieTextInfo;
+    hole?: number;
+    rotation?: number;
+};
+
+export declare interface PieDataSeries {
+    labels: string[];
+    values: number[];
+    name: string;
+    colors?: string[];
+}
+
+export declare type PieTextInfo = "none" | "label" | "percent" | "value" | "label+percent" | "label+value" | "value+percent" | "label+value+percent";
+
+declare const PLATE_FORMAT_1536: "1536";
+
+declare const PLATE_FORMAT_384: "384";
+
+/**
+ * Plate format string constants for standard microplate configurations.
+ */
+declare const PLATE_FORMAT_96: "96";
+
+declare const PLATE_FORMAT_CUSTOM: "custom";
+
+/**
+ * Plate format presets for standard microplate configurations.
+ * - `"96"`: 8 rows × 12 columns (wells A1-H12)
+ * - `"384"`: 16 rows × 24 columns (wells A1-P24)
+ * - `"1536"`: 32 rows × 48 columns (wells A1-AF48)
+ * - `"custom"`: User-defined dimensions via `rows` and `columns` props
+ */
+export declare type PlateFormat = typeof PLATE_FORMAT_96 | typeof PLATE_FORMAT_384 | typeof PLATE_FORMAT_1536 | typeof PLATE_FORMAT_CUSTOM;
+
+/**
+ * PlateMap component for visualizing well plate data as a heatmap or categorical display.
+ *
+ * **Supported Plate Formats:**
+ * - 96-well (8 rows × 12 columns, wells A1-H12)
+ * - 384-well (16 rows × 24 columns, wells A1-P24)
+ * - 1536-well (32 rows × 48 columns, wells A1-AF48)
+ * - Custom dimensions with user-specified rows/columns
+ *
+ * **Visualization Modes:**
+ * - `"heatmap"`: Continuous color gradient for quantitative values
+ * - `"categorical"`: Discrete colors for well types (sample, control, empty)
+ *
+ * **Features:**
+ * - Multiple data layers with independent visualization settings
+ * - Control region highlighting with borders and fill colors
+ * - Configurable color scales, tooltips, and click interactions
+ * - Support for WellData arrays with multi-layer visualization
+ *
+ * **Data Format:**
+ * - **WellData array**: `[{ wellId: "A1", values: { RFU: 100 }, tooltipData: {...} }, ...]`
+ *
+ */
+export declare const PlateMap: default_2.FC<PlateMapProps>;
+
+/**
+ * Props for PlateMap component
+ */
+export declare interface PlateMapProps {
+    /**
+     * Well data array as WellData objects with wellId and values.
+     *
+     * If wells have multiple values (via `values` property), layers are
+     * auto-generated for each unique key, enabling layer toggling.
+     */
+    data?: WellData[];
+    /**
+     * Configuration for auto-generated layers when using WellData with `values`.
+     * Use this to customize display names, colors, and ranges for each layer.
+     * Only used when `data` contains wells with `values` property.
+     */
+    layerConfigs?: LayerConfig[];
+    /**
+     * Initial layer ID to display when the component mounts.
+     * If not provided, defaults to the first layer.
+     */
+    initialLayerId?: string;
+    /**
+     * Optional callback notified when the active layer changes.
+     * This is purely informational - the component manages layer state internally.
+     * Use this for logging, analytics, or syncing with external state.
+     */
+    onLayerChange?: (layerId: string) => void;
+    /** Plate format preset (default: "96") */
+    plateFormat?: PlateFormat;
+    /** Number of rows for custom format (default: 8 for 96-well, 16 for 384-well) */
+    rows?: number;
+    /** Number of columns for custom format (default: 12 for 96-well, 24 for 384-well) */
+    columns?: number;
+    /**
+     * Visualization mode (default: "heatmap")
+     * - "heatmap": Display quantitative values with color gradient
+     * - "categorical": Display well types with discrete colors
+     */
+    visualizationMode?: VisualizationMode;
+    /**
+     * Custom colors for categorical visualization mode.
+     * Keys are well types, values are hex colors.
+     * Merged with DEFAULT_CATEGORY_COLORS.
+     */
+    categoryColors?: Record<string, string>;
+    /**
+     * Regions to highlight on the plate (e.g., controls, sample areas, empty wells).
+     * Each region can specify wells and styling for visual distinction.
+     */
+    regions?: PlateRegion[];
+    /** Chart title */
+    title?: string;
+    /** X-axis title (e.g., "Columns") */
+    xTitle?: string;
+    /** Y-axis title (e.g., "Rows") */
+    yTitle?: string;
+    /** Custom x-axis labels (overrides auto-generated column numbers) */
+    xLabels?: string[] | number[];
+    /** Custom y-axis labels (overrides auto-generated row letters) */
+    yLabels?: string[] | number[];
+    /** Color scale for the heatmap (only used in heatmap mode) */
+    colorScale?: ColorScale;
+    /** Minimum value for color scale (auto-calculated if not provided) */
+    valueMin?: number;
+    /** Maximum value for color scale (auto-calculated if not provided) */
+    valueMax?: number;
+    /** Color for empty/null wells (default: "#f0f0f0") */
+    emptyWellColor?: string;
+    /** Show color bar legend for heatmap mode (default: true) */
+    showColorBar?: boolean;
+    /** Show categorical legend for categorical mode (default: true) */
+    showLegend?: boolean;
+    /**
+     * Configuration for legend positioning and styling.
+     * Applies to both heatmap colorbar and categorical legend.
+     *
+     * @example
+     * // Position legend at bottom with larger text
+     * legendConfig={{ position: "bottom", fontSize: 14 }}
+     */
+    legendConfig?: LegendConfig;
+    /** Chart width in pixels (default: 800) */
+    width?: number;
+    /** Chart height in pixels (default: 500) */
+    height?: number;
+    /** Number of decimal places for values (default: 0) */
+    precision?: number;
+    /**
+     * Marker shape for wells (default: "circle")
+     * - "circle": Round markers, ideal for plate-based data
+     * - "square": Square markers, ideal for generic heatmaps
+     */
+    markerShape?: "circle" | "square";
+    /**
+     * Callback when a well/cell is clicked.
+     * @param wellData - The full well data object including wellId, values, and tooltipData
+     */
+    onWellClick?: (wellData: WellData) => void;
+}
+
+/**
+ * A region to highlight on the plate (e.g., controls, sample areas, empty wells)
+ */
+declare interface PlateRegion {
+    /** Unique identifier for the region */
+    id: string;
+    /** Display name for the region (shown in legend) */
+    name: string;
+    /**
+     * Wells included in this region using range notation.
+     * Format: "StartWell:EndWell" (e.g., "A1:B6" for a rectangular block from A1 to B6)
+     */
+    wells: string;
+    /** Border color for the region highlight */
+    borderColor?: string;
+    /** Border width in pixels (default: 2) */
+    borderWidth?: number;
+    /** Optional fill color with transparency (e.g., "rgba(255, 0, 0, 0.1)") */
+    fillColor?: string;
+}
+
+/**
+ * Constants for plot layout
+ */
+export declare const PLOT_CONSTANTS: {
+    MARGIN_LEFT: number;
+    MARGIN_RIGHT: number;
+    MARGIN_TOP: number;
+    MARGIN_BOTTOM: number;
+    TITLE_FONT_SIZE: number;
+    AXIS_TITLE_FONT_SIZE: number;
+    AXIS_TICK_FONT_SIZE: number;
+    LEGEND_FONT_SIZE: number;
+    FONT_FAMILY: string;
+    GRID_WIDTH: number;
+    AXIS_LINE_WIDTH: number;
+    AUTO_RANGE_PADDING: number;
+};
+
+export declare const PopConfirm: default_2.FC<PopConfirmProps>;
+
+declare type PopConfirmPlacement = "top" | "left" | "right" | "bottom" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight" | "leftTop" | "leftBottom" | "rightTop" | "rightBottom";
+
+export declare interface PopConfirmProps {
+    title?: ReactNode;
+    description?: ReactNode;
+    onConfirm?: (e?: default_2.MouseEvent<HTMLElement>) => void;
+    onCancel?: (e?: default_2.MouseEvent<HTMLElement>) => void;
+    okText?: string;
+    cancelText?: string;
+    placement?: PopConfirmPlacement;
+    children: ReactNode;
+    className?: string;
+    okButtonProps?: default_2.ButtonHTMLAttributes<HTMLButtonElement>;
+    cancelButtonProps?: default_2.ButtonHTMLAttributes<HTMLButtonElement>;
+}
+
+export declare const ProtocolConfiguration: default_2.FC<ProtocolConfigurationProps>;
+
+export declare interface ProtocolConfigurationProps {
+    className?: string;
+}
+
+export declare const ProtocolYamlCard: default_2.FC<ProtocolYamlCardProps>;
+
+export declare interface ProtocolYamlCardProps {
+    title: string;
+    newVersionMode: boolean;
+    onToggleNewVersionMode: (checked: boolean) => void;
+    versionOptions: DropdownOption[];
+    selectedVersion: string;
+    onVersionChange: (value: string) => void;
+    onDeploy: () => void;
+    yaml: string;
+    onYamlChange: (value: string) => void;
+}
+
+export declare const PythonEditorModal: default_2.FC<PythonEditorModalProps>;
+
+export declare interface PythonEditorModalProps {
+    open: boolean;
+    initialValue?: string;
+    title?: string;
+    onSave: (value: string) => void;
+    onCancel: () => void;
+}
+
+/**
+ * Scale type for axes
+ */
+export declare type ScaleType = "linear" | "log";
+
+export declare interface ScatterDataPoint {
+    x: number;
+    y: number;
+    additionalInfo?: Record<string, string | number>;
+}
+
+export declare interface ScatterDataSeries {
+    x: number[];
+    y: number[];
+    name: string;
+    color: string;
+}
+
+export declare const ScatterGraph: default_2.FC<ScatterGraphProps>;
+
+export declare interface ScatterGraphProps {
+    dataSeries: ScatterDataSeries[];
+    width?: number;
+    height?: number;
+    xRange?: [number, number];
+    yRange?: [number, number];
+    xTitle?: string;
+    yTitle?: string;
+    title?: string;
+}
+
+/**
+ * A single data point in the scatter plot
+ */
+export declare interface ScatterPoint {
+    /** Unique identifier for the point */
+    id: string | number;
+    /** X-axis value */
+    x: number;
+    /** Y-axis value */
+    y: number;
+    /** Optional label for the point */
+    label?: string;
+    /** Additional metadata for tooltips and styling */
+    metadata?: Record<string, unknown>;
+}
+
+/** Transformed search result (flattened from Elasticsearch hit format) */
+export declare interface SearchResult {
+    id: string;
+    _score?: number | null;
+    [key: string]: any;
+}
+
+export declare const SelectField: ({ label, infoText, supportiveText, showSupportiveCheck, className, ref, ...dropdownProps }: SelectFieldProps) => JSX.Element;
+
+export declare interface SelectFieldProps extends Omit<DropdownProps, "className"> {
+    label: string;
+    infoText?: string;
+    supportiveText?: string;
+    showSupportiveCheck?: boolean;
+    className?: string;
+    ref?: default_2.Ref<HTMLDivElement>;
+}
+
+/**
+ * Selection mode keyboard modifiers
+ */
+export declare const SELECTION_MODIFIERS: {
+    readonly ADD: "shiftKey";
+    readonly REMOVE: "ctrlKey";
+    readonly TOGGLE: "both";
+};
+
+/**
+ * Data format for selection propagation between components
+ */
+export declare interface SelectionEvent {
+    /** Array of selected point IDs */
+    selectedIds: Set<string | number>;
+    /** Selection mode used */
+    mode: SelectionMode_2;
+    /** Source component identifier (optional) */
+    source?: string;
+}
+
+/**
+ * Selection mode for interactive selection
+ */
+declare type SelectionMode_2 = "replace" | "add" | "remove" | "toggle";
+export { SelectionMode_2 as SelectionMode }
+
+/**
+ * Selection state
+ */
+export declare interface SelectionState {
+    /** Array of selected point IDs */
+    selectedIds: Set<string | number>;
+}
+
+/**
+ * Shape mapping configuration
+ */
+export declare interface ShapeMapping {
+    /** Type of mapping: data-driven or static */
+    type: "static" | "categorical";
+    /** Static shape value (for type: "static") */
+    value?: MarkerShape;
+    /** Data field to map (for type: "categorical") */
+    field?: string;
+    /** Shape mapping for categorical values */
+    categoryShapes?: Record<string, MarkerShape>;
+}
+
+export declare const Sidebar: default_2.FC<SidebarProps>;
+
+declare interface SidebarItemProps {
+    icon: IconName;
+    label: string;
+    active?: boolean;
+    onClick?: () => void;
+}
+
+export declare interface SidebarProps {
+    items: SidebarItemProps[];
+    activeItem?: string;
+    onItemClick?: (label: string) => void;
+}
+
+/**
+ * Size mapping configuration
+ */
+export declare interface SizeMapping {
+    /** Type of mapping: data-driven or static */
+    type: "static" | "continuous" | "categorical";
+    /** Static size value (for type: "static") */
+    value?: number;
+    /** Data field to map (for type: "continuous" | "categorical") */
+    field?: string;
+    /** Size range for continuous mapping */
+    sizeRange?: [number, number];
+    /** Discrete sizes for categorical mapping */
+    categorySizes?: Record<string, number>;
+    /** Min/max values for continuous mapping (auto-calculated if not provided) */
+    min?: number;
+    max?: number;
+}
+
+export declare const SupportiveText: default_2.FC<SupportiveTextProps>;
+
+export declare interface SupportiveTextProps {
+    children: default_2.ReactNode;
+    showCheck?: boolean;
+    className?: string;
+}
+
+export declare const Tab: default_2.FC<TabProps>;
+
+export declare const TabGroup: default_2.FC<TabGroupProps>;
+
+export declare interface TabGroupProps {
+    tabs: TabItem[];
+    activeTab?: string;
+    onChange?: (tabId: string) => void;
+    disabled?: boolean;
+    size?: TabSize;
+}
+
+declare interface TabItem extends Omit<TabProps, "active" | "onClick"> {
+    id: string;
+}
+
+export declare function Table<T extends Record<string, any>>({ columns, data, pageSize, rowKey, selectable, onRowSelect, sortKey: controlledSortKey, sortDirection: controlledSortDirection, onSort: controlledOnSort, currentPage: controlledCurrentPage, onPageChange: controlledOnPageChange, totalItems, selectedRows: controlledSelectedRows, className, }: TableProps<T>): JSX.Element;
+
+export declare namespace Table {
+    var displayName: string;
+}
+
+export declare const TableCell: ({ children, align, width, className, ref, ...props }: TableCellProps) => JSX.Element;
+
+export declare interface TableCellProps extends default_2.TdHTMLAttributes<HTMLTableCellElement> {
+    children?: default_2.ReactNode;
+    align?: "left" | "center" | "right";
+    width?: string;
+    className?: string;
+    ref?: default_2.Ref<HTMLTableCellElement>;
+}
+
+export declare interface TableColumn<T = any> {
+    key: string;
+    header: string;
+    sortable?: boolean;
+    filterable?: boolean;
+    filterOptions?: DropdownOption[];
+    width?: string;
+    align?: "left" | "center" | "right";
+    render?: (value: any, row: T, index: number) => default_2.ReactNode;
+}
+
+export declare const TableHeaderCell: ({ children, sortable, sortDirection, onSort, filterable, filterOptions, filterValue, onFilterChange, width, className, ref, ...props }: TableHeaderCellProps) => JSX.Element;
+
+export declare interface TableHeaderCellProps extends default_2.ThHTMLAttributes<HTMLTableCellElement> {
+    children?: default_2.ReactNode;
+    sortable?: boolean;
+    sortDirection?: "asc" | "desc" | null;
+    onSort?: () => void;
+    filterable?: boolean;
+    filterOptions?: DropdownOption[];
+    filterValue?: string;
+    onFilterChange?: (value: string) => void;
+    width?: string;
+    className?: string;
+    ref?: default_2.Ref<HTMLTableCellElement>;
+}
+
+export declare interface TableProps<T = any> {
+    columns: TableColumn<T>[];
+    data: T[];
+    pageSize?: number;
+    rowKey?: keyof T | ((row: T) => string | number);
+    selectable?: boolean;
+    onRowSelect?: (selectedRows: T[]) => void;
+    sortKey?: string;
+    sortDirection?: "asc" | "desc";
+    onSort?: (key: string, direction: "asc" | "desc") => void;
+    currentPage?: number;
+    onPageChange?: (page: number) => void;
+    totalItems?: number;
+    selectedRows?: T[];
+    className?: string;
+}
+
+export declare interface TabProps {
+    label: string;
+    active?: boolean;
+    disabled?: boolean;
+    size?: TabSize;
+    onClick?: () => void;
+}
+
+export declare type TabSize = "small" | "medium";
+
+/** Props passed to the renderFilters render prop */
+export declare interface TdpFiltersRenderProps {
+    filters: TdpSearchFilter[];
+    filterValues: Record<string, string>;
+    onFilterChange: (key: string, value: string) => void;
+}
+
+/**
+ * A link component that navigates to TDP pages.
+ *
+ * Renders a standard `<a>` tag with the correct href for right-click
+ * "Open in new tab" support, accessibility, and SEO.
+ *
+ * Must be used inside a `<TdpNavigationProvider>`.
+ *
+ * @example
+ * ```tsx
+ * import { TDPLink, tdpPaths } from '@tetrascience-npm/tetrascience-react-ui';
+ *
+ * <TDPLink path={tdpPaths.fileDetails("abc-123")}>
+ *   View File Details
+ * </TDPLink>
+ *
+ * <TDPLink path="/search?q=test" navigationOptions={{ newTab: false }}>
+ *   Search in TDP (same tab)
+ * </TDPLink>
+ * ```
+ */
+export declare const TDPLink: default_2.FC<TDPLinkProps>;
+
+/** Props for the TDPLink component */
+export declare interface TDPLinkProps extends Omit<default_2.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'> {
+    /** TDP page path (e.g., "/file/abc-123" or use tdpPaths helpers) */
+    path: string;
+    /** Navigation behavior. Default: { newTab: true } */
+    navigationOptions?: TdpNavigationOptions;
+    children: default_2.ReactNode;
+    ref?: default_2.Ref<HTMLAnchorElement>;
+}
+
+export declare const TdpNavigationContext: default_2.Context<TdpNavigationContextValue | null>;
+
+export declare interface TdpNavigationContextValue {
+    /** The resolved TDP base URL (origin + org path prefix), or null if not resolved */
+    tdpBaseUrl: string | null;
+    /** Construct a full TDP URL from a path. Returns null if base URL is not resolved. */
+    getTdpUrl: (path: string) => string | null;
+    /** Navigate to a TDP page. */
+    navigateToTdp: (path: string, options?: TdpNavigationOptions) => void;
+}
+
+export declare interface TdpNavigationOptions {
+    /** Open in a new tab instead of navigating the parent TDP frame. Default: false */
+    newTab?: boolean;
+}
+
+/**
+ * Provider that resolves the TDP base URL and exposes navigation helpers.
+ *
+ * Resolution order:
+ * 1. Explicit `tdpBaseUrl` prop (if provided)
+ * 2. `document.referrer` parsing (production iframe)
+ *
+ * @example
+ * ```tsx
+ * <TdpNavigationProvider tdpBaseUrl="https://tetrascience.com/my-org">
+ *   <App />
+ * </TdpNavigationProvider>
+ * ```
+ */
+export declare const TdpNavigationProvider: default_2.FC<TdpNavigationProviderProps>;
+
+/** Props for the TdpNavigationProvider component */
+export declare interface TdpNavigationProviderProps {
+    /**
+     * Explicit TDP base URL override. Skips auto-detection when provided.
+     */
+    tdpBaseUrl?: string;
+    children: default_2.ReactNode;
+}
+
+/**
+ * Convenience helpers for constructing common TDP page paths.
+ * Returns path strings for use with `getTdpUrl()` or `buildTdpUrl()`.
+ *
+ * @example
+ * const { getTdpUrl } = useTdpNavigation();
+ * const url = getTdpUrl(tdpPaths.fileDetails("abc-123"));
+ */
+export declare const tdpPaths: {
+    fileDetails: (fileId: string) => string;
+    pipelineEdit: (pipelineId: string) => string;
+    pipelineDetails: (pipelineId: string) => string;
+    search: (query?: string) => string;
+    dataWorkspace: () => string;
+    dataApps: () => string;
+    artifact: (type: string, namespace: string, slug: string) => string;
+};
+
+/** Props passed to the renderResults render prop */
+export declare interface TdpResultsRenderProps {
+    results: SearchResult[];
+    total: number;
+    currentPage: number;
+    pageSize: number;
+    columns: TdpSearchColumn[];
+    onPageChange: (page: number) => void;
+    sortKey: string | null;
+    sortDirection: "asc" | "desc";
+    onSort: (key: string, direction: "asc" | "desc") => void;
+}
+
+/**
+ * TdpSearch Component
+ *
+ * A reusable search component for querying the TDP.
+ *
+ * @example
+ * ```tsx
+ * <TdpSearch
+ *   columns={[
+ *     { key: "id", header: "ID" },
+ *     { key: "filePath", header: "File Path", sortable: true }
+ *   ]}
+ *   defaultQuery="sample-data"
+ *   pageSize={20}
+ * />
+ * ```
+ */
+export declare const TdpSearch: default_2.FC<TdpSearchProps>;
+
+/** Props passed to the renderSearchBar render prop */
+export declare interface TdpSearchBarRenderProps {
+    query: string;
+    setQuery: (query: string) => void;
+    onSearch: () => void;
+    isLoading: boolean;
+    placeholder: string;
+}
+
+/** Configuration for column display */
+export declare interface TdpSearchColumn {
+    key: string;
+    header: string;
+    sortable?: boolean;
+    width?: string;
+    align?: "left" | "center" | "right";
+    render?: (value: any, row: SearchResult, index: number) => default_2.ReactNode;
+}
+
+/** Search connection configuration */
+export declare interface TdpSearchConfig {
+    /**
+     * When true, calls the TDP API directly from the browser
+     * When false/omitted, proxies the request through your backend `apiEndpoint`
+     */
+    standalone?: boolean;
+    /** TDP API base URL (required when standalone is true) */
+    baseUrl?: string;
+    /** Backend API endpoint for search (used when standalone is false). Defaults to '/api/search' */
+    apiEndpoint?: string;
+    /** Common | authentication token */
+    authToken?: string;
+    /** Common | organization slug */
+    orgSlug?: string;
+}
+
+/** Configuration for a search filter */
+export declare interface TdpSearchFilter {
+    key: string;
+    label: string;
+    options: DropdownOption[];
+}
+
+export declare type TdpSearchProps = CommonTdpSearchProps & TdpSearchConfig;
+
+/** Sort configuration */
+export declare interface TdpSearchSort {
+    field: string;
+    order: "asc" | "desc";
+}
+
+export declare const Textarea: ({ size, error, disabled, fullWidth, rows, ref, ...rest }: TextareaProps) => JSX.Element;
+
+export declare interface TextareaProps extends Omit<default_2.TextareaHTMLAttributes<HTMLTextAreaElement>, "size"> {
+    size?: TextareaSize;
+    error?: boolean;
+    disabled?: boolean;
+    fullWidth?: boolean;
+    rows?: number;
+    ref?: default_2.Ref<HTMLTextAreaElement>;
+}
+
+declare type TextareaSize = "xsmall" | "small";
+
+export declare interface Theme {
+    colors?: ThemeColors;
+    radius?: ThemeRadius;
+    spacing?: ThemeSpacing;
+}
+
+/**
+ * Theme type definitions for TetraScience UI Kit
+ */
+export declare interface ThemeColors {
+    primary?: string;
+    primaryHover?: string;
+    primaryActive?: string;
+    background?: string;
+    text?: string;
+    border?: string;
+    cardBackground?: string;
+    cardBorder?: string;
+}
+
+/**
+ * ThemeProvider component that sets CSS custom properties for theming
+ *
+ * This provider merges the provided theme with the default theme and
+ * sets CSS variables on a wrapper element, making them available to both
+ * styled-components and SCSS styles within the provider's scope.
+ *
+ * @example
+ * ```tsx
+ * import { ThemeProvider, Button } from '@tetrascience-npm/tetrascience-react-ui';
+ *
+ * const customTheme = {
+ *   colors: {
+ *     primary: '#FF0000',
+ *   },
+ *   radius: {
+ *     medium: '12px',
+ *   }
+ * };
+ *
+ * <ThemeProvider theme={customTheme}>
+ *   <Button>Click me</Button>
+ * </ThemeProvider>
+ * ```
+ */
+export declare const ThemeProvider: default_2.FC<ThemeProviderProps>;
+
+export declare interface ThemeProviderProps {
+    theme?: Theme;
+    children: default_2.ReactNode;
+}
+
+export declare interface ThemeRadius {
+    small?: string;
+    medium?: string;
+    large?: string;
+}
+
+export declare interface ThemeSpacing {
+    small?: string;
+    medium?: string;
+    large?: string;
+}
+
+export declare const Toast: default_2.FC<ToastProps>;
+
+export declare interface ToastContainerProps {
+    position: ToastPosition;
+}
+
+export declare const ToastManager: default_2.FC<ToastManagerProps>;
+
+export declare interface ToastManagerProps {
+    position?: ToastPosition;
+}
+
+declare type ToastPosition = "top" | "bottom";
+
+export declare interface ToastProps {
+    type?: ToastType;
+    heading: string;
+    description?: string;
+    className?: string;
+}
+
+export declare type ToastType = "info" | "success" | "warning" | "danger" | "default";
+
+export declare const Toggle: default_2.FC<ToggleProps>;
+
+export declare interface ToggleProps {
+    checked?: boolean;
+    onChange?: (checked: boolean) => void;
+    disabled?: boolean;
+    label?: string;
+    className?: string;
+}
+
+export declare const Tooltip: default_2.FC<TooltipProps>;
+
+/**
+ * Tooltip configuration
+ */
+export declare interface TooltipConfig {
+    /** Enable/disable tooltips */
+    enabled?: boolean;
+    /** Custom tooltip content function */
+    content?: (point: ScatterPoint) => string;
+    /** Fields to display in default tooltip */
+    fields?: string[];
+}
+
+declare type TooltipPlacement = "top" | "right" | "bottom" | "left";
+
+export declare interface TooltipProps {
+    content: ReactNode;
+    children: ReactNode;
+    placement?: TooltipPlacement;
+    className?: string;
+    delay?: number;
+}
+
+declare interface UserProfileProps {
+    name: string;
+    avatar?: string;
+}
+
+export declare function useSearch(config: UseSearchConfig): UseSearchResult;
+
+export declare type UseSearchConfig = {
+    pageSize: number;
+} & TdpSearchConfig;
+
+export declare interface UseSearchResult {
+    results: SearchResult[];
+    total: number;
+    currentPage: number;
+    isLoading: boolean;
+    error: string | null;
+    executeSearch: (searchRequest: Omit<SearchEqlRequest, "from" | "size">, page?: number) => Promise<SearchResult[]>;
+}
+
+/**
+ * Standalone hook for TDP navigation (no provider required).
+ *
+ * For simple use cases where you don't need a TdpNavigationProvider.
+ * If multiple components need navigation, prefer the provider approach.
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { getTdpUrl, navigateToTdp } = useTdpNavigation({
+ *     tdpBaseUrl: "https://tetrascience.com/my-org",
+ *   });
+ *
+ *   return (
+ *     <a href={getTdpUrl("/file/abc") ?? "#"} target="_blank" rel="noopener noreferrer">
+ *       View File
+ *     </a>
+ *   );
+ * }
+ * ```
+ */
+export declare function useTdpNavigation(options?: UseTdpNavigationOptions): UseTdpNavigationReturn;
+
+/**
+ * Access TDP navigation helpers from the nearest TdpNavigationProvider.
+ *
+ * @throws Error if used outside a TdpNavigationProvider
+ *
+ * @example
+ * ```tsx
+ * const { getTdpUrl, navigateToTdp } = useTdpNavigationContext();
+ * ```
+ */
+export declare function useTdpNavigationContext(): TdpNavigationContextValue;
+
+export declare interface UseTdpNavigationOptions {
+    /** Explicit TDP base URL override */
+    tdpBaseUrl?: string;
+}
+
+export declare interface UseTdpNavigationReturn {
+    /** The resolved TDP base URL, or null */
+    tdpBaseUrl: string | null;
+    /** Construct a full TDP URL from a path */
+    getTdpUrl: (path: string) => string | null;
+    /** Navigate to a TDP page */
+    navigateToTdp: (path: string, options?: TdpNavigationOptions) => void;
+}
+
+/**
+ * Visualization mode for the plate map.
+ * - `"heatmap"`: Displays quantitative values as a continuous color gradient.
+ *   Use for OD readings, fluorescence intensity, or other numeric measurements.
+ * - `"categorical"`: Displays well types with discrete colors.
+ *   Use for showing sample types, control positions, or experimental conditions.
+ */
+declare type VisualizationMode = "heatmap" | "categorical";
+
+/**
+ * Well data for individual wells.
+ *
+ * @example
+ * // Well with a single numeric value
+ * { wellId: "A1", values: { "Fluorescence": 1500 } }
+ *
+ * @example
+ * // Well with multiple values (creates multiple layers)
+ * { wellId: "A1", values: { "Raw": 1500, "Normalized": 0.85, "Status": "positive" } }
+ *
+ * @example
+ * // Well with tooltip-only data
+ * { wellId: "A1", values: { "Value": 500 }, tooltipData: { compound: "Drug A", concentration: "10µM" } }
+ */
+export declare interface WellData {
+    /**
+     * Well identifier in standard microplate notation.
+     * - Single letter + number for 96/384-well: "A1", "H12", "P24"
+     * - Double letter + number for 1536-well: "A1", "AA1", "AF48"
+     * Case-insensitive ("a1" and "A1" are equivalent).
+     */
+    wellId: string;
+    /**
+     * Named values for the well. Each key can become a visualization layer.
+     *
+     * - Numeric values: Displayed using heatmap visualization
+     * - String values: Displayed using categorical visualization
+     * - null: Empty/no data for that property
+     *
+     * All values are shown in the tooltip regardless of which layer is active.
+     *
+     * @example
+     * // Well with multiple measurement values (numeric)
+     * { wellId: "A1", values: { "Raw": 1500, "Normalized": 0.85, "Z-Score": 1.2 } }
+     *
+     * @example
+     * // Well with categorical values (string)
+     * { wellId: "A1", values: { "Status": "positive", "QC": "pass" } }
+     *
+     * @example
+     * // Mixed numeric and categorical
+     * { wellId: "A1", values: { "Fluorescence": 1500, "Status": "positive" } }
+     */
+    values?: Record<string, string | number | null>;
+    /**
+     * Optional data for tooltip display only (not visualized as layers).
+     * Keys become labels, values are displayed.
+     *
+     * @example
+     * { tooltipData: { sampleId: "S001", compound: "Drug A", concentration: "10µM" } }
+     */
+    tooltipData?: Record<string, unknown>;
+}
+
+export { }
 
-type BadgeSize = "small" | "medium";
-type BadgeVariant = "default" | "primary";
-interface BadgeProps {
-    children: React$1.ReactNode;
-    size?: BadgeSize;
-    variant?: BadgeVariant;
-    disabled?: boolean;
-    iconLeft?: React$1.ReactNode;
-    iconRight?: React$1.ReactNode;
-    className?: string;
-}
-declare const Badge: React$1.FC<BadgeProps>;
-
-type ButtonSize = "small" | "medium";
-type ButtonVariant = "primary" | "secondary" | "tertiary";
-interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement> {
-    children: React$1.ReactNode;
-    variant?: ButtonVariant;
-    size?: ButtonSize;
-    loading?: boolean;
-    leftIcon?: React$1.ReactNode;
-    rightIcon?: React$1.ReactNode;
-    noPadding?: boolean;
-    fullWidth?: boolean;
-    ref?: React$1.Ref<HTMLButtonElement>;
-}
-declare const Button: ({ children, variant, size, loading, leftIcon, rightIcon, noPadding, fullWidth, disabled, ref, ...rest }: ButtonProps) => react_jsx_runtime.JSX.Element;
-
-interface ButtonControlProps {
-    icon?: React$1.ReactNode;
-    selected?: boolean;
-    disabled?: boolean;
-    onClick?: () => void;
-}
-declare const ButtonControl: React$1.FC<ButtonControlProps>;
-
-type CardSize = "small" | "medium" | "large";
-type CardVariant = "default" | "outlined" | "elevated";
-interface CardProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "title"> {
-    children: React$1.ReactNode;
-    title?: React$1.ReactNode;
-    size?: CardSize;
-    variant?: CardVariant;
-    className?: string;
-    fullWidth?: boolean;
-    ref?: React$1.Ref<HTMLDivElement>;
-}
-declare const Card: ({ children, title, size, variant, className, fullWidth, ref, ...rest }: CardProps) => react_jsx_runtime.JSX.Element;
-
-interface CheckboxProps {
-    checked?: boolean;
-    onChange?: (checked: boolean) => void;
-    disabled?: boolean;
-    className?: string;
-    onClick?: (e: React$1.MouseEvent) => void;
-    label?: React$1.ReactNode;
-    noPadding?: boolean;
-    ref?: React$1.Ref<HTMLInputElement>;
-}
-declare const Checkbox: ({ checked, onChange, disabled, className, onClick, label, noPadding, ref, }: CheckboxProps) => react_jsx_runtime.JSX.Element;
-
-interface CodeEditorProps {
-    value: string;
-    onChange: OnChange;
-    language?: string;
-    theme?: "light" | "dark";
-    height?: string | number;
-    width?: string | number;
-    options?: Record<string, unknown>;
-    label?: string;
-    onCopy?: (code: string) => void;
-    onLaunch?: (code: string) => void;
-    disabled?: boolean;
-}
-declare const CodeEditor: React$1.FC<CodeEditorProps>;
-
-type DropdownSize = "xsmall" | "small";
-interface DropdownOption {
-    value: string;
-    label: string;
-    disabled?: boolean;
-}
-interface DropdownProps {
-    options: DropdownOption[];
-    value?: string;
-    placeholder?: string;
-    disabled?: boolean;
-    error?: boolean;
-    size?: DropdownSize;
-    onChange?: (value: string) => void;
-    onOpen?: () => void;
-    onClose?: () => void;
-    width?: string;
-    menuWidth?: string;
-}
-declare const Dropdown: React$1.FC<DropdownProps>;
-
-interface ErrorAlertProps {
-    /** The error object to display. Can be Error, AxiosError, string, or any other type. */
-    error: unknown;
-    /** Optional title for the error alert. Defaults to 'An Error Occurred'. */
-    title?: React$1.ReactNode;
-    /** Optional callback function when the alert is closed. */
-    onClose?: () => void;
-    /** Set to true to show technical details expanded by default. Defaults to false. */
-    showDetailsDefault?: boolean;
-    /** Custom message to show when error is null/undefined (optional, component renders nothing by default) */
-    noErrorContent?: React$1.ReactNode;
-}
-declare const ErrorAlert: React$1.FC<ErrorAlertProps>;
-
-interface IconsProps {
-    fill?: string;
-    width?: string;
-    height?: string;
-    name: IconName;
-}
-interface IconProps {
-    fill?: string;
-    width?: string;
-    height?: string;
-}
-declare enum IconName {
-    BARS_3_BOTTOM_LEFT = "bars-3-bottom-left",
-    BUILDING = "building",
-    BULK_CHECK = "bulk-check",
-    CHECK = "check",
-    CHECK_CIRCLE = "check-circle",
-    CHECK_SQUARE = "check-square",
-    CHEVRON_DOWN = "chevron-down",
-    CLOSE = "close",
-    CODE = "code",
-    COMPUTER = "computer",
-    COPY = "copy",
-    CUBE = "cube",
-    DATABASE = "database",
-    EXCLAMATION_CIRCLE = "exclamation-circle",
-    EXCLAMATION_TRIANGLE = "exclamation-triangle",
-    GEAR = "gear",
-    GLobe = "globe",
-    HASHTAG = "hashtag",
-    HOME = "home",
-    INBOX = "inbox",
-    INFORMATION_CIRCLE = "information-circle",
-    INFORMATION_CIRCLE_MICRO = "information-circle-micro",
-    LAMP = "lamp",
-    LOCK_OPEN = "lock-open",
-    MINUS = "minus",
-    PAPER_PLANE = "paper-plane",
-    PENCIL = "pencil",
-    PIE_CHART = "pie-chart",
-    PIPELINE = "pipeline",
-    PLUS = "plus",
-    PROFILE = "profile",
-    QUESTION_CIRCLE = "question-circle",
-    ROCKET_LAUNCH = "rocket-launch",
-    SEARCH = "search",
-    SEARCH_DOCUMENT = "search-document",
-    SEARCH_SQL = "search-sql",
-    SITEMAP = "sitemap",
-    TETRASCIENCE_ICON = "tetrascience-icon",
-    TEXT = "text",
-    TRASH = "trash",
-    VIEWFINDER_CIRCLE = "viewfinder-circle"
-}
-declare const Icon: (props: IconsProps) => react_jsx_runtime.JSX.Element;
-
-type InputSize = "xsmall" | "small";
-interface InputProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "size"> {
-    size?: InputSize;
-    iconLeft?: React$1.ReactNode;
-    iconRight?: React$1.ReactNode;
-    error?: boolean;
-    disabled?: boolean;
-    ref?: React$1.Ref<HTMLInputElement>;
-}
-declare const Input: ({ size, iconLeft, iconRight, error, disabled, ref, ...rest }: InputProps) => react_jsx_runtime.JSX.Element;
-
-interface LabelProps {
-    children: React$1.ReactNode;
-    infoText?: string;
-    className?: string;
-}
-declare const Label: React$1.FC<LabelProps>;
-
-type CodeComponentProps = ClassAttributes<HTMLElement> & HTMLAttributes<HTMLElement> & ExtraProps & {
-    inline?: boolean;
-};
-type MarkdownDisplayProps = {
-    markdown: string;
-    codeRenderer?: (props: CodeComponentProps) => React$1.ReactElement;
-};
-declare const MarkdownDisplay: ({ markdown, codeRenderer }: MarkdownDisplayProps) => react_jsx_runtime.JSX.Element;
-
-interface MenuItemProps {
-    label: string;
-    checked?: boolean;
-    showCheckbox?: boolean;
-    onClick?: () => void;
-    onCheckChange?: (checked: boolean) => void;
-    active?: boolean;
-    className?: string;
-    ref?: React$1.Ref<HTMLDivElement>;
-}
-declare const MenuItem: ({ label, checked, showCheckbox, onClick, onCheckChange, active, className, ref, }: MenuItemProps) => react_jsx_runtime.JSX.Element;
-
-interface ModalProps {
-    isOpen: boolean;
-    onClose: () => void;
-    onCloseLabel?: string;
-    onConfirm: () => void;
-    onConfirmLabel?: string;
-    children: ReactNode;
-    width?: string;
-    className?: string;
-    hideActions?: boolean;
-    title?: string;
-}
-declare const Modal: ({ isOpen, onClose, onCloseLabel, onConfirm, onConfirmLabel, children, width, className, hideActions, title, }: ModalProps) => false | react_jsx_runtime.JSX.Element;
-
-type PopConfirmPlacement = "top" | "left" | "right" | "bottom" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight" | "leftTop" | "leftBottom" | "rightTop" | "rightBottom";
-interface PopConfirmProps {
-    title?: ReactNode;
-    description?: ReactNode;
-    onConfirm?: (e?: React$1.MouseEvent<HTMLElement>) => void;
-    onCancel?: (e?: React$1.MouseEvent<HTMLElement>) => void;
-    okText?: string;
-    cancelText?: string;
-    placement?: PopConfirmPlacement;
-    children: ReactNode;
-    className?: string;
-    okButtonProps?: React$1.ButtonHTMLAttributes<HTMLButtonElement>;
-    cancelButtonProps?: React$1.ButtonHTMLAttributes<HTMLButtonElement>;
-}
-declare const PopConfirm: React$1.FC<PopConfirmProps>;
-
-interface SupportiveTextProps {
-    children: React$1.ReactNode;
-    showCheck?: boolean;
-    className?: string;
-}
-declare const SupportiveText: React$1.FC<SupportiveTextProps>;
-
-type TabSize = "small" | "medium";
-interface TabProps {
-    label: string;
-    active?: boolean;
-    disabled?: boolean;
-    size?: TabSize;
-    onClick?: () => void;
-}
-declare const Tab: React$1.FC<TabProps>;
-
-interface TableCellProps extends React$1.TdHTMLAttributes<HTMLTableCellElement> {
-    children?: React$1.ReactNode;
-    align?: "left" | "center" | "right";
-    width?: string;
-    className?: string;
-    ref?: React$1.Ref<HTMLTableCellElement>;
-}
-declare const TableCell: ({ children, align, width, className, ref, ...props }: TableCellProps) => react_jsx_runtime.JSX.Element;
-
-interface TableHeaderCellProps extends React$1.ThHTMLAttributes<HTMLTableCellElement> {
-    children?: React$1.ReactNode;
-    sortable?: boolean;
-    sortDirection?: "asc" | "desc" | null;
-    onSort?: () => void;
-    filterable?: boolean;
-    filterOptions?: DropdownOption[];
-    filterValue?: string;
-    onFilterChange?: (value: string) => void;
-    width?: string;
-    className?: string;
-    ref?: React$1.Ref<HTMLTableCellElement>;
-}
-declare const TableHeaderCell: ({ children, sortable, sortDirection, onSort, filterable, filterOptions, filterValue, onFilterChange, width, className, ref, ...props }: TableHeaderCellProps) => react_jsx_runtime.JSX.Element;
-
-type TextareaSize = "xsmall" | "small";
-interface TextareaProps extends Omit<React$1.TextareaHTMLAttributes<HTMLTextAreaElement>, "size"> {
-    size?: TextareaSize;
-    error?: boolean;
-    disabled?: boolean;
-    fullWidth?: boolean;
-    rows?: number;
-    ref?: React$1.Ref<HTMLTextAreaElement>;
-}
-declare const Textarea: ({ size, error, disabled, fullWidth, rows, ref, ...rest }: TextareaProps) => react_jsx_runtime.JSX.Element;
-
-type ToastType = "info" | "success" | "warning" | "danger" | "default";
-interface ToastProps {
-    type?: ToastType;
-    heading: string;
-    description?: string;
-    className?: string;
-}
-declare const Toast: React$1.FC<ToastProps>;
-
-interface ToggleProps {
-    checked?: boolean;
-    onChange?: (checked: boolean) => void;
-    disabled?: boolean;
-    label?: string;
-    className?: string;
-}
-declare const Toggle: React$1.FC<ToggleProps>;
-
-/**
- * TDP Navigation Utilities
- *
- * Pure utility functions for constructing and navigating to TDP URLs.
- * These work independently of React and can be used in any context.
- *
- * Data apps run inside iframes within TDP. These utilities help resolve
- * the TDP base URL from the iframe context and construct navigation URLs.
- */
-/**
- * Extract the TDP base URL from `document.referrer`.
- *
- * In production, data apps run inside iframes within TDP. The browser
- * provides `document.referrer` containing the parent TDP page URL.
- * This function strips the known route path to get the base URL
- * (origin + org slug path prefix).
- *
- * @example
- * // referrer: "https://tetrascience-uat.com/my-org/data-workspace/abc"
- * getTdpBaseUrlFromReferrer() // "https://tetrascience-uat.com/my-org"
- *
- * @returns The TDP base URL, or null if detection fails
- */
-declare function getTdpBaseUrlFromReferrer(): string | null;
-/**
- * Construct a full TDP URL by joining a base URL with a path.
- *
- * @example
- * buildTdpUrl("https://tetrascience.com/my-org", "/file/abc-123")
- * // "https://tetrascience.com/my-org/file/abc-123"
- *
- * @param baseUrl - The TDP base URL (origin + optional org prefix)
- * @param path - The TDP page path (e.g., "/file/abc-123")
- * @returns The full TDP URL, or null if construction fails
- */
-declare function buildTdpUrl(baseUrl: string, path: string): string | null;
-interface TdpNavigationOptions {
-    /** Open in a new tab instead of navigating the parent TDP frame. Default: false */
-    newTab?: boolean;
-}
-/**
- * Navigate to a TDP URL.
- *
- * - `{ newTab: true }` opens the URL in a new browser tab.
- * - Default: sends a `postMessage` to the parent TDP frame (same-tab navigation
- *   when inside an iframe), or navigates the current window (standalone).
- *
- * @param url - Full TDP URL to navigate to
- * @param options - Navigation options
- */
-declare function navigateToTdpUrl(url: string, options?: TdpNavigationOptions): void;
-/**
- * Convenience helpers for constructing common TDP page paths.
- * Returns path strings for use with `getTdpUrl()` or `buildTdpUrl()`.
- *
- * @example
- * const { getTdpUrl } = useTdpNavigation();
- * const url = getTdpUrl(tdpPaths.fileDetails("abc-123"));
- */
-declare const tdpPaths: {
-    fileDetails: (fileId: string) => string;
-    pipelineEdit: (pipelineId: string) => string;
-    pipelineDetails: (pipelineId: string) => string;
-    search: (query?: string) => string;
-    dataWorkspace: () => string;
-    dataApps: () => string;
-    artifact: (type: string, namespace: string, slug: string) => string;
-};
-
-interface TdpNavigationContextValue {
-    /** The resolved TDP base URL (origin + org path prefix), or null if not resolved */
-    tdpBaseUrl: string | null;
-    /** Construct a full TDP URL from a path. Returns null if base URL is not resolved. */
-    getTdpUrl: (path: string) => string | null;
-    /** Navigate to a TDP page. */
-    navigateToTdp: (path: string, options?: TdpNavigationOptions) => void;
-}
-declare const TdpNavigationContext: React$1.Context<TdpNavigationContextValue | null>;
-/**
- * Access TDP navigation helpers from the nearest TdpNavigationProvider.
- *
- * @throws Error if used outside a TdpNavigationProvider
- *
- * @example
- * ```tsx
- * const { getTdpUrl, navigateToTdp } = useTdpNavigationContext();
- * ```
- */
-declare function useTdpNavigationContext(): TdpNavigationContextValue;
-/** Props for the TdpNavigationProvider component */
-interface TdpNavigationProviderProps {
-    /**
-     * Explicit TDP base URL override. Skips auto-detection when provided.
-     */
-    tdpBaseUrl?: string;
-    children: React$1.ReactNode;
-}
-/**
- * Provider that resolves the TDP base URL and exposes navigation helpers.
- *
- * Resolution order:
- * 1. Explicit `tdpBaseUrl` prop (if provided)
- * 2. `document.referrer` parsing (production iframe)
- *
- * @example
- * ```tsx
- * <TdpNavigationProvider tdpBaseUrl="https://tetrascience.com/my-org">
- *   <App />
- * </TdpNavigationProvider>
- * ```
- */
-declare const TdpNavigationProvider: React$1.FC<TdpNavigationProviderProps>;
-interface UseTdpNavigationOptions {
-    /** Explicit TDP base URL override */
-    tdpBaseUrl?: string;
-}
-interface UseTdpNavigationReturn {
-    /** The resolved TDP base URL, or null */
-    tdpBaseUrl: string | null;
-    /** Construct a full TDP URL from a path */
-    getTdpUrl: (path: string) => string | null;
-    /** Navigate to a TDP page */
-    navigateToTdp: (path: string, options?: TdpNavigationOptions) => void;
-}
-/**
- * Standalone hook for TDP navigation (no provider required).
- *
- * For simple use cases where you don't need a TdpNavigationProvider.
- * If multiple components need navigation, prefer the provider approach.
- *
- * @example
- * ```tsx
- * function MyComponent() {
- *   const { getTdpUrl, navigateToTdp } = useTdpNavigation({
- *     tdpBaseUrl: "https://tetrascience.com/my-org",
- *   });
- *
- *   return (
- *     <a href={getTdpUrl("/file/abc") ?? "#"} target="_blank" rel="noopener noreferrer">
- *       View File
- *     </a>
- *   );
- * }
- * ```
- */
-declare function useTdpNavigation(options?: UseTdpNavigationOptions): UseTdpNavigationReturn;
-/** Props for the TDPLink component */
-interface TDPLinkProps extends Omit<React$1.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'> {
-    /** TDP page path (e.g., "/file/abc-123" or use tdpPaths helpers) */
-    path: string;
-    /** Navigation behavior. Default: { newTab: true } */
-    navigationOptions?: TdpNavigationOptions;
-    children: React$1.ReactNode;
-    ref?: React$1.Ref<HTMLAnchorElement>;
-}
-/**
- * A link component that navigates to TDP pages.
- *
- * Renders a standard `<a>` tag with the correct href for right-click
- * "Open in new tab" support, accessibility, and SEO.
- *
- * Must be used inside a `<TdpNavigationProvider>`.
- *
- * @example
- * ```tsx
- * import { TDPLink, tdpPaths } from '@tetrascience-npm/tetrascience-react-ui';
- *
- * <TDPLink path={tdpPaths.fileDetails("abc-123")}>
- *   View File Details
- * </TDPLink>
- *
- * <TDPLink path="/search?q=test" navigationOptions={{ newTab: false }}>
- *   Search in TDP (same tab)
- * </TDPLink>
- * ```
- */
-declare const TDPLink: React$1.FC<TDPLinkProps>;
-
-type TooltipPlacement = "top" | "right" | "bottom" | "left";
-interface TooltipProps {
-    content: ReactNode;
-    children: ReactNode;
-    placement?: TooltipPlacement;
-    className?: string;
-    delay?: number;
-}
-declare const Tooltip: React$1.FC<TooltipProps>;
-
-interface UserProfileProps {
-    name: string;
-    avatar?: string;
-}
-interface AppHeaderProps {
-    hostname: string;
-    userProfile: UserProfileProps;
-    onHomeClick?: () => void;
-    onSettingsClick?: () => void;
-    onUserProfileClick?: () => void;
-}
-declare const AppHeader: React$1.FC<AppHeaderProps>;
-
-interface AssistantModalProps {
-    open: boolean;
-    title: string;
-    prompt: string;
-    initialCode?: string;
-    userQuery?: string;
-    onUserQueryChange?: (value: string) => void;
-    onCopy: (code: string) => void;
-    onLaunch: (code: string) => void;
-    onSend: (input: string) => void;
-    onCancel: () => void;
-}
-declare const AssistantModal: React$1.FC<AssistantModalProps>;
-
-interface ButtonControlItem extends ButtonControlProps {
-    id: string;
-}
-interface ButtonControlGroupProps {
-    controls: ButtonControlItem[];
-    selectedId?: string;
-    onChange?: (id: string) => void;
-    vertical?: boolean;
-    disabled?: boolean;
-}
-declare const ButtonControlGroup: React$1.FC<ButtonControlGroupProps>;
-
-type CardSidebarStatus = "default" | "active" | "hover" | "disabled";
-interface CardSidebarProps {
-    title: string;
-    description?: string;
-    buttonText?: string;
-    linkText?: string;
-    status?: CardSidebarStatus;
-    onButtonClick?: () => void;
-    onLinkClick?: () => void;
-    className?: string;
-    ref?: React$1.Ref<HTMLDivElement>;
-}
-declare const CardSidebar: ({ title, description, buttonText, linkText, status, onButtonClick, onLinkClick, className, ref, }: CardSidebarProps) => react_jsx_runtime.JSX.Element;
-
-interface CodeScriptEditorButtonProps {
-    initialCode?: string;
-    onCodeSave?: (newCode: string) => void;
-    language?: string;
-    buttonText?: string;
-    modalTitle?: string;
-    buttonProps?: React.ComponentProps<typeof Button>;
-    modalProps?: Omit<React.ComponentProps<typeof Modal>, "isOpen" | "onConfirm" | "onClose">;
-    disabled?: boolean;
-    isEditMode?: boolean;
-}
-/**
- * Renders an 'Edit code' button that opens a modal with a Monaco code editor.
- */
-declare const CodeScriptEditorButton: ({ initialCode, onCodeSave, language, buttonText, modalTitle, buttonProps, modalProps, disabled, }: CodeScriptEditorButtonProps) => react_jsx_runtime.JSX.Element;
-
-interface FormFieldProps extends Omit<InputProps, "className"> {
-    label: string;
-    infoText?: string;
-    supportiveText?: string;
-    showSupportiveCheck?: boolean;
-    className?: string;
-    ref?: React$1.Ref<HTMLInputElement>;
-}
-declare const FormField: ({ label, infoText, supportiveText, showSupportiveCheck, className, ref, ...inputProps }: FormFieldProps) => react_jsx_runtime.JSX.Element;
-
-interface LaunchContentProps {
-    initialCode?: string;
-    onDeploy?: () => void;
-    versions?: string[];
-    currentVersion?: string;
-    onVersionChange?: (version: string) => void;
-}
-declare const LaunchContent: React$1.FC<LaunchContentProps>;
-
-interface MenuItemData extends Omit<MenuItemProps, "onClick" | "onCheckChange"> {
-    id: string;
-}
-interface MenuProps {
-    title?: string;
-    items: MenuItemData[];
-    onItemClick?: (itemId: string) => void;
-    onItemCheckChange?: (itemId: string, checked: boolean) => void;
-    activeItemId?: string | null;
-    className?: string;
-}
-declare const Menu: React$1.FC<MenuProps>;
-
-interface OrganizationInfo {
-    name: string;
-    subtext?: string;
-    logo?: React$1.ReactNode;
-}
-interface NavbarProps {
-    organization: OrganizationInfo;
-}
-declare const Navbar: React$1.FC<NavbarProps>;
-
-interface ProtocolConfigurationProps {
-    className?: string;
-}
-declare const ProtocolConfiguration: React$1.FC<ProtocolConfigurationProps>;
-
-interface ProtocolYamlCardProps {
-    title: string;
-    newVersionMode: boolean;
-    onToggleNewVersionMode: (checked: boolean) => void;
-    versionOptions: DropdownOption[];
-    selectedVersion: string;
-    onVersionChange: (value: string) => void;
-    onDeploy: () => void;
-    yaml: string;
-    onYamlChange: (value: string) => void;
-}
-declare const ProtocolYamlCard: React$1.FC<ProtocolYamlCardProps>;
-
-interface PythonEditorModalProps {
-    open: boolean;
-    initialValue?: string;
-    title?: string;
-    onSave: (value: string) => void;
-    onCancel: () => void;
-}
-declare const PythonEditorModal: React$1.FC<PythonEditorModalProps>;
-
-interface SelectFieldProps extends Omit<DropdownProps, "className"> {
-    label: string;
-    infoText?: string;
-    supportiveText?: string;
-    showSupportiveCheck?: boolean;
-    className?: string;
-    ref?: React$1.Ref<HTMLDivElement>;
-}
-declare const SelectField: ({ label, infoText, supportiveText, showSupportiveCheck, className, ref, ...dropdownProps }: SelectFieldProps) => react_jsx_runtime.JSX.Element;
-
-interface SidebarItemProps {
-    icon: IconName;
-    label: string;
-    active?: boolean;
-    onClick?: () => void;
-}
-interface SidebarProps {
-    items: SidebarItemProps[];
-    activeItem?: string;
-    onItemClick?: (label: string) => void;
-}
-declare const Sidebar: React$1.FC<SidebarProps>;
-
-interface TableColumn<T = any> {
-    key: string;
-    header: string;
-    sortable?: boolean;
-    filterable?: boolean;
-    filterOptions?: DropdownOption[];
-    width?: string;
-    align?: "left" | "center" | "right";
-    render?: (value: any, row: T, index: number) => React$1.ReactNode;
-}
-interface TableProps<T = any> {
-    columns: TableColumn<T>[];
-    data: T[];
-    pageSize?: number;
-    rowKey?: keyof T | ((row: T) => string | number);
-    selectable?: boolean;
-    onRowSelect?: (selectedRows: T[]) => void;
-    sortKey?: string;
-    sortDirection?: "asc" | "desc";
-    onSort?: (key: string, direction: "asc" | "desc") => void;
-    currentPage?: number;
-    onPageChange?: (page: number) => void;
-    totalItems?: number;
-    selectedRows?: T[];
-    className?: string;
-}
-declare function Table<T extends Record<string, any>>({ columns, data, pageSize, rowKey, selectable, onRowSelect, sortKey: controlledSortKey, sortDirection: controlledSortDirection, onSort: controlledOnSort, currentPage: controlledCurrentPage, onPageChange: controlledOnPageChange, totalItems, selectedRows: controlledSelectedRows, className, }: TableProps<T>): react_jsx_runtime.JSX.Element;
-declare namespace Table {
-    var displayName: string;
-}
-
-interface TabItem extends Omit<TabProps, "active" | "onClick"> {
-    id: string;
-}
-interface TabGroupProps {
-    tabs: TabItem[];
-    activeTab?: string;
-    onChange?: (tabId: string) => void;
-    disabled?: boolean;
-    size?: TabSize;
-}
-declare const TabGroup: React$1.FC<TabGroupProps>;
 
 declare module "styled-components" {
     interface DefaultTheme {
         position: ToastPosition;
     }
 }
-type ToastPosition = "top" | "bottom";
-interface ToastContainerProps {
-    position: ToastPosition;
-}
-interface ToastManagerProps {
-    position?: ToastPosition;
-}
-declare const ToastManager: React$1.FC<ToastManagerProps>;
-
-interface AppLayoutProps {
-    userProfile: {
-        name: string;
-        avatar?: string;
-    };
-    hostname: string;
-    organization: {
-        name: string;
-        subtext?: string;
-        logo?: React$1.ReactNode;
-    };
-    children?: React$1.ReactNode;
-}
-declare const AppLayout: React$1.FC<AppLayoutProps>;
-
-interface AreaDataSeries {
-    x: number[];
-    y: number[];
-    name: string;
-    color: string;
-    fill?: "tozeroy" | "tonexty" | "toself";
-}
-type AreaGraphVariant = "normal" | "stacked";
-interface AreaGraphProps {
-    dataSeries: AreaDataSeries[];
-    width?: number;
-    height?: number;
-    xRange?: [number, number];
-    yRange?: [number, number];
-    variant?: AreaGraphVariant;
-    xTitle?: string;
-    yTitle?: string;
-    title?: string;
-}
-declare const AreaGraph: React$1.FC<AreaGraphProps>;
-
-interface BarDataSeries {
-    x: number[];
-    y: number[];
-    name: string;
-    color: string;
-    error_y?: {
-        type: "data";
-        array: number[];
-        visible: boolean;
-    };
-}
-type BarGraphVariant = "group" | "stack" | "overlay";
-interface BarGraphProps {
-    dataSeries: BarDataSeries[];
-    width?: number;
-    height?: number;
-    xRange?: [number, number];
-    yRange?: [number, number];
-    variant?: BarGraphVariant;
-    xTitle?: string;
-    yTitle?: string;
-    title?: string;
-    barWidth?: number;
-}
-declare const BarGraph: React$1.FC<BarGraphProps>;
-
-interface BoxDataSeries {
-    y: number[];
-    name: string;
-    color: string;
-    x?: string[] | number[];
-    boxpoints?: "all" | "outliers" | "suspectedoutliers" | false;
-    jitter?: number;
-    pointpos?: number;
-}
-interface BoxplotProps {
-    dataSeries: BoxDataSeries[];
-    width?: number;
-    height?: number;
-    xRange?: [number, number];
-    yRange?: [number, number];
-    xTitle?: string;
-    yTitle?: string;
-    title?: string;
-    showPoints?: boolean;
-}
-declare const Boxplot: React$1.FC<BoxplotProps>;
-
-interface PeakData {
-    position: number;
-    base?: string;
-    peakA: number;
-    peakT: number;
-    peakG: number;
-    peakC: number;
-}
-interface ChromatogramProps {
-    data?: PeakData[];
-    width?: number;
-    height?: number;
-    positionInterval?: number;
-    colorA?: string;
-    colorT?: string;
-    colorG?: string;
-    colorC?: string;
-}
-declare const Chromatogram: React$1.FC<ChromatogramProps>;
-
-/**
- * Type definitions for ChromatogramChart component
- */
-/**
- * Data series for chromatogram visualization
- */
-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
- */
-type BoundaryMarkerType = "none" | "triangle" | "diamond";
-/**
- * Internal computed fields for peak annotations.
- * These are populated by the component during processing.
- * @internal
- */
-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.
- */
-interface PeakAnnotation {
-    /** 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;
-    /**
-     * Internal computed fields populated by the component.
-     * @internal Do not set these directly - they are computed from startX/endX or auto-detection.
-     */
-    _computed?: PeakComputedFields;
-}
-/**
- * Baseline correction method
- */
-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
- */
-type BoundaryMarkerStyle = "none" | "enabled";
-/**
- * Peak detection algorithm options
- */
-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 ChromatogramChart component
- */
-interface ChromatogramChartProps {
-    /** 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;
-}
-
-declare const ChromatogramChart: React$1.FC<ChromatogramChartProps>;
-
-type MarkerSymbol$1 = "circle" | "square" | "diamond" | "triangle-up" | "triangle-down" | "star";
-interface DotPlotDataSeries {
-    x: number[];
-    y: number[];
-    name: string;
-    color?: string;
-    symbol?: MarkerSymbol$1;
-    size?: number;
-}
-type DotPlotVariant = "default" | "stacked";
-type DotPlotProps = {
-    dataSeries: DotPlotDataSeries | DotPlotDataSeries[];
-    width?: number;
-    height?: number;
-    title?: string;
-    xTitle?: string;
-    yTitle?: string;
-    variant?: DotPlotVariant;
-    markerSize?: number;
-};
-declare const DotPlot: React$1.FC<DotPlotProps>;
-
-/**
- * Props for the Heatmap component
- * @deprecated Use PlateMap component instead. Heatmap is now a wrapper around PlateMap for backward compatibility.
- */
-interface HeatmapProps {
-    /** 2D array of numeric values */
-    data?: number[][];
-    /** Custom x-axis labels (column labels) */
-    xLabels?: string[] | number[];
-    /** Custom y-axis labels (row labels) */
-    yLabels?: string[] | number[];
-    /** Chart title */
-    title?: string;
-    /** X-axis title */
-    xTitle?: string;
-    /** Y-axis title */
-    yTitle?: string;
-    /** Color scale - string name or array of [position, color] pairs */
-    colorscale?: string | Array<[number, string]>;
-    /** Chart width in pixels */
-    width?: number;
-    /** Chart height in pixels */
-    height?: number;
-    /** Show color scale legend */
-    showScale?: boolean;
-    /** Number of decimal places for values */
-    precision?: number;
-    /** Minimum value for color scale */
-    zmin?: number;
-    /** Maximum value for color scale */
-    zmax?: number;
-    /** Value unit suffix */
-    valueUnit?: string;
-}
-declare const Heatmap: React$1.FC<HeatmapProps>;
-
-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[];
-    width?: number;
-    height?: number;
-    title?: string;
-    xTitle?: string;
-    yTitle?: string;
-    bargap?: number;
-    showDistributionLine?: boolean;
-};
-declare const Histogram: React$1.FC<HistogramProps>;
-
-/**
- * A single data point in the scatter plot
- */
-interface ScatterPoint {
-    /** Unique identifier for the point */
-    id: string | number;
-    /** X-axis value */
-    x: number;
-    /** Y-axis value */
-    y: number;
-    /** Optional label for the point */
-    label?: string;
-    /** Additional metadata for tooltips and styling */
-    metadata?: Record<string, unknown>;
-}
-/**
- * Scale type for axes
- */
-type ScaleType = "linear" | "log";
-/**
- * Marker shape for scatter points
- */
-type MarkerShape = "circle" | "square" | "diamond" | "cross" | "x" | "triangle-up" | "triangle-down" | "star";
-/**
- * Selection mode for interactive selection
- */
-type SelectionMode = "replace" | "add" | "remove" | "toggle";
-/**
- * Color mapping configuration
- */
-interface ColorMapping {
-    /** Type of mapping: data-driven or static */
-    type: "static" | "continuous" | "categorical";
-    /** Static color value (for type: "static") */
-    value?: string;
-    /** Data field to map (for type: "continuous" | "categorical") */
-    field?: string;
-    /** Color scale for continuous mapping */
-    colorScale?: string | Array<[number, string]>;
-    /** Discrete colors for categorical mapping */
-    categoryColors?: Record<string, string>;
-    /** Min/max values for continuous mapping (auto-calculated if not provided) */
-    min?: number;
-    max?: number;
-}
-/**
- * Shape mapping configuration
- */
-interface ShapeMapping {
-    /** Type of mapping: data-driven or static */
-    type: "static" | "categorical";
-    /** Static shape value (for type: "static") */
-    value?: MarkerShape;
-    /** Data field to map (for type: "categorical") */
-    field?: string;
-    /** Shape mapping for categorical values */
-    categoryShapes?: Record<string, MarkerShape>;
-}
-/**
- * Size mapping configuration
- */
-interface SizeMapping {
-    /** Type of mapping: data-driven or static */
-    type: "static" | "continuous" | "categorical";
-    /** Static size value (for type: "static") */
-    value?: number;
-    /** Data field to map (for type: "continuous" | "categorical") */
-    field?: string;
-    /** Size range for continuous mapping */
-    sizeRange?: [number, number];
-    /** Discrete sizes for categorical mapping */
-    categorySizes?: Record<string, number>;
-    /** Min/max values for continuous mapping (auto-calculated if not provided) */
-    min?: number;
-    max?: number;
-}
-/**
- * Axis configuration
- */
-interface AxisConfig {
-    /** Axis label */
-    title?: string;
-    /** Scale type (linear or log) */
-    scale?: ScaleType;
-    /** Fixed axis range [min, max] */
-    range?: [number, number];
-    /** Auto-range with optional padding percentage (0-1) */
-    autoRange?: boolean;
-    /** Padding percentage for auto-range (default: 0.1 = 10%) */
-    autoRangePadding?: number;
-}
-/**
- * Tooltip configuration
- */
-interface TooltipConfig {
-    /** Enable/disable tooltips */
-    enabled?: boolean;
-    /** Custom tooltip content function */
-    content?: (point: ScatterPoint) => string;
-    /** Fields to display in default tooltip */
-    fields?: string[];
-}
-/**
- * Selection state
- */
-interface SelectionState {
-    /** Array of selected point IDs */
-    selectedIds: Set<string | number>;
-}
-/**
- * Downsampling configuration for performance optimization
- */
-interface DownsamplingConfig {
-    /** Enable downsampling */
-    enabled: boolean;
-    /** Target number of points to display */
-    maxPoints?: number;
-    /** Downsampling strategy */
-    strategy?: "lttb";
-}
-/**
- * Props for InteractiveScatter component
- */
-interface InteractiveScatterProps {
-    /**
-     * Array of data points to plot
-     */
-    data: ScatterPoint[];
-    /**
-     * Chart title
-     */
-    title?: string;
-    /**
-     * X-axis configuration
-     */
-    xAxis?: AxisConfig;
-    /**
-     * Y-axis configuration
-     */
-    yAxis?: AxisConfig;
-    /**
-     * Color mapping configuration
-     */
-    colorMapping?: ColorMapping;
-    /**
-     * Shape mapping configuration
-     */
-    shapeMapping?: ShapeMapping;
-    /**
-     * Size mapping configuration
-     */
-    sizeMapping?: SizeMapping;
-    /**
-     * Tooltip configuration
-     */
-    tooltip?: TooltipConfig;
-    /**
-     * Enable click selection
-     * @default true
-     */
-    enableClickSelection?: boolean;
-    /**
-     * Enable box selection (drag to select rectangular region)
-     * @default true
-     */
-    enableBoxSelection?: boolean;
-    /**
-     * Enable lasso selection (freeform selection)
-     * @default true
-     */
-    enableLassoSelection?: boolean;
-    /**
-     * Controlled selection state.
-     * If provided, component operates in controlled mode.
-     */
-    selectedIds?: Set<string | number>;
-    /**
-     * Callback when selection changes
-     */
-    onSelectionChange?: (selectedIds: Set<string | number>, mode: SelectionMode) => void;
-    /**
-     * Callback when a point is clicked
-     */
-    onPointClick?: (point: ScatterPoint, event: MouseEvent) => void;
-    /**
-     * Downsampling configuration for large datasets
-     */
-    downsampling?: DownsamplingConfig;
-    /**
-     * Chart width in pixels
-     * @default 800
-     */
-    width?: number;
-    /**
-     * Chart height in pixels
-     * @default 600
-     */
-    height?: number;
-    /**
-     * Show the continuous color-scale bar when using a continuous `colorMapping`.
-     * Has no effect for categorical or static mappings.
-     * @default true
-     */
-    showColorBar?: boolean;
-    /**
-     * Custom CSS class name
-     */
-    className?: string;
-}
-/**
- * Data format for selection propagation between components
- */
-interface SelectionEvent {
-    /** Array of selected point IDs */
-    selectedIds: Set<string | number>;
-    /** Selection mode used */
-    mode: SelectionMode;
-    /** Source component identifier (optional) */
-    source?: string;
-}
-
-/**
- * InteractiveScatter component for visualizing scatter plot data with advanced interactions.
- *
- * **Features:**
- * - Data-driven and static styling (color, shape, size)
- * - Interactive selection (click, box, lasso)
- * - Keyboard modifiers for click-selection modes (Shift/Ctrl)
- * - Customizable tooltips with rich content support
- * - Axis customization (ranges, log/linear scales)
- * - Performance optimizations for large datasets
- * - Selection propagation via callbacks
- *
- * **Selection Modes (click selection only):**
- * - Default click: Replace selection
- * - Shift + click: Add to selection
- * - Ctrl/Cmd + click: Remove from selection
- * - Shift + Ctrl + click: Toggle selection
- *
- * Box/lasso selection always replaces the current selection because
- * Plotly does not expose the original keyboard event for drag operations.
- */
-declare const InteractiveScatter: React$1.FC<InteractiveScatterProps>;
-
-/**
- * Default color scale for continuous color mapping
- */
-declare const DEFAULT_COLOR_SCALE: Array<[number, string]>;
-/**
- * Default category colors (cycle through these)
- */
-declare const DEFAULT_CATEGORY_COLORS: string[];
-/**
- * Default sizes
- */
-declare const DEFAULT_MARKER_SIZE = 8;
-declare const DEFAULT_SIZE_RANGE: [number, number];
-/**
- * Default downsampling configuration
- */
-declare const DEFAULT_MAX_POINTS = 5000;
-/**
- * Constants for plot layout
- */
-declare const PLOT_CONSTANTS: {
-    MARGIN_LEFT: number;
-    MARGIN_RIGHT: number;
-    MARGIN_TOP: number;
-    MARGIN_BOTTOM: number;
-    TITLE_FONT_SIZE: number;
-    AXIS_TITLE_FONT_SIZE: number;
-    AXIS_TICK_FONT_SIZE: number;
-    LEGEND_FONT_SIZE: number;
-    FONT_FAMILY: string;
-    GRID_WIDTH: number;
-    AXIS_LINE_WIDTH: number;
-    AUTO_RANGE_PADDING: number;
-};
-/**
- * Selection mode keyboard modifiers
- */
-declare const SELECTION_MODIFIERS: {
-    readonly ADD: "shiftKey";
-    readonly REMOVE: "ctrlKey";
-    readonly TOGGLE: "both";
-};
-
-type MarkerSymbol = "circle" | "circle-open" | "circle-dot" | "circle-open-dot" | "square" | "square-open" | "square-dot" | "square-open-dot" | "diamond" | "diamond-open" | "diamond-dot" | "diamond-open-dot" | "cross" | "cross-open" | "cross-dot" | "cross-open-dot" | "x" | "x-open" | "x-dot" | "x-open-dot" | "triangle-up" | "triangle-up-open" | "triangle-up-dot" | "triangle-up-open-dot" | "triangle-down" | "triangle-down-open" | "triangle-down-dot" | "triangle-down-open-dot" | "triangle-left" | "triangle-left-open" | "triangle-left-dot" | "triangle-left-open-dot" | "triangle-right" | "triangle-right-open" | "triangle-right-dot" | "triangle-right-open-dot" | "triangle-ne" | "triangle-ne-open" | "triangle-ne-dot" | "triangle-ne-open-dot" | "triangle-se" | "triangle-se-open" | "triangle-se-dot" | "triangle-se-open-dot" | "triangle-sw" | "triangle-sw-open" | "triangle-sw-dot" | "triangle-sw-open-dot" | "triangle-nw" | "triangle-nw-open" | "triangle-nw-dot" | "triangle-nw-open-dot" | "pentagon" | "pentagon-open" | "pentagon-dot" | "pentagon-open-dot" | "hexagon" | "hexagon-open" | "hexagon-dot" | "hexagon-open-dot" | "hexagon2" | "hexagon2-open" | "hexagon2-dot" | "hexagon2-open-dot" | "octagon" | "octagon-open" | "octagon-dot" | "octagon-open-dot" | "star" | "star-open" | "star-dot" | "star-open-dot" | "hexagram" | "hexagram-open" | "hexagram-dot" | "hexagram-open-dot" | "star-triangle-up" | "star-triangle-up-open" | "star-triangle-up-dot" | "star-triangle-up-open-dot" | "star-triangle-down" | "star-triangle-down-open" | "star-triangle-down-dot" | "star-triangle-down-open-dot" | "star-square" | "star-square-open" | "star-square-dot" | "star-square-open-dot" | "star-diamond" | "star-diamond-open" | "star-diamond-dot" | "star-diamond-open-dot" | "diamond-tall" | "diamond-tall-open" | "diamond-tall-dot" | "diamond-tall-open-dot" | "diamond-wide" | "diamond-wide-open" | "diamond-wide-dot" | "diamond-wide-open-dot" | "hourglass" | "hourglass-open" | "bowtie" | "bowtie-open" | "circle-cross" | "circle-cross-open" | "circle-x" | "circle-x-open" | "square-cross" | "square-cross-open" | "square-x" | "square-x-open" | "diamond-cross" | "diamond-cross-open" | "diamond-x" | "diamond-x-open" | "cross-thin" | "cross-thin-open" | "x-thin" | "x-thin-open" | "asterisk" | "asterisk-open" | "hash" | "hash-open" | "hash-dot" | "hash-open-dot" | "y-up" | "y-up-open" | "y-down" | "y-down-open" | "y-left" | "y-left-open" | "y-right" | "y-right-open" | "line-ew" | "line-ew-open" | "line-ns" | "line-ns-open" | "line-ne" | "line-ne-open" | "line-nw" | "line-nw-open" | "arrow" | "arrow-open" | "arrow-wide" | "arrow-wide-open";
-interface LineDataSeries {
-    x: number[];
-    y: number[];
-    name: string;
-    color: string;
-    symbol?: MarkerSymbol;
-    error_y?: {
-        type: "data";
-        array: number[];
-        visible: boolean;
-    };
-}
-type LineGraphVariant = "lines" | "lines+markers" | "lines+markers+error_bars";
-type LineGraphProps = {
-    dataSeries: LineDataSeries[];
-    width?: number;
-    height?: number;
-    xRange?: [number, number];
-    yRange?: [number, number];
-    variant?: LineGraphVariant;
-    xTitle?: string;
-    yTitle?: string;
-    title?: string;
-};
-declare const LineGraph: React$1.FC<LineGraphProps>;
-
-interface MainProps {
-    userProfile: {
-        name: string;
-        avatar?: string;
-    };
-    hostname: string;
-    organization: {
-        name: string;
-        subtext?: string;
-        logo?: React$1.ReactNode;
-    };
-}
-declare const Main: React$1.FC<MainProps>;
-
-interface PieDataSeries {
-    labels: string[];
-    values: number[];
-    name: string;
-    colors?: string[];
-}
-type PieTextInfo = "none" | "label" | "percent" | "value" | "label+percent" | "label+value" | "value+percent" | "label+value+percent";
-type PieChartProps = {
-    dataSeries: PieDataSeries;
-    width?: number;
-    height?: number;
-    title?: string;
-    textInfo?: PieTextInfo;
-    hole?: number;
-    rotation?: number;
-};
-declare const PieChart: React$1.FC<PieChartProps>;
-
-/**
- * Plate format string constants for standard microplate configurations.
- */
-declare const PLATE_FORMAT_96: "96";
-declare const PLATE_FORMAT_384: "384";
-declare const PLATE_FORMAT_1536: "1536";
-declare const PLATE_FORMAT_CUSTOM: "custom";
-/**
- * Plate format presets for standard microplate configurations.
- * - `"96"`: 8 rows × 12 columns (wells A1-H12)
- * - `"384"`: 16 rows × 24 columns (wells A1-P24)
- * - `"1536"`: 32 rows × 48 columns (wells A1-AF48)
- * - `"custom"`: User-defined dimensions via `rows` and `columns` props
- */
-type PlateFormat = typeof PLATE_FORMAT_96 | typeof PLATE_FORMAT_384 | typeof PLATE_FORMAT_1536 | typeof PLATE_FORMAT_CUSTOM;
-/**
- * Visualization mode for the plate map.
- * - `"heatmap"`: Displays quantitative values as a continuous color gradient.
- *   Use for OD readings, fluorescence intensity, or other numeric measurements.
- * - `"categorical"`: Displays well types with discrete colors.
- *   Use for showing sample types, control positions, or experimental conditions.
- */
-type VisualizationMode = "heatmap" | "categorical";
-/**
- * Color scale definition for the heatmap visualization mode.
- *
- * Can be:
- * - A named Plotly colorscale (e.g., "Viridis", "Blues", "Hot")
- * - An array of [position, color] tuples where position is 0-1
- *
- * @example
- * // Named colorscale
- * colorScale="Viridis"
- *
- * @example
- * // Custom gradient
- * colorScale={[
- *   [0, "#313695"],   // Dark blue at min
- *   [0.5, "#ffffbf"], // Yellow at midpoint
- *   [1, "#a50026"],   // Dark red at max
- * ]}
- */
-type ColorScale = string | Array<[number, string]>;
-/**
- * Position for the legend display.
- * - `"right"`: Legend appears to the right of the plate (default)
- * - `"bottom"`: Legend appears below the plate
- * - `"left"`: Legend appears to the left of the plate
- * - `"top"`: Legend appears above the plate
- */
-type LegendPosition = "right" | "bottom" | "left" | "top";
-/**
- * Well data for individual wells.
- *
- * @example
- * // Well with a single numeric value
- * { wellId: "A1", values: { "Fluorescence": 1500 } }
- *
- * @example
- * // Well with multiple values (creates multiple layers)
- * { wellId: "A1", values: { "Raw": 1500, "Normalized": 0.85, "Status": "positive" } }
- *
- * @example
- * // Well with tooltip-only data
- * { wellId: "A1", values: { "Value": 500 }, tooltipData: { compound: "Drug A", concentration: "10µM" } }
- */
-interface WellData {
-    /**
-     * Well identifier in standard microplate notation.
-     * - Single letter + number for 96/384-well: "A1", "H12", "P24"
-     * - Double letter + number for 1536-well: "A1", "AA1", "AF48"
-     * Case-insensitive ("a1" and "A1" are equivalent).
-     */
-    wellId: string;
-    /**
-     * Named values for the well. Each key can become a visualization layer.
-     *
-     * - Numeric values: Displayed using heatmap visualization
-     * - String values: Displayed using categorical visualization
-     * - null: Empty/no data for that property
-     *
-     * All values are shown in the tooltip regardless of which layer is active.
-     *
-     * @example
-     * // Well with multiple measurement values (numeric)
-     * { wellId: "A1", values: { "Raw": 1500, "Normalized": 0.85, "Z-Score": 1.2 } }
-     *
-     * @example
-     * // Well with categorical values (string)
-     * { wellId: "A1", values: { "Status": "positive", "QC": "pass" } }
-     *
-     * @example
-     * // Mixed numeric and categorical
-     * { wellId: "A1", values: { "Fluorescence": 1500, "Status": "positive" } }
-     */
-    values?: Record<string, string | number | null>;
-    /**
-     * Optional data for tooltip display only (not visualized as layers).
-     * Keys become labels, values are displayed.
-     *
-     * @example
-     * { tooltipData: { sampleId: "S001", compound: "Drug A", concentration: "10µM" } }
-     */
-    tooltipData?: Record<string, unknown>;
-}
-/**
- * Configuration for auto-generated layers when using WellData with `values`.
- *
- * When wells have multiple values (via the `values` property), layers are
- * auto-generated from the unique keys. Use LayerConfig to customize the
- * display name, visualization mode, and color scale for each layer.
- *
- * @example
- * // Configure layers for wells with { values: { "Raw": 100, "Normalized": 0.5 } }
- * const layerConfigs: LayerConfig[] = [
- *   { id: "Raw", name: "Raw Data", colorScale: "Blues" },
- *   { id: "Normalized", name: "Normalized Values", valueMin: 0, valueMax: 1 },
- * ];
- */
-interface LayerConfig {
-    /** Layer ID (must match a key in WellData.values) */
-    id: string;
-    /** Display name for the layer (defaults to id if not provided) */
-    name?: string;
-    /** Visualization mode for this layer */
-    visualizationMode?: VisualizationMode;
-    /** Color scale for this layer (for heatmap mode) */
-    colorScale?: ColorScale;
-    /** Minimum value for color scaling */
-    valueMin?: number;
-    /** Maximum value for color scaling */
-    valueMax?: number;
-    /** Value unit suffix for tooltips and colorbar (e.g., "RFU", "%"). A space is automatically added before the unit. */
-    valueUnit?: string;
-    /**
-     * Custom colors for categorical visualization mode.
-     * Keys are category values (strings from `values`), values are hex colors.
-     * Merged with DEFAULT_CATEGORY_COLORS.
-     */
-    categoryColors?: Record<string, string>;
-}
-/**
- * Configuration for legend styling and positioning.
- *
- * @example
- * // Legend on the bottom with custom styling
- * legendConfig={{
- *   position: "bottom",
- *   fontSize: 14,
- *   itemSpacing: 12,
- *   swatchSize: 20,
- * }}
- */
-interface LegendConfig {
-    /**
-     * Position of the legend relative to the plate.
-     * @default "right"
-     */
-    position?: LegendPosition;
-    /**
-     * Font size for legend labels in pixels.
-     * @default 12
-     */
-    fontSize?: number;
-    /**
-     * Spacing between legend items in pixels.
-     * @default 4
-     */
-    itemSpacing?: number;
-    /**
-     * Size of the color swatch in pixels.
-     * @default 16
-     */
-    swatchSize?: number;
-    /**
-     * Title to display above the legend.
-     */
-    title?: string;
-}
-/**
- * A region to highlight on the plate (e.g., controls, sample areas, empty wells)
- */
-interface PlateRegion {
-    /** Unique identifier for the region */
-    id: string;
-    /** Display name for the region (shown in legend) */
-    name: string;
-    /**
-     * Wells included in this region using range notation.
-     * Format: "StartWell:EndWell" (e.g., "A1:B6" for a rectangular block from A1 to B6)
-     */
-    wells: string;
-    /** Border color for the region highlight */
-    borderColor?: string;
-    /** Border width in pixels (default: 2) */
-    borderWidth?: number;
-    /** Optional fill color with transparency (e.g., "rgba(255, 0, 0, 0.1)") */
-    fillColor?: string;
-}
-/**
- * Props for PlateMap component
- */
-interface PlateMapProps {
-    /**
-     * Well data array as WellData objects with wellId and values.
-     *
-     * If wells have multiple values (via `values` property), layers are
-     * auto-generated for each unique key, enabling layer toggling.
-     */
-    data?: WellData[];
-    /**
-     * Configuration for auto-generated layers when using WellData with `values`.
-     * Use this to customize display names, colors, and ranges for each layer.
-     * Only used when `data` contains wells with `values` property.
-     */
-    layerConfigs?: LayerConfig[];
-    /**
-     * Initial layer ID to display when the component mounts.
-     * If not provided, defaults to the first layer.
-     */
-    initialLayerId?: string;
-    /**
-     * Optional callback notified when the active layer changes.
-     * This is purely informational - the component manages layer state internally.
-     * Use this for logging, analytics, or syncing with external state.
-     */
-    onLayerChange?: (layerId: string) => void;
-    /** Plate format preset (default: "96") */
-    plateFormat?: PlateFormat;
-    /** Number of rows for custom format (default: 8 for 96-well, 16 for 384-well) */
-    rows?: number;
-    /** Number of columns for custom format (default: 12 for 96-well, 24 for 384-well) */
-    columns?: number;
-    /**
-     * Visualization mode (default: "heatmap")
-     * - "heatmap": Display quantitative values with color gradient
-     * - "categorical": Display well types with discrete colors
-     */
-    visualizationMode?: VisualizationMode;
-    /**
-     * Custom colors for categorical visualization mode.
-     * Keys are well types, values are hex colors.
-     * Merged with DEFAULT_CATEGORY_COLORS.
-     */
-    categoryColors?: Record<string, string>;
-    /**
-     * Regions to highlight on the plate (e.g., controls, sample areas, empty wells).
-     * Each region can specify wells and styling for visual distinction.
-     */
-    regions?: PlateRegion[];
-    /** Chart title */
-    title?: string;
-    /** X-axis title (e.g., "Columns") */
-    xTitle?: string;
-    /** Y-axis title (e.g., "Rows") */
-    yTitle?: string;
-    /** Custom x-axis labels (overrides auto-generated column numbers) */
-    xLabels?: string[] | number[];
-    /** Custom y-axis labels (overrides auto-generated row letters) */
-    yLabels?: string[] | number[];
-    /** Color scale for the heatmap (only used in heatmap mode) */
-    colorScale?: ColorScale;
-    /** Minimum value for color scale (auto-calculated if not provided) */
-    valueMin?: number;
-    /** Maximum value for color scale (auto-calculated if not provided) */
-    valueMax?: number;
-    /** Color for empty/null wells (default: "#f0f0f0") */
-    emptyWellColor?: string;
-    /** Show color bar legend for heatmap mode (default: true) */
-    showColorBar?: boolean;
-    /** Show categorical legend for categorical mode (default: true) */
-    showLegend?: boolean;
-    /**
-     * Configuration for legend positioning and styling.
-     * Applies to both heatmap colorbar and categorical legend.
-     *
-     * @example
-     * // Position legend at bottom with larger text
-     * legendConfig={{ position: "bottom", fontSize: 14 }}
-     */
-    legendConfig?: LegendConfig;
-    /** Chart width in pixels (default: 800) */
-    width?: number;
-    /** Chart height in pixels (default: 500) */
-    height?: number;
-    /** Number of decimal places for values (default: 0) */
-    precision?: number;
-    /**
-     * Marker shape for wells (default: "circle")
-     * - "circle": Round markers, ideal for plate-based data
-     * - "square": Square markers, ideal for generic heatmaps
-     */
-    markerShape?: "circle" | "square";
-    /**
-     * Callback when a well/cell is clicked.
-     * @param wellData - The full well data object including wellId, values, and tooltipData
-     */
-    onWellClick?: (wellData: WellData) => void;
-}
-
-/**
- * PlateMap component for visualizing well plate data as a heatmap or categorical display.
- *
- * **Supported Plate Formats:**
- * - 96-well (8 rows × 12 columns, wells A1-H12)
- * - 384-well (16 rows × 24 columns, wells A1-P24)
- * - 1536-well (32 rows × 48 columns, wells A1-AF48)
- * - Custom dimensions with user-specified rows/columns
- *
- * **Visualization Modes:**
- * - `"heatmap"`: Continuous color gradient for quantitative values
- * - `"categorical"`: Discrete colors for well types (sample, control, empty)
- *
- * **Features:**
- * - Multiple data layers with independent visualization settings
- * - Control region highlighting with borders and fill colors
- * - Configurable color scales, tooltips, and click interactions
- * - Support for WellData arrays with multi-layer visualization
- *
- * **Data Format:**
- * - **WellData array**: `[{ wellId: "A1", values: { RFU: 100 }, tooltipData: {...} }, ...]`
- *
- */
-declare const PlateMap: React$1.FC<PlateMapProps>;
-
-interface ScatterDataPoint {
-    x: number;
-    y: number;
-    additionalInfo?: Record<string, string | number>;
-}
-interface ScatterDataSeries {
-    x: number[];
-    y: number[];
-    name: string;
-    color: string;
-}
-interface ScatterGraphProps {
-    dataSeries: ScatterDataSeries[];
-    width?: number;
-    height?: number;
-    xRange?: [number, number];
-    yRange?: [number, number];
-    xTitle?: string;
-    yTitle?: string;
-    title?: string;
-}
-declare const ScatterGraph: React$1.FC<ScatterGraphProps>;
-
-/** Transformed search result (flattened from Elasticsearch hit format) */
-interface SearchResult {
-    id: string;
-    _score?: number | null;
-    [key: string]: any;
-}
-/** Configuration for a search filter */
-interface TdpSearchFilter {
-    key: string;
-    label: string;
-    options: DropdownOption[];
-}
-/** Configuration for column display */
-interface TdpSearchColumn {
-    key: string;
-    header: string;
-    sortable?: boolean;
-    width?: string;
-    align?: "left" | "center" | "right";
-    render?: (value: any, row: SearchResult, index: number) => React$1.ReactNode;
-}
-/** Sort configuration */
-interface TdpSearchSort {
-    field: string;
-    order: "asc" | "desc";
-}
-/** Props passed to the renderSearchBar render prop */
-interface TdpSearchBarRenderProps {
-    query: string;
-    setQuery: (query: string) => void;
-    onSearch: () => void;
-    isLoading: boolean;
-    placeholder: string;
-}
-/** Props passed to the renderFilters render prop */
-interface TdpFiltersRenderProps {
-    filters: TdpSearchFilter[];
-    filterValues: Record<string, string>;
-    onFilterChange: (key: string, value: string) => void;
-}
-/** Props passed to the renderResults render prop */
-interface TdpResultsRenderProps {
-    results: SearchResult[];
-    total: number;
-    currentPage: number;
-    pageSize: number;
-    columns: TdpSearchColumn[];
-    onPageChange: (page: number) => void;
-    sortKey: string | null;
-    sortDirection: "asc" | "desc";
-    onSort: (key: string, direction: "asc" | "desc") => void;
-}
-/** Search connection configuration */
-interface TdpSearchConfig {
-    /**
-     * When true, calls the TDP API directly from the browser
-     * When false/omitted, proxies the request through your backend `apiEndpoint`
-     */
-    standalone?: boolean;
-    /** TDP API base URL (required when standalone is true) */
-    baseUrl?: string;
-    /** Backend API endpoint for search (used when standalone is false). Defaults to '/api/search' */
-    apiEndpoint?: string;
-    /** Common | authentication token */
-    authToken?: string;
-    /** Common | organization slug */
-    orgSlug?: string;
-}
-/** Common props shared by both search modes */
-interface CommonTdpSearchProps {
-    /** Default search term (default query) */
-    defaultQuery?: string;
-    /** Display fields/columns for the results table */
-    columns: TdpSearchColumn[];
-    /** UI filters displayed as dropdowns (for user selection) */
-    filters?: TdpSearchFilter[];
-    /** Default sort configuration (sort options) */
-    defaultSort?: TdpSearchSort;
-    /**
-     * Additional search parameters to pass to the SDK's searchEql method.
-     * Allows customization of expression, selectedPipelineIds, selectedSourceTypes, etc.
-     */
-    advancedSearchParams?: Partial<Omit<SearchEqlRequest, "searchTerm" | "from" | "size" | "sort" | "order">>;
-    /** Results per page. Defaults to 10 */
-    pageSize?: number;
-    /** Search input placeholder text */
-    searchPlaceholder?: string;
-    /** Custom CSS class */
-    className?: string;
-    /** Callback fired when search is executed with the query and results */
-    onSearch?: (query: SearchEqlRequest, results: SearchResult[]) => void;
-    /** Replace the entire search bar (input + button) */
-    renderSearchBar?: (props: TdpSearchBarRenderProps) => React$1.ReactNode;
-    /** Replace the filters row */
-    renderFilters?: (props: TdpFiltersRenderProps) => React$1.ReactNode;
-    /** Replace the results table (and pagination) */
-    renderResults?: (props: TdpResultsRenderProps) => React$1.ReactNode;
-}
-type TdpSearchProps = CommonTdpSearchProps & TdpSearchConfig;
-type UseSearchConfig = {
-    pageSize: number;
-} & TdpSearchConfig;
-interface UseSearchResult {
-    results: SearchResult[];
-    total: number;
-    currentPage: number;
-    isLoading: boolean;
-    error: string | null;
-    executeSearch: (searchRequest: Omit<SearchEqlRequest, "from" | "size">, page?: number) => Promise<SearchResult[]>;
-}
-
-/**
- * TdpSearch Component
- *
- * A reusable search component for querying the TDP.
- *
- * @example
- * ```tsx
- * <TdpSearch
- *   columns={[
- *     { key: "id", header: "ID" },
- *     { key: "filePath", header: "File Path", sortable: true }
- *   ]}
- *   defaultQuery="sample-data"
- *   pageSize={20}
- * />
- * ```
- */
-declare const TdpSearch: React$1.FC<TdpSearchProps>;
-
-declare function useSearch(config: UseSearchConfig): UseSearchResult;
-
-/**
- * Centralized color system for TetraScience UI
- * This utility provides access to CSS variables defined in colors.css
- * while maintaining TypeScript support and IntelliSense
- */
-/**
- * Centralized color tokens that map to CSS variables
- * This provides TypeScript support while leveraging CSS custom properties
- */
-declare const COLORS: {
-    readonly BLACK_50: string;
-    readonly BLACK_100: string;
-    readonly BLACK_200: string;
-    readonly BLACK_300: string;
-    readonly BLACK_400: string;
-    readonly BLACK_500: string;
-    readonly BLACK_600: string;
-    readonly BLACK_700: string;
-    readonly BLACK_800: string;
-    readonly BLACK_900: string;
-    readonly BLACK: string;
-    readonly BLACK_OPACITY_20: "rgba(26, 26, 26, 0.2)";
-    readonly WHITE_50: string;
-    readonly WHITE_100: string;
-    readonly WHITE_200: string;
-    readonly WHITE_300: string;
-    readonly WHITE_400: string;
-    readonly WHITE_500: string;
-    readonly WHITE_600: string;
-    readonly WHITE_700: string;
-    readonly WHITE_800: string;
-    readonly WHITE_900: string;
-    readonly WHITE: string;
-    readonly BLUE_50: string;
-    readonly BLUE_100: string;
-    readonly BLUE_200: string;
-    readonly BLUE_300: string;
-    readonly BLUE_400: string;
-    readonly BLUE_500: string;
-    readonly BLUE_600: string;
-    readonly BLUE_700: string;
-    readonly BLUE_800: string;
-    readonly BLUE_900: string;
-    readonly BLUE: string;
-    readonly GREY_50: string;
-    readonly GREY_100: string;
-    readonly GREY_200: string;
-    readonly GREY_300: string;
-    readonly GREY_400: string;
-    readonly GREY_500: string;
-    readonly GREY_600: string;
-    readonly GREY_700: string;
-    readonly GREY_800: string;
-    readonly GREY_900: string;
-    readonly GREY: string;
-    readonly ORANGE: string;
-    readonly RED: string;
-    readonly GREEN: string;
-    readonly YELLOW: string;
-    readonly PURPLE: string;
-    readonly GREEN_BG: string;
-    readonly GREEN_SUCCESS: string;
-    readonly ORANGE_BG: string;
-    readonly ORANGE_CAUTION: string;
-    readonly RED_BG: string;
-    readonly RED_ERROR: string;
-    readonly GRAPH_SECONDARY_BROWN: string;
-    readonly GRAPH_SECONDARY_PINK: string;
-    readonly GRAPH_SECONDARY_TEAL: string;
-    readonly GRAPH_SECONDARY_DARK_BLUE: string;
-    readonly GRAPH_SECONDARY_BLACK: string;
-    readonly GRAPH_SECONDARY_GREY: string;
-};
-/**
- * Chart color palette for consistent graph styling
- * Uses the primary graph colors from the design system
- */
-declare const CHART_COLORS: readonly [string, string, string, string, string, string, string, string, string, string, string, string];
-type ColorToken = keyof typeof COLORS;
-
-/**
- * Theme type definitions for TetraScience UI Kit
- */
-interface ThemeColors {
-    primary?: string;
-    primaryHover?: string;
-    primaryActive?: string;
-    background?: string;
-    text?: string;
-    border?: string;
-    cardBackground?: string;
-    cardBorder?: string;
-}
-interface ThemeRadius {
-    small?: string;
-    medium?: string;
-    large?: string;
-}
-interface ThemeSpacing {
-    small?: string;
-    medium?: string;
-    large?: string;
-}
-interface Theme {
-    colors?: ThemeColors;
-    radius?: ThemeRadius;
-    spacing?: ThemeSpacing;
-}
-declare const defaultTheme: Theme;
-
-interface ThemeProviderProps {
-    theme?: Theme;
-    children: React$1.ReactNode;
-}
-/**
- * ThemeProvider component that sets CSS custom properties for theming
- *
- * This provider merges the provided theme with the default theme and
- * sets CSS variables on a wrapper element, making them available to both
- * styled-components and SCSS styles within the provider's scope.
- *
- * @example
- * ```tsx
- * import { ThemeProvider, Button } from '@tetrascience-npm/tetrascience-react-ui';
- *
- * const customTheme = {
- *   colors: {
- *     primary: '#FF0000',
- *   },
- *   radius: {
- *     medium: '12px',
- *   }
- * };
- *
- * <ThemeProvider theme={customTheme}>
- *   <Button>Click me</Button>
- * </ThemeProvider>
- * ```
- */
-declare const ThemeProvider: React$1.FC<ThemeProviderProps>;
-
-export { AppHeader, AppLayout, AreaGraph, AssistantModal, Badge, BarGraph, Boxplot, Button, ButtonControl, ButtonControlGroup, CHART_COLORS, COLORS, Card, CardSidebar, Checkbox, Chromatogram, ChromatogramChart, CodeEditor, CodeScriptEditorButton, DEFAULT_CATEGORY_COLORS, DEFAULT_COLOR_SCALE, DEFAULT_MARKER_SIZE, DEFAULT_MAX_POINTS, DEFAULT_SIZE_RANGE, DotPlot, Dropdown, ErrorAlert, FormField, Heatmap, Histogram, Icon, IconName, Input, InteractiveScatter, Label, LaunchContent, LineGraph, Main, MarkdownDisplay, Menu, MenuItem, Modal, Navbar, PLOT_CONSTANTS, PieChart, PlateMap, PopConfirm, ProtocolConfiguration, ProtocolYamlCard, PythonEditorModal, SELECTION_MODIFIERS, ScatterGraph, SelectField, Sidebar, SupportiveText, TDPLink, Tab, TabGroup, Table, TableCell, TableHeaderCell, TdpNavigationContext, TdpNavigationProvider, TdpSearch, Textarea, ThemeProvider, Toast, ToastManager, Toggle, Tooltip, buildTdpUrl, defaultTheme, getTdpBaseUrlFromReferrer, navigateToTdpUrl, tdpPaths, useSearch, useTdpNavigation, useTdpNavigationContext };
-export type { AppHeaderProps, AppLayoutProps, AreaDataSeries, AreaGraphProps, AreaGraphVariant, AssistantModalProps, AxisConfig, BadgeProps, BarDataSeries, BarGraphProps, BarGraphVariant, BaselineCorrectionMethod, BoundaryMarkerStyle, BoxDataSeries, BoxplotProps, ButtonControlGroupProps, ButtonControlProps, ButtonProps, CardProps, CardSidebarProps, CheckboxProps, ChromatogramChartProps, ChromatogramProps, ChromatogramSeries, CodeEditorProps, CodeScriptEditorButtonProps, ColorMapping, ColorScale, ColorToken, DotPlotDataSeries, DotPlotProps, DotPlotVariant, DownsamplingConfig, DropdownOption, DropdownProps, ErrorAlertProps, FormFieldProps, HeatmapProps, HistogramDataSeries, HistogramProps, IconProps, IconsProps, InputProps, InteractiveScatterProps, LabelProps, LaunchContentProps, LineDataSeries, LineGraphProps, LineGraphVariant, MainProps, MarkdownDisplayProps, MarkerShape, MarkerSymbol, MenuItemProps, MenuProps, ModalProps, NavbarProps, PeakAnnotation, PeakData, PeakDetectionOptions, PieChartProps, PieDataSeries, PieTextInfo, PlateFormat, PlateMapProps, PopConfirmProps, ProtocolConfigurationProps, ProtocolYamlCardProps, PythonEditorModalProps, ScaleType, ScatterDataPoint, ScatterDataSeries, ScatterGraphProps, ScatterPoint, SearchResult, SelectFieldProps, SelectionEvent, SelectionMode, SelectionState, ShapeMapping, SidebarProps, SizeMapping, SupportiveTextProps, TDPLinkProps, TabGroupProps, TabProps, TabSize, TableCellProps, TableColumn, TableHeaderCellProps, TableProps, TdpFiltersRenderProps, TdpNavigationContextValue, TdpNavigationOptions, TdpNavigationProviderProps, TdpResultsRenderProps, TdpSearchBarRenderProps, TdpSearchColumn, TdpSearchConfig, TdpSearchFilter, TdpSearchProps, TdpSearchSort, TextareaProps, Theme, ThemeColors, ThemeProviderProps, ThemeRadius, ThemeSpacing, ToastContainerProps, ToastManagerProps, ToastProps, ToastType, ToggleProps, TooltipConfig, TooltipProps, UseSearchConfig, UseSearchResult, UseTdpNavigationOptions, UseTdpNavigationReturn, WellData };