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

package/dist/components/ai/reasoning.d.ts

@@ -0,0 +1,26 @@
+import { ComponentProps, ReactNode } from 'react';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '../ui/collapsible';
+interface ReasoningContextValue {
+    isStreaming: boolean;
+    isOpen: boolean;
+    setIsOpen: (open: boolean) => void;
+    duration: number | undefined;
+}
+export declare const useReasoning: () => ReasoningContextValue;
+export type ReasoningProps = ComponentProps<typeof Collapsible> & {
+    isStreaming?: boolean;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    duration?: number;
+};
+export declare const Reasoning: import('react').MemoExoticComponent<({ className, isStreaming, open, defaultOpen, onOpenChange, duration: durationProp, children, ...props }: ReasoningProps) => import("react/jsx-runtime").JSX.Element>;
+export type ReasoningTriggerProps = ComponentProps<typeof CollapsibleTrigger> & {
+    getThinkingMessage?: (isStreaming: boolean, duration?: number) => ReactNode;
+};
+export declare const ReasoningTrigger: import('react').MemoExoticComponent<({ className, children, getThinkingMessage, ...props }: ReasoningTriggerProps) => import("react/jsx-runtime").JSX.Element>;
+export type ReasoningContentProps = ComponentProps<typeof CollapsibleContent> & {
+    children: string;
+};
+export declare const ReasoningContent: import('react').MemoExoticComponent<({ className, children, ...props }: ReasoningContentProps) => import("react/jsx-runtime").JSX.Element>;
+export {};

package/dist/components/ai/shimmer.d.ts

@@ -0,0 +1,17 @@
+import { ElementType } from 'react';
+/** TetraScience brand gradient — Light Blue 300 → Purple 500 → Violet Marble */
+export declare const TS_SHIMMER_GRADIENT = "linear-gradient(90deg, #549DFF, #8243BA, #9665F4)";
+export interface TextShimmerProps {
+    children: string;
+    as?: ElementType;
+    className?: string;
+    duration?: number;
+    spread?: number;
+    /**
+     * CSS gradient used as the base text colour. Defaults to `muted-foreground`.
+     * Pass `TS_SHIMMER_GRADIENT` (or any custom gradient) to colour the text
+     * with the brand blue→purple sweep.
+     */
+    gradient?: string;
+}
+export declare const Shimmer: import('react').MemoExoticComponent<({ children, as: Component, className, duration, spread, gradient, }: TextShimmerProps) => import("react/jsx-runtime").JSX.Element>;

package/dist/components/ai/sources.d.ts

