@tetrascience-npm/tetrascience-react-ui 0.2.0 → 0.3.0-beta.2.1

package/dist/index.d.ts

@@ -1,109 +1,1277 @@
-export * from '@atoms/Badge';
-export { BadgeProps } from '@atoms/Badge';
-export * from '@atoms/Button';
-export { ButtonProps } from '@atoms/Button';
-export * from '@atoms/ButtonControl';
-export { ButtonControlProps } from '@atoms/ButtonControl';
-export * from '@atoms/Card';
-export { CardProps } from '@atoms/Card';
-export * from '@atoms/Checkbox';
-export { CheckboxProps } from '@atoms/Checkbox';
-export * from '@atoms/CodeEditor';
-export { CodeEditorProps } from '@atoms/CodeEditor';
-export * from '@atoms/Dropdown';
-export { DropdownProps } from '@atoms/Dropdown';
-export * from '@atoms/ErrorAlert';
-export { ErrorAlertProps } from '@atoms/ErrorAlert';
-export * from '@atoms/Icon';
-export { IconProps } from '@atoms/Icon';
-export * from '@atoms/Input';
-export { InputProps } from '@atoms/Input';
-export * from '@atoms/Label';
-export { LabelProps } from '@atoms/Label';
-export * from '@atoms/MarkdownDisplay';
-export { MarkdownDisplayProps } from '@atoms/MarkdownDisplay';
-export * from '@atoms/MenuItem';
-export { MenuItemProps } from '@atoms/MenuItem';
-export * from '@atoms/Modal';
-export { ModalProps } from '@atoms/Modal';
-export * from '@atoms/PopConfirm';
-export { PopConfirmProps } from '@atoms/PopConfirm';
-export * from '@atoms/SupportiveText';
-export { SupportiveTextProps } from '@atoms/SupportiveText';
-export * from '@atoms/Tab';
-export { TabProps } from '@atoms/Tab';
-export * from '@atoms/TableCell';
-export { TableCellProps } from '@atoms/TableCell';
-export * from '@atoms/TableHeaderCell';
-export { TableHeaderCellProps } from '@atoms/TableHeaderCell';
-export * from '@atoms/Textarea';
-export { TextareaProps } from '@atoms/Textarea';
-export * from '@atoms/Toast';
-export { ToastProps } from '@atoms/Toast';
-export * from '@atoms/Toggle';
-export { ToggleProps } from '@atoms/Toggle';
-export * from '@atoms/Tooltip';
-export { TooltipProps } from '@atoms/Tooltip';
-export * from '@molecules/AppHeader';
-export { AppHeaderProps } from '@molecules/AppHeader';
-export * from '@molecules/AssistantModal';
-export { AssistantModalProps } from '@molecules/AssistantModal';
-export * from '@molecules/ButtonControlGroup';
-export { ButtonControlGroupProps } from '@molecules/ButtonControlGroup';
-export * from '@molecules/CardSidebar';
-export { CardSidebarProps } from '@molecules/CardSidebar';
-export * from '@molecules/CodeScriptEditorButton';
-export { CodeScriptEditorButtonProps } from '@molecules/CodeScriptEditorButton';
-export * from '@molecules/FormField';
-export { FormFieldProps } from '@molecules/FormField';
-export * from '@molecules/LaunchContent';
-export { LaunchContentProps } from '@molecules/LaunchContent';
-export * from '@molecules/Menu';
-export { MenuProps } from '@molecules/Menu';
-export * from '@molecules/Navbar';
-export { NavbarProps } from '@molecules/Navbar';
-export * from '@molecules/ProtocolConfiguration';
-export { ProtocolConfigurationProps } from '@molecules/ProtocolConfiguration';
-export * from '@molecules/ProtocolYamlCard';
-export { ProtocolYamlCardProps } from '@molecules/ProtocolYamlCard';
-export * from '@molecules/PythonEditorModal';
-export { PythonEditorModalProps } from '@molecules/PythonEditorModal';
-export * from '@molecules/SelectField';
-export { SelectFieldProps } from '@molecules/SelectField';
-export * from '@molecules/Sidebar';
-export { SidebarProps } from '@molecules/Sidebar';
-export * from '@molecules/Table';
-export { TableColumn, TableProps } from '@molecules/Table';
-export * from '@molecules/TabGroup';
-export { TabGroupProps } from '@molecules/TabGroup';
-export * from '@molecules/ToastManager';
-export { ToastContainerProps, ToastManagerProps } from '@molecules/ToastManager';
-export * from '@organisms/AppLayout';
-export { AppLayoutProps } from '@organisms/AppLayout';
-export * from '@organisms/AreaGraph';
-export { AreaGraphProps } from '@organisms/AreaGraph';
-export * from '@organisms/BarGraph';
-export { BarDataSeries, BarGraphProps, BarGraphVariant } from '@organisms/BarGraph';
-export * from '@organisms/Boxplot';
-export { BoxplotProps } from '@organisms/Boxplot';
-export * from '@organisms/Chromatogram';
-export { ChromatogramProps, PeakData } from '@organisms/Chromatogram';
-export * from '@organisms/DotPlot';
-export { DotPlotProps } from '@organisms/DotPlot';
-export * from '@organisms/Heatmap';
-export { HeatmapProps } from '@organisms/Heatmap';
-export * from '@organisms/Histogram';
-export { HistogramDataSeries, HistogramProps } from '@organisms/Histogram';
-export * from '@organisms/LineGraph';
-export { LineDataSeries, LineGraphProps, LineGraphVariant, MarkerSymbol } from '@organisms/LineGraph';
-export * from '@organisms/Main';
-export { MainProps } from '@organisms/Main';
-export * from '@organisms/PieChart';
-export { PieChartProps, PieDataSeries, PieTextInfo } from '@organisms/PieChart';
-export * from '@organisms/ScatterGraph';
-export { ScatterDataPoint, ScatterDataSeries, ScatterGraphProps } from '@organisms/ScatterGraph';
-export * from '@organisms/TaskScripts';
-import React from 'react';
+import * as React$1 from 'react';
+import React__default, { ClassAttributes, HTMLAttributes, ReactNode } from 'react';
+import { OnChange } from '@monaco-editor/react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ExtraProps } from 'react-markdown';
+
+type BadgeSize = "small" | "medium";
+type BadgeVariant = "default" | "primary";
+interface BadgeProps {
+    children: React__default.ReactNode;
+    size?: BadgeSize;
+    variant?: BadgeVariant;
+    disabled?: boolean;
+    iconLeft?: React__default.ReactNode;
+    iconRight?: React__default.ReactNode;
+    className?: string;
+}
+declare const Badge: React__default.FC<BadgeProps>;
+
+type ButtonSize = "small" | "medium";
+type ButtonVariant = "primary" | "secondary" | "tertiary";
+interface ButtonProps extends React__default.ButtonHTMLAttributes<HTMLButtonElement> {
+    children: React__default.ReactNode;
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    loading?: boolean;
+    leftIcon?: React__default.ReactNode;
+    rightIcon?: React__default.ReactNode;
+    noPadding?: boolean;
+    fullWidth?: boolean;
+}
+declare const Button: React__default.ForwardRefExoticComponent<ButtonProps & React__default.RefAttributes<HTMLButtonElement>>;
+
+interface ButtonControlProps {
+    icon?: React__default.ReactNode;
+    selected?: boolean;
+    disabled?: boolean;
+    onClick?: () => void;
+}
+declare const ButtonControl: React__default.FC<ButtonControlProps>;
+
+type CardSize = "small" | "medium" | "large";
+type CardVariant = "default" | "outlined" | "elevated";
+interface CardProps extends Omit<React__default.HTMLAttributes<HTMLDivElement>, "title"> {
+    children: React__default.ReactNode;
+    title?: React__default.ReactNode;
+    size?: CardSize;
+    variant?: CardVariant;
+    className?: string;
+    fullWidth?: boolean;
+}
+declare const Card: React__default.ForwardRefExoticComponent<CardProps & React__default.RefAttributes<HTMLDivElement>>;
+
+interface CheckboxProps {
+    checked?: boolean;
+    onChange?: (checked: boolean) => void;
+    disabled?: boolean;
+    className?: string;
+    onClick?: (e: React__default.MouseEvent) => void;
+    label?: React__default.ReactNode;
+    noPadding?: boolean;
+}
+declare const Checkbox: React__default.ForwardRefExoticComponent<CheckboxProps & React__default.RefAttributes<HTMLInputElement>>;
+
+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__default.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__default.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__default.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__default.ReactNode;
+}
+declare const ErrorAlert: React__default.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__default.InputHTMLAttributes<HTMLInputElement>, "size"> {
+    size?: InputSize;
+    iconLeft?: React__default.ReactNode;
+    iconRight?: React__default.ReactNode;
+    error?: boolean;
+    disabled?: boolean;
+}
+declare const Input: React__default.ForwardRefExoticComponent<InputProps & React__default.RefAttributes<HTMLInputElement>>;
+
+interface LabelProps {
+    children: React__default.ReactNode;
+    infoText?: string;
+    className?: string;
+}
+declare const Label: React__default.FC<LabelProps>;
+
+type CodeComponentProps = ClassAttributes<HTMLElement> & HTMLAttributes<HTMLElement> & ExtraProps & {
+    inline?: boolean;
+};
+type MarkdownDisplayProps = {
+    markdown: string;
+    codeRenderer?: (props: CodeComponentProps) => React__default.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;
+}
+declare const MenuItem: React$1.ForwardRefExoticComponent<MenuItemProps & React$1.RefAttributes<HTMLDivElement>>;
+
+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__default.MouseEvent<HTMLElement>) => void;
+    onCancel?: (e?: React__default.MouseEvent<HTMLElement>) => void;
+    okText?: string;
+    cancelText?: string;
+    placement?: PopConfirmPlacement;
+    children: ReactNode;
+    className?: string;
+    okButtonProps?: React__default.ButtonHTMLAttributes<HTMLButtonElement>;
+    cancelButtonProps?: React__default.ButtonHTMLAttributes<HTMLButtonElement>;
+}
+declare const PopConfirm: React__default.FC<PopConfirmProps>;
+
+interface SupportiveTextProps {
+    children: React__default.ReactNode;
+    showCheck?: boolean;
+    className?: string;
+}
+declare const SupportiveText: React__default.FC<SupportiveTextProps>;
+
+type TabSize = "small" | "medium";
+interface TabProps {
+    label: string;
+    active?: boolean;
+    disabled?: boolean;
+    size?: TabSize;
+    onClick?: () => void;
+}
+declare const Tab: React__default.FC<TabProps>;
+
+interface TableCellProps extends React__default.TdHTMLAttributes<HTMLTableCellElement> {
+    children?: React__default.ReactNode;
+    align?: "left" | "center" | "right";
+    width?: string;
+    className?: string;
+}
+declare const TableCell: React__default.ForwardRefExoticComponent<TableCellProps & React__default.RefAttributes<HTMLTableCellElement>>;
+
+interface TableHeaderCellProps extends React__default.ThHTMLAttributes<HTMLTableCellElement> {
+    children?: React__default.ReactNode;
+    sortable?: boolean;
+    sortDirection?: "asc" | "desc" | null;
+    onSort?: () => void;
+    filterable?: boolean;
+    filterOptions?: DropdownOption[];
+    filterValue?: string;
+    onFilterChange?: (value: string) => void;
+    width?: string;
+    className?: string;
+}
+declare const TableHeaderCell: React__default.ForwardRefExoticComponent<TableHeaderCellProps & React__default.RefAttributes<HTMLTableCellElement>>;
+
+type TextareaSize = "xsmall" | "small";
+interface TextareaProps extends Omit<React__default.TextareaHTMLAttributes<HTMLTextAreaElement>, "size"> {
+    size?: TextareaSize;
+    error?: boolean;
+    disabled?: boolean;
+    fullWidth?: boolean;
+    rows?: number;
+}
+declare const Textarea: React__default.ForwardRefExoticComponent<TextareaProps & React__default.RefAttributes<HTMLTextAreaElement>>;
+
+type ToastType = "info" | "success" | "warning" | "danger" | "default";
+interface ToastProps {
+    type?: ToastType;
+    heading: string;
+    description?: string;
+    className?: string;
+}
+declare const Toast: React__default.FC<ToastProps>;
+
+interface ToggleProps {
+    checked?: boolean;
+    onChange?: (checked: boolean) => void;
+    disabled?: boolean;
+    label?: string;
+    className?: string;
+}
+declare const Toggle: React__default.FC<ToggleProps>;
+
+type TooltipPlacement = "top" | "right" | "bottom" | "left";
+interface TooltipProps {
+    content: ReactNode;
+    children: ReactNode;
+    placement?: TooltipPlacement;
+    className?: string;
+    delay?: number;
+}
+declare const Tooltip: React__default.FC<TooltipProps>;
+
+interface UserProfileProps {
+    name: string;
+    avatar?: string;
+}
+interface AppHeaderProps {
+    hostname: string;
+    userProfile: UserProfileProps;
+    onHomeClick?: () => void;
+    onSettingsClick?: () => void;
+    onUserProfileClick?: () => void;
+}
+declare const AppHeader: React__default.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__default.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__default.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;
+}
+declare const CardSidebar: React$1.ForwardRefExoticComponent<CardSidebarProps & React$1.RefAttributes<HTMLDivElement>>;
+
+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;
+}
+declare const FormField: React$1.ForwardRefExoticComponent<FormFieldProps & React$1.RefAttributes<HTMLInputElement>>;
+
+interface LaunchContentProps {
+    initialCode?: string;
+    onDeploy?: () => void;
+    versions?: string[];
+    currentVersion?: string;
+    onVersionChange?: (version: string) => void;
+}
+declare const LaunchContent: React__default.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__default.FC<MenuProps>;
+
+interface OrganizationInfo {
+    name: string;
+    subtext?: string;
+    logo?: React__default.ReactNode;
+}
+interface NavbarProps {
+    organization: OrganizationInfo;
+}
+declare const Navbar: React__default.FC<NavbarProps>;
+
+interface ProtocolConfigurationProps {
+    className?: string;
+}
+declare const ProtocolConfiguration: React__default.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__default.FC<ProtocolYamlCardProps>;
+
+interface PythonEditorModalProps {
+    open: boolean;
+    initialValue?: string;
+    title?: string;
+    onSave: (value: string) => void;
+    onCancel: () => void;
+}
+declare const PythonEditorModal: React__default.FC<PythonEditorModalProps>;
+
+interface SelectFieldProps extends Omit<DropdownProps, "className"> {
+    label: string;
+    infoText?: string;
+    supportiveText?: string;
+    showSupportiveCheck?: boolean;
+    className?: string;
+}
+declare const SelectField: React$1.ForwardRefExoticComponent<SelectFieldProps & React$1.RefAttributes<HTMLDivElement>>;
+
+interface SidebarItemProps {
+    icon: IconName;
+    label: string;
+    active?: boolean;
+    onClick?: () => void;
+}
+interface SidebarProps {
+    items: SidebarItemProps[];
+    activeItem?: string;
+    onItemClick?: (label: string) => void;
+}
+declare const Sidebar: React__default.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__default.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;
+    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, 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__default.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__default.FC<ToastManagerProps>;
+
+interface AppLayoutProps {
+    userProfile: {
+        name: string;
+        avatar?: string;
+    };
+    hostname: string;
+    organization: {
+        name: string;
+        subtext?: string;
+        logo?: React__default.ReactNode;
+    };
+    children?: React__default.ReactNode;
+}
+declare const AppLayout: React__default.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__default.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__default.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__default.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__default.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__default.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__default.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__default.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__default.FC<HistogramProps>;
+
+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__default.FC<LineGraphProps>;
+
+interface MainProps {
+    userProfile: {
+        name: string;
+        avatar?: string;
+    };
+    hostname: string;
+    organization: {
+        name: string;
+        subtext?: string;
+        logo?: React__default.ReactNode;
+    };
+}
+declare const Main: React__default.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__default.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__default.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__default.FC<ScatterGraphProps>;
 
 /**
  * Centralized color system for TetraScience UI
@@ -217,18 +1385,18 @@ declare const defaultTheme: Theme;
 
 interface ThemeProviderProps {
     theme?: Theme;
-    children: React.ReactNode;
+    children: React__default.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 the root element, making them available to both
- * styled-components and SCSS styles.
+ * 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-react-ui';
+ * import { ThemeProvider, Button } from '@tetrascience-npm/tetrascience-react-ui';
  *
  * const customTheme = {
  *   colors: {
@@ -244,7 +1412,7 @@ interface ThemeProviderProps {
  * </ThemeProvider>
  * ```
  */
