minerva-design 1.3.0 → 1.5.0

package/dist/charts/react/graph.cjs

@@ -0,0 +1,2 @@
+"use client";const e=require("../engine/graph/chart.cjs");let t=require("react"),n=require("react/jsx-runtime");var r=e=>{if(typeof e!=`object`||!e)return!1;let t=Object.getPrototypeOf(e);return t===Object.prototype||t===null},i=(e,t)=>{let n=Object.keys(e);return n.length===Object.keys(t).length&&n.every(n=>e[n]===t[n]&&Object.prototype.hasOwnProperty.call(t,n))},a=(e,t)=>e===t?!0:Array.isArray(e)&&Array.isArray(t)?e.length===t.length&&e.every((e,n)=>e===t[n]):r(e)&&r(t)&&i(e,t),o=(e,t)=>{if(e===t)return!0;let n=Object.keys(e);return n.length===Object.keys(t).length&&n.every(n=>Object.prototype.hasOwnProperty.call(t,n)&&a(e[n],t[n]))},s=(e,t)=>e===void 0?t:typeof e==`number`?`${e}px`:e;function c({options:r,height:i,width:a,className:c,style:l,handleRef:u,...d}){let f=(0,t.useRef)(null),p=(0,t.useRef)(null),m=(0,t.useRef)(d),[h,g]=(0,t.useState)(r);h!==r&&!o(h,r)&&g(r);let _=(0,t.useRef)(h);return(0,t.useEffect)(()=>{m.current=d}),(0,t.useEffect)(()=>{let t=f.current;if(!t)return;let n=e.createGraphChart(t,_.current);p.current=n;let r=[n.on(`hover`,e=>m.current.onHover?.(e)),n.on(`click`,e=>m.current.onItemClick?.(e)),n.on(`select`,e=>m.current.onSelectionChange?.(e.ids)),n.on(`toggle`,e=>m.current.onToggle?.(e)),n.on(`groupToggle`,e=>m.current.onGroupToggle?.(e)),n.on(`layoutEnd`,e=>m.current.onLayoutEnd?.(e)),n.on(`renderer`,e=>m.current.onRendererChange?.(e))];return()=>{r.forEach(e=>e()),n.destroy(),p.current=null}},[]),(0,t.useEffect)(()=>{_.current!==h&&(_.current=h,p.current?.setOptions(h))},[h]),(0,t.useImperativeHandle)(u,()=>({fit:e=>p.current?.fit(e),focusNode:(e,t)=>p.current?.focusNode(e,t),setData:e=>p.current?.setData(e),select:e=>p.current?.select(e),getSelection:()=>p.current?.getSelection()??[],expand:e=>p.current?.expand(e),collapse:e=>p.current?.collapse(e),toggle:e=>p.current?.toggle(e),getPositions:()=>p.current?.getPositions()??{},relayout:()=>p.current?.relayout(),getRenderer:()=>p.current?.getRenderer()??null,getInstance:()=>p.current}),[]),(0,n.jsx)(`div`,{className:c,style:{position:`relative`,width:s(a,`100%`),height:s(i,`480px`),...l},children:(0,n.jsx)(`div`,{ref:f,style:{position:`absolute`,inset:0}})})}function l({props:e,layout:t}){let{nodes:r,edges:i,groups:a,height:o,width:s,nodeShape:l,nodeSize:u,edgeStyle:d,edgeWidth:f,edgeColor:p,arrows:m,nodeLabels:h,edgeLabels:g,highlight:_,selected:v,animation:y,fitPadding:b,controls:x,legend:S,tooltip:C,interaction:w,renderer:T,palette:E,ariaLabel:D,locale:O,labels:k,onHover:A,onItemClick:j,onSelectionChange:M,onToggle:N,onGroupToggle:P,onLayoutEnd:F,onRendererChange:I,className:L,style:R,ref:z}=e,B={nodes:r,edges:i,groups:a,...t,nodeShape:l,nodeSize:u,edgeStyle:d,edgeWidth:f,edgeColor:p,arrows:m,nodeLabels:h,edgeLabels:g,highlight:_,selected:v,animation:y,fitPadding:b,controls:x,legend:S,tooltip:C,interaction:w,renderer:T,palette:E,ariaLabel:D,locale:O,labels:k};return(0,n.jsx)(c,{options:B,height:o,width:s,className:L,style:R,handleRef:z,onHover:A,onItemClick:j,onSelectionChange:M,onToggle:N,onGroupToggle:P,onLayoutEnd:F,onRendererChange:I})}function u(e){let{layout:t,direction:r,force:i,circular:a,dag:o,tree:s}=e;return(0,n.jsx)(l,{props:e,layout:{layout:t??`force`,direction:r,force:i,circular:a,dag:o,tree:s}})}function d(e){let{direction:t,dag:r,criticalPath:i}=e;return(0,n.jsx)(l,{props:e,layout:{layout:`dag`,direction:t??`TB`,dag:i===void 0?r:{...r,criticalPath:i}}})}function f(e){let{layout:t,direction:r,tree:i}=e;return(0,n.jsx)(l,{props:e,layout:{layout:t??`tree`,direction:r,tree:i}})}exports.DependencyGraph=d,exports.GraphChart=u,exports.TreeChart=f;
+//# sourceMappingURL=graph.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"graph.cjs","names":["useRef","useState","createGraphChart","require_chart","react","react_jsx_runtime","isPlainObject","value","proto","shallowEqual","keys","a","b","key","sameValue","v","i","sameGraphOptions","cssSize","fallback","GraphBase","handlers","containerRef","chartRef","handlersRef","stable","setStable","options","optionsRef","container","chart","offs","r","off","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/graph.d.cts

