@revenexx/studio-integrations 3.8.0 → 3.8.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @revenexx/studio-integrations
 
+## 3.8.2
+
+### Patch Changes
+
+- b641ccf: A setting that holds a group of values, and whose node lets it take a value mapped from an earlier step, now has the same switch beside it as a number or a choice. The switch turns it into the box with the `{ }` list, and where the setting says what it wants and exactly one earlier output fits, that output is offered in a click. Send Email's Attachments can so be filled with the file a step before built, without typing the expression into JSON. A value already mapped into such a setting opens as the mapping; switching back empties it into its rows. A list of several mapped values stays JSON.
+
+## 3.8.1
+
+### Patch Changes
+
+- f5c169c: The insert and delete buttons on a connection, and the corners a sticky note and a group frame are resized by, are now at least 24 pixels on screen at every zoom level. They used to shrink with the canvas: a workflow of eighteen steps opens at 58 %, and there they measured 14, 11.6 and 9.3 pixels. The connection's buttons now keep their size on screen, as the node's toolbar already did. The resize corners look the same as before, and the area that reacts to the pointer reaches outward past the note or frame, so a bigger target covers none of the content. The pencil and the note badge on a node card are not changed here.
+
 ## 3.8.0
 
 ### Minor Changes

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@revenexx/studio-integrations",
   "configKey": "studioIntegrations",
