@revenexx/studio-integrations 1.4.1 → 2.1.0

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;

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

@@ -0,0 +1,95 @@
+<script setup>
+import { computed, ref } from "vue";
+import { RefreshCircle as Loader2 } from "#solar-icons";
+import { Button, Input, Label } from "@revenexx/studio";
+import { useWorkflowFile } from "../../composables/useWorkflowFile";
+import { parseWorkflowFile } from "../../utils/workflowFile";
+import { errorReason } from "../../utils/apiError";
+const emit = defineEmits(["created", "cancel"]);
+const t = useIntegrationsT();
+const { importAsNew } = useWorkflowFile();
+const file = ref(null);
+const name = ref("");
+const error = ref(null);
+const busy = ref(false);
+const summary = computed(() => {
+  const b = file.value?.workflow.blob;
+  if (!b) return "";
+  return t("integration.workflowFile.count.both", {
+    nodes: t("integration.workflowFile.count.nodes", b.nodes.length),
+    triggers: t("integration.workflowFile.count.triggers", b.triggers?.length ?? 0)
+  });
+});
+async function onPick(event) {
+  const input = event.target;
+  const picked = input.files?.[0];
+  file.value = null;
+  error.value = null;
+  if (!picked) return;
+  const parsed = parseWorkflowFile(await picked.text());
+  if (!parsed.ok) {
+    error.value = t(`integration.workflowFile.refused.${parsed.reason}`);
+    input.value = "";
+    return;
+  }
+  file.value = parsed.file;
+  name.value = parsed.file.workflow.name;
+}
+async function submit() {
+  if (!file.value || busy.value) return;
+  if (!name.value.trim()) {
+    error.value = t("integration.workflows.create.error.nameRequired");
+    return;
+  }
+  busy.value = true;
+  error.value = null;
+  try {
+    const created = await importAsNew(file.value, name.value);
+    emit("created", created.id);
+  } catch (e) {
+    error.value = errorReason(e, t("integration.workflowFile.import.error"));
+  } finally {
+    busy.value = false;
+  }
+}
+</script>
+
+<template>
+  <form class="-m-1 max-h-[65vh] space-y-3 overflow-y-auto p-1" @submit.prevent="submit">
+    <div class="grid grid-cols-[130px_1fr] items-center gap-x-4">
+      <Label for="wf-import-file">{{ t("integration.workflowFile.field.file") }}</Label>
+      <input
+        id="wf-import-file"
+        type="file"
+        accept=".json,application/json"
+        :disabled="busy"
+        class="text-sm file:mr-3 file:h-8 file:rounded-md file:border file:border-black/[0.08] file:bg-white file:px-3 file:text-sm"
+        @change="onPick"
+      >
+    </div>
+
+    <template v-if="file">
+      <div class="grid grid-cols-[130px_1fr] items-center gap-x-4">
+        <Label for="wf-import-name">{{ t("integration.workflows.create.field.name.label") }}</Label>
+        <Input id="wf-import-name" v-model="name" :disabled="busy" class="bg-white" />
+      </div>
+      <p class="text-sm text-muted-foreground">
+        {{ summary }} · {{ t("integration.workflowFile.import.arrives") }}
+      </p>
+    </template>
+
+    <div v-if="error" role="alert" class="rounded-md border border-rose-500/20 bg-rose-500/5 px-3 py-2 text-sm text-rose-700">
+      {{ error }}
+    </div>
+
+    <div class="flex gap-2 pt-1">
+      <Button type="submit" :disabled="!file || busy" class="h-8 text-sm">
+        <Loader2 v-if="busy" :size="14" class="animate-spin" />
+        {{ busy ? t("integration.workflows.create.action.submitting") : t("integration.workflows.create.action.submit") }}
+      </Button>
+      <Button type="button" variant="outline" class="h-8 text-sm" @click="emit('cancel')">
+        {{ t("integration.common.action.cancel") }}
+      </Button>
+    </div>
+  </form>
+</template>

package/dist/runtime/components/Integrations/WorkflowImportFileStep.vue.d.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;

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

