@smwb/ui-solid 1.0.0 → 2.1.0

package/dist/components/dataDisplay/dagView/dagView.js

@@ -1,15 +1,15 @@
-import { use as xe, spread as Re, mergeProps as Ue, setAttribute as l, insert as k, createComponent as N, effect as T, setStyleProperty as te, template as z, className as Fe, style as We, delegateEvents as Ge } from "solid-js/web";
+import { use as ke, spread as Ue, mergeProps as Fe, setAttribute as l, insert as k, createComponent as N, effect as T, setStyleProperty as te, template as z, className as We, style as Ge, delegateEvents as Pe } from "solid-js/web";
 import '../../../assets/styles/less/components/dagView/dagView.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
 /* empty css                                                         */
-import { mergeProps as Pe, splitProps as Te, createUniqueId as qe, createMemo as S, untrack as L, createSelector as He, createSignal as re, createEffect as oe, on as ke, onMount as Se, onCleanup as ne, For as $e, Show as se, DEV as Ke } from "solid-js";
+import { mergeProps as Te, splitProps as qe, createUniqueId as He, createMemo as S, untrack as L, createSelector as Ke, createSignal as re, createEffect as oe, on as Se, onMount as $e, onCleanup as ne, For as Ae, Show as se, DEV as je } from "solid-js";
 import ie from "clsx";
