@smwb/ui-solid 0.13.0 → 1.0.0

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

@@ -1,13 +1,13 @@
-import { use as _e, spread as Ne, mergeProps as Re, setAttribute as l, insert as k, createComponent as N, effect as W, setStyleProperty as Q, template as z, className as Ue, style as Fe, delegateEvents as Ge } from "solid-js/web";
-import { mergeProps as Pe, splitProps as We, createUniqueId as Te, createMemo as S, untrack as V, createSelector as qe, createSignal as ee, createEffect as te, on as xe, onMount as ke, onCleanup as oe, For as Se, Show as re, DEV as He } from "solid-js";
-import ne from "clsx";
-import { createControllableState as $e } from "../../../primitives/createControllableState.js";
-import { mergeRefs as Ke } from "../../../primitives/mergeRefs.js";
-import { mergeStyle as je } from "../../../primitives/mergeStyle.js";
-import { dagLayout as Ye, dagEdgePath as Xe } from "./dagLayout.js";
-import { createPanZoom as Je, viewportTransform as Qe, centerOn as et, zoomAt as tt, fitBounds as ot, isVisible as rt } from "./panZoom.js";
-var nt = /* @__PURE__ */ z("<span class=smwb-dag-view__dot aria-hidden=true>"), st = /* @__PURE__ */ z("<span class=smwb-dag-view__label>"), it = /* @__PURE__ */ z("<span class=smwb-dag-view__status>"), at = /* @__PURE__ */ z("<div role=option><span hidden>"), dt = /* @__PURE__ */ z("<p class=smwb-dag-view__summary>"), ct = /* @__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">'), lt = /* @__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)">'), ut = /* @__PURE__ */ z("<svg><path></svg>", !1, !0, !1);
-const C = 24, Ae = {
+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 { 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 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 = {
   roleDescription: "dependency graph",
   status: "Status",
   dependsOn: "Depends on",
@@ -25,11 +25,11 @@ const C = 24, Ae = {
   zoomOut: "Zoom out",
   fitView: "Fit to view",
   controls: "Zoom"
-}, mt = ["label", "status", "accent", "width", "height", "data", "disabled"], gt = 'a[href], button, input, select, textarea, iframe, summary, audio[controls], video[controls], [tabindex], [contenteditable]:not([contenteditable="false"])', ht = (f) => typeof f == "number" ? `${f}px` : f, wt = (f, M) => f.length === M.length && f.every((n, T) => n === M[T]), ft = (f, M) => {
-  const n = f?.label;
+}, 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) => {
+  const n = w?.label;
   return typeof n == "string" || typeof n == "number" ? String(n) : M;
-}, vt = He ? (f) => console.warn(`[smwb] DagView: ${f}`) : void 0;
-function At(f) {
+}, pt = Ke ? (w) => console.warn(`[smwb] DagView: ${w}`) : void 0;
+function zt(w) {
   const M = Pe({
     direction: "LR",
     nodeWidth: 180,
@@ -41,117 +41,117 @@ function At(f) {
     maxZoom: 2,
     wheel: "zoom",
     controls: !0
-  }, f), [n, T] = We(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 = Te(), se = `${R}-arrow`, ie = `${R}-arrow-active`, ae = `${R}-summary`;
+  }, 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`;
   let D;
   const B = /* @__PURE__ */ new Map(), x = S(() => ({
-    ...Ae,
+    ...ze,
     ...n.labels,
     statuses: {
-      ...Ae.statuses,
+      ...ze.statuses,
       ...n.labels?.statuses
     }
-  })), de = (e) => x().statuses[e] ?? e, I = S(() => {
+  })), le = (e) => x().statuses[e] ?? e, I = S(() => {
     const e = /* @__PURE__ */ new Map();
     for (const t of n.nodes) e.has(t.id) || e.set(t.id, t);
     return e;
-  }), ce = S(() => [...I().keys()], [], {
+  }), H = S(() => [...I().keys()], [], {
     equals: wt
-  }), ze = S(() => {
-    const e = [...I().values()].map((a) => ({
-      id: a.id,
-      width: a.width ?? n.nodeWidth,
-      height: a.height ?? n.nodeHeight
-    })), t = n.edges.map((a) => ({
-      id: a.id,
-      source: a.source,
-      target: a.target
-    })), o = {
+  }), 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
+    })), r = {
       nodes: e,
       edges: t,
       direction: n.direction,
       rankGap: n.rankGap,
       nodeGap: n.nodeGap,
-      warn: vt
+      warn: pt
     };
     return {
-      key: JSON.stringify([n.direction, n.rankGap, n.nodeGap, e.map((a) => [a.id, a.width, a.height]), t.map((a) => [a.id ?? null, a.source, a.target])]),
-      input: o
+      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])]),
+      input: r
     };
   }, void 0, {
     equals: (e, t) => e.key === t.key
-  }), b = S(() => (n.layout ?? Ye)(ze().input)), U = (e) => n.direction === "TB" ? e.x : e.y, y = S(() => {
-    const e = b(), t = /* @__PURE__ */ new Map(), o = /* @__PURE__ */ new Map();
+  }), b = S(() => (n.layout ?? Xe)(De().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, []), o.has(i.source) || o.set(i.source, []), t.get(i.target).push(i), o.get(i.source).push(i);
-    const c = [...e.nodes.values()].sort((i, g) => i.layer - g.layer || U(i) - U(g)), a = /* @__PURE__ */ new Map();
-    for (const i of c)
-      a.has(i.layer) || a.set(i.layer, []), a.get(i.layer).push(i);
+      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);
     return {
       incoming: t,
-      outgoing: o,
-      ordered: c,
-      layers: a
+      outgoing: r,
+      ordered: d,
+      layers: s
     };
-  }), [L, q] = $e({
+  }), [C, K] = Ae({
     value: () => n.selectedId,
-    defaultValue: V(() => n.defaultSelectedId) ?? null,
+    defaultValue: L(() => n.defaultSelectedId) ?? null,
     onChange: (e) => n.onSelectedChange?.(e)
-  }), le = qe(L), F = S(() => {
-    const e = L(), t = /* @__PURE__ */ new Map(), o = /* @__PURE__ */ new Map();
+  }), ue = He(C), F = S(() => {
+    const e = C(), t = /* @__PURE__ */ new Map(), r = /* @__PURE__ */ new Map();
     if (e === null || !b().nodes.has(e)) return {
       active: !1,
       edges: t,
-      nodes: o
+      nodes: r
     };
     const {
-      incoming: c,
-      outgoing: a
+      incoming: d,
+      outgoing: s
     } = y();
-    for (const i of c.get(e) ?? [])
-      t.set(i.id, "upstream"), o.set(i.source, "upstream");
-    for (const i of a.get(e) ?? [])
-      t.set(i.id, "downstream"), o.set(i.target, "downstream");
+    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");
     return {
       active: !0,
       edges: t,
-      nodes: o
+      nodes: r
     };
-  }), [De, ue] = ee(null), [H, K] = ee(null), G = S(() => {
-    const e = b().nodes, t = De();
+  }), [Me, ge] = re(null), [j, Y] = re(null), W = S(() => {
+    const e = b().nodes, t = Me();
     if (t !== null && e.has(t)) return t;
-    const o = L();
-    return o !== null && e.has(o) ? o : y().ordered[0]?.id ?? null;
-  }), [$, E] = $e({
+    const r = C();
+    return r !== null && e.has(r) ? r : y().ordered[0]?.id ?? null;
+  }), [$, E] = Ae({
     value: () => n.viewport,
-    defaultValue: V(() => n.defaultViewport) ?? {
+    defaultValue: L(() => n.defaultViewport) ?? {
       x: 0,
       y: 0,
       zoom: 1
     },
     onChange: (e) => n.onViewportChange?.(e)
-  }), [Me, Be] = ee(!1), Ie = S(() => $().zoom < 0.45), O = () => ({
+  }), [Be, Ie] = re(!1), Le = S(() => $().zoom < 0.45), O = () => ({
     width: D?.clientWidth ?? 0,
     height: D?.clientHeight ?? 0
-  }), j = () => {
+  }), X = () => {
     const {
       width: e,
       height: t
     } = O();
     return e > 0 && t > 0;
   }, Z = () => ({
-    width: b().width + C * 2,
-    height: b().height + C * 2
+    width: b().width + V * 2,
+    height: b().height + V * 2
   }), me = (e) => {
     const t = b().nodes.get(e);
     return t && {
-      x: t.x + C,
-      y: t.y + C,
+      x: t.x + V,
+      y: t.y + V,
       width: t.width,
       height: t.height
     };
   }, _ = {
     fitView() {
-      if (!j()) return;
+      if (!X()) return;
       const e = Z();
       E(ot({
         x: 0,
@@ -165,128 +165,143 @@ function At(f) {
     zoomBy(e) {
       const {
         width: t,
-        height: o
+        height: r
       } = O();
-      E(tt($(), {
+      E(rt($(), {
         x: t / 2,
-        y: o / 2
+        y: r / 2
       }, e, n.minZoom, n.maxZoom));
     },
     centerNode(e) {
       const t = me(e);
-      t && E(et($(), {
+      t && E(tt($(), {
         x: t.x + t.width / 2,
         y: t.y + t.height / 2
       }, O()));
     }
-  }, ge = (e) => {
+  }, he = (e) => {
     const t = me(e);
-    t && j() && !rt($(), t, O(), 8) && _.centerNode(e);
+    t && X() && !nt($(), t, O(), 8) && _.centerNode(e);
   };
-  let P = !1;
-  const Y = () => {
-    !P || !j() || (P = !1, _.fitView());
+  let G = !1;
+  const J = () => {
+    !G || !X() || (G = !1, _.fitView());
   };
-  te(xe(b, () => {
-    V(() => n.fit) && (P = !0, Y());
+  oe(ke(b, () => {
+    L(() => n.fit) && (G = !0, J());
   }, {
     defer: !0
-  })), ke(() => {
-    const e = Je(D, {
+  })), Se(() => {
+    const e = Qe(D, {
       viewport: $,
       write: E,
       minZoom: () => n.minZoom,
       maxZoom: () => n.maxZoom,
       wheel: () => n.wheel,
-      onInteracting: Be
+      onInteracting: Ie
     });
     let t = 0;
-    const o = typeof ResizeObserver == "function" ? new ResizeObserver(() => {
-      cancelAnimationFrame(t), t = requestAnimationFrame(Y);
+    const r = typeof ResizeObserver == "function" ? new ResizeObserver(() => {
+      cancelAnimationFrame(t), t = requestAnimationFrame(J);
     }) : void 0;
-    o?.observe(D), oe(() => {
-      e(), o?.disconnect(), cancelAnimationFrame(t);
-    }), P = n.fit, Y(), n.apiRef?.(_);
+    r?.observe(D), ne(() => {
+      e(), r?.disconnect(), cancelAnimationFrame(t);
+    }), G = n.fit, J(), n.apiRef?.(_);
   });
-  const he = (e, t) => {
-    const o = I().get(e);
-    !o || o.disabled || (q(e), n.onNodeClick?.(o, t));
-  }, X = (e) => {
-    e !== void 0 && (ue(e), B.get(e)?.focus({
+  const fe = (e, t) => {
+    const r = I().get(e);
+    !r || r.disabled || (K(e), n.onNodeClick?.(r, t));
+  }, Q = (e) => {
+    e !== void 0 && (ge(e), B.get(e)?.focus({
       preventScroll: !0
-    }), ge(e));
+    }), he(e));
   };
-  te((e) => {
-    const t = ce();
-    return e && V(() => {
-      const o = new Set(t), c = L();
-      c !== null && !o.has(c) && e.includes(c) && q(null);
-      const a = H();
-      if (a === null || o.has(a)) return;
-      K(null);
-      const i = D?.ownerDocument, g = G();
-      i && (i.activeElement === null || i.activeElement === i.body) && g !== null && B.get(g)?.focus({
+  oe((e) => {
+    const t = H();
+    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;
+      Y(null);
+      const i = D?.ownerDocument, m = W();
+      i && (i.activeElement === null || i.activeElement === i.body) && m !== null && B.get(m)?.focus({
         preventScroll: !0
       });
     }), t;
   });
-  const J = /* @__PURE__ */ new WeakMap(), we = () => {
-    const e = V(G);
-    for (const [t, o] of B)
-      for (const c of o.querySelectorAll(gt)) {
-        J.has(c) || J.set(c, c.getAttribute("tabindex"));
-        const a = J.get(c) ?? null, i = t === e ? a : "-1";
-        c.getAttribute("tabindex") !== i && (i === null ? c.removeAttribute("tabindex") : c.setAttribute("tabindex", i));
+  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)) {
+        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));
       }
   };
-  ke(() => {
-    if (!n.renderNode || (te(xe(G, we)), typeof MutationObserver != "function")) return;
-    const e = new MutationObserver(we);
+  Se(() => {
+    if (!n.renderNode || (oe(ke(W, we)), typeof MutationObserver != "function")) return;
+    const e = new MutationObserver((t) => {
+      let r = !1;
+      for (const d of t) {
+        if (d.type !== "attributes") {
+          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);
+      }
+      r && we();
+    });
     e.observe(D, {
       childList: !0,
-      subtree: !0
-    }), oe(() => e.disconnect());
+      subtree: !0,
+      attributes: !0,
+      attributeFilter: ["tabindex"]
+    }), ne(() => e.disconnect());
   });
   const Ve = (e, t) => {
-    const o = n.direction === "TB", c = o ? "ArrowDown" : "ArrowRight", a = o ? "ArrowUp" : "ArrowLeft", i = o ? "ArrowLeft" : "ArrowUp", g = o ? "ArrowRight" : "ArrowDown", v = b().nodes, d = (s) => s.map((h) => v.get(h)).filter((h) => h !== void 0).sort((h, w) => U(h) - U(w))[0]?.id;
-    if (t === c) return d((y().outgoing.get(e) ?? []).map((s) => s.target));
-    if (t === a) return d((y().incoming.get(e) ?? []).map((s) => s.source));
-    const m = v.get(e);
-    if (!m) return;
-    const r = y().layers.get(m.layer) ?? [], u = r.findIndex((s) => s.id === e);
-    if (t === i) return r[u - 1]?.id;
-    if (t === g) return r[u + 1]?.id;
+    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 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;
+    if (t === m) return o[u + 1]?.id;
   }, Ce = (e) => {
-    const t = e.target, o = t.dataset?.dagId;
-    if (o === void 0 || !t.classList.contains("smwb-dag-view__node") || e.ctrlKey || e.metaKey || e.altKey) return;
-    const c = e.key;
-    if (c.startsWith("Arrow") && e.shiftKey) {
-      const i = $(), g = c === "ArrowLeft" ? 48 : c === "ArrowRight" ? -48 : 0, v = c === "ArrowUp" ? 48 : c === "ArrowDown" ? -48 : 0;
+    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;
       E({
-        x: i.x + g,
+        x: i.x + m,
         y: i.y + v,
         zoom: i.zoom
       }), e.preventDefault();
       return;
     }
-    if (c.startsWith("Arrow")) {
-      e.preventDefault(), X(Ve(o, c));
+    if (d.startsWith("Arrow")) {
+      e.preventDefault(), Q(Ve(r, d));
       return;
     }
-    switch (c) {
+    switch (d) {
       case "Home":
-        e.preventDefault(), X(y().ordered[0]?.id);
+        e.preventDefault(), Q(y().ordered[0]?.id);
         return;
       case "End":
-        e.preventDefault(), X(y().ordered[y().ordered.length - 1]?.id);
+        e.preventDefault(), Q(y().ordered[y().ordered.length - 1]?.id);
         return;
       case "Enter":
       case " ":
-        e.preventDefault(), he(o, e);
+        e.preventDefault(), fe(r, e);
         return;
       case "Escape":
-        if (L() === null) return;
-        e.preventDefault(), q(null);
+        if (C() === null) return;
+        e.preventDefault(), K(null);
         return;
       case "+":
       case "=":
@@ -300,79 +315,79 @@ function At(f) {
         e.preventDefault(), _.fitView();
         return;
     }
-  }, Le = (e) => [nt(), (() => {
-    var t = st();
+  }, Ee = (e) => [st(), (() => {
+    var t = it();
     return k(t, () => e.label ?? e.id), t;
-  })(), N(re, {
+  })(), N(se, {
     get when() {
       return e.status;
     },
     children: (t) => (() => {
-      var o = it();
-      return k(o, () => de(t())), o;
+      var r = at();
+      return k(r, () => le(t())), r;
     })()
-  })], fe = (e) => {
-    const t = I().get(e), o = [];
-    t?.status && o.push(`${x().status}: ${de(t.status)}.`);
-    const c = (g) => g.map((v) => ft(I().get(v), v)).join(", "), a = (y().incoming.get(e) ?? []).map((g) => g.source), i = (y().outgoing.get(e) ?? []).map((g) => g.target);
-    return a.length && o.push(`${x().dependsOn}: ${c(a)}.`), i.length && o.push(`${x().requiredBy}: ${c(i)}.`), o.join(" ");
-  }, Ee = (e, t) => {
-    const o = () => I().get(e), c = {
+  })], 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 r = () => I().get(e), d = {
       id: e
     };
-    for (const r of mt) Object.defineProperty(c, r, {
+    for (const o of mt) Object.defineProperty(d, o, {
       enumerable: !0,
-      get: () => o()?.[r]
+      get: () => r()?.[o]
     });
-    const a = {
+    const s = {
       get selected() {
-        return le(e);
+        return ue(e);
       },
       get related() {
         return F().nodes.get(e) ?? null;
       },
       get dimmed() {
-        const r = F();
-        return !!n.dimUnrelated && r.active && !le(e) && !r.nodes.has(e);
+        const o = F();
+        return !!n.dimUnrelated && o.active && !ue(e) && !o.nodes.has(e);
       },
       get focused() {
-        return H() === e;
+        return j() === e;
       }
-    }, i = () => `${R}-node-${t()}`, g = () => {
-      const r = b().nodes.get(e), u = r ? {
-        left: `${r.x + C}px`,
-        top: `${r.y + C}px`,
-        width: `${r.width}px`,
-        height: `${r.height}px`
+    }, i = () => `${R}-node-${t()}`, m = () => {
+      const o = b().nodes.get(e), u = o ? {
+        left: `${o.x + V}px`,
+        top: `${o.y + V}px`,
+        width: `${o.width}px`,
+        height: `${o.height}px`
       } : {
         display: "none"
-      }, s = o()?.accent;
-      return s && (u["--smwb-dag-view-node-accent"] = s), u;
-    }, v = (r) => {
-      if (r.target !== r.currentTarget) return;
-      ue(e), K(e);
+      }, a = r()?.accent;
+      return a && (u["--smwb-dag-view-node-accent"] = a), u;
+    }, v = (o) => {
+      if (o.target !== o.currentTarget) return;
+      ge(e), Y(e);
       let u = !0;
       try {
-        u = r.currentTarget.matches(":focus-visible");
+        u = o.currentTarget.matches(":focus-visible");
       } catch {
       }
-      u && ge(e);
-    }, d = (r) => {
-      r.target === r.currentTarget && H() === e && K(null);
-    }, m = V(() => (n.renderNode ?? Le)(c, a));
+      u && he(e);
+    }, c = (o) => {
+      o.target !== o.currentTarget || j() !== e || H().includes(e) && Y(null);
+    }, g = L(() => (n.renderNode ?? Ee)(d, s));
     return (() => {
-      var r = at(), u = r.firstChild;
-      return r.addEventListener("blur", d), r.addEventListener("focus", v), r.$$click = (s) => he(e, s), _e((s) => {
-        B.set(e, s), oe(() => B.get(e) === s && B.delete(e));
-      }, r), l(r, "data-dag-id", e), k(r, m, u), k(u, () => fe(e)), W((s) => {
-        var h = ne("smwb-dag-view__node", {
-          "smwb-dag-view__node--selected": a.selected,
-          "smwb-dag-view__node--upstream": a.related === "upstream",
-          "smwb-dag-view__node--downstream": a.related === "downstream",
-          "smwb-dag-view__node--dimmed": a.dimmed,
-          "smwb-dag-view__node--disabled": !!o()?.disabled
-        }), w = o()?.status, p = a.selected ? "true" : "false", A = o()?.disabled ? "true" : void 0, pe = fe(e) ? i() : void 0, be = G() === e ? 0 : -1, Ze = g(), ye = i();
-        return h !== s.e && Ue(r, s.e = h), w !== s.t && l(r, "data-status", s.t = w), p !== s.a && l(r, "aria-selected", s.a = p), A !== s.o && l(r, "aria-disabled", s.o = A), pe !== s.i && l(r, "aria-describedby", s.i = pe), be !== s.n && l(r, "tabindex", s.n = be), s.s = Fe(r, Ze, s.s), ye !== s.h && l(u, "id", s.h = ye), s;
+      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 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--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;
       }, {
         e: void 0,
         t: void 0,
@@ -382,91 +397,91 @@ function At(f) {
         n: void 0,
         s: void 0,
         h: void 0
-      }), r;
+      }), o;
     })();
-  }, Oe = (e) => {
-    const t = F(), o = t.edges.get(e.id);
-    return ne("smwb-dag-view__edge", {
-      "smwb-dag-view__edge--active": o !== void 0,
-      "smwb-dag-view__edge--upstream": o === "upstream",
-      "smwb-dag-view__edge--downstream": o === "downstream",
-      "smwb-dag-view__edge--dimmed": !!n.dimUnrelated && t.active && o === void 0,
+  }, Ze = (e) => {
+    const t = F(), r = t.edges.get(e.id);
+    return ie("smwb-dag-view__edge", {
+      "smwb-dag-view__edge--active": r !== void 0,
+      "smwb-dag-view__edge--upstream": r === "upstream",
+      "smwb-dag-view__edge--downstream": r === "downstream",
+      "smwb-dag-view__edge--dimmed": !!n.dimUnrelated && t.active && r === void 0,
       "smwb-dag-view__edge--reversed": e.reversed
     });
-  }, ve = () => je(n.style, {
-    height: n.height === void 0 ? void 0 : ht(n.height)
+  }, pe = () => Ye(n.style, {
+    height: n.height === void 0 ? void 0 : ft(n.height)
   });
   return (() => {
-    var e = lt(), t = e.firstChild, o = t.firstChild, c = o.firstChild, a = c.firstChild, i = a.nextSibling, g = c.nextSibling, v = Ke(n.ref, (d) => D = d);
-    return typeof v == "function" && _e(v, e), Ne(e, Re({
+    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({
       get "data-testid"() {
         return n["data-testid"] ?? "dag-view";
       }
-    }, T, {
+    }, q, {
       get class() {
-        return ne("smwb-dag-view", n.class);
+        return ie("smwb-dag-view", n.class);
       }
-    }, () => ve() === void 0 ? {} : {
-      style: ve()
+    }, () => pe() === void 0 ? {} : {
+      style: pe()
     }, {
       get "data-direction"() {
         return n.direction;
       },
       get "data-zoom"() {
-        return Ie() ? "far" : void 0;
+        return Le() ? "far" : void 0;
       },
       get "data-interacting"() {
-        return Me() ? "" : void 0;
+        return Be() ? "" : void 0;
       }
-    }), !1, !0), t.$$keydown = Ce, l(a, "id", se), l(i, "id", ie), k(g, N(Se, {
+    }), !1, !0), t.$$keydown = Ce, l(s, "id", ae), l(i, "id", de), k(m, N($e, {
       get each() {
         return b().edges;
       },
-      children: (d) => (() => {
-        var m = ut();
-        return W((r) => {
-          var u = Oe(d), s = d.source, h = d.target, w = Xe(d.points, n.direction), p = `url(#${F().edges.has(d.id) ? ie : se})`;
-          return u !== r.e && l(m, "class", r.e = u), s !== r.t && l(m, "data-source", r.t = s), h !== r.a && l(m, "data-target", r.a = h), w !== r.o && l(m, "d", r.o = w), p !== r.i && l(m, "marker-end", r.i = p), r;
+      children: (c) => (() => {
+        var g = gt();
+        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;
         }, {
           e: void 0,
           t: void 0,
           a: void 0,
           o: void 0,
           i: void 0
-        }), m;
+        }), g;
       })()
-    })), k(t, N(Se, {
+    })), k(t, N($e, {
       get each() {
-        return ce();
+        return H();
       },
-      children: (d, m) => Ee(d, m)
-    }), null), k(e, N(re, {
+      children: (c, g) => Oe(c, g)
+    }), null), k(e, N(se, {
       get when() {
         return n.summary;
       },
       get children() {
-        var d = dt();
-        return l(d, "id", ae), k(d, () => n.summary), d;
+        var c = ct();
+        return l(c, "id", ce), k(c, () => n.summary), c;
       }
-    }), null), k(e, N(re, {
+    }), null), k(e, N(se, {
       get when() {
         return n.controls;
       },
       get children() {
-        var d = ct(), m = d.firstChild, r = m.nextSibling, u = r.nextSibling;
-        return m.$$click = () => _.zoomBy(1.25), r.$$click = () => _.zoomBy(0.8), u.$$click = () => _.fitView(), W((s) => {
-          var h = x().controls, w = x().zoomIn, p = x().zoomOut, A = x().fitView;
-          return h !== s.e && l(d, "aria-label", s.e = h), w !== s.t && l(m, "title", s.t = w), p !== s.a && l(r, "title", s.a = p), A !== s.o && l(u, "title", s.o = A), s;
+        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 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;
         }, {
           e: void 0,
           t: void 0,
           a: void 0,
           o: void 0
-        }), d;
+        }), c;
       }
-    }), null), W((d) => {
-      var m = n.label, r = x().roleDescription, u = n.summary ? ae : void 0, s = `${Z().width}px`, h = `${Z().height}px`, w = Qe($()), p = Z().width, A = Z().height;
-      return m !== d.e && l(t, "aria-label", d.e = m), r !== d.t && l(t, "aria-roledescription", d.t = r), u !== d.a && l(t, "aria-describedby", d.a = u), s !== d.o && Q(t, "width", d.o = s), h !== d.i && Q(t, "height", d.i = h), w !== d.n && Q(t, "transform", d.n = w), p !== d.s && l(o, "width", d.s = p), A !== d.h && l(o, "height", d.h = A), d;
+    }), 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;
     }, {
       e: void 0,
       t: void 0,
@@ -481,6 +496,6 @@ function At(f) {
 }
 Ge(["click", "keydown"]);
 export {
-  At as DagView
+  zt as DagView
 };
 //# sourceMappingURL=dagView.js.map