@ghchinoy/litflow 0.2.2 → 0.2.6

package/dist/litflow.js

@@ -1,36 +1,36 @@
-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() {
+import { LitElement as P, html as v, svg as R, css as A } from "lit";
+import { unsafeStatic as ot, html as B } from "lit/static-html.js";
+import { property as d, customElement as O, query as q, state as N } from "lit/decorators.js";
+import { signal as X, SignalWatcher as j } from "@lit-labs/signals";
+import { infiniteExtent as st, Position as D, getBezierPath as W, adoptUserNodes as rt, updateAbsolutePositions as U, PanOnScrollMode as it, XYPanZoom as nt, XYDrag as at, getHandlePosition as K, getSmoothStepPath as F, getStraightPath as dt, XYHandle as lt, ConnectionMode as ht, XYMinimap as pt, getBoundsOfRects as ct, getInternalNodesBounds as ut } from "@xyflow/system";
+import { m3Tokens as J } from "./theme.js";
+function ft() {
   return {
-    nodes: M([]),
-    edges: M([]),
+    nodes: X([]),
+    edges: X([]),
     nodeLookup: /* @__PURE__ */ new Map(),
     parentLookup: /* @__PURE__ */ new Map(),
-    nodeExtent: Q,
+    nodeExtent: st,
     snapGrid: [15, 15],
     snapToGrid: !1,
     nodeOrigin: [0, 0],
     multiSelectionActive: !1,
-    transform: M([0, 0, 1]),
+    transform: X([0, 0, 1]),
     autoPanOnNodeDrag: !0,
     nodesDraggable: !0,
     selectNodesOnDrag: !0,
     nodeDragThreshold: 0,
     panZoom: null,
     domNode: null,
-    connectionInProgress: M(null)
+    connectionInProgress: X(null)
   };
 }
-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;
+var mt = Object.defineProperty, yt = Object.getOwnPropertyDescriptor, z = (t, o, e, s) => {
+  for (var r = s > 1 ? void 0 : s ? yt(o, e) : o, i = t.length - 1, n; i >= 0; i--)
+    (n = t[i]) && (r = (s ? n(o, e, r) : n(r)) || r);
+  return s && r && mt(o, e, r), r;
 };
-let _ = class extends E(D) {
+let $ = class extends j(P) {
   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 E(D) {
     return this;
   }
   render() {
-    return O`
+    return v`
       <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" ? 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>` : ""}
+      ${this.type === "input" || this.type === "default" ? v`<lit-handle type="source" data-handlepos="bottom" data-nodeid="${this.nodeId}"></lit-handle>` : ""}
+      ${this.type === "output" || this.type === "default" ? v`<lit-handle type="target" data-handlepos="top" data-nodeid="${this.nodeId}"></lit-handle>` : ""}
     `;
   }
 };
-k([
-  a({ type: String })
-], _.prototype, "label", 2);
-k([
-  a({ type: String, reflect: !0 })
-], _.prototype, "type", 2);
-k([
-  a({ type: Object })
-], _.prototype, "data", 2);
-k([
-  a({ type: Boolean, reflect: !0 })
-], _.prototype, "selected", 2);
-k([
-  a({ type: String, attribute: "data-id", reflect: !0 })
-], _.prototype, "nodeId", 2);
-k([
-  a({ type: Number, attribute: "position-x" })
-], _.prototype, "positionX", 2);
-k([
-  a({ type: Number, attribute: "position-y" })
-], _.prototype, "positionY", 2);
-_ = k([
-  C("lit-node")
-], _);
-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;
+z([
+  d({ type: String })
+], $.prototype, "label", 2);
+z([
+  d({ type: String, reflect: !0 })
+], $.prototype, "type", 2);
+z([
+  d({ type: Object })
+], $.prototype, "data", 2);
+z([
+  d({ type: Boolean, reflect: !0 })
+], $.prototype, "selected", 2);
+z([
+  d({ type: String, attribute: "data-id", reflect: !0 })
+], $.prototype, "nodeId", 2);
+z([
+  d({ type: Number, attribute: "position-x" })
+], $.prototype, "positionX", 2);
+z([
+  d({ type: Number, attribute: "position-y" })
+], $.prototype, "positionY", 2);
+$ = z([
+  O("lit-node")
+], $);
+var gt = Object.defineProperty, _t = Object.getOwnPropertyDescriptor, I = (t, o, e, s) => {
+  for (var r = s > 1 ? void 0 : s ? _t(o, e) : o, i = t.length - 1, n; i >= 0; i--)
+    (n = t[i]) && (r = (s ? n(o, e, r) : n(r)) || r);
+  return s && r && gt(o, e, r), r;
 };
-let b = class extends E(D) {
+let w = class extends j(P) {
   constructor() {
-    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;
+    super(...arguments), this.sourceX = 0, this.sourceY = 0, this.targetX = 0, this.targetY = 0, this.sourcePosition = D.Right, this.targetPosition = D.Left, this.selected = !1;
   }
   render() {
-    const [t] = Y({
+    const [t] = W({
       sourceX: this.sourceX,
       sourceY: this.sourceY,
       sourcePosition: this.sourcePosition,
@@ -88,12 +88,12 @@ let b = class extends E(D) {
       targetY: this.targetY,
       targetPosition: this.targetPosition
     });
-    return S`
+    return R`
       <path d="${t}" />
     `;
   }
 };
-b.styles = B`
+w.styles = A`
     :host {
       display: contents;
     }
@@ -108,59 +108,69 @@ b.styles = B`
       stroke: #555;
     }
   `;
-P([
-  a({ type: Number })
-], b.prototype, "sourceX", 2);
-P([
-  a({ type: Number })
-], b.prototype, "sourceY", 2);
-P([
-  a({ type: Number })
-], b.prototype, "targetX", 2);
-P([
-  a({ type: Number })
-], b.prototype, "targetY", 2);
-P([
-  a({ type: String })
-], b.prototype, "sourcePosition", 2);
-P([
-  a({ type: String })
-], b.prototype, "targetPosition", 2);
-P([
-  a({ type: Boolean, reflect: !0 })
-], b.prototype, "selected", 2);
-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--)
-    (i = t[n]) && (s = (r ? i(o, e, s) : i(s)) || s);
-  return r && s && mt(o, e, s), s;
+I([
+  d({ type: Number })
+], w.prototype, "sourceX", 2);
+I([
+  d({ type: Number })
+], w.prototype, "sourceY", 2);
+I([
+  d({ type: Number })
+], w.prototype, "targetX", 2);
+I([
+  d({ type: Number })
+], w.prototype, "targetY", 2);
+I([
+  d({ type: String })
+], w.prototype, "sourcePosition", 2);
+I([
+  d({ type: String })
+], w.prototype, "targetPosition", 2);
+I([
+  d({ type: Boolean, reflect: !0 })
+], w.prototype, "selected", 2);
+w = I([
+  O("lit-edge")
+], w);
+var vt = Object.defineProperty, bt = Object.getOwnPropertyDescriptor, m = (t, o, e, s) => {
+  for (var r = s > 1 ? void 0 : s ? bt(o, e) : o, i = t.length - 1, n; i >= 0; i--)
+    (n = t[i]) && (r = (s ? n(o, e, r) : n(r)) || r);
+  return s && r && vt(o, e, r), r;
 };
-const w = {
+const k = {
   fromAttribute: (t) => t !== "false" && t !== null,
   toAttribute: (t) => t ? "" : null
 };
-let u = class extends E(D) {
+let f = class extends j(P) {
   constructor() {
-    super(...arguments), this._drags = /* @__PURE__ */ new Map(), this._state = dt(), this.nodeTypes = {
+    super(...arguments), this._drags = /* @__PURE__ */ new Map(), this._state = ft(), this.nodeTypes = {
       default: "lit-node",
       input: "lit-node",
       output: "lit-node"
-    }, this.showControls = !1, this.showMinimap = !1, this.showGrid = !0, this.nodesDraggable = !0, this.nodesConnectable = !0, this.panOnDrag = !0, this.zoomOnScroll = !0, this.zoomOnPinch = !0, this.zoomOnDoubleClick = !0, this.promptOnDrop = !1, this._width = 0, this._height = 0, this.viewport = { x: 0, y: 0, zoom: 1 };
+    }, this.showControls = !1, this.showMinimap = !1, this.showGrid = !0, this.nodesDraggable = !0, this.nodesConnectable = !0, this.panOnDrag = !0, this.zoomOnScroll = !0, this.zoomOnPinch = !0, this.zoomOnDoubleClick = !0, this.promptOnDrop = !1, this.selectionMode = "pan", this._selectionRect = null, this._selectionStart = null, this._width = 0, this._height = 0, this.viewport = { x: 0, y: 0, zoom: 1 };
   }
   set nodes(t) {
-    this._state.nodes.set(t), tt(t, this._state.nodeLookup, this._state.parentLookup, {
+    this._state.nodes.set(t), rt(t, this._state.nodeLookup, this._state.parentLookup, {
       nodeOrigin: this._state.nodeOrigin,
       nodeExtent: this._state.nodeExtent
-    }), X(this._state.nodeLookup, this._state.parentLookup, {
+    }), U(this._state.nodeLookup, this._state.parentLookup, {
       nodeOrigin: this._state.nodeOrigin,
       nodeExtent: this._state.nodeExtent
-    });
+    }), this._notifyChange();
   }
   get nodes() {
     return this._state.nodes.get();
   }
+  _notifyChange() {
+    this.dispatchEvent(new CustomEvent("change", {
+      detail: {
+        nodes: this.nodes,
+        edges: this.edges
+      },
+      bubbles: !0,
+      composed: !0
+    }));
+  }
   _discoverNodes() {
     if (this.nodes.length > 0) return;
     const t = Array.from(this.querySelectorAll("lit-node"));
@@ -177,13 +187,13 @@ let u = class extends E(D) {
           ...e.data
         }
       }));
-      this.nodes = o, t.forEach((e, r) => {
-        e.nodeId = o[r].id;
+      this.nodes = o, t.forEach((e, s) => {
+        e.nodeId = o[s].id;
       });
     }
   }
   set edges(t) {
-    this._state.edges.set(t);
+    this._state.edges.set(t), this._notifyChange();
   }
   get edges() {
     return this._state.edges.get();
@@ -206,40 +216,40 @@ let u = class extends E(D) {
     const e = this._state.nodeLookup.get(t);
     if (e) {
       "updateComplete" in o && await o.updateComplete;
-      const { width: r, height: s } = o.getBoundingClientRect(), n = this._state.transform.get()[2];
+      const { width: s, height: r } = o.getBoundingClientRect(), i = this._state.transform.get()[2];
       e.measured = {
-        width: r / n,
-        height: s / n
+        width: s / i,
+        height: r / i
       };
-      const i = this.nodes.find((h) => h.id === t);
-      i && (i.measured = e.measured);
+      const n = this.nodes.find((c) => c.id === t);
+      n && (n.measured = e.measured);
       const p = o.querySelectorAll("lit-handle");
       if (p && p.length > 0) {
-        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
+        const c = [], a = [];
+        p.forEach((h) => {
+          const l = h.getBoundingClientRect(), u = o.getBoundingClientRect(), y = {
+            id: h.handleId || null,
+            type: h.type,
+            position: h.position,
+            x: (l.left - u.left) / i,
+            y: (l.top - u.top) / i,
+            width: l.width / i,
+            height: l.height / i
           };
-          c.type === "source" ? h.push(g) : l.push(g);
+          h.type === "source" ? c.push(y) : a.push(y);
         }), e.internals.handleBounds = {
-          source: h,
-          target: l
+          source: c,
+          target: a
         }, console.log(`Node ${t} handleBounds:`, e.internals.handleBounds);
       }
-      X(this._state.nodeLookup, this._state.parentLookup, {
+      U(this._state.nodeLookup, this._state.parentLookup, {
         nodeOrigin: this._state.nodeOrigin,
         nodeExtent: this._state.nodeExtent
-      }), this._state.nodes.set([...this.nodes]);
+      }), this._state.nodes.set([...this.nodes]), this._notifyChange();
     }
   }
   _selectNode(t, o) {
-    const e = this.nodes.map((r) => r.id === t ? { ...r, selected: !r.selected } : o ? r : { ...r, selected: !1 });
+    const e = this.nodes.map((s) => s.id === t ? { ...s, selected: !s.selected } : o ? s : { ...s, selected: !1 });
     this.nodes = e;
   }
   /**
@@ -247,56 +257,40 @@ let u = class extends E(D) {
    * Useful for Drag & Drop and context menus.
    */
   project(t) {
-    const [o, e, r] = this._state.transform.get();
+    const [o, e, s] = this._state.transform.get();
     return {
-      x: (t.x - o) / r,
-      y: (t.y - e) / r
+      x: (t.x - o) / s,
+      y: (t.y - e) / s
     };
   }
-  firstUpdated() {
-    this._renderer && (this._state.domNode = this._renderer, this._resizeObserver?.observe(this._renderer), this._renderer.onclick = () => {
-      this.nodes = this.nodes.map((t) => ({ ...t, selected: !1 }));
-    }, this._panZoom = et({
-      domNode: this._renderer,
-      minZoom: 0.5,
-      maxZoom: 2,
-      translateExtent: this._state.nodeExtent,
-      viewport: this.viewport,
-      onDraggingChange: () => {
-      },
-      onPanZoom: (t, { x: o, y: e, zoom: r }) => {
-        this.viewport = { x: o, y: e, zoom: r }, this._state.transform.set([o, e, r]), this._viewport && (this._viewport.style.transform = `translate(${o}px,${e}px) scale(${r})`);
-      }
-    }), this._panZoom.update({
-      noWheelClassName: "nowheel",
-      noPanClassName: "nopan",
-      preventScrolling: !0,
-      panOnScroll: !1,
-      panOnDrag: this.panOnDrag,
-      panOnScrollMode: T.Free,
-      panOnScrollSpeed: 0.5,
-      userSelectionActive: !1,
-      zoomOnPinch: this.zoomOnPinch,
-      zoomOnScroll: this.zoomOnScroll,
-      zoomOnDoubleClick: this.zoomOnDoubleClick,
-      zoomActivationKeyPressed: !1,
-      lib: "lit",
-      onTransformChange: () => {
-      },
-      connectionInProgress: !1,
-      paneClickDistance: 0
-    }), this._state.panZoom = this._panZoom);
+  /**
+   * Fits the view to the current nodes.
+   * @param padding Optional padding in pixels (default: 50)
+   */
+  async fitView(t = 50) {
+    if (!this._panZoom || this.nodes.length === 0) return;
+    const o = Array.from(this._state.nodeLookup.values());
+    if (o.length === 0) return;
+    let e = 1 / 0, s = 1 / 0, r = -1 / 0, i = -1 / 0;
+    o.forEach((_) => {
+      const { x: g, y: S } = _.internals.positionAbsolute, G = _.measured.width || 0, et = _.measured.height || 0;
+      e = Math.min(e, g), s = Math.min(s, S), r = Math.max(r, g + G), i = Math.max(i, S + et);
+    });
+    const n = r - e, p = i - s, c = this.offsetWidth, a = this.offsetHeight;
+    if (c === 0 || a === 0) return;
+    const h = (c - t * 2) / n, l = (a - t * 2) / p, u = Math.min(h, l, 1), y = (c - n * u) / 2 - e * u, b = (a - p * u) / 2 - s * u;
+    await this._panZoom.setViewport({ x: y, y: b, zoom: u }, { duration: 400 });
   }
-  updated(t) {
-    (t.has("nodes") || t.has("nodesDraggable")) && this._setupDrags(), this._panZoom && (t.has("panOnDrag") || t.has("zoomOnScroll") || t.has("zoomOnPinch") || t.has("zoomOnDoubleClick")) && this._panZoom.update({
+  _updatePanZoom(t = !1) {
+    this._panZoom && this._panZoom.update({
       noWheelClassName: "nowheel",
       noPanClassName: "nopan",
       preventScrolling: !0,
       panOnScroll: !1,
       panOnDrag: this.panOnDrag,
-      panOnScrollMode: T.Free,
+      panOnScrollMode: it.Free,
       panOnScrollSpeed: 0.5,
-      userSelectionActive: !1,
+      userSelectionActive: t,
       zoomOnPinch: this.zoomOnPinch,
       zoomOnScroll: this.zoomOnScroll,
       zoomOnDoubleClick: this.zoomOnDoubleClick,
@@ -304,59 +298,76 @@ let u = class extends E(D) {
       lib: "lit",
       onTransformChange: () => {
       },
-      connectionInProgress: !1,
+      connectionInProgress: !!this._state.connectionInProgress.get(),
       paneClickDistance: 0
     });
   }
+  firstUpdated() {
+    this._renderer && (this._state.domNode = this._renderer, this._resizeObserver?.observe(this._renderer), this._renderer.addEventListener("pointerdown", (t) => this._onPointerDown(t), { capture: !0 }), this._panZoom = nt({
+      domNode: this._renderer,
+      minZoom: 0.5,
+      maxZoom: 2,
+      translateExtent: this._state.nodeExtent,
+      viewport: this.viewport,
+      onDraggingChange: () => {
+      },
+      onPanZoom: (t, { x: o, y: e, zoom: s }) => {
+        this.viewport = { x: o, y: e, zoom: s }, this._state.transform.set([o, e, s]), this._viewport && (this._viewport.style.transform = `translate(${o}px,${e}px) scale(${s})`);
+      }
+    }), this._updatePanZoom(), this._state.panZoom = this._panZoom);
+  }
+  updated(t) {
+    (t.has("nodes") || t.has("nodesDraggable")) && this._setupDrags(), this._panZoom && (t.has("panOnDrag") || t.has("zoomOnScroll") || t.has("zoomOnPinch") || t.has("zoomOnDoubleClick")) && this._updatePanZoom();
+  }
   _setupDrags() {
     const t = this.shadowRoot?.querySelectorAll(".xyflow__node"), o = /* @__PURE__ */ new Set();
     t?.forEach((e) => {
-      const r = e.dataset.id;
-      if (r) {
-        if (o.add(r), this._resizeObserver?.observe(e), e.onclick = (n) => {
-          n.stopPropagation(), this._selectNode(r, n.shiftKey || n.metaKey);
+      const s = e.dataset.id;
+      if (s) {
+        if (o.add(s), this._resizeObserver?.observe(e), e.onclick = (i) => {
+          i.stopPropagation(), this._selectNode(s, i.shiftKey || i.metaKey);
         }, e.style.cursor = this.nodesDraggable ? "grab" : "default", !this.nodesDraggable) {
-          this._drags.delete(r);
+          this._drags.delete(s);
           return;
         }
-        let s = this._drags.get(r);
-        s || (s = ot({
+        let r = this._drags.get(s);
+        r || (r = at({
           getStoreItems: () => ({
             ...this._state,
             nodes: this._state.nodes.get(),
             edges: this._state.edges.get(),
             transform: this._state.transform.get(),
-            panBy: async (n) => {
-              const { panZoom: i, nodeExtent: p } = this._state, h = this._state.transform.get();
-              return i ? !!await i.setViewportConstrained(
+            panBy: async (i) => {
+              const { panZoom: n, nodeExtent: p } = this._state, c = this._state.transform.get();
+              return n ? !!await n.setViewportConstrained(
                 {
-                  x: h[0] + n.x,
-                  y: h[1] + n.y,
-                  zoom: h[2]
+                  x: c[0] + i.x,
+                  y: c[1] + i.y,
+                  zoom: c[2]
                 },
                 [[0, 0], [this.offsetWidth, this.offsetHeight]],
                 p
               ) : !1;
             },
-            updateNodePositions: (n) => {
-              n.forEach((i, p) => {
-                const h = this._state.nodeLookup.get(p);
-                if (h) {
-                  h.position = i.position, h.internals.positionAbsolute = i.internals.positionAbsolute;
-                  const l = this.nodes.find((c) => c.id === p);
-                  l && (l.position = i.position);
+            updateNodePositions: (i) => {
+              i.forEach((n, p) => {
+                const c = this._state.nodeLookup.get(p);
+                if (c) {
+                  c.position = n.position, c.internals.positionAbsolute = n.internals.positionAbsolute;
+                  const a = this.nodes.find((h) => h.id === p);
+                  a && (a.position = n.position);
                 }
-              }), X(this._state.nodeLookup, this._state.parentLookup, {
+              }), U(this._state.nodeLookup, this._state.parentLookup, {
                 nodeOrigin: this._state.nodeOrigin,
                 nodeExtent: this._state.nodeExtent
-              }), this._state.nodes.set([...this.nodes]);
+              }), this._state.nodes.set([...this.nodes]), this._notifyChange();
             },
             unselectNodesAndEdges: () => {
             }
           })
-        }), this._drags.set(r, s)), s.update({
+        }), this._drags.set(s, r)), r.update({
           domNode: e,
-          nodeId: r
+          nodeId: s
         });
       }
     });
@@ -366,76 +377,76 @@ let u = class extends E(D) {
   _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((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(
-      (y) => y.id === (t.sourceHandle || null)
+    const s = this.nodes.find((g) => g.id === t.source), r = this.nodes.find((g) => g.id === t.target);
+    if (s?.hidden || r?.hidden) return null;
+    const i = (o.internals.handleBounds?.source || []).find(
+      (g) => g.id === (t.sourceHandle || null)
     ) || o.internals.handleBounds?.source?.[0] || {
       id: null,
       type: "source",
       nodeId: t.source,
-      position: L.Bottom,
+      position: D.Bottom,
       x: (o.measured.width || 0) / 2,
       y: o.measured.height || 0,
       width: 1,
       height: 1
-    }, i = (e.internals.handleBounds?.target || []).find(
-      (y) => y.id === (t.targetHandle || null)
+    }, n = (e.internals.handleBounds?.target || []).find(
+      (g) => g.id === (t.targetHandle || null)
     ) || e.internals.handleBounds?.target?.[0] || {
       id: null,
       type: "target",
       nodeId: t.target,
-      position: L.Top,
+      position: D.Top,
       x: (e.measured.width || 0) / 2,
       y: 0,
       width: 1,
       height: 1
-    }, p = V(o, n, n.position, !0), h = V(e, i, i.position, !0);
-    let l = "", c = 0, d = 0;
-    const f = {
+    }, p = K(o, i, i.position, !0), c = K(e, n, n.position, !0);
+    let a = "", h = 0, l = 0;
+    const u = {
       sourceX: p.x,
       sourceY: p.y,
-      sourcePosition: n.position,
-      targetX: h.x,
-      targetY: h.y,
-      targetPosition: i.position
+      sourcePosition: i.position,
+      targetX: c.x,
+      targetY: c.y,
+      targetPosition: n.position
     };
     switch (t.type) {
       case "straight":
-        [l, c, d] = st(f);
+        [a, h, l] = dt(u);
         break;
       case "smoothstep":
-        [l, c, d] = W(f);
+        [a, h, l] = F(u);
         break;
       case "step":
-        [l, c, d] = W({ ...f, borderRadius: 0 });
+        [a, h, l] = F({ ...u, borderRadius: 0 });
         break;
       default:
-        [l, c, d] = Y(f);
+        [a, h, l] = W(u);
         break;
     }
-    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`
+    const y = (g) => {
+      if (!g) return null;
+      const S = typeof g == "string" ? g : g.type;
+      return S ? `lit-flow__${S}${t.selected ? "-selected" : ""}` : null;
+    }, b = y(t.markerEnd), _ = y(t.markerStart);
+    return R`
       <g class="xyflow__edge">
         <path
-          d="${l}"
+          d="${a}"
           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;"
+          stroke-width="${t.selected ? "3" : "2"}"
+          marker-end="${b ? `url(#${b})` : ""}"
+          marker-start="${_ ? `url(#${_})` : ""}"
+          style="pointer-events: none; transition: stroke 0.2s ease-in-out, stroke-width 0.2s ease-in-out;"
         />
-        ${t.label ? S`
+        ${t.label ? R`
             <foreignObject
               width="100"
               height="30"
-              x="${c - 50}"
-              y="${d - 15}"
+              x="${h - 50}"
+              y="${l - 15}"
               requiredExtensions="http://www.w3.org/1999/xhtml"
             >
               <div style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;">
@@ -446,54 +457,108 @@ let u = class extends E(D) {
       </g>
     `;
   }
+  _isPaneClick(t) {
+    return t instanceof HTMLElement || t instanceof SVGElement ? !!(t === this._renderer || t.classList.contains("xyflow__viewport") || t.classList.contains("xyflow__edges") || t.classList.contains("xyflow__nodes")) : !1;
+  }
+  _onPointerDown(t) {
+    const o = this._isPaneClick(t.target), e = t.shiftKey || this.selectionMode === "select";
+    if (o && e) {
+      console.log("LitFlow: Selection started", { x: t.clientX, y: t.clientY, shift: t.shiftKey });
+      const s = this._renderer.getBoundingClientRect();
+      this._selectionStart = {
+        x: t.clientX - s.left,
+        y: t.clientY - s.top
+      }, this._selectionRect = { x: this._selectionStart.x, y: this._selectionStart.y, width: 0, height: 0 }, this._updatePanZoom(!0), this._renderer.setPointerCapture(t.pointerId), t.stopImmediatePropagation();
+    }
+  }
+  _onPointerMove(t) {
+    if (this._selectionStart && this._renderer) {
+      const o = this._renderer.getBoundingClientRect(), e = t.clientX - o.left, s = t.clientY - o.top, r = Math.min(this._selectionStart.x, e), i = Math.min(this._selectionStart.y, s), n = Math.abs(this._selectionStart.x - e), p = Math.abs(this._selectionStart.y - s);
+      this._selectionRect = { x: r, y: i, width: n, height: p }, this._performSelection(t.shiftKey);
+    }
+  }
+  _onPointerUp(t) {
+    this._selectionStart && (console.log("LitFlow: Selection ended", this._selectionRect), this._performSelection(t.shiftKey), this._selectionStart = null, this._selectionRect = null, this._updatePanZoom(!1), this._renderer && this._renderer.releasePointerCapture(t.pointerId));
+  }
+  _performSelection(t) {
+    if (!this._selectionRect) return;
+    const o = this.project({ x: this._selectionRect.x, y: this._selectionRect.y }), e = this.project({
+      x: this._selectionRect.x + this._selectionRect.width,
+      y: this._selectionRect.y + this._selectionRect.height
+    }), s = {
+      x: Math.min(o.x, e.x),
+      y: Math.min(o.y, e.y),
+      width: Math.abs(o.x - e.x),
+      height: Math.abs(o.y - e.y)
+    };
+    let r = !1;
+    const i = this.nodes.map((a) => {
+      const h = this._state.nodeLookup.get(a.id);
+      if (!h) return a;
+      const l = h.internals.positionAbsolute, u = h.measured.width || 0, y = h.measured.height || 0, _ = l.x >= s.x && l.y >= s.y && l.x + u <= s.x + s.width && l.y + y <= s.y + s.height || t && a.selected;
+      return _ !== !!a.selected ? (r = !0, { ...a, selected: _ }) : a;
+    });
+    r && (this.nodes = i);
+    let n = !1;
+    const p = new Map(i.map((a) => [a.id, !!a.selected])), c = this.edges.map((a) => {
+      const h = p.get(a.source), l = p.get(a.target), y = h && l || t && a.selected;
+      return y !== !!a.selected ? (n = !0, { ...a, selected: y }) : a;
+    });
+    n && (this.edges = c), (r || n) && this.dispatchEvent(new CustomEvent("selection-change", {
+      detail: {
+        nodes: this.nodes.filter((a) => a.selected),
+        edges: this.edges.filter((a) => a.selected)
+      }
+    }));
+  }
   _onHandlePointerDown(t) {
-    const { event: o, handleId: e, nodeId: r, type: s, handleDomNode: n } = t.detail, i = s === "target";
+    const { event: o, handleId: e, nodeId: s, type: r, handleDomNode: i } = t.detail, n = r === "target";
     if (this._state.connectionInProgress.get() || !this.nodesConnectable)
       return;
-    const p = n.getBoundingClientRect(), h = n.parentElement?.getBoundingClientRect(), l = this._state.transform.get()[2], c = {
+    const p = i.getBoundingClientRect(), c = i.parentElement?.getBoundingClientRect(), a = this._state.transform.get()[2], h = {
       id: e,
-      nodeId: r,
-      type: s,
-      position: n.position,
-      x: (p.left - (h?.left ?? 0)) / l,
-      y: (p.top - (h?.top ?? 0)) / l,
-      width: p.width / l,
-      height: p.height / l
+      nodeId: s,
+      type: r,
+      position: i.position,
+      x: (p.left - (c?.left ?? 0)) / a,
+      y: (p.top - (c?.top ?? 0)) / a,
+      width: p.width / a,
+      height: p.height / a
     };
-    rt.onPointerDown(o, {
+    lt.onPointerDown(o, {
       handleId: e,
-      nodeId: r,
-      isTarget: i,
+      nodeId: s,
+      isTarget: n,
       domNode: this._renderer,
-      handleDomNode: n,
+      handleDomNode: i,
       nodeLookup: this._state.nodeLookup,
-      connectionMode: nt.Strict,
+      connectionMode: ht.Strict,
       lib: "lit",
       autoPanOnConnect: !0,
       flowId: "lit-flow",
       dragThreshold: 0,
-      panBy: async (d) => {
-        const f = this._panZoom?.getViewport();
-        return f ? (await this._panZoom?.setViewport({
-          x: f.x + d.x,
-          y: f.y + d.y,
-          zoom: f.zoom
+      panBy: async (l) => {
+        const u = this._panZoom?.getViewport();
+        return u ? (await this._panZoom?.setViewport({
+          x: u.x + l.x,
+          y: u.y + l.y,
+          zoom: u.zoom
         }), !0) : !1;
       },
       getTransform: () => this._state.transform.get(),
-      getFromHandle: () => c,
-      updateConnection: (d) => {
-        d.inProgress ? this._state.connectionInProgress.set(d) : this._state.connectionInProgress.set(null);
+      getFromHandle: () => h,
+      updateConnection: (l) => {
+        l.inProgress ? this._state.connectionInProgress.set(l) : this._state.connectionInProgress.set(null);
       },
       cancelConnection: () => {
         this._state.connectionInProgress.set(null);
       },
-      onConnect: (d) => {
+      onConnect: (l) => {
         this.dispatchEvent(new CustomEvent("connect", {
-          detail: d
+          detail: l
         }));
-        const f = `e-${d.source}${d.sourceHandle || ""}-${d.target}${d.targetHandle || ""}`;
-        this.edges = [...this.edges, { ...d, id: f }];
+        const u = `e-${l.source}${l.sourceHandle || ""}-${l.target}${l.targetHandle || ""}`;
+        this.edges = [...this.edges, { ...l, id: u }];
       },
       connectionRadius: 20
     });
@@ -506,29 +571,29 @@ let u = class extends E(D) {
     const o = t.dataTransfer?.getData("application/litflow");
     if (typeof o > "u" || !o)
       return;
-    const e = this.getBoundingClientRect(), r = this.project({
+    const e = this.getBoundingClientRect(), s = this.project({
       x: t.clientX - e.left,
       y: t.clientY - e.top
     });
-    let s = `${o} node`;
+    let r = `${o} node`;
     if (this.promptOnDrop) {
-      const i = window.prompt("Enter node label:", s);
-      if (i === null) return;
-      s = i || s;
+      const n = window.prompt("Enter node label:", r);
+      if (n === null) return;
+      r = n || r;
     }
-    const n = {
+    const i = {
       id: `node_${Date.now()}`,
       type: o,
-      position: r,
-      data: { label: s }
+      position: s,
+      data: { label: r }
     };
-    this.nodes = [...this.nodes, n], this.dispatchEvent(new CustomEvent("node-drop", {
-      detail: { node: n, event: t }
+    this.nodes = [...this.nodes, i], this.dispatchEvent(new CustomEvent("node-drop", {
+      detail: { node: i, event: t }
     }));
   }
   _renderConnectionLine(t) {
     if (!t) return null;
-    const [o] = Y({
+    const [o] = W({
       sourceX: t.from.x,
       sourceY: t.from.y,
       sourcePosition: t.fromPosition,
@@ -536,7 +601,7 @@ let u = class extends E(D) {
       targetY: t.to.y,
       targetPosition: t.toPosition
     });
-    return S`
+    return R`
       <path
         class="xyflow__connection-path"
         d="${o}"
@@ -547,13 +612,51 @@ let u = class extends E(D) {
       />
     `;
   }
+  _onKeyDown(t) {
+    if (!(t.target instanceof HTMLInputElement || t.target instanceof HTMLTextAreaElement || t.target.isContentEditable)) {
+      if (t.key === "Delete" || t.key === "Backspace") {
+        const o = this.nodes.filter((s) => s.selected), e = this.edges.filter((s) => s.selected);
+        if (o.length > 0 || e.length > 0) {
+          const s = new Set(o.map((i) => i.id)), r = new Set(e.map((i) => i.id));
+          this.edges.forEach((i) => {
+            (s.has(i.source) || s.has(i.target)) && r.add(i.id);
+          }), this.nodes = this.nodes.filter((i) => !s.has(i.id)), this.edges = this.edges.filter((i) => !r.has(i.id)), this.dispatchEvent(new CustomEvent("nodes-delete", {
+            detail: { nodes: o }
+          })), this.dispatchEvent(new CustomEvent("edges-delete", {
+            detail: { edges: e }
+          }));
+        }
+      }
+      if (["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(t.key) && this.nodes.filter((e) => e.selected).length > 0) {
+        t.preventDefault();
+        const e = t.shiftKey ? 10 : 1, s = {
+          x: t.key === "ArrowLeft" ? -e : t.key === "ArrowRight" ? e : 0,
+          y: t.key === "ArrowUp" ? -e : t.key === "ArrowDown" ? e : 0
+        };
+        this.nodes = this.nodes.map((r) => r.selected ? {
+          ...r,
+          position: {
+            x: r.position.x + s.x,
+            y: r.position.y + s.y
+          }
+        } : r);
+      }
+    }
+  }
   render() {
     const t = this._state.transform.get(), o = this._state.connectionInProgress.get();
-    return j`
+    return B`
       <div 
         class="xyflow__renderer ${this.showGrid ? "has-grid" : ""}"
+        tabindex="0"
+        @keydown="${this._onKeyDown}"
         @dragover="${this._onDragOver}"
         @drop="${this._onDrop}"
+        @pointermove="${this._onPointerMove}"
+        @pointerup="${this._onPointerUp}"
+        @click="${(e) => {
+      this._isPaneClick(e.target) && (this.nodes = this.nodes.map((s) => ({ ...s, selected: !1 })), this.edges = this.edges.map((s) => ({ ...s, selected: !1 })));
+    }}"
       >
         <div
           class="xyflow__viewport"
@@ -562,20 +665,20 @@ let u = class extends E(D) {
           <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(([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}
+      const r = this._state.nodeLookup.get(e.id)?.internals.positionAbsolute || e.position, i = this.nodeTypes[e.type || "default"] || this.nodeTypes.default, n = ot(i), p = e.style || {}, c = Object.entries(p).map(([b, _]) => `${b.replace(/([A-Z])/g, "-$1").toLowerCase()}: ${typeof _ == "number" ? `${_}px` : _}`).join("; "), a = e.width || p.width, h = e.height || p.height, l = a ? `width: ${typeof a == "number" ? `${a}px` : a};` : "", u = h ? `height: ${typeof h == "number" ? `${h}px` : h};` : "", y = e.zIndex ? `z-index: ${e.zIndex};` : "";
+      return B`
+                <${n}
                   class="xyflow__node"
                   data-id="${e.id}"
                   type="${e.type || "default"}"
                   .nodeId="${e.id}"
-                  style="transform: translate(${s.x}px, ${s.y}px); ${h} ${d} ${f} ${g}"
+                  style="transform: translate(${r.x}px, ${r.y}px); ${c} ${l} ${u} ${y}"
                   .data="${e.data}"
                   .label="${e.data.label}"
                   .type="${e.type || "default"}"
                   ?selected="${e.selected}"
                 >
-                </${i}>
+                </${n}>
               `;
     })}
           </div>
@@ -630,9 +733,15 @@ let u = class extends E(D) {
             ${this._renderConnectionLine(o)}
           </svg>
         </div>
+        ${this._selectionRect ? B`
+            <div 
+              class="xyflow__selection" 
+              style="transform: translate(${this._selectionRect.x}px, ${this._selectionRect.y}px); width: ${this._selectionRect.width}px; height: ${this._selectionRect.height}px;"
+            ></div>
+          ` : ""}
       </div>
-      ${this.showControls ? j`<lit-controls .panZoom="${this._panZoom}"></lit-controls>` : ""}
-      ${this.showMinimap ? j`
+      ${this.showControls ? B`<lit-controls .panZoom="${this._panZoom}" @fit-view="${() => this.fitView()}"></lit-controls>` : ""}
+      ${this.showMinimap ? B`
             <lit-minimap
               .panZoom="${this._panZoom}"
               .nodeLookup="${this._state.nodeLookup}"
@@ -646,9 +755,9 @@ let u = class extends E(D) {
     `;
   }
 };
-u.styles = [
-  F,
-  B`
+f.styles = [
+  J,
+  A`
     :host {
       display: block;
       width: 100%;
@@ -666,6 +775,11 @@ u.styles = [
       position: absolute;
       top: 0;
       left: 0;
+      outline: none;
+    }
+
+    .xyflow__renderer:focus-visible {
+      box-shadow: inset 0 0 0 2px var(--md-sys-color-primary);
     }
 
     .xyflow__renderer.has-grid {
@@ -710,7 +824,7 @@ u.styles = [
       box-sizing: border-box;
       color: var(--lit-flow-node-text);
       font-size: var(--md-sys-typescale-body-medium-size);
-      transition: box-shadow 0.2s ease-in-out, border-color 0.2s ease-in-out;
+      transition: box-shadow 0.2s ease-in-out, border-color 0.2s ease-in-out, border-width 0.1s ease-in-out;
     }
 
     .xyflow__node[type="group"] {
@@ -727,8 +841,9 @@ u.styles = [
 
     .xyflow__node[selected] {
       border-color: var(--lit-flow-node-selected-border);
-      border-width: 2px;
-      box-shadow: var(--md-sys-elevation-2);
+      border-width: 3px;
+      box-shadow: var(--md-sys-elevation-3);
+      margin: -2px; /* Offset the border width increase to prevent layout shift */
     }
 
     .xyflow__node[type="input"] {
@@ -815,79 +930,96 @@ u.styles = [
       user-select: none;
       box-shadow: var(--md-sys-elevation-1);
     }
+
+    .xyflow__selection {
+      position: absolute;
+      top: 0;
+      left: 0;
+      background: var(--md-sys-color-primary-container);
+      border: 1px solid var(--md-sys-color-primary);
+      opacity: 0.4;
+      pointer-events: none;
+      z-index: 1000;
+    }
   `
 ];
 m([
   q(".xyflow__renderer")
-], u.prototype, "_renderer", 2);
+], f.prototype, "_renderer", 2);
 m([
   q(".xyflow__viewport")
-], u.prototype, "_viewport", 2);
+], f.prototype, "_viewport", 2);
 m([
   N()
-], u.prototype, "_panZoom", 2);
+], f.prototype, "_panZoom", 2);
 m([
   N()
-], u.prototype, "_state", 2);
+], f.prototype, "_state", 2);
 m([
-  a({ type: Object })
-], u.prototype, "nodeTypes", 2);
+  d({ type: Object })
+], f.prototype, "nodeTypes", 2);
 m([
-  a({ type: Boolean, attribute: "show-controls", reflect: !0 })
-], u.prototype, "showControls", 2);
+  d({ type: Boolean, attribute: "show-controls", reflect: !0 })
+], f.prototype, "showControls", 2);
 m([
-  a({ type: Boolean, attribute: "show-minimap", reflect: !0, converter: w })
-], u.prototype, "showMinimap", 2);
+  d({ type: Boolean, attribute: "show-minimap", reflect: !0, converter: k })
+], f.prototype, "showMinimap", 2);
 m([
-  a({ type: Boolean, attribute: "show-grid", reflect: !0, converter: w })
-], u.prototype, "showGrid", 2);
+  d({ type: Boolean, attribute: "show-grid", reflect: !0, converter: k })
+], f.prototype, "showGrid", 2);
 m([
-  a({ type: Boolean, attribute: "nodes-draggable", reflect: !0, converter: w })
-], u.prototype, "nodesDraggable", 2);
+  d({ type: Boolean, attribute: "nodes-draggable", reflect: !0, converter: k })
+], f.prototype, "nodesDraggable", 2);
 m([
-  a({ type: Boolean, attribute: "nodes-connectable", reflect: !0, converter: w })
-], u.prototype, "nodesConnectable", 2);
+  d({ type: Boolean, attribute: "nodes-connectable", reflect: !0, converter: k })
+], f.prototype, "nodesConnectable", 2);
 m([
-  a({ type: Boolean, attribute: "pan-on-drag", reflect: !0, converter: w })
-], u.prototype, "panOnDrag", 2);
+  d({ type: Boolean, attribute: "pan-on-drag", reflect: !0, converter: k })
+], f.prototype, "panOnDrag", 2);
 m([
-  a({ type: Boolean, attribute: "zoom-on-scroll", reflect: !0, converter: w })
-], u.prototype, "zoomOnScroll", 2);
+  d({ type: Boolean, attribute: "zoom-on-scroll", reflect: !0, converter: k })
+], f.prototype, "zoomOnScroll", 2);
 m([
-  a({ type: Boolean, attribute: "zoom-on-pinch", reflect: !0, converter: w })
-], u.prototype, "zoomOnPinch", 2);
+  d({ type: Boolean, attribute: "zoom-on-pinch", reflect: !0, converter: k })
+], f.prototype, "zoomOnPinch", 2);
 m([
-  a({ type: Boolean, attribute: "zoom-on-double-click", reflect: !0, converter: w })
-], u.prototype, "zoomOnDoubleClick", 2);
+  d({ type: Boolean, attribute: "zoom-on-double-click", reflect: !0, converter: k })
+], f.prototype, "zoomOnDoubleClick", 2);
 m([
-  a({ type: Boolean, attribute: "prompt-on-drop", reflect: !0, converter: w })
-], u.prototype, "promptOnDrop", 2);
+  d({ type: Boolean, attribute: "prompt-on-drop", reflect: !0, converter: k })
+], f.prototype, "promptOnDrop", 2);
+m([
+  d({ type: String, attribute: "selection-mode" })
+], f.prototype, "selectionMode", 2);
+m([
+  N()
+], f.prototype, "_selectionRect", 2);
 m([
   N()
-], u.prototype, "_width", 2);
+], f.prototype, "_width", 2);
 m([
   N()
-], u.prototype, "_height", 2);
+], f.prototype, "_height", 2);
 m([
-  a({ type: Array })
-], u.prototype, "nodes", 1);
+  d({ type: Array })
+], f.prototype, "nodes", 1);
 m([
-  a({ type: Array })
-], u.prototype, "edges", 1);
+  d({ type: Array })
+], f.prototype, "edges", 1);
 m([
-  a({ type: Object })
-], 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 && yt(o, e, s), s;
+  d({ type: Object })
+], f.prototype, "viewport", 2);
+f = m([
+  O("lit-flow")
+], f);
+var wt = Object.defineProperty, xt = Object.getOwnPropertyDescriptor, Z = (t, o, e, s) => {
+  for (var r = s > 1 ? void 0 : s ? xt(o, e) : o, i = t.length - 1, n; i >= 0; i--)
+    (n = t[i]) && (r = (s ? n(o, e, r) : n(r)) || r);
+  return s && r && wt(o, e, r), r;
 };
