@nkzw/fate-devtools 0.0.0-stage → 2.0.0

package/lib/panel/assets/index-NKFD_JQx.css

@@ -0,0 +1 @@
+:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;--bg:#fff;--bg-subtle:#f6f7f9;--bg-hover:#eef1f5;--bg-selected:#e5efff;--border:#e3e6eb;--text:#1c2026;--text-muted:#6b7380;--accent:#3d87f5;--accent-text:#1f65d6;--green:#1a8f4c;--green-bg:#e3f5ea;--amber:#a15f00;--amber-bg:#fdf1dc;--red:#c73434;--red-bg:#fde6e6;--blue:#1f65d6;--blue-bg:#e2edff;--purple:#7a3fd1;--purple-bg:#efe6fd;--json-key:#7a3fd1;--json-string:#1a8f4c;--json-number:#1f65d6;--json-boolean:#c25e00;--mono:ui-monospace, "SF Mono", "Fira Code", Menlo, Consolas, monospace;--sans:system-ui, -apple-system, "Segoe UI", Roboto, sans-serif}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--bg:#121418;--bg-subtle:#191c21;--bg-hover:#20242a;--bg-selected:#1b2b45;--border:#2a2f37;--text:#e3e6eb;--text-muted:#8b94a3;--accent-text:#79a9ff;--green:#5fd38d;--green-bg:#15301f;--amber:#f2b45a;--amber-bg:#352711;--red:#ff7b7b;--red-bg:#3a1a1a;--blue:#79a9ff;--blue-bg:#172846;--purple:#b994ff;--purple-bg:#2a1d45;--json-key:#b994ff;--json-string:#7ddc9f;--json-number:#79a9ff;--json-boolean:#f2a35a}}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text);font:13px/1.45 var(--sans);-webkit-font-smoothing:antialiased}button,input,select{font:inherit;color:inherit}code,.mono{font-family:var(--mono);font-size:12px}.muted{color:var(--text-muted)}.app{flex-direction:column;height:100%;display:flex}.toolbar{border-bottom:1px solid var(--border);background:var(--bg-subtle);flex-wrap:wrap;align-items:center;gap:8px 16px;padding:6px 12px;display:flex}.brand{align-items:center;gap:8px;display:flex}.brand select{border:1px solid var(--border);corner-shape:squircle;background:var(--bg);border-radius:16px;max-width:240px;padding:2px 6px}.logo{corner-shape:squircle;background:var(--accent);color:#fff;border-radius:12px;place-items:center;width:22px;height:22px;padding-right:3px;font:italic 18px/1 Georgia,serif;display:inline-grid}.logo.large{border-radius:28px;width:56px;height:56px;padding-right:6px;font-size:44px}.brand-name{font:italic 18px/1 Georgia,serif}.tabs{gap:4px;display:flex}.tab{corner-shape:squircle;color:var(--text-muted);cursor:pointer;background:0 0;border:0;border-radius:16px;align-items:center;gap:6px;padding:4px 10px;display:flex}.tab:hover{background:var(--bg-hover);color:var(--text)}.tab.active{background:var(--bg);color:var(--text);box-shadow:0 0 0 1px var(--border)}.count{corner-shape:squircle;background:var(--bg-hover);min-width:18px;color:var(--text-muted);text-align:center;border-radius:12px;padding:0 5px;font-size:11px}.stats{gap:6px;margin-left:auto;display:flex}.button-group{flex-shrink:0;gap:6px;display:flex}.button-group button{border:1px solid var(--border);corner-shape:squircle;background:var(--bg);cursor:pointer;white-space:nowrap;border-radius:16px;padding:3px 10px}.button-group button:hover{background:var(--bg-hover)}.button-group button.danger{color:var(--red)}.content{flex:1;min-height:0}.master-detail{grid-template-columns:minmax(260px,38%) 1fr;height:100%;display:grid}.master{border-right:1px solid var(--border);flex-direction:column;min-height:0;display:flex}.filter{border-bottom:1px solid var(--border);padding:8px}.filter input{border:1px solid var(--border);corner-shape:squircle;background:var(--bg-subtle);border-radius:16px;outline:none;width:100%;padding:5px 8px}.filter input:focus{border-color:var(--accent)}.chips{border-bottom:1px solid var(--border);flex-wrap:wrap;gap:4px;padding:1px 4px;display:flex}.chip{border:1px solid var(--border);corner-shape:squircle;cursor:pointer;background:0 0;border-radius:16px;align-items:center;gap:4px;padding:1px 8px;font-size:12px;display:flex}.chip.active{border-color:var(--accent);background:var(--bg-selected);color:var(--accent-text)}.rows{flex:1;overflow:auto}.row{border:0;border-bottom:1px solid var(--border);cursor:pointer;text-align:left;background:0 0;justify-content:space-between;align-items:center;gap:8px;width:100%;padding:5px 10px;display:flex}.row:hover{background:var(--bg-hover)}.row.selected{background:var(--bg-selected)}.row-title{min-width:0;font-family:var(--mono);text-overflow:ellipsis;white-space:nowrap;align-items:center;gap:6px;font-size:12px;display:flex;overflow:hidden}.row-meta{flex-shrink:0;align-items:center;gap:6px;font-size:12px;display:flex}.type{color:var(--accent-text);flex-shrink:0}.label{font-family:var(--sans);text-overflow:ellipsis;font-size:13px;overflow:hidden}.hash{margin-left:4px}.detail{min-height:0;overflow:auto}.detail-body{padding:12px 16px 24px}.detail-header{justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px;display:flex}.detail-header h2{font-family:var(--mono);word-break:break-all;align-items:center;gap:6px;margin:0 0 6px;font-size:15px;font-weight:600;display:flex}.detail-badges{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.section{border:1px solid var(--border);corner-shape:squircle;border-radius:24px;margin-top:12px;overflow:hidden}.section-header{border-bottom:1px solid var(--border);background:var(--bg-subtle);corner-shape:squircle;border-radius:24px 24px 0 0;justify-content:space-between;align-items:center;padding:7px 14px;display:flex}.section-header h3{color:var(--text-muted);letter-spacing:.04em;text-transform:uppercase;margin:0;font-size:11px;font-weight:600}.section-body{padding:10px 14px;overflow-x:auto}.empty{color:var(--text-muted);text-align:center;padding:24px}.badge{corner-shape:squircle;white-space:nowrap;border-radius:12px;padding:0 7px;font-size:11px;font-weight:500;line-height:18px;display:inline-block}.badge-neutral{background:var(--bg-hover);color:var(--text-muted)}.badge-green{background:var(--green-bg);color:var(--green)}.badge-amber{background:var(--amber-bg);color:var(--amber)}.badge-red{background:var(--red-bg);color:var(--red)}.badge-blue{background:var(--blue-bg);color:var(--blue)}.badge-purple{background:var(--purple-bg);color:var(--purple)}.dot{background:var(--text-muted);border-radius:50%;flex-shrink:0;width:7px;height:7px}.dot-green{background:var(--green)}.dot-amber{background:var(--amber)}.dot-red{background:var(--red)}.dot-blue{background:var(--blue)}.kind{corner-shape:squircle;background:var(--bg-hover);color:var(--text-muted);letter-spacing:.03em;text-transform:uppercase;border-radius:8px;padding:0 5px;font-size:10px;font-weight:600}.kind-mutation{background:var(--purple-bg);color:var(--purple)}.kind-live{background:var(--blue-bg);color:var(--blue)}.kind-list{background:var(--green-bg);color:var(--green)}.paths{flex-wrap:wrap;gap:4px;display:flex}.path{corner-shape:squircle;background:var(--bg-hover);font-family:var(--mono);border-radius:8px;padding:0 6px;font-size:11.5px}.path.stale{background:var(--amber-bg);color:var(--amber)}.ref{corner-shape:squircle;background:var(--blue-bg);color:var(--blue);font-family:var(--mono);cursor:pointer;border:0;border-radius:8px;padding:0 5px;font-size:11.5px}.ref:hover{text-decoration:underline}.link{font-family:var(--mono);cursor:pointer;text-align:left;background:0 0;border:0;padding:0;font-size:12px}.link:hover{text-decoration:underline}.link-list{flex-direction:column;gap:4px;display:flex}.id-list{color:var(--text-muted);font-family:var(--mono);flex-direction:column;gap:3px;margin:0;padding-left:28px;font-size:11px;display:flex}.props{grid-template-columns:max-content 1fr;gap:6px 16px;margin:0;display:grid}.props dt{color:var(--text-muted)}.props dd{min-width:0;margin:0}.error{color:var(--red);font-family:var(--mono);white-space:pre-wrap;margin:0;font-size:12px}.json,.json-node,.json-row{font-family:var(--mono);font-size:12px}.json-row{white-space:nowrap;align-items:baseline;gap:2px;padding:1px 0;display:flex}.json-toggle{cursor:pointer;text-align:left;background:0 0;border:0;width:100%}.json-children{border-left:1px solid var(--border);margin-left:6px;padding-left:10px}.caret{width:12px;color:var(--text-muted);transition:transform .1s;display:inline-block}.caret.open{transform:rotate(90deg)}.json-key{color:var(--json-key)}.json-string{color:var(--json-string);white-space:pre-wrap;word-break:break-word}.json-number{color:var(--json-number)}.json-boolean{color:var(--json-boolean)}.json-null,.json-summary{color:var(--text-muted)}.log{flex-direction:column;height:100%;display:flex;overflow:auto}.changes{border-collapse:collapse;width:100%}.changes td{border-bottom:1px solid var(--border);vertical-align:baseline;padding:4px 10px}.changes td:first-child{white-space:nowrap;width:1%}.changes td:nth-child(2){width:1%}.waiting{text-align:center;flex-direction:column;align-items:center;max-width:520px;margin:0 auto;padding:48px 24px;display:flex}.waiting h2{margin:16px 0 4px;font-size:16px}.waiting p{color:var(--text-muted)}.code{border:1px solid var(--border);corner-shape:squircle;background:var(--bg-subtle);width:100%;font-family:var(--mono);text-align:left;border-radius:24px;padding:12px 14px;font-size:12px}@media (width<=720px){.master-detail{grid-template-rows:minmax(160px,40%) 1fr;grid-template-columns:1fr}.master{border-right:0;border-bottom:1px solid var(--border)}.stats{margin-left:0}}

