use-everywhere 1.0.0 → 1.0.2

package/dist/devtools/index.js

@@ -1,301 +1,396 @@
 'use client';
-import {
-  getSharedStore,
-  usePeers
-} from "../chunk-YPQ6PLD5.js";
-
-// src/devtools/inspector.tsx
-import { useState as useState2 } from "react";
-import { createPortal } from "react-dom";
-import { DEFAULT_NAME } from "@use-everywhere/core";
-
-// src/devtools/panel.tsx
+import { n as usePeers, u as getSharedStore } from "../use-peers-DtpHGzXE.js";
 import { useCallback, useEffect, useRef, useState, useSyncExternalStore } from "react";
-import { observeBus } from "@use-everywhere/core";
-import { jsx, jsxs } from "react/jsx-runtime";
-var short = (id) => id.slice(0, 6);
+import { DEFAULT_NAME, observeBus } from "@use-everywhere/core";
+import { createPortal } from "react-dom";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/devtools/panel.tsx
+const short = (id) => id.slice(0, 6);
 function wireLabel(wire) {
-  return `${wire.scope}/${wire.type}`;
+	return `${wire.scope}/${wire.type}`;
 }
-var SCOPES = ["all", "state", "leader", "presence", "channel"];
-function Panel({
-  name,
-  limit,
-  leaseMs,
-  position,
-  defaultOpen
-}) {
-  const [open, setOpen] = useState(defaultOpen);
-  const [wires, setWires] = useState([]);
-  const [crown, setCrown] = useState(null);
-  const [paused, setPaused] = useState(false);
-  const [filter, setFilter] = useState("");
-  const [scopeView, setScopeView] = useState("all");
-  const [editing, setEditing] = useState(null);
-  const [frames, setFrames] = useState([]);
-  const nextId = useRef(0);
-  const crownAt = useRef(0);
-  const pausedRef = useRef(false);
-  useEffect(() => {
-    pausedRef.current = paused;
-  }, [paused]);
-  const peers = usePeers({ name });
-  const store = getSharedStore(name);
-  const subscribe = useCallback((onChange) => store.subscribe(onChange), [store]);
-  const snapshot = useSyncExternalStore(
-    subscribe,
-    () => store.getSnapshot(),
-    () => store.getSnapshot()
-  );
-  const versions = useSyncExternalStore(
-    subscribe,
-    () => store.getVersions(),
-    () => store.getVersions()
-  );
-  useEffect(() => {
-    return observeBus(name, (event) => {
-      const { wire, direction } = event;
-      if (wire.scope === "leader") {
-        if (wire.type === "resign") {
-          setCrown(null);
-          crownAt.current = 0;
-        } else if (wire.type === "claim" || wire.type === "heartbeat") {
-          setCrown(wire.clientId);
-          crownAt.current = Date.now();
-        }
-      }
-      if (pausedRef.current) return;
-      const id = nextId.current++;
-      const label = wireLabel(wire);
-      setWires(
-        (prev) => [
-          ...prev.slice(-(limit - 1)),
-          { id, direction, scope: wire.scope, label, from: short(wire.clientId) }
-        ].slice(-limit)
-      );
-      if (wire.scope === "state") {
-        setFrames(
-          (prev) => [...prev, { wireId: id, label, snapshot: { ...store.getSnapshot() } }].slice(-limit)
-        );
-      }
-    });
-  }, [name, limit, store]);
-  useEffect(() => {
-    const timer = setInterval(
-      () => {
-        if (crownAt.current && Date.now() - crownAt.current > leaseMs) {
-          setCrown(null);
-          crownAt.current = 0;
-        }
-      },
-      Math.max(50, Math.floor(leaseMs / 4))
-    );
-    return () => clearInterval(timer);
-  }, [leaseMs]);
-  const selfId = store.clientId;
-  const entries = Object.entries(versions);
-  const needle = filter.trim().toLowerCase();
-  const shown = wires.filter((wire) => {
-    if (scopeView !== "all" && wire.scope !== scopeView) return false;
-    if (!needle) return true;
-    return wire.label.toLowerCase().includes(needle) || wire.from.toLowerCase().includes(needle);
-  });
-  const commit = (key, draft) => {
-    let value;
-    try {
-      value = JSON.parse(draft);
-    } catch {
-      return;
-    }
-    store.set(key, value);
-    setEditing(null);
-  };
-  const draftIsValid = (draft) => {
-    try {
-      JSON.parse(draft);
-      return true;
-    } catch {
-      return false;
-    }
-  };
-  const restore = (frame) => {
-    for (const [key, value] of Object.entries(frame.snapshot)) {
-      if (Object.is(store.getSnapshot()[key], value)) continue;
-      store.set(key, value);
-    }
-  };
-  return /* @__PURE__ */ jsxs("div", { className: `ue-ins ue-ins--${position}`, "data-testid": "ue-inspector", children: [
-    /* @__PURE__ */ jsxs(
-      "button",
-      {
-        type: "button",
-        className: "ue-ins__bar",
-        onClick: () => setOpen((v) => !v),
-        "aria-expanded": open,
-        children: [
-          /* @__PURE__ */ jsx("span", { className: "ue-ins__dot" }),
-          /* @__PURE__ */ jsx("span", { className: "ue-ins__title", children: "use-everywhere" }),
-          /* @__PURE__ */ jsx("span", { className: "ue-ins__muted", children: name }),
-          crown ? /* @__PURE__ */ jsxs("span", { className: "ue-ins__crown", "data-testid": "ue-crown", children: [
-            "\u2654 ",
-            crown === selfId ? "this tab" : short(crown)
-          ] }) : null
-        ]
-      }
-    ),
-    open ? /* @__PURE__ */ jsxs("div", { className: "ue-ins__body", children: [
-      /* @__PURE__ */ jsxs("div", { className: "ue-ins__section", children: [
-        /* @__PURE__ */ jsx("div", { className: "ue-ins__h", children: "This tab" }),
-        /* @__PURE__ */ jsxs("div", { className: "ue-ins__row", children: [
-          /* @__PURE__ */ jsx("span", { className: "ue-ins__k", children: short(selfId) }),
-          /* @__PURE__ */ jsx("span", { className: "ue-ins__v", children: crown === selfId ? "leader" : crown ? "follower" : "no leader" })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "ue-ins__section", children: [
-        /* @__PURE__ */ jsxs("div", { className: "ue-ins__h", children: [
-          "Peers (",
-          peers.length,
-          ")"
-        ] }),
-        peers.length === 0 ? /* @__PURE__ */ jsx("div", { className: "ue-ins__empty", children: "nobody else here" }) : peers.map((peer) => /* @__PURE__ */ jsxs("div", { className: "ue-ins__row", children: [
-          /* @__PURE__ */ jsx("span", { className: "ue-ins__k", children: short(peer.id) }),
-          /* @__PURE__ */ jsx("span", { className: "ue-ins__v", children: peer.kind })
-        ] }, peer.id))
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "ue-ins__section", children: [
-        /* @__PURE__ */ jsxs("div", { className: "ue-ins__h", children: [
-          "State (",
-          entries.length,
-          ")"
-        ] }),
-        entries.length === 0 ? /* @__PURE__ */ jsx("div", { className: "ue-ins__empty", children: "no keys yet" }) : entries.map(([key, version]) => /* @__PURE__ */ jsxs("div", { className: "ue-ins__row", children: [
-          /* @__PURE__ */ jsx("span", { className: "ue-ins__k", children: key }),
-          editing?.key === key ? /* @__PURE__ */ jsx(
-            "input",
-            {
-              className: `ue-ins__edit${draftIsValid(editing.draft) ? "" : " ue-ins__v--invalid"}`,
-              value: editing.draft,
-              autoFocus: true,
-              "aria-label": `Value of ${key}`,
-              onChange: (event) => setEditing({ key, draft: event.target.value }),
-              onKeyDown: (event) => {
-                if (event.key === "Enter") commit(key, editing.draft);
-                if (event.key === "Escape") setEditing(null);
-              },
-              onBlur: () => setEditing(null),
-              "data-testid": `ue-edit-${key}`
-            }
-          ) : /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              className: "ue-ins__v ue-ins__v--editable",
-              onClick: () => setEditing({ key, draft: JSON.stringify(snapshot[key]) ?? "" }),
-              "data-testid": `ue-value-${key}`,
-              children: JSON.stringify(snapshot[key])
-            }
-          ),
-          /* @__PURE__ */ jsxs("span", { className: "ue-ins__ver", children: [
-            version[0],
-            "\xB7",
-            short(version[1])
-          ] })
-        ] }, key))
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "ue-ins__section", children: [
-        /* @__PURE__ */ jsxs("div", { className: "ue-ins__h", children: [
-          "Wires (",
-          shown.length,
-          shown.length === wires.length ? "" : ` of ${wires.length}`,
-          ")",
-          paused ? /* @__PURE__ */ jsx("span", { className: "ue-ins__paused", children: " \xB7 paused" }) : null
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "ue-ins__tools", children: [
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              className: "ue-ins__btn",
-              "aria-pressed": paused,
-              onClick: () => setPaused((value) => !value),
-              "data-testid": "ue-pause",
-              children: paused ? "resume" : "pause"
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              className: "ue-ins__btn",
-              onClick: () => {
-                setWires([]);
-                setFrames([]);
-              },
-              "data-testid": "ue-clear",
-              children: "clear"
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              className: "ue-ins__filter",
-              value: filter,
-              placeholder: "filter",
-              "aria-label": "Filter wires",
-              onChange: (event) => setFilter(event.target.value),
-              "data-testid": "ue-filter"
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: "ue-ins__tools", role: "group", "aria-label": "Scope", children: SCOPES.map((scope) => /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            className: "ue-ins__btn",
-            "aria-pressed": scopeView === scope,
-            onClick: () => setScopeView(scope),
-            "data-testid": `ue-scope-${scope}`,
-            children: scope
-          },
-          scope
-        )) }),
-        shown.length === 0 ? /* @__PURE__ */ jsx("div", { className: "ue-ins__empty", "data-testid": "ue-wires", children: wires.length === 0 ? "nothing yet" : "no matches" }) : /* @__PURE__ */ jsx("div", { className: "ue-ins__log", "data-testid": "ue-wires", children: shown.map((wire) => /* @__PURE__ */ jsxs("div", { className: "ue-ins__wire", children: [
-          /* @__PURE__ */ jsx("span", { className: `ue-ins__dir ue-ins__dir--${wire.direction}`, children: wire.direction === "out" ? "\u2192" : "\u2190" }),
-          /* @__PURE__ */ jsx("span", { className: "ue-ins__scope", children: wire.label }),
-          /* @__PURE__ */ jsx("span", { className: "ue-ins__from", children: wire.from })
-        ] }, wire.id)) })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "ue-ins__section", children: [
-        /* @__PURE__ */ jsxs("div", { className: "ue-ins__h", children: [
-          "Timeline (",
-          frames.length,
-          ")"
-        ] }),
-        frames.length === 0 ? /* @__PURE__ */ jsx("div", { className: "ue-ins__empty", children: "no state on the wire yet" }) : /* @__PURE__ */ jsx("div", { className: "ue-ins__log", children: frames.map((frame) => /* @__PURE__ */ jsxs("div", { className: "ue-ins__wire", children: [
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              className: "ue-ins__btn",
-              onClick: () => restore(frame),
-              "data-testid": `ue-restore-${String(frame.wireId)}`,
-              children: "restore"
-            }
-          ),
-          /* @__PURE__ */ jsx("span", { className: "ue-ins__scope", children: frame.label }),
-          /* @__PURE__ */ jsxs("span", { className: "ue-ins__from", children: [
-            Object.keys(frame.snapshot).length,
-            " key",
-            Object.keys(frame.snapshot).length === 1 ? "" : "s"
-          ] })
-        ] }, frame.wireId)) })
-      ] })
-    ] }) : null
-  ] });
+/** The scopes worth separating. `all` is not a scope; it is the absence of one. */
+const SCOPES = [
+	"all",
+	"state",
+	"leader",
+	"presence",
+	"channel"
+];
+/**
+* The panel's contents. Split out of `Inspector` because the Inspector is now
+* the shadow host and this is what gets portalled into it — keeping them in one
+* component would mean the hooks re-run whenever the host re-renders for
+* reasons that have nothing to do with what is on the wire.
+*/
+function Panel({ name, limit, leaseMs, position, defaultOpen }) {
+	const [open, setOpen] = useState(defaultOpen);
+	const [wires, setWires] = useState([]);
+	const [crown, setCrown] = useState(null);
+	const [paused, setPaused] = useState(false);
+	const [filter, setFilter] = useState("");
+	const [scopeView, setScopeView] = useState("all");
+	const [editing, setEditing] = useState(null);
+	const [frames, setFrames] = useState([]);
+	const nextId = useRef(0);
+	const crownAt = useRef(0);
+	const pausedRef = useRef(false);
+	useEffect(() => {
+		pausedRef.current = paused;
+	}, [paused]);
+	const peers = usePeers({ name });
+	const store = getSharedStore(name);
+	const subscribe = useCallback((onChange) => store.subscribe(onChange), [store]);
+	const snapshot = useSyncExternalStore(subscribe, () => store.getSnapshot(), () => store.getSnapshot());
+	const versions = useSyncExternalStore(subscribe, () => store.getVersions(), () => store.getVersions());
+	useEffect(() => {
+		return observeBus(name, (event) => {
+			const { wire, direction } = event;
+			if (wire.scope === "leader") {
+				if (wire.type === "resign") {
+					setCrown(null);
+					crownAt.current = 0;
+				} else if (wire.type === "claim" || wire.type === "heartbeat") {
+					setCrown(wire.clientId);
+					crownAt.current = Date.now();
+				}
+			}
+			if (pausedRef.current) return;
+			const id = nextId.current++;
+			const label = wireLabel(wire);
+			setWires((prev) => [...prev.slice(-(limit - 1)), {
+				id,
+				direction,
+				scope: wire.scope,
+				label,
+				from: short(wire.clientId)
+			}].slice(-limit));
+			if (wire.scope === "state") setFrames((prev) => [...prev, {
+				wireId: id,
+				label,
+				snapshot: { ...store.getSnapshot() }
+			}].slice(-limit));
+		});
+	}, [
+		name,
+		limit,
+		store
+	]);
+	useEffect(() => {
+		const timer = setInterval(() => {
+			if (crownAt.current && Date.now() - crownAt.current > leaseMs) {
+				setCrown(null);
+				crownAt.current = 0;
+			}
+		}, Math.max(50, Math.floor(leaseMs / 4)));
+		return () => clearInterval(timer);
+	}, [leaseMs]);
+	const selfId = store.clientId;
+	const entries = Object.entries(versions);
+	const needle = filter.trim().toLowerCase();
+	const shown = wires.filter((wire) => {
+		if (scopeView !== "all" && wire.scope !== scopeView) return false;
+		if (!needle) return true;
+		return wire.label.toLowerCase().includes(needle) || wire.from.toLowerCase().includes(needle);
+	});
+	const commit = (key, draft) => {
+		let value;
+		try {
+			value = JSON.parse(draft);
+		} catch {
+			return;
+		}
+		store.set(key, value);
+		setEditing(null);
+	};
+	const draftIsValid = (draft) => {
+		try {
+			JSON.parse(draft);
+			return true;
+		} catch {
+			return false;
+		}
+	};
+	/**
+	* Put a recorded snapshot back.
+	*
+	* Restoring is a **write**, not a rewind: every key that differs is set
+	* through the store, takes a fresh version, and goes on the wire, so peers
+	* converge on the restored value instead of quietly disagreeing with the tab
+	* that time-travelled. Nothing about history is undone — this is the honest
+	* version of the feature, and the label says "restore" rather than "undo" for
+	* that reason.
+	*
+	* Keys added after the frame was taken are left alone rather than deleted:
+	* removing a key another tab is using is a bigger claim than a devtool should
+	* make from a picture of the past.
+	*/
+	const restore = (frame) => {
+		for (const [key, value] of Object.entries(frame.snapshot)) {
+			if (Object.is(store.getSnapshot()[key], value)) continue;
+			store.set(key, value);
+		}
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: `ue-ins ue-ins--${position}`,
+		"data-testid": "ue-inspector",
+		children: [/* @__PURE__ */ jsxs("button", {
+			type: "button",
+			className: "ue-ins__bar",
+			onClick: () => setOpen((v) => !v),
+			"aria-expanded": open,
+			children: [
+				/* @__PURE__ */ jsx("span", { className: "ue-ins__dot" }),
+				/* @__PURE__ */ jsx("span", {
+					className: "ue-ins__title",
+					children: "use-everywhere"
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "ue-ins__muted",
+					children: name
+				}),
+				crown ? /* @__PURE__ */ jsxs("span", {
+					className: "ue-ins__crown",
+					"data-testid": "ue-crown",
+					children: ["♔ ", crown === selfId ? "this tab" : short(crown)]
+				}) : null
+			]
+		}), open ? /* @__PURE__ */ jsxs("div", {
+			className: "ue-ins__body",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "ue-ins__section",
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "ue-ins__h",
+						children: "This tab"
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "ue-ins__row",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "ue-ins__k",
+							children: short(selfId)
+						}), /* @__PURE__ */ jsx("span", {
+							className: "ue-ins__v",
+							children: crown === selfId ? "leader" : crown ? "follower" : "no leader"
+						})]
+					})]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "ue-ins__section",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "ue-ins__h",
+						children: [
+							"Peers (",
+							peers.length,
+							")"
+						]
+					}), peers.length === 0 ? /* @__PURE__ */ jsx("div", {
+						className: "ue-ins__empty",
+						children: "nobody else here"
+					}) : peers.map((peer) => /* @__PURE__ */ jsxs("div", {
+						className: "ue-ins__row",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "ue-ins__k",
+							children: short(peer.id)
+						}), /* @__PURE__ */ jsx("span", {
+							className: "ue-ins__v",
+							children: peer.kind
+						})]
+					}, peer.id))]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "ue-ins__section",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "ue-ins__h",
+						children: [
+							"State (",
+							entries.length,
+							")"
+						]
+					}), entries.length === 0 ? /* @__PURE__ */ jsx("div", {
+						className: "ue-ins__empty",
+						children: "no keys yet"
+					}) : entries.map(([key, version]) => /* @__PURE__ */ jsxs("div", {
+						className: "ue-ins__row",
+						children: [
+							/* @__PURE__ */ jsx("span", {
+								className: "ue-ins__k",
+								children: key
+							}),
+							editing?.key === key ? /* @__PURE__ */ jsx("input", {
+								className: `ue-ins__edit${draftIsValid(editing.draft) ? "" : " ue-ins__v--invalid"}`,
+								value: editing.draft,
+								autoFocus: true,
+								"aria-label": `Value of ${key}`,
+								onChange: (event) => setEditing({
+									key,
+									draft: event.target.value
+								}),
+								onKeyDown: (event) => {
+									if (event.key === "Enter") commit(key, editing.draft);
+									if (event.key === "Escape") setEditing(null);
+								},
+								onBlur: () => setEditing(null),
+								"data-testid": `ue-edit-${key}`
+							}) : /* @__PURE__ */ jsx("button", {
+								type: "button",
+								className: "ue-ins__v ue-ins__v--editable",
+								onClick: () => setEditing({
+									key,
+									draft: JSON.stringify(snapshot[key]) ?? ""
+								}),
+								"data-testid": `ue-value-${key}`,
+								children: JSON.stringify(snapshot[key])
+							}),
+							/* @__PURE__ */ jsxs("span", {
+								className: "ue-ins__ver",
+								children: [
+									version[0],
+									"·",
+									short(version[1])
+								]
+							})
+						]
+					}, key))]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "ue-ins__section",
+					children: [
+						/* @__PURE__ */ jsxs("div", {
+							className: "ue-ins__h",
+							children: [
+								"Wires (",
+								shown.length,
+								shown.length === wires.length ? "" : ` of ${wires.length}`,
+								")",
+								paused ? /* @__PURE__ */ jsx("span", {
+									className: "ue-ins__paused",
+									children: " · paused"
+								}) : null
+							]
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "ue-ins__tools",
+							children: [
+								/* @__PURE__ */ jsx("button", {
+									type: "button",
+									className: "ue-ins__btn",
+									"aria-pressed": paused,
+									onClick: () => setPaused((value) => !value),
+									"data-testid": "ue-pause",
+									children: paused ? "resume" : "pause"
+								}),
+								/* @__PURE__ */ jsx("button", {
+									type: "button",
+									className: "ue-ins__btn",
+									onClick: () => {
+										setWires([]);
+										setFrames([]);
+									},
+									"data-testid": "ue-clear",
+									children: "clear"
+								}),
+								/* @__PURE__ */ jsx("input", {
+									className: "ue-ins__filter",
+									value: filter,
+									placeholder: "filter",
+									"aria-label": "Filter wires",
+									onChange: (event) => setFilter(event.target.value),
+									"data-testid": "ue-filter"
+								})
+							]
+						}),
+						/* @__PURE__ */ jsx("div", {
+							className: "ue-ins__tools",
+							role: "group",
+							"aria-label": "Scope",
+							children: SCOPES.map((scope) => /* @__PURE__ */ jsx("button", {
+								type: "button",
+								className: "ue-ins__btn",
+								"aria-pressed": scopeView === scope,
+								onClick: () => setScopeView(scope),
+								"data-testid": `ue-scope-${scope}`,
+								children: scope
+							}, scope))
+						}),
+						shown.length === 0 ? /* @__PURE__ */ jsx("div", {
+							className: "ue-ins__empty",
+							"data-testid": "ue-wires",
+							children: wires.length === 0 ? "nothing yet" : "no matches"
+						}) : /* @__PURE__ */ jsx("div", {
+							className: "ue-ins__log",
+							"data-testid": "ue-wires",
+							children: shown.map((wire) => /* @__PURE__ */ jsxs("div", {
+								className: "ue-ins__wire",
+								children: [
+									/* @__PURE__ */ jsx("span", {
+										className: `ue-ins__dir ue-ins__dir--${wire.direction}`,
+										children: wire.direction === "out" ? "→" : "←"
+									}),
+									/* @__PURE__ */ jsx("span", {
+										className: "ue-ins__scope",
+										children: wire.label
+									}),
+									/* @__PURE__ */ jsx("span", {
+										className: "ue-ins__from",
+										children: wire.from
+									})
+								]
+							}, wire.id))
+						})
+					]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "ue-ins__section",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "ue-ins__h",
+						children: [
+							"Timeline (",
+							frames.length,
+							")"
+						]
+					}), frames.length === 0 ? /* @__PURE__ */ jsx("div", {
+						className: "ue-ins__empty",
+						children: "no state on the wire yet"
+					}) : /* @__PURE__ */ jsx("div", {
+						className: "ue-ins__log",
+						children: frames.map((frame) => /* @__PURE__ */ jsxs("div", {
+							className: "ue-ins__wire",
+							children: [
+								/* @__PURE__ */ jsx("button", {
+									type: "button",
+									className: "ue-ins__btn",
+									onClick: () => restore(frame),
+									"data-testid": `ue-restore-${String(frame.wireId)}`,
+									children: "restore"
+								}),
+								/* @__PURE__ */ jsx("span", {
+									className: "ue-ins__scope",
+									children: frame.label
+								}),
+								/* @__PURE__ */ jsxs("span", {
+									className: "ue-ins__from",
+									children: [
+										Object.keys(frame.snapshot).length,
+										" key",
+										Object.keys(frame.snapshot).length === 1 ? "" : "s"
+									]
+								})
+							]
+						}, frame.wireId))
+					})]
+				})
+			]
+		}) : null]
+	});
 }
