@antcde/vue-utils 0.2.13 → 0.2.14-rc.09815b8

package/dist/index.js

@@ -1,182 +1,427 @@
-import { useColorMode as P, objectPick as L, objectOmit as C, useMagicKeys as M, whenever as g, watchDebounced as O, useAsyncState as I } from "@vueuse/core";
-import { computed as u, watch as h, ref as d, onBeforeUnmount as E, onMounted as U, onUnmounted as D, readonly as H, inject as W } from "vue";
-import { useI18n as z } from "vue-i18n";
-import { newCommsClient as B, newCommsHost as K } from "@antcde/connect-ts";
-import { concat as R, Subject as T, concatMap as S, map as w, distinctUntilChanged as G, debounceTime as V, BehaviorSubject as j, filter as q } from "rxjs";
-function te(t, o) {
-  const n = P(o), e = u(() => t.context.value.darkMode), s = u(() => {
-    switch (e.value) {
-      case null:
-        return "auto";
-      case !0:
-        return "dark";
-      case !1:
-        return "light";
-      default:
-        return n.value;
-    }
-  }), r = u(() => {
-    switch (s.value) {
-      case "light":
-      case "auto":
-        return !1;
-      case "dark":
-        return !0;
-    }
-  });
-  return Object.assign(
-    s,
-    { host: e, isDark: r },
-    L(n, ["state", "system", "store"])
-  );
-}
-function se(t, o) {
-  const n = z(o);
-  return h(
-    () => t.context.value.user?.language,
-    (e) => n.locale.value = e ?? "en",
-    { immediate: !0 }
-  ), n;
-}
-function F(t, o) {
-  const n = d({}), e = B({ parent: window.parent, connect: t }), s = d(""), r = u({
-    get: () => s.value,
-    set: (i) => e.appState.set(i)
-  });
-  return e.context.subscribe((i) => n.value = i), R(e.appState.get(), e.appState).subscribe((i) => s.value = i), N(e.signal, e, o), E(() => e.unsubscribe()), Object.assign(
-    C(e, ["context", "toolbar", "appState"]),
-    {
-      context: n,
-      toolbar: J(e),
-      appState: r
-    }
-  );
-}
-function J(t) {
-  const o = d(""), n = {
-    title: u({
-      get: () => t.toolbar.get().title,
-      set: (e) => t.toolbar.set((s) => ({ ...s, title: e }))
-    }),
-    subtitle: u({
-      get: () => t.toolbar.get().subtitle,
-      set: (e) => t.toolbar.set((s) => ({ ...s, subtitle: e }))
-    }),
-    searchEnabled: u({
-      get: () => t.toolbar.get().search.enabled,
-      set: (e) => t.toolbar.set((s) => ({ ...s, search: { ...s.search, enabled: e } }))
-    }),
-    search: u({
-      get: () => o.value,
-      set: (e) => t.toolbar.set((s) => ({ ...s, search: { ...s.search, input: e } }))
-    }),
-    menu: u({
-      get: () => t.toolbar.get().menu ?? [],
-      set: (e) => t.toolbar.set((s) => ({ ...s, menu: e }))
-    }),
-    isLoading: u({
-      get: () => t.toolbar.get().isLoading,
-      set: (e) => t.toolbar.set((s) => ({ ...s, isLoading: e }))
-    })
-  };
-  return t.toolbar.pipe(w((e) => e.search.input ?? ""), G(), V(300)).forEach((e) => o.value = e), n;
-}
-function N(t, o, n) {
-  const e = M(), s = e.ctrl ?? u(() => !1), r = e.shift ?? u(() => !1), i = new T(), m = i.pipe(
-    S(n ?? ((c) => Promise.resolve(c))),
-    S((c) => t(c))
-  ).subscribe();
-  return o.add(m), m.add(g(s, () => i.next({ hotkeys: { ctrl: !0 } }))), m.add(g(r, () => i.next({ hotkeys: { shift: !0 } }))), m;
-}
-function ne(t) {
-  const { context: o } = t, n = new j({}), e = (a) => n.next(a(n.value)), s = d(), r = new j(void 0), i = h(s, (a) => r.next(a), { immediate: !0 }), m = r.asObservable().pipe(
-    w((a) => a?.contentWindow),
-    q((a) => !!a)
-  ), c = K({ ...t, contextChanges: n, windowChanges: m });
-  Object.entries(o).map(([a, b]) => h(
-    b,
-    (A) => e((k) => ({ ...k, [a]: A })),
-    { immediate: !0 }
-  )).forEach((a) => c.scope.add(a)), c.toolbar.subscribe((a) => {
-    const b = t.toolbar;
-    b.title.value = a.title, b.subtitle.value = a.subtitle, b.searchEnabled.value = a.search?.enabled ?? !1, b.search.value = a.search?.input, b.menu.value = a.menu, b.isLoading.value = a?.isLoading ?? !1;
-  });
-  const f = O(
-    t.toolbar.search,
-    (a) => c.toolbar.set.search(a),
-    { immediate: !0, debounce: 100 }
-  );
-  c.scope.add(i), c.scope.add(f);
-  const p = d(c.appState.get()), l = u({
-    get: () => p.value,
-    set: (a) => c.appState.set(a)
-  });
-  c.appState.changes.subscribe((a) => p.value = a);
-  const v = d(!1);
-  c.isConnectionInitialized.subscribe((a) => v.value = a);
-  const { unsubscribe: x, signal: y, closed: _ } = c;
-  return {
-    ...t,
-    client: s,
-    appState: l,
-    isConnectionInitialized: v,
-    unsubscribe: x,
-    signal: y,
-    closed: _
-  };
-}
-function oe(t) {
-  const o = u(() => t.value?.user), n = u(() => t.value?.license), e = u(() => t.value?.project), s = u(() => !!o.value?.is_admin), r = u(() => !!n.value?.user_is_admin), i = u(() => !!e.value?.user_is_admin);
-  function m(l) {
-    return !o.value || !n.value ? !1 : s.value || r.value ? !0 : (n.value.user_roles ?? []).some((v) => v.name === l);
-  }
-  function c(l) {
-    return !o.value || !n.value ? !1 : s.value || r.value ? !0 : !!n.value.user_permissions?.[String(l)];
-  }
-  function f(l) {
-    return !o.value || !e.value ? !1 : s.value || r.value || i.value ? !0 : (e.value.user_roles ?? []).some((v) => v.name === l);
-  }
-  function p(l) {
-    return !o.value || !e.value ? !1 : s.value || r.value ? !0 : !!e.value.user_permissions?.[String(l)];
-  }
-  return { isGlobalAdmin: s, isLicenseAdmin: r, isProjectAdmin: i, hasLicenseRole: m, hasLicensePermission: c, hasProjectRole: f, hasProjectPermission: p };
-}
-function ae(t = "comms") {
-  const [o, n] = Q(
-    t,
-    () => F(),
-    (e) => e.unsubscribe()
-  );
-  return { provideComms: o, injectComms: n };
-}
-function Q(t, o, n) {
-  let e;
-  const s = () => (!e && (e = o()), e);
-  return [
-    (r) => (r.onUnmount(() => n && e && n(e)), r.provide(t, s)),
-    () => W(t)()
-  ];
-}
-function re(t, o, n) {
-  const s = I(t, o, { immediate: !1, ...n });
-  return Object.assign(C(s, ["execute"]), {
-    execute: (...r) => s.execute(void 0, ...r),
-    executeDelayed: s.execute
-  });
-}
-function ue(t) {
-  let o;
-  const n = d(void 0);
-  return U(() => o = t.signal.receive((e) => n.value = e)), D(() => o?.()), [H(n), () => o?.()];
-}
-export {
-  te as useAntColorMode,
-  se as useAntI18n,
-  re as useApi,
-  F as useCommsClient,
-  ne as useCommsHost,
-  ae as useCommsInjection,
-  oe as usePermissions,
-  ue as useSignal,
-  Q as useSingleton
-};
+import { objectOmit as e, objectPick as t, useAsyncState as n, useColorMode as r, useMagicKeys as i, watchDebounced as a, whenever as o } from "@vueuse/core";
+import { computed as s, inject as c, onBeforeUnmount as l, onMounted as u, onUnmounted as d, readonly as f, ref as p, shallowRef as m, watch as h } from "vue";
+import { useI18n as g } from "vue-i18n";
+import { clone as _, newCommsClient as v, newCommsHost as y } from "@antcde/connect-ts";
+import { BehaviorSubject as b, Subject as x, concat as S, concatMap as C, debounceTime as w, distinctUntilChanged as T, filter as E, map as D } from "rxjs";
+//#region src/formatDate.ts
+var O = "nl", k = {
+	short: {
+		day: "2-digit",
+		month: "2-digit",
+		year: "numeric"
+	},
+	medium: {
+		day: "numeric",
+		month: "short",
+		year: "numeric"
+	},
+	long: {
+		day: "numeric",
+		month: "long",
+		year: "numeric"
+	},
+	monthDay: {
+		day: "numeric",
+		month: "short"
+	},
+	shortDateTime: {
+		day: "2-digit",
+		month: "2-digit",
+		year: "numeric",
+		hour: "2-digit",
+		minute: "2-digit",
+		hour12: !1
+	},
+	mediumDateTime: {
+		day: "numeric",
+		month: "short",
+		year: "numeric",
+		hour: "2-digit",
+		minute: "2-digit",
+		hour12: !1
+	}
+}, A = new Set(["short", "shortDateTime"]);
+function j(e) {
+	return e instanceof Date ? e : new Date(e);
+}
+function M(e) {
+	return `${e.getFullYear()}-${String(e.getMonth() + 1).padStart(2, "0")}-${String(e.getDate()).padStart(2, "0")}`;
+}
+function N(e, t = {}) {
+	let { preset: n = "short", locale: r = O, fallback: i = "" } = t;
+	if (e == null || e === "") return i;
+	let a = j(e);
+	if (Number.isNaN(a.getTime())) return i;
+	if (n === "iso") return M(a);
+	let o = A.has(n) && /^en\b/i.test(r) ? O : r;
+	return new Intl.DateTimeFormat(o, k[n]).format(a);
+}
+//#endregion
+//#region src/useAntColorMode.ts
+function P(e, n) {
+	let i = r(n), a = s(() => e.context.value.darkMode), o = s(() => {
+		switch (a.value) {
+			case null: return "auto";
+			case !0: return "dark";
+			case !1: return "light";
+			default: return i.value;
+		}
+	}), c = s(() => {
+		switch (o.value) {
+			case "light":
+			case "auto": return !1;
+			case "dark": return !0;
+		}
+	});
+	return Object.assign(o, {
+		host: a,
+		isDark: c
+	}, t(i, [
+		"state",
+		"system",
+		"store"
+	]));
+}
+//#endregion
+//#region src/useAntI18n.ts
+function F(e, t) {
+	let n = g(t);
+	return h(() => e.context.value.user?.language, (e) => n.locale.value = e ?? "en", { immediate: !0 }), n;
+}
+//#endregion
+//#region src/useAppTourMode.ts
+var I = p(!1), L = p(null);
+function R() {
+	function e(e) {
+		h(() => e.value.tourMode, (e) => {
+			I.value = !!e, e || (L.value = null);
+		}, { immediate: !0 });
+	}
+	function t(e) {
+		I.value && (L.value = e);
+	}
+	function n() {
+		I.value = !1, L.value = null;
+	}
+	return {
+		isActive: f(I),
+		activeZoneId: f(L),
+		connectContext: e,
+		setActiveZone: t,
+		exit: n
+	};
+}
+//#endregion
+//#region src/useCommsClient.ts
+function z(t, n, r) {
+	let i = p({}), a = v({
+		parent: window.parent,
+		connect: t,
+		manifest: r
+	}), o = p(""), c = s({
+		get: () => o.value,
+		set: (e) => a.appState.set(e)
+	});
+	return a.context.subscribe((e) => i.value = e), S(a.appState.get(), a.appState).subscribe((e) => o.value = e), V(a.signal, a, n), l(() => a.unsubscribe()), Object.assign(e(a, [
+		"context",
+		"toolbar",
+		"appState"
+	]), {
+		context: i,
+		toolbar: B(a),
+		appState: c
+	});
+}
+function B(e) {
+	let t = p(""), n = {
+		title: s({
+			get: () => e.toolbar.get().title,
+			set: (t) => e.toolbar.set((e) => ({
+				...e,
+				title: t
+			}))
+		}),
+		subtitle: s({
+			get: () => e.toolbar.get().subtitle,
+			set: (t) => e.toolbar.set((e) => ({
+				...e,
+				subtitle: t
+			}))
+		}),
+		searchEnabled: s({
+			get: () => e.toolbar.get().search.enabled,
+			set: (t) => e.toolbar.set((e) => ({
+				...e,
+				search: {
+					...e.search,
+					enabled: t
+				}
+			}))
+		}),
+		search: s({
+			get: () => t.value,
+			set: (t) => e.toolbar.set((e) => ({
+				...e,
+				search: {
+					...e.search,
+					input: t
+				}
+			}))
+		}),
+		menu: s({
+			get: () => e.toolbar.get().menu ?? [],
+			set: (t) => e.toolbar.set((e) => ({
+				...e,
+				menu: t
+			}))
+		}),
+		isLoading: s({
+			get: () => e.toolbar.get().isLoading,
+			set: (t) => e.toolbar.set((e) => ({
+				...e,
+				isLoading: t
+			}))
+		})
+	};
+	return e.toolbar.pipe(D((e) => e.search.input ?? ""), T(), w(300)).forEach((e) => t.value = e), n;
+}
+function V(e, t, n) {
+	let r = i(), a = r.ctrl ?? s(() => !1), c = r.shift ?? s(() => !1), l = new x(), u = l.pipe(C(n ?? ((e) => Promise.resolve(e))), C((t) => e(t))).subscribe();
+	return t.add(u), u.add(o(a, () => l.next({ hotkeys: { ctrl: !0 } }))), u.add(o(c, () => l.next({ hotkeys: { shift: !0 } }))), u;
+}
+//#endregion
+//#region src/useCommsHost.ts
+function H(e) {
+	let { context: t } = e, n = new b({}), r = (e) => n.next(e(n.value)), i = p(), o = new b(void 0), c = h(i, (e) => o.next(e), { immediate: !0 }), l = o.asObservable().pipe(D((e) => e?.contentWindow), E((e) => !!e)), u = y({
+		...e,
+		contextChanges: n,
+		windowChanges: l
+	});
+	Object.entries(t).map(([e, t]) => h(t, (t) => r((n) => ({
+		...n,
+		[e]: _(t)
+	})), { immediate: !0 })).forEach((e) => u.scope.add(e)), u.toolbar.subscribe((t) => {
+		let n = e.toolbar;
+		n.title.value = t.title, n.subtitle.value = t.subtitle, n.searchEnabled.value = t.search?.enabled ?? !1, n.search.value = t.search?.input, n.menu.value = t.menu, n.isLoading.value = t?.isLoading ?? !1;
+	});
+	let d = a(e.toolbar.search, (e) => u.toolbar.set.search(e), {
+		immediate: !0,
+		debounce: 100
+	});
+	u.scope.add(c), u.scope.add(d);
+	let f = p(u.appState.get()), m = s({
+		get: () => f.value,
+		set: (e) => u.appState.set(e)
+	});
+	u.appState.changes.subscribe((e) => f.value = e);
+	let g = p(!1);
+	u.isConnectionInitialized.subscribe((e) => g.value = e);
+	let v = p(null);
+	u.manifest?.subscribe((e) => v.value = e);
+	let { unsubscribe: x, signal: S, closed: C } = u;
+	return {
+		...e,
+		client: i,
+		appState: m,
+		isConnectionInitialized: g,
+		manifest: v,
+		unsubscribe: x,
+		signal: S,
+		closed: C
+	};
+}
+//#endregion
+//#region src/usePermissions.ts
+function U(e) {
+	let t = s(() => e.value?.user), n = s(() => e.value?.license), r = s(() => e.value?.project), i = s(() => !!t.value?.is_admin), a = s(() => !!n.value?.user_is_admin), o = s(() => !!r.value?.user_is_admin || a.value);
+	function c(e) {
+		return !t.value || !n.value ? !1 : i.value || a.value ? !0 : (n.value.user_roles ?? []).some((t) => t.name === e);
+	}
+	function l(e) {
+		return !t.value || !n.value ? !1 : i.value || a.value ? !0 : !!n.value.user_permissions?.[String(e)];
+	}
+	function u(e) {
+		return !t.value || !r.value ? !1 : i.value || a.value || o.value ? !0 : (r.value.user_roles ?? []).some((t) => t.name === e);
+	}
+	function d(e) {
+		return !t.value || !r.value ? !1 : i.value || a.value ? !0 : !!r.value.user_permissions?.[String(e)];
+	}
+	return {
+		isGlobalAdmin: i,
+		isLicenseAdmin: a,
+		isProjectAdmin: o,
+		hasLicenseRole: c,
+		hasLicensePermission: l,
+		hasProjectRole: u,
+		hasProjectPermission: d
+	};
+}
+//#endregion
+//#region src/useTemplateVersioning.ts
+function W(e) {
+	let t = m(null), n = m(null), r = m(null), i = m(null), a = m([]), o = m(null), c = p(!1), l = p(!1), u = p(!1), d = p(!1), f = p(!1), h = p(!1), g = s(() => t.value?.has_update ?? !1), _ = s(() => t.value?.current_version ?? null), v = s(() => t.value?.latest_version ?? null), y = s(() => n.value ? n.value.added.length + n.value.removed.length + n.value.modified.length + n.value.relations_added.length + n.value.relations_removed.length : 0);
+	async function b(n) {
+		c.value = !0;
+		try {
+			return t.value = (await e.tasks.checkForUpdates(n))?.data ?? null, t.value;
+		} catch {
+			return t.value = null, null;
+		} finally {
+			c.value = !1;
+		}
+	}
+	async function x(t, r) {
+		l.value = !0;
+		try {
+			return n.value = (await e.tasks.versionDiff(t, r))?.data ?? null, n.value;
+		} catch {
+			return n.value = null, null;
+		} finally {
+			l.value = !1;
+		}
+	}
+	async function S(t, r, i) {
+		l.value = !0;
+		try {
+			return n.value = (await e.tasks.versionCompare(t, r, i))?.data ?? null, n.value;
+		} catch {
+			return n.value = null, null;
+		} finally {
+			l.value = !1;
+		}
+	}
+	async function C(t) {
+		u.value = !0;
+		try {
+			return r.value = (await e.tasks.versionDiffOriginal(t))?.data ?? null, r.value;
+		} catch {
+			return r.value = null, null;
+		} finally {
+			u.value = !1;
+		}
+	}
+	async function w(r, a) {
+		d.value = !0;
+		try {
+			return i.value = (await e.tasks.syncToLatestVersion(r, a))?.data ?? null, t.value = null, n.value = null, i.value;
+		} catch {
+			return i.value = null, null;
+		} finally {
+			d.value = !1;
+		}
+	}
+	async function T(t, n) {
+		f.value = !0;
+		try {
+			let r = (await e.tasks.publishVersion(t, { change_summary: n }))?.data ?? null;
+			return r && (a.value = [r, ...a.value], o.value = r), r;
+		} catch {
+			return null;
+		} finally {
+			f.value = !1;
+		}
+	}
+	async function E(t) {
+		h.value = !0;
+		try {
+			return a.value = (await e.tasks.listVersions(t))?.data ?? [], a.value;
+		} catch {
+			return a.value = [], [];
+		} finally {
+			h.value = !1;
+		}
+	}
+	async function D(t) {
+		try {
+			return o.value = (await e.tasks.latestVersion(t))?.data ?? null, o.value;
+		} catch {
+			return o.value = null, null;
+		}
+	}
+	let O = m([]), k = p(!1), A = p(!1), j = m([]);
+	async function M(t) {
+		k.value = !0;
+		try {
+			return O.value = (await e.tasks.getInstances(t))?.data ?? [], O.value;
+		} catch {
+			return O.value = [], [];
+		} finally {
+			k.value = !1;
+		}
+	}
+	async function N(t, n) {
+		A.value = !0, j.value = [];
+		try {
+			return j.value = (await e.tasks.pushSync(t, n))?.data ?? [], j.value;
+		} catch {
+			return j.value = [], [];
+		} finally {
+			A.value = !1;
+		}
+	}
+	function P() {
+		t.value = null, n.value = null, r.value = null, i.value = null, a.value = [], o.value = null, O.value = [], j.value = [];
+	}
+	return {
+		updateCheck: t,
+		diff: n,
+		userCustomizations: r,
+		syncResult: i,
+		versions: a,
+		latestVersion: o,
+		instances: O,
+		pushSyncResults: j,
+		isCheckingUpdate: c,
+		isFetchingDiff: l,
+		isFetchingCustomizations: u,
+		isSyncing: d,
+		isPublishing: f,
+		isFetchingVersions: h,
+		isFetchingInstances: k,
+		isPushSyncing: A,
+		hasUpdate: g,
+		currentVersion: _,
+		availableVersion: v,
+		totalChanges: y,
+		checkForUpdates: b,
+		fetchDiff: x,
+		fetchUserCustomizations: C,
+		compareVersions: S,
+		syncToVersion: w,
+		publishVersion: T,
+		fetchVersions: E,
+		fetchLatestVersion: D,
+		fetchInstances: M,
+		pushSync: N,
+		reset: P
+	};
+}
+//#endregion
+//#region src/utils.ts
+function G(e = "comms") {
+	let [t, n] = K(e, () => z(), (e) => e.unsubscribe());
+	return {
+		provideComms: t,
+		injectComms: n
+	};
+}
+function K(e, t, n) {
+	let r, i = () => (!r && (r = t()), r);
+	return [(t) => (t.onUnmount(() => n && r && n(r)), t.provide(e, i)), () => c(e)()];
+}
+function q(t, r, i) {
+	let a = n(t, r, {
+		immediate: !1,
+		...i
+	});
+	return Object.assign(e(a, ["execute"]), {
+		execute: (...e) => a.execute(void 0, ...e),
+		executeDelayed: a.execute
+	});
+}
+function J(e) {
+	let t, n = p(void 0);
+	return u(() => t = e.signal.receive((e) => n.value = e)), d(() => t?.()), [f(n), () => t?.()];
+}
+//#endregion
+export { N as formatDate, P as useAntColorMode, F as useAntI18n, q as useApi, R as useAppTourMode, z as useCommsClient, H as useCommsHost, G as useCommsInjection, U as usePermissions, J as useSignal, K as useSingleton, W as useTemplateVersioning };

