@smwb/ui-solid 1.0.0 → 2.1.0

package/dist/headless/components/dataDisplay/badge/badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.js","sources":["../../../../../src/components/dataDisplay/badge/badge.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, children, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface BadgeProps extends JSX.HTMLAttributes<HTMLSpanElement> {\n  badgeContent?: JSX.Element | number | string;\n  color?: \"primary\" | \"success\" | \"danger\";\n  variant?: \"inside\" | \"outside\";\n  vertical?: \"top\" | \"bottom\";\n  horizontal?: \"right\" | \"left\";\n  /** Cap numeric content, rendering `{max}+` when exceeded. */\n  max?: number;\n  /** Render the badge even when content is 0. */\n  showZero?: boolean;\n  /** Accessible label for the badge value. */\n  badgeAriaLabel?: string;\n  ref?: Ref<HTMLSpanElement>;\n}\n\nexport function Badge(props: ParentProps<BadgeProps>): JSX.Element {\n  const merged = mergeProps(\n    {\n      color: \"primary\" as const,\n      variant: \"outside\" as const,\n      vertical: \"top\" as const,\n      horizontal: \"right\" as const,\n      showZero: false,\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"color\",\n    \"badgeContent\",\n    \"variant\",\n    \"vertical\",\n    \"horizontal\",\n    \"max\",\n    \"showZero\",\n    \"badgeAriaLabel\",\n    \"children\",\n    \"ref\",\n  ]);\n\n  // Read the content once: markup passed as a prop is created anew on every\n  // read, and during hydration a copy the server never rendered has no DOM node.\n  const content = children(() => local.badgeContent);\n  const isZero = (): boolean => content() === 0 || content() === \"0\";\n  const hidden = (): boolean => content() === undefined || content() === null || (isZero() && !local.showZero);\n\n  const display = (): JSX.Element => {\n    const value = content();\n    return typeof value === \"number\" && local.max !== undefined && value > local.max ? `${local.max}+` : value;\n  };\n\n  return (\n    <span class=\"smwb-badge__wrapper\" data-testid=\"badge\">\n      {local.children}\n      <span\n        {...rest}\n        ref={mergeRefs(local.ref)}\n        class={cn(\n          \"smwb-badge\",\n          `smwb-badge_${local.color}`,\n          `smwb-badge_${local.variant}`,\n          `smwb-badge_${local.variant}_${local.vertical}`,\n          `smwb-badge_${local.variant}_${local.vertical}_${local.horizontal}`,\n          local.class,\n          { \"smwb-badge_no-content\": hidden() }\n        )}\n        aria-label={local.badgeAriaLabel}\n      >\n        <Show when={!hidden()}>{display()}</Show>\n      </span>\n    </span>\n  );\n}\n\nexport default Badge;\n"],"names":["Badge","props","merged","mergeProps","color","variant","vertical","horizontal","showZero","local","rest","splitProps","content","children","badgeContent","isZero","hidden","undefined","display","value","max","_el$","_tmpl$","_el$2","firstChild","_$insert","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","cn","class","badgeAriaLabel","_$createComponent","Show","when"],"mappings":";;;;;AAmBO,SAASA,EAAMC,GAA6C;AACjE,QAAMC,IAASC,EACb;AAAA,IACEC,OAAO;AAAA,IACPC,SAAS;AAAA,IACTC,UAAU;AAAA,IACVC,YAAY;AAAA,IACZC,UAAU;AAAA,EAAA,GAEZP,CACF,GACM,CAACQ,GAAOC,CAAI,IAAIC,EAAWT,GAAQ,CACvC,SACA,SACA,gBACA,WACA,YACA,cACA,OACA,YACA,kBACA,YACA,KAAK,CACN,GAIKU,IAAUC,EAAS,MAAMJ,EAAMK,YAAY,GAC3CC,IAASA,MAAeH,EAAAA,MAAc,KAAKA,QAAc,KACzDI,IAASA,MAAeJ,EAAAA,MAAcK,UAAaL,QAAc,QAASG,EAAAA,KAAY,CAACN,EAAMD,UAE7FU,IAAUA,MAAmB;AACjC,UAAMC,IAAQP,EAAAA;AACd,WAAO,OAAOO,KAAU,YAAYV,EAAMW,QAAQH,UAAaE,IAAQV,EAAMW,MAAM,GAAGX,EAAMW,GAAG,MAAMD;AAAAA,EACvG;AAEA,UAAA,MAAA;AAAA,QAAAE,IAAAC,EAAAA,GAAAC,IAAAF,EAAAG;AAAAC,IAAAA,EAAAJ,GAAA,MAEKZ,EAAMI,UAAQU,CAAA;AAAA,QAAAG,IAGRC,EAAUlB,EAAMmB,GAAG;AAAC,kBAAAF,KAAA,cAAAG,EAAAH,GAAAH,CAAA,GAAAO,EAAAP,GAAAQ,EADrBrB,GAAI;AAAA,MAAA,IAAA,QAAA;AAAA,eAEDsB,EACL,cACA,cAAcvB,EAAML,KAAK,IACzB,cAAcK,EAAMJ,OAAO,IAC3B,cAAcI,EAAMJ,OAAO,IAAII,EAAMH,QAAQ,IAC7C,cAAcG,EAAMJ,OAAO,IAAII,EAAMH,QAAQ,IAAIG,EAAMF,UAAU,IACjEE,EAAMwB,OACN;AAAA,UAAE,yBAAyBjB,EAAAA;AAAAA,QAAO,CACpC;AAAA,MAAC;AAAA,MAAA,IAAA,eAAA;AAAA,eACWP,EAAMyB;AAAAA,MAAc;AAAA,IAAA,CAAA,GAAA,IAAA,EAAA,GAAAT,EAAAF,GAAAY,EAE/BC,GAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAE,CAACrB,EAAAA;AAAAA,MAAQ;AAAA,MAAA,IAAAH,WAAA;AAAA,eAAGK,EAAAA;AAAAA,MAAS;AAAA,IAAA,CAAA,CAAA,GAAAG;AAAAA,EAAA,GAAA;AAIzC;"}
+{"version":3,"file":"badge.js","sources":["../../../../../src/components/dataDisplay/badge/badge.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, children, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface BadgeProps extends JSX.HTMLAttributes<HTMLSpanElement> {\n  badgeContent?: JSX.Element | number | string;\n  /** Semantic color; `warning` is amber, and carries dark ink to stay readable at this size. */\n  color?: \"primary\" | \"success\" | \"danger\" | \"warning\";\n  variant?: \"inside\" | \"outside\";\n  vertical?: \"top\" | \"bottom\";\n  horizontal?: \"right\" | \"left\";\n  /** Cap numeric content, rendering `{max}+` when exceeded. */\n  max?: number;\n  /** Render the badge even when content is 0. */\n  showZero?: boolean;\n  /** Accessible label for the badge value. */\n  badgeAriaLabel?: string;\n  ref?: Ref<HTMLSpanElement>;\n}\n\nexport function Badge(props: ParentProps<BadgeProps>): JSX.Element {\n  const merged = mergeProps(\n    {\n      color: \"primary\" as const,\n      variant: \"outside\" as const,\n      vertical: \"top\" as const,\n      horizontal: \"right\" as const,\n      showZero: false,\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"color\",\n    \"badgeContent\",\n    \"variant\",\n    \"vertical\",\n    \"horizontal\",\n    \"max\",\n    \"showZero\",\n    \"badgeAriaLabel\",\n    \"children\",\n    \"ref\",\n  ]);\n\n  // Read the content once: markup passed as a prop is created anew on every\n  // read, and during hydration a copy the server never rendered has no DOM node.\n  const content = children(() => local.badgeContent);\n  const isZero = (): boolean => content() === 0 || content() === \"0\";\n  const hidden = (): boolean => content() === undefined || content() === null || (isZero() && !local.showZero);\n\n  const display = (): JSX.Element => {\n    const value = content();\n    return typeof value === \"number\" && local.max !== undefined && value > local.max ? `${local.max}+` : value;\n  };\n\n  return (\n    <span class=\"smwb-badge__wrapper\" data-testid=\"badge\">\n      {local.children}\n      <span\n        {...rest}\n        ref={mergeRefs(local.ref)}\n        class={cn(\n          \"smwb-badge\",\n          `smwb-badge_${local.color}`,\n          `smwb-badge_${local.variant}`,\n          `smwb-badge_${local.variant}_${local.vertical}`,\n          `smwb-badge_${local.variant}_${local.vertical}_${local.horizontal}`,\n          local.class,\n          { \"smwb-badge_no-content\": hidden() }\n        )}\n        aria-label={local.badgeAriaLabel}\n      >\n        <Show when={!hidden()}>{display()}</Show>\n      </span>\n    </span>\n  );\n}\n\nexport default Badge;\n"],"names":["Badge","props","merged","mergeProps","color","variant","vertical","horizontal","showZero","local","rest","splitProps","content","children","badgeContent","isZero","hidden","undefined","display","value","max","_el$","_tmpl$","_el$2","firstChild","_$insert","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","cn","class","badgeAriaLabel","_$createComponent","Show","when"],"mappings":";;;;;AAoBO,SAASA,EAAMC,GAA6C;AACjE,QAAMC,IAASC,EACb;AAAA,IACEC,OAAO;AAAA,IACPC,SAAS;AAAA,IACTC,UAAU;AAAA,IACVC,YAAY;AAAA,IACZC,UAAU;AAAA,EAAA,GAEZP,CACF,GACM,CAACQ,GAAOC,CAAI,IAAIC,EAAWT,GAAQ,CACvC,SACA,SACA,gBACA,WACA,YACA,cACA,OACA,YACA,kBACA,YACA,KAAK,CACN,GAIKU,IAAUC,EAAS,MAAMJ,EAAMK,YAAY,GAC3CC,IAASA,MAAeH,EAAAA,MAAc,KAAKA,QAAc,KACzDI,IAASA,MAAeJ,EAAAA,MAAcK,UAAaL,QAAc,QAASG,EAAAA,KAAY,CAACN,EAAMD,UAE7FU,IAAUA,MAAmB;AACjC,UAAMC,IAAQP,EAAAA;AACd,WAAO,OAAOO,KAAU,YAAYV,EAAMW,QAAQH,UAAaE,IAAQV,EAAMW,MAAM,GAAGX,EAAMW,GAAG,MAAMD;AAAAA,EACvG;AAEA,UAAA,MAAA;AAAA,QAAAE,IAAAC,EAAAA,GAAAC,IAAAF,EAAAG;AAAAC,IAAAA,EAAAJ,GAAA,MAEKZ,EAAMI,UAAQU,CAAA;AAAA,QAAAG,IAGRC,EAAUlB,EAAMmB,GAAG;AAAC,kBAAAF,KAAA,cAAAG,EAAAH,GAAAH,CAAA,GAAAO,EAAAP,GAAAQ,EADrBrB,GAAI;AAAA,MAAA,IAAA,QAAA;AAAA,eAEDsB,EACL,cACA,cAAcvB,EAAML,KAAK,IACzB,cAAcK,EAAMJ,OAAO,IAC3B,cAAcI,EAAMJ,OAAO,IAAII,EAAMH,QAAQ,IAC7C,cAAcG,EAAMJ,OAAO,IAAII,EAAMH,QAAQ,IAAIG,EAAMF,UAAU,IACjEE,EAAMwB,OACN;AAAA,UAAE,yBAAyBjB,EAAAA;AAAAA,QAAO,CACpC;AAAA,MAAC;AAAA,MAAA,IAAA,eAAA;AAAA,eACWP,EAAMyB;AAAAA,MAAc;AAAA,IAAA,CAAA,GAAA,IAAA,EAAA,GAAAT,EAAAF,GAAAY,EAE/BC,GAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAE,CAACrB,EAAAA;AAAAA,MAAQ;AAAA,MAAA,IAAAH,WAAA;AAAA,eAAGK,EAAAA;AAAAA,MAAS;AAAA,IAAA,CAAA,CAAA,GAAAG;AAAAA,EAAA,GAAA;AAIzC;"}

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

