use-everywhere 0.3.0 → 0.4.0

package/dist/{chunk-Y67BCTU6.js → chunk-PNFJW7QK.js}

@@ -1,3 +1,5 @@
+'use client';
+
 // src/registry.ts
 import {
   createChannel,

package/dist/devtools/index.cjs

@@ -0,0 +1,282 @@
+'use client';
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/devtools/index.ts
+var devtools_exports = {};
+__export(devtools_exports, {
+  Inspector: () => Inspector
+});
+module.exports = __toCommonJS(devtools_exports);
+
+// src/devtools/inspector.tsx
+var import_react2 = require("react");
+var import_core2 = require("@use-everywhere/core");
+
+// src/registry.ts
+var import_core = require("@use-everywhere/core");
+var stores = /* @__PURE__ */ new Map();
+var presences = /* @__PURE__ */ new Map();
+var storeConfig = /* @__PURE__ */ new Map();
+var scopeOptions = {
+  everywhere: {},
+  tabs: { accept: (meta) => meta.kind !== "worker" },
+  tab: { transport: () => new import_core.NoopTransport() }
+};
+function getSharedStore(name = import_core.DEFAULT_NAME, scope = "everywhere") {
+  return getStore(name, scope);
+}
+function getStore(name, scope = "everywhere") {
+  const key = `${scope} ${name}`;
+  let store = stores.get(key);
+  if (!store) {
+    store = (0, import_core.createSharedStore)(name, {}, { ...scopeOptions[scope], ...storeConfig.get(key) });
+    stores.set(key, store);
+  }
+  return store;
+}
+function getPresence(name) {
+  let presence = presences.get(name);
+  if (!presence) {
+    presence = (0, import_core.createPresence)(name);
+    presences.set(name, presence);
+  }
+  return presence;
+}
+
+// src/use-peers.ts
+var import_react = require("react");
+var NO_PEERS = Object.freeze([]);
+function usePeers(options) {
+  const presence = getPresence(options?.name ?? import_core.DEFAULT_NAME);
+  return (0, import_react.useSyncExternalStore)(
+    (0, import_react.useCallback)((onChange) => presence.subscribe(onChange), [presence]),
+    () => presence.getPeers(),
+    () => NO_PEERS
+  );
+}
+
+// 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
+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
+} = {}) {
+  const [open, setOpen] = (0, import_react2.useState)(defaultOpen);
+  const [wires, setWires] = (0, import_react2.useState)([]);
+  const [crown, setCrown] = (0, import_react2.useState)(null);
+  const nextId = (0, import_react2.useRef)(0);
+  const crownAt = (0, import_react2.useRef)(0);
+  const peers = usePeers({ name });
+  const store = getSharedStore(name);
+  const subscribe = (0, import_react2.useCallback)((onChange) => store.subscribe(onChange), [store]);
+  const snapshot = (0, import_react2.useSyncExternalStore)(
+    subscribe,
+    () => store.getSnapshot(),
+    () => store.getSnapshot()
+  );
+  const versions = (0, import_react2.useSyncExternalStore)(
+    subscribe,
+    () => store.getVersions(),
+    () => store.getVersions()
+  );
+  (0, import_react2.useEffect)(() => {
+    return (0, import_core2.observeBus)(name, (event) => {
+      const { wire, direction } = event;
+      if (wire.scope === "leader") {
+        if (wire.type === "resign") {
+          setCrown(null);
+          crownAt.current = 0;
+        } else if (wire.type === "claim" || wire.type === "heartbeat") {
+          setCrown(wire.clientId);
+          crownAt.current = Date.now();
+        }
+      }
+      setWires(
+        (prev) => [
+          ...prev.slice(-(limit - 1)),
+          {
+            id: nextId.current++,
+            direction,
+            label: wireLabel(wire),
+            from: short(wire.clientId)
+          }
+        ].slice(-limit)
+      );
+    });
+  }, [name, limit]);
+  (0, import_react2.useEffect)(() => {
+    const timer = setInterval(
+      () => {
+        if (crownAt.current && Date.now() - crownAt.current > leaseMs) {
+          setCrown(null);
+          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);
+  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",
+      {
+        type: "button",
+        className: "ue-ins__bar",
+        onClick: () => setOpen((v) => !v),
+        "aria-expanded": open,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "ue-ins__dot" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "ue-ins__title", children: "use-everywhere" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "ue-ins__muted", children: name }),
+          crown ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "ue-ins__crown", "data-testid": "ue-crown", children: [
+            "\u2654 ",
+            crown === selfId ? "this tab" : short(crown)
+          ] }) : null
+        ]
+      }
+    ),
+    open ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "ue-ins__body", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "ue-ins__section", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "ue-ins__h", children: "This tab" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "ue-ins__row", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "ue-ins__k", children: short(selfId) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "ue-ins__v", children: crown === selfId ? "leader" : crown ? "follower" : "no leader" })
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "ue-ins__section", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "ue-ins__h", children: [
+          "Peers (",
+          peers.length,
+          ")"
+        ] }),
+        peers.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "ue-ins__empty", children: "nobody else here" }) : peers.map((peer) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "ue-ins__row", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "ue-ins__k", children: short(peer.id) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "ue-ins__v", children: peer.kind })
+        ] }, peer.id))
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "ue-ins__section", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "ue-ins__h", children: [
+          "State (",
+          entries.length,
+          ")"
+        ] }),
+        entries.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "ue-ins__empty", children: "no keys yet" }) : entries.map(([key, version]) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "ue-ins__row", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "ue-ins__k", children: key }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "ue-ins__v", children: JSON.stringify(snapshot[key]) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "ue-ins__ver", children: [
+            version[0],
+            "\xB7",
+            short(version[1])
+          ] })
+        ] }, key))
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "ue-ins__section", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "ue-ins__h", children: [
+          "Wires (",
+          wires.length,
+          ")"
+        ] }),
+        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)("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)) })
+      ] })
+    ] }) : null
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Inspector
+});

