@tensor_1/react 2.11.0 → 2.13.0

package/dist/color-model.js

@@ -0,0 +1,74 @@
+const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
+function normalizeHex(value) {
+  const raw = value.trim().replace(/^#/, "");
+  if (/^[\da-f]{3}$/i.test(raw)) return `#${raw.split("").map((char) => char + char).join("").toUpperCase()}`;
+  if (/^[\da-f]{6}$/i.test(raw)) return `#${raw.toUpperCase()}`;
+  return void 0;
+}
+function hexToRgb(value) {
+  const hex = normalizeHex(value);
+  if (!hex) return void 0;
+  return {
+    r: Number.parseInt(hex.slice(1, 3), 16),
+    g: Number.parseInt(hex.slice(3, 5), 16),
+    b: Number.parseInt(hex.slice(5, 7), 16)
+  };
+}
+function rgbToHex({ r, g, b }) {
+  return `#${[r, g, b].map((value) => Math.round(clamp(value, 0, 255)).toString(16).padStart(2, "0")).join("").toUpperCase()}`;
+}
+function rgbToHsv({ r, g, b }) {
+  const values = [r, g, b].map((value) => clamp(value, 0, 255) / 255);
+  const max = Math.max(...values);
+  const min = Math.min(...values);
+  const delta = max - min;
+  let h = 0;
+  if (delta !== 0) {
+    if (max === values[0]) h = 60 * ((values[1] - values[2]) / delta % 6);
+    else if (max === values[1]) h = 60 * ((values[2] - values[0]) / delta + 2);
+    else h = 60 * ((values[0] - values[1]) / delta + 4);
+  }
+  if (h < 0) h += 360;
+  return { h, s: max === 0 ? 0 : delta / max, v: max };
+}
+function hsvToRgb({ h, s, v }) {
+  const hue = (h % 360 + 360) % 360;
+  const sat = clamp(s, 0, 1);
+  const value = clamp(v, 0, 1);
+  const chroma = value * sat;
+  const x = chroma * (1 - Math.abs(hue / 60 % 2 - 1));
+  const m = value - chroma;
+  const sector = Math.floor(hue / 60);
+  const rgb = sector === 0 ? [chroma, x, 0] : sector === 1 ? [x, chroma, 0] : sector === 2 ? [0, chroma, x] : sector === 3 ? [0, x, chroma] : sector === 4 ? [x, 0, chroma] : [chroma, 0, x];
+  return { r: (rgb[0] + m) * 255, g: (rgb[1] + m) * 255, b: (rgb[2] + m) * 255 };
+}
+function hsvToHex(value) {
+  return rgbToHex(hsvToRgb(value));
+}
+function relativeLuminance({ r, g, b }) {
+  const linear = [r, g, b].map((channel) => {
+    const value = channel / 255;
+    return value <= 0.04045 ? value / 12.92 : ((value + 0.055) / 1.055) ** 2.4;
+  });
+  return 0.2126 * linear[0] + 0.7152 * linear[1] + 0.0722 * linear[2];
+}
+function contrastRatio(background, foreground) {
+  const bg = hexToRgb(background);
+  const fg = hexToRgb(foreground);
+  if (!bg || !fg) return void 0;
+  const [light, dark] = [relativeLuminance(bg), relativeLuminance(fg)].sort((a, b) => b - a);
+  return (light + 0.05) / (dark + 0.05);
+}
+function meetsContrast(background, foreground, minimum = 4.5) {
+  return (contrastRatio(background, foreground) ?? 0) >= minimum;
+}
+export {
+  contrastRatio,
+  hexToRgb,
+  hsvToHex,
+  hsvToRgb,
+  meetsContrast,
+  normalizeHex,
+  rgbToHex,
+  rgbToHsv
+};

package/dist/components/BrandProfiles.d.ts

@@ -0,0 +1,45 @@
+import * as react from 'react';
+
+interface BrandProfileTypography {
+    sans?: string;
+    heading?: string;
+    mono?: string;
+}
+interface BrandProfileLogo {
+    src: string;
+    alt: string;
+}
+interface BrandProfile {
+    id: string;
+    name: string;
+    brand: string;
+    brandForeground: string;
+    typography?: BrandProfileTypography;
+    logo?: BrandProfileLogo;
+}
+interface AppliedBrandProfileSnapshot {
+    profileId?: string;
+    properties: Record<string, string>;
+    logoSrc?: string;
+    logoAlt?: string;
+}
+/** Apply only the existing UIx brand/font slots and readable logo metadata. */
+declare function applyBrandProfile(profile: BrandProfile, target?: HTMLElement | null): AppliedBrandProfileSnapshot | undefined;
+declare function restoreBrandProfile(snapshot: AppliedBrandProfileSnapshot, target?: HTMLElement | null): void;
+interface BrandProfileEditorProps {
+    value: BrandProfile;
+    onChange: (profile: BrandProfile) => void;
+    profiles?: BrandProfile[];
+    onSelectProfile?: (profile: BrandProfile) => void;
+    onApply?: (profile: BrandProfile) => void;
+    applyTarget?: HTMLElement | null;
+    onLogoFile?: (file: File) => void;
+    colorPresets?: string[];
+    className?: string;
+}
+/** Small controlled editor composition for serializable UIx brand profiles. */
+declare function BrandProfileEditor({ value, onChange, profiles, onSelectProfile, onApply, applyTarget, onLogoFile, colorPresets, className, }: BrandProfileEditorProps): react.JSX.Element;
+/** Canonical Phase 46.9 export; equivalent to BrandProfileEditor. */
+declare const BrandProfiles: typeof BrandProfileEditor;
+
+export { type AppliedBrandProfileSnapshot, type BrandProfile, BrandProfileEditor, type BrandProfileEditorProps, type BrandProfileLogo, type BrandProfileTypography, BrandProfiles, applyBrandProfile, restoreBrandProfile };

package/dist/components/BrandProfiles.js

@@ -0,0 +1,150 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { cx } from "../cx.js";
+import { normalizeHex } from "../color-model.js";
+import { ColorPicker } from "./ColorPicker.js";
+const PROFILE_PROPERTIES = {
+  brand: "--uix-brand",
+  brandForeground: "--uix-brand-fg",
+  sans: "--uix-font-sans",
+  heading: "--uix-font-heading",
+  mono: "--uix-font-mono"
+};
+const EMPTY_PROFILES = [];
+const EMPTY_COLORS = [];
+function applyBrandProfile(profile, target) {
+  const element = target ?? (typeof document === "undefined" ? void 0 : document.documentElement);
+  if (!element) return void 0;
+  const brand = normalizeHex(profile.brand);
+  const foreground = normalizeHex(profile.brandForeground);
+  if (!brand || !foreground) throw new TypeError("Brand profiles require valid hex brand and foreground colors.");
+  const properties = {};
+  Object.values(PROFILE_PROPERTIES).forEach((property) => {
+    properties[property] = element.style.getPropertyValue(property);
+  });
+  const snapshot = {
+    profileId: element.dataset.uixBrandProfile,
+    properties,
+    logoSrc: element.dataset.uixBrandLogoSrc,
+    logoAlt: element.dataset.uixBrandLogoAlt
+  };
+  element.style.setProperty(PROFILE_PROPERTIES.brand, brand);
+  element.style.setProperty(PROFILE_PROPERTIES.brandForeground, foreground);
+  const typography = profile.typography ?? {};
+  for (const [key, property] of Object.entries({ sans: PROFILE_PROPERTIES.sans, heading: PROFILE_PROPERTIES.heading, mono: PROFILE_PROPERTIES.mono })) {
+    const value = typography[key];
+    if (value) element.style.setProperty(property, value);
+    else element.style.removeProperty(property);
+  }
+  element.dataset.uixBrandProfile = profile.id;
+  if (profile.logo) {
+    element.dataset.uixBrandLogoSrc = profile.logo.src;
+    element.dataset.uixBrandLogoAlt = profile.logo.alt;
+  } else {
+    delete element.dataset.uixBrandLogoSrc;
+    delete element.dataset.uixBrandLogoAlt;
+  }
+  return snapshot;
+}
+function restoreBrandProfile(snapshot, target) {
+  const element = target ?? (typeof document === "undefined" ? void 0 : document.documentElement);
+  if (!element) return;
+  Object.entries(snapshot.properties).forEach(([property, value]) => {
+    if (value) element.style.setProperty(property, value);
+    else element.style.removeProperty(property);
+  });
+  if (snapshot.profileId) element.dataset.uixBrandProfile = snapshot.profileId;
+  else delete element.dataset.uixBrandProfile;
+  if (snapshot.logoSrc) element.dataset.uixBrandLogoSrc = snapshot.logoSrc;
+  else delete element.dataset.uixBrandLogoSrc;
+  if (snapshot.logoAlt) element.dataset.uixBrandLogoAlt = snapshot.logoAlt;
+  else delete element.dataset.uixBrandLogoAlt;
+}
+function BrandProfileEditor({
+  value,
+  onChange,
+  profiles = EMPTY_PROFILES,
+  onSelectProfile,
+  onApply,
+  applyTarget,
+  onLogoFile,
+  colorPresets = EMPTY_COLORS,
+  className
+}) {
+  const [announcement, setAnnouncement] = useState("");
+  const update = (patch) => onChange({ ...value, ...patch });
+  const apply = () => {
+    if (applyTarget !== null) applyBrandProfile(value, applyTarget);
+    onApply?.(value);
+    setAnnouncement(`${value.name} applied.`);
+  };
+  const onFile = (event) => {
+    const file = event.currentTarget.files?.[0];
+    if (file) onLogoFile?.(file);
+  };
+  const previewStyle = {
+    "--uix-brand": normalizeHex(value.brand) ?? value.brand,
+    "--uix-brand-fg": normalizeHex(value.brandForeground) ?? value.brandForeground,
+    ...value.typography?.sans ? { "--uix-font-sans": value.typography.sans } : {},
+    ...value.typography?.heading ? { "--uix-font-heading": value.typography.heading } : {}
+  };
+  return /* @__PURE__ */ jsxs("section", { className: cx("uix-brand-profiles", className), "aria-label": "Brand profile editor", children: [
+    /* @__PURE__ */ jsxs("div", { className: "uix-brand-profiles__form", children: [
+      profiles.length > 0 && /* @__PURE__ */ jsxs("label", { className: "uix-field__label", children: [
+        "Profile",
+        /* @__PURE__ */ jsx("select", { className: "uix-select", value: value.id, onChange: (event) => {
+          const selected = profiles.find((profile) => profile.id === event.currentTarget.value);
+          if (selected) onSelectProfile?.(selected);
+        }, children: profiles.map((profile) => /* @__PURE__ */ jsx("option", { value: profile.id, children: profile.name }, profile.id)) })
+      ] }),
+      /* @__PURE__ */ jsxs("label", { className: "uix-field__label", children: [
+        "Name",
+        /* @__PURE__ */ jsx("input", { className: "uix-input", value: value.name, onChange: (event) => update({ name: event.currentTarget.value }) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "uix-brand-profiles__colors", children: [
+        /* @__PURE__ */ jsxs("label", { children: [
+          "Brand",
+          /* @__PURE__ */ jsx(ColorPicker, { label: "Brand color", value: value.brand, foreground: value.brandForeground, presets: colorPresets, onChange: (brand) => update({ brand }) })
+        ] }),
+        /* @__PURE__ */ jsxs("label", { children: [
+          "On brand",
+          /* @__PURE__ */ jsx(ColorPicker, { label: "Brand foreground color", value: value.brandForeground, foreground: value.brand, presets: colorPresets, onChange: (brandForeground) => update({ brandForeground }) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("label", { className: "uix-field__label", children: [
+        "Body font",
+        /* @__PURE__ */ jsx("input", { className: "uix-input", value: value.typography?.sans ?? "", onChange: (event) => update({ typography: { ...value.typography, sans: event.currentTarget.value || void 0 } }) })
+      ] }),
+      /* @__PURE__ */ jsxs("label", { className: "uix-field__label", children: [
+        "Heading font",
+        /* @__PURE__ */ jsx("input", { className: "uix-input", value: value.typography?.heading ?? "", onChange: (event) => update({ typography: { ...value.typography, heading: event.currentTarget.value || void 0 } }) })
+      ] }),
+      /* @__PURE__ */ jsxs("label", { className: "uix-file-upload uix-brand-profiles__upload", children: [
+        "Logo file",
+        /* @__PURE__ */ jsx("input", { type: "file", accept: "image/*", onChange: onFile })
+      ] }),
+      /* @__PURE__ */ jsx("button", { type: "button", className: "uix-btn uix-btn--primary", onClick: apply, children: "Apply profile" }),
+      /* @__PURE__ */ jsx("span", { className: "uix-visually-hidden", "aria-live": "polite", children: announcement })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "uix-brand-profiles__preview", style: previewStyle, "aria-label": `Live preview of ${value.name}`, children: [
+      /* @__PURE__ */ jsxs("div", { className: "uix-brand-profiles__preview-header", children: [
+        value.logo ? /* @__PURE__ */ jsx("img", { src: value.logo.src, alt: value.logo.alt }) : /* @__PURE__ */ jsx("span", { className: "uix-brand-profiles__logo-placeholder", children: "Logo" }),
+        /* @__PURE__ */ jsx("strong", { children: value.name || "Brand preview" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "uix-brand-profiles__preview-body", children: [
+        /* @__PURE__ */ jsx("h3", { children: "Readable, serializable branding" }),
+        /* @__PURE__ */ jsx("p", { children: "Accent, links, rings, and muted states continue through the existing UIx token chain." }),
+        /* @__PURE__ */ jsx("button", { type: "button", className: "uix-btn uix-btn--primary", children: "Primary action" }),
+        /* @__PURE__ */ jsx("a", { href: "#brand-profile-preview", children: "Preview link" })
+      ] })
+    ] })
+  ] });
+}
+const BrandProfiles = BrandProfileEditor;
+export {
+  BrandProfileEditor,
+  BrandProfiles,
+  applyBrandProfile,
+  restoreBrandProfile
+};

package/dist/components/BuilderCanvas.d.ts

@@ -0,0 +1,34 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+interface BuilderCanvasItem {
+    id: string;
+    type: string;
+    label: string;
+    description?: string;
+    properties?: Record<string, unknown>;
+}
+interface BuilderPaletteItem {
+    id: string;
+    label: string;
+    description?: string;
+    create: () => BuilderCanvasItem;
+}
+interface BuilderCanvasProps {
+    items: BuilderCanvasItem[];
+    onItemsChange: (items: BuilderCanvasItem[]) => void;
+    palette: BuilderPaletteItem[];
+    selectedId?: string;
+    onSelect?: (id: string | undefined) => void;
+    renderItem?: (item: BuilderCanvasItem, selected: boolean) => ReactNode;
+    renderProperties?: (item: BuilderCanvasItem, onChange: (item: BuilderCanvasItem) => void) => ReactNode;
+    loading?: boolean;
+    error?: string;
+    onRetry?: () => void;
+    emptyMessage?: string;
+    className?: string;
+}
+/** Palette + sortable canvas + property panel scaffold. Owns interaction, never persistence. */
+declare function BuilderCanvas({ items, onItemsChange, palette, selectedId: controlledSelectedId, onSelect, renderItem, renderProperties, loading, error, onRetry, emptyMessage, className, }: BuilderCanvasProps): react.JSX.Element;
+
+export { BuilderCanvas, type BuilderCanvasItem, type BuilderCanvasProps, type BuilderPaletteItem };

package/dist/components/BuilderCanvas.js

@@ -0,0 +1,117 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { cx } from "../cx.js";
+import { reorder } from "../table-engine.js";
+function BuilderCanvas({
+  items,
+  onItemsChange,
+  palette,
+  selectedId: controlledSelectedId,
+  onSelect,
+  renderItem,
+  renderProperties,
+  loading,
+  error,
+  onRetry,
+  emptyMessage = "Add an item from the palette to begin.",
+  className
+}) {
+  const [internalSelectedId, setInternalSelectedId] = useState();
+  const [draggedId, setDraggedId] = useState();
+  const propertyHeadingRef = useRef(null);
+  const shouldFocusProperties = useRef(false);
+  const selectedId = controlledSelectedId ?? internalSelectedId;
+  const selected = items.find((item) => item.id === selectedId);
+  useEffect(() => {
+    if (shouldFocusProperties.current && selected) {
+      propertyHeadingRef.current?.focus();
+      shouldFocusProperties.current = false;
+    }
+  }, [selected]);
+  const select = (id, focusProperties = true) => {
+    shouldFocusProperties.current = focusProperties;
+    if (controlledSelectedId === void 0) setInternalSelectedId(id);
+    onSelect?.(id);
+  };
+  const move = (id, direction) => {
+    const index = items.findIndex((item) => item.id === id);
+    const target = index + direction;
+    if (index < 0 || target < 0 || target >= items.length) return;
+    onItemsChange(reorder(items, index, target));
+  };
+  const add = (paletteItem) => {
+    const item = paletteItem.create();
+    onItemsChange([...items, item]);
+    select(item.id);
+  };
+  const remove = (id) => {
+    onItemsChange(items.filter((item) => item.id !== id));
+    if (selectedId === id) select(void 0, false);
+  };
+  const drop = (event, targetId) => {
+    event.preventDefault();
+    if (!draggedId || draggedId === targetId) return;
+    const from = items.findIndex((item) => item.id === draggedId);
+    const to = items.findIndex((item) => item.id === targetId);
+    if (from >= 0 && to >= 0) onItemsChange(reorder(items, from, to));
+    setDraggedId(void 0);
+  };
+  return /* @__PURE__ */ jsxs("section", { className: cx("uix-builder-canvas", className), "aria-label": "Builder canvas", children: [
+    /* @__PURE__ */ jsxs("aside", { className: "uix-builder-canvas__palette", "aria-label": "Item palette", children: [
+      /* @__PURE__ */ jsx("h3", { children: "Palette" }),
+      palette.length === 0 ? /* @__PURE__ */ jsx("p", { children: "No item types available." }) : /* @__PURE__ */ jsx("ul", { children: palette.map((item) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("button", { type: "button", onClick: () => add(item), children: [
+        /* @__PURE__ */ jsx("strong", { children: item.label }),
+        item.description && /* @__PURE__ */ jsx("span", { children: item.description }),
+        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "Add" })
+      ] }) }, item.id)) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "uix-builder-canvas__workspace", children: [
+      /* @__PURE__ */ jsx("h3", { children: "Canvas" }),
+      loading ? /* @__PURE__ */ jsx("div", { className: "uix-builder-canvas__state", role: "status", children: "Loading canvas\u2026" }) : error ? /* @__PURE__ */ jsxs("div", { className: "uix-builder-canvas__state", role: "alert", children: [
+        /* @__PURE__ */ jsx("p", { children: error }),
+        onRetry && /* @__PURE__ */ jsx("button", { type: "button", className: "uix-btn uix-btn--secondary", onClick: onRetry, children: "Try again" })
+      ] }) : items.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "uix-builder-canvas__state", children: [
+        /* @__PURE__ */ jsx("p", { children: emptyMessage }),
+        palette[0] && /* @__PURE__ */ jsxs("button", { type: "button", className: "uix-btn uix-btn--primary", onClick: () => add(palette[0]), children: [
+          "Add ",
+          palette[0].label
+        ] })
+      ] }) : /* @__PURE__ */ jsx("ol", { className: "uix-builder-canvas__items", children: items.map((item, index) => /* @__PURE__ */ jsxs(
+        "li",
+        {
+          draggable: true,
+          onDragStart: () => setDraggedId(item.id),
+          onDragEnd: () => setDraggedId(void 0),
+          onDragOver: (event) => event.preventDefault(),
+          onDrop: (event) => drop(event, item.id),
+          className: cx("uix-builder-canvas__item", selectedId === item.id && "uix-builder-canvas__item--selected"),
+          children: [
+            /* @__PURE__ */ jsx("button", { type: "button", className: "uix-builder-canvas__item-main", "aria-pressed": selectedId === item.id, onClick: () => select(item.id), children: renderItem?.(item, selectedId === item.id) ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("strong", { children: item.label }),
+              item.description && /* @__PURE__ */ jsx("span", { children: item.description })
+            ] }) }),
+            /* @__PURE__ */ jsxs("span", { className: "uix-builder-canvas__item-actions", children: [
+              /* @__PURE__ */ jsx("button", { type: "button", onClick: () => move(item.id, -1), disabled: index === 0, "aria-label": `Move ${item.label} up`, children: "Up" }),
+              /* @__PURE__ */ jsx("button", { type: "button", onClick: () => move(item.id, 1), disabled: index === items.length - 1, "aria-label": `Move ${item.label} down`, children: "Down" }),
+              /* @__PURE__ */ jsx("button", { type: "button", onClick: () => remove(item.id), "aria-label": `Remove ${item.label}`, children: "Remove" })
+            ] })
+          ]
+        },
+        item.id
+      )) })
+    ] }),
+    /* @__PURE__ */ jsxs("aside", { className: "uix-builder-canvas__properties", "aria-label": "Item properties", children: [
+      /* @__PURE__ */ jsx("h3", { ref: propertyHeadingRef, tabIndex: -1, children: "Properties" }),
+      !selected ? /* @__PURE__ */ jsx("p", { children: "Select a canvas item to edit its properties." }) : renderProperties?.(selected, (updated) => onItemsChange(items.map((item) => item.id === updated.id ? updated : item))) ?? /* @__PURE__ */ jsxs("dl", { children: [
+        /* @__PURE__ */ jsx("dt", { children: "Type" }),
+        /* @__PURE__ */ jsx("dd", { children: selected.type }),
+        /* @__PURE__ */ jsx("dt", { children: "Label" }),
+        /* @__PURE__ */ jsx("dd", { children: selected.label })
+      ] })
+    ] })
+  ] });
+}
+export {
+  BuilderCanvas
+};

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 };