@tetrascience-npm/tetrascience-react-ui 0.3.0 → 0.4.0-beta.10.1

package/dist/index.d.ts

@@ -1,109 +1,1886 @@
-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 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';
+
+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
@@ -217,14 +1994,14 @@ declare const defaultTheme: Theme;
 
 interface ThemeProviderProps {
     theme?: Theme;
-    children: React.ReactNode;
+    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 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
@@ -244,7 +2021,7 @@ interface ThemeProviderProps {
  * </ThemeProvider>
  * ```
  */
-declare const ThemeProvider: React.FC<ThemeProviderProps>;
+declare const ThemeProvider: React$1.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, 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 };