package/lib/panel/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>fate devtools</title>
+    <script type="module" crossorigin src="./assets/index-B8BrSDrl.js"></script>
+    <link rel="stylesheet" crossorigin href="./assets/index-NKFD_JQx.css">
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

package/lib/react.d.mts

@@ -0,0 +1,10 @@
+import { FateDevtoolsOptions } from "./index.mjs";
+import { FateClient } from "@nkzw/fate";
+/**
+ * Connects a fate client to the devtools while the calling component is mounted.
+ */
+export declare function useFateDevtools(client: FateClient<any, any, any>, { logSize, name }?: FateDevtoolsOptions): void;
+/**
+ * Connects the client from the nearest `<FateClient>` to the devtools. Renders nothing.
+ */
+export declare function FateDevtools(props: FateDevtoolsOptions): null;

package/lib/react.mjs

@@ -0,0 +1,25 @@
+import { t as connectFateDevtools } from "./src-BAd3o4sS.mjs";
+import { useEffect } from "react";
+import { useFateClient } from "react-fate";
+// src/react.tsx
+/**
+* Connects a fate client to the devtools while the calling component is mounted.
+*/
+function useFateDevtools(client, { logSize, name } = {}) {
+	useEffect(() => connectFateDevtools(client, {
+		logSize,
+		name
+	}), [
+		client,
+		logSize,
+		name
+	]);
+}
+/**
+* Connects the client from the nearest `<FateClient>` to the devtools. Renders nothing.
+*/
+function FateDevtools(props) {
+	useFateDevtools(useFateClient(), props);
+	return null;
+}
+export { FateDevtools, useFateDevtools };

