@revenexx/studio-integrations 0.1.4 → 0.3.0

package/dist/runtime/composables/useIntegrationsTemplates.js

@@ -1,8 +1,17 @@
 import { computed } from "vue";
-import { IntegrationsApiError, useIntegrationsApi } from "./integrationsApi.js";
+import { useIntegrationsApi } from "./integrationsApi.js";
+import { IntegrationsApiError } from "../utils/apiError.js";
 import { resolveLocalized } from "../utils/localize.js";
 const BLOB_VERSION = "v0-draft";
 const INDUSTRY_VALUES = ["mechanical-engineering", "chemicals", "wholesale", "manufacturing", "retail", "any"];
+function plainExcerpt(md) {
+  for (const raw of md.split("\n")) {
+    const line = raw.trim();
+    if (!line || line.startsWith("#")) continue;
+    return line.replace(/\*\*([^*]+)\*\*/g, "$1").replace(/\*([^*]+)\*/g, "$1").replace(/`([^`]+)`/g, "$1").replace(/\[([^\]]+)\]\([^)]*\)/g, "$1");
+  }
+  return "";
+}
 function publisherFor(slug, vendors) {
   const ns = slug.includes(":") ? slug.split(":")[0] : vendors[0] ?? "revenexx";
   const kind = ns === "revenexx" ? "revenexx" : "partner";
@@ -15,10 +24,16 @@ function emptyBlob(name) {
   return { nodeManifestVersion: BLOB_VERSION, name, nodes: [], edges: [], triggerPositions: {}, triggers: [] };
 }
 function mapListItem(api) {
+  const short = resolveLocalized(api.shortDescription ?? "");
+  const md = resolveLocalized(api.description ?? "");
   return {
     slug: api.slug,
     name: resolveLocalized(api.name),
-    description: resolveLocalized(api.description || api.shortDescription || ""),
+    description: short || plainExcerpt(md),
+    descriptionMd: md,
+    triggerTypes: api.triggerTypes ?? [],
+    images: api.images ?? [],
+    package: api.package ? { name: api.package.name, label: api.package.label ?? null } : null,
     category: api.category ?? "sync",
     industries: mapIndustries(api.industries),
     vendors: api.vendors ?? [],
@@ -48,13 +63,17 @@ function applyDetail(base, api) {
     name: def.name ?? base.name,
     nodes,
     edges: def.edges ?? [],
-    triggerPositions: {},
+    triggerPositions: def.triggerPositions ?? {},
+    variables: def.variables,
     triggers
   };
+  const md = resolveLocalized(api.description ?? "") || base.descriptionMd;
   return {
     ...base,
-    description: resolveLocalized(api.description || api.shortDescription || "") || base.description,
+    description: base.description || plainExcerpt(md),
+    descriptionMd: md,
     blob,
+    detailLoaded: true,
     nodeCount: nodes.length,
     outline: nodes.map((n) => n.nodeSlug ?? n.id).filter(Boolean)
   };
@@ -107,6 +126,16 @@ export function useIntegrationsTemplates() {
       return base;
     }
   }
+  async function ensureDetails(slugs, concurrency = 4) {
+    const queue = slugs.filter((slug) => get(slug)?.fromApi && !get(slug)?.detailLoaded);
+    const workers = Array.from({ length: Math.min(concurrency, queue.length) }, async () => {
+      while (queue.length) {
+        const slug = queue.shift();
+        if (slug) await fetchDetail(slug);
+      }
+    });
+    await Promise.all(workers);
+  }
   async function requirements(slug) {
     try {
       const raw = unwrap(await api.get(`/templates/${slug}/requirements`));
@@ -137,5 +166,5 @@ export function useIntegrationsTemplates() {
   }
   const total = computed(() => templates.value.length);
   const popular = computed(() => [...templates.value].sort((a, b) => b.installs - a.installs).slice(0, 4));
-  return { templates, loaded, loading, error, total, popular, load, list, get, fetchDetail, requirements, instantiate, install };
+  return { templates, loaded, loading, error, total, popular, load, list, get, fetchDetail, ensureDetails, requirements, instantiate, install };
 }

package/dist/runtime/composables/useIntegrationsTriggers.js

@@ -1,4 +1,5 @@
-import { IntegrationsApiError, useIntegrationsApi } from "./integrationsApi.js";
+import { useIntegrationsApi } from "./integrationsApi.js";
+import { IntegrationsApiError } from "../utils/apiError.js";
 export function useIntegrationsTriggers() {
   const all = useState("integrations.triggers.all", () => []);
   const loading = useState("integrations.triggers.loading", () => false);

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

@@ -23,6 +23,7 @@ export declare function useIntegrationsWorkflows(): {
         active: boolean;
         executionMode?: WorkflowExecutionMode;
     }) => Promise<Workflow>;
+    duplicate: (id: number, name?: string) => Promise<Workflow>;
     remove: (id: number) => Promise<void>;
     toggleActive: (id: number) => Promise<Workflow | null>;
 };

package/dist/runtime/composables/useIntegrationsWorkflows.js

@@ -1,5 +1,6 @@
 import { computed } from "vue";
-import { IntegrationsApiError, useIntegrationsApi } from "./integrationsApi.js";
+import { useIntegrationsApi } from "./integrationsApi.js";
+import { IntegrationsApiError } from "../utils/apiError.js";
 const BLOB_VERSION = "v0-draft";
 function toCockpit(api) {
   const apiBlob = api.blob ?? {};
@@ -15,7 +16,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 +33,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 +50,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 +128,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 +202,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,124 @@
+import { computed, onScopeDispose, ref, toValue, watch } from "vue";
+import { useIntegrationsApi } from "./integrationsApi.js";
+import { IntegrationsApiError } from "../utils/apiError.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;
+};