@revenexx/studio-integrations 0.1.3 → 0.2.0

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

@@ -0,0 +1,36 @@
+import type { Workflow, WorkflowIcon } from '../../types/integrations.js';
+export interface ExecutionModeOption {
+    value: string;
+    label: string;
+    hint: string;
+}
+type __VLS_Props = {
+    open: boolean;
+    workflow: Workflow;
+    modes: ExecutionModeOption[];
+    modeDraft: string;
+    savingMode?: boolean;
+    savingMeta?: boolean;
+    /** Tag suggestions (tags already used across the tenant's workflows). */
+    tagSuggestions?: string[];
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (args_0: boolean) => any;
+    "change-mode": (mode: string) => any;
+    "save-meta": (meta: {
+        name: string;
+        description: string;
+        tags: string[];
+        icon: WorkflowIcon | null;
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:open"?: ((args_0: boolean) => any) | undefined;
+    "onChange-mode"?: ((mode: string) => any) | undefined;
+    "onSave-meta"?: ((meta: {
+        name: string;
+        description: string;
+        tags: string[];
+        icon: WorkflowIcon | null;
+    }) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,136 @@
+<script setup>
+import { ref, watch } from "vue";
+import { RefreshCircle as Loader2 } from "#solar-icons";
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  Input,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Textarea
+} from "@revenexx/studio";
+import WorkflowIconPicker from "./WorkflowIconPicker.vue";
+import WorkflowTagsInput from "./WorkflowTagsInput.vue";
+const props = defineProps({
+  open: { type: Boolean, required: true },
+  workflow: { type: Object, required: true },
+  modes: { type: Array, required: true },
+  modeDraft: { type: String, required: true },
+  savingMode: { type: Boolean, required: false },
+  savingMeta: { type: Boolean, required: false },
+  tagSuggestions: { type: Array, required: false }
+});
+const emit = defineEmits(["update:open", "change-mode", "save-meta"]);
+const nameDraft = ref("");
+const descriptionDraft = ref("");
+const tagsDraft = ref([]);
+const iconDraft = ref(null);
+watch(() => props.open, (v) => {
+  if (!v) return;
+  nameDraft.value = props.workflow.name;
+  descriptionDraft.value = props.workflow.description ?? "";
+  tagsDraft.value = [...props.workflow.blob.tags ?? []];
+  iconDraft.value = props.workflow.blob.icon ?? null;
+}, { immediate: true });
+function formatDateTime(iso) {
+  if (!iso) return "\u2014";
+  try {
+    return new Date(iso).toLocaleString();
+  } catch {
+    return String(iso);
+  }
+}
+</script>
+
+<template>
+  <Dialog :open="open" @update:open="(v) => emit('update:open', v)">
+    <DialogContent class="sm:max-w-lg">
+      <DialogHeader>
+        <DialogTitle>Workflow settings</DialogTitle>
+        <DialogDescription class="text-sm">
+          Execution behavior and metadata for “{{ workflow.name }}”.
+        </DialogDescription>
+      </DialogHeader>
+
+      <div class="space-y-4 text-sm">
+        <div class="rounded-lg border border-black/[0.06] bg-white p-4 space-y-3">
+          <div class="text-mono text-muted-foreground">Execution</div>
+          <div class="flex items-center gap-2">
+            <Select
+              :model-value="modeDraft"
+              :disabled="savingMode"
+              @update:model-value="(v) => emit('change-mode', v)"
+            >
+              <SelectTrigger class="h-8 w-full bg-white text-sm">
+                <SelectValue placeholder="Pick a mode" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem v-for="m in modes" :key="m.value" :value="m.value">
+                  {{ m.label }}
+                </SelectItem>
+              </SelectContent>
+            </Select>
+            <Loader2 v-if="savingMode" :size="14" class="shrink-0 animate-spin text-muted-foreground" />
+          </div>
+          <p class="text-xs text-muted-foreground">
+            {{ modes.find((m2) => m2.value === modeDraft)?.hint }}
+          </p>
+        </div>
+
+        <div class="rounded-lg border border-black/[0.06] bg-white p-4 space-y-3">
+          <div class="text-mono text-muted-foreground">Appearance</div>
+          <div class="space-y-1.5">
+            <div class="text-sm text-muted-foreground">Name</div>
+            <Input v-model="nameDraft" class="bg-white" placeholder="Workflow name" />
+          </div>
+          <div class="space-y-1.5">
+            <div class="text-sm text-muted-foreground">Description</div>
+            <Textarea v-model="descriptionDraft" rows="2" class="bg-white" placeholder="What this workflow does and why it exists." />
+          </div>
+          <div class="space-y-1.5">
+            <div class="text-sm text-muted-foreground">Tags</div>
+            <WorkflowTagsInput v-model="tagsDraft" :suggestions="tagSuggestions ?? []" />
+          </div>
+          <div class="space-y-1.5">
+            <div class="text-sm text-muted-foreground">Icon</div>
+            <WorkflowIconPicker v-model="iconDraft" />
+          </div>
+          <div class="flex justify-end">
+            <Button
+              size="sm"
+              class="h-7 text-sm"
+              :disabled="savingMeta || !nameDraft.trim()"
+              @click="emit('save-meta', { name: nameDraft.trim(), description: descriptionDraft.trim(), tags: tagsDraft, icon: iconDraft })"
+            >
+              <Loader2 v-if="savingMeta" :size="12" class="animate-spin" />
+              Save changes
+            </Button>
+          </div>
+        </div>
+
+        <div class="rounded-lg border border-black/[0.06] bg-white p-4 space-y-2">
+          <div class="text-mono text-muted-foreground">Metadata</div>
+          <div class="grid grid-cols-[110px_1fr] gap-x-3 gap-y-2">
+            <span class="text-muted-foreground">ID</span>
+            <span class="font-mono">{{ workflow.id }}</span>
+            <span class="text-muted-foreground">Definition</span>
+            <span class="font-mono">{{ workflow.blob_definition_version }}</span>
+            <span class="text-muted-foreground">Revision</span>
+            <span class="font-mono">r{{ workflow.revision }}</span>
+            <span class="text-muted-foreground">Created</span>
+            <span>{{ formatDateTime(workflow.created_at) }}</span>
+            <span class="text-muted-foreground">Updated</span>
+            <span>{{ formatDateTime(workflow.updated_at) }}</span>
+          </div>
+        </div>
+      </div>
+    </DialogContent>
+  </Dialog>
+</template>

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

@@ -0,0 +1,36 @@
+import type { Workflow, WorkflowIcon } from '../../types/integrations.js';
+export interface ExecutionModeOption {
+    value: string;
+    label: string;
+    hint: string;
+}
+type __VLS_Props = {
+    open: boolean;
+    workflow: Workflow;
+    modes: ExecutionModeOption[];
+    modeDraft: string;
+    savingMode?: boolean;
+    savingMeta?: boolean;
+    /** Tag suggestions (tags already used across the tenant's workflows). */
+    tagSuggestions?: string[];
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (args_0: boolean) => any;
+    "change-mode": (mode: string) => any;
+    "save-meta": (meta: {
+        name: string;
+        description: string;
+        tags: string[];
+        icon: WorkflowIcon | null;
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:open"?: ((args_0: boolean) => any) | undefined;
+    "onChange-mode"?: ((mode: string) => any) | undefined;
+    "onSave-meta"?: ((meta: {
+        name: string;
+        description: string;
+        tags: string[];
+        icon: WorkflowIcon | null;
+    }) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,14 @@
+type __VLS_Props = {
+    suggestions?: string[];
+};
+type __VLS_PublicProps = __VLS_Props & {
+    modelValue?: string[];
+};
+declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string[]) => any) | undefined;
+}>, {
+    suggestions: string[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,63 @@
+<script setup>
+import { ref, useId } from "vue";
+const model = defineModel({ type: Array, ...{ default: () => [] } });
+const props = defineProps({
+  suggestions: { type: Array, required: false, default: () => [] }
+});
+const draft = ref("");
+const inputRef = ref(null);
+const listId = useId();
+function commit() {
+  const tag = draft.value.trim().replace(/,+$/, "").trim();
+  draft.value = "";
+  if (!tag) return;
+  if (!model.value.includes(tag)) model.value = [...model.value, tag];
+}
+function remove(tag) {
+  model.value = model.value.filter((t) => t !== tag);
+}
+function onKeydown(e) {
+  if (e.key === "Enter" || e.key === ",") {
+    e.preventDefault();
+    commit();
+  } else if (e.key === "Backspace" && !draft.value && model.value.length) {
+    model.value = model.value.slice(0, -1);
+  }
+}
+</script>
+
+<template>
+  <div
+    class="flex min-h-9 cursor-text flex-wrap items-center gap-1 rounded-md border border-black/[0.08] bg-white px-2 py-1.5"
+    @click="inputRef?.focus()"
+  >
+    <span
+      v-for="t in model"
+      :key="t"
+      class="inline-flex items-center gap-1 rounded-md border border-black/[0.06] bg-muted/50 px-1.5 py-0.5 text-xs text-foreground"
+    >
+      {{ t }}
+      <button
+        type="button"
+        class="text-muted-foreground transition hover:text-foreground"
+        :title="`Remove ${t}`"
+        @click.stop="remove(t)"
+      >
+        ×
+      </button>
+    </span>
+    <input
+      ref="inputRef"
+      v-model="draft"
+      type="text"
+      :list="listId"
+      class="h-6 min-w-24 flex-1 bg-transparent text-sm focus:outline-none"
+      :placeholder="model.length ? 'Add tag\u2026' : 'Add tags \u2014 Enter confirms\u2026'"
+      @keydown="onKeydown"
+      @blur="commit()"
+    >
+    <datalist :id="listId">
+      <option v-for="s in props.suggestions" :key="s" :value="s" />
+    </datalist>
+  </div>
+</template>

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

@@ -0,0 +1,14 @@
+type __VLS_Props = {
+    suggestions?: string[];
+};
+type __VLS_PublicProps = __VLS_Props & {
+    modelValue?: string[];
+};
+declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string[]) => any) | undefined;
+}>, {
+    suggestions: string[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -1,5 +1,5 @@
 <script setup>
-import { computed } from "vue";
+import { computed, ref } from "vue";
 import { Handle, Position, useVueFlow } from "@vue-flow/core";
 import { NodeToolbar } from "@vue-flow/node-toolbar";
 import { ClockCircle as Clock, Play, TrashBinMinimalistic as Trash2, LinkRound as Webhook, Bolt } from "#solar-icons";
@@ -23,20 +23,32 @@ const subtitle = computed(() => {
 const title = computed(() => {
   const n = props.data.name;
   if (!n) return props.data.type.charAt(0).toUpperCase() + props.data.type.slice(1);
-  return typeof n === "string" ? n : Object.values(n)[0];
+  return typeof n === "string" ? n : n.en ?? Object.values(n)[0];
 });
+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;
+  }, 200);
+}
 const flow = useVueFlow();
 function remove() {
   flow.removeNodes([props.id]);
 }
-const SIDES = ["top", "right", "bottom", "left"];
+const OUT_SIDES = ["bottom"];
 function sideToPosition(s) {
   return s === "top" ? Position.Top : s === "right" ? Position.Right : s === "bottom" ? Position.Bottom : Position.Left;
 }
 </script>
 
 <template>
-  <NodeToolbar :position="Position.Top" :offset="36" class="flex items-center gap-1 rounded-md border border-black/[0.08] bg-white px-1 py-1 shadow-md">
+  <NodeToolbar :is-visible="hovered || selected" :position="Position.Top" :offset="8" class="flex items-center gap-1 rounded-md border border-black/[0.08] bg-white px-1 py-1 shadow-md" @mouseenter="onHoverEnter" @mouseleave="onHoverLeave">
     <button
       type="button"
       class="flex h-6 items-center gap-1 rounded px-1.5 text-sm text-rose-600 hover:bg-rose-50"
@@ -49,34 +61,42 @@ function sideToPosition(s) {
 
   <div
     class="w-[200px] rounded-lg border-2 bg-gradient-to-br from-emerald-50 to-white transition-all duration-150"
-    :class="selected ? 'border-emerald-500 shadow-[0_0_0_2px_rgba(16,185,129,0.18)]' : 'border-emerald-400/40 shadow-sm hover:shadow-md hover:border-emerald-500/60'"
+    @mouseenter="onHoverEnter"
+    @mouseleave="onHoverLeave"
+    :class="[
+  selected ? 'border-emerald-500 shadow-[0_0_0_2px_rgba(16,185,129,0.18)]' : 'border-emerald-400/40 shadow-sm hover:shadow-md hover:border-emerald-500/60',
+  data.active === false ? 'opacity-60 grayscale-[0.4]' : ''
+]"
   >
-    <div class="flex items-center gap-2 px-3 py-2">
-      <span class="flex size-7 items-center justify-center rounded-md bg-emerald-500 text-white shadow-sm">
-        <component :is="icon" :size="14" :stroke-width="2.5" />
+    <!-- Same type scale as WorkflowNodeView so trigger and node cards read
+         identically (icon chip size-8/15, subtitle plain text-sm, mt-0.5). -->
+    <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 bg-emerald-500 text-white shadow-sm">
+        <component :is="icon" :size="15" :stroke-width="2.5" />
       </span>
-      <div class="min-w-0">
+      <div class="min-w-0 flex-1">
         <div class="text-sm font-semibold text-foreground leading-tight truncate">
           {{ title }}
         </div>
-        <div class="text-sm text-muted-foreground/80 truncate font-mono">
+        <div class="mt-0.5 text-sm text-muted-foreground truncate" :title="subtitle">
           {{ subtitle }}
         </div>
       </div>
     </div>
-    <div class="border-t border-emerald-500/15 bg-emerald-500/[0.04] rounded-b-md px-3 py-1 text-mono text-emerald-700/80 font-semibold">
-      Trigger · {{ data.type }}
+    <div class="flex items-center justify-between border-t border-emerald-500/15 bg-emerald-500/[0.04] rounded-b-md px-3 py-1 text-mono text-emerald-700/80 font-semibold">
+      <span>Trigger · {{ data.type }}</span>
+      <span v-if="data.active === false" class="text-amber-600">Inactive</span>
     </div>
   </div>
 
-  <!-- Output handles on all 4 sides. The blob's `from.output` stays
+  <!-- Output handles: right + bottom. The blob's `from.output` stays
        "default"; the side suffix is stripped on persist. -->
   <Handle
-    v-for="side in SIDES"
+    v-for="side in OUT_SIDES"
     :id="`default__${side}`"
     :key="side"
     type="source"
     :position="sideToPosition(side)"
-    class="!size-2 !rounded-full !border-2 !border-white !bg-emerald-500 opacity-80 transition-all hover:!size-2.5 hover:!bg-emerald-600 hover:opacity-100"
+    class="!size-3 !rounded-full !border-2 !border-white !bg-emerald-500 !shadow-sm transition-all hover:!size-3.5 hover:!bg-emerald-600"
   />
 </template>

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

@@ -0,0 +1,13 @@
+import type { WorkflowVariable } from '../../types/integrations.js';
+type __VLS_Props = {
+    open: boolean;
+    variables: Record<string, WorkflowVariable>;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (args_0: boolean) => any;
+    "update:variables": (next: Record<string, WorkflowVariable>) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:open"?: ((args_0: boolean) => any) | undefined;
+    "onUpdate:variables"?: ((next: Record<string, WorkflowVariable>) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;