minerva-design 1.3.0 → 1.5.0

package/dist/charts/react/graph.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"graph.js","names":["isPlainObject","value","proto","shallowEqual","keys","a","b","key","sameValue","v","i","sameGraphOptions","cssSize","fallback","GraphBase","handlers","containerRef","useRef","chartRef","handlersRef","stable","setStable","useState","options","optionsRef","useEffect","container","chart","createGraphChart","offs","r","off","useImperativeHandle","handleRef","animate","id","opts","data","ids","width","height","style","GraphFrame","props","layout","ref","GraphChart","DependencyGraph","direction","criticalPath","dag","TreeChart"],"sources":["../../../../charts/src/react/graph.tsx"],"sourcesContent":["import {\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n  type CSSProperties,\n  type Ref,\n} from \"react\";\nimport { createGraphChart } from \"../engine/graph/chart\";\nimport type {\n  GraphChartInstance,\n  GraphChartLabels,\n  GraphChartOptions,\n  GraphCircularOptions,\n  GraphDagOptions,\n  GraphData,\n  GraphDirection,\n  GraphEdge,\n  GraphEdgeStyle,\n  GraphForceOptions,\n  GraphGroup,\n  GraphGroupToggleEvent,\n  GraphHoverEvent,\n  GraphInteractionOptions,\n  GraphLayoutEndEvent,\n  GraphLayoutType,\n  GraphLegendOptions,\n  GraphNode,\n  GraphNodeShape,\n  GraphPoint,\n  GraphToggleEvent,\n  GraphTooltipOptions,\n  GraphTreeOptions,\n} from \"../engine/graph/types\";\nimport type {\n  ChartRendererKind,\n  ChartRendererPreference,\n} from \"../engine/types\";\n\n/** Imperative handle of the graph components (`ref`) */\nexport interface GraphChartHandle {\n  /** Fits the visible nodes in the view */\n  fit(animate?: boolean): void;\n  /** Centers a node (expanding its collapsed ancestors), optionally zooming */\n  focusNode(id: string, options?: { zoom?: number; animate?: boolean }): void;\n  /** Replaces the data until the next render with new props */\n  setData(data: GraphData): void;\n  /** Selects nodes (`null` clears the selection) */\n  select(ids: readonly string[] | string | null): void;\n  /** Ids of the selected nodes */\n  getSelection(): string[];\n  /** Expands a node (all nodes without an id) */\n  expand(id?: string): void;\n  /** Collapses a node (all nodes with children without an id) */\n  collapse(id?: string): void;\n  /** Collapses / expands a node */\n  toggle(id: string): void;\n  /** Current positions of the nodes in layout units */\n  getPositions(): Record<string, GraphPoint>;\n  /** Computes the layout again */\n  relayout(): void;\n  /** Backend in use, `null` until ready */\n  getRenderer(): ChartRendererKind | null;\n  /** The underlying engine instance (minerva-design/charts/core) */\n  getInstance(): GraphChartInstance | null;\n}\n\n/** Props shared by `GraphChart`, `DependencyGraph` and `TreeChart` */\nexport interface GraphCommonProps {\n  /** The nodes */\n  nodes: readonly GraphNode[];\n  /** The edges (parent → child in trees, prerequisite → dependent in DAGs) */\n  edges: readonly GraphEdge[];\n  /** Groups: legend order, names and colors */\n  groups?: readonly GraphGroup[];\n  /**\n   * Height of the chart (the legend included); numbers are pixels\n   * @default 480\n   */\n  height?: number | string;\n  /**\n   * Width of the chart; numbers are pixels\n   * @default \"100%\"\n   */\n  width?: number | string;\n  /** Shape of the nodes without `shape` (boxes for DAGs, org charts and mind maps, circles otherwise) */\n  nodeShape?: GraphNodeShape;\n  /** Circle diameter in layout units, or `[min, max]` scaled by the node `value` */\n  nodeSize?: number | readonly [number, number];\n  /** Edge shape; depends on the layout when omitted */\n  edgeStyle?: GraphEdgeStyle;\n  /** Edge width in CSS pixels, or `[min, max]` scaled by the edge `value` */\n  edgeWidth?: number | readonly [number, number];\n  /**\n   * Edge colors: neutral or tinted with the source / target node\n   * @default \"neutral\"\n   */\n  edgeColor?: \"neutral\" | \"source\" | \"target\";\n  /** Arrowheads on the edges without `directed` */\n  arrows?: boolean;\n  /**\n   * Node labels; `auto` hides minor and overlapping labels when zoomed out.\n   * Text inside boxes keeps a readable minimum size and is shortened with an ellipsis;\n   * it is hidden only when the box is too small for any text, or with `false`\n   * @default \"auto\"\n   */\n  nodeLabels?: boolean | \"auto\";\n  /**\n   * Edge labels: always, `auto` (zoomed in or highlighted), only `hover`, or never\n   * @default \"auto\"\n   */\n  edgeLabels?: boolean | \"auto\" | \"hover\";\n  /** What hovering / selecting a node highlights */\n  highlight?: \"neighbors\" | \"lineage\" | \"none\";\n  /** Ids of the selected nodes (changing it updates the selection) */\n  selected?: readonly string[];\n  /**\n   * Animates layout and data changes; a number is the duration in ms\n   * @default true\n   */\n  animation?: boolean | number;\n  /**\n   * Padding around the graph when fitting it, in CSS pixels\n   * @default 24\n   */\n  fitPadding?: number;\n  /**\n   * Zoom buttons (zoom in, zoom out, fit)\n   * @default true\n   */\n  controls?: boolean;\n  /** Legend of the groups; shown by default with several groups */\n  legend?: boolean | GraphLegendOptions;\n  /** Tooltip; `false` disables it */\n  tooltip?: boolean | GraphTooltipOptions;\n  /**\n   * Drag pans, Ctrl / ⌘ + wheel and pinch zoom, nodes can be dragged\n   * (force, circular), click selects, arrow keys move between nodes;\n   * `false` makes the chart static\n   * @default true\n   */\n  interaction?: boolean | GraphInteractionOptions;\n  /**\n   * Backend of the nodes and edges: `auto` tries WebGPU, then WebGL2, then\n   * WebGL, then Canvas2D, skipping GPUs running in software\n   * @default \"auto\"\n   */\n  renderer?: ChartRendererPreference;\n  /** Group colors (defaults to the `--chart-series-1..8` CSS variables, then the theme colors) */\n  palette?: readonly string[];\n  /** Accessible name of the chart */\n  ariaLabel?: string;\n  /**\n   * Language of the built-in texts (summary, announcements, tooltip,\n   * buttons); built-in texts in English, Chinese, Japanese and French\n   * @default the page language (`<html lang>`), then the browser language\n   */\n  locale?: string;\n  /** Overrides of the built-in texts of the `locale` */\n  labels?: Partial<GraphChartLabels>;\n  /** Called when the hovered (or keyboard-focused) node / edge changes */\n  onHover?: (event: GraphHoverEvent | null) => void;\n  /** Called when a node or an edge is clicked (or a node activated with Enter) */\n  onItemClick?: (event: GraphHoverEvent) => void;\n  /** Called with the ids of the selected nodes when the selection changes */\n  onSelectionChange?: (ids: string[]) => void;\n  /** Called when a tree node is collapsed or expanded */\n  onToggle?: (event: GraphToggleEvent) => void;\n  /** Called when the legend shows / hides a group */\n  onGroupToggle?: (event: GraphGroupToggleEvent) => void;\n  /** Called when the layout is done (the force simulation cooled down) */\n  onLayoutEnd?: (event: GraphLayoutEndEvent) => void;\n  /** Called with the backend once it is ready (and after a fallback) */\n  onRendererChange?: (renderer: ChartRendererKind) => void;\n  /** Class of the outer element */\n  className?: string;\n  /** Style of the outer element */\n  style?: CSSProperties;\n  /** Imperative handle */\n  ref?: Ref<GraphChartHandle>;\n}\n\n/** Props of `GraphChart` */\nexport interface GraphChartProps extends GraphCommonProps {\n  /**\n   * Placement of the nodes\n   * @default \"force\"\n   */\n  layout?: GraphLayoutType;\n  /** Direction of the `dag` and `tree` layouts */\n  direction?: GraphDirection;\n  /** Force layout settings (Barnes–Hut, worker for large graphs) */\n  force?: GraphForceOptions;\n  /** Circular / arc layout settings */\n  circular?: GraphCircularOptions;\n  /** Layered layout settings (`layout=\"dag\"`) */\n  dag?: GraphDagOptions;\n  /** Tree layout settings (tree layouts) */\n  tree?: GraphTreeOptions;\n}\n\n/** Props of `DependencyGraph` */\nexport interface DependencyGraphProps extends GraphCommonProps {\n  /**\n   * Flow direction\n   * @default \"TB\"\n   */\n  direction?: GraphDirection;\n  /** Layer / node spacing, crossing reduction sweeps */\n  dag?: GraphDagOptions;\n  /**\n   * Highlights the longest path (node `value` = duration); `true` computes it, a list of ids sets it\n   * @default false\n   */\n  criticalPath?: boolean | readonly string[];\n}\n\n/** Props of `TreeChart` */\nexport interface TreeChartProps extends GraphCommonProps {\n  /**\n   * Kind of tree: tidy tree, radial tree, two-sided mind map or org chart\n   * @default \"tree\"\n   */\n  layout?: \"tree\" | \"radial\" | \"mindmap\" | \"org\";\n  /**\n   * Direction of `layout=\"tree\"`\n   * @default \"LR\"\n   */\n  direction?: GraphDirection;\n  /** Root, spacing, collapsing, card size */\n  tree?: GraphTreeOptions;\n}\n\n// ----------------------------------------------------------------- base\n\ninterface Handlers {\n  onHover?: (event: GraphHoverEvent | null) => void;\n  onItemClick?: (event: GraphHoverEvent) => void;\n  onSelectionChange?: (ids: string[]) => void;\n  onToggle?: (event: GraphToggleEvent) => void;\n  onGroupToggle?: (event: GraphGroupToggleEvent) => void;\n  onLayoutEnd?: (event: GraphLayoutEndEvent) => void;\n  onRendererChange?: (renderer: ChartRendererKind) => void;\n}\n\nconst isPlainObject = (value: unknown): value is Record<string, unknown> => {\n  if (typeof value !== \"object\" || value === null) return false;\n  const proto = Object.getPrototypeOf(value);\n  return proto === Object.prototype || proto === null;\n};\n\nconst shallowEqual = (\n  a: Record<string, unknown>,\n  b: Record<string, unknown>,\n): boolean => {\n  const keys = Object.keys(a);\n  if (keys.length !== Object.keys(b).length) return false;\n  return keys.every(\n    (key) => a[key] === b[key] && Object.prototype.hasOwnProperty.call(b, key),\n  );\n};\n\nconst sameValue = (a: unknown, b: unknown): boolean => {\n  if (a === b) return true;\n  if (Array.isArray(a) && Array.isArray(b))\n    return a.length === b.length && a.every((v, i) => v === b[i]);\n  return isPlainObject(a) && isPlainObject(b) && shallowEqual(a, b);\n};\n\n/**\n * Whether two option objects describe the same chart: top-level values by\n * identity, one level deep for inline arrays / objects (node and edge\n * arrays rebuilt with the same objects are the same data)\n */\nconst sameGraphOptions = (\n  a: GraphChartOptions,\n  b: GraphChartOptions,\n): boolean => {\n  if (a === b) return true;\n  const keys = Object.keys(a) as (keyof GraphChartOptions)[];\n  if (keys.length !== Object.keys(b).length) return false;\n  return keys.every(\n    (key) =>\n      Object.prototype.hasOwnProperty.call(b, key) && sameValue(a[key], b[key]),\n  );\n};\n\nconst cssSize = (value: number | string | undefined, fallback: string) =>\n  value === undefined\n    ? fallback\n    : typeof value === \"number\"\n      ? `${value}px`\n      : value;\n\ninterface GraphBaseProps extends Handlers {\n  options: GraphChartOptions;\n  height?: number | string;\n  width?: number | string;\n  className?: string;\n  style?: CSSProperties;\n  handleRef?: Ref<GraphChartHandle>;\n}\n\nfunction GraphBase({\n  options,\n  height,\n  width,\n  className,\n  style,\n  handleRef,\n  ...handlers\n}: GraphBaseProps) {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const chartRef = useRef<GraphChartInstance | null>(null);\n  const handlersRef = useRef<Handlers>(handlers);\n  // keep the previous options while they describe the same chart\n  const [stable, setStable] = useState(options);\n  if (stable !== options && !sameGraphOptions(stable, options))\n    setStable(options);\n  const optionsRef = useRef(stable);\n\n  useEffect(() => {\n    handlersRef.current = handlers;\n  });\n\n  useEffect(() => {\n    const container = containerRef.current;\n    if (!container) return;\n    const chart = createGraphChart(container, optionsRef.current);\n    chartRef.current = chart;\n    const offs = [\n      chart.on(\"hover\", (e) => handlersRef.current.onHover?.(e)),\n      chart.on(\"click\", (e) => handlersRef.current.onItemClick?.(e)),\n      chart.on(\"select\", (e) => handlersRef.current.onSelectionChange?.(e.ids)),\n      chart.on(\"toggle\", (e) => handlersRef.current.onToggle?.(e)),\n      chart.on(\"groupToggle\", (e) => handlersRef.current.onGroupToggle?.(e)),\n      chart.on(\"layoutEnd\", (e) => handlersRef.current.onLayoutEnd?.(e)),\n      chart.on(\"renderer\", (r) => handlersRef.current.onRendererChange?.(r)),\n    ];\n    return () => {\n      offs.forEach((off) => off());\n      chart.destroy();\n      chartRef.current = null;\n    };\n  }, []);\n\n  useEffect(() => {\n    if (optionsRef.current === stable) return;\n    optionsRef.current = stable;\n    chartRef.current?.setOptions(stable);\n  }, [stable]);\n\n  useImperativeHandle(\n    handleRef,\n    () => ({\n      fit: (animate) => chartRef.current?.fit(animate),\n      focusNode: (id, opts) => chartRef.current?.focusNode(id, opts),\n      setData: (data) => chartRef.current?.setData(data),\n      select: (ids) => chartRef.current?.select(ids),\n      getSelection: () => chartRef.current?.getSelection() ?? [],\n      expand: (id) => chartRef.current?.expand(id),\n      collapse: (id) => chartRef.current?.collapse(id),\n      toggle: (id) => chartRef.current?.toggle(id),\n      getPositions: () => chartRef.current?.getPositions() ?? {},\n      relayout: () => chartRef.current?.relayout(),\n      getRenderer: () => chartRef.current?.getRenderer() ?? null,\n      getInstance: () => chartRef.current,\n    }),\n    [],\n  );\n\n  return (\n    <div\n      className={className}\n      style={{\n        position: \"relative\",\n        width: cssSize(width, \"100%\"),\n        height: cssSize(height, \"480px\"),\n        ...style,\n      }}\n    >\n      <div ref={containerRef} style={{ position: \"absolute\", inset: 0 }} />\n    </div>\n  );\n}\n\n/** Renders a chart from the common props and the layout options */\nfunction GraphFrame({\n  props,\n  layout,\n}: {\n  props: GraphCommonProps;\n  layout: Pick<\n    GraphChartOptions,\n    \"layout\" | \"direction\" | \"force\" | \"circular\" | \"dag\" | \"tree\"\n  >;\n}) {\n  const {\n    nodes,\n    edges,\n    groups,\n    height,\n    width,\n    nodeShape,\n    nodeSize,\n    edgeStyle,\n    edgeWidth,\n    edgeColor,\n    arrows,\n    nodeLabels,\n    edgeLabels,\n    highlight,\n    selected,\n    animation,\n    fitPadding,\n    controls,\n    legend,\n    tooltip,\n    interaction,\n    renderer,\n    palette,\n    ariaLabel,\n    locale,\n    labels,\n    onHover,\n    onItemClick,\n    onSelectionChange,\n    onToggle,\n    onGroupToggle,\n    onLayoutEnd,\n    onRendererChange,\n    className,\n    style,\n    ref,\n  } = props;\n  const options: GraphChartOptions = {\n    nodes,\n    edges,\n    groups,\n    ...layout,\n    nodeShape,\n    nodeSize,\n    edgeStyle,\n    edgeWidth,\n    edgeColor,\n    arrows,\n    nodeLabels,\n    edgeLabels,\n    highlight,\n    selected,\n    animation,\n    fitPadding,\n    controls,\n    legend,\n    tooltip,\n    interaction,\n    renderer,\n    palette,\n    ariaLabel,\n    locale,\n    labels,\n  };\n  return (\n    <GraphBase\n      options={options}\n      height={height}\n      width={width}\n      className={className}\n      style={style}\n      handleRef={ref}\n      onHover={onHover}\n      onItemClick={onItemClick}\n      onSelectionChange={onSelectionChange}\n      onToggle={onToggle}\n      onGroupToggle={onGroupToggle}\n      onLayoutEnd={onLayoutEnd}\n      onRendererChange={onRendererChange}\n    />\n  );\n}\n\n// ----------------------------------------------------------- components\n\n/**\n * Relationship network (关系图): force-directed by default (Barnes–Hut,\n * a Web Worker for large graphs), or circular, arc diagram, layered or\n * tree layouts; GPU rendering, pan / zoom, drag, neighbor highlight,\n * legend toggles and keyboard navigation.\n */\nexport function GraphChart(props: GraphChartProps) {\n  const { layout, direction, force, circular, dag, tree } = props;\n  return (\n    <GraphFrame\n      props={props}\n      layout={{\n        layout: layout ?? \"force\",\n        direction,\n        force,\n        circular,\n        dag,\n        tree,\n      }}\n    />\n  );\n}\n\n/**\n * Dependency graph (依赖图): layered (Sugiyama) layout of a DAG with\n * crossing reduction, spline or orthogonal edges with arrowheads,\n * upstream / downstream highlight and the critical path.\n */\nexport function DependencyGraph(props: DependencyGraphProps) {\n  const { direction, dag, criticalPath } = props;\n  return (\n    <GraphFrame\n      props={props}\n      layout={{\n        layout: \"dag\",\n        direction: direction ?? \"TB\",\n        dag: criticalPath === undefined ? dag : { ...dag, criticalPath },\n      }}\n    />\n  );\n}\n\n/**\n * Tree chart (树图): tidy tree, radial tree, mind map or org chart, with\n * animated collapse / expand of the subtrees.\n */\nexport function TreeChart(props: TreeChartProps) {\n  const { layout, direction, tree } = props;\n  return (\n    <GraphFrame\n      props={props}\n      layout={{ layout: layout ?? \"tree\", direction, tree }}\n    />\n  );\n}\n"],"mappings":"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"}

