vvplot 0.1.1 → 0.1.3

package/dist/Selection.js

@@ -1,6 +1,6 @@
-import { computed, isRef, reactive, unref, onMounted, nextTick, getCurrentScope, onScopeDispose, getCurrentInstance, shallowRef, watch, toValue, useTemplateRef, createElementBlock, openBlock, mergeProps, renderSlot, createCommentVNode, createTextVNode, toDisplayString, inject, normalizeStyle, createElementVNode, createBlock, Fragment, renderList, createVNode, toHandlers, normalizeProps, resolveDynamicComponent, guardReactiveProps, mergeModels, useModel, createPropsRestProxy, ref, useId, Teleport, useSlots, useAttrs, provide } from "vue";
+import { computed, isRef, reactive, unref, getCurrentScope, onScopeDispose, toValue, watch, shallowRef, getCurrentInstance, onMounted, useTemplateRef, nextTick, createElementBlock, openBlock, mergeProps, renderSlot, createCommentVNode, createTextVNode, toDisplayString, inject, normalizeStyle, createElementVNode, createBlock, Fragment, renderList, createVNode, toHandlers, normalizeProps, resolveDynamicComponent, guardReactiveProps, mergeModels, useModel, createPropsRestProxy, ref, useId, Teleport, useSlots, useAttrs, provide } from "vue";
 import { theme_base, theme_default, themeBuild, themePreprocess, themeMerge } from "./theme.js";
-import { vecutils, intraaction, numutils, intrazip, GEnumLevel, oob_squish_any, dropNull, emitEvent, plus, categorize, obj_merge, interaction, unique, oob_squish_infinite, str_c, serializeSVG } from "./utils.js";
+import { vecutils, intraaction, numutils, intrazip, GEnumLevel, plus, oob_squish_any, dropNull, emitEvent, categorize, obj_merge, interaction, unique, oob_squish_infinite, str_c, serializeSVG } from "./utils.js";
 import vvscale from "./scale.js";
 import vvbreak from "./break.js";
 import vvlabel from "./label.js";
@@ -48,21 +48,6 @@ function reactiveComputed(fn) {
 }
 const isClient = typeof window !== "undefined" && typeof document !== "undefined";
 typeof WorkerGlobalScope !== "undefined" && globalThis instanceof WorkerGlobalScope;
-function toArray(value) {
-  return Array.isArray(value) ? value : [value];
-}
-function getLifeCycleTarget(target) {
-  return getCurrentInstance();
-}
-function tryOnMounted(fn, sync = true, target) {
-  const instance = getLifeCycleTarget();
-  if (instance)
-    onMounted(fn, target);
-  else if (sync)
-    fn();
-  else
-    nextTick(fn);
-}
 const defaultWindow = isClient ? window : void 0;
 function unrefElement(elRef) {
   var _a;
@@ -126,68 +111,12 @@ function useResizeObserver(target, callback, options = {}) {
     stop
   };
 }
-function useElementSize(target, initialSize = { width: 0, height: 0 }, options = {}) {
-  const { window: window2 = defaultWindow, box = "content-box" } = options;
-  const isSVG = computed(() => {
-    var _a, _b;
-    return (_b = (_a = unrefElement(target)) == null ? void 0 : _a.namespaceURI) == null ? void 0 : _b.includes("svg");
-  });
-  const width = shallowRef(initialSize.width);
-  const height = shallowRef(initialSize.height);
-  const { stop: stop1 } = useResizeObserver(
-    target,
-    ([entry]) => {
-      const boxSize = box === "border-box" ? entry.borderBoxSize : box === "content-box" ? entry.contentBoxSize : entry.devicePixelContentBoxSize;
-      if (window2 && isSVG.value) {
-        const $elem = unrefElement(target);
-        if ($elem) {
-          const rect = $elem.getBoundingClientRect();
-          width.value = rect.width;
-          height.value = rect.height;
-        }
-      } else {
-        if (boxSize) {
-          const formatBoxSize = toArray(boxSize);
-          width.value = formatBoxSize.reduce((acc, { inlineSize }) => acc + inlineSize, 0);
-          height.value = formatBoxSize.reduce((acc, { blockSize }) => acc + blockSize, 0);
-        } else {
-          width.value = entry.contentRect.width;
-          height.value = entry.contentRect.height;
-        }
-      }
-    },
-    options
-  );
-  tryOnMounted(() => {
-    const ele = unrefElement(target);
-    if (ele) {
-      width.value = "offsetWidth" in ele ? ele.offsetWidth : initialSize.width;
-      height.value = "offsetHeight" in ele ? ele.offsetHeight : initialSize.height;
-    }
-  });
-  const stop2 = watch(
-    () => unrefElement(target),
-    (ele) => {
-      width.value = ele ? initialSize.width : 0;
-      height.value = ele ? initialSize.height : 0;
-    }
-  );
-  function stop() {
-    stop1();
-    stop2();
-  }
-  return {
-    width,
-    height,
-    stop
-  };
-}
 const NO = () => false;
 const extend = Object.assign;
-const TELEPORT = Symbol(``);
-const SUSPENSE = Symbol(``);
-const KEEP_ALIVE = Symbol(``);
-const BASE_TRANSITION = Symbol(
+const TELEPORT = /* @__PURE__ */ Symbol(``);
+const SUSPENSE = /* @__PURE__ */ Symbol(``);
+const KEEP_ALIVE = /* @__PURE__ */ Symbol(``);
+const BASE_TRANSITION = /* @__PURE__ */ Symbol(
   ``
 );
 const locStub = {
@@ -311,14 +240,28 @@ class Tokenizer {
   getPos(index) {
     let line2 = 1;
     let column = index + 1;
-    for (let i = this.newlines.length - 1; i >= 0; i--) {
-      const newlineIndex = this.newlines[i];
-      if (index > newlineIndex) {
-        line2 = i + 2;
-        column = index - newlineIndex;
-        break;
+    const length = this.newlines.length;
+    let j = -1;
+    if (length > 100) {
+      let l = -1;
+      let r = length;
+      while (l + 1 < r) {
+        const m = l + r >>> 1;
+        this.newlines[m] < index ? l = m : r = m;
+      }
+      j = l;
+    } else {
+      for (let i = length - 1; i >= 0; i--) {
+        if (index > this.newlines[i]) {
+          j = i;
+          break;
+        }
       }
     }
+    if (j >= 0) {
+      line2 = j + 2;
+      column = index - this.newlines[j];
+    }
     return {
       column,
       line: line2,
@@ -1748,7 +1691,7 @@ const vvgeom = {
       if (orientation == "y") return ds.y ?? [];
     },
     validate(d) {
-      if (isNaN(+d.x) || isNaN(+d.y)) return null;
+      if (isNaN(d.x) || isNaN(d.y)) return null;
       return d;
     }
   },
@@ -1763,7 +1706,7 @@ const vvgeom = {
       if (orientation == "y") return (ds.y ?? []).concat(ds.yend ?? []);
     },
     validate(d) {
-      if (isNaN(+d.x) || isNaN(+d.y) || isNaN(+d.xend) || isNaN(+d.yend)) return null;
+      if (isNaN(d.x) || isNaN(d.y) || isNaN(d.xend) || isNaN(d.yend)) return null;
       return d;
     }
   },
@@ -1782,7 +1725,7 @@ const vvgeom = {
       if (orientation == "y") return (ds.y ?? []).concat(psum(ds.y ?? [], ds.dy ?? 0) ?? []);
     },
     validate(d) {
-      if (isNaN(+d.x) || isNaN(+d.y) || isNaN(+d.xend) || isNaN(+d.yend)) return null;
+      if (isNaN(d.x) || isNaN(d.y) || isNaN(d.xend) || isNaN(d.yend)) return null;
       return d;
     }
   },
@@ -1828,7 +1771,7 @@ const vvgeom = {
       }
     },
     validate(d) {
-      if (isNaN(+d.xmin) || isNaN(+d.ymin) || isNaN(+d.xmax) || isNaN(+d.ymax)) return null;
+      if (isNaN(d.xmin) || isNaN(d.ymin) || isNaN(d.xmax) || isNaN(d.ymax)) return null;
       return d;
     }
   },
@@ -1843,7 +1786,7 @@ const vvgeom = {
       if (orientation == "y") return (ds.ymin ?? []).concat(ds.ymax ?? []);
     },
     validate(d) {
-      if (isNaN(+d.xmin) || isNaN(+d.ymin) || isNaN(+d.xmax) || isNaN(+d.ymax)) return null;
+      if (isNaN(d.xmin) || isNaN(d.ymin) || isNaN(d.xmax) || isNaN(d.ymax)) return null;
       return d;
     }
   },
@@ -1879,7 +1822,7 @@ const vvgeom = {
       if (orientation == "y") return ds.y ?? [];
     },
     validate(d) {
-      if (isNaN(+d.x) || isNaN(+d.y)) return null;
+      if (isNaN(d.x) || isNaN(d.y)) return null;
       return d;
     }
   },