package/dist/devtools/index.d.cts

@@ -0,0 +1,35 @@
+import * as react from 'react';
+
+interface InspectorProps {
+    /** Which bus to watch. Defaults to the shared default name. */
+    name?: string;
+    /** Corner to dock in. Default 'bottom-right'. */
+    position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+    /** How many wires to keep in the log. Default 50. */
+    limit?: number;
+    /** Start expanded. Default false. */
+    defaultOpen?: boolean;
+    /**
+     * How long a leader wire keeps the crown before it is treated as stale.
+     * Should match the Leader's leaseMs. Default 3000.
+     */
+    leaseMs?: number;
+}
+
+/**
+ * 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.
+ *
+ * It deliberately does **not** create a Leader. Under dynamic eligibility,
+ * mounting one with `eligible: false` would disable candidacy for the whole
+ * tab, and mounting a plain one would enrol a tab that never asked to be a
+ * candidate — a devtool must not change what it measures. Instead it reads the
+ * crown out of the wire log, which it already sees in both directions.
+ *
+ * Presence is fine to use: the bus heartbeats regardless of whether anything
+ * created a Presence, so usePeers observes rather than perturbs.
+ */
+declare function Inspector({ name, position, limit, defaultOpen, leaseMs, }?: InspectorProps): react.JSX.Element;
+
+export { Inspector, type InspectorProps };

package/dist/devtools/index.js

@@ -1,7 +1,8 @@
+'use client';
 import {
   getSharedStore,
   usePeers
-} from "../chunk-Y67BCTU6.js";
+} from "../chunk-PNFJW7QK.js";
 
 // src/devtools/inspector.tsx
 import { useCallback, useEffect, useRef, useState, useSyncExternalStore } from "react";

package/dist/index.cjs