package/dist/charts/react/orderbook.cjs

@@ -0,0 +1,2 @@
+"use client";const e=require("../engine/locale.cjs"),t=require("../engine/orderbook/depth.cjs"),n=require("../engine/orderbook/heatmap.cjs"),r=require("../engine/orderbook/ladder.cjs"),i=require("../engine/orderbook/tape.cjs");let a=require("react"),o=require("react/jsx-runtime");var s=(e,t)=>e===void 0?t:typeof e==`number`?`${e}px`:e,c=(e,t)=>{if(e===t)return!0;if(Array.isArray(e)&&Array.isArray(t))return e.length===t.length&&e.every((e,n)=>e===t[n]);if(typeof e!=`object`||typeof t!=`object`||e===null||t===null||Object.getPrototypeOf(e)!==Object.prototype||Object.getPrototypeOf(t)!==Object.prototype)return!1;let n=Object.keys(e);return n.length===Object.keys(t).length&&n.every(n=>e[n]===t[n])},l=(e,t)=>{let n=Object.keys(e).filter(t=>e[t]!==void 0),r=Object.keys(t).filter(e=>t[e]!==void 0);return n.length===r.length&&n.every(n=>c(e[n],t[n]))},u=t=>e.resolveLocale(t.locale);function d(e,t,n,r){let i=(0,a.useRef)(null),o=(0,a.useRef)(null),s=(0,a.useRef)(t),c=(0,a.useRef)(``),d=(0,a.useRef)(n);return(0,a.useEffect)(()=>{d.current=n}),(0,a.useEffect)(()=>{let t=i.current;if(!t)return;c.current=u(s.current);let n=e(t,s.current);o.current=n;let a=r(n,()=>d.current);return()=>{a.forEach(e=>e()),n.destroy(),o.current=null}},[e,r]),(0,a.useEffect)(()=>{let e=u(t);l(s.current,t)&&e===c.current||(s.current=t,c.current=e,o.current?.setOptions(t))}),{containerRef:i,instanceRef:o}}function f(e,t){(0,a.useEffect)(()=>{t&&e.current?.setBook(t)},[e,t])}function p(e,t,n,r){let i=(0,a.useRef)(void 0),o=(0,a.useRef)(null),s=(0,a.useRef)(n),c=(0,a.useRef)(r);(0,a.useEffect)(()=>{s.current=n,c.current=r}),(0,a.useEffect)(()=>{let n=e.current,r=o.current===n?i.current:void 0;if(i.current=t,o.current=n,!t||t===r)return;let a=r?.length??0;if(r&&a>0&&t.length>=a&&t[a-1]===r[a-1]&&t[0]===r[0]){t.length>a&&s.current(t.slice(a));return}c.current(t)},[e,t])}function m({containerRef:e,height:t,width:n,className:r,style:i,fallbackHeight:a}){return(0,o.jsx)(`div`,{className:r,style:{position:`relative`,width:s(n,`100%`),height:s(t,a),...i},children:(0,o.jsx)(`div`,{ref:e,style:{position:`absolute`,inset:0}})})}var h=(e,t)=>[e.on(`hover`,e=>t().onHover?.(e)),e.on(`click`,e=>t().onClick?.(e)),e.on(`range`,e=>t().onRangeChange?.(e))];function g({height:e,width:n,className:r,style:i,book:s,onHover:c,onClick:l,onRangeChange:u,ref:p,...g}){let{containerRef:_,instanceRef:v}=d(t.createDepthChart,g,{onHover:c,onClick:l,onRangeChange:u},h);return f(v,s),(0,a.useImperativeHandle)(p,()=>({setBook:e=>v.current?.setBook(e),applyDeltas:e=>v.current?.applyDeltas(e),setRange:e=>v.current?.setRange(e),getInstance:()=>v.current}),[v]),(0,o.jsx)(m,{containerRef:_,height:e,width:n,className:r,style:i,fallbackHeight:`320px`})}var _=(e,t)=>[e.on(`hover`,e=>t().onHover?.(e)),e.on(`levelClick`,e=>t().onLevelClick?.(e))];function v({height:e,width:t,className:n,style:i,book:s,lastPrice:c,onHover:l,onLevelClick:u,ref:p,...h}){let{containerRef:g,instanceRef:v}=d(r.createOrderBook,h,{onHover:l,onLevelClick:u},_);return f(v,s),(0,a.useEffect)(()=>{c!==void 0&&v.current?.setLastPrice(c)},[v,c]),(0,a.useImperativeHandle)(p,()=>({setBook:e=>v.current?.setBook(e),applyDeltas:e=>v.current?.applyDeltas(e),setLastPrice:e=>v.current?.setLastPrice(e),getInstance:()=>v.current}),[v]),(0,o.jsx)(m,{containerRef:g,height:e,width:t,className:n,style:i,fallbackHeight:`420px`})}var y=(e,t)=>[e.on(`hover`,e=>t().onHover?.(e)),e.on(`renderer`,e=>t().onRendererChange?.(e)),e.on(`follow`,e=>t().onFollowChange?.(e))];function b({height:e,width:t,className:r,style:i,book:s,trades:c,onHover:l,onRendererChange:u,onFollowChange:h,ref:g,..._}){let{containerRef:v,instanceRef:b}=d(n.createOrderBookHeatmap,_,{onHover:l,onRendererChange:u,onFollowChange:h},y);return f(b,s),p(b,c,e=>b.current?.addTrades(e),e=>b.current?.addTrades(e)),(0,a.useImperativeHandle)(g,()=>({setBook:e=>b.current?.setBook(e),applyDeltas:e=>b.current?.applyDeltas(e),addTrades:e=>b.current?.addTrades(e),resetView:()=>b.current?.resetView(),getInstance:()=>b.current}),[b]),(0,o.jsx)(m,{containerRef:v,height:e,width:t,className:r,style:i,fallbackHeight:`360px`})}var x=(e,t)=>[e.on(`hover`,e=>t().onHover?.(e)),e.on(`tradeClick`,e=>t().onTradeClick?.(e)),e.on(`pause`,e=>t().onPause?.(e))];function S({height:e,width:t,className:n,style:r,trades:s,onHover:c,onTradeClick:l,onPause:u,ref:f,...h}){let{containerRef:g,instanceRef:_}=d(i.createTimeAndSales,h,{onHover:c,onTradeClick:l,onPause:u},x);return p(_,s,e=>_.current?.addTrades(e),e=>_.current?.setTrades(e)),(0,a.useImperativeHandle)(f,()=>({addTrades:e=>_.current?.addTrades(e),setTrades:e=>_.current?.setTrades(e),clear:()=>_.current?.clear(),scrollToLatest:()=>_.current?.scrollToLatest(),getInstance:()=>_.current}),[_]),(0,o.jsx)(m,{containerRef:g,height:e,width:t,className:n,style:r,fallbackHeight:`360px`})}exports.DepthChart=g,exports.OrderBook=v,exports.OrderBookHeatmap=b,exports.TimeAndSales=S;
+//# sourceMappingURL=orderbook.cjs.map

