@revenexx/studio-integrations 0.6.0 → 1.0.0

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

@@ -2,7 +2,8 @@
 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 },
@@ -10,22 +11,28 @@ const props = defineProps({
   selected: { type: Boolean, required: false }
 });
 defineEmits(["updateNodeInternals"]);
+const t = useIntegrationsT();
 const GROUP_COLORS = [
-  { name: "Amber", bg: "rgba(254,243,199,0.45)", border: "#fcd34d", chip: "#f59e0b" },
-  { name: "Orange", bg: "rgba(255,237,213,0.45)", border: "#fdba74", chip: "#f97316" },
-  { name: "Rose", bg: "rgba(255,228,230,0.45)", border: "#fda4af", chip: "#f43f5e" },
-  { name: "Green", bg: "rgba(220,252,231,0.45)", border: "#86efac", chip: "#10b981" },
-  { name: "Blue", bg: "rgba(219,234,254,0.45)", border: "#93c5fd", chip: "#3b82f6" },
-  { name: "Violet", bg: "rgba(237,233,254,0.45)", border: "#c4b5fd", chip: "#8b5cf6" },
-  { name: "Gray", 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]);
-const label = computed(() => resolveDisplayName(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;
@@ -51,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);
@@ -96,15 +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="c.name"
-        :aria-label="c.name"
+        :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" />
@@ -112,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" />
@@ -120,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>
@@ -136,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 }"
@@ -183,7 +193,7 @@ function onResizeEnd() {
         v-if="editing"
         ref="inputEl"
         v-model="draft"
-        aria-label="Group name"
+        :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,6 +1,12 @@
 <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>
@@ -10,11 +16,30 @@ const { focused } = useIntegrationsFocus();
       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"
     >
-      Skip to content
+      {{ 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 />

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

@@ -5,6 +5,9 @@ type __VLS_Props = {
     field: ConfigField;
     config: Record<string, unknown>;
     modelValue: unknown;
+    /** The settings this one sits among, so a dependency can be named as the
+     *  operator sees it rather than by its config key. */
+    siblingFields?: ConfigField[];
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: unknown) => any;

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

@@ -1,5 +1,6 @@
 <script setup>
 import { computed, ref } from "vue";
+import { isVersionExecutable } from "../../data/integrationNodeCatalog";
 import { ChevronDown } from "lucide-vue-next";
 import { Input } from "@revenexx/studio";
 import { resolveLocalized } from "../../utils/localize";
@@ -8,11 +9,14 @@ const props = defineProps({
   version: { type: String, required: true },
   field: { type: Object, required: true },
   config: { type: Object, required: true },
-  modelValue: { type: null, required: true }
+  modelValue: { type: null, required: true },
+  siblingFields: { type: Array, required: false }
 });
 const emit = defineEmits(["update:modelValue"]);
+const t = useIntegrationsT();
 const search = ref("");
 const focused = ref(false);
+const versionNotReady = computed(() => !isVersionExecutable(props.slug, props.version));
 const q = useNodeConfigResolve({
   slug: () => props.slug,
   version: () => props.version,
@@ -21,6 +25,10 @@ const q = useNodeConfigResolve({
   dependsOn: () => props.field.dependsOn,
   search: () => focused.value ? search.value : ""
 });
+const unsatisfiedLabels = computed(() => q.unsatisfied.value.map((key) => {
+  const sibling = props.siblingFields?.find((f) => f.key === key);
+  return sibling && resolveLocalized(sibling.label) || key;
+}));
 const options = computed(() => q.data.value?.options ?? []);
 const isMulti = computed(() => props.field.type === "multiselect");
 const disabledControlClass = "flex h-8 items-center rounded-md border border-black/[0.08] bg-white px-2 text-sm text-muted-foreground opacity-50";
@@ -75,28 +83,34 @@ function toggleMulti(optValue) {
 
 <template>
   <div>
+    <!-- the pinned version cannot be run, so there is nothing to resolve -->
+    <template v-if="versionNotReady">
+      <div :class="disabledControlClass">—</div>
+      <p class="mt-1 text-sm text-amber-600">{{ t("integration.nodeConfig.dynamicField.versionNotReady") }}</p>
+    </template>
+
     <!-- gated: required dependencies still unset -->
-    <template v-if="q.gated.value">
+    <template v-else-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: unsatisfiedLabels.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>
@@ -106,13 +120,13 @@ function toggleMulti(optValue) {
       <Input
         v-if="options.length > 10"
         v-model="multiFilter"
-        :aria-label="`Filter the options for ${resolveLocalized(field.label)}`"
-        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 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"
@@ -131,10 +145,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 -->
@@ -143,7 +157,7 @@ function toggleMulti(optValue) {
         <Input
           :model-value="focused ? search : currentLabel"
           :aria-label="resolveLocalized(field.label)"
-          :placeholder="resolveLocalized(field.placeholder) || 'Pick one'"
+          :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);
@@ -157,7 +171,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"
@@ -170,14 +184,14 @@ function toggleMulti(optValue) {
             <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>

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

@@ -5,6 +5,9 @@ type __VLS_Props = {
     field: ConfigField;
     config: Record<string, unknown>;
     modelValue: unknown;
+    /** The settings this one sits among, so a dependency can be named as the
+     *  operator sees it rather than by its config key. */
+    siblingFields?: ConfigField[];
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: unknown) => any;

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

@@ -13,6 +13,7 @@ const props = defineProps({
   depth: { type: Number, required: false }
 });
 const emit = defineEmits(["set"]);
+const t = useIntegrationsT();
 void IntegrationsApiError;
 const MAX_DEPTH = 5;
 const q = useNodeConfigResolve({
@@ -29,17 +30,17 @@ const resolvedFields = computed(() => q.data.value?.fields ?? []);
   <div>
     <!-- gated: required dependencies still unset -->
     <p v-if="q.gated.value" class="text-sm text-amber-600">
-      Set {{ q.unsatisfied.value.join(", ") }} first
+      {{ t("integration.nodeConfig.dynamicField.gated", { keys: q.unsatisfied.value.join(", ") }) }}
     </p>
 
     <!-- first load: no fields yet -->
     <p v-else-if="q.isFetching.value && !resolvedFields.length" class="text-sm text-muted-foreground">
-      Resolving fields…
+      {{ t("integration.nodeConfig.dynamicSchema.resolving") }}
     </p>
 
     <!-- error: build/runtime/etc -->
     <div v-else-if="q.error.value" class="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"
         variant="outline"
@@ -47,13 +48,13 @@ const resolvedFields = computed(() => q.data.value?.fields ?? []);
         class="h-6 px-1.5 text-mono text-muted-foreground"
         @click="q.refetch()"
       >
-        RETRY
+        {{ t("integration.nodeConfig.resolve.action.retry") }}
       </Button>
     </div>
 
     <!-- empty: resolved but no fields -->
     <p v-else-if="!resolvedFields.length" class="text-sm text-muted-foreground">
-      No fields resolved.
+      {{ t("integration.nodeConfig.dynamicSchema.empty") }}
     </p>
 
     <!-- fieldset: the resolved child fields, rendered into the flat node config -->
@@ -69,12 +70,12 @@ const resolvedFields = computed(() => q.data.value?.fields ?? []);
       <template v-for="f in resolvedFields" :key="f.key">
         <!-- collision guard: a resolved key that shadows a static config field is skipped -->
         <p v-if="staticKeys.includes(f.key)" class="text-sm text-amber-600">
-          resolved field '{{ f.key }}' collides with a static config field — skipped
+          {{ t("integration.nodeConfig.dynamicSchema.fieldCollision", { key: f.key }) }}
         </p>
 
         <!-- depth cap: don't expand nested dynamic-schema past MAX_DEPTH -->
         <p v-else-if="f.type === 'dynamic-schema' && (depth ?? 0) >= MAX_DEPTH" class="text-sm text-muted-foreground">
-          nested dynamic-schema is not expanded further
+          {{ t("integration.nodeConfig.dynamicSchema.depthCapped") }}
         </p>
 
         <!-- a resolved field, rendered exactly like a static node config field -->
@@ -86,13 +87,14 @@ const resolvedFields = computed(() => q.data.value?.fields ?? []);
           :version="version"
           :secret-keys="secretKeys"
           :static-keys="staticKeys"
+          :sibling-fields="resolvedFields"
           :depth="(depth ?? 0) + 1"
           @set="(k, v) => emit('set', k, v)"
         />
       </template>
 
       <p v-if="q.isFetching.value && q.hasData.value" class="text-sm text-muted-foreground">
-        reloading fields…
+        {{ t("integration.nodeConfig.dynamicSchema.reloading") }}
       </p>
     </fieldset>
   </div>

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

@@ -6,6 +6,9 @@ type __VLS_Props = {
     version: string;
     secretKeys: string[];
     staticKeys?: string[];
+    /** The whole set of settings this one belongs to — a `dynamic` field names the
+     *  ones it waits for out of it (NodeConfigDynamicField). */
+    siblingFields?: ConfigField[];
     depth?: number;
     variables?: Record<string, WorkflowVariable>;
     upstreamOutputs?: Array<{