@@ -0,0 +1,287 @@
+'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 __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  DEFAULT_NAME: () => import_core.DEFAULT_NAME,
+  defineChannel: () => defineChannel,
+  defineStore: () => defineStore,
+  getLeader: () => getLeader,
+  getSharedStore: () => getSharedStore,
+  useChannel: () => useChannel,
+  useClientId: () => useClientId,
+  useIsLeader: () => useIsLeader,
+  useLeader: () => useLeader,
+  useLeaderEffect: () => useLeaderEffect,
+  useMessage: () => useMessage,
+  useOpenedWindow: () => useOpenedWindow,
+  usePeers: () => usePeers,
+  useSend: () => useSend,
+  useSharedState: () => useSharedState
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/use-shared-state.ts
+var import_react = require("react");
+
+// src/registry.ts
+var import_core = require("@use-everywhere/core");
+var stores = /* @__PURE__ */ new Map();
+var presences = /* @__PURE__ */ new Map();
+var channels = /* @__PURE__ */ new Map();
+var leaders = /* @__PURE__ */ new Map();
+var storeConfig = /* @__PURE__ */ new Map();
+var scopeOptions = {
+  everywhere: {},
+  tabs: { accept: (meta) => meta.kind !== "worker" },
+  tab: { transport: () => new import_core.NoopTransport() }
+};
+function getSharedStore(name = import_core.DEFAULT_NAME, scope = "everywhere") {
+  return getStore(name, scope);
+}
+function configureStore(name, scope, options) {
+  const key = `${scope} ${name}`;
+  if (stores.has(key)) {
+    throw new Error(
+      `defineStore('${name}') ran after that store was already created. Move it to module scope \u2014 configuring a live store would silently hand you one without persistence.`
+    );
+  }
+  storeConfig.set(key, options);
+}
+function getStore(name, scope = "everywhere") {
+  const key = `${scope} ${name}`;
+  let store = stores.get(key);
+  if (!store) {
+    store = (0, import_core.createSharedStore)(name, {}, { ...scopeOptions[scope], ...storeConfig.get(key) });
+    stores.set(key, store);
+  }
+  return store;
+}
+function getPresence(name) {
+  let presence = presences.get(name);
+  if (!presence) {
+    presence = (0, import_core.createPresence)(name);
+    presences.set(name, presence);
+  }
+  return presence;
+}
+function getLeader(name, options) {
+  let leader = leaders.get(name);
+  if (!leader) {
+    leader = (0, import_core.createLeader)(name, options);
+    leaders.set(name, leader);
+  }
+  return leader;
+}
+function getChannel(name) {
+  let channel = channels.get(name);
+  if (!channel) {
+    channel = (0, import_core.createChannel)(name);
+    channels.set(name, channel);
+  }
+  return channel;
+}
+
+// src/use-shared-state.ts
+function useSharedState(key, initial, options) {
+  const store = getStore(options?.store ?? import_core.DEFAULT_NAME, options?.scope ?? "everywhere");
+  store.registerKey(key, initial);
+  const value = (0, import_react.useSyncExternalStore)(
+    (0, import_react.useCallback)((onChange) => store.subscribeKey(key, onChange), [store, key]),
+    () => store.getSnapshot()[key],
+    () => initial
+  );
+  const setValue = (0, import_react.useCallback)(
+    (next) => store.set(key, next),
+    [store, key]
+  );
+  return [value, setValue];
+}
+
+// src/use-message.ts
+var import_react2 = require("react");
+function useChannel(name) {
+  return getChannel(name);
+}
+function useMessage(channel, type, handler) {
+  const handlerRef = (0, import_react2.useRef)(handler);
+  (0, import_react2.useEffect)(() => {
+    handlerRef.current = handler;
+  });
+  (0, import_react2.useEffect)(
+    () => channel.on(type, (payload, meta) => handlerRef.current(payload, meta)),
+    [channel, type]
+  );
+}
+function useSend(channel) {
+  return channel.post;
+}
+
+// src/define-channel.ts
+function defineChannel(name) {
+  const useBoundSend = () => useSend(useChannel(name));
+  const useBoundMessage = (type, handler) => useMessage(useChannel(name), type, handler);
+  return {
+    get: () => getChannel(name),
+    useSend: useBoundSend,
+    useMessage: useBoundMessage
+  };
+}
+
+// src/define-store.ts
+function defineStore(name, options = {}) {
+  const scope = options.scope ?? "everywhere";
+  if (options.persist) {
+    configureStore(name, scope, {
+      persist: {
+        adapter: options.persist,
+        ...options.persistKeys ? { keys: options.persistKeys } : {},
+        ...options.persistDebounceMs === void 0 ? {} : { debounceMs: options.persistDebounceMs }
+      }
+    });
+  }
+  return {
+    get: () => getStore(name, scope),
+    useSharedState: (key, initial) => useSharedState(key, initial, { store: name, scope })
+  };
+}
+
+// src/use-peers.ts
+var import_react3 = require("react");
+var NO_PEERS = Object.freeze([]);
+function usePeers(options) {
+  const presence = getPresence(options?.name ?? import_core.DEFAULT_NAME);
+  return (0, import_react3.useSyncExternalStore)(
+    (0, import_react3.useCallback)((onChange) => presence.subscribe(onChange), [presence]),
+    () => presence.getPeers(),
+    () => NO_PEERS
+  );
+}
+function useClientId(options) {
+  return getPresence(options?.name ?? import_core.DEFAULT_NAME).clientId;
+}
+
+// src/use-leader.ts
+var import_react4 = require("react");
+var NO_LEADER = Object.freeze({ leaderId: null, isLeader: false });
+function useLeader(options) {
+  const leader = getLeader(options?.name ?? import_core.DEFAULT_NAME, options);
+  const eligible = options?.eligible;
+  (0, import_react4.useEffect)(() => {
+    if (eligible === void 0) return;
+    leader.setEligible(eligible);
+  }, [leader, eligible]);
+  return (0, import_react4.useSyncExternalStore)(
+    (0, import_react4.useCallback)((onChange) => leader.subscribe(onChange), [leader]),
+    () => leader.getSnapshot(),
+    () => NO_LEADER
+  );
+}
+function useIsLeader(options) {
+  return useLeader(options).isLeader;
+}
+function useLeaderEffect(effect, options) {
+  const { isLeader } = useLeader(options);
+  const effectRef = (0, import_react4.useRef)(effect);
+  (0, import_react4.useEffect)(() => {
+    effectRef.current = effect;
+  });
+  (0, import_react4.useEffect)(() => {
+    if (!isLeader) return;
+    return effectRef.current();
+  }, [isLeader]);
+}
+
+// src/use-opened-window.ts
+var import_react5 = require("react");
+var import_core2 = require("@use-everywhere/core");
+function useOpenedWindow(factory) {
+  const [status, setStatus] = (0, import_react5.useState)("idle");
+  const [result, setResult] = (0, import_react5.useState)(void 0);
+  const [error, setError] = (0, import_react5.useState)(void 0);
+  const current = (0, import_react5.useRef)(null);
+  const factoryRef = (0, import_react5.useRef)(factory);
+  factoryRef.current = factory;
+  const open = (0, import_react5.useCallback)(() => {
+    current.current?.close();
+    let opened;
+    try {
+      opened = factoryRef.current();
+    } catch (err) {
+      setStatus("error");
+      setError(err);
+      return;
+    }
+    current.current = opened;
+    setStatus("opening");
+    setResult(void 0);
+    setError(void 0);
+    const fresh = () => current.current === opened;
+    opened.ready.then(
+      () => {
+        if (fresh()) setStatus((s) => s === "opening" ? "connected" : s);
+      },
+      () => {
+      }
+      // surfaced through result below
+    );
+    opened.result.then(
+      (value) => {
+        if (!fresh()) return;
+        setResult(value);
+        setStatus("done");
+      },
+      (err) => {
+        if (!fresh()) return;
+        setError(err);
+        setStatus(err instanceof import_core2.WindowClosedError ? "closed-early" : "error");
+      }
+    );
+  }, []);
+  const post = (0, import_react5.useCallback)((type, payload) => {
+    current.current?.post(type, payload);
+  }, []);
+  const close = (0, import_react5.useCallback)(() => current.current?.close(), []);
+  return { open, status, result, error, post, close };
+}
+
+// src/index.ts
+__reExport(src_exports, require("@use-everywhere/core"), module.exports);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DEFAULT_NAME,
+  defineChannel,
+  defineStore,
+  getLeader,
+  getSharedStore,
+  useChannel,
+  useClientId,
+  useIsLeader,
+  useLeader,
+  useLeaderEffect,
+  useMessage,
+  useOpenedWindow,
+  usePeers,
+  useSend,
+  useSharedState,
+  ...require("@use-everywhere/core")
+});

