use-everywhere 1.0.0 → 1.0.1

package/dist/devtools/index.cjs

@@ -1,408 +1,397 @@
 'use client';
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/devtools/index.ts
-var devtools_exports = {};
-__export(devtools_exports, {
-  Inspector: () => Inspector
-});
-module.exports = __toCommonJS(devtools_exports);
-
-// src/devtools/inspector.tsx
-var import_react3 = require("react");
-var import_react_dom = require("react-dom");
-var import_core3 = require("@use-everywhere/core");
-
-// src/devtools/panel.tsx
-var import_react2 = require("react");
-var import_core2 = require("@use-everywhere/core");
-
-// src/registry.ts
-var import_core = require("@use-everywhere/core");
-
-// src/server-stubs.ts
-var SERVER_CLIENT_ID = "";
-var EMPTY = Object.freeze({});
-var NO_PEERS = Object.freeze([]);
-var noop = () => {
-};
-var unsubscribe = () => noop;
-var INERT = Object.freeze({
-  clientId: SERVER_CLIENT_ID,
-  // store
-  //
-  // Resolved, unlike the leader's `waitForLeadership` below. A server render
-  // has nothing to restore and is documented to render defaults, so `await
-  // store.hydrated` must proceed — a never-settling promise would hang the
-  // render rather than describe it honestly.
-  hydrated: Promise.resolve(),
-  state: EMPTY,
-  getVersions: () => EMPTY,
-  set: noop,
-  subscribeKey: unsubscribe,
-  registerKey: noop,
-  // store + leader share getSnapshot; presence has getPeers
-  getSnapshot: () => EMPTY,
-  getPeers: () => NO_PEERS,
-  // presence
-  setMetadata: noop,
-  // leader
-  resign: noop,
-  setEligible: noop,
-  // common
-  subscribe: unsubscribe,
-  close: noop
-});
-var createServerStore = () => INERT;
-var createServerPresence = () => INERT;
-var NO_LEADER = Object.freeze({ leaderId: null, isLeader: false });
-
-// src/registry.ts
-var stores = /* @__PURE__ */ new Map();
-var presences = /* @__PURE__ */ new Map();
-var storeConfig = /* @__PURE__ */ new Map();
-var isServer = () => typeof window === "undefined";
-var scopeOptions = {
-  everywhere: {},
-  tabs: { accept: (meta) => meta.kind !== "worker" },
-  tab: { transport: () => new import_core.NoopTransport() }
-};
-function getSharedStore(name = import_core.DEFAULT_NAME, scope = "everywhere") {
-  return getStore(name, scope);
-}
-function getStore(name, scope = "everywhere") {
-  const key = `${scope} ${name}`;
-  let store = stores.get(key);
-  if (!store) {
-    store = isServer() ? createServerStore() : (0, import_core.createSharedStore)(name, {}, { ...scopeOptions[scope], ...storeConfig.get(key) });
-    stores.set(key, store);
-  }
-  return store;
-}
-function getPresence(name, includeSelf = false) {
-  const key = includeSelf ? `self ${name}` : name;
-  let presence = presences.get(key);
-  if (!presence) {
-    presence = isServer() ? createServerPresence() : (0, import_core.createPresence)(name, { includeSelf });
-    presences.set(key, presence);
-  }
-  return presence;
-}
-
-// src/use-peers.ts
-var import_react = require("react");
-var NO_PEERS2 = Object.freeze([]);
-function usePeers(options) {
-  const presence = getPresence(options?.name ?? import_core.DEFAULT_NAME, options?.includeSelf ?? false);
-  return (0, import_react.useSyncExternalStore)(
-    (0, import_react.useCallback)((onChange) => presence.subscribe(onChange), [presence]),
-    () => presence.getPeers(),
-    () => NO_PEERS2
-  );
-}
-
-// src/devtools/panel.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
-var short = (id) => id.slice(0, 6);
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_use_peers = require("../use-peers-RhIB77TV.cjs");
+let react = require("react");
+let _use_everywhere_core = require("@use-everywhere/core");
+let react_dom = require("react-dom");
+let react_jsx_runtime = require("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] = (0, import_react2.useState)(defaultOpen);
-  const [wires, setWires] = (0, import_react2.useState)([]);
-  const [crown, setCrown] = (0, import_react2.useState)(null);
-  const [paused, setPaused] = (0, import_react2.useState)(false);
-  const [filter, setFilter] = (0, import_react2.useState)("");
-  const [scopeView, setScopeView] = (0, import_react2.useState)("all");
-  const [editing, setEditing] = (0, import_react2.useState)(null);
-  const [frames, setFrames] = (0, import_react2.useState)([]);
-  const nextId = (0, import_react2.useRef)(0);
-  const crownAt = (0, import_react2.useRef)(0);
-  const pausedRef = (0, import_react2.useRef)(false);
-  (0, import_react2.useEffect)(() => {
-    pausedRef.current = paused;
-  }, [paused]);
-  const peers = usePeers({ name });
-  const store = getSharedStore(name);
-  const subscribe = (0, import_react2.useCallback)((onChange) => store.subscribe(onChange), [store]);
-  const snapshot = (0, import_react2.useSyncExternalStore)(
-    subscribe,
-    () => store.getSnapshot(),
-    () => store.getSnapshot()
-  );
-  const versions = (0, import_react2.useSyncExternalStore)(
-    subscribe,
-    () => store.getVersions(),
-    () => store.getVersions()
-  );
-  (0, import_react2.useEffect)(() => {
-    return (0, import_core2.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]);
-  (0, import_react2.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__ */ (0, import_jsx_runtime.jsxs)("div", { className: `ue-ins ue-ins--${position}`, "data-testid": "ue-inspector", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-      "button",
-      {
-        type: "button",
-        className: "ue-ins__bar",
-        onClick: () => setOpen((v) => !v),
-        "aria-expanded": open,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "ue-ins__dot" }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "ue-ins__title", children: "use-everywhere" }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "ue-ins__muted", children: name }),
-          crown ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "ue-ins__crown", "data-testid": "ue-crown", children: [
-            "\u2654 ",
-            crown === selfId ? "this tab" : short(crown)
-          ] }) : null
-        ]
-      }
-    ),
-    open ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "ue-ins__body", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "ue-ins__section", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "ue-ins__h", children: "This tab" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "ue-ins__row", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "ue-ins__k", children: short(selfId) }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "ue-ins__v", children: crown === selfId ? "leader" : crown ? "follower" : "no leader" })
-        ] })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "ue-ins__section", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "ue-ins__h", children: [
-          "Peers (",
-          peers.length,
-          ")"
-        ] }),
-        peers.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "ue-ins__empty", children: "nobody else here" }) : peers.map((peer) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "ue-ins__row", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "ue-ins__k", children: short(peer.id) }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "ue-ins__v", children: peer.kind })
-        ] }, peer.id))
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "ue-ins__section", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "ue-ins__h", children: [
-          "State (",
-          entries.length,
-          ")"
-        ] }),
-        entries.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "ue-ins__empty", children: "no keys yet" }) : entries.map(([key, version]) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "ue-ins__row", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "ue-ins__k", children: key }),
-          editing?.key === key ? /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsxs)("span", { className: "ue-ins__ver", children: [
-            version[0],
-            "\xB7",
-            short(version[1])
-          ] })
-        ] }, key))
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "ue-ins__section", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "ue-ins__h", children: [
-          "Wires (",
-          shown.length,
-          shown.length === wires.length ? "" : ` of ${wires.length}`,
-          ")",
-          paused ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "ue-ins__paused", children: " \xB7 paused" }) : null
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "ue-ins__tools", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            "button",
-            {
-              type: "button",
-              className: "ue-ins__btn",
-              "aria-pressed": paused,
-              onClick: () => setPaused((value) => !value),
-              "data-testid": "ue-pause",
-              children: paused ? "resume" : "pause"
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            "button",
-            {
-              type: "button",
-              className: "ue-ins__btn",
-              onClick: () => {
-                setWires([]);
-                setFrames([]);
-              },
-              "data-testid": "ue-clear",
-              children: "clear"
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("div", { className: "ue-ins__tools", role: "group", "aria-label": "Scope", children: SCOPES.map((scope) => /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("div", { className: "ue-ins__empty", "data-testid": "ue-wires", children: wires.length === 0 ? "nothing yet" : "no matches" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "ue-ins__log", "data-testid": "ue-wires", children: shown.map((wire) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "ue-ins__wire", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: `ue-ins__dir ue-ins__dir--${wire.direction}`, children: wire.direction === "out" ? "\u2192" : "\u2190" }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "ue-ins__scope", children: wire.label }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "ue-ins__from", children: wire.from })
-        ] }, wire.id)) })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "ue-ins__section", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "ue-ins__h", children: [
-          "Timeline (",
-          frames.length,
-          ")"
-        ] }),
-        frames.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "ue-ins__empty", children: "no state on the wire yet" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "ue-ins__log", children: frames.map((frame) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "ue-ins__wire", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            "button",
-            {
-              type: "button",
-              className: "ue-ins__btn",
-              onClick: () => restore(frame),
-              "data-testid": `ue-restore-${String(frame.wireId)}`,
-              children: "restore"
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "ue-ins__scope", children: frame.label }),
-          /* @__PURE__ */ (0, import_jsx_runtime.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] = (0, react.useState)(defaultOpen);
+	const [wires, setWires] = (0, react.useState)([]);
+	const [crown, setCrown] = (0, react.useState)(null);
+	const [paused, setPaused] = (0, react.useState)(false);
+	const [filter, setFilter] = (0, react.useState)("");
+	const [scopeView, setScopeView] = (0, react.useState)("all");
+	const [editing, setEditing] = (0, react.useState)(null);
+	const [frames, setFrames] = (0, react.useState)([]);
+	const nextId = (0, react.useRef)(0);
+	const crownAt = (0, react.useRef)(0);
+	const pausedRef = (0, react.useRef)(false);
+	(0, react.useEffect)(() => {
+		pausedRef.current = paused;
+	}, [paused]);
+	const peers = require_use_peers.usePeers({ name });
+	const store = require_use_peers.getSharedStore(name);
+	const subscribe = (0, react.useCallback)((onChange) => store.subscribe(onChange), [store]);
+	const snapshot = (0, react.useSyncExternalStore)(subscribe, () => store.getSnapshot(), () => store.getSnapshot());
+	const versions = (0, react.useSyncExternalStore)(subscribe, () => store.getVersions(), () => store.getVersions());
+	(0, react.useEffect)(() => {
+		return (0, _use_everywhere_core.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
+	]);
+	(0, react.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: `ue-ins ue-ins--${position}`,
+		"data-testid": "ue-inspector",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+			type: "button",
+			className: "ue-ins__bar",
+			onClick: () => setOpen((v) => !v),
+			"aria-expanded": open,
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "ue-ins__dot" }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "ue-ins__title",
+					children: "use-everywhere"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "ue-ins__muted",
+					children: name
+				}),
+				crown ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+					className: "ue-ins__crown",
+					"data-testid": "ue-crown",
+					children: ["♔ ", crown === selfId ? "this tab" : short(crown)]
+				}) : null
+			]
+		}), open ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "ue-ins__body",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "ue-ins__section",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "ue-ins__h",
+						children: "This tab"
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "ue-ins__row",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "ue-ins__k",
+							children: short(selfId)
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "ue-ins__v",
+							children: crown === selfId ? "leader" : crown ? "follower" : "no leader"
+						})]
+					})]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "ue-ins__section",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "ue-ins__h",
+						children: [
+							"Peers (",
+							peers.length,
+							")"
+						]
+					}), peers.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "ue-ins__empty",
+						children: "nobody else here"
+					}) : peers.map((peer) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "ue-ins__row",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "ue-ins__k",
+							children: short(peer.id)
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "ue-ins__v",
+							children: peer.kind
+						})]
+					}, peer.id))]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "ue-ins__section",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "ue-ins__h",
+						children: [
+							"State (",
+							entries.length,
+							")"
+						]
+					}), entries.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "ue-ins__empty",
+						children: "no keys yet"
+					}) : entries.map(([key, version]) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "ue-ins__row",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "ue-ins__k",
+								children: key
+							}),
+							editing?.key === key ? /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("span", {
+								className: "ue-ins__ver",
+								children: [
+									version[0],
+									"·",
+									short(version[1])
+								]
+							})
+						]
+					}, key))]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "ue-ins__section",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "ue-ins__h",
+							children: [
+								"Wires (",
+								shown.length,
+								shown.length === wires.length ? "" : ` of ${wires.length}`,
+								")",
+								paused ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "ue-ins__paused",
+									children: " · paused"
+								}) : null
+							]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "ue-ins__tools",
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									type: "button",
+									className: "ue-ins__btn",
+									"aria-pressed": paused,
+									onClick: () => setPaused((value) => !value),
+									"data-testid": "ue-pause",
+									children: paused ? "resume" : "pause"
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									type: "button",
+									className: "ue-ins__btn",
+									onClick: () => {
+										setWires([]);
+										setFrames([]);
+									},
+									"data-testid": "ue-clear",
+									children: "clear"
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "ue-ins__tools",
+							role: "group",
+							"aria-label": "Scope",
+							children: SCOPES.map((scope) => /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "ue-ins__empty",
+							"data-testid": "ue-wires",
+							children: wires.length === 0 ? "nothing yet" : "no matches"
+						}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "ue-ins__log",
+							"data-testid": "ue-wires",
+							children: shown.map((wire) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "ue-ins__wire",
+								children: [
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: `ue-ins__dir ue-ins__dir--${wire.direction}`,
+										children: wire.direction === "out" ? "→" : "←"
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "ue-ins__scope",
+										children: wire.label
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "ue-ins__from",
+										children: wire.from
+									})
+								]
+							}, wire.id))
+						})
+					]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "ue-ins__section",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "ue-ins__h",
+						children: [
+							"Timeline (",
+							frames.length,
+							")"
+						]
+					}), frames.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "ue-ins__empty",
+						children: "no state on the wire yet"
+					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "ue-ins__log",
+						children: frames.map((frame) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "ue-ins__wire",
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									type: "button",
+									className: "ue-ins__btn",
+									onClick: () => restore(frame),
+									"data-testid": `ue-restore-${String(frame.wireId)}`,
+									children: "restore"
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "ue-ins__scope",
+									children: frame.label
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.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;
@@ -505,39 +494,50 @@ button.ue-ins__v {
 .ue-ins__v--invalid { color: #f85149; }
 .ue-ins__paused { color: #d29922; }
 `;
-
-// src/devtools/inspector.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-function Inspector({
-  name = import_core3.DEFAULT_NAME,
-  position = "bottom-right",
-  limit = 50,
-  defaultOpen = false,
-  leaseMs = 3e3
-} = {}) {
-  const [root, setRoot] = (0, import_react3.useState)(null);
-  const attach = (host) => {
-    if (!host || root) return;
-    setRoot(host.shadowRoot ?? host.attachShadow({ mode: "open" }));
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { ref: attach, "data-testid": "ue-inspector-host", children: root ? (0, import_react_dom.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("style", { children: STYLES }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-        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 = _use_everywhere_core.DEFAULT_NAME, position = "bottom-right", limit = 50, defaultOpen = false, leaseMs = 3e3 } = {}) {
+	const [root, setRoot] = (0, react.useState)(null);
+	const attach = (host) => {
+		if (!host || root) return;
+		setRoot(host.shadowRoot ?? host.attachShadow({ mode: "open" }));
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref: attach,
+		"data-testid": "ue-inspector-host",
+		children: root ? (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("style", { children: STYLES }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Panel, {
+			name,
+			position,
+			limit,
+			defaultOpen,
+			leaseMs
+		})] }), root) : null
+	});
 }
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  Inspector
-});
+//#endregion
+exports.Inspector = Inspector;