@revenexx/studio-integrations 0.1.4 → 0.3.0

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

@@ -0,0 +1,46 @@
+<script setup>
+import { computed } from "vue";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@revenexx/studio";
+const props = defineProps({
+  label: { type: String, required: true },
+  shortcut: { type: String, required: false }
+});
+const isMac = typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform ?? "");
+const keys = computed(() => {
+  if (!props.shortcut) return "";
+  const out = [];
+  for (const raw of props.shortcut.split("+")) {
+    const t = raw.toLowerCase();
+    if (t === "mod") out.push(isMac ? "\u2318" : "Ctrl");
+    else if (t === "shift") out.push("\u21E7");
+    else if (t === "alt") out.push(isMac ? "\u2325" : "Alt");
+    else if (t === "enter") out.push("\u21B5");
+    else if (t === "escape") out.push("Esc");
+    else out.push(t.toUpperCase());
+  }
+  return isMac ? out.join("") : out.join("+");
+});
+</script>
+
+<template>
+  <Tooltip :delay-duration="250">
+    <TooltipTrigger as-child>
+      <slot />
+    </TooltipTrigger>
+    <TooltipContent
+      side="top"
+      :side-offset="8"
+      class="editor-tip flex items-center gap-1.5 rounded-md border border-black/[0.06] bg-white px-2 py-1 text-xs text-foreground shadow-md"
+    >
+      <span>{{ label }}</span>
+      <kbd
+        v-if="keys"
+        class="rounded border border-black/[0.08] bg-muted/60 px-1 py-px font-mono text-[10px] tabular-nums text-muted-foreground"
+      >{{ keys }}</kbd>
+    </TooltipContent>
+  </Tooltip>
+</template>
+
+<style>
+.editor-tip svg{display:none!important}
+</style>

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

@@ -0,0 +1,17 @@
+type __VLS_Props = {
+    label: string;
+    /** e.g. 'mod+enter', 'shift+alt+t', 'v', '1'. Omit for label-only tips. */
+    shortcut?: string;
+};
+declare var __VLS_10: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_10) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

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

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

@@ -0,0 +1,64 @@
+<script setup>
+import { computed, onMounted, ref } from "vue";
+import { Input } from "@revenexx/studio";
+const props = defineProps({
+  modelValue: { type: String, required: true }
+});
+const emit = defineEmits(["update:modelValue"]);
+const catalog = useDefinedEvents();
+onMounted(() => {
+  void catalog.load();
+});
+const focused = ref(false);
+const options = computed(() => {
+  const out = /* @__PURE__ */ new Map();
+  for (const e of catalog.emits.value) out.set(e.topic, { topic: e.topic, source: e.app });
+  for (const t of catalog.listens.value) {
+    if (!out.has(t)) out.set(t, { topic: t, source: null });
+  }
+  return [...out.values()].sort((a, b) => a.topic.localeCompare(b.topic));
+});
+const filtered = computed(() => {
+  const q = (props.modelValue ?? "").trim().toLowerCase();
+  const list = q ? options.value.filter((o) => o.topic.toLowerCase().includes(q)) : options.value;
+  return list.slice(0, 40);
+});
+const open = computed(() => focused.value && (filtered.value.length > 0 || catalog.loading.value));
+function pick(topic) {
+  emit("update:modelValue", topic);
+  focused.value = false;
+}
+</script>
+
+<template>
+  <div class="relative">
+    <Input
+      :model-value="modelValue"
+      placeholder="customer.created"
+      class="h-8 text-sm bg-white font-mono"
+      @update:model-value="(v) => emit('update:modelValue', String(v))"
+      @focus="focused = true"
+      @blur="focused = false"
+    />
+    <div
+      v-if="open"
+      class="absolute left-0 right-0 top-full z-30 mt-1 max-h-56 overflow-y-auto rounded-md border border-black/[0.08] bg-white py-1 shadow-md"
+    >
+      <div v-if="catalog.loading.value && !filtered.length" class="px-2.5 py-1.5 text-sm text-muted-foreground">
+        Loading event catalog…
+      </div>
+      <button
+        v-for="o in filtered"
+        :key="o.topic"
+        type="button"
+        class="flex w-full items-center gap-2 px-2.5 py-1.5 text-left hover:bg-muted/50"
+        @mousedown.prevent="pick(o.topic)"
+      >
+        <code class="min-w-0 flex-1 truncate font-mono text-[13px]">{{ o.topic }}</code>
+        <span v-if="o.source" class="shrink-0 rounded-full bg-slate-100 px-1.5 py-px text-[11px] font-medium uppercase text-slate-700">
+          {{ o.source }}
+        </span>
+      </button>
+    </div>
+  </div>
+</template>

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

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

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