@@ -0,0 +1,213 @@
+import { CSSProperties, Ref } from 'react';
+import { GraphChartInstance, GraphChartLabels, GraphCircularOptions, GraphDagOptions, GraphData, GraphDirection, GraphEdge, GraphEdgeStyle, GraphForceOptions, GraphGroup, GraphGroupToggleEvent, GraphHoverEvent, GraphInteractionOptions, GraphLayoutEndEvent, GraphLayoutType, GraphLegendOptions, GraphNode, GraphNodeShape, GraphPoint, GraphToggleEvent, GraphTooltipOptions, GraphTreeOptions } from '../engine/graph/types.cjs';
+import { ChartRendererKind, ChartRendererPreference } from '../engine/types.cjs';
+/** Imperative handle of the graph components (`ref`) */
+export interface GraphChartHandle {
+    /** Fits the visible nodes in the view */
+    fit(animate?: boolean): void;
+    /** Centers a node (expanding its collapsed ancestors), optionally zooming */
+    focusNode(id: string, options?: {
+        zoom?: number;
+        animate?: boolean;
+    }): void;
+    /** Replaces the data until the next render with new props */
+    setData(data: GraphData): void;
+    /** Selects nodes (`null` clears the selection) */
+    select(ids: readonly string[] | string | null): void;
+    /** Ids of the selected nodes */
+    getSelection(): string[];
+    /** Expands a node (all nodes without an id) */
+    expand(id?: string): void;
+    /** Collapses a node (all nodes with children without an id) */
+    collapse(id?: string): void;
+    /** Collapses / expands a node */
+    toggle(id: string): void;
+    /** Current positions of the nodes in layout units */
+    getPositions(): Record<string, GraphPoint>;
+    /** Computes the layout again */
+    relayout(): void;
+    /** Backend in use, `null` until ready */
+    getRenderer(): ChartRendererKind | null;
+    /** The underlying engine instance (minerva-design/charts/core) */
+    getInstance(): GraphChartInstance | null;
+}
+/** Props shared by `GraphChart`, `DependencyGraph` and `TreeChart` */
+export interface GraphCommonProps {
+    /** The nodes */
+    nodes: readonly GraphNode[];
+    /** The edges (parent → child in trees, prerequisite → dependent in DAGs) */
+    edges: readonly GraphEdge[];
+    /** Groups: legend order, names and colors */
+    groups?: readonly GraphGroup[];
+    /**
+     * Height of the chart (the legend included); numbers are pixels
+     * @default 480
+     */
+    height?: number | string;
+    /**
+     * Width of the chart; numbers are pixels
+     * @default "100%"
+     */
+    width?: number | string;
+    /** Shape of the nodes without `shape` (boxes for DAGs, org charts and mind maps, circles otherwise) */
+    nodeShape?: GraphNodeShape;
+    /** Circle diameter in layout units, or `[min, max]` scaled by the node `value` */
+    nodeSize?: number | readonly [number, number];
+    /** Edge shape; depends on the layout when omitted */
+    edgeStyle?: GraphEdgeStyle;
+    /** Edge width in CSS pixels, or `[min, max]` scaled by the edge `value` */
+    edgeWidth?: number | readonly [number, number];
+    /**
+     * Edge colors: neutral or tinted with the source / target node
+     * @default "neutral"
+     */
+    edgeColor?: "neutral" | "source" | "target";
+    /** Arrowheads on the edges without `directed` */
+    arrows?: boolean;
+    /**
+     * Node labels; `auto` hides minor and overlapping labels when zoomed out.
+     * Text inside boxes keeps a readable minimum size and is shortened with an ellipsis;
+     * it is hidden only when the box is too small for any text, or with `false`
+     * @default "auto"
+     */
+    nodeLabels?: boolean | "auto";
+    /**
+     * Edge labels: always, `auto` (zoomed in or highlighted), only `hover`, or never
+     * @default "auto"
+     */
+    edgeLabels?: boolean | "auto" | "hover";
+    /** What hovering / selecting a node highlights */
+    highlight?: "neighbors" | "lineage" | "none";
+    /** Ids of the selected nodes (changing it updates the selection) */
+    selected?: readonly string[];
+    /**
+     * Animates layout and data changes; a number is the duration in ms
+     * @default true
+     */
+    animation?: boolean | number;
+    /**
+     * Padding around the graph when fitting it, in CSS pixels
+     * @default 24
+     */
+    fitPadding?: number;
+    /**
+     * Zoom buttons (zoom in, zoom out, fit)
+     * @default true
+     */
+    controls?: boolean;
+    /** Legend of the groups; shown by default with several groups */
+    legend?: boolean | GraphLegendOptions;
+    /** Tooltip; `false` disables it */
+    tooltip?: boolean | GraphTooltipOptions;
+    /**
+     * Drag pans, Ctrl / ⌘ + wheel and pinch zoom, nodes can be dragged
+     * (force, circular), click selects, arrow keys move between nodes;
+     * `false` makes the chart static
+     * @default true
+     */
+    interaction?: boolean | GraphInteractionOptions;
+    /**
+     * Backend of the nodes and edges: `auto` tries WebGPU, then WebGL2, then
+     * WebGL, then Canvas2D, skipping GPUs running in software
+     * @default "auto"
+     */
+    renderer?: ChartRendererPreference;
+    /** Group colors (defaults to the `--chart-series-1..8` CSS variables, then the theme colors) */
+    palette?: readonly string[];
+    /** Accessible name of the chart */
+    ariaLabel?: string;
+    /**
+     * Language of the built-in texts (summary, announcements, tooltip,
+     * buttons); built-in texts in English, Chinese, Japanese and French
+     * @default the page language (`<html lang>`), then the browser language
+     */
+    locale?: string;
+    /** Overrides of the built-in texts of the `locale` */
+    labels?: Partial<GraphChartLabels>;
+    /** Called when the hovered (or keyboard-focused) node / edge changes */
+    onHover?: (event: GraphHoverEvent | null) => void;
+    /** Called when a node or an edge is clicked (or a node activated with Enter) */
+    onItemClick?: (event: GraphHoverEvent) => void;
+    /** Called with the ids of the selected nodes when the selection changes */
+    onSelectionChange?: (ids: string[]) => void;
+    /** Called when a tree node is collapsed or expanded */
+    onToggle?: (event: GraphToggleEvent) => void;
+    /** Called when the legend shows / hides a group */
+    onGroupToggle?: (event: GraphGroupToggleEvent) => void;
+    /** Called when the layout is done (the force simulation cooled down) */
+    onLayoutEnd?: (event: GraphLayoutEndEvent) => void;
+    /** Called with the backend once it is ready (and after a fallback) */
+    onRendererChange?: (renderer: ChartRendererKind) => void;
+    /** Class of the outer element */
+    className?: string;
+    /** Style of the outer element */
+    style?: CSSProperties;
+    /** Imperative handle */
+    ref?: Ref<GraphChartHandle>;
+}
+/** Props of `GraphChart` */
+export interface GraphChartProps extends GraphCommonProps {
+    /**
+     * Placement of the nodes
+     * @default "force"
+     */
+    layout?: GraphLayoutType;
+    /** Direction of the `dag` and `tree` layouts */
+    direction?: GraphDirection;
+    /** Force layout settings (Barnes–Hut, worker for large graphs) */
+    force?: GraphForceOptions;
+    /** Circular / arc layout settings */
+    circular?: GraphCircularOptions;
+    /** Layered layout settings (`layout="dag"`) */
+    dag?: GraphDagOptions;
+    /** Tree layout settings (tree layouts) */
+    tree?: GraphTreeOptions;
+}
+/** Props of `DependencyGraph` */
+export interface DependencyGraphProps extends GraphCommonProps {
+    /**
+     * Flow direction
+     * @default "TB"
+     */
+    direction?: GraphDirection;
+    /** Layer / node spacing, crossing reduction sweeps */
+    dag?: GraphDagOptions;
+    /**
+     * Highlights the longest path (node `value` = duration); `true` computes it, a list of ids sets it
+     * @default false
+     */
+    criticalPath?: boolean | readonly string[];
+}
+/** Props of `TreeChart` */
+export interface TreeChartProps extends GraphCommonProps {
+    /**
+     * Kind of tree: tidy tree, radial tree, two-sided mind map or org chart
+     * @default "tree"
+     */
+    layout?: "tree" | "radial" | "mindmap" | "org";
+    /**
+     * Direction of `layout="tree"`
+     * @default "LR"
+     */
+    direction?: GraphDirection;
+    /** Root, spacing, collapsing, card size */
+    tree?: GraphTreeOptions;
+}
+/**
+ * Relationship network (关系图): force-directed by default (Barnes–Hut,
+ * a Web Worker for large graphs), or circular, arc diagram, layered or
+ * tree layouts; GPU rendering, pan / zoom, drag, neighbor highlight,
+ * legend toggles and keyboard navigation.
+ */
+export declare function GraphChart(props: GraphChartProps): import('react').JSX.Element;
+/**
+ * Dependency graph (依赖图): layered (Sugiyama) layout of a DAG with
+ * crossing reduction, spline or orthogonal edges with arrowheads,
+ * upstream / downstream highlight and the critical path.
+ */
+export declare function DependencyGraph(props: DependencyGraphProps): import('react').JSX.Element;
+/**
+ * Tree chart (树图): tidy tree, radial tree, mind map or org chart, with
+ * animated collapse / expand of the subtrees.
+ */
+export declare function TreeChart(props: TreeChartProps): import('react').JSX.Element;

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