-declare const ThemeProvider: React.FC<ThemeProviderProps>;
+declare const ThemeProvider: React__default.FC<ThemeProviderProps>;
 
-export { CHART_COLORS, COLORS, ThemeProvider, defaultTheme };
-export type { ColorToken, Theme, ThemeColors, ThemeProviderProps, ThemeRadius, ThemeSpacing };
+export { AppHeader, AppLayout, AreaGraph, AssistantModal, Badge, BarGraph, Boxplot, Button, ButtonControl, ButtonControlGroup, CHART_COLORS, COLORS, Card, CardSidebar, Checkbox, Chromatogram, ChromatogramChart, CodeEditor, CodeScriptEditorButton, DotPlot, Dropdown, ErrorAlert, FormField, Heatmap, Histogram, Icon, IconName, Input, Label, LaunchContent, LineGraph, Main, MarkdownDisplay, Menu, MenuItem, Modal, Navbar, PieChart, PlateMap, PopConfirm, ProtocolConfiguration, ProtocolYamlCard, PythonEditorModal, ScatterGraph, SelectField, Sidebar, SupportiveText, Tab, TabGroup, Table, TableCell, TableHeaderCell, Textarea, ThemeProvider, Toast, ToastManager, Toggle, Tooltip, defaultTheme };
+export type { AppHeaderProps, AppLayoutProps, AreaDataSeries, AreaGraphProps, AreaGraphVariant, AssistantModalProps, BadgeProps, BarDataSeries, BarGraphProps, BarGraphVariant, BaselineCorrectionMethod, BoundaryMarkerStyle, BoxDataSeries, BoxplotProps, ButtonControlGroupProps, ButtonControlProps, ButtonProps, CardProps, CardSidebarProps, CheckboxProps, ChromatogramChartProps, ChromatogramProps, ChromatogramSeries, CodeEditorProps, CodeScriptEditorButtonProps, ColorScale, ColorToken, DotPlotDataSeries, DotPlotProps, DotPlotVariant, DropdownOption, DropdownProps, ErrorAlertProps, FormFieldProps, HeatmapProps, HistogramDataSeries, HistogramProps, IconProps, IconsProps, InputProps, LabelProps, LaunchContentProps, LineDataSeries, LineGraphProps, LineGraphVariant, MainProps, MarkdownDisplayProps, MarkerSymbol, MenuItemProps, MenuProps, ModalProps, NavbarProps, PeakAnnotation, PeakData, PeakDetectionOptions, PieChartProps, PieDataSeries, PieTextInfo, PlateFormat, PlateMapProps, PopConfirmProps, ProtocolConfigurationProps, ProtocolYamlCardProps, PythonEditorModalProps, ScatterDataPoint, ScatterDataSeries, ScatterGraphProps, SelectFieldProps, SidebarProps, SupportiveTextProps, TabGroupProps, TabProps, TabSize, TableCellProps, TableColumn, TableHeaderCellProps, TableProps, TextareaProps, Theme, ThemeColors, ThemeProviderProps, ThemeRadius, ThemeSpacing, ToastContainerProps, ToastManagerProps, ToastProps, ToastType, ToggleProps, TooltipProps, WellData };