@revenexx/studio-integrations 0.1.3 → 0.2.0

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

@@ -0,0 +1,222 @@
+<script setup>
+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";
+const props = defineProps({
+  id: { type: String, required: true },
+  data: { type: Object, required: true },
+  selected: { type: Boolean, required: false }
+});
+defineEmits(["updateNodeInternals"]);
+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" }
+];
+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 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 startRename() {
+  if (!editable.value) return;
+  draft.value = label.value;
+  editing.value = true;
+  void nextTick(() => inputEl.value?.focus());
+}
+function commitRename() {
+  if (!editing.value) return;
+  editing.value = false;
+  const next = draft.value.trim();
+  if (next && next !== label.value) props.data.actions?.rename(next);
+}
+const hovered = ref(false);
+let hoverTimer = null;
+function onHoverEnter() {
+  if (hoverTimer) clearTimeout(hoverTimer);
+  hovered.value = true;
+}
+function onHoverLeave() {
+  if (hoverTimer) clearTimeout(hoverTimer);
+  hoverTimer = setTimeout(() => {
+    hovered.value = false;
+  }, 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 flow = useVueFlow();
+const resizing = ref(false);
+const liveW = ref(0);
+const liveH = ref(0);
+let resizeStart = { x: 0, y: 0, w: 0, h: 0 };
+const frameW = computed(() => resizing.value ? liveW.value : props.data.rect.width);
+const frameH = computed(() => resizing.value ? liveH.value : props.data.rect.height);
+function onResizeStart(e) {
+  e.stopPropagation();
+  e.preventDefault();
+  resizing.value = true;
+  liveW.value = props.data.rect.width;
+  liveH.value = props.data.rect.height;
+  resizeStart = { x: e.clientX, y: e.clientY, w: liveW.value, h: liveH.value };
+  e.target.setPointerCapture(e.pointerId);
+}
+function onResizeMove(e) {
+  if (!resizing.value) return;
+  const zoom = flow.viewport.value.zoom || 1;
+  liveW.value = Math.max(150, Math.round(resizeStart.w + (e.clientX - resizeStart.x) / zoom));
+  liveH.value = Math.max(90, Math.round(resizeStart.h + (e.clientY - resizeStart.y) / zoom));
+}
+function onResizeEnd() {
+  if (!resizing.value) return;
+  resizing.value = false;
+  props.data.actions?.resize({ width: liveW.value, height: liveH.value });
+}
+</script>
+
+<template>
+  <div class="relative">
+  <NodeToolbar :is-visible="toolbarVisible" :position="Position.Top" :offset="8">
+    <div
+      class="flex items-center gap-1 rounded-lg border border-black/[0.06] bg-white px-1.5 py-1 shadow-md"
+      @mouseenter="onHoverEnter"
+      @mouseleave="onHoverLeave"
+    >
+      <button
+        v-for="(c, i) in GROUP_COLORS"
+        :key="i"
+        type="button"
+        class="size-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' }"
+        @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'"
+        @click="data.actions?.toggleCollapse()"
+      >
+        <component :is="collapsed ? ChevronsUpDown : ChevronsDownUp" :size="13" />
+      </button>
+      <button
+        type="button"
+        class="flex size-6 items-center justify-center rounded-md text-muted-foreground transition hover:bg-muted/50 hover:text-foreground"
+        title="Ungroup (keep the nodes)"
+        @click="data.actions?.ungroup()"
+      >
+        <Ungroup :size="13" />
+      </button>
+      <button
+        type="button"
+        class="flex size-6 items-center justify-center rounded-md text-muted-foreground transition hover:bg-rose-50 hover:text-rose-600"
+        title="Remove group frame"
+        @click="data.actions?.ungroup()"
+      >
+        <Trash2 :size="13" />
+      </button>
+    </div>
+  </NodeToolbar>
+
+  <!-- Collapsed: compact stand-in card with generic edge handles. -->
+  <template v-if="collapsed">
+    <Handle
+      id="__in__top"
+      type="target"
+      :position="Position.Top"
+      class="!size-3 !rounded-full !border-2 !border-white !bg-slate-500 !shadow-sm"
+    />
+    <div
+      class="w-[220px] rounded-lg border-2 bg-white transition-all duration-150"
+      :style="{ borderColor: color.border }"
+      :class="selected ? 'shadow-[0_0_0_2px_rgba(59,130,246,0.2)]' : 'shadow-sm hover:shadow-md'"
+      @mouseenter="onHoverEnter"
+      @mouseleave="onHoverLeave"
+      @dblclick.stop="data.actions?.toggleCollapse()"
+    >
+      <div class="flex items-center gap-2.5 px-3 py-2.5">
+        <span class="flex size-8 shrink-0 items-center justify-center rounded-md text-white" :style="{ backgroundColor: color.chip }">
+          <ChevronsUpDown :size="15" />
+        </span>
+        <div class="min-w-0 flex-1">
+          <div class="truncate text-sm font-semibold leading-tight text-foreground">{{ label }}</div>
+          <div class="mt-0.5 text-sm text-muted-foreground">{{ memberCountText }}</div>
+        </div>
+      </div>
+    </div>
+    <Handle
+      id="default__bottom"
+      type="source"
+      :position="Position.Bottom"
+      class="!size-3 !rounded-full !border-2 !border-white !bg-slate-500 !shadow-sm"
+    />
+  </template>
+
+  <!-- Expanded: the frame behind the members. -->
+  <div
+    v-else
+    class="pointer-events-none relative rounded-xl border-2 border-dashed transition-colors"
+    :class="selected ? 'shadow-[0_0_0_2px_rgba(59,130,246,0.15)]' : ''"
+    :style="{
+  width: `${frameW}px`,
+  height: `${frameH}px`,
+  backgroundColor: color.bg,
+  borderColor: color.border
+}"
+  >
+    <div
+      class="pointer-events-auto flex cursor-grab items-center gap-1.5 px-3 pt-1.5 active:cursor-grabbing"
+      @mouseenter="onHoverEnter"
+      @mouseleave="onHoverLeave"
+    >
+      <input
+        v-if="editing"
+        ref="inputEl"
+        v-model="draft"
+        class="nodrag w-40 rounded border border-black/[0.1] bg-white px-1 py-0.5 text-sm font-semibold focus:outline-none focus:ring-2 focus:ring-primary/40"
+        @blur="commitRename"
+        @keydown.enter.prevent="commitRename"
+        @keydown.stop
+        @mousedown.stop
+      >
+      <span
+        v-else
+        class="select-none text-sm font-semibold"
+        :style="{ color: color.chip }"
+        @dblclick.stop="startRename"
+      >
+        {{ label }}
+      </span>
+      <span class="select-none text-xs text-muted-foreground">· {{ memberCountText }}</span>
+    </div>
+
+    <!-- Bottom-right resize handle (editable frames only). -->
+    <div
+      v-if="editable"
+      class="nodrag pointer-events-auto absolute bottom-0 right-0 flex size-5 cursor-se-resize items-end justify-end p-1"
+      :style="{ color: color.chip }"
+      title="Resize group"
+      @pointerdown="onResizeStart"
+      @pointermove="onResizeMove"
+      @pointerup="onResizeEnd"
+      @pointercancel="onResizeEnd"
+    >
+      <svg viewBox="0 0 8 8" class="size-2.5" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round">
+        <path d="M7 1 1 7" />
+        <path d="M7 4.5 4.5 7" />
+      </svg>
+    </div>
+  </div>
+  </div>
+</template>

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

@@ -0,0 +1,28 @@
+import type { WorkflowGroup } from '../../types/integrations.js';
+interface GroupNodeData {
+    group: WorkflowGroup;
+    /** Derived frame size (expanded mode). */
+    rect: {
+        width: number;
+        height: number;
+    };
+    memberCount: number;
+    /** Absent in read-only previews — no toolbar, no editing. */
+    actions?: {
+        rename: (label: string) => void;
+        setColor: (i: number) => void;
+        toggleCollapse: () => void;
+        ungroup: () => void;
+        resize: (size: {
+            width: number;
+            height: number;
+        }) => void;
+    };
+}
+type __VLS_Props = {
+    id: string;
+    data: GroupNodeData;
+    selected?: boolean;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,14 @@
+import type { ConfigField } from '../../types/integrations.js';
+type __VLS_Props = {
+    slug: string;
+    version: string;
+    field: ConfigField;
+    config: Record<string, unknown>;
+    modelValue: unknown;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: unknown) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: unknown) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,184 @@
+<script setup>
+import { computed, ref } from "vue";
+import { ChevronDown } from "lucide-vue-next";
+import { Input } from "@revenexx/studio";
+const props = defineProps({
+  slug: { type: String, required: true },
+  version: { type: String, required: true },
+  field: { type: Object, required: true },
+  config: { type: Object, required: true },
+  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 search = ref("");
+const focused = ref(false);
+const q = useNodeConfigResolve({
+  slug: () => props.slug,
+  version: () => props.version,
+  target: () => props.field.key,
+  config: () => props.config,
+  dependsOn: () => props.field.dependsOn,
+  search: () => focused.value ? search.value : ""
+});
+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";
+const currentValue = computed(() => String(props.modelValue ?? ""));
+const currentKnown = computed(
+  () => options.value.some((o) => String(o.value) === currentValue.value)
+);
+const currentLabel = computed(() => {
+  const hit = options.value.find((o) => String(o.value) === currentValue.value);
+  return hit ? labelText(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)
+  );
+  return hits.length ? hits : options.value;
+});
+function onComboFocus() {
+  search.value = "";
+  focused.value = true;
+}
+function onComboBlur() {
+  focused.value = false;
+}
+function pick(value) {
+  emit("update:modelValue", value);
+  search.value = "";
+  focused.value = false;
+}
+const selectedArray = computed(
+  () => Array.isArray(props.modelValue) ? props.modelValue.map(String) : []
+);
+const knownValues = computed(() => new Set(options.value.map((o) => String(o.value))));
+const missingValues = computed(() => selectedArray.value.filter((v) => !knownValues.value.has(v)));
+const multiFilter = ref("");
+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)
+  );
+});
+function toggleMulti(optValue) {
+  const arr = selectedArray.value;
+  const has = arr.includes(optValue);
+  emit("update:modelValue", has ? arr.filter((v) => v !== optValue) : [...arr, optValue]);
+}
+</script>
+
+<template>
+  <div>
+    <!-- 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>
+    </template>
+
+    <!-- first load: no data yet -->
+    <template v-else-if="q.isFetching.value && options.length === 0">
+      <div :class="disabledControlClass">resolving options…</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>
+        <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
+        </button>
+      </div>
+    </template>
+
+    <!-- multiselect — pill toggles with a client-side filter for long lists -->
+    <template v-else-if="isMulti">
+      <Input
+        v-if="options.length > 10"
+        v-model="multiFilter"
+        placeholder="Filter options"
+        class="mb-1.5 h-7 bg-white text-sm"
+      />
+      <div 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" }}
+        </span>
+        <button
+          v-for="opt in visibleMultiOptions"
+          :key="String(opt.value)"
+          type="button"
+          :disabled="q.isFetching.value"
+          class="rounded-md border border-black/[0.08] px-1.5 py-0.5 text-sm transition disabled:cursor-wait disabled:opacity-60"
+          :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) }}
+        </button>
+        <!-- stored values no longer offered — shown read-only so they stay visible -->
+        <span
+          v-for="m in missingValues"
+          :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)
+        </span>
+      </div>
+      <p v-if="q.isFetching.value && q.hasData.value" class="mt-1 text-sm text-muted-foreground">reloading…</p>
+    </template>
+
+    <!-- single select: searchable combobox; typing re-resolves with the term -->
+    <template v-else>
+      <div class="relative">
+        <Input
+          :model-value="focused ? search : currentLabel"
+          :placeholder="labelText(field.placeholder) || 'Pick one'"
+          class="h-8 bg-white pr-7 text-sm"
+          @update:model-value="(v) => {
+  search = String(v);
+}"
+          @focus="onComboFocus"
+          @blur="onComboBlur"
+        />
+        <ChevronDown :size="14" class="pointer-events-none absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground" />
+        <div
+          v-if="listOpen"
+          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" }}
+          </div>
+          <button
+            v-for="opt in visibleOptions"
+            :key="String(opt.value)"
+            type="button"
+            class="flex w-full items-center px-2.5 py-1.5 text-left text-sm hover:bg-muted/50"
+            :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>
+          </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" }}
+          </div>
+        </div>
+      </div>
+      <p v-if="currentValue !== '' && !currentKnown" class="mt-1 text-sm text-amber-600">
+        current value not in resolved options
+      </p>
+      <p v-if="q.isFetching.value && q.hasData.value && !focused" class="mt-1 text-sm text-muted-foreground">reloading…</p>
+    </template>
+  </div>
+</template>

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

