@revenexx/studio-integrations 0.5.1 → 0.6.0

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

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, ref, watch } from "vue";
+import { computed, ref, useId, watch } from "vue";
 import { Paperclip, TrashBinMinimalistic as Trash2 } from "#solar-icons";
 import { Input, Switch, Textarea } from "@revenexx/studio";
 import { buildPayload, payloadFieldsFromBlob, splitPayload } from "../../data/payloadForm";
@@ -8,6 +8,8 @@ const props = defineProps({
 });
 const model = defineModel({ type: String, ...{ default: "{}" } });
 const fields = computed(() => payloadFieldsFromBlob(props.blob));
+const uid = useId();
+const fieldId = (path) => `${uid}-${path}`;
 const textValues = ref({});
 const files = ref({});
 const extras = ref({});
@@ -96,17 +98,24 @@ function prettyBytes(n) {
       <span class="text-xs font-medium text-muted-foreground">
         {{ expert ? "Trigger payload (JSON)" : "Trigger payload" }}
       </span>
+      <!-- The Switch is a `button role="switch"`, and HTML-AAM does not name a
+           button from a wrapping <label> — Chromium does, other engines need
+           not. The explicit name is what the promise rests on. -->
       <label class="flex items-center gap-1.5 text-xs text-muted-foreground">
-        <Switch :model-value="expert" @update:model-value="toggleExpert" />
+        <Switch aria-label="Expert (JSON)" :model-value="expert" @update:model-value="toggleExpert" />
         Expert (JSON)
       </label>
     </div>
-    <label v-else class="text-xs font-medium text-muted-foreground">Trigger payload (JSON)</label>
+    <span v-else class="text-xs font-medium text-muted-foreground">Trigger payload (JSON)</span>
 
     <!-- ── Form mode: fields derived from the blob's payload references ──── -->
     <div v-if="!expert && fields.length" class="space-y-3">
       <div v-for="field in fields" :key="`${field.kind}:${field.path}`" class="space-y-1">
-        <label class="text-xs font-medium">{{ field.label }}</label>
+        <!-- A file field has no control to point at once a file is attached —
+             the drop zone is replaced by the file's own row — so there the
+             caption stays a caption and the controls name themselves. -->
+        <label v-if="field.kind === 'file'" class="text-xs font-medium">{{ field.label }}</label>
+        <label v-else :for="fieldId(field.path)" class="text-xs font-medium">{{ field.label }}</label>
 
         <template v-if="field.kind === 'file'">
           <div
@@ -121,6 +130,7 @@ function prettyBytes(n) {
             Drop a file here or click to choose
             <input
               type="file"
+              :aria-label="field.label"
               class="absolute inset-0 cursor-pointer opacity-0"
               @change="onPick(field.path, $event)"
             >
@@ -133,6 +143,7 @@ function prettyBytes(n) {
               type="button"
               class="flex size-6 shrink-0 items-center justify-center rounded text-muted-foreground transition hover:bg-muted/60 hover:text-rose-600"
               title="Remove file"
+              :aria-label="`Remove the file for ${field.label}`"
               @click="detach(field.path)"
             >
               <Trash2 :size="13" />
@@ -145,6 +156,7 @@ function prettyBytes(n) {
 
         <template v-else>
           <Input
+            :id="fieldId(field.path)"
             :model-value="textValues[field.path] ?? ''"
             class="h-8 text-sm"
             :placeholder="`\${{ trigger.payload.${field.path} }}`"
@@ -163,6 +175,7 @@ function prettyBytes(n) {
     <template v-else>
       <Textarea
         v-model="model"
+        aria-label="Trigger payload (JSON)"
         :rows="8"
         spellcheck="false"
         class="font-mono text-xs"

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

@@ -181,7 +181,8 @@ function onViewMouseDown(e) {
       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"
+      aria-label="Note text"
+      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 focus:ring-2 focus:ring-inset focus:ring-stone-500/40"
       placeholder="Write a note… (# heading, **bold**, *italic*, `code`, [link](https://…), - list)"
       spellcheck="false"
       @blur="commitEdit"

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

@@ -0,0 +1,18 @@
+import type { WorkflowTemplate } from '../../types/integrations.js';
+type __VLS_Props = {
+    template: WorkflowTemplate;
+    /** How much room the surface has. See the comment above; no default on purpose. */
+    density: 'full' | 'compact';
+    /** Given → the card is a link there. Omitted → a button that emits `select`. */
+    to?: string;
+    /** This card is the one being acted on: it says so and cannot be pressed again. */
+    busy?: boolean;
+    /** Another card on the surface is being acted on, so this one is out of reach. */
+    disabled?: boolean;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,109 @@
+<script setup>
+import { computed, resolveComponent } from "vue";
+import { RefreshCircle as Loader2, ClockCircle as Clock, Global as Webhook, Play, Bolt as Zap } from "#solar-icons";
+import { templateCategoryLabel, templatePackageLabel } from "../../data/integrationTemplates";
+import TemplateFlowPreview from "./TemplateFlowPreview.vue";
+const props = defineProps({
+  template: { type: Object, required: true },
+  density: { type: String, required: true },
+  to: { type: String, required: false },
+  busy: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false }
+});
+const emit = defineEmits(["select"]);
+const NuxtLink = resolveComponent("NuxtLink");
+const full = computed(() => props.density === "full");
+const banner = computed(
+  () => full.value ? props.template.images.find((i) => i.category === "banner")?.src ?? null : null
+);
+const TRIGGER_ICON = { schedule: Clock, webhook: Webhook, manual: Play, event: Zap };
+const TRIGGER_LABEL = { schedule: "Scheduled", webhook: "Webhook", manual: "Run on demand", event: "Event-driven" };
+function levelDot(level) {
+  return level === "beginner" ? "bg-emerald-500" : level === "intermediate" ? "bg-amber-500" : "bg-rose-500";
+}
+const packageLabel = computed(() => templatePackageLabel(props.template));
+const categoryLabel = computed(() => templateCategoryLabel(props.template.category));
+const CHIP = "inline-flex items-center whitespace-nowrap rounded-full uppercase font-medium";
+const chipSize = computed(() => full.value ? "px-2 py-0.5 text-xs" : "px-1.5 py-px text-[11px]");
+</script>
+
+<template>
+  <component
+    :is="to ? NuxtLink : 'button'"
+    v-bind="to ? { to } : { type: 'button', disabled: disabled || busy }"
+    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"
+    @click="to ? void 0 : emit('select')"
+  >
+    <!-- The picture: the flow this template builds, drawn from its own
+         definition, or the publisher's banner where one ships. -->
+    <div
+      class="relative 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)]"
+      :class="full ? 'h-36 [background-size:14px_14px]' : 'h-24 [background-size:12px_12px]'"
+    >
+      <img v-if="banner" :src="banner" alt="" class="h-full w-full object-cover">
+      <!-- `full` keeps its chips on the picture, so the drawing starts below
+           them: the graph is fitted to whichever axis binds, and a flow slightly
+           taller in proportion than this box reaches the top edge — where the
+           chip is. The 28px are the chip's own 20 plus its 8 of inset, so the
+           two can no longer meet (PO-243).
+
+           No horizontal padding, deliberately: all three surfaces used to pass
+           one (`px-2` in the gallery, `px-1` in the compact places) and none of
+           them insetted anything. The preview's `svg` is `absolute inset-0`, so
+           it is laid out against its parent's *padding box* and fills it whatever
+           the padding is — measured identical to the picture, 421.3px wide either
+           way. The graph's own inset is `TemplateFlowPreview`'s `padding` prop,
+           36 logical units, which is where it belongs. -->
+      <TemplateFlowPreview
+        v-else-if="template.detailLoaded"
+        :blob="template.blob"
+        :height="full ? 116 : 96"
+        :class="full ? 'mt-7' : ''"
+      />
+      <!-- Named, because "still on its way" and "this template draws nothing"
+           are the same sight otherwise — and a spinner nobody can address is a
+           promise no test can hold to. -->
+      <div
+        v-else
+        role="status"
+        aria-label="Loading the flow"
+        class="flex h-full items-center justify-center"
+      >
+        <Loader2 :size="full ? 16 : 14" class="animate-spin text-muted-foreground/50" />
+      </div>
+
+      <div v-if="full" class="absolute left-2 top-2 flex items-center gap-1.5">
+        <span v-if="categoryLabel" :class="[CHIP, chipSize, 'bg-slate-100 text-slate-700']">{{ categoryLabel }}</span>
+        <span v-if="packageLabel" :class="[CHIP, chipSize, 'bg-violet-100 text-violet-700']">{{ packageLabel }}</span>
+      </div>
+
+      <Loader2 v-if="busy" :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" :class="full ? 'p-4' : 'p-3'">
+      <div class="flex items-center gap-2">
+        <div class="min-w-0 flex-1 truncate text-sm font-semibold text-foreground">{{ template.name }}</div>
+        <!-- Compact has no room on the picture, so the category rides the name. -->
+        <span v-if="!full && categoryLabel" :class="[CHIP, chipSize, 'bg-slate-100 text-slate-700']">{{ categoryLabel }}</span>
+      </div>
+      <p class="mt-1 flex-1 text-sm text-muted-foreground line-clamp-2">{{ template.description }}</p>
+
+      <div v-if="full" class="mt-3 flex items-center gap-2 text-xs text-muted-foreground">
+        <span
+          v-for="t in template.triggerTypes"
+          :key="t"
+          class="inline-flex items-center gap-1 whitespace-nowrap rounded-full bg-slate-100 px-2 py-0.5 uppercase"
+        >
+          <component :is="TRIGGER_ICON[t] ?? Zap" :size="10" />
+          {{ TRIGGER_LABEL[t] ?? t }}
+        </span>
+        <span class="flex-1" />
+        <span class="inline-flex items-center gap-1 whitespace-nowrap rounded-full bg-slate-100 px-2 py-0.5 uppercase">
+          <span class="size-1.5 rounded-full" :class="levelDot(template.level)" />
+          {{ template.level }}
+        </span>
+        <span v-if="template.publisher.kind !== 'revenexx'" class="inline-flex items-center rounded-full bg-slate-100 px-2 py-0.5 uppercase">{{ template.publisher.name }}</span>
+      </div>
+    </div>
+  </component>
+</template>

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

@@ -0,0 +1,18 @@
+import type { WorkflowTemplate } from '../../types/integrations.js';
+type __VLS_Props = {
+    template: WorkflowTemplate;
+    /** How much room the surface has. See the comment above; no default on purpose. */
+    density: 'full' | 'compact';
+    /** Given → the card is a link there. Omitted → a button that emits `select`. */
+    to?: string;
+    /** This card is the one being acted on: it says so and cannot be pressed again. */
+    busy?: boolean;
+    /** Another card on the surface is being acted on, so this one is out of reach. */
+    disabled?: boolean;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -11,9 +11,9 @@ type __VLS_Props = {
      */
     showErrorBranches?: boolean;
 };
-declare var __VLS_12: {};
+declare var __VLS_8: {};
 type __VLS_Slots = {} & {
-    empty?: (props: typeof __VLS_12) => any;
+    empty?: (props: typeof __VLS_8) => 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;

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

@@ -3,7 +3,8 @@ 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";
+import { describeCron } from "../../utils/schedule";
+import IntegrationsNodeMark from "./NodeMark.vue";
 const props = defineProps({
   blob: { type: [Object, null], required: true },
   height: { type: Number, required: false, default: 144 },
@@ -23,7 +24,7 @@ const boxes = computed(() => {
   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 ?? "");
+    const subtitle = t.type === "schedule" && t.config?.cron ? describeCron(String(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",
@@ -59,9 +60,6 @@ const boxes = computed(() => {
   });
   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(" ");
@@ -100,8 +98,8 @@ const edgePaths = computed(() => {
 });
 const EDGE_STROKE = {
   default: "#94a3b8",
-  trigger: "#10b981",
-  error: "#f43f5e"
+  trigger: "#94a3b8",
+  error: "#cbd5e1"
 };
 const bounds = computed(() => {
   if (!boxes.value.length) return { x: 0, y: 0, w: 1, h: 1 };
@@ -182,10 +180,9 @@ const bounds = computed(() => {
         >
           <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"
+            :class="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" />
+            <IntegrationsNodeMark :manifest="b.manifest" :size="18" />
           </span>
           <div class="min-w-0 flex-1">
             <div class="truncate text-sm font-semibold leading-tight text-foreground">{{ b.label }}</div>

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

@@ -11,9 +11,9 @@ type __VLS_Props = {
      */
     showErrorBranches?: boolean;
 };
-declare var __VLS_12: {};
+declare var __VLS_8: {};
 type __VLS_Slots = {} & {
-    empty?: (props: typeof __VLS_12) => any;
+    empty?: (props: typeof __VLS_8) => 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;

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

@@ -20,9 +20,10 @@ 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 router = useRouter();
 const { create, workflows } = useIntegrationsWorkflows();
@@ -32,10 +33,6 @@ 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] ?? "";
-}
 function iconFor(name2) {
   if (!name2) return Lucide.Box;
   return Lucide[name2] || Lucide.Box;
@@ -165,26 +162,26 @@ async function useTemplate(slug) {
         </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">Tags</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">Icon</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">Trigger</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 +192,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 +202,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">Execution mode</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">
@@ -256,6 +253,7 @@ async function useTemplate(slug) {
           <input
             v-model="templateSearch"
             type="text"
+            aria-label="Search templates"
             placeholder="Search templates…"
             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"
           >
@@ -282,29 +280,15 @@ async function useTemplate(slug) {
         </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">

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

@@ -41,6 +41,19 @@ const props = defineProps({
 });
 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 +61,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);

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;