use-everywhere 0.7.0 → 0.9.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-LNJEF4DI.js → chunk-R7PBPLF7.js}

@@ -5,6 +5,7 @@ import {
   createChannel,
   createLeader,
   createPresence,
+  createSharedReducer,
   createSharedStore,
   DEFAULT_NAME,
   NoopTransport
@@ -17,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) {
@@ -34,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.`
     );
   }
 }
@@ -49,6 +58,12 @@ var unsubscribe = () => noop;
 var INERT = Object.freeze({
   clientId: SERVER_CLIENT_ID,
   // store
+  //
+  // Resolved, unlike the leader's `waitForLeadership` below. A server render
+  // has nothing to restore and is documented to render defaults, so `await
+  // store.hydrated` must proceed — a never-settling promise would hang the
+  // render rather than describe it honestly.
+  hydrated: Promise.resolve(),
   state: EMPTY,
   getVersions: () => EMPTY,
   set: noop,
@@ -57,6 +72,8 @@ var INERT = Object.freeze({
   // store + leader share getSnapshot; presence has getPeers
   getSnapshot: () => EMPTY,
   getPeers: () => NO_PEERS,
+  // presence
+  setMetadata: noop,
   // leader
   resign: noop,
   setEligible: noop,
@@ -75,6 +92,12 @@ var createServerLeader = () => ({
   getSnapshot: () => NO_LEADER,
   waitForLeadership: NEVER
 });
+var createServerReducer = (initial) => ({
+  ...INERT,
+  getSnapshot: () => initial,
+  dispatch: noop,
+  pendingCount: () => 0
+});
 var createServerChannel = (name) => ({ ...INERT, name, post: noop, on: unsubscribe });
 
 // src/registry.ts
@@ -95,15 +118,18 @@ function getSharedStore(name = DEFAULT_NAME, scope = "everywhere") {
 function configSignature(options) {
   const persist = options?.persist;
   if (!persist) return "none";
-  return `persist:${persist.keys?.join(",") ?? "*"}:${persist.debounceMs ?? "default"}`;
+  return `persist:${persist.keys?.join(",") ?? "*"}:${persist.debounceMs ?? "default"}:v${persist.version ?? 0}`;
 }
 function configureStore(name, scope, options) {
   const key = `${scope} ${name}`;
   if (stores.has(key)) {
     if (configSignature(storeConfig.get(key)) === configSignature(options)) return;
-    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.`
-    );
+    if (process.env.NODE_ENV !== "production") {
+      devWarn(
+        "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;
   }
   storeConfig.set(key, options);
@@ -117,11 +143,12 @@ function getStore(name, scope = "everywhere") {
   }
   return store;
 }
-function getPresence(name) {
-  let presence = presences.get(name);
+function getPresence(name, includeSelf = false) {
+  const key = includeSelf ? `self ${name}` : name;
+  let presence = presences.get(key);
   if (!presence) {
-    presence = isServer() ? createServerPresence() : createPresence(name);
-    presences.set(name, presence);
+    presence = isServer() ? createServerPresence() : createPresence(name, { includeSelf });
+    presences.set(key, presence);
   }
   return presence;
 }
@@ -142,26 +169,55 @@ function warnOnLeaderOptionConflict(name, options) {
   for (const key of ["heartbeatMs", "leaseMs"]) {
     const requested = options[key];
     if (requested !== void 0 && requested !== first?.[key]) {
+      if (process.env.NODE_ENV !== "production") {
+        devWarn(
+          "UE2003",
+          `leader "${name}": ${key} ignored \u2014 the first useLeader/getLeader call fixes the election timings for this tab.`
+        );
+      }
+    }
+  }
+}
+var channelConfig = /* @__PURE__ */ new Map();
+function configureChannel(name, options) {
+  if (channels.has(name)) {
+    const before = Object.keys(channelConfig.get(name)?.schema ?? {}).sort();
+    const after = Object.keys(options.schema ?? {}).sort();
+    if (before.join() === after.join()) return;
+    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.`
+        "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;
   }
+  channelConfig.set(name, options);
+}
+var reducers = /* @__PURE__ */ new Map();
+function getReducer(name, key, reducer, initial) {
+  const id = `${name} ${key}`;
+  let existing = reducers.get(id);
+  if (!existing) {
+    existing = isServer() ? createServerReducer(initial) : createSharedReducer(name, reducer, initial, { key, leader: getLeader(name) });
+    reducers.set(id, existing);
+  }
+  return existing;
 }
 function getChannel(name) {
   let channel = channels.get(name);
   if (!channel) {
-    channel = isServer() ? createServerChannel(name) : createChannel(name);
+    channel = isServer() ? createServerChannel(name) : createChannel(name, channelConfig.get(name));
     channels.set(name, channel);
   }
   return channel;
 }
 
 // src/use-peers.ts
-import { useCallback, useSyncExternalStore } from "react";
+import { useCallback, useEffect, useSyncExternalStore } from "react";
 var NO_PEERS2 = Object.freeze([]);
 function usePeers(options) {
-  const presence = getPresence(options?.name ?? DEFAULT_NAME);
+  const presence = getPresence(options?.name ?? DEFAULT_NAME, options?.includeSelf ?? false);
   return useSyncExternalStore(
     useCallback((onChange) => presence.subscribe(onChange), [presence]),
     () => presence.getPeers(),
@@ -180,6 +236,12 @@ function useClientId(options) {
     () => SERVER_CLIENT_ID
   );
 }
+function usePresenceMetadata(metadata, options) {
+  const presence = getPresence(options?.name ?? DEFAULT_NAME, options?.includeSelf ?? false);
+  useEffect(() => {
+    presence.setMetadata(metadata);
+  }, [presence, metadata]);
+}
 
 export {
   warnOnInitialMismatch,
@@ -188,7 +250,10 @@ export {
   configureStore,
   getStore,
   getLeader,
+  configureChannel,
+  getReducer,
   getChannel,
   usePeers,
-  useClientId
+  useClientId,
+  usePresenceMetadata
 };

package/dist/devtools/index.cjs

@@ -42,6 +42,12 @@ var unsubscribe = () => noop;
 var INERT = Object.freeze({
   clientId: SERVER_CLIENT_ID,
   // store
+  //
+  // Resolved, unlike the leader's `waitForLeadership` below. A server render
+  // has nothing to restore and is documented to render defaults, so `await
+  // store.hydrated` must proceed — a never-settling promise would hang the
+  // render rather than describe it honestly.
+  hydrated: Promise.resolve(),
   state: EMPTY,
   getVersions: () => EMPTY,
   set: noop,
@@ -50,6 +56,8 @@ var INERT = Object.freeze({
   // store + leader share getSnapshot; presence has getPeers
   getSnapshot: () => EMPTY,
   getPeers: () => NO_PEERS,
+  // presence
+  setMetadata: noop,
   // leader
   resign: noop,
   setEligible: noop,
@@ -83,11 +91,12 @@ function getStore(name, scope = "everywhere") {
   }
   return store;
 }
-function getPresence(name) {
-  let presence = presences.get(name);
+function getPresence(name, includeSelf = false) {
+  const key = includeSelf ? `self ${name}` : name;
+  let presence = presences.get(key);
   if (!presence) {
-    presence = isServer() ? createServerPresence() : (0, import_core.createPresence)(name);
-    presences.set(name, presence);
+    presence = isServer() ? createServerPresence() : (0, import_core.createPresence)(name, { includeSelf });
+    presences.set(key, presence);
   }
   return presence;
 }
@@ -96,7 +105,7 @@ function getPresence(name) {
 var import_react = require("react");
 var NO_PEERS2 = Object.freeze([]);
 function usePeers(options) {
-  const presence = getPresence(options?.name ?? import_core.DEFAULT_NAME);
+  const presence = getPresence(options?.name ?? import_core.DEFAULT_NAME, options?.includeSelf ?? false);
   return (0, import_react.useSyncExternalStore)(
     (0, import_react.useCallback)((onChange) => presence.subscribe(onChange), [presence]),
     () => presence.getPeers(),
@@ -153,6 +162,13 @@ var STYLES = `
 .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; }
 
@@ -163,6 +179,43 @@ var STYLES = `
 .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
@@ -181,8 +234,15 @@ function Inspector({
   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 [editing, setEditing] = (0, import_react2.useState)(null);
   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]);
@@ -208,12 +268,14 @@ function Inspector({
           crownAt.current = Date.now();
         }
       }
+      if (pausedRef.current) return;
       setWires(
         (prev) => [
           ...prev.slice(-(limit - 1)),
           {
             id: nextId.current++,
             direction,
+            scope: wire.scope,
             label: wireLabel(wire),
             from: short(wire.clientId)
           }
@@ -238,6 +300,28 @@ function Inspector({
   }, [leaseMs]);
   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 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;
+    }
+  };
   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)(
@@ -285,7 +369,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",
@@ -296,10 +404,46 @@ 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([]),
+              "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: [
+        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)("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 })

package/dist/devtools/index.js

@@ -2,7 +2,7 @@
 import {
   getSharedStore,
   usePeers
-} from "../chunk-LNJEF4DI.js";
+} from "../chunk-R7PBPLF7.js";
 
 // src/devtools/inspector.tsx
 import { useCallback, useEffect, useRef, useState, useSyncExternalStore } from "react";
@@ -57,6 +57,13 @@ var STYLES = `
 .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; }
 
@@ -67,6 +74,43 @@ var STYLES = `
 .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
@@ -85,8 +129,15 @@ function Inspector({
   const [open, setOpen] = useState(defaultOpen);
   const [wires, setWires] = useState([]);
   const [crown, setCrown] = useState(null);
+  const [paused, setPaused] = useState(false);
+  const [filter, setFilter] = useState("");
+  const [editing, setEditing] = useState(null);
   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,12 +163,14 @@ function Inspector({
           crownAt.current = Date.now();
         }
       }
+      if (pausedRef.current) return;
       setWires(
         (prev) => [
           ...prev.slice(-(limit - 1)),
           {
             id: nextId.current++,
             direction,
+            scope: wire.scope,
             label: wireLabel(wire),
             from: short(wire.clientId)
           }
@@ -142,6 +195,28 @@ function Inspector({
   }, [leaseMs]);
   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 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;
+    }
+  };
   return /* @__PURE__ */ jsxs("div", { className: `ue-ins ue-ins--${position}`, "data-testid": "ue-inspector", children: [
     /* @__PURE__ */ jsx("style", { children: STYLES }),
     /* @__PURE__ */ jsxs(
@@ -189,7 +264,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,10 +299,46 @@ 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
+        ] }),
+        /* @__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([]),
+              "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"
+            }
+          )
         ] }),
-        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: [
+        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("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 })