@revenexx/studio-integrations 0.1.4 → 0.3.0

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

@@ -0,0 +1,208 @@
+<script setup>
+import { computed, nextTick, ref, watch } from "vue";
+import { Position, useVueFlow } from "@vue-flow/core";
+import { NodeToolbar } from "@vue-flow/node-toolbar";
+import { Trash2 } from "lucide-vue-next";
+const props = defineProps({
+  id: { type: String, required: true },
+  data: { type: Object, required: true },
+  selected: { type: Boolean, required: false }
+});
+defineOptions({ inheritAttrs: false });
+defineEmits(["updateNodeInternals"]);
+const flow = useVueFlow();
+const STICKY_COLORS = [
+  { bg: "#fef3c7", border: "#fde68a", name: "Amber" },
+  { bg: "#ffedd5", border: "#fed7aa", name: "Orange" },
+  { bg: "#ffe4e6", border: "#fecdd3", name: "Rose" },
+  { bg: "#dcfce7", border: "#bbf7d0", name: "Green" },
+  { bg: "#dbeafe", border: "#bfdbfe", name: "Blue" },
+  { bg: "#ede9fe", border: "#ddd6fe", name: "Violet" },
+  { bg: "#f5f5f4", border: "#e7e5e4", name: "Gray" }
+];
+const color = computed(() => STICKY_COLORS[props.data.sticky.color ?? 0] ?? STICKY_COLORS[0]);
+function pickColor(i) {
+  if ((props.data.sticky.color ?? 0) === i) return;
+  props.data.onUpdate({ color: i });
+}
+const DEFAULT_WIDTH = 240;
+const DEFAULT_HEIGHT = 160;
+const MIN_WIDTH = 150;
+const MIN_HEIGHT = 80;
+const width = ref(props.data.sticky.size?.width ?? DEFAULT_WIDTH);
+const height = ref(props.data.sticky.size?.height ?? DEFAULT_HEIGHT);
+const resizing = ref(false);
+watch(() => props.data.sticky.size, (s) => {
+  if (resizing.value) return;
+  width.value = s?.width ?? DEFAULT_WIDTH;
+  height.value = s?.height ?? DEFAULT_HEIGHT;
+});
+let resizeStart = { x: 0, y: 0, w: 0, h: 0 };
+function onResizeStart(e) {
+  e.stopPropagation();
+  e.preventDefault();
+  resizing.value = true;
+  resizeStart = { x: e.clientX, y: e.clientY, w: width.value, h: height.value };
+  e.target.setPointerCapture(e.pointerId);
+}
+function onResizeMove(e) {
+  if (!resizing.value) return;
+  const zoom = flow.viewport.value.zoom || 1;
+  width.value = Math.max(MIN_WIDTH, Math.round(resizeStart.w + (e.clientX - resizeStart.x) / zoom));
+  height.value = Math.max(MIN_HEIGHT, Math.round(resizeStart.h + (e.clientY - resizeStart.y) / zoom));
+}
+function onResizeEnd() {
+  if (!resizing.value) return;
+  resizing.value = false;
+  props.data.onUpdate({ size: { width: width.value, height: height.value } });
+}
+const editing = ref(false);
+const draft = ref("");
+const textareaEl = ref(null);
+function startEdit() {
+  if (editing.value) return;
+  draft.value = props.data.sticky.content;
+  editing.value = true;
+  nextTick(() => textareaEl.value?.focus());
+}
+function commitEdit() {
+  if (!editing.value) return;
+  editing.value = false;
+  if (draft.value !== props.data.sticky.content) {
+    props.data.onUpdate({ content: draft.value });
+  }
+}
+function onTextareaKeydown(e) {
+  e.stopPropagation();
+  if (e.key === "Escape") commitEdit();
+}
+watch(editing, (v) => {
+  flow.updateNode(props.id, { zIndex: v ? 10 : -100 });
+});
+const hovered = ref(false);
+let hoverTimer = null;
+function onHoverEnter() {
+  if (hoverTimer) clearTimeout(hoverTimer);
+  hovered.value = true;
+}
+function onHoverLeave() {
+  if (hoverTimer) clearTimeout(hoverTimer);
+  hoverTimer = setTimeout(() => {
+    hovered.value = false;
+  }, 250);
+}
+const toolbarVisible = computed(() => !editing.value && (hovered.value || !!props.selected));
+function escapeHtml(s) {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function inline(s) {
+  return s.replace(/`([^`\n]+)`/g, '<code class="rounded bg-black/[0.07] px-1 py-px font-mono text-[0.85em]">$1</code>').replace(/\[([^\]]+)\]\((https?:\/\/[^\s)]+)\)/g, '<a href="$2" target="_blank" rel="noopener noreferrer" class="font-medium underline decoration-current/40 underline-offset-2 hover:decoration-current">$1</a>').replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>").replace(/(^|[^*])\*([^*\n]+)\*(?!\*)/g, "$1<em>$2</em>");
+}
+function renderMarkdownLite(src) {
+  return escapeHtml(src).split("\n").map((line) => {
+    const h = /^(#{1,3})\s+(.+)$/.exec(line);
+    if (h) {
+      const cls = h[1].length === 1 ? "text-base font-semibold" : h[1].length === 2 ? "text-sm font-semibold" : "text-sm font-medium";
+      return `<div class="${cls}">${inline(h[2])}</div>`;
+    }
+    const ul = /^[-*]\s+(.+)$/.exec(line);
+    if (ul) return `<div class="flex gap-1.5 pl-1"><span class="select-none">\u2022</span><span class="min-w-0">${inline(ul[1])}</span></div>`;
+    const ol = /^(\d+)\.\s+(.+)$/.exec(line);
+    if (ol) return `<div class="flex gap-1.5 pl-1"><span class="select-none tabular-nums">${ol[1]}.</span><span class="min-w-0">${inline(ol[2])}</span></div>`;
+    return line ? `<div>${inline(line)}</div>` : "<div>&nbsp;</div>";
+  }).join("");
+}
+const rendered = computed(() => renderMarkdownLite(props.data.sticky.content));
+function onViewMouseDown(e) {
+  if (e.target?.closest("a")) e.stopPropagation();
+}
+</script>
+
+<template>
+  <!-- Hover/selection toolbar: color palette + delete -->
+  <NodeToolbar :is-visible="toolbarVisible" :position="Position.Top" :offset="8">
+    <div
+      class="flex items-center gap-1 rounded-lg border border-black/[0.06] bg-white px-1.5 py-1 shadow-md"
+      @mouseenter="onHoverEnter"
+      @mouseleave="onHoverLeave"
+    >
+      <button
+        v-for="(c, i) in STICKY_COLORS"
+        :key="i"
+        type="button"
+        class="size-5 rounded-full border transition hover:scale-110"
+        :class="(data.sticky.color ?? 0) === i ? 'ring-2 ring-black/25 ring-offset-1' : ''"
+        :style="{ backgroundColor: c.bg, borderColor: c.border }"
+        :title="c.name"
+        @click="pickColor(i)"
+      />
+      <div class="mx-0.5 h-4 w-px bg-black/10" />
+      <button
+        type="button"
+        class="flex size-6 items-center justify-center rounded-md text-muted-foreground transition hover:bg-rose-50 hover:text-rose-600"
+        title="Delete note"
+        @click="data.onRemove()"
+      >
+        <Trash2 :size="13" />
+      </button>
+    </div>
+  </NodeToolbar>
+
+  <!-- Card -->
+  <div
+    class="relative flex flex-col overflow-hidden rounded-lg border text-sm leading-snug text-stone-700 shadow-sm"
+    :class="[
+  selected ? 'ring-2 ring-emerald-400/60' : '',
+  editing ? '' : 'cursor-grab active:cursor-grabbing'
+]"
+    :style="{
+  width: `${width}px`,
+  height: `${height}px`,
+  backgroundColor: color.bg,
+  borderColor: color.border
+}"
+    @mouseenter="onHoverEnter"
+    @mouseleave="onHoverLeave"
+    @dblclick.stop="startEdit"
+  >
+    <!-- View mode -->
+    <div
+      v-if="!editing"
+      class="h-full w-full overflow-hidden whitespace-pre-wrap break-words px-3 py-2"
+      @mousedown="onViewMouseDown"
+    >
+      <div v-if="data.sticky.content" v-html="rendered" />
+      <span v-else class="select-none text-stone-400">Double-click to edit</span>
+    </div>
+
+    <!-- Edit mode — nodrag/nowheel so typing and scrolling never drag or zoom
+         the canvas; keydown is stopped so Delete/Shift+S stay in the textarea. -->
+    <textarea
+      v-else
+      ref="textareaEl"
+      v-model="draft"
+      class="nodrag nowheel h-full w-full resize-none bg-transparent px-3 py-2 text-sm leading-snug text-stone-700 outline-none placeholder:text-stone-400"
+      placeholder="Write a note… (# heading, **bold**, *italic*, `code`, [link](https://…), - list)"
+      spellcheck="false"
+      @blur="commitEdit"
+      @keydown="onTextareaKeydown"
+      @mousedown.stop
+      @dblclick.stop
+    />
+
+    <!-- Bottom-right resize handle (hand-rolled; min 150x80) -->
+    <div
+      class="nodrag absolute bottom-0 right-0 flex size-4 cursor-se-resize items-end justify-end p-0.5 text-stone-400/80"
+      title="Resize"
+      @pointerdown="onResizeStart"
+      @pointermove="onResizeMove"
+      @pointerup="onResizeEnd"
+      @pointercancel="onResizeEnd"
+    >
+      <svg viewBox="0 0 8 8" class="size-2.5" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round">
+        <path d="M7 1 1 7" />
+        <path d="M7 4.5 4.5 7" />
+      </svg>
+    </div>
+  </div>
+</template>

package/dist/runtime/components/Integrations/StickyNoteView.vue.d.ts

@@ -0,0 +1,28 @@
+import type { WorkflowSticky } from '../../types/integrations.js';
+/**
+ * Sticky note — custom vue-flow node type `sticky`.
+ *
+ * An engine-irrelevant annotation card persisted in `blob.stickies`. The
+ * editor (WorkflowEditor.vue) renders stickies with a negative zIndex so they
+ * sit BEHIND workflow/trigger nodes, and injects the persistence callbacks
+ * through `data` — this component never touches the blob itself.
+ *
+ * - Double-click → textarea edit; click-out (blur) or Esc commits.
+ * - NodeToolbar on hover/selection: 7-color pastel palette + delete.
+ * - Hand-rolled bottom-right resize handle (no @vue-flow/node-resizer dep);
+ *   size persists once on pointer-up.
+ */
+export interface StickyNodeData {
+    sticky: WorkflowSticky;
+    /** Persist a partial change into the blob (editor-side, syncs + pushes). */
+    onUpdate: (patch: Partial<Pick<WorkflowSticky, 'content' | 'size' | 'color'>>) => void;
+    /** Remove this sticky from the blob (editor-side). */
+    onRemove: () => void;
+}
+type __VLS_Props = {
+    id: string;
+    data: StickyNodeData;
+    selected?: boolean;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/Integrations/TemplateFlowPreview.d.vue.ts

@@ -0,0 +1,29 @@
+import type { WorkflowBlob } from '../../types/integrations.js';
+type __VLS_Props = {
+    blob: WorkflowBlob | null;
+    /** Host box height in px; width follows the container. */
+    height?: number;
+    /** Extra logical padding around the graph. */
+    padding?: number;
+    /**
+     * Show error wiring (Stop and Error nodes + rose edges). Off by default:
+     * the gallery sells the happy path; failure plumbing is editor detail.
+     */
+    showErrorBranches?: boolean;
+};
+declare var __VLS_12: {};
+type __VLS_Slots = {} & {
+    empty?: (props: typeof __VLS_12) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    height: number;
+    padding: number;
+    showErrorBranches: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,201 @@
+<script setup>
+import { computed } from "vue";
+import * as Lucide from "lucide-vue-next";
+import { findManifest, NODE_CATEGORIES, TRIGGER_TEMPLATES } from "../../data/integrationNodeCatalog";
+import { resolveLocalized } from "../../utils/localize";
+import IntegrationsNodeLogo from "./NodeLogo.vue";
+const props = defineProps({
+  blob: { type: [Object, null], required: true },
+  height: { type: Number, required: false, default: 144 },
+  padding: { type: Number, required: false, default: 36 },
+  showErrorBranches: { type: Boolean, required: false, default: false }
+});
+const STOP_SLUG = "revenexx:stop-and-error";
+const NODE_W = 220;
+const NODE_H = 58;
+const TRIG_W = 200;
+const TRIG_H = 84;
+const boxes = computed(() => {
+  const blob = props.blob;
+  if (!blob) return [];
+  const out = [];
+  const triggers = blob.triggers ?? [];
+  triggers.forEach((t, i) => {
+    const pos = blob.triggerPositions?.[t.id] ?? { x: 40, y: 40 + i * 160 };
+    const template = TRIGGER_TEMPLATES.find((tt) => tt.type === t.type);
+    const subtitle = t.type === "schedule" && t.config?.cron ? String(t.config.cron) : t.type === "webhook" && t.config?.path ? String(t.config.path) : resolveLocalized(template?.description ?? "");
+    out.push({
+      key: `t-${t.id}`,
+      kind: "trigger",
+      x: pos.x,
+      y: pos.y,
+      w: TRIG_W,
+      h: TRIG_H,
+      label: typeof t.name === "string" && t.name || t.type.charAt(0).toUpperCase() + t.type.slice(1),
+      subtitle,
+      type: t.type,
+      manifest: null,
+      icon: iconFor(template?.icon ?? "Zap")
+    });
+  });
+  blob.nodes.forEach((n, i) => {
+    if (!props.showErrorBranches && n.nodeSlug === STOP_SLUG) return;
+    const pos = n.position ?? { x: 320 + i * 260, y: 60 };
+    const manifest = findManifest(n.nodeSlug, n.nodeVersion);
+    const groups = (manifest?.groups ?? []).map((g) => resolveLocalized(g)).filter(Boolean);
+    out.push({
+      key: `n-${n.id}`,
+      kind: "node",
+      x: pos.x,
+      y: pos.y,
+      w: NODE_W,
+      h: NODE_H,
+      label: manifest ? resolveLocalized(manifest.name) : prettify(n.nodeSlug),
+      subtitle: groups[groups.length - 1] ?? "",
+      manifest,
+      icon: iconFor(manifest?.icon),
+      categoryColor: NODE_CATEGORIES.find((c) => c.key === manifest?.category)?.color ?? "bg-muted text-foreground"
+    });
+  });
+  return out;
+});
+function hasLogo(m) {
+  return (m?.images ?? []).some((i) => i.category === "logo");
+}
+function prettify(slug) {
+  const tail = slug.includes(":") ? slug.split(":").pop() : slug;
+  return tail.split("-").map((s) => s.charAt(0).toUpperCase() + s.slice(1)).join(" ");
+}
+function iconFor(name) {
+  if (!name) return Lucide.Box;
+  const cleaned = (name.includes(":") ? name.split(":").pop() : name).split("-").map((s) => s.charAt(0).toUpperCase() + s.slice(1)).join("");
+  return Lucide[cleaned] || Lucide.Box;
+}
+function stepPath(x1, y1, x2, y2) {
+  if (y1 === y2) return `M ${x1} ${y1} L ${x2} ${y2}`;
+  if (x2 - x1 >= 48) {
+    const midX = x1 + (x2 - x1) / 2;
+    return `M ${x1} ${y1} L ${midX} ${y1} L ${midX} ${y2} L ${x2} ${y2}`;
+  }
+  const outX = x1 + 24;
+  return `M ${x1} ${y1} L ${outX} ${y1} L ${outX} ${y2} L ${x2} ${y2}`;
+}
+const edgePaths = computed(() => {
+  const blob = props.blob;
+  if (!blob) return [];
+  const byKey = /* @__PURE__ */ new Map();
+  for (const b of boxes.value) byKey.set(b.key.slice(2), b);
+  return (blob.edges ?? []).flatMap((e) => {
+    if (!props.showErrorBranches && e.from.output === "error") return [];
+    const from = byKey.get(e.from.nodeId);
+    const to = byKey.get(e.to.nodeId);
+    if (!from || !to) return [];
+    const x1 = from.x + from.w;
+    const y1 = from.y + from.h / 2;
+    const x2 = to.x;
+    const y2 = to.y + to.h / 2;
+    const tone = e.from.output === "error" ? "error" : from.kind === "trigger" ? "trigger" : "default";
+    return [{ key: e.id, d: stepPath(x1, y1, x2, y2), tone }];
+  });
+});
+const EDGE_STROKE = {
+  default: "#94a3b8",
+  trigger: "#10b981",
+  error: "#f43f5e"
+};
+const bounds = computed(() => {
+  if (!boxes.value.length) return { x: 0, y: 0, w: 1, h: 1 };
+  const minX = Math.min(...boxes.value.map((b) => b.x)) - props.padding;
+  const minY = Math.min(...boxes.value.map((b) => b.y)) - props.padding;
+  const maxX = Math.max(...boxes.value.map((b) => b.x + b.w)) + props.padding;
+  const maxY = Math.max(...boxes.value.map((b) => b.y + b.h)) + props.padding;
+  return { x: minX, y: minY, w: maxX - minX, h: maxY - minY };
+});
+</script>
+
+<template>
+  <div
+    class="relative w-full overflow-hidden"
+    :style="{ height: `${height}px` }"
+  >
+    <svg
+      v-if="boxes.length"
+      class="absolute inset-0 h-full w-full"
+      :viewBox="`${bounds.x} ${bounds.y} ${bounds.w} ${bounds.h}`"
+      preserveAspectRatio="xMidYMid meet"
+    >
+      <defs>
+        <marker
+          v-for="(stroke, tone) in EDGE_STROKE"
+          :id="`tpl-arrow-${tone}`"
+          :key="tone"
+          viewBox="0 0 10 10"
+          refX="9"
+          refY="5"
+          markerWidth="7"
+          markerHeight="7"
+          orient="auto-start-reverse"
+        >
+          <path d="M 0 0 L 10 5 L 0 10 z" :fill="stroke" />
+        </marker>
+      </defs>
+      <path
+        v-for="e in edgePaths"
+        :key="e.key"
+        :d="e.d"
+        fill="none"
+        :stroke="EDGE_STROKE[e.tone]"
+        :stroke-width="1.75"
+        :marker-end="`url(#tpl-arrow-${e.tone})`"
+      />
+      <foreignObject
+        v-for="b in boxes"
+        :key="b.key"
+        :x="b.x"
+        :y="b.y"
+        :width="b.w"
+        :height="b.h"
+      >
+        <!-- Trigger — mirrors WorkflowTriggerView (gradient card + footer strip). -->
+        <div
+          v-if="b.kind === 'trigger'"
+          class="flex h-full w-full flex-col rounded-lg border-2 border-emerald-400/40 bg-gradient-to-br from-emerald-50 to-white shadow-sm"
+        >
+          <div class="flex flex-1 items-center gap-2.5 px-3 py-2">
+            <span class="flex size-8 shrink-0 items-center justify-center rounded-md bg-emerald-500 text-white shadow-sm">
+              <component :is="b.icon" :size="15" :stroke-width="2.5" />
+            </span>
+            <div class="min-w-0 flex-1">
+              <div class="truncate text-sm font-semibold leading-tight text-foreground">{{ b.label }}</div>
+              <div v-if="b.subtitle" class="mt-0.5 truncate text-sm text-muted-foreground">{{ b.subtitle }}</div>
+            </div>
+          </div>
+          <div class="rounded-b-md border-t border-emerald-500/15 bg-emerald-500/[0.04] px-3 py-1 text-mono font-semibold text-emerald-700/80">
+            Trigger · {{ b.type }}
+          </div>
+        </div>
+
+        <!-- Node — mirrors WorkflowNodeView (white card, size-8 icon chip). -->
+        <div
+          v-else
+          class="flex h-full w-full items-center gap-2.5 rounded-lg border border-black/[0.08] bg-white px-3 py-2.5 shadow-sm"
+        >
+          <span
+            class="flex size-8 shrink-0 items-center justify-center rounded-md"
+            :class="hasLogo(b.manifest) ? 'bg-white ring-1 ring-black/[0.06]' : b.categoryColor"
+          >
+            <IntegrationsNodeLogo v-if="hasLogo(b.manifest)" :manifest="b.manifest" :size="18" />
+            <component :is="b.icon" v-else :size="15" :stroke-width="2.25" />
+          </span>
+          <div class="min-w-0 flex-1">
+            <div class="truncate text-sm font-semibold leading-tight text-foreground">{{ b.label }}</div>
+            <div v-if="b.subtitle" class="mt-0.5 truncate text-sm text-muted-foreground">{{ b.subtitle }}</div>
+          </div>
+        </div>
+      </foreignObject>
+    </svg>
+    <div v-else class="flex h-full items-center justify-center text-sm text-muted-foreground">
+      <slot name="empty">Preview loading…</slot>
+    </div>
+  </div>
+</template>

package/dist/runtime/components/Integrations/TemplateFlowPreview.vue.d.ts

@@ -0,0 +1,29 @@
+import type { WorkflowBlob } from '../../types/integrations.js';
+type __VLS_Props = {
+    blob: WorkflowBlob | null;
+    /** Host box height in px; width follows the container. */
+    height?: number;
+    /** Extra logical padding around the graph. */
+    padding?: number;
+    /**
+     * Show error wiring (Stop and Error nodes + rose edges). Off by default:
+     * the gallery sells the happy path; failure plumbing is editor detail.
+     */
+    showErrorBranches?: boolean;
+};
+declare var __VLS_12: {};
+type __VLS_Slots = {} & {
+    empty?: (props: typeof __VLS_12) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    height: number;
+    padding: number;
+    showErrorBranches: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Integrations/WorkflowContextMenu.d.vue.ts

@@ -0,0 +1,32 @@
+export type MenuKind = 'node' | 'selection' | 'canvas';
+export type MenuActionId = 'open' | 'rename' | 'copy' | 'duplicate' | 'paste' | 'run' | 'tidy-up' | 'fit-view' | 'add-node' | 'add-sticky' | 'group' | 'select-all' | 'clear-selection' | 'delete';
+type __VLS_Props = {
+    /** Which context was right-clicked. The editor sets this in the vue-flow hooks. */
+    kind: MenuKind;
+    /** Number of currently selected nodes (drives selection labels/guards). */
+    selectionCount: number;
+    /** Total nodes on the canvas (disables "Select all" when everything is selected). */
+    totalNodes: number;
+    /** True when the single targeted node is a trigger (duplicate disabled in v1). */
+    targetIsTrigger?: boolean;
+    /** Busy flag for the Run item. */
+    runBusy?: boolean;
+};
+declare var __VLS_14: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_14) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    action: (id: MenuActionId) => any;
+    "update:open": (open: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onAction?: ((id: MenuActionId) => any) | undefined;
+    "onUpdate:open"?: ((open: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,138 @@
+<script setup>
+import { computed } from "vue";
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuTrigger
+} from "@revenexx/studio";
+const props = defineProps({
+  kind: { type: String, required: true },
+  selectionCount: { type: Number, required: true },
+  totalNodes: { type: Number, required: true },
+  targetIsTrigger: { type: Boolean, required: false },
+  runBusy: { type: Boolean, required: false }
+});
+const emit = defineEmits(["action", "update:open"]);
+const isMac = typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform ?? "");
+function formatShortcut(tokens) {
+  const parts = tokens.split("+");
+  const out = [];
+  for (const raw of parts) {
+    const t = raw.toLowerCase();
+    if (t === "mod") out.push(isMac ? "\u2318" : "Ctrl");
+    else if (t === "shift") out.push("\u21E7");
+    else if (t === "alt") out.push(isMac ? "\u2325" : "Alt");
+    else if (t === "enter") out.push("\u21B5");
+    else if (t === "backspace") out.push("\u232B");
+    else if (t === "delete") out.push("Del");
+    else if (t === "escape") out.push("Esc");
+    else if (t === "tab") out.push("Tab");
+    else if (t === "space") out.push("Space");
+    else if (t === "f2") out.push("F2");
+    else out.push(t.toUpperCase());
+  }
+  return isMac ? out.join("") : out.join("+");
+}
+const allSelected = computed(() => props.totalNodes > 0 && props.selectionCount >= props.totalNodes);
+const sections = computed(() => {
+  if (props.kind === "node") {
+    return [
+      [
+        { id: "open", label: "Open", shortcut: "enter" },
+        { id: "rename", label: "Rename", shortcut: "f2" }
+      ],
+      [
+        { id: "copy", label: "Copy", shortcut: "mod+c", disabled: props.targetIsTrigger },
+        { id: "duplicate", label: "Duplicate", shortcut: "mod+d", disabled: props.targetIsTrigger }
+      ],
+      [
+        { id: "run", label: "Run workflow", shortcut: "mod+enter", disabled: props.runBusy },
+        { id: "tidy-up", label: "Tidy up", shortcut: "shift+alt+t" }
+      ],
+      [
+        { id: "delete", label: "Delete", shortcut: "backspace", danger: true }
+      ]
+    ];
+  }
+  if (props.kind === "selection") {
+    const n = props.selectionCount;
+    return [
+      [
+        { id: "copy", label: `Copy ${n} nodes`, shortcut: "mod+c" },
+        { id: "duplicate", label: `Duplicate ${n} nodes`, shortcut: "mod+d" }
+      ],
+      [
+        { id: "group", label: `Group ${n} nodes`, shortcut: "mod+g" },
+        { id: "tidy-up", label: "Tidy up", shortcut: "shift+alt+t" },
+        { id: "select-all", label: "Select all", shortcut: "mod+a", disabled: allSelected.value },
+        { id: "clear-selection", label: "Clear selection", shortcut: "escape" }
+      ],
+      [
+        { id: "delete", label: `Delete ${n} nodes`, shortcut: "backspace", danger: true }
+      ]
+    ];
+  }
+  return [
+    [
+      { id: "add-node", label: "Add node\u2026", shortcut: "tab" },
+      { id: "add-sticky", label: "Add sticky", shortcut: "shift+s" },
+      { id: "paste", label: "Paste", shortcut: "mod+v" }
+    ],
+    [
+      { id: "tidy-up", label: "Tidy up", shortcut: "shift+alt+t" },
+      { id: "fit-view", label: "Fit view", shortcut: "1" }
+    ],
+    [
+      { id: "select-all", label: "Select all", shortcut: "mod+a", disabled: allSelected.value || props.totalNodes === 0 }
+    ]
+  ];
+});
+const headerLabel = computed(
+  () => props.kind === "selection" ? `${props.selectionCount} nodes selected` : null
+);
+function onSelect(item) {
+  if (item.disabled) return;
+  emit("action", item.id);
+}
+</script>
+
+<template>
+  <ContextMenu @update:open="(v) => emit('update:open', v)">
+    <!-- The canvas. as-child avoids an extra wrapper element so vue-flow's
+         100%-height layout is untouched. -->
+    <ContextMenuTrigger as-child>
+      <slot />
+    </ContextMenuTrigger>
+
+    <ContextMenuContent class="w-60 rounded-lg border border-black/[0.06] bg-white p-1 shadow-lg">
+      <template v-if="headerLabel">
+        <ContextMenuLabel class="px-2 py-1.5 text-sm font-medium text-muted-foreground">
+          {{ headerLabel }}
+        </ContextMenuLabel>
+        <ContextMenuSeparator class="my-1 h-px bg-black/[0.06]" />
+      </template>
+
+      <template v-for="(group, gi) in sections" :key="gi">
+        <ContextMenuSeparator v-if="gi > 0" class="my-1 h-px bg-black/[0.06]" />
+        <ContextMenuItem
+          v-for="item in group"
+          :key="item.id"
+          :disabled="item.disabled"
+          :variant="item.danger ? 'destructive' : 'default'"
+          class="rounded-md px-2 py-1.5 text-sm"
+          @select="onSelect(item)"
+        >
+          <span class="flex-1 truncate">{{ item.label }}</span>
+          <span v-if="item.hint" class="ml-2 text-sm text-muted-foreground">{{ item.hint }}</span>
+          <ContextMenuShortcut v-if="item.shortcut" class="ml-auto pl-4 text-sm tabular-nums">
+            {{ formatShortcut(item.shortcut) }}
+          </ContextMenuShortcut>
+        </ContextMenuItem>
+      </template>
+    </ContextMenuContent>
+  </ContextMenu>
+</template>