package/dist/charts/react/orderbook.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"orderbook.cjs","names":["resolveLocale","useRef","createDepthChart","createOrderBook","createOrderBookHeatmap","createTimeAndSales","require_locale","require_depth","require_heatmap","require_ladder","require_tape","react","react_jsx_runtime","size","value","fallback","sameValue","a","b","v","i","ka","k","sameOptions","kb","localeOf","options","useWidget","containerRef","instanceRef","optionsRef","localeRef","handlersRef","handlers","container","instance","factory","offs","connect","off","locale","useBook","book","useTrades","previousRef","targetRef","addRef","add","replaceRef","replace","target","previous","trades","n","Frame","width","height","fallbackHeight","style","connectDepth","chart","h","r","DepthChart","ref","snapshot","deltas","range","connectLadder","OrderBook","lastPrice","price","connectHeatmap","heatmap","f","OrderBookHeatmap","list","connectTape","tape","p","TimeAndSales"],"sources":["../../../../charts/src/react/orderbook.tsx"],"sourcesContent":["// React components of the order book module (depth chart, order book\n// ladder, liquidity heatmap, time and sales), re-exported by index.ts. Each\n// one mounts its engine once; options are forwarded when they change and\n// streams go through the ref handle (`applyDeltas`, `addTrades`) without\n// re-rendering React.\n\nimport {\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  type CSSProperties,\n  type Ref,\n  type RefObject,\n} from \"react\";\nimport { resolveLocale } from \"../engine/locale\";\nimport { createDepthChart } from \"../engine/orderbook/depth\";\nimport { createOrderBookHeatmap } from \"../engine/orderbook/heatmap\";\nimport { createOrderBook } from \"../engine/orderbook/ladder\";\nimport { createTimeAndSales } from \"../engine/orderbook/tape\";\nimport type {\n  DepthChartHoverEvent,\n  DepthChartInstance,\n  DepthChartOptions,\n  MarketTrade,\n  OrderBookDelta,\n  OrderBookHeatmapHoverEvent,\n  OrderBookHeatmapInstance,\n  OrderBookHeatmapOptions,\n  OrderBookInstance,\n  OrderBookLevelEvent,\n  OrderBookOptions,\n  OrderBookSnapshot,\n  TimeAndSalesInstance,\n  TimeAndSalesOptions,\n  TimeAndSalesRowEvent,\n} from \"../engine/orderbook/types\";\nimport type { ChartRendererKind } from \"../engine/types\";\n\n/** Container props shared by the order book components */\nexport interface OrderBookWidgetProps {\n  /** Height of the widget; numbers are pixels */\n  height?: number | string;\n  /**\n   * Width of the widget; numbers are pixels\n   * @default \"100%\"\n   */\n  width?: number | string;\n  /** Class of the container */\n  className?: string;\n  /** Style of the container */\n  style?: CSSProperties;\n}\n\n/** Imperative handle of `DepthChart` */\nexport interface DepthChartHandle {\n  /** Replaces the book */\n  setBook(snapshot: OrderBookSnapshot): void;\n  /** Applies updates (size 0 removes a level); drawn once at the next frame */\n  applyDeltas(deltas: OrderBookDelta | readonly OrderBookDelta[]): void;\n  /** Sets the visible range (fraction of the mid); `null` fits the book */\n  setRange(range: number | null): void;\n  /** The underlying engine instance (minerva-design/charts/core) */\n  getInstance(): DepthChartInstance | null;\n}\n\n/** Props of `DepthChart` */\nexport interface DepthChartProps\n  extends DepthChartOptions, OrderBookWidgetProps {\n  /** Book to draw, applied when the object changes (stream updates through the ref) */\n  book?: OrderBookSnapshot;\n  /** Pointer over the curves (`null` when it leaves) */\n  onHover?: (event: DepthChartHoverEvent | null) => void;\n  /** Click / tap on the curves */\n  onClick?: (event: DepthChartHoverEvent) => void;\n  /** The visible range changed by zooming (fraction of the mid) */\n  onRangeChange?: (range: number) => void;\n  /** Imperative handle: `setBook`, `applyDeltas`, `setRange` */\n  ref?: Ref<DepthChartHandle>;\n}\n\n/** Imperative handle of `OrderBook` */\nexport interface OrderBookHandle {\n  /** Replaces the book */\n  setBook(snapshot: OrderBookSnapshot): void;\n  /** Applies updates (size 0 removes a level); drawn once at the next frame */\n  applyDeltas(deltas: OrderBookDelta | readonly OrderBookDelta[]): void;\n  /** Price of the spread row (the mid price when `null`) */\n  setLastPrice(price: number | null): void;\n  /** The underlying engine instance (minerva-design/charts/core) */\n  getInstance(): OrderBookInstance | null;\n}\n\n/** Props of `OrderBook` */\nexport interface OrderBookProps extends OrderBookOptions, OrderBookWidgetProps {\n  /** Book to draw, applied when the object changes (stream updates through the ref) */\n  book?: OrderBookSnapshot;\n  /** Price of the spread row, colored by its last move; the mid price when omitted */\n  lastPrice?: number | null;\n  /** Hovered row (`null` when the pointer leaves) */\n  onHover?: (level: OrderBookLevelEvent | null) => void;\n  /** Click / tap / Enter on a row (e.g. to fill a price in an order form) */\n  onLevelClick?: (level: OrderBookLevelEvent) => void;\n  /** Imperative handle: `setBook`, `applyDeltas`, `setLastPrice` */\n  ref?: Ref<OrderBookHandle>;\n}\n\n/** Imperative handle of `OrderBookHeatmap` */\nexport interface OrderBookHeatmapHandle {\n  /** Replaces the book (closes the columns up to its time) */\n  setBook(snapshot: OrderBookSnapshot): void;\n  /** Applies updates (closes the columns up to their time) */\n  applyDeltas(deltas: OrderBookDelta | readonly OrderBookDelta[]): void;\n  /** Adds trades (bubbles) */\n  addTrades(trades: MarketTrade | readonly MarketTrade[]): void;\n  /** Follows the market again */\n  resetView(): void;\n  /** The underlying engine instance (minerva-design/charts/core) */\n  getInstance(): OrderBookHeatmapInstance | null;\n}\n\n/** Props of `OrderBookHeatmap` */\nexport interface OrderBookHeatmapProps\n  extends OrderBookHeatmapOptions, OrderBookWidgetProps {\n  /** Book, applied when the object changes (stream updates through the ref) */\n  book?: OrderBookSnapshot;\n  /** Trades; when the array grows, only the appended ones are added */\n  trades?: readonly MarketTrade[];\n  /** Hovered cell (`null` when the pointer leaves) */\n  onHover?: (event: OrderBookHeatmapHoverEvent | null) => void;\n  /** Backend in use (also after a GPU loss) */\n  onRendererChange?: (renderer: ChartRendererKind) => void;\n  /** `true` while the view follows the market, `false` after a zoom / pan */\n  onFollowChange?: (follow: boolean) => void;\n  /** Imperative handle: `setBook`, `applyDeltas`, `addTrades`, `resetView` */\n  ref?: Ref<OrderBookHeatmapHandle>;\n}\n\n/** Imperative handle of `TimeAndSales` */\nexport interface TimeAndSalesHandle {\n  /** Appends trades (oldest first) */\n  addTrades(trades: MarketTrade | readonly MarketTrade[]): void;\n  /** Replaces every trade */\n  setTrades(trades: readonly MarketTrade[]): void;\n  /** Removes every trade */\n  clear(): void;\n  /** Scrolls back to the newest trade and resumes */\n  scrollToLatest(): void;\n  /** The underlying engine instance (minerva-design/charts/core) */\n  getInstance(): TimeAndSalesInstance | null;\n}\n\n/** Props of `TimeAndSales` */\nexport interface TimeAndSalesProps\n  extends TimeAndSalesOptions, OrderBookWidgetProps {\n  /**\n   * Trades, oldest first; when the array grows, only the appended ones are\n   * added (other changes replace the tape)\n   */\n  trades?: readonly MarketTrade[];\n  /** Hovered row (`null` when the pointer leaves) */\n  onHover?: (row: TimeAndSalesRowEvent | null) => void;\n  /** Click / tap / Enter on a row */\n  onTradeClick?: (row: TimeAndSalesRowEvent) => void;\n  /** The tape paused (pointer over it, scrolled down) or resumed */\n  onPause?: (paused: boolean) => void;\n  /** Imperative handle: `addTrades`, `setTrades`, `clear`, `scrollToLatest` */\n  ref?: Ref<TimeAndSalesHandle>;\n}\n\n// ------------------------------------------------------------------ shared\n\nconst size = (value: number | string | undefined, fallback: string) =>\n  value === undefined\n    ? fallback\n    : typeof value === \"number\"\n      ? `${value}px`\n      : value;\n\n/** Identical values, or inline arrays / objects with identical items */\nconst sameValue = (a: unknown, b: unknown): boolean => {\n  if (a === b) return true;\n  if (Array.isArray(a) && Array.isArray(b))\n    return a.length === b.length && a.every((v, i) => v === b[i]);\n  if (\n    typeof a !== \"object\" ||\n    typeof b !== \"object\" ||\n    a === null ||\n    b === null ||\n    Object.getPrototypeOf(a) !== Object.prototype ||\n    Object.getPrototypeOf(b) !== Object.prototype\n  )\n    return false;\n  const ka = Object.keys(a);\n  return (\n    ka.length === Object.keys(b).length &&\n    ka.every(\n      (k) =>\n        (a as Record<string, unknown>)[k] === (b as Record<string, unknown>)[k],\n    )\n  );\n};\n\n/** Same options, one level deep (inline `labels={{ … }}` stays equal) */\nconst sameOptions = (a: object, b: object): boolean => {\n  const ka = Object.keys(a).filter(\n    (k) => (a as Record<string, unknown>)[k] !== undefined,\n  );\n  const kb = Object.keys(b).filter(\n    (k) => (b as Record<string, unknown>)[k] !== undefined,\n  );\n  return (\n    ka.length === kb.length &&\n    ka.every((k) =>\n      sameValue(\n        (a as Record<string, unknown>)[k],\n        (b as Record<string, unknown>)[k],\n      ),\n    )\n  );\n};\n\ninterface Widget<O> {\n  setOptions(options: O): void;\n  destroy(): void;\n}\n\n/** Locale the engine resolves for `options` (the page language by default) */\nconst localeOf = (options: object): string =>\n  resolveLocale((options as { locale?: string }).locale);\n\n/**\n * Mounts an engine widget once, forwards option changes and subscribes the\n * handlers (read through a ref: inline callbacks never re-subscribe). The\n * options are applied again when the page language (`<html lang>`) changed,\n * so the built-in texts follow a language switch.\n */\nfunction useWidget<O extends object, I extends Widget<O>, H>(\n  factory: (container: HTMLElement, options: O) => I,\n  options: O,\n  handlers: H,\n  connect: (instance: I, handlers: () => H) => (() => void)[],\n): {\n  containerRef: RefObject<HTMLDivElement | null>;\n  instanceRef: RefObject<I | null>;\n} {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const instanceRef = useRef<I | null>(null);\n  const optionsRef = useRef(options);\n  const localeRef = useRef(\"\");\n  const handlersRef = useRef(handlers);\n\n  useEffect(() => {\n    handlersRef.current = handlers;\n  });\n\n  useEffect(() => {\n    const container = containerRef.current;\n    if (!container) return;\n    localeRef.current = localeOf(optionsRef.current);\n    const instance = factory(container, optionsRef.current);\n    instanceRef.current = instance;\n    const offs = connect(instance, () => handlersRef.current);\n    return () => {\n      offs.forEach((off) => off());\n      instance.destroy();\n      instanceRef.current = null;\n    };\n  }, [factory, connect]);\n\n  useEffect(() => {\n    const locale = localeOf(options);\n    if (\n      sameOptions(optionsRef.current, options) &&\n      locale === localeRef.current\n    )\n      return;\n    optionsRef.current = options;\n    localeRef.current = locale;\n    instanceRef.current?.setOptions(options);\n  });\n\n  return { containerRef, instanceRef };\n}\n\n/** Applies `book` when the object changes */\nfunction useBook(\n  instanceRef: RefObject<{ setBook(s: OrderBookSnapshot): void } | null>,\n  book: OrderBookSnapshot | undefined,\n) {\n  useEffect(() => {\n    if (book) instanceRef.current?.setBook(book);\n  }, [instanceRef, book]);\n}\n\n/** Adds the trades appended to `trades`; `replace` gets any other change */\nfunction useTrades(\n  instanceRef: RefObject<object | null>,\n  trades: readonly MarketTrade[] | undefined,\n  add: (trades: readonly MarketTrade[]) => void,\n  replace: (trades: readonly MarketTrade[]) => void,\n) {\n  const previousRef = useRef<readonly MarketTrade[] | undefined>(undefined);\n  /** Instance that received `previousRef` (a remount starts over) */\n  const targetRef = useRef<object | null>(null);\n  const addRef = useRef(add);\n  const replaceRef = useRef(replace);\n  useEffect(() => {\n    addRef.current = add;\n    replaceRef.current = replace;\n  });\n  useEffect(() => {\n    const target = instanceRef.current;\n    const previous =\n      targetRef.current === target ? previousRef.current : undefined;\n    previousRef.current = trades;\n    targetRef.current = target;\n    if (!trades || trades === previous) return;\n    const n = previous?.length ?? 0;\n    // a grown array (same items in front): only the new ones\n    if (\n      previous &&\n      n > 0 &&\n      trades.length >= n &&\n      trades[n - 1] === previous[n - 1] &&\n      trades[0] === previous[0]\n    ) {\n      if (trades.length > n) addRef.current(trades.slice(n));\n      return;\n    }\n    replaceRef.current(trades);\n  }, [instanceRef, trades]);\n}\n\nfunction Frame({\n  containerRef,\n  height,\n  width,\n  className,\n  style,\n  fallbackHeight,\n}: OrderBookWidgetProps & {\n  containerRef: RefObject<HTMLDivElement | null>;\n  fallbackHeight: string;\n}) {\n  return (\n    <div\n      className={className}\n      style={{\n        position: \"relative\",\n        width: size(width, \"100%\"),\n        height: size(height, fallbackHeight),\n        ...style,\n      }}\n    >\n      <div ref={containerRef} style={{ position: \"absolute\", inset: 0 }} />\n    </div>\n  );\n}\n\n// -------------------------------------------------------------- depth chart\n\ninterface DepthHandlers {\n  onHover?: DepthChartProps[\"onHover\"];\n  onClick?: DepthChartProps[\"onClick\"];\n  onRangeChange?: DepthChartProps[\"onRangeChange\"];\n}\n\nconst connectDepth = (chart: DepthChartInstance, h: () => DepthHandlers) => [\n  chart.on(\"hover\", (e) => h().onHover?.(e)),\n  chart.on(\"click\", (e) => h().onClick?.(e)),\n  chart.on(\"range\", (r) => h().onRangeChange?.(r)),\n];\n\n/**\n * Cumulative depth of an order book: stepped bid / ask areas around the mid\n * price, mirrored hover readout, zoom around the mid, eased updates.\n */\nexport function DepthChart({\n  height,\n  width,\n  className,\n  style,\n  book,\n  onHover,\n  onClick,\n  onRangeChange,\n  ref,\n  ...options\n}: DepthChartProps) {\n  const { containerRef, instanceRef } = useWidget(\n    createDepthChart,\n    options,\n    { onHover, onClick, onRangeChange },\n    connectDepth,\n  );\n  useBook(instanceRef, book);\n  useImperativeHandle(\n    ref,\n    () => ({\n      setBook: (snapshot) => instanceRef.current?.setBook(snapshot),\n      applyDeltas: (deltas) => instanceRef.current?.applyDeltas(deltas),\n      setRange: (range) => instanceRef.current?.setRange(range),\n      getInstance: () => instanceRef.current,\n    }),\n    [instanceRef],\n  );\n  return (\n    <Frame\n      containerRef={containerRef}\n      height={height}\n      width={width}\n      className={className}\n      style={style}\n      fallbackHeight=\"320px\"\n    />\n  );\n}\n\n// --------------------------------------------------------------- order book\n\ninterface LadderHandlers {\n  onHover?: OrderBookProps[\"onHover\"];\n  onLevelClick?: OrderBookProps[\"onLevelClick\"];\n}\n\nconst connectLadder = (book: OrderBookInstance, h: () => LadderHandlers) => [\n  book.on(\"hover\", (e) => h().onHover?.(e)),\n  book.on(\"levelClick\", (e) => h().onLevelClick?.(e)),\n];\n\n/**\n * Order book ladder: asks above the spread row, bids below, with depth\n * bars, price grouping, change flashes and large order highlight.\n */\nexport function OrderBook({\n  height,\n  width,\n  className,\n  style,\n  book,\n  lastPrice,\n  onHover,\n  onLevelClick,\n  ref,\n  ...options\n}: OrderBookProps) {\n  const { containerRef, instanceRef } = useWidget(\n    createOrderBook,\n    options,\n    { onHover, onLevelClick },\n    connectLadder,\n  );\n  useBook(instanceRef, book);\n  useEffect(() => {\n    if (lastPrice !== undefined) instanceRef.current?.setLastPrice(lastPrice);\n  }, [instanceRef, lastPrice]);\n  useImperativeHandle(\n    ref,\n    () => ({\n      setBook: (snapshot) => instanceRef.current?.setBook(snapshot),\n      applyDeltas: (deltas) => instanceRef.current?.applyDeltas(deltas),\n      setLastPrice: (price) => instanceRef.current?.setLastPrice(price),\n      getInstance: () => instanceRef.current,\n    }),\n    [instanceRef],\n  );\n  return (\n    <Frame\n      containerRef={containerRef}\n      height={height}\n      width={width}\n      className={className}\n      style={style}\n      fallbackHeight=\"420px\"\n    />\n  );\n}\n\n// ------------------------------------------------------------------ heatmap\n\ninterface HeatmapHandlers {\n  onHover?: OrderBookHeatmapProps[\"onHover\"];\n  onRendererChange?: OrderBookHeatmapProps[\"onRendererChange\"];\n  onFollowChange?: OrderBookHeatmapProps[\"onFollowChange\"];\n}\n\nconst connectHeatmap = (\n  heatmap: OrderBookHeatmapInstance,\n  h: () => HeatmapHandlers,\n) => [\n  heatmap.on(\"hover\", (e) => h().onHover?.(e)),\n  heatmap.on(\"renderer\", (r) => h().onRendererChange?.(r)),\n  heatmap.on(\"follow\", (f) => h().onFollowChange?.(f)),\n];\n\n/**\n * Liquidity heatmap: resting size over time and price drawn by the GPU,\n * best bid / ask lines and trades as bubbles sized by volume.\n */\nexport function OrderBookHeatmap({\n  height,\n  width,\n  className,\n  style,\n  book,\n  trades,\n  onHover,\n  onRendererChange,\n  onFollowChange,\n  ref,\n  ...options\n}: OrderBookHeatmapProps) {\n  const { containerRef, instanceRef } = useWidget(\n    createOrderBookHeatmap,\n    options,\n    { onHover, onRendererChange, onFollowChange },\n    connectHeatmap,\n  );\n  useBook(instanceRef, book);\n  useTrades(\n    instanceRef,\n    trades,\n    (list) => instanceRef.current?.addTrades(list),\n    (list) => instanceRef.current?.addTrades(list),\n  );\n  useImperativeHandle(\n    ref,\n    () => ({\n      setBook: (snapshot) => instanceRef.current?.setBook(snapshot),\n      applyDeltas: (deltas) => instanceRef.current?.applyDeltas(deltas),\n      addTrades: (list) => instanceRef.current?.addTrades(list),\n      resetView: () => instanceRef.current?.resetView(),\n      getInstance: () => instanceRef.current,\n    }),\n    [instanceRef],\n  );\n  return (\n    <Frame\n      containerRef={containerRef}\n      height={height}\n      width={width}\n      className={className}\n      style={style}\n      fallbackHeight=\"360px\"\n    />\n  );\n}\n\n// ----------------------------------------------------------- time and sales\n\ninterface TapeHandlers {\n  onHover?: TimeAndSalesProps[\"onHover\"];\n  onTradeClick?: TimeAndSalesProps[\"onTradeClick\"];\n  onPause?: TimeAndSalesProps[\"onPause\"];\n}\n\nconst connectTape = (tape: TimeAndSalesInstance, h: () => TapeHandlers) => [\n  tape.on(\"hover\", (e) => h().onHover?.(e)),\n  tape.on(\"tradeClick\", (e) => h().onTradeClick?.(e)),\n  tape.on(\"pause\", (p) => h().onPause?.(p)),\n];\n\n/**\n * Time and sales tape: newest trades on top, virtualized (hundreds of\n * thousands of rows), large trades highlighted, paused while hovered.\n */\nexport function TimeAndSales({\n  height,\n  width,\n  className,\n  style,\n  trades,\n  onHover,\n  onTradeClick,\n  onPause,\n  ref,\n  ...options\n}: TimeAndSalesProps) {\n  const { containerRef, instanceRef } = useWidget(\n    createTimeAndSales,\n    options,\n    { onHover, onTradeClick, onPause },\n    connectTape,\n  );\n  useTrades(\n    instanceRef,\n    trades,\n    (list) => instanceRef.current?.addTrades(list),\n    (list) => instanceRef.current?.setTrades(list),\n  );\n  useImperativeHandle(\n    ref,\n    () => ({\n      addTrades: (list) => instanceRef.current?.addTrades(list),\n      setTrades: (list) => instanceRef.current?.setTrades(list),\n      clear: () => instanceRef.current?.clear(),\n      scrollToLatest: () => instanceRef.current?.scrollToLatest(),\n      getInstance: () => instanceRef.current,\n    }),\n    [instanceRef],\n  );\n  return (\n    <Frame\n      containerRef={containerRef}\n      height={height}\n      width={width}\n      className={className}\n      style={style}\n      fallbackHeight=\"360px\"\n    />\n  );\n}\n"],"mappings":"yRA2KA,IAAMa,GAAQ,EAAoC,IAChDC,IAAU,IAAA,GACNC,EACA,OAAOD,GAAU,SACf,GAAGA,EAAM,IACTA,EAGFE,GAAa,EAAY,IAAwB,CACrD,GAAIC,IAAMC,EAAG,MAAO,GACpB,GAAI,MAAM,QAAQD,CAAC,GAAK,MAAM,QAAQC,CAAC,EACrC,OAAOD,EAAE,SAAWC,EAAE,QAAUD,EAAE,OAAO,EAAG,IAAME,IAAMD,EAAEE,EAAE,EAC9D,GACE,OAAOH,GAAM,UACb,OAAOC,GAAM,UACbD,IAAM,MACNC,IAAM,MACN,OAAO,eAAeD,CAAC,IAAM,OAAO,WACpC,OAAO,eAAeC,CAAC,IAAM,OAAO,UAEpC,MAAO,GACT,IAAMG,EAAK,OAAO,KAAKJ,CAAC,EACxB,OACEI,EAAG,SAAW,OAAO,KAAKH,CAAC,CAAC,CAAC,QAC7BG,EAAG,MACA,GACEJ,EAA8BK,KAAQJ,EAA8BI,EACzE,CAEJ,EAGMC,GAAe,EAAW,IAAuB,CACrD,IAAMF,EAAK,OAAO,KAAKJ,CAAC,CAAC,CAAC,OACvB,GAAOA,EAA8BK,KAAO,IAAA,EAC/C,EACME,EAAK,OAAO,KAAKN,CAAC,CAAC,CAAC,OACvB,GAAOA,EAA8BI,KAAO,IAAA,EAC/C,EACA,OACED,EAAG,SAAWG,EAAG,QACjBH,EAAG,MAAO,GACRL,EACGC,EAA8BK,GAC9BJ,EAA8BI,EACjC,CACF,CAEJ,EAQMG,EAAY,GAChBzB,EAAAA,cAAe0B,EAAgC,MAAM,EAQvD,SAASC,EACP,EACA,EACA,EACA,EAIA,CACA,IAAMC,GAAA,EAAe3B,EAAAA,OAAAA,CAAuB,IAAI,EAC1C4B,GAAA,EAAc5B,EAAAA,OAAAA,CAAiB,IAAI,EACnC6B,GAAA,EAAa7B,EAAAA,OAAAA,CAAOyB,CAAO,EAC3BK,GAAA,EAAY9B,EAAAA,OAAAA,CAAO,EAAE,EACrB+B,GAAA,EAAc/B,EAAAA,OAAAA,CAAOgC,CAAQ,EAgCnC,OA9BA,EAAAtB,EAAA,UAAA,KAAgB,CACd,EAAY,QAAUsB,CACxB,CAAC,GAED,EAAAtB,EAAA,UAAA,KAAgB,CACd,IAAMuB,EAAYN,EAAa,QAC/B,GAAI,CAACM,EAAW,OAChB,EAAU,QAAUT,EAASK,EAAW,OAAO,EAC/C,IAAMK,EAAWC,EAAQF,EAAWJ,EAAW,OAAO,EACtD,EAAY,QAAUK,EACtB,IAAME,EAAOC,EAAQH,MAAgBH,EAAY,OAAO,EACxD,UAAa,CACXK,EAAK,QAAS,GAAQE,EAAI,CAAC,EAC3BJ,EAAS,QAAQ,EACjB,EAAY,QAAU,IACxB,CACF,EAAG,CAACC,EAASE,CAAO,CAAC,GAErB,EAAA3B,EAAA,UAAA,KAAgB,CACd,IAAM6B,EAASf,EAASC,CAAO,EAE7BH,EAAYO,EAAW,QAASJ,CAAO,GACvCc,IAAWT,EAAU,UAGvB,EAAW,QAAUL,EACrB,EAAU,QAAUc,EACpBX,EAAY,SAAS,WAAWH,CAAO,EACzC,CAAC,EAEM,CAAE,eAAc,aAAY,CACrC,CAGA,SAASe,EACP,EACA,EACA,EACA,EAAA9B,EAAA,UAAA,KAAgB,CACV+B,GAAMb,EAAY,SAAS,QAAQa,CAAI,CAC7C,EAAG,CAACb,EAAaa,CAAI,CAAC,CACxB,CAGA,SAASC,EACP,EACA,EACA,EACA,EACA,CACA,IAAMC,GAAA,EAAc3C,EAAAA,OAAAA,CAA2C,IAAA,EAAS,EAElE4C,GAAA,EAAY5C,EAAAA,OAAAA,CAAsB,IAAI,EACtC6C,GAAA,EAAS7C,EAAAA,OAAAA,CAAO8C,CAAG,EACnBC,GAAA,EAAa/C,EAAAA,OAAAA,CAAOgD,CAAO,GACjC,EAAAtC,EAAA,UAAA,KAAgB,CACd,EAAO,QAAUoC,EACjB,EAAW,QAAUE,CACvB,CAAC,GACD,EAAAtC,EAAA,UAAA,KAAgB,CACd,IAAMuC,EAASrB,EAAY,QACrBsB,EACJN,EAAU,UAAYK,EAASN,EAAY,QAAU,IAAA,GAGvD,GAFA,EAAY,QAAUQ,EACtB,EAAU,QAAUF,EAChB,CAACE,GAAUA,IAAWD,EAAU,OACpC,IAAME,EAAIF,GAAU,QAAU,EAE9B,GACEA,GACAE,EAAI,GACJD,EAAO,QAAUC,GACjBD,EAAOC,EAAI,KAAOF,EAASE,EAAI,IAC/BD,EAAO,KAAOD,EAAS,GACvB,CACIC,EAAO,OAASC,GAAGP,EAAO,QAAQM,EAAO,MAAMC,CAAC,CAAC,EACrD,MACF,CACAL,EAAW,QAAQI,CAAM,CAC3B,EAAG,CAACvB,EAAauB,CAAM,CAAC,CAC1B,CAEA,SAASE,EAAM,CACb,eACA,SACA,QACA,YACA,QACA,kBAIC,CACD,OACE,EAAA1C,EAAA,IAAA,CAAC,MAAD,CACa,YACX,MAAO,CACL,SAAU,WACV,MAAOC,EAAK0C,EAAO,MAAM,EACzB,OAAQ1C,EAAK2C,EAAQC,CAAc,EACnC,GAAGC,CACL,EAEA,UAAA,EAAA9C,EAAA,IAAA,CAAC,MAAD,CAAK,IAAKgB,EAAc,MAAO,CAAE,SAAU,WAAY,MAAO,CAAE,CAAI,CAAA,CACjE,CAAA,CAET,CAUA,IAAM+B,GAAgB,EAA2B,IAA2B,CAC1EC,EAAM,GAAG,QAAU,GAAMC,EAAE,CAAC,CAAC,UAAU,CAAC,CAAC,EACzCD,EAAM,GAAG,QAAU,GAAMC,EAAE,CAAC,CAAC,UAAU,CAAC,CAAC,EACzCD,EAAM,GAAG,QAAU,GAAMC,EAAE,CAAC,CAAC,gBAAgBC,CAAC,CAAC,CACjD,EAMA,SAAgBC,EAAW,CACzB,SACA,QACA,YACA,QACA,OACA,UACA,UACA,gBACA,MACA,GAAGrC,GACe,CAClB,GAAM,CAAE,eAAc,eAAgBC,EACpCzB,EAAAA,iBACAwB,EACA,CAAE,UAAS,UAAS,eAAc,EAClCiC,CACF,EAYA,OAXAlB,EAAQZ,EAAaa,CAAI,GACzB,EAAA/B,EAAA,oBAAA,CACEqD,OACO,CACL,QAAU,GAAanC,EAAY,SAAS,QAAQoC,CAAQ,EAC5D,YAAc,GAAWpC,EAAY,SAAS,YAAYqC,CAAM,EAChE,SAAW,GAAUrC,EAAY,SAAS,SAASsC,CAAK,EACxD,gBAAmBtC,EAAY,OACjC,GACA,CAACA,CAAW,CACd,GAEE,EAAAjB,EAAA,IAAA,CAAC0C,EAAD,CACgB,eACN,SACD,QACI,YACJ,QACP,eAAe,OAChB,CAAA,CAEL,CASA,IAAMc,GAAiB,EAAyB,IAA4B,CAC1E1B,EAAK,GAAG,QAAU,GAAMmB,EAAE,CAAC,CAAC,UAAU,CAAC,CAAC,EACxCnB,EAAK,GAAG,aAAe,GAAMmB,EAAE,CAAC,CAAC,eAAe,CAAC,CAAC,CACpD,EAMA,SAAgBQ,EAAU,CACxB,SACA,QACA,YACA,QACA,OACA,YACA,UACA,eACA,MACA,GAAG3C,GACc,CACjB,GAAM,CAAE,eAAc,eAAgBC,EACpCxB,EAAAA,gBACAuB,EACA,CAAE,UAAS,cAAa,EACxB0C,CACF,EAeA,OAdA3B,EAAQZ,EAAaa,CAAI,GACzB,EAAA/B,EAAA,UAAA,KAAgB,CACV2D,IAAc,IAAA,IAAWzC,EAAY,SAAS,aAAayC,CAAS,CAC1E,EAAG,CAACzC,EAAayC,CAAS,CAAC,GAC3B,EAAA3D,EAAA,oBAAA,CACEqD,OACO,CACL,QAAU,GAAanC,EAAY,SAAS,QAAQoC,CAAQ,EAC5D,YAAc,GAAWpC,EAAY,SAAS,YAAYqC,CAAM,EAChE,aAAe,GAAUrC,EAAY,SAAS,aAAa0C,CAAK,EAChE,gBAAmB1C,EAAY,OACjC,GACA,CAACA,CAAW,CACd,GAEE,EAAAjB,EAAA,IAAA,CAAC0C,EAAD,CACgB,eACN,SACD,QACI,YACJ,QACP,eAAe,OAChB,CAAA,CAEL,CAUA,IAAMkB,GACJ,EACA,IACG,CACHC,EAAQ,GAAG,QAAU,GAAMZ,EAAE,CAAC,CAAC,UAAU,CAAC,CAAC,EAC3CY,EAAQ,GAAG,WAAa,GAAMZ,EAAE,CAAC,CAAC,mBAAmBC,CAAC,CAAC,EACvDW,EAAQ,GAAG,SAAW,GAAMZ,EAAE,CAAC,CAAC,iBAAiBa,CAAC,CAAC,CACrD,EAMA,SAAgBC,EAAiB,CAC/B,SACA,QACA,YACA,QACA,OACA,SACA,UACA,mBACA,iBACA,MACA,GAAGjD,GACqB,CACxB,GAAM,CAAE,eAAc,eAAgBC,EACpCvB,EAAAA,uBACAsB,EACA,CAAE,UAAS,mBAAkB,gBAAe,EAC5C8C,CACF,EAmBA,OAlBA/B,EAAQZ,EAAaa,CAAI,EACzBC,EACEd,EACAuB,EACC,GAASvB,EAAY,SAAS,UAAU+C,CAAI,EAC5C,GAAS/C,EAAY,SAAS,UAAU+C,CAAI,CAC/C,GACA,EAAAjE,EAAA,oBAAA,CACEqD,OACO,CACL,QAAU,GAAanC,EAAY,SAAS,QAAQoC,CAAQ,EAC5D,YAAc,GAAWpC,EAAY,SAAS,YAAYqC,CAAM,EAChE,UAAY,GAASrC,EAAY,SAAS,UAAU+C,CAAI,EACxD,cAAiB/C,EAAY,SAAS,UAAU,EAChD,gBAAmBA,EAAY,OACjC,GACA,CAACA,CAAW,CACd,GAEE,EAAAjB,EAAA,IAAA,CAAC0C,EAAD,CACgB,eACN,SACD,QACI,YACJ,QACP,eAAe,OAChB,CAAA,CAEL,CAUA,IAAMuB,GAAe,EAA4B,IAA0B,CACzEC,EAAK,GAAG,QAAU,GAAMjB,EAAE,CAAC,CAAC,UAAU,CAAC,CAAC,EACxCiB,EAAK,GAAG,aAAe,GAAMjB,EAAE,CAAC,CAAC,eAAe,CAAC,CAAC,EAClDiB,EAAK,GAAG,QAAU,GAAMjB,EAAE,CAAC,CAAC,UAAUkB,CAAC,CAAC,CAC1C,EAMA,SAAgBC,EAAa,CAC3B,SACA,QACA,YACA,QACA,SACA,UACA,eACA,UACA,MACA,GAAGtD,GACiB,CACpB,GAAM,CAAE,eAAc,eAAgBC,EACpCtB,EAAAA,mBACAqB,EACA,CAAE,UAAS,eAAc,SAAQ,EACjCmD,CACF,EAkBA,OAjBAlC,EACEd,EACAuB,EACC,GAASvB,EAAY,SAAS,UAAU+C,CAAI,EAC5C,GAAS/C,EAAY,SAAS,UAAU+C,CAAI,CAC/C,GACA,EAAAjE,EAAA,oBAAA,CACEqD,OACO,CACL,UAAY,GAASnC,EAAY,SAAS,UAAU+C,CAAI,EACxD,UAAY,GAAS/C,EAAY,SAAS,UAAU+C,CAAI,EACxD,UAAa/C,EAAY,SAAS,MAAM,EACxC,mBAAsBA,EAAY,SAAS,eAAe,EAC1D,gBAAmBA,EAAY,OACjC,GACA,CAACA,CAAW,CACd,GAEE,EAAAjB,EAAA,IAAA,CAAC0C,EAAD,CACgB,eACN,SACD,QACI,YACJ,QACP,eAAe,OAChB,CAAA,CAEL"}