@@ -1894,22 +1837,88 @@ const vvgeom = {
       if (orientation == "y") return (ds.y ?? []).concat(ds.yend ?? []);
     },
     validate(d) {
-      if (isNaN(+d.x) || isNaN(+d.xend) || isNaN(+d.y) || isNaN(+d.yend)) return null;
+      if (isNaN(d.x) || isNaN(d.xend) || isNaN(d.y) || isNaN(d.yend)) return null;
+      return d;
+    }
+  },
+  boxplot: {
+    scale_attrs: ["fill", "color", "linewidth", "linetype", "alpha"],
+    coord_scale(ds, levels) {
+      let xnudge = ds.xnudge ?? 0, ynudge = ds.ynudge ?? 0;
+      if (ds.x) {
+        let x2 = psum(levels.x?.apply?.(ds.x) ?? ds.x, xnudge), xmin = psum(x2, ds.width?.map?.((x3) => -x3 / 2) ?? -0.5, xnudge), xmax = psum(x2, ds.width?.map?.((x3) => +x3 / 2) ?? 0.5, xnudge), lwisker = psum(ds.lwisker, ynudge), Q1 = psum(ds.Q1, ynudge), median = psum(ds.median, ynudge), Q3 = psum(ds.Q3, ynudge), uwisker = psum(ds.uwisker, ynudge), outliers = vecutils.apply(
+          ($x, { y: ys, $raw }, nudge) => psum(ys, nudge).map(($y, i) => ({ x: $x, y: $y, $raw: $raw[i] })),
+          x2,
+          ds.outliers ?? [],
+          ynudge
+        ), $ymin = psum(ds.min, ynudge), $ymax = psum(ds.max, ynudge);
+        return {
+          x: x2,
+          xmin,
+          xmax,
+          lwisker,
+          Q1,
+          median,
+          Q3,
+          uwisker,
+          outliers,
+          $xmin: xmin,
+          $xmax: xmax,
+          $ymin,
+          $ymax
+        };
+      } else if (ds.y) {
+        let y2 = psum(levels.y?.apply?.(ds.y) ?? ds.y, ynudge), ymin = psum(y2, ds.height?.map?.((y3) => -y3 / 2) ?? -0.5, ynudge), ymax = psum(y2, ds.height?.map?.((y3) => +y3 / 2) ?? 0.5, ynudge), lwisker = psum(ds.lwisker, xnudge), Q1 = psum(ds.Q1, xnudge), median = psum(ds.median, xnudge), Q3 = psum(ds.Q3, xnudge), uwisker = psum(ds.uwisker, xnudge), outliers = vecutils.apply(
+          ($y, { x: xs, $raw }, nudge) => psum(xs, nudge).map(($x, i) => ({ x: $x, y: $y, $raw: $raw[i] })),
+          y2,
+          ds.outliers ?? [],
+          xnudge
+        ), $xmin = psum(ds.xmin, xnudge), $xmax = psum(ds.xmax, xnudge);
+        return {
+          y: y2,
+          ymin,
+          ymax,
+          lwisker,
+          Q1,
+          median,
+          Q3,
+          uwisker,
+          outliers,
+          $xmin,
+          $xmax,
+          $ymin: ymin,
+          $ymax: ymax
+        };
+      }
+      return {};
+    },
+    get_range(ds, orientation) {
+      if (orientation == "x") return ds.x || (ds.min ?? []).concat(ds.max ?? []);
+      if (orientation == "y") return ds.y || (ds.min ?? []).concat(ds.max ?? []);
+    },
+    validate(d) {
+      if ([d.$xmin, d.$xmax, d.$ymin, d.$ymax].some((v) => isNaN(v))) return null;
       return d;
     }
   }
 };
 const vvstat = {
-  blank: Object.assign(function(data) {
-    let missingAes = ["x", "y"].filter((a) => data[a] == null);
-    if (missingAes.length > 0)
-      throw new Error(`Missing aesthetics for GeomBlank: "${missingAes.join('", "')}"`);
+  /**
+   * identity transformation
+   *   keep data points as is
+   */
+  identity: Object.assign(function(data) {
     return data;
-  }, { core_attrs: ["x", "y"] }),
+  }, { core_attrs: ["x", "y", "xnudge", "ynudge"] }),
+  /**
+   * line transformation
+   *   connect data points in the order of one variable
+   *   { x, y } => { x, y, xend, yend }
+   */
   line: Object.assign(function(data, { orientation = "x" } = {}) {
     let missingAes = ["x", "y"].filter((a) => data[a] == null);
     if (missingAes.length > 0)
-      throw new Error(`Missing aesthetics for GeomLine: "${missingAes.join('", "')}"`);
+      throw new Error(`Missing aesthetics for "StatLine": "${missingAes.join('", "')}"`);
     let group = data.group ?? new Array(data.x.length).fill(null);
     let groups = Object.values(group.reduce((acc, cur, i) => {
       acc[cur] ??= [];
@@ -1929,25 +1938,35 @@ const vvstat = {
     result.yend = order2.map((i) => data.y[i]);
     return result;
   }, { core_attrs: ["x", "y", "xnudge", "ynudge"] }),
+  /**
+   * linerange transformation
+   *   { x, ymin, ymax } => { x, y, xend, yend }
+   *   { y, xmin, xmax } => { y, x, yend, xend }
+   */
   linerange: Object.assign(function(data) {
     if (data.x != null) {
       let missingAes = ["x", "ymin", "ymax"].filter((a) => data[a] == null);
       if (missingAes.length > 0)
-        throw new Error(`Missing aesthetics for GeomLinerange: "${missingAes.join('", "')}"`);
+        throw new Error(`Missing aesthetics for "StatLinerange": "${missingAes.join('", "')}"`);
       return (({ x: x2, ymin, ymax, ...etc }) => ({ x: x2, xend: x2, y: ymin, yend: ymax, ...etc }))(data);
     } else if (data.y != null) {
       let missingAes = ["y", "xmin", "xmax"].filter((a) => data[a] == null);
       if (missingAes.length > 0)
-        throw new Error(`Missing aesthetics for GeomLinerange: "${missingAes.join('", "')}"`);
+        throw new Error(`Missing aesthetics for "StatLinerange": "${missingAes.join('", "')}"`);
       return (({ y: y2, xmin, xmax, ...etc }) => ({ y: y2, yend: y2, x: xmin, xend: xmax, ...etc }))(data);
     } else {
-      throw new Error(`Missing aesthetics for GeomLinerange: x,ymin,ymax or y,xmin,xmax`);
+      throw new Error(`Missing aesthetics for "StatLinerange": x,ymin,ymax or y,xmin,xmax`);
     }
   }, { core_attrs: ["x", "y", "xmin", "xmax", "ymin", "ymax", "xnudge", "ynudge"] }),
+  /**
+   * path transformation
+   *   connect data points in appearance order
+   *   { x, y } => { x, y, xend, yend }
+   */
   path: Object.assign(function(data) {
     let missingAes = ["x", "y"].filter((a) => data[a] == null);
     if (missingAes.length > 0)
-      throw new Error(`Missing aesthetics for GeomPath: "${missingAes.join('", "')}"`);
+      throw new Error(`Missing aesthetics for "StatPath": "${missingAes.join('", "')}"`);
     let group = data.group ?? new Array(data.x.length).fill(null);
     let groups = Object.values(group.reduce((acc, cur, i) => {
       acc[cur] ??= [];
@@ -1965,27 +1984,40 @@ const vvstat = {
     result.yend = order2.map((i) => data.y[i]);
     return result;
   }, { core_attrs: ["x", "y", "xnudge", "ynudge"] }),
+  /**
+   * segment transformation
+   *  { x, y, xend?, yend? } => { x, y, xend, yend }
+   */
   segment: Object.assign(function(data) {
     if (data.xend == null) data.xend = data.x;
     if (data.yend == null) data.yend = data.y;
     let missingAes = ["x", "y", "xend", "yend"].filter((a) => data[a] == null);
     if (missingAes.length > 0)
-      throw new Error(`Missing aesthetics for GeomSegment: "${missingAes.join('", "')}"`);
+      throw new Error(`Missing aesthetics for "StatSegment": "${missingAes.join('", "')}"`);
     return data;
   }, { core_attrs: ["x", "y", "xend", "yend", "xnudge", "ynudge"] }),
+  /**
+   * stick transformation
+   *   { x, y, dx, dy } => { x, y, xend, yend }
+   */
   stick: Object.assign(function(data) {
     if (data.dx == null) data.dx = Array(data.x.length).fill(0);
     if (data.dy == null) data.dy = Array(data.y.length).fill(0);
     let missingAes = ["x", "y", "dx", "dy"].filter((a) => data[a] == null);
     if (missingAes.length > 0)
-      throw new Error(`Missing aesthetics for GeomStick: "${missingAes.join('", "')}"`);
+      throw new Error(`Missing aesthetics for "StatStick": "${missingAes.join('", "')}"`);
     return data;
   }, { core_attrs: ["x", "y", "dx", "dy", "xnudge", "ynudge"] }),
+  /**
+   * curve transformation
+   *   { x, y } => { points }
+   *   { points } => { points }
+   */
   curve: Object.assign(function(data) {
     if (data.points != null) return data;
     let missingAes = ["x", "y"].filter((a) => data[a] == null);
     if (missingAes.length > 0)
-      throw new Error(`Missing aesthetics for GeomCurve: "${missingAes.join('", "')}" or "points"`);
+      throw new Error(`Missing aesthetics for "StatCurve": "${missingAes.join('", "')}" or "points"`);
     let keys = Object.keys(data).filter((k) => !["x", "y"].includes(k) && !k.startsWith("$"));
     let group = intraaction(Object.fromEntries(keys.map((k) => [k, data[k]])));
     let cut = intraaction({
@@ -2003,17 +2035,26 @@ const vvstat = {
     }
     return result;
   }, { core_attrs: ["x", "y", "xnudge", "ynudge"] }),
+  /**
+   * point transformation
+   *   { x, y } => { x, y }
+   */
   point: Object.assign(function(data) {
     let missingAes = ["x", "y"].filter((a) => data[a] == null);
     if (missingAes.length > 0)
-      throw new Error(`Missing aesthetics for GeomPoint: "${missingAes.join('", "')}"`);
+      throw new Error(`Missing aesthetics for "StatPoint": "${missingAes.join('", "')}"`);
     return data;
   }, { core_attrs: ["x", "y", "xnudge", "ynudge"] }),
+  /**
+   * polygon transformation
+   *   { x, y } => { points }
+   *   { points } => { points }
+   */
   polygon: Object.assign(function(data) {
     if (data.points != null) return data;
     let missingAes = ["x", "y"].filter((a) => data[a] == null);
     if (missingAes.length > 0)
-      throw new Error(`Missing aesthetics for GeomPolygon: "${missingAes.join('", "')}" or "points"`);
+      throw new Error(`Missing aesthetics for "StatPolygon": "${missingAes.join('", "')}" or "points"`);
     let keys = Object.keys(data).filter((k) => !["x", "y"].includes(k) && !k.startsWith("$"));
     let group = intraaction(Object.fromEntries(keys.map((k) => [k, data[k]])));
     let cut = intraaction({
@@ -2031,12 +2072,20 @@ const vvstat = {
     }
     return result;
   }, { core_attrs: ["points", "xnudge", "ynudge"] }),
+  /**
+   * rect transformation
+   *   { xmin, xmax, ymin, ymax } => { xmin, xmax, ymin, ymax }
+   */
   rect: Object.assign(function(data) {
     let missingAes = ["xmin", "xmax", "ymin", "ymax"].filter((a) => data[a] == null);
     if (missingAes.length > 0)
-      throw new Error(`Missing aesthetics for GeomRect: "${missingAes.join('", "')}"`);
+      throw new Error(`Missing aesthetics for "StatRect": "${missingAes.join('", "')}"`);
     return data;
   }, { core_attrs: ["xmin", "xmax", "ymin", "ymax", "xnudge", "ynudge"] }),
+  /**
+   * tile transformation
+   *   { x, y, width?, height? } => { x, y, width, height }
+   */
   tile: Object.assign(function(data) {
     if (data.width == null && data.x.some((x2) => typeof x2 === "string")) {
       data.width = Array(data.x.length).fill(1);
@@ -2046,31 +2095,44 @@ const vvstat = {
     }
     let missingAes = ["x", "y", "width", "height"].filter((a) => data[a] == null);
     if (missingAes.length > 0)
-      throw new Error(`Missing aesthetics for GeomTile: "${missingAes.join('", "')}"`);
+      throw new Error(`Missing aesthetics for "StatTile": "${missingAes.join('", "')}"`);
     return data;
   }, { core_attrs: ["x", "y", "width", "height", "xnudge", "ynudge"] }),
+  /**
+   * text transformation
+   *   { x, y, label } => { x, y, label }
+   */
   text: Object.assign(function(data) {
     let missingAes = ["x", "y", "label"].filter((a) => data[a] == null);
     if (missingAes.length > 0)
-      throw new Error(`Missing aesthetics for GeomText: "${missingAes.join('", "')}"`);
+      throw new Error(`Missing aesthetics for "StatText": "${missingAes.join('", "')}"`);
     return data;
   }, { core_attrs: ["x", "y", "xnudge", "ynudge", "label", "text-length"] }),
+  /**
+   * textsegment transformation
+   *   { x, y, xend, yend, label } => { x, y, xend, yend, label }
+   */
   textsegment: Object.assign(function(data) {
     if (data.xend == null) data.xend = data.x;
     if (data.yend == null) data.yend = data.y;
     let missingAes = ["x", "y", "xend", "yend", "label"].filter((a) => data[a] == null);
     if (missingAes.length > 0)
-      throw new Error(`Missing aesthetics for GeomTextsegment: "${missingAes.join('", "')}"`);
+      throw new Error(`Missing aesthetics for "StatTextsegment": "${missingAes.join('", "')}"`);
     return data;
   }, { core_attrs: ["x", "y", "xend", "yend", "xnudge", "ynudge", "label"] }),
+  /**
+   * histogram transformation
+   *   { x } => { xmin, xmax, ymin, ymax }
+   *   { y } => { ymin, ymax, xmin, xmax }
+   */
   histogram: Object.assign(function(data, { bins = 30, binwidth, breaks } = {}) {
     if (data.x != null && data.y != null)
-      throw new Error(`Histogram only supports x or y, not both`);
+      throw new Error(`"StatHistogram" only supports "x" or "y", not both`);
     let values = data.x ?? data.y;
     if (values == null)
-      throw new Error(`Missing aesthetics for GeomHistogram: x or y`);
+      throw new Error(`Missing aesthetics for "StatHistogram": "x" or "y"`);
     if (values.some((x2) => typeof x2 !== "number"))
-      throw new Error(`"stat.histogram" requires a continuous aesthetic`);
+      throw new Error(`"StatHistogram" requires a continuous aesthetic`);
     if (breaks) {
       breaks.sort((a, b) => a - b);
     } else {
@@ -2116,14 +2178,19 @@ const vvstat = {
       }) => ({ xmin, xmax, ymin, ymax, ...etc }))(result);
     }
   }, { core_attrs: ["x", "y", "xnudge", "ynudge"] }),
+  /**
+   * bar transformation
+   *   { x } => { x, y, height }
+   *   { y } => { x, y, width }
+   */
   bar: Object.assign(function(data) {
     if (data.x != null && data.y != null)
-      throw new Error(`Bar only supports x or y, not both`);
+      throw new Error(`"StatBar" only supports "x" or "y", not both`);
     let values = data.x ?? data.y;
     if (values == null)
-      throw new Error(`Missing aesthetics for GeomBar: x or y`);
+      throw new Error(`Missing aesthetics for "StatBar": "x" or "y"`);
     if (values.some((x2) => typeof x2 === "number"))
-      throw new Error(`"stat.bar" requires a discrete aesthetic`);
+      throw new Error(`"StatBar" requires a discrete aesthetic`);
     let keys = Object.keys(data).filter((k) => !["x", "y"].includes(k) && !k.startsWith("$"));
     let group = intraaction(Object.fromEntries(keys.map((k) => [k, data[k]])));
     let inter = intraaction({ group: group ?? 0, value: values });
@@ -2144,14 +2211,64 @@ const vvstat = {
       return (({ value, count, ...etc }) => ({ y: value, x: count.map((x2) => x2 / 2), width: count, ...etc }))(result);
     }
   }, { core_attrs: ["x", "y", "xnudge", "ynudge"] }),
+  /**
+   * boxplot transformation
+   *   { x, y } => { x, min, lwisker, Q1, median, Q3, uwisker, max, outliers }
+   *   { x, y } => { y, min, lwisker, Q1, median, Q3, uwisker, max, outliers }
+   */
+  boxplot: Object.assign(function(data, {}) {
+    let missingAes = ["x", "y"].filter((a) => data[a] == null);
+    if (missingAes.length > 0)
+      throw new Error(`Missing aesthetics for "StatBoxplot": "${missingAes.join('", "')}"`);
+    let isXdiscrete = data.x.some((x2) => typeof x2 !== "number");
+    let isYdiscrete = data.y.some((y2) => typeof y2 !== "number");
+    if (isXdiscrete && isYdiscrete)
+      throw new Error(`Both "x" and "y" are discrete, "StatBoxplot" requires one continuous and one discrete aesthetic`);
+    if (!isXdiscrete && !isYdiscrete)
+      throw new Error(`Both "x" and "y" are continuous, "StatBoxplot" requires one continuous and one discrete aesthetic`);
+    let [valueAes, cateAes] = isXdiscrete ? ["y", "x"] : ["x", "y"];
+    let keys = Object.keys(data).filter((k) => k != valueAes && !k.startsWith("$"));
+    let group = intraaction(Object.fromEntries(keys.map((k) => [k, data[k]])));
+    let inter = intraaction({ group: group ?? 0, cate: data[cateAes] });
+    let groupIdx = Map.groupBy(inter.map((_, i) => i), (_, i) => inter.categories[inter[i]]);
+    let cates = Array.from(groupIdx.keys()), $raw = Array.from(groupIdx.values()).map((arr) => arr.map((idx) => data.$raw[idx])), val = Array.from(groupIdx.values()).map((arr) => arr.map((idx) => data[valueAes][idx]));
+    let min = val.map((v) => numutils.min(v)), Q1 = val.map((v) => numutils.quantile(v, 0.25)), median = val.map((v) => numutils.quantile(v, 0.5)), Q3 = val.map((v) => numutils.quantile(v, 0.75)), max = val.map((v) => numutils.max(v)), IQR = val.map((_, i) => Q3[i] - Q1[i]), lwisker = val.map((_, i) => Math.max(min[i], Q1[i] - 1.5 * IQR[i])), uwisker = val.map((_, i) => Math.min(max[i], Q3[i] + 1.5 * IQR[i])), outliers = Array.from(groupIdx.values()).map((arr, i) => {
+      let ids = arr.filter((idx) => data[valueAes][idx] < lwisker[i] || data[valueAes][idx] > uwisker[i]);
+      return {
+        [valueAes]: ids.map((idx) => data[valueAes][idx]),
+        $raw: ids.map((idx) => data.$raw[idx])
+      };
+    });
+    let result = {
+      $raw,
+      $group: cates.map((x2) => x2.group),
+      min,
+      lwisker,
+      Q1,
+      median,
+      Q3,
+      uwisker,
+      max,
+      outliers
+    };
+    for (let key of keys) {
+      result[key] = cates.map((x2) => x2.group).map((i) => group.categories[i][key]);
+    }
+    return result;
+  }, { core_attrs: ["x", "y", "xnudge", "ynudge"] }),
+  /**
+   * density transformation
+   *   { x } => { points }
+   *   { y } => { points }
+   */
   density: Object.assign(function(data, { n = 512, kernel = "gaussian" } = {}) {
     if (data.x != null && data.y != null)
-      throw new Error(`Density only supports x or y, not both`);
+      throw new Error(`"StatDensity" only supports "x" or "y", not both`);
     let values = data.x ?? data.y;
     if (values == null)
-      throw new Error(`Missing aesthetics for GeomDensity: x or y`);
+      throw new Error(`Missing aesthetics for "StatDensity": "x" or "y"`);
     if (values.some((x2) => typeof x2 !== "number"))
-      throw new Error(`"stat.density" requires a continuous aesthetic`);
+      throw new Error(`"StatDensity" requires a continuous aesthetic`);
     kernel = density_kernels[kernel];
     if (!kernel) {
       throw new Error(`kernel must be one of ${Object.keys(density_kernels).map((k) => `"${k}"`).join(", ")}`);
@@ -2709,12 +2826,14 @@ class GLayer {
         }
         let values = this.$data[aes];
         if (!values?.length) continue;
-        if ($$levels?.[aes] != null) {
-          scale.level = $$levels[aes];
-        } else if (values.some((v) => typeof v === "string")) {
-          scale.level = GEnumLevel.from(values);
-        } else {
-          scale.extent = numutils.extent(values);
+        if (!scale.asis) {
+          if ($$levels?.[aes] != null) {
+            scale.level = $$levels[aes];
+          } else if (values.some((v) => typeof v === "string")) {
+            scale.level = GEnumLevel.from(values);
+          } else {
+            scale.extent = numutils.extent(values);
+          }
         }
         this.applyScale(aes, scale);
       }
@@ -2740,10 +2859,8 @@ class GLayer {
   applyScale(aes, scale) {
     let values = this.$data[aes];
     if (values == null) return;
-    if (scale.level != null) {
-      values = scale.level.apply(values);
-    }
-    values.extent = scale.limits;
+    if (scale.level) values = scale.level.apply(values);
+    if (scale.limits) values.extent = scale.limits;
     scale.aes = aes;
     this.data[aes] = scale(values);
     this.scales[aes] = scale;
@@ -2776,12 +2893,14 @@ class GPlot {
       if (values.length != 0) {
         let scale = new Scale(scales?.[aes] ?? vvscale[aes].default());
         scale.aesthetics = aes;
-        if (levels?.[aes] != null) {
-          scale.level = levels[aes];
-        } else if (values.some((v) => typeof v === "string")) {
-          scale.level = GEnumLevel.from(values);
-        } else if (!scale.asis) {
-          scale.extent = numutils.extent(values);
+        if (!scale.asis) {
+          if (levels?.[aes] != null) {
+            scale.level = levels[aes];
+          } else if (values.some((v) => typeof v === "string")) {
+            scale.level = GEnumLevel.from(values);
+          } else {
+            scale.extent = numutils.extent(values);
+          }
         }
         if (scale.title == null) {
           scale.title = this.layers.map((layer) => layer.$fns?.[aes]).find((s) => s != null);
@@ -2845,46 +2964,48 @@ class GPlot {
     let result = {};
     this._range = range;
     if (this.levels.x) {
-      let min = +(range?.xmin ?? -0.5) - (add.x?.min ?? 0), max = +(range?.xmax ?? this.levels.x.length - 0.5) + (add.x?.max ?? 0);
+      let min = +(range?.xmin ?? -0.5) - (+add.x?.min || 0), max = +(range?.xmax ?? this.levels.x.length - 0.5) + (+add.x?.max || 0);
       result.x = new DiscreteCoordScale(this.levels.x, { min, max });
     } else {
       let $min = range?.xmin ?? this.extents.x?.min ?? 0, $max = range?.xmax ?? this.extents.x?.max ?? 0;
-      let min = +$min - (add.x?.min ?? 0), max = +$max + (add.x?.max ?? 0);
+      let min = plus($min, -add.x?.min || 0), max = plus($max, +add.x?.max || 0);
       let dmin = minRange?.x ?? 1;
       if (max - min < dmin) {
         if (range?.xmax == null && range?.xmin != null) {
-          max = min + dmin;
+          max = plus(min, +dmin);
         } else if (range?.xmax != null && range?.xmin == null) {
-          min = max - dmin;
+          min = plus(max, -dmin);
         } else {
-          max = (max + min) / 2 + dmin / 2;
-          min = max - dmin;
+          let interval = max - min;
+          max = plus(max, -interval / 2 + dmin / 2);
+          min = plus(max, -dmin);
         }
       }
-      if ($min instanceof Date || $max instanceof Date) {
+      if (min instanceof Date || max instanceof Date) {
         result.x = new DatetimeCoordScale({ min, max });
       } else {
         result.x = new ContinuousCoordScale({ min, max });
       }
     }
     if (this.levels.y) {
-      let min = +(range?.ymin ?? -0.5) - (add.y?.min ?? 0), max = +(range?.ymax ?? this.levels.y.length - 0.5) + (add.y?.max ?? 0);
+      let min = +(range?.ymin ?? -0.5) - (+add.y?.min || 0), max = +(range?.ymax ?? this.levels.y.length - 0.5) + (+add.y?.max || 0);
       result.y = new DiscreteCoordScale(this.levels.y, { min, max });
     } else {
       let $min = range?.ymin ?? this.extents.y?.min ?? 0, $max = range?.ymax ?? this.extents.y?.max ?? 0;
-      let min = +$min - (add.y?.min ?? 0), max = +$max + (add.y?.max ?? 0);
+      let min = plus($min, -add.y?.min), max = plus($max, +add.y?.max || 0);
       let dmin = minRange?.y ?? 1;
       if (max - min < dmin) {
         if (range?.ymax == null && range?.ymin != null) {
-          max = min + dmin;
+          max = plus(min, +dmin);
         } else if (range?.ymax != null && range?.ymin == null) {
-          min = max - dmin;
+          min = plus(max, -dmin);
         } else {
-          max = (max + min) / 2 + dmin / 2;
-          min = max - dmin;
+          let interval = max - min;
+          max = plus(max, -interval / 2 + dmin / 2);
+          min = plus(max, -dmin);
         }
       }
-      if ($min instanceof Date || $max instanceof Date) {
+      if (min instanceof Date || max instanceof Date) {
         result.y = new DatetimeCoordScale({ min, max });
       } else {
         result.y = new ContinuousCoordScale({ min, max });
@@ -2934,23 +3055,13 @@ class DiscreteCoordScale extends Function {
   constructor(level, { min, max } = {}) {
     const scale = min == max ? (x2) => 0 : (x2) => (+x2 - min) / (max - min);
     scale.range = { min, max };
-    scale.limits = { min, max };
     scale.level = level;
-    scale.invert = (w) => w * (max - min) + min;
     Object.setPrototypeOf(scale, DiscreteCoordScale.prototype);
     return scale;
   }
-  expand({ min: mmin = 0, max: mmax = 0 } = {}) {
-    let $min = 0, $max = this.level.length, $interval = $max;
-    let min = $min - mmin * $interval, max = $max + mmax * $interval;
-    const scale = min == max ? (x2) => 0 : (x2) => (+x2 - min) / (max - min);
-    scale.invert = (w) => w * (max - min) + min;
-    scale.range = this.range;
-    scale.level = this.level;
-    scale.title = this.title;
-    scale.limits = { min, max };
-    Object.setPrototypeOf(scale, DiscreteCoordScale.prototype);
-    return scale;
+  invert(w) {
+    let { min, max } = this.range;
+    return w * (max - min) + min;
   }
   get breaks() {
     return Array.from(this.level);
@@ -2961,35 +3072,19 @@ class DiscreteCoordScale extends Function {
 }
 class ContinuousCoordScale extends Function {
   constructor(domain) {
-    let min = +domain.min, max = +domain.max;
-    const scale = min == max ? (x2) => 0.5 : (x2) => (+x2 - min) / (max - min);
+    let { min, max } = domain;
+    const scale = min == max ? (x2) => isFinite(x2) ? 0.5 : x2 : (x2) => (+x2 - min) / (max - min);
     scale.range = { min, max };
-    scale.limits = { min, max };
-    Object.setPrototypeOf(scale, ContinuousCoordScale.prototype);
-    return scale;
-  }
-  expand({ min: mmin = 0, max: mmax = 0 } = {}) {
-    let { min: $min, max: $max } = this.limits;
-    let $interval = $max - $min;
-    let min = $min - mmin * $interval, max = $max + mmax * $interval;
-    const scale = min == max ? (x2) => 0.5 : (x2) => (+x2 - min) / (max - min);
-    scale.range = this.range;
-    scale.level = this.level;
-    scale.title = this.title;
-    scale.limits = { min, max };
     Object.setPrototypeOf(scale, ContinuousCoordScale.prototype);
     return scale;
   }
   invert(w) {
-    let { min, max } = this.limits;
-    return w * (max - min) + min;
+    let { min, max } = this.range;
+    return plus(min, w * (max - min));
   }
   get breaks() {
     return vvbreak.number();
   }
-  get minorBreaks() {
-    return vvbreak.number({ minor: true });
-  }
 }
 class DatetimeCoordScale extends ContinuousCoordScale {
   constructor(domain) {
@@ -2997,15 +3092,6 @@ class DatetimeCoordScale extends ContinuousCoordScale {
     Object.setPrototypeOf(scale, DatetimeCoordScale.prototype);
     return scale;
   }
-  expand({ min: mmin = 0, max: mmax = 0 } = {}) {
-    let scale = super.expand({ min: mmin, max: mmax });
-    Object.setPrototypeOf(scale, DatetimeCoordScale.prototype);
-    return scale;
-  }
-  invert(w) {
-    let { min, max } = this.limits;
-    return new Date(w * (max - min) + min);
-  }
   get breaks() {
     return vvbreak.datetime();
   }
@@ -3014,25 +3100,28 @@ class DatetimeCoordScale extends ContinuousCoordScale {
   }
 }
 class GAxis {
-  constructor(scale, { extend: extend2, breaks, labels, minorBreaks, titles } = {}) {
+  constructor(scale, { breaks, labels, minorBreaks, titles } = {}) {
     this.scale = scale;
-    this.limits = scale?.limits;
-    this.extend = extend2 ?? 0;
+    this.range = scale?.range;
     this.breaks = breaks ?? scale.breaks;
     this.labels = labels ?? vvlabel.auto();
     this.titles = titles ?? vvlabel.asis();
-    this.minorBreaks = minorBreaks ?? scale.minorBreaks;
-  }
-  getBindings({ limits = this.limits, extend: extend2 = this.extend } = {}) {
-    let breaks = this.breaks, minorBreaks = this.minorBreaks;
-    let { min, max } = limits, interval = max - min || 0;
-    min = min == null ? min : min - extend2 * interval;
-    max = max == null ? max : max + extend2 * interval;
-    if (typeof breaks == "function") breaks = breaks(limits);
-    breaks = Array.isArray(breaks) ? breaks.sort((a, b) => a - b) : [];
-    if (typeof minorBreaks == "function") minorBreaks = minorBreaks(limits);
-    minorBreaks = Array.isArray(minorBreaks) ? minorBreaks.sort((a, b) => a - b) : [];
-    let labels = this.labels, titles = this.titles;
+    this.minorBreaks = minorBreaks ?? breaks ?? scale.minorBreaks ?? scale.breaks;
+  }
+  getBindings({ range, expandMult } = {}) {
+    let majorBreaks = this.breaks, minorBreaks = this.minorBreaks, labels = this.labels, titles = this.titles;
+    let min = range?.min ?? this?.range?.min, max = range?.max ?? this?.range?.max, interval = max - min || 0;
+    min = min == null ? min : plus(min, -(expandMult?.min ?? 0) * interval);
+    max = max == null ? max : plus(max, +(expandMult?.max ?? 0) * interval);
+    function normalizeBreaks(val) {
+      if (val.position != null) return val;
+      return { position: val };
+    }
+    if (typeof majorBreaks == "function") majorBreaks = majorBreaks({ min, max });
+    majorBreaks = Array.isArray(majorBreaks) ? majorBreaks.map(normalizeBreaks) : [];
+    let breaks = majorBreaks.map((x2) => x2.position);
+    if (typeof minorBreaks == "function") minorBreaks = minorBreaks({ min, max, minor: true });
+    minorBreaks = Array.isArray(minorBreaks) ? minorBreaks.map(normalizeBreaks) : [];
     if (typeof labels === "function") labels = breaks.map(labels);
     if (!Array.isArray(labels)) {
       labels = [];
@@ -3042,11 +3131,11 @@ class GAxis {
     if (typeof titles === "function") titles = breaks.map(titles);
     if (!Array.isArray(titles)) {
       titles = [];
-    } else if (titles.length != titles.length) {
+    } else if (titles.length != breaks.length) {
       throw new Error("Length of titles must be the same as breaks");
     }
     return {
-      majorBreaks: breaks,
+      majorBreaks,
       minorBreaks,
       ticks: breaks.map((position, i) => ({ position, label: labels[i], title: titles[i] }))
     };
@@ -3054,7 +3143,7 @@ class GAxis {
 }
 const _hoisted_1$7 = ["font-size"];
 const _hoisted_2$6 = { key: 0 };
-const _sfc_main$T = {
+const _sfc_main$W = {
   __name: "CoreText",
   props: {
     x: { type: Number, default: 0 },
@@ -3108,12 +3197,12 @@ const _sfc_main$T = {
       return {
         x: __props.x,
         y: __props.y,
-        fill: __props.color,
-        "fill-opacity": __props.alpha,
-        stroke: __props.stroke,
+        fill: __props.color || null,
+        "fill-opacity": __props.alpha == 1 ? null : __props.alpha,
+        stroke: __props.stroke || null,
         "stroke-width": __props.linewidth,
         "stroke-dasharray": parseLineType(__props.linetype),
-        "stroke-opacity": __props.alpha,
+        "stroke-opacity": __props.alpha == 1 ? null : __props.alpha,
         transform,
         textLength: __props.textLength,
         lengthAdjust: __props.textLength ? "spacingAndGlyphs" : null,
@@ -3143,7 +3232,7 @@ const _sfc_main$T = {
       }), [
         renderSlot(_ctx.$slots, "default", {}, () => [
           __props.title ? (openBlock(), createElementBlock("title", _hoisted_2$6, toDisplayString(__props.title), 1)) : createCommentVNode("", true),
-          createTextVNode(" " + toDisplayString(__props.text), 1)
+          createTextVNode(" " + toDisplayString(__props.text.replace(/ /g, " ")), 1)
         ])
       ], 16, _hoisted_1$7);
     };
@@ -3155,14 +3244,14 @@ const _hoisted_3$4 = {
   class: "vvplot-interactive",
   fill: "transparent"
 };
-const _hoisted_4$3 = ["width"];
+const _hoisted_4$3 = ["width", "cursor"];
 const _hoisted_5$2 = {
   key: 0,
   class: "vvplot-interactive",
   fill: "transparent"
 };
 const _hoisted_6$2 = ["x"];
-const _sfc_main$S = {
+const _sfc_main$V = {
   __name: "CoreAxisH",
   props: {
     coord: String,
@@ -3260,7 +3349,7 @@ const _sfc_main$S = {
           style: { transition: __props.transition }
         });
       }
-      return result.filter((t) => t.stroke != null);
+      return result.filter((t) => t.stroke != null).sort((a, b) => a.x1 - b.x1);
     });
     const tickTexts = computed(() => {
       let isTop = __props.theme.tick_position == "top";
@@ -3301,7 +3390,7 @@ const _sfc_main$S = {
           }
         });
       }
-      return result.filter((t) => t.text.fill != null);
+      return result.filter((t) => t.text.fill != null).sort((a, b) => a.text.x - b.text.x);
     });
     const iRef = useTemplateRef("i");
     function getPosition(event) {
@@ -3344,6 +3433,7 @@ const _sfc_main$S = {
       e.target.setPointerCapture(e.pointerId);
       e.target.onpointermove = (ev) => {
         movementX += ev.movementX;
+        if (!pointerMoved) return;
         let dh = oob_squish_any(-movementX, { min: boundary.hmin - hmin0, max: boundary.hmax - hmax0 });
         let { xmin, xmax, ymin, ymax } = __props.pos2coord({ hmin: hmin0 + dh, hmax: hmax0 + dh });
         Object.assign(rangePreview, { xmin, xmax, ymin, ymax });
@@ -3352,6 +3442,7 @@ const _sfc_main$S = {
         e.target.onpointermove = null;
         e.target.onpointerup = null;
         e.target.style.cursor = null;
+        if (!pointerMoved) return;
         moveTimer = setTimeout(() => {
           applyTransform(act, ev);
           movementX = 0;
@@ -3457,11 +3548,13 @@ const _sfc_main$S = {
       }
     }
     function applyTransform(act, event) {
-      if (!Object.keys(dropNull(rangePreview) ?? {}).length) return;
-      if (!emitEvent(act.emit, rangePreview, event)) {
-        emit(act.action, rangePreview, event);
+      let coord = dropNull(rangePreview) ?? {};
+      if (!Object.keys(coord).length) return;
+      let e = new PointerEvent(event.type, event);
+      if (!emitEvent(act.emit, coord, e)) {
+        emit(act.action, coord, e);
       }
-      emit("rangechange", rangePreview);
+      emit("rangechange", coord);
       let xmin, xmax, ymin, ymax;
       Object.assign(rangePreview, { xmin, xmax, ymin, ymax });
     }
@@ -3508,23 +3601,27 @@ const _sfc_main$S = {
           y1: 0,
           y2: 0
         }, axisLine.value), null, 16, _hoisted_2$5),
+        _cache[1] || (_cache[1] = createTextVNode()),
         (openBlock(true), createElementBlock(Fragment, null, renderList(tickLines.value, (tick) => {
           return openBlock(), createElementBlock("line", mergeProps({ ref_for: true }, tick), null, 16);
         }), 256)),
+        _cache[2] || (_cache[2] = createTextVNode()),
         (openBlock(true), createElementBlock(Fragment, null, renderList(tickTexts.value, (tick) => {
           return openBlock(), createElementBlock("g", mergeProps({ ref_for: true }, tick.wrapper), [
-            createVNode(_sfc_main$T, mergeProps({ ref_for: true }, tick.text), null, 16)
+            createVNode(_sfc_main$W, mergeProps({ ref_for: true }, tick.text), null, 16)
           ], 16);
         }), 256)),
+        _cache[3] || (_cache[3] = createTextVNode()),
         createElementVNode("g", _hoisted_3$4, [
           createElementVNode("rect", mergeProps({
             width: width.value,
             height: 10,
             y: -5
           }, toHandlers(axisVOn, true), {
-            class: { "vvplot-cursor-grab": __props.action.some?.((a) => a.action == "move") }
+            cursor: __props.action.some?.((a) => a.action == "move") ? "grab" : null
           }), null, 16, _hoisted_4$3)
         ]),
+        _cache[4] || (_cache[4] = createTextVNode()),
         __props.action.some?.((a) => a.action == "rescale") ? (openBlock(), createElementBlock("g", _hoisted_5$2, [
           createElementVNode("rect", {
             width: 20,
@@ -3533,6 +3630,7 @@ const _sfc_main$S = {
             style: { "cursor": "ew-resize" },
             onPointerdown: axisRescaleLeftPointerdown
           }, null, 32),
+          _cache[0] || (_cache[0] = createTextVNode()),
           createElementVNode("rect", {
             width: 20,
             height: 10,
@@ -3542,7 +3640,8 @@ const _sfc_main$S = {
             onPointerdown: axisRescaleRightPointerdown
           }, null, 40, _hoisted_6$2)
         ])) : createCommentVNode("", true),
-        axisTitle.value.text ? (openBlock(), createBlock(_sfc_main$T, normalizeProps(mergeProps({ key: 1 }, axisTitle.value)), null, 16)) : createCommentVNode("", true)
+        _cache[5] || (_cache[5] = createTextVNode()),
+        axisTitle.value.text ? (openBlock(), createBlock(_sfc_main$W, normalizeProps(mergeProps({ key: 1 }, axisTitle.value)), null, 16)) : createCommentVNode("", true)
       ], 12, _hoisted_1$6);
     };
   }
@@ -3553,14 +3652,14 @@ const _hoisted_3$3 = {
   class: "vvplot-interactive",
   fill: "transparent"
 };
-const _hoisted_4$2 = ["height"];
+const _hoisted_4$2 = ["height", "cursor"];
 const _hoisted_5$1 = {
   key: 0,
   class: "vvplot-interactive",
   fill: "transparent"
 };
 const _hoisted_6$1 = ["y"];
-const _sfc_main$R = {
+const _sfc_main$U = {
   __name: "CoreAxisV",
   props: {
     coord: String,
@@ -3658,7 +3757,7 @@ const _sfc_main$R = {
           style: { transition: __props.transition }
         });
       }
-      return result.filter((t) => t.stroke != null);
+      return result.filter((t) => t.stroke != null).sort((a, b) => a.y1 - b.y1);
     });
     const tickTexts = computed(() => {
       let isRight = __props.theme.tick_position == "right";
@@ -3699,7 +3798,7 @@ const _sfc_main$R = {
           }
         });
       }
-      return result.filter((t) => t.text.fill != null);
+      return result.filter((t) => t.text.fill != null).sort((a, b) => a.text.y - b.text.y);
     });
     const iRef = useTemplateRef("i");
     function getPosition(event) {
@@ -3742,6 +3841,7 @@ const _sfc_main$R = {
       e.target.setPointerCapture(e.pointerId);
       e.target.onpointermove = (ev) => {
         movementY += ev.movementY;
+        if (!pointerMoved) return;
         let dv = oob_squish_any(-movementY, { min: boundary.vmin - vmin0, max: boundary.vmax - vmax0 });
         let { xmin, xmax, ymin, ymax } = __props.pos2coord({ vmin: vmin0 + dv, vmax: vmax0 + dv });
         Object.assign(rangePreview, { xmin, xmax, ymin, ymax });
@@ -3750,6 +3850,7 @@ const _sfc_main$R = {
         e.target.onpointermove = null;
         e.target.onpointerup = null;
         e.target.style.cursor = null;
+        if (!pointerMoved) return;
         moveTimer = setTimeout(() => {
           applyTransform(act, ev);
           movementY = 0;
@@ -3855,11 +3956,13 @@ const _sfc_main$R = {
       }
     }
     function applyTransform(act, event) {
-      if (!Object.keys(dropNull(rangePreview) ?? {}).length) return;
-      if (!emitEvent(act.emit, rangePreview, event)) {
-        emit(act.action, rangePreview, event);
+      let coord = dropNull(rangePreview) ?? {};
+      if (!Object.keys(coord).length) return;
+      let e = new PointerEvent(event.type, event);
+      if (!emitEvent(act.emit, coord, e)) {
+        emit(act.action, coord, e);
       }
-      emit("rangechange", rangePreview);
+      emit("rangechange", coord);
       let xmin, xmax, ymin, ymax;
       Object.assign(rangePreview, { xmin, xmax, ymin, ymax });
     }
@@ -3906,23 +4009,27 @@ const _sfc_main$R = {
           y1: 0,
           y2: height.value
         }, axisLine.value), null, 16, _hoisted_2$4),
+        _cache[1] || (_cache[1] = createTextVNode()),
         (openBlock(true), createElementBlock(Fragment, null, renderList(tickLines.value, (tick) => {
           return openBlock(), createElementBlock("line", mergeProps({ ref_for: true }, tick), null, 16);
         }), 256)),
+        _cache[2] || (_cache[2] = createTextVNode()),
         (openBlock(true), createElementBlock(Fragment, null, renderList(tickTexts.value, (tick) => {
           return openBlock(), createElementBlock("g", mergeProps({ ref_for: true }, tick.wrapper), [
-            createVNode(_sfc_main$T, mergeProps({ ref_for: true }, tick.text), null, 16)
+            createVNode(_sfc_main$W, mergeProps({ ref_for: true }, tick.text), null, 16)
           ], 16);
         }), 256)),
+        _cache[3] || (_cache[3] = createTextVNode()),
         createElementVNode("g", _hoisted_3$3, [
           createElementVNode("rect", mergeProps({
             width: 10,
             height: height.value,
             x: -5
           }, toHandlers(axisVOn, true), {
-            class: { "vvplot-cursor-grab": __props.action.some?.((a) => a.action == "move") }
+            cursor: __props.action.some?.((a) => a.action == "move") ? "grab" : null
           }), null, 16, _hoisted_4$2)
         ]),
+        _cache[4] || (_cache[4] = createTextVNode()),
         __props.action.some?.((a) => a.action == "rescale") ? (openBlock(), createElementBlock("g", _hoisted_5$1, [
           createElementVNode("rect", {
             width: 10,
@@ -3931,6 +4038,7 @@ const _sfc_main$R = {
             style: { "cursor": "ns-resize" },
             onPointerdown: axisRescaleTopPointerdown
           }, null, 32),
+          _cache[0] || (_cache[0] = createTextVNode()),
           createElementVNode("rect", {
             width: 10,
             height: 20,
@@ -3940,12 +4048,13 @@ const _sfc_main$R = {
             onPointerdown: axisRescaleBottomPointerdown
           }, null, 40, _hoisted_6$1)
         ])) : createCommentVNode("", true),
-        axisTitle.value.text ? (openBlock(), createBlock(_sfc_main$T, normalizeProps(mergeProps({ key: 1 }, axisTitle.value)), null, 16)) : createCommentVNode("", true)
+        _cache[5] || (_cache[5] = createTextVNode()),
+        axisTitle.value.text ? (openBlock(), createBlock(_sfc_main$W, normalizeProps(mergeProps({ key: 1 }, axisTitle.value)), null, 16)) : createCommentVNode("", true)
       ], 12, _hoisted_1$5);
     };
   }
 };
-const _sfc_main$Q = {
+const _sfc_main$T = {
   __name: "CoreAxis",
   props: {
     theme: { type: Object, default: () => ({}) },
@@ -3954,8 +4063,8 @@ const _sfc_main$Q = {
   },
   setup(__props) {
     const axis = {
-      h: _sfc_main$S,
-      v: _sfc_main$R
+      h: _sfc_main$V,
+      v: _sfc_main$U
     };
     return (_ctx, _cache) => {
       return __props.position != "none" ? (openBlock(), createBlock(resolveDynamicComponent(axis[__props.orientation]), {
@@ -3966,7 +4075,7 @@ const _sfc_main$Q = {
     };
   }
 };
-const _sfc_main$P = {
+const _sfc_main$S = {
   __name: "CoreGridH",
   props: {
     majorBreaks: { type: Array, default: () => [] },
@@ -3985,8 +4094,8 @@ const _sfc_main$P = {
     const majorLines = computed(() => {
       let result = [];
       for (let line2 of __props.majorBreaks) {
-        if (line2?.position == null) line2 = { position: +line2 };
         let pos = __props.coord2pos({ v: line2.position }).v;
+        if (isNaN(pos)) continue;
         let tsl = pos * (__props.activeTransform.scaleV - 1) + __props.activeTransform.translateV;
         let position = pos + __props.layout.t;
         if (position + tsl < 0 || position + tsl > height.value) continue;
@@ -4007,8 +4116,9 @@ const _sfc_main$P = {
     const minorLines = computed(() => {
       let result = [];
       for (let line2 of __props.minorBreaks) {
-        if (line2?.position == null) line2 = { position: +line2 };
+        if (__props.majorBreaks.some((ml) => ml.position == line2.position)) continue;
         let pos = __props.coord2pos({ v: line2.position }).v;
+        if (isNaN(pos)) continue;
         let tsl = pos * (__props.activeTransform.scaleV - 1) + __props.activeTransform.translateV;
         let position = pos + __props.layout.t;
         if (position + tsl < 0 || position + tsl > height.value) continue;
@@ -4024,16 +4134,12 @@ const _sfc_main$P = {
           style: { transition: __props.transition }
         });
       }
-      return result.filter((l) => l.stroke !== null && majorLines.value.every((ml) => ml.y1 !== l.y1));
+      return result.filter((l) => l.stroke !== null);
     });
+    const lines = computed(() => minorLines.value.concat(majorLines.value).sort((a, b) => a.y1 - b.y1));
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("g", null, [
-        (openBlock(true), createElementBlock(Fragment, null, renderList(minorLines.value, (line2) => {
-          return openBlock(), createElementBlock("line", mergeProps({ ref_for: true }, line2, {
-            style: { transition: __props.transition }
-          }), null, 16);
-        }), 256)),
-        (openBlock(true), createElementBlock(Fragment, null, renderList(majorLines.value, (line2) => {
+        (openBlock(true), createElementBlock(Fragment, null, renderList(lines.value, (line2) => {
           return openBlock(), createElementBlock("line", mergeProps({ ref_for: true }, line2, {
             style: { transition: __props.transition }
           }), null, 16);
@@ -4042,7 +4148,7 @@ const _sfc_main$P = {
     };
   }
 };
-const _sfc_main$O = {
+const _sfc_main$R = {
   __name: "CoreGridV",
   props: {
     majorBreaks: { type: Array, default: () => [] },
@@ -4061,8 +4167,8 @@ const _sfc_main$O = {
     const majorLines = computed(() => {
       let result = [];
       for (let line2 of __props.majorBreaks) {
-        if (line2?.position == null) line2 = { position: +line2 };
         let pos = __props.coord2pos({ h: line2.position }).h;
+        if (isNaN(pos)) continue;
         let tsl = pos * (__props.activeTransform.scaleH - 1) + __props.activeTransform.translateH;
         let position = pos + __props.layout.l;
         if (position + tsl < 0 || position + tsl > width.value) continue;
@@ -4083,8 +4189,9 @@ const _sfc_main$O = {
     const minorLines = computed(() => {
       let result = [];
       for (let line2 of __props.minorBreaks) {
-        if (line2?.position == null) line2 = { position: +line2 };
+        if (__props.majorBreaks.some((ml) => ml.position == line2.position)) continue;
         let pos = __props.coord2pos({ h: line2.position }).h;
+        if (isNaN(pos)) continue;
         let tsl = pos * (__props.activeTransform.scaleH - 1) + __props.activeTransform.translateH;
         let position = pos + __props.layout.l;
         if (position + tsl < 0 || position + tsl > width.value) continue;
@@ -4100,21 +4207,21 @@ const _sfc_main$O = {
           style: { transition: __props.transition }
         });
       }
-      return result.filter((l) => l.stroke !== null && majorLines.value.every((ml) => ml.x1 !== l.x1));
+      return result.filter((l) => l.stroke !== null);
     });
+    const lines = computed(() => minorLines.value.concat(majorLines.value).sort((a, b) => a.x1 - b.x1));
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("g", null, [
-        (openBlock(true), createElementBlock(Fragment, null, renderList(minorLines.value, (line2) => {
-          return openBlock(), createElementBlock("line", mergeProps({ ref_for: true }, line2), null, 16);
-        }), 256)),
-        (openBlock(true), createElementBlock(Fragment, null, renderList(majorLines.value, (line2) => {
-          return openBlock(), createElementBlock("line", mergeProps({ ref_for: true }, line2), null, 16);
+        (openBlock(true), createElementBlock(Fragment, null, renderList(lines.value, (line2) => {
+          return openBlock(), createElementBlock("line", mergeProps({ ref_for: true }, line2, {
+            style: { transition: __props.transition }
+          }), null, 16);
         }), 256))
       ]);
     };
   }
 };
-const _sfc_main$N = {
+const _sfc_main$Q = {
   __name: "CoreCanvasCurve",
   props: {
     extendX: { type: Number, default: 0 },
@@ -4123,8 +4230,9 @@ const _sfc_main$N = {
     coord2pos: Function,
     layout: Object
   },
-  emits: ["click", "contextmenu", "pointerenter", "pointerleave", "pointermove", "pointerdown", "pointerup"],
+  emits: ["click", "contextmenu", "singleclick", "dblclick", "pointermove", "pointerdown", "pointerup", "wheel"],
   setup(__props, { expose: __expose, emit: __emit }) {
+    let events = ["click", "contextmenu", "singleclick", "dblclick", "pointermove", "pointerdown", "pointerup", "wheel"];
     const emit = __emit;
     const vBind = computed(() => ({
       width: __props.layout.fullWidth * (1 + __props.extendX * 2),
@@ -4179,17 +4287,21 @@ const _sfc_main$N = {
           }
         }
       }
-      canvas2.onclick = function(e) {
-        const rect = canvas2.getBoundingClientRect();
-        const x2 = e.clientX - rect.left;
-        const y2 = e.clientY - rect.top;
-        for (const [path, data] of path_data) {
-          if (ctx.isPointInPath(path, x2, y2)) {
-            emit("click", e, data);
-            break;
+      for (let evt of events) {
+        canvas2.addEventListener(evt, function(e) {
+          if (e._vhandled) return;
+          const rect = canvas2.getBoundingClientRect();
+          const x2 = e.clientX - rect.left;
+          const y2 = e.clientY - rect.top;
+          for (const [path, data] of path_data) {
+            if (ctx.isPointInPath(path, x2, y2)) {
+              emit(evt, e, data);
+              e._vhandled = true;
+              break;
+            }
           }
-        }
-      };
+        });
+      }
       return canvas2;
     });
     watch(layerCanvas, (node) => containerRef.value.replaceChildren(node));
@@ -4219,7 +4331,158 @@ const _sfc_main$N = {
     };
   }
 };
-const _sfc_main$M = {
+const _sfc_main$P = {
+  __name: "CoreCanvasBoxplot",
+  props: {
+    extendX: { type: Number, default: 0 },
+    extendY: { type: Number, default: 0 },
+    data: Object,
+    coord2pos: Function,
+    layout: Object
+  },
+  emits: ["click", "contextmenu", "singleclick", "dblclick", "pointermove", "pointerdown", "pointerup", "wheel"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    let events = ["click", "contextmenu", "singleclick", "dblclick", "pointermove", "pointerdown", "pointerup", "wheel"];
+    const emit = __emit;
+    const vBind = computed(() => ({
+      width: __props.layout.fullWidth * (1 + __props.extendX * 2),
+      height: __props.layout.fullHeight * (1 + __props.extendY * 2),
+      x: -__props.layout.l - __props.layout.fullWidth * __props.extendX,
+      y: -__props.layout.t - __props.layout.fullHeight * __props.extendY
+    }));
+    const containerRef = useTemplateRef("container");
+    const layerCanvas = computed(() => {
+      if (containerRef.value == null) return;
+      const canvas2 = document.createElement("canvas");
+      canvas2.width = __props.layout.fullWidth * (1 + __props.extendX * 2);
+      canvas2.height = __props.layout.fullHeight * (1 + __props.extendY * 2);
+      const ctx = canvas2.getContext("2d");
+      ctx.clearRect(0, 0, canvas2.width, canvas2.height);
+      ctx.translate(__props.layout.l + __props.layout.fullWidth * __props.extendX, __props.layout.t + __props.layout.fullHeight * __props.extendY);
+      let path_data = /* @__PURE__ */ new Map();
+      for (const group of __props.data) {
+        for (let {
+          x: x2,
+          xmin,
+          xmax,
+          y: y2,
+          ymin,
+          ymax,
+          lwisker,
+          Q1,
+          median,
+          Q3,
+          uwisker,
+          outliers,
+          $xmin,
+          $xmax,
+          $ymin,
+          $ymax,
+          fill = "white",
+          color = "black",
+          linewidth = 1,
+          linetype,
+          alpha,
+          "translate-x": translateX = 0,
+          "translate-y": translateY = 0,
+          $raw
+        } of group) {
+          if (color === "transparent") continue;
+          const { hmin: rx1, hmax: rx2, vmin: ry1, vmax: ry2 } = __props.coord2pos(x2 == null ? { ymin, ymax, xmin: Q1, xmax: Q3 } : { xmin, xmax, ymin: Q1, ymax: Q3 });
+          const { h: lx1, v: ly1 } = __props.coord2pos(x2 == null ? { y: y2, x: lwisker } : { x: x2, y: lwisker });
+          const { h: lx2, v: ly2 } = __props.coord2pos(x2 == null ? { y: y2, x: uwisker } : { x: x2, y: uwisker });
+          const { h: mx1, v: my1 } = __props.coord2pos(x2 == null ? { y: ymin, x: median } : { x: xmin, y: median });
+          const { h: mx2, v: my2 } = __props.coord2pos(x2 == null ? { y: ymax, x: median } : { x: xmax, y: median });
+          const { h: uwx1, v: uwy1 } = __props.coord2pos(x2 == null ? { y: ymin * 0.25 + ymax * 0.75, x: uwisker } : { x: xmin * 0.25 + xmax * 0.75, y: uwisker });
+          const { h: uwx2, v: uwy2 } = __props.coord2pos(x2 == null ? { y: ymin * 0.75 + ymax * 0.25, x: uwisker } : { x: xmin * 0.75 + xmax * 0.25, y: uwisker });
+          const { h: lwx1, v: lwy1 } = __props.coord2pos(x2 == null ? { y: ymin * 0.25 + ymax * 0.75, x: lwisker } : { x: xmin * 0.25 + xmax * 0.75, y: lwisker });
+          const { h: lwx2, v: lwy2 } = __props.coord2pos(x2 == null ? { y: ymin * 0.75 + ymax * 0.25, x: lwisker } : { x: xmin * 0.75 + xmax * 0.25, y: lwisker });
+          ctx.globalAlpha = alpha;
+          ctx.setLineDash(parseLineType(linetype));
+          const linepath2d = new Path2D();
+          linepath2d.moveTo(lx1 + translateX, ly1 + translateY);
+          linepath2d.lineTo(lx2 + translateX, ly2 + translateY);
+          const wiskerpath2d = new Path2D();
+          wiskerpath2d.moveTo(uwx1 + translateX, uwy1 + translateY);
+          wiskerpath2d.lineTo(uwx2 + translateX, uwy2 + translateY);
+          wiskerpath2d.moveTo(lwx1 + translateX, lwy1 + translateY);
+          wiskerpath2d.lineTo(lwx2 + translateX, lwy2 + translateY);
+          ctx.lineWidth = linewidth;
+          if (color !== "none") {
+            ctx.strokeStyle = color;
+            ctx.stroke(linepath2d);
+            ctx.stroke(wiskerpath2d);
+          }
+          const rectpath2d = new Path2D();
+          rectpath2d.rect(rx1 + translateX, ry1 + translateY, rx2 - rx1, ry2 - ry1);
+          if (fill !== "none") {
+            ctx.fillStyle = fill;
+            ctx.fill(rectpath2d);
+          }
+          if (color != null) {
+            ctx.strokeStyle = color;
+            ctx.stroke(rectpath2d);
+          }
+          path_data.set(rectpath2d, $raw);
+          const medianpath2d = new Path2D();
+          medianpath2d.moveTo(mx1 + translateX, my1 + translateY);
+          medianpath2d.lineTo(mx2 + translateX, my2 + translateY);
+          ctx.lineWidth = linewidth * 2;
+          if (color !== "none") {
+            ctx.strokeStyle = color;
+            ctx.stroke(medianpath2d);
+          }
+          for (let { x: x3, y: y3, $raw: $raw2 } of outliers) {
+            const { h: ox, v: oy } = __props.coord2pos({ x: x3, y: y3 });
+            const outlierpath2d = new Path2D();
+            outlierpath2d.arc(ox + translateX, oy + translateY, 2, 0, Math.PI * 2);
+            if (fill !== "none") {
+              ctx.fillStyle = color;
+              ctx.fill(outlierpath2d);
+            }
+            path_data.set(outlierpath2d, $raw2);
+          }
+        }
+      }
+      for (let evt of events) {
+        canvas2.addEventListener(evt, function(e) {
+          if (e._vhandled) return;
+          const rect = canvas2.getBoundingClientRect();
+          const x2 = e.clientX - rect.left;
+          const y2 = e.clientY - rect.top;
+          for (const [path, data] of path_data) {
+            if (ctx.isPointInPath(path, x2, y2)) {
+              emit(evt, e, data);
+              e._vhandled = true;
+              break;
+            }
+          }
+        });
+      }
+      return canvas2;
+    });
+    watch(layerCanvas, (node) => containerRef.value.replaceChildren(node));
+    __expose({
+      dispatchEvent: (event) => layerCanvas.value?.dispatchEvent?.(event)
+    });
+    function parseLineType(linetype) {
+      if (linetype == null) return [];
+      if (Array.isArray(linetype)) return linetype;
+      if (linetype === "solid") return [];
+      if (linetype === "dashed") return [4, 4];
+      if (linetype === "dotted") return [1, 3];
+      if (linetype === "dotdash") return [1, 3, 4, 3];
+      if (linetype === "longdash") return [8, 4];
+      if (linetype === "twodash") return [2, 2, 6, 2];
+      if (linetype.includes(" ")) return linetype;
+      return linetype.split("").map((v) => +("0x" + v));
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("foreignObject", mergeProps(vBind.value, { ref: "container" }), null, 16);
+    };
+  }
+};
+const _sfc_main$O = {
   __name: "CoreCanvasLine",
   props: {
     extendX: { type: Number, default: 0 },
@@ -4228,8 +4491,9 @@ const _sfc_main$M = {
     coord2pos: Function,
     layout: Object
   },
-  emits: ["click", "contextmenu", "pointerenter", "pointerleave", "pointermove", "pointerdown", "pointerup"],
+  emits: ["click", "contextmenu", "singleclick", "dblclick", "pointermove", "pointerdown", "pointerup", "wheel"],
   setup(__props, { expose: __expose, emit: __emit }) {
+    let events = ["click", "contextmenu", "singleclick", "dblclick", "pointermove", "pointerdown", "pointerup", "wheel"];
     const emit = __emit;
     const vBind = computed(() => ({
       width: __props.layout.fullWidth * (1 + __props.extendX * 2),
@@ -4277,17 +4541,21 @@ const _sfc_main$M = {
           }
         }
       }
-      canvas2.onclick = function(e) {
-        const rect = canvas2.getBoundingClientRect();
-        const x2 = e.clientX - rect.left;
-        const y2 = e.clientY - rect.top;
-        for (const [path, data] of path_data) {
-          if (ctx.isPointInPath(path, x2, y2)) {
-            emit("click", e, data);
-            break;
+      for (let evt of events) {
+        canvas2.addEventListener(evt, function(e) {
+          if (e._vhandled) return;
+          const rect = canvas2.getBoundingClientRect();
+          const x2 = e.clientX - rect.left;
+          const y2 = e.clientY - rect.top;
+          for (const [path, data] of path_data) {
+            if (ctx.isPointInPath(path, x2, y2)) {
+              emit(evt, e, data);
+              e._vhandled = true;
+              break;
+            }
           }
-        }
-      };
+        });
+      }
       return canvas2;
     });
     watch(layerCanvas, (node) => containerRef.value.replaceChildren(node));
@@ -4311,7 +4579,7 @@ const _sfc_main$M = {
     };
   }
 };
-const _sfc_main$L = {
+const _sfc_main$N = {
   __name: "CoreCanvasPoint",
   props: {
     extendX: { type: Number, default: 0 },
@@ -4320,8 +4588,9 @@ const _sfc_main$L = {
     coord2pos: Function,
     layout: Object
   },
-  emits: ["click", "contextmenu", "pointerenter", "pointerleave", "pointermove", "pointerdown", "pointerup"],
+  emits: ["click", "contextmenu", "singleclick", "dblclick", "pointermove", "pointerdown", "pointerup", "wheel"],
   setup(__props, { expose: __expose, emit: __emit }) {
+    let events = ["click", "contextmenu", "singleclick", "dblclick", "pointermove", "pointerdown", "pointerup", "wheel"];
     const emit = __emit;
     const paths = {
       triangle: (s) => `M0-${s * 2 / 3}L${s * 0.577},${s / 3}L-${s * 0.577},${s / 3}Z`,
@@ -4389,17 +4658,21 @@ const _sfc_main$L = {
           }
         }
       }
-      canvas2.onclick = function(e) {
-        const rect = canvas2.getBoundingClientRect();
-        const x2 = e.clientX - rect.left;
-        const y2 = e.clientY - rect.top;
-        for (const [path, data] of path_data) {
-          if (ctx.isPointInPath(path, x2, y2)) {
-            emit("click", e, data);
-            break;
+      for (let evt of events) {
+        canvas2.addEventListener(evt, function(e) {
+          if (e._vhandled) return;
+          const rect = canvas2.getBoundingClientRect();
+          const x2 = e.clientX - rect.left;
+          const y2 = e.clientY - rect.top;
+          for (const [path, data] of path_data) {
+            if (ctx.isPointInPath(path, x2, y2)) {
+              emit(evt, e, data);
+              e._vhandled = true;
+              break;
+            }
           }
-        }
-      };
+        });
+      }
       return canvas2;
     });
     watch(layerCanvas, (node) => containerRef.value.replaceChildren(node));
@@ -4411,7 +4684,7 @@ const _sfc_main$L = {
     };
   }
 };
-const _sfc_main$K = {
+const _sfc_main$M = {
   __name: "CoreCanvasPolygon",
   props: {
     extendX: { type: Number, default: 0 },
@@ -4420,8 +4693,9 @@ const _sfc_main$K = {
     coord2pos: Function,
     layout: Object
   },
-  emits: ["click", "contextmenu", "pointerenter", "pointerleave", "pointermove", "pointerdown", "pointerup"],
+  emits: ["click", "contextmenu", "singleclick", "dblclick", "pointermove", "pointerdown", "pointerup", "wheel"],
   setup(__props, { expose: __expose, emit: __emit }) {
+    let events = ["click", "contextmenu", "singleclick", "dblclick", "pointermove", "pointerdown", "pointerup", "wheel"];
     const emit = __emit;
     const vBind = computed(() => ({
       width: __props.layout.fullWidth * (1 + __props.extendX * 2),
@@ -4473,17 +4747,21 @@ const _sfc_main$K = {
           }
         }
       }
-      canvas2.onclick = function(e) {
-        const rect = canvas2.getBoundingClientRect();
-        const x2 = e.clientX - rect.left;
-        const y2 = e.clientY - rect.top;
-        for (const [path, data] of path_data) {
-          if (ctx.isPointInPath(path, x2, y2)) {
-            emit("click", e, data);
-            break;
+      for (let evt of events) {
+        canvas2.addEventListener(evt, function(e) {
+          if (e._vhandled) return;
+          const rect = canvas2.getBoundingClientRect();
+          const x2 = e.clientX - rect.left;
+          const y2 = e.clientY - rect.top;
+          for (const [path, data] of path_data) {
+            if (ctx.isPointInPath(path, x2, y2)) {
+              emit(evt, e, data);
+              e._vhandled = true;
+              break;
+            }
           }
-        }
-      };
+        });
+      }
       return canvas2;
     });
     watch(layerCanvas, (node) => containerRef.value.replaceChildren(node));
@@ -4507,7 +4785,7 @@ const _sfc_main$K = {
     };
   }
 };
-const _sfc_main$J = {
+const _sfc_main$L = {
   __name: "CoreCanvasRect",
   props: {
     extendX: { type: Number, default: 0 },
@@ -4516,8 +4794,9 @@ const _sfc_main$J = {
     coord2pos: Function,
     layout: Object
   },
-  emits: ["click", "contextmenu", "pointerenter", "pointerleave", "pointermove", "pointerdown", "pointerup"],
+  emits: ["click", "contextmenu", "singleclick", "dblclick", "pointermove", "pointerdown", "pointerup", "wheel"],
   setup(__props, { expose: __expose, emit: __emit }) {
+    let events = ["click", "contextmenu", "singleclick", "dblclick", "pointermove", "pointerdown", "pointerup", "wheel"];
     const emit = __emit;
     const vBind = computed(() => ({
       width: __props.layout.fullWidth * (1 + __props.extendX * 2),
@@ -4567,17 +4846,21 @@ const _sfc_main$J = {
           }
         }
       }
-      canvas2.onclick = function(e) {
-        const rect = canvas2.getBoundingClientRect();
-        const x2 = e.clientX - rect.left;
-        const y2 = e.clientY - rect.top;
-        for (const [path, data] of path_data) {
-          if (ctx.isPointInPath(path, x2, y2)) {
-            emit("click", e, data);
-            break;
+      for (let evt of events) {
+        canvas2.addEventListener(evt, function(e) {
+          if (e._vhandled) return;
+          const rect = canvas2.getBoundingClientRect();
+          const x2 = e.clientX - rect.left;
+          const y2 = e.clientY - rect.top;
+          for (const [path, data] of path_data) {
+            if (ctx.isPointInPath(path, x2, y2)) {
+              emit(evt, e, data);
+              e._vhandled = true;
+              break;
+            }
           }
-        }
-      };
+        });
+      }
       return canvas2;
     });
     watch(layerCanvas, (node) => containerRef.value.replaceChildren(node));
@@ -4601,7 +4884,7 @@ const _sfc_main$J = {
     };
   }
 };
-const _sfc_main$I = {
+const _sfc_main$K = {
   __name: "CoreCanvasText",
   props: {
     extendX: { type: Number, default: 0 },
@@ -4610,8 +4893,9 @@ const _sfc_main$I = {
     coord2pos: Function,
     layout: Object
   },
-  emits: ["click", "contextmenu", "pointerenter", "pointerleave", "pointermove", "pointerdown", "pointerup"],
+  emits: ["click", "contextmenu", "singleclick", "dblclick", "pointermove", "pointerdown", "pointerup", "wheel"],
   setup(__props, { expose: __expose, emit: __emit }) {
+    let events = ["click", "contextmenu", "singleclick", "dblclick", "pointermove", "pointerdown", "pointerup", "wheel"];
     const emit = __emit;
     const vBind = computed(() => ({
       width: __props.layout.fullWidth * (1 + __props.extendX * 2),
@@ -4668,20 +4952,20 @@ const _sfc_main$I = {
           } else if (textLength != null) {
             width = textLength;
           }
-          if (anchorX != null || anchorY != null) {
-            let alnX = { left: 0, center: 0.5, right: 1 }[anchorX] ?? +(anchorX ?? 0.5), alnY = { bottom: 0, center: 0.5, top: 1 }[anchorY] ?? +(anchorY ?? 0.5);
-            if (isNaN(alnX)) alnX = 0.5;
-            if (isNaN(alnY)) alnY = 0.5;
-            let w2 = width, h = height;
-            ctx.rotate(angle * Math.PI / 180);
-            ctx.translate(w2 * (0.5 - alnX), h * (alnY - 0.5));
-          } else if (dockX != null || dockY != null) {
+          if (dockX != null || dockY != null) {
             let alnX = { left: 0, center: 0.5, right: 1 }[dockX] ?? +(dockX ?? 0.5), alnY = { bottom: 0, center: 0.5, top: 1 }[dockY] ?? +(dockY ?? 0.5);
             if (isNaN(alnX)) alnX = 0.5;
             if (isNaN(alnY)) alnY = 0.5;
             let w2 = width * Math.abs(Math.cos(angle * Math.PI / 180)) + height * Math.abs(Math.sin(angle * Math.PI / 180)), h = width * Math.abs(Math.sin(angle * Math.PI / 180)) + height * Math.abs(Math.cos(angle * Math.PI / 180));
             ctx.translate(w2 * (0.5 - alnX), h * (alnY - 0.5));
             ctx.rotate(angle * Math.PI / 180);
+          } else {
+            let alnX = { left: 0, center: 0.5, right: 1 }[anchorX] ?? +(anchorX ?? 0.5), alnY = { bottom: 0, center: 0.5, top: 1 }[anchorY] ?? +(anchorY ?? 0.5);
+            if (isNaN(alnX)) alnX = 0.5;
+            if (isNaN(alnY)) alnY = 0.5;
+            let w2 = width, h = height;
+            ctx.rotate(angle * Math.PI / 180);
+            ctx.translate(w2 * (0.5 - alnX), h * (alnY - 0.5));
           }
           if (width != w) ctx.scale(width / w, 1);
           if (color !== "none") {
@@ -4695,17 +4979,21 @@ const _sfc_main$I = {
           ctx.restore();
         }
       }
-      canvas2.onclick = function(e) {
-        const rect = canvas2.getBoundingClientRect();
-        const x2 = e.clientX - rect.left;
-        const y2 = e.clientY - rect.top;
-        for (const [path, data] of path_data) {
-          if (ctx.isPointInPath(path, x2, y2)) {
-            emit("click", e, data);
-            break;
+      for (let evt of events) {
+        canvas2.addEventListener(evt, function(e) {
+          if (e._vhandled) return;
+          const rect = canvas2.getBoundingClientRect();
+          const x2 = e.clientX - rect.left;
+          const y2 = e.clientY - rect.top;
+          for (const [path, data] of path_data) {
+            if (ctx.isPointInPath(path, x2, y2)) {
+              emit(evt, e, data);
+              e._vhandled = true;
+              break;
+            }
           }
-        }
-      };
+        });
+      }
       return canvas2;
     });
     watch(layerCanvas, (node) => containerRef.value.replaceChildren(node));
@@ -4729,7 +5017,7 @@ const _sfc_main$I = {
     };
   }
 };
-const _sfc_main$H = {
+const _sfc_main$J = {
   __name: "CoreCanvasTextsegment",
   props: {
     extendX: { type: Number, default: 0 },
@@ -4738,8 +5026,9 @@ const _sfc_main$H = {
     coord2pos: Function,
     layout: Object
   },
-  emits: ["click", "contextmenu", "pointerenter", "pointerleave", "pointermove", "pointerdown", "pointerup"],
+  emits: ["click", "contextmenu", "singleclick", "dblclick", "pointermove", "pointerdown", "pointerup", "wheel"],
   setup(__props, { expose: __expose, emit: __emit }) {
+    let events = ["click", "contextmenu", "singleclick", "dblclick", "pointermove", "pointerdown", "pointerup", "wheel"];
     const emit = __emit;
     const vBind = computed(() => ({
       width: __props.layout.fullWidth * (1 + __props.extendX * 2),
@@ -4815,17 +5104,21 @@ const _sfc_main$H = {
           ctx.restore();
         }
       }
-      canvas2.onclick = function(e) {
-        const rect = canvas2.getBoundingClientRect();
-        const x2 = e.clientX - rect.left;
-        const y2 = e.clientY - rect.top;
-        for (const [path, data] of path_data) {
-          if (ctx.isPointInPath(path, x2, y2)) {
-            emit("click", e, data);
-            break;
+      for (let evt of events) {
+        canvas2.addEventListener(evt, function(e) {
+          if (e._vhandled) return;
+          const rect = canvas2.getBoundingClientRect();
+          const x2 = e.clientX - rect.left;
+          const y2 = e.clientY - rect.top;
+          for (const [path, data] of path_data) {
+            if (ctx.isPointInPath(path, x2, y2)) {
+              emit(evt, e, data);
+              e._vhandled = true;
+              break;
+            }
           }
-        }
-      };
+        });
+      }
       return canvas2;
     });
     watch(layerCanvas, (node) => containerRef.value.replaceChildren(node));
@@ -4853,17 +5146,18 @@ const _sfc_main$H = {
 };
 const canvas = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  curve: _sfc_main$N,
-  line: _sfc_main$M,
-  point: _sfc_main$L,
-  polygon: _sfc_main$K,
-  rect: _sfc_main$J,
-  stick: _sfc_main$M,
-  text: _sfc_main$I,
-  textsegment: _sfc_main$H,
-  tile: _sfc_main$J
+  boxplot: _sfc_main$P,
+  curve: _sfc_main$Q,
+  line: _sfc_main$O,
+  point: _sfc_main$N,
+  polygon: _sfc_main$M,
+  rect: _sfc_main$L,
+  stick: _sfc_main$O,
+  text: _sfc_main$K,
+  textsegment: _sfc_main$J,
+  tile: _sfc_main$L
 }, Symbol.toStringTag, { value: "Module" }));
-const _sfc_main$G = {
+const _sfc_main$I = {
   __name: "CoreSvgBlank",
   props: {
     extendX: { type: Number, default: 0 },
@@ -4879,12 +5173,121 @@ const _sfc_main$G = {
     };
   }
 };
+const _sfc_main$H = {
+  __name: "CoreTile",
+  props: {
+    x: { type: Number, default: 0 },
+    y: { type: Number, default: 0 },
+    width: { type: Number, default: 0 },
+    height: { type: Number, default: 0 },
+    fill: String,
+    color: String,
+    linewidth: Number,
+    linetype: String,
+    alpha: { type: Number, default: 1 },
+    translateX: { type: Number, default: 0 },
+    translateY: { type: Number, default: 0 }
+  },
+  setup(__props) {
+    const binds = computed(() => {
+      return {
+        x: __props.x - __props.width / 2,
+        y: __props.y - __props.height / 2,
+        width: __props.width,
+        height: __props.height,
+        fill: __props.fill || null,
+        "fill-opacity": __props.alpha == 1 ? null : __props.alpha,
+        stroke: __props.color || null,
+        "stroke-width": __props.linewidth,
+        "stroke-opacity": __props.alpha == 1 ? null : __props.alpha,
+        "stroke-dasharray": parseLineType(__props.linetype),
+        transform: __props.translateX || __props.translateY ? `translate(${__props.translateX}, ${__props.translateY})` : null
+      };
+    });
+    function parseLineType(linetype) {
+      if (linetype == null) return null;
+      if (Array.isArray(linetype)) return linetype.join(" ");
+      if (linetype === "solid") return null;
+      if (linetype === "dashed") return "4 4";
+      if (linetype === "dotted") return "1 3";
+      if (linetype === "dotdash") return "1 3 4 3";
+      if (linetype === "longdash") return "8 4";
+      if (linetype === "twodash") return "2 2 6 2";
+      if (linetype.includes(" ")) return linetype;
+      return linetype.split("").map((v) => +("0x" + v)).join(" ");
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("rect", normalizeProps(guardReactiveProps(binds.value)), null, 16);
+    };
+  }
+};
+const _sfc_main$G = {
+  __name: "CorePoint",
+  props: {
+    x: { type: Number, default: 0 },
+    y: { type: Number, default: 0 },
+    shape: String,
+    size: { type: Number, default: 6 },
+    color: String,
+    stroke: String,
+    linewidth: Number,
+    linetype: String,
+    alpha: { type: Number, default: 1 },
+    angle: { type: Number, default: 0 },
+    translateX: { type: Number, default: 0 },
+    translateY: { type: Number, default: 0 }
+  },
+  setup(__props) {
+    const paths = {
+      square: "M-0.5-0.5H0.5V0.5H-0.5Z",
+      triangle: "M0-0.667L0.577,0.333L-0.577,0.333Z",
+      diamond: "M0-0.707L0.707,0L0,0.707L-0.707,0Z",
+      plus: "M-0.1-0.5V-0.1H-0.5V0.1H-0.1V0.5H0.1V0.1H0.5V-0.1H0.1V-0.5H-0.1Z",
+      cross: "M-0.283-0.424L-0.424-0.283L-0.141,0L-0.424,0.283L-0.283,0.424L0,0.141L0.283,0.424L0.424,0.283L0.141,0L0.424,-0.283L0.283,-0.424L0,-0.141Z"
+    };
+    const binds = computed(() => {
+      let d = __props.shape?.startsWith?.("path:") ? __props.shape?.slice?.(5) : paths[__props.shape];
+      let result = {
+        fill: __props.color || null,
+        "fill-opacity": __props.alpha == 1 ? null : __props.alpha,
+        stroke: __props.stroke || null,
+        "stroke-width": __props.linewidth,
+        "stroke-opacity": __props.alpha == 1 ? null : __props.alpha,
+        "stroke-dasharray": parseLineType(__props.linetype)
+      };
+      if (d != null) {
+        let transform = `translate(${__props.x + __props.translateX},${__props.y + __props.translateY}) scale(${__props.size}) rotate(${__props.angle})`;
+        Object.assign(result, { d, transform });
+      } else {
+        let transform = __props.translateX || __props.translateY ? `translate(${__props.translateX}, ${__props.translateY})` : null;
+        Object.assign(result, { cx: __props.x, cy: __props.y, r: __props.size / 2, transform });
+      }
+      return result;
+    });
+    function parseLineType(linetype) {
+      if (linetype == null) return null;
+      if (Array.isArray(linetype)) return linetype.join(" ");
+      if (linetype === "solid") return null;
+      if (linetype === "dashed") return "4 4";
+      if (linetype === "dotted") return "1 3";
+      if (linetype === "dotdash") return "1 3 4 3";
+      if (linetype === "longdash") return "8 4";
+      if (linetype === "twodash") return "2 2 6 2";
+      if (linetype.includes(" ")) return linetype;
+      return linetype.split("").map((v) => +("0x" + v)).join(" ");
+    }
+    return (_ctx, _cache) => {
+      return binds.value.d ? (openBlock(), createElementBlock("path", normalizeProps(mergeProps({ key: 0 }, binds.value)), null, 16)) : (openBlock(), createElementBlock("circle", normalizeProps(mergeProps({ key: 1 }, binds.value)), null, 16));
+    };
+  }
+};
 const _sfc_main$F = {
-  __name: "CoreCurve",
+  __name: "CoreLine",
   props: {
-    points: { type: Array, default: () => [] },
-    interpolate: { default: "natural" },
-    fill: { type: String, default: "none" },
+    x1: { type: Number, default: 0 },
+    y1: { type: Number, default: 0 },
+    x2: { type: Number, default: 0 },
+    y2: { type: Number, default: 0 },
     color: String,
     stroke: String,
     linewidth: Number,
@@ -4895,23 +5298,18 @@ const _sfc_main$F = {
   },
   setup(__props) {
     const binds = computed(() => {
-      let interpolatorFn = interpolators[__props.interpolate] ?? natural;
       return {
-        d: line().curve(interpolatorFn)(__props.points.map((p) => [p.x, p.y])),
-        fill: __props.fill,
-        stroke: __props.color,
+        x1: __props.x1,
+        x2: __props.x2,
+        y1: __props.y1,
+        y2: __props.y2,
+        stroke: __props.color || null,
         "stroke-width": __props.linewidth,
-        "stroke-opacity": __props.alpha,
+        "stroke-opacity": __props.alpha == 1 ? null : __props.alpha,
         "stroke-dasharray": parseLineType(__props.linetype),
         transform: __props.translateX || __props.translateY ? `translate(${__props.translateX}, ${__props.translateY})` : null
       };
     });
-    const interpolators = {
-      cardinal,
-      catmullRom,
-      linear: curveLinear,
-      natural
-    };
     function parseLineType(linetype) {
       if (linetype == null) return null;
       if (Array.isArray(linetype)) return linetype.join(" ");
@@ -4925,12 +5323,12 @@ const _sfc_main$F = {
       return linetype.split("").map((v) => +("0x" + v)).join(" ");
     }
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("path", normalizeProps(guardReactiveProps(binds.value)), null, 16);
+      return openBlock(), createElementBlock("line", normalizeProps(guardReactiveProps(binds.value)), null, 16);
     };
   }
 };
 const _sfc_main$E = {
-  __name: "CoreSvgCurve",
+  __name: "CoreSvgBoxplot",
   props: {
     extendX: { type: Number, default: 0 },
     extendY: { type: Number, default: 0 },
@@ -4938,14 +5336,30 @@ const _sfc_main$E = {
     coord2pos: Function,
     layout: Object
   },
-  emits: ["click", "contextmenu", "pointerover", "pointerout", "pointerenter", "pointerleave", "pointermove", "pointerdown", "pointerup", "wheel"],
+  emits: ["click", "contextmenu", "singleclick", "pointerover", "pointerout", "pointerenter", "pointerleave", "pointermove", "pointerdown", "pointerup", "wheel"],
   setup(__props, { emit: __emit }) {
+    let events = ["click", "contextmenu", "singleclick", "pointerover", "pointerout", "pointerenter", "pointerleave", "pointermove", "pointerdown", "pointerup", "wheel"];
     const emit = __emit;
     const binds = computed(() => {
       let xlim_min = -__props.layout.fullWidth * __props.extendX - __props.layout.l, xlim_max = __props.layout.fullWidth * (1 + __props.extendX) - __props.layout.l, ylim_min = -__props.layout.fullHeight * __props.extendY - __props.layout.t, ylim_max = __props.layout.fullHeight * (1 + __props.extendY) - __props.layout.t;
       return __props.data.map((group) => group.map(({
-        points,
-        fill = "none",
+        x: x2,
+        xmin,
+        xmax,
+        y: y2,
+        ymin,
+        ymax,
+        lwisker,
+        Q1,
+        median,
+        Q3,
+        uwisker,
+        outliers,
+        $xmin,
+        $xmax,
+        $ymin,
+        $ymax,
+        fill = "white",
         color = "black",
         linewidth,
         linetype,
@@ -4954,37 +5368,123 @@ const _sfc_main$E = {
         "translate-y": translateY = 0,
         $raw
       }) => {
-        points = points.map((p) => (({ h: x2, v: y2 }) => ({ x: x2, y: y2 }))(__props.coord2pos(p)));
-        if (points.every((p) => p.x < xlim_min) || points.every((p) => p.x > xlim_max) || points.every((p) => p.y < ylim_min) || points.every((p) => p.y > ylim_max)) return null;
-        let result = {
-          points,
-          fill,
-          color,
-          linetype,
-          linewidth,
-          alpha,
-          translateX,
-          translateY,
-          onClick: (e) => emit("click", e, $raw),
-          onContextmenu: (e) => emit("contextmenu", e, $raw),
-          onPointerover: (e) => emit("pointerover", e, $raw),
-          onPointerout: (e) => emit("pointerout", e, $raw),
-          onPointerenter: (e) => emit("pointerenter", e, $raw),
-          onPointerleave: (e) => emit("pointerleave", e, $raw),
-          onPointerdown: (e) => emit("pointerdown", e, $raw),
-          onPointerup: (e) => emit("pointerup", e, $raw),
-          onPointermove: (e) => emit("pointermove", e, $raw),
-          onWheel: (e) => emit("wheel", e, $raw)
+        const { hmin: x1, hmax: x22, vmin: y1, vmax: y22 } = __props.coord2pos({ xmin: $xmin, xmax: $xmax, ymin: $ymin, ymax: $ymax });
+        if (x1 < xlim_min && x22 < xlim_min || x1 > xlim_max && x22 > xlim_max || y1 < ylim_min && y22 < ylim_min || y1 > ylim_max && y22 > ylim_max) return null;
+        const { hmin: rx1, hmax: rx2, vmin: ry1, vmax: ry2 } = __props.coord2pos(x2 == null ? { ymin, ymax, xmin: Q1, xmax: Q3 } : { xmin, xmax, ymin: Q1, ymax: Q3 });
+        const { h: lx1, v: ly1 } = __props.coord2pos(x2 == null ? { y: y2, x: lwisker } : { x: x2, y: lwisker });
+        const { h: lx2, v: ly2 } = __props.coord2pos(x2 == null ? { y: y2, x: uwisker } : { x: x2, y: uwisker });
+        const { h: mx1, v: my1 } = __props.coord2pos(x2 == null ? { y: ymin, x: median } : { x: xmin, y: median });
+        const { h: mx2, v: my2 } = __props.coord2pos(x2 == null ? { y: ymax, x: median } : { x: xmax, y: median });
+        const { h: uwx1, v: uwy1 } = __props.coord2pos(x2 == null ? { y: ymin * 0.25 + ymax * 0.75, x: uwisker } : { x: xmin * 0.25 + xmax * 0.75, y: uwisker });
+        const { h: uwx2, v: uwy2 } = __props.coord2pos(x2 == null ? { y: ymin * 0.75 + ymax * 0.25, x: uwisker } : { x: xmin * 0.75 + xmax * 0.25, y: uwisker });
+        const { h: lwx1, v: lwy1 } = __props.coord2pos(x2 == null ? { y: ymin * 0.25 + ymax * 0.75, x: lwisker } : { x: xmin * 0.25 + xmax * 0.75, y: lwisker });
+        const { h: lwx2, v: lwy2 } = __props.coord2pos(x2 == null ? { y: ymin * 0.75 + ymax * 0.25, x: lwisker } : { x: xmin * 0.75 + xmax * 0.25, y: lwisker });
+        let vbinds = {
+          rect: {
+            x: (rx1 + rx2) / 2,
+            width: rx2 - rx1,
+            y: (ry1 + ry2) / 2,
+            height: ry2 - ry1,
+            fill,
+            color,
+            linetype,
+            linewidth,
+            alpha,
+            translateX,
+            translateY
+          },
+          line: {
+            x1: lx1,
+            y1: ly1,
+            x2: lx2,
+            y2: ly2,
+            color,
+            linetype,
+            linewidth,
+            alpha,
+            translateX,
+            translateY
+          },
+          midline: {
+            x1: mx1,
+            y1: my1,
+            x2: mx2,
+            y2: my2,
+            color,
+            linetype,
+            linewidth: (linewidth ?? 1) * 2,
+            alpha,
+            translateX,
+            translateY
+          },
+          uwisker: {
+            x1: uwx1,
+            y1: uwy1,
+            x2: uwx2,
+            y2: uwy2,
+            color,
+            linetype,
+            linewidth,
+            alpha,
+            translateX,
+            translateY
+          },
+          lwisker: {
+            x1: lwx1,
+            y1: lwy1,
+            x2: lwx2,
+            y2: lwy2,
+            color,
+            linetype,
+            linewidth,
+            alpha,
+            translateX,
+            translateY
+          },
+          outliers: outliers?.map(({ x: x3, y: y3, $raw: $raw2 }) => {
+            const { h: cx, v: cy } = __props.coord2pos({ x: x3, y: y3 });
+            let vbind = {
+              x: cx,
+              y: cy,
+              shape: "circle",
+              size: 4,
+              color,
+              alpha,
+              translateX,
+              translateY
+            };
+            let von2 = Object.fromEntries(
+              events.map((evt) => [evt, (e) => emit(evt, e, $raw2)])
+            );
+            return [vbind, von2];
+          })
         };
-        return result;
+        let von = Object.fromEntries(
+          events.map((evt) => [evt, (e) => emit(evt, Object.assign(e, { _vhandled: true }), $raw)])
+        );
+        return [vbinds, von];
       }).filter((x2) => x2 != null));
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("g", null, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(binds.value, (group) => {
           return openBlock(), createElementBlock("g", null, [
-            (openBlock(true), createElementBlock(Fragment, null, renderList(group, (item) => {
-              return openBlock(), createBlock(_sfc_main$F, mergeProps({ ref_for: true }, item), null, 16);
+            (openBlock(true), createElementBlock(Fragment, null, renderList(group, ([vbinds, von]) => {
+              return openBlock(), createElementBlock("g", null, [
+                createVNode(_sfc_main$F, mergeProps({ ref_for: true }, vbinds.line), null, 16),
+                _cache[0] || (_cache[0] = createTextVNode()),
+                createVNode(_sfc_main$H, mergeProps({ ref_for: true }, vbinds.rect, toHandlers(von)), null, 16),
+                _cache[1] || (_cache[1] = createTextVNode()),
+                createVNode(_sfc_main$F, mergeProps({ ref_for: true }, vbinds.midline), null, 16),
+                _cache[2] || (_cache[2] = createTextVNode()),
+                createVNode(_sfc_main$F, mergeProps({ ref_for: true }, vbinds.uwisker), null, 16),
+                _cache[3] || (_cache[3] = createTextVNode()),
+                createVNode(_sfc_main$F, mergeProps({ ref_for: true }, vbinds.lwisker), null, 16),
+                _cache[4] || (_cache[4] = createTextVNode()),
+                (openBlock(true), createElementBlock(Fragment, null, renderList(vbinds.outliers, ([vbind, von2]) => {
+                  return openBlock(), createBlock(_sfc_main$G, mergeProps({ ref_for: true }, vbind, toHandlers(von2)), null, 16);
+                }), 256))
+              ]);
             }), 256))
           ]);
         }), 256))
@@ -4993,12 +5493,11 @@ const _sfc_main$E = {
   }
 };
 const _sfc_main$D = {
-  __name: "CoreLine",
+  __name: "CoreCurve",
   props: {
-    x1: { type: Number, default: 0 },
-    y1: { type: Number, default: 0 },
-    x2: { type: Number, default: 0 },
-    y2: { type: Number, default: 0 },
+    points: { type: Array, default: () => [] },
+    interpolate: { default: "natural" },
+    fill: { type: String, default: "none" },
     color: String,
     stroke: String,
     linewidth: Number,
@@ -5009,18 +5508,23 @@ const _sfc_main$D = {
   },
   setup(__props) {
     const binds = computed(() => {
+      let interpolatorFn = interpolators[__props.interpolate] ?? natural;
       return {
-        x1: __props.x1,
-        x2: __props.x2,
-        y1: __props.y1,
-        y2: __props.y2,
-        stroke: __props.color,
+        d: line().curve(interpolatorFn)(__props.points.map((p) => [p.x, p.y])),
+        fill: __props.fill || null,
+        stroke: __props.color || null,
         "stroke-width": __props.linewidth,
-        "stroke-opacity": __props.alpha,
+        "stroke-opacity": __props.alpha == 1 ? null : __props.alpha,
         "stroke-dasharray": parseLineType(__props.linetype),
         transform: __props.translateX || __props.translateY ? `translate(${__props.translateX}, ${__props.translateY})` : null
       };
     });
+    const interpolators = {
+      cardinal,
+      catmullRom,
+      linear: curveLinear,
+      natural
+    };
     function parseLineType(linetype) {
       if (linetype == null) return null;
       if (Array.isArray(linetype)) return linetype.join(" ");
@@ -5034,11 +5538,70 @@ const _sfc_main$D = {
       return linetype.split("").map((v) => +("0x" + v)).join(" ");
     }
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("line", normalizeProps(guardReactiveProps(binds.value)), null, 16);
+      return openBlock(), createElementBlock("path", normalizeProps(guardReactiveProps(binds.value)), null, 16);
     };
   }
 };
 const _sfc_main$C = {
+  __name: "CoreSvgCurve",
+  props: {
+    extendX: { type: Number, default: 0 },
+    extendY: { type: Number, default: 0 },
+    data: Object,
+    coord2pos: Function,
+    layout: Object
+  },
+  emits: ["click", "contextmenu", "singleclick", "pointerover", "pointerout", "pointerenter", "pointerleave", "pointermove", "pointerdown", "pointerup", "wheel"],
+  setup(__props, { emit: __emit }) {
+    let events = ["click", "contextmenu", "singleclick", "pointerover", "pointerout", "pointerenter", "pointerleave", "pointermove", "pointerdown", "pointerup", "wheel"];
+    const emit = __emit;
+    const binds = computed(() => {
+      let xlim_min = -__props.layout.fullWidth * __props.extendX - __props.layout.l, xlim_max = __props.layout.fullWidth * (1 + __props.extendX) - __props.layout.l, ylim_min = -__props.layout.fullHeight * __props.extendY - __props.layout.t, ylim_max = __props.layout.fullHeight * (1 + __props.extendY) - __props.layout.t;
+      return __props.data.map((group) => group.map(({
+        points,
+        fill = "none",
+        color = "black",
+        linewidth,
+        linetype,
+        alpha,
+        "translate-x": translateX = 0,
+        "translate-y": translateY = 0,
+        $raw,
+        interpolate
+      }) => {
+        points = points.map((p) => (({ h: x2, v: y2 }) => ({ x: x2, y: y2 }))(__props.coord2pos(p)));
+        if (points.every((p) => p.x < xlim_min) || points.every((p) => p.x > xlim_max) || points.every((p) => p.y < ylim_min) || points.every((p) => p.y > ylim_max)) return null;
+        let vbind = {
+          points,
+          fill,
+          color,
+          linetype,
+          linewidth,
+          alpha,
+          translateX,
+          translateY,
+          interpolate
+        };
+        let von = Object.fromEntries(
+          events.map((evt) => [evt, (e) => emit(evt, Object.assign(e, { _vhandled: true }), $raw)])
+        );
+        return [vbind, von];
+      }).filter((x2) => x2 != null));
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("g", null, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(binds.value, (group) => {
+          return openBlock(), createElementBlock("g", null, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(group, ([vbind, von]) => {
+              return openBlock(), createBlock(_sfc_main$D, mergeProps({ ref_for: true }, vbind, toHandlers(von)), null, 16);
+            }), 256))
+          ]);
+        }), 256))
+      ]);
+    };
+  }
+};
+const _sfc_main$B = {
   __name: "CoreSvgLine",
   props: {
     extendX: { type: Number, default: 0 },
@@ -5047,8 +5610,9 @@ const _sfc_main$C = {
     coord2pos: Function,
     layout: Object
   },
-  emits: ["click", "contextmenu", "pointerover", "pointerout", "pointerenter", "pointerleave", "pointermove", "pointerdown", "pointerup", "wheel"],
+  emits: ["click", "contextmenu", "singleclick", "pointerover", "pointerout", "pointerenter", "pointerleave", "pointermove", "pointerdown", "pointerup", "wheel"],
   setup(__props, { emit: __emit }) {
+    let events = ["click", "contextmenu", "singleclick", "pointerover", "pointerout", "pointerenter", "pointerleave", "pointermove", "pointerdown", "pointerup", "wheel"];
     const emit = __emit;
     const binds = computed(() => {
       let xlim_min = -__props.layout.fullWidth * __props.extendX - __props.layout.l, xlim_max = __props.layout.fullWidth * (1 + __props.extendX) - __props.layout.l, ylim_min = -__props.layout.fullHeight * __props.extendY - __props.layout.t, ylim_max = __props.layout.fullHeight * (1 + __props.extendY) - __props.layout.t;
@@ -5068,7 +5632,7 @@ const _sfc_main$C = {
         const { h: x1, v: y1 } = __props.coord2pos({ x: x2, y: y2 });
         const { h: x22, v: y22 } = __props.coord2pos({ x: xend, y: yend });
         if (x1 < xlim_min && x22 < xlim_min || x1 > xlim_max && x22 > xlim_max || y1 < ylim_min && y22 < ylim_min || y1 > ylim_max && y22 > ylim_max) return null;
-        let result = {
+        let vbind = {
           x1,
           x2: x22,
           y1,
@@ -5078,27 +5642,20 @@ const _sfc_main$C = {
           linewidth,
           alpha,
           translateX,
-          translateY,
-          onClick: (e) => emit("click", e, $raw),
-          onContextmenu: (e) => emit("contextmenu", e, $raw),
-          onPointerover: (e) => emit("pointerover", e, $raw),
-          onPointerout: (e) => emit("pointerout", e, $raw),
-          onPointerenter: (e) => emit("pointerenter", e, $raw),
-          onPointerleave: (e) => emit("pointerleave", e, $raw),
-          onPointerdown: (e) => emit("pointerdown", e, $raw),
-          onPointerup: (e) => emit("pointerup", e, $raw),
-          onPointermove: (e) => emit("pointermove", e, $raw),
-          onWheel: (e) => emit("wheel", e, $raw)
+          translateY
         };
-        return result;
+        let von = Object.fromEntries(
+          events.map((evt) => [evt, (e) => emit(evt, Object.assign(e, { _vhandled: true }), $raw)])
+        );
+        return [vbind, von];
       }).filter((x2) => x2 != null));
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("g", null, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(binds.value, (group) => {
           return openBlock(), createElementBlock("g", null, [
-            (openBlock(true), createElementBlock(Fragment, null, renderList(group, (item) => {
-              return openBlock(), createBlock(_sfc_main$D, mergeProps({ ref_for: true }, item), null, 16);
+            (openBlock(true), createElementBlock(Fragment, null, renderList(group, ([vbind, von]) => {
+              return openBlock(), createBlock(_sfc_main$F, mergeProps({ ref_for: true }, vbind, toHandlers(von)), null, 16);
             }), 256))
           ]);
         }), 256))
@@ -5106,66 +5663,6 @@ const _sfc_main$C = {
     };
   }
 };
-const _sfc_main$B = {
-  __name: "CorePoint",
-  props: {
-    x: { type: Number, default: 0 },
-    y: { type: Number, default: 0 },
-    shape: String,
-    size: { type: Number, default: 6 },
-    color: String,
-    stroke: String,
-    linewidth: Number,
-    linetype: String,
-    alpha: { type: Number, default: 1 },
-    angle: { type: Number, default: 0 },
-    translateX: { type: Number, default: 0 },
-    translateY: { type: Number, default: 0 }
-  },
-  setup(__props) {
-    const paths = {
-      square: "M-0.5-0.5H0.5V0.5H-0.5Z",
-      triangle: "M0-0.667L0.577,0.333L-0.577,0.333Z",
-      diamond: "M0-0.707L0.707,0L0,0.707L-0.707,0Z",
-      plus: "M-0.1-0.5V-0.1H-0.5V0.1H-0.1V0.5H0.1V0.1H0.5V-0.1H0.1V-0.5H-0.1Z",
-      cross: "M-0.283-0.424L-0.424-0.283L-0.141,0L-0.424,0.283L-0.283,0.424L0,0.141L0.283,0.424L0.424,0.283L0.141,0L0.424,-0.283L0.283,-0.424L0,-0.141Z"
-    };
-    const binds = computed(() => {
-      let d = __props.shape?.startsWith?.("path:") ? __props.shape?.slice?.(5) : paths[__props.shape];
-      let result = {
-        fill: __props.color,
-        "fill-opacity": __props.alpha,
-        stroke: __props.stroke,
-        "stroke-width": __props.linewidth,
-        "stroke-opacity": __props.alpha,
-        "stroke-dasharray": parseLineType(__props.linetype)
-      };
-      if (d != null) {
-        let transform = `translate(${__props.x + __props.translateX},${__props.y + __props.translateY}) scale(${__props.size}) rotate(${__props.angle})`;
-        Object.assign(result, { d, transform });
-      } else {
-        let transform = __props.translateX || __props.translateY ? `translate(${__props.translateX}, ${__props.translateY})` : null;
-        Object.assign(result, { cx: __props.x, cy: __props.y, r: __props.size / 2, transform });
-      }
-      return result;
-    });
-    function parseLineType(linetype) {
-      if (linetype == null) return null;
-      if (Array.isArray(linetype)) return linetype.join(" ");
-      if (linetype === "solid") return null;
-      if (linetype === "dashed") return "4 4";
-      if (linetype === "dotted") return "1 3";
-      if (linetype === "dotdash") return "1 3 4 3";
-      if (linetype === "longdash") return "8 4";
-      if (linetype === "twodash") return "2 2 6 2";
-      if (linetype.includes(" ")) return linetype;
-      return linetype.split("").map((v) => +("0x" + v)).join(" ");
-    }
-    return (_ctx, _cache) => {
-      return binds.value.d ? (openBlock(), createElementBlock("path", normalizeProps(mergeProps({ key: 0 }, binds.value)), null, 16)) : (openBlock(), createElementBlock("circle", normalizeProps(mergeProps({ key: 1 }, binds.value)), null, 16));
-    };
-  }
-};
 const _sfc_main$A = {
   __name: "CoreSvgPoint",
   props: {
@@ -5175,8 +5672,9 @@ const _sfc_main$A = {
     coord2pos: Function,
     layout: Object
   },
-  emits: ["click", "contextmenu", "pointerover", "pointerout", "pointerenter", "pointerleave", "pointermove", "pointerdown", "pointerup", "wheel"],
+  emits: ["click", "contextmenu", "singleclick", "pointerover", "pointerout", "pointerenter", "pointerleave", "pointermove", "pointerdown", "pointerup", "wheel"],
   setup(__props, { emit: __emit }) {
+    let events = ["click", "contextmenu", "singleclick", "pointerover", "pointerout", "pointerenter", "pointerleave", "pointermove", "pointerdown", "pointerup", "wheel"];
     const emit = __emit;
     const binds = computed(() => {
       let xlim_min = -__props.layout.fullWidth * __props.extendX - __props.layout.l, xlim_max = __props.layout.fullWidth * (1 + __props.extendX) - __props.layout.l, ylim_min = -__props.layout.fullHeight * __props.extendY - __props.layout.t, ylim_max = __props.layout.fullHeight * (1 + __props.extendY) - __props.layout.t;
@@ -5197,7 +5695,7 @@ const _sfc_main$A = {
       }) => {
         const { h: cx, v: cy } = __props.coord2pos({ x: x2, y: y2 });
         if (cx < xlim_min || cx > xlim_max || cy < ylim_min || cy > ylim_max) return null;
-        let result = {
+        let vbind = {
           x: cx,
           y: cy,
           shape,
@@ -5209,27 +5707,20 @@ const _sfc_main$A = {
           alpha,
           angle,
           translateX,
-          translateY,
-          onClick: (e) => emit("click", e, $raw),
-          onContextmenu: (e) => emit("contextmenu", e, $raw),
-          onPointerover: (e) => emit("pointerover", e, $raw),
-          onPointerout: (e) => emit("pointerout", e, $raw),
-          onPointerenter: (e) => emit("pointerenter", e, $raw),
-          onPointerleave: (e) => emit("pointerleave", e, $raw),
-          onPointerdown: (e) => emit("pointerdown", e, $raw),
-          onPointerup: (e) => emit("pointerup", e, $raw),
-          onPointermove: (e) => emit("pointermove", e, $raw),
-          onWheel: (e) => emit("wheel", e, $raw)
+          translateY
         };
-        return result;
+        let von = Object.fromEntries(
+          events.map((evt) => [evt, (e) => emit(evt, Object.assign(e, { _vhandled: true }), $raw)])
+        );
+        return [vbind, von];
       }).filter((x2) => x2 != null));
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("g", null, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(binds.value, (group) => {
           return openBlock(), createElementBlock("g", null, [
-            (openBlock(true), createElementBlock(Fragment, null, renderList(group, (item) => {
-              return openBlock(), createBlock(_sfc_main$B, mergeProps({ ref_for: true }, item), null, 16);
+            (openBlock(true), createElementBlock(Fragment, null, renderList(group, ([vbind, von]) => {
+              return openBlock(), createBlock(_sfc_main$G, mergeProps({ ref_for: true }, vbind, toHandlers(von)), null, 16);
             }), 256))
           ]);
         }), 256))
@@ -5253,11 +5744,11 @@ const _sfc_main$z = {
     const binds = computed(() => {
       return {
         points: __props.points.map((p) => `${p.x},${p.y}`).join(" "),
-        fill: __props.fill,
-        "fill-opacity": __props.alpha,
-        stroke: __props.color,
+        fill: __props.fill || null,
+        "fill-opacity": __props.alpha == 1 ? null : __props.alpha,
+        stroke: __props.color || null,
         "stroke-width": __props.linewidth,
-        "stroke-opacity": __props.alpha,
+        "stroke-opacity": __props.alpha == 1 ? null : __props.alpha,
         "stroke-dasharray": parseLineType(__props.linetype),
         transform: __props.translateX || __props.translateY ? `translate(${__props.translateX}, ${__props.translateY})` : null
       };
@@ -5288,8 +5779,9 @@ const _sfc_main$y = {
     coord2pos: Function,
     layout: Object
   },
-  emits: ["click", "contextmenu", "pointerover", "pointerout", "pointerenter", "pointerleave", "pointermove", "pointerdown", "pointerup", "wheel"],
+  emits: ["click", "contextmenu", "singleclick", "pointerover", "pointerout", "pointerenter", "pointerleave", "pointermove", "pointerdown", "pointerup", "wheel"],
   setup(__props, { emit: __emit }) {
+    let events = ["click", "contextmenu", "singleclick", "pointerover", "pointerout", "pointerenter", "pointerleave", "pointermove", "pointerdown", "pointerup", "wheel"];
     const emit = __emit;
     const binds = computed(() => {
       let xlim_min = -__props.layout.fullWidth * __props.extendX - __props.layout.l, xlim_max = __props.layout.fullWidth * (1 + __props.extendX) - __props.layout.l, ylim_min = -__props.layout.fullHeight * __props.extendY - __props.layout.t, ylim_max = __props.layout.fullHeight * (1 + __props.extendY) - __props.layout.t;
@@ -5306,7 +5798,7 @@ const _sfc_main$y = {
       }) => {
         points = points.map((p) => (({ h: x2, v: y2 }) => ({ x: x2, y: y2 }))(__props.coord2pos(p)));
         if (points.every((p) => p.x < xlim_min) || points.every((p) => p.x > xlim_max) || points.every((p) => p.y < ylim_min) || points.every((p) => p.y > ylim_max)) return null;
-        let result = {
+        let vbind = {
           points,
           fill,
           color,
@@ -5314,27 +5806,20 @@ const _sfc_main$y = {
           linetype,
           alpha,
           translateX,
-          translateY,
-          onClick: (e) => emit("click", e, $raw),
-          onContextmenu: (e) => emit("contextmenu", e, $raw),
-          onPointerover: (e) => emit("pointerover", e, $raw),
-          onPointerout: (e) => emit("pointerout", e, $raw),
-          onPointerenter: (e) => emit("pointerenter", e, $raw),
-          onPointerleave: (e) => emit("pointerleave", e, $raw),
-          onPointerdown: (e) => emit("pointerdown", e, $raw),
-          onPointerup: (e) => emit("pointerup", e, $raw),
-          onPointermove: (e) => emit("pointermove", e, $raw),
-          onWheel: (e) => emit("wheel", e, $raw)
+          translateY
         };
-        return result;
+        let von = Object.fromEntries(
+          events.map((evt) => [evt, (e) => emit(evt, Object.assign(e, { _vhandled: true }), $raw)])
+        );
+        return [vbind, von];
       }).filter((x2) => x2 != null));
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("g", null, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(binds.value, (group) => {
           return openBlock(), createElementBlock("g", null, [
-            (openBlock(true), createElementBlock(Fragment, null, renderList(group, (item) => {
-              return openBlock(), createBlock(_sfc_main$z, mergeProps({ ref_for: true }, item), null, 16);
+            (openBlock(true), createElementBlock(Fragment, null, renderList(group, ([vbind, von]) => {
+              return openBlock(), createBlock(_sfc_main$z, mergeProps({ ref_for: true }, vbind, toHandlers(von)), null, 16);
             }), 256))
           ]);
         }), 256))
@@ -5343,54 +5828,6 @@ const _sfc_main$y = {
   }
 };
 const _sfc_main$x = {
-  __name: "CoreTile",
-  props: {
-    x: { type: Number, default: 0 },
-    y: { type: Number, default: 0 },
-    width: { type: Number, default: 0 },
-    height: { type: Number, default: 0 },
-    fill: String,
-    color: String,
-    linewidth: Number,
-    linetype: String,
-    alpha: { type: Number, default: 1 },
-    translateX: { type: Number, default: 0 },
-    translateY: { type: Number, default: 0 }
-  },
-  setup(__props) {
-    const binds = computed(() => {
-      return {
-        x: __props.x - __props.width / 2,
-        y: __props.y - __props.height / 2,
-        width: __props.width,
-        height: __props.height,
-        fill: __props.fill,
-        "fill-opacity": __props.alpha,
-        stroke: __props.color,
-        "stroke-width": __props.linewidth,
-        "stroke-opacity": __props.alpha,
-        "stroke-dasharray": parseLineType(__props.linetype),
-        transform: __props.translateX || __props.translateY ? `translate(${__props.translateX}, ${__props.translateY})` : null
-      };
-    });
-    function parseLineType(linetype) {
-      if (linetype == null) return null;
-      if (Array.isArray(linetype)) return linetype.join(" ");
-      if (linetype === "solid") return null;
-      if (linetype === "dashed") return "4 4";
-      if (linetype === "dotted") return "1 3";
-      if (linetype === "dotdash") return "1 3 4 3";
-      if (linetype === "longdash") return "8 4";
-      if (linetype === "twodash") return "2 2 6 2";
-      if (linetype.includes(" ")) return linetype;
-      return linetype.split("").map((v) => +("0x" + v)).join(" ");
-    }
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("rect", normalizeProps(guardReactiveProps(binds.value)), null, 16);
-    };
-  }
-};
-const _sfc_main$w = {
   __name: "CoreSvgRect",
   props: {
     extendX: { type: Number, default: 0 },
@@ -5399,8 +5836,9 @@ const _sfc_main$w = {
     coord2pos: Function,
     layout: Object
   },
-  emits: ["click", "contextmenu", "pointerover", "pointerout", "pointerenter", "pointerleave", "pointermove", "pointerdown", "pointerup", "wheel"],
+  emits: ["click", "contextmenu", "singleclick", "pointerover", "pointerout", "pointerenter", "pointerleave", "pointermove", "pointerdown", "pointerup", "wheel"],
   setup(__props, { emit: __emit }) {
+    let events = ["click", "contextmenu", "singleclick", "pointerover", "pointerout", "pointerenter", "pointerleave", "pointermove", "pointerdown", "pointerup", "wheel"];
     const emit = __emit;
     const binds = computed(() => {
       let xlim_min = -__props.layout.fullWidth * __props.extendX - __props.layout.l, xlim_max = __props.layout.fullWidth * (1 + __props.extendX) - __props.layout.l, ylim_min = -__props.layout.fullHeight * __props.extendY - __props.layout.t, ylim_max = __props.layout.fullHeight * (1 + __props.extendY) - __props.layout.t;
@@ -5420,7 +5858,7 @@ const _sfc_main$w = {
       }) => {
         const { hmin: x1, hmax: x2, vmin: y1, vmax: y2 } = __props.coord2pos({ xmin, xmax, ymin, ymax });
         if (x1 < xlim_min && x2 < xlim_min || x1 > xlim_max && x2 > xlim_max || y1 < ylim_min && y2 < ylim_min || y1 > ylim_max && y2 > ylim_max) return null;
-        let result = {
+        let vbind = {
           x: (x1 + x2) / 2,
           width: x2 - x1,
           y: (y1 + y2) / 2,
@@ -5431,27 +5869,20 @@ const _sfc_main$w = {
           linewidth,
           alpha,
           translateX,
-          translateY,
-          onClick: (e) => emit("click", e, $raw),
-          onContextmenu: (e) => emit("contextmenu", e, $raw),
-          onPointerover: (e) => emit("pointerover", e, $raw),
-          onPointerout: (e) => emit("pointerout", e, $raw),
-          onPointerenter: (e) => emit("pointerenter", e, $raw),
-          onPointerleave: (e) => emit("pointerleave", e, $raw),
-          onPointerdown: (e) => emit("pointerdown", e, $raw),
-          onPointerup: (e) => emit("pointerup", e, $raw),
-          onPointermove: (e) => emit("pointermove", e, $raw),
-          onWheel: (e) => emit("wheel", e, $raw)
+          translateY
         };
-        return result;
+        let von = Object.fromEntries(
+          events.map((evt) => [evt, (e) => emit(evt, Object.assign(e, { _vhandled: true }), $raw)])
+        );
+        return [vbind, von];
       }).filter((x2) => x2 != null));
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("g", null, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(binds.value, (group) => {
           return openBlock(), createElementBlock("g", null, [
-            (openBlock(true), createElementBlock(Fragment, null, renderList(group, (item) => {
-              return openBlock(), createBlock(_sfc_main$x, mergeProps({ ref_for: true }, item), null, 16);
+            (openBlock(true), createElementBlock(Fragment, null, renderList(group, ([vbind, von]) => {
+              return openBlock(), createBlock(_sfc_main$H, mergeProps({ ref_for: true }, vbind, toHandlers(von)), null, 16);
             }), 256))
           ]);
         }), 256))
@@ -5459,7 +5890,7 @@ const _sfc_main$w = {
     };
   }
 };
-const _sfc_main$v = {
+const _sfc_main$w = {
   __name: "CoreSvgText",
   props: {
     extendX: { type: Number, default: 0 },
@@ -5468,8 +5899,9 @@ const _sfc_main$v = {
     coord2pos: Function,
     layout: Object
   },
-  emits: ["click", "contextmenu", "pointerover", "pointerout", "pointerenter", "pointerleave", "pointermove", "pointerdown", "pointerup", "wheel"],
+  emits: ["click", "contextmenu", "singleclick", "pointerover", "pointerout", "pointerenter", "pointerleave", "pointermove", "pointerdown", "pointerup", "wheel"],
   setup(__props, { emit: __emit }) {
+    let events = ["click", "contextmenu", "singleclick", "pointerover", "pointerout", "pointerenter", "pointerleave", "pointermove", "pointerdown", "pointerup", "wheel"];
     const emit = __emit;
     const binds = computed(() => {
       let xlim_min = -__props.layout.fullWidth * __props.extendX - __props.layout.l, xlim_max = __props.layout.fullWidth * (1 + __props.extendX) - __props.layout.l, ylim_min = -__props.layout.fullHeight * __props.extendY - __props.layout.t, ylim_max = __props.layout.fullHeight * (1 + __props.extendY) - __props.layout.t;
@@ -5477,7 +5909,7 @@ const _sfc_main$v = {
         x: x2,
         y: y2,
         size = 4,
-        label = "",
+        label,
         title,
         color,
         stroke,
@@ -5494,6 +5926,7 @@ const _sfc_main$v = {
         "text-length": textLength,
         $raw
       }) => {
+        if (label == null) return null;
         const { h: tx, v: ty } = __props.coord2pos({ x: x2, y: y2 });
         if (tx < xlim_min || tx > xlim_max || ty < ylim_min || ty > ylim_max) return null;
         if (typeof textLength == "object") {
@@ -5501,7 +5934,7 @@ const _sfc_main$v = {
           let { h: h1, v: v1 } = __props.coord2pos({ x: x2 + lx / 2, y: y2 + ly / 2 }), { h: h2, v: v2 } = __props.coord2pos({ x: x2 - lx / 2, y: y2 - ly / 2 });
           textLength = Math.hypot(h1 - h2 || 0, v1 - v2 || 0);
         }
-        let result = {
+        let vbind = {
           x: tx,
           y: ty,
           text: String(label),
@@ -5519,27 +5952,20 @@ const _sfc_main$v = {
           anchorY,
           dockX,
           dockY,
-          textLength,
-          onClick: (e) => emit("click", e, $raw),
-          onContextmenu: (e) => emit("contextmenu", e, $raw),
-          onPointerover: (e) => emit("pointerover", e, $raw),
-          onPointerout: (e) => emit("pointerout", e, $raw),
-          onPointerenter: (e) => emit("pointerenter", e, $raw),
-          onPointerleave: (e) => emit("pointerleave", e, $raw),
-          onPointerdown: (e) => emit("pointerdown", e, $raw),
-          onPointerup: (e) => emit("pointerup", e, $raw),
-          onPointermove: (e) => emit("pointermove", e, $raw),
-          onWheel: (e) => emit("wheel", e, $raw)
+          textLength
         };
-        return result;
-      }).filter((x2) => x2?.text != null));
+        let von = Object.fromEntries(
+          events.map((evt) => [evt, (e) => emit(evt, Object.assign(e, { _vhandled: true }), $raw)])
+        );
+        return [vbind, von];
+      }).filter((x2) => x2 != null));
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("g", null, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(binds.value, (group) => {
           return openBlock(), createElementBlock("g", null, [
-            (openBlock(true), createElementBlock(Fragment, null, renderList(group, (item) => {
-              return openBlock(), createBlock(_sfc_main$T, mergeProps({ ref_for: true }, item), null, 16);
+            (openBlock(true), createElementBlock(Fragment, null, renderList(group, ([vbind, von]) => {
+              return openBlock(), createBlock(_sfc_main$W, mergeProps({ ref_for: true }, vbind, toHandlers(von)), null, 16);
             }), 256))
           ]);
         }), 256))
@@ -5547,7 +5973,7 @@ const _sfc_main$v = {
     };
   }
 };
-const _sfc_main$u = {
+const _sfc_main$v = {
   __name: "CoreSvgTextsegment",
   props: {
     extendX: { type: Number, default: 0 },
@@ -5556,8 +5982,9 @@ const _sfc_main$u = {
     coord2pos: Function,
     layout: Object
   },
-  emits: ["click", "contextmenu", "pointerover", "pointerout", "pointerenter", "pointerleave", "pointermove", "pointerdown", "pointerup", "wheel"],
+  emits: ["click", "contextmenu", "singleclick", "pointerover", "pointerout", "pointerenter", "pointerleave", "pointermove", "pointerdown", "pointerup", "wheel"],
   setup(__props, { emit: __emit }) {
+    let events = ["click", "contextmenu", "singleclick", "pointerover", "pointerout", "pointerenter", "pointerleave", "pointermove", "pointerdown", "pointerup", "wheel"];
     const emit = __emit;
     const binds = computed(() => {
       let xlim_min = -__props.layout.fullWidth * __props.extendX - __props.layout.l, xlim_max = __props.layout.fullWidth * (1 + __props.extendX) - __props.layout.l, ylim_min = -__props.layout.fullHeight * __props.extendY - __props.layout.t, ylim_max = __props.layout.fullHeight * (1 + __props.extendY) - __props.layout.t;
@@ -5567,7 +5994,7 @@ const _sfc_main$u = {
         y: y2,
         yend,
         size = 4,
-        label = "",
+        label,
         title,
         color,
         stroke,
@@ -5579,12 +6006,13 @@ const _sfc_main$u = {
         "text-length": textLength,
         $raw
       }) => {
+        if (label == null) return null;
         const { h: x1, v: y1 } = __props.coord2pos({ x: x2, y: y2 });
         const { h: x22, v: y22 } = __props.coord2pos({ x: xend, y: yend });
         if (x1 < xlim_min && x22 < xlim_min || x1 > xlim_max && x22 > xlim_max || y1 < ylim_min && y22 < ylim_min || y1 > ylim_max && y22 > ylim_max) return null;
         let parts = splitLabel(String(label));
         let dx = (xend - x2) / (parts.length - 1 || 1), dy = (yend - y2) / (parts.length - 1 || 1);
-        let content = parts.map((v, i) => {
+        let content = parts.map((label2, i) => {
           let $x = x2 + i * dx, $y = y2 + i * dy;
           const { h: tx, v: ty } = __props.coord2pos({ x: $x, y: $y });
           if (typeof textLength == "object") {
@@ -5592,21 +6020,17 @@ const _sfc_main$u = {
             let { h: h1, v: v1 } = __props.coord2pos({ x: $x + lx / 2, y: $y + ly / 2 }), { h: h2, v: v2 } = __props.coord2pos({ x: $x - lx / 2, y: $y - ly / 2 });
             textLength = Math.hypot(h1 - h2 || 0, v1 - v2 || 0);
           }
-          return {
-            bind: {
-              x: tx,
-              y: ty,
-              "text-anchor": "middle",
-              "alignment-baseline": "central",
-              textLength,
-              lengthAdjust: textLength ? "spacingAndGlyphs" : null
-            },
-            label: v
+          let vbind2 = {
+            x: tx,
+            y: ty,
+            "text-anchor": "middle",
+            "alignment-baseline": "central",
+            textLength,
+            lengthAdjust: textLength ? "spacingAndGlyphs" : null
           };
+          return [vbind2, label2];
         });
-        let result = {
-          content,
-          title: String(title ?? label),
+        let vbind = {
           fill: color,
           "font-size": size * 4,
           stroke,
@@ -5614,19 +6038,12 @@ const _sfc_main$u = {
           "stroke-dasharray": linetype,
           "fill-opacity": alpha,
           "stroke-opacity": alpha,
-          transform: translateX || translateY ? `translate(${translateX}, ${translateY})` : null,
-          onClick: (e) => emit("click", e, $raw),
-          onContextmenu: (e) => emit("contextmenu", e, $raw),
-          onPointerover: (e) => emit("pointerover", e, $raw),
-          onPointerout: (e) => emit("pointerout", e, $raw),
-          onPointerenter: (e) => emit("pointerenter", e, $raw),
-          onPointerleave: (e) => emit("pointerleave", e, $raw),
-          onPointerdown: (e) => emit("pointerdown", e, $raw),
-          onPointerup: (e) => emit("pointerup", e, $raw),
-          onPointermove: (e) => emit("pointermove", e, $raw),
-          onWheel: (e) => emit("wheel", e, $raw)
+          transform: translateX || translateY ? `translate(${translateX}, ${translateY})` : null
         };
-        return result;
+        let von = Object.fromEntries(
+          events.map((evt) => [evt, (e) => emit(evt, Object.assign(e, { _vhandled: true }), $raw)])
+        );
+        return [vbind, von, content, String(title ?? label)];
       }).filter((x2) => x2 != null));
     });
     function splitLabel(label) {
@@ -5647,15 +6064,16 @@ const _sfc_main$u = {
       return openBlock(), createElementBlock("g", null, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(binds.value, (group) => {
           return openBlock(), createElementBlock("g", null, [
-            (openBlock(true), createElementBlock(Fragment, null, renderList(group, (item) => {
-              return openBlock(), createElementBlock("text", mergeProps({ ref_for: true }, { ...item, content: null, title: null }), [
-                createElementVNode("title", null, toDisplayString(item.title), 1),
-                (openBlock(true), createElementBlock(Fragment, null, renderList(item.content, (span) => {
+            (openBlock(true), createElementBlock(Fragment, null, renderList(group, ([vbind, von, content, title]) => {
+              return openBlock(), createElementBlock("text", mergeProps({ ref_for: true }, vbind, toHandlers(von, true)), [
+                createElementVNode("title", null, toDisplayString(title), 1),
+                _cache[0] || (_cache[0] = createTextVNode()),
+                (openBlock(true), createElementBlock(Fragment, null, renderList(content, ([vbind2, label]) => {
                   return openBlock(), createElementBlock(Fragment, null, [
-                    span.label ? (openBlock(), createElementBlock("tspan", mergeProps({
+                    label ? (openBlock(), createElementBlock("tspan", mergeProps({
                       key: 0,
                       ref_for: true
-                    }, span.bind), toDisplayString(span.label), 17)) : createCommentVNode("", true)
+                    }, vbind2), toDisplayString(label), 17)) : createCommentVNode("", true)
                   ], 64);
                 }), 256))
               ], 16);
@@ -5668,37 +6086,41 @@ const _sfc_main$u = {
 };
 const svg = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  blank: _sfc_main$G,
-  curve: _sfc_main$E,
-  line: _sfc_main$C,
+  blank: _sfc_main$I,
+  boxplot: _sfc_main$E,
+  curve: _sfc_main$C,
+  line: _sfc_main$B,
   point: _sfc_main$A,
   polygon: _sfc_main$y,
-  rect: _sfc_main$w,
-  stick: _sfc_main$C,
-  text: _sfc_main$v,
-  textsegment: _sfc_main$u,
-  tile: _sfc_main$w
+  rect: _sfc_main$x,
+  stick: _sfc_main$B,
+  text: _sfc_main$w,
+  textsegment: _sfc_main$v,
+  tile: _sfc_main$x
 }, Symbol.toStringTag, { value: "Module" }));
-const _sfc_main$t = {
+const _sfc_main$u = {
   __name: "CoreLayer",
   props: {
     data: Object,
     geom: String,
-    render: { type: String, default: "auto" }
+    render: String,
+    defaultRender: { type: String, default: "auto" }
   },
   setup(__props, { expose: __expose }) {
     const geoms = { svg, canvas };
     const rend = computed(() => {
-      if (__props.render == "auto") {
+      let render = __props.render ?? __props.defaultRender;
+      if (render == "auto") {
         let n_data = __props.data.map((d) => d.length).reduce((a, b) => a + b, 0);
         return n_data > 1e3 ? "canvas" : "svg";
       }
-      if (geoms[__props.render][__props.geom] != null) return __props.render;
+      if (geoms[render][__props.geom] != null) return render;
       return "svg";
     });
     const layer = useTemplateRef("layer");
-    const style = computed(() => rend.value == "canvas" ? "pointer-events:none;" : "");
+    const style = computed(() => rend.value == "canvas" ? "pointer-events: none;" : "");
     __expose({
+      render: rend,
       dispatchEvent: (e) => layer.value?.dispatchEvent?.(e)
     });
     return (_ctx, _cache) => {
@@ -5716,7 +6138,7 @@ const _hoisted_1$4 = {
   class: "vvplot-interactive"
 };
 const _hoisted_2$3 = ["onPointerdown"];
-const _sfc_main$s = {
+const _sfc_main$t = {
   __name: "CoreSelection",
   props: /* @__PURE__ */ mergeModels({
     coord2pos: Function,
@@ -5762,12 +6184,12 @@ const _sfc_main$s = {
         y: vmin,
         width,
         height,
-        fill: __props.theme?.background ?? "#00000020",
+        fill: __props.theme?.background ?? "transparent",
         "fill-opacity": __props.theme?.opacity,
-        stroke: __props.theme?.line_color ?? "transparent",
+        stroke: __props.theme?.line_color ?? "none",
         "stroke-width": __props.theme?.line_width,
         "stroke-opacity": __props.theme?.opacity,
-        style: config.move ? "cursor:move;" : "pointer:events-none;"
+        style: config.move ? "cursor:move;" : "pointer-events:none;"
       };
       if (config.resize) {
         if (pos.hmin != null)
@@ -5887,7 +6309,7 @@ const _sfc_main$s = {
 const _hoisted_1$3 = ["height", "width"];
 const _hoisted_2$2 = ["y1", "y2"];
 const _hoisted_3$2 = ["y"];
-const _sfc_main$r = {
+const _sfc_main$s = {
   __name: "CoreGuideGradientbar",
   props: {
     scales: Array,
@@ -5927,7 +6349,7 @@ const _sfc_main$r = {
         ref: "svg"
       }, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(gradient_values.value, (v, i) => {
-          return openBlock(), createBlock(_sfc_main$x, mergeProps({
+          return openBlock(), createBlock(_sfc_main$H, mergeProps({
             width: 10,
             height: 3.1,
             x: 10,
@@ -5935,6 +6357,7 @@ const _sfc_main$r = {
             alpha: __props.appearance.alpha
           }, { ref_for: true }, v), null, 16, ["y", "alpha"]);
         }), 256)),
+        _cache[1] || (_cache[1] = createTextVNode()),
         (openBlock(true), createElementBlock(Fragment, null, renderList(guide_breaks.value, (v, i) => {
           return openBlock(), createElementBlock("g", null, [
             createElementVNode("line", {
@@ -5944,6 +6367,7 @@ const _sfc_main$r = {
               y2: 10 + (1 - v.position) * 90,
               stroke: "black"
             }, null, 8, _hoisted_2$2),
+            _cache[0] || (_cache[0] = createTextVNode()),
             createElementVNode("text", {
               x: "20",
               y: 10 + (1 - v.position) * 90,
@@ -5957,12 +6381,12 @@ const _sfc_main$r = {
 };
 const element = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  curve: _sfc_main$F,
-  line: _sfc_main$D,
-  point: _sfc_main$B,
+  curve: _sfc_main$D,
+  line: _sfc_main$F,
+  point: _sfc_main$G,
   polygon: _sfc_main$z,
-  text: _sfc_main$T,
-  tile: _sfc_main$x
+  text: _sfc_main$W,
+  tile: _sfc_main$H
 }, Symbol.toStringTag, { value: "Module" }));
 const _hoisted_1$2 = ["height", "width"];
 const _hoisted_2$1 = ["transform"];
@@ -5972,7 +6396,7 @@ const _hoisted_4$1 = {
   y: "10",
   "alignment-baseline": "central"
 };
-const _sfc_main$q = {
+const _sfc_main$r = {
   __name: "CoreGuideLegendkey",
   props: {
     scales: Array,
@@ -6026,6 +6450,7 @@ const _sfc_main$q = {
                 return openBlock(), createBlock(resolveDynamicComponent(element[geom]), mergeProps({ ref_for: true }, { ...bind, ...v.bind }), null, 16);
               }), 256))
             ]),
+            _cache[0] || (_cache[0] = createTextVNode()),
             createElementVNode("text", _hoisted_4$1, toDisplayString(v.label), 1)
           ], 8, _hoisted_2$1);
         }), 256))
@@ -6033,7 +6458,7 @@ const _sfc_main$q = {
     };
   }
 };
-const _sfc_main$p = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
+const _sfc_main$q = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
   __name: "CoreGuide",
   props: {
     scales: Array,
@@ -6041,8 +6466,8 @@ const _sfc_main$p = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
   },
   setup(__props) {
     const guide = {
-      legendkey: _sfc_main$q,
-      gradientbar: _sfc_main$r
+      legendkey: _sfc_main$r,
+      gradientbar: _sfc_main$s
     };
     const title = computed(() => {
       return __props.scales.map(([s]) => s.title).find((v) => v != null);
@@ -6064,28 +6489,29 @@ const _sfc_main$p = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
       let result = { scales: __props.scales.map(([s]) => s) };
       if (__props.type == "legendkey") {
         result.appearances = {
-          text: obj_merge(__props.scales.flatMap(([s, a]) => [a.text])),
-          line: obj_merge(__props.scales.flatMap(([s, a]) => [a.line, a.linerange, a.curve])),
-          point: obj_merge(__props.scales.flatMap(([s, a]) => [a.point])),
-          tile: obj_merge(__props.scales.flatMap(([s, a]) => [a.rect, a.tile, a.polygon]))
+          text: obj_merge(...__props.scales.flatMap(([s, a]) => [a.text])),
+          line: obj_merge(...__props.scales.flatMap(([s, a]) => [a.line, a.linerange, a.curve])),
+          point: obj_merge(...__props.scales.flatMap(([s, a]) => [a.point])),
+          tile: obj_merge(...__props.scales.flatMap(([s, a]) => [a.rect, a.tile, a.polygon]))
         };
       } else if (__props.type == "gradientbar") {
         let max = __props.scales.map(([s]) => s.limits?.max).filter((v) => v != null).reduce((a, b) => Math.min(a, b), Infinity);
         let min = __props.scales.map(([s]) => s.limits?.min).filter((v) => v != null).reduce((a, b) => Math.max(a, b), -Infinity);
         result.limits = { min, max };
-        result.appearance = obj_merge(__props.scales.flatMap(([s, a]) => Object.values(a)));
+        result.appearance = obj_merge(...__props.scales.flatMap(([s, a]) => Object.values(a)));
       }
       return result;
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
         createElementVNode("span", null, toDisplayString(title.value), 1),
+        _cache[0] || (_cache[0] = createTextVNode()),
         (openBlock(), createBlock(resolveDynamicComponent(guide[__props.type]), mergeProps(binds.value, { breaks: breaks.value }), null, 16, ["breaks"]))
       ], 64);
     };
   }
 });
-const _sfc_main$o = {
+const _sfc_main$p = {
   __name: "CoreLegend",
   props: {
     theme: { type: Object, default: () => ({}) },
@@ -6093,7 +6519,10 @@ const _sfc_main$o = {
   },
   setup(__props) {
     const guides = computed(() => {
-      let scale_fns = Array.from(__props.scales.keys());
+      let guide_scales = new Map(
+        Array.from(__props.scales).filter(([fn]) => fn.legend !== false)
+      );
+      let scale_fns = Array.from(guide_scales.keys());
       let keys = scale_fns.map((s) => s.key);
       let j = 1;
       for (let i in keys) {
@@ -6102,7 +6531,7 @@ const _sfc_main$o = {
       }
       let types = scale_fns.map((s) => getGuideType(s));
       let groups = interaction(keys, types);
-      return Map.groupBy(__props.scales, (s, i) => groups.categories[groups[i]]);
+      return Map.groupBy(guide_scales, (s, i) => groups.categories[groups[i]]);
     });
     function getGuideType(scale) {
       if (scale == null) return null;
@@ -6118,7 +6547,7 @@ const _sfc_main$o = {
         style: normalizeStyle({ gap: __props.theme.spacing + "px" })
       }, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(guides.value, ([[key, type], scales]) => {
-          return openBlock(), createBlock(_sfc_main$p, {
+          return openBlock(), createBlock(_sfc_main$q, {
             key,
             type,
             scales
@@ -6136,12 +6565,11 @@ const _hoisted_5 = ["transform", "clip-path"];
 const _hoisted_6 = ["transform"];
 const _hoisted_7 = ["clip-path"];
 const _hoisted_8 = { key: 1 };
-const _sfc_main$n = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
+const _sfc_main$o = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
   __name: "CorePlot",
   props: /* @__PURE__ */ mergeModels({
     schema: Object,
     layers: Array,
-    range: Object,
     minRange: Object,
     expandAdd: Object,
     flip: Boolean,
@@ -6153,6 +6581,7 @@ const _sfc_main$n = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
     scales: Object,
     axes: { type: Array, default: () => [] },
     theme: Object,
+    render: String,
     clip: Boolean,
     action: { type: Array, default: () => [] },
     selections: { type: Array, default: () => [] },
@@ -6196,24 +6625,26 @@ const _sfc_main$n = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
       selectionPreview.value = modelValue;
       selectionPreviewTheme.value = theme;
     }
+    const _selectionPreviewTheme = computed(() => Object.assign({}, __props.theme?.selection, selectionPreviewTheme.value));
     function onselectend() {
       selectionPreview.value = {};
     }
     const transition = useModel(__props, "transition");
     const svgRef = useTemplateRef("svg");
     const layers = useTemplateRef("layers");
-    const { width, height } = useElementSize(svgRef);
+    const width = ref(0), height = ref(0);
+    useResizeObserver(svgRef, (entries) => {
+      let { width: w, height: h } = entries[0].contentRect;
+      width.value = w;
+      height.value = h;
+    });
     const gplot = computed(() => new GPlot(__props.schema, props.layers));
     const vplot = computed(() => {
-      return gplot.value.useScales(__props.scales, __props.levels).useCoordLevels(__props.coordLevels).render(
-        range,
-        __props.expandAdd,
-        props.minRange
-      );
+      return gplot.value.useScales(__props.scales, __props.levels).useCoordLevels(__props.coordLevels).render(range, __props.expandAdd, props.minRange);
     });
     const panel = reactiveComputed(() => {
-      let padding = Object.fromEntries(["left", "right", "top", "bottom"].map((p) => [p, __props.paddings[p] ? __props.theme.plot.padding[p] || 0 : 0]));
-      let l = __props.theme.plot.margin.left + padding.left, r = __props.theme.plot.margin.right + padding.right, t = __props.theme.plot.margin.top + padding.top, b = __props.theme.plot.margin.bottom + padding.bottom;
+      let padding = Object.fromEntries(["left", "right", "top", "bottom"].map((p) => [p, __props.paddings[p] && __props.theme.plot.padding[p] || 0]));
+      let l = +__props.theme.plot.margin.left + padding.left, r = +__props.theme.plot.margin.right + padding.right, t = +__props.theme.plot.margin.top + padding.top, b = +__props.theme.plot.margin.bottom + padding.bottom;
       if (t + b > height.value) {
         t = height.value * (t / (t + b));
         b = height.value - t;
@@ -6324,15 +6755,15 @@ const _sfc_main$n = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
     function _coord2pos({ value, min, max } = {}, { oob = oob_squish_infinite } = {}, scale, rev, length, boundary) {
       let result = {};
       if (value != null) {
-        result.value = oob(length * (rev ? 1 - scale(value) : scale(value)), boundary);
+        result.value = length ? oob(length * (rev ? 1 - scale(value) : scale(value)), boundary) : 0;
       }
       if (min == null && max == null) return result;
       if (rev) {
-        if (max != null) result.min = oob(length * (1 - scale(max)), boundary);
-        if (min != null) result.max = oob(length * (1 - scale(min)), boundary);
+        if (max != null) result.min = length ? oob(length * (1 - scale(max)), boundary) : 0;
+        if (min != null) result.max = length ? oob(length * (1 - scale(min)), boundary) : 0;
       } else {
-        if (min != null) result.min = oob(length * scale(min), boundary);
-        if (max != null) result.max = oob(length * scale(max), boundary);
+        if (min != null) result.min = length ? oob(length * scale(min), boundary) : 0;
+        if (max != null) result.max = length ? oob(length * scale(max), boundary) : 0;
       }
       return result;
     }
@@ -6400,7 +6831,7 @@ const _sfc_main$n = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
     }
     function getPadding({ min: $min, max: $max } = {}, { min: mmin = 0, max: mmax = 0 } = {}) {
       let $interval = $max - $min;
-      let min = $min - mmin * $interval, max = $max + mmax * $interval, interval = max - min;
+      let min = +$min - mmin * $interval, max = +$max + mmax * $interval, interval = max - min;
       return {
         min: interval == 0 ? 0 : ($min - min) / interval,
         max: interval == 0 ? 0 : (max - $max) / interval
@@ -6416,10 +6847,34 @@ const _sfc_main$n = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
       let rect = svgRef.value.getBoundingClientRect();
       return event.clientX > rect.left + panel.l && event.clientX < rect.right - panel.r && event.clientY > rect.top + panel.t && event.clientY < rect.bottom - panel.b;
     }
+    function dispatchPointerEvent(e) {
+      if (!layers.value || e._vhandled || !isInPlot(e)) return e;
+      let canvasLayers = Array.from(layers.value).filter((l) => l.render == "canvas");
+      if (!canvasLayers.length) return e;
+      let options = {};
+      for (let key in e) options[key] = e[key];
+      options.bubbles = false;
+      let event = new PointerEvent(e.type, options);
+      for (let key of Object.keys(e)) {
+        let prop = Object.getOwnPropertyDescriptor(event, key);
+        if (prop && !prop.writable && !prop.set) continue;
+        event[key] = e[key];
+      }
+      for (let i = layers.value.length - 1; i >= 0; i--)
+        if (layers.value[i].dispatchEvent(event) === false) e.preventDefault();
+      for (let key of Object.keys(event)) {
+        let prop = Object.getOwnPropertyDescriptor(event, key);
+        if (prop && !prop.writable && !prop.set) continue;
+        e[key] = event[key];
+      }
+      return event._vhandled ? event : e;
+    }
     let moveTimer, movementX = 0, movementY = 0;
     function svgPointerdown(e) {
-      let coord = getCoord(e);
-      emit("pointerdown", e, coord);
+      let evt = dispatchPointerEvent(e), coord = getCoord(e);
+      emit("pointerdown", evt, coord);
+      if (evt.defaultPrevented) e.preventDefault();
+      if (props.clip && !isInPlot(e)) return;
       let svg2 = e.currentTarget;
       let pointerMoved = false;
       function detectMove(ev) {
@@ -6432,16 +6887,10 @@ const _sfc_main$n = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
       e.target.addEventListener("pointerup", function(ev) {
         e.target.removeEventListener("pointermove", detectMove);
         if (!pointerMoved) {
-          let coord2 = getCoord(ev);
-          emit("singleclick", new PointerEvent("singleclick", ev), coord2);
-          if (isInPlot(e) && layers.value) {
-            if (ev.button == 0) {
-              layers.value.forEach((layer) => layer.dispatchEvent(new PointerEvent("click", ev)));
-            }
-          }
+          let event = new PointerEvent("singleclick", ev);
+          ev.target.dispatchEvent(event);
         }
       }, { once: true });
-      if (props.clip && !isInPlot(e)) return;
       let sel = props.selections.find((s) => ["buttons", "ctrlKey", "shiftKey", "altKey", "metaKey"].every((k) => s[k] == e[k]));
       if (sel) {
         let { x: x2 = false, y: y2 = false, "min-range-x": mrx = 0, "min-range-y": mry = 0 } = sel;
@@ -6449,8 +6898,8 @@ const _sfc_main$n = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
         svg2.style.userSelect = "none";
         let xboundary = (({ xmin: min, xmax: max }) => ({ min, max }))(sel), yboundary = (({ ymin: min, ymax: max }) => ({ min, max }))(sel);
         e.target.onpointermove = (ev) => {
+          if (!x2 && !y2 || !pointerMoved) return;
           let coordMove = getCoord(ev);
-          if (!x2 && !y2) return;
           let res = {};
           if (x2) {
             let xstart = oob_squish_any(coord.x, xboundary), xend = oob_squish_any(oob_squish_any(coordMove.x, coordMove.x > xstart ? { min: plus(xstart, mrx) } : { max: plus(xstart, -mrx) }), xboundary);
@@ -6506,12 +6955,12 @@ const _sfc_main$n = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
             }
           }
           if (!pointerMoved && sel.dismissible !== false) {
-            if (ev.defaultPrevented || ev.handled) return;
+            if (ev.defaultPrevented) return;
             let model = sel.modelValue;
             if (sel.dismissible !== true && ["xmin", "xmax", "ymin", "ymax"].every((k) => model?.[k] == null)) return;
             let res = {}, event = new PointerEvent("select", e);
             sel["onUpdate:modelValue"]?.(res);
-            if (!emitEvent(sel["onCancel"], dropNull(res), event)) {
+            if (!emitEvent(sel["onDismiss"], dropNull(res), event)) {
               emit("select", dropNull(res), event);
             }
           }
@@ -6557,8 +7006,9 @@ const _sfc_main$n = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
     }
     let wheelDelta = 0, wheelTimer;
     function svgWheel(e) {
-      let coord = getCoord(e);
-      emit("wheel", e, coord);
+      let evt = dispatchPointerEvent(e), coord = getCoord(e);
+      emit("wheel", evt, coord);
+      if (evt.defaultPrevented) e.preventDefault();
       if (props.clip && !isInPlot(e)) return;
       let act = props.action.find((a) => ["zoom", "nudge"].includes(a.action) && ["ctrlKey", "shiftKey", "altKey", "metaKey"].every((k) => a[k] == e[k]));
       if (!act || !act.x && !act.y) return;
@@ -6634,18 +7084,22 @@ const _sfc_main$n = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
       if (!dh && !dv && sh == 1 && sv == 1) transition.value = null;
     }, { deep: true });
     function applyTransform(act, event) {
-      if (!Object.keys(dropNull(rangePreview) ?? {}).length) return;
-      if (!emitEvent(act.emit, rangePreview, event)) {
-        emit(act.action, rangePreview, event);
+      let coord = dropNull(rangePreview) ?? {};
+      if (!Object.keys(coord).length) return;
+      let e = new PointerEvent(event.type, event);
+      if (!emitEvent(act.emit, coord, e)) {
+        emit(act.action, coord, e);
       }
-      changerange(rangePreview);
+      changerange(coord);
       let xmin, xmax, ymin, ymax;
       Object.assign(rangePreview, { xmin, xmax, ymin, ymax });
     }
     const svgVOn = {
       pointerdown: svgPointerdown,
       pointerup(e) {
-        emit("pointerup", e, getCoord(e));
+        let evt = dispatchPointerEvent(e), coord = getCoord(e);
+        emit("pointerup", evt, coord);
+        if (evt.defaultPrevented) e.preventDefault();
       },
       pointerover(e) {
         emit("pointerover", e, getCoord(e));
@@ -6659,31 +7113,40 @@ const _sfc_main$n = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
       pointerleave(e) {
         emit("pointerleave", e, getCoord(e));
       },
-      dblclick(e) {
-        emit("dblclick", e, getCoord(e));
-      },
       click(e) {
-        emit("click", e, getCoord(e));
+        emit("click", dispatchPointerEvent(e), getCoord(e));
       },
       contextmenu(e) {
-        emit("contextmenu", e, getCoord(e));
+        let evt = dispatchPointerEvent(e), coord = getCoord(e);
+        emit("contextmenu", evt, coord);
+        if (evt.defaultPrevented) e.preventDefault();
+      },
+      singleclick(e) {
+        emit("singleclick", dispatchPointerEvent(e), getCoord(e));
+      },
+      dblclick(e) {
+        let evt = dispatchPointerEvent(e), coord = getCoord(e);
+        emit("dblclick", evt, coord);
+        if (evt.defaultPrevented) e.preventDefault();
       },
       pointermove(e) {
-        emit("pointermove", e, getCoord(e));
+        let evt = dispatchPointerEvent(e), coord = getCoord(e);
+        emit("pointermove", evt, coord);
+        if (evt.defaultPrevented) e.preventDefault();
       },
       wheel: svgWheel
     };
     function changerange(coord) {
       let { xmin, xmax, ymin, ymax } = coord;
       let { xmin: $xmin, xmax: $xmax, ymin: $ymin, ymax: $ymax } = range;
-      xmin = xmin != null ? plus(xmin, __props.expandAdd.x.min) : $xmin;
+      xmin = xmin != null ? plus(xmin, +__props.expandAdd.x.min) : $xmin;
       xmax = xmax != null ? plus(xmax, -__props.expandAdd.x.max) : $xmax;
-      ymin = ymin != null ? plus(ymin, __props.expandAdd.y.min) : $ymin;
+      ymin = ymin != null ? plus(ymin, +__props.expandAdd.y.min) : $ymin;
       ymax = ymax != null ? plus(ymax, -__props.expandAdd.y.max) : $ymax;
       if (xmin == $xmin && xmax == $xmax && ymin == $ymin && ymax == $ymax) return;
       Object.assign(range, { xmin, xmax, ymin, ymax });
     }
-    const axisLimits = reactiveComputed(() => {
+    const axisRange = reactiveComputed(() => {
       let xmin = rangePreview?.xmin ?? range?.xmin, xmax = rangePreview?.xmax ?? range?.xmax, ymin = rangePreview?.ymin ?? range?.ymin, ymax = rangePreview?.ymax ?? range?.ymax;
       return {
         x: xmin || xmax ? { min: xmin, max: xmax } : void 0,
@@ -6692,24 +7155,27 @@ const _sfc_main$n = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
     });
     const gaxes = computed(() => {
       let coordScales = {
-        x: vplot.value.coordScales.x.expand(__props.expandMult?.x),
-        y: vplot.value.coordScales.y.expand(__props.expandMult?.y)
+        x: vplot.value.coordScales.x,
+        y: vplot.value.coordScales.y
       };
       return props.axes.filter((a) => a.coord in coordScales).filter((a) => ["h", "v"].includes(a.orientation)).map(({
         coord,
         breaks,
-        extend: extend2,
         labels,
+        titles,
         minorBreaks,
         ...etc
       }) => ({
         coord,
-        axis: new GAxis(coordScales[coord], { breaks, extend: extend2, labels, minorBreaks }),
+        axis: new GAxis(coordScales[coord], { breaks, labels, titles, minorBreaks }),
         etc
       }));
     });
     const vaxes = computed(() => gaxes.value.map(({ coord, axis, etc }) => {
-      let { majorBreaks, minorBreaks, ticks } = axis.getBindings({ limits: axisLimits[coord] });
+      let { majorBreaks, minorBreaks, ticks } = axis.getBindings({
+        range: axisRange[coord],
+        expandMult: __props.expandMult[coord]
+      });
       let { showGrid, orientation, ...bind } = etc;
       return {
         majorBreaks,
@@ -6725,12 +7191,12 @@ const _sfc_main$n = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
       let hAxes = vaxes.value.filter((a) => a.showGrid && a.orientation == "v"), vAxes = vaxes.value.filter((a) => a.showGrid && a.orientation == "h");
       return {
         h: {
-          majorBreaks: unique(hAxes.flatMap((a) => a.majorBreaks)),
-          minorBreaks: unique(hAxes.flatMap((a) => a.minorBreaks))
+          majorBreaks: unique(hAxes.flatMap((a) => a.majorBreaks), (x2) => x2.position),
+          minorBreaks: unique(hAxes.flatMap((a) => a.minorBreaks), (x2) => x2.position)
         },
         v: {
-          majorBreaks: unique(vAxes.flatMap((a) => a.majorBreaks)),
-          minorBreaks: unique(vAxes.flatMap((a) => a.minorBreaks))
+          majorBreaks: unique(vAxes.flatMap((a) => a.majorBreaks), (x2) => x2.position),
+          minorBreaks: unique(vAxes.flatMap((a) => a.minorBreaks), (x2) => x2.position)
         }
       };
     });
@@ -6776,6 +7242,7 @@ const _sfc_main$n = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
             }, null, 8, _hoisted_2)
           ], 8, _hoisted_1$1)
         ]),
+        _cache[6] || (_cache[6] = createTextVNode()),
         __props.theme.plot.background ? (openBlock(), createElementBlock("rect", {
           key: 0,
           transform: `translate(${unref(panel).left}, ${unref(panel).top})`,
@@ -6783,17 +7250,20 @@ const _sfc_main$n = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
           height: unref(panel).height,
           fill: __props.theme.plot.background
         }, null, 8, _hoisted_3)) : createCommentVNode("", true),
+        _cache[7] || (_cache[7] = createTextVNode()),
         createElementVNode("g", {
-          transform: `translate(${unref(panel).left}, ${unref(panel).top})`
+          transform: `translate(${unref(panel).left}, ${unref(panel).top})`,
+          style: { "pointer-events": "none" }
         }, [
-          __props.theme.grid.h ? (openBlock(), createBlock(_sfc_main$P, mergeProps({ key: 0 }, gridBreaks.value.h, {
+          __props.theme.grid.h ? (openBlock(), createBlock(_sfc_main$S, mergeProps({ key: 0 }, gridBreaks.value.h, {
             layout: unref(innerRect),
             theme: __props.theme.grid.h,
             activeTransform: activeTransform.value,
             coord2pos,
             transition: transition.value
           }), null, 16, ["layout", "theme", "activeTransform", "transition"])) : createCommentVNode("", true),
-          __props.theme.grid.v ? (openBlock(), createBlock(_sfc_main$O, mergeProps({ key: 1 }, gridBreaks.value.v, {
+          _cache[2] || (_cache[2] = createTextVNode()),
+          __props.theme.grid.v ? (openBlock(), createBlock(_sfc_main$R, mergeProps({ key: 1 }, gridBreaks.value.v, {
             layout: unref(innerRect),
             theme: __props.theme.grid.v,
             activeTransform: activeTransform.value,
@@ -6801,6 +7271,7 @@ const _sfc_main$n = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
             transition: transition.value
           }), null, 16, ["layout", "theme", "activeTransform", "transition"])) : createCommentVNode("", true)
         ], 8, _hoisted_4),
+        _cache[8] || (_cache[8] = createTextVNode()),
         createElementVNode("g", {
           transform: `translate(${unref(panel).left}, ${unref(panel).top})`,
           "clip-path": props.clip ? `url(#${unref(vid)}-plot-clip)` : null
@@ -6809,7 +7280,7 @@ const _sfc_main$n = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
             style: { transition: transition.value }
           }), [
             (openBlock(true), createElementBlock(Fragment, null, renderList(vplot.value.layers, (layer) => {
-              return openBlock(), createBlock(_sfc_main$t, mergeProps({
+              return openBlock(), createBlock(_sfc_main$u, mergeProps({
                 ref_for: true,
                 ref_key: "layers",
                 ref: layers,
@@ -6817,11 +7288,13 @@ const _sfc_main$n = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
               }, { ref_for: true }, layer.vBind, {
                 layout: unref(innerRect),
                 geom: layer.geom,
-                coord2pos
-              }), null, 16, ["data", "layout", "geom"]);
+                coord2pos,
+                "default-render": props.render
+              }), null, 16, ["data", "layout", "geom", "default-render"]);
             }), 256)),
+            _cache[3] || (_cache[3] = createTextVNode()),
             (openBlock(true), createElementBlock(Fragment, null, renderList(props.selections, (sel) => {
-              return openBlock(), createBlock(_sfc_main$s, mergeProps({
+              return openBlock(), createBlock(_sfc_main$t, mergeProps({
                 coord2pos,
                 pos2coord,
                 layout: unref(innerRect),
@@ -6829,31 +7302,34 @@ const _sfc_main$n = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
                 onSelectend: onselectend
               }, { ref_for: true }, sel, { flip: __props.flip }), null, 16, ["layout", "flip"]);
             }), 256)),
-            createVNode(_sfc_main$s, {
+            _cache[4] || (_cache[4] = createTextVNode()),
+            createVNode(_sfc_main$t, {
               coord2pos,
               pos2coord,
               layout: unref(innerRect),
               modelValue: selectionPreview.value,
-              theme: selectionPreviewTheme.value,
+              theme: _selectionPreviewTheme.value,
               flip: __props.flip
             }, null, 8, ["layout", "modelValue", "theme", "flip"])
           ], 16)
         ], 8, _hoisted_5),
+        _cache[9] || (_cache[9] = createTextVNode()),
         createElementVNode("g", {
           transform: `translate(${unref(panel).left}, ${unref(panel).top})`
         }, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(axes.value.filter((a) => typeof a.bind.position !== "number"), (axis) => {
-            return openBlock(), createBlock(_sfc_main$Q, mergeProps({ ref_for: true }, axis.bind, toHandlers(axis.on), {
+            return openBlock(), createBlock(_sfc_main$T, mergeProps({ ref_for: true }, axis.bind, toHandlers(axis.on), {
               transition: transition.value,
               "onUpdate:transition": _cache[0] || (_cache[0] = ($event) => transition.value = $event),
               activeTransform: activeTransform.value
             }), null, 16, ["transition", "activeTransform"]);
           }), 256)),
+          _cache[5] || (_cache[5] = createTextVNode()),
           createElementVNode("g", {
             "clip-path": props.clip ? `url(#${unref(vid)}-plot-clip)` : null
           }, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(axes.value.filter((a) => typeof a.bind.position === "number"), (axis) => {
-              return openBlock(), createBlock(_sfc_main$Q, mergeProps({ ref_for: true }, axis.bind, toHandlers(axis.on), {
+              return openBlock(), createBlock(_sfc_main$T, mergeProps({ ref_for: true }, axis.bind, toHandlers(axis.on), {
                 transition: transition.value,
                 "onUpdate:transition": _cache[1] || (_cache[1] = ($event) => transition.value = $event),
                 activeTransform: activeTransform.value
@@ -6861,12 +7337,13 @@ const _sfc_main$n = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
             }), 256))
           ], 8, _hoisted_7)
         ], 8, _hoisted_6),
+        _cache[10] || (_cache[10] = createTextVNode()),
         props.legendTeleport ? (openBlock(), createElementBlock("foreignObject", _hoisted_8, [
           (openBlock(), createBlock(Teleport, {
             defer: "",
             to: props.legendTeleport
           }, [
-            createVNode(_sfc_main$o, {
+            createVNode(_sfc_main$p, {
               scales: vplot.value?.scales,
               theme: __props.theme.legend
             }, null, 8, ["scales", "theme"])
@@ -6876,24 +7353,31 @@ const _sfc_main$n = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
     };
   }
 });
-const _sfc_main$m = {
+const _sfc_main$n = {
   $_type: "action",
   $_props: {}
 };
-const _sfc_main$l = {
+const _sfc_main$m = {
   $_type: "layer"
 };
-const _sfc_main$k = {
+const _sfc_main$l = {
   $_props: {
     geom: "tile",
     stat: "bar"
   },
   $_type: "layer"
 };
-const _sfc_main$j = {
+const _sfc_main$k = {
   $_props: {
     geom: "blank",
-    stat: "blank"
+    stat: "identity"
+  },
+  $_type: "layer"
+};
+const _sfc_main$j = {
+  $_props: {
+    geom: "boxplot",
+    stat: "boxplot"
   },
   $_type: "layer"
 };
@@ -7000,9 +7484,10 @@ const _sfc_main$5 = {
 };
 const geom_components = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  VVGeom: _sfc_main$l,
-  VVGeomBar: _sfc_main$k,
-  VVGeomBlank: _sfc_main$j,
+  VVGeom: _sfc_main$m,
+  VVGeomBar: _sfc_main$l,
+  VVGeomBlank: _sfc_main$k,
+  VVGeomBoxplot: _sfc_main$j,
   VVGeomCurve: _sfc_main$i,
   VVGeomDensity: _sfc_main$h,
   VVGeomHistogram: _sfc_main$g,
@@ -7036,7 +7521,10 @@ const axis_components = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.def
   VVAxisX: _sfc_main$3,
   VVAxisY: _sfc_main$2
 }, Symbol.toStringTag, { value: "Module" }));
-const _hoisted_1 = { class: "vvplot-panel" };
+const _hoisted_1 = {
+  key: 0,
+  class: "vvplot-panel"
+};
 const _sfc_main$1 = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
   __name: "Plot",
   props: /* @__PURE__ */ mergeModels({
@@ -7054,6 +7542,7 @@ const _sfc_main$1 = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
     theme: [Object, Array],
     action: [Object, Array],
     reverse: Object,
+    render: String,
     flip: Boolean,
     clip: { type: Boolean, default: true },
     resize: null,
@@ -7075,8 +7564,18 @@ const _sfc_main$1 = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
     const components = {
       ...geom_components,
       ...axis_components,
-      VVAction: _sfc_main$m,
-      VVSelection: _sfc_main$m
+      VVAction: _sfc_main$n,
+      VVSelection: _sfc_main$n
+    };
+    const opponents = {
+      x: "y",
+      y: "x",
+      h: "v",
+      v: "h",
+      top: "bottom",
+      bottom: "top",
+      left: "right",
+      right: "left"
     };
     function _isPropTruthy(v) {
       if (v == null) return v;
@@ -7264,11 +7763,6 @@ const _sfc_main$1 = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
         let max = primaryAxisConfig.max[ori] ?? __props.range?.[ori + "max"];
         result[ori + "min"] = isFinite(min) && !Number.isNaN(min) ? min : null;
         result[ori + "max"] = isFinite(max) && !Number.isNaN(max) ? max : null;
-        let level = coordLevels.value[ori];
-        if (level != null) {
-          result[ori + "min"] = (result[ori + "min"] ?? 0) - 0.5;
-          result[ori + "max"] = (result[ori + "max"] ?? level.length ?? Math.max(Object.values(level))) - 0.5;
-        }
       }
       return result;
     });
@@ -7319,7 +7813,7 @@ const _sfc_main$1 = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
       if (newRange?.ymax !== oldRange?.ymax)
         rangePreview.ymax = newRange.ymax;
     }, { immediate: true });
-    watch(() => range, (newRange, oldRange) => {
+    watch(() => ({ ...range }), (newRange, oldRange) => {
       for (let key in rangeUpdate) {
         rangeUpdate[key]?.(newRange[key]);
       }
@@ -7354,14 +7848,13 @@ const _sfc_main$1 = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
       else if (typeof y2 == "number") y2 = { min: y2, max: y2 };
       return { x: x2, y: y2 };
     });
-    const reverse = computed(() => ({
+    const reverse = reactiveComputed(() => ({
       x: _isPropTruthy(primaryAxisConfig.reverse.x) ?? __props.reverse?.x ?? false,
       y: _isPropTruthy(primaryAxisConfig.reverse.y) ?? __props.reverse?.y ?? false
     }));
     const buttonsMap = { left: 1, right: 2, middle: 4, X1: 8, X2: 16 };
     const axes = computed(() => {
       let ori = __props.flip ? { x: "v", y: "h" } : { x: "h", y: "v" };
-      let defaultPos = __props.flip ? { x: "left", y: "bottom" } : { x: "bottom", y: "left" };
       let allAxes = vaxis.value.map((c) => ({ ...c.type.$_props, ...c.props, $_children: c.children })).concat(__props.axes ?? []);
       if (allAxes.every((ax) => ax?.coord != "x")) allAxes.push({ coord: "x" });
       if (allAxes.every((ax) => ax?.coord != "y")) allAxes.push({ coord: "y" });
@@ -7371,6 +7864,7 @@ const _sfc_main$1 = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
         title,
         breaks,
         labels,
+        titles,
         "minor-breaks": minorBreaks,
         "show-grid": showGrid,
         theme: $$theme = [],
@@ -7392,7 +7886,14 @@ const _sfc_main$1 = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
         ...etc
       }) => {
         let orientation = ori[coord];
-        position = position ?? defaultPos[coord];
+        position = position ?? "start";
+        if (position == "start") {
+          position = { h: "bottom", v: "left" }[orientation];
+          if (reverse[opponents[coord]]) position = opponents[position];
+        } else if (position == "end") {
+          position = { h: "top", v: "right" }[orientation];
+          if (reverse[opponents[coord]]) position = opponents[position];
+        }
         let action2 = Object.values($_children ?? {}).filter((s) => typeof s == "function").flatMap((s) => expandFragment(s())).map((c) => ({ ...c.type.$_props, ...c.props })).concat($$action ?? []).flatMap((props) => {
           let res = [];
           for (let a of ["move", "nudge", "zoom", "rescale"]) {
@@ -7421,6 +7922,7 @@ const _sfc_main$1 = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
           title,
           breaks,
           labels,
+          titles,
           minorBreaks,
           showGrid: _isPropTruthy(showGrid) ?? position !== "none",
           extend: extend2 ?? primaryAxisConfig.extend[coord],
@@ -7502,13 +8004,13 @@ const _sfc_main$1 = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
         return {
           move: Boolean(_isPropTruthy(move)),
           dismissible: dismissible == void 0 ? void 0 : dismissible !== false,
-          resize: resize !== false,
+          resize: Boolean(_isPropTruthy(resize)),
           x: xy || Boolean(_isPropTruthy(x2)),
           y: xy || Boolean(_isPropTruthy(y2)),
-          xmin,
-          xmax,
-          ymin,
-          ymax,
+          xmin: xmin ?? actionBoundary?.x?.min,
+          xmax: xmax ?? actionBoundary?.x?.max,
+          ymin: ymin ?? actionBoundary?.y?.min,
+          ymax: ymax ?? actionBoundary?.y?.max,
           ctrlKey: Boolean(_isPropTruthy(ctrl)),
           shiftKey: Boolean(_isPropTruthy(shift)),
           altKey: Boolean(_isPropTruthy(alt)),
@@ -7528,21 +8030,24 @@ const _sfc_main$1 = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
     const height = useModel(__props, "height");
     onMounted(() => {
       watch(width, (v) => {
-        wrapperRef.value.style.width = str_c(v, "px");
+        wrapperRef.value.style.width = str_c(v, "px") ?? null;
       }, { immediate: true });
       watch(height, (v) => {
-        wrapperRef.value.style.height = str_c(v, "px");
+        wrapperRef.value.style.height = str_c(v, "px") ?? null;
       }, { immediate: true });
     });
-    const { width: w, height: h } = useElementSize(plotRef);
-    watch([w, h], ([w2, h2], [ow, oh]) => {
-      if (wrapperRef.value.style.width) width.value = w2;
-      if (wrapperRef.value.style.height) height.value = h2;
-      if ((w2 > 0 || h2 > 0) && (ow > 0 || oh > 0))
-        emit("resize", { width: w2, height: h2 }, { width: ow, height: oh });
+    let oldSize = { width: 0, height: 0 };
+    useResizeObserver(plotRef, (e) => {
+      let { width: w, height: h } = e[0].contentRect;
+      if (wrapperRef.value.style.width) width.value = w;
+      if (wrapperRef.value.style.height) height.value = h;
+      if ((w > 0 || h > 0) && (oldSize.width > 0 || oldSize.height > 0))
+        emit("resize", { width: w, height: h }, oldSize);
+      oldSize = { width: w, height: h };
     });
     const panelStyle = computed(() => {
       return {
+        position: "absolute",
         left: str_c(plotRef.value?.panel?.left, "px"),
         top: str_c(plotRef.value?.panel?.top, "px"),
         width: str_c(plotRef.value?.panel?.width, "px"),
@@ -7561,6 +8066,9 @@ const _sfc_main$1 = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
       return style;
     });
     __expose({
+      get svg() {
+        return plotRef.value.svg;
+      },
       serialize() {
         return serializeSVG(plotRef.value.svg);
       }
@@ -7571,7 +8079,7 @@ const _sfc_main$1 = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
         class: "vvplot",
         style: wrapperStyle.value
       }, vBind.value.wrapper), [
-        createVNode(_sfc_main$n, mergeProps({
+        createVNode(_sfc_main$o, mergeProps({
           ref: "plot",
           paddings,
           schema: schema.value,
@@ -7579,7 +8087,7 @@ const _sfc_main$1 = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
           "min-range": minRange.value,
           "expand-add": expandAdd.value,
           "expand-mult": expandMult.value,
-          reverse: reverse.value,
+          reverse: unref(reverse),
           flip: __props.flip,
           "coord-levels": coordLevels.value,
           levels: levels.value,
@@ -7590,26 +8098,28 @@ const _sfc_main$1 = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
           transition: transition.value,
           "onUpdate:transition": _cache[0] || (_cache[0] = ($event) => transition.value = $event)
         }, vBind.value.plot, {
-          selectionPreview: selectionPreview.value,
+          "selection-preview": selectionPreview.value,
           "onUpdate:selectionPreview": _cache[1] || (_cache[1] = ($event) => selectionPreview.value = $event),
-          selectionPreviewTheme: selectionPreviewTheme.value,
+          "selection-preview-theme": selectionPreviewTheme.value,
           "onUpdate:selectionPreviewTheme": _cache[2] || (_cache[2] = ($event) => selectionPreviewTheme.value = $event),
           action: action.value,
           clip: __props.clip,
+          render: __props.render,
           legendTeleport: __props.legendTeleport,
           onSelect: _cache[3] || (_cache[3] = (d, e) => emit("select", d, e))
-        }), null, 16, ["paddings", "schema", "layers", "min-range", "expand-add", "expand-mult", "reverse", "flip", "coord-levels", "levels", "scales", "axes", "theme", "selections", "transition", "selectionPreview", "selectionPreviewTheme", "action", "clip", "legendTeleport"]),
-        vnodes.dom.panel?.length ? (openBlock(), createElementBlock("div", {
-          key: 0,
+        }), null, 16, ["paddings", "schema", "layers", "min-range", "expand-add", "expand-mult", "reverse", "flip", "coord-levels", "levels", "scales", "axes", "theme", "selections", "transition", "selection-preview", "selection-preview-theme", "action", "clip", "render", "legendTeleport"]),
+        _cache[4] || (_cache[4] = createTextVNode()),
+        createElementVNode("div", {
           class: "vvplot-panel-container",
           style: normalizeStyle(panelStyle.value)
         }, [
-          createElementVNode("div", _hoisted_1, [
+          vnodes.dom.panel?.length ? (openBlock(), createElementBlock("div", _hoisted_1, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(vnodes.dom.panel, (c) => {
               return openBlock(), createBlock(resolveDynamicComponent(c));
             }), 256))
-          ])
-        ], 4)) : createCommentVNode("", true),
+          ])) : createCommentVNode("", true)
+        ], 4),
+        _cache[5] || (_cache[5] = createTextVNode()),
         (openBlock(true), createElementBlock(Fragment, null, renderList(vdom.value, (c) => {
           return openBlock(), createBlock(resolveDynamicComponent(c));
         }), 256))
@@ -7623,26 +8133,27 @@ const _sfc_main = {
 };
 export {
   _sfc_main$1 as _sfc_main,
-  _sfc_main$m as _sfc_main$1,
-  _sfc_main$h as _sfc_main$10,
-  _sfc_main$g as _sfc_main$11,
-  _sfc_main$f as _sfc_main$12,
-  _sfc_main$e as _sfc_main$13,
-  _sfc_main$d as _sfc_main$14,
-  _sfc_main$c as _sfc_main$15,
-  _sfc_main$b as _sfc_main$16,
-  _sfc_main$a as _sfc_main$17,
-  _sfc_main$9 as _sfc_main$18,
-  _sfc_main$8 as _sfc_main$19,
+  _sfc_main$n as _sfc_main$1,
+  _sfc_main$i as _sfc_main$10,
+  _sfc_main$h as _sfc_main$11,
+  _sfc_main$g as _sfc_main$12,
+  _sfc_main$f as _sfc_main$13,
+  _sfc_main$e as _sfc_main$14,
+  _sfc_main$d as _sfc_main$15,
+  _sfc_main$c as _sfc_main$16,
+  _sfc_main$b as _sfc_main$17,
+  _sfc_main$a as _sfc_main$18,
+  _sfc_main$9 as _sfc_main$19,
   _sfc_main as _sfc_main$2,
-  _sfc_main$7 as _sfc_main$20,
-  _sfc_main$6 as _sfc_main$21,
-  _sfc_main$5 as _sfc_main$22,
+  _sfc_main$8 as _sfc_main$20,
+  _sfc_main$7 as _sfc_main$21,
+  _sfc_main$6 as _sfc_main$22,
+  _sfc_main$5 as _sfc_main$23,
   _sfc_main$4 as _sfc_main$3,
   _sfc_main$3 as _sfc_main$4,
   _sfc_main$2 as _sfc_main$5,
-  _sfc_main$l as _sfc_main$6,
-  _sfc_main$k as _sfc_main$7,
-  _sfc_main$j as _sfc_main$8,
-  _sfc_main$i as _sfc_main$9
+  _sfc_main$m as _sfc_main$6,
+  _sfc_main$l as _sfc_main$7,
+  _sfc_main$k as _sfc_main$8,
+  _sfc_main$j as _sfc_main$9
 };