@revenexx/studio-integrations 0.1.4 → 0.3.0

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

@@ -1,140 +1,461 @@
 <script setup>
-import { computed, ref } from "vue";
+import { computed, ref, watch } from "vue";
 import * as Lucide from "lucide-vue-next";
 import { INTEGRATION_NODE_CATALOG, NODE_CATEGORIES, TRIGGER_TEMPLATES } from "../../data/integrationNodeCatalog";
 const { load: loadNodes } = useIntegrationsNodes();
 onMounted(() => {
   void loadNodes();
 });
+const emit = defineEmits(["insert"]);
 const search = ref("");
-function labelOf(value) {
-  if (!value) return "";
-  return typeof value === "string" ? value : Object.values(value)[0] ?? "";
-}
-function descOf(value) {
+const searchInput = ref(null);
+defineExpose({ focusSearch: () => searchInput.value?.focus() });
+function loc(value) {
   if (!value) return "";
   return typeof value === "string" ? value : value.en ?? Object.values(value)[0] ?? "";
 }
-const grouped = computed(() => {
+function iconFor(name) {
+  if (!name) return Lucide.Box;
+  const cleaned = (name.includes(":") ? name.split(":").pop() : name).split("-").map((s) => s.charAt(0).toUpperCase() + s.slice(1)).join("");
+  return Lucide[cleaned] || Lucide.Box;
+}
+const CORE_GROUP_BY_CATEGORY = {
+  control: "Flow",
+  transform: "Data",
+  io: "Data",
+  action: "Actions",
+  trigger: "Triggers"
+};
+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" }
+};
+function coreGroupIcon(label) {
+  const meta = CORE_GROUP_META[label];
+  return meta && Lucide[meta.icon] || Lucide.FolderOpen;
+}
+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(" ");
+}
+function packageAppLabel(pkg) {
+  if (pkg.label) return pkg.label;
+  const tail = pkg.name.split("/").pop() ?? pkg.name;
+  return titleize(tail.replace(/^integrations-nodes-/, ""));
+}
+function isAppPackage(pkg) {
+  if (!pkg) return false;
+  const tail = pkg.name.split("/").pop() ?? pkg.name;
+  return tail.startsWith("integrations-nodes-") && tail !== "integrations-nodes-core";
+}
+function hasLogo(m) {
+  return (m.images ?? []).some((i) => i.category === "logo");
+}
+function groupPath(m) {
+  if (m.groups?.length) {
+    const path = m.groups.map((g) => loc(g)).filter(Boolean);
+    if (isIntegration(m) || !path.length) return path;
+    return [CORE_LABEL_ALIAS[path[0]] ?? path[0], ...path.slice(1)];
+  }
+  if (isAppPackage(m.__package)) {
+    const app = packageAppLabel(m.__package);
+    const local = m.slug.split(":").pop() ?? m.slug;
+    const pkgKey = (m.__package.name.split("/").pop() ?? "").replace(/^integrations-nodes-/, "");
+    const rest = local.startsWith(`${pkgKey}-`) ? local.slice(pkgKey.length + 1) : local;
+    const verb = VERB_PREFIX.exec(rest);
+    return verb ? [app, titleize(verb[2])] : [app];
+  }
+  return [CORE_GROUP_BY_CATEGORY[m.category] ?? "Other"];
+}
+function isIntegration(m) {
+  return isAppPackage(m.__package) || (m.groups?.length ?? 0) > 1 || hasLogo(m);
+}
+function makeGroup(label) {
+  return { label, children: /* @__PURE__ */ new Map(), leaves: [], count: 0 };
+}
+const latestManifests = computed(() => {
+  const seen = /* @__PURE__ */ new Set();
+  const out = [];
+  for (const m of INTEGRATION_NODE_CATALOG) {
+    if (seen.has(m.slug)) continue;
+    seen.add(m.slug);
+    out.push(m);
+  }
+  return out;
+});
+const tree = computed(() => {
+  const apps = makeGroup("Integrations");
+  const core = makeGroup("Core");
+  for (const m of latestManifests.value) {
+    if (m.category === "trigger") continue;
+    const path = groupPath(m);
+    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));
+      cursor = cursor.children.get(label);
+      cursor.count++;
+    }
+    cursor.leaves.push(m);
+  }
+  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;
+});
+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 stack = ref([]);
+const direction = ref("push");
+const triggersLevel = computed(() => stack.value.length > 0 && stack.value[stack.value.length - 1][0] === "__triggers");
+const currentGroup = computed(() => {
+  if (!stack.value.length || triggersLevel.value) return null;
+  const path = stack.value[stack.value.length - 1];
+  let cursor = path[0] === "__apps" ? tree.value.apps : tree.value.core;
+  for (const label of path.slice(1)) {
+    cursor = cursor?.children.get(label);
+    if (!cursor) return null;
+  }
+  return cursor ?? null;
+});
+const levelTitle = computed(() => {
+  if (triggersLevel.value) return "Triggers";
+  return currentGroup.value?.label ?? "Add node";
+});
+function pushPath(path) {
+  direction.value = "push";
+  stack.value = [...stack.value, path];
+  search.value = "";
+}
+function pushChild(label) {
+  const base = stack.value[stack.value.length - 1];
+  if (!base) return;
+  pushPath([...base, label]);
+}
+function popLevel() {
+  direction.value = "pop";
+  stack.value = stack.value.slice(0, -1);
+  search.value = "";
+}
+const levelKey = computed(() => stack.value.length);
+const searchHits = computed(() => {
   const q = search.value.trim().toLowerCase();
-  const matchesManifest = (m) => {
-    if (!q) return true;
-    return labelOf(m.name).toLowerCase().includes(q) || (m.slug ?? "").toLowerCase().includes(q) || descOf(m.description).toLowerCase().includes(q);
-  };
-  const matchesTrigger = (t) => {
-    if (!q) return true;
-    return labelOf(t.name).toLowerCase().includes(q) || t.type.includes(q) || t.id.includes(q);
-  };
-  const knownKeys = new Set(NODE_CATEGORIES.map((c) => String(c.key)));
-  const groups = NODE_CATEGORIES.map((cat) => {
-    const manifests = INTEGRATION_NODE_CATALOG.filter((m) => m.category === cat.key && matchesManifest(m));
-    const triggers = cat.key === "trigger" ? TRIGGER_TEMPLATES.filter(matchesTrigger) : [];
-    return { ...cat, manifests, triggers };
-  });
-  const other = INTEGRATION_NODE_CATALOG.filter((m) => !knownKeys.has(String(m.category ?? "")) && matchesManifest(m));
-  if (other.length) {
-    groups.push({ key: "other", label: "Nodes", color: "bg-slate-100 text-slate-500", manifests: other, triggers: [] });
+  if (!q || triggersLevel.value) return [];
+  const scope = currentGroup.value ? subtreeManifests(currentGroup.value) : latestManifests.value.filter((m) => m.category !== "trigger");
+  const hits = [];
+  for (const m of scope) {
+    const hay = `${loc(m.name)} ${m.slug} ${loc(m.description)}`.toLowerCase();
+    if (hay.includes(q)) hits.push({ manifest: m, path: groupPath(m) });
+    if (hits.length >= 50) break;
   }
-  return groups.filter((g) => g.manifests.length || g.triggers.length);
+  return hits;
 });
-function iconFor(name) {
-  if (!name) return Lucide.Box;
-  const cleaned = (name.includes(":") ? name.split(":").pop() : name).split("-").map((s, i) => i === 0 ? s.charAt(0).toUpperCase() + s.slice(1) : s.charAt(0).toUpperCase() + s.slice(1)).join("");
-  const fallback = Lucide[cleaned];
-  if (fallback) return fallback;
-  return Lucide.Box;
+const matchedTriggers = computed(() => {
+  const q = search.value.trim().toLowerCase();
+  if (!q || currentGroup.value) return [];
+  const matches = (t) => loc(t.name).toLowerCase().includes(q) || t.type.includes(q) || loc(t.description).toLowerCase().includes(q);
+  return TRIGGER_TEMPLATES.filter(matches);
+});
+const nodeDrag = useNodeDrag();
+function setCustomDragImage(ev, label, logoSrc, accent = "#10b981") {
+  if (!ev.dataTransfer) return;
+  const el = document.createElement("div");
+  el.style.cssText = "position:fixed;top:-1000px;left:-1000px;pointer-events:none;display:flex;align-items:center;gap:8px;padding:8px 14px 8px 10px;background:#fff;border:1px solid rgba(0,0,0,.1);border-radius:10px;box-shadow:0 8px 24px rgba(15,23,42,.18);font:600 13px ui-sans-serif,system-ui;color:#0f172a;max-width:240px;";
+  if (logoSrc) {
+    const img = document.createElement("img");
+    img.src = logoSrc;
+    img.style.cssText = "width:18px;height:18px;object-fit:contain;border-radius:3px;flex:none;";
+    el.appendChild(img);
+  } else {
+    const dot = document.createElement("span");
+    dot.style.cssText = `width:10px;height:10px;border-radius:9999px;background:${accent};flex:none;`;
+    el.appendChild(dot);
+  }
+  const text = document.createElement("span");
+  text.textContent = label;
+  text.style.cssText = "white-space:nowrap;overflow:hidden;text-overflow:ellipsis;";
+  el.appendChild(text);
+  document.body.appendChild(el);
+  ev.dataTransfer.setDragImage(el, 22, 20);
+  window.setTimeout(() => el.remove(), 0);
+}
+function logoSrcOf(m) {
+  const imgs = m.images ?? [];
+  return (imgs.find((i) => i.category === "logo") ?? imgs[0])?.src ?? null;
 }
-function onManifestDragStart(manifest, ev) {
+function onManifestDragStart(m, ev) {
   if (!ev.dataTransfer) return;
-  ev.dataTransfer.setData("application/integration-node", JSON.stringify({
-    kind: "manifest",
-    slug: manifest.slug,
-    version: manifest.version
-  }));
+  ev.dataTransfer.setData("application/integration-node", JSON.stringify({ kind: "manifest", slug: m.slug, version: m.version }));
   ev.dataTransfer.effectAllowed = "move";
+  setCustomDragImage(ev, loc(m.name), logoSrcOf(m), "#8b5cf6");
+  nodeDrag.start({ kind: "manifest", manifest: m });
 }
 function onTriggerDragStart(tpl, ev) {
   if (!ev.dataTransfer) return;
-  ev.dataTransfer.setData("application/integration-node", JSON.stringify({
-    kind: "trigger",
-    type: tpl.type
-  }));
+  ev.dataTransfer.setData("application/integration-node", JSON.stringify({ kind: "trigger", type: tpl.type }));
   ev.dataTransfer.effectAllowed = "move";
+  setCustomDragImage(ev, loc(tpl.name), null, "#10b981");
+  nodeDrag.start({ kind: "trigger", tpl });
+}
+function onDragEnd() {
+  nodeDrag.end();
+}
+function insertManifest(m) {
+  emit("insert", { kind: "manifest", slug: m.slug, version: m.version });
 }
+function insertTrigger(tpl) {
+  emit("insert", { kind: "trigger", type: tpl.type });
+}
+function categoryColor(label) {
+  const meta = CORE_GROUP_META[label];
+  if (meta) return meta.color;
+  const cat = NODE_CATEGORIES.find((c) => c.label === label || CORE_GROUP_BY_CATEGORY[String(c.key)] === label);
+  return cat?.color ?? "bg-slate-100 text-slate-500";
+}
+watch(tree, () => {
+  if (stack.value.length && !triggersLevel.value && !currentGroup.value) stack.value = [];
+});
+const searching = computed(() => search.value.trim().length > 0);
 </script>
 
 <template>
-  <aside class="flex h-full w-60 shrink-0 flex-col border-r border-black/[0.06] bg-white">
-    <div class="p-3 border-b border-black/[0.06]">
-      <div class="text-mono text-muted-foreground mb-2">
-        Add node
+  <aside class="flex h-full w-full flex-col bg-white">
+    <!-- Header: search + (when inside a group) the back affordance. The root
+         title lives in the editor's palette shell header, not here. -->
+    <div class="border-b border-black/[0.06] p-3">
+      <div v-if="stack.length" class="mb-2 flex min-w-0 items-center gap-1.5">
+        <button
+          type="button"
+          class="flex size-6 shrink-0 items-center justify-center rounded-md text-muted-foreground transition hover:bg-muted/50 hover:text-foreground"
+          title="Back"
+          @click="popLevel"
+        >
+          <Lucide.ArrowLeft :size="14" />
+        </button>
+        <div class="min-w-0 flex-1 truncate text-mono text-muted-foreground">
+          {{ levelTitle }}
+        </div>
       </div>
       <div class="relative">
         <Lucide.Search :size="12" class="absolute left-2 top-1/2 -translate-y-1/2 text-muted-foreground" />
         <input
+          ref="searchInput"
           v-model="search"
           type="text"
-          placeholder="Search…"
+          :placeholder="stack.length ? `Search in ${levelTitle}\u2026` : 'Search all nodes\u2026'"
           class="h-7 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"
+          @keydown.esc="search ? search = '' : stack.length && popLevel()"
         >
       </div>
     </div>
 
-    <div class="flex-1 overflow-y-auto p-2 space-y-3">
-      <div v-for="cat in grouped" :key="cat.key">
-        <div class="px-2 py-1 text-mono text-muted-foreground">
-          {{ cat.label }}
-        </div>
-        <div class="space-y-0.5">
-          <!-- Trigger templates (only in the "trigger" category) -->
-          <div
-            v-for="t in cat.triggers"
-            :key="t.id"
-            class="group flex items-center gap-2 rounded-md border border-transparent px-2 py-1.5 cursor-grab transition hover:border-black/[0.08] hover:bg-muted/40 active:cursor-grabbing"
-            draggable="true"
-            :title="labelOf(t.name)"
-            @dragstart="onTriggerDragStart(t, $event)"
-          >
-            <span class="flex size-6 shrink-0 items-center justify-center rounded-md" :class="cat.color">
-              <component :is="iconFor(t.icon)" :size="13" />
-            </span>
-            <div class="min-w-0">
-              <div class="text-sm font-medium truncate">
-                {{ labelOf(t.name) }}
+    <!-- Levels slide horizontally; search results replace the level flat.
+         The transition-active classes must NOT repeat tokens from the level's
+         static class (absolute/inset-0): Vue removes active-class tokens when
+         the transition ends and would strip them from the static class too,
+         leaving the level statically positioned and unscrollable. -->
+    <div class="relative min-h-0 flex-1 overflow-hidden">
+      <Transition
+        :enter-active-class="'transition-transform duration-200 ease-out'"
+        :enter-from-class="direction === 'push' ? 'translate-x-full' : '-translate-x-full'"
+        enter-to-class="translate-x-0"
+        :leave-active-class="'transition-transform duration-200 ease-in'"
+        leave-from-class="translate-x-0"
+        :leave-to-class="direction === 'push' ? '-translate-x-full' : 'translate-x-full'"
+      >
+        <!-- scrollbar-width/color opt out of macOS overlay scrollbars, so the
+             thin scrollbar stays visible whenever the level overflows. -->
+        <div :key="`${levelKey}-${searching}`" class="absolute inset-0 overflow-y-auto overscroll-contain p-2 [scrollbar-color:rgb(0_0_0/0.22)_transparent] [scrollbar-width:thin]">
+          <!-- ── Search results (flat, path as subtitle) ─────────────────── -->
+          <template v-if="searching">
+            <div v-if="matchedTriggers.length" class="mb-1">
+              <div class="px-2 py-1 text-mono text-muted-foreground">Triggers</div>
+              <div
+                v-for="t in matchedTriggers"
+                :key="t.id"
+                class="group flex cursor-grab items-center gap-2 rounded-md border border-transparent px-2 py-1.5 transition hover:border-black/[0.08] hover:bg-muted/40 active:cursor-grabbing"
+                draggable="true"
+                @dragstart="onTriggerDragStart(t, $event)"
+                @dragend="onDragEnd"
+                @click="insertTrigger(t)"
+              >
+                <span class="flex size-6 shrink-0 items-center justify-center rounded-md bg-emerald-100 text-emerald-600">
+                  <component :is="iconFor(t.icon)" :size="13" />
+                </span>
+                <div class="min-w-0">
+                  <div class="truncate text-sm font-medium">{{ loc(t.name) }}</div>
+                  <div class="text-xs leading-snug text-muted-foreground">Trigger</div>
+                </div>
               </div>
-              <div class="text-sm text-muted-foreground truncate">
-                {{ t.type }}
+            </div>
+
+            <p v-if="!searchHits.length && !matchedTriggers.length" class="px-2 py-6 text-center text-sm text-muted-foreground">
+              Nothing matches “{{ search }}”.
+            </p>
+            <div
+              v-for="hit in searchHits"
+              :key="`${hit.manifest.slug}@${hit.manifest.version}`"
+              class="group flex cursor-grab items-start gap-2 rounded-md border border-transparent px-2 py-1.5 transition hover:border-black/[0.08] hover:bg-muted/40 active:cursor-grabbing"
+              draggable="true"
+              :title="loc(hit.manifest.name)"
+              @dragstart="onManifestDragStart(hit.manifest, $event)"
+              @dragend="onDragEnd"
+              @click="insertManifest(hit.manifest)"
+            >
+              <span class="flex size-6 shrink-0 items-center justify-center rounded-md" :class="categoryColor(hit.path[0] ?? '')">
+                <IntegrationsNodeLogo :manifest="hit.manifest" :size="13" />
+              </span>
+              <div class="min-w-0 flex-1">
+                <div class="truncate text-sm font-medium">{{ loc(hit.manifest.name) }}</div>
+                <div class="text-xs leading-snug text-muted-foreground">{{ loc(hit.manifest.description) }}</div>
+                <div class="truncate text-xs text-muted-foreground/70">{{ hit.path.join(" \u203A ") }}</div>
               </div>
             </div>
-          </div>
+          </template>
 
-          <!-- Real node manifests -->
-          <div
-            v-for="m in cat.manifests"
-            :key="`${m.slug}@${m.version}`"
-            class="group flex items-center gap-2 rounded-md border border-transparent px-2 py-1.5 cursor-grab transition hover:border-black/[0.08] hover:bg-muted/40 active:cursor-grabbing"
-            draggable="true"
-            :title="labelOf(m.name)"
-            @dragstart="onManifestDragStart(m, $event)"
-          >
-            <span class="flex size-6 shrink-0 items-center justify-center rounded-md" :class="cat.color">
-              <component :is="iconFor(m.icon)" :size="13" />
-            </span>
-            <div class="min-w-0">
-              <div class="text-sm font-medium truncate">
-                {{ labelOf(m.name) }}
+          <!-- ── Triggers level ──────────────────────────────────────────── -->
+          <template v-else-if="triggersLevel">
+            <div
+              v-for="t in TRIGGER_TEMPLATES"
+              :key="t.id"
+              class="group flex cursor-grab items-center gap-2 rounded-md border border-transparent px-2 py-1.5 transition hover:border-black/[0.08] hover:bg-muted/40 active:cursor-grabbing"
+              draggable="true"
+              :title="loc(t.name)"
+              @dragstart="onTriggerDragStart(t, $event)"
+                @dragend="onDragEnd"
+              @click="insertTrigger(t)"
+            >
+              <span class="flex size-6 shrink-0 items-center justify-center rounded-md bg-emerald-100 text-emerald-600">
+                <component :is="iconFor(t.icon)" :size="13" />
+              </span>
+              <div class="min-w-0">
+                <div class="truncate text-sm font-medium">{{ loc(t.name) }}</div>
+                <div class="text-xs leading-snug text-muted-foreground">{{ loc(t.description) }}</div>
               </div>
-              <div class="text-sm text-muted-foreground truncate">
-                {{ m.slug }}@{{ m.version }}
+            </div>
+          </template>
+
+          <!-- ── Root level ──────────────────────────────────────────────── -->
+          <template v-else-if="!currentGroup">
+            <!-- Triggers group on top -->
+            <div v-if="tree.core.children.size">
+              <div class="px-2 py-1 text-mono text-muted-foreground">Core</div>
+              <button
+                type="button"
+                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(['__triggers'])"
+              >
+                <span class="flex size-6 shrink-0 items-center justify-center rounded-md bg-slate-100 text-emerald-600/80">
+                  <Lucide.Zap :size="13" />
+                </span>
+                <span class="min-w-0 flex-1 truncate text-sm font-medium">Triggers</span>
+                <span class="text-sm tabular-nums text-muted-foreground">{{ TRIGGER_TEMPLATES.length }}</span>
+                <Lucide.ChevronRight :size="13" class="text-muted-foreground" />
+              </button>
+              <button
+                v-for="[label, group] in tree.core.children"
+                :key="`core-${label}`"
+                type="button"
+                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>
+                <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>
+                <Lucide.ChevronRight :size="13" class="text-muted-foreground" />
+              </button>
+            </div>
+
+            <div v-if="tree.apps.children.size" class="mt-2">
+              <div class="px-2 py-1 text-mono text-muted-foreground">Integrations</div>
+              <button
+                v-for="[label, group] in appRows"
+                :key="`app-${label}`"
+                type="button"
+                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(['__apps', label])"
+              >
+                <span class="flex size-6 shrink-0 items-center justify-center rounded-md bg-white ring-1 ring-black/[0.06]">
+                  <IntegrationsNodeLogo v-if="groupLogoManifest(group)" :manifest="groupLogoManifest(group)" :size="14" />
+                  <Lucide.Package v-else :size="13" class="text-violet-600" />
+                </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>
+                <Lucide.ChevronRight :size="13" class="text-muted-foreground" />
+              </button>
+            </div>
+          </template>
+
+          <!-- ── Inside a group: subgroups first, then leaves ─────────────── -->
+          <template v-else>
+            <button
+              v-for="[label, group] in currentGroup.children"
+              :key="`sub-${label}`"
+              type="button"
+              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="pushChild(label)"
+            >
+              <span
+                class="flex size-6 shrink-0 items-center justify-center rounded-md"
+                :class="groupLogoManifest(group) ? 'bg-white ring-1 ring-black/[0.06]' : 'bg-slate-100 text-slate-500'"
+              >
+                <IntegrationsNodeLogo v-if="groupLogoManifest(group)" :manifest="groupLogoManifest(group)" :size="14" />
+                <Lucide.FolderOpen v-else :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>
+              <Lucide.ChevronRight :size="13" class="text-muted-foreground" />
+            </button>
+
+            <div
+              v-for="m in currentGroup.leaves"
+              :key="`${m.slug}@${m.version}`"
+              class="group flex cursor-grab items-start gap-2 rounded-md border border-transparent px-2 py-1.5 transition hover:border-black/[0.08] hover:bg-muted/40 active:cursor-grabbing"
+              draggable="true"
+              :title="loc(m.name)"
+              @dragstart="onManifestDragStart(m, $event)"
+              @dragend="onDragEnd"
+              @click="insertManifest(m)"
+            >
+              <span class="flex size-6 shrink-0 items-center justify-center rounded-md" :class="hasLogo(m) ? 'bg-white ring-1 ring-black/[0.06]' : categoryColor(groupPath(m)[0] ?? '')">
+                <IntegrationsNodeLogo :manifest="m" :size="14" />
+              </span>
+              <div class="min-w-0 flex-1">
+                <div class="truncate text-sm font-medium">{{ loc(m.name) }}</div>
+                <div class="text-xs leading-snug text-muted-foreground">{{ loc(m.description) }}</div>
               </div>
             </div>
-          </div>
+          </template>
         </div>
-      </div>
+      </Transition>
     </div>
 
     <div class="border-t border-black/[0.06] px-3 py-2 text-sm text-muted-foreground">
-      Drag a node onto the canvas.
+      Drag onto the canvas — or click to insert.
     </div>
   </aside>
 </template>

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

@@ -1,2 +1,23 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+import { type TriggerTemplate } from '../../data/integrationNodeCatalog.js';
+declare const _default: import("vue").DefineComponent<{}, {
+    focusSearch: () => void | undefined;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    insert: (payload: {
+        kind: "manifest";
+        slug: string;
+        version: string;
+    } | {
+        kind: "trigger";
+        type: TriggerTemplate["type"];
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
+    onInsert?: ((payload: {
+        kind: "manifest";
+        slug: string;
+        version: string;
+    } | {
+        kind: "trigger";
+        type: TriggerTemplate["type"];
+    }) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

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

@@ -0,0 +1,9 @@
+type __VLS_Props = {
+    modelValue: unknown;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: unknown) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: unknown) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;