@workflow-vue/ui 0.0.1

package/dist/index.css

@@ -0,0 +1 @@
+[data-v-5d9eb27b] .vue-flow__node-resizer{z-index:100}.vue-flow{position:relative;width:100%;height:100%;overflow:hidden;z-index:0;direction:ltr}.vue-flow__container{position:absolute;height:100%;width:100%;left:0;top:0}.vue-flow__pane{z-index:1}.vue-flow__pane.draggable{cursor:grab}.vue-flow__pane.selection{cursor:pointer}.vue-flow__pane.dragging{cursor:grabbing}.vue-flow__transformationpane{transform-origin:0 0;z-index:2;pointer-events:none}.vue-flow__viewport{z-index:4;overflow:clip}.vue-flow__selection{z-index:6}.vue-flow__edge-labels{position:absolute;width:100%;height:100%;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vue-flow__nodesselection-rect:focus,.vue-flow__nodesselection-rect:focus-visible{outline:none}.vue-flow .vue-flow__edges{pointer-events:none;overflow:visible}.vue-flow__edge-path,.vue-flow__connection-path{stroke:#b1b1b7;stroke-width:1;fill:none}.vue-flow__edge{pointer-events:visibleStroke;cursor:pointer}.vue-flow__edge.animated path{stroke-dasharray:5;animation:dashdraw .5s linear infinite}.vue-flow__edge.animated path.vue-flow__edge-interaction{stroke-dasharray:none;animation:none}.vue-flow__edge.inactive{pointer-events:none}.vue-flow__edge.selected,.vue-flow__edge:focus,.vue-flow__edge:focus-visible{outline:none}.vue-flow__edge.selected .vue-flow__edge-path,.vue-flow__edge:focus .vue-flow__edge-path,.vue-flow__edge:focus-visible .vue-flow__edge-path{stroke:#555}.vue-flow__edge-textwrapper{pointer-events:all}.vue-flow__edge-textbg{fill:#fff}.vue-flow__edge-text{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vue-flow__connection{pointer-events:none}.vue-flow__connection .animated{stroke-dasharray:5;animation:dashdraw .5s linear infinite}.vue-flow__connectionline{z-index:1001}.vue-flow__nodes{pointer-events:none;transform-origin:0 0}.vue-flow__node{position:absolute;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:all;transform-origin:0 0;box-sizing:border-box;cursor:default}.vue-flow__node.draggable{cursor:grab;pointer-events:all}.vue-flow__node.draggable.dragging{cursor:grabbing}.vue-flow__nodesselection{z-index:3;transform-origin:left top;pointer-events:none}.vue-flow__nodesselection-rect{position:absolute;pointer-events:all;cursor:grab}.vue-flow__nodesselection-rect.dragging{cursor:grabbing}.vue-flow__handle{position:absolute;pointer-events:none;min-width:5px;min-height:5px}.vue-flow__handle.connectable{pointer-events:all;cursor:crosshair}.vue-flow__handle-bottom{left:50%;bottom:0;transform:translate(-50%,50%)}.vue-flow__handle-top{left:50%;top:0;transform:translate(-50%,-50%)}.vue-flow__handle-left{top:50%;left:0;transform:translate(-50%,-50%)}.vue-flow__handle-right{top:50%;right:0;transform:translate(50%,-50%)}.vue-flow__edgeupdater{cursor:move;pointer-events:all}.vue-flow__panel{position:absolute;z-index:5;margin:15px}.vue-flow__panel.top{top:0}.vue-flow__panel.bottom{bottom:0}.vue-flow__panel.left{left:0}.vue-flow__panel.right{right:0}.vue-flow__panel.center{left:50%;transform:translate(-50%)}@keyframes dashdraw{0%{stroke-dashoffset:10}}.vue-flow__controls{box-shadow:0 0 2px 1px #00000014}.vue-flow__controls-button{background:#fefefe;border:none;border-bottom:1px solid #eee;box-sizing:content-box;display:flex;justify-content:center;align-items:center;width:16px;height:16px;cursor:pointer;-webkit-user-select:none;user-select:none;padding:5px}.vue-flow__controls-button svg{width:100%;max-width:12px;max-height:12px}.vue-flow__controls-button:hover{background:#f4f4f4}.vue-flow__controls-button:disabled{pointer-events:none}.vue-flow__controls-button:disabled svg{fill-opacity:.4}.vue-flow__minimap{background-color:#fff}.vue-flow__minimap.pannable{cursor:grab}.vue-flow__minimap.dragging{cursor:grabbing}.vue-flow__minimap-mask.pannable{cursor:grab}.vue-flow__selection{background:#3b82f61a;border:2px dashed rgb(59,130,246)}

package/dist/index.js

@@ -0,0 +1,444 @@
+import { watch as ee, computed as _, toValue as T, unref as c, defineComponent as z, createElementBlock as N, openBlock as g, normalizeClass as P, createVNode as w, createElementVNode as o, createCommentVNode as H, toDisplayString as D, createSlots as te, withCtx as B, normalizeProps as W, guardReactiveProps as M, renderList as F, createBlock as K, resolveDynamicComponent as q, Fragment as oe, createTextVNode as X } from "vue";
+import { Handle as V, Position as j, useVueFlow as ne, VueFlow as se, SelectionMode as ie } from "@vue-flow/core";
+import { Background as re } from "@vue-flow/background";
+import { Controls as de } from "@vue-flow/controls";
+import { MiniMap as le } from "@vue-flow/minimap";
+import { useFlowStore as O, registry as A } from "@workflow-vue/core";
+import { NodeResizer as ae } from "@vue-flow/node-resizer";
+const ce = typeof window < "u" && typeof document < "u";
+typeof WorkerGlobalScope < "u" && globalThis instanceof WorkerGlobalScope;
+const ue = Object.prototype.toString, pe = (t) => ue.call(t) === "[object Object]";
+function R(t) {
+  return Array.isArray(t) ? t : [t];
+}
+function fe(t, e, n) {
+  return ee(t, e, {
+    ...n,
+    immediate: !0
+  });
+}
+const J = ce ? window : void 0;
+function ge(t) {
+  var e;
+  const n = T(t);
+  return (e = n?.$el) !== null && e !== void 0 ? e : n;
+}
+function ye(...t) {
+  const e = (i, l, d, f) => (i.addEventListener(l, d, f), () => i.removeEventListener(l, d, f)), n = _(() => {
+    const i = R(T(t[0])).filter((l) => l != null);
+    return i.every((l) => typeof l != "string") ? i : void 0;
+  });
+  return fe(() => {
+    var i, l;
+    return [
+      (i = (l = n.value) === null || l === void 0 ? void 0 : l.map((d) => ge(d))) !== null && i !== void 0 ? i : [J].filter((d) => d != null),
+      R(T(n.value ? t[1] : t[0])),
+      R(c(n.value ? t[2] : t[1])),
+      T(n.value ? t[3] : t[2])
+    ];
+  }, ([i, l, d, f], y, r) => {
+    if (!i?.length || !l?.length || !d?.length) return;
+    const v = pe(f) ? { ...f } : f, C = i.flatMap(($) => l.flatMap((G) => d.map((s) => e($, G, s, v))));
+    r(() => {
+      C.forEach(($) => $());
+    });
+  }, { flush: "post" });
+}
+function me(t) {
+  return typeof t == "function" ? t : typeof t == "string" ? (e) => e.key === t : Array.isArray(t) ? (e) => t.includes(e.key) : () => !0;
+}
+function L(...t) {
+  let e, n, i = {};
+  t.length === 3 ? (e = t[0], n = t[1], i = t[2]) : t.length === 2 ? typeof t[1] == "object" ? (e = !0, n = t[0], i = t[1]) : (e = t[0], n = t[1]) : (e = !0, n = t[0]);
+  const { target: l = J, eventName: d = "keydown", passive: f = !1, dedupe: y = !1 } = i, r = me(e);
+  return ye(l, d, (C) => {
+    C.repeat && T(y) || r(C) && n(C);
+  }, f);
+}
+const ve = { class: "absolute -top-6 left-0 flex items-center gap-2" }, xe = { class: "text-xs font-medium text-blue-900 opacity-60 group-hover:opacity-100 transition-opacity" }, be = {
+  key: 0,
+  class: "absolute inset-0 border-2 border-dashed border-blue-400 rounded-2xl pointer-events-none animate-pulse"
+}, Y = "#3b82f6", he = /* @__PURE__ */ z({
+  __name: "GroupNode",
+  props: {
+    id: {},
+    data: {},
+    selected: { type: Boolean }
+  },
+  setup(t) {
+    const e = t, n = O(), i = _(() => n.hoveredNodeId === e.id);
+    return (l, d) => (g(), N("div", {
+      class: P(["w-full h-full rounded-2xl transition-all duration-300 relative group", [
+        "bg-blue-50/30 border-2",
+        t.selected ? "border-blue-500 ring-4 ring-blue-500/10" : "border-blue-200/50",
+        i.value ? "bg-blue-100/40 border-blue-400" : ""
+      ]])
+    }, [
+      w(c(ae), {
+        "is-visible": t.selected,
+        "min-width": 150,
+        "min-height": 100,
+        "line-style": { borderColor: Y, borderWidth: "2px" },
+        "handle-style": {
+          width: "12px",
+          height: "12px",
+          backgroundColor: "white",
+          border: `2px solid ${Y}`,
+          borderRadius: "4px"
+        }
+      }, null, 8, ["is-visible", "line-style", "handle-style"]),
+      o("div", ve, [
+        d[0] || (d[0] = o("div", { class: "px-2 py-0.5 bg-blue-500 rounded text-[10px] font-bold text-white uppercase tracking-wider shadow-sm" }, " Group ", -1)),
+        o("div", xe, D(t.data.title), 1)
+      ]),
+      i.value ? (g(), N("div", be)) : H("", !0),
+      w(c(V), {
+        type: "target",
+        position: c(j).Left,
+        class: "!opacity-0"
+      }, null, 8, ["position"]),
+      w(c(V), {
+        type: "source",
+        position: c(j).Right,
+        class: "!opacity-0"
+      }, null, 8, ["position"])
+    ], 2));
+  }
+}), Ne = (t, e) => {
+  const n = t.__vccOpts || t;
+  for (const [i, l] of e)
+    n[i] = l;
+  return n;
+}, we = /* @__PURE__ */ Ne(he, [["__scopeId", "data-v-5d9eb27b"]]), Fe = /* @__PURE__ */ z({
+  __name: "CanvasView",
+  setup(t) {
+    const e = O(), {
+      onConnect: n,
+      onNodeDrag: i,
+      onNodeDragStop: l,
+      findNode: d,
+      getIntersectingNodes: f,
+      screenToFlowCoordinate: y
+    } = ne();
+    n((s) => {
+      e.onConnect(s);
+    });
+    const r = (s) => {
+      s.preventDefault(), s.dataTransfer && (s.dataTransfer.dropEffect = "move");
+      const u = y({
+        x: s.clientX,
+        y: s.clientY
+      }), p = e.nodes.filter((h) => h.type === "group").find((h) => {
+        const m = d(h.id);
+        if (!m) return !1;
+        const k = m.computedPosition?.x ?? m.position.x, I = m.computedPosition?.y ?? m.position.y, S = m.dimensions?.width ?? m.width ?? 200, x = m.dimensions?.height ?? m.height ?? 150;
+        return u.x >= k && u.x <= k + S && u.y >= I && u.y <= I + x;
+      });
+      p ? e.setHoveredNode(p.id) : e.setHoveredNode(null);
+    }, v = (s) => {
+      e.setHoveredNode(null);
+      const u = s.dataTransfer?.getData("application/vueflow");
+      if (!u) return;
+      const a = y({
+        x: s.clientX,
+        y: s.clientY
+      }), p = e.nodes.filter((x) => x.type === "group");
+      let h, m = a;
+      const k = p.find((x) => {
+        const b = d(x.id);
+        if (!b) return !1;
+        const E = b.computedPosition?.x ?? b.position.x, U = b.computedPosition?.y ?? b.position.y, Q = b.dimensions?.width ?? b.width ?? 200, Z = b.dimensions?.height ?? b.height ?? 150;
+        return a.x >= E && a.x <= E + Q && a.y >= U && a.y <= U + Z;
+      });
+      if (k) {
+        const x = d(k.id);
+        if (x) {
+          h = k.id;
+          const b = x.computedPosition?.x ?? x.position.x, E = x.computedPosition?.y ?? x.position.y;
+          m = {
+            x: a.x - b,
+            y: a.y - E
+          };
+        }
+      }
+      const I = {
+        parentNode: h,
+        expandParent: !!h,
+        // If creating a group, give it initial size so it's not tiny
+        ...u === "group" ? { width: 300, height: 200 } : {}
+      }, S = {
+        id: crypto.randomUUID(),
+        type: u,
+        position: m,
+        data: {
+          title: `New ${u.charAt(0).toUpperCase() + u.slice(1)}`,
+          config: {}
+        },
+        ...I
+        // Spread options into node object if needed locally, but we pass to store
+      };
+      e.addNode(S.type, S.position, S.data, I);
+    };
+    i(({ node: s }) => {
+      const a = f(s).find((p) => p.type === "group");
+      a ? e.setHoveredNode(a.id) : e.setHoveredNode(null);
+    }), l(({ node: s }) => {
+      e.setHoveredNode(null);
+      const a = f(s).find((p) => p.type === "group");
+      if (a) {
+        if (s.parentNode !== a.id) {
+          const p = d(a.id);
+          if (p) {
+            const h = {
+              x: s.position.x - p.position.x,
+              y: s.position.y - p.position.y
+            };
+            e.updateNode(s.id, {
+              parentNode: a.id,
+              position: h,
+              expandParent: !0
+            });
+          }
+        }
+      } else if (s.parentNode) {
+        const p = { ...s.computedPosition };
+        e.updateNode(s.id, {
+          parentNode: void 0,
+          position: p
+        });
+      }
+    });
+    function C() {
+    }
+    function $({ node: s }) {
+      e.selectNode(s.id);
+    }
+    function G() {
+      e.selectNode(null);
+    }
+    return L(["c", "C"], (s) => {
+      (s.ctrlKey || s.metaKey) && !s.shiftKey && !s.altKey && (s.preventDefault(), e.copySelectedNodes());
+    }), L(["v", "V"], (s) => {
+      (s.ctrlKey || s.metaKey) && !s.shiftKey && !s.altKey && (s.preventDefault(), e.pasteNodes());
+    }), L(["Delete", "Backspace"], () => {
+      e.nodes.filter((u) => u.selected).forEach((u) => {
+        e.removeNode(u.id);
+      });
+    }), (s, u) => (g(), N("div", {
+      class: "h-full w-full",
+      onDrop: v,
+      onDragover: r
+    }, [
+      w(c(se), {
+        nodes: c(e).nodes,
+        "onUpdate:nodes": u[0] || (u[0] = (a) => c(e).nodes = a),
+        edges: c(e).edges,
+        "onUpdate:edges": u[1] || (u[1] = (a) => c(e).edges = a),
+        "default-viewport": { zoom: 1 },
+        "min-zoom": 0.2,
+        "max-zoom": 4,
+        "selection-mode": c(ie).Partial,
+        onPaneReady: C,
+        onNodeClick: $,
+        onPaneClick: G
+      }, te({
+        "node-group": B((a) => [
+          w(we, W(M(a)), null, 16)
+        ]),
+        default: B(() => [
+          w(c(re), {
+            "pattern-color": "#aaa",
+            gap: 16
+          }),
+          w(c(de)),
+          w(c(le))
+        ]),
+        _: 2
+      }, [
+        F(c(A).getAllDefinitions(), (a) => ({
+          name: `node-${a.type}`,
+          fn: B((p) => [
+            (g(), K(q(a.component), W(M(p)), null, 16))
+          ])
+        }))
+      ]), 1032, ["nodes", "edges", "selection-mode"])
+    ], 32));
+  }
+}), Ce = { class: "w-64 bg-white border-r border-gray-200 flex flex-col z-10" }, _e = { class: "flex-1 overflow-y-auto p-3 space-y-2" }, ke = ["onDragstart"], Pe = { class: "text-sm font-medium text-gray-700" }, De = { class: "text-[10px] text-gray-400" }, qe = /* @__PURE__ */ z({
+  __name: "NodePalette",
+  setup(t) {
+    const e = _(() => A.getAllDefinitions()), n = (i, l) => {
+      i.dataTransfer && (i.dataTransfer.setData("application/vueflow", l), i.dataTransfer.effectAllowed = "move");
+    };
+    return (i, l) => (g(), N("aside", Ce, [
+      l[0] || (l[0] = o("div", { class: "p-4 border-b border-gray-100" }, [
+        o("h2", { class: "font-medium text-gray-900" }, "Components"),
+        o("p", { class: "text-xs text-gray-500 mt-1" }, "Drag nodes to the canvas")
+      ], -1)),
+      o("div", _e, [
+        (g(!0), N(oe, null, F(e.value, (d) => (g(), N("div", {
+          key: d.type,
+          class: "group flex items-center gap-3 p-2 rounded-lg border border-transparent hover:border-gray-200 hover:bg-gray-50 cursor-grab active:cursor-grabbing transition",
+          draggable: "true",
+          onDragstart: (f) => n(f, d.type)
+        }, [
+          o("div", {
+            class: P([
+              d.color,
+              "w-8 h-8 rounded-lg flex items-center justify-center text-white shrink-0",
+              d.type === "group" ? "text-gray-600" : ""
+              // Special handling for group text color
+            ])
+          }, [
+            o("div", {
+              class: P([d.icon, "text-lg"])
+            }, null, 2)
+          ], 2),
+          o("div", null, [
+            o("div", Pe, D(d.label), 1),
+            o("div", De, D(d.description), 1)
+          ])
+        ], 40, ke))), 128))
+      ])
+    ]));
+  }
+}), $e = {
+  key: 0,
+  class: "w-80 bg-white border-l border-gray-200 flex flex-col z-20 shadow-lg transition-transform"
+}, Ie = { class: "p-4 border-b border-gray-100 flex items-center justify-between bg-gray-50/50" }, Se = { class: "text-xs text-gray-500 mt-0.5 font-mono text-opacity-80" }, Te = { class: "flex-1 overflow-y-auto p-4 space-y-6" }, ze = { class: "space-y-4" }, Ee = ["value"], He = ["value"], Ke = { class: "space-y-4" }, Ve = {
+  key: 1,
+  class: "text-center py-8 text-gray-400"
+}, je = { class: "p-4 border-t border-gray-200 bg-gray-50 flex gap-2" }, Je = /* @__PURE__ */ z({
+  __name: "InspectorPanel",
+  setup(t) {
+    const e = O(), n = _(() => e.nodes.find((y) => y.id === e.selectedNodeId)), i = _(() => !!n.value), l = (y, r) => {
+      if (e.selectedNodeId && n.value) {
+        const v = n.value.data.config || {};
+        e.updateNodeData(e.selectedNodeId, {
+          config: { ...v, [y]: r }
+        });
+      }
+    }, d = (y, r) => {
+      e.selectedNodeId && e.updateNodeData(e.selectedNodeId, { [y]: r });
+    }, f = () => {
+      e.selectNode(null);
+    };
+    return (y, r) => i.value ? (g(), N("aside", $e, [
+      o("div", Ie, [
+        o("div", null, [
+          r[3] || (r[3] = o("h2", { class: "font-semibold text-gray-900 leading-tight" }, "Configuration", -1)),
+          o("p", Se, D(n.value?.type) + " node ", 1)
+        ]),
+        o("button", {
+          onClick: f,
+          class: "icon-btn"
+        }, [...r[4] || (r[4] = [
+          o("div", { class: "i-ph-x text-lg" }, null, -1)
+        ])])
+      ]),
+      o("div", Te, [
+        o("div", ze, [
+          o("div", null, [
+            r[5] || (r[5] = o("label", { class: "block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1.5 align-middle" }, [
+              o("span", { class: "i-ph-tag mr-1 inline-block" }),
+              X(" Node Name ")
+            ], -1)),
+            o("input", {
+              value: n.value?.data.title,
+              onInput: r[0] || (r[0] = (v) => d("title", v.target.value)),
+              type: "text",
+              class: "w-full px-3 py-2 bg-gray-50 border border-gray-200 rounded-lg focus:bg-white focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary text-sm transition"
+            }, null, 40, Ee)
+          ]),
+          o("div", null, [
+            r[6] || (r[6] = o("label", { class: "block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1.5" }, "Description", -1)),
+            o("textarea", {
+              value: n.value?.data.description,
+              onInput: r[1] || (r[1] = (v) => d("description", v.target.value)),
+              rows: "2",
+              class: "w-full px-3 py-2 bg-gray-50 border border-gray-200 rounded-lg focus:bg-white focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary text-sm transition resize-none"
+            }, null, 40, He)
+          ])
+        ]),
+        r[9] || (r[9] = o("div", { class: "h-px bg-gray-100 my-2" }, null, -1)),
+        o("div", Ke, [
+          r[8] || (r[8] = o("div", { class: "flex items-center gap-2 mb-2" }, [
+            o("div", { class: "i-ph-sliders-horizontal text-gray-400" }),
+            o("h3", { class: "text-xs font-semibold text-gray-900 uppercase tracking-wider" }, "Parameters")
+          ], -1)),
+          n.value && c(A).getConfigComponent(n.value.type) ? (g(), K(q(c(A).getConfigComponent(n.value.type)), {
+            key: 0,
+            data: n.value.data,
+            "node-id": n.value.id,
+            onUpdate: l
+          }, null, 40, ["data", "node-id"])) : (g(), N("div", Ve, [...r[7] || (r[7] = [
+            o("div", { class: "i-ph-sliders text-4xl mx-auto mb-2 opacity-20" }, null, -1),
+            o("p", { class: "text-sm" }, "No specific configuration for this node type.", -1)
+          ])]))
+        ])
+      ]),
+      o("div", je, [
+        o("button", {
+          onClick: r[2] || (r[2] = (v) => c(e).removeNode(n.value.id)),
+          class: "flex-1 px-4 py-2 rounded-lg border border-red-200 text-red-600 bg-white hover:bg-red-50 hover:border-red-300 transition text-sm font-medium flex items-center justify-center gap-2"
+        }, [...r[10] || (r[10] = [
+          o("div", { class: "i-ph-trash" }, null, -1),
+          X(" Delete ", -1)
+        ])]),
+        r[11] || (r[11] = o("button", {
+          class: "px-4 py-2 rounded-lg border border-gray-200 text-gray-600 bg-white hover:bg-gray-100 transition text-sm font-medium",
+          title: "Duplicate"
+        }, [
+          o("div", { class: "i-ph-copy" })
+        ], -1))
+      ])
+    ])) : H("", !0);
+  }
+}), Ae = { class: "p-3 flex items-start gap-3 border-gray-100" }, Ge = { class: "flex-1 min-w-0" }, Be = { class: "font-medium text-sm text-gray-900 truncate" }, Re = { class: "text-xs text-gray-500 truncate mt-0.5" }, Qe = /* @__PURE__ */ z({
+  __name: "NodeCard",
+  props: {
+    id: {},
+    data: {},
+    selected: { type: Boolean }
+  },
+  setup(t) {
+    const e = t, n = _(() => e.data.icon || "i-ph-cube"), i = _(() => e.data.color || "bg-blue-600");
+    return (l, d) => (g(), N("div", {
+      class: P(["w-64 bg-white rounded-xl shadow-sm border transition-all duration-200", [
+        t.selected ? "border-primary shadow-md ring-2 ring-primary/20" : "border-gray-200 hover:border-gray-300"
+      ]])
+    }, [
+      o("div", Ae, [
+        o("div", {
+          class: P(["w-8 h-8 rounded-lg flex items-center justify-center shrink-0 text-white", i.value])
+        }, [
+          o("div", {
+            class: P([n.value, "text-lg"])
+          }, null, 2)
+        ], 2),
+        o("div", Ge, [
+          o("h3", Be, D(t.data.title), 1),
+          o("p", Re, D(t.data.description || "No description"), 1)
+        ])
+      ]),
+      t.data.isStart ? H("", !0) : (g(), K(c(V), {
+        key: 0,
+        type: "target",
+        position: c(j).Left,
+        class: "!-ml-1.5"
+      }, null, 8, ["position"])),
+      t.data.isEnd ? H("", !0) : (g(), K(c(V), {
+        key: 1,
+        type: "source",
+        position: c(j).Right,
+        class: "!-mr-1.5"
+      }, null, 8, ["position"]))
+    ], 2));
+  }
+});
+export {
+  Fe as CanvasView,
+  Je as InspectorPanel,
+  Qe as NodeCard,
+  qe as NodePalette
+};

package/dist/src/components/CanvasView.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+export default _default;

package/dist/src/components/InspectorPanel.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/src/components/NodeCard.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/components/NodeCard.vue.d.ts

@@ -0,0 +1,13 @@
+type __VLS_Props = {
+    id: string;
+    data: {
+        title: string;
+        description?: string;
+        icon?: string;
+        color?: string;
+        [key: string]: any;
+    };
+    selected?: boolean;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

package/dist/src/components/NodePalette.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/components/NodePalette.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLElement>;
+export default _default;

package/dist/src/components/nodes/GroupNode.vue.d.ts

@@ -0,0 +1,8 @@
+import { NodeData } from '../../../../core/src/index.ts';
+type __VLS_Props = {
+    id: string;
+    data: NodeData;
+    selected?: boolean;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

package/dist/src/index.d.ts

@@ -0,0 +1,5 @@
+export { default as CanvasView } from './components/CanvasView.vue';
+export { default as NodePalette } from './components/NodePalette.vue';
+export { default as InspectorPanel } from './components/InspectorPanel.vue';
+export { default as NodeCard } from './components/NodeCard.vue';
+export * from './components/nodes/GroupNode.vue';

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@workflow-vue/ui",
+  "version": "0.0.1",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite"
+  },
+  "dependencies": {
+    "@vue-flow/background": "^1.3.2",
+    "@vue-flow/controls": "^1.1.3",
+    "@vue-flow/core": "^1.48.0",
+    "@vue-flow/minimap": "^1.5.4",
+    "@vue-flow/node-resizer": "^1.5.0",
+    "@workflow-vue/core": "workspace:*",
+    "vue": "^3.5.24"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.1",
+    "@vue/tsconfig": "^0.8.1",
+    "typescript": "~5.9.3",
+    "unocss": "^66.5.10",
+    "vite": "^7.2.4",
+    "vite-plugin-dts": "^4.5.3"
+  }
+}