@@ -0,0 +1,14 @@
+import type { ConfigField } from '../../types/integrations.js';
+type __VLS_Props = {
+    slug: string;
+    version: string;
+    field: ConfigField;
+    config: Record<string, unknown>;
+    modelValue: unknown;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: unknown) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: unknown) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,16 @@
+import type { ConfigField } from '../../types/integrations.js';
+type __VLS_Props = {
+    slug: string;
+    version: string;
+    field: ConfigField;
+    config: Record<string, unknown>;
+    staticKeys: string[];
+    secretKeys: string[];
+    depth?: number;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    set: (key: string, value: unknown) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSet?: ((key: string, value: unknown) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,102 @@
+<script setup>
+import { computed } from "vue";
+import { Button } from "@revenexx/studio";
+import { IntegrationsApiError } from "../../composables/integrationsApi";
+const props = defineProps({
+  slug: { type: String, required: true },
+  version: { type: String, required: true },
+  field: { type: Object, required: true },
+  config: { type: Object, required: true },
+  staticKeys: { type: Array, required: true },
+  secretKeys: { type: Array, required: true },
+  depth: { type: Number, required: false }
+});
+const emit = defineEmits(["set"]);
+void IntegrationsApiError;
+const MAX_DEPTH = 5;
+const q = useNodeConfigResolve({
+  slug: () => props.slug,
+  version: () => props.version,
+  target: () => "*",
+  config: () => props.config,
+  dependsOn: () => props.field.dependsOn
+});
+const resolvedFields = computed(() => q.data.value?.fields ?? []);
+function labelText(v) {
+  if (!v) return "";
+  return typeof v === "string" ? v : v.en ?? Object.values(v)[0] ?? "";
+}
+</script>
+
+<template>
+  <div>
+    <!-- gated: required dependencies still unset -->
+    <p v-if="q.gated.value" class="text-sm text-amber-600">
+      Set {{ q.unsatisfied.value.join(", ") }} first
+    </p>
+
+    <!-- first load: no fields yet -->
+    <p v-else-if="q.isFetching.value && !resolvedFields.length" class="text-sm text-muted-foreground">
+      Resolving fields…
+    </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>
+      <Button
+        type="button"
+        variant="outline"
+        size="sm"
+        class="h-6 px-1.5 text-mono text-muted-foreground"
+        @click="q.refetch()"
+      >
+        RETRY
+      </Button>
+    </div>
+
+    <!-- empty: resolved but no fields -->
+    <p v-else-if="!resolvedFields.length" class="text-sm text-muted-foreground">
+      No fields resolved.
+    </p>
+
+    <!-- fieldset: the resolved child fields, rendered into the flat node config -->
+    <fieldset
+      v-else
+      :disabled="q.isFetching.value"
+      :class="{ 'opacity-60': q.isFetching.value }"
+      class="space-y-3 rounded-md border border-black/[0.08] bg-muted/10 p-3 m-0"
+    >
+      <legend class="px-1 text-mono text-muted-foreground">
+        {{ labelText(field.label) }}
+      </legend>
+      <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
+        </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
+        </p>
+
+        <!-- a resolved field, rendered exactly like a static node config field -->
+        <IntegrationsNodeConfigField
+          v-else
+          :field="f"
+          :config="config"
+          :slug="slug"
+          :version="version"
+          :secret-keys="secretKeys"
+          :static-keys="staticKeys"
+          :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…
+      </p>
+    </fieldset>
+  </div>
+</template>

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

@@ -0,0 +1,16 @@
+import type { ConfigField } from '../../types/integrations.js';
+type __VLS_Props = {
+    slug: string;
+    version: string;
+    field: ConfigField;
+    config: Record<string, unknown>;
+    staticKeys: string[];
+    secretKeys: string[];
+    depth?: number;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    set: (key: string, value: unknown) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSet?: ((key: string, value: unknown) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,23 @@
+import type { ConfigField, WorkflowVariable } from '../../types/integrations.js';
+type __VLS_Props = {
+    field: ConfigField;
+    config: Record<string, unknown>;
+    slug: string;
+    version: string;
+    secretKeys: string[];
+    staticKeys?: string[];
+    depth?: number;
+    variables?: Record<string, WorkflowVariable>;
+    upstreamOutputs?: Array<{
+        nodeId: string;
+        nodeName?: string;
+        output: string;
+        fields?: string[];
+    }>;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    set: (key: string, value: unknown) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSet?: ((key: string, value: unknown) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;