package/dist/types/formatDate.d.ts

@@ -0,0 +1,22 @@
+export type DateFormatPreset = 'short' | 'medium' | 'long' | 'monthDay' | 'shortDateTime' | 'mediumDateTime' | 'iso';
+export interface FormatDateOptions {
+    /** Display preset. Default: 'short' (DD-MM-YYYY numeric). */
+    preset?: DateFormatPreset;
+    /** BCP-47 locale tag. Default: 'nl' (Dutch DD-MM-YYYY notation). */
+    locale?: string;
+    /** Returned when value is null/undefined/empty/invalid. Default: ''. */
+    fallback?: string;
+}
+/**
+ * Format a date for display across the ANT environment.
+ *
+ * Default is the Dutch DD-MM-YYYY notation. German callers get DD.MM.YYYY
+ * via native Intl. English (`en`, `en-US`, `en-GB`, ...) is intentionally
+ * mapped to the Dutch numeric pattern for the `short`/`shortDateTime`
+ * presets to keep the project-wide DD-MM-YYYY default even when the host
+ * runs in English.
+ *
+ * Storage stays ISO everywhere — use the `iso` preset only for payload
+ * serialisation, never for display.
+ */
+export declare function formatDate(value: Date | string | number | null | undefined, options?: FormatDateOptions): string;