package/dist/index.d.cts

@@ -0,0 +1,152 @@
+import { SharedStore, LeaderOptions, Leader, MessageMap, Channel, MessageMeta, PersistAdapter, Peer, LeaderSnapshot, OpenedWindow } from '@use-everywhere/core';
+export * from '@use-everywhere/core';
+export { DEFAULT_NAME } from '@use-everywhere/core';
+
+/**
+ * How far a shared value travels:
+ * - 'everywhere' — every tab, window, and worker on this origin (default)
+ * - 'tabs'       — tabs and windows only; writes coming from workers are ignored
+ * - 'tab'        — this tab only (state is still shared between components)
+ */
+type ShareScope = 'everywhere' | 'tabs' | 'tab';
+interface UseSharedStateOptions {
+    /** Store name; keys live in a namespace per store. Default 'use-everywhere'. */
+    store?: string;
+    /** How much to share. Default 'everywhere'. */
+    scope?: ShareScope;
+}
+
+/**
+ * Like useState, but the value exists in every tab, window, and worker on
+ * this origin. Late-joining tabs hydrate to the current value; concurrent
+ * writes converge last-writer-wins. Pass options.scope to delimit how much
+ * is shared ('everywhere' | 'tabs' | 'tab').
+ */
+declare function useSharedState<T>(key: string, initial: T, options?: UseSharedStateOptions): [T, (next: T | ((prev: T) => T)) => void];
+
+/** Registry stores hold arbitrary keys — shape is decided by the hooks using them. */
+type AnyStore = SharedStore<Record<string, unknown>>;
+
+/** Imperative access to the store behind useSharedState (patch logs, non-React code). */
+declare function getSharedStore(name?: string, scope?: ShareScope): AnyStore;
+/**
+ * One Leader per name per tab. Eligibility is deliberately *not* part of the
+ * key: two Leaders on one name would share a bus and a clientId, and since a
+ * post never loops back locally, neither would ever see the other's claims.
+ * Timing options are first-wins, like every other engine here.
+ */
+declare function getLeader(name: string, options?: LeaderOptions): Leader;
+
+/** Get the page-wide typed channel for `name` (one instance per name). */
+declare function useChannel<M extends MessageMap>(name: string): Channel<M>;
+/**
+ * Subscribe to one message type. The handler is kept fresh without
+ * resubscribing, so it may close over render state.
+ */
+declare function useMessage<M extends MessageMap, K extends keyof M & string>(channel: Channel<M>, type: K, handler: (payload: M[K], meta: MessageMeta) => void): void;
+/** The channel's post function (stable identity per channel). */
+declare function useSend<M extends MessageMap>(channel: Channel<M>): Channel<M>['post'];
+
+/** A channel bound to a name and message map: typed hooks with no per-call generics. */
+interface ChannelHooks<M extends MessageMap> {
+    /** The underlying channel instance (the same one the hooks use) — for non-React code. */
+    get: () => Channel<M>;
+    /** The channel's post function (stable identity). */
+    useSend: () => Channel<M>['post'];
+    /**
+     * Subscribe to one message type. Same contract as the standalone
+     * `useMessage`: the handler is kept fresh without resubscribing.
+     */
+    useMessage: <K extends keyof M & string>(type: K, handler: (payload: M[K], meta: MessageMeta) => void) => void;
+}
+
+/**
+ * Bind a channel name and message map once, at module level, and get fully
+ * typed hooks back. Sugar over useChannel/useMessage/useSend — the same
+ * page-wide channel singleton is shared, so mixing bound and standalone
+ * hooks for one name is safe.
+ */
+declare function defineChannel<M extends MessageMap>(name: string): ChannelHooks<M>;
+
+interface DefineStoreOptions {
+    /** Restore this store from disk on first use, and write it back as it changes. */
+    persist?: PersistAdapter;
+    /** Persist only these keys. Default: every key that has been written. */
+    persistKeys?: string[];
+    /** Coalesce disk writes for this long. Default 100. */
+    persistDebounceMs?: number;
+    /** How far this store is shared. Default 'everywhere'. */
+    scope?: ShareScope;
+}
+/** A store bound to a name and a shape: typed hooks with no per-call generics. */
+interface StoreHooks<S extends Record<string, unknown>> {
+    /** The underlying store instance (the same one the hooks use) — for non-React code. */
+    get: () => AnyStore;
+    useSharedState: <K extends keyof S & string>(key: K, initial: S[K]) => [S[K], (next: S[K] | ((prev: S[K]) => S[K])) => void];
+}
+
+/**
+ * Bind a store name — and optionally persistence — once, at module level.
+ *
+ * Like defineChannel, this does not construct anything: it registers the
+ * options the registry will use when the store is first needed, so importing
+ * the module has no side effect. The store stays a singleton per name, so
+ * `defineStore('settings', { persist })` and a bare
+ * `useSharedState('theme', 'dark', { store: 'settings' })` elsewhere resolve to
+ * the same store, and both get persistence.
+ *
+ * Must run before that store exists. Module evaluation always precedes render,
+ * so intended usage is automatic; if it does run late it throws rather than
+ * quietly handing back a store with no persistence.
+ */
+declare function defineStore<S extends Record<string, unknown> = Record<string, unknown>>(name: string, options?: DefineStoreOptions): StoreHooks<S>;
+
+/** The other tabs/windows/workers currently alive on this origin. */
+declare function usePeers(options?: {
+    name?: string;
+}): readonly Peer[];
+/** This client's own id on the presence bus (matches patch origin ids). */
+declare function useClientId(options?: {
+    name?: string;
+}): string;
+
+interface UseLeaderOptions extends LeaderOptions {
+    /** Which bus to elect on. Defaults to the shared default name. */
+    name?: string;
+}
+
+/**
+ * Who currently holds the seat on this bus, and whether it is us. Exactly one
+ * tab leads; opening another does not steal it, and closing the leader hands it
+ * over at once.
+ */
+declare function useLeader(options?: UseLeaderOptions): LeaderSnapshot;
+/** Is this tab the leader? */
+declare function useIsLeader(options?: UseLeaderOptions): boolean;
+/**
+ * Run an effect only in the tab that holds the seat, and tear it down when the
+ * seat moves. The one place to put "exactly one tab owns the socket".
+ */
+declare function useLeaderEffect(effect: () => void | (() => void), options?: UseLeaderOptions): void;
+
+type OpenedWindowStatus = 'idle' | 'opening' | 'connected' | 'done' | 'closed-early' | 'error';
+interface UseOpenedWindow<Out extends MessageMap, In extends MessageMap, R> {
+    /** Call from a click handler (popup blockers require a user gesture). */
+    open: () => void;
+    status: OpenedWindowStatus;
+    /** The child's finish() value, once status is 'done'. */
+    result: R | undefined;
+    error: unknown;
+    /** Post to the child; no-op while nothing is open. */
+    post: OpenedWindow<Out, In, R>['post'];
+    close: () => void;
+}
+
+/**
+ * Drive an openWindow() flow from a component: the factory is called on
+ * open(), and the child window's lifecycle is folded into render state.
+ * Reopening replaces the previous window; a stale window's outcome is ignored.
+ */
+declare function useOpenedWindow<Out extends MessageMap, In extends MessageMap, R = unknown>(factory: () => OpenedWindow<Out, In, R>): UseOpenedWindow<Out, In, R>;
+
+export { type AnyStore, type ChannelHooks, type DefineStoreOptions, type OpenedWindowStatus, type ShareScope, type StoreHooks, type UseLeaderOptions, type UseOpenedWindow, type UseSharedStateOptions, defineChannel, defineStore, getLeader, getSharedStore, useChannel, useClientId, useIsLeader, useLeader, useLeaderEffect, useMessage, useOpenedWindow, usePeers, useSend, useSharedState };

