@revenexx/studio-shared 0.2.0 → 0.3.1

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

@@ -0,0 +1,69 @@
+import { type Ref } from 'vue';
+export type FloatingPanelDock = 'left' | 'right';
+export type FloatingPanelMode = 'docked-left' | 'docked-right' | 'floating';
+export interface FloatingPanelOptions {
+    /**
+     * Where this panel's placement is remembered. One key per panel — two panels
+     * sharing a key would drag each other around.
+     */
+    storageKey: string;
+    /** Which side it starts on, before anybody has moved it. */
+    initialMode?: FloatingPanelMode;
+    /** The panel's width, in px. Used to clamp it inside the canvas. */
+    width?: number;
+    /** Room to keep clear at the bottom, for a floating control bar. */
+    bottomClearance?: number;
+}
+/**
+ * A panel that can be docked to either side of a canvas, floated anywhere on
+ * it, or collapsed into a pill — and dragged between those states by its own
+ * header.
+ *
+ * Lifted from the integration studio's workflow editor, where this shape was
+ * worked out and where it has been in daily use: `usePaletteLayout`, with the
+ * storage key and the dimensions made arguments so a second editor can have
+ * its own panels rather than fighting over one remembered position.
+ *
+ * ## Why pointer events rather than HTML5 drag
+ *
+ * The panel's CONTENTS are draggable — the workflow editor drags nodes out of
+ * its palette onto the canvas, and the mail builder drags blocks. HTML5 drag
+ * on the shell would swallow those gestures. The header moves the panel with
+ * plain pointer events, so the two never compete: grab the bar, or grab a row,
+ * and each does the one thing.
+ *
+ * ## The magnet
+ *
+ * Coming within `DOCK_ZONE` of the left or right edge while dragging arms
+ * `dockPreview`, which the host renders as a ghost of the dock slot. Releasing
+ * inside the zone snaps into that dock; anywhere else leaves the panel where it
+ * was dropped. Docking is a state, not a position, so a docked panel keeps its
+ * side when the window resizes.
+ *
+ * Placement is persisted (guarded — private mode and quota must not throw) and
+ * clamped to the canvas on restore, because the window may have shrunk since.
+ */
+export declare function useFloatingPanel(canvasRef: Ref<HTMLElement | null>, options: FloatingPanelOptions): {
+    mode: Ref<FloatingPanelMode, FloatingPanelMode>;
+    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<FloatingPanelDock | null, FloatingPanelDock | null>;
+    startDrag: (ev: PointerEvent, shellEl: HTMLElement | null) => void;
+    dock: (side: FloatingPanelDock) => void;
+    floatHere: (shellEl: HTMLElement | null) => void;
+    setCollapsed: (v: boolean) => void;
+};

package/dist/runtime/composables/useFloatingPanel.js

@@ -0,0 +1,112 @@
+import { computed, onBeforeUnmount, onMounted, ref } from "vue";
+const MARGIN = 12;
+const DOCK_ZONE = 48;
+function clampNum(v, lo, hi) {
+  return Math.min(hi, Math.max(lo, v));
+}
+export function useFloatingPanel(canvasRef, options) {
+  const width = options.width ?? 320;
+  const bottomClearance = options.bottomClearance ?? 64;
+  const mode = ref(options.initialMode ?? "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(options.storageKey, JSON.stringify(payload));
+    } catch {
+    }
+  }
+  function restore() {
+    try {
+      const raw = localStorage.getItem(options.storageKey);
+      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 - width - MARGIN)),
+      y: clampNum(floating.value.y, MARGIN, Math.max(MARGIN, rect.height - bottomClearance - 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 - width - MARGIN));
+    const y = clampNum(ev.clientY - rect.top - grabDY, MARGIN, Math.max(MARGIN, rect.height - bottomClearance - panelHeight));
+    floating.value = { x, y };
+    dockPreview.value = x <= DOCK_ZONE ? "left" : x + 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/composables/useListRail.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Open/closed state for a list surface's left rail, remembered per surface.
+ *
+ * The rail is a filter affordance, not content: an operator who collapsed it
+ * to give the table the full width expects it to stay collapsed on the next
+ * visit. Reads happen on mount (SSR-safe) and every change is written back;
+ * a browser without usable storage simply keeps the state for the session.
+ */
+export declare function useListRail(key: string, initial?: boolean): any;

