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

package/dist/index.d.ts

@@ -31,8 +31,10 @@ import { JSX } from 'react/jsx-runtime';
 import { JSXElementConstructor } from 'react';
 import { Label as Label_2 } from 'radix-ui';
 import { LanguageModelUsage } from 'ai';
+import { LanguageRegistration } from 'shiki/core';
 import { Locale } from 'react-day-picker';
 import { LucideIcon } from 'lucide-react';
+import { LucideProps } from 'lucide-react';
 import { MemoExoticComponent } from 'react';
 import { Menubar as Menubar_2 } from 'radix-ui';
 import { MouseEvent as MouseEvent_2 } from 'react';
@@ -42,6 +44,7 @@ import { PaginationState } from '@tanstack/react-table';
 import { Popover as Popover_2 } from 'radix-ui';
 import { PropsWithChildren } from 'react';
 import { RadioGroup as RadioGroup_2 } from 'radix-ui';
+import { RDKitModule } from '@rdkit/rdkit';
 import * as React_2 from 'react';
 import { ReactElement } from 'react';
 import { ReactNode } from 'react';
@@ -132,9 +135,9 @@ export declare interface AreaDataSeries {
     fill?: "tozeroy" | "tonexty" | "toself";
 }
 
-export declare const AreaGraph: default_2.FC<AreaGraphProps>;
+export declare const AreaPlot: default_2.FC<AreaPlotProps>;
 
