@revenexx/studio-integrations 1.2.0 → 1.4.0

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

@@ -0,0 +1,9 @@
+type __VLS_Props = {
+    open: boolean;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (args_0: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:open"?: ((args_0: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -1,25 +1,12 @@
 <script setup>
 import { computed } from "vue";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@revenexx/studio";
+import { formatShortcut } from "../../utils/shortcutLabel";
 const props = defineProps({
   label: { type: String, required: true },
   shortcut: { type: String, required: false }
 });
-const isMac = typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform ?? "");
-const keys = computed(() => {
-  if (!props.shortcut) return "";
-  const out = [];
-  for (const raw of props.shortcut.split("+")) {
-    const t = raw.toLowerCase();
-    if (t === "mod") out.push(isMac ? "\u2318" : "Ctrl");
-    else if (t === "shift") out.push("\u21E7");
-    else if (t === "alt") out.push(isMac ? "\u2325" : "Alt");
-    else if (t === "enter") out.push("\u21B5");
-    else if (t === "escape") out.push("Esc");
-    else out.push(t.toUpperCase());
-  }
-  return isMac ? out.join("") : out.join("+");
-});
+const keys = computed(() => props.shortcut ? formatShortcut(props.shortcut) : "");
 </script>
 
 <template>

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

@@ -3,6 +3,7 @@ import { computed } from "vue";
 import { Button } from "@revenexx/studio";
 import { IntegrationsApiError } from "../../utils/apiError";
 import { resolveLocalized } from "../../utils/localize";
+import { applyingFields, staleKeys } from "../../utils/settingCondition";
 const props = defineProps({
   slug: { type: String, required: true },
   version: { type: String, required: true },
@@ -24,6 +25,13 @@ const q = useNodeConfigResolve({
   dependsOn: () => props.field.dependsOn
 });
 const resolvedFields = computed(() => q.data.value?.fields ?? []);
+const applyingResolvedFields = computed(() => applyingFields(resolvedFields.value, props.config));
+function writeResolved(key, value) {
+  emit("set", key, value);
+  const after = { ...props.config, [key]: value };
+  for (const stale of staleKeys(resolvedFields.value, key, after))
+    emit("set", stale, void 0);
+}
 </script>
 
 <template>
@@ -67,7 +75,7 @@ const resolvedFields = computed(() => q.data.value?.fields ?? []);
       <legend class="px-1 text-mono text-muted-foreground">
         {{ resolveLocalized(field.label) }}
       </legend>
-      <template v-for="f in resolvedFields" :key="f.key">
+      <template v-for="f in applyingResolvedFields" :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">
           {{ t("integration.nodeConfig.dynamicSchema.fieldCollision", { key: f.key }) }}
@@ -89,7 +97,7 @@ const resolvedFields = computed(() => q.data.value?.fields ?? []);
           :static-keys="staticKeys"
           :sibling-fields="resolvedFields"
           :depth="(depth ?? 0) + 1"
-          @set="(k, v) => emit('set', k, v)"
+          @set="writeResolved"
         />
       </template>
 

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

@@ -1,4 +1,4 @@
-import type { ConfigField, WorkflowVariable } from '../../types/integrations.js';
+import type { ConfigField, WorkflowStateNamespace, WorkflowStateRole, WorkflowStateVisibility, WorkflowVariable } from '../../types/integrations.js';
 type __VLS_Props = {
     field: ConfigField;
     config: Record<string, unknown>;
@@ -11,6 +11,8 @@ type __VLS_Props = {
     siblingFields?: ConfigField[];
     depth?: number;
     variables?: Record<string, WorkflowVariable>;
+    /** The workflow's declared state namespaces — the options a `state-ref` offers. */
+    stateNamespaces?: WorkflowStateNamespace[];
     upstreamOutputs?: Array<{
         nodeId: string;
         nodeName?: string;
@@ -19,10 +21,22 @@ type __VLS_Props = {
     }>;
     /** Why the last save refused this setting, if it did. */
     refused?: string;
+    /**
+     * The 1-based row this setting sits in, when it is a sub-setting of a list
+     * row — set only by the list branch below, rendering itself.
+     *
+     * It is what keeps a repeating control nameable: the visible label repeats
+     * per row, so every row's control would otherwise answer to the same name
+     * (specs/accessibility.md AC-1). With it, each says which setting AND which
+     * row it belongs to.
+     */
+    rowIndex?: number;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     set: (key: string, value: unknown) => any;
+    "declare-state": (namespace: string, role: WorkflowStateRole, visibility: WorkflowStateVisibility) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onSet?: ((key: string, value: unknown) => any) | undefined;
+    "onDeclare-state"?: ((namespace: string, role: WorkflowStateRole, visibility: WorkflowStateVisibility) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

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

@@ -15,7 +15,10 @@ import {
   Textarea
 } from "@revenexx/studio";
 import { resolveLocalized } from "../../utils/localize";
+import { fromModelValue, toItemValue, toModelValue } from "../../utils/selectOptions";
 import { credentialState } from "../../utils/credentialState";
+import { defaultsFor } from "../../utils/configDefaults";
+import { applyingFields, settingApplies, staleKeys } from "../../utils/settingCondition";
 const props = defineProps({
   field: { type: Object, required: true },
   config: { type: Object, required: true },
@@ -26,10 +29,12 @@ const props = defineProps({
   siblingFields: { type: Array, required: false },
   depth: { type: Number, required: false },
   variables: { type: Object, required: false },
+  stateNamespaces: { type: Array, required: false },
   upstreamOutputs: { type: Array, required: false },
-  refused: { type: String, required: false }
+  refused: { type: String, required: false },
+  rowIndex: { type: Number, required: false }
 });
-const emit = defineEmits(["set"]);
+const emit = defineEmits(["set", "declare-state"]);
 const t = useIntegrationsT();
 const value = computed(() => props.config[props.field.key]);
 function write(v) {
@@ -37,6 +42,11 @@ function write(v) {
 }
 const exprHint = "${{ \u2026 }}";
 const descriptionText = computed(() => resolveLocalized(props.field.description));
+const inRow = computed(() => props.rowIndex !== void 0);
+const controlName = computed(() => {
+  const label = resolveLocalized(props.field.label);
+  return inRow.value ? t("integration.nodeConfig.array.subFieldAria", { label, n: props.rowIndex }) : label;
+});
 function isEmpty(v) {
   return v === void 0 || v === null || v === "" || Array.isArray(v) && v.length === 0;
 }
@@ -106,12 +116,12 @@ const credOptions = computed(
   () => credsForField(props.field).map((c) => ({ credential: c, state: credentialState(c) }))
 );
 const UNKNOWN_CREDENTIAL = computed(() => t("integration.nodeConfig.credential.unknown"));
-function credTriggerLabel(field) {
-  const label = resolveLocalized(field.label);
+const credTriggerLabel = computed(() => {
+  const label = controlName.value;
   if (bound.value) return t("integration.nodeConfig.credential.trigger.bound", { label, name: bound.value.credential.name, state: bound.value.state.label });
   if (value.value && credentialsLoaded.value) return t("integration.nodeConfig.credential.trigger.unknown", { label, unknown: UNKNOWN_CREDENTIAL.value });
   return label;
-}
+});
 const credCreateOpen = ref(false);
 const sftpImportOpen = ref(false);
 const CRED_ACTION_NEW = "__action_new_credential__";
@@ -127,6 +137,30 @@ function onCredentialSelect(v) {
   }
   write(v);
 }
+const stateOptions = computed(() => {
+  const role = props.field.stateRole;
+  const declared = props.stateNamespaces ?? [];
+  const list = role ? declared.filter((n) => n.role === role) : declared;
+  const selected = value.value;
+  if (typeof selected === "string" && selected && !list.some((n) => n.namespace === selected)) {
+    return [{ namespace: selected, role: role ?? "mapping", visibility: void 0 }, ...list];
+  }
+  return list;
+});
+const stateTakenNames = computed(() => (props.stateNamespaces ?? []).map((n) => n.namespace));
+const stateCreateOpen = ref(false);
+const STATE_ACTION_NEW = "__action_new_state_namespace__";
+function onStateSelect(v) {
+  if (v === STATE_ACTION_NEW) {
+    stateCreateOpen.value = true;
+    return;
+  }
+  write(v);
+}
+function onStateDeclared(namespace, role, visibility) {
+  emit("declare-state", namespace, role, visibility);
+  write(namespace);
+}
 function acceptsSftp(field) {
   const t2 = field.credentialType;
   return t2 === "revenexx:sftp" || Array.isArray(t2) && t2.includes("revenexx:sftp");
@@ -242,17 +276,36 @@ function writeJson(text) {
 function readArray() {
   return Array.isArray(value.value) ? value.value : [];
 }
+const rowKeys = ref([]);
+let nextRowKey = 0;
+watch(() => readArray().length, (n) => {
+  while (rowKeys.value.length < n) rowKeys.value.push(nextRowKey++);
+  if (rowKeys.value.length > n) rowKeys.value.splice(n);
+}, { immediate: true });
 function pushArrayItem(defaultItem) {
   write([...readArray(), defaultItem]);
 }
+function newRow() {
+  const declared = props.field.items?.properties ?? [];
+  const row = defaultsFor(declared);
+  for (; ; ) {
+    const withdrawn = declared.filter((f) => f.key in row && !settingApplies(f, row));
+    if (!withdrawn.length) return row;
+    for (const f of withdrawn) delete row[f.key];
+  }
+}
 function removeArrayItem(index) {
   const arr = readArray().slice();
   arr.splice(index, 1);
+  rowKeys.value.splice(index, 1);
   write(arr);
 }
 function setArrayItemField(index, fieldKey, v) {
   const arr = readArray().slice();
-  arr[index] = { ...arr[index] ?? {}, [fieldKey]: v };
+  const after = { ...arr[index] ?? {}, [fieldKey]: v };
+  for (const key of staleKeys(props.field.items?.properties ?? [], fieldKey, after))
+    delete after[key];
+  arr[index] = after;
   write(arr);
 }
 </script>
@@ -326,7 +379,7 @@ function setArrayItemField(index, fieldKey, v) {
 
     <template v-else-if="isJsonField">
       <Textarea
-        :aria-label="resolveLocalized(field.label)"
+        :aria-label="controlName"
         :model-value="jsonDraft"
         :rows="8"
         spellcheck="false"
@@ -343,14 +396,14 @@ function setArrayItemField(index, fieldKey, v) {
         <!-- A repeating row has no room for visible labels, so each control
              names itself and says which row of which field it belongs to. -->
         <Input
-          :aria-label="t('integration.nodeConfig.object.row.keyAria', { label: resolveLocalized(field.label), n: idx + 1 })"
+          :aria-label="t('integration.nodeConfig.object.row.keyAria', { label: controlName, n: idx + 1 })"
           :model-value="row.key"
           :placeholder="t('integration.nodeConfig.object.row.keyPlaceholder')"
           class="h-7 w-[38%] rounded-md border border-black/[0.08] ring-0 shadow-none bg-white text-sm"
           @update:model-value="(v) => setKvRow(idx, { key: String(v) })"
         />
         <Input
-          :aria-label="t('integration.nodeConfig.object.row.valueAria', { label: resolveLocalized(field.label), n: idx + 1 })"
+          :aria-label="t('integration.nodeConfig.object.row.valueAria', { label: controlName, n: idx + 1 })"
           :model-value="row.value"
           :placeholder="t('integration.nodeConfig.object.row.valuePlaceholder')"
           class="h-7 min-w-0 flex-1 rounded-md border border-black/[0.08] ring-0 shadow-none bg-white text-sm"
@@ -358,7 +411,7 @@ function setArrayItemField(index, fieldKey, v) {
         />
         <button
           type="button"
-          :aria-label="t('integration.nodeConfig.object.row.removeAria', { label: resolveLocalized(field.label), n: idx + 1 })"
+          :aria-label="t('integration.nodeConfig.object.row.removeAria', { label: controlName, n: idx + 1 })"
           class="flex size-6 shrink-0 items-center justify-center rounded text-muted-foreground transition hover:text-rose-600"
           @click="removeKvRow(idx)"
         >
@@ -385,16 +438,22 @@ function setArrayItemField(index, fieldKey, v) {
       :variables="variables"
       :upstream-outputs="upstreamOutputs"
       :invalid="invalid"
-      :label="resolveLocalized(field.label)"
+      :label="controlName"
       :multiline="isMultiline"
       @update:model-value="(v) => write(v)"
     />
 
     <!-- dynamic options — resolved at author time via config:resolve. Ahead of
          the generic expression branch so a dynamic select with
-         expressionAllowed still renders as a dropdown by default. -->
+         expressionAllowed still renders as a dropdown by default.
+
+         Not inside a list row: the resolve request carries the config the
+         setting belongs to, and a row is not that config — the platform would
+         be asked about a set of values it has never heard of. No published node
+         declares one there; a row's setting is drawn from what it declares
+         instead (specs/node-configuration.md, ## Gaps). -->
     <IntegrationsNodeConfigDynamicField
-      v-else-if="field.dynamic"
+      v-else-if="field.dynamic && !inRow"
       :slug="slug"
       :version="version"
       :field="field"
@@ -412,7 +471,7 @@ function setArrayItemField(index, fieldKey, v) {
       :variables="variables"
       :upstream-outputs="upstreamOutputs"
       :invalid="invalid"
-      :label="resolveLocalized(field.label)"
+      :label="controlName"
       :multiline="isMultiline"
       @update:model-value="(v) => write(v)"
     />
@@ -426,7 +485,7 @@ function setArrayItemField(index, fieldKey, v) {
          shared control sizes itself to its content and ignores it. -->
     <Textarea
       v-else-if="field.type === 'string' && isMultiline"
-      :aria-label="resolveLocalized(field.label)"
+      :aria-label="controlName"
       :model-value="value ?? ''"
       :placeholder="resolveLocalized(field.placeholder)"
       :rows="4"
@@ -438,7 +497,7 @@ function setArrayItemField(index, fieldKey, v) {
     <!-- plain string (no expressions) -->
     <Input
       v-else-if="field.type === 'string'"
-      :aria-label="resolveLocalized(field.label)"
+      :aria-label="controlName"
       :model-value="value ?? ''"
       :placeholder="resolveLocalized(field.placeholder)"
       class="h-8 rounded-md border border-black/[0.08] ring-0 shadow-none text-sm bg-white"
@@ -449,7 +508,7 @@ function setArrayItemField(index, fieldKey, v) {
     <!-- number -->
     <Input
       v-else-if="field.type === 'number'"
-      :aria-label="resolveLocalized(field.label)"
+      :aria-label="controlName"
       type="number"
       :model-value="value ?? ''"
       class="h-8 rounded-md border border-black/[0.08] ring-0 shadow-none text-sm bg-white"
@@ -460,7 +519,7 @@ function setArrayItemField(index, fieldKey, v) {
     <!-- boolean -->
     <div v-else-if="field.type === 'boolean'" class="flex items-center gap-2 pt-1">
       <Switch
-        :aria-label="resolveLocalized(field.label)"
+        :aria-label="controlName"
         class="data-[state=unchecked]:bg-slate-300"
         :model-value="Boolean(value)"
         @update:model-value="(v) => write(v)"
@@ -470,9 +529,12 @@ function setArrayItemField(index, fieldKey, v) {
       </span>
     </div>
 
-    <!-- dynamic schema — child fields resolved at author time, written into the flat config -->
+    <!-- dynamic schema — child fields resolved at author time, written into the
+         flat config. Withheld inside a list row for the same reason as the
+         branch above, and one more: the fields it resolves are written into the
+         node's flat config, which a row is not. -->
     <IntegrationsNodeConfigDynamicSchema
-      v-else-if="field.type === 'dynamic-schema'"
+      v-else-if="field.type === 'dynamic-schema' && !inRow"
       :slug="slug"
       :version="version"
       :field="field"
@@ -486,21 +548,21 @@ function setArrayItemField(index, fieldKey, v) {
     <!-- select -->
     <Select
       v-else-if="field.type === 'select'"
-      :model-value="value ?? ''"
-      @update:model-value="(v) => write(v)"
+      :model-value="toModelValue(value, field.options)"
+      @update:model-value="(v) => write(fromModelValue(v))"
     >
-      <SelectTrigger :aria-label="resolveLocalized(field.label)" size="sm" class="h-8 w-full rounded-md border border-black/[0.08] ring-0 shadow-none text-sm bg-white">
+      <SelectTrigger :aria-label="controlName" size="sm" class="h-8 w-full rounded-md border border-black/[0.08] ring-0 shadow-none text-sm bg-white">
         <SelectValue :placeholder="resolveLocalized(field.placeholder) || t('integration.nodeConfig.select.placeholder')" />
       </SelectTrigger>
       <SelectContent>
-        <SelectItem v-for="opt in field.options ?? []" :key="String(opt.value)" :value="String(opt.value)">
+        <SelectItem v-for="opt in field.options ?? []" :key="String(opt.value)" :value="toItemValue(opt.value)">
           {{ resolveLocalized(opt.label) }}
         </SelectItem>
       </SelectContent>
     </Select>
 
     <!-- multiselect — pill toggles for now -->
-    <div v-else-if="field.type === 'multiselect'" role="group" :aria-label="resolveLocalized(field.label)" class="flex flex-wrap gap-1">
+    <div v-else-if="field.type === 'multiselect'" role="group" :aria-label="controlName" class="flex flex-wrap gap-1">
       <button
         v-for="opt in field.options ?? []"
         :key="String(opt.value)"
@@ -523,7 +585,7 @@ function setArrayItemField(index, fieldKey, v) {
       :model-value="value ?? ''"
       @update:model-value="(v) => write(v)"
     >
-      <SelectTrigger :aria-label="resolveLocalized(field.label)" size="sm" class="h-8 w-full rounded-md border border-black/[0.08] ring-0 shadow-none text-sm bg-white">
+      <SelectTrigger :aria-label="controlName" size="sm" class="h-8 w-full rounded-md border border-black/[0.08] ring-0 shadow-none text-sm bg-white">
         <SelectValue :placeholder="t('integration.nodeConfig.secretRef.placeholder')" />
       </SelectTrigger>
       <SelectContent>
@@ -539,7 +601,7 @@ function setArrayItemField(index, fieldKey, v) {
         :model-value="value ?? ''"
         @update:model-value="(v) => onCredentialSelect(v)"
       >
-        <SelectTrigger :aria-label="credTriggerLabel(field)" size="sm" class="h-8 w-full rounded-md border border-black/[0.08] ring-0 shadow-none text-sm bg-white">
+        <SelectTrigger :aria-label="credTriggerLabel" size="sm" class="h-8 w-full rounded-md border border-black/[0.08] ring-0 shadow-none text-sm bg-white">
           <!-- The trigger renders the bound credential itself instead of letting
                `SelectValue` echo the chosen row. Left to itself it shows that row's
                `textContent`, which glues the name and the state pill into one word —
@@ -619,11 +681,50 @@ function setArrayItemField(index, fieldKey, v) {
       />
     </template>
 
+    <!-- state-ref — pick one of the workflow's declared namespaces of this
+         field's role. Declaring lives INSIDE the picker, like creating a
+         credential does: a picker whose list is empty must not be a dead end
+         that sends the author to another dialog and back. -->
+    <template v-else-if="field.type === 'state-ref'">
+      <Select
+        :model-value="value ?? ''"
+        @update:model-value="(v) => onStateSelect(v)"
+      >
+        <SelectTrigger :aria-label="controlName" size="sm" class="h-8 w-full rounded-md border border-black/[0.08] ring-0 shadow-none text-sm bg-white">
+          <SelectValue :placeholder="t('integration.nodeConfig.state.placeholder')" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem v-for="o in stateOptions" :key="o.namespace" :value="o.namespace">
+            <span class="flex items-center gap-1.5">
+              <span class="min-w-0 truncate font-mono">{{ o.namespace }}</span>
+              <span
+                v-if="o.visibility === 'shared'"
+                class="shrink-0 rounded-full border px-1.5 py-px text-[10px] font-medium text-muted-foreground"
+              >{{ t("integration.workflows.state.visibility.shared.label") }}</span>
+            </span>
+          </SelectItem>
+          <div v-if="!stateOptions.length" class="px-2 py-1.5 text-sm text-muted-foreground">
+            {{ t("integration.nodeConfig.state.empty") }}
+          </div>
+          <SelectSeparator />
+          <SelectItem :value="STATE_ACTION_NEW" class="font-medium text-violet-600 data-[highlighted]:text-violet-700">
+            {{ t("integration.nodeConfig.state.action.new") }}
+          </SelectItem>
+        </SelectContent>
+      </Select>
+      <IntegrationsStateNamespaceCreateDialog
+        v-model:open="stateCreateOpen"
+        :role="field.stateRole ?? 'mapping'"
+        :taken="stateTakenNames"
+        @declared="onStateDeclared"
+      />
+    </template>
+
     <!-- array of objects (e.g. headers / mappings) -->
     <div v-else-if="field.type === 'array' && field.items?.type === 'object'" class="space-y-2">
       <div
         v-for="(item, idx) in readArray()"
-        :key="idx"
+        :key="rowKeys[idx] ?? idx"
         class="rounded-md border border-black/[0.06] bg-muted/20 p-2 space-y-1.5"
       >
         <div class="flex items-center justify-between">
@@ -632,39 +733,47 @@ function setArrayItemField(index, fieldKey, v) {
           </span>
           <button
             type="button"
-            :aria-label="t('integration.nodeConfig.array.removeItemAria', { label: resolveLocalized(field.label), n: idx + 1 })"
+            :aria-label="t('integration.nodeConfig.array.removeItemAria', { label: controlName, n: idx + 1 })"
             class="flex size-5 items-center justify-center rounded text-muted-foreground hover:text-rose-600"
             @click="removeArrayItem(idx)"
           >
             <TrashBin :size="11" />
           </button>
         </div>
-        <div
-          v-for="sub in field.items.properties ?? []"
+        <!-- Each sub-setting is drawn by this same component, one level down,
+             the way a dynamic-schema child is: the row is its config, its own
+             `key` addresses its value in it, and what it declares — a list of
+             options, a switch, a description, a required marker — decides the
+             control, instead of every one of them being a text box.
+
+             `refused` is deliberately not handed down: it says why the LAST
+             SAVE refused this setting as a whole, so passing it on would mark
+             every sub-control of every row red with a sentence about a
+             different value. -->
+        <IntegrationsNodeConfigField
+          v-for="sub in applyingFields(field.items.properties ?? [], item ?? {})"
           :key="sub.key"
-          class="space-y-1"
-        >
-          <Label class="text-mono text-muted-foreground">
-            {{ resolveLocalized(sub.label) }}
-          </Label>
-          <!-- The label above repeats per item, so it cannot own an id; the
-               input carries its own name including the item number. -->
-          <Input
-            :aria-label="t('integration.nodeConfig.array.subFieldAria', { label: resolveLocalized(sub.label), n: idx + 1 })"
-            :model-value="item[sub.key] ?? ''"
-            :placeholder="resolveLocalized(sub.placeholder)"
-            class="h-7 text-sm bg-white"
-            :class="sub.type === 'expression' ? 'font-mono' : ''"
-            @update:model-value="(v) => setArrayItemField(idx, sub.key, v)"
-          />
-        </div>
+          :field="sub"
+          :config="item"
+          :slug="slug"
+          :version="version"
+          :secret-keys="secretKeys"
+          :static-keys="staticKeys"
+          :depth="(depth ?? 0) + 1"
+          :variables="variables"
+          :state-namespaces="stateNamespaces"
+          :upstream-outputs="upstreamOutputs"
+          :row-index="idx + 1"
+          @set="(k, v) => setArrayItemField(idx, k, v)"
+          @declare-state="(ns, role, visibility) => emit('declare-state', ns, role, visibility)"
+        />
       </div>
       <Button
         type="button"
         variant="outline"
         size="sm"
         class="h-7 text-sm w-full"
-        @click="pushArrayItem(Object.fromEntries((field.items?.properties ?? []).map((p) => [p.key, ''])))"
+        @click="pushArrayItem(newRow())"
       >
         <Plus :size="11" />
         {{ t("integration.nodeConfig.action.addRow") }}
@@ -674,7 +783,7 @@ function setArrayItemField(index, fieldKey, v) {
     <!-- fallback: JSON textarea for complex types -->
     <Textarea
       v-else
-      :aria-label="resolveLocalized(field.label)"
+      :aria-label="controlName"
       :model-value="value === void 0 ? '' : JSON.stringify(value, null, 2)"
       rows="3"
       class="rounded-md border border-black/[0.08] ring-0 shadow-none text-sm font-mono bg-white"

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

@@ -1,4 +1,4 @@
-import type { ConfigField, WorkflowVariable } from '../../types/integrations.js';
+import type { ConfigField, WorkflowStateNamespace, WorkflowStateRole, WorkflowStateVisibility, WorkflowVariable } from '../../types/integrations.js';
 type __VLS_Props = {
     field: ConfigField;
     config: Record<string, unknown>;
@@ -11,6 +11,8 @@ type __VLS_Props = {
     siblingFields?: ConfigField[];
     depth?: number;
     variables?: Record<string, WorkflowVariable>;
+    /** The workflow's declared state namespaces — the options a `state-ref` offers. */
+    stateNamespaces?: WorkflowStateNamespace[];
     upstreamOutputs?: Array<{
         nodeId: string;
         nodeName?: string;
@@ -19,10 +21,22 @@ type __VLS_Props = {
     }>;
     /** Why the last save refused this setting, if it did. */
     refused?: string;
+    /**
+     * The 1-based row this setting sits in, when it is a sub-setting of a list
+     * row — set only by the list branch below, rendering itself.
+     *
+     * It is what keeps a repeating control nameable: the visible label repeats
+     * per row, so every row's control would otherwise answer to the same name
+     * (specs/accessibility.md AC-1). With it, each says which setting AND which
+     * row it belongs to.
+     */
+    rowIndex?: number;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     set: (key: string, value: unknown) => any;
+    "declare-state": (namespace: string, role: WorkflowStateRole, visibility: WorkflowStateVisibility) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onSet?: ((key: string, value: unknown) => any) | undefined;
+    "onDeclare-state"?: ((namespace: string, role: WorkflowStateRole, visibility: WorkflowStateVisibility) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

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

@@ -1,9 +1,11 @@
-import type { NodeManifestOutput, WorkflowEdge, WorkflowNode, WorkflowTrigger, WorkflowVariable } from '../../types/integrations.js';
+import type { NodeManifestOutput, WorkflowEdge, WorkflowNode, WorkflowStateNamespace, WorkflowStateRole, WorkflowStateVisibility, WorkflowTrigger, WorkflowVariable } from '../../types/integrations.js';
 type __VLS_Props = {
     /** Either a workflow node OR a trigger. Distinguished by presence of `nodeSlug`. */
     selection: WorkflowNode | WorkflowTrigger | null;
     secretKeys: string[];
     variables?: Record<string, WorkflowVariable>;
+    /** The workflow's declared state namespaces — options for `state-ref` fields. */
+    stateNamespaces?: WorkflowStateNamespace[];
     upstreamOutputs?: Array<{
         nodeId: string;
         nodeName?: string;
@@ -31,11 +33,13 @@ declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {
     update: (next: WorkflowTrigger | WorkflowNode) => any;
     remove: () => any;
     close: () => any;
+    "declare-state": (namespace: string, role: WorkflowStateRole, visibility: WorkflowStateVisibility) => any;
     navigate: (id: string) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onUpdate?: ((next: WorkflowTrigger | WorkflowNode) => any) | undefined;
     onRemove?: (() => any) | undefined;
     onClose?: (() => any) | undefined;
+    "onDeclare-state"?: ((namespace: string, role: WorkflowStateRole, visibility: WorkflowStateVisibility) => any) | undefined;
     onNavigate?: ((id: string) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;