package/dist/charts/react/orderbook.d.cts

@@ -0,0 +1,142 @@
+import { CSSProperties, Ref } from 'react';
+import { DepthChartHoverEvent, DepthChartInstance, DepthChartOptions, MarketTrade, OrderBookDelta, OrderBookHeatmapHoverEvent, OrderBookHeatmapInstance, OrderBookHeatmapOptions, OrderBookInstance, OrderBookLevelEvent, OrderBookOptions, OrderBookSnapshot, TimeAndSalesInstance, TimeAndSalesOptions, TimeAndSalesRowEvent } from '../engine/orderbook/types.cjs';
+import { ChartRendererKind } from '../engine/types.cjs';
+/** Container props shared by the order book components */
+export interface OrderBookWidgetProps {
+    /** Height of the widget; numbers are pixels */
+    height?: number | string;
+    /**
+     * Width of the widget; numbers are pixels
+     * @default "100%"
+     */
+    width?: number | string;
+    /** Class of the container */
+    className?: string;
+    /** Style of the container */
+    style?: CSSProperties;
+}
+/** Imperative handle of `DepthChart` */
+export interface DepthChartHandle {
+    /** Replaces the book */
+    setBook(snapshot: OrderBookSnapshot): void;
+    /** Applies updates (size 0 removes a level); drawn once at the next frame */
+    applyDeltas(deltas: OrderBookDelta | readonly OrderBookDelta[]): void;
+    /** Sets the visible range (fraction of the mid); `null` fits the book */
+    setRange(range: number | null): void;
+    /** The underlying engine instance (minerva-design/charts/core) */
+    getInstance(): DepthChartInstance | null;
+}
+/** Props of `DepthChart` */
+export interface DepthChartProps extends DepthChartOptions, OrderBookWidgetProps {
+    /** Book to draw, applied when the object changes (stream updates through the ref) */
+    book?: OrderBookSnapshot;
+    /** Pointer over the curves (`null` when it leaves) */
+    onHover?: (event: DepthChartHoverEvent | null) => void;
+    /** Click / tap on the curves */
+    onClick?: (event: DepthChartHoverEvent) => void;
+    /** The visible range changed by zooming (fraction of the mid) */
+    onRangeChange?: (range: number) => void;
+    /** Imperative handle: `setBook`, `applyDeltas`, `setRange` */
+    ref?: Ref<DepthChartHandle>;
+}
+/** Imperative handle of `OrderBook` */
+export interface OrderBookHandle {
+    /** Replaces the book */
+    setBook(snapshot: OrderBookSnapshot): void;
+    /** Applies updates (size 0 removes a level); drawn once at the next frame */
+    applyDeltas(deltas: OrderBookDelta | readonly OrderBookDelta[]): void;
+    /** Price of the spread row (the mid price when `null`) */
+    setLastPrice(price: number | null): void;
+    /** The underlying engine instance (minerva-design/charts/core) */
+    getInstance(): OrderBookInstance | null;
+}
+/** Props of `OrderBook` */
+export interface OrderBookProps extends OrderBookOptions, OrderBookWidgetProps {
+    /** Book to draw, applied when the object changes (stream updates through the ref) */
+    book?: OrderBookSnapshot;
+    /** Price of the spread row, colored by its last move; the mid price when omitted */
+    lastPrice?: number | null;
+    /** Hovered row (`null` when the pointer leaves) */
+    onHover?: (level: OrderBookLevelEvent | null) => void;
+    /** Click / tap / Enter on a row (e.g. to fill a price in an order form) */
+    onLevelClick?: (level: OrderBookLevelEvent) => void;
+    /** Imperative handle: `setBook`, `applyDeltas`, `setLastPrice` */
+    ref?: Ref<OrderBookHandle>;
+}
+/** Imperative handle of `OrderBookHeatmap` */
+export interface OrderBookHeatmapHandle {
+    /** Replaces the book (closes the columns up to its time) */
+    setBook(snapshot: OrderBookSnapshot): void;
+    /** Applies updates (closes the columns up to their time) */
+    applyDeltas(deltas: OrderBookDelta | readonly OrderBookDelta[]): void;
+    /** Adds trades (bubbles) */
+    addTrades(trades: MarketTrade | readonly MarketTrade[]): void;
+    /** Follows the market again */
+    resetView(): void;
+    /** The underlying engine instance (minerva-design/charts/core) */
+    getInstance(): OrderBookHeatmapInstance | null;
+}
+/** Props of `OrderBookHeatmap` */
+export interface OrderBookHeatmapProps extends OrderBookHeatmapOptions, OrderBookWidgetProps {
+    /** Book, applied when the object changes (stream updates through the ref) */
+    book?: OrderBookSnapshot;
+    /** Trades; when the array grows, only the appended ones are added */
+    trades?: readonly MarketTrade[];
+    /** Hovered cell (`null` when the pointer leaves) */
+    onHover?: (event: OrderBookHeatmapHoverEvent | null) => void;
+    /** Backend in use (also after a GPU loss) */
+    onRendererChange?: (renderer: ChartRendererKind) => void;
+    /** `true` while the view follows the market, `false` after a zoom / pan */
+    onFollowChange?: (follow: boolean) => void;
+    /** Imperative handle: `setBook`, `applyDeltas`, `addTrades`, `resetView` */
+    ref?: Ref<OrderBookHeatmapHandle>;
+}
+/** Imperative handle of `TimeAndSales` */
+export interface TimeAndSalesHandle {
+    /** Appends trades (oldest first) */
+    addTrades(trades: MarketTrade | readonly MarketTrade[]): void;
+    /** Replaces every trade */
+    setTrades(trades: readonly MarketTrade[]): void;
+    /** Removes every trade */
+    clear(): void;
+    /** Scrolls back to the newest trade and resumes */
+    scrollToLatest(): void;
+    /** The underlying engine instance (minerva-design/charts/core) */
+    getInstance(): TimeAndSalesInstance | null;
+}
+/** Props of `TimeAndSales` */
+export interface TimeAndSalesProps extends TimeAndSalesOptions, OrderBookWidgetProps {
+    /**
+     * Trades, oldest first; when the array grows, only the appended ones are
+     * added (other changes replace the tape)
+     */
+    trades?: readonly MarketTrade[];
+    /** Hovered row (`null` when the pointer leaves) */
+    onHover?: (row: TimeAndSalesRowEvent | null) => void;
+    /** Click / tap / Enter on a row */
+    onTradeClick?: (row: TimeAndSalesRowEvent) => void;
+    /** The tape paused (pointer over it, scrolled down) or resumed */
+    onPause?: (paused: boolean) => void;
+    /** Imperative handle: `addTrades`, `setTrades`, `clear`, `scrollToLatest` */
+    ref?: Ref<TimeAndSalesHandle>;
+}
+/**
+ * Cumulative depth of an order book: stepped bid / ask areas around the mid
+ * price, mirrored hover readout, zoom around the mid, eased updates.
+ */
+export declare function DepthChart({ height, width, className, style, book, onHover, onClick, onRangeChange, ref, ...options }: DepthChartProps): import('react').JSX.Element;
+/**
+ * Order book ladder: asks above the spread row, bids below, with depth
+ * bars, price grouping, change flashes and large order highlight.
+ */
+export declare function OrderBook({ height, width, className, style, book, lastPrice, onHover, onLevelClick, ref, ...options }: OrderBookProps): import('react').JSX.Element;
+/**
+ * Liquidity heatmap: resting size over time and price drawn by the GPU,
+ * best bid / ask lines and trades as bubbles sized by volume.
+ */
+export declare function OrderBookHeatmap({ height, width, className, style, book, trades, onHover, onRendererChange, onFollowChange, ref, ...options }: OrderBookHeatmapProps): import('react').JSX.Element;
+/**
+ * Time and sales tape: newest trades on top, virtualized (hundreds of
+ * thousands of rows), large trades highlighted, paused while hovered.
+ */
+export declare function TimeAndSales({ height, width, className, style, trades, onHover, onTradeClick, onPause, ref, ...options }: TimeAndSalesProps): import('react').JSX.Element;