-import { createControllableState as Ae } from "../../../primitives/createControllableState.js";
-import { mergeRefs as je } from "../../../primitives/mergeRefs.js";
-import { mergeStyle as Ye } from "../../../primitives/mergeStyle.js";
-import { dagLayout as Xe, dagEdgePath as Je } from "./dagLayout.js";
-import { createPanZoom as Qe, viewportTransform as et, centerOn as tt, zoomAt as rt, fitBounds as ot, isVisible as nt } from "./panZoom.js";
-var st = /* @__PURE__ */ z("<span class=smwb-dag-view__dot aria-hidden=true>"), it = /* @__PURE__ */ z("<span class=smwb-dag-view__label>"), at = /* @__PURE__ */ z("<span class=smwb-dag-view__status>"), dt = /* @__PURE__ */ z("<div role=option><span hidden>"), ct = /* @__PURE__ */ z("<p class=smwb-dag-view__summary>"), lt = /* @__PURE__ */ z('<div class=smwb-dag-view__controls role=group><button type=button class=smwb-dag-view__control><svg viewBox="0 0 24 24"aria-hidden=true><path d="M12 5v14M5 12h14"></path></svg></button><button type=button class=smwb-dag-view__control><svg viewBox="0 0 24 24"aria-hidden=true><path d="M5 12h14"></path></svg></button><button type=button class=smwb-dag-view__control><svg viewBox="0 0 24 24"aria-hidden=true><path d="M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5">'), ut = /* @__PURE__ */ z('<div><div class=smwb-dag-view__world role=listbox><svg class=smwb-dag-view__edges aria-hidden=true><defs><marker viewBox="0 0 10 10"refX=9 refY=5 markerWidth=10 markerHeight=10 markerUnits=userSpaceOnUse orient=auto-start-reverse><path class=smwb-dag-view__arrow d="M0,1 L9,5 L0,9 z"></path></marker><marker viewBox="0 0 10 10"refX=9 refY=5 markerWidth=10 markerHeight=10 markerUnits=userSpaceOnUse orient=auto-start-reverse><path class="smwb-dag-view__arrow smwb-dag-view__arrow--active"d="M0,1 L9,5 L0,9 z"></path></marker></defs><g transform="translate(24 24)">'), gt = /* @__PURE__ */ z("<svg><path></svg>", !1, !0, !1);
-const V = 24, ze = {
+import { createControllableState as ze } from "../../../primitives/createControllableState.js";
+import { mergeRefs as Ye } from "../../../primitives/mergeRefs.js";
+import { mergeStyle as Xe } from "../../../primitives/mergeStyle.js";
+import { dagLayout as Je, dagEdgePath as Qe } from "./dagLayout.js";
+import { createPanZoom as et, viewportTransform as tt, centerOn as rt, zoomAt as ot, fitBounds as nt, isVisible as st } from "./panZoom.js";
+var it = /* @__PURE__ */ z("<span class=smwb-dag-view__dot aria-hidden=true>"), at = /* @__PURE__ */ z("<span class=smwb-dag-view__label>"), dt = /* @__PURE__ */ z("<span class=smwb-dag-view__status>"), ct = /* @__PURE__ */ z("<div role=option><span hidden>"), lt = /* @__PURE__ */ z("<p class=smwb-dag-view__summary>"), ut = /* @__PURE__ */ z('<div class=smwb-dag-view__controls role=group><button type=button class=smwb-dag-view__control><svg viewBox="0 0 24 24"aria-hidden=true><path d="M12 5v14M5 12h14"></path></svg></button><button type=button class=smwb-dag-view__control><svg viewBox="0 0 24 24"aria-hidden=true><path d="M5 12h14"></path></svg></button><button type=button class=smwb-dag-view__control><svg viewBox="0 0 24 24"aria-hidden=true><path d="M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5">'), gt = /* @__PURE__ */ z('<div><div class=smwb-dag-view__world role=listbox><svg class=smwb-dag-view__edges aria-hidden=true><defs><marker viewBox="0 0 10 10"refX=9 refY=5 markerWidth=10 markerHeight=10 markerUnits=userSpaceOnUse orient=auto-start-reverse><path class=smwb-dag-view__arrow d="M0,1 L9,5 L0,9 z"></path></marker><marker viewBox="0 0 10 10"refX=9 refY=5 markerWidth=10 markerHeight=10 markerUnits=userSpaceOnUse orient=auto-start-reverse><path class="smwb-dag-view__arrow smwb-dag-view__arrow--active"d="M0,1 L9,5 L0,9 z"></path></marker></defs><g transform="translate(24 24)">'), mt = /* @__PURE__ */ z("<svg><path></svg>", !1, !0, !1);
+const V = 24, De = {
   roleDescription: "dependency graph",
   status: "Status",
   dependsOn: "Depends on",
@@ -27,12 +27,12 @@ const V = 24, ze = {
   zoomOut: "Zoom out",
   fitView: "Fit to view",
   controls: "Zoom"
-}, mt = ["label", "status", "accent", "width", "height", "data", "disabled"], ht = 'a[href], button, input, select, textarea, iframe, summary, audio[controls], video[controls], [tabindex], [contenteditable]:not([contenteditable="false"])', ft = (w) => typeof w == "number" ? `${w}px` : w, wt = (w, M) => w.length === M.length && w.every((n, q) => n === M[q]), vt = (w, M) => {
+}, ht = ["label", "status", "accent", "variant", "width", "height", "data", "disabled"], ft = 'a[href], button, input, select, textarea, iframe, summary, audio[controls], video[controls], [tabindex], [contenteditable]:not([contenteditable="false"])', wt = (w) => typeof w == "number" ? `${w}px` : w, vt = (w, M) => w.length === M.length && w.every((n, q) => n === M[q]), pt = (w, M) => {
   const n = w?.label;
   return typeof n == "string" || typeof n == "number" ? String(n) : M;
-}, pt = Ke ? (w) => console.warn(`[smwb] DagView: ${w}`) : void 0;
-function Mt(w) {
-  const M = Pe({
+}, bt = je ? (w) => console.warn(`[smwb] DagView: ${w}`) : void 0;
+function Bt(w) {
+  const M = Te({
     direction: "LR",
     nodeWidth: 180,
     nodeHeight: 56,
@@ -43,13 +43,13 @@ function Mt(w) {
     maxZoom: 2,
     wheel: "zoom",
     controls: !0
-  }, w), [n, q] = Te(M, ["class", "style", "label", "summary", "nodes", "edges", "renderNode", "direction", "nodeWidth", "nodeHeight", "rankGap", "nodeGap", "layout", "selectedId", "defaultSelectedId", "onSelectedChange", "onNodeClick", "dimUnrelated", "viewport", "defaultViewport", "onViewportChange", "fit", "minZoom", "maxZoom", "wheel", "controls", "labels", "height", "apiRef", "ref", "data-testid"]), R = qe(), ae = `${R}-arrow`, de = `${R}-arrow-active`, ce = `${R}-summary`;
+  }, w), [n, q] = qe(M, ["class", "style", "label", "summary", "nodes", "edges", "renderNode", "direction", "nodeWidth", "nodeHeight", "rankGap", "nodeGap", "layout", "selectedId", "defaultSelectedId", "onSelectedChange", "onNodeClick", "dimUnrelated", "viewport", "defaultViewport", "onViewportChange", "fit", "minZoom", "maxZoom", "wheel", "controls", "labels", "height", "apiRef", "ref", "data-testid"]), R = He(), ae = `${R}-arrow`, de = `${R}-arrow-active`, ce = `${R}-summary`;
   let D;
   const B = /* @__PURE__ */ new Map(), x = S(() => ({
-    ...ze,
+    ...De,
     ...n.labels,
     statuses: {
-      ...ze.statuses,
+      ...De.statuses,
       ...n.labels?.statuses
     }
   })), le = (e) => x().statuses[e] ?? e, I = S(() => {
@@ -57,48 +57,48 @@ function Mt(w) {
     for (const t of n.nodes) e.has(t.id) || e.set(t.id, t);
     return e;
   }), H = S(() => [...I().keys()], [], {
-    equals: wt
-  }), De = S(() => {
-    const e = [...I().values()].map((s) => ({
-      id: s.id,
-      width: s.width ?? n.nodeWidth,
-      height: s.height ?? n.nodeHeight
-    })), t = n.edges.map((s) => ({
-      id: s.id,
-      source: s.source,
-      target: s.target
+    equals: vt
+  }), Me = S(() => {
+    const e = [...I().values()].map((i) => ({
+      id: i.id,
+      width: i.width ?? n.nodeWidth,
+      height: i.height ?? n.nodeHeight
+    })), t = n.edges.map((i) => ({
+      id: i.id,
+      source: i.source,
+      target: i.target
     })), r = {
       nodes: e,
       edges: t,
       direction: n.direction,
       rankGap: n.rankGap,
       nodeGap: n.nodeGap,
-      warn: pt
+      warn: bt
     };
     return {
-      key: JSON.stringify([n.direction, n.rankGap, n.nodeGap, e.map((s) => [s.id, s.width, s.height]), t.map((s) => [s.id ?? null, s.source, s.target])]),
+      key: JSON.stringify([n.direction, n.rankGap, n.nodeGap, e.map((i) => [i.id, i.width, i.height]), t.map((i) => [i.id ?? null, i.source, i.target])]),
       input: r
     };
   }, void 0, {
     equals: (e, t) => e.key === t.key
-  }), b = S(() => (n.layout ?? Xe)(De().input)), U = (e) => n.direction === "TB" ? e.x : e.y, y = S(() => {
+  }), b = S(() => (n.layout ?? Je)(Me().input)), U = (e) => n.direction === "TB" ? e.x : e.y, y = S(() => {
     const e = b(), t = /* @__PURE__ */ new Map(), r = /* @__PURE__ */ new Map();
-    for (const i of e.edges)
-      t.has(i.target) || t.set(i.target, []), r.has(i.source) || r.set(i.source, []), t.get(i.target).push(i), r.get(i.source).push(i);
-    const d = [...e.nodes.values()].sort((i, m) => i.layer - m.layer || U(i) - U(m)), s = /* @__PURE__ */ new Map();
-    for (const i of d)
-      s.has(i.layer) || s.set(i.layer, []), s.get(i.layer).push(i);
+    for (const a of e.edges)
+      t.has(a.target) || t.set(a.target, []), r.has(a.source) || r.set(a.source, []), t.get(a.target).push(a), r.get(a.source).push(a);
+    const d = [...e.nodes.values()].sort((a, m) => a.layer - m.layer || U(a) - U(m)), i = /* @__PURE__ */ new Map();
+    for (const a of d)
+      i.has(a.layer) || i.set(a.layer, []), i.get(a.layer).push(a);
     return {
       incoming: t,
       outgoing: r,
       ordered: d,
-      layers: s
+      layers: i
     };
-  }), [C, K] = Ae({
+  }), [C, K] = ze({
     value: () => n.selectedId,
     defaultValue: L(() => n.defaultSelectedId) ?? null,
     onChange: (e) => n.onSelectedChange?.(e)
-  }), ue = He(C), F = S(() => {
+  }), ue = Ke(C), F = S(() => {
     const e = C(), t = /* @__PURE__ */ new Map(), r = /* @__PURE__ */ new Map();
     if (e === null || !b().nodes.has(e)) return {
       active: !1,
@@ -107,23 +107,23 @@ function Mt(w) {
     };
     const {
       incoming: d,
-      outgoing: s
+      outgoing: i
     } = y();
-    for (const i of d.get(e) ?? [])
-      t.set(i.id, "upstream"), r.set(i.source, "upstream");
-    for (const i of s.get(e) ?? [])
-      t.set(i.id, "downstream"), r.set(i.target, "downstream");
+    for (const a of d.get(e) ?? [])
+      t.set(a.id, "upstream"), r.set(a.source, "upstream");
+    for (const a of i.get(e) ?? [])
+      t.set(a.id, "downstream"), r.set(a.target, "downstream");
     return {
       active: !0,
       edges: t,
       nodes: r
     };
-  }), [Me, ge] = re(null), [j, Y] = re(null), W = S(() => {
-    const e = b().nodes, t = Me();
+  }), [Be, ge] = re(null), [j, Y] = re(null), W = S(() => {
+    const e = b().nodes, t = Be();
     if (t !== null && e.has(t)) return t;
     const r = C();
     return r !== null && e.has(r) ? r : y().ordered[0]?.id ?? null;
-  }), [$, E] = Ae({
+  }), [$, E] = ze({
     value: () => n.viewport,
     defaultValue: L(() => n.defaultViewport) ?? {
       x: 0,
@@ -131,7 +131,7 @@ function Mt(w) {
       zoom: 1
     },
     onChange: (e) => n.onViewportChange?.(e)
-  }), [Be, Ie] = re(!1), Le = S(() => $().zoom < 0.45), O = () => ({
+  }), [Ie, Le] = re(!1), Ve = S(() => $().zoom < 0.45), O = () => ({
     width: D?.clientWidth ?? 0,
     height: D?.clientHeight ?? 0
   }), X = () => {
@@ -155,7 +155,7 @@ function Mt(w) {
     fitView() {
       if (!X()) return;
       const e = Z();
-      E(ot({
+      E(nt({
         x: 0,
         y: 0,
         ...e
@@ -169,38 +169,38 @@ function Mt(w) {
         width: t,
         height: r
       } = O();
-      E(rt($(), {
+      E(ot($(), {
         x: t / 2,
         y: r / 2
       }, e, n.minZoom, n.maxZoom));
     },
     centerNode(e) {
       const t = me(e);
-      t && E(tt($(), {
+      t && E(rt($(), {
         x: t.x + t.width / 2,
         y: t.y + t.height / 2
       }, O()));
     }
   }, he = (e) => {
     const t = me(e);
-    t && X() && !nt($(), t, O(), 8) && _.centerNode(e);
+    t && X() && !st($(), t, O(), 8) && _.centerNode(e);
   };
   let G = !1;
   const J = () => {
     !G || !X() || (G = !1, _.fitView());
   };
-  oe(ke(b, () => {
+  oe(Se(b, () => {
     L(() => n.fit) && (G = !0, J());
   }, {
     defer: !0
-  })), Se(() => {
-    const e = Qe(D, {
+  })), $e(() => {
+    const e = et(D, {
       viewport: $,
       write: E,
       minZoom: () => n.minZoom,
       maxZoom: () => n.maxZoom,
       wheel: () => n.wheel,
-      onInteracting: Ie
+      onInteracting: Le
     });
     let t = 0;
     const r = typeof ResizeObserver == "function" ? new ResizeObserver(() => {
@@ -223,11 +223,11 @@ function Mt(w) {
     return e && L(() => {
       const r = new Set(t), d = C();
       d !== null && !r.has(d) && e.includes(d) && K(null);
-      const s = j();
-      if (s === null || r.has(s)) return;
+      const i = j();
+      if (i === null || r.has(i)) return;
       Y(null);
-      const i = D?.ownerDocument, m = W();
-      i && (i.activeElement === null || i.activeElement === i.body) && m !== null && B.get(m)?.focus({
+      const a = D?.ownerDocument, m = W();
+      a && (a.activeElement === null || a.activeElement === a.body) && m !== null && B.get(m)?.focus({
         preventScroll: !0
       });
     }), t;
@@ -235,14 +235,14 @@ function Mt(w) {
   const P = /* @__PURE__ */ new WeakMap(), ee = /* @__PURE__ */ new WeakMap(), we = () => {
     const e = L(W);
     for (const [t, r] of B)
-      for (const d of r.querySelectorAll(ht)) {
+      for (const d of r.querySelectorAll(ft)) {
         P.has(d) || P.set(d, d.getAttribute("tabindex"));
-        const s = P.get(d) ?? null, i = t === e ? s : "-1";
-        d.getAttribute("tabindex") !== i && (i === null ? d.removeAttribute("tabindex") : d.setAttribute("tabindex", i), ee.set(d, i));
+        const i = P.get(d) ?? null, a = t === e ? i : "-1";
+        d.getAttribute("tabindex") !== a && (a === null ? d.removeAttribute("tabindex") : d.setAttribute("tabindex", a), ee.set(d, a));
       }
   };
-  Se(() => {
-    if (!n.renderNode || (oe(ke(W, we)), typeof MutationObserver != "function")) return;
+  $e(() => {
+    if (!n.renderNode || (oe(Se(W, we)), typeof MutationObserver != "function")) return;
     const e = new MutationObserver((t) => {
       let r = !1;
       for (const d of t) {
@@ -250,10 +250,10 @@ function Mt(w) {
           r = !0;
           continue;
         }
-        const s = d.target;
-        if (s.classList.contains("smwb-dag-view__node")) continue;
-        const i = s.getAttribute("tabindex");
-        ee.has(s) && ee.get(s) === i || (P.set(s, i), r = !0);
+        const i = d.target;
+        if (i.classList.contains("smwb-dag-view__node")) continue;
+        const a = i.getAttribute("tabindex");
+        ee.has(i) && ee.get(i) === a || (P.set(i, a), r = !0);
       }
       r && we();
     });
@@ -264,30 +264,30 @@ function Mt(w) {
       attributeFilter: ["tabindex"]
     }), ne(() => e.disconnect());
   });
-  const Ve = (e, t) => {
-    const r = n.direction === "TB", d = r ? "ArrowDown" : "ArrowRight", s = r ? "ArrowUp" : "ArrowLeft", i = r ? "ArrowLeft" : "ArrowUp", m = r ? "ArrowRight" : "ArrowDown", v = b().nodes, c = (a) => a.map((h) => v.get(h)).filter((h) => h !== void 0).sort((h, f) => U(h) - U(f))[0]?.id;
-    if (t === d) return c((y().outgoing.get(e) ?? []).map((a) => a.target));
-    if (t === s) return c((y().incoming.get(e) ?? []).map((a) => a.source));
+  const Ce = (e, t) => {
+    const r = n.direction === "TB", d = r ? "ArrowDown" : "ArrowRight", i = r ? "ArrowUp" : "ArrowLeft", a = r ? "ArrowLeft" : "ArrowUp", m = r ? "ArrowRight" : "ArrowDown", v = b().nodes, c = (s) => s.map((h) => v.get(h)).filter((h) => h !== void 0).sort((h, f) => U(h) - U(f))[0]?.id;
+    if (t === d) return c((y().outgoing.get(e) ?? []).map((s) => s.target));
+    if (t === i) return c((y().incoming.get(e) ?? []).map((s) => s.source));
     const g = v.get(e);
     if (!g) return;
-    const o = y().layers.get(g.layer) ?? [], u = o.findIndex((a) => a.id === e);
-    if (t === i) return o[u - 1]?.id;
+    const o = y().layers.get(g.layer) ?? [], u = o.findIndex((s) => s.id === e);
+    if (t === a) return o[u - 1]?.id;
     if (t === m) return o[u + 1]?.id;
-  }, Ce = (e) => {
+  }, Ee = (e) => {
     const t = e.target, r = t.dataset?.dagId;
     if (r === void 0 || !t.classList.contains("smwb-dag-view__node") || e.ctrlKey || e.metaKey || e.altKey) return;
     const d = e.key;
     if (d.startsWith("Arrow") && e.shiftKey) {
-      const i = $(), m = d === "ArrowLeft" ? 48 : d === "ArrowRight" ? -48 : 0, v = d === "ArrowUp" ? 48 : d === "ArrowDown" ? -48 : 0;
+      const a = $(), m = d === "ArrowLeft" ? 48 : d === "ArrowRight" ? -48 : 0, v = d === "ArrowUp" ? 48 : d === "ArrowDown" ? -48 : 0;
       E({
-        x: i.x + m,
-        y: i.y + v,
-        zoom: i.zoom
+        x: a.x + m,
+        y: a.y + v,
+        zoom: a.zoom
       }), e.preventDefault();
       return;
     }
     if (d.startsWith("Arrow")) {
-      e.preventDefault(), Q(Ve(r, d));
+      e.preventDefault(), Q(Ce(r, d));
       return;
     }
     switch (d) {
@@ -317,31 +317,31 @@ function Mt(w) {
         e.preventDefault(), _.fitView();
         return;
     }
-  }, Ee = (e) => [st(), (() => {
-    var t = it();
+  }, Oe = (e) => [it(), (() => {
+    var t = at();
     return k(t, () => e.label ?? e.id), t;
   })(), N(se, {
     get when() {
       return e.status;
     },
     children: (t) => (() => {
-      var r = at();
+      var r = dt();
       return k(r, () => le(t())), r;
     })()
   })], ve = (e) => {
     const t = I().get(e), r = [];
     t?.status && r.push(`${x().status}: ${le(t.status)}.`);
-    const d = (m) => m.map((v) => vt(I().get(v), v)).join(", "), s = (y().incoming.get(e) ?? []).map((m) => m.source), i = (y().outgoing.get(e) ?? []).map((m) => m.target);
-    return s.length && r.push(`${x().dependsOn}: ${d(s)}.`), i.length && r.push(`${x().requiredBy}: ${d(i)}.`), r.join(" ");
-  }, Oe = (e, t) => {
+    const d = (m) => m.map((v) => pt(I().get(v), v)).join(", "), i = (y().incoming.get(e) ?? []).map((m) => m.source), a = (y().outgoing.get(e) ?? []).map((m) => m.target);
+    return i.length && r.push(`${x().dependsOn}: ${d(i)}.`), a.length && r.push(`${x().requiredBy}: ${d(a)}.`), r.join(" ");
+  }, Ze = (e, t) => {
     const r = () => I().get(e), d = {
       id: e
     };
-    for (const o of mt) Object.defineProperty(d, o, {
+    for (const o of ht) Object.defineProperty(d, o, {
       enumerable: !0,
       get: () => r()?.[o]
     });
-    const s = {
+    const i = {
       get selected() {
         return ue(e);
       },
@@ -355,7 +355,7 @@ function Mt(w) {
       get focused() {
         return j() === e;
       }
-    }, i = () => `${R}-node-${t()}`, m = () => {
+    }, a = () => `${R}-node-${t()}`, m = () => {
       const o = b().nodes.get(e), u = o ? {
         left: `${o.x + V}px`,
         top: `${o.y + V}px`,
@@ -363,8 +363,8 @@ function Mt(w) {
         height: `${o.height}px`
       } : {
         display: "none"
-      }, a = r()?.accent;
-      return a && (u["--smwb-dag-view-node-accent"] = a), u;
+      }, s = r()?.accent;
+      return s && (u["--smwb-dag-view-node-accent"] = s), u;
     }, v = (o) => {
       if (o.target !== o.currentTarget) return;
       ge(e), Y(e);
@@ -376,20 +376,20 @@ function Mt(w) {
       u && he(e);
     }, c = (o) => {
       o.target !== o.currentTarget || j() !== e || H().includes(e) && Y(null);
-    }, g = L(() => (n.renderNode ?? Ee)(d, s));
+    }, g = L(() => (n.renderNode ?? Oe)(d, i));
     return (() => {
-      var o = dt(), u = o.firstChild;
-      return o.addEventListener("blur", c), o.addEventListener("focus", v), o.$$click = (a) => fe(e, a), xe((a) => {
-        B.set(e, a), ne(() => B.get(e) === a && B.delete(e));
-      }, o), l(o, "data-dag-id", e), k(o, g, u), k(u, () => ve(e)), T((a) => {
+      var o = ct(), u = o.firstChild;
+      return o.addEventListener("blur", c), o.addEventListener("focus", v), o.$$click = (s) => fe(e, s), ke((s) => {
+        B.set(e, s), ne(() => B.get(e) === s && B.delete(e));
+      }, o), l(o, "data-dag-id", e), k(o, g, u), k(u, () => ve(e)), T((s) => {
         var h = ie("smwb-dag-view__node", {
-          "smwb-dag-view__node--selected": s.selected,
-          "smwb-dag-view__node--upstream": s.related === "upstream",
-          "smwb-dag-view__node--downstream": s.related === "downstream",
-          "smwb-dag-view__node--dimmed": s.dimmed,
+          "smwb-dag-view__node--selected": i.selected,
+          "smwb-dag-view__node--upstream": i.related === "upstream",
+          "smwb-dag-view__node--downstream": i.related === "downstream",
+          "smwb-dag-view__node--dimmed": i.dimmed,
           "smwb-dag-view__node--disabled": !!r()?.disabled
-        }), f = r()?.status, p = s.selected ? "true" : "false", A = r()?.disabled ? "true" : void 0, be = ve(e) ? i() : void 0, ye = W() === e ? 0 : -1, Ne = m(), _e = i();
-        return h !== a.e && Fe(o, a.e = h), f !== a.t && l(o, "data-status", a.t = f), p !== a.a && l(o, "aria-selected", a.a = p), A !== a.o && l(o, "aria-disabled", a.o = A), be !== a.i && l(o, "aria-describedby", a.i = be), ye !== a.n && l(o, "tabindex", a.n = ye), a.s = We(o, Ne, a.s), _e !== a.h && l(u, "id", a.h = _e), a;
+        }), f = r()?.status, p = r()?.variant, A = i.selected ? "true" : "false", be = r()?.disabled ? "true" : void 0, ye = ve(e) ? a() : void 0, _e = W() === e ? 0 : -1, Re = m(), xe = a();
+        return h !== s.e && We(o, s.e = h), f !== s.t && l(o, "data-status", s.t = f), p !== s.a && l(o, "data-variant", s.a = p), A !== s.o && l(o, "aria-selected", s.o = A), be !== s.i && l(o, "aria-disabled", s.i = be), ye !== s.n && l(o, "aria-describedby", s.n = ye), _e !== s.s && l(o, "tabindex", s.s = _e), s.h = Ge(o, Re, s.h), xe !== s.r && l(u, "id", s.r = xe), s;
       }, {
         e: void 0,
         t: void 0,
@@ -398,10 +398,11 @@ function Mt(w) {
         i: void 0,
         n: void 0,
         s: void 0,
-        h: void 0
+        h: void 0,
+        r: void 0
       }), o;
     })();
-  }, Ze = (e) => {
+  }, Ne = (e) => {
     const t = F(), r = t.edges.get(e.id);
     return ie("smwb-dag-view__edge", {
       "smwb-dag-view__edge--active": r !== void 0,
@@ -410,12 +411,12 @@ function Mt(w) {
       "smwb-dag-view__edge--dimmed": !!n.dimUnrelated && t.active && r === void 0,
       "smwb-dag-view__edge--reversed": e.reversed
     });
-  }, pe = () => Ye(n.style, {
-    height: n.height === void 0 ? void 0 : ft(n.height)
+  }, pe = () => Xe(n.style, {
+    height: n.height === void 0 ? void 0 : wt(n.height)
   });
   return (() => {
-    var e = ut(), t = e.firstChild, r = t.firstChild, d = r.firstChild, s = d.firstChild, i = s.nextSibling, m = d.nextSibling, v = je(n.ref, (c) => D = c);
-    return typeof v == "function" && xe(v, e), Re(e, Ue({
+    var e = gt(), t = e.firstChild, r = t.firstChild, d = r.firstChild, i = d.firstChild, a = i.nextSibling, m = d.nextSibling, v = Ye(n.ref, (c) => D = c);
+    return typeof v == "function" && ke(v, e), Ue(e, Fe({
       get "data-testid"() {
         return n["data-testid"] ?? "dag-view";
       }
@@ -430,20 +431,20 @@ function Mt(w) {
         return n.direction;
       },
       get "data-zoom"() {
-        return Le() ? "far" : void 0;
+        return Ve() ? "far" : void 0;
       },
       get "data-interacting"() {
-        return Be() ? "" : void 0;
+        return Ie() ? "" : void 0;
       }
-    }), !1, !0), t.$$keydown = Ce, l(s, "id", ae), l(i, "id", de), k(m, N($e, {
+    }), !1, !0), t.$$keydown = Ee, l(i, "id", ae), l(a, "id", de), k(m, N(Ae, {
       get each() {
         return b().edges;
       },
       children: (c) => (() => {
-        var g = gt();
+        var g = mt();
         return T((o) => {
-          var u = Ze(c), a = c.source, h = c.target, f = Je(c.points, n.direction), p = `url(#${F().edges.has(c.id) ? de : ae})`;
-          return u !== o.e && l(g, "class", o.e = u), a !== o.t && l(g, "data-source", o.t = a), h !== o.a && l(g, "data-target", o.a = h), f !== o.o && l(g, "d", o.o = f), p !== o.i && l(g, "marker-end", o.i = p), o;
+          var u = Ne(c), s = c.source, h = c.target, f = Qe(c.points, n.direction), p = `url(#${F().edges.has(c.id) ? de : ae})`;
+          return u !== o.e && l(g, "class", o.e = u), s !== o.t && l(g, "data-source", o.t = s), h !== o.a && l(g, "data-target", o.a = h), f !== o.o && l(g, "d", o.o = f), p !== o.i && l(g, "marker-end", o.i = p), o;
         }, {
           e: void 0,
           t: void 0,
@@ -452,17 +453,17 @@ function Mt(w) {
           i: void 0
         }), g;
       })()
-    })), k(t, N($e, {
+    })), k(t, N(Ae, {
       get each() {
         return H();
       },
-      children: (c, g) => Oe(c, g)
+      children: (c, g) => Ze(c, g)
     }), null), k(e, N(se, {
       get when() {
         return n.summary;
       },
       get children() {
-        var c = ct();
+        var c = lt();
         return l(c, "id", ce), k(c, () => n.summary), c;
       }
     }), null), k(e, N(se, {
@@ -470,10 +471,10 @@ function Mt(w) {
         return n.controls;
       },
       get children() {
-        var c = lt(), g = c.firstChild, o = g.nextSibling, u = o.nextSibling;
-        return g.$$click = () => _.zoomBy(1.25), o.$$click = () => _.zoomBy(0.8), u.$$click = () => _.fitView(), T((a) => {
+        var c = ut(), g = c.firstChild, o = g.nextSibling, u = o.nextSibling;
+        return g.$$click = () => _.zoomBy(1.25), o.$$click = () => _.zoomBy(0.8), u.$$click = () => _.fitView(), T((s) => {
           var h = x().controls, f = x().zoomIn, p = x().zoomOut, A = x().fitView;
-          return h !== a.e && l(c, "aria-label", a.e = h), f !== a.t && l(g, "title", a.t = f), p !== a.a && l(o, "title", a.a = p), A !== a.o && l(u, "title", a.o = A), a;
+          return h !== s.e && l(c, "aria-label", s.e = h), f !== s.t && l(g, "title", s.t = f), p !== s.a && l(o, "title", s.a = p), A !== s.o && l(u, "title", s.o = A), s;
         }, {
           e: void 0,
           t: void 0,
@@ -482,8 +483,8 @@ function Mt(w) {
         }), c;
       }
     }), null), T((c) => {
-      var g = n.label, o = x().roleDescription, u = n.summary ? ce : void 0, a = `${Z().width}px`, h = `${Z().height}px`, f = et($()), p = Z().width, A = Z().height;
-      return g !== c.e && l(t, "aria-label", c.e = g), o !== c.t && l(t, "aria-roledescription", c.t = o), u !== c.a && l(t, "aria-describedby", c.a = u), a !== c.o && te(t, "width", c.o = a), h !== c.i && te(t, "height", c.i = h), f !== c.n && te(t, "transform", c.n = f), p !== c.s && l(r, "width", c.s = p), A !== c.h && l(r, "height", c.h = A), c;
+      var g = n.label, o = x().roleDescription, u = n.summary ? ce : void 0, s = `${Z().width}px`, h = `${Z().height}px`, f = tt($()), p = Z().width, A = Z().height;
+      return g !== c.e && l(t, "aria-label", c.e = g), o !== c.t && l(t, "aria-roledescription", c.t = o), u !== c.a && l(t, "aria-describedby", c.a = u), s !== c.o && te(t, "width", c.o = s), h !== c.i && te(t, "height", c.i = h), f !== c.n && te(t, "transform", c.n = f), p !== c.s && l(r, "width", c.s = p), A !== c.h && l(r, "height", c.h = A), c;
     }, {
       e: void 0,
       t: void 0,
@@ -496,8 +497,8 @@ function Mt(w) {
     }), e;
   })();
 }
-Ge(["click", "keydown"]);
+Pe(["click", "keydown"]);
 export {
-  Mt as DagView
+  Bt as DagView
 };
 //# sourceMappingURL=dagView.js.map