@@ -0,0 +1,12 @@
+import { ComponentProps } from 'react';
+import { CollapsibleContent, CollapsibleTrigger } from '../ui/collapsible';
+export type SourcesProps = ComponentProps<"div">;
+export declare const Sources: ({ className, ...props }: SourcesProps) => import("react/jsx-runtime").JSX.Element;
+export type SourcesTriggerProps = ComponentProps<typeof CollapsibleTrigger> & {
+    count: number;
+};
+export declare const SourcesTrigger: ({ className, count, children, ...props }: SourcesTriggerProps) => import("react/jsx-runtime").JSX.Element;
+export type SourcesContentProps = ComponentProps<typeof CollapsibleContent>;
+export declare const SourcesContent: ({ className, ...props }: SourcesContentProps) => import("react/jsx-runtime").JSX.Element;
+export type SourceProps = ComponentProps<"a">;
+export declare const Source: ({ href, title, className, children, ...props }: SourceProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/ai/speech-input.d.ts

@@ -0,0 +1,54 @@
+import { ComponentProps } from 'react';
+import { Button } from '../ui/button';
+interface SpeechRecognition extends EventTarget {
+    continuous: boolean;
+    interimResults: boolean;
+    lang: string;
+    start(): void;
+    stop(): void;
+    onstart: ((this: SpeechRecognition, ev: Event) => void) | null;
+    onend: ((this: SpeechRecognition, ev: Event) => void) | null;
+    onresult: ((this: SpeechRecognition, ev: SpeechRecognitionEvent) => void) | null;
+    onerror: ((this: SpeechRecognition, ev: SpeechRecognitionErrorEvent) => void) | null;
+}
+interface SpeechRecognitionEvent extends Event {
+    results: SpeechRecognitionResultList;
+    resultIndex: number;
+}
+interface SpeechRecognitionResultList {
+    readonly length: number;
+    item(index: number): SpeechRecognitionResult;
+    [index: number]: SpeechRecognitionResult;
+}
+interface SpeechRecognitionResult {
+    readonly length: number;
+    item(index: number): SpeechRecognitionAlternative;
+    [index: number]: SpeechRecognitionAlternative;
+    isFinal: boolean;
+}
+interface SpeechRecognitionAlternative {
+    transcript: string;
+    confidence: number;
+}
+interface SpeechRecognitionErrorEvent extends Event {
+    error: string;
+}
+declare global {
+    interface Window {
+        SpeechRecognition: new () => SpeechRecognition;
+        webkitSpeechRecognition: new () => SpeechRecognition;
+    }
+}
+export type SpeechInputProps = ComponentProps<typeof Button> & {
+    onTranscriptionChange?: (text: string) => void;
+    /**
+     * Callback for when audio is recorded using MediaRecorder fallback.
+     * This is called in browsers that don't support the Web Speech API (Firefox, Safari).
+     * The callback receives an audio Blob that should be sent to a transcription service.
+     * Return the transcribed text, which will be passed to onTranscriptionChange.
+     */
+    onAudioRecorded?: (audioBlob: Blob) => Promise<string>;
+    lang?: string;
+};
+export declare const SpeechInput: ({ className, onTranscriptionChange, onAudioRecorded, lang, ...props }: SpeechInputProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/ai/stream-status.d.ts

@@ -0,0 +1,66 @@
+import { ReactNode } from 'react';
+/**
+ * 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: import("react/jsx-runtime").JSX.Element;
+    readonly "loader-circle": import("react/jsx-runtime").JSX.Element;
+    readonly "loader-pinwheel": import("react/jsx-runtime").JSX.Element;
+    readonly "disc-3": import("react/jsx-runtime").JSX.Element;
+    readonly tetra: import("react/jsx-runtime").JSX.Element;
+};
+export type StreamStatusIconVariant = keyof typeof STREAM_STATUS_ICONS;
+export type StreamStatusState = "streaming" | "idle" | "done" | "error";
+export interface StreamStatusProps {
+    /**
+     * Timestamp when streaming started (Date or epoch ms).
+     * The component manages an internal 1-second ticker when set.
+     */
+    startTime?: Date | number;
+    /** Whether streaming is currently active. Defaults to `true` when `startTime` is set. */
+    isStreaming?: boolean;
+    /**
+     * Explicit state for the right-end indicator dot colour.
+     * If omitted, derived from `isStreaming`: `true` → "streaming", `false` → "idle".
+     *
+     * | state       | colour                     |
+     * |-------------|----------------------------|
+     * | streaming   | TS Light Blue 300 (pulsing)|
+     * | idle        | muted gray                 |
+     * | done        | TS Forest Green 300        |
+     * | error       | TS Imperial Red            |
+     */
+    state?: StreamStatusState;
+    /**
+     * Show the coloured status dot at the right end of the component.
+     * Defaults to `false`.
+     */
+    showIndicator?: boolean;
+    /** Token count shown after the separator, e.g. `8700` → "↓ 8.7k tokens". */
+    tokenCount?: number;
+    /** Prefix before the formatted token count. Defaults to `↓`. */
+    tokenLabel?: ReactNode;
+    /**
+     * Custom icon (ReactNode). Takes precedence over `iconVariant`.
+     * While streaming, the icon wrapper receives `ts-spin-pulse` — a continuous
+     * rotation that occasionally surges to 1.3× scale.
+     */
+    icon?: ReactNode;
+    /**
+     * 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"` | `"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;
+}
+export declare const StreamStatus: import('react').MemoExoticComponent<({ startTime, isStreaming, state: stateProp, showIndicator, tokenCount, tokenLabel, icon, iconVariant, className, }: StreamStatusProps) => import("react/jsx-runtime").JSX.Element>;

package/dist/components/ai/streamdown-code-plugin.d.ts

@@ -0,0 +1,2 @@
+import { CodeHighlighterPlugin } from 'streamdown';
+export declare const streamdownCodePlugin: CodeHighlighterPlugin;

package/dist/components/ai/streamdown-plugins.d.ts

@@ -0,0 +1,2 @@
+import { PluginConfig } from 'streamdown';
+export declare const streamdownPlugins: PluginConfig;

package/dist/components/ai/suggestion.d.ts

@@ -0,0 +1,9 @@
+import { ComponentProps } from 'react';
+import { Button } from '../ui/button';
+export type SuggestionsProps = ComponentProps<"div">;
+export declare const Suggestions: ({ className, children, ...props }: SuggestionsProps) => import("react/jsx-runtime").JSX.Element;
+export type SuggestionProps = Omit<ComponentProps<typeof Button>, "onClick"> & {
+    suggestion: string;
+    onClick?: (suggestion: string) => void;
+};
+export declare const Suggestion: ({ suggestion, onClick, className, variant, size, children, ...props }: SuggestionProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/ai/task.d.ts

@@ -0,0 +1,16 @@
+import { ComponentProps } from 'react';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '../ui/collapsible';
+export type TaskItemFileProps = ComponentProps<"div">;
+export declare const TaskItemFile: ({ children, className, ...props }: TaskItemFileProps) => import("react/jsx-runtime").JSX.Element;
+export type TaskItemProps = ComponentProps<"div">;
+export declare const TaskItem: ({ children, className, ...props }: TaskItemProps) => import("react/jsx-runtime").JSX.Element;
+export type TaskProps = ComponentProps<typeof Collapsible> & {
+    isStreaming?: boolean;
+};
+export declare const Task: ({ defaultOpen, isStreaming, open, onOpenChange, className, ...props }: TaskProps) => import("react/jsx-runtime").JSX.Element;
+export type TaskTriggerProps = ComponentProps<typeof CollapsibleTrigger> & {
+    title: string;
+};
+export declare const TaskTrigger: ({ children, className, title, ...props }: TaskTriggerProps) => import("react/jsx-runtime").JSX.Element;
+export type TaskContentProps = ComponentProps<typeof CollapsibleContent>;
+export declare const TaskContent: ({ children, className, ...props }: TaskContentProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/ai/tool.d.ts

@@ -0,0 +1,33 @@
+import { DynamicToolUIPart, ToolUIPart } from 'ai';
+import { ComponentProps } from 'react';
+import { Collapsible, CollapsibleContent } from '../ui/collapsible';
+export type ToolProps = ComponentProps<typeof Collapsible> & {
+    isStreaming?: boolean;
+};
+export declare const Tool: ({ className, isStreaming, open, onOpenChange, defaultOpen, ...props }: ToolProps) => import("react/jsx-runtime").JSX.Element;
+export type ToolPart = ToolUIPart | DynamicToolUIPart;
+export type ToolHeaderProps = {
+    title?: string;
+    className?: string;
+} & ({
+    type: ToolUIPart["type"];
+    state: ToolUIPart["state"];
+    toolName?: never;
+} | {
+    type: DynamicToolUIPart["type"];
+    state: DynamicToolUIPart["state"];
+    toolName: string;
+});
+export declare const getStatusBadge: (status: ToolPart["state"]) => import("react/jsx-runtime").JSX.Element;
+export declare const ToolHeader: ({ className, title, type, state, toolName, ...props }: ToolHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export type ToolContentProps = ComponentProps<typeof CollapsibleContent>;
+export declare const ToolContent: ({ className, ...props }: ToolContentProps) => import("react/jsx-runtime").JSX.Element;
+export type ToolInputProps = ComponentProps<"div"> & {
+    input: ToolPart["input"];
+};
+export declare const ToolInput: ({ className, input, ...props }: ToolInputProps) => import("react/jsx-runtime").JSX.Element;
+export type ToolOutputProps = ComponentProps<"div"> & {
+    output: ToolPart["output"];
+    errorText: ToolPart["errorText"];
+};
+export declare const ToolOutput: ({ className, output, errorText, ...props }: ToolOutputProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/ai/use-streamdown-plugins.d.ts

@@ -0,0 +1,8 @@
+import { PluginConfig } from 'streamdown';
+/**
+ * Lazily loads the streamdown plugin set (SW-2007). Markdown renders
+ * immediately without plugins; code highlighting, math, and mermaid upgrade
+ * in place once the lazy chunk arrives, keeping shiki/KaTeX/mermaid out of
+ * the consumer's main bundle.
+ */
+export declare function useStreamdownPlugins(): PluginConfig | undefined;

package/dist/components/charts/AreaPlot/AreaPlot.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const S=require("react/jsx-runtime"),n=require("react"),tt=require("../ChartTooltip/ChartTooltip.cjs"),z=require("../plotly-loader.cjs"),et=require("../../../hooks/use-element-size.cjs"),d=require("../../../hooks/use-plotly-theme.cjs"),ot=require("../../../lib/utils.cjs"),W=require("../../../utils/colors.cjs"),rt=require("../ChartTooltip/lines.cjs"),nt=80,lt=40,it=({dataSeries:a,width:I,height:P,xRange:M,yRange:p,variant:x="normal",xTitle:C,yTitle:T,title:w,xTickText:A})=>{const f=n.useRef(null),r=d.usePlotlyTheme(),[D,R]=et.useElementSize(),u=I??R.width,h=P??R.height,F=u>0&&h>0,J=I===void 0,K=P===void 0,_=n.useRef({width:u,height:h});_.current={width:u,height:h};const k=n.useRef(!1),L=n.useRef({width:0,height:0}),{bindTooltip:O,tooltipElement:Q}=tt.useChartTooltip({getLines:e=>rt.chartTooltipLines(e.map(t=>typeof t.customdata=="number"?{...t,y:t.customdata}:t),{xLabel:C,yLabel:T})}),{xMin:Y,xMax:q,yMin:H,yMax:X}=n.useMemo(()=>{let e=Number.MAX_VALUE,t=Number.MIN_VALUE,i=Number.MAX_VALUE,o=Number.MIN_VALUE;a.forEach(s=>{s.x.forEach(c=>{e=Math.min(e,c),t=Math.max(t,c)}),s.y.forEach(c=>{i=Math.min(i,c),o=Math.max(o,c)})});const y=(t-e)*.1,l=(o-i)*.1;return{xMin:e-y,xMax:t+y,yMin:x==="stacked"?0:i-l,yMax:o+l}},[a,x]),m=n.useMemo(()=>M||[Y,q],[M,Y,q]),g=n.useMemo(()=>p||[H,X],[p,H,X]),V=n.useMemo(()=>{const e=m[1]-m[0];let t=Math.pow(10,Math.floor(Math.log10(e)));e/t>10&&(t=t*2),e/t<4&&(t=t/2);const i=[];let o=Math.ceil(m[0]/t)*t;for(;o<=m[1];)i.push(o),o+=t;return i},[m]),j=n.useMemo(()=>{const e=g[1]-g[0];let t=Math.pow(10,Math.floor(Math.log10(e)));e/t>10&&(t=t*2),e/t<4&&(t=t/2);const i=[];let o=Math.ceil(g[0]/t)*t;for(;o<=g[1];)i.push(o),o+=t;return i},[g]),v=n.useMemo(()=>[...new Set(a.flatMap(e=>e.x))].sort((e,t)=>e-t),[a]),E=!!A&&A.length===v.length,N=n.useMemo(()=>({tickcolor:r.tickColor,ticklen:12,tickwidth:1,ticks:"outside",tickfont:{size:16,color:r.textColor,family:d.CHART_FONT_FAMILY,weight:400},linecolor:r.lineColor,linewidth:1,position:0,zeroline:!1}),[r]),b=n.useMemo(()=>w?{text:w,x:.5,y:.95,xanchor:"center",yanchor:"top",font:{size:32,weight:600,family:d.CHART_FONT_FAMILY,color:r.textColor,lineheight:1.2,standoff:30}}:void 0,[w,r]);return n.useEffect(()=>{if(!f.current||!F)return;let e;if(x==="stacked"){const l=new Array(a[0]?.x.length||0).fill(0);e=a.map((s,c)=>{const Z=s.y.map(($,B)=>{const G=l[B]+$;return l[B]=G,G}),U=W.seriesColor(c,s.color);return{x:s.x,y:Z,customdata:s.y,type:"scatter",mode:"lines",name:s.name,hoverinfo:"none",fill:c===0?"tozeroy":"tonexty",fillcolor:U,line:{color:U,width:2}}})}else e=a.map((l,s)=>{const c=W.seriesColor(s,l.color);return{x:l.x,y:l.y,type:"scatter",mode:"lines",name:l.name,hoverinfo:"none",fill:l.fill||"tozeroy",fillcolor:c,line:{color:c,width:2}}});const t={width:_.current.width,height:_.current.height,...b?{title:b}:{},margin:{l:80,r:40,b:96,t:w?nt:lt,pad:0},paper_bgcolor:r.paperBg,plot_bgcolor:r.plotBg,font:{family:d.CHART_FONT_FAMILY},dragmode:!1,xaxis:{title:{text:C,font:{size:16,color:r.textSecondary,family:d.CHART_FONT_FAMILY,weight:400},standoff:15},gridcolor:r.gridColor,range:M,autorange:!M,tickmode:"array",tickvals:E?v:V,...E?{ticktext:A}:{},showgrid:!0,automargin:!0,...N},yaxis:{title:{text:T,font:{size:16,color:r.textSecondary,family:d.CHART_FONT_FAMILY,weight:400},standoff:15},gridcolor:r.gridColor,range:p,autorange:!p,tickmode:"array",tickvals:j,showgrid:!0,automargin:!0,...N},legend:{x:.5,y:0,xanchor:"center",yanchor:"bottom",yref:"container",orientation:"h",font:{size:13,color:r.legendColor,family:d.CHART_FONT_FAMILY,weight:500,lineheight:18}},showlegend:!0},i={responsive:!1,displayModeBar:!1,displaylogo:!1};let o=!1,y=null;return z.loadPlotly().then(l=>{o||!f.current||(l.newPlot(f.current,e,t,i),O(f.current),y=f.current,k.current=!0,L.current={..._.current})}),()=>{o=!0,y&&(z.getLoadedPlotly().purge(y),k.current=!1)}},[a,F,M,p,m,g,x,C,T,w,b,N,V,j,v,E,A,r,O]),n.useEffect(()=>{const e=f.current;!e||!k.current||u<=0||h<=0||L.current.width===u&&L.current.height===h||(L.current={width:u,height:h},z.getLoadedPlotly().relayout(e,{width:u,height:h}).catch(()=>{}))},[u,h]),S.jsxs("div",{ref:D,className:ot.cn("area-graph-container relative",J&&"w-full",K&&"h-full"),children:[S.jsx("div",{ref:f,style:{width:"100%",height:"100%"}}),Q]})};exports.AreaPlot=it;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const S=require("react/jsx-runtime"),n=require("react"),tt=require("../ChartTooltip/ChartTooltip.cjs"),z=require("../plotly-loader.cjs"),et=require("../../../hooks/use-element-size.cjs"),d=require("../../../hooks/use-plotly-theme.cjs"),ot=require("../../../lib/utils.cjs"),W=require("../../../utils/colors.cjs"),rt=require("../ChartTooltip/lines.cjs"),nt=80,lt=40,it=({dataSeries:a,width:I,height:P,xRange:M,yRange:p,variant:x="normal",xTitle:C,yTitle:T,title:w,xTickText:_})=>{const f=n.useRef(null),r=d.usePlotlyTheme(),[D,R]=et.useElementSize(),u=I??R.width,h=P??R.height,F=u>0&&h>0,J=I===void 0,K=P===void 0,A=n.useRef({width:u,height:h});A.current={width:u,height:h};const k=n.useRef(!1),L=n.useRef({width:0,height:0}),{bindTooltip:O,tooltipElement:Q}=tt.useChartTooltip({getLines:e=>rt.chartTooltipLines(e.map(t=>typeof t.customdata=="number"?{...t,y:t.customdata}:t),{xLabel:C,yLabel:T})}),{xMin:Y,xMax:q,yMin:H,yMax:X}=n.useMemo(()=>{let e=Number.MAX_VALUE,t=Number.MIN_VALUE,i=Number.MAX_VALUE,o=Number.MIN_VALUE;a.forEach(s=>{s.x.forEach(c=>{e=Math.min(e,c),t=Math.max(t,c)}),s.y.forEach(c=>{i=Math.min(i,c),o=Math.max(o,c)})});const y=(t-e)*.1,l=(o-i)*.1;return{xMin:e-y,xMax:t+y,yMin:x==="stacked"?0:i-l,yMax:o+l}},[a,x]),m=n.useMemo(()=>M||[Y,q],[M,Y,q]),g=n.useMemo(()=>p||[H,X],[p,H,X]),V=n.useMemo(()=>{const e=m[1]-m[0];let t=Math.pow(10,Math.floor(Math.log10(e)));e/t>10&&(t=t*2),e/t<4&&(t=t/2);const i=[];let o=Math.ceil(m[0]/t)*t;for(;o<=m[1];)i.push(o),o+=t;return i},[m]),j=n.useMemo(()=>{const e=g[1]-g[0];let t=Math.pow(10,Math.floor(Math.log10(e)));e/t>10&&(t=t*2),e/t<4&&(t=t/2);const i=[];let o=Math.ceil(g[0]/t)*t;for(;o<=g[1];)i.push(o),o+=t;return i},[g]),v=n.useMemo(()=>[...new Set(a.flatMap(e=>e.x))].sort((e,t)=>e-t),[a]),E=!!_&&_.length===v.length,N=n.useMemo(()=>({tickcolor:r.tickColor,ticklen:12,tickwidth:1,ticks:"outside",tickfont:{size:16,color:r.textColor,family:d.CHART_FONT_FAMILY,weight:400},linecolor:r.lineColor,linewidth:1,position:0,zeroline:!1}),[r]),b=n.useMemo(()=>w?{text:w,x:.5,y:.95,xanchor:"center",yanchor:"top",font:{size:32,weight:600,family:d.CHART_FONT_FAMILY,color:r.textColor,lineheight:1.2,standoff:30}}:void 0,[w,r]);return n.useEffect(()=>{if(!f.current||!F)return;let e;if(x==="stacked"){const l=new Array(a[0]?.x.length||0).fill(0);e=a.map((s,c)=>{const Z=s.y.map(($,B)=>{const G=l[B]+$;return l[B]=G,G}),U=W.seriesColor(c,s.color);return{x:s.x,y:Z,customdata:s.y,type:"scatter",mode:"lines",name:s.name,hoverinfo:"none",fill:c===0?"tozeroy":"tonexty",fillcolor:U,line:{color:U,width:2}}})}else e=a.map((l,s)=>{const c=W.seriesColor(s,l.color);return{x:l.x,y:l.y,type:"scatter",mode:"lines",name:l.name,hoverinfo:"none",fill:l.fill||"tozeroy",fillcolor:c,line:{color:c,width:2}}});const t={width:A.current.width,height:A.current.height,...b?{title:b}:{},margin:{l:80,r:40,b:96,t:w?nt:lt,pad:0},paper_bgcolor:r.paperBg,plot_bgcolor:r.plotBg,font:{family:d.CHART_FONT_FAMILY},dragmode:!1,xaxis:{title:{text:C,font:{size:16,color:r.textSecondary,family:d.CHART_FONT_FAMILY,weight:400},standoff:15},gridcolor:r.gridColor,range:M,autorange:!M,tickmode:"array",tickvals:E?v:V,...E?{ticktext:_}:{},showgrid:!0,automargin:!0,...N},yaxis:{title:{text:T,font:{size:16,color:r.textSecondary,family:d.CHART_FONT_FAMILY,weight:400},standoff:15},gridcolor:r.gridColor,range:p,autorange:!p,tickmode:"array",tickvals:j,showgrid:!0,automargin:!0,...N},legend:{x:.5,y:0,xanchor:"center",yanchor:"bottom",yref:"container",orientation:"h",font:{size:13,color:r.legendColor,family:d.CHART_FONT_FAMILY,weight:500,lineheight:18}},showlegend:!0},i={responsive:!1,displayModeBar:!1,displaylogo:!1};let o=!1,y=null;return z.loadPlotly().then(l=>{o||!f.current||(l.newPlot(f.current,e,t,i),O(f.current),y=f.current,k.current=!0,L.current={...A.current})}),()=>{o=!0,y&&(z.getLoadedPlotly().purge(y),k.current=!1)}},[a,F,M,p,m,g,x,C,T,w,b,N,V,j,v,E,_,r,O]),n.useEffect(()=>{const e=f.current;!e||!k.current||u<=0||h<=0||L.current.width===u&&L.current.height===h||(L.current={width:u,height:h},z.getLoadedPlotly().relayout(e,{width:u,height:h}).catch(()=>{}))},[u,h]),S.jsxs("div",{ref:D,className:ot.cn("area-graph-container relative",J&&"w-full",K&&"h-full"),children:[S.jsx("div",{ref:f,style:{width:"100%",height:"100%"}}),Q]})};exports.AreaPlot=it;
 //# sourceMappingURL=AreaPlot.cjs.map

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

@@ -0,0 +1,39 @@
+import { default as React } from 'react';
+interface AreaDataSeries {
+    x: number[];
+    y: number[];
+    name: string;
+    /** Optional color override (auto-assigned from CHART_COLORS if not provided) */
+    color?: string;
+    fill?: "tozeroy" | "tonexty" | "toself";
+}
+type AreaPlotVariant = "normal" | "stacked";
+interface AreaPlotProps {
+    dataSeries: AreaDataSeries[];
+    /**
+     * 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;
+    xRange?: [number, number];
+    yRange?: [number, number];
+    variant?: AreaPlotVariant;
+    xTitle?: string;
+    yTitle?: string;
+    title?: string;
+    /**
+     * Categorical labels for the x-axis ticks. When provided, the x data values
+     * still drive area positioning but the displayed tick labels match these
+     * strings in order (e.g. ["Mon", "Tue", …]). Should align 1:1 with the
+     * unique, ordered x values across all series.
+     */
+    xTickText?: string[];
+}
+declare const AreaPlot: React.FC<AreaPlotProps>;
+export { AreaPlot };
+export type { AreaDataSeries, AreaPlotVariant, AreaPlotProps };

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

@@ -0,0 +1,2 @@
+export { AreaPlot } from './AreaPlot';
+export type { AreaDataSeries, AreaPlotVariant, AreaPlotProps, } from './AreaPlot';

package/dist/components/charts/BarChart/BarChart.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const B=require("react/jsx-runtime"),r=require("react"),S=require("../ChartTooltip/ChartTooltip.cjs"),N=require("../plotly-loader.cjs"),G=require("../../../hooks/use-element-size.cjs"),h=require("../../../hooks/use-plotly-theme.cjs"),W=require("../../../lib/utils.cjs"),D=require("../../../utils/colors.cjs"),J=60,K=30,Q=({dataSeries:a,width:T,height:v,xRange:A,yRange:d,variant:p="group",xTitle:C,yTitle:b,title:M,barWidth:R=24,xTickText:y})=>{const u=r.useRef(null),o=h.usePlotlyTheme(),{bindTooltip:I,tooltipElement:X}=S.useChartTooltip({xLabel:C,yLabel:b}),[j,F]=G.useElementSize(),c=T??F.width,s=v??F.height,z=c>0&&s>0,U=T===void 0,V=v===void 0,w=r.useRef({width:c,height:s});w.current={width:c,height:s};const L=r.useRef(!1),_=r.useRef({width:0,height:0}),{yMin:O,yMax:P}=r.useMemo(()=>{let t=Number.MAX_VALUE,e=Number.MIN_VALUE,i=Number.MAX_VALUE,n=Number.MIN_VALUE;a.forEach(x=>{x.x.forEach(m=>{t=Math.min(t,m),e=Math.max(e,m)}),x.y.forEach(m=>{i=Math.min(i,m),n=Math.max(n,m)})});const f=(e-t)*.1,l=(n-i)*.1;return{xMin:t-f,xMax:e+f,yMin:p==="stack"?0:i-l,yMax:n+l}},[a,p]),g=r.useMemo(()=>d||[O,P],[d,O,P]),k=r.useMemo(()=>[...new Set(a.flatMap(t=>t.x))].sort((t,e)=>t-e),[a]),Y=!!y&&y.length===k.length,q=r.useMemo(()=>{const t=g[1]-g[0];let e=Math.pow(10,Math.floor(Math.log10(t)));t/e>10&&(e=e*2),t/e<4&&(e=e/2);const i=[];let n=Math.ceil(g[0]/e)*e;for(;n<=g[1];)i.push(n),n+=e;return i},[g]),H=r.useMemo(()=>{switch(p){case"stack":return"stack";case"overlay":return"overlay";default:return"group"}},[p]),E=r.useMemo(()=>({tickcolor:o.tickColor,ticklen:12,tickwidth:1,ticks:"outside",tickfont:{size:16,color:o.textColor,family:h.CHART_FONT_FAMILY,weight:400},linecolor:o.lineColor,linewidth:1,position:0,zeroline:!1}),[o]);return r.useEffect(()=>{if(!u.current||!z)return;const t=a.map((l,x)=>({x:l.x,y:l.y,type:"bar",name:l.name,hoverinfo:"none",marker:{color:D.seriesColor(x,l.color)},width:R,error_y:l.error_y})),e={...M?{title:{text:M,font:{size:32,family:h.CHART_FONT_FAMILY,color:o.textColor}}}:{},width:w.current.width,height:w.current.height,margin:{l:80,r:30,b:96,t:M?J:K,pad:0},paper_bgcolor:o.paperBg,plot_bgcolor:o.plotBg,font:{family:h.CHART_FONT_FAMILY},barmode:H,bargap:.15,dragmode:!1,xaxis:{title:{text:C,font:{size:16,color:o.textSecondary,family:h.CHART_FONT_FAMILY,weight:400},standoff:32},gridcolor:o.gridColor,range:A,autorange:!A,tickmode:"array",tickvals:k,...Y?{ticktext:y}:{},showgrid:!0,automargin:!0,...E},yaxis:{title:{text:b,font:{size:16,color:o.textSecondary,family:h.CHART_FONT_FAMILY,weight:400},standoff:30},gridcolor:o.gridColor,range:d,autorange:!d,tickmode:"array",tickvals:q,showgrid:!0,automargin:!0,...E},legend:{x:.5,y:0,xanchor:"center",yanchor:"bottom",yref:"container",orientation:"h",font:{size:16,color:o.legendColor,family:h.CHART_FONT_FAMILY,weight:500}},showlegend:a.length>1},i={responsive:!1,displayModeBar:!1,displaylogo:!1};let n=!1,f=null;return N.loadPlotly().then(l=>{n||!u.current||(l.newPlot(u.current,t,e,i),I(u.current),f=u.current,L.current=!0,_.current={...w.current})}),()=>{n=!0,f&&(N.getLoadedPlotly().purge(f),L.current=!1)}},[a,z,A,d,C,b,M,R,H,E,k,q,Y,y,o,I]),r.useEffect(()=>{const t=u.current;!t||!L.current||c<=0||s<=0||_.current.width===c&&_.current.height===s||(_.current={width:c,height:s},N.getLoadedPlotly().relayout(t,{width:c,height:s}).catch(()=>{}))},[c,s]),B.jsxs("div",{ref:j,className:W.cn("bar-graph-container relative",U&&"w-full",V&&"h-full"),children:[B.jsx("div",{ref:u,style:{width:"100%",height:"100%"}}),X]})};exports.BarChart=Q;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const B=require("react/jsx-runtime"),r=require("react"),S=require("../ChartTooltip/ChartTooltip.cjs"),N=require("../plotly-loader.cjs"),G=require("../../../hooks/use-element-size.cjs"),h=require("../../../hooks/use-plotly-theme.cjs"),W=require("../../../lib/utils.cjs"),D=require("../../../utils/colors.cjs"),J=60,K=30,Q=({dataSeries:a,width:T,height:v,xRange:A,yRange:d,variant:p="group",xTitle:C,yTitle:b,title:M,barWidth:R=24,xTickText:y})=>{const u=r.useRef(null),o=h.usePlotlyTheme(),{bindTooltip:I,tooltipElement:X}=S.useChartTooltip({xLabel:C,yLabel:b}),[j,F]=G.useElementSize(),c=T??F.width,s=v??F.height,z=c>0&&s>0,U=T===void 0,V=v===void 0,_=r.useRef({width:c,height:s});_.current={width:c,height:s};const L=r.useRef(!1),w=r.useRef({width:0,height:0}),{yMin:O,yMax:P}=r.useMemo(()=>{let t=Number.MAX_VALUE,e=Number.MIN_VALUE,i=Number.MAX_VALUE,n=Number.MIN_VALUE;a.forEach(x=>{x.x.forEach(m=>{t=Math.min(t,m),e=Math.max(e,m)}),x.y.forEach(m=>{i=Math.min(i,m),n=Math.max(n,m)})});const f=(e-t)*.1,l=(n-i)*.1;return{xMin:t-f,xMax:e+f,yMin:p==="stack"?0:i-l,yMax:n+l}},[a,p]),g=r.useMemo(()=>d||[O,P],[d,O,P]),k=r.useMemo(()=>[...new Set(a.flatMap(t=>t.x))].sort((t,e)=>t-e),[a]),Y=!!y&&y.length===k.length,q=r.useMemo(()=>{const t=g[1]-g[0];let e=Math.pow(10,Math.floor(Math.log10(t)));t/e>10&&(e=e*2),t/e<4&&(e=e/2);const i=[];let n=Math.ceil(g[0]/e)*e;for(;n<=g[1];)i.push(n),n+=e;return i},[g]),H=r.useMemo(()=>{switch(p){case"stack":return"stack";case"overlay":return"overlay";default:return"group"}},[p]),E=r.useMemo(()=>({tickcolor:o.tickColor,ticklen:12,tickwidth:1,ticks:"outside",tickfont:{size:16,color:o.textColor,family:h.CHART_FONT_FAMILY,weight:400},linecolor:o.lineColor,linewidth:1,position:0,zeroline:!1}),[o]);return r.useEffect(()=>{if(!u.current||!z)return;const t=a.map((l,x)=>({x:l.x,y:l.y,type:"bar",name:l.name,hoverinfo:"none",marker:{color:D.seriesColor(x,l.color)},width:R,error_y:l.error_y})),e={...M?{title:{text:M,font:{size:32,family:h.CHART_FONT_FAMILY,color:o.textColor}}}:{},width:_.current.width,height:_.current.height,margin:{l:80,r:30,b:96,t:M?J:K,pad:0},paper_bgcolor:o.paperBg,plot_bgcolor:o.plotBg,font:{family:h.CHART_FONT_FAMILY},barmode:H,bargap:.15,dragmode:!1,xaxis:{title:{text:C,font:{size:16,color:o.textSecondary,family:h.CHART_FONT_FAMILY,weight:400},standoff:32},gridcolor:o.gridColor,range:A,autorange:!A,tickmode:"array",tickvals:k,...Y?{ticktext:y}:{},showgrid:!0,automargin:!0,...E},yaxis:{title:{text:b,font:{size:16,color:o.textSecondary,family:h.CHART_FONT_FAMILY,weight:400},standoff:30},gridcolor:o.gridColor,range:d,autorange:!d,tickmode:"array",tickvals:q,showgrid:!0,automargin:!0,...E},legend:{x:.5,y:0,xanchor:"center",yanchor:"bottom",yref:"container",orientation:"h",font:{size:16,color:o.legendColor,family:h.CHART_FONT_FAMILY,weight:500}},showlegend:a.length>1},i={responsive:!1,displayModeBar:!1,displaylogo:!1};let n=!1,f=null;return N.loadPlotly().then(l=>{n||!u.current||(l.newPlot(u.current,t,e,i),I(u.current),f=u.current,L.current=!0,w.current={..._.current})}),()=>{n=!0,f&&(N.getLoadedPlotly().purge(f),L.current=!1)}},[a,z,A,d,C,b,M,R,H,E,k,q,Y,y,o,I]),r.useEffect(()=>{const t=u.current;!t||!L.current||c<=0||s<=0||w.current.width===c&&w.current.height===s||(w.current={width:c,height:s},N.getLoadedPlotly().relayout(t,{width:c,height:s}).catch(()=>{}))},[c,s]),B.jsxs("div",{ref:j,className:W.cn("bar-graph-container relative",U&&"w-full",V&&"h-full"),children:[B.jsx("div",{ref:u,style:{width:"100%",height:"100%"}}),X]})};exports.BarChart=Q;
 //# sourceMappingURL=BarChart.cjs.map

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

@@ -0,0 +1,44 @@
+import { default as React } from 'react';
+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;
+    };
+}
+type BarChartVariant = "group" | "stack" | "overlay";
+interface BarChartProps {
+    dataSeries: BarDataSeries[];
+    /**
+     * 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;
+    xRange?: [number, number];
+    yRange?: [number, number];
+    variant?: BarChartVariant;
+    xTitle?: string;
+    yTitle?: string;
+    title?: string;
+    barWidth?: number;
+    /**
+     * Categorical labels for the x-axis ticks. When provided, the x data values
+     * still drive bar positioning but the displayed tick labels match these
+     * strings in order (e.g. ["Mon", "Tue", …]). Should align 1:1 with the
+     * unique, ordered x values across all series.
+     */
+    xTickText?: string[];
+}
+declare const BarChart: React.FC<BarChartProps>;
+export { BarChart };
+export type { BarDataSeries, BarChartVariant, BarChartProps };

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