package/dist/charts/react/orderbook.d.ts

@@ -0,0 +1,142 @@
+import { CSSProperties, Ref } from 'react';
+import { DepthChartHoverEvent, DepthChartInstance, DepthChartOptions, MarketTrade, OrderBookDelta, OrderBookHeatmapHoverEvent, OrderBookHeatmapInstance, OrderBookHeatmapOptions, OrderBookInstance, OrderBookLevelEvent, OrderBookOptions, OrderBookSnapshot, TimeAndSalesInstance, TimeAndSalesOptions, TimeAndSalesRowEvent } from '../engine/orderbook/types.js';
+import { ChartRendererKind } from '../engine/types.js';
+/** Container props shared by the order book components */
+export interface OrderBookWidgetProps {
+    /** Height of the widget; numbers are pixels */
+    height?: number | string;
+    /**
+     * Width of the widget; numbers are pixels
+     * @default "100%"
+     */
+    width?: number | string;
+    /** Class of the container */
+    className?: string;
+    /** Style of the container */
+    style?: CSSProperties;
+}
+/** Imperative handle of `DepthChart` */
+export interface DepthChartHandle {
+    /** Replaces the book */
+    setBook(snapshot: OrderBookSnapshot): void;
+    /** Applies updates (size 0 removes a level); drawn once at the next frame */
+    applyDeltas(deltas: OrderBookDelta | readonly OrderBookDelta[]): void;
+    /** Sets the visible range (fraction of the mid); `null` fits the book */
+    setRange(range: number | null): void;
+    /** The underlying engine instance (minerva-design/charts/core) */
+    getInstance(): DepthChartInstance | null;
+}
+/** Props of `DepthChart` */
+export interface DepthChartProps extends DepthChartOptions, OrderBookWidgetProps {
+    /** Book to draw, applied when the object changes (stream updates through the ref) */
+    book?: OrderBookSnapshot;
+    /** Pointer over the curves (`null` when it leaves) */
+    onHover?: (event: DepthChartHoverEvent | null) => void;
+    /** Click / tap on the curves */
+    onClick?: (event: DepthChartHoverEvent) => void;
+    /** The visible range changed by zooming (fraction of the mid) */
+    onRangeChange?: (range: number) => void;
+    /** Imperative handle: `setBook`, `applyDeltas`, `setRange` */
+    ref?: Ref<DepthChartHandle>;
+}
+/** Imperative handle of `OrderBook` */
+export interface OrderBookHandle {
+    /** Replaces the book */
+    setBook(snapshot: OrderBookSnapshot): void;
+    /** Applies updates (size 0 removes a level); drawn once at the next frame */
+    applyDeltas(deltas: OrderBookDelta | readonly OrderBookDelta[]): void;
+    /** Price of the spread row (the mid price when `null`) */
+    setLastPrice(price: number | null): void;
+    /** The underlying engine instance (minerva-design/charts/core) */
+    getInstance(): OrderBookInstance | null;
+}
+/** Props of `OrderBook` */
+export interface OrderBookProps extends OrderBookOptions, OrderBookWidgetProps {
+    /** Book to draw, applied when the object changes (stream updates through the ref) */
+    book?: OrderBookSnapshot;
+    /** Price of the spread row, colored by its last move; the mid price when omitted */
+    lastPrice?: number | null;
+    /** Hovered row (`null` when the pointer leaves) */
+    onHover?: (level: OrderBookLevelEvent | null) => void;
+    /** Click / tap / Enter on a row (e.g. to fill a price in an order form) */
+    onLevelClick?: (level: OrderBookLevelEvent) => void;
+    /** Imperative handle: `setBook`, `applyDeltas`, `setLastPrice` */
+    ref?: Ref<OrderBookHandle>;
+}
+/** Imperative handle of `OrderBookHeatmap` */
+export interface OrderBookHeatmapHandle {
+    /** Replaces the book (closes the columns up to its time) */
+    setBook(snapshot: OrderBookSnapshot): void;
+    /** Applies updates (closes the columns up to their time) */
+    applyDeltas(deltas: OrderBookDelta | readonly OrderBookDelta[]): void;
+    /** Adds trades (bubbles) */
+    addTrades(trades: MarketTrade | readonly MarketTrade[]): void;
+    /** Follows the market again */
+    resetView(): void;
+    /** The underlying engine instance (minerva-design/charts/core) */
+    getInstance(): OrderBookHeatmapInstance | null;
+}
+/** Props of `OrderBookHeatmap` */
+export interface OrderBookHeatmapProps extends OrderBookHeatmapOptions, OrderBookWidgetProps {
+    /** Book, applied when the object changes (stream updates through the ref) */
+    book?: OrderBookSnapshot;
+    /** Trades; when the array grows, only the appended ones are added */
+    trades?: readonly MarketTrade[];
+    /** Hovered cell (`null` when the pointer leaves) */
+    onHover?: (event: OrderBookHeatmapHoverEvent | null) => void;
+    /** Backend in use (also after a GPU loss) */
+    onRendererChange?: (renderer: ChartRendererKind) => void;
+    /** `true` while the view follows the market, `false` after a zoom / pan */
+    onFollowChange?: (follow: boolean) => void;
+    /** Imperative handle: `setBook`, `applyDeltas`, `addTrades`, `resetView` */
+    ref?: Ref<OrderBookHeatmapHandle>;
+}
+/** Imperative handle of `TimeAndSales` */
+export interface TimeAndSalesHandle {
+    /** Appends trades (oldest first) */
+    addTrades(trades: MarketTrade | readonly MarketTrade[]): void;
+    /** Replaces every trade */
+    setTrades(trades: readonly MarketTrade[]): void;
+    /** Removes every trade */
+    clear(): void;
+    /** Scrolls back to the newest trade and resumes */
+    scrollToLatest(): void;
+    /** The underlying engine instance (minerva-design/charts/core) */
+    getInstance(): TimeAndSalesInstance | null;
+}
+/** Props of `TimeAndSales` */
+export interface TimeAndSalesProps extends TimeAndSalesOptions, OrderBookWidgetProps {
+    /**
+     * Trades, oldest first; when the array grows, only the appended ones are
+     * added (other changes replace the tape)
+     */
+    trades?: readonly MarketTrade[];
+    /** Hovered row (`null` when the pointer leaves) */
+    onHover?: (row: TimeAndSalesRowEvent | null) => void;
+    /** Click / tap / Enter on a row */
+    onTradeClick?: (row: TimeAndSalesRowEvent) => void;
+    /** The tape paused (pointer over it, scrolled down) or resumed */
+    onPause?: (paused: boolean) => void;
+    /** Imperative handle: `addTrades`, `setTrades`, `clear`, `scrollToLatest` */
+    ref?: Ref<TimeAndSalesHandle>;
+}
+/**
+ * Cumulative depth of an order book: stepped bid / ask areas around the mid
+ * price, mirrored hover readout, zoom around the mid, eased updates.
+ */
+export declare function DepthChart({ height, width, className, style, book, onHover, onClick, onRangeChange, ref, ...options }: DepthChartProps): import('react').JSX.Element;
+/**
+ * Order book ladder: asks above the spread row, bids below, with depth
+ * bars, price grouping, change flashes and large order highlight.
+ */
+export declare function OrderBook({ height, width, className, style, book, lastPrice, onHover, onLevelClick, ref, ...options }: OrderBookProps): import('react').JSX.Element;
+/**
+ * Liquidity heatmap: resting size over time and price drawn by the GPU,
+ * best bid / ask lines and trades as bubbles sized by volume.
+ */
+export declare function OrderBookHeatmap({ height, width, className, style, book, trades, onHover, onRendererChange, onFollowChange, ref, ...options }: OrderBookHeatmapProps): import('react').JSX.Element;
+/**
+ * Time and sales tape: newest trades on top, virtualized (hundreds of
+ * thousands of rows), large trades highlighted, paused while hovered.
+ */
+export declare function TimeAndSales({ height, width, className, style, trades, onHover, onTradeClick, onPause, ref, ...options }: TimeAndSalesProps): import('react').JSX.Element;

