@revenexx/studio-integrations 2.0.0 → 2.1.0

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;

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

@@ -91,143 +91,143 @@ function onResizeEnd() {
 
 <template>
   <div class="relative">
-  <NodeToolbar :is-visible="toolbarVisible" :position="Position.Top" :offset="8">
-    <div
-      class="flex items-center gap-1 rounded-lg border border-black/[0.06] bg-white px-1.5 py-1 shadow-md"
-      @mouseenter="onHoverEnter"
-      @mouseleave="onHoverLeave"
-    >
-      <button
-        v-for="(c, i) in GROUP_COLORS"
-        :key="i"
-        type="button"
-        class="size-6 rounded-full border transition hover:scale-110"
-        :class="(data.group.color ?? 4) === i ? 'ring-2 ring-black/25 ring-offset-1' : ''"
-        :style="{ backgroundColor: c.chip, borderColor: c.border }"
-        :title="t(c.nameKey)"
-        :aria-label="t(c.nameKey)"
-        @click="data.actions?.setColor(i)"
-      />
-      <div class="mx-0.5 h-4 w-px bg-black/10" />
-      <button
-        type="button"
-        class="flex size-6 items-center justify-center rounded-md text-muted-foreground transition hover:bg-muted/50 hover:text-foreground"
-        :title="collapsed ? t('integration.canvas.group.action.expand') : t('integration.canvas.group.action.collapse')"
-        @click="data.actions?.toggleCollapse()"
-      >
-        <component :is="collapsed ? ChevronsUpDown : ChevronsDownUp" :size="13" />
-      </button>
-      <button
-        type="button"
-        class="flex size-6 items-center justify-center rounded-md text-muted-foreground transition hover:bg-muted/50 hover:text-foreground"
-        :title="t('integration.canvas.group.action.ungroup')"
-        @click="data.actions?.ungroup()"
+    <NodeToolbar :is-visible="toolbarVisible" :position="Position.Top" :offset="8">
+      <div
+        class="flex items-center gap-1 rounded-lg border border-black/[0.06] bg-white px-1.5 py-1 shadow-md"
+        @mouseenter="onHoverEnter"
+        @mouseleave="onHoverLeave"
       >
-        <Ungroup :size="13" />
-      </button>
-      <button
-        type="button"
-        class="flex size-6 items-center justify-center rounded-md text-muted-foreground transition hover:bg-rose-50 hover:text-rose-600"
-        :title="t('integration.canvas.group.action.removeFrame')"
-        @click="data.actions?.ungroup()"
-      >
-        <TrashBin :size="13" />
-      </button>
-    </div>
-  </NodeToolbar>
+        <button
+          v-for="(c, i) in GROUP_COLORS"
+          :key="i"
+          type="button"
+          class="size-6 rounded-full border transition hover:scale-110"
+          :class="(data.group.color ?? 4) === i ? 'ring-2 ring-black/25 ring-offset-1' : ''"
+          :style="{ backgroundColor: c.chip, borderColor: c.border }"
+          :title="t(c.nameKey)"
+          :aria-label="t(c.nameKey)"
+          @click="data.actions?.setColor(i)"
+        />
+        <div class="mx-0.5 h-4 w-px bg-black/10" />
+        <button
+          type="button"
+          class="flex size-6 items-center justify-center rounded-md text-muted-foreground transition hover:bg-muted/50 hover:text-foreground"
+          :title="collapsed ? t('integration.canvas.group.action.expand') : t('integration.canvas.group.action.collapse')"
+          @click="data.actions?.toggleCollapse()"
+        >
+          <component :is="collapsed ? ChevronsUpDown : ChevronsDownUp" :size="13" />
+        </button>
+        <button
+          type="button"
+          class="flex size-6 items-center justify-center rounded-md text-muted-foreground transition hover:bg-muted/50 hover:text-foreground"
+          :title="t('integration.canvas.group.action.ungroup')"
+          @click="data.actions?.ungroup()"
+        >
+          <Ungroup :size="13" />
+        </button>
+        <button
+          type="button"
+          class="flex size-6 items-center justify-center rounded-md text-muted-foreground transition hover:bg-rose-50 hover:text-rose-600"
+          :title="t('integration.canvas.group.action.removeFrame')"
+          @click="data.actions?.ungroup()"
+        >
+          <TrashBin :size="13" />
+        </button>
+      </div>
+    </NodeToolbar>
 
-  <!-- Collapsed: compact stand-in card with generic edge handles. -->
-  <template v-if="collapsed">
-    <Handle
-      :id="inputHandleId('top')"
-      type="target"
-      :position="Position.Top"
-      class="!size-3 !rounded-full !border-2 !border-white !bg-slate-500 !shadow-sm"
-    />
-    <!-- The collapsed card stops its own double-click unconditionally, which is
+    <!-- Collapsed: compact stand-in card with generic edge handles. -->
+    <template v-if="collapsed">
+      <Handle
+        :id="inputHandleId('top')"
+        type="target"
+        :position="Position.Top"
+        class="!size-3 !rounded-full !border-2 !border-white !bg-slate-500 !shadow-sm"
+      />
+      <!-- The collapsed card stops its own double-click unconditionally, which is
          safe: both read-only panels build every frame with `collapsed: false`, so
          this surface is the editor's alone. -->
-    <div
-      class="w-[220px] rounded-lg border-2 bg-white transition-all duration-150"
-      :style="{ borderColor: color.border }"
-      :class="selected ? 'shadow-[0_0_0_2px_rgba(59,130,246,0.2)]' : 'shadow-sm hover:shadow-md'"
-      @mouseenter="onHoverEnter"
-      @mouseleave="onHoverLeave"
-      @dblclick.stop="data.actions?.toggleCollapse()"
-    >
-      <div class="flex items-center gap-2.5 px-3 py-2.5">
-        <span class="flex size-8 shrink-0 items-center justify-center rounded-md text-white" :style="{ backgroundColor: color.chip }">
-          <ChevronsUpDown :size="15" />
-        </span>
-        <div class="min-w-0 flex-1">
-          <div class="truncate text-sm font-semibold leading-tight text-foreground">{{ label }}</div>
-          <div class="mt-0.5 text-sm text-muted-foreground">{{ memberCountText }}</div>
+      <div
+        class="w-[220px] rounded-lg border-2 bg-white transition-all duration-150"
+        :style="{ borderColor: color.border }"
+        :class="selected ? 'shadow-[0_0_0_2px_rgba(59,130,246,0.2)]' : 'shadow-sm hover:shadow-md'"
+        @mouseenter="onHoverEnter"
+        @mouseleave="onHoverLeave"
+        @dblclick.stop="data.actions?.toggleCollapse()"
+      >
+        <div class="flex items-center gap-2.5 px-3 py-2.5">
+          <span class="flex size-8 shrink-0 items-center justify-center rounded-md text-white" :style="{ backgroundColor: color.chip }">
+            <ChevronsUpDown :size="15" />
+          </span>
+          <div class="min-w-0 flex-1">
+            <div class="truncate text-sm font-semibold leading-tight text-foreground">{{ label }}</div>
+            <div class="mt-0.5 text-sm text-muted-foreground">{{ memberCountText }}</div>
+          </div>
         </div>
       </div>
-    </div>
-    <Handle
-      :id="outputHandleId('default', 'bottom')"
-      type="source"
-      :position="Position.Bottom"
-      class="!size-3 !rounded-full !border-2 !border-white !bg-slate-500 !shadow-sm"
-    />
-  </template>
+      <Handle
+        :id="outputHandleId('default', 'bottom')"
+        type="source"
+        :position="Position.Bottom"
+        class="!size-3 !rounded-full !border-2 !border-white !bg-slate-500 !shadow-sm"
+      />
+    </template>
 
-  <!-- Expanded: the frame behind the members. -->
-  <div
-    v-else
-    class="pointer-events-none relative rounded-xl border-2 border-dashed transition-colors"
-    :class="selected ? 'shadow-[0_0_0_2px_rgba(59,130,246,0.15)]' : ''"
-    :style="{
+    <!-- Expanded: the frame behind the members. -->
+    <div
+      v-else
+      class="pointer-events-none relative rounded-xl border-2 border-dashed transition-colors"
+      :class="selected ? 'shadow-[0_0_0_2px_rgba(59,130,246,0.15)]' : ''"
+      :style="{
   width: `${frameW}px`,
   height: `${frameH}px`,
   backgroundColor: color.bg,
   borderColor: color.border
 }"
