@revenexx/studio-integrations 0.5.1 → 0.7.0

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

@@ -20,22 +20,20 @@ import {
 } from "@revenexx/studio";
 import { toast } from "vue-sonner";
 import { TRIGGER_TEMPLATES } from "../../data/integrationNodeCatalog";
-import TemplateFlowPreview from "./TemplateFlowPreview.vue";
+import TemplateCard from "./TemplateCard.vue";
 import WorkflowIconPicker from "./WorkflowIconPicker.vue";
 import WorkflowTagsInput from "./WorkflowTagsInput.vue";
+import { resolveLocalized } from "../../utils/localize";
 const open = defineModel("open", { type: Boolean, ...{ default: false } });
+const t = useIntegrationsT();
 const router = useRouter();
 const { create, workflows } = useIntegrationsWorkflows();
 const { templates, loading: templatesLoading, error: templatesError, load: loadTemplates, ensureDetails, instantiate } = useIntegrationsTemplates();
 const mode = ref("blank");
-const modeTabs = [
-  { key: "blank", label: "Start blank" },
-  { key: "template", label: "Start from template" }
-];
-function loc(v) {
-  if (!v) return "";
-  return typeof v === "string" ? v : v.en ?? Object.values(v)[0] ?? "";
-}
+const modeTabs = computed(() => [
+  { key: "blank", label: t("integration.workflows.create.tab.blank") },
+  { key: "template", label: t("integration.workflows.create.tab.template") }
+]);
 function iconFor(name2) {
   if (!name2) return Lucide.Box;
   return Lucide[name2] || Lucide.Box;
@@ -48,18 +46,18 @@ const tags = ref([]);
 const icon = ref(null);
 const tagSuggestions = computed(() => {
   const all = /* @__PURE__ */ new Set();
-  for (const wf of workflows.value) for (const t of wf.blob.tags ?? []) all.add(t);
+  for (const wf of workflows.value) for (const t2 of wf.blob.tags ?? []) all.add(t2);
   return [...all].sort();
 });
 const submitting = ref(false);
 const error = ref(null);
-const executionModes = [
-  { key: "async_only", label: "Async only", hint: "Always queued.", icon: "Inbox" },
-  { key: "sync_only", label: "Sync only", hint: "Waits for the result.", icon: "Timer" },
-  { key: "caller_decides", label: "Caller decides", hint: "The request chooses.", icon: "SlidersHorizontal" }
-];
-const selectedTrigger = computed(() => TRIGGER_TEMPLATES.find((t) => t.type === triggerType.value) ?? null);
-const selectedMode = computed(() => executionModes.find((m) => m.key === executionMode.value) ?? executionModes[0]);
+const executionModes = computed(() => [
+  { key: "async_only", label: t("integration.workflows.create.executionMode.asyncOnly.label"), hint: t("integration.workflows.create.executionMode.asyncOnly.hint"), icon: "Inbox" },
+  { key: "sync_only", label: t("integration.workflows.create.executionMode.syncOnly.label"), hint: t("integration.workflows.create.executionMode.syncOnly.hint"), icon: "Timer" },
+  { key: "caller_decides", label: t("integration.workflows.create.executionMode.callerDecides.label"), hint: t("integration.workflows.create.executionMode.callerDecides.hint"), icon: "SlidersHorizontal" }
+]);
+const selectedTrigger = computed(() => TRIGGER_TEMPLATES.find((tt) => tt.type === triggerType.value) ?? null);
+const selectedMode = computed(() => executionModes.value.find((m) => m.key === executionMode.value) ?? executionModes.value[0]);
 watch(open, (v) => {
   if (!v) return;
   mode.value = "blank";
@@ -75,13 +73,13 @@ watch(open, (v) => {
 });
 async function submit() {
   if (!name.value.trim()) {
-    error.value = "Name is required.";
+    error.value = t("integration.workflows.create.error.nameRequired");
     return;
   }
   submitting.value = true;
   error.value = null;
   try {
-    const tpl = TRIGGER_TEMPLATES.find((t) => t.type === triggerType.value);
+    const tpl = TRIGGER_TEMPLATES.find((tt) => tt.type === triggerType.value);
     const handle = globalThis.crypto?.randomUUID?.() ?? `trg-${Date.now()}`;
     const blob = {
       nodeManifestVersion: "v0-draft",
@@ -103,7 +101,7 @@ async function submit() {
     open.value = false;
     await router.push(`/integrations/workflows/${created.id}`);
   } catch (e) {
-    error.value = e.message || "Could not create the workflow.";
+    error.value = e.message || t("integration.workflows.create.error.generic");
   } finally {
     submitting.value = false;
   }
@@ -111,12 +109,12 @@ async function submit() {
 const instantiatingSlug = ref(null);
 const templateSearch = ref("");
 watch(() => templates.value.length, (n) => {
-  if (n) void ensureDetails(templates.value.map((t) => t.slug));
+  if (n) void ensureDetails(templates.value.map((tpl) => tpl.slug));
 }, { immediate: true });
 const filteredTemplates = computed(() => {
   const q = templateSearch.value.trim().toLowerCase();
   if (!q) return templates.value;
-  return templates.value.filter((t) => `${t.name} ${t.description} ${t.category}`.toLowerCase().includes(q));
+  return templates.value.filter((tpl) => `${tpl.name} ${tpl.description} ${tpl.category}`.toLowerCase().includes(q));
 });
 async function useTemplate(slug) {
   if (instantiatingSlug.value) return;
@@ -127,7 +125,7 @@ async function useTemplate(slug) {
     open.value = false;
     await router.push(`/integrations/workflows/${id}`);
   } catch (e) {
-    toast.error(e?.message ?? "Could not create the workflow from this template.");
+    toast.error(e?.message ?? t("integration.workflows.create.toast.templateError"));
   } finally {
     instantiatingSlug.value = null;
   }
@@ -138,7 +136,7 @@ async function useTemplate(slug) {
   <Dialog v-model:open="open">
     <DialogContent class="sm:max-w-4xl">
       <DialogHeader>
-        <DialogTitle>New workflow</DialogTitle>
+        <DialogTitle>{{ t("integration.workflows.create.dialog.title") }}</DialogTitle>
       </DialogHeader>
 
       <!-- Switcher: the same TabBar the studio surfaces use. -->
@@ -149,42 +147,42 @@ async function useTemplate(slug) {
       <form v-if="mode === 'blank'" class="-m-1 max-h-[65vh] space-y-3 overflow-y-auto p-1" @submit.prevent="submit">
         <!-- Two-column rows: label rail left, field right. -->
         <div class="grid grid-cols-[130px_1fr] items-center gap-x-4">
-          <Label for="wf-name">Name</Label>
-          <Input id="wf-name" v-model="name" placeholder="Sync orders nightly" class="bg-white" />
+          <Label for="wf-name">{{ t("integration.workflows.create.field.name.label") }}</Label>
+          <Input id="wf-name" v-model="name" :placeholder="t('integration.workflows.create.field.name.placeholder')" class="bg-white" />
         </div>
 
         <div class="grid grid-cols-[130px_1fr] items-start gap-x-4">
-          <Label for="wf-desc" class="pt-2.5">Description</Label>
+          <Label for="wf-desc" class="pt-2.5">{{ t("integration.workflows.create.field.description.label") }}</Label>
           <Textarea
             id="wf-desc"
             v-model="description"
             rows="2"
-            placeholder="Optional: what this workflow does and why it exists."
+            :placeholder="t('integration.workflows.create.field.description.placeholder')"
             class="bg-white"
           />
         </div>
 
         <div class="grid grid-cols-[130px_1fr] items-center gap-x-4">
-          <Label>Tags</Label>
-          <WorkflowTagsInput v-model="tags" :suggestions="tagSuggestions" />
+          <Label for="wf-tags">{{ t("integration.workflows.create.field.tags.label") }}</Label>
+          <WorkflowTagsInput v-model="tags" input-id="wf-tags" :suggestions="tagSuggestions" />
         </div>
 
         <div class="grid grid-cols-[130px_1fr] items-center gap-x-4">
-          <Label>Icon</Label>
-          <WorkflowIconPicker v-model="icon" />
+          <Label id="wf-icon-label">{{ t("integration.workflows.create.field.icon.label") }}</Label>
+          <WorkflowIconPicker v-model="icon" trigger-labelledby="wf-icon-label" />
         </div>
 
         <div class="grid grid-cols-[130px_1fr] items-center gap-x-4">
-          <Label>Trigger</Label>
+          <Label for="wf-trigger">{{ t("integration.workflows.create.field.trigger.label") }}</Label>
           <Select v-model="triggerType">
-            <SelectTrigger class="w-full bg-white">
+            <SelectTrigger id="wf-trigger" class="w-full bg-white">
               <SelectValue>
                 <span class="flex min-w-0 items-center gap-2">
                   <span class="flex size-6 shrink-0 items-center justify-center rounded-md bg-emerald-100 text-emerald-600">
                     <component :is="iconFor(selectedTrigger?.icon)" :size="13" />
                   </span>
-                  <span class="shrink-0 text-sm font-medium">{{ loc(selectedTrigger?.name) }}</span>
-                  <span class="truncate text-sm text-muted-foreground">{{ loc(selectedTrigger?.description) }}</span>
+                  <span class="shrink-0 text-sm font-medium">{{ resolveLocalized(selectedTrigger?.name) }}</span>
+                  <span class="truncate text-sm text-muted-foreground">{{ resolveLocalized(selectedTrigger?.description) }}</span>
                 </span>
               </SelectValue>
             </SelectTrigger>
@@ -195,8 +193,8 @@ async function useTemplate(slug) {
                     <component :is="iconFor(t.icon)" :size="14" />
                   </span>
                   <span class="min-w-0">
-                    <span class="block text-sm font-medium">{{ loc(t.name) }}</span>
-                    <span class="block text-sm text-muted-foreground">{{ loc(t.description) }}</span>
+                    <span class="block text-sm font-medium">{{ resolveLocalized(t.name) }}</span>
+                    <span class="block text-sm text-muted-foreground">{{ resolveLocalized(t.description) }}</span>
                   </span>
                 </span>
               </SelectItem>
@@ -205,9 +203,9 @@ async function useTemplate(slug) {
         </div>
 
         <div class="grid grid-cols-[130px_1fr] items-center gap-x-4">
-          <Label>Execution mode</Label>
+          <Label for="wf-exec-mode">{{ t("integration.workflows.create.field.executionMode.label") }}</Label>
           <Select v-model="executionMode">
-            <SelectTrigger class="w-full bg-white">
+            <SelectTrigger id="wf-exec-mode" class="w-full bg-white">
               <SelectValue>
                 <span class="flex min-w-0 items-center gap-2">
                   <span class="flex size-6 shrink-0 items-center justify-center rounded-md bg-slate-100 text-slate-500">
@@ -241,10 +239,10 @@ async function useTemplate(slug) {
         <div class="flex gap-2 pt-1">
           <Button type="submit" :disabled="submitting" class="h-8 text-sm">
             <Loader2 v-if="submitting" :size="14" class="animate-spin" />
-            {{ submitting ? "Creating\u2026" : "Create and open editor" }}
+            {{ submitting ? t("integration.workflows.create.action.submitting") : t("integration.workflows.create.action.submit") }}
           </Button>
           <Button type="button" variant="outline" class="h-8 text-sm" @click="open = false">
-            Cancel
+            {{ t("integration.common.action.cancel") }}
           </Button>
         </div>
       </form>
@@ -256,7 +254,8 @@ async function useTemplate(slug) {
           <input
             v-model="templateSearch"
             type="text"
-            placeholder="Search templates…"
+            :aria-label="t('integration.workflows.create.template.search.aria')"
+            :placeholder="t('integration.workflows.create.template.search.placeholder')"
             class="h-8 w-full rounded-md border border-black/[0.08] bg-white pl-7 pr-2 text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500/40"
           >
         </div>
@@ -275,45 +274,31 @@ async function useTemplate(slug) {
           {{ templatesError }}
         </div>
         <p v-else-if="!templates.length" class="p-6 text-center text-sm text-muted-foreground">
-          No templates in the catalogue yet.
+          {{ t("integration.workflows.create.template.empty") }}
         </p>
         <p v-else-if="!filteredTemplates.length" class="p-6 text-center text-sm text-muted-foreground">
-          Nothing matches “{{ templateSearch }}”.
+          {{ t("integration.workflows.create.template.noMatch", { query: templateSearch }) }}
         </p>
 
         <div v-else class="grid gap-2.5 sm:grid-cols-2 lg:grid-cols-3">
-          <button
+          <TemplateCard
             v-for="tpl in filteredTemplates"
             :key="tpl.slug"
-            type="button"
-            class="flex flex-col overflow-hidden rounded-lg border border-black/[0.06] bg-white text-left transition hover:border-black/20 hover:shadow-sm disabled:opacity-60"
+            :template="tpl"
+            density="compact"
+            :busy="instantiatingSlug === tpl.slug"
             :disabled="!!instantiatingSlug"
-            @click="useTemplate(tpl.slug)"
-          >
-            <div class="relative h-24 shrink-0 border-b border-black/[0.06] bg-slate-50/70 [background-image:radial-gradient(circle,rgba(15,23,42,0.07)_1px,transparent_1px)] [background-size:12px_12px]">
-              <TemplateFlowPreview v-if="tpl.detailLoaded" :blob="tpl.blob" :height="96" class="px-1" />
-              <div v-else class="flex h-full items-center justify-center">
-                <Loader2 :size="14" class="animate-spin text-muted-foreground/40" />
-              </div>
-              <span class="absolute left-1.5 top-1.5 inline-flex items-center rounded-full bg-slate-100 px-1.5 py-px uppercase text-[11px] font-medium text-slate-700">
-                {{ tpl.category.charAt(0).toUpperCase() + tpl.category.slice(1) }}
-              </span>
-              <Loader2 v-if="instantiatingSlug === tpl.slug" :size="13" class="absolute right-1.5 top-1.5 animate-spin text-muted-foreground" />
-            </div>
-            <div class="flex min-h-0 flex-1 flex-col p-3">
-              <div class="truncate text-sm font-medium">{{ tpl.name }}</div>
-              <p class="mt-0.5 line-clamp-2 text-sm text-muted-foreground">{{ tpl.description }}</p>
-            </div>
-          </button>
+            @select="useTemplate(tpl.slug)"
+          />
         </div>
 
         <div class="flex items-center justify-between pt-1">
           <NuxtLink to="/integrations/templates" class="inline-flex items-center gap-1 text-sm text-muted-foreground transition-colors hover:text-primary" @click="open = false">
             <Sparkles :size="13" />
-            Browse the full template catalogue
+            {{ t("integration.workflows.create.template.browseAll") }}
           </NuxtLink>
           <Button type="button" variant="outline" class="h-8 text-sm" @click="open = false">
-            Cancel
+            {{ t("integration.common.action.cancel") }}
           </Button>
         </div>
       </div>

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

@@ -8,13 +8,14 @@ const props = defineProps({
   workflow: { type: [Object, null], required: true }
 });
 const emit = defineEmits(["duplicated"]);
+const t = useIntegrationsT();
 const { duplicate } = useIntegrationsWorkflows();
 const name = ref("");
 const busy = ref(false);
 const error = ref(null);
 watch(open, (o) => {
   if (o) {
-    name.value = props.workflow ? `${props.workflow.name} (Copy)` : "";
+    name.value = props.workflow ? t("integration.workflows.duplicate.field.name.default", { name: props.workflow.name }) : "";
     error.value = null;
   }
 });
@@ -28,7 +29,7 @@ async function submit() {
     open.value = false;
     emit("duplicated", copy);
   } catch (e) {
-    error.value = e?.message || "Could not duplicate the workflow.";
+    error.value = e?.message || t("integration.workflows.duplicate.error.generic");
   } finally {
     busy.value = false;
   }
@@ -39,23 +40,23 @@ async function submit() {
   <Dialog v-model:open="open">
     <DialogContent class="sm:max-w-md">
       <DialogHeader>
-        <DialogTitle>Duplicate workflow</DialogTitle>
+        <DialogTitle>{{ t("integration.workflows.duplicate.dialog.title") }}</DialogTitle>
         <DialogDescription class="text-sm">
-          Creates a paused copy of “{{ props.workflow?.name }}” with all triggers off.
+          {{ t("integration.workflows.duplicate.dialog.description", { name: props.workflow?.name ?? "" }) }}
         </DialogDescription>
       </DialogHeader>
 
       <form class="space-y-2" @submit.prevent="submit">
-        <label class="text-sm font-medium" for="wf-duplicate-name">Name</label>
+        <label class="text-sm font-medium" for="wf-duplicate-name">{{ t("integration.workflows.duplicate.field.name.label") }}</label>
         <Input id="wf-duplicate-name" v-model="name" autofocus :disabled="busy" />
         <p v-if="error" class="text-sm text-rose-600">{{ error }}</p>
       </form>
 
       <DialogFooter>
-        <Button variant="outline" size="sm" class="h-8 text-sm" :disabled="busy" @click="open = false">Cancel</Button>
+        <Button variant="outline" size="sm" class="h-8 text-sm" :disabled="busy" @click="open = false">{{ t("integration.common.action.cancel") }}</Button>
         <Button size="sm" class="h-8 text-sm" :disabled="!canSubmit" @click="submit">
           <Loader2 v-if="busy" :size="14" class="animate-spin" />
-          Duplicate
+          {{ t("integration.workflows.action.duplicate") }}
         </Button>
       </DialogFooter>
     </DialogContent>

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

@@ -4,10 +4,14 @@ import { type EdgeProps } from '@vue-flow/core';
  *
  *  - hard right-angle routing (`getSmoothStepPath`, radius 0)
  *  - arrow-head pointing into the target
- *  - color encodes the *source port kind* — branch outputs (`true`/`false`,
- *    switch cases) get a soft color, error outputs get rose, defaults stay
- *    slate
- *  - optional center label (used by the canvas to print branch names)
+ *  - colour encodes IMPORTANCE, not meaning (PO-197): the main flow leads in
+ *    slate, the error/exception path recedes in a paler slate. The semantic
+ *    colour (green = normal/active output incl. branch & switch cases, rose =
+ *    error) lives on the source PORT DOT — a small, localised legend — so the
+ *    connective edges stay calm.
+ *  - optional center label (used by the canvas to print branch names) — branch
+ *    routes only, never the error route (promised: `specs/editor-output-paths.md`,
+ *    reasoning: `docs/editor-path-colors.md`)
  *  - n8n-style midpoint tools on hover/selection: [+] splices a node into
  *    the connection (editor-provided action), [trash] deletes the edge
  *
@@ -19,6 +23,16 @@ interface Data {
     kind: EdgeKind;
     /** Optional human label shown mid-edge (e.g. "true", "cases:paid"). */
     label?: string;
+    /**
+     * Fan-out lane: this edge's rank among its source node's ACTUAL outgoing
+     * edges (ordered left-to-right by output handle) and how many there are.
+     * Siblings leaving a multi-output node (Switch, out/error) would otherwise
+     * bend on the same horizontal line and overlap — the renderer staggers the
+     * bend height by lane so the horizontal runs sit on distinct levels. A lone
+     * edge has `laneCount` 1 and gets no stagger.
+     */
+    laneIndex?: number;
+    laneCount?: number;
     /**
      * Run-replay overlay (WorkflowRunReplayPanel): the edge is on the path the
      * run actually took — drawn blue and thicker. `ahead` marks the part of the

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

@@ -6,7 +6,8 @@ import {
   getSmoothStepPath,
   useVueFlow
 } from "@vue-flow/core";
-import { Plus, Trash2 } from "lucide-vue-next";
+import { Plus } from "lucide-vue-next";
+import { TrashBinMinimalistic as TrashBin } from "#solar-icons";
 const props = defineProps({
   id: { type: String, required: true },
   sourceNode: { type: Object, required: true },
@@ -39,8 +40,22 @@ const props = defineProps({
   targetX: { type: Number, required: true },
   targetY: { type: Number, required: true }
 });
+const t = useIntegrationsT();
 const flow = useVueFlow();
 const edgeActions = inject("workflow-edge-actions", null);
+const centerY = computed(() => {
+  const n = props.data?.laneCount ?? 1;
+  const i = props.data?.laneIndex ?? 0;
+  if (n <= 1) return void 0;
+  const mid = (props.sourceY + props.targetY) / 2;
+  const STEP = 11;
+  const span = Math.abs(props.targetY - props.sourceY);
+  const dist = Math.abs(i - (n - 1) / 2);
+  const tie = i / Math.max(1, n - 1) * (STEP / 3);
+  const lift = Math.min(dist * STEP + tie, Math.max(0, span / 2 - span / 6));
+  const towardSource = Math.sign(props.sourceY - props.targetY) || -1;
+  return mid + towardSource * lift;
+});
 const path = computed(() => getSmoothStepPath({
   sourceX: props.sourceX,
   sourceY: props.sourceY,
@@ -48,15 +63,18 @@ const path = computed(() => getSmoothStepPath({
   targetX: props.targetX,
   targetY: props.targetY,
   targetPosition: props.targetPosition,
-  borderRadius: 0
+  borderRadius: 0,
+  centerY: centerY.value
 }));
+const NEUTRAL = { stroke: "#94a3b8", label: "#475569", bg: "#f1f5f9" };
+const MUTED = { stroke: "#cbd5e1", label: "#94a3b8", bg: "#f8fafc" };
 const palette = {
-  default: { stroke: "#94a3b8", label: "#475569", bg: "#f1f5f9" },
-  success: { stroke: "#10b981", label: "#047857", bg: "#ecfdf5" },
-  error: { stroke: "#f43f5e", label: "#be123c", bg: "#fff1f2" },
-  "branch-true": { stroke: "#10b981", label: "#047857", bg: "#ecfdf5" },
-  "branch-false": { stroke: "#f59e0b", label: "#b45309", bg: "#fffbeb" },
-  branch: { stroke: "#8b5cf6", label: "#6d28d9", bg: "#f5f3ff" }
+  default: NEUTRAL,
+  success: NEUTRAL,
+  error: MUTED,
+  "branch-true": NEUTRAL,
+  "branch-false": NEUTRAL,
+  branch: NEUTRAL
 };
 const color = computed(() => palette[props.data?.kind ?? "default"] ?? palette.default);
 const isSelected = computed(() => props.selected);
@@ -129,7 +147,7 @@ function spliceNode() {
       <button
         type="button"
         class="flex size-5 items-center justify-center rounded text-muted-foreground transition hover:bg-muted/60 hover:text-foreground"
-        title="Insert a node into this connection"
+        :title="t('integration.canvas.edge.action.insertNode')"
         @click.stop="spliceNode"
       >
         <Plus :size="12" />
@@ -138,10 +156,10 @@ function spliceNode() {
       <button
         type="button"
         class="flex size-5 items-center justify-center rounded text-muted-foreground transition hover:bg-rose-50 hover:text-rose-600"
-        title="Delete this connection"
+        :title="t('integration.canvas.edge.action.delete')"
         @click.stop="removeEdge"
       >
-        <Trash2 :size="12" />
+        <TrashBin :size="12" />
       </button>
     </div>
   </EdgeLabelRenderer>

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

@@ -4,10 +4,14 @@ import { type EdgeProps } from '@vue-flow/core';
  *
  *  - hard right-angle routing (`getSmoothStepPath`, radius 0)
  *  - arrow-head pointing into the target
- *  - color encodes the *source port kind* — branch outputs (`true`/`false`,
- *    switch cases) get a soft color, error outputs get rose, defaults stay
- *    slate
- *  - optional center label (used by the canvas to print branch names)
+ *  - colour encodes IMPORTANCE, not meaning (PO-197): the main flow leads in
+ *    slate, the error/exception path recedes in a paler slate. The semantic
+ *    colour (green = normal/active output incl. branch & switch cases, rose =
+ *    error) lives on the source PORT DOT — a small, localised legend — so the
+ *    connective edges stay calm.
+ *  - optional center label (used by the canvas to print branch names) — branch
+ *    routes only, never the error route (promised: `specs/editor-output-paths.md`,
+ *    reasoning: `docs/editor-path-colors.md`)
  *  - n8n-style midpoint tools on hover/selection: [+] splices a node into
  *    the connection (editor-provided action), [trash] deletes the edge
  *
@@ -19,6 +23,16 @@ interface Data {
     kind: EdgeKind;
     /** Optional human label shown mid-edge (e.g. "true", "cases:paid"). */
     label?: string;
+    /**
+     * Fan-out lane: this edge's rank among its source node's ACTUAL outgoing
+     * edges (ordered left-to-right by output handle) and how many there are.
+     * Siblings leaving a multi-output node (Switch, out/error) would otherwise
+     * bend on the same horizontal line and overlap — the renderer staggers the
+     * bend height by lane so the horizontal runs sit on distinct levels. A lone
+     * edge has `laneCount` 1 and gets no stagger.
+     */
+    laneIndex?: number;
+    laneCount?: number;
     /**
      * Run-replay overlay (WorkflowRunReplayPanel): the edge is on the path the
      * run actually took — drawn blue and thicker. `ahead` marks the part of the

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

@@ -8,8 +8,27 @@ type __VLS_Props = {
     runBusy?: boolean;
     /** The run is queued behind a bundle build — busy, but worth saying why. */
     runWaiting?: boolean;
+    /**
+     * One of the page's own lightboxes is open above the editor (settings,
+     * duplicate, run payload, the sync response, the deactivation prompt). The
+     * canvas stands its keyboard shortcuts down while one is up — see
+     * `canvasHasKeyboard` below. A new page-level dialog belongs in here too.
+     */
+    overlayOpen?: boolean;
 };
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+/**
+ * Show a node the user was sent to from outside the canvas — the validation
+ * banner's per-node line (PO-209). Centres the card and opens its settings,
+ * which is where the fields at fault are.
+ *
+ * A node inside a collapsed group has no card on the canvas: centring would pan
+ * to empty space, so it only opens the settings. The reverse can't happen — an
+ * id that is on the canvas is in the blob by construction.
+ */
+declare function revealNode(id: string): void;
+declare const _default: import("vue").DefineComponent<__VLS_Props, {
+    revealNode: typeof revealNode;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     change: (blob: WorkflowBlob) => any;
     run: () => any;
     toggleActive: () => any;