@tensor_1/react 2.11.0 → 2.12.0

package/README.md

@@ -7,7 +7,7 @@ Thin React wrappers over the UIx v2 CSS component library — every component is
 ```sh
 npm i @tensor_1/react @tensor_1/tokens
 ```
-Peer deps: `react` / `react-dom` (`^18` or `^19`).
+Peer deps: `react` / `react-dom` (`^18` or `^19`). Install `echarts` only when using a chart entry.
 
 ## Use
 
@@ -31,4 +31,13 @@ Charts (ECharts) live behind a separate entry so they stay out of the main bundl
 import { Chart } from "@tensor_1/react/chart";
 ```
 
+For common line, bar, and pie charts, the tree-shaken preset avoids shipping the complete ECharts build:
+
+```tsx
+import { Chart } from "@tensor_1/react/chart/preset";
+```
+
+Large fixed-height tables can use `useVirtualRows(rows, { rowHeight })`; attach its `containerRef` to
+`TableWrap` and render the returned row window between spacer rows.
+
 Ships **ESM + CJS + types**, with per-file `"use client"` so it's safe under React Server Components. Part of the **[UIx v2 styleguide](https://github.com/COx-ORG-H/UIx)**.

package/dist/ChartCore-Bt1C84ty.d.cts

@@ -0,0 +1,22 @@
+import { CSSProperties, ReactNode } from 'react';
+import { EChartsOption, ECharts } from 'echarts';
+
+declare function uixChartPalette(): string[];
+interface ChartTableRow {
+    [key: string]: string | number;
+}
+interface ChartProps {
+    option: EChartsOption;
+    title?: string;
+    subtitle?: string;
+    height?: string | number;
+    className?: string;
+    style?: CSSProperties;
+    ariaLabel?: string;
+    tableData?: ChartTableRow[];
+    tableHeaders?: string[];
+    onReady?: (chart: ECharts) => void;
+    header?: ReactNode;
+}
+
+export { type ChartProps as C, type ChartTableRow as a, uixChartPalette as u };

package/dist/chart-preset.cjs

@@ -0,0 +1,168 @@
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/chart-preset.tsx
+var chart_preset_exports = {};
+__export(chart_preset_exports, {
+  Chart: () => Chart,
+  uixChartPalette: () => uixChartPalette
+});
+module.exports = __toCommonJS(chart_preset_exports);
+var echarts = __toESM(require("echarts/core"), 1);
+var import_charts = require("echarts/charts");
+var import_components = require("echarts/components");
+var import_renderers = require("echarts/renderers");
+
+// src/components/ChartCore.tsx
+var import_react = require("react");
+
+// src/cx.ts
+function cx(...args) {
+  return args.filter(Boolean).join(" ");
+}
+
+// src/components/ChartCore.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function readToken(name) {
+  if (typeof getComputedStyle === "undefined") return "";
+  return getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+}
+function uixChartPalette() {
+  return [1, 2, 3, 4, 5, 6, 7, 8].map((i) => readToken(`--uix-chart-${i}`));
+}
+function ChartCore({
+  engine,
+  option,
+  title,
+  subtitle,
+  height = 280,
+  className,
+  style,
+  ariaLabel,
+  tableData,
+  tableHeaders,
+  onReady,
+  header
+}) {
+  const containerRef = (0, import_react.useRef)(null);
+  const chartRef = (0, import_react.useRef)(null);
+  const appliedOptionRef = (0, import_react.useRef)(null);
+  const latestOptionRef = (0, import_react.useRef)(option);
+  const onReadyRef = (0, import_react.useRef)(onReady);
+  const tableId = (0, import_react.useId)();
+  latestOptionRef.current = option;
+  onReadyRef.current = onReady;
+  (0, import_react.useEffect)(() => {
+    const element = containerRef.current;
+    if (!element) return;
+    const chart = engine.init(element, null, { renderer: "svg" });
+    chartRef.current = chart;
+    chart.setOption(latestOptionRef.current);
+    appliedOptionRef.current = latestOptionRef.current;
+    onReadyRef.current?.(chart);
+    let frame = 0;
+    let width = element.clientWidth;
+    let height2 = element.clientHeight;
+    const observer = new ResizeObserver(() => {
+      const nextWidth = element.clientWidth;
+      const nextHeight = element.clientHeight;
+      if (nextWidth === width && nextHeight === height2) return;
+      width = nextWidth;
+      height2 = nextHeight;
+      if (frame) return;
+      frame = requestAnimationFrame(() => {
+        frame = 0;
+        chart.resize();
+      });
+    });
+    observer.observe(element);
+    return () => {
+      observer.disconnect();
+      if (frame) cancelAnimationFrame(frame);
+      chart.dispose();
+      chartRef.current = null;
+      appliedOptionRef.current = null;
+    };
+  }, [engine]);
+  (0, import_react.useEffect)(() => {
+    const chart = chartRef.current;
+    if (!chart || appliedOptionRef.current === option) return;
+    chart.setOption(option, { notMerge: false });
+    appliedOptionRef.current = option;
+  }, [option]);
+  const heightValue = typeof height === "number" ? `${height}px` : height;
+  const effectiveAriaLabel = ariaLabel ?? title ?? "Chart";
+  const hasTable = Boolean(tableData?.length && tableHeaders?.length);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: cx("uix-chart", className), style, children: [
+    title != null || subtitle != null || header != null ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+      header,
+      title ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "uix-chart__title", children: title }) : null,
+      subtitle ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "uix-chart__subtitle", children: subtitle }) : null
+    ] }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        ref: containerRef,
+        style: { height: heightValue },
+        role: "img",
+        "aria-label": effectiveAriaLabel,
+        "aria-describedby": hasTable ? tableId : void 0
+      }
+    ),
+    hasTable ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("table", { id: tableId, className: "sr-only", "aria-label": `${effectiveAriaLabel} \u2014 data table`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { children: tableHeaders.map((label) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { scope: "col", children: label }, label)) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tbody", { children: tableData.map((row, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { children: tableHeaders.map((label) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { children: row[label] }, label)) }, index)) })
+    ] }) : null
+  ] });
+}
+
+// src/chart-preset.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+echarts.use([
+  import_charts.BarChart,
+  import_charts.LineChart,
+  import_charts.PieChart,
+  import_components.DatasetComponent,
+  import_components.GridComponent,
+  import_components.LegendComponent,
+  import_components.TitleComponent,
+  import_components.TooltipComponent,
+  import_components.TransformComponent,
+  import_renderers.SVGRenderer
+]);
+var presetEngine = echarts;
+function Chart(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChartCore, { ...props, engine: presetEngine });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Chart,
+  uixChartPalette
+});

package/dist/chart-preset.d.cts

@@ -0,0 +1,9 @@
+import * as react from 'react';
+import { C as ChartProps } from './ChartCore-Bt1C84ty.cjs';
+export { a as ChartTableRow, u as uixChartPalette } from './ChartCore-Bt1C84ty.cjs';
+import 'echarts';
+
+/** Lean SVG adapter: line, bar, pie, dataset, grid, legend, title, and tooltip. */
+declare function Chart(props: ChartProps): react.JSX.Element;
+
+export { Chart, ChartProps };

package/dist/chart-preset.d.ts

@@ -0,0 +1,9 @@
+import * as react from 'react';
+import { ChartProps } from './components/ChartCore.js';
+export { ChartTableRow, uixChartPalette } from './components/ChartCore.js';
+import 'echarts';
+
+/** Lean SVG adapter: line, bar, pie, dataset, grid, legend, title, and tooltip. */
+declare function Chart(props: ChartProps): react.JSX.Element;
+
+export { Chart, ChartProps };

package/dist/chart-preset.js

@@ -0,0 +1,35 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as echarts from "echarts/core";
+import { BarChart, LineChart, PieChart } from "echarts/charts";
+import {
+  DatasetComponent,
+  GridComponent,
+  LegendComponent,
+  TitleComponent,
+  TooltipComponent,
+  TransformComponent
+} from "echarts/components";
+import { SVGRenderer } from "echarts/renderers";
+import { ChartCore } from "./components/ChartCore.js";
+echarts.use([
+  BarChart,
+  LineChart,
+  PieChart,
+  DatasetComponent,
+  GridComponent,
+  LegendComponent,
+  TitleComponent,
+  TooltipComponent,
+  TransformComponent,
+  SVGRenderer
+]);
+const presetEngine = echarts;
+function Chart(props) {
+  return /* @__PURE__ */ jsx(ChartCore, { ...props, engine: presetEngine });
+}
+import { uixChartPalette } from "./components/ChartCore.js";
+export {
+  Chart,
+  uixChartPalette
+};

package/dist/chart.cjs

@@ -36,15 +36,17 @@ __export(chart_exports, {
 module.exports = __toCommonJS(chart_exports);
 
 // src/components/Chart.tsx
-var import_react = require("react");
 var echarts = __toESM(require("echarts"), 1);
 
+// src/components/ChartCore.tsx
+var import_react = require("react");
+
 // src/cx.ts
 function cx(...args) {
   return args.filter(Boolean).join(" ");
 }
 
-// src/components/Chart.tsx
+// src/components/ChartCore.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 function readToken(name) {
   if (typeof getComputedStyle === "undefined") return "";
@@ -53,7 +55,8 @@ function readToken(name) {
 function uixChartPalette() {
   return [1, 2, 3, 4, 5, 6, 7, 8].map((i) => readToken(`--uix-chart-${i}`));
 }
-function Chart({
+function ChartCore({
+  engine,
   option,
   title,
   subtitle,
@@ -68,58 +71,81 @@ function Chart({
 }) {
   const containerRef = (0, import_react.useRef)(null);
   const chartRef = (0, import_react.useRef)(null);
+  const appliedOptionRef = (0, import_react.useRef)(null);
+  const latestOptionRef = (0, import_react.useRef)(option);
+  const onReadyRef = (0, import_react.useRef)(onReady);
   const tableId = (0, import_react.useId)();
+  latestOptionRef.current = option;
+  onReadyRef.current = onReady;
   (0, import_react.useEffect)(() => {
-    const el = containerRef.current;
-    if (!el) return;
-    const chart = echarts.init(el, null, { renderer: "svg" });
+    const element = containerRef.current;
+    if (!element) return;
+    const chart = engine.init(element, null, { renderer: "svg" });
     chartRef.current = chart;
-    chart.setOption(option);
-    onReady?.(chart);
-    const ro = new ResizeObserver(() => chart.resize());
-    ro.observe(el);
+    chart.setOption(latestOptionRef.current);
+    appliedOptionRef.current = latestOptionRef.current;
+    onReadyRef.current?.(chart);
+    let frame = 0;
+    let width = element.clientWidth;
+    let height2 = element.clientHeight;
+    const observer = new ResizeObserver(() => {
+      const nextWidth = element.clientWidth;
+      const nextHeight = element.clientHeight;
+      if (nextWidth === width && nextHeight === height2) return;
+      width = nextWidth;
+      height2 = nextHeight;
+      if (frame) return;
+      frame = requestAnimationFrame(() => {
+        frame = 0;
+        chart.resize();
+      });
+    });
+    observer.observe(element);
     return () => {
-      ro.disconnect();
+      observer.disconnect();
+      if (frame) cancelAnimationFrame(frame);
       chart.dispose();
       chartRef.current = null;
+      appliedOptionRef.current = null;
     };
-  }, []);
+  }, [engine]);
   (0, import_react.useEffect)(() => {
-    chartRef.current?.setOption(option, { notMerge: false });
+    const chart = chartRef.current;
+    if (!chart || appliedOptionRef.current === option) return;
+    chart.setOption(option, { notMerge: false });
+    appliedOptionRef.current = option;
   }, [option]);
-  const heightVal = typeof height === "number" ? `${height}px` : height;
+  const heightValue = typeof height === "number" ? `${height}px` : height;
   const effectiveAriaLabel = ariaLabel ?? title ?? "Chart";
-  const hasTable = tableData && tableData.length > 0 && tableHeaders && tableHeaders.length > 0;
+  const hasTable = Boolean(tableData?.length && tableHeaders?.length);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: cx("uix-chart", className), style, children: [
-    (title != null || subtitle != null || header != null) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+    title != null || subtitle != null || header != null ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
       header,
-      title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "uix-chart__title", children: title }),
-      subtitle && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "uix-chart__subtitle", children: subtitle })
-    ] }),
+      title ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "uix-chart__title", children: title }) : null,
+      subtitle ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "uix-chart__subtitle", children: subtitle }) : null
+    ] }) : null,
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "div",
       {
         ref: containerRef,
-        style: { height: heightVal },
+        style: { height: heightValue },
         role: "img",
         "aria-label": effectiveAriaLabel,
         "aria-describedby": hasTable ? tableId : void 0
       }
     ),
-    hasTable && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-      "table",
-      {
-        id: tableId,
-        className: "sr-only",
-        "aria-label": `${effectiveAriaLabel} \u2014 data table`,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { children: tableHeaders.map((h) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { scope: "col", children: h }, h)) }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tbody", { children: tableData.map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { children: tableHeaders.map((h) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { children: row[h] }, h)) }, i)) })
-        ]
-      }
-    )
+    hasTable ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("table", { id: tableId, className: "sr-only", "aria-label": `${effectiveAriaLabel} \u2014 data table`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { children: tableHeaders.map((label) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { scope: "col", children: label }, label)) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tbody", { children: tableData.map((row, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { children: tableHeaders.map((label) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { children: row[label] }, label)) }, index)) })
+    ] }) : null
   ] });
 }
+
+// src/components/Chart.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function Chart(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChartCore, { ...props, engine: echarts });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Chart,

package/dist/chart.d.cts

@@ -1,24 +1,9 @@
 import * as react from 'react';
-import { CSSProperties, ReactNode } from 'react';
-import { EChartsOption, ECharts } from 'echarts';
+import { C as ChartProps } from './ChartCore-Bt1C84ty.cjs';
+export { a as ChartTableRow, u as uixChartPalette } from './ChartCore-Bt1C84ty.cjs';
+import 'echarts';
 
-declare function uixChartPalette(): string[];
-interface ChartTableRow {
-    [key: string]: string | number;
-}
-interface ChartProps {
-    option: EChartsOption;
-    title?: string;
-    subtitle?: string;
-    height?: string | number;
-    className?: string;
-    style?: CSSProperties;
-    ariaLabel?: string;
-    tableData?: ChartTableRow[];
-    tableHeaders?: string[];
-    onReady?: (chart: ECharts) => void;
-    header?: ReactNode;
-}
-declare function Chart({ option, title, subtitle, height, className, style, ariaLabel, tableData, tableHeaders, onReady, header, }: ChartProps): react.JSX.Element;
+/** Full-compatibility adapter. Use `@tensor_1/react/chart/preset` for the lean preset. */
+declare function Chart(props: ChartProps): react.JSX.Element;
 
-export { Chart, type ChartProps, type ChartTableRow, uixChartPalette };
+export { Chart, ChartProps };

package/dist/chart.d.ts

@@ -1,3 +1,4 @@
-export { Chart, ChartProps, ChartTableRow, uixChartPalette } from './components/Chart.js';
+export { Chart } from './components/Chart.js';
+export { ChartProps, ChartTableRow, uixChartPalette } from './components/ChartCore.js';
 import 'react';
 import 'echarts';

package/dist/components/Chart.d.ts

@@ -1,24 +1,9 @@
 import * as react from 'react';
-import { CSSProperties, ReactNode } from 'react';
-import { EChartsOption, ECharts } from 'echarts';
+import { ChartProps } from './ChartCore.js';
+export { ChartTableRow, uixChartPalette } from './ChartCore.js';
+import 'echarts';
 
-declare function uixChartPalette(): string[];
-interface ChartTableRow {
-    [key: string]: string | number;
-}
-interface ChartProps {
-    option: EChartsOption;
-    title?: string;
-    subtitle?: string;
-    height?: string | number;
-    className?: string;
-    style?: CSSProperties;
-    ariaLabel?: string;
-    tableData?: ChartTableRow[];
-    tableHeaders?: string[];
-    onReady?: (chart: ECharts) => void;
-    header?: ReactNode;
-}
-declare function Chart({ option, title, subtitle, height, className, style, ariaLabel, tableData, tableHeaders, onReady, header, }: ChartProps): react.JSX.Element;
+/** Full-compatibility adapter. Use `@tensor_1/react/chart/preset` for the lean preset. */
+declare function Chart(props: ChartProps): react.JSX.Element;
 
-export { Chart, type ChartProps, type ChartTableRow, uixChartPalette };
+export { Chart, ChartProps };

package/dist/components/Chart.js

@@ -1,81 +1,10 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useRef, useEffect, useId } from "react";
+import { jsx } from "react/jsx-runtime";
 import * as echarts from "echarts";
-import { cx } from "../cx.js";
-function readToken(name) {
-  if (typeof getComputedStyle === "undefined") return "";
-  return getComputedStyle(document.documentElement).getPropertyValue(name).trim();
-}
-function uixChartPalette() {
-  return [1, 2, 3, 4, 5, 6, 7, 8].map((i) => readToken(`--uix-chart-${i}`));
-}
-function Chart({
-  option,
-  title,
-  subtitle,
-  height = 280,
-  className,
-  style,
-  ariaLabel,
-  tableData,
-  tableHeaders,
-  onReady,
-  header
-}) {
-  const containerRef = useRef(null);
-  const chartRef = useRef(null);
-  const tableId = useId();
-  useEffect(() => {
-    const el = containerRef.current;
-    if (!el) return;
-    const chart = echarts.init(el, null, { renderer: "svg" });
-    chartRef.current = chart;
-    chart.setOption(option);
-    onReady?.(chart);
-    const ro = new ResizeObserver(() => chart.resize());
-    ro.observe(el);
-    return () => {
-      ro.disconnect();
-      chart.dispose();
-      chartRef.current = null;
-    };
-  }, []);
-  useEffect(() => {
-    chartRef.current?.setOption(option, { notMerge: false });
-  }, [option]);
-  const heightVal = typeof height === "number" ? `${height}px` : height;
-  const effectiveAriaLabel = ariaLabel ?? title ?? "Chart";
-  const hasTable = tableData && tableData.length > 0 && tableHeaders && tableHeaders.length > 0;
-  return /* @__PURE__ */ jsxs("div", { className: cx("uix-chart", className), style, children: [
-    (title != null || subtitle != null || header != null) && /* @__PURE__ */ jsxs("div", { children: [
-      header,
-      title && /* @__PURE__ */ jsx("div", { className: "uix-chart__title", children: title }),
-      subtitle && /* @__PURE__ */ jsx("div", { className: "uix-chart__subtitle", children: subtitle })
-    ] }),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref: containerRef,
-        style: { height: heightVal },
-        role: "img",
-        "aria-label": effectiveAriaLabel,
-        "aria-describedby": hasTable ? tableId : void 0
-      }
-    ),
-    hasTable && /* @__PURE__ */ jsxs(
-      "table",
-      {
-        id: tableId,
-        className: "sr-only",
-        "aria-label": `${effectiveAriaLabel} \u2014 data table`,
-        children: [
-          /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: tableHeaders.map((h) => /* @__PURE__ */ jsx("th", { scope: "col", children: h }, h)) }) }),
-          /* @__PURE__ */ jsx("tbody", { children: tableData.map((row, i) => /* @__PURE__ */ jsx("tr", { children: tableHeaders.map((h) => /* @__PURE__ */ jsx("td", { children: row[h] }, h)) }, i)) })
-        ]
-      }
-    )
-  ] });
+import { ChartCore } from "./ChartCore.js";
+import { uixChartPalette } from "./ChartCore.js";
+function Chart(props) {
+  return /* @__PURE__ */ jsx(ChartCore, { ...props, engine: echarts });
 }
 export {
   Chart,

package/dist/components/ChartCore.d.ts

@@ -0,0 +1,33 @@
+import * as react from 'react';
+import { CSSProperties, ReactNode } from 'react';
+import { EChartsOption, ECharts } from 'echarts';
+
+interface ChartEngine {
+    init(element: HTMLElement, theme?: string | null, options?: {
+        renderer?: 'svg' | 'canvas';
+    }): ECharts;
+}
+declare function uixChartPalette(): string[];
+interface ChartTableRow {
+    [key: string]: string | number;
+}
+interface ChartProps {
+    option: EChartsOption;
+    title?: string;
+    subtitle?: string;
+    height?: string | number;
+    className?: string;
+    style?: CSSProperties;
+    ariaLabel?: string;
+    tableData?: ChartTableRow[];
+    tableHeaders?: string[];
+    onReady?: (chart: ECharts) => void;
+    header?: ReactNode;
+}
+interface ChartCoreProps extends ChartProps {
+    engine: ChartEngine;
+}
+/** Shared chart lifecycle. Runtime adapters only choose the ECharts build. */
+declare function ChartCore({ engine, option, title, subtitle, height, className, style, ariaLabel, tableData, tableHeaders, onReady, header, }: ChartCoreProps): react.JSX.Element;
+
+export { ChartCore, type ChartEngine, type ChartProps, type ChartTableRow, uixChartPalette };