@revenexx/studio-integrations 1.4.1 → 2.1.0

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

@@ -51,17 +51,15 @@ import { toast } from "vue-sonner";
 import WorkflowEdgeView from "./WorkflowEdgeView.vue";
 import { layoutWorkflowNodes } from "./workflowLayout";
 import { defaultsFor } from "../../utils/configDefaults";
-import { nodeDisplayLabel } from "../../utils/validationFindings";
-import { TRIGGER_TEMPLATES, findManifest, newestExecutableVersion } from "../../data/integrationNodeCatalog";
+import { TRIGGER_TEMPLATES, findManifest } from "../../data/integrationNodeCatalog";
 import { isTerminalManifest, portsForNode } from "../../data/nodeInputData";
 import { computeLoopBodies, iteratorNodeIds, nodeLoopData } from "../../data/loopBody";
 import { inputHandleId, outputHandleId, portFromHandleId } from "../../data/handleId";
 import { OPPOSITE_SIDE } from "./canvasSides";
 import { deepClone } from "../../utils/deepClone";
 import { copyToClipboard } from "../../utils/clipboard";
-import { groupFindingsByNode } from "../../utils/validationFindings";
+import { groupFindingsByNode, findingsByNodeField } from "../../utils/validationFindings";
 import { reorderBranchSubtrees } from "../../data/branchReorder";