package/lib/src-BAd3o4sS.mjs

@@ -0,0 +1,563 @@
+// src/protocol.ts
+/**
+* Messages exchanged between an app running fate and the devtools panel.
+*
+* Both sides talk over a `BroadcastChannel`, so the panel works inside the
+* Vite DevTools dock (served from the dev server's origin) and as a standalone
+* tab on the same origin.
+*/
+const channelName = "fate-devtools";
+/** The app page exposes its page id here so an embedded panel can pick its own clients. */
+const pageIdGlobal = "__FATE_DEVTOOLS_PAGE_ID__";
+const isPanelMessage = (value) => typeof value === "object" && value !== null && value.source === "fate-devtools:panel";
+const listKeySeparator = " __fate__ ";
+const decodeListKeyPart = (part) => {
+	try {
+		return decodeURIComponent(part);
+	} catch {
+		return part;
+	}
+};
+/**
+* Splits a fate list key (`owner __fate__ field __fate__ hash`) into its parts.
+* Root lists are owned by `__root__`.
+*/
+const parseListKey = (key) => {
+	const parts = key.split(listKeySeparator);
+	return parts.length >= 3 ? {
+		field: decodeListKeyPart(parts[1]),
+		hash: decodeListKeyPart(parts[2]),
+		owner: decodeListKeyPart(parts[0])
+	} : {
+		field: key,
+		hash: "default",
+		owner: ""
+	};
+};
+// src/serialize.ts
+const maxDepth = 12;
+const maxArrayLength = 200;
+const maxStringLength = 2e3;
+/**
+* Converts arbitrary values into plain JSON that can cross a
+* `BroadcastChannel`. Cycles, functions, class instances, and very large
+* values are summarized instead of throwing.
+*/
+function toJSONValue(value, depth = 0, seen = /* @__PURE__ */ new WeakSet()) {
+	try {
+		return serialize(value, depth, seen);
+	} catch {
+		return "[Unserializable]";
+	}
+}
+function serialize(value, depth, seen) {
+	switch (typeof value) {
+		case "string": return value.length > maxStringLength ? `${value.slice(0, maxStringLength)}… (${value.length} chars)` : value;
+		case "number": return Number.isFinite(value) ? value : String(value);
+		case "boolean": return value;
+		case "bigint": return `${value}n`;
+		case "undefined": return null;
+		case "symbol": return value.toString();
+		case "function": return `ƒ ${value.name || "anonymous"}()`;
+	}
+	if (value === null) return null;
+	const object = value;
+	const tag = Object.prototype.toString.call(object);
+	if (tag === "[object Date]") {
+		const date = object;
+		return Number.isNaN(date.getTime()) ? "Invalid Date" : date.toISOString();
+	}
+	if (tag === "[object Error]") {
+		const error = object;
+		return {
+			message: error.message,
+			name: error.name
+		};
+	}
+	if (seen.has(object)) return "[Circular]";
+	if (depth >= maxDepth) return Array.isArray(object) ? `[Array(${object.length})]` : "[Object]";
+	const ref = getNodeRef(object);
+	if (ref !== void 0) return { $ref: ref };
+	seen.add(object);
+	try {
+		if (tag === "[object Map]") return Object.fromEntries([...object].slice(0, maxArrayLength).map(([key, entry]) => [String(key), toJSONValue(entry, depth + 1, seen)]));
+		if (tag === "[object Set]" || Array.isArray(object)) {
+			const items = [...object];
+			const result = items.slice(0, maxArrayLength).map((entry) => toJSONValue(entry, depth + 1, seen));
+			return items.length > maxArrayLength ? [...result, `… ${items.length - maxArrayLength} more`] : result;
+		}
+		const result = {};
+		for (const key of Object.keys(object)) {
+			let entry;
+			try {
+				entry = object[key];
+			} catch (error) {
+				entry = error;
+			}
+			result[key] = toJSONValue(entry, depth + 1, seen);
+		}
+		return result;
+	} finally {
+		seen.delete(object);
+	}
+}
+/**
+* fate stores relations as frozen objects keyed by a private symbol. The
+* devtools turn them into `{ $ref: 'Type:id' }` so the panel can link to them.
+*/
+const getNodeRef = (object) => {
+	for (const symbol of Object.getOwnPropertySymbols(object)) if (symbol.description === "__fate__node-ref") {
+		const id = object[symbol];
+		return typeof id === "string" ? id : void 0;
+	}
+};
+const errorMessage = (error) => error instanceof Error ? error.message : typeof error === "string" ? error : JSON.stringify(toJSONValue(error));
+// src/index.ts
+const operationKinds = /* @__PURE__ */ new Set([
+	"fetchById",
+	"fetchList",
+	"fetchQuery",
+	"mutate",
+	"mutateDurably",
+	"subscribeById",
+	"subscribeConnection"
+]);
+const watcherTimeout = 5e3;
+const snapshotDelay = 120;
+const maxRecords = 5e3;
+const pageId = Math.random().toString(36).slice(2, 10);
+let nextClientId = 0;
+const parseEntityId = (id) => {
+	const index = id.indexOf(":");
+	return index < 0 ? {
+		rawId: id,
+		type: ""
+	} : {
+		rawId: id.slice(index + 1),
+		type: id.slice(0, index)
+	};
+};
+const nestedKeys = (value, prefix = "") => {
+	if (!value || typeof value !== "object") return [];
+	return Object.entries(value).flatMap(([key, entry]) => typeof entry === "function" ? [`${prefix}${key}`] : nestedKeys(entry, `${prefix}${key}.`));
+};
+const toPaths = (select) => {
+	if (!select || typeof select !== "object" || !(Symbol.iterator in select)) return [];
+	return [...select].map(String).sort();
+};
+/** Keeps a bounded log, dropping the oldest entries first. */
+var RingLog = class {
+	constructor(size) {
+		this.size = size;
+		this.entries = [];
+	}
+	push(entry) {
+		this.entries.push(entry);
+		if (this.entries.length > this.size) this.entries.splice(0, this.entries.length - this.size);
+	}
+	clear() {
+		this.entries = [];
+	}
+	values() {
+		return this.entries;
+	}
+};
+const connections = /* @__PURE__ */ new WeakMap();
+/**
+* Connects a fate client to the devtools panel. Returns a function that
+* disconnects it again and restores the client's original transport.
+*
+* Connecting the same client more than once is safe; the client stays
+* connected until every returned disposer has been called.
+*
+* The devtools are intended for development. Guard the call with
+* `import.meta.env.DEV` (or your bundler's equivalent) to keep them out of
+* production bundles.
+*/
+function connectFateDevtools(client, options = {}) {
+	if (typeof BroadcastChannel === "undefined") return () => {};
+	const existing = connections.get(client);
+	if (existing) {
+		existing.refCount++;
+		return once(() => release(client, existing));
+	}
+	const connection = {
+		dispose: attach(client, options),
+		refCount: 1
+	};
+	connections.set(client, connection);
+	return once(() => release(client, connection));
+}
+const once = (fn) => {
+	let called = false;
+	return () => {
+		if (!called) {
+			called = true;
+			fn();
+		}
+	};
+};
+const release = (client, connection) => {
+	connection.refCount--;
+	if (connection.refCount === 0) {
+		connections.delete(client);
+		connection.dispose();
+	}
+};
+function attach(client, options) {
+	const logSize = options.logSize ?? 300;
+	globalThis[pageIdGlobal] = pageId;
+	const summary = {
+		id: `${pageId}:${nextClientId++}`,
+		name: options.name ?? "fate",
+		pageId,
+		url: typeof location === "undefined" ? "" : location.href
+	};
+	const channel = new BroadcastChannel(channelName);
+	const operations = new RingLog(logSize);
+	const changes = new RingLog(logSize);
+	const watchers = /* @__PURE__ */ new Map();
+	let nextOperationId = 0;
+	let nextChangeId = 0;
+	let snapshotTimer;
+	let disposed = false;
+	const post = (message) => {
+		if (!disposed) channel.postMessage(message);
+	};
+	const isWatched = () => {
+		const now = Date.now();
+		for (const [watcher, lastSeen] of watchers) if (now - lastSeen > watcherTimeout) watchers.delete(watcher);
+		return watchers.size > 0;
+	};
+	const sendSnapshot = () => {
+		snapshotTimer = void 0;
+		if (!disposed && isWatched()) post({
+			snapshot: takeSnapshot(),
+			source: "fate-devtools:app",
+			type: "snapshot"
+		});
+	};
+	const scheduleSnapshot = () => {
+		if (snapshotTimer === void 0 && watchers.size > 0) snapshotTimer = setTimeout(sendSnapshot, snapshotDelay);
+	};
+	const originalTransport = client.transport;
+	if (originalTransport) {
+		const wrapped = /* @__PURE__ */ new Map();
+		client.transport = new Proxy(originalTransport, { get(target, property, receiver) {
+			const value = Reflect.get(target, property, receiver);
+			if (typeof value !== "function" || !operationKinds.has(property)) return value;
+			let fn = wrapped.get(property);
+			if (!fn) {
+				fn = instrument(property, value.bind(target));
+				wrapped.set(property, fn);
+			}
+			return fn;
+		} });
+	}
+	function instrument(kind, fn) {
+		return (...args) => {
+			const entry = startOperation(kind, args);
+			operations.push(entry);
+			scheduleSnapshot();
+			const settle = (status, value) => {
+				entry.endedAt = Date.now();
+				entry.status = status;
+				if (status === "error") entry.error = errorMessage(value);
+				else entry.result = toJSONValue(value);
+				scheduleSnapshot();
+			};
+			if (kind === "subscribeById" || kind === "subscribeConnection") {
+				const handlerIndex = kind === "subscribeById" ? 4 : 5;
+				const handlers = args[handlerIndex];
+				if (handlers) {
+					const event = (name) => (...eventArgs) => {
+						entry.events = (entry.events ?? 0) + 1;
+						entry.result = toJSONValue(eventArgs[0]);
+						scheduleSnapshot();
+						return handlers[name]?.(...eventArgs);
+					};
+					args[handlerIndex] = {
+						...handlers,
+						...handlers.onData && { onData: event("onData") },
+						...handlers.onDelete && { onDelete: event("onDelete") },
+						...handlers.onEvent && { onEvent: event("onEvent") },
+						onError: (error) => {
+							entry.error = errorMessage(error);
+							entry.status = "error";
+							scheduleSnapshot();
+							handlers.onError?.(error);
+						}
+					};
+				}
+				try {
+					const unsubscribe = fn(...args);
+					entry.status = "live";
+					return () => {
+						entry.endedAt = Date.now();
+						if (entry.status === "live") entry.status = "closed";
+						scheduleSnapshot();
+						return unsubscribe();
+					};
+				} catch (error) {
+					settle("error", error);
+					throw error;
+				}
+			}
+			try {
+				const result = fn(...args);
+				Promise.resolve(result).then((value) => settle("success", value), (error) => settle("error", error));
+				return result;
+			} catch (error) {
+				settle("error", error);
+				throw error;
+			}
+		};
+	}
+	function startOperation(kind, args) {
+		const base = {
+			id: nextOperationId++,
+			kind,
+			startedAt: Date.now(),
+			status: "pending"
+		};
+		switch (kind) {
+			case "fetchById": return {
+				...base,
+				args: toJSONValue(args[3]),
+				input: toJSONValue({ ids: args[1] }),
+				name: String(args[0]),
+				select: toPaths(args[2])
+			};
+			case "fetchList":
+			case "fetchQuery": return {
+				...base,
+				args: toJSONValue(args[2]),
+				name: String(args[0]),
+				select: toPaths(args[1])
+			};
+			case "mutate": return {
+				...base,
+				args: toJSONValue(args[3]),
+				input: toJSONValue(args[1]),
+				name: String(args[0]),
+				select: toPaths(args[2])
+			};
+			case "mutateDurably": return {
+				...base,
+				args: toJSONValue(args[4]),
+				input: toJSONValue({
+					identity: args[3],
+					input: args[1]
+				}),
+				name: String(args[0]),
+				select: toPaths(args[2])
+			};
+			case "subscribeById": return {
+				...base,
+				args: toJSONValue(args[3]),
+				input: toJSONValue({ id: args[1] }),
+				name: String(args[0]),
+				select: toPaths(args[2])
+			};
+			case "subscribeConnection": return {
+				...base,
+				args: toJSONValue({
+					args: args[2],
+					selectionArgs: args[4]
+				}),
+				input: toJSONValue({ type: args[1] }),
+				name: String(args[0]),
+				select: toPaths(args[3])
+			};
+		}
+	}
+	const store = client.store;
+	const hadOwnOnChange = !!store && Object.hasOwn(store, "onChange");
+	const originalOnChange = store?.onChange;
+	if (store) store.onChange = (change, owner) => {
+		try {
+			changes.push({
+				at: Date.now(),
+				id: nextChangeId++,
+				...change.invalidated && { invalidated: true },
+				key: String(change.key),
+				kind: change.kind,
+				optimistic: !!store.isRecordingOptimistic || !!store.hasOptimisticUpdates,
+				...change.paths && { paths: [...change.paths].map(String) }
+			});
+			scheduleSnapshot();
+		} catch {}
+		return originalOnChange?.call(store, change, owner);
+	};
+	const unsubscribePersistence = client.persistence?.subscribe?.(scheduleSnapshot);
+	function takeSnapshot() {
+		const state = store?.dehydrate?.() ?? {
+			coverage: [],
+			lists: [],
+			records: []
+		};
+		const confirmed = store?.hasOptimisticUpdates ? store.dehydrateConfirmed?.() : void 0;
+		const confirmedRecords = confirmed ? new Map(confirmed.records) : void 0;
+		const confirmedLists = confirmed ? new Map(confirmed.lists) : void 0;
+		const coverage = new Map(state.coverage);
+		const stale = new Map(state.stale ?? []);
+		const records = state.records.slice(0, maxRecords).map(([id, record]) => {
+			const { rawId, type } = parseEntityId(String(id));
+			return {
+				coverage: coverage.get(id) ?? [],
+				id,
+				lists: store?.getListKeysForEntity?.(id) ?? [],
+				optimistic: !!confirmedRecords && confirmedRecords.get(id) !== record,
+				rawId,
+				record: toJSONValue(record),
+				stale: stale.get(id) ?? [],
+				type
+			};
+		});
+		const lists = state.lists.map(([key, list]) => {
+			const { field, owner } = parseListKey(key);
+			return {
+				field,
+				ids: list.ids.map(String),
+				key,
+				optimistic: !!confirmedLists && confirmedLists.get(key) !== list,
+				owner,
+				...list.pagination !== void 0 && { pagination: toJSONValue(list.pagination) },
+				state: toJSONValue(list)
+			};
+		});
+		return {
+			changes: [...changes.values()],
+			...typeof client.hydrationScope === "string" && { hydrationScope: client.hydrationScope },
+			id: summary.id,
+			lists,
+			live: [...client.liveSubscriptions ?? []].map(([key, subscription]) => ({
+				key,
+				subscribers: subscription.count ?? 0
+			})),
+			mutations: nestedKeys(client.mutations).sort(),
+			name: summary.name,
+			operations: operations.values().map((entry) => ({ ...entry })),
+			optimisticUpdates: !!store?.hasOptimisticUpdates,
+			...client.persistence?.getSnapshot && { persistence: toJSONValue(client.persistence.getSnapshot()) },
+			records,
+			requests: getRequests(client),
+			roots: Object.keys(client.roots ?? {}).sort(),
+			takenAt: Date.now(),
+			types: [...client.types?.keys() ?? []].sort()
+		};
+	}
+	function runAction(action) {
+		switch (action.type) {
+			case "gc":
+				client.gc?.();
+				break;
+			case "clear-log":
+				operations.clear();
+				changes.clear();
+				break;
+			case "invalidate-record":
+				store?.invalidateRecord?.(action.id);
+				break;
+			case "invalidate-all":
+				for (const [id] of store?.dehydrate?.().records ?? []) store?.invalidateRecord?.(id);
+				break;
+			case "delete-record": {
+				const { rawId, type } = parseEntityId(action.id);
+				client.deleteRecord?.(type, rawId);
+				break;
+			}
+			case "log-record": {
+				const record = store?.dehydrate?.().records.find(([id]) => id === action.id)?.[1];
+				globalThis.$fate = record;
+				console.log(`fate-devtools: ${action.id} (available as $fate)`, record);
+				break;
+			}
+		}
+		scheduleSnapshot();
+	}
+	const onMessage = (event) => {
+		const message = event.data;
+		if (!isPanelMessage(message)) return;
+		if (message.type === "discover") {
+			post({
+				client: summary,
+				source: "fate-devtools:app",
+				type: "connected"
+			});
+			return;
+		}
+		if (message.clientId !== summary.id) return;
+		switch (message.type) {
+			case "watch":
+				watchers.set(message.panelId, Date.now());
+				scheduleSnapshot();
+				break;
+			case "unwatch":
+				watchers.delete(message.panelId);
+				break;
+			case "action": try {
+				runAction(message.action);
+			} catch (error) {
+				console.error("fate-devtools: Action failed.", error);
+			}
+		}
+	};
+	channel.addEventListener("message", onMessage);
+	post({
+		client: summary,
+		source: "fate-devtools:app",
+		type: "connected"
+	});
+	const onPageHide = () => post({
+		clientId: summary.id,
+		source: "fate-devtools:app",
+		type: "disconnected"
+	});
+	globalThis.addEventListener?.("pagehide", onPageHide);
+	return () => {
+		onPageHide();
+		disposed = true;
+		globalThis.removeEventListener?.("pagehide", onPageHide);
+		if (snapshotTimer !== void 0) clearTimeout(snapshotTimer);
+		unsubscribePersistence?.();
+		channel.removeEventListener("message", onMessage);
+		channel.close();
+		if (originalTransport) client.transport = originalTransport;
+		if (store) {
+			if (hadOwnOnChange) store.onChange = originalOnChange;
+			else delete store.onChange;
+		}
+	};
+}
+function getRequests(client) {
+	const retained = client.operationLifetime?.operations;
+	const entries = /* @__PURE__ */ new Map();
+	const add = (descriptor, mode, status) => {
+		const key = descriptor?.key;
+		if (!key) return;
+		const existing = entries.get(key);
+		const modes = existing?.modes ?? [];
+		entries.set(key, {
+			items: existing?.items ?? (descriptor.items ?? []).map((item) => ({
+				...item.argsPayload !== void 0 && { args: toJSONValue(item.argsPayload) },
+				...item.ids && { ids: item.ids.map(String) },
+				kind: String(item.kind ?? ""),
+				name: String(item.name ?? ""),
+				paths: toPaths(item.plan?.paths),
+				...item.procedure && { procedure: item.procedure },
+				type: String(item.type ?? "")
+			})),
+			key,
+			modes: mode ? [...modes, {
+				mode,
+				status: status ?? "unknown"
+			}] : modes,
+			retainers: retained?.get(key)?.refCount ?? 0
+		});
+	};
+	for (const [, modes] of client.requests ?? []) for (const [mode, handle] of modes) add(handle.descriptor, mode, handle.status);
+	for (const [, operation] of retained ?? []) add(operation.descriptor);
+	return [...entries.values()];
+}
+export { connectFateDevtools as t };