package/dist/index.js

@@ -1,3 +1,4 @@
+'use client';
 import {
   DEFAULT_NAME,
   configureStore,
@@ -7,7 +8,7 @@ import {
   getStore,
   useClientId,
   usePeers
-} from "./chunk-Y67BCTU6.js";
+} from "./chunk-PNFJW7QK.js";
 
 // src/use-shared-state.ts
 import { useCallback, useSyncExternalStore } from "react";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "use-everywhere",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "React hooks for state and messages shared across tabs, windows, and workers",
   "license": "MIT",
   "author": "Jonatan Kruszewski <jonakrusze@gmail.com>",
@@ -26,16 +26,29 @@
   },
   "type": "module",
   "sideEffects": false,
-  "main": "./dist/index.js",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
     },
     "./devtools": {
-      "types": "./dist/devtools/index.d.ts",
-      "import": "./dist/devtools/index.js"
+      "import": {
+        "types": "./dist/devtools/index.d.ts",
+        "default": "./dist/devtools/index.js"
+      },
+      "require": {
+        "types": "./dist/devtools/index.d.cts",
+        "default": "./dist/devtools/index.cjs"
+      }
     }
   },
   "files": [
@@ -92,23 +105,23 @@
     }
   ],
   "dependencies": {
-    "@use-everywhere/core": "0.3.0"
+    "@use-everywhere/core": "0.4.0"
   },
   "peerDependencies": {
     "react": ">=18"
   },
   "devDependencies": {
-    "@size-limit/preset-small-lib": "^12.1.0",
-    "@testing-library/react": "^16.3.0",
-    "@types/react": "^19.1.8",
+    "@size-limit/preset-small-lib": "^13.0.1",
+    "@testing-library/react": "^16.3.2",
+    "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
     "@vitest/coverage-v8": "^4.1.10",
-    "happy-dom": "^20.10.6",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
-    "size-limit": "^12.1.0",
-    "tsup": "^8.5.0",
-    "typescript": "^5.8.3",
+    "happy-dom": "^20.11.1",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "size-limit": "^13.0.1",
+    "tsup": "^8.5.1",
+    "typescript": "^6.0.3",
     "vitest": "^4.1.10"
   },
   "typesVersions": {