package/dist/charts/react/orderbook.js

@@ -0,0 +1,182 @@
+"use client";
+import { resolveLocale as e } from "../engine/locale.js";
+import { createDepthChart as t } from "../engine/orderbook/depth.js";
+import { createOrderBookHeatmap as n } from "../engine/orderbook/heatmap.js";
+import { createOrderBook as r } from "../engine/orderbook/ladder.js";
+import { createTimeAndSales as i } from "../engine/orderbook/tape.js";
+import { useEffect as a, useImperativeHandle as o, useRef as s } from "react";
+import { jsx as c } from "react/jsx-runtime";
+//#region src/react/orderbook.tsx
+var l = (e, t) => e === void 0 ? t : typeof e == "number" ? `${e}px` : e, u = (e, t) => {
+	if (e === t) return !0;
+	if (Array.isArray(e) && Array.isArray(t)) return e.length === t.length && e.every((e, n) => e === t[n]);
+	if (typeof e != "object" || typeof t != "object" || e === null || t === null || Object.getPrototypeOf(e) !== Object.prototype || Object.getPrototypeOf(t) !== Object.prototype) return !1;
+	let n = Object.keys(e);
+	return n.length === Object.keys(t).length && n.every((n) => e[n] === t[n]);
+}, d = (e, t) => {
+	let n = Object.keys(e).filter((t) => e[t] !== void 0), r = Object.keys(t).filter((e) => t[e] !== void 0);
+	return n.length === r.length && n.every((n) => u(e[n], t[n]));
+}, f = (t) => e(t.locale);
+function p(e, t, n, r) {
+	let i = s(null), o = s(null), c = s(t), l = s(""), u = s(n);
+	return a(() => {
+		u.current = n;
+	}), a(() => {
+		let t = i.current;
+		if (!t) return;
+		l.current = f(c.current);
+		let n = e(t, c.current);
+		o.current = n;
+		let a = r(n, () => u.current);
+		return () => {
+			a.forEach((e) => e()), n.destroy(), o.current = null;
+		};
+	}, [e, r]), a(() => {
+		let e = f(t);
+		d(c.current, t) && e === l.current || (c.current = t, l.current = e, o.current?.setOptions(t));
+	}), {
+		containerRef: i,
+		instanceRef: o
+	};
+}
+function m(e, t) {
+	a(() => {
+		t && e.current?.setBook(t);
+	}, [e, t]);
+}
+function h(e, t, n, r) {
+	let i = s(void 0), o = s(null), c = s(n), l = s(r);
+	a(() => {
+		c.current = n, l.current = r;
+	}), a(() => {
+		let n = e.current, r = o.current === n ? i.current : void 0;
+		if (i.current = t, o.current = n, !t || t === r) return;
+		let a = r?.length ?? 0;
+		if (r && a > 0 && t.length >= a && t[a - 1] === r[a - 1] && t[0] === r[0]) {
+			t.length > a && c.current(t.slice(a));
+			return;
+		}
+		l.current(t);
+	}, [e, t]);
+}
+function g({ containerRef: e, height: t, width: n, className: r, style: i, fallbackHeight: a }) {
+	return /* @__PURE__ */ c("div", {
+		className: r,
+		style: {
+			position: "relative",
+			width: l(n, "100%"),
+			height: l(t, a),
+			...i
+		},
+		children: /* @__PURE__ */ c("div", {
+			ref: e,
+			style: {
+				position: "absolute",
+				inset: 0
+			}
+		})
+	});
+}
+var _ = (e, t) => [
+	e.on("hover", (e) => t().onHover?.(e)),
+	e.on("click", (e) => t().onClick?.(e)),
+	e.on("range", (e) => t().onRangeChange?.(e))
+];
+function v({ height: e, width: n, className: r, style: i, book: a, onHover: s, onClick: l, onRangeChange: u, ref: d, ...f }) {
+	let { containerRef: h, instanceRef: v } = p(t, f, {
+		onHover: s,
+		onClick: l,
+		onRangeChange: u
+	}, _);
+	return m(v, a), o(d, () => ({
+		setBook: (e) => v.current?.setBook(e),
+		applyDeltas: (e) => v.current?.applyDeltas(e),
+		setRange: (e) => v.current?.setRange(e),
+		getInstance: () => v.current
+	}), [v]), /* @__PURE__ */ c(g, {
+		containerRef: h,
+		height: e,
+		width: n,
+		className: r,
+		style: i,
+		fallbackHeight: "320px"
+	});
+}
+var y = (e, t) => [e.on("hover", (e) => t().onHover?.(e)), e.on("levelClick", (e) => t().onLevelClick?.(e))];
+function b({ height: e, width: t, className: n, style: i, book: s, lastPrice: l, onHover: u, onLevelClick: d, ref: f, ...h }) {
+	let { containerRef: _, instanceRef: v } = p(r, h, {
+		onHover: u,
+		onLevelClick: d
+	}, y);
+	return m(v, s), a(() => {
+		l !== void 0 && v.current?.setLastPrice(l);
+	}, [v, l]), o(f, () => ({
+		setBook: (e) => v.current?.setBook(e),
+		applyDeltas: (e) => v.current?.applyDeltas(e),
+		setLastPrice: (e) => v.current?.setLastPrice(e),
+		getInstance: () => v.current
+	}), [v]), /* @__PURE__ */ c(g, {
+		containerRef: _,
+		height: e,
+		width: t,
+		className: n,
+		style: i,
+		fallbackHeight: "420px"
+	});
+}
+var x = (e, t) => [
+	e.on("hover", (e) => t().onHover?.(e)),
+	e.on("renderer", (e) => t().onRendererChange?.(e)),
+	e.on("follow", (e) => t().onFollowChange?.(e))
+];
+function S({ height: e, width: t, className: r, style: i, book: a, trades: s, onHover: l, onRendererChange: u, onFollowChange: d, ref: f, ..._ }) {
+	let { containerRef: v, instanceRef: y } = p(n, _, {
+		onHover: l,
+		onRendererChange: u,
+		onFollowChange: d
+	}, x);
+	return m(y, a), h(y, s, (e) => y.current?.addTrades(e), (e) => y.current?.addTrades(e)), o(f, () => ({
+		setBook: (e) => y.current?.setBook(e),
+		applyDeltas: (e) => y.current?.applyDeltas(e),
+		addTrades: (e) => y.current?.addTrades(e),
+		resetView: () => y.current?.resetView(),
+		getInstance: () => y.current
+	}), [y]), /* @__PURE__ */ c(g, {
+		containerRef: v,
+		height: e,
+		width: t,
+		className: r,
+		style: i,
+		fallbackHeight: "360px"
+	});
+}
+var C = (e, t) => [
+	e.on("hover", (e) => t().onHover?.(e)),
+	e.on("tradeClick", (e) => t().onTradeClick?.(e)),
+	e.on("pause", (e) => t().onPause?.(e))
+];
+function w({ height: e, width: t, className: n, style: r, trades: a, onHover: s, onTradeClick: l, onPause: u, ref: d, ...f }) {
+	let { containerRef: m, instanceRef: _ } = p(i, f, {
+		onHover: s,
+		onTradeClick: l,
+		onPause: u
+	}, C);
+	return h(_, a, (e) => _.current?.addTrades(e), (e) => _.current?.setTrades(e)), o(d, () => ({
+		addTrades: (e) => _.current?.addTrades(e),
+		setTrades: (e) => _.current?.setTrades(e),
+		clear: () => _.current?.clear(),
+		scrollToLatest: () => _.current?.scrollToLatest(),
+		getInstance: () => _.current
+	}), [_]), /* @__PURE__ */ c(g, {
+		containerRef: m,
+		height: e,
+		width: t,
+		className: n,
+		style: r,
+		fallbackHeight: "360px"
+	});
+}
+//#endregion
+export { v as DepthChart, b as OrderBook, S as OrderBookHeatmap, w as TimeAndSales };
+
+//# sourceMappingURL=orderbook.js.map