@revenexx/studio-integrations 1.4.1 → 2.1.0

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

@@ -91,143 +91,143 @@ function onResizeEnd() {
 
 <template>
   <div class="relative">
-  <NodeToolbar :is-visible="toolbarVisible" :position="Position.Top" :offset="8">
-    <div
-      class="flex items-center gap-1 rounded-lg border border-black/[0.06] bg-white px-1.5 py-1 shadow-md"
-      @mouseenter="onHoverEnter"
-      @mouseleave="onHoverLeave"
-    >
-      <button
-        v-for="(c, i) in GROUP_COLORS"
-        :key="i"
-        type="button"
-        class="size-6 rounded-full border transition hover:scale-110"
-        :class="(data.group.color ?? 4) === i ? 'ring-2 ring-black/25 ring-offset-1' : ''"
-        :style="{ backgroundColor: c.chip, borderColor: c.border }"
-        :title="t(c.nameKey)"
-        :aria-label="t(c.nameKey)"
-        @click="data.actions?.setColor(i)"
-      />
-      <div class="mx-0.5 h-4 w-px bg-black/10" />
-      <button
-        type="button"
-        class="flex size-6 items-center justify-center rounded-md text-muted-foreground transition hover:bg-muted/50 hover:text-foreground"
-        :title="collapsed ? t('integration.canvas.group.action.expand') : t('integration.canvas.group.action.collapse')"
-        @click="data.actions?.toggleCollapse()"
-      >
-        <component :is="collapsed ? ChevronsUpDown : ChevronsDownUp" :size="13" />
-      </button>
-      <button
-        type="button"
-        class="flex size-6 items-center justify-center rounded-md text-muted-foreground transition hover:bg-muted/50 hover:text-foreground"
-        :title="t('integration.canvas.group.action.ungroup')"
-        @click="data.actions?.ungroup()"
+    <NodeToolbar :is-visible="toolbarVisible" :position="Position.Top" :offset="8">
+      <div
+        class="flex items-center gap-1 rounded-lg border border-black/[0.06] bg-white px-1.5 py-1 shadow-md"
+        @mouseenter="onHoverEnter"
+        @mouseleave="onHoverLeave"
       >
-        <Ungroup :size="13" />
-      </button>
-      <button
-        type="button"
-        class="flex size-6 items-center justify-center rounded-md text-muted-foreground transition hover:bg-rose-50 hover:text-rose-600"
-        :title="t('integration.canvas.group.action.removeFrame')"
-        @click="data.actions?.ungroup()"
-      >
-        <TrashBin :size="13" />
-      </button>
-    </div>
-  </NodeToolbar>
+        <button
+          v-for="(c, i) in GROUP_COLORS"
+          :key="i"
+          type="button"
+          class="size-6 rounded-full border transition hover:scale-110"
+          :class="(data.group.color ?? 4) === i ? 'ring-2 ring-black/25 ring-offset-1' : ''"
+          :style="{ backgroundColor: c.chip, borderColor: c.border }"
+          :title="t(c.nameKey)"
+          :aria-label="t(c.nameKey)"
+          @click="data.actions?.setColor(i)"
+        />
+        <div class="mx-0.5 h-4 w-px bg-black/10" />
+        <button
+          type="button"
+          class="flex size-6 items-center justify-center rounded-md text-muted-foreground transition hover:bg-muted/50 hover:text-foreground"
+          :title="collapsed ? t('integration.canvas.group.action.expand') : t('integration.canvas.group.action.collapse')"
+          @click="data.actions?.toggleCollapse()"
+        >
+          <component :is="collapsed ? ChevronsUpDown : ChevronsDownUp" :size="13" />
+        </button>
+        <button
+          type="button"
+          class="flex size-6 items-center justify-center rounded-md text-muted-foreground transition hover:bg-muted/50 hover:text-foreground"
+          :title="t('integration.canvas.group.action.ungroup')"
+          @click="data.actions?.ungroup()"
+        >
+          <Ungroup :size="13" />
+        </button>
+        <button
+          type="button"
+          class="flex size-6 items-center justify-center rounded-md text-muted-foreground transition hover:bg-rose-50 hover:text-rose-600"
+          :title="t('integration.canvas.group.action.removeFrame')"
+          @click="data.actions?.ungroup()"
+        >
+          <TrashBin :size="13" />
+        </button>
+      </div>
+    </NodeToolbar>
 
-  <!-- Collapsed: compact stand-in card with generic edge handles. -->
-  <template v-if="collapsed">
-    <Handle
-      :id="inputHandleId('top')"
-      type="target"
-      :position="Position.Top"
-      class="!size-3 !rounded-full !border-2 !border-white !bg-slate-500 !shadow-sm"
-    />
-    <!-- The collapsed card stops its own double-click unconditionally, which is
+    <!-- Collapsed: compact stand-in card with generic edge handles. -->
+    <template v-if="collapsed">
+      <Handle
+        :id="inputHandleId('top')"
+        type="target"
+        :position="Position.Top"
+        class="!size-3 !rounded-full !border-2 !border-white !bg-slate-500 !shadow-sm"
+      />
+      <!-- The collapsed card stops its own double-click unconditionally, which is
          safe: both read-only panels build every frame with `collapsed: false`, so
          this surface is the editor's alone. -->
-    <div
-      class="w-[220px] rounded-lg border-2 bg-white transition-all duration-150"
-      :style="{ borderColor: color.border }"
-      :class="selected ? 'shadow-[0_0_0_2px_rgba(59,130,246,0.2)]' : 'shadow-sm hover:shadow-md'"
-      @mouseenter="onHoverEnter"
-      @mouseleave="onHoverLeave"
-      @dblclick.stop="data.actions?.toggleCollapse()"
-    >
-      <div class="flex items-center gap-2.5 px-3 py-2.5">
-        <span class="flex size-8 shrink-0 items-center justify-center rounded-md text-white" :style="{ backgroundColor: color.chip }">
-          <ChevronsUpDown :size="15" />
-        </span>
-        <div class="min-w-0 flex-1">
-          <div class="truncate text-sm font-semibold leading-tight text-foreground">{{ label }}</div>
-          <div class="mt-0.5 text-sm text-muted-foreground">{{ memberCountText }}</div>
+      <div
+        class="w-[220px] rounded-lg border-2 bg-white transition-all duration-150"
+        :style="{ borderColor: color.border }"
+        :class="selected ? 'shadow-[0_0_0_2px_rgba(59,130,246,0.2)]' : 'shadow-sm hover:shadow-md'"
+        @mouseenter="onHoverEnter"
+        @mouseleave="onHoverLeave"
+        @dblclick.stop="data.actions?.toggleCollapse()"
+      >
+        <div class="flex items-center gap-2.5 px-3 py-2.5">
+          <span class="flex size-8 shrink-0 items-center justify-center rounded-md text-white" :style="{ backgroundColor: color.chip }">
+            <ChevronsUpDown :size="15" />
+          </span>
+          <div class="min-w-0 flex-1">
+            <div class="truncate text-sm font-semibold leading-tight text-foreground">{{ label }}</div>
+            <div class="mt-0.5 text-sm text-muted-foreground">{{ memberCountText }}</div>
+          </div>
         </div>
       </div>
-    </div>
-    <Handle
-      :id="outputHandleId('default', 'bottom')"
-      type="source"
-      :position="Position.Bottom"
-      class="!size-3 !rounded-full !border-2 !border-white !bg-slate-500 !shadow-sm"
-    />
-  </template>
+      <Handle
+        :id="outputHandleId('default', 'bottom')"
+        type="source"
+        :position="Position.Bottom"
+        class="!size-3 !rounded-full !border-2 !border-white !bg-slate-500 !shadow-sm"
+      />
+    </template>
 
-  <!-- Expanded: the frame behind the members. -->
-  <div
-    v-else
-    class="pointer-events-none relative rounded-xl border-2 border-dashed transition-colors"
-    :class="selected ? 'shadow-[0_0_0_2px_rgba(59,130,246,0.15)]' : ''"
-    :style="{
+    <!-- Expanded: the frame behind the members. -->
+    <div
+      v-else
+      class="pointer-events-none relative rounded-xl border-2 border-dashed transition-colors"
+      :class="selected ? 'shadow-[0_0_0_2px_rgba(59,130,246,0.15)]' : ''"
+      :style="{
   width: `${frameW}px`,
   height: `${frameH}px`,
   backgroundColor: color.bg,
   borderColor: color.border
 }"
