@ghchinoy/litflow 0.2.8 → 0.3.0

package/dist/litflow.js

@@ -1,36 +1,37 @@
-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() {
+import { LitElement as x, html as m, svg as Z, css as B } from "lit";
+import { unsafeStatic as at, html as A } from "lit/static-html.js";
+import { property as d, customElement as w, query as st, state as M } from "lit/decorators.js";
+import { signal as G, SignalWatcher as H } from "@lit-labs/signals";
+import { infiniteExtent as dt, Position as D, getBezierPath as J, adoptUserNodes as lt, updateAbsolutePositions as q, PanOnScrollMode as pt, XYPanZoom as ct, XYDrag as ht, getHandlePosition as tt, getSmoothStepPath as et, getStraightPath as ut, XYHandle as mt, ConnectionMode as yt, XYMinimap as ft, getBoundsOfRects as gt, getInternalNodesBounds as vt } from "@xyflow/system";
+import { m3Tokens as Q } from "./theme.js";
+import { map as ot } from "lit/directives/map.js";
+function bt() {
   return {
-    nodes: X([]),
-    edges: X([]),
+    nodes: G([]),
+    edges: G([]),
     nodeLookup: /* @__PURE__ */ new Map(),
     parentLookup: /* @__PURE__ */ new Map(),
-    nodeExtent: st,
+    nodeExtent: dt,
     snapGrid: [15, 15],
     snapToGrid: !1,
     nodeOrigin: [0, 0],
     multiSelectionActive: !1,
-    transform: X([0, 0, 1]),
+    transform: G([0, 0, 1]),
     autoPanOnNodeDrag: !0,
     nodesDraggable: !0,
     selectNodesOnDrag: !0,
     nodeDragThreshold: 0,
     panZoom: null,
     domNode: null,
-    connectionInProgress: X(null)
+    connectionInProgress: G(null)
   };
 }
-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;
+var _t = Object.defineProperty, xt = Object.getOwnPropertyDescriptor, k = (t, s, e, r) => {
+  for (var o = r > 1 ? void 0 : r ? xt(s, e) : s, i = t.length - 1, n; i >= 0; i--)
+    (n = t[i]) && (o = (r ? n(s, e, o) : n(o)) || o);
+  return r && o && _t(s, e, o), o;
 };
-let $ = class extends j(P) {
+let P = class extends H(x) {
   constructor() {
     super(...arguments), this.label = "", this.type = "default", this.data = {}, this.selected = !1, this.nodeId = "", this.positionX = 0, this.positionY = 0;
   }
@@ -38,49 +39,49 @@ let $ = class extends j(P) {
     return this;
   }
   render() {
-    return v`
+    return m`
       <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" ? 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>` : ""}
+      ${this.type === "input" || this.type === "default" ? m`<lit-handle type="source" data-handlepos="bottom" data-nodeid="${this.nodeId}"></lit-handle>` : ""}
+      ${this.type === "output" || this.type === "default" ? m`<lit-handle type="target" data-handlepos="top" data-nodeid="${this.nodeId}"></lit-handle>` : ""}
     `;
   }
 };
-z([
+k([
   d({ type: String })
-], $.prototype, "label", 2);
-z([
+], P.prototype, "label", 2);
+k([
   d({ type: String, reflect: !0 })
-], $.prototype, "type", 2);
-z([
+], P.prototype, "type", 2);
+k([
   d({ type: Object })
-], $.prototype, "data", 2);
-z([
+], P.prototype, "data", 2);
+k([
   d({ type: Boolean, reflect: !0 })
-], $.prototype, "selected", 2);
-z([
+], P.prototype, "selected", 2);
+k([
   d({ type: String, attribute: "data-id", reflect: !0 })
-], $.prototype, "nodeId", 2);
-z([
+], P.prototype, "nodeId", 2);
+k([
   d({ type: Number, attribute: "position-x" })
-], $.prototype, "positionX", 2);
-z([
+], P.prototype, "positionX", 2);
+k([
   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;
+], P.prototype, "positionY", 2);
+P = k([
+  w("lit-node")
+], P);
+var wt = Object.defineProperty, $t = Object.getOwnPropertyDescriptor, z = (t, s, e, r) => {
+  for (var o = r > 1 ? void 0 : r ? $t(s, e) : s, i = t.length - 1, n; i >= 0; i--)
+    (n = t[i]) && (o = (r ? n(s, e, o) : n(o)) || o);
+  return r && o && wt(s, e, o), o;
 };
-let w = class extends j(P) {
+let $ = class extends H(x) {
   constructor() {
     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] = W({
+    const [t] = J({
       sourceX: this.sourceX,
       sourceY: this.sourceY,
       sourcePosition: this.sourcePosition,
@@ -88,12 +89,12 @@ let w = class extends j(P) {
       targetY: this.targetY,
       targetPosition: this.targetPosition
     });
-    return R`
+    return Z`
       <path d="${t}" />
     `;
   }
 };
-w.styles = A`
+$.styles = B`
     :host {
       display: contents;
     }
@@ -108,52 +109,52 @@ w.styles = A`
       stroke: #555;
     }
   `;
-I([
+z([
   d({ type: Number })
-], w.prototype, "sourceX", 2);
-I([
+], $.prototype, "sourceX", 2);
+z([
   d({ type: Number })
-], w.prototype, "sourceY", 2);
-I([
+], $.prototype, "sourceY", 2);
+z([
   d({ type: Number })
-], w.prototype, "targetX", 2);
-I([
+], $.prototype, "targetX", 2);
+z([
   d({ type: Number })
-], w.prototype, "targetY", 2);
-I([
+], $.prototype, "targetY", 2);
+z([
   d({ type: String })
-], w.prototype, "sourcePosition", 2);
-I([
+], $.prototype, "sourcePosition", 2);
+z([
   d({ type: String })
-], w.prototype, "targetPosition", 2);
-I([
+], $.prototype, "targetPosition", 2);
+z([
   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;
+], $.prototype, "selected", 2);
+$ = z([
+  w("lit-edge")
+], $);
+var Ot = Object.defineProperty, Pt = Object.getOwnPropertyDescriptor, f = (t, s, e, r) => {
+  for (var o = r > 1 ? void 0 : r ? Pt(s, e) : s, i = t.length - 1, n; i >= 0; i--)
+    (n = t[i]) && (o = (r ? n(s, e, o) : n(o)) || o);
+  return r && o && Ot(s, e, o), o;
 };
-const k = {
+const S = {
   fromAttribute: (t) => t !== "false" && t !== null,
   toAttribute: (t) => t ? "" : null
 };
-let f = class extends j(P) {
+let y = class extends H(x) {
   constructor() {
-    super(...arguments), this._drags = /* @__PURE__ */ new Map(), this._state = ft(), this.nodeTypes = {
+    super(...arguments), this._drags = /* @__PURE__ */ new Map(), this._state = bt(), 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.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), rt(t, this._state.nodeLookup, this._state.parentLookup, {
+    this._state.nodes.set(t), lt(t, this._state.nodeLookup, this._state.parentLookup, {
       nodeOrigin: this._state.nodeOrigin,
       nodeExtent: this._state.nodeExtent
-    }), U(this._state.nodeLookup, this._state.parentLookup, {
+    }), q(this._state.nodeLookup, this._state.parentLookup, {
       nodeOrigin: this._state.nodeOrigin,
       nodeExtent: this._state.nodeExtent
     }), this._notifyChange();
@@ -175,7 +176,7 @@ let f = class extends j(P) {
     if (this.nodes.length > 0) return;
     const t = Array.from(this.querySelectorAll("lit-node"));
     if (t.length > 0) {
-      const o = t.map((e) => ({
+      const s = t.map((e) => ({
         id: e.id || e.getAttribute("id") || `node-${Math.random().toString(36).substr(2, 9)}`,
         type: e.type || e.getAttribute("type") || "default",
         position: {
@@ -187,8 +188,8 @@ let f = class extends j(P) {
           ...e.data
         }
       }));
-      this.nodes = o, t.forEach((e, s) => {
-        e.nodeId = o[s].id;
+      this.nodes = s, t.forEach((e, r) => {
+        e.nodeId = s[r].id;
       });
     }
   }
@@ -200,56 +201,56 @@ let f = class extends j(P) {
   }
   connectedCallback() {
     super.connectedCallback(), this._discoverNodes(), this._resizeObserver = new ResizeObserver((t) => {
-      for (const o of t)
-        if (o.target === this)
-          this._width = o.contentRect.width, this._height = o.contentRect.height;
-        else if (o.target !== this._renderer) {
-          const e = o.target.dataset.id;
-          e && this._updateNodeDimensions(e, o.target);
+      for (const s of t)
+        if (s.target === this)
+          this._width = s.contentRect.width, this._height = s.contentRect.height;
+        else if (s.target !== this._renderer) {
+          const e = s.target.dataset.id;
+          e && this._updateNodeDimensions(e, s.target);
         }
     }), this._resizeObserver.observe(this);
   }
   disconnectedCallback() {
     super.disconnectedCallback(), this._resizeObserver?.disconnect();
   }
-  async _updateNodeDimensions(t, o) {
+  async _updateNodeDimensions(t, s) {
     const e = this._state.nodeLookup.get(t);
     if (e) {
-      "updateComplete" in o && await o.updateComplete;
-      const { width: s, height: r } = o.getBoundingClientRect(), i = this._state.transform.get()[2];
+      "updateComplete" in s && await s.updateComplete;
+      const { width: r, height: o } = s.getBoundingClientRect(), i = this._state.transform.get()[2];
       e.measured = {
-        width: s / i,
-        height: r / i
+        width: r / i,
+        height: o / i
       };
-      const n = this.nodes.find((c) => c.id === t);
+      const n = this.nodes.find((h) => h.id === t);
       n && (n.measured = e.measured);
-      const p = o.querySelectorAll("lit-handle");
-      if (p && p.length > 0) {
-        const c = [], a = [];
-        p.forEach((h) => {
-          const l = h.getBoundingClientRect(), u = o.getBoundingClientRect(), y = {
-            id: h.handleId || null,
-            type: h.type,
-            position: h.position,
+      const c = s.querySelectorAll("lit-handle");
+      if (c && c.length > 0) {
+        const h = [], a = [];
+        c.forEach((p) => {
+          const l = p.getBoundingClientRect(), u = s.getBoundingClientRect(), g = {
+            id: p.handleId || p.getAttribute("data-handleid") || null,
+            type: p.type || p.getAttribute("type"),
+            position: p.position || p.getAttribute("data-handlepos"),
             x: (l.left - u.left) / i,
             y: (l.top - u.top) / i,
             width: l.width / i,
             height: l.height / i
           };
-          h.type === "source" ? c.push(y) : a.push(y);
+          p.type === "source" ? h.push(g) : a.push(g);
         }), e.internals.handleBounds = {
-          source: c,
+          source: h,
           target: a
         }, console.log(`Node ${t} handleBounds:`, e.internals.handleBounds);
       }
-      U(this._state.nodeLookup, this._state.parentLookup, {
+      q(this._state.nodeLookup, this._state.parentLookup, {
         nodeOrigin: this._state.nodeOrigin,
         nodeExtent: this._state.nodeExtent
       }), this._state.nodes.set([...this.nodes]), this._notifyChange();
     }
   }
-  _selectNode(t, o) {
-    const e = this.nodes.map((s) => s.id === t ? { ...s, selected: !s.selected } : o ? s : { ...s, selected: !1 });
+  _selectNode(t, s) {
+    const e = this.nodes.map((r) => r.id === t ? { ...r, selected: !r.selected } : s ? r : { ...r, selected: !1 });
     this.nodes = e;
   }
   /**
@@ -257,10 +258,10 @@ let f = class extends j(P) {
    * Useful for Drag & Drop and context menus.
    */
   project(t) {
-    const [o, e, s] = this._state.transform.get();
+    const [s, e, r] = this._state.transform.get();
     return {
-      x: (t.x - o) / s,
-      y: (t.y - e) / s
+      x: (t.x - s) / r,
+      y: (t.y - e) / r
     };
   }
   /**
@@ -269,17 +270,17 @@ let f = class extends j(P) {
    */
   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 s = Array.from(this._state.nodeLookup.values());
+    if (s.length === 0) return;
+    let e = 1 / 0, r = 1 / 0, o = -1 / 0, i = -1 / 0;
+    s.forEach((b) => {
+      const { x: v, y: C } = b.internals.positionAbsolute, F = b.measured.width || 0, nt = b.measured.height || 0;
+      e = Math.min(e, v), r = Math.min(r, C), o = Math.max(o, v + F), i = Math.max(i, C + nt);
     });
-    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 });
+    const n = o - e, c = i - r, h = this.offsetWidth, a = this.offsetHeight;
+    if (h === 0 || a === 0) return;
+    const p = (h - t * 2) / n, l = (a - t * 2) / c, u = Math.min(p, l, 1), g = (h - n * u) / 2 - e * u, _ = (a - c * u) / 2 - r * u;
+    await this._panZoom.setViewport({ x: g, y: _, zoom: u }, { duration: 400 });
   }
   _updatePanZoom(t = !1) {
     this._panZoom && this._panZoom.update({
@@ -288,7 +289,7 @@ let f = class extends j(P) {
       preventScrolling: !0,
       panOnScroll: !1,
       panOnDrag: this.panOnDrag,
-      panOnScrollMode: it.Free,
+      panOnScrollMode: pt.Free,
       panOnScrollSpeed: 0.5,
       userSelectionActive: t,
       zoomOnPinch: this.zoomOnPinch,
@@ -303,7 +304,7 @@ let f = class extends j(P) {
     });
   }
   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({
+    this._renderer && (this._state.domNode = this._renderer, this._resizeObserver?.observe(this._renderer), this._renderer.addEventListener("pointerdown", (t) => this._onPointerDown(t), { capture: !0 }), this._panZoom = ct({
       domNode: this._renderer,
       minZoom: 0.5,
       maxZoom: 2,
@@ -311,8 +312,8 @@ let f = class extends j(P) {
       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})`);
+      onPanZoom: (t, { x: s, y: e, zoom: r }) => {
+        this.viewport = { x: s, y: e, zoom: r }, this._state.transform.set([s, e, r]), this._viewport && (this._viewport.style.transform = `translate(${s}px,${e}px) scale(${r})`);
       }
     }), this._updatePanZoom(), this._state.panZoom = this._panZoom);
   }
@@ -320,44 +321,44 @@ let f = class extends j(P) {
     (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();
+    const t = this.shadowRoot?.querySelectorAll(".xyflow__node"), s = /* @__PURE__ */ new Set();
     t?.forEach((e) => {
-      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);
+      const r = e.dataset.id;
+      if (r) {
+        if (s.add(r), this._resizeObserver?.observe(e), e.onclick = (i) => {
+          i.stopPropagation(), this._selectNode(r, i.shiftKey || i.metaKey);
         }, e.style.cursor = this.nodesDraggable ? "grab" : "default", !this.nodesDraggable) {
-          this._drags.delete(s);
+          this._drags.delete(r);
           return;
         }
-        let r = this._drags.get(s);
-        r || (r = at({
+        let o = this._drags.get(r);
+        o || (o = ht({
           getStoreItems: () => ({
             ...this._state,
             nodes: this._state.nodes.get(),
             edges: this._state.edges.get(),
             transform: this._state.transform.get(),
             panBy: async (i) => {
-              const { panZoom: n, nodeExtent: p } = this._state, c = this._state.transform.get();
+              const { panZoom: n, nodeExtent: c } = this._state, h = this._state.transform.get();
               return n ? !!await n.setViewportConstrained(
                 {
-                  x: c[0] + i.x,
-                  y: c[1] + i.y,
-                  zoom: c[2]
+                  x: h[0] + i.x,
+                  y: h[1] + i.y,
+                  zoom: h[2]
                 },
                 [[0, 0], [this.offsetWidth, this.offsetHeight]],
-                p
+                c
               ) : !1;
             },
             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);
+              i.forEach((n, c) => {
+                const h = this._state.nodeLookup.get(c);
+                if (h) {
+                  h.position = n.position, h.internals.positionAbsolute = n.internals.positionAbsolute;
+                  const a = this.nodes.find((p) => p.id === c);
                   a && (a.position = n.position);
                 }
-              }), U(this._state.nodeLookup, this._state.parentLookup, {
+              }), q(this._state.nodeLookup, this._state.parentLookup, {
                 nodeOrigin: this._state.nodeOrigin,
                 nodeExtent: this._state.nodeExtent
               }), this._state.nodes.set([...this.nodes]), this._notifyChange();
@@ -365,33 +366,33 @@ let f = class extends j(P) {
             unselectNodesAndEdges: () => {
             }
           })
-        }), this._drags.set(s, r)), r.update({
+        }), this._drags.set(r, o)), o.update({
           domNode: e,
-          nodeId: s
+          nodeId: r
         });
       }
     });
     for (const e of this._drags.keys())
-      o.has(e) || this._drags.delete(e);
+      s.has(e) || this._drags.delete(e);
   }
   _renderEdge(t) {
-    const o = this._state.nodeLookup.get(t.source), e = this._state.nodeLookup.get(t.target);
-    if (!o || !e) return 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] || {
+    const s = this._state.nodeLookup.get(t.source), e = this._state.nodeLookup.get(t.target);
+    if (!s || !e) return null;
+    const r = this.nodes.find((v) => v.id === t.source), o = this.nodes.find((v) => v.id === t.target);
+    if (r?.hidden || o?.hidden) return null;
+    const i = (s.internals.handleBounds?.source || []).find(
+      (v) => v.id === (t.sourceHandle || null)
+    ) || s.internals.handleBounds?.source?.[0] || {
       id: null,
       type: "source",
       nodeId: t.source,
       position: D.Bottom,
-      x: (o.measured.width || 0) / 2,
-      y: o.measured.height || 0,
+      x: (s.measured.width || 0) / 2,
+      y: s.measured.height || 0,
       width: 1,
       height: 1
     }, n = (e.internals.handleBounds?.target || []).find(
-      (g) => g.id === (t.targetHandle || null)
+      (v) => v.id === (t.targetHandle || null)
     ) || e.internals.handleBounds?.target?.[0] || {
       id: null,
       type: "target",
@@ -401,51 +402,51 @@ let f = class extends j(P) {
       y: 0,
       width: 1,
       height: 1
-    }, p = K(o, i, i.position, !0), c = K(e, n, n.position, !0);
-    let a = "", h = 0, l = 0;
+    }, c = tt(s, i, i.position, !0), h = tt(e, n, n.position, !0);
+    let a = "", p = 0, l = 0;
     const u = {
-      sourceX: p.x,
-      sourceY: p.y,
+      sourceX: c.x,
+      sourceY: c.y,
       sourcePosition: i.position,
-      targetX: c.x,
-      targetY: c.y,
+      targetX: h.x,
+      targetY: h.y,
       targetPosition: n.position
     };
     switch (t.type) {
       case "straight":
-        [a, h, l] = dt(u);
+        [a, p, l] = ut(u);
         break;
       case "smoothstep":
-        [a, h, l] = F(u);
+        [a, p, l] = et(u);
         break;
       case "step":
-        [a, h, l] = F({ ...u, borderRadius: 0 });
+        [a, p, l] = et({ ...u, borderRadius: 0 });
         break;
       default:
-        [a, h, l] = W(u);
+        [a, p, l] = J(u);
         break;
     }
-    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`
+    const g = (v) => {
+      if (!v) return null;
+      const C = typeof v == "string" ? v : v.type;
+      return C ? `lit-flow__${C}${t.selected ? "-selected" : ""}` : null;
+    }, _ = g(t.markerEnd), b = g(t.markerStart);
+    return Z`
       <g class="xyflow__edge">
         <path
           d="${a}"
           fill="none"
           stroke="${t.selected ? "var(--md-sys-color-primary)" : "var(--md-sys-color-outline-variant)"}"
           stroke-width="${t.selected ? "3" : "2"}"
-          marker-end="${b ? `url(#${b})` : ""}"
-          marker-start="${_ ? `url(#${_})` : ""}"
+          marker-end="${_ ? `url(#${_})` : ""}"
+          marker-start="${b ? `url(#${b})` : ""}"
           style="pointer-events: none; transition: stroke 0.2s ease-in-out, stroke-width 0.2s ease-in-out;"
         />
-        ${t.label ? R`
+        ${t.label ? Z`
             <foreignObject
               width="100"
               height="30"
-              x="${h - 50}"
+              x="${p - 50}"
               y="${l - 15}"
               requiredExtensions="http://www.w3.org/1999/xhtml"
             >
@@ -461,20 +462,20 @@ let f = class extends j(P) {
     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) {
+    const s = this._isPaneClick(t.target), e = t.shiftKey || this.selectionMode === "select";
+    if (s && e) {
       console.log("LitFlow: Selection started", { x: t.clientX, y: t.clientY, shift: t.shiftKey });
-      const s = this._renderer.getBoundingClientRect();
+      const r = this._renderer.getBoundingClientRect();
       this._selectionStart = {
-        x: t.clientX - s.left,
-        y: t.clientY - s.top
+        x: t.clientX - r.left,
+        y: t.clientY - r.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);
+      const s = this._renderer.getBoundingClientRect(), e = t.clientX - s.left, r = t.clientY - s.top, o = Math.min(this._selectionStart.x, e), i = Math.min(this._selectionStart.y, r), n = Math.abs(this._selectionStart.x - e), c = Math.abs(this._selectionStart.y - r);
+      this._selectionRect = { x: o, y: i, width: n, height: c }, this._performSelection(t.shiftKey);
     }
   }
   _onPointerUp(t) {
@@ -482,29 +483,29 @@ let f = class extends j(P) {
   }
   _performSelection(t) {
     if (!this._selectionRect) return;
-    const o = this.project({ x: this._selectionRect.x, y: this._selectionRect.y }), e = this.project({
+    const s = 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)
+    }), r = {
+      x: Math.min(s.x, e.x),
+      y: Math.min(s.y, e.y),
+      width: Math.abs(s.x - e.x),
+      height: Math.abs(s.y - e.y)
     };
-    let r = !1;
+    let o = !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;
+      const p = this._state.nodeLookup.get(a.id);
+      if (!p) return a;
+      const l = p.internals.positionAbsolute, u = p.measured.width || 0, g = p.measured.height || 0, b = l.x >= r.x && l.y >= r.y && l.x + u <= r.x + r.width && l.y + g <= r.y + r.height || t && a.selected;
+      return b !== !!a.selected ? (o = !0, { ...a, selected: b }) : a;
     });
-    r && (this.nodes = i);
+    o && (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;
+    const c = new Map(i.map((a) => [a.id, !!a.selected])), h = this.edges.map((a) => {
+      const p = c.get(a.source), l = c.get(a.target), g = p && l || t && a.selected;
+      return g !== !!a.selected ? (n = !0, { ...a, selected: g }) : a;
     });
-    n && (this.edges = c), (r || n) && this.dispatchEvent(new CustomEvent("selection-change", {
+    n && (this.edges = h), (o || n) && this.dispatchEvent(new CustomEvent("selection-change", {
       detail: {
         nodes: this.nodes.filter((a) => a.selected),
         edges: this.edges.filter((a) => a.selected)
@@ -512,27 +513,27 @@ let f = class extends j(P) {
     }));
   }
   _onHandlePointerDown(t) {
-    const { event: o, handleId: e, nodeId: s, type: r, handleDomNode: i } = t.detail, n = r === "target";
+    const { event: s, handleId: e, nodeId: r, type: o, handleDomNode: i } = t.detail, n = o === "target";
     if (this._state.connectionInProgress.get() || !this.nodesConnectable)
       return;
-    const p = i.getBoundingClientRect(), c = i.parentElement?.getBoundingClientRect(), a = this._state.transform.get()[2], h = {
+    const c = i.getBoundingClientRect(), h = i.parentElement?.getBoundingClientRect(), a = this._state.transform.get()[2], p = {
       id: e,
-      nodeId: s,
-      type: r,
+      nodeId: r,
+      type: o,
       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
+      x: (c.left - (h?.left ?? 0)) / a,
+      y: (c.top - (h?.top ?? 0)) / a,
+      width: c.width / a,
+      height: c.height / a
     };
-    lt.onPointerDown(o, {
+    mt.onPointerDown(s, {
       handleId: e,
-      nodeId: s,
+      nodeId: r,
       isTarget: n,
       domNode: this._renderer,
       handleDomNode: i,
       nodeLookup: this._state.nodeLookup,
-      connectionMode: ht.Strict,
+      connectionMode: yt.Strict,
       lib: "lit",
       autoPanOnConnect: !0,
       flowId: "lit-flow",
@@ -546,7 +547,7 @@ let f = class extends j(P) {
         }), !0) : !1;
       },
       getTransform: () => this._state.transform.get(),
-      getFromHandle: () => h,
+      getFromHandle: () => p,
       updateConnection: (l) => {
         l.inProgress ? this._state.connectionInProgress.set(l) : this._state.connectionInProgress.set(null);
       },
@@ -568,24 +569,24 @@ let f = class extends j(P) {
   }
   _onDrop(t) {
     t.preventDefault();
-    const o = t.dataTransfer?.getData("application/litflow");
-    if (typeof o > "u" || !o)
+    const s = t.dataTransfer?.getData("application/litflow");
+    if (typeof s > "u" || !s)
       return;
-    const e = this.getBoundingClientRect(), s = this.project({
+    const e = this.getBoundingClientRect(), r = this.project({
       x: t.clientX - e.left,
       y: t.clientY - e.top
     });
-    let r = `${o} node`;
+    let o = `${s} node`;
     if (this.promptOnDrop) {
-      const n = window.prompt("Enter node label:", r);
+      const n = window.prompt("Enter node label:", o);
       if (n === null) return;
-      r = n || r;
+      o = n || o;
     }
     const i = {
       id: `node_${Date.now()}`,
-      type: o,
-      position: s,
-      data: { label: r }
+      type: s,
+      position: r,
+      data: { label: o }
     };
     this.nodes = [...this.nodes, i], this.dispatchEvent(new CustomEvent("node-drop", {
       detail: { node: i, event: t }
@@ -593,7 +594,7 @@ let f = class extends j(P) {
   }
   _renderConnectionLine(t) {
     if (!t) return null;
-    const [o] = W({
+    const [s] = J({
       sourceX: t.from.x,
       sourceY: t.from.y,
       sourcePosition: t.fromPosition,
@@ -601,10 +602,10 @@ let f = class extends j(P) {
       targetY: t.to.y,
       targetPosition: t.toPosition
     });
-    return R`
+    return Z`
       <path
         class="xyflow__connection-path"
-        d="${o}"
+        d="${s}"
         fill="none"
         stroke="#b1b1b7"
         stroke-width="2"
@@ -615,13 +616,13 @@ let f = class extends j(P) {
   _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));
+        const s = this.nodes.filter((r) => r.selected), e = this.edges.filter((r) => r.selected);
+        if (s.length > 0 || e.length > 0) {
+          const r = new Set(s.map((i) => i.id)), o = 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 }
+            (r.has(i.source) || r.has(i.target)) && o.add(i.id);
+          }), this.nodes = this.nodes.filter((i) => !r.has(i.id)), this.edges = this.edges.filter((i) => !o.has(i.id)), this.dispatchEvent(new CustomEvent("nodes-delete", {
+            detail: { nodes: s }
           })), this.dispatchEvent(new CustomEvent("edges-delete", {
             detail: { edges: e }
           }));
@@ -629,23 +630,23 @@ let f = class extends j(P) {
       }
       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 = {
+        const e = t.shiftKey ? 10 : 1, r = {
           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,
+        this.nodes = this.nodes.map((o) => o.selected ? {
+          ...o,
           position: {
-            x: r.position.x + s.x,
-            y: r.position.y + s.y
+            x: o.position.x + r.x,
+            y: o.position.y + r.y
           }
-        } : r);
+        } : o);
       }
     }
   }
   render() {
-    const t = this._state.transform.get(), o = this._state.connectionInProgress.get();
-    return B`
+    const t = this._state.transform.get(), s = this._state.connectionInProgress.get();
+    return A`
       <div 
         class="xyflow__renderer ${this.showGrid ? "has-grid" : ""}"
         tabindex="0"
@@ -655,7 +656,7 @@ let f = class extends j(P) {
         @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 })));
+      this._isPaneClick(e.target) && (this.nodes = this.nodes.map((r) => ({ ...r, selected: !1 })), this.edges = this.edges.map((r) => ({ ...r, selected: !1 })));
     }}"
       >
         <div
@@ -665,14 +666,14 @@ let f = class extends j(P) {
           <div class="xyflow__nodes" @handle-pointer-down="${this._onHandlePointerDown}">
             ${this.nodes.map((e) => {
       if (e.hidden) return null;
-      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`
+      const o = this._state.nodeLookup.get(e.id)?.internals.positionAbsolute || e.position, i = this.nodeTypes[e.type || "default"] || this.nodeTypes.default, n = at(i), c = e.style || {}, h = Object.entries(c).map(([_, b]) => `${_.replace(/([A-Z])/g, "-$1").toLowerCase()}: ${typeof b == "number" ? `${b}px` : b}`).join("; "), a = e.width || c.width, p = e.height || c.height, l = a ? `width: ${typeof a == "number" ? `${a}px` : a};` : "", u = p ? `height: ${typeof p == "number" ? `${p}px` : p};` : "", g = e.zIndex ? `z-index: ${e.zIndex};` : "";
+      return A`
                 <${n}
                   class="xyflow__node"
                   data-id="${e.id}"
                   type="${e.type || "default"}"
                   .nodeId="${e.id}"
-                  style="transform: translate(${r.x}px, ${r.y}px); ${c} ${l} ${u} ${y}"
+                  style="transform: translate(${o.x}px, ${o.y}px); ${h} ${l} ${u} ${g}"
                   .data="${e.data}"
                   .label="${e.data.label}"
                   .type="${e.type || "default"}"
@@ -687,7 +688,7 @@ let f = class extends j(P) {
               <marker
                 id="lit-flow__arrow"
                 viewBox="0 0 10 10"
-                refX="5"
+                refX="9"
                 refY="5"
                 markerWidth="6"
                 markerHeight="6"
@@ -698,7 +699,7 @@ let f = class extends j(P) {
               <marker
                 id="lit-flow__arrowclosed"
                 viewBox="0 0 10 10"
-                refX="5"
+                refX="9"
                 refY="5"
                 markerWidth="6"
                 markerHeight="6"
@@ -709,7 +710,7 @@ let f = class extends j(P) {
               <marker
                 id="lit-flow__arrow-selected"
                 viewBox="0 0 10 10"
-                refX="5"
+                refX="9"
                 refY="5"
                 markerWidth="6"
                 markerHeight="6"
@@ -720,7 +721,7 @@ let f = class extends j(P) {
               <marker
                 id="lit-flow__arrowclosed-selected"
                 viewBox="0 0 10 10"
-                refX="5"
+                refX="9"
                 refY="5"
                 markerWidth="6"
                 markerHeight="6"
@@ -730,18 +731,18 @@ let f = class extends j(P) {
               </marker>
             </defs>
             ${this.edges.map((e) => this._renderEdge(e))}
-            ${this._renderConnectionLine(o)}
+            ${this._renderConnectionLine(s)}
           </svg>
         </div>
-        ${this._selectionRect ? B`
+        ${this._selectionRect ? A`
             <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 ? B`<lit-controls .panZoom="${this._panZoom}" @fit-view="${() => this.fitView()}"></lit-controls>` : ""}
-      ${this.showMinimap ? B`
+      ${this.showControls ? A`<lit-controls .panZoom="${this._panZoom}" @fit-view="${() => this.fitView()}"></lit-controls>` : ""}
+      ${this.showMinimap ? A`
             <lit-minimap
               .panZoom="${this._panZoom}"
               .nodeLookup="${this._state.nodeLookup}"
@@ -755,9 +756,9 @@ let f = class extends j(P) {
     `;
   }
 };
-f.styles = [
-  J,
-  A`
+y.styles = [
+  Q,
+  B`
     :host {
       display: block;
       width: 100%;
@@ -839,6 +840,16 @@ f.styles = [
       pointer-events: all;
     }
 
+    /* Remove default styling for schema nodes which handle their own layout */
+    .xyflow__node[type="schema"],
+    .xyflow__node[type="gemini-prompt"],
+    .xyflow__node[type="gemini-image"] {
+      padding: 0;
+      border: none;
+      background: none;
+      box-shadow: none;
+    }
+
     .xyflow__node[selected] {
       border-color: var(--lit-flow-node-selected-border);
       border-width: 3px;
@@ -943,81 +954,81 @@ f.styles = [
     }
   `
 ];
-m([
-  q(".xyflow__renderer")
-], f.prototype, "_renderer", 2);
-m([
-  q(".xyflow__viewport")
-], f.prototype, "_viewport", 2);
-m([
-  N()
-], f.prototype, "_panZoom", 2);
-m([
-  N()
-], f.prototype, "_state", 2);
-m([
+f([
+  st(".xyflow__renderer")
+], y.prototype, "_renderer", 2);
+f([
+  st(".xyflow__viewport")
+], y.prototype, "_viewport", 2);
+f([
+  M()
+], y.prototype, "_panZoom", 2);
+f([
+  M()
+], y.prototype, "_state", 2);
+f([
   d({ type: Object })
-], f.prototype, "nodeTypes", 2);
-m([
+], y.prototype, "nodeTypes", 2);
+f([
   d({ type: Boolean, attribute: "show-controls", reflect: !0 })
-], f.prototype, "showControls", 2);
-m([
-  d({ type: Boolean, attribute: "show-minimap", reflect: !0, converter: k })
-], f.prototype, "showMinimap", 2);
-m([
-  d({ type: Boolean, attribute: "show-grid", reflect: !0, converter: k })
-], f.prototype, "showGrid", 2);
-m([
-  d({ type: Boolean, attribute: "nodes-draggable", reflect: !0, converter: k })
-], f.prototype, "nodesDraggable", 2);
-m([
-  d({ type: Boolean, attribute: "nodes-connectable", reflect: !0, converter: k })
-], f.prototype, "nodesConnectable", 2);
-m([
-  d({ type: Boolean, attribute: "pan-on-drag", reflect: !0, converter: k })
-], f.prototype, "panOnDrag", 2);
-m([
-  d({ type: Boolean, attribute: "zoom-on-scroll", reflect: !0, converter: k })
-], f.prototype, "zoomOnScroll", 2);
-m([
-  d({ type: Boolean, attribute: "zoom-on-pinch", reflect: !0, converter: k })
-], f.prototype, "zoomOnPinch", 2);
-m([
-  d({ type: Boolean, attribute: "zoom-on-double-click", reflect: !0, converter: k })
-], f.prototype, "zoomOnDoubleClick", 2);
-m([
-  d({ type: Boolean, attribute: "prompt-on-drop", reflect: !0, converter: k })
-], f.prototype, "promptOnDrop", 2);
-m([
+], y.prototype, "showControls", 2);
+f([
+  d({ type: Boolean, attribute: "show-minimap", reflect: !0, converter: S })
+], y.prototype, "showMinimap", 2);
+f([
+  d({ type: Boolean, attribute: "show-grid", reflect: !0, converter: S })
+], y.prototype, "showGrid", 2);
+f([
+  d({ type: Boolean, attribute: "nodes-draggable", reflect: !0, converter: S })
+], y.prototype, "nodesDraggable", 2);
+f([
+  d({ type: Boolean, attribute: "nodes-connectable", reflect: !0, converter: S })
+], y.prototype, "nodesConnectable", 2);
+f([
+  d({ type: Boolean, attribute: "pan-on-drag", reflect: !0, converter: S })
+], y.prototype, "panOnDrag", 2);
+f([
+  d({ type: Boolean, attribute: "zoom-on-scroll", reflect: !0, converter: S })
+], y.prototype, "zoomOnScroll", 2);
+f([
+  d({ type: Boolean, attribute: "zoom-on-pinch", reflect: !0, converter: S })
+], y.prototype, "zoomOnPinch", 2);
+f([
+  d({ type: Boolean, attribute: "zoom-on-double-click", reflect: !0, converter: S })
+], y.prototype, "zoomOnDoubleClick", 2);
+f([
+  d({ type: Boolean, attribute: "prompt-on-drop", reflect: !0, converter: S })
+], y.prototype, "promptOnDrop", 2);
+f([
   d({ type: String, attribute: "selection-mode" })
-], f.prototype, "selectionMode", 2);
-m([
-  N()
-], f.prototype, "_selectionRect", 2);
-m([
-  N()
-], f.prototype, "_width", 2);
-m([
-  N()
-], f.prototype, "_height", 2);
-m([
+], y.prototype, "selectionMode", 2);
+f([
+  M()
+], y.prototype, "_selectionRect", 2);
+f([
+  M()
+], y.prototype, "_width", 2);
+f([
+  M()
+], y.prototype, "_height", 2);
+f([
   d({ type: Array })
-], f.prototype, "nodes", 1);
-m([
+], y.prototype, "nodes", 1);
+f([
   d({ type: Array })
-], f.prototype, "edges", 1);
-m([
+], y.prototype, "edges", 1);
+f([
   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;
+], y.prototype, "viewport", 2);
+y = f([
+  w("lit-flow")
+], y);
+var St = Object.defineProperty, kt = Object.getOwnPropertyDescriptor, X = (t, s, e, r) => {
+  for (var o = r > 1 ? void 0 : r ? kt(s, e) : s, i = t.length - 1, n; i >= 0; i--)
+    (n = t[i]) && (o = (r ? n(s, e, o) : n(o)) || o);
+  return r && o && St(s, e, o), o;
 };
-let E = class extends P {
+let N = class extends x {
   constructor() {
     super(), this.type = "source", this.position = D.Top, this.addEventListener("mousedown", (t) => this._onPointerDown(t)), this.addEventListener("touchstart", (t) => this._onPointerDown(t));
   }
@@ -1026,14 +1037,14 @@ let E = class extends P {
   }
   _onPointerDown(t) {
     t.stopPropagation();
-    const o = this.getAttribute("data-nodeid");
+    const s = this.getAttribute("data-nodeid");
     this.dispatchEvent(new CustomEvent("handle-pointer-down", {
       bubbles: !0,
       composed: !0,
       detail: {
         event: t,
         handleId: this.handleId,
-        nodeId: o,
+        nodeId: s,
         type: this.type,
         handleDomNode: this
       }
@@ -1046,7 +1057,7 @@ let E = class extends P {
     (t.has("nodeId") || t.has("handleId") || t.has("type")) && this.setAttribute("data-id", `lit-flow-${this.nodeId || ""}-${this.handleId || ""}-${this.type}`);
   }
   render() {
-    return v`
+    return m`
       <div style="
         width: 100%;
         height: 100%;
@@ -1057,27 +1068,27 @@ let E = class extends P {
     `;
   }
 };
-Z([
+X([
   d({ type: String, reflect: !0 })
-], E.prototype, "type", 2);
-Z([
+], N.prototype, "type", 2);
+X([
   d({ type: String, reflect: !0, attribute: "data-handlepos" })
-], E.prototype, "position", 2);
-Z([
+], N.prototype, "position", 2);
+X([
   d({ type: String, reflect: !0, attribute: "data-handleid" })
-], E.prototype, "handleId", 2);
-Z([
+], N.prototype, "handleId", 2);
+X([
   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;
+], N.prototype, "nodeId", 2);
+N = X([
+  w("lit-handle")
+], N);
+var zt = Object.defineProperty, It = Object.getOwnPropertyDescriptor, rt = (t, s, e, r) => {
+  for (var o = r > 1 ? void 0 : r ? It(s, e) : s, i = t.length - 1, n; i >= 0; i--)
+    (n = t[i]) && (o = (r ? n(s, e, o) : n(o)) || o);
+  return r && o && zt(s, e, o), o;
 };
-let Y = class extends j(P) {
+let U = class extends H(x) {
   _zoomIn() {
     this.panZoom?.scaleBy(1.2);
   }
@@ -1091,7 +1102,7 @@ let Y = class extends j(P) {
     }));
   }
   render() {
-    return v`
+    return m`
       <button @click="${this._zoomIn}" title="Zoom In">
         <svg viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
       </button>
@@ -1104,7 +1115,7 @@ let Y = class extends j(P) {
     `;
   }
 };
-Y.styles = A`
+U.styles = B`
     :host {
       display: block;
       position: absolute;
@@ -1147,26 +1158,26 @@ Y.styles = A`
       fill: currentColor;
     }
   `;
-Q([
+rt([
   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;
+], U.prototype, "panZoom", 2);
+U = rt([
+  w("lit-controls")
+], U);
+var Ct = Object.defineProperty, Dt = Object.getOwnPropertyDescriptor, I = (t, s, e, r) => {
+  for (var o = r > 1 ? void 0 : r ? Dt(s, e) : s, i = t.length - 1, n; i >= 0; i--)
+    (n = t[i]) && (o = (r ? n(s, e, o) : n(o)) || o);
+  return r && o && Ct(s, e, o), o;
 };
-let x = class extends j(P) {
+let O = class extends H(x) {
   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 = pt({
-        domNode: o,
+      const s = this.shadowRoot?.querySelector("svg");
+      s && (this._minimapInstance = ft({
+        domNode: s,
         panZoom: this.panZoom,
         getTransform: () => this.transform,
         getViewScale: () => {
@@ -1188,30 +1199,30 @@ let x = class extends j(P) {
       width: this.width / this.transform[2],
       height: this.height / this.transform[2]
     };
-    return this.nodeLookup.size > 0 ? ct(ut(this.nodeLookup), t) : t;
+    return this.nodeLookup.size > 0 ? gt(vt(this.nodeLookup), t) : t;
   }
   render() {
-    const t = this._getBoundingRect(), o = {
+    const t = this._getBoundingRect(), s = {
       x: -this.transform[0] / this.transform[2],
       y: -this.transform[1] / this.transform[2],
       width: this.width / this.transform[2],
       height: this.height / this.transform[2]
-    }, 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`
+    }, e = 200, r = 150, o = t.width / e, i = t.height / r, n = Math.max(o, i), c = n * e, h = n * r, a = 5 * n, p = t.x - (c - t.width) / 2 - a, l = t.y - (h - t.height) / 2 - a, u = c + a * 2, g = h + a * 2;
+    return m`
       <svg
         width="${e}"
-        height="${s}"
-        viewBox="${h} ${l} ${u} ${y}"
+        height="${r}"
+        viewBox="${p} ${l} ${u} ${g}"
       >
-        ${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`
+        ${Array.from(this.nodeLookup.values()).map((_) => {
+      const { x: b, y: v } = _.internals.positionAbsolute, C = _.measured.width || 0, F = _.measured.height || 0;
+      return Z`
             <rect
               class="minimap-node"
-              x="${_}"
-              y="${g}"
-              width="${S}"
-              height="${G}"
+              x="${b}"
+              y="${v}"
+              width="${C}"
+              height="${F}"
               rx="2"
               ry="2"
             />
@@ -1219,14 +1230,14 @@ let x = class extends j(P) {
     })}
         <path
           class="minimap-mask"
-          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"
+          d="M${p - a},${l - a}h${u + a * 2}v${g + a * 2}h${-u - a * 2}z
+             M${s.x},${s.y}h${s.width}v${s.height}h${-s.width}z"
         />
       </svg>
     `;
   }
 };
-x.styles = A`
+O.styles = B`
     :host {
       display: block;
       position: absolute;
@@ -1255,36 +1266,36 @@ x.styles = A`
       fill-rule: evenodd;
     }
   `;
-C([
+I([
   d({ type: Object })
-], x.prototype, "panZoom", 2);
-C([
+], O.prototype, "panZoom", 2);
+I([
   d({ type: Object })
-], x.prototype, "nodeLookup", 2);
-C([
+], O.prototype, "nodeLookup", 2);
+I([
   d({ type: Array })
-], x.prototype, "transform", 2);
-C([
+], O.prototype, "transform", 2);
+I([
   d({ type: Array })
-], x.prototype, "translateExtent", 2);
-C([
+], O.prototype, "translateExtent", 2);
+I([
   d({ type: Number })
-], x.prototype, "width", 2);
-C([
+], O.prototype, "width", 2);
+I([
   d({ type: Number })
-], x.prototype, "height", 2);
-C([
-  N()
-], 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;
+], O.prototype, "height", 2);
+I([
+  M()
+], O.prototype, "_minimapInstance", 2);
+O = I([
+  w("lit-minimap")
+], O);
+var Et = Object.defineProperty, Lt = Object.getOwnPropertyDescriptor, it = (t, s, e, r) => {
+  for (var o = r > 1 ? void 0 : r ? Lt(s, e) : s, i = t.length - 1, n; i >= 0; i--)
+    (n = t[i]) && (o = (r ? n(s, e, o) : n(o)) || o);
+  return r && o && Et(s, e, o), o;
 };
-let T = class extends P {
+let W = class extends x {
   constructor() {
     super(...arguments), this.nodeTypes = [
       { type: "default", label: "Default Node" },
@@ -1292,19 +1303,19 @@ let T = class extends P {
       { type: "output", label: "Output Node" }
     ];
   }
-  _onDragStart(t, o) {
-    t.dataTransfer && (t.dataTransfer.setData("application/litflow", o), t.dataTransfer.effectAllowed = "move");
+  _onDragStart(t, s) {
+    t.dataTransfer && (t.dataTransfer.setData("application/litflow", s), t.dataTransfer.effectAllowed = "move");
   }
   render() {
-    return v`
+    return m`
       <div class="sidebar-title">Node Palette</div>
       <div class="node-palette">
         ${this.nodeTypes.map(
-      (t) => v`
+      (t) => m`
             <div
               class="palette-item"
               draggable="true"
-              @dragstart="${(o) => this._onDragStart(o, t.type)}"
+              @dragstart="${(s) => this._onDragStart(s, t.type)}"
             >
               ${t.label}
             </div>
@@ -1314,9 +1325,9 @@ let T = class extends P {
     `;
   }
 };
-T.styles = [
-  J,
-  A`
+W.styles = [
+  Q,
+  B`
     :host {
       display: block;
       width: 200px;
@@ -1364,18 +1375,18 @@ T.styles = [
     }
   `
 ];
-tt([
+it([
   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;
+], W.prototype, "nodeTypes", 2);
+W = it([
+  w("lit-sidebar")
+], W);
+var Nt = Object.defineProperty, Rt = Object.getOwnPropertyDescriptor, K = (t, s, e, r) => {
+  for (var o = r > 1 ? void 0 : r ? Rt(s, e) : s, i = t.length - 1, n; i >= 0; i--)
+    (n = t[i]) && (o = (r ? n(s, e, o) : n(o)) || o);
+  return r && o && Nt(s, e, o), o;
 };
-let M = class extends P {
+let Y = class extends x {
   constructor() {
     super(...arguments), this.nodeId = "", this._data = {}, this.prompt = "";
   }
@@ -1389,15 +1400,15 @@ let M = class extends P {
     return this._data;
   }
   _onInput(t) {
-    const o = t.target;
-    this.prompt = o.value, this.dispatchEvent(new CustomEvent("node-data-change", {
+    const s = t.target;
+    this.prompt = s.value, this.dispatchEvent(new CustomEvent("node-data-change", {
       bubbles: !0,
       composed: !0,
       detail: { id: this.nodeId, data: { prompt: this.prompt } }
     }));
   }
   render() {
-    return v`
+    return m`
       <div class="gemini-node prompt-node" style="
         padding: 12px;
         background: var(--md-sys-color-surface-container-high);
@@ -1453,24 +1464,24 @@ let M = class extends P {
     `;
   }
 };
-V([
+K([
   d({ type: String, attribute: "data-id", reflect: !0 })
-], M.prototype, "nodeId", 2);
-V([
+], Y.prototype, "nodeId", 2);
+K([
   d({ type: Object })
-], M.prototype, "data", 1);
-V([
+], Y.prototype, "data", 1);
+K([
   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;
+], Y.prototype, "prompt", 2);
+Y = K([
+  w("lit-gemini-prompt-node")
+], Y);
+var Bt = Object.defineProperty, Mt = Object.getOwnPropertyDescriptor, T = (t, s, e, r) => {
+  for (var o = r > 1 ? void 0 : r ? Mt(s, e) : s, i = t.length - 1, n; i >= 0; i--)
+    (n = t[i]) && (o = (r ? n(s, e, o) : n(o)) || o);
+  return r && o && Bt(s, e, o), o;
 };
-let L = class extends P {
+let R = class extends x {
   constructor() {
     super(...arguments), this.nodeId = "", this._data = {}, this.imageUrl = "", this.status = "idle";
   }
@@ -1484,7 +1495,7 @@ let L = class extends P {
     return this._data;
   }
   render() {
-    return v`
+    return m`
       <div class="gemini-node image-node" style="
         padding: 12px;
         background: var(--md-sys-color-surface-container-high);
@@ -1513,7 +1524,7 @@ let L = class extends P {
           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>`}
+          ${this.status === "loading" ? m`<div style="font-size: 12px; color: var(--md-sys-color-outline);">Generating...</div>` : this.imageUrl ? m`<img src="${this.imageUrl}" style="width: 100%; height: 100%; object-fit: cover;" />` : m`<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>
@@ -1521,32 +1532,287 @@ let L = class extends P {
     `;
   }
 };
-H([
+T([
   d({ type: String, attribute: "data-id", reflect: !0 })
-], L.prototype, "nodeId", 2);
-H([
+], R.prototype, "nodeId", 2);
+T([
   d({ type: Object })
-], L.prototype, "data", 1);
-H([
+], R.prototype, "data", 1);
+T([
+  d({ type: String })
+], R.prototype, "imageUrl", 2);
+T([
+  d({ type: String })
+], R.prototype, "status", 2);
+R = T([
+  w("lit-gemini-image-node")
+], R);
+var jt = Object.defineProperty, At = Object.getOwnPropertyDescriptor, V = (t, s, e, r) => {
+  for (var o = r > 1 ? void 0 : r ? At(s, e) : s, i = t.length - 1, n; i >= 0; i--)
+    (n = t[i]) && (o = (r ? n(s, e, o) : n(o)) || o);
+  return r && o && jt(s, e, o), o;
+};
+let E = class extends x {
+  constructor() {
+    super(...arguments), this.label = "", this.value = "", this.type = "default", this.icon = "📄";
+  }
+  render() {
+    return m`
+      ${this.icon ? m`<span class="icon">${this.icon}</span>` : ""}
+      ${this.label ? m`<span class="label">${this.label}:</span>` : ""}
+      <span class="value">${this.value || "..."}</span>
+    `;
+  }
+};
+E.styles = [
+  Q,
+  B`
+      :host {
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+        padding: 4px 10px;
+        background: var(--md-sys-color-secondary-container);
+        color: var(--md-sys-color-on-secondary-container);
+        border-radius: 16px;
+        font-family: var(--md-sys-typescale-body-medium-font);
+        font-size: 11px;
+        line-height: 1;
+        border: 1px solid var(--md-sys-color-outline-variant);
+        white-space: nowrap;
+        user-select: none;
+      }
+
+      .icon {
+        font-size: 14px;
+      }
+
+      .value {
+        font-weight: 500;
+        max-width: 120px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      :host([type="generative"]) {
+        background: #f3e5f5; /* Light Purple fallback */
+        color: #4a148c;
+        border-color: #ce93d8;
+      }
+
+      :host([type="input"]) {
+        background: var(--md-sys-color-primary-container);
+        color: var(--md-sys-color-on-primary-container);
+      }
+    `
+];
+V([
+  d({ type: String })
+], E.prototype, "label", 2);
+V([
   d({ type: String })
-], L.prototype, "imageUrl", 2);
-H([
+], E.prototype, "value", 2);
+V([
+  d({ type: String, reflect: !0 })
+], E.prototype, "type", 2);
+V([
+  d({ type: String })
+], E.prototype, "icon", 2);
+E = V([
+  w("lit-chiclet")
+], E);
+var Zt = Object.defineProperty, Yt = Object.getOwnPropertyDescriptor, j = (t, s, e, r) => {
+  for (var o = r > 1 ? void 0 : r ? Yt(s, e) : s, i = t.length - 1, n; i >= 0; i--)
+    (n = t[i]) && (o = (r ? n(s, e, o) : n(o)) || o);
+  return r && o && Zt(s, e, o), o;
+};
+let L = class extends x {
+  constructor() {
+    super(...arguments), this.label = "Node", this.inputSchema = { properties: {} }, this.outputSchema = { properties: {} }, this.data = {}, this.status = "idle";
+  }
+  createRenderRoot() {
+    return this;
+  }
+  render() {
+    const t = this.inputSchema?.properties && Object.keys(this.inputSchema.properties).length > 0 ? this.inputSchema : this.data?.inputSchema || { properties: {} }, s = this.outputSchema?.properties && Object.keys(this.outputSchema.properties).length > 0 ? this.outputSchema : this.data?.outputSchema || { properties: {} }, e = Object.entries(t.properties || {}), r = Object.entries(s.properties || {});
+    return m`
+      <style>
+        :host {
+          --md-sys-color-surface-container: #f3edf7;
+          --md-sys-color-on-surface: #1b1b1f;
+          --md-sys-color-outline: #74777f;
+          --md-sys-color-surface-container-high: #ece6f0;
+          --md-sys-color-outline-variant: #c4c6d0;
+          --md-sys-color-on-surface-variant: #44474f;
+          --md-sys-color-primary: #005ac1;
+          --md-sys-color-error: #ba1a1a;
+          --md-sys-shape-corner-medium: 12px;
+          --md-sys-elevation-1: 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
+          display: block;
+        }
+
+        .node-container {
+          display: flex;
+          flex-direction: column;
+          min-width: 200px;
+          background: var(--md-sys-color-surface-container);
+          color: var(--md-sys-color-on-surface);
+          border: 1px solid var(--md-sys-color-outline);
+          border-radius: var(--md-sys-shape-corner-medium);
+          box-shadow: var(--md-sys-elevation-1);
+          box-sizing: border-box;
+          position: relative;
+          transition: border-color 0.2s, box-shadow 0.2s;
+        }
+
+        .node-container.working {
+          border-color: var(--md-sys-color-primary);
+          box-shadow: 0 0 8px rgba(0, 90, 193, 0.4);
+        }
+
+        .node-container.error {
+          border-color: var(--md-sys-color-error);
+        }
+
+        /* Selected state style injection from parent would be needed, or we check attribute manually */
+        :host([selected]) .node-container {
+          border: 2px solid var(--md-sys-color-primary);
+          margin: -1px;
+        }
+
+        .header {
+          background: var(--md-sys-color-surface-container-high);
+          padding: 12px 16px;
+          font-weight: 500;
+          border-bottom: 1px solid var(--md-sys-color-outline-variant);
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          border-radius: var(--md-sys-shape-corner-medium) var(--md-sys-shape-corner-medium) 0 0;
+          margin: 0;
+        }
+
+        .content {
+          padding: 16px;
+          display: flex;
+          flex-direction: column;
+          gap: 12px;
+        }
+
+        .port {
+          position: relative;
+          display: flex;
+          align-items: center;
+          min-height: 24px;
+          width: 100%;
+        }
+
+        .port.input {
+          justify-content: flex-start;
+        }
+
+        .port.output {
+          justify-content: flex-end;
+        }
+
+        /* Handle Positioning */
+        lit-handle {
+          position: absolute;
+          z-index: 10;
+        }
+        
+        .port.input lit-handle {
+          left: -22px !important;
+          top: 50%;
+          transform: translateY(-50%);
+        }
+
+        .port.output lit-handle {
+          left: auto !important;
+          right: -22px !important;
+          top: 50%;
+          transform: translateY(-50%);
+        }
+
+        label {
+          font-size: 12px;
+          color: var(--md-sys-color-on-surface-variant);
+          pointer-events: none;
+        }
+      </style>
+      <div class="node-container ${this.status}">
+        <div class="header">
+          <span class="icon">🧩</span>
+          <span>${this.data?.label || this.label}</span>
+        </div>
+        <div class="content">
+          ${e.length > 0 ? m`
+            <div class="inputs">
+              ${ot(e, ([o, i]) => m`
+                <div class="port input">
+                  <lit-handle type="target" position="left" data-handleid="${o}" id="${o}"></lit-handle>
+                  ${this.data?.[o] ? m`<lit-chiclet 
+                        type="input" 
+                        .label="${i.title || o}" 
+                        .value="${this.data[o]}"
+                        icon="${i.behavior?.includes("llm-content") ? "✨" : "📄"}"
+                      ></lit-chiclet>` : m`<label>${i.title || o}</label>`}
+                </div>
+              `)}
+            </div>
+          ` : ""}
+
+          ${r.length > 0 ? m`
+            <div class="outputs">
+              ${ot(r, ([o, i]) => m`
+                <div class="port output">
+                  ${this.data?.[o] ? m`<lit-chiclet 
+                        type="generative" 
+                        .label="${i.title || o}" 
+                        .value="${this.data[o]}"
+                        icon="🪄"
+                      ></lit-chiclet>` : m`<label>${i.title || o}</label>`}
+                  <lit-handle type="source" position="right" data-handleid="${o}" id="${o}"></lit-handle>
+                </div>
+              `)}
+            </div>
+          ` : ""}
+        </div>
+      </div>
+    `;
+  }
+};
+j([
+  d({ type: String })
+], L.prototype, "label", 2);
+j([
+  d({ type: Object })
+], L.prototype, "inputSchema", 2);
+j([
+  d({ type: Object })
+], L.prototype, "outputSchema", 2);
+j([
+  d({ type: Object })
+], L.prototype, "data", 2);
+j([
   d({ type: String })
 ], L.prototype, "status", 2);
-L = H([
-  O("lit-gemini-image-node")
+L = j([
+  w("lit-schema-node")
 ], L);
 export {
-  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
+  E as LitChiclet,
+  U as LitControls,
+  $ as LitEdge,
+  y as LitFlow,
+  R as LitGeminiImageNode,
+  Y as LitGeminiPromptNode,
+  N as LitHandle,
+  O as LitMinimap,
+  P as LitNode,
+  L as LitSchemaNode,
+  W as LitSidebar,
+  bt as createInitialState,
+  Q as m3Tokens
 };
 //# sourceMappingURL=litflow.js.map