@revenexx/studio-integrations 1.3.0 → 1.4.0

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

@@ -9,6 +9,8 @@ import {
   ContextMenuShortcut,
   ContextMenuTrigger
 } from "@revenexx/studio";
+import { primaryShortcut } from "../../data/canvasShortcuts";
+import { formatShortcut } from "../../utils/shortcutLabel";
 const props = defineProps({
   kind: { type: String, required: true },
   selectionCount: { type: Number, required: true },
@@ -18,44 +20,24 @@ const props = defineProps({
 });
 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 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("+");
-}
 const allSelected = computed(() => props.totalNodes > 0 && props.selectionCount >= props.totalNodes);
 const sections = computed(() => {
   if (props.kind === "node") {
     return [
       [
-        { id: "open", label: t("integration.canvas.contextMenu.item.open"), shortcut: "enter" },
-        { id: "rename", label: t("integration.canvas.contextMenu.item.rename"), shortcut: "f2" }
+        { id: "open", label: t("integration.canvas.contextMenu.item.open"), shortcut: primaryShortcut("open") },
+        { id: "rename", label: t("integration.canvas.contextMenu.item.rename"), shortcut: primaryShortcut("rename") }
       ],
       [
-        { 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: "copy", label: t("integration.canvas.contextMenu.item.copy"), shortcut: primaryShortcut("copy"), disabled: props.targetIsTrigger },
+        { id: "duplicate", label: t("integration.canvas.contextMenu.item.duplicate"), shortcut: primaryShortcut("duplicate"), disabled: props.targetIsTrigger }
       ],
       [
-        { 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: "run", label: t("integration.canvas.contextMenu.item.runWorkflow"), shortcut: primaryShortcut("run"), disabled: props.runBusy },
+        { id: "tidy-up", label: t("integration.canvas.contextMenu.item.tidyUp"), shortcut: primaryShortcut("tidyUp") }
       ],
       [
-        { id: "delete", label: t("integration.common.action.delete"), shortcut: "backspace", danger: true }
+        { id: "delete", label: t("integration.common.action.delete"), shortcut: primaryShortcut("delete"), danger: true }
       ]
     ];
   }
@@ -63,32 +45,32 @@ const sections = computed(() => {
     const n = props.selectionCount;
     return [
       [
-        { 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: "copy", label: t("integration.canvas.contextMenu.item.copyNodes", n), shortcut: primaryShortcut("copy") },
+        { id: "duplicate", label: t("integration.canvas.contextMenu.item.duplicateNodes", n), shortcut: primaryShortcut("duplicate") }
       ],
       [
-        { 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: "group", label: t("integration.canvas.contextMenu.item.groupNodes", n), shortcut: primaryShortcut("group") },
+        { id: "tidy-up", label: t("integration.canvas.contextMenu.item.tidyUp"), shortcut: primaryShortcut("tidyUp") },
+        { id: "select-all", label: t("integration.canvas.contextMenu.item.selectAll"), shortcut: primaryShortcut("selectAll"), disabled: allSelected.value },
+        { id: "clear-selection", label: t("integration.canvas.contextMenu.item.clearSelection"), shortcut: primaryShortcut("clearSelection") }
       ],
       [
-        { id: "delete", label: t("integration.canvas.contextMenu.item.deleteNodes", n), shortcut: "backspace", danger: true }
+        { id: "delete", label: t("integration.canvas.contextMenu.item.deleteNodes", n), shortcut: primaryShortcut("delete"), danger: true }
       ]
     ];
   }
   return [
     [
-      { 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: "add-node", label: t("integration.canvas.contextMenu.item.addNode"), shortcut: primaryShortcut("addNode") },
+      { id: "add-sticky", label: t("integration.canvas.contextMenu.item.addSticky"), shortcut: primaryShortcut("addSticky") },
+      { id: "paste", label: t("integration.canvas.contextMenu.item.paste"), shortcut: primaryShortcut("paste") }
     ],
     [
-      { 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: "tidy-up", label: t("integration.canvas.contextMenu.item.tidyUp"), shortcut: primaryShortcut("tidyUp") },
+      { id: "fit-view", label: t("integration.canvas.contextMenu.item.fitView"), shortcut: primaryShortcut("fitView") }
     ],
     [
-      { id: "select-all", label: t("integration.canvas.contextMenu.item.selectAll"), shortcut: "mod+a", disabled: allSelected.value || props.totalNodes === 0 }
+      { id: "select-all", label: t("integration.canvas.contextMenu.item.selectAll"), shortcut: primaryShortcut("selectAll"), disabled: allSelected.value || props.totalNodes === 0 }
     ]
   ];
 });

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

@@ -17,11 +17,11 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_14) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    action: (id: MenuActionId) => any;
     "update:open": (open: boolean) => any;
+    action: (id: MenuActionId) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onAction?: ((id: MenuActionId) => any) | undefined;
     "onUpdate:open"?: ((open: boolean) => any) | undefined;
+    onAction?: ((id: MenuActionId) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

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

@@ -1,6 +1,6 @@
 <script setup>
 import { computed, ref, watch } from "vue";
-import { RefreshCircle as Loader2, Magnifier as Search, MagicStick as Sparkles } from "#solar-icons";
+import { AltArrowLeft as ArrowLeft, RefreshCircle as Loader2, Magnifier as Search, MagicStick as Sparkles } from "#solar-icons";
 import { triggerGlyph } from "../../data/triggerGlyphs";
 import * as Lucide from "lucide-vue-next";
 import {
@@ -19,10 +19,10 @@ import {
   SelectValue,
   Textarea
 } from "@revenexx/studio";
-import { toast } from "vue-sonner";
 import { TRIGGER_TEMPLATES } from "../../data/integrationNodeCatalog";
 import LoadingAnnouncement from "./LoadingAnnouncement.vue";
 import TemplateCard from "./TemplateCard.vue";
+import TemplateInstallStep from "./TemplateInstallStep.vue";
 import WorkflowIconPicker from "./WorkflowIconPicker.vue";
 import WorkflowTagsInput from "./WorkflowTagsInput.vue";
 import { resolveLocalized } from "../../utils/localize";
@@ -31,7 +31,7 @@ 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 { templates, loading: templatesLoading, error: templatesError, load: loadTemplates, ensureDetails } = useIntegrationsTemplates();
 const mode = ref("blank");
 const modeTabs = computed(() => [
   { key: "blank", label: t("integration.workflows.create.tab.blank") },
@@ -72,6 +72,7 @@ watch(open, (v) => {
   icon.value = null;
   error.value = null;
   templateSearch.value = "";
+  pickedSlug.value = null;
   void loadTemplates();
 });
 async function submit() {
@@ -109,8 +110,14 @@ async function submit() {
     submitting.value = false;
   }
 }
-const instantiatingSlug = ref(null);
+const pickedSlug = ref(null);
 const templateSearch = ref("");
+const stepLoading = ref(false);
+const stepInstalling = ref(false);
+watch(mode, (m) => {
+  if (m !== "template") pickedSlug.value = null;
+});
+const pickedTemplate = computed(() => templates.value.find((tpl) => tpl.slug === pickedSlug.value) ?? null);
 watch(() => templates.value.length, (n) => {
   if (n) void ensureDetails(templates.value.map((tpl) => tpl.slug));
 }, { immediate: true });
@@ -119,19 +126,9 @@ const filteredTemplates = computed(() => {
   if (!q) return templates.value;
   return templates.value.filter((tpl) => `${tpl.name} ${tpl.description} ${tpl.category}`.toLowerCase().includes(q));
 });
-async function useTemplate(slug) {
-  if (instantiatingSlug.value) return;
-  instantiatingSlug.value = slug;
-  try {
-    const id = await instantiate(slug);
-    if (id == null) throw new Error("The template could not be instantiated.");
-    open.value = false;
-    await router.push(`/integrations/workflows/${id}`);
-  } catch (e) {
-    toast.error(errorReason(e, t("integration.workflows.create.toast.templateError")));
-  } finally {
-    instantiatingSlug.value = null;
-  }
+async function installed(id) {
+  open.value = false;
+  await router.push(`/integrations/workflows/${id}`);
 }
 </script>
 
@@ -154,8 +151,8 @@ async function useTemplate(slug) {
            there (PO-251). -->
       <LoadingAnnouncement
         :label="t('integration.workflows.create.tab.template')"
-        :loading="mode === 'template' && templatesLoading && !templates.length"
-        :text="t('integration.workflows.create.template.state.loading')"
+        :loading="mode === 'template' && (stepLoading || templatesLoading && !templates.length)"
+        :text="stepLoading ? t('integration.templates.detail.install.state.loading') : t('integration.workflows.create.template.state.loading')"
       />
 
       <!-- ── Blank ─────────────────────────────────────────────────────────── -->
@@ -265,58 +262,90 @@ async function useTemplate(slug) {
 
       <!-- ── From template ─────────────────────────────────────────────────── -->
       <div v-else class="-m-1 max-h-[65vh] space-y-3 overflow-y-auto p-1">
-        <div class="relative">
-          <Search :size="12" class="absolute left-2 top-1/2 -translate-y-1/2 text-muted-foreground" />
-          <input
-            v-model="templateSearch"
-            type="text"
-            :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"
+        <!-- The install step, once a template is picked: the same one the
+             template's own page opens, so both routes create the same workflow. -->
+        <template v-if="pickedSlug">
+          <div class="flex items-center gap-2">
+            <!-- Closed while the install is in flight: the step would unmount
+                 under it, the request would land anyway, and the editor would
+                 open on a workflow nobody was told was being created — twice
+                 over if a second template were picked in that window. -->
+            <Button variant="outline" class="h-8 shrink-0 text-sm" :disabled="stepInstalling" @click="pickedSlug = null">
+              <ArrowLeft :size="13" />
+              {{ t("integration.workflows.create.template.backToPicker") }}
+            </Button>
+            <span class="truncate text-sm font-medium">{{ pickedTemplate?.name }}</span>
+          </div>
+          <p class="text-sm text-muted-foreground">
+            {{ t("integration.templates.detail.install.description") }}
+          </p>
+
+          <TemplateInstallStep
+            :slug="pickedSlug"
+            @installed="installed"
+            @update:loading="stepLoading = $event"
+            @update:installing="stepInstalling = $event"
           >
-        </div>
+            <template #secondary="{ installing }">
+              <Button variant="outline" :disabled="installing" @click="open = false">
+                {{ t("integration.common.action.cancel") }}
+              </Button>
+            </template>
+          </TemplateInstallStep>
+        </template>
+
+        <template v-else>
+          <div class="relative">
+            <Search :size="12" class="absolute left-2 top-1/2 -translate-y-1/2 text-muted-foreground" />
+            <input
+              v-model="templateSearch"
+              type="text"
+              :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>
 
-        <div v-if="templatesLoading && !templates.length" aria-hidden="true" class="grid gap-2 p-1 sm:grid-cols-2">
-          <div v-for="n in 6" :key="`sk-tpl-${n}`" class="rounded-lg border border-black/[0.06] bg-white p-3 space-y-2">
-            <div class="flex items-center gap-2">
-              <div class="size-7 rounded-md bg-black/[0.07] animate-pulse" />
-              <div class="h-3 w-1/2 rounded bg-black/[0.07] animate-pulse" />
+          <div v-if="templatesLoading && !templates.length" aria-hidden="true" class="grid gap-2 p-1 sm:grid-cols-2">
+            <div v-for="n in 6" :key="`sk-tpl-${n}`" class="rounded-lg border border-black/[0.06] bg-white p-3 space-y-2">
+              <div class="flex items-center gap-2">
+                <div class="size-7 rounded-md bg-black/[0.07] animate-pulse" />
+                <div class="h-3 w-1/2 rounded bg-black/[0.07] animate-pulse" />
+              </div>
+              <div class="h-3 w-full rounded bg-black/[0.05] animate-pulse" />
+              <div class="h-3 w-2/3 rounded bg-black/[0.05] animate-pulse" />
             </div>
-            <div class="h-3 w-full rounded bg-black/[0.05] animate-pulse" />
-            <div class="h-3 w-2/3 rounded bg-black/[0.05] animate-pulse" />
           </div>
-        </div>
-        <div v-else-if="templatesError" class="rounded-md border border-rose-500/20 bg-rose-500/5 px-3 py-2 text-sm text-rose-700">
-          {{ templatesError }}
-        </div>
-        <p v-else-if="!templates.length" class="p-6 text-center text-sm text-muted-foreground">
-          {{ t("integration.workflows.create.template.empty") }}
-        </p>
-        <p v-else-if="!filteredTemplates.length" class="p-6 text-center text-sm text-muted-foreground">
-          {{ t("integration.workflows.create.template.noMatch", { query: templateSearch }) }}
-        </p>
+          <div v-else-if="templatesError" class="rounded-md border border-rose-500/20 bg-rose-500/5 px-3 py-2 text-sm text-rose-700">
+            {{ templatesError }}
+          </div>
+          <p v-else-if="!templates.length" class="p-6 text-center text-sm text-muted-foreground">
+            {{ t("integration.workflows.create.template.empty") }}
+          </p>
+          <p v-else-if="!filteredTemplates.length" class="p-6 text-center text-sm text-muted-foreground">
+            {{ 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">
-          <TemplateCard
-            v-for="tpl in filteredTemplates"
-            :key="tpl.slug"
-            :template="tpl"
-            density="compact"
-            :busy="instantiatingSlug === tpl.slug"
-            :disabled="!!instantiatingSlug"
-            @select="useTemplate(tpl.slug)"
-          />
-        </div>
+          <div v-else class="grid gap-2.5 sm:grid-cols-2 lg:grid-cols-3">
+            <TemplateCard
+              v-for="tpl in filteredTemplates"
+              :key="tpl.slug"
+              :template="tpl"
+              density="compact"
+              @select="pickedSlug = tpl.slug"
+            />
+          </div>
 
-        <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" />
-            {{ t("integration.workflows.create.template.browseAll") }}
-          </NuxtLink>
-          <Button type="button" variant="outline" class="h-8 text-sm" @click="open = false">
-            {{ t("integration.common.action.cancel") }}
-          </Button>
-        </div>
+          <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" />
+              {{ t("integration.workflows.create.template.browseAll") }}
+            </NuxtLink>
+            <Button type="button" variant="outline" class="h-8 text-sm" @click="open = false">
+              {{ t("integration.common.action.cancel") }}
+            </Button>
+          </div>
+        </template>
       </div>
     </DialogContent>
   </Dialog>

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

@@ -42,17 +42,51 @@ type __VLS_Props = {
  * id that is on the canvas is in the blob by construction.
  */
 declare function revealNode(id: string): void;
+/**
+ * Point at a node without opening it — for a reader who has to look at the
+ * card's *surroundings* rather than at its settings.
+ *
+ * The deliberate difference from {@link revealNode} is the missing selection,
+ * and with it the missing settings lightbox. That is the whole reason there are
+ * two functions: the validation banner sends someone to a field at fault, and
+ * the dialog is where that field is. The error-path advice sends them to a port
+ * with nothing on it, and the question they have to answer — where should this
+ * failure go? — is answered by the graph around the card, which a dialog over
+ * the canvas covers up.
+ *
+ * Marked with the same pulse a newly created card gets, because the job is the
+ * same one: say which of thirty cards is the one meant.
+ */
+declare function showNodeOnCanvas(id: string): void;
+/**
+ * Hang a Stop-and-Error step off a node's error output and wire it up
+ * (specs/workflow-advice.md AC-3).
+ *
+ * The advice strip can tell an author their error output leads nowhere; on its
+ * own that is a reprimand without a remedy, because the repair — drop a node,
+ * pick the right one, connect it, write an expression quoting the failing step's
+ * message — is four steps of tedium they have to already know. Every template we
+ * ship does exactly this, twenty-five times over, so the shape is settled and
+ * worth one click.
+ *
+ * Leaves the result unsaved and unopened, like every other insertion here: the
+ * new step is highlighted and the author decides whether to keep it. Deleting it
+ * is the undo, because this editor has no undo stack to hook into.
+ */
+declare function attachErrorStop(sourceNodeId: string, port: string): void;
 declare const _default: import("vue").DefineComponent<__VLS_Props, {
     revealNode: typeof revealNode;
+    showNodeOnCanvas: typeof showNodeOnCanvas;
+    attachErrorStop: typeof attachErrorStop;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    change: (blob: WorkflowBlob) => any;
     run: () => any;
     toggleActive: () => any;
+    change: (blob: WorkflowBlob) => any;
     openSettings: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onChange?: ((blob: WorkflowBlob) => any) | undefined;
     onRun?: (() => any) | undefined;
     onToggleActive?: (() => any) | undefined;
+    onChange?: ((blob: WorkflowBlob) => any) | undefined;
     onOpenSettings?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;