@expertrees/core 0.1.0 → 0.1.1

package/dist/index.js

@@ -1,8 +1,16 @@
-import E from "graphology";
-import { forceSimulation as A, forceLink as z, forceManyBody as T, forceCenter as Z, forceCollide as D } from "d3-force";
-class S {
+var A = Object.defineProperty;
+var z = (u, t, e) => t in u ? A(u, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : u[t] = e;
+var r = (u, t, e) => z(u, typeof t != "symbol" ? t + "" : t, e);
+import T from "graphology";
+import { forceSimulation as Z, forceLink as D, forceManyBody as B, forceCenter as R, forceCollide as L } from "d3-force";
+class M {
   constructor(t) {
-    this._listeners = /* @__PURE__ */ new Map(), this._id = t.id, this._label = t.label, this._meta = t.meta, this._graph = new E({ multi: !1, allowSelfLoops: !1 });
+    r(this, "_graph");
+    r(this, "_meta");
+    r(this, "_label");
+    r(this, "_id");
+    r(this, "_listeners", /* @__PURE__ */ new Map());
+    this._id = t.id, this._label = t.label, this._meta = t.meta, this._graph = new T({ multi: !1, allowSelfLoops: !1 });
     for (const e of t.nodes)
       this._graph.addNode(e.id, { ...e });
     for (const e of t.edges)
@@ -82,7 +90,7 @@ class S {
     return this._meta !== void 0 && (t.meta = this._meta), t;
   }
   static fromJSON(t) {
-    return new S(t);
+    return new M(t);
   }
   // ─── Events ─────────────────────────────────────────────────────────────────
   on(t, e) {
@@ -97,9 +105,11 @@ class S {
         e === void 0 ? i() : i(e);
   }
 }
-class B {
+class O {
   constructor(t = { nodeId: null, label: "Root" }) {
-    this._listeners = /* @__PURE__ */ new Set(), this._stack = [t];
+    r(this, "_stack");
+    r(this, "_listeners", /* @__PURE__ */ new Set());
+    this._stack = [t];
   }
   get current() {
     return this._stack[this._stack.length - 1];
@@ -128,16 +138,19 @@ class B {
     for (const t of this._listeners) t(this._stack);
   }
 }
-const R = [
+const F = [
   { depth: 0, minZoom: 0, maxZoom: 0.3 },
   { depth: 1, minZoom: 0.3, maxZoom: 0.6 },
   { depth: 2, minZoom: 0.6, maxZoom: 1.2 },
   { depth: 3, minZoom: 1.2, maxZoom: 2.5 },
   { depth: 4, minZoom: 2.5, maxZoom: 1 / 0 }
 ];
-class L {
+class W {
   constructor(t) {
-    this._zoom = 1, this._listeners = /* @__PURE__ */ new Set(), this._thresholds = t ?? R;
+    r(this, "_thresholds");
+    r(this, "_zoom", 1);
+    r(this, "_listeners", /* @__PURE__ */ new Set());
+    this._thresholds = t ?? F;
   }
   get zoom() {
     return this._zoom;
@@ -155,49 +168,49 @@ class L {
     for (const t of this._listeners) t(this._zoom);
   }
 }
-class F {
+class H {
   constructor() {
-    this._simulation = null;
+    r(this, "_simulation", null);
   }
   run(t, e, s) {
     this.stop();
-    const { width: i, height: o, chargeStrength: a = -200, collisionPadding: r = 16, alphaDecay: n = 0.02 } = s, l = t.map((h) => {
-      var c, g;
+    const { width: i, height: o, chargeStrength: a = -200, collisionPadding: h = 16, alphaDecay: n = 0.02 } = s, d = t.map((l) => {
+      var _, p;
       return {
-        id: h.id,
-        depth: h.depth,
+        id: l.id,
+        depth: l.depth,
         // Seed from manual position if provided, else random near world origin.
         // World (0,0) maps to canvas center given the initial pan of (width/2, height/2).
-        x: ((c = h.position) == null ? void 0 : c.x) ?? (Math.random() - 0.5) * 100,
-        y: ((g = h.position) == null ? void 0 : g.y) ?? (Math.random() - 0.5) * 100
+        x: ((_ = l.position) == null ? void 0 : _.x) ?? (Math.random() - 0.5) * 100,
+        y: ((p = l.position) == null ? void 0 : p.y) ?? (Math.random() - 0.5) * 100
       };
-    }), d = new Map(l.map((h) => [h.id, h])), v = [];
-    for (const h of t)
-      if (h.parentId) {
-        const c = d.get(h.parentId), g = d.get(h.id);
-        c && g && v.push({ id: `${h.parentId}->${h.id}`, source: c, target: g });
+    }), c = new Map(d.map((l) => [l.id, l])), b = [];
+    for (const l of t)
+      if (l.parentId) {
+        const _ = c.get(l.parentId), p = c.get(l.id);
+        _ && p && b.push({ id: `${l.parentId}->${l.id}`, source: _, target: p });
       }
-    for (const h of e) {
-      const c = d.get(h.source), g = d.get(h.target);
-      c && g && v.push({ id: h.id, source: c, target: g });
+    for (const l of e) {
+      const _ = c.get(l.source), p = c.get(l.target);
+      _ && p && b.push({ id: l.id, source: _, target: p });
     }
-    const p = (h) => {
-      var c;
-      (c = s.onTick) == null || c.call(s, h);
+    const f = (l) => {
+      var _;
+      (_ = s.onTick) == null || _.call(s, l);
     };
-    this._simulation = A(l).alphaDecay(n).force(
+    this._simulation = Z(d).alphaDecay(n).force(
       "link",
-      z(v).id((h) => h.id).distance((h) => {
-        const c = h.source, g = h.target;
-        return 80 + Math.abs(c.depth - g.depth) * 20;
+      D(b).id((l) => l.id).distance((l) => {
+        const _ = l.source, p = l.target;
+        return 80 + Math.abs(_.depth - p.depth) * 20;
       }).strength(0.4)
-    ).force("charge", T().strength(a)).force("center", Z(0, 0)).force("collide", D().radius(r)).on("tick", () => {
-      const h = this._collectPositions(l);
-      p(h);
+    ).force("charge", B().strength(a)).force("center", R(0, 0)).force("collide", L().radius(h)).on("tick", () => {
+      const l = this._collectPositions(d);
+      f(l);
     }).on("end", () => {
-      var c;
-      const h = this._collectPositions(l);
-      (c = s.onEnd) == null || c.call(s, h);
+      var _;
+      const l = this._collectPositions(d);
+      (_ = s.onEnd) == null || _.call(s, l);
     });
   }
   stop() {
@@ -215,7 +228,7 @@ class F {
     return e;
   }
 }
-const b = {
+const y = {
   background: "#050a1a",
   node: {
     color: "#4a9eff",
@@ -260,24 +273,24 @@ const b = {
     }
   }
 };
-function I(m) {
+function x(u) {
   var t, e, s, i, o;
-  return m ? {
-    background: m.background ?? b.background,
-    node: { ...b.node, ...m.node },
-    edge: { ...b.edge, ...m.edge },
+  return u ? {
+    background: u.background ?? y.background,
+    node: { ...y.node, ...u.node },
+    edge: { ...y.edge, ...u.edge },
     states: {
-      default: { ...b.states.default, ...(t = m.states) == null ? void 0 : t.default },
-      active: { ...b.states.active, ...(e = m.states) == null ? void 0 : e.active },
-      locked: { ...b.states.locked, ...(s = m.states) == null ? void 0 : s.locked },
-      unlocked: { ...b.states.unlocked, ...(i = m.states) == null ? void 0 : i.unlocked },
-      highlighted: { ...b.states.highlighted, ...(o = m.states) == null ? void 0 : o.highlighted }
+      default: { ...y.states.default, ...(t = u.states) == null ? void 0 : t.default },
+      active: { ...y.states.active, ...(e = u.states) == null ? void 0 : e.active },
+      locked: { ...y.states.locked, ...(s = u.states) == null ? void 0 : s.locked },
+      unlocked: { ...y.states.unlocked, ...(i = u.states) == null ? void 0 : i.unlocked },
+      highlighted: { ...y.states.highlighted, ...(o = u.states) == null ? void 0 : o.highlighted }
     }
-  } : b;
+  } : y;
 }
-const M = 40;
-function O(m) {
-  return Array.from({ length: m }, () => ({
+const k = 40;
+function U(u) {
+  return Array.from({ length: u }, () => ({
     x: Math.random(),
     y: Math.random(),
     r: 0.4 + Math.random() * 1.2,
@@ -285,17 +298,28 @@ function O(m) {
     speed: 0.4 + Math.random() * 1.2
   }));
 }
-function x(m) {
+function N(u) {
   let t = 0;
-  for (let e = 0; e < m.length; e++) t = t * 31 + m.charCodeAt(e) >>> 0;
+  for (let e = 0; e < u.length; e++) t = t * 31 + u.charCodeAt(e) >>> 0;
   return t % 1e3 / 1e3 * Math.PI * 2;
 }
-class W {
+class G {
   constructor(t, e) {
-    this._burst = null, this._burstDuration = 450, this._implode = null, this._implodeDuration = 420, this._canvas = t;
+    r(this, "_canvas");
+    r(this, "_ctx");
+    r(this, "_theme");
+    r(this, "_dpr");
+    r(this, "_bgStars");
+    // Burst animation state (entry)
+    r(this, "_burst", null);
+    r(this, "_burstDuration", 450);
+    // Implode animation state (exit)
+    r(this, "_implode", null);
+    r(this, "_implodeDuration", 420);
+    this._canvas = t;
     const s = t.getContext("2d");
     if (!s) throw new Error("Could not get 2D context from canvas");
-    this._ctx = s, this._theme = I(e), this._dpr = window.devicePixelRatio ?? 1, this._bgStars = O(150), this._resize();
+    this._ctx = s, this._theme = x(e), this._dpr = window.devicePixelRatio ?? 1, this._bgStars = U(150), this._resize();
   }
   get canvas() {
     return this._canvas;
@@ -312,7 +336,7 @@ class W {
     return this._resolveStyle(t).color;
   }
   updateTheme(t) {
-    this._theme = I(t);
+    this._theme = x(t);
   }
   triggerBurst(t, e) {
     this._burst = { startTime: performance.now(), center: t, color: e };
@@ -321,57 +345,57 @@ class W {
     this._implode = { startTime: performance.now(), center: t };
   }
   render(t, e, s) {
-    var g;
-    const i = this._ctx, o = performance.now() / 1e3, { pan: a, zoom: r, contextFadeAlpha: n, positions: l, internalStates: d } = s, v = this._canvas.width / this._dpr, p = this._canvas.height / this._dpr;
-    i.clearRect(0, 0, this._canvas.width, this._canvas.height), i.fillStyle = this._theme.background, i.fillRect(0, 0, this._canvas.width, this._canvas.height), i.save(), i.scale(this._dpr, this._dpr), this._renderBgStars(i, v, p, o), i.save(), i.translate(a.x, a.y), i.scale(r, r);
-    for (const _ of e) {
-      const f = l.get(_.source), u = l.get(_.target);
-      !f || !u || (this._drawEdge(i, f, u, _.style), (((g = _.style) == null ? void 0 : g.animated) ?? this._theme.edge.animated) && this._renderEdgeParticles(i, f, u, _, o, r));
+    var p;
+    const i = this._ctx, o = performance.now() / 1e3, { pan: a, zoom: h, contextFadeAlpha: n, positions: d, internalStates: c } = s, b = this._canvas.width / this._dpr, f = this._canvas.height / this._dpr;
+    i.clearRect(0, 0, this._canvas.width, this._canvas.height), i.fillStyle = this._theme.background, i.fillRect(0, 0, this._canvas.width, this._canvas.height), i.save(), i.scale(this._dpr, this._dpr), this._renderBgStars(i, b, f, o), i.save(), i.translate(a.x, a.y), i.scale(h, h);
+    for (const g of e) {
+      const v = d.get(g.source), m = d.get(g.target);
+      !v || !m || (this._drawEdge(i, v, m, g.style), (((p = g.style) == null ? void 0 : p.animated) ?? this._theme.edge.animated) && this._renderEdgeParticles(i, v, m, g, o, h));
     }
-    for (const _ of t) {
-      if (!_.parentId) continue;
-      const f = l.get(_.parentId), u = l.get(_.id);
-      !f || !u || (i.save(), i.globalAlpha = n * 0.35, i.strokeStyle = this._theme.edge.color, i.lineWidth = this._theme.edge.width / r, i.setLineDash([4, 8]), i.beginPath(), i.moveTo(f.x, f.y), i.lineTo(u.x, u.y), i.stroke(), i.restore());
+    for (const g of t) {
+      if (!g.parentId) continue;
+      const v = d.get(g.parentId), m = d.get(g.id);
+      !v || !m || (i.save(), i.globalAlpha = n * 0.35, i.strokeStyle = this._theme.edge.color, i.lineWidth = this._theme.edge.width / h, i.setLineDash([4, 8]), i.beginPath(), i.moveTo(v.x, v.y), i.lineTo(m.x, m.y), i.stroke(), i.restore());
     }
-    const h = t.filter((_) => _.childIds && _.childIds.length > 0), c = t.filter((_) => !_.childIds || _.childIds.length === 0);
-    for (const _ of [...h, ...c]) {
-      const f = l.get(_.id);
-      if (!f) continue;
-      const u = d.get(_.id) ?? "idle", y = !!(_.childIds && _.childIds.length > 0);
-      this._drawNode(i, _, f, u, n, r, y, o);
+    const l = t.filter((g) => g.childIds && g.childIds.length > 0), _ = t.filter((g) => !g.childIds || g.childIds.length === 0);
+    for (const g of [...l, ..._]) {
+      const v = d.get(g.id);
+      if (!v) continue;
+      const m = c.get(g.id) ?? "idle", w = !!(g.childIds && g.childIds.length > 0);
+      this._drawNode(i, g, v, m, n, h, w, o);
     }
     i.restore(), i.restore(), this._renderBurst(), this._renderImplode();
   }
   // ─── Background stars ─────────────────────────────────────────────────────
   _renderBgStars(t, e, s, i) {
     for (const o of this._bgStars) {
-      const a = 0.5 + 0.5 * Math.sin(i * o.speed + o.phase), r = 0.08 + 0.25 * a, n = o.r * (0.7 + 0.3 * a);
-      t.beginPath(), t.arc(o.x * e, o.y * s, n, 0, Math.PI * 2), t.fillStyle = `rgba(255,255,255,${r.toFixed(3)})`, t.fill();
+      const a = 0.5 + 0.5 * Math.sin(i * o.speed + o.phase), h = 0.08 + 0.25 * a, n = o.r * (0.7 + 0.3 * a);
+      t.beginPath(), t.arc(o.x * e, o.y * s, n, 0, Math.PI * 2), t.fillStyle = `rgba(255,255,255,${h.toFixed(3)})`, t.fill();
     }
   }
   // ─── Node rendering ───────────────────────────────────────────────────────
-  _drawNode(t, e, s, i, o, a, r, n) {
-    r ? this._drawBubble(t, e, s, i, o, a, n) : this._drawStar(t, e, s, i, o, a, n);
+  _drawNode(t, e, s, i, o, a, h, n) {
+    h ? this._drawBubble(t, e, s, i, o, a, n) : this._drawStar(t, e, s, i, o, a, n);
   }
-  _drawBubble(t, e, s, i, o, a, r) {
-    const n = this._resolveStyle(e), l = x(e.id), v = 1 + (i === "selected" ? 0.08 : 0.04) * Math.sin(r * 0.6 + l), p = M * v * (i === "hovered" ? 1.1 : 1), h = i === "selected";
+  _drawBubble(t, e, s, i, o, a, h) {
+    const n = this._resolveStyle(e), d = N(e.id), b = 1 + (i === "selected" ? 0.08 : 0.04) * Math.sin(h * 0.6 + d), f = k * b * (i === "hovered" ? 1.1 : 1), l = i === "selected";
     t.save(), t.globalAlpha = n.opacity * o;
-    const c = h ? p * 2.8 : p * 2.2, g = h ? n.glowColor + "55" : n.glowColor + "30", _ = t.createRadialGradient(s.x, s.y, p * 0.5, s.x, s.y, c);
-    _.addColorStop(0, g), _.addColorStop(1, n.glowColor + "00"), t.fillStyle = _, t.beginPath(), t.arc(s.x, s.y, c, 0, Math.PI * 2), t.fill();
-    const f = t.createRadialGradient(s.x, s.y - p * 0.3, p * 0.1, s.x, s.y, p);
-    if (f.addColorStop(0, n.color + (h ? "70" : "50")), f.addColorStop(1, n.color + (h ? "28" : "18")), t.fillStyle = f, t.beginPath(), t.arc(s.x, s.y, p, 0, Math.PI * 2), t.fill(), t.strokeStyle = h ? n.glowColor : n.color, t.lineWidth = (h ? 2.5 : 1.5) / a, t.globalAlpha = n.opacity * o * (h ? 1 : 0.7), t.beginPath(), t.arc(s.x, s.y, p, 0, Math.PI * 2), t.stroke(), h) {
-      const u = r * 0.7 + l;
-      t.strokeStyle = n.glowColor, t.lineWidth = 1.5 / a, t.globalAlpha = n.opacity * o * 0.85, t.setLineDash([10 / a, 7 / a]), t.lineDashOffset = -u * 18, t.beginPath(), t.arc(s.x, s.y, p * 1.3, 0, Math.PI * 2), t.stroke(), t.setLineDash([]);
+    const _ = l ? f * 2.8 : f * 2.2, p = l ? n.glowColor + "55" : n.glowColor + "30", g = t.createRadialGradient(s.x, s.y, f * 0.5, s.x, s.y, _);
+    g.addColorStop(0, p), g.addColorStop(1, n.glowColor + "00"), t.fillStyle = g, t.beginPath(), t.arc(s.x, s.y, _, 0, Math.PI * 2), t.fill();
+    const v = t.createRadialGradient(s.x, s.y - f * 0.3, f * 0.1, s.x, s.y, f);
+    if (v.addColorStop(0, n.color + (l ? "70" : "50")), v.addColorStop(1, n.color + (l ? "28" : "18")), t.fillStyle = v, t.beginPath(), t.arc(s.x, s.y, f, 0, Math.PI * 2), t.fill(), t.strokeStyle = l ? n.glowColor : n.color, t.lineWidth = (l ? 2.5 : 1.5) / a, t.globalAlpha = n.opacity * o * (l ? 1 : 0.7), t.beginPath(), t.arc(s.x, s.y, f, 0, Math.PI * 2), t.stroke(), l) {
+      const m = h * 0.7 + d;
+      t.strokeStyle = n.glowColor, t.lineWidth = 1.5 / a, t.globalAlpha = n.opacity * o * 0.85, t.setLineDash([10 / a, 7 / a]), t.lineDashOffset = -m * 18, t.beginPath(), t.arc(s.x, s.y, f * 1.3, 0, Math.PI * 2), t.stroke(), t.setLineDash([]);
     }
     if (e.childIds && e.childIds.length > 0) {
-      const u = Math.min(e.childIds.length, 8), y = p * 0.55, w = Math.max(1.5, p * 0.06), N = r * 0.15 + l;
+      const m = Math.min(e.childIds.length, 8), w = f * 0.55, P = Math.max(1.5, f * 0.06), E = h * 0.15 + d;
       t.globalAlpha = n.opacity * o * 0.6, t.fillStyle = n.color + "90";
-      for (let P = 0; P < u; P++) {
-        const k = N + P / u * Math.PI * 2;
+      for (let C = 0; C < m; C++) {
+        const I = E + C / m * Math.PI * 2;
         t.beginPath(), t.arc(
-          s.x + y * Math.cos(k),
-          s.y + y * Math.sin(k),
-          w,
+          s.x + w * Math.cos(I),
+          s.y + w * Math.sin(I),
+          P,
           0,
           Math.PI * 2
         ), t.fill();
@@ -379,32 +403,32 @@ class W {
     }
     t.globalAlpha = n.opacity * o, t.fillStyle = n.labelColor, t.font = `bold ${n.labelSize * 1.2 / a}px ${n.labelFont}`, t.textAlign = "center", t.textBaseline = "middle", t.fillText(e.label, s.x, s.y), t.restore();
   }
-  _drawStar(t, e, s, i, o, a, r) {
-    const n = this._resolveStyle(e), l = x(e.id), d = i === "selected", p = 1 + (d ? 0.4 : 0.22) * Math.sin(r * 1.7 + l) + 0.08 * Math.sin(r * 3.1 + l * 1.3), h = n.glowRadius * p, c = n.size * (i === "hovered" ? 1.4 : 1);
-    if (t.save(), t.globalAlpha = n.opacity * o, d) {
-      for (let _ = 0; _ < 2; _++) {
-        const f = _ * 0.9, u = (r + f) % 1.8 / 1.8, y = (c + h * 0.6) * (1 + u * 2.2), w = (1 - u) * 0.6;
-        t.strokeStyle = n.glowColor, t.lineWidth = 1.5 / a * (1 - u * 0.5), t.globalAlpha = w * n.opacity * o, t.beginPath(), t.arc(s.x, s.y, y, 0, Math.PI * 2), t.stroke();
+  _drawStar(t, e, s, i, o, a, h) {
+    const n = this._resolveStyle(e), d = N(e.id), c = i === "selected", f = 1 + (c ? 0.4 : 0.22) * Math.sin(h * 1.7 + d) + 0.08 * Math.sin(h * 3.1 + d * 1.3), l = n.glowRadius * f, _ = n.size * (i === "hovered" ? 1.4 : 1);
+    if (t.save(), t.globalAlpha = n.opacity * o, c) {
+      for (let g = 0; g < 2; g++) {
+        const v = g * 0.9, m = (h + v) % 1.8 / 1.8, w = (_ + l * 0.6) * (1 + m * 2.2), P = (1 - m) * 0.6;
+        t.strokeStyle = n.glowColor, t.lineWidth = 1.5 / a * (1 - m * 0.5), t.globalAlpha = P * n.opacity * o, t.beginPath(), t.arc(s.x, s.y, w, 0, Math.PI * 2), t.stroke();
       }
       t.globalAlpha = n.opacity * o;
     }
-    if (h > 0) {
-      const g = t.createRadialGradient(s.x, s.y, 0, s.x, s.y, h + c);
-      g.addColorStop(0, n.glowColor + (d ? "ff" : "cc")), g.addColorStop(0.4, n.glowColor + (d ? "88" : "55")), g.addColorStop(1, n.glowColor + "00"), t.fillStyle = g, t.beginPath(), t.arc(s.x, s.y, h + c, 0, Math.PI * 2), t.fill();
+    if (l > 0) {
+      const p = t.createRadialGradient(s.x, s.y, 0, s.x, s.y, l + _);
+      p.addColorStop(0, n.glowColor + (c ? "ff" : "cc")), p.addColorStop(0.4, n.glowColor + (c ? "88" : "55")), p.addColorStop(1, n.glowColor + "00"), t.fillStyle = p, t.beginPath(), t.arc(s.x, s.y, l + _, 0, Math.PI * 2), t.fill();
     }
-    t.fillStyle = d ? n.glowColor : n.color, t.beginPath(), this._drawShape(t, s, c, n.shape), t.fill(), c * a > 4 && (t.fillStyle = n.labelColor, t.font = `${n.labelSize / a}px ${n.labelFont}`, t.textAlign = "center", t.textBaseline = "top", t.fillText(e.label, s.x, s.y + c + 4 / a)), t.restore();
+    t.fillStyle = c ? n.glowColor : n.color, t.beginPath(), this._drawShape(t, s, _, n.shape), t.fill(), _ * a > 4 && (t.fillStyle = n.labelColor, t.font = `${n.labelSize / a}px ${n.labelFont}`, t.textAlign = "center", t.textBaseline = "top", t.fillText(e.label, s.x, s.y + _ + 4 / a)), t.restore();
   }
   // ─── Edge particles ───────────────────────────────────────────────────────
   _renderEdgeParticles(t, e, s, i, o, a) {
-    var c;
-    const r = s.x - e.x, n = s.y - e.y;
-    if (Math.sqrt(r * r + n * n) < 1) return;
-    const d = 3, v = 0.2, p = 2.5 / a, h = ((c = i.style) == null ? void 0 : c.color) ?? this._theme.edge.color;
-    for (let g = 0; g < d; g++) {
-      const _ = (o * v + g / d) % 1, f = e.x + r * _, u = e.y + n * _, y = Math.sin(_ * Math.PI);
-      t.save(), t.globalAlpha = y * 0.85;
-      const w = t.createRadialGradient(f, u, 0, f, u, p * 2.5);
-      w.addColorStop(0, h + "ff"), w.addColorStop(0.4, h + "99"), w.addColorStop(1, h + "00"), t.fillStyle = w, t.beginPath(), t.arc(f, u, p * 2.5, 0, Math.PI * 2), t.fill(), t.restore();
+    var _;
+    const h = s.x - e.x, n = s.y - e.y;
+    if (Math.sqrt(h * h + n * n) < 1) return;
+    const c = 3, b = 0.2, f = 2.5 / a, l = ((_ = i.style) == null ? void 0 : _.color) ?? this._theme.edge.color;
+    for (let p = 0; p < c; p++) {
+      const g = (o * b + p / c) % 1, v = e.x + h * g, m = e.y + n * g, w = Math.sin(g * Math.PI);
+      t.save(), t.globalAlpha = w * 0.85;
+      const P = t.createRadialGradient(v, m, 0, v, m, f * 2.5);
+      P.addColorStop(0, l + "ff"), P.addColorStop(0.4, l + "99"), P.addColorStop(1, l + "00"), t.fillStyle = P, t.beginPath(), t.arc(v, m, f * 2.5, 0, Math.PI * 2), t.fill(), t.restore();
     }
   }
   // ─── Burst animation ──────────────────────────────────────────────────────
@@ -415,8 +439,8 @@ class W {
       this._burst = null;
       return;
     }
-    const i = 1 - Math.pow(1 - s, 3), o = Math.hypot(this._canvas.width, this._canvas.height), a = i * o, r = (1 - i) * 0.35;
-    t.save(), t.globalAlpha = r, t.fillStyle = this._burst.color, t.beginPath(), t.arc(
+    const i = 1 - Math.pow(1 - s, 3), o = Math.hypot(this._canvas.width, this._canvas.height), a = i * o, h = (1 - i) * 0.35;
+    t.save(), t.globalAlpha = h, t.fillStyle = this._burst.color, t.beginPath(), t.arc(
       this._burst.center.x * this._dpr,
       this._burst.center.y * this._dpr,
       a,
@@ -432,8 +456,8 @@ class W {
       this._implode = null;
       return;
     }
-    const i = s * s * s, o = Math.hypot(this._canvas.width, this._canvas.height), a = (1 - i) * o, r = (1 - s) * 0.55, n = (1 - i) * 40 * this._dpr, l = this._implode.center.x * this._dpr, d = this._implode.center.y * this._dpr;
-    t.save(), t.globalAlpha = r, t.strokeStyle = "#9b5de5", t.lineWidth = n, t.shadowColor = "#9b5de5", t.shadowBlur = 30 * this._dpr, t.beginPath(), t.arc(l, d, Math.max(0, a), 0, Math.PI * 2), t.stroke(), t.restore();
+    const i = s * s * s, o = Math.hypot(this._canvas.width, this._canvas.height), a = (1 - i) * o, h = (1 - s) * 0.55, n = (1 - i) * 40 * this._dpr, d = this._implode.center.x * this._dpr, c = this._implode.center.y * this._dpr;
+    t.save(), t.globalAlpha = h, t.strokeStyle = "#9b5de5", t.lineWidth = n, t.shadowColor = "#9b5de5", t.shadowBlur = 30 * this._dpr, t.beginPath(), t.arc(d, c, Math.max(0, a), 0, Math.PI * 2), t.stroke(), t.restore();
   }
   // ─── Shapes ───────────────────────────────────────────────────────────────
   _resolveStyle(t) {
@@ -459,16 +483,16 @@ class W {
   _polygon(t, e, s, i, o) {
     t.moveTo(e.x + s * Math.cos(o), e.y + s * Math.sin(o));
     for (let a = 1; a < i; a++) {
-      const r = o + a * 2 * Math.PI / i;
-      t.lineTo(e.x + s * Math.cos(r), e.y + s * Math.sin(r));
+      const h = o + a * 2 * Math.PI / i;
+      t.lineTo(e.x + s * Math.cos(h), e.y + s * Math.sin(h));
     }
     t.closePath();
   }
   _star(t, e, s) {
     const i = s * 0.4, o = 5;
     for (let a = 0; a < o * 2; a++) {
-      const r = a * Math.PI / o - Math.PI / 2, n = a % 2 === 0 ? s : i, l = e.x + n * Math.cos(r), d = e.y + n * Math.sin(r);
-      a === 0 ? t.moveTo(l, d) : t.lineTo(l, d);
+      const h = a * Math.PI / o - Math.PI / 2, n = a % 2 === 0 ? s : i, d = e.x + n * Math.cos(h), c = e.y + n * Math.sin(h);
+      a === 0 ? t.moveTo(d, c) : t.lineTo(d, c);
     }
     t.closePath();
   }
@@ -483,9 +507,34 @@ class W {
   dispose() {
   }
 }
-class H {
+class V {
   constructor(t) {
-    this._isPanning = !1, this._lastPan = { x: 0, y: 0 }, this._listeners = /* @__PURE__ */ new Set(), this._nodes = [], this._positions = /* @__PURE__ */ new Map(), this._nodeSize = 8, this._targetZoom = 1, this._zoomAnchor = null, this._zoomLerpAlpha = 0.14, this._timedZoom = null, this._activePointers = /* @__PURE__ */ new Map(), this._lastPinchDist = null, this._pointerDownPos = { x: 0, y: 0 }, this._canvas = t, this._dpr = window.devicePixelRatio ?? 1, this._state = {
+    r(this, "_canvas");
+    r(this, "_state");
+    r(this, "_isPanning", !1);
+    r(this, "_lastPan", { x: 0, y: 0 });
+    r(this, "_listeners", /* @__PURE__ */ new Set());
+    r(this, "_nodes", []);
+    r(this, "_positions", /* @__PURE__ */ new Map());
+    r(this, "_nodeSize", 8);
+    r(this, "_dpr");
+    // Smooth zoom (lerp)
+    r(this, "_targetZoom", 1);
+    r(this, "_zoomAnchor", null);
+    r(this, "_zoomLerpAlpha", 0.14);
+    // Timed zoom — takes priority over lerp when active
+    r(this, "_timedZoom", null);
+    // Multi-touch tracking
+    r(this, "_activePointers", /* @__PURE__ */ new Map());
+    r(this, "_lastPinchDist", null);
+    // Separate from _lastPan (which is updated on every move) — used for drag vs click detection
+    r(this, "_pointerDownPos", { x: 0, y: 0 });
+    r(this, "_onPointerDown");
+    r(this, "_onPointerMove");
+    r(this, "_onPointerUp");
+    r(this, "_onPointerCancel");
+    r(this, "_onWheel");
+    this._canvas = t, this._dpr = window.devicePixelRatio ?? 1, this._state = {
       pan: { x: t.width / (2 * this._dpr), y: t.height / (2 * this._dpr) },
       zoom: 1,
       hoveredNodeId: null,
@@ -536,8 +585,8 @@ class H {
   tick() {
     const t = this._state.zoom;
     if (this._timedZoom) {
-      const { startZoom: e, target: s, anchor: i, startTime: o, duration: a, easing: r } = this._timedZoom, n = Math.min(1, (performance.now() - o) / a), l = r === "out" ? 1 - Math.pow(1 - n, 3) : n * n * n;
-      this._state.zoom = e + (s - e) * l, n >= 1 ? (this._timedZoom = null, this._zoomAnchor = null) : this._zoomAnchor = i;
+      const { startZoom: e, target: s, anchor: i, startTime: o, duration: a, easing: h } = this._timedZoom, n = Math.min(1, (performance.now() - o) / a), d = h === "out" ? 1 - Math.pow(1 - n, 3) : n * n * n;
+      this._state.zoom = e + (s - e) * d, n >= 1 ? (this._timedZoom = null, this._zoomAnchor = null) : this._zoomAnchor = i;
     } else {
       const e = this._targetZoom - this._state.zoom;
       if (Math.abs(e) < 1e-4)
@@ -572,8 +621,8 @@ class H {
     for (const i of this._nodes) {
       const o = this._positions.get(i.id);
       if (!o) continue;
-      const r = !!(i.childIds && i.childIds.length > 0) ? M * 1.3 : this._nodeSize * 4, n = t.x - o.x, l = t.y - o.y, d = Math.sqrt(n * n + l * l);
-      d < r && d < s && (s = d, e = i.id);
+      const h = !!(i.childIds && i.childIds.length > 0) ? k * 1.3 : this._nodeSize * 4, n = t.x - o.x, d = t.y - o.y, c = Math.sqrt(n * n + d * d);
+      c < h && c < s && (s = c, e = i.id);
     }
     return e;
   }
@@ -591,8 +640,8 @@ class H {
     if (this._activePointers.set(t.pointerId, e), this._activePointers.size >= 2) {
       const s = [...this._activePointers.values()], i = Math.hypot(s[1].x - s[0].x, s[1].y - s[0].y);
       if (this._lastPinchDist !== null && i > 0) {
-        const o = i / this._lastPinchDist, a = (s[0].x + s[1].x) / 2, r = (s[0].y + s[1].y) / 2;
-        this._targetZoom = Math.max(0.05, Math.min(20, this._targetZoom * o)), this._zoomAnchor = { x: a, y: r }, this._emit({ type: "zoom:change", zoom: this._targetZoom });
+        const o = i / this._lastPinchDist, a = (s[0].x + s[1].x) / 2, h = (s[0].y + s[1].y) / 2;
+        this._targetZoom = Math.max(0.05, Math.min(20, this._targetZoom * o)), this._zoomAnchor = { x: a, y: h }, this._emit({ type: "zoom:change", zoom: this._targetZoom });
       }
       this._lastPinchDist = i;
       return;
@@ -616,7 +665,7 @@ class H {
     this._isPanning = !1;
     const o = Math.abs(e.x - i.x), a = Math.abs(e.y - i.y);
     if (o < 4 && a < 4) {
-      const r = this.canvasToWorld(e.x, e.y), n = this._hitTest(r);
+      const h = this.canvasToWorld(e.x, e.y), n = this._hitTest(h);
       n ? (this._state.selectedNodeId = n === this._state.selectedNodeId ? null : n, this._emit({ type: "node:click", nodeId: n })) : (this._state.selectedNodeId = null, this._emit({ type: "canvas:click" }));
     }
   }
@@ -630,19 +679,41 @@ class H {
     this._targetZoom = Math.max(0.05, Math.min(20, this._targetZoom * s)), this._zoomAnchor = e, this._emit({ type: "zoom:change", zoom: this._targetZoom });
   }
 }
-const U = 2.5, G = 0.35, C = 700;
-class q {
+const $ = 2.5, q = 0.35, S = 700;
+class j {
   constructor(t) {
-    var r, n;
-    this._positions = /* @__PURE__ */ new Map(), this._internalStates = /* @__PURE__ */ new Map(), this._rafId = null, this._pendingEnter = null, this._pendingExit = null, this._unsubscribers = [], this._visibleNodes = [], this._visibleEdges = [], this._contextFadeAlpha = 1, this._contextFadeStart = 0, this._contextFadeDuration = 400, this._navCooldownUntil = 0;
+    r(this, "_model");
+    r(this, "_nav");
+    r(this, "_lod");
+    r(this, "_layout");
+    r(this, "_renderer");
+    r(this, "_interaction");
+    r(this, "_positions", /* @__PURE__ */ new Map());
+    r(this, "_internalStates", /* @__PURE__ */ new Map());
+    r(this, "_eventHandlers");
+    r(this, "_rafId", null);
+    r(this, "_pendingEnter", null);
+    r(this, "_pendingExit", null);
+    r(this, "_unsubscribers", []);
+    r(this, "_resizeObserver");
+    // Cached visible node/edge lists — rebuilt on navigation and model changes
+    r(this, "_visibleNodes", []);
+    r(this, "_visibleEdges", []);
+    // Context fade-in
+    r(this, "_contextFadeAlpha", 1);
+    r(this, "_contextFadeStart", 0);
+    r(this, "_contextFadeDuration", 400);
+    // Navigation cooldown
+    r(this, "_navCooldownUntil", 0);
+    var h, n;
     const { canvas: e, data: s, theme: i, lod: o, on: a = {} } = t;
-    if (this._eventHandlers = a, this._model = new S(s), this._nav = new B({ nodeId: null, label: s.label }), this._lod = new L(o), this._layout = new F(), this._renderer = new W(e, i ?? s.theme), this._interaction = new H(e), t.initialContextNodeId) {
-      const l = this._model.getNode(t.initialContextNodeId);
-      l && this._isBubble(l) && this._nav.push({ nodeId: l.id, label: l.label });
+    if (this._eventHandlers = a, this._model = new M(s), this._nav = new O({ nodeId: null, label: s.label }), this._lod = new W(o), this._layout = new H(), this._renderer = new G(e, i ?? s.theme), this._interaction = new V(e), t.initialContextNodeId) {
+      const d = this._model.getNode(t.initialContextNodeId);
+      d && this._isBubble(d) && this._nav.push({ nodeId: d.id, label: d.label });
     }
     this._rebuildVisibleCache(), this._wireEvents(), this._runLayout(), this._startRenderLoop(), this._resizeObserver = new ResizeObserver(() => {
       this._renderer.resize(), this._runLayout();
-    }), this._resizeObserver.observe(e), (n = (r = this._eventHandlers)["graph:ready"]) == null || n.call(r, s);
+    }), this._resizeObserver.observe(e), (n = (h = this._eventHandlers)["graph:ready"]) == null || n.call(h, s);
   }
   // ─── Public API ─────────────────────────────────────────────────────────────
   setNodeState(t, e) {
@@ -672,7 +743,7 @@ class q {
    * Silently pops intermediate frames; plays one implode + fade transition.
    */
   jumpToNavDepth(t) {
-    var a, r;
+    var a, h;
     if (this._nav.stack.length <= t) return;
     this._pendingEnter !== null && (clearTimeout(this._pendingEnter), this._pendingEnter = null), this._pendingExit !== null && (clearTimeout(this._pendingExit), this._pendingExit = null);
     let e;
@@ -680,10 +751,10 @@ class q {
       e = this._nav.pop();
     if (!e) return;
     const i = this._renderer.canvas.getBoundingClientRect(), o = { x: i.width / 2, y: i.height / 2 };
-    this._navCooldownUntil = Date.now() + C, this._rebuildVisibleCache(), this._renderer.triggerImplode(o), this._interaction.resetToCenter(1, o.x, o.y), this._lod.setZoom(1);
+    this._navCooldownUntil = Date.now() + S, this._rebuildVisibleCache(), this._renderer.triggerImplode(o), this._interaction.resetToCenter(1, o.x, o.y), this._lod.setZoom(1);
     for (const n of this._visibleNodes)
       this._positions.set(n.id, { x: (Math.random() - 0.5) * 80, y: (Math.random() - 0.5) * 80 });
-    this._contextFadeAlpha = 0, this._contextFadeStart = performance.now(), this._runLayout(), (r = (a = this._eventHandlers)["context:exit"]) == null || r.call(a, e, this._nav.stack);
+    this._contextFadeAlpha = 0, this._contextFadeStart = performance.now(), this._runLayout(), (h = (a = this._eventHandlers)["context:exit"]) == null || h.call(a, e, this._nav.stack);
   }
   _exitWithAnimation() {
     if (!this._nav.canGoBack) return;
@@ -697,11 +768,11 @@ class q {
     const e = this._model.getNode(t);
     if (!e || !this._isBubble(e)) return;
     this._pendingEnter !== null && (clearTimeout(this._pendingEnter), this._pendingEnter = null);
-    const i = this._renderer.canvas.getBoundingClientRect(), o = { x: i.width / 2, y: i.height / 2 }, a = this._positions.get(t), r = a ? (() => {
-      const { zoom: l, pan: d } = this._interaction.state;
-      return { x: a.x * l + d.x, y: a.y * l + d.y };
+    const i = this._renderer.canvas.getBoundingClientRect(), o = { x: i.width / 2, y: i.height / 2 }, a = this._positions.get(t), h = a ? (() => {
+      const { zoom: d, pan: c } = this._interaction.state;
+      return { x: a.x * d + c.x, y: a.y * d + c.y };
     })() : void 0, n = 480;
-    this._interaction.startTimedZoom(2.5, n, r), this._pendingEnter = setTimeout(() => {
+    this._interaction.startTimedZoom(2.5, n, h), this._pendingEnter = setTimeout(() => {
       this._pendingEnter = null, this._enterContext(e, o);
     }, n);
   }
@@ -732,11 +803,11 @@ class q {
   }
   _enterContext(t, e) {
     var o, a;
-    this._nav.push({ nodeId: t.id, label: t.label }), this._navCooldownUntil = Date.now() + C, this._rebuildVisibleCache(), this._renderer.triggerBurst(e, this._renderer.resolveNodeColor(t));
+    this._nav.push({ nodeId: t.id, label: t.label }), this._navCooldownUntil = Date.now() + S, this._rebuildVisibleCache(), this._renderer.triggerBurst(e, this._renderer.resolveNodeColor(t));
     const i = this._renderer.canvas.getBoundingClientRect();
     this._interaction.resetToCenter(1, i.width / 2, i.height / 2), this._lod.setZoom(1);
-    for (const r of this._visibleNodes)
-      this._positions.set(r.id, {
+    for (const h of this._visibleNodes)
+      this._positions.set(h.id, {
         x: (Math.random() - 0.5) * 80,
         y: (Math.random() - 0.5) * 80
       });
@@ -746,7 +817,7 @@ class q {
     var i, o;
     const t = this._nav.pop();
     if (!t) return;
-    this._navCooldownUntil = Date.now() + C, this._rebuildVisibleCache();
+    this._navCooldownUntil = Date.now() + S, this._rebuildVisibleCache();
     const s = this._renderer.canvas.getBoundingClientRect();
     this._interaction.resetToCenter(1, s.width / 2, s.height / 2), this._lod.setZoom(1);
     for (const a of this._visibleNodes)
@@ -759,23 +830,23 @@ class q {
   _checkNavigation() {
     if (Date.now() < this._navCooldownUntil) return;
     const t = this._interaction.targetZoom, e = this._interaction.zoomAnchor;
-    if (t > U && e) {
+    if (t > $ && e) {
       const { zoom: s, pan: i } = this._interaction.state, o = this._findBubbleAtCanvas(e, i, s);
       if (o) {
         this._enterContext(o, e);
         return;
       }
     }
-    t < G && this._nav.canGoBack && this._exitContext();
+    t < q && this._nav.canGoBack && this._exitContext();
   }
   _findBubbleAtCanvas(t, e, s) {
     const i = (t.x - e.x) / s, o = (t.y - e.y) / s;
     for (const a of this._visibleNodes) {
       if (!this._isBubble(a)) continue;
-      const r = this._positions.get(a.id);
-      if (!r) continue;
-      const n = i - r.x, l = o - r.y;
-      if (Math.sqrt(n * n + l * l) <= M * 1.3)
+      const h = this._positions.get(a.id);
+      if (!h) continue;
+      const n = i - h.x, d = o - h.y;
+      if (Math.sqrt(n * n + d * d) <= k * 1.3)
         return a;
     }
     return null;
@@ -788,40 +859,40 @@ class q {
       })
     ), this._unsubscribers.push(
       this._interaction.onChange((t) => {
-        var e, s, i, o, a, r, n, l;
+        var e, s, i, o, a, h, n, d;
         switch (t.type) {
           case "zoom:change":
           case "pan:change":
             break;
           case "node:hover": {
             this._internalStates.set(t.nodeId, "hovered");
-            const d = this._model.getNode(t.nodeId);
-            d && ((s = (e = this._eventHandlers)["node:hover"]) == null || s.call(e, d));
+            const c = this._model.getNode(t.nodeId);
+            c && ((s = (e = this._eventHandlers)["node:hover"]) == null || s.call(e, c));
             break;
           }
           case "node:blur": {
             this._internalStates.get(t.nodeId) === "hovered" && this._internalStates.set(t.nodeId, "idle");
-            const v = this._model.getNode(t.nodeId);
-            v && ((o = (i = this._eventHandlers)["node:blur"]) == null || o.call(i, v));
+            const b = this._model.getNode(t.nodeId);
+            b && ((o = (i = this._eventHandlers)["node:blur"]) == null || o.call(i, b));
             break;
           }
           case "canvas:click": {
-            for (const [d, v] of this._internalStates)
-              v === "selected" && this._internalStates.set(d, "idle");
-            (r = (a = this._eventHandlers)["canvas:click"]) == null || r.call(a);
+            for (const [c, b] of this._internalStates)
+              b === "selected" && this._internalStates.set(c, "idle");
+            (h = (a = this._eventHandlers)["canvas:click"]) == null || h.call(a);
             break;
           }
           case "node:click": {
-            const d = this._model.getNode(t.nodeId);
-            if (!d) break;
+            const c = this._model.getNode(t.nodeId);
+            if (!c) break;
             if (this._internalStates.get(t.nodeId) === "selected")
               this._internalStates.set(t.nodeId, "idle");
             else {
-              for (const [h, c] of this._internalStates)
-                c === "selected" && this._internalStates.set(h, "idle");
+              for (const [l, _] of this._internalStates)
+                _ === "selected" && this._internalStates.set(l, "idle");
               this._internalStates.set(t.nodeId, "selected");
             }
-            (l = (n = this._eventHandlers)["node:click"]) == null || l.call(n, d);
+            (d = (n = this._eventHandlers)["node:click"]) == null || d.call(n, c);
             break;
           }
         }
@@ -868,15 +939,15 @@ class q {
   }
 }
 export {
-  M as BUBBLE_WORLD_RADIUS,
-  W as CanvasRenderer,
-  F as ForceLayout,
-  H as InteractionController,
-  L as LodController,
-  B as NavigationController,
-  S as SkillGraphModel,
-  q as SkillTreeEngine,
-  b as defaultTheme,
-  I as mergeTheme
+  k as BUBBLE_WORLD_RADIUS,
+  G as CanvasRenderer,
+  H as ForceLayout,
+  V as InteractionController,
+  W as LodController,
+  O as NavigationController,
+  M as SkillGraphModel,
+  j as SkillTreeEngine,
+  y as defaultTheme,
+  x as mergeTheme
 };
 //# sourceMappingURL=index.js.map