@@ -0,0 +1,2 @@
+export { BarChart } from './BarChart';
+export type { BarDataSeries, BarChartVariant, BarChartProps } from './BarChart';

package/dist/components/charts/BoxPlot/BoxPlot.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const z=require("react/jsx-runtime"),r=require("react"),B=require("../ChartTooltip/ChartTooltip.cjs"),A=require("../plotly-loader.cjs"),S=require("../../../hooks/use-element-size.cjs"),h=require("../../../hooks/use-plotly-theme.cjs"),U=require("../../../lib/utils.cjs"),W=require("../../../utils/colors.cjs"),V=-1.8,D=({dataSeries:p,width:C,height:b,xRange:x,yRange:g,xTitle:M,yTitle:w,title:v="Box Plot",showPoints:L=!1})=>{const s=r.useRef(null),e=h.usePlotlyTheme(),{bindTooltip:F,tooltipElement:I}=B.useChartTooltip({xLabel:M,yLabel:w}),[Y,k]=S.useElementSize(),i=C??k.width,l=b??k.height,E=i>0&&l>0,q=C===void 0,H=b===void 0,m=r.useRef({width:i,height:l});m.current={width:i,height:l};const T=r.useRef(!1),y=r.useRef({width:0,height:0}),{yMin:N,yMax:O}=r.useMemo(()=>{let o=Number.MAX_VALUE,t=Number.MIN_VALUE;p.forEach(c=>{c.y.forEach(d=>{o=Math.min(o,d),t=Math.max(t,d)})});const a=(t-o)*.1;return{yMin:o-a,yMax:t+a}},[p]),f=r.useMemo(()=>g||[N,O],[g,N,O]),P=r.useMemo(()=>{const o=f[1]-f[0];let t=Math.pow(10,Math.floor(Math.log10(o)));o/t>10&&(t=t*2),o/t<4&&(t=t/2);const a=[];let c=Math.ceil(f[0]/t)*t;for(;c<=f[1];)a.push(c),c+=t;return a},[f]),_=r.useMemo(()=>({tickcolor:e.tickColor,ticklen:12,tickwidth:1,ticks:"outside",tickfont:{size:16,color:e.textColor,family:h.CHART_FONT_FAMILY,weight:400},linecolor:e.lineColor,linewidth:1,position:0,zeroline:!1}),[e]),R=r.useMemo(()=>({text:v,x:.5,y:.95,xanchor:"center",yanchor:"top",font:{size:32,weight:600,family:h.CHART_FONT_FAMILY,color:e.textColor,lineheight:1.2,standoff:30}}),[v,e]);return r.useEffect(()=>{if(!s.current||!E)return;const o=p.map((n,j)=>{const u=W.seriesColor(j,n.color);return{y:n.y,x:n.x,type:"box",name:n.name,hoverinfo:"none",marker:{color:u},line:{color:u},fillcolor:typeof u=="string"&&u.startsWith("#")&&u.length===7?`${u}40`:u,boxpoints:L?n.boxpoints||"outliers":!1,jitter:n.jitter||.3,pointpos:n.pointpos||V}}),t={width:m.current.width,height:m.current.height,title:R,margin:{l:80,r:40,b:96,t:80,pad:0},paper_bgcolor:e.paperBg,plot_bgcolor:e.plotBg,font:{family:h.CHART_FONT_FAMILY},dragmode:!1,xaxis:{title:{text:M,font:{size:16,color:e.textSecondary,family:h.CHART_FONT_FAMILY,weight:400},standoff:15},gridcolor:e.gridColor,range:x,autorange:!x,showgrid:!0,automargin:!0,..._},yaxis:{title:{text:w,font:{size:16,color:e.textSecondary,family:h.CHART_FONT_FAMILY,weight:400},standoff:15},gridcolor:e.gridColor,range:g,autorange:!g,tickmode:"array",tickvals:P,showgrid:!0,automargin:!0,..._},legend:{x:.5,y:0,xanchor:"center",yanchor:"bottom",yref:"container",orientation:"h",font:{size:13,color:e.legendColor,family:h.CHART_FONT_FAMILY,weight:500,lineheight:18}},showlegend:!0},a={responsive:!1,displayModeBar:!1,displaylogo:!1};let c=!1,d=null;return A.loadPlotly().then(n=>{c||!s.current||(n.newPlot(s.current,o,t,a),F(s.current),d=s.current,T.current=!0,y.current={...m.current})}),()=>{c=!0,d&&(A.getLoadedPlotly().purge(d),T.current=!1)}},[p,E,x,g,f,M,w,L,R,_,P,e,F]),r.useEffect(()=>{const o=s.current;!o||!T.current||i<=0||l<=0||y.current.width===i&&y.current.height===l||(y.current={width:i,height:l},A.getLoadedPlotly().relayout(o,{width:i,height:l}).catch(()=>{}))},[i,l]),z.jsxs("div",{ref:Y,className:U.cn("boxplot-container relative",q&&"w-full",H&&"h-full"),children:[z.jsx("div",{ref:s,style:{width:"100%",height:"100%"}}),I]})};exports.BoxPlot=D;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const z=require("react/jsx-runtime"),r=require("react"),B=require("../ChartTooltip/ChartTooltip.cjs"),A=require("../plotly-loader.cjs"),S=require("../../../hooks/use-element-size.cjs"),h=require("../../../hooks/use-plotly-theme.cjs"),U=require("../../../lib/utils.cjs"),W=require("../../../utils/colors.cjs"),V=-1.8,D=({dataSeries:p,width:C,height:b,xRange:x,yRange:g,xTitle:M,yTitle:w,title:v="Box Plot",showPoints:L=!1})=>{const s=r.useRef(null),e=h.usePlotlyTheme(),{bindTooltip:F,tooltipElement:I}=B.useChartTooltip({xLabel:M,yLabel:w}),[Y,k]=S.useElementSize(),i=C??k.width,l=b??k.height,E=i>0&&l>0,q=C===void 0,H=b===void 0,m=r.useRef({width:i,height:l});m.current={width:i,height:l};const _=r.useRef(!1),y=r.useRef({width:0,height:0}),{yMin:N,yMax:O}=r.useMemo(()=>{let o=Number.MAX_VALUE,t=Number.MIN_VALUE;p.forEach(c=>{c.y.forEach(d=>{o=Math.min(o,d),t=Math.max(t,d)})});const a=(t-o)*.1;return{yMin:o-a,yMax:t+a}},[p]),f=r.useMemo(()=>g||[N,O],[g,N,O]),P=r.useMemo(()=>{const o=f[1]-f[0];let t=Math.pow(10,Math.floor(Math.log10(o)));o/t>10&&(t=t*2),o/t<4&&(t=t/2);const a=[];let c=Math.ceil(f[0]/t)*t;for(;c<=f[1];)a.push(c),c+=t;return a},[f]),T=r.useMemo(()=>({tickcolor:e.tickColor,ticklen:12,tickwidth:1,ticks:"outside",tickfont:{size:16,color:e.textColor,family:h.CHART_FONT_FAMILY,weight:400},linecolor:e.lineColor,linewidth:1,position:0,zeroline:!1}),[e]),R=r.useMemo(()=>({text:v,x:.5,y:.95,xanchor:"center",yanchor:"top",font:{size:32,weight:600,family:h.CHART_FONT_FAMILY,color:e.textColor,lineheight:1.2,standoff:30}}),[v,e]);return r.useEffect(()=>{if(!s.current||!E)return;const o=p.map((n,j)=>{const u=W.seriesColor(j,n.color);return{y:n.y,x:n.x,type:"box",name:n.name,hoverinfo:"none",marker:{color:u},line:{color:u},fillcolor:typeof u=="string"&&u.startsWith("#")&&u.length===7?`${u}40`:u,boxpoints:L?n.boxpoints||"outliers":!1,jitter:n.jitter||.3,pointpos:n.pointpos||V}}),t={width:m.current.width,height:m.current.height,title:R,margin:{l:80,r:40,b:96,t:80,pad:0},paper_bgcolor:e.paperBg,plot_bgcolor:e.plotBg,font:{family:h.CHART_FONT_FAMILY},dragmode:!1,xaxis:{title:{text:M,font:{size:16,color:e.textSecondary,family:h.CHART_FONT_FAMILY,weight:400},standoff:15},gridcolor:e.gridColor,range:x,autorange:!x,showgrid:!0,automargin:!0,...T},yaxis:{title:{text:w,font:{size:16,color:e.textSecondary,family:h.CHART_FONT_FAMILY,weight:400},standoff:15},gridcolor:e.gridColor,range:g,autorange:!g,tickmode:"array",tickvals:P,showgrid:!0,automargin:!0,...T},legend:{x:.5,y:0,xanchor:"center",yanchor:"bottom",yref:"container",orientation:"h",font:{size:13,color:e.legendColor,family:h.CHART_FONT_FAMILY,weight:500,lineheight:18}},showlegend:!0},a={responsive:!1,displayModeBar:!1,displaylogo:!1};let c=!1,d=null;return A.loadPlotly().then(n=>{c||!s.current||(n.newPlot(s.current,o,t,a),F(s.current),d=s.current,_.current=!0,y.current={...m.current})}),()=>{c=!0,d&&(A.getLoadedPlotly().purge(d),_.current=!1)}},[p,E,x,g,f,M,w,L,R,T,P,e,F]),r.useEffect(()=>{const o=s.current;!o||!_.current||i<=0||l<=0||y.current.width===i&&y.current.height===l||(y.current={width:i,height:l},A.getLoadedPlotly().relayout(o,{width:i,height:l}).catch(()=>{}))},[i,l]),z.jsxs("div",{ref:Y,className:U.cn("boxplot-container relative",q&&"w-full",H&&"h-full"),children:[z.jsx("div",{ref:s,style:{width:"100%",height:"100%"}}),I]})};exports.BoxPlot=D;
 //# sourceMappingURL=BoxPlot.cjs.map

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

