@sweidos/eidos 2.1.0 → 2.3.0

package/dist/devtools.js

@@ -1,6 +1,31 @@
 "use client";
-import { useCallback, useState, useSyncExternalStore } from "react";
+import { useCallback, useEffect, useState, useSyncExternalStore } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/types.ts
+function emptyReliabilityStats() {
+	return {
+		queued: 0,
+		succeeded: 0,
+		failed: 0,
+		retried: 0,
+		conflicted: 0,
+		cancelled: 0
+	};
+}
+/** Single pass over the queue — avoids separate .filter() calls per status. */
+function countQueueByStatus(queue) {
+	let pending = 0, failed = 0, replaying = 0;
+	for (const q of queue) if (q.status === "pending") pending++;
+	else if (q.status === "failed") failed++;
+	else if (q.status === "replaying") replaying++;
+	return {
+		pending,
+		failed,
+		replaying,
+		total: queue.length
+	};
+}
+//#endregion
 //#region src/store-slices.ts
 function createResourceActions(set) {
 	return {
@@ -39,6 +64,15 @@ function createQueueActions(set) {
 		hydrateQueue: (items) => set(() => ({ queue: items }))
 	};
 }
+function createReliabilityActions(set) {
+	return {
+		recordReliabilityEvent: (event) => set((s) => ({ reliability: {
+			...s.reliability,
+			[event]: s.reliability[event] + 1
+		} })),
+		resetReliabilityStats: () => set(() => ({ reliability: emptyReliabilityStats() }))
+	};
+}
 //#endregion
 //#region src/store.ts
 var _state;
@@ -59,13 +93,15 @@ _state = {
 	swError: void 0,
 	resources: {},
 	queue: [],
+	reliability: emptyReliabilityStats(),
 	setOnline: (isOnline) => _set(() => ({ isOnline })),
 	setSwStatus: (swStatus, swError) => _set(() => ({
 		swStatus,
 		swError
 	})),
 	...createResourceActions(_set),
-	...createQueueActions(_set)
+	...createQueueActions(_set),
+	...createReliabilityActions(_set)
 };
 function _getState() {
 	return _state;
@@ -89,21 +125,6 @@ var useEidosStore = {
 	}
 };
 //#endregion
-//#region src/types.ts
-/** Single pass over the queue — avoids separate .filter() calls per status. */
-function countQueueByStatus(queue) {
-	let pending = 0, failed = 0, replaying = 0;
-	for (const q of queue) if (q.status === "pending") pending++;
-	else if (q.status === "failed") failed++;
-	else if (q.status === "replaying") replaying++;
-	return {
-		pending,
-		failed,
-		replaying,
-		total: queue.length
-	};
-}
-//#endregion
 //#region src/react/hooks.ts
 function useStore(selector) {
 	const fn = selector ?? ((s) => s);
@@ -146,10 +167,29 @@ function useEidosQueueStats() {
 		total: +t
 	};
 }
+/**
+* Calls `callback` once each time the action queue drains from non-empty → 0.
+* Stable callback reference not required — always calls the latest version.
+* Use for "all offline actions synced!" toasts.
+*
+* @example
+* useEidosOnDrain(() => toast.success('All offline actions synced!'))
+*/
+/**
+* Cumulative, session-scoped `neverLose` queue outcome counters — opt-in
+* reliability telemetry for dashboards/devtools. Re-renders only when a
+* counter changes.
+*/
+function useEidosReliabilityStats() {
+	return useStore((s) => s.reliability);
+}
 //#endregion
 //#region src/sw-bridge.ts
 var _registration = null;
 var _pendingMessages = [];
+function getSwRegistration() {
+	return _registration;
+}
 function sendToWorker(message) {
 	const sw = _registration?.active;
 	if (sw) sw.postMessage(message);
@@ -162,6 +202,14 @@ function setOfflineSimulation(enabled) {
 	});
 	useEidosStore.getState().setOnline(!enabled);
 }
+/**
+* Tells the waiting service worker to activate immediately, then reloads the page.
+* Only relevant when `skipWaiting: false` — call this after the user confirms
+* a "reload to update" toast shown via `onUpdateAvailable`.
+*/
+function triggerSwUpdate() {
+	_registration?.waiting?.postMessage({ type: "EIDOS_SKIP_WAITING" });
+}
 //#endregion
 //#region src/idb.ts
 var DB_NAME = "eidos";
