@revenexx/studio-integrations 0.1.4 → 0.2.0

package/dist/runtime/components/Integrations/WorkflowEditor.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, markRaw, nextTick, ref, watch } from "vue";
+import { computed, markRaw, nextTick, provide, ref, watch } from "vue";
 import {
   ConnectionLineType,
   MarkerType,
@@ -9,24 +9,50 @@ import {
   useVueFlow
 } from "@vue-flow/core";
 import { Background } from "@vue-flow/background";
-import { Controls } from "@vue-flow/controls";
 import { MiniMap } from "@vue-flow/minimap";
-import { Widget as LayoutGrid, AddCircle as Plus, MagicStick as Sparkles } from "#solar-icons";
+import {
+  Widget as LayoutGrid,
+  MagicStick as Sparkles,
+  Play,
+  MinusCircle as ZoomOut,
+  AddCircle as ZoomIn,
+  RefreshCircle as Loader2
+} from "#solar-icons";
+import {
+  Dialog,
+  DialogContent,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  TooltipProvider
+} from "@revenexx/studio";
+import { Braces, EllipsisVertical, GripVertical, Group as GroupIcon, Hand, Map as MapIcon, Minus, MousePointer2, Plus, Settings2, StickyNote } from "lucide-vue-next";
 import "@vue-flow/core/dist/style.css";
 import "@vue-flow/core/dist/theme-default.css";
-import "@vue-flow/controls/dist/style.css";
 import "@vue-flow/minimap/dist/style.css";
 import NodePalette from "./NodePalette.vue";
 import NodeInspector from "./NodeInspector.vue";
+import NodeDynamicOutputsResolver from "./NodeDynamicOutputsResolver.vue";
 import WorkflowNodeView from "./WorkflowNodeView.vue";
 import WorkflowTriggerView from "./WorkflowTriggerView.vue";
+import StickyNoteView from "./StickyNoteView.vue";
+import GroupFrameView from "./GroupFrameView.vue";
+import WorkflowContextMenu, {} from "./WorkflowContextMenu.vue";
+import WorkflowVariablesDialog from "./WorkflowVariablesDialog.vue";
+import { useCanvasShortcuts } from "../../composables/useCanvasShortcuts";
+import { usePaletteLayout } from "../../composables/usePaletteLayout";
+import { useMiniMapLayout } from "../../composables/useMiniMapLayout";
+import { toast } from "vue-sonner";
 import WorkflowEdgeView from "./WorkflowEdgeView.vue";
 import { layoutWorkflowNodes } from "./workflowLayout";
 import { TRIGGER_TEMPLATES, findManifest } from "../../data/integrationNodeCatalog";
 const props = defineProps({
-  workflow: { type: Object, required: true }
+  workflow: { type: Object, required: true },
+  runBusy: { type: Boolean, required: false }
 });
-const emit = defineEmits(["change"]);
+const emit = defineEmits(["change", "run", "toggleActive", "openSettings"]);
 const { keys: secretKeys } = useIntegrationsSecrets();
 const blob = ref(clone(props.workflow.blob));
 watch(() => props.workflow.id, () => {
@@ -38,6 +64,12 @@ function clone(v) {
 }
 const vfNodes = ref([]);
 const vfEdges = ref([]);
+const flow = useVueFlow();
+const dynamicOutputs = ref({});
+const dynamicOutputNodes = computed(() => blob.value.nodes.filter((n) => {
+  const m = findManifest(n.nodeSlug, n.nodeVersion);
+  return (m?.outputs ?? []).some((o) => o.resolveOutputs === true);
+}));
 function edgeKindFromPort(sourceNodeId, output) {
   const wn = blob.value.nodes.find((n) => n.id === sourceNodeId);
   if (!wn) return "default";
@@ -65,40 +97,195 @@ function stripSide(handleId) {
   const i = handleId.indexOf("__");
   return i >= 0 ? handleId.slice(0, i) : handleId;
 }
+function triggerPosition(id, index) {
+  const saved = blob.value.triggerPositions?.[id];
+  if (saved) return { x: saved.x, y: saved.y };
+  return { x: -40, y: 60 + index * 140 };
+}
 function nodePosition(id) {
   const wn = blob.value.nodes.find((n) => n.id === id);
   if (wn) return { x: wn.position?.x ?? 0, y: wn.position?.y ?? 0 };
   const ti = blob.value.triggers.findIndex((t) => t.id === id);
-  if (ti >= 0) return { x: -40, y: 60 + ti * 140 };
+  if (ti >= 0) return triggerPosition(id, ti);
   return { x: 0, y: 0 };
 }
-function pickSourceSide(sourceId, targetId) {
-  const a = nodePosition(sourceId);
-  const b = nodePosition(targetId);
-  const dx = b.x - a.x;
-  const dy = b.y - a.y;
-  if (Math.abs(dx) * 1.1 > Math.abs(dy)) return dx >= 0 ? "right" : "left";
-  return dy >= 0 ? "bottom" : "top";
+function pickSourceSide(_sourceId, _targetId) {
+  return "bottom";
 }
 function oppositeSide(s) {
   return s === "top" ? "bottom" : s === "right" ? "left" : s === "bottom" ? "top" : "right";
 }
+function stickyArea(s) {
+  return (s.size?.width ?? 240) * (s.size?.height ?? 160);
+}
+const GROUP_PAD = 24;
+const GROUP_LABEL_ROOM = 26;
+function locText(v) {
+  if (!v) return "";
+  return typeof v === "string" ? v : v.en ?? Object.values(v)[0] ?? "";
+}
+function memberDims(id) {
+  const d = flow.findNode(id)?.dimensions;
+  return d && d.width > 0 ? d : { width: 220, height: 64 };
+}
+function groupRect(g) {
+  let minX = Number.POSITIVE_INFINITY;
+  let minY = Number.POSITIVE_INFINITY;
+  let maxX = Number.NEGATIVE_INFINITY;
+  let maxY = Number.NEGATIVE_INFINITY;
+  for (const id of g.nodeIds) {
+    const pos = nodePosition(id);
+    const dims = memberDims(id);
+    minX = Math.min(minX, pos.x);
+    minY = Math.min(minY, pos.y);
+    maxX = Math.max(maxX, pos.x + dims.width);
+    maxY = Math.max(maxY, pos.y + dims.height);
+  }
+  if (!Number.isFinite(minX)) return g.rect ?? { x: 120, y: 120, width: 220, height: 120 };
+  const derived = {
+    x: Math.round(minX - GROUP_PAD),
+    y: Math.round(minY - GROUP_PAD - GROUP_LABEL_ROOM),
+    width: Math.round(maxX - minX + GROUP_PAD * 2),
+    height: Math.round(maxY - minY + GROUP_PAD * 2 + GROUP_LABEL_ROOM)
+  };
+  const r = g.rect;
+  if (!r) return derived;
+  const x = Math.min(r.x, derived.x);
+  const y = Math.min(r.y, derived.y);
+  return {
+    x,
+    y,
+    width: Math.max(r.x + r.width, derived.x + derived.width) - x,
+    height: Math.max(r.y + r.height, derived.y + derived.height) - y
+  };
+}
+function collapsedGroupOf() {
+  const m = /* @__PURE__ */ new Map();
+  for (const g of blob.value.groups ?? []) {
+    if (g.collapsed) for (const id of g.nodeIds) m.set(id, g);
+  }
+  return m;
+}
+function patchGroup(id, patch) {
+  const g = blob.value.groups?.find((x) => x.id === id);
+  if (!g) return;
+  Object.assign(g, patch);
+  syncFromBlob();
+  push();
+}
+function ungroup(id) {
+  blob.value.groups = (blob.value.groups ?? []).filter((g) => g.id !== id);
+  syncFromBlob();
+  push();
+}
+function createGroupFromSelection(ids) {
+  const valid = ids.filter((id2) => blob.value.nodes.some((n) => n.id === id2) || blob.value.triggers.some((t) => t.id === id2));
+  if (valid.length < 1) return;
+  for (const g of blob.value.groups ?? []) {
+    g.nodeIds = g.nodeIds.filter((x) => !valid.includes(x));
+  }
+  blob.value.groups = (blob.value.groups ?? []).filter((g) => g.nodeIds.length > 0 || g.rect);
+  const id = `g-${Date.now().toString(36)}${Math.random().toString(36).slice(2, 6)}`;
+  blob.value.groups = [...blob.value.groups ?? [], {
+    id,
+    label: `Group ${(blob.value.groups?.length ?? 0) + 1}`,
+    nodeIds: valid
+  }];
+  syncFromBlob();
+  push();
+}
+const groupDragOrigin = ref(null);
+const bornIds = ref(/* @__PURE__ */ new Set());
+function markBorn(...ids) {
+  for (const id of ids) bornIds.value.add(id);
+  bornIds.value = new Set(bornIds.value);
+  window.setTimeout(() => {
+    for (const id of ids) bornIds.value.delete(id);
+    bornIds.value = new Set(bornIds.value);
+    syncFromBlob();
+  }, 450);
+}
+function bornClass(id) {
+  return bornIds.value.has(id) ? "node-pop-in" : void 0;
+}
 function syncFromBlob() {
+  const stickies = [...blob.value.stickies ?? []].sort((a, b) => stickyArea(b) - stickyArea(a));
+  const collapsedBy = collapsedGroupOf();
+  const groupNodes = (blob.value.groups ?? []).map((g, i) => {
+    const rect = groupRect(g);
+    return {
+      id: g.id,
+      type: "group",
+      position: { x: rect.x, y: rect.y },
+      zIndex: g.collapsed ? 0 : -50 + i,
+      class: bornClass(g.id),
+      data: {
+        group: g,
+        rect: { width: rect.width, height: rect.height },
+        memberCount: g.nodeIds.length,
+        actions: {
+          rename: (label) => patchGroup(g.id, { label }),
+          setColor: (c) => patchGroup(g.id, { color: c }),
+          toggleCollapse: () => patchGroup(g.id, { collapsed: !g.collapsed }),
+          ungroup: () => ungroup(g.id),
+          resize: (size) => patchGroup(g.id, { rect: { x: rect.x, y: rect.y, width: size.width, height: size.height } })
+        }
+      }
+    };
+  });
   vfNodes.value = [
-    ...blob.value.triggers.map((t, i) => ({
+    ...groupNodes,
+    // Stickies render BEHIND workflow/trigger nodes (negative zIndex); larger
+    // notes sit lower so small ones stacked on top stay reachable.
+    ...stickies.map((s, i) => ({
+      id: s.id,
+      type: "sticky",
+      position: { x: s.position.x, y: s.position.y },
+      zIndex: -100 + i,
+      class: bornClass(s.id),
+      data: {
+        sticky: s,
+        onUpdate: (patch) => updateSticky(s.id, patch),
+        onRemove: () => removeBlobNode(s.id)
+      }
+    })),
+    ...blob.value.triggers.filter((t) => !collapsedBy.has(t.id)).map((t, i) => ({
       id: t.id,
       type: "trigger",
-      position: { x: -40, y: 60 + i * 140 },
+      position: triggerPosition(t.id, i),
+      class: bornClass(t.id),
       data: t
     })),
-    ...blob.value.nodes.map((n) => ({
+    ...blob.value.nodes.filter((n) => !collapsedBy.has(n.id)).map((n) => ({
       id: n.id,
       type: "workflow",
       position: n.position ?? { x: 240, y: 80 },
-      data: n
+      class: bornClass(n.id),
+      data: { ...n, __resolvedOutputs: dynamicOutputs.value[n.id] }
     }))
   ];
-  vfEdges.value = blob.value.edges.map((e) => makeVfEdge(e.id, e.from.nodeId, e.to.nodeId, e.from.output));
+  const seenEdge = /* @__PURE__ */ new Set();
+  const mapped = [];
+  for (const e of blob.value.edges) {
+    const srcGroup = collapsedBy.get(e.from.nodeId);
+    const tgtGroup = collapsedBy.get(e.to.nodeId);
+    if (srcGroup && tgtGroup && srcGroup.id === tgtGroup.id) continue;
+    const source = srcGroup?.id ?? e.from.nodeId;
+    const target = tgtGroup?.id ?? e.to.nodeId;
+    const key = `${source}|${srcGroup ? "default" : e.from.output}|${target}`;
+    if (seenEdge.has(key)) continue;
+    seenEdge.add(key);
+    const vf = makeVfEdge(e.id, e.from.nodeId, e.to.nodeId, e.from.output);
+    mapped.push({
+      ...vf,
+      source,
+      target,
+      sourceHandle: srcGroup ? "default__bottom" : vf.sourceHandle,
+      targetHandle: tgtGroup ? "__in__top" : vf.targetHandle
+    });
+  }
+  vfEdges.value = mapped;
+  void nextTick(() => flow.updateNodeInternals(vfNodes.value.map((n) => n.id)));
 }
 function makeVfEdge(id, sourceId, targetId, output) {
   const kind = edgeKindFromPort(sourceId, output);
@@ -143,17 +330,68 @@ function edgeColorByKind(kind) {
   }
 }
 syncFromBlob();
-const flow = useVueFlow();
-flow.onNodeDragStop((evt) => {
-  const id = evt.node.id;
-  if (blob.value.triggers.some((t) => t.id === id)) return;
-  const wn = blob.value.nodes.find((n) => n.id === id);
-  if (!wn) return;
-  wn.position = { x: Math.round(evt.node.position.x), y: Math.round(evt.node.position.y) };
+flow.onPaneReady(() => flow.fitView({ padding: 0.2, maxZoom: 1 }));
+flow.onNodeDragStart(({ node }) => {
+  if (node.type !== "group") return;
+  const g = blob.value.groups?.find((x) => x.id === node.id);
+  if (!g) return;
+  const members = {};
+  for (const id of g.nodeIds) members[id] = nodePosition(id);
+  groupDragOrigin.value = { groupId: node.id, frame: { ...node.position }, members };
+});
+flow.onNodeDrag(({ node }) => {
+  const origin = groupDragOrigin.value;
+  if (!origin || node.type !== "group" || node.id !== origin.groupId) return;
+  const dx = node.position.x - origin.frame.x;
+  const dy = node.position.y - origin.frame.y;
+  for (const [id, pos] of Object.entries(origin.members)) {
+    flow.updateNode(id, { position: { x: pos.x + dx, y: pos.y + dy } });
+  }
+});
+function persistDraggedNodes(evt) {
+  const moved = evt.nodes?.length ? evt.nodes : [evt.node];
+  for (const n of moved) {
+    const pos = { x: Math.round(n.position.x), y: Math.round(n.position.y) };
+    if (n.type === "group") {
+      const origin = groupDragOrigin.value;
+      if (origin && origin.groupId === n.id) {
+        const dx = Math.round(n.position.x - origin.frame.x);
+        const dy = Math.round(n.position.y - origin.frame.y);
+        for (const [id, memberPos] of Object.entries(origin.members)) {
+          const target = { x: Math.round(memberPos.x + dx), y: Math.round(memberPos.y + dy) };
+          if (blob.value.triggers.some((t) => t.id === id)) {
+            blob.value.triggerPositions = { ...blob.value.triggerPositions ?? {}, [id]: target };
+          } else {
+            const wn = blob.value.nodes.find((b) => b.id === id);
+            if (wn) wn.position = target;
+          }
+        }
+        const g = blob.value.groups?.find((x) => x.id === n.id);
+        if (g?.rect) g.rect = { ...g.rect, x: Math.round(g.rect.x + dx), y: Math.round(g.rect.y + dy) };
+        groupDragOrigin.value = null;
+      }
+      continue;
+    }
+    if (blob.value.triggers.some((t) => t.id === n.id)) {
+      blob.value.triggerPositions = { ...blob.value.triggerPositions ?? {}, [n.id]: pos };
+    } else if (blob.value.stickies?.some((s) => s.id === n.id)) {
+      const st = blob.value.stickies.find((s) => s.id === n.id);
+      st.position = pos;
+      continue;
+    } else {
+      const wn = blob.value.nodes.find((b) => b.id === n.id);
+      if (wn) wn.position = pos;
+    }
+    const dims = memberDims(n.id);
+    adoptIntoGroupAt(n.id, { x: pos.x + dims.width / 2, y: pos.y + dims.height / 2 });
+  }
   syncFromBlob();
   push();
-});
+}
+flow.onNodeDragStop(persistDraggedNodes);
+flow.onSelectionDragStop(persistDraggedNodes);
 flow.onConnect((conn) => {
+  connectCompleted = true;
   if (!conn.source || !conn.target) return;
   const id = `e-${Date.now().toString(36)}${Math.random().toString(36).slice(2, 8)}`;
   const output = stripSide(conn.sourceHandle) ?? "default";
@@ -165,6 +403,36 @@ flow.onConnect((conn) => {
   syncFromBlob();
   push();
 });
+const pendingConnect = ref(null);
+let connectStart = null;
+let connectCompleted = false;
+flow.onConnectStart(({ nodeId, handleId, handleType }) => {
+  connectCompleted = false;
+  connectStart = handleType === "source" && nodeId ? { sourceId: nodeId, output: stripSide(handleId) ?? "default" } : null;
+});
+flow.onConnectEnd((event) => {
+  const start = connectStart;
+  connectStart = null;
+  if (!start || connectCompleted) return;
+  if (!(event instanceof MouseEvent)) return;
+  const target = event.target;
+  if (target?.closest(".vue-flow__node, .vue-flow__handle")) return;
+  const pos = flow.screenToFlowCoordinate({ x: event.clientX, y: event.clientY });
+  pendingConnect.value = { sourceId: start.sourceId, output: start.output, pos: { x: snap(pos.x), y: snap(pos.y) } };
+  pendingSpliceEdgeId.value = null;
+  void focusPalette();
+  toast.info("Pick a node \u2014 it will be added right there, already connected.");
+});
+flow.onEdgeUpdate(({ edge, connection }) => {
+  if (!connection.source || !connection.target) return;
+  if (connection.source === connection.target) return;
+  const be = blob.value.edges.find((e) => e.id === edge.id);
+  if (!be) return;
+  be.from = { nodeId: connection.source, output: stripSide(connection.sourceHandle) ?? be.from.output };
+  be.to = { nodeId: connection.target, input: be.to.input };
+  syncFromBlob();
+  push();
+});
 flow.onEdgesChange((changes) => {
   let mutated = false;
   for (const c of changes) {
@@ -180,10 +448,22 @@ flow.onNodesChange((changes) => {
     if (c.type === "remove") removeBlobNode(c.id);
   }
 });
+function stripFromGroups(drop) {
+  if (!blob.value.groups?.length) return;
+  for (const g of blob.value.groups) g.nodeIds = g.nodeIds.filter((x) => !drop.has(x));
+  blob.value.groups = blob.value.groups.filter((g) => (g.nodeIds.length > 0 || g.rect) && !drop.has(g.id));
+}
 function removeBlobNode(id) {
+  if (blob.value.groups?.some((g) => g.id === id)) {
+    ungroup(id);
+    return;
+  }
+  stripFromGroups(/* @__PURE__ */ new Set([id]));
   blob.value.nodes = blob.value.nodes.filter((n) => n.id !== id);
+  if (blob.value.stickies?.length) blob.value.stickies = blob.value.stickies.filter((s) => s.id !== id);
   blob.value.triggers = blob.value.triggers.filter((t) => t.id !== id);
   blob.value.edges = blob.value.edges.filter((e) => e.from.nodeId !== id && e.to.nodeId !== id);
+  if (blob.value.triggerPositions?.[id]) delete blob.value.triggerPositions[id];
   if (selectedId.value === id) selectedId.value = null;
   syncFromBlob();
   push();
@@ -191,6 +471,222 @@ function removeBlobNode(id) {
 function push() {
   emit("change", clone(blob.value));
 }
+const STICKY_DEFAULT_SIZE = { width: 240, height: 160 };
+function updateSticky(id, patch) {
+  const st = blob.value.stickies?.find((s) => s.id === id);
+  if (!st) return;
+  Object.assign(st, patch);
+  syncFromBlob();
+  push();
+}
+const variablesOpen = ref(false);
+const variableCount = computed(() => Object.keys(blob.value.variables ?? {}).length);
+function updateVariables(next) {
+  blob.value.variables = Object.keys(next).length ? next : void 0;
+  push();
+}
+function addSticky(at) {
+  const rect = flow.vueFlowRef.value?.getBoundingClientRect();
+  const center = rect ? flow.screenToFlowCoordinate({ x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 }) : { x: 120, y: 120 };
+  const sticky = {
+    id: `s-${Date.now().toString(36)}${Math.random().toString(36).slice(2, 6)}`,
+    // n8n-style starter content: teaches the edit gesture and the supported
+    // markdown by example.
+    content: "## I'm a note\n**Double-click** to edit me. **Bold**, *italic*, `code`, [links](https://revenexx.com) and\n- lists work",
+    position: at ? { x: Math.round(at.x), y: Math.round(at.y) } : {
+      x: Math.round(center.x - STICKY_DEFAULT_SIZE.width / 2),
+      y: Math.round(center.y - STICKY_DEFAULT_SIZE.height / 2)
+    }
+  };
+  blob.value.stickies = [...blob.value.stickies ?? [], sticky];
+  markBorn(sticky.id);
+  syncFromBlob();
+  push();
+}
+function removeBlobNodes(ids) {
+  if (!ids.length) return;
+  const drop = new Set(ids);
+  stripFromGroups(drop);
+  blob.value.nodes = blob.value.nodes.filter((n) => !drop.has(n.id));
+  blob.value.triggers = blob.value.triggers.filter((t) => !drop.has(t.id));
+  blob.value.edges = blob.value.edges.filter((e) => !drop.has(e.from.nodeId) && !drop.has(e.to.nodeId));
+  if (blob.value.stickies?.length) blob.value.stickies = blob.value.stickies.filter((s) => !drop.has(s.id));
+  for (const id of ids) {
+    if (blob.value.triggerPositions?.[id]) delete blob.value.triggerPositions[id];
+  }
+  if (selectedId.value && drop.has(selectedId.value)) selectedId.value = null;
+  syncFromBlob();
+  push();
+}
+function duplicateBlobNodes(ids) {
+  const src = blob.value.nodes.filter((n) => ids.includes(n.id));
+  if (!src.length) return;
+  const idMap = /* @__PURE__ */ new Map();
+  const stamp = Date.now();
+  src.forEach((n, i) => idMap.set(n.id, `n-${stamp}${i}`));
+  const offset = 40;
+  const copies = src.map((n) => ({
+    ...clone(n),
+    id: idMap.get(n.id),
+    position: { x: (n.position?.x ?? 0) + offset, y: (n.position?.y ?? 0) + offset }
+  }));
+  blob.value.nodes.push(...copies);
+  for (const e of blob.value.edges.filter((e2) => idMap.has(e2.from.nodeId) && idMap.has(e2.to.nodeId))) {
+    blob.value.edges.push({
+      id: `e-${Date.now().toString(36)}${Math.random().toString(36).slice(2, 8)}`,
+      from: { nodeId: idMap.get(e.from.nodeId), output: e.from.output },
+      to: { nodeId: idMap.get(e.to.nodeId), input: e.to.input }
+    });
+  }
+  markBorn(...idMap.values());
+  syncFromBlob();
+  push();
+  void nextTick(() => {
+    flow.removeSelectedElements();
+    flow.addSelectedNodes(flow.getNodes.value.filter((n) => [...idMap.values()].includes(n.id)));
+  });
+}
+provide("workflow-node-actions", {
+  duplicate: (id) => duplicateBlobNodes([id]),
+  remove: (id) => removeBlobNode(id)
+});
+const CLIP_KIND = "revenexx.workflow.nodes";
+async function copyNodes(ids) {
+  const nodes = blob.value.nodes.filter((n) => ids.includes(n.id));
+  if (!nodes.length) return;
+  const inner = new Set(nodes.map((n) => n.id));
+  const edges = blob.value.edges.filter((e) => inner.has(e.from.nodeId) && inner.has(e.to.nodeId));
+  try {
+    await navigator.clipboard.writeText(JSON.stringify({ kind: CLIP_KIND, version: 1, nodes, edges }, null, 2));
+    toast.success(nodes.length === 1 ? "Node copied" : `${nodes.length} nodes copied`);
+  } catch {
+    toast.error("Could not write to the clipboard");
+  }
+}
+async function pasteNodes(at) {
+  let text = "";
+  try {
+    text = await navigator.clipboard.readText();
+  } catch {
+    toast.error("Could not read the clipboard");
+    return;
+  }
+  let payload;
+  try {
+    payload = JSON.parse(text);
+  } catch {
+    toast.error("Clipboard does not contain nodes");
+    return;
+  }
+  if (payload?.kind !== CLIP_KIND || !Array.isArray(payload.nodes) || !payload.nodes.length) {
+    toast.error("Clipboard does not contain nodes");
+    return;
+  }
+  const idMap = /* @__PURE__ */ new Map();
+  const stamp = Date.now();
+  payload.nodes.forEach((n, i) => idMap.set(n.id, `n-${stamp}${i}`));
+  const minX = Math.min(...payload.nodes.map((n) => n.position?.x ?? 0));
+  const minY = Math.min(...payload.nodes.map((n) => n.position?.y ?? 0));
+  const dx = at ? Math.round(at.x - minX) : 40;
+  const dy = at ? Math.round(at.y - minY) : 40;
+  blob.value.nodes.push(...payload.nodes.map((n) => ({
+    ...clone(n),
+    id: idMap.get(n.id),
+    position: { x: (n.position?.x ?? 0) + dx, y: (n.position?.y ?? 0) + dy }
+  })));
+  for (const e of payload.edges ?? []) {
+    if (!idMap.has(e.from.nodeId) || !idMap.has(e.to.nodeId)) continue;
+    blob.value.edges.push({
+      id: `e-${Date.now().toString(36)}${Math.random().toString(36).slice(2, 8)}`,
+      from: { nodeId: idMap.get(e.from.nodeId), output: e.from.output },
+      to: { nodeId: idMap.get(e.to.nodeId), input: e.to.input }
+    });
+  }
+  markBorn(...idMap.values());
+  syncFromBlob();
+  push();
+  void nextTick(() => {
+    flow.removeSelectedElements();
+    flow.addSelectedNodes(flow.getNodes.value.filter((n) => [...idMap.values()].includes(n.id)));
+  });
+}
+const menu = ref({ kind: "canvas", targetId: null, flowPos: null });
+function eventFlowPos(event) {
+  if (!("clientX" in event)) return null;
+  return flow.screenToFlowCoordinate({ x: event.clientX, y: event.clientY });
+}
+flow.onNodeContextMenu(({ event, node }) => {
+  const selected = flow.getSelectedNodes.value;
+  if (selected.length > 1 && selected.some((n) => n.id === node.id)) {
+    menu.value = { kind: "selection", targetId: null, flowPos: eventFlowPos(event) };
+  } else {
+    flow.removeSelectedElements();
+    flow.addSelectedNodes([node]);
+    menu.value = { kind: "node", targetId: node.id, flowPos: eventFlowPos(event) };
+  }
+});
+flow.onSelectionContextMenu(({ event }) => {
+  menu.value = { kind: "selection", targetId: null, flowPos: eventFlowPos(event) };
+});
+flow.onPaneContextMenu((event) => {
+  menu.value = { kind: "canvas", targetId: null, flowPos: eventFlowPos(event) };
+});
+function onMenuAction(id) {
+  const selectedIds = flow.getSelectedNodes.value.map((n) => n.id);
+  switch (id) {
+    case "open":
+      if (menu.value.targetId) selectedId.value = menu.value.targetId;
+      break;
+    case "rename":
+      if (menu.value.targetId) {
+        renameIntent.value = true;
+        selectedId.value = menu.value.targetId;
+      }
+      break;
+    case "copy":
+      void copyNodes(menu.value.kind === "node" && menu.value.targetId ? [menu.value.targetId] : selectedIds);
+      break;
+    case "duplicate":
+      duplicateBlobNodes(menu.value.kind === "node" && menu.value.targetId ? [menu.value.targetId] : selectedIds);
+      break;
+    case "paste":
+      void pasteNodes(menu.value.flowPos ?? void 0);
+      break;
+    case "run":
+      emit("run");
+      break;
+    case "tidy-up":
+      void tidyUp();
+      break;
+    case "fit-view":
+      flow.fitView({ padding: 0.2, duration: 400, maxZoom: 1 });
+      break;
+    case "add-node":
+      void focusPalette();
+      break;
+    case "add-sticky":
+      addSticky(menu.value.flowPos ?? void 0);
+      break;
+    case "group":
+      createGroupFromSelection(selectedIds);
+      break;
+    case "select-all":
+      flow.addSelectedNodes(flow.getNodes.value);
+      break;
+    case "clear-selection":
+      flow.removeSelectedElements();
+      break;
+    case "delete":
+      if (menu.value.kind === "node" && menu.value.targetId) removeBlobNode(menu.value.targetId);
+      else removeBlobNodes(selectedIds);
+      break;
+  }
+}
+function onResolvedOutputs(nodeId, outputs) {
+  dynamicOutputs.value = { ...dynamicOutputs.value, [nodeId]: outputs };
+  syncFromBlob();
+  nextTick(() => flow.updateNodeInternals([nodeId]));
+}
 function isValidConnection(conn) {
   if (!conn.source || !conn.target) return false;
   if (conn.source === conn.target) return false;
@@ -202,22 +698,33 @@ const selection = computed(() => {
   return blob.value.nodes.find((n) => n.id === selectedId.value) ?? blob.value.triggers.find((t) => t.id === selectedId.value) ?? null;
 });
 flow.onNodeClick((evt) => {
+  if (evt.node.type === "sticky" || evt.node.type === "group") return;
   selectedId.value = evt.node.id;
 });
 flow.onPaneClick(() => {
   selectedId.value = null;
 });
-const paletteOpen = ref(false);
-watch(selectedId, (next) => {
-  if (next) paletteOpen.value = false;
+function localLabel(v) {
+  if (!v) return "";
+  return typeof v === "string" ? v : v.en ?? Object.values(v)[0] ?? "";
+}
+const selectedUpstreamOutputs = computed(() => {
+  const id = selectedId.value;
+  if (!id) return [];
+  const isNode = blob.value.nodes.some((n) => n.id === id);
+  if (!isNode) return [];
+  return blob.value.edges.filter((e) => e.to.nodeId === id).flatMap((e) => {
+    const source = blob.value.nodes.find((n) => n.id === e.from.nodeId);
+    if (!source) return [];
+    const portDef = (findManifest(source.nodeSlug, source.nodeVersion)?.outputs ?? []).find((o) => o.name === e.from.output);
+    return [{
+      nodeId: source.id,
+      nodeName: localLabel(source.name) || source.nodeSlug,
+      output: e.from.output,
+      fields: portDef?.fields
+    }];
+  });
 });
-watch(
-  () => blob.value.nodes.length + blob.value.triggers.length,
-  (count, prev) => {
-    if (prev === void 0 && count === 0) paletteOpen.value = true;
-  },
-  { immediate: true }
-);
 function applyInspectorUpdate(next) {
   const id = next.id;
   const triggerIdx = blob.value.triggers.findIndex((t) => t.id === id);
@@ -230,21 +737,86 @@ function applyInspectorUpdate(next) {
   syncFromBlob();
   push();
 }
+const nodeDrag = useNodeDrag();
+const dropGhost = ref(null);
+const GRID = 20;
+function snap(v) {
+  return Math.round(v / GRID) * GRID;
+}
+const dragActive = computed(() => !!nodeDrag.dragging.value);
+watch(dragActive, (on) => {
+  if (!on) dropGhost.value = null;
+});
+const ghostRect = computed(() => {
+  if (!dropGhost.value) return null;
+  const vp = flow.viewport.value;
+  const kind = nodeDrag.dragging.value?.kind;
+  const size = kind === "group" ? { width: 320, height: 200 } : { width: kind === "trigger" ? 200 : 220, height: 58 };
+  return {
+    left: dropGhost.value.x * vp.zoom + vp.x,
+    top: dropGhost.value.y * vp.zoom + vp.y,
+    width: size.width * vp.zoom,
+    height: size.height * vp.zoom
+  };
+});
 function onDragOver(ev) {
   ev.preventDefault();
   if (ev.dataTransfer) ev.dataTransfer.dropEffect = "move";
+  if (!nodeDrag.dragging.value) return;
+  const p = flow.screenToFlowCoordinate({ x: ev.clientX, y: ev.clientY });
+  dropGhost.value = { x: snap(p.x), y: snap(p.y) };
 }
-function onDrop(ev) {
-  ev.preventDefault();
-  const raw = ev.dataTransfer?.getData("application/integration-node");
-  if (!raw) return;
-  const payload = JSON.parse(raw);
-  const pos = flow.screenToFlowCoordinate({ x: ev.clientX, y: ev.clientY });
+function onDragLeave(ev) {
+  const target = ev.currentTarget;
+  if (target && ev.relatedTarget instanceof Node && target.contains(ev.relatedTarget)) return;
+  dropGhost.value = null;
+}
+const EMPTY_GROUP_SIZE = { width: 320, height: 200 };
+function groupAtPoint(pos) {
+  for (const g of blob.value.groups ?? []) {
+    if (g.collapsed) continue;
+    const r = groupRect(g);
+    if (pos.x >= r.x && pos.x <= r.x + r.width && pos.y >= r.y && pos.y <= r.y + r.height) return g;
+  }
+  return null;
+}
+function addGroupFrame() {
+  const rect = flow.vueFlowRef.value?.getBoundingClientRect();
+  const center = rect ? flow.screenToFlowCoordinate({ x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 }) : { x: 120, y: 120 };
+  addFromPayload({ kind: "group" }, {
+    x: center.x - EMPTY_GROUP_SIZE.width / 2,
+    y: center.y - EMPTY_GROUP_SIZE.height / 2
+  });
+}
+function adoptIntoGroupAt(id, pos) {
+  const g = groupAtPoint(pos);
+  if (!g || g.nodeIds.includes(id)) return;
+  for (const other of blob.value.groups ?? []) other.nodeIds = other.nodeIds.filter((x) => x !== id);
+  g.nodeIds.push(id);
+}
+function addFromPayload(payload, pos) {
+  const at = { x: snap(pos.x), y: snap(pos.y) };
+  if (payload.kind === "group") {
+    const id2 = `g-${Date.now().toString(36)}${Math.random().toString(36).slice(2, 6)}`;
+    blob.value.groups = [...blob.value.groups ?? [], {
+      id: id2,
+      label: `Group ${(blob.value.groups?.length ?? 0) + 1}`,
+      nodeIds: [],
+      rect: { x: at.x, y: at.y, ...EMPTY_GROUP_SIZE }
+    }];
+    markBorn(id2);
+    syncFromBlob();
+    push();
+    return;
+  }
   if (payload.kind === "trigger") {
     const tpl = TRIGGER_TEMPLATES.find((t) => t.type === payload.type);
     if (!tpl) return;
-    const id2 = `trg-${Date.now()}`;
+    const id2 = crypto.randomUUID();
     blob.value.triggers.push({ id: id2, type: tpl.type, config: { ...tpl.defaultConfig } });
+    blob.value.triggerPositions = { ...blob.value.triggerPositions ?? {}, [id2]: at };
+    adoptIntoGroupAt(id2, at);
+    markBorn(id2);
     syncFromBlob();
     selectedId.value = id2;
     push();
@@ -258,8 +830,95 @@ function onDrop(ev) {
     nodeSlug: manifest.slug,
     nodeVersion: manifest.version,
     config: defaultConfigFor(manifest.config ?? []),
-    position: { x: Math.round(pos.x), y: Math.round(pos.y) }
+    position: at
   });
+  adoptIntoGroupAt(id, at);
+  markBorn(id);
+  syncFromBlob();
+  selectedId.value = id;
+  push();
+}
+function onDrop(ev) {
+  ev.preventDefault();
+  dropGhost.value = null;
+  nodeDrag.end();
+  pendingSpliceEdgeId.value = null;
+  pendingConnect.value = null;
+  const raw = ev.dataTransfer?.getData("application/integration-node");
+  if (!raw) return;
+  const payload = JSON.parse(raw);
+  addFromPayload(payload, flow.screenToFlowCoordinate({ x: ev.clientX, y: ev.clientY }));
+}
+function onPaletteInsert(payload) {
+  if (pendingConnect.value && payload.kind === "manifest") {
+    const pc = pendingConnect.value;
+    pendingConnect.value = null;
+    const manifest = findManifest(payload.slug, payload.version);
+    if (!manifest) return;
+    const id = `n-${Date.now()}`;
+    blob.value.nodes.push({
+      id,
+      nodeSlug: manifest.slug,
+      nodeVersion: manifest.version,
+      config: defaultConfigFor(manifest.config ?? []),
+      position: { x: pc.pos.x, y: pc.pos.y }
+    });
+    blob.value.edges.push({
+      id: `e-${Date.now().toString(36)}${Math.random().toString(36).slice(2, 8)}`,
+      from: { nodeId: pc.sourceId, output: pc.output },
+      to: { nodeId: id, input: void 0 }
+    });
+    markBorn(id);
+    syncFromBlob();
+    selectedId.value = id;
+    push();
+    return;
+  }
+  pendingConnect.value = null;
+  if (pendingSpliceEdgeId.value && payload.kind === "manifest") {
+    spliceIntoEdge(pendingSpliceEdgeId.value, payload);
+    pendingSpliceEdgeId.value = null;
+    return;
+  }
+  pendingSpliceEdgeId.value = null;
+  const rect = flow.vueFlowRef.value?.getBoundingClientRect();
+  const center = rect ? flow.screenToFlowCoordinate({ x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 }) : { x: 120, y: 120 };
+  addFromPayload(payload, center);
+}
+const pendingSpliceEdgeId = ref(null);
+provide("workflow-edge-actions", {
+  splice: (edgeId) => {
+    if (!blob.value.edges.some((e) => e.id === edgeId)) return;
+    pendingSpliceEdgeId.value = edgeId;
+    void focusPalette();
+    toast.info("Pick a node from the palette \u2014 it will be inserted into the connection.");
+  }
+});
+function primaryOutputName(slug, version) {
+  const m = findManifest(slug, version);
+  return (m?.outputs ?? []).find((o) => o.name && o.kind !== "error")?.name ?? "default";
+}
+function spliceIntoEdge(edgeId, payload) {
+  const edge = blob.value.edges.find((e) => e.id === edgeId);
+  const manifest = findManifest(payload.slug, payload.version);
+  if (!edge || !manifest) return;
+  const a = nodePosition(edge.from.nodeId);
+  const b = nodePosition(edge.to.nodeId);
+  const id = `n-${Date.now()}`;
+  blob.value.nodes.push({
+    id,
+    nodeSlug: manifest.slug,
+    nodeVersion: manifest.version,
+    config: defaultConfigFor(manifest.config ?? []),
+    position: { x: snap((a.x + b.x) / 2), y: snap((a.y + b.y) / 2) }
+  });
+  blob.value.edges = blob.value.edges.filter((e) => e.id !== edgeId);
+  const stamp = Date.now().toString(36);
+  blob.value.edges.push(
+    { id: `e-${stamp}a${Math.random().toString(36).slice(2, 6)}`, from: { nodeId: edge.from.nodeId, output: edge.from.output }, to: { nodeId: id, input: void 0 } },
+    { id: `e-${stamp}b${Math.random().toString(36).slice(2, 6)}`, from: { nodeId: id, output: primaryOutputName(payload.slug, payload.version) }, to: { nodeId: edge.to.nodeId, input: edge.to.input } }
+  );
+  markBorn(id);
   syncFromBlob();
   selectedId.value = id;
   push();
@@ -271,22 +930,262 @@ function defaultConfigFor(fields = []) {
   }
   return out;
 }
+function nodeDims(id) {
+  const d = flow.findNode(id)?.dimensions;
+  return d && d.width > 0 ? d : { width: 220, height: 64 };
+}
 async function tidyUp() {
-  const laid = layoutWorkflowNodes(vfNodes.value, vfEdges.value, { direction: "LR" });
-  vfNodes.value = laid;
+  const containment = /* @__PURE__ */ new Map();
+  for (const s of blob.value.stickies ?? []) {
+    const sw = s.size?.width ?? 240;
+    const sh = s.size?.height ?? 160;
+    const contained = [];
+    for (const n of vfNodes.value) {
+      if (n.type === "sticky") continue;
+      const dims = nodeDims(n.id);
+      const cx = n.position.x + dims.width / 2;
+      const cy = n.position.y + dims.height / 2;
+      if (cx >= s.position.x && cx <= s.position.x + sw && cy >= s.position.y && cy <= s.position.y + sh) {
+        contained.push(n.id);
+      }
+    }
+    if (contained.length) containment.set(s.id, contained);
+  }
+  const graphNodes = vfNodes.value.filter((n) => n.type !== "sticky" && n.type !== "group");
+  const memberToGroup = /* @__PURE__ */ new Map();
+  for (const g of blob.value.groups ?? []) for (const id of g.nodeIds) memberToGroup.set(id, g);
+  const internal = /* @__PURE__ */ new Map();
+  for (const g of blob.value.groups ?? []) {
+    if (g.collapsed) continue;
+    const members = graphNodes.filter((n) => g.nodeIds.includes(n.id));
+    if (!members.length) continue;
+    const memberEdges = vfEdges.value.filter((e) => g.nodeIds.includes(e.source) && g.nodeIds.includes(e.target));
+    const laidMembers = layoutWorkflowNodes(members, memberEdges, { direction: "TB", nodeWidth: 240, nodeHeight: 90, rankSeparation: 60, nodeSeparation: 30 });
+    let maxX = 0;
+    let maxY = 0;
+    for (const m of laidMembers) {
+      const dims = nodeDims(m.id);
+      maxX = Math.max(maxX, m.position.x + dims.width);
+      maxY = Math.max(maxY, m.position.y + dims.height);
+    }
+    internal.set(g.id, { nodes: laidMembers, width: maxX + GROUP_PAD * 2, height: maxY + GROUP_PAD * 2 + GROUP_LABEL_ROOM });
+  }
+  const quotientUnit = (id) => memberToGroup.get(id)?.id ?? id;
+  const quotientNodes = [];
+  const seenUnit = /* @__PURE__ */ new Set();
+  for (const n of graphNodes) {
+    const unit = quotientUnit(n.id);
+    if (seenUnit.has(unit)) continue;
+    seenUnit.add(unit);
+    quotientNodes.push(unit === n.id ? n : { id: unit, position: { x: 0, y: 0 } });
+  }
+  const sizes = {};
+  for (const [gid, info] of internal) sizes[gid] = { width: info.width, height: info.height };
+  for (const g of blob.value.groups ?? []) {
+    if (g.collapsed) sizes[g.id] = { width: 240, height: 90 };
+  }
+  const seenQe = /* @__PURE__ */ new Set();
+  const quotientEdges = [];
+  for (const e of vfEdges.value) {
+    const su = quotientUnit(e.source);
+    const tu = quotientUnit(e.target);
+    if (su === tu) continue;
+    const key = `${su}|${tu}`;
+    if (seenQe.has(key)) continue;
+    seenQe.add(key);
+    quotientEdges.push({ id: key, source: su, target: tu });
+  }
+  const laidQuotient = layoutWorkflowNodes(quotientNodes, quotientEdges, { direction: "TB", sizes });
+  const unitPos = new Map(laidQuotient.map((n) => [n.id, n.position]));
+  const laid = graphNodes.map((n) => {
+    const g = memberToGroup.get(n.id);
+    if (!g) {
+      const pos = unitPos.get(n.id);
+      return pos ? { ...n, position: pos } : n;
+    }
+    const anchor = unitPos.get(g.id);
+    if (!anchor) return n;
+    if (g.collapsed) {
+      const idx = g.nodeIds.indexOf(n.id);
+      return { ...n, position: { x: anchor.x, y: anchor.y + idx * 30 } };
+    }
+    const inner = internal.get(g.id)?.nodes.find((m) => m.id === n.id);
+    if (!inner) return n;
+    return { ...n, position: { x: anchor.x + GROUP_PAD + inner.position.x, y: anchor.y + GROUP_PAD + GROUP_LABEL_ROOM + inner.position.y } };
+  });
   for (const n of laid) {
+    const pos = { x: Math.round(n.position.x), y: Math.round(n.position.y) };
     if (n.type === "workflow") {
       const wn = blob.value.nodes.find((b) => b.id === n.id);
-      if (wn) wn.position = { x: Math.round(n.position.x), y: Math.round(n.position.y) };
+      if (wn) wn.position = pos;
+    } else if (n.type === "trigger") {
+      blob.value.triggerPositions = { ...blob.value.triggerPositions ?? {}, [n.id]: pos };
+    }
+  }
+  for (const g of blob.value.groups ?? []) delete g.rect;
+  const PAD = 24;
+  const LABEL_ROOM = 20;
+  for (const [stickyId, ids] of containment) {
+    const st = blob.value.stickies?.find((x) => x.id === stickyId);
+    if (!st) continue;
+    let minX = Number.POSITIVE_INFINITY;
+    let minY = Number.POSITIVE_INFINITY;
+    let maxX = Number.NEGATIVE_INFINITY;
+    let maxY = Number.NEGATIVE_INFINITY;
+    for (const id of ids) {
+      const ln = laid.find((l) => l.id === id);
+      if (!ln) continue;
+      const dims = nodeDims(id);
+      minX = Math.min(minX, ln.position.x);
+      minY = Math.min(minY, ln.position.y);
+      maxX = Math.max(maxX, ln.position.x + dims.width);
+      maxY = Math.max(maxY, ln.position.y + dims.height);
     }
+    if (!Number.isFinite(minX)) continue;
+    st.position = { x: Math.round(minX - PAD), y: Math.round(minY - PAD - LABEL_ROOM) };
+    st.size = {
+      width: Math.max(150, Math.round(maxX - minX + PAD * 2)),
+      height: Math.max(80, Math.round(maxY - minY + PAD * 2 + LABEL_ROOM))
+    };
   }
+  syncFromBlob();
   push();
   await nextTick();
-  flow.fitView({ padding: 0.2, duration: 400 });
+  flow.fitView({ padding: 0.2, duration: 400, maxZoom: 1 });
+}
+const POINTER_MODE_KEY = "integrations.editor.pointerMode";
+const pointerMode = ref("select");
+try {
+  const stored = localStorage.getItem(POINTER_MODE_KEY);
+  if (stored === "hand" || stored === "select") pointerMode.value = stored;
+} catch {
 }
+function setPointerMode(mode) {
+  pointerMode.value = mode;
+  try {
+    localStorage.setItem(POINTER_MODE_KEY, mode);
+  } catch {
+  }
+}
+const zoomPct = computed(() => `${Math.round((flow.viewport.value?.zoom ?? 1) * 100)}%`);
+const ZOOM_PRESETS = [50, 75, 100, 150, 200, 300, 400];
+const MIN_ZOOM_PCT = 25;
+const MAX_ZOOM_PCT = 400;
+const zoomMenuOpen = ref(false);
+const zoomInputText = ref("");
+function setZoomPct(pct) {
+  const clamped = Math.min(MAX_ZOOM_PCT, Math.max(MIN_ZOOM_PCT, Math.round(pct)));
+  void flow.zoomTo(clamped / 100, { duration: 200 });
+  zoomMenuOpen.value = false;
+}
+function applyZoomInput() {
+  const parsed = Number.parseFloat(zoomInputText.value.replace("%", "").trim());
+  if (!Number.isFinite(parsed) || parsed <= 0) return;
+  setZoomPct(parsed);
+}
+watch(zoomMenuOpen, (open) => {
+  if (open) zoomInputText.value = String(Math.round((flow.viewport.value?.zoom ?? 1) * 100));
+});
+const paletteRef = ref(null);
+const renameIntent = ref(false);
+const canvasWrapRef = ref(null);
+const paletteShellRef = ref(null);
+const palette = usePaletteLayout(canvasWrapRef);
+const paletteShellClass = computed(() => {
+  if (palette.mode.value === "docked-left") return "left-3 top-3 bottom-16 origin-top-left";
+  if (palette.mode.value === "docked-right") return "right-3 top-3 bottom-16 origin-top-right";
+  return "h-[min(70vh,34rem)] origin-top-left";
+});
+const palettePillClass = computed(() => {
+  if (palette.mode.value === "docked-left") return "left-3 top-3 origin-top-left";
+  if (palette.mode.value === "docked-right") return "right-3 top-3 origin-top-right";
+  return "origin-top-left";
+});
+const minimapShellRef = ref(null);
+const minimapLayout = useMiniMapLayout(canvasWrapRef);
+const MINIMAP_CORNER_CLASS = {
+  "top-left": "left-3 top-3",
+  "top-right": "right-3 top-3",
+  "bottom-left": "bottom-16 left-3",
+  "bottom-right": "bottom-16 right-3"
+};
+const minimapPlacementClass = computed(() => minimapLayout.mode.value === "floating" ? "" : MINIMAP_CORNER_CLASS[minimapLayout.mode.value]);
+const minimapPreviewClass = computed(() => minimapLayout.dockPreview.value ? MINIMAP_CORNER_CLASS[minimapLayout.dockPreview.value] : "");
+async function focusPalette() {
+  if (palette.collapsed.value) {
+    palette.setCollapsed(false);
+    await nextTick();
+  }
+  paletteRef.value?.focusSearch();
+}
+const lightboxOpen = computed(() => !!selection.value);
+const singleSelected = computed(() => flow.getSelectedNodes.value.length === 1 ? flow.getSelectedNodes.value[0] : null);
+useCanvasShortcuts(() => ({
+  "enter": {
+    disabled: () => !singleSelected.value,
+    run: () => {
+      selectedId.value = singleSelected.value.id;
+    }
+  },
+  "f2|space": {
+    disabled: () => !singleSelected.value,
+    run: () => {
+      renameIntent.value = true;
+      selectedId.value = singleSelected.value.id;
+    }
+  },
+  "mod+a": () => flow.addSelectedNodes(flow.getNodes.value),
+  "mod+c": {
+    disabled: () => !flow.getSelectedNodes.value.length,
+    run: () => {
+      void copyNodes(flow.getSelectedNodes.value.map((n) => n.id));
+    }
+  },
+  "mod+v": () => {
+    void pasteNodes();
+  },
+  "mod+d": {
+    disabled: () => !flow.getSelectedNodes.value.length,
+    run: () => duplicateBlobNodes(flow.getSelectedNodes.value.map((n) => n.id))
+  },
+  "mod+g": {
+    disabled: () => !flow.getSelectedNodes.value.length,
+    run: () => createGroupFromSelection(flow.getSelectedNodes.value.map((n) => n.id))
+  },
+  "mod+enter": { disabled: () => !!props.runBusy, run: () => emit("run") },
+  "shift+alt+t": () => {
+    void tidyUp();
+  },
+  "shift+s": () => addSticky(),
+  "v": () => setPointerMode("select"),
+  "h": () => setPointerMode("hand"),
+  "shift+a": () => emit("toggleActive"),
+  "shift+v": () => {
+    variablesOpen.value = true;
+  },
+  "shift+alt+s": () => emit("openSettings"),
+  "-": () => {
+    void flow.zoomOut({ duration: 150 });
+  },
+  "=": () => {
+    void flow.zoomIn({ duration: 150 });
+  },
+  "0": () => setZoomPct(100),
+  "1": () => flow.fitView({ padding: 0.2, duration: 400, maxZoom: 1 }),
+  "tab": () => {
+    void focusPalette();
+  },
+  "escape": () => {
+    pendingSpliceEdgeId.value = null;
+    pendingConnect.value = null;
+    flow.removeSelectedElements();
+  }
+}), { disabled: lightboxOpen });
 const nodeTypes = {
   workflow: markRaw(WorkflowNodeView),
-  trigger: markRaw(WorkflowTriggerView)
+  trigger: markRaw(WorkflowTriggerView),
+  sticky: markRaw(StickyNoteView),
+  group: markRaw(GroupFrameView)
 };
 const edgeTypes = {
   flow: markRaw(WorkflowEdgeView)
@@ -294,80 +1193,447 @@ const edgeTypes = {
 </script>
 
 <template>
-  <div class="flex h-full min-h-0 flex-1 bg-[#f7f6fb] relative">
-    <!-- Slide-in node palette: collapses to 0-width unless `paletteOpen`. -->
+  <div class="h-full min-h-0 flex-1 bg-[#f7f6fb] relative">
     <div
-      class="shrink-0 overflow-hidden transition-[width] duration-200 ease-out"
-      :class="paletteOpen ? 'w-60' : 'w-0'"
-    >
-      <NodePalette />
-    </div>
-
-    <div
-      class="relative flex-1 min-w-0"
+      ref="canvasWrapRef"
+      class="relative h-full w-full transition-shadow duration-150"
+      :class="dragActive ? 'canvas-drop-active' : ''"
       @drop="onDrop"
       @dragover="onDragOver"
+      @dragleave="onDragLeave"
     >
-      <VueFlow
-        v-model:nodes="vfNodes"
-        v-model:edges="vfEdges"
-        :node-types="nodeTypes"
-        :edge-types="edgeTypes"
-        :default-edge-options="{ type: 'flow' }"
-        :connection-line-type="ConnectionLineType.SmoothStep"
-        :connection-line-style="{ stroke: '#94a3b8', strokeWidth: 1.75, strokeDasharray: '4 4' }"
-        :is-valid-connection="isValidConnection"
-        :snap-to-grid="true"
-        :snap-grid="[20, 20]"
-        :selection-mode="SelectionMode.Partial"
-        :pan-on-scroll-mode="PanOnScrollMode.Free"
-        :delete-key-code="['Backspace', 'Delete']"
-        :min-zoom="0.25"
-        :max-zoom="2"
-        fit-view-on-init
+      <WorkflowContextMenu
+        :kind="menu.kind"
+        :selection-count="flow.getSelectedNodes.value.length"
+        :total-nodes="vfNodes.length"
+        :target-is-trigger="!!menu.targetId && blob.triggers.some((t) => t.id === menu.targetId)"
+        :run-busy="runBusy"
+        @action="onMenuAction"
       >
-        <Background pattern-color="#cbd5e1" :gap="20" :size="1.2" />
-        <Controls position="bottom-right" :show-interactive="false" />
-        <MiniMap
-          position="bottom-left"
-          pannable
-          zoomable
-          :node-stroke-width="3"
-          :node-color="(n) => n.type === 'trigger' ? '#10b981' : '#94a3b8'"
-          :mask-color="'rgba(15, 23, 42, 0.06)'"
-        />
-      </VueFlow>
+        <VueFlow
+          v-model:nodes="vfNodes"
+          v-model:edges="vfEdges"
+          :node-types="nodeTypes"
+          :edge-types="edgeTypes"
+          :default-edge-options="{ type: 'flow' }"
+          :connection-line-type="ConnectionLineType.Step"
+          :connection-line-style="{ stroke: '#94a3b8', strokeWidth: 1.75, strokeDasharray: '4 4' }"
+          :is-valid-connection="isValidConnection"
+          :snap-to-grid="true"
+          :snap-grid="[20, 20]"
+          :selection-mode="SelectionMode.Partial"
+          :selection-key-code="pointerMode === 'select' ? true : 'Shift'"
+          :pan-on-drag="pointerMode === 'hand' ? true : [1]"
+          :pan-on-scroll="true"
+          :pan-on-scroll-mode="PanOnScrollMode.Free"
+          :delete-key-code="['Backspace', 'Delete']"
+          :edges-updatable="true"
+          :min-zoom="0.25"
+          :max-zoom="4"
+        >
+          <Background pattern-color="#cbd5e1" :gap="20" :size="1.2" />
+        </VueFlow>
+      </WorkflowContextMenu>
+
+      <!-- Grid-snapped placement ghost while a palette drag hovers the canvas.
+           Positioned in pane coordinates (flow → screen via the viewport). -->
+      <Transition
+        enter-active-class="transition-all duration-100 ease-out"
+        enter-from-class="opacity-0 scale-90"
+        enter-to-class="opacity-100 scale-100"
+        leave-active-class="transition-opacity duration-100"
+        leave-to-class="opacity-0"
+      >
+        <div
+          v-if="ghostRect"
+          class="pointer-events-none absolute z-10 rounded-lg border-2 border-dashed transition-[left,top] duration-75 ease-out"
+          :class="nodeDrag.dragging.value?.kind === 'trigger' ? 'border-emerald-400/80 bg-emerald-400/[0.08]' : nodeDrag.dragging.value?.kind === 'group' ? 'border-slate-400/80 bg-slate-400/[0.08]' : 'border-violet-400/80 bg-violet-400/[0.08]'"
+          :style="{
+  left: `${ghostRect.left}px`,
+  top: `${ghostRect.top}px`,
+  width: `${ghostRect.width}px`,
+  height: `${ghostRect.height}px`
+}"
+        >
+          <span
+            class="absolute -top-0.5 left-1/2 -translate-x-1/2 -translate-y-full rounded-md px-1.5 py-0.5 text-xs font-medium text-white shadow-sm"
+            :class="nodeDrag.dragging.value?.kind === 'trigger' ? 'bg-emerald-500' : nodeDrag.dragging.value?.kind === 'group' ? 'bg-slate-500' : 'bg-violet-500'"
+          >
+            Drop to add
+          </span>
+        </div>
+      </Transition>
+
+      <!-- Headless dynamic-output resolvers (PO-143 Phase 3): one per node
+           whose manifest declares a `resolveOutputs` port. They resolve the
+           real ports server-side and feed them into the rendered node without
+           touching the blob. Render nothing. -->
+      <NodeDynamicOutputsResolver
+        v-for="n in dynamicOutputNodes"
+        :key="`dyn-out-${n.id}`"
+        :node-id="n.id"
+        :slug="n.nodeSlug"
+        :version="n.nodeVersion"
+        :config="n.config ?? {}"
+        :static-outputs="findManifest(n.nodeSlug, n.nodeVersion)?.outputs ?? []"
+        @resolved="onResolvedOutputs"
+      />
+
+      <!-- Dock preview — a ghost of the full-height dock slot that lights up
+           while the dragged palette hovers near the left/right canvas edge. -->
+      <div
+        v-if="palette.dockPreview.value"
+        class="pointer-events-none absolute top-3 bottom-16 z-[9] w-80 rounded-xl border-2 border-dashed border-emerald-400/70 bg-emerald-400/[0.08]"
+        :class="palette.dockPreview.value === 'left' ? 'left-3' : 'right-3'"
+      />
 
-      <!-- Top-left action cluster -->
-      <div class="absolute top-3 left-3 z-10 flex items-center gap-1.5">
-        <button
-          type="button"
-          class="flex items-center gap-1.5 rounded-md border border-black/[0.08] bg-white px-2 py-1 text-sm font-medium text-foreground shadow-sm transition hover:bg-muted/30"
-          :class="paletteOpen ? 'ring-2 ring-emerald-500/40' : ''"
-          :title="paletteOpen ? 'Hide palette' : 'Add node'"
-          @click="paletteOpen = !paletteOpen"
+      <!-- Node palette — dockable left/right, free-floating, or collapsed to
+           a pill. The header (grip + title) drags via pointer events so the
+           node rows keep their HTML5 drag; the ⋮ menu offers the explicit
+           placement actions. -->
+      <Transition
+        enter-active-class="transition duration-150 ease-out"
+        enter-from-class="opacity-0 scale-95"
+        enter-to-class="opacity-100 scale-100"
+        leave-active-class="transition duration-100 ease-in"
+        leave-from-class="opacity-100 scale-100"
+        leave-to-class="opacity-0 scale-95"
+      >
+        <div
+          v-if="palette.collapsed.value"
+          key="palette-pill"
+          class="absolute z-10"
+          :class="palettePillClass"
+          :style="palette.mode.value === 'floating' ? palette.floatingStyle.value : void 0"
+        >
+          <!-- 2-layer frame: outer glass ring + inner white pane (dashboard
+               HeroGreeting pattern) so the pill matches the expanded panel. -->
+          <div class="rounded-lg border border-gray-400/10 outline-1 outline-white/30 backdrop-blur-sm">
+            <button
+              type="button"
+              class="flex h-9 items-center gap-1.5 rounded-lg bg-white px-3 text-sm font-medium transition hover:bg-muted/75 hover:cursor-pointer"
+              title="Expand the node palette"
+              @click="void focusPalette()"
+            >
+              <Plus :size="14" class="text-emerald-600" />
+              Add node
+            </button>
+          </div>
+        </div>
+        <div
+          v-else
+          key="palette-panel"
+          ref="paletteShellRef"
+          class="absolute z-10 flex w-80 flex-col rounded-lg border border-gray-400/10 outline-1 outline-white/30 backdrop-blur-sm"
+          :class="paletteShellClass"
+          :style="palette.mode.value === 'floating' ? palette.floatingStyle.value : void 0"
         >
-          <Plus :size="14" :class="paletteOpen ? 'rotate-45' : ''" class="transition-transform" />
-          {{ paletteOpen ? "Close" : "Add node" }}
-        </button>
-        <button
-          type="button"
-          class="flex items-center gap-1.5 rounded-md border border-black/[0.08] bg-white px-2 py-1 text-sm font-medium text-foreground shadow-sm transition hover:bg-muted/30"
-          title="Tidy up layout"
-          @click="tidyUp"
+          <div class="flex min-h-0 flex-1 flex-col overflow-hidden border border-white bg-white rounded-lg bg-gradient-to-br from-white via-violet-50/40 to-white relative overflow-hidden">
+          <div
+            class="flex shrink-0 touch-none select-none items-center gap-1 border-b border-black/[0.06] bg-white px-2 py-1.5"
+            :class="palette.dragging.value ? 'cursor-grabbing' : 'cursor-grab'"
+            @pointerdown="palette.startDrag($event, paletteShellRef)"
+          >
+            <GripVertical :size="14" class="shrink-0 text-muted-foreground/60" />
+            <span class="min-w-0 flex-1 truncate text-sm font-medium">Add node</span>
+            <DropdownMenu>
+              <DropdownMenuTrigger as-child>
+                <button
+                  type="button"
+                  class="flex size-6 shrink-0 items-center justify-center rounded-md text-muted-foreground transition hover:bg-muted/50 hover:text-foreground"
+                  title="Palette placement"
+                >
+                  <EllipsisVertical :size="14" />
+                </button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end" class="w-36 rounded-lg border border-black/[0.06] bg-white p-1 shadow-lg">
+                <DropdownMenuItem class="rounded-md text-sm" @select="palette.dock('left')">Dock left</DropdownMenuItem>
+                <DropdownMenuItem class="rounded-md text-sm" @select="palette.dock('right')">Dock right</DropdownMenuItem>
+                <DropdownMenuItem class="rounded-md text-sm" @select="palette.floatHere(paletteShellRef)">Float here</DropdownMenuItem>
+                <DropdownMenuSeparator class="my-1 h-px bg-black/[0.06]" />
+                <DropdownMenuItem class="rounded-md text-sm" @select="palette.setCollapsed(true)">Collapse</DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+            <button
+              type="button"
+              class="flex size-6 shrink-0 items-center justify-center rounded-md text-muted-foreground transition hover:bg-muted/50 hover:text-foreground"
+              title="Collapse the palette"
+              @click="palette.setCollapsed(true)"
+            >
+              <Minus :size="14" />
+            </button>
+          </div>
+          <NodePalette ref="paletteRef" class="min-h-0 flex-1" @insert="onPaletteInsert" />
+          </div>
+        </div>
+      </Transition>
+
+      <!-- Corner preview — lights up while the dragged minimap hovers a
+           snap zone; release drops it into that corner. -->
+      <div
+        v-if="minimapLayout.dockPreview.value"
+        class="pointer-events-none absolute z-[9] h-[190px] w-[200px] rounded-lg border-2 border-dashed border-emerald-400/70 bg-emerald-400/[0.08]"
+        :class="minimapPreviewClass"
+      />
+
+      <!-- MiniMap — same 2-layer frame as the palette. Lives OUTSIDE the
+           VueFlow tree (the store is provided by this component's
+           useVueFlow), so the shell owns placement: corner-pinned,
+           free-floating via header drag, or collapsed to a pill. -->
+      <Transition
+        enter-active-class="transition duration-150 ease-out"
+        enter-from-class="opacity-0 scale-95"
+        enter-to-class="opacity-100 scale-100"
+        leave-active-class="transition duration-100 ease-in"
+        leave-from-class="opacity-100 scale-100"
+        leave-to-class="opacity-0 scale-95"
+      >
+        <div
+          v-if="minimapLayout.collapsed.value"
+          key="minimap-pill"
+          class="absolute z-10"
+          :class="minimapPlacementClass"
+          :style="minimapLayout.mode.value === 'floating' ? minimapLayout.floatingStyle.value : void 0"
         >
-          <LayoutGrid :size="13" />
-          Tidy up
-        </button>
-        <button
-          type="button"
-          class="flex items-center gap-1.5 rounded-md border border-black/[0.08] bg-white px-2 py-1 text-sm font-medium text-foreground shadow-sm transition hover:bg-muted/30"
-          title="Re-center"
-          @click="flow.fitView({ padding: 0.2, duration: 400 })"
+          <div class="rounded-lg border border-gray-400/10 outline-1 outline-white/30 backdrop-blur-sm">
+            <button
+              type="button"
+              class="flex h-9 items-center gap-1.5 rounded-lg bg-white px-3 text-sm font-medium transition hover:bg-muted/75 hover:cursor-pointer"
+              title="Expand the minimap"
+              @click="minimapLayout.setCollapsed(false)"
+            >
+              <MapIcon :size="14" class="text-emerald-600" />
+              Map
+            </button>
+          </div>
+        </div>
+        <div
+          v-else
+          key="minimap-panel"
+          ref="minimapShellRef"
+          class="absolute z-10 rounded-lg border border-gray-400/10 outline-1 outline-white/30 backdrop-blur-sm"
+          :class="minimapPlacementClass"
+          :style="minimapLayout.mode.value === 'floating' ? minimapLayout.floatingStyle.value : void 0"
         >
-          <Sparkles :size="13" />
-          Fit
-        </button>
+          <div class="flex flex-col overflow-hidden rounded-lg border border-white bg-white bg-gradient-to-br from-white via-violet-50/40 to-white">
+            <div
+              class="flex shrink-0 touch-none select-none items-center gap-1 border-b border-black/[0.06] px-2 py-1"
+              :class="minimapLayout.dragging.value ? 'cursor-grabbing' : 'cursor-grab'"
+              @pointerdown="minimapLayout.startDrag($event, minimapShellRef)"
+            >
+              <GripVertical :size="14" class="shrink-0 text-muted-foreground/60" />
+              <span class="min-w-0 flex-1 truncate text-sm font-medium">Map</span>
+              <DropdownMenu>
+                <DropdownMenuTrigger as-child>
+                  <button
+                    type="button"
+                    class="flex size-6 shrink-0 items-center justify-center rounded-md text-muted-foreground transition hover:bg-muted/50 hover:text-foreground"
+                    title="Minimap placement"
+                  >
+                    <EllipsisVertical :size="14" />
+                  </button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end" class="w-40 rounded-lg border border-black/[0.06] bg-white p-1 shadow-lg">
+                  <DropdownMenuItem class="rounded-md text-sm" @select="minimapLayout.dock('top-left')">Top left</DropdownMenuItem>
+                  <DropdownMenuItem class="rounded-md text-sm" @select="minimapLayout.dock('top-right')">Top right</DropdownMenuItem>
+                  <DropdownMenuItem class="rounded-md text-sm" @select="minimapLayout.dock('bottom-left')">Bottom left</DropdownMenuItem>
+                  <DropdownMenuItem class="rounded-md text-sm" @select="minimapLayout.dock('bottom-right')">Bottom right</DropdownMenuItem>
+                  <DropdownMenuItem class="rounded-md text-sm" @select="minimapLayout.floatHere(minimapShellRef)">Float here</DropdownMenuItem>
+                  <DropdownMenuSeparator class="my-1 h-px bg-black/[0.06]" />
+                  <DropdownMenuItem class="rounded-md text-sm" @select="minimapLayout.setCollapsed(true)">Collapse</DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+              <button
+                type="button"
+                class="flex size-6 shrink-0 items-center justify-center rounded-md text-muted-foreground transition hover:bg-muted/50 hover:text-foreground"
+                title="Collapse the minimap"
+                @click="minimapLayout.setCollapsed(true)"
+              >
+                <Minus :size="14" />
+              </button>
+            </div>
+            <MiniMap
+              class="rvnxx-minimap-embedded"
+              pannable
+              zoomable
+              :node-stroke-width="3"
+              :node-color="(n2) => n2.type === 'trigger' ? '#10b981' : n2.type === 'sticky' ? '#fcd34d' : '#94a3b8'"
+              :mask-color="'rgba(15, 23, 42, 0.06)'"
+            />
+          </div>
+        </div>
+      </Transition>
+
+      <!-- Floating control pane — bottom center. -->
+      <div class="absolute bottom-3 left-1/2 z-10 -translate-x-1/2">
+        <TooltipProvider :delay-duration="250">
+        <div class="rounded-lg border border-gray-400/10 outline-1 outline-white/30 backdrop-blur-sm">
+          <div class="flex items-center gap-0.5 whitespace-nowrap border border-white bg-white rounded-lg bg-gradient-to-br from-white via-violet-50/40 to-white px-2 py-1">
+          <!-- Smart Run: the page decides what "run" means — workflows that
+               consume trigger.payload open the payload dialog, payload-free
+               ones fire immediately. One button either way. -->
+          <IntegrationsEditorTip label="Run workflow" shortcut="mod+enter">
+            <button
+              type="button"
+              class="relative flex h-8 items-center gap-1.5 rounded-lg bg-gradient-to-b from-emerald-500 to-emerald-600 px-3.5 text-sm font-medium text-white transition after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:shadow-[inset_0_1px_0_rgba(255,255,255,0.3),inset_0_-2px_0_rgba(0,0,0,0.25)] hover:from-emerald-600 hover:to-emerald-600 active:translate-y-px disabled:opacity-60"
+              :disabled="runBusy"
+              @click="emit('run')"
+            >
+              <Loader2 v-if="runBusy" :size="14" class="animate-spin" />
+              <Play v-else :size="14" />
+              Run
+            </button>
+          </IntegrationsEditorTip>
+
+          <div class="mx-1 h-5 w-px bg-black/10" />
+
+          <div class="flex items-center gap-0.5 rounded-lg bg-black/[0.05] p-0.5 shadow-[inset_0_1px_2px_rgba(15,23,42,0.12)]">
+          <IntegrationsEditorTip label="Select" shortcut="v">
+              <button
+                type="button"
+                class="flex size-7 items-center justify-center rounded-lg transition"
+                :class="pointerMode === 'select' ? 'bg-gradient-to-b from-white to-gray-50 text-foreground shadow-[0_1px_2px_rgba(15,23,42,0.18),inset_0_1px_0_rgba(255,255,255,0.9)]' : 'text-muted-foreground hover:text-foreground'"
+                @click="setPointerMode('select')"
+              >
+                <MousePointer2 :size="14" />
+              </button>
+          </IntegrationsEditorTip>
+          <IntegrationsEditorTip label="Hand (pan)" shortcut="h">
+              <button
+                type="button"
+                class="flex size-7 items-center justify-center rounded-lg transition"
+                :class="pointerMode === 'hand' ? 'bg-gradient-to-b from-white to-gray-50 text-foreground shadow-[0_1px_2px_rgba(15,23,42,0.18),inset_0_1px_0_rgba(255,255,255,0.9)]' : 'text-muted-foreground hover:text-foreground'"
+                @click="setPointerMode('hand')"
+              >
+                <Hand :size="14" />
+              </button>
+          </IntegrationsEditorTip>
+          </div>
+
+          <IntegrationsEditorTip label="Tidy up" shortcut="shift+alt+t">
+            <button
+              type="button"
+              class="flex h-8 items-center gap-1.5 rounded-lg px-2.5 text-sm font-medium text-foreground transition hover:bg-black/[0.04]"
+              @click="tidyUp"
+            >
+              <LayoutGrid :size="13" />
+              Tidy up
+            </button>
+          </IntegrationsEditorTip>
+          <IntegrationsEditorTip label="Fit view" shortcut="1">
+            <button
+              type="button"
+              class="flex h-8 items-center gap-1.5 rounded-lg px-2.5 text-sm font-medium text-foreground transition hover:bg-black/[0.04]"
+              @click="flow.fitView({ padding: 0.2, duration: 400, maxZoom: 1 })"
+            >
+              <Sparkles :size="13" />
+              Fit
+            </button>
+          </IntegrationsEditorTip>
+          <IntegrationsEditorTip label="Add sticky note" shortcut="shift+s">
+            <button
+              type="button"
+              class="flex h-8 items-center gap-1.5 rounded-lg px-2.5 text-sm font-medium text-foreground transition hover:bg-black/[0.04]"
+              @click="addSticky()"
+            >
+              <StickyNote :size="13" />
+              Note
+            </button>
+          </IntegrationsEditorTip>
+          <IntegrationsEditorTip label="Add group frame — nodes dropped inside join it">
+            <button
+              type="button"
+              class="flex h-8 items-center gap-1.5 rounded-lg px-2.5 text-sm font-medium text-foreground transition hover:bg-black/[0.04]"
+              @click="addGroupFrame"
+            >
+              <GroupIcon :size="13" />
+              Group
+            </button>
+          </IntegrationsEditorTip>
+          <IntegrationsEditorTip label="Workflow variables" shortcut="shift+v">
+            <button
+              type="button"
+              class="flex h-8 items-center gap-1.5 rounded-lg px-2.5 text-sm font-medium text-foreground transition hover:bg-black/[0.04]"
+              @click="variablesOpen = true"
+            >
+              <Braces :size="13" />
+              Variables
+              <span v-if="variableCount" class="rounded-lg bg-muted px-1.5 text-xs tabular-nums text-muted-foreground">{{ variableCount }}</span>
+            </button>
+          </IntegrationsEditorTip>
+          <IntegrationsEditorTip label="Workflow settings" shortcut="shift+alt+s">
+            <button
+              type="button"
+              class="flex h-8 items-center gap-1.5 rounded-lg px-2.5 text-sm font-medium text-foreground transition hover:bg-black/[0.04]"
+              @click="emit('openSettings')"
+            >
+              <Settings2 :size="13" />
+              Settings
+            </button>
+          </IntegrationsEditorTip>
+
+          <div class="mx-1 h-5 w-px bg-black/10" />
+
+          <IntegrationsEditorTip label="Zoom out" shortcut="-">
+            <button
+              type="button"
+              class="flex size-8 items-center justify-center rounded-lg text-foreground transition hover:bg-black/[0.04]"
+              @click="flow.zoomOut({ duration: 150 })"
+            >
+              <ZoomOut :size="14" />
+            </button>
+          </IntegrationsEditorTip>
+          <!-- Tooltip sits on a wrapper span so its as-child merge never
+               touches the dropdown trigger (merging both onto one button
+               swallowed the trigger's pointerdown and the menu never opened). -->
+          <IntegrationsEditorTip label="Zoom level, 0 resets to 100%" shortcut="0">
+            <span class="inline-flex">
+              <DropdownMenu v-model:open="zoomMenuOpen">
+                <DropdownMenuTrigger as-child>
+                  <button
+                    type="button"
+                    class="w-12 rounded-lg py-1 text-center text-sm tabular-nums text-muted-foreground transition hover:bg-black/[0.04] hover:text-foreground"
+                  >
+                    {{ zoomPct }}
+                  </button>
+                </DropdownMenuTrigger>
+            <DropdownMenuContent side="top" align="center" class="w-[4.75rem] min-w-0 rounded-lg border border-black/[0.06] bg-white p-1 shadow-lg">
+              <div class="px-0.5 pb-0.5">
+                <input
+                  v-model="zoomInputText"
+                  type="text"
+                  inputmode="numeric"
+                  class="h-6 w-full rounded-md border border-black/[0.08] bg-white px-1 text-center text-sm tabular-nums focus:outline-none focus:ring-2 focus:ring-primary/40"
+                  placeholder="%"
+                  @keydown.stop
+                  @keydown.enter.prevent="applyZoomInput"
+                >
+              </div>
+              <DropdownMenuSeparator class="my-1 h-px bg-black/[0.06]" />
+              <DropdownMenuItem
+                v-for="p in ZOOM_PRESETS"
+                :key="p"
+                class="justify-center rounded-md px-1 py-0.5 text-sm tabular-nums"
+                @select="setZoomPct(p)"
+              >
+                {{ p }}%
+              </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </span>
+          </IntegrationsEditorTip>
+          <IntegrationsEditorTip label="Zoom in" shortcut="=">
+            <button
+              type="button"
+              class="flex size-8 items-center justify-center rounded-lg text-foreground transition hover:bg-black/[0.04]"
+              @click="flow.zoomIn({ duration: 150 })"
+            >
+              <ZoomIn :size="14" />
+            </button>
+          </IntegrationsEditorTip>
+        </div>
+        </div>
+        </TooltipProvider>
       </div>
 
       <!-- Empty-state -->
@@ -375,45 +1641,59 @@ const edgeTypes = {
         v-if="!vfNodes.length"
         class="pointer-events-none absolute inset-0 flex items-center justify-center"
       >
-        <div class="pointer-events-auto rounded-lg border border-dashed border-black/[0.12] bg-white/80 px-5 py-4 text-center text-sm text-muted-foreground shadow-sm backdrop-blur-sm">
+        <div class="rounded-lg border border-dashed border-black/[0.12] bg-white/80 px-5 py-4 text-center text-sm text-muted-foreground shadow-sm backdrop-blur-sm">
           <div class="font-medium text-foreground mb-1">
             Empty canvas
           </div>
-          <p class="mb-3">
-            Drop a trigger and an action to build your first workflow.
+          <p>
+            Drag a trigger and an action from the panel on the left.
           </p>
-          <button
-            type="button"
-            class="inline-flex items-center gap-1 rounded-md bg-emerald-500 px-2 py-1 text-sm font-medium text-white shadow-sm transition hover:bg-emerald-600"
-            @click="paletteOpen = true"
-          >
-            <Plus :size="11" />
-            Open palette
-          </button>
         </div>
       </div>
     </div>
 
-    <Transition
-      enter-active-class="transition-transform duration-200 ease-out"
-      enter-from-class="translate-x-full"
-      enter-to-class="translate-x-0"
-      leave-active-class="transition-transform duration-150 ease-in"
-      leave-from-class="translate-x-0"
-      leave-to-class="translate-x-full"
-    >
-      <NodeInspector
-        v-if="selection"
-        :selection="selection"
-        :secret-keys="secretKeys"
-        @update="applyInspectorUpdate"
-        @close="selectedId = null"
-        @remove="selectedId && removeBlobNode(selectedId)"
-      />
-    </Transition>
+    <!-- Workflow variables lightbox (control-pane entry). -->
+    <WorkflowVariablesDialog
+      v-model:open="variablesOpen"
+      :variables="blob.variables ?? {}"
+      @update:variables="updateVariables"
+    />
+
+    <!-- Node/trigger configuration — a near-fullscreen workbench lightbox
+         (Input pane / Parameters+Settings tabs / Save+Cancel footer). The
+         inspector edits a draft; closing without Save discards it. -->
+    <Dialog :open="!!selection" @update:open="(v) => {
+  if (!v) {
+    selectedId = null;
+    renameIntent = false;
+  }
+}">
+      <DialogContent class="flex h-[86vh] w-[min(1280px,94vw)] max-w-none flex-col gap-0 overflow-hidden rounded-lg p-0 sm:max-w-none">
+        <NodeInspector
+          v-if="selection"
+          :selection="selection"
+          :secret-keys="secretKeys"
+          :variables="blob.variables"
+          :upstream-outputs="selectedUpstreamOutputs"
+          :autofocus-name="renameIntent"
+          :nodes="blob.nodes"
+          :edges="blob.edges"
+          :triggers="blob.triggers"
+          :dynamic-outputs="dynamicOutputs"
+          :workflow-id="workflow.id"
+          @update="applyInspectorUpdate"
+          @close="selectedId = null"
+          @remove="selectedId && removeBlobNode(selectedId)"
+          @navigate="(id) => {
+  selectedId = id;
+  renameIntent = false;
+}"
+        />
+      </DialogContent>
+    </Dialog>
   </div>
 </template>
 
 <style>
-.vue-flow__attribution{display:none}.vue-flow__connection-path{stroke:#94a3b8;stroke-dasharray:4 4;stroke-width:1.75}.vue-flow__nodesselection-rect,.vue-flow__selection{background:rgba(16,185,129,.06);border:1px dashed rgba(16,185,129,.45)}.vue-flow__handle{z-index:5}.vue-flow__edge.selected .vue-flow__edge-path{filter:drop-shadow(0 0 4px rgba(99,102,241,.5))}.vue-flow__controls{border:1px solid rgba(15,23,42,.08);border-radius:8px;box-shadow:0 1px 2px rgba(15,23,42,.06);overflow:hidden}.vue-flow__controls-button{background:#fff;border-bottom:1px solid rgba(15,23,42,.04);height:28px;width:28px}.vue-flow__controls-button svg{fill:#475569}.vue-flow__minimap{background:hsla(0,0%,100%,.9)!important;border:1px solid rgba(15,23,42,.08);border-radius:8px;box-shadow:0 1px 2px rgba(15,23,42,.06);overflow:hidden}
+.vue-flow__attribution{display:none}.vue-flow__connection-path{stroke:#94a3b8;stroke-dasharray:4 4;stroke-width:1.75}.vue-flow__nodesselection-rect,.vue-flow__selection{background:rgba(16,185,129,.06);border:1px dashed rgba(16,185,129,.45)}.vue-flow__handle{z-index:5}.vue-flow__edge.selected .vue-flow__edge-path{filter:drop-shadow(0 0 4px rgba(99,102,241,.5))}.vue-flow__node.node-pop-in{animation:rvnxx-node-pop .38s cubic-bezier(.2,.85,.3,1.25) both}@keyframes rvnxx-node-pop{0%{opacity:0;scale:.6}60%{opacity:1;scale:1.06}to{opacity:1;scale:1}}.vue-flow__node-toolbar{z-index:1200!important}.canvas-drop-active{box-shadow:inset 0 0 0 2px rgba(139,92,246,.35)}.rvnxx-minimap-embedded.vue-flow__minimap{background:transparent!important;border:none;border-radius:0;box-shadow:none;margin:0;position:static}
 </style>