-  >
-    <div
-      class="pointer-events-auto flex cursor-grab items-center gap-1.5 px-3 pt-1.5 active:cursor-grabbing"
-      @mouseenter="onHoverEnter"
-      @mouseleave="onHoverLeave"
     >
-      <input
-        v-if="editing"
-        ref="inputEl"
-        v-model="draft"
-        :aria-label="t('integration.canvas.group.input.nameAria')"
-        class="nodrag w-40 rounded border border-black/[0.1] bg-white px-1 py-0.5 text-sm font-semibold focus:outline-none focus:ring-2 focus:ring-primary/40"
-        @blur="commitRename"
-        @keydown.enter.prevent="commitRename"
-        @keydown.stop
-        @mousedown.stop
+      <div
+        class="pointer-events-auto flex cursor-grab items-center gap-1.5 px-3 pt-1.5 active:cursor-grabbing"
+        @mouseenter="onHoverEnter"
+        @mouseleave="onHoverLeave"
       >
-      <span
-        v-else
-        class="select-none text-sm font-semibold"
+        <input
+          v-if="editing"
+          ref="inputEl"
+          v-model="draft"
+          :aria-label="t('integration.canvas.group.input.nameAria')"
+          class="nodrag w-40 rounded border border-black/[0.1] bg-white px-1 py-0.5 text-sm font-semibold focus:outline-none focus:ring-2 focus:ring-primary/40"
+          @blur="commitRename"
+          @keydown.enter.prevent="commitRename"
+          @keydown.stop
+          @mousedown.stop
+        >
+        <span
+          v-else
+          class="select-none text-sm font-semibold"
+          :style="{ color: color.chip }"
+          @dblclick="onLabelDoubleClick"
+        >
+          {{ label }}
+        </span>
+        <span class="select-none text-xs text-muted-foreground">· {{ memberCountText }}</span>
+      </div>
+
+      <!-- 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 }"
-        @dblclick="onLabelDoubleClick"
+        :title="t('integration.canvas.group.action.resize')"
+        @pointerdown="onResizeStart"
+        @pointermove="onResizeMove"
+        @pointerup="onResizeEnd"
+        @pointercancel="onResizeEnd"
       >
