@ghchinoy/litflow 0.2.1 → 0.2.2

package/dist/litflow.js

@@ -1,13 +1,13 @@
-import { LitElement as z, html as $, svg as Z, css as S } from "lit";
-import { unsafeStatic as J, html as E } from "lit/static-html.js";
-import { property as a, customElement as D, query as V, state as L } from "lit/decorators.js";
-import { signal as A, SignalWatcher as B } from "@lit-labs/signals";
-import { infiniteExtent as Q, Position as I, getBezierPath as j, adoptUserNodes as tt, updateAbsolutePositions as H, XYPanZoom as et, PanOnScrollMode as T, XYDrag as ot, getHandlePosition as X, getSmoothStepPath as Y, getStraightPath as st, XYHandle as rt, ConnectionMode as nt, XYMinimap as it, getBoundsOfRects as at, getInternalNodesBounds as dt } from "@xyflow/system";
-import { m3Tokens as W } from "./theme.js";
-function lt() {
+import { LitElement as D, html as O, svg as S, css as B } from "lit";
+import { unsafeStatic as J, html as j } from "lit/static-html.js";
+import { property as a, customElement as C, query as q, state as N } from "lit/decorators.js";
+import { signal as M, SignalWatcher as E } from "@lit-labs/signals";
+import { infiniteExtent as Q, Position as L, getBezierPath as Y, adoptUserNodes as tt, updateAbsolutePositions as X, XYPanZoom as et, PanOnScrollMode as T, XYDrag as ot, getHandlePosition as V, getSmoothStepPath as W, getStraightPath as st, XYHandle as rt, ConnectionMode as nt, XYMinimap as it, getBoundsOfRects as at, getInternalNodesBounds as lt } from "@xyflow/system";
+import { m3Tokens as F } from "./theme.js";
+function dt() {
   return {
-    nodes: A([]),
-    edges: A([]),
+    nodes: M([]),
+    edges: M([]),
     nodeLookup: /* @__PURE__ */ new Map(),
     parentLookup: /* @__PURE__ */ new Map(),
     nodeExtent: Q,
@@ -15,22 +15,22 @@ function lt() {
     snapToGrid: !1,
     nodeOrigin: [0, 0],
     multiSelectionActive: !1,
-    transform: A([0, 0, 1]),
+    transform: M([0, 0, 1]),
     autoPanOnNodeDrag: !0,
     nodesDraggable: !0,
     selectNodesOnDrag: !0,
     nodeDragThreshold: 0,
     panZoom: null,
     domNode: null,
-    connectionInProgress: A(null)
+    connectionInProgress: M(null)
   };
 }
-var pt = Object.defineProperty, ht = Object.getOwnPropertyDescriptor, O = (t, o, e, r) => {
+var pt = Object.defineProperty, ht = Object.getOwnPropertyDescriptor, k = (t, o, e, r) => {
   for (var s = r > 1 ? void 0 : r ? ht(o, e) : o, n = t.length - 1, i; n >= 0; n--)
     (i = t[n]) && (s = (r ? i(o, e, s) : i(s)) || s);
   return r && s && pt(o, e, s), s;
 };
-let _ = class extends B(z) {
+let _ = class extends E(D) {
   constructor() {
     super(...arguments), this.label = "", this.type = "default", this.data = {}, this.selected = !1, this.nodeId = "", this.positionX = 0, this.positionY = 0;
   }
@@ -38,49 +38,49 @@ let _ = class extends B(z) {
     return this;
   }
   render() {
-    return $`
+    return O`
       <div class="label" style="font-size: var(--md-sys-typescale-body-medium-size); color: var(--md-sys-color-on-surface); pointer-events: none; font-family: var(--md-sys-typescale-body-medium-font);">${this.label}</div>
       <slot></slot>
-      ${this.type === "input" || this.type === "default" ? $`<lit-handle type="source" data-handlepos="bottom" data-nodeid="${this.nodeId}"></lit-handle>` : ""}
-      ${this.type === "output" || this.type === "default" ? $`<lit-handle type="target" data-handlepos="top" data-nodeid="${this.nodeId}"></lit-handle>` : ""}
+      ${this.type === "input" || this.type === "default" ? O`<lit-handle type="source" data-handlepos="bottom" data-nodeid="${this.nodeId}"></lit-handle>` : ""}
+      ${this.type === "output" || this.type === "default" ? O`<lit-handle type="target" data-handlepos="top" data-nodeid="${this.nodeId}"></lit-handle>` : ""}
     `;
   }
 };
-O([
+k([
   a({ type: String })
 ], _.prototype, "label", 2);
-O([
+k([
   a({ type: String, reflect: !0 })
 ], _.prototype, "type", 2);
-O([
+k([
   a({ type: Object })
 ], _.prototype, "data", 2);
-O([
+k([
   a({ type: Boolean, reflect: !0 })
 ], _.prototype, "selected", 2);
-O([
+k([
   a({ type: String, attribute: "data-id", reflect: !0 })
 ], _.prototype, "nodeId", 2);
-O([
+k([
   a({ type: Number, attribute: "position-x" })
 ], _.prototype, "positionX", 2);
-O([
+k([
   a({ type: Number, attribute: "position-y" })
 ], _.prototype, "positionY", 2);
-_ = O([
-  D("lit-node")
+_ = k([
+  C("lit-node")
 ], _);
-var ct = Object.defineProperty, ut = Object.getOwnPropertyDescriptor, k = (t, o, e, r) => {
+var ct = Object.defineProperty, ut = Object.getOwnPropertyDescriptor, P = (t, o, e, r) => {
   for (var s = r > 1 ? void 0 : r ? ut(o, e) : o, n = t.length - 1, i; n >= 0; n--)
     (i = t[n]) && (s = (r ? i(o, e, s) : i(s)) || s);
   return r && s && ct(o, e, s), s;
 };
-let b = class extends B(z) {
+let b = class extends E(D) {
   constructor() {
-    super(...arguments), this.sourceX = 0, this.sourceY = 0, this.targetX = 0, this.targetY = 0, this.sourcePosition = I.Right, this.targetPosition = I.Left, this.selected = !1;
+    super(...arguments), this.sourceX = 0, this.sourceY = 0, this.targetX = 0, this.targetY = 0, this.sourcePosition = L.Right, this.targetPosition = L.Left, this.selected = !1;
   }
   render() {
-    const [t] = j({
+    const [t] = Y({
       sourceX: this.sourceX,
       sourceY: this.sourceY,
       sourcePosition: this.sourcePosition,
@@ -88,12 +88,12 @@ let b = class extends B(z) {
       targetY: this.targetY,
       targetPosition: this.targetPosition
     });
-    return Z`
+    return S`
       <path d="${t}" />
     `;
   }
 };
-b.styles = S`
+b.styles = B`
     :host {
       display: contents;
     }
@@ -108,29 +108,29 @@ b.styles = S`
       stroke: #555;
     }
   `;
-k([
+P([
   a({ type: Number })
 ], b.prototype, "sourceX", 2);
-k([
+P([
   a({ type: Number })
 ], b.prototype, "sourceY", 2);
-k([
+P([
   a({ type: Number })
 ], b.prototype, "targetX", 2);
-k([
+P([
   a({ type: Number })
 ], b.prototype, "targetY", 2);
-k([
+P([
   a({ type: String })
 ], b.prototype, "sourcePosition", 2);
-k([
+P([
   a({ type: String })
 ], b.prototype, "targetPosition", 2);
-k([
+P([
   a({ type: Boolean, reflect: !0 })
 ], b.prototype, "selected", 2);
-b = k([
-  D("lit-edge")
+b = P([
+  C("lit-edge")
 ], b);
 var mt = Object.defineProperty, ft = Object.getOwnPropertyDescriptor, m = (t, o, e, r) => {
   for (var s = r > 1 ? void 0 : r ? ft(o, e) : o, n = t.length - 1, i; n >= 0; n--)
@@ -141,9 +141,9 @@ const w = {
   fromAttribute: (t) => t !== "false" && t !== null,
   toAttribute: (t) => t ? "" : null
 };
-let c = class extends B(z) {
+let u = class extends E(D) {
   constructor() {
-    super(...arguments), this._drags = /* @__PURE__ */ new Map(), this._state = lt(), this.nodeTypes = {
+    super(...arguments), this._drags = /* @__PURE__ */ new Map(), this._state = dt(), this.nodeTypes = {
       default: "lit-node",
       input: "lit-node",
       output: "lit-node"
@@ -153,7 +153,7 @@ let c = class extends B(z) {
     this._state.nodes.set(t), tt(t, this._state.nodeLookup, this._state.parentLookup, {
       nodeOrigin: this._state.nodeOrigin,
       nodeExtent: this._state.nodeExtent
-    }), H(this._state.nodeLookup, this._state.parentLookup, {
+    }), X(this._state.nodeLookup, this._state.parentLookup, {
       nodeOrigin: this._state.nodeOrigin,
       nodeExtent: this._state.nodeExtent
     });
@@ -215,24 +215,24 @@ let c = class extends B(z) {
       i && (i.measured = e.measured);
       const p = o.querySelectorAll("lit-handle");
       if (p && p.length > 0) {
-        const h = [], d = [];
-        p.forEach((u) => {
-          const l = u.getBoundingClientRect(), f = o.getBoundingClientRect(), y = {
-            id: u.handleId || null,
-            type: u.type,
-            position: u.position,
-            x: (l.left - f.left) / n,
-            y: (l.top - f.top) / n,
-            width: l.width / n,
-            height: l.height / n
+        const h = [], l = [];
+        p.forEach((c) => {
+          const d = c.getBoundingClientRect(), f = o.getBoundingClientRect(), g = {
+            id: c.handleId || null,
+            type: c.type,
+            position: c.position,
+            x: (d.left - f.left) / n,
+            y: (d.top - f.top) / n,
+            width: d.width / n,
+            height: d.height / n
           };
-          u.type === "source" ? h.push(y) : d.push(y);
+          c.type === "source" ? h.push(g) : l.push(g);
         }), e.internals.handleBounds = {
           source: h,
-          target: d
+          target: l
         }, console.log(`Node ${t} handleBounds:`, e.internals.handleBounds);
       }
-      H(this._state.nodeLookup, this._state.parentLookup, {
+      X(this._state.nodeLookup, this._state.parentLookup, {
         nodeOrigin: this._state.nodeOrigin,
         nodeExtent: this._state.nodeExtent
       }), this._state.nodes.set([...this.nodes]);
@@ -343,10 +343,10 @@ let c = class extends B(z) {
                 const h = this._state.nodeLookup.get(p);
                 if (h) {
                   h.position = i.position, h.internals.positionAbsolute = i.internals.positionAbsolute;
-                  const d = this.nodes.find((u) => u.id === p);
-                  d && (d.position = i.position);
+                  const l = this.nodes.find((c) => c.id === p);
+                  l && (l.position = i.position);
                 }
-              }), H(this._state.nodeLookup, this._state.parentLookup, {
+              }), X(this._state.nodeLookup, this._state.parentLookup, {
                 nodeOrigin: this._state.nodeOrigin,
                 nodeExtent: this._state.nodeExtent
               }), this._state.nodes.set([...this.nodes]);
@@ -366,33 +366,33 @@ let c = class extends B(z) {
   _renderEdge(t) {
     const o = this._state.nodeLookup.get(t.source), e = this._state.nodeLookup.get(t.target);
     if (!o || !e) return null;
-    const r = this.nodes.find((g) => g.id === t.source), s = this.nodes.find((g) => g.id === t.target);
+    const r = this.nodes.find((y) => y.id === t.source), s = this.nodes.find((y) => y.id === t.target);
     if (r?.hidden || s?.hidden) return null;
     const n = (o.internals.handleBounds?.source || []).find(
-      (g) => g.id === (t.sourceHandle || null)
+      (y) => y.id === (t.sourceHandle || null)
     ) || o.internals.handleBounds?.source?.[0] || {
       id: null,
       type: "source",
       nodeId: t.source,
-      position: I.Bottom,
+      position: L.Bottom,
       x: (o.measured.width || 0) / 2,
       y: o.measured.height || 0,
       width: 1,
       height: 1
     }, i = (e.internals.handleBounds?.target || []).find(
-      (g) => g.id === (t.targetHandle || null)
+      (y) => y.id === (t.targetHandle || null)
     ) || e.internals.handleBounds?.target?.[0] || {
       id: null,
       type: "target",
       nodeId: t.target,
-      position: I.Top,
+      position: L.Top,
       x: (e.measured.width || 0) / 2,
       y: 0,
       width: 1,
       height: 1
-    }, p = X(o, n, n.position, !0), h = X(e, i, i.position, !0);
-    let d = "";
-    const u = {
+    }, p = V(o, n, n.position, !0), h = V(e, i, i.position, !0);
+    let l = "", c = 0, d = 0;
+    const f = {
       sourceX: p.x,
       sourceY: p.y,
       sourcePosition: n.position,
@@ -402,48 +402,63 @@ let c = class extends B(z) {
     };
     switch (t.type) {
       case "straight":
-        [d] = st(u);
+        [l, c, d] = st(f);
         break;
       case "smoothstep":
-        [d] = Y(u);
+        [l, c, d] = W(f);
         break;
       case "step":
-        [d] = Y({ ...u, borderRadius: 0 });
+        [l, c, d] = W({ ...f, borderRadius: 0 });
         break;
       default:
-        [d] = j(u);
+        [l, c, d] = Y(f);
         break;
     }
-    const l = (g) => {
-      if (!g) return null;
-      const x = typeof g == "string" ? g : g.type;
-      return x ? `lit-flow__${x}${t.selected ? "-selected" : ""}` : null;
-    }, f = l(t.markerEnd), y = l(t.markerStart);
-    return Z`
-      <path
-        d="${d}"
-        fill="none"
-        stroke="${t.selected ? "var(--md-sys-color-primary)" : "var(--md-sys-color-outline-variant)"}"
-        stroke-width="2"
-        marker-end="${f ? `url(#${f})` : ""}"
-        marker-start="${y ? `url(#${y})` : ""}"
-        style="pointer-events: none;"
-      />
+    const g = (y) => {
+      if (!y) return null;
+      const Z = typeof y == "string" ? y : y.type;
+      return Z ? `lit-flow__${Z}${t.selected ? "-selected" : ""}` : null;
+    }, x = g(t.markerEnd), $ = g(t.markerStart);
+    return S`
+      <g class="xyflow__edge">
+        <path
+          d="${l}"
+          fill="none"
+          stroke="${t.selected ? "var(--md-sys-color-primary)" : "var(--md-sys-color-outline-variant)"}"
+          stroke-width="2"
+          marker-end="${x ? `url(#${x})` : ""}"
+          marker-start="${$ ? `url(#${$})` : ""}"
+          style="pointer-events: none;"
+        />
+        ${t.label ? S`
+            <foreignObject
+              width="100"
+              height="30"
+              x="${c - 50}"
+              y="${d - 15}"
+              requiredExtensions="http://www.w3.org/1999/xhtml"
+            >
+              <div style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;">
+                <div class="xyflow__edge-label">${t.label}</div>
+              </div>
+            </foreignObject>
+          ` : ""}
+      </g>
     `;
   }
   _onHandlePointerDown(t) {
     const { event: o, handleId: e, nodeId: r, type: s, handleDomNode: n } = t.detail, i = s === "target";
     if (this._state.connectionInProgress.get() || !this.nodesConnectable)
       return;
-    const p = n.getBoundingClientRect(), h = n.parentElement?.getBoundingClientRect(), d = this._state.transform.get()[2], u = {
+    const p = n.getBoundingClientRect(), h = n.parentElement?.getBoundingClientRect(), l = this._state.transform.get()[2], c = {
       id: e,
       nodeId: r,
       type: s,
       position: n.position,
-      x: (p.left - (h?.left ?? 0)) / d,
-      y: (p.top - (h?.top ?? 0)) / d,
-      width: p.width / d,
-      height: p.height / d
+      x: (p.left - (h?.left ?? 0)) / l,
+      y: (p.top - (h?.top ?? 0)) / l,
+      width: p.width / l,
+      height: p.height / l
     };
     rt.onPointerDown(o, {
       handleId: e,
@@ -457,28 +472,28 @@ let c = class extends B(z) {
       autoPanOnConnect: !0,
       flowId: "lit-flow",
       dragThreshold: 0,
-      panBy: async (l) => {
+      panBy: async (d) => {
         const f = this._panZoom?.getViewport();
         return f ? (await this._panZoom?.setViewport({
-          x: f.x + l.x,
-          y: f.y + l.y,
+          x: f.x + d.x,
+          y: f.y + d.y,
           zoom: f.zoom
         }), !0) : !1;
       },
       getTransform: () => this._state.transform.get(),
-      getFromHandle: () => u,
-      updateConnection: (l) => {
-        l.inProgress ? this._state.connectionInProgress.set(l) : this._state.connectionInProgress.set(null);
+      getFromHandle: () => c,
+      updateConnection: (d) => {
+        d.inProgress ? this._state.connectionInProgress.set(d) : this._state.connectionInProgress.set(null);
       },
       cancelConnection: () => {
         this._state.connectionInProgress.set(null);
       },
-      onConnect: (l) => {
+      onConnect: (d) => {
         this.dispatchEvent(new CustomEvent("connect", {
-          detail: l
+          detail: d
         }));
-        const f = `e-${l.source}${l.sourceHandle || ""}-${l.target}${l.targetHandle || ""}`;
-        this.edges = [...this.edges, { ...l, id: f }];
+        const f = `e-${d.source}${d.sourceHandle || ""}-${d.target}${d.targetHandle || ""}`;
+        this.edges = [...this.edges, { ...d, id: f }];
       },
       connectionRadius: 20
     });
@@ -513,7 +528,7 @@ let c = class extends B(z) {
   }
   _renderConnectionLine(t) {
     if (!t) return null;
-    const [o] = j({
+    const [o] = Y({
       sourceX: t.from.x,
       sourceY: t.from.y,
       sourcePosition: t.fromPosition,
@@ -521,7 +536,7 @@ let c = class extends B(z) {
       targetY: t.to.y,
       targetPosition: t.toPosition
     });
-    return Z`
+    return S`
       <path
         class="xyflow__connection-path"
         d="${o}"
@@ -534,7 +549,7 @@ let c = class extends B(z) {
   }
   render() {
     const t = this._state.transform.get(), o = this._state.connectionInProgress.get();
-    return E`
+    return j`
       <div 
         class="xyflow__renderer ${this.showGrid ? "has-grid" : ""}"
         @dragover="${this._onDragOver}"
@@ -547,14 +562,14 @@ let c = class extends B(z) {
           <div class="xyflow__nodes" @handle-pointer-down="${this._onHandlePointerDown}">
             ${this.nodes.map((e) => {
       if (e.hidden) return null;
-      const s = this._state.nodeLookup.get(e.id)?.internals.positionAbsolute || e.position, n = this.nodeTypes[e.type || "default"] || this.nodeTypes.default, i = J(n), p = e.style || {}, h = Object.entries(p).map(([g, x]) => `${g.replace(/([A-Z])/g, "-$1").toLowerCase()}: ${typeof x == "number" ? `${x}px` : x}`).join("; "), d = e.width || p.width, u = e.height || p.height, l = d ? `width: ${typeof d == "number" ? `${d}px` : d};` : "", f = u ? `height: ${typeof u == "number" ? `${u}px` : u};` : "", y = e.zIndex ? `z-index: ${e.zIndex};` : "";
-      return E`
+      const s = this._state.nodeLookup.get(e.id)?.internals.positionAbsolute || e.position, n = this.nodeTypes[e.type || "default"] || this.nodeTypes.default, i = J(n), p = e.style || {}, h = Object.entries(p).map(([x, $]) => `${x.replace(/([A-Z])/g, "-$1").toLowerCase()}: ${typeof $ == "number" ? `${$}px` : $}`).join("; "), l = e.width || p.width, c = e.height || p.height, d = l ? `width: ${typeof l == "number" ? `${l}px` : l};` : "", f = c ? `height: ${typeof c == "number" ? `${c}px` : c};` : "", g = e.zIndex ? `z-index: ${e.zIndex};` : "";
+      return j`
                 <${i}
                   class="xyflow__node"
                   data-id="${e.id}"
                   type="${e.type || "default"}"
                   .nodeId="${e.id}"
-                  style="transform: translate(${s.x}px, ${s.y}px); ${h} ${l} ${f} ${y}"
+                  style="transform: translate(${s.x}px, ${s.y}px); ${h} ${d} ${f} ${g}"
                   .data="${e.data}"
                   .label="${e.data.label}"
                   .type="${e.type || "default"}"
@@ -616,8 +631,8 @@ let c = class extends B(z) {
           </svg>
         </div>
       </div>
-      ${this.showControls ? E`<lit-controls .panZoom="${this._panZoom}"></lit-controls>` : ""}
-      ${this.showMinimap ? E`
+      ${this.showControls ? j`<lit-controls .panZoom="${this._panZoom}"></lit-controls>` : ""}
+      ${this.showMinimap ? j`
             <lit-minimap
               .panZoom="${this._panZoom}"
               .nodeLookup="${this._state.nodeLookup}"
@@ -631,9 +646,9 @@ let c = class extends B(z) {
     `;
   }
 };
-c.styles = [
-  W,
-  S`
+u.styles = [
+  F,
+  B`
     :host {
       display: block;
       width: 100%;
@@ -786,79 +801,93 @@ c.styles = [
       stroke-dasharray: 5,5;
       pointer-events: none;
     }
+
+    .xyflow__edge-label {
+      background: var(--md-sys-color-surface);
+      color: var(--md-sys-color-on-surface);
+      padding: 2px 6px;
+      border-radius: var(--md-sys-shape-corner-extra-small);
+      font-size: var(--md-sys-typescale-label-small-size);
+      font-family: var(--md-sys-typescale-body-medium-font);
+      border: 1px solid var(--md-sys-color-outline-variant);
+      white-space: nowrap;
+      pointer-events: all;
+      user-select: none;
+      box-shadow: var(--md-sys-elevation-1);
+    }
   `
 ];
 m([
-  V(".xyflow__renderer")
-], c.prototype, "_renderer", 2);
+  q(".xyflow__renderer")
+], u.prototype, "_renderer", 2);
 m([
-  V(".xyflow__viewport")
-], c.prototype, "_viewport", 2);
+  q(".xyflow__viewport")
+], u.prototype, "_viewport", 2);
 m([
-  L()
-], c.prototype, "_panZoom", 2);
+  N()
+], u.prototype, "_panZoom", 2);
 m([
-  L()
-], c.prototype, "_state", 2);
+  N()
+], u.prototype, "_state", 2);
 m([
   a({ type: Object })
-], c.prototype, "nodeTypes", 2);
+], u.prototype, "nodeTypes", 2);
 m([
   a({ type: Boolean, attribute: "show-controls", reflect: !0 })
-], c.prototype, "showControls", 2);
+], u.prototype, "showControls", 2);
 m([
   a({ type: Boolean, attribute: "show-minimap", reflect: !0, converter: w })
-], c.prototype, "showMinimap", 2);
+], u.prototype, "showMinimap", 2);
 m([
   a({ type: Boolean, attribute: "show-grid", reflect: !0, converter: w })
-], c.prototype, "showGrid", 2);
+], u.prototype, "showGrid", 2);
 m([
   a({ type: Boolean, attribute: "nodes-draggable", reflect: !0, converter: w })
-], c.prototype, "nodesDraggable", 2);
+], u.prototype, "nodesDraggable", 2);
 m([
   a({ type: Boolean, attribute: "nodes-connectable", reflect: !0, converter: w })
-], c.prototype, "nodesConnectable", 2);
+], u.prototype, "nodesConnectable", 2);
 m([
   a({ type: Boolean, attribute: "pan-on-drag", reflect: !0, converter: w })
-], c.prototype, "panOnDrag", 2);
+], u.prototype, "panOnDrag", 2);
 m([
   a({ type: Boolean, attribute: "zoom-on-scroll", reflect: !0, converter: w })
-], c.prototype, "zoomOnScroll", 2);
+], u.prototype, "zoomOnScroll", 2);
 m([
   a({ type: Boolean, attribute: "zoom-on-pinch", reflect: !0, converter: w })
-], c.prototype, "zoomOnPinch", 2);
+], u.prototype, "zoomOnPinch", 2);
 m([
   a({ type: Boolean, attribute: "zoom-on-double-click", reflect: !0, converter: w })
-], c.prototype, "zoomOnDoubleClick", 2);
+], u.prototype, "zoomOnDoubleClick", 2);
 m([
   a({ type: Boolean, attribute: "prompt-on-drop", reflect: !0, converter: w })
-], c.prototype, "promptOnDrop", 2);
+], u.prototype, "promptOnDrop", 2);
 m([
-  L()
-], c.prototype, "_width", 2);
+  N()
+], u.prototype, "_width", 2);
 m([
-  L()
-], c.prototype, "_height", 2);
+  N()
+], u.prototype, "_height", 2);
 m([
   a({ type: Array })
-], c.prototype, "nodes", 1);
+], u.prototype, "nodes", 1);
 m([
   a({ type: Array })
-], c.prototype, "edges", 1);
+], u.prototype, "edges", 1);
 m([
   a({ type: Object })
-], c.prototype, "viewport", 2);
-c = m([
-  D("lit-flow")
-], c);
-var gt = Object.defineProperty, yt = Object.getOwnPropertyDescriptor, N = (t, o, e, r) => {
-  for (var s = r > 1 ? void 0 : r ? yt(o, e) : o, n = t.length - 1, i; n >= 0; n--)
+], u.prototype, "viewport", 2);
+u = m([
+  C("lit-flow")
+], u);
+var yt = Object.defineProperty, gt = Object.getOwnPropertyDescriptor, A = (t, o, e, r) => {
+  for (var s = r > 1 ? void 0 : r ? gt(o, e) : o, n = t.length - 1, i; n >= 0; n--)
     (i = t[n]) && (s = (r ? i(o, e, s) : i(s)) || s);
-  return r && s && gt(o, e, s), s;
+  return r && s && yt(o, e, s), s;
 };
-let C = class extends z {
+let I = class extends D {
   constructor() {
-    super(), this.type = "source", this.position = I.Top, this.addEventListener("mousedown", (t) => this._onPointerDown(t)), this.addEventListener("touchstart", (t) => this._onPointerDown(t));
+    super(), this.type = "source", this.position = L.Top, this.addEventListener("mousedown", (t) => this._onPointerDown(t)), this.addEventListener("touchstart", (t) => this._onPointerDown(t));
   }
   createRenderRoot() {
     return this;
@@ -885,7 +914,7 @@ let C = class extends z {
     (t.has("nodeId") || t.has("handleId") || t.has("type")) && this.setAttribute("data-id", `lit-flow-${this.nodeId || ""}-${this.handleId || ""}-${this.type}`);
   }
   render() {
-    return $`
+    return O`
       <div style="
         width: 100%;
         height: 100%;
@@ -896,27 +925,27 @@ let C = class extends z {
     `;
   }
 };
-N([
+A([
   a({ type: String, reflect: !0 })
-], C.prototype, "type", 2);
-N([
+], I.prototype, "type", 2);
+A([
   a({ type: String, reflect: !0, attribute: "data-handlepos" })
-], C.prototype, "position", 2);
-N([
+], I.prototype, "position", 2);
+A([
   a({ type: String, reflect: !0, attribute: "data-handleid" })
-], C.prototype, "handleId", 2);
-N([
+], I.prototype, "handleId", 2);
+A([
   a({ type: String, reflect: !0, attribute: "data-nodeid" })
-], C.prototype, "nodeId", 2);
-C = N([
-  D("lit-handle")
-], C);
-var bt = Object.defineProperty, vt = Object.getOwnPropertyDescriptor, F = (t, o, e, r) => {
+], I.prototype, "nodeId", 2);
+I = A([
+  C("lit-handle")
+], I);
+var bt = Object.defineProperty, vt = Object.getOwnPropertyDescriptor, G = (t, o, e, r) => {
   for (var s = r > 1 ? void 0 : r ? vt(o, e) : o, n = t.length - 1, i; n >= 0; n--)
     (i = t[n]) && (s = (r ? i(o, e, s) : i(s)) || s);
   return r && s && bt(o, e, s), s;
 };
-let M = class extends B(z) {
+let R = class extends E(D) {
   _zoomIn() {
     this.panZoom?.scaleBy(1.2);
   }
@@ -927,7 +956,7 @@ let M = class extends B(z) {
     this.panZoom?.setViewport({ x: 0, y: 0, zoom: 1 });
   }
   render() {
-    return $`
+    return O`
       <button @click="${this._zoomIn}" title="Zoom In">
         <svg viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
       </button>
@@ -940,7 +969,7 @@ let M = class extends B(z) {
     `;
   }
 };
-M.styles = S`
+R.styles = B`
     :host {
       display: block;
       position: absolute;
@@ -983,18 +1012,18 @@ M.styles = S`
       fill: currentColor;
     }
   `;
-F([
+G([
   a({ type: Object })
-], M.prototype, "panZoom", 2);
-M = F([
-  D("lit-controls")
-], M);
-var _t = Object.defineProperty, wt = Object.getOwnPropertyDescriptor, P = (t, o, e, r) => {
+], R.prototype, "panZoom", 2);
+R = G([
+  C("lit-controls")
+], R);
+var _t = Object.defineProperty, wt = Object.getOwnPropertyDescriptor, z = (t, o, e, r) => {
   for (var s = r > 1 ? void 0 : r ? wt(o, e) : o, n = t.length - 1, i; n >= 0; n--)
     (i = t[n]) && (s = (r ? i(o, e, s) : i(s)) || s);
   return r && s && _t(o, e, s), s;
 };
-let v = class extends B(z) {
+let v = class extends E(D) {
   constructor() {
     super(...arguments), this.nodeLookup = /* @__PURE__ */ new Map(), this.transform = [0, 0, 1], this.translateExtent = [[-1 / 0, -1 / 0], [1 / 0, 1 / 0]], this.width = 0, this.height = 0;
   }
@@ -1024,7 +1053,7 @@ let v = class extends B(z) {
       width: this.width / this.transform[2],
       height: this.height / this.transform[2]
     };
-    return this.nodeLookup.size > 0 ? at(dt(this.nodeLookup), t) : t;
+    return this.nodeLookup.size > 0 ? at(lt(this.nodeLookup), t) : t;
   }
   render() {
     const t = this._getBoundingRect(), o = {
@@ -1032,21 +1061,21 @@ let v = class extends B(z) {
       y: -this.transform[1] / this.transform[2],
       width: this.width / this.transform[2],
       height: this.height / this.transform[2]
-    }, e = 200, r = 150, s = t.width / e, n = t.height / r, i = Math.max(s, n), p = i * e, h = i * r, d = 5 * i, u = t.x - (p - t.width) / 2 - d, l = t.y - (h - t.height) / 2 - d, f = p + d * 2, y = h + d * 2;
-    return $`
+    }, e = 200, r = 150, s = t.width / e, n = t.height / r, i = Math.max(s, n), p = i * e, h = i * r, l = 5 * i, c = t.x - (p - t.width) / 2 - l, d = t.y - (h - t.height) / 2 - l, f = p + l * 2, g = h + l * 2;
+    return O`
       <svg
         width="${e}"
         height="${r}"
-        viewBox="${u} ${l} ${f} ${y}"
+        viewBox="${c} ${d} ${f} ${g}"
       >
-        ${Array.from(this.nodeLookup.values()).map((g) => {
-      const { x, y: G } = g.internals.positionAbsolute, K = g.measured.width || 0, U = g.measured.height || 0;
-      return Z`
+        ${Array.from(this.nodeLookup.values()).map((x) => {
+      const { x: $, y } = x.internals.positionAbsolute, Z = x.measured.width || 0, U = x.measured.height || 0;
+      return S`
             <rect
               class="minimap-node"
-              x="${x}"
-              y="${G}"
-              width="${K}"
+              x="${$}"
+              y="${y}"
+              width="${Z}"
               height="${U}"
               rx="2"
               ry="2"
@@ -1055,14 +1084,14 @@ let v = class extends B(z) {
     })}
         <path
           class="minimap-mask"
-          d="M${u - d},${l - d}h${f + d * 2}v${y + d * 2}h${-f - d * 2}z
+          d="M${c - l},${d - l}h${f + l * 2}v${g + l * 2}h${-f - l * 2}z
              M${o.x},${o.y}h${o.width}v${o.height}h${-o.width}z"
         />
       </svg>
     `;
   }
 };
-v.styles = S`
+v.styles = B`
     :host {
       display: block;
       position: absolute;
@@ -1091,36 +1120,36 @@ v.styles = S`
       fill-rule: evenodd;
     }
   `;
-P([
+z([
   a({ type: Object })
 ], v.prototype, "panZoom", 2);
-P([
+z([
   a({ type: Object })
 ], v.prototype, "nodeLookup", 2);
-P([
+z([
   a({ type: Array })
 ], v.prototype, "transform", 2);
-P([
+z([
   a({ type: Array })
 ], v.prototype, "translateExtent", 2);
-P([
+z([
   a({ type: Number })
 ], v.prototype, "width", 2);
-P([
+z([
   a({ type: Number })
 ], v.prototype, "height", 2);
-P([
-  L()
+z([
+  N()
 ], v.prototype, "_minimapInstance", 2);
-v = P([
-  D("lit-minimap")
+v = z([
+  C("lit-minimap")
 ], v);
-var xt = Object.defineProperty, $t = Object.getOwnPropertyDescriptor, q = (t, o, e, r) => {
+var xt = Object.defineProperty, $t = Object.getOwnPropertyDescriptor, K = (t, o, e, r) => {
   for (var s = r > 1 ? void 0 : r ? $t(o, e) : o, n = t.length - 1, i; n >= 0; n--)
     (i = t[n]) && (s = (r ? i(o, e, s) : i(s)) || s);
   return r && s && xt(o, e, s), s;
 };
-let R = class extends z {
+let H = class extends D {
   constructor() {
     super(...arguments), this.nodeTypes = [
       { type: "default", label: "Default Node" },
@@ -1132,11 +1161,11 @@ let R = class extends z {
     t.dataTransfer && (t.dataTransfer.setData("application/litflow", o), t.dataTransfer.effectAllowed = "move");
   }
   render() {
-    return $`
+    return O`
       <div class="sidebar-title">Node Palette</div>
       <div class="node-palette">
         ${this.nodeTypes.map(
-      (t) => $`
+      (t) => O`
             <div
               class="palette-item"
               draggable="true"
@@ -1150,9 +1179,9 @@ let R = class extends z {
     `;
   }
 };
-R.styles = [
-  W,
-  S`
+H.styles = [
+  F,
+  B`
     :host {
       display: block;
       width: 200px;
@@ -1200,21 +1229,21 @@ R.styles = [
     }
   `
 ];
-q([
+K([
   a({ type: Array })
-], R.prototype, "nodeTypes", 2);
-R = q([
-  D("lit-sidebar")
-], R);
+], H.prototype, "nodeTypes", 2);
+H = K([
+  C("lit-sidebar")
+], H);
 export {
-  M as LitControls,
+  R as LitControls,
   b as LitEdge,
-  c as LitFlow,
-  C as LitHandle,
+  u as LitFlow,
+  I as LitHandle,
   v as LitMinimap,
   _ as LitNode,
-  R as LitSidebar,
-  lt as createInitialState,
-  W as m3Tokens
+  H as LitSidebar,
+  dt as createInitialState,
+  F as m3Tokens
 };
 //# sourceMappingURL=litflow.js.map