@@ -1,13 +1,13 @@
-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 { 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 { 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",
@@ -25,12 +25,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]), bt = (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 zt(w) {
-  const M = Pe({
+}, pt = je ? (w) => console.warn(`[smwb] DagView: ${w}`) : void 0;
+function Dt(w) {
+  const M = Te({
     direction: "LR",
     nodeWidth: 180,
     nodeHeight: 56,
@@ -41,13 +41,13 @@ function zt(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(() => {
@@ -55,16 +55,16 @@ function zt(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,
@@ -74,54 +74,54 @@ function zt(w) {
       warn: pt
     };
     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(() => {
-    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);
+  }), p = S(() => (n.layout ?? Je)(Me().input)), U = (e) => n.direction === "TB" ? e.x : e.y, y = S(() => {
+    const e = p(), t = /* @__PURE__ */ new Map(), r = /* @__PURE__ */ new Map();
+    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 {
+    if (e === null || !p().nodes.has(e)) return {
       active: !1,
       edges: t,
       nodes: r
     };
     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 = p().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,
@@ -129,7 +129,7 @@ function zt(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 = () => {
@@ -139,10 +139,10 @@ function zt(w) {
     } = O();
     return e > 0 && t > 0;
   }, Z = () => ({
-    width: b().width + V * 2,
-    height: b().height + V * 2
+    width: p().width + V * 2,
+    height: p().height + V * 2
   }), me = (e) => {
-    const t = b().nodes.get(e);
+    const t = p().nodes.get(e);
     return t && {
       x: t.x + V,
       y: t.y + V,
@@ -153,7 +153,7 @@ function zt(w) {
     fitView() {
       if (!X()) return;
       const e = Z();
-      E(ot({
+      E(nt({
         x: 0,
         y: 0,
         ...e
@@ -167,38 +167,38 @@ function zt(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(p, () => {
     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(() => {
@@ -221,11 +221,11 @@ function zt(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;
@@ -233,14 +233,14 @@ function zt(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) {
@@ -248,10 +248,10 @@ function zt(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();
     });
@@ -262,30 +262,30 @@ function zt(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 = p().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) {
@@ -315,31 +315,31 @@ function zt(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) => bt(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);
       },
@@ -353,16 +353,16 @@ function zt(w) {
       get focused() {
         return j() === e;
       }
-    }, i = () => `${R}-node-${t()}`, m = () => {
-      const o = b().nodes.get(e), u = o ? {
+    }, a = () => `${R}-node-${t()}`, m = () => {
+      const o = p().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"
-      }, 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);
@@ -374,20 +374,20 @@ function zt(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, b = r()?.variant, A = i.selected ? "true" : "false", pe = 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), b !== s.a && l(o, "data-variant", s.a = b), A !== s.o && l(o, "aria-selected", s.o = A), pe !== s.i && l(o, "aria-disabled", s.i = pe), 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,
@@ -396,10 +396,11 @@ function zt(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,
@@ -408,12 +409,12 @@ function zt(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)
+  }, be = () => 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";
       }
@@ -421,27 +422,27 @@ function zt(w) {
       get class() {
         return ie("smwb-dag-view", n.class);
       }
-    }, () => pe() === void 0 ? {} : {
-      style: pe()
+    }, () => be() === void 0 ? {} : {
+      style: be()
     }, {
       get "data-direction"() {
         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;
+        return p().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), b = `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), b !== o.i && l(g, "marker-end", o.i = b), o;
         }, {
           e: void 0,
           t: void 0,
@@ -450,17 +451,17 @@ function zt(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, {
@@ -468,10 +469,10 @@ function zt(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 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;
+        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, b = x().zoomOut, A = x().fitView;
+          return h !== s.e && l(c, "aria-label", s.e = h), f !== s.t && l(g, "title", s.t = f), b !== s.a && l(o, "title", s.a = b), A !== s.o && l(u, "title", s.o = A), s;
         }, {
           e: void 0,
           t: void 0,
@@ -480,8 +481,8 @@ function zt(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($()), b = 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), b !== c.s && l(r, "width", c.s = b), A !== c.h && l(r, "height", c.h = A), c;
     }, {
       e: void 0,
       t: void 0,
@@ -494,8 +495,8 @@ function zt(w) {
     }), e;
   })();
 }
-Ge(["click", "keydown"]);
+Pe(["click", "keydown"]);
 export {
-  zt as DagView
+  Dt as DagView
 };
 //# sourceMappingURL=dagView.js.map