-  >
-    <div
-      class="pointer-events-auto flex cursor-grab items-center gap-1.5 px-3 pt-1.5 active:cursor-grabbing"
-      @mouseenter="onHoverEnter"
-      @mouseleave="onHoverLeave"
     >
-      <input
-        v-if="editing"
-        ref="inputEl"
-        v-model="draft"
-        :aria-label="t('integration.canvas.group.input.nameAria')"
-        class="nodrag w-40 rounded border border-black/[0.1] bg-white px-1 py-0.5 text-sm font-semibold focus:outline-none focus:ring-2 focus:ring-primary/40"
-        @blur="commitRename"
-        @keydown.enter.prevent="commitRename"
-        @keydown.stop
-        @mousedown.stop
+      <div
+        class="pointer-events-auto flex cursor-grab items-center gap-1.5 px-3 pt-1.5 active:cursor-grabbing"
+        @mouseenter="onHoverEnter"
+        @mouseleave="onHoverLeave"
       >
-      <span
-        v-else
-        class="select-none text-sm font-semibold"
+        <input
+          v-if="editing"
+          ref="inputEl"
+          v-model="draft"
+          :aria-label="t('integration.canvas.group.input.nameAria')"
+          class="nodrag w-40 rounded border border-black/[0.1] bg-white px-1 py-0.5 text-sm font-semibold focus:outline-none focus:ring-2 focus:ring-primary/40"
+          @blur="commitRename"
+          @keydown.enter.prevent="commitRename"
+          @keydown.stop
+          @mousedown.stop
+        >
+        <span
+          v-else
+          class="select-none text-sm font-semibold"
+          :style="{ color: color.chip }"
+          @dblclick="onLabelDoubleClick"
+        >
+          {{ label }}
+        </span>
+        <span class="select-none text-xs text-muted-foreground">· {{ memberCountText }}</span>
+      </div>
+
+      <!-- Bottom-right resize handle (editable frames only). -->
+      <div
+        v-if="editable"
+        class="nodrag pointer-events-auto absolute bottom-0 right-0 flex size-5 cursor-se-resize items-end justify-end p-1"
         :style="{ color: color.chip }"
