@primeui/vue-chart 0.0.1-alpha.1

package/dist/chunk-CQHNYT2V.mjs

@@ -0,0 +1,1692 @@
+import { STACKED_CONTEXT_KEY, RANGE_CONTEXT_KEY } from './chunk-TEOO4OLV.mjs';
+import { useCustomizationRegistration, useChartRefreshHook } from './chunk-PQV55JYI.mjs';
+import { normalizeDataLabelConfig } from './chunk-J43KLCZF.mjs';
+import { useChartMethods } from './chunk-HANSF33Z.mjs';
+import { SYNC_BUS_KEY } from './chunk-LD57I4SY.mjs';
+import { ITEM_COLLECTOR_KEY } from './chunk-FZ3PZ66C.mjs';
+import { getCurrentInstance, computed, ref, watch, onUnmounted, toValue, watchEffect, inject, shallowRef, onMounted, onScopeDispose, shallowReactive, provide, onBeforeUnmount, createVNode, h, unref } from 'vue';
+import { normalizeAnimationsMap, setupPropertyAnimations, createAnimationDriver, AnimationRegistry, buildStaticFrame, renderWithCompositor, driveCartesianUpdate, resolveHoverRepaintFrame, cancelDriverRafs, CartesianLayoutController, resolveSyncConfig, DatasetRegistrationController, DrilldownStateController, renderHeatmapAxesSvg, ItemCollector, buildPieSliceContentItems, getEasing, ChartSyncCoordinator, INACTIVE_STATE, KeyboardNavigationController, getResponsiveTier, getAdaptiveDefaults, evaluateResponsiveRules, ResponsiveDimensionsController, createInitialZoomState, configureCanvasHiDPI, renderCartesianOverlay, buildAnimatedFrame, renderTreemapGroupHoverOverlay, isZoomed, AxisRegistrationController, AxisTransitionState, ZoomPanController, normalizeSubConfig } from '@primeui/chart-core';
+import { createCandlestickRendererCanvas } from '@primeui/chart-core/series/candlestick/controller-canvas';
+import { createCandlestickRendererSvg } from '@primeui/chart-core/series/candlestick/controller-svg';
+import { createHeatmapRendererCanvas } from '@primeui/chart-core/series/heatmap/controller-canvas';
+import { createHeatmapRendererSvg } from '@primeui/chart-core/series/heatmap/controller-svg';
+import { createLineRendererCanvas } from '@primeui/chart-core/series/line/controller-canvas';
+import { createLineRendererSvg } from '@primeui/chart-core/series/line/controller-svg';
+import { createPieRendererCanvas } from '@primeui/chart-core/series/pie/controller-canvas';
+import { createPieRendererSvg } from '@primeui/chart-core/series/pie/controller-svg';
+import { createPolarRendererCanvas } from '@primeui/chart-core/series/polar/controller-canvas';
+import { createPolarRendererSvg } from '@primeui/chart-core/series/polar/controller-svg';
+import { createRadarRendererCanvas } from '@primeui/chart-core/series/radar/controller-canvas';
+import { createRadarRendererSvg } from '@primeui/chart-core/series/radar/controller-svg';
+import { createScatterRendererCanvas } from '@primeui/chart-core/series/scatter/controller-canvas';
+import { createScatterRendererSvg } from '@primeui/chart-core/series/scatter/controller-svg';
+import { createTreemapRendererCanvas } from '@primeui/chart-core/series/treemap/controller-canvas';
+import { createTreemapRendererSvg } from '@primeui/chart-core/series/treemap/controller-svg';
+
+function useAxisRegistration(axis, id, props) {
+  const methods = useChartMethods();
+  const controller = new AxisRegistrationController({
+    id: id.value,
+    axis,
+    registerX: (cid, cprops) => methods.registerXAxis(cid, cprops),
+    unregisterX: (cid) => methods.unregisterXAxis(cid),
+    updateX: (cid, cprops) => methods.updateXAxis(cid, cprops),
+    registerY: (cid, cprops) => methods.registerYAxis(cid, cprops),
+    unregisterY: (cid) => methods.unregisterYAxis(cid),
+    updateY: (cid, cprops) => methods.updateYAxis(cid, cprops)
+  });
+  watch(
+    props,
+    (newProps) => {
+      controller.update(newProps);
+    },
+    { deep: false }
+  );
+  onMounted(() => {
+    controller.mount(props.value);
+  });
+  useChartRefreshHook(() => {
+    controller.forceRefresh(props.value);
+  });
+  onUnmounted(() => {
+    controller.unmount();
+  });
+}
+
+// src/composables/useAxisComponentBase.ts
+function useAxisComponentBase(axis, axisId, props, hasChildren) {
+  const instance = getCurrentInstance();
+  const vnodeProps = instance?.vnode.props || {};
+  const axisProps = computed(() => {
+    const boolOrUndef = (v, propName) => {
+      const kebab = propName.replace(/([A-Z])/g, "-$1").toLowerCase();
+      if (propName in vnodeProps || kebab in vnodeProps) return v;
+      return void 0;
+    };
+    return {
+      label: props.label,
+      position: props.position,
+      type: props.type,
+      min: props.min,
+      max: props.max,
+      tickCount: props.tickCount,
+      tickFormat: props.tickFormat,
+      tickRotation: props.tickRotation,
+      tickStyle: props.tickStyle,
+      render: props.render,
+      renderTick: props.renderTick,
+      gridLines: boolOrUndef(props.gridLines, "gridLines"),
+      color: props.color,
+      gridColor: props.gridColor,
+      gridStyle: props.gridStyle,
+      gridStrokeWidth: props.gridStrokeWidth,
+      gridOpacity: props.gridOpacity,
+      gridShape: props.gridShape,
+      category: props.category,
+      tickInterval: props.tickInterval,
+      minorGridLines: boolOrUndef(props.minorGridLines, "minorGridLines"),
+      minorGridColor: props.minorGridColor,
+      minorGridStrokeWidth: props.minorGridStrokeWidth,
+      minorGridOpacity: props.minorGridOpacity,
+      minorGridCount: props.minorGridCount,
+      minorGridStyle: props.minorGridStyle,
+      alternateGridColor: props.alternateGridColor,
+      alternateGridOpacity: props.alternateGridOpacity,
+      scale: props.scale,
+      timezone: props.timezone,
+      dateTimeFormats: props.dateTimeFormats,
+      tickConfig: props.tickConfig,
+      minUnit: props.minUnit,
+      gapless: boolOrUndef(props.gapless, "gapless"),
+      grouping: props.grouping,
+      autoRotate: boolOrUndef(props.autoRotate, "autoRotate"),
+      autoRotateAngle: props.autoRotateAngle,
+      labelMinSpacing: props.labelMinSpacing,
+      startFromZero: boolOrUndef(props.startFromZero, "startFromZero"),
+      reversed: boolOrUndef(props.reversed, "reversed"),
+      softMin: props.softMin,
+      softMax: props.softMax,
+      tickPosition: props.tickPosition,
+      minorTicks: boolOrUndef(props.minorTicks, "minorTicks"),
+      minorTickLength: props.minorTickLength,
+      minorTickColor: props.minorTickColor,
+      minorTickStrokeWidth: props.minorTickStrokeWidth,
+      showFirstLabel: boolOrUndef(props.showFirstLabel, "showFirstLabel"),
+      showLastLabel: boolOrUndef(props.showLastLabel, "showLastLabel"),
+      showLine: boolOrUndef(props.showLine, "showLine"),
+      showTicks: boolOrUndef(props.showTicks, "showTicks"),
+      showLabels: boolOrUndef(props.showLabels, "showLabels"),
+      autoSkip: boolOrUndef(props.autoSkip, "autoSkip"),
+      visible: boolOrUndef(props.visible, "visible"),
+      labelFontSize: props.labelFontSize,
+      chartPaddingMin: props.chartPaddingMin,
+      chartPaddingMax: props.chartPaddingMax,
+      minGridDistance: props.minGridDistance
+    };
+  });
+  useAxisRegistration(axis, axisId, axisProps);
+  const methods = useChartMethods();
+  const groups = ref([]);
+  const groupCollector = {
+    addGroup: (group) => {
+      const existing = groups.value.findIndex((g) => g.label === group.label);
+      if (existing >= 0) {
+        const next = [...groups.value];
+        next[existing] = group;
+        groups.value = next;
+      } else {
+        groups.value = [...groups.value, group];
+      }
+    },
+    removeGroup: (label) => {
+      groups.value = groups.value.filter((g) => g.label !== label);
+    }
+  };
+  if (hasChildren) {
+    const featureKey = `axisGroup:${axis}:${axisId.value}`;
+    watch(groups, (newGroups) => {
+      if (newGroups.length > 0) {
+        methods.registerCustomization(featureKey, { groups: [...newGroups], axis });
+      }
+    });
+    onUnmounted(() => {
+      methods.unregisterCustomization(featureKey);
+    });
+  }
+  return { collectorValue: groupCollector, hasChildren: hasChildren ?? false };
+}
+function useDatasetAnimationRegistration(datasetId, animations) {
+  const payload = computed(() => {
+    const id2 = toValue(datasetId);
+    const map = toValue(animations);
+    if (!id2) return {};
+    const configs = normalizeAnimationsMap(map, { datasetId: id2 });
+    return { propertyAnimations: configs.length ? configs : void 0 };
+  });
+  const id = toValue(datasetId);
+  const featureKey = id ? `animation:${id}` : "animation:__unscoped__";
+  useCustomizationRegistration(featureKey, payload);
+}
+function useCandlestickRenderer(options) {
+  const { chartArea, renderer, canvasEl, datasets, datasetVisibility, features, hover, hoverConfig, chartId, width, height, categoryScale, valueScales, firstValueAxisId, layoutData, compositor, theme } = options;
+  const groupRef = ref(null);
+  const controller = renderer === "canvas" ? createCandlestickRendererCanvas() : createCandlestickRendererSvg();
+  const hasCandlestickData = computed(() => {
+    for (const [, ds] of datasets.value) {
+      if (ds.type === "candlestick") return true;
+    }
+    return false;
+  });
+  watch(
+    [datasets, datasetVisibility, chartArea, categoryScale, valueScales, firstValueAxisId, layoutData, hoverConfig, width, height, groupRef, theme],
+    () => {
+      controller.update({
+        datasets: datasets.value,
+        datasetVisibility: datasetVisibility.value,
+        chartArea: chartArea.value,
+        features: features.value,
+        chartId,
+        width: width.value,
+        height: height.value,
+        renderer,
+        categoryScale: categoryScale.value,
+        valueScales: valueScales.value,
+        firstValueAxisId: firstValueAxisId.value,
+        layoutData: layoutData.value,
+        hover: hover.value,
+        hoverConfig: hoverConfig.value,
+        compositor,
+        canvasEl: canvasEl.value,
+        svgGroup: groupRef.value,
+        theme: theme.value
+      });
+    },
+    { immediate: true, flush: "post" }
+  );
+  watch(hover, () => {
+    controller.applyHover(hover.value);
+  });
+  onUnmounted(() => {
+    controller.destroy();
+  });
+  function hitTest(x, y) {
+    return controller.hitTest(x, y);
+  }
+  function findAllNearest(x, y) {
+    return controller.findAllNearest(x, y);
+  }
+  function applyPropertyAnimations(store) {
+    controller.applyPropertyAnimations(store);
+  }
+  function renderFrameCycle() {
+    controller.renderFrameCycle();
+  }
+  return {
+    groupRef,
+    hitTest,
+    findAllNearest,
+    hasCandlestickData,
+    applyPropertyAnimations,
+    renderFrameCycle,
+    get candlestickLayouts() {
+      return controller.layouts;
+    }
+  };
+}
+function usePropertyAnimations(configs, registry, store, onPropertyComplete) {
+  watchEffect((onCleanup) => {
+    const resolved = toValue(configs);
+    if (!resolved?.length || !registry || !store) return;
+    onCleanup(setupPropertyAnimations(resolved, registry, store, onPropertyComplete));
+  });
+}
+function useAxisTransition() {
+  return new AxisTransitionState();
+}
+
+// src/composables/useCartesianAnimation.ts
+function useCartesianAnimation(options) {
+  const {
+    layoutData,
+    renderer,
+    canvasEl,
+    overlayCanvasEl,
+    markerOverlays,
+    groupRef,
+    gridGroupRef,
+    hover,
+    features,
+    width,
+    height,
+    renderFrame: renderFrameParam,
+    compositor,
+    dir,
+    globalFont,
+    locale,
+    theme,
+    customTickOverlayRefs,
+    skipHoverRepaint,
+    isZoomed,
+    propertyAnimations,
+    animStoreRef,
+    onAnimFrame,
+    onPropertyComplete
+  } = options;
+  const driver = createAnimationDriver();
+  const axisTransition = useAxisTransition();
+  const canvasRegistry = new AnimationRegistry();
+  function paintOverlay(axisLayouts, cartesianArea) {
+    const overlay = overlayCanvasEl?.value;
+    if (!overlay) return;
+    configureCanvasHiDPI(overlay, width.value, height.value);
+    renderCartesianOverlay({
+      canvas: overlay,
+      axisLayouts,
+      hover: hover.value,
+      registry: canvasRegistry,
+      cartesianArea,
+      markerOverlays: markerOverlays?.value
+    });
+  }
+  canvasRegistry.setRepaintCallback(() => {
+    if (renderer === "svg") {
+      onAnimFrame?.();
+      return;
+    }
+    if (!driver.cachedLayout) return;
+    if (overlayCanvasEl?.value) {
+      paintOverlay(axisTransition.apply(driver.cachedLayout.axisLayouts), driver.cachedLayout.cartesianArea);
+    } else if (!onAnimFrame) {
+      renderFrame(buildStatic());
+    }
+    onAnimFrame?.();
+  });
+  usePropertyAnimations(propertyAnimations, canvasRegistry, animStoreRef?.value ?? null, onPropertyComplete);
+  const stopOverlayCanvasWatch = overlayCanvasEl ? watch(overlayCanvasEl, (el) => {
+    if (!el || !driver.cachedLayout) return;
+    paintOverlay(axisTransition.apply(driver.cachedLayout.axisLayouts), driver.cachedLayout.cartesianArea);
+  }) : null;
+  const stopMarkerOverlaysWatch = markerOverlays && overlayCanvasEl ? watch(markerOverlays, () => {
+    if (!driver.cachedLayout || !overlayCanvasEl.value) return;
+    paintOverlay(axisTransition.apply(driver.cachedLayout.axisLayouts), driver.cachedLayout.cartesianArea);
+  }) : null;
+  function getFrameCtx() {
+    return {
+      renderer,
+      theme: theme(),
+      group: groupRef.value,
+      gridGroup: gridGroupRef.value,
+      canvas: canvasEl.value,
+      customTickOverlayRefs,
+      isZoomed: isZoomed?.value,
+      rtl: dir?.value === "rtl",
+      globalFont
+    };
+  }
+  function buildStatic() {
+    return buildStaticFrame(getFrameCtx(), driver.cachedLayout, axisTransition);
+  }
+  function buildAnimated(valueScales, valueDomains, axisLayouts, categoryScale, valueXScales) {
+    return buildAnimatedFrame(getFrameCtx(), driver.cachedLayout, axisTransition, { axisLayouts, valueScales, valueDomains, categoryScale, valueXScales });
+  }
+  function renderFrame(frameParams) {
+    driver.lastFrame = frameParams;
+    renderWithCompositor(frameParams, renderFrameParam, {
+      renderer,
+      canvas: canvasEl.value,
+      compositor,
+      overlayCanvas: overlayCanvasEl?.value,
+      registry: canvasRegistry,
+      hover: hover.value,
+      markerOverlays: markerOverlays?.value
+    });
+  }
+  watch(
+    [layoutData, groupRef, gridGroupRef],
+    () => {
+      const layout = layoutData.value;
+      if (!layout) return;
+      if (renderer === "svg" && !groupRef.value) return;
+      const animFeature = features.value.get("animation")?.props;
+      driveCartesianUpdate(layout, driver, axisTransition, animFeature, renderFrame, buildStatic, buildAnimated, globalFont, locale);
+    },
+    { immediate: true, flush: "post" }
+  );
+  watch(hover, () => {
+    if (!driver.cachedLayout) return;
+    if (skipHoverRepaint?.value) return;
+    const frame = resolveHoverRepaintFrame(driver, getFrameCtx(), buildStatic);
+    renderFrame(frame);
+  });
+  if (isZoomed) {
+    watch(isZoomed, () => {
+      if (!driver.cachedLayout) return;
+      renderFrame(buildStatic());
+    });
+  }
+  onUnmounted(() => {
+    cancelDriverRafs(driver);
+    canvasRegistry.destroy();
+    if (animStoreRef) {
+      animStoreRef.value?.destroy();
+      animStoreRef.value = null;
+    }
+    stopOverlayCanvasWatch?.();
+    stopMarkerOverlaysWatch?.();
+  });
+}
+function useCartesianLayout(options) {
+  const { cartesianArea, datasets, axes, features, datasetVisibility, hoverConfig, chartId, renderer, width, height, zoomState, globalFont } = options;
+  const controller = new CartesianLayoutController();
+  onUnmounted(() => controller.destroy());
+  return computed(() => {
+    const area = cartesianArea.value;
+    if (!area) return null;
+    return controller.compute({
+      cartesianArea: area,
+      datasets: datasets.value,
+      axes: axes.value,
+      features: features.value,
+      datasetVisibility: datasetVisibility.value,
+      hoverConfig: hoverConfig.value,
+      chartId,
+      renderer,
+      dimensions: { width: width.value, height: height.value },
+      zoomState: zoomState?.value ?? void 0,
+      dir: options.dir?.value ?? "ltr",
+      font: globalFont,
+      locale: options.locale?.value,
+      theme: options.theme.value
+    });
+  });
+}
+function useChartSync(options) {
+  const syncBus = inject(SYNC_BUS_KEY, null);
+  const initialSync = toValue(options.sync);
+  if (!syncBus || initialSync === false) {
+    return { syncInfo: null };
+  }
+  const resolvedConfig = resolveSyncConfig(initialSync);
+  syncBus.register(options.chartId, resolvedConfig);
+  watch(
+    () => toValue(options.sync),
+    (next) => {
+      if (next === false) return;
+      syncBus.updateConfig(options.chartId, resolveSyncConfig(next));
+    },
+    { deep: true }
+  );
+  onUnmounted(() => {
+    syncBus.unregister(options.chartId);
+  });
+  return {
+    syncInfo: {
+      bus: syncBus,
+      chartId: options.chartId,
+      config: resolvedConfig
+    }
+  };
+}
+function useDatasetRegistration({ id, type, props, typeResolver }) {
+  const methods = useChartMethods();
+  const stackedContext = inject(STACKED_CONTEXT_KEY, null);
+  const rangeContext = inject(RANGE_CONTEXT_KEY, null);
+  let autoOrder = void 0;
+  if (stackedContext && props.value.order === void 0) {
+    autoOrder = stackedContext.getNextOrder();
+  }
+  const controller = new DatasetRegistrationController({
+    id: id.value,
+    type,
+    typeResolver,
+    register: (cid, ctype, cprops) => methods.registerDataset(cid, ctype, cprops),
+    unregister: (cid) => methods.unregisterDataset(cid),
+    update: (cid, cprops) => methods.updateDataset(cid, cprops)
+  });
+  const getExtras = () => ({
+    stackId: stackedContext?.stackId,
+    rangeId: rangeContext?.rangeId,
+    order: props.value.order ?? autoOrder
+  });
+  const stableProps = shallowRef(props.value);
+  watch(
+    props,
+    (newProps) => {
+      controller.update(newProps, getExtras());
+      stableProps.value = newProps;
+    },
+    { deep: false }
+  );
+  onMounted(() => {
+    controller.mount(props.value, getExtras());
+  });
+  useChartRefreshHook(() => {
+    controller.forceRefresh(props.value, getExtras());
+  });
+  onUnmounted(() => {
+    controller.unmount();
+  });
+}
+function useDrilldownState(datasets) {
+  const controller = new DrilldownStateController();
+  const snapshot = shallowRef(controller.getSnapshot());
+  const unsubscribe = controller.subscribe(() => {
+    snapshot.value = controller.getSnapshot();
+  });
+  onScopeDispose(unsubscribe);
+  watch(datasets, (next) => controller.setDatasets(next), { immediate: true });
+  return {
+    currentParentId: computed(() => snapshot.value.currentParentId),
+    path: computed(() => snapshot.value.path),
+    isActive: computed(() => snapshot.value.isActive),
+    enabled: computed(() => snapshot.value.enabled),
+    drillInto: controller.drillInto,
+    drillToLevel: controller.drillToLevel
+  };
+}
+var FAMILY_RENDERERS_KEY = /* @__PURE__ */ Symbol.for("primeui-chart-family-renderers");
+function provideFamilyRenderers() {
+  const registry = shallowReactive({ cartesian: void 0, radial: void 0, rect: void 0 });
+  provide(FAMILY_RENDERERS_KEY, registry);
+  return registry;
+}
+function registerFamilyRenderer(family, component) {
+  const registry = inject(FAMILY_RENDERERS_KEY, null);
+  if (registry && !registry[family]) registry[family] = component;
+}
+var NAVIGATOR_RENDERER_KEY = /* @__PURE__ */ Symbol.for("primeui-chart-navigator-renderer");
+function registerNavigatorRenderer(component) {
+  const slot = inject(NAVIGATOR_RENDERER_KEY, null);
+  if (slot && !slot.value) slot.value = component;
+}
+var ZOOM_CONTROLLER_KEY = /* @__PURE__ */ Symbol.for("primeui-chart-zoom-controller");
+function registerZoomController(ctor) {
+  const slot = inject(ZOOM_CONTROLLER_KEY, null);
+  if (slot && !slot.value) slot.value = ctor;
+}
+var KEYBOARD_CONTROLLER_KEY = /* @__PURE__ */ Symbol.for("primeui-chart-keyboard-controller");
+function registerKeyboardController(ctor) {
+  const slot = inject(KEYBOARD_CONTROLLER_KEY, null);
+  if (slot && !slot.value) slot.value = ctor;
+}
+var CHART_LAYERS_KEY = /* @__PURE__ */ Symbol.for("primeui-chart-layers");
+function provideChartLayers() {
+  const registry = shallowReactive(/* @__PURE__ */ new Map());
+  provide(CHART_LAYERS_KEY, registry);
+  return registry;
+}
+function registerChartLayer(type, entry) {
+  const registry = inject(CHART_LAYERS_KEY, null);
+  if (registry && !registry.has(type)) registry.set(type, entry);
+}
+function useChartLayers() {
+  return inject(CHART_LAYERS_KEY, null);
+}
+var RADIAL_FRAME_KEY = /* @__PURE__ */ Symbol.for("primeui-chart-radial-frame");
+function provideRadialFrame() {
+  const handles = shallowReactive(/* @__PURE__ */ new Map());
+  const frame = {
+    handles,
+    register: (h2) => handles.set(h2.type, h2),
+    unregister: (type) => handles.delete(type)
+  };
+  provide(RADIAL_FRAME_KEY, frame);
+  return frame;
+}
+function useRadialFrameRegistration(handle) {
+  const frame = inject(RADIAL_FRAME_KEY, null);
+  if (!frame) return;
+  frame.register(handle);
+  onBeforeUnmount(() => frame.unregister(handle.type));
+}
+var CARTESIAN_FRAME_KEY = /* @__PURE__ */ Symbol.for("primeui-chart-cartesian-frame");
+function provideCartesianFrame(shared) {
+  const handles = shallowReactive(/* @__PURE__ */ new Map());
+  const frame = {
+    ...shared,
+    handles,
+    register: (h2) => handles.set(h2.type, h2),
+    unregister: (type) => handles.delete(type)
+  };
+  provide(CARTESIAN_FRAME_KEY, frame);
+  return frame;
+}
+function useCartesianFrame() {
+  return inject(CARTESIAN_FRAME_KEY, null);
+}
+function useCartesianFrameRegistration(handle) {
+  const frame = inject(CARTESIAN_FRAME_KEY, null);
+  if (!frame) return;
+  frame.register(handle);
+  onBeforeUnmount(() => frame.unregister(handle.type));
+}
+function useHeatmapRenderer(options) {
+  const { chartArea, renderer, canvasEl, datasets, axes, datasetVisibility, hover, hoverConfig, chartId, width, height, features, compositor, globalFont, theme } = options;
+  const groupRef = ref(null);
+  const gridGroupRef = ref(null);
+  const axisGroupRef = ref(null);
+  const controller = renderer === "canvas" ? createHeatmapRendererCanvas() : createHeatmapRendererSvg();
+  const versionRef = ref(0);
+  controller.onFrame = () => {
+    versionRef.value++;
+  };
+  const hasHeatmapData = computed(() => {
+    for (const [, ds] of datasets.value) {
+      if (ds.type === "heatmap") return true;
+    }
+    return false;
+  });
+  const scaleResult = computed(() => {
+    void versionRef.value;
+    return controller.scaleResult;
+  });
+  const axisLayoutsComputed = computed(() => {
+    void versionRef.value;
+    return controller.axisLayouts;
+  });
+  watch(
+    [datasets, datasetVisibility, chartArea, axes, features, width, height, groupRef, gridGroupRef, axisGroupRef, options.locale, theme],
+    () => {
+      controller.update({
+        datasets: datasets.value,
+        datasetVisibility: datasetVisibility.value,
+        chartArea: chartArea.value,
+        chartId,
+        width: width.value,
+        height: height.value,
+        renderer,
+        axes: axes.value,
+        features: features.value,
+        hover: hover.value,
+        hoverConfig: hoverConfig.value,
+        compositor,
+        canvasEl: canvasEl.value,
+        svgGroup: groupRef.value,
+        globalFont,
+        locale: options.locale?.value,
+        theme: theme.value,
+        resolveDatasetProps: (dsId) => {
+          const dsReg = datasets.value.get(dsId);
+          return dsReg?.props;
+        }
+      });
+      if (renderer === "svg") {
+        renderHeatmapAxesSvg(gridGroupRef.value, axisGroupRef.value, controller.axisLayouts, theme.value);
+      }
+    },
+    { immediate: true, flush: "post" }
+  );
+  watch(hover, () => {
+    controller.applyHover(hover.value);
+  });
+  onUnmounted(() => {
+    controller.destroy();
+  });
+  function hitTest(x, y) {
+    return controller.hitTest(x, y);
+  }
+  function getPointPosition(datasetId, index) {
+    const lr = controller.layoutResult;
+    if (!lr) return null;
+    const hmLayout = lr.layouts.get(datasetId);
+    const cell = hmLayout?.cells.find((c) => c.index === index && !c.isEmpty);
+    if (!cell) return null;
+    return { x: cell.x, y: cell.y, width: cell.width, height: cell.height, shape: "rect" };
+  }
+  function getColorScaleInfo() {
+    return controller.getColorScaleInfo();
+  }
+  function applyPropertyAnimations(store) {
+    controller.applyPropertyAnimations(store);
+  }
+  function renderFrameCycle() {
+    controller.renderFrameCycle();
+  }
+  const svgContent = computed(() => {
+    if (renderer !== "svg") return [];
+    void versionRef.value;
+    const lr = controller.layoutResult;
+    if (!lr) return [];
+    const elements = [];
+    for (const [datasetId, hmLayout] of lr.layouts) {
+      const dsReg = datasets.value.get(datasetId);
+      const hmProps = dsReg?.props;
+      const renderFn = hmProps?.renderContent;
+      const data = hmProps?.data;
+      if (!renderFn || !data) continue;
+      for (const cell of hmLayout.cells) {
+        if (cell.isEmpty) continue;
+        const dataItem = data[cell.index];
+        if (!dataItem) continue;
+        const result = renderFn({
+          data: dataItem,
+          index: cell.index,
+          value: cell.value,
+          xLabel: cell.xLabel,
+          yLabel: cell.yLabel,
+          color: cell.color,
+          x: cell.x,
+          y: cell.y,
+          width: cell.width,
+          height: cell.height,
+          row: cell.row,
+          col: cell.col,
+          isEmpty: cell.isEmpty
+        });
+        if (result != null) {
+          const clipId = `hm-clip-${datasetId}-${cell.index}`;
+          elements.push(
+            createVNode("g", { key: `${datasetId}-${cell.index}`, "clip-path": `url(#${clipId})` }, [
+              createVNode("defs", null, [createVNode("clipPath", { id: clipId }, [createVNode("rect", { x: cell.x, y: cell.y, width: cell.width, height: cell.height })])]),
+              result
+            ])
+          );
+        }
+      }
+    }
+    return elements;
+  });
+  return {
+    groupRef,
+    gridGroupRef,
+    axisGroupRef,
+    hitTest,
+    getPointPosition,
+    hasHeatmapData,
+    axisLayouts: axisLayoutsComputed,
+    plotArea: chartArea,
+    getColorScaleInfo,
+    scaleResult,
+    svgContent,
+    applyPropertyAnimations,
+    renderFrameCycle
+  };
+}
+function useItemCollector() {
+  const collector = new ItemCollector();
+  provide(ITEM_COLLECTOR_KEY, {
+    registerItem: (index, props) => collector.registerItem(index, props),
+    unregisterItem: (index) => collector.unregisterItem(index),
+    getNextIndex: () => collector.getNextIndex()
+  });
+  return { getItems: () => collector.getItems() };
+}
+function useControllerLifecycle(controller) {
+  onUnmounted(() => {
+    controller.destroy();
+  });
+  return {
+    applyPropertyAnimations: (store) => controller.applyPropertyAnimations(store),
+    renderFrameCycle: () => controller.renderFrameCycle()
+  };
+}
+function useLineRenderer(options) {
+  const {
+    chartArea,
+    renderer,
+    canvasEl,
+    datasets,
+    datasetVisibility,
+    hover,
+    hoverConfig,
+    chartId,
+    width,
+    height,
+    categoryScale,
+    valueScales,
+    firstValueAxisId,
+    axisIdProp,
+    lineStackBasesMap,
+    lineTransformedValues,
+    rangeGroups,
+    features,
+    compositor,
+    layoutData,
+    dir,
+    theme
+  } = options;
+  const groupRef = ref(null);
+  const controller = renderer === "canvas" ? createLineRendererCanvas() : createLineRendererSvg();
+  const layoutCacheRef = shallowRef(/* @__PURE__ */ new Map());
+  const renderPropsCacheRef = shallowRef(/* @__PURE__ */ new Map());
+  const markerOverlaysRef = ref([]);
+  controller.onFrame = () => {
+    markerOverlaysRef.value = controller.markerOverlays;
+  };
+  watch(
+    [datasets, datasetVisibility, chartArea, categoryScale, valueScales, firstValueAxisId, axisIdProp, lineStackBasesMap, lineTransformedValues, rangeGroups, features, groupRef, width, height, dir, theme],
+    () => {
+      if (renderer === "svg" && !groupRef.value) return;
+      controller.update({
+        datasets: datasets.value,
+        datasetVisibility: datasetVisibility.value,
+        chartArea: chartArea.value,
+        chartId,
+        width: width.value,
+        height: height.value,
+        renderer,
+        categoryScale: categoryScale.value,
+        valueScales: valueScales.value,
+        firstValueAxisId: firstValueAxisId.value,
+        axisIdProp: axisIdProp.value,
+        lineStackBasesMap: lineStackBasesMap.value,
+        lineTransformedValues: lineTransformedValues.value,
+        groupedDataOverride: layoutData?.value?.groupedDataOverride,
+        layoutData: layoutData?.value ?? null,
+        rangeGroups: rangeGroups.value,
+        features: features.value,
+        hover: hover.value,
+        hoverConfig: hoverConfig.value,
+        compositor,
+        canvasEl: canvasEl.value,
+        svgGroup: groupRef.value,
+        labelConfig: options.labelConfig?.value,
+        dir: dir.value,
+        theme: theme.value
+      });
+      layoutCacheRef.value = controller.layouts;
+      renderPropsCacheRef.value = controller.renderProps;
+      markerOverlaysRef.value = controller.markerOverlays;
+    },
+    { immediate: true, flush: "post" }
+  );
+  watch(hover, () => {
+    controller.applyHover(hover.value);
+  });
+  const { applyPropertyAnimations, renderFrameCycle } = useControllerLifecycle(controller);
+  function hitTest(x, y) {
+    return controller.hitTest(x, y);
+  }
+  function findAllNearest(x, y) {
+    return controller.findAllNearest(x, y);
+  }
+  const hasLineData = computed(() => {
+    for (const [, ds] of datasets.value) {
+      if (ds.type === "line") return true;
+    }
+    return false;
+  });
+  function syncWithAnimatedScale(categoryScale2, valueScales2) {
+    controller.syncWithAnimatedScale(categoryScale2, valueScales2);
+    markerOverlaysRef.value = controller.markerOverlays;
+  }
+  return {
+    groupRef,
+    hitTest,
+    findAllNearest,
+    hasLineData,
+    lineLayouts: layoutCacheRef,
+    lineRenderProps: renderPropsCacheRef,
+    subscribeTipPositions: (cb) => controller.subscribeTipPositions(cb),
+    markerOverlays: markerOverlaysRef,
+    syncWithAnimatedScale,
+    applyPropertyAnimations,
+    renderFrameCycle
+  };
+}
+function usePieRenderer(options) {
+  const { renderer, chartId, globalFont, adaptiveDataLabelFontSize, theme, dir } = options;
+  const groupRef = ref(null);
+  const labelGroupRef = ref(null);
+  const centerRef = ref(null);
+  const versionRef = ref(0);
+  const controller = renderer === "canvas" ? createPieRendererCanvas() : createPieRendererSvg();
+  controller.onFrame = () => {
+    versionRef.value++;
+    centerRef.value = controller.center;
+  };
+  watch(
+    [options.datasets, options.chartArea, options.datasetVisibility, options.hiddenItems, options.features, options.width, options.height, groupRef, dir, theme],
+    () => {
+      if (options.datasets.value.size === 0) return;
+      if (renderer === "svg" && !groupRef.value) return;
+      const hoverConfig = options.features.value.get("hover")?.props;
+      controller.update({
+        datasets: options.datasets.value,
+        datasetVisibility: options.datasetVisibility.value,
+        hiddenItems: options.hiddenItems.value,
+        chartArea: options.chartArea.value,
+        renderer,
+        width: options.width.value,
+        height: options.height.value,
+        chartId,
+        features: options.features.value,
+        hover: options.hover.value,
+        hoverConfig,
+        globalFont,
+        adaptiveDataLabelFontSize: adaptiveDataLabelFontSize?.value,
+        svgGroup: groupRef.value ?? void 0,
+        canvasEl: options.canvasEl.value ?? void 0,
+        dir: dir.value,
+        theme: theme.value
+      });
+      controller.registerLabelGroup(labelGroupRef.value);
+      centerRef.value = controller.center;
+    },
+    { immediate: true, flush: "post" }
+  );
+  watch([options.hover, () => options.features.value.get("hover")?.props], () => {
+    controller.applyHover(options.hover.value);
+  });
+  const { applyPropertyAnimations, renderFrameCycle } = useControllerLifecycle(controller);
+  const svgContent = computed(() => {
+    if (renderer !== "svg") return [];
+    void versionRef.value;
+    const content = [];
+    for (const item of buildPieSliceContentItems(controller.entries, controller.lastRenderedSlices, controller.ringRadii, controller.animationLayout, options.hiddenItems.value, options.globalFont?.family, theme.value)) {
+      const result = item.renderFn(item.context);
+      if (result != null) {
+        content.push(
+          h(
+            "g",
+            {
+              key: item.datasetKey,
+              class: "slice-custom-content",
+              "data-dataset": item.datasetId,
+              "data-index": item.index,
+              transform: `translate(${item.contentX}, ${item.contentY})`,
+              onVnodeMounted: (vnode) => controller.registerCustomContent(item.key, vnode.el),
+              onVnodeUnmounted: () => controller.registerCustomContent(item.key, null)
+            },
+            [result]
+          )
+        );
+      }
+    }
+    return content;
+  });
+  function hitTest(x, y) {
+    const hit = controller.hitTest(x, y);
+    if (!hit) return null;
+    return { datasetId: hit.datasetId, index: hit.index, label: hit.label, value: hit.value, percentage: hit.percentage, color: hit.color };
+  }
+  function getSlicePosition(datasetId, index) {
+    return controller.getSlicePosition(datasetId, index);
+  }
+  return {
+    groupRef,
+    labelGroupRef,
+    hitTest,
+    getSlicePosition,
+    center: centerRef,
+    svgContent,
+    applyPropertyAnimations,
+    renderFrameCycle
+  };
+}
+function usePolarRenderer(options) {
+  const { chartArea, renderer, datasets, features, hover, datasetVisibility, globalFont, adaptiveDataLabelFontSize, chartId, width, height, sharedContext, requestRedraw, dir, xAxes, yAxes, theme } = options;
+  const groupRef = ref(null);
+  const layoutRef = ref(null);
+  const controller = renderer === "canvas" ? createPolarRendererCanvas() : createPolarRendererSvg();
+  controller.onFrame = () => {
+    layoutRef.value = controller.layout;
+  };
+  const active = computed(() => controller.hasData);
+  function getLabelConfig() {
+    const dlProps = features.value.get("dataLabels")?.props;
+    return normalizeDataLabelConfig(dlProps, adaptiveDataLabelFontSize?.value, void 0, globalFont);
+  }
+  watch(
+    [datasets, chartArea, datasetVisibility, features, groupRef, xAxes, yAxes, dir, theme],
+    () => {
+      const area = chartArea.value;
+      if (!area) {
+        layoutRef.value = null;
+        return;
+      }
+      const hc = features.value.get("hover")?.props;
+      controller.update({
+        datasets: datasets.value,
+        datasetVisibility: datasetVisibility.value,
+        chartArea: area,
+        width: width.value,
+        height: height.value,
+        chartId,
+        renderer,
+        features: features.value,
+        hover: hover.value,
+        hoverConfig: hc,
+        globalFont,
+        adaptiveDataLabelFontSize: adaptiveDataLabelFontSize?.value,
+        sharedContext: sharedContext?.value,
+        svgGroup: groupRef.value,
+        requestRedraw,
+        labelConfig: getLabelConfig(),
+        dir: dir.value,
+        xAxes: xAxes?.value,
+        yAxes: yAxes?.value,
+        theme: theme.value
+      });
+      layoutRef.value = controller.layout;
+    },
+    { immediate: true, flush: "post" }
+  );
+  watch([hover, () => features.value.get("hover")?.props], () => {
+    controller.applyHover(hover.value);
+  });
+  const { applyPropertyAnimations, renderFrameCycle } = useControllerLifecycle(controller);
+  function hitTest(x, y) {
+    const hit = controller.hitTest(x, y);
+    if (!hit) return null;
+    return { datasetId: hit.datasetId, index: hit.index, label: hit.label, value: hit.value, color: hit.color };
+  }
+  function getPointPosition(datasetId, index) {
+    const layout = layoutRef.value;
+    const bar = layout?.bars.find((b) => b.datasetId === datasetId && b.dataIndex === index);
+    if (!layout || !bar) return null;
+    const midAngle = (bar.startAngle + bar.endAngle) / 2;
+    const midRadius = (bar.innerRadius + bar.outerRadius) / 2;
+    const rad = midAngle * Math.PI / 180;
+    const cx = layout.center.x + Math.cos(rad) * midRadius;
+    const cy = layout.center.y + Math.sin(rad) * midRadius;
+    const r = 6;
+    return { x: cx - r, y: cy - r, width: r * 2, height: r * 2, shape: "circle" };
+  }
+  function findAllNearest(x, y) {
+    const result = controller.findAllNearest(x, y);
+    if (!result) return null;
+    const { primary, allSeries } = result;
+    return {
+      primary: { datasetId: primary.datasetId, index: primary.index, label: primary.label, value: primary.value, color: primary.color },
+      allSeries
+    };
+  }
+  function renderCanvasContent(ctx, _canvas) {
+    controller.renderCanvasContent(ctx);
+  }
+  return {
+    groupRef,
+    hitTest,
+    getPointPosition,
+    findAllNearest,
+    active,
+    get center() {
+      return controller.center;
+    },
+    layout: layoutRef,
+    renderCanvasContent,
+    applyPropertyAnimations,
+    renderFrameCycle
+  };
+}
+function useRadarRenderer(options) {
+  const { chartArea, renderer, datasets, features, hover, datasetVisibility, globalFont, adaptiveDataLabelFontSize, chartId, width, height, sharedContext, requestRedraw, dir, xAxes, yAxes, theme } = options;
+  const groupRef = ref(null);
+  const layoutRef = ref(null);
+  const markerData = ref(null);
+  const controller = renderer === "canvas" ? createRadarRendererCanvas() : createRadarRendererSvg();
+  controller.onMarkerDataChange = (data) => {
+    markerData.value = data;
+  };
+  controller.onFrame = () => {
+    layoutRef.value = controller.layout;
+  };
+  const active = computed(() => controller.hasData);
+  function getLabelConfig() {
+    const dlProps = features.value.get("dataLabels")?.props;
+    return normalizeDataLabelConfig(dlProps, adaptiveDataLabelFontSize?.value, void 0, globalFont);
+  }
+  watch(
+    [datasets, chartArea, datasetVisibility, features, groupRef, xAxes, yAxes, dir, theme],
+    () => {
+      const area = chartArea.value;
+      if (!area) {
+        layoutRef.value = null;
+        return;
+      }
+      const hc = features.value.get("hover")?.props;
+      controller.update({
+        datasets: datasets.value,
+        datasetVisibility: datasetVisibility.value,
+        chartArea: area,
+        width: width.value,
+        height: height.value,
+        renderer,
+        features: features.value,
+        hover: hover.value,
+        hoverConfig: hc,
+        globalFont,
+        adaptiveDataLabelFontSize: adaptiveDataLabelFontSize?.value,
+        chartId,
+        sharedContext: sharedContext?.value,
+        svgGroup: groupRef.value,
+        requestRedraw,
+        labelConfig: getLabelConfig(),
+        dir: dir.value,
+        xAxes: xAxes?.value,
+        yAxes: yAxes?.value,
+        theme: theme.value
+      });
+      layoutRef.value = controller.layout;
+    },
+    { immediate: true, flush: "post" }
+  );
+  watch([hover, () => features.value.get("hover")?.props], () => {
+    controller.applyHover(hover.value);
+  });
+  const { applyPropertyAnimations, renderFrameCycle } = useControllerLifecycle(controller);
+  function hitTest(x, y) {
+    const hit = controller.hitTest(x, y);
+    if (!hit) return null;
+    return { datasetId: hit.datasetId, index: hit.index, label: hit.label, value: hit.value, color: hit.color };
+  }
+  function findAllNearest(x, y) {
+    const result = controller.findAllNearest(x, y);
+    if (!result) return null;
+    const { primary, allSeries } = result;
+    return {
+      primary: { datasetId: primary.datasetId, index: primary.index, label: primary.label, value: primary.value, color: primary.color },
+      allSeries
+    };
+  }
+  function renderCanvasContent(ctx, _canvas) {
+    controller.renderCanvasContent(ctx);
+  }
+  return {
+    groupRef,
+    hitTest,
+    findAllNearest,
+    active,
+    markerData,
+    layout: layoutRef,
+    renderCanvasContent,
+    applyPropertyAnimations,
+    renderFrameCycle
+  };
+}
+function useScatterRenderer(options) {
+  const {
+    chartArea,
+    renderer,
+    canvasEl,
+    datasets,
+    datasetVisibility,
+    hover,
+    hoverConfig,
+    chartId,
+    width,
+    height,
+    scatterXScales,
+    valueScales,
+    firstCategoryAxisId,
+    firstValueAxisId,
+    scatterStackBasesMap,
+    compositor,
+    decimationConfig,
+    zoomState,
+    orientation,
+    labelConfig,
+    features,
+    dir,
+    theme
+  } = options;
+  const groupRef = ref(null);
+  const markerOverlaysRef = ref([]);
+  const controller = renderer === "canvas" ? createScatterRendererCanvas() : createScatterRendererSvg();
+  const hasScatterData = computed(() => {
+    for (const [, ds] of datasets.value) {
+      if (ds.type === "scatter") return true;
+    }
+    return false;
+  });
+  watch(
+    [datasets, datasetVisibility, chartArea, scatterXScales, valueScales, firstCategoryAxisId, firstValueAxisId, scatterStackBasesMap, hoverConfig, width, height, groupRef, features, dir, theme],
+    () => {
+      controller.update({
+        datasets: datasets.value,
+        datasetVisibility: datasetVisibility.value,
+        chartArea: chartArea.value,
+        chartId,
+        width: width.value,
+        height: height.value,
+        renderer,
+        scatterXScales: scatterXScales.value,
+        valueScales: valueScales.value,
+        firstCategoryAxisId: firstCategoryAxisId.value,
+        firstValueAxisId: firstValueAxisId.value,
+        scatterStackBasesMap: scatterStackBasesMap.value,
+        hover: hover.value,
+        hoverConfig: hoverConfig.value,
+        compositor,
+        canvasEl: canvasEl.value,
+        svgGroup: groupRef.value,
+        decimationConfig: decimationConfig?.value,
+        zoomState: zoomState?.value,
+        orientation: orientation?.value,
+        labelConfig: labelConfig?.value,
+        dir: dir.value,
+        features: features.value,
+        theme: theme.value
+      });
+      markerOverlaysRef.value = controller.markerOverlays;
+    },
+    { immediate: true, flush: "post" }
+  );
+  watch(hover, () => {
+    controller.applyHover(hover.value);
+  });
+  const { applyPropertyAnimations, renderFrameCycle } = useControllerLifecycle(controller);
+  function hitTest(x, y) {
+    return controller.hitTest(x, y);
+  }
+  return {
+    groupRef,
+    hitTest,
+    hasScatterData,
+    boostActive: computed(() => controller.boostActive),
+    markerOverlays: markerOverlaysRef,
+    applyPropertyAnimations,
+    renderFrameCycle,
+    syncWithAnimatedScale: (categoryScale, valueScales2, valueXScales) => {
+      controller.syncWithAnimatedScale(categoryScale, valueScales2, valueXScales);
+      markerOverlaysRef.value = controller.markerOverlays;
+    },
+    get scatterLayouts() {
+      return controller.layouts;
+    }
+  };
+}
+function useTreemapRenderer(options) {
+  const { chartArea, renderer, canvasEl, datasets, features, datasetVisibility, width, height, chartId, drilldownState, globalFont, hover, theme } = options;
+  const wrapperRef = ref(null);
+  const groupRef = ref(null);
+  const overlayRef = ref(null);
+  const controller = renderer === "canvas" ? createTreemapRendererCanvas() : createTreemapRendererSvg();
+  const versionRef = ref(0);
+  controller.onFrame = () => {
+    versionRef.value++;
+  };
+  controller.onImageLoad = () => {
+    if (renderer !== "canvas") return;
+    controller.update({
+      datasets: datasets.value,
+      datasetVisibility: datasetVisibility.value,
+      chartArea: chartArea.value,
+      renderer,
+      width: width.value,
+      height: height.value,
+      chartId,
+      features: features.value,
+      hover: { datasetId: null, index: null },
+      canvasEl: canvasEl.value,
+      svgGroup: groupRef.value,
+      svgWrapper: wrapperRef.value,
+      globalFont,
+      drilldownParentId: drilldownState.currentParentId.value,
+      drilldownEnabled: drilldownState.enabled.value,
+      theme: theme.value
+    });
+  };
+  watch(
+    [datasets, datasetVisibility, chartArea, features, width, height, groupRef, () => drilldownState.currentParentId.value, () => drilldownState.enabled.value, theme],
+    () => {
+      controller.update({
+        datasets: datasets.value,
+        datasetVisibility: datasetVisibility.value,
+        chartArea: chartArea.value,
+        renderer,
+        width: width.value,
+        height: height.value,
+        chartId,
+        features: features.value,
+        hover: { datasetId: null, index: null },
+        canvasEl: canvasEl.value,
+        svgGroup: groupRef.value,
+        svgWrapper: wrapperRef.value,
+        globalFont,
+        drilldownParentId: drilldownState.currentParentId.value,
+        drilldownEnabled: drilldownState.enabled.value,
+        theme: theme.value
+      });
+      versionRef.value++;
+    },
+    { immediate: true, flush: "post" }
+  );
+  watch(hover, () => {
+    controller.applyHover(hover.value);
+  });
+  onUnmounted(() => {
+    controller.destroy();
+  });
+  function handleDrilldownClick(hit) {
+    if (!drilldownState.enabled.value) return false;
+    const result = controller.buildDrillInto(hit, drilldownState.currentParentId.value);
+    if (!result) return false;
+    drilldownState.drillInto(result.nodeId, result.label, result.ancestors);
+    return true;
+  }
+  function prepareDrillOut() {
+    controller.prepareDrillOut(chartArea.value);
+  }
+  function hitTest(x, y) {
+    return controller.hitTest(x, y);
+  }
+  function getPointPosition(datasetId, index) {
+    const entry = controller.layouts.get(datasetId);
+    const cell = entry?.layout.cells.find((c) => c.index === index);
+    if (!cell) return null;
+    return { x: cell.x, y: cell.y, width: cell.width, height: cell.height, shape: "rect" };
+  }
+  function updateHoverOverlay(hit) {
+    if (renderer === "canvas") {
+      controller.updateHoverOverlayCanvas(hit);
+      return;
+    }
+    const groupNodeId = hit?.isGroupHit ? hit.nodeId ?? null : null;
+    const overlay = overlayRef.value;
+    if (!overlay) return;
+    renderTreemapGroupHoverOverlay(overlay, controller.layouts, groupNodeId);
+  }
+  const svgContent = computed(() => {
+    if (renderer !== "svg") return [];
+    void versionRef.value;
+    const elements = [];
+    for (const [datasetId, { props, layout }] of controller.layouts) {
+      const renderFn = props.renderContent;
+      if (!renderFn || !props.data) continue;
+      for (const cell of layout.cells) {
+        const dataItem = props.data[cell.index];
+        if (!dataItem) continue;
+        const result = renderFn({
+          data: dataItem,
+          index: cell.index,
+          label: cell.label,
+          secondaryLabel: cell.secondaryLabel,
+          value: cell.value,
+          color: cell.color,
+          x: cell.x,
+          y: cell.y,
+          width: cell.width,
+          height: cell.height,
+          nodeId: cell.nodeId,
+          parentId: cell.parentId,
+          hasChildren: cell.hasChildren,
+          depth: cell.depth,
+          drilldownParentId: props.drilldownParentId ?? null
+        });
+        if (result != null) {
+          const clipId = `tm-clip-${datasetId}-${cell.index}`;
+          elements.push(
+            createVNode("g", { key: `${datasetId}-${cell.index}` }, [
+              createVNode("clipPath", { id: clipId }, [createVNode("rect", { x: cell.x, y: cell.y, width: cell.width, height: cell.height })]),
+              createVNode("g", { "clip-path": `url(#${clipId})` }, [result])
+            ])
+          );
+        }
+      }
+    }
+    return elements;
+  });
+  function getColorScaleInfo() {
+    return controller.getColorScaleInfo();
+  }
+  function applyPropertyAnimations(store) {
+    controller.applyPropertyAnimations(store);
+  }
+  function renderFrameCycle() {
+    controller.renderFrameCycle();
+  }
+  return { wrapperRef, groupRef, overlayRef, svgContent, hitTest, getPointPosition, handleDrilldownClick, prepareDrillOut, updateHoverOverlay, getColorScaleInfo, applyPropertyAnimations, renderFrameCycle };
+}
+function useAnimationProps(props, methods) {
+  const registration = computed(() => {
+    const p = toValue(props);
+    const animation = p.animation;
+    const rawEasing = animation ? animation.easing : void 0;
+    const resolvedEasing = typeof rawEasing === "function" ? rawEasing : rawEasing ? getEasing(rawEasing) : void 0;
+    const flattened = normalizeAnimationsMap(p.animations);
+    const propertyAnimations = flattened.length ? flattened : void 0;
+    return {
+      enabled: animation === false ? false : void 0,
+      duration: animation ? animation.duration : void 0,
+      easing: resolvedEasing,
+      limit: animation ? animation.limit : void 0,
+      propertyAnimations,
+      transitions: p.transitions
+    };
+  });
+  useCustomizationRegistration("animation", registration, methods);
+}
+function useChartContext(options) {
+  const { coreCtx, width, height, dir, theme, rendererDelegate, drilldownEnabled, onClickCb, onLegendClickCb, syncInfo, containerRef } = options;
+  const { coreChart, emitHandlerRef, setHover } = coreCtx;
+  const tooltip = shallowRef(null);
+  function handleCoreEmit(event, ...args) {
+    switch (event) {
+      case "tooltip-change": {
+        const val = args[0];
+        tooltip.value = val;
+        coreChart.$setState({ tooltip: val });
+        break;
+      }
+      case "hover-change": {
+        const hover = args[0];
+        hover.datasetId;
+        hover.index;
+        coreChart.$setState({ lastHover: { datasetId: hover.datasetId, index: hover.index } });
+        setHover(hover.datasetId, hover.index, hover.axisIdx, hover.axisX);
+        break;
+      }
+      case "cursor-change": {
+        const cursor = args[0];
+        coreChart.$setState({ cursor });
+        if (containerRef.value) containerRef.value.style.cursor = cursor;
+        break;
+      }
+      case "sync-broadcast": {
+        if (!syncInfo) break;
+        const broadcasts = args[0];
+        for (const b of broadcasts) {
+          syncInfo.bus.broadcastHighlight({
+            sourceId: syncInfo.chartId,
+            axis: b.axis,
+            normalized: b.normalized,
+            categoryIndex: b.categoryIndex,
+            sourceType: b.sourceType
+          });
+        }
+        break;
+      }
+      case "rect-hover-update": {
+        rendererDelegate.value?.updateHoverOverlay(null);
+        break;
+      }
+      case "click-callback": {
+        onClickCb.value?.(args[0]);
+        break;
+      }
+      case "dataset-toggle": {
+        coreChart.toggleDatasetVisibility(args[0]);
+        setHover(null, null);
+        break;
+      }
+      case "item-toggle": {
+        const { datasetId, index } = args[0];
+        coreChart.toggleItemVisibility(datasetId, index);
+        setHover(null, null);
+        break;
+      }
+      case "items-toggle": {
+        const { datasetId, indices } = args[0];
+        for (const i of indices) coreChart.toggleItemVisibility(datasetId, i);
+        setHover(null, null);
+        break;
+      }
+      case "legend-callback": {
+        onLegendClickCb.value?.(args[0]);
+        break;
+      }
+      case "legend-hover": {
+        const hover = args[0];
+        setHover(hover.datasetId, hover.index);
+        break;
+      }
+    }
+  }
+  emitHandlerRef.current = handleCoreEmit;
+  const stopPropsSync = watchEffect(() => {
+    coreChart.$setProps({
+      width: width.value,
+      height: height.value,
+      dir: dir.value,
+      theme: theme.value,
+      rendererDelegate: rendererDelegate.value,
+      drilldownEnabled: drilldownEnabled.value,
+      onClickCb: onClickCb.value,
+      onLegendClickCb: onLegendClickCb.value,
+      syncInfo
+    });
+  });
+  onBeforeUnmount(() => {
+    stopPropsSync();
+  });
+  const onMouseMove = (x, y) => coreChart.onMouseMove(x, y);
+  const onMouseLeave = () => coreChart.onMouseLeave();
+  const onClick = (x, y) => coreChart.onClick(x, y);
+  const onLegendClick = (item) => coreChart.onLegendClick(item);
+  const onLegendHover = (item) => coreChart.onLegendHover(item);
+  const onSyncedResult = (result) => coreChart.onSyncedResult(result);
+  return {
+    tooltip,
+    onMouseMove,
+    onMouseLeave,
+    onClick,
+    onLegendClick,
+    onLegendHover,
+    onSyncedResult
+  };
+}
+function useChartSyncCoordinator({
+  syncInfo,
+  datasets,
+  datasetVisibility,
+  theme,
+  zoomState,
+  hasCrosshair,
+  isSharedMode,
+  isCartesian,
+  isRect,
+  width,
+  height,
+  getZoomState,
+  rendererDelegate,
+  updateZoom,
+  setDatasetVisibility,
+  toggleItemVisibility,
+  onSyncedResult
+}) {
+  if (!syncInfo) return;
+  const coordinator = new ChartSyncCoordinator(syncInfo);
+  watch([datasets, theme], () => coordinator.updateDatasets(datasets.value, theme.value), { immediate: true });
+  watch(zoomState, (zs) => coordinator.onZoomChange(zs));
+  watch(datasetVisibility, (vis) => coordinator.onVisibilityChange(vis));
+  const cleanup = coordinator.start({
+    getZoomState,
+    getRendererDelegate: () => rendererDelegate.value,
+    getIsCartesian: () => isCartesian.value,
+    getIsRect: () => isRect.value,
+    getHasCrosshair: () => hasCrosshair.value,
+    getIsSharedMode: () => isSharedMode.value,
+    getDatasets: () => datasets.value,
+    getDimensions: () => ({ width: width.value, height: height.value }),
+    applyZoom: updateZoom,
+    applyVisibility: setDatasetVisibility,
+    applyItemToggle: (seriesId, itemLabel) => toggleItemVisibility(seriesId, itemLabel),
+    applyHighlight: onSyncedResult
+  });
+  onBeforeUnmount(cleanup);
+}
+function useKeyboardNavigation(options) {
+  const { enabled, config, datasets, datasetVisibility, setHover, rendererDelegate, emitFocusMove, emitFocusLeave } = options;
+  const state = ref({ ...INACTIVE_STATE });
+  const announcement = ref("");
+  const controller = new KeyboardNavigationController();
+  controller.onNavigate = (datasetId, index, ann) => {
+    state.value = { active: true, focusedDatasetId: datasetId, focusedIndex: index, focusedSection: "series" };
+    announcement.value = ann;
+    const pos = emitFocusMove ? rendererDelegate.value?.getPointPosition(datasetId, index) ?? null : null;
+    if (emitFocusMove && pos) {
+      emitFocusMove(pos.x + pos.width / 2, pos.y + pos.height / 2);
+    } else {
+      setHover(datasetId, index);
+    }
+  };
+  function resetState() {
+    state.value = { ...INACTIVE_STATE };
+    announcement.value = "";
+    if (emitFocusLeave) {
+      emitFocusLeave();
+    } else {
+      setHover(null, null);
+    }
+  }
+  controller.onReset = resetState;
+  let pointerFocus = false;
+  function notifyPointerDown() {
+    pointerFocus = true;
+  }
+  const focusPosition = computed(() => {
+    const s = state.value;
+    if (!s.active || !s.focusedDatasetId || s.focusedIndex === null) return null;
+    return rendererDelegate.value?.getPointPosition(s.focusedDatasetId, s.focusedIndex) ?? null;
+  });
+  function onKeyDown(e) {
+    if (!enabled.value) return;
+    const handled = controller.handleKeyDown(e.key, datasets.value, datasetVisibility.value, config.value);
+    if (handled) e.preventDefault();
+  }
+  function onMouseMove() {
+    controller.handleMouseMove();
+  }
+  function onFocus() {
+    if (!enabled.value) return;
+    if (pointerFocus) {
+      pointerFocus = false;
+      return;
+    }
+    controller.activate(datasets.value, datasetVisibility.value, config.value);
+  }
+  function onBlur() {
+    pointerFocus = false;
+    controller.reset();
+    resetState();
+  }
+  watch(enabled, (val) => {
+    if (!val) {
+      controller.reset();
+      resetState();
+    }
+  });
+  onUnmounted(() => {
+    controller.destroy();
+  });
+  return { state, focusPosition, announcement, onKeyDown, onMouseMove, onFocus, onBlur, notifyPointerDown };
+}
+function useResponsiveConfig(width, height, responsiveFeature, globalFont) {
+  const config = computed(() => {
+    const tier = getResponsiveTier(width.value, responsiveFeature.value?.breakpoints);
+    const defaults = responsiveFeature.value?.disableAutoAdaptive ? getAdaptiveDefaults("lg", globalFont) : getAdaptiveDefaults(tier, globalFont);
+    const ruleOverrides = responsiveFeature.value?.rules ? evaluateResponsiveRules(responsiveFeature.value.rules, width.value, height.value) : {};
+    return { tier, defaults, ruleOverrides };
+  });
+  return {
+    defaults: computed(() => config.value.defaults),
+    ruleOverrides: computed(() => config.value.ruleOverrides)
+  };
+}
+function useResponsiveDimensions(options) {
+  const containerRef = ref(null);
+  const width = ref(unref(options.width) ?? 400);
+  const height = ref(unref(options.height) ?? 400);
+  const controller = new ResponsiveDimensionsController();
+  onMounted(() => {
+    if (!containerRef.value) return;
+    if (unref(options.responsive)) {
+      controller.onDimensionsChange = (w, h2) => {
+        if (width.value !== w || height.value !== h2) {
+          width.value = w;
+          height.value = h2;
+          options.onResize?.(w, h2);
+        }
+      };
+      controller.attach(containerRef.value, {
+        debounceWithRAF: options.debounceWithRAF ?? true,
+        debounceDelay: unref(options.debounceDelay),
+        aspectRatio: unref(options.aspectRatio),
+        maxDimensions: unref(options.maxDimensions),
+        maxWidth: unref(options.width),
+        maxHeight: unref(options.height)
+      });
+    } else if (!unref(options.width) && !unref(options.height)) {
+      const w = containerRef.value.offsetWidth;
+      const h2 = containerRef.value.offsetHeight;
+      if (w > 0) width.value = w;
+      if (h2 > 0) height.value = h2;
+      options.onResize?.(width.value, height.value);
+    }
+  });
+  watch([() => unref(options.width), () => unref(options.height)], ([newW, newH]) => {
+    if (!unref(options.responsive)) {
+      if (newW !== void 0 && width.value !== newW) width.value = newW;
+      if (newH !== void 0 && height.value !== newH) height.value = newH;
+    }
+  });
+  onUnmounted(() => {
+    controller.destroy();
+  });
+  return { containerRef, width, height };
+}
+function useZoomPan(options) {
+  const { zoomConfig, containerRef, getPlotArea, getScales, getOriginalDomains, isCartesian } = options;
+  const zoomState = shallowRef(createInitialZoomState());
+  const selectionRect = ref(null);
+  const isDragging = ref(false);
+  const isZoomedRef = ref(false);
+  const getConfig = () => {
+    const cfg = zoomConfig.value;
+    return {
+      mode: cfg?.mode ?? "x",
+      wheelCfg: normalizeSubConfig(cfg?.wheel, { enabled: true, speed: 0.1 }),
+      dragCfg: normalizeSubConfig(cfg?.drag, { enabled: true }),
+      panCfg: normalizeSubConfig(cfg?.pan, { enabled: true, modifierKey: "shift" }),
+      pinchCfg: normalizeSubConfig(cfg?.pinch, { enabled: true }),
+      limits: cfg?.limits
+    };
+  };
+  let controller = null;
+  const buildDeps = () => ({
+    getPlotArea,
+    getScales,
+    getOriginalDomains,
+    getConfig,
+    getZoomState: () => controller.getZoomState(),
+    getCurrentWindow: (axis) => controller.getCurrentWindow(axis)
+  });
+  function ensureController() {
+    if (controller) return controller;
+    controller = new ZoomPanController(buildDeps());
+    controller.onSettle = (state) => {
+      zoomState.value = state;
+      isZoomedRef.value = isZoomed(state);
+      zoomConfig.value?.onZoomChange?.(state);
+    };
+    return controller;
+  }
+  let cleanup = null;
+  const attachListeners = () => {
+    cleanup?.();
+    cleanup = null;
+    const enabled = !!zoomConfig.value && isCartesian.value;
+    if (!enabled) return;
+    const container = containerRef.value;
+    if (!container) return;
+    const ctrl = ensureController();
+    if (!ctrl) return;
+    ctrl.updateDeps(buildDeps());
+    cleanup = ctrl.attach(container, {
+      onDragging: (v) => isDragging.value = v,
+      onSelectionRect: (r) => selectionRect.value = r
+    });
+  };
+  watch([zoomConfig, containerRef, isCartesian], attachListeners, { flush: "post", immediate: true });
+  watch(zoomConfig, (cfg) => {
+    if (!cfg && controller && isZoomed(controller.getZoomState())) controller.resetZoom();
+  });
+  onBeforeUnmount(() => {
+    cleanup?.();
+    cleanup = null;
+    controller?.destroyZoomState();
+  });
+  return {
+    zoomState,
+    resetZoom: () => controller?.resetZoom(),
+    updateZoom: (s) => controller?.updateZoom(s),
+    getZoomState: () => controller?.getZoomState() ?? zoomState.value,
+    isZoomed: isZoomedRef,
+    isDragging,
+    selectionRect
+  };
+}
+
+export { provideCartesianFrame, provideChartLayers, provideFamilyRenderers, provideRadialFrame, registerChartLayer, registerFamilyRenderer, registerKeyboardController, registerNavigatorRenderer, registerZoomController, useAnimationProps, useAxisComponentBase, useCandlestickRenderer, useCartesianAnimation, useCartesianFrame, useCartesianFrameRegistration, useCartesianLayout, useChartContext, useChartLayers, useChartSync, useChartSyncCoordinator, useDatasetAnimationRegistration, useDatasetRegistration, useDrilldownState, useHeatmapRenderer, useItemCollector, useKeyboardNavigation, useLineRenderer, usePieRenderer, usePolarRenderer, usePropertyAnimations, useRadarRenderer, useRadialFrameRegistration, useResponsiveConfig, useResponsiveDimensions, useScatterRenderer, useTreemapRenderer, useZoomPan };