@ghchinoy/litflow 0.1.0 → 0.2.0

package/dist/litflow.js

@@ -1,80 +1,86 @@
-import { LitElement as P, html as $, svg as Z, css as A } from "lit";
-import { unsafeStatic as F, html as E } from "lit/static-html.js";
-import { property as a, customElement as z, query as T, state as S } from "lit/decorators.js";
-import { signal as N, SignalWatcher as B } from "@lit-labs/signals";
-import { infiniteExtent as K, Position as I, getBezierPath as j, adoptUserNodes as U, updateAbsolutePositions as H, XYPanZoom as J, PanOnScrollMode as M, XYDrag as Q, getHandlePosition as X, getSmoothStepPath as Y, getStraightPath as tt, XYHandle as et, ConnectionMode as ot, XYMinimap as st, getBoundsOfRects as nt, getInternalNodesBounds as rt } from "@xyflow/system";
-import { m3Tokens as it } from "./theme.js";
-function at() {
+import { LitElement as P, html as v, svg as Z, css as I } from "lit";
+import { unsafeStatic as J, html as L } from "lit/static-html.js";
+import { property as a, customElement as z, query as V, state as N } from "lit/decorators.js";
+import { signal as A, SignalWatcher as B } from "@lit-labs/signals";
+import { infiniteExtent as Q, Position as S, getBezierPath as H, adoptUserNodes as tt, updateAbsolutePositions as T, XYPanZoom as et, PanOnScrollMode as M, XYDrag as ot, getHandlePosition as X, getSmoothStepPath as Y, getStraightPath as st, XYHandle as nt, ConnectionMode as rt, XYMinimap as it, getBoundsOfRects as at, getInternalNodesBounds as dt } from "@xyflow/system";
+import { m3Tokens as W } from "./theme.js";
+function lt() {
   return {
-    nodes: N([]),
-    edges: N([]),
+    nodes: A([]),
+    edges: A([]),
     nodeLookup: /* @__PURE__ */ new Map(),
     parentLookup: /* @__PURE__ */ new Map(),
-    nodeExtent: K,
+    nodeExtent: Q,
     snapGrid: [15, 15],
     snapToGrid: !1,
     nodeOrigin: [0, 0],
     multiSelectionActive: !1,
-    transform: N([0, 0, 1]),
+    transform: A([0, 0, 1]),
     autoPanOnNodeDrag: !0,
     nodesDraggable: !0,
     selectNodesOnDrag: !0,
     nodeDragThreshold: 0,
     panZoom: null,
     domNode: null,
-    connectionInProgress: N(null)
+    connectionInProgress: A(null)
   };
 }
-var dt = Object.defineProperty, lt = Object.getOwnPropertyDescriptor, k = (t, o, e, n) => {
-  for (var s = n > 1 ? void 0 : n ? lt(o, e) : o, r = t.length - 1, i; r >= 0; r--)
+var pt = Object.defineProperty, ht = Object.getOwnPropertyDescriptor, w = (t, o, e, n) => {
+  for (var s = n > 1 ? void 0 : n ? ht(o, e) : o, r = t.length - 1, i; r >= 0; r--)
     (i = t[r]) && (s = (n ? i(o, e, s) : i(s)) || s);
-  return n && s && dt(o, e, s), s;
+  return n && s && pt(o, e, s), s;
 };
-let x = class extends B(P) {
+let b = class extends B(P) {
   constructor() {
-    super(...arguments), this.label = "", this.type = "default", this.data = {}, this.selected = !1, this.nodeId = "";
+    super(...arguments), this.label = "", this.type = "default", this.data = {}, this.selected = !1, this.nodeId = "", this.positionX = 0, this.positionY = 0;
   }
   createRenderRoot() {
     return this;
   }
   render() {
-    return $`
-      <div class="label" style="font-size: 12px; color: #222; pointer-events: none;">${this.label}</div>
+    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" ? $`<lit-handle type="source" data-handlepos="bottom" data-nodeid="${this.nodeId}"></lit-handle>` : ""}
-      ${this.type === "output" || this.type === "default" ? $`<lit-handle type="target" data-handlepos="top" data-nodeid="${this.nodeId}"></lit-handle>` : ""}
+      ${this.type === "input" || this.type === "default" ? 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([
+w([
   a({ type: String })
-], x.prototype, "label", 2);
-k([
+], b.prototype, "label", 2);
+w([
   a({ type: String, reflect: !0 })
-], x.prototype, "type", 2);
-k([
+], b.prototype, "type", 2);
+w([
   a({ type: Object })
-], x.prototype, "data", 2);
-k([
+], b.prototype, "data", 2);
+w([
   a({ type: Boolean, reflect: !0 })
-], x.prototype, "selected", 2);
-k([
+], b.prototype, "selected", 2);
+w([
   a({ type: String, attribute: "data-id", reflect: !0 })
-], x.prototype, "nodeId", 2);
-x = k([
+], b.prototype, "nodeId", 2);
+w([
+  a({ type: Number, attribute: "position-x" })
+], b.prototype, "positionX", 2);
+w([
+  a({ type: Number, attribute: "position-y" })
+], b.prototype, "positionY", 2);
+b = w([
   z("lit-node")
-], x);
-var ht = Object.defineProperty, pt = Object.getOwnPropertyDescriptor, _ = (t, o, e, n) => {
-  for (var s = n > 1 ? void 0 : n ? pt(o, e) : o, r = t.length - 1, i; r >= 0; r--)
+], b);
+var ct = Object.defineProperty, ut = Object.getOwnPropertyDescriptor, x = (t, o, e, n) => {
+  for (var s = n > 1 ? void 0 : n ? ut(o, e) : o, r = t.length - 1, i; r >= 0; r--)
     (i = t[r]) && (s = (n ? i(o, e, s) : i(s)) || s);
-  return n && s && ht(o, e, s), s;
+  return n && s && ct(o, e, s), s;
 };
-let m = class extends B(P) {
+let g = class extends B(P) {
   constructor() {
-    super(...arguments), this.sourceX = 0, this.sourceY = 0, this.targetX = 0, this.targetY = 0, this.sourcePosition = I.Right, this.targetPosition = I.Left, this.selected = !1;
+    super(...arguments), this.sourceX = 0, this.sourceY = 0, this.targetX = 0, this.targetY = 0, this.sourcePosition = S.Right, this.targetPosition = S.Left, this.selected = !1;
   }
   render() {
-    const [t] = j({
+    const [t] = H({
       sourceX: this.sourceX,
       sourceY: this.sourceY,
       sourcePosition: this.sourcePosition,
@@ -87,7 +93,7 @@ let m = class extends B(P) {
     `;
   }
 };
-m.styles = A`
+g.styles = I`
     :host {
       display: contents;
     }
@@ -102,52 +108,52 @@ m.styles = A`
       stroke: #555;
     }
   `;
-_([
+x([
   a({ type: Number })
-], m.prototype, "sourceX", 2);
-_([
+], g.prototype, "sourceX", 2);
+x([
   a({ type: Number })
-], m.prototype, "sourceY", 2);
-_([
+], g.prototype, "sourceY", 2);
+x([
   a({ type: Number })
-], m.prototype, "targetX", 2);
-_([
+], g.prototype, "targetX", 2);
+x([
   a({ type: Number })
-], m.prototype, "targetY", 2);
-_([
+], g.prototype, "targetY", 2);
+x([
   a({ type: String })
-], m.prototype, "sourcePosition", 2);
-_([
+], g.prototype, "sourcePosition", 2);
+x([
   a({ type: String })
-], m.prototype, "targetPosition", 2);
-_([
+], g.prototype, "targetPosition", 2);
+x([
   a({ type: Boolean, reflect: !0 })
-], m.prototype, "selected", 2);
-m = _([
+], g.prototype, "selected", 2);
+g = x([
   z("lit-edge")
-], m);
-var ct = Object.defineProperty, ut = Object.getOwnPropertyDescriptor, g = (t, o, e, n) => {
-  for (var s = n > 1 ? void 0 : n ? ut(o, e) : o, r = t.length - 1, i; r >= 0; r--)
+], g);
+var ft = Object.defineProperty, mt = Object.getOwnPropertyDescriptor, f = (t, o, e, n) => {
+  for (var s = n > 1 ? void 0 : n ? mt(o, e) : o, r = t.length - 1, i; r >= 0; r--)
     (i = t[r]) && (s = (n ? i(o, e, s) : i(s)) || s);
-  return n && s && ct(o, e, s), s;
+  return n && s && ft(o, e, s), s;
 };
-const b = {
+const _ = {
   fromAttribute: (t) => t !== "false" && t !== null,
   toAttribute: (t) => t ? "" : null
 };
-let u = class extends B(P) {
+let c = class extends B(P) {
   constructor() {
-    super(...arguments), this._drags = /* @__PURE__ */ new Map(), this._state = at(), this.nodeTypes = {
+    super(...arguments), this._drags = /* @__PURE__ */ new Map(), this._state = lt(), 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._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._width = 0, this._height = 0, this.viewport = { x: 0, y: 0, zoom: 1 };
   }
   set nodes(t) {
-    this._state.nodes.set(t), U(t, this._state.nodeLookup, this._state.parentLookup, {
+    this._state.nodes.set(t), tt(t, this._state.nodeLookup, this._state.parentLookup, {
       nodeOrigin: this._state.nodeOrigin,
       nodeExtent: this._state.nodeExtent
-    }), H(this._state.nodeLookup, this._state.parentLookup, {
+    }), T(this._state.nodeLookup, this._state.parentLookup, {
       nodeOrigin: this._state.nodeOrigin,
       nodeExtent: this._state.nodeExtent
     });
@@ -155,6 +161,27 @@ let u = class extends B(P) {
   get nodes() {
     return this._state.nodes.get();
   }
+  _discoverNodes() {
+    if (this.nodes.length > 0) return;
+    const t = Array.from(this.querySelectorAll("lit-node"));
+    if (t.length > 0) {
+      const o = 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: {
+          x: parseFloat(e.getAttribute("position-x") || "0"),
+          y: parseFloat(e.getAttribute("position-y") || "0")
+        },
+        data: {
+          label: e.label || e.getAttribute("label") || "",
+          ...e.data
+        }
+      }));
+      this.nodes = o, t.forEach((e, n) => {
+        e.nodeId = o[n].id;
+      });
+    }
+  }
   set edges(t) {
     this._state.edges.set(t);
   }
@@ -162,7 +189,7 @@ let u = class extends B(P) {
     return this._state.edges.get();
   }
   connectedCallback() {
-    super.connectedCallback(), this._resizeObserver = new ResizeObserver((t) => {
+    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;
@@ -184,28 +211,28 @@ let u = class extends B(P) {
         width: n / r,
         height: s / r
       };
-      const i = this.nodes.find((p) => p.id === t);
+      const i = this.nodes.find((h) => h.id === t);
       i && (i.measured = e.measured);
-      const h = o.querySelectorAll("lit-handle");
-      if (h && h.length > 0) {
-        const p = [], d = [];
-        h.forEach((c) => {
-          const l = c.getBoundingClientRect(), f = o.getBoundingClientRect(), v = {
-            id: c.handleId || null,
-            type: c.type,
-            position: c.position,
-            x: (l.left - f.left) / r,
-            y: (l.top - f.top) / r,
+      const p = o.querySelectorAll("lit-handle");
+      if (p && p.length > 0) {
+        const h = [], d = [];
+        p.forEach((u) => {
+          const l = u.getBoundingClientRect(), m = o.getBoundingClientRect(), O = {
+            id: u.handleId || null,
+            type: u.type,
+            position: u.position,
+            x: (l.left - m.left) / r,
+            y: (l.top - m.top) / r,
             width: l.width / r,
             height: l.height / r
           };
-          c.type === "source" ? p.push(v) : d.push(v);
+          u.type === "source" ? h.push(O) : d.push(O);
         }), e.internals.handleBounds = {
-          source: p,
+          source: h,
           target: d
         }, console.log(`Node ${t} handleBounds:`, e.internals.handleBounds);
       }
-      H(this._state.nodeLookup, this._state.parentLookup, {
+      T(this._state.nodeLookup, this._state.parentLookup, {
         nodeOrigin: this._state.nodeOrigin,
         nodeExtent: this._state.nodeExtent
       }), this._state.nodes.set([...this.nodes]);
@@ -215,10 +242,21 @@ let u = class extends B(P) {
     const e = this.nodes.map((n) => n.id === t ? { ...n, selected: !n.selected } : o ? n : { ...n, selected: !1 });
     this.nodes = e;
   }
+  /**
+   * Projects a screen position (relative to the flow container) to canvas coordinates.
+   * Useful for Drag & Drop and context menus.
+   */
+  project(t) {
+    const [o, e, n] = this._state.transform.get();
+    return {
+      x: (t.x - o) / n,
+      y: (t.y - e) / n
+    };
+  }
   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 = J({
+    }, this._panZoom = et({
       domNode: this._renderer,
       minZoom: 0.5,
       maxZoom: 2,
@@ -282,33 +320,33 @@ let u = class extends B(P) {
           return;
         }
         let s = this._drags.get(n);
-        s || (s = Q({
+        s || (s = ot({
           getStoreItems: () => ({
             ...this._state,
             nodes: this._state.nodes.get(),
             edges: this._state.edges.get(),
             transform: this._state.transform.get(),
             panBy: async (r) => {
-              const { panZoom: i, nodeExtent: h } = this._state, p = this._state.transform.get();
+              const { panZoom: i, nodeExtent: p } = this._state, h = this._state.transform.get();
               return i ? !!await i.setViewportConstrained(
                 {
-                  x: p[0] + r.x,
-                  y: p[1] + r.y,
-                  zoom: p[2]
+                  x: h[0] + r.x,
+                  y: h[1] + r.y,
+                  zoom: h[2]
                 },
                 [[0, 0], [this.offsetWidth, this.offsetHeight]],
-                h
+                p
               ) : !1;
             },
             updateNodePositions: (r) => {
-              r.forEach((i, h) => {
-                const p = this._state.nodeLookup.get(h);
-                if (p) {
-                  p.position = i.position, p.internals.positionAbsolute = i.internals.positionAbsolute;
-                  const d = this.nodes.find((c) => c.id === h);
+              r.forEach((i, p) => {
+                const h = this._state.nodeLookup.get(p);
+                if (h) {
+                  h.position = i.position, h.internals.positionAbsolute = i.internals.positionAbsolute;
+                  const d = this.nodes.find((u) => u.id === p);
                   d && (d.position = i.position);
                 }
-              }), H(this._state.nodeLookup, this._state.parentLookup, {
+              }), T(this._state.nodeLookup, this._state.parentLookup, {
                 nodeOrigin: this._state.nodeOrigin,
                 nodeExtent: this._state.nodeExtent
               }), this._state.nodes.set([...this.nodes]);
@@ -336,7 +374,7 @@ let u = class extends B(P) {
       id: null,
       type: "source",
       nodeId: t.source,
-      position: I.Bottom,
+      position: S.Bottom,
       x: (o.measured.width || 0) / 2,
       y: o.measured.height || 0,
       width: 1,
@@ -347,33 +385,33 @@ let u = class extends B(P) {
       id: null,
       type: "target",
       nodeId: t.target,
-      position: I.Top,
+      position: S.Top,
       x: (e.measured.width || 0) / 2,
       y: 0,
       width: 1,
       height: 1
-    }, h = X(o, r, r.position, !0), p = X(e, i, i.position, !0);
+    }, p = X(o, r, r.position, !0), h = X(e, i, i.position, !0);
     let d = "";
-    const c = {
-      sourceX: h.x,
-      sourceY: h.y,
+    const u = {
+      sourceX: p.x,
+      sourceY: p.y,
       sourcePosition: r.position,
-      targetX: p.x,
-      targetY: p.y,
+      targetX: h.x,
+      targetY: h.y,
       targetPosition: i.position
     };
     switch (t.type) {
       case "straight":
-        [d] = tt(c);
+        [d] = st(u);
         break;
       case "smoothstep":
-        [d] = Y(c);
+        [d] = Y(u);
         break;
       case "step":
-        [d] = Y({ ...c, borderRadius: 0 });
+        [d] = Y({ ...u, borderRadius: 0 });
         break;
       default:
-        [d] = j(c);
+        [d] = H(u);
         break;
     }
     return Z`
@@ -390,38 +428,38 @@ let u = class extends B(P) {
     const { event: o, handleId: e, nodeId: n, type: s, handleDomNode: r } = t.detail, i = s === "target";
     if (this._state.connectionInProgress.get() || !this.nodesConnectable)
       return;
-    const h = r.getBoundingClientRect(), p = r.parentElement?.getBoundingClientRect(), d = this._state.transform.get()[2], c = {
+    const p = r.getBoundingClientRect(), h = r.parentElement?.getBoundingClientRect(), d = this._state.transform.get()[2], u = {
       id: e,
       nodeId: n,
       type: s,
       position: r.position,
-      x: (h.left - (p?.left ?? 0)) / d,
-      y: (h.top - (p?.top ?? 0)) / d,
-      width: h.width / d,
-      height: h.height / d
+      x: (p.left - (h?.left ?? 0)) / d,
+      y: (p.top - (h?.top ?? 0)) / d,
+      width: p.width / d,
+      height: p.height / d
     };
-    et.onPointerDown(o, {
+    nt.onPointerDown(o, {
       handleId: e,
       nodeId: n,
       isTarget: i,
       domNode: this._renderer,
       handleDomNode: r,
       nodeLookup: this._state.nodeLookup,
-      connectionMode: ot.Strict,
+      connectionMode: rt.Strict,
       lib: "lit",
       autoPanOnConnect: !0,
       flowId: "lit-flow",
       dragThreshold: 0,
       panBy: async (l) => {
-        const f = this._panZoom?.getViewport();
-        return f ? (await this._panZoom?.setViewport({
-          x: f.x + l.x,
-          y: f.y + l.y,
-          zoom: f.zoom
+        const m = this._panZoom?.getViewport();
+        return m ? (await this._panZoom?.setViewport({
+          x: m.x + l.x,
+          y: m.y + l.y,
+          zoom: m.zoom
         }), !0) : !1;
       },
       getTransform: () => this._state.transform.get(),
-      getFromHandle: () => c,
+      getFromHandle: () => u,
       updateConnection: (l) => {
         l.inProgress ? this._state.connectionInProgress.set(l) : this._state.connectionInProgress.set(null);
       },
@@ -432,15 +470,43 @@ let u = class extends B(P) {
         this.dispatchEvent(new CustomEvent("connect", {
           detail: l
         }));
-        const f = `e-${l.source}${l.sourceHandle || ""}-${l.target}${l.targetHandle || ""}`;
-        this.edges = [...this.edges, { ...l, id: f }];
+        const m = `e-${l.source}${l.sourceHandle || ""}-${l.target}${l.targetHandle || ""}`;
+        this.edges = [...this.edges, { ...l, id: m }];
       },
       connectionRadius: 20
     });
   }
+  _onDragOver(t) {
+    t.preventDefault(), t.dataTransfer && (t.dataTransfer.dropEffect = "move");
+  }
+  _onDrop(t) {
+    t.preventDefault();
+    const o = t.dataTransfer?.getData("application/litflow");
+    if (typeof o > "u" || !o)
+      return;
+    const e = this.getBoundingClientRect(), n = this.project({
+      x: t.clientX - e.left,
+      y: t.clientY - e.top
+    });
+    let s = `${o} node`;
+    if (this.promptOnDrop) {
+      const i = window.prompt("Enter node label:", s);
+      if (i === null) return;
+      s = i || s;
+    }
+    const r = {
+      id: `node_${Date.now()}`,
+      type: o,
+      position: n,
+      data: { label: s }
+    };
+    this.nodes = [...this.nodes, r], this.dispatchEvent(new CustomEvent("node-drop", {
+      detail: { node: r, event: t }
+    }));
+  }
   _renderConnectionLine(t) {
     if (!t) return null;
-    const [o] = j({
+    const [o] = H({
       sourceX: t.from.x,
       sourceY: t.from.y,
       sourcePosition: t.fromPosition,
@@ -461,8 +527,12 @@ let u = class extends B(P) {
   }
   render() {
     const t = this._state.transform.get(), o = this._state.connectionInProgress.get();
-    return E`
-      <div class="xyflow__renderer ${this.showGrid ? "has-grid" : ""}">
+    return L`
+      <div 
+        class="xyflow__renderer ${this.showGrid ? "has-grid" : ""}"
+        @dragover="${this._onDragOver}"
+        @drop="${this._onDrop}"
+      >
         <div
           class="xyflow__viewport"
           style="transform: translate(${t[0]}px, ${t[1]}px) scale(${t[2]})"
@@ -470,14 +540,14 @@ let u = class extends B(P) {
           <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, r = this.nodeTypes[e.type || "default"] || this.nodeTypes.default, i = F(r), h = e.style || {}, p = Object.entries(h).map(([C, D]) => `${C.replace(/([A-Z])/g, "-$1").toLowerCase()}: ${typeof D == "number" ? `${D}px` : D}`).join("; "), d = e.width || h.width, c = e.height || h.height, l = d ? `width: ${typeof d == "number" ? `${d}px` : d};` : "", f = c ? `height: ${typeof c == "number" ? `${c}px` : c};` : "", v = e.zIndex ? `z-index: ${e.zIndex};` : "";
-      return E`
+      const s = this._state.nodeLookup.get(e.id)?.internals.positionAbsolute || e.position, r = this.nodeTypes[e.type || "default"] || this.nodeTypes.default, i = J(r), p = e.style || {}, h = Object.entries(p).map(([k, C]) => `${k.replace(/([A-Z])/g, "-$1").toLowerCase()}: ${typeof C == "number" ? `${C}px` : C}`).join("; "), d = e.width || p.width, u = e.height || p.height, l = d ? `width: ${typeof d == "number" ? `${d}px` : d};` : "", m = u ? `height: ${typeof u == "number" ? `${u}px` : u};` : "", O = e.zIndex ? `z-index: ${e.zIndex};` : "";
+      return L`
                 <${i}
                   class="xyflow__node"
                   data-id="${e.id}"
                   type="${e.type || "default"}"
                   .nodeId="${e.id}"
-                  style="transform: translate(${s.x}px, ${s.y}px); ${p} ${l} ${f} ${v}"
+                  style="transform: translate(${s.x}px, ${s.y}px); ${h} ${l} ${m} ${O}"
                   .data="${e.data}"
                   .label="${e.data.label}"
                   .type="${e.type || "default"}"
@@ -493,8 +563,8 @@ let u = class extends B(P) {
           </svg>
         </div>
       </div>
-      ${this.showControls ? E`<lit-controls .panZoom="${this._panZoom}"></lit-controls>` : ""}
-      ${this.showMinimap ? E`
+      ${this.showControls ? L`<lit-controls .panZoom="${this._panZoom}"></lit-controls>` : ""}
+      ${this.showMinimap ? L`
             <lit-minimap
               .panZoom="${this._panZoom}"
               .nodeLookup="${this._state.nodeLookup}"
@@ -504,12 +574,13 @@ let u = class extends B(P) {
               .height="${this._height}"
             ></lit-minimap>
           ` : ""}
+      <slot style="display: none;"></slot>
     `;
   }
 };
-u.styles = [
-  it,
-  A`
+c.styles = [
+  W,
+  I`
     :host {
       display: block;
       width: 100%;
@@ -664,74 +735,77 @@ u.styles = [
     }
   `
 ];
-g([
-  T(".xyflow__renderer")
-], u.prototype, "_renderer", 2);
-g([
-  T(".xyflow__viewport")
-], u.prototype, "_viewport", 2);
-g([
-  S()
-], u.prototype, "_panZoom", 2);
-g([
-  S()
-], u.prototype, "_state", 2);
-g([
+f([
+  V(".xyflow__renderer")
+], c.prototype, "_renderer", 2);
+f([
+  V(".xyflow__viewport")
+], c.prototype, "_viewport", 2);
+f([
+  N()
+], c.prototype, "_panZoom", 2);
+f([
+  N()
+], c.prototype, "_state", 2);
+f([
   a({ type: Object })
-], u.prototype, "nodeTypes", 2);
-g([
+], c.prototype, "nodeTypes", 2);
+f([
   a({ type: Boolean, attribute: "show-controls", reflect: !0 })
-], u.prototype, "showControls", 2);
-g([
-  a({ type: Boolean, attribute: "show-minimap", reflect: !0, converter: b })
-], u.prototype, "showMinimap", 2);
-g([
-  a({ type: Boolean, attribute: "show-grid", reflect: !0, converter: b })
-], u.prototype, "showGrid", 2);
-g([
-  a({ type: Boolean, attribute: "nodes-draggable", reflect: !0, converter: b })
-], u.prototype, "nodesDraggable", 2);
-g([
-  a({ type: Boolean, attribute: "nodes-connectable", reflect: !0, converter: b })
-], u.prototype, "nodesConnectable", 2);
-g([
-  a({ type: Boolean, attribute: "pan-on-drag", reflect: !0, converter: b })
-], u.prototype, "panOnDrag", 2);
-g([
-  a({ type: Boolean, attribute: "zoom-on-scroll", reflect: !0, converter: b })
-], u.prototype, "zoomOnScroll", 2);
-g([
-  a({ type: Boolean, attribute: "zoom-on-pinch", reflect: !0, converter: b })
-], u.prototype, "zoomOnPinch", 2);
-g([
-  a({ type: Boolean, attribute: "zoom-on-double-click", reflect: !0, converter: b })
-], u.prototype, "zoomOnDoubleClick", 2);
-g([
-  S()
-], u.prototype, "_width", 2);
-g([
-  S()
-], u.prototype, "_height", 2);
-g([
+], c.prototype, "showControls", 2);
+f([
+  a({ type: Boolean, attribute: "show-minimap", reflect: !0, converter: _ })
+], c.prototype, "showMinimap", 2);
+f([
+  a({ type: Boolean, attribute: "show-grid", reflect: !0, converter: _ })
+], c.prototype, "showGrid", 2);
+f([
+  a({ type: Boolean, attribute: "nodes-draggable", reflect: !0, converter: _ })
+], c.prototype, "nodesDraggable", 2);
+f([
+  a({ type: Boolean, attribute: "nodes-connectable", reflect: !0, converter: _ })
+], c.prototype, "nodesConnectable", 2);
+f([
+  a({ type: Boolean, attribute: "pan-on-drag", reflect: !0, converter: _ })
+], c.prototype, "panOnDrag", 2);
+f([
+  a({ type: Boolean, attribute: "zoom-on-scroll", reflect: !0, converter: _ })
+], c.prototype, "zoomOnScroll", 2);
+f([
+  a({ type: Boolean, attribute: "zoom-on-pinch", reflect: !0, converter: _ })
+], c.prototype, "zoomOnPinch", 2);
+f([
+  a({ type: Boolean, attribute: "zoom-on-double-click", reflect: !0, converter: _ })
+], c.prototype, "zoomOnDoubleClick", 2);
+f([
+  a({ type: Boolean, attribute: "prompt-on-drop", reflect: !0, converter: _ })
+], c.prototype, "promptOnDrop", 2);
+f([
+  N()
+], c.prototype, "_width", 2);
+f([
+  N()
+], c.prototype, "_height", 2);
+f([
   a({ type: Array })
-], u.prototype, "nodes", 1);
-g([
+], c.prototype, "nodes", 1);
+f([
   a({ type: Array })
-], u.prototype, "edges", 1);
-g([
+], c.prototype, "edges", 1);
+f([
   a({ type: Object })
-], u.prototype, "viewport", 2);
-u = g([
+], c.prototype, "viewport", 2);
+c = f([
   z("lit-flow")
-], u);
-var gt = Object.defineProperty, ft = Object.getOwnPropertyDescriptor, L = (t, o, e, n) => {
-  for (var s = n > 1 ? void 0 : n ? ft(o, e) : o, r = t.length - 1, i; r >= 0; r--)
+], c);
+var gt = Object.defineProperty, yt = Object.getOwnPropertyDescriptor, E = (t, o, e, n) => {
+  for (var s = n > 1 ? void 0 : n ? yt(o, e) : o, r = t.length - 1, i; r >= 0; r--)
     (i = t[r]) && (s = (n ? i(o, e, s) : i(s)) || s);
   return n && s && gt(o, e, s), s;
 };
-let O = class extends P {
+let D = class extends P {
   constructor() {
-    super(), this.type = "source", this.position = I.Top, this.addEventListener("mousedown", (t) => this._onPointerDown(t)), this.addEventListener("touchstart", (t) => this._onPointerDown(t));
+    super(), this.type = "source", this.position = S.Top, this.addEventListener("mousedown", (t) => this._onPointerDown(t)), this.addEventListener("touchstart", (t) => this._onPointerDown(t));
   }
   createRenderRoot() {
     return this;
@@ -758,7 +832,7 @@ let O = 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 $`
+    return v`
       <div style="
         width: 100%;
         height: 100%;
@@ -769,25 +843,25 @@ let O = class extends P {
     `;
   }
 };
-L([
+E([
   a({ type: String, reflect: !0 })
-], O.prototype, "type", 2);
-L([
+], D.prototype, "type", 2);
+E([
   a({ type: String, reflect: !0, attribute: "data-handlepos" })
-], O.prototype, "position", 2);
-L([
+], D.prototype, "position", 2);
+E([
   a({ type: String, reflect: !0, attribute: "data-handleid" })
-], O.prototype, "handleId", 2);
-L([
+], D.prototype, "handleId", 2);
+E([
   a({ type: String, reflect: !0, attribute: "data-nodeid" })
-], O.prototype, "nodeId", 2);
-O = L([
+], D.prototype, "nodeId", 2);
+D = E([
   z("lit-handle")
-], O);
-var mt = Object.defineProperty, yt = Object.getOwnPropertyDescriptor, V = (t, o, e, n) => {
-  for (var s = n > 1 ? void 0 : n ? yt(o, e) : o, r = t.length - 1, i; r >= 0; r--)
+], D);
+var bt = Object.defineProperty, _t = Object.getOwnPropertyDescriptor, F = (t, o, e, n) => {
+  for (var s = n > 1 ? void 0 : n ? _t(o, e) : o, r = t.length - 1, i; r >= 0; r--)
     (i = t[r]) && (s = (n ? i(o, e, s) : i(s)) || s);
-  return n && s && mt(o, e, s), s;
+  return n && s && bt(o, e, s), s;
 };
 let R = class extends B(P) {
   _zoomIn() {
@@ -800,7 +874,7 @@ let R = class extends B(P) {
     this.panZoom?.setViewport({ x: 0, y: 0, zoom: 1 });
   }
   render() {
-    return $`
+    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>
@@ -813,26 +887,26 @@ let R = class extends B(P) {
     `;
   }
 };
-R.styles = A`
+R.styles = I`
     :host {
       display: block;
       position: absolute;
-      left: 10px;
-      bottom: 10px;
+      left: 16px;
+      bottom: 16px;
       z-index: 5;
       display: flex;
       flex-direction: column;
-      gap: 4px;
+      gap: 2px;
       background: var(--md-sys-color-surface);
       padding: 4px;
-      border-radius: var(--md-sys-shape-corner-extra-small);
+      border-radius: var(--md-sys-shape-corner-small);
       box-shadow: var(--md-sys-elevation-1);
       border: 1px solid var(--md-sys-color-outline-variant);
     }
 
     button {
-      width: 28px;
-      height: 28px;
+      width: 32px;
+      height: 32px;
       display: flex;
       align-items: center;
       justify-content: center;
@@ -841,30 +915,31 @@ R.styles = A`
       border-radius: var(--md-sys-shape-corner-extra-small);
       cursor: pointer;
       padding: 0;
-      color: var(--md-sys-color-on-surface);
-      transition: background-color 0.2s ease;
+      color: var(--md-sys-color-on-surface-variant);
+      transition: background-color 0.2s ease, color 0.2s ease;
     }
 
     button:hover {
-      background: var(--md-sys-color-surface-variant);
+      background: var(--md-sys-color-secondary-container);
+      color: var(--md-sys-color-on-secondary-container);
     }
 
     button svg {
-      width: 18px;
-      height: 18px;
+      width: 20px;
+      height: 20px;
       fill: currentColor;
     }
   `;
-V([
+F([
   a({ type: Object })
 ], R.prototype, "panZoom", 2);
-R = V([
+R = F([
   z("lit-controls")
 ], R);
-var _t = Object.defineProperty, bt = Object.getOwnPropertyDescriptor, w = (t, o, e, n) => {
-  for (var s = n > 1 ? void 0 : n ? bt(o, e) : o, r = t.length - 1, i; r >= 0; r--)
+var vt = Object.defineProperty, wt = Object.getOwnPropertyDescriptor, $ = (t, o, e, n) => {
+  for (var s = n > 1 ? void 0 : n ? wt(o, e) : o, r = t.length - 1, i; r >= 0; r--)
     (i = t[r]) && (s = (n ? i(o, e, s) : i(s)) || s);
-  return n && s && _t(o, e, s), s;
+  return n && s && vt(o, e, s), s;
 };
 let y = class extends B(P) {
   constructor() {
@@ -873,7 +948,7 @@ let y = class extends B(P) {
   updated(t) {
     if (!this._minimapInstance && this.panZoom) {
       const o = this.shadowRoot?.querySelector("svg");
-      o && (this._minimapInstance = st({
+      o && (this._minimapInstance = it({
         domNode: o,
         panZoom: this.panZoom,
         getTransform: () => this.transform,
@@ -896,7 +971,7 @@ let y = class extends B(P) {
       width: this.width / this.transform[2],
       height: this.height / this.transform[2]
     };
-    return this.nodeLookup.size > 0 ? nt(rt(this.nodeLookup), t) : t;
+    return this.nodeLookup.size > 0 ? at(dt(this.nodeLookup), t) : t;
   }
   render() {
     const t = this._getBoundingRect(), o = {
@@ -904,22 +979,22 @@ let y = class extends B(P) {
       y: -this.transform[1] / this.transform[2],
       width: this.width / this.transform[2],
       height: this.height / this.transform[2]
-    }, e = 200, n = 150, s = t.width / e, r = t.height / n, i = Math.max(s, r), h = i * e, p = i * n, d = 5 * i, c = t.x - (h - t.width) / 2 - d, l = t.y - (p - t.height) / 2 - d, f = h + d * 2, v = p + d * 2;
-    return $`
+    }, e = 200, n = 150, s = t.width / e, r = t.height / n, i = Math.max(s, r), p = i * e, h = i * n, d = 5 * i, u = t.x - (p - t.width) / 2 - d, l = t.y - (h - t.height) / 2 - d, m = p + d * 2, O = h + d * 2;
+    return v`
       <svg
         width="${e}"
         height="${n}"
-        viewBox="${c} ${l} ${f} ${v}"
+        viewBox="${u} ${l} ${m} ${O}"
       >
-        ${Array.from(this.nodeLookup.values()).map((C) => {
-      const { x: D, y: W } = C.internals.positionAbsolute, G = C.measured.width || 0, q = C.measured.height || 0;
+        ${Array.from(this.nodeLookup.values()).map((k) => {
+      const { x: C, y: G } = k.internals.positionAbsolute, K = k.measured.width || 0, U = k.measured.height || 0;
       return Z`
             <rect
               class="minimap-node"
-              x="${D}"
-              y="${W}"
-              width="${G}"
-              height="${q}"
+              x="${C}"
+              y="${G}"
+              width="${K}"
+              height="${U}"
               rx="2"
               ry="2"
             />
@@ -927,23 +1002,23 @@ let y = class extends B(P) {
     })}
         <path
           class="minimap-mask"
-          d="M${c - d},${l - d}h${f + d * 2}v${v + d * 2}h${-f - d * 2}z
+          d="M${u - d},${l - d}h${m + d * 2}v${O + d * 2}h${-m - d * 2}z
              M${o.x},${o.y}h${o.width}v${o.height}h${-o.width}z"
         />
       </svg>
     `;
   }
 };
-y.styles = A`
+y.styles = I`
     :host {
       display: block;
       position: absolute;
-      right: 10px;
-      bottom: 10px;
+      right: 16px;
+      bottom: 16px;
       z-index: 5;
       background: var(--md-sys-color-surface);
       border: 1px solid var(--md-sys-color-outline-variant);
-      border-radius: var(--md-sys-shape-corner-extra-small);
+      border-radius: var(--md-sys-shape-corner-small);
       box-shadow: var(--md-sys-elevation-1);
       overflow: hidden;
     }
@@ -955,7 +1030,7 @@ y.styles = A`
     .minimap-node {
       fill: var(--md-sys-color-surface-variant);
       stroke: var(--md-sys-color-outline-variant);
-      stroke-width: 1;
+      stroke-width: 0.5;
     }
 
     .minimap-mask {
@@ -963,38 +1038,130 @@ y.styles = A`
       fill-rule: evenodd;
     }
   `;
-w([
+$([
   a({ type: Object })
 ], y.prototype, "panZoom", 2);
-w([
+$([
   a({ type: Object })
 ], y.prototype, "nodeLookup", 2);
-w([
+$([
   a({ type: Array })
 ], y.prototype, "transform", 2);
-w([
+$([
   a({ type: Array })
 ], y.prototype, "translateExtent", 2);
-w([
+$([
   a({ type: Number })
 ], y.prototype, "width", 2);
-w([
+$([
   a({ type: Number })
 ], y.prototype, "height", 2);
-w([
-  S()
+$([
+  N()
 ], y.prototype, "_minimapInstance", 2);
-y = w([
+y = $([
   z("lit-minimap")
 ], y);
+var xt = Object.defineProperty, $t = Object.getOwnPropertyDescriptor, q = (t, o, e, n) => {
+  for (var s = n > 1 ? void 0 : n ? $t(o, e) : o, r = t.length - 1, i; r >= 0; r--)
+    (i = t[r]) && (s = (n ? i(o, e, s) : i(s)) || s);
+  return n && s && xt(o, e, s), s;
+};
+let j = class extends P {
+  constructor() {
+    super(...arguments), this.nodeTypes = [
+      { type: "default", label: "Default Node" },
+      { type: "input", label: "Input Node" },
+      { type: "output", label: "Output Node" }
+    ];
+  }
+  _onDragStart(t, o) {
+    t.dataTransfer && (t.dataTransfer.setData("application/litflow", o), t.dataTransfer.effectAllowed = "move");
+  }
+  render() {
+    return v`
+      <div class="sidebar-title">Node Palette</div>
+      <div class="node-palette">
+        ${this.nodeTypes.map(
+      (t) => v`
+            <div
+              class="palette-item"
+              draggable="true"
+              @dragstart="${(o) => this._onDragStart(o, t.type)}"
+            >
+              ${t.label}
+            </div>
+          `
+    )}
+      </div>
+    `;
+  }
+};
+j.styles = [
+  W,
+  I`
+    :host {
+      display: block;
+      width: 200px;
+      background: var(--md-sys-color-surface);
+      border-right: 1px solid var(--md-sys-color-outline-variant);
+      padding: 16px;
+      box-sizing: border-box;
+      height: 100%;
+    }
+
+    .sidebar-title {
+      font-family: var(--md-sys-typescale-body-medium-font);
+      font-size: var(--md-sys-typescale-label-medium-size);
+      color: var(--md-sys-color-on-surface-variant);
+      text-transform: uppercase;
+      font-weight: bold;
+      margin-bottom: 16px;
+    }
+
+    .node-palette {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+    }
+
+    .palette-item {
+      padding: 12px;
+      background: var(--md-sys-color-surface-container-low);
+      border: 1px solid var(--md-sys-color-outline-variant);
+      border-radius: var(--md-sys-shape-corner-small);
+      cursor: grab;
+      font-family: var(--md-sys-typescale-body-medium-font);
+      font-size: var(--md-sys-typescale-body-medium-size);
+      color: var(--md-sys-color-on-surface);
+      user-select: none;
+      transition: background-color 0.2s ease;
+    }
+
+    .palette-item:hover {
+      background: var(--md-sys-color-surface-container-high);
+    }
+
+    .palette-item:active {
+      cursor: grabbing;
+    }
+  `
+];
+q([
+  a({ type: Array })
+], j.prototype, "nodeTypes", 2);
+j = q([
+  z("lit-sidebar")
+], j);
 export {
   R as LitControls,
-  m as LitEdge,
-  u as LitFlow,
-  O as LitHandle,
+  g as LitEdge,
+  c as LitFlow,
+  D as LitHandle,
   y as LitMinimap,
-  x as LitNode,
-  at as createInitialState,
-  it as m3Tokens
+  b as LitNode,
+  j as LitSidebar,
+  lt as createInitialState,
+  W as m3Tokens
 };
 //# sourceMappingURL=litflow.js.map