@@ -0,0 +1,33 @@
+import { default as React } from 'react';
+interface BoxDataSeries {
+    y: number[];
+    name: string;
+    /** Optional color override (auto-assigned from CHART_COLORS if not provided) */
+    color?: string;
+    x?: string[] | number[];
+    boxpoints?: "all" | "outliers" | "suspectedoutliers" | false;
+    jitter?: number;
+    pointpos?: number;
+}
+interface BoxPlotProps {
+    dataSeries: BoxDataSeries[];
+    /**
+     * 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;
+    xRange?: [number, number];
+    yRange?: [number, number];
+    xTitle?: string;
+    yTitle?: string;
+    title?: string;
+    showPoints?: boolean;
+}
+declare const BoxPlot: React.FC<BoxPlotProps>;
+export { BoxPlot };
+export type { BoxDataSeries, BoxPlotProps };

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

@@ -0,0 +1,2 @@
+export { BoxPlot } from './BoxPlot';
+export type { BoxDataSeries, BoxPlotProps } from './BoxPlot';

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

@@ -0,0 +1,71 @@
+import { ChartTooltipHoverPoint } from './lines';
+import { Ref } from 'react';
+export { chartTooltipLines } from './lines';
+export type { ChartTooltipHoverPoint } from './lines';
+/** Which edge of the point the tooltip is placed against (matches Radix). */
+export type ChartTooltipSide = "top" | "bottom" | "left" | "right";
+export interface ChartTooltipAnchor {
+    left: number;
+    top: number;
+    lines: string[];
+    /** Preferred placement side; auto-flips to the opposite when it won't fit */
+    side?: ChartTooltipSide;
+    /** Plays the exit animation before the tooltip unmounts */
+    closing?: boolean;
+}
+export interface ChartTooltipProps {
+    /** Anchor position (viewport coordinates) and content lines */
+    anchor: ChartTooltipAnchor | null;
+    /** Ref to the bubble node, used by cursor-following charts to clamp it on-screen */
+    bubbleRef?: Ref<HTMLDivElement>;
+}
+/**
+ * The design-system tooltip anchored at a chart position; drive it with
+ * `useChartTooltip`.
+ *
+ * Renders the same visual as the ui `TooltipContent` (bubble + arrow) but
+ * positions it directly from the anchor coordinates — Radix's popper
+ * repositions asynchronously and mis-measures animated content, which made
+ * tooltips drift on charts. Placement supports all four sides with
+ * Radix-style collision flipping.
+ */
+export declare function ChartTooltip({ anchor, bubbleRef }: ChartTooltipProps): import('react').ReactPortal | null;
+export interface UseChartTooltipOptions {
+    /** Axis label used for the default x line (falls back to "X") */
+    xLabel?: string;
+    /** Axis label used for the default y line (falls back to "Y") */
+    yLabel?: string;
+    /** Override the default line builder entirely */
+    getLines?: (points: ChartTooltipHoverPoint[]) => string[];
+    /**
+     * Track the cursor instead of anchoring to the hovered point's bounds, and
+     * keep the tooltip clamped inside the viewport. Use for traces with large
+     * hover targets (e.g. pie slices) where a fixed anchor feels disconnected.
+     */
+    followCursor?: boolean;
+    /**
+     * Override Plotly's hover hit radius (px). A larger radius makes big markers
+     * (e.g. heatmap circles) hoverable across their whole face.
+     */
+    hoverDistance?: number;
+    /**
+     * Preferred side to place the tooltip on relative to the point. Auto-flips to
+     * the opposite side when there isn't room (Radix-style). Defaults to "top".
+     */
+    side?: ChartTooltipSide;
+}
+/**
+ * Drives the design-system tooltip from Plotly hover events.
+ *
+ * ```tsx
+ * const { bindTooltip, tooltipElement } = useChartTooltip({ xLabel, yLabel });
+ * // after Plotly.newPlot(...): set trace hoverinfo to "none", then
+ * bindTooltip(plotRef.current);
+ * // anywhere in the chart markup:
+ * {tooltipElement}
+ * ```
+ */
+export declare function useChartTooltip(options?: UseChartTooltipOptions): {
+    bindTooltip: (plotDiv: HTMLElement | null) => void;
+    tooltipElement: import("react/jsx-runtime").JSX.Element;
+};

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

@@ -0,0 +1,2 @@
+export { ChartTooltip, chartTooltipLines, useChartTooltip, } from './ChartTooltip';
+export type { ChartTooltipAnchor, ChartTooltipHoverPoint, ChartTooltipProps, ChartTooltipSide, UseChartTooltipOptions, } from './ChartTooltip';

package/dist/components/charts/ChartTooltip/lines.d.ts

@@ -0,0 +1,54 @@
+/**
+ * Minimal structural view of a Plotly hover point — covers cartesian, pie,
+ * and heatmap traces without depending on Plotly's loose event typings.
+ */
+export interface ChartTooltipHoverPoint {
+    x?: number | string;
+    y?: number | string;
+    z?: number;
+    /** Pie slice label */
+    label?: string;
+    /** Pie slice value */
+    value?: number;
+    /** Pie slice raw value (Plotly's `v` alias) */
+    v?: number;
+    /** Pie slice percentage (0–100) */
+    percent?: number;
+    /** Per-point hover text (e.g. PlateMap wells), lines separated by `<br>` */
+    text?: string;
+    pointIndex?: number;
+    data?: {
+        name?: string;
+    };
+    /** Per-point custom data attached to the trace */
+    customdata?: unknown;
+    /** Hovered point bounds in plot-div pixels (provided by Plotly) */
+    bbox?: {
+        x0: number;
+        x1: number;
+        y0: number;
+        y1: number;
+    };
+    /**
+     * Plotly axis objects (internal) used to project a data value to a plot-div
+     * pixel. Bars report a `bbox` that sits below their visual top, so we anchor
+     * to `_offset + l2p(value)` instead.
+     */
+    yaxis?: {
+        _offset?: number;
+        l2p?: (value: number) => number;
+    };
+    xaxis?: {
+        _offset?: number;
+        l2p?: (value: number) => number;
+    };
+}
+/**
+ * Build default tooltip lines from Plotly hover points. Handles pie slices,
+ * text-carrying traces (e.g. PlateMap wells), single cartesian points, and
+ * unified multi-trace hovers.
+ */
+export declare function chartTooltipLines(points: ChartTooltipHoverPoint[], labels?: {
+    xLabel?: string;
+    yLabel?: string;
+}): string[];

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

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+import { ChromatogramSeries, PeakAnnotation, PeakSelectEvent, PeakSelectionAppearance, BaselineCorrectionMethod, BoundaryMarkerStyle, BoundaryMarkerType, PeakDetectionOptions, ChromatogramProps } from './types';
+export type { ChromatogramSeries, PeakAnnotation, PeakSelectEvent, PeakSelectionAppearance, BaselineCorrectionMethod, BoundaryMarkerStyle, BoundaryMarkerType, PeakDetectionOptions, ChromatogramProps, };
+declare const Chromatogram: React.FC<ChromatogramProps>;
+export { Chromatogram };

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const h=require("../../../utils/colors.cjs"),d=require("./constants.cjs"),R=require("../../../hooks/use-plotly-theme.cjs"),T={selected:{borderColor:"#3b82f6",backgroundColor:"#dbeafe",bold:!0},unselected:{opacity:.4},hoverLineWidthMultiplier:5/3};function S(o){if(!o)return T;const t=T;return{selected:{borderColor:o.selected?.borderColor??t.selected.borderColor,backgroundColor:o.selected?.backgroundColor??t.selected.backgroundColor,bold:o.selected?.bold??t.selected.bold},unselected:{opacity:o.unselected?.opacity??t.unselected.opacity},hoverLineWidthMultiplier:o.hoverLineWidthMultiplier??t.hoverLineWidthMultiplier}}const A={default:{ax:0,ay:-35},overlap:[{ax:50,ay:-35},{ax:-60,ay:-35},{ax:70,ay:-55},{ax:-80,ay:-55},{ax:50,ay:-75},{ax:-60,ay:-75}]};function M(o,t){const l=[...o].sort((n,c)=>n.peak.x-c.peak.x),r=[];let e=[];for(const n of l){if(e.length===0){e.push(n);continue}const c=e[e.length-1];Math.abs(n.peak.x-c.peak.x)<t?e.push(n):(r.push(e),e=[n])}return e.length>0&&r.push(e),r}function g(o,t,l,r,e,n){const c=o?e.selected.backgroundColor:d.CHROMATOGRAM_ANNOTATION.BACKGROUND_COLOR;let s;o?s=e.selected.borderColor:s=l&&!n?void 0:r;const i=o?2:l&&!n?0:1,a=t?e.unselected.opacity:void 0;return{bgcolor:c,bordercolor:s,borderwidth:i,...a===void 0?{}:{opacity:a}}}function p(o,t,l,r,e,n,c){const s=n?c.unselected.opacity:void 0;return{x:o.x,y:o.y,text:t,showarrow:!1,yshift:d.CHROMATOGRAM_ANNOTATION.INLINE_YSHIFT,yanchor:"bottom",xanchor:"center",font:{size:l,color:e?c.selected.borderColor:r,family:R.CHART_FONT_FAMILY},...s===void 0?{}:{opacity:s}}}function N(o,t,l,r={}){const{selectedPeakIds:e=[],anySelected:n=!1,appearance:c=T,annotationStyle:s="arrow"}=r,i=t===-1,a=i?d.CHROMATOGRAM_ANNOTATION.USER_ANNOTATION_COLOR:h.CHART_COLORS[t%h.CHART_COLORS.length],O=o.color??a,y=i&&!o.color?d.CHROMATOGRAM_ANNOTATION.USER_ANNOTATION_TEXT_COLOR:O,f=o.text??(o._computed?.area===void 0?"":`Area: ${o._computed.area.toFixed(2)}`),u=o.id!==void 0&&e.includes(o.id),_=!u&&n,b=u&&c.selected.bold?`<b>${f}</b>`:f,C=i?d.CHROMATOGRAM_ANNOTATION.USER_ANNOTATION_FONT_SIZE:d.CHROMATOGRAM_ANNOTATION.AUTO_ANNOTATION_FONT_SIZE;if(s==="inline")return p(o,b,C,y,u,_,c);const x=i&&o.ax!==void 0?o.ax:l.ax,v=i&&o.ay!==void 0?o.ay:l.ay,I=g(u,_,i,O,c,o.color!==void 0);return{x:o.x,y:o.y,text:b,showarrow:!0,arrowhead:2,arrowsize:1,arrowwidth:1,arrowcolor:O,ax:x,ay:v,font:{size:C,color:y,family:R.CHART_FONT_FAMILY},borderpad:2,...I}}function L(o,t={}){if(o.length===1){const{peak:r,seriesIndex:e}=o[0];return[N(r,e,A.default,t)]}return[...o].sort((r,e)=>r.peak.y-e.peak.y).map(({peak:r,seriesIndex:e},n)=>{const c=A.overlap[n%A.overlap.length];return N(r,e,c,t)})}exports.ANNOTATION_SLOTS=A;exports.createGroupAnnotations=L;exports.createPeakAnnotation=N;exports.groupOverlappingPeaks=M;exports.resolveSelectionAppearance=S;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const h=require("../../../utils/colors.cjs"),d=require("./constants.cjs"),R=require("../../../hooks/use-plotly-theme.cjs"),T={selected:{borderColor:"#3b82f6",backgroundColor:"#dbeafe",bold:!0},unselected:{opacity:.4},hoverLineWidthMultiplier:5/3};function S(o){if(!o)return T;const t=T;return{selected:{borderColor:o.selected?.borderColor??t.selected.borderColor,backgroundColor:o.selected?.backgroundColor??t.selected.backgroundColor,bold:o.selected?.bold??t.selected.bold},unselected:{opacity:o.unselected?.opacity??t.unselected.opacity},hoverLineWidthMultiplier:o.hoverLineWidthMultiplier??t.hoverLineWidthMultiplier}}const A={default:{ax:0,ay:-35},overlap:[{ax:50,ay:-35},{ax:-60,ay:-35},{ax:70,ay:-55},{ax:-80,ay:-55},{ax:50,ay:-75},{ax:-60,ay:-75}]};function M(o,t){const c=[...o].sort((n,l)=>n.peak.x-l.peak.x),r=[];let e=[];for(const n of c){if(e.length===0){e.push(n);continue}const l=e[e.length-1];Math.abs(n.peak.x-l.peak.x)<t?e.push(n):(r.push(e),e=[n])}return e.length>0&&r.push(e),r}function g(o,t,c,r,e,n){const l=o?e.selected.backgroundColor:d.CHROMATOGRAM_ANNOTATION.BACKGROUND_COLOR;let s;o?s=e.selected.borderColor:s=c&&!n?void 0:r;const i=o?2:c&&!n?0:1,a=t?e.unselected.opacity:void 0;return{bgcolor:l,bordercolor:s,borderwidth:i,...a===void 0?{}:{opacity:a}}}function p(o,t,c,r,e,n,l){const s=n?l.unselected.opacity:void 0;return{x:o.x,y:o.y,text:t,showarrow:!1,yshift:d.CHROMATOGRAM_ANNOTATION.INLINE_YSHIFT,yanchor:"bottom",xanchor:"center",font:{size:c,color:e?l.selected.borderColor:r,family:R.CHART_FONT_FAMILY},...s===void 0?{}:{opacity:s}}}function N(o,t,c,r={}){const{selectedPeakIds:e=[],anySelected:n=!1,appearance:l=T,annotationStyle:s="arrow"}=r,i=t===-1,a=i?d.CHROMATOGRAM_ANNOTATION.USER_ANNOTATION_COLOR:h.CHART_COLORS[t%h.CHART_COLORS.length],O=o.color??a,y=i&&!o.color?d.CHROMATOGRAM_ANNOTATION.USER_ANNOTATION_TEXT_COLOR:O,f=o.text??(o._computed?.area===void 0?"":`Area: ${o._computed.area.toFixed(2)}`),u=o.id!==void 0&&e.includes(o.id),_=!u&&n,b=u&&l.selected.bold?`<b>${f}</b>`:f,C=i?d.CHROMATOGRAM_ANNOTATION.USER_ANNOTATION_FONT_SIZE:d.CHROMATOGRAM_ANNOTATION.AUTO_ANNOTATION_FONT_SIZE;if(s==="inline")return p(o,b,C,y,u,_,l);const x=i&&o.ax!==void 0?o.ax:c.ax,v=i&&o.ay!==void 0?o.ay:c.ay,I=g(u,_,i,O,l,o.color!==void 0);return{x:o.x,y:o.y,text:b,showarrow:!0,arrowhead:2,arrowsize:1,arrowwidth:1,arrowcolor:O,ax:x,ay:v,font:{size:C,color:y,family:R.CHART_FONT_FAMILY},borderpad:2,...I}}function L(o,t={}){if(o.length===1){const{peak:r,seriesIndex:e}=o[0];return[N(r,e,A.default,t)]}return[...o].sort((r,e)=>r.peak.y-e.peak.y).map(({peak:r,seriesIndex:e},n)=>{const l=A.overlap[n%A.overlap.length];return N(r,e,l,t)})}exports.ANNOTATION_SLOTS=A;exports.createGroupAnnotations=L;exports.createPeakAnnotation=N;exports.groupOverlappingPeaks=M;exports.resolveSelectionAppearance=S;
 //# sourceMappingURL=annotations.cjs.map