tab-bridge 0.1.1 → 0.2.0

package/README.md

@@ -17,8 +17,8 @@
 [![npm version](https://img.shields.io/npm/v/tab-bridge?style=for-the-badge&color=cb3837&label=npm&logo=npm&logoColor=white)](https://www.npmjs.com/package/tab-bridge)
 [![bundle size](https://img.shields.io/bundlephobia/minzip/tab-bridge?style=for-the-badge&color=6ead0a&label=size&logo=webpack&logoColor=white)](https://bundlephobia.com/package/tab-bridge)
 [![TypeScript](https://img.shields.io/badge/TypeScript-first-3178c6?style=for-the-badge&logo=typescript&logoColor=white)](https://www.typescriptlang.org)
-[![license](https://img.shields.io/github/license/serbi2012/tab-sync?style=for-the-badge&color=blue&logo=open-source-initiative&logoColor=white)](./LICENSE)
-[![GitHub stars](https://img.shields.io/github/stars/serbi2012/tab-sync?style=for-the-badge&color=yellow&logo=github&logoColor=white)](https://github.com/serbi2012/tab-sync)
+[![license](https://img.shields.io/github/license/serbi2012/tab-bridge?style=for-the-badge&color=blue&logo=open-source-initiative&logoColor=white)](./LICENSE)
+[![GitHub stars](https://img.shields.io/github/stars/serbi2012/tab-bridge?style=for-the-badge&color=yellow&logo=github&logoColor=white)](https://github.com/serbi2012/tab-bridge)
 
 <br />
 
@@ -26,7 +26,7 @@
 
 <br />
 
-[**Getting Started**](#-getting-started) · [**API**](#-api-reference) · [**React**](#%EF%B8%8F-react) · [**Architecture**](#-architecture) · [**Examples**](#-examples)
+[**Getting Started**](#-getting-started) · [**API**](#-api-reference) · [**React**](#%EF%B8%8F-react) · [**Architecture**](#-architecture) · [**Examples**](#-examples) · [**Live Demo**](https://serbi2012.github.io/tab-bridge/)
 
 </div>
 
@@ -59,23 +59,23 @@ LWW conflict resolution with batched broadcasts and custom merge strategies
 Bully algorithm with heartbeat monitoring and automatic failover
 
 #### 📡 Cross-Tab RPC
-Fully typed arguments, Promise-based calls with timeout handling
+Fully typed arguments, Promise-based calls with `callAll` broadcast support
 
-#### ⚛️ React Hooks
-Built on `useSyncExternalStore` for zero-tear concurrent rendering
+#### 🔄 Atomic Transactions
+`transaction()` for safe multi-key updates with abort support
 
 </td>
 <td width="50%" valign="top">
 
+#### ⚛️ React Hooks
+7 hooks built on `useSyncExternalStore` — zero-tear concurrent rendering
+
 #### 🛡️ Middleware Pipeline
 Intercept, validate, and transform state changes before they're applied
 
 #### 💾 State Persistence
 Survive page reloads with key whitelisting and custom storage backends
 
-#### 🔒 End-to-End Type Safety
-Discriminated unions, full type inference, and generic constraints
-
 #### 📦 Zero Dependencies
 Native browser APIs only, ~4KB gzipped, fully tree-shakable
 
@@ -175,6 +175,12 @@ sync.get('theme')                       // Read single key
 sync.getAll()                           // Read full state (stable reference)
 sync.set('theme', 'dark')              // Write single key → broadcasts to all tabs
 sync.patch({ theme: 'dark', count: 5 }) // Write multiple keys in one broadcast
+
+// Atomic multi-key update — return null to abort
+sync.transaction((state) => {
+  if (state.count >= 100) return null;  // abort
+  return { count: state.count + 1, lastUpdated: Date.now() };
+});
 ```
 
 </details>
@@ -196,6 +202,13 @@ sync.select(
   (state) => state.items.filter(i => i.done).length,
   (doneCount) => updateBadge(doneCount),
 );
+
+// Debounced derived state — callback fires at most once per 200ms
+sync.select(
+  (state) => state.items.length,
+  (count) => analytics.track('item_count', count),
+  { debounce: 200 },
+);
 ```
 
 </details>
@@ -248,6 +261,10 @@ sync.handle('getServerTime', () => ({
 
 const { iso } = await sync.call('leader', 'getServerTime');
 const result  = await sync.call(tabId, 'compute', payload, 10_000);
+
+// Broadcast RPC to ALL other tabs and collect responses
+const results = await sync.callAll('getStatus');
+// results: Array<{ tabId: string; result?: T; error?: string }>
 ```
 
 </details>
@@ -359,7 +376,8 @@ First-class React integration built on `useSyncExternalStore` for **zero-tear co
 
 ```tsx
 import {
-  TabSyncProvider, useTabSync, useTabSyncValue, useTabSyncSelector, useIsLeader,
+  TabSyncProvider, useTabSync, useTabSyncValue, useTabSyncSelector,
+  useIsLeader, useTabs, useLeaderInfo, useTabSyncActions,
 } from 'tab-bridge/react';
 ```
 
@@ -444,6 +462,51 @@ function LeaderIndicator() {
 
 </details>
 
+<details open>
+<summary><b><code>useTabs()</code> — Active tab list</b></summary>
+
+<br />
+
+```tsx
+function TabList() {
+  const tabs = useTabs();
+  return <p>{tabs.length} tab(s) open</p>;
+}
+```
+
+</details>
+
+<details open>
+<summary><b><code>useLeaderInfo()</code> — Leader tab info</b></summary>
+
+<br />
+
+```tsx
+function LeaderDisplay() {
+  const leader = useLeaderInfo();
+  if (!leader) return <p>No leader yet</p>;
+  return <p>Leader: {leader.id}</p>;
+}
+```
+
+</details>
+
+<details open>
+<summary><b><code>useTabSyncActions()</code> — Write-only (no re-renders)</b></summary>
+
+<br />
+
+```tsx
+function IncrementButton() {
+  const { set, patch, transaction } = useTabSyncActions<MyState>();
+  return <button onClick={() => set('count', prev => prev + 1)}>+1</button>;
+}
+```
+
+Components using only `useTabSyncActions` **never re-render** due to state changes — perfect for write-only controls.
+
+</details>
+
 <br />
 
 ---
@@ -725,7 +788,7 @@ MIT © [serbi2012](https://github.com/serbi2012)
 
 <br />
 
-<a href="https://github.com/serbi2012/tab-sync">
+<a href="https://github.com/serbi2012/tab-bridge">
   <img src="https://img.shields.io/badge/GitHub-tab--bridge-4f46e5?style=for-the-badge&logo=github&logoColor=white" alt="GitHub" />
 </a>
 &nbsp;