@@ -0,0 +1,213 @@
+import { CSSProperties, Ref } from 'react';
+import { GraphChartInstance, GraphChartLabels, GraphCircularOptions, GraphDagOptions, GraphData, GraphDirection, GraphEdge, GraphEdgeStyle, GraphForceOptions, GraphGroup, GraphGroupToggleEvent, GraphHoverEvent, GraphInteractionOptions, GraphLayoutEndEvent, GraphLayoutType, GraphLegendOptions, GraphNode, GraphNodeShape, GraphPoint, GraphToggleEvent, GraphTooltipOptions, GraphTreeOptions } from '../engine/graph/types.js';
+import { ChartRendererKind, ChartRendererPreference } from '../engine/types.js';
+/** Imperative handle of the graph components (`ref`) */
+export interface GraphChartHandle {
+    /** Fits the visible nodes in the view */
+    fit(animate?: boolean): void;
+    /** Centers a node (expanding its collapsed ancestors), optionally zooming */
+    focusNode(id: string, options?: {
+        zoom?: number;
+        animate?: boolean;
+    }): void;
+    /** Replaces the data until the next render with new props */
+    setData(data: GraphData): void;
+    /** Selects nodes (`null` clears the selection) */
+    select(ids: readonly string[] | string | null): void;
+    /** Ids of the selected nodes */
+    getSelection(): string[];
+    /** Expands a node (all nodes without an id) */
+    expand(id?: string): void;
+    /** Collapses a node (all nodes with children without an id) */
+    collapse(id?: string): void;
+    /** Collapses / expands a node */
+    toggle(id: string): void;
+    /** Current positions of the nodes in layout units */
+    getPositions(): Record<string, GraphPoint>;
+    /** Computes the layout again */
+    relayout(): void;
+    /** Backend in use, `null` until ready */
+    getRenderer(): ChartRendererKind | null;
+    /** The underlying engine instance (minerva-design/charts/core) */
+    getInstance(): GraphChartInstance | null;
+}
+/** Props shared by `GraphChart`, `DependencyGraph` and `TreeChart` */
+export interface GraphCommonProps {
+    /** The nodes */
+    nodes: readonly GraphNode[];
+    /** The edges (parent → child in trees, prerequisite → dependent in DAGs) */
+    edges: readonly GraphEdge[];
+    /** Groups: legend order, names and colors */
+    groups?: readonly GraphGroup[];
+    /**
+     * Height of the chart (the legend included); numbers are pixels
+     * @default 480
+     */
+    height?: number | string;
+    /**
+     * Width of the chart; numbers are pixels
+     * @default "100%"
+     */
+    width?: number | string;
+    /** Shape of the nodes without `shape` (boxes for DAGs, org charts and mind maps, circles otherwise) */
+    nodeShape?: GraphNodeShape;
+    /** Circle diameter in layout units, or `[min, max]` scaled by the node `value` */
+    nodeSize?: number | readonly [number, number];
+    /** Edge shape; depends on the layout when omitted */
+    edgeStyle?: GraphEdgeStyle;
+    /** Edge width in CSS pixels, or `[min, max]` scaled by the edge `value` */
+    edgeWidth?: number | readonly [number, number];
+    /**
+     * Edge colors: neutral or tinted with the source / target node
+     * @default "neutral"
+     */
+    edgeColor?: "neutral" | "source" | "target";
+    /** Arrowheads on the edges without `directed` */
+    arrows?: boolean;
+    /**
+     * Node labels; `auto` hides minor and overlapping labels when zoomed out.
+     * Text inside boxes keeps a readable minimum size and is shortened with an ellipsis;
+     * it is hidden only when the box is too small for any text, or with `false`
+     * @default "auto"
+     */
+    nodeLabels?: boolean | "auto";
+    /**
+     * Edge labels: always, `auto` (zoomed in or highlighted), only `hover`, or never
+     * @default "auto"
+     */
+    edgeLabels?: boolean | "auto" | "hover";
+    /** What hovering / selecting a node highlights */
+    highlight?: "neighbors" | "lineage" | "none";
+    /** Ids of the selected nodes (changing it updates the selection) */
+    selected?: readonly string[];
+    /**
+     * Animates layout and data changes; a number is the duration in ms
+     * @default true
+     */
+    animation?: boolean | number;
+    /**
+     * Padding around the graph when fitting it, in CSS pixels
+     * @default 24
+     */
+    fitPadding?: number;
+    /**
+     * Zoom buttons (zoom in, zoom out, fit)
+     * @default true
+     */
+    controls?: boolean;
+    /** Legend of the groups; shown by default with several groups */
+    legend?: boolean | GraphLegendOptions;
+    /** Tooltip; `false` disables it */
+    tooltip?: boolean | GraphTooltipOptions;
+    /**
+     * Drag pans, Ctrl / ⌘ + wheel and pinch zoom, nodes can be dragged
+     * (force, circular), click selects, arrow keys move between nodes;
+     * `false` makes the chart static
+     * @default true
+     */
+    interaction?: boolean | GraphInteractionOptions;
+    /**
+     * Backend of the nodes and edges: `auto` tries WebGPU, then WebGL2, then
+     * WebGL, then Canvas2D, skipping GPUs running in software
+     * @default "auto"
+     */
+    renderer?: ChartRendererPreference;
+    /** Group colors (defaults to the `--chart-series-1..8` CSS variables, then the theme colors) */
+    palette?: readonly string[];
+    /** Accessible name of the chart */
+    ariaLabel?: string;
+    /**
+     * Language of the built-in texts (summary, announcements, tooltip,
+     * buttons); built-in texts in English, Chinese, Japanese and French
+     * @default the page language (`<html lang>`), then the browser language
+     */
+    locale?: string;
+    /** Overrides of the built-in texts of the `locale` */
+    labels?: Partial<GraphChartLabels>;
+    /** Called when the hovered (or keyboard-focused) node / edge changes */
+    onHover?: (event: GraphHoverEvent | null) => void;
+    /** Called when a node or an edge is clicked (or a node activated with Enter) */
+    onItemClick?: (event: GraphHoverEvent) => void;
+    /** Called with the ids of the selected nodes when the selection changes */
+    onSelectionChange?: (ids: string[]) => void;
+    /** Called when a tree node is collapsed or expanded */
+    onToggle?: (event: GraphToggleEvent) => void;
+    /** Called when the legend shows / hides a group */
+    onGroupToggle?: (event: GraphGroupToggleEvent) => void;
+    /** Called when the layout is done (the force simulation cooled down) */
+    onLayoutEnd?: (event: GraphLayoutEndEvent) => void;
+    /** Called with the backend once it is ready (and after a fallback) */
+    onRendererChange?: (renderer: ChartRendererKind) => void;
+    /** Class of the outer element */
+    className?: string;
+    /** Style of the outer element */
+    style?: CSSProperties;
+    /** Imperative handle */
+    ref?: Ref<GraphChartHandle>;
+}
+/** Props of `GraphChart` */
+export interface GraphChartProps extends GraphCommonProps {
+    /**
+     * Placement of the nodes
+     * @default "force"
+     */
+    layout?: GraphLayoutType;
+    /** Direction of the `dag` and `tree` layouts */
+    direction?: GraphDirection;
+    /** Force layout settings (Barnes–Hut, worker for large graphs) */
+    force?: GraphForceOptions;
+    /** Circular / arc layout settings */
+    circular?: GraphCircularOptions;
+    /** Layered layout settings (`layout="dag"`) */
+    dag?: GraphDagOptions;
+    /** Tree layout settings (tree layouts) */
+    tree?: GraphTreeOptions;
+}
+/** Props of `DependencyGraph` */
+export interface DependencyGraphProps extends GraphCommonProps {
+    /**
+     * Flow direction
+     * @default "TB"
+     */
+    direction?: GraphDirection;
+    /** Layer / node spacing, crossing reduction sweeps */
+    dag?: GraphDagOptions;
+    /**
+     * Highlights the longest path (node `value` = duration); `true` computes it, a list of ids sets it
+     * @default false
+     */
+    criticalPath?: boolean | readonly string[];
+}
+/** Props of `TreeChart` */
+export interface TreeChartProps extends GraphCommonProps {
+    /**
+     * Kind of tree: tidy tree, radial tree, two-sided mind map or org chart
+     * @default "tree"
+     */
+    layout?: "tree" | "radial" | "mindmap" | "org";
+    /**
+     * Direction of `layout="tree"`
+     * @default "LR"
+     */
+    direction?: GraphDirection;
+    /** Root, spacing, collapsing, card size */
+    tree?: GraphTreeOptions;
+}
+/**
+ * Relationship network (关系图): force-directed by default (Barnes–Hut,
+ * a Web Worker for large graphs), or circular, arc diagram, layered or
+ * tree layouts; GPU rendering, pan / zoom, drag, neighbor highlight,
+ * legend toggles and keyboard navigation.
+ */
+export declare function GraphChart(props: GraphChartProps): import('react').JSX.Element;
+/**
+ * Dependency graph (依赖图): layered (Sugiyama) layout of a DAG with
+ * crossing reduction, spline or orthogonal edges with arrowheads,
+ * upstream / downstream highlight and the critical path.
+ */
+export declare function DependencyGraph(props: DependencyGraphProps): import('react').JSX.Element;
+/**
+ * Tree chart (树图): tidy tree, radial tree, mind map or org chart, with
+ * animated collapse / expand of the subtrees.
+ */
+export declare function TreeChart(props: TreeChartProps): import('react').JSX.Element;

