@primeui/vue-chart 0.0.1-alpha.1 → 1.0.0-beta.1

package/dist/chunk-CQHNYT2V.mjs

@@ -1,1692 +0,0 @@
-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 };