@revenexx/studio-integrations 0.6.0 → 0.7.0

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

@@ -29,6 +29,7 @@ const props = defineProps({
   tagSuggestions: { type: Array, required: false }
 });
 const emit = defineEmits(["update:open", "change-mode", "save-meta"]);
+const t = useIntegrationsT();
 const nameDraft = ref("");
 const descriptionDraft = ref("");
 const tagsDraft = ref([]);
@@ -54,15 +55,15 @@ function formatDateTime(iso) {
   <Dialog :open="open" @update:open="(v) => emit('update:open', v)">
     <DialogContent class="sm:max-w-lg">
       <DialogHeader>
-        <DialogTitle>Workflow settings</DialogTitle>
+        <DialogTitle>{{ t("integration.workflows.settings.dialog.title") }}</DialogTitle>
         <DialogDescription class="text-sm">
-          Execution behavior and metadata for “{{ workflow.name }}”.
+          {{ t("integration.workflows.settings.dialog.description", { name: 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="text-mono text-muted-foreground">{{ t("integration.workflows.settings.section.execution") }}</div>
           <div class="flex items-center gap-2">
             <Select
               :model-value="modeDraft"
@@ -71,8 +72,8 @@ function formatDateTime(iso) {
             >
               <!-- Named explicitly: the section caption above says "Execution",
                    which is not a name the control itself carries. -->
-              <SelectTrigger aria-label="Execution mode" class="h-8 w-full bg-white text-sm">
-                <SelectValue placeholder="Pick a mode" />
+              <SelectTrigger :aria-label="t('integration.workflows.settings.field.executionMode.aria')" class="h-8 w-full bg-white text-sm">
+                <SelectValue :placeholder="t('integration.workflows.settings.field.executionMode.placeholder')" />
               </SelectTrigger>
               <SelectContent>
                 <SelectItem v-for="m in modes" :key="m.value" :value="m.value">
@@ -88,24 +89,24 @@ function formatDateTime(iso) {
         </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="text-mono text-muted-foreground">{{ t("integration.workflows.settings.section.appearance") }}</div>
           <!-- Real labels, not styled captions: each one names its own control
                (`for`/`id`), otherwise a screen reader reads four unlabelled
                fields in a row. -->
           <div class="space-y-1.5">
-            <Label for="wf-set-name" class="text-sm font-normal text-muted-foreground">Name</Label>
-            <Input id="wf-set-name" v-model="nameDraft" class="bg-white" placeholder="Workflow name" />
+            <Label for="wf-set-name" class="text-sm font-normal text-muted-foreground">{{ t("integration.workflows.settings.field.name.label") }}</Label>
+            <Input id="wf-set-name" v-model="nameDraft" class="bg-white" :placeholder="t('integration.workflows.settings.field.name.placeholder')" />
           </div>
           <div class="space-y-1.5">
-            <Label for="wf-set-desc" class="text-sm font-normal text-muted-foreground">Description</Label>
-            <Textarea id="wf-set-desc" v-model="descriptionDraft" rows="2" class="bg-white" placeholder="What this workflow does and why it exists." />
+            <Label for="wf-set-desc" class="text-sm font-normal text-muted-foreground">{{ t("integration.workflows.settings.field.description.label") }}</Label>
+            <Textarea id="wf-set-desc" v-model="descriptionDraft" rows="2" class="bg-white" :placeholder="t('integration.workflows.settings.field.description.placeholder')" />
           </div>
           <div class="space-y-1.5">
-            <Label for="wf-set-tags" class="text-sm font-normal text-muted-foreground">Tags</Label>
+            <Label for="wf-set-tags" class="text-sm font-normal text-muted-foreground">{{ t("integration.workflows.settings.field.tags.label") }}</Label>
             <WorkflowTagsInput v-model="tagsDraft" input-id="wf-set-tags" :suggestions="tagSuggestions ?? []" />
           </div>
           <div class="space-y-1.5">
-            <Label id="wf-set-icon-label" class="text-sm font-normal text-muted-foreground">Icon</Label>
+            <Label id="wf-set-icon-label" class="text-sm font-normal text-muted-foreground">{{ t("integration.workflows.settings.field.icon.label") }}</Label>
             <WorkflowIconPicker v-model="iconDraft" trigger-labelledby="wf-set-icon-label" />
           </div>
           <div class="flex justify-end">
@@ -116,23 +117,23 @@ function formatDateTime(iso) {
               @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
+              {{ t("integration.workflows.settings.action.save") }}
             </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="text-mono text-muted-foreground">{{ t("integration.workflows.settings.section.metadata") }}</div>
           <div class="grid grid-cols-[110px_1fr] gap-x-3 gap-y-2">
-            <span class="text-muted-foreground">ID</span>
+            <span class="text-muted-foreground">{{ t("integration.workflows.settings.meta.id") }}</span>
             <span class="font-mono">{{ workflow.id }}</span>
-            <span class="text-muted-foreground">Definition</span>
+            <span class="text-muted-foreground">{{ t("integration.workflows.settings.meta.definition") }}</span>
             <span class="font-mono">{{ workflow.blob_definition_version }}</span>
-            <span class="text-muted-foreground">Revision</span>
+            <span class="text-muted-foreground">{{ t("integration.workflows.settings.meta.revision") }}</span>
             <span class="font-mono">r{{ workflow.revision }}</span>
-            <span class="text-muted-foreground">Created</span>
+            <span class="text-muted-foreground">{{ t("integration.workflows.settings.meta.created") }}</span>
             <span>{{ formatDateTime(workflow.created_at) }}</span>
-            <span class="text-muted-foreground">Updated</span>
+            <span class="text-muted-foreground">{{ t("integration.workflows.settings.meta.updated") }}</span>
             <span>{{ formatDateTime(workflow.updated_at) }}</span>
           </div>
         </div>

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

@@ -5,6 +5,7 @@ const props = defineProps({
   suggestions: { type: Array, required: false, default: () => [] },
   inputId: { type: String, required: false }
 });
+const t = useIntegrationsT();
 const draft = ref("");
 const inputRef = ref(null);
 const listId = useId();
@@ -15,7 +16,7 @@ function commit() {
   if (!model.value.includes(tag)) model.value = [...model.value, tag];
 }
 function remove(tag) {
-  model.value = model.value.filter((t) => t !== tag);
+  model.value = model.value.filter((t2) => t2 !== tag);
 }
 function onKeydown(e) {
   if (e.key === "Enter" || e.key === ",") {
@@ -33,17 +34,17 @@ function onKeydown(e) {
     @click="inputRef?.focus()"
   >
     <span
-      v-for="t in model"
-      :key="t"
+      v-for="tag in model"
+      :key="tag"
       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 }}
+      {{ tag }}
       <button
         type="button"
         class="text-muted-foreground transition hover:text-foreground"
-        :title="`Remove ${t}`"
-        :aria-label="`Remove ${t}`"
-        @click.stop="remove(t)"
+        :title="t('integration.workflows.tagsInput.action.remove', { tag })"
+        :aria-label="t('integration.workflows.tagsInput.action.remove', { tag })"
+        @click.stop="remove(tag)"
       >
         ×
       </button>
@@ -57,7 +58,7 @@ function onKeydown(e) {
       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'"
+      :placeholder="model.length ? t('integration.workflows.tagsInput.placeholder.add') : t('integration.workflows.tagsInput.placeholder.addFirst')"
       @keydown="onKeydown"
       @blur="commit()"
     >

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

@@ -2,8 +2,9 @@
 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";
+import { ClockCircle as Clock, Play, TrashBinMinimalistic as TrashBin, LinkRound as Webhook, Bolt } from "#solar-icons";
 import { resolveDisplayName } from "../../utils/localize";
+import { triggerTypeLabel } from "../../data/integrationNodeCatalog";
 import { describeCron } from "../../utils/schedule";
 const props = defineProps({
   id: { type: String, required: true },
@@ -12,19 +13,20 @@ const props = defineProps({
 });
 defineOptions({ inheritAttrs: false });
 defineEmits(["updateNodeInternals"]);
+const t = useIntegrationsT();
 const icon = computed(() => {
   return props.data.type === "schedule" ? Clock : props.data.type === "webhook" ? Webhook : props.data.type === "event" ? Bolt : Play;
 });
 const subtitle = computed(() => {
   const c = props.data.config;
-  if (props.data.type === "schedule") return describeCron(c.cron) ?? c.cron ?? "no schedule set";
+  if (props.data.type === "schedule") return describeCron(c.cron) ?? c.cron ?? t("integration.canvas.trigger.subtitle.noSchedule");
   if (props.data.type === "webhook") return `${c.method ?? "POST"} ${c.path ?? "/"}`;
-  if (props.data.type === "event") return c.event_type ? `on ${c.event_type}` : "no event set";
-  return "On demand";
+  if (props.data.type === "event") return c.event_type ? t("integration.canvas.trigger.subtitle.onEvent", { event: c.event_type }) : t("integration.canvas.trigger.subtitle.noEvent");
+  return t("integration.canvas.trigger.subtitle.onDemand");
 });
 const title = computed(() => {
   const n = props.data.name;
-  if (!n) return props.data.type.charAt(0).toUpperCase() + props.data.type.slice(1);
+  if (!n) return triggerTypeLabel(props.data.type);
   return resolveDisplayName(n);
 });
 const hovered = ref(false);
@@ -54,10 +56,11 @@ function sideToPosition(s) {
     <button
       type="button"
       class="flex h-6 items-center gap-1 rounded px-1.5 text-sm text-rose-600 hover:bg-rose-50"
-      title="Delete"
+      :title="t('integration.common.action.delete')"
+      :aria-label="t('integration.canvas.trigger.action.deleteAria')"
       @click="remove"
     >
-      <Trash2 :size="11" />
+      <TrashBin :size="11" />
     </button>
   </NodeToolbar>
 
@@ -86,8 +89,8 @@ function sideToPosition(s) {
       </div>
     </div>
     <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>
+      <span>{{ t("integration.canvas.badge.trigger") }} · {{ data.type }}</span>
+      <span v-if="data.active === false" class="text-amber-600">{{ t("integration.canvas.trigger.badge.inactive") }}</span>
     </div>
   </div>
 

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

@@ -1,6 +1,6 @@
 <script setup>
 import { computed, reactive, ref, watch } from "vue";
-import { AddCircle as Plus, Copy, TrashBinMinimalistic as Trash2 } from "#solar-icons";
+import { AddCircle as Plus, Copy, TrashBinMinimalistic as TrashBin } from "#solar-icons";
 import {
   Button,
   Dialog,
@@ -24,6 +24,7 @@ const props = defineProps({
   variables: { type: Object, required: true }
 });
 const emit = defineEmits(["update:open", "update:variables"]);
+const t = useIntegrationsT();
 const KEY_PATTERN = /^[a-z_][a-z0-9_]*$/i;
 const TYPES = ["string", "number", "boolean", "object", "array"];
 const jsonDrafts = reactive({});
@@ -80,13 +81,13 @@ function applyJsonDraft(key, type) {
     const parsed = JSON.parse(raw);
     const ok = type === "array" ? Array.isArray(parsed) : parsed !== null && typeof parsed === "object" && !Array.isArray(parsed);
     if (!ok) {
-      jsonErrors[key] = type === "array" ? "Must be a JSON array." : "Must be a JSON object.";
+      jsonErrors[key] = type === "array" ? t("integration.workflows.variables.error.mustBeArray") : t("integration.workflows.variables.error.mustBeObject");
       return;
     }
     jsonErrors[key] = null;
     patchVar(key, { default: parsed });
   } catch {
-    jsonErrors[key] = "Not valid JSON.";
+    jsonErrors[key] = t("integration.workflows.variables.error.invalidJson");
   }
 }
 function descriptionText(v) {
@@ -107,8 +108,8 @@ const newKey = ref("");
 const newKeyError = computed(() => {
   const k = newKey.value.trim();
   if (!k) return null;
-  if (!KEY_PATTERN.test(k)) return "Letters, digits and _ only; must not start with a digit.";
-  if (props.variables[k]) return "Key already exists.";
+  if (!KEY_PATTERN.test(k)) return t("integration.workflows.variables.error.invalidKey");
+  if (props.variables[k]) return t("integration.workflows.variables.error.keyExists");
   return null;
 });
 function addVariable() {
@@ -120,9 +121,9 @@ function addVariable() {
 async function copyUsage(key) {
   try {
     await navigator.clipboard.writeText(`\${{ vars.${key} }}`);
-    toast.success("Expression copied");
+    toast.success(t("integration.workflows.variables.toast.copied"));
   } catch {
-    toast.error("Could not copy");
+    toast.error(t("integration.workflows.variables.toast.copyFailed"));
   }
 }
 </script>
@@ -131,24 +132,24 @@ async function copyUsage(key) {
   <Dialog :open="open" @update:open="(v2) => emit('update:open', v2)">
     <DialogContent class="max-w-[94vw] sm:max-w-3xl">
       <DialogHeader>
-        <DialogTitle>Workflow variables</DialogTitle>
+        <DialogTitle>{{ t("integration.workflows.variables.dialog.title") }}</DialogTitle>
         <DialogDescription class="text-sm">
-          Reusable values for this workflow — reference them in any config field as
+          {{ t("integration.workflows.variables.dialog.description.before") }}
           <code v-pre class="rounded bg-black/[0.05] px-1 py-0.5 font-mono text-xs">${{ vars.key }}</code>.
-          Changes persist with the workflow Save.
+          {{ t("integration.workflows.variables.dialog.description.after") }}
         </DialogDescription>
       </DialogHeader>
 
       <div class="max-h-[62vh] space-y-3 overflow-y-auto pr-1">
         <p v-if="!entries.length" class="rounded-lg border border-dashed border-black/[0.12] px-4 py-6 text-center text-sm text-muted-foreground">
-          No variables yet — add the first one below.
+          {{ t("integration.workflows.variables.state.empty") }}
         </p>
 
         <div
           v-for="[key, v] in entries"
           :key="key"
           role="group"
-          :aria-label="`Variable ${key}`"
+          :aria-label="t('integration.workflows.variables.row.aria', { key })"
           class="rounded-lg border border-black/[0.06] bg-white p-3"
         >
           <div class="flex items-center gap-2">
@@ -156,7 +157,7 @@ async function copyUsage(key) {
             <button
               type="button"
               class="flex size-6 shrink-0 items-center justify-center rounded-md text-muted-foreground transition hover:bg-muted/50 hover:text-foreground"
-              :title="`Copy \${{ vars.${key} }}`"
+              :title="t('integration.workflows.variables.action.copyUsage.title', { key })"
               @click="copyUsage(key)"
             >
               <Copy :size="12" />
@@ -165,10 +166,10 @@ async function copyUsage(key) {
             <button
               type="button"
               class="flex size-6 shrink-0 items-center justify-center rounded-md text-muted-foreground transition hover:bg-rose-50 hover:text-rose-600"
-              title="Delete variable"
+              :title="t('integration.workflows.variables.action.delete')"
               @click="removeVar(key)"
             >
-              <Trash2 :size="13" />
+              <TrashBin :size="13" />
             </button>
           </div>
 
@@ -176,12 +177,12 @@ async function copyUsage(key) {
             <!-- One row per variable, so every id carries its key — otherwise
                  the labels of the second row point at the first row's fields. -->
             <div class="space-y-1">
-              <Label :for="`var-${key}-type`" class="text-mono text-muted-foreground">Type</Label>
-              <Select :model-value="v.type" @update:model-value="(t) => changeType(key, t)">
+              <Label :for="`var-${key}-type`" class="text-mono text-muted-foreground">{{ t("integration.workflows.variables.field.type.label") }}</Label>
+              <Select :model-value="v.type" @update:model-value="(vt) => changeType(key, vt)">
                 <!-- Both: the `id` lets the visible Label's `for` resolve, and the
                      `aria-label` names the trigger without relying on an engine
                      naming a button from a <label> — see the sweep's docblock. -->
-                <SelectTrigger :id="`var-${key}-type`" aria-label="Type" class="h-8 bg-white text-sm">
+                <SelectTrigger :id="`var-${key}-type`" :aria-label="t('integration.workflows.variables.field.type.label')" class="h-8 bg-white text-sm">
                   <SelectValue />
                 </SelectTrigger>
                 <SelectContent>
@@ -193,7 +194,7 @@ async function copyUsage(key) {
             <div class="space-y-1">
               <!-- "Value", not "Default": PO-206. The `for`/`id` still name the
                    blob field, which is called `default` and stays that way. -->
-              <Label :for="`var-${key}-default`" class="text-mono text-muted-foreground">Value</Label>
+              <Label :for="`var-${key}-default`" class="text-mono text-muted-foreground">{{ t("integration.workflows.variables.field.value.label") }}</Label>
 
               <!-- Only one of these renders, so they share the one `id` the Label
                    points at. The labelable ones take their name from that Label —
@@ -221,7 +222,7 @@ async function copyUsage(key) {
                 <Switch
                   :id="`var-${key}-default`"
                   :model-value="v.default === true"
-                  aria-label="Value"
+                  :aria-label="t('integration.workflows.variables.field.value.label')"
                   @update:model-value="(val) => patchVar(key, { default: val })"
                 />
               </div>
@@ -233,7 +234,7 @@ async function copyUsage(key) {
                   spellcheck="false"
                   class="w-full rounded-md border bg-white p-2 font-mono text-xs focus:outline-none focus:ring-2 focus:ring-primary/40"
                   :class="jsonErrors[key] ? 'border-rose-400' : 'border-black/[0.08]'"
-                  :placeholder="v.type === 'array' ? 'JSON array, e.g. [1, 2]' : 'JSON object, e.g. { \u2026 }'"
+                  :placeholder="v.type === 'array' ? t('integration.workflows.variables.field.value.placeholder.array') : t('integration.workflows.variables.field.value.placeholder.object')"
                   @input="(e) => jsonDrafts[key] = e.target.value"
                   @blur="applyJsonDraft(key, v.type)"
                 />
@@ -243,12 +244,12 @@ async function copyUsage(key) {
           </div>
 
           <div class="mt-2 space-y-1">
-            <Label :for="`var-${key}-desc`" class="text-mono text-muted-foreground">Description</Label>
+            <Label :for="`var-${key}-desc`" class="text-mono text-muted-foreground">{{ t("integration.workflows.variables.field.description.label") }}</Label>
             <Input
               :id="`var-${key}-desc`"
               :model-value="descriptionText(v)"
               class="h-8 bg-white text-sm"
-              placeholder="What this variable is for"
+              :placeholder="t('integration.workflows.variables.field.description.placeholder')"
               @update:model-value="(val) => writeDescription(key, String(val))"
             />
           </div>
@@ -256,18 +257,18 @@ async function copyUsage(key) {
 
         <!-- Add row -->
         <div class="rounded-lg border border-dashed border-black/[0.12] p-3">
-          <Label for="var-new-key" class="text-mono text-muted-foreground">New variable</Label>
+          <Label for="var-new-key" class="text-mono text-muted-foreground">{{ t("integration.workflows.variables.field.newKey.label") }}</Label>
           <div class="mt-1 flex items-center gap-2">
             <Input
               id="var-new-key"
               v-model="newKey"
               class="h-8 flex-1 bg-white font-mono text-sm"
-              placeholder="e.g. base_url"
+              :placeholder="t('integration.workflows.variables.field.newKey.placeholder')"
               @keydown.enter.prevent="addVariable"
             />
             <Button size="sm" class="h-8" :disabled="!newKey.trim() || !!newKeyError" @click="addVariable">
               <Plus :size="14" class="mr-1" />
-              Add
+              {{ t("integration.workflows.variables.action.add") }}
             </Button>
           </div>
           <p v-if="newKeyError" class="mt-1 text-xs text-rose-600">{{ newKeyError }}</p>