-        @dblclick="onLabelDoubleClick"
+        :title="t('integration.canvas.group.action.resize')"
+        @pointerdown="onResizeStart"
+        @pointermove="onResizeMove"
+        @pointerup="onResizeEnd"
+        @pointercancel="onResizeEnd"
       >
-        {{ label }}
-      </span>
-      <span class="select-none text-xs text-muted-foreground">· {{ memberCountText }}</span>
-    </div>
-
-    <!-- Bottom-right resize handle (editable frames only). -->
-    <div
-      v-if="editable"
-      class="nodrag pointer-events-auto absolute bottom-0 right-0 flex size-5 cursor-se-resize items-end justify-end p-1"
-      :style="{ color: color.chip }"
-      :title="t('integration.canvas.group.action.resize')"
-      @pointerdown="onResizeStart"
-      @pointermove="onResizeMove"
-      @pointerup="onResizeEnd"
-      @pointercancel="onResizeEnd"
-    >
-      <svg viewBox="0 0 8 8" class="size-2.5" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round">
-        <path d="M7 1 1 7" />
-        <path d="M7 4.5 4.5 7" />
-      </svg>
+        <svg viewBox="0 0 8 8" class="size-2.5" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round">
+          <path d="M7 1 1 7" />
+          <path d="M7 4.5 4.5 7" />
+        </svg>
+      </div>
     </div>
   </div>
-  </div>
 </template>

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

@@ -19,6 +19,7 @@ import { fromModelValue, toItemValue, toModelValue } from "../../utils/selectOpt
 import { credentialState } from "../../utils/credentialState";
 import { defaultsFor } from "../../utils/configDefaults";
 import { applyingFields, settingApplies, staleKeys } from "../../utils/settingCondition";
+import { coerceSettingValue } from "../../utils/settingValue";
 const props = defineProps({
   field: { type: Object, required: true },
   config: { type: Object, required: true },
@@ -38,8 +39,20 @@ const emit = defineEmits(["set", "declare-state"]);
 const t = useIntegrationsT();
 const value = computed(() => props.config[props.field.key]);
 function write(v) {
+  emit("set", props.field.key, coerceSettingValue(props.field, v));
+}
+function writeTyped(v) {
   emit("set", props.field.key, v);
 }
+function commitTyped() {
+  const committed = coerceSettingValue(props.field, value.value);
+  if (committed !== value.value) emit("set", props.field.key, committed);
+}
+const expressionText = computed(() => {
+  const v = value.value;
+  if (typeof v === "string") return v;
+  return typeof v === "number" ? String(v) : "";
+});
 const exprHint = "${{ \u2026 }}";
 const descriptionText = computed(() => resolveLocalized(props.field.description));
 const inRow = computed(() => props.rowIndex !== void 0);
@@ -65,9 +78,10 @@ const formatError = computed(() => {
       }
     }
   }
-  if (typeof v === "number") {
-    if (val.min != null && v < val.min) return t("integration.nodeConfig.validation.min", { min: val.min });
-    if (val.max != null && v > val.max) return t("integration.nodeConfig.validation.max", { max: val.max });
+  const n = coerceSettingValue(props.field, v);
+  if (typeof n === "number") {
+    if (val.min != null && n < val.min) return t("integration.nodeConfig.validation.min", { min: val.min });
+    if (val.max != null && n > val.max) return t("integration.nodeConfig.validation.max", { max: val.max });
   }
   return null;
 });