package/dist/runtime/composables/useListRail.js

@@ -0,0 +1,19 @@
+export function useListRail(key, initial = true) {
+  const storageKey = `commerce.listRail.${key}`;
+  const open = ref(initial);
+  onMounted(() => {
+    try {
+      const raw = window.localStorage.getItem(storageKey);
+      if (raw != null) open.value = raw === "1";
+    } catch {
+    }
+  });
+  watch(open, (v) => {
+    try {
+      if (typeof window === "undefined") return;
+      window.localStorage.setItem(storageKey, v ? "1" : "0");
+    } catch {
+    }
+  });
+  return open;
+}

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

@@ -0,0 +1,41 @@
+import type { Ref } from 'vue';
+import type { StorageAsset, StorageFolder, StorageFolderNode, UploadProgress } from '../types/storage.js';
+/**
+ * Media library provider seam — the storage client behind the shared media
+ * components (`MediaUploader`, `MediaPickerDialog`, `MediaFolderTree`).
+ *
+ * Same shape as the `usePlatformAuth` / `usePlatformTenant` contract: the
+ * components never import a host's storage client, they call this. The
+ * standalone default below is inert (no assets, uploads report as failed), so a
+ * module host that hasn't wired Storage still renders the dialogs instead of
+ * crashing. The full cockpit overrides it at `app/composables/useMediaLibrary.ts`
+ * — an app-level auto-import beats this module-registered one (priority -1).
+ */
+export type { StorageAsset, StorageFolder, StorageFolderNode, UploadProgress };
+export interface MediaLibraryClient {
+    /** Assets in the current view. */
+    assets: Ref<StorageAsset[]>;
+    /** Folders nested by `parent_id`, each level sorted by name. */
+    folderTree: Ref<StorageFolderNode[]>;
+    currentFolderId: Ref<string | null>;
+    /** 'all' = every asset; 'unfiled' = folder-less; 'folder' = `currentFolderId`. */
+    currentView: Ref<'all' | 'unfiled' | 'folder'>;
+    currentFolder: Ref<StorageFolder | null>;
+    loadingAssets: Ref<boolean>;
+    hasMore: Ref<boolean>;
+    /** Load folders + the current view's assets. */
+    init: () => Promise<void>;
+    openFolder: (folderId: string) => Promise<void>;
+    showAllMedia: () => Promise<void>;
+    loadMore: () => Promise<void>;
+    /** Upload a batch into `folderId`, reporting per-file progress. */
+    uploadMany: (files: File[], folderId?: string | null, onItem?: (index: number, progress: UploadProgress) => void) => Promise<{
+        created: number;
+        failed: number;
+    }>;
+    /** Displayable thumbnail URL, or null when the kind has no preview. */
+    thumbnailUrl: (asset: StorageAsset, size?: number) => string | null;
+    /** True while the asset is still being scanned/processed. */
+    isProcessing: (asset: StorageAsset) => boolean;
+}
+export declare function useMediaLibrary(): MediaLibraryClient;

package/dist/runtime/composables/useMediaLibrary.js

@@ -0,0 +1,36 @@
+import { computed, ref } from "vue";
+export function useMediaLibrary() {
+  const assets = ref([]);
+  const folderTree = ref([]);
+  const currentFolderId = ref(null);
+  const currentView = ref("all");
+  const currentFolder = computed(() => null);
+  const loadingAssets = ref(false);
+  const hasMore = ref(false);
+  const noop = async () => {
+  };
+  return {
+    assets,
+    folderTree,
+    currentFolderId,
+    currentView,
+    currentFolder,
+    loadingAssets,
+    hasMore,
+    init: noop,
+    openFolder: noop,
+    showAllMedia: noop,
+    loadMore: noop,
+    async uploadMany(files, _folderId, onItem) {
+      files.forEach((file, i) => onItem?.(i, {
+        name: file.name,
+        pct: 0,
+        status: "failed",
+        error: useT()("shared.media.uploader.error.nostorage")
+      }));
+      return { created: 0, failed: files.length };
+    },
+    thumbnailUrl: () => null,
+    isProcessing: () => false
+  };
+}

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

