@revenexx/studio-integrations 0.1.3 → 0.2.0

package/dist/runtime/composables/useIntegrationsWorkflows.js

@@ -15,7 +15,12 @@ function toCockpit(api) {
     name: apiBlob.name ?? api.name,
     nodes: apiBlob.nodes ?? [],
     edges: apiBlob.edges ?? [],
+    variables: apiBlob.variables ?? void 0,
     triggerPositions: apiBlob.triggerPositions ?? {},
+    stickies: apiBlob.stickies ?? [],
+    groups: apiBlob.groups ?? [],
+    tags: apiBlob.tags ?? void 0,
+    icon: apiBlob.icon ?? void 0,
     triggers
   };
   return {
@@ -27,6 +32,8 @@ function toCockpit(api) {
     active: api.active ?? false,
     revision: api.revision ?? 0,
     execution_mode: api.execution_mode,
+    buildStatus: api.build_status ?? null,
+    buildError: api.build_error ?? null,
     created_at: api.created_at ?? "",
     updated_at: api.updated_at ?? ""
   };
@@ -42,7 +49,15 @@ function toPayload(meta) {
       name: typeof b.name === "string" ? b.name : meta.name,
       nodes: b.nodes ?? [],
       edges: b.edges ?? [],
-      triggerPositions: b.triggerPositions ?? {}
+      triggerPositions: b.triggerPositions ?? {},
+      // Only send `stickies` when non-empty: backends without the stickies
+      // schema PR reject unknown blob keys (additionalProperties:false).
+      ...b.stickies?.length ? { stickies: b.stickies } : {},
+      ...b.groups?.length ? { groups: b.groups } : {},
+      // variables were silently dropped before — the schema always allowed them.
+      ...b.variables && Object.keys(b.variables).length ? { variables: b.variables } : {},
+      ...b.tags?.length ? { tags: b.tags } : {},
+      ...b.icon ? { icon: b.icon } : {}
     },
     active: meta.active,
     execution_mode: meta.executionMode ?? "async_only",
@@ -112,6 +127,46 @@ export function useIntegrationsWorkflows() {
     upsertCache(wf);
     return wf;
   }
+  async function duplicate(id, name) {
+    const source = await get(id);
+    if (!source) throw new Error("Workflow not found.");
+    const blob = JSON.parse(JSON.stringify(source.blob));
+    const handleMap = /* @__PURE__ */ new Map();
+    for (const trigger of blob.triggers ?? []) {
+      const fresh = crypto.randomUUID();
+      handleMap.set(trigger.id, fresh);
+      trigger.id = fresh;
+      trigger.active = false;
+    }
+    for (const edge of blob.edges ?? []) {
+      const mapped = handleMap.get(edge.from.nodeId);
+      if (mapped) edge.from.nodeId = mapped;
+    }
+    if (blob.triggerPositions) {
+      const rekeyed = {};
+      for (const [handle, pos] of Object.entries(blob.triggerPositions)) {
+        rekeyed[handleMap.get(handle) ?? handle] = pos;
+      }
+      blob.triggerPositions = rekeyed;
+    }
+    const base = {
+      description: source.description,
+      blob,
+      active: false,
+      executionMode: source.execution_mode ?? void 0
+    };
+    if (name?.trim()) return await create({ ...base, name: name.trim() });
+    const attempts = [`${source.name} (Copy)`, ...Array.from({ length: 8 }, (_, i) => `${source.name} (Copy ${i + 2})`)];
+    let lastError = null;
+    for (const attempt of attempts) {
+      try {
+        return await create({ ...base, name: attempt });
+      } catch (err) {
+        lastError = err;
+      }
+    }
+    throw lastError instanceof Error ? lastError : new Error("Could not duplicate the workflow.");
+  }
   async function update(id, patch) {
     const wf = toCockpit(unwrap(await api.put(`/workflows/${id}`, toPayload({
       name: patch.name,
@@ -146,6 +201,7 @@ export function useIntegrationsWorkflows() {
     get,
     create,
     update,
+    duplicate,
     remove,
     toggleActive
   };

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

@@ -0,0 +1,34 @@
+import { type Ref } from 'vue';
+export type MiniMapCorner = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+export type MiniMapMode = MiniMapCorner | 'floating';
+/**
+ * Layout state for the workflow editor's minimap: pinned to one of the four
+ * canvas corners, free-floating, or collapsed into a pill — the same
+ * interaction grammar as usePaletteLayout, with corner snapping instead of
+ * full-height docks. Drags by its header via pointer events; releasing within
+ * SNAP_ZONE of two edges snaps into that corner. Persists to localStorage.
+ */
+export declare function useMiniMapLayout(canvasRef: Ref<HTMLElement | null>): {
+    mode: Ref<MiniMapMode, MiniMapMode>;
+    collapsed: Ref<boolean, boolean>;
+    floating: Ref<{
+        x: number;
+        y: number;
+    }, {
+        x: number;
+        y: number;
+    } | {
+        x: number;
+        y: number;
+    }>;
+    floatingStyle: import("vue").ComputedRef<{
+        left: string;
+        top: string;
+    }>;
+    dragging: Ref<boolean, boolean>;
+    dockPreview: Ref<MiniMapCorner | null, MiniMapCorner | null>;
+    startDrag: (ev: PointerEvent, shellEl: HTMLElement | null) => void;
+    dock: (corner: MiniMapCorner) => void;
+    floatHere: (shellEl: HTMLElement | null) => void;
+    setCollapsed: (v: boolean) => void;
+};

package/dist/runtime/composables/useMiniMapLayout.js

@@ -0,0 +1,119 @@
+import { computed, onBeforeUnmount, onMounted, ref } from "vue";
+const STORAGE_KEY = "integrations.minimap.layout";
+const CORNERS = ["top-left", "top-right", "bottom-left", "bottom-right"];
+const MARGIN = 12;
+const BOTTOM_CLEARANCE = 64;
+const SNAP_ZONE = 56;
+function clampNum(v, lo, hi) {
+  return Math.min(hi, Math.max(lo, v));
+}
+export function useMiniMapLayout(canvasRef) {
+  const mode = ref("bottom-right");
+  const collapsed = ref(false);
+  const floating = ref({ x: MARGIN, y: MARGIN });
+  const dragging = ref(false);
+  const dockPreview = ref(null);
+  function persist() {
+    try {
+      const payload = { mode: mode.value, floating: floating.value, collapsed: collapsed.value };
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(payload));
+    } catch {
+    }
+  }
+  function restore() {
+    try {
+      const raw = localStorage.getItem(STORAGE_KEY);
+      if (!raw) return;
+      const saved = JSON.parse(raw);
+      if (saved.mode === "floating" || CORNERS.includes(saved.mode)) {
+        mode.value = saved.mode;
+      }
+      if (typeof saved.floating?.x === "number" && typeof saved.floating?.y === "number") {
+        floating.value = { x: saved.floating.x, y: saved.floating.y };
+      }
+      collapsed.value = saved.collapsed === true;
+      clampFloating();
+    } catch {
+    }
+  }
+  function clampFloating() {
+    const rect = canvasRef.value?.getBoundingClientRect();
+    if (!rect || rect.width === 0) return;
+    floating.value = {
+      x: clampNum(floating.value.x, MARGIN, Math.max(MARGIN, rect.width - panelW - MARGIN)),
+      y: clampNum(floating.value.y, MARGIN, Math.max(MARGIN, rect.height - BOTTOM_CLEARANCE - panelH))
+    };
+  }
+  onMounted(restore);
+  let grabDX = 0;
+  let grabDY = 0;
+  let panelW = 200;
+  let panelH = 190;
+  function startDrag(ev, shellEl) {
+    if (ev.button !== 0 || dragging.value) return;
+    if (ev.target?.closest("button")) return;
+    const canvas = canvasRef.value;
+    if (!canvas || !shellEl) return;
+    const cRect = canvas.getBoundingClientRect();
+    const pRect = shellEl.getBoundingClientRect();
+    floating.value = { x: pRect.left - cRect.left, y: pRect.top - cRect.top };
+    mode.value = "floating";
+    grabDX = ev.clientX - pRect.left;
+    grabDY = ev.clientY - pRect.top;
+    panelW = pRect.width;
+    panelH = pRect.height;
+    dragging.value = true;
+    ev.preventDefault();
+    window.addEventListener("pointermove", onDragMove);
+    window.addEventListener("pointerup", onDragEnd);
+    window.addEventListener("pointercancel", onDragEnd);
+  }
+  function onDragMove(ev) {
+    const rect = canvasRef.value?.getBoundingClientRect();
+    if (!rect) return;
+    const x = clampNum(ev.clientX - rect.left - grabDX, MARGIN, Math.max(MARGIN, rect.width - panelW - MARGIN));
+    const y = clampNum(ev.clientY - rect.top - grabDY, MARGIN, Math.max(MARGIN, rect.height - BOTTOM_CLEARANCE - panelH));
+    floating.value = { x, y };
+    const nearLeft = x <= SNAP_ZONE;
+    const nearRight = x + panelW >= rect.width - SNAP_ZONE;
+    const nearTop = y <= SNAP_ZONE;
+    const nearBottom = y + panelH >= rect.height - BOTTOM_CLEARANCE - SNAP_ZONE;
+    dockPreview.value = nearTop && nearLeft ? "top-left" : nearTop && nearRight ? "top-right" : nearBottom && nearLeft ? "bottom-left" : nearBottom && nearRight ? "bottom-right" : null;
+  }
+  function stopListeners() {
+    window.removeEventListener("pointermove", onDragMove);
+    window.removeEventListener("pointerup", onDragEnd);
+    window.removeEventListener("pointercancel", onDragEnd);
+  }
+  function onDragEnd() {
+    if (dockPreview.value) mode.value = dockPreview.value;
+    dockPreview.value = null;
+    dragging.value = false;
+    stopListeners();
+    persist();
+  }
+  onBeforeUnmount(stopListeners);
+  function dock(corner) {
+    mode.value = corner;
+    persist();
+  }
+  function floatHere(shellEl) {
+    if (mode.value !== "floating") {
+      const cRect = canvasRef.value?.getBoundingClientRect();
+      const pRect = shellEl?.getBoundingClientRect();
+      if (cRect && pRect) floating.value = { x: pRect.left - cRect.left, y: pRect.top - cRect.top };
+      mode.value = "floating";
+      clampFloating();
+    }
+    persist();
+  }
+  function setCollapsed(v) {
+    collapsed.value = v;
+    persist();
+  }
+  const floatingStyle = computed(() => ({
+    left: `${floating.value.x}px`,
+    top: `${floating.value.y}px`
+  }));
+  return { mode, collapsed, floating, floatingStyle, dragging, dockPreview, startDrag, dock, floatHere, setCollapsed };
+}

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

@@ -0,0 +1,43 @@
+/**
+ * Author-time resolution of a node's dynamic options / fields / outputs
+ * (PO-143, Phase 1). Ports the colleagues' React-Query hook
+ * (`integrations-ui/src/lib/useNodeConfigResolve.ts`) to a plain Vue composable
+ * — no query library, hand-rolled debounce + abort + keep-previous-data.
+ *
+ * Backend: `POST {integrationsApi}/nodes/{slug}/{version}/config:resolve`
+ * body `{ target, config, locale? }`. `target` is a config field key
+ * (→ `{ options }`), `'*'` (→ `{ fields }`) or `'outputs'` (→ `{ outputs }`).
+ *
+ * `dependsOn` given (options / dynamic-schema): those keys both gate the query
+ * (must be set as literals) and form the cache-key subset sent as `config`.
+ * `dependsOn` omitted (outputs): no gate, and the whole `config` keys the query
+ * and is sent — so any config edit re-resolves.
+ */
+import type { MaybeRefOrGetter, Ref } from 'vue';
+import type { NodeConfigResolveError, NodeConfigResolveResult } from '../types/integrations.js';
+/**
+ * A config value counts as "set" for gating a dynamic resolve when it is a
+ * non-empty literal. Expression-looking strings (`${{ … }}` / leading `=`) are
+ * treated as unset: the backend resolves against literal values only, so a
+ * dependency still holding an expression can't drive resolution yet.
+ */
+export declare function isResolvableValue(v: unknown): boolean;
+export declare function useNodeConfigResolve(opts: {
+    slug: MaybeRefOrGetter<string>;
+    version: MaybeRefOrGetter<string>;
+    target: MaybeRefOrGetter<string>;
+    config: MaybeRefOrGetter<Record<string, unknown>>;
+    dependsOn?: MaybeRefOrGetter<string[] | undefined>;
+    enabled?: MaybeRefOrGetter<boolean>;
+    /** Type-to-search term, forwarded to loadOptions (PE-334). Keys the query. */
+    search?: MaybeRefOrGetter<string | undefined>;
+}): {
+    data: Ref<NodeConfigResolveResult | null>;
+    error: Ref<NodeConfigResolveError | null>;
+    isFetching: Ref<boolean>;
+    hasData: Ref<boolean>;
+    gated: Ref<boolean>;
+    unsatisfied: Ref<string[]>;
+    isEnabled: Ref<boolean>;
+    refetch: () => void;
+};

package/dist/runtime/composables/useNodeConfigResolve.js

@@ -0,0 +1,123 @@
+import { computed, onScopeDispose, ref, toValue, watch } from "vue";
+import { IntegrationsApiError, useIntegrationsApi } from "./integrationsApi.js";
+export function isResolvableValue(v) {
+  if (v === void 0 || v === null) return false;
+  if (typeof v === "string") {
+    const t = v.trim();
+    if (t === "") return false;
+    if (t.startsWith("=")) return false;
+    if (/\$?\{\{[\s\S]*?\}\}/.test(t)) return false;
+    return true;
+  }
+  if (Array.isArray(v)) return v.length > 0;
+  return true;
+}
+function classifyError(err) {
+  const status = err instanceof IntegrationsApiError ? err.status : void 0;
+  const message = err instanceof IntegrationsApiError ? err.message : err?.message ?? "Resolve failed";
+  let kind;
+  switch (status) {
+    case 409:
+      kind = "building";
+      break;
+    case 502:
+      kind = "runtime";
+      break;
+    case 403:
+      kind = "forbidden";
+      break;
+    case 404:
+      kind = "notfound";
+      break;
+    default:
+      kind = "generic";
+  }
+  return { kind, message };
+}
+function isAbortError(err) {
+  return err instanceof DOMException ? err.name === "AbortError" : err?.name === "AbortError";
+}
+const DEBOUNCE_MS = 300;
+const STALE_MS = 3e4;
+export function useNodeConfigResolve(opts) {
+  const api = useIntegrationsApi();
+  const data = ref(null);
+  const error = ref(null);
+  const isFetching = ref(false);
+  const hasData = ref(false);
+  const unsatisfied = computed(() => {
+    const cfg = toValue(opts.config);
+    const gateKeys = toValue(opts.dependsOn) ?? [];
+    return gateKeys.filter((k) => !isResolvableValue(cfg[k]));
+  });
+  const gated = computed(() => unsatisfied.value.length > 0);
+  const isEnabled = computed(
+    () => (toValue(opts.enabled) ?? true) && !gated.value && !!toValue(opts.slug) && !!toValue(opts.version)
+  );
+  const subsetKey = computed(() => {
+    const cfg = toValue(opts.config);
+    const dep = toValue(opts.dependsOn);
+    const keyKeys = (dep ?? Object.keys(cfg)).slice().sort();
+    const subset = {};
+    for (const k of keyKeys) subset[k] = cfg[k];
+    const rawSearch = toValue(opts.search);
+    const search = typeof rawSearch === "string" ? rawSearch.trim().slice(0, 200) : "";
+    return JSON.stringify({ config: subset, search: search || void 0 });
+  });
+  const debouncedKey = ref(subsetKey.value);
+  let debounceTimer = null;
+  watch(subsetKey, (next) => {
+    if (debounceTimer) clearTimeout(debounceTimer);
+    debounceTimer = setTimeout(() => {
+      debouncedKey.value = next;
+      debounceTimer = null;
+    }, DEBOUNCE_MS);
+  });
+  let controller = null;
+  let lastFetchedKey = null;
+  let lastFetchedAt = 0;
+  async function run(key) {
+    if (controller) controller.abort();
+    controller = new AbortController();
+    const signal = controller.signal;
+    const slug = toValue(opts.slug);
+    const version = toValue(opts.version);
+    const target = toValue(opts.target);
+    const { config, search } = JSON.parse(key);
+    isFetching.value = true;
+    try {
+      const result = await api.post(
+        `/nodes/${encodeURIComponent(slug)}/${encodeURIComponent(version)}/config:resolve`,
+        { target, config, ...search ? { search } : {} },
+        { signal }
+      );
+      data.value = result;
+      hasData.value = true;
+      error.value = null;
+      lastFetchedKey = key;
+      lastFetchedAt = Date.now();
+    } catch (err) {
+      if (isAbortError(err) || signal.aborted) return;
+      error.value = classifyError(err);
+    } finally {
+      if (!signal.aborted) isFetching.value = false;
+    }
+  }
+  function maybeFetch(force) {
+    if (!isEnabled.value) return;
+    const key = debouncedKey.value;
+    if (!force && lastFetchedKey === key && Date.now() - lastFetchedAt < STALE_MS && !error.value) {
+      return;
+    }
+    void run(key);
+  }
+  watch([debouncedKey, isEnabled], () => maybeFetch(false), { immediate: true });
+  function refetch() {
+    maybeFetch(true);
+  }
+  onScopeDispose(() => {
+    if (debounceTimer) clearTimeout(debounceTimer);
+    if (controller) controller.abort();
+  });
+  return { data, error, isFetching, hasData, gated, unsatisfied, isEnabled, refetch };
+}

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

@@ -0,0 +1,22 @@
+import type { NodeManifest } from '../types/integrations.js';
+import type { TriggerTemplate } from '../data/integrationNodeCatalog.js';
+/**
+ * Shared state of an in-flight palette drag. The HTML5 drag payload
+ * (`dataTransfer`) is unreadable during `dragover`, so the palette mirrors
+ * WHAT is being dragged here and the editor reads it to render the
+ * grid-snapped placement ghost on the canvas.
+ */
+export type NodeDragInfo = {
+    kind: 'manifest';
+    manifest: NodeManifest;
+} | {
+    kind: 'trigger';
+    tpl: TriggerTemplate;
+} | {
+    kind: 'group';
+};
+export declare function useNodeDrag(): {
+    dragging: any;
+    start: (info: NodeDragInfo) => void;
+    end: () => void;
+};

package/dist/runtime/composables/useNodeDrag.js

@@ -0,0 +1,10 @@
+export function useNodeDrag() {
+  const dragging = useState("integrations.nodeDrag", () => null);
+  function start(info) {
+    dragging.value = info;
+  }
+  function end() {
+    dragging.value = null;
+  }
+  return { dragging, start, end };
+}

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

@@ -0,0 +1,41 @@
+import { type Ref } from 'vue';
+export type PaletteDock = 'left' | 'right';
+export type PaletteMode = 'docked-left' | 'docked-right' | 'floating';
+/**
+ * Layout state for the workflow editor's node palette: docked left/right
+ * (full-height inlay), free-floating at a canvas position, or collapsed into
+ * a pill. `mode` survives collapse, so collapse/expand round-trips to the
+ * same placement.
+ *
+ * Moving uses plain pointer events — HTML5 drag stays reserved for the
+ * palette's node rows and the canvas drop. While dragging, coming within
+ * DOCK_ZONE of the left/right canvas edge arms a dock preview; release then
+ * snaps into the full-height dock, anywhere else keeps the panel floating.
+ *
+ * Persists to localStorage (guarded — private mode/quota must not throw) and
+ * restores clamped to the canvas on mount.
+ */
+export declare function usePaletteLayout(canvasRef: Ref<HTMLElement | null>): {
+    mode: Ref<PaletteMode, PaletteMode>;
+    collapsed: Ref<boolean, boolean>;
+    floating: Ref<{
+        x: number;
+        y: number;
+    }, {
+        x: number;
+        y: number;
+    } | {
+        x: number;
+        y: number;
+    }>;
+    floatingStyle: import("vue").ComputedRef<{
+        left: string;
+        top: string;
+    }>;
+    dragging: Ref<boolean, boolean>;
+    dockPreview: Ref<PaletteDock | null, PaletteDock | null>;
+    startDrag: (ev: PointerEvent, shellEl: HTMLElement | null) => void;
+    dock: (side: PaletteDock) => void;
+    floatHere: (shellEl: HTMLElement | null) => void;
+    setCollapsed: (v: boolean) => void;
+};

package/dist/runtime/composables/usePaletteLayout.js

@@ -0,0 +1,113 @@
+import { computed, onBeforeUnmount, onMounted, ref } from "vue";
+const STORAGE_KEY = "integrations.palette.layout";
+const MARGIN = 12;
+const BOTTOM_CLEARANCE = 64;
+const PANEL_WIDTH = 320;
+const DOCK_ZONE = 48;
+function clampNum(v, lo, hi) {
+  return Math.min(hi, Math.max(lo, v));
+}
+export function usePaletteLayout(canvasRef) {
+  const mode = ref("docked-left");
+  const collapsed = ref(false);
+  const floating = ref({ x: MARGIN, y: MARGIN });
+  const dragging = ref(false);
+  const dockPreview = ref(null);
+  function persist() {
+    try {
+      const payload = { mode: mode.value, floating: floating.value, collapsed: collapsed.value };
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(payload));
+    } catch {
+    }
+  }
+  function restore() {
+    try {
+      const raw = localStorage.getItem(STORAGE_KEY);
+      if (!raw) return;
+      const saved = JSON.parse(raw);
+      if (saved.mode === "docked-left" || saved.mode === "docked-right" || saved.mode === "floating") {
+        mode.value = saved.mode;
+      }
+      if (typeof saved.floating?.x === "number" && typeof saved.floating?.y === "number") {
+        floating.value = { x: saved.floating.x, y: saved.floating.y };
+      }
+      collapsed.value = saved.collapsed === true;
+      clampFloating();
+    } catch {
+    }
+  }
+  function clampFloating() {
+    const rect = canvasRef.value?.getBoundingClientRect();
+    if (!rect || rect.width === 0) return;
+    floating.value = {
+      x: clampNum(floating.value.x, MARGIN, Math.max(MARGIN, rect.width - PANEL_WIDTH - MARGIN)),
+      y: clampNum(floating.value.y, MARGIN, Math.max(MARGIN, rect.height - BOTTOM_CLEARANCE - 160))
+    };
+  }
+  onMounted(restore);
+  let grabDX = 0;
+  let grabDY = 0;
+  let panelHeight = 0;
+  function startDrag(ev, shellEl) {
+    if (ev.button !== 0 || dragging.value) return;
+    if (ev.target?.closest("button")) return;
+    const canvas = canvasRef.value;
+    if (!canvas || !shellEl) return;
+    const cRect = canvas.getBoundingClientRect();
+    const pRect = shellEl.getBoundingClientRect();
+    floating.value = { x: pRect.left - cRect.left, y: pRect.top - cRect.top };
+    mode.value = "floating";
+    grabDX = ev.clientX - pRect.left;
+    grabDY = ev.clientY - pRect.top;
+    panelHeight = Math.min(pRect.height, window.innerHeight * 0.7);
+    dragging.value = true;
+    ev.preventDefault();
+    window.addEventListener("pointermove", onDragMove);
+    window.addEventListener("pointerup", onDragEnd);
+    window.addEventListener("pointercancel", onDragEnd);
+  }
+  function onDragMove(ev) {
+    const rect = canvasRef.value?.getBoundingClientRect();
+    if (!rect) return;
+    const x = clampNum(ev.clientX - rect.left - grabDX, MARGIN, Math.max(MARGIN, rect.width - PANEL_WIDTH - MARGIN));
+    const y = clampNum(ev.clientY - rect.top - grabDY, MARGIN, Math.max(MARGIN, rect.height - BOTTOM_CLEARANCE - panelHeight));
+    floating.value = { x, y };
+    dockPreview.value = x <= DOCK_ZONE ? "left" : x + PANEL_WIDTH >= rect.width - DOCK_ZONE ? "right" : null;
+  }
+  function stopListeners() {
+    window.removeEventListener("pointermove", onDragMove);
+    window.removeEventListener("pointerup", onDragEnd);
+    window.removeEventListener("pointercancel", onDragEnd);
+  }
+  function onDragEnd() {
+    if (dockPreview.value) mode.value = dockPreview.value === "left" ? "docked-left" : "docked-right";
+    dockPreview.value = null;
+    dragging.value = false;
+    stopListeners();
+    persist();
+  }
+  onBeforeUnmount(stopListeners);
+  function dock(side) {
+    mode.value = side === "left" ? "docked-left" : "docked-right";
+    persist();
+  }
+  function floatHere(shellEl) {
+    if (mode.value !== "floating") {
+      const cRect = canvasRef.value?.getBoundingClientRect();
+      const pRect = shellEl?.getBoundingClientRect();
+      if (cRect && pRect) floating.value = { x: pRect.left - cRect.left, y: pRect.top - cRect.top };
+      mode.value = "floating";
+      clampFloating();
+    }
+    persist();
+  }
+  function setCollapsed(v) {
+    collapsed.value = v;
+    persist();
+  }
+  const floatingStyle = computed(() => ({
+    left: `${floating.value.x}px`,
+    top: `${floating.value.y}px`
+  }));
+  return { mode, collapsed, floating, floatingStyle, dragging, dockPreview, startDrag, dock, floatHere, setCollapsed };
+}

package/dist/runtime/data/expressionEditor.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Round-trip between the raw expression text (the single source of truth
+ * stored in the workflow blob) and the TipTap document the inline pill editor
+ * renders. Pure JSON transforms — no editor dependency, fully testable.
+ */
+export interface InlineNodeJSON {
+    type: string;
+    text?: string;
+    attrs?: Record<string, unknown>;
+    content?: InlineNodeJSON[];
+}
+export declare const EXPR_TOKEN_NODE = "exprToken";
+/** Raw text → inline content: text nodes with one atom pill per token. */
+export declare function textToInlineContent(text: string): InlineNodeJSON[];
+/** Raw text → a full single-paragraph TipTap doc. */
+export declare function textToDoc(text: string): InlineNodeJSON;
+/** TipTap doc JSON → raw text (pills serialize back to their `${{ … }}` token).
+ *  Multiple paragraphs (pasted newlines) collapse to single spaces — the
+ *  fields are single-line. */
+export declare function docToText(doc: InlineNodeJSON | null | undefined): string;
+/** True when any TEXT node still carries a complete raw token (needs re-pilling). */
+export declare function hasRawTokenText(doc: InlineNodeJSON | null | undefined): boolean;

package/dist/runtime/data/expressionEditor.js

@@ -0,0 +1,40 @@
+import { listExpressionTokens } from "./nodeRunData.js";
+export const EXPR_TOKEN_NODE = "exprToken";
+export function textToInlineContent(text) {
+  const out = [];
+  let cursor = 0;
+  for (const t of listExpressionTokens(text)) {
+    if (t.start > cursor) out.push({ type: "text", text: text.slice(cursor, t.start) });
+    out.push({ type: EXPR_TOKEN_NODE, attrs: { token: t.token } });
+    cursor = t.end;
+  }
+  if (cursor < text.length) out.push({ type: "text", text: text.slice(cursor) });
+  return out;
+}
+export function textToDoc(text) {
+  const content = textToInlineContent(text);
+  return { type: "doc", content: [content.length ? { type: "paragraph", content } : { type: "paragraph" }] };
+}
+export function docToText(doc) {
+  if (!doc) return "";
+  const inlineText = (p) => {
+    let s = "";
+    for (const child of p.content ?? []) {
+      if (child.type === "text") s += child.text ?? "";
+      else if (child.type === EXPR_TOKEN_NODE) s += String(child.attrs?.token ?? "");
+      else s += inlineText(child);
+    }
+    return s;
+  };
+  return (doc.content ?? []).filter((n) => n.type === "paragraph").map(inlineText).join(" ");
+}
+export function hasRawTokenText(doc) {
+  if (!doc) return false;
+  const stack = [doc];
+  while (stack.length) {
+    const node = stack.pop();
+    if (node.type === "text" && listExpressionTokens(node.text ?? "").length > 0) return true;
+    for (const child of node.content ?? []) stack.push(child);
+  }
+  return false;
+}