@@ -403,6 +451,7 @@ async function _markSucceeded(item, store) {
 		status: "succeeded",
 		completedAt
 	});
+	store.recordReliabilityEvent("succeeded");
 	broadcastQueueSync({
 		type: "update",
 		id: item.id,
@@ -453,6 +502,7 @@ async function _resolveConflict(item, store, err) {
 	}
 	if (resolution === "skip") {
 		store.removeQueueItem(item.id);
+		store.recordReliabilityEvent("conflicted");
 		broadcastQueueSync({
 			type: "remove",
 			id: item.id
@@ -480,6 +530,7 @@ async function _scheduleRetryOrFail(item, store, err) {
 			retryCount
 		};
 		store.updateQueueItem(item.id, update);
+		store.recordReliabilityEvent("failed");
 		broadcastQueueSync({
 			type: "update",
 			id: item.id,
@@ -499,6 +550,7 @@ async function _scheduleRetryOrFail(item, store, err) {
 		nextRetryAt: Date.now() + backoffMs(retryCount)
 	};
 	store.updateQueueItem(item.id, update);
+	store.recordReliabilityEvent("retried");
 	broadcastQueueSync({
 		type: "update",
 		id: item.id,
@@ -529,6 +581,7 @@ async function _replayItem(item, store) {
 	} catch (err) {
 		if (isAbortError(err)) {
 			store.removeQueueItem(item.id);
+			store.recordReliabilityEvent("cancelled");
 			broadcastQueueSync({
 				type: "remove",
 				id: item.id
@@ -709,7 +762,10 @@ var ICONS = {
 	arrowDown: "M12 5v14M19 12l-7 7-7-7",
 	clock: "M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20zM12 6v6l4 2",
 	x: "M18 6 6 18M6 6l12 12",
-	rotateCcw: "M3 12a9 9 0 1 0 2.6-6.4M3 12V5m0 7h7"
+	rotateCcw: "M3 12a9 9 0 1 0 2.6-6.4M3 12V5m0 7h7",
+	activity: "M22 12h-4l-3 9L9 3l-3 9H2",
+	shield: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z",
+	refreshCw: "M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8M21 3v5h-5M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16M3 21v-5h5"
 };
 function positionStyle(p) {
 	const base = {
@@ -746,6 +802,7 @@ function EidosDevtools({ position = "bottom-right", defaultOpen = false }) {
 	const { pending, failed, replaying } = useEidosQueueStats();
 	const resources = useEidosResources();
 	const resourceList = Object.values(resources);
+	const reliability = useEidosReliabilityStats();
 	const badgeCount = pending + failed + replaying;
 	const toggleOffline = useCallback(() => {
 		const next = !simOffline;
@@ -949,7 +1006,12 @@ function EidosDevtools({ position = "bottom-right", defaultOpen = false }) {
 						flexShrink: 0,
 						background: C.surface
 					},
-					children: ["queue", "cache"].map((t) => /* @__PURE__ */ jsx("button", {
+					children: [
+						"queue",
+						"cache",
+						"reliability",
+						"sw"
+					].map((t) => /* @__PURE__ */ jsx("button", {
 						role: "tab",
 						"aria-selected": tab === t,
 						onClick: () => setTab(t),
@@ -970,7 +1032,7 @@ function EidosDevtools({ position = "bottom-right", defaultOpen = false }) {
 							letterSpacing: "0.05em",
 							transition: "color 0.15s, border-color 0.15s"
 						},
-						children: t === "queue" ? `Queue (${queue.length})` : `Cache (${resourceList.length})`
+						children: t === "queue" ? `Queue (${queue.length})` : t === "cache" ? `Cache (${resourceList.length})` : t === "reliability" ? "Reliability" : "SW"
 					}, t))
 				}),
 				/* @__PURE__ */ jsx("div", {
@@ -983,7 +1045,7 @@ function EidosDevtools({ position = "bottom-right", defaultOpen = false }) {
 						queue,
 						onReplay: handleReplay,
 						onClear: handleClear
-					}) : /* @__PURE__ */ jsx(CacheTab, { resources: resourceList })
+					}) : tab === "cache" ? /* @__PURE__ */ jsx(CacheTab, { resources: resourceList }) : tab === "reliability" ? /* @__PURE__ */ jsx(ReliabilityTab, { stats: reliability }) : /* @__PURE__ */ jsx(SwTab, { resources: resourceList })
 				})
 			]
 		}), toggleBtn]
@@ -1235,5 +1297,272 @@ function CacheTab({ resources }) {
 		]
 	}, res.url)) });
 }
+function ReliabilityTab({ stats }) {
+	const rows = [
+		{
+			label: "Queued",
+			key: "queued",
+			color: C.blue
+		},
+		{
+			label: "Succeeded",
+			key: "succeeded",
+			color: C.green
+		},
+		{
+			label: "Retried",
+			key: "retried",
+			color: C.yellow
+		},
+		{
+			label: "Failed",
+			key: "failed",
+			color: C.red
+		},
+		{
+			label: "Conflicted",
+			key: "conflicted",
+			color: C.purple
+		},
+		{
+			label: "Cancelled",
+			key: "cancelled",
+			color: C.muted
+		}
+	];
+	const total = stats.queued;
+	const successRate = total > 0 ? Math.round(stats.succeeded / total * 100) : null;
+	return /* @__PURE__ */ jsxs("div", { children: [
+		/* @__PURE__ */ jsxs("div", {
+			style: {
+				display: "flex",
+				alignItems: "center",
+				gap: 8,
+				padding: "8px 12px",
+				borderBottom: `1px solid ${C.border}`
+			},
+			children: [/* @__PURE__ */ jsx("span", {
+				style: {
+					color: C.muted,
+					display: "inline-flex"
+				},
+				children: /* @__PURE__ */ jsx(Icon, {
+					path: ICONS.activity,
+					size: 12
+				})
+			}), /* @__PURE__ */ jsx("span", {
+				style: {
+					color: C.muted,
+					fontSize: 10
+				},
+				children: successRate === null ? "No queued actions yet this session" : `${successRate}% succeeded`
+			})]
+		}),
+		rows.map(({ label, key, color }) => /* @__PURE__ */ jsxs("div", {
+			style: {
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "space-between",
+				padding: "7px 12px",
+				borderBottom: `1px solid ${C.border}`
+			},
+			children: [/* @__PURE__ */ jsx("span", {
+				style: { color: C.text },
+				children: label
+			}), /* @__PURE__ */ jsx("span", {
+				style: pill(color),
+				children: stats[key]
+			})]
+		}, key)),
+		/* @__PURE__ */ jsxs("div", {
+			style: {
+				padding: "8px 12px",
+				color: C.muted,
+				fontSize: 10
+			},
+			children: [
+				"Session-only counters — reset on reload. Wire up",
+				" ",
+				/* @__PURE__ */ jsx("code", {
+					style: { color: C.cyan },
+					children: "onReliabilityReport"
+				}),
+				" in",
+				" ",
+				/* @__PURE__ */ jsx("code", {
+					style: { color: C.cyan },
+					children: "initEidos()"
+				}),
+				" to forward these to analytics."
+			]
+		})
+	] });
+}
+function readSwSnapshot() {
+	const reg = getSwRegistration();
+	if (!reg) return {
+		activeUrl: null,
+		hasWaiting: false,
+		hasInstalling: false
+	};
+	return {
+		activeUrl: reg.active?.scriptURL ?? null,
+		hasWaiting: reg.waiting !== null,
+		hasInstalling: reg.installing !== null
+	};
+}
+function SwTab({ resources }) {
+	const [snap, setSnap] = useState(readSwSnapshot);
+	useEffect(() => {
+		const id = setInterval(() => setSnap(readSwSnapshot()), 1e3);
+		return () => clearInterval(id);
+	}, []);
+	const buckets = resources.reduce((acc, res) => {
+		const name = res.strategy.cacheName;
+		acc[name] = (acc[name] ?? 0) + 1;
+		return acc;
+	}, {});
+	const bucketList = Object.entries(buckets);
+	const swState = snap.hasInstalling ? "installing" : snap.hasWaiting ? "waiting" : snap.activeUrl ? "active" : "none";
+	const stateColor = swState === "active" ? C.green : swState === "waiting" || swState === "installing" ? C.yellow : C.muted;
+	const shortUrl = snap.activeUrl ? snap.activeUrl.replace(/^https?:\/\/[^/]+/, "") || snap.activeUrl : null;
+	return /* @__PURE__ */ jsxs("div", { children: [
+		/* @__PURE__ */ jsxs("div", {
+			style: {
+				display: "flex",
+				alignItems: "center",
+				gap: 8,
+				padding: "8px 12px",
+				borderBottom: `1px solid ${C.border}`
+			},
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					style: {
+						color: C.muted,
+						display: "inline-flex"
+					},
+					children: /* @__PURE__ */ jsx(Icon, {
+						path: ICONS.shield,
+						size: 12
+					})
+				}),
+				/* @__PURE__ */ jsx("span", {
+					style: pill(stateColor),
+					children: swState
+				}),
+				shortUrl !== null ? /* @__PURE__ */ jsx("span", {
+					title: snap.activeUrl ?? void 0,
+					style: {
+						flex: 1,
+						color: C.muted,
+						fontSize: 10,
+						overflow: "hidden",
+						textOverflow: "ellipsis",
+						whiteSpace: "nowrap"
+					},
+					children: shortUrl
+				}) : /* @__PURE__ */ jsx("span", {
+					style: {
+						flex: 1,
+						color: C.muted,
+						fontSize: 10
+					},
+					children: "No SW registered"
+				}),
+				/* @__PURE__ */ jsx("button", {
+					onClick: () => setSnap(readSwSnapshot()),
+					title: "Refresh SW state",
+					"aria-label": "Refresh SW state",
+					...withFocusRing(),
+					style: {
+						...btn("ghost"),
+						padding: "2px 6px",
+						minHeight: 20
+					},
+					children: /* @__PURE__ */ jsx(Icon, {
+						path: ICONS.refreshCw,
+						size: 10
+					})
+				})
+			]
+		}),
+		snap.hasWaiting ? /* @__PURE__ */ jsxs("div", {
+			style: {
+				display: "flex",
+				alignItems: "center",
+				gap: 8,
+				padding: "8px 12px",
+				borderBottom: `1px solid ${C.border}`,
+				background: `${C.yellow}11`
+			},
+			children: [/* @__PURE__ */ jsx("span", {
+				style: {
+					color: C.yellow,
+					fontSize: 10,
+					flex: 1
+				},
+				children: "Update ready — new SW is waiting to activate."
+			}), /* @__PURE__ */ jsx("button", {
+				onClick: triggerSwUpdate,
+				title: "Activate the waiting SW now",
+				...withFocusRing(),
+				style: {
+					...btn("primary"),
+					minHeight: 22,
+					fontSize: 10
+				},
+				children: "Force update"
+			})]
+		}) : null,
+		/* @__PURE__ */ jsxs("div", {
+			style: {
+				padding: "6px 12px",
+				color: C.muted,
+				fontSize: 10,
+				borderBottom: `1px solid ${C.border}`
+			},
+			children: [
+				"Cache buckets (",
+				bucketList.length,
+				")"
+			]
+		}),
+		bucketList.length === 0 ? /* @__PURE__ */ jsx("div", {
+			style: {
+				padding: "16px 12px",
+				textAlign: "center",
+				color: C.muted,
+				fontSize: 10
+			},
+			children: "No resources registered"
+		}) : bucketList.map(([name, count]) => /* @__PURE__ */ jsxs("div", {
+			style: {
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "space-between",
+				padding: "7px 12px",
+				borderBottom: `1px solid ${C.border}`
+			},
+			children: [/* @__PURE__ */ jsx("span", {
+				style: {
+					color: C.text,
+					fontSize: 10,
+					overflow: "hidden",
+					textOverflow: "ellipsis",
+					whiteSpace: "nowrap",
+					flex: 1
+				},
+				children: name
+			}), /* @__PURE__ */ jsxs("span", {
+				style: pill(C.blue),
+				children: [
+					count,
+					" resource",
+					count !== 1 ? "s" : ""
+				]
+			})]
+		}, name))
+	] });
+}
 //#endregion
 export { EidosDevtools };

package/dist/eidos-sw.js

@@ -1,4 +1,4 @@
-//#region ../core/src/internal/url-base64.ts
+//#region src/internal/url-base64.ts
 /** Decodes a base64url string (e.g. a VAPID public key) into raw bytes. */
 function urlBase64ToUint8Array(base64Url) {
 	const base64 = (base64Url + "=".repeat((4 - base64Url.length % 4) % 4)).replace(/-/g, "+").replace(/_/g, "/");
@@ -13,9 +13,7 @@ var runtimeConfig = {
 	resources: /* @__PURE__ */ new Map(),
 	simulateOffline: false
 };
-self.addEventListener("install", (event) => {
-	event.waitUntil(self.skipWaiting());
-});
+self.addEventListener("install", () => {});
 self.addEventListener("activate", (event) => {
 	event.waitUntil(Promise.all([self.clients.claim(), caches.keys().then((keys) => Promise.all(keys.filter((k) => k.startsWith(CACHE_PREFIX) && !k.endsWith(CACHE_VERSION)).map((k) => caches.delete(k))))]));
 });
@@ -29,7 +27,9 @@ self.addEventListener("message", (event) => {
 			runtimeConfig.resources.set(url, {
 				strategy: data.strategy,
 				cacheName: data.cacheName ?? `${CACHE_PREFIX}-resources-${CACHE_VERSION}`,
-				...patternSrc !== void 0 && { pattern: new RegExp(patternSrc) }
+				...patternSrc !== void 0 && { pattern: new RegExp(patternSrc) },
+				...data.maxAge !== void 0 && { maxAge: data.maxAge },
+				...data.maxEntries !== void 0 && { maxEntries: data.maxEntries }
 			});
 			event.source?.postMessage({
 				type: "EIDOS_RESOURCE_REGISTERED",
@@ -65,6 +65,9 @@ self.addEventListener("message", (event) => {
 			});
 			break;
 		}
+		case "EIDOS_SKIP_WAITING":
+			self.skipWaiting();
+			break;
 		case "EIDOS_PING":
 			event.source?.postMessage({ type: "EIDOS_PONG" });
 			break;
@@ -88,7 +91,7 @@ self.addEventListener("fetch", (event) => {
 	}
 	if (!reg) return;
 	if (reg.strategy === "stale-while-revalidate" && !runtimeConfig.simulateOffline) {
-		event.respondWith(staleWhileRevalidate(event, event.request, pathname, reg.cacheName));
+		event.respondWith(staleWhileRevalidate(event, event.request, pathname, reg));
 		return;
 	}
 	event.respondWith(handleFetch(event.request, pathname, reg));
@@ -96,16 +99,45 @@ self.addEventListener("fetch", (event) => {
 async function handleFetch(request, pathname, reg) {
 	if (runtimeConfig.simulateOffline) return serveOffline(request, pathname, reg.cacheName);
 	switch (reg.strategy) {
-		case "cache-first": return cacheFirst(request, pathname, reg.cacheName);
-		case "stale-while-revalidate": return staleWhileRevalidate(null, request, pathname, reg.cacheName);
-		case "network-first": return networkFirst(request, pathname, reg.cacheName);
+		case "cache-first": return cacheFirst(request, pathname, reg);
+		case "stale-while-revalidate": return staleWhileRevalidate(null, request, pathname, reg);
+		case "network-first": return networkFirst(request, pathname, reg);
 		default: return fetch(request);
 	}
 }
-async function cacheFirst(request, pathname, cacheName) {
+var CACHED_AT_HEADER = "X-Eidos-Cached-At";
+/**
+* Puts a response into cache with a `X-Eidos-Cached-At` timestamp header so
+* the SW can enforce `maxAge` on subsequent cache hits.
+* Caller must pass a clone of the response — `response.body` is consumed here.
+*/
+async function putCached(cache, request, response) {
+	const headers = new Headers(response.headers);
+	headers.set(CACHED_AT_HEADER, String(Date.now()));
+	await cache.put(request, new Response(response.body, {
+		status: response.status,
+		statusText: response.statusText,
+		headers
+	}));
+}
+/** Returns true if the cached response has exceeded `maxAge`. */
+function isExpired(cached, maxAge) {
+	if (maxAge === void 0) return false;
+	const cachedAt = Number(cached.headers.get(CACHED_AT_HEADER) ?? "0");
+	return cachedAt > 0 && Date.now() - cachedAt > maxAge;
+}
+/** Evicts the oldest (first-inserted) entries when the cache exceeds `maxEntries`. */
+async function evictIfNeeded(cache, maxEntries) {
+	if (maxEntries === void 0) return;
+	const keys = await cache.keys();
+	const overflow = keys.length - maxEntries;
+	if (overflow > 0) await Promise.all(keys.slice(0, overflow).map((k) => cache.delete(k)));
+}
+async function cacheFirst(request, pathname, reg) {
+	const { cacheName, maxAge, maxEntries } = reg;
 	const cache = await caches.open(cacheName);
 	const cached = await cache.match(request);
-	if (cached) {
+	if (cached && !isExpired(cached, maxAge)) {
 		notifyClients({
 			type: "EIDOS_CACHE_HIT",
 			url: pathname,
@@ -113,10 +145,12 @@ async function cacheFirst(request, pathname, cacheName) {
 		});
 		return cached;
 	}
+	if (cached) await cache.delete(request);
 	try {
 		const response = await fetch(request);
 		if (response.ok) {
-			await cache.put(request, response.clone());
+			await putCached(cache, request, response.clone());
+			await evictIfNeeded(cache, maxEntries);
 			notifyClients({
 				type: "EIDOS_CACHE_UPDATED",
 				url: pathname,
@@ -132,12 +166,17 @@ async function cacheFirst(request, pathname, cacheName) {
 		return offlineErrorResponse(pathname);
 	}
 }
-async function staleWhileRevalidate(event, request, pathname, cacheName) {
+async function staleWhileRevalidate(event, request, pathname, reg) {
+	const { cacheName, maxAge, maxEntries } = reg;
 	const cache = await caches.open(cacheName);
 	const cached = await cache.match(request);
+	const expired = cached ? isExpired(cached, maxAge) : false;
+	if (expired) await cache.delete(request);
+	const effectiveCached = expired ? null : cached;
 	const revalidatePromise = fetch(request).then(async (response) => {
 		if (response.ok) {
-			await cache.put(request, response.clone());
+			await putCached(cache, request, response.clone());
+			await evictIfNeeded(cache, maxEntries);
 			notifyClients({
 				type: "EIDOS_CACHE_UPDATED",
 				url: pathname,
@@ -152,23 +191,25 @@ async function staleWhileRevalidate(event, request, pathname, cacheName) {
 			strategy: "stale-while-revalidate"
 		});
 	});
-	if (cached) {
+	if (effectiveCached) {
 		event?.waitUntil(revalidatePromise);
 		notifyClients({
 			type: "EIDOS_CACHE_HIT",
 			url: pathname,
 			strategy: "stale-while-revalidate"
 		});
-		return cached;
+		return effectiveCached;
 	}
 	return await revalidatePromise ?? offlineErrorResponse(pathname);
 }
-async function networkFirst(request, pathname, cacheName) {
+async function networkFirst(request, pathname, reg) {
+	const { cacheName, maxAge, maxEntries } = reg;
 	const cache = await caches.open(cacheName);
 	try {
 		const response = await fetch(request, { signal: AbortSignal.timeout(3e3) });
 		if (response.ok) {
-			await cache.put(request, response.clone());
+			await putCached(cache, request, response.clone());
+			await evictIfNeeded(cache, maxEntries);
 			notifyClients({
 				type: "EIDOS_CACHE_UPDATED",
 				url: pathname,
@@ -178,7 +219,7 @@ async function networkFirst(request, pathname, cacheName) {
 		return response;
 	} catch {
 		const cached = await cache.match(request);
-		if (cached) {
+		if (cached && !isExpired(cached, maxAge)) {
 			notifyClients({
 				type: "EIDOS_CACHE_HIT",
 				url: pathname,