use-everywhere 0.9.0 → 0.10.0

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,130 +118,28 @@ 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; }
-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
+// 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);
@@ -269,20 +172,21 @@ function Inspector({
         }
       }
       if (pausedRef.current) return;
+      const id = nextId.current++;
+      const label = wireLabel(wire);
       setWires(
         (prev) => [
           ...prev.slice(-(limit - 1)),
-          {
-            id: nextId.current++,
-            direction,
-            scope: wire.scope,
-            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(
       () => {
@@ -291,9 +195,6 @@ 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);
@@ -301,9 +202,11 @@ function Inspector({
   const selfId = store.clientId;
   const entries = Object.entries(versions);
   const needle = filter.trim().toLowerCase();
-  const shown = needle ? wires.filter(
-    (wire) => wire.label.toLowerCase().includes(needle) || wire.from.toLowerCase().includes(needle)
-  ) : wires;
+  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 {
@@ -322,8 +225,13 @@ function Inspector({
       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",
       {
@@ -426,7 +334,10 @@ function Inspector({
             {
               type: "button",
               className: "ue-ins__btn",
-              onClick: () => setWires([]),
+              onClick: () => {
+                setWires([]);
+                setFrames([]);
+              },
               "data-testid": "ue-clear",
               children: "clear"
             }
@@ -443,15 +354,189 @@ function Inspector({
             }
           )
         ] }),
-        shown.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "ue-ins__empty", children: wires.length === 0 ? "nothing yet" : "no matches" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "ue-ins__log", children: shown.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

@@ -5,133 +5,34 @@ import {
 } 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; }
-
-.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; }
+import { useState as useState2 } from "react";
+import { createPortal } from "react-dom";
+import { DEFAULT_NAME } from "@use-everywhere/core";
 
-.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
+// 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);
@@ -164,20 +65,21 @@ function Inspector({
         }
       }
       if (pausedRef.current) return;
+      const id = nextId.current++;
+      const label = wireLabel(wire);
       setWires(
         (prev) => [
           ...prev.slice(-(limit - 1)),
-          {
-            id: nextId.current++,
-            direction,
-            scope: wire.scope,
-            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(
       () => {
@@ -186,9 +88,6 @@ 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);
@@ -196,9 +95,11 @@ function Inspector({
   const selfId = store.clientId;
   const entries = Object.entries(versions);
   const needle = filter.trim().toLowerCase();
-  const shown = needle ? wires.filter(
-    (wire) => wire.label.toLowerCase().includes(needle) || wire.from.toLowerCase().includes(needle)
-  ) : wires;
+  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 {
@@ -217,8 +118,13 @@ function Inspector({
       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",
       {
@@ -321,7 +227,10 @@ function Inspector({
             {
               type: "button",
               className: "ue-ins__btn",
-              onClick: () => setWires([]),
+              onClick: () => {
+                setWires([]);
+                setFrames([]);
+              },
               "data-testid": "ue-clear",
               children: "clear"
             }
@@ -338,15 +247,189 @@ function Inspector({
             }
           )
         ] }),
-        shown.length === 0 ? /* @__PURE__ */ jsx("div", { className: "ue-ins__empty", children: wires.length === 0 ? "nothing yet" : "no matches" }) : /* @__PURE__ */ jsx("div", { className: "ue-ins__log", children: shown.map((wire) => /* @__PURE__ */ jsxs("div", { className: "ue-ins__wire", children: [
+        /* @__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,
@@ -591,6 +593,7 @@ var import_core4 = require("@use-everywhere/core");
   DEFAULT_NAME,
   HandshakeTimeoutError,
   NoopTransport,
+  SharedWorkerTransport,
   StorageTransport,
   WIRE_VERSION,
   WindowClosedError,
@@ -612,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

@@ -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.9.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.70 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.9.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"
       ]