tab-bridge 0.2.0 → 0.4.0

package/README.md

@@ -26,7 +26,7 @@
 
 <br />
 
-[**Getting Started**](#-getting-started) · [**API**](#-api-reference) · [**React**](#%EF%B8%8F-react) · [**Architecture**](#-architecture) · [**Examples**](#-examples) · [**Live Demo**](https://serbi2012.github.io/tab-bridge/)
+[**Getting Started**](#-getting-started) · [**API**](#-api-reference) · [**React**](#%EF%B8%8F-react) · [**Zustand**](#-zustand) · [**Jotai**](#-jotai) · [**Redux**](#-redux) · [**DevTools**](#-devtools) · [**Next.js**](#-nextjs) · [**Architecture**](#-architecture) · [**Examples**](#-examples) · [**Live Demo**](https://serbi2012.github.io/tab-bridge/)
 
 </div>
 
@@ -76,6 +76,12 @@ Intercept, validate, and transform state changes before they're applied
 #### 💾 State Persistence
 Survive page reloads with key whitelisting and custom storage backends
 
+#### 🐻 Zustand / Jotai / Redux
+First-class integrations — `tabSync`, `atomWithTabSync`, `tabSyncEnhancer`
+
+#### 🔧 DevTools Panel
+Floating `<TabSyncDevTools />` with state inspection, tab list, and event log
+
 #### 📦 Zero Dependencies
 Native browser APIs only, ~4KB gzipped, fully tree-shakable
 
@@ -513,6 +519,326 @@ Components using only `useTabSyncActions` **never re-render** due to state chang
 
 <br />
 
+## 🐻 Zustand
+
+One-line integration for [Zustand](https://github.com/pmndrs/zustand) stores — all tabs stay in sync automatically.
+
+```bash
+npm install zustand
+```
+
+```ts
+import { create } from 'zustand';
+import { tabSync } from 'tab-bridge/zustand';
+
+const useStore = create(
+  tabSync(
+    (set) => ({
+      count: 0,
+      theme: 'light',
+      inc: () => set((s) => ({ count: s.count + 1 })),
+      setTheme: (t: string) => set({ theme: t }),
+    }),
+    { channel: 'my-app' }
+  )
+);
+
+// That's it — all tabs now share the same state.
+// Functions (actions) are never synced, only data.
+```
+
+<details open>
+<summary><b>📋 Middleware Options</b></summary>
+
+<br />
+
+| Option | Type | Default | Description |
+|:-------|:-----|:--------|:------------|
+| `channel` | `string` | `'tab-sync-zustand'` | Channel name for cross-tab communication |
+| `include` | `string[]` | — | Only sync these keys (mutually exclusive with `exclude`) |
+| `exclude` | `string[]` | — | Exclude these keys from syncing (mutually exclusive with `include`) |
+| `merge` | `(local, remote, key) => value` | LWW | Custom conflict resolution |
+| `transport` | `'broadcast-channel'` \| `'local-storage'` | auto | Force a specific transport |
+| `debug` | `boolean` | `false` | Enable debug logging |
+| `onError` | `(error) => void` | — | Error callback |
+| `onSyncReady` | `(instance) => void` | — | Access the underlying `TabSyncInstance` for RPC/leader features |
+
+</details>
+
+<details>
+<summary><b>🔑 Selective Key Sync</b></summary>
+
+<br />
+
+```ts
+const useStore = create(
+  tabSync(
+    (set) => ({
+      count: 0,
+      theme: 'light',
+      localDraft: '',       // won't be synced
+      inc: () => set((s) => ({ count: s.count + 1 })),
+    }),
+    {
+      channel: 'my-app',
+      exclude: ['localDraft'],   // keep this key local-only
+    }
+  )
+);
+```
+
+</details>
+
+<details>
+<summary><b>🤝 Works with Zustand <code>persist</code></b></summary>
+
+<br />
+
+Compose with Zustand's `persist` middleware — order doesn't matter:
+
+```ts
+import { persist } from 'zustand/middleware';
+
+const useStore = create(
+  persist(
+    tabSync(
+      (set) => ({
+        count: 0,
+        inc: () => set((s) => ({ count: s.count + 1 })),
+      }),
+      { channel: 'my-app' }
+    ),
+    { name: 'my-store' }
+  )
+);
+```
+
+</details>
+
+<details>
+<summary><b>🚀 Advanced: Access tab-bridge Instance</b></summary>
+
+<br />
+
+Use `onSyncReady` to access the underlying `TabSyncInstance` for RPC, leader election, and other advanced features:
+
+```ts
+let syncInstance: TabSyncInstance | null = null;
+
+const useStore = create(
+  tabSync(
+    (set) => ({ count: 0 }),
+    {
+      channel: 'my-app',
+      onSyncReady: (instance) => {
+        syncInstance = instance;
+
+        instance.handle('getCount', () => useStore.getState().count);
+
+        instance.onLeader(() => {
+          console.log('This tab is now the leader');
+          return () => console.log('Leadership lost');
+        });
+      },
+    }
+  )
+);
+```
+
+</details>
+
+<br />
+
+---
+
+<br />
+
+## 🧪 Jotai
+
+Synchronize individual [Jotai](https://jotai.org) atoms across browser tabs with zero boilerplate.
+
+```bash
+npm install tab-bridge jotai
+```
+
+### Quick Start
+
+```ts
+import { atomWithTabSync } from 'tab-bridge/jotai';
+
+const countAtom = atomWithTabSync('count', 0, { channel: 'my-app' });
+const themeAtom = atomWithTabSync('theme', 'light', { channel: 'my-app' });
+```
+
+Use them like regular atoms — `useAtom(countAtom)` works as expected. Changes are automatically synced to all tabs.
+
+### Options
+
+| Option | Type | Default | Description |
+|---|---|---|---|
+| `channel` | `string` | `'tab-sync-jotai'` | Channel name for cross-tab communication |
+| `transport` | `'broadcast-channel' \| 'local-storage'` | auto-detect | Force a specific transport |
+| `debug` | `boolean` | `false` | Enable debug logging |
+| `onError` | `(error: Error) => void` | — | Error callback |
+| `onSyncReady` | `(instance: TabSyncInstance) => void` | — | Access underlying instance |
+
+### How It Works
+
+Each atom creates its own `createTabSync` instance scoped to `${channel}:${key}`. The instance is created when the atom is first subscribed to and destroyed when the last subscriber unmounts.
+
+### Derived Atoms
+
+Derived atoms work out of the box:
+
+```ts
+import { atom } from 'jotai';
+
+const doubledAtom = atom((get) => get(countAtom) * 2);
+// Automatically updates when countAtom syncs from another tab
+```
+
+<br />
+
+---
+
+<br />
+
+## 🏪 Redux
+
+Synchronize your Redux (or Redux Toolkit) store across browser tabs via a **store enhancer**.
+
+```bash
+npm install tab-bridge redux       # or @reduxjs/toolkit
+```
+
+### Quick Start
+
+```ts
+import { configureStore } from '@reduxjs/toolkit';
+import { tabSyncEnhancer } from 'tab-bridge/redux';
+
+const store = configureStore({
+  reducer: { counter: counterReducer, theme: themeReducer },
+  enhancers: (getDefault) =>
+    getDefault().concat(tabSyncEnhancer({ channel: 'my-app' })),
+});
+```
+
+Every dispatch that changes state is automatically synced. Remote changes are merged via an internal `@@tab-bridge/MERGE` action — no reducer changes needed.
+
+### Options
+
+| Option | Type | Default | Description |
+|---|---|---|---|
+| `channel` | `string` | `'tab-sync-redux'` | Channel name |
+| `include` | `string[]` | — | Only sync these top-level keys (slice names) |
+| `exclude` | `string[]` | — | Exclude these top-level keys |
+| `merge` | `(local, remote, key) => unknown` | LWW | Custom conflict resolution |
+| `transport` | `'broadcast-channel' \| 'local-storage'` | auto-detect | Force transport |
+| `debug` | `boolean` | `false` | Debug logging |
+| `onError` | `(error: Error) => void` | — | Error callback |
+| `onSyncReady` | `(instance: TabSyncInstance) => void` | — | Access underlying instance |
+
+### Selective Sync
+
+```ts
+tabSyncEnhancer({
+  channel: 'my-app',
+  include: ['counter', 'settings'],  // only sync these slices
+  // exclude: ['auth'],              // or exclude specific slices
+})
+```
+
+### Design Decision: State-Based Sync
+
+The enhancer diffs top-level state keys after each dispatch rather than replaying actions. This guarantees consistency regardless of reducer purity and works with any middleware stack.
+
+<br />
+
+---
+
+<br />
+
+## 🔧 DevTools
+
+A floating development panel for inspecting tab-bridge state, tabs, and events in real time.
+
+```tsx
+import { TabSyncDevTools } from 'tab-bridge/react';
+
+function App() {
+  return (
+    <TabSyncProvider options={{ initial: { count: 0 }, channel: 'app' }}>
+      <MyApp />
+      {process.env.NODE_ENV === 'development' && <TabSyncDevTools />}
+    </TabSyncProvider>
+  );
+}
+```
+
+### Features
+
+| Tab | Description |
+|---|---|
+| **State** | Live JSON view of current state + manual editing (textarea → Apply) |
+| **Tabs** | Active tab list with leader badge and "you" indicator |
+| **Log** | Real-time event stream — state changes, tab joins/leaves |
+
+### Props
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `position` | `'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left'` | `'bottom-right'` | Panel position |
+| `defaultOpen` | `boolean` | `false` | Start expanded |
+
+**Tree-shakeable** — if you never import `TabSyncDevTools`, it won't appear in your production bundle.
+
+<br />
+
+---
+
+<br />
+
+## 📘 Next.js
+
+Using tab-bridge with **Next.js App Router**? Since tab-bridge relies on browser APIs, all usage must be in Client Components.
+
+```tsx
+// app/providers/tab-sync-provider.tsx
+'use client';
+
+import { TabSyncProvider } from 'tab-bridge/react';
+
+export function AppTabSyncProvider({ children }: { children: React.ReactNode }) {
+  return (
+    <TabSyncProvider options={{ initial: { count: 0 }, channel: 'my-app' }}>
+      {children}
+    </TabSyncProvider>
+  );
+}
+```
+
+```tsx
+// app/layout.tsx
+import { AppTabSyncProvider } from './providers/tab-sync-provider';
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html><body>
+      <AppTabSyncProvider>{children}</AppTabSyncProvider>
+    </body></html>
+  );
+}
+```
+
+> **Full guide**: See [`docs/NEXTJS.md`](./docs/NEXTJS.md) for SSR safety patterns, hydration mismatch prevention, `useEffect` initialization, and Zustand integration with Next.js.
+
+<br />
+
+---
+
+<br />
+
 ## 🚨 Error Handling
 
 Structured errors with error codes for precise `catch` handling:
@@ -641,6 +967,19 @@ import {
 
 ## 💡 Examples
 
+### 🎯 Interactive Demos
+
+Try these demos live — open multiple tabs to see real-time synchronization in action:
+
+| Demo | Description | Features |
+|:-----|:-----------|:---------|
+| [**Collaborative Editor**](https://serbi2012.github.io/tab-bridge/collaborative-editor.html) | Multi-tab real-time text editing | State Sync, Typing Indicators |
+| [**Shopping Cart**](https://serbi2012.github.io/tab-bridge/shopping-cart.html) | Cart synced across all tabs + persistent | State Sync, Persistence |
+| [**Leader Dashboard**](https://serbi2012.github.io/tab-bridge/leader-dashboard.html) | Only leader fetches data, followers use RPC | Leader Election, RPC, callAll |
+| [**Full Feature Demo**](https://serbi2012.github.io/tab-bridge/) | All features in one page | Everything |
+
+### Code Examples
+
 <details>
 <summary><b>🔐 Shared Authentication State</b></summary>
 

package/dist/index.d.cts

@@ -1,5 +1,7 @@
-import { R as RPCMap, T as TabSyncOptions, a as TabSyncInstance, C as ChangeMeta, b as TabInfo, c as RPCCallAllResult, M as Middleware, d as MiddlewareContext, P as PersistOptions } from './instance-5LIItazN.cjs';
-export { L as LeaderOptions, e as MiddlewareResult, f as RPCArgs, g as RPCResult } from './instance-5LIItazN.cjs';
+import { R as RPCMap, T as TabSyncInstance, C as ChangeMeta, a as TabInfo, b as RPCCallAllResult } from './instance-hvEUHx6i.cjs';
+export { c as RPCArgs, d as RPCResult } from './instance-hvEUHx6i.cjs';
+import { T as TabSyncOptions, M as Middleware, a as MiddlewareContext, P as PersistOptions } from './options-DmHyGTL0.cjs';
+export { L as LeaderOptions, b as MiddlewareResult } from './options-DmHyGTL0.cjs';
 
 declare const PROTOCOL_VERSION = 1;
 interface StateUpdatePayload {

package/dist/index.d.ts

@@ -1,5 +1,7 @@
-import { R as RPCMap, T as TabSyncOptions, a as TabSyncInstance, C as ChangeMeta, b as TabInfo, c as RPCCallAllResult, M as Middleware, d as MiddlewareContext, P as PersistOptions } from './instance-5LIItazN.js';
-export { L as LeaderOptions, e as MiddlewareResult, f as RPCArgs, g as RPCResult } from './instance-5LIItazN.js';
+import { R as RPCMap, T as TabSyncInstance, C as ChangeMeta, a as TabInfo, b as RPCCallAllResult } from './instance-hvEUHx6i.js';
+export { c as RPCArgs, d as RPCResult } from './instance-hvEUHx6i.js';
+import { T as TabSyncOptions, M as Middleware, a as MiddlewareContext, P as PersistOptions } from './options-iN7Rnvwj.js';
+export { L as LeaderOptions, b as MiddlewareResult } from './options-iN7Rnvwj.js';
 
 declare const PROTOCOL_VERSION = 1;
 interface StateUpdatePayload {

package/dist/{instance-5LIItazN.d.cts → instance-hvEUHx6i.d.cts}

@@ -13,65 +13,6 @@ interface ChangeMeta {
     readonly timestamp: number;
 }
 
-interface MiddlewareContext<TState extends Record<string, unknown>> {
-    readonly key: keyof TState;
-    readonly value: unknown;
-    readonly previousValue: unknown;
-    readonly meta: ChangeMeta;
-}
-/**
- * Return `false` to reject the change, `{ value }` to transform it,
- * or `void`/`undefined` to pass through unchanged.
- */
-type MiddlewareResult = {
-    value: unknown;
-} | false;
-interface Middleware<TState extends Record<string, unknown> = Record<string, unknown>> {
-    readonly name: string;
-    /** Intercept local `set` / `patch` calls before they are applied. */
-    onSet?: (ctx: MiddlewareContext<TState>) => MiddlewareResult | void;
-    /** Called after any state change (local or remote) has been committed. */
-    afterChange?: (key: keyof TState, value: unknown, meta: ChangeMeta) => void;
-    /** Cleanup when the instance is destroyed. */
-    onDestroy?: () => void;
-}
-
-interface PersistOptions<TState extends Record<string, unknown> = Record<string, unknown>> {
-    /** Storage key. Default: `'tab-sync:state'` */
-    key?: string;
-    /** Only persist these keys (whitelist). */
-    include?: (keyof TState)[];
-    /** Exclude these keys from persistence (blacklist). */
-    exclude?: (keyof TState)[];
-    /** Custom serializer. Default: `JSON.stringify` */
-    serialize?: (state: Partial<TState>) => string;
-    /** Custom deserializer. Default: `JSON.parse` */
-    deserialize?: (raw: string) => Partial<TState>;
-    /** Debounce persistence writes in ms. Default: `100` */
-    debounce?: number;
-    /** Custom storage backend. Default: `localStorage` */
-    storage?: Pick<Storage, 'getItem' | 'setItem' | 'removeItem'>;
-    /**
-     * Schema version for state migration. When the persisted version
-     * differs from this value, `migrate` is called.
-     */
-    version?: number;
-    /**
-     * Migration function called when persisted version differs from current.
-     *
-     * ```ts
-     * persist: {
-     *   version: 2,
-     *   migrate: (oldState, oldVersion) => ({
-     *     ...oldState,
-     *     newField: oldVersion < 2 ? 'default' : oldState.newField,
-     *   }),
-     * }
-     * ```
-     */
-    migrate?: (oldState: Partial<TState>, oldVersion: number) => Partial<TState>;
-}
-
 /**
  * Define your RPC contract for full type inference:
  *
@@ -99,37 +40,6 @@ type RPCArgs<TMap extends RPCMap, M extends string> = M extends keyof TMap ? TMa
 /** Resolve result type for a method. Falls back to `unknown` for unregistered methods. */
 type RPCResult<TMap extends RPCMap, M extends string> = M extends keyof TMap ? TMap[M]['result'] : unknown;
 
-interface LeaderOptions {
-    /** Heartbeat interval in ms. Default: `2000` */
-    heartbeatInterval?: number;
-    /** Leader timeout in ms. Default: `6000` */
-    leaderTimeout?: number;
-}
-interface TabSyncOptions<TState extends Record<string, unknown> = Record<string, unknown>> {
-    /** Initial state used before sync completes. */
-    initial?: TState;
-    /** Channel name — only tabs sharing the same name communicate. Default: `'tab-sync'` */
-    channel?: string;
-    /** Force a specific transport layer. Default: auto-detect. */
-    transport?: 'broadcast-channel' | 'local-storage';
-    /** Custom merge function for LWW conflict resolution. */
-    merge?: (localValue: unknown, remoteValue: unknown, key: keyof TState) => unknown;
-    /** Enable leader election. Default: `true` */
-    leader?: boolean | LeaderOptions;
-    /** Heartbeat interval in ms. Default: `2000` */
-    heartbeatInterval?: number;
-    /** Leader timeout in ms. Default: `6000` */
-    leaderTimeout?: number;
-    /** Enable debug logging. Default: `false` */
-    debug?: boolean;
-    /** Persist state across page reloads. `true` uses defaults, or pass options. */
-    persist?: PersistOptions<TState> | boolean;
-    /** Middleware pipeline for intercepting state changes. */
-    middlewares?: Middleware<TState>[];
-    /** Error callback for non-fatal errors (storage, channel, etc.). */
-    onError?: (error: Error) => void;
-}
-
 interface TabSyncInstance<TState extends Record<string, unknown>, TRPCMap extends RPCMap = RPCMap> {
     /** Read a single value by key. */
     get<K extends keyof TState>(key: K): TState[K];
@@ -281,4 +191,4 @@ interface TabSyncInstance<TState extends Record<string, unknown>, TRPCMap extend
     readonly ready: boolean;
 }
 
-export type { ChangeMeta as C, LeaderOptions as L, Middleware as M, PersistOptions as P, RPCMap as R, TabSyncOptions as T, TabSyncInstance as a, TabInfo as b, RPCCallAllResult as c, MiddlewareContext as d, MiddlewareResult as e, RPCArgs as f, RPCResult as g };
+export type { ChangeMeta as C, RPCMap as R, TabSyncInstance as T, TabInfo as a, RPCCallAllResult as b, RPCArgs as c, RPCResult as d };

package/dist/{instance-5LIItazN.d.ts → instance-hvEUHx6i.d.ts}

@@ -13,65 +13,6 @@ interface ChangeMeta {
     readonly timestamp: number;
 }
 
-interface MiddlewareContext<TState extends Record<string, unknown>> {
-    readonly key: keyof TState;
-    readonly value: unknown;
-    readonly previousValue: unknown;
-    readonly meta: ChangeMeta;
-}
-/**
- * Return `false` to reject the change, `{ value }` to transform it,
- * or `void`/`undefined` to pass through unchanged.
- */
-type MiddlewareResult = {
-    value: unknown;
-} | false;
-interface Middleware<TState extends Record<string, unknown> = Record<string, unknown>> {
-    readonly name: string;
-    /** Intercept local `set` / `patch` calls before they are applied. */
-    onSet?: (ctx: MiddlewareContext<TState>) => MiddlewareResult | void;
-    /** Called after any state change (local or remote) has been committed. */
-    afterChange?: (key: keyof TState, value: unknown, meta: ChangeMeta) => void;
-    /** Cleanup when the instance is destroyed. */
-    onDestroy?: () => void;
-}
-
-interface PersistOptions<TState extends Record<string, unknown> = Record<string, unknown>> {
-    /** Storage key. Default: `'tab-sync:state'` */
-    key?: string;
-    /** Only persist these keys (whitelist). */
-    include?: (keyof TState)[];
-    /** Exclude these keys from persistence (blacklist). */
-    exclude?: (keyof TState)[];
-    /** Custom serializer. Default: `JSON.stringify` */
-    serialize?: (state: Partial<TState>) => string;
-    /** Custom deserializer. Default: `JSON.parse` */
-    deserialize?: (raw: string) => Partial<TState>;
-    /** Debounce persistence writes in ms. Default: `100` */
-    debounce?: number;
-    /** Custom storage backend. Default: `localStorage` */
-    storage?: Pick<Storage, 'getItem' | 'setItem' | 'removeItem'>;
-    /**
-     * Schema version for state migration. When the persisted version
-     * differs from this value, `migrate` is called.
-     */
-    version?: number;
-    /**
-     * Migration function called when persisted version differs from current.
-     *
-     * ```ts
-     * persist: {
-     *   version: 2,
-     *   migrate: (oldState, oldVersion) => ({
-     *     ...oldState,
-     *     newField: oldVersion < 2 ? 'default' : oldState.newField,
-     *   }),
-     * }
-     * ```
-     */
-    migrate?: (oldState: Partial<TState>, oldVersion: number) => Partial<TState>;
-}
-
 /**
  * Define your RPC contract for full type inference:
  *
@@ -99,37 +40,6 @@ type RPCArgs<TMap extends RPCMap, M extends string> = M extends keyof TMap ? TMa
 /** Resolve result type for a method. Falls back to `unknown` for unregistered methods. */
 type RPCResult<TMap extends RPCMap, M extends string> = M extends keyof TMap ? TMap[M]['result'] : unknown;
 
-interface LeaderOptions {
-    /** Heartbeat interval in ms. Default: `2000` */
-    heartbeatInterval?: number;
-    /** Leader timeout in ms. Default: `6000` */
-    leaderTimeout?: number;
-}
-interface TabSyncOptions<TState extends Record<string, unknown> = Record<string, unknown>> {
-    /** Initial state used before sync completes. */
-    initial?: TState;
-    /** Channel name — only tabs sharing the same name communicate. Default: `'tab-sync'` */
-    channel?: string;
-    /** Force a specific transport layer. Default: auto-detect. */
-    transport?: 'broadcast-channel' | 'local-storage';
-    /** Custom merge function for LWW conflict resolution. */
-    merge?: (localValue: unknown, remoteValue: unknown, key: keyof TState) => unknown;
-    /** Enable leader election. Default: `true` */
-    leader?: boolean | LeaderOptions;
-    /** Heartbeat interval in ms. Default: `2000` */
-    heartbeatInterval?: number;
-    /** Leader timeout in ms. Default: `6000` */
-    leaderTimeout?: number;
-    /** Enable debug logging. Default: `false` */
-    debug?: boolean;
-    /** Persist state across page reloads. `true` uses defaults, or pass options. */
-    persist?: PersistOptions<TState> | boolean;
-    /** Middleware pipeline for intercepting state changes. */
-    middlewares?: Middleware<TState>[];
-    /** Error callback for non-fatal errors (storage, channel, etc.). */
-    onError?: (error: Error) => void;
-}
-
 interface TabSyncInstance<TState extends Record<string, unknown>, TRPCMap extends RPCMap = RPCMap> {
     /** Read a single value by key. */
     get<K extends keyof TState>(key: K): TState[K];
@@ -281,4 +191,4 @@ interface TabSyncInstance<TState extends Record<string, unknown>, TRPCMap extend
     readonly ready: boolean;
 }
 
-export type { ChangeMeta as C, LeaderOptions as L, Middleware as M, PersistOptions as P, RPCMap as R, TabSyncOptions as T, TabSyncInstance as a, TabInfo as b, RPCCallAllResult as c, MiddlewareContext as d, MiddlewareResult as e, RPCArgs as f, RPCResult as g };
+export type { ChangeMeta as C, RPCMap as R, TabSyncInstance as T, TabInfo as a, RPCCallAllResult as b, RPCArgs as c, RPCResult as d };

package/dist/jotai/index.cjs

@@ -0,0 +1,44 @@
+'use strict';
+
+var chunkTGEXRVAL_cjs = require('../chunk-TGEXRVAL.cjs');
+var vanilla = require('jotai/vanilla');
+
+function atomWithTabSync(key, initialValue, options) {
+  const base_channel = options?.channel ?? "tab-sync-jotai";
+  const instance_channel = `${base_channel}:${key}`;
+  let sync_instance = null;
+  const base_atom = vanilla.atom(initialValue);
+  base_atom.onMount = (setAtom) => {
+    if (!chunkTGEXRVAL_cjs.isBrowser) return;
+    const instance = chunkTGEXRVAL_cjs.createTabSync({
+      channel: instance_channel,
+      initial: { value: initialValue },
+      transport: options?.transport,
+      debug: options?.debug,
+      onError: options?.onError
+    });
+    sync_instance = instance;
+    options?.onSyncReady?.(instance);
+    const unsub = instance.on("value", (remote_value, meta) => {
+      if (!meta.isLocal) {
+        setAtom(remote_value);
+      }
+    });
+    return () => {
+      unsub();
+      instance.destroy();
+      sync_instance = null;
+    };
+  };
+  const sync_atom = vanilla.atom(
+    (get) => get(base_atom),
+    (get, set, update) => {
+      const next_value = typeof update === "function" ? update(get(base_atom)) : update;
+      set(base_atom, next_value);
+      sync_instance?.set("value", next_value);
+    }
+  );
+  return sync_atom;
+}
+
+exports.atomWithTabSync = atomWithTabSync;