package/dist/types/index.d.ts

@@ -1,6 +1,9 @@
+export { type DateFormatPreset, formatDate, type FormatDateOptions } from './formatDate';
 export { useAntColorMode, type UseAntColorModeOptions, type UseAntColorModeReturn } from './useAntColorMode';
 export { useAntI18n, type UseAntI18nReturn } from './useAntI18n';
+export { useAppTourMode } from './useAppTourMode';
 export { type UseCommsClient, useCommsClient } from './useCommsClient';
 export { type CommsHostArgs, type UseCommsHost, useCommsHost } from './useCommsHost';
 export { type UsePermissions, usePermissions } from './usePermissions';
+export { useTemplateVersioning, type UseTemplateVersioningReturn } from './useTemplateVersioning';
 export { type AnyUseApiReturn, type CommsToolbar, useApi, type UseApiReturn, useCommsInjection, useSignal, useSingleton, } from './utils';

package/dist/types/useAppTourMode.d.ts

@@ -0,0 +1,26 @@
+import { Ref } from 'vue';
+/**
+ * Iframe-side tour mode — mirrors the OS `useTourMode` API.
+ *
+ * Call `connectContext(context)` once in App.vue to wire the OS context stream.
+ * Then call `useAppTourMode()` anywhere to read state and set the active zone.
+ *
+ * @example
+ * ```typescript
+ * // App.vue — one-time wiring
+ * const { comms } = injectContext()
+ * useAppTourMode().connectContext(comms.context)
+ *
+ * // Any component
+ * const { isActive, activeZoneId, setActiveZone } = useAppTourMode()
+ * ```
+ */
+export declare function useAppTourMode(): {
+    isActive: Readonly<Ref<boolean, boolean>>;
+    activeZoneId: Readonly<Ref<string | null, string | null>>;
+    connectContext: (context: Ref<{
+        tourMode?: boolean | null;
+    }>) => void;
+    setActiveZone: (id: string | null) => void;
+    exit: () => void;
+};

