@revenexx/studio-integrations 0.5.1 → 0.7.0

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

@@ -12,9 +12,12 @@ const props = defineProps({
   modelValue: { type: null, required: true },
   placeholder: { type: String, required: false },
   variables: { type: Object, required: false },
-  upstreamOutputs: { type: Array, required: false }
+  upstreamOutputs: { type: Array, required: false },
+  invalid: { type: Boolean, required: false },
+  label: { type: String, required: false }
 });
 const emit = defineEmits(["update:modelValue"]);
+const t = useIntegrationsT();
 const text = computed(() => String(props.modelValue ?? ""));
 const OPEN = "${{ ";
 const CLOSE = " }}";
@@ -32,12 +35,12 @@ function pillLabel(expr) {
   }
   if (path[0] === "trigger" && path[1] === "payload") {
     const rest = path.slice(2).join(".");
-    return rest ? "Trigger \xB7 " + rest : "Trigger payload";
+    return rest ? t("integration.nodeConfig.expression.pill.triggerPath", { rest }) : t("integration.nodeConfig.expression.pill.triggerPayload");
   }
-  if (path[0] === "vars") return "Variable \xB7 " + path.slice(1).join(".");
+  if (path[0] === "vars") return t("integration.nodeConfig.expression.pill.variable", { path: path.slice(1).join(".") });
   if (path[0] === "in") {
     const rest = path.slice(1).join(".");
-    return rest ? "Input \xB7 " + rest : "Input payload";
+    return rest ? t("integration.nodeConfig.expression.pill.inputPath", { rest }) : t("integration.nodeConfig.expression.pill.inputPayload");
   }
   return expr;
 }
