@revenexx/studio-integrations 0.5.1 → 0.7.0

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

@@ -0,0 +1,119 @@
+<script setup>
+import { computed, resolveComponent } from "vue";
+import { RefreshCircle as Loader2, ClockCircle as Clock, Global as Webhook, Play, Bolt as Zap } from "#solar-icons";
+import { templateCategoryLabel, templatePackageLabel } from "../../data/integrationTemplates";
+import TemplateFlowPreview from "./TemplateFlowPreview.vue";
+const props = defineProps({
+  template: { type: Object, required: true },
+  density: { type: String, required: true },
+  to: { type: String, required: false },
+  busy: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false }
+});
+const emit = defineEmits(["select"]);
+const t = useIntegrationsT();
+const NuxtLink = resolveComponent("NuxtLink");
+const full = computed(() => props.density === "full");
+const banner = computed(
+  () => full.value ? props.template.images.find((i) => i.category === "banner")?.src ?? null : null
+);
+const TRIGGER_ICON = { schedule: Clock, webhook: Webhook, manual: Play, event: Zap };
+const TRIGGER_LABEL_KEY = {
+  schedule: "integration.templates.card.trigger.schedule",
+  webhook: "integration.templates.trigger.webhook",
+  manual: "integration.templates.trigger.manual",
+  event: "integration.templates.card.trigger.event"
+};
+function triggerTypeLabel(type) {
+  const key = TRIGGER_LABEL_KEY[type];
+  return key ? t(key) : type;
+}
+function levelDot(level) {
+  return level === "beginner" ? "bg-emerald-500" : level === "intermediate" ? "bg-amber-500" : "bg-rose-500";
+}
+const packageLabel = computed(() => templatePackageLabel(props.template));
+const categoryLabel = computed(() => templateCategoryLabel(props.template.category));
+const CHIP = "inline-flex items-center whitespace-nowrap rounded-full uppercase font-medium";
+const chipSize = computed(() => full.value ? "px-2 py-0.5 text-xs" : "px-1.5 py-px text-[11px]");
+</script>
+
+<template>
+  <component
+    :is="to ? NuxtLink : 'button'"
+    v-bind="to ? { to } : { type: 'button', disabled: disabled || busy }"
+    class="flex flex-col overflow-hidden rounded-lg border border-black/[0.06] bg-white text-left transition hover:border-black/20 hover:shadow-sm disabled:opacity-60"
+    @click="to ? void 0 : emit('select')"
+  >
+    <!-- The picture: the flow this template builds, drawn from its own
+         definition, or the publisher's banner where one ships. -->
+    <div
+      class="relative shrink-0 border-b border-black/[0.06] bg-slate-50/70 [background-image:radial-gradient(circle,rgba(15,23,42,0.07)_1px,transparent_1px)]"
+      :class="full ? 'h-36 [background-size:14px_14px]' : 'h-24 [background-size:12px_12px]'"
+    >
+      <img v-if="banner" :src="banner" alt="" class="h-full w-full object-cover">
+      <!-- `full` keeps its chips on the picture, so the drawing starts below
+           them: the graph is fitted to whichever axis binds, and a flow slightly
+           taller in proportion than this box reaches the top edge — where the
+           chip is. The 28px are the chip's own 20 plus its 8 of inset, so the
+           two can no longer meet (PO-243).
+
+           No horizontal padding, deliberately: all three surfaces used to pass
+           one (`px-2` in the gallery, `px-1` in the compact places) and none of
+           them insetted anything. The preview's `svg` is `absolute inset-0`, so
+           it is laid out against its parent's *padding box* and fills it whatever
+           the padding is — measured identical to the picture, 421.3px wide either
+           way. The graph's own inset is `TemplateFlowPreview`'s `padding` prop,
+           36 logical units, which is where it belongs. -->
+      <TemplateFlowPreview
+        v-else-if="template.detailLoaded"
+        :blob="template.blob"
+        :height="full ? 116 : 96"
+        :class="full ? 'mt-7' : ''"
+      />
+      <!-- Named, because "still on its way" and "this template draws nothing"
+           are the same sight otherwise — and a spinner nobody can address is a
+           promise no test can hold to. -->
+      <div
+        v-else
+        role="status"
+        :aria-label="t('integration.templates.card.state.loadingFlow')"
+        class="flex h-full items-center justify-center"
+      >
+        <Loader2 :size="full ? 16 : 14" class="animate-spin text-muted-foreground/50" />
+      </div>
+
+      <div v-if="full" class="absolute left-2 top-2 flex items-center gap-1.5">
+        <span v-if="categoryLabel" :class="[CHIP, chipSize, 'bg-slate-100 text-slate-700']">{{ categoryLabel }}</span>
+        <span v-if="packageLabel" :class="[CHIP, chipSize, 'bg-violet-100 text-violet-700']">{{ packageLabel }}</span>
+      </div>
+
+      <Loader2 v-if="busy" :size="13" class="absolute right-1.5 top-1.5 animate-spin text-muted-foreground" />
+    </div>
+
+    <div class="flex min-h-0 flex-1 flex-col" :class="full ? 'p-4' : 'p-3'">
+      <div class="flex items-center gap-2">
+        <div class="min-w-0 flex-1 truncate text-sm font-semibold text-foreground">{{ template.name }}</div>
+        <!-- Compact has no room on the picture, so the category rides the name. -->
+        <span v-if="!full && categoryLabel" :class="[CHIP, chipSize, 'bg-slate-100 text-slate-700']">{{ categoryLabel }}</span>
+      </div>
+      <p class="mt-1 flex-1 text-sm text-muted-foreground line-clamp-2">{{ template.description }}</p>
+
+      <div v-if="full" class="mt-3 flex items-center gap-2 text-xs text-muted-foreground">
+        <span
+          v-for="triggerType in template.triggerTypes"
+          :key="triggerType"
+          class="inline-flex items-center gap-1 whitespace-nowrap rounded-full bg-slate-100 px-2 py-0.5 uppercase"
+        >
+          <component :is="TRIGGER_ICON[triggerType] ?? Zap" :size="10" />
+          {{ triggerTypeLabel(triggerType) }}
+        </span>
+        <span class="flex-1" />
+        <span class="inline-flex items-center gap-1 whitespace-nowrap rounded-full bg-slate-100 px-2 py-0.5 uppercase">
+          <span class="size-1.5 rounded-full" :class="levelDot(template.level)" />
+          {{ template.level }}
+        </span>
+        <span v-if="template.publisher.kind !== 'revenexx'" class="inline-flex items-center rounded-full bg-slate-100 px-2 py-0.5 uppercase">{{ template.publisher.name }}</span>
+      </div>
+    </div>
+  </component>
+</template>

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