package/dist/types/useCommsClient.d.ts

@@ -1,4 +1,4 @@
-import { AntConnect, Client, Context, Signal } from '@antcde/connect-ts';
+import { AntConnect, AppManifest, Client, Context, Signal } from '@antcde/connect-ts';
 import { ObservableInput } from 'rxjs';
 import { Ref } from 'vue';
 import { CommsToolbar } from './utils';
@@ -20,5 +20,5 @@ type KeyboardShortcutsHook = (signal: Signal) => ObservableInput<Signal>;
  * @param keyboardsShortcuts By default it will process keyboards from the client and send them to the host.
  *
  */
-export declare function useCommsClient(connect?: AntConnect, keyboardsShortcuts?: KeyboardShortcutsHook): UseCommsClient;
+export declare function useCommsClient(connect?: AntConnect, keyboardsShortcuts?: KeyboardShortcutsHook, manifest?: AppManifest): UseCommsClient;
 export {};

package/dist/types/useCommsHost.d.ts

@@ -1,4 +1,4 @@
-import { AntConnect, LabelFilterState, License, Notepad, Notification, ProjectShort, SignalObserverFactory, SignalReceiver, SignalSender, Task, User } from '@antcde/connect-ts';
+import { AntConnect, AppManifest, LabelFilterState, License, Notepad, Notification, ProjectShort, SignalObserverFactory, SignalReceiver, SignalSender, Task, User } from '@antcde/connect-ts';
 import { SubscriptionLike } from 'rxjs';
 import { Ref } from 'vue';
 import { CommsToolbar } from './utils';