@@ -78,7 +81,11 @@ const editor = new Editor({
   content: textToDoc(text.value),
   editorProps: {
     // Single line: swallow Enter (paragraph splits would break the field).
-    handleKeyDown: (_view, event) => event.key === "Enter" && !event.isComposing
+    handleKeyDown: (_view, event) => event.key === "Enter" && !event.isComposing,
+    // A contenteditable region is not a text box to assistive technology
+    // unless it says so, and its label sits in a sibling element — so it would
+    // otherwise be an anonymous blob to a screen reader.
+    attributes: { role: "textbox", ...props.label ? { "aria-label": props.label } : {} }
   },
   onUpdate({ editor: ed }) {
     const json = ed.getJSON();
@@ -98,9 +105,9 @@ onBeforeUnmount(() => {
   if (insertHandler?.value === insertToken) insertHandler.value = null;
   editor.destroy();
 });
-watch(text, (t) => {
-  if (docToText(editor.getJSON()) !== t) {
-    editor.commands.setContent(textToDoc(t));
+watch(text, (t2) => {
+  if (docToText(editor.getJSON()) !== t2) {
+    editor.commands.setContent(textToDoc(t2));
   }
 });
 function insertToken(expr) {
@@ -120,7 +127,7 @@ const sections = computed(() => {
     label: key,
     expr: tok("vars." + key)
   }));
-  if (varItems.length) out.push({ heading: "VARIABLES", items: varItems });
+  if (varItems.length) out.push({ heading: t("integration.nodeConfig.expression.suggestion.heading.variables"), items: varItems });
   const upstream = props.upstreamOutputs ?? [];
   const nodeItems = upstream.flatMap((u) => {
     const base = "nodes." + u.nodeId + ".outputs." + u.output;
@@ -133,16 +140,22 @@ const sections = computed(() => {
     }
     return rows;
   });
-  if (nodeItems.length) out.push({ heading: "NODE OUTPUTS", items: nodeItems });
+  if (nodeItems.length) out.push({ heading: t("integration.nodeConfig.expression.suggestion.heading.nodeOutputs"), items: nodeItems });
   const primary = upstream[0];
-  const inItems = [{ label: "input payload", expr: tok("in") }];
+  const inItems = [{ label: t("integration.nodeConfig.expression.suggestion.inputPayload"), expr: tok("in") }];
   for (const f of primary?.fields ?? []) {
     inItems.push({ label: "input." + f, expr: tok("in." + f) });
   }
-  out.push({ heading: "INPUT", items: inItems });
+  out.push({ heading: t("integration.nodeConfig.expression.suggestion.heading.input"), items: inItems });
   return out;
 });
 const hasSuggestions = computed(() => sections.value.some((s) => s.items.length > 0));
+const query = ref("");
+const filteredSections = computed(() => {
+  const q = query.value.trim().toLowerCase();
+  if (!q) return sections.value;
+  return sections.value.map((s) => ({ ...s, items: s.items.filter((i) => i.label.toLowerCase().includes(q) || i.expr.toLowerCase().includes(q)) })).filter((s) => s.items.length > 0);
+});
 const open = ref(false);
 const wrapRef = ref(null);
 function toggle() {
@@ -163,6 +176,9 @@ function onKeydown(e) {
 function onDocMousedown(e) {
   if (wrapRef.value && !wrapRef.value.contains(e.target)) open.value = false;
 }
+watch(open, (isOpen) => {
+  if (!isOpen) query.value = "";
+});
 onMounted(() => document.addEventListener("mousedown", onDocMousedown));
 onBeforeUnmount(() => document.removeEventListener("mousedown", onDocMousedown));
 function insert(expr) {
@@ -174,7 +190,10 @@ function insert(expr) {
 <template>
   <div ref="wrapRef" class="relative" @focusout="onFocusOut">
     <div class="flex items-center gap-1">
-      <div class="expr-editor relative h-8 min-w-0 flex-1 overflow-hidden rounded-md border border-black/[0.08] bg-white px-2 font-mono text-sm transition focus-within:border-black/[0.16]">
+      <div
+        class="expr-editor relative h-8 min-w-0 flex-1 overflow-hidden rounded-md border bg-white px-2 text-sm transition focus-within:outline-2 focus-within:-outline-offset-1 focus-within:outline-ring"
+        :class="invalid ? 'border-rose-400' : 'border-black/[0.08]'"
+      >
         <span
           v-if="!text"
           class="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 truncate text-muted-foreground/60"
@@ -183,7 +202,7 @@ function insert(expr) {
       </div>
       <button
         type="button"
-        title="Insert expression"
+        :title="t('integration.nodeConfig.expression.insertTitle')"
         class="flex h-8 shrink-0 items-center rounded-md border border-black/[0.08] bg-white px-1.5 font-mono text-sm text-muted-foreground transition hover:text-foreground hover:bg-muted/30"
         :class="open ? 'ring-2 ring-emerald-500/40' : ''"
         @mousedown.prevent="toggle"
@@ -195,7 +214,7 @@ function insert(expr) {
     <p
       v-if="preview"
       class="mt-1 flex min-w-0 items-baseline gap-1 text-[11px]"
-      :title="preview.misses ? 'Parts of this expression have no sample data yet' : preview.resolved"
+      :title="preview.misses ? t('integration.nodeConfig.expression.preview.missTitle') : preview.resolved"
     >
       <span class="shrink-0 text-muted-foreground">→</span>
       <span class="min-w-0 truncate font-mono" :class="preview.misses ? 'text-amber-600' : 'text-emerald-700'">{{ preview.resolved }}</span>
@@ -203,34 +222,45 @@ function insert(expr) {
 
     <div
       v-if="open && hasSuggestions"
-      class="absolute right-0 top-full z-50 mt-1 max-h-64 w-72 overflow-y-auto rounded-md border border-black/[0.08] bg-white py-1 text-sm shadow-lg"
+      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"
     >
-      <template v-for="section in sections" :key="section.heading">
-        <div
-          v-if="section.items.length"
-          class="px-2 pb-0.5 pt-1.5 text-[10px] font-medium uppercase tracking-wider text-muted-foreground"
-        >
-          {{ section.heading }}
-        </div>
-        <button
-          v-for="item in section.items"
-          :key="item.expr"
-          type="button"
-          class="block w-full px-2 py-1 text-left transition hover:bg-muted/50"
-          @mousedown.prevent="insert(item.expr)"
+      <div class="shrink-0 border-b border-black/[0.06] p-1">
+        <input
+          v-model="query"
+          :aria-label="t('integration.nodeConfig.expression.picker.filterAria')"
+          :placeholder="t('integration.nodeConfig.expression.picker.filterPlaceholder')"
+          class="w-full rounded px-1.5 py-1 text-sm outline-none placeholder:text-muted-foreground/60 focus:ring-2 focus:ring-primary/40"
+          @mousedown.stop
         >
-          <div class="truncate text-muted-foreground">
-            {{ item.label }}
-          </div>
-          <div class="truncate font-mono text-emerald-700">
-            {{ item.expr }}
+      </div>
+      <div class="min-h-0 flex-1 overflow-y-auto py-1">
+        <p v-if="!filteredSections.length" class="px-2 py-1.5 text-muted-foreground">
+          {{ t("integration.nodeConfig.expression.picker.empty", { query }) }}
+        </p>
+        <template v-for="section in filteredSections" :key="section.heading">
+          <div class="px-2 pb-0.5 pt-1.5 text-[10px] font-medium uppercase tracking-wider text-muted-foreground">
+            {{ section.heading }}
           </div>
-        </button>
-      </template>
+          <button
+            v-for="item in section.items"
+            :key="item.expr"
+            type="button"
+            class="block w-full px-2 py-1 text-left transition hover:bg-muted/50"
+            @mousedown.prevent="insert(item.expr)"
+          >
+            <div class="truncate text-muted-foreground">
+              {{ item.label }}
+            </div>
+            <div class="truncate font-mono text-emerald-700">
+              {{ item.expr }}
+            </div>
+          </button>
+        </template>
+      </div>
     </div>
   </div>
 </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-pill{background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.25);border-radius:6px;color:#047857;display:inline-block;font-family:ui-sans-serif,system-ui,sans-serif;font-size:11px;line-height:18px;margin:0 1px;padding:0 6px;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:baseline;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-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)}
 </style>

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

@@ -10,6 +10,10 @@ type __VLS_Props = {
     placeholder?: string;
     variables?: Record<string, WorkflowVariable>;
     upstreamOutputs?: UpstreamOutput[];
+    /** Draw the editor as at fault — the field above owns the reason. */
+    invalid?: boolean;
+    /** The setting's label, so the editable region has an accessible name. */
+    label?: string;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string) => any;

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

@@ -2,33 +2,37 @@
 import { computed, nextTick, ref } from "vue";
 import { Handle, Position, useVueFlow } from "@vue-flow/core";
 import { NodeToolbar } from "@vue-flow/node-toolbar";
-import { ChevronsDownUp, ChevronsUpDown, Trash2, Ungroup } from "lucide-vue-next";
+import { ChevronsDownUp, ChevronsUpDown, Ungroup } from "lucide-vue-next";
+import { TrashBinMinimalistic as TrashBin } from "#solar-icons";
+import { resolveDisplayName } from "../../utils/localize";
 const props = defineProps({
   id: { type: String, required: true },
   data: { type: Object, required: true },
   selected: { type: Boolean, required: false }
 });
 defineEmits(["updateNodeInternals"]);
+const t = useIntegrationsT();
 const GROUP_COLORS = [
-  { bg: "rgba(254,243,199,0.45)", border: "#fcd34d", chip: "#f59e0b" },
-  { bg: "rgba(255,237,213,0.45)", border: "#fdba74", chip: "#f97316" },
-  { bg: "rgba(255,228,230,0.45)", border: "#fda4af", chip: "#f43f5e" },
-  { bg: "rgba(220,252,231,0.45)", border: "#86efac", chip: "#10b981" },
-  { bg: "rgba(219,234,254,0.45)", border: "#93c5fd", chip: "#3b82f6" },
-  { bg: "rgba(237,233,254,0.45)", border: "#c4b5fd", chip: "#8b5cf6" },
-  { bg: "rgba(245,245,244,0.6)", border: "#d6d3d1", chip: "#78716c" }
+  { nameKey: "integration.canvas.color.amber", bg: "rgba(254,243,199,0.45)", border: "#fcd34d", chip: "#f59e0b" },
+  { nameKey: "integration.canvas.color.orange", bg: "rgba(255,237,213,0.45)", border: "#fdba74", chip: "#f97316" },
+  { nameKey: "integration.canvas.color.rose", bg: "rgba(255,228,230,0.45)", border: "#fda4af", chip: "#f43f5e" },
+  { nameKey: "integration.canvas.color.green", bg: "rgba(220,252,231,0.45)", border: "#86efac", chip: "#10b981" },
+  { nameKey: "integration.canvas.color.blue", bg: "rgba(219,234,254,0.45)", border: "#93c5fd", chip: "#3b82f6" },
+  { nameKey: "integration.canvas.color.violet", bg: "rgba(237,233,254,0.45)", border: "#c4b5fd", chip: "#8b5cf6" },
+  { nameKey: "integration.canvas.color.gray", bg: "rgba(245,245,244,0.6)", border: "#d6d3d1", chip: "#78716c" }
 ];
 const color = computed(() => GROUP_COLORS[props.data.group.color ?? 4] ?? GROUP_COLORS[4]);
-function loc(v) {
-  if (!v) return "";
-  return typeof v === "string" ? v : v.en ?? Object.values(v)[0] ?? "";
-}
-const label = computed(() => loc(props.data.group.label) || "Group");
+const label = computed(() => resolveDisplayName(props.data.group.label) || t("integration.canvas.group.defaultLabel"));
 const collapsed = computed(() => props.data.group.collapsed === true);
 const editable = computed(() => !!props.data.actions);
 const editing = ref(false);
 const draft = ref("");
 const inputEl = ref(null);
+function onLabelDoubleClick(event) {
+  if (!editable.value) return;
+  event.stopPropagation();
+  startRename();
+}
 function startRename() {
   if (!editable.value) return;
   draft.value = label.value;
@@ -54,7 +58,7 @@ function onHoverLeave() {
   }, 250);
 }
 const toolbarVisible = computed(() => editable.value && !editing.value && (hovered.value || !!props.selected));
-const memberCountText = computed(() => `${props.data.memberCount} node${props.data.memberCount === 1 ? "" : "s"}`);
+const memberCountText = computed(() => t("integration.canvas.group.memberCount", props.data.memberCount));
 const flow = useVueFlow();
 const resizing = ref(false);
 const liveW = ref(0);
@@ -99,13 +103,15 @@ function onResizeEnd() {
         class="size-4.5 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, width: '16px', height: '16px' }"
+        :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 ? 'Expand group' : 'Collapse group'"
+        :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" />
@@ -113,7 +119,7 @@ function onResizeEnd() {
       <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="Ungroup (keep the nodes)"
+        :title="t('integration.canvas.group.action.ungroup')"
         @click="data.actions?.ungroup()"
       >
         <Ungroup :size="13" />
@@ -121,10 +127,10 @@ function onResizeEnd() {
       <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="Remove group frame"
+        :title="t('integration.canvas.group.action.removeFrame')"
         @click="data.actions?.ungroup()"
       >
-        <Trash2 :size="13" />
+        <TrashBin :size="13" />
       </button>
     </div>
   </NodeToolbar>
@@ -137,6 +143,9 @@ function onResizeEnd() {
       :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 }"
@@ -184,6 +193,7 @@ function onResizeEnd() {
         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"
@@ -194,7 +204,7 @@ function onResizeEnd() {
         v-else
         class="select-none text-sm font-semibold"
         :style="{ color: color.chip }"
-        @dblclick.stop="startRename"
+        @dblclick="onLabelDoubleClick"
       >
         {{ label }}
       </span>
@@ -206,7 +216,7 @@ function onResizeEnd() {
       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="Resize group"
+      :title="t('integration.canvas.group.action.resize')"
       @pointerdown="onResizeStart"
       @pointermove="onResizeMove"
       @pointerup="onResizeEnd"

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

@@ -1,20 +1,64 @@
 <script setup>
+import { nextTick, onMounted, ref } from "vue";
 import Sidebar from "./Sidebar.vue";
+const t = useIntegrationsT();
 const { focused } = useIntegrationsFocus();
+const animate = ref(false);
+onMounted(() => nextTick(() => {
+  animate.value = true;
+}));
 </script>
 
 <template>
   <div class="flex h-[calc(100%-0.75rem)] mb-3 mr-3 ml-1 overflow-hidden rounded-lg border border-gray-400/10 outline-1 outline-white/30">
+    <!-- First thing in the tab order: jumps past the sidebar into the page. -->
+    <a
+      href="#integrations-main"
+      class="sr-only focus:not-sr-only focus:absolute focus:left-3 focus:top-3 focus:z-50 focus:rounded-md focus:bg-white focus:px-3 focus:py-1.5 focus:text-sm focus:font-medium focus:ring-2 focus:ring-primary/40"
+    >
+      {{ t("integration.shell.action.skipToContent") }}
+    </a>
+    <!-- `inert` + `aria-hidden` are what make the fold real. The inner wrapper
+         below keeps its own `w-64` so the slide-out animates, so a folded rail
+         is merely clipped by `overflow-hidden`: its links keep their size and
+         stay focusable at a negative x, and a keyboard walks into a rail nobody
+         can see (PO-273). `display: none` would fix that too and take the
+         animation with it.
+
+         Both attributes are written to be *absent* rather than false when the
+         rail stands: `inert` is presence-based, so a renderer that emitted
+         `inert="false"` as an attribute would hold the standing rail back
+         instead. That the standing rail really does take focus is asserted in
+         its own right — specs/studio-navigation.md AC-1 is the control for AC-5.
+
+         The id is how a test reaches the rail while it is folded: out of the
+         accessibility tree, it can no longer be addressed by its role, and
+         `nav` alone would catch any navigation the page grows later. -->
     <div
-      class="shrink-0 overflow-hidden transition-[width] duration-200 ease-out border-r border-black/[0.06] bg-white"
-      :class="focused ? 'w-0 !border-r-0' : 'w-64'"
+      id="integrations-nav"
+      class="shrink-0 overflow-hidden border-r border-black/[0.06] bg-white"
+      :class="[focused ? 'w-0 !border-r-0' : 'w-64', animate ? 'transition-[width] duration-200 ease-out' : '']"
+      :inert="focused || void 0"
+      :aria-hidden="focused ? 'true' : void 0"
     >
       <div class="h-full w-64 overflow-y-auto">
         <Sidebar />
       </div>
     </div>
-    <div class="flex-1 min-w-0 overflow-y-auto bg-white/40 backdrop-blur-sm">
+    <!-- `tabindex="-1"` is what makes the skip link actually skip: a <main> is
+         not focusable on its own, so the browser would move the fragment but
+         leave focus on the link — and the next Tab would walk into the sidebar
+         the user just asked to be past. It stays out of the tab order (-1, not
+         0); only the fragment and a script can put focus here — which is also
+         why it draws no focus ring: a ring around the whole page would be noise
+         on a region nobody tabs to, and the promise of a visible mark is about
+         the fields, buttons and links inside it. -->
+    <main
+      id="integrations-main"
+      tabindex="-1"
+      class="flex-1 min-w-0 overflow-y-auto bg-white/40 backdrop-blur-sm outline-none"
+    >
       <slot />
-    </div>
+    </main>
   </div>
 </template>

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

@@ -2,6 +2,7 @@
 import { computed, ref } from "vue";
 import { ChevronDown } from "lucide-vue-next";
 import { Input } from "@revenexx/studio";
+import { resolveLocalized } from "../../utils/localize";
 const props = defineProps({
   slug: { type: String, required: true },
   version: { type: String, required: true },
@@ -10,10 +11,7 @@ const props = defineProps({
   modelValue: { type: null, required: true }
 });
 const emit = defineEmits(["update:modelValue"]);
-function labelText(v) {
-  if (!v) return "";
-  return typeof v === "string" ? v : v.en ?? Object.values(v)[0] ?? "";
-}
+const t = useIntegrationsT();
 const search = ref("");
 const focused = ref(false);
 const q = useNodeConfigResolve({
@@ -33,14 +31,14 @@ const currentKnown = computed(
 );
 const currentLabel = computed(() => {
   const hit = options.value.find((o) => String(o.value) === currentValue.value);
-  return hit ? labelText(hit.label) || String(hit.value) : currentValue.value;
+  return hit ? resolveLocalized(hit.label) || String(hit.value) : currentValue.value;
 });
 const listOpen = computed(() => focused.value && !q.gated.value);
 const visibleOptions = computed(() => {
   const term = search.value.trim().toLowerCase();
   if (!focused.value || !term) return options.value;
   const hits = options.value.filter(
-    (o) => (labelText(o.label) || "").toLowerCase().includes(term) || String(o.value).toLowerCase().includes(term)
+    (o) => (resolveLocalized(o.label) || "").toLowerCase().includes(term) || String(o.value).toLowerCase().includes(term)
   );
   return hits.length ? hits : options.value;
 });
@@ -66,7 +64,7 @@ const visibleMultiOptions = computed(() => {
   const f = multiFilter.value.trim().toLowerCase();
   if (!f) return options.value;
   return options.value.filter(
-    (o) => (labelText(o.label) || String(o.value)).toLowerCase().includes(f) || String(o.value).toLowerCase().includes(f)
+    (o) => (resolveLocalized(o.label) || String(o.value)).toLowerCase().includes(f) || String(o.value).toLowerCase().includes(f)
   );
 });
 function toggleMulti(optValue) {
@@ -81,25 +79,25 @@ function toggleMulti(optValue) {
     <!-- gated: required dependencies still unset -->
     <template v-if="q.gated.value">
       <div :class="disabledControlClass">—</div>
-      <p class="mt-1 text-sm text-amber-600">Set {{ q.unsatisfied.value.join(", ") }} first</p>
+      <p class="mt-1 text-sm text-amber-600">{{ t("integration.nodeConfig.dynamicField.gated", { keys: q.unsatisfied.value.join(", ") }) }}</p>
     </template>
 
     <!-- first load: no data yet -->
     <template v-else-if="q.isFetching.value && options.length === 0">
-      <div :class="disabledControlClass">resolving options…</div>
+      <div :class="disabledControlClass">{{ t("integration.nodeConfig.dynamicField.resolving") }}</div>
     </template>
 
     <!-- error: build/runtime/etc -->
     <template v-else-if="q.error.value">
       <div :class="disabledControlClass">—</div>
       <div class="mt-1 flex items-center gap-2 text-sm text-amber-600">
-        <span>{{ q.error.value.kind === "building" ? "Node bundle still building." : q.error.value.message }}</span>
+        <span>{{ q.error.value.kind === "building" ? t("integration.nodeConfig.resolve.error.building") : q.error.value.message }}</span>
         <button
           type="button"
           class="rounded border border-black/[0.08] px-1.5 py-0.5 text-mono text-muted-foreground transition hover:text-foreground"
           @click="q.refetch()"
         >
-          RETRY
+          {{ t("integration.nodeConfig.resolve.action.retry") }}
         </button>
       </div>
     </template>
@@ -109,12 +107,13 @@ function toggleMulti(optValue) {
       <Input
         v-if="options.length > 10"
         v-model="multiFilter"
-        placeholder="Filter options"
+        :aria-label="t('integration.nodeConfig.dynamicField.multiselect.filterAria', { label: resolveLocalized(field.label) })"
+        :placeholder="t('integration.nodeConfig.dynamicField.multiselect.filterPlaceholder')"
         class="mb-1.5 h-7 bg-white text-sm"
       />
-      <div class="flex flex-wrap gap-1">
+      <div role="group" :aria-label="resolveLocalized(field.label)" class="flex flex-wrap gap-1">
         <span v-if="visibleMultiOptions.length === 0" class="text-sm text-muted-foreground">
-          {{ options.length === 0 ? "no options available" : "no options match the filter" }}
+          {{ options.length === 0 ? t("integration.nodeConfig.dynamicField.empty") : t("integration.nodeConfig.dynamicField.emptyFiltered") }}
         </span>
         <button
           v-for="opt in visibleMultiOptions"
@@ -125,7 +124,7 @@ function toggleMulti(optValue) {
           :class="selectedArray.includes(String(opt.value)) ? 'bg-emerald-500/15 text-emerald-700 border-emerald-500/30' : 'bg-white text-muted-foreground hover:text-foreground'"
           @click="toggleMulti(String(opt.value))"
         >
-          {{ labelText(opt.label) || String(opt.value) }}
+          {{ resolveLocalized(opt.label) || String(opt.value) }}
         </button>
         <!-- stored values no longer offered — shown read-only so they stay visible -->
         <span
@@ -133,10 +132,10 @@ function toggleMulti(optValue) {
           :key="m"
           class="rounded-md border border-black/[0.08] bg-white px-1.5 py-0.5 text-sm text-muted-foreground opacity-60"
         >
-          {{ m }} (not in list)
+          {{ t("integration.nodeConfig.dynamicField.notInList", { value: m }) }}
         </span>
       </div>
-      <p v-if="q.isFetching.value && q.hasData.value" class="mt-1 text-sm text-muted-foreground">reloading…</p>
+      <p v-if="q.isFetching.value && q.hasData.value" class="mt-1 text-sm text-muted-foreground">{{ t("integration.nodeConfig.dynamicField.reloading") }}</p>
     </template>
 
     <!-- single select: searchable combobox; typing re-resolves with the term -->
@@ -144,7 +143,8 @@ function toggleMulti(optValue) {
       <div class="relative">
         <Input
           :model-value="focused ? search : currentLabel"
-          :placeholder="labelText(field.placeholder) || 'Pick one'"
+          :aria-label="resolveLocalized(field.label)"
+          :placeholder="resolveLocalized(field.placeholder) || t('integration.nodeConfig.select.placeholder')"
           class="h-8 bg-white pr-7 text-sm"
           @update:model-value="(v) => {
   search = String(v);
@@ -158,7 +158,7 @@ function toggleMulti(optValue) {
           class="absolute left-0 right-0 top-full z-30 mt-1 max-h-56 overflow-y-auto rounded-md border border-black/[0.08] bg-white py-1 shadow-md"
         >
           <div v-if="q.isFetching.value" class="px-2.5 py-1.5 text-sm text-muted-foreground">
-            {{ search ? "searching\u2026" : "resolving options\u2026" }}
+            {{ search ? t("integration.nodeConfig.dynamicField.searching") : t("integration.nodeConfig.dynamicField.resolving") }}
           </div>
           <button
             v-for="opt in visibleOptions"
@@ -168,17 +168,17 @@ function toggleMulti(optValue) {
             :class="String(opt.value) === currentValue ? 'bg-emerald-500/10 text-emerald-800' : ''"
             @mousedown.prevent="pick(String(opt.value))"
           >
-            <span class="min-w-0 truncate">{{ labelText(opt.label) || String(opt.value) }}</span>
+            <span class="min-w-0 truncate">{{ resolveLocalized(opt.label) || String(opt.value) }}</span>
           </button>
           <div v-if="!q.isFetching.value && visibleOptions.length === 0" class="px-2.5 py-1.5 text-sm text-muted-foreground">
-            {{ search ? 'nothing matches "' + search + '"' : "no options available" }}
+            {{ search ? t("integration.nodeConfig.dynamicField.noMatch", { query: search }) : t("integration.nodeConfig.dynamicField.empty") }}
           </div>
         </div>
       </div>
       <p v-if="currentValue !== '' && !currentKnown" class="mt-1 text-sm text-amber-600">
-        current value not in resolved options
+        {{ t("integration.nodeConfig.dynamicField.currentNotResolved") }}
       </p>
-      <p v-if="q.isFetching.value && q.hasData.value && !focused" class="mt-1 text-sm text-muted-foreground">reloading…</p>
+      <p v-if="q.isFetching.value && q.hasData.value && !focused" class="mt-1 text-sm text-muted-foreground">{{ t("integration.nodeConfig.dynamicField.reloading") }}</p>
     </template>
   </div>
 </template>