@@ -0,0 +1,18 @@
+import type { WorkflowTemplate } from '../../types/integrations.js';
+type __VLS_Props = {
+    template: WorkflowTemplate;
+    /** How much room the surface has. See the comment above; no default on purpose. */
+    density: 'full' | 'compact';
+    /** Given → the card is a link there. Omitted → a button that emits `select`. */
+    to?: string;
+    /** This card is the one being acted on: it says so and cannot be pressed again. */
+    busy?: boolean;
+    /** Another card on the surface is being acted on, so this one is out of reach. */
+    disabled?: boolean;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -11,9 +11,9 @@ type __VLS_Props = {
      */
     showErrorBranches?: boolean;
 };
-declare var __VLS_12: {};
+declare var __VLS_8: {};
 type __VLS_Slots = {} & {
-    empty?: (props: typeof __VLS_12) => any;
+    empty?: (props: typeof __VLS_8) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     height: number;

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

@@ -3,13 +3,15 @@ import { computed } from "vue";
 import * as Lucide from "lucide-vue-next";
 import { findManifest, NODE_CATEGORIES, TRIGGER_TEMPLATES } from "../../data/integrationNodeCatalog";
 import { resolveLocalized } from "../../utils/localize";
-import IntegrationsNodeLogo from "./NodeLogo.vue";
+import { describeCron } from "../../utils/schedule";
+import IntegrationsNodeMark from "./NodeMark.vue";
 const props = defineProps({
   blob: { type: [Object, null], required: true },
   height: { type: Number, required: false, default: 144 },
   padding: { type: Number, required: false, default: 36 },
   showErrorBranches: { type: Boolean, required: false, default: false }
 });
+const t = useIntegrationsT();
 const STOP_SLUG = "revenexx:stop-and-error";
 const NODE_W = 220;
 const NODE_H = 58;
@@ -20,20 +22,20 @@ const boxes = computed(() => {
   if (!blob) return [];
   const out = [];
   const triggers = blob.triggers ?? [];
-  triggers.forEach((t, i) => {
-    const pos = blob.triggerPositions?.[t.id] ?? { x: 40, y: 40 + i * 160 };
-    const template = TRIGGER_TEMPLATES.find((tt) => tt.type === t.type);
-    const subtitle = t.type === "schedule" && t.config?.cron ? String(t.config.cron) : t.type === "webhook" && t.config?.path ? String(t.config.path) : resolveLocalized(template?.description ?? "");
+  triggers.forEach((t2, i) => {
+    const pos = blob.triggerPositions?.[t2.id] ?? { x: 40, y: 40 + i * 160 };
+    const template = TRIGGER_TEMPLATES.find((tt) => tt.type === t2.type);
+    const subtitle = t2.type === "schedule" && t2.config?.cron ? describeCron(String(t2.config.cron)) ?? String(t2.config.cron) : t2.type === "webhook" && t2.config?.path ? String(t2.config.path) : resolveLocalized(template?.description ?? "");
     out.push({
-      key: `t-${t.id}`,
+      key: `t-${t2.id}`,
       kind: "trigger",
       x: pos.x,
       y: pos.y,
       w: TRIG_W,
       h: TRIG_H,
-      label: typeof t.name === "string" && t.name || t.type.charAt(0).toUpperCase() + t.type.slice(1),
+      label: typeof t2.name === "string" && t2.name || t2.type.charAt(0).toUpperCase() + t2.type.slice(1),
       subtitle,
-      type: t.type,
+      type: t2.type,
       manifest: null,
       icon: iconFor(template?.icon ?? "Zap")
     });
@@ -59,9 +61,6 @@ const boxes = computed(() => {
   });
   return out;
 });
-function hasLogo(m) {
-  return (m?.images ?? []).some((i) => i.category === "logo");
-}
 function prettify(slug) {
   const tail = slug.includes(":") ? slug.split(":").pop() : slug;
   return tail.split("-").map((s) => s.charAt(0).toUpperCase() + s.slice(1)).join(" ");
@@ -100,8 +99,8 @@ const edgePaths = computed(() => {
 });
 const EDGE_STROKE = {
   default: "#94a3b8",
-  trigger: "#10b981",
-  error: "#f43f5e"
+  trigger: "#94a3b8",
+  error: "#cbd5e1"
 };
 const bounds = computed(() => {
   if (!boxes.value.length) return { x: 0, y: 0, w: 1, h: 1 };
@@ -171,7 +170,7 @@ const bounds = computed(() => {
             </div>
           </div>
           <div class="rounded-b-md border-t border-emerald-500/15 bg-emerald-500/[0.04] px-3 py-1 text-mono font-semibold text-emerald-700/80">
-            Trigger · {{ b.type }}
+            {{ t("integration.templates.preview.triggerLabel") }} · {{ b.type }}
           </div>
         </div>
 
@@ -182,10 +181,9 @@ const bounds = computed(() => {
         >
           <span
             class="flex size-8 shrink-0 items-center justify-center rounded-md"
-            :class="hasLogo(b.manifest) ? 'bg-white ring-1 ring-black/[0.06]' : b.categoryColor"
+            :class="b.categoryColor"
           >
-            <IntegrationsNodeLogo v-if="hasLogo(b.manifest)" :manifest="b.manifest" :size="18" />
-            <component :is="b.icon" v-else :size="15" :stroke-width="2.25" />
+            <IntegrationsNodeMark :manifest="b.manifest" :size="18" />
           </span>
           <div class="min-w-0 flex-1">
             <div class="truncate text-sm font-semibold leading-tight text-foreground">{{ b.label }}</div>
@@ -195,7 +193,7 @@ const bounds = computed(() => {
       </foreignObject>
     </svg>
     <div v-else class="flex h-full items-center justify-center text-sm text-muted-foreground">
-      <slot name="empty">Preview loading…</slot>
+      <slot name="empty">{{ t("integration.templates.preview.state.loading") }}</slot>
     </div>
   </div>
 </template>

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

@@ -11,9 +11,9 @@ type __VLS_Props = {
      */
     showErrorBranches?: boolean;
 };
-declare var __VLS_12: {};
+declare var __VLS_8: {};
 type __VLS_Slots = {} & {
-    empty?: (props: typeof __VLS_12) => any;
+    empty?: (props: typeof __VLS_8) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     height: number;

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;