@@ -1,3 +1,4 @@
+import type { Ref } from 'vue';
 /**
  * Platform auth provider — the seam that lets a studio surface run either
  * inside the full cockpit or standalone.
@@ -13,5 +14,22 @@
  */
 export interface PlatformAuth {
     getToken: () => Promise<string | null>;
+    /**
+     * Whether a token is available NOW, as a reactive flag. OPTIONAL, because the
+     * standalone default below has nothing to report — a value in `localStorage` is
+     * either there or not, with no moment at which it becomes there.
+     *
+     * It exists for the hosts where `getToken()` legitimately answers null for a
+     * while and then starts working: the cockpit's override refreshes through
+     * `useConsoleAuth`, which backs off for 15s after a failed refresh and returns
+     * null for the duration. A consumer that only reacts to something ELSE changing
+     * — `usePlatformTalkback` watched the tenant slug — never retries and stays
+     * dead for the life of the tab.
+     *
+     * Deliberately a flag rather than the token itself: nothing outside the auth
+     * seam should hold a token it did not just ask for, and a stale one in a `ref`
+     * is exactly how that happens.
+     */
+    ready?: Readonly<Ref<boolean>>;
 }
 export declare function usePlatformAuth(): PlatformAuth;

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

@@ -0,0 +1,29 @@
+import type { ShallowRef } from 'vue';
+import type { Talkback } from '@revenexx/talkback-js';
+/**
+ * Platform realtime provider — the third seam beside `usePlatformAuth` and
+ * `usePlatformTenant`, and it composes both of them.
+ *
+ * A studio module never builds a Talkback client itself: it calls
+ * `useTalkbackTopic()` / `useTalkbackResource()` and this decides whether there
+ * is a connection behind them. One client for the whole application — a second
+ * `createTalkback` would open a second WebSocket and mint its own connection
+ * token.
+ *
+ * OFF IS A FIRST-CLASS STATE. An empty `talkbackHost` means no client is built,
+ * neither `@revenexx/talkback-js` nor `centrifuge` is loaded, and the channel
+ * composables become no-ops — so a call site needs no guard and a host that has
+ * no realtime stack is not half-connected. That is also the production gate: the
+ * edge has not been shown to pass a WebSocket upgrade yet (PE-382 T0.2).
+ */
+export interface PlatformTalkback {
+    /**
+     * The client, or `null` while it is still loading or realtime is off.
+     * Reactive: the client arrives after a dynamic import, so a component that
+     * rendered first has to be able to pick it up.
+     */
+    talkback: ShallowRef<Talkback | null>;
+    /** Whether this host has realtime configured at all. */
+    enabled: boolean;
+}
+export declare function usePlatformTalkback(): PlatformTalkback;

package/dist/runtime/composables/usePlatformTalkback.js

