@revenexx/studio-integrations 0.1.0

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

@@ -0,0 +1,419 @@
+<script setup>
+import { computed, markRaw, nextTick, ref, watch } from "vue";
+import {
+  ConnectionLineType,
+  MarkerType,
+  PanOnScrollMode,
+  SelectionMode,
+  VueFlow,
+  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 "@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 WorkflowNodeView from "./WorkflowNodeView.vue";
+import WorkflowTriggerView from "./WorkflowTriggerView.vue";
+import WorkflowEdgeView from "./WorkflowEdgeView.vue";
+import { layoutWorkflowNodes } from "./workflowLayout";
+import { TRIGGER_TEMPLATES, findManifest } from "../../data/integrationNodeCatalog";
+const props = defineProps({
+  workflow: { type: Object, required: true }
+});
+const emit = defineEmits(["change"]);
+const { keys: secretKeys } = useIntegrationsSecrets();
+const blob = ref(clone(props.workflow.blob));
+watch(() => props.workflow.id, () => {
+  blob.value = clone(props.workflow.blob);
+  syncFromBlob();
+});
+function clone(v) {
+  return JSON.parse(JSON.stringify(v));
+}
+const vfNodes = ref([]);
+const vfEdges = ref([]);
+function edgeKindFromPort(sourceNodeId, output) {
+  const wn = blob.value.nodes.find((n) => n.id === sourceNodeId);
+  if (!wn) return "default";
+  const manifest = findManifest(wn.nodeSlug, wn.nodeVersion);
+  if (!manifest) return "default";
+  if (output === "true") return "branch-true";
+  if (output === "false") return "branch-false";
+  if (output === "error") return "error";
+  const portDef = (manifest.outputs ?? []).find((o) => o.name === output);
+  if (portDef) {
+    if (portDef.kind === "error") return "error";
+    if (portDef.kind === "branch") return "branch";
+    return "success";
+  }
+  for (const o of manifest.outputs ?? []) {
+    if (o.sourceFromConfig) {
+      if (o.kind === "error") return "error";
+      if (o.kind === "branch") return "branch";
+    }
+  }
+  return "default";
+}
+function stripSide(handleId) {
+  if (!handleId) return null;
+  const i = handleId.indexOf("__");
+  return i >= 0 ? handleId.slice(0, i) : handleId;
+}
+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 };
+  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 oppositeSide(s) {
+  return s === "top" ? "bottom" : s === "right" ? "left" : s === "bottom" ? "top" : "right";
+}
+function syncFromBlob() {
+  vfNodes.value = [
+    ...blob.value.triggers.map((t, i) => ({
+      id: t.id,
+      type: "trigger",
+      position: { x: -40, y: 60 + i * 140 },
+      data: t
+    })),
+    ...blob.value.nodes.map((n) => ({
+      id: n.id,
+      type: "workflow",
+      position: n.position ?? { x: 240, y: 80 },
+      data: n
+    }))
+  ];
+  vfEdges.value = blob.value.edges.map((e) => makeVfEdge(e.id, e.from.nodeId, e.to.nodeId, e.from.output));
+}
+function makeVfEdge(id, sourceId, targetId, output) {
+  const kind = edgeKindFromPort(sourceId, output);
+  const wn = blob.value.nodes.find((n) => n.id === sourceId);
+  const manifest = wn ? findManifest(wn.nodeSlug, wn.nodeVersion) : null;
+  const isBranchPort = (manifest?.outputs ?? []).some((o) => o.sourceFromConfig) || ["true", "false", "error"].includes(output);
+  const srcSide = pickSourceSide(sourceId, targetId);
+  const tgtSide = oppositeSide(srcSide);
+  return {
+    id,
+    source: sourceId,
+    target: targetId,
+    sourceHandle: `${output}__${srcSide}`,
+    targetHandle: `__in__${tgtSide}`,
+    type: "flow",
+    data: {
+      kind,
+      label: isBranchPort ? output : void 0
+    },
+    markerEnd: {
+      type: MarkerType.ArrowClosed,
+      width: 16,
+      height: 16,
+      color: edgeColorByKind(kind)
+    }
+  };
+}
+function edgeColorByKind(kind) {
+  switch (kind) {
+    case "success":
+      return "#10b981";
+    case "error":
+      return "#f43f5e";
+    case "branch-true":
+      return "#10b981";
+    case "branch-false":
+      return "#f59e0b";
+    case "branch":
+      return "#8b5cf6";
+    default:
+      return "#94a3b8";
+  }
+}
+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) };
+  syncFromBlob();
+  push();
+});
+flow.onConnect((conn) => {
+  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";
+  blob.value.edges.push({
+    id,
+    from: { nodeId: conn.source, output },
+    to: { nodeId: conn.target, input: void 0 }
+  });
+  syncFromBlob();
+  push();
+});
+flow.onEdgesChange((changes) => {
+  let mutated = false;
+  for (const c of changes) {
+    if (c.type === "remove") {
+      blob.value.edges = blob.value.edges.filter((e) => e.id !== c.id);
+      mutated = true;
+    }
+  }
+  if (mutated) push();
+});
+flow.onNodesChange((changes) => {
+  for (const c of changes) {
+    if (c.type === "remove") removeBlobNode(c.id);
+  }
+});
+function removeBlobNode(id) {
+  blob.value.nodes = blob.value.nodes.filter((n) => n.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 (selectedId.value === id) selectedId.value = null;
+  syncFromBlob();
+  push();
+}
+function push() {
+  emit("change", clone(blob.value));
+}
+function isValidConnection(conn) {
+  if (!conn.source || !conn.target) return false;
+  if (conn.source === conn.target) return false;
+  return true;
+}
+const selectedId = ref(null);
+const selection = computed(() => {
+  if (!selectedId.value) return null;
+  return blob.value.nodes.find((n) => n.id === selectedId.value) ?? blob.value.triggers.find((t) => t.id === selectedId.value) ?? null;
+});
+flow.onNodeClick((evt) => {
+  selectedId.value = evt.node.id;
+});
+flow.onPaneClick(() => {
+  selectedId.value = null;
+});
+const paletteOpen = ref(false);
+watch(selectedId, (next) => {
+  if (next) paletteOpen.value = false;
+});
+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);
+  if (triggerIdx >= 0) {
+    blob.value.triggers[triggerIdx] = next;
+  } else {
+    const nodeIdx = blob.value.nodes.findIndex((n) => n.id === id);
+    if (nodeIdx >= 0) blob.value.nodes[nodeIdx] = next;
+  }
+  syncFromBlob();
+  push();
+}
+function onDragOver(ev) {
+  ev.preventDefault();
+  if (ev.dataTransfer) ev.dataTransfer.dropEffect = "move";
+}
+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 });
+  if (payload.kind === "trigger") {
+    const tpl = TRIGGER_TEMPLATES.find((t) => t.type === payload.type);
+    if (!tpl) return;
+    const id2 = `trg-${Date.now()}`;
+    blob.value.triggers.push({ id: id2, type: tpl.type, config: { ...tpl.defaultConfig } });
+    syncFromBlob();
+    selectedId.value = id2;
+    push();
+    return;
+  }
+  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: Math.round(pos.x), y: Math.round(pos.y) }
+  });
+  syncFromBlob();
+  selectedId.value = id;
+  push();
+}
+function defaultConfigFor(fields = []) {
+  const out = {};
+  for (const f of fields ?? []) {
+    if (f.default !== void 0) out[f.key] = f.default;
+  }
+  return out;
+}
+async function tidyUp() {
+  const laid = layoutWorkflowNodes(vfNodes.value, vfEdges.value, { direction: "LR" });
+  vfNodes.value = laid;
+  for (const n of laid) {
+    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) };
+    }
+  }
+  push();
+  await nextTick();
+  flow.fitView({ padding: 0.2, duration: 400 });
+}
+const nodeTypes = {
+  workflow: markRaw(WorkflowNodeView),
+  trigger: markRaw(WorkflowTriggerView)
+};
+const edgeTypes = {
+  flow: markRaw(WorkflowEdgeView)
+};
+</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="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"
+      @drop="onDrop"
+      @dragover="onDragOver"
+    >
+      <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
+      >
+        <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>
+
+      <!-- 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"
+        >
+          <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"
+        >
+          <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 })"
+        >
+          <Sparkles :size="13" />
+          Fit
+        </button>
+      </div>
+
+      <!-- Empty-state -->
+      <div
+        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="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>
+          <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>
+  </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}
+</style>

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