@@ -30,6 +30,7 @@ export interface UseCommsHost extends CommsHostArgs, SubscriptionLike {
     client: Ref<HTMLIFrameElement | null | undefined>;
     appState: Ref<string>;
     isConnectionInitialized: Ref<boolean>;
+    manifest: Ref<AppManifest | null>;
     signal: SignalReceiver & SignalSender;
 }
 export declare function useCommsHost(args: CommsHostArgs): UseCommsHost;

package/dist/types/useTemplateVersioning.d.ts

@@ -0,0 +1,36 @@
+import { AntConnect, PushSyncResult, TaskTemplateVersion, TemplateInstance, VersionCheck, VersionDiff, VersionSyncResult } from '@antcde/connect-ts';
+import { ComputedRef, ref, shallowRef } from 'vue';
+export interface UseTemplateVersioningReturn {
+    updateCheck: Readonly<ReturnType<typeof shallowRef<VersionCheck | null>>>;
+    diff: Readonly<ReturnType<typeof shallowRef<VersionDiff | null>>>;
+    userCustomizations: Readonly<ReturnType<typeof shallowRef<VersionDiff | null>>>;
+    syncResult: Readonly<ReturnType<typeof shallowRef<VersionSyncResult | null>>>;
+    versions: Readonly<ReturnType<typeof shallowRef<TaskTemplateVersion[]>>>;
+    latestVersion: Readonly<ReturnType<typeof shallowRef<TaskTemplateVersion | null>>>;
+    instances: Readonly<ReturnType<typeof shallowRef<TemplateInstance[]>>>;
+    pushSyncResults: Readonly<ReturnType<typeof shallowRef<PushSyncResult[]>>>;
+    isCheckingUpdate: Readonly<ReturnType<typeof ref<boolean>>>;
+    isFetchingDiff: Readonly<ReturnType<typeof ref<boolean>>>;
+    isFetchingCustomizations: Readonly<ReturnType<typeof ref<boolean>>>;
+    isSyncing: Readonly<ReturnType<typeof ref<boolean>>>;
+    isPublishing: Readonly<ReturnType<typeof ref<boolean>>>;
+    isFetchingVersions: Readonly<ReturnType<typeof ref<boolean>>>;
+    isFetchingInstances: Readonly<ReturnType<typeof ref<boolean>>>;
+    isPushSyncing: Readonly<ReturnType<typeof ref<boolean>>>;
+    hasUpdate: ComputedRef<boolean>;
+    currentVersion: ComputedRef<number | null>;
+    availableVersion: ComputedRef<number | null>;
+    totalChanges: ComputedRef<number>;
+    checkForUpdates: (taskId: string) => Promise<VersionCheck | null>;
+    fetchDiff: (taskId: string, targetVersionId?: string) => Promise<VersionDiff | null>;
+    fetchUserCustomizations: (taskId: string) => Promise<VersionDiff | null>;
+    compareVersions: (templateId: string, fromVersionId: string, toVersionId: string) => Promise<VersionDiff | null>;
+    syncToVersion: (taskId: string, targetVersionId?: string) => Promise<VersionSyncResult | null>;
+    publishVersion: (templateId: string, changeSummary?: string) => Promise<TaskTemplateVersion | null>;
+    fetchVersions: (templateId: string) => Promise<TaskTemplateVersion[]>;
+    fetchLatestVersion: (templateId: string) => Promise<TaskTemplateVersion | null>;
+    fetchInstances: (templateId: string) => Promise<TemplateInstance[]>;
+    pushSync: (templateId: string, instanceIds: string[]) => Promise<PushSyncResult[]>;
+    reset: () => void;
+}
+export declare function useTemplateVersioning(connect: AntConnect): UseTemplateVersioningReturn;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@antcde/vue-utils",
   "type": "module",