@@ -0,0 +1,54 @@
+import { watch } from "vue";
+import { createPlatformTalkback, setTalkback, talkbackRef } from "../lib/talkback.js";
+function withAppBase(baseURL, path) {
+  if (/^https?:\/\//.test(path)) return path;
+  const base = (baseURL || "/").replace(/\/+$/, "");
+  return `${base}/${path.replace(/^\/+/, "")}`;
+}
+let started = false;
+export function usePlatformTalkback() {
+  const config = useRuntimeConfig();
+  const host = String(config.public.talkbackHost || "");
+  const enabled = Boolean(host);
+  if (enabled && import.meta.client && !started) {
+    started = true;
+    const { getToken, ready: authReady } = usePlatformAuth();
+    const { slug, load } = usePlatformTenant();
+    const baseURL = String(config.app?.baseURL || "/");
+    const facade = host.replace(/\/+$/, "");
+    const tokenEndpoint = withAppBase(baseURL, String(config.public.talkbackTokenEndpoint || `${facade}/v1/tokens`));
+    const subscriptionTokenEndpoint = withAppBase(baseURL, String(config.public.talkbackSubscriptionTokenEndpoint || `${facade}/v1/subscription-tokens`));
+    const start = (async () => {
+      const tb = await createPlatformTalkback({
+        host,
+        tokenEndpoint,
+        subscriptionTokenEndpoint,
+        tenant: () => slug.value ?? "",
+        getToken
+      });
+      setTalkback(tb);
+      let applied = null;
+      async function sync() {
+        if (!slug.value) {
+          try {
+            await load();
+          } catch {
+          }
+        }
+        const token = await getToken();
+        const next = slug.value && token ? slug.value : null;
+        if (next === applied) return;
+        tb.disconnect();
+        applied = next;
+        if (next) tb.connect();
+      }
+      const inputs = authReady ? [slug, authReady] : [slug];
+      watch(inputs, () => void sync(), { immediate: true });
+    })();
+    void start.catch((error) => {
+      if (!talkbackRef().value) started = false;
+      console.warn("[studio-shared] talkback failed to start", error);
+    });
+  }
+  return { talkback: talkbackRef(), enabled };
+}

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

@@ -0,0 +1,11 @@
+import type { ComputedRef } from 'vue';
+import type { Translate } from '../lib/i18nBridge.js';
+export declare function useT(): Translate;
+/**
+ * The host's current UI locale (`'en'` when the host has no i18n).
+ *
+ * This is the INTERFACE language, not a content locale: it says which language
+ * the chrome is in, never which locale of a `labels` jsonb to show. For the
+ * latter see `useTenantLocales()` in `@revenexx/studio-commerce`.
+ */
+export declare function useUiLocale(): ComputedRef<string>;

package/dist/runtime/composables/useT.js

@@ -0,0 +1,8 @@
+import { computed } from "vue";
+import { currentLocale, translate } from "../lib/i18nBridge.js";
+export function useT() {
+  return translate;
+}
+export function useUiLocale() {
+  return computed(() => currentLocale());
+}

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

@@ -0,0 +1,93 @@
+import type { ComputedRef } from 'vue';
+import type { EnvelopeListener, RawListener, ResyncContext } from '@revenexx/talkback-js';
+import type { MaybeRefOrGetter } from '@revenexx/talkback-js/vue';
+/**
+ * The five channel composables, re-exported through this package so a studio
+ * module can subscribe with a bare name and carry no Talkback dependency of its
+ * own — the same contract `usePlatformAuth` / `usePlatformTenant` already have.
+ *
+ * THREE THINGS THESE WRAPPERS ADD, and each is a bug without them:
+ *
+ * 1. **The client is passed explicitly, never injected.** talkback-js's
+ *    `useTalkback()` reads a module-PRIVATE `Symbol`, so two copies of the
+ *    package are two different keys: it throws inside a studio module while the
+ *    host looks healthy. Its `talkback` option exists for exactly this, and
+ *    using it means no consumer has to know a plugin ran in the right order.
+ *
+ * 2. **They tolerate a client that does not exist yet.** The client arrives
+ *    after a dynamic import, so any component that rendered first would
+ *    otherwise subscribe to nothing and never retry. The delegate runs in a
+ *    child `effectScope` that is created when the client appears and stopped
+ *    with the caller's scope — which is also what gives the delegate's own
+ *    `onScopeDispose(release)` a scope to bind to.
+ *
+ * 3. **An attach that cannot name a channel yet is retried, as long as what is
+ *    missing is reactive.** `useChannel` attaches EAGERLY and only then installs
+ *    the watch that would re-attach, and the eager call has no `try` around
+ *    `resolveName()` while the watch's source does. So a name the grammar rejects
+ *    at that moment — overwhelmingly a tenant that has not been loaded yet, since
+ *    it is positionally first in every channel name — throws straight out of the
+ *    composable, before anything exists that could try again. Swallowing that (as
+ *    this wrapper once did) turns "not yet" into "never": the subscription is lost
+ *    for the life of the tab while the socket connects perfectly well, which is
+ *    the shape realtime silently missing takes. The attach therefore runs inside
+ *    an effect, so the reads that got as far as throwing are tracked and the
+ *    attempt is repeated when one of them changes.
+ *
+ *    THE QUALIFIER IS LOAD-BEARING, and `useTalkbackUser` is where it bites:
+ *    `userChannel(tenant, '')` throws too, but the subject is a plain `let userId`
+ *    in `createPlatformTalkback` — cached from the last mint so it can answer
+ *    synchronously — so the tenant is the only tracked read and a subject that
+ *    fills in later re-runs nothing. That is not new (the throw was swallowed
+ *    before as well, and there was no channel either way), and a null token is the
+ *    ordinary state for up to fifteen seconds per `usePlatformTalkback`. Making
+ *    `userId` reactive is what would close it.
+ *
+ * With realtime off (`talkbackHost` empty) every one of these is a no-op that
+ * reports a null channel, so a call site needs no `if (enabled)`.
+ */
+/** Re-exported so a consumer types a ref-able argument without importing talkback-js. */
+export type TalkbackMaybeRef<T> = MaybeRefOrGetter<T>;
+export interface TalkbackChannelOptions {
+    /** One action, or several. Omit to receive every action on the channel. */
+    on?: string | readonly string[];
+    /** Called for each matching envelope. Events are refetch signals, not state. */
+    handler?: EnvelopeListener;
+    /** Every publication, envelope or not — how a `stream:` channel is read. */
+    raw?: RawListener;
+    /** The recovery buffer could not close the gap: refetch over HTTP. */
+    onResync?: (ctx: ResyncContext) => void;
+    /** Skip subscribing, e.g. while a route parameter is still empty. */
+    enabled?: TalkbackMaybeRef<boolean>;
+}
+export interface TalkbackChannel {
+    /** The currently subscribed channel, or null when nothing is subscribed. */
+    channel: ComputedRef<string | null>;
+    /** Releases early. Called automatically when the calling scope is disposed. */
+    stop: () => void;
+}
+/**
+ * The ACTION channel for a topic — a grid watching every instance of a kind.
+ *
+ * THE TOPIC INCLUDES THE ACTION, and one action is one channel (Centrifugo has
+ * no wildcards), so a grid watching three actions takes three calls:
+ *
+ * ```ts
+ * for (const action of ['started', 'finished', 'failed'] as const) {
+ *   useTalkbackTopic(`revenexx.integrations.run.${action}`, { handler: () => load(true) })
+ * }
+ * ```
+ */
+export declare function useTalkbackTopic(topic: TalkbackMaybeRef<string>, options?: TalkbackChannelOptions): TalkbackChannel;
+/**
+ * The RESOURCE channel — one detail view, every action on it. The id may be a
+ * ref or a getter, and the subscription follows it, releasing the old channel
+ * before taking the new one.
+ */
+export declare function useTalkbackResource(topic: TalkbackMaybeRef<string>, topicId: TalkbackMaybeRef<string | null | undefined>, options?: TalkbackChannelOptions): TalkbackChannel;
+/** The signed-in user's own channel — notifications and toasts. */
+export declare function useTalkbackUser(options?: TalkbackChannelOptions): TalkbackChannel;
+/** A `stream:` channel. `onResync` fires on EVERY subscribe here — it keeps no history. */
+export declare function useTalkbackStream(streamId: TalkbackMaybeRef<string | null | undefined>, options?: TalkbackChannelOptions): TalkbackChannel;
+/** Who else is looking at this resource. */
+export declare function useTalkbackPresence(vendor: TalkbackMaybeRef<string>, app: TalkbackMaybeRef<string>, entity: TalkbackMaybeRef<string>, id?: TalkbackMaybeRef<string | null | undefined>, options?: TalkbackChannelOptions): TalkbackChannel;

package/dist/runtime/composables/useTalkbackChannels.js

@@ -0,0 +1,56 @@
+import { computed, effectScope, onScopeDispose, shallowRef, watch, watchEffect } from "vue";
+import { talkbackRef } from "../lib/talkback.js";
+function useDelegate(subscribe) {
+  const client = talkbackRef();
+  const attached = shallowRef(null);
+  const scope = shallowRef(null);
+  function stop() {
+    scope.value?.stop();
+    scope.value = null;
+    attached.value = null;
+  }
+  const unwatch = watch(client, (tb) => {
+    stop();
+    if (!tb) return;
+    const child = effectScope();
+    scope.value = child;
+    void (async () => {
+      const vue = await import("@revenexx/talkback-js/vue");
+      if (scope.value !== child) return;
+      child.run(() => {
+        let sub = null;
+        watchEffect(() => {
+          if (sub) return;
+          child.run(() => {
+            try {
+              sub = subscribe(vue, tb);
+            } catch {
+              return;
+            }
+            attached.value = sub;
+          });
+        });
+      });
+    })();
+  }, { immediate: true });
+  onScopeDispose(() => {
+    unwatch();
+    stop();
+  });
+  return { channel: computed(() => attached.value?.channel.value ?? null), stop };
+}
+export function useTalkbackTopic(topic, options = {}) {
+  return useDelegate((vue, tb) => vue.useTalkbackTopic(topic, { ...options, talkback: tb }));
+}
+export function useTalkbackResource(topic, topicId, options = {}) {
+  return useDelegate((vue, tb) => vue.useTalkbackResource(topic, topicId, { ...options, talkback: tb }));
+}
+export function useTalkbackUser(options = {}) {
+  return useDelegate((vue, tb) => vue.useTalkbackUser({ ...options, talkback: tb }));
+}
+export function useTalkbackStream(streamId, options = {}) {
+  return useDelegate((vue, tb) => vue.useTalkbackStream(streamId, { ...options, talkback: tb }));
+}
+export function useTalkbackPresence(vendor, app, entity, id = () => null, options = {}) {
+  return useDelegate((vue, tb) => vue.useTalkbackPresence(vendor, app, entity, id, { ...options, talkback: tb }));
+}

package/dist/runtime/lib/columnOrder.d.ts

@@ -0,0 +1,45 @@
+/**
+ * The order a table's columns are drawn in, once the reader has an opinion.
+ *
+ * Sits beside `columnVisibility` because it has the SAME trap, and the trap has
+ * already shipped once in this file's neighbour.
+ *
+ * A table's column list is not fixed for the life of the component. A tab that
+ * offers Markets only once the service proves it has the column, or engagement
+ * once the deployment reports any, hands the table a LONGER array on a later
+ * render. If the remembered order were treated as the whole truth, every column
+ * that turned up afterwards would be missing from it — and the obvious
+ * implementation, "sort by index in the remembered list, unknowns last", puts
+ * that new column silently at the far right where nobody scrolls. Which is
+ * indistinguishable, from the outside, from never having been built.
+ *
+ * So what is remembered is the reader's own arrangement, and a column that is
+ * not in it keeps its DECLARED neighbours: it lands directly after whichever
+ * declared predecessor is nearest, or first if it has none. A column added
+ * between Channel and Status appears between Channel and Status, wherever the
+ * reader has since dragged those two.
+ */
+export interface OrderableColumn {
+    key: string;
+}
+/**
+ * The declared columns, arranged.
+ *
+ * An empty `order` means the reader has not touched anything, which is not the
+ * same as an order that happens to match — the first is "use the declaration",
+ * the second is a decision that must survive the declaration changing.
+ */
+export declare function orderColumnsBy<T extends OrderableColumn>(columns: readonly T[], order: readonly string[]): T[];
+/**
+ * Move one column and return the arrangement to remember.
+ *
+ * Always a COMPLETE list of keys, even when the previous one was partial or
+ * empty: after the first drag there is an opinion about every column, and a
+ * half-remembered order would leave the untouched ones re-deriving their
+ * position on every render.
+ *
+ * `to` is the index in the list as it will be — what a drop target means — and
+ * out-of-range values clamp rather than throw. A drag that ends outside the
+ * list means "leave it where it is", not "crash the picker".
+ */
+export declare function reorderColumns<T extends OrderableColumn>(columns: readonly T[], order: readonly string[], from: number, to: number): string[];

package/dist/runtime/lib/columnOrder.js

@@ -0,0 +1,28 @@
+export function orderColumnsBy(columns, order) {
+  if (!order.length) return [...columns];
+  const byKey = new Map(columns.map((c) => [c.key, c]));
+  const remembered = new Set(order);
+  const result = order.filter((k) => byKey.has(k)).map((k) => byKey.get(k));
+  columns.forEach((column, declaredIndex) => {
+    if (remembered.has(column.key)) return;
+    let insertAt = 0;
+    for (let i = declaredIndex - 1; i >= 0; i--) {
+      const at = result.indexOf(columns[i]);
+      if (at !== -1) {
+        insertAt = at + 1;
+        break;
+      }
+    }
+    result.splice(insertAt, 0, column);
+  });
+  return result;
+}
+export function reorderColumns(columns, order, from, to) {
+  const keys = orderColumnsBy(columns, order).map((c) => c.key);
+  if (from < 0 || from >= keys.length) return keys;
+  const clamped = Math.max(0, Math.min(to, keys.length - 1));
+  if (clamped === from) return keys;
+  const [moved] = keys.splice(from, 1);
+  keys.splice(clamped, 0, moved);
+  return keys;
+}