@revenexx/studio-integrations 0.1.4 → 0.3.0

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 "../../utils/apiError";
+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;