@@ -0,0 +1,19 @@
+import type { WorkflowVariable } from '../../types/integrations.js';
+type UpstreamOutput = {
+    nodeId: string;
+    nodeName?: string;
+    output: string;
+    fields?: string[];
+};
+type __VLS_Props = {
+    modelValue: unknown;
+    placeholder?: string;
+    variables?: Record<string, WorkflowVariable>;
+    upstreamOutputs?: UpstreamOutput[];
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,236 @@
+<script setup>
+import { computed, inject, onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { Editor, EditorContent } from "@tiptap/vue-3";
+import { Node } from "@tiptap/core";
+import Document from "@tiptap/extension-document";
+import Paragraph from "@tiptap/extension-paragraph";
+import Text from "@tiptap/extension-text";
+import History from "@tiptap/extension-history";
+import { resolveExpressionText } from "../../data/nodeRunData";
+import { EXPR_TOKEN_NODE, docToText, hasRawTokenText, textToDoc } from "../../data/expressionEditor";
+const props = defineProps({
+  modelValue: { type: null, required: true },
+  placeholder: { type: String, required: false },
+  variables: { type: Object, required: false },
+  upstreamOutputs: { type: Array, required: false }
+});
+const emit = defineEmits(["update:modelValue"]);
+const text = computed(() => String(props.modelValue ?? ""));
+const OPEN = "${{ ";
+const CLOSE = " }}";
+function tok(inner) {
+  return OPEN + inner + CLOSE;
+}
+const triggerLabel = "{ }";
+const nodeNames = inject("integrationsNodeNames", null);
+function pillLabel(expr) {
+  const path = expr.split(".");
+  if (path[0] === "nodes" && path[2] === "outputs") {
+    const name = nodeNames?.value[path[1] ?? ""] ?? path[1] ?? "";
+    const rest = path.slice(3).filter((seg, i) => !(i === 0 && seg === "default")).join(".");
+    return rest ? name + " \xB7 " + rest : name;
+  }
+  if (path[0] === "trigger" && path[1] === "payload") {
+    const rest = path.slice(2).join(".");
+    return rest ? "Trigger \xB7 " + rest : "Trigger payload";
+  }
+  if (path[0] === "vars") return "Variable \xB7 " + path.slice(1).join(".");
+  if (path[0] === "in") {
+    const rest = path.slice(1).join(".");
+    return rest ? "Input \xB7 " + rest : "Input payload";
+  }
+  return expr;
+}
+function tokenLabel(token) {
+  const inner = token.replace(/^\$\{\{\s*/, "").replace(/\s*\}\}$/, "");
+  return pillLabel(inner);
+}
+const ExprToken = Node.create({
+  name: EXPR_TOKEN_NODE,
+  group: "inline",
+  inline: true,
+  atom: true,
+  selectable: true,
+  addAttributes() {
+    return { token: { default: "" } };
+  },
+  parseHTML() {
+    return [{
+      tag: "span[data-expr-token]",
+      getAttrs: (el) => ({ token: el.getAttribute("data-expr-token") ?? "" })
+    }];
+  },
+  renderHTML({ node }) {
+    return ["span", { "data-expr-token": String(node.attrs.token) }, String(node.attrs.token)];
+  },
+  addNodeView() {
+    return ({ node }) => {
+      const dom = document.createElement("span");
+      dom.className = "expr-pill";
+      dom.textContent = tokenLabel(String(node.attrs.token));
+      dom.title = String(node.attrs.token);
+      return { dom };
+    };
+  }
+});
+const editor = new Editor({
+  extensions: [Document, Paragraph, Text, History, ExprToken],
+  content: textToDoc(text.value),
+  editorProps: {
+    // Single line: swallow Enter (paragraph splits would break the field).
+    handleKeyDown: (_view, event) => event.key === "Enter" && !event.isComposing
+  },
+  onUpdate({ editor: ed }) {
+    const json = ed.getJSON();
+    let raw = docToText(json);
+    if (hasRawTokenText(json)) {
+      ed.commands.setContent(textToDoc(raw));
+      raw = docToText(ed.getJSON());
+    }
+    if (raw !== text.value) emit("update:modelValue", raw);
+  },
+  onFocus() {
+    if (insertHandler) insertHandler.value = insertToken;
+    if (hasSuggestions.value) open.value = true;
+  }
+});
+onBeforeUnmount(() => {
+  if (insertHandler?.value === insertToken) insertHandler.value = null;
+  editor.destroy();
+});
+watch(text, (t) => {
+  if (docToText(editor.getJSON()) !== t) {
+    editor.commands.setContent(textToDoc(t));
+  }
+});
+function insertToken(expr) {
+  if (editor.isDestroyed) return;
+  editor.chain().focus().insertContent({ type: EXPR_TOKEN_NODE, attrs: { token: expr } }).run();
+}
+const insertHandler = inject("integrationsExpressionInsert", null);
+const sampleContext = inject("integrationsSampleContext", null);
+const preview = computed(() => {
+  if (!sampleContext) return null;
+  return resolveExpressionText(text.value, sampleContext.value);
+});
+const sections = computed(() => {
+  const out = [];
+  const vars = props.variables ?? {};
+  const varItems = Object.keys(vars).map((key) => ({
+    label: key,
+    expr: tok("vars." + key)
+  }));
+  if (varItems.length) out.push({ heading: "VARIABLES", items: varItems });
+  const upstream = props.upstreamOutputs ?? [];
+  const nodeItems = upstream.flatMap((u) => {
+    const base = "nodes." + u.nodeId + ".outputs." + u.output;
+    const rows = [{
+      label: (u.nodeName || u.nodeId) + " \u2192 " + u.output,
+      expr: tok(base)
+    }];
+    for (const f of u.fields ?? []) {
+      rows.push({ label: (u.nodeName || u.nodeId) + " \u2192 " + u.output + "." + f, expr: tok(base + "." + f) });
+    }
+    return rows;
+  });
+  if (nodeItems.length) out.push({ heading: "NODE OUTPUTS", items: nodeItems });
+  const primary = upstream[0];
+  const inItems = [{ label: "input payload", expr: tok("in") }];
+  for (const f of primary?.fields ?? []) {
+    inItems.push({ label: "input." + f, expr: tok("in." + f) });
+  }
+  out.push({ heading: "INPUT", items: inItems });
+  return out;
+});
+const hasSuggestions = computed(() => sections.value.some((s) => s.items.length > 0));
+const open = ref(false);
+const wrapRef = ref(null);
+function toggle() {
+  if (!open.value && !hasSuggestions.value) return;
+  open.value = !open.value;
+}
+function onFocusOut(e) {
+  if (wrapRef.value && e.relatedTarget instanceof globalThis.Node && wrapRef.value.contains(e.relatedTarget)) return;
+  open.value = false;
+}
+function onKeydown(e) {
+  if (e.key === "Escape" && open.value) {
+    e.stopPropagation();
+    e.preventDefault();
+    open.value = false;
+  }
+}
+function onDocMousedown(e) {
+  if (wrapRef.value && !wrapRef.value.contains(e.target)) open.value = false;
+}
+onMounted(() => document.addEventListener("mousedown", onDocMousedown));
+onBeforeUnmount(() => document.removeEventListener("mousedown", onDocMousedown));
+function insert(expr) {
+  insertToken(expr);
+  open.value = false;
+}
+</script>
+
+<template>
+  <div ref="wrapRef" class="relative" @focusout="onFocusOut">
+    <div class="flex items-center gap-1">
+      <div class="expr-editor relative h-8 min-w-0 flex-1 overflow-hidden rounded-md border border-black/[0.08] bg-white px-2 font-mono text-sm transition focus-within:border-black/[0.16]">
+        <span
+          v-if="!text"
+          class="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 truncate text-muted-foreground/60"
+        >{{ placeholder }}</span>
+        <EditorContent :editor="editor" class="h-full" @keydown="onKeydown" />
+      </div>
+      <button
+        type="button"
+        title="Insert expression"
+        class="flex h-8 shrink-0 items-center rounded-md border border-black/[0.08] bg-white px-1.5 font-mono text-sm text-muted-foreground transition hover:text-foreground hover:bg-muted/30"
+        :class="open ? 'ring-2 ring-emerald-500/40' : ''"
+        @mousedown.prevent="toggle"
+      >
+        {{ triggerLabel }}
+      </button>
+    </div>
+
+    <p
+      v-if="preview"
+      class="mt-1 flex min-w-0 items-baseline gap-1 text-[11px]"
+      :title="preview.misses ? 'Parts of this expression have no sample data yet' : preview.resolved"
+    >
+      <span class="shrink-0 text-muted-foreground">→</span>
+      <span class="min-w-0 truncate font-mono" :class="preview.misses ? 'text-amber-600' : 'text-emerald-700'">{{ preview.resolved }}</span>
+    </p>
+
+    <div
+      v-if="open && hasSuggestions"
+      class="absolute right-0 top-full z-50 mt-1 max-h-64 w-72 overflow-y-auto rounded-md border border-black/[0.08] bg-white py-1 text-sm shadow-lg"
+    >
+      <template v-for="section in sections" :key="section.heading">
+        <div
+          v-if="section.items.length"
+          class="px-2 pb-0.5 pt-1.5 text-[10px] font-medium uppercase tracking-wider text-muted-foreground"
+        >
+          {{ section.heading }}
+        </div>
+        <button
+          v-for="item in section.items"
+          :key="item.expr"
+          type="button"
+          class="block w-full px-2 py-1 text-left transition hover:bg-muted/50"
+          @mousedown.prevent="insert(item.expr)"
+        >
+          <div class="truncate text-muted-foreground">
+            {{ item.label }}
+          </div>
+          <div class="truncate font-mono text-emerald-700">
+            {{ item.expr }}
+          </div>
+        </button>
+      </template>
+    </div>
+  </div>
+</template>
+
+<style>
+.expr-editor .ProseMirror{align-items:center;display:flex;height:100%;outline:none;overflow-x:auto;scrollbar-width:none}.expr-editor .ProseMirror p{line-height:30px;margin:0;white-space:pre}.expr-pill{background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.25);border-radius:6px;color:#047857;display:inline-block;font-family:ui-sans-serif,system-ui,sans-serif;font-size:11px;line-height:18px;margin:0 1px;padding:0 6px;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:baseline;white-space:nowrap}.expr-pill.ProseMirror-selectednode{outline:2px solid rgba(16,185,129,.5)}
+</style>

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

@@ -0,0 +1,19 @@
+import type { WorkflowVariable } from '../../types/integrations.js';
+type UpstreamOutput = {
+    nodeId: string;
+    nodeName?: string;
+    output: string;
+    fields?: string[];
+};
+type __VLS_Props = {
+    modelValue: unknown;
+    placeholder?: string;
+    variables?: Record<string, WorkflowVariable>;
+    upstreamOutputs?: UpstreamOutput[];
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,28 @@
+import type { WorkflowGroup } from '../../types/integrations.js';
+interface GroupNodeData {
+    group: WorkflowGroup;
+    /** Derived frame size (expanded mode). */
+    rect: {
+        width: number;
+        height: number;
+    };
+    memberCount: number;
+    /** Absent in read-only previews — no toolbar, no editing. */
+    actions?: {
+        rename: (label: string) => void;
+        setColor: (i: number) => void;
+        toggleCollapse: () => void;
+        ungroup: () => void;
+        resize: (size: {
+            width: number;
+            height: number;
+        }) => void;
+    };
+}
+type __VLS_Props = {
+    id: string;
+    data: GroupNodeData;
+    selected?: boolean;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,222 @@
+<script setup>
+import { computed, nextTick, ref } from "vue";
+import { Handle, Position, useVueFlow } from "@vue-flow/core";
+import { NodeToolbar } from "@vue-flow/node-toolbar";
+import { ChevronsDownUp, ChevronsUpDown, Trash2, Ungroup } from "lucide-vue-next";
+const props = defineProps({
+  id: { type: String, required: true },
+  data: { type: Object, required: true },
+  selected: { type: Boolean, required: false }
+});
+defineEmits(["updateNodeInternals"]);
+const GROUP_COLORS = [
+  { bg: "rgba(254,243,199,0.45)", border: "#fcd34d", chip: "#f59e0b" },
+  { bg: "rgba(255,237,213,0.45)", border: "#fdba74", chip: "#f97316" },
+  { bg: "rgba(255,228,230,0.45)", border: "#fda4af", chip: "#f43f5e" },
+  { bg: "rgba(220,252,231,0.45)", border: "#86efac", chip: "#10b981" },
+  { bg: "rgba(219,234,254,0.45)", border: "#93c5fd", chip: "#3b82f6" },
+  { bg: "rgba(237,233,254,0.45)", border: "#c4b5fd", chip: "#8b5cf6" },
+  { bg: "rgba(245,245,244,0.6)", border: "#d6d3d1", chip: "#78716c" }
+];
+const color = computed(() => GROUP_COLORS[props.data.group.color ?? 4] ?? GROUP_COLORS[4]);
+function loc(v) {
+  if (!v) return "";
+  return typeof v === "string" ? v : v.en ?? Object.values(v)[0] ?? "";
+}
+const label = computed(() => loc(props.data.group.label) || "Group");
+const collapsed = computed(() => props.data.group.collapsed === true);
+const editable = computed(() => !!props.data.actions);
+const editing = ref(false);
+const draft = ref("");
+const inputEl = ref(null);
+function startRename() {
+  if (!editable.value) return;
+  draft.value = label.value;
+  editing.value = true;
+  void nextTick(() => inputEl.value?.focus());
+}
+function commitRename() {
+  if (!editing.value) return;
+  editing.value = false;
+  const next = draft.value.trim();
+  if (next && next !== label.value) props.data.actions?.rename(next);
+}
+const hovered = ref(false);
+let hoverTimer = null;
+function onHoverEnter() {
+  if (hoverTimer) clearTimeout(hoverTimer);
+  hovered.value = true;
+}
+function onHoverLeave() {
+  if (hoverTimer) clearTimeout(hoverTimer);
+  hoverTimer = setTimeout(() => {
+    hovered.value = false;
+  }, 250);
+}
+const toolbarVisible = computed(() => editable.value && !editing.value && (hovered.value || !!props.selected));
+const memberCountText = computed(() => `${props.data.memberCount} node${props.data.memberCount === 1 ? "" : "s"}`);
+const flow = useVueFlow();
+const resizing = ref(false);
+const liveW = ref(0);
+const liveH = ref(0);
+let resizeStart = { x: 0, y: 0, w: 0, h: 0 };
+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) {
+  e.stopPropagation();
+  e.preventDefault();
+  resizing.value = true;
+  liveW.value = props.data.rect.width;
+  liveH.value = props.data.rect.height;
+  resizeStart = { x: e.clientX, y: e.clientY, w: liveW.value, h: liveH.value };
+  e.target.setPointerCapture(e.pointerId);
+}
+function onResizeMove(e) {
+  if (!resizing.value) return;
+  const zoom = flow.viewport.value.zoom || 1;
+  liveW.value = Math.max(150, Math.round(resizeStart.w + (e.clientX - resizeStart.x) / zoom));
+  liveH.value = Math.max(90, Math.round(resizeStart.h + (e.clientY - resizeStart.y) / zoom));
+}
+function onResizeEnd() {
+  if (!resizing.value) return;
+  resizing.value = false;
+  props.data.actions?.resize({ width: liveW.value, height: liveH.value });
+}
+</script>
+
+<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-4.5 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, width: '16px', height: '16px' }"
+        @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 ? 'Expand group' : 'Collapse group'"
+        @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="Ungroup (keep the nodes)"
+        @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="Remove group frame"
+        @click="data.actions?.ungroup()"
+      >
+        <Trash2 :size="13" />
+      </button>
+    </div>
+  </NodeToolbar>
+
+  <!-- Collapsed: compact stand-in card with generic edge handles. -->
+  <template v-if="collapsed">
+    <Handle
+      id="__in__top"
+      type="target"
+      :position="Position.Top"
+      class="!size-3 !rounded-full !border-2 !border-white !bg-slate-500 !shadow-sm"
+    />
+    <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>
+    <Handle
+      id="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="{
+  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"
+        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.stop="startRename"
+      >
+        {{ 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="Resize group"
+      @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>
+  </div>
+  </div>
+</template>