@revenexx/studio-integrations 0.6.0 → 0.7.0

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

@@ -17,23 +17,24 @@ const props = defineProps({
   runBusy: { type: Boolean, required: false }
 });
 const emit = defineEmits(["action", "update:open"]);
+const t = useIntegrationsT();
 const isMac = typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform ?? "");
 function formatShortcut(tokens) {
   const parts = tokens.split("+");
   const out = [];
   for (const raw of parts) {
-    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 === "backspace") out.push("\u232B");
-    else if (t === "delete") out.push("Del");
-    else if (t === "escape") out.push("Esc");
-    else if (t === "tab") out.push("Tab");
-    else if (t === "space") out.push("Space");
-    else if (t === "f2") out.push("F2");
-    else out.push(t.toUpperCase());
+    const t2 = raw.toLowerCase();
+    if (t2 === "mod") out.push(isMac ? "\u2318" : "Ctrl");
+    else if (t2 === "shift") out.push("\u21E7");
+    else if (t2 === "alt") out.push(isMac ? "\u2325" : "Alt");
+    else if (t2 === "enter") out.push("\u21B5");
+    else if (t2 === "backspace") out.push("\u232B");
+    else if (t2 === "delete") out.push("Del");
+    else if (t2 === "escape") out.push("Esc");
+    else if (t2 === "tab") out.push("Tab");
+    else if (t2 === "space") out.push("Space");
+    else if (t2 === "f2") out.push("F2");
+    else out.push(t2.toUpperCase());
   }
   return isMac ? out.join("") : out.join("+");
 }
