@revenexx/studio-integrations 1.4.1 → 2.1.0

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

@@ -31,7 +31,9 @@ import {
 } from "@revenexx/studio";
 import { toast } from "../../utils/notify";
 import { apiRefusal, errorReason } from "../../utils/apiError";
-import { credentialState, relativeTime } from "../../utils/credentialState";
+import { credentialState } from "../../utils/credentialState";
+import { relativeTime } from "../../utils/relativeTime";
+import { useNow } from "../../composables/useNow";
 import { hasRevenexxSource } from "../../utils/revenexxCredentialSource";
 import { resolveLocalized } from "../../utils/localize";
 const props = defineProps({
@@ -41,6 +43,7 @@ const props = defineProps({
 });
 const emit = defineEmits(["update:open", "changed"]);
 const t = useIntegrationsT();
+const now = useNow();
 const { update, remove, test, oauthAuthorizeUrl, load } = useIntegrationsCredentials();
 const tab = ref("credentials");
 const tabs = computed(() => [
@@ -204,167 +207,167 @@ async function connect() {
              scrolling pane and the block below it are siblings, as they were when the
              pane was the whole tab, so nothing about the spacing around them moves. -->
         <template v-if="tab === 'credentials'">
-        <div class="space-y-5 max-h-[62vh] overflow-y-auto pr-1 pt-4">
-        <!-- Connection state — the headline answer: are these credentials correct? -->
-        <div class="rounded-lg border p-3" :class="state.toneClass">
-          <div class="flex items-center gap-2">
-            <CheckCircle2 v-if="state.key === 'connected'" :size="16" class="shrink-0" />
-            <XCircle v-else-if="state.key === 'failed'" :size="16" class="shrink-0" />
-            <span class="font-medium">{{ state.label }}</span>
-            <span v-if="state.at" class="text-sm opacity-70">· verified {{ relativeTime(state.at) }}</span>
-            <div class="flex-1" />
-            <Button
-              v-if="isOAuthAuthcode"
-              size="sm"
-              variant="outline"
-              class="bg-white/60"
-              :disabled="connecting"
-              @click="connect"
-            >
-              <Loader2 v-if="connecting" :size="13" class="mr-1 animate-spin" />
-              {{ t("integration.credentials.detail.action.reconnect") }}
-            </Button>
-          </div>
-          <!-- The stored sentence, and only while nothing fresher is on screen. The
+          <div class="space-y-5 max-h-[62vh] overflow-y-auto pr-1 pt-4">
+            <!-- Connection state — the headline answer: are these credentials correct? -->
+            <div class="rounded-lg border p-3" :class="state.toneClass">
+              <div class="flex items-center gap-2">
+                <CheckCircle2 v-if="state.key === 'connected'" :size="16" class="shrink-0" />
+                <XCircle v-else-if="state.key === 'failed'" :size="16" class="shrink-0" />
+                <span class="font-medium">{{ state.label }}</span>
+                <span v-if="state.at" class="text-sm opacity-70">· verified {{ relativeTime(state.at, now) }}</span>
+                <div class="flex-1" />
+                <Button
+                  v-if="isOAuthAuthcode"
+                  size="sm"
+                  variant="outline"
+                  class="bg-white/60"
+                  :disabled="connecting"
+                  @click="connect"
+                >
+                  <Loader2 v-if="connecting" :size="13" class="mr-1 animate-spin" />
+                  {{ t("integration.credentials.detail.action.reconnect") }}
+                </Button>
+              </div>
+              <!-- The stored sentence, and only while nothing fresher is on screen. The
                live box below shows the result of a test just run, and the reload that
                follows it puts the very same sentence here — so both would print it
                twice, and past the length the platform truncates at, twice differently.
                The freshly returned one wins, being whole (specs/credential-test.md
                AC-1). -->
-          <p v-if="state.message && !liveTest" class="mt-1 text-sm break-words opacity-90">
-            {{ state.message }}
-          </p>
-          <p v-else-if="state.key === 'untested'" class="mt-1 text-sm opacity-80">
-            {{ t("integration.credentials.detail.state.untestedHint") }}
-          </p>
-        </div>
+              <p v-if="state.message && !liveTest" class="mt-1 text-sm break-words opacity-90">
+                {{ state.message }}
+              </p>
+              <p v-else-if="state.key === 'untested'" class="mt-1 text-sm opacity-80">
+                {{ t("integration.credentials.detail.state.untestedHint") }}
+              </p>
+            </div>
 
-        <!-- Editable fields -->
-        <div class="space-y-3">
-          <div class="space-y-1.5">
-            <Label for="detail-cred-name">{{ t("integration.credentials.shared.field.name.label") }}</Label>
-            <Input
-              id="detail-cred-name"
-              v-model="form.name"
-              class="bg-white"
-              :aria-invalid="fieldErrors.name ? 'true' : void 0"
-              :aria-describedby="fieldErrors.name ? 'detail-cred-name-error' : void 0"
-            />
-            <p v-if="fieldErrors.name" id="detail-cred-name-error" class="text-sm text-rose-700">
-              {{ fieldErrors.name }}
-            </p>
-          </div>
+            <!-- Editable fields -->
+            <div class="space-y-3">
+              <div class="space-y-1.5">
+                <Label for="detail-cred-name">{{ t("integration.credentials.shared.field.name.label") }}</Label>
+                <Input
+                  id="detail-cred-name"
+                  v-model="form.name"
+                  class="bg-white"
+                  :aria-invalid="fieldErrors.name ? 'true' : void 0"
+                  :aria-describedby="fieldErrors.name ? 'detail-cred-name-error' : void 0"
+                />
+                <p v-if="fieldErrors.name" id="detail-cred-name-error" class="text-sm text-rose-700">
+                  {{ fieldErrors.name }}
+                </p>
+              </div>
 
-          <!-- "Use revenexx …" source picker (SFTP / Mail / API key) — mounted
+              <!-- "Use revenexx …" source picker (SFTP / Mail / API key) — mounted
                only for the types it serves, which is tidiness rather than
                protection: it renders nothing for any other type anyway. It used
                to be protection, because the component resolved cockpit-only
                sources at setup and mounting it elsewhere took this form down;
                since PO-222 it asks instead (`utils/cockpitSources.ts`). -->
-          <IntegrationsCredentialRevenexxSource
-            v-if="hasRevenexxSource(type?.slug)"
-            :type="type"
-            @update:active="(v) => {
+              <IntegrationsCredentialRevenexxSource
+                v-if="hasRevenexxSource(type?.slug)"
+                :type="type"
+                @update:active="(v) => {
   sourceActive = v;
   clearRefusal();
 }"
-            @apply="(c) => Object.assign(form.config, c)"
-          />
+                @apply="(c) => Object.assign(form.config, c)"
+              />
 
-          <!-- Each label names its own control (`for`/`id`): without it a
+              <!-- Each label names its own control (`for`/`id`): without it a
                screen reader reads the field as unlabelled, and the label text
                cannot be used to reach it at all. -->
-          <div v-for="f in fieldsOf(type)" v-show="!sourceActive" :key="f.key" class="space-y-1.5">
-            <Label :for="`detail-field-${f.key}`">{{ resolveLocalized(f.label) }}{{ f.required ? " *" : "" }}</Label>
+              <div v-for="f in fieldsOf(type)" v-show="!sourceActive" :key="f.key" class="space-y-1.5">
+                <Label :for="`detail-field-${f.key}`">{{ resolveLocalized(f.label) }}{{ f.required ? " *" : "" }}</Label>
 
-            <Input
-              v-if="f.type === 'secret'"
-              :id="`detail-field-${f.key}`"
-              :model-value="form.config[f.key] ?? ''"
-              type="password"
-              autocomplete="new-password"
-              :placeholder="t('integration.credentials.shared.field.secret.placeholder')"
-              class="bg-white"
-              v-bind="configFieldAria(f.key)"
-              @update:model-value="(v) => form.config[f.key] = v"
-            />
-            <Input
-              v-else-if="f.type === 'number'"
-              :id="`detail-field-${f.key}`"
-              type="number"
-              :model-value="form.config[f.key] ?? ''"
-              class="bg-white"
-              v-bind="configFieldAria(f.key)"
-              @update:model-value="(v) => form.config[f.key] = v === '' ? void 0 : Number(v)"
-            />
-            <div v-else-if="f.type === 'boolean'" class="flex items-center gap-2 pt-1">
-              <Switch :id="`detail-field-${f.key}`" :model-value="Boolean(form.config[f.key])" v-bind="configFieldAria(f.key)" @update:model-value="(v) => form.config[f.key] = v" />
-            </div>
-            <Select
-              v-else-if="f.type === 'select'"
-              :model-value="form.config[f.key] ?? ''"
-              @update:model-value="(v) => form.config[f.key] = v"
-            >
-              <SelectTrigger :id="`detail-field-${f.key}`" class="bg-white" v-bind="configFieldAria(f.key)">
-                <SelectValue :placeholder="t('integration.credentials.shared.field.select.placeholder')" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem v-for="opt in f.options ?? []" :key="String(opt.value)" :value="String(opt.value)">
-                  {{ resolveLocalized(opt.label) }}
-                </SelectItem>
-              </SelectContent>
-            </Select>
-            <Input
-              v-else
-              :id="`detail-field-${f.key}`"
-              :model-value="form.config[f.key] ?? ''"
-              class="bg-white"
-              v-bind="configFieldAria(f.key)"
-              @update:model-value="(v) => form.config[f.key] = v"
-            />
+                <Input
+                  v-if="f.type === 'secret'"
+                  :id="`detail-field-${f.key}`"
+                  :model-value="form.config[f.key] ?? ''"
+                  type="password"
+                  autocomplete="new-password"
+                  :placeholder="t('integration.credentials.shared.field.secret.placeholder')"
+                  class="bg-white"
+                  v-bind="configFieldAria(f.key)"
+                  @update:model-value="(v) => form.config[f.key] = v"
+                />
+                <Input
+                  v-else-if="f.type === 'number'"
+                  :id="`detail-field-${f.key}`"
+                  type="number"
+                  :model-value="form.config[f.key] ?? ''"
+                  class="bg-white"
+                  v-bind="configFieldAria(f.key)"
+                  @update:model-value="(v) => form.config[f.key] = v === '' ? void 0 : Number(v)"
+                />
+                <div v-else-if="f.type === 'boolean'" class="flex items-center gap-2 pt-1">
+                  <Switch :id="`detail-field-${f.key}`" :model-value="Boolean(form.config[f.key])" v-bind="configFieldAria(f.key)" @update:model-value="(v) => form.config[f.key] = v" />
+                </div>
+                <Select
+                  v-else-if="f.type === 'select'"
+                  :model-value="form.config[f.key] ?? ''"
+                  @update:model-value="(v) => form.config[f.key] = v"
+                >
+                  <SelectTrigger :id="`detail-field-${f.key}`" class="bg-white" v-bind="configFieldAria(f.key)">
+                    <SelectValue :placeholder="t('integration.credentials.shared.field.select.placeholder')" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem v-for="opt in f.options ?? []" :key="String(opt.value)" :value="String(opt.value)">
+                      {{ resolveLocalized(opt.label) }}
+                    </SelectItem>
+                  </SelectContent>
+                </Select>
+                <Input
+                  v-else
+                  :id="`detail-field-${f.key}`"
+                  :model-value="form.config[f.key] ?? ''"
+                  class="bg-white"
+                  v-bind="configFieldAria(f.key)"
+                  @update:model-value="(v) => form.config[f.key] = v"
+                />
 
-            <p v-if="fieldErrors[`config.${f.key}`]" :id="`detail-field-${f.key}-error`" class="text-sm text-rose-700">
-              {{ fieldErrors[`config.${f.key}`] }}
-            </p>
-          </div>
+                <p v-if="fieldErrors[`config.${f.key}`]" :id="`detail-field-${f.key}-error`" class="text-sm text-rose-700">
+                  {{ fieldErrors[`config.${f.key}`] }}
+                </p>
+              </div>
 
-          <!-- Live test feedback (from the test the operator just ran) -->
-          <div
-            v-if="liveTest"
-            class="rounded-md px-3 py-2 text-sm"
-            :class="liveTest.ok ? 'bg-emerald-500/10 text-emerald-700' : 'bg-rose-500/10 text-rose-700'"
-          >
-            {{ liveTest.ok ? liveTest.message ?? t("integration.credentials.shared.test.ok") : liveTest.error ?? liveTest.message ?? t("integration.credentials.shared.test.failed") }}
-          </div>
+              <!-- Live test feedback (from the test the operator just ran) -->
+              <div
+                v-if="liveTest"
+                class="rounded-md px-3 py-2 text-sm"
+                :class="liveTest.ok ? 'bg-emerald-500/10 text-emerald-700' : 'bg-rose-500/10 text-rose-700'"
+              >
+                {{ liveTest.ok ? liveTest.message ?? t("integration.credentials.shared.test.ok") : liveTest.error ?? liveTest.message ?? t("integration.credentials.shared.test.failed") }}
+              </div>
 
-        </div>
+            </div>
 
-        </div>
+          </div>
 
-        <!-- Outside the scrolling pane on purpose, the way the create dialog has it:
+          <!-- Outside the scrolling pane on purpose, the way the create dialog has it:
              a refusal puts the operator in the first marked field, which scrolls that
              pane back to the top — and a summary rendered at the end of the form would
              be carried out of sight by the very focus meant to make the refusal
              visible. What is marked at a field is not repeated here; what has no field
              to be marked at would otherwise be silent. -->
-        <div v-if="summaryReasons.length" role="alert" class="mt-3 space-y-1 rounded-md bg-rose-500/10 px-3 py-2 text-sm text-rose-700">
-          <!-- Keyed by position: two undrawn keys can be refused with the same
+          <div v-if="summaryReasons.length" role="alert" class="mt-3 space-y-1 rounded-md bg-rose-500/10 px-3 py-2 text-sm text-rose-700">
+            <!-- Keyed by position: two undrawn keys can be refused with the same
                sentence, and a duplicate key is how one of them goes unrendered. -->
-          <p v-for="(reason, i) in summaryReasons" :key="i">{{ reason }}</p>
-        </div>
+            <p v-for="(reason, i) in summaryReasons" :key="i">{{ reason }}</p>
+          </div>
 
-        <div class="flex items-center gap-2 pt-3">
-          <div class="flex-1" />
-          <Button variant="outline" :disabled="testing || saving" @click="runTest">
-            <Loader2 v-if="testing" :size="14" class="mr-1 animate-spin" />
-            <TestIcon v-else :size="14" class="mr-1" />
-            {{ t("integration.credentials.shared.action.testConnection") }}
-          </Button>
-          <Button :disabled="saving || !form.name.trim()" @click="save">
-            <Loader2 v-if="saving" :size="14" class="mr-1 animate-spin" />
-            {{ t("integration.common.action.save") }}
-          </Button>
-        </div>
+          <div class="flex items-center gap-2 pt-3">
+            <div class="flex-1" />
+            <Button variant="outline" :disabled="testing || saving" @click="runTest">
+              <Loader2 v-if="testing" :size="14" class="mr-1 animate-spin" />
+              <TestIcon v-else :size="14" class="mr-1" />
+              {{ t("integration.credentials.shared.action.testConnection") }}
+            </Button>
+            <Button :disabled="saving || !form.name.trim()" @click="save">
+              <Loader2 v-if="saving" :size="14" class="mr-1 animate-spin" />
+              {{ t("integration.common.action.save") }}
+            </Button>
+          </div>
         </template>
 
         <!-- Tab 2: Details -->

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

@@ -5,7 +5,7 @@ const props = defineProps({
   type: { type: [Object, null], required: false },
   size: { type: Number, required: false }
 });
-const box = computed(() => (props.size ?? 16) + 16);
+const box = computed(() => (props.size ?? 16) + 8);
 const glyph = computed(() => props.size ?? 16);
 const logoSrc = computed(() => {
   const imgs = props.type?.images;

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

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, reactive, ref, useId, watch } from "vue";
+import { computed, ref, useId, watch } from "vue";
 import {
   AddCircle as Plus,
   CheckCircle as Check,

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

@@ -51,16 +51,16 @@ const filtered = computed(() => {
         {{ t("integration.credentials.typePicker.empty", { query }) }}
       </p>
       <button
-        v-for="t in filtered"
-        :key="t.slug"
+        v-for="type in filtered"
+        :key="type.slug"
         type="button"
         class="flex w-full items-center gap-2.5 rounded-md px-2 py-2 text-left transition hover:bg-muted/50"
-        @click="emit('pick', t)"
+        @click="emit('pick', type)"
       >
-        <IntegrationsCredentialLogo :type="t" :size="16" />
+        <IntegrationsCredentialLogo :type="type" :size="16" />
         <div class="min-w-0 flex-1 truncate text-sm">
-          <span class="font-medium">{{ resolveLocalized(t.name) || t.slug }}</span>
-          <span class="ml-1.5 text-muted-foreground">({{ authKindLabel(t.auth_kind) }})</span>
+          <span class="font-medium">{{ resolveLocalized(type.name) || type.slug }}</span>
+          <span class="ml-1.5 text-muted-foreground">({{ authKindLabel(type.auth_kind) }})</span>
         </div>
       </button>
     </div>

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

@@ -21,7 +21,9 @@ type __VLS_Props = {
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string) => any;
+    blur: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    onBlur?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

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

@@ -1,13 +1,15 @@
 <script setup>
 import { computed, inject, onBeforeUnmount, onMounted, ref, useId, watch } from "vue";
 import { Editor, EditorContent } from "@tiptap/vue-3";
-import { Node } from "@tiptap/core";
+import { Mark, Node } from "@tiptap/core";
+import { NodeSelection, TextSelection } from "@tiptap/pm/state";
+import { isHistoryTransaction } from "@tiptap/pm/history";
 import Document from "@tiptap/extension-document";
 import Paragraph from "@tiptap/extension-paragraph";
 import Text from "@tiptap/extension-text";
 import History from "@tiptap/extension-history";
 import { resolveExpressionText } from "../../data/nodeRunData";
-import { EXPR_TOKEN_NODE, docToText, hasRawTokenText, textToDoc } from "../../data/expressionEditor";
+import { EXPR_EDITING_MARK, EXPR_TOKEN_NODE, docToText, hasRawTokenText, textToDoc, textToInlineContent } from "../../data/expressionEditor";
 const props = defineProps({
   modelValue: { type: null, required: true },
   placeholder: { type: String, required: false },
@@ -17,7 +19,7 @@ const props = defineProps({
   label: { type: String, required: false },
   multiline: { type: Boolean, required: false }
 });
-const emit = defineEmits(["update:modelValue"]);
+const emit = defineEmits(["update:modelValue", "blur"]);
 const t = useIntegrationsT();
 const text = computed(() => String(props.modelValue ?? ""));
 const OPEN = "${{ ";
@@ -68,19 +70,33 @@ const ExprToken = Node.create({
     return ["span", { "data-expr-token": String(node.attrs.token) }, String(node.attrs.token)];
   },
   addNodeView() {
-    return ({ node }) => {
+    return ({ node, getPos }) => {
       const dom = document.createElement("span");
       dom.className = "expr-pill";
       dom.textContent = tokenLabel(String(node.attrs.token));
       dom.title = String(node.attrs.token);
+      dom.addEventListener("mousedown", (e) => {
+        if (e.button !== 0 || e.shiftKey || e.ctrlKey || e.metaKey || e.altKey) return;
+        const pos = getPos();
+        if (pos !== void 0 && onPillMousedown(pos)) e.preventDefault();
+      });
       return { dom };
     };
   }
 });
+const ExprEditing = Mark.create({
+  name: EXPR_EDITING_MARK,
+  inclusive: true,
+  // No `parseHTML`: the mark is only ever made by `openPill`. Parsed back, a copy
+  // of opened text would paste as text nobody opened, left unpilled.
+  renderHTML() {
+    return ["span", { "data-expr-editing": "", class: "expr-editing" }, 0];
+  }
+});
 const lineMode = () => ({ multiline: props.multiline });
 function editableAttributes() {
   return {
-    "role": "textbox",
+    role: "textbox",
     ...props.multiline ? { "aria-multiline": "true" } : {},
     ...props.label ? { "aria-label": props.label } : {}
   };
@@ -94,13 +110,66 @@ function endOfLine(line) {
   });
   return pos;
 }
+function openPill(pos, node) {
+  if (node.type.name !== EXPR_TOKEN_NODE) return false;
+  const { state, dispatch } = editor.view;
+  const token = String(node.attrs.token);
+  const textNode = state.schema.text(token, [state.schema.marks[EXPR_EDITING_MARK].create()]);
+  const tr = state.tr.replaceWith(pos, pos + node.nodeSize, textNode);
+  tr.setSelection(TextSelection.create(tr.doc, pos + token.length));
+  dispatch(tr);
+  editor.commands.focus();
+  return true;
+}
+function onPillMousedown(pos) {
+  const view = editor.view;
+  const sel = view.state.selection;
+  if (sel instanceof NodeSelection && sel.from === pos) return openPill(pos, sel.node);
+  view.focus();
+  view.dispatch(view.state.tr.setSelection(NodeSelection.create(view.state.doc, pos)));
+  return true;
+}
+function editingRanges() {
+  const ranges = [];
+  editor.state.doc.descendants((node, pos) => {
+    if (node.isText && node.marks.some((m) => m.type.name === EXPR_EDITING_MARK)) {
+      ranges.push({ from: pos, to: pos + node.nodeSize });
+    }
+  });
+  return ranges;
+}
+function closeEditing() {
+  if (editor.isDestroyed) return;
+  const ranges = editingRanges();
+  if (!ranges.length) return;
+  const { state, dispatch } = editor.view;
+  const tr = state.tr;
+  for (const r of ranges.reverse()) {
+    const raw = state.doc.textBetween(r.from, r.to);
+    tr.replaceWith(r.from, r.to, textToInlineContent(raw).map((n) => state.schema.nodeFromJSON(n)));
+  }
+  dispatch(tr);
+}
 const editor = new Editor({
-  extensions: [Document, Paragraph, Text, History, ExprToken],
+  extensions: [Document, Paragraph, Text, History, ExprToken, ExprEditing],
   content: textToDoc(text.value, lineMode()),
   editorProps: {
-    // Single line: swallow Enter (paragraph splits would break the field). A
-    // multiline field wants exactly that split, so it lets the key through.
-    handleKeyDown: (_view, event) => !props.multiline && event.key === "Enter" && !event.isComposing,
+    // A selected pill is not replaced by what is typed: a click on it selects it
+    // (`onPillMousedown`), and a click into the field followed by typing used to
+    // put text beside the value, never over it. Deleting it is Backspace's job.
+    handleTextInput: (view, _from, _to, input) => {
+      const sel = view.state.selection;
+      if (!(sel instanceof NodeSelection) || sel.node.type.name !== EXPR_TOKEN_NODE) return false;
+      const tr = view.state.tr.insertText(input, sel.to);
+      view.dispatch(tr.setSelection(TextSelection.create(tr.doc, sel.to + input.length)));
+      return true;
+    },
+    handleKeyDown: (view, event) => {
+      if (event.isComposing || event.key !== "Enter") return false;
+      const sel = view.state.selection;
+      if (sel instanceof NodeSelection && openPill(sel.from, sel.node)) return true;
+      return !props.multiline;
+    },
     attributes: editableAttributes()
   },
   onUpdate({ editor: ed }) {
@@ -114,9 +183,19 @@ const editor = new Editor({
     }
     if (raw !== text.value) emit("update:modelValue", raw);
   },
+  onSelectionUpdate({ editor: ed, transaction }) {
+    if (isHistoryTransaction(transaction)) return;
+    const { from, to } = ed.state.selection;
+    const ranges = editingRanges();
+    if (ranges.length && !ranges.some((r) => from >= r.from && to <= r.to)) closeEditing();
+  },
   onFocus() {
     if (insertHandler) insertHandler.value = insertToken;
     if (hasSuggestions.value) open.value = true;
+  },
+  onBlur() {
+    closeEditing();
+    emit("blur");
   }
 });
 onBeforeUnmount(() => {
@@ -280,9 +359,9 @@ function insert(expr) {
       v-if="listOpen"
       :id="pickerId"
       role="group"
-      @keydown="onPickerKeydown"
       :aria-label="t('integration.nodeConfig.expression.picker.aria')"
       class="absolute right-0 top-full z-50 mt-1 flex max-h-72 w-80 flex-col rounded-md border border-black/[0.08] bg-white text-sm shadow-lg"
+      @keydown="onPickerKeydown"
     >
       <div class="shrink-0 border-b border-black/[0.06] p-1">
         <input
@@ -322,5 +401,5 @@ function insert(expr) {
 </template>
 
 <style>
-.expr-editor .ProseMirror{align-items:center;display:flex;height:100%;outline:none;overflow-x:auto;scrollbar-width:none}.expr-editor .ProseMirror p{line-height:30px;margin:0;white-space:pre}.expr-editor.expr-multiline{--expr-line:1.375rem;max-height:calc(var(--expr-line)*10 + .5rem);min-height:calc(var(--expr-line)*4 + .5rem);overflow-x:hidden;overflow-y:auto;padding-bottom:.25rem;padding-top:.25rem}.expr-editor.expr-multiline .ProseMirror{display:block;height:auto;overflow-x:visible}.expr-editor.expr-multiline .ProseMirror p{line-height:var(--expr-line);white-space:pre-wrap}.expr-pill{align-items:center;background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.25);border-radius:6px;color:#047857;display:inline-flex;font-family:ui-sans-serif,system-ui,sans-serif;font-size:11px;height:20px;line-height:1;margin:0 2px;padding:0 7px;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap}.expr-pill.ProseMirror-selectednode{outline:2px solid rgba(16,185,129,.5)}
+.expr-editor .ProseMirror{align-items:center;display:flex;height:100%;outline:none;overflow-x:auto;scrollbar-width:none}.expr-editor .ProseMirror p{line-height:30px;margin:0;white-space:pre}.expr-editor.expr-multiline{--expr-line:1.375rem;max-height:calc(var(--expr-line)*10 + .5rem);min-height:calc(var(--expr-line)*4 + .5rem);overflow-x:hidden;overflow-y:auto;padding-bottom:.25rem;padding-top:.25rem}.expr-editor.expr-multiline .ProseMirror{display:block;height:auto;overflow-x:visible}.expr-editor.expr-multiline .ProseMirror p{line-height:var(--expr-line);white-space:pre-wrap}.expr-pill{align-items:center;background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.25);border-radius:6px;color:#047857;cursor:text;display:inline-flex;font-family:ui-sans-serif,system-ui,sans-serif;font-size:11px;height:20px;line-height:1;margin:0 2px;padding:0 7px;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap}.expr-editing{background:rgba(16,185,129,.08);border-radius:4px;color:#047857;font-family:ui-monospace,monospace}.expr-pill.ProseMirror-selectednode{outline:2px solid rgba(16,185,129,.5)}
 </style>

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

@@ -21,7 +21,9 @@ type __VLS_Props = {
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string) => any;
+    blur: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    onBlur?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;