@qe-libs/qeviz 0.1.0 → 0.4.0

package/dist/qeviz.umd.js

@@ -164,7 +164,7 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
         }
       });
       __privateSet(this, _names2, names);
-      if (rowNames && rowNames.length !== this[0].length) {
+      if (rowNames && this[0] && rowNames.length !== this[0].length) {
         throw new Error("Row names length must match the number of rows in the DataFrame.");
       }
       if (rowNames && rowNames.length > 0) {
@@ -228,6 +228,9 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
     rows(...wh) {
       let selectors, selectedRows = [], selectedRowNames = [];
       if (wh.length === 0) {
+        if (!this[0] || this.length === 0) {
+          return [];
+        }
         const numRows = this[0].length;
         selectedRows = Array.from({ length: numRows }, (_, i) => this.getRowByIndex(i));
         selectedRowNames = __privateGet(this, _rowNames2);
@@ -286,7 +289,7 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
       return __privateGet(this, _rowNames2);
     }
     get nrow() {
-      return this[0].length;
+      return this[0] ? this[0].length : 0;
     }
     get ncol() {
       return this.length;
@@ -353,6 +356,12 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
     set groups(v) {
       this._groups = v;
     }
+    get trajectories() {
+      return this._trajectories;
+    }
+    set trajectories(v) {
+      this._trajectories = v;
+    }
     get dimensions() {
       return this._dimensions;
     }
@@ -465,7 +474,7 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
      */
     setModelData(data) {
       var _a, _b, _c, _d;
-      const frameKeys = ["nodes", "edges", "points", "groups", "confidence", "outlier"];
+      const frameKeys = ["nodes", "edges", "points", "groups", "confidence", "outlier", "trajectories"];
       frameKeys.forEach((name) => {
         var _a2;
         const raw = data[name];
@@ -474,7 +483,7 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
         let idCol;
         if (name === "nodes") {
           idCol = data.node_id_col ?? colNames.find((c) => (types[c] ?? "character") === "character");
-        } else if (name === "edges" || name === "points") {
+        } else if (name === "edges" || name === "points" || name === "trajectories") {
           idCol = data.id_col ?? colNames.find((c) => (types[c] ?? "character") === "character");
         } else {
           idCol = data.group_col ?? colNames.find((c) => (types[c] ?? "character") === "character");
@@ -544,8 +553,12 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
   __name(_QEVisualElement, "QEVisualElement");
   _QEVisualElement.tagName = "qe-visual";
   _QEVisualElement.styles = `
-    :host { display: inline-block; }
+    :host { display: block; width: 100%; }
     :host(.hidden) { display: none !important; }
+    /* The output wrapper and the slotted graph fill the host so the plot
+       stretches to its container instead of collapsing to intrinsic size. */
+    div { display: block; width: 100%; height: 100%; }
+    ::slotted(qe-graph) { display: block; width: 100%; height: 100%; }
   `;
   let QEVisualElement = _QEVisualElement;
   customElements.define(QEVisualElement.tagName, QEVisualElement);
@@ -586,9 +599,10 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
   __name(_Color, "Color");
   let Color = _Color;
   const _WeightedColor = class _WeightedColor extends Color {
-    constructor(base, weight) {
+    constructor(base, weight, alpha) {
       super(base);
       this.weight = weight;
+      this.alpha = alpha;
     }
     // Parse hex → HSV (h in [0, 360), s/v in [0, 1]).
     static toHSV(hex) {
@@ -659,7 +673,8 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
     toString() {
       const { h, v } = _WeightedColor.toHSV(this.base);
       const w = Math.min(1, Math.abs(this.weight));
-      return _WeightedColor.hsvToRgba(h, w, v, w);
+      const a = this.alpha === void 0 ? w : Math.min(1, Math.max(0, this.alpha));
+      return _WeightedColor.hsvToRgba(h, w, v, a);
     }
   };
   __name(_WeightedColor, "WeightedColor");
@@ -816,7 +831,9 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
         __name(slopeIntercept, "slopeIntercept");
         Line2.slopeIntercept = slopeIntercept;
         function point_along(line, distance = 0) {
-          let len = Tools2.Geometry.Line.length(line[0], line[1]), ratio = distance / len, Xt = (1 - ratio) * line[0][0] + ratio * line[1][0], Yt = (1 - ratio) * line[0][1] + ratio * line[1][1];
+          const ratio = distance;
+          const Xt = (1 - ratio) * line[0][0] + ratio * line[1][0];
+          const Yt = (1 - ratio) * line[0][1] + ratio * line[1][1];
           return [Xt, Yt];
         }
         __name(point_along, "point_along");
@@ -1663,6 +1680,7 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
       this.points = /* @__PURE__ */ new Map();
       this.nodes = /* @__PURE__ */ new Map();
       this.edges = /* @__PURE__ */ new Map();
+      this.trajectories = /* @__PURE__ */ new Map();
       this.labels = /* @__PURE__ */ new Map();
       this.transform = new Transform();
       this.scale_x = 1;
@@ -1705,6 +1723,7 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
               { name: "edgenodes", layers: [], tabindex: 0 }
             ]
           },
+          { name: "trajectories", layers: [], tabindex: 0 },
           { name: "points", layers: [], tabindex: 0 },
           { name: "labels", layers: [], tabindex: 0 }
         ] }
@@ -1830,9 +1849,13 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
       if (search_layers.length === 0) {
         this.extremes = new Extremes(1, 1);
       } else {
-        const found_max = Math.max(...search_layers.map((l) => Math.max(...[...l.objects.values()].map((o) => Math.max(Math.abs(o.x), Math.abs(o.y))))).filter((a) => Math.abs(a) !== Infinity)) * 1.5;
-        console.log("Found max for extremes:", found_max);
-        this.extremes = new Extremes(Math.ceil(found_max), Math.ceil(found_max));
+        const content_max = Math.max(
+          ...search_layers.map((l) => Math.max(
+            ...[...l.objects.values()].map((o) => Math.max(Math.abs(o.x), Math.abs(o.y)))
+          )).filter((a) => Math.abs(a) !== Infinity)
+        );
+        const found_max = (Number.isFinite(content_max) && content_max > 0 ? content_max : 1) * 1.3;
+        this.extremes = new Extremes(found_max, found_max);
       }
     }
     base_point_size(scale = 8) {
@@ -1872,6 +1895,251 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
     }
   `;
   let DrawableElement = _DrawableElement;
+  const TRAJECTORY_ZERO_EPS = 1e-8;
+  function nearOriginFilter(pts, eps = TRAJECTORY_ZERO_EPS) {
+    return pts.filter((p) => Math.abs(p.x) > eps || Math.abs(p.y) > eps);
+  }
+  __name(nearOriginFilter, "nearOriginFilter");
+  function normalizedT(n) {
+    if (n <= 0) return [];
+    if (n === 1) return [0];
+    const t = new Array(n);
+    for (let i = 0; i < n; i++) t[i] = i / (n - 1);
+    return t;
+  }
+  __name(normalizedT, "normalizedT");
+  function design(t, degree) {
+    return t.map((ti) => {
+      const row = new Array(degree + 1);
+      let p = 1;
+      for (let k = 0; k <= degree; k++) {
+        row[k] = p;
+        p *= ti;
+      }
+      return row;
+    });
+  }
+  __name(design, "design");
+  function qr(A) {
+    const n = A.length;
+    const m = A[0].length;
+    const Q = A.map((row) => row.slice());
+    const R = Array.from({ length: m }, () => new Array(m).fill(0));
+    for (let j = 0; j < m; j++) {
+      let norm = 0;
+      for (let i = 0; i < n; i++) norm += Q[i][j] * Q[i][j];
+      norm = Math.sqrt(norm);
+      R[j][j] = norm;
+      if (norm > 1e-300) {
+        for (let i = 0; i < n; i++) Q[i][j] /= norm;
+      }
+      for (let k = j + 1; k < m; k++) {
+        let dot = 0;
+        for (let i = 0; i < n; i++) dot += Q[i][j] * Q[i][k];
+        R[j][k] = dot;
+        for (let i = 0; i < n; i++) Q[i][k] -= dot * Q[i][j];
+      }
+    }
+    return { Q, R };
+  }
+  __name(qr, "qr");
+  function qtY(Q, y) {
+    const n = Q.length;
+    const m = Q[0].length;
+    const out = new Array(m).fill(0);
+    for (let j = 0; j < m; j++) {
+      let s = 0;
+      for (let i = 0; i < n; i++) s += Q[i][j] * y[i];
+      out[j] = s;
+    }
+    return out;
+  }
+  __name(qtY, "qtY");
+  function backSolve(R, b) {
+    const m = b.length;
+    const c = new Array(m).fill(0);
+    for (let i = m - 1; i >= 0; i--) {
+      let s = b[i];
+      for (let j = i + 1; j < m; j++) s -= R[i][j] * c[j];
+      c[i] = Math.abs(R[i][i]) > 1e-12 ? s / R[i][i] : 0;
+    }
+    return c;
+  }
+  __name(backSolve, "backSolve");
+  function leverages(Q) {
+    return Q.map((row) => {
+      let s = 0;
+      for (let j = 0; j < row.length; j++) s += row[j] * row[j];
+      return s;
+    });
+  }
+  __name(leverages, "leverages");
+  function fitCoeffs(t, y, degree) {
+    const X = design(t, degree);
+    const { Q, R } = qr(X);
+    return backSolve(R, qtY(Q, y));
+  }
+  __name(fitCoeffs, "fitCoeffs");
+  function evalPoly(coeffs, t) {
+    let v = 0;
+    let p = 1;
+    for (let k = 0; k < coeffs.length; k++) {
+      v += coeffs[k] * p;
+      p *= t;
+    }
+    return v;
+  }
+  __name(evalPoly, "evalPoly");
+  function loocv2d(t, x, y, degree) {
+    const X = design(t, degree);
+    const { Q, R } = qr(X);
+    const h = leverages(Q);
+    const cx = backSolve(R, qtY(Q, x));
+    const cy = backSolve(R, qtY(Q, y));
+    let press = 0;
+    for (let i = 0; i < t.length; i++) {
+      const denom = 1 - h[i];
+      if (denom <= 0) return Infinity;
+      const ex = x[i] - evalPoly(cx, t[i]);
+      const ey = y[i] - evalPoly(cy, t[i]);
+      press += (ex / denom) ** 2 + (ey / denom) ** 2;
+    }
+    return press;
+  }
+  __name(loocv2d, "loocv2d");
+  function selectDegree(fitPts, maxDegree, mode) {
+    const n = fitPts.length;
+    const cap = Math.min(Math.max(1, Math.floor(maxDegree)), Math.max(1, n - 1));
+    if (mode === "fixed" || n < 3) return cap;
+    const t = normalizedT(n);
+    const x = fitPts.map((p) => p.x);
+    const y = fitPts.map((p) => p.y);
+    let best = 1;
+    let bestVal = Infinity;
+    for (let deg = 1; deg <= cap; deg++) {
+      const v = loocv2d(t, x, y, deg);
+      if (v < bestVal) {
+        bestVal = v;
+        best = deg;
+      }
+    }
+    return best;
+  }
+  __name(selectDegree, "selectDegree");
+  function fitTrajectory(activePts, opts) {
+    const fitPts = nearOriginFilter(activePts);
+    if (fitPts.length < 3) return null;
+    const selBasis = opts.selectionSet ? nearOriginFilter(opts.selectionSet) : fitPts;
+    const basis = selBasis.length >= 3 ? selBasis : fitPts;
+    let degree = selectDegree(basis, opts.maxDegree, opts.degreeSelection);
+    degree = Math.min(degree, Math.max(1, fitPts.length - 1));
+    const t = normalizedT(fitPts.length);
+    const coeffsX = fitCoeffs(t, fitPts.map((p) => p.x), degree);
+    const coeffsY = fitCoeffs(t, fitPts.map((p) => p.y), degree);
+    return { degree, coeffsX, coeffsY };
+  }
+  __name(fitTrajectory, "fitTrajectory");
+  function sampleCurve(fit, steps = 100) {
+    const out = [];
+    for (let s = 0; s <= steps; s++) {
+      const t = s / steps;
+      out.push({ x: evalPoly(fit.coeffsX, t), y: evalPoly(fit.coeffsY, t) });
+    }
+    return out;
+  }
+  __name(sampleCurve, "sampleCurve");
+  const TRAJECTORY_CURVE_STEPS = 100;
+  const _Trajectory = class _Trajectory extends PlottedObject {
+    constructor(options = {}) {
+      const defaultColor = options.color instanceof Color ? options.color : new Color(typeof options.color === "string" ? options.color : "#000000");
+      super([], {
+        ID: options.ID || `traj-${Math.random().toString(36).substring(2, 9)}`,
+        size: options.size || 1,
+        color: defaultColor,
+        highlight: null,
+        active: options.active || false,
+        meta: options.meta || {},
+        ...options
+      });
+      this._typeName = "Trajectory";
+      this.trajPoints = [];
+      this.smooth = "none";
+      this.maxDegree = 3;
+      this.degreeSelection = "loocv_2d";
+      this.selectedDegree = -1;
+      this.polyCoeffsX = [];
+      this.polyCoeffsY = [];
+      this.currentTime = Infinity;
+      this.showPoints = true;
+      this.showTips = true;
+      this.lineStyle = "uniform";
+      this.strokeWidth = 2;
+      this.strokeWidthRange = [1, 6];
+      this.opacityRange = [0.3, 1];
+      this.smooth = options.smooth || "none";
+      this.maxDegree = options.maxDegree !== void 0 ? options.maxDegree : 3;
+      this.degreeSelection = options.degreeSelection || "loocv_2d";
+      this.polyCoeffsX = options.polyCoeffsX || [];
+      this.polyCoeffsY = options.polyCoeffsY || [];
+      this.currentTime = options.currentTime !== void 0 ? options.currentTime : Infinity;
+      this.showPoints = options.showPoints !== void 0 ? options.showPoints : true;
+      this.showTips = options.showTips !== void 0 ? options.showTips : true;
+      this.lineStyle = options.lineStyle || "uniform";
+      this.strokeWidth = options.strokeWidth || 2;
+      this.strokeWidthRange = options.strokeWidthRange || [1, 6];
+      this.opacityRange = options.opacityRange || [0.3, 1];
+      if (options.points && Array.isArray(options.points)) {
+        this.trajPoints = options.points.map((p) => {
+          if (p instanceof Point) return p;
+          const pt = new Point({ dimensions: [p.x, p.y], meta: { time: p.time, label: p.label } });
+          pt.x = p.x;
+          pt.y = p.y;
+          return pt;
+        });
+      }
+    }
+    get activePoints() {
+      if (this.currentTime === Infinity) {
+        return this.trajPoints;
+      }
+      return this.trajPoints.filter((p) => {
+        const t = p.meta && typeof p.meta.time === "number" ? p.meta.time : 0;
+        return t <= this.currentTime;
+      });
+    }
+    get path() {
+      return this.pathPoints.reduce((acc, pt, idx) => {
+        return idx === 0 ? `M${pt.x},${pt.y}` : `${acc} L${pt.x},${pt.y}`;
+      }, "");
+    }
+    get pathPoints() {
+      const pts = this.activePoints;
+      if (pts.length < 2) return [];
+      if (this.smooth === "poly") {
+        if (this.polyCoeffsX.length > 0 && this.polyCoeffsY.length > 0) {
+          return sampleCurve(
+            { degree: this.polyCoeffsX.length - 1, coeffsX: this.polyCoeffsX, coeffsY: this.polyCoeffsY },
+            TRAJECTORY_CURVE_STEPS
+          );
+        }
+        const fit = fitTrajectory(
+          pts.map((p) => ({ x: p.x, y: p.y })),
+          {
+            maxDegree: this.maxDegree,
+            degreeSelection: this.degreeSelection,
+            selectionSet: this.trajPoints.map((p) => ({ x: p.x, y: p.y }))
+          }
+        );
+        if (fit) {
+          this.selectedDegree = fit.degree;
+          return sampleCurve(fit, TRAJECTORY_CURVE_STEPS);
+        }
+      }
+      return pts.map((pt) => ({ x: pt.x, y: pt.y }));
+    }
+  };
+  __name(_Trajectory, "Trajectory");
+  let Trajectory = _Trajectory;
   const zoom_level = 1;
   const _Edge = class _Edge extends Line {
     constructor(data, from, to, weight = 0) {
@@ -1918,9 +2186,22 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
       return __privateGet(this, _edge);
     }
     get path() {
-      let _this = __privateGet(this, _edge);
-      let _mid = _this.from_point, head = Tools.Geometry.Line.point_along([[_this.to.x, _this.to.y], _mid], 0.7), nock = Tools.Geometry.Line.point_along([[_this.to.x, _this.to.y], _mid], 0.85), mid = Tools.Geometry.Line.midpoint(head, nock), rot_mid = Tools.Geometry.Line.rotate(_this.line, mid), rot_nock = Tools.Geometry.Line.rotate(_this.line, nock), mid_int0 = Tools.Geometry.Line.intersection([_mid, _this.base_pts[0]], rot_mid), mid_int1 = Tools.Geometry.Line.intersection([_mid, _this.base_pts[1]], rot_mid), nock_int0 = Tools.Geometry.Line.intersection([_mid, _this.base_pts[0]], rot_nock), nock_int1 = Tools.Geometry.Line.intersection([_mid, _this.base_pts[1]], rot_nock);
-      let p = `M${head.join(" ")} ${mid_int0.join(" ")} ${nock_int0.join(" ")}  ${mid.join(" ")} ${nock_int1.join(" ")}  ${mid_int1.join(" ")}z`;
+      const _this = __privateGet(this, _edge);
+      const T = [_this.to.x, _this.to.y];
+      const A = _this.from_point;
+      const [B0, B1] = _this.base_pts;
+      const L = Math.hypot(A[0] - T[0], A[1] - T[1]);
+      const W = Math.hypot(B0[0] - B1[0], B0[1] - B1[1]);
+      if (!(L > 0) || !(W > 0)) return "";
+      const u = [(A[0] - T[0]) / L, (A[1] - T[1]) / L];
+      const b = Math.hypot(B0[0] - T[0], B0[1] - T[1]);
+      const v = [(B0[0] - T[0]) / b, (B0[1] - T[1]) / b];
+      const halfW = /* @__PURE__ */ __name((d) => W / 2 * Math.max(0, 1 - d / L), "halfW");
+      const at = /* @__PURE__ */ __name((d, s) => `${T[0] + u[0] * d + v[0] * s} ${T[1] + u[1] * d + v[1] * s}`, "at");
+      const dh = 0.2 * L;
+      const c = Math.min(0.15 * L, 0.8 * 2 * halfW(dh));
+      const dm = dh + c / 2, dn = dh + c;
+      const p = `M${at(dh, 0)} L${at(dm, halfW(dm))} L${at(dn, halfW(dn))} L${at(dm, 0)} L${at(dn, -halfW(dn))} L${at(dm, -halfW(dm))}z`;
       return p;
     }
   };
@@ -2063,6 +2344,46 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
   };
   __name(_Drawable, "Drawable");
   let Drawable = _Drawable;
+  const DEFAULT_EDGE_WIDTH = 0.04;
+  const SATURATION_RANGE = [0.25, 1];
+  const OPACITY_RANGE = [0.3, 1];
+  function rampFor(w, lo, hi, range) {
+    const a = Math.abs(w);
+    if (!(a > 0)) return 0;
+    if (!(hi > lo)) return range[1];
+    const t = Math.min(1, Math.max(0, (a - lo) / (hi - lo)));
+    return range[0] + t * (range[1] - range[0]);
+  }
+  __name(rampFor, "rampFor");
+  const EDGE_WIDTH_PER_EXTENT = 0.011;
+  const TAPERED_OUTLINE_PX = 0.75;
+  const CHEVRON_DARKEN = 0.8;
+  const CHEVRON_HALO_PX = 0.75;
+  const POINT_RADIUS_PER_EXTENT = 6e-3;
+  const UNCONNECTED_NODE_SIZE = 0.6;
+  function widthPerWeight(edgeWidth) {
+    return 2 * edgeWidth;
+  }
+  __name(widthPerWeight, "widthPerWeight");
+  function nodeSizeForEdges(weightSum, widthFrac) {
+    return weightSum * widthFrac / (2 * POINT_RADIUS_PER_EXTENT);
+  }
+  __name(nodeSizeForEdges, "nodeSizeForEdges");
+  function flattenOnWhite(col) {
+    const m = /rgba?\(([^)]+)\)/.exec(col);
+    if (!m) return col;
+    const [r, g, b, a = 1] = m[1].split(",").map(Number);
+    const f = /* @__PURE__ */ __name((c) => Math.round(255 + (c - 255) * a), "f");
+    return `rgb(${f(r)},${f(g)},${f(b)})`;
+  }
+  __name(flattenOnWhite, "flattenOnWhite");
+  function darkenRgba(col, k) {
+    const m = /rgba?\(([^)]+)\)/.exec(col);
+    if (!m) return col;
+    const [r, g, b, a = 1] = m[1].split(",").map(Number);
+    return `rgba(${Math.round(r * k)},${Math.round(g * k)},${Math.round(b * k)},${a})`;
+  }
+  __name(darkenRgba, "darkenRgba");
   const _QELine = class _QELine extends Drawable {
     constructor(__data__, parent, graph, __children__ = new QEArray()) {
       super(__data__, parent, graph, __children__);
@@ -2072,8 +2393,22 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
       this.__children__ = __children__;
       this.__name__ = "unnamed-line";
       this._arrow_el = null;
+      this._hit_el = null;
       this.svg_element = this.create();
     }
+    /** Stamp edge identity onto an element so <qe-graph> delegation can resolve
+     *  qe-edge-* events. No-op for non-edges (e.g. axis lines). */
+    _stampEdge(el) {
+      const meta = this.__data__.meta ?? {};
+      if (!meta.isMeanEdge) return;
+      el.setAttribute("data-edge-source", String(meta.source ?? ""));
+      el.setAttribute("data-edge-target", String(meta.target ?? ""));
+      el.setAttribute("data-edge-weight", String(meta.weight ?? 0));
+      el.setAttribute("data-edge-directed", meta.isDirected ? "true" : "false");
+      if (meta.isSelf) el.setAttribute("data-edge-self", "true");
+      if (meta.group != null) el.setAttribute("data-edge-group", String(meta.group));
+      if (meta.unit != null) el.setAttribute("data-edge-unit", String(meta.unit));
+    }
     create() {
       if (this.__data__ instanceof NodeEdge) {
         const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
@@ -2110,24 +2445,28 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
       const extent = ((_a = this.graph.__data__.extremes) == null ? void 0 : _a.x_max) ?? 1;
       const meta = this.__data__.meta ?? {};
       if (meta.isMeanEdge) {
+        this._stampEdge(this.svg_element);
         const weight = typeof meta.weight === "number" ? meta.weight : 0;
         const maxW = typeof meta.maxWeight === "number" ? meta.maxWeight : 1;
         const opacity = typeof meta.opacity === "number" ? meta.opacity : Math.min(1, weight / (maxW || 1));
-        const sw = (extent > 0 ? extent : 1) * 0.011 * (weight / (maxW || 1));
+        const ext = extent > 0 ? extent : 1;
+        const sw = typeof meta.widthFrac === "number" ? ext * meta.widthFrac * weight : ext * EDGE_WIDTH_PER_EXTENT * (weight / (maxW || 1));
         const baseColor = this.__data__._color || new Color("#000000");
-        const edgeColor = new WeightedColor(baseColor, opacity).toString();
+        const saturation = typeof meta.saturation === "number" ? meta.saturation : opacity;
+        const edgeColor = new WeightedColor(baseColor, saturation, opacity).toString();
         if (this.__data__ instanceof NodeEdge) {
-          const nodeSize = typeof meta.nodeSize === "number" ? meta.nodeSize : 2;
-          const nodeR = extent * 6e-3 * nodeSize;
-          this.__data__.weight = 2 * nodeR * 0.55 * opacity;
+          this.__data__.weight = sw;
           this.svg_element.setAttribute("d", this.__data__.path);
           this.svg_element.setAttribute("fill", edgeColor);
           this.svg_element.setAttribute("stroke", "none");
         } else if (this.__data__ instanceof TaperedEdge) {
-          this.__data__.weight = sw * 4;
+          this.__data__.weight = sw;
           this.svg_element.setAttribute("d", this.__data__.path);
           this.svg_element.setAttribute("fill", edgeColor);
-          this.svg_element.setAttribute("stroke", "none");
+          this.svg_element.setAttribute("stroke", edgeColor);
+          this.svg_element.setAttribute("stroke-width", String(TAPERED_OUTLINE_PX));
+          this.svg_element.setAttribute("vector-effect", "non-scaling-stroke");
+          this.svg_element.setAttribute("stroke-linejoin", "round");
           if (meta.isDirected) {
             try {
               const arrow = new EdgeArrow(this.__data__);
@@ -2141,20 +2480,39 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
                   this.parent.appendChild(this._arrow_el);
                 }
                 this._arrow_el.setAttribute("d", arrowPath);
-                const arrowColor = baseColor.toString();
-                this._arrow_el.setAttribute("fill", arrowColor);
+                this._arrow_el.setAttribute("fill", darkenRgba(flattenOnWhite(edgeColor), CHEVRON_DARKEN));
+                this._arrow_el.setAttribute("stroke", "#ffffff");
+                this._arrow_el.setAttribute("stroke-width", String(CHEVRON_HALO_PX));
+                this._arrow_el.setAttribute("vector-effect", "non-scaling-stroke");
+                this._arrow_el.setAttribute("stroke-linejoin", "round");
               }
             } catch (_) {
             }
           }
         } else {
-          this.svg_element.setAttribute("x1", this.__data__.from.x.toString());
-          this.svg_element.setAttribute("y1", this.__data__.from.y.toString());
-          this.svg_element.setAttribute("x2", this.__data__.to.x.toString());
-          this.svg_element.setAttribute("y2", this.__data__.to.y.toString());
+          const x1 = this.__data__.from.x, y1 = this.__data__.from.y;
+          const x2 = this.__data__.to.x, y2 = this.__data__.to.y;
+          this.svg_element.setAttribute("x1", x1.toString());
+          this.svg_element.setAttribute("y1", y1.toString());
+          this.svg_element.setAttribute("x2", x2.toString());
+          this.svg_element.setAttribute("y2", y2.toString());
           this.svg_element.setAttribute("stroke-width", sw.toString());
           this.svg_element.setAttribute("stroke", edgeColor);
+          this.svg_element.setAttribute("pointer-events", "stroke");
           this.svg_element.removeAttribute("marker-end");
+          if (!this._hit_el) {
+            this._hit_el = document.createElementNS("http://www.w3.org/2000/svg", "line");
+            this._hit_el.setAttribute("stroke", "transparent");
+            this._hit_el.setAttribute("stroke-linecap", "round");
+            this._hit_el.setAttribute("pointer-events", "stroke");
+          }
+          if (!this._hit_el.parentElement) this.parent.appendChild(this._hit_el);
+          this._hit_el.setAttribute("x1", x1.toString());
+          this._hit_el.setAttribute("y1", y1.toString());
+          this._hit_el.setAttribute("x2", x2.toString());
+          this._hit_el.setAttribute("y2", y2.toString());
+          this._hit_el.setAttribute("stroke-width", Math.max(sw, extent * 0.03).toString());
+          this._stampEdge(this._hit_el);
         }
       } else {
         this.svg_element.setAttribute("x1", this.__data__.from.x.toString());
@@ -2168,10 +2526,11 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
       }
     }
     draw() {
-      var _a, _b;
-      (_a = this.parent) == null ? void 0 : _a.appendChild(this.svg_element);
+      var _a, _b, _c;
+      if (this._hit_el) (_a = this.parent) == null ? void 0 : _a.appendChild(this._hit_el);
+      (_b = this.parent) == null ? void 0 : _b.appendChild(this.svg_element);
       if (this._arrow_el) {
-        (_b = this.parent) == null ? void 0 : _b.appendChild(this._arrow_el);
+        (_c = this.parent) == null ? void 0 : _c.appendChild(this._arrow_el);
       }
     }
   };
@@ -2201,14 +2560,45 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
      *  (≈ 1–2 % of the coordinate half-extent for a typical ENA network).
      */
     computeRadius() {
-      const extent = this.graph.__data__.extremes.x_max;
-      return (extent > 0 ? extent : 1) * 6e-3 * this.__data__.size;
+      var _a;
+      const r = this.baseRadius();
+      const cap = (_a = this.__data__.meta) == null ? void 0 : _a.maxRadius;
+      return typeof cap === "number" && cap > 0 ? Math.min(r, cap) : r;
+    }
+    baseRadius() {
+      var _a, _b, _c, _d;
+      const extent = this.graph.__data__.extremes.x_max || 1;
+      const sizeScale = ((_a = this.__data__.meta) == null ? void 0 : _a.sizeScale) ?? 1;
+      if ((_b = this.__data__.meta) == null ? void 0 : _b.fixedSize) {
+        const rect = (_d = (_c = this.graph.svg_element) == null ? void 0 : _c.getBoundingClientRect) == null ? void 0 : _d.call(_c);
+        const zoom = this.graph.zoom_level || 1;
+        const pxPerUnit = rect && rect.width > 0 ? rect.width / (2 * extent) : 1;
+        const targetPx = this.__data__.size * 2 * sizeScale;
+        return targetPx / pxPerUnit / zoom;
+      }
+      return extent * POINT_RADIUS_PER_EXTENT * this.__data__.size * sizeScale;
+    }
+    /** Optional halo stroke (e.g. white outline on unit points to separate
+     *  overlapping dots in dense clusters). Width scales with the dot so it holds
+     *  up at any zoom. No-op unless the object requests it via meta.stroke. */
+    applyStroke(el) {
+      var _a;
+      const stroke = (_a = this.__data__.meta) == null ? void 0 : _a.stroke;
+      if (!stroke) return;
+      el.setAttribute("stroke", stroke);
+      el.setAttribute("stroke-width", (this.computeRadius() * 0.22).toString());
     }
     create() {
       const tag = this.isSquare ? "rect" : "circle";
       const el = document.createElementNS("http://www.w3.org/2000/svg", tag);
       el.setAttribute("data-point-id", this.__data__.ID);
+      const meta = this.__data__.meta ?? {};
+      if (meta.kind) el.setAttribute("data-kind", meta.kind);
+      if (meta.name != null) el.setAttribute("data-name", String(meta.name));
+      if (meta.group != null) el.setAttribute("data-group", String(meta.group));
+      if (meta.unit != null) el.setAttribute("data-unit", String(meta.unit));
       el.setAttribute("fill", this.__data__.color.toString());
+      this.applyStroke(el);
       const r = this.computeRadius();
       if (this.isSquare) {
         el.setAttribute("x", (this.x - r).toString());
@@ -2221,9 +2611,7 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
         el.setAttribute("r", r.toString());
       }
       this.svg_element = el;
-      el.addEventListener("click", (event) => {
-        console.log("Point clicked: ", this.__data__);
-        event.stopPropagation();
+      el.addEventListener("click", () => {
         this.__data__.active = !this.__data__.active;
         this.update();
         const pointEvent = new CustomEvent("point-clicked", {
@@ -2246,6 +2634,7 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
       }
       const r = this.computeRadius();
       this.svg_element.setAttribute("fill", this.__data__.color.toString());
+      this.applyStroke(this.svg_element);
       if (this.isSquare) {
         this.svg_element.setAttribute("x", (this.x - r).toString());
         this.svg_element.setAttribute("y", (this.y - r).toString());
@@ -2264,6 +2653,141 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
   };
   __name(_QEPoint, "QEPoint");
   let QEPoint = _QEPoint;
+  const _QETrajectory = class _QETrajectory extends Drawable {
+    constructor(__data__, parent, graph, __children__ = new QEArray()) {
+      super(__data__, parent, graph, __children__);
+      this.__data__ = __data__;
+      this.parent = parent;
+      this.graph = graph;
+      this.__children__ = __children__;
+      this.__name__ = "trajectory";
+      this._path_el = null;
+      this._segments_group = null;
+      this._tip_el = null;
+      this._points_group = null;
+      this.svg_element = this.create();
+    }
+    // Trajectory styling is specified in display pixels, while SVG paths use
+    // graph coordinates. Convert at render time so marks stay legible at any scale.
+    graphUnitsForPixels(pixels) {
+      var _a;
+      const extent = this.graph.__data__.extremes.x_max || 1;
+      const width = ((_a = this.graph.svg_element) == null ? void 0 : _a.getBoundingClientRect().width) || 0;
+      return width > 0 ? pixels * (2 * extent / width) : pixels * extent * 6e-3;
+    }
+    create() {
+      const group = document.createElementNS("http://www.w3.org/2000/svg", "g");
+      group.setAttribute("class", "qe-trajectory-group");
+      const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+      path.setAttribute("fill", "none");
+      path.setAttribute("stroke", this.__data__.color.toString());
+      path.setAttribute("stroke-width", this.graphUnitsForPixels(this.__data__.strokeWidth).toString());
+      group.appendChild(path);
+      this._path_el = path;
+      const segmentsGroup = document.createElementNS("http://www.w3.org/2000/svg", "g");
+      segmentsGroup.setAttribute("class", "qe-trajectory-segments");
+      group.appendChild(segmentsGroup);
+      this._segments_group = segmentsGroup;
+      const pointsGroup = document.createElementNS("http://www.w3.org/2000/svg", "g");
+      pointsGroup.setAttribute("class", "qe-trajectory-points");
+      group.appendChild(pointsGroup);
+      this._points_group = pointsGroup;
+      if (this.__data__.showTips) {
+        const tip = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+        tip.setAttribute("fill", this.__data__.color.toString());
+        tip.setAttribute("r", this.graphUnitsForPixels(4).toString());
+        tip.setAttribute("stroke", "#ffffff");
+        tip.setAttribute("stroke-width", this.graphUnitsForPixels(1.5).toString());
+        group.appendChild(tip);
+        this._tip_el = tip;
+      }
+      this.svg_element = group;
+      return group;
+    }
+    update() {
+      if (!this.svg_element) {
+        this.create();
+      }
+      if (!this.svg_element.parentElement) {
+        this.parent.appendChild(this.svg_element);
+      }
+      const dStr = this.__data__.path;
+      if (this._path_el) {
+        this._path_el.setAttribute("d", dStr);
+        this._path_el.setAttribute("stroke", this.__data__.color.toString());
+        this._path_el.setAttribute("stroke-width", this.graphUnitsForPixels(this.__data__.strokeWidth).toString());
+        this._path_el.style.display = this.__data__.lineStyle === "tapered" ? "none" : "block";
+      }
+      if (this._segments_group) {
+        this._segments_group.innerHTML = "";
+        if (this.__data__.lineStyle === "tapered") {
+          const pathPts = this.__data__.pathPoints;
+          const nSegments = pathPts.length - 1;
+          const [minWidth, maxWidth] = this.__data__.strokeWidthRange;
+          const [minOpacity, maxOpacity] = this.__data__.opacityRange;
+          for (let i = 0; i < nSegments; i++) {
+            const start = pathPts[i];
+            const end = pathPts[i + 1];
+            const progress = nSegments <= 1 ? 1 : i / (nSegments - 1);
+            const width = minWidth + (maxWidth - minWidth) * progress;
+            const opacity = minOpacity + (maxOpacity - minOpacity) * progress;
+            const segment = document.createElementNS("http://www.w3.org/2000/svg", "path");
+            segment.setAttribute("d", `M${start.x},${start.y} L${end.x},${end.y}`);
+            segment.setAttribute("fill", "none");
+            segment.setAttribute("stroke", this.__data__.color.toString());
+            segment.setAttribute("stroke-linecap", "round");
+            segment.setAttribute("stroke-linejoin", "round");
+            segment.setAttribute("stroke-width", this.graphUnitsForPixels(width).toString());
+            segment.setAttribute("opacity", opacity.toString());
+            this._segments_group.appendChild(segment);
+          }
+          this._segments_group.style.display = "block";
+        } else {
+          this._segments_group.style.display = "none";
+        }
+      }
+      const pts = this.__data__.activePoints;
+      if (this._points_group) {
+        if (this.__data__.showPoints && pts.length > 0) {
+          this._points_group.innerHTML = "";
+          pts.forEach((pt) => {
+            var _a;
+            const dot = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+            dot.setAttribute("cx", pt.x.toString());
+            dot.setAttribute("cy", pt.y.toString());
+            dot.setAttribute("r", this.graphUnitsForPixels(2.5).toString());
+            dot.setAttribute("fill", this.__data__.color.toString());
+            dot.setAttribute("opacity", "0.7");
+            (_a = this._points_group) == null ? void 0 : _a.appendChild(dot);
+          });
+          this._points_group.style.display = "block";
+        } else {
+          this._points_group.style.display = "none";
+        }
+      }
+      if (this._tip_el && this.__data__.showTips) {
+        if (pts.length > 0) {
+          const lastPt = pts[pts.length - 1];
+          this._tip_el.setAttribute("cx", lastPt.x.toString());
+          this._tip_el.setAttribute("cy", lastPt.y.toString());
+          this._tip_el.setAttribute("fill", this.__data__.color.toString());
+          this._tip_el.setAttribute("r", this.graphUnitsForPixels(4).toString());
+          this._tip_el.setAttribute("stroke-width", this.graphUnitsForPixels(1.5).toString());
+          this._tip_el.style.display = "block";
+        } else {
+          this._tip_el.style.display = "none";
+        }
+      }
+    }
+    draw() {
+      if (this.svg_element && !this.svg_element.parentElement) {
+        this.parent.appendChild(this.svg_element);
+      }
+      this.update();
+    }
+  };
+  __name(_QETrajectory, "QETrajectory");
+  let QETrajectory = _QETrajectory;
   const { ArrayTools } = Tools;
   const _QEArray = class _QEArray extends Array {
     constructor(...args) {
@@ -2323,7 +2847,8 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
     "Edge": QELine,
     "TaperedEdge": QELine,
     "TaperedWeightedMidpointEdge": QELine,
-    "NodeEdge": QELine
+    "NodeEdge": QELine,
+    "Trajectory": QETrajectory
   };
   const _QELayer = class _QELayer {
     constructor(__data__, parent, graph, __children__ = new QEArray()) {
@@ -2347,8 +2872,14 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
           (obj) => !this.__children__.some((child) => childId(child) === obj.ID)
         );
         adding.forEach((obj) => {
-          const obj_name = obj.constructor.name;
-          const ena_element = new QEElementConstructors[obj_name](obj, this.svg_element, this.graph);
+          const obj_name = obj._typeName || obj.constructor.name;
+          let constructor = QEElementConstructors[obj_name];
+          if (!constructor) {
+            if (obj instanceof Trajectory) constructor = QETrajectory;
+            else if (obj instanceof Point) constructor = QEPoint;
+            else constructor = QELine;
+          }
+          const ena_element = new constructor(obj, this.svg_element, this.graph);
           this.__children__.push(ena_element);
         });
         updating.forEach((child) => {
@@ -2427,6 +2958,9 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
       this.customX = customX;
       this.customY = customY;
       this._visible = false;
+      this._offsetX = 0;
+      this._offsetY = 0;
+      this.pinned = false;
       this.svg_element = this._create();
       if (displayMode === Label.DISPLAY_TYPES.ON) {
         this._visible = true;
@@ -2440,10 +2974,52 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
       const el = document.createElementNS("http://www.w3.org/2000/svg", "text");
       el.textContent = this.text;
       el.setAttribute("data-label-for", this.point.ID);
-      el.setAttribute("pointer-events", "none");
+      el.setAttribute("pointer-events", "auto");
+      el.style.cursor = "grab";
+      this._attachDrag(el);
       this.parent.appendChild(el);
       return el;
     }
+    /** Drag to reposition; pins the label open and emits qe-label-move on drop. */
+    _attachDrag(el) {
+      el.addEventListener("mousedown", (ev) => {
+        ev.preventDefault();
+        ev.stopPropagation();
+        const svg = el.ownerSVGElement;
+        if (!svg) return;
+        const toUser = /* @__PURE__ */ __name((cx, cy) => {
+          const p = svg.createSVGPoint();
+          p.x = cx;
+          p.y = cy;
+          const m = svg.getScreenCTM();
+          return m ? p.matrixTransform(m.inverse()) : { x: 0, y: 0 };
+        }, "toUser");
+        const start = toUser(ev.clientX, ev.clientY);
+        const baseX = this._offsetX, baseY = this._offsetY;
+        el.style.cursor = "grabbing";
+        const onMove = /* @__PURE__ */ __name((e) => {
+          const p = toUser(e.clientX, e.clientY);
+          this._offsetX = baseX + (p.x - start.x);
+          this._offsetY = baseY + (p.y - start.y);
+          this.pinned = true;
+          this._visible = true;
+          this.svg_element.setAttribute("display", "block");
+          this.update();
+        }, "onMove");
+        const onUp = /* @__PURE__ */ __name(() => {
+          document.removeEventListener("mousemove", onMove);
+          document.removeEventListener("mouseup", onUp);
+          el.style.cursor = "grab";
+          this.graph.dispatchEvent(new CustomEvent("qe-label-move", {
+            detail: { id: this.point.ID, transform: { x: this._offsetX, y: this._offsetY } },
+            bubbles: true,
+            composed: true
+          }));
+        }, "onUp");
+        document.addEventListener("mousemove", onMove);
+        document.addEventListener("mouseup", onUp);
+      });
+    }
     /**
      * Recompute position and font-size from current graph extents.
      * No-ops when the label is hidden (AUTO/CLICK modes while not hovered/clicked).
@@ -2492,6 +3068,9 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
       }
       this.svg_element.setAttribute("x", x.toString());
       this.svg_element.setAttribute("y", y.toString());
+      if (this._offsetX || this._offsetY) {
+        this.svg_element.setAttribute("transform", `translate(${this._offsetX}, ${this._offsetY})`);
+      }
       this.svg_element.setAttribute("font-size", fontSize.toString());
       this.svg_element.setAttribute("font-family", "system-ui, sans-serif");
       this.svg_element.setAttribute("font-weight", "500");
@@ -2505,6 +3084,7 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
       this.update();
     }
     hide() {
+      if (this.pinned) return;
       this._visible = false;
       this.svg_element.setAttribute("display", "none");
     }
@@ -2540,10 +3120,22 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
   __name(_QEEdgesElement, "QEEdgesElement");
   _QEEdgesElement.tagName = "qe-edges";
   let QEEdgesElement = _QEEdgesElement;
+  const _QETrajectoriesElement = class _QETrajectoriesElement extends HTMLElement {
+  };
+  __name(_QETrajectoriesElement, "QETrajectoriesElement");
+  _QETrajectoriesElement.tagName = "qe-trajectories";
+  let QETrajectoriesElement = _QETrajectoriesElement;
+  const _QEAxesElement = class _QEAxesElement extends HTMLElement {
+  };
+  __name(_QEAxesElement, "QEAxesElement");
+  _QEAxesElement.tagName = "qe-axes";
+  let QEAxesElement = _QEAxesElement;
   customElements.define(QENodesElement.tagName, QENodesElement);
   customElements.define(QEMeansElement.tagName, QEMeansElement);
   customElements.define(QEPointsElement.tagName, QEPointsElement);
   customElements.define(QEEdgesElement.tagName, QEEdgesElement);
+  customElements.define(QETrajectoriesElement.tagName, QETrajectoriesElement);
+  customElements.define(QEAxesElement.tagName, QEAxesElement);
   const GROUP_PALETTE = [
     "#4477AA",
     "#EE6677",
@@ -2575,6 +3167,14 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
     return { halfW: t95 * seX, halfH: t95 * seY };
   }
   __name(computeCIRect, "computeCIRect");
+  const MEAN_MAX_FRACTION_OF_INTERVAL = 0.5;
+  function capMeanToInterval(meanPt, halfW, halfH) {
+    if (!meanPt) return;
+    const half = Math.min(Math.abs(halfW), Math.abs(halfH));
+    if (!(half > 0)) return;
+    meanPt.meta = { ...meanPt.meta ?? {}, maxRadius: half * MEAN_MAX_FRACTION_OF_INTERVAL };
+  }
+  __name(capMeanToInterval, "capMeanToInterval");
   function readIntervalBounds(row, dim0, dim1) {
     const get = /* @__PURE__ */ __name((col) => {
       const i = row.names.indexOf(col);
@@ -2588,6 +3188,11 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
     return { x_low: xLow, x_high: xHigh, y_low: yLow, y_high: yHigh };
   }
   __name(readIntervalBounds, "readIntervalBounds");
+  function parseColorScale(attr) {
+    const a = attr == null ? void 0 : attr.trim().toLowerCase();
+    return a === "plot" || a === "absolute" ? a : "model";
+  }
+  __name(parseColorScale, "parseColorScale");
   function parseLabelMode(attr, defaultMode) {
     switch (attr == null ? void 0 : attr.toLowerCase()) {
       case "on":
@@ -2617,6 +3222,17 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
       this._nodeLabels = /* @__PURE__ */ new Map();
       this._meanLabels = /* @__PURE__ */ new Map();
       this._pointLabels = /* @__PURE__ */ new Map();
+      this._showAxes = false;
+      this._axisXText = null;
+      this._axisYText = null;
+      this._axisLabelEls = /* @__PURE__ */ new Map();
+      this._magnifyText = null;
+      this._magnifyEl = null;
+      this._animateMs = 0;
+      this._tweenRaf = null;
+      this._highlight = { edges: /* @__PURE__ */ new Set(), nodes: /* @__PURE__ */ new Set() };
+      this._highlightGroup = null;
+      this._tooltipEl = null;
       this.graph = this;
       this.parent = null;
       this.__data__ = new Graph(DefaultGraphOptions);
@@ -2624,16 +3240,22 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
       this.svg_element = this.create();
       console.log("Created ena-graph svg element: ", this.svg_element);
       document.addEventListener("model-updated", (e) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m;
         if (this._vizena && e.target !== this._vizena) return;
         const model = e.detail;
         if (!model) return;
+        this._animateMs = this.hasAttribute("animate") ? parseInt(this.getAttribute("animate") || "", 10) || 300 : 0;
+        const tweenFrom = this._animateMs > 0 && this._hasModel ? this._captureTween() : null;
         this._hasModel = true;
         const dims = model.dimensions;
         const unitIdCol = model.unit_id_col;
         const nodeIdCol = model.node_id_col;
         const groupColName = model.group_col;
         const config = this._readLayerConfig();
+        this._showAxes = config.showAxes;
+        this._axisXText = config.axisXLabel === null ? null : config.axisXLabel || String((dims == null ? void 0 : dims[0]) ?? "x");
+        this._magnifyText = config.edgeMagnify == null ? null : `(scaled ${config.edgeMagnify.toFixed(1)}x)`;
+        this._axisYText = config.axisYLabel === null ? null : config.axisYLabel || String((dims == null ? void 0 : dims[1]) ?? "y");
         const groupColorMap = {};
         if (groupColName && ((_a = model.points) == null ? void 0 : _a.names)) {
           const groupCol = model.points.col(groupColName);
@@ -2667,7 +3289,9 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
         }, "getExtent");
         const maxNodeExtent = ((_c = model.nodes) == null ? void 0 : _c.rows) ? getExtent(model.nodes.rows()) : 0;
         const maxPointExtent = ((_d = model.points) == null ? void 0 : _d.rows) ? getExtent(model.points.rows()) : 0;
-        const pointScale = scalePointsEnabled && maxPointExtent > 0 && maxNodeExtent > 0 ? maxNodeExtent / maxPointExtent : 1;
+        const maxTrajExtent = ((_e = model.trajectories) == null ? void 0 : _e.rows) ? getExtent(model.trajectories.rows()) : 0;
+        const effectivePointExtent = maxPointExtent > 0 ? maxPointExtent : maxTrajExtent;
+        const pointScale = scalePointsEnabled && effectivePointExtent > 0 && maxNodeExtent > 0 ? maxNodeExtent / effectivePointExtent : 1;
         const labelNodes = config.labelNodes;
         const labelMeans = config.labelMeans;
         const labelPoints = config.labelPoints;
@@ -2690,7 +3314,7 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
         }, "rowToPoint");
         const groupSums = {};
         const showUnitPoints = config.showPoints;
-        if ((_e = model.points) == null ? void 0 : _e.rows) {
+        if ((_f = model.points) == null ? void 0 : _f.rows) {
           const pointsLayer = this.__children__.search("__children__", "points");
           if (pointsLayer) {
             model.points.rows().forEach((row) => {
@@ -2699,6 +3323,16 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
               const colorStr = group ? groupColorMap[group] ?? "#888888" : "#888888";
               if (showUnitPoints) {
                 const pt = rowToPoint(row, unitIdCol, colorStr, pointScale);
+                pt.size = config.pointSize ?? 2.5;
+                pt.meta = {
+                  ...pt.meta ?? {},
+                  stroke: "#ffffff",
+                  kind: "point",
+                  name: pt.ID,
+                  group: group ?? void 0,
+                  unit: pt.ID,
+                  fixedSize: config.pointFixedSize
+                };
                 this.__data__.points.set(pt.ID, pt);
                 pointsLayer.__data__.objects.set(pt.ID, pt);
               }
@@ -2716,7 +3350,7 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
                 groupSums[group].n += 1;
               }
             });
-            const hasGroupsFrame = !!(((_f = model.groups) == null ? void 0 : _f.rows) && model.groups.rows().length > 0);
+            const hasGroupsFrame = !!(((_g = model.groups) == null ? void 0 : _g.rows) && model.groups.rows().length > 0);
             const activeGroupRows = config.showMeans && hasGroupsFrame ? model.groups.rows().filter((r) => {
               const g = r.rowName ?? String(r[0]);
               return activeMeanGroups.size === 0 || activeMeanGroups.has(g);
@@ -2748,19 +3382,26 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
                   const meanPt = new Point({
                     ID: `mean-${group}`,
                     dimensions: [mx, my],
-                    meta: { group }
+                    meta: { kind: "mean", name: group, group, fixedSize: config.meanFixedSize }
                   });
                   meanPt.color = new Color(color);
                   meanPt.size = 4;
                   meanPt.shape = "rect";
                   this.__data__.points.set(meanPt.ID, meanPt);
                   pointsLayer.__data__.objects.set(meanPt.ID, meanPt);
-                  const bounds = readIntervalBounds(row, dims[0], dims[1]);
-                  if (bounds) {
+                  const bounds = config.showCI ? readIntervalBounds(row, dims[0], dims[1]) : null;
+                  if (!bounds) {
+                    const stale = this._ciRects.get(group);
+                    if (stale) {
+                      stale.remove();
+                      this._ciRects.delete(group);
+                    }
+                  } else {
                     const rect_x = bounds.x_low * pointScale;
                     const rect_y = -bounds.y_high * pointScale;
                     const rect_width = (bounds.x_high - bounds.x_low) * pointScale;
                     const rect_height = (bounds.y_high - bounds.y_low) * pointScale;
+                    capMeanToInterval(meanPt, rect_width / 2, rect_height / 2);
                     let el = this._ciRects.get(group);
                     if (!el) {
                       el = document.createElementNS("http://www.w3.org/2000/svg", "rect");
@@ -2786,7 +3427,7 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
                   const meanPt = new Point({
                     ID: `mean-${group}`,
                     dimensions: [x / n * pointScale, -(y / n) * pointScale],
-                    meta: { group }
+                    meta: { kind: "mean", name: group, group, fixedSize: config.meanFixedSize }
                   });
                   meanPt.color = new Color(color);
                   meanPt.size = 4;
@@ -2802,7 +3443,7 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
                       this._ciRects.delete(g);
                     }
                   });
-                  if ((_g = model.confidence) == null ? void 0 : _g.rows) {
+                  if ((_h = model.confidence) == null ? void 0 : _h.rows) {
                     model.confidence.rows().forEach((row) => {
                       const groupIdx = row.names.indexOf(groupColName ?? "group");
                       const group = groupIdx >= 0 ? String(row[groupIdx]) : row.rowName ?? null;
@@ -2814,6 +3455,11 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
                       const rect_y = -bounds.y_high * pointScale;
                       const rect_width = (bounds.x_high - bounds.x_low) * pointScale;
                       const rect_height = (bounds.y_high - bounds.y_low) * pointScale;
+                      capMeanToInterval(
+                        this.__data__.points.get(`mean-${group}`),
+                        rect_width / 2,
+                        rect_height / 2
+                      );
                       let el = this._ciRects.get(group);
                       if (!el) {
                         el = document.createElementNS("http://www.w3.org/2000/svg", "rect");
@@ -2841,6 +3487,11 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
                       const rawVarY = y2 / n - μy * μy;
                       const { halfW, halfH } = computeCIRect(rawVarX, rawVarY, n, pointScale);
                       const cx = μx * pointScale, cy = -μy * pointScale;
+                      capMeanToInterval(
+                        this.__data__.points.get(`mean-${group}`),
+                        halfW,
+                        halfH
+                      );
                       let el = this._ciRects.get(group);
                       if (!el) {
                         el = document.createElementNS("http://www.w3.org/2000/svg", "rect");
@@ -2862,7 +3513,7 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
                     });
                   }
                 }
-                if ((_h = model.outlier) == null ? void 0 : _h.rows) {
+                if ((_i = model.outlier) == null ? void 0 : _i.rows) {
                   this._outlierRects.forEach((el, g) => {
                     if (!groupColorMap[g]) {
                       el.remove();
@@ -2951,20 +3602,74 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
             pointsLayer.__data__.__state__.setVariable("layer_updated", pointsLayer.__data__);
           }
         }
+        const trajectoriesLayer = this.__children__.search("__children__", "trajectories");
+        const trajectoriesEnabled = config.showTrajectories;
+        if (trajectoriesEnabled && trajectoriesLayer) {
+          trajectoriesLayer.__data__.objects.clear();
+          this.__data__.trajectories.clear();
+          const trajSource = ((_j = model.trajectories) == null ? void 0 : _j.rows) ? model.trajectories : model.points;
+          if (trajSource == null ? void 0 : trajSource.rows) {
+            const unitRows = {};
+            const selectedUnits = config.trajectoryUnits ? config.trajectoryUnits.split(",").map((s) => s.trim()) : null;
+            trajSource.rows().forEach((row) => {
+              const uIdx = row.names.indexOf(unitIdCol) >= 0 ? row.names.indexOf(unitIdCol) : row.names.indexOf("unit") >= 0 ? row.names.indexOf("unit") : row.names.indexOf("ENA_UNIT") >= 0 ? row.names.indexOf("ENA_UNIT") : -1;
+              const unit = uIdx >= 0 ? String(row[uIdx]) : row.rowName || "unit-1";
+              if (selectedUnits && !selectedUnits.includes(unit)) return;
+              const xIdx = row.names.indexOf(dims[0]);
+              const yIdx = dims.length > 1 ? row.names.indexOf(dims[1]) : -1;
+              const tIdx = row.names.indexOf("time") >= 0 ? row.names.indexOf("time") : row.names.indexOf("ActivityNumber") >= 0 ? row.names.indexOf("ActivityNumber") : row.names.indexOf("RowID") >= 0 ? row.names.indexOf("RowID") : -1;
+              const time = tIdx >= 0 ? Number(row[tIdx]) : unitRows[unit] ? unitRows[unit].length + 1 : 1;
+              if (xIdx >= 0 && yIdx >= 0) {
+                if (!unitRows[unit]) unitRows[unit] = [];
+                unitRows[unit].push({
+                  x: Number(row[xIdx]) * pointScale,
+                  y: -Number(row[yIdx]) * pointScale,
+                  time
+                });
+              }
+            });
+            const unitKeys = Object.keys(unitRows);
+            unitKeys.forEach((unitKey, uIdx) => {
+              const rawPts = unitRows[unitKey];
+              if (rawPts.length === 0) return;
+              const colorStr = GROUP_PALETTE[uIdx % GROUP_PALETTE.length];
+              const trajObj = new Trajectory({
+                ID: `traj-${unitKey}`,
+                unitId: unitKey,
+                color: new Color(colorStr),
+                lineStyle: config.trajectoryLineStyle,
+                strokeWidth: config.trajectoryStrokeWidth,
+                strokeWidthRange: config.trajectoryStrokeWidthRange,
+                opacityRange: config.trajectoryOpacityRange,
+                smooth: config.trajectorySmooth,
+                maxDegree: config.trajectoryMaxDegree,
+                degreeSelection: config.trajectoryDegreeSelection,
+                currentTime: config.trajectoryPlayhead ?? Infinity,
+                showPoints: config.trajectoryShowPoints,
+                showTips: config.trajectoryShowTips,
+                points: rawPts.map((p) => ({ x: p.x, y: p.y, time: p.time }))
+              });
+              this.__data__.trajectories.set(unitKey, trajObj);
+              trajectoriesLayer.__data__.objects.set(trajObj.ID, trajObj);
+            });
+          }
+          trajectoriesLayer.__data__.__state__.setVariable("layer_updated", trajectoriesLayer.__data__);
+        }
         const networkLayer = this.__children__.search("__children__", "network");
         const edgeLayer = networkLayer == null ? void 0 : networkLayer.__children__.search("__children__", "edges");
         const nodeLayer = networkLayer == null ? void 0 : networkLayer.__children__.search("__children__", "nodes");
         const edgenodeLayer = networkLayer == null ? void 0 : networkLayer.__children__.search("__children__", "edgenodes");
         const edgesEnabled = config.showEdges;
-        if (((_i = model.nodes) == null ? void 0 : _i.rows) && nodeLayer) {
+        if (((_k = model.nodes) == null ? void 0 : _k.rows) && nodeLayer) {
           model.nodes.rows().forEach((row) => {
             const pt = rowToPoint(row, nodeIdCol, "#444444");
             pt.size = 2;
+            pt.meta = { ...pt.meta ?? {}, kind: "node", name: pt.ID };
             nodeLayer.__data__.objects.set(pt.ID, pt);
           });
-          if (edgesEnabled && edgeLayer && ((_j = model.edges) == null ? void 0 : _j.rows)) {
+          if (edgesEnabled && edgeLayer && ((_l = model.edges) == null ? void 0 : _l.rows)) {
             const unitGroupMap = {};
-            if (groupColName && ((_k = model.points) == null ? void 0 : _k.rows)) {
+            if (groupColName && ((_m = model.points) == null ? void 0 : _m.rows)) {
               model.points.rows().forEach((row) => {
                 const qIdx = row.names.indexOf(unitIdCol);
                 const gIdx = row.names.indexOf(groupColName);
@@ -3058,21 +3763,46 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
               });
             }
             const isDirected = !!model.directed;
-            const nonSelfWeights = drawEdges.filter((e2) => e2.pair[0] !== e2.pair[1]).map((e2) => e2.weight);
-            const maxEdgeWeight = nonSelfWeights.length > 0 ? Math.max(...nonSelfWeights) : 1e-9;
-            const selfWeights = drawEdges.filter((e2) => e2.pair[0] === e2.pair[1]).map((e2) => e2.weight);
-            const maxSelfWeight = selfWeights.length > 0 ? Math.max(...selfWeights) : 0;
+            const widthFrac = widthPerWeight(config.edgeWidth) * (config.edgeMagnify ?? 1);
+            const rangeOf = /* @__PURE__ */ __name((ws) => {
+              const nz = ws.map(Math.abs).filter((v) => v > 0);
+              return nz.length ? [Math.min(...nz), Math.max(...nz)] : [0, 0];
+            }, "rangeOf");
+            const modelRange = /* @__PURE__ */ __name((self2) => {
+              const vals = [];
+              edgePairs.forEach(({ col, pair }) => {
+                if (pair[0] === pair[1] !== self2) return;
+                const column = model.edges.col(col);
+                if (column) for (const v of column) vals.push(Number(v));
+              });
+              return rangeOf(vals);
+            }, "modelRange");
+            const plotRange = /* @__PURE__ */ __name((self2) => rangeOf(drawEdges.filter((e2) => e2.pair[0] === e2.pair[1] === self2).map((e2) => e2.weight)), "plotRange");
+            const cscale = config.edgeColorScale;
+            const colourRange = /* @__PURE__ */ __name((self2) => cscale === "plot" ? plotRange(self2) : modelRange(self2), "colourRange");
+            const lineRange = colourRange(false), selfRange = colourRange(true);
+            const colourOf = /* @__PURE__ */ __name((w, self2) => {
+              if (cscale === "absolute") {
+                const a = Math.min(1, Math.abs(w));
+                return { saturation: a, opacity: a };
+              }
+              const [lo, hi] = self2 ? selfRange : lineRange;
+              return { saturation: rampFor(w, lo, hi, SATURATION_RANGE), opacity: rampFor(w, lo, hi, OPACITY_RANGE) };
+            }, "colourOf");
             const nodeWeightSum = {};
             drawEdges.forEach(({ pair, weight }) => {
               const isSelf = pair[0] === pair[1];
               if (isSelf && !isDirected) return;
-              nodeWeightSum[pair[0]] = (nodeWeightSum[pair[0]] ?? 0) + weight;
-              if (!isSelf) {
-                nodeWeightSum[pair[1]] = (nodeWeightSum[pair[1]] ?? 0) + weight;
+              const add = /* @__PURE__ */ __name((id) => {
+                nodeWeightSum[id] = (nodeWeightSum[id] ?? 0) + Math.abs(weight);
+              }, "add");
+              if (isDirected) {
+                add(pair[1]);
+                return;
               }
+              add(pair[0]);
+              add(pair[1]);
             });
-            const maxNodeWeight = Math.max(1, ...Object.values(nodeWeightSum));
-            const nodeSizes = {};
             model.nodes.rows().forEach((row) => {
               const codeIdx = row.names.indexOf(nodeIdCol);
               const id = codeIdx >= 0 ? String(row[codeIdx]) : "";
@@ -3080,8 +3810,12 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
               const pt = nodeLayer.__data__.objects.get(id);
               if (!pt) return;
               const w = nodeWeightSum[id] ?? 0;
-              pt.size = 2 + w / maxNodeWeight * 3;
-              nodeSizes[id] = pt.size;
+              const unconnected = !(w > 0);
+              pt.size = unconnected ? config.hideUnconnectedNodes ? 0 : UNCONNECTED_NODE_SIZE : nodeSizeForEdges(w, widthFrac);
+              pt.meta = {
+                ...pt.meta ?? {},
+                hidden: unconnected && config.hideUnconnectedNodes
+              };
             });
             const totalWeightByPair = {};
             if (isDirected) {
@@ -3090,15 +3824,13 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
                 totalWeightByPair[key] = (totalWeightByPair[key] ?? 0) + weight;
               });
             }
-            ((_l = this.__data__.extremes) == null ? void 0 : _l.x_max) ?? 1;
             drawEdges.forEach(({ col, pair, weight, color }) => {
               const fromNode = nodeLayer.__data__.objects.get(pair[0]);
               const toNode = nodeLayer.__data__.objects.get(pair[1]);
               if (!fromNode || !toNode) return;
               const isSelf = pair[0] === pair[1];
               if (isSelf && !isDirected) return;
-              const classMax = isSelf ? Math.max(maxSelfWeight, 1e-9) : maxEdgeWeight;
-              const opacity = Math.min(1, weight / classMax);
+              const { saturation, opacity } = colourOf(weight, isSelf);
               const fromPt = new Point({ ID: `${pair[0]}-src`, dimensions: [fromNode.x, fromNode.y], meta: {} });
               const toPt = new Point({ ID: `${pair[1]}-dst`, dimensions: [toNode.x, toNode.y], meta: {} });
               let edgeLine;
@@ -3122,16 +3854,17 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
               edgeLine.meta = {
                 isMeanEdge: true,
                 weight,
-                // NodeEdge compares within the self-loop class; cross-pair edges
-                // compare within their own class.  Store the correct denominator
-                // so QELine.update() can compute opacity and display size properly.
-                maxWeight: isSelf ? maxSelfWeight : maxEdgeWeight,
+                // Width per unit weight (extent units), shared by all marks.
+                widthFrac,
+                saturation,
                 opacity,
                 isDirected,
                 isSelf,
-                // nodeSize is needed by QELine.update() to compute the NodeEdge
-                // display radius at update time (when extremes.x_max is available).
-                nodeSize: isSelf ? nodeSizes[pair[0]] ?? 2 : void 0
+                // Identity for the qe-edge-* interaction events.
+                source: pair[0],
+                target: pair[1],
+                group: groupAttr ?? void 0,
+                unit: unitAttr ?? void 0
               };
               const targetLayer = isSelf ? edgenodeLayer ?? edgeLayer : edgeLayer;
               targetLayer.__data__.objects.set(edgeLine.ID, edgeLine);
@@ -3139,7 +3872,15 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
             edgeLayer.__data__.__state__.setVariable("layer_updated", edgeLayer.__data__);
             if (edgenodeLayer) edgenodeLayer.__data__.__state__.setVariable("layer_updated", edgenodeLayer.__data__);
           }
-          if (labelSvg && labelNodes !== 0) {
+          const nodesVisible = config.showNodes;
+          if (nodeLayer.svg_element) {
+            nodeLayer.svg_element.style.display = nodesVisible ? "" : "none";
+          }
+          if (!nodesVisible) {
+            this._nodeLabels.forEach((lbl) => lbl.remove());
+            this._nodeLabels.clear();
+          }
+          if (labelSvg && labelNodes !== 0 && nodesVisible) {
             this._nodeLabels.forEach((lbl, id) => {
               if (!nodeLayer.__data__.objects.get(id)) {
                 lbl.remove();
@@ -3147,11 +3888,17 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
               }
             });
             model.nodes.rows().forEach((row) => {
+              var _a2, _b2;
               const codeIdx = row.names.indexOf(nodeIdCol);
               const id = codeIdx >= 0 ? String(row[codeIdx]) : "";
               if (!id) return;
               const pt = nodeLayer.__data__.objects.get(id);
               if (!pt) return;
+              if ((_a2 = pt.meta) == null ? void 0 : _a2.hidden) {
+                (_b2 = this._nodeLabels.get(id)) == null ? void 0 : _b2.remove();
+                this._nodeLabels.delete(id);
+                return;
+              }
               let lbl = this._nodeLabels.get(id);
               if (!lbl) {
                 lbl = new QELabel(id, pt, labelSvg, this, labelNodes);
@@ -3168,6 +3915,7 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
         if (axisPointsLayer) this.__data__.__state__.setVariable("graph_updated_axis_points", axisPointsLayer.__data__.objects);
         if (axisLinesLayer) this.__data__.__state__.setVariable("graph_updated_axis_lines", axisLinesLayer.__data__.objects);
         this.update();
+        if (tweenFrom) this._runTween(tweenFrom);
       });
     }
     static get observedAttributes() {
@@ -3208,17 +3956,27 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
     // should render.  Called once at the top of every model-updated handler so
     // all rendering decisions are derived from a single snapshot.
     _readLayerConfig() {
+      var _a;
       const nodesEl = this.querySelector("qe-nodes");
       const meansEl = this.querySelector("qe-means");
       const pointsEl = this.querySelector("qe-points");
       const edgesEl = this.querySelector("qe-edges");
+      const trajectoriesEl = this.querySelector("qe-trajectories");
+      const axesEl = this.querySelector("qe-axes");
       const labelsShorthand = this.getAttribute("labels");
       return {
-        // Nodes — always rendered (coordinate anchors); <qe-nodes> controls labels.
+        // Nodes — always placed from the model (they anchor the coordinate
+        // space); <qe-nodes> presence draws them, like every other layer.
         labelNodes: parseLabelMode(
           (nodesEl == null ? void 0 : nodesEl.getAttribute("label")) ?? this.getAttribute("label-nodes") ?? labelsShorthand,
           Label.DISPLAY_TYPES.ON
         ),
+        showNodes: !!nodesEl,
+        edgeWidth: (() => {
+          const v = Number(this.getAttribute("edge-width"));
+          return Number.isFinite(v) && v > 0 && v <= 1 ? v : DEFAULT_EDGE_WIDTH;
+        })(),
+        hideUnconnectedNodes: ((_a = nodesEl == null ? void 0 : nodesEl.getAttribute("unconnected")) == null ? void 0 : _a.toLowerCase()) === "hide",
         scalePoints: this.getAttribute("scale-points") !== "false",
         // Means — presence of <qe-means> = show; absence = hide.
         showMeans: !!meansEl,
@@ -3228,20 +3986,56 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
           (meansEl == null ? void 0 : meansEl.getAttribute("label")) ?? this.getAttribute("label-means") ?? labelsShorthand,
           Label.DISPLAY_TYPES.ON
         ),
+        // fixed-size keeps mean markers a constant on-screen px size (webENA parity).
+        meanFixedSize: !!meansEl && meansEl.hasAttribute("fixed-size"),
         // Points — presence of <qe-points> = show unit dots.
         showPoints: !!pointsEl,
         labelPoints: parseLabelMode(
           (pointsEl == null ? void 0 : pointsEl.getAttribute("label")) ?? this.getAttribute("label-points") ?? labelsShorthand,
           Label.DISPLAY_TYPES.OFF
         ),
+        pointSize: (pointsEl == null ? void 0 : pointsEl.getAttribute("size")) ? parseFloat(pointsEl.getAttribute("size")) : null,
+        // fixed-size keeps unit dots a constant on-screen px size (webENA parity).
+        pointFixedSize: !!pointsEl && pointsEl.hasAttribute("fixed-size"),
         // Edges — presence of <qe-edges> = draw a network.
         showEdges: !!edgesEl,
         edgeGroup: (edgesEl == null ? void 0 : edgesEl.getAttribute("group")) ?? null,
         edgeUnit: (edgesEl == null ? void 0 : edgesEl.getAttribute("unit")) ?? null,
         edgeCompare: (edgesEl == null ? void 0 : edgesEl.getAttribute("compare")) ?? null,
-        edgeAlso: (edgesEl == null ? void 0 : edgesEl.getAttribute("also")) ?? null
+        edgeAlso: (edgesEl == null ? void 0 : edgesEl.getAttribute("also")) ?? null,
+        edgeColorScale: parseColorScale((edgesEl == null ? void 0 : edgesEl.getAttribute("color-scale")) ?? null),
+        edgeMagnify: (edgesEl == null ? void 0 : edgesEl.hasAttribute("magnify")) ? (() => {
+          const v = Number(edgesEl.getAttribute("magnify"));
+          return Number.isFinite(v) && v > 0 ? v : 1;
+        })() : null,
+        // Trajectories — presence of <qe-trajectories> = draw cognitive trajectories
+        showTrajectories: !!trajectoriesEl,
+        trajectoryUnits: (trajectoriesEl == null ? void 0 : trajectoriesEl.getAttribute("units")) ?? null,
+        trajectorySmooth: (trajectoriesEl == null ? void 0 : trajectoriesEl.getAttribute("smooth")) ?? "none",
+        trajectoryMaxDegree: (trajectoriesEl == null ? void 0 : trajectoriesEl.getAttribute("max-degree")) ? parseInt(trajectoriesEl.getAttribute("max-degree"), 10) : 3,
+        trajectoryDegreeSelection: (trajectoriesEl == null ? void 0 : trajectoriesEl.getAttribute("degree-selection")) ?? "loocv_2d",
+        trajectoryShowPoints: (trajectoriesEl == null ? void 0 : trajectoriesEl.getAttribute("points")) !== "false",
+        trajectoryShowTips: (trajectoriesEl == null ? void 0 : trajectoriesEl.getAttribute("tips")) !== "false",
+        trajectoryPlayhead: (trajectoriesEl == null ? void 0 : trajectoriesEl.getAttribute("playhead")) ? parseFloat(trajectoriesEl.getAttribute("playhead")) : null,
+        trajectoryLineStyle: (trajectoriesEl == null ? void 0 : trajectoriesEl.getAttribute("line-style")) ?? "uniform",
+        trajectoryStrokeWidth: (trajectoriesEl == null ? void 0 : trajectoriesEl.getAttribute("stroke-width")) ? parseFloat(trajectoriesEl.getAttribute("stroke-width")) : 2,
+        trajectoryStrokeWidthRange: this._parseNumberPair(trajectoriesEl == null ? void 0 : trajectoriesEl.getAttribute("stroke-width-range"), [1, 6]),
+        trajectoryOpacityRange: this._parseNumberPair(trajectoriesEl == null ? void 0 : trajectoriesEl.getAttribute("opacity-range"), [0.3, 1]),
+        // Axes — presence of <qe-axes> = draw axis lines. The x / y attributes add
+        // a per-axis label: a value is used verbatim, an empty attribute falls back
+        // to the dimension name (resolved later, where dims are known). null = no
+        // label for that axis.
+        showAxes: !!axesEl,
+        axisXLabel: (axesEl == null ? void 0 : axesEl.hasAttribute("x")) ? axesEl.getAttribute("x") ?? "" : null,
+        axisYLabel: (axesEl == null ? void 0 : axesEl.hasAttribute("y")) ? axesEl.getAttribute("y") ?? "" : null
       };
     }
+    _parseNumberPair(value, fallback) {
+      if (!value) return fallback;
+      const parts = value.split(",").map((part) => Number(part.trim()));
+      if (parts.length < 2 || !parts.every(Number.isFinite)) return fallback;
+      return [parts[0], parts[1]];
+    }
     attributeChangedCallback(_name2, oldValue, newValue) {
       if (oldValue === newValue) return;
       this._scheduleRerender();
@@ -3250,9 +4044,11 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
       var _a;
       const w = this.getAttribute("width");
       const h = this.getAttribute("height");
+      this.style.display = "block";
       if (w) this.style.width = isNaN(Number(w)) ? w : `${w}px`;
       if (h) this.style.height = isNaN(Number(h)) ? h : `${h}px`;
       this.appendChild(this.svg_element);
+      _QEGraphElement._instances.add(this);
       this._childObserver = new MutationObserver(() => this._scheduleRerender());
       this._childObserver.observe(this, {
         childList: true,
@@ -3263,14 +4059,32 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
           "unit",
           "compare",
           "also",
+          "color-scale",
+          "magnify",
           "groups",
           "confidence",
           "label",
+          "unconnected",
           "scale-points",
+          "edge-width",
           "labels",
           "label-nodes",
           "label-means",
-          "label-points"
+          "label-points",
+          "units",
+          "smooth",
+          "degree",
+          "points",
+          "tips",
+          "playhead",
+          "line-style",
+          "stroke-width",
+          "stroke-width-range",
+          "opacity-range",
+          "x",
+          "y",
+          "size",
+          "fixed-size"
         ]
       });
       const forId = this.getAttribute("for");
@@ -3290,13 +4104,283 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
       }
     }
     disconnectedCallback() {
-      var _a;
+      var _a, _b;
       (_a = this._childObserver) == null ? void 0 : _a.disconnect();
       this._childObserver = null;
+      _QEGraphElement._instances.delete(this);
+      (_b = this._tooltipEl) == null ? void 0 : _b.remove();
+      this._tooltipEl = null;
+    }
+    /** All connected <qe-graph> instances (newest membership order). */
+    static instances() {
+      return [..._QEGraphElement._instances];
+    }
+    /** Look up a graph by its `id` or `plot-group` attribute. */
+    static getGraph(key) {
+      for (const g of _QEGraphElement._instances) {
+        if (g.id === key || g.getAttribute("plot-group") === key) return g;
+      }
+      return null;
+    }
+    /** Resolved code nodes with their current graph-space coordinates. */
+    getNodes() {
+      const layer = this.__children__.search("__children__", "nodes");
+      if (!layer) return [];
+      return [...layer.__data__.objects.values()].map((o) => {
+        var _a;
+        return {
+          id: o.ID,
+          name: ((_a = o.meta) == null ? void 0 : _a.name) ?? o.ID,
+          x: o.x,
+          y: o.y
+        };
+      });
+    }
+    /** Resolved edges of the current network with weights and direction. */
+    getEdges() {
+      const collect = /* @__PURE__ */ __name((name) => {
+        const l = this.__children__.search("__children__", name);
+        return l ? [...l.__data__.objects.values()] : [];
+      }, "collect");
+      return [...collect("edges"), ...collect("edgenodes")].map((o) => {
+        const m = o.meta ?? {};
+        return {
+          source: m.source,
+          target: m.target,
+          weight: m.weight ?? 0,
+          directed: !!m.isDirected,
+          self: !!m.isSelf
+        };
+      }).filter((e) => e.source != null && e.target != null);
+    }
+    /** Marks (circles/rects), undirected edge lines, and directed / self-edge
+     *  triangle paths all participate in tweening. */
+    _tweenTargets() {
+      return [...this.svg_element.querySelectorAll(
+        "circle[data-point-id], rect[data-point-id], line[data-edge-source], path[data-edge-source]"
+      )];
+    }
+    _readCoords(el) {
+      const tag = el.tagName.toLowerCase();
+      const n = /* @__PURE__ */ __name((a) => parseFloat(el.getAttribute(a) || "0"), "n");
+      if (tag === "circle") return { t: "c", cx: n("cx"), cy: n("cy") };
+      if (tag === "rect") return { t: "r", x: n("x"), y: n("y") };
+      if (tag === "line") return { t: "l", x1: n("x1"), y1: n("y1"), x2: n("x2"), y2: n("y2") };
+      if (tag === "path") {
+        const d = el.getAttribute("d") || "";
+        return { t: "p", d, nums: (d.match(_QEGraphElement._PATH_NUM_RE) || []).map(Number) };
+      }
+      return null;
+    }
+    /** Snapshot current tween-target positions keyed by element. */
+    _captureTween() {
+      const m = /* @__PURE__ */ new Map();
+      this._tweenTargets().forEach((el) => {
+        const c = this._readCoords(el);
+        if (c) m.set(el, c);
+      });
+      return m;
+    }
+    /** Animate each still-present element from its snapshot to its new position. */
+    _runTween(from) {
+      if (this._tweenRaf !== null) {
+        cancelAnimationFrame(this._tweenRaf);
+        this._tweenRaf = null;
+      }
+      const to = /* @__PURE__ */ new Map();
+      this._tweenTargets().forEach((el) => {
+        if (from.has(el)) {
+          const c = this._readCoords(el);
+          if (c) to.set(el, c);
+        }
+      });
+      if (!to.size) return;
+      const dur = this._animateMs;
+      const t0 = performance.now();
+      const ease = /* @__PURE__ */ __name((t) => t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2, "ease");
+      const lerp = /* @__PURE__ */ __name((a, b, k) => a + (b - a) * k, "lerp");
+      const step = /* @__PURE__ */ __name((now) => {
+        const t = Math.min(1, (now - t0) / dur);
+        const k = ease(t);
+        to.forEach((nc, el) => {
+          const oc = from.get(el);
+          if (!oc || oc.t !== nc.t) return;
+          if (nc.t === "c") {
+            el.setAttribute("cx", String(lerp(oc.cx, nc.cx, k)));
+            el.setAttribute("cy", String(lerp(oc.cy, nc.cy, k)));
+          } else if (nc.t === "r") {
+            el.setAttribute("x", String(lerp(oc.x, nc.x, k)));
+            el.setAttribute("y", String(lerp(oc.y, nc.y, k)));
+          } else if (nc.t === "l") {
+            el.setAttribute("x1", String(lerp(oc.x1, nc.x1, k)));
+            el.setAttribute("y1", String(lerp(oc.y1, nc.y1, k)));
+            el.setAttribute("x2", String(lerp(oc.x2, nc.x2, k)));
+            el.setAttribute("y2", String(lerp(oc.y2, nc.y2, k)));
+          } else {
+            if (!oc.nums || oc.nums.length !== nc.nums.length) return;
+            let i = 0;
+            const d = nc.d.replace(
+              _QEGraphElement._PATH_NUM_RE,
+              () => String(lerp(oc.nums[i], nc.nums[i++], k))
+            );
+            el.setAttribute("d", d);
+          }
+        });
+        this._tweenRaf = t < 1 ? requestAnimationFrame(step) : null;
+      }, "step");
+      this._tweenRaf = requestAnimationFrame(step);
+    }
+    /** Serialize the current plot as a standalone SVG string (webENA P2.3). */
+    toSVG() {
+      const svg = this.svg_element.cloneNode(true);
+      svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+      svg.setAttribute("xmlns:xlink", "http://www.w3.org/1999/xlink");
+      const rect = this.svg_element.getBoundingClientRect();
+      if (rect.width) svg.setAttribute("width", String(Math.round(rect.width)));
+      if (rect.height) svg.setAttribute("height", String(Math.round(rect.height)));
+      return new XMLSerializer().serializeToString(svg);
+    }
+    /** Rasterize the current plot to a PNG data URL (webENA P2.3). `scale`
+     *  multiplies the pixel dimensions for a higher-resolution image. */
+    toPNG(scale = 2) {
+      const svgStr = this.toSVG();
+      const rect = this.svg_element.getBoundingClientRect();
+      const w = Math.max(1, Math.round(rect.width));
+      const h = Math.max(1, Math.round(rect.height));
+      return new Promise((resolve, reject) => {
+        const blob = new Blob([svgStr], { type: "image/svg+xml;charset=utf-8" });
+        const url = URL.createObjectURL(blob);
+        const img = new Image();
+        img.onload = () => {
+          try {
+            const canvas = document.createElement("canvas");
+            canvas.width = w * scale;
+            canvas.height = h * scale;
+            const ctx = canvas.getContext("2d");
+            if (!ctx) {
+              URL.revokeObjectURL(url);
+              reject(new Error("no 2d context"));
+              return;
+            }
+            ctx.scale(scale, scale);
+            ctx.drawImage(img, 0, 0, w, h);
+            URL.revokeObjectURL(url);
+            resolve(canvas.toDataURL("image/png"));
+          } catch (err) {
+            URL.revokeObjectURL(url);
+            reject(err);
+          }
+        };
+        img.onerror = (e) => {
+          URL.revokeObjectURL(url);
+          reject(e);
+        };
+        img.src = url;
+      });
+    }
+    /** Unit points with their current graph-space coordinates. */
+    getPoints() {
+      const layer = this.__children__.search("__children__", "points");
+      if (!layer) return [];
+      return [...layer.__data__.objects.values()].filter((o) => {
+        var _a;
+        return ((_a = o.meta) == null ? void 0 : _a.kind) === "point";
+      }).map((o) => {
+        var _a;
+        return { id: o.ID, group: (_a = o.meta) == null ? void 0 : _a.group, x: o.x, y: o.y };
+      });
+    }
+    /** Ids of unit points inside a graph-space rectangle (for drag/lasso select). */
+    pointsInRect(rect) {
+      return this.getPoints().filter((p) => p.x >= rect.x && p.x <= rect.x + rect.w && p.y >= rect.y && p.y <= rect.y + rect.h).map((p) => p.id);
+    }
+    /** Order-independent key so an undirected pair matches either direction. */
+    _edgeKey(a, b) {
+      return a <= b ? `${a}\0${b}` : `${b}\0${a}`;
+    }
+    /** Mark edges/nodes as highlighted. Replaces the previous selection. */
+    setHighlight(sel) {
+      this._highlight.edges = new Set((sel.edges ?? []).map((e) => this._edgeKey(e.source, e.target)));
+      this._highlight.nodes = new Set((sel.nodes ?? []).map(String));
+      this._applyHighlights();
+    }
+    /** Clear all highlighting. */
+    clearHighlight() {
+      this._highlight.edges.clear();
+      this._highlight.nodes.clear();
+      this._applyHighlights();
+    }
+    _applyHighlights() {
+      if (!this.svg_element) return;
+      if (!this._highlightGroup) {
+        this._highlightGroup = document.createElementNS("http://www.w3.org/2000/svg", "g");
+        this._highlightGroup.setAttribute("data-layer-name", "highlight");
+        this._highlightGroup.setAttribute("pointer-events", "none");
+      }
+      this.svg_element.appendChild(this._highlightGroup);
+      const g = this._highlightGroup;
+      g.textContent = "";
+      const extent = this.__data__.extremes.x_max || 1;
+      const HL = "#f5a623";
+      const mk = /* @__PURE__ */ __name((tag, attrs) => {
+        const el = document.createElementNS("http://www.w3.org/2000/svg", tag);
+        for (const k in attrs) el.setAttribute(k, String(attrs[k]));
+        return el;
+      }, "mk");
+      if (this._highlight.edges.size) {
+        const xy = {};
+        this.getNodes().forEach((n) => {
+          xy[n.id] = { x: n.x, y: n.y };
+        });
+        this._highlight.edges.forEach((key) => {
+          const [a, b] = key.split("\0");
+          const A = xy[a], B = xy[b];
+          if (!A || !B) return;
+          g.appendChild(mk("line", {
+            x1: A.x,
+            y1: A.y,
+            x2: B.x,
+            y2: B.y,
+            stroke: HL,
+            "stroke-width": extent * 0.02,
+            "stroke-opacity": 0.6,
+            "stroke-linecap": "round"
+          }));
+        });
+      }
+      this._highlight.nodes.forEach((id) => {
+        var _a;
+        const el = this.svg_element.querySelector(`[data-point-id="${((_a = window.CSS) == null ? void 0 : _a.escape) ? CSS.escape(id) : id}"]`);
+        if (!el) return;
+        const tag = el.tagName.toLowerCase();
+        let cx, cy, r;
+        if (tag === "rect") {
+          const w = parseFloat(el.getAttribute("width") || "0");
+          cx = parseFloat(el.getAttribute("x") || "0") + w / 2;
+          cy = parseFloat(el.getAttribute("y") || "0") + parseFloat(el.getAttribute("height") || "0") / 2;
+          r = w / 2;
+        } else {
+          cx = parseFloat(el.getAttribute("cx") || "0");
+          cy = parseFloat(el.getAttribute("cy") || "0");
+          r = parseFloat(el.getAttribute("r") || "0");
+        }
+        g.appendChild(mk("circle", {
+          cx,
+          cy,
+          r: r * 1.7 + extent * 4e-3,
+          fill: "none",
+          stroke: HL,
+          "stroke-width": extent * 6e-3
+        }));
+      });
     }
     create() {
       const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
       svg.classList.add("graph");
+      svg.style.display = "block";
+      svg.style.width = "100%";
+      svg.style.height = "100%";
+      svg.setAttribute("preserveAspectRatio", "xMidYMid meet");
       svg.setAttribute("viewBox", this.__data__.extremes.as_viewBox());
       svg.setAttribute("transform", this.__data__.transform.toString());
       svg.setAttribute("role", "figure");
@@ -3406,6 +4490,138 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
         const lbl = getAutoLabel(id);
         if ((lbl == null ? void 0 : lbl.displayMode) === Label.DISPLAY_TYPES.AUTO) lbl.hide();
       });
+      this._attachInteractionEvents();
+    }
+    /** Emit a namespaced CustomEvent on the public element (bubbles + composed). */
+    _emit(name, detail) {
+      this.dispatchEvent(new CustomEvent(name, { detail, bubbles: true, composed: true }));
+    }
+    /** Walk up from a hit element to the nearest ancestor carrying `attr`. */
+    _closestWith(el, attr) {
+      var _a, _b;
+      while (el && el !== this.svg_element) {
+        if (((_a = el.getAttribute) == null ? void 0 : _a.call(el, attr)) != null && ((_b = el.hasAttribute) == null ? void 0 : _b.call(el, attr))) return el;
+        el = el.parentElement;
+      }
+      return null;
+    }
+    /** Resolve an edge hit element to a qe-edge-* detail, or null. */
+    _edgeDetail(el) {
+      const e = this._closestWith(el, "data-edge-source");
+      if (!e) return null;
+      const d = {
+        source: e.getAttribute("data-edge-source"),
+        target: e.getAttribute("data-edge-target"),
+        weight: parseFloat(e.getAttribute("data-edge-weight") || "0"),
+        directed: e.getAttribute("data-edge-directed") === "true",
+        self: e.getAttribute("data-edge-self") === "true"
+      };
+      if (e.hasAttribute("data-edge-group")) d.group = e.getAttribute("data-edge-group");
+      if (e.hasAttribute("data-edge-unit")) d.unit = e.getAttribute("data-edge-unit");
+      return d;
+    }
+    /** Resolve a node/mean/point hit element to a qe-node-* detail, or null. */
+    _nodeDetail(el) {
+      const n = this._closestWith(el, "data-point-id");
+      if (!n) return null;
+      const tag = n.tagName.toLowerCase();
+      let x, y;
+      if (tag === "rect") {
+        x = parseFloat(n.getAttribute("x") || "0") + parseFloat(n.getAttribute("width") || "0") / 2;
+        y = parseFloat(n.getAttribute("y") || "0") + parseFloat(n.getAttribute("height") || "0") / 2;
+      } else {
+        x = parseFloat(n.getAttribute("cx") || "0");
+        y = parseFloat(n.getAttribute("cy") || "0");
+      }
+      const id = n.getAttribute("data-point-id");
+      const d = {
+        id,
+        kind: n.getAttribute("data-kind") || "point",
+        name: n.getAttribute("data-name") || id,
+        x,
+        y
+      };
+      if (n.hasAttribute("data-group")) d.group = n.getAttribute("data-group");
+      if (n.hasAttribute("data-unit")) d.unit = n.getAttribute("data-unit");
+      return d;
+    }
+    _attachInteractionEvents() {
+      const svg = this.svg_element;
+      svg.addEventListener("click", (ev) => {
+        const target = ev.target;
+        const edge = this._edgeDetail(target);
+        if (edge) {
+          this._emit("qe-edge-click", { ...edge, originalEvent: ev });
+          return;
+        }
+        const node = this._nodeDetail(target);
+        if (node) this._emit("qe-node-click", { ...node, originalEvent: ev });
+      });
+      let hovered = null;
+      const keyOf = /* @__PURE__ */ __name((t, d) => t === "edge" ? `${d.source}\0${d.target}` : String(d.id), "keyOf");
+      svg.addEventListener("mousemove", (ev) => {
+        const target = ev.target;
+        const edge = this._edgeDetail(target);
+        const node = edge ? null : this._nodeDetail(target);
+        const next = edge ? { type: "edge", detail: edge } : node ? { type: "node", detail: node } : null;
+        const nextKey = next ? keyOf(next.type, next.detail) : null;
+        if (hovered && (!next || hovered.key !== nextKey)) {
+          this._emit(hovered.type === "edge" ? "qe-edge-unhover" : "qe-node-unhover", { key: hovered.key });
+          hovered = null;
+        }
+        if (next && (!hovered || hovered.key !== nextKey)) {
+          this._emit(next.type === "edge" ? "qe-edge-hover" : "qe-node-hover", { ...next.detail, originalEvent: ev });
+          hovered = { type: next.type, key: nextKey };
+        }
+        if (this.hasAttribute("tooltip") && next) {
+          this._showTooltip(this._tooltipText(next.type, next.detail), ev.clientX, ev.clientY);
+        } else {
+          this._hideTooltip();
+        }
+      });
+      svg.addEventListener("mouseleave", () => {
+        if (hovered) {
+          this._emit(hovered.type === "edge" ? "qe-edge-unhover" : "qe-node-unhover", { key: hovered.key });
+          hovered = null;
+        }
+        this._hideTooltip();
+      });
+    }
+    /** "source – target (weight)" for edges; the mark name for nodes/means/points. */
+    _tooltipText(type, d) {
+      if (type === "edge") {
+        const w = Number(d.weight);
+        const wStr = Number.isFinite(w) ? ` (${+w.toFixed(3)})` : "";
+        return `${d.source} – ${d.target}${wStr}`;
+      }
+      return String(d.name ?? d.id);
+    }
+    _showTooltip(text, clientX, clientY) {
+      if (!this._tooltipEl) {
+        const el = document.createElement("div");
+        el.setAttribute("data-qe-tooltip", "");
+        Object.assign(el.style, {
+          position: "fixed",
+          zIndex: "2147483647",
+          pointerEvents: "none",
+          background: "rgba(20,20,20,0.92)",
+          color: "#fff",
+          font: "12px/1.4 system-ui, sans-serif",
+          padding: "3px 7px",
+          borderRadius: "4px",
+          whiteSpace: "nowrap",
+          transform: "translate(-50%, calc(-100% - 8px))"
+        });
+        document.body.appendChild(el);
+        this._tooltipEl = el;
+      }
+      this._tooltipEl.textContent = text;
+      this._tooltipEl.style.left = `${clientX}px`;
+      this._tooltipEl.style.top = `${clientY}px`;
+      this._tooltipEl.style.display = "block";
+    }
+    _hideTooltip() {
+      if (this._tooltipEl) this._tooltipEl.style.display = "none";
     }
     draw() {
       var _a;
@@ -3423,6 +4639,78 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
       this.update_layers();
       this.update_labels();
       this.update_extremes();
+      this.update_axes();
+      this._applyHighlights();
+    }
+    /**
+     * Axes (<qe-axes>): toggle the axis-line cross by presence, and draw/position
+     * per-axis labels at the positive ends using the current extent. Labels are
+     * cached SVG <text> nodes in the labels group; null text removes them.
+     */
+    update_axes() {
+      var _a;
+      const axesLayer = this.__children__.search("__children__", "axes");
+      if (axesLayer == null ? void 0 : axesLayer.svg_element) {
+        axesLayer.svg_element.style.display = this._showAxes ? "" : "none";
+      }
+      const parent = this._labelsGroup;
+      const extent = this.__data__.extremes.x_max;
+      if (!parent || extent <= 0) return;
+      const fontSize = extent * 0.06;
+      const gap = fontSize * 0.6;
+      const place = /* @__PURE__ */ __name((axis, text) => {
+        let el = this._axisLabelEls.get(axis);
+        if (!this._showAxes || text == null) {
+          if (el) {
+            el.remove();
+            this._axisLabelEls.delete(axis);
+          }
+          return;
+        }
+        if (!el) {
+          el = document.createElementNS("http://www.w3.org/2000/svg", "text");
+          el.setAttribute("data-axis-label", axis);
+          el.setAttribute("pointer-events", "none");
+          parent.appendChild(el);
+          this._axisLabelEls.set(axis, el);
+        }
+        el.textContent = text;
+        el.setAttribute("font-size", fontSize.toString());
+        el.setAttribute("font-family", "system-ui, sans-serif");
+        el.setAttribute("font-weight", "600");
+        el.setAttribute("fill", "#556");
+        if (axis === "x") {
+          el.setAttribute("x", (extent - gap).toString());
+          el.setAttribute("y", (-gap).toString());
+          el.setAttribute("text-anchor", "end");
+        } else {
+          el.setAttribute("x", gap.toString());
+          el.setAttribute("y", (-extent + fontSize + gap).toString());
+          el.setAttribute("text-anchor", "start");
+        }
+      }, "place");
+      place("x", this._axisXText);
+      place("y", this._axisYText);
+      if (this._magnifyText == null) {
+        (_a = this._magnifyEl) == null ? void 0 : _a.remove();
+        this._magnifyEl = null;
+      } else {
+        if (!this._magnifyEl) {
+          this._magnifyEl = document.createElementNS("http://www.w3.org/2000/svg", "text");
+          this._magnifyEl.setAttribute("data-magnify-label", "");
+          this._magnifyEl.setAttribute("pointer-events", "none");
+        }
+        if (!this._magnifyEl.parentElement) parent.appendChild(this._magnifyEl);
+        const el = this._magnifyEl;
+        el.textContent = this._magnifyText;
+        el.setAttribute("font-size", (fontSize * 0.85).toString());
+        el.setAttribute("font-family", "system-ui, sans-serif");
+        el.setAttribute("font-style", "italic");
+        el.setAttribute("fill", "#556");
+        el.setAttribute("x", (-extent + gap).toString());
+        el.setAttribute("y", (-extent + fontSize + gap).toString());
+        el.setAttribute("text-anchor", "start");
+      }
     }
     update_labels() {
       this._nodeLabels.forEach((lbl) => lbl.update());
@@ -3486,8 +4774,12 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
       background-color: #FFF;
     }
   `;
+  _QEGraphElement._instances = /* @__PURE__ */ new Set();
+  _QEGraphElement._PATH_NUM_RE = /-?\d*\.?\d+(?:e[-+]?\d+)?/gi;
   let QEGraphElement = _QEGraphElement;
   customElements.define(QEGraphElement.tagName, QEGraphElement);
+  const getGraph = /* @__PURE__ */ __name((key) => QEGraphElement.getGraph(key), "getGraph");
+  const getGraphs = /* @__PURE__ */ __name(() => QEGraphElement.instances(), "getGraphs");
   exports2.Color = Color;
   exports2.DataFrame = DataFrame;
   exports2.DataFrameColumn = DataFrameColumn;
@@ -3495,6 +4787,7 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
   exports2.DataFrameRow = DataFrameRow;
   exports2.Edge = Edge;
   exports2.Graph = Graph;
+  exports2.QEAxesElement = QEAxesElement;
   exports2.QEEdgesElement = QEEdgesElement;
   exports2.QEGraphElement = QEGraphElement;
   exports2.QELayer = QELayer;
@@ -3503,8 +4796,18 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
   exports2.QENodesElement = QENodesElement;
   exports2.QEPoint = QEPoint;
   exports2.QEPointsElement = QEPointsElement;
+  exports2.QETrajectoriesElement = QETrajectoriesElement;
+  exports2.QETrajectory = QETrajectory;
   exports2.QEVisualElement = QEVisualElement;
+  exports2.TRAJECTORY_ZERO_EPS = TRAJECTORY_ZERO_EPS;
+  exports2.Trajectory = Trajectory;
   exports2.WeightedColor = WeightedColor;
+  exports2.fitTrajectory = fitTrajectory;
+  exports2.getGraph = getGraph;
+  exports2.getGraphs = getGraphs;
+  exports2.nearOriginFilter = nearOriginFilter;
+  exports2.sampleCurve = sampleCurve;
+  exports2.selectDegree = selectDegree;
   exports2.vizENA = vizENA;
   Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });
 }));