-        {{ label }}
-      </span>
-      <span class="select-none text-xs text-muted-foreground">· {{ memberCountText }}</span>
-    </div>
-
-    <!-- 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 }"
-      :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>
+        <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>
 </template>

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

@@ -19,6 +19,7 @@ import { fromModelValue, toItemValue, toModelValue } from "../../utils/selectOpt
 import { credentialState } from "../../utils/credentialState";
 import { defaultsFor } from "../../utils/configDefaults";
 import { applyingFields, settingApplies, staleKeys } from "../../utils/settingCondition";
+import { coerceSettingValue } from "../../utils/settingValue";
 const props = defineProps({
   field: { type: Object, required: true },
   config: { type: Object, required: true },
@@ -38,8 +39,20 @@ const emit = defineEmits(["set", "declare-state"]);
 const t = useIntegrationsT();
 const value = computed(() => props.config[props.field.key]);
 function write(v) {
+  emit("set", props.field.key, coerceSettingValue(props.field, v));
+}
+function writeTyped(v) {
   emit("set", props.field.key, v);
 }
+function commitTyped() {
+  const committed = coerceSettingValue(props.field, value.value);
+  if (committed !== value.value) emit("set", props.field.key, committed);
+}
+const expressionText = computed(() => {
+  const v = value.value;
+  if (typeof v === "string") return v;
+  return typeof v === "number" ? String(v) : "";
+});
 const exprHint = "${{ \u2026 }}";
 const descriptionText = computed(() => resolveLocalized(props.field.description));
 const inRow = computed(() => props.rowIndex !== void 0);
@@ -65,9 +78,10 @@ const formatError = computed(() => {
       }
     }
   }
-  if (typeof v === "number") {
-    if (val.min != null && v < val.min) return t("integration.nodeConfig.validation.min", { min: val.min });
-    if (val.max != null && v > val.max) return t("integration.nodeConfig.validation.max", { max: val.max });
+  const n = coerceSettingValue(props.field, v);
+  if (typeof n === "number") {
+    if (val.min != null && n < val.min) return t("integration.nodeConfig.validation.min", { min: val.min });
+    if (val.max != null && n > val.max) return t("integration.nodeConfig.validation.max", { max: val.max });
   }
   return null;
 });