@@ -0,0 +1,14 @@
+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 type { Workflow, WorkflowBlob } from '../../types/integrations.js';
+type __VLS_Props = {
+    workflow: Workflow;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (blob: WorkflowBlob) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onChange?: ((blob: WorkflowBlob) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,11 @@
+import type { WorkflowNode } from '../../types/integrations.js';
+interface NodeData extends WorkflowNode {
+    __selected?: boolean;
+}
+type __VLS_Props = {
+    id: string;
+    data: NodeData;
+    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/WorkflowNodeView.vue

@@ -0,0 +1,200 @@
+<script setup>
+import { computed } from "vue";
+import { Handle, Position, useVueFlow } from "@vue-flow/core";
+import { NodeToolbar } from "@vue-flow/node-toolbar";
+import * as Lucide from "lucide-vue-next";
+import { NODE_CATEGORIES, findManifest } from "../../data/integrationNodeCatalog";
+const props = defineProps({
+  id: { type: String, required: true },
+  data: { type: Object, required: true },
+  selected: { type: Boolean, required: false }
+});
+defineOptions({ inheritAttrs: false });
+defineEmits(["updateNodeInternals"]);
+const manifest = computed(() => findManifest(props.data.nodeSlug, props.data.nodeVersion));
+const category = computed(() => NODE_CATEGORIES.find((c) => c.key === manifest.value?.category));
+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 labelText(value) {
+  if (!value) return "";
+  return typeof value === "string" ? value : Object.values(value)[0] ?? "";
+}
+const title = computed(
+  () => labelText(props.data.name) || labelText(manifest.value?.name) || props.data.nodeSlug
+);
+const description = computed(() => labelText(manifest.value?.description));
+const inputRequired = computed(() => manifest.value?.input?.required !== false);
+const outputs = computed(() => {
+  const m = manifest.value;
+  if (!m) return [{ name: "default", kind: "default", label: "out" }];
+  const ports = [];
+  for (const o of m.outputs ?? []) {
+    if (o.name) {
+      ports.push({ name: o.name, kind: o.kind, label: labelText(o.label) || o.name });
+    } else if (o.sourceFromConfig) {
+      const raw = props.data.config?.[o.sourceFromConfig];
+      const values = Array.isArray(raw) ? raw : [];
+      for (const v of values) {
+        const name = String(v);
+        ports.push({ name, kind: o.kind, label: name });
+      }
+      if (o.fallback) {
+        ports.push({
+          name: o.fallback.name,
+          kind: o.kind,
+          label: labelText(o.fallback.label) || o.fallback.name
+        });
+      }
+    }
+  }
+  if (!ports.length) ports.push({ name: "default", kind: "default", label: "out" });
+  return ports;
+});
+function handleColorClass(kind) {
+  if (kind === "error") return "!bg-rose-400";
+  if (kind === "branch") return "!bg-violet-400";
+  return "!bg-slate-400";
+}
+function legendDotClass(kind) {
+  if (kind === "error") return "bg-rose-400";
+  if (kind === "branch") return "bg-violet-400";
+  return "bg-slate-400";
+}
+const SIDES = ["top", "right", "bottom", "left"];
+function sideToPosition(s) {
+  return s === "top" ? Position.Top : s === "right" ? Position.Right : s === "bottom" ? Position.Bottom : Position.Left;
+}
+function distributedStyle(side, i, total) {
+  const pct = `${(i + 1) / (total + 1) * 100}%`;
+  if (side === "top" || side === "bottom") return { left: pct };
+  return { top: pct };
+}
+const flow = useVueFlow();
+function duplicate() {
+  const offset = 80;
+  const newId = `n-${Date.now()}`;
+  flow.addNodes([{
+    id: newId,
+    type: "workflow",
+    position: {
+      x: (props.data.position?.x ?? 0) + offset,
+      y: (props.data.position?.y ?? 0) + offset
+    },
+    data: {
+      ...props.data,
+      id: newId,
+      position: {
+        x: (props.data.position?.x ?? 0) + offset,
+        y: (props.data.position?.y ?? 0) + offset
+      }
+    }
+  }]);
+}
+function remove() {
+  flow.removeNodes([props.id]);
+}
+</script>
+
+<template>
+  <NodeToolbar :position="Position.Top" :offset="36" class="flex items-center gap-1 rounded-md border border-black/[0.08] bg-white px-1 py-1 shadow-md">
+    <button
+      type="button"
+      class="flex h-6 items-center gap-1 rounded px-1.5 text-sm text-foreground/80 hover:bg-muted/50"
+      title="Duplicate"
+      @click="duplicate"
+    >
+      <Lucide.Copy :size="11" />
+    </button>
+    <div class="h-4 w-px bg-black/10" />
+    <button
+      type="button"
+      class="flex h-6 items-center gap-1 rounded px-1.5 text-sm text-rose-600 hover:bg-rose-50"
+      title="Delete"
+      @click="remove"
+    >
+      <Lucide.Trash2 :size="11" />
+    </button>
+  </NodeToolbar>
+
+  <!-- Input handles: one per side, centered on each edge. -->
+  <template v-if="inputRequired">
+    <Handle
+      v-for="side in SIDES"
+      :id="`__in__${side}`"
+      :key="`in-${side}`"
+      type="target"
+      :position="sideToPosition(side)"
+      class="!size-2 !rounded-full !border-2 !border-white !bg-slate-400 opacity-70 transition-all hover:!size-2.5 hover:!bg-slate-600 hover:opacity-100"
+    />
+  </template>
+
+  <!-- Output handles: each port exposed on all 4 sides, distributed evenly
+       per side so multi-output nodes (success/error, switch cases) don't
+       overlap. -->
+  <template v-for="side in SIDES" :key="`side-${side}`">
+    <Handle
+      v-for="(p, i) in outputs"
+      :id="`${p.name}__${side}`"
+      :key="`${p.name}-${side}`"
+      type="source"
+      :position="sideToPosition(side)"
+      :title="p.label"
+      :style="distributedStyle(side, i, outputs.length)"
+      class="!size-2 !rounded-full !border-2 !border-white opacity-70 transition-all hover:!size-2.5 hover:opacity-100"
+      :class="handleColorClass(p.kind)"
+    />
+  </template>
+
+  <div
+    class="w-[240px] rounded-lg border bg-white transition-all duration-150"
+    :class="selected ? 'border-emerald-500/50 shadow-[0_0_0_2px_rgba(16,185,129,0.18)]' : 'border-black/[0.08] shadow-sm hover:shadow-md hover:border-black/[0.16]'"
+  >
+    <div class="flex items-center gap-2 px-3 pt-2.5 pb-1.5">
+      <span class="flex size-7 shrink-0 items-center justify-center rounded-md" :class="category?.color ?? 'bg-muted text-foreground'">
+        <component :is="iconFor(manifest?.icon)" :size="14" :stroke-width="2.25" />
+      </span>
+      <div class="min-w-0 flex-1">
+        <div class="text-sm font-semibold leading-tight text-foreground truncate">
+          {{ title }}
+        </div>
+        <div class="text-sm text-muted-foreground truncate font-mono">
+          {{ data.nodeSlug }}<span class="opacity-60">@{{ data.nodeVersion }}</span>
+        </div>
+      </div>
+    </div>
+
+    <p v-if="description" class="px-3 pb-2 text-sm text-muted-foreground line-clamp-2">
+      {{ description }}
+    </p>
+
+    <div
+      v-if="outputs.length"
+      class="border-t border-black/[0.04] bg-muted/20 px-3 py-1.5 rounded-b-lg"
+    >
+      <div
+        v-for="p in outputs"
+        :key="p.name"
+        class="flex items-center gap-1.5 py-0.5 text-sm"
+      >
+        <span class="size-1.5 rounded-full shrink-0" :class="legendDotClass(p.kind)" />
+        <span
+          class="font-mono truncate"
+          :class="p.kind === 'error' ? 'text-rose-600' : p.kind === 'branch' ? 'text-violet-600' : 'text-foreground/70'"
+        >
+          {{ p.label }}
+        </span>
+      </div>
+    </div>
+
+    <div
+      v-if="data.retry"
+      class="flex items-center gap-1.5 border-t border-black/[0.04] px-3 py-1 text-sm text-muted-foreground"
+    >
+      <Lucide.RotateCcw :size="10" />
+      <span>Retry × {{ data.retry.maxAttempts }} · {{ data.retry.strategy ?? "linear" }}</span>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,11 @@
+import type { WorkflowNode } from '../../types/integrations.js';
+interface NodeData extends WorkflowNode {
+    __selected?: boolean;
+}
+type __VLS_Props = {
+    id: string;
+    data: NodeData;
+    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/WorkflowTriggerView.d.vue.ts

@@ -0,0 +1,8 @@
+import type { WorkflowTrigger } from '../../types/integrations.js';
+type __VLS_Props = {
+    id: string;
+    data: WorkflowTrigger;
+    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;