@revenexx/studio-integrations 0.5.1 → 0.7.0

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

@@ -2,23 +2,18 @@
 import { computed, ref, watch } from "vue";
 import * as Lucide from "lucide-vue-next";
 import { INTEGRATION_NODE_CATALOG, NODE_CATEGORIES, TRIGGER_TEMPLATES } from "../../data/integrationNodeCatalog";
+import { nodeIcon } from "../../data/nodeIcons";
+import { resolveLocalized } from "../../utils/localize";
 const { load: loadNodes } = useIntegrationsNodes();
 onMounted(() => {
   void loadNodes();
 });
+const t = useIntegrationsT();
 const emit = defineEmits(["insert"]);
 const search = ref("");
 const searchInput = ref(null);
 defineExpose({ focusSearch: () => searchInput.value?.focus() });
-function loc(value) {
-  if (!value) return "";
-  return typeof value === "string" ? value : value.en ?? Object.values(value)[0] ?? "";
-}
-function iconFor(name) {
-  if (!name) return Lucide.Box;
-  const cleaned = (name.includes(":") ? name.split(":").pop() : name).split("-").map((s) => s.charAt(0).toUpperCase() + s.slice(1)).join("");
-  return Lucide[cleaned] || Lucide.Box;
-}
+const iconFor = nodeIcon;
 const CORE_GROUP_BY_CATEGORY = {
   control: "Flow",
   transform: "Data",
@@ -61,7 +56,7 @@ function hasLogo(m) {
 }
 function groupPath(m) {
   if (m.groups?.length) {
-    const path = m.groups.map((g) => loc(g)).filter(Boolean);
+    const path = m.groups.map((g) => resolveLocalized(g)).filter(Boolean);
     if (isIntegration(m) || !path.length) return path;
     return [CORE_LABEL_ALIAS[path[0]] ?? path[0], ...path.slice(1)];
   }
@@ -91,6 +86,31 @@ const latestManifests = computed(() => {
   }
   return out;
 });
+const versionsBySlug = computed(() => {
+  const map = /* @__PURE__ */ new Map();
+  for (const m of INTEGRATION_NODE_CATALOG) {
+    const list = map.get(m.slug);
+    if (list) list.push(m);
+    else map.set(m.slug, [m]);
+  }
+  return map;
+});
+function versionsOf(slug) {
+  return versionsBySlug.value.get(slug) ?? [];
+}
+const selectedVersion = ref({});
+function setSelectedVersion(slug, version) {
+  selectedVersion.value = { ...selectedVersion.value, [slug]: version };
+}
+function effVersion(m) {
+  const sel = selectedVersion.value[m.slug];
+  return sel && versionsOf(m.slug).some((v) => v.version === sel) ? sel : m.version;
+}
+function effManifest(m) {
+  const v = effVersion(m);
+  if (v === m.version) return m;
+  return versionsOf(m.slug).find((x) => x.version === v) ?? m;
+}
 const tree = computed(() => {
   const apps = makeGroup("Integrations");
   const core = makeGroup("Core");
@@ -141,8 +161,8 @@ const currentGroup = computed(() => {
   return cursor ?? null;
 });
 const levelTitle = computed(() => {
-  if (triggersLevel.value) return "Triggers";
-  return currentGroup.value?.label ?? "Add node";
+  if (triggersLevel.value) return t("integration.canvas.palette.group.triggers");
+  return currentGroup.value?.label ?? t("integration.canvas.palette.title.addNode");
 });
 function pushPath(path) {
   direction.value = "push";
@@ -166,7 +186,7 @@ const searchHits = computed(() => {
   const scope = currentGroup.value ? subtreeManifests(currentGroup.value) : latestManifests.value.filter((m) => m.category !== "trigger");
   const hits = [];
   for (const m of scope) {
-    const hay = `${loc(m.name)} ${m.slug} ${loc(m.description)}`.toLowerCase();
+    const hay = `${resolveLocalized(m.name)} ${m.slug} ${resolveLocalized(m.description)}`.toLowerCase();
     if (hay.includes(q)) hits.push({ manifest: m, path: groupPath(m) });
     if (hits.length >= 50) break;
   }
@@ -175,7 +195,7 @@ const searchHits = computed(() => {
 const matchedTriggers = computed(() => {
   const q = search.value.trim().toLowerCase();
   if (!q || currentGroup.value) return [];
-  const matches = (t) => loc(t.name).toLowerCase().includes(q) || t.type.includes(q) || loc(t.description).toLowerCase().includes(q);
+  const matches = (tpl) => resolveLocalized(tpl.name).toLowerCase().includes(q) || tpl.type.includes(q) || resolveLocalized(tpl.description).toLowerCase().includes(q);
   return TRIGGER_TEMPLATES.filter(matches);
 });
 const nodeDrag = useNodeDrag();
@@ -205,24 +225,31 @@ function logoSrcOf(m) {
   const imgs = m.images ?? [];
   return (imgs.find((i) => i.category === "logo") ?? imgs[0])?.src ?? null;
 }
-function onManifestDragStart(m, ev) {
+const paletteDragEnabled = ref(true);
+function onVersionSelectLeave(ev) {
+  const el = ev.currentTarget;
+  if (el && el !== el.ownerDocument.activeElement) paletteDragEnabled.value = true;
+}
+function onManifestDragStart(leaf, ev) {
   if (!ev.dataTransfer) return;
+  const m = effManifest(leaf);
   ev.dataTransfer.setData("application/integration-node", JSON.stringify({ kind: "manifest", slug: m.slug, version: m.version }));
   ev.dataTransfer.effectAllowed = "move";
-  setCustomDragImage(ev, loc(m.name), logoSrcOf(m), "#8b5cf6");
+  setCustomDragImage(ev, resolveLocalized(m.name), logoSrcOf(m), "#8b5cf6");
   nodeDrag.start({ kind: "manifest", manifest: m });
 }
 function onTriggerDragStart(tpl, ev) {
   if (!ev.dataTransfer) return;
   ev.dataTransfer.setData("application/integration-node", JSON.stringify({ kind: "trigger", type: tpl.type }));
   ev.dataTransfer.effectAllowed = "move";
-  setCustomDragImage(ev, loc(tpl.name), null, "#10b981");
+  setCustomDragImage(ev, resolveLocalized(tpl.name), null, "#10b981");
   nodeDrag.start({ kind: "trigger", tpl });
 }
 function onDragEnd() {
   nodeDrag.end();
 }
-function insertManifest(m) {
+function insertManifest(leaf) {
+  const m = effManifest(leaf);
   emit("insert", { kind: "manifest", slug: m.slug, version: m.version });
 }
 function insertTrigger(tpl) {
@@ -234,6 +261,9 @@ function categoryColor(label) {
   const cat = NODE_CATEGORIES.find((c) => c.label === label || CORE_GROUP_BY_CATEGORY[String(c.key)] === label);
   return cat?.color ?? "bg-slate-100 text-slate-500";
 }
+function nodeCategoryColor(m) {
+  return NODE_CATEGORIES.find((c) => c.key === m.category)?.color ?? "bg-slate-100 text-slate-500";
+}
 watch(tree, () => {
   if (stack.value.length && !triggersLevel.value && !currentGroup.value) stack.value = [];
 });
@@ -249,7 +279,7 @@ const searching = computed(() => search.value.trim().length > 0);
         <button
           type="button"
           class="flex size-6 shrink-0 items-center justify-center rounded-md text-muted-foreground transition hover:bg-muted/50 hover:text-foreground"
-          title="Back"
+          :title="t('integration.canvas.palette.action.back')"
           @click="popLevel"
         >
           <Lucide.ArrowLeft :size="14" />
@@ -264,7 +294,8 @@ const searching = computed(() => search.value.trim().length > 0);
           ref="searchInput"
           v-model="search"
           type="text"
-          :placeholder="stack.length ? `Search in ${levelTitle}\u2026` : 'Search all nodes\u2026'"
+          :aria-label="stack.length ? t('integration.canvas.palette.search.ariaGroup', { group: levelTitle }) : t('integration.canvas.palette.search.ariaAll')"
+          :placeholder="stack.length ? t('integration.canvas.palette.search.placeholderGroup', { group: levelTitle }) : t('integration.canvas.palette.search.placeholderAll')"
           class="h-7 w-full rounded-md border border-black/[0.08] bg-white pl-7 pr-2 text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500/40"
           @keydown.esc="search ? search = '' : stack.length && popLevel()"
         >
@@ -291,45 +322,63 @@ const searching = computed(() => search.value.trim().length > 0);
           <!-- ── Search results (flat, path as subtitle) ─────────────────── -->
           <template v-if="searching">
             <div v-if="matchedTriggers.length" class="mb-1">
-              <div class="px-2 py-1 text-mono text-muted-foreground">Triggers</div>
+              <div class="px-2 py-1 text-mono text-muted-foreground">{{ t("integration.canvas.palette.group.triggers") }}</div>
               <div
-                v-for="t in matchedTriggers"
-                :key="t.id"
+                v-for="tpl in matchedTriggers"
+                :key="tpl.id"
                 class="group flex cursor-grab items-center gap-2 rounded-md border border-transparent px-2 py-1.5 transition hover:border-black/[0.08] hover:bg-muted/40 active:cursor-grabbing"
                 draggable="true"
-                @dragstart="onTriggerDragStart(t, $event)"
+                @dragstart="onTriggerDragStart(tpl, $event)"
                 @dragend="onDragEnd"
-                @click="insertTrigger(t)"
+                @click="insertTrigger(tpl)"
               >
                 <span class="flex size-6 shrink-0 items-center justify-center rounded-md bg-emerald-100 text-emerald-600">
-                  <component :is="iconFor(t.icon)" :size="13" />
+                  <component :is="iconFor(tpl.icon)" :size="13" />
                 </span>
                 <div class="min-w-0">
-                  <div class="truncate text-sm font-medium">{{ loc(t.name) }}</div>
-                  <div class="text-xs leading-snug text-muted-foreground">Trigger</div>
+                  <div class="truncate text-sm font-medium">{{ resolveLocalized(tpl.name) }}</div>
+                  <div class="text-xs leading-snug text-muted-foreground">{{ t("integration.canvas.badge.trigger") }}</div>
                 </div>
               </div>
             </div>
 
             <p v-if="!searchHits.length && !matchedTriggers.length" class="px-2 py-6 text-center text-sm text-muted-foreground">
-              Nothing matches “{{ search }}”.
+              {{ t("integration.canvas.palette.search.empty", { query: search }) }}
             </p>
             <div
               v-for="hit in searchHits"
               :key="`${hit.manifest.slug}@${hit.manifest.version}`"
               class="group flex cursor-grab items-start gap-2 rounded-md border border-transparent px-2 py-1.5 transition hover:border-black/[0.08] hover:bg-muted/40 active:cursor-grabbing"
-              draggable="true"
-              :title="loc(hit.manifest.name)"
+              :draggable="paletteDragEnabled"
+              :title="resolveLocalized(hit.manifest.name)"
               @dragstart="onManifestDragStart(hit.manifest, $event)"
               @dragend="onDragEnd"
               @click="insertManifest(hit.manifest)"
             >
-              <span class="flex size-6 shrink-0 items-center justify-center rounded-md" :class="categoryColor(hit.path[0] ?? '')">
-                <IntegrationsNodeLogo :manifest="hit.manifest" :size="13" />
+              <span class="flex size-8 shrink-0 items-center justify-center rounded-md" :class="nodeCategoryColor(hit.manifest)">
+                <IntegrationsNodeMark :manifest="hit.manifest" :size="18" :badge="false" />
               </span>
               <div class="min-w-0 flex-1">
-                <div class="truncate text-sm font-medium">{{ loc(hit.manifest.name) }}</div>
-                <div class="text-xs leading-snug text-muted-foreground">{{ loc(hit.manifest.description) }}</div>
+                <div class="flex items-center gap-1.5">
+                  <span class="min-w-0 flex-1 truncate text-sm font-medium">{{ resolveLocalized(hit.manifest.name) }}</span>
+                  <select
+                    v-if="versionsOf(hit.manifest.slug).length > 1"
+                    :value="effVersion(hit.manifest)"
+                    class="shrink-0 rounded border border-black/10 bg-white px-1 py-px text-xs tabular-nums text-muted-foreground"
+                    :aria-label="t('integration.canvas.palette.version.selectAria', { name: resolveLocalized(hit.manifest.name) })"
+                    @click.stop
+                    @mousedown.stop
+                    @change.stop="setSelectedVersion(hit.manifest.slug, $event.target.value)"
+                    @mouseenter="paletteDragEnabled = false"
+                    @mouseleave="onVersionSelectLeave"
+                    @focus="paletteDragEnabled = false"
+                    @blur="paletteDragEnabled = true"
+                  >
+                    <option v-for="v in versionsOf(hit.manifest.slug)" :key="v.version" :value="v.version">v{{ v.version }}</option>
+                  </select>
+                  <span v-else class="shrink-0 text-xs tabular-nums text-muted-foreground/60">v{{ hit.manifest.version }}</span>
+                </div>
+                <div class="text-xs leading-snug text-muted-foreground">{{ resolveLocalized(hit.manifest.description) }}</div>
                 <div class="truncate text-xs text-muted-foreground/70">{{ hit.path.join(" \u203A ") }}</div>
               </div>
             </div>
@@ -338,21 +387,21 @@ const searching = computed(() => search.value.trim().length > 0);
           <!-- ── Triggers level ──────────────────────────────────────────── -->
           <template v-else-if="triggersLevel">
             <div
-              v-for="t in TRIGGER_TEMPLATES"
-              :key="t.id"
+              v-for="tpl in TRIGGER_TEMPLATES"
+              :key="tpl.id"
               class="group flex cursor-grab items-center gap-2 rounded-md border border-transparent px-2 py-1.5 transition hover:border-black/[0.08] hover:bg-muted/40 active:cursor-grabbing"
               draggable="true"
-              :title="loc(t.name)"
-              @dragstart="onTriggerDragStart(t, $event)"
+              :title="resolveLocalized(tpl.name)"
+              @dragstart="onTriggerDragStart(tpl, $event)"
                 @dragend="onDragEnd"
-              @click="insertTrigger(t)"
+              @click="insertTrigger(tpl)"
             >
               <span class="flex size-6 shrink-0 items-center justify-center rounded-md bg-emerald-100 text-emerald-600">
-                <component :is="iconFor(t.icon)" :size="13" />
+                <component :is="iconFor(tpl.icon)" :size="13" />
               </span>
               <div class="min-w-0">
-                <div class="truncate text-sm font-medium">{{ loc(t.name) }}</div>
-                <div class="text-xs leading-snug text-muted-foreground">{{ loc(t.description) }}</div>
+                <div class="truncate text-sm font-medium">{{ resolveLocalized(tpl.name) }}</div>
+                <div class="text-xs leading-snug text-muted-foreground">{{ resolveLocalized(tpl.description) }}</div>
               </div>
             </div>
           </template>
@@ -361,7 +410,7 @@ const searching = computed(() => search.value.trim().length > 0);
           <template v-else-if="!currentGroup">
             <!-- Triggers group on top -->
             <div v-if="tree.core.children.size">
-              <div class="px-2 py-1 text-mono text-muted-foreground">Core</div>
+              <div class="px-2 py-1 text-mono text-muted-foreground">{{ t("integration.canvas.palette.group.core") }}</div>
               <button
                 type="button"
                 class="flex w-full items-center gap-2 rounded-md border border-transparent px-2 py-1.5 text-left transition hover:border-black/[0.08] hover:bg-muted/40"
@@ -370,7 +419,7 @@ const searching = computed(() => search.value.trim().length > 0);
                 <span class="flex size-6 shrink-0 items-center justify-center rounded-md bg-slate-100 text-emerald-600/80">
                   <Lucide.Zap :size="13" />
                 </span>
-                <span class="min-w-0 flex-1 truncate text-sm font-medium">Triggers</span>
+                <span class="min-w-0 flex-1 truncate text-sm font-medium">{{ t("integration.canvas.palette.group.triggers") }}</span>
                 <span class="text-sm tabular-nums text-muted-foreground">{{ TRIGGER_TEMPLATES.length }}</span>
                 <Lucide.ChevronRight :size="13" class="text-muted-foreground" />
               </button>
@@ -391,7 +440,7 @@ const searching = computed(() => search.value.trim().length > 0);
             </div>
 
             <div v-if="tree.apps.children.size" class="mt-2">
-              <div class="px-2 py-1 text-mono text-muted-foreground">Integrations</div>
+              <div class="px-2 py-1 text-mono text-muted-foreground">{{ t("integration.canvas.palette.group.integrations") }}</div>
               <button
                 v-for="[label, group] in appRows"
                 :key="`app-${label}`"
@@ -400,7 +449,7 @@ const searching = computed(() => search.value.trim().length > 0);
                 @click="pushPath(['__apps', label])"
               >
                 <span class="flex size-6 shrink-0 items-center justify-center rounded-md bg-white ring-1 ring-black/[0.06]">
-                  <IntegrationsNodeLogo v-if="groupLogoManifest(group)" :manifest="groupLogoManifest(group)" :size="14" />
+                  <IntegrationsNodeMark v-if="groupLogoManifest(group)" :manifest="groupLogoManifest(group)" :size="14" logo-only />
                   <Lucide.Package v-else :size="13" class="text-violet-600" />
                 </span>
                 <span class="min-w-0 flex-1 truncate text-sm font-medium">{{ label }}</span>
@@ -423,7 +472,7 @@ const searching = computed(() => search.value.trim().length > 0);
                 class="flex size-6 shrink-0 items-center justify-center rounded-md"
                 :class="groupLogoManifest(group) ? 'bg-white ring-1 ring-black/[0.06]' : 'bg-slate-100 text-slate-500'"
               >
-                <IntegrationsNodeLogo v-if="groupLogoManifest(group)" :manifest="groupLogoManifest(group)" :size="14" />
+                <IntegrationsNodeMark v-if="groupLogoManifest(group)" :manifest="groupLogoManifest(group)" :size="14" logo-only />
                 <Lucide.FolderOpen v-else :size="13" />
               </span>
               <span class="min-w-0 flex-1 truncate text-sm font-medium">{{ label }}</span>
@@ -435,18 +484,36 @@ const searching = computed(() => search.value.trim().length > 0);
               v-for="m in currentGroup.leaves"
               :key="`${m.slug}@${m.version}`"
               class="group flex cursor-grab items-start gap-2 rounded-md border border-transparent px-2 py-1.5 transition hover:border-black/[0.08] hover:bg-muted/40 active:cursor-grabbing"
-              draggable="true"
-              :title="loc(m.name)"
+              :draggable="paletteDragEnabled"
+              :title="resolveLocalized(m.name)"
               @dragstart="onManifestDragStart(m, $event)"
               @dragend="onDragEnd"
               @click="insertManifest(m)"
             >
-              <span class="flex size-6 shrink-0 items-center justify-center rounded-md" :class="hasLogo(m) ? 'bg-white ring-1 ring-black/[0.06]' : categoryColor(groupPath(m)[0] ?? '')">
-                <IntegrationsNodeLogo :manifest="m" :size="14" />
+              <span class="flex size-6 shrink-0 items-center justify-center rounded-md" :class="nodeCategoryColor(m)">
+                <IntegrationsNodeMark :manifest="m" :size="14" :badge="false" />
               </span>
               <div class="min-w-0 flex-1">
-                <div class="truncate text-sm font-medium">{{ loc(m.name) }}</div>
-                <div class="text-xs leading-snug text-muted-foreground">{{ loc(m.description) }}</div>
+                <div class="flex items-center gap-1.5">
+                  <span class="min-w-0 flex-1 truncate text-sm font-medium">{{ resolveLocalized(m.name) }}</span>
+                  <select
+                    v-if="versionsOf(m.slug).length > 1"
+                    :value="effVersion(m)"
+                    class="shrink-0 rounded border border-black/10 bg-white px-1 py-px text-xs tabular-nums text-muted-foreground"
+                    :aria-label="t('integration.canvas.palette.version.selectAria', { name: resolveLocalized(m.name) })"
+                    @click.stop
+                    @mousedown.stop
+                    @change.stop="setSelectedVersion(m.slug, $event.target.value)"
+                    @mouseenter="paletteDragEnabled = false"
+                    @mouseleave="onVersionSelectLeave"
+                    @focus="paletteDragEnabled = false"
+                    @blur="paletteDragEnabled = true"
+                  >
+                    <option v-for="v in versionsOf(m.slug)" :key="v.version" :value="v.version">v{{ v.version }}</option>
+                  </select>
+                  <span v-else class="shrink-0 text-xs tabular-nums text-muted-foreground/60">v{{ m.version }}</span>
+                </div>
+                <div class="text-xs leading-snug text-muted-foreground">{{ resolveLocalized(m.description) }}</div>
               </div>
             </div>
           </template>
@@ -455,7 +522,7 @@ const searching = computed(() => search.value.trim().length > 0);
     </div>
 
     <div class="border-t border-black/[0.06] px-3 py-2 text-sm text-muted-foreground">
-      Drag onto the canvas — or click to insert.
+      {{ t("integration.canvas.palette.footer.hint") }}
     </div>
   </aside>
 </template>

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

@@ -1,6 +1,6 @@
 <script setup>
 import { computed, ref, watch } from "vue";
-import { AddCircle as Plus, TrashBinMinimalistic as Trash2 } from "#solar-icons";
+import { AddCircle as Plus, TrashBinMinimalistic as TrashBin } from "#solar-icons";
 import {
   Button,
   Input,
@@ -15,27 +15,28 @@ const props = defineProps({
   modelValue: { type: null, required: true }
 });
 const emit = defineEmits(["update:modelValue"]);
-const METHODS = [
-  { value: "equal", label: "equals", attribute: true, values: "list" },
-  { value: "notEqual", label: "does not equal", attribute: true, values: "list" },
-  { value: "contains", label: "contains", attribute: true, values: "list" },
-  { value: "search", label: "search", attribute: true, values: "single" },
-  { value: "startsWith", label: "starts with", attribute: true, values: "single" },
-  { value: "endsWith", label: "ends with", attribute: true, values: "single" },
-  { value: "lessThan", label: "less than", attribute: true, values: "single" },
-  { value: "lessThanEqual", label: "less than or equal", attribute: true, values: "single" },
-  { value: "greaterThan", label: "greater than", attribute: true, values: "single" },
-  { value: "greaterThanEqual", label: "greater than or equal", attribute: true, values: "single" },
-  { value: "between", label: "between", attribute: true, values: "list" },
-  { value: "isNull", label: "is empty", attribute: true, values: "none" },
-  { value: "isNotNull", label: "is not empty", attribute: true, values: "none" },
-  { value: "orderAsc", label: "order ascending", attribute: true, values: "none" },
-  { value: "orderDesc", label: "order descending", attribute: true, values: "none" },
-  { value: "limit", label: "limit", attribute: false, values: "single" },
-  { value: "offset", label: "offset", attribute: false, values: "single" }
-];
+const t = useIntegrationsT();
+const METHODS = computed(() => [
+  { value: "equal", label: t("integration.nodeConfig.queryBuilder.method.equal"), attribute: true, values: "list" },
+  { value: "notEqual", label: t("integration.nodeConfig.queryBuilder.method.notEqual"), attribute: true, values: "list" },
+  { value: "contains", label: t("integration.nodeConfig.queryBuilder.method.contains"), attribute: true, values: "list" },
+  { value: "search", label: t("integration.nodeConfig.queryBuilder.method.search"), attribute: true, values: "single" },
+  { value: "startsWith", label: t("integration.nodeConfig.queryBuilder.method.startsWith"), attribute: true, values: "single" },
+  { value: "endsWith", label: t("integration.nodeConfig.queryBuilder.method.endsWith"), attribute: true, values: "single" },
+  { value: "lessThan", label: t("integration.nodeConfig.queryBuilder.method.lessThan"), attribute: true, values: "single" },
+  { value: "lessThanEqual", label: t("integration.nodeConfig.queryBuilder.method.lessThanEqual"), attribute: true, values: "single" },
+  { value: "greaterThan", label: t("integration.nodeConfig.queryBuilder.method.greaterThan"), attribute: true, values: "single" },
+  { value: "greaterThanEqual", label: t("integration.nodeConfig.queryBuilder.method.greaterThanEqual"), attribute: true, values: "single" },
+  { value: "between", label: t("integration.nodeConfig.queryBuilder.method.between"), attribute: true, values: "list" },
+  { value: "isNull", label: t("integration.nodeConfig.queryBuilder.method.isNull"), attribute: true, values: "none" },
+  { value: "isNotNull", label: t("integration.nodeConfig.queryBuilder.method.isNotNull"), attribute: true, values: "none" },
+  { value: "orderAsc", label: t("integration.nodeConfig.queryBuilder.method.orderAsc"), attribute: true, values: "none" },
+  { value: "orderDesc", label: t("integration.nodeConfig.queryBuilder.method.orderDesc"), attribute: true, values: "none" },
+  { value: "limit", label: t("integration.nodeConfig.queryBuilder.method.limit"), attribute: false, values: "single" },
+  { value: "offset", label: t("integration.nodeConfig.queryBuilder.method.offset"), attribute: false, values: "single" }
+]);
 function methodMeta(method) {
-  return METHODS.find((m) => m.value === method) ?? null;
+  return METHODS.value.find((m) => m.value === method) ?? null;
 }
 function formatValue(v) {
   return typeof v === "string" ? v : JSON.stringify(v);
@@ -57,16 +58,16 @@ function parseRow(str) {
   return { kind: "raw", text: str };
 }
 function coerceValue(part) {
-  const t = part.trim();
-  if (/^-?\d+(\.\d+)?$/.test(t)) return Number(t);
-  if (t === "true") return true;
-  if (t === "false") return false;
-  return t;
+  const t2 = part.trim();
+  if (/^-?\d+(\.\d+)?$/.test(t2)) return Number(t2);
+  if (t2 === "true") return true;
+  if (t2 === "false") return false;
+  return t2;
 }
 function rowToString(row) {
   if (row.kind === "raw") {
-    const t = row.text.trim();
-    return t === "" ? null : t;
+    const t2 = row.text.trim();
+    return t2 === "" ? null : t2;
   }
   const meta = methodMeta(row.method);
   if (!meta) return null;
@@ -131,13 +132,13 @@ function writeJson(text) {
   try {
     const parsed = JSON.parse(text);
     if (!Array.isArray(parsed)) {
-      jsonError.value = "Must be a JSON array of query strings.";
+      jsonError.value = t("integration.nodeConfig.queryBuilder.json.notArray");
       return;
     }
     jsonError.value = null;
     emit("update:modelValue", parsed.map(String));
   } catch {
-    jsonError.value = "Not valid JSON yet \u2014 the value is kept once it parses.";
+    jsonError.value = t("integration.nodeConfig.json.invalid");
   }
 }
 const rowMeta = computed(() => rows.value.map((r) => r.kind === "query" ? methodMeta(r.method) : null));
@@ -153,7 +154,7 @@ const rowMeta = computed(() => rows.value.map((r) => r.kind === "query" ? method
           :class="mode === 'builder' ? 'bg-slate-100 text-foreground' : 'text-muted-foreground hover:text-foreground'"
           @click="mode = 'builder'"
         >
-          Builder
+          {{ t("integration.nodeConfig.queryBuilder.mode.builder") }}
         </button>
         <button
           type="button"
@@ -161,7 +162,7 @@ const rowMeta = computed(() => rows.value.map((r) => r.kind === "query" ? method
           :class="mode === 'json' ? 'bg-slate-100 text-foreground' : 'text-muted-foreground hover:text-foreground'"
           @click="mode = 'json'"
         >
-          JSON
+          {{ t("integration.nodeConfig.object.toggle.json") }}
         </button>
       </div>
     </div>
@@ -173,7 +174,9 @@ const rowMeta = computed(() => rows.value.map((r) => r.kind === "query" ? method
             :model-value="row.method"
             @update:model-value="(v) => setRow(idx, { method: String(v) })"
           >
-            <SelectTrigger class="h-7 w-40 shrink-0 bg-white text-sm">
+            <!-- A repeating row has no room for visible labels, so each
+                 control names itself and says which row it is. -->
+            <SelectTrigger :aria-label="t('integration.nodeConfig.queryBuilder.row.comparisonAria', { n: idx + 1 })" class="h-7 w-40 shrink-0 bg-white text-sm">
               <SelectValue />
             </SelectTrigger>
             <SelectContent>
@@ -184,15 +187,17 @@ const rowMeta = computed(() => rows.value.map((r) => r.kind === "query" ? method
           </Select>
           <Input
             v-if="rowMeta[idx]?.attribute"
+            :aria-label="t('integration.nodeConfig.queryBuilder.row.fieldAria', { n: idx + 1 })"
             :model-value="row.attribute"
-            placeholder="field"
+            :placeholder="t('integration.nodeConfig.queryBuilder.row.fieldPlaceholder')"
             class="h-7 w-36 shrink-0 bg-white font-mono text-sm"
             @update:model-value="(v) => setRow(idx, { attribute: String(v) })"
           />
           <Input
             v-if="rowMeta[idx]?.values !== 'none'"
+            :aria-label="t('integration.nodeConfig.queryBuilder.row.valueAria', { n: idx + 1 })"
             :model-value="row.values"
-            :placeholder="rowMeta[idx]?.values === 'list' ? 'value, value, \u2026' : 'value'"
+            :placeholder="rowMeta[idx]?.values === 'list' ? t('integration.nodeConfig.queryBuilder.row.valueListPlaceholder') : t('integration.nodeConfig.queryBuilder.row.valuePlaceholder')"
             class="h-7 min-w-0 flex-1 bg-white text-sm"
             @update:model-value="(v) => setRow(idx, { values: String(v) })"
           />
@@ -200,17 +205,19 @@ const rowMeta = computed(() => rows.value.map((r) => r.kind === "query" ? method
         </template>
         <Input
           v-else
+          :aria-label="t('integration.nodeConfig.queryBuilder.row.rawTextAria', { n: idx + 1 })"
           :model-value="row.text"
           class="h-7 min-w-0 flex-1 bg-white font-mono text-sm"
-          title="This entry is not in the builder vocabulary; edit it as text or in the JSON view."
+          :title="t('integration.nodeConfig.queryBuilder.row.rawTextTitle')"
           @update:model-value="(v) => setRow(idx, { text: String(v) })"
         />
         <button
           type="button"
+          :aria-label="t('integration.nodeConfig.queryBuilder.row.removeAria', { n: idx + 1 })"
           class="flex size-6 shrink-0 items-center justify-center rounded text-muted-foreground transition hover:text-rose-600"
           @click="removeRow(idx)"
         >
-          <Trash2 :size="11" />
+          <TrashBin :size="11" />
         </button>
       </div>
       <Button
@@ -221,12 +228,13 @@ const rowMeta = computed(() => rows.value.map((r) => r.kind === "query" ? method
         @click="addRow"
       >
         <Plus :size="11" />
-        Add filter
+        {{ t("integration.nodeConfig.queryBuilder.action.addFilter") }}
       </Button>
     </template>
 
     <template v-else>
       <Textarea
+        :aria-label="t('integration.nodeConfig.queryBuilder.jsonAria')"
         :model-value="jsonDraft"
         :rows="6"
         spellcheck="false"