@absolutejs/absolute 0.20.0-beta.16 → 0.20.0-beta.18

package/dist/dev/client/hmrClient.ts

@@ -18,6 +18,7 @@ import {
 	sendAbsoluteHmrTiming
 } from './hmrTiming';
 import { hideErrorOverlay, showErrorOverlay } from './errorOverlay';
+import { installAbsoluteNativeSyncDevtools } from './syncDevtools';
 import {
 	dispatchAngularComponentRemount,
 	dispatchAngularComponentUpdate
@@ -45,6 +46,10 @@ const isStringRecord = (value: unknown): value is Record<string, string> =>
 	Object.values(value).every((entry) => typeof entry === 'string');
 
 restoreAbsoluteHmrApply();
+const removeNativeSyncDevtools =
+	absoluteHmrClientTarget() === 'web'
+		? () => undefined
+		: installAbsoluteNativeSyncDevtools();
 
 /* Lightweight "server disconnected" banner. When the dev server is
  * genuinely down (process restarting or crashed) the browser would
@@ -165,15 +170,15 @@ type HMRMessage = {
 
 const handleStylesheetUpdate = (message: HMRMessage) => {
 	const clientStart = performance.now();
-	void reloadCSSStylesheets(message.data.manifest ?? {}).then((applied) => {
+	void reloadCSSStylesheets(message.data.manifest ?? {}).then((applied) =>
 		sendAbsoluteHmrTiming({
 			clientStart,
 			kind: 'css',
 			outcome: applied ? 'applied' : 'failed',
 			serverMs: message.data.serverDuration,
 			updateId: message.timestamp
-		});
-	});
+		})
+	);
 };
 
 const handleHMRMessage = (message: HMRMessage) => {
@@ -413,6 +418,7 @@ if (!(window.__HMR_WS__ && window.__HMR_WS__.readyState === WebSocket.OPEN)) {
 	};
 
 	window.addEventListener('beforeunload', () => {
+		removeNativeSyncDevtools();
 		if (hmrState.isHMRUpdating) {
 			if (hmrState.pingInterval) clearInterval(hmrState.pingInterval);
 			if (hmrState.reconnectTimeout)

package/dist/dev/client/syncDevtools.ts

@@ -0,0 +1,237 @@
+import type {} from '../../types/globals';
+import {
+	discardSyncRuntimeDeadLetter,
+	inspectSyncRuntime,
+	rebaseSyncRuntimeDeadLetter,
+	retrySyncRuntimeDeadLetter,
+	type SyncRuntimeInspection
+} from '@absolutejs/sync/client/runtime';
+
+export type SyncDevtoolsBridge = {
+	discard: (operationId: string) => Promise<void>;
+	inspect: () => Promise<SyncRuntimeInspection>;
+	rebase: (operationId: string, args: unknown) => Promise<string>;
+	retry: (operationId: string) => Promise<void>;
+};
+
+const DEVTOOLS_ID = 'absolutejs-sync-devtools';
+const REFRESH_INTERVAL_MS = 1_500;
+const bridge: SyncDevtoolsBridge = {
+	discard: discardSyncRuntimeDeadLetter,
+	inspect: inspectSyncRuntime,
+	rebase: rebaseSyncRuntimeDeadLetter,
+	retry: retrySyncRuntimeDeadLetter
+};
+
+const time = (value: number | undefined) =>
+	value === undefined ? '—' : new Date(value).toLocaleTimeString();
+
+const styles = `
+:host { all: initial; color-scheme: light dark; }
+button { font: inherit; }
+.trigger { position:fixed;right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));z-index:2147483645;border:0;border-radius:999px;padding:9px 13px;background:#111827;color:#fff;box-shadow:0 4px 18px #0006;font:600 12px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace; }
+.trigger[data-alert=true] { background:#b91c1c; }
+.panel { position:fixed;inset:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(56px,env(safe-area-inset-bottom)) auto;z-index:2147483645;width:min(420px,calc(100vw - 24px));max-height:calc(100vh - 80px);overflow:auto;border:1px solid #64748b66;border-radius:14px;background:#fffffff2;color:#111827;box-shadow:0 16px 48px #0008;font:12px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace;backdrop-filter:blur(12px); }
+[hidden] { display:none!important; }
+header { position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid #64748b44;background:inherit; }
+h2 { margin:0;font-size:14px; }
+.close,.action { border:1px solid #64748b66;border-radius:7px;background:transparent;color:inherit;padding:5px 8px; }
+.body { padding:12px 14px; }
+.metrics { display:grid;grid-template-columns:repeat(2,1fr);gap:7px;margin-bottom:12px; }
+.metric { padding:8px;border-radius:8px;background:#64748b18; }
+.metric strong { display:block;font-size:16px; }
+.empty { color:#64748b; }
+.letter { margin-top:9px;padding:10px;border:1px solid #ef444466;border-radius:9px;overflow-wrap:anywhere; }
+.letter strong { display:block; }
+.meta { color:#64748b;margin:4px 0 8px; }
+.actions { display:flex;flex-wrap:wrap;gap:6px; }
+.danger { color:#b91c1c; }
+.notice { margin-bottom:9px;padding:8px;border-radius:7px;background:#f59e0b22; }
+@media (prefers-color-scheme:dark) { .panel { background:#111827f2;color:#f8fafc; } .empty,.meta { color:#94a3b8; } .danger { color:#fca5a5; } }
+`;
+
+const renderInspection = (
+	body: HTMLElement,
+	inspection: SyncRuntimeInspection,
+	notice?: string
+) => {
+	body.replaceChildren();
+	if (notice) {
+		const message = document.createElement('div');
+		message.className = 'notice';
+		message.textContent = notice;
+		body.appendChild(message);
+	}
+	const metrics = document.createElement('div');
+	metrics.className = 'metrics';
+	for (const [label, value] of [
+		['Pending', inspection.pending],
+		['Dead letters', inspection.deadLetters.length],
+		['Conflicts', inspection.conflicts],
+		['Auto-resolved', inspection.automaticResolutions]
+	] as const) {
+		const metric = document.createElement('div');
+		metric.className = 'metric';
+		const strong = document.createElement('strong');
+		strong.textContent = String(value);
+		metric.append(strong, label);
+		metrics.appendChild(metric);
+	}
+	body.appendChild(metrics);
+	const activity = document.createElement('div');
+	activity.className = 'meta';
+	activity.textContent = `Clients ${inspection.clients} · last push ${time(inspection.lastSuccessfulPushAt)} · last pull ${time(inspection.lastSuccessfulPullAt)}`;
+	body.appendChild(activity);
+	if (inspection.deadLetters.length === 0) {
+		const empty = document.createElement('div');
+		empty.className = 'empty';
+		empty.textContent = 'No mutations need manual remediation.';
+		body.appendChild(empty);
+
+		return;
+	}
+	for (const deadLetter of inspection.deadLetters) {
+		const item = document.createElement('section');
+		item.className = 'letter';
+		const title = document.createElement('strong');
+		title.textContent = deadLetter.name;
+		const metadata = document.createElement('div');
+		metadata.className = 'meta';
+		metadata.textContent = `${deadLetter.kind ?? 'rejected'}${deadLetter.code ? ` · ${deadLetter.code}` : ''} · attempts ${deadLetter.attempts} · ${time(deadLetter.deadLetteredAt)}`;
+		const detail = document.createElement('div');
+		detail.textContent =
+			deadLetter.message ?? 'The server rejected this mutation.';
+		const actions = document.createElement('div');
+		actions.className = 'actions';
+		for (const [action, label] of [
+			['retry', 'Retry unchanged'],
+			['rebase', 'Rebase with new args'],
+			['discard', 'Discard']
+		] as const) {
+			const button = document.createElement('button');
+			button.className = `action${action === 'discard' ? ' danger' : ''}`;
+			button.dataset.action = action;
+			button.dataset.operationId = deadLetter.operationId;
+			button.textContent = label;
+			actions.appendChild(button);
+		}
+		item.append(title, metadata, detail, actions);
+		body.appendChild(item);
+	}
+};
+
+/** Install the development-only, framework-neutral native Sync panel. */
+export const installAbsoluteNativeSyncDevtools = (
+	devtoolsBridge: SyncDevtoolsBridge = bridge
+) => {
+	if (typeof document === 'undefined' || !document.body)
+		return () => undefined;
+	if (document.getElementById(DEVTOOLS_ID)) return () => undefined;
+	const host = document.createElement('aside');
+	host.id = DEVTOOLS_ID;
+	host.dataset.hmrOverlay = 'true';
+	const root = host.attachShadow({ mode: 'open' });
+	const style = document.createElement('style');
+	style.textContent = styles;
+	const trigger = document.createElement('button');
+	trigger.className = 'trigger';
+	trigger.textContent = 'Sync';
+	trigger.type = 'button';
+	const panel = document.createElement('section');
+	panel.className = 'panel';
+	panel.hidden = true;
+	const header = document.createElement('header');
+	const title = document.createElement('h2');
+	title.textContent = 'AbsoluteJS Sync';
+	const close = document.createElement('button');
+	close.className = 'close';
+	close.textContent = 'Close';
+	close.type = 'button';
+	header.append(title, close);
+	const body = document.createElement('div');
+	body.className = 'body';
+	panel.append(header, body);
+	root.append(style, trigger, panel);
+	document.body.appendChild(host);
+	let active = true;
+	let notice: string | undefined;
+	const refresh = async () => {
+		try {
+			const inspection = await devtoolsBridge.inspect();
+			if (!active) return;
+			trigger.dataset.alert = String(inspection.deadLetters.length > 0);
+			trigger.textContent = inspection.deadLetters.length
+				? `Sync · ${inspection.deadLetters.length}`
+				: 'Sync';
+			if (!panel.hidden) renderInspection(body, inspection, notice);
+			notice = undefined;
+		} catch {
+			if (!active || panel.hidden) return;
+			notice = 'Sync diagnostics are temporarily unavailable.';
+		}
+	};
+	trigger.addEventListener('click', () => {
+		panel.hidden = !panel.hidden;
+		if (!panel.hidden) void refresh();
+	});
+	close.addEventListener('click', () => {
+		panel.hidden = true;
+	});
+	const remediate = async (
+		action: string | undefined,
+		operationId: string
+	) => {
+		try {
+			if (action === 'retry') await devtoolsBridge.retry(operationId);
+			else if (action === 'discard') {
+				if (
+					!globalThis.confirm(
+						'Discard this local mutation permanently?'
+					)
+				)
+					return;
+				await devtoolsBridge.discard(operationId);
+			} else if (action === 'rebase') {
+				const serialized = globalThis.prompt(
+					'New mutation arguments as JSON. This creates a new operation intent:'
+				);
+				if (serialized === null) return;
+				let args: unknown;
+				try {
+					args = JSON.parse(serialized);
+				} catch {
+					notice = 'Rebase cancelled: arguments were not valid JSON.';
+					await refresh();
+
+					return;
+				}
+				if (
+					!globalThis.confirm(
+						'Create a new mutation with these arguments?'
+					)
+				)
+					return;
+				await devtoolsBridge.rebase(operationId, args);
+			}
+			notice = 'Sync remediation applied.';
+		} catch {
+			notice =
+				'Sync remediation failed. The local mutation was retained.';
+		}
+		await refresh();
+	};
+	body.addEventListener('click', (event) => {
+		if (!(event.target instanceof HTMLButtonElement)) return;
+		const { action, operationId } = event.target.dataset;
+		if (!operationId) return;
+		void remediate(action, operationId);
+	});
+	const interval = setInterval(() => void refresh(), REFRESH_INTERVAL_MS);
+	void refresh();
+
+	return () => {
+		active = false;
+		clearInterval(interval);
+		host.remove();
+	};
+};

package/dist/index.js

@@ -13199,7 +13199,7 @@ var isTestSourcePath = (file2) => {
 };
 
 // node_modules/@absolutejs/sync/dist/client/index.js
-var RUNTIME_TRANSPORT, host, isRegistry = (value) => typeof value === "object" && value !== null && Array.isArray(Reflect.get(value, "installations")), registry, SyncLocalDataPolicyError, SyncLocalStoreSchemaError, positiveVersion = (value, label) => {
+var RUNTIME_TRANSPORT, host, isRegistry = (value) => typeof value === "object" && value !== null && Array.isArray(Reflect.get(value, "installations")) && Array.isArray(Reflect.get(value, "clients")), registry, SyncLocalDataPolicyError, SyncLocalStoreSchemaError, positiveVersion = (value, label) => {
   if (!Number.isSafeInteger(value) || value < 1)
     throw new SyncLocalStoreSchemaError("INVALID_PLAN", `${label} must be a positive safe integer`);
   return value;
@@ -13220,6 +13220,12 @@ var RUNTIME_TRANSPORT, host, isRegistry = (value) => typeof value === "object" &
   }
   for (const [index, rule] of (policy.mutations ?? []).entries()) {
     validatePolicyMatch(rule.match, `${label}.mutations[${index}]`);
+    if (rule.conflict !== undefined && rule.conflict.strategy !== "client-wins" && rule.conflict.strategy !== "manual" && rule.conflict.strategy !== "server-wins")
+      throw new SyncLocalDataPolicyError("INVALID_POLICY", `${label}.mutations[${index}].conflict.strategy is invalid.`);
+    if (rule.conflict?.maxAttempts !== undefined && (!Number.isSafeInteger(rule.conflict.maxAttempts) || rule.conflict.maxAttempts < 1))
+      throw new SyncLocalDataPolicyError("INVALID_POLICY", `${label}.mutations[${index}].conflict.maxAttempts must be a positive safe integer.`);
+    if (rule.conflict?.maxAttempts !== undefined && rule.conflict.strategy !== "client-wins")
+      throw new SyncLocalDataPolicyError("INVALID_POLICY", `${label}.mutations[${index}].conflict.maxAttempts is only valid for client-wins.`);
     if (rule.persistence === "memory-only" && rule.protection === "required")
       throw new SyncLocalDataPolicyError("INVALID_POLICY", `${label}.mutations[${index}] cannot require at-rest protection when it is memory-only.`);
     if (rule.sensitivity !== undefined && rule.sensitivity !== "public" && rule.protection !== "required" && rule.persistence !== "memory-only")
@@ -13285,7 +13291,11 @@ var init_client = __esm(() => {
     const existing = host[RUNTIME_TRANSPORT];
     if (isRegistry(existing))
       return existing;
-    const created = { installations: [] };
+    if (typeof existing === "object" && existing !== null && Array.isArray(Reflect.get(existing, "installations"))) {
+      Reflect.set(existing, "clients", []);
+      return existing;
+    }
+    const created = { clients: [], installations: [] };
     Object.defineProperty(host, RUNTIME_TRANSPORT, {
       configurable: false,
       enumerable: false,
@@ -13473,6 +13483,7 @@ var object = (value) => typeof value === "object" && value !== null && !Array.is
   const mutations = Array.isArray(mutationRules) ? mutationRules.map((entry, index) => {
     const rule = requireObject(entry, id, `localData.mutations[${index}] must be an object.`);
     const allowedRuleKeys = new Set([
+      "conflict",
       "match",
       "onProtectionUnavailable",
       "persistence",
@@ -13486,6 +13497,26 @@ var object = (value) => typeof value === "object" && value !== null && !Array.is
     const sensitivity = unknownField(rule, "sensitivity");
     const persistence = unknownField(rule, "persistence");
     const onProtectionUnavailable = unknownField(rule, "onProtectionUnavailable");
+    const declaredConflict = unknownField(rule, "conflict");
+    let conflict;
+    if (declaredConflict !== undefined) {
+      const conflictRecord = requireObject(declaredConflict, id, `localData.mutations[${index}].conflict must be an object.`);
+      const unsupportedConflictKey = Object.keys(conflictRecord).find((key) => key !== "maxAttempts" && key !== "strategy");
+      if (unsupportedConflictKey)
+        throw metadataError(id, `localData.mutations[${index}].conflict.${unsupportedConflictKey} is not supported.`);
+      const strategy = unknownField(conflictRecord, "strategy");
+      if (strategy !== "client-wins" && strategy !== "manual" && strategy !== "server-wins")
+        throw metadataError(id, `localData.mutations[${index}].conflict.strategy is invalid.`);
+      const maxAttempts = unknownField(conflictRecord, "maxAttempts");
+      if (maxAttempts !== undefined && strategy !== "client-wins")
+        throw metadataError(id, `localData.mutations[${index}].conflict.maxAttempts requires client-wins.`);
+      conflict = {
+        strategy,
+        ...maxAttempts === undefined ? {} : {
+          maxAttempts: positiveVersion2(maxAttempts, id, `localData.mutations[${index}].conflict.maxAttempts`)
+        }
+      };
+    }
     if (protection !== undefined && protection !== "none" && protection !== "required")
       throw metadataError(id, `localData.mutations[${index}].protection is invalid.`);
     if (sensitivity !== undefined && sensitivity !== "public" && sensitivity !== "private" && sensitivity !== "secret")
@@ -13496,6 +13527,7 @@ var object = (value) => typeof value === "object" && value !== null && !Array.is
       throw metadataError(id, `localData.mutations[${index}].persistence is invalid.`);
     return {
       match: nonEmpty(Reflect.get(rule, "match"), id, `localData.mutations[${index}].match`),
+      ...conflict ? { conflict } : {},
       ...sensitivity ? { sensitivity } : {},
       ...onProtectionUnavailable ? { onProtectionUnavailable } : {},
       ...persistence ? {
@@ -40387,5 +40419,5 @@ export {
   ANGULAR_INIT_TIMEOUT_MS
 };
 
-//# debugId=FF975832AE5A306264756E2164756E21
+//# debugId=C0E84CA8E87CA8B764756E2164756E21
 //# sourceMappingURL=index.js.map