@@ -42,19 +43,19 @@ const sections = computed(() => {
   if (props.kind === "node") {
     return [
       [
-        { id: "open", label: "Open", shortcut: "enter" },
-        { id: "rename", label: "Rename", shortcut: "f2" }
+        { id: "open", label: t("integration.canvas.contextMenu.item.open"), shortcut: "enter" },
+        { id: "rename", label: t("integration.canvas.contextMenu.item.rename"), shortcut: "f2" }
       ],
       [
-        { id: "copy", label: "Copy", shortcut: "mod+c", disabled: props.targetIsTrigger },
-        { id: "duplicate", label: "Duplicate", shortcut: "mod+d", disabled: props.targetIsTrigger }
+        { id: "copy", label: t("integration.canvas.contextMenu.item.copy"), shortcut: "mod+c", disabled: props.targetIsTrigger },
+        { id: "duplicate", label: t("integration.canvas.contextMenu.item.duplicate"), shortcut: "mod+d", disabled: props.targetIsTrigger }
       ],
       [
-        { id: "run", label: "Run workflow", shortcut: "mod+enter", disabled: props.runBusy },
-        { id: "tidy-up", label: "Tidy up", shortcut: "shift+alt+t" }
+        { id: "run", label: t("integration.canvas.contextMenu.item.runWorkflow"), shortcut: "mod+enter", disabled: props.runBusy },
+        { id: "tidy-up", label: t("integration.canvas.contextMenu.item.tidyUp"), shortcut: "shift+alt+t" }
       ],
       [
-        { id: "delete", label: "Delete", shortcut: "backspace", danger: true }
+        { id: "delete", label: t("integration.common.action.delete"), shortcut: "backspace", danger: true }
       ]
     ];
   }
@@ -62,37 +63,37 @@ const sections = computed(() => {
     const n = props.selectionCount;
     return [
       [
-        { id: "copy", label: `Copy ${n} nodes`, shortcut: "mod+c" },
-        { id: "duplicate", label: `Duplicate ${n} nodes`, shortcut: "mod+d" }
+        { id: "copy", label: t("integration.canvas.contextMenu.item.copyNodes", n), shortcut: "mod+c" },
+        { id: "duplicate", label: t("integration.canvas.contextMenu.item.duplicateNodes", n), shortcut: "mod+d" }
       ],
       [
-        { id: "group", label: `Group ${n} nodes`, shortcut: "mod+g" },
-        { id: "tidy-up", label: "Tidy up", shortcut: "shift+alt+t" },
-        { id: "select-all", label: "Select all", shortcut: "mod+a", disabled: allSelected.value },
-        { id: "clear-selection", label: "Clear selection", shortcut: "escape" }
+        { id: "group", label: t("integration.canvas.contextMenu.item.groupNodes", n), shortcut: "mod+g" },
+        { id: "tidy-up", label: t("integration.canvas.contextMenu.item.tidyUp"), shortcut: "shift+alt+t" },
+        { id: "select-all", label: t("integration.canvas.contextMenu.item.selectAll"), shortcut: "mod+a", disabled: allSelected.value },
+        { id: "clear-selection", label: t("integration.canvas.contextMenu.item.clearSelection"), shortcut: "escape" }
       ],
       [
-        { id: "delete", label: `Delete ${n} nodes`, shortcut: "backspace", danger: true }
+        { id: "delete", label: t("integration.canvas.contextMenu.item.deleteNodes", n), shortcut: "backspace", danger: true }
       ]
     ];
   }
   return [
     [
-      { id: "add-node", label: "Add node\u2026", shortcut: "tab" },
-      { id: "add-sticky", label: "Add sticky", shortcut: "shift+s" },
-      { id: "paste", label: "Paste", shortcut: "mod+v" }
+      { id: "add-node", label: t("integration.canvas.contextMenu.item.addNode"), shortcut: "tab" },
+      { id: "add-sticky", label: t("integration.canvas.contextMenu.item.addSticky"), shortcut: "shift+s" },
+      { id: "paste", label: t("integration.canvas.contextMenu.item.paste"), shortcut: "mod+v" }
     ],
     [
-      { id: "tidy-up", label: "Tidy up", shortcut: "shift+alt+t" },
-      { id: "fit-view", label: "Fit view", shortcut: "1" }
+      { id: "tidy-up", label: t("integration.canvas.contextMenu.item.tidyUp"), shortcut: "shift+alt+t" },
+      { id: "fit-view", label: t("integration.canvas.contextMenu.item.fitView"), shortcut: "1" }
     ],
     [
-      { id: "select-all", label: "Select all", shortcut: "mod+a", disabled: allSelected.value || props.totalNodes === 0 }
+      { id: "select-all", label: t("integration.canvas.contextMenu.item.selectAll"), shortcut: "mod+a", disabled: allSelected.value || props.totalNodes === 0 }
     ]
   ];
 });
 const headerLabel = computed(
-  () => props.kind === "selection" ? `${props.selectionCount} nodes selected` : null
+  () => props.kind === "selection" ? t("integration.canvas.contextMenu.header.selectionCount", props.selectionCount) : null
 );
 function onSelect(item) {
   if (item.disabled) return;

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

@@ -25,14 +25,15 @@ import WorkflowIconPicker from "./WorkflowIconPicker.vue";
 import WorkflowTagsInput from "./WorkflowTagsInput.vue";
 import { resolveLocalized } from "../../utils/localize";
 const open = defineModel("open", { type: Boolean, ...{ default: false } });
+const t = useIntegrationsT();
 const router = useRouter();
 const { create, workflows } = useIntegrationsWorkflows();
 const { templates, loading: templatesLoading, error: templatesError, load: loadTemplates, ensureDetails, instantiate } = useIntegrationsTemplates();
 const mode = ref("blank");
-const modeTabs = [
-  { key: "blank", label: "Start blank" },
-  { key: "template", label: "Start from template" }
-];
+const modeTabs = computed(() => [
+  { key: "blank", label: t("integration.workflows.create.tab.blank") },
+  { key: "template", label: t("integration.workflows.create.tab.template") }
+]);
 function iconFor(name2) {
   if (!name2) return Lucide.Box;
   return Lucide[name2] || Lucide.Box;
@@ -45,18 +46,18 @@ const tags = ref([]);
 const icon = ref(null);
 const tagSuggestions = computed(() => {
   const all = /* @__PURE__ */ new Set();
-  for (const wf of workflows.value) for (const t of wf.blob.tags ?? []) all.add(t);
+  for (const wf of workflows.value) for (const t2 of wf.blob.tags ?? []) all.add(t2);
   return [...all].sort();
 });
 const submitting = ref(false);
 const error = ref(null);
-const executionModes = [
-  { key: "async_only", label: "Async only", hint: "Always queued.", icon: "Inbox" },
-  { key: "sync_only", label: "Sync only", hint: "Waits for the result.", icon: "Timer" },
-  { key: "caller_decides", label: "Caller decides", hint: "The request chooses.", icon: "SlidersHorizontal" }
-];
-const selectedTrigger = computed(() => TRIGGER_TEMPLATES.find((t) => t.type === triggerType.value) ?? null);
-const selectedMode = computed(() => executionModes.find((m) => m.key === executionMode.value) ?? executionModes[0]);
+const executionModes = computed(() => [
+  { key: "async_only", label: t("integration.workflows.create.executionMode.asyncOnly.label"), hint: t("integration.workflows.create.executionMode.asyncOnly.hint"), icon: "Inbox" },
+  { key: "sync_only", label: t("integration.workflows.create.executionMode.syncOnly.label"), hint: t("integration.workflows.create.executionMode.syncOnly.hint"), icon: "Timer" },
+  { key: "caller_decides", label: t("integration.workflows.create.executionMode.callerDecides.label"), hint: t("integration.workflows.create.executionMode.callerDecides.hint"), icon: "SlidersHorizontal" }
+]);
+const selectedTrigger = computed(() => TRIGGER_TEMPLATES.find((tt) => tt.type === triggerType.value) ?? null);
+const selectedMode = computed(() => executionModes.value.find((m) => m.key === executionMode.value) ?? executionModes.value[0]);
 watch(open, (v) => {
   if (!v) return;
   mode.value = "blank";
@@ -72,13 +73,13 @@ watch(open, (v) => {
 });
 async function submit() {
   if (!name.value.trim()) {
-    error.value = "Name is required.";
+    error.value = t("integration.workflows.create.error.nameRequired");
     return;
   }
   submitting.value = true;
   error.value = null;
   try {
-    const tpl = TRIGGER_TEMPLATES.find((t) => t.type === triggerType.value);
+    const tpl = TRIGGER_TEMPLATES.find((tt) => tt.type === triggerType.value);
     const handle = globalThis.crypto?.randomUUID?.() ?? `trg-${Date.now()}`;
     const blob = {
       nodeManifestVersion: "v0-draft",
@@ -100,7 +101,7 @@ async function submit() {
     open.value = false;
     await router.push(`/integrations/workflows/${created.id}`);
   } catch (e) {
-    error.value = e.message || "Could not create the workflow.";
+    error.value = e.message || t("integration.workflows.create.error.generic");
   } finally {
     submitting.value = false;
   }
@@ -108,12 +109,12 @@ async function submit() {
 const instantiatingSlug = ref(null);
 const templateSearch = ref("");
 watch(() => templates.value.length, (n) => {
-  if (n) void ensureDetails(templates.value.map((t) => t.slug));
+  if (n) void ensureDetails(templates.value.map((tpl) => tpl.slug));
 }, { immediate: true });
 const filteredTemplates = computed(() => {
   const q = templateSearch.value.trim().toLowerCase();
   if (!q) return templates.value;
-  return templates.value.filter((t) => `${t.name} ${t.description} ${t.category}`.toLowerCase().includes(q));
+  return templates.value.filter((tpl) => `${tpl.name} ${tpl.description} ${tpl.category}`.toLowerCase().includes(q));
 });
 async function useTemplate(slug) {
   if (instantiatingSlug.value) return;
@@ -124,7 +125,7 @@ async function useTemplate(slug) {
     open.value = false;
     await router.push(`/integrations/workflows/${id}`);
   } catch (e) {
-    toast.error(e?.message ?? "Could not create the workflow from this template.");
+    toast.error(e?.message ?? t("integration.workflows.create.toast.templateError"));
   } finally {
     instantiatingSlug.value = null;
   }
@@ -135,7 +136,7 @@ async function useTemplate(slug) {
   <Dialog v-model:open="open">
     <DialogContent class="sm:max-w-4xl">
       <DialogHeader>
-        <DialogTitle>New workflow</DialogTitle>
+        <DialogTitle>{{ t("integration.workflows.create.dialog.title") }}</DialogTitle>
       </DialogHeader>
 
       <!-- Switcher: the same TabBar the studio surfaces use. -->
@@ -146,33 +147,33 @@ async function useTemplate(slug) {
       <form v-if="mode === 'blank'" class="-m-1 max-h-[65vh] space-y-3 overflow-y-auto p-1" @submit.prevent="submit">
         <!-- Two-column rows: label rail left, field right. -->
         <div class="grid grid-cols-[130px_1fr] items-center gap-x-4">
-          <Label for="wf-name">Name</Label>
-          <Input id="wf-name" v-model="name" placeholder="Sync orders nightly" class="bg-white" />
+          <Label for="wf-name">{{ t("integration.workflows.create.field.name.label") }}</Label>
+          <Input id="wf-name" v-model="name" :placeholder="t('integration.workflows.create.field.name.placeholder')" class="bg-white" />
         </div>
 
         <div class="grid grid-cols-[130px_1fr] items-start gap-x-4">
-          <Label for="wf-desc" class="pt-2.5">Description</Label>
+          <Label for="wf-desc" class="pt-2.5">{{ t("integration.workflows.create.field.description.label") }}</Label>
           <Textarea
             id="wf-desc"
             v-model="description"
             rows="2"
-            placeholder="Optional: what this workflow does and why it exists."
+            :placeholder="t('integration.workflows.create.field.description.placeholder')"
             class="bg-white"
           />
         </div>
 
         <div class="grid grid-cols-[130px_1fr] items-center gap-x-4">
-          <Label for="wf-tags">Tags</Label>
+          <Label for="wf-tags">{{ t("integration.workflows.create.field.tags.label") }}</Label>
           <WorkflowTagsInput v-model="tags" input-id="wf-tags" :suggestions="tagSuggestions" />
         </div>
 
         <div class="grid grid-cols-[130px_1fr] items-center gap-x-4">
-          <Label id="wf-icon-label">Icon</Label>
+          <Label id="wf-icon-label">{{ t("integration.workflows.create.field.icon.label") }}</Label>
           <WorkflowIconPicker v-model="icon" trigger-labelledby="wf-icon-label" />
         </div>
 
         <div class="grid grid-cols-[130px_1fr] items-center gap-x-4">
-          <Label for="wf-trigger">Trigger</Label>
+          <Label for="wf-trigger">{{ t("integration.workflows.create.field.trigger.label") }}</Label>
           <Select v-model="triggerType">
             <SelectTrigger id="wf-trigger" class="w-full bg-white">
               <SelectValue>
@@ -202,7 +203,7 @@ async function useTemplate(slug) {
         </div>
 
         <div class="grid grid-cols-[130px_1fr] items-center gap-x-4">
-          <Label for="wf-exec-mode">Execution mode</Label>
+          <Label for="wf-exec-mode">{{ t("integration.workflows.create.field.executionMode.label") }}</Label>
           <Select v-model="executionMode">
             <SelectTrigger id="wf-exec-mode" class="w-full bg-white">
               <SelectValue>
@@ -238,10 +239,10 @@ async function useTemplate(slug) {
         <div class="flex gap-2 pt-1">
           <Button type="submit" :disabled="submitting" class="h-8 text-sm">
             <Loader2 v-if="submitting" :size="14" class="animate-spin" />
-            {{ submitting ? "Creating\u2026" : "Create and open editor" }}
+            {{ submitting ? t("integration.workflows.create.action.submitting") : t("integration.workflows.create.action.submit") }}
           </Button>
           <Button type="button" variant="outline" class="h-8 text-sm" @click="open = false">
-            Cancel
+            {{ t("integration.common.action.cancel") }}
           </Button>
         </div>
       </form>
@@ -253,8 +254,8 @@ async function useTemplate(slug) {
           <input
             v-model="templateSearch"
             type="text"
-            aria-label="Search templates"
-            placeholder="Search templates…"
+            :aria-label="t('integration.workflows.create.template.search.aria')"
+            :placeholder="t('integration.workflows.create.template.search.placeholder')"
             class="h-8 w-full rounded-md border border-black/[0.08] bg-white pl-7 pr-2 text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500/40"
           >
         </div>
@@ -273,10 +274,10 @@ async function useTemplate(slug) {
           {{ templatesError }}
         </div>
         <p v-else-if="!templates.length" class="p-6 text-center text-sm text-muted-foreground">
-          No templates in the catalogue yet.
+          {{ t("integration.workflows.create.template.empty") }}
         </p>
         <p v-else-if="!filteredTemplates.length" class="p-6 text-center text-sm text-muted-foreground">
-          Nothing matches “{{ templateSearch }}”.
+          {{ t("integration.workflows.create.template.noMatch", { query: templateSearch }) }}
         </p>
 
         <div v-else class="grid gap-2.5 sm:grid-cols-2 lg:grid-cols-3">
@@ -294,10 +295,10 @@ async function useTemplate(slug) {
         <div class="flex items-center justify-between pt-1">
           <NuxtLink to="/integrations/templates" class="inline-flex items-center gap-1 text-sm text-muted-foreground transition-colors hover:text-primary" @click="open = false">
             <Sparkles :size="13" />
-            Browse the full template catalogue
+            {{ t("integration.workflows.create.template.browseAll") }}
           </NuxtLink>
           <Button type="button" variant="outline" class="h-8 text-sm" @click="open = false">
-            Cancel
+            {{ t("integration.common.action.cancel") }}
           </Button>
         </div>
       </div>

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

@@ -8,13 +8,14 @@ const props = defineProps({
   workflow: { type: [Object, null], required: true }
 });
 const emit = defineEmits(["duplicated"]);
+const t = useIntegrationsT();
 const { duplicate } = useIntegrationsWorkflows();
 const name = ref("");
 const busy = ref(false);
 const error = ref(null);
 watch(open, (o) => {
   if (o) {
-    name.value = props.workflow ? `${props.workflow.name} (Copy)` : "";
+    name.value = props.workflow ? t("integration.workflows.duplicate.field.name.default", { name: props.workflow.name }) : "";
     error.value = null;
   }
 });
@@ -28,7 +29,7 @@ async function submit() {
     open.value = false;
     emit("duplicated", copy);
   } catch (e) {
-    error.value = e?.message || "Could not duplicate the workflow.";
+    error.value = e?.message || t("integration.workflows.duplicate.error.generic");
   } finally {
     busy.value = false;
   }
@@ -39,23 +40,23 @@ async function submit() {
   <Dialog v-model:open="open">
     <DialogContent class="sm:max-w-md">
       <DialogHeader>
-        <DialogTitle>Duplicate workflow</DialogTitle>
+        <DialogTitle>{{ t("integration.workflows.duplicate.dialog.title") }}</DialogTitle>
         <DialogDescription class="text-sm">
-          Creates a paused copy of “{{ props.workflow?.name }}” with all triggers off.
+          {{ t("integration.workflows.duplicate.dialog.description", { name: props.workflow?.name ?? "" }) }}
         </DialogDescription>
       </DialogHeader>
 
       <form class="space-y-2" @submit.prevent="submit">
-        <label class="text-sm font-medium" for="wf-duplicate-name">Name</label>
+        <label class="text-sm font-medium" for="wf-duplicate-name">{{ t("integration.workflows.duplicate.field.name.label") }}</label>
         <Input id="wf-duplicate-name" v-model="name" autofocus :disabled="busy" />
         <p v-if="error" class="text-sm text-rose-600">{{ error }}</p>
       </form>
 
       <DialogFooter>
-        <Button variant="outline" size="sm" class="h-8 text-sm" :disabled="busy" @click="open = false">Cancel</Button>
+        <Button variant="outline" size="sm" class="h-8 text-sm" :disabled="busy" @click="open = false">{{ t("integration.common.action.cancel") }}</Button>
         <Button size="sm" class="h-8 text-sm" :disabled="!canSubmit" @click="submit">
           <Loader2 v-if="busy" :size="14" class="animate-spin" />
-          Duplicate
+          {{ t("integration.workflows.action.duplicate") }}
         </Button>
       </DialogFooter>
     </DialogContent>

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

@@ -6,7 +6,8 @@ import {
   getSmoothStepPath,
   useVueFlow
 } from "@vue-flow/core";
-import { Plus, Trash2 } from "lucide-vue-next";
+import { Plus } from "lucide-vue-next";
+import { TrashBinMinimalistic as TrashBin } from "#solar-icons";
 const props = defineProps({
   id: { type: String, required: true },
   sourceNode: { type: Object, required: true },
@@ -39,6 +40,7 @@ const props = defineProps({
   targetX: { type: Number, required: true },
   targetY: { type: Number, required: true }
 });
+const t = useIntegrationsT();
 const flow = useVueFlow();
 const edgeActions = inject("workflow-edge-actions", null);
 const centerY = computed(() => {
@@ -145,7 +147,7 @@ function spliceNode() {
       <button
         type="button"
         class="flex size-5 items-center justify-center rounded text-muted-foreground transition hover:bg-muted/60 hover:text-foreground"
-        title="Insert a node into this connection"
+        :title="t('integration.canvas.edge.action.insertNode')"
         @click.stop="spliceNode"
       >
         <Plus :size="12" />
@@ -154,10 +156,10 @@ function spliceNode() {
       <button
         type="button"
         class="flex size-5 items-center justify-center rounded text-muted-foreground transition hover:bg-rose-50 hover:text-rose-600"
-        title="Delete this connection"
+        :title="t('integration.canvas.edge.action.delete')"
         @click.stop="removeEdge"
       >
-        <Trash2 :size="12" />
+        <TrashBin :size="12" />
       </button>
     </div>
   </EdgeLabelRenderer>