@@ -93,10 +93,11 @@ function portSemantic(p) {
 }
 function portTone(p) {
   switch (portSemantic(p)) {
+    // Switch cases / iterator `item` (`branch`): a taken branch is a normal
+    // continuation, so it reads green like any other output rather than a
+    // special colour.
     case "success":
     case "branch-true":
-    // Switch cases / iterator `item`: a taken branch is a normal continuation,
-    // so it reads green like any other output rather than a special colour.
     case "branch":
       return { handle: "!bg-emerald-500", label: "text-emerald-600" };
     // `false` is the neutral "didn't match" route, not a warning — muted slate
@@ -263,12 +264,12 @@ function remove() {
        Everything else lives in the config lightbox. -->
   <div
     class="relative w-[220px] rounded-lg border bg-white transition-all duration-150"
-    @mouseenter="onHoverEnter"
-    @mouseleave="onHoverLeave"
     :class="[
   selected ? 'border-emerald-500/50 shadow-[0_0_0_2px_rgba(16,185,129,0.18)]' : invalidFields.length ? 'border-amber-500/70 shadow-[0_0_0_2px_rgba(245,158,11,0.22)] hover:shadow-md' : inSelectedLoop ? 'border-slate-400/80 shadow-[0_0_0_2px_rgba(100,116,139,0.20)]' : 'border-black/[0.08] shadow-sm hover:shadow-md hover:border-black/[0.16]',
   showPortLabels ? 'pb-3.5' : ''
 ]"
+    @mouseenter="onHoverEnter"
+    @mouseleave="onHoverLeave"
   >
     <!-- The card's marks, in one row at the corner the input handles leave free.
          A row rather than two absolutely-placed badges: the amber one's width

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

@@ -261,13 +261,6 @@ watch(() => vfNodes.value.map((n) => n.id).join("|"), () => {
 });
 const vfEdges = computed(() => {
   const blob = props.workflow.blob;
-  const nodePos = (id) => {
-    const wn = blob.nodes.find((n) => n.id === id);
-    if (wn) return { x: wn.position?.x ?? 0, y: wn.position?.y ?? 0 };
-    const ti = blob.triggers.findIndex((t2) => t2.id === id);
-    if (ti >= 0) return blob.triggerPositions?.[id] ?? { x: -40, y: 60 + ti * 140 };
-    return { x: 0, y: 0 };
-  };
   const pickSourceSide = (_sourceId, _targetId) => "bottom";
   const edgeKind = (sourceNodeId, output) => {
     const wn = blob.nodes.find((n) => n.id === sourceNodeId);

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

@@ -64,12 +64,12 @@ const OUT_SIDES = ["bottom"];
 
   <div
     class="w-[200px] rounded-lg border-2 bg-gradient-to-br from-emerald-50 to-white transition-all duration-150"
-    @mouseenter="onHoverEnter"
-    @mouseleave="onHoverLeave"
     :class="[
   selected ? 'border-emerald-500 shadow-[0_0_0_2px_rgba(16,185,129,0.18)]' : 'border-emerald-400/40 shadow-sm hover:shadow-md hover:border-emerald-500/60',
   data.active === false ? 'opacity-60 grayscale-[0.4]' : ''
 ]"
+    @mouseenter="onHoverEnter"
+    @mouseleave="onHoverLeave"
   >
     <!-- Same type scale as WorkflowNodeView so trigger and node cards read
          identically (icon chip size-8/15, subtitle plain text-sm, mt-0.5). -->

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

@@ -18,7 +18,6 @@ import {
   SelectTrigger,
   SelectValue
 } from "@revenexx/studio";
-import { toast } from "vue-sonner";
 import { deepClone } from "../../utils/deepClone";
 import { copyToClipboard } from "../../utils/clipboard";
 import { languageKeyRead, languageKeyToWrite, resolveDisplayName } from "../../utils/localize";
@@ -28,7 +27,7 @@ const props = defineProps({
 });
 const emit = defineEmits(["update:open", "update:variables"]);
 const t = useIntegrationsT();
-const KEY_PATTERN = /^[a-z_][a-z0-9_]*$/i;
+const KEY_PATTERN = /^[a-z_]\w*$/i;
 const TYPES = ["string", "number", "boolean", "object", "array"];
 const working = ref({});
 const jsonDrafts = reactive({});
@@ -213,7 +212,7 @@ async function copyUsage(key) {
                   <SelectValue />
                 </SelectTrigger>
                 <SelectContent>
-                  <SelectItem v-for="t in TYPES" :key="t" :value="t">{{ t }}</SelectItem>
+                  <SelectItem v-for="type in TYPES" :key="type" :value="type">{{ type }}</SelectItem>
                 </SelectContent>
               </Select>
             </div>

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

@@ -1,11 +1,11 @@
 <script setup>
-import { MenuDots as MoreHorizontal } from "#solar-icons";
+import { MenuDots as MoreHorizontal, Layers } from "#solar-icons";
 import { toast } from "vue-sonner";
 import { apiValidationIssues, errorReason } from "../../utils/apiError";
 import WorkflowDeleteDialog from "./WorkflowDeleteDialog.vue";
 import WorkflowDuplicateDialog from "./WorkflowDuplicateDialog.vue";
+import WorkflowExportDialog from "./WorkflowExportDialog.vue";
 import WorkflowIconView from "./WorkflowIconView.vue";
-import { Layers } from "#solar-icons";
 import {
   Badge,
   Button,
@@ -35,6 +35,7 @@ async function onDuplicated(copy) {
   toast.success(t("integration.workflows.table.toast.duplicated", { name: copy.name }));
   await router.push(`/integrations/workflows/${copy.id}`);
 }
+const exporter = ref(null);
 const GROUP_BY_TAGS_KEY = "integrations.workflows.groupByTags";
 const groupByTags = ref(false);
 try {
@@ -281,10 +282,10 @@ const columns = computed(() => [
           <span v-if="wf.description" class="text-sm text-muted-foreground truncate">{{ wf.description }}</span>
           <div v-if="wf.blob.tags?.length" class="mt-0.5 flex flex-wrap gap-1">
             <span
-              v-for="t in wf.blob.tags"
-              :key="t"
+              v-for="tag in wf.blob.tags"
+              :key="tag"
               class="rounded border border-black/[0.06] bg-muted/50 px-1 text-[10px] leading-4 text-muted-foreground"
-            >{{ t }}</span>
+            >{{ tag }}</span>
           </div>
         </div>
       </div>
@@ -328,11 +329,11 @@ const columns = computed(() => [
     <template #cell-triggers="{ row: wf }">
       <div class="flex min-w-0 flex-col items-start gap-1">
         <span
-          v-for="t in wf.blob.triggers"
-          :key="t.id"
+          v-for="trigger in wf.blob.triggers"
+          :key="trigger.id"
           class="inline-flex items-center whitespace-nowrap rounded-md border border-black/[0.06] bg-muted/50 px-1.5 py-0.5 text-xs font-medium uppercase text-muted-foreground"
         >
-          {{ t.type }}
+          {{ trigger.type }}
         </span>
       </div>
     </template>
@@ -385,6 +386,9 @@ const columns = computed(() => [
             <DropdownMenuItem @select="askDuplicate(wf)">
               {{ t("integration.workflows.action.duplicate") }}
             </DropdownMenuItem>
+            <DropdownMenuItem @select="exporter?.start(wf.id)">
+              {{ t("integration.workflowFile.action.export") }}
+            </DropdownMenuItem>
             <DropdownMenuItem @select="onToggleActive(wf)">
               {{ wf.active ? t("integration.workflows.table.menu.action.pause") : t("integration.workflows.table.menu.action.activate") }}
             </DropdownMenuItem>
@@ -404,4 +408,6 @@ const columns = computed(() => [
   <WorkflowDeleteDialog v-model:open="deleteOpen" :workflow="deleteTarget" />
 
   <WorkflowDuplicateDialog v-model:open="duplicateOpen" :workflow="duplicateTarget" @duplicated="onDuplicated" />
+
+  <WorkflowExportDialog ref="exporter" />
 </template>

package/dist/runtime/composables/useIntegrationsNodes.js

@@ -30,7 +30,10 @@ export function useIntegrationsNodes() {
         // Registered and built are two different things: a version whose code
         // was never built can be drawn but not executed, so the palette must
         // be able to leave it out (PO-338). Missing field = assume built.
-        __hasBundle: n.has_bundle !== false
+        __hasBundle: n.has_bundle !== false,
+        // The package's own order, which the palette falls back to inside a
+        // folder (PO-537). Null and absent both mean "not recorded".
+        __packagePosition: typeof n.package_position === "number" ? n.package_position : void 0
       }));
       applyNodeCatalog(manifests);
       loaded.value = true;

package/dist/runtime/composables/useIntegrationsWorkflows.d.ts

@@ -17,7 +17,9 @@ export declare function useIntegrationsWorkflows(): {
     activeCount: import("vue").ComputedRef<any>;
     load: (force?: boolean) => Promise<Workflow[]>;
     list: () => Promise<Workflow[]>;
-    get: (id: number) => Promise<Workflow | null>;
+    get: (id: number, { strict }?: {
+        strict?: boolean;
+    }) => Promise<Workflow | null>;
     create: (input: {
         name: string;
         description?: string | null;

package/dist/runtime/composables/useIntegrationsWorkflows.js

@@ -1,7 +1,7 @@
 import { computed } from "vue";
 import { useIntegrationsApi } from "./integrationsApi.js";
 import { useIntegrationsT } from "./useIntegrationsT.js";
-import { deepClone } from "../utils/deepClone.js";
+import { assignTriggerHandles, pausedTriggers } from "../utils/workflowFile.js";
 import { errorReason } from "../utils/apiError.js";
 import { unwrapList, unwrapRecord } from "../utils/apiEnvelope.js";
 import { useLoadGate } from "./useLoadGate.js";
@@ -135,12 +135,13 @@ export function useIntegrationsWorkflows() {
     if (!loaded.value) await load();
     return workflows.value;
   }
-  async function get(id) {
+  async function get(id, { strict = false } = {}) {
     try {
       const wf = ingest(unwrapRecord(await api.get(`/workflows/${id}`)));
       upsertCache(wf);
       return wf;
-    } catch {
+    } catch (e) {
+      if (strict) throw e;
       return workflows.value.find((w) => w.id === id) ?? null;
     }
   }
@@ -158,25 +159,7 @@ export function useIntegrationsWorkflows() {
   async function duplicate(id, name) {
     const source = await get(id);
     if (!source) throw new Error(t("integration.workflows.error.notFound"));
-    const blob = deepClone(source.blob);
-    const handleMap = /* @__PURE__ */ new Map();
-    for (const trigger of blob.triggers ?? []) {
-      const fresh = crypto.randomUUID();
-      handleMap.set(trigger.id, fresh);
-      trigger.id = fresh;
-      trigger.active = false;
-    }
-    for (const edge of blob.edges ?? []) {
-      const mapped = handleMap.get(edge.from.nodeId);
-      if (mapped) edge.from.nodeId = mapped;
-    }
-    if (blob.triggerPositions) {
-      const rekeyed = {};
-      for (const [handle, pos] of Object.entries(blob.triggerPositions)) {
-        rekeyed[handleMap.get(handle) ?? handle] = pos;
-      }
-      blob.triggerPositions = rekeyed;
-    }
+    const blob = pausedTriggers(assignTriggerHandles(source.blob, new Set((source.blob.triggers ?? []).map((tr) => tr.id))));
     const base = {
       description: source.description,
       blob,

package/dist/runtime/composables/useNow.d.ts

@@ -0,0 +1,17 @@
+import type { Ref } from 'vue';
+/**
+ * The current time as a ref that moves every `intervalMs`, for the surfaces that
+ * print something measured against it — a running run's elapsed time, and how long
+ * ago a moment was (`relativeTime`).
+ *
+ * `Date.now()` read in a template is not reactive: it is re-read only when the
+ * component re-renders for some other reason. A realtime event re-renders the entry
+ * it changes and none of the others, so "12s ago" beside an untouched entry would
+ * stand still while the one beside it moved on. Passing this ref is what keeps them
+ * on one clock (PO-393).
+ *
+ * Three seconds is the rhythm the runs list already re-timed a running run at. The
+ * interval starts on mount and stops on unmount, so a surface that is not shown
+ * costs nothing.
+ */
+export declare function useNow(intervalMs?: number): Ref<number>;

package/dist/runtime/composables/useNow.js

@@ -0,0 +1,16 @@
+import { onMounted, onUnmounted, ref } from "vue";
+export function useNow(intervalMs = 3e3) {
+  const now = ref(Date.now());
+  let tick = null;
+  onMounted(() => {
+    now.value = Date.now();
+    tick = setInterval(() => {
+      now.value = Date.now();
+    }, intervalMs);
+  });
+  onUnmounted(() => {
+    if (tick) clearInterval(tick);
+    tick = null;
+  });
+  return now;
+}

package/dist/runtime/composables/useWorkflowFile.d.ts

@@ -0,0 +1,21 @@
+import type { Workflow } from '../types/integrations.js';
+import type { OverwritePlan, WorkflowFile } from '../utils/workflowFile.js';
+/**
+ * Export and Import, wired to the tenant (specs/workflow-file.md).
+ *
+ * The rules are `utils/workflowFile`; this is what they need from the stores. Each
+ * of them is read fresh at the moment it matters rather than trusted from whatever
+ * a page happened to load: which settings are credentials comes from the node
+ * catalogue, which credentials are this tenant's from the credential list, and which
+ * trigger handles are taken from the workflows list — and a stale answer to any of
+ * the three is a credential in a file or a webhook address that silently changed.
+ */
+export declare function useWorkflowFile(): {
+    fileFor: (id: number) => Promise<{
+        workflow: Workflow;
+        file: WorkflowFile;
+    }>;
+    download: (file: WorkflowFile) => void;
+    importAsNew: (file: WorkflowFile, name: string) => Promise<Workflow>;
+    planOverwrite: (target: Workflow, file: WorkflowFile) => Promise<OverwritePlan>;
+};

package/dist/runtime/composables/useWorkflowFile.js

@@ -0,0 +1,63 @@
+import { INTEGRATION_NODE_CATALOG, findManifest } from "../data/integrationNodeCatalog.js";
+import { useIntegrationsCredentials } from "./useIntegrationsCredentials.js";
+import { useIntegrationsNodes } from "./useIntegrationsNodes.js";
+import { useIntegrationsT } from "./useIntegrationsT.js";
+import { useIntegrationsWorkflows } from "./useIntegrationsWorkflows.js";
+import { blobForNewWorkflow, overwritePlan, toWorkflowFile, workflowFileName } from "../utils/workflowFile.js";
+export function useWorkflowFile() {
+  const { workflows, error: workflowsError, get, load: loadWorkflows, create } = useIntegrationsWorkflows();
+  const { credentials, error: credentialsError, load: loadCredentials } = useIntegrationsCredentials();
+  const { loaded: nodesLoaded, load: loadNodes } = useIntegrationsNodes();
+  const t = useIntegrationsT();
+  async function nodeCatalogue() {
+    await loadNodes();
+    if (!nodesLoaded.value) throw new Error(t("integration.workflowFile.error.catalogue"));
+  }
+  const fieldsFor = (node) => {
+    const exact = findManifest(node.nodeSlug, node.nodeVersion);
+    if (exact && exact.version === node.nodeVersion) return exact.config ?? [];
+    const all = INTEGRATION_NODE_CATALOG.filter((m) => m.slug === node.nodeSlug);
+    return all.length ? all.flatMap((m) => m.config ?? []) : null;
+  };
+  async function tenantHandles(except) {
+    await loadWorkflows(true);
+    if (workflowsError.value) throw new Error(workflowsError.value);
+    return new Set(workflows.value.filter((wf) => wf.id !== except).flatMap((wf) => (wf.blob.triggers ?? []).map((tr) => tr.id)));
+  }
+  async function tenantCredentialIds() {
+    await loadCredentials(true);
+    if (credentialsError.value) throw new Error(credentialsError.value);
+    return new Set(credentials.value.map((c) => c.id));
+  }
+  async function fileFor(id) {
+    const [workflow, ids] = await Promise.all([get(id, { strict: true }), tenantCredentialIds(), nodeCatalogue()]);
+    if (!workflow) throw new Error(t("integration.workflowFile.export.error"));
+    return { workflow, file: toWorkflowFile(workflow, fieldsFor, ids) };
+  }
+  function download(file) {
+    const url = URL.createObjectURL(new Blob([JSON.stringify(file, null, 2)], { type: "application/json" }));
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = workflowFileName(file.workflow.name);
+    document.body.append(a);
+    a.click();
+    a.remove();
+    setTimeout(() => URL.revokeObjectURL(url), 0);
+  }
+  async function importAsNew(file, name) {
+    const [taken, ids] = await Promise.all([tenantHandles(), tenantCredentialIds(), nodeCatalogue()]);
+    const blob = { ...blobForNewWorkflow(file, fieldsFor, taken, ids), name: name.trim() };
+    return await create({
+      name: name.trim(),
+      description: file.workflow.description,
+      blob,
+      active: false,
+      executionMode: file.workflow.executionMode
+    });
+  }
+  async function planOverwrite(target, file) {
+    const [taken, ids] = await Promise.all([tenantHandles(target.id), tenantCredentialIds(), nodeCatalogue()]);
+    return overwritePlan(target.blob, file, fieldsFor, taken, ids);
+  }
+  return { fileFor, download, importAsNew, planOverwrite };
+}

package/dist/runtime/data/expressionEditor.d.ts

@@ -8,8 +8,17 @@ export interface InlineNodeJSON {
     text?: string;
     attrs?: Record<string, unknown>;
     content?: InlineNodeJSON[];
+    marks?: {
+        type: string;
+    }[];
 }
 export declare const EXPR_TOKEN_NODE = "exprToken";
+/**
+ * A pill the operator has opened to edit: its raw text, marked so it is not
+ * turned back into a pill while the caret is in it. Without the mark, the
+ * closing `}}` it already carries would re-pill it on the first keystroke.
+ */
+export declare const EXPR_EDITING_MARK = "exprEditing";
 /** Raw text → inline content: text nodes with one atom pill per token. */
 export declare function textToInlineContent(text: string): InlineNodeJSON[];
 /**
@@ -29,6 +38,7 @@ export declare function textToDoc(text: string, { multiline }?: LineMode): Inlin
  *  Multiple paragraphs are the lines of a multiline field; in a single-line
  *  field they can only have arrived by paste, and collapse to single spaces. */
 export declare function docToText(doc: InlineNodeJSON | null | undefined, { multiline }?: LineMode): string;
-/** True when any TEXT node still carries a complete raw token (needs re-pilling). */
+/** True when any TEXT node still carries a complete raw token (needs re-pilling).
+ *  Text the operator is editing (`EXPR_EDITING_MARK`) is left alone. */
 export declare function hasRawTokenText(doc: InlineNodeJSON | null | undefined): boolean;
 export {};

package/dist/runtime/data/expressionEditor.js

@@ -1,5 +1,6 @@
 import { listExpressionTokens } from "./nodeRunData.js";
 export const EXPR_TOKEN_NODE = "exprToken";
+export const EXPR_EDITING_MARK = "exprEditing";
 export function textToInlineContent(text) {
   const out = [];
   let cursor = 0;
@@ -39,7 +40,7 @@ export function hasRawTokenText(doc) {
   const stack = [doc];
   while (stack.length) {
     const node = stack.pop();
-    if (node.type === "text" && listExpressionTokens(node.text ?? "").length > 0) return true;
+    if (node.type === "text" && !node.marks?.some((m) => m.type === EXPR_EDITING_MARK) && listExpressionTokens(node.text ?? "").length > 0) return true;
     for (const child of node.content ?? []) stack.push(child);
   }
   return false;

package/dist/runtime/data/nodeIcons.d.ts

@@ -1,2 +1,16 @@
+/**
+ * Node manifest icon → Lucide component.
+ *
+ * Authors declare icons as `mdi:*` names (the node SDK's convention), but the
+ * studio renders Lucide. The naive PascalCase lookup almost never hits a
+ * Lucide export, so every node degraded to the generic Box. This curated map
+ * covers the registry's actual vocabulary; unmapped names still try the
+ * PascalCase lookup before falling back to Box.
+ *
+ * Exported for its test, which checks every entry against Lucide's exports: a
+ * test that found the entries by reading this file's text stopped seeing every
+ * unquoted key the day the linter unquoted them.
+ */
+export declare const MDI_TO_LUCIDE: Record<string, string>;
 /** Resolve a manifest icon name to a Lucide component (Box as last resort). */
 export declare function nodeIcon(name?: string | null): unknown;