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

package/dist/chunks/chunk-I2BWSDNR.mjs

@@ -0,0 +1,832 @@
+import { STACKED_CONTEXT_KEY, RANGE_CONTEXT_KEY } from './chunk-L6N5IYAJ.mjs';
+import { useCustomizationRegistration, useChartRefreshHook } from './chunk-ZLD5VNMP.mjs';
+import { useChartMethods } from './chunk-QOWKMWNO.mjs';
+import { SYNC_BUS_KEY } from './chunk-H4HLHGUW.mjs';
+import { ITEM_COLLECTOR_KEY } from './chunk-4Q3QUNX6.mjs';
+import { getCurrentInstance, computed, ref, watch, onUnmounted, toValue, watchEffect, inject, shallowRef, onMounted, onScopeDispose, shallowReactive, provide, onBeforeUnmount, unref } from 'vue';
+import { normalizeAnimationsMap, setupPropertyAnimations, createAnimationDriver, AnimationRegistry, buildStaticFrame, renderWithCompositor, driveCartesianUpdate, resolveHoverRepaintFrame, cancelDriverRafs, CartesianLayoutController, resolveSyncConfig, DatasetRegistrationController, DrilldownStateController, ItemCollector, getEasing, ChartSyncCoordinator, INACTIVE_STATE, KeyboardNavigationController, getResponsiveTier, getAdaptiveDefaults, evaluateResponsiveRules, ResponsiveDimensionsController, createInitialZoomState, configureCanvasHiDPI, renderCartesianOverlay, buildAnimatedFrame, isZoomed, AxisRegistrationController, AxisTransitionState, ZoomPanController, normalizeSubConfig } from '@primeui/chart-core';
+
+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 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,
+    isDragging,
+    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, isDragging?.value);
+    },
+    { 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 CARTESIAN_FRAME_KEY = /* @__PURE__ */ Symbol.for("primeui-chart-cartesian-frame");
+function provideCartesianFrame(shared) {
+  const handles = shallowReactive(/* @__PURE__ */ new Map());
+  const frame = {
+    ...shared,
+    handles,
+    register: (h) => handles.set(h.type, h),
+    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 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 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
+    };
+  });
+  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, h) => {
+        if (width.value !== w || height.value !== h) {
+          width.value = w;
+          height.value = h;
+          options.onResize?.(w, h);
+        }
+      };
+      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 h = containerRef.value.offsetHeight;
+      if (w > 0) width.value = w;
+      if (h > 0) height.value = h;
+      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, registerChartLayer, registerFamilyRenderer, registerKeyboardController, registerNavigatorRenderer, registerZoomController, useAnimationProps, useAxisComponentBase, useCartesianAnimation, useCartesianFrame, useCartesianFrameRegistration, useCartesianLayout, useChartContext, useChartLayers, useChartSync, useChartSyncCoordinator, useDatasetAnimationRegistration, useDatasetRegistration, useDrilldownState, useItemCollector, useKeyboardNavigation, usePropertyAnimations, useResponsiveConfig, useResponsiveDimensions, useZoomPan };