-  "version": "0.2.13",
+  "version": "0.2.14-rc.09815b8",
   "description": "Helper to use ANT Comms in Vue 3",
   "author": "CollaborAll",
   "exports": {
@@ -25,22 +25,22 @@
     "clean": "pnpm dlx rimraf dist"
   },
   "peerDependencies": {
-    "@vueuse/core": "^13.9.0",
+    "@vueuse/core": "^14.0.0",
     "rxjs": "^7.0.0",
     "vue": "^3.5.10",
     "vue-i18n": "^11.1.12"
   },
   "dependencies": {
-    "@antcde/connect-ts": "0.4.17"
+    "@antcde/connect-ts": "0.4.19-rc.09815b8"
   },
   "devDependencies": {
     "@tsconfig/node22": "^22.0.5",
-    "@types/node": "^22.19.17",
-    "@vitejs/plugin-vue": "^6.0.5",
-    "@vue/tsconfig": "^0.8.1",
-    "typescript": "~5.9.3",
-    "vite": "^7.3.2",
+    "@types/node": "^22.19.21",
+    "@vitejs/plugin-vue": "^6.0.7",
+    "@vue/tsconfig": "^0.9.1",
+    "typescript": "~6.0.3",
+    "vite": "^8.0.16",
     "vite-plugin-dts": "^4.5.4",
-    "vue-tsc": "^3.2.6"
+    "vue-tsc": "^3.3.5"
   }
 }