-  "version": "3.8.0",
+  "version": "3.8.2",
   "builder": {
     "@nuxt/module-builder": "1.0.3",
     "unbuild": "unknown"

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

@@ -6,6 +6,7 @@ import { ChevronsDownUp, ChevronsUpDown, Ungroup } from "lucide-vue-next";
 import { TrashBinMinimalistic as TrashBin } from "#solar-icons";
 import { inputHandleId, outputHandleId } from "../../data/handleId";
 import { resolveDisplayName } from "../../utils/localize";
+import { useCanvasTarget } from "../../composables/useCanvasTarget";
 const props = defineProps({
   id: { type: String, required: true },
   data: { type: Object, required: true },
@@ -65,6 +66,8 @@ const resizing = ref(false);
 const liveW = ref(0);
 const liveH = ref(0);
 let resizeStart = { x: 0, y: 0, w: 0, h: 0 };
+const RESIZE_CORNER = 20;
+const resizeTarget = useCanvasTarget(RESIZE_CORNER);
 const frameW = computed(() => resizing.value ? liveW.value : props.data.rect.width);
 const frameH = computed(() => resizing.value ? liveH.value : props.data.rect.height);
 function onResizeStart(e) {
@@ -215,18 +218,26 @@ function onResizeEnd() {
       <!-- Bottom-right resize handle (editable frames only). -->
       <div
         v-if="editable"
-        class="nodrag pointer-events-auto absolute bottom-0 right-0 flex size-5 cursor-se-resize items-end justify-end p-1"
-        :style="{ color: color.chip }"
+        class="nodrag pointer-events-auto absolute cursor-se-resize"
+        :style="{
+  color: color.chip,
+  width: `${resizeTarget}px`,
+  height: `${resizeTarget}px`,
+  right: `${RESIZE_CORNER - resizeTarget}px`,
+  bottom: `${RESIZE_CORNER - resizeTarget}px`
+}"
         :title="t('integration.canvas.group.action.resize')"
         @pointerdown="onResizeStart"
         @pointermove="onResizeMove"
         @pointerup="onResizeEnd"
         @pointercancel="onResizeEnd"
       >
-        <svg viewBox="0 0 8 8" class="size-2.5" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round">
-          <path d="M7 1 1 7" />
-          <path d="M7 4.5 4.5 7" />
-        </svg>
+        <div class="flex size-5 items-end justify-end p-1">
+          <svg viewBox="0 0 8 8" class="size-2.5" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round">
+            <path d="M7 1 1 7" />
+            <path d="M7 4.5 4.5 7" />
+          </svg>
+        </div>
       </div>
     </div>
   </div>

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

@@ -199,16 +199,28 @@ function acceptsSftp(field) {
 }
 const EXPR_TOKEN = "${{";
 const TYPED_KINDS = ["number", "boolean", "select", "multiselect"];
+const MAPPABLE_KINDS = [...TYPED_KINDS, "object"];
 const valueIsExpression = computed(() => typeof value.value === "string" && value.value.includes(EXPR_TOKEN));
 const canToggleExpression = computed(
-  () => (!!props.field.dynamic || TYPED_KINDS.includes(props.field.type)) && (!!props.field.expressionAllowed || valueIsExpression.value)
+  () => (!!props.field.dynamic || MAPPABLE_KINDS.includes(props.field.type)) && (!!props.field.expressionAllowed || valueIsExpression.value) && !holdsLiteralGroup.value
 );
+const holdsLiteralGroup = computed(() => {
+  if (props.field.type !== "object") return false;
+  const v = value.value;
+  if (Array.isArray(v)) return v.length > 0;
+  return !!v && typeof v === "object" && Object.keys(v).length > 0;
+});
 const exprMode = ref(false);
+watch(canToggleExpression, (can) => {
+  if (!can) exprMode.value = false;
+});
 const showExpression = computed(() => canToggleExpression.value && (exprMode.value || valueIsExpression.value));
 function toggleExpression() {
   if (showExpression.value) {
-    if (valueIsExpression.value) write(void 0);
+    const cleared = valueIsExpression.value || props.field.type === "object" && typeof value.value === "string";
+    if (cleared) write(void 0);
     exprMode.value = false;
+    if (isObjectField.value && (cleared || flatCapable.value)) objectMode.value = "form";
   } else {
     exprMode.value = true;
   }
@@ -269,7 +281,7 @@ const isQueryField = computed(
   () => props.field.type === "array" && props.field.items?.type !== "object" && /(^|__)queries$/.test(props.field.key)
 );
 const isJsonField = computed(
-  () => isObjectField.value && objectMode.value === "json" || props.field.type === "array" && props.field.items?.type !== "object" && !isQueryField.value
+  () => isObjectField.value && objectMode.value === "json" && !showExpression.value || props.field.type === "array" && props.field.items?.type !== "object" && !isQueryField.value
 );
 const jsonError = ref(null);
 const jsonDraft = ref("");
@@ -402,7 +414,9 @@ function setArrayItemField(index, fieldKey, v) {
     </div>
     <!-- object / plain-array fields: JSON editor (expressions stay usable
          inside string values). Wins over expressionAllowed — an object value
-         in a text input would render as [object Object]. -->
+         in a text input would render as [object Object] — except for an object
+         switched to, or saved as, a mapped value, which is the expression box
+         below (PO-608). -->
     <!-- queries parameter: filter builder -->
     <!-- vpn-route — public internet, or a route of one of the tenant's VPN
          connections, of the kind the node asks for (specs/credential-network.md
@@ -437,7 +451,7 @@ function setArrayItemField(index, fieldKey, v) {
     </template>
 
     <!-- object field in key/value mode -->
-    <div v-else-if="isObjectField && objectMode === 'form'" class="space-y-1.5">
+    <div v-else-if="isObjectField && objectMode === 'form' && !showExpression" class="space-y-1.5">
       <div v-for="(row, idx) in kvRows" :key="idx" class="flex items-center gap-1.5">
         <!-- A repeating row has no room for visible labels, so each control
              names itself and says which row of which field it belongs to. -->

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

@@ -3,6 +3,7 @@ import { computed, nextTick, ref, watch } from "vue";
 import { Position, useVueFlow } from "@vue-flow/core";
 import { NodeToolbar } from "@vue-flow/node-toolbar";
 import { TrashBinMinimalistic as TrashBin } from "#solar-icons";
+import { useCanvasTarget } from "../../composables/useCanvasTarget";
 const props = defineProps({
   id: { type: String, required: true },
   data: { type: Object, required: true },
@@ -34,6 +35,8 @@ const MIN_HEIGHT = 80;
 const width = ref(props.data.sticky.size?.width ?? DEFAULT_WIDTH);
 const height = ref(props.data.sticky.size?.height ?? DEFAULT_HEIGHT);
 const resizing = ref(false);
+const RESIZE_CORNER = 16;
+const resizeTarget = useCanvasTarget(RESIZE_CORNER);
 watch(() => props.data.sticky.size, (s) => {
   if (resizing.value) return;
   width.value = s?.width ?? DEFAULT_WIDTH;
@@ -191,7 +194,7 @@ function onViewMouseDown(e) {
 
   <!-- Card -->
   <div
-    class="relative flex flex-col overflow-hidden rounded-lg border text-sm leading-snug text-stone-700 shadow-sm"
+    class="relative flex flex-col rounded-lg border text-sm leading-snug text-stone-700 shadow-sm"
     :class="[
   selected ? 'ring-2 ring-emerald-400/60' : '',
   editing ? '' : 'cursor-grab active:cursor-grabbing'
@@ -209,7 +212,7 @@ function onViewMouseDown(e) {
     <!-- View mode -->
     <div
       v-if="!editing"
-      class="h-full w-full overflow-hidden whitespace-pre-wrap break-words px-3 py-2"
+      class="h-full w-full overflow-hidden rounded-[inherit] whitespace-pre-wrap break-words px-3 py-2"
       @mousedown="onViewMouseDown"
     >
       <!-- eslint-disable-next-line vue/no-v-html -- renderMarkdownLite escapes the note before it adds a tag -->
@@ -228,7 +231,7 @@ function onViewMouseDown(e) {
       ref="textareaEl"
       v-model="draft"
       :aria-label="t('integration.canvas.sticky.textarea.aria')"
-      class="nodrag nowheel h-full w-full resize-none bg-transparent px-3 py-2 text-sm leading-snug text-stone-700 outline-none placeholder:text-stone-400 focus:ring-2 focus:ring-inset focus:ring-stone-500/40"
+      class="nodrag nowheel h-full w-full resize-none rounded-[inherit] bg-transparent px-3 py-2 text-sm leading-snug text-stone-700 outline-none placeholder:text-stone-400 focus:ring-2 focus:ring-inset focus:ring-stone-500/40"
       :placeholder="t('integration.canvas.sticky.textarea.placeholder')"
       spellcheck="false"
       @blur="commitEdit"
@@ -239,20 +242,30 @@ function onViewMouseDown(e) {
 
     <!-- Bottom-right resize handle (hand-rolled; min 150x80). Gone on a
          read-only canvas: a handle that cannot resize is the same lie as a bin
-         that cannot delete. -->
+         that cannot delete. The hit area reaches past the note's corner (see
+         `resizeTarget`) — which is why the card no longer clips its overflow —
+         and the drawn corner sits in its top-left, exactly where it always sat. -->
     <div
       v-if="editable"
-      class="nodrag absolute bottom-0 right-0 flex size-4 cursor-se-resize items-end justify-end p-0.5 text-stone-400/80"
+      class="nodrag absolute cursor-se-resize"
+      :style="{
+  width: `${resizeTarget}px`,
+  height: `${resizeTarget}px`,
+  right: `${RESIZE_CORNER - resizeTarget}px`,
+  bottom: `${RESIZE_CORNER - resizeTarget}px`
+}"
       :title="t('integration.canvas.sticky.action.resize')"
       @pointerdown="onResizeStart"
       @pointermove="onResizeMove"
       @pointerup="onResizeEnd"
       @pointercancel="onResizeEnd"
     >
-      <svg viewBox="0 0 8 8" class="size-2.5" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round">
-        <path d="M7 1 1 7" />
-        <path d="M7 4.5 4.5 7" />
-      </svg>
+      <div class="flex size-4 items-end justify-end p-0.5 text-stone-400/80">
+        <svg viewBox="0 0 8 8" class="size-2.5" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round">
+          <path d="M7 1 1 7" />
+          <path d="M7 4.5 4.5 7" />
+        </svg>
+      </div>
     </div>
   </div>
 </template>

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

@@ -92,6 +92,7 @@ function onHoverLeave() {
   }, 200);
 }
 const toolsVisible = computed(() => edgeActions !== null && !props.data?.replay && (hovered.value || isSelected.value));
+const unzoom = computed(() => 1 / (flow.viewport.value.zoom || 1));
 function removeEdge() {
   flow.removeEdges([props.id]);
 }
@@ -128,7 +129,7 @@ function spliceNode() {
     <div
       class="absolute pointer-events-none select-none rounded-md border px-1.5 py-0.5 text-mono shadow-sm"
       :style="{
-  transform: `translate(-50%, -50%) translate(${path[1]}px, ${path[2] - (toolsVisible ? 16 : 0)}px)`,
+  transform: `translate(-50%, -50%) translate(${path[1]}px, ${path[2] - (toolsVisible ? 16 * unzoom : 0)}px)`,
   color: color.label,
   background: color.bg,
   borderColor: color.stroke + '55'
@@ -142,7 +143,7 @@ function spliceNode() {
   <EdgeLabelRenderer v-if="toolsVisible">
     <div
       class="absolute z-20 flex items-center gap-0.5 rounded-md border border-black/[0.08] bg-white p-0.5 shadow-md"
-      :style="{ transform: `translate(-50%, -50%) translate(${path[1]}px, ${path[2] + (props.data?.label ? 14 : 0)}px)`, pointerEvents: 'all' }"
+      :style="{ transform: `translate(-50%, -50%) translate(${path[1]}px, ${path[2] + (props.data?.label ? 14 * unzoom : 0)}px) scale(${unzoom})`, pointerEvents: 'all' }"
       @mouseenter="onHoverEnter"
       @mouseleave="onHoverLeave"
     >

package/dist/runtime/composables/useCanvasTarget.d.ts

@@ -0,0 +1,15 @@
+import { type ComputedRef } from 'vue';
+/**
+ * The smallest a pointer target may be on screen — WCAG 2.2 SC 2.5.8, promised in
+ * `specs/accessibility.md` AC-7.
+ */
+export declare const MIN_TARGET_PX = 24;
+/**
+ * The canvas-pixel size a control drawn **inside** the zoom transform needs so that it
+ * still measures `MIN_TARGET_PX` on screen, and never less than the `drawn` size it
+ * has at full zoom. Zoomed out to 50 %, a target has to be 48 canvas pixels to be hit
+ * as 24 — which is the whole problem with a control the canvas scales (PO-388).
+ */
+export declare function targetSize(drawn: number, zoom: number): number;
+/** `targetSize` against the live viewport of the canvas this component sits on. */
+export declare function useCanvasTarget(drawn: number): ComputedRef<number>;

package/dist/runtime/composables/useCanvasTarget.js

@@ -0,0 +1,10 @@
+import { computed } from "vue";
+import { useVueFlow } from "@vue-flow/core";
+export const MIN_TARGET_PX = 24;
+export function targetSize(drawn, zoom) {
+  return Math.max(drawn, MIN_TARGET_PX / (zoom || 1));
+}
+export function useCanvasTarget(drawn) {
+  const flow = useVueFlow();
+  return computed(() => targetSize(drawn, flow.viewport.value.zoom));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@revenexx/studio-integrations",
-  "version": "3.8.0",
+  "version": "3.8.2",
   "type": "module",
   "description": "Integration Studio (core: workflows, node editor, runs, schedules, credentials, secrets, audit) as a standalone, publishable Nuxt module.",
   "repository": {