package/dist/charts/react/graph.js

@@ -0,0 +1,159 @@
+"use client";
+import { createGraphChart as e } from "../engine/graph/chart.js";
+import { useEffect as t, useImperativeHandle as n, useRef as r, useState as i } from "react";
+import { jsx as a } from "react/jsx-runtime";
+//#region src/react/graph.tsx
+var o = (e) => {
+	if (typeof e != "object" || !e) return !1;
+	let t = Object.getPrototypeOf(e);
+	return t === Object.prototype || t === null;
+}, s = (e, t) => {
+	let n = Object.keys(e);
+	return n.length === Object.keys(t).length && n.every((n) => e[n] === t[n] && Object.prototype.hasOwnProperty.call(t, n));
+}, c = (e, t) => e === t ? !0 : Array.isArray(e) && Array.isArray(t) ? e.length === t.length && e.every((e, n) => e === t[n]) : o(e) && o(t) && s(e, t), l = (e, t) => {
+	if (e === t) return !0;
+	let n = Object.keys(e);
+	return n.length === Object.keys(t).length && n.every((n) => Object.prototype.hasOwnProperty.call(t, n) && c(e[n], t[n]));
+}, u = (e, t) => e === void 0 ? t : typeof e == "number" ? `${e}px` : e;
+function d({ options: o, height: s, width: c, className: d, style: f, handleRef: p, ...m }) {
+	let h = r(null), g = r(null), _ = r(m), [v, y] = i(o);
+	v !== o && !l(v, o) && y(o);
+	let b = r(v);
+	return t(() => {
+		_.current = m;
+	}), t(() => {
+		let t = h.current;
+		if (!t) return;
+		let n = e(t, b.current);
+		g.current = n;
+		let r = [
+			n.on("hover", (e) => _.current.onHover?.(e)),
+			n.on("click", (e) => _.current.onItemClick?.(e)),
+			n.on("select", (e) => _.current.onSelectionChange?.(e.ids)),
+			n.on("toggle", (e) => _.current.onToggle?.(e)),
+			n.on("groupToggle", (e) => _.current.onGroupToggle?.(e)),
+			n.on("layoutEnd", (e) => _.current.onLayoutEnd?.(e)),
+			n.on("renderer", (e) => _.current.onRendererChange?.(e))
+		];
+		return () => {
+			r.forEach((e) => e()), n.destroy(), g.current = null;
+		};
+	}, []), t(() => {
+		b.current !== v && (b.current = v, g.current?.setOptions(v));
+	}, [v]), n(p, () => ({
+		fit: (e) => g.current?.fit(e),
+		focusNode: (e, t) => g.current?.focusNode(e, t),
+		setData: (e) => g.current?.setData(e),
+		select: (e) => g.current?.select(e),
+		getSelection: () => g.current?.getSelection() ?? [],
+		expand: (e) => g.current?.expand(e),
+		collapse: (e) => g.current?.collapse(e),
+		toggle: (e) => g.current?.toggle(e),
+		getPositions: () => g.current?.getPositions() ?? {},
+		relayout: () => g.current?.relayout(),
+		getRenderer: () => g.current?.getRenderer() ?? null,
+		getInstance: () => g.current
+	}), []), /* @__PURE__ */ a("div", {
+		className: d,
+		style: {
+			position: "relative",
+			width: u(c, "100%"),
+			height: u(s, "480px"),
+			...f
+		},
+		children: /* @__PURE__ */ a("div", {
+			ref: h,
+			style: {
+				position: "absolute",
+				inset: 0
+			}
+		})
+	});
+}
+function f({ props: e, layout: t }) {
+	let { nodes: n, edges: r, groups: i, height: o, width: s, nodeShape: c, nodeSize: l, edgeStyle: u, edgeWidth: f, edgeColor: p, arrows: m, nodeLabels: h, edgeLabels: g, highlight: _, selected: v, animation: y, fitPadding: b, controls: x, legend: S, tooltip: C, interaction: w, renderer: T, palette: E, ariaLabel: D, locale: O, labels: k, onHover: A, onItemClick: j, onSelectionChange: M, onToggle: N, onGroupToggle: P, onLayoutEnd: F, onRendererChange: I, className: L, style: R, ref: z } = e, B = {
+		nodes: n,
+		edges: r,
+		groups: i,
+		...t,
+		nodeShape: c,
+		nodeSize: l,
+		edgeStyle: u,
+		edgeWidth: f,
+		edgeColor: p,
+		arrows: m,
+		nodeLabels: h,
+		edgeLabels: g,
+		highlight: _,
+		selected: v,
+		animation: y,
+		fitPadding: b,
+		controls: x,
+		legend: S,
+		tooltip: C,
+		interaction: w,
+		renderer: T,
+		palette: E,
+		ariaLabel: D,
+		locale: O,
+		labels: k
+	};
+	return /* @__PURE__ */ a(d, {
+		options: B,
+		height: o,
+		width: s,
+		className: L,
+		style: R,
+		handleRef: z,
+		onHover: A,
+		onItemClick: j,
+		onSelectionChange: M,
+		onToggle: N,
+		onGroupToggle: P,
+		onLayoutEnd: F,
+		onRendererChange: I
+	});
+}
+function p(e) {
+	let { layout: t, direction: n, force: r, circular: i, dag: o, tree: s } = e;
+	return /* @__PURE__ */ a(f, {
+		props: e,
+		layout: {
+			layout: t ?? "force",
+			direction: n,
+			force: r,
+			circular: i,
+			dag: o,
+			tree: s
+		}
+	});
+}
+function m(e) {
+	let { direction: t, dag: n, criticalPath: r } = e;
+	return /* @__PURE__ */ a(f, {
+		props: e,
+		layout: {
+			layout: "dag",
+			direction: t ?? "TB",
+			dag: r === void 0 ? n : {
+				...n,
+				criticalPath: r
+			}
+		}
+	});
+}
+function h(e) {
+	let { layout: t, direction: n, tree: r } = e;
+	return /* @__PURE__ */ a(f, {
+		props: e,
+		layout: {
+			layout: t ?? "tree",
+			direction: n,
+			tree: r
+		}
+	});
+}
+//#endregion
+export { m as DependencyGraph, p as GraphChart, h as TreeChart };
+
+//# sourceMappingURL=graph.js.map