-import { findingsByNodeField } from "../../utils/validationFindings";
 import { resolveDisplayName, resolveLocalized } from "../../utils/localize";
 const props = defineProps({
   workflow: { type: Object, required: true },
@@ -865,17 +863,7 @@ function revealNode(id) {
     selectedId.value = id;
   }
 }
-function showNodeOnCanvas(id) {
-  const folded = collapsedGroupOf().get(id);
-  if (folded) patchGroup(folded.id, { collapsed: false });
-  if (blob.value.nodes.some((n) => n.id === id)) {
-    markBorn(id);
-    syncFromBlob();
-  }
-  if (paneReady.value) centerOnNode(id);
-  else pendingReveal.value = id;
-}
-defineExpose({ revealNode, showNodeOnCanvas, attachErrorStop });
+defineExpose({ revealNode });
 const selectedUpstreamOutputs = computed(() => {
   const id = selectedId.value;
   if (!id) return [];
@@ -1108,45 +1096,6 @@ function spliceIntoEdge(edgeId, payload) {
   syncFromBlob();
   push();
 }
-const STOP_AND_ERROR_SLUG = "revenexx:stop-and-error";
-function attachErrorStop(sourceNodeId, port) {
-  const source = blob.value.nodes.find((n) => n.id === sourceNodeId);
-  const version = newestExecutableVersion(STOP_AND_ERROR_SLUG);
-  const manifest = version ? findManifest(STOP_AND_ERROR_SLUG, version) : null;
-  if (!source || !manifest) return;
-  const at = nodePosition(sourceNodeId);
-  const id = `n-${Date.now()}`;
-  blob.value.nodes.push({
-    id,
-    nodeSlug: manifest.slug,
-    nodeVersion: manifest.version,
-    config: {
-      ...defaultsFor(manifest.config ?? []),
-      // The template convention verbatim: name the step that failed, then quote
-      // its own message, so the run record says what went wrong rather than only
-      // that something did. `errorCode` keeps the node's own default.
-      message: t("integration.editor.errorPath.message", {
-        label: nodeDisplayLabel(source),
-        nodeId: source.id,
-        port
-      })
-    },
-    // Below the source and on the grid, the way the templates place theirs.
-    // `freeSpotNear` keeps two of them off each other.
-    position: freeSpotNear({ x: at.x, y: at.y + 180 })
-  });
-  blob.value.edges.push({
-    id: `e-${Date.now().toString(36)}${Math.random().toString(36).slice(2, 6)}`,
-    from: { nodeId: sourceNodeId, output: port },
-    to: { nodeId: id, input: void 0 }
-  });
-  markBorn(id);
-  syncFromBlob();
-  if (paneReady.value) centerOnNode(id);
-  else pendingReveal.value = id;
-  push();
-  toast.info(t("integration.editor.errorPath.toast.added", { label: nodeDisplayLabel(source) }));
-}
 function nodeDims(id) {
   const d = flow.findNode(id)?.dimensions;
   return d && d.width > 0 ? d : { width: 220, height: 64 };
@@ -1606,41 +1555,41 @@ const edgeTypes = {
           :style="palette.mode.value === 'floating' ? palette.floatingStyle.value : void 0"
         >
           <div class="flex min-h-0 flex-1 flex-col overflow-hidden border border-white bg-white rounded-lg bg-gradient-to-br from-white via-violet-50/40 to-white relative overflow-hidden">
-          <div
-            class="flex shrink-0 touch-none select-none items-center gap-1 border-b border-black/[0.06] bg-white px-2 py-1.5"
-            :class="palette.dragging.value ? 'cursor-grabbing' : 'cursor-grab'"
-            @pointerdown="palette.startDrag($event, paletteShellRef)"
-          >
-            <GripVertical :size="14" class="shrink-0 text-muted-foreground/60" />
-            <span class="min-w-0 flex-1 truncate text-sm font-medium">{{ t("integration.editor.palette.title") }}</span>
-            <DropdownMenu>
-              <DropdownMenuTrigger as-child>
-                <button
-                  type="button"
-                  class="flex size-6 shrink-0 items-center justify-center rounded-md text-muted-foreground transition hover:bg-muted/50 hover:text-foreground"
-                  :title="t('integration.editor.palette.action.placement.title')"
-                >
-                  <EllipsisVertical :size="14" />
-                </button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent align="end" class="w-36 rounded-lg border border-black/[0.06] bg-white p-1 shadow-lg">
-                <DropdownMenuItem class="rounded-md text-sm" @select="palette.dock('left')">{{ t("integration.editor.palette.action.dockLeft") }}</DropdownMenuItem>
-                <DropdownMenuItem class="rounded-md text-sm" @select="palette.dock('right')">{{ t("integration.editor.palette.action.dockRight") }}</DropdownMenuItem>
-                <DropdownMenuItem class="rounded-md text-sm" @select="palette.floatHere(paletteShellRef)">{{ t("integration.editor.panel.action.floatHere") }}</DropdownMenuItem>
-                <DropdownMenuSeparator class="my-1 h-px bg-black/[0.06]" />
-                <DropdownMenuItem class="rounded-md text-sm" @select="palette.setCollapsed(true)">{{ t("integration.editor.panel.action.collapse") }}</DropdownMenuItem>
-              </DropdownMenuContent>
-            </DropdownMenu>
-            <button
-              type="button"
-              class="flex size-6 shrink-0 items-center justify-center rounded-md text-muted-foreground transition hover:bg-muted/50 hover:text-foreground"
-              :title="t('integration.editor.palette.action.collapse.title')"
-              @click="palette.setCollapsed(true)"
+            <div
+              class="flex shrink-0 touch-none select-none items-center gap-1 border-b border-black/[0.06] bg-white px-2 py-1.5"
+              :class="palette.dragging.value ? 'cursor-grabbing' : 'cursor-grab'"
+              @pointerdown="palette.startDrag($event, paletteShellRef)"
             >
-              <Minus :size="14" />
-            </button>
-          </div>
-          <NodePalette ref="paletteRef" class="min-h-0 flex-1" @insert="onPaletteInsert" />
+              <GripVertical :size="14" class="shrink-0 text-muted-foreground/60" />
+              <span class="min-w-0 flex-1 truncate text-sm font-medium">{{ t("integration.editor.palette.title") }}</span>
+              <DropdownMenu>
+                <DropdownMenuTrigger as-child>
+                  <button
+                    type="button"
+                    class="flex size-6 shrink-0 items-center justify-center rounded-md text-muted-foreground transition hover:bg-muted/50 hover:text-foreground"
+                    :title="t('integration.editor.palette.action.placement.title')"
+                  >
+                    <EllipsisVertical :size="14" />
+                  </button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end" class="w-36 rounded-lg border border-black/[0.06] bg-white p-1 shadow-lg">
+                  <DropdownMenuItem class="rounded-md text-sm" @select="palette.dock('left')">{{ t("integration.editor.palette.action.dockLeft") }}</DropdownMenuItem>
+                  <DropdownMenuItem class="rounded-md text-sm" @select="palette.dock('right')">{{ t("integration.editor.palette.action.dockRight") }}</DropdownMenuItem>
+                  <DropdownMenuItem class="rounded-md text-sm" @select="palette.floatHere(paletteShellRef)">{{ t("integration.editor.panel.action.floatHere") }}</DropdownMenuItem>
+                  <DropdownMenuSeparator class="my-1 h-px bg-black/[0.06]" />
+                  <DropdownMenuItem class="rounded-md text-sm" @select="palette.setCollapsed(true)">{{ t("integration.editor.panel.action.collapse") }}</DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+              <button
+                type="button"
+                class="flex size-6 shrink-0 items-center justify-center rounded-md text-muted-foreground transition hover:bg-muted/50 hover:text-foreground"
+                :title="t('integration.editor.palette.action.collapse.title')"
+                @click="palette.setCollapsed(true)"
+              >
+                <Minus :size="14" />
+              </button>
+            </div>
+            <NodePalette ref="paletteRef" class="min-h-0 flex-1" @insert="onPaletteInsert" />
           </div>
         </div>
       </Transition>
@@ -1744,213 +1693,213 @@ const edgeTypes = {
       <!-- Floating control pane — bottom center. -->
       <div ref="controlBar" class="absolute bottom-3 left-1/2 z-10 -translate-x-1/2">
         <TooltipProvider :delay-duration="250">
-        <div class="rounded-lg border border-gray-400/10 outline-1 outline-white/30 backdrop-blur-sm">
-          <div class="flex items-center gap-0.5 whitespace-nowrap border border-white bg-white rounded-lg bg-gradient-to-br from-white via-violet-50/40 to-white px-2 py-1">
-          <!-- Smart Run: the page decides what "run" means — a workflow that
+          <div class="rounded-lg border border-gray-400/10 outline-1 outline-white/30 backdrop-blur-sm">
+            <div class="flex items-center gap-0.5 whitespace-nowrap border border-white bg-white rounded-lg bg-gradient-to-br from-white via-violet-50/40 to-white px-2 py-1">
+              <!-- Smart Run: the page decides what "run" means — a workflow that
                consumes trigger.payload, or leaves the mode to the caller, opens
                the run dialog; one that asks neither fires immediately. One
                button either way. -->
-          <IntegrationsEditorTip :label="runWaiting ? t('integration.editor.tool.run.tooltipWaiting') : t('integration.editor.tool.run.tooltip')" :shortcut="primaryShortcut('run')">
-            <button
-              type="button"
-              class="relative flex h-8 items-center gap-1.5 rounded-lg bg-gradient-to-b from-emerald-500 to-emerald-600 px-3.5 text-sm font-medium text-white transition after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:shadow-[inset_0_1px_0_rgba(255,255,255,0.3),inset_0_-2px_0_rgba(0,0,0,0.25)] hover:from-emerald-600 hover:to-emerald-600 active:translate-y-px disabled:opacity-60"
-              :disabled="runBusy"
-              @click="emit('run')"
-            >
-              <Loader2 v-if="runBusy" :size="14" class="animate-spin" />
-              <Play v-else :size="14" />
-              {{ runWaiting ? t("integration.editor.run.waitingForBuild") : t("integration.editor.run.button") }}
-            </button>
-          </IntegrationsEditorTip>
+              <IntegrationsEditorTip :label="runWaiting ? t('integration.editor.tool.run.tooltipWaiting') : t('integration.editor.tool.run.tooltip')" :shortcut="primaryShortcut('run')">
+                <button
+                  type="button"
+                  class="relative flex h-8 items-center gap-1.5 rounded-lg bg-gradient-to-b from-emerald-500 to-emerald-600 px-3.5 text-sm font-medium text-white transition after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:shadow-[inset_0_1px_0_rgba(255,255,255,0.3),inset_0_-2px_0_rgba(0,0,0,0.25)] hover:from-emerald-600 hover:to-emerald-600 active:translate-y-px disabled:opacity-60"
+                  :disabled="runBusy"
+                  @click="emit('run')"
+                >
+                  <Loader2 v-if="runBusy" :size="14" class="animate-spin" />
+                  <Play v-else :size="14" />
+                  {{ runWaiting ? t("integration.editor.run.waitingForBuild") : t("integration.editor.run.button") }}
+                </button>
+              </IntegrationsEditorTip>
 
-          <div class="mx-1 h-5 w-px bg-black/10" />
+              <div class="mx-1 h-5 w-px bg-black/10" />
 
-          <div class="flex items-center gap-0.5 rounded-lg bg-black/[0.05] p-0.5 shadow-[inset_0_1px_2px_rgba(15,23,42,0.12)]">
-          <!-- Icon-only, and the tooltip is not an accessible name: each one
+              <div class="flex items-center gap-0.5 rounded-lg bg-black/[0.05] p-0.5 shadow-[inset_0_1px_2px_rgba(15,23,42,0.12)]">
+                <!-- Icon-only, and the tooltip is not an accessible name: each one
                says what it does itself, and whether it is the active mode. -->
-          <IntegrationsEditorTip :label="t('integration.editor.tool.select')" :shortcut="primaryShortcut('pointerSelect')">
-              <button
-                type="button"
-                :aria-label="t('integration.editor.tool.select')"
-                :aria-pressed="pointerMode === 'select'"
-                class="flex size-7 items-center justify-center rounded-lg transition"
-                :class="pointerMode === 'select' ? 'bg-gradient-to-b from-white to-gray-50 text-foreground shadow-[0_1px_2px_rgba(15,23,42,0.18),inset_0_1px_0_rgba(255,255,255,0.9)]' : 'text-muted-foreground hover:text-foreground'"
-                @click="setPointerMode('select')"
-              >
-                <MousePointer2 :size="14" />
-              </button>
-          </IntegrationsEditorTip>
-          <IntegrationsEditorTip :label="t('integration.editor.tool.hand')" :shortcut="primaryShortcut('pointerHand')">
-              <button
-                type="button"
-                :aria-label="t('integration.editor.tool.hand')"
-                :aria-pressed="pointerMode === 'hand'"
-                class="flex size-7 items-center justify-center rounded-lg transition"
-                :class="pointerMode === 'hand' ? 'bg-gradient-to-b from-white to-gray-50 text-foreground shadow-[0_1px_2px_rgba(15,23,42,0.18),inset_0_1px_0_rgba(255,255,255,0.9)]' : 'text-muted-foreground hover:text-foreground'"
-                @click="setPointerMode('hand')"
-              >
-                <Hand :size="14" />
-              </button>
-          </IntegrationsEditorTip>
-          </div>
+                <IntegrationsEditorTip :label="t('integration.editor.tool.select')" :shortcut="primaryShortcut('pointerSelect')">
+                  <button
+                    type="button"
+                    :aria-label="t('integration.editor.tool.select')"
+                    :aria-pressed="pointerMode === 'select'"
+                    class="flex size-7 items-center justify-center rounded-lg transition"
+                    :class="pointerMode === 'select' ? 'bg-gradient-to-b from-white to-gray-50 text-foreground shadow-[0_1px_2px_rgba(15,23,42,0.18),inset_0_1px_0_rgba(255,255,255,0.9)]' : 'text-muted-foreground hover:text-foreground'"
+                    @click="setPointerMode('select')"
+                  >
+                    <MousePointer2 :size="14" />
+                  </button>
+                </IntegrationsEditorTip>
+                <IntegrationsEditorTip :label="t('integration.editor.tool.hand')" :shortcut="primaryShortcut('pointerHand')">
+                  <button
+                    type="button"
+                    :aria-label="t('integration.editor.tool.hand')"
+                    :aria-pressed="pointerMode === 'hand'"
+                    class="flex size-7 items-center justify-center rounded-lg transition"
+                    :class="pointerMode === 'hand' ? 'bg-gradient-to-b from-white to-gray-50 text-foreground shadow-[0_1px_2px_rgba(15,23,42,0.18),inset_0_1px_0_rgba(255,255,255,0.9)]' : 'text-muted-foreground hover:text-foreground'"
+                    @click="setPointerMode('hand')"
+                  >
+                    <Hand :size="14" />
+                  </button>
+                </IntegrationsEditorTip>
+              </div>
 
-          <IntegrationsEditorTip :label="t('integration.editor.tool.tidyUp')" :shortcut="primaryShortcut('tidyUp')">
-            <button
-              type="button"
-              class="flex h-8 items-center gap-1.5 rounded-lg px-2.5 text-sm font-medium text-foreground transition hover:bg-black/[0.04]"
-              @click="tidyUp"
-            >
-              <LayoutGrid :size="13" />
-              {{ t("integration.editor.tool.tidyUp") }}
-            </button>
-          </IntegrationsEditorTip>
-          <IntegrationsEditorTip :label="t('integration.editor.tool.fitView.tooltip')" :shortcut="primaryShortcut('fitView')">
-            <button
-              type="button"
-              class="flex h-8 items-center gap-1.5 rounded-lg px-2.5 text-sm font-medium text-foreground transition hover:bg-black/[0.04]"
-              @click="flow.fitView({ padding: 0.2, duration: 400, maxZoom: 1 })"
-            >
-              <Sparkles :size="13" />
-              {{ t("integration.editor.tool.fitView.label") }}
-            </button>
-          </IntegrationsEditorTip>
-          <IntegrationsEditorTip :label="t('integration.editor.tool.addSticky.tooltip')" :shortcut="primaryShortcut('addSticky')">
-            <button
-              type="button"
-              class="flex h-8 items-center gap-1.5 rounded-lg px-2.5 text-sm font-medium text-foreground transition hover:bg-black/[0.04]"
-              @click="addSticky()"
-            >
-              <StickyNote :size="13" />
-              {{ t("integration.editor.tool.addSticky.label") }}
-            </button>
-          </IntegrationsEditorTip>
-          <IntegrationsEditorTip :label="t('integration.editor.tool.addGroup.tooltip')">
-            <button
-              type="button"
-              class="flex h-8 items-center gap-1.5 rounded-lg px-2.5 text-sm font-medium text-foreground transition hover:bg-black/[0.04]"
-              @click="addGroupFrame"
-            >
-              <GroupIcon :size="13" />
-              {{ t("integration.editor.tool.addGroup.label") }}
-            </button>
-          </IntegrationsEditorTip>
-          <IntegrationsEditorTip :label="t('integration.editor.tool.variables.tooltip')" :shortcut="primaryShortcut('variables')">
-            <button
-              type="button"
-              class="flex h-8 items-center gap-1.5 rounded-lg px-2.5 text-sm font-medium text-foreground transition hover:bg-black/[0.04]"
-              @click="variablesOpen = true"
-            >
-              <Braces :size="13" />
-              {{ t("integration.editor.tool.variables.label") }}
-              <span v-if="variableCount" class="rounded-lg bg-muted px-1.5 text-xs tabular-nums text-muted-foreground">{{ variableCount }}</span>
-            </button>
-          </IntegrationsEditorTip>
-          <IntegrationsEditorTip :label="t('integration.editor.tool.state.tooltip')" :shortcut="primaryShortcut('state')">
-            <button
-              type="button"
-              class="flex h-8 items-center gap-1.5 rounded-lg px-2.5 text-sm font-medium text-foreground transition hover:bg-black/[0.04]"
-              @click="stateOpen = true"
-            >
-              <Database :size="13" />
-              {{ t("integration.editor.tool.state.label") }}
-              <span v-if="stateCount" class="rounded-lg bg-muted px-1.5 text-xs tabular-nums text-muted-foreground">{{ stateCount }}</span>
-            </button>
-          </IntegrationsEditorTip>
-          <IntegrationsEditorTip :label="t('integration.editor.tool.settings.tooltip')" :shortcut="primaryShortcut('settings')">
-            <button
-              type="button"
-              class="flex h-8 items-center gap-1.5 rounded-lg px-2.5 text-sm font-medium text-foreground transition hover:bg-black/[0.04]"
-              @click="emit('openSettings')"
-            >
-              <Settings2 :size="13" />
-              {{ t("integration.editor.tool.settings.label") }}
-            </button>
-          </IntegrationsEditorTip>
-          <!-- The overview, and the one control that has to be reachable without
+              <IntegrationsEditorTip :label="t('integration.editor.tool.tidyUp')" :shortcut="primaryShortcut('tidyUp')">
+                <button
+                  type="button"
+                  class="flex h-8 items-center gap-1.5 rounded-lg px-2.5 text-sm font-medium text-foreground transition hover:bg-black/[0.04]"
+                  @click="tidyUp"
+                >
+                  <LayoutGrid :size="13" />
+                  {{ t("integration.editor.tool.tidyUp") }}
+                </button>
+              </IntegrationsEditorTip>
+              <IntegrationsEditorTip :label="t('integration.editor.tool.fitView.tooltip')" :shortcut="primaryShortcut('fitView')">
+                <button
+                  type="button"
+                  class="flex h-8 items-center gap-1.5 rounded-lg px-2.5 text-sm font-medium text-foreground transition hover:bg-black/[0.04]"
+                  @click="flow.fitView({ padding: 0.2, duration: 400, maxZoom: 1 })"
+                >
+                  <Sparkles :size="13" />
+                  {{ t("integration.editor.tool.fitView.label") }}
+                </button>
+              </IntegrationsEditorTip>
+              <IntegrationsEditorTip :label="t('integration.editor.tool.addSticky.tooltip')" :shortcut="primaryShortcut('addSticky')">
+                <button
+                  type="button"
+                  class="flex h-8 items-center gap-1.5 rounded-lg px-2.5 text-sm font-medium text-foreground transition hover:bg-black/[0.04]"
+                  @click="addSticky()"
+                >
+                  <StickyNote :size="13" />
+                  {{ t("integration.editor.tool.addSticky.label") }}
+                </button>
+              </IntegrationsEditorTip>
+              <IntegrationsEditorTip :label="t('integration.editor.tool.addGroup.tooltip')">
+                <button
+                  type="button"
+                  class="flex h-8 items-center gap-1.5 rounded-lg px-2.5 text-sm font-medium text-foreground transition hover:bg-black/[0.04]"
+                  @click="addGroupFrame"
+                >
+                  <GroupIcon :size="13" />
+                  {{ t("integration.editor.tool.addGroup.label") }}
+                </button>
+              </IntegrationsEditorTip>
+              <IntegrationsEditorTip :label="t('integration.editor.tool.variables.tooltip')" :shortcut="primaryShortcut('variables')">
+                <button
+                  type="button"
+                  class="flex h-8 items-center gap-1.5 rounded-lg px-2.5 text-sm font-medium text-foreground transition hover:bg-black/[0.04]"
+                  @click="variablesOpen = true"
+                >
+                  <Braces :size="13" />
+                  {{ t("integration.editor.tool.variables.label") }}
+                  <span v-if="variableCount" class="rounded-lg bg-muted px-1.5 text-xs tabular-nums text-muted-foreground">{{ variableCount }}</span>
+                </button>
+              </IntegrationsEditorTip>
+              <IntegrationsEditorTip :label="t('integration.editor.tool.state.tooltip')" :shortcut="primaryShortcut('state')">
+                <button
+                  type="button"
+                  class="flex h-8 items-center gap-1.5 rounded-lg px-2.5 text-sm font-medium text-foreground transition hover:bg-black/[0.04]"
+                  @click="stateOpen = true"
+                >
+                  <Database :size="13" />
+                  {{ t("integration.editor.tool.state.label") }}
+                  <span v-if="stateCount" class="rounded-lg bg-muted px-1.5 text-xs tabular-nums text-muted-foreground">{{ stateCount }}</span>
+                </button>
+              </IntegrationsEditorTip>
+              <IntegrationsEditorTip :label="t('integration.editor.tool.settings.tooltip')" :shortcut="primaryShortcut('settings')">
+                <button
+                  type="button"
+                  class="flex h-8 items-center gap-1.5 rounded-lg px-2.5 text-sm font-medium text-foreground transition hover:bg-black/[0.04]"
+                  @click="emit('openSettings')"
+                >
+                  <Settings2 :size="13" />
+                  {{ t("integration.editor.tool.settings.label") }}
+                </button>
+              </IntegrationsEditorTip>
+              <!-- The overview, and the one control that has to be reachable without
                already knowing a key: it is where the other keys are learnt. Its
                tooltip carries `?` for the same reason — the pane teaches the key
                that teaches the rest. Icon-only, so it carries a name of its own
                (`specs/accessibility.md` AC-2). -->
-          <IntegrationsEditorTip :label="t('integration.canvas.shortcuts.dialog.title')" :shortcut="primaryShortcut('overview')">
-            <button
-              type="button"
-              :aria-label="t('integration.canvas.shortcuts.dialog.title')"
-              class="flex size-8 items-center justify-center rounded-lg text-foreground transition hover:bg-black/[0.04]"
-              @click="shortcutsOpen = true"
-            >
-              <Keyboard :size="14" />
-            </button>
-          </IntegrationsEditorTip>
+              <IntegrationsEditorTip :label="t('integration.canvas.shortcuts.dialog.title')" :shortcut="primaryShortcut('overview')">
+                <button
+                  type="button"
+                  :aria-label="t('integration.canvas.shortcuts.dialog.title')"
+                  class="flex size-8 items-center justify-center rounded-lg text-foreground transition hover:bg-black/[0.04]"
+                  @click="shortcutsOpen = true"
+                >
+                  <Keyboard :size="14" />
+                </button>
+              </IntegrationsEditorTip>
 
-          <div class="mx-1 h-5 w-px bg-black/10" />
+              <div class="mx-1 h-5 w-px bg-black/10" />
 
-          <IntegrationsEditorTip :label="t('integration.editor.tool.zoomOut')" :shortcut="primaryShortcut('zoomOut')">
-            <button
-              type="button"
-              :aria-label="t('integration.editor.tool.zoomOut')"
-              class="flex size-8 items-center justify-center rounded-lg text-foreground transition hover:bg-black/[0.04]"
-              @click="flow.zoomOut({ duration: 150 })"
-            >
-              <ZoomOut :size="14" />
-            </button>
-          </IntegrationsEditorTip>
-          <!-- Tooltip sits on a wrapper span so its as-child merge never
+              <IntegrationsEditorTip :label="t('integration.editor.tool.zoomOut')" :shortcut="primaryShortcut('zoomOut')">
+                <button
+                  type="button"
+                  :aria-label="t('integration.editor.tool.zoomOut')"
+                  class="flex size-8 items-center justify-center rounded-lg text-foreground transition hover:bg-black/[0.04]"
+                  @click="flow.zoomOut({ duration: 150 })"
+                >
+                  <ZoomOut :size="14" />
+                </button>
+              </IntegrationsEditorTip>
+              <!-- Tooltip sits on a wrapper span so its as-child merge never
                touches the dropdown trigger (merging both onto one button
                swallowed the trigger's pointerdown and the menu never opened). -->
-          <IntegrationsEditorTip :label="t('integration.editor.tool.zoomLevel.tooltip')" :shortcut="primaryShortcut('zoomReset')">
-            <span class="inline-flex">
-              <DropdownMenu v-model:open="zoomMenuOpen">
-                <DropdownMenuTrigger as-child>
-                  <!-- The label carries the percentage because it replaces the
+              <IntegrationsEditorTip :label="t('integration.editor.tool.zoomLevel.tooltip')" :shortcut="primaryShortcut('zoomReset')">
+                <span class="inline-flex">
+                  <DropdownMenu v-model:open="zoomMenuOpen">
+                    <DropdownMenuTrigger as-child>
+                      <!-- The label carries the percentage because it replaces the
                        button's text as its accessible name: a bare "Zoom level"
                        would leave screen reader users with the one thing sighted
                        users do not need told and without the value they do. -->
-                  <button
-                    type="button"
-                    :aria-label="t('integration.editor.tool.zoomLevel.aria', { pct: zoomPct })"
-                    class="w-12 rounded-lg py-1 text-center text-sm tabular-nums text-muted-foreground transition hover:bg-black/[0.04] hover:text-foreground"
-                  >
-                    {{ zoomPct }}
-                  </button>
-                </DropdownMenuTrigger>
-            <DropdownMenuContent side="top" align="center" class="w-[4.75rem] min-w-0 rounded-lg border border-black/[0.06] bg-white p-1 shadow-lg">
-              <div class="px-0.5 pb-0.5">
-                <input
-                  v-model="zoomInputText"
-                  type="text"
-                  inputmode="numeric"
-                  :aria-label="t('integration.editor.tool.zoomLevel.inputAria')"
-                  class="h-6 w-full rounded-md border border-black/[0.08] bg-white px-1 text-center text-sm tabular-nums focus:outline-none focus:ring-2 focus:ring-primary/40"
-                  placeholder="%"
-                  @keydown.stop
-                  @keydown.enter.prevent="applyZoomInput"
+                      <button
+                        type="button"
+                        :aria-label="t('integration.editor.tool.zoomLevel.aria', { pct: zoomPct })"
+                        class="w-12 rounded-lg py-1 text-center text-sm tabular-nums text-muted-foreground transition hover:bg-black/[0.04] hover:text-foreground"
+                      >
+                        {{ zoomPct }}
+                      </button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent side="top" align="center" class="w-[4.75rem] min-w-0 rounded-lg border border-black/[0.06] bg-white p-1 shadow-lg">
+                      <div class="px-0.5 pb-0.5">
+                        <input
+                          v-model="zoomInputText"
+                          type="text"
+                          inputmode="numeric"
+                          :aria-label="t('integration.editor.tool.zoomLevel.inputAria')"
+                          class="h-6 w-full rounded-md border border-black/[0.08] bg-white px-1 text-center text-sm tabular-nums focus:outline-none focus:ring-2 focus:ring-primary/40"
+                          placeholder="%"
+                          @keydown.stop
+                          @keydown.enter.prevent="applyZoomInput"
+                        >
+                      </div>
+                      <DropdownMenuSeparator class="my-1 h-px bg-black/[0.06]" />
+                      <DropdownMenuItem
+                        v-for="p in ZOOM_PRESETS"
+                        :key="p"
+                        class="justify-center rounded-md px-1 py-0.5 text-sm tabular-nums"
+                        @select="setZoomPct(p)"
+                      >
+                        {{ p }}%
+                      </DropdownMenuItem>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                </span>
+              </IntegrationsEditorTip>
+              <IntegrationsEditorTip :label="t('integration.editor.tool.zoomIn')" :shortcut="primaryShortcut('zoomIn')">
+                <button
+                  type="button"
+                  :aria-label="t('integration.editor.tool.zoomIn')"
+                  class="flex size-8 items-center justify-center rounded-lg text-foreground transition hover:bg-black/[0.04]"
+                  @click="flow.zoomIn({ duration: 150 })"
                 >
-              </div>
-              <DropdownMenuSeparator class="my-1 h-px bg-black/[0.06]" />
-              <DropdownMenuItem
-                v-for="p in ZOOM_PRESETS"
-                :key="p"
-                class="justify-center rounded-md px-1 py-0.5 text-sm tabular-nums"
-                @select="setZoomPct(p)"
-              >
-                {{ p }}%
-              </DropdownMenuItem>
-                </DropdownMenuContent>
-              </DropdownMenu>
-            </span>
-          </IntegrationsEditorTip>
-          <IntegrationsEditorTip :label="t('integration.editor.tool.zoomIn')" :shortcut="primaryShortcut('zoomIn')">
-            <button
-              type="button"
-              :aria-label="t('integration.editor.tool.zoomIn')"
-              class="flex size-8 items-center justify-center rounded-lg text-foreground transition hover:bg-black/[0.04]"
-              @click="flow.zoomIn({ duration: 150 })"
-            >
-              <ZoomIn :size="14" />
-            </button>
-          </IntegrationsEditorTip>
-        </div>
-        </div>
+                  <ZoomIn :size="14" />
+                </button>
+              </IntegrationsEditorTip>
+            </div>
+          </div>
         </TooltipProvider>
       </div>
 
@@ -2011,9 +1960,9 @@ const edgeTypes = {
            form as a strip down the left of an empty workbench. -->
       <DialogContent
         :show-close-button="false"
-        @open-auto-focus="onConfigOpenAutoFocus"
         class="flex max-w-none flex-col gap-0 overflow-hidden rounded-lg p-0 sm:max-w-none"
         :class="selectionIsTrigger ? 'h-[min(520px,86vh)] w-[min(600px,94vw)]' : 'h-[min(680px,86vh)] w-[min(1100px,94vw)]'"
+        @open-auto-focus="onConfigOpenAutoFocus"
       >
         <NodeInspector
           v-if="selection"

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

@@ -42,42 +42,8 @@ type __VLS_Props = {
  * id that is on the canvas is in the blob by construction.
  */
 declare function revealNode(id: string): void;
-/**
- * Point at a node without opening it — for a reader who has to look at the
- * card's *surroundings* rather than at its settings.
- *
- * The deliberate difference from {@link revealNode} is the missing selection,
- * and with it the missing settings lightbox. That is the whole reason there are
- * two functions: the validation banner sends someone to a field at fault, and
- * the dialog is where that field is. The error-path advice sends them to a port
- * with nothing on it, and the question they have to answer — where should this
- * failure go? — is answered by the graph around the card, which a dialog over
- * the canvas covers up.
- *
- * Marked with the same pulse a newly created card gets, because the job is the
- * same one: say which of thirty cards is the one meant.
- */
-declare function showNodeOnCanvas(id: string): void;
-/**
- * Hang a Stop-and-Error step off a node's error output and wire it up
- * (specs/workflow-advice.md AC-3).
- *
- * The advice strip can tell an author their error output leads nowhere; on its
- * own that is a reprimand without a remedy, because the repair — drop a node,
- * pick the right one, connect it, write an expression quoting the failing step's
- * message — is four steps of tedium they have to already know. Every template we
- * ship does exactly this, twenty-five times over, so the shape is settled and
- * worth one click.
- *
- * Leaves the result unsaved and unopened, like every other insertion here: the
- * new step is highlighted and the author decides whether to keep it. Deleting it
- * is the undo, because this editor has no undo stack to hook into.
- */
-declare function attachErrorStop(sourceNodeId: string, port: string): void;
 declare const _default: import("vue").DefineComponent<__VLS_Props, {
     revealNode: typeof revealNode;
-    showNodeOnCanvas: typeof showNodeOnCanvas;
-    attachErrorStop: typeof attachErrorStop;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     run: () => any;
     toggleActive: () => any;