-let I = class extends D {
+let E = class extends P {
   constructor() {
-    super(), this.type = "source", this.position = L.Top, this.addEventListener("mousedown", (t) => this._onPointerDown(t)), this.addEventListener("touchstart", (t) => this._onPointerDown(t));
+    super(), this.type = "source", this.position = D.Top, this.addEventListener("mousedown", (t) => this._onPointerDown(t)), this.addEventListener("touchstart", (t) => this._onPointerDown(t));
   }
   createRenderRoot() {
     return this;
@@ -914,7 +1046,7 @@ let I = class extends D {
     (t.has("nodeId") || t.has("handleId") || t.has("type")) && this.setAttribute("data-id", `lit-flow-${this.nodeId || ""}-${this.handleId || ""}-${this.type}`);
   }
   render() {
-    return O`
+    return v`
       <div style="
         width: 100%;
         height: 100%;
@@ -925,27 +1057,27 @@ let I = class extends D {
     `;
   }
 };
-A([
-  a({ type: String, reflect: !0 })
-], I.prototype, "type", 2);
-A([
-  a({ type: String, reflect: !0, attribute: "data-handlepos" })
-], I.prototype, "position", 2);
-A([
-  a({ type: String, reflect: !0, attribute: "data-handleid" })
-], I.prototype, "handleId", 2);
-A([
-  a({ type: String, reflect: !0, attribute: "data-nodeid" })
-], 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;
+Z([
+  d({ type: String, reflect: !0 })
+], E.prototype, "type", 2);
+Z([
+  d({ type: String, reflect: !0, attribute: "data-handlepos" })
+], E.prototype, "position", 2);
+Z([
+  d({ type: String, reflect: !0, attribute: "data-handleid" })
+], E.prototype, "handleId", 2);
+Z([
+  d({ type: String, reflect: !0, attribute: "data-nodeid" })
+], E.prototype, "nodeId", 2);
+E = Z([
+  O("lit-handle")
+], E);
+var $t = Object.defineProperty, Pt = Object.getOwnPropertyDescriptor, Q = (t, o, e, s) => {
+  for (var r = s > 1 ? void 0 : s ? Pt(o, e) : o, i = t.length - 1, n; i >= 0; i--)
+    (n = t[i]) && (r = (s ? n(o, e, r) : n(r)) || r);
+  return s && r && $t(o, e, r), r;
 };
-let R = class extends E(D) {
+let Y = class extends j(P) {
   _zoomIn() {
     this.panZoom?.scaleBy(1.2);
   }
@@ -953,23 +1085,26 @@ let R = class extends E(D) {
     this.panZoom?.scaleBy(1 / 1.2);
   }
   _fitView() {
-    this.panZoom?.setViewport({ x: 0, y: 0, zoom: 1 });
+    this.dispatchEvent(new CustomEvent("fit-view", {
+      bubbles: !0,
+      composed: !0
+    }));
   }
   render() {
-    return O`
+    return v`
       <button @click="${this._zoomIn}" title="Zoom In">
         <svg viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
       </button>
       <button @click="${this._zoomOut}" title="Zoom Out">
         <svg viewBox="0 0 24 24"><path d="M19 13H5v-2h14v2z"/></svg>
       </button>
-      <button @click="${this._fitView}" title="Reset View">
-        <svg viewBox="0 0 24 24"><path d="M4 6h16v2H4zm0 5h16v2H4zm0 5h16v2H4z"/></svg>
+      <button @click="${this._fitView}" title="Fit View">
+        <svg viewBox="0 0 24 24"><path d="M6 16h12V8H6v8zm2-6h8v4H8v-4zM4 4h16v16H4V4zm2 2v12h12V6H6z"/></svg>
       </button>
     `;
   }
 };
-R.styles = B`
+Y.styles = A`
     :host {
       display: block;
       position: absolute;
@@ -1012,25 +1147,25 @@ R.styles = B`
       fill: currentColor;
     }
   `;
-G([
-  a({ type: Object })
-], 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;
+Q([
+  d({ type: Object })
+], Y.prototype, "panZoom", 2);
+Y = Q([
+  O("lit-controls")
+], Y);
+var Ot = Object.defineProperty, kt = Object.getOwnPropertyDescriptor, C = (t, o, e, s) => {
+  for (var r = s > 1 ? void 0 : s ? kt(o, e) : o, i = t.length - 1, n; i >= 0; i--)
+    (n = t[i]) && (r = (s ? n(o, e, r) : n(r)) || r);
+  return s && r && Ot(o, e, r), r;
 };
-let v = class extends E(D) {
+let x = class extends j(P) {
   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;
   }
   updated(t) {
     if (!this._minimapInstance && this.panZoom) {
       const o = this.shadowRoot?.querySelector("svg");
-      o && (this._minimapInstance = it({
+      o && (this._minimapInstance = pt({
         domNode: o,
         panZoom: this.panZoom,
         getTransform: () => this.transform,
@@ -1053,7 +1188,7 @@ let v = class extends E(D) {
       width: this.width / this.transform[2],
       height: this.height / this.transform[2]
     };
-    return this.nodeLookup.size > 0 ? at(lt(this.nodeLookup), t) : t;
+    return this.nodeLookup.size > 0 ? ct(ut(this.nodeLookup), t) : t;
   }
   render() {
     const t = this._getBoundingRect(), o = {
@@ -1061,22 +1196,22 @@ let v = class extends E(D) {
       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, 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`
+    }, e = 200, s = 150, r = t.width / e, i = t.height / s, n = Math.max(r, i), p = n * e, c = n * s, a = 5 * n, h = t.x - (p - t.width) / 2 - a, l = t.y - (c - t.height) / 2 - a, u = p + a * 2, y = c + a * 2;
+    return v`
       <svg
         width="${e}"
-        height="${r}"
-        viewBox="${c} ${d} ${f} ${g}"
+        height="${s}"
+        viewBox="${h} ${l} ${u} ${y}"
       >
-        ${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`
+        ${Array.from(this.nodeLookup.values()).map((b) => {
+      const { x: _, y: g } = b.internals.positionAbsolute, S = b.measured.width || 0, G = b.measured.height || 0;
+      return R`
             <rect
               class="minimap-node"
-              x="${$}"
-              y="${y}"
-              width="${Z}"
-              height="${U}"
+              x="${_}"
+              y="${g}"
+              width="${S}"
+              height="${G}"
               rx="2"
               ry="2"
             />
@@ -1084,14 +1219,14 @@ let v = class extends E(D) {
     })}
         <path
           class="minimap-mask"
-          d="M${c - l},${d - l}h${f + l * 2}v${g + l * 2}h${-f - l * 2}z
+          d="M${h - a},${l - a}h${u + a * 2}v${y + a * 2}h${-u - a * 2}z
              M${o.x},${o.y}h${o.width}v${o.height}h${-o.width}z"
         />
       </svg>
     `;
   }
 };
-v.styles = B`
+x.styles = A`
     :host {
       display: block;
       position: absolute;
@@ -1120,36 +1255,36 @@ v.styles = B`
       fill-rule: evenodd;
     }
   `;
-z([
-  a({ type: Object })
-], v.prototype, "panZoom", 2);
-z([
-  a({ type: Object })
-], v.prototype, "nodeLookup", 2);
-z([
-  a({ type: Array })
-], v.prototype, "transform", 2);
-z([
-  a({ type: Array })
-], v.prototype, "translateExtent", 2);
-z([
-  a({ type: Number })
-], v.prototype, "width", 2);
-z([
-  a({ type: Number })
-], v.prototype, "height", 2);
-z([
+C([
+  d({ type: Object })
+], x.prototype, "panZoom", 2);
+C([
+  d({ type: Object })
+], x.prototype, "nodeLookup", 2);
+C([
+  d({ type: Array })
+], x.prototype, "transform", 2);
+C([
+  d({ type: Array })
+], x.prototype, "translateExtent", 2);
+C([
+  d({ type: Number })
+], x.prototype, "width", 2);
+C([
+  d({ type: Number })
+], x.prototype, "height", 2);
+C([
   N()
-], v.prototype, "_minimapInstance", 2);
-v = z([
-  C("lit-minimap")
-], v);
-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;
+], x.prototype, "_minimapInstance", 2);
+x = C([
+  O("lit-minimap")
+], x);
+var zt = Object.defineProperty, It = Object.getOwnPropertyDescriptor, tt = (t, o, e, s) => {
+  for (var r = s > 1 ? void 0 : s ? It(o, e) : o, i = t.length - 1, n; i >= 0; i--)
+    (n = t[i]) && (r = (s ? n(o, e, r) : n(r)) || r);
+  return s && r && zt(o, e, r), r;
 };
-let H = class extends D {
+let T = class extends P {
   constructor() {
     super(...arguments), this.nodeTypes = [
       { type: "default", label: "Default Node" },
@@ -1161,11 +1296,11 @@ let H = class extends D {
     t.dataTransfer && (t.dataTransfer.setData("application/litflow", o), t.dataTransfer.effectAllowed = "move");
   }
   render() {
-    return O`
+    return v`
       <div class="sidebar-title">Node Palette</div>
       <div class="node-palette">
         ${this.nodeTypes.map(
-      (t) => O`
+      (t) => v`
             <div
               class="palette-item"
               draggable="true"
@@ -1179,9 +1314,9 @@ let H = class extends D {
     `;
   }
 };
-H.styles = [
-  F,
-  B`
+T.styles = [
+  J,
+  A`
     :host {
       display: block;
       width: 200px;
@@ -1229,21 +1364,189 @@ H.styles = [
     }
   `
 ];
-K([
-  a({ type: Array })
-], H.prototype, "nodeTypes", 2);
-H = K([
-  C("lit-sidebar")
-], H);
+tt([
+  d({ type: Array })
+], T.prototype, "nodeTypes", 2);
+T = tt([
+  O("lit-sidebar")
+], T);
+var Ct = Object.defineProperty, St = Object.getOwnPropertyDescriptor, V = (t, o, e, s) => {
+  for (var r = s > 1 ? void 0 : s ? St(o, e) : o, i = t.length - 1, n; i >= 0; i--)
+    (n = t[i]) && (r = (s ? n(o, e, r) : n(r)) || r);
+  return s && r && Ct(o, e, r), r;
+};
+let M = class extends P {
+  constructor() {
+    super(...arguments), this.nodeId = "", this._data = {}, this.prompt = "";
+  }
+  createRenderRoot() {
+    return this;
+  }
+  set data(t) {
+    this._data = t, t.prompt && (this.prompt = t.prompt);
+  }
+  get data() {
+    return this._data;
+  }
+  _onInput(t) {
+    const o = t.target;
+    this.prompt = o.value, this.dispatchEvent(new CustomEvent("node-data-change", {
+      bubbles: !0,
+      composed: !0,
+      detail: { id: this.nodeId, data: { prompt: this.prompt } }
+    }));
+  }
+  render() {
+    return v`
+      <div class="gemini-node prompt-node" style="
+        padding: 12px;
+        background: var(--md-sys-color-surface-container-high);
+        border-radius: 12px;
+        width: 200px;
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        border: 1px solid var(--md-sys-color-outline-variant);
+        text-align: left;
+      ">
+        <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 4px;">
+          <span style="font-size: 18px;">✨</span>
+          <span style="font-size: 12px; font-weight: bold; color: var(--md-sys-color-primary);">GEMINI PROMPT</span>
+        </div>
+        <textarea
+          style="
+            width: 100%;
+            height: 80px;
+            border-radius: 8px;
+            border: 1px solid var(--md-sys-color-outline);
+            padding: 8px;
+            font-family: inherit;
+            font-size: 12px;
+            resize: none;
+            box-sizing: border-box;
+            background: var(--md-sys-color-surface);
+            color: var(--md-sys-color-on-surface);
+          "
+          placeholder="Enter prompt..."
+          .value="${this.prompt}"
+          @input="${this._onInput}"
+        ></textarea>
+        <button
+          style="
+            width: 100%;
+            padding: 8px;
+            border-radius: 8px;
+            border: none;
+            background: var(--md-sys-color-primary);
+            color: var(--md-sys-color-on-primary);
+            font-size: 12px;
+            font-weight: bold;
+            cursor: pointer;
+          "
+          @click="${() => this.dispatchEvent(new CustomEvent("gemini-generate", { bubbles: !0, composed: !0, detail: { id: this.nodeId, prompt: this.prompt } }))}"
+        >
+          Generate
+        </button>
+        <lit-handle type="source" data-handlepos="${D.Bottom}" data-nodeid="${this.nodeId}"></lit-handle>
+      </div>
+    `;
+  }
+};
+V([
+  d({ type: String, attribute: "data-id", reflect: !0 })
+], M.prototype, "nodeId", 2);
+V([
+  d({ type: Object })
+], M.prototype, "data", 1);
+V([
+  d({ type: String })
+], M.prototype, "prompt", 2);
+M = V([
+  O("lit-gemini-prompt-node")
+], M);
+var Dt = Object.defineProperty, Et = Object.getOwnPropertyDescriptor, H = (t, o, e, s) => {
+  for (var r = s > 1 ? void 0 : s ? Et(o, e) : o, i = t.length - 1, n; i >= 0; i--)
+    (n = t[i]) && (r = (s ? n(o, e, r) : n(r)) || r);
+  return s && r && Dt(o, e, r), r;
+};
+let L = class extends P {
+  constructor() {
+    super(...arguments), this.nodeId = "", this._data = {}, this.imageUrl = "", this.status = "idle";
+  }
+  createRenderRoot() {
+    return this;
+  }
+  set data(t) {
+    this._data = t, t.imageUrl && (this.imageUrl = t.imageUrl), t.status && (this.status = t.status);
+  }
+  get data() {
+    return this._data;
+  }
+  render() {
+    return v`
+      <div class="gemini-node image-node" style="
+        padding: 12px;
+        background: var(--md-sys-color-surface-container-high);
+        border-radius: 12px;
+        width: 220px;
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        border: 1px solid var(--md-sys-color-outline-variant);
+        text-align: left;
+      ">
+        <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 4px;">
+          <span style="font-size: 18px;">🖼️</span>
+          <span style="font-size: 12px; font-weight: bold; color: var(--md-sys-color-secondary);">GEMINI IMAGE</span>
+        </div>
+        
+        <div style="
+          width: 100%;
+          height: 150px;
+          background: var(--md-sys-color-surface-container-lowest);
+          border-radius: 8px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          overflow: hidden;
+          border: 1px dashed var(--md-sys-color-outline);
+        ">
+          ${this.status === "loading" ? v`<div style="font-size: 12px; color: var(--md-sys-color-outline);">Generating...</div>` : this.imageUrl ? v`<img src="${this.imageUrl}" style="width: 100%; height: 100%; object-fit: cover;" />` : v`<div style="font-size: 12px; color: var(--md-sys-color-outline);">No image generated</div>`}
+        </div>
+
+        <lit-handle type="target" data-handlepos="${D.Top}" data-nodeid="${this.nodeId}"></lit-handle>
+      </div>
+    `;
+  }
+};
+H([
+  d({ type: String, attribute: "data-id", reflect: !0 })
+], L.prototype, "nodeId", 2);
+H([
+  d({ type: Object })
+], L.prototype, "data", 1);
+H([
+  d({ type: String })
+], L.prototype, "imageUrl", 2);
+H([
+  d({ type: String })
+], L.prototype, "status", 2);
+L = H([
+  O("lit-gemini-image-node")
+], L);
 export {
-  R as LitControls,
-  b as LitEdge,
-  u as LitFlow,
-  I as LitHandle,
-  v as LitMinimap,
-  _ as LitNode,
-  H as LitSidebar,
-  dt as createInitialState,
-  F as m3Tokens
+  Y as LitControls,
+  w as LitEdge,
+  f as LitFlow,
+  L as LitGeminiImageNode,
+  M as LitGeminiPromptNode,
+  E as LitHandle,
+  x as LitMinimap,
+  $ as LitNode,
+  T as LitSidebar,
+  ft as createInitialState,
+  J as m3Tokens
 };
 //# sourceMappingURL=litflow.js.map