@@ -433,14 +447,15 @@ function setArrayItemField(index, fieldKey, v) {
     <!-- typed control flipped to expression mode -->
     <IntegrationsExpressionInput
       v-else-if="showExpression"
-      :model-value="typeof value === 'string' ? value : ''"
+      :model-value="expressionText"
       :placeholder="resolveLocalized(field.placeholder)"
       :variables="variables"
       :upstream-outputs="upstreamOutputs"
       :invalid="invalid"
       :label="controlName"
       :multiline="isMultiline"
-      @update:model-value="(v) => write(v)"
+      @update:model-value="(v) => writeTyped(v)"
+      @blur="commitTyped"
     />
 
     <!-- dynamic options — resolved at author time via config:resolve. Ahead of

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

@@ -193,9 +193,12 @@ const parameterFields = computed(() => applyingConfig.value.filter((f) => !SETTI
 const settingsFields = computed(() => applyingConfig.value.filter((f) => SETTINGS_FIELD_KEY.test(f.key)));
 const FOLD_ABOVE = 4;
 const ALWAYS_DRAWN = 3;
-const foldedFields = computed(
-  () => parameterFields.value.length > FOLD_ABOVE ? parameterFields.value.slice(ALWAYS_DRAWN).filter((f) => !f.required) : []
-);
+const foldedFields = computed(() => {
+  const fields = parameterFields.value;
+  if (fields.length <= FOLD_ABOVE) return [];
+  const lastRequired = fields.findLastIndex((f) => f.required);
+  return fields.slice(Math.max(ALWAYS_DRAWN, lastRequired + 1));
+});
 const foldedKeys = computed(() => new Set(foldedFields.value.map((f) => f.key)));
 const foldAnchorKey = computed(() => foldedFields.value[0]?.key);
 function optionalShouldOpen() {
@@ -1215,7 +1218,7 @@ async function runTestStep() {
                   </span>
                 </button>
                 <div v-show="!sectionClosed(s.id)" class="space-y-2 border-t border-black/[0.06] px-2 py-2">
-                <!-- These ports belong to an UPSTREAM node, so the sentence is that
+                  <!-- These ports belong to an UPSTREAM node, so the sentence is that
                      node's. On a 300px column it is a tooltip rather than text: the
                      values below are what this panel is for, and a sentence per port
                      pushes them out of view. The readable copy is the Output tab
@@ -1233,50 +1236,50 @@ async function runTestStep() {
                      sentence is read by resting on the port's name or the space around
                      its rows rather than on a row itself. Where a reader is owed the
                      text outright, that is the Output tab. -->
-                <div
-                  v-for="p in s.ports"
-                  :key="p.name"
-                  class="space-y-1 pl-0.5"
-                  :title="resolveLocalized(p.description) || void 0"
-                >
-                  <div v-if="s.ports.length > 1 || p.kind !== 'default'" class="flex items-center gap-1.5">
-                    <span class="size-1.5 rounded-full" :class="portDotClass(p.kind, p.name)" />
-                    <span class="text-[10px] font-medium uppercase tracking-wider text-muted-foreground">{{ p.name }}</span>
-                  </div>
-                  <!-- Schema rows, n8n-style: glyph · key · sampled value. -->
-                  <div class="space-y-px">
-                    <button
-                      type="button"
-                      :class="rowClass"
-                      :aria-label="nodeOutputExpr(s.id, p.name)"
-                      :title="nodeOutputExpr(s.id, p.name)"
-                      draggable="true"
-                      @dragstart="onChipDragStart($event, nodeOutputExpr(s.id, p.name))"
-                      @click="insertExpression(nodeOutputExpr(s.id, p.name))"
-                    >
-                      <span class="w-3 shrink-0 text-center font-semibold text-slate-400">{}</span>
-                      <span class="shrink-0 font-medium"><span v-for="(seg, i) in highlightSegments(p.name)" :key="i" :class="seg.hit ? 'rounded-[2px] bg-amber-200/80' : ''">{{ seg.text }}</span></span>
-                    </button>
-                    <div class="space-y-px pl-3">
+                  <div
+                    v-for="p in s.ports"
+                    :key="p.name"
+                    class="space-y-1 pl-0.5"
+                    :title="resolveLocalized(p.description) || void 0"
+                  >
+                    <div v-if="s.ports.length > 1 || p.kind !== 'default'" class="flex items-center gap-1.5">
+                      <span class="size-1.5 rounded-full" :class="portDotClass(p.kind, p.name)" />
+                      <span class="text-[10px] font-medium uppercase tracking-wider text-muted-foreground">{{ p.name }}</span>
+                    </div>
+                    <!-- Schema rows, n8n-style: glyph · key · sampled value. -->
+                    <div class="space-y-px">
                       <button
-                        v-for="f in p.fields"
-                        :key="f.name"
                         type="button"
                         :class="rowClass"
-                        :aria-label="nodeOutputExpr(s.id, p.name, f.name)"
-                        :title="nodeOutputExpr(s.id, p.name, f.name) + (f.dataType ? ' \xB7 ' + f.dataType : '')"
+                        :aria-label="nodeOutputExpr(s.id, p.name)"
+                        :title="nodeOutputExpr(s.id, p.name)"
                         draggable="true"
-                        @dragstart="onChipDragStart($event, nodeOutputExpr(s.id, p.name, f.name))"
-                        @click="insertExpression(nodeOutputExpr(s.id, p.name, f.name))"
+                        @dragstart="onChipDragStart($event, nodeOutputExpr(s.id, p.name))"
+                        @click="insertExpression(nodeOutputExpr(s.id, p.name))"
                       >
-                        <span class="w-3 shrink-0 text-center font-semibold" :class="typeGlyph(f.dataType)?.cls ?? 'text-slate-300'">{{ typeGlyph(f.dataType)?.char ?? "\xB7" }}</span>
-                        <span class="shrink-0"><span v-for="(seg, i) in highlightSegments(f.name)" :key="i" :class="seg.hit ? 'rounded-[2px] bg-amber-200/80' : ''">{{ seg.text }}</span></span>
-                        <span v-if="chipValue(s.id, p.name, f.name) !== null" class="min-w-0 flex-1 truncate text-slate-400">{{ chipValue(s.id, p.name, f.name) }}</span>
+                        <span class="w-3 shrink-0 text-center font-semibold text-slate-400">{}</span>
+                        <span class="shrink-0 font-medium"><span v-for="(seg, i) in highlightSegments(p.name)" :key="i" :class="seg.hit ? 'rounded-[2px] bg-amber-200/80' : ''">{{ seg.text }}</span></span>
                       </button>
+                      <div class="space-y-px pl-3">
+                        <button
+                          v-for="f in p.fields"
+                          :key="f.name"
+                          type="button"
+                          :class="rowClass"
+                          :aria-label="nodeOutputExpr(s.id, p.name, f.name)"
+                          :title="nodeOutputExpr(s.id, p.name, f.name) + (f.dataType ? ' \xB7 ' + f.dataType : '')"
+                          draggable="true"
+                          @dragstart="onChipDragStart($event, nodeOutputExpr(s.id, p.name, f.name))"
+                          @click="insertExpression(nodeOutputExpr(s.id, p.name, f.name))"
+                        >
+                          <span class="w-3 shrink-0 text-center font-semibold" :class="typeGlyph(f.dataType)?.cls ?? 'text-slate-300'">{{ typeGlyph(f.dataType)?.char ?? "\xB7" }}</span>
+                          <span class="shrink-0"><span v-for="(seg, i) in highlightSegments(f.name)" :key="i" :class="seg.hit ? 'rounded-[2px] bg-amber-200/80' : ''">{{ seg.text }}</span></span>
+                          <span v-if="chipValue(s.id, p.name, f.name) !== null" class="min-w-0 flex-1 truncate text-slate-400">{{ chipValue(s.id, p.name, f.name) }}</span>
+                        </button>
+                      </div>
                     </div>
                   </div>
                 </div>
-                </div>
               </div>
             </div>
 
@@ -1838,9 +1841,9 @@ async function runTestStep() {
                   :depth="0"
                   :variables="variables"
                   :state-namespaces="offeredStateNamespaces"
-                  @declare-state="stageStateNamespace"
                   :upstream-outputs="upstreamOutputs"
                   :refused="refusedFields?.[field.key]"
+                  @declare-state="stageStateNamespace"
                   @set="(k, v) => writeConfig(k, v)"
                 />
               </template>
@@ -1881,9 +1884,9 @@ async function runTestStep() {
                 :depth="0"
                 :variables="variables"
                 :state-namespaces="offeredStateNamespaces"
-                @declare-state="stageStateNamespace"
                 :upstream-outputs="upstreamOutputs"
                 :refused="refusedFields?.[field.key]"
+                @declare-state="stageStateNamespace"
                 @set="(k, v) => writeConfig(k, v)"
               />
             </div>

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

@@ -4,7 +4,8 @@ import { AltArrowLeft as ArrowLeft, Bolt as Zap, Magnifier as Search } from "#so
 import { triggerGlyph } from "../../data/triggerGlyphs";
 import * as Lucide from "lucide-vue-next";
 import { INTEGRATION_NODE_CATALOG, NODE_CATEGORIES, TRIGGER_TEMPLATES } from "../../data/integrationNodeCatalog";
-import { resolveLocalized } from "../../utils/localize";
+import { resolveLocalized, studioLocale } from "../../utils/localize";
+import { orderFolderLeaves, orderFolders } from "../../utils/paletteOrder";
 const { load: loadNodes } = useIntegrationsNodes();
 onMounted(() => {
   void loadNodes();
@@ -14,29 +15,39 @@ const emit = defineEmits(["insert"]);
 const search = ref("");
 const searchInput = ref(null);
 defineExpose({ focusSearch: () => searchInput.value?.focus() });
-const CORE_GROUP_BY_CATEGORY = {
+const CORE_FOLDERS = {
+  Flow: { message: "integration.canvas.palette.folder.flow", icon: "Split", color: "bg-slate-100 text-rose-600/80" },
+  Data: { message: "integration.canvas.palette.folder.data", icon: "Database", color: "bg-slate-100 text-amber-700/80" },
+  "Text & Formats": { message: "integration.canvas.palette.folder.textAndFormats", icon: "Type", color: "bg-slate-100 text-orange-600/80" },
+  Files: { message: "integration.canvas.palette.folder.files", icon: "Files", color: "bg-slate-100 text-yellow-700/80" },
+  Web: { message: "integration.canvas.palette.folder.web", icon: "Globe", color: "bg-slate-100 text-sky-600/80" },
+  Messaging: { message: "integration.canvas.palette.folder.messaging", icon: "MessageCircle", color: "bg-slate-100 text-violet-600/80" },
+  "FTP / SFTP": { message: "integration.canvas.palette.folder.ftpSftp", icon: "FolderSync", color: "bg-slate-100 text-teal-600/80" },
+  Actions: { message: "integration.canvas.palette.folder.actions", icon: "Wand2", color: "bg-slate-100 text-sky-600/80" },
+  Other: { message: "integration.canvas.palette.folder.misc", icon: "FolderOpen", color: "bg-slate-100 text-slate-500" }
+};
+const CORE_FOLDER_BY_CATEGORY = {
   control: "Flow",
   transform: "Data",
   io: "Data",
-  action: "Actions",
-  trigger: "Triggers"
+  action: "Actions"
 };
 const CORE_LABEL_ALIAS = {
   "Flow control": "Flow",
-  "Files": "Data",
-  "Files & I/O": "Data",
-  "Network": "Messaging"
-};
-const CORE_GROUP_META = {
-  "Data": { icon: "Database", color: "bg-slate-100 text-amber-700/80" },
-  "Flow": { icon: "Split", color: "bg-slate-100 text-rose-600/80" },
-  "Messaging": { icon: "MessageCircle", color: "bg-slate-100 text-violet-600/80" },
-  "Actions": { icon: "Wand2", color: "bg-slate-100 text-sky-600/80" }
+  "Files & I/O": "Files",
+  Network: "Web"
 };
-function coreGroupIcon(label) {
-  const meta = CORE_GROUP_META[label];
+function coreGroupIcon(key) {
+  const meta = key ? CORE_FOLDERS[key] : void 0;
   return meta && Lucide[meta.icon] || Lucide.FolderOpen;
 }
+function coreFolder(m) {
+  const own = m.groups?.[0];
+  const ownKey = own ? resolveLocalized(own, "en") : "";
+  const key = ownKey && (CORE_LABEL_ALIAS[ownKey] ?? ownKey) || CORE_FOLDER_BY_CATEGORY[m.category] || "Other";
+  const known = CORE_FOLDERS[key];
+  return { key, label: known ? t(known.message) : resolveLocalized(own) };
+}
 const VERB_PREFIX = /^(create|get|list|update|delete|search|send|sync|upsert|cancel)-(.+)$/;
 function titleize(kebab) {
   return kebab.split("-").map((s) => s.charAt(0).toUpperCase() + s.slice(1)).join(" ");
@@ -58,7 +69,7 @@ function groupPath(m) {
   if (m.groups?.length) {
     const path = m.groups.map((g) => resolveLocalized(g)).filter(Boolean);
     if (isIntegration(m) || !path.length) return path;
-    return [CORE_LABEL_ALIAS[path[0]] ?? path[0], ...path.slice(1)];
+    return [coreFolder(m).label, ...path.slice(1)];
   }
   if (isAppPackage(m.__package)) {
     const app = packageAppLabel(m.__package);
@@ -68,10 +79,10 @@ function groupPath(m) {
     const verb = VERB_PREFIX.exec(rest);
     return verb ? [app, titleize(verb[2])] : [app];
   }
-  return [CORE_GROUP_BY_CATEGORY[m.category] ?? "Other"];
+  return [coreFolder(m).label];
 }
 function isIntegration(m) {
-  return isAppPackage(m.__package) || (m.groups?.length ?? 0) > 1 || hasLogo(m);
+  return isAppPackage(m.__package) || hasLogo(m);
 }
 function makeGroup(label) {
   return { label, children: /* @__PURE__ */ new Map(), leaves: [], count: 0 };
@@ -124,32 +135,36 @@ const tree = computed(() => {
     const root = isIntegration(m) ? apps : core;
     let cursor = root;
     cursor.count++;
-    for (const label of path) {
-      if (!cursor.children.has(label)) cursor.children.set(label, makeGroup(label));
+    for (const [depth, label] of path.entries()) {
+      if (!cursor.children.has(label)) {
+        const group = makeGroup(label);
+        if (root === core && depth === 0) group.key = coreFolder(m).key;
+        cursor.children.set(label, group);
+      }
       cursor = cursor.children.get(label);
       cursor.count++;
     }
     cursor.leaves.push(m);
   }
+  const locale = studioLocale();
+  const order = (g) => {
+    g.leaves = orderFolderLeaves(g.leaves);
+    g.children = orderFolders(g.children, locale);
+    for (const child of g.children.values()) order(child);
+  };
+  order(apps);
+  order(core);
   return { apps, core };
 });
-const appRows = computed(() => {
-  const rows = Array.from(tree.value.apps.children.entries());
-  const sftpIdx = rows.findIndex(([label]) => label === "SFTP");
-  const ftpIdx = rows.findIndex(([label]) => label === "FTP");
-  if (ftpIdx !== -1 && sftpIdx !== -1 && sftpIdx !== ftpIdx + 1) {
-    const [sftp] = rows.splice(sftpIdx, 1);
-    rows.splice(rows.findIndex(([label]) => label === "FTP") + 1, 0, sftp);
-  }
-  return rows;
-});
+const appRows = computed(() => Array.from(tree.value.apps.children.entries()));
 function subtreeManifests(g) {
   const out = [...g.leaves];
   for (const child of g.children.values()) out.push(...subtreeManifests(child));
   return out;
 }
 function groupLogoManifest(g) {
-  return subtreeManifests(g).find(hasLogo) ?? null;
+  const all = subtreeManifests(g);
+  return all.find(hasLogo) ?? all.find((m) => (m.images ?? []).length > 0) ?? null;
 }
 const stack = ref([]);
 const direction = ref("push");
@@ -259,10 +274,10 @@ function insertManifest(leaf) {
 function insertTrigger(tpl) {
   emit("insert", { kind: "trigger", type: tpl.type });
 }
-function categoryColor(label) {
-  const meta = CORE_GROUP_META[label];
+function categoryColor(key) {
+  const meta = key ? CORE_FOLDERS[key] : void 0;
   if (meta) return meta.color;
-  const cat = NODE_CATEGORIES.find((c) => c.label === label || CORE_GROUP_BY_CATEGORY[String(c.key)] === label);
+  const cat = NODE_CATEGORIES.find((c) => CORE_FOLDER_BY_CATEGORY[String(c.key)] === key);
   return cat?.color ?? "bg-slate-100 text-slate-500";
 }
 function nodeCategoryColor(m) {
@@ -397,7 +412,7 @@ const searching = computed(() => search.value.trim().length > 0);
               draggable="true"
               :title="resolveLocalized(tpl.name)"
               @dragstart="onTriggerDragStart(tpl, $event)"
-                @dragend="onDragEnd"
+              @dragend="onDragEnd"
               @click="insertTrigger(tpl)"
             >
               <span class="flex size-6 shrink-0 items-center justify-center rounded-md bg-emerald-100 text-emerald-600">
@@ -434,8 +449,8 @@ const searching = computed(() => search.value.trim().length > 0);
                 class="flex w-full items-center gap-2 rounded-md border border-transparent px-2 py-1.5 text-left transition hover:border-black/[0.08] hover:bg-muted/40"
                 @click="pushPath(['__core', label])"
               >
-                <span class="flex size-6 shrink-0 items-center justify-center rounded-md" :class="categoryColor(label)">
-                  <component :is="coreGroupIcon(label)" :size="13" />
+                <span class="flex size-6 shrink-0 items-center justify-center rounded-md" :class="categoryColor(group.key)">
+                  <component :is="coreGroupIcon(group.key)" :size="13" />
                 </span>
                 <span class="min-w-0 flex-1 truncate text-sm font-medium">{{ label }}</span>
                 <span class="text-sm tabular-nums text-muted-foreground">{{ group.count }}</span>