@revenexx/studio-integrations 0.5.1 → 0.7.0

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

@@ -8,8 +8,27 @@ type __VLS_Props = {
     runBusy?: boolean;
     /** The run is queued behind a bundle build — busy, but worth saying why. */
     runWaiting?: boolean;
+    /**
+     * One of the page's own lightboxes is open above the editor (settings,
+     * duplicate, run payload, the sync response, the deactivation prompt). The
+     * canvas stands its keyboard shortcuts down while one is up — see
+     * `canvasHasKeyboard` below. A new page-level dialog belongs in here too.
+     */
+    overlayOpen?: boolean;
 };
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+/**
+ * Show a node the user was sent to from outside the canvas — the validation
+ * banner's per-node line (PO-209). Centres the card and opens its settings,
+ * which is where the fields at fault are.
+ *
+ * A node inside a collapsed group has no card on the canvas: centring would pan
+ * to empty space, so it only opens the settings. The reverse can't happen — an
+ * id that is on the canvas is in the blob by construction.
+ */
+declare function revealNode(id: string): void;
+declare const _default: import("vue").DefineComponent<__VLS_Props, {
+    revealNode: typeof revealNode;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     change: (blob: WorkflowBlob) => any;
     run: () => any;
     toggleActive: () => any;

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

@@ -2,7 +2,6 @@
 import { computed, markRaw, nextTick, onMounted, provide, ref, watch } from "vue";
 import {
   MarkerType,
-  PanOnScrollMode,
   VueFlow,
   useVueFlow
 } from "@vue-flow/core";
@@ -25,6 +24,7 @@ const props = defineProps({
 });
 const emit = defineEmits(["restored"]);
 const revisionsApi = useIntegrationsRevisions();
+const t = useIntegrationsT();
 const entries = ref([]);
 const page = ref(1);
 const lastPage = ref(1);
@@ -65,24 +65,9 @@ function onResolvedOutputs(nodeId, outputs) {
 const previewNodes = ref([]);
 const previewEdges = ref([]);
 const preview = useVueFlow("workflow-history-preview");
-provide("workflow-node-actions", { duplicate: () => {
-}, remove: () => {
-} });
+provide("workflow-node-actions", null);
 function edgeColorByKind(kind) {
-  switch (kind) {
-    case "success":
-      return "#10b981";
-    case "error":
-      return "#f43f5e";
-    case "branch-true":
-      return "#10b981";
-    case "branch-false":
-      return "#f59e0b";
-    case "branch":
-      return "#8b5cf6";
-    default:
-      return "#94a3b8";
-  }
+  return kind === "error" ? "#cbd5e1" : "#94a3b8";
 }
 const GROUP_PAD = 24;
 const GROUP_LABEL_ROOM = 26;
@@ -126,7 +111,7 @@ function buildPreview(blob) {
   const nodePos = (id) => {
     const wn = blob.nodes.find((n) => n.id === id);
     if (wn) return { x: wn.position?.x ?? 0, y: wn.position?.y ?? 0 };
-    const ti = blob.triggers.findIndex((t) => t.id === id);
+    const ti = blob.triggers.findIndex((t2) => t2.id === id);
     if (ti >= 0) return triggerPos(id, ti);
     return { x: 0, y: 0 };
   };
@@ -140,6 +125,7 @@ function buildPreview(blob) {
     if (output === "true") return "branch-true";
     if (output === "false") return "branch-false";
     if (output === "error") return "error";
+    if (output === "done") return "success";
     const outs = [...manifest.outputs ?? [], ...dynamicOutputs.value[sourceNodeId] ?? []];
     const portDef = outs.find((o) => o.name === output);
     if (portDef) {
@@ -164,16 +150,16 @@ function buildPreview(blob) {
       position: { x: s.position.x, y: s.position.y },
       zIndex: -100 + i,
       draggable: false,
-      data: { sticky: s, onUpdate: () => {
-      }, onRemove: () => {
-      } }
+      // No callbacks: that absence is what makes the note read-only — it then
+      // draws no toolbar, no resize handle and does not open for typing (PO-284).
+      data: { sticky: s }
     })),
-    ...blob.triggers.map((t, i) => ({
-      id: t.id,
+    ...blob.triggers.map((t2, i) => ({
+      id: t2.id,
       type: "trigger",
-      position: triggerPos(t.id, i),
+      position: triggerPos(t2.id, i),
       draggable: false,
-      data: t
+      data: t2
     })),
     ...blob.nodes.map((n) => ({
       id: n.id,
@@ -187,7 +173,7 @@ function buildPreview(blob) {
     const kind = edgeKind(e.from.nodeId, e.from.output);
     const wn = blob.nodes.find((n) => n.id === e.from.nodeId);
     const manifest = wn ? findManifest(wn.nodeSlug, wn.nodeVersion) : null;
-    const isBranchPort = (manifest?.outputs ?? []).some((o) => o.sourceFromConfig) || ["true", "false", "error"].includes(e.from.output);
+    const isBranchPort = (manifest?.outputs ?? []).some((o) => o.sourceFromConfig) || ["true", "false"].includes(e.from.output);
     const srcSide = pickSourceSide(e.from.nodeId, e.to.nodeId);
     return {
       id: e.id,
@@ -233,23 +219,23 @@ async function select(revision) {
       buildPreview(detail.blob);
     }
   } catch (e) {
-    toast.error(e?.message ?? "Could not load the revision.");
+    toast.error(e?.message ?? t("integration.history.toast.loadRevisionFailed"));
   } finally {
     detailLoading.value = false;
   }
 }
 async function restoreRevision(rev) {
-  if (!confirm(`Restore revision ${rev.revision}? The current version is archived first, then the workflow is rebuilt from this snapshot.`)) return;
+  if (!confirm(t("integration.history.confirm.restore", { revision: rev.revision }))) return;
   restoring.value = rev.revision;
   try {
     await revisionsApi.restore(props.workflow.id, rev.revision);
-    toast.success(`Revision ${rev.revision} restored`);
+    toast.success(t("integration.history.toast.restored", { revision: rev.revision }));
     detailCache.clear();
     emit("restored");
     await loadList(true);
     void select(null);
   } catch (e) {
-    toast.error(e?.message ?? "Could not restore the revision.");
+    toast.error(e?.message ?? t("integration.history.toast.restoreFailed"));
   } finally {
     restoring.value = null;
   }
@@ -274,7 +260,7 @@ const nodeTypes = {
 const edgeTypes = {
   flow: markRaw(WorkflowEdgeView)
 };
-const previewTitle = computed(() => selected.value === null ? `Current version \xB7 revision ${props.workflow.revision}` : `Revision ${selected.value} (read-only)`);
+const previewTitle = computed(() => selected.value === null ? t("integration.history.preview.title.current", { revision: props.workflow.revision }) : t("integration.history.preview.title.revision", { revision: selected.value }));
 onMounted(() => {
   void loadList(true);
   void select(null);
@@ -296,7 +282,6 @@ onMounted(() => {
         :nodes-connectable="false"
         :elements-selectable="false"
         :edges-updatable="false"
-        :pan-on-scroll-mode="PanOnScrollMode.Free"
         :delete-key-code="null"
         :min-zoom="0.25"
         :max-zoom="2"
@@ -327,9 +312,9 @@ onMounted(() => {
     <!-- Revision list -->
     <aside class="flex w-80 shrink-0 flex-col border-l border-black/[0.06] bg-white">
       <div class="border-b border-black/[0.06] px-3 py-2">
-        <div class="text-sm font-semibold">Version history</div>
+        <div class="text-sm font-semibold">{{ t("integration.history.heading.title") }}</div>
         <p class="text-sm text-muted-foreground">
-          Every save archives the previous revision; the newest one is what runs while the workflow is active.
+          {{ t("integration.history.heading.description") }}
         </p>
       </div>
 
@@ -343,17 +328,17 @@ onMounted(() => {
         >
           <div class="flex items-center justify-between gap-2">
             <span class="text-sm font-medium tabular-nums">{{ formatDateTime(workflow.updated_at) }}</span>
-            <Badge variant="outline" class="text-xs font-medium uppercase border-emerald-500/30 text-emerald-700">Current</Badge>
+            <Badge variant="outline" class="text-xs font-medium uppercase border-emerald-500/30 text-emerald-700">{{ t("integration.history.badge.current") }}</Badge>
             <Badge
               variant="outline"
               class="text-xs font-medium uppercase"
               :class="workflow.active ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-700' : 'border-black/[0.08] text-muted-foreground'"
-              :title="workflow.active ? 'Triggers are armed; this revision is what runs.' : 'Workflow is paused; activating runs this revision.'"
+              :title="workflow.active ? t('integration.history.badge.activeHint') : t('integration.history.badge.pausedHint')"
             >
-              {{ workflow.active ? "Active" : "Paused" }}
+              {{ workflow.active ? t("integration.history.badge.active") : t("integration.history.badge.paused") }}
             </Badge>
           </div>
-          <div class="mt-0.5 text-sm text-muted-foreground">Revision {{ workflow.revision }}</div>
+          <div class="mt-0.5 text-sm text-muted-foreground">{{ t("integration.history.list.revisionLabel", { revision: workflow.revision }) }}</div>
         </button>
 
         <!-- Archived revisions -->
@@ -367,7 +352,7 @@ onMounted(() => {
             <div class="flex items-center justify-between gap-2">
               <span class="text-sm font-medium tabular-nums">{{ formatDateTime(rev.archived_at) }}</span>
             </div>
-            <div class="mt-0.5 text-sm text-muted-foreground">Revision {{ rev.revision }}</div>
+            <div class="mt-0.5 text-sm text-muted-foreground">{{ t("integration.history.list.revisionLabel", { revision: rev.revision }) }}</div>
           </button>
           <div class="absolute right-2 top-1/2 -translate-y-1/2 opacity-0 transition group-hover:opacity-100">
             <Button
@@ -378,13 +363,13 @@ onMounted(() => {
               @click.stop="restoreRevision(rev)"
             >
               <Loader2 v-if="restoring === rev.revision" :size="11" class="mr-1 animate-spin" />
-              Restore
+              {{ t("integration.history.action.restore") }}
             </Button>
           </div>
         </div>
 
         <p v-if="!entries.length && !listLoading" class="px-2 py-6 text-center text-sm text-muted-foreground">
-          No archived revisions yet — save a change to create the first snapshot.
+          {{ t("integration.history.state.empty") }}
         </p>
         <p v-if="revisionsApi.error.value" class="px-2 py-2 text-sm text-rose-600">
           {{ revisionsApi.error.value }}
@@ -409,7 +394,7 @@ onMounted(() => {
           class="w-full text-sm"
           @click="loadMore"
         >
-          Load older revisions
+          {{ t("integration.history.action.loadMore") }}
         </Button>
       </div>
     </aside>

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

@@ -1,5 +1,23 @@
 import type { WorkflowIcon } from '../../types/integrations.js';
-type __VLS_PublicProps = {
+/**
+ * The caller names the picker by pointing at its own `<Label>`'s id — not with
+ * `<Label for>`, and not with an `id` of ours on the trigger.
+ *
+ * An `id` on the trigger would be a quiet regression: `PopoverTrigger` puts
+ * reka-ui's generated `triggerId` there, `PopoverContentImpl` points the opened
+ * dialog's `aria-labelledby` at exactly that id, and reka's `Slot` merges with
+ * the *child's* props winning — so ours would replace it and leave the popover
+ * naming an element that no longer exists.
+ *
+ * `aria-labelledby` also lists the id of the span holding the current choice, so
+ * the name stays "Icon Business Central" rather than dropping the value the way
+ * a plain label would. Attribute fallthrough is no help here either: the root
+ * this component renders is the popover, not the button.
+ */
+type __VLS_Props = {
+    triggerLabelledby?: string;
+};
+type __VLS_PublicProps = __VLS_Props & {
     modelValue?: WorkflowIcon | null;
 };
 declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {

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

@@ -1,10 +1,18 @@
 <script setup>
-import { computed, ref } from "vue";
+import { computed, ref, useId } from "vue";
 import { AltArrowDown as ChevronDown } from "#solar-icons";
 import { Popover, PopoverContent, PopoverTrigger } from "@revenexx/studio";
 import { WORKFLOW_SOLAR_ICONS, imageIdFromSrc, nodeLogoOptions } from "../../data/workflowIconCatalog";
 import WorkflowIconView from "./WorkflowIconView.vue";
 const model = defineModel({ type: [Object, null], ...{ default: null } });
+const props = defineProps({
+  triggerLabelledby: { type: String, required: false }
+});
+const t = useIntegrationsT();
+const valueId = useId();
+const triggerLabelledby = computed(
+  () => props.triggerLabelledby ? `${props.triggerLabelledby} ${valueId}` : void 0
+);
 const open = ref(false);
 const logos = computed(() => nodeLogoOptions());
 function pick(icon) {
@@ -19,10 +27,10 @@ function isImage(id) {
   return (imageIdFromSrc(model.value.src) ?? model.value.src) === id;
 }
 const selectedLabel = computed(() => {
-  if (!model.value) return "Default icon";
-  if (model.value.kind === "solar") return model.value.name ?? "Icon";
+  if (!model.value) return t("integration.workflows.iconPicker.label.default");
+  if (model.value.kind === "solar") return model.value.name ?? t("integration.workflows.iconPicker.label.iconFallback");
   const id = imageIdFromSrc(model.value.src) ?? model.value.src;
-  return logos.value.find((l) => l.id === id)?.label ?? "Image";
+  return logos.value.find((l) => l.id === id)?.label ?? t("integration.workflows.iconPicker.label.imageFallback");
 });
 </script>
 
@@ -30,13 +38,14 @@ const selectedLabel = computed(() => {
   <Popover v-model:open="open">
     <PopoverTrigger as-child>
       <button
+        :aria-labelledby="triggerLabelledby"
         type="button"
         class="flex h-9 w-full items-center gap-2 rounded-md border border-black/[0.08] bg-white px-2.5 text-left text-sm transition hover:border-black/20"
       >
         <span class="flex size-6 shrink-0 items-center justify-center rounded-md bg-slate-100 text-slate-500">
           <WorkflowIconView :icon="model" :size="14" />
         </span>
-        <span class="min-w-0 flex-1 truncate" :class="model ? '' : 'text-muted-foreground'">
+        <span :id="valueId" class="min-w-0 flex-1 truncate" :class="model ? '' : 'text-muted-foreground'">
           {{ selectedLabel }}
         </span>
         <ChevronDown :size="14" class="shrink-0 text-muted-foreground" />
@@ -49,7 +58,8 @@ const selectedLabel = computed(() => {
             type="button"
             class="flex size-8 items-center justify-center rounded-md border text-sm text-muted-foreground transition hover:bg-muted/50"
             :class="!model ? 'border-emerald-500/40 bg-emerald-500/10' : 'border-transparent'"
-            title="No icon (default glyph)"
+            :title="t('integration.workflows.iconPicker.action.none')"
+            :aria-label="t('integration.workflows.iconPicker.action.none')"
             @click="pick(null)"
           >
             —
@@ -68,7 +78,7 @@ const selectedLabel = computed(() => {
         </div>
 
         <template v-if="logos.length">
-          <div class="text-mono text-muted-foreground">Integrations</div>
+          <div class="text-mono text-muted-foreground">{{ t("integration.workflows.iconPicker.section.integrations") }}</div>
           <div class="flex flex-wrap gap-1">
             <button
               v-for="l in logos"

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

@@ -1,5 +1,23 @@
 import type { WorkflowIcon } from '../../types/integrations.js';
-type __VLS_PublicProps = {
+/**
+ * The caller names the picker by pointing at its own `<Label>`'s id — not with
+ * `<Label for>`, and not with an `id` of ours on the trigger.
+ *
+ * An `id` on the trigger would be a quiet regression: `PopoverTrigger` puts
+ * reka-ui's generated `triggerId` there, `PopoverContentImpl` points the opened
+ * dialog's `aria-labelledby` at exactly that id, and reka's `Slot` merges with
+ * the *child's* props winning — so ours would replace it and leave the popover
+ * naming an element that no longer exists.
+ *
+ * `aria-labelledby` also lists the id of the span holding the current choice, so
+ * the name stays "Icon Business Central" rather than dropping the value the way
+ * a plain label would. Attribute fallthrough is no help here either: the root
+ * this component renders is the popover, not the button.
+ */
+type __VLS_Props = {
+    triggerLabelledby?: string;
+};
+type __VLS_PublicProps = __VLS_Props & {
     modelValue?: WorkflowIcon | null;
 };
 declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {

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

@@ -5,6 +5,10 @@ interface NodeData extends WorkflowNode {
      *  editor without persisting to the blob. When present and non-empty, these
      *  drive the rendered handles instead of the static manifest computation. */
     __resolvedOutputs?: NodeManifestOutput[];
+    /** Config keys the backend reported as incomplete at the last save (PO-209),
+     *  injected by the editor the same non-persisting way. Read-only canvases
+     *  (run replay, history preview) never pass them, so nothing is marked there. */
+    __invalidFields?: string[];
 }
 type __VLS_Props = {
     id: string;