-export declare interface AreaGraphProps {
+export declare interface AreaPlotProps {
     dataSeries: AreaDataSeries[];
     /**
      * Fixed width in pixels. When omitted, the chart fills its container and
@@ -148,7 +151,7 @@ export declare interface AreaGraphProps {
     height?: number;
     xRange?: [number, number];
     yRange?: [number, number];
-    variant?: AreaGraphVariant;
+    variant?: AreaPlotVariant;
     xTitle?: string;
     yTitle?: string;
     title?: string;
@@ -161,10 +164,79 @@ export declare interface AreaGraphProps {
     xTickText?: string[];
 }
 
-export declare type AreaGraphVariant = "normal" | "stacked";
+export declare type AreaPlotVariant = "normal" | "stacked";
 
 export declare function AspectRatio({ ...props }: React.ComponentProps<typeof AspectRatio_2.Root>): JSX.Element;
 
+/** Where the AI Assistant panel docks relative to the main content. */
+export declare type AssistantDock = "left" | "right" | "bottom";
+
+/**
+ * Segmented control of dock icons. Clicking an inactive icon docks + shows the
+ * assistant there; clicking the active icon again hides it.
+ */
+export declare function AssistantDockControls({ label, className }: AssistantDockControlsProps): JSX.Element;
+
+export declare interface AssistantDockControlsProps {
+    /** Label shown before the icons. Pass `null` to hide it. */
+    label?: React_2.ReactNode;
+    className?: string;
+}
+
+/**
+ * Docks the assistant left / right / bottom of the main content and resizes it
+ * with the design-system `Resizable` (react-resizable-panels). Must be rendered
+ * inside an `AssistantLayoutProvider`; pair with `AssistantDockControls`.
+ *
+ * The group is keyed by `dock`, so changing dock remounts the panels. The
+ * assistant panel is therefore re-created on redock (its transient state is not
+ * preserved across a dock change) — a deliberate trade-off for using the shared
+ * resizable primitive rather than a bespoke splitter.
+ */
+export declare function AssistantLayout({ assistant, children, minSize, maxSize, className, assistantClassName, contentClassName, }: AssistantLayoutProps): JSX.Element;
+
+declare interface AssistantLayoutContextValue {
+    /** Where the assistant docks. Persisted. */
+    dock: AssistantDock;
+    setDock: (dock: AssistantDock) => void;
+    /** Assistant size as a percentage of the layout along the dock axis. Persisted. */
+    size: number;
+    setSize: (size: number) => void;
+    /** Whether the assistant is shown. In-memory by default (resets to visible on reload). */
+    visible: boolean;
+    setVisible: (visible: boolean) => void;
+}
+
+export declare interface AssistantLayoutProps {
+    /** The AI Assistant panel content (e.g. a `<Chat />`). */
+    assistant: React_2.ReactNode;
+    /** The main content; fills the remaining space (and the whole body when the assistant is hidden). */
+    children: React_2.ReactNode;
+    /** Min assistant size as a percentage of the layout. */
+    minSize?: number;
+    /** Max assistant size as a percentage of the layout. */
+    maxSize?: number;
+    className?: string;
+    assistantClassName?: string;
+    contentClassName?: string;
+}
+
+export declare function AssistantLayoutProvider({ children, storageKey, defaultDock, defaultSize, defaultVisible, persist, }: AssistantLayoutProviderProps): JSX.Element;
+
+export declare interface AssistantLayoutProviderProps {
+    children: React_2.ReactNode;
+    /** localStorage key prefix for the persisted dock + size. */
+    storageKey?: string;
+    /** Default dock when nothing is persisted. */
+    defaultDock?: AssistantDock;
+    /** Default assistant size as a percentage (1–99) of the layout. */
+    defaultSize?: number;
+    /** Whether the assistant starts visible. */
+    defaultVisible?: boolean;
+    /** Persist dock + size to localStorage. Defaults to `true`. */
+    persist?: boolean;
+}
+
 export declare const Attachment: ({ data, onRemove, className, children, ...props }: AttachmentProps) => JSX.Element;
 
 declare interface AttachmentContextValue {
@@ -285,6 +357,22 @@ export declare function AvatarGroupCount({ className, ...props }: React_2.Compon
 
 export declare function AvatarImage({ className, ...props }: React_2.ComponentProps<typeof Avatar_2.Image>): JSX.Element;
 
+/**
+ * Axis configuration
+ */
+export declare interface AxisConfig {
+    /** Axis label */
+    title?: string;
+    /** Scale type (linear or log) */
+    scale?: ScaleType;
+    /** Fixed axis range [min, max] */
+    range?: [number, number];
+    /** Auto-range with optional padding percentage (0-1) */
+    autoRange?: boolean;
+    /** Padding percentage for auto-range (default: 0.1 = 10%) */
+    autoRangePadding?: number;
+}
+
 export declare function Badge({ className, variant, asChild, ...props }: React_2.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & {
     asChild?: boolean;
 }): JSX.Element;
@@ -305,22 +393,9 @@ export declare const bannerVariants: (props?: ({
     variant?: "destructive" | "info" | "positive" | "warning" | null | undefined;
 } & ClassProp) | undefined) => string;
 
-export declare interface BarDataSeries {
-    x: number[];
-    y: number[];
-    name: string;
-    /** Optional color override (auto-assigned from CHART_COLORS if not provided) */
-    color?: string;
-    error_y?: {
-        type: "data";
-        array: number[];
-        visible: boolean;
-    };
-}
-
-export declare const BarGraph: default_2.FC<BarGraphProps>;
+export declare const BarChart: default_2.FC<BarChartProps>;
 
-export declare interface BarGraphProps {
+export declare interface BarChartProps {
     dataSeries: BarDataSeries[];
     /**
      * Fixed width in pixels. When omitted, the chart fills its container and
@@ -334,7 +409,7 @@ export declare interface BarGraphProps {
     height?: number;
     xRange?: [number, number];
     yRange?: [number, number];
-    variant?: BarGraphVariant;
+    variant?: BarChartVariant;
     xTitle?: string;
     yTitle?: string;
     title?: string;
@@ -348,7 +423,20 @@ export declare interface BarGraphProps {
     xTickText?: string[];
 }
 
-export declare type BarGraphVariant = "group" | "stack" | "overlay";
+export declare type BarChartVariant = "group" | "stack" | "overlay";
+
+export declare interface BarDataSeries {
+    x: number[];
+    y: number[];
+    name: string;
+    /** Optional color override (auto-assigned from CHART_COLORS if not provided) */
+    color?: string;
+    error_y?: {
+        type: "data";
+        array: number[];
+        visible: boolean;
+    };
+}
 
 /**
  * Baseline correction method
@@ -378,9 +466,9 @@ export declare interface BoxDataSeries {
     pointpos?: number;
 }
 
-export declare const Boxplot: default_2.FC<BoxplotProps>;
+export declare const BoxPlot: default_2.FC<BoxPlotProps>;
 
-export declare interface BoxplotProps {
+export declare interface BoxPlotProps {
     dataSeries: BoxDataSeries[];
     /**
      * Fixed width in pixels. When omitted, the chart fills its container and
@@ -456,7 +544,7 @@ export declare const buttonGroupVariants: (props?: ({
 
 export declare const buttonVariants: (props?: ({
     variant?: "link" | "default" | "outline" | "secondary" | "ghost" | "destructive" | null | undefined;
-    size?: "default" | "sm" | "icon" | "xs" | "lg" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+    size?: "default" | "sm" | "xs" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
 } & ClassProp) | undefined) => string;
 
 export declare function Calendar({ className, classNames, showOutsideDays, captionLayout, buttonVariant, locale, formatters, components, ...props }: React_2.ComponentProps<typeof DayPicker> & {
@@ -747,14 +835,19 @@ export declare interface ChatSource {
 
 export declare function Checkbox({ className, ...props }: React_2.ComponentProps<typeof Checkbox_2.Root>): JSX.Element;
 
-export declare const Chromatogram: default_2.FC<ChromatogramProps>;
+declare const CHEVRONS: {
+    readonly left: React_2.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & React_2.RefAttributes<SVGSVGElement>>;
+    readonly right: React_2.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & React_2.RefAttributes<SVGSVGElement>>;
+    readonly up: React_2.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & React_2.RefAttributes<SVGSVGElement>>;
+    readonly down: React_2.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & React_2.RefAttributes<SVGSVGElement>>;
+};
 
-export declare const ChromatogramChart: default_2.FC<ChromatogramChartProps>;
+export declare const Chromatogram: default_2.FC<ChromatogramProps>;
 
 /**
- * Props for ChromatogramChart component
+ * Props for Chromatogram component
  */
-export declare interface ChromatogramChartProps {
+export declare interface ChromatogramProps {
     /** Array of data series to display */
     series: ChromatogramSeries[];
     /** Chart width in pixels */
@@ -848,19 +941,8 @@ export declare interface ChromatogramChartProps {
     titleTopMargin?: number;
 }
 
-export declare interface ChromatogramProps {
-    data?: PeakData[];
-    width?: number;
-    height?: number;
-    positionInterval?: number;
-    colorA?: string;
-    colorT?: string;
-    colorG?: string;
-    colorC?: string;
-}
-
 /**
- * Type definitions for ChromatogramChart component
+ * Type definitions for Chromatogram component
  */
 /**
  * Data series for chromatogram visualization
@@ -954,6 +1036,34 @@ export declare function CollapsibleContent({ ...props }: React.ComponentProps<ty
 
 export declare function CollapsibleTrigger({ ...props }: React.ComponentProps<typeof Collapsible_2.CollapsibleTrigger>): JSX.Element;
 
+/**
+ * Color mapping configuration
+ */
+export declare interface ColorMapping {
+    /** Type of mapping: data-driven or static */
+    type: "static" | "continuous" | "categorical";
+    /** Static color value (for type: "static") */
+    value?: string;
+    /** Data field to map (for type: "continuous" | "categorical") */
+    field?: string;
+    /** Color scale for continuous mapping */
+    colorScale?: string | Array<[number, string]>;
+    /** Discrete colors for categorical mapping */
+    categoryColors?: Record<string, string>;
+    /** Min/max values for continuous mapping (auto-calculated if not provided) */
+    min?: number;
+    max?: number;
+}
+
+/**
+ * Default colors for the scatter plot. Background, grid, and axis colors
+ * come from the active theme via `usePlotlyTheme`.
+ */
+export declare const COLORS: {
+    primary: string;
+    selected: string;
+};
+
 /**
  * Color scale definition for the heatmap visualization mode.
  *
@@ -1019,7 +1129,7 @@ export declare function CommandDialog({ title, description, children, className,
     showCloseButton?: boolean;
 }): JSX.Element;
 
-export declare function CommandEmpty({ className, ...props }: React_2.ComponentProps<typeof Command_2.Empty>): JSX.Element;
+export declare function CommandEmpty({ className, ...props }: React_2.ComponentProps<"div">): JSX.Element | null;
 
 export declare function CommandGroup({ className, ...props }: React_2.ComponentProps<typeof Command_2.Group>): JSX.Element;
 
@@ -1064,6 +1174,24 @@ declare interface CommonTdpSearchProps {
     renderResults?: (props: TdpResultsRenderProps) => default_2.ReactNode;
 }
 
+/**
+ * Set process-wide defaults for how RDKit is loaded. Call once, before the
+ * first molecule renders — typically at app startup. Later calls are ignored
+ * once loading has begun.
+ *
+ * Bundled apps should set `wasmSrc` — see the module doc above for why.
+ *
+ * @example
+ * ```ts
+ * // Serve the WASM yourself (e.g. copied into /public) — no CDN, air-gapped.
+ * configureRDKit({ wasmSrc: "/assets/RDKit_minimal.wasm" })
+ * // …or resolve it from the installed package via your bundler (Vite):
+ * import wasmSrc from "@rdkit/rdkit/dist/RDKit_minimal.wasm?url"
+ * configureRDKit({ wasmSrc })
+ * ```
+ */
+export declare function configureRDKit(config: RDKitLoaderConfig): void;
+
 export declare const Confirmation: ({ className, approval, state, children, ...props }: ConfirmationProps) => JSX.Element | null;
 
 export declare const ConfirmationAccepted: ({ children }: {
@@ -1257,7 +1385,65 @@ export declare interface CostBreakdown {
     cache?: number;
 }
 
-export declare function DataAppShell({ appName, appFullName, appIcon, version, navGroups, onAppNameClick, backToPlatformPath, onBackToPlatform, userMenu, breadcrumbs, onHelpClick, headerActions, sidebarPanel, showNavRail, children, className, }: DataAppShellProps): JSX.Element;
+export declare function DataAppShell({ appName, appFullName, appIcon, version, navGroups, onAppNameClick, backToPlatformPath, onBackToPlatform, userMenu, breadcrumbs, headerLeft, headerCenter, headerActions, navVariant, primaryNav, sidebarPanel, secondaryBar, rightPanel, showNavRail, showTopBar, collapsed: collapsedProp, defaultCollapsed, onCollapsedChange, hideNavOnCollapse, autoCollapse, children, className, }: DataAppShellProps): JSX.Element;
+
+export declare interface DataAppShellContextValue {
+    /** Which axis the primary nav renders on. */
+    navVariant: DataAppShellNavVariant;
+    /** The shell's single collapse state — primary + secondary collapse together. */
+    collapsed: boolean;
+    /** Flip the shell collapse state (no-op when the shell is not collapsible). */
+    setCollapsed: (collapsed: boolean) => void;
+    /** When true, collapsing hides the primary rail so one icon rail remains. */
+    hideNavOnCollapse: boolean;
+}
+
+export declare type DataAppShellNavVariant = "vertical" | "horizontal";
+
+/**
+ * The Data App Shell's nav engine — one `navGroups` model rendered in three
+ * placements via `variant`:
+ *
+ * - **rail** — vertical icon-only (48px rail); labels via tooltip, user slot at the bottom
+ * - **sidebar** — vertical icon + label with group headers, user slot at the bottom
+ * - **top** — horizontal bar; user/actions slot on the right
+ *
+ * Active state is either controlled via `activeKey` or per-page `isActive`.
+ * Width/background chrome is owned by the container (the shell's rail wrapper,
+ * a Sheet, or a TopBar) — this component is layout-neutral.
+ */
+export declare function DataAppShellPrimaryNav({ variant, navGroups, activeKey, onSelect, header, user, actions, renderItem, className, ...props }: DataAppShellPrimaryNavProps): JSX.Element;
+
+export declare const dataAppShellPrimaryNavItemVariants: (props?: ({
+    variant?: "top" | "rail" | "sidebar" | null | undefined;
+    active?: boolean | null | undefined;
+} & ClassProp) | undefined) => string;
+
+export declare interface DataAppShellPrimaryNavProps extends Omit<React_2.ComponentProps<"nav">, "children" | "onSelect">, VariantProps<typeof dataAppShellPrimaryNavVariants> {
+    /** Navigation groups; each group contains one or more pages */
+    navGroups: NavGroup[];
+    /** Controlled active page id — takes precedence over per-page `isActive` */
+    activeKey?: string;
+    /** Called with the selected page id after the page's own `onClick` */
+    onSelect?: (key: string, page: NavPage) => void;
+    /** Slot above the items in `rail`/`sidebar`, left of the items in `top` (e.g. app logo) */
+    header?: React_2.ReactNode;
+    /** User slot (e.g. `<UserMenu/>`) — bottom in `rail`/`sidebar`, right in `top` */
+    user?: React_2.ReactNode;
+    /** Action slot rendered alongside `user` */
+    actions?: React_2.ReactNode;
+    /** Escape hatch — full control over an item's rendering */
+    renderItem?: (page: NavPage, state: {
+        active: boolean;
+        variant: DataAppShellPrimaryNavVariant;
+    }) => React_2.ReactNode;
+}
+
+export declare type DataAppShellPrimaryNavVariant = "rail" | "sidebar" | "top";
+
+export declare const dataAppShellPrimaryNavVariants: (props?: ({
+    variant?: "top" | "rail" | "sidebar" | null | undefined;
+} & ClassProp) | undefined) => string;
 
 export declare interface DataAppShellProps {
     /** Application name/abbreviation shown in the logo button */
@@ -1280,20 +1466,195 @@ export declare interface DataAppShellProps {
     userMenu?: React_2.ReactNode;
     /** Breadcrumb items from root to current page */
     breadcrumbs?: BreadcrumbItemConfig[];
-    /** Callback when the help button is clicked; omit to hide the button */
-    onHelpClick?: () => void;
+    /** Slot rendered after the breadcrumbs in the top bar's left group
+     *  (e.g. a collapsed horizontal workflow's step dropdown) */
+    headerLeft?: React_2.ReactNode;
+    /** Center "context" slot in the top bar (e.g. a version / status selector) */
+    headerCenter?: React_2.ReactNode;
     /** Slot for right-side actions in the top nav (e.g. data count pills, next button) */
     headerActions?: React_2.ReactNode;
-    /** Slot rendered between the icon rail and the content (e.g. WorkflowPanel) */
+    /** Primary nav axis — `vertical` (sidebar/rail, default) or `horizontal` (top nav row) */
+    navVariant?: DataAppShellNavVariant;
+    /**
+     * Vertical primary nav presentation:
+     * - `rail` (default) — permanent 48px icon-only rail.
+     * - `sidebar` — collapsible 220px sidebar with labels; its brand-row chevron
+     *   collapses it to an icon rail (with an expand chevron under the logo),
+     *   driven by the shell's `collapsed` state.
+     */
+    primaryNav?: "rail" | "sidebar";
+    /** Slot rendered between the primary nav and the content (e.g. a vertical `DataAppShellSecondaryNav`) */
     sidebarPanel?: React_2.ReactNode;
-    /** Show the desktop icon nav rail. Set false to reclaim width when the panel is collapsed. */
+    /** Full-width zone between the top bar and the content row (e.g. a horizontal `DataAppShellSecondaryNav`) */
+    secondaryBar?: React_2.ReactNode;
+    /** Slot rendered after the content (e.g. a DataAppShellRightPanel) — its FAB anchors to the content row */
+    rightPanel?: React_2.ReactNode;
+    /** Show the primary nav zone. Set false to hide it entirely. */
     showNavRail?: boolean;
+    /** Show the top bar zone. Set false to hide it entirely. */
+    showTopBar?: boolean;
+    /** Controlled collapse state — drives the secondary zone (via ShellContext)
+     *  and, with `hideNavOnCollapse`, the primary rail */
+    collapsed?: boolean;
+    /** Uncontrolled initial collapse state */
+    defaultCollapsed?: boolean;
+    /** Called whenever the shell collapse state flips */
+    onCollapsedChange?: (collapsed: boolean) => void;
+    /** Collapsing also hides the primary rail, leaving one icon rail (the secondary
+     *  nav) with an expand affordance — or a floating expand button if there is none. */
+    hideNavOnCollapse?: boolean;
+    /** Media query that auto-collapses the shell while it matches.
+     *  Pass `false` to disable. Defaults to `"(max-width: 1023px)"`. */
+    autoCollapse?: string | false;
     /** Main content area */
     children: React_2.ReactNode;
     /** Additional className for the root container */
     className?: string;
 }
 
+/**
+ * Right-hand panel for the Data App Shell (SW-2117), in two variants:
+ *
+ * - `docked` (default) — rendered in normal flow as a flex sibling of the main
+ *   content, so opening/resizing pushes main narrower. Width is drag-resizable
+ *   and persisted per `id`.
+ * - `overlay` — reuses the design-system `Sheet` (`side="right"`): slides in
+ *   over the content with a scrim and does not reflow main.
+ *
+ * In both variants a floating FAB trigger re-opens the panel while it is
+ * closed, and the body is a plain slot — a chat, history list, inspector, ….
+ * Pass it to the shell's `rightPanel` slot, or place it after the main content
+ * inside a `relative` flex row:
+ *
+ * ```tsx
+ * <div className="relative flex flex-1 min-h-0">
+ *   <main className="flex-1 min-w-0">…</main>
+ *   <DataAppShellRightPanel id="chat" open={open} onOpenChange={setOpen} title="Chat">
+ *     …
+ *   </DataAppShellRightPanel>
+ * </div>
+ * ```
+ */
+export declare function DataAppShellRightPanel({ id, open, onOpenChange, variant, resizable, defaultWidth, minWidth, maxWidth, persist, title, icon, headerActions, showTrigger, triggerIcon, triggerLabel, triggerRef, children, className, ref, ...props }: DataAppShellRightPanelProps): JSX.Element | null;
+
+export declare interface DataAppShellRightPanelProps extends Omit<React_2.ComponentProps<"aside">, "id" | "title"> {
+    /** Unique panel id — keys the persisted width in localStorage. */
+    id: string;
+    /** Whether the panel is shown or collapsed to the FAB trigger. */
+    open: boolean;
+    /** Called with the next open state (close button, Esc, scrim click, FAB). */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * `docked` (default) — in-flow flex sibling: opening/resizing pushes main narrower.
+     * `overlay` — reuses the design-system `Sheet`: slides in over content with a scrim, no reflow.
+     */
+    variant?: DataAppShellRightPanelVariant;
+    /** Show the drag handle and allow resizing. Defaults to `true`. Docked only — the overlay has a fixed width. */
+    resizable?: boolean;
+    /** Width in px when nothing is persisted yet. */
+    defaultWidth?: number;
+    /** Minimum width in px the panel can be resized to. */
+    minWidth?: number;
+    /** Maximum width in px the panel can be resized to. */
+    maxWidth?: number;
+    /** Persist the width to localStorage. Defaults to `true`. */
+    persist?: boolean;
+    /** Header title. The header row also carries the close button. */
+    title?: React_2.ReactNode;
+    /** Optional element rendered before the title (e.g. an app icon). */
+    icon?: React_2.ReactNode;
+    /** Extra elements rendered in the header, before the close button. */
+    headerActions?: React_2.ReactNode;
+    /** Render the floating FAB trigger while closed. Defaults to `true`. Set
+     *  `false` when the trigger lives elsewhere (e.g. an `icon`-variant
+     *  `DataAppShellRightPanelTrigger` in the shell's `headerActions`). */
+    showTrigger?: boolean;
+    /** Icon inside the FAB trigger. Defaults to a panel-open icon. */
+    triggerIcon?: React_2.ReactNode;
+    /** Accessible label for the FAB trigger. */
+    triggerLabel?: string;
+    /** Ref to an external trigger (e.g. a top-bar icon trigger) that receives
+     *  focus when the panel closes and `showTrigger` is `false`. */
+    triggerRef?: React_2.RefObject<HTMLButtonElement | null>;
+    /** Panel content — any React node (a chat, history list, inspector, …). */
+    children?: React_2.ReactNode;
+}
+
+/**
+ * Trigger for a `DataAppShellRightPanel`, in two variants:
+ *
+ * - `fab` (default) — floating action button; what the panel auto-renders
+ *   while closed. Positioned `absolute` — place inside a `relative` container
+ *   (normally the shell's content area).
+ * - `icon` — ghost icon button sized like the shell's top-bar actions. Place
+ *   it in the shell's `headerActions`, set `showTrigger={false}` on the panel,
+ *   and pass the same ref to the panel's `triggerRef` so focus returns here
+ *   when the panel closes.
+ *
+ * With `asChild` the trigger renders no element of its own and instead merges
+ * onto its child — any clickable element (a link, menu item, custom button)
+ * can act as the trigger.
+ */
+export declare function DataAppShellRightPanelTrigger({ className, variant, size, asChild, children, ...props }: DataAppShellRightPanelTriggerProps): JSX.Element;
+
+export declare interface DataAppShellRightPanelTriggerProps extends React_2.ComponentProps<"button">, VariantProps<typeof dataAppShellRightPanelTriggerVariants> {
+    /** Merge the trigger styling/props onto the child element instead of
+     *  rendering a `<button>` — makes anything clickable a panel trigger. */
+    asChild?: boolean;
+}
+
+export declare const dataAppShellRightPanelTriggerVariants: (props?: ({
+    variant?: "icon" | "fab" | null | undefined;
+    size?: "default" | "lg" | null | undefined;
+} & ClassProp) | undefined) => string;
+
+export declare type DataAppShellRightPanelVariant = "docked" | "overlay";
+
+/**
+ * The Data App Shell's secondary (per-page/step) nav — one `steps` model
+ * rendered on either axis via `orientation`:
+ *
+ * - **vertical** — collapsible left panel; collapses to an icon-only rail
+ *   with tooltips and a ▸ expand toggle
+ * - **horizontal** — wizard/stepper row above the main content
+ *
+ * Step status (`done` / `active` / `todo`) is derived linearly from
+ * `activeKey`, or set explicitly per step. Supports one level of nesting.
+ */
+export declare function DataAppShellSecondaryNav({ orientation, steps, activeKey, onSelect, title, collapsible, collapsed, defaultCollapsed, onCollapsedChange, className, ...props }: DataAppShellSecondaryNavProps): JSX.Element;
+
+export declare const dataAppShellSecondaryNavItemVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | "rail" | null | undefined;
+    status?: "done" | "active" | "todo" | null | undefined;
+} & ClassProp) | undefined) => string;
+
+export declare type DataAppShellSecondaryNavOrientation = "vertical" | "horizontal";
+
+export declare interface DataAppShellSecondaryNavProps extends Omit<React_2.ComponentProps<"nav">, "onSelect" | "title">, VariantProps<typeof dataAppShellSecondaryNavVariants> {
+    /** Step entries; one level of nesting via `steps` on a step */
+    steps: NavStep[];
+    /** Controlled active step id — steps before it derive `done`, after it `todo` */
+    activeKey?: string;
+    /** Called with the selected step id after the step resolves as enabled */
+    onSelect?: (key: string, step: NavStep) => void;
+    /** Panel title shown in the vertical header (e.g. "Steps") */
+    title?: React_2.ReactNode;
+    /** Renders the collapse toggle. Vertical collapses to an icon rail;
+     *  horizontal collapses to a compact step dropdown. */
+    collapsible?: boolean;
+    /** Controlled collapsed state. When omitted inside a `DataAppShell`, the
+     *  shell's single collapse state drives it (one toggle for all zones). */
+    collapsed?: boolean;
+    /** Uncontrolled initial collapsed state */
+    defaultCollapsed?: boolean;
+    /** Called when the collapse toggle flips the state */
+    onCollapsedChange?: (collapsed: boolean) => void;
+}
+
+export declare const dataAppShellSecondaryNavVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+} & ClassProp) | undefined) => string;
+
 export declare function DataTable<TData, TValue>({ columns, data, toolbar, enableSorting, enableColumnVisibility, children, columnOrder: controlledColumnOrder, onColumnOrderChange, columnVisibility: controlledColumnVisibility, onColumnVisibilityChange, columnLabels: controlledColumnLabels, onColumnLabelChange, enablePagination, defaultPageSize, pagination: controlledPagination, onPaginationChange, enableColumnReorder, enableFiltering, filters: controlledFilters, onFiltersChange, filterConfig, manualFiltering, enableGrouping, grouping: controlledGrouping, onGroupingChange, groupConfig, density, className, variant, containerClassName, truncate, }: DataTableProps<TData, TValue>): JSX.Element;
 
 export declare function DataTableColumnToggle({ className }: DataTableColumnToggleProps): JSX.Element | null;
@@ -1368,6 +1729,28 @@ export declare interface DataTableProps<TData, TValue> {
     truncate?: boolean;
 }
 
+/**
+ * Default category colors (cycle through these)
+ */
+export declare const DEFAULT_CATEGORY_COLORS: readonly [string, string, string, string, string, string, string, string, string, string, string, string];
+
+/**
+ * Default color scale for continuous color mapping (CVD-friendly diverging ramp)
+ */
+export declare const DEFAULT_COLOR_SCALE: Array<[number, string]>;
+
+/**
+ * Default sizes
+ */
+export declare const DEFAULT_MARKER_SIZE = 8;
+
+/**
+ * Default downsampling configuration
+ */
+export declare const DEFAULT_MAX_POINTS = 5000;
+
+export declare const DEFAULT_SIZE_RANGE: [number, number];
+
 export declare function Dialog({ ...props }: React_2.ComponentProps<typeof Dialog_2.Root>): JSX.Element;
 
 export declare function DialogBody({ className, ...props }: React_2.ComponentProps<"div">): JSX.Element;
@@ -1402,39 +1785,34 @@ declare type DismissibleProps = {
     onDismiss?: never;
 };
 
-export declare const DotPlot: default_2.FC<DotPlotProps>;
-
-export declare interface DotPlotDataSeries {
-    x: number[];
-    y: number[];
-    name: string;
-    color?: string;
-    symbol?: MarkerSymbol_2;
-    size?: number;
+export declare interface DockPanels {
+    /** Resizable group orientation for this dock. */
+    orientation: "horizontal" | "vertical";
+    /** Whether the assistant panel renders before the content panel. */
+    assistantFirst: boolean;
 }
 
-export declare type DotPlotProps = {
-    dataSeries: DotPlotDataSeries | DotPlotDataSeries[];
-    /**
-     * Fixed width in pixels. When omitted, the chart fills its container and
-     * tracks the container's width via a `ResizeObserver`.
-     */
-    width?: number;
-    /**
-     * Fixed height in pixels. When omitted, the chart fills its container and
-     * tracks the container's height via a `ResizeObserver`.
-     */
-    height?: number;
-    title?: string;
-    xTitle?: string;
-    yTitle?: string;
-    variant?: DotPlotVariant;
-    markerSize?: number;
-};
+/**
+ * Maps a dock position to the resizable group's orientation and panel order.
+ *  - left   → horizontal, assistant first  [assistant | content]
+ *  - right  → horizontal, content first    [content | assistant]
+ *  - bottom → vertical,   content first    [content / assistant]
+ */
+export declare function dockPanels(dock: AssistantDock): DockPanels;
 
-export declare type DotPlotVariant = "default" | "stacked";
+/**
+ * Downsampling configuration for performance optimization
+ */
+export declare interface DownsamplingConfig {
+    /** Enable downsampling */
+    enabled: boolean;
+    /** Target number of points to display */
+    maxPoints?: number;
+    /** Downsampling strategy */
+    strategy?: "lttb";
+}
 
-export declare function DropdownMenu({ ...props }: React_2.ComponentProps<typeof DropdownMenu_2.Root>): JSX.Element;
+export declare function DropdownMenu({ modal, ...props }: React_2.ComponentProps<typeof DropdownMenu_2.Root>): JSX.Element;
 
 export declare function DropdownMenuCheckboxItem({ className, children, checked, inset, ...props }: React_2.ComponentProps<typeof DropdownMenu_2.CheckboxItem> & {
     inset?: boolean;
@@ -1475,6 +1853,19 @@ export declare function DropdownMenuSubTrigger({ className, inset, children, ...
 
 export declare function DropdownMenuTrigger({ ...props }: React_2.ComponentProps<typeof DropdownMenu_2.Trigger>): JSX.Element;
 
+export declare const Electropherogram: default_2.FC<ElectropherogramProps>;
+
+export declare interface ElectropherogramProps {
+    data?: PeakData[];
+    width?: number;
+    height?: number;
+    positionInterval?: number;
+    colorA?: string;
+    colorT?: string;
+    colorG?: string;
+    colorC?: string;
+}
+
 export declare function EmptyState({ variant, title, description, icon, action, className, ...props }: EmptyStateProps): JSX.Element;
 
 export declare interface EmptyStateProps extends React_2.ComponentProps<"div"> {
@@ -1547,12 +1938,18 @@ export declare interface FormSectionProps extends React_2.ComponentProps<"div">
 
 export declare const getAttachmentLabel: (data: AttachmentData) => string;
 
+/** Derives up to two uppercase initials from a full name. */
+export declare function getInitials(name: string): string;
+
 export declare const getMediaCategory: (data: AttachmentData) => AttachmentMediaCategory;
 
 export declare function getPlateMapScopedWellId(plateBarcode: string, wellId: WellId): WellId;
 
 export declare const getStatusBadge: (status: ToolPart["state"]) => JSX.Element;
 
+/** Canonical ids of every language the slim highlighter can load. */
+export declare function getSupportedCodeBlockLanguages(): string[];
+
 /**
  * TDP Navigation Utilities
  *
@@ -1583,43 +1980,6 @@ export declare interface GroupColumnConfig {
     label?: string;
 }
 
-export declare const Heatmap: default_2.FC<HeatmapProps>;
-
-/**
- * Props for the Heatmap component
- * @deprecated Use PlateMap component instead. Heatmap is now a wrapper around PlateMap for backward compatibility.
- */
-export declare interface HeatmapProps {
-    /** 2D array of numeric values */
-    data?: number[][];
-    /** Custom x-axis labels (column labels) */
-    xLabels?: string[] | number[];
-    /** Custom y-axis labels (row labels) */
-    yLabels?: string[] | number[];
-    /** Chart title */
-    title?: string;
-    /** X-axis title */
-    xTitle?: string;
-    /** Y-axis title */
-    yTitle?: string;
-    /** Color scale - string name or array of [position, color] pairs */
-    colorscale?: string | Array<[number, string]>;
-    /** Chart width in pixels */
-    width?: number;
-    /** Chart height in pixels */
-    height?: number;
-    /** Show color scale legend */
-    showScale?: boolean;
-    /** Number of decimal places for values */
-    precision?: number;
-    /** Minimum value for color scale */
-    zmin?: number;
-    /** Maximum value for color scale */
-    zmax?: number;
-    /** Value unit suffix */
-    valueUnit?: string;
-}
-
 export declare const highlightCode: (code: string, language: BundledLanguage, callback?: (result: TokenizedCode) => void) => TokenizedCode | null;
 
 export declare const Histogram: default_2.FC<HistogramProps>;
@@ -1767,7 +2127,7 @@ export declare function ItemDescription({ className, ...props }: React_2.Compone
 
 export declare function ItemFooter({ className, ...props }: React_2.ComponentProps<"div">): JSX.Element;
 
-export declare function ItemGroup({ className, ...props }: React_2.ComponentProps<"div">): JSX.Element;
+export declare function ItemGroup({ className, children, ...props }: React_2.ComponentProps<"div">): JSX.Element;
 
 export declare function ItemHeader({ className, ...props }: React_2.ComponentProps<"div">): JSX.Element;
 
@@ -1792,6 +2152,10 @@ export declare function KbdGroup({ className, ...props }: React.ComponentProps<"
 
 export declare function Label({ className, ...props }: React_2.ComponentProps<typeof Label_2.Root>): JSX.Element;
 
+declare type LanguageLoader = () => Promise<{
+    default: LanguageRegistration[];
+}>;
+
 /**
  * Configuration for auto-generated layers when using WellData with `values`.
  *
@@ -1891,9 +2255,9 @@ export declare interface LineDataSeries {
     };
 }
 
-export declare const LineGraph: default_2.FC<LineGraphProps>;
+export declare const LinePlot: default_2.FC<LinePlotProps>;
 
-export declare type LineGraphProps = {
+export declare type LinePlotProps = {
     dataSeries: LineDataSeries[];
     /**
      * Fixed width in pixels. When omitted, the chart fills its container and
@@ -1907,7 +2271,7 @@ export declare type LineGraphProps = {
     height?: number;
     xRange?: [number, number];
     yRange?: [number, number];
-    variant?: LineGraphVariant;
+    variant?: LinePlotVariant;
     xTitle?: string;
     yTitle?: string;
     title?: string;
@@ -1920,7 +2284,17 @@ export declare type LineGraphProps = {
     xTickText?: string[];
 };
 
-export declare type LineGraphVariant = "lines" | "lines+markers" | "lines+markers+error_bars";
+export declare type LinePlotVariant = "lines" | "lines+markers" | "lines+markers+error_bars";
+
+/**
+ * Load and initialise the RDKit module, memoised so the WASM is fetched and
+ * compiled only once per page. Safe to call from many components concurrently;
+ * they all await the same promise.
+ *
+ * @throws if run outside a browser, if `@rdkit/rdkit` isn't installed, or if
+ * the WASM cannot be loaded.
+ */
+export declare function loadRDKit(): Promise<RDKitModule>;
 
 export declare const LocalReferencedSourcesContext: Context_2<ReferencedSourcesContext | null>;
 
@@ -1937,6 +2311,11 @@ export declare interface ManifestFilterPopoverProps {
     className?: string;
 }
 
+/**
+ * Marker shape for scatter points
+ */
+export declare type MarkerShape = "circle" | "square" | "diamond" | "cross" | "x" | "triangle-up" | "triangle-down" | "star";
+
 export declare type MarkerSymbol = "circle" | "circle-open" | "circle-dot" | "circle-open-dot" | "square" | "square-open" | "square-dot" | "square-open-dot" | "diamond" | "diamond-open" | "diamond-dot" | "diamond-open-dot" | "cross" | "cross-open" | "cross-dot" | "cross-open-dot" | "x" | "x-open" | "x-dot" | "x-open-dot" | "triangle-up" | "triangle-up-open" | "triangle-up-dot" | "triangle-up-open-dot" | "triangle-down" | "triangle-down-open" | "triangle-down-dot" | "triangle-down-open-dot" | "triangle-left" | "triangle-left-open" | "triangle-left-dot" | "triangle-left-open-dot" | "triangle-right" | "triangle-right-open" | "triangle-right-dot" | "triangle-right-open-dot" | "triangle-ne" | "triangle-ne-open" | "triangle-ne-dot" | "triangle-ne-open-dot" | "triangle-se" | "triangle-se-open" | "triangle-se-dot" | "triangle-se-open-dot" | "triangle-sw" | "triangle-sw-open" | "triangle-sw-dot" | "triangle-sw-open-dot" | "triangle-nw" | "triangle-nw-open" | "triangle-nw-dot" | "triangle-nw-open-dot" | "pentagon" | "pentagon-open" | "pentagon-dot" | "pentagon-open-dot" | "hexagon" | "hexagon-open" | "hexagon-dot" | "hexagon-open-dot" | "hexagon2" | "hexagon2-open" | "hexagon2-dot" | "hexagon2-open-dot" | "octagon" | "octagon-open" | "octagon-dot" | "octagon-open-dot" | "star" | "star-open" | "star-dot" | "star-open-dot" | "hexagram" | "hexagram-open" | "hexagram-dot" | "hexagram-open-dot" | "star-triangle-up" | "star-triangle-up-open" | "star-triangle-up-dot" | "star-triangle-up-open-dot" | "star-triangle-down" | "star-triangle-down-open" | "star-triangle-down-dot" | "star-triangle-down-open-dot" | "star-square" | "star-square-open" | "star-square-dot" | "star-square-open-dot" | "star-diamond" | "star-diamond-open" | "star-diamond-dot" | "star-diamond-open-dot" | "diamond-tall" | "diamond-tall-open" | "diamond-tall-dot" | "diamond-tall-open-dot" | "diamond-wide" | "diamond-wide-open" | "diamond-wide-dot" | "diamond-wide-open-dot" | "hourglass" | "hourglass-open" | "bowtie" | "bowtie-open" | "circle-cross" | "circle-cross-open" | "circle-x" | "circle-x-open" | "square-cross" | "square-cross-open" | "square-x" | "square-x-open" | "diamond-cross" | "diamond-cross-open" | "diamond-x" | "diamond-x-open" | "cross-thin" | "cross-thin-open" | "x-thin" | "x-thin-open" | "asterisk" | "asterisk-open" | "hash" | "hash-open" | "hash-dot" | "hash-open-dot" | "y-up" | "y-up-open" | "y-down" | "y-down-open" | "y-left" | "y-left-open" | "y-right" | "y-right-open" | "line-ew" | "line-ew-open" | "line-ns" | "line-ns-open" | "line-ne" | "line-ne-open" | "line-nw" | "line-nw-open" | "arrow" | "arrow-open" | "arrow-wide" | "arrow-wide-open";
 
 declare type MarkerSymbol_2 = "circle" | "square" | "diamond" | "triangle-up" | "triangle-down" | "star";
@@ -2102,8 +2481,80 @@ export declare const ModelSelectorTrigger: (props: ModelSelectorTriggerProps) =>
 
 export declare type ModelSelectorTriggerProps = ComponentProps<typeof DialogTrigger>;
 
+/**
+ * Core cheminformatics primitive: render a 2D chemical structure from a SMILES
+ * string. RDKit's WASM module is loaded lazily on first mount (see
+ * {@link loadRDKit}), so pages that never render a molecule pay nothing for it.
+ *
+ * The output is a vector SVG that fills this component's box — size it with
+ * `className` (e.g. `className="size-32"`). Invalid SMILES render a fallback
+ * rather than throwing.
+ *
+ * @example
+ * ```tsx
+ * <MoleculeStructure smiles="CC(=O)Oc1ccccc1C(=O)O" className="size-40" />
+ * ```
+ */
+export declare function MoleculeStructure({ smiles, label, dark, alt, drawOptions, loadingContent, errorContent, onError, className, ...props }: MoleculeStructureProps): JSX.Element;
+
+export declare interface MoleculeStructureProps extends Omit<React_2.ComponentProps<"div">, "children" | "onError"> {
+    /** SMILES string to render as a 2D structure. */
+    smiles: string;
+    /** Optional caption drawn beneath the structure by RDKit. */
+    label?: string;
+    /**
+     * Force dark/light drawing colours. Defaults to following the active theme
+     * (the `.dark` class on the document root).
+     */
+    dark?: boolean;
+    /**
+     * Accessible label for the structure. Defaults to the SMILES string.
+     * Rendered as the SVG group's `aria-label` and the wrapper's title.
+     */
+    alt?: string;
+    /**
+     * Extra RDKit MolDraw2D options. Pass a stable (memoised or module-level)
+     * reference — a new object each render re-parses the SMILES through RDKit.
+     */
+    drawOptions?: Record<string, unknown>;
+    /** Rendered while the WASM module and structure are being prepared. */
+    loadingContent?: React_2.ReactNode;
+    /** Rendered when the SMILES is invalid or RDKit fails to load. */
+    errorContent?: React_2.ReactNode;
+    /** Called once when the SMILES cannot be parsed into a valid molecule. */
+    onError?: (smiles: string) => void;
+}
+
+/** Drawing options for {@link moleculeToSvg}. */
+export declare interface MoleculeSvgOptions {
+    /** Rendered width in pixels. @default 250 */
+    width?: number;
+    /** Rendered height in pixels. @default 200 */
+    height?: number;
+    /** Lighten carbons/bonds so the structure is legible on dark surfaces. */
+    dark?: boolean;
+    /** Optional caption drawn beneath the structure by RDKit. */
+    legend?: string;
+    /**
+     * Extra RDKit MolDraw2D options, merged last. See
+     * https://www.rdkitjs.com/#drawing-molecules-all-options
+     */
+    drawOptions?: Record<string, unknown>;
+}
+
+/**
+ * Render a SMILES string to an SVG string using an initialised RDKit module.
+ * Returns `null` when the SMILES cannot be parsed. Frees the underlying C++
+ * molecule before returning, so callers never need to.
+ *
+ * Synchronous by design so it can feed render callbacks that must return a
+ * string (e.g. the interactive scatter's `tooltip.content`) — load RDKit ahead
+ * of time with {@link loadRDKit} or {@link useRDKit}, then call this.
+ */
+export declare function moleculeToSvg(rdkit: RDKitModule, smiles: string, options?: MoleculeSvgOptions): string | null;
+
 export declare interface NavGroup {
-    /** Optional group label shown as a section header in expanded nav */
+    /** Optional group label shown as a section header in the `sidebar` variant */
     label?: string;
     /** Page entries in this group */
     pages: NavPage[];
@@ -2148,12 +2599,35 @@ export declare interface NavPage {
     label: string;
     /** Lucide icon or custom React SVG component */
     icon?: LucideIcon | React_2.FC<React_2.SVGProps<SVGSVGElement>>;
-    /** Whether this page is currently active */
+    /** Optional count/status badge — overlaid on the icon in `rail`, inline in `sidebar`/`top` */
+    badge?: React_2.ReactNode;
+    /** Whether this page is currently active (ignored when `activeKey` is set on the nav) */
     isActive?: boolean;
     /** Click handler */
     onClick?: () => void;
 }
 
+export declare interface NavStep {
+    /** Unique identifier */
+    id: string;
+    /** Display label */
+    label: string;
+    /** Lucide icon or custom React SVG component */
+    icon?: LucideIcon | React_2.FC<React_2.SVGProps<SVGSVGElement>>;
+    /** Optional count/status badge */
+    badge?: React_2.ReactNode;
+    /** Explicit status — overrides the linear derivation from `activeKey` */
+    status?: NavStepStatus;
+    /** Disables the step */
+    disabled?: boolean;
+    /** Tooltip/title text explaining why the step is disabled */
+    disabledReason?: string;
+    /** One level of nesting — child steps rendered indented under this step */
+    steps?: NavStep[];
+}
+
+export declare type NavStepStatus = "done" | "active" | "todo";
+
 export declare function parsePos(id: WellId, dims: PlateDimensions): {
     row: number;
     col: number;
@@ -2239,7 +2713,7 @@ export declare interface PeakDetectionOptions {
 /**
  * Payload delivered to onPeakClick and onPeakHover callbacks.
  */
-declare interface PeakSelectEvent {
+export declare interface PeakSelectEvent {
     /** The resolved peak ID (matches id field on PeakAnnotation) */
     id: string;
     /** The annotation object for this peak */
@@ -2263,7 +2737,7 @@ declare interface PeakSelectEvent {
  *   unselected.opacity        0.4  (applied when any other peak is selected)
  *   hoverLineWidthMultiplier  1.67 (1.5 px → ~2.5 px)
  */
-declare interface PeakSelectionAppearance {
+export declare interface PeakSelectionAppearance {
     selected?: {
         borderColor?: string;
         backgroundColor?: string;
@@ -2875,6 +3349,24 @@ export declare interface PlateZoomControlProps {
     className?: string;
 }
 
+/**
+ * Constants for plot layout
+ */
+export declare const PLOT_CONSTANTS: {
+    MARGIN_LEFT: number;
+    MARGIN_RIGHT: number;
+    MARGIN_TOP: number;
+    MARGIN_BOTTOM: number;
+    TITLE_FONT_SIZE: number;
+    AXIS_TITLE_FONT_SIZE: number;
+    AXIS_TICK_FONT_SIZE: number;
+    LEGEND_FONT_SIZE: number;
+    FONT_FAMILY: string;
+    GRID_WIDTH: number;
+    AXIS_LINE_WIDTH: number;
+    AUTO_RANGE_PADDING: number;
+};
+
 export declare function Popover({ ...props }: React_2.ComponentProps<typeof Popover_2.Root>): JSX.Element;
 
 export declare function PopoverAnchor({ ...props }: React_2.ComponentProps<typeof Popover_2.Anchor>): JSX.Element;
@@ -3285,6 +3777,61 @@ export declare function RadioGroup({ className, ...props }: React_2.ComponentPro
 
 export declare function RadioGroupItem({ className, ...props }: React_2.ComponentProps<typeof RadioGroup_2.Item>): JSX.Element;
 
+/**
+ * Loader for the RDKit.js WebAssembly module.
+ *
+ * RDKit ships a ~6.6 MB `.wasm` blob, so it must never be part of the main
+ * bundle. It is loaded lazily, once per page, the first time a molecule
+ * actually needs rendering.
+ *
+ * **Air-gapped by default, no CDN.** The loader dynamically imports the
+ * `@rdkit/rdkit` package the consumer has installed — nothing is fetched from a
+ * public CDN. Molecule rendering is opt-in: `@rdkit/rdkit` is an optional
+ * peer dependency, so a consumer that never renders a structure needn't install
+ * it, and one that does simply adds it to their own dependencies.
+ *
+ * **Bundled apps should set `wasmSrc`.** Without it, RDKit resolves
+ * `RDKit_minimal.wasm` relative to the glue script, which a bundler (Vite,
+ * webpack, …) usually does not emit next to the output — so the fetch 404s at
+ * runtime and the first molecule silently fails to load. Copy the WASM into a
+ * served path (or resolve it via your bundler, e.g. Vite's `?url`) and pass it
+ * to {@link configureRDKit} once at startup. Alternatively hand the loader a
+ * module you initialised yourself (`instance`).
+ *
+ * @see https://www.rdkitjs.com
+ */
+/** The `initRDKitModule` factory exported by `@rdkit/rdkit`. */
+declare type RDKitFactory = (options?: {
+    locateFile?: () => string;
+    print?: (msg: string) => void;
+    printErr?: (msg: string) => void;
+}) => Promise<RDKitModule>;
+
+/** Options controlling how the RDKit module is located and loaded. */
+export declare interface RDKitLoaderConfig {
+    /**
+     * URL of the `RDKit_minimal.wasm` binary, passed to RDKit as `locateFile`.
+     * Set this when your bundler doesn't serve the WASM next to the glue script
+     * (e.g. copy it into your app's public dir and point here). When omitted,
+     * RDKit's own default resolution is used.
+     */
+    wasmSrc?: string;
+    /**
+     * A module already initialised by the consumer (e.g. shared with other parts
+     * of the app). When provided, no import or network work is done.
+     */
+    instance?: RDKitModule;
+    /**
+     * Override how the `initRDKitModule` factory is obtained. Defaults to
+     * `import("@rdkit/rdkit")`. Provide this only for unusual setups (custom
+     * bundler resolution, a vendored copy, etc.).
+     */
+    importFactory?: () => Promise<RDKitFactory>;
+}
+
+/** Lifecycle of the lazily-loaded RDKit module. */
+export declare type RDKitStatus = "loading" | "ready" | "error";
+
 export declare const Reasoning: MemoExoticComponent<({ className, isStreaming, open, defaultOpen, onOpenChange, duration: durationProp, children, ...props }: ReasoningProps) => JSX.Element>;
 
 export declare const ReasoningContent: MemoExoticComponent<({ className, children, ...props }: ReasoningContentProps) => JSX.Element>;
@@ -3325,6 +3872,18 @@ export declare interface ReferencedSourcesContext {
     clear: () => void;
 }
 
+/**
+ * Register an additional grammar for `CodeBlock`/`MessageResponse` code
+ * highlighting, e.g.:
+ *
+ * ```ts
+ * registerCodeBlockLanguage("rust", () => import("@shikijs/langs/rust"), ["rs"]);
+ * ```
+ *
+ * The loader stays a dynamic import, so added grammars are also code-split.
+ */
+export declare function registerCodeBlockLanguage(language: string, loader: LanguageLoader, aliases?: string[]): void;
+
 /**
  * Resize handle between two panels.
  *
@@ -3378,24 +3937,141 @@ export declare interface RichListItemProps extends Omit<React_2.ComponentProps<t
 /** Letter for a row index. Supports A-Z then AA-ZZ for 1536-format plates. */
 export declare function rowLabel(row: number): string;
 
-export declare interface ScatterDataPoint {
-    x: number;
-    y: number;
-    additionalInfo?: Record<string, string | number>;
-}
+/**
+ * Scale type for axes
+ */
+export declare type ScaleType = "linear" | "log";
 
-export declare interface ScatterDataSeries {
+export declare const ScatterPlot: default_2.FC<ScatterPlotProps>;
+
+export declare interface ScatterPlotDataSeries {
     x: number[];
     y: number[];
     name: string;
     /** Optional color override (auto-assigned from CHART_COLORS if not provided) */
     color?: string;
+    /** Optional marker symbol override (auto-assigned in the `stacked` variant) */
+    symbol?: MarkerSymbol_2;
+    /** Optional per-series marker size override (falls back to `markerSize`) */
+    size?: number;
 }
 
-export declare const ScatterGraph: default_2.FC<ScatterGraphProps>;
+/**
+ * ScatterPlotInteractive component for visualizing scatter plot data with advanced interactions.
+ *
+ * **Features:**
+ * - Data-driven and static styling (color, shape, size)
+ * - Interactive selection (click, box, lasso)
+ * - Keyboard modifiers for click-selection modes (Shift/Ctrl)
+ * - Customizable tooltips with rich content support
+ * - Axis customization (ranges, log/linear scales)
+ * - Performance optimizations for large datasets
+ * - Selection propagation via callbacks
+ *
+ * **Selection Modes (click selection only):**
+ * - Default click: Replace selection
+ * - Shift + click: Add to selection
+ * - Ctrl/Cmd + click: Remove from selection
+ * - Shift + Ctrl + click: Toggle selection
+ *
+ * Box/lasso selection always replaces the current selection because
+ * Plotly does not expose the original keyboard event for drag operations.
+ */
+export declare const ScatterPlotInteractive: default_2.FC<ScatterPlotInteractiveProps>;
+
+/**
+ * Props for ScatterPlotInteractive component
+ */
+export declare interface ScatterPlotInteractiveProps {
+    /**
+     * Array of data points to plot
+     */
+    data: ScatterPoint[];
+    /**
+     * Chart title
+     */
+    title?: string;
+    /**
+     * X-axis configuration
+     */
+    xAxis?: AxisConfig;
+    /**
+     * Y-axis configuration
+     */
+    yAxis?: AxisConfig;
+    /**
+     * Color mapping configuration
+     */
+    colorMapping?: ColorMapping;
+    /**
+     * Shape mapping configuration
+     */
+    shapeMapping?: ShapeMapping;
+    /**
+     * Size mapping configuration
+     */
+    sizeMapping?: SizeMapping;
+    /**
+     * Tooltip configuration
+     */
+    tooltip?: TooltipConfig;
+    /**
+     * Enable click selection
+     * @default true
+     */
+    enableClickSelection?: boolean;
+    /**
+     * Enable box selection (drag to select rectangular region)
+     * @default true
+     */
+    enableBoxSelection?: boolean;
+    /**
+     * Enable lasso selection (freeform selection)
+     * @default true
+     */
+    enableLassoSelection?: boolean;
+    /**
+     * Controlled selection state.
+     * If provided, component operates in controlled mode.
+     */
+    selectedIds?: Set<string | number>;
+    /**
+     * Callback when selection changes
+     */
+    onSelectionChange?: (selectedIds: Set<string | number>, mode: SelectionMode_2) => void;
+    /**
+     * Callback when a point is clicked
+     */
+    onPointClick?: (point: ScatterPoint, event: MouseEvent) => void;
+    /**
+     * Downsampling configuration for large datasets
+     */
+    downsampling?: DownsamplingConfig;
+    /**
+     * Chart width in pixels
+     * @default 800
+     */
+    width?: number;
+    /**
+     * Chart height in pixels
+     * @default 600
+     */
+    height?: number;
+    /**
+     * Show the continuous color-scale bar when using a continuous `colorMapping`.
+     * Has no effect for categorical or static mappings.
+     * @default true
+     */
+    showColorBar?: boolean;
+    /**
+     * Custom CSS class name
+     */
+    className?: string;
+}
 
-export declare interface ScatterGraphProps {
-    dataSeries: ScatterDataSeries[];
+export declare interface ScatterPlotProps {
+    /** One or more data series to plot */
+    dataSeries: ScatterPlotDataSeries | ScatterPlotDataSeries[];
     /**
      * Fixed width in pixels. When omitted, the chart fills its container and
      * tracks the container's width via a `ResizeObserver`.
@@ -3411,6 +4087,31 @@ export declare interface ScatterGraphProps {
     xTitle?: string;
     yTitle?: string;
     title?: string;
+    /**
+     * `default` renders every series as circles; `stacked` cycles through
+     * distinct marker symbols per series so overlapping series stay legible.
+     */
+    variant?: ScatterPlotVariant;
+    /** Default marker size in pixels (per-series `size` takes precedence) */
+    markerSize?: number;
+}
+
+export declare type ScatterPlotVariant = "default" | "stacked";
+
+/**
+ * A single data point in the scatter plot
+ */
+export declare interface ScatterPoint {
+    /** Unique identifier for the point */
+    id: string | number;
+    /** X-axis value */
+    x: number;
+    /** Y-axis value */
+    y: number;
+    /** Optional label for the point */
+    label?: string;
+    /** Additional metadata for tooltips and styling */
+    metadata?: Record<string, unknown>;
 }
 
 export declare function ScrollArea({ className, children, ...props }: React_2.ComponentProps<typeof ScrollArea_2.Root>): JSX.Element;
@@ -3430,6 +4131,41 @@ export declare function SelectContent({ className, children, position, align, ..
 
 export declare function SelectGroup({ className, ...props }: React_2.ComponentProps<typeof Select_2.Group>): JSX.Element;
 
+/**
+ * Selection mode keyboard modifiers
+ */
+export declare const SELECTION_MODIFIERS: {
+    readonly ADD: "shiftKey";
+    readonly REMOVE: "ctrlKey";
+    readonly TOGGLE: "both";
+};
+
+/**
+ * Data format for selection propagation between components
+ */
+export declare interface SelectionEvent {
+    /** Array of selected point IDs */
+    selectedIds: Set<string | number>;
+    /** Selection mode used */
+    mode: SelectionMode_2;
+    /** Source component identifier (optional) */
+    source?: string;
+}
+
+/**
+ * Selection mode for interactive selection
+ */
+declare type SelectionMode_2 = "replace" | "add" | "remove" | "toggle";
+export { SelectionMode_2 as SelectionMode }
+
+/**
+ * Selection state
+ */
+export declare interface SelectionState {
+    /** Array of selected point IDs */
+    selectedIds: Set<string | number>;
+}
+
 export declare function SelectItem({ className, children, ...props }: React_2.ComponentProps<typeof Select_2.Item>): JSX.Element;
 
 export declare function SelectLabel({ className, ...props }: React_2.ComponentProps<typeof Select_2.Label>): JSX.Element;
@@ -3458,6 +4194,20 @@ export declare function Separator({ className, orientation, decorative, ...props
  */
 export declare const seriesColor: (index: number, explicit?: string | null) => string;
 
+/**
+ * Shape mapping configuration
+ */
+export declare interface ShapeMapping {
+    /** Type of mapping: data-driven or static */
+    type: "static" | "categorical";
+    /** Static shape value (for type: "static") */
+    value?: MarkerShape;
+    /** Data field to map (for type: "categorical") */
+    field?: string;
+    /** Shape mapping for categorical values */
+    categoryShapes?: Record<string, MarkerShape>;
+}
+
 export declare function Sheet({ ...props }: React_2.ComponentProps<typeof Dialog_2.Root>): JSX.Element;
 
 export declare function SheetClose({ ...props }: React_2.ComponentProps<typeof Dialog_2.Close>): JSX.Element;
@@ -3477,6 +4227,22 @@ export declare function SheetTitle({ className, ...props }: React_2.ComponentPro
 
 export declare function SheetTrigger({ ...props }: React_2.ComponentProps<typeof Dialog_2.Trigger>): JSX.Element;
 
+/**
+ * The shell's shared collapse/expand affordance — a small outlined square with
+ * a chevron, placed in a zone's header row when expanded and at the top of the
+ * collapsed rail. One component so every zone's trigger looks identical.
+ */
+export declare function ShellCollapseButton({ direction, label, tooltipSide, className, ...props }: ShellCollapseButtonProps): JSX.Element;
+
+export declare interface ShellCollapseButtonProps extends Omit<React_2.ComponentProps<typeof Button>, "children"> {
+    /** Chevron direction the button points at. */
+    direction: keyof typeof CHEVRONS;
+    /** Accessible name + tooltip text (e.g. "Collapse navigation"). */
+    label: string;
+    /** Tooltip side. Defaults to `right` (rail/sidebar placements). */
+    tooltipSide?: "top" | "right" | "bottom" | "left";
+}
+
 export declare const Shimmer: MemoExoticComponent<({ children, as: Component, className, duration, spread, gradient, }: TextShimmerProps) => JSX.Element>;
 
 export declare function Sidebar({ side, variant, collapsible, className, children, dir, ...props }: React_2.ComponentProps<"div"> & {
@@ -3565,6 +4331,25 @@ export declare function SidebarSeparator({ className, ...props }: React_2.Compon
 
 export declare function SidebarTrigger({ className, onClick, ...props }: React_2.ComponentProps<typeof Button>): JSX.Element;
 
+/**
+ * Size mapping configuration
+ */
+export declare interface SizeMapping {
+    /** Type of mapping: data-driven or static */
+    type: "static" | "continuous" | "categorical";
+    /** Static size value (for type: "static") */
+    value?: number;
+    /** Data field to map (for type: "continuous" | "categorical") */
+    field?: string;
+    /** Size range for continuous mapping */
+    sizeRange?: [number, number];
+    /** Discrete sizes for categorical mapping */
+    categorySizes?: Record<string, number>;
+    /** Min/max values for continuous mapping (auto-calculated if not provided) */
+    min?: number;
+    max?: number;
+}
+
 export declare function Skeleton({ className, ...props }: React.ComponentProps<"div">): JSX.Element;
 
 export declare function Slider({ className, defaultValue, value, min, max, ...props }: React_2.ComponentProps<typeof Slider_2.Root>): JSX.Element;
@@ -3607,9 +4392,9 @@ export declare const spinnerVariants: (props?: ({
     size?: "default" | "sm" | "lg" | "md" | null | undefined;
 } & ClassProp) | undefined) => string;
 
-export declare function StackedChromatogramChart({ series, stackingMode, stackOffset, stackingOrder, annotations, ...restProps }: StackedChromatogramChartProps): JSX.Element;
+export declare function StackedChromatogram({ series, stackingMode, stackOffset, stackingOrder, annotations, ...restProps }: StackedChromatogramProps): JSX.Element;
 
-export declare interface StackedChromatogramChartProps extends Omit<ChromatogramChartProps, "series" | "annotations" | "yRange"> {
+export declare interface StackedChromatogramProps extends Omit<ChromatogramProps, "series" | "annotations" | "yRange"> {
     /** Array of data series to display */
     series: ChromatogramSeries[];
     /** Stacking mode: 'overlay' (default) or 'stack' */
@@ -3649,12 +4434,21 @@ export declare interface StatCardProps extends React_2.ComponentProps<"div"> {
 
 export declare type StatCardTrend = "up" | "down" | "neutral";
 
-/** Built-in Lucide spinner icons that pair well with ts-spin-pulse animation. */
+/**
+ * Built-in spinner icons.
+ *
+ * The Lucide spinners pair with the flat `ts-spin-pulse` animation; the
+ * `tetra` variant is the Tetra-branded "TetraSpin" — the official TetraScience
+ * molecule logo filled with the brand blue gradient, rotating 360° with the
+ * gradient held fixed so its nodes shimmer, echoing the `:tetraspin3d:` gif for
+ * a sense of brand identity while an agent is thinking.
+ */
 export declare const STREAM_STATUS_ICONS: {
     readonly loader: JSX.Element;
     readonly "loader-circle": JSX.Element;
     readonly "loader-pinwheel": JSX.Element;
     readonly "disc-3": JSX.Element;
+    readonly tetra: JSX.Element;
 };
 
 export declare const StreamStatus: MemoExoticComponent<({ startTime, isStreaming, state: stateProp, showIndicator, tokenCount, tokenLabel, icon, iconVariant, className, }: StreamStatusProps) => JSX.Element>;
@@ -3697,10 +4491,12 @@ export declare interface StreamStatusProps {
      */
     icon?: ReactNode;
     /**
-     * Convenience shorthand to pick a built-in Lucide spinner.
-     * Ignored when `icon` is also provided.
+     * Convenience shorthand to pick a built-in spinner.
+     * Ignored when `icon` is also provided. Defaults to `"tetra"`.
      *
-     * Options: `"loader"` | `"loader-circle"` | `"loader-pinwheel"` | `"disc-3"`
+     * Options: `"loader"` | `"loader-circle"` | `"loader-pinwheel"` | `"disc-3"` | `"tetra"`.
+     * The default `"tetra"` variant renders the official TetraScience molecule
+     * logo with a fixed brand-blue gradient. Pass `icon={null}` to render no icon.
      */
     iconVariant?: StreamStatusIconVariant;
     className?: string;
@@ -4013,6 +4809,16 @@ export declare interface TemplateOption {
     disabled?: boolean;
 }
 
+/**
+ * The official TetraScience "molecule" brand mark — the four-node symbol from
+ * the TetraScience logo, filled with the brand blue gradient.
+ */
+export declare const TetraMoleculeIcon: React_2.ForwardRefExoticComponent<Omit<TetraMoleculeIconProps, "ref"> & React_2.RefAttributes<SVGSVGElement>>;
+
+export declare interface TetraMoleculeIconProps extends React_2.SVGProps<SVGSVGElement> {
+    size?: number | string;
+}
+
 export declare const TetraScienceIcon: React_2.ForwardRefExoticComponent<Omit<TetraScienceIconProps, "ref"> & React_2.RefAttributes<SVGSVGElement>>;
 
 export declare interface TetraScienceIconProps extends React_2.SVGProps<SVGSVGElement> {
@@ -4105,6 +4911,24 @@ export declare type ToolProps = ComponentProps<typeof Collapsible> & {
 
 export declare function Tooltip({ ...props }: React_2.ComponentProps<typeof Tooltip_2.Root>): JSX.Element;
 
+/**
+ * Tooltip configuration
+ */
+export declare interface TooltipConfig {
+    /** Enable/disable tooltips */
+    enabled?: boolean;
+    /** Custom tooltip content function. Lines are separated with `<br>`. */
+    content?: (point: ScatterPoint) => string;
+    /** Fields to display in default tooltip */
+    fields?: string[];
+    /**
+     * Use Plotly's built-in hover labels instead of the theme-styled
+     * HTML tooltip rendered by the component.
+     * @default false
+     */
+    native?: boolean;
+}
+
 export declare function TooltipContent({ className, sideOffset, children, ...props }: React_2.ComponentProps<typeof Tooltip_2.Content>): JSX.Element;
 
 export declare function TooltipProvider({ delayDuration, ...props }: React_2.ComponentProps<typeof Tooltip_2.Provider>): JSX.Element;
@@ -4129,6 +4953,31 @@ declare type ToolUIPartApproval = {
     reason?: string;
 } | undefined;
 
+/**
+ * Sticky application header with three slots — left / center / right.
+ *
+ * - **left** is typically a breadcrumb, but any node can be slotted in.
+ * - **center** is an optional "context" slot (e.g. a version/status selector).
+ * - **right** holds actions, a help affordance, a `UserMenu`, etc.
+ */
+export declare function TopBar({ left, center, right, sticky, className, ...props }: TopBarProps): JSX.Element;
+
+export declare interface TopBarProps extends Omit<React_2.ComponentProps<"div">, "children">, VariantProps<typeof topBarVariants> {
+    /** Left slot — typically a breadcrumb. */
+    left?: React_2.ReactNode;
+    /**
+     * Center "context" slot — e.g. a version/status selector. Only rendered when
+     * provided; keeps the left/right columns balanced when present.
+     */
+    center?: React_2.ReactNode;
+    /** Right slot — actions, help, user menu, etc. */
+    right?: React_2.ReactNode;
+}
+
+export declare const topBarVariants: (props?: ({
+    sticky?: boolean | null | undefined;
+} & ClassProp) | undefined) => string;
+
 /**
  * Convert a color ramp (e.g. `CHART_SEQUENTIAL.blue`, `CHART_DIVERGING.blueOrange`)
  * into Plotly's colorscale format: evenly spaced [position, color] stops.
@@ -4148,6 +4997,8 @@ export declare function triagePlateMapCsvFile(file: File, options?: PlateMapCsvT
 /** TetraScience brand gradient — Light Blue 300 → Purple 500 → Violet Marble */
 export declare const TS_SHIMMER_GRADIENT = "linear-gradient(90deg, #549DFF, #8243BA, #9665F4)";
 
+export declare function useAssistantLayout(): AssistantLayoutContextValue;
+
 export declare const useAttachmentContext: () => AttachmentContextValue;
 
 export declare const useAttachmentsContext: () => AttachmentsContextValue;
@@ -4199,8 +5050,14 @@ export declare interface UseChartTooltipOptions {
 
 export declare function useComboboxAnchor(): React_2.RefObject<HTMLDivElement | null>;
 
+/** Shell layout state; throws outside a `DataAppShell`. */
+export declare function useDataAppShell(): DataAppShellContextValue;
+
 export declare function useDataTable<TData = unknown>(): TableContextValue<TData>;
 
+/** Shell layout state, or `null` when rendered outside a `DataAppShell`. */
+export declare function useOptionalDataAppShell(): DataAppShellContextValue | null;
+
 export declare const usePromptInputAttachments: () => AttachmentsContext;
 
 export declare const usePromptInputController: () => PromptInputControllerProps;
@@ -4209,8 +5066,88 @@ export declare const usePromptInputReferencedSources: () => ReferencedSourcesCon
 
 export declare const useProviderAttachments: () => AttachmentsContext;
 
+/**
+ * Lazily load the RDKit WASM module and track its status. The module is a
+ * page-wide singleton, so mounting many molecule components triggers only one
+ * download.
+ *
+ * Use this when you need RDKit available synchronously inside a callback — for
+ * example feeding the interactive scatter's `tooltip.content`, which must
+ * return a string. For a single structure, prefer the `MoleculeStructure`
+ * component, which wraps this hook.
+ *
+ * @example
+ * ```tsx
+ * const { rdkit, status } = useRDKit()
+ * // ...
+ * content: (point) =>
+ *   rdkit ? moleculeToSvg(rdkit, point.meta.smiles) ?? "" : "Loading…"
+ * ```
+ */
+export declare function useRDKit(): UseRDKitResult;
+
+export declare interface UseRDKitResult {
+    /** The initialised module, or `null` until it is ready. */
+    rdkit: RDKitModule | null;
+    status: RDKitStatus;
+    /** The load failure, if `status` is `"error"`. */
+    error: Error | null;
+}
+
 export declare const useReasoning: () => ReasoningContextValue;
 
+/**
+ * User account affordance — an avatar (initials or image) that opens a dropdown
+ * menu. A composition over the `Avatar` + `DropdownMenu` primitives.
+ *
+ * Focus trap, keyboard navigation, and Esc-to-close are handled by the
+ * underlying Radix `DropdownMenu`.
+ */
+export declare function UserMenu({ name, subtitle, avatarSrc, initials, groups, variant, side, align, className, }: UserMenuProps): JSX.Element;
+
+export declare interface UserMenuGroup {
+    /** Items in this group; groups are separated by a divider */
+    items: UserMenuItem[];
+}
+
+export declare interface UserMenuItem {
+    /** Unique identifier */
+    id: string;
+    /** Display label */
+    label: string;
+    /** Optional leading icon */
+    icon?: LucideIcon | React_2.FC<React_2.SVGProps<SVGSVGElement>>;
+    /** Click handler */
+    onClick?: () => void;
+    /** Disables the item */
+    disabled?: boolean;
+    /** Visual variant — `destructive` for sign-out / delete actions */
+    variant?: "default" | "destructive";
+}
+
+export declare interface UserMenuProps extends VariantProps<typeof userMenuTriggerVariants> {
+    /** User's full name — used for the menu header and derived initials */
+    name: string;
+    /** Secondary line shown under the name (e.g. email or role) */
+    subtitle?: string;
+    /** Avatar image URL; falls back to initials when absent or on load error */
+    avatarSrc?: string;
+    /** Explicit initials override; otherwise derived from `name` */
+    initials?: string;
+    /** Menu item groups; each group is separated by a divider */
+    groups?: UserMenuGroup[];
+    /** Which side of the trigger the dropdown opens on */
+    side?: "top" | "right" | "bottom" | "left";
+    /** Alignment of the dropdown relative to the trigger */
+    align?: "start" | "center" | "end";
+    /** Additional className for the trigger button */
+    className?: string;
+}
+
+export declare const userMenuTriggerVariants: (props?: ({
+    variant?: "avatar" | "detailed" | null | undefined;
+} & ClassProp) | undefined) => string;
+
 export declare function useSearch(config: UseSearchConfig): UseSearchResult;
 
 export declare type UseSearchConfig = {