-
-// src/devtools/styles.ts
-var STYLES = `
+//#endregion
+//#region src/devtools/styles.ts
+/**
+* Shipped as a <style> element inside the panel rather than a CSS file: no
+* import for consumers to wire up, no document.head mutation, and it renders
+* fine on the server. Every rule is scoped under .ue-ins.
+*/
+const STYLES = `
 .ue-ins {
   position: fixed;
   z-index: 2147483000;
@@ -398,38 +493,50 @@ button.ue-ins__v {
 .ue-ins__v--invalid { color: #f85149; }
 .ue-ins__paused { color: #d29922; }
 `;
-
-// src/devtools/inspector.tsx
-import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-function Inspector({
-  name = DEFAULT_NAME,
-  position = "bottom-right",
-  limit = 50,
-  defaultOpen = false,
-  leaseMs = 3e3
-} = {}) {
-  const [root, setRoot] = useState2(null);
-  const attach = (host) => {
-    if (!host || root) return;
-    setRoot(host.shadowRoot ?? host.attachShadow({ mode: "open" }));
-  };
-  return /* @__PURE__ */ jsx2("div", { ref: attach, "data-testid": "ue-inspector-host", children: root ? createPortal(
-    /* @__PURE__ */ jsxs2(Fragment, { children: [
-      /* @__PURE__ */ jsx2("style", { children: STYLES }),
-      /* @__PURE__ */ jsx2(
-        Panel,
-        {
-          name,
-          position,
-          limit,
-          defaultOpen,
-          leaseMs
-        }
-      )
-    ] }),
-    root
-  ) : null });
+//#endregion
+//#region src/devtools/inspector.tsx
+/**
+* A floating panel showing what this tab is saying and hearing on the bus:
+* peers, the leader, store keys with their version clocks, a live wire log in
+* both directions, and a timeline of the state each wire produced.
+*
+* It deliberately does **not** create a Leader. Under dynamic eligibility,
+* mounting one with `eligible: false` would disable candidacy for the whole
+* tab, and mounting a plain one would enrol a tab that never asked to be a
+* candidate — a devtool must not change what it measures. Instead it reads the
+* crown out of the wire log, which it already sees in both directions.
+*
+* Presence is fine to use: the bus heartbeats regardless of whether anything
+* created a Presence, so usePeers observes rather than perturbs.
+*
+* **The panel lives in a shadow root.** Its styles used to be a `<style>` tag
+* in the page, which is only ever half true: `.ue-ins` could not leak out, but
+* everything in the host document leaked *in* — a `* { box-sizing }` reset, an
+* app-wide `button { text-transform: uppercase }`, a Tailwind preflight, any
+* `!important`. A devtool that renders differently depending on whose app it is
+* mounted in is a devtool you cannot trust when it looks wrong. Inside a shadow
+* root, page CSS does not apply and the panel's own CSS cannot escape.
+*
+* A consequence worth knowing when testing an app that mounts it: the panel is
+* **not** in `document`. Reach it through `host.shadowRoot`.
+*/
+function Inspector({ name = DEFAULT_NAME, position = "bottom-right", limit = 50, defaultOpen = false, leaseMs = 3e3 } = {}) {
+	const [root, setRoot] = useState(null);
+	const attach = (host) => {
+		if (!host || root) return;
+		setRoot(host.shadowRoot ?? host.attachShadow({ mode: "open" }));
+	};
+	return /* @__PURE__ */ jsx("div", {
+		ref: attach,
+		"data-testid": "ue-inspector-host",
+		children: root ? createPortal(/* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("style", { children: STYLES }), /* @__PURE__ */ jsx(Panel, {
+			name,
+			position,
+			limit,
+			defaultOpen,
+			leaseMs
+		})] }), root) : null
+	});
 }
-export {
-  Inspector
-};
+//#endregion
+export { Inspector };