@@ -433,14 +447,15 @@ function setArrayItemField(index, fieldKey, v) {
     <!-- typed control flipped to expression mode -->
     <IntegrationsExpressionInput
       v-else-if="showExpression"
-      :model-value="typeof value === 'string' ? value : ''"
+      :model-value="expressionText"
       :placeholder="resolveLocalized(field.placeholder)"
       :variables="variables"
       :upstream-outputs="upstreamOutputs"
       :invalid="invalid"
       :label="controlName"
       :multiline="isMultiline"
-      @update:model-value="(v) => write(v)"
+      @update:model-value="(v) => writeTyped(v)"
+      @blur="commitTyped"
     />
 
     <!-- dynamic options — resolved at author time via config:resolve. Ahead of

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

@@ -193,9 +193,12 @@ const parameterFields = computed(() => applyingConfig.value.filter((f) => !SETTI
 const settingsFields = computed(() => applyingConfig.value.filter((f) => SETTINGS_FIELD_KEY.test(f.key)));
 const FOLD_ABOVE = 4;
 const ALWAYS_DRAWN = 3;
-const foldedFields = computed(
-  () => parameterFields.value.length > FOLD_ABOVE ? parameterFields.value.slice(ALWAYS_DRAWN).filter((f) => !f.required) : []
-);
+const foldedFields = computed(() => {
+  const fields = parameterFields.value;
+  if (fields.length <= FOLD_ABOVE) return [];
+  const lastRequired = fields.findLastIndex((f) => f.required);
+  return fields.slice(Math.max(ALWAYS_DRAWN, lastRequired + 1));
+});
 const foldedKeys = computed(() => new Set(foldedFields.value.map((f) => f.key)));
 const foldAnchorKey = computed(() => foldedFields.value[0]?.key);
 function optionalShouldOpen() {
@@ -1215,7 +1218,7 @@ async function runTestStep() {
                   </span>
                 </button>
                 <div v-show="!sectionClosed(s.id)" class="space-y-2 border-t border-black/[0.06] px-2 py-2">
-                <!-- These ports belong to an UPSTREAM node, so the sentence is that
+                  <!-- These ports belong to an UPSTREAM node, so the sentence is that
                      node's. On a 300px column it is a tooltip rather than text: the
                      values below are what this panel is for, and a sentence per port
                      pushes them out of view. The readable copy is the Output tab
@@ -1233,50 +1236,50 @@ async function runTestStep() {
                      sentence is read by resting on the port's name or the space around
                      its rows rather than on a row itself. Where a reader is owed the
                      text outright, that is the Output tab. -->
-                <div
-                  v-for="p in s.ports"
-                  :key="p.name"
-                  class="space-y-1 pl-0.5"
-                  :title="resolveLocalized(p.description) || void 0"
-                >
-                  <div v-if="s.ports.length > 1 || p.kind !== 'default'" class="flex items-center gap-1.5">
-                    <span class="size-1.5 rounded-full" :class="portDotClass(p.kind, p.name)" />
-                    <span class="text-[10px] font-medium uppercase tracking-wider text-muted-foreground">{{ p.name }}</span>
-                  </div>
-                  <!-- Schema rows, n8n-style: glyph · key · sampled value. -->
-                  <div class="space-y-px">
-                    <button
-                      type="button"
-                      :class="rowClass"
-                      :aria-label="nodeOutputExpr(s.id, p.name)"
-                      :title="nodeOutputExpr(s.id, p.name)"
-                      draggable="true"
-                      @dragstart="onChipDragStart($event, nodeOutputExpr(s.id, p.name))"
-                      @click="insertExpression(nodeOutputExpr(s.id, p.name))"
-                    >
-                      <span class="w-3 shrink-0 text-center font-semibold text-slate-400">{}</span>
-                      <span class="shrink-0 font-medium"><span v-for="(seg, i) in highlightSegments(p.name)" :key="i" :class="seg.hit ? 'rounded-[2px] bg-amber-200/80' : ''">{{ seg.text }}</span></span>
-                    </button>
-                    <div class="space-y-px pl-3">
+                  <div
+                    v-for="p in s.ports"
+                    :key="p.name"
+                    class="space-y-1 pl-0.5"
+                    :title="resolveLocalized(p.description) || void 0"
+                  >
+                    <div v-if="s.ports.length > 1 || p.kind !== 'default'" class="flex items-center gap-1.5">
+                      <span class="size-1.5 rounded-full" :class="portDotClass(p.kind, p.name)" />
+                      <span class="text-[10px] font-medium uppercase tracking-wider text-muted-foreground">{{ p.name }}</span>
+                    </div>
+                    <!-- Schema rows, n8n-style: glyph · key · sampled value. -->
+                    <div class="space-y-px">
                       <button
-                        v-for="f in p.fields"
-                        :key="f.name"
                         type="button"
                         :class="rowClass"
-                        :aria-label="nodeOutputExpr(s.id, p.name, f.name)"
-                        :title="nodeOutputExpr(s.id, p.name, f.name) + (f.dataType ? ' \xB7 ' + f.dataType : '')"
+                        :aria-label="nodeOutputExpr(s.id, p.name)"
+                        :title="nodeOutputExpr(s.id, p.name)"
                         draggable="true"
-                        @dragstart="onChipDragStart($event, nodeOutputExpr(s.id, p.name, f.name))"
-                        @click="insertExpression(nodeOutputExpr(s.id, p.name, f.name))"
+                        @dragstart="onChipDragStart($event, nodeOutputExpr(s.id, p.name))"
+                        @click="insertExpression(nodeOutputExpr(s.id, p.name))"
                       >
-                        <span class="w-3 shrink-0 text-center font-semibold" :class="typeGlyph(f.dataType)?.cls ?? 'text-slate-300'">{{ typeGlyph(f.dataType)?.char ?? "\xB7" }}</span>
-                        <span class="shrink-0"><span v-for="(seg, i) in highlightSegments(f.name)" :key="i" :class="seg.hit ? 'rounded-[2px] bg-amber-200/80' : ''">{{ seg.text }}</span></span>
-                        <span v-if="chipValue(s.id, p.name, f.name) !== null" class="min-w-0 flex-1 truncate text-slate-400">{{ chipValue(s.id, p.name, f.name) }}</span>
+                        <span class="w-3 shrink-0 text-center font-semibold text-slate-400">{}</span>
+                        <span class="shrink-0 font-medium"><span v-for="(seg, i) in highlightSegments(p.name)" :key="i" :class="seg.hit ? 'rounded-[2px] bg-amber-200/80' : ''">{{ seg.text }}</span></span>
                       </button>
+                      <div class="space-y-px pl-3">
+                        <button
+                          v-for="f in p.fields"
+                          :key="f.name"
+                          type="button"
+                          :class="rowClass"
+                          :aria-label="nodeOutputExpr(s.id, p.name, f.name)"
+                          :title="nodeOutputExpr(s.id, p.name, f.name) + (f.dataType ? ' \xB7 ' + f.dataType : '')"
+                          draggable="true"
+                          @dragstart="onChipDragStart($event, nodeOutputExpr(s.id, p.name, f.name))"
+                          @click="insertExpression(nodeOutputExpr(s.id, p.name, f.name))"
+                        >
+                          <span class="w-3 shrink-0 text-center font-semibold" :class="typeGlyph(f.dataType)?.cls ?? 'text-slate-300'">{{ typeGlyph(f.dataType)?.char ?? "\xB7" }}</span>
+                          <span class="shrink-0"><span v-for="(seg, i) in highlightSegments(f.name)" :key="i" :class="seg.hit ? 'rounded-[2px] bg-amber-200/80' : ''">{{ seg.text }}</span></span>
+                          <span v-if="chipValue(s.id, p.name, f.name) !== null" class="min-w-0 flex-1 truncate text-slate-400">{{ chipValue(s.id, p.name, f.name) }}</span>
+                        </button>
+                      </div>
                     </div>
                   </div>
                 </div>
-                </div>
               </div>
             </div>
 
@@ -1838,9 +1841,9 @@ async function runTestStep() {
                   :depth="0"
                   :variables="variables"
                   :state-namespaces="offeredStateNamespaces"
-                  @declare-state="stageStateNamespace"
                   :upstream-outputs="upstreamOutputs"
                   :refused="refusedFields?.[field.key]"
+                  @declare-state="stageStateNamespace"
                   @set="(k, v) => writeConfig(k, v)"
                 />
               </template>
@@ -1881,9 +1884,9 @@ async function runTestStep() {
                 :depth="0"
                 :variables="variables"
                 :state-namespaces="offeredStateNamespaces"
-                @declare-state="stageStateNamespace"
                 :upstream-outputs="upstreamOutputs"
                 :refused="refusedFields?.[field.key]"
+                @declare-state="stageStateNamespace"
                 @set="(k, v) => writeConfig(k, v)"
               />
             </div>