@katlux/block-charts 0.1.0-beta.8 → 0.1.1-alpha.100

package/dist/runtime/composables/useChartAxes.d.ts

@@ -18,6 +18,7 @@ export interface IChartAxesOptions {
         left: number;
     };
     scaleMode?: TScaleMode;
+    xValueGetter?: (item: any, index: number) => number;
 }
 export interface IChartAxesContext {
     xMin: ComputedRef<number>;
@@ -34,7 +35,8 @@ export interface IChartAxesContext {
 }
 /**
  * Robustly parses a value into a number.
- * Handles: numbers, numeric strings, and ISO date strings.
+ * Handles numbers, strings with thousands/decimal formatting, ISO dates,
+ * and falls back to array index for unparseable category strings.
  */
-export declare function parseValue(val: any): number;
+export declare function parseValue(val: any, fallbackIndex?: number): number;
 export declare function useChartAxes(opts: IChartAxesOptions): IChartAxesContext;

package/dist/runtime/composables/useChartAxes.js

@@ -1,13 +1,15 @@
 import { computed } from "vue";
-export function parseValue(val) {
-  if (val === null || val === void 0) return 0;
-  const n = Number(val);
-  if (!isNaN(n)) return n;
+import { cleanNumber, safeMax, safeMin } from "./chartUtils.js";
+export function parseValue(val, fallbackIndex) {
+  if (val === null || val === void 0) return fallbackIndex ?? 0;
+  if (typeof val === "number") return Number.isFinite(val) ? val : fallbackIndex ?? 0;
   if (typeof val === "string") {
+    const cleaned = cleanNumber(val, NaN);
+    if (Number.isFinite(cleaned)) return cleaned;
     const d = Date.parse(val);
     if (!isNaN(d)) return d;
   }
-  return 0;
+  return fallbackIndex ?? 0;
 }
 export function useChartAxes(opts) {
   const pad = opts.padding ?? { top: 20, right: 20, bottom: 40, left: 55 };
@@ -15,21 +17,25 @@ export function useChartAxes(opts) {
   const plotTop = pad.top;
   const plotWidth = computed(() => Math.max(0, opts.width.value - pad.left - pad.right));
   const plotHeight = computed(() => Math.max(0, opts.height.value - pad.top - pad.bottom));
+  const getXVal = (r, i) => {
+    if (opts.xValueGetter) return opts.xValueGetter(r, i);
+    return parseValue(r[opts.xField.value], i);
+  };
   const rawXMin = computed(() => {
-    const vals = opts.items.value.map((r) => parseValue(r[opts.xField.value]));
-    return vals.length ? Math.min(...vals) : 0;
+    const vals = opts.items.value.map((r, i) => getXVal(r, i));
+    return safeMin(vals, 0);
   });
   const rawXMax = computed(() => {
-    const vals = opts.items.value.map((r) => parseValue(r[opts.xField.value]));
-    return vals.length ? Math.max(...vals) : 1;
+    const vals = opts.items.value.map((r, i) => getXVal(r, i));
+    return safeMax(vals, 1);
   });
   const yMin = computed(() => {
-    const vals = opts.items.value.map((r) => parseValue(r[opts.yField.value]));
-    return vals.length ? Math.min(...vals) : 0;
+    const vals = opts.items.value.map((r, i) => parseValue(r[opts.yField.value], i));
+    return safeMin(vals, 0);
   });
   const yMax = computed(() => {
-    const vals = opts.items.value.map((r) => parseValue(r[opts.yField.value]));
-    return vals.length ? Math.max(...vals) : 1;
+    const vals = opts.items.value.map((r, i) => parseValue(r[opts.yField.value], i));
+    return safeMax(vals, 1);
   });
   const xRange = computed(() => rawXMax.value - rawXMin.value);
   const visibleXRange = computed(() => xRange.value / opts.scale.value);
@@ -46,11 +52,24 @@ export function useChartAxes(opts) {
     return plotLeft + (value - xMin.value) / range * plotWidth.value;
   };
   const toY = (value) => {
+    if (opts.scaleMode === "logarithmic") {
+      const minVal = Math.max(yMin.value, 1e-6);
+      const maxVal = Math.max(yMax.value, minVal + 1e-6);
+      const logMin = Math.log10(minVal);
+      const logMax = Math.log10(maxVal);
+      const logRange = logMax - logMin;
+      if (logRange === 0) return plotTop + plotHeight.value;
+      const safeVal = Math.max(value, minVal);
+      const logVal = Math.log10(safeVal);
+      const ratio = (logVal - logMin) / logRange;
+      return plotTop + plotHeight.value - ratio * plotHeight.value;
+    }
     const range = yMax.value - yMin.value;
     if (range === 0) return plotTop + plotHeight.value;
     return plotTop + plotHeight.value - (value - yMin.value) / range * plotHeight.value;
   };
   const fromX = (px) => {
+    if (plotWidth.value <= 0) return xMin.value;
     const range = xMax.value - xMin.value;
     return xMin.value + (px - plotLeft) / plotWidth.value * range;
   };

package/dist/runtime/composables/useChartCanvas.d.ts

@@ -5,6 +5,7 @@ export interface IChartCanvasContext {
     width: Ref<number>;
     height: Ref<number>;
     dpr: Ref<number>;
+    resizeTick: Ref<number>;
     clear: (color?: string) => void;
     setupCanvas: (el: HTMLCanvasElement) => void;
 }

package/dist/runtime/composables/useChartCanvas.js

@@ -4,32 +4,64 @@ export function useChartCanvas() {
   const ctx = ref(null);
   const width = ref(0);
   const height = ref(0);
-  const dpr = ref(window?.devicePixelRatio ?? 1);
+  const dpr = ref(typeof window !== "undefined" ? window.devicePixelRatio ?? 1 : 1);
+  const resizeTick = ref(0);
   let resizeObserver = null;
   const applySize = (el, w, h) => {
-    const ratio = window.devicePixelRatio ?? 1;
+    const ratio = typeof window !== "undefined" ? window.devicePixelRatio ?? 1 : 1;
+    const newPixelW = Math.round(w * ratio);
+    const newPixelH = Math.round(h * ratio);
     dpr.value = ratio;
-    el.width = w * ratio;
-    el.height = h * ratio;
-    ctx.value?.scale(ratio, ratio);
-    width.value = w;
-    height.value = h;
+    let sizeChanged = false;
+    if (el.width !== newPixelW || el.height !== newPixelH) {
+      el.width = newPixelW;
+      el.height = newPixelH;
+      ctx.value = el.getContext("2d");
+      ctx.value?.scale(ratio, ratio);
+      sizeChanged = true;
+    }
+    if (width.value !== w || height.value !== h || sizeChanged) {
+      width.value = w;
+      height.value = h;
+      resizeTick.value++;
+    }
+  };
+  let dprMediaQuery = null;
+  const handleDprChange = () => {
+    if (canvas.value) {
+      const rect = canvas.value.getBoundingClientRect();
+      const w = rect.width || canvas.value.clientWidth || width.value;
+      const h = rect.height || canvas.value.clientHeight || height.value;
+      applySize(canvas.value, w, h);
+    }
+    updateDprWatcher();
+  };
+  const updateDprWatcher = () => {
+    if (typeof window === "undefined" || !window.matchMedia) return;
+    dprMediaQuery?.removeEventListener?.("change", handleDprChange);
+    dprMediaQuery = window.matchMedia(`(resolution: ${window.devicePixelRatio ?? 1}dppx)`);
+    dprMediaQuery.addEventListener?.("change", handleDprChange);
   };
   const setupCanvas = (el) => {
     canvas.value = el;
     ctx.value = el.getContext("2d");
     const rect = el.getBoundingClientRect();
-    applySize(el, rect.width, rect.height);
-    resizeObserver = new ResizeObserver((entries) => {
-      for (const entry of entries) {
-        const { width: w, height: h } = entry.contentRect;
-        if (canvas.value && ctx.value) {
-          ctx.value = canvas.value.getContext("2d");
-          applySize(canvas.value, w, h);
+    const initialW = rect.width || el.clientWidth || 400;
+    const initialH = rect.height || el.clientHeight || 400;
+    applySize(el, initialW, initialH);
+    updateDprWatcher();
+    if (typeof ResizeObserver !== "undefined") {
+      resizeObserver?.disconnect();
+      resizeObserver = new ResizeObserver((entries) => {
+        for (const entry of entries) {
+          const { width: w, height: h } = entry.contentRect;
+          if (canvas.value && w > 0 && h > 0) {
+            applySize(canvas.value, w, h);
+          }
         }
-      }
-    });
-    resizeObserver.observe(el);
+      });
+      resizeObserver.observe(el);
+    }
   };
   const clear = (color) => {
     if (ctx.value && canvas.value) {
@@ -42,6 +74,7 @@ export function useChartCanvas() {
   };
   onUnmounted(() => {
     resizeObserver?.disconnect();
+    dprMediaQuery?.removeEventListener?.("change", handleDprChange);
   });
-  return { canvas, ctx, width, height, dpr, clear, setupCanvas };
+  return { canvas, ctx, width, height, dpr, resizeTick, clear, setupCanvas };
 }

package/dist/runtime/composables/useChartData.d.ts

@@ -1,14 +1,20 @@
-import { type Ref } from 'vue';
+import { type Ref, type ShallowRef } from 'vue';
+import type { ADataProvider } from '@katlux/providers';
 export interface IChartDataContext<T = any> {
-    items: Ref<T[]>;
+    items: ShallowRef<T[]>;
     loading: Ref<boolean>;
     error: Ref<string | null>;
     reload: () => Promise<void>;
 }
 /**
- * Robust data fetcher for charts. Supports:
- * 1. Plain arrays
- * 2. Katlux DataProviders (with .pageData ref)
- * 3. Legacy fetchable providers (with .fetch() method)
+ * Extracts item rows from a Katlux DataProvider instance.
+ * Prioritizes complete unpaginated datasets (filteredData or allData)
+ * so charts display all data points instead of being truncated to pageData (e.g. pageSize: 10).
  */
-export declare function useChartData<T = any>(providerOrData: Ref<any>): IChartDataContext<T>;
+export declare function extractProviderItems<T = any>(provider?: ADataProvider | any): T[];
+/**
+ * Provider-agnostic data watcher for Katlux chart components.
+ * Consumes data through Katlux DataProvider instances (Server-side or Client-side).
+ * Uses provider.subscribe() instead of Vue watch() so it works with __v_skip providers.
+ */
+export declare function useChartData<T = any>(dataProvider: Ref<ADataProvider | null | undefined> | ADataProvider | null | undefined): IChartDataContext<T>;

package/dist/runtime/composables/useChartData.js

@@ -1,45 +1,114 @@
-import { ref, watch, onMounted, isRef } from "vue";
-export function useChartData(providerOrData) {
-  const items = ref([]);
+import { shallowRef, ref, watch, onMounted, onUnmounted, onScopeDispose, getCurrentScope, getCurrentInstance, isRef } from "vue";
+export function extractProviderItems(provider) {
+  if (!provider) return [];
+  const instance = isRef(provider) ? provider.value : provider;
+  if (!instance) return [];
+  const hasActiveFilter = Boolean(
+    instance.filter && (typeof instance.filter === "object" && Object.keys(instance.filter).length > 0 || typeof instance.hasFilter === "boolean" && instance.hasFilter || typeof instance.hasFilter === "function" && instance.hasFilter())
+  );
+  const rowMap = isRef(instance._rowMap) ? instance._rowMap.value : instance._rowMap;
+  if (Array.isArray(rowMap)) {
+    if (hasActiveFilter) {
+      return rowMap;
+    }
+    if (rowMap.length > 0) {
+      return rowMap;
+    }
+  }
+  const filtered = isRef(instance.filteredData) ? instance.filteredData.value : instance.filteredData;
+  if (Array.isArray(filtered)) {
+    if (hasActiveFilter) {
+      return filtered;
+    }
+    if (filtered.length > 0) {
+      return filtered;
+    }
+  }
+  const all = isRef(instance.allData) ? instance.allData.value : instance.allData;
+  if (Array.isArray(all) && all.length > 0) {
+    if (hasActiveFilter && Array.isArray(filtered)) {
+      return [];
+    }
+    return all;
+  }
+  let raw = isRef(instance.pageData) ? instance.pageData.value : instance.pageData;
+  if (!raw) return [];
+  if (Array.isArray(raw)) {
+    return raw;
+  }
+  if (Array.isArray(raw.rows)) {
+    return raw.rows;
+  }
+  return [];
+}
+export function useChartData(dataProvider) {
+  const items = shallowRef([]);
   const loading = ref(false);
   const error = ref(null);
-  const load = async () => {
-    const source = providerOrData.value;
-    if (!source) {
+  const updateItems = () => {
+    const provider = isRef(dataProvider) ? dataProvider.value : dataProvider;
+    if (provider) {
+      items.value = extractProviderItems(provider);
+      const rawLoading = provider.loading !== void 0 ? isRef(provider.loading) ? provider.loading.value : provider.loading?.value ?? provider.loading : false;
+      const rawInitial = provider.initialLoad !== void 0 ? isRef(provider.initialLoad) ? provider.initialLoad.value : provider.initialLoad?.value ?? provider.initialLoad : false;
+      loading.value = Boolean(rawLoading || rawInitial);
+    } else {
       items.value = [];
-      return;
+      loading.value = false;
+    }
+  };
+  let unsubscribe = null;
+  const setupSubscription = () => {
+    if (unsubscribe) {
+      unsubscribe();
+      unsubscribe = null;
+    }
+    const isServer = typeof window === "undefined" || typeof import.meta !== "undefined" && Boolean(import.meta.server);
+    const provider = isRef(dataProvider) ? dataProvider.value : dataProvider;
+    if (!isServer && provider?.subscribe) {
+      unsubscribe = provider.subscribe(() => updateItems());
     }
+    updateItems();
+  };
+  if (isRef(dataProvider)) {
+    watch(dataProvider, setupSubscription, { immediate: true });
+  } else {
+    setupSubscription();
+  }
+  if (getCurrentInstance()) {
+    onMounted(updateItems);
+    onUnmounted(() => {
+      if (unsubscribe) {
+        unsubscribe();
+        unsubscribe = null;
+      }
+    });
+  }
+  if (getCurrentScope()) {
+    onScopeDispose(() => {
+      if (unsubscribe) {
+        unsubscribe();
+        unsubscribe = null;
+      }
+    });
+  }
+  const reload = async () => {
+    const provider = isRef(dataProvider) ? dataProvider.value : dataProvider;
+    if (!provider) return;
     loading.value = true;
     error.value = null;
     try {
-      if (Array.isArray(source)) {
-        items.value = source;
-        return;
-      }
-      if (source.pageData) {
-        items.value = isRef(source.pageData) ? source.pageData.value : source.pageData;
-        return;
-      }
-      if (typeof source.fetch === "function") {
-        const result = await source.fetch();
-        items.value = result?.rows ?? result ?? [];
-        return;
-      }
-      if (source.rows) {
-        items.value = source.rows;
-        return;
+      if (provider.refresh) {
+        await provider.refresh();
+      } else if (provider.loadPageData) {
+        await provider.loadPageData();
       }
+      updateItems();
     } catch (e) {
-      error.value = e?.message ?? "Failed to load chart data";
+      error.value = e?.message ?? "Failed to reload chart provider";
     } finally {
       loading.value = false;
     }
   };
-  const reload = load;
-  onMounted(load);
-  watch(providerOrData, load);
-  watch(() => providerOrData.value?.pageData?.value, (newRows) => {
-    if (newRows) items.value = newRows;
-  }, { deep: true });
   return { items, loading, error, reload };
 }

package/dist/runtime/composables/useChartExport.d.ts

@@ -1,5 +1,5 @@
 export interface IChartExportContext {
     exportPng: (canvas: HTMLCanvasElement, filename?: string) => void;
-    exportSvg: (svgEl: SVGSVGElement, filename?: string) => void;
+    exportSvg: (svgEl: SVGSVGElement, filename?: string, canvas?: HTMLCanvasElement | null) => void;
 }
 export declare function useChartExport(): IChartExportContext;

package/dist/runtime/composables/useChartExport.js

@@ -16,14 +16,37 @@ export function useChartExport() {
       console.error("[KChart] PNG export failed:", e);
     }
   };
-  const exportSvg = (svgEl, filename = "chart.svg") => {
+  const exportSvg = (svgEl, filename = "chart.svg", canvas) => {
     try {
+      const clone = svgEl.cloneNode(true);
+      if (!clone.getAttribute("xmlns")) {
+        clone.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+      }
+      if (canvas) {
+        const dataUrl = canvas.toDataURL("image/png");
+        const imageEl = document.createElementNS("http://www.w3.org/2000/svg", "image");
+        imageEl.setAttribute("href", dataUrl);
+        imageEl.setAttribute("x", "0");
+        imageEl.setAttribute("y", "0");
+        const dpr = typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1;
+        const svgBox = svgEl.viewBox?.baseVal;
+        const w = svgBox && svgBox.width > 0 ? svgBox.width : canvas.style.width ? parseFloat(canvas.style.width) : svgEl.clientWidth || canvas.width / dpr || 400;
+        const h = svgBox && svgBox.height > 0 ? svgBox.height : canvas.style.height ? parseFloat(canvas.style.height) : svgEl.clientHeight || canvas.height / dpr || 400;
+        imageEl.setAttribute("width", String(w));
+        imageEl.setAttribute("height", String(h));
+        clone.insertBefore(imageEl, clone.firstChild);
+      }
       const serializer = new XMLSerializer();
-      const svgStr = serializer.serializeToString(svgEl);
+      const svgStr = serializer.serializeToString(clone);
       const blob = new Blob([svgStr], { type: "image/svg+xml;charset=utf-8" });
       const url = URL.createObjectURL(blob);
       download(url, filename);
-      URL.revokeObjectURL(url);
+      setTimeout(() => {
+        try {
+          URL.revokeObjectURL(url);
+        } catch {
+        }
+      }, 1e3);
     } catch (e) {
       console.error("[KChart] SVG export failed:", e);
     }

package/dist/runtime/composables/useChartHitTest.d.ts

@@ -1,10 +1,10 @@
 import { type IChartAxesContext } from './useChartAxes.js';
 export declare function useChartHitTest(): {
-    findNearestX: (items: any[], mouseX: number, xField: string, axes: IChartAxesContext) => {
+    findNearestX: (items: any[], mouseX: number, xField: string, axes: IChartAxesContext, xValueGetter?: (item: any, index?: number) => number) => {
         item: any;
         index: number;
     } | null;
-    findNearestEuclidean: (items: any[], mouseX: number, mouseY: number, axes: IChartAxesContext, xField: string, yField: string, threshold?: number) => {
+    findNearestEuclidean: (items: any[], mouseX: number, mouseY: number, axes: IChartAxesContext, xField: string, yField: string, threshold?: number, xValueGetter?: (item: any, index: number) => number) => {
         item: any;
         index: number;
     } | null;

package/dist/runtime/composables/useChartHitTest.js

@@ -1,12 +1,13 @@
 import { parseValue } from "./useChartAxes.js";
 export function useChartHitTest() {
-  const findNearestX = (items, mouseX, xField, axes) => {
+  const findNearestX = (items, mouseX, xField, axes, xValueGetter) => {
     if (!items.length) return null;
     const dataX = axes.fromX(mouseX);
+    const getX = xValueGetter ?? ((item, i) => parseValue(item[xField], i));
     let nearestIdx = 0;
-    let minDiff = Math.abs(parseValue(items[0][xField]) - dataX);
+    let minDiff = Math.abs(getX(items[0], 0) - dataX);
     for (let i = 1; i < items.length; i++) {
-      const val = parseValue(items[i][xField]);
+      const val = getX(items[i], i);
       const diff = Math.abs(val - dataX);
       if (diff < minDiff) {
         minDiff = diff;
@@ -15,12 +16,13 @@ export function useChartHitTest() {
     }
     return { item: items[nearestIdx], index: nearestIdx };
   };
-  const findNearestEuclidean = (items, mouseX, mouseY, axes, xField, yField, threshold = 20) => {
+  const findNearestEuclidean = (items, mouseX, mouseY, axes, xField, yField, threshold = 20, xValueGetter) => {
     if (!items.length) return null;
     let nearestIdx = -1;
     let minDistanceSq = threshold * threshold;
     items.forEach((item, i) => {
-      const px = axes.toX(parseValue(item[xField]));
+      const xVal = xValueGetter ? xValueGetter(item, i) : parseValue(item[xField], i);
+      const px = axes.toX(xVal);
       const py = axes.toY(parseValue(item[yField]));
       const dx = mouseX - px;
       const dy = mouseY - py;

package/dist/runtime/composables/useChartViewport.d.ts

@@ -9,6 +9,7 @@ export interface IViewportState {
     canPan: Ref<boolean>;
 }
 export interface IChartViewportContext extends IViewportState {
+    zoomTo: (newScale: number, anchorX?: number) => void;
     zoomIn: () => void;
     zoomOut: () => void;
     resetZoom: () => void;
@@ -22,4 +23,6 @@ export declare function useChartViewport(options: {
     maxZoom?: Ref<number>;
     plotWidth: Ref<number>;
     plotLeft?: Ref<number>;
+    zoomable?: Ref<boolean> | boolean;
+    wheelNavigation?: Ref<boolean> | boolean;
 }): IChartViewportContext;

package/dist/runtime/composables/useChartViewport.js

@@ -1,10 +1,20 @@
-import { ref } from "vue";
+import { ref, isRef } from "vue";
 const ZOOM_STEP = 0.25;
 const MIN_SCALE = 1;
 const PAN_CLAMP_THRESHOLD = 0.01;
 export function useChartViewport(options) {
   const maxZoom = options.maxZoom ?? ref(10);
   const scale = ref(1);
+  const isZoomable = () => {
+    if (options.zoomable === void 0) return true;
+    return isRef(options.zoomable) ? options.zoomable.value : options.zoomable;
+  };
+  const isWheelNavEnabled = () => {
+    if (options.wheelNavigation !== void 0) {
+      return isRef(options.wheelNavigation) ? options.wheelNavigation.value : options.wheelNavigation;
+    }
+    return isZoomable();
+  };
   const panOffset = ref({ x: 0, y: 0 });
   const isDragging = ref(false);
   const canPan = ref(false);
@@ -12,8 +22,12 @@ export function useChartViewport(options) {
   let panStart = { x: 0, y: 0 };
   const clampPan = () => {
     const maxPanX = plotWidth() * (1 - 1 / scale.value);
-    panOffset.value.x = Math.max(0, Math.min(panOffset.value.x, maxPanX));
-    panOffset.value.y = 0;
+    const clampedX = Math.max(0, Math.min(panOffset.value.x, maxPanX));
+    if (clampedX !== panOffset.value.x) {
+      panOffset.value = { x: clampedX, y: 0 };
+    } else if (panOffset.value.y !== 0) {
+      panOffset.value = { ...panOffset.value, y: 0 };
+    }
   };
   const plotWidth = () => options.plotWidth.value;
   const updateCanPan = () => {
@@ -23,10 +37,14 @@ export function useChartViewport(options) {
     panOffset.value = { x: 0, y: 0 };
   };
   const zoomTo = (newScale, anchorX) => {
+    if (!isZoomable()) return;
     const prev = scale.value;
     const clamped = Math.min(Math.max(newScale, MIN_SCALE), maxZoom.value);
     if (anchorX !== void 0 && prev !== clamped) {
-      panOffset.value.x += anchorX * (1 / prev - 1 / clamped);
+      panOffset.value = {
+        ...panOffset.value,
+        x: panOffset.value.x + anchorX * (1 / prev - 1 / clamped)
+      };
     }
     scale.value = clamped;
     if (scale.value <= MIN_SCALE) resetPan();
@@ -41,7 +59,11 @@ export function useChartViewport(options) {
     updateCanPan();
   };
   const onWheel = (e) => {
+    if (!isWheelNavEnabled()) {
+      return;
+    }
     if (e.ctrlKey) {
+      if (!isZoomable()) return;
       e.preventDefault();
       const rect = e.currentTarget.getBoundingClientRect();
       const plotLeft = options.plotLeft?.value ?? 0;
@@ -49,11 +71,11 @@ export function useChartViewport(options) {
       const delta = e.deltaY < 0 ? ZOOM_STEP : -ZOOM_STEP;
       zoomTo(scale.value + delta, anchorX);
     } else if (e.shiftKey) {
-      e.preventDefault();
       if (!canPan.value) return;
+      e.preventDefault();
       const delta = e.deltaX !== 0 ? e.deltaX : e.deltaY;
       const dx = delta / scale.value;
-      panOffset.value.x += dx;
+      panOffset.value = { ...panOffset.value, x: panOffset.value.x + dx };
       clampPan();
     }
   };
@@ -66,7 +88,7 @@ export function useChartViewport(options) {
   const onMouseMove = (e) => {
     if (!isDragging.value || !canPan.value) return;
     const dx = -(e.clientX - dragStart.x) / scale.value;
-    panOffset.value.x = panStart.x + dx;
+    panOffset.value = { ...panOffset.value, x: panStart.x + dx };
     clampPan();
   };
   const onMouseUp = (_e) => {
@@ -80,6 +102,7 @@ export function useChartViewport(options) {
     panOffset,
     isDragging,
     canPan,
+    zoomTo,
     zoomIn,
     zoomOut,
     resetZoom,

package/package.json

@@ -1,9 +1,9 @@
 {
 	"name": "@katlux/block-charts",
-	"version": "0.1.0-beta.8",
+	"version": "0.1.1-alpha.100",
 	"description": "Pre-built charting block components for Katlux toolkit",
 	"author": "Katlux",
-	"license": "MIT",
+	"license": "Apache-2.0",
 	"publishConfig": {
 		"access": "public"
 	},
@@ -15,17 +15,22 @@
 	},
 	"exports": {
 		".": {
-			"types": "./dist/types.d.ts",
+			"types": "./dist/types.d.mts",
 			"import": "./dist/module.mjs",
-			"require": "./dist/module.cjs"
+			"require": "./dist/module.mjs"
 		},
 		"./package.json": "./package.json",
 		"./components/*": "./dist/runtime/components/*"
 	},
+	"sideEffects": [
+		"**/*.css",
+		"**/*.scss",
+		"**/*.sass"
+	],
 	"dependencies": {
-		"@katlux/providers": "*",
-		"@katlux/toolkit": "*",
-		"@nuxt/kit": "^3.20.1",
+		"@katlux/providers": "^0.1.1-alpha.112",
+		"@katlux/toolkit": "^0.1.1-alpha.124",
+		"@nuxt/kit": "^3.12.0",
 		"pug": "^3.0.0",
 		"sass": "^1.80.0"
 	},