use-everywhere 0.8.0 → 0.10.0

package/README.md

@@ -142,13 +142,13 @@ per-connection nonce, and source window.
 - Values must survive structured clone (no functions, DOM nodes); state lives
   as long as at least one context holds it — nothing is persisted.
 - Testing is first-class: inject a `MemoryHub` transport to simulate many tabs
-  in one test. See the [testing guide](https://rxova.github.io/use-everywhere/guides/testing).
+  in one test. See the [testing guide](https://rxova.org/packages/use-everywhere/guides/testing).
 
 This package re-exports the full framework-agnostic surface of
 [`@use-everywhere/core`](https://www.npmjs.com/package/@use-everywhere/core),
 so you never need to install core directly.
 
-📖 **[Documentation](https://rxova.github.io/use-everywhere/)** — mental
+📖 **[Documentation](https://rxova.org/packages/use-everywhere/)** — mental
 model, how sync works, security model, recipes, and generated API reference.
 Source and demo app: [github.com/rxova/use-everywhere](https://github.com/rxova/use-everywhere)
 

package/dist/{chunk-75TICQ7E.js → chunk-R7PBPLF7.js}

@@ -18,10 +18,17 @@ try {
 } catch {
 }
 var warned = /* @__PURE__ */ new Set();
-function devWarn(message) {
-  if (!inDev || warned.has(message)) return;
-  warned.add(message);
-  console.warn(message);
+var DOCS = "https://rxova.org/packages/use-everywhere/errors";
+function diagnostic(code, message) {
+  return `[use-everywhere] ${code}: ${message}
+  \u2192 ${DOCS}/#${code.toLowerCase()}`;
+}
+function devWarn(code, message) {
+  if (!inDev) return;
+  const line = diagnostic(code, message);
+  if (warned.has(line)) return;
+  warned.add(line);
+  console.warn(line);
 }
 var seenInitials = /* @__PURE__ */ new Map();
 function warnOnInitialMismatch(storeName, key, initial) {
@@ -35,7 +42,8 @@ function warnOnInitialMismatch(storeName, key, initial) {
   const comparable = (v) => v === null || typeof v !== "object";
   if (comparable(first) && comparable(initial) && !Object.is(first, initial)) {
     devWarn(
-      `[use-everywhere] useSharedState('${key}') was called with different initial values (${String(first)} and ${String(initial)}). The first registration wins, so the second is ignored. Define the default once \u2014 defineStore, or a shared constant.`
+      "UE2001",
+      `useSharedState('${key}') was called with different initial values (${String(first)} and ${String(initial)}). The first registration wins, so the second is ignored. Define the default once \u2014 defineStore, or a shared constant.`
     );
   }
 }
@@ -118,7 +126,8 @@ function configureStore(name, scope, options) {
     if (configSignature(storeConfig.get(key)) === configSignature(options)) return;
     if (process.env.NODE_ENV !== "production") {
       devWarn(
-        `[use-everywhere] defineStore('${name}') ran after that store was already created, with different options. The live store keeps the configuration it was built with. Move defineStore to module scope, before any component reads the store.`
+        "UE2002",
+        `defineStore('${name}') ran after that store was already created, with different options. The live store keeps the configuration it was built with. Move defineStore to module scope, before any component reads the store.`
       );
     }
     return;
@@ -162,7 +171,8 @@ function warnOnLeaderOptionConflict(name, options) {
     if (requested !== void 0 && requested !== first?.[key]) {
       if (process.env.NODE_ENV !== "production") {
         devWarn(
-          `[use-everywhere] leader "${name}": ${key} ignored \u2014 the first useLeader/getLeader call fixes the election timings for this tab.`
+          "UE2003",
+          `leader "${name}": ${key} ignored \u2014 the first useLeader/getLeader call fixes the election timings for this tab.`
         );
       }
     }
@@ -176,7 +186,8 @@ function configureChannel(name, options) {
     if (before.join() === after.join()) return;
     if (process.env.NODE_ENV !== "production") {
       devWarn(
-        `[use-everywhere] defineChannel('${name}') ran after that channel was already created, with different options. The live channel keeps the configuration it was built with. Move defineChannel to module scope, before any component sends or receives on it.`
+        "UE2004",
+        `defineChannel('${name}') ran after that channel was already created, with different options. The live channel keeps the configuration it was built with. Move defineChannel to module scope, before any component sends or receives on it.`
       );
     }
     return;

package/dist/devtools/index.cjs

@@ -26,6 +26,11 @@ __export(devtools_exports, {
 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");
 
@@ -113,85 +118,34 @@ function usePeers(options) {
   );
 }
 
-// src/devtools/styles.ts
-var STYLES = `
-.ue-ins {
-  position: fixed;
-  z-index: 2147483000;
-  font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace;
-  color: #e6edf3;
-  background: #0d1117;
-  border: 1px solid #30363d;
-  border-radius: 8px;
-  box-shadow: 0 8px 32px rgb(0 0 0 / 0.4);
-  max-width: min(420px, calc(100vw - 24px));
-  overflow: hidden;
-}
-.ue-ins--bottom-right { bottom: 12px; right: 12px; }
-.ue-ins--bottom-left  { bottom: 12px; left: 12px; }
-.ue-ins--top-right    { top: 12px; right: 12px; }
-.ue-ins--top-left     { top: 12px; left: 12px; }
-
-.ue-ins__bar {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  width: 100%;
-  padding: 7px 10px;
-  background: #161b22;
-  border: 0;
-  color: inherit;
-  font: inherit;
-  cursor: pointer;
-  text-align: left;
-}
-.ue-ins__dot { width: 7px; height: 7px; border-radius: 50%; background: #3fb950; flex: none; }
-.ue-ins__title { font-weight: 600; }
-.ue-ins__muted { color: #8b949e; }
-.ue-ins__crown { margin-left: auto; color: #d29922; }
-
-.ue-ins__body { max-height: 60vh; overflow-y: auto; }
-.ue-ins__section { border-top: 1px solid #21262d; padding: 8px 10px; }
-.ue-ins__h {
-  color: #8b949e;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  font-size: 10px;
-  margin-bottom: 5px;
-}
-.ue-ins__row { display: flex; gap: 8px; padding: 1px 0; }
-.ue-ins__k { color: #79c0ff; flex: none; }
-.ue-ins__v { color: #e6edf3; overflow-wrap: anywhere; }
-.ue-ins__ver { color: #6e7681; margin-left: auto; flex: none; }
-.ue-ins__empty { color: #6e7681; }
-
-.ue-ins__log { display: flex; flex-direction: column-reverse; max-height: 190px; overflow-y: auto; }
-.ue-ins__wire { display: flex; gap: 7px; padding: 1px 0; white-space: nowrap; }
-.ue-ins__dir { flex: none; width: 9px; }
-.ue-ins__dir--out { color: #d29922; }
-.ue-ins__dir--in { color: #3fb950; }
-.ue-ins__scope { color: #e6edf3; }
-.ue-ins__from { color: #6e7681; margin-left: auto; }
-`;
-
-// src/devtools/inspector.tsx
+// src/devtools/panel.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var short = (id) => id.slice(0, 6);
 function wireLabel(wire) {
   return `${wire.scope}/${wire.type}`;
 }
-function Inspector({
-  name = import_core2.DEFAULT_NAME,
-  position = "bottom-right",
-  limit = 50,
-  defaultOpen = false,
-  leaseMs = 3e3
-} = {}) {
+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]);
@@ -217,19 +171,22 @@ function Inspector({
           crownAt.current = Date.now();
         }
       }
+      if (pausedRef.current) return;
+      const id = nextId.current++;
+      const label = wireLabel(wire);
       setWires(
         (prev) => [
           ...prev.slice(-(limit - 1)),
-          {
-            id: nextId.current++,
-            direction,
-            label: wireLabel(wire),
-            from: short(wire.clientId)
-          }
+          { 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]);
+  }, [name, limit, store]);
   (0, import_react2.useEffect)(() => {
     const timer = setInterval(
       () => {
@@ -238,17 +195,43 @@ function Inspector({
           crownAt.current = 0;
         }
       },
-      // Quarter of the lease, so a vacated crown clears well within it. The
-      // floor is low enough that a short lease still works rather than being
-      // silently rounded up to something coarser than the lease itself.
       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.jsx)("style", { children: STYLES }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
       "button",
       {
@@ -294,7 +277,31 @@ function Inspector({
         ] }),
         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 }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "ue-ins__v", children: JSON.stringify(snapshot[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",
@@ -305,18 +312,231 @@ function Inspector({
       /* @__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 (",
-          wires.length,
-          ")"
+          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"
+            }
+          )
         ] }),
-        wires.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "ue-ins__empty", children: "nothing yet" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "ue-ins__log", children: wires.map((wire) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "ue-ins__wire", children: [
+        /* @__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
   ] });
 }
+
+// src/devtools/styles.ts
+var STYLES = `
+.ue-ins {
+  position: fixed;
+  z-index: 2147483000;
+  font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace;
+  color: #e6edf3;
+  background: #0d1117;
+  border: 1px solid #30363d;
+  border-radius: 8px;
+  box-shadow: 0 8px 32px rgb(0 0 0 / 0.4);
+  max-width: min(420px, calc(100vw - 24px));
+  overflow: hidden;
+}
+.ue-ins--bottom-right { bottom: 12px; right: 12px; }
+.ue-ins--bottom-left  { bottom: 12px; left: 12px; }
+.ue-ins--top-right    { top: 12px; right: 12px; }
+.ue-ins--top-left     { top: 12px; left: 12px; }
+
+.ue-ins__bar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 7px 10px;
+  background: #161b22;
+  border: 0;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+  text-align: left;
+}
+.ue-ins__dot { width: 7px; height: 7px; border-radius: 50%; background: #3fb950; flex: none; }
+.ue-ins__title { font-weight: 600; }
+.ue-ins__muted { color: #8b949e; }
+.ue-ins__crown { margin-left: auto; color: #d29922; }
+
+.ue-ins__body { max-height: 60vh; overflow-y: auto; }
+.ue-ins__section { border-top: 1px solid #21262d; padding: 8px 10px; }
+.ue-ins__h {
+  color: #8b949e;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  font-size: 10px;
+  margin-bottom: 5px;
+}
+.ue-ins__row { display: flex; gap: 8px; padding: 1px 0; }
+.ue-ins__k { color: #79c0ff; flex: none; }
+.ue-ins__v { color: #e6edf3; overflow-wrap: anywhere; }
+button.ue-ins__v {
+  background: none;
+  border: 0;
+  padding: 0;
+  font: inherit;
+  text-align: left;
+}
+.ue-ins__ver { color: #6e7681; margin-left: auto; flex: none; }
+.ue-ins__empty { color: #6e7681; }
+
+.ue-ins__log { display: flex; flex-direction: column-reverse; max-height: 190px; overflow-y: auto; }
+.ue-ins__wire { display: flex; gap: 7px; padding: 1px 0; white-space: nowrap; }
+.ue-ins__dir { flex: none; width: 9px; }
+.ue-ins__dir--out { color: #d29922; }
+.ue-ins__dir--in { color: #3fb950; }
+.ue-ins__scope { color: #e6edf3; }
+.ue-ins__from { color: #6e7681; margin-left: auto; }
+
+.ue-ins__tools { display: flex; gap: 6px; align-items: center; margin-bottom: 5px; }
+.ue-ins__btn {
+  background: #21262d;
+  border: 1px solid #30363d;
+  border-radius: 5px;
+  color: #c9d1d9;
+  font: inherit;
+  font-size: 10px;
+  padding: 1px 7px;
+  cursor: pointer;
+}
+.ue-ins__btn[aria-pressed='true'] { background: #1f6feb; border-color: #1f6feb; color: #fff; }
+.ue-ins__filter {
+  flex: 1;
+  min-width: 0;
+  background: #0d1117;
+  border: 1px solid #30363d;
+  border-radius: 5px;
+  color: #c9d1d9;
+  font: inherit;
+  font-size: 10px;
+  padding: 1px 6px;
+}
+.ue-ins__edit {
+  flex: 1;
+  min-width: 0;
+  background: #0d1117;
+  border: 1px solid #1f6feb;
+  border-radius: 4px;
+  color: #e6edf3;
+  font: inherit;
+  padding: 0 4px;
+}
+.ue-ins__v--editable { cursor: text; text-decoration: underline dotted #30363d; }
+.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 });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Inspector

package/dist/devtools/index.d.cts

@@ -18,8 +18,8 @@ interface InspectorProps {
 
 /**
  * A floating panel showing what this tab is saying and hearing on the bus:
- * peers, the leader, store keys with their version clocks, and a live wire log
- * in both directions.
+ * 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
@@ -29,6 +29,17 @@ interface InspectorProps {
  *
  * 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`.
  */
 declare function Inspector({ name, position, limit, defaultOpen, leaseMs, }?: InspectorProps): react.JSX.Element;
 

package/dist/devtools/index.d.ts

@@ -18,8 +18,8 @@ interface InspectorProps {
 
 /**
  * A floating panel showing what this tab is saying and hearing on the bus:
- * peers, the leader, store keys with their version clocks, and a live wire log
- * in both directions.
+ * 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
@@ -29,6 +29,17 @@ interface InspectorProps {
  *
  * 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`.
  */
 declare function Inspector({ name, position, limit, defaultOpen, leaseMs, }?: InspectorProps): react.JSX.Element;
 

package/dist/devtools/index.js

@@ -2,91 +2,43 @@
 import {
   getSharedStore,
   usePeers
-} from "../chunk-75TICQ7E.js";
+} from "../chunk-R7PBPLF7.js";
 
 // src/devtools/inspector.tsx
-import { useCallback, useEffect, useRef, useState, useSyncExternalStore } from "react";
-import { DEFAULT_NAME, observeBus } from "@use-everywhere/core";
-
-// src/devtools/styles.ts
-var STYLES = `
-.ue-ins {
-  position: fixed;
-  z-index: 2147483000;
-  font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace;
-  color: #e6edf3;
-  background: #0d1117;
-  border: 1px solid #30363d;
-  border-radius: 8px;
-  box-shadow: 0 8px 32px rgb(0 0 0 / 0.4);
-  max-width: min(420px, calc(100vw - 24px));
-  overflow: hidden;
-}
-.ue-ins--bottom-right { bottom: 12px; right: 12px; }
-.ue-ins--bottom-left  { bottom: 12px; left: 12px; }
-.ue-ins--top-right    { top: 12px; right: 12px; }
-.ue-ins--top-left     { top: 12px; left: 12px; }
-
-.ue-ins__bar {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  width: 100%;
-  padding: 7px 10px;
-  background: #161b22;
-  border: 0;
-  color: inherit;
-  font: inherit;
-  cursor: pointer;
-  text-align: left;
-}
-.ue-ins__dot { width: 7px; height: 7px; border-radius: 50%; background: #3fb950; flex: none; }
-.ue-ins__title { font-weight: 600; }
-.ue-ins__muted { color: #8b949e; }
-.ue-ins__crown { margin-left: auto; color: #d29922; }
+import { useState as useState2 } from "react";
+import { createPortal } from "react-dom";
+import { DEFAULT_NAME } from "@use-everywhere/core";
 
-.ue-ins__body { max-height: 60vh; overflow-y: auto; }
-.ue-ins__section { border-top: 1px solid #21262d; padding: 8px 10px; }
-.ue-ins__h {
-  color: #8b949e;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  font-size: 10px;
-  margin-bottom: 5px;
-}
-.ue-ins__row { display: flex; gap: 8px; padding: 1px 0; }
-.ue-ins__k { color: #79c0ff; flex: none; }
-.ue-ins__v { color: #e6edf3; overflow-wrap: anywhere; }
-.ue-ins__ver { color: #6e7681; margin-left: auto; flex: none; }
-.ue-ins__empty { color: #6e7681; }
-
-.ue-ins__log { display: flex; flex-direction: column-reverse; max-height: 190px; overflow-y: auto; }
-.ue-ins__wire { display: flex; gap: 7px; padding: 1px 0; white-space: nowrap; }
-.ue-ins__dir { flex: none; width: 9px; }
-.ue-ins__dir--out { color: #d29922; }
-.ue-ins__dir--in { color: #3fb950; }
-.ue-ins__scope { color: #e6edf3; }
-.ue-ins__from { color: #6e7681; margin-left: auto; }
-`;
-
-// src/devtools/inspector.tsx
+// src/devtools/panel.tsx
+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);
 function wireLabel(wire) {
   return `${wire.scope}/${wire.type}`;
 }
-function Inspector({
-  name = DEFAULT_NAME,
-  position = "bottom-right",
-  limit = 50,
-  defaultOpen = false,
-  leaseMs = 3e3
-} = {}) {
+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]);
@@ -112,19 +64,22 @@ function Inspector({
           crownAt.current = Date.now();
         }
       }
+      if (pausedRef.current) return;
+      const id = nextId.current++;
+      const label = wireLabel(wire);
       setWires(
         (prev) => [
           ...prev.slice(-(limit - 1)),
-          {
-            id: nextId.current++,
-            direction,
-            label: wireLabel(wire),
-            from: short(wire.clientId)
-          }
+          { 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]);
+  }, [name, limit, store]);
   useEffect(() => {
     const timer = setInterval(
       () => {
@@ -133,17 +88,43 @@ function Inspector({
           crownAt.current = 0;
         }
       },
-      // Quarter of the lease, so a vacated crown clears well within it. The
-      // floor is low enough that a short lease still works rather than being
-      // silently rounded up to something coarser than the lease itself.
       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__ */ jsx("style", { children: STYLES }),
     /* @__PURE__ */ jsxs(
       "button",
       {
@@ -189,7 +170,31 @@ function Inspector({
         ] }),
         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 }),
-          /* @__PURE__ */ jsx("span", { className: "ue-ins__v", children: JSON.stringify(snapshot[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",
@@ -200,18 +205,231 @@ function Inspector({
       /* @__PURE__ */ jsxs("div", { className: "ue-ins__section", children: [
         /* @__PURE__ */ jsxs("div", { className: "ue-ins__h", children: [
           "Wires (",
-          wires.length,
-          ")"
+          shown.length,
+          shown.length === wires.length ? "" : ` of ${wires.length}`,
+          ")",
+          paused ? /* @__PURE__ */ jsx("span", { className: "ue-ins__paused", children: " \xB7 paused" }) : null
         ] }),
-        wires.length === 0 ? /* @__PURE__ */ jsx("div", { className: "ue-ins__empty", children: "nothing yet" }) : /* @__PURE__ */ jsx("div", { className: "ue-ins__log", children: wires.map((wire) => /* @__PURE__ */ jsxs("div", { className: "ue-ins__wire", children: [
+        /* @__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
   ] });
 }
+
+// src/devtools/styles.ts
+var STYLES = `
+.ue-ins {
+  position: fixed;
+  z-index: 2147483000;
+  font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace;
+  color: #e6edf3;
+  background: #0d1117;
+  border: 1px solid #30363d;
+  border-radius: 8px;
+  box-shadow: 0 8px 32px rgb(0 0 0 / 0.4);
+  max-width: min(420px, calc(100vw - 24px));
+  overflow: hidden;
+}
+.ue-ins--bottom-right { bottom: 12px; right: 12px; }
+.ue-ins--bottom-left  { bottom: 12px; left: 12px; }
+.ue-ins--top-right    { top: 12px; right: 12px; }
+.ue-ins--top-left     { top: 12px; left: 12px; }
+
+.ue-ins__bar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 7px 10px;
+  background: #161b22;
+  border: 0;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+  text-align: left;
+}
+.ue-ins__dot { width: 7px; height: 7px; border-radius: 50%; background: #3fb950; flex: none; }
+.ue-ins__title { font-weight: 600; }
+.ue-ins__muted { color: #8b949e; }
+.ue-ins__crown { margin-left: auto; color: #d29922; }
+
+.ue-ins__body { max-height: 60vh; overflow-y: auto; }
+.ue-ins__section { border-top: 1px solid #21262d; padding: 8px 10px; }
+.ue-ins__h {
+  color: #8b949e;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  font-size: 10px;
+  margin-bottom: 5px;
+}
+.ue-ins__row { display: flex; gap: 8px; padding: 1px 0; }
+.ue-ins__k { color: #79c0ff; flex: none; }
+.ue-ins__v { color: #e6edf3; overflow-wrap: anywhere; }
+button.ue-ins__v {
+  background: none;
+  border: 0;
+  padding: 0;
+  font: inherit;
+  text-align: left;
+}
+.ue-ins__ver { color: #6e7681; margin-left: auto; flex: none; }
+.ue-ins__empty { color: #6e7681; }
+
+.ue-ins__log { display: flex; flex-direction: column-reverse; max-height: 190px; overflow-y: auto; }
+.ue-ins__wire { display: flex; gap: 7px; padding: 1px 0; white-space: nowrap; }
+.ue-ins__dir { flex: none; width: 9px; }
+.ue-ins__dir--out { color: #d29922; }
+.ue-ins__dir--in { color: #3fb950; }
+.ue-ins__scope { color: #e6edf3; }
+.ue-ins__from { color: #6e7681; margin-left: auto; }
+
+.ue-ins__tools { display: flex; gap: 6px; align-items: center; margin-bottom: 5px; }
+.ue-ins__btn {
+  background: #21262d;
+  border: 1px solid #30363d;
+  border-radius: 5px;
+  color: #c9d1d9;
+  font: inherit;
+  font-size: 10px;
+  padding: 1px 7px;
+  cursor: pointer;
+}
+.ue-ins__btn[aria-pressed='true'] { background: #1f6feb; border-color: #1f6feb; color: #fff; }
+.ue-ins__filter {
+  flex: 1;
+  min-width: 0;
+  background: #0d1117;
+  border: 1px solid #30363d;
+  border-radius: 5px;
+  color: #c9d1d9;
+  font: inherit;
+  font-size: 10px;
+  padding: 1px 6px;
+}
+.ue-ins__edit {
+  flex: 1;
+  min-width: 0;
+  background: #0d1117;
+  border: 1px solid #1f6feb;
+  border-radius: 4px;
+  color: #e6edf3;
+  font: inherit;
+  padding: 0 4px;
+}
+.ue-ins__v--editable { cursor: text; text-decoration: underline dotted #30363d; }
+.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 });
+}
 export {
   Inspector
 };

package/dist/index.cjs

@@ -26,6 +26,7 @@ __export(src_exports, {
   DEFAULT_NAME: () => import_core.DEFAULT_NAME,
   HandshakeTimeoutError: () => import_core4.HandshakeTimeoutError,
   NoopTransport: () => import_core4.NoopTransport,
+  SharedWorkerTransport: () => import_core4.SharedWorkerTransport,
   StorageTransport: () => import_core4.StorageTransport,
   WIRE_VERSION: () => import_core4.WIRE_VERSION,
   WindowClosedError: () => import_core4.WindowClosedError,
@@ -47,6 +48,7 @@ __export(src_exports, {
   getWireSkew: () => import_core4.getWireSkew,
   indexedDbAdapter: () => import_core4.indexedDbAdapter,
   isBroadcastChannelAvailable: () => import_core4.isBroadcastChannelAvailable,
+  isSharedWorkerAvailable: () => import_core4.isSharedWorkerAvailable,
   isStorageEventAvailable: () => import_core4.isStorageEventAvailable,
   jsonSerializer: () => import_core4.jsonSerializer,
   localStorageAdapter: () => import_core4.localStorageAdapter,
@@ -85,10 +87,17 @@ try {
 } catch {
 }
 var warned = /* @__PURE__ */ new Set();
-function devWarn(message) {
-  if (!inDev || warned.has(message)) return;
-  warned.add(message);
-  console.warn(message);
+var DOCS = "https://rxova.org/packages/use-everywhere/errors";
+function diagnostic(code, message) {
+  return `[use-everywhere] ${code}: ${message}
+  \u2192 ${DOCS}/#${code.toLowerCase()}`;
+}
+function devWarn(code, message) {
+  if (!inDev) return;
+  const line = diagnostic(code, message);
+  if (warned.has(line)) return;
+  warned.add(line);
+  console.warn(line);
 }
 var seenInitials = /* @__PURE__ */ new Map();
 function warnOnInitialMismatch(storeName, key, initial) {
@@ -102,7 +111,8 @@ function warnOnInitialMismatch(storeName, key, initial) {
   const comparable = (v) => v === null || typeof v !== "object";
   if (comparable(first) && comparable(initial) && !Object.is(first, initial)) {
     devWarn(
-      `[use-everywhere] useSharedState('${key}') was called with different initial values (${String(first)} and ${String(initial)}). The first registration wins, so the second is ignored. Define the default once \u2014 defineStore, or a shared constant.`
+      "UE2001",
+      `useSharedState('${key}') was called with different initial values (${String(first)} and ${String(initial)}). The first registration wins, so the second is ignored. Define the default once \u2014 defineStore, or a shared constant.`
     );
   }
 }
@@ -188,7 +198,8 @@ function configureStore(name, scope, options) {
     if (configSignature(storeConfig.get(key)) === configSignature(options)) return;
     if (process.env.NODE_ENV !== "production") {
       devWarn(
-        `[use-everywhere] defineStore('${name}') ran after that store was already created, with different options. The live store keeps the configuration it was built with. Move defineStore to module scope, before any component reads the store.`
+        "UE2002",
+        `defineStore('${name}') ran after that store was already created, with different options. The live store keeps the configuration it was built with. Move defineStore to module scope, before any component reads the store.`
       );
     }
     return;
@@ -232,7 +243,8 @@ function warnOnLeaderOptionConflict(name, options) {
     if (requested !== void 0 && requested !== first?.[key]) {
       if (process.env.NODE_ENV !== "production") {
         devWarn(
-          `[use-everywhere] leader "${name}": ${key} ignored \u2014 the first useLeader/getLeader call fixes the election timings for this tab.`
+          "UE2003",
+          `leader "${name}": ${key} ignored \u2014 the first useLeader/getLeader call fixes the election timings for this tab.`
         );
       }
     }
@@ -246,7 +258,8 @@ function configureChannel(name, options) {
     if (before.join() === after.join()) return;
     if (process.env.NODE_ENV !== "production") {
       devWarn(
-        `[use-everywhere] defineChannel('${name}') ran after that channel was already created, with different options. The live channel keeps the configuration it was built with. Move defineChannel to module scope, before any component sends or receives on it.`
+        "UE2004",
+        `defineChannel('${name}') ran after that channel was already created, with different options. The live channel keeps the configuration it was built with. Move defineChannel to module scope, before any component sends or receives on it.`
       );
     }
     return;
@@ -580,6 +593,7 @@ var import_core4 = require("@use-everywhere/core");
   DEFAULT_NAME,
   HandshakeTimeoutError,
   NoopTransport,
+  SharedWorkerTransport,
   StorageTransport,
   WIRE_VERSION,
   WindowClosedError,
@@ -601,6 +615,7 @@ var import_core4 = require("@use-everywhere/core");
   getWireSkew,
   indexedDbAdapter,
   isBroadcastChannelAvailable,
+  isSharedWorkerAvailable,
   isStorageEventAvailable,
   jsonSerializer,
   localStorageAdapter,

package/dist/index.d.cts

@@ -1,5 +1,5 @@
 import { SharedStore, LeaderOptions, Leader, MessageMap, ReplyMap, Channel, MessageMeta, ChannelOptions, PersistAdapter, RestoreError, Peer, LeaderSnapshot, Namespace, OpenedWindow, WindowClosedError } from '@use-everywhere/core';
-export { AskOptions, BroadcastChannelTransport, BusEvent, BusObserver, BusWire, CID_PARAM, Channel, ChannelOptions, CommonOptions, ConnectToOpenerOptions, DEFAULT_NAME, DebugOptions, HandshakeTimeoutError, IndexedDbAdapterOptions, InvalidPayload, Leader, LeaderOptions, LeaderSnapshot, LeaderStrategy, MessageEventLike, MessageMap, MessageMeta, Namespace, NoopTransport, OnInvalid, OnOptions, OpenWindowOptions, OpenedWindow, OpenerConnection, Peer, PeerKind, PersistAdapter, PersistOptions, Persisted, PostOptions, Presence, PresenceOptions, ReplyMap, RestoreError, SchemaMap, SchemaOptions, Serializer, SharedReducer, SharedReducerOptions, SharedStore, SharedStoreOptions, StandardSchemaV1, StorageLike, StorageTransport, Transport, TransportKind, Version, WIRE_VERSION, WebStorageAdapterOptions, WindowClosedError, WindowEventTarget, WindowLike, connectToOpener, createChannel, createLeader, createPresence, createSharedReducer, createSharedStore, defaultTransport, enableDebug, getBusNames, getTransportKind, getWireSkew, indexedDbAdapter, isBroadcastChannelAvailable, isStorageEventAvailable, jsonSerializer, localStorageAdapter, newer, observeBus, openWindow, sessionStorageAdapter, webStorageAdapter } from '@use-everywhere/core';
+export { AskOptions, BroadcastChannelTransport, BusEvent, BusObserver, BusWire, CID_PARAM, Channel, ChannelOptions, CommonOptions, ConnectToOpenerOptions, DEFAULT_NAME, DebugOptions, HandshakeTimeoutError, IndexedDbAdapterOptions, InvalidPayload, Leader, LeaderOptions, LeaderSnapshot, LeaderStrategy, MessageEventLike, MessageMap, MessageMeta, Namespace, NoopTransport, OnInvalid, OnOptions, OpenWindowOptions, OpenedWindow, OpenerConnection, Peer, PeerKind, PersistAdapter, PersistOptions, Persisted, PostOptions, Presence, PresenceOptions, ReplyMap, RestoreError, SchemaMap, SchemaOptions, Serializer, SharedReducer, SharedReducerOptions, SharedStore, SharedStoreOptions, SharedWorkerTransport, SharedWorkerTransportOptions, StandardSchemaV1, StorageLike, StorageTransport, Transport, TransportKind, Version, WIRE_VERSION, WebStorageAdapterOptions, WindowClosedError, WindowEventTarget, WindowLike, connectToOpener, createChannel, createLeader, createPresence, createSharedReducer, createSharedStore, defaultTransport, enableDebug, getBusNames, getTransportKind, getWireSkew, indexedDbAdapter, isBroadcastChannelAvailable, isSharedWorkerAvailable, isStorageEventAvailable, jsonSerializer, localStorageAdapter, newer, observeBus, openWindow, sessionStorageAdapter, webStorageAdapter } from '@use-everywhere/core';
 
 /**
  * How far a shared value travels:

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import { SharedStore, LeaderOptions, Leader, MessageMap, ReplyMap, Channel, MessageMeta, ChannelOptions, PersistAdapter, RestoreError, Peer, LeaderSnapshot, Namespace, OpenedWindow, WindowClosedError } from '@use-everywhere/core';
-export { AskOptions, BroadcastChannelTransport, BusEvent, BusObserver, BusWire, CID_PARAM, Channel, ChannelOptions, CommonOptions, ConnectToOpenerOptions, DEFAULT_NAME, DebugOptions, HandshakeTimeoutError, IndexedDbAdapterOptions, InvalidPayload, Leader, LeaderOptions, LeaderSnapshot, LeaderStrategy, MessageEventLike, MessageMap, MessageMeta, Namespace, NoopTransport, OnInvalid, OnOptions, OpenWindowOptions, OpenedWindow, OpenerConnection, Peer, PeerKind, PersistAdapter, PersistOptions, Persisted, PostOptions, Presence, PresenceOptions, ReplyMap, RestoreError, SchemaMap, SchemaOptions, Serializer, SharedReducer, SharedReducerOptions, SharedStore, SharedStoreOptions, StandardSchemaV1, StorageLike, StorageTransport, Transport, TransportKind, Version, WIRE_VERSION, WebStorageAdapterOptions, WindowClosedError, WindowEventTarget, WindowLike, connectToOpener, createChannel, createLeader, createPresence, createSharedReducer, createSharedStore, defaultTransport, enableDebug, getBusNames, getTransportKind, getWireSkew, indexedDbAdapter, isBroadcastChannelAvailable, isStorageEventAvailable, jsonSerializer, localStorageAdapter, newer, observeBus, openWindow, sessionStorageAdapter, webStorageAdapter } from '@use-everywhere/core';
+export { AskOptions, BroadcastChannelTransport, BusEvent, BusObserver, BusWire, CID_PARAM, Channel, ChannelOptions, CommonOptions, ConnectToOpenerOptions, DEFAULT_NAME, DebugOptions, HandshakeTimeoutError, IndexedDbAdapterOptions, InvalidPayload, Leader, LeaderOptions, LeaderSnapshot, LeaderStrategy, MessageEventLike, MessageMap, MessageMeta, Namespace, NoopTransport, OnInvalid, OnOptions, OpenWindowOptions, OpenedWindow, OpenerConnection, Peer, PeerKind, PersistAdapter, PersistOptions, Persisted, PostOptions, Presence, PresenceOptions, ReplyMap, RestoreError, SchemaMap, SchemaOptions, Serializer, SharedReducer, SharedReducerOptions, SharedStore, SharedStoreOptions, SharedWorkerTransport, SharedWorkerTransportOptions, StandardSchemaV1, StorageLike, StorageTransport, Transport, TransportKind, Version, WIRE_VERSION, WebStorageAdapterOptions, WindowClosedError, WindowEventTarget, WindowLike, connectToOpener, createChannel, createLeader, createPresence, createSharedReducer, createSharedStore, defaultTransport, enableDebug, getBusNames, getTransportKind, getWireSkew, indexedDbAdapter, isBroadcastChannelAvailable, isSharedWorkerAvailable, isStorageEventAvailable, jsonSerializer, localStorageAdapter, newer, observeBus, openWindow, sessionStorageAdapter, webStorageAdapter } from '@use-everywhere/core';
 
 /**
  * How far a shared value travels:

package/dist/index.js

@@ -12,7 +12,7 @@ import {
   usePeers,
   usePresenceMetadata,
   warnOnInitialMismatch
-} from "./chunk-75TICQ7E.js";
+} from "./chunk-R7PBPLF7.js";
 
 // src/use-shared-state.ts
 import { useCallback, useSyncExternalStore } from "react";
@@ -313,9 +313,11 @@ import {
   BroadcastChannelTransport,
   NoopTransport,
   StorageTransport,
+  SharedWorkerTransport,
   defaultTransport,
   isBroadcastChannelAvailable,
-  isStorageEventAvailable
+  isStorageEventAvailable,
+  isSharedWorkerAvailable
 } from "@use-everywhere/core";
 export {
   BroadcastChannelTransport,
@@ -323,6 +325,7 @@ export {
   DEFAULT_NAME,
   HandshakeTimeoutError,
   NoopTransport,
+  SharedWorkerTransport,
   StorageTransport,
   WIRE_VERSION,
   WindowClosedError2 as WindowClosedError,
@@ -344,6 +347,7 @@ export {
   getWireSkew,
   indexedDbAdapter,
   isBroadcastChannelAvailable,
+  isSharedWorkerAvailable,
   isStorageEventAvailable,
   jsonSerializer,
   localStorageAdapter,

package/dist/shared-worker.cjs

@@ -0,0 +1,31 @@
+'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/shared-worker.ts
+var shared_worker_exports = {};
+__export(shared_worker_exports, {
+  startRelay: () => import_shared_worker.startRelay
+});
+module.exports = __toCommonJS(shared_worker_exports);
+var import_shared_worker = require("@use-everywhere/core/shared-worker");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  startRelay
+});

package/dist/shared-worker.d.cts

@@ -0,0 +1,2 @@
+export { RelayPort, RelayScope, startRelay } from '@use-everywhere/core/shared-worker';
+import '@use-everywhere/core/testing';

package/dist/shared-worker.d.ts

@@ -0,0 +1,2 @@
+export { RelayPort, RelayScope, startRelay } from '@use-everywhere/core/shared-worker';
+import '@use-everywhere/core/testing';

package/dist/shared-worker.js

@@ -0,0 +1,7 @@
+'use client';
+
+// src/shared-worker.ts
+import { startRelay } from "@use-everywhere/core/shared-worker";
+export {
+  startRelay
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "use-everywhere",
-  "version": "0.8.0",
+  "version": "0.10.0",
   "description": "React hooks for state and messages shared across tabs, windows, and workers",
   "license": "MIT",
   "author": "Jonatan Kruszewski <jonakrusze@gmail.com>",
@@ -25,7 +25,10 @@
     "access": "public"
   },
   "type": "module",
-  "sideEffects": false,
+  "sideEffects": [
+    "./dist/shared-worker.js",
+    "./dist/shared-worker.cjs"
+  ],
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -50,6 +53,16 @@
         "default": "./dist/devtools/index.cjs"
       }
     },
+    "./shared-worker": {
+      "import": {
+        "types": "./dist/shared-worker.d.ts",
+        "default": "./dist/shared-worker.js"
+      },
+      "require": {
+        "types": "./dist/shared-worker.d.cts",
+        "default": "./dist/shared-worker.cjs"
+      }
+    },
     "./testing": {
       "import": {
         "types": "./dist/testing.d.ts",
@@ -123,7 +136,13 @@
       "name": "Inspector (devtools subpath)",
       "path": "dist/devtools/index.js",
       "import": "{ Inspector }",
-      "limit": "6.32 kB"
+      "limit": "7.20 kB"
+    },
+    {
+      "name": "SharedWorker relay (shared-worker subpath)",
+      "path": "dist/shared-worker.js",
+      "import": "*",
+      "limit": "280 B"
     },
     {
       "name": "MemoryHub (testing subpath)",
@@ -133,10 +152,16 @@
     }
   ],
   "dependencies": {
-    "@use-everywhere/core": "0.8.0"
+    "@use-everywhere/core": "0.10.0"
   },
   "peerDependencies": {
-    "react": ">=18"
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "peerDependenciesMeta": {
+    "react-dom": {
+      "optional": true
+    }
   },
   "devDependencies": {
     "@arethetypeswrong/cli": "^0.18.5",
@@ -159,6 +184,9 @@
       "devtools": [
         "./dist/devtools/index.d.ts"
       ],
+      "shared-worker": [
+        "./dist/shared-worker.d.ts"
+      ],
       "testing": [
         "./dist/testing.d.ts"
       ]