@revenexx/studio-integrations 2.0.0 → 2.1.0

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

@@ -58,9 +58,8 @@ import { inputHandleId, outputHandleId, portFromHandleId } from "../../data/hand
 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 },
@@ -1556,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>
@@ -1694,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>
 
@@ -1961,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/WorkflowExportDialog.d.vue.ts

@@ -0,0 +1,6 @@
+declare function start(id: number): Promise<void>;
+declare const _default: import("vue").DefineComponent<{}, {
+    start: typeof start;
+    open: import("vue").Ref<boolean, boolean>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

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

@@ -0,0 +1,71 @@
+<script setup>
+import { ref } from "vue";
+import { toast } from "vue-sonner";
+import {
+  AlertDialog,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  Button
+} from "@revenexx/studio";
+import { useWorkflowFile } from "../../composables/useWorkflowFile";
+import { hasVariableValues } from "../../utils/workflowFile";
+import { errorReason } from "../../utils/apiError";
+const t = useIntegrationsT();
+const { fileFor, download } = useWorkflowFile();
+const open = ref(false);
+const pending = ref(null);
+async function start(id) {
+  let file;
+  try {
+    file = (await fileFor(id)).file;
+  } catch (e) {
+    toast.error(errorReason(e, t("integration.workflowFile.export.error")));
+    return;
+  }
+  if (hasVariableValues(file.workflow.blob)) {
+    pending.value = file;
+    open.value = true;
+    return;
+  }
+  finish(file);
+}
+function finish(file) {
+  download(file);
+  toast.success(t("integration.workflowFile.export.toast", { name: file.workflow.name }));
+}
+function confirm() {
+  const file = pending.value;
+  open.value = false;
+  pending.value = null;
+  if (file) finish(file);
+}
+defineExpose({ start, open });
+</script>
+
+<template>
+  <AlertDialog :open="open" @update:open="(v) => {
+  if (!v) {
+    open = false;
+    pending = null;
+  }
+}">
+    <AlertDialogContent>
+      <AlertDialogHeader>
+        <AlertDialogTitle>{{ t("integration.workflowFile.export.notice.title") }}</AlertDialogTitle>
+        <AlertDialogDescription>
+          {{ t("integration.workflowFile.export.notice.description") }}
+        </AlertDialogDescription>
+      </AlertDialogHeader>
+      <AlertDialogFooter>
+        <AlertDialogCancel as-child>
+          <Button variant="outline">{{ t("integration.common.action.cancel") }}</Button>
+        </AlertDialogCancel>
+        <Button @click="confirm">{{ t("integration.workflowFile.export.notice.confirm") }}</Button>
+      </AlertDialogFooter>
+    </AlertDialogContent>
+  </AlertDialog>
+</template>

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

@@ -0,0 +1,6 @@
+declare function start(id: number): Promise<void>;
+declare const _default: import("vue").DefineComponent<{}, {
+    start: typeof start;
+    open: import("vue").Ref<boolean, boolean>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

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

@@ -0,0 +1,8 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    created: (id: number) => any;
+    cancel: () => any;
+}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